From 33e5c0816a5c0f7d708ff23d9e7a411dfd5144e2 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Wed, 1 Jun 2022 19:10:19 +0000
Subject: [PATCH 1/4] feat: flexbox work on workspace page

resolves 1910
---
 site/src/components/Resources/Resources.tsx   | 12 ++--
 site/src/components/Workspace/Workspace.tsx   | 60 ++++++++++---------
 .../WorkspaceActions/WorkspaceActions.tsx     | 12 ++--
 .../WorkspaceStats/WorkspaceStats.tsx         | 20 +++----
 4 files changed, 54 insertions(+), 50 deletions(-)

diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
index f78b51696d22d..d959d53a501a9 100644
--- a/site/src/components/Resources/Resources.tsx
+++ b/site/src/components/Resources/Resources.tsx
@@ -41,8 +41,8 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
             <TableHeaderRow>
               <TableCell>{Language.resourceLabel}</TableCell>
               <TableCell className={styles.agentColumn}>{Language.agentLabel}</TableCell>
-              <TableCell>{Language.statusLabel}</TableCell>
               <TableCell>{Language.accessLabel}</TableCell>
+              <TableCell>{Language.statusLabel}</TableCell>
             </TableHeaderRow>
           </TableHead>
           <TableBody>
@@ -82,11 +82,6 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
                       {agent.name}
                       <span className={styles.operatingSystem}>{agent.operating_system}</span>
                     </TableCell>
-                    <TableCell>
-                      <span style={{ color: getDisplayAgentStatus(theme, agent).color }}>
-                        {getDisplayAgentStatus(theme, agent).status}
-                      </span>
-                    </TableCell>
                     <TableCell>
                       {agent.status === "connected" && (
                         <TerminalLink
@@ -97,6 +92,11 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
                         />
                       )}
                     </TableCell>
