Skip to content

Commit 00901c7

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor WorkspacePage stories
1 parent de276ee commit 00901c7

6 files changed

+155
-167
lines changed

‎site/src/pages/WorkspacePage/BuildsTable.stories.tsx

+14-11
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
1-
import { ComponentMeta, Story } from "@storybook/react";
1+
import { Meta, StoryObj } from "@storybook/react";
22
import { MockBuilds } from "testHelpers/entities";
3-
import { BuildsTable, BuildsTableProps } from "./BuildsTable";
3+
import { BuildsTable } from "./BuildsTable";
44

5-
export default {
5+
const meta: Meta<typeof BuildsTable> = {
66
title: "components/BuildsTable",
77
component: BuildsTable,
8-
} as ComponentMeta<typeof BuildsTable>;
8+
};
99

10-
const Template: Story<BuildsTableProps> = (args) => <BuildsTable {...args} />;
10+
export default meta;
11+
type Story = StoryObj<typeof BuildsTable>;
1112

12-
export const Example = Template.bind({});
13-
Example.args = {
14-
builds: MockBuilds,
13+
export const Example: Story = {
14+
args: {
15+
builds: MockBuilds,
16+
},
1517
};
1618

17-
export const Empty = Template.bind({});
18-
Empty.args = {
19-
builds: [],
19+
export const Empty: Story = {
20+
args: {
21+
builds: [],
22+
},
2023
};

‎site/src/pages/WorkspacePage/Workspace.stories.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ const meta: Meta<typeof Workspace> = {
6161
}),
6262
],
6363
};
64+
6465
export default meta;
6566
type Story = StoryObj<typeof Workspace>;
6667

‎site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.stories.tsx

+54-64
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,81 @@
1-
import { action } from "@storybook/addon-actions";
2-
import { Story } from "@storybook/react";
3-
import * as Mocks from "../../../testHelpers/entities";
4-
import { WorkspaceActions, WorkspaceActionsProps } from "./WorkspaceActions";
1+
import { Meta, StoryObj } from "@storybook/react";
2+
import * as Mocks from "testHelpers/entities";
3+
import { WorkspaceActions } from "./WorkspaceActions";
54

