chore(site): refactor deployment values service to react-query (#9669)

site/src/api/api.ts

@@ -1006,7 +1006,7 @@ export type DeploymentConfig = {
   readonly options: DeploymentOption[];
 };
 
-export const getDeploymentValues = async (): Promise<DeploymentConfig> => {
+export const getDeploymentConfig = async (): Promise<DeploymentConfig> => {
   const response = await axios.get(`/api/v2/deployment/config`);
   return response.data;
 };

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(),
+  };
+};

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 = () => {
         <Stack className={styles.wrapper} direction="row" spacing={6}>
           <Sidebar />
           <main className={styles.content}>
-            {deploymentValues ? (
+            {deploymentConfigQuery.data ? (
               <DeploySettingsContext.Provider
                 value={{
-                  deploymentValues,
-                  getDeploymentValuesError,
-                  deploymentDAUs,
-                  getDeploymentDAUsError,
+                  deploymentValues: deploymentConfigQuery.data,
                 }}
               >
                 <Suspense fallback={<Loader />}>

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 = () => {
       </Helmet>
       <GeneralSettingsPageView
         deploymentOptions={deploymentValues.options}
-        deploymentDAUs={deploymentDAUs}
-        getDeploymentDAUsError={getDeploymentDAUsError}
+        deploymentDAUs={deploymentDAUsQuery.data}
+        deploymentDAUsError={deploymentDAUsQuery.error}
       />
     </>
   );

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.",
     }),
   },

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")}
       />
       <Stack spacing={4}>
-        {Boolean(getDeploymentDAUsError) && (
-          <ErrorAlert error={getDeploymentDAUsError} />
+        {Boolean(deploymentDAUsError) && (
+          <ErrorAlert error={deploymentDAUsError} />
         )}
         {deploymentDAUs && (
           <Box height={200} sx={{ mb: 3 }}>

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 =

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")

site/src/xServices/deploymentConfig/deploymentConfigMachine.ts

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

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,