From bdb5cb3102a059cd1d1f5ee22f949275071fad79 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira.pilot23@gmail.com>
Date: Thu, 21 Jul 2022 15:43:34 +0000
Subject: [PATCH 1/5] feat: give update button primary focus when applicable

resolves #3024
---
 .../WorkspaceActions/ActionCtas.tsx           | 42 +++++--------------
 .../WorkspaceActions.test.tsx                 |  6 +--
 .../WorkspaceActions/WorkspaceActions.tsx     | 37 +++++++++++-----
 .../components/WorkspaceActions/constants.ts  |  8 ++--
 4 files changed, 44 insertions(+), 49 deletions(-)

diff --git a/site/src/components/WorkspaceActions/ActionCtas.tsx b/site/src/components/WorkspaceActions/ActionCtas.tsx
index b99807d1050ae..1cf762ad42096 100644
--- a/site/src/components/WorkspaceActions/ActionCtas.tsx
+++ b/site/src/components/WorkspaceActions/ActionCtas.tsx
@@ -6,8 +6,6 @@ import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline"
 import HighlightOffIcon from "@material-ui/icons/HighlightOff"
 import PlayCircleOutlineIcon from "@material-ui/icons/PlayCircleOutline"
 import { FC } from "react"
-import { Workspace } from "../../api/typesGenerated"
-import { WorkspaceStatus } from "../../util/workspace"
 import { WorkspaceActionButton } from "../WorkspaceActionButton/WorkspaceActionButton"
 
 export const Language = {
@@ -22,6 +20,16 @@ interface WorkspaceAction {
   handleAction: () => void
 }
 
+export const UpdateButton: FC<WorkspaceAction> = ({ handleAction }) => {
+  const styles = useStyles()
+
+  return (
+    <Button className={styles.actionButton} startIcon={<CloudQueueIcon />} onClick={handleAction}>
+      {Language.update}
+    </Button>
+  )
+}
+
 export const StartButton: FC<WorkspaceAction> = ({ handleAction }) => {
   const styles = useStyles()
 
@@ -61,36 +69,6 @@ export const DeleteButton: FC<WorkspaceAction> = ({ handleAction }) => {
   )
 }
 
-type UpdateAction = WorkspaceAction & {
-  workspace: Workspace
-  workspaceStatus: WorkspaceStatus
-}
-
-export const UpdateButton: FC<UpdateAction> = ({ handleAction, workspace, workspaceStatus }) => {
-  const styles = useStyles()
-
-  /**
-   * 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)
-
-  return (
-    <>
-      {workspace.outdated && canAcceptJobs(workspaceStatus) && (
-        <Button
-          className={styles.actionButton}
-          startIcon={<CloudQueueIcon />}
-          onClick={handleAction}
-        >
-          {Language.update}
-        </Button>
-      )}
-    </>
-  )
-}
-
 export const CancelButton: FC<WorkspaceAction> = ({ handleAction }) => {
   const styles = useStyles()
 
diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.test.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.test.tsx
index d916393f70026..ca8b84d0e2d68 100644
--- a/site/src/components/WorkspaceActions/WorkspaceActions.test.tsx
+++ b/site/src/components/WorkspaceActions/WorkspaceActions.test.tsx
@@ -79,11 +79,11 @@ describe("WorkspaceActions", () => {
     })
   })
   describe("when the workspace is outdated", () => {
-    it("primary is start; secondary are delete, update", async () => {
+    it("primary is update; secondary are start, delete", async () => {
       await renderAndClick({ workspace: Mocks.MockOutdatedWorkspace })
-      expect(screen.getByTestId("primary-cta")).toHaveTextContent(Language.start)
+      expect(screen.getByTestId("primary-cta")).toHaveTextContent(Language.update)
+      expect(screen.getByTestId("secondary-ctas")).toHaveTextContent(Language.start)
       expect(screen.getByTestId("secondary-ctas")).toHaveTextContent(Language.delete)
-      expect(screen.getByTestId("secondary-ctas")).toHaveTextContent(Language.update)
     })
   })
 })
diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
index 10cc02a486270..aec143c4c8ac4 100644
--- a/site/src/components/WorkspaceActions/WorkspaceActions.tsx
+++ b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
@@ -1,13 +1,20 @@
 import Button from "@material-ui/core/Button"
 import Popover from "@material-ui/core/Popover"
 import { makeStyles } from "@material-ui/core/styles"
-import { FC, ReactNode, useEffect, useRef, useState } from "react"
+import { FC, ReactNode, useEffect, useMemo, useRef, useState } from "react"
 import { Workspace } from "../../api/typesGenerated"
-import { getWorkspaceStatus } from "../../util/workspace"
+import { getWorkspaceStatus, WorkspaceStatus } from "../../util/workspace"
 import { CloseDropdown, OpenDropdown } from "../DropdownArrows/DropdownArrows"
 import { CancelButton, DeleteButton, StartButton, StopButton, UpdateButton } from "./ActionCtas"
 import { ButtonTypesEnum, WorkspaceStateActions, WorkspaceStateEnum } from "./constants"
 
+/**
+ * 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
   handleStart: () => void
@@ -34,7 +41,23 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
     workspace.latest_build,
   )
   const workspaceState = WorkspaceStateEnum[workspaceStatus]
-  const actions = WorkspaceStateActions[workspaceState]
+
+  const canUpdateWorkspace = workspace.outdated && canAcceptJobs(workspaceStatus)
+
+  // actions are the primary and secondary CTAs that appear in the workspace actions dropdown
+  const actions = useMemo(() => {
+    if (!canUpdateWorkspace) {
+      return WorkspaceStateActions[workspaceState]
+    }
+
+    // if an update is available, we make the update button the primary CTA
+    // and move the former primary CTA to the secondary actions list
+    const updatedActions = { ...WorkspaceStateActions[workspaceState] }
+    updatedActions.secondary.unshift(updatedActions.primary)
+    updatedActions.primary = ButtonTypesEnum.update
+
+    return updatedActions
+  }, [canUpdateWorkspace, workspaceState])
 
   /**
    * Ensures we close the popover before calling any action handler
@@ -58,16 +81,10 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
 
   // A mapping of button type to the corresponding React component
   const buttonMapping: ButtonMapping = {
+    [ButtonTypesEnum.update]: <UpdateButton handleAction={handleUpdate} />,
     [ButtonTypesEnum.start]: <StartButton handleAction={handleStart} />,
     [ButtonTypesEnum.stop]: <StopButton handleAction={handleStop} />,
     [ButtonTypesEnum.delete]: <DeleteButton handleAction={handleDelete} />,
-    [ButtonTypesEnum.update]: (
-      <UpdateButton
-        handleAction={handleUpdate}
-        workspace={workspace}
-        workspaceStatus={workspaceStatus}
-      />
-    ),
     [ButtonTypesEnum.cancel]: <CancelButton handleAction={handleCancel} />,
     [ButtonTypesEnum.canceling]: disabledButton,
     [ButtonTypesEnum.disabled]: disabledButton,
diff --git a/site/src/components/WorkspaceActions/constants.ts b/site/src/components/WorkspaceActions/constants.ts
index 88531fefedab6..38391b1ec6218 100644
--- a/site/src/components/WorkspaceActions/constants.ts
+++ b/site/src/components/WorkspaceActions/constants.ts
@@ -45,7 +45,7 @@ export const WorkspaceStateActions: StateActionsType = {
   },
   [WorkspaceStateEnum.started]: {
     primary: ButtonTypesEnum.stop,
-    secondary: [ButtonTypesEnum.delete, ButtonTypesEnum.update],
+    secondary: [ButtonTypesEnum.delete],
   },
   [WorkspaceStateEnum.stopping]: {
     primary: ButtonTypesEnum.cancel,
@@ -53,16 +53,16 @@ export const WorkspaceStateActions: StateActionsType = {
   },
   [WorkspaceStateEnum.stopped]: {
     primary: ButtonTypesEnum.start,
-    secondary: [ButtonTypesEnum.delete, ButtonTypesEnum.update],
+    secondary: [ButtonTypesEnum.delete],
   },
   [WorkspaceStateEnum.canceled]: {
     primary: ButtonTypesEnum.start,
-    secondary: [ButtonTypesEnum.stop, ButtonTypesEnum.delete, ButtonTypesEnum.update],
+    secondary: [ButtonTypesEnum.stop, ButtonTypesEnum.delete],
   },
   // in the case of an error
   [WorkspaceStateEnum.error]: {
     primary: ButtonTypesEnum.start, // give the user the ability to start a workspace again
-    secondary: [ButtonTypesEnum.delete, ButtonTypesEnum.update], // allows the user to delete or update
+    secondary: [ButtonTypesEnum.delete], // allows the user to delete
   },
   /**
    * disabled states

From fe019ea3039cdd5104d5a1dc328a3a2f9da67500 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira.pilot23@gmail.com>
Date: Fri, 22 Jul 2022 13:58:58 +0000
Subject: [PATCH 2/5] added update tooltip

---
 .../Tooltips/HelpTooltip/HelpTooltip.tsx      | 13 ++++----
 .../Tooltips/OutdatedHelpTooltip.tsx          |  9 +++---
 site/src/components/Workspace/Workspace.tsx   |  2 +-
 .../WorkspaceStats/WorkspaceStats.test.tsx    | 31 +++++++++++++++++++
 .../WorkspaceStats/WorkspaceStats.tsx         | 19 +++++++++---
 .../WorkspaceStats/createDayString.ts         |  9 ++++++
 6 files changed, 68 insertions(+), 15 deletions(-)
 create mode 100644 site/src/components/WorkspaceStats/WorkspaceStats.test.tsx
 create mode 100644 site/src/components/WorkspaceStats/createDayString.ts

diff --git a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
index d8b4e460d26af..1c97f47431c7a 100644
--- a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
@@ -33,7 +33,7 @@ export const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, open, size =
   const styles = useStyles({ size })
   const anchorRef = useRef<HTMLButtonElement>(null)
   const [isOpen, setIsOpen] = useState(!!open)
-  const id = isOpen ? "help-popover" : undefined
+  const id = isOpen ? "help-popover" : ""
 
   const onClose = () => {
     setIsOpen(false)
@@ -110,16 +110,17 @@ export const HelpTooltipLink: React.FC<{ href: string }> = ({ children, href })
   )
 }
 
-export const HelpTooltipAction: React.FC<{ icon: Icon; onClick: () => void }> = ({
-  children,
-  icon: Icon,
-  onClick,
-}) => {
+export const HelpTooltipAction: React.FC<{
+  icon: Icon
+  onClick: () => void
+  ariaLabel?: string
+}> = ({ children, icon: Icon, onClick, ariaLabel }) => {
   const styles = useStyles()
   const tooltip = useHelpTooltip()
 
   return (
     <button
+      aria-label={ariaLabel ?? ""}
       className={styles.action}
       onClick={(event) => {
         event.stopPropagation()
diff --git a/site/src/components/Tooltips/OutdatedHelpTooltip.tsx b/site/src/components/Tooltips/OutdatedHelpTooltip.tsx
index 06ebba16e6c05..b7f500786774a 100644
--- a/site/src/components/Tooltips/OutdatedHelpTooltip.tsx
+++ b/site/src/components/Tooltips/OutdatedHelpTooltip.tsx
@@ -8,23 +8,24 @@ import {
   HelpTooltipTitle,
 } from "./HelpTooltip"
 
-const Language = {
+export const Language = {
   outdatedLabel: "Outdated",
   versionTooltipText: "This workspace version is outdated and a newer version is available.",
   updateVersionLabel: "Update version",
 }
 
 interface TooltipProps {
-  onUpdateVersion: () => void
+  onUpdateVersion: () => void,
+  ariaLabel?: string,
 }
 
-export const OutdatedHelpTooltip: FC<TooltipProps> = ({ onUpdateVersion }) => {
+export const OutdatedHelpTooltip: FC<TooltipProps> = ({ onUpdateVersion, ariaLabel }) => {
   return (
     <HelpTooltip size="small">
       <HelpTooltipTitle>{Language.outdatedLabel}</HelpTooltipTitle>
       <HelpTooltipText>{Language.versionTooltipText}</HelpTooltipText>
       <HelpTooltipLinksGroup>
-        <HelpTooltipAction icon={RefreshIcon} onClick={onUpdateVersion}>
+        <HelpTooltipAction icon={RefreshIcon} onClick={onUpdateVersion} ariaLabel={ariaLabel}>
           {Language.updateVersionLabel}
         </HelpTooltipAction>
       </HelpTooltipLinksGroup>
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index a3e00c984a472..3d920f1551fa0 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -94,7 +94,7 @@ export const Workspace: FC<WorkspaceProps> = ({
             handleClick={() => navigate(`/templates`)}
           />
 
-          <WorkspaceStats workspace={workspace} />
+          <WorkspaceStats workspace={workspace} handleUpdate={handleUpdate} />
 
           {!!resources && !!resources.length && (
             <Resources
diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.test.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.test.tsx
new file mode 100644
index 0000000000000..89c656f1bb2ae
--- /dev/null
+++ b/site/src/components/WorkspaceStats/WorkspaceStats.test.tsx
@@ -0,0 +1,31 @@
+import { fireEvent, screen } from "@testing-library/react"
+import { Language } from "components/Tooltips/OutdatedHelpTooltip"
+import { WorkspaceStats } from "components/WorkspaceStats/WorkspaceStats"
+import { MockOutdatedWorkspace } from "testHelpers/entities"
+import { renderWithAuth } from "testHelpers/renderHelpers"
+import * as CreateDayString from "./createDayString"
+
+describe("WorkspaceStats", () => {
+  it("shows an outdated tooltip", async () => {
+    // Mocking the dayjs module within the createDayString file
+    const mock = jest.spyOn(CreateDayString, "createDayString")
+    mock.mockImplementation(() => "a minute ago")
+
+    const handleUpdateMock = jest.fn()
+    renderWithAuth(
+      <WorkspaceStats handleUpdate={handleUpdateMock} workspace={MockOutdatedWorkspace} />,
+      {
+        route: `/@${MockOutdatedWorkspace.owner_name}/${MockOutdatedWorkspace.name}`,
+        path: "/@:username/:workspace",
+      },
+    )
+    const tooltipButton = await screen.findByRole("button")
+    fireEvent.click(tooltipButton)
+    expect(await screen.findByText(Language.versionTooltipText)).toBeInTheDocument()
+    const updateButton = screen.getByRole("button", {
+      name: "update version",
+    })
+    fireEvent.click(updateButton)
+    expect(handleUpdateMock).toBeCalledTimes(1)
+  })
+})
diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx
index bde20f8226637..f9f4a3517a1b2 100644
--- a/site/src/components/WorkspaceStats/WorkspaceStats.tsx
+++ b/site/src/components/WorkspaceStats/WorkspaceStats.tsx
@@ -1,12 +1,13 @@
 import Link from "@material-ui/core/Link"
 import { makeStyles, useTheme } from "@material-ui/core/styles"
-import dayjs from "dayjs"
+import { OutdatedHelpTooltip } from "components/Tooltips"
 import { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
 import { Workspace } from "../../api/typesGenerated"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { combineClasses } from "../../util/combineClasses"
 import { getDisplayStatus, getDisplayWorkspaceBuildInitiatedBy } from "../../util/workspace"
+import { createDayString } from "./createDayString"
 
 const Language = {
   workspaceDetails: "Workspace Details",
@@ -21,9 +22,10 @@ const Language = {
 
 export interface WorkspaceStatsProps {
   workspace: Workspace
+  handleUpdate: () => void
 }
 
-export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace }) => {
+export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace, handleUpdate }) => {
   const styles = useStyles()
   const theme = useTheme()
   const status = getDisplayStatus(theme, workspace.latest_build)
@@ -46,7 +48,10 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace }) => {
         <span className={styles.statsLabel}>{Language.versionLabel}</span>
         <span className={styles.statsValue}>
           {workspace.outdated ? (
-            <span style={{ color: theme.palette.error.main }}>{Language.outdated}</span>
+            <span className={styles.outdatedLabel}>
+              {Language.outdated}
+              <OutdatedHelpTooltip onUpdateVersion={handleUpdate} ariaLabel="update version" />
+            </span>
           ) : (
             <span style={{ color: theme.palette.text.secondary }}>{Language.upToDate}</span>
           )}
@@ -56,7 +61,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace }) => {
       <div className={styles.statItem}>
         <span className={styles.statsLabel}>{Language.lastBuiltLabel}</span>
         <span className={styles.statsValue} data-chromatic="ignore">
-          {dayjs().to(dayjs(workspace.latest_build.created_at))}
+          {createDayString(workspace.latest_build.created_at)}
         </span>
       </div>
       <div className={styles.statsDivider} />
@@ -133,4 +138,10 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.text.primary,
     fontWeight: 600,
   },
+  outdatedLabel: {
+    color: theme.palette.error.main,
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+  },
 }))
diff --git a/site/src/components/WorkspaceStats/createDayString.ts b/site/src/components/WorkspaceStats/createDayString.ts
new file mode 100644
index 0000000000000..5dc543ba8a930
--- /dev/null
+++ b/site/src/components/WorkspaceStats/createDayString.ts
@@ -0,0 +1,9 @@
+import dayjs from "dayjs"
+
+/**
+ * Returns a human-readable string describing when the workspace was created
+ * Broken into its own module for testing purposes
+ */
+export function createDayString(createdAt: string): string {
+  return dayjs().to(dayjs(createdAt))
+}

From 197a5bfc768210897b51c913601fccef81a7a2c8 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira.pilot23@gmail.com>
Date: Fri, 22 Jul 2022 14:03:11 +0000
Subject: [PATCH 3/5] cleanup

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

diff --git a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
index 1c97f47431c7a..7c70d9146743a 100644
--- a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
@@ -33,7 +33,7 @@ export const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, open, size =
   const styles = useStyles({ size })
   const anchorRef = useRef<HTMLButtonElement>(null)
   const [isOpen, setIsOpen] = useState(!!open)
-  const id = isOpen ? "help-popover" : ""
+  const id = isOpen ? "help-popover" : undefined
 
   const onClose = () => {
     setIsOpen(false)

From 6898eb10a906370ac6c24dd260a49c42fcebca38 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira.pilot23@gmail.com>
Date: Fri, 22 Jul 2022 14:09:40 +0000
Subject: [PATCH 4/5] prettier

---
 site/src/components/Tooltips/OutdatedHelpTooltip.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Tooltips/OutdatedHelpTooltip.tsx b/site/src/components/Tooltips/OutdatedHelpTooltip.tsx
index b7f500786774a..d44dd8cfeff28 100644
--- a/site/src/components/Tooltips/OutdatedHelpTooltip.tsx
+++ b/site/src/components/Tooltips/OutdatedHelpTooltip.tsx
@@ -15,8 +15,8 @@ export const Language = {
 }
 
 interface TooltipProps {
-  onUpdateVersion: () => void,
-  ariaLabel?: string,
+  onUpdateVersion: () => void
+  ariaLabel?: string
 }
 
 export const OutdatedHelpTooltip: FC<TooltipProps> = ({ onUpdateVersion, ariaLabel }) => {

From e061e0c34380b8ae285a264db25977cd4dded0a0 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira.pilot23@gmail.com>
Date: Fri, 22 Jul 2022 18:16:47 +0000
Subject: [PATCH 5/5] PR feedback

---
 site/src/components/TemplateStats/TemplateStats.tsx      | 7 ++-----
 .../src/components/WorkspaceActions/WorkspaceActions.tsx | 6 +++---
 .../components/WorkspaceStats/WorkspaceStats.test.tsx    | 2 +-
 site/src/components/WorkspaceStats/WorkspaceStats.tsx    | 6 +++---
 site/src/components/WorkspaceStats/createDayString.ts    | 9 ---------
 site/src/components/WorkspacesTable/WorkspacesRow.tsx    | 7 ++-----
 site/src/pages/TemplatePage/TemplatePage.test.tsx        | 5 +++++
 site/src/pages/TemplatesPage/TemplatesPage.test.tsx      | 4 ++++
 site/src/pages/TemplatesPage/TemplatesPageView.tsx       | 7 ++-----
 site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx    | 4 ++++
 site/src/util/createDayString.ts                         | 9 +++++++++
 11 files changed, 35 insertions(+), 31 deletions(-)
 delete mode 100644 site/src/components/WorkspaceStats/createDayString.ts
 create mode 100644 site/src/util/createDayString.ts

diff --git a/site/src/components/TemplateStats/TemplateStats.tsx b/site/src/components/TemplateStats/TemplateStats.tsx
index a0b7a0722cc45..b02730b329d99 100644
--- a/site/src/components/TemplateStats/TemplateStats.tsx
+++ b/site/src/components/TemplateStats/TemplateStats.tsx
@@ -1,12 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles"
-import dayjs from "dayjs"
-import relativeTime from "dayjs/plugin/relativeTime"
 import { FC } from "react"
+import { createDayString } from "util/createDayString"
 import { Template, TemplateVersion } from "../../api/typesGenerated"
 import { CardRadius, MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 
-dayjs.extend(relativeTime)
-
 const Language = {
   usedByLabel: "Used by",
   activeVersionLabel: "Active version",
@@ -45,7 +42,7 @@ export const TemplateStats: FC<TemplateStatsProps> = ({ template, activeVersion
       <div className={styles.statItem}>
         <span className={styles.statsLabel}>{Language.lastUpdateLabel}</span>
         <span className={styles.statsValue} data-chromatic="ignore">
-          {dayjs().to(dayjs(template.updated_at))}
+          {createDayString(template.updated_at)}
         </span>
       </div>
       <div className={styles.statsDivider} />
diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
index aec143c4c8ac4..cfb4c5be47d6f 100644
--- a/site/src/components/WorkspaceActions/WorkspaceActions.tsx
+++ b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
@@ -42,11 +42,11 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   )
   const workspaceState = WorkspaceStateEnum[workspaceStatus]
 
-  const canUpdateWorkspace = workspace.outdated && canAcceptJobs(workspaceStatus)
+  const canBeUpdated = workspace.outdated && canAcceptJobs(workspaceStatus)
 
   // actions are the primary and secondary CTAs that appear in the workspace actions dropdown
   const actions = useMemo(() => {
-    if (!canUpdateWorkspace) {
+    if (!canBeUpdated) {
       return WorkspaceStateActions[workspaceState]
     }
 
@@ -57,7 +57,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
     updatedActions.primary = ButtonTypesEnum.update
 
     return updatedActions
-  }, [canUpdateWorkspace, workspaceState])
+  }, [canBeUpdated, workspaceState])
 
   /**
    * Ensures we close the popover before calling any action handler
diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.test.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.test.tsx
index 89c656f1bb2ae..d7d8fc9fef3b1 100644
--- a/site/src/components/WorkspaceStats/WorkspaceStats.test.tsx
+++ b/site/src/components/WorkspaceStats/WorkspaceStats.test.tsx
@@ -3,7 +3,7 @@ import { Language } from "components/Tooltips/OutdatedHelpTooltip"
 import { WorkspaceStats } from "components/WorkspaceStats/WorkspaceStats"
 import { MockOutdatedWorkspace } from "testHelpers/entities"
 import { renderWithAuth } from "testHelpers/renderHelpers"
-import * as CreateDayString from "./createDayString"
+import * as CreateDayString from "util/createDayString"
 
 describe("WorkspaceStats", () => {
   it("shows an outdated tooltip", async () => {
diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx
index f9f4a3517a1b2..094fe50c3c1fb 100644
--- a/site/src/components/WorkspaceStats/WorkspaceStats.tsx
+++ b/site/src/components/WorkspaceStats/WorkspaceStats.tsx
@@ -3,11 +3,11 @@ import { makeStyles, useTheme } from "@material-ui/core/styles"
 import { OutdatedHelpTooltip } from "components/Tooltips"
 import { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
+import { combineClasses } from "util/combineClasses"
+import { createDayString } from "util/createDayString"
+import { getDisplayStatus, getDisplayWorkspaceBuildInitiatedBy } from "util/workspace"
 import { Workspace } from "../../api/typesGenerated"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
-import { combineClasses } from "../../util/combineClasses"
-import { getDisplayStatus, getDisplayWorkspaceBuildInitiatedBy } from "../../util/workspace"
-import { createDayString } from "./createDayString"
 
 const Language = {
   workspaceDetails: "Workspace Details",
diff --git a/site/src/components/WorkspaceStats/createDayString.ts b/site/src/components/WorkspaceStats/createDayString.ts
deleted file mode 100644
index 5dc543ba8a930..0000000000000
--- a/site/src/components/WorkspaceStats/createDayString.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import dayjs from "dayjs"
-
-/**
- * Returns a human-readable string describing when the workspace was created
- * Broken into its own module for testing purposes
- */
-export function createDayString(createdAt: string): string {
-  return dayjs().to(dayjs(createdAt))
-}
diff --git a/site/src/components/WorkspacesTable/WorkspacesRow.tsx b/site/src/components/WorkspacesTable/WorkspacesRow.tsx
index bfe9b2e99e42e..24a2c534b7ebe 100644
--- a/site/src/components/WorkspacesTable/WorkspacesRow.tsx
+++ b/site/src/components/WorkspacesTable/WorkspacesRow.tsx
@@ -3,10 +3,9 @@ import TableRow from "@material-ui/core/TableRow"
 import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
 import useTheme from "@material-ui/styles/useTheme"
 import { useActor } from "@xstate/react"
-import dayjs from "dayjs"
-import relativeTime from "dayjs/plugin/relativeTime"
 import { FC } from "react"
 import { useNavigate } from "react-router-dom"
+import { createDayString } from "util/createDayString"
 import { getDisplayStatus, getDisplayWorkspaceBuildInitiatedBy } from "../../util/workspace"
 import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService"
 import { AvatarData } from "../AvatarData/AvatarData"
@@ -18,8 +17,6 @@ import {
 import { TableCellLink } from "../TableCellLink/TableCellLink"
 import { OutdatedHelpTooltip } from "../Tooltips"
 
-dayjs.extend(relativeTime)
-
 const Language = {
   upToDateLabel: "Up to date",
   outdatedLabel: "Outdated",
@@ -58,7 +55,7 @@ export const WorkspacesRow: FC<{ workspaceRef: WorkspaceItemMachineRef }> = ({ w
       <TableCellLink to={workspacePageLink}>
         <AvatarData
           title={initiatedBy}
-          subtitle={dayjs().to(dayjs(workspace.latest_build.created_at))}
+          subtitle={createDayString(workspace.latest_build.created_at)}
         />
       </TableCellLink>
       <TableCellLink to={workspacePageLink}>
diff --git a/site/src/pages/TemplatePage/TemplatePage.test.tsx b/site/src/pages/TemplatePage/TemplatePage.test.tsx
index d1d86d5b9b74a..9dac040cbab08 100644
--- a/site/src/pages/TemplatePage/TemplatePage.test.tsx
+++ b/site/src/pages/TemplatePage/TemplatePage.test.tsx
@@ -1,4 +1,5 @@
 import { screen } from "@testing-library/react"
+import * as CreateDayString from "util/createDayString"
 import {
   MockTemplate,
   MockTemplateVersion,
@@ -9,6 +10,10 @@ import { TemplatePage } from "./TemplatePage"
 
 describe("TemplatePage", () => {
   it("shows the template name, readme and resources", async () => {
+    // Mocking the dayjs module within the createDayString file
+    const mock = jest.spyOn(CreateDayString, "createDayString")
+    mock.mockImplementation(() => "a minute ago")
+
     renderWithAuth(<TemplatePage />, {
       route: `/templates/${MockTemplate.id}`,
       path: "/templates/:template",
diff --git a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx
index c2400ba1a70b3..608f9d3a95790 100644
--- a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx
@@ -1,5 +1,6 @@
 import { screen } from "@testing-library/react"
 import { rest } from "msw"
+import * as CreateDayString from "util/createDayString"
 import { MockTemplate } from "../../testHelpers/entities"
 import { history, render } from "../../testHelpers/renderHelpers"
 import { server } from "../../testHelpers/server"
@@ -8,6 +9,9 @@ import { Language } from "./TemplatesPageView"
 
 describe("TemplatesPage", () => {
   beforeEach(() => {
+    // Mocking the dayjs module within the createDayString file
+    const mock = jest.spyOn(CreateDayString, "createDayString")
+    mock.mockImplementation(() => "a minute ago")
     history.replace("/workspaces")
   })
 
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index 79d1ec294ccc1..ce822af401b24 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -6,10 +6,9 @@ import TableCell from "@material-ui/core/TableCell"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
-import dayjs from "dayjs"
-import relativeTime from "dayjs/plugin/relativeTime"
 import { FC } from "react"
 import { useNavigate } from "react-router-dom"
+import { createDayString } from "util/createDayString"
 import * as TypesGen from "../../api/typesGenerated"
 import { AvatarData } from "../../components/AvatarData/AvatarData"
 import { CodeExample } from "../../components/CodeExample/CodeExample"
@@ -31,8 +30,6 @@ import {
   HelpTooltipTitle,
 } from "../../components/Tooltips/HelpTooltip/HelpTooltip"
 
-dayjs.extend(relativeTime)
-
 export const Language = {
   developerCount: (ownerCount: number): string => {
     return `${ownerCount} developer${ownerCount !== 1 ? "s" : ""}`
@@ -151,7 +148,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
                 </TableCellLink>
 
                 <TableCellLink data-chromatic="ignore" to={templatePageLink}>
-                  {dayjs().to(dayjs(template.updated_at))}
+                  {createDayString(template.updated_at)}
                 </TableCellLink>
                 <TableCellLink to={templatePageLink}>{template.created_by_name}</TableCellLink>
                 <TableCellLink to={templatePageLink}>
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx
index 34199cb5b59de..46b5283a96a59 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx
@@ -1,5 +1,6 @@
 import { screen } from "@testing-library/react"
 import { rest } from "msw"
+import * as CreateDayString from "util/createDayString"
 import { Language as WorkspacesTableBodyLanguage } from "../../components/WorkspacesTable/WorkspacesTableBody"
 import { MockWorkspace } from "../../testHelpers/entities"
 import { history, render } from "../../testHelpers/renderHelpers"
@@ -9,6 +10,9 @@ import WorkspacesPage from "./WorkspacesPage"
 describe("WorkspacesPage", () => {
   beforeEach(() => {
     history.replace("/workspaces")
+    // Mocking the dayjs module within the createDayString file
+    const mock = jest.spyOn(CreateDayString, "createDayString")
+    mock.mockImplementation(() => "a minute ago")
   })
 
   it("renders an empty workspaces page", async () => {
diff --git a/site/src/util/createDayString.ts b/site/src/util/createDayString.ts
new file mode 100644
index 0000000000000..5aea9856452ce
--- /dev/null
+++ b/site/src/util/createDayString.ts
@@ -0,0 +1,9 @@
+import dayjs from "dayjs"
+
+/**
+ * Returns a human-readable string describing the passing of time
+ * Broken into its own module for testing purposes
+ */
+export function createDayString(time: string): string {
+  return dayjs().to(dayjs(time))
+}