diff --git a/site/src/api/api.ts b/site/src/api/api.ts index 86c4ba9d05..b0fd104d6f 100644 --- a/site/src/api/api.ts +++ b/site/src/api/api.ts @@ -961,9 +961,11 @@ export const deleteGroup = async (groupId: string): Promise => { }; export const getWorkspaceQuota = async ( - userID: string, + username: string, ): Promise => { - 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 new file mode 100644 index 0000000000..72aaf5c716 --- /dev/null +++ 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 index f691212eae..8bea64cd0f 100644 --- 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> = ({ buildInfo, sshPrefix, template, - quota_budget, + quotaBudget, handleBuildRetry, templateWarnings, buildLogs, @@ -183,7 +183,7 @@ export const Workspace: 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 ( { condition={ Boolean(workspace) && workspaceState.matches("ready") && - quotaState.matches("success") + quotaQuery.isSuccess } > diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx index aa5d5dabda..c1564fa15a 100644 --- 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; - quotaState: StateFrom; 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 index a9995aed15..f5cfd4613d 100644 --- a/site/src/pages/WorkspacePage/WorkspaceStats.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceStats.tsx @@ -39,7 +39,7 @@ export interface WorkspaceStatsProps { maxDeadlineIncrease: number; maxDeadlineDecrease: number; canUpdateWorkspace: boolean; - quota_budget?: number; + quotaBudget?: number; onDeadlinePlus: (hours: number) => void; onDeadlineMinus: (hours: number) => void; handleUpdate: () => void; @@ -47,7 +47,7 @@ export interface WorkspaceStatsProps { export const WorkspaceStats: FC = ({ workspace, - quota_budget, + quotaBudget, maxDeadlineDecrease, maxDeadlineIncrease, canUpdateWorkspace, @@ -169,7 +169,7 @@ export const WorkspaceStats: FC = ({ 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 deleted file mode 100644 index 811cbea04f..0000000000 --- a/site/src/xServices/quotas/quotasXService.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { assign, createMachine } from "xstate"; -import * as API from "../../api/api"; -import { WorkspaceQuota } from "../../api/typesGenerated"; - -export type QuotaContext = { - username: string; - quota?: WorkspaceQuota; - getQuotaError?: unknown; -}; - -export const quotaMachine = createMachine( - { - id: "quotasMachine", - predictableActionArguments: true, - tsTypes: {} as import("./quotasXService.typegen").Typegen0, - schema: { - context: {} as QuotaContext, - services: { - getQuota: { - data: {} as WorkspaceQuota, - }, - }, - }, - initial: "gettingQuotas", - states: { - idle: {}, - gettingQuotas: { - entry: "clearGetQuotaError", - invoke: { - id: "getQuota", - src: "getQuota", - onDone: { - target: "success", - actions: ["assignQuota"], - }, - onError: { - target: "idle", - actions: ["assignGetQuotaError"], - }, - }, - }, - success: { - type: "final", - }, - }, - }, - { - actions: { - assignQuota: assign({ - quota: (_, event) => event.data, - }), - assignGetQuotaError: assign({ - getQuotaError: (_, event) => event.data, - }), - clearGetQuotaError: assign({ - getQuotaError: (_) => undefined, - }), - }, - services: { - getQuota: ({ username }) => API.getWorkspaceQuota(username), - }, - }, -);