Finally figured out the UI

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={
-              selectAllSelected ?
-                ["updateFlashpackNumbers"] :
-                ["updateFleetVehicles", "addTags", "sms", "updateConfig", "remoteCommand", "diagnostic", "updateFlashpackNumbers"]
-            }
+            actions={["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={
-            () => {
-              setSelectAllSelected(selectAllSelected => !selectAllSelected);
-              setSelected([]);
-            }
-          }
-          selectCount={selected.length}
+          onSelectAll={handleSelectAll}
+          selectCount={selected ? selected.length : 0}
           rowCount={fleetVehicles.length}
           selectAllForAllPages={true}
         />