Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 3c87c4d

Browse files
aslilacaslilac
authored
feat: show descriptions for parameter options (#10068)
1 parent b32d79e commit 3c87c4d

File tree

2 files changed

+98
-22
lines changed

2 files changed

+98
-22
lines changed

‎site/src/components/RichParameterInput/RichParameterInput.stories.tsx

Lines changed: 56 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export const BooleanType: Story = {
6969
},
7070
};
7171

72-
export const OptionsType: Story = {
72+
export const Options: Story = {
7373
args: {
7474
value: "first_option",
7575
id: "options_parameter",
@@ -81,19 +81,61 @@ export const OptionsType: Story = {
8181
{
8282
name: "First option",
8383
value: "first_option",
84-
description: "This is option 1",
85-
icon: "",
84+
description: "",
85+
icon: "/icon/fedora.svg",
86+
},
87+
{
88+
name: "Second option",
89+
value: "second_option",
90+
description: "",
91+
icon: "/icon/database.svg",
92+
},
93+
{
94+
name: "Third option",
95+
value: "third_option",
96+
description: "",
97+
icon: "/icon/aws.png",
98+
},
99+
],
100+
}),
101+
},
102+
};
103+
104+
export const OptionsWithDescriptions: Story = {
105+
args: {
106+
value: "first_option",
107+
id: "options_parameter",
108+
parameter: createTemplateVersionParameter({
109+
name: "options_parameter",
110+
type: "string",
111+
description: "Parameter with options",
112+
options: [
113+
{
114+
name: "First option",
115+
value: "first_option",
116+
description: "This is a short description.",
117+
icon: "/icon/fedora.svg",
86118
},
87119
{
88120
name: "Second option",
89121
value: "second_option",
90-
description: "This is option 2",
122+
description:
123+
"This description is a little bit longer, but still not very long.",
91124
icon: "/icon/database.svg",
92125
},
93126
{
94127
name: "Third option",
95128
value: "third_option",
96-
description: "This is option 3",
129+
description: `
130+
In this description, we will explore the various ways in which this description
131+
is a big long boy. We'll discuss such things as, lots of words wow it's long, and
132+
boy howdy that's a number of sentences that this description contains. By the conclusion
133+
of this essay, I hope to reveal to you, the reader, that this description is just an
134+
absolute chonker. Just way longer than it actually needs to be. Absolutely massive.
135+
Very big.
136+
137+
> Wow, that description is straight up large. –Some guy, probably
138+
`,
97139
icon: "/icon/aws.png",
98140
},
99141
],
@@ -217,9 +259,16 @@ export const SmallBooleanType: Story = {
217259
},
218260
};
219261

220-
export const SmallOptionsType: Story = {
262+
export const SmallOptions: Story = {
263+
args: {
264+
...Options.args,
265+
size: "small",
266+
},
267+
};
268+
269+
export const SmallOptionsWithDescriptions: Story = {
221270
args: {
222-
...OptionsType.args,
271+
...OptionsWithDescriptions.args,
223272
size: "small",
224273
},
225274
};

‎site/src/components/RichParameterInput/RichParameterInput.tsx

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1+
import Box from "@mui/material/Box";
12
import FormControlLabel from "@mui/material/FormControlLabel";
23
import Radio from "@mui/material/Radio";
34
import RadioGroup from "@mui/material/RadioGroup";
45
import TextField, { TextFieldProps } from "@mui/material/TextField";
5-
import Box from "@mui/material/Box";
6-
import { FC } from "react";
6+
import Tooltip from "@mui/material/Tooltip";
7+
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
8+
import { type FC } from "react";
79
import { TemplateVersionParameter } from "api/typesGenerated";
810
import { MemoizedMarkdown } from "components/Markdown/Markdown";
911
import { Stack } from "components/Stack/Stack";
1012
import { colors } from "theme/colors";
1113
import { MultiTextField } from "./MultiTextField";
12-
import { Interpolation, Theme } from "@emotion/react";
1314

1415
const isBoolean = (parameter: TemplateVersionParameter) => {
1516
return parameter.type === "bool";
@@ -85,12 +86,8 @@ const styles = {
8586
height: "100%",
8687
objectFit: "contain",
8788
},
88-
radioOption: (theme) => ({
89-
display: "flex",
90-
alignItems: "center",
91-
gap: theme.spacing(1.5),
92-
}),
9389
optionIcon: {
90+
pointerEvents: "none",
9491
maxHeight: 20,
9592
width: 20,
9693

@@ -178,6 +175,9 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
178175
size,
179176
...props
180177
}) => {
178+
const theme = useTheme();
179+
const small = size === "small";
180+
181181
if (isBoolean(parameter)) {
182182
return (
183183
<RadioGroup
@@ -219,19 +219,46 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
219219
value={option.value}
220220
control={<Radio size="small" />}
221221
label={
222-
<span css={styles.radioOption}>
222+
<Stack direction="row" alignItems="center">
223223
{option.icon && (
224224
<img
225225
css={styles.optionIcon}
226-
alt="Parameter icon"
227226
src={option.icon}
228-
style={{
229-
pointerEvents: "none",
230-
}}
227+
alt="Parameter icon"
231228
/>
232229
)}
233-
{option.name}
234-
</span>
230+
{option.description ? (
231+
<Stack
232+
spacing={small ? 1 : 0}
233+
alignItems={small ? "center" : undefined}
234+
direction={small ? "row" : "column"}
235+
css={{
236+
padding: small ? undefined : `${theme.spacing(0.5)} 0`,
237+
}}
238+
>
239+
{small ? (
240+
<Tooltip
241+
title={
242+
<MemoizedMarkdown>
243+
{option.description}
244+
</MemoizedMarkdown>
245+
}
246+
>
247+
<Box>{option.name}</Box>
248+
</Tooltip>
249+
) : (
250+
<>
251+
<span>{option.name}</span>
252+
<MemoizedMarkdown css={styles.labelCaption}>
253+
{option.description}
254+
</MemoizedMarkdown>
255+
</>
256+
)}
257+
</Stack>
258+
) : (
259+
option.name
260+
)}
261+
</Stack>
235262
}
236263
/>
237264
))}

0 commit comments

Comments
 (0)