DEVPROD-5762 Replace all hardcoded slugs with an enum slug and consol…

…idate slug name to associated resource (#18)

apps/spruce/src/analytics/distroSettings/useDistroSettingsAnalytics.ts

@@ -1,12 +1,13 @@
 import { useParams } from "react-router-dom";
 import { useAnalyticsRoot } from "analytics/useAnalyticsRoot";
+import { slugs } from "constants/routes";
 
 type Action =
   | { name: "Save distro"; section: string }
   | { name: "Create new distro"; newDistroId: string }
   | { name: "Duplicate distro"; newDistroId: string };
 
 export const useDistroSettingsAnalytics = () => {
-  const { distroId } = useParams<{ distroId: string }>();
+  const { [slugs.distroId]: distroId } = useParams();
   return useAnalyticsRoot<Action>("DistroSettings", { distroId });
 };

apps/spruce/src/analytics/patches/useProjectPatchesAnalytics.ts

@@ -1,5 +1,6 @@
 import { useParams } from "react-router-dom";
 import { useAnalyticsRoot } from "analytics/useAnalyticsRoot";
+import { slugs } from "constants/routes";
 
 type Action =
   | { name: "Change Page Size" }
@@ -11,6 +12,6 @@ type Action =
   | { name: "Filter Patches"; filterBy: string };
 
 export const useProjectPatchesAnalytics = () => {
-  const { projectIdentifier } = useParams<{ projectIdentifier: string }>();
+  const { [slugs.projectIdentifier]: projectIdentifier } = useParams();
   return useAnalyticsRoot<Action>("ProjectPatches", { projectIdentifier });
 };

apps/spruce/src/analytics/projectSettings/useProjectSettingsAnalytics.ts

@@ -1,5 +1,6 @@
 import { useParams } from "react-router-dom";
 import { useAnalyticsRoot } from "analytics/useAnalyticsRoot";
+import { slugs } from "constants/routes";
 
 type Action =
   | { name: "Save project"; section: string }
@@ -12,6 +13,6 @@ type Action =
   | { name: "Duplicate project"; projectIdToCopy: string };
 
 export const useProjectSettingsAnalytics = () => {
-  const { projectIdentifier } = useParams<{ projectIdentifier: string }>();
+  const { [slugs.projectIdentifier]: projectIdentifier } = useParams();
   return useAnalyticsRoot<Action>("ProjectSettings", { projectIdentifier });
 };

apps/spruce/src/analytics/task/useAnnotationAnalytics.ts

@@ -1,6 +1,7 @@
 import { useQuery } from "@apollo/client";
 import { useParams } from "react-router-dom";
 import { useAnalyticsRoot } from "analytics/useAnalyticsRoot";
+import { slugs } from "constants/routes";
 import {
   BuildBaronQuery,
   BuildBaronQueryVariables,
@@ -26,21 +27,21 @@ type Action =
   | { name: "Add Task Annotation Suspected Issue" };
 
 export const useAnnotationAnalytics = () => {
-  const { id } = useParams<{ id: string }>();
+  const { [slugs.taskId]: taskId } = useParams();
   const [execution] = useQueryParam(RequiredQueryParams.Execution, 0);
 
   const { data: eventData } = useQuery<
     AnnotationEventDataQuery,
     AnnotationEventDataQueryVariables
   >(ANNOTATION_EVENT_DATA, {
-    variables: { taskId: id, execution },
+    variables: { taskId, execution },
     fetchPolicy: "cache-first",
   });
 
   const { data: bbData } = useQuery<BuildBaronQuery, BuildBaronQueryVariables>(
     BUILD_BARON,
     {
-      variables: { taskId: id, execution },
+      variables: { taskId, execution },
       fetchPolicy: "cache-first",
     },
   );
@@ -49,7 +50,7 @@ export const useAnnotationAnalytics = () => {
   const { buildBaronConfigured } = bbData?.buildBaron || {};
 
   return useAnalyticsRoot<Action>("Annotations", {
-    taskId: id,
+    taskId,
     annotation,
     bbConfigured: buildBaronConfigured,
   });

apps/spruce/src/analytics/task/useTaskAnalytics.ts

@@ -1,6 +1,7 @@
 import { useQuery } from "@apollo/client";
 import { useParams } from "react-router-dom";
 import { useAnalyticsRoot } from "analytics/useAnalyticsRoot";
+import { slugs } from "constants/routes";
 import {
   SaveSubscriptionForUserMutationVariables,
   TaskQuery,
@@ -69,11 +70,11 @@ type Action =
   | { name: "Submit Relevant Commit Selector"; type: CommitType };
 
 export const useTaskAnalytics = () => {
-  const { id } = useParams<{ id: string }>();
+  const { [slugs.taskId]: taskId } = useParams();
 
   const [execution] = useQueryParam(RequiredQueryParams.Execution, 0);
   const { data: eventData } = useQuery<TaskQuery, TaskQueryVariables>(TASK, {
-    variables: { taskId: id, execution },
+    variables: { taskId, execution },
     fetchPolicy: "cache-first",
   });
 
@@ -89,7 +90,7 @@ export const useTaskAnalytics = () => {
     taskStatus,
     execution,
     isLatestExecution: isLatestExecution.toString(),
-    taskId: id,
+    taskId,
     failedTestCount,
     projectIdentifier: identifier,
   });

apps/spruce/src/components/Content/index.tsx

@@ -5,7 +5,7 @@ import {
   UserPatchesRedirect,
   WaterfallCommitsRedirect,
 } from "components/Redirects";
-import { redirectRoutes, routes } from "constants/routes";
+import { redirectRoutes, routes, slugs } from "constants/routes";
 import { CommitQueue } from "pages/CommitQueue";
 import { Commits } from "pages/Commits";
 import { ConfigurePatch } from "pages/ConfigurePatch";
@@ -33,18 +33,18 @@ export const Content: React.FC = () => (
     <Route element={<Layout />}>
       <Route path="/" element={<Navigate to={routes.myPatches} />} />
       <Route path={routes.commits} element={<Commits />}>
-        <Route path=":projectIdentifier" element={null} />
+        <Route path={`:${slugs.projectIdentifier}`} element={null} />
       </Route>
       <Route path={routes.container} element={<Container />} />
       <Route
         path={redirectRoutes.waterfall}
         element={<WaterfallCommitsRedirect />}
       />
       <Route path={routes.configurePatch} element={<ConfigurePatch />}>
-        <Route path={tab} element={null} />
+        <Route path={`:${slugs.tab}`} element={null} />
       </Route>
       <Route path={`${routes.distroSettings}/*`} element={<Distro />}>
-        <Route path={tab} element={null} />
+        <Route path={`:${slugs.tab}`} element={null} />
       </Route>
       <Route
         path={redirectRoutes.distroSettings}
@@ -53,33 +53,33 @@ export const Content: React.FC = () => (
       <Route path={routes.host} element={<Host />} />
       <Route path={routes.hosts} element={<Hosts />} />
       <Route path={routes.jobLogs} element={<JobLogs />}>
-        <Route path=":groupId" element={null} />
+        <Route path={`:${slugs.groupId}`} element={null} />
       </Route>
       <Route path={routes.myPatches} element={<MyPatches />} />
       <Route path={routes.patch} element={<VersionPage />}>
-        <Route path={tab} element={null} />
+        <Route path={`:${slugs.tab}`} element={null} />
       </Route>
       <Route path={`${routes.preferences}/*`} element={<Preferences />}>
-        <Route path={tab} element={null} />
+        <Route path={`:${slugs.tab}`} element={null} />
       </Route>
       <Route path={routes.projectPatches} element={<ProjectPatches />} />
       <Route path={`${routes.projectSettings}/*`} element={<ProjectSettings />}>
-        <Route path={tab} element={null} />
+        <Route path={`:${slugs.tab}`} element={null} />
       </Route>
       <Route
         path={redirectRoutes.projectSettings}
         element={<ProjectSettingsRedirect />}
       />
       <Route path={`${routes.spawn}/*`} element={<Spawn />}>
-        <Route path={tab} element={null} />
+        <Route path={`:${slugs.tab}`} element={null} />
       </Route>
       <Route path={routes.commitQueue} element={<CommitQueue />} />
       <Route path={routes.task} element={<Task />}>
-        <Route path={tab} element={null} />
+        <Route path={`:${slugs.tab}`} element={null} />
       </Route>
       <Route path={routes.taskHistory} element={<TaskHistory />} />
       <Route path={routes.taskQueue} element={<TaskQueue />}>
-        <Route path=":distro" element={null} />
+        <Route path={`:${slugs.distroId}`} element={null} />
       </Route>
       <Route path={routes.userPatches} element={<UserPatches />} />
       <Route
@@ -88,11 +88,9 @@ export const Content: React.FC = () => (
       />
       <Route path={routes.variantHistory} element={<VariantHistory />} />
       <Route path={routes.version} element={<VersionPage />}>
-        <Route path={tab} element={null} />
+        <Route path={`:${slugs.tab}`} element={null} />
       </Route>
       <Route path="*" element={<PageDoesNotExist />} />
     </Route>
   </Routes>
 );
-
-const tab = ":tab";

apps/spruce/src/components/Header/Navbar.tsx

@@ -10,7 +10,12 @@ import Icon from "components/Icon";
 import HybridTree from "components/Icon/icons/HybridTree.svg";
 import { CURRENT_PROJECT } from "constants/cookies";
 import { wikiUrl } from "constants/externalResources";
-import { getCommitsRoute, getUserPatchesRoute, routes } from "constants/routes";
+import {
+  getCommitsRoute,
+  getUserPatchesRoute,
+  routes,
+  slugs,
+} from "constants/routes";
 import { size } from "constants/tokens";
 import { useAuthStateContext } from "context/Auth";
 import { UserQuery, SpruceConfigQuery } from "gql/generated/types";
@@ -33,9 +38,7 @@ export const Navbar: React.FC = () => {
   const { user } = userData || {};
   const { userId } = user || {};
 
-  const { projectIdentifier: projectFromUrl } = useParams<{
-    projectIdentifier: string;
-  }>();
+  const { [slugs.projectIdentifier]: projectFromUrl } = useParams();
   const currProject = Cookies.get(CURRENT_PROJECT);
 
   // Update current project cookie if the project in the URL is not an objectId and is not equal

apps/spruce/src/components/PatchActionButtons/addNotification/PatchNotificationModal.tsx

@@ -1,6 +1,7 @@
 import { useParams } from "react-router-dom";
 import { useVersionAnalytics } from "analytics";
 import { NotificationModal } from "components/Notifications";
+import { slugs } from "constants/routes";
 import { versionTriggers } from "constants/triggers";
 import { subscriptionMethods as versionSubscriptionMethods } from "types/subscription";
 
@@ -13,14 +14,14 @@ export const PatchNotificationModal: React.FC<ModalProps> = ({
   onCancel,
   visible,
 }) => {
-  const { id: patchId } = useParams<{ id: string }>();
-  const { sendEvent } = useVersionAnalytics(patchId);
+  const { [slugs.versionId]: versionId } = useParams();
+  const { sendEvent } = useVersionAnalytics(versionId);
 
   return (
     <NotificationModal
       data-cy="patch-notification-modal"
       onCancel={onCancel}
-      resourceId={patchId}
+      resourceId={versionId}
       sendAnalyticsEvent={(subscription) =>
         sendEvent({ name: "Add Notification", subscription })
       }

apps/spruce/src/components/Redirects/UserPatchesRedirect.tsx

@@ -1,7 +1,7 @@
 import { useParams, Navigate } from "react-router-dom";
-import { getUserPatchesRoute } from "constants/routes";
+import { getUserPatchesRoute, slugs } from "constants/routes";
 
 export const UserPatchesRedirect: React.FC = () => {
-  const { id } = useParams<{ id: string }>();
-  return <Navigate replace to={getUserPatchesRoute(id)} />;
+  const { [slugs.userId]: userId } = useParams();
+  return <Navigate replace to={getUserPatchesRoute(userId)} />;
 };

apps/spruce/src/components/Redirects/WaterfallCommitsRedirect.tsx

@@ -1,7 +1,7 @@
 import { useParams, Navigate } from "react-router-dom";
-import { getCommitsRoute } from "constants/routes";
+import { getCommitsRoute, slugs } from "constants/routes";
 
 export const WaterfallCommitsRedirect: React.FC = () => {
-  const { projectIdentifier } = useParams<{ projectIdentifier: string }>();
+  const { [slugs.projectIdentifier]: projectIdentifier } = useParams();
   return <Navigate to={getCommitsRoute(projectIdentifier)} />;
 };

apps/spruce/src/constants/routes.ts

@@ -74,38 +74,66 @@ const paths = {
   version: "/version",
   waterfall: "/waterfall",
 };
+
+export enum slugs {
+  buildId = "buildId",
+  podId = "podId",
+  distroId = "distroId",
+  groupId = "groupId",
+  hostId = "hostId",
+  patchId = "patchId",
+  projectIdentifier = "projectIdentifier",
+  tab = "tab",
+  taskId = "taskId",
+  taskName = "taskName",
+  variantName = "variantName",
+  versionId = "versionId",
+  userId = "userId",
+}
+export const idSlugs = [
+  slugs.buildId,
+  slugs.podId,
+  slugs.distroId,
+  slugs.hostId,
+  slugs.patchId,
+  slugs.projectIdentifier,
+  slugs.taskId,
+  slugs.versionId,
+  slugs.userId,
+];
+
 export const redirectRoutes = {
   distroSettings: paths.distros,
   projectSettings: paths.projects,
-  userPatches: `${paths.user}/:id`,
-  waterfall: `${paths.waterfall}/:projectIdentifier`,
+  userPatches: `${paths.user}/:${slugs.userId}`,
+  waterfall: `${paths.waterfall}/:${slugs.projectIdentifier}`,
 };
 
 export const routes = {
-  commitQueue: `${paths.commitQueue}/:projectIdentifier`,
+  commitQueue: `${paths.commitQueue}/:${slugs.projectIdentifier}`,
   commits: paths.commits,
-  configurePatch: `${paths.patch}/:id/configure`,
-  container: `${paths.container}/:id`,
-  distroSettings: `${paths.distro}/:distroId/${PageNames.Settings}`,
-  host: `${paths.host}/:id`,
+  configurePatch: `${paths.patch}/:${slugs.patchId}/configure`,
+  container: `${paths.container}/:${slugs.podId}`,
+  distroSettings: `${paths.distro}/:${slugs.distroId}/${PageNames.Settings}`,
+  host: `${paths.host}/:${slugs.hostId}`,
   hosts: paths.hosts,
-  jobLogs: `${paths.jobLogs}/:buildId`,
+  jobLogs: `${paths.jobLogs}/:${slugs.buildId}`,
   login: paths.login,
   myPatches: `${paths.user}/${PageNames.Patches}`,
-  patch: `${paths.patch}/:id`,
+  patch: `${paths.patch}/:${slugs.versionId}`,
   preferences: paths.preferences,
-  projectPatches: `${paths.project}/:projectIdentifier/${PageNames.Patches}`,
-  projectSettings: `${paths.project}/:projectIdentifier/${PageNames.Settings}`,
+  projectPatches: `${paths.project}/:${slugs.projectIdentifier}/${PageNames.Patches}`,
+  projectSettings: `${paths.project}/:${slugs.projectIdentifier}/${PageNames.Settings}`,
   spawn: paths.spawn,
   spawnHost: `${paths.spawn}/${SpawnTab.Host}`,
   spawnVolume: `${paths.spawn}/${SpawnTab.Volume}`,
-  task: `${paths.task}/:id`,
-  taskHistory: `${paths.taskHistory}/:projectIdentifier/:taskName`,
+  task: `${paths.task}/:${slugs.taskId}`,
+  taskHistory: `${paths.taskHistory}/:${slugs.projectIdentifier}/:${slugs.taskName}`,
   taskQueue: paths.taskQueue,
   user: `${paths.user}/*`,
-  userPatches: `${paths.user}/:id/${PageNames.Patches}`,
-  variantHistory: `${paths.variantHistory}/:projectIdentifier/:variantName`,
-  version: `${paths.version}/:id`,
+  userPatches: `${paths.user}/:${slugs.userId}/${PageNames.Patches}`,
+  variantHistory: `${paths.variantHistory}/:${slugs.projectIdentifier}/:${slugs.variantName}`,
+  version: `${paths.version}/:${slugs.versionId}`,
 };
 
 export const DEFAULT_PATCH_TAB = PatchTab.Tasks;

apps/spruce/src/hooks/useConfigurePatch.ts

@@ -1,6 +1,6 @@
 import { useEffect, useReducer } from "react";
 import { useNavigate, useLocation, useParams } from "react-router-dom";
-import { getPatchRoute } from "constants/routes";
+import { getPatchRoute, slugs } from "constants/routes";
 import {
   ConfigurePatchQuery,
   ParameterInput,
@@ -152,7 +152,7 @@ export const useConfigurePatch = (
 ): HookResult => {
   const navigate = useNavigate();
   const location = useLocation();
-  const { tab } = useParams<{ tab: PatchTab | null }>();
+  const { [slugs.tab]: tab } = useParams<{ [slugs.tab]: PatchTab | null }>();
 
   const { id, project } = patch;
   const { variants } = project;