fix: hiding agent status on stopped workspaces (#3512)

* hiding agent status on a stopped workspaace

resolves #3484

* run prettier and lint

* Update site/src/components/Resources/Resources.tsx

Co-authored-by: Joe Previte <jjprevite@gmail.com>

* running prettier

Co-authored-by: Joe Previte <jjprevite@gmail.com>

site/src/components/Resources/Resources.test.tsx

@@ -0,0 +1,27 @@
+import { screen } from "@testing-library/react"
+import {
+  MockStoppedWorkspace,
+  MockWorkspaceResource,
+  MockWorkspaceResource2,
+} from "testHelpers/entities"
+import { render } from "testHelpers/renderHelpers"
+import { DisplayAgentStatusLanguage } from "util/workspace"
+import { Resources } from "./Resources"
+
+describe("ResourceTable", () => {
+  it("hides status text when a workspace is stopped", async () => {
+    // When
+    const props = {
+      resource: [{ ...MockWorkspaceResource }, { ...MockWorkspaceResource2 }],
+      workspace: { ...MockStoppedWorkspace },
+      canUpdateWorkspace: false,
+    }
+
+    render(<Resources {...props} />)
+
+    const statusText = screen.queryByText(DisplayAgentStatusLanguage.connecting)
+
+    // Then
+    expect(statusText).toBeNull()
+  })
+})

site/src/components/Resources/Resources.tsx

@@ -8,8 +8,8 @@ import TableRow from "@material-ui/core/TableRow"
 import useTheme from "@material-ui/styles/useTheme"
 import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import { FC } from "react"
+import { getDisplayAgentStatus, getWorkspaceStatus, WorkspaceStateEnum } from "util/workspace"
 import { Workspace, WorkspaceResource } from "../../api/typesGenerated"
-import { getDisplayAgentStatus } from "../../util/workspace"
 import { AppLink } from "../AppLink/AppLink"
 import { SSHButton } from "../SSHButton/SSHButton"
 import { Stack } from "../Stack/Stack"
@@ -42,6 +42,10 @@ export const Resources: FC<ResourcesProps> = ({
   const styles = useStyles()
   const theme: Theme = useTheme()
 
+  const workspaceStatus: keyof typeof WorkspaceStateEnum = getWorkspaceStatus(
+    workspace.latest_build,
+  )
+
   return (
     <div aria-label={Language.resources} className={styles.wrapper}>
       {getResourcesError ? (
@@ -102,9 +106,12 @@ export const Resources: FC<ResourcesProps> = ({
                         {agent.name}
                         <div className={styles.agentInfo}>
                           <span className={styles.operatingSystem}>{agent.operating_system}</span>
-                          <span style={{ color: agentStatus.color }} className={styles.status}>
-                            {agentStatus.status}
-                          </span>
+                          {WorkspaceStateEnum[workspaceStatus] !==
+                            WorkspaceStateEnum["stopped"] && (
+                            <span style={{ color: agentStatus.color }} className={styles.status}>
+                              {agentStatus.status}
+                            </span>
+                          )}
                         </div>
                       </TableCell>
                       <TableCell>

site/src/components/WorkspaceActions/ActionCtas.tsx

@@ -8,8 +8,8 @@ import PlayCircleOutlineIcon from "@material-ui/icons/PlayCircleOutline"
 import { LoadingButton } from "components/LoadingButton/LoadingButton"
 import { FC } from "react"
 import { combineClasses } from "util/combineClasses"
+import { WorkspaceStateEnum } from "util/workspace"
 import { WorkspaceActionButton } from "../WorkspaceActionButton/WorkspaceActionButton"
-import { WorkspaceStateEnum } from "./constants"
 
 export const Language = {
   start: "Start",

site/src/components/WorkspaceActions/DropdownContent/DropdownContent.stories.tsx

@@ -1,11 +1,7 @@
 import { Story } from "@storybook/react"
+import { WorkspaceStateEnum } from "util/workspace"
 import { DeleteButton, StartButton, StopButton } from "../ActionCtas"
-import {
-  ButtonMapping,
-  ButtonTypesEnum,
-  WorkspaceStateActions,
-  WorkspaceStateEnum,
-} from "../constants"
+import { ButtonMapping, ButtonTypesEnum, WorkspaceStateActions } from "../constants"
 import { DropdownContent, DropdownContentProps } from "./DropdownContent"
 
 // These are the stories for the secondary actions (housed in the dropdown)

site/src/components/WorkspaceActions/WorkspaceActions.test.tsx

@@ -1,8 +1,8 @@
 import { screen } from "@testing-library/react"
+import { WorkspaceStateEnum } from "util/workspace"
 import * as Mocks from "../../testHelpers/entities"
 import { render } from "../../testHelpers/renderHelpers"
 import { Language } from "./ActionCtas"
-import { WorkspaceStateEnum } from "./constants"
 import { WorkspaceActions, WorkspaceActionsProps } from "./WorkspaceActions"
 
 const renderComponent = async (props: Partial<WorkspaceActionsProps> = {}) => {

site/src/components/WorkspaceActions/WorkspaceActions.tsx

@@ -2,8 +2,8 @@ import Button from "@material-ui/core/Button"
 import Popover from "@material-ui/core/Popover"
 import { makeStyles } from "@material-ui/core/styles"
 import { FC, useEffect, useMemo, useRef, useState } from "react"
+import { getWorkspaceStatus, WorkspaceStateEnum, WorkspaceStatus } from "util/workspace"
 import { Workspace } from "../../api/typesGenerated"
-import { getWorkspaceStatus, WorkspaceStatus } from "../../util/workspace"
 import { CloseDropdown, OpenDropdown } from "../DropdownArrows/DropdownArrows"
 import {
   ActionLoadingButton,
@@ -15,12 +15,7 @@ import {
   StopButton,
   UpdateButton,
 } from "./ActionCtas"
-import {
-  ButtonMapping,
-  ButtonTypesEnum,
-  WorkspaceStateActions,
-  WorkspaceStateEnum,
-} from "./constants"
+import { ButtonMapping, ButtonTypesEnum, WorkspaceStateActions } from "./constants"
 import { DropdownContent } from "./DropdownContent/DropdownContent"
 
 /**

site/src/components/WorkspaceActions/constants.ts

@@ -1,19 +1,5 @@
 import { ReactNode } from "react"
-
-// all the possible states returned by the API
-export enum WorkspaceStateEnum {
-  starting = "Starting",
-  started = "Started",
-  stopping = "Stopping",
-  stopped = "Stopped",
-  canceling = "Canceling",
-  canceled = "Canceled",
-  deleting = "Deleting",
-  deleted = "Deleted",
-  queued = "Queued",
-  error = "Error",
-  loading = "Loading",
-}
+import { WorkspaceStateEnum } from "util/workspace"
 
 // the button types we have
 export enum ButtonTypesEnum {

site/src/util/workspace.ts

@@ -6,6 +6,21 @@ import * as TypesGen from "../api/typesGenerated"
 
 dayjs.extend(utc)
 
+// all the possible states returned by the API
+export enum WorkspaceStateEnum {
+  starting = "Starting",
+  started = "Started",
+  stopping = "Stopping",
+  stopped = "Stopped",
+  canceling = "Canceling",
+  canceled = "Canceled",
+  deleting = "Deleting",
+  deleted = "Deleted",
+  queued = "Queued",
+  error = "Error",
+  loading = "Loading",
+}
+
 export type WorkspaceStatus =
   | "queued"
   | "started"