From 8c54edd2fd153cd44939c07a1b8dc1a930217a5f Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Mon, 21 Nov 2022 20:52:26 +0000
Subject: [PATCH 1/2] Tweak timeline design

---
 site/src/components/AuditLogRow/AuditLogRow.tsx  | 3 +--
 site/src/components/BuildsTable/BuildRow.tsx     | 3 +--
 site/src/components/VersionsTable/VersionRow.tsx | 3 +--
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/site/src/components/AuditLogRow/AuditLogRow.tsx b/site/src/components/AuditLogRow/AuditLogRow.tsx
index c00d1564d5c95..3fc8eee8a96fb 100644
--- a/site/src/components/AuditLogRow/AuditLogRow.tsx
+++ b/site/src/components/AuditLogRow/AuditLogRow.tsx
@@ -184,9 +184,8 @@ const useStyles = makeStyles((theme) => ({
       outlineColor: theme.palette.secondary.dark,
     },
 
-    "&:not(:last-child) td:before": {
+    "& td:before": {
       position: "absolute",
-      top: 20,
       left: 50,
       display: "block",
       content: "''",
diff --git a/site/src/components/BuildsTable/BuildRow.tsx b/site/src/components/BuildsTable/BuildRow.tsx
index 2fe032472c3d2..ca07d52850a62 100644
--- a/site/src/components/BuildsTable/BuildRow.tsx
+++ b/site/src/components/BuildsTable/BuildRow.tsx
@@ -91,9 +91,8 @@ const useStyles = makeStyles((theme) => ({
       outlineColor: theme.palette.secondary.dark,
     },
 
-    "&:not(:last-child) td:before": {
+    "& td:before": {
       position: "absolute",
-      top: 20,
       left: 50,
       display: "block",
       content: "''",
diff --git a/site/src/components/VersionsTable/VersionRow.tsx b/site/src/components/VersionsTable/VersionRow.tsx
index 583f9ba093b09..fc8be86b976c4 100644
--- a/site/src/components/VersionsTable/VersionRow.tsx
+++ b/site/src/components/VersionsTable/VersionRow.tsx
@@ -67,9 +67,8 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: theme.palette.action.hover,
     },
 
-    "&:not(:last-child) td:before": {
+    "& td:before": {
       position: "absolute",
-      top: 20,
       left: 50,
       display: "block",
       content: "''",

From cd8406280cbd482bc21d4205623ce87c845397eb Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Tue, 22 Nov 2022 00:01:57 +0000
Subject: [PATCH 2/2] Extract timeline style into component

---
 .../components/AuditLogRow/AuditLogRow.tsx    | 43 ++------------
 site/src/components/BuildsTable/BuildRow.tsx  | 32 +----------
 .../src/components/Timeline/TimelineEntry.tsx | 56 +++++++++++++++++++
 .../components/VersionsTable/VersionRow.tsx   | 28 +---------
 4 files changed, 67 insertions(+), 92 deletions(-)
 create mode 100644 site/src/components/Timeline/TimelineEntry.tsx

diff --git a/site/src/components/AuditLogRow/AuditLogRow.tsx b/site/src/components/AuditLogRow/AuditLogRow.tsx
index 3fc8eee8a96fb..1da44dbfd229c 100644
--- a/site/src/components/AuditLogRow/AuditLogRow.tsx
+++ b/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 => {
@@ -68,19 +67,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) => {
@@ -164,7 +160,7 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
           </Collapse>
         )}
       </TableCell>
-    </TableRow>
+    </TimelineEntry>
   )
 }
 
@@ -174,39 +170,10 @@ const useStyles = makeStyles((theme) => ({
     border: 0,
   },
 
-  auditLogRow: {
-    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,
-    },
-  },
-
   auditLogHeader: {
     padding: theme.spacing(2, 4),
   },
 
-  clickable: {
-    cursor: "pointer",
-
-    "&:hover": {
-      backgroundColor: theme.palette.action.hover,
-    },
-  },
-
   auditLogHeaderInfo: {
     flex: 1,
   },
diff --git a/site/src/components/BuildsTable/BuildRow.tsx b/site/src/components/BuildsTable/BuildRow.tsx
index ca07d52850a62..1e349f68371c2 100644
--- a/site/src/components/BuildsTable/BuildRow.tsx
+++ b/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,32 +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,
-    },
-
-    "& td:before": {
-      position: "absolute",
-      left: 50,
-      display: "block",
-      content: "''",
-      height: "100%",
-      width: 2,
-      background: theme.palette.divider,
-    },
-  },
-
   buildWrapper: {
     padding: theme.spacing(2, 4),
   },
diff --git a/site/src/components/Timeline/TimelineEntry.tsx b/site/src/components/Timeline/TimelineEntry.tsx
new file mode 100644
index 0000000000000..df4348e903d87
--- /dev/null
+++ b/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,
+    },
+  },
+}))
diff --git a/site/src/components/VersionsTable/VersionRow.tsx b/site/src/components/VersionsTable/VersionRow.tsx
index fc8be86b976c4..e1cb777f7f979 100644
--- a/site/src/components/VersionsTable/VersionRow.tsx
+++ b/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,29 +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,
-    },
-
-    "& td:before": {
-      position: "absolute",
-      left: 50,
-      display: "block",
-      content: "''",
-      height: "100%",
-      width: 2,
-      background: theme.palette.divider,
-    },
-  },
-
   versionWrapper: {
     padding: theme.spacing(2, 4),
   },