[dashboard] unique project links (#18618)

Author: svenefftinge

components/dashboard/src/projects/project-context.tsx

@@ -7,7 +7,6 @@
 import { Project } from "@gitpod/gitpod-protocol";
 import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { useHistory, useLocation, useRouteMatch } from "react-router";
-import { validate as uuidValidate } from "uuid";
 import { useCurrentOrg, useOrganizations } from "../data/organizations/orgs-query";
 import { listAllProjects } from "../service/public-api";
 import { useCurrentUser } from "../user-context";
@@ -27,25 +26,41 @@ export const ProjectContextProvider: React.FC = ({ children }) => {
     return <ProjectContext.Provider value={ctx}>{children}</ProjectContext.Provider>;
 };
 
-export function useProjectSlugs(): { projectSlug?: string; prebuildId?: string } {
-    const projectsRouteMatch = useRouteMatch<{ projectSlug?: string; prebuildId?: string }>(
-        "/projects/:projectSlug?/:prebuildId?",
-    );
+interface ProjectInfo {
+    id: string;
+    name?: string;
+}
+
+export function useProjectInfo(): ProjectInfo | undefined {
+    const projectsRouteMatch = useRouteMatch<{ projectSlug?: string }>("/projects/:projectSlug");
 
     return useMemo(() => {
         const projectSlug = projectsRouteMatch?.params.projectSlug;
-        const result: { projectSlug?: string; prebuildId?: string } = {};
-        const reservedProjectSlugs = ["new"];
-        if (!projectSlug || reservedProjectSlugs.includes(projectSlug)) {
-            return result;
+        if (!projectSlug) {
+            return undefined;
         }
-        result.projectSlug = projectSlug;
-        const prebuildId = projectsRouteMatch?.params.prebuildId;
-        if (prebuildId && uuidValidate(prebuildId)) {
-            result.prebuildId = projectsRouteMatch?.params.prebuildId;
+        const result = parseProjectSlug(projectSlug);
+        if (!result) {
+            return undefined;
         }
         return result;
-    }, [projectsRouteMatch?.params.projectSlug, projectsRouteMatch?.params.prebuildId]);
+    }, [projectsRouteMatch?.params.projectSlug]);
+}
+
+const pattern: RegExp = /^((.+)-)?([a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12})$/;
+function parseProjectSlug(slug: string): ProjectInfo | undefined {
+    const match = slug.match(pattern);
+
+    if (match) {
+        const name = match[2];
+        const id = match[3];
+        return {
+            name,
+            id,
+        };
+    } else {
+        return undefined;
+    }
 }
 
 export function useCurrentProject(): { project: Project | undefined; loading: boolean } {
@@ -54,7 +69,7 @@ export function useCurrentProject(): { project: Project | undefined; loading: bo
     const user = useCurrentUser();
     const org = useCurrentOrg();
     const orgs = useOrganizations();
-    const slugs = useProjectSlugs();
+    const projectInfo = useProjectInfo();
     const location = useLocation();
     const history = useHistory();
 
@@ -65,7 +80,7 @@ export function useCurrentProject(): { project: Project | undefined; loading: bo
             // without a user we are still consider this loading
             return;
         }
-        if (!slugs.projectSlug) {
+        if (!projectInfo) {
             setProject(undefined);
             setLoading(false);
             return;
@@ -77,15 +92,15 @@ export function useCurrentProject(): { project: Project | undefined; loading: bo
             let projects = await listAllProjects({ orgId: org.data.id });
 
             // Find project matching with slug, otherwise with name
-            const project = projects.find((p) => Project.slug(p) === slugs.projectSlug);
+            const project = projects.find((p) => p.id === projectInfo.id);
             if (!project && orgs.data) {
                 // check other orgs
                 for (const t of orgs.data || []) {
                     if (t.id === org.data?.id) {
                         continue;
                     }
                     const projects = await listAllProjects({ orgId: t.id });
-                    const project = projects.find((p) => Project.slug(p) === slugs.projectSlug);
+                    const project = projects.find((p) => p.id === projectInfo.id);
                     if (project) {
                         // redirect to the other org
                         history.push(location.pathname + "?org=" + t.id);
@@ -95,7 +110,7 @@ export function useCurrentProject(): { project: Project | undefined; loading: bo
             setProject(project);
             setLoading(false);
         })();
-    }, [slugs.projectSlug, setProject, org.data, user, orgs.data, location, history]);
+    }, [setProject, org.data, user, orgs.data, location, history, projectInfo]);
 
     return { project, loading };
 }

components/gitpod-protocol/src/teams-projects-protocol.ts

@@ -52,7 +52,7 @@ export namespace Project {
     };
 
     export function slug(p: Project): string {
-        return p.slug || p.name || p.id;
+        return (p.slug || p.name) + "-" + p.id;
     }
 
     export interface Overview {