feat: add storybook for /deployment/network (#5603)

* refactor: move NetworkSettingsPage to dir

* refactor: split page/view NetworkSettings

* feat: add storybook for NetworkSettingsPage

site/src/AppRouter.tsx

@@ -95,7 +95,10 @@ const GitAuthSettingsPage = lazy(
     ),
 )
 const NetworkSettingsPage = lazy(
-  () => import("./pages/DeploySettingsPage/NetworkSettingsPage"),
+  () =>
+    import(
+      "./pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPage"
+    ),
 )
 const GitAuthPage = lazy(() => import("./pages/GitAuthPage/GitAuthPage"))
 const TemplateVersionPage = lazy(

site/src/pages/DeploySettingsPage/NetworkSettingsPage.tsx

@@ -1,36 +0,0 @@
-import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
-import { Header } from "components/DeploySettingsLayout/Header"
-import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
-import React from "react"
-import { Helmet } from "react-helmet-async"
-import { pageTitle } from "util/page"
-
-const NetworkSettingsPage: React.FC = () => {
-  const { deploymentConfig: deploymentConfig } = useDeploySettings()
-
-  return (
-    <>
-      <Helmet>
-        <title>{pageTitle("Network Settings")}</title>
-      </Helmet>
-
-      <Header
-        title="Network"
-        description="Configure your deployment connectivity."
-        docsHref="https://coder.com/docs/coder-oss/latest/networking"
-      />
-
-      <OptionsTable
-        options={{
-          derp_server_enable: deploymentConfig.derp.server.enable,
-          derp_server_region_name: deploymentConfig.derp.server.region_name,
-          derp_server_stun_addresses:
-            deploymentConfig.derp.server.stun_addresses,
-          derp_config_url: deploymentConfig.derp.config.url,
-        }}
-      />
-    </>
-  )
-}
-
-export default NetworkSettingsPage

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

@@ -0,0 +1,21 @@
+import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
+import React from "react"
+import { Helmet } from "react-helmet-async"
+import { pageTitle } from "util/page"
+import { NetworkSettingsPageView } from "./NetworkSettingsPageView"
+
+const NetworkSettingsPage: React.FC = () => {
+  const { deploymentConfig: deploymentConfig } = useDeploySettings()
+
+  return (
+    <>
+      <Helmet>
+        <title>{pageTitle("Network Settings")}</title>
+      </Helmet>
+
+      <NetworkSettingsPageView deploymentConfig={deploymentConfig} />
+    </>
+  )
+}
+
+export default NetworkSettingsPage

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

@@ -0,0 +1,50 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import {
+  NetworkSettingsPageView,
+  NetworkSettingsPageViewProps,
+} from "./NetworkSettingsPageView"
+
+export default {
+  title: "pages/NetworkSettingsPageView",
+  component: NetworkSettingsPageView,
+  argTypes: {
+    deploymentConfig: {
+      defaultValue: {
+        derp: {
+          server: {
+            enable: {
+              name: "DERP Server Enable",
+              usage:
+                "Whether to enable or disable the embedded DERP relay server.",
+              value: true,
+            },
+            region_name: {
+              name: "DERP Server Region Name",
+              usage: "Region name that for the embedded DERP server.",
+              value: "aws-east",
+            },
+            stun_addresses: {
+              name: "DERP Server STUN Addresses",
+              usage:
+                "Addresses for STUN servers to establish P2P connections. Set empty to disable P2P connections.",
+              value: ["stun.l.google.com:19302", "stun.l.google.com:19301"],
+            },
+          },
+          config: {
+            url: {
+              name: "DERP Config URL",
+              usage:
+                "URL to fetch a DERP mapping on startup. See: https://tailscale.com/kb/1118/custom-derp-servers/",
+              value: "https://coder.com",
+            },
+          },
+        },
+      },
+    },
+  },
+} as ComponentMeta<typeof NetworkSettingsPageView>
+
+const Template: Story<NetworkSettingsPageViewProps> = (args) => (
+  <NetworkSettingsPageView {...args} />
+)
+export const Page = Template.bind({})

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

@@ -0,0 +1,28 @@
+import { DeploymentConfig } from "api/typesGenerated"
+import { Header } from "components/DeploySettingsLayout/Header"
+import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
+
+export type NetworkSettingsPageViewProps = {
+  deploymentConfig: Pick<DeploymentConfig, "derp">
+}
+
+export const NetworkSettingsPageView = ({
+  deploymentConfig,
+}: NetworkSettingsPageViewProps): JSX.Element => (
+  <>
+    <Header
+      title="Network"
+      description="Configure your deployment connectivity."
+      docsHref="https://coder.com/docs/coder-oss/latest/networking"
+    />
+
+    <OptionsTable
+      options={{
+        derp_server_enable: deploymentConfig.derp.server.enable,
+        derp_server_region_name: deploymentConfig.derp.server.region_name,
+        derp_server_stun_addresses: deploymentConfig.derp.server.stun_addresses,
+        derp_config_url: deploymentConfig.derp.config.url,
+      }}
+    />
+  </>
+)