Show build initiator on Workspace Build page (#2446)

* show build initiator in ui

* update autostop story

site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.stories.tsx

@@ -13,3 +13,20 @@ export const Example = Template.bind({})
 Example.args = {
   build: MockWorkspaceBuild,
 }
+
+export const Autostart = Template.bind({})
+Autostart.args = {
+  build: {
+    ...MockWorkspaceBuild,
+    reason: "autostart",
+  },
+}
+
+export const Autostop = Template.bind({})
+Autostop.args = {
+  build: {
+    ...MockWorkspaceBuild,
+    transition: "stop",
+    reason: "autostop",
+  },
+}

site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx

@@ -5,7 +5,11 @@ import { Link as RouterLink } from "react-router-dom"
 import { WorkspaceBuild } from "../../api/typesGenerated"
 import { CardRadius, MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { combineClasses } from "../../util/combineClasses"
-import { displayWorkspaceBuildDuration, getDisplayWorkspaceBuildStatus } from "../../util/workspace"
+import {
+  displayWorkspaceBuildDuration,
+  getDisplayWorkspaceBuildInitiatedBy,
+  getDisplayWorkspaceBuildStatus,
+} from "../../util/workspace"
 
 export interface WorkspaceBuildStatsProps {
   build: WorkspaceBuild
@@ -15,6 +19,7 @@ export const WorkspaceBuildStats: FC<WorkspaceBuildStatsProps> = ({ build }) =>
   const styles = useStyles()
   const theme = useTheme()
   const status = getDisplayWorkspaceBuildStatus(theme, build)
+  const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(theme, build)
 
   return (
     <div className={styles.stats}>
@@ -51,6 +56,13 @@ export const WorkspaceBuildStats: FC<WorkspaceBuildStatsProps> = ({ build }) =>
         <span className={styles.statsLabel}>Action</span>
         <span className={combineClasses([styles.statsValue, styles.capitalize])}>{build.transition}</span>
       </div>
+      <div className={styles.statsDivider} />
+      <div className={styles.statItem}>
+        <span className={styles.statsLabel}>Initiated by</span>
+        <span className={styles.statsValue}>
+          <span style={{ color: initiatedBy.color }}>{initiatedBy.initiatedBy}</span>
+        </span>
+      </div>
     </div>
   )
 }
@@ -72,7 +84,7 @@ const useStyles = makeStyles((theme) => ({
   },
 
   statItem: {
-    minWidth: "16%",
+    minWidth: "13%",
     padding: theme.spacing(2),
     paddingTop: theme.spacing(1.75),
   },

site/src/util/workspace.ts

@@ -186,6 +186,37 @@ export const getDisplayWorkspaceBuildStatus = (
   }
 }
 
+export const DisplayWorkspaceBuildInitiatedByLanguage = {
+  autostart: "system/autostart",
+  autostop: "system/autostop",
+}
+
+export const getDisplayWorkspaceBuildInitiatedBy = (
+  theme: Theme,
+  build: TypesGen.WorkspaceBuild,
+): {
+  color: string
+  initiatedBy: string
+} => {
+  switch (build.reason) {
+    case "initiator":
+      return {
+        color: theme.palette.text.secondary,
+        initiatedBy: build.initiator_name,
+      }
+    case "autostart":
+      return {
+        color: theme.palette.secondary.dark,
+        initiatedBy: DisplayWorkspaceBuildInitiatedByLanguage.autostart,
+      }
+    case "autostop":
+      return {
+        color: theme.palette.secondary.dark,
+        initiatedBy: DisplayWorkspaceBuildInitiatedByLanguage.autostop,
+      }
+  }
+}
+
 export const getWorkspaceBuildDurationInSeconds = (build: TypesGen.WorkspaceBuild): number | undefined => {
   const isCompleted = build.job.started_at && build.job.completed_at