Replace all existing slugs with thier corresponding enum

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 });
 };

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 });
 };

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 });
 };

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,7 +27,7 @@ type Action =
   | { name: "Add Task Annotation Suspected Issue" };
 
 export const useAnnotationAnalytics = () => {
-  const { id } = useParams<{ id: string }>();
+  const { [slugs.id]: id } = useParams();
   const [execution] = useQueryParam(RequiredQueryParams.Execution, 0);
 
   const { data: eventData } = useQuery<

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,7 +70,7 @@ type Action =
   | { name: "Submit Relevant Commit Selector"; type: CommitType };
 
 export const useTaskAnalytics = () => {
-  const { id } = useParams<{ id: string }>();
+  const { [slugs.id]: id } = useParams();
 
   const [execution] = useQueryParam(RequiredQueryParams.Execution, 0);
   const { data: eventData } = useQuery<TaskQuery, TaskQueryVariables>(TASK, {

src/components/Header/Navbar.tsx

@@ -10,7 +10,12 @@ import Icon from "components/Icon";
 import ChristmasTree from "components/Icon/icons/ChristmasTree.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

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,7 +14,7 @@ export const PatchNotificationModal: React.FC<ModalProps> = ({
   onCancel,
   visible,
 }) => {
-  const { id: patchId } = useParams<{ id: string }>();
+  const { [slugs.id]: patchId } = useParams();
   const { sendEvent } = useVersionAnalytics(patchId);
 
   return (

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 }>();
+  const { [slugs.id]: id } = useParams();
   return <Navigate replace to={getUserPatchesRoute(id)} />;
 };

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)} />;
 };

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();
 
   const { id, project } = patch;
   const { variants } = project;

src/hooks/useProjectRedirect/index.ts

@@ -1,5 +1,6 @@
 import { useQuery } from "@apollo/client";
 import { useParams, useLocation, useNavigate } from "react-router-dom";
+import { slugs } from "constants/routes";
 import { ProjectQuery, ProjectQueryVariables } from "gql/generated/types";
 import { PROJECT } from "gql/queries";
 import { validators } from "utils";
@@ -19,9 +20,7 @@ interface UseProjectRedirectProps {
 export const useProjectRedirect = ({
   sendAnalyticsEvent = () => {},
 }: UseProjectRedirectProps) => {
-  const { projectIdentifier: project } = useParams<{
-    projectIdentifier: string;
-  }>();
+  const { [slugs.projectIdentifier]: project } = useParams();
   const navigate = useNavigate();
   const location = useLocation();
 

src/pages/CommitQueue.tsx

@@ -8,7 +8,7 @@ import { useParams } from "react-router-dom";
 import { PageTitle } from "components/PageTitle";
 import { ProjectSelect } from "components/ProjectSelect";
 import { PageWrapper } from "components/styles";
-import { getCommitQueueRoute } from "constants/routes";
+import { getCommitQueueRoute, slugs } from "constants/routes";
 import { useToastContext } from "context/toast";
 import {
   CommitQueueQuery,
@@ -21,7 +21,7 @@ import { CommitQueueCard } from "./commitqueue/CommitQueueCard";
 const { gray } = palette;
 
 export const CommitQueue: React.FC = () => {
-  const { projectIdentifier } = useParams<{ projectIdentifier: string }>();
+  const { [slugs.projectIdentifier]: projectIdentifier } = useParams();
   const dispatchToast = useToastContext();
   const { data, loading } = useQuery<
     CommitQueueQuery,

src/pages/JobLogs.tsx

@@ -6,7 +6,7 @@ import { useParams } from "react-router-dom";
 import { useJobLogsAnalytics } from "analytics/joblogs/useJobLogsAnalytics";
 import { PageWrapper, StyledRouterLink } from "components/styles";
 import { getParsleyBuildLogURL } from "constants/externalResources";
-import { getTaskRoute } from "constants/routes";
+import { getTaskRoute, slugs } from "constants/routes";
 import { size } from "constants/tokens";
 import { useToastContext } from "context/toast";
 import {
@@ -18,7 +18,7 @@ import { usePageTitle } from "hooks";
 import { JobLogsTable } from "./jobLogs/JobLogsTable";
 
 export const JobLogs = () => {
-  const { buildId } = useParams<{ buildId: string }>();
+  const { [slugs.buildId]: buildId } = useParams();
   const dispatchToast = useToastContext();
   const { sendEvent } = useJobLogsAnalytics();
 

src/pages/ProjectPatches.tsx

@@ -8,7 +8,7 @@ import { usePatchesQueryParams } from "components/PatchesPage/usePatchesQueryPar
 import { ProjectSelect } from "components/ProjectSelect";
 import { INCLUDE_COMMIT_QUEUE_PROJECT_PATCHES } from "constants/cookies";
 import { DEFAULT_POLL_INTERVAL } from "constants/index";
-import { getProjectPatchesRoute } from "constants/routes";
+import { getProjectPatchesRoute, slugs } from "constants/routes";
 import { useToastContext } from "context/toast";
 import {
   ProjectPatchesQuery,
@@ -23,7 +23,7 @@ export const ProjectPatches = () => {
   const dispatchToast = useToastContext();
   const analyticsObject = useProjectPatchesAnalytics();
 
-  const { projectIdentifier } = useParams<{ projectIdentifier: string }>();
+  const { [slugs.projectIdentifier]: projectIdentifier } = useParams();
   const [isCommitQueueCheckboxChecked] = useQueryParam(
     PatchPageQueryParams.CommitQueue,
     Cookies.get(INCLUDE_COMMIT_QUEUE_PROJECT_PATCHES) === "true",

src/pages/UserPatches.tsx

@@ -6,6 +6,7 @@ import { PatchesPage } from "components/PatchesPage";
 import { usePatchesQueryParams } from "components/PatchesPage/usePatchesQueryParams";
 import { INCLUDE_COMMIT_QUEUE_USER_PATCHES } from "constants/cookies";
 import { DEFAULT_POLL_INTERVAL } from "constants/index";
+import { slugs } from "constants/routes";
 import { useToastContext } from "context/toast";
 import {
   UserPatchesQuery,
@@ -18,7 +19,7 @@ import { PatchPageQueryParams } from "types/patch";
 
 export const UserPatches = () => {
   const dispatchToast = useToastContext();
-  const { id: userId } = useParams<{ id: string }>();
+  const { [slugs.id]: userId } = useParams();
   const analyticsObject = useUserPatchesAnalytics();
 
   const [isCommitQueueCheckboxChecked] = useQueryParam(

src/pages/Version.tsx

@@ -12,7 +12,7 @@ import {
   PageSider,
 } from "components/styles";
 import { commitQueueAlias } from "constants/patch";
-import { getCommitQueueRoute, getPatchRoute } from "constants/routes";
+import { getCommitQueueRoute, getPatchRoute, slugs } from "constants/routes";
 import { useToastContext } from "context/toast";
 import {
   VersionQuery,
@@ -38,7 +38,7 @@ import { NameChangeModal } from "./version/NameChangeModal";
 // docs/decisions/2023-12-13_version_page_logic.md
 export const VersionPage: React.FC = () => {
   const spruceConfig = useSpruceConfig();
-  const { id } = useParams<{ id: string }>();
+  const { [slugs.id]: id } = useParams();
   const dispatchToast = useToastContext();
 
   const [redirectURL, setRedirectURL] = useState(undefined);

src/pages/commits/WaterfallMenu/AddNotification.tsx

@@ -3,6 +3,7 @@ import { useParams } from "react-router-dom";
 import { useProjectHealthAnalytics } from "analytics/projectHealth/useProjectHealthAnalytics";
 import { DropdownItem } from "components/ButtonDropdown";
 import { NotificationModal } from "components/Notifications";
+import { slugs } from "constants/routes";
 import { waterfallTriggers } from "constants/triggers";
 import { subscriptionMethods } from "types/subscription";
 
@@ -13,7 +14,7 @@ interface AddNotificationProps {
 export const AddNotification: React.FC<AddNotificationProps> = ({
   setMenuOpen,
 }) => {
-  const { projectIdentifier } = useParams<{ projectIdentifier: string }>();
+  const { [slugs.projectIdentifier]: projectIdentifier } = useParams();
   const [isModalVisible, setIsModalVisible] = useState(false);
   const { sendEvent } = useProjectHealthAnalytics({ page: "Commit chart" });
   return (

src/pages/commits/index.tsx

@@ -18,7 +18,7 @@ import {
   CY_DISABLE_COMMITS_WELCOME_MODAL,
 } from "constants/cookies";
 import { DEFAULT_POLL_INTERVAL } from "constants/index";
-import { getCommitsRoute } from "constants/routes";
+import { getCommitsRoute, slugs } from "constants/routes";
 import { size } from "constants/tokens";
 import { newMainlineCommitsUser } from "constants/welcomeModalProps";
 import { useToastContext } from "context/toast";
@@ -67,9 +67,7 @@ const Commits = () => {
   const { hasUsedMainlineCommitsBefore = true } = useSpruceOptions ?? {};
   const [ref, limit, isResizing] = useCommitLimit<HTMLDivElement>();
   const parsed = parseQueryString(search);
-  const { projectIdentifier } = useParams<{
-    projectIdentifier: string;
-  }>();
+  const { [slugs.projectIdentifier]: projectIdentifier } = useParams();
   usePageTitle(`Project Health | ${projectIdentifier}`);
 
   const sendAnalyticsEvent = (id: string, identifier: string) => {

src/pages/configurePatch/configurePatchCore/useConfigurePatch/index.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 } from "gql/generated/types";
 import { useTabShortcut } from "hooks/useTabShortcut";
 import { PatchTab } from "types/patch";
@@ -125,7 +125,7 @@ interface HookResult extends ConfigurePatchState {
 const useConfigurePatch = (patch: ConfigurePatchQuery["patch"]): HookResult => {
   const navigate = useNavigate();
   const location = useLocation();
-  const { tab } = useParams<{ tab: PatchTab | null }>();
+  const { [slugs.tab]: tab } = useParams();
 
   const { id, project } = patch;
   const { variants } = project;

src/pages/configurePatch/index.tsx

@@ -4,7 +4,7 @@ import { ProjectBanner } from "components/Banners";
 import { PatchAndTaskFullPageLoad } from "components/Loading/PatchAndTaskFullPageLoad";
 import { PageWrapper } from "components/styles";
 import { commitQueueAlias } from "constants/patch";
-import { getVersionRoute } from "constants/routes";
+import { getVersionRoute, slugs } from "constants/routes";
 import { useToastContext } from "context/toast";
 import {
   ConfigurePatchQuery,
@@ -17,7 +17,7 @@ import { validateObjectId } from "utils/validators";
 import ConfigurePatchCore from "./configurePatchCore";
 
 const ConfigurePatch: React.FC = () => {
-  const { id } = useParams<{ id: string }>();
+  const { [slugs.id]: id } = useParams();
   const dispatchToast = useToastContext();
   const { data, error, loading } = useQuery<
     ConfigurePatchQuery,

src/pages/container/EventsTable/index.tsx

@@ -16,6 +16,7 @@ import PageSizeSelector, {
 } from "components/PageSizeSelector";
 import Pagination from "components/Pagination";
 import { SiderCard, TableControlInnerRow } from "components/styles";
+import { slugs } from "constants/routes";
 import { size } from "constants/tokens";
 import { useToastContext } from "context/toast";
 import { PodEventsQuery, PodEventsQueryVariables } from "gql/generated/types";
@@ -32,7 +33,7 @@ const EventsTable: React.FC<{}> = () => {
   const setPageSize = usePageSizeSelector();
   const page = getPageFromSearch(search);
   const limit = getLimitFromSearch(search);
-  const { id } = useParams<{ id: string }>();
+  const { [slugs.id]: id } = useParams();
   const dispatchToast = useToastContext();
   const { data: podEventsData } = useQuery<
     PodEventsQuery,

src/pages/container/index.tsx

@@ -8,6 +8,7 @@ import {
   PageWrapper,
   PageContent,
 } from "components/styles";
+import { slugs } from "constants/routes";
 import { useToastContext } from "context/toast";
 import { PodQuery, PodQueryVariables } from "gql/generated/types";
 import { POD } from "gql/queries";
@@ -17,7 +18,7 @@ import Metadata from "./Metadata";
 
 const Container = () => {
   const dispatchToast = useToastContext();
-  const { id } = useParams<{ id: string }>();
+  const { [slugs.id]: id } = useParams();
   const { data, error, loading } = useQuery<PodQuery, PodQueryVariables>(POD, {
     variables: { podId: id },
     onError: (err) => {

src/pages/distroSettings/DeleteDistro/index.tsx

@@ -6,6 +6,7 @@ import { Description } from "@leafygreen-ui/typography";
 import { useParams } from "react-router-dom";
 import { ConfirmationModal } from "components/ConfirmationModal";
 import ElementWrapper from "components/SpruceForm/ElementWrapper";
+import { slugs } from "constants/routes";
 import { useToastContext } from "context/toast";
 import {
   DeleteDistroMutation,
@@ -66,7 +67,7 @@ const Modal: React.FC<ModalProps> = ({ closeModal, distroId, open }) => {
 };
 
 export const DeleteDistro: React.FC = () => {
-  const { distroId } = useParams<{ distroId: string }>();
+  const { [slugs.distroId]: distroId } = useParams();
   const [open, setOpen] = useState(false);
   const id = "delete-distro-button";