CEC-5183 add bulk actions to fleets page (#470)

* add multi-select

* select all

* add bulk-actions component

* update tests

* remove console.log

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

@@ -1,4 +1,5 @@
 import {
+  Checkbox,
   Grid,
   LinearProgress,
   Table,
@@ -28,6 +29,7 @@ import DeleteConfirmation from "../../../../DeleteConfirmation";
 import TableHeaderSortable from "../../../../Table/HeaderSortable";
 import { useLocalStorage } from "../../../../useLocalStorage";
 import ConnectedIcon from "../../../../Controls/ConnectedIcon";
+import BulkActions from "../../../../BulkActions";
 import useStyles from "../../../../useStyles";
 
 const tableColumns = [
@@ -62,6 +64,7 @@ const MainForm = ({ name }) => {
   const [order, setOrder] = useState("desc");
   const [search, setSearch] = useState("");
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selected, setSelected] = useState([]);
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const {
@@ -135,6 +138,19 @@ const MainForm = ({ name }) => {
     }
   };
 
+  const handleSelect = (vin, setState) => {
+    setSelected(selected => setState
+      ? [...selected, vin]
+      : selected.filter(select => select !== vin));
+  };
+
+  const handleSelectAll = (event) => {
+    const allSelected = !event.target.checked;
+    setSelected(() => allSelected
+      ? []
+      : fleetVehicles.map((vehicle) => vehicle.vin));
+  }
+
   const onDelete = async (vin) => {
     try {
       await deleteFleetVehicle(name, { vin: vin }, token);
@@ -188,14 +204,14 @@ const MainForm = ({ name }) => {
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Grid container className={classes.root} spacing={2}>
-        <Grid item md={4} className={classes.textJustifyAlign}>
-          <Link
-            to={`/fleet/${name}/vehicle-add`}
-            className={classes.labelInline}
-          >
+        <Grid item md={1} className={classes.textJustifyAlign}>
+          <Link to={`/fleet/${name}/vehicle-add`}>
             <AddCircleIcon fontSize="large" />
           </Link>
         </Grid>
+        <Grid item md={3}>
+          <BulkActions ids={selected} actions={["addTags", "deleteVehicles", "sms", "updateConfig"]} />
+        </Grid>
         <Grid item md={8} align="right" className={classes.textCenterAlign}>
           <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
@@ -207,10 +223,21 @@ const MainForm = ({ name }) => {
           order={order}
           columnData={tableColumns}
           onSortRequest={handleSort}
+          multiSelect={true}
+          onSelectAll={handleSelectAll}
+          selectCount={selected.length}
+          rowCount={fleetVehicles.length}
         />
         <TableBody>
-          {fleetVehicles && fleetVehicles.map((car) => (
-            (car.vin && <TableRow key={"row" + car.vin}>
+          {fleetVehicles && fleetVehicles.map((car) => {
+            const isSelected = selected.includes(car.vin);
+            return (car.vin && <TableRow key={"row" + car.vin}>
+              <TableCell padding="checkbox">
+                <Checkbox
+                  checked={isSelected}
+                  onChange={() => handleSelect(car.vin, !isSelected)}
+                />
+              </TableCell>
               <TableCell key={"cell" + car.vin} align="center">
                 {(car.connected || car.connectedHMI) &&
                   <ConnectedIcon
@@ -239,7 +266,7 @@ const MainForm = ({ name }) => {
               <TableCell key={"cell5" + car.vin} align="center">{Actions(car.vin)}</TableCell>
             </TableRow>
             )
-          ))}
+          })}
         </TableBody>
         <TableFooter>
           <TableRow>