CEC-6051 - Select All for fleet bulk actions

src/components/Controls/DropDownButton/index.jsx

@@ -18,7 +18,7 @@ const DropDownButton = ({ actions = [], payload = [], onClick = () => { } }) =>
 
   const handleClick = () => {
     onClick()
-    actions[selectedIndex].trigger(...payload);
+    actions[selectedIndex] ? actions[selectedIndex].trigger(...payload) : actions[0].trigger(...payload)
   };
 
   const handleMenuItemClick = (event, index) => {
@@ -55,9 +55,9 @@ const DropDownButton = ({ actions = [], payload = [], onClick = () => { } }) =>
       >
         <Button
           onClick={handleClick}
-          disabled={actions[selectedIndex].disabled}
+          disabled={actions[selectedIndex] ? actions[selectedIndex].disabled : actions[0].disabled}
         >
-          {actions[selectedIndex].name}
+          {actions[selectedIndex] ? actions[selectedIndex].name : actions[0].name}
         </Button>
         <Button
           size="small"

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) => {

src/components/Table/HeaderSortable/index.jsx

@@ -6,9 +6,10 @@ import {
   TableSortLabel
 } from "@material-ui/core";
 import PropTypes from "prop-types";
-import React from "react";
+import React, { useState } from "react";
 
 const HeaderSortable = (props) => {
+  const [selectAll, setSelectAll] = useState(false);
   const {
     classes,
     order,
@@ -19,6 +20,7 @@ const HeaderSortable = (props) => {
     onSelectAll,
     selectCount,
     rowCount,
+    selectAllForAllPages,
   } = props;
 
   const sortHandler = (property) => (event) => {
@@ -27,6 +29,7 @@ const HeaderSortable = (props) => {
   };
 
   const selectAllHandler = (event) => {
+    setSelectAll(selectAll => !selectAll);
     if (!onSelectAll) return;
     onSelectAll(event);
   };
@@ -71,8 +74,8 @@ const HeaderSortable = (props) => {
         {multiSelect && (
           <TableCell padding="checkbox">
             <Checkbox
-              indeterminate={selectCount > 0 && selectCount < rowCount}
-              checked={rowCount > 0 && selectCount === rowCount}
+              indeterminate={!selectAllForAllPages && selectCount > 0 && selectCount < rowCount}
+              checked={selectAllForAllPages ? selectAll : rowCount > 0 && selectCount === rowCount}
               onChange={selectAllHandler}
               inputProps={{ "aria-label": "select all items" }}
             />