diff --git a/site/src/components/Resources/AgentRow.stories.tsx b/site/src/components/Resources/AgentRow.stories.tsx index 4871030bfb..96a88fed9b 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 c6174f7f56..276d48f992 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 ea8ac6929d..9334536816 100644 --- a/site/src/components/Resources/AgentVersion.tsx +++ b/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(null) const [isOpen, setIsOpen] = useState(false) @@ -37,20 +34,16 @@ export const AgentVersion: FC<{ > Agent Outdated - 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. - - + agent={agent} + serverVersion={serverVersion} + onUpdate={onUpdate} + /> ) } diff --git a/site/src/components/Resources/ResourceCard.stories.tsx b/site/src/components/Resources/ResourceCard.stories.tsx index f04dbe4d09..f8cd06c963 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/AgentOutdatedTooltip.tsx b/site/src/components/Tooltips/AgentOutdatedTooltip.tsx new file mode 100644 index 0000000000..14f1a2c827 --- /dev/null +++ b/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 & { + agent: WorkspaceAgent + serverVersion: string + onUpdate: () => void +} + +export const AgentOutdatedTooltip: FC = ({ + agent, + serverVersion, + onUpdate, + onOpen, + id, + open, + onClose, + anchorEl, +}) => { + const styles = useStyles() + const { t } = useTranslation("workspacePage") + + return ( + + + +
+ + {t("agentOutdatedTooltip.title")} + + + {t("agentOutdatedTooltip.description")} + +
+ + + + {t("agentOutdatedTooltip.agentVersionLabel")} + + {agent.version} + + + + + {t("agentOutdatedTooltip.serverVersionLabel")} + + {serverVersion} + + + + + {t("agentOutdatedTooltip.updateWorkspaceLabel")} + + +
+
+
+ ) +} + +const useStyles = makeStyles((theme) => ({ + versionLabel: { + fontWeight: 600, + color: theme.palette.text.primary, + }, +})) diff --git a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx index 0fdb0e36b5..6776e18e97 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 d4e4a70bae..75f0dab640 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/site/src/components/Workspace/Workspace.tsx @@ -229,6 +229,7 @@ export const Workspace: FC> = ({ hideSSHButton={hideSSHButton} hideVSCodeDesktopButton={hideVSCodeDesktopButton} serverVersion={serverVersion} + onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated /> )} /> diff --git a/site/src/i18n/en/workspacePage.json b/site/src/i18n/en/workspacePage.json index bb69d7524b..2351c9029e 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" } }