CEC-4525: add support for /tags endpoint and implement a new action for it (#361)

* add action for adding tags

src/components/Controls/TextInputList/index.jsx

@@ -0,0 +1,97 @@
+import { useState, useEffect } from "react";
+import { Cancel } from "@mui/icons-material";
+import { TextField } from "@mui/material";
+import { Box } from "@mui/system";
+import { useStatusContext } from "../../Contexts/StatusContext";
+
+const TextInput = ({ text, handleDelete }) => {
+  return (
+    <Box sx={{
+      display: "flex",
+      alignItems: "center",
+      gap: "2px",
+      p: "2px 4px",
+      backgroundColor: "#ccc",
+      borderRadius: 1,
+    }}>
+      {text}
+      <Cancel
+        sx={{
+          color: "#666",
+          fontSize: "16px",
+          cursor: "pointer",
+        }}
+        onClick={() => handleDelete(text)}
+      />
+    </Box>
+  );
+}
+
+const TextInputList = ({
+  onChange = () => {},
+  validate = () => {},
+  label
+}) => {
+  const [textList, setTextList] = useState([]);
+  const [input, setInput] = useState("");
+
+  const { setMessage } = useStatusContext();
+
+  const handleDelete = (textToDelete) => {
+    setTextList(textList => textList.filter(text => text !== textToDelete));
+  }
+
+  const handleOnChange = (event) => {
+    const char = event.nativeEvent.data;
+    if (char === ",") {
+      try {
+        if (validate) validate(input);
+        setTextList(textList => [...textList, input]);
+        setInput("");
+      } catch {
+        setMessage(`"${input}" is not valid.`);
+      }
+    } else {
+      setInput(event.target.value);
+    }
+  }
+
+  useEffect(() => {
+    onChange(input.length ? [...textList, input] : [...textList]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [textList, input]);
+
+  return (
+    <div>
+      <TextField
+        data-testid="text-input-list"
+        name="text"
+        label={`${label} (use commas to add multiple)`}
+        value={input}
+        variant="outlined"
+        margin="normal"
+        required
+        size="small"
+        fullWidth
+        onChange={handleOnChange}
+      />
+
+      <Box sx={{
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 1,
+        pr: 1,
+      }}>
+        {textList.map((text) => (
+          <TextInput
+            text={text}
+            handleDelete={handleDelete}
+            key={text}
+          />
+        ))}
+      </Box>
+    </div>
+  );
+};
+
+export default TextInputList;