Finally figured out the UI

src/components/BulkActions/actions/UpdateFlashpackNumbers.jsx

@@ -6,8 +6,6 @@ import vehiclesAPI from "../../../services/vehiclesAPI";
 export default forwardRef(({
   ids,
   idCSV,
-  fleet,
-  selectAll,
 }, ref) => {
   const { setMessage } = useStatusContext();
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
@@ -15,12 +13,10 @@ export default forwardRef(({
   useImperativeHandle(ref, () => ({
     async submit() {
       return vehiclesAPI
-        .flashpackVersionBulkUpdate(selectAll, fleet, ids, token)
+        .flashpackVersionBulkUpdate(ids, token)
         .then((data) => {
           if (data.error) {
             setMessage(`${data.error}: ${data.message}`);
-          } else if (selectAll) {
-            setMessage(`Updating flashpack numbers for all VINs in fleet: ${fleet}`);
           } else if (ids.length === 1) {
             setMessage(`Updating flashpack number for ${ids[0]}`);
           } else {
@@ -30,15 +26,6 @@ export default forwardRef(({
     },
   }));
 
-  if (selectAll) {
-    return (
-      <div>
-        <p>
-          You are updating flashpack numbers for all VINs in the following fleet: {fleet}.
-        </p>
-      </div>
-    )
-  } else {
   return (
     < div >
       <p>
@@ -46,5 +33,4 @@ export default forwardRef(({
       </p>
     </div>
   )
-  }
 });

src/components/BulkActions/index.jsx

@@ -20,8 +20,6 @@ const UpdateFlashpackNumbers = lazy(() => import("./actions/UpdateFlashpackNumbe
 export default function BulkActions({
   ids = [],
   actions = [],
-  fleet = undefined,
-  selectAll = false,
   callback = (active, ids, context) => { }, // context is raised from the action itself
 }) {
   const [open, setOpen] = useState(false);
@@ -92,8 +90,6 @@ export default function BulkActions({
   const payload = {
     ids,
     idCSV: (ids && ids.length > 0) ? truncateCSV(ids, 10) : "N/A",
-    fleet,
-    selectAll,
     ref: activeRef
   };
 
@@ -114,7 +110,7 @@ export default function BulkActions({
     setEmbedded(action?.embedded);
   }, [active, filteredActions]);
 
-  if (!selectAll && (!ids || ids.length === 0)) return <></>;
+  if (!ids || ids.length === 0) return <></>;
 
   return (
     <>

src/components/Contexts/FleetContext.jsx

@@ -163,6 +163,23 @@ export const FleetProvider = ({ children }) => {
     }
   };
 
+  const getFleetVINs = async (name, token) => {
+    try {
+      setBusy(true);
+
+      const result = await api.getFleetVehicles(name, null, token);
+      if (result.error) {
+        throw new Error(`Get fleet vehicles error. ${result.message}`);
+      }
+
+      const vins = result.data?.map(vehicle => vehicle.vin);
+
+      return vins;
+    } finally {
+      setBusy(false);
+    }
+  };
+
   const watchFleetVehicles = new Polling(async ({ token }) => {
     if (carUpdateIdsRef.current.length === 0) {
       return;
@@ -396,6 +413,7 @@ export const FleetProvider = ({ children }) => {
         totalFleetVehicles,
         watchFleetVehicles,
         getFleetVehicles,
+        getFleetVINs,
         addFleetVehicles,
         deleteFleetVehicles,
         removeFleetVehiclesLocal,

src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap

@@ -38,47 +38,6 @@ exports[`FleetVehiclesTable Render 1`] = `
                   </svg>
                 </a>
               </div>
-              <div
-                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
-              >
-                <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"
-                  >
-                    Select All Vehicles
-                  </span>
-                </label>
-              </div>
               <div
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-4"
               />

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

@@ -70,7 +70,7 @@ const MainForm = ({ name }) => {
   const [order, setOrder] = useState("desc");
   const [search, setSearch] = useState("");
   const [selected, setSelected] = useState([]);
-  const [selectAllSelected, setSelectAllSelected] = useState(false);
+  const [fleetVINs, setFleetVINs] = useState([]);
   const componentMounted = useRef(true);
   const classes = useStyles();
   const { setMessage } = useStatusContext();
@@ -79,6 +79,7 @@ const MainForm = ({ name }) => {
     totalFleetVehicles,
     watchFleetVehicles,
     getFleetVehicles,
+    getFleetVINs,
     removeFleetVehiclesLocal,
   } = useFleetContext();
   const {
@@ -105,6 +106,12 @@ const MainForm = ({ name }) => {
           },
           token
         );
+        await getFleetVINs(
+          name,
+          token
+        ).then((vins) => {
+          setFleetVINs(vins);
+        });
         if (componentMounted.current) {
           watchFleetVehicles.start({ token });
         }
@@ -147,6 +154,10 @@ const MainForm = ({ name }) => {
     }
   };
 
+  const handleSelectAll = () => {
+    setSelected(fleetVINs);
+  };
+
   const handleSelect = (vin, setState) => {
     setSelected(selected => setState
       ? [...selected, vin]
@@ -170,14 +181,8 @@ const MainForm = ({ name }) => {
         </Grid>
         <Grid item md={4}>
           <BulkActions
-            actions={
+            actions={["updateFleetVehicles", "addTags", "sms", "updateConfig", "remoteCommand", "diagnostic", "updateFlashpackNumbers"]}
-              selectAllSelected ?
-                ["updateFlashpackNumbers"] :
-                ["updateFleetVehicles", "addTags", "sms", "updateConfig", "remoteCommand", "diagnostic", "updateFlashpackNumbers"]
-            }
             ids={selected}
-            fleet={name}
-            selectAll={selectAllSelected}
             callback={bulkActionCallback}
           />
         </Grid>
@@ -193,13 +198,8 @@ const MainForm = ({ name }) => {
           columnData={tableColumns}
           onSortRequest={handleSort}
           multiSelect={true}
-          onSelectAll={
+          onSelectAll={handleSelectAll}
-            () => {
+          selectCount={selected ? selected.length : 0}
-              setSelectAllSelected(selectAllSelected => !selectAllSelected);
-              setSelected([]);
-            }
-          }
-          selectCount={selected.length}
           rowCount={fleetVehicles.length}
           selectAllForAllPages={true}
         />

src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap

@@ -37,47 +37,6 @@ exports[`VehiclesTab Render 1`] = `
               </svg>
             </a>
           </div>
-          <div
-            class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
-          >
-            <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"
-              >
-                Select All Vehicles
-              </span>
-            </label>
-          </div>
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-4"
           />

src/services/vehiclesAPI.js

@@ -341,16 +341,8 @@ const vehiclesAPI = {
       .catch(errorHandler)
   },
 
-  flashpackVersionBulkUpdate: async (selectAll, fleet, vins, token) => {
+  flashpackVersionBulkUpdate: async (vins, token) => {
-    var url = `${API_ENDPOINT}/flashpack_version_bulk_update`
+    return fetch(`${API_ENDPOINT}/flashpack_version_bulk_update`, {
-    const queryParams = {
-      fleet,
-    };
-    if (selectAll) {
-      url = addQueryParams(url, queryParams);
-    }
-
-    return fetch(url, {
       method: "PUT",
       headers: Object.assign(
         { "Content-Type": "application/json" },