Merge branch 'main' into CEC-5542

2024-05-02 09:57:09 -04:00
parent 3bf93a8940 5817a11162
commit cd6ac135d6
15 changed files with 357 additions and 102 deletions
--- a/src/components/Contexts/VehicleContext.jsx
+++ b/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([{ "value": "", "label": "None" }])

  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": osVersion,
        "ecu_versions": carFlashpackVersions,
      }

@@ -424,6 +426,30 @@ 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}`);
+      }
+
+      var data = [{ "value": "", "label": "None" }]
+
+      for (let i = 0; i < result.data.length; i++) {
+        data.push({
+          "value": result.data[i],
+          "label": result.data[i]
+        });
+      }
+
+      setOSVersions(data);
+    } finally {
+      setBusy(false);
+    }
  }

  return (
@@ -466,6 +492,8 @@ export const VehicleProvider = ({ children }) => {
        deleteFlashpackVersion,
        deleteFlashpackVersionECUMapping,
        getCarFlashpackVersionInfo,
+        osVersions,
+        getOSVersions,
      }}
    >
      {children}
--- a/src/components/Controls/CarSelectionTable/index.jsx
+++ b/src/components/Controls/CarSelectionTable/index.jsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 import {
  Checkbox,
@@ -17,9 +16,9 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import { logger } from "../../../services/monitoring";
-import ConnectedIcon from "../../Controls/ConnectedIcon";
 import ECUList from "../../Controls/ECUList";
 import { useLocalStorage } from "../../useLocalStorage";
+import { VehicleTeaser } from "../../VehicleTeaser";

 const tableColumns = [
  {
@@ -164,12 +163,11 @@ const CarSelectionTable = (props) => {
                  </TableCell>
                )}
                <TableCell align="center">
-                  <ConnectedIcon
-                    connected={row.connected}
-                    connectedHMI={row.connectedHMI}
-                    style={{ marginRight: 3 }}
+                  <VehicleTeaser
+                    vin={row.vin}
+                    trex={row.connected}
+                    icc={row.connectedHMI}
                  />
-                  <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
                  {row.ecu_list && (
                    <>
                      <br />
--- a/src/components/Controls/ConnectedIcon/index.jsx
+++ b/src/components/Controls/ConnectedIcon/index.jsx
@@ -1,36 +1,78 @@
 import React from "react";
 import PropTypes from "prop-types";
-import CheckCircleIcon from "@material-ui/icons/CheckCircle";
-import CheckBoxIcon from "@material-ui/icons/CheckBox";
+import DoneAllIcon from "@material-ui/icons/DoneAll";
+import ClearIcon from "@material-ui/icons/Clear";
+import DoneIcon from "@material-ui/icons/Done";
 import { Tooltip } from "@material-ui/core";

 const ConnectedIcon = (props) => {
-  if (props.connected || props.connectedHMI) {
-    return (
-      <span style={props.style}>
-        {props.connected && (
-          <Tooltip title="TBOX">
-            <CheckCircleIcon
-              style={{ color: "Green", fontSize: 12, marginRight: 3 }}
-            />
-          </Tooltip>
-        )}
-        {props.connectedHMI && (
-          <Tooltip title="ICC">
-            <CheckBoxIcon
-              style={{ color: "Blue", fontSize: 12, marginRight: 3 }}
-            />
-          </Tooltip>
-        )}
-      </span>
-    );
-  }
+  let title = tooltip(props.connected, props.connectedHMI);

-  return null;
+  const content = () => {
+    if (props.connected && props.connectedHMI) {
+      return (
+        <Tooltip title={title}>
+          <DoneAllIcon
+            fontSize="small"
+            style={{ color: "green" }}
+          />
+        </Tooltip>
+      );
+    }
+
+    if (props.connected || props.connectedHMI) {
+      let color = "blue";
+      if (props.connected) {
+        color = "green"
+      }
+
+      return (
+        <Tooltip title={title}>
+          <DoneIcon
+            fontSize="small"
+            style={{ color }}
+          />
+        </Tooltip>
+      );
+    }
+
+    return (
+      <Tooltip title={title}>
+        <ClearIcon
+          fontSize="small"
+          style={{ color: "red" }}
+        />
+      </Tooltip>
+    );
+  };
+
+  return (
+    <span style={props.style}>
+      {content()}
+    </span>
+  )
 };

 ConnectedIcon.propTypes = {
  connected: PropTypes.bool.isRequired,
 };

+function tooltip(trex, icc) {
+  const status = [];
+
+  if (trex) {
+    status.push("TREX");
+  }
+
+  if (icc) {
+    status.push("ICC");
+  }
+
+  if (!status.length) {
+    return "OFFLINE";
+  }
+
+  return status.join(" & ");
+}
+
 export default ConnectedIcon;
--- a/src/components/Flashpack/Add/snapshots/index.test.jsx.snap
+++ b/src/components/Flashpack/Add/snapshots/index.test.jsx.snap
@@ -91,11 +91,6 @@ exports[`FlashpackAdd Render 1`] = `
                      class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
                      required=""
                    >
