From 8c551bd6b53d640c6e3a0725f0b34d0cc8ad5e26 Mon Sep 17 00:00:00 2001 From: Bruno Date: Tue, 12 Jul 2022 14:16:35 +0000 Subject: [PATCH 1/4] Add SSH button --- site/src/components/Resources/Resources.tsx | 21 ++--- site/src/components/SSHButton/SSHButton.tsx | 95 +++++++++++++++++++++ 2 files changed, 106 insertions(+), 10 deletions(-) create mode 100644 site/src/components/SSHButton/SSHButton.tsx diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx index ca5dbfb149574..e3214993b4ce0 100644 --- a/site/src/components/Resources/Resources.tsx +++ b/site/src/components/Resources/Resources.tsx @@ -9,6 +9,7 @@ import { FC } from "react" import { Workspace, WorkspaceResource } from "../../api/typesGenerated" import { getDisplayAgentStatus } from "../../util/workspace" import { AppLink } from "../AppLink/AppLink" +import { SSHButton } from "../SSHButton/SSHButton" import { Stack } from "../Stack/Stack" import { TableHeaderRow } from "../TableHeaders/TableHeaders" import { TerminalLink } from "../TerminalLink/TerminalLink" @@ -107,18 +108,17 @@ export const Resources: FC = ({ {agentStatus.status} - {canUpdateWorkspace && ( - -
- {agent.status === "connected" && ( + + <> + {canUpdateWorkspace && agent.status === "connected" && ( +
+ - )} - {agent.status === "connected" && - agent.apps.map((app) => ( + {agent.apps.map((app) => ( = ({ workspaceName={workspace.name} /> ))} -
- - )} +
+ )} + + ) }) diff --git a/site/src/components/SSHButton/SSHButton.tsx b/site/src/components/SSHButton/SSHButton.tsx new file mode 100644 index 0000000000000..15c507d8c21b6 --- /dev/null +++ b/site/src/components/SSHButton/SSHButton.tsx @@ -0,0 +1,95 @@ +import Button from "@material-ui/core/Button" +import Popover from "@material-ui/core/Popover" +import { makeStyles } from "@material-ui/core/styles" +import CloudIcon from "@material-ui/icons/CloudOutlined" +import { useRef, useState } from "react" +import { CodeExample } from "../CodeExample/CodeExample" +import { Stack } from "../Stack/Stack" +import { HelpTooltipLink, HelpTooltipLinksGroup, HelpTooltipText } from "../Tooltips/HelpTooltip" + +export const SSHButton: React.FC<{ workspaceName: string; agentName: string }> = ({ + workspaceName, + agentName, +}) => { + const anchorRef = useRef(null) + const [isOpen, setIsOpen] = useState(false) + const id = isOpen ? "schedule-popover" : undefined + const styles = useStyles() + + const onClose = () => { + setIsOpen(false) + } + + return ( + <> + + + + To connect with SSH you have to run the following commands: + + + +
+ + Configure ssh + + +
+ +
+ + Connect to the agent + + +
+ + + + Install Coder CLI + Configuring VS Code + SSH configuration + + + + ) +} + +const useStyles = makeStyles((theme) => ({ + popoverPaper: { + padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(3)}px`, + width: theme.spacing(38), + color: theme.palette.text.secondary, + marginTop: theme.spacing(0.25), + }, + + codeExamples: { + marginTop: theme.spacing(1.5), + }, + + codeExampleLabel: { + fontSize: 12, + }, +})) From 41d38dc57ae3b0651de698fe74acc775f0c5e0bf Mon Sep 17 00:00:00 2001 From: Bruno Date: Tue, 12 Jul 2022 14:20:53 +0000 Subject: [PATCH 2/4] Add missed stories --- .../SSHButton/SSHButton.stories.tsx | 23 +++++++++++++++++++ site/src/components/SSHButton/SSHButton.tsx | 11 +++++++-- 2 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 site/src/components/SSHButton/SSHButton.stories.tsx diff --git a/site/src/components/SSHButton/SSHButton.stories.tsx b/site/src/components/SSHButton/SSHButton.stories.tsx new file mode 100644 index 0000000000000..4664b9554b148 --- /dev/null +++ b/site/src/components/SSHButton/SSHButton.stories.tsx @@ -0,0 +1,23 @@ +import { Story } from "@storybook/react" +import { MockWorkspace, MockWorkspaceAgent } from "../../testHelpers/renderHelpers" +import { SSHButton, SSHButtonProps } from "./SSHButton" + +export default { + title: "components/SSHButton", + component: SSHButton, +} + +const Template: Story = (args) => + +export const Closed = Template.bind({}) +Closed.args = { + workspaceName: MockWorkspace.name, + agentName: MockWorkspaceAgent.name, +} + +export const Opened = Template.bind({}) +Opened.args = { + workspaceName: MockWorkspace.name, + agentName: MockWorkspaceAgent.name, + defaultIsOpen: true, +} diff --git a/site/src/components/SSHButton/SSHButton.tsx b/site/src/components/SSHButton/SSHButton.tsx index 15c507d8c21b6..178a4ea210e93 100644 --- a/site/src/components/SSHButton/SSHButton.tsx +++ b/site/src/components/SSHButton/SSHButton.tsx @@ -7,12 +7,19 @@ import { CodeExample } from "../CodeExample/CodeExample" import { Stack } from "../Stack/Stack" import { HelpTooltipLink, HelpTooltipLinksGroup, HelpTooltipText } from "../Tooltips/HelpTooltip" -export const SSHButton: React.FC<{ workspaceName: string; agentName: string }> = ({ +export interface SSHButtonProps { + workspaceName: string + agentName: string + defaultIsOpen?: boolean +} + +export const SSHButton: React.FC = ({ workspaceName, agentName, + defaultIsOpen = false, }) => { const anchorRef = useRef(null) - const [isOpen, setIsOpen] = useState(false) + const [isOpen, setIsOpen] = useState(defaultIsOpen) const id = isOpen ? "schedule-popover" : undefined const styles = useStyles() From 88bb08d4575807093eb94e880afd72891ca276a8 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 12 Jul 2022 12:45:57 -0300 Subject: [PATCH 3/4] Update site/src/components/SSHButton/SSHButton.tsx Co-authored-by: Presley Pizzo <1290996+presleyp@users.noreply.github.com> --- site/src/components/SSHButton/SSHButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/SSHButton/SSHButton.tsx b/site/src/components/SSHButton/SSHButton.tsx index 178a4ea210e93..7b2e8eea4ba84 100644 --- a/site/src/components/SSHButton/SSHButton.tsx +++ b/site/src/components/SSHButton/SSHButton.tsx @@ -55,7 +55,7 @@ export const SSHButton: React.FC = ({ }} > - To connect with SSH you have to run the following commands: + Run the following commands to connect with SSH: From c090d08e829886212f3cd649c67278444a0b260e Mon Sep 17 00:00:00 2001 From: Bruno Date: Tue, 12 Jul 2022 15:59:22 +0000 Subject: [PATCH 4/4] Update configure ssh label --- site/src/components/SSHButton/SSHButton.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/site/src/components/SSHButton/SSHButton.tsx b/site/src/components/SSHButton/SSHButton.tsx index 7b2e8eea4ba84..8a767cc93abbd 100644 --- a/site/src/components/SSHButton/SSHButton.tsx +++ b/site/src/components/SSHButton/SSHButton.tsx @@ -54,14 +54,17 @@ export const SSHButton: React.FC = ({ horizontal: "left", }} > - - Run the following commands to connect with SSH: - + Run the following commands to connect with SSH:
- Configure ssh + + Configure ssh{" "} + + - only needs to be run once, or after managing workspaces + +
@@ -99,4 +102,8 @@ const useStyles = makeStyles((theme) => ({ codeExampleLabel: { fontSize: 12, }, + + textHelper: { + fontWeight: 400, + }, }))