From b45ec388d47500859393191f5ccac0ac7dee7993 Mon Sep 17 00:00:00 2001 From: Jeremy Ruppel Date: Tue, 24 Mar 2026 17:48:51 -0400 Subject: [PATCH] fix(site): resolve circular dependency (#23517) Super unclear why CI hates me and only [fails lint](https://github.com/coder/coder/actions/runs/23504799702/job/68409588632?pr=23385) for me (I feel personally attacked), but `dpdm` detected a circular dependency between the WorkspaceSettingPage and its Sidebar in my other branch. They both wanted the same context/hook combo, so easy solve to move the hook/context into a third module to resolve the circular dep. --- .../pages/WorkspaceSettingsPage/Sidebar.tsx | 2 +- .../WorkspaceParametersExperimentRouter.tsx | 2 +- .../WorkspaceParametersPage.tsx | 2 +- .../WorkspaceParametersPageExperimental.tsx | 2 +- .../WorkspaceSchedulePage.tsx | 2 +- .../WorkspaceSettingsLayout.tsx | 26 ++----------------- .../WorkspaceSettingsPage.tsx | 2 +- .../WorkspaceSharingPage.tsx | 2 +- .../useWorkspaceSettings.ts | 24 +++++++++++++++++ 9 files changed, 33 insertions(+), 31 deletions(-) create mode 100644 site/src/pages/WorkspaceSettingsPage/useWorkspaceSettings.ts diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx index 50ba48f2d8..06199abd69 100644 --- a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx +++ b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx @@ -11,7 +11,7 @@ import { TimerIcon as ScheduleIcon, Users as SharingIcon, } from "lucide-react"; -import { useWorkspaceSettings } from "./WorkspaceSettingsLayout"; +import { useWorkspaceSettings } from "./useWorkspaceSettings"; export const Sidebar: React.FC = () => { const { owner, workspace, permissions } = useWorkspaceSettings(); diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersExperimentRouter.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersExperimentRouter.tsx index b3a2da30b6..f6c19d6f55 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersExperimentRouter.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersExperimentRouter.tsx @@ -1,5 +1,5 @@ import type { FC } from "react"; -import { useWorkspaceSettings } from "../WorkspaceSettingsLayout"; +import { useWorkspaceSettings } from "../useWorkspaceSettings"; import WorkspaceParametersPage from "./WorkspaceParametersPage"; import WorkspaceParametersPageExperimental from "./WorkspaceParametersPageExperimental"; diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx index 6ef647faa9..7b9c2260ae 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx @@ -22,7 +22,7 @@ import { type WorkspacePermissions, workspaceChecks, } from "../../../modules/workspaces/permissions"; -import { useWorkspaceSettings } from "../WorkspaceSettingsLayout"; +import { useWorkspaceSettings } from "../useWorkspaceSettings"; import { WorkspaceParametersForm, type WorkspaceParametersFormValues, diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx index 9faf13bb54..88ca1e445d 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx @@ -29,7 +29,7 @@ import { type WorkspacePermissions, workspaceChecks, } from "../../../modules/workspaces/permissions"; -import { useWorkspaceSettings } from "../WorkspaceSettingsLayout"; +import { useWorkspaceSettings } from "../useWorkspaceSettings"; import { WorkspaceParametersPageViewExperimental } from "./WorkspaceParametersPageViewExperimental"; const WorkspaceParametersPageExperimental: FC = () => { diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx index 257ee85166..223ff110a7 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx @@ -15,13 +15,13 @@ import { scheduleToAutostart, } from "pages/WorkspaceSettingsPage/WorkspaceSchedulePage/schedule"; import { ttlMsToAutostop } from "pages/WorkspaceSettingsPage/WorkspaceSchedulePage/ttl"; -import { useWorkspaceSettings } from "pages/WorkspaceSettingsPage/WorkspaceSettingsLayout"; import { type FC, useState } from "react"; import { useMutation, useQuery, useQueryClient } from "react-query"; import { useNavigate, useParams } from "react-router"; import { toast } from "sonner"; import { docs } from "utils/docs"; import { pageTitle } from "utils/page"; +import { useWorkspaceSettings } from "#/pages/WorkspaceSettingsPage/useWorkspaceSettings"; import { formValuesToAutostartRequest, formValuesToTTLRequest, diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx index a65883c3e9..22f9d7902a 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx @@ -2,38 +2,16 @@ import { workspaceByOwnerAndName, workspacePermissions, } from "api/queries/workspaces"; -import type { Workspace } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; import { Loader } from "components/Loader/Loader"; import { Margins } from "components/Margins/Margins"; import { Stack } from "components/Stack/Stack"; -import type { WorkspacePermissions } from "modules/workspaces/permissions"; -import { createContext, type FC, Suspense, useContext } from "react"; +import { type FC, Suspense } from "react"; import { useQuery } from "react-query"; import { Outlet, useParams } from "react-router"; import { pageTitle } from "utils/page"; import { Sidebar } from "./Sidebar"; - -type WorkspaceSettingsContext = { - owner: string; - workspace: Workspace; - permissions?: WorkspacePermissions; -}; - -const WorkspaceSettings = createContext( - undefined, -); - -export function useWorkspaceSettings() { - const value = useContext(WorkspaceSettings); - if (!value) { - throw new Error( - "This hook can only be used from a workspace settings page", - ); - } - - return value; -} +import { WorkspaceSettings } from "./useWorkspaceSettings"; export const WorkspaceSettingsLayout: FC = () => { const params = useParams() as { diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPage.tsx index efea1b164e..34668efd57 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPage.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPage.tsx @@ -4,8 +4,8 @@ import { useMutation } from "react-query"; import { useNavigate, useParams } from "react-router"; import { toast } from "sonner"; import { pageTitle } from "utils/page"; +import { useWorkspaceSettings } from "./useWorkspaceSettings"; import type { WorkspaceSettingsFormValues } from "./WorkspaceSettingsForm"; -import { useWorkspaceSettings } from "./WorkspaceSettingsLayout"; import { WorkspaceSettingsPageView } from "./WorkspaceSettingsPageView"; const WorkspaceSettingsPage: FC = () => { diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSharingPage/WorkspaceSharingPage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSharingPage/WorkspaceSharingPage.tsx index 3bc2349499..20e8f834bb 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSharingPage/WorkspaceSharingPage.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSharingPage/WorkspaceSharingPage.tsx @@ -7,7 +7,7 @@ import type { FC } from "react"; import { useQuery } from "react-query"; import { docs } from "utils/docs"; import { pageTitle } from "utils/page"; -import { useWorkspaceSettings } from "../WorkspaceSettingsLayout"; +import { useWorkspaceSettings } from "../useWorkspaceSettings"; import { WorkspaceSharingPageView } from "./WorkspaceSharingPageView"; const WorkspaceSharingPage: FC = () => { diff --git a/site/src/pages/WorkspaceSettingsPage/useWorkspaceSettings.ts b/site/src/pages/WorkspaceSettingsPage/useWorkspaceSettings.ts new file mode 100644 index 0000000000..c35cac45cd --- /dev/null +++ b/site/src/pages/WorkspaceSettingsPage/useWorkspaceSettings.ts @@ -0,0 +1,24 @@ +import { createContext, useContext } from "react"; +import type { Workspace } from "#/api/typesGenerated"; +import type { WorkspacePermissions } from "#/modules/workspaces/permissions"; + +type WorkspaceSettingsContext = { + owner: string; + workspace: Workspace; + permissions?: WorkspacePermissions; +}; + +export const WorkspaceSettings = createContext< + WorkspaceSettingsContext | undefined +>(undefined); + +export function useWorkspaceSettings() { + const value = useContext(WorkspaceSettings); + if (!value) { + throw new Error( + "This hook can only be used from a workspace settings page", + ); + } + + return value; +}