Merge branch 'release/0.9.0'

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"
@@ -10389,6 +10389,43 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                       Data Logger Enabled
                     </span>
                   </label>
+                  <label
+                    class="MuiFormControlLabel-root"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                    >
+                      <span
+                        class="MuiIconButton-label"
+                      >
+                        <input
+                          class="PrivateSwitchBase-input-0"
+                          data-indeterminate="false"
+                          type="checkbox"
+                          value=""
+                        />
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="MuiTouchRipple-root"
+                      />
+                    </span>
+                    <span
+                      class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                    >
+                      DTC Enabled
+                    </span>
+                  </label>
                 </div>
                 <div
                   class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
@@ -12267,7 +12304,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/Add/__snapshots__/index.test.jsx.snap

@@ -518,6 +518,43 @@ exports[`VehicleAddForm Render 1`] = `
                     Data Logger Enabled
                   </span>
                 </label>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-0"
+                        data-indeterminate="false"
+                        type="checkbox"
+                        value=""
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    DTC Enabled
+                  </span>
+                </label>
               </div>
               <div
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"

src/components/Cars/Add/index.jsx

@@ -38,6 +38,7 @@ const MainForm = () => {
   const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
   const [maxMemBufferSize, setMaxMemBufferSize] = useState(0);
   const [maxDiskBufferSize, setMaxDiskBufferSize] = useState(0);
+  const [dtcEnabled, setDTCEnabled] = useState(false);
 
   useEffect(() => {
     setTitle("Add Vehicle");
@@ -65,6 +66,10 @@ const MainForm = () => {
     setDataLoggerEnabled(event.target.checked);
   }
 
+  const onDtcEnabledChange = (event) => {
+    setDTCEnabled(event.target.checked);
+  }
+
   const onMaxMemBufferSizeChange = (event) => {
     setMaxMemBufferSize(event.target.value);
   }
@@ -84,7 +89,8 @@ const MainForm = () => {
           enabled: canbusEnabled,
           data_logger_enabled: canbusEnabled ? dataLoggerEnabled : false,
           max_mem_buffer_size: canbusEnabled ? parseInt(maxMemBufferSize) : 0,
-          max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0
+          max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0,
+          dtc_enabled: dtcEnabled
         }
       };
 
@@ -166,6 +172,12 @@ const MainForm = () => {
               disabled={!canbusEnabled}
             />
           } label="Data Logger Enabled" />
+          <FormControlLabel control={
+            <Checkbox
+              checked={dtcEnabled}
+              onChange={onDtcEnabledChange}
+            />
+          } label="DTC Enabled" />
         </FormGroup>
         <TextField
           id="max_disk_buffer_size"

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/Cars/Update/__snapshots__/index.test.jsx.snap

@@ -919,7 +919,7 @@ exports[`VehicleUpdate Render 1`] = `
                   <span
                     class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
                   >
-                    Data Logger Enabled
+                    DTC Enabled
                   </span>
                 </label>
               </div>

src/components/Cars/Update/index.jsx

@@ -150,7 +150,7 @@ const MainForm = () => {
           data_logger_enabled: canbusEnabled ? dataLoggerEnabled : false,
           max_mem_buffer_size: canbusEnabled ? parseInt(maxMemBufferSize) : 0,
           max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0,
-          dtc_enabled: canbusEnabled ? dtcEnabled : false
+          dtc_enabled: dtcEnabled
         },
         debug_mask: debugMaskEl.current?.value
       };
@@ -382,9 +382,8 @@ const MainForm = () => {
             <Checkbox
               checked={dtcEnabled}
               onChange={onDtcEnabledChange}
-              disabled={!canbusEnabled}
             />
-          } label="Data Logger Enabled" />
+          } label="DTC Enabled" />
         </FormGroup>
         <TextField
           id="max_disk_buffer_size"

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/__snapshots__/index.test.jsx.snap

