Brad/exp 458 fe allow pasting in a git clone url to create project as (#18534)

* first pass at organizing components for project creation

* allow creating from git clone url

* cleanup

* add creating state

* cleanup

* Update components/dashboard/src/projects/new-project/NewProjectCreateFromURL.tsx

Co-authored-by: Filip Troníček <[email protected]>

* improve git clone url parsing

* Adding cancelation when query unmounts

* fixing slug

* showing some help text if they enter a url that isn't a clone url

---------

Co-authored-by: Filip Troníček <[email protected]>

Author: selfcontained

components/dashboard/src/data/git-providers/github-queries.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { getGitpodService } from "../../service/service";
+import { useAuthProviders } from "../auth-providers/auth-provider-query";
+import { useCurrentUser } from "../../user-context";
+
+export const useIsGithubAppEnabled = () => {
+    return useQuery(["github-app-enabled"], async () => {
+        return await getGitpodService().server.isGitHubAppEnabled();
+    });
+};
+
+export const useAreGithubWebhooksUnauthorized = (providerHost: string) => {
+    const { data: authProviders } = useAuthProviders();
+    const { data: isGitHubAppEnabled } = useIsGithubAppEnabled();
+    const { data: token } = useGetGitToken(providerHost);
+
+    // If the app is enabled, authorized
+    if (isGitHubAppEnabled) {
+        return false;
+    }
+
+    // If we don't have auth providers or the provider host, we can't check yet, treat as authorized
+    if (!authProviders || !providerHost) {
+        return false;
+    }
+
+    // Find matching auth provider - if none, treat as authorized
+    const ap = authProviders?.find((ap) => ap.host === providerHost);
+    if (!ap || ap.authProviderType !== "GitHub") {
+        return false;
+    }
+
+    // Finally, check token for the right scopes - if missing, then uanuthorized
+    if (!token || !token.scopes.includes("repo")) {
+        return true;
+    }
+};
+
+export const useGetGitToken = (providerHost: string) => {
+    const user = useCurrentUser();
+
+    return useQuery(
+        ["git-token", { userId: user?.id }, { providerHost }],
+        async () => {
+            return await getGitpodService().server.getToken({ host: providerHost });
+        },
+        {
+            enabled: !!user && !!providerHost,
+        },
+    );
+};

components/dashboard/src/data/git-providers/provider-repositories-query.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { getGitpodService } from "../../service/service";
+import { useCurrentUser } from "../../user-context";
+import { CancellationTokenSource } from "vscode-jsonrpc";
+
+type UseProviderRepositoriesQueryArgs = {
+    provider: string;
+    installationId?: string;
+};
+export const useProviderRepositoriesForUser = ({ provider, installationId }: UseProviderRepositoriesQueryArgs) => {
+    const user = useCurrentUser();
+
+    return useQuery(
+        ["provider-repositories", { userId: user?.id }, { provider, installationId }],
+        async ({ signal }) => {
+            // jsonrpc cancellation token that we subscribe to the abort signal provided by react-query
+            const cancelToken = new CancellationTokenSource();
+
+            signal?.addEventListener("abort", () => {
+                cancelToken.cancel();
+            });
+
+            return await getGitpodService().server.getProviderRepositoriesForUser(
+                {
+                    provider,
+                    hints: { installationId },
+                },
+                // @ts-ignore - not sure why types don't support this
+                cancelToken.token,
+            );
+        },
+        {
+            enabled: !!provider,
+        },
+    );
+};

components/dashboard/src/data/projects/create-project-mutation.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useMutation } from "@tanstack/react-query";
+import { getGitpodService } from "../../service/service";
+import { useCurrentOrg } from "../organizations/orgs-query";
+import { useRefreshProjects } from "./list-projects-query";
+import { CreateProjectParams, Project } from "@gitpod/gitpod-protocol";
+
+export type CreateProjectArgs = Omit<CreateProjectParams, "teamId">;
+
+export const useCreateProject = () => {
+    const refreshProjects = useRefreshProjects();
+    const { data: org } = useCurrentOrg();
+
+    return useMutation<Project, Error, CreateProjectArgs>(
+        async ({ name, slug, cloneUrl, appInstallationId }) => {
+            if (!org) {
+                throw new Error("No org currently selected");
+            }
+
+            return await getGitpodService().server.createProject({
+                name,
+                slug,
+                cloneUrl,
+                teamId: org.id,
+                appInstallationId,
+            });
+        },
+        {
+            onSuccess: (project) => {
+                if (org) {
+                    refreshProjects(org.id);
+                }
+
+                // Kick off a prebuild for the new project
+                getGitpodService().server.triggerPrebuild(project.id, null);
+            },
+        },
+    );
+};