feat: add storybook for /deployment/gitauth (#5596)

* refactor: move GitAuthSettingsPage to dir

* refactor: split page and view GitAuthSettingsPage

* fixup!: formatting

* refactor: narrow props in git auth view

* feat: add storybook for GitAuthSettingsPageView

* fixup: formatting

site/src/AppRouter.tsx

@@ -89,7 +89,10 @@ 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"),

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

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({})

site/src/pages/DeploySettingsPage/GitAuthSettingsPage/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