feat: tweak timeline design (#5144)

* Tweak timeline design

* Extract timeline style into component

site/src/components/AuditLogRow/AuditLogRow.tsx

@@ -1,7 +1,6 @@
 import Collapse from "@material-ui/core/Collapse"
 import { makeStyles } from "@material-ui/core/styles"
 import TableCell from "@material-ui/core/TableCell"
-import TableRow from "@material-ui/core/TableRow"
 import { AuditLog } from "api/typesGenerated"
 import {
   CloseDropdown,
@@ -9,11 +8,11 @@ import {
 } from "components/DropdownArrows/DropdownArrows"
 import { Pill } from "components/Pill/Pill"
 import { Stack } from "components/Stack/Stack"
+import { TimelineEntry } from "components/Timeline/TimelineEntry"
 import { UserAvatar } from "components/UserAvatar/UserAvatar"
 import { useState } from "react"
 import { PaletteIndex } from "theme/palettes"
 import userAgentParser from "ua-parser-js"
-import { combineClasses } from "util/combineClasses"
 import { AuditLogDiff } from "./AuditLogDiff"
 
 export const readableActionMessage = (auditLog: AuditLog): string => {
@@ -71,19 +70,16 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
   }
 
   return (
-    <TableRow
+    <TimelineEntry
       key={auditLog.id}
       data-testid={`audit-log-row-${auditLog.id}`}
-      className={styles.auditLogRow}
+      clickable={shouldDisplayDiff}
     >
       <TableCell className={styles.auditLogCell}>
         <Stack
           direction="row"
           alignItems="center"
-          className={combineClasses({
-            [styles.auditLogHeader]: true,
-            [styles.clickable]: shouldDisplayDiff,
-          })}
+          className={styles.auditLogHeader}
           tabIndex={0}
           onClick={toggle}
           onKeyDown={(event) => {
@@ -167,7 +163,7 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
           </Collapse>
         )}
       </TableCell>
-    </TableRow>
+    </TimelineEntry>
   )
 }
 
@@ -177,40 +173,10 @@ const useStyles = makeStyles((theme) => ({
     border: 0,
   },
 
-  auditLogRow: {
-    position: "relative",
-
-    "&:focus": {
-      outlineStyle: "solid",
-      outlineOffset: -1,
-      outlineWidth: 2,
-      outlineColor: theme.palette.secondary.dark,
-    },
-
-    "&:not(:last-child) td:before": {
-      position: "absolute",
-      top: 20,
-      left: 50,
-      display: "block",
-      content: "''",
-      height: "100%",
-      width: 2,
-      background: theme.palette.divider,
-    },
-  },
-
   auditLogHeader: {
     padding: theme.spacing(2, 4),
   },
 
-  clickable: {
-    cursor: "pointer",
-
-    "&:hover": {
-      backgroundColor: theme.palette.action.hover,
-    },
-  },
-
   auditLogHeaderInfo: {
     flex: 1,
   },

site/src/components/BuildsTable/BuildRow.tsx

@@ -1,8 +1,8 @@
 import { makeStyles } from "@material-ui/core/styles"
 import TableCell from "@material-ui/core/TableCell"
-import TableRow from "@material-ui/core/TableRow"
 import { WorkspaceBuild } from "api/typesGenerated"
 import { Stack } from "components/Stack/Stack"
+import { TimelineEntry } from "components/Timeline/TimelineEntry"
 import { useClickable } from "hooks/useClickable"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
@@ -27,12 +27,7 @@ export const BuildRow: React.FC<BuildRowProps> = ({ build }) => {
   )
 
   return (
-    <TableRow
-      hover
-      data-testid={`build-${build.id}`}
-      className={styles.buildRow}
-      {...clickableProps}
-    >
+    <TimelineEntry hover data-testid={`build-${build.id}`} {...clickableProps}>
       <TableCell className={styles.buildCell}>
         <Stack
           direction="row"
@@ -76,33 +71,11 @@ export const BuildRow: React.FC<BuildRowProps> = ({ build }) => {
           </Stack>
         </Stack>
       </TableCell>
-    </TableRow>
+    </TimelineEntry>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
-  buildRow: {
-    cursor: "pointer",
-
-    "&:focus": {
-      outlineStyle: "solid",
-      outlineOffset: -1,
-      outlineWidth: 2,
-      outlineColor: theme.palette.secondary.dark,
-    },
-
-    "&:not(:last-child) td:before": {
-      position: "absolute",
-      top: 20,
-      left: 50,
-      display: "block",
-      content: "''",
-      height: "100%",
-      width: 2,
-      background: theme.palette.divider,
-    },
-  },
-
   buildWrapper: {
     padding: theme.spacing(2, 4),
   },

site/src/components/Timeline/TimelineEntry.tsx

@@ -0,0 +1,56 @@
+import { makeStyles } from "@material-ui/core/styles"
+import TableRow, { TableRowProps } from "@material-ui/core/TableRow"
+import { PropsWithChildren } from "react"
+import { combineClasses } from "util/combineClasses"
+
+interface TimelineEntryProps {
+  clickable?: boolean
+}
+
+export const TimelineEntry = ({
+  children,
+  clickable = true,
+  ...props
+}: PropsWithChildren<TimelineEntryProps & TableRowProps>): JSX.Element => {
+  const styles = useStyles()
+  return (
+    <TableRow
+      className={combineClasses({
+        [styles.timelineEntry]: true,
+        [styles.clickable]: clickable,
+      })}
+      {...props}
+    >
+      {children}
+    </TableRow>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  clickable: {
+    cursor: "pointer",
+
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+
+  timelineEntry: {
+    position: "relative",
+    "&:focus": {
+      outlineStyle: "solid",
+      outlineOffset: -1,
+      outlineWidth: 2,
+      outlineColor: theme.palette.secondary.dark,
+    },
+    "& td:before": {
+      position: "absolute",
+      left: 50,
+      display: "block",
+      content: "''",
+      height: "100%",
+      width: 2,
+      background: theme.palette.divider,
+    },
+  },
+}))

site/src/components/VersionsTable/VersionRow.tsx

@@ -1,8 +1,8 @@
 import { makeStyles } from "@material-ui/core/styles"
 import TableCell from "@material-ui/core/TableCell"
-import TableRow from "@material-ui/core/TableRow"
 import { TemplateVersion } from "api/typesGenerated"
 import { Stack } from "components/Stack/Stack"
+import { TimelineEntry } from "components/Timeline/TimelineEntry"
 import { UserAvatar } from "components/UserAvatar/UserAvatar"
 import { useClickable } from "hooks/useClickable"
 import { useTranslation } from "react-i18next"
@@ -21,11 +21,7 @@ export const VersionRow: React.FC<VersionRowProps> = ({ version }) => {
   })
 
   return (
-    <TableRow
-      className={styles.versionRow}
-      data-testid={`version-${version.id}`}
-      {...clickableProps}
-    >
+    <TimelineEntry data-testid={`version-${version.id}`} {...clickableProps}>
       <TableCell className={styles.versionCell}>
         <Stack
           direction="row"
@@ -55,30 +51,11 @@ export const VersionRow: React.FC<VersionRowProps> = ({ version }) => {
           </Stack>
         </Stack>
       </TableCell>
-    </TableRow>
+    </TimelineEntry>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
-  versionRow: {
-    cursor: "pointer",
-
-    "&:hover": {
-      backgroundColor: theme.palette.action.hover,
-    },
-
-    "&:not(:last-child) td:before": {
-      position: "absolute",
-      top: 20,
-      left: 50,
-      display: "block",
-      content: "''",
-      height: "100%",
-      width: 2,
-      background: theme.palette.divider,
-    },
-  },
-
   versionWrapper: {
     padding: theme.spacing(2, 4),
   },