chore(site): refactor stories and tests from components directory (#9578)

* Refactor Alert * Refactor Avatar and its stories * Refactor AvatarData and its stories * Refactor CodeExample and its tests * Refactor ServiceBanner stories * Refactor Navbar and its tests * Refactor ServiceBanner stories * Refactor LicenseBannerView stories * Refactor DeploymentBannerView stories * Extract optionValue into a module * Refactor DeleteDialog stories * Refactor ConfirmDialog tests * Refactor EmptyState tests * Flat ErrorBoundaryState and refactor stories * Refactor Expander stories * Refactor FormFooter stories * Refactor FullPageForm stories * Refactor EnterpriseSnackbar stories * Refactor GroupAvatar stories * Refactor HelpTooltip stories and remove index * Remove unecessary types module from IconField * Refactor LoadingButton stories * Refactor Margins stories * Refactor Markdown stories * Refactor PageHeader stories * Refactor PageButton tests * Refactor Pill stories * Refactor Resources stories * Refactor RichParameterInput stories and flat MultiTextField * Remove unecessary Stack story * Refactor TableRowMenu stories * Refactor TemplateLayout stories * Refactor Typography props * Refactor UserAutocomplete * Refactor WorkspaceBuildLogs components and tests * Refactor WorkspaceStatusBadge stories * Fix wrong imports * Remove Example.args pattern * Fix wrong import * Refactor EmptyState stories * Refactor HelpTooltip stories * Remove not valid ErrorAlert story * Fix AvatarData story * Add border back to CodeExample * Fix Navbar story * Fix AgentRow proxy in the stories
2025-07-12 00:14:10 +00:00 · 2023-09-07 13:38:28 -03:00
parent 4f142fa959
commit 869d040cc6
85 changed files with 1382 additions and 1836 deletions
--- a/site/src/components/RichParameterInput/MultiTextField.tsx
+++ b/site/src/components/RichParameterInput/MultiTextField.tsx
@ -0,0 +1,107 @@
+import Chip from "@mui/material/Chip";
+import FormHelperText from "@mui/material/FormHelperText";
+import { makeStyles } from "@mui/styles";
+import { FC } from "react";
+
+export type MultiTextFieldProps = {
+  label: string;
+  id?: string;
+  values: string[];
+  onChange: (values: string[]) => void;
+};
+
+export const MultiTextField: FC<MultiTextFieldProps> = ({
+  label,
+  id,
+  values,
+  onChange,
+}) => {
+  const styles = useStyles();
+
+  return (
+    <div>
+      <label className={styles.root}>
+        {values.map((value, index) => (
+          <Chip
+            key={index}
+            label={value}
+            size="small"
+            onDelete={() => {
+              onChange(values.filter((oldValue) => oldValue !== value));
+            }}
+          />
+        ))}
+        <input
+          id={id}
+          aria-label={label}
+          className={styles.input}
+          onKeyDown={(event) => {
+            if (event.key === ",") {
+              event.preventDefault();
+              const newValue = event.currentTarget.value;
+              onChange([...values, newValue]);
+              event.currentTarget.value = "";
+              return;
+            }
+
+            if (event.key === "Backspace" && event.currentTarget.value === "") {
+              event.preventDefault();
+
+              if (values.length === 0) {
+                return;
+              }
+
+              const lastValue = values[values.length - 1];
+              onChange(values.slice(0, -1));
+              event.currentTarget.value = lastValue;
+            }
+          }}
+          onBlur={(event) => {
+            if (event.currentTarget.value !== "") {
+              const newValue = event.currentTarget.value;
+              onChange([...values, newValue]);
+              event.currentTarget.value = "";
+            }
+          }}
+        />
+      </label>
+
+      <FormHelperText>{'Type "," to separate the values'}</FormHelperText>
+    </div>
+  );
+};
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    minHeight: theme.spacing(6), // Chip height + paddings
+    padding: theme.spacing(1.25, 1.75),
+    fontSize: theme.spacing(2),
+    display: "flex",
+    flexWrap: "wrap",
+    gap: theme.spacing(1),
+    position: "relative",
+    margin: theme.spacing(1, 0, 0.5), // 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",
+    },
+  },
+}));