diff --git a/site/src/components/SSHButton/SSHButton.tsx b/site/src/components/SSHButton/SSHButton.tsx index 678557f36ae60..449adb219c8ee 100644 --- a/site/src/components/SSHButton/SSHButton.tsx +++ b/site/src/components/SSHButton/SSHButton.tsx @@ -1,7 +1,11 @@ import Button from "@material-ui/core/Button" import Popover from "@material-ui/core/Popover" +import Typography from "@material-ui/core/Typography" import { makeStyles } from "@material-ui/core/styles" import CloudIcon from "@material-ui/icons/CloudOutlined" +import ExpandMoreIcon from "@material-ui/icons/ExpandMore" +import ChevronRightIcon from "@material-ui/icons/ChevronRight" +import { Maybe } from "components/Conditionals/Maybe" import { useRef, useState } from "react" import { CodeExample } from "../CodeExample/CodeExample" import { Stack } from "../Stack/Stack" @@ -10,6 +14,7 @@ import { HelpTooltipLinksGroup, HelpTooltipText, } from "../Tooltips/HelpTooltip" +import Link from "@material-ui/core/Link" export interface SSHButtonProps { workspaceName: string @@ -24,6 +29,7 @@ export const SSHButton: React.FC> = ({ }) => { const anchorRef = useRef(null) const [isOpen, setIsOpen] = useState(defaultIsOpen) + const [downloadCLIOpen, setDownloadCLIOpen] = useState(false) const id = isOpen ? "schedule-popover" : undefined const styles = useStyles() @@ -83,9 +89,47 @@ export const SSHButton: React.FC> = ({ - - Install Coder CLI - + setDownloadCLIOpen(!downloadCLIOpen)} + className={styles.link} + > + {downloadCLIOpen ? ( + + ) : ( + + )} + setDownloadCLIOpen(!downloadCLIOpen)} + > + Download Coder CLI + + + +
+ + For Windows (AMD64) + + + For Windows (ARM) + + + For Mac OS (Intel) + + + For Mac OS (ARM) + + + For Linux (AMD64) + + + For Linux (ARM64) + + + For Linux (ARMv7) + +
+
Connect via VS Code Remote SSH @@ -122,4 +166,28 @@ const useStyles = makeStyles((theme) => ({ textHelper: { fontWeight: 400, }, + + downloadCLIButton: { + fontSize: 14, + }, + + downloadCLIOptionsDiv: { + display: "flex", + flexDirection: "column", + gap: 6, + marginLeft: theme.spacing(1), + }, + + link: { + display: "flex", + alignItems: "center", + cursor: "pointer", + }, + + linkIcon: { + width: 14, + height: 14, + transform: "scale(1.8)", + marginRight: theme.spacing(1), + }, }))