From 06867ea77f3f5a3aad8f3425cb909721219ebcb3 Mon Sep 17 00:00:00 2001
From: upfisker <135734425+upfisker@users.noreply.github.com>
Date: Thu, 15 Jun 2023 08:08:55 -0700
Subject: [PATCH] CEC-4572 Added tags for the selected car. (#360)

* Added tags for the selected car.

* Updated snapshots as UI changes.
---
 .../App/__snapshots__/App.test.js.snap        | 10 +++++
 .../Details/__snapshots__/index.test.jsx.snap | 10 +++++
 src/components/Cars/Status/Details/index.jsx  |  5 +++
 .../__snapshots__/DetailsTab.test.jsx.snap    | 10 +++++
 .../Status/__snapshots__/index.test.jsx.snap  | 10 +++++
 .../Update/__snapshots__/index.test.jsx.snap  | 37 +++++++++++++++++++
 src/components/Cars/Update/index.jsx          | 24 +++++++++++-
 7 files changed, 105 insertions(+), 1 deletion(-)

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 7cc160d..d5f2921 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/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"
                         >
diff --git a/src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap
index 8925b8e..fb68c0c 100644
--- a/src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap
+++ b/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"
               >
diff --git a/src/components/Cars/Status/Details/index.jsx b/src/components/Cars/Status/Details/index.jsx
index 0bf687f..99b8bf7 100644
--- a/src/components/Cars/Status/Details/index.jsx
+++ b/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}
diff --git a/src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap
index 46d8008..58bfd4f 100644
--- a/src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap
+++ b/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"
                 >
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index d28dffc..a4a0c43 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/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"
                     >
diff --git a/src/components/Cars/Update/__snapshots__/index.test.jsx.snap b/src/components/Cars/Update/__snapshots__/index.test.jsx.snap
index 91efa90..ee2b41a 100644
--- a/src/components/Cars/Update/__snapshots__/index.test.jsx.snap
+++ b/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"
diff --git a/src/components/Cars/Update/index.jsx b/src/components/Cars/Update/index.jsx
index 494c448..dc7c141 100644
--- a/src/components/Cars/Update/index.jsx
+++ b/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}