Skip to content

Commit 5a8b649

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor UserSettingsPage stories
1 parent d40214a commit 5a8b649

File tree

6 files changed

+194
-217
lines changed

6 files changed

+194
-217
lines changed

‎site/src/pages/UserSettingsPage/AccountPage/AccountForm.stories.tsx

Lines changed: 31 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,43 @@
1-
import { Story } from "@storybook/react";
2-
import { AccountForm, AccountFormProps } from "./AccountForm";
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { AccountForm } from "./AccountForm";
33
import { mockApiError } from "testHelpers/entities";
44

5-
export default {
5+
const meta: Meta<typeof AccountForm> = {
66
title: "components/AccountForm",
77
component: AccountForm,
8-
argTypes: {
9-
onSubmit: { action: "Submit" },
8+
args: {
9+
email: "test-user@org.com",
10+
isLoading: false,
11+
initialValues: {
12+
username: "test-user",
13+
},
14+
updateProfileError: undefined,
1015
},
1116
};
1217

13-
const Template: Story<AccountFormProps> = (args: AccountFormProps) => (
14-
<AccountForm {...args} />
15-
);
18+
export default meta;
19+
type Story = StoryObj<typeof AccountForm>;
1620

17-
export const Example = Template.bind({});
18-
Example.args = {
19-
email: "test-user@org.com",
20-
isLoading: false,
21-
initialValues: {
22-
username: "test-user",
23-
},
24-
updateProfileError: undefined,
25-
onSubmit: () => {
26-
return Promise.resolve();
27-
},
28-
};
21+
export const Example: Story = {};
2922

30-
export const Loading = Template.bind({});
31-
Loading.args = {
32-
...Example.args,
33-
isLoading: true,
23+
export const Loading: Story = {
24+
args: {
25+
isLoading: true,
26+
},
3427
};
35-
36-
export const WithError = Template.bind({});
37-
WithError.args = {
38-
...Example.args,
39-
updateProfileError: mockApiError({
40-
message: "Username is invalid",
41-
validations: [
42-
{
43-
field: "username",
44-
detail: "Username is too long.",
45-
},
46-
],
47-
}),
48-
initialTouched: {
49-
username: true,
28+
export const WithError: Story = {
29+
args: {
30+
updateProfileError: mockApiError({
31+
message: "Username is invalid",
32+
validations: [
33+
{
34+
field: "username",
35+
detail: "Username is too long.",
36+
},
37+
],
38+
}),
39+
initialTouched: {
40+
username: true,
41+
},
5042
},
5143
};

‎site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.stories.tsx

Lines changed: 33 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,46 @@
1-
import { Story } from "@storybook/react";
21
import { mockApiError } from "testHelpers/entities";
3-
import { SSHKeysPageView, SSHKeysPageViewProps } from "./SSHKeysPageView";
2+
import { SSHKeysPageView } from "./SSHKeysPageView";
3+
import type { Meta, StoryObj } from "@storybook/react";
44

5-
export default {
6-
title: "components/SSHKeysPageView",
5+
const meta: Meta<typeof SSHKeysPageView> = {
6+
title: "pages/SSHKeysPageView",
77
component: SSHKeysPageView,
8-
argTypes: {
9-
onRegenerateClick: { action: "Submit" },
8+
args: {
9+
isLoading: false,
10+
hasLoaded: true,
11+
sshKey: {
12+
user_id: "test-user-id",
13+
created_at: "2022-07-28T07:45:50.795918897Z",
14+
updated_at: "2022-07-28T07:45:50.795919142Z",
15+
public_key: "SSH-Key",
16+
},
1017
},
1118
};
1219

13-
const Template: Story<SSHKeysPageViewProps> = (args: SSHKeysPageViewProps) => (
14-
<SSHKeysPageView {...args} />
15-
);
20+
export default meta;
21+
type Story = StoryObj<typeof SSHKeysPageView>;
1622

17-
export const Example = Template.bind({});
18-
Example.args = {
19-
isLoading: false,
20-
hasLoaded: true,
21-
sshKey: {
22-
user_id: "test-user-id",
23-
created_at: "2022-07-28T07:45:50.795918897Z",
24-
updated_at: "2022-07-28T07:45:50.795919142Z",
25-
public_key: "SSH-Key",
26-
},
27-
onRegenerateClick: () => {
28-
return Promise.resolve();
29-
},
30-
};
23+
export const Example: Story = {};
3124

32-
export const Loading = Template.bind({});
33-
Loading.args = {
34-
...Example.args,
35-
isLoading: true,
25+
export const Loading: Story = {
26+
args: {
27+
isLoading: true,
28+
},
3629
};
3730

38-
export const WithGetSSHKeyError = Template.bind({});
39-
WithGetSSHKeyError.args = {
40-
...Example.args,
41-
hasLoaded: false,
42-
getSSHKeyError: mockApiError({
43-
message: "Failed to get SSH key",
44-
}),
31+
export const WithGetSSHKeyError: Story = {
32+
args: {
33+
hasLoaded: false,
34+
getSSHKeyError: mockApiError({
35+
message: "Failed to get SSH key",
36+
}),
37+
},
4538
};
4639

47-
export const WithRegenerateSSHKeyError = Template.bind({});
48-
WithRegenerateSSHKeyError.args = {
49-
...Example.args,
50-
regenerateSSHKeyError: mockApiError({
51-
message: "Failed to regenerate SSH key",
52-
}),
40+
export const WithRegenerateSSHKeyError: Story = {
41+
args: {
42+
regenerateSSHKeyError: mockApiError({
43+
message: "Failed to regenerate SSH key",
44+
}),
45+
},
5346
};

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

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,40 @@
1-
import { Story } from "@storybook/react";
2-
import { SecurityForm, SecurityFormProps } from "./SettingsSecurityForm";
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { SecurityForm } from "./SettingsSecurityForm";
33
import { mockApiError } from "testHelpers/entities";
44

5-
export default {
6-
title: "components/SettingsSecurityForm",
5+
const meta: Meta<typeof SecurityForm> = {
6+
title: "components/SecurityForm",
77
component: SecurityForm,
8-
argTypes: {
9-
onSubmit: { action: "Submit" },
8+
args: {
9+
isLoading: false,
1010
},
1111
};
1212

13-
const Template: Story<SecurityFormProps> = (args: SecurityFormProps) => (
14-
<SecurityForm {...args} />
15-
);
13+
export default meta;
14+
type Story = StoryObj<typeof SecurityForm>;
1615

17-
export const Example = Template.bind({});
18-
Example.args = {
19-
isLoading: false,
20-
onSubmit: () => {
21-
return Promise.resolve();
16+
export const Example: Story = {
17+
args: {
18+
isLoading: false,
2219
},
2320
};
2421

25-
export const Loading = Template.bind({});
26-
Loading.args = {
27-
...Example.args,
28-
isLoading: true,
22+
export const Loading: Story = {
23+
args: {
24+
isLoading: true,
25+
},
2926
};
3027

31-
export const WithError = Template.bind({});
32-
WithError.args = {
33-
...Example.args,
34-
error: mockApiError({
35-
message: "Old password is incorrect",
36-
validations: [
37-
{
38-
field: "old_password",
39-
detail: "Old password is incorrect.",
40-
},
41-
],
42-
}),
28+
export const WithError: Story = {
29+
args: {
30+
error: mockApiError({
31+
message: "Old password is incorrect",
32+
validations: [
33+
{
34+
field: "old_password",
35+
detail: "Old password is incorrect.",
36+
},
37+
],
38+
}),
39+
},
4340
};

‎site/src/pages/UserSettingsPage/TokensPage/ConfirmDeleteDialog.stories.tsx

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
import { Story } from "@storybook/react";
1+
import type { Meta, StoryObj } from "@storybook/react";
22
import { MockToken } from "testHelpers/entities";
3-
import {
4-
ConfirmDeleteDialog,
5-
ConfirmDeleteDialogProps,
6-
} from "./ConfirmDeleteDialog";
3+
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
74
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
85

96
const queryClient = new QueryClient({
@@ -16,24 +13,27 @@ const queryClient = new QueryClient({
1613
},
1714
});
1815

19-
export default {
16+
const meta: Meta<typeof ConfirmDeleteDialog> = {
2017
title: "components/ConfirmDeleteDialog",
2118
component: ConfirmDeleteDialog,
19+
decorators: [
20+
(Story) => (
21+
<QueryClientProvider client={queryClient}>
22+
<Story />
23+
</QueryClientProvider>
24+
),
25+
],
2226
};
2327

24-
const Template: Story<ConfirmDeleteDialogProps> = (
25-
args: ConfirmDeleteDialogProps,
26-
) => (
27-
<QueryClientProvider client={queryClient}>
28-
<ConfirmDeleteDialog {...args} />
29-
</QueryClientProvider>
30-
);
28+
export default meta;
29+
type Story = StoryObj<typeof ConfirmDeleteDialog>;
3130

32-
export const DeleteDialog = Template.bind({});
33-
DeleteDialog.args = {
34-
queryKey: ["tokens"],
35-
token: MockToken,
36-
setToken: () => {
37-
return null;
31+
export const DeleteDialog: Story = {
32+
args: {
33+
queryKey: ["tokens"],
34+
token: MockToken,
35+
setToken: () => {
36+
return null;
37+
},
3838
},
3939
};

‎site/src/pages/UserSettingsPage/TokensPage/TokensPageView.stories.tsx

Lines changed: 36 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,52 @@
1-
import { Story } from "@storybook/react";
21
import { mockApiError, MockTokens } from "testHelpers/entities";
3-
import { TokensPageView, TokensPageViewProps } from "./TokensPageView";
2+
import { TokensPageView } from "./TokensPageView";
3+
import type { Meta, StoryObj } from "@storybook/react";
44

5-
export default {
6-
title: "components/TokensPageView",
5+
const meta: Meta<typeof TokensPageView> = {
6+
title: "pages/TokensPageView",
77
component: TokensPageView,
88
args: {
9-
onRegenerateClick: { action: "Submit" },
9+
isLoading: false,
10+
hasLoaded: true,
11+
tokens: MockTokens,
12+
onDelete: () => {
13+
return Promise.resolve();
14+
},
1015
},
1116
};
1217

13-
const Template: Story<TokensPageViewProps> = (args: TokensPageViewProps) => (
14-
<TokensPageView {...args} />
15-
);
18+
export default meta;
19+
type Story = StoryObj<typeof TokensPageView>;
1620

17-
export const Example = Template.bind({});
18-
Example.args = {
19-
isLoading: false,
20-
hasLoaded: true,
21-
tokens: MockTokens,
22-
onDelete: () => {
23-
return Promise.resolve();
24-
},
25-
};
21+
export const Example: Story = {};
2622

27-
export const Loading = Template.bind({});
28-
Loading.args = {
29-
...Example.args,
30-
isLoading: true,
31-
hasLoaded: false,
23+
export const Loading: Story = {
24+
args: {
25+
isLoading: true,
26+
hasLoaded: false,
27+
},
3228
};
3329

34-
export const Empty = Template.bind({});
35-
Empty.args = {
36-
...Example.args,
37-
tokens: [],
30+
export const Empty: Story = {
31+
args: {
32+
tokens: [],
33+
},
3834
};
3935

40-
export const WithGetTokensError = Template.bind({});
41-
WithGetTokensError.args = {
42-
...Example.args,
43-
hasLoaded: false,
44-
getTokensError: mockApiError({
45-
message: "Failed to get tokens.",
46-
}),
36+
export const WithGetTokensError: Story = {
37+
args: {
38+
hasLoaded: false,
39+
getTokensError: mockApiError({
40+
message: "Failed to get tokens.",
41+
}),
42+
},
4743
};
4844

49-
export const WithDeleteTokenError = Template.bind({});
50-
WithDeleteTokenError.args = {
51-
...Example.args,
52-
hasLoaded: false,
53-
deleteTokenError: mockApiError({
54-
message: "Failed to delete token.",
55-
}),
45+
export const WithDeleteTokenError: Story = {
46+
args: {
47+
hasLoaded: false,
48+
deleteTokenError: mockApiError({
49+
message: "Failed to delete token.",
50+
}),
51+
},
5652
};

0 commit comments

Comments
 (0)