Merge branch 'main' of github.com:coder/coder into bq/refact-port-for…

…warding
coder · BrunoQuaresma · Jan 9, 2023 · Jan 6, 2023 · Jan 6, 2023 · Jan 9, 2023
commit 058c2042e4d67d8dcbbf8d7ed9b2280a28267df3
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -89,10 +89,16 @@ const UserAuthSettingsPage = lazy(
   () => import("./pages/DeploySettingsPage/UserAuthSettingsPage"),
 )
 const GitAuthSettingsPage = lazy(
-  () => import("./pages/DeploySettingsPage/GitAuthSettingsPage"),
+  () =>
+    import(
+      "./pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPage"
+    ),
 )
 const NetworkSettingsPage = lazy(
-  () => import("./pages/DeploySettingsPage/NetworkSettingsPage"),
+  () =>
+    import(
+      "./pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPage"
+    ),
 )
 const GitAuthPage = lazy(() => import("./pages/GitAuthPage/GitAuthPage"))
 const TemplateVersionPage = lazy(

diff --git a/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPage.tsx b/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPage.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 { GitAuthSettingsPageView } from "./GitAuthSettingsPageView"
+
+const GitAuthSettingsPage: React.FC = () => {
+  const { deploymentConfig: deploymentConfig } = useDeploySettings()
+
+  return (
+    <>
+      <Helmet>
+        <title>{pageTitle("Git Authentication Settings")}</title>
+      </Helmet>
+
+      <GitAuthSettingsPageView deploymentConfig={deploymentConfig} />
+    </>
+  )
+}
+
+export default GitAuthSettingsPage
diff --git a/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.stories.tsx
@@ -0,0 +1,31 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import {
+  GitAuthSettingsPageView,
+  GitAuthSettingsPageViewProps,
+} from "./GitAuthSettingsPageView"
+
+export default {
+  title: "pages/GitAuthSettingsPageView",
+  component: GitAuthSettingsPageView,
+  argTypes: {
+    deploymentConfig: {
+      defaultValue: {
+        gitauth: {
+          name: "Git Auth",
+          usage: "Automatically authenticate Git inside workspaces.",
+          value: [
+            {
+              id: "123",
+              client_id: "575",
+            },
+          ],
+        },
+      },
+    },
+  },
+} as ComponentMeta<typeof GitAuthSettingsPageView>
+
+const Template: Story<GitAuthSettingsPageViewProps> = (args) => (
+  <GitAuthSettingsPageView {...args} />
+)
+export const Page = Template.bind({})
diff --git a/...eploySettingsPage/GitAuthSettingsPage.tsx → ...hSettingsPage/GitAuthSettingsPageView.tsx b/...eploySettingsPage/GitAuthSettingsPage.tsx → ...hSettingsPage/GitAuthSettingsPageView.tsx
@@ -5,24 +5,22 @@ import TableCell from "@material-ui/core/TableCell"
 import TableContainer from "@material-ui/core/TableContainer"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
+import { DeploymentConfig } from "api/typesGenerated"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { EnterpriseBadge } from "components/DeploySettingsLayout/Badges"
-import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
 import { Header } from "components/DeploySettingsLayout/Header"
-import React from "react"
-import { Helmet } from "react-helmet-async"
-import { pageTitle } from "util/page"
 
-const GitAuthSettingsPage: React.FC = () => {
+export type GitAuthSettingsPageViewProps = {
+  deploymentConfig: Pick<DeploymentConfig, "gitauth">
+}
+
+export const GitAuthSettingsPageView = ({
+  deploymentConfig,
+}: GitAuthSettingsPageViewProps): JSX.Element => {
   const styles = useStyles()
-  const { deploymentConfig: deploymentConfig } = useDeploySettings()
 
   return (
     <>
-      <Helmet>
-        <title>{pageTitle("Git Authentication Settings")}</title>
-      </Helmet>
-
       <Header
         title="Git Authentication"
         description="Coder integrates with GitHub, GitLab, BitBucket, and Azure Repos to authenticate developers with your Git provider."
@@ -105,5 +103,3 @@ const useStyles = makeStyles((theme) => ({
     textAlign: "center",
   },
 }))
-
-export default GitAuthSettingsPage
diff --git a/site/src/pages/DeploySettingsPage/NetworkSettingsPage.tsx b/site/src/pages/DeploySettingsPage/NetworkSettingsPage.tsx
diff --git a/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx b/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
@@ -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({})
@@ -0,0 +1,53 @@
+import { DeploymentConfig } from "api/typesGenerated"
+import {
+  Badges,
+  EnabledBadge,
+  DisabledBadge,
+} from "components/DeploySettingsLayout/Badges"
+import { Header } from "components/DeploySettingsLayout/Header"
+import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
+import { Stack } from "components/Stack/Stack"
+
+export type NetworkSettingsPageViewProps = {
+  deploymentConfig: Pick<DeploymentConfig, "derp" | "wildcard_access_url">
+}
+
+export const NetworkSettingsPageView = ({
+  deploymentConfig,
+}: NetworkSettingsPageViewProps): JSX.Element => (
+  <Stack direction="column" spacing={6}>
+    <div>
+      <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,
+        }}
+      />
+    </div>
+
+    <div>
+      <Header
+        title="Port Forwarding"
+        secondary
+        description="Port forwarding lets developers securely access processes on their Coder workspace from a local machine."
+        docsHref="https://coder.com/docs/coder-oss/latest/networking/port-forwarding"
+      />
+
+      <Badges>
+        {deploymentConfig.wildcard_access_url.value !== "" ? (
+          <EnabledBadge />
+        ) : (
+          <DisabledBadge />
+        )}
+      </Badges>
+    </div>
+  </Stack>
+)