improve git clone url parsing

Author: selfcontained

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

@@ -18,39 +18,57 @@ type Props = {
 };
 export const NewProjectCreateFromURL: FC<Props> = ({ repoSearchFilter, isCreating, onCreateProject }) => {
     const { toast } = useToast();
+
+    const normalizedURL = useMemo(() => {
+        let url = repoSearchFilter.toLowerCase().trim();
+
+        // Just parse out the origin/pathname to remove any query params or hash
+        try {
+            const parsedURL = new URL(url);
+            const { origin, pathname } = parsedURL;
+            url = `${origin}${pathname}`;
+        } catch (e) {
+            return url;
+        }
+
+        return url;
+    }, [repoSearchFilter]);
+
     const showCreateFromURL = useMemo(() => {
         // TODO: Only accounts for https urls, need to account for ssh clone urls too?
-        const looksLikeURL = isURL(repoSearchFilter, {
+        const looksLikeURL = isURL(normalizedURL, {
             require_protocol: true,
             protocols: ["https"],
         });
 
-        const hasTrailingGit = /\.git$/.test(repoSearchFilter);
+        const hasTrailingGit = /\.git$/.test(normalizedURL);
 
         return looksLikeURL && hasTrailingGit;
-    }, [repoSearchFilter]);
-
-    const normalizedURL = useMemo(() => {
-        let url = repoSearchFilter.toLowerCase().trim();
-
-        return url;
-    }, [repoSearchFilter]);
+    }, [normalizedURL]);
 
     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("/");
+            const segments = new URL(normalizedURL.substring(0, normalizedURL.length - ".git".length)).pathname
+                .split("/")
+                .filter(Boolean);
+
+            // Repo is last segment
+            const repo = segments.pop();
+            // owner is everything else
+            const owner = segments.join("/");
+
             if (!owner && !repo) {
                 throw new Error();
             }
+
             name = repo || owner;
-            slug = repo || owner;
+            slug = (repo || owner).toLowerCase();
         } catch (e) {
-            toast("Sorry, it looks like we can't handle that URL. Is it a valid git clone url?");
+            toast("Sorry, it looks like we can't handle that URL. Is it a valid git clone URL?");
             return;
         }
 

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

@@ -32,7 +32,7 @@ export const NewProjectRepoSelection: FC<Props> = ({ selectedProviderHost, onPro
     const createProject = useCreateProject();
 
     // Component state managed by this component
-    const [selectedAccount, _setSelectedAccount] = useState<string>();
+    const [selectedAccount, setSelectedAccount] = useState<string>();
     const [repoSearchFilter, setRepoSearchFilter] = useState("");
     const [installationId, setInstallationId] = useState<string>();
 
@@ -43,8 +43,8 @@ export const NewProjectRepoSelection: FC<Props> = ({ selectedProviderHost, onPro
     });
 
     // Wrap setting selected account so we can clear the repo search filter at the same time
-    const updateSelectedAccount = useCallback((account?: string) => {
-        _setSelectedAccount(account);
+    const setSelectedAccountAndClearSearch = useCallback((account?: string) => {
+        setSelectedAccount(account);
         setRepoSearchFilter("");
     }, []);
 
@@ -117,22 +117,22 @@ export const NewProjectRepoSelection: FC<Props> = ({ selectedProviderHost, onPro
         [onCreateProject],
     );
 
-    // Adjusts selectedAccount when repos change
+    // Adjusts selectedAccount when repos change if we don't have a selected account
     useEffect(() => {
         if (reposInAccounts?.length === 0) {
-            updateSelectedAccount(undefined);
-        } else {
+            setSelectedAccountAndClearSearch(undefined);
+        } else if (!selectedAccount) {
             const first = reposInAccounts?.[0];
             if (!!first?.installationUpdatedAt) {
                 const mostRecent = reposInAccounts?.reduce((prev, current) =>
                     (prev.installationUpdatedAt || 0) > (current.installationUpdatedAt || 0) ? prev : current,
                 );
-                updateSelectedAccount(mostRecent?.account);
+                setSelectedAccountAndClearSearch(mostRecent?.account);
             } else {
-                updateSelectedAccount(first?.account);
+                setSelectedAccountAndClearSearch(first?.account);
             }
         }
-    }, [reposInAccounts, updateSelectedAccount]);
+    }, [reposInAccounts, selectedAccount, setSelectedAccountAndClearSearch]);
 
     if (isLoading) {
         return <ReposLoading />;
@@ -150,7 +150,7 @@ export const NewProjectRepoSelection: FC<Props> = ({ selectedProviderHost, onPro
                         accounts={accounts}
                         selectedAccount={selectedAccount}
                         selectedProviderHost={selectedProviderHost}
-                        onAccountSelected={updateSelectedAccount}
+                        onAccountSelected={setSelectedAccountAndClearSearch}
                         onAddGitHubAccount={reconfigure}
                         onSelectGitProvider={onChangeGitProvider}
                     />