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

BrunoQuaresma · web-flow · commit 3b088a5cb81c · 2023-09-14T18:49:23.000-03:00
diff --git 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<DeploymentConfig> => {
+export const getDeploymentConfig = async (): Promise<DeploymentConfig> => {
   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
@@ -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
@@ -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 />}>
diff --git 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 = () => {
       </Helmet>
       <GeneralSettingsPageView
         deploymentOptions={deploymentValues.options}
-        deploymentDAUs={deploymentDAUs}
-        getDeploymentDAUsError={getDeploymentDAUsError}
+        deploymentDAUs={deploymentDAUsQuery.data}
+        deploymentDAUsError={deploymentDAUsQuery.error}
       />
     </>
   );
diff --git 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
@@ -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 }}>
diff --git 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
@@ -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
diff --git 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,