+                    <TableCell>
+                      <span style={{ color: getDisplayAgentStatus(theme, agent).color }}>
+                        {getDisplayAgentStatus(theme, agent).status}
+                      </span>
+                    </TableCell>
                   </TableRow>
                 )
               })
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index 02976742f4943..8f42cd585fce6 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -40,42 +40,42 @@ export const Workspace: FC<WorkspaceProps> = ({
 
   return (
     <div className={styles.root}>
-      <div className={styles.header}>
-        <div>
-          <Typography variant="h4" className={styles.title}>
-            {workspace.name}
-          </Typography>
+      <Stack direction="row" spacing={3}>
+        <Stack direction="column" className={styles.firstColumnSpacer} spacing={3}>
+          <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>
+              <Typography color="textSecondary" className={styles.subtitle}>
+                {workspace.owner_name}
+              </Typography>
+            </div>
+            <WorkspaceActions
+              workspace={workspace}
+              handleStart={handleStart}
+              handleStop={handleStop}
+              handleUpdate={handleUpdate}
+              handleCancel={handleCancel}
+            />
+          </div>
+        </Stack>
 
-        <div className={styles.headerActions}>
-          <WorkspaceActions
-            workspace={workspace}
-            handleStart={handleStart}
-            handleStop={handleStop}
-            handleUpdate={handleUpdate}
-            handleCancel={handleCancel}
-          />
-        </div>
-      </div>
+        <Stack direction="column" className={styles.secondColumnSpacer} spacing={3}></Stack>
+      </Stack>
 
-      <Stack direction="row" spacing={3} className={styles.layout}>
-        <Stack spacing={3} className={styles.main}>
+      <Stack direction="row" spacing={3}>
+        <Stack direction="column" className={styles.firstColumnSpacer} spacing={3}>
           <WorkspaceScheduleBanner workspace={workspace} />
-
           <WorkspaceStats workspace={workspace} />
-
           <Resources resources={resources} getResourcesError={getResourcesError} workspace={workspace} />
-
           <WorkspaceSection title="Timeline" contentsProps={{ className: styles.timelineContents }}>
             <BuildsTable builds={builds} className={styles.timelineTable} />
           </WorkspaceSection>
         </Stack>
 
-        <Stack spacing={3} className={styles.sidebar}>
+        <Stack direction="column" className={styles.secondColumnSpacer} spacing={3}>
           <WorkspaceSchedule workspace={workspace} />
         </Stack>
       </Stack>
@@ -89,15 +89,19 @@ export const useStyles = makeStyles((theme) => {
       display: "flex",
       flexDirection: "column",
     },
+    firstColumnSpacer: {
+      flex: 2,
+    },
+    secondColumnSpacer: {
+      flex: "0 0 170px",
+    },
     header: {
       paddingTop: theme.spacing(5),
       paddingBottom: theme.spacing(5),
       fontFamily: MONOSPACE_FONT_FAMILY,
       display: "flex",
       alignItems: "center",
-    },
-    headerActions: {
-      marginLeft: "auto",
+      justifyContent: "space-between",
     },
     title: {
       fontWeight: 600,
diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
index 5fd6724ffa1b9..d4853a0001c1a 100644
--- a/site/src/components/WorkspaceActions/WorkspaceActions.tsx
+++ b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
@@ -11,12 +11,12 @@ 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",
+  stop: "Stop",
+  stopping: "Stopping",
+  start: "Start",
+  starting: "Starting",
   cancel: "Cancel action",
-  update: "Update workspace",
+  update: "Update",
 }
 
 /**
@@ -95,6 +95,6 @@ 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(27),
+    width: theme.spacing(16),
   },
 }))
diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx
index 3e9242339b937..2858639da2331 100644
--- a/site/src/components/WorkspaceStats/WorkspaceStats.tsx
+++ b/site/src/components/WorkspaceStats/WorkspaceStats.tsx
@@ -39,15 +39,6 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace }) => {
         </Link>
       </div>
       <div className={styles.statsDivider} />
-      <div className={styles.statItem}>
-        <span className={styles.statsLabel}>{Language.statusLabel}</span>
-        <span className={styles.statsValue}>
-          <span style={{ color: status.color }} role="status">
-            {status.status}
-          </span>
-        </span>
-      </div>
-      <div className={styles.statsDivider} />
       <div className={styles.statItem}>
         <span className={styles.statsLabel}>{Language.versionLabel}</span>
         <span className={styles.statsValue}>
@@ -65,6 +56,15 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace }) => {
           {dayjs().to(dayjs(workspace.latest_build.created_at))}
         </span>
       </div>
+      <div className={styles.statsDivider} />
+      <div className={styles.statItem}>
+        <span className={styles.statsLabel}>{Language.statusLabel}</span>
+        <span className={styles.statsValue}>
+          <span style={{ color: status.color }} role="status">
+            {status.status}
+          </span>
+        </span>
+      </div>
     </div>
   )
 }
@@ -83,7 +83,7 @@ const useStyles = makeStyles((theme) => ({
   },
 
   statItem: {
-    minWidth: theme.spacing(20),
+    minWidth: "20%",
     padding: theme.spacing(2),
     paddingTop: theme.spacing(1.75),
   },

From 21e539d4da124e49dd4225b1ed7b0cd4b747803b Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Wed, 1 Jun 2022 19:24:08 +0000
Subject: [PATCH 2/4] fixing cancel text

---
 site/src/components/WorkspaceActions/WorkspaceActions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
index 1a4c8237705bd..99e8c7e732d8d 100644
--- a/site/src/components/WorkspaceActions/WorkspaceActions.tsx
+++ b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
@@ -18,7 +18,7 @@ export const Language = {
   starting: "Starting",
   delete: "Delete",
   deleting: "Deleting",
-  cancel: "Cancel",
+  cancel: "Cancel action",
   update: "Update",
 }
 

From 43dbc3cf4aa5fccb3c588a2fd8b305041d002932 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Wed, 1 Jun 2022 20:23:25 +0000
Subject: [PATCH 3/4] chromatic fixes

---
 site/src/components/Workspace/Workspace.tsx               | 2 +-
 site/src/components/WorkspaceActions/WorkspaceActions.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index 35e63ef6c8ad8..96f60940a3de7 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -96,7 +96,7 @@ export const useStyles = makeStyles((theme) => {
       flex: 2,
     },
     secondColumnSpacer: {
-      flex: "0 0 170px",
+      flex: "0 0 200px",
     },
     header: {
       paddingTop: theme.spacing(5),
diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
index 99e8c7e732d8d..70e75728f7f46 100644
--- a/site/src/components/WorkspaceActions/WorkspaceActions.tsx
+++ b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
@@ -92,7 +92,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
       )}
       {canCancelJobs(workspaceStatus) && (
         <WorkspaceActionButton
-          className={styles.actionButton}
+          className={styles.cancelActionButton}
           icon={<CancelIcon />}
           onClick={handleCancel}
           label={Language.cancel}
@@ -113,4 +113,7 @@ const useStyles = makeStyles((theme) => ({
     // during the transitions
     width: theme.spacing(16),
   },
+  cancelActionButton: {
+    width: theme.spacing(27),
+  },
 }))

From 37d6e6ae0af968dfbd0107a4abafdca752d2a7bb Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Thu, 2 Jun 2022 13:40:14 +0000
Subject: [PATCH 4/4] resolves #1953

no overflox text on smaller screens
---
 site/src/components/Workspace/Workspace.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index 96f60940a3de7..54ee44fa77a3e 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -96,7 +96,7 @@ export const useStyles = makeStyles((theme) => {
       flex: 2,
     },
     secondColumnSpacer: {
-      flex: "0 0 200px",
+      flex: "0 0 300px",
     },
     header: {
       paddingTop: theme.spacing(5),