Drop project name from project urls (#18909)

* drop project name from url * drop comment * handle undefined params * remove Project.slug()
gitpod-io · Oct 12, 2023 · 2be4c6e · 2be4c6e
1 parent 49ebd66
commit 2be4c6e
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 70 deletions.
diff --git a/components/dashboard/src/projects/Events.tsx b/components/dashboard/src/projects/Events.tsx
@@ -5,7 +5,7 @@
  */
 
 import dayjs from "dayjs";
-import { PrebuildEvent, Project } from "@gitpod/gitpod-protocol";
+import { PrebuildEvent } from "@gitpod/gitpod-protocol";
 import { useCallback, useEffect, useState } from "react";
 import Header from "../components/Header";
 import { ItemsList, Item, ItemField } from "../components/ItemsList";
@@ -209,7 +209,7 @@ export default function EventsPage() {
                                                 {event.prebuildId && (
                                                     <a
                                                         className="text-base text-gray-900 dark:text-gray-50 font-medium uppercase mb-1 cursor-pointer"
-                                                        href={`/projects/${Project.slug(project!)}/${event.prebuildId}`}
+                                                        href={`/projects/${project?.id || ""}/${event.prebuildId}`}
                                                     >
                                                         {status}
                                                     </a>

diff --git a/components/dashboard/src/projects/NewProject.tsx b/components/dashboard/src/projects/NewProject.tsx
@@ -64,7 +64,7 @@ export default function NewProject() {
                 <Heading1>Project Created</Heading1>
                 <Subheading className="mt-2 text-center">
                     Created{" "}
-                    <a className="gp-link" href={`/projects/${Project.slug(project)}/settings`}>
+                    <a className="gp-link" href={`/projects/${project.id}/settings`}>
                         {project.name}
                     </a>{" "}
                     {!currentTeam ? (
@@ -81,7 +81,7 @@ export default function NewProject() {
                 </Subheading>
 
                 <div className="mt-12 flex space-x-2">
-                    <a href={`/projects/${Project.slug(project)}/settings`}>
+                    <a href={`/projects/${project.id}/settings`}>
                         <Button type="secondary" onClick={onNewWorkspace}>
                             Go to Project Settings
                         </Button>

diff --git a/components/dashboard/src/projects/Prebuild.tsx b/components/dashboard/src/projects/Prebuild.tsx
@@ -4,7 +4,7 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { PrebuildWithStatus, Project } from "@gitpod/gitpod-protocol";
+import { PrebuildWithStatus } from "@gitpod/gitpod-protocol";
 import dayjs from "dayjs";
 import { useEffect, useMemo, useState } from "react";
 import { Redirect, useHistory, useParams } from "react-router";
@@ -108,7 +108,9 @@ export default function PrebuildPage() {
             setIsRerunningPrebuild(true);
             await getGitpodService().server.triggerPrebuild(prebuild.info.projectId, prebuild.info.branch);
             // TODO: Open a Prebuilds page that's specific to `prebuild.info.branch`?
-            history.push(`/projects/${Project.slug(project!)}/prebuilds`);
+            if (project) {
+                history.push(`/projects/${project.id}/prebuilds`);
+            }
         } catch (error) {
             console.error("Could not rerun prebuild", error);
         } finally {

diff --git a/components/dashboard/src/projects/Prebuilds.tsx b/components/dashboard/src/projects/Prebuilds.tsx
@@ -198,7 +198,7 @@ export default function PrebuildsPage(props: { project?: Project; isAdminDashboa
                         .filter(filter)
                         .sort(prebuildSorter)
                         .map((p, index) => (
-                            <Link to={`/projects/${Project.slug(project!)}/${p.info.id}`} className="cursor-pointer">
+                            <Link to={`/projects/${project?.id ?? ""}/${p.info.id}`} className="cursor-pointer">
                                 <Item key={`prebuild-${p.info.id}`}>
                                     <ItemField
                                         className={`flex items-center my-auto md:w-3/12 xl:w-4/12 ${

diff --git a/components/dashboard/src/projects/Project.tsx b/components/dashboard/src/projects/Project.tsx
@@ -151,7 +151,7 @@ export default function ProjectsPage() {
         try {
             setIsLoading(true);
             const prebuildResult = await getGitpodService().server.triggerPrebuild(project.id, branch.name);
-            history.push(`/projects/${Project.slug(project!)}/${prebuildResult.prebuildId}`);
+            history.push(`/projects/${project.id}/${prebuildResult.prebuildId}`);
         } finally {
             setIsLoading(false);
         }
@@ -176,7 +176,7 @@ export default function ProjectsPage() {
             setIsResuming(true);
             const response = await getGitpodService().server.triggerPrebuild(project.id, null);
             setIsConsideredInactive(false);
-            history.push(`/projects/${Project.slug(project!)}/${response.prebuildId}`);
+            history.push(`/projects/${project.id}/${response.prebuildId}`);
         } catch (error) {
             console.error(error);
         } finally {
@@ -352,9 +352,7 @@ export default function ProjectsPage() {
                                                         className="text-base text-gray-900 dark:text-gray-50 font-medium uppercase mb-1 cursor-pointer"
                                                         href={
                                                             prebuild
-                                                                ? `/projects/${Project.slug(project!)}/${
-                                                                      prebuild.info.id
-                                                                  }`
+                                                                ? `/projects/${project.id}/${prebuild.info.id}`
                                                                 : ""
                                                         }
                                                     >

diff --git a/components/dashboard/src/projects/ProjectListItem.tsx b/components/dashboard/src/projects/ProjectListItem.tsx
@@ -44,7 +44,7 @@ export const ProjectListItem: FunctionComponent<ProjectListItemProps> = ({ proje
                                     },
                                     {
                                         title: "Settings",
-                                        link: `/projects/${Project.slug(project)}/settings`,
+                                        link: `/projects/${project.id}/settings`,
                                         separator: true,
                                     },
                                     {
@@ -65,19 +65,19 @@ export const ProjectListItem: FunctionComponent<ProjectListItemProps> = ({ proje
                 </div>
                 <div className="h-10 px-6 py-1 text-gray-400 text-sm">
                     <span className="hover:text-gray-600 dark:hover:text-gray-300">
-                        <Link to={`/projects/${Project.slug(project!)}`}>Branches</Link>
+                        <Link to={`/projects/${project.id}`}>Branches</Link>
                     </span>
                     <span className="mx-2 my-auto">·</span>
                     <span className="hover:text-gray-600 dark:hover:text-gray-300">
-                        <Link to={`/projects/${Project.slug(project!)}/prebuilds`}>Prebuilds</Link>
+                        <Link to={`/projects/${project.id}/prebuilds`}>Prebuilds</Link>
                     </span>
                 </div>
             </div>
             <div className="h-10 px-4 border rounded-b-xl dark:border-gray-800 bg-gray-100 border-gray-100 dark:bg-gray-800">
                 {!enablePrebuilds ? (
                     <div className="flex h-full text-sm">
                         <Link
-                            to={`/projects/${Project.slug(project!)}/settings`}
+                            to={`/projects/${project.id}/settings`}
                             className="flex-shrink-0 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                         >
                             Enable Prebuilds &rarr;
@@ -86,7 +86,7 @@ export const ProjectListItem: FunctionComponent<ProjectListItemProps> = ({ proje
                 ) : prebuild ? (
                     <div className="flex flex-row h-full text-sm space-x-4">
                         <Link
-                            to={`/projects/${Project.slug(project!)}/${prebuild?.info?.id}`}
+                            to={`/projects/${project.id}/${prebuild?.info?.id}`}
                             className="flex-grow flex items-center group space-x-2 truncate"
                         >
                             {prebuildStatusIcon(prebuild)}
@@ -104,7 +104,7 @@ export const ProjectListItem: FunctionComponent<ProjectListItemProps> = ({ proje
                             </Tooltip>
                         </Link>
                         <Link
-                            to={`/projects/${Project.slug(project!)}/prebuilds`}
+                            to={`/projects/${project.id}/prebuilds`}
                             className="flex-shrink-0 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                         >
                             View All &rarr;
@@ -136,7 +136,7 @@ type ProjectLinkProps = {
 };
 const ProjectLink: FunctionComponent<ProjectLinkProps> = ({ project }) => {
     return (
-        <Link to={`/projects/${Project.slug(project)}`}>
+        <Link to={`/projects/${project.id}`}>
             <span className="text-xl font-semibold">{project.name}</span>
         </Link>
     );

diff --git a/components/dashboard/src/projects/project-context.tsx b/components/dashboard/src/projects/project-context.tsx
@@ -27,50 +27,13 @@ export const ProjectContextProvider: React.FC = ({ children }) => {
     return <ProjectContext.Provider value={ctx}>{children}</ProjectContext.Provider>;
 };
 
-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;
-        if (!projectSlug) {
-            return undefined;
-        }
-        const result = parseProjectSlug(projectSlug);
-        if (!result) {
-            return undefined;
-        }
-        return result;
-    }, [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 } {
     const { project, setProject } = useContext(ProjectContext);
     const [loading, setLoading] = useState(true);
     const user = useCurrentUser();
     const org = useCurrentOrg();
     const orgs = useOrganizations();
-    const projectInfo = useProjectInfo();
+    const projectIdFromRoute = useRouteMatch<{ projectId?: string }>("/projects/:projectId")?.params?.projectId;
     const location = useLocation();
     const history = useHistory();
     const listProjects = useListProjectsQuery();
@@ -82,7 +45,7 @@ export function useCurrentProject(): { project: Project | undefined; loading: bo
             // without a user we are still consider this loading
             return;
         }
-        if (!projectInfo) {
+        if (!projectIdFromRoute) {
             setProject(undefined);
             setLoading(false);
             return;
@@ -97,15 +60,15 @@ export function useCurrentProject(): { project: Project | undefined; loading: bo
             const projects = listProjects.data?.projects || [];
 
             // Find project matching with slug, otherwise with name
-            const project = projects.find((p) => p.id === projectInfo.id);
+            const project = projects.find((p) => p.id === projectIdFromRoute);
             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) => p.id === projectInfo.id);
+                    const project = projects.find((p) => p.id === projectIdFromRoute);
                     if (project) {
                         // redirect to the other org
                         history.push(location.pathname + "?org=" + t.id);
@@ -115,7 +78,7 @@ export function useCurrentProject(): { project: Project | undefined; loading: bo
             setProject(project);
             setLoading(false);
         })();
-    }, [setProject, org.data, user, orgs.data, location, history, projectInfo, listProjects.data]);
+    }, [setProject, org.data, user, orgs.data, location, history, listProjects.data, projectIdFromRoute]);
 
     return { project, loading };
 }
diff --git a/components/dashboard/src/projects/projects.routes.ts b/components/dashboard/src/projects/projects.routes.ts
@@ -17,26 +17,25 @@ export function getProjectTabs(project: Project | undefined): TabEntry[] {
     if (!project) {
         return [];
     }
-    const projectSlug = Project.slug(project);
     return [
         {
             title: "Branches",
-            link: `/projects/${projectSlug}`,
+            link: `/projects/${project.id}`,
         },
         {
             title: "Prebuilds",
-            link: `/projects/${projectSlug}/prebuilds`,
+            link: `/projects/${project.id}/prebuilds`,
         },
         {
             title: "Settings",
-            link: `/projects/${projectSlug}/settings`,
+            link: `/projects/${project.id}/settings`,
             alternatives: getProjectSettingsMenu(project).flatMap((e) => e.link),
         },
     ];
 }
 
 export function getProjectSettingsMenu(project?: Project) {
-    const slug = project ? Project.slug(project) : "unknown";
+    const slug = project?.id ?? "unknown";
     return [
         {
             title: "General",

diff --git a/components/gitpod-protocol/src/teams-projects-protocol.ts b/components/gitpod-protocol/src/teams-projects-protocol.ts
@@ -74,10 +74,6 @@ export namespace Project {
         };
     };
 
-    export function slug(p: Project): string {
-        return p.name + "-" + p.id;
-    }
-
     export type PrebuildSettingsWithDefaults = Required<Pick<PrebuildSettings, "prebuildInterval">> & PrebuildSettings;
 
     export const PREBUILD_SETTINGS_DEFAULTS: PrebuildSettingsWithDefaults = {