feat: add storybook for /deployment/userauth (#5609)

* refactor: move deploysettingspage to dir

* refactor: split page/view UserAuthSettings

* feat: add storybook for user auth

* Update site/src/components/DeploySettingsLayout/OptionsTable.tsx

site/src/AppRouter.tsx

@@ -86,7 +86,10 @@ const AppearanceSettingsPage = lazy(
     ),
 )
 const UserAuthSettingsPage = lazy(
-  () => import("./pages/DeploySettingsPage/UserAuthSettingsPage"),
+  () =>
+    import(
+      "./pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage"
+    ),
 )
 const GitAuthSettingsPage = lazy(
   () =>

site/src/pages/DeploySettingsPage/UserAuthSettingsPage.tsx

@@ -1,85 +0,0 @@
-import {
-  Badges,
-  DisabledBadge,
-  EnabledBadge,
-} from "components/DeploySettingsLayout/Badges"
-import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
-import { Header } from "components/DeploySettingsLayout/Header"
-import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
-import { Stack } from "components/Stack/Stack"
-import React from "react"
-import { Helmet } from "react-helmet-async"
-import { pageTitle } from "util/page"
-
-const UserAuthSettingsPage: React.FC = () => {
-  const { deploymentConfig: deploymentConfig } = useDeploySettings()
-
-  return (
-    <>
-      <Helmet>
-        <title>{pageTitle("User Authentication Settings")}</title>
-      </Helmet>
-
-      <Stack direction="column" spacing={6}>
-        <div>
-          <Header title="User Authentication" />
-
-          <Header
-            title="Login with OpenID Connect"
-            secondary
-            description="Set up authentication to login with OpenID Connect."
-            docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#openid-connect-with-google"
-          />
-
-          <Badges>
-            {deploymentConfig.oidc.client_id.value ? (
-              <EnabledBadge />
-            ) : (
-              <DisabledBadge />
-            )}
-          </Badges>
-
-          <OptionsTable
-            options={{
-              client_id: deploymentConfig.oidc.client_id,
-              allow_signups: deploymentConfig.oidc.allow_signups,
-              email_domain: deploymentConfig.oidc.email_domain,
-              issuer_url: deploymentConfig.oidc.issuer_url,
-              scopes: deploymentConfig.oidc.scopes,
-            }}
-          />
-        </div>
-
-        <div>
-          <Header
-            title="Login with GitHub"
-            secondary
-            description="Set up authentication to login with GitHub."
-            docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#github"
-          />
-
-          <Badges>
-            {deploymentConfig.oauth2.github.client_id.value ? (
-              <EnabledBadge />
-            ) : (
-              <DisabledBadge />
-            )}
-          </Badges>
-
-          <OptionsTable
-            options={{
-              client_id: deploymentConfig.oauth2.github.client_id,
-              allow_signups: deploymentConfig.oauth2.github.allow_signups,
-              allowed_orgs: deploymentConfig.oauth2.github.allowed_orgs,
-              allowed_teams: deploymentConfig.oauth2.github.allowed_teams,
-              enterprise_base_url:
-                deploymentConfig.oauth2.github.enterprise_base_url,
-            }}
-          />
-        </div>
-      </Stack>
-    </>
-  )
-}
-
-export default UserAuthSettingsPage

site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.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 { UserAuthSettingsPageView } from "./UserAuthSettingsPageView"
+
+const UserAuthSettingsPage: React.FC = () => {
+  const { deploymentConfig: deploymentConfig } = useDeploySettings()
+
+  return (
+    <>
+      <Helmet>
+        <title>{pageTitle("User Authentication Settings")}</title>
+      </Helmet>
+
+      <UserAuthSettingsPageView deploymentConfig={deploymentConfig} />
+    </>
+  )
+}
+
+export default UserAuthSettingsPage

site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx

@@ -0,0 +1,81 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import {
+  UserAuthSettingsPageView,
+  UserAuthSettingsPageViewProps,
+} from "./UserAuthSettingsPageView"
+
+export default {
+  title: "pages/UserAuthSettingsPageView",
+  component: UserAuthSettingsPageView,
+  argTypes: {
+    deploymentConfig: {
+      defaultValue: {
+        oidc: {
+          client_id: {
+            name: "OIDC Client ID",
+            usage: "Client ID to use for Login with OIDC.",
+            value: "1234",
+          },
+          allow_signups: {
+            name: "OIDC Allow Signups",
+            usage: "Whether new users can sign up with OIDC.",
+            value: true,
+          },
+          email_domain: {
+            name: "OIDC Email Domain",
+            usage:
+              "Email domains that clients logging in with OIDC must match.",
+            value: "@coder.com",
+          },
+          issuer_url: {
+            name: "OIDC Issuer URL",
+            usage: "Issuer URL to use for Login with OIDC.",
+            value: "https://coder.com",
+          },
+          scopes: {
+            name: "OIDC Scopes",
+            usage: "Scopes to grant when authenticating with OIDC.",
+            value: ["idk"],
+          },
+        },
+        oauth2: {
+          github: {
+            client_id: {
+              name: "OAuth2 GitHub Client ID",
+              usage: "Client ID for Login with GitHub.",
+              value: "1224",
+            },
+            allow_signups: {
+              name: "OAuth2 GitHub Allow Signups",
+              usage: "Whether new users can sign up with GitHub.",
+              value: true,
+            },
+            enterprise_base_url: {
+              name: "OAuth2 GitHub Enterprise Base URL",
+              usage:
+                "Base URL of a GitHub Enterprise deployment to use for Login with GitHub.",
+              value: "https://google.com",
+            },
+            allowed_orgs: {
+              name: "OAuth2 GitHub Allowed Orgs",
+              usage:
+                "Organizations the user must be a member of to Login with GitHub.",
+              value: true,
+            },
+            allowed_teams: {
+              name: "OAuth2 GitHub Allowed Teams",
+              usage:
+                "Teams inside organizations the user must be a member of to Login with GitHub. Structured as: <organization-name>/<team-slug>.",
+              value: true,
+            },
+          },
+        },
+      },
+    },
+  },
+} as ComponentMeta<typeof UserAuthSettingsPageView>
+
+const Template: Story<UserAuthSettingsPageViewProps> = (args) => (
+  <UserAuthSettingsPageView {...args} />
+)
+export const Page = Template.bind({})

site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx

@@ -0,0 +1,78 @@
+import { DeploymentConfig } from "api/typesGenerated"
+import {
+  Badges,
+  DisabledBadge,
+  EnabledBadge,
+} from "components/DeploySettingsLayout/Badges"
+import { Header } from "components/DeploySettingsLayout/Header"
+import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
+import { Stack } from "components/Stack/Stack"
+
+export type UserAuthSettingsPageViewProps = {
+  deploymentConfig: Pick<DeploymentConfig, "oidc" | "oauth2">
+}
+
+export const UserAuthSettingsPageView = ({
+  deploymentConfig,
+}: UserAuthSettingsPageViewProps): JSX.Element => (
+  <>
+    <Stack direction="column" spacing={6}>
+      <div>
+        <Header title="User Authentication" />
+
+        <Header
+          title="Login with OpenID Connect"
+          secondary
+          description="Set up authentication to login with OpenID Connect."
+          docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#openid-connect-with-google"
+        />
+
+        <Badges>
+          {deploymentConfig.oidc.client_id.value ? (
+            <EnabledBadge />
+          ) : (
+            <DisabledBadge />
+          )}
+        </Badges>
+
+        <OptionsTable
+          options={{
+            client_id: deploymentConfig.oidc.client_id,
+            allow_signups: deploymentConfig.oidc.allow_signups,
+            email_domain: deploymentConfig.oidc.email_domain,
+            issuer_url: deploymentConfig.oidc.issuer_url,
+            scopes: deploymentConfig.oidc.scopes,
+          }}
+        />
+      </div>
+
+      <div>
+        <Header
+          title="Login with GitHub"
+          secondary
+          description="Set up authentication to login with GitHub."
+          docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#github"
+        />
+
+        <Badges>
+          {deploymentConfig.oauth2.github.client_id.value ? (
+            <EnabledBadge />
+          ) : (
+            <DisabledBadge />
+          )}
+        </Badges>
+
+        <OptionsTable
+          options={{
+            client_id: deploymentConfig.oauth2.github.client_id,
+            allow_signups: deploymentConfig.oauth2.github.allow_signups,
+            allowed_orgs: deploymentConfig.oauth2.github.allowed_orgs,
+            allowed_teams: deploymentConfig.oauth2.github.allowed_teams,
+            enterprise_base_url:
+              deploymentConfig.oauth2.github.enterprise_base_url,
+          }}
+        />
+      </div>
+    </Stack>
+  </>
+)