Aug 17, 2022 · Aug 15, 2022 · Aug 15, 2022 · Aug 16, 2022 · Aug 17, 2022 · Aug 15, 2022
diff --git a/site/src/components/Resources/Resources.test.tsx b/site/src/components/Resources/Resources.test.tsx
 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()
  })
 })
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
 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"
  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 ? (
                        {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>
diff --git a/site/src/components/WorkspaceActions/ActionCtas.tsx b/site/src/components/WorkspaceActions/ActionCtas.tsx
 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",
diff --git a/site/src/components/WorkspaceActions/DropdownContent/DropdownContent.stories.tsx b/site/src/components/WorkspaceActions/DropdownContent/DropdownContent.stories.tsx
 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)
diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.test.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.test.tsx
 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> = {}) => {
diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
 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,
  StopButton,
  UpdateButton,
 } from "./ActionCtas"
 import {
  ButtonMapping,
  ButtonTypesEnum,
  WorkspaceStateActions,
  WorkspaceStateEnum,
 } from "./constants"
 import { ButtonMapping, ButtonTypesEnum, WorkspaceStateActions } from "./constants"
 import { DropdownContent } from "./DropdownContent/DropdownContent"

 /**
diff --git a/site/src/components/WorkspaceActions/constants.ts b/site/src/components/WorkspaceActions/constants.ts
 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 {
diff --git a/site/src/util/workspace.ts b/site/src/util/workspace.ts

 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"
Original file line number	Diff line number	Diff line change
		@@ -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()
		})
		})
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"
Expand DownExpand Up		@@ -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 ? (
Expand DownExpand Up		@@ -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}>
Kira-Pilot marked this conversation as resolved. Show resolvedHide resolved
		{agentStatus.status}
		</span>
		)}
		</div>
		</TableCell>
		<TableCell>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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",
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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)
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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> = {}) => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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,
Expand All		@@ -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"

		/**
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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 {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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",
		}

Copy link MemberAuthor Kira-PilotAug 15, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I moved this out of a component directory and into our util file so we can have properly typed statuses.
		export type WorkspaceStatus =
		\| "queued"
		\| "started"
Expand Down