CEC-6051 - Select All for fleet bulk actions

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

@@ -1,6 +1,5 @@
 import {
   Checkbox,
-  FormControlLabel,
   Grid,
   LinearProgress,
   Table,
@@ -154,13 +153,6 @@ const MainForm = ({ name }) => {
       : selected.filter(select => select !== vin));
   };
 
-  const handleSelectAll = (event) => {
-    const allSelected = !event.target.checked;
-    setSelected(() => allSelected
-      ? []
-      : fleetVehicles.map((vehicle) => vehicle.vin));
-  }
-
   const bulkActionCallback = (action, _, context) => {
     if (action === "updateFleetVehicles") {
       const vinsToRemove = context.fromFleet === name ? context.fromVehicles : [];
@@ -176,14 +168,6 @@ const MainForm = ({ name }) => {
             <AddCircleIcon fontSize="large" />
           </Link>
         </Grid>
-        <Grid item md={2} className={classes.textJustifyAlign}>
-          <FormControlLabel control={
-            <Checkbox
-              checked={selectAllSelected}
-              onChange={() => setSelectAllSelected(selectAllSelected => !selectAllSelected)}
-            />
-          } label="Select All Vehicles" />
-        </Grid>
         <Grid item md={4}>
           <BulkActions
             actions={
@@ -209,9 +193,15 @@ const MainForm = ({ name }) => {
           columnData={tableColumns}
           onSortRequest={handleSort}
           multiSelect={true}
-          onSelectAll={handleSelectAll}
+          onSelectAll={
+            () => {
+              setSelectAllSelected(selectAllSelected => !selectAllSelected);
+              setSelected([]);
+            }
+          }
           selectCount={selected.length}
           rowCount={fleetVehicles.length}
+          selectAllForAllPages={true}
         />
         <TableBody>
           {fleetVehicles && fleetVehicles.map((car) => {