Skip to content

Commit 7b49517

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor(site): Add more info on agent outdated tooltip and update action (coder#5967)
1 parent 5f089cb commit 7b49517

File tree

8 files changed

+125
-17
lines changed

8 files changed

+125
-17
lines changed

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
MockWorkspace,
44
MockWorkspaceAgent,
55
MockWorkspaceAgentConnecting,
6+
MockWorkspaceAgentOutdated,
67
MockWorkspaceAgentStartError,
78
MockWorkspaceAgentStarting,
89
MockWorkspaceAgentStartTimeout,
@@ -120,3 +121,12 @@ ShowingPortForward.args = {
120121
applicationsHost: "https://coder.com",
121122
showApps: true,
122123
}
124+
125+
export const Outdated = Template.bind({})
126+
Outdated.args = {
127+
agent: MockWorkspaceAgentOutdated,
128+
workspace: MockWorkspace,
129+
applicationsHost: "",
130+
showApps: true,
131+
serverVersion: "v99.999.9999+c1cdf14",
132+
}

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export interface AgentRowProps {
2323
hideSSHButton?: boolean
2424
hideVSCodeDesktopButton?: boolean
2525
serverVersion: string
26+
onUpdateAgent: () => void
2627
}
2728

2829
export const AgentRow: FC<AgentRowProps> = ({
@@ -33,6 +34,7 @@ export const AgentRow: FC<AgentRowProps> = ({
3334
hideSSHButton,
3435
hideVSCodeDesktopButton,
3536
serverVersion,
37+
onUpdateAgent,
3638
}) => {
3739
const styles = useStyles()
3840
const { t } = useTranslation("agent")
@@ -61,7 +63,11 @@ export const AgentRow: FC<AgentRowProps> = ({
6163
<span className={styles.agentOS}>{agent.operating_system}</span>
6264

6365
<Maybe condition={agent.status === "connected"}>
64-
<AgentVersion agent={agent} serverVersion={serverVersion} />
66+
<AgentVersion
67+
agent={agent}
68+
serverVersion={serverVersion}
69+
onUpdate={onUpdateAgent}
70+
/>
6571
</Maybe>
6672

6773
<AgentLatency agent={agent} />

‎site/src/components/Resources/AgentVersion.tsx

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
import { useRef, useState, FC } from "react"
22
import { makeStyles } from "@material-ui/core/styles"
3-
import {
4-
HelpTooltipText,
5-
HelpPopover,
6-
HelpTooltipTitle,
7-
} from "components/Tooltips/HelpTooltip"
83
import { WorkspaceAgent } from "api/typesGenerated"
94
import { getDisplayVersionStatus } from "util/workspace"
5+
import { AgentOutdatedTooltip } from "components/Tooltips/AgentOutdatedTooltip"
106

117
export const AgentVersion: FC<{
128
agent: WorkspaceAgent
139
serverVersion: string
14-
}> = ({ agent, serverVersion }) => {
10+
onUpdate: () => void
11+
}> = ({ agent, serverVersion, onUpdate }) => {
1512
const styles = useStyles()
1613
const anchorRef = useRef<HTMLButtonElement>(null)
1714
const [isOpen, setIsOpen] = useState(false)
@@ -37,20 +34,16 @@ export const AgentVersion: FC<{
3734
>
3835
Agent Outdated
3936
</span>
40-
<HelpPopover
37+
<AgentOutdatedTooltip
4138
id={id}
4239
open={isOpen}
4340
anchorEl={anchorRef.current}
4441
onOpen={() => setIsOpen(true)}
4542
onClose={() => setIsOpen(false)}
46-
>
47-
<HelpTooltipTitle>Agent Outdated</HelpTooltipTitle>
48-
<HelpTooltipText>
49-
This agent is an older version than the Coder server. This can happen
50-
after you update Coder with running workspaces. To fix this, you can
51-
stop and start the workspace.
52-
</HelpTooltipText>
53-
</HelpPopover>
43+
agent={agent}
44+
serverVersion={serverVersion}
45+
onUpdate={onUpdate}
46+
/>
5447
</>
5548
)
5649
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { action } from "@storybook/addon-actions"
12
import { Story } from "@storybook/react"
23
import { MockWorkspace, MockWorkspaceResource } from "testHelpers/entities"
34
import { AgentRow } from "./AgentRow"
@@ -21,6 +22,7 @@ Example.args = {
2122
workspace={MockWorkspace}
2223
applicationsHost=""
2324
serverVersion=""
25+
onUpdateAgent={action("updateAgent")}
2426
/>
2527
),
2628
}
@@ -75,6 +77,7 @@ BunchOfMetadata.args = {
7577
workspace={MockWorkspace}
7678
applicationsHost=""
7779
serverVersion=""
80+
onUpdateAgent={action("updateAgent")}
7881
/>
7982
),
8083
}

‎site/src/components/Tooltips/AgentOutdatedTooltip.tsx

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { ComponentProps, FC } from "react"
2+
import { makeStyles } from "@material-ui/core/styles"
3+
import RefreshIcon from "@material-ui/icons/RefreshOutlined"
4+
import {
5+
HelpTooltipText,
6+
HelpPopover,
7+
HelpTooltipTitle,
8+
HelpTooltipAction,
9+
HelpTooltipLinksGroup,
10+
HelpTooltipContext,
11+
} from "components/Tooltips/HelpTooltip"
12+
import { WorkspaceAgent } from "api/typesGenerated"
13+
import { Stack } from "components/Stack/Stack"
14+
import { useTranslation } from "react-i18next"
15+
16+
type AgentOutdatedTooltipProps = ComponentProps<typeof HelpPopover> & {
17+
agent: WorkspaceAgent
18+
serverVersion: string
19+
onUpdate: () => void
20+
}
21+
22+
export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
23+
agent,
24+
serverVersion,
25+
onUpdate,
26+
onOpen,
27+
id,
28+
open,
29+
onClose,
30+
anchorEl,
31+
}) => {
32+
const styles = useStyles()
33+
const { t } = useTranslation("workspacePage")
34+
35+
return (
36+
<HelpPopover
37+
id={id}
38+
open={open}
39+
anchorEl={anchorEl}
40+
onOpen={onOpen}
41+
onClose={onClose}
42+
>
43+
<HelpTooltipContext.Provider value={{ open, onClose }}>
44+
<Stack spacing={1}>
45+
<div>
46+
<HelpTooltipTitle>
47+
{t("agentOutdatedTooltip.title")}
48+
</HelpTooltipTitle>
49+
<HelpTooltipText>
50+
{t("agentOutdatedTooltip.description")}
51+
</HelpTooltipText>
52+
</div>
53+
54+
<Stack spacing={0.5}>
55+
<span className={styles.versionLabel}>
56+
{t("agentOutdatedTooltip.agentVersionLabel")}
57+
</span>
58+
<span>{agent.version}</span>
59+
</Stack>
60+
61+
<Stack spacing={0.5}>
62+
<span className={styles.versionLabel}>
63+
{t("agentOutdatedTooltip.serverVersionLabel")}
64+
</span>
65+
<span>{serverVersion}</span>
66+
</Stack>
67+
68+
<HelpTooltipLinksGroup>
69+
<HelpTooltipAction
70+
icon={RefreshIcon}
71+
onClick={onUpdate}
72+
ariaLabel="Update workspace"
73+
>
74+
{t("agentOutdatedTooltip.updateWorkspaceLabel")}
75+
</HelpTooltipAction>
76+
</HelpTooltipLinksGroup>
77+
</Stack>
78+
</HelpTooltipContext.Provider>
79+
</HelpPopover>
80+
)
81+
}
82+
83+
const useStyles = makeStyles((theme) => ({
84+
versionLabel: {
85+
fontWeight: 600,
86+
color: theme.palette.text.primary,
87+
},
88+
}))

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const Language = {
3030
ariaLabel: "tooltip",
3131
}
3232

33-
const HelpTooltipContext = createContext<
33+
export const HelpTooltipContext = createContext<
3434
{ open: boolean; onClose: () => void } | undefined
3535
>(undefined)
3636

‎site/src/components/Workspace/Workspace.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
229229
hideSSHButton={hideSSHButton}
230230
hideVSCodeDesktopButton={hideVSCodeDesktopButton}
231231
serverVersion={serverVersion}
232+
onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated
232233
/>
233234
)}
234235
/>

‎site/src/i18n/en/workspacePage.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,5 +56,12 @@
5656
"reason": "Reason",
5757
"duration": "Duration",
5858
"version": "Version"
59+
},
60+
"agentOutdatedTooltip": {
61+
"title": "Agent Outdated",
62+
"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.",
63+
"agentVersionLabel": "Agent version",
64+
"serverVersionLabel": "Server version",
65+
"updateWorkspaceLabel": "Update workspace"
5966
}
6067
}

0 commit comments

Comments
 (0)