coder · presleyp · May 16, 2022 · May 5, 2022 · May 5, 2022 · May 5, 2022
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -18,6 +18,7 @@ import { TemplatesPage } from "./pages/TemplatesPages/TemplatesPage"
 import { CreateUserPage } from "./pages/UsersPage/CreateUserPage/CreateUserPage"
 import { UsersPage } from "./pages/UsersPage/UsersPage"
 import { WorkspacePage } from "./pages/WorkspacePage/WorkspacePage"
+import { WorkspaceSettingsPage } from "./pages/WorkspaceSettingsPage/WorkspaceSettingsPage"
 
 const TerminalPage = React.lazy(() => import("./pages/TerminalPage/TerminalPage"))
 
@@ -75,14 +76,24 @@ export const AppRouter: React.FC = () => (
         </Route>
 
         <Route path="workspaces">
-          <Route
-            path=":workspace"
-            element={
-              <AuthAndFrame>
-                <WorkspacePage />
-              </AuthAndFrame>
-            }
-          />
+          <Route path=":workspace">
+            <Route
+              index
+              element={
+                <AuthAndFrame>
+                  <WorkspacePage />
+                </AuthAndFrame>
+              }
+            />
+            <Route
+              path="edit"
+              element={
+                <AuthAndFrame>
+                  <WorkspaceSettingsPage />
+                </AuthAndFrame>
+              }
+            />
+          </Route>
         </Route>
 
         <Route path="users">

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1,5 +1,6 @@
 import axios, { AxiosRequestHeaders } from "axios"
 import { mutate } from "swr"
+import { WorkspaceBuildTransition } from "./types"
 import * as TypesGen from "./typesGenerated"
 
 const CONTENT_TYPE_JSON: AxiosRequestHeaders = {
@@ -132,6 +133,21 @@ export const getWorkspaceResources = async (workspaceBuildID: string): Promise<T
   return response.data
 }
 
+const postWorkspaceBuild =
+  (transition: WorkspaceBuildTransition) =>
+  async (workspaceId: string, template_version_id?: string): Promise<TypesGen.WorkspaceBuild> => {
+    const payload = {
+      transition,
+      template_version_id,
+    }
+    const response = await axios.post(`/api/v2/workspaces/${workspaceId}/builds`, payload)
+    return response.data
+  }
+
+export const startWorkspace = postWorkspaceBuild("start")
+export const stopWorkspace = postWorkspaceBuild("stop")
+export const deleteWorkspace = postWorkspaceBuild("delete")
+
 export const createUser = async (user: TypesGen.CreateUserRequest): Promise<TypesGen.User> => {
   const response = await axios.post<TypesGen.User>("/api/v2/users", user)
   return response.data

diff --git a/site/src/api/types.ts b/site/src/api/types.ts
@@ -10,3 +10,5 @@ export interface ReconnectingPTYRequest {
   readonly height?: number
   readonly width?: number
 }
+
+export type WorkspaceBuildTransition = "start" | "stop" | "delete"
diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
@@ -1,6 +1,7 @@
+import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
 import React from "react"
-import { MockOrganization, MockTemplate, MockWorkspace } from "../../testHelpers/renderHelpers"
+import { MockOrganization, MockOutdatedWorkspace, MockTemplate, MockWorkspace } from "../../testHelpers/renderHelpers"
 import { Workspace, WorkspaceProps } from "./Workspace"
 
 export default {
@@ -11,9 +12,43 @@ export default {
 
 const Template: Story<WorkspaceProps> = (args) => <Workspace {...args} />
 
-export const Example = Template.bind({})
-Example.args = {
+export const Started = Template.bind({})
+Started.args = {
   organization: MockOrganization,
   template: MockTemplate,
   workspace: MockWorkspace,
+  handleStart: action("start"),
+  handleStop: action("stop"),
+  handleRetry: action("retry"),
+  workspaceStatus: "started",
 }
+
+export const Starting = Template.bind({})
+Starting.args = { ...Started.args, workspaceStatus: "starting" }
+
+export const Stopped = Template.bind({})
+Stopped.args = { ...Started.args, workspaceStatus: "stopped" }
+
+export const Stopping = Template.bind({})
+Stopping.args = { ...Started.args, workspaceStatus: "stopping" }
+
+export const Error = Template.bind({})
+Error.args = { ...Started.args, workspaceStatus: "error" }
+
+export const BuildLoading = Template.bind({})
+BuildLoading.args = { ...Started.args, workspaceStatus: "loading" }
+
+export const Deleting = Template.bind({})
+Deleting.args = { ...Started.args, workspaceStatus: "deleting" }
+
+export const Deleted = Template.bind({})
+Deleted.args = { ...Started.args, workspaceStatus: "deleted" }
+
+export const Canceling = Template.bind({})
+Canceling.args = { ...Started.args, workspaceStatus: "canceling" }
+
+export const NoBreadcrumb = Template.bind({})
+NoBreadcrumb.args = { ...Started.args, template: undefined }
+
+export const Outdated = Template.bind({})
+Outdated.args = { ...Started.args, workspace: MockOutdatedWorkspace }
diff --git a/site/src/components/Workspace/Workspace.test.tsx b/site/src/components/Workspace/Workspace.test.tsx
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -1,31 +1,51 @@
-import Box from "@material-ui/core/Box"
-import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
-import CloudCircleIcon from "@material-ui/icons/CloudCircle"
 import React from "react"
-import { Link } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
+import { WorkspaceStatus } from "../../pages/WorkspacePage/WorkspacePage"
 import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
 import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
-import * as Constants from "./constants"
+import { WorkspaceStatusBar } from "../WorkspaceStatusBar/WorkspaceStatusBar"
 
 export interface WorkspaceProps {
-  organization: TypesGen.Organization
+  organization?: TypesGen.Organization
   workspace: TypesGen.Workspace
-  template: TypesGen.Template
+  template?: TypesGen.Template
+  handleStart: () => void
+  handleStop: () => void
+  handleRetry: () => void
+  handleUpdate: () => void
+  workspaceStatus: WorkspaceStatus
 }
 
 /**
  * Workspace is the top-level component for viewing an individual workspace
  */
-export const Workspace: React.FC<WorkspaceProps> = ({ organization, template, workspace }) => {
+export const Workspace: React.FC<WorkspaceProps> = ({
+  organization,
+  template,
+  workspace,
+  handleStart,
+  handleStop,
+  handleRetry,
+  handleUpdate,
+  workspaceStatus,
+}) => {
   const styles = useStyles()
 
   return (
     <div className={styles.root}>
       <div className={styles.vertical}>
-        <WorkspaceHeader organization={organization} template={template} workspace={workspace} />
+        <WorkspaceStatusBar
+          organization={organization}
+          template={template}
+          workspace={workspace}
+          handleStart={handleStart}
+          handleStop={handleStop}
+          handleRetry={handleRetry}
+          handleUpdate={handleUpdate}
+          workspaceStatus={workspaceStatus}
+        />
         <div className={styles.horizontal}>
           <div className={styles.sidebarContainer}>
             <WorkspaceSection title="Applications">
@@ -55,40 +75,6 @@ export const Workspace: React.FC<WorkspaceProps> = ({ organization, template, wo
   )
 }
 
-/**
- * Component for the header at the top of the workspace page
- */
-export const WorkspaceHeader: React.FC<WorkspaceProps> = ({ organization, template, workspace }) => {
-  const styles = useStyles()
-
-  const templateLink = `/templates/${organization.name}/${template.name}`
-
-  return (
-    <Paper elevation={0} className={styles.section}>
-      <div className={styles.horizontal}>
-        <WorkspaceHeroIcon />
-        <div className={styles.vertical}>
-          <Typography variant="h4">{workspace.name}</Typography>
-          <Typography variant="body2" color="textSecondary">
-            <Link to={templateLink}>{template.name}</Link>
-          </Typography>
-        </div>
-      </div>
-    </Paper>
-  )
-}
-
-/**
- * Component to render the 'Hero Icon' in the header of a workspace
- */
-export const WorkspaceHeroIcon: React.FC = () => {
-  return (
-    <Box mr="1em">
-      <CloudCircleIcon width={Constants.TitleIconSize} height={Constants.TitleIconSize} />
-    </Box>
-  )
-}
-
 /**
  * Temporary placeholder component until we have the sections implemented
  * Can be removed once the Workspace page has all the necessary sections
@@ -101,7 +87,7 @@ const Placeholder: React.FC = () => {
   )
 }
 
-export const useStyles = makeStyles((theme) => {
+export const useStyles = makeStyles(() => {
   return {
     root: {
       display: "flex",
@@ -115,12 +101,6 @@ export const useStyles = makeStyles((theme) => {
       display: "flex",
       flexDirection: "column",
     },
-    section: {
-      border: `1px solid ${theme.palette.divider}`,
-      borderRadius: Constants.CardRadius,
-      padding: Constants.CardPadding,
-      margin: theme.spacing(1),
-    },
     sidebarContainer: {
       display: "flex",
       flexDirection: "column",
@@ -129,9 +109,5 @@ export const useStyles = makeStyles((theme) => {
     timelineContainer: {
       flex: 1,
     },
-    icon: {
-      width: Constants.TitleIconSize,
-      height: Constants.TitleIconSize,
-    },
   }
 })
diff --git a/site/src/components/Workspace/constants.ts b/site/src/components/Workspace/constants.ts
diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx
@@ -2,22 +2,24 @@ import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-import { CardPadding, CardRadius } from "../Workspace/constants"
+import { CardPadding, CardRadius } from "../../theme/constants"
 
 export interface WorkspaceSectionProps {
-  title: string
+  title?: string
 }
 
 export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({ title, children }) => {
   const styles = useStyles()
 
   return (
     <Paper elevation={0} className={styles.root}>
-      <div className={styles.headerContainer}>
-        <div className={styles.header}>
-          <Typography variant="h6">{title}</Typography>
+      {title && (
+        <div className={styles.headerContainer}>
+          <div className={styles.header}>
+            <Typography variant="h6">{title}</Typography>
+          </div>
         </div>
-      </div>
+      )}
 
       <div className={styles.contents}>{children}</div>
     </Paper>