Skip to content

Commit 85d73b7

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Add storybooks
1 parent 134f152 commit 85d73b7

File tree

6 files changed

+124
-32
lines changed

6 files changed

+124
-32
lines changed

‎.vscode/settings.json

-1
Original file line numberDiff line numberDiff line change
@@ -212,5 +212,4 @@
212212
// We often use a version of TypeScript that's ahead of the version shipped
213213
// with VS Code.
214214
"typescript.tsdk": "./site/node_modules/typescript/lib",
215-
"prettier.prettierPath": "./site/node_modules/prettier"
216215
}

‎site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx

+12-14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import TextField from "@mui/material/TextField"
2-
import { FormikContextType, FormikTouched, useFormik } from "formik"
2+
import { FormikContextType, useFormik } from "formik"
33
import { FC } from "react"
44
import * as Yup from "yup"
55
import { getFormHelpers } from "../../utils/formUtils"
@@ -42,33 +42,31 @@ const validationSchema = Yup.object({
4242
})
4343

4444
export interface SecurityFormProps {
45-
disabled?: boolean
45+
disabled: boolean
4646
isLoading: boolean
47-
initialValues: SecurityFormValues
4847
onSubmit: (values: SecurityFormValues) => void
49-
updateSecurityError?: Error | unknown
50-
// initialTouched is only used for testing the error state of the form.
51-
initialTouched?: FormikTouched<SecurityFormValues>
48+
error?: unknown
5249
}
5350

