Revert "fix: Optimistically update the UI when a workspace action is triggered (#4898)" (#4912)

This reverts commit 8f4ae5b6ac.

site/src/pages/WorkspacePage/WorkspacePage.test.tsx

@@ -92,6 +92,16 @@ afterAll(() => {
 })
 
 describe("WorkspacePage", () => {
+  it("requests a stop job when the user presses Stop", async () => {
+    const stopWorkspaceMock = jest
+      .spyOn(api, "stopWorkspace")
+      .mockResolvedValueOnce(MockWorkspaceBuild)
+    testButton(
+      t("actionButton.stop", { ns: "workspacePage" }),
+      stopWorkspaceMock,
+    )
+  })
+
   it("requests a delete job when the user presses Delete and confirms", async () => {
     const user = userEvent.setup()
     const deleteWorkspaceMock = jest
@@ -130,23 +140,11 @@ describe("WorkspacePage", () => {
     const startWorkspaceMock = jest
       .spyOn(api, "startWorkspace")
       .mockImplementation(() => Promise.resolve(MockWorkspaceBuild))
-    await testButton(
+    testButton(
       t("actionButton.start", { ns: "workspacePage" }),
       startWorkspaceMock,
     )
   })
-
-  it("requests a stop job when the user presses Stop", async () => {
-    const stopWorkspaceMock = jest
-      .spyOn(api, "stopWorkspace")
-      .mockResolvedValueOnce(MockWorkspaceBuild)
-
-    await testButton(
-      t("actionButton.stop", { ns: "workspacePage" }),
-      stopWorkspaceMock,
-    )
-  })
-
   it("requests cancellation when the user presses Cancel", async () => {
     server.use(
       rest.get(

site/src/xServices/workspace/workspaceXService.ts

@@ -40,27 +40,6 @@ const moreBuildsAvailable = (
   return event.data.latest_build.updated_at !== latestBuildInTimeline.updated_at
 }
 
-const updateWorkspaceStatus = (
-  status: TypesGen.WorkspaceStatus,
-  workspace?: TypesGen.Workspace,
-) => {
-  if (!workspace) {
-    throw new Error("Workspace not defined")
-  }
-
-  return {
-    ...workspace,
-    latest_build: {
-      ...workspace.latest_build,
-      status,
-    },
-  }
-}
-
-const isUpdated = (newDateStr: string, oldDateStr: string): boolean => {
-  return new Date(oldDateStr).getTime() - new Date(newDateStr).getTime() > 0
-}
-
 const Language = {
   getTemplateWarning:
     "Error updating workspace: latest template could not be fetched.",
@@ -273,7 +252,6 @@ export const workspaceMachine = createMachine(
                 on: {
                   REFRESH_WORKSPACE: {
                     actions: ["refreshWorkspace"],
-                    cond: "hasUpdates",
                   },
                   EVENT_SOURCE_ERROR: {
                     target: "error",
@@ -347,7 +325,7 @@ export const workspaceMachine = createMachine(
                 },
               },
               requestingStart: {
-                entry: ["clearBuildError", "updateStatusToStarting"],
+                entry: "clearBuildError",
                 invoke: {
                   src: "startWorkspace",
                   id: "startWorkspace",
@@ -366,7 +344,7 @@ export const workspaceMachine = createMachine(
                 },
               },
               requestingStop: {
-                entry: ["clearBuildError", "updateStatusToStopping"],
+                entry: "clearBuildError",
                 invoke: {
                   src: "stopWorkspace",
                   id: "stopWorkspace",
@@ -385,7 +363,7 @@ export const workspaceMachine = createMachine(
                 },
               },
               requestingDelete: {
-                entry: ["clearBuildError", "updateStatusToDeleting"],
+                entry: "clearBuildError",
                 invoke: {
                   src: "deleteWorkspace",
                   id: "deleteWorkspace",
@@ -404,11 +382,7 @@ export const workspaceMachine = createMachine(
                 },
               },
               requestingCancel: {
-                entry: [
-                  "clearCancellationMessage",
-                  "clearCancellationError",
-                  "updateStatusToCanceling",
-                ],
+                entry: ["clearCancellationMessage", "clearCancellationError"],
                 invoke: {
                   src: "cancelWorkspace",
                   id: "cancelWorkspace",
@@ -456,7 +430,9 @@ export const workspaceMachine = createMachine(
                 on: {
                   REFRESH_TIMELINE: {
                     target: "#workspaceState.ready.timeline.gettingBuilds",
-                    cond: "moreBuildsAvailable",
+                    cond: {
+                      type: "moreBuildsAvailable",
+                    },
                   },
                 },
               },
@@ -623,46 +599,9 @@ export const workspaceMachine = createMachine(
         }),
         { to: "scheduleBannerMachine" },
       ),
-      // Optimistically updates. So when the user clicks on stop, we can show
-      // the "stopping" state right away without having to wait 0.5s ~ 2s to
-      // display the visual feedback to the user.
-      updateStatusToStarting: assign({
-        workspace: ({ workspace }) =>
-          updateWorkspaceStatus("starting", workspace),
-      }),
-      updateStatusToStopping: assign({
-        workspace: ({ workspace }) =>
-          updateWorkspaceStatus("stopping", workspace),
-      }),
-      updateStatusToDeleting: assign({
-        workspace: ({ workspace }) =>
-          updateWorkspaceStatus("deleting", workspace),
-      }),
-      updateStatusToCanceling: assign({
-        workspace: ({ workspace }) =>
-          updateWorkspaceStatus("canceling", workspace),
-      }),
     },
     guards: {
       moreBuildsAvailable,
-      // We only want to update the workspace when there are changes to it to
-      // avoid re-renderings and allow optimistically updates to improve the UI.
-      // When updating the workspace every second, the optimistic updates that
-      // were applied before get lost since it will be rewrite.
-      hasUpdates: ({ workspace }, event: { data: TypesGen.Workspace }) => {
-        if (!workspace) {
-          throw new Error("Workspace not defined")
-        }
-        const isWorkspaceUpdated = isUpdated(
-          event.data.updated_at,
-          workspace.updated_at,
-        )
-        const isBuildUpdated = isUpdated(
-          event.data.latest_build.updated_at,
-          workspace.latest_build.updated_at,
-        )
-        return isWorkspaceUpdated || isBuildUpdated
-      },
     },
     services: {
       getWorkspace: async (_, event) => {