-                      <option
-                        value="Base"
-                      >
-                        Base
-                      </option>
                      <option
                        value="Sport"
                      >
@@ -244,6 +239,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"
                >
--- a/src/components/Flashpack/Add/index.jsx
+++ b/src/components/Flashpack/Add/index.jsx
@@ -27,14 +27,17 @@ const MainForm = () => {
  const [redirect, setRedirect] = useState(null);
  const { setMessage, setTitle, setSitePath } = useStatusContext();
  const [carModel, setCarModel] = useLocalStorage("FLASHPACK_ADD_MODEL", "Ocean");
-  const [carTrim, setCarTrim] = useLocalStorage("FLASHPACK_ADD_TRIM", "Base");
+  const [carTrim, setCarTrim] = useLocalStorage("FLASHPACK_ADD_TRIM", "Sport");
  const [carYear, setCarYear] = useLocalStorage("FLASHPACK_ADD_YEAR", 2024);
  const [trims, setTrims] = useLocalStorage("FLASHPACK_ADD_TRIMS", modelsTrimsYears.oceanTrims);
  const [years, setYears] = useLocalStorage("FLASHPACK_ADD_YEARS", modelsTrimsYears.oceanYears);
-  const [flashpack, setFlashpack] = useState();
+  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}>
--- a/src/components/Flashpack/snapshots/index.test.jsx.snap
+++ b/src/components/Flashpack/snapshots/index.test.jsx.snap
@@ -79,11 +79,6 @@ exports[`Flashpack Render 1`] = `
                  aria-invalid="false"
                  class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
                >
-                  <option
-                    value="Base"
-                  >
-                    Base
-                  </option>
                  <option
                    value="Sport"
                  >
@@ -245,6 +240,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"
--- a/src/components/Flashpack/index.jsx
+++ b/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",
@@ -58,7 +62,7 @@ const MainForm = () => {
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [rowToDelete, setRowToDelete] = useState({});
  const [model, setModel] = useLocalStorage("FLASHPACKS_MODEL", "Ocean");
-  const [trim, setTrim] = useLocalStorage("FLASHPACKS_TRIM", "Base");
+  const [trim, setTrim] = useLocalStorage("FLASHPACKS_TRIM", "Sport");
  const [year, setYear] = useLocalStorage("FLASHPACKS_YEAR", 2024);
  const [trims, setTrims] = useLocalStorage("FLASHPACKS_TRIMS", modelsTrimsYears.oceanTrims);
  const [years, setYears] = useLocalStorage("FLASHPACKS_YEARS", modelsTrimsYears.oceanYears);
@@ -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}
--- a/src/components/Flashpack/modelsTrimsYears.json
+++ b/src/components/Flashpack/modelsTrimsYears.json
@@ -6,10 +6,6 @@
    }
  ],
  "oceanTrims": [
-    {
-      "value": "Base",
-      "label": "Base"
-    },
    {
      "value": "Sport",
      "label": "Sport"
--- a/src/components/Fleets/Status/Vehicles/Table/snapshots/index.test.jsx.snap
+++ b/src/components/Fleets/Status/Vehicles/Table/snapshots/index.test.jsx.snap
@@ -191,7 +191,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                      role="button"
                      tabindex="0"
                    >
-                      VIN
+                      Vehicle
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
--- a/src/components/Fleets/Status/Vehicles/Table/index.jsx
+++ b/src/components/Fleets/Status/Vehicles/Table/index.jsx
@@ -23,18 +23,19 @@ import {
 } from "../../../../Contexts/FleetContext";
 import { useStatusContext } from "../../../../Contexts/StatusContext";
 import { useUserContext } from "../../../../Contexts/UserContext";
+import { VehicleProvider } from "../../../../Contexts/VehicleContext";
 import SearchField from "../../../../Controls/SearchField";
 import TableHeaderSortable from "../../../../Table/HeaderSortable";
 import { useLocalStorage } from "../../../../useLocalStorage";
-import ConnectedIcon from "../../../../Controls/ConnectedIcon";
 import BulkActions from "../../../../BulkActions";
 import Battery from "../../../../Battery";
+import { VehicleTeaserController as VehicleTeaser } from "../../../../VehicleTeaser";
 import useStyles from "../../../../useStyles";

 const tableColumns = [
  {
-    id: "vin",
-    label: "VIN",
+    id: "vehicle",
+    label: "Vehicle",
  },
  {
    id: "trex_version",
@@ -213,54 +214,53 @@ const MainForm = ({ name }) => {
          selectCount={selected.length}
          rowCount={fleetVehicles.length}
        />
-        <TableBody>
-          {fleetVehicles && fleetVehicles.map((car) => {
-            const isSelected = selected.includes(car.vin);
-            return (car.vin && <TableRow key={"row" + car.vin}>
-              <TableCell padding="checkbox">
-                <Checkbox
-                  checked={isSelected}
-                  onChange={() => handleSelect(car.vin, !isSelected)}
-                />
-              </TableCell>
-              <TableCell key={"cell" + car.vin} align="center">
-                {(car.connected || car.connectedHMI) &&
-                  <ConnectedIcon
-                    key={"icon" + car.vin}
-                    connected={car.connected}
-                    connectedHMI={car.connectedHMI}
-                    style={{ marginRight: 3 }}
+        <VehicleProvider>
+          <TableBody>
+            {fleetVehicles && fleetVehicles.map((car) => {
+              const isSelected = selected.includes(car.vin);
+              return (car.vin && <TableRow key={"row" + car.vin}>
+                <TableCell padding="checkbox">
+                  <Checkbox
+                    checked={isSelected}
+                    onChange={() => handleSelect(car.vin, !isSelected)}
                  />
-                }
-                <Link key={"link" + car.vin} to={`/vehicle-status/${car.vin}`}>{car.vin}</Link>
-              </TableCell>
-              <TableCell key={"cell2" + car.vin} align="center">{car.trex_version}</TableCell>
-              <TableCell key={"cell3" + car.car_update_name}>
-                <Tooltip key={"cell3tooltip"} title={`${car.car_update_id} / ${car.car_update_type}`}>
-                  <Link to={`/vehicle-status/${car.vin}/${car.car_update_id}`} className={classes.truncateCell}>
-                    {car.car_update_name}
-                  </Link>
-                </Tooltip>
-              </TableCell>
-              <TableCell key={"cell4" + car.vin}>
-                {car.car_update_status}
-                {car.car_update_progress > -1 && (
-                  <LinearProgress variant="determinate" value={car.car_update_progress} />
-                )}
-              </TableCell>
-              <TableCell key={"cell5" + car.vin} align="left">
-                <Battery percent={car.charge} charge={car.charge_type} />
-              </TableCell>
-              <TableCell key={"cell6" + car.vin}>
-                {car.voltage > 0 && `${car.voltage}V`}
-              </TableCell>
-              <TableCell key={"cell7" + car.vin}>
-                {car.park ? "Yes" : "No"}
-              </TableCell>
-            </TableRow>
-            )
-          })}
-        </TableBody>
+                </TableCell>
+                <TableCell key={"cell" + car.vin} align="center">
+                  <VehicleTeaser
+                    vin={car.vin}
+                    icc={car.connectedHMI}
+                    trex={car.connected}
+                    token={token}
+                  />
+                </TableCell>
+                <TableCell key={"cell2" + car.vin} align="center">{car.trex_version}</TableCell>
+                <TableCell key={"cell3" + car.car_update_name}>
+                  <Tooltip key={"cell3tooltip"} title={`${car.car_update_id} / ${car.car_update_type}`}>
+                    <Link to={`/vehicle-status/${car.vin}/${car.car_update_id}`} className={classes.truncateCell}>
+                      {car.car_update_name}
+                    </Link>
+                  </Tooltip>
+                </TableCell>
+                <TableCell key={"cell4" + car.vin}>
+                  {car.car_update_status}
+                  {car.car_update_progress > -1 && (
+                    <LinearProgress variant="determinate" value={car.car_update_progress} />
+                  )}
+                </TableCell>
+                <TableCell key={"cell5" + car.vin} align="left">
+                  <Battery percent={car.charge} charge={car.charge_type} />
+                </TableCell>
+                <TableCell key={"cell6" + car.vin}>
+                  {car.voltage > 0 && `${car.voltage}V`}
+                </TableCell>
+                <TableCell key={"cell7" + car.vin}>
+                  {car.park ? "Yes" : "No"}
+                </TableCell>
+              </TableRow>
+              )
+            })}
+          </TableBody>
+        </VehicleProvider>
        <TableFooter>
          <TableRow>
            <TablePagination
--- a/src/components/Fleets/Status/snapshots/VehiclesTab.test.jsx.snap
+++ b/src/components/Fleets/Status/snapshots/VehiclesTab.test.jsx.snap
@@ -190,7 +190,7 @@ exports[`VehiclesTab Render 1`] = `
                  role="button"
                  tabindex="0"
                >
