Add storybooks

coder · Emyrk · Jun 28, 2023 · Jun 21, 2023 · Jun 21, 2023 · Jun 22, 2023
commit 08036e8cc3e916738822a4e59192e18364b6186b
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -212,5 +212,4 @@
   // We often use a version of TypeScript that's ahead of the version shipped
   // with VS Code.
   "typescript.tsdk": "./site/node_modules/typescript/lib",
-  "prettier.prettierPath": "./site/node_modules/prettier"
 }
diff --git a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx
@@ -1,5 +1,5 @@
 import TextField from "@mui/material/TextField"
-import { FormikContextType, FormikTouched, useFormik } from "formik"
+import { FormikContextType, useFormik } from "formik"
 import { FC } from "react"
 import * as Yup from "yup"
 import { getFormHelpers } from "../../utils/formUtils"
@@ -42,33 +42,31 @@ const validationSchema = Yup.object({
 })
 
 export interface SecurityFormProps {
-  disabled?: boolean
+  disabled: boolean
   isLoading: boolean
-  initialValues: SecurityFormValues
   onSubmit: (values: SecurityFormValues) => void
-  updateSecurityError?: Error | unknown
-  // initialTouched is only used for testing the error state of the form.
-  initialTouched?: FormikTouched<SecurityFormValues>
+  error?: unknown
 }
 
 export const SecurityForm: FC<SecurityFormProps> = ({
   disabled,
   isLoading,
   onSubmit,
-  initialValues,
-  updateSecurityError,
-  initialTouched,
+  error,
 }) => {
   const form: FormikContextType<SecurityFormValues> =
     useFormik<SecurityFormValues>({
-      initialValues,
+      initialValues: {
+        old_password: "",
+        password: "",
+        confirm_password: "",
+      },
       validationSchema,
       onSubmit,
-      initialTouched,
     })
   const getFieldHelpers = getFormHelpers<SecurityFormValues>(
     form,
-    updateSecurityError,
+    error,
   )
 
   if (disabled) {
@@ -83,8 +81,8 @@ export const SecurityForm: FC<SecurityFormProps> = ({
     <>
       <Form onSubmit={form.handleSubmit}>
         <FormFields>
-          {Boolean(updateSecurityError) && (
-            <ErrorAlert error={updateSecurityError} />
+          {Boolean(error) && (
+            <ErrorAlert error={error} />
           )}
           <TextField
             {...getFieldHelpers("old_password")}

diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx
@@ -1,6 +1,6 @@
 import { useMachine } from "@xstate/react"
 import { useMe } from "hooks/useMe"
-import { FC } from "react"
+import { ComponentProps, FC } from "react"
 import { userSecuritySettingsMachine } from "xServices/userSecuritySettings/userSecuritySettingsXService"
 import { Section } from "../../../components/SettingsLayout/Section"
 import { SecurityForm } from "../../../components/SettingsSecurityForm/SettingsSecurityForm"
@@ -35,26 +35,51 @@ export const SecurityPage: FC = () => {
   }
 
   return (
-    <Stack spacing={6}>
-      <Section title="Security" description="Update your account password">
-        <SecurityForm
-          disabled={authMethods.me_login_type !== "password"}
-          updateSecurityError={error}
-          isLoading={securityState.matches("updatingSecurity")}
-          initialValues={{
-            old_password: "",
-            password: "",
-            confirm_password: "",
-          }}
-          onSubmit={(data) => {
+    <SecurityPageView
+      security={{
+        form: {
+          disabled: authMethods.me_login_type !== "password",
+          error,
+          isLoading: securityState.matches("updatingSecurity"),
+          onSubmit: (data) => {
             securitySend({
               type: "UPDATE_SECURITY",
               data,
             })
-          }}
-        />
+          },
+        },
+      }}
+      oidc={
+        authMethods.convert_to_oidc_enabled
+          ? {
+              section: {
+                authMethods,
+                ...singleSignOnSection,
+              },
+            }
+          : undefined
+      }
+    />
+  )
+}
+
+export const SecurityPageView = ({
+  security,
+  oidc,
+}: {
+  security: {
+    form: ComponentProps<typeof SecurityForm>
+  }
+  oidc?: {
+    section: ComponentProps<typeof SingleSignOnSection>
+  }
+}) => {
+  return (
+    <Stack spacing={6}>
+      <Section title="Security" description="Update your account password">
+        <SecurityForm {...security.form} />
       </Section>
-      <SingleSignOnSection authMethods={authMethods} {...singleSignOnSection} />
+      {oidc && <SingleSignOnSection {...oidc.section} />}
     </Stack>
   )
 }

diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SecurityPageView.stories.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SecurityPageView.stories.tsx
@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { SecurityPageView } from "./SecurityPage"
+import { action } from "@storybook/addon-actions"
+import { MockAuthMethods } from "testHelpers/entities"
+import { ComponentProps } from "react"
+import set from "lodash/fp/set"
+import { AuthMethods } from "api/typesGenerated"
+
+const defaultArgs: ComponentProps<typeof SecurityPageView> = {
+  security: {
+    form: {
+      disabled: false,
+      error: undefined,
+      isLoading: false,
+      onSubmit: action("onSubmit"),
+    },
+  },
+  oidc: {
+    section: {
+      authMethods: MockAuthMethods,
+      closeConfirmation: action("closeConfirmation"),
+      confirm: action("confirm"),
+      error: undefined,
+      isConfirming: false,
+      isUpdating: false,
+      openConfirmation: action("openConfirmation"),
+    },
+  },
+}
+
+const meta: Meta<typeof SecurityPageView> = {
+  title: "pages/SecurityPageView",
+  component: SecurityPageView,
+  args: defaultArgs,
+}
+
+export default meta
+type Story = StoryObj<typeof SecurityPageView>
+
+export const Default: Story = {}
+
+export const NoOIDCAvailable: Story = {
+  args: {
+    ...defaultArgs,
+    oidc: undefined,
+  },
+}
+
+const authMethodsWithPassword: AuthMethods = {
+  ...MockAuthMethods,
+  me_login_type: "password",
+  github: { enabled: true },
+  oidc: { enabled: true, signInText: "", iconUrl: "" },
+}
+
+export const UserLoginTypeIsPassword: Story = {
+  args: set("oidc.section.authMethods", authMethodsWithPassword, defaultArgs),
+}
+
+export const ConfirmingOIDCConversion: Story = {
+  args: set(
+    "oidc.section",
+    {
+      ...defaultArgs.oidc?.section,
+      authMethods: authMethodsWithPassword,
+      isConfirming: true,
+    },
+    defaultArgs,
+  ),
+}
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
@@ -64,7 +64,6 @@ export const useSingleSignOnSection = () => {
   }
 
   return {
-    mutation,
     openConfirmation,
     closeConfirmation,
     confirm,

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -1021,6 +1021,7 @@ export const MockAuthMethods: TypesGen.AuthMethods = {
   password: { enabled: true },
   github: { enabled: false },
   oidc: { enabled: false, signInText: "", iconUrl: "" },
+  convert_to_oidc_enabled: true,
 }
 
 export const MockGitSSHKey: TypesGen.GitSSHKey = {