Skip to content

Commit 0b141c4

Browse files
jaaydenhjaaydenh
authored
chore: add DynamicParameter stories (coder#17710)
resolves coder/preview#112 - Add stories for DynamicParameter component - fix bug with displaying immutable badge and required asterisk
1 parent c5c3a54 commit 0b141c4

File tree

3 files changed

+218
-2
lines changed

3 files changed

+218
-2
lines changed

‎site/src/modules/workspaces/DynamicParameter/DynamicParameter.stories.tsx

+197
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { MockPreviewParameter } from "testHelpers/entities";
3+
import { DynamicParameter } from "./DynamicParameter";
4+
5+
const meta: Meta<typeof DynamicParameter> = {
6+
title: "modules/workspaces/DynamicParameter",
7+
component: DynamicParameter,
8+
parameters: {
9+
layout: "centered",
10+
},
11+
};
12+
13+
export default meta;
14+
type Story = StoryObj<typeof DynamicParameter>;
15+
16+
export const TextInput: Story = {
17+
args: {
18+
parameter: {
19+
...MockPreviewParameter,
20+
},
21+
},
22+
};
23+
24+
export const TextArea: Story = {
25+
args: {
26+
parameter: {
27+
...MockPreviewParameter,
28+
form_type: "textarea",
29+
},
30+
},
31+
};
32+
33+
export const Checkbox: Story = {
34+
args: {
35+
parameter: {
36+
...MockPreviewParameter,
37+
form_type: "checkbox",
38+
type: "bool",
39+
},
40+
},
41+
};
42+
43+
export const Switch: Story = {
44+
args: {
45+
parameter: {
46+
...MockPreviewParameter,
47+
form_type: "switch",
48+
type: "bool",
49+
},
50+
},
51+
};
52+
53+
export const Dropdown: Story = {
54+
args: {
55+
parameter: {
56+
...MockPreviewParameter,
57+
form_type: "dropdown",
58+
type: "string",
59+
options: [
60+
{
61+
name: "Option 1",
62+
value: { valid: true, value: "option1" },
63+
description: "this is option 1",
64+
icon: "",
65+
},
66+
{
67+
name: "Option 2",
68+
value: { valid: true, value: "option2" },
69+
description: "this is option 2",
70+
icon: "",
71+
},
72+
{
73+
name: "Option 3",
74+
value: { valid: true, value: "option3" },
75+
description: "this is option 3",
76+
icon: "",
77+
},
78+
],
79+
},
80+
},
81+
};
82+
83+
export const MultiSelect: Story = {
84+
args: {
85+
parameter: {
86+
...MockPreviewParameter,
87+
form_type: "multi-select",
88+
type: "list(string)",
89+
options: [
90+
{
91+
name: "Red",
92+
value: { valid: true, value: "red" },
93+
description: "this is red",
94+
icon: "",
95+
},
96+
{
97+
name: "Green",
98+
value: { valid: true, value: "green" },
99+
description: "this is green",
100+
icon: "",
101+
},
102+
{
103+
name: "Blue",
104+
value: { valid: true, value: "blue" },
105+
description: "this is blue",
106+
icon: "",
107+
},
108+
{
109+
name: "Purple",
110+
value: { valid: true, value: "purple" },
111+
description: "this is purple",
112+
icon: "",
113+
},
114+
],
115+
},
116+
},
117+
};
118+
119+
export const Radio: Story = {
120+
args: {
121+
parameter: {
122+
...MockPreviewParameter,
123+
form_type: "radio",
124+
type: "string",
125+
options: [
126+
{
127+
name: "Small",
128+
value: { valid: true, value: "small" },
129+
description: "this is small",
130+
icon: "",
131+
},
132+
{
133+
name: "Medium",
134+
value: { valid: true, value: "medium" },
135+
description: "this is medium",
136+
icon: "",
137+
},
138+
{
139+
name: "Large",
140+
value: { valid: true, value: "large" },
141+
description: "this is large",
142+
icon: "",
143+
},
144+
],
145+
},
146+
},
147+
};
148+
149+
export const Slider: Story = {
150+
args: {
151+
parameter: {
152+
...MockPreviewParameter,
153+
form_type: "slider",
154+
type: "number",
155+
},
156+
},
157+
};
158+
159+
export const Disabled: Story = {
160+
args: {
161+
parameter: {
162+
...MockPreviewParameter,
163+
value: { valid: true, value: "disabled value" },
164+
},
165+
disabled: true,
166+
},
167+
};
168+
169+
export const Preset: Story = {
170+
args: {
171+
parameter: {
172+
...MockPreviewParameter,
173+
value: { valid: true, value: "preset value" },
174+
},
175+
isPreset: true,
176+
},
177+
};
178+
179+
export const Immutable: Story = {
180+
args: {
181+
parameter: {
182+
...MockPreviewParameter,
183+
mutable: false,
184+
},
185+
},
186+
};
187+
188+
export const AllBadges: Story = {
189+
args: {
190+
parameter: {
191+
...MockPreviewParameter,
192+
value: { valid: true, value: "us-west-2" },
193+
mutable: false,
194+
},
195+
isPreset: true,
196+
},
197+
};

‎site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -97,11 +97,11 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
9797
<Label className="flex gap-2 flex-wrap text-sm font-medium">
9898
<span className="flex">
9999
{displayName}
100-
{!parameter.required && (
100+
{parameter.required && (
101101
<span className="text-content-destructive">*</span>
102102
)}
103103
</span>
104-
{parameter.mutable && (
104+
{!parameter.mutable && (
105105
<TooltipProvider delayDuration={100}>
106106
<Tooltip>
107107
<TooltipTrigger asChild>

‎site/src/testHelpers/entities.ts

+19
Original file line numberDiff line numberDiff line change
@@ -2983,6 +2983,25 @@ export const MockWorkspaceBuildParameter5: TypesGen.WorkspaceBuildParameter = {
29832983
value: "5",
29842984
};
29852985

2986+
export const MockPreviewParameter: TypesGen.PreviewParameter = {
2987+
name: "parameter1",
2988+
display_name: "Parameter 1",
2989+
description: "This is a parameter",
2990+
type: "string",
2991+
mutable: true,
2992+
form_type: "input",
2993+
validations: [],
2994+
value: { valid: true, value: "" },
2995+
diagnostics: [],
2996+
options: [],
2997+
ephemeral: true,
2998+
required: true,
2999+
icon: "",
3000+
styling: {},
3001+
default_value: { valid: true, value: "" },
3002+
order: 0,
3003+
};
3004+
29863005
export const MockTemplateVersionExternalAuthGithub: TypesGen.TemplateVersionExternalAuth =
29873006
{
29883007
id: "github",

0 commit comments

Comments
 (0)