Skip to content

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.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

feat: Enable users to download the Coder CLI from the SSH button #5738

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 71 additions & 3 deletions site/src/components/SSHButton/SSHButton.tsx
View file
Open in desktop
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"
Expand All @@ -10,6 +14,7 @@ import {
HelpTooltipLinksGroup,
HelpTooltipText,
} from "../Tooltips/HelpTooltip"
import Link from "@material-ui/core/Link"

export interface SSHButtonProps {
workspaceName: string
Expand All @@ -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()

Expand Down Expand Up @@ -83,9 +89,47 @@ export const SSHButton: React.FC<React.PropsWithChildren<SSHButtonProps>> = ({
</Stack>

<HelpTooltipLinksGroup>
<HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/install">
Install Coder CLI
</HelpTooltipLink>
<Link
onClick={() => setDownloadCLIOpen(!downloadCLIOpen)}
className={styles.link}
>
{downloadCLIOpen ? (
<ExpandMoreIcon className={styles.linkIcon} />
) : (
<ChevronRightIcon className={styles.linkIcon} />
Comment on lines +97 to +99
Copy link
Member

Choose a reason for hiding this comment

The 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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@BrunoQuaresma ^

)}
<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)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
For Windows (ARM)
For Windows (ARM64)

</HelpTooltipLink>
<HelpTooltipLink href="/bin/coder-darwin-amd64">
For Mac OS (Intel)
</HelpTooltipLink>
<HelpTooltipLink href="/bin/coder-darwin-arm64">
For Mac OS (ARM)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
For Mac OS (ARM)
For Mac OS (ARM64)

</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">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<HelpTooltipLink href="/bin/coder-linux-arm64">
<HelpTooltipLink href="/bin/coder-linux-armv7">

For Linux (ARMv7)
</HelpTooltipLink>
Comment on lines +110 to +130
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should come from some typed constant array like:

interface CoderSlimBin {
  os: "windows" | "linux" | "darwin"
  arch: "amd64" | "arm64" | "armv7"
}

const SlimBins: CoderSlimBin[] = [
  ...
]

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>
Expand Down Expand Up @@ -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),
},
}))