CEC-6008 - Map flashpack numbers to OS numbers, and display in the UI

src/components/Contexts/VehicleContext.jsx

@@ -34,6 +34,7 @@ export const VehicleProvider = ({ children }) => {
   const [totalFlashpacks, setTotalFlashpacks] = useState(0);
   const [flashpackECUMappings, setFlashpackECUMappings] = useState([])
   const [totalFlashpackECUMappings, setTotalFlashpackECUMappings] = useState(0)
+  const [osVersions, setOSVersions] = useState([])
 
   const addConnections = async (cars, token) => {
     try {
@@ -331,7 +332,7 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
-  const addFlashpackVersion = async (model, trim, year, flashpack, carFlashpackVersions, token) => {
+  const addFlashpackVersion = async (model, trim, year, flashpack, osVersion, carFlashpackVersions, token) => {
     try {
       setBusy(true);
 
@@ -340,6 +341,7 @@ export const VehicleProvider = ({ children }) => {
         "car_trim": trim,
         "car_year": year,
         "flashpack": flashpack,
+        "os_version": osVersions,
         "ecu_versions": carFlashpackVersions,
       }
 
@@ -424,6 +426,21 @@ export const VehicleProvider = ({ children }) => {
     } finally {
       setBusy(false);
     }
+  };
+
+  const getOSVersions = async (token) => {
+    try {
+      setBusy(true);
+
+      const result = await api.getOSVersions(token);
+      if (result.error) {
+        throw new Error(`Get OS versions error. ${result.message}`);
+      }
+
+      setOSVersions(result.data);
+    } finally {
+      setBusy(false);
+    }
   }
 
   return (
@@ -466,6 +483,8 @@ export const VehicleProvider = ({ children }) => {
         deleteFlashpackVersion,
         deleteFlashpackVersionECUMapping,
         getCarFlashpackVersionInfo,
+        osVersions,
+        getOSVersions,
       }}
     >
       {children}

src/components/Flashpack/Add/__snapshots__/index.test.jsx.snap

@@ -244,6 +244,50 @@ exports[`FlashpackAdd Render 1`] = `
                     </fieldset>
                   </div>
                 </div>
+                <div
+                  class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+                    data-shrink="false"
+                  >
+                    OS Version
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+                    required=""
+                  >
+                    <select
+                      aria-invalid="false"
+                      class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
+                      required=""
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                      style="padding-left: 8px;"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-0"
+                        style="width: 0.01px;"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
                 <div
                   class="container"
                 >

src/components/Flashpack/Add/index.jsx

@@ -32,9 +32,12 @@ const MainForm = () => {
   const [trims, setTrims] = useLocalStorage("FLASHPACK_ADD_TRIMS", modelsTrimsYears.oceanTrims);
   const [years, setYears] = useLocalStorage("FLASHPACK_ADD_YEARS", modelsTrimsYears.oceanYears);
   const [flashpack, setFlashpack] = useState();
+  const [osVersion, setOSVersion] = useState();
   const [mappingInputs, setMappingInputs] = useState([{ ecuName: "", ecuVersion: "" }]);
   const {
     addFlashpackVersion,
+    getOSVersions,
+    osVersions,
     busy,
   } = useVehicleContext();
 
@@ -56,6 +59,19 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!token) return;
+        await getOSVersions(token);
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
   const onCarModelChange = (event) => {
     let newModel = event.target.value
 
@@ -87,6 +103,10 @@ const MainForm = () => {
     setFlashpack(event.target.value);
   }
 
+  const onOSVersionChange = (event) => {
+    setOSVersion(event.target.value);
+  }
+
   const onSubmit = async (event) => {
     try {
       event.preventDefault();
@@ -100,7 +120,7 @@ const MainForm = () => {
           })
       }
 
-      const result = await addFlashpackVersion(carModel, carTrim, parseInt(carYear), flashpack, carFlashpackVersions, token);
+      const result = await addFlashpackVersion(carModel, carTrim, parseInt(carYear), flashpack, osVersion, carFlashpackVersions, token);
       if (!result || result.error) return;
 
       setMessage(`Added ${carYear} ${carModel} ${carTrim} ${flashpack}`);
@@ -157,6 +177,7 @@ const MainForm = () => {
             onChange={onFlashpackChange}
             type="number"
           />
+          <DropDownList fullWidth required label="OS Version" data={osVersions} classes={classes} onChange={onOSVersionChange} value={osVersion} />
           <div className="container">
             {mappingInputs.map((item, index) => (
               <div className="input_container" key={index}>

src/components/Flashpack/__snapshots__/index.test.jsx.snap

@@ -245,6 +245,29 @@ exports[`Flashpack Render 1`] = `
                       </svg>
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      Part of OS Version
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
                   <th
                     class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                     scope="col"

src/components/Flashpack/index.jsx

@@ -30,6 +30,10 @@ const tableColumns = [
     id: "flashpack",
     label: "Flashpack Number",
   },
+  {
+    id: "os_version",
+    label: "Part of OS Version",
+  },
   {
     id: "car_model",
     label: "Model",
@@ -210,6 +214,9 @@ const MainForm = () => {
                   {row.flashpack}
                 </Link>
               </TableCell>
+              <TableCell align="center">
+                {row.os_version}
+              </TableCell>
               <TableCell align="center">
                 {row.car_model}
               </TableCell>
@@ -245,7 +252,7 @@ const MainForm = () => {
             ) : (
               <TablePagination
                 rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={5}
+                colSpan={6}
                 count={totalFlashpacks}
                 rowsPerPage={pageSize}
                 page={pageIndex}

src/services/vehiclesAPI.js

@@ -360,6 +360,17 @@ const vehiclesAPI = {
     }).then(fetchRespHandler)
       .catch(errorHandler)
   },
+
+  getOSVersions: async (token) => {
+    return fetch(`${API_ENDPOINT}/manifest/sums/active_os_versions/`, {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    }).then(fetchRespHandler)
+      .catch(errorHandler)
+  },
 };
 
 export default vehiclesAPI;