Skip to content

Commit 332362c

Browse files
chore(site): simplify the logic to load workspace initial data (#7772)
1 parent 4de4e8e commit 332362c

File tree

6 files changed

+274
-379
lines changed

6 files changed

+274
-379
lines changed

site/src/components/Alert/Alert.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import { useState, FC, ReactNode, PropsWithChildren } from "react"
1+
import { useState, FC, ReactNode } from "react"
22
import Collapse from "@mui/material/Collapse"
33
// eslint-disable-next-line no-restricted-imports -- It is the base component
44
import MuiAlert, { AlertProps as MuiAlertProps } from "@mui/material/Alert"
55
import Button from "@mui/material/Button"
66
import Box from "@mui/material/Box"
77

8-
export interface AlertProps extends PropsWithChildren {
9-
severity: MuiAlertProps["severity"]
8+
export type AlertProps = MuiAlertProps & {
109
actions?: ReactNode
1110
dismissible?: boolean
1211
onRetry?: () => void
@@ -20,12 +19,14 @@ export const Alert: FC<AlertProps> = ({
2019
dismissible,
2120
severity,
2221
onDismiss,
22+
...alertProps
2323
}) => {
2424
const [open, setOpen] = useState(true)
2525

2626
return (
2727
<Collapse in={open}>
2828
<MuiAlert
29+
{...alertProps}
2930
severity={severity}
3031
action={
3132
<>

site/src/components/Workspace/Workspace.stories.tsx

+156-141
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,56 @@
11
import { action } from "@storybook/addon-actions"
2-
import { Story } from "@storybook/react"
2+
import { Meta, StoryObj } from "@storybook/react"
33
import { WatchAgentMetadataContext } from "components/Resources/AgentMetadata"
44
import { ProvisionerJobLog } from "api/typesGenerated"
55
import * as Mocks from "testHelpers/entities"
6-
import { Workspace, WorkspaceErrors, WorkspaceProps } from "./Workspace"
6+
import { Workspace, WorkspaceErrors } from "./Workspace"
77
import { withReactContext } from "storybook-react-context"
88
import EventSource from "eventsourcemock"
99
import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext"
1010
import { DashboardProviderContext } from "components/Dashboard/DashboardProvider"
1111

12-
export default {
12+
const MockedAppearance = {
13+
config: Mocks.MockAppearance,
14+
preview: false,
15+
setPreview: () => null,
16+
save: () => null,
17+
}
18+
19+
const meta: Meta<typeof Workspace> = {
1320
title: "components/Workspace",
1421
component: Workspace,
15-
argTypes: {},
1622
decorators: [
23+
(Story) => (
24+
<DashboardProviderContext.Provider
25+
value={{
26+
buildInfo: Mocks.MockBuildInfo,
27+
entitlements: Mocks.MockEntitlementsWithScheduling,
28+
experiments: Mocks.MockExperiments,
29+
appearance: MockedAppearance,
30+
}}
31+
>
32+
<ProxyContext.Provider
33+
value={{
34+
proxyLatencies: Mocks.MockProxyLatencies,
35+
proxy: getPreferredProxy([], undefined),
36+
proxies: [],
37+
isLoading: false,
38+
isFetched: true,
39+
clearProxy: () => {
40+
return
41+
},
42+
setProxy: () => {
43+
return
44+
},
45+
refetchProxyLatencies: () => {
46+
return
47+
},
48+
}}
49+
>
50+
<Story />
51+
</ProxyContext.Provider>
52+
</DashboardProviderContext.Provider>
53+
),
1754
withReactContext({
1855
Context: WatchAgentMetadataContext,
1956
initialState: (_: string): EventSource => {
@@ -23,172 +60,149 @@ export default {
2360
}),
2461
],
2562
}
63+
export default meta
64+
type Story = StoryObj<typeof Workspace>
2665

27-
const MockedAppearance = {
28-
config: Mocks.MockAppearance,
29-
preview: false,
30-
setPreview: () => null,
31-
save: () => null,
32-
}
33-
34-
const Template: Story<WorkspaceProps> = (args) => (
35-
<DashboardProviderContext.Provider
36-
value={{
37-
buildInfo: Mocks.MockBuildInfo,
38-
entitlements: Mocks.MockEntitlementsWithScheduling,
39-
experiments: Mocks.MockExperiments,
40-
appearance: MockedAppearance,
41-
}}
42-
>
43-
<ProxyContext.Provider
44-
value={{
45-
proxyLatencies: Mocks.MockProxyLatencies,
46-
proxy: getPreferredProxy([], undefined),
47-
proxies: [],
48-
isLoading: false,
49-
isFetched: true,
50-
clearProxy: () => {
51-
return
52-
},
53-
setProxy: () => {
54-
return
55-
},
56-
refetchProxyLatencies: () => {
57-
return
58-
},
59-
}}
60-
>
61-
<Workspace {...args} />
62-
</ProxyContext.Provider>
63-
</DashboardProviderContext.Provider>
64-
)
65-
66-
export const Running = Template.bind({})
67-
Running.args = {
68-
scheduleProps: {
69-
onDeadlineMinus: () => {
70-
// do nothing, this is just for storybook
71-
},
72-
onDeadlinePlus: () => {
73-
// do nothing, this is just for storybook
74-
},
75-
maxDeadlineDecrease: 0,
76-
maxDeadlineIncrease: 24,
66+
export const Running: Story = {
67+
args: {
68+
scheduleProps: {
69+
onDeadlineMinus: () => {
70+
// do nothing, this is just for storybook
71+
},
72+
onDeadlinePlus: () => {
73+
// do nothing, this is just for storybook
74+
},
75+
maxDeadlineDecrease: 0,
76+
maxDeadlineIncrease: 24,
77+
},
78+
workspace: Mocks.MockWorkspace,
79+
handleStart: action("start"),
80+
handleStop: action("stop"),
81+
resources: [
82+
Mocks.MockWorkspaceResource,
83+
Mocks.MockWorkspaceResource2,
84+
Mocks.MockWorkspaceResource3,
85+
],
86+
builds: [Mocks.MockWorkspaceBuild],
87+
canUpdateWorkspace: true,
88+
workspaceErrors: {},
89+
buildInfo: Mocks.MockBuildInfo,
90+
template: Mocks.MockTemplate,
7791
},
78-
workspace: Mocks.MockWorkspace,
79-
handleStart: action("start"),
80-
handleStop: action("stop"),
81-
resources: [
82-
Mocks.MockWorkspaceResource,
83-
Mocks.MockWorkspaceResource2,
84-
Mocks.MockWorkspaceResource3,
85-
],
86-
builds: [Mocks.MockWorkspaceBuild],
87-
canUpdateWorkspace: true,
88-
workspaceErrors: {},
89-
buildInfo: Mocks.MockBuildInfo,
90-
template: Mocks.MockTemplate,
9192
}
9293

93-
export const WithoutUpdateAccess = Template.bind({})
94-
WithoutUpdateAccess.args = {
95-
...Running.args,
96-
canUpdateWorkspace: false,
94+
export const WithoutUpdateAccess: Story = {
95+
args: {
96+
...Running.args,
97+
canUpdateWorkspace: false,
98+
},
9799
}
98100

99-
export const Starting = Template.bind({})
100-
Starting.args = {
101-
...Running.args,
102-
workspace: Mocks.MockStartingWorkspace,
101+
export const Starting: Story = {
102+
args: {
103+
...Running.args,
104+
workspace: Mocks.MockStartingWorkspace,
105+
},
103106
}
104107

105-
export const Stopped = Template.bind({})
106-
Stopped.args = {
107-
...Running.args,
108-
workspace: Mocks.MockStoppedWorkspace,
108+
export const Stopped: Story = {
109+
args: {
110+
...Running.args,
111+
workspace: Mocks.MockStoppedWorkspace,
112+
},
109113
}
110114

111-
export const Stopping = Template.bind({})
112-
Stopping.args = {
113-
...Running.args,
114-
workspace: Mocks.MockStoppingWorkspace,
115+
export const Stopping: Story = {
116+
args: {
117+
...Running.args,
118+
workspace: Mocks.MockStoppingWorkspace,
119+
},
115120
}
116121

117-
export const Failed = Template.bind({})
118-
Failed.args = {
119-
...Running.args,
120-
workspace: Mocks.MockFailedWorkspace,
121-
workspaceErrors: {
122-
[WorkspaceErrors.BUILD_ERROR]: Mocks.mockApiError({
123-
message: "A workspace build is already active.",
124-
}),
122+
export const Failed: Story = {
123+
args: {
124+
...Running.args,
125+
workspace: Mocks.MockFailedWorkspace,
126+
workspaceErrors: {
127+
[WorkspaceErrors.BUILD_ERROR]: Mocks.mockApiError({
128+
message: "A workspace build is already active.",
129+
}),
130+
},
125131
},
126132
}
127133

128-
export const FailedWithLogs = Template.bind({})
129-
FailedWithLogs.args = {
130-
...Running.args,
131-
workspace: {
132-
...Mocks.MockFailedWorkspace,
133-
latest_build: {
134-
...Mocks.MockFailedWorkspace.latest_build,
135-
job: {
136-
...Mocks.MockFailedWorkspace.latest_build.job,
137-
error:
138-
"recv workspace provision: plan terraform: terraform plan: exit status 1",
134+
export const FailedWithLogs: Story = {
135+
args: {
136+
...Running.args,
137+
workspace: {
138+
...Mocks.MockFailedWorkspace,
139+
latest_build: {
140+
...Mocks.MockFailedWorkspace.latest_build,
141+
job: {
142+
...Mocks.MockFailedWorkspace.latest_build.job,
143+
error:
144+
"recv workspace provision: plan terraform: terraform plan: exit status 1",
145+
},
139146
},
140147
},
148+
failedBuildLogs: makeFailedBuildLogs(),
141149
},
142-
failedBuildLogs: makeFailedBuildLogs(),
143150
}
144151

145-
export const Deleting = Template.bind({})
146-
Deleting.args = {
147-
...Running.args,
148-
workspace: Mocks.MockDeletingWorkspace,
152+
export const Deleting: Story = {
153+
args: {
154+
...Running.args,
155+
workspace: Mocks.MockDeletingWorkspace,
156+
},
149157
}
150158

151-
export const Deleted = Template.bind({})
152-
Deleted.args = {
153-
...Running.args,
154-
workspace: Mocks.MockDeletedWorkspace,
159+
export const Deleted: Story = {
160+
args: {
161+
...Running.args,
162+
workspace: Mocks.MockDeletedWorkspace,
163+
},
155164
}
156165

157-
export const Canceling = Template.bind({})
158-
Canceling.args = {
159-
...Running.args,
160-
workspace: Mocks.MockCancelingWorkspace,
166+
export const Canceling: Story = {
167+
args: {
168+
...Running.args,
169+
workspace: Mocks.MockCancelingWorkspace,
170+
},
161171
}
162172

163-
export const Canceled = Template.bind({})
164-
Canceled.args = {
165-
...Running.args,
166-
workspace: Mocks.MockCanceledWorkspace,
173+
export const Canceled: Story = {
174+
args: {
175+
...Running.args,
176+
workspace: Mocks.MockCanceledWorkspace,
177+
},
167178
}
168179

169-
export const Outdated = Template.bind({})
170-
Outdated.args = {
171-
...Running.args,
172-
workspace: Mocks.MockOutdatedWorkspace,
180+
export const Outdated: Story = {
181+
args: {
182+
...Running.args,
183+
workspace: Mocks.MockOutdatedWorkspace,
184+
},
173185
}
174186

175-
export const GetBuildsError = Template.bind({})
176-
GetBuildsError.args = {
177-
...Running.args,
178-
workspaceErrors: {
179-
[WorkspaceErrors.GET_BUILDS_ERROR]: Mocks.mockApiError({
180-
message: "There is a problem fetching builds.",
181-
}),
187+
export const GetBuildsError: Story = {
188+
args: {
189+
...Running.args,
190+
workspaceErrors: {
191+
[WorkspaceErrors.GET_BUILDS_ERROR]: Mocks.mockApiError({
192+
message: "There is a problem fetching builds.",
193+
}),
194+
},
182195
},
183196
}
184197

185-
export const CancellationError = Template.bind({})
186-
CancellationError.args = {
187-
...Failed.args,
188-
workspaceErrors: {
189-
[WorkspaceErrors.CANCELLATION_ERROR]: Mocks.mockApiError({
190-
message: "Job could not be canceled.",
191-
}),
198+
export const CancellationError: Story = {
199+
args: {
200+
...Failed.args,
201+
workspaceErrors: {
202+
[WorkspaceErrors.CANCELLATION_ERROR]: Mocks.mockApiError({
203+
message: "Job could not be canceled.",
204+
}),
205+
},
192206
},
193207
}
194208

@@ -683,8 +697,9 @@ function makeFailedBuildLogs(): ProvisionerJobLog[] {
683697
]
684698
}
685699

686-
export const WithDeprecatedParameters = Template.bind({})
687-
WithDeprecatedParameters.args = {
688-
...Running.args,
689-
templateWarnings: ["DEPRECATED_PARAMETERS"],
700+
export const WithDeprecatedParameters: Story = {
701+
args: {
702+
...Running.args,
703+
templateWarnings: ["DEPRECATED_PARAMETERS"],
704+
},
690705
}

0 commit comments

Comments
 (0)