CEC-4572 Added tags for the selected car. (#360)

* Added tags for the selected car.

* Updated snapshots as UI changes.

src/components/Cars/Update/__snapshots__/index.test.jsx.snap

@@ -1006,6 +1006,43 @@ exports[`VehicleUpdate Render 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined"
+                  data-shrink="true"
+                  for="tag"
+                  id="tag-label"
+                >
+                  Tags (comma separated, alphanumeric and - only)
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="tag"
+                    maxlength="1024"
+                    name="tags"
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
+                    >
+                      <span>
+                        Tags (comma separated, alphanumeric and - only)
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
               <button
                 class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"

src/components/Cars/Update/index.jsx

@@ -48,6 +48,7 @@ const MainForm = () => {
   const [maxDiskBufferSize, setMaxDiskBufferSize] = useState(0);
   const [dtcEnabled, setDTCEnabled] = useState(true);
   const debugMaskEl = useRef(null);
+  const tagsEl = useRef(null);
 
   const showDebugMask = (process.env.REACT_APP_ENABLE_DEBUGMASK === "1");
 
@@ -103,6 +104,8 @@ const MainForm = () => {
       debugMaskEl.current.value = vehicle.debug_mask ?? ""
     }
 
+    tagsEl.current.value = vehicle.tags ?? ""
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vehicle]);
 
@@ -145,6 +148,9 @@ const MainForm = () => {
         restraint: restraintEl.current.value,
         body_type: bodyTypeEl.current.value,
         log_level: selectedLogLevel,
+        tags: tagsEl.current.value.split(",").map(function (word) {
+          return word.trim();
+        }),
         canbus: {
           enabled: canbusEnabled,
           data_logger_enabled: canbusEnabled ? dataLoggerEnabled : false,
@@ -378,7 +384,7 @@ const MainForm = () => {
               disabled={!canbusEnabled}
             />
           } label="Data Logger Enabled" />
-           <FormControlLabel control={
+          <FormControlLabel control={
             <Checkbox
               checked={dtcEnabled}
               onChange={onDtcEnabledChange}
@@ -419,6 +425,22 @@ const MainForm = () => {
             inputRef={debugMaskEl}
           />
         )}
+        <TextField
+          id="tag"
+          name="tags"
+          label='Tags (comma separated, alphanumeric and - only)'
+          InputLabelProps={{
+            shrink: true
+          }}
+          defaultValue=""
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "1024",
+          }}
+          fullWidth
+          inputRef={tagsEl}
+        />
         <Button
           type="submit"
           disabled={busy}