Skip to content

Commit 0b141c4

Browse files
jaaydenhjaaydenh
authored
chore: add DynamicParameter stories (#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

Lines changed: 197 additions & 0 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 19 additions & 0 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy