fix: remove mui components from <TagInput/> (#22234)

This pull-request removes the last instance of `@mui/material/Chip` from
the codebase. And removes it from our `vite.config.mts` so we no longer
have to cache it 🙂

site/src/components/TagInput/TagInput.tsx

@@ -1,5 +1,6 @@
-import Chip from "@mui/material/Chip";
-import FormHelperText from "@mui/material/FormHelperText";
+import { Badge } from "components/Badge/Badge";
+import { Button } from "components/Button/Button";
+import { X } from "lucide-react";
 import { type FC, useId, useMemo } from "react";
 
 type TagInputProps = {
@@ -26,20 +27,25 @@ export const TagInput: FC<TagInputProps> = ({
 
 	return (
 		<div>
-			<label
+			<div
 				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={itemIds[index]}
-						className="rounded-md bg-surface-secondary text-content-secondary h-7"
-						label={value}
-						size="small"
-						onDelete={() => {
-							onChange(values.filter((oldValue) => oldValue !== value));
-						}}
-					/>
+					<Badge key={itemIds[index]} size="md" className="gap-1 pr-1">
+						{value}
+						<Button
+							type="button"
+							variant="subtle"
+							className="p-0 min-w-0 h-auto [&_svg]:pr-0 rounded-full"
+							onClick={() => {
+								onChange(values.filter((oldValue) => oldValue !== value));
+							}}
+							aria-label={`Remove ${value}`}
+						>
+							<X className="size-3" />
+						</Button>
+					</Badge>
 				))}
 				<input
 					id={id}
@@ -74,11 +80,11 @@ export const TagInput: FC<TagInputProps> = ({
 						}
 					}}
 				/>
-			</label>
+			</div>
 
-			<FormHelperText className="text-content-secondary text-xs">
+			<p className="text-content-secondary text-xs mt-1">
 				{'Type "," to separate the values'}
-			</FormHelperText>
+			</p>
 		</div>
 	);
 };

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

@@ -444,10 +444,8 @@ describe("DynamicParameter", () => {
 				/>,
 			);
 
-			const deleteButtons = screen.getAllByTestId("CancelIcon");
-			await waitFor(async () => {
-				await userEvent.click(deleteButtons[0]);
-			});
+			const deleteButton = screen.getByRole("button", { name: "Remove tag1" });
+			await userEvent.click(deleteButton);
 
 			expect(mockOnChange).toHaveBeenCalledWith('["tag2"]');
 		});

site/src/theme/mui.ts

@@ -91,13 +91,6 @@ export const components = {
 			},
 		},
 	},
-	MuiChip: {
-		styleOverrides: {
-			root: {
-				backgroundColor: tw.zinc[600],
-			},
-		},
-	},
 	MuiMenu: {
 		defaultProps: {
 			anchorOrigin: {

site/vite.config.mts

@@ -135,7 +135,6 @@ export default defineConfig({
 			"@mui/material/CardActionArea",
 			"@mui/material/CardContent",
 			"@mui/material/Checkbox",
-			"@mui/material/Chip",
 			"@mui/material/CircularProgress",
 			"@mui/material/Collapse",
 			"@mui/material/CssBaseline",