added update tooltip

Kira-Pilot · Kira-Pilot · commit fe019ea3039c · 2022-07-22T13:58:58.000Z
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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))
+}
