refactor(site): Add more info on agent outdated tooltip and update action (#5967)

site/src/components/Resources/AgentRow.stories.tsx

@@ -3,6 +3,7 @@ import {
   MockWorkspace,
   MockWorkspaceAgent,
   MockWorkspaceAgentConnecting,
+  MockWorkspaceAgentOutdated,
   MockWorkspaceAgentStartError,
   MockWorkspaceAgentStarting,
   MockWorkspaceAgentStartTimeout,
@@ -120,3 +121,12 @@ ShowingPortForward.args = {
   applicationsHost: "https://coder.com",
   showApps: true,
 }
+
+export const Outdated = Template.bind({})
+Outdated.args = {
+  agent: MockWorkspaceAgentOutdated,
+  workspace: MockWorkspace,
+  applicationsHost: "",
+  showApps: true,
+  serverVersion: "v99.999.9999+c1cdf14",
+}

site/src/components/Resources/AgentRow.tsx

@@ -23,6 +23,7 @@ export interface AgentRowProps {
   hideSSHButton?: boolean
   hideVSCodeDesktopButton?: boolean
   serverVersion: string
+  onUpdateAgent: () => void
 }
 
 export const AgentRow: FC<AgentRowProps> = ({
@@ -33,6 +34,7 @@ export const AgentRow: FC<AgentRowProps> = ({
   hideSSHButton,
   hideVSCodeDesktopButton,
   serverVersion,
+  onUpdateAgent,
 }) => {
   const styles = useStyles()
   const { t } = useTranslation("agent")
@@ -61,7 +63,11 @@ export const AgentRow: FC<AgentRowProps> = ({
             <span className={styles.agentOS}>{agent.operating_system}</span>
 
             <Maybe condition={agent.status === "connected"}>
-              <AgentVersion agent={agent} serverVersion={serverVersion} />
+              <AgentVersion
+                agent={agent}
+                serverVersion={serverVersion}
+                onUpdate={onUpdateAgent}
+              />
             </Maybe>
 
             <AgentLatency agent={agent} />

site/src/components/Resources/AgentVersion.tsx

@@ -1,17 +1,14 @@
 import { useRef, useState, FC } from "react"
 import { makeStyles } from "@material-ui/core/styles"
-import {
-  HelpTooltipText,
-  HelpPopover,
-  HelpTooltipTitle,
-} from "components/Tooltips/HelpTooltip"
 import { WorkspaceAgent } from "api/typesGenerated"
 import { getDisplayVersionStatus } from "util/workspace"
+import { AgentOutdatedTooltip } from "components/Tooltips/AgentOutdatedTooltip"
 
 export const AgentVersion: FC<{
   agent: WorkspaceAgent
   serverVersion: string
-}> = ({ agent, serverVersion }) => {
+  onUpdate: () => void
+}> = ({ agent, serverVersion, onUpdate }) => {
   const styles = useStyles()
   const anchorRef = useRef<HTMLButtonElement>(null)
   const [isOpen, setIsOpen] = useState(false)
@@ -37,20 +34,16 @@ export const AgentVersion: FC<{
       >
         Agent Outdated
       </span>
-      <HelpPopover
+      <AgentOutdatedTooltip
         id={id}
         open={isOpen}
         anchorEl={anchorRef.current}
         onOpen={() => setIsOpen(true)}
         onClose={() => setIsOpen(false)}
-      >
-        <HelpTooltipTitle>Agent Outdated</HelpTooltipTitle>
-        <HelpTooltipText>
-          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.
-        </HelpTooltipText>
-      </HelpPopover>
+        agent={agent}
+        serverVersion={serverVersion}
+        onUpdate={onUpdate}
+      />
     </>
   )
 }

site/src/components/Resources/ResourceCard.stories.tsx

@@ -1,3 +1,4 @@
+import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
 import { MockWorkspace, MockWorkspaceResource } from "testHelpers/entities"
 import { AgentRow } from "./AgentRow"
@@ -21,6 +22,7 @@ Example.args = {
       workspace={MockWorkspace}
       applicationsHost=""
       serverVersion=""
+      onUpdateAgent={action("updateAgent")}
     />
   ),
 }
@@ -75,6 +77,7 @@ BunchOfMetadata.args = {
       workspace={MockWorkspace}
       applicationsHost=""
       serverVersion=""
+      onUpdateAgent={action("updateAgent")}
     />
   ),
 }

site/src/components/Tooltips/AgentOutdatedTooltip.tsx

@@ -0,0 +1,88 @@
+import { ComponentProps, FC } from "react"
+import { makeStyles } from "@material-ui/core/styles"
+import RefreshIcon from "@material-ui/icons/RefreshOutlined"
+import {
+  HelpTooltipText,
+  HelpPopover,
+  HelpTooltipTitle,
+  HelpTooltipAction,
+  HelpTooltipLinksGroup,
+  HelpTooltipContext,
+} from "components/Tooltips/HelpTooltip"
+import { WorkspaceAgent } from "api/typesGenerated"
+import { Stack } from "components/Stack/Stack"
+import { useTranslation } from "react-i18next"
+
+type AgentOutdatedTooltipProps = ComponentProps<typeof HelpPopover> & {
+  agent: WorkspaceAgent
+  serverVersion: string
+  onUpdate: () => void
+}
+
+export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
+  agent,
+  serverVersion,
+  onUpdate,
+  onOpen,
+  id,
+  open,
+  onClose,
+  anchorEl,
+}) => {
+  const styles = useStyles()
+  const { t } = useTranslation("workspacePage")
+
+  return (
+    <HelpPopover
+      id={id}
+      open={open}
+      anchorEl={anchorEl}
+      onOpen={onOpen}
+      onClose={onClose}
+    >
+      <HelpTooltipContext.Provider value={{ open, onClose }}>
+        <Stack spacing={1}>
+          <div>
+            <HelpTooltipTitle>
+              {t("agentOutdatedTooltip.title")}
+            </HelpTooltipTitle>
+            <HelpTooltipText>
+              {t("agentOutdatedTooltip.description")}
+            </HelpTooltipText>
+          </div>
+
+          <Stack spacing={0.5}>
+            <span className={styles.versionLabel}>
+              {t("agentOutdatedTooltip.agentVersionLabel")}
+            </span>
+            <span>{agent.version}</span>
+          </Stack>
+
+          <Stack spacing={0.5}>
+            <span className={styles.versionLabel}>
+              {t("agentOutdatedTooltip.serverVersionLabel")}
+            </span>
+            <span>{serverVersion}</span>
+          </Stack>
+
+          <HelpTooltipLinksGroup>
+            <HelpTooltipAction
+              icon={RefreshIcon}
+              onClick={onUpdate}
+              ariaLabel="Update workspace"
+            >
+              {t("agentOutdatedTooltip.updateWorkspaceLabel")}
+            </HelpTooltipAction>
+          </HelpTooltipLinksGroup>
+        </Stack>
+      </HelpTooltipContext.Provider>
+    </HelpPopover>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  versionLabel: {
+    fontWeight: 600,
+    color: theme.palette.text.primary,
+  },
+}))

site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx

@@ -30,7 +30,7 @@ export const Language = {
   ariaLabel: "tooltip",
 }
 
-const HelpTooltipContext = createContext<
+export const HelpTooltipContext = createContext<
   { open: boolean; onClose: () => void } | undefined
 >(undefined)
 

site/src/components/Workspace/Workspace.tsx

@@ -229,6 +229,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
                 hideSSHButton={hideSSHButton}
                 hideVSCodeDesktopButton={hideVSCodeDesktopButton}
                 serverVersion={serverVersion}
+                onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated
               />
             )}
           />

site/src/i18n/en/workspacePage.json

@@ -56,5 +56,12 @@
     "reason": "Reason",
     "duration": "Duration",
     "version": "Version"
+  },
+  "agentOutdatedTooltip": {
+    "title": "Agent Outdated",
+    "description": "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.",
+    "agentVersionLabel": "Agent version",
+    "serverVersionLabel": "Server version",
+    "updateWorkspaceLabel": "Update workspace"
   }
 }