fix(site): Add helper text and prevent undefined when deleting empty value (#6757)

site/src/components/MultiTextField/MultiTextField.tsx

@@ -1,4 +1,5 @@
 import Chip from "@material-ui/core/Chip"
+import FormHelperText from "@material-ui/core/FormHelperText"
 import { makeStyles } from "@material-ui/core/styles"
 import { FC } from "react"
 
@@ -16,6 +17,7 @@ export const MultiTextField: FC<MultiTextFieldProps> = ({
   const styles = useStyles()
 
   return (
+    <div>
       <label className={styles.root}>
         {values.map((value, index) => (
           <Chip
@@ -41,10 +43,14 @@ export const MultiTextField: FC<MultiTextFieldProps> = ({
 
             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
-            return
             }
           }}
           onBlur={(event) => {
@@ -56,6 +62,9 @@ export const MultiTextField: FC<MultiTextFieldProps> = ({
           }}
         />
       </label>
+
+      <FormHelperText>{'Type "," to separate the values'}</FormHelperText>
+    </div>
   )
 }
 
@@ -63,7 +72,7 @@ const useStyles = makeStyles((theme) => ({
   root: {
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadius,
-    minHeight: theme.spacing(5),
+    minHeight: theme.spacing(6), // Chip height + paddings
     padding: theme.spacing(1.25, 1.75),
     fontSize: theme.spacing(2),
     display: "flex",