Refactor workspace page

coder · BrunoQuaresma · May 20, 2022 · May 20, 2022 · May 20, 2022 · May 20, 2022
commit e70fce6130aaaf3f7133aed527fe8076f7c39ff0
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,6 +7,7 @@
     "coderd",
     "coderdtest",
     "codersdk",
+    "cronstrue",
     "devel",
     "drpc",
     "drpcconn",

diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx
@@ -1,19 +1,27 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 
-export interface StackProps {
-  spacing?: number
+type Direction = "column" | "row"
+
+interface StyleProps {
+  spacing: number
+  direction: Direction
 }
 
 const useStyles = makeStyles((theme) => ({
   stack: {
     display: "flex",
-    flexDirection: "column",
-    gap: ({ spacing }: { spacing: number }) => theme.spacing(spacing),
+    flexDirection: ({ direction }: StyleProps) => direction,
+    gap: ({ spacing }: StyleProps) => theme.spacing(spacing),
   },
 }))
 
-export const Stack: React.FC<StackProps> = ({ children, spacing = 2 }) => {
-  const styles = useStyles({ spacing })
+export interface StackProps {
+  spacing?: number
+  direction?: Direction
+}
+
+export const Stack: React.FC<StackProps> = ({ children, spacing = 2, direction = "column" }) => {
+  const styles = useStyles({ spacing, direction })
   return <div className={styles.stack}>{children}</div>
 }
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -2,11 +2,13 @@ import { makeStyles } from "@material-ui/core/styles"
 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 { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
+import { Stack } from "../Stack/Stack"
+import { WorkspaceActions } from "../WorkspaceActions/WorkspaceActions"
 import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
-import { WorkspaceStatusBar } from "../WorkspaceStatusBar/WorkspaceStatusBar"
+import { WorkspaceStats } from "../WorkspaceStats/WorkspaceStats"
 
 export interface WorkspaceProps {
   organization?: TypesGen.Organization
@@ -36,72 +38,61 @@ export const Workspace: React.FC<WorkspaceProps> = ({
 
   return (
     <div className={styles.root}>
-      <div className={styles.vertical}>
-        <WorkspaceStatusBar
-          workspace={workspace}
-          handleStart={handleStart}
-          handleStop={handleStop}
-          handleRetry={handleRetry}
-          handleUpdate={handleUpdate}
-          workspaceStatus={workspaceStatus}
-        />
-        <div className={styles.horizontal}>
-          <div className={styles.sidebarContainer}>
-            <WorkspaceSection title="Applications">
-              <Placeholder />
-            </WorkspaceSection>
-            <WorkspaceSchedule workspace={workspace} />
-            <WorkspaceSection title="Dev URLs">
-              <Placeholder />
-            </WorkspaceSection>
-            <WorkspaceSection title="Resources">
-              <Placeholder />
-            </WorkspaceSection>
-          </div>
-          <div className={styles.timelineContainer}>
-            <WorkspaceSection title="Timeline" contentsProps={{ className: styles.timelineContents }}>
-              <BuildsTable builds={builds} className={styles.timelineTable} />
-            </WorkspaceSection>
-          </div>
+      <div className={styles.header}>
+        <div>
+          <Typography variant="h4" className={styles.title}>
+            {workspace.name}
+          </Typography>
+          <Typography color="textSecondary" className={styles.subtitle}>
+            {workspace.owner_name}
+          </Typography>
+        </div>
+
+        <div className={styles.headerActions}>
+          <WorkspaceActions
+            workspace={workspace}
+            handleStart={handleStart}
+            handleStop={handleStop}
+            handleRetry={handleRetry}
+            handleUpdate={handleUpdate}
+            workspaceStatus={workspaceStatus}
+          />
         </div>
       </div>
-    </div>
-  )
-}
 
-/**
- * Temporary placeholder component until we have the sections implemented
- * Can be removed once the Workspace page has all the necessary sections
- */
-const Placeholder: React.FC = () => {
-  return (
-    <div style={{ textAlign: "center", opacity: "0.5" }}>
-      <Typography variant="caption">Not yet implemented</Typography>
+      <Stack spacing={3}>
+        <WorkspaceStats workspace={workspace} />
+        <WorkspaceSection title="Timeline" contentsProps={{ className: styles.timelineContents }}>
+          <BuildsTable builds={builds} className={styles.timelineTable} />
+        </WorkspaceSection>
+      </Stack>
     </div>
   )
 }
 
-export const useStyles = makeStyles(() => {
+export const useStyles = makeStyles((theme) => {
   return {
     root: {
       display: "flex",
       flexDirection: "column",
     },
-    horizontal: {
+    header: {
+      paddingTop: theme.spacing(5),
+      paddingBottom: theme.spacing(5),
+      fontFamily: MONOSPACE_FONT_FAMILY,
       display: "flex",
-      flexDirection: "row",
+      alignItems: "center",
     },
-    vertical: {
-      display: "flex",
-      flexDirection: "column",
+    headerActions: {
+      marginLeft: "auto",
     },
-    sidebarContainer: {
-      display: "flex",
-      flexDirection: "column",
-      flex: "0 0 350px",
+    title: {
+      fontWeight: 600,
+      fontFamily: "inherit",
     },
-    timelineContainer: {
-      flex: 1,
+    subtitle: {
+      fontFamily: "inherit",
+      marginTop: theme.spacing(0.5),
     },
     timelineContents: {
       margin: 0,

diff --git a/site/src/components/WorkspaceActionButton/WorkspaceActionButton.tsx b/site/src/components/WorkspaceActionButton/WorkspaceActionButton.tsx
@@ -0,0 +1,42 @@
+import Button from "@material-ui/core/Button"
+import CircularProgress from "@material-ui/core/CircularProgress"
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+
+export interface WorkspaceActionButtonProps {
+  label: string
+  loadingLabel: string
+  isLoading: boolean
+  icon: JSX.Element
+  onClick: () => void
+  className?: string
+}
+
+export const WorkspaceActionButton: React.FC<WorkspaceActionButtonProps> = ({
+  label,
+  loadingLabel,
+  isLoading,
+  icon,
+  onClick,
+  className,
+}) => {
+  const styles = useStyles()
+
+  return (
+    <Button
+      className={className}
+      startIcon={isLoading ? <CircularProgress size={12} className={styles.spinner} /> : icon}
+      onClick={onClick}
+      disabled={isLoading}
+    >
+      {isLoading ? loadingLabel : label}
+    </Button>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  spinner: {
+    color: theme.palette.text.disabled,
+    marginRight: theme.spacing(1),
+  },
+}))
diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
@@ -0,0 +1,95 @@
+import Button from "@material-ui/core/Button"
+import Link from "@material-ui/core/Link"
+import { makeStyles } from "@material-ui/core/styles"
+import CloudDownloadIcon from "@material-ui/icons/CloudDownload"
+import PlayArrowRoundedIcon from "@material-ui/icons/PlayArrowRounded"
+import ReplayIcon from "@material-ui/icons/Replay"
+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 { Stack } from "../Stack/Stack"
+import { WorkspaceActionButton } from "../WorkspaceActionButton/WorkspaceActionButton"
+
+export const Language = {
+  stop: "Stop workspace",
+  stopping: "Stopping workspace",
+  start: "Start workspace",
+  starting: "Starting workspace",
+  retry: "Retry",
+  update: "Update workspace",
+}
+
+/**
+ * Jobs submitted while another job is in progress will be discarded,
+ * so check whether workspace job status has reached completion (whether successful or not).
+ */
+const canAcceptJobs = (workspaceStatus: WorkspaceStatus) =>
+  ["started", "stopped", "deleted", "error", "canceled"].includes(workspaceStatus)
+
+export interface WorkspaceActionsProps {
+  workspace: Workspace
+  workspaceStatus: WorkspaceStatus
+  handleStart: () => void
+  handleStop: () => void
+  handleRetry: () => void
+  handleUpdate: () => void
+}
+
+export const WorkspaceActions: React.FC<WorkspaceActionsProps> = ({
+  workspace,
+  workspaceStatus,
+  handleStart,
+  handleStop,
+  handleRetry,
+  handleUpdate,
+}) => {
+  const styles = useStyles()
+
+  return (
+    <Stack direction="row" spacing={1}>
+      <Link underline="none" component={RouterLink} to="edit">
+        <Button variant="outlined">Settings</Button>
+      </Link>
+      {(workspaceStatus === "started" || workspaceStatus === "stopping") && (
+        <WorkspaceActionButton
+          className={styles.actionButton}
+          icon={<StopIcon />}
+          onClick={handleStop}
+          label={Language.stop}
+          loadingLabel={Language.stopping}
+          isLoading={workspaceStatus === "stopping"}
+        />
+      )}
+      {(workspaceStatus === "stopped" || workspaceStatus === "starting") && (
+        <WorkspaceActionButton
+          className={styles.actionButton}
+          icon={<PlayArrowRoundedIcon />}
+          onClick={handleStart}
+          label={Language.start}
+          loadingLabel={Language.starting}
+          isLoading={workspaceStatus === "starting"}
+        />
+      )}
+      {workspaceStatus === "error" && (
+        <Button className={styles.actionButton} startIcon={<ReplayIcon />} onClick={handleRetry}>
+          {Language.retry}
+        </Button>
+      )}
+      {workspace.outdated && canAcceptJobs(workspaceStatus) && (
+        <Button className={styles.actionButton} startIcon={<CloudDownloadIcon />} onClick={handleUpdate}>
+          {Language.update}
+        </Button>
+      )}
+    </Stack>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  actionButton: {
+    // Set fixed width for the action buttons so they will not change the size
+    // during the transitions
+    width: theme.spacing(30),
+  },
+}))
diff --git a/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx b/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx
@@ -3,7 +3,7 @@ import { makeStyles, useTheme } from "@material-ui/core/styles"
 import React from "react"
 import { Link as RouterLink } from "react-router-dom"
 import { WorkspaceBuild } from "../../api/typesGenerated"
-import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
+import { CardRadius, MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { combineClasses } from "../../util/combineClasses"
 import { displayWorkspaceBuildDuration, getDisplayStatus } from "../../util/workspace"
 
@@ -57,17 +57,21 @@ export const WorkspaceBuildStats: React.FC<WorkspaceBuildStatsProps> = ({ build
 
 const useStyles = makeStyles((theme) => ({
   stats: {
-    paddingTop: theme.spacing(3),
-    paddingBottom: theme.spacing(3),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: CardRadius,
     display: "flex",
     alignItems: "center",
     color: theme.palette.text.secondary,
     fontFamily: MONOSPACE_FONT_FAMILY,
+    border: `1px solid ${theme.palette.divider}`,
   },
 
   statItem: {
     minWidth: theme.spacing(20),
-    paddingRight: theme.spacing(3),
+    padding: theme.spacing(2),
+    paddingTop: theme.spacing(1.75),
   },
 
   statsLabel: {
@@ -80,7 +84,7 @@ const useStyles = makeStyles((theme) => ({
   statsValue: {
     fontSize: 16,
     marginTop: theme.spacing(0.25),
-    display: "block",
+    display: "inline-block",
   },
 
   statsDivider: {

diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx
@@ -34,7 +34,6 @@ const useStyles = makeStyles((theme) => ({
   root: {
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: CardRadius,
-    margin: theme.spacing(1),
   },
   headerContainer: {
     borderBottom: `1px solid ${theme.palette.divider}`,