feat: add tag select component for dynamic params

jaaydenh · jaaydenh · commit 8539692e32bc · 2025-05-08T11:39:08.000Z
diff --git a/site/src/components/RichParameterInput/MultiTextField.tsx b/site/src/components/RichParameterInput/MultiTextField.tsx
@@ -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;
@@ -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={() => {
@@ -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();
@@ -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>>;
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -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,
@@ -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) => ({
@@ -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
@@ -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;
 }
