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

* Added tags for the selected car.

* Updated snapshots as UI changes.

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}