@@ -23,51 +23,419 @@ exports[`FleetVehicleAdd Render 1`] = `
               novalidate=""
             >
               <div
-                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
                   data-shrink="false"
-                  for="vin"
+                  for="search"
-                  id="vin-label"
                 >
-                  VIN
+                  Search
-                  <span
-                    aria-hidden="true"
-                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                  >
-                     
-                    *
-                  </span>
                 </label>
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
-                    id="vin"
+                    id="search"
-                    maxlength="17"
-                    name="vin"
-                    required=""
                     type="text"
                     value=""
                   />
-                  <fieldset
+                  <div
+                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                  >
+                    <button
+                      aria-label="search"
+                      class="MuiButtonBase-root MuiIconButton-root"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label"
+                      >
+                        <svg
                           aria-hidden="true"
-                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                    <legend
+                          <path
-                      class="PrivateNotchedOutline-legendLabelled-0"
+                            d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-                    >
+                          />
-                      <span>
+                        </svg>
-                        VIN
-                         *
                       </span>
-                    </legend>
+                      <span
-                  </fieldset>
+                        class="MuiTouchRipple-root"
+                      />
+                    </button>
                   </div>
                 </div>
+              </div>
+              <div
+                class="makeStyles-paper-0"
+              >
+                <table
+                  class="MuiTable-root"
+                >
+                  <thead
+                    class="MuiTableHead-root"
+                  >
+                    <tr
+                      class="MuiTableRow-root MuiTableRow-head"
+                    >
+                      <th
+                        class="MuiTableCell-root MuiTableCell-head MuiTableCell-paddingCheckbox"
+                        scope="col"
+                      >
+                        <span
+                          aria-disabled="false"
+                          class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                        >
+                          <span
+                            class="MuiIconButton-label"
+                          >
+                            <input
+                              aria-label="select all desserts"
+                              class="PrivateSwitchBase-input-0"
+                              data-indeterminate="false"
+                              type="checkbox"
+                              value=""
+                            />
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                              />
+                            </svg>
+                          </span>
+                          <span
+                            class="MuiTouchRipple-root"
+                          />
+                        </span>
+                      </th>
+                      <th
+                        aria-sort="ascending"
+                        class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                        scope="col"
+                      >
+                        <span
+                          aria-disabled="false"
+                          class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
+                          role="button"
+                          tabindex="0"
+                        >
+                          VIN
+                          <span
+                            class="makeStyles-hiddenSortSpan-0"
+                          >
+                            sorted ascending
+                          </span>
+                          <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"
+                      >
+                        <span
+                          aria-disabled="false"
+                          class="MuiButtonBase-root MuiTableSortLabel-root"
+                          role="button"
+                          tabindex="0"
+                        >
+                          Model
+                          <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"
+                      >
+                        <span
+                          aria-disabled="false"
+                          class="MuiButtonBase-root MuiTableSortLabel-root"
+                          role="button"
+                          tabindex="0"
+                        >
+                          Year
+                          <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"
+                      >
+                        <span
+                          aria-disabled="false"
+                          class="MuiButtonBase-root MuiTableSortLabel-root"
+                          role="button"
+                          tabindex="0"
+                        >
+                          Trim
+                          <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"
+                      >
+                        <span
+                          aria-disabled="false"
+                          class="MuiButtonBase-root MuiTableSortLabel-root"
+                          role="button"
+                          tabindex="0"
+                        >
+                          Created
+                          <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"
+                      >
+                        <span
+                          aria-disabled="false"
+                          class="MuiButtonBase-root MuiTableSortLabel-root"
+                          role="button"
+                          tabindex="0"
+                        >
+                          Updated
+                          <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>
+                    </tr>
+                  </thead>
+                  <tbody
+                    class="MuiTableBody-root"
+                  />
+                  <tfoot
+                    class="MuiTableFooter-root"
+                  >
+                    <tr
+                      class="MuiTableRow-root MuiTableRow-footer"
+                    >
+                      <td
+                        class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
+                        colspan="7"
+                      >
+                        <div
+                          class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
+                        >
+                          <div
+                            class="MuiTablePagination-spacer"
+                          />
+                          <p
+                            class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                            id="mui-0"
+                          >
+                            Rows per page:
+                          </p>
+                          <div
+                            class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
+                          >
+                            <select
+                              aria-label="rows per page"
+                              class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
+                              id="mui-0"
+                            >
+                              <option
+                                class="MuiTablePagination-menuItem"
+                                value="5"
+                              >
+                                5
+                              </option>
+                              <option
+                                class="MuiTablePagination-menuItem"
+                                value="10"
+                              >
+                                10
+                              </option>
+                              <option
+                                class="MuiTablePagination-menuItem"
+                                value="25"
+                              >
+                                25
+                              </option>
+                              <option
+                                class="MuiTablePagination-menuItem"
+                                value="100"
+                              >
+                                100
+                              </option>
+                            </select>
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M7 10l5 5 5-5z"
+                              />
+                            </svg>
+                          </div>
+                          <p
+                            class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                          >
+                            0-0 of 0
+                          </p>
+                          <div
+                            class="MuiTablePagination-actions"
+                          >
+                            <button
+                              aria-label="Previous page"
+                              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                              disabled=""
+                              tabindex="-1"
+                              title="Previous page"
+                              type="button"
+                            >
+                              <span
+                                class="MuiIconButton-label"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                                  />
+                                </svg>
+                              </span>
+                            </button>
+                            <button
+                              aria-label="Next page"
+                              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                              disabled=""
+                              tabindex="-1"
+                              title="Next page"
+                              type="button"
+                            >
+                              <span
+                                class="MuiIconButton-label"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                                  />
+                                </svg>
+                              </span>
+                            </button>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div
+                class="MuiBox-root MuiBox-root-0 makeStyles-fleetVehicleAddSubmit-0"
+              >
+                <div
+                  class="MuiPaper-root MuiAccordion-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+                >
+                  <div
+                    aria-disabled="false"
+                    aria-expanded="false"
+                    class="MuiButtonBase-root MuiAccordionSummary-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    <div
+                      class="MuiAccordionSummary-content"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1"
+                      >
+                        Additional Options
+                      </p>
+                    </div>
+                  </div>
+                  <div
+                    class="MuiCollapse-root MuiCollapse-hidden"
+                    style="min-height: 0px;"
+                  >
+                    <div
+                      class="MuiCollapse-wrapper"
+                    >
+                      <div
+                        class="MuiCollapse-wrapperInner"
+                      >
+                        <div
+                          role="region"
+                        >
+                          <div
+                            class="MuiAccordionDetails-root"
+                          >
+                            <div
+                              class="MuiBox-root MuiBox-root-0"
+                            >
                               <label
                                 class="MuiFormLabel-root"
                                 id="demo-row-radio-buttons-group-label"
@@ -566,6 +934,13 @@ exports[`FleetVehicleAdd Render 1`] = `
                                   </fieldset>
                                 </div>
                               </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
                 <button
                   class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                   tabindex="0"
@@ -580,6 +955,7 @@ exports[`FleetVehicleAdd Render 1`] = `
                     class="MuiTouchRipple-root"
                   />
                 </button>
+              </div>
             </form>
           </div>
         </div>

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();
 
+    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,19 +143,26 @@ 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}
           />
+        </VehicleProvider>
+
+        <Box className={classes.fleetVehicleAddSubmit}>
+          <Accordion>
+            <AccordionSummary>
+              <Typography>Additional Options</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Box sx={{ width: "100%" }}>
                 <FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
                   <RadioGroup
                     row
@@ -187,6 +227,10 @@ const MainForm = () => {
                     required
                     fullWidth
                   />
+              </Box>
+            </AccordionDetails>
+          </Accordion>
+          
           <Button
             type="submit"
             disabled={busy}
@@ -198,6 +242,7 @@ const MainForm = () => {
           >
             {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),