diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx index 35a7094ae3cc0..71ef7f951471e 100644 --- a/site/src/components/CodeExample/CodeExample.tsx +++ b/site/src/components/CodeExample/CodeExample.tsx @@ -65,7 +65,7 @@ export const CodeExample: FC = ({ ) : ( - <>{code} + code )} diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx index a6a3d2f3d0a1b..90ea1dab74a67 100644 --- 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 = ({ + + + + Install CLI + + + diff --git a/site/src/pages/CliInstallPage/CliInstallPage.tsx b/site/src/pages/CliInstallPage/CliInstallPage.tsx new file mode 100644 index 0000000000000..e9a7b4db3f343 --- /dev/null +++ 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 ( + <> + + {pageTitle("Install the Coder CLI")} + + + + ); +}; + +export default CliInstallPage; diff --git a/site/src/pages/CliInstallPage/CliInstallPageView.stories.tsx b/site/src/pages/CliInstallPage/CliInstallPageView.stories.tsx new file mode 100644 index 0000000000000..1140cd88c3c3e --- /dev/null +++ b/site/src/pages/CliInstallPage/CliInstallPageView.stories.tsx @@ -0,0 +1,14 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { CliInstallPageView } from "./CliInstallPageView"; + +const meta: Meta = { + title: "pages/CliInstallPage", + component: CliInstallPageView, +}; + +export default meta; +type Story = StoryObj; + +const Example: Story = {}; + +export { Example as CliInstallPage }; diff --git a/site/src/pages/CliInstallPage/CliInstallPageView.tsx b/site/src/pages/CliInstallPage/CliInstallPageView.tsx new file mode 100644 index 0000000000000..a5ec484430228 --- /dev/null +++ b/site/src/pages/CliInstallPage/CliInstallPageView.tsx @@ -0,0 +1,78 @@ +import type { Interpolation, Theme } from "@emotion/react"; +import { CodeExample } from "components/CodeExample/CodeExample"; +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 ( +
+ Install the Coder CLI + +

+ Copy the command below and{" "} + paste it in your terminal. +

+ + + +
+ + Go to workspaces + +
+
+ {"\u00a9"} {new Date().getFullYear()} Coder Technologies, Inc. +
+
+ ); +}; + +const styles = { + container: { + flex: 1, + height: "-webkit-fill-available", + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", + width: 480, + margin: "auto", + }, + + instructions: (theme) => ({ + fontSize: 16, + color: theme.palette.text.secondary, + paddingBottom: 8, + textAlign: "center", + lineHeight: 1.4, + }), + + 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", + }, + }), + + copyright: (theme) => ({ + fontSize: 12, + color: theme.palette.text.secondary, + marginTop: 24, + }), +} satisfies Record>; diff --git a/site/src/router.tsx b/site/src/router.tsx index 5ee3537575cb7..287bfd729f8e3 100644 --- a/site/src/router.tsx +++ b/site/src/router.tsx @@ -34,14 +34,15 @@ const DeploymentSettingsLayout = lazy( const DeploymentSettingsProvider = lazy( () => import("./modules/management/DeploymentSettingsProvider"), ); -const OrganizationSettingsLayout = lazy( - () => import("./modules/management/OrganizationSettingsLayout"), -); const OrganizationSidebarLayout = lazy( () => import("./modules/management/OrganizationSidebarLayout"), ); -const CliAuthenticationPage = lazy( - () => import("./pages/CliAuthPage/CliAuthPage"), +const OrganizationSettingsLayout = lazy( + () => import("./modules/management/OrganizationSettingsLayout"), +); +const CliAuthPage = lazy(() => import("./pages/CliAuthPage/CliAuthPage")); +const CliInstallPage = lazy( + () => import("./pages/CliInstallPage/CliInstallPage"), ); const AccountPage = lazy( () => import("./pages/UserSettingsPage/AccountPage/AccountPage"), @@ -542,6 +543,9 @@ export const router = createBrowserRouter( element={} /> + + } /> + {/* Using path="*"" means "match anything", so this route acts like a catch-all for URLs that we don't have explicit routes for. */} @@ -562,7 +566,7 @@ export const router = createBrowserRouter( path="/:username/:workspace/terminal" element={} /> - } /> + } /> } /> ,