feat: bundle a local version of install.sh, add CLI install page

coder · aslilac · Jan 15, 2025 · Jan 8, 2025 · Jan 10, 2025 · Jan 11, 2025
commit 430f807e1ef91714770883bfd0804fd8ea814a7b
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -65,7 +65,7 @@ export const CodeExample: FC<CodeExampleProps> = ({
 						</span>
 					</>
 				) : (
-					<>{code}</>
+					code
 				)}
 			</code>
 

diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
@@ -8,6 +8,7 @@ import AccountIcon from "@mui/icons-material/AccountCircleOutlined";
 import BugIcon from "@mui/icons-material/BugReportOutlined";
 import ChatIcon from "@mui/icons-material/ChatOutlined";
 import LogoutIcon from "@mui/icons-material/ExitToAppOutlined";
+import InstallDesktopIcon from "@mui/icons-material/InstallDesktop";
 import LaunchIcon from "@mui/icons-material/LaunchOutlined";
 import DocsIcon from "@mui/icons-material/MenuBook";
 import Divider from "@mui/material/Divider";
@@ -21,7 +22,6 @@ import { Stack } from "components/Stack/Stack";
 import { usePopover } from "components/deprecated/Popover/Popover";
 import type { FC } from "react";
 import { Link } from "react-router-dom";
-
 export const Language = {
 	accountLabel: "Account",
 	signOutLabel: "Sign Out",
@@ -76,6 +76,13 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
 
 			<Divider css={{ marginBottom: 8 }} />
 
+			<Link to="/install" css={styles.link}>
+				<MenuItem css={styles.menuItem} onClick={onPopoverClose}>
+					<InstallDesktopIcon css={styles.menuItemIcon} />
+					<span css={styles.menuItemText}>Install CLI</span>
+				</MenuItem>
+			</Link>
+
 			<Link to="/settings/account" css={styles.link}>
 				<MenuItem css={styles.menuItem} onClick={onPopoverClose}>
 					<AccountIcon css={styles.menuItemIcon} />

diff --git a/site/src/pages/CliInstallPage/CliInstallPage.tsx b/site/src/pages/CliInstallPage/CliInstallPage.tsx
@@ -0,0 +1,17 @@
+import type { FC } from "react";
+import { Helmet } from "react-helmet-async";
+import { pageTitle } from "utils/page";
+import { CliInstallPageView } from "./CliInstallPageView";
+
+export const CliInstallPage: FC = () => {
+	return (
+		<>
+			<Helmet>
+				<title>{pageTitle("Install the Coder CLI")}</title>
+			</Helmet>
+			<CliInstallPageView />
+		</>
+	);
+};
+
+export default CliInstallPage;
diff --git a/site/src/pages/CliInstallPage/CliInstallPageView.stories.tsx b/site/src/pages/CliInstallPage/CliInstallPageView.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CliInstallPageView } from "./CliInstallPageView";
+
+const meta: Meta<typeof CliInstallPageView> = {
+	title: "pages/CliAuthPage",
+	component: CliInstallPageView,
+	args: {
+		sessionToken: "some-session-token",
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof CliInstallPageView>;
+
+const Example: Story = {};
+
+export { Example as CliAuthPage };
diff --git a/site/src/pages/CliInstallPage/CliInstallPageView.tsx b/site/src/pages/CliInstallPage/CliInstallPageView.tsx
@@ -0,0 +1,60 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import { CodeExample } from "components/CodeExample/CodeExample";
+import { SignInLayout } from "components/SignInLayout/SignInLayout";
+import { Welcome } from "components/Welcome/Welcome";
+import type { FC } from "react";
+import { Link as RouterLink } from "react-router-dom";
+
+export const CliInstallPageView: FC = () => {
+	const origin = location.origin;
+
+	return (
+		<SignInLayout>
+			<Welcome className="pb-3">Install the Coder CLI</Welcome>
+
+			<p css={styles.instructions}>
+				Copy the command below and{" "}
+				<strong css={{ display: "block" }}>paste it in your terminal.</strong>
+			</p>
+
+			<CodeExample
+				code={`curl -fsSL ${origin}/install.sh | sh`}
+				secret={false}
+			/>
+
+			<div css={{ paddingTop: 16 }}>
+				<RouterLink to="/workspaces" css={styles.backLink}>
+					Go to workspaces
+				</RouterLink>
+			</div>
+		</SignInLayout>
+	);
+};
+
+const styles = {
+	instructions: (theme) => ({
+		fontSize: 16,
+		color: theme.palette.text.secondary,
+		paddingBottom: 8,
+		textAlign: "center",
+		lineHeight: 1.4,
+
+		// Have to undo styling side effects from <Welcome> component
+		marginTop: -24,
+	}),
+
+	backLink: (theme) => ({
+		display: "block",
+		textAlign: "center",
+		color: theme.palette.text.primary,
+		textDecoration: "underline",
+		textUnderlineOffset: 3,
+		textDecorationColor: "hsla(0deg, 0%, 100%, 0.7)",
+		paddingTop: 16,
+		paddingBottom: 16,
+
+		"&:hover": {
+			textDecoration: "none",
+		},
+	}),
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/router.tsx b/site/src/router.tsx
@@ -37,8 +37,9 @@ const DeploymentSettingsProvider = lazy(
 const OrganizationSettingsLayout = lazy(
 	() => import("./modules/management/OrganizationSettingsLayout"),
 );
-const CliAuthenticationPage = lazy(
-	() => import("./pages/CliAuthPage/CliAuthPage"),
+const CliAuthPage = lazy(() => import("./pages/CliAuthPage/CliAuthPage"));
+const CliInstallPage = lazy(
+	() => import("./pages/CliInstallPage/CliInstallPage"),
 );
 const AccountPage = lazy(
 	() => import("./pages/UserSettingsPage/AccountPage/AccountPage"),
@@ -539,6 +540,9 @@ export const router = createBrowserRouter(
 							element={<ProvisionerDaemonsHealthPage />}
 						/>
 					</Route>
+
+					<Route path="/install" element={<CliInstallPage />} />
+
 					{/* Using path="*"" means "match anything", so this route
               acts like a catch-all for URLs that we don't have explicit
               routes for. */}
@@ -559,7 +563,7 @@ export const router = createBrowserRouter(
 					path="/:username/:workspace/terminal"
 					element={<TerminalPage />}
 				/>
-				<Route path="/cli-auth" element={<CliAuthenticationPage />} />
+				<Route path="/cli-auth" element={<CliAuthPage />} />
 				<Route path="/icons" element={<IconsPage />} />
 			</Route>
 		</Route>,
-Original file line number
+Diff line change
@@ Expand Up / @@ -65,7 +65,7 @@ export const CodeExample: FC<CodeExampleProps> = ({ @@
     						</span>
     					</>
     				) : (
-    					<>{code}</>
+    					code
     				)}
     			</code>
@@ Expand Down @@