Skip to content

feat: add TagInput component for dynamic parameters #17719

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 8, 2025
Merged

feat: add TagInput component for dynamic parameters #17719

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8539692
feat: add tag select component for dynamic params
jaaydenh May 8, 2025
3b430bc
chore: rename MultiTextField to TagInput
jaaydenh May 8, 2025
fc8d8b5
chore: add TagInput stories
jaaydenh May 8, 2025
7648fb6
fix: format
jaaydenh May 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: add tag select component for dynamic params
  • Loading branch information
@jaaydenh
jaaydenh committed May 8, 2025
commit 8539692e32bc54a29d99d3fc44ee5b6d45a19f63
61 changes: 20 additions & 41 deletions site/src/components/RichParameterInput/MultiTextField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import type { Interpolation, Theme } from "@emotion/react";
import Chip from "@mui/material/Chip";
import FormHelperText from "@mui/material/FormHelperText";
import type { FC } from "react";
import { type FC, useId, useMemo } from "react";

export type MultiTextFieldProps = {
label: string;
Expand All @@ -16,12 +15,25 @@ export const MultiTextField: FC<MultiTextFieldProps> = ({
values,
onChange,
}) => {
const baseId = useId();

const itemIds = useMemo(() => {
return Array.from(
{ length: values.length },
(_, index) => `${baseId}-item-${index}`,
);
}, [baseId, values.length]);

return (
<div>
<label css={styles.root}>
<label
className="flex flex-wrap min-h-10 px-1.5 py-1.5 gap-2 border border-border border-solid relative rounded-md
focus-within:border-content-link focus-within:border-2 focus-within:-top-px focus-within:-left-px"
>
{values.map((value, index) => (
<Chip
key={index}
key={itemIds[index]}
className="rounded-md bg-surface-secondary text-content-secondary h-7"
label={value}
size="small"
onDelete={() => {
Expand All @@ -32,7 +44,7 @@ export const MultiTextField: FC<MultiTextFieldProps> = ({
<input
id={id}
aria-label={label}
css={styles.input}
className="flex-grow text-inherit p-0 border-none bg-transparent focus:outline-none"
onKeyDown={(event) => {
if (event.key === ",") {
event.preventDefault();
Expand Down Expand Up @@ -64,42 +76,9 @@ export const MultiTextField: FC<MultiTextFieldProps> = ({
/>
</label>

<FormHelperText>{'Type "," to separate the values'}</FormHelperText>
<FormHelperText className="text-content-secondary text-xs">
{'Type "," to separate the values'}
</FormHelperText>
</div>
);
};

const styles = {
root: (theme) => ({
border: `1px solid ${theme.palette.divider}`,
borderRadius: 8,
minHeight: 48, // Chip height + paddings
padding: "10px 14px",
fontSize: 16,
display: "flex",
flexWrap: "wrap",
gap: 8,
position: "relative",
margin: "8px 0 4px", // Have same margin than TextField

"&:has(input:focus)": {
borderColor: theme.palette.primary.main,
borderWidth: 2,
// Compensate for the border width
top: -1,
left: -1,
},
}),

input: {
flexGrow: 1,
fontSize: "inherit",
padding: 0,
border: "none",
background: "none",

"&:focus": {
outline: "none",
},
},
} satisfies Record<string, Interpolation<Theme>>;
49 changes: 34 additions & 15 deletions site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
type Option,
} from "components/MultiSelectCombobox/MultiSelectCombobox";
import { RadioGroup, RadioGroupItem } from "components/RadioGroup/RadioGroup";
import { MultiTextField } from "components/RichParameterInput/MultiTextField";
import {
Select,
SelectContent,
Expand Down Expand Up @@ -198,21 +199,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
);

case "multi-select": {
let values: string[] = [];

if (value) {
try {
const parsed = JSON.parse(value);
if (Array.isArray(parsed)) {
values = parsed;
}
} catch (e) {
console.error(
"Error parsing parameter value with form_type multi-select",
e,
);
}
}
const values = parseStringArrayValue(value);

// Map parameter options to MultiSelectCombobox options format
const options: Option[] = parameter.options.map((opt) => ({
Expand Down Expand Up @@ -259,6 +246,21 @@ const ParameterField: FC<ParameterFieldProps> = ({
);
}

case "tag-select": {
const values = parseStringArrayValue(value);

return (
<MultiTextField
id={parameter.name}
label={parameter.display_name || parameter.name}
values={values}
onChange={(values) => {
onChange(JSON.stringify(values));
}}
/>
);
}

case "switch":
return (
<Switch
Expand Down Expand Up @@ -387,6 +389,23 @@ const ParameterField: FC<ParameterFieldProps> = ({
}
};

const parseStringArrayValue = (value: string): string[] => {
let values: string[] = [];

if (value) {
try {
const parsed = JSON.parse(value);
if (Array.isArray(parsed)) {
values = parsed;
}
} catch (e) {
console.error("Error parsing parameter of type list(string)", e);
}
}

return values;
};

interface OptionDisplayProps {
option: PreviewParameterOption;
}
Expand Down