allow creating from git clone url

Author: selfcontained

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

@@ -10,7 +10,7 @@ import { useCurrentOrg } from "../organizations/orgs-query";
 import { useRefreshProjects } from "./list-projects-query";
 import { CreateProjectParams, Project } from "@gitpod/gitpod-protocol";
 
-type CreateProjectArgs = Omit<CreateProjectParams, "teamId">;
+export type CreateProjectArgs = Omit<CreateProjectParams, "teamId">;
 
 export const useCreateProject = () => {
     const refreshProjects = useRefreshProjects();

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

@@ -0,0 +1,80 @@
+/**
+ * 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 { FC, useCallback, useMemo } from "react";
+import isURL from "validator/lib/isURL";
+import { CreateProjectArgs } from "../../data/projects/create-project-mutation";
+import { Subheading } from "../../components/typography/headings";
+import { Button } from "../../components/Button";
+import { useToast } from "../../components/toasts/Toasts";
+
+type Props = {
+    repoSearchFilter: string;
+    isCreating: boolean;
+    onCreateProject: (args: CreateProjectArgs) => void;
+};
+export const NewProjectCreateFromURL: FC<Props> = ({ repoSearchFilter, isCreating, onCreateProject }) => {
+    const { toast } = useToast();
+    const showCreateFromURL = useMemo(() => {
+        // TODO: Only accounts for https urls, need to account for ssh clone urls too?
+        const looksLikeURL = isURL(repoSearchFilter, {
+            require_protocol: true,
+            protocols: ["https"],
+        });
+
+        const hasTrailingGit = /\.git$/.test(repoSearchFilter);
+
+        return looksLikeURL && hasTrailingGit;
+    }, [repoSearchFilter]);
+
+    const normalizedURL = useMemo(() => {
+        let url = repoSearchFilter.toLowerCase().trim();
+
+        return url;
+    }, [repoSearchFilter]);
+
+    const handleCreate = useCallback(() => {
+        let name = "";
+        let slug = "";
+
+        try {
+            // try and parse the url for owner/repo path parts
+            console.log("url: ", normalizedURL.substring(0, normalizedURL.length - 4));
+            const [owner, repo] = new URL(normalizedURL.substring(0, normalizedURL.length - 4)).pathname.split("/");
+            if (!owner && !repo) {
+                throw new Error();
+            }
+            name = repo || owner;
+            slug = repo || owner;
+        } catch (e) {
+            toast("Sorry, it looks like we can't handle that URL. Is it a valid git clone url?");
+            return;
+        }
+
+        onCreateProject({
+            name,
+            slug,
+            cloneUrl: normalizedURL,
+            appInstallationId: "",
+        });
+    }, [normalizedURL, onCreateProject, toast]);
+
+    if (!showCreateFromURL) {
+        return null;
+    }
+
+    return (
+        <div className="flex flex-col items-center">
+            <Subheading>Create project from Git clone url?</Subheading>
+
+            <pre className="my-2 font-mono text-sm">{normalizedURL}</pre>
+
+            <Button onClick={handleCreate} loading={isCreating}>
+                Create Project
+            </Button>
+        </div>
+    );
+};

components/dashboard/src/projects/new-project/NewProjectRepoList.tsx

@@ -15,7 +15,7 @@ type Props = {
 };
 export const NewProjectRepoList: FC<Props> = ({ filteredRepos, noReposAvailable, onRepoSelected }) => {
     return (
-        <div className="p-6 flex-col">
+        <>
             {filteredRepos.length > 0 && (
                 <div className="overscroll-contain max-h-80 overflow-y-auto pr-2">
                     {filteredRepos.map((r, index) => (
@@ -58,7 +58,7 @@ export const NewProjectRepoList: FC<Props> = ({ filteredRepos, noReposAvailable,
                 </div>
             )}
             {!noReposAvailable && filteredRepos.length === 0 && <p className="text-center">No Results</p>}
-        </div>
+        </>
     );
 };
 

components/dashboard/src/projects/new-project/NewProjectRepoSelection.tsx

@@ -13,12 +13,13 @@ import { trackEvent } from "../../Analytics";
 import { NewProjectSearchInput } from "./NewProjectSearchInput";
 import { NewProjectAccountSelector } from "./NewProjectAccountSelector";
 import { NewProjectRepoList } from "./NewProjectRepoList";
-import { useCreateProject } from "../../data/projects/create-project-mutation";
+import { CreateProjectArgs, useCreateProject } from "../../data/projects/create-project-mutation";
 import { NewProjectAuthRequired } from "./NewProjectAuthRequired";
 import { useToast } from "../../components/toasts/Toasts";
 import { useProviderRepositoriesForUser } from "../../data/git-providers/provider-repositories-query";
 import { NewProjectSubheading } from "./NewProjectSubheading";
 import { openReconfigureWindow } from "./reconfigure-github";
+import { NewProjectCreateFromURL } from "./NewProjectCreateFromURL";
 
 type Props = {
     selectedProviderHost?: string;
@@ -90,29 +91,33 @@ export const NewProjectRepoSelection: FC<Props> = ({ selectedProviderHost, onPro
         });
     }, [selectedAccount]);
 
-    // Creates the project
-    const handleRepoSelected = useCallback(
-        (repo) => {
-            createProject.mutate(
-                {
-                    name: repo.name,
-                    cloneUrl: repo.cloneUrl,
-                    slug: repo.path || repo.name,
-                    appInstallationId: String(repo.installationId),
+    const onCreateProject = useCallback(
+        (args: CreateProjectArgs) => {
+            createProject.mutate(args, {
+                onSuccess: (project) => {
+                    onProjectCreated(project);
                 },
-                {
-                    onSuccess: (project) => {
-                        onProjectCreated(project);
-                    },
-                    onError: (error) => {
-                        toast(error?.message ?? "Failed to create new project.");
-                    },
+                onError: (error) => {
+                    toast(error?.message ?? "Failed to create new project.");
                 },
-            );
+            });
         },
         [createProject, onProjectCreated, toast],
     );
 
+    // Creates the project
+    const handleRepoSelected = useCallback(
+        (repo) => {
+            onCreateProject({
+                name: repo.name,
+                cloneUrl: repo.cloneUrl,
+                slug: repo.path || repo.name,
+                appInstallationId: String(repo.installationId),
+            });
+        },
+        [onCreateProject],
+    );
+
     // Adjusts selectedAccount when repos change
     useEffect(() => {
         if (reposInAccounts?.length === 0) {
@@ -180,6 +185,13 @@ export const NewProjectRepoSelection: FC<Props> = ({ selectedProviderHost, onPro
                     </div>
                 </div>
             )}
+            {(filteredRepos?.length ?? 0) === 0 && repoSearchFilter.length > 0 && (
+                <NewProjectCreateFromURL
+                    repoSearchFilter={repoSearchFilter}
+                    isCreating={createProject.isLoading}
+                    onCreateProject={onCreateProject}
+                />
+            )}
         </>
     );
 };