-                  VIN
+                  Vehicle
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
--- a/src/components/VehicleTeaser/index.jsx
+++ b/src/components/VehicleTeaser/index.jsx
@@ -0,0 +1,72 @@
+import { useRef, useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import ConnectedIcon from "../Controls/ConnectedIcon";
+import { useVehicleContext } from "../Contexts/VehicleContext";
+import useStyles from "../useStyles";
+import { useIntersectObserver } from "../../hooks";
+
+// Prevent fetching missing data by not including `token` prop
+
+export function VehicleTeaserController(props) {
+  const el = useRef(null);
+  const isVisible = useIntersectObserver(el, "0px", true);
+  const [isMissingData, setIsMissingData] = useState(false);
+
+  const { getVehicle, vehicle } = useVehicleContext();
+
+  const classes = useStyles();
+
+  useEffect(() => {
+    if (props.trim === undefined) {
+      setIsMissingData(true);
+    }
+  }, [isVisible, props.trim]);
+
+  useEffect(() => {
+    if (isVisible && props.token) {
+      getVehicle(props.vin, props.token)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isMissingData, isVisible, props.vin, props.token]);
+
+  if (!props.vin) {
+    return (
+      <div className={classes.alignBaseline}>
+        Missing VIN
+      </div>
+    );
+  }
+
+  return (
+    <div ref={el}>
+      <VehicleTeaser
+        vin={props.vin}
+        trex={props.trex}
+        icc={props.icc}
+        trim={props.trim || vehicle.trim}
+      />
+    </div>
+  );
+}
+
+export function VehicleTeaser(props) {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.alignBaseline}>
+      <ConnectedIcon
+        connected={props.trex}
+        connectedHMI={props.icc}
+        style={{ display: "flex", marginRight: 3 }}
+      />
+      <Link to={`/vehicle-status/${props.vin}`}>
+        {props.vin}
+      </Link>
+      <Stack direction="row" spacing={1} style={{ marginLeft: 3 }}>
+        {props.trim && <Chip label={props.trim} size="small" />}
+      </Stack>
+    </div>
+  )
+}
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -1,2 +1,4 @@
 export { useTimeoutState } from "./useTimeoutState";
 export { useUpdateManifest } from "./useUpdateManifest";
+export { useIntersectObserver } from "./useIntersectObserver";
+
--- a/src/hooks/useIntersectObserver.js
+++ b/src/hooks/useIntersectObserver.js
@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+export function useIntersectObserver(element, offset, once) {
+  const [isInViewport, setIsInViewport] = useState(false);
+
+  useEffect(() => {
+    const current = element?.current;
+    const observer = new IntersectionObserver(([entry]) => {
+      setIsInViewport(entry.isIntersecting);
+      if (entry.isIntersecting && once) {
+        observer.unobserve(current);
+      }
+    }, { rootMargin: offset });
+
+    current && observer.observe(current);
+
+    return () => current && observer.unobserve(current);
+  }, [element, offset, once]);
+
+  return isInViewport;
+}
--- a/src/services/vehiclesAPI.js
+++ b/src/services/vehiclesAPI.js
@@ -360,6 +360,17 @@ const vehiclesAPI = {
    }).then(fetchRespHandler)
      .catch(errorHandler)
  },
+
+  getOSVersions: async (token) => {
+    return fetch(`${API_ENDPOINT}/manifests_active_os_versions`, {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    }).then(fetchRespHandler)
+      .catch(errorHandler)
+  },
 };

 export default vehiclesAPI;