6-
export default {
5+
const meta: Meta<typeof WorkspaceActions> = {
76
title: "components/WorkspaceActions",
87
component: WorkspaceActions,
8+
args: {
9+
isUpdating: false,
10+
},
911
};
1012

11-
const Template: Story<WorkspaceActionsProps> = (args) => (
12-
<WorkspaceActions {...args} />
13-
);
13+
export default meta;
14+
type Story = StoryObj<typeof WorkspaceActions>;
1415

15-
const defaultArgs = {
16-
handleStart: action("start"),
17-
handleStop: action("stop"),
18-
handleRestart: action("restart"),
19-
handleDelete: action("delete"),
20-
handleUpdate: action("update"),
21-
handleCancel: action("cancel"),
22-
isOutdated: false,
23-
isUpdating: false,
16+
export const Starting: Story = {
17+
args: {
18+
workspace: Mocks.MockStartingWorkspace,
19+
},
2420
};
2521

26-
export const Starting = Template.bind({});
27-
Starting.args = {
28-
...defaultArgs,
29-
workspace: Mocks.MockStartingWorkspace,
22+
export const Running: Story = {
23+
args: {
24+
workspace: Mocks.MockWorkspace,
25+
},
3026
};
3127

32-
export const Running = Template.bind({});
33-
Running.args = {
34-
...defaultArgs,
35-
workspace: Mocks.MockWorkspace,
28+
export const Stopping: Story = {
29+
args: {
30+
workspace: Mocks.MockStoppingWorkspace,
31+
},
3632
};
3733

38-
export const Stopping = Template.bind({});
39-
Stopping.args = {
40-
...defaultArgs,
41-
workspace: Mocks.MockStoppingWorkspace,
34+
export const Stopped: Story = {
35+
args: {
36+
workspace: Mocks.MockStoppedWorkspace,
37+
},
4238
};
4339

44-
export const Stopped = Template.bind({});
45-
Stopped.args = {
46-
...defaultArgs,
47-
workspace: Mocks.MockStoppedWorkspace,
40+
export const Canceling: Story = {
41+
args: {
42+
workspace: Mocks.MockCancelingWorkspace,
43+
},
4844
};
4945

50-
export const Canceling = Template.bind({});
51-
Canceling.args = {
52-
...defaultArgs,
53-
workspace: Mocks.MockCancelingWorkspace,
46+
export const Canceled: Story = {
47+
args: {
48+
workspace: Mocks.MockCanceledWorkspace,
49+
},
5450
};
5551

56-
export const Canceled = Template.bind({});
57-
Canceled.args = {
58-
...defaultArgs,
59-
workspace: Mocks.MockCanceledWorkspace,
52+
export const Deleting: Story = {
53+
args: {
54+
workspace: Mocks.MockDeletingWorkspace,
55+
},
6056
};
6157

62-
export const Deleting = Template.bind({});
63-
Deleting.args = {
64-
...defaultArgs,
65-
workspace: Mocks.MockDeletingWorkspace,
58+
export const Deleted: Story = {
59+
args: {
60+
workspace: Mocks.MockDeletedWorkspace,
61+
},
6662
};
6763

68-
export const Deleted = Template.bind({});
69-
Deleted.args = {
70-
...defaultArgs,
71-
workspace: Mocks.MockDeletedWorkspace,
64+
export const Outdated: Story = {
65+
args: {
66+
workspace: Mocks.MockOutdatedWorkspace,
67+
},
7268
};
7369

74-
export const Outdated = Template.bind({});
75-
Outdated.args = {
76-
...defaultArgs,
77-
workspace: Mocks.MockOutdatedWorkspace,
70+
export const Failed: Story = {
71+
args: {
72+
workspace: Mocks.MockFailedWorkspace,
73+
},
7874
};
7975

80-
export const Failed = Template.bind({});
81-
Failed.args = {
82-
...defaultArgs,
83-
workspace: Mocks.MockFailedWorkspace,
84-
};
85-
86-
export const Updating = Template.bind({});
87-
Updating.args = {
88-
...defaultArgs,
89-
isUpdating: true,
90-
workspace: Mocks.MockOutdatedWorkspace,
76+
export const Updating: Story = {
77+
args: {
78+
isUpdating: true,
79+
workspace: Mocks.MockOutdatedWorkspace,
80+
},
9181
};

‎site/src/pages/WorkspacePage/WorkspaceBuildProgress.stories.tsx

+47-51
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,71 @@
1-
import { ComponentMeta, Story } from "@storybook/react";
1+
import { Meta, StoryObj } from "@storybook/react";
22
import dayjs from "dayjs";
33
import {
44
MockStartingWorkspace,
55
MockWorkspaceBuild,
66
MockProvisionerJob,
77
} from "testHelpers/entities";
8-
import {
9-
WorkspaceBuildProgress,
10-
WorkspaceBuildProgressProps,
11-
} from "./WorkspaceBuildProgress";
8+
import { WorkspaceBuildProgress } from "./WorkspaceBuildProgress";
129

13-
export default {
10+
const meta: Meta<typeof WorkspaceBuildProgress> = {
1411
title: "components/WorkspaceBuildProgress",
1512
component: WorkspaceBuildProgress,
16-
} as ComponentMeta<typeof WorkspaceBuildProgress>;
17-
18-
const Template: Story<WorkspaceBuildProgressProps> = (args) => (
19-
<WorkspaceBuildProgress {...args} />
20-
);
21-
22-
export const Starting = Template.bind({});
23-
Starting.args = {
24-
transitionStats: {
25-
P50: 10000,
26-
P95: 10010,
27-
},
28-
workspace: {
29-
...MockStartingWorkspace,
30-
latest_build: {
31-
...MockWorkspaceBuild,
32-
status: "starting",
33-
job: {
34-
...MockProvisionerJob,
35-
started_at: dayjs().add(-5, "second").format(),
36-
status: "running",
13+
args: {
14+
transitionStats: {
15+
P50: 10000,
16+
P95: 10010,
17+
},
18+
workspace: {
19+
...MockStartingWorkspace,
20+
latest_build: {
21+
...MockWorkspaceBuild,
22+
status: "starting",
23+
job: {
24+
...MockProvisionerJob,
25+
started_at: dayjs().add(-5, "second").format(),
26+
status: "running",
27+
},
3728
},
3829
},
3930
},
4031
};
4132

33+
export default meta;
34+
type Story = StoryObj<typeof WorkspaceBuildProgress>;
35+
36+
export const Starting: Story = {};
37+
4238
// When the transition stats are returning null, the progress bar should not be
4339
// displayed
44-
export const StartingUnknown = Template.bind({});
45-
StartingUnknown.args = {
46-
...Starting.args,
47-
transitionStats: {
48-
// HACK: the codersdk type generator doesn't support null values, but this
49-
// can be null when the template is new.
50-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Read comment above
51-
// @ts-ignore-error
52-
P50: null,
53-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Read comment above
54-
// @ts-ignore-error
55-
P95: null,
40+
export const StartingUnknown: Story = {
41+
args: {
42+
transitionStats: {
43+
// HACK: the codersdk type generator doesn't support null values, but this
44+
// can be null when the template is new.
45+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Read comment above
46+
// @ts-ignore-error
47+
P50: null,
48+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Read comment above
49+
// @ts-ignore-error
50+
P95: null,
51+
},
5652
},
5753
};
5854

59-
export const StartingPassedEstimate = Template.bind({});
60-
StartingPassedEstimate.args = {
61-
...Starting.args,
62-
transitionStats: { P50: 1000, P95: 1000 },
55+
export const StartingPassedEstimate: Story = {
56+
args: {
57+
transitionStats: { P50: 1000, P95: 1000 },
58+
},
6359
};
6460

65-
export const StartingHighVariaton = Template.bind({});
66-
StartingHighVariaton.args = {
67-
...Starting.args,
68-
transitionStats: { P50: 10000, P95: 20000 },
61+
export const StartingHighVariaton: Story = {
62+
args: {
63+
transitionStats: { P50: 10000, P95: 20000 },
64+
},
6965
};
7066

71-
export const StartingZeroEstimate = Template.bind({});
72-
StartingZeroEstimate.args = {
73-
...Starting.args,
74-
transitionStats: { P50: 0, P95: 0 },
67+
export const StartingZeroEstimate: Story = {
68+
args: {
69+
transitionStats: { P50: 0, P95: 0 },
70+
},
7571
};

‎site/src/pages/WorkspacePage/WorkspaceDeletedBanner.stories.tsx

+6-14
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
1-
import { action } from "@storybook/addon-actions";
2-
import { Story } from "@storybook/react";
3-
import {
4-
WorkspaceDeletedBanner,
5-
WorkspaceDeletedBannerProps,
6-
} from "./WorkspaceDeletedBanner";
1+
import { Meta, StoryObj } from "@storybook/react";
2+
import { WorkspaceDeletedBanner } from "./WorkspaceDeletedBanner";
73

8-
export default {
4+
const meta: Meta<typeof WorkspaceDeletedBanner> = {
95
title: "components/WorkspaceDeletedBanner",
106
component: WorkspaceDeletedBanner,
117
};
128

13-
const Template: Story<WorkspaceDeletedBannerProps> = (args) => (
14-
<WorkspaceDeletedBanner {...args} />
15-
);
9+
export default meta;
10+
type Story = StoryObj<typeof WorkspaceDeletedBanner>;
1611

17-
export const Example = Template.bind({});
18-
Example.args = {
19-
handleClick: action("extend"),
20-
};
12+
export const Example: Story = {};

0 commit comments

Comments
 (0)