- Notifications
You must be signed in to change notification settings - Fork928
feat: Enable users to download the Coder CLI from the SSH button#5738
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Uh oh!
There was an error while loading.Please reload this page.
Changes fromall commits
File filter
Filter by extension
Conversations
Uh oh!
There was an error while loading.Please reload this page.
Jump to
Uh oh!
There was an error while loading.Please reload this page.
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -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<React.PropsWithChildren<SSHButtonProps>> = ({ | ||||||
| }) => { | ||||||
| const anchorRef = useRef<HTMLButtonElement>(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<React.PropsWithChildren<SSHButtonProps>> = ({ | ||||||
| </Stack> | ||||||
| <HelpTooltipLinksGroup> | ||||||
| <Link | ||||||
| onClick={() => setDownloadCLIOpen(!downloadCLIOpen)} | ||||||
| className={styles.link} | ||||||
| > | ||||||
| {downloadCLIOpen ? ( | ||||||
| <ExpandMoreIcon className={styles.linkIcon} /> | ||||||
| ) : ( | ||||||
| <ChevronRightIcon className={styles.linkIcon} /> | ||||||
Comment on lines +97 to +99 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. This looks really good, but I think maybe it should open a popup or something instead with some more details as to how to install the CLI. We should recommend GitHub releases by default, and only recommend this for airgapped users. We also have other ways of installing Coder like the install script, etc. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. | ||||||
| )} | ||||||
| <Typography | ||||||
| className={styles.downloadCLIButton} | ||||||
| onClick={() => setDownloadCLIOpen(!downloadCLIOpen)} | ||||||
| > | ||||||
| Download Coder CLI | ||||||
| </Typography> | ||||||
| </Link> | ||||||
| <Maybe condition={downloadCLIOpen}> | ||||||
| <div className={styles.downloadCLIOptionsDiv}> | ||||||
| <HelpTooltipLink href="/bin/coder-windows-amd64.exe"> | ||||||
| For Windows (AMD64) | ||||||
| </HelpTooltipLink> | ||||||
| <HelpTooltipLink href="/bin/coder-windows-arm64.exe"> | ||||||
| For Windows (ARM) | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. Suggested change
| ||||||
| </HelpTooltipLink> | ||||||
| <HelpTooltipLink href="/bin/coder-darwin-amd64"> | ||||||
| For Mac OS (Intel) | ||||||
| </HelpTooltipLink> | ||||||
| <HelpTooltipLink href="/bin/coder-darwin-arm64"> | ||||||
| For Mac OS (ARM) | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. Suggested change
| ||||||
| </HelpTooltipLink> | ||||||
| <HelpTooltipLink href="/bin/coder-linux-amd64"> | ||||||
| For Linux (AMD64) | ||||||
| </HelpTooltipLink> | ||||||
| <HelpTooltipLink href="/bin/coder-linux-arm64"> | ||||||
| For Linux (ARM64) | ||||||
| </HelpTooltipLink> | ||||||
| <HelpTooltipLink href="/bin/coder-linux-arm64"> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. Suggested change
| ||||||
| For Linux (ARMv7) | ||||||
| </HelpTooltipLink> | ||||||
Comment on lines +110 to +130 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. This should come from some typed constant array like: Then use a function to generate the filename and the text. | ||||||
| </div> | ||||||
| </Maybe> | ||||||
| <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#vs-code-remote"> | ||||||
| Connect via VS Code Remote SSH | ||||||
| </HelpTooltipLink> | ||||||
| @@ -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), | ||||||
| }, | ||||||
| })) | ||||||