Fix: fix Workspace storybook and remove unnecessary fetching from xService (#1682)

* Make workspace machine ephemeral to limit polling

* Fix Workspace storybook

* Lint

* Remove breadcrumb from workspaceXService

site/src/components/Workspace/Workspace.stories.tsx

@@ -2,8 +2,17 @@ import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
 import React from "react"
 import {
+  MockCanceledWorkspace,
+  MockCancelingWorkspace,
+  MockDeletedWorkspace,
+  MockDeletingWorkspace,
+  MockFailedWorkspace,
   MockOutdatedWorkspace,
+  MockStartingWorkspace,
+  MockStoppedWorkspace,
+  MockStoppingWorkspace,
   MockWorkspace,
+  MockWorkspaceBuild,
   MockWorkspaceResource,
   MockWorkspaceResource2,
 } from "../../testHelpers/renderHelpers"
@@ -23,36 +32,33 @@ Started.args = {
   handleStart: action("start"),
   handleStop: action("stop"),
   handleRetry: action("retry"),
-  workspaceStatus: "started",
   resources: [MockWorkspaceResource, MockWorkspaceResource2],
+  builds: [MockWorkspaceBuild],
 }
 
 export const Starting = Template.bind({})
-Starting.args = { ...Started.args, workspaceStatus: "starting" }
+Starting.args = { ...Started.args, workspace: MockStartingWorkspace }
 
 export const Stopped = Template.bind({})
-Stopped.args = { ...Started.args, workspaceStatus: "stopped" }
+Stopped.args = { ...Started.args, workspace: MockStoppedWorkspace }
 
 export const Stopping = Template.bind({})
-Stopping.args = { ...Started.args, workspaceStatus: "stopping" }
+Stopping.args = { ...Started.args, workspace: MockStoppingWorkspace }
 
 export const Error = Template.bind({})
-Error.args = { ...Started.args, workspaceStatus: "error" }
-
-export const BuildLoading = Template.bind({})
-BuildLoading.args = { ...Started.args, workspaceStatus: "loading" }
+Error.args = { ...Started.args, workspace: MockFailedWorkspace }
 
 export const Deleting = Template.bind({})
-Deleting.args = { ...Started.args, workspaceStatus: "deleting" }
+Deleting.args = { ...Started.args, workspace: MockDeletingWorkspace }
 
 export const Deleted = Template.bind({})
-Deleted.args = { ...Started.args, workspaceStatus: "deleted" }
+Deleted.args = { ...Started.args, workspace: MockDeletedWorkspace }
 
 export const Canceling = Template.bind({})
-Canceling.args = { ...Started.args, workspaceStatus: "canceling" }
+Canceling.args = { ...Started.args, workspace: MockCancelingWorkspace }
 
-export const NoBreadcrumb = Template.bind({})
-NoBreadcrumb.args = { ...Started.args, template: undefined }
+export const Canceled = Template.bind({})
+Canceled.args = { ...Started.args, workspace: MockCanceledWorkspace }
 
 export const Outdated = Template.bind({})
 Outdated.args = { ...Started.args, workspace: MockOutdatedWorkspace }

site/src/components/Workspace/Workspace.tsx

@@ -3,7 +3,6 @@ import Typography from "@material-ui/core/Typography"
 import React from "react"
 import * as TypesGen from "../../api/typesGenerated"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
-import { WorkspaceStatus } from "../../util/workspace"
 import { BuildsTable } from "../BuildsTable/BuildsTable"
 import { Resources } from "../Resources/Resources"
 import { Stack } from "../Stack/Stack"
@@ -18,7 +17,6 @@ export interface WorkspaceProps {
   handleRetry: () => void
   handleUpdate: () => void
   workspace: TypesGen.Workspace
-  workspaceStatus: WorkspaceStatus
   resources?: TypesGen.WorkspaceResource[]
   getResourcesError?: Error
   builds?: TypesGen.WorkspaceBuild[]
@@ -33,7 +31,6 @@ export const Workspace: React.FC<WorkspaceProps> = ({
   handleRetry,
   handleUpdate,
   workspace,
-  workspaceStatus,
   resources,
   getResourcesError,
   builds,
@@ -60,7 +57,6 @@ export const Workspace: React.FC<WorkspaceProps> = ({
             handleStop={handleStop}
             handleRetry={handleRetry}
             handleUpdate={handleUpdate}
-            workspaceStatus={workspaceStatus}
           />
         </div>
       </div>

site/src/components/WorkspaceActions/WorkspaceActions.tsx

@@ -8,7 +8,7 @@ import StopIcon from "@material-ui/icons/Stop"
 import React from "react"
 import { Link as RouterLink } from "react-router-dom"
 import { Workspace } from "../../api/typesGenerated"
-import { WorkspaceStatus } from "../../util/workspace"
+import { getWorkspaceStatus, WorkspaceStatus } from "../../util/workspace"
 import { Stack } from "../Stack/Stack"
 import { WorkspaceActionButton } from "../WorkspaceActionButton/WorkspaceActionButton"
 
@@ -30,7 +30,6 @@ const canAcceptJobs = (workspaceStatus: WorkspaceStatus) =>
 
 export interface WorkspaceActionsProps {
   workspace: Workspace
-  workspaceStatus: WorkspaceStatus
   handleStart: () => void
   handleStop: () => void
   handleRetry: () => void
@@ -39,13 +38,13 @@ export interface WorkspaceActionsProps {
 
 export const WorkspaceActions: React.FC<WorkspaceActionsProps> = ({
   workspace,
-  workspaceStatus,
   handleStart,
   handleStop,
   handleRetry,
   handleUpdate,
 }) => {
   const styles = useStyles()
+  const workspaceStatus = getWorkspaceStatus(workspace.latest_build)
 
   return (
     <Stack direction="row" spacing={1}>

site/src/pages/WorkspacePage/WorkspacePage.tsx

@@ -7,7 +7,6 @@ import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
 import { Workspace } from "../../components/Workspace/Workspace"
 import { firstOrItem } from "../../util/array"
-import { getWorkspaceStatus } from "../../util/workspace"
 import { workspaceMachine } from "../../xServices/workspace/workspaceXService"
 
 export const WorkspacePage: React.FC = () => {
@@ -16,7 +15,6 @@ export const WorkspacePage: React.FC = () => {
 
   const [workspaceState, workspaceSend] = useMachine(workspaceMachine)
   const { workspace, resources, getWorkspaceError, getResourcesError, builds } = workspaceState.context
-  const workspaceStatus = getWorkspaceStatus(workspace?.latest_build)
 
   /**
    * Get workspace, template, and organization on mount and whenever workspaceId changes.
@@ -40,7 +38,6 @@ export const WorkspacePage: React.FC = () => {
             handleStop={() => workspaceSend("STOP")}
             handleRetry={() => workspaceSend("RETRY")}
             handleUpdate={() => workspaceSend("UPDATE")}
-            workspaceStatus={workspaceStatus}
             resources={resources}
             getResourcesError={getResourcesError instanceof Error ? getResourcesError : undefined}
             builds={builds}

site/src/testHelpers/entities.ts

@@ -76,6 +76,10 @@ export const MockCancelingProvisionerJob = {
   ...MockProvisionerJob,
   status: "canceling" as TypesGen.ProvisionerJobStatus,
 }
+export const MockCanceledProvisionerJob = {
+  ...MockProvisionerJob,
+  status: "canceled" as TypesGen.ProvisionerJobStatus,
+}
 export const MockRunningProvisionerJob = { ...MockProvisionerJob, status: "running" as TypesGen.ProvisionerJobStatus }
 
 export const MockTemplateVersion: TypesGen.TemplateVersion = {
@@ -164,6 +168,10 @@ export const MockCancelingWorkspace: TypesGen.Workspace = {
   ...MockWorkspace,
   latest_build: { ...MockWorkspaceBuild, job: MockCancelingProvisionerJob },
 }
+export const MockCanceledWorkspace: TypesGen.Workspace = {
+  ...MockWorkspace,
+  latest_build: { ...MockWorkspaceBuild, job: MockCanceledProvisionerJob },
+}
 export const MockFailedWorkspace: TypesGen.Workspace = {
   ...MockWorkspace,
   latest_build: { ...MockWorkspaceBuild, job: MockFailedProvisionerJob },

site/src/xServices/workspace/workspaceXService.ts

@@ -19,12 +19,9 @@ const Language = {
 export interface WorkspaceContext {
   workspace?: TypesGen.Workspace
   template?: TypesGen.Template
-  organization?: TypesGen.Organization
   build?: TypesGen.WorkspaceBuild
   resources?: TypesGen.WorkspaceResource[]
   getWorkspaceError?: Error | unknown
-  getTemplateError?: Error | unknown
-  getOrganizationError?: Error | unknown
   // error creating a new WorkspaceBuild
   buildError?: Error | unknown
   // these are separate from getX errors because they don't make the page unusable
@@ -59,9 +56,6 @@ export const workspaceMachine = createMachine(
         getTemplate: {
           data: TypesGen.Template
         }
-        getOrganization: {
-          data: TypesGen.Organization
-        }
         startWorkspace: {
           data: TypesGen.WorkspaceBuild
         }
@@ -130,43 +124,6 @@ export const workspaceMachine = createMachine(
               },
             },
           },
-          breadcrumb: {
-            initial: "gettingTemplate",
-            states: {
-              gettingTemplate: {
-                invoke: {
-                  src: "getTemplate",
-                  id: "getTemplate",
-                  onDone: {
-                    target: "gettingOrganization",
-                    actions: ["assignTemplate", "clearGetTemplateError"],
-                  },
-                  onError: {
-                    target: "error",
-                    actions: "assignGetTemplateError",
-                  },
-                },
-                tags: "loading",
-              },
-              gettingOrganization: {
-                invoke: {
-                  src: "getOrganization",
-                  id: "getOrganization",
-                  onDone: {
-                    target: "ready",
-                    actions: ["assignOrganization", "clearGetOrganizationError"],
-                  },
-                  onError: {
-                    target: "error",
-                    actions: "assignGetOrganizationError",
-                  },
-                },
-                tags: "loading",
-              },
-              error: {},
-              ready: {},
-            },
-          },
           build: {
             initial: "idle",
             states: {
@@ -309,7 +266,6 @@ export const workspaceMachine = createMachine(
         assign({
           workspace: undefined,
           template: undefined,
-          organization: undefined,
           build: undefined,
         }),
       assignWorkspace: assign({
@@ -322,17 +278,6 @@ export const workspaceMachine = createMachine(
       assignTemplate: assign({
         template: (_, event) => event.data,
       }),
-      assignGetTemplateError: assign({
-        getTemplateError: (_, event) => event.data,
-      }),
-      clearGetTemplateError: (context) => assign({ ...context, getTemplateError: undefined }),
-      assignOrganization: assign({
-        organization: (_, event) => event.data,
-      }),
-      assignGetOrganizationError: assign({
-        getOrganizationError: (_, event) => event.data,
-      }),
-      clearGetOrganizationError: (context) => assign({ ...context, getOrganizationError: undefined }),
       assignBuild: (_, event) =>
         assign({
           build: event.data,
@@ -438,13 +383,6 @@ export const workspaceMachine = createMachine(
           throw Error("Cannot get template without workspace")
         }
       },
-      getOrganization: async (context) => {
-        if (context.template) {
-          return await API.getOrganization(context.template.organization_id)
-        } else {
-          throw Error("Cannot get organization without template")
-        }
-      },
       startWorkspace: async (context) => {
         if (context.workspace) {
           return await API.startWorkspace(context.workspace.id, context.template?.active_version_id)