Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitcd62e39

Browse files
authored
feat: add a page to showcase the local installation script (#16122)
1 parentd29ef9c commitcd62e39

File tree

6 files changed

+128
-8
lines changed

6 files changed

+128
-8
lines changed

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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import AccountIcon from "@mui/icons-material/AccountCircleOutlined";
88
importBugIconfrom"@mui/icons-material/BugReportOutlined";
99
importChatIconfrom"@mui/icons-material/ChatOutlined";
1010
importLogoutIconfrom"@mui/icons-material/ExitToAppOutlined";
11+
importInstallDesktopIconfrom"@mui/icons-material/InstallDesktop";
1112
importLaunchIconfrom"@mui/icons-material/LaunchOutlined";
1213
importDocsIconfrom"@mui/icons-material/MenuBook";
1314
importDividerfrom"@mui/material/Divider";
@@ -21,7 +22,6 @@ import { Stack } from "components/Stack/Stack";
2122
import{usePopover}from"components/deprecated/Popover/Popover";
2223
importtype{FC}from"react";
2324
import{Link}from"react-router-dom";
24-
2525
exportconstLanguage={
2626
accountLabel:"Account",
2727
signOutLabel:"Sign Out",
@@ -76,6 +76,13 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
7676

7777
<Dividercss={{marginBottom:8}}/>
7878

79+
<Linkto="/install"css={styles.link}>
80+
<MenuItemcss={styles.menuItem}onClick={onPopoverClose}>
81+
<InstallDesktopIconcss={styles.menuItemIcon}/>
82+
<spancss={styles.menuItemText}>Install CLI</span>
83+
</MenuItem>
84+
</Link>
85+
7986
<Linkto="/settings/account"css={styles.link}>
8087
<MenuItemcss={styles.menuItem}onClick={onPopoverClose}>
8188
<AccountIconcss={styles.menuItemIcon}/>
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
importtype{FC}from"react";
2+
import{Helmet}from"react-helmet-async";
3+
import{pageTitle}from"utils/page";
4+
import{CliInstallPageView}from"./CliInstallPageView";
5+
6+
exportconstCliInstallPage:FC=()=>{
7+
return(
8+
<>
9+
<Helmet>
10+
<title>{pageTitle("Install the Coder CLI")}</title>
11+
</Helmet>
12+
<CliInstallPageView/>
13+
</>
14+
);
15+
};
16+
17+
exportdefaultCliInstallPage;
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
importtype{Meta,StoryObj}from"@storybook/react";
2+
import{CliInstallPageView}from"./CliInstallPageView";
3+
4+
constmeta:Meta<typeofCliInstallPageView>={
5+
title:"pages/CliInstallPage",
6+
component:CliInstallPageView,
7+
};
8+
9+
exportdefaultmeta;
10+
typeStory=StoryObj<typeofCliInstallPageView>;
11+
12+
constExample:Story={};
13+
14+
export{ExampleasCliInstallPage};
Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
importtype{Interpolation,Theme}from"@emotion/react";
2+
import{CodeExample}from"components/CodeExample/CodeExample";
3+
import{Welcome}from"components/Welcome/Welcome";
4+
importtype{FC}from"react";
5+
import{LinkasRouterLink}from"react-router-dom";
6+
7+
exportconstCliInstallPageView:FC=()=>{
8+
constorigin=location.origin;
9+
10+
return(
11+
<divcss={styles.container}>
12+
<Welcome>Install the Coder CLI</Welcome>
13+
14+
<pcss={styles.instructions}>
15+
Copy the command below and{" "}
16+
<strongcss={{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+
<divcss={{paddingTop:16}}>
27+
<RouterLinkto="/workspaces"css={styles.backLink}>
28+
Go to workspaces
29+
</RouterLink>
30+
</div>
31+
<divcss={styles.copyright}>
32+
{"\u00a9"}{newDate().getFullYear()} Coder Technologies, Inc.
33+
</div>
34+
</div>
35+
);
36+
};
37+
38+
conststyles={
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+
}satisfiesRecord<string,Interpolation<Theme>>;

‎site/src/router.tsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,15 @@ const DeploymentSettingsLayout = lazy(
3434
constDeploymentSettingsProvider=lazy(
3535
()=>import("./modules/management/DeploymentSettingsProvider"),
3636
);
37-
constOrganizationSettingsLayout=lazy(
38-
()=>import("./modules/management/OrganizationSettingsLayout"),
39-
);
4037
constOrganizationSidebarLayout=lazy(
4138
()=>import("./modules/management/OrganizationSidebarLayout"),
4239
);
43-
constCliAuthenticationPage=lazy(
44-
()=>import("./pages/CliAuthPage/CliAuthPage"),
40+
constOrganizationSettingsLayout=lazy(
41+
()=>import("./modules/management/OrganizationSettingsLayout"),
42+
);
43+
constCliAuthPage=lazy(()=>import("./pages/CliAuthPage/CliAuthPage"));
44+
constCliInstallPage=lazy(
45+
()=>import("./pages/CliInstallPage/CliInstallPage"),
4546
);
4647
constAccountPage=lazy(
4748
()=>import("./pages/UserSettingsPage/AccountPage/AccountPage"),
@@ -542,6 +543,9 @@ export const router = createBrowserRouter(
542543
element={<ProvisionerDaemonsHealthPage/>}
543544
/>
544545
</Route>
546+
547+
<Routepath="/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-
<Routepath="/cli-auth"element={<CliAuthenticationPage/>}/>
569+
<Routepath="/cli-auth"element={<CliAuthPage/>}/>
566570
<Routepath="/icons"element={<IconsPage/>}/>
567571
</Route>
568572
</Route>,

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp