chore(site): refactor workspace quota to use react-query instead of XState (coder#9626)

BrunoQuaresma · web-flow · commit b33cb0ef97af · 2023-09-12T14:58:35.000-03:00
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -961,9 +961,11 @@ export const deleteGroup = async (groupId: string): Promise<void> => {
 };
 
 export const getWorkspaceQuota = async (
-  userID: string,
+  username: string,
 ): Promise<TypesGen.WorkspaceQuota> => {
-  const response = await axios.get(`/api/v2/workspace-quota/${userID}`);
+  const response = await axios.get(
+    `/api/v2/workspace-quota/${encodeURIComponent(username)}`,
+  );
   return response.data;
 };
 
diff --git a/site/src/api/queries/workspaceQuota.ts b/site/src/api/queries/workspaceQuota.ts
@@ -0,0 +1,13 @@
+import * as API from "api/api";
+
+const getWorkspaceQuotaQueryKey = (username: string) => [
+  username,
+  "workspaceQuota",
+];
+
+export const workspaceQuota = (username: string) => {
+  return {
+    queryKey: getWorkspaceQuotaQueryKey(username),
+    queryFn: () => API.getWorkspaceQuota(username),
+  };
+};
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -68,7 +68,7 @@ export interface WorkspaceProps {
   buildInfo?: TypesGen.BuildInfoResponse;
   sshPrefix?: string;
   template?: TypesGen.Template;
-  quota_budget?: number;
+  quotaBudget?: number;
   handleBuildRetry: () => void;
   buildLogs?: React.ReactNode;
 }
@@ -101,7 +101,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   buildInfo,
   sshPrefix,
   template,
-  quota_budget,
+  quotaBudget,
   handleBuildRetry,
   templateWarnings,
   buildLogs,
@@ -183,7 +183,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
 
         <WorkspaceStats
           workspace={workspace}
-          quota_budget={quota_budget}
+          quotaBudget={quotaBudget}
           handleUpdate={handleUpdate}
           canUpdateWorkspace={canUpdateWorkspace}
           maxDeadlineDecrease={scheduleProps.maxDeadlineDecrease}
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -3,14 +3,15 @@ import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { Loader } from "components/Loader/Loader";
 import { FC } from "react";
 import { useParams } from "react-router-dom";
-import { quotaMachine } from "xServices/quotas/quotasXService";
 import { workspaceMachine } from "xServices/workspace/workspaceXService";
 import { WorkspaceReadyPage } from "./WorkspaceReadyPage";
 import { RequirePermission } from "components/RequirePermission/RequirePermission";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { useOrganizationId } from "hooks";
 import { isAxiosError } from "axios";
 import { Margins } from "components/Margins/Margins";
+import { workspaceQuota } from "api/queries/workspaceQuota";
+import { useQuery } from "@tanstack/react-query";
 
 export const WorkspacePage: FC = () => {
   const params = useParams() as {
@@ -28,9 +29,8 @@ export const WorkspacePage: FC = () => {
     },
   });
   const { workspace, error } = workspaceState.context;
-  const [quotaState] = useMachine(quotaMachine, { context: { username } });
-  const { getQuotaError } = quotaState.context;
-  const pageError = error ?? getQuotaError;
+  const quotaQuery = useQuery(workspaceQuota(username));
+  const pageError = error ?? quotaQuery.error;
 
   return (
     <RequirePermission
@@ -48,12 +48,12 @@ export const WorkspacePage: FC = () => {
           condition={
             Boolean(workspace) &&
             workspaceState.matches("ready") &&
-            quotaState.matches("success")
+            quotaQuery.isSuccess
           }
         >
           <WorkspaceReadyPage
             workspaceState={workspaceState}
-            quotaState={quotaState}
+            quota={quotaQuery.data}
             workspaceSend={workspaceSend}
           />
         </Cond>
diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -11,7 +11,6 @@ import {
   getMaxDeadlineChange,
   getMinDeadline,
 } from "utils/schedule";
-import { quotaMachine } from "xServices/quotas/quotasXService";
 import { StateFrom } from "xstate";
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
 import { Workspace, WorkspaceErrors } from "./Workspace";
@@ -38,14 +37,14 @@ import { WorkspaceBuildLogsSection } from "./WorkspaceBuildLogsSection";
 
 interface WorkspaceReadyPageProps {
   workspaceState: StateFrom<typeof workspaceMachine>;
-  quotaState: StateFrom<typeof quotaMachine>;
   workspaceSend: (event: WorkspaceEvent) => void;
+  quota?: TypesGen.WorkspaceQuota;
 }
 
 export const WorkspaceReadyPage = ({
   workspaceState,
-  quotaState,
   workspaceSend,
+  quota,
 }: WorkspaceReadyPageProps): JSX.Element => {
   const [_, bannerSend] = useActor(
     workspaceState.children["scheduleBannerMachine"],
@@ -186,7 +185,7 @@ export const WorkspaceReadyPage = ({
         buildInfo={buildInfo}
         sshPrefix={sshPrefix}
         template={template}
-        quota_budget={quotaState.context.quota?.budget}
+        quotaBudget={quota?.budget}
         templateWarnings={templateVersion?.warnings}
         buildLogs={
           shouldDisplayBuildLogs && (
diff --git a/site/src/pages/WorkspacePage/WorkspaceStats.tsx b/site/src/pages/WorkspacePage/WorkspaceStats.tsx
@@ -39,15 +39,15 @@ export interface WorkspaceStatsProps {
   maxDeadlineIncrease: number;
   maxDeadlineDecrease: number;
   canUpdateWorkspace: boolean;
-  quota_budget?: number;
+  quotaBudget?: number;
   onDeadlinePlus: (hours: number) => void;
   onDeadlineMinus: (hours: number) => void;
   handleUpdate: () => void;
 }
 
 export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
   workspace,
-  quota_budget,
+  quotaBudget,
   maxDeadlineDecrease,
   maxDeadlineIncrease,
   canUpdateWorkspace,
@@ -169,7 +169,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
             className={styles.statsItem}
             label={Language.costLabel}
             value={`${workspace.latest_build.daily_cost} ${
-              quota_budget ? `/ ${quota_budget}` : ""
+              quotaBudget ? `/ ${quotaBudget}` : ""
             }`}
           />
         )}
diff --git a/site/src/xServices/quotas/quotasXService.ts b/site/src/xServices/quotas/quotasXService.ts
