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

Skip to content

Commit 763147e

Browse files
jsjoeiojsjoeio
authored
feat: add storybook for /deployment/network (#5603)
* refactor: move NetworkSettingsPage to dir * refactor: split page/view NetworkSettings * feat: add storybook for NetworkSettingsPage
1 parent 242676b commit 763147e

File tree

5 files changed

+103
-37
lines changed

5 files changed

+103
-37
lines changed

‎site/src/AppRouter.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,10 @@ const GitAuthSettingsPage = lazy(
9595
),
9696
)
9797
const NetworkSettingsPage = lazy(
98-
() => import("./pages/DeploySettingsPage/NetworkSettingsPage"),
98+
() =>
99+
import(
100+
"./pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPage"
101+
),
99102
)
100103
const GitAuthPage = lazy(() => import("./pages/GitAuthPage/GitAuthPage"))
101104
const TemplateVersionPage = lazy(

‎site/src/pages/DeploySettingsPage/NetworkSettingsPage.tsx

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
2+
import React from "react"
3+
import { Helmet } from "react-helmet-async"
4+
import { pageTitle } from "util/page"
5+
import { NetworkSettingsPageView } from "./NetworkSettingsPageView"
6+
7+
const NetworkSettingsPage: React.FC = () => {
8+
const { deploymentConfig: deploymentConfig } = useDeploySettings()
9+
10+
return (
11+
<>
12+
<Helmet>
13+
<title>{pageTitle("Network Settings")}</title>
14+
</Helmet>
15+
16+
<NetworkSettingsPageView deploymentConfig={deploymentConfig} />
17+
</>
18+
)
19+
}
20+
21+
export default NetworkSettingsPage

‎site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.stories.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { ComponentMeta, Story } from "@storybook/react"
2+
import {
3+
NetworkSettingsPageView,
4+
NetworkSettingsPageViewProps,
5+
} from "./NetworkSettingsPageView"
6+
7+
export default {
8+
title: "pages/NetworkSettingsPageView",
9+
component: NetworkSettingsPageView,
10+
argTypes: {
11+
deploymentConfig: {
12+
defaultValue: {
13+
derp: {
14+
server: {
15+
enable: {
16+
name: "DERP Server Enable",
17+
usage:
18+
"Whether to enable or disable the embedded DERP relay server.",
19+
value: true,
20+
},
21+
region_name: {
22+
name: "DERP Server Region Name",
23+
usage: "Region name that for the embedded DERP server.",
24+
value: "aws-east",
25+
},
26+
stun_addresses: {
27+
name: "DERP Server STUN Addresses",
28+
usage:
29+
"Addresses for STUN servers to establish P2P connections. Set empty to disable P2P connections.",
30+
value: ["stun.l.google.com:19302", "stun.l.google.com:19301"],
31+
},
32+
},
33+
config: {
34+
url: {
35+
name: "DERP Config URL",
36+
usage:
37+
"URL to fetch a DERP mapping on startup. See: https://tailscale.com/kb/1118/custom-derp-servers/",
38+
value: "https://coder.com",
39+
},
40+
},
41+
},
42+
},
43+
},
44+
},
45+
} as ComponentMeta<typeof NetworkSettingsPageView>
46+
47+
const Template: Story<NetworkSettingsPageViewProps> = (args) => (
48+
<NetworkSettingsPageView {...args} />
49+
)
50+
export const Page = Template.bind({})

‎site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { DeploymentConfig } from "api/typesGenerated"
2+
import { Header } from "components/DeploySettingsLayout/Header"
3+
import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
4+
5+
export type NetworkSettingsPageViewProps = {
6+
deploymentConfig: Pick<DeploymentConfig, "derp">
7+
}
8+
9+
export const NetworkSettingsPageView = ({
10+
deploymentConfig,
11+
}: NetworkSettingsPageViewProps): JSX.Element => (
12+
<>
13+
<Header
14+
title="Network"
15+
description="Configure your deployment connectivity."
16+
docsHref="https://coder.com/docs/coder-oss/latest/networking"
17+
/>
18+
19+
<OptionsTable
20+
options={{
21+
derp_server_enable: deploymentConfig.derp.server.enable,
22+
derp_server_region_name: deploymentConfig.derp.server.region_name,
23+
derp_server_stun_addresses: deploymentConfig.derp.server.stun_addresses,
24+
derp_config_url: deploymentConfig.derp.config.url,
25+
}}
26+
/>
27+
</>
28+
)

0 commit comments

Comments
 (0)