add tooltip when agent is outdated

coder · johnstcn · Aug 31, 2022 · Aug 26, 2022 · Aug 30, 2022 · Aug 30, 2022
commit b2888f425fa25c06b35e7dfdbf4e2f0e24fedc79
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
@@ -17,6 +17,7 @@ import { Stack } from "../Stack/Stack"
 import { TableHeaderRow } from "../TableHeaders/TableHeaders"
 import { TerminalLink } from "../TerminalLink/TerminalLink"
 import { AgentHelpTooltip } from "../Tooltips/AgentHelpTooltip"
+import { AgentOutdatedTooltip } from "../Tooltips/AgentOutdatedTooltip"
 import { ResourcesHelpTooltip } from "../Tooltips/ResourcesHelpTooltip"
 import { ResourceAvatarData } from "./ResourceAvatarData"
 
@@ -47,6 +48,7 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
 }) => {
   const styles = useStyles()
   const theme: Theme = useTheme()
+  const serverVersion = buildInfo?.version || ""
 
   return (
     <div aria-label={Language.resources} className={styles.wrapper}>
@@ -93,9 +95,9 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
                     )
                   }
 
-                  const versionStatus = getDisplayVersionStatus(
+                  const { displayVersion, outdated } = getDisplayVersionStatus(
                     agent.version,
-                    buildInfo?.version || "",
+                    serverVersion,
                   )
                   const agentStatus = getDisplayAgentStatus(theme, agent)
                   return (
@@ -123,7 +125,8 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
                           </div>
                           <div className={styles.dataRow}>
                             <strong>{Language.versionLabel}</strong>
-                            <span className={styles.agentVersion}>{versionStatus}</span>
+                            <span className={styles.agentVersion}>{displayVersion}</span>
+                            <AgentOutdatedTooltip outdated={outdated} />
                           </div>
                         </div>
                       </TableCell>

diff --git a/site/src/components/Tooltips/AgentOutdatedTooltip.tsx b/site/src/components/Tooltips/AgentOutdatedTooltip.tsx
@@ -0,0 +1,23 @@
+import { FC } from "react"
+import { HelpTooltip, HelpTooltipText, HelpTooltipTitle } from "./HelpTooltip"
+
+export const Language = {
+  label: "Agent Outdated",
+  text: "This agent is an older version than the Coder server. This can happen after you update Coder with running workspaces. To fix this, you can stop and start the workspace.",
+}
+
+interface TooltipProps {
+  outdated: boolean
+}
+
+export const AgentOutdatedTooltip: FC<React.PropsWithChildren<TooltipProps>> = ({ outdated }) => {
+  if (!outdated) {
+    return null
+  }
+  return (
+    <HelpTooltip size="small">
+      <HelpTooltipTitle>{Language.label}</HelpTooltipTitle>
+      <HelpTooltipText>{Language.text}</HelpTooltipText>
+    </HelpTooltip>
+  )
+}
diff --git a/site/src/util/workspace.test.ts b/site/src/util/workspace.test.ts
@@ -131,19 +131,20 @@ describe("util > workspace", () => {
   })
 
   describe("getDisplayVersionStatus", () => {
-    it.each<[string, string, string]>([
-      ["", "", "(unknown)"],
-      ["", "v1.2.3", "(unknown)"],
-      ["v1.2.3", "", "v1.2.3"],
-      ["v1.2.3", "v1.2.3", "v1.2.3"],
-      ["v1.2.3", "v1.2.4", "v1.2.3 (outdated)"],
-      ["v1.2.4", "v1.2.3", "v1.2.4"],
-      ["foo", "bar", "foo"],
+    it.each<[string, string, string, boolean]>([
+      ["", "", "(unknown)", false],
+      ["", "v1.2.3", "(unknown)", false],
+      ["v1.2.3", "", "v1.2.3", false],
+      ["v1.2.3", "v1.2.3", "v1.2.3", false],
+      ["v1.2.3", "v1.2.4", "v1.2.3 (outdated)", true],
+      ["v1.2.4", "v1.2.3", "v1.2.4", false],
+      ["foo", "bar", "foo", false],
     ])(
-      `getDisplayVersionStatus(theme, %p, %p) returns %p`,
-      (agentVersion, serverVersion, expectedVersion) => {
-        const version = getDisplayVersionStatus(agentVersion, serverVersion)
-        expect(version).toEqual(expectedVersion)
+      `getDisplayVersionStatus(theme, %p, %p) returns (%p, %p)`,
+      (agentVersion, serverVersion, expectedVersion, expectedOutdated) => {
+        const { displayVersion, outdated } = getDisplayVersionStatus(agentVersion, serverVersion)
+        expect(displayVersion).toEqual(expectedVersion)
+        expect(expectedOutdated).toEqual(outdated)
       },
     )
   })

diff --git a/site/src/util/workspace.ts b/site/src/util/workspace.ts
@@ -217,13 +217,25 @@ export const getDisplayAgentStatus = (
   }
 }
 
-export const getDisplayVersionStatus = (agentVersion: string, serverVersion: string): string => {
+export const getDisplayVersionStatus = (
+  agentVersion: string,
+  serverVersion: string,
+): { displayVersion: string; outdated: boolean } => {
   if (!semver.valid(serverVersion) || !semver.valid(agentVersion)) {
-    return `${agentVersion}` || `(${DisplayAgentVersionLanguage.unknown})`
+    return {
+      displayVersion: `${agentVersion}` || `(${DisplayAgentVersionLanguage.unknown})`,
+      outdated: false,
+    }
   } else if (semver.lt(agentVersion, serverVersion)) {
-    return `${agentVersion} (${DisplayAgentVersionLanguage.outdated})`
+    return {
+      displayVersion: `${agentVersion} (${DisplayAgentVersionLanguage.outdated})`,
+      outdated: true,
+    }
   } else {
-    return agentVersion
+    return {
+      displayVersion: agentVersion,
+      outdated: false,
+    }
   }
 }