diff --git a/site/src/api/api.ts b/site/src/api/api.ts index 8c559cece1..4c29b92017 100644 --- a/site/src/api/api.ts +++ b/site/src/api/api.ts @@ -1006,7 +1006,7 @@ export type DeploymentConfig = { readonly options: DeploymentOption[]; }; -export const getDeploymentValues = async (): Promise => { +export const getDeploymentConfig = async (): Promise => { const response = await axios.get(`/api/v2/deployment/config`); return response.data; }; diff --git a/site/src/api/queries/deployment.ts b/site/src/api/queries/deployment.ts new file mode 100644 index 0000000000..f74e120688 --- /dev/null +++ b/site/src/api/queries/deployment.ts @@ -0,0 +1,15 @@ +import * as API from "api/api"; + +export const deploymentConfig = () => { + return { + queryKey: ["deployment", "config"], + queryFn: API.getDeploymentConfig, + }; +}; + +export const deploymentDAUs = () => { + return { + queryKey: ["deployment", "daus"], + queryFn: () => API.getDeploymentDAUs(), + }; +}; diff --git a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx index 96f2b218cf..70cf3323a2 100644 --- a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx +++ b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx @@ -3,20 +3,16 @@ import { Margins } from "components/Margins/Margins"; import { Stack } from "components/Stack/Stack"; import { Sidebar } from "./Sidebar"; import { createContext, Suspense, useContext, FC } from "react"; -import { useMachine } from "@xstate/react"; import { Loader } from "components/Loader/Loader"; -import { DAUsResponse } from "api/typesGenerated"; -import { deploymentConfigMachine } from "xServices/deploymentConfig/deploymentConfigMachine"; import { RequirePermission } from "components/RequirePermission/RequirePermission"; import { usePermissions } from "hooks/usePermissions"; import { Outlet } from "react-router-dom"; import { DeploymentConfig } from "api/api"; +import { useQuery } from "@tanstack/react-query"; +import { deploymentConfig } from "api/queries/deployment"; type DeploySettingsContextValue = { deploymentValues: DeploymentConfig; - getDeploymentValuesError: unknown; - deploymentDAUs?: DAUsResponse; - getDeploymentDAUsError: unknown; }; const DeploySettingsContext = createContext< @@ -34,14 +30,8 @@ export const useDeploySettings = (): DeploySettingsContextValue => { }; export const DeploySettingsLayout: FC = () => { - const [state] = useMachine(deploymentConfigMachine); + const deploymentConfigQuery = useQuery(deploymentConfig()); const styles = useStyles(); - const { - deploymentValues, - deploymentDAUs, - getDeploymentValuesError, - getDeploymentDAUsError, - } = state.context; const permissions = usePermissions(); return ( @@ -50,13 +40,10 @@ export const DeploySettingsLayout: FC = () => {
- {deploymentValues ? ( + {deploymentConfigQuery.data ? ( }> diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx index a0283496e6..e7684b15ba 100644 --- a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx +++ b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx @@ -3,10 +3,12 @@ import { FC } from "react"; import { Helmet } from "react-helmet-async"; import { pageTitle } from "utils/page"; import { GeneralSettingsPageView } from "./GeneralSettingsPageView"; +import { useQuery } from "@tanstack/react-query"; +import { deploymentDAUs } from "api/queries/deployment"; const GeneralSettingsPage: FC = () => { - const { deploymentValues, deploymentDAUs, getDeploymentDAUsError } = - useDeploySettings(); + const { deploymentValues } = useDeploySettings(); + const deploymentDAUsQuery = useQuery(deploymentDAUs()); return ( <> @@ -15,8 +17,8 @@ const GeneralSettingsPage: FC = () => { ); diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx index aa4e204f8c..a711161f86 100644 --- a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx +++ b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx @@ -59,7 +59,7 @@ export const NoDAUs: Story = { export const DAUError: Story = { args: { deploymentDAUs: undefined, - getDeploymentDAUsError: mockApiError({ + deploymentDAUsError: mockApiError({ message: "Error fetching DAUs.", }), }, diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx index 0efa348b5c..aabdf9a98e 100644 --- a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx @@ -13,12 +13,12 @@ import { DeploymentOption } from "api/api"; export type GeneralSettingsPageViewProps = { deploymentOptions: DeploymentOption[]; deploymentDAUs?: DAUsResponse; - getDeploymentDAUsError: unknown; + deploymentDAUsError: unknown; }; export const GeneralSettingsPageView = ({ deploymentOptions, deploymentDAUs, - getDeploymentDAUsError, + deploymentDAUsError, }: GeneralSettingsPageViewProps): JSX.Element => { return ( <> @@ -28,8 +28,8 @@ export const GeneralSettingsPageView = ({ docsHref={docs("/admin/configure")} /> - {Boolean(getDeploymentDAUsError) && ( - + {Boolean(deploymentDAUsError) && ( + )} {deploymentDAUs && ( diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx index 4e27929081..8cce56cdbe 100644 --- a/site/src/pages/UsersPage/UsersPage.tsx +++ b/site/src/pages/UsersPage/UsersPage.tsx @@ -18,10 +18,10 @@ import { UsersPageView } from "./UsersPageView"; import { useStatusFilterMenu } from "./UsersFilter"; import { useFilter } from "components/Filter/filter"; import { useDashboard } from "components/Dashboard/DashboardProvider"; -import { deploymentConfigMachine } from "xServices/deploymentConfig/deploymentConfigMachine"; import { useQuery } from "@tanstack/react-query"; import { getAuthMethods } from "api/api"; import { roles } from "api/queries/roles"; +import { deploymentConfig } from "api/queries/deployment"; export const Language = { suspendDialogTitle: "Suspend user", @@ -62,14 +62,12 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => { paginationRef, count, } = usersState.context; - const { updateUsers: canEditUsers, viewDeploymentValues } = usePermissions(); const rolesQuery = useQuery({ ...roles(), enabled: canEditUsers }); - - // Ideally this only runs if 'canViewDeployment' is true. - // TODO: Prevent api call if the user does not have the perms. - const [state] = useMachine(deploymentConfigMachine); - const { deploymentValues } = state.context; + const { data: deploymentValues } = useQuery({ + ...deploymentConfig(), + enabled: viewDeploymentValues, + }); // Indicates if oidc roles are synced from the oidc idp. // Assign 'false' if unknown. const oidcRoleSyncEnabled = diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx index 99d1d75f34..c420b8330e 100644 --- a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx +++ b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx @@ -38,7 +38,7 @@ const renderWorkspacePage = async () => { jest.spyOn(api, "getTemplate").mockResolvedValueOnce(MockTemplate); jest.spyOn(api, "getTemplateVersionRichParameters").mockResolvedValueOnce([]); jest - .spyOn(api, "getDeploymentValues") + .spyOn(api, "getDeploymentConfig") .mockResolvedValueOnce(MockDeploymentConfig); jest .spyOn(api, "watchWorkspaceAgentLogs") diff --git a/site/src/xServices/deploymentConfig/deploymentConfigMachine.ts b/site/src/xServices/deploymentConfig/deploymentConfigMachine.ts deleted file mode 100644 index a7f0f283a7..0000000000 --- a/site/src/xServices/deploymentConfig/deploymentConfigMachine.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { DAUsResponse } from "./../../api/typesGenerated"; -import { - getDeploymentValues, - getDeploymentDAUs, - DeploymentConfig, -} from "api/api"; -import { createMachine, assign } from "xstate"; - -export const deploymentConfigMachine = createMachine( - { - id: "deploymentConfigMachine", - predictableActionArguments: true, - - schema: { - context: {} as { - deploymentValues?: DeploymentConfig; - getDeploymentValuesError?: unknown; - deploymentDAUs?: DAUsResponse; - getDeploymentDAUsError?: unknown; - }, - events: {} as { type: "LOAD" }, - services: {} as { - getDeploymentValues: { - data: DeploymentConfig; - }; - getDeploymentDAUs: { - data: DAUsResponse; - }; - }, - }, - tsTypes: {} as import("./deploymentConfigMachine.typegen").Typegen0, - initial: "config", - states: { - config: { - invoke: { - src: "getDeploymentValues", - onDone: { - target: "daus", - actions: ["assignDeploymentValues"], - }, - onError: { - target: "daus", - actions: ["assignGetDeploymentValuesError"], - }, - }, - tags: "loading", - }, - daus: { - invoke: { - src: "getDeploymentDAUs", - onDone: { - target: "done", - actions: ["assignDeploymentDAUs"], - }, - onError: { - target: "done", - actions: ["assignGetDeploymentDAUsError"], - }, - }, - tags: "loading", - }, - done: { - type: "final", - }, - }, - }, - { - services: { - getDeploymentValues: getDeploymentValues, - getDeploymentDAUs: async () => { - return getDeploymentDAUs(); - }, - }, - actions: { - assignDeploymentValues: assign({ - deploymentValues: (_, { data }) => data, - }), - assignGetDeploymentValuesError: assign({ - getDeploymentValuesError: (_, { data }) => data, - }), - assignDeploymentDAUs: assign({ - deploymentDAUs: (_, { data }) => data, - }), - assignGetDeploymentDAUsError: assign({ - getDeploymentDAUsError: (_, { data }) => data, - }), - }, - }, -); diff --git a/site/src/xServices/workspace/workspaceXService.ts b/site/src/xServices/workspace/workspaceXService.ts index a0069db8d9..26e96dbf06 100644 --- a/site/src/xServices/workspace/workspaceXService.ts +++ b/site/src/xServices/workspace/workspaceXService.ts @@ -781,7 +781,7 @@ async function loadInitialWorkspaceData({ (permissions as Permissions)?.viewDeploymentValues, ); const deploymentValues = canViewDeploymentValues - ? (await API.getDeploymentValues())?.config + ? (await API.getDeploymentConfig())?.config : undefined; return { workspace,