From ca8fe57e6c444a45128422d1fd717a553e908a4c Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Wed, 1 Feb 2023 21:10:58 +0000 Subject: [PATCH 1/3] refactor(site): Add more info on agent outdated tooltip --- .../components/Resources/AgentRow.stories.tsx | 10 ++++ site/src/components/Resources/AgentRow.tsx | 8 ++- .../src/components/Resources/AgentVersion.tsx | 55 ++++++++++++++++--- .../Resources/ResourceCard.stories.tsx | 3 + .../Tooltips/HelpTooltip/HelpTooltip.tsx | 2 +- site/src/components/Workspace/Workspace.tsx | 1 + 6 files changed, 69 insertions(+), 10 deletions(-) diff --git a/site/src/components/Resources/AgentRow.stories.tsx b/site/src/components/Resources/AgentRow.stories.tsx index 4871030bfbd19..96a88fed9b7d2 100644 --- a/site/src/components/Resources/AgentRow.stories.tsx +++ b/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", +} diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx index c6174f7f56807..276d48f9922aa 100644 --- a/site/src/components/Resources/AgentRow.tsx +++ b/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 = ({ @@ -33,6 +34,7 @@ export const AgentRow: FC = ({ hideSSHButton, hideVSCodeDesktopButton, serverVersion, + onUpdateAgent, }) => { const styles = useStyles() const { t } = useTranslation("agent") @@ -61,7 +63,11 @@ export const AgentRow: FC = ({ {agent.operating_system} - + diff --git a/site/src/components/Resources/AgentVersion.tsx b/site/src/components/Resources/AgentVersion.tsx index ea8ac6929d2a1..c3b7a1b78cbe7 100644 --- a/site/src/components/Resources/AgentVersion.tsx +++ b/site/src/components/Resources/AgentVersion.tsx @@ -1,17 +1,23 @@ import { useRef, useState, 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 { getDisplayVersionStatus } from "util/workspace" +import { Stack } from "components/Stack/Stack" export const AgentVersion: FC<{ agent: WorkspaceAgent serverVersion: string -}> = ({ agent, serverVersion }) => { + onUpdate: () => void +}> = ({ agent, serverVersion, onUpdate }) => { const styles = useStyles() const anchorRef = useRef(null) const [isOpen, setIsOpen] = useState(false) @@ -44,19 +50,52 @@ export const AgentVersion: FC<{ onOpen={() => setIsOpen(true)} onClose={() => setIsOpen(false)} > - Agent Outdated - - 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. - + setIsOpen(false) }} + > + +
+ Agent Outdated + + 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. + +
+ + + Agent version + {agent.version} + + + + Server version + {serverVersion} + + + + + Update workspace + + + + ) } -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles((theme) => ({ trigger: { cursor: "pointer", }, + + versionLabel: { + fontWeight: 600, + color: theme.palette.text.primary, + }, })) diff --git a/site/src/components/Resources/ResourceCard.stories.tsx b/site/src/components/Resources/ResourceCard.stories.tsx index f04dbe4d097fd..f8cd06c963c91 100644 --- a/site/src/components/Resources/ResourceCard.stories.tsx +++ b/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")} /> ), } diff --git a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx index 0fdb0e36b565e..6776e18e97349 100644 --- a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx +++ b/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) diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index 0b06fb693648d..87e538a7845ba 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/site/src/components/Workspace/Workspace.tsx @@ -228,6 +228,7 @@ export const Workspace: FC> = ({ hideSSHButton={hideSSHButton} hideVSCodeDesktopButton={hideVSCodeDesktopButton} serverVersion={serverVersion} + onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated /> )} /> From 148eb380c25dfb85bfca0a4e332f7fc655834c5d Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Thu, 2 Feb 2023 13:38:33 +0000 Subject: [PATCH 2/3] Extract tooltip --- .../src/components/Resources/AgentVersion.tsx | 60 ++------------ .../Tooltips/AgentOutdatedTooltip.tsx | 82 +++++++++++++++++++ 2 files changed, 89 insertions(+), 53 deletions(-) create mode 100644 site/src/components/Tooltips/AgentOutdatedTooltip.tsx diff --git a/site/src/components/Resources/AgentVersion.tsx b/site/src/components/Resources/AgentVersion.tsx index c3b7a1b78cbe7..9334536816032 100644 --- a/site/src/components/Resources/AgentVersion.tsx +++ b/site/src/components/Resources/AgentVersion.tsx @@ -1,17 +1,8 @@ import { useRef, useState, 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 { getDisplayVersionStatus } from "util/workspace" -import { Stack } from "components/Stack/Stack" +import { AgentOutdatedTooltip } from "components/Tooltips/AgentOutdatedTooltip" export const AgentVersion: FC<{ agent: WorkspaceAgent @@ -43,59 +34,22 @@ export const AgentVersion: FC<{ > Agent Outdated - setIsOpen(true)} onClose={() => setIsOpen(false)} - > - setIsOpen(false) }} - > - -
- Agent Outdated - - 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. - -
- - - Agent version - {agent.version} - - - - Server version - {serverVersion} - - - - - Update workspace - - - - - + agent={agent} + serverVersion={serverVersion} + onUpdate={onUpdate} + /> ) } -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(() => ({ trigger: { cursor: "pointer", }, - - versionLabel: { - fontWeight: 600, - color: theme.palette.text.primary, - }, })) diff --git a/site/src/components/Tooltips/AgentOutdatedTooltip.tsx b/site/src/components/Tooltips/AgentOutdatedTooltip.tsx new file mode 100644 index 0000000000000..986510e760c1b --- /dev/null +++ b/site/src/components/Tooltips/AgentOutdatedTooltip.tsx @@ -0,0 +1,82 @@ +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" + +type AgentOutdatedTooltipProps = ComponentProps & { + agent: WorkspaceAgent + serverVersion: string + onUpdate: () => void +} + +export const AgentOutdatedTooltip: FC = ({ + agent, + serverVersion, + onUpdate, + onOpen, + id, + open, + onClose, + anchorEl, +}) => { + const styles = useStyles() + + return ( + + + +
+ Agent Outdated + + 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. + +
+ + + Agent version + {agent.version} + + + + Server version + {serverVersion} + + + + + Update workspace + + + + + + ) +} + +const useStyles = makeStyles((theme) => ({ + versionLabel: { + fontWeight: 600, + color: theme.palette.text.primary, + }, +})) From f816d94712d1e1779dd88470d64e9cd7f5e56b07 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Thu, 2 Feb 2023 13:42:41 +0000 Subject: [PATCH 3/3] Add translation --- .../Tooltips/AgentOutdatedTooltip.tsx | 20 ++++++++++++------- site/src/i18n/en/workspacePage.json | 7 +++++++ 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/site/src/components/Tooltips/AgentOutdatedTooltip.tsx b/site/src/components/Tooltips/AgentOutdatedTooltip.tsx index 986510e760c1b..14f1a2c827717 100644 --- a/site/src/components/Tooltips/AgentOutdatedTooltip.tsx +++ b/site/src/components/Tooltips/AgentOutdatedTooltip.tsx @@ -11,6 +11,7 @@ import { } from "components/Tooltips/HelpTooltip" import { WorkspaceAgent } from "api/typesGenerated" import { Stack } from "components/Stack/Stack" +import { useTranslation } from "react-i18next" type AgentOutdatedTooltipProps = ComponentProps & { agent: WorkspaceAgent @@ -29,6 +30,7 @@ export const AgentOutdatedTooltip: FC = ({ anchorEl, }) => { const styles = useStyles() + const { t } = useTranslation("workspacePage") return ( = ({
- Agent Outdated + + {t("agentOutdatedTooltip.title")} + - 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. + {t("agentOutdatedTooltip.description")}
- Agent version + + {t("agentOutdatedTooltip.agentVersionLabel")} + {agent.version} - Server version + + {t("agentOutdatedTooltip.serverVersionLabel")} + {serverVersion} @@ -65,7 +71,7 @@ export const AgentOutdatedTooltip: FC = ({ onClick={onUpdate} ariaLabel="Update workspace" > - Update workspace + {t("agentOutdatedTooltip.updateWorkspaceLabel")} diff --git a/site/src/i18n/en/workspacePage.json b/site/src/i18n/en/workspacePage.json index bb69d7524b429..2351c9029e7c5 100644 --- a/site/src/i18n/en/workspacePage.json +++ b/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" } }