coder · BrunoQuaresma · Nov 8, 2023 · Nov 8, 2023 · Nov 8, 2023 · Nov 8, 2023
diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -1,4 +1,3 @@
-import { useActor } from "@xstate/react";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
 import dayjs from "dayjs";
 import { useFeatureVisibility } from "hooks/useFeatureVisibility";
@@ -34,6 +33,7 @@ import { templateVersion, templateVersions } from "api/queries/templates";
 import { Alert } from "components/Alert/Alert";
 import { Stack } from "components/Stack/Stack";
 import { useWorkspaceBuildLogs } from "hooks/useWorkspaceBuildLogs";
+import { useDecreaseDeadline, useIncreaseDeadline } from "./scheduleControls";
 
 interface WorkspaceReadyPageProps {
   workspaceState: StateFrom<typeof workspaceMachine>;
@@ -56,9 +56,6 @@ export const WorkspaceReadyPage = ({
   isLoadingMoreBuilds,
   hasMoreBuilds,
 }: WorkspaceReadyPageProps): JSX.Element => {
-  const [_, bannerSend] = useActor(
-    workspaceState.children["scheduleBannerMachine"],
-  );
   const { buildInfo } = useDashboard();
   const featureVisibility = useFeatureVisibility();
   const {
@@ -121,10 +118,8 @@ export const WorkspaceReadyPage = ({
   } = useMutation({
     mutationFn: restartWorkspace,
   });
-  // keep banner machine in sync with workspace
-  useEffect(() => {
-    bannerSend({ type: "REFRESH_WORKSPACE", workspace });
-  }, [bannerSend, workspace]);
+  const decreaseDeadline = useDecreaseDeadline(workspace);
+  const increaseDeadline = useIncreaseDeadline(workspace);
 
   return (
     <>
@@ -144,18 +139,8 @@ export const WorkspaceReadyPage = ({
 
       <Workspace
         scheduleProps={{
-          onDeadlineMinus: (hours: number) => {
-            bannerSend({
-              type: "DECREASE_DEADLINE",
-              hours,
-            });
-          },
-          onDeadlinePlus: (hours: number) => {
-            bannerSend({
-              type: "INCREASE_DEADLINE",
-              hours,
-            });
-          },
+          onDeadlineMinus: decreaseDeadline,
+          onDeadlinePlus: increaseDeadline,
           maxDeadlineDecrease: getMaxDeadlineChange(deadline, getMinDeadline()),
           maxDeadlineIncrease: getMaxDeadlineChange(
             getMaxDeadline(workspace),

diff --git a/site/src/pages/WorkspacePage/scheduleControls.ts b/site/src/pages/WorkspacePage/scheduleControls.ts
@@ -0,0 +1,50 @@
+import { putWorkspaceExtension } from "api/api";
+import { Workspace } from "api/typesGenerated";
+import dayjs from "dayjs";
+import { getDeadline, getMaxDeadline, getMinDeadline } from "utils/schedule";
+import minMax from "dayjs/plugin/minMax";
+import { useMutation } from "react-query";
+import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
+import { getErrorMessage } from "api/errors";
+
+dayjs.extend(minMax);
+
+const callbacks = {
+  onSuccess: () => {
+    displaySuccess("Updated workspace shutdown time.");
+  },
+  onError: (error: unknown) => {
+    displayError(
+      getErrorMessage(error, "Failed to update workspace shutdown time."),
+    );
+  },
+};
+
+export const useIncreaseDeadline = (workspace: Workspace) => {
+  const mutation = useMutation({
+    mutationFn: (hours: number) => increaseDeadline(workspace, hours),
+    ...callbacks,
+  });
+  return mutation.mutate;
+};
+
+export const useDecreaseDeadline = (workspace: Workspace) => {
+  const mutation = useMutation({
+    mutationFn: (hours: number) => decreaseDeadline(workspace, hours),
+    ...callbacks,
+  });
+  return mutation.mutate;
+};
+
+const increaseDeadline = (workspace: Workspace, hours: number) => {
+  const proposedDeadline = getDeadline(workspace).add(hours, "hours");
+  const newDeadline = dayjs.min(proposedDeadline, getMaxDeadline(workspace));
+
+  return putWorkspaceExtension(workspace.id, newDeadline);
+};
+
+const decreaseDeadline = (workspace: Workspace, hours: number) => {
+  const proposedDeadline = getDeadline(workspace).subtract(hours, "hours");
+  const newDeadline = dayjs.max(proposedDeadline, getMinDeadline());
+  return putWorkspaceExtension(workspace.id, newDeadline);
+};
diff --git a/site/src/xServices/workspace/workspaceXService.ts b/site/src/xServices/workspace/workspaceXService.ts
@@ -1,5 +1,4 @@
 import { getErrorMessage } from "api/errors";
-import { workspaceScheduleBannerMachine } from "xServices/workspaceSchedule/workspaceScheduleBannerXService";
 import { assign, createMachine } from "xstate";
 import * as API from "api/api";
 import * as TypesGen from "api/typesGenerated";
@@ -416,15 +415,6 @@ export const workspaceMachine = createMachine(
               },
             },
           },
-          schedule: {
-            invoke: {
-              id: "scheduleBannerMachine",
-              src: "scheduleBannerMachine",
-              data: {
-                workspace: (context: WorkspaceContext) => context.workspace,
-              },
-            },
-          },
         },
       },
       error: {
@@ -672,7 +662,6 @@ export const workspaceMachine = createMachine(
           context.eventSource?.close();
         };
       },
-      scheduleBannerMachine: workspaceScheduleBannerMachine,
       getSSHPrefix: async () => {
         return API.getDeploymentSSHConfig();
       },

diff --git a/site/src/xServices/workspaceSchedule/workspaceScheduleBannerXService.ts b/site/src/xServices/workspaceSchedule/workspaceScheduleBannerXService.ts