From 22a928fe23c141d7a6647e8df0f9a24cd665762e Mon Sep 17 00:00:00 2001
From: Tristan Timblin <ttimblin@fiskerinc.com>
Date: Mon, 16 Oct 2023 08:40:30 -0700
Subject: [PATCH 1/2] CEC-5182: fix missing data (#468)

---
 src/components/Contexts/FleetContext.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Contexts/FleetContext.jsx b/src/components/Contexts/FleetContext.jsx
index 022efae..2173d9d 100644
--- a/src/components/Contexts/FleetContext.jsx
+++ b/src/components/Contexts/FleetContext.jsx
@@ -155,8 +155,10 @@ export const FleetProvider = ({ children }) => {
     const result = await updatesApi.getCarUpdateProgress(
       carUpdateIdsRef.current.join(","),
       token
-    );
-    let pivot = result.statuses.length - 1;
+    ).catch(() => {
+      return Promise.reject();
+    });
+    let pivot = result.statuses?.length ? result.statuses.length - 1 : 0;
     setFleetVehicles((fleetVehicles) => fleetVehicles.map((vehicle) => {
       result.statuses.find((status, i) => {
         if (vehicle.car_update_id !== status.car_update_id) {
@@ -313,7 +315,7 @@ export const FleetProvider = ({ children }) => {
 
   useEffect(() => {
     setCarUpdateIds(() => fleetVehicles
-      .filter((vehicle) => vehicle.car_update_status !== "installed")
+      .filter((vehicle) => vehicle.car_update_status && vehicle.car_update_status !== "installed")
       .map((vehicle) => vehicle.car_update_id));
   }, [fleetVehicles, setCarUpdateIds]);
 

From 2a71d87c93ceb74401f506025f927918144a397b Mon Sep 17 00:00:00 2001
From: Tristan Timblin <ttimblin@fiskerinc.com>
Date: Mon, 16 Oct 2023 10:29:21 -0700
Subject: [PATCH 2/2] CEC-5183 add bulk actions to fleets page (#470)

* add multi-select

* select all

* add bulk-actions component

* update tests

* remove console.log
---
 .../Table/__snapshots__/index.test.jsx.snap   | 40 ++++++++++++++++-
 .../Fleets/Status/Vehicles/Table/index.jsx    | 43 +++++++++++++++----
 .../__snapshots__/VehiclesTab.test.jsx.snap   | 40 ++++++++++++++++-
 3 files changed, 111 insertions(+), 12 deletions(-)

diff --git a/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
index 5b065c6..4511aac 100644
--- a/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
@@ -21,10 +21,9 @@ exports[`FleetVehiclesTable Render 1`] = `
               class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
             >
               <div
-                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-1"
               >
                 <a
-                  class="makeStyles-labelInline-0"
                   href="/fleet/undefined/vehicle-add"
                 >
                   <svg
@@ -39,6 +38,9 @@ exports[`FleetVehiclesTable Render 1`] = `
                   </svg>
                 </a>
               </div>
+              <div
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-3"
+              />
               <div
                 align="right"
                 class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-8"
@@ -104,6 +106,40 @@ exports[`FleetVehiclesTable Render 1`] = `
                 <tr
                   class="MuiTableRow-root MuiTableRow-head"
                 >
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-paddingCheckbox"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                    >
+                      <span
+                        class="MuiIconButton-label"
+                      >
+                        <input
+                          aria-label="select all desserts"
+                          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>
+                  </th>
                   <th
                     class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                     scope="col"
diff --git a/src/components/Fleets/Status/Vehicles/Table/index.jsx b/src/components/Fleets/Status/Vehicles/Table/index.jsx
index 561639e..aa38602 100644
--- a/src/components/Fleets/Status/Vehicles/Table/index.jsx
+++ b/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>
diff --git a/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
index c45ef81..54bf98f 100644
--- a/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
@@ -20,10 +20,9 @@ exports[`VehiclesTab Render 1`] = `
           class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
         >
           <div
-            class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+            class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-1"
           >
             <a
-              class="makeStyles-labelInline-0"
               href="/fleet/undefined/vehicle-add"
             >
               <svg
@@ -38,6 +37,9 @@ exports[`VehiclesTab Render 1`] = `
               </svg>
             </a>
           </div>
+          <div
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-3"
+          />
           <div
             align="right"
             class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-8"
@@ -103,6 +105,40 @@ exports[`VehiclesTab Render 1`] = `
             <tr
               class="MuiTableRow-root MuiTableRow-head"
             >
+              <th
+                class="MuiTableCell-root MuiTableCell-head MuiTableCell-paddingCheckbox"
+                scope="col"
+              >
+                <span
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                >
+                  <span
+                    class="MuiIconButton-label"
+                  >
+                    <input
+                      aria-label="select all desserts"
+                      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>
+              </th>
               <th
                 class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                 scope="col"