feat: add storybook for /deployments/general (#5595)

* refactor: split GeneralSettings page <> View

* feat: add story for generalsettingspageview

* Update site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx

Co-authored-by: Asher <ash@coder.com>

Co-authored-by: Asher <ash@coder.com>

site/src/AppRouter.tsx

@@ -71,7 +71,10 @@ const SettingsGroupPage = lazy(
   () => import("./pages/GroupsPage/SettingsGroupPage"),
 )
 const GeneralSettingsPage = lazy(
-  () => import("./pages/DeploySettingsPage/GeneralSettingsPage"),
+  () =>
+    import(
+      "./pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage"
+    ),
 )
 const SecuritySettingsPage = lazy(
   () => import("./pages/DeploySettingsPage/SecuritySettingsPage"),

site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx

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

site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx

@@ -0,0 +1,33 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import {
+  GeneralSettingsPageView,
+  GeneralSettingsPageViewProps,
+} from "./GeneralSettingsPageView"
+
+export default {
+  title: "pages/GeneralSettingsPageView",
+  component: GeneralSettingsPageView,
+  argTypes: {
+    deploymentConfig: {
+      defaultValue: {
+        access_url: {
+          name: "Access URL",
+          usage:
+            "External URL to access your deployment. This must be accessible by all provisioned workspaces.",
+          value: "https://dev.coder.com",
+        },
+        wildcard_access_url: {
+          name: "Wildcard Access URL",
+          usage:
+            'Specifies the wildcard hostname to use for workspace applications in the form "*.example.com".',
+          value: "*--apps.dev.coder.com",
+        },
+      },
+    },
+  },
+} as ComponentMeta<typeof GeneralSettingsPageView>
+
+const Template: Story<GeneralSettingsPageViewProps> = (args) => (
+  <GeneralSettingsPageView {...args} />
+)
+export const Page = Template.bind({})

site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx

@@ -1,18 +1,15 @@
-import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
+import { DeploymentConfig } from "api/typesGenerated"
 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 GeneralSettingsPage: React.FC = () => {
-  const { deploymentConfig: deploymentConfig } = useDeploySettings()
 
+export type GeneralSettingsPageViewProps = {
+  deploymentConfig: Pick<DeploymentConfig, "access_url" | "wildcard_access_url">
+}
+export const GeneralSettingsPageView = ({
+  deploymentConfig,
+}: GeneralSettingsPageViewProps): JSX.Element => {
   return (
     <>
-      <Helmet>
-        <title>{pageTitle("General Settings")}</title>
-      </Helmet>
       <Header
         title="General"
         description="Information about your Coder deployment."
@@ -27,5 +24,3 @@ const GeneralSettingsPage: React.FC = () => {
     </>
   )
 }
-
-export default GeneralSettingsPage