From 7c020ab8e7193af9cc1817d77c63d83978d5baed Mon Sep 17 00:00:00 2001 From: Mohamed Khelif Date: Thu, 21 Mar 2024 14:00:41 -0400 Subject: [PATCH] Replace all existing slugs with thier corresponding enum --- .../distroSettings/useDistroSettingsAnalytics.ts | 3 ++- src/analytics/patches/useProjectPatchesAnalytics.ts | 3 ++- .../projectSettings/useProjectSettingsAnalytics.ts | 3 ++- src/analytics/task/useAnnotationAnalytics.ts | 3 ++- src/analytics/task/useTaskAnalytics.ts | 3 ++- src/components/Header/Navbar.tsx | 11 +++++++---- .../addNotification/PatchNotificationModal.tsx | 3 ++- src/components/Redirects/UserPatchesRedirect.tsx | 4 ++-- src/components/Redirects/WaterfallCommitsRedirect.tsx | 4 ++-- src/hooks/useConfigurePatch.ts | 4 ++-- src/hooks/useProjectRedirect/index.ts | 5 ++--- src/pages/CommitQueue.tsx | 4 ++-- src/pages/JobLogs.tsx | 4 ++-- src/pages/ProjectPatches.tsx | 4 ++-- src/pages/UserPatches.tsx | 3 ++- src/pages/Version.tsx | 4 ++-- src/pages/commits/WaterfallMenu/AddNotification.tsx | 3 ++- src/pages/commits/index.tsx | 6 ++---- .../configurePatchCore/useConfigurePatch/index.ts | 4 ++-- src/pages/configurePatch/index.tsx | 4 ++-- src/pages/container/EventsTable/index.tsx | 3 ++- src/pages/container/index.tsx | 3 ++- src/pages/distroSettings/DeleteDistro/index.tsx | 3 ++- src/pages/distroSettings/NewDistro/CopyModal.tsx | 4 ++-- .../distroSettings/NewDistro/NewDistroButton.tsx | 3 ++- src/pages/distroSettings/Tabs.tsx | 6 ++++-- src/pages/distroSettings/index.tsx | 7 ++++--- src/pages/distroSettings/tabs/BaseTab.tsx | 6 +++++- .../distroSettings/tabs/EventLogTab/EventLogTab.tsx | 5 ++--- src/pages/host/index.tsx | 3 ++- src/pages/preferences/PreferencesTabs.tsx | 8 ++++++-- src/pages/preferences/index.tsx | 8 ++++++-- src/pages/projectSettings/HeaderButtons.tsx | 5 ++--- src/pages/projectSettings/Tabs.tsx | 4 ++-- src/pages/projectSettings/index.tsx | 10 ++++++---- .../projectSettings/tabs/EventLogTab/EventLogTab.tsx | 5 ++--- .../tabs/GeneralTab/Fields/DeleteProjectField.tsx | 5 ++--- src/pages/spawn/index.tsx | 4 ++-- src/pages/task/ActionButtons.tsx | 4 ++-- src/pages/task/TaskTabs.tsx | 4 ++-- .../task/actionButtons/TaskNotificationModal.tsx | 3 ++- src/pages/task/taskTabs/logs/LogTypes.tsx | 11 ++++++----- src/pages/taskHistory/index.tsx | 9 +++++---- src/pages/taskQueue/index.tsx | 4 ++-- src/pages/variantHistory/index.tsx | 9 +++++---- src/pages/version/BuildVariantCard/index.tsx | 3 ++- src/pages/version/TaskDuration.tsx | 3 ++- src/pages/version/Tasks.tsx | 3 ++- src/pages/version/VersionTabs.tsx | 4 ++-- .../downstreamTasks/DownstreamProjectAccordion.tsx | 4 ++-- src/pages/version/taskDuration/TaskDurationTable.tsx | 3 ++- src/pages/version/tasks/PatchTasksTable.tsx | 3 ++- 52 files changed, 138 insertions(+), 103 deletions(-) diff --git a/src/analytics/distroSettings/useDistroSettingsAnalytics.ts b/src/analytics/distroSettings/useDistroSettingsAnalytics.ts index d77cd51833..fca6d1702c 100644 --- a/src/analytics/distroSettings/useDistroSettingsAnalytics.ts +++ b/src/analytics/distroSettings/useDistroSettingsAnalytics.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 distro"; section: string } @@ -7,6 +8,6 @@ type Action = | { name: "Duplicate distro"; newDistroId: string }; export const useDistroSettingsAnalytics = () => { - const { distroId } = useParams<{ distroId: string }>(); + const { [slugs.distroId]: distroId } = useParams(); return useAnalyticsRoot("DistroSettings", { distroId }); }; diff --git a/src/analytics/patches/useProjectPatchesAnalytics.ts b/src/analytics/patches/useProjectPatchesAnalytics.ts index a8854682c7..b12d9d2860 100644 --- a/src/analytics/patches/useProjectPatchesAnalytics.ts +++ b/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("ProjectPatches", { projectIdentifier }); }; diff --git a/src/analytics/projectSettings/useProjectSettingsAnalytics.ts b/src/analytics/projectSettings/useProjectSettingsAnalytics.ts index 424eb37313..9ff4322721 100644 --- a/src/analytics/projectSettings/useProjectSettingsAnalytics.ts +++ b/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("ProjectSettings", { projectIdentifier }); }; diff --git a/src/analytics/task/useAnnotationAnalytics.ts b/src/analytics/task/useAnnotationAnalytics.ts index c6684e0260..631cdfafc4 100644 --- a/src/analytics/task/useAnnotationAnalytics.ts +++ b/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< diff --git a/src/analytics/task/useTaskAnalytics.ts b/src/analytics/task/useTaskAnalytics.ts index 4d609ac940..6ae35e65a7 100644 --- a/src/analytics/task/useTaskAnalytics.ts +++ b/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(TASK, { diff --git a/src/components/Header/Navbar.tsx b/src/components/Header/Navbar.tsx index d6a45cb846..e959a93c80 100644 --- a/src/components/Header/Navbar.tsx +++ b/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 diff --git a/src/components/PatchActionButtons/addNotification/PatchNotificationModal.tsx b/src/components/PatchActionButtons/addNotification/PatchNotificationModal.tsx index ffdbb842d1..f5829ea7af 100644 --- a/src/components/PatchActionButtons/addNotification/PatchNotificationModal.tsx +++ b/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 = ({ onCancel, visible, }) => { - const { id: patchId } = useParams<{ id: string }>(); + const { [slugs.id]: patchId } = useParams(); const { sendEvent } = useVersionAnalytics(patchId); return ( diff --git a/src/components/Redirects/UserPatchesRedirect.tsx b/src/components/Redirects/UserPatchesRedirect.tsx index e7c262b5d1..a5e2102c3e 100644 --- a/src/components/Redirects/UserPatchesRedirect.tsx +++ b/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 ; }; diff --git a/src/components/Redirects/WaterfallCommitsRedirect.tsx b/src/components/Redirects/WaterfallCommitsRedirect.tsx index b51a45c18b..221211b461 100644 --- a/src/components/Redirects/WaterfallCommitsRedirect.tsx +++ b/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 ; }; diff --git a/src/hooks/useConfigurePatch.ts b/src/hooks/useConfigurePatch.ts index 140c9b139c..3056de97ba 100644 --- a/src/hooks/useConfigurePatch.ts +++ b/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; diff --git a/src/hooks/useProjectRedirect/index.ts b/src/hooks/useProjectRedirect/index.ts index a3b2450977..63269db3ae 100644 --- a/src/hooks/useProjectRedirect/index.ts +++ b/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(); diff --git a/src/pages/CommitQueue.tsx b/src/pages/CommitQueue.tsx index 1e3a51b1e7..83a313d632 100644 --- a/src/pages/CommitQueue.tsx +++ b/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, diff --git a/src/pages/JobLogs.tsx b/src/pages/JobLogs.tsx index b10162d54c..f4087dd1ce 100644 --- a/src/pages/JobLogs.tsx +++ b/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(); diff --git a/src/pages/ProjectPatches.tsx b/src/pages/ProjectPatches.tsx index bc855289cb..2284fcb5d7 100644 --- a/src/pages/ProjectPatches.tsx +++ b/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", diff --git a/src/pages/UserPatches.tsx b/src/pages/UserPatches.tsx index c7a7b0618a..a854c591f8 100644 --- a/src/pages/UserPatches.tsx +++ b/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( diff --git a/src/pages/Version.tsx b/src/pages/Version.tsx index c340d68b95..1885b45002 100644 --- a/src/pages/Version.tsx +++ b/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); diff --git a/src/pages/commits/WaterfallMenu/AddNotification.tsx b/src/pages/commits/WaterfallMenu/AddNotification.tsx index 1f44e1eb77..40591fa126 100644 --- a/src/pages/commits/WaterfallMenu/AddNotification.tsx +++ b/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 = ({ setMenuOpen, }) => { - const { projectIdentifier } = useParams<{ projectIdentifier: string }>(); + const { [slugs.projectIdentifier]: projectIdentifier } = useParams(); const [isModalVisible, setIsModalVisible] = useState(false); const { sendEvent } = useProjectHealthAnalytics({ page: "Commit chart" }); return ( diff --git a/src/pages/commits/index.tsx b/src/pages/commits/index.tsx index 680bf7dd25..c5ac267a64 100644 --- a/src/pages/commits/index.tsx +++ b/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(); const parsed = parseQueryString(search); - const { projectIdentifier } = useParams<{ - projectIdentifier: string; - }>(); + const { [slugs.projectIdentifier]: projectIdentifier } = useParams(); usePageTitle(`Project Health | ${projectIdentifier}`); const sendAnalyticsEvent = (id: string, identifier: string) => { diff --git a/src/pages/configurePatch/configurePatchCore/useConfigurePatch/index.ts b/src/pages/configurePatch/configurePatchCore/useConfigurePatch/index.ts index dbbd358e93..634ceea7f5 100644 --- a/src/pages/configurePatch/configurePatchCore/useConfigurePatch/index.ts +++ b/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; diff --git a/src/pages/configurePatch/index.tsx b/src/pages/configurePatch/index.tsx index 34f54818b8..d7e1d2107f 100644 --- a/src/pages/configurePatch/index.tsx +++ b/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, diff --git a/src/pages/container/EventsTable/index.tsx b/src/pages/container/EventsTable/index.tsx index 8f5b928b7e..7fe4d1ea12 100644 --- a/src/pages/container/EventsTable/index.tsx +++ b/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, diff --git a/src/pages/container/index.tsx b/src/pages/container/index.tsx index 7ad7aa48a5..91df11363f 100644 --- a/src/pages/container/index.tsx +++ b/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(POD, { variables: { podId: id }, onError: (err) => { diff --git a/src/pages/distroSettings/DeleteDistro/index.tsx b/src/pages/distroSettings/DeleteDistro/index.tsx index 530d09e516..28a2f6c793 100644 --- a/src/pages/distroSettings/DeleteDistro/index.tsx +++ b/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 = ({ 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"; diff --git a/src/pages/distroSettings/NewDistro/CopyModal.tsx b/src/pages/distroSettings/NewDistro/CopyModal.tsx index 9616563846..9fe7597cb2 100644 --- a/src/pages/distroSettings/NewDistro/CopyModal.tsx +++ b/src/pages/distroSettings/NewDistro/CopyModal.tsx @@ -4,7 +4,7 @@ import { useNavigate, useParams } from "react-router-dom"; import { useDistroSettingsAnalytics } from "analytics"; import { ConfirmationModal } from "components/ConfirmationModal"; import { SpruceForm } from "components/SpruceForm"; -import { getDistroSettingsRoute } from "constants/routes"; +import { getDistroSettingsRoute, slugs } from "constants/routes"; import { useToastContext } from "context/toast"; import { CopyDistroMutation, @@ -21,7 +21,7 @@ interface Props { } export const CopyModal: React.FC = ({ handleClose, open }) => { - const { distroId } = useParams<{ distroId: string }>(); + const { [slugs.distroId]: distroId } = useParams(); const navigate = useNavigate(); const dispatchToast = useToastContext(); const { sendEvent } = useDistroSettingsAnalytics(); diff --git a/src/pages/distroSettings/NewDistro/NewDistroButton.tsx b/src/pages/distroSettings/NewDistro/NewDistroButton.tsx index 4aff122de1..850b61b6bb 100644 --- a/src/pages/distroSettings/NewDistro/NewDistroButton.tsx +++ b/src/pages/distroSettings/NewDistro/NewDistroButton.tsx @@ -5,6 +5,7 @@ import Button, { Size, Variant } from "@leafygreen-ui/button"; import { Menu, MenuItem } from "@leafygreen-ui/menu"; import { useParams } from "react-router-dom"; import Icon from "components/Icon"; +import { slugs } from "constants/routes"; import { zIndex } from "constants/tokens"; import { UserDistroSettingsPermissionsQuery, @@ -15,7 +16,7 @@ import { CopyModal } from "./CopyModal"; import { CreateModal } from "./CreateModal"; export const NewDistroButton: React.FC = () => { - const { distroId } = useParams<{ distroId: string }>(); + const { [slugs.distroId]: distroId } = useParams(); const [menuOpen, setMenuOpen] = useState(false); const [copyModalOpen, setCopyModalOpen] = useState(false); const [createModalOpen, setCreateModalOpen] = useState(false); diff --git a/src/pages/distroSettings/Tabs.tsx b/src/pages/distroSettings/Tabs.tsx index 2e5bad6f78..f53752f220 100644 --- a/src/pages/distroSettings/Tabs.tsx +++ b/src/pages/distroSettings/Tabs.tsx @@ -1,7 +1,7 @@ import { useEffect, useMemo } from "react"; import styled from "@emotion/styled"; import { useParams, Routes, Route, Navigate } from "react-router-dom"; -import { DistroSettingsTabRoutes } from "constants/routes"; +import { DistroSettingsTabRoutes, slugs } from "constants/routes"; import { DistroQuery } from "gql/generated/types"; import { useDistroSettingsContext } from "./Context"; import { Header } from "./Header"; @@ -22,7 +22,9 @@ interface Props { } export const DistroSettingsTabs: React.FC = ({ distro }) => { - const { tab } = useParams<{ tab: DistroSettingsTabRoutes }>(); + const { [slugs.tab]: tab } = useParams<{ + [slugs.tab]: DistroSettingsTabRoutes; + }>(); const { setInitialData } = useDistroSettingsContext(); const tabData = useMemo(() => getTabData(distro), [distro]); diff --git a/src/pages/distroSettings/index.tsx b/src/pages/distroSettings/index.tsx index 9f0b814f40..b2a126c945 100644 --- a/src/pages/distroSettings/index.tsx +++ b/src/pages/distroSettings/index.tsx @@ -11,6 +11,7 @@ import { import { DistroSettingsTabRoutes, getDistroSettingsRoute, + slugs, } from "constants/routes"; import { size } from "constants/tokens"; import { useToastContext } from "context/toast"; @@ -26,9 +27,9 @@ import { DistroSettingsTabs } from "./Tabs"; const DistroSettings: React.FC = () => { usePageTitle("Distro Settings"); const dispatchToast = useToastContext(); - const { distroId, tab: currentTab } = useParams<{ - distroId: string; - tab: DistroSettingsTabRoutes; + const { [slugs.distroId]: distroId, [slugs.tab]: currentTab } = useParams<{ + [slugs.distroId]: string; + [slugs.tab]: DistroSettingsTabRoutes; }>(); const { data, loading } = useQuery( diff --git a/src/pages/distroSettings/tabs/BaseTab.tsx b/src/pages/distroSettings/tabs/BaseTab.tsx index 603c81553d..c304a8ad7a 100644 --- a/src/pages/distroSettings/tabs/BaseTab.tsx +++ b/src/pages/distroSettings/tabs/BaseTab.tsx @@ -2,6 +2,7 @@ import { useQuery } from "@apollo/client"; import { useParams } from "react-router-dom"; import { Form } from "components/Settings/Form"; import { GetFormSchema, ValidateProps } from "components/SpruceForm"; +import { slugs } from "constants/routes"; import { UserDistroSettingsPermissionsQuery, UserDistroSettingsPermissionsQueryVariables, @@ -21,7 +22,10 @@ export const BaseTab = ({ initialFormState, ...rest }: BaseTabProps) => { - const { distroId, tab } = useParams<{ distroId: string; tab: T }>(); + const { [slugs.distroId]: distroId, [slugs.tab]: tab } = useParams<{ + [slugs.tab]: T; + [slugs.distroId]: string; + }>(); const state = useDistroSettingsContext(); usePopulateForm(initialFormState, tab); diff --git a/src/pages/distroSettings/tabs/EventLogTab/EventLogTab.tsx b/src/pages/distroSettings/tabs/EventLogTab/EventLogTab.tsx index 0f9881b117..7fce25d70b 100644 --- a/src/pages/distroSettings/tabs/EventLogTab/EventLogTab.tsx +++ b/src/pages/distroSettings/tabs/EventLogTab/EventLogTab.tsx @@ -1,5 +1,6 @@ import { useParams } from "react-router-dom"; import { EventDiffTable, EventLog } from "components/Settings/EventLog"; +import { slugs } from "constants/routes"; import { LegacyEventEntry } from "./LegacyEventEntry"; import { useDistroEvents } from "./useDistroEvents"; @@ -8,9 +9,7 @@ type TabProps = { }; export const EventLogTab: React.FC = ({ limit }) => { - const { distroId } = useParams<{ - distroId: string; - }>(); + const { [slugs.distroId]: distroId } = useParams(); const { allEventsFetched, events, fetchMore, loading } = useDistroEvents( distroId, diff --git a/src/pages/host/index.tsx b/src/pages/host/index.tsx index 802f53c26a..14ea9d00e1 100644 --- a/src/pages/host/index.tsx +++ b/src/pages/host/index.tsx @@ -15,6 +15,7 @@ import { PageLayout, PageContent, } from "components/styles"; +import { slugs } from "constants/routes"; import { size } from "constants/tokens"; import { useToastContext } from "context/toast"; import { @@ -33,7 +34,7 @@ const { getLimitFromSearch, getPageFromSearch } = url; const Host: React.FC = () => { const dispatchToast = useToastContext(); - const { id } = useParams<{ id: string }>(); + const { [slugs.id]: id } = useParams(); // Query host data const { data: hostData, diff --git a/src/pages/preferences/PreferencesTabs.tsx b/src/pages/preferences/PreferencesTabs.tsx index ca35a440a7..623ed2ec32 100644 --- a/src/pages/preferences/PreferencesTabs.tsx +++ b/src/pages/preferences/PreferencesTabs.tsx @@ -1,7 +1,11 @@ import styled from "@emotion/styled"; import { Body, BodyProps, H2 } from "@leafygreen-ui/typography"; import { Route, Routes, useParams, Navigate } from "react-router-dom"; -import { PreferencesTabRoutes, getPreferencesRoute } from "constants/routes"; +import { + PreferencesTabRoutes, + getPreferencesRoute, + slugs, +} from "constants/routes"; import { size } from "constants/tokens"; import { CliTab } from "./preferencesTabs/CliTab"; import { NewUITab } from "./preferencesTabs/NewUITab"; @@ -10,7 +14,7 @@ import { ProfileTab } from "./preferencesTabs/ProfileTab"; import { PublicKeysTab } from "./preferencesTabs/PublicKeysTab"; export const PreferencesTabs: React.FC = () => { - const { tab } = useParams<{ tab: string }>(); + const { [slugs.tab]: tab } = useParams(); const { subtitle, title } = getTitle(tab as PreferencesTabRoutes); return ( diff --git a/src/pages/preferences/index.tsx b/src/pages/preferences/index.tsx index 1c2e184a9c..9624472c51 100644 --- a/src/pages/preferences/index.tsx +++ b/src/pages/preferences/index.tsx @@ -7,13 +7,17 @@ import { SideNavItem, PageWrapper, } from "components/styles"; -import { PreferencesTabRoutes, getPreferencesRoute } from "constants/routes"; +import { + PreferencesTabRoutes, + getPreferencesRoute, + slugs, +} from "constants/routes"; import { usePageTitle } from "hooks"; import { PreferencesTabs } from "pages/preferences/PreferencesTabs"; const Preferences: React.FC = () => { usePageTitle("Preferences"); - const { tab } = useParams<{ tab: string }>(); + const { [slugs.tab]: tab } = useParams(); const { sendEvent } = usePreferencesAnalytics(); return ( diff --git a/src/pages/projectSettings/HeaderButtons.tsx b/src/pages/projectSettings/HeaderButtons.tsx index de231bcdf3..314ef85933 100644 --- a/src/pages/projectSettings/HeaderButtons.tsx +++ b/src/pages/projectSettings/HeaderButtons.tsx @@ -7,6 +7,7 @@ import { useProjectSettingsAnalytics } from "analytics"; import { getProjectSettingsRoute, ProjectSettingsTabRoutes, + slugs, } from "constants/routes"; import { useToastContext } from "context/toast"; import { @@ -47,9 +48,7 @@ export const HeaderButtons: React.FC = ({ id, projectType, tab }) => { const { getTab, saveTab } = useProjectSettingsContext(); const { formData, hasChanges, hasError } = getTab(tab); const navigate = useNavigate(); - const { projectIdentifier: identifier } = useParams<{ - projectIdentifier: string; - }>(); + const { [slugs.projectIdentifier]: identifier } = useParams(); const [defaultModalOpen, setDefaultModalOpen] = useState(false); diff --git a/src/pages/projectSettings/Tabs.tsx b/src/pages/projectSettings/Tabs.tsx index da189516c7..1c60d190be 100644 --- a/src/pages/projectSettings/Tabs.tsx +++ b/src/pages/projectSettings/Tabs.tsx @@ -1,7 +1,7 @@ import { useEffect, useMemo } from "react"; import styled from "@emotion/styled"; import { Navigate, Route, Routes, useParams } from "react-router-dom"; -import { ProjectSettingsTabRoutes } from "constants/routes"; +import { ProjectSettingsTabRoutes, slugs } from "constants/routes"; import { ProjectSettingsQuery, RepoSettingsQuery } from "gql/generated/types"; import { useProjectSettingsContext } from "./Context"; import { Header } from "./Header"; @@ -43,7 +43,7 @@ export const ProjectSettingsTabs: React.FC = ({ projectType, repoData, }) => { - const { tab } = useParams<{ tab: ProjectSettingsTabRoutes }>(); + const { [slugs.tab]: tab } = useParams<{ tab: ProjectSettingsTabRoutes }>(); const { setInitialData } = useProjectSettingsContext(); const projectId = projectData?.projectRef?.id; diff --git a/src/pages/projectSettings/index.tsx b/src/pages/projectSettings/index.tsx index 8770f50060..c8e900e4d7 100644 --- a/src/pages/projectSettings/index.tsx +++ b/src/pages/projectSettings/index.tsx @@ -13,6 +13,7 @@ import { import { ProjectSettingsTabRoutes, getProjectSettingsRoute, + slugs, } from "constants/routes"; import { size } from "constants/tokens"; import { useToastContext } from "context/toast"; @@ -36,10 +37,11 @@ const { validateObjectId } = validators; const ProjectSettings: React.FC = () => { usePageTitle(`Project Settings`); const dispatchToast = useToastContext(); - const { projectIdentifier: identifier, tab } = useParams<{ - projectIdentifier: string; - tab: ProjectSettingsTabRoutes; - }>(); + const { [slugs.projectIdentifier]: identifier, [slugs.tab]: tab } = + useParams<{ + [slugs.projectIdentifier]: string | null; + [slugs.tab]: ProjectSettingsTabRoutes; + }>(); // If the path includes an Object ID, this page represents a repo and we should not attempt to fetch a project. const isRepo = validateObjectId(identifier); diff --git a/src/pages/projectSettings/tabs/EventLogTab/EventLogTab.tsx b/src/pages/projectSettings/tabs/EventLogTab/EventLogTab.tsx index 51f6b5c4c1..7334824750 100644 --- a/src/pages/projectSettings/tabs/EventLogTab/EventLogTab.tsx +++ b/src/pages/projectSettings/tabs/EventLogTab/EventLogTab.tsx @@ -1,5 +1,6 @@ import { useParams } from "react-router-dom"; import { EventLog } from "components/Settings/EventLog"; +import { slugs } from "constants/routes"; import { ProjectType } from "../utils"; import { useProjectSettingsEvents } from "./useProjectSettingsEvents"; @@ -9,9 +10,7 @@ type TabProps = { }; export const EventLogTab: React.FC = ({ limit, projectType }) => { - const { projectIdentifier: identifier } = useParams<{ - projectIdentifier: string; - }>(); + const { [slugs.projectIdentifier]: identifier } = useParams(); const isRepo = projectType === ProjectType.Repo; const { allEventsFetched, events, fetchMore } = useProjectSettingsEvents( diff --git a/src/pages/projectSettings/tabs/GeneralTab/Fields/DeleteProjectField.tsx b/src/pages/projectSettings/tabs/GeneralTab/Fields/DeleteProjectField.tsx index c200f1be79..01aec2aa56 100644 --- a/src/pages/projectSettings/tabs/GeneralTab/Fields/DeleteProjectField.tsx +++ b/src/pages/projectSettings/tabs/GeneralTab/Fields/DeleteProjectField.tsx @@ -6,6 +6,7 @@ import { Description } from "@leafygreen-ui/typography"; import { Field } from "@rjsf/core"; import { useParams } from "react-router-dom"; import { ConfirmationModal } from "components/ConfirmationModal"; +import { slugs } from "constants/routes"; import { size } from "constants/tokens"; import { useToastContext } from "context/toast"; import { @@ -22,9 +23,7 @@ interface ModalProps { const Modal: React.FC = ({ closeModal, open, projectId }) => { const dispatchToast = useToastContext(); - const { projectIdentifier: identifier } = useParams<{ - projectIdentifier: string; - }>(); + const { [slugs.projectIdentifier]: identifier } = useParams(); const [deleteProject, { loading }] = useMutation< DeleteProjectMutation, diff --git a/src/pages/spawn/index.tsx b/src/pages/spawn/index.tsx index 050ba493fe..daa4209ecc 100644 --- a/src/pages/spawn/index.tsx +++ b/src/pages/spawn/index.tsx @@ -6,12 +6,12 @@ import { SideNavGroup, SideNavItem, } from "components/styles"; -import { routes, SpawnTab } from "constants/routes"; +import { routes, SpawnTab, slugs } from "constants/routes"; import { SpawnHost } from "./SpawnHost"; import { SpawnVolume } from "./SpawnVolume"; const Spawn: React.FC = () => { - const { tab } = useParams<{ tab: string }>(); + const { [slugs.tab]: tab } = useParams(); const spawnAnalytics = useSpawnAnalytics(); return ( diff --git a/src/pages/task/ActionButtons.tsx b/src/pages/task/ActionButtons.tsx index 48b7592925..8da4cea6da 100644 --- a/src/pages/task/ActionButtons.tsx +++ b/src/pages/task/ActionButtons.tsx @@ -9,7 +9,7 @@ import { LoadingButton } from "components/Buttons"; import SetPriority from "components/SetPriority"; import { PageButtonRow } from "components/styles"; import { commitQueueRequester } from "constants/patch"; -import { getTaskHistoryRoute } from "constants/routes"; +import { getTaskHistoryRoute, slugs } from "constants/routes"; import { mergeTaskName } from "constants/task"; import { useToastContext } from "context/toast"; import { @@ -80,7 +80,7 @@ export const ActionButtons: React.FC = ({ const dispatchToast = useToastContext(); const [isVisibleModal, setIsVisibleModal] = useState(false); - const { id: taskId } = useParams<{ id: string }>(); + const { [slugs.id]: taskId } = useParams(); const taskAnalytics = useTaskAnalytics(); const [, setExecution] = useQueryParam("execution", 0); diff --git a/src/pages/task/TaskTabs.tsx b/src/pages/task/TaskTabs.tsx index 5196470aa1..c201403e80 100644 --- a/src/pages/task/TaskTabs.tsx +++ b/src/pages/task/TaskTabs.tsx @@ -5,7 +5,7 @@ import { useTaskAnalytics } from "analytics"; import { TrendChartsPlugin } from "components/PerfPlugin"; import { StyledTabs } from "components/styles/StyledTabs"; import { TabLabelWithBadge } from "components/TabLabelWithBadge"; -import { getTaskRoute, GetTaskRouteOptions } from "constants/routes"; +import { getTaskRoute, GetTaskRouteOptions, slugs } from "constants/routes"; import { TaskQuery } from "gql/generated/types"; import { usePrevious } from "hooks"; import { useTabShortcut } from "hooks/useTabShortcut"; @@ -24,7 +24,7 @@ interface TaskTabProps { task: TaskQuery["task"]; } export const TaskTabs: React.FC = ({ isDisplayTask, task }) => { - const { tab: urlTab } = useParams<{ id: string; tab: TaskTab | null }>(); + const { [slugs.tab]: urlTab } = useParams<{ [slugs.tab]: TaskTab }>(); const navigate = useNavigate(); const location = useLocation(); diff --git a/src/pages/task/actionButtons/TaskNotificationModal.tsx b/src/pages/task/actionButtons/TaskNotificationModal.tsx index cda7d00706..58ccadf19f 100644 --- a/src/pages/task/actionButtons/TaskNotificationModal.tsx +++ b/src/pages/task/actionButtons/TaskNotificationModal.tsx @@ -1,6 +1,7 @@ import { useParams } from "react-router-dom"; import { useTaskAnalytics } from "analytics"; import { NotificationModal } from "components/Notifications"; +import { slugs } from "constants/routes"; import { taskTriggers } from "constants/triggers"; import { subscriptionMethods as taskSubscriptionMethods } from "types/subscription"; @@ -13,7 +14,7 @@ export const TaskNotificationModal: React.FC = ({ onCancel, visible, }) => { - const { id: taskId } = useParams<{ id: string }>(); + const { [slugs.id]: taskId } = useParams(); const taskAnalytics = useTaskAnalytics(); return ( diff --git a/src/pages/task/taskTabs/logs/LogTypes.tsx b/src/pages/task/taskTabs/logs/LogTypes.tsx index b9ad15c64e..ee34f16deb 100644 --- a/src/pages/task/taskTabs/logs/LogTypes.tsx +++ b/src/pages/task/taskTabs/logs/LogTypes.tsx @@ -5,6 +5,7 @@ import { palette } from "@leafygreen-ui/palette"; import { Skeleton } from "antd"; import { useParams, useLocation } from "react-router-dom"; import { DEFAULT_POLL_INTERVAL } from "constants/index"; +import { slugs } from "constants/routes"; import { size, fontSize } from "constants/tokens"; import { TaskEventLogsQuery, @@ -48,7 +49,7 @@ interface Props { } export const AllLog: React.FC = (props) => { - const { id } = useParams<{ id: string }>(); + const { [slugs.id]: id } = useParams(); const location = useLocation(); const parsed = parseQueryString(location.search); const selectedExecution = Number(parsed[RequiredQueryParams.Execution]); @@ -76,7 +77,7 @@ export const AllLog: React.FC = (props) => { }; export const EventLog: React.FC = (props) => { - const { id } = useParams<{ id: string }>(); + const { [slugs.id]: id } = useParams(); const location = useLocation(); const parsed = parseQueryString(location.search); const selectedExecution = Number(parsed[RequiredQueryParams.Execution]); @@ -106,7 +107,7 @@ export const EventLog: React.FC = (props) => { }; export const SystemLog: React.FC = (props) => { - const { id } = useParams<{ id: string }>(); + const { [slugs.id]: id } = useParams(); const location = useLocation(); const parsed = parseQueryString(location.search); const selectedExecution = Number(parsed[RequiredQueryParams.Execution]); @@ -132,7 +133,7 @@ export const SystemLog: React.FC = (props) => { }; export const AgentLog: React.FC = (props) => { - const { id } = useParams<{ id: string }>(); + const { [slugs.id]: id } = useParams(); const location = useLocation(); const parsed = parseQueryString(location.search); const selectedExecution = Number(parsed[RequiredQueryParams.Execution]); @@ -158,7 +159,7 @@ export const AgentLog: React.FC = (props) => { }; export const TaskLog: React.FC = (props) => { - const { id } = useParams<{ id: string }>(); + const { [slugs.id]: id } = useParams(); const location = useLocation(); const parsed = parseQueryString(location.search); const selectedExecution = Number(parsed[RequiredQueryParams.Execution]); diff --git a/src/pages/taskHistory/index.tsx b/src/pages/taskHistory/index.tsx index 8dc34edd90..a1ff361efb 100644 --- a/src/pages/taskHistory/index.tsx +++ b/src/pages/taskHistory/index.tsx @@ -17,6 +17,7 @@ import { import HistoryTable from "components/HistoryTable/HistoryTable"; import { useHistoryTable } from "components/HistoryTable/HistoryTableContext"; import { PageWrapper } from "components/styles"; +import { slugs } from "constants/routes"; import { size } from "constants/tokens"; import { useToastContext } from "context/toast"; import { @@ -37,10 +38,10 @@ const { useJumpToCommit, useTestFilters } = hooks; const TaskHistoryContents: React.FC = () => { const { sendEvent } = useProjectHealthAnalytics({ page: "Task history" }); - const { projectIdentifier, taskName } = useParams<{ - projectIdentifier: string; - taskName: string; - }>(); + const { + [slugs.projectIdentifier]: projectIdentifier, + [slugs.taskName]: taskName, + } = useParams(); const { ingestNewCommits } = useHistoryTable(); usePageTitle(`Task History | ${projectIdentifier} | ${taskName}`); useTestFilters(); diff --git a/src/pages/taskQueue/index.tsx b/src/pages/taskQueue/index.tsx index f8bff10207..69521ac78a 100644 --- a/src/pages/taskQueue/index.tsx +++ b/src/pages/taskQueue/index.tsx @@ -7,7 +7,7 @@ import { useParams, useNavigate } from "react-router-dom"; import { useTaskQueueAnalytics } from "analytics"; import SearchableDropdown from "components/SearchableDropdown"; import { PageWrapper, StyledRouterLink } from "components/styles"; -import { getTaskQueueRoute, getAllHostsRoute } from "constants/routes"; +import { getTaskQueueRoute, getAllHostsRoute, slugs } from "constants/routes"; import { size } from "constants/tokens"; import { useToastContext } from "context/toast"; import { @@ -27,7 +27,7 @@ import TaskQueueTable from "./TaskQueueTable"; const TaskQueue = () => { const taskQueueAnalytics = useTaskQueueAnalytics(); - const { distro } = useParams<{ distro: string }>(); + const { [slugs.distro]: distro } = useParams(); const [taskId] = useQueryParam( QueryParams.TaskId, undefined, diff --git a/src/pages/variantHistory/index.tsx b/src/pages/variantHistory/index.tsx index 7f66db6477..176053bd10 100644 --- a/src/pages/variantHistory/index.tsx +++ b/src/pages/variantHistory/index.tsx @@ -17,6 +17,7 @@ import { import HistoryTable from "components/HistoryTable/HistoryTable"; import { useHistoryTable } from "components/HistoryTable/HistoryTableContext"; import { PageWrapper } from "components/styles"; +import { slugs } from "constants/routes"; import { size } from "constants/tokens"; import { useToastContext } from "context/toast"; import { @@ -36,10 +37,10 @@ const { useJumpToCommit, useTestFilters } = hooks; const { applyStrictRegex } = string; const VariantHistoryContents: React.FC = () => { - const { projectIdentifier, variantName } = useParams<{ - projectIdentifier: string; - variantName: string; - }>(); + const { + [slugs.projectIdentifier]: projectIdentifier, + [slugs.variantName]: variantName, + } = useParams(); const { sendEvent } = useProjectHealthAnalytics({ page: "Variant history" }); const { ingestNewCommits } = useHistoryTable(); const dispatchToast = useToastContext(); diff --git a/src/pages/version/BuildVariantCard/index.tsx b/src/pages/version/BuildVariantCard/index.tsx index 4a490104ba..1b5f0a1398 100644 --- a/src/pages/version/BuildVariantCard/index.tsx +++ b/src/pages/version/BuildVariantCard/index.tsx @@ -4,6 +4,7 @@ import { useParams } from "react-router-dom"; import { navBarHeight } from "components/Header/Navbar"; import { MetadataCard, MetadataTitle } from "components/MetadataCard"; import { DEFAULT_POLL_INTERVAL } from "constants/index"; +import { slugs } from "constants/routes"; import { size } from "constants/tokens"; import { BuildVariantStatsQuery, @@ -14,7 +15,7 @@ import { usePolling } from "hooks"; import VariantTaskGroup from "./VariantTaskGroup"; const BuildVariantCard: React.FC = () => { - const { id } = useParams<{ id: string }>(); + const { [slugs.id]: id } = useParams(); const { data, error, loading, refetch, startPolling, stopPolling } = useQuery< BuildVariantStatsQuery, diff --git a/src/pages/version/TaskDuration.tsx b/src/pages/version/TaskDuration.tsx index 7cdaa5058e..b3b6c9d681 100644 --- a/src/pages/version/TaskDuration.tsx +++ b/src/pages/version/TaskDuration.tsx @@ -5,6 +5,7 @@ import { useParams, useLocation } from "react-router-dom"; import { useVersionAnalytics } from "analytics"; import TableControl from "components/Table/TableControl"; import { DEFAULT_POLL_INTERVAL } from "constants/index"; +import { slugs } from "constants/routes"; import { size } from "constants/tokens"; import { useToastContext } from "context/toast"; import { @@ -27,7 +28,7 @@ interface Props { const TaskDuration: React.FC = ({ taskCount }) => { const dispatchToast = useToastContext(); - const { id } = useParams<{ id: string }>(); + const { [slugs.id]: id } = useParams(); const { search } = useLocation(); const updateQueryParams = useUpdateURLQueryParams(); diff --git a/src/pages/version/Tasks.tsx b/src/pages/version/Tasks.tsx index c392b53719..0540a7683f 100644 --- a/src/pages/version/Tasks.tsx +++ b/src/pages/version/Tasks.tsx @@ -5,6 +5,7 @@ import { useVersionAnalytics } from "analytics"; import TableControl from "components/Table/TableControl"; import TableWrapper from "components/Table/TableWrapper"; import { DEFAULT_POLL_INTERVAL } from "constants/index"; +import { slugs } from "constants/routes"; import { useToastContext } from "context/toast"; import { VersionTasksQuery, @@ -27,7 +28,7 @@ interface Props { export const Tasks: React.FC = ({ taskCount }) => { const dispatchToast = useToastContext(); - const { id } = useParams<{ id: string }>(); + const { [slugs.id]: id } = useParams(); const { search } = useLocation(); const updateQueryParams = useUpdateURLQueryParams(); const versionAnalytics = useVersionAnalytics(id); diff --git a/src/pages/version/VersionTabs.tsx b/src/pages/version/VersionTabs.tsx index 136eaed214..8151eac960 100644 --- a/src/pages/version/VersionTabs.tsx +++ b/src/pages/version/VersionTabs.tsx @@ -5,7 +5,7 @@ import { useVersionAnalytics } from "analytics"; import { CodeChanges } from "components/CodeChanges"; import { StyledTabs } from "components/styles/StyledTabs"; import { TabLabelWithBadge } from "components/TabLabelWithBadge"; -import { getVersionRoute } from "constants/routes"; +import { getVersionRoute, slugs } from "constants/routes"; import { VersionQuery } from "gql/generated/types"; import { usePrevious } from "hooks"; import { useTabShortcut } from "hooks/useTabShortcut"; @@ -86,7 +86,7 @@ export const VersionTabs: React.FC = ({ isPatch, taskCount, }) => { - const { id, tab } = useParams<{ id: string; tab: PatchTab }>(); + const { [slugs.id]: id, [slugs.tab]: tab } = useParams(); const { search } = useLocation(); const { sendEvent } = useVersionAnalytics(id); const navigate = useNavigate(); diff --git a/src/pages/version/downstreamTasks/DownstreamProjectAccordion.tsx b/src/pages/version/downstreamTasks/DownstreamProjectAccordion.tsx index a2b68f1f8b..018b6abab3 100644 --- a/src/pages/version/downstreamTasks/DownstreamProjectAccordion.tsx +++ b/src/pages/version/downstreamTasks/DownstreamProjectAccordion.tsx @@ -11,7 +11,7 @@ import { PatchStatusBadge } from "components/PatchStatusBadge"; import TableControl from "components/Table/TableControl"; import TableWrapper from "components/Table/TableWrapper"; import TasksTable from "components/TasksTable"; -import { getVersionRoute } from "constants/routes"; +import { getVersionRoute, slugs } from "constants/routes"; import { size } from "constants/tokens"; import { useToastContext } from "context/toast"; import { @@ -56,7 +56,7 @@ export const DownstreamProjectAccordion: React.FC< }) => { const dispatchToast = useToastContext(); - const { id } = useParams<{ id: string }>(); + const { [slugs.id]: id } = useParams(); const { sendEvent } = useVersionAnalytics(id); const defaultSort: SortOrder = { diff --git a/src/pages/version/taskDuration/TaskDurationTable.tsx b/src/pages/version/taskDuration/TaskDurationTable.tsx index 501390be6c..ae17f7f183 100644 --- a/src/pages/version/taskDuration/TaskDurationTable.tsx +++ b/src/pages/version/taskDuration/TaskDurationTable.tsx @@ -14,6 +14,7 @@ import { TablePlaceholder } from "components/Table/TablePlaceholder"; import { onChangeHandler } from "components/Table/utils"; import { TaskLink } from "components/TasksTable/TaskLink"; import TaskStatusBadge from "components/TaskStatusBadge"; +import { slugs } from "constants/routes"; import { VersionTaskDurationsQuery, SortDirection } from "gql/generated/types"; import { useTaskStatuses } from "hooks"; import { useQueryParams } from "hooks/useQueryParam"; @@ -34,7 +35,7 @@ export const TaskDurationTable: React.FC = ({ numLoadingRows, tasks, }) => { - const { id: versionId } = useParams<{ id: string }>(); + const { [slugs.id]: versionId } = useParams(); const { sendEvent } = useVersionAnalytics(versionId); const { currentStatuses: statusOptions } = useTaskStatuses({ versionId }); diff --git a/src/pages/version/tasks/PatchTasksTable.tsx b/src/pages/version/tasks/PatchTasksTable.tsx index 187c750ce7..0273ae7e89 100644 --- a/src/pages/version/tasks/PatchTasksTable.tsx +++ b/src/pages/version/tasks/PatchTasksTable.tsx @@ -2,6 +2,7 @@ import { useParams } from "react-router-dom"; import { useVersionAnalytics } from "analytics"; import { InputFilterProps } from "components/Table/Filters"; import TasksTable from "components/TasksTable"; +import { slugs } from "constants/routes"; import { Task, VersionTasksQuery, SortOrder } from "gql/generated/types"; import { useTaskStatuses, @@ -27,7 +28,7 @@ export const PatchTasksTable: React.FC = ({ sorts, tasks, }) => { - const { id: versionId } = useParams<{ id: string }>(); + const { [slugs.id]: versionId } = useParams(); const updateQueryParams = useUpdateURLQueryParams(); const { sendEvent } = useVersionAnalytics(versionId); const filterHookProps = {