CEC-4498 update fleetsAPI.addFleetVehicle to send vehicle in an array (#351)

* CEC-4498 update fleet-vehicle-add api to take an array of vehicles

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

@@ -4380,7 +4380,7 @@ exports[`App Route /package-deploy authenticated 1`] = `
                     data-testid="mocked-vehicleprovider"
                   >
                     <div
-                      class="makeStyles-paper-0 makeStyles-tableSize-0"
+                      class="makeStyles-paper-0"
                     >
                       <table
                         class="MuiTable-root"
@@ -12267,7 +12267,7 @@ exports[`App Route /vehicles authenticated 1`] = `
                 />
               </div>
               <div
-                class="makeStyles-paper-0 makeStyles-tableSize-0"
+                class="makeStyles-paper-0"
               >
                 <table
                   class="MuiTable-root"

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

@@ -127,7 +127,7 @@ exports[`VehicleTable Render 1`] = `
               />
             </div>
             <div
-              class="makeStyles-paper-0 makeStyles-tableSize-0"
+              class="makeStyles-paper-0"
             >
               <table
                 class="MuiTable-root"

src/components/Contexts/FleetContext.jsx

@@ -122,14 +122,17 @@ export const FleetProvider = ({ children }) => {
     }
   };
 
-  const addFleetVehicle = async (name, vehicle, token) => {
+  const addFleetVehicles = async (name, vehicles, token) => {
     try {
       setBusy(true);
 
       validateFleetName(name);
-      validateVIN(vehicle.vin);
 
-      const result = await api.addFleetVehicle(name, vehicle, token);
+      for (const vin of vehicles.vins) {
+        validateVIN(vin);
+      }
+
+      const result = await api.addFleetVehicles(name, vehicles, token);
       if (result.error) {
         throw new Error(`Add fleet vehicle error. ${result.message}`);
       }
@@ -250,7 +253,7 @@ export const FleetProvider = ({ children }) => {
         fleetVehicles,
         totalFleetVehicles,
         getFleetVehicles,
-        addFleetVehicle,
+        addFleetVehicles,
         deleteFleetVehicle,
 
         fleetCANFilters,

src/components/Contexts/FleetContext.test.jsx

@@ -391,14 +391,14 @@ describe("FleetContext", () => {
     });
   });
 
-  describe("addFleetVehicle", () => {
+  describe("addFleetVehicles", () => {
     beforeEach(async () => {
       const TestComp = () => {
-        const { busy, addFleetVehicle } = useFleetContext();
+        const { busy, addFleetVehicles } = useFleetContext();
         const { message, setMessage } = useStatusContext();
         const add = async (name, vehicle) => {
           try {
-            await addFleetVehicle(name, vehicle);
+            await addFleetVehicles(name, vehicle);
           } catch (e) {
             setMessage(e.message);
           }
@@ -417,8 +417,8 @@ describe("FleetContext", () => {
               onClick={() => add({})}
             />
             <button
-              data-testid="addFleetVehicle"
+              data-testid="addFleetVehicles"
-              onClick={() => add("US-TEST", { vin: "TESTVIN1234567890" })}
+              onClick={() => add("US-TEST", { vins: ["TESTVIN1234567890"] })}
             />
           </>
         );
@@ -456,8 +456,8 @@ describe("FleetContext", () => {
       checkBaseResults("Invalid name", "false");
     });
 
-    it("addFleetVehicle", async () => {
+    it("addFleetVehicles", async () => {
-      fireEvent.click(screen.getByTestId("addFleetVehicle"));
+      fireEvent.click(screen.getByTestId("addFleetVehicles"));
       await waitFor(() =>
         expect(screen.getByTestId("busy").innerHTML).toEqual("false")
       );

src/components/Contexts/__mocks__/FleetContext.jsx

@@ -63,7 +63,7 @@ export const useFleetContext = () => ({
   fleetVehicles,
   totalFleetVehicles,
   getFleetVehicles: jest.fn(),
-  addFleetVehicle: jest.fn(),
+  addFleetVehicles: jest.fn(),
   deleteFleetVehicle: jest.fn(),
 
   fleetCANFilters,

src/components/Controls/CarSelectionTable/index.jsx

@@ -132,7 +132,7 @@ const CarSelectionTable = (props) => {
   }, [search]);
 
   return (
-    <div className={clsx(classes.paper, classes.tableSize)}>
+    <div className={clsx(classes.paper)}>
       <Table>
         <TableHeaderSortable
           classes={classes}

src/components/Fleets/Status/Vehicles/Add/index.jsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Redirect, useParams } from "react-router";
 import {
+  Box,
   Button,
   Checkbox,
   FormControlLabel,
@@ -8,7 +9,11 @@ import {
   FormLabel,
   Radio,
   RadioGroup,
-  TextField
+  TextField,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Typography,
 } from "@material-ui/core";
 
 import useStyles from "../../../../useStyles";
@@ -19,11 +24,14 @@ import {
 import { useStatusContext } from "../../../../Contexts/StatusContext";
 import { useUserContext } from "../../../../Contexts/UserContext";
 import { logger } from "../../../../../services/monitoring";
+import { VehicleProvider } from "../../../../Contexts/VehicleContext";
+import CarSelectionTable from "../../../../Controls/CarSelectionTable";
+import SearchField from "../../../../Controls/SearchField";
 
 const MainForm = () => {
   const { name } = useParams();
   const { setMessage, setTitle, setSitePath } = useStatusContext();
-  const { addFleetVehicle, busy } = useFleetContext();
+  const { addFleetVehicles, busy } = useFleetContext();
   const {
     token: {
       idToken: { jwtToken: token },
@@ -32,7 +40,8 @@ const MainForm = () => {
   const classes = useStyles();
   const [redirect, setRedirect] = useState(null);
 
-  const vinEl = useRef(null);
+  const [vins, setVins] = useState([]);
+  const [search, setSearch] = useState("");
   const [selectedLogLevel, setSelectedLogLevel] = useState("info");
   const [canbusEnabled, setCANBusEnabled] = useState(true);
   const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
@@ -58,6 +67,30 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const handleSearch = (query) => {
+    setVins([]);
+    setSearch(query);
+  };
+
+  const handleSelectAll = (cars) => {
+    setVins(cars);
+  };
+
+  const handleSelect = (event, key) => {
+    try {
+      let newVins;
+      if (event.target.checked) {
+        newVins = [...vins];
+        newVins.push(key);
+      } else {
+        newVins = vins.filter((vin) => vin !== key);
+      }
+      setVins(newVins);
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
   const onLogLevelChange = (event) => {
     setSelectedLogLevel(event.target.value);
   }
@@ -79,11 +112,11 @@ const MainForm = () => {
   }
 
   const onSubmit = async (event) => {
-    try {
+    event.preventDefault();
-      event.preventDefault();
 
+    try {
       const formData = {
-        vin: vinEl.current.value,
+        vins,
         log_level: selectedLogLevel,
         canbus: {
           enabled: canbusEnabled,
@@ -93,9 +126,9 @@ const MainForm = () => {
         }
       };
 
-      const result = await addFleetVehicle(name, formData, token);
+      const result = await addFleetVehicles(name, formData, token);
 
-      setMessage(`Added ${result.vin}`);
+      setMessage(`Added ${result.vins.join(", ")}`);
       setRedirect(`/fleet/${name}#vehicles`);
     } catch (e) {
       setMessage(e.message);
@@ -110,94 +143,106 @@ const MainForm = () => {
   return (
     <div className={classes.paper}>
       <form className={classes.form} noValidate action="{onSubmit}">
-        <TextField
+        <SearchField classes={classes} onSearch={handleSearch}/>
-          id="vin"
+        <VehicleProvider sx={{ height: "auto" }}>
-          name="vin"
+          <CarSelectionTable
-          label="VIN"
+            classes={classes}
-          variant="outlined"
+            token={token}
-          margin="normal"
+            multiSelect={true}
-          inputProps={{
+            search={{search}}
-            maxLength: "17",
+            selected={vins}
-          }}
+            onSelect={handleSelect}
-          required
+            onSelectAll={handleSelectAll}
-          fullWidth
-          inputRef={vinEl}
-        />
-        <FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
-        <RadioGroup
-          row
-          aria-labelledby="demo-row-radio-buttons-group-label"
-          name="log-level-group"
-          value={selectedLogLevel}
-          onChange={onLogLevelChange}
-          margin="normal"
-        >
-          <FormControlLabel value="trace" control={<Radio />} label="Trace" />
-          <FormControlLabel value="debug" control={<Radio />} label="Debug" />
-          <FormControlLabel value="info" control={<Radio />} label="Info" />
-          <FormControlLabel value="warning" control={<Radio />} label="Warning" />
-          <FormControlLabel value="error" control={<Radio />} label="Error" />
-          <FormControlLabel value="critical" control={<Radio />} label="Critical" />
-        </RadioGroup>
-        <FormLabel id="demo-row-radio-buttons-group-label">CAN Bus</FormLabel>
-        <FormGroup>
-          <FormControlLabel control={
-            <Checkbox
-              checked={canbusEnabled}
-              onChange={onCANBusChange}
-            />
-          } label="CAN Bus Enabled" />
-          <TextField
-            id="max_mem_buffer_size"
-            name="max_mem_buffer_size"
-            label='Max Memory Buffer Size (0 uses default size)'
-            value={maxMemBufferSize}
-            onChange={onMaxMemBufferSizeChange}
-            variant="outlined"
-            margin="normal"
-            inputProps={{
-              maxLength: "12",
-            }}
-            type="number"
-            disabled={!canbusEnabled}
-            required
-            fullWidth
           />
-          <FormControlLabel control={
+        </VehicleProvider>
-            <Checkbox
+
-              checked={dataLoggerEnabled}
+        <Box className={classes.fleetVehicleAddSubmit}>
-              onChange={onDataLoggerChange}
+          <Accordion>
-              disabled={!canbusEnabled}
+            <AccordionSummary>
-            />
+              <Typography>Additional Options</Typography>
-          } label="Data Logger Enabled" />
+            </AccordionSummary>
-        </FormGroup>
+            <AccordionDetails>
-        <TextField
+              <Box sx={{ width: "100%" }}>
-          id="max_disk_buffer_size"
+                <FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
-          name="max_disk_buffer_size"
+                  <RadioGroup
-          label='Max Disk Buffer Size (0 uses default size)'
+                    row
-          value={maxDiskBufferSize}
+                    aria-labelledby="demo-row-radio-buttons-group-label"
-          onChange={onMaxDiskBufferSizeChange}
+                    name="log-level-group"
-          variant="outlined"
+                    value={selectedLogLevel}
-          margin="normal"
+                    onChange={onLogLevelChange}
-          inputProps={{
+                    margin="normal"
-            maxLength: "12",
+                  >
-          }}
+                    <FormControlLabel value="trace" control={<Radio />} label="Trace" />
-          type="number"
+                    <FormControlLabel value="debug" control={<Radio />} label="Debug" />
-          disabled={!dataLoggerEnabled}
+                    <FormControlLabel value="info" control={<Radio />} label="Info" />
-          required
+                    <FormControlLabel value="warning" control={<Radio />} label="Warning" />
-          fullWidth
+                    <FormControlLabel value="error" control={<Radio />} label="Error" />
-        />
+                    <FormControlLabel value="critical" control={<Radio />} label="Critical" />
-        <Button
+                  </RadioGroup>
-          type="submit"
+                  <FormLabel id="demo-row-radio-buttons-group-label">CAN Bus</FormLabel>
-          disabled={busy}
+                  <FormGroup>
-          fullWidth
+                    <FormControlLabel control={
-          variant="contained"
+                      <Checkbox
-          color="primary"
+                        checked={canbusEnabled}
-          className={classes.submit}
+                        onChange={onCANBusChange}
-          onClick={onSubmit}
+                      />
-        >
+                    } label="CAN Bus Enabled" />
-          {busy ? "Submitting..." : "Submit"}
+                    <TextField
-        </Button>
+                      id="max_mem_buffer_size"
+                      name="max_mem_buffer_size"
+                      label='Max Memory Buffer Size (0 uses default size)'
+                      value={maxMemBufferSize}
+                      onChange={onMaxMemBufferSizeChange}
+                      variant="outlined"
+                      margin="normal"
+                      inputProps={{
+                        maxLength: "12",
+                      }}
+                      type="number"
+                      disabled={!canbusEnabled}
+                      required
+                      fullWidth
+                    />
+                    <FormControlLabel control={
+                      <Checkbox
+                        checked={dataLoggerEnabled}
+                        onChange={onDataLoggerChange}
+                        disabled={!canbusEnabled}
+                      />
+                    } label="Data Logger Enabled" />
+                  </FormGroup>
+                  <TextField
+                    id="max_disk_buffer_size"
+                    name="max_disk_buffer_size"
+                    label='Max Disk Buffer Size (0 uses default size)'
+                    value={maxDiskBufferSize}
+                    onChange={onMaxDiskBufferSizeChange}
+                    variant="outlined"
+                    margin="normal"
+                    inputProps={{
+                      maxLength: "12",
+                    }}
+                    type="number"
+                    disabled={!dataLoggerEnabled}
+                    required
+                    fullWidth
+                  />
+              </Box>
+            </AccordionDetails>
+          </Accordion>
+          
+          <Button
+            type="submit"
+            disabled={busy}
+            fullWidth
+            variant="contained"
+            color="primary"
+            className={classes.submit}
+            onClick={onSubmit}
+          >
+            {busy ? "Submitting..." : "Submit"}
+          </Button>
+        </Box>
       </form>
     </div>
   );

src/components/useStyles.jsx

@@ -295,6 +295,14 @@ const useStyles = makeStyles((theme) => ({
     whiteSpace: "normal",
     wordWrap: "break-word",
   },
+  fleetVehicleAddSubmit: {
+    position: "sticky",
+    bottom: 0,
+    right: 0,
+    width: "100%",
+    padding: "16px 0",
+    backgroundColor: "#fafafa",
+  }
 }));
 
 export default useStyles;

src/services/__mocks__/fleetsAPI.js

@@ -62,8 +62,8 @@ const fleetsAPI = {
   getFleetVehicles: async () => {
     return { data: vehicles };
   },
-  addFleetVehicle: async (_name, vehicle) => {
+  addFleetVehicles: async (_name, vehicle) => {
-    vehicles.push(vehicle.vin);
+    vehicles.push(...vehicle.vins);
     return vehicle;
   },
   deleteFleetVehicle: async (_name, vehicle) => {

src/services/fleetsAPI.js

@@ -73,14 +73,14 @@ const fleetsAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler),
 
-  addFleetVehicle: async (name, vehicle, token) =>
+  addFleetVehicles: async (name, vehicles, token) =>
     fetch(`${API_ENDPOINT}/fleet/${name}/vehicle`, {
       method: "POST",
       headers: Object.assign(
         { "Content-Type": "application/json" },
         getAuthHeaderOptions(token)
       ),
-      body: JSON.stringify(vehicle),
+      body: JSON.stringify(vehicles),
     })
       .then(fetchRespHandler)
       .catch(errorHandler),