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

* Added tags for the selected car.

* Updated snapshots as UI changes.

src/components/App/__snapshots__/App.test.js.snap

@@ -11444,6 +11444,16 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                             : 
                           </p>
                         </div>
+                        <div
+                          class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+                        >
+                          <p>
+                            <b>
+                              Tags
+                            </b>
+                            : 
+                          </p>
+                        </div>
                         <div
                           class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                         >

src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap

@@ -147,6 +147,16 @@ exports[`VehicleDetailsTab Render 1`] = `
                   : 
                 </p>
               </div>
+              <div
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+              >
+                <p>
+                  <b>
+                    Tags
+                  </b>
+                  : 
+                </p>
+              </div>
               <div
                 class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
               >

src/components/Cars/Status/Details/index.jsx

@@ -147,6 +147,11 @@ const MainForm = ({ vin }) => {
             </p>
           </Grid>
         )}
+        <Grid item md={12} className={classes.textCenterAlign}>
+          <p>
+            <b>Tags</b>: {vehicle.tags}
+          </p>
+        </Grid>
         <Grid item md={12} className={classes.textCenterAlign}>
           <RoleWrap
             groups={groups}

src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap

@@ -155,6 +155,16 @@ exports[`DetailsTab Render 1`] = `
                     : 
                   </p>
                 </div>
+                <div
+                  class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+                >
+                  <p>
+                    <b>
+                      Tags
+                    </b>
+                    : 
+                  </p>
+                </div>
                 <div
                   class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                 >

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

@@ -336,6 +336,16 @@ exports[`CarStatus Render 1`] = `
                         : 
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+                    >
+                      <p>
+                        <b>
+                          Tags
+                        </b>
+                        : 
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                     >

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,
@@ -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}