Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit cd62e39

Browse files
aslilacaslilac
authored
feat: add a page to showcase the local installation script (#16122)
1 parent d29ef9c commit cd62e39

File tree

6 files changed

+128
-8
lines changed

6 files changed

+128
-8
lines changed

‎site/src/components/CodeExample/CodeExample.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const CodeExample: FC<CodeExampleProps> = ({
6565
</span>
6666
</>
6767
) : (
68-
<>{code}</>
68+
code
6969
)}
7070
</code>
7171

‎site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import AccountIcon from "@mui/icons-material/AccountCircleOutlined";
88
import BugIcon from "@mui/icons-material/BugReportOutlined";
99
import ChatIcon from "@mui/icons-material/ChatOutlined";
1010
import LogoutIcon from "@mui/icons-material/ExitToAppOutlined";
11+
import InstallDesktopIcon from "@mui/icons-material/InstallDesktop";
1112
import LaunchIcon from "@mui/icons-material/LaunchOutlined";
1213
import DocsIcon from "@mui/icons-material/MenuBook";
1314
import Divider from "@mui/material/Divider";
@@ -21,7 +22,6 @@ import { Stack } from "components/Stack/Stack";
2122
import { usePopover } from "components/deprecated/Popover/Popover";
2223
import type { FC } from "react";
2324
import { Link } from "react-router-dom";
24-
2525
export const Language = {
2626
accountLabel: "Account",
2727
signOutLabel: "Sign Out",
@@ -76,6 +76,13 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
7676

7777
<Divider css={{ marginBottom: 8 }} />
7878

79+
<Link to="/install" css={styles.link}>
80+
<MenuItem css={styles.menuItem} onClick={onPopoverClose}>
81+
<InstallDesktopIcon css={styles.menuItemIcon} />
82+
<span css={styles.menuItemText}>Install CLI</span>
83+
</MenuItem>
84+
</Link>
85+
7986
<Link to="/settings/account" css={styles.link}>
8087
<MenuItem css={styles.menuItem} onClick={onPopoverClose}>
8188
<AccountIcon css={styles.menuItemIcon} />

‎site/src/pages/CliInstallPage/CliInstallPage.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import type { FC } from "react";
2+
import { Helmet } from "react-helmet-async";
3+
import { pageTitle } from "utils/page";
4+
import { CliInstallPageView } from "./CliInstallPageView";
5+
6+
export const CliInstallPage: FC = () => {
7+
return (
8+
<>
9+
<Helmet>
10+
<title>{pageTitle("Install the Coder CLI")}</title>
11+
</Helmet>
12+
<CliInstallPageView />
13+
</>
14+
);
15+
};
16+
17+
export default CliInstallPage;

‎site/src/pages/CliInstallPage/CliInstallPageView.stories.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { CliInstallPageView } from "./CliInstallPageView";
3+
4+
const meta: Meta<typeof CliInstallPageView> = {
5+
title: "pages/CliInstallPage",
6+
component: CliInstallPageView,
7+
};
8+
9+
export default meta;
10+
type Story = StoryObj<typeof CliInstallPageView>;
11+
12+
const Example: Story = {};
13+
14+
export { Example as CliInstallPage };

‎site/src/pages/CliInstallPage/CliInstallPageView.tsx

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import type { Interpolation, Theme } from "@emotion/react";
2+
import { CodeExample } from "components/CodeExample/CodeExample";
3+
import { Welcome } from "components/Welcome/Welcome";
4+
import type { FC } from "react";
5+
import { Link as RouterLink } from "react-router-dom";
6+
7+
export const CliInstallPageView: FC = () => {
8+
const origin = location.origin;
9+
10+
return (
11+
<div css={styles.container}>
12+
<Welcome>Install the Coder CLI</Welcome>
13+
14+
<p css={styles.instructions}>
15+
Copy the command below and{" "}
16+
<strong css={{ display: "block" }}>paste it in your terminal.</strong>
17+
</p>
18+
19+
<CodeExample
20+
css={{ maxWidth: "100%" }}
21+
data-chromatic="ignore"
22+
code={`curl -fsSL ${origin}/install.sh | sh`}
23+
secret={false}
24+
/>
25+
26+
<div css={{ paddingTop: 16 }}>
27+
<RouterLink to="/workspaces" css={styles.backLink}>
28+
Go to workspaces
29+
</RouterLink>
30+
</div>
31+
<div css={styles.copyright}>
32+
{"\u00a9"} {new Date().getFullYear()} Coder Technologies, Inc.
33+
</div>
34+
</div>
35+
);
36+
};
37+
38+
const styles = {
39+
container: {
40+
flex: 1,
41+
height: "-webkit-fill-available",
42+
display: "flex",
43+
flexDirection: "column",
44+
justifyContent: "center",
45+
alignItems: "center",
46+
width: 480,
47+
margin: "auto",
48+
},
49+
50+
instructions: (theme) => ({
51+
fontSize: 16,
52+
color: theme.palette.text.secondary,
53+
paddingBottom: 8,
54+
textAlign: "center",
55+
lineHeight: 1.4,
56+
}),
57+
58+
backLink: (theme) => ({
59+
display: "block",
60+
textAlign: "center",
61+
color: theme.palette.text.primary,
62+
textDecoration: "underline",
63+
textUnderlineOffset: 3,
64+
textDecorationColor: "hsla(0deg, 0%, 100%, 0.7)",
65+
paddingTop: 16,
66+
paddingBottom: 16,
67+
68+
"&:hover": {
69+
textDecoration: "none",
70+
},
71+
}),
72+
73+
copyright: (theme) => ({
74+
fontSize: 12,
75+
color: theme.palette.text.secondary,
76+
marginTop: 24,
77+
}),
78+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/router.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,15 @@ const DeploymentSettingsLayout = lazy(
3434
const DeploymentSettingsProvider = lazy(
3535
() => import("./modules/management/DeploymentSettingsProvider"),
3636
);
37-
const OrganizationSettingsLayout = lazy(
38-
() => import("./modules/management/OrganizationSettingsLayout"),
39-
);
4037
const OrganizationSidebarLayout = lazy(
4138
() => import("./modules/management/OrganizationSidebarLayout"),
4239
);
43-
const CliAuthenticationPage = lazy(
44-
() => import("./pages/CliAuthPage/CliAuthPage"),
40+
const OrganizationSettingsLayout = lazy(
41+
() => import("./modules/management/OrganizationSettingsLayout"),
42+
);
43+
const CliAuthPage = lazy(() => import("./pages/CliAuthPage/CliAuthPage"));
44+
const CliInstallPage = lazy(
45+
() => import("./pages/CliInstallPage/CliInstallPage"),
4546
);
4647
const AccountPage = lazy(
4748
() => import("./pages/UserSettingsPage/AccountPage/AccountPage"),
@@ -542,6 +543,9 @@ export const router = createBrowserRouter(
542543
element={<ProvisionerDaemonsHealthPage />}
543544
/>
544545
</Route>
546+
547+
<Route path="/install" element={<CliInstallPage />} />
548+
545549
{/* Using path="*"" means "match anything", so this route
546550
acts like a catch-all for URLs that we don't have explicit
547551
routes for. */}
@@ -562,7 +566,7 @@ export const router = createBrowserRouter(
562566
path="/:username/:workspace/terminal"
563567
element={<TerminalPage />}
564568
/>
565-
<Route path="/cli-auth" element={<CliAuthenticationPage />} />
569+
<Route path="/cli-auth" element={<CliAuthPage />} />
566570
<Route path="/icons" element={<IconsPage />} />
567571
</Route>
568572
</Route>,

0 commit comments

Comments
 (0)