CEC-5039: view and update sums_version column (#452)

* CEC-5039: view and update sums_version column

* move async function

* add deps

* useEffect

* add deps

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

@@ -11693,6 +11693,13 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                             </b>
                             : 
                           </p>
+                          <p>
+                            <b>
+                              Version
+                            </b>
+                            : 
+                             / 
+                          </p>
                           <p>
                             <b>
                               Model

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

@@ -36,6 +36,13 @@ exports[`VehicleDetailsTab Render 1`] = `
                   </b>
                   : 
                 </p>
+                <p>
+                  <b>
+                    Version
+                  </b>
+                  : 
+                   / 
+                </p>
                 <p>
                   <b>
                     Model

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

@@ -113,6 +113,9 @@ const MainForm = ({ vin }) => {
           <p>
             <b>ICCID</b>: {vehicle.iccid}
           </p>
+          <p>
+            <b>Version</b>: {vehicle.os_version} / {vehicle.sums_version}
+          </p>
           <p>
             <b>Model</b>: {vehicle.model}
           </p>

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

@@ -44,6 +44,13 @@ exports[`DetailsTab Render 1`] = `
                     </b>
                     : 
                   </p>
+                  <p>
+                    <b>
+                      Version
+                    </b>
+                    : 
+                     / 
+                  </p>
                   <p>
                     <b>
                       Model

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

@@ -260,6 +260,13 @@ exports[`CarStatus Render 1`] = `
                         </b>
                         : 
                       </p>
+                      <p>
+                        <b>
+                          Version
+                        </b>
+                        : 
+                         / 
+                      </p>
                       <p>
                         <b>
                           Model

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

@@ -107,6 +107,100 @@ exports[`VehicleUpdate Render 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="MuiAutocomplete-root MuiAutocomplete-fullWidth MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1kkal6p-MuiAutocomplete-root"
+              >
+                <div
+                  class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth MuiTextField-root css-17vbkzs-MuiFormControl-root-MuiTextField-root"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root"
+                    data-shrink="false"
+                    for="mui-0"
+                    id="mui-0-label"
+                  >
+                    SUMS Version
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-expanded="false"
+                      aria-invalid="false"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+                      id="mui-0"
+                      name="SUMS Version"
+                      role="combobox"
+                      spellcheck="false"
+                      type="text"
+                      value=""
+                    />
+                    <div
+                      class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+                    >
+                      <button
+                        aria-label="Clear"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                        tabindex="-1"
+                        title="Clear"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                          data-testid="CloseIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                          />
+                        </svg>
+                        <span
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                        />
+                      </button>
+                      <button
+                        aria-label="Open"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                        tabindex="-1"
+                        title="Open"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                          data-testid="ArrowDropDownIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                        <span
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                        />
+                      </button>
+                    </div>
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+                    >
+                      <legend
+                        class="css-yjsfm1"
+                      >
+                        <span>
+                          SUMS Version
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </div>
               <div
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
               >

src/components/Cars/Update/index.jsx

@@ -19,6 +19,8 @@ import {
   useVehicleContext,
   VehicleProvider
 } from "../../Contexts/VehicleContext";
+import SearchSelect from "../../SearchSelect/SearchSelect";
+import api from "../../../services/updatesAPI"
 import useStyles from "../../useStyles";
 
 
@@ -32,6 +34,8 @@ const MainForm = () => {
   const [redirect, setRedirect] = useState(null);
   const classes = useStyles();
 
+  const [sumsVersion, setSumsVersion] = useState("");
+
   const iccidEl = useRef(null);
   const modelEl = useRef(null);
   const yearEl = useRef(null);
@@ -84,6 +88,7 @@ const MainForm = () => {
   useEffect(() => {
     setSelectedLogLevel(vehicle.log_level ?? selectedLogLevel);
 
+    setSumsVersion(vehicle.sums_version);
     iccidEl.current.value = vehicle.iccid ?? ""
     modelEl.current.value = vehicle.model ?? "Ocean"
     yearEl.current.value = vehicle.year ?? "2022"
@@ -155,6 +160,7 @@ const MainForm = () => {
       const formData = {
         vin: vin,
         iccid: iccidEl.current.value,
+        sums_version: sumsVersion,
         model: modelEl.current.value,
         year: parseInt(yearEl.current.value),
         trim: trimEl.current.value,
@@ -189,6 +195,11 @@ const MainForm = () => {
     }
   };
 
+  async function getSums() {
+    const { data } = await api.getSUMSVersions(token);
+    return data.map((sums) => sums.version);
+  }
+
   if (redirect && redirect.length > 0) {
     return <Redirect to={redirect} />;
   }
@@ -227,6 +238,12 @@ const MainForm = () => {
           fullWidth
           inputRef={iccidEl}
         />
+        <SearchSelect
+          label="SUMS Version"
+          value={sumsVersion}
+          setValue={setSumsVersion}
+          getData={async () => getSums()}
+        />
         <TextField
           id="model"
           name="model"

src/components/SearchSelect/SearchSelect.jsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
+
+export default function SearchSelect({
+  label = "",
+  value = "",
+  setValue = () => { },
+  getData = () => [],
+  research = false,
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [searchCount, setSearchCount] = React.useState(0);
+  const [inputValue, setInputValue] = React.useState("");
+  const [options, setOptions] = React.useState([{ label: value }]);
+
+  React.useEffect(() => {
+    function canSearch() {
+      if (research || searchCount === 0) {
+        return true;
+      }
+      return false;
+    }
+
+    async function fetchData() {
+      setOptions(await getData(value));
+    }
+
+    if (!open && canSearch()) {
+      fetchData();
+      setSearchCount((searchCount) => searchCount + 1);
+    }
+  }, [open, value, research, searchCount, getData]);
+
+  return (
+    <Autocomplete
+      fullWidth
+      value={value}
+      onChange={(_, value) => setValue(value)}
+      inputValue={inputValue}
+      onInputChange={(_, inputValue) => setInputValue(inputValue)}
+      open={open}
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
+      options={options}
+      renderInput={(params) =>
+        <TextField
+          {...params}
+          label={label}
+          name={label}
+          variant="outlined"
+          margin="normal"
+        />
+      }
+    />
+  );
+}

src/components/SearchSelect/index.js

@@ -0,0 +1 @@
+export * from "./SearchSelect";