Merge branch 'main' into CEC-3796

src/components/Contexts/FleetContext.jsx

@@ -155,8 +155,10 @@ export const FleetProvider = ({ children }) => {
     const result = await updatesApi.getCarUpdateProgress(
       carUpdateIdsRef.current.join(","),
       token
-    );
+    ).catch(() => {
-    let pivot = result.statuses.length - 1;
+      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]);
 

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"

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}>
+        <Grid item md={1} className={classes.textJustifyAlign}>
-          <Link
+          <Link to={`/fleet/${name}/vehicle-add`}>
-            to={`/fleet/${name}/vehicle-add`}
-            className={classes.labelInline}
-          >
             <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) => (
+          {fleetVehicles && fleetVehicles.map((car) => {
-            (car.vin && <TableRow key={"row" + car.vin}>
+            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>

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"