5451
export const SecurityForm: FC<SecurityFormProps> = ({
5552
disabled,
5653
isLoading,
5754
onSubmit,
58-
initialValues,
59-
updateSecurityError,
60-
initialTouched,
55+
error,
6156
}) => {
6257
const form: FormikContextType<SecurityFormValues> =
6358
useFormik<SecurityFormValues>({
64-
initialValues,
59+
initialValues: {
60+
old_password: "",
61+
password: "",
62+
confirm_password: "",
63+
},
6564
validationSchema,
6665
onSubmit,
67-
initialTouched,
6866
})
6967
const getFieldHelpers = getFormHelpers<SecurityFormValues>(
7068
form,
71-
updateSecurityError,
69+
error,
7270
)
7371

7472
if (disabled) {
@@ -83,8 +81,8 @@ export const SecurityForm: FC<SecurityFormProps> = ({
8381
<>
8482
<Form onSubmit={form.handleSubmit}>
8583
<FormFields>
86-
{Boolean(updateSecurityError) && (
87-
<ErrorAlert error={updateSecurityError} />
84+
{Boolean(error) && (
85+
<ErrorAlert error={error} />
8886
)}
8987
<TextField
9088
{...getFieldHelpers("old_password")}

‎site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx

+41-16
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useMachine } from "@xstate/react"
22
import { useMe } from "hooks/useMe"
3-
import { FC } from "react"
3+
import { ComponentProps, FC } from "react"
44
import { userSecuritySettingsMachine } from "xServices/userSecuritySettings/userSecuritySettingsXService"
55
import { Section } from "../../../components/SettingsLayout/Section"
66
import { SecurityForm } from "../../../components/SettingsSecurityForm/SettingsSecurityForm"
@@ -35,26 +35,51 @@ export const SecurityPage: FC = () => {
3535
}
3636

3737
return (
38-
<Stack spacing={6}>
39-
<Section title="Security" description="Update your account password">
40-
<SecurityForm
41-
disabled={authMethods.me_login_type !== "password"}
42-
updateSecurityError={error}
43-
isLoading={securityState.matches("updatingSecurity")}
44-
initialValues={{
45-
old_password: "",
46-
password: "",
47-
confirm_password: "",
48-
}}
49-
onSubmit={(data) => {
38+
<SecurityPageView
39+
security={{
40+
form: {
41+
disabled: authMethods.me_login_type !== "password",
42+
error,
43+
isLoading: securityState.matches("updatingSecurity"),
44+
onSubmit: (data) => {
5045
securitySend({
5146
type: "UPDATE_SECURITY",
5247
data,
5348
})
54-
}}
55-
/>
49+
},
50+
},
51+
}}
52+
oidc={
53+
authMethods.convert_to_oidc_enabled
54+
? {
55+
section: {
56+
authMethods,
57+
...singleSignOnSection,
58+
},
59+
}
60+
: undefined
61+
}
62+
/>
63+
)
64+
}
65+
66+
export const SecurityPageView = ({
67+
security,
68+
oidc,
69+
}: {
70+
security: {
71+
form: ComponentProps<typeof SecurityForm>
72+
}
73+
oidc?: {
74+
section: ComponentProps<typeof SingleSignOnSection>
75+
}
76+
}) => {
77+
return (
78+
<Stack spacing={6}>
79+
<Section title="Security" description="Update your account password">
80+
<SecurityForm {...security.form} />
5681
</Section>
57-
<SingleSignOnSection authMethods={authMethods} {...singleSignOnSection} />
82+
{oidc && <SingleSignOnSection {...oidc.section} />}
5883
</Stack>
5984
)
6085
}

‎site/src/pages/UserSettingsPage/SecurityPage/SecurityPageView.stories.tsx

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import type { Meta, StoryObj } from "@storybook/react"
2+
import { SecurityPageView } from "./SecurityPage"
3+
import { action } from "@storybook/addon-actions"
4+
import { MockAuthMethods } from "testHelpers/entities"
5+
import { ComponentProps } from "react"
6+
import set from "lodash/fp/set"
7+
import { AuthMethods } from "api/typesGenerated"
8+
9+
const defaultArgs: ComponentProps<typeof SecurityPageView> = {
10+
security: {
11+
form: {
12+
disabled: false,
13+
error: undefined,
14+
isLoading: false,
15+
onSubmit: action("onSubmit"),
16+
},
17+
},
18+
oidc: {
19+
section: {
20+
authMethods: MockAuthMethods,
21+
closeConfirmation: action("closeConfirmation"),
22+
confirm: action("confirm"),
23+
error: undefined,
24+
isConfirming: false,
25+
isUpdating: false,
26+
openConfirmation: action("openConfirmation"),
27+
},
28+
},
29+
}
30+
31+
const meta: Meta<typeof SecurityPageView> = {
32+
title: "pages/SecurityPageView",
33+
component: SecurityPageView,
34+
args: defaultArgs,
35+
}
36+
37+
export default meta
38+
type Story = StoryObj<typeof SecurityPageView>
39+
40+
export const Default: Story = {}
41+
42+
export const NoOIDCAvailable: Story = {
43+
args: {
44+
...defaultArgs,
45+
oidc: undefined,
46+
},
47+
}
48+
49+
const authMethodsWithPassword: AuthMethods = {
50+
...MockAuthMethods,
51+
me_login_type: "password",
52+
github: { enabled: true },
53+
oidc: { enabled: true, signInText: "", iconUrl: "" },
54+
}
55+
56+
export const UserLoginTypeIsPassword: Story = {
57+
args: set("oidc.section.authMethods", authMethodsWithPassword, defaultArgs),
58+
}
59+
60+
export const ConfirmingOIDCConversion: Story = {
61+
args: set(
62+
"oidc.section",
63+
{
64+
...defaultArgs.oidc?.section,
65+
authMethods: authMethodsWithPassword,
66+
isConfirming: true,
67+
},
68+
defaultArgs,
69+
),
70+
}

‎site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ export const useSingleSignOnSection = () => {
6464
}
6565

6666
return {
67-
mutation,
6867
openConfirmation,
6968
closeConfirmation,
7069
confirm,

‎site/src/testHelpers/entities.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1021,6 +1021,7 @@ export const MockAuthMethods: TypesGen.AuthMethods = {
10211021
password: { enabled: true },
10221022
github: { enabled: false },
10231023
oidc: { enabled: false, signInText: "", iconUrl: "" },
1024+
convert_to_oidc_enabled: true,
10241025
}
10251026

10261027
export const MockGitSSHKey: TypesGen.GitSSHKey = {

0 commit comments

Comments
 (0)