CEC-5367: add vin: prefix and implement in fleets (#478)

2023-11-06 10:02:59 -08:00
parent 470495cfe9
commit 165cb7109f
5 changed files with 165 additions and 127 deletions
--- a/src/components/Cars/List/useQuery.js
+++ b/src/components/Cars/List/useQuery.js
@@ -6,11 +6,16 @@ const TYPE_VIN = "vin";
 /**
 * Match VIN with RegEx
 * @param {string} vin - potential VIN
- * @returns {boolean}
+ * @returns {[boolean, string]}
 */
-function isVIN(vin) {
+function parseVin(vin = "") {
+  const prefix = new RegExp(`^${TYPE_VIN}:`);
+  if (vin.match(prefix)) {
+    return [true, vin.replace(prefix, "")];
+  }
+
  var re = new RegExp("^[A-HJ-NPR-Z0-9]{8}[0-9X][A-HJ-NPR-Z0-9]{2}[0-9]{6}$");
-  return vin.match(re)
+  return [vin.match(re), vin];
 }

 /**
@@ -24,9 +29,10 @@ function isVIN(vin) {
 function parseQueryPart(part) {
  let type = "search";

-  if (isVIN(part)) {
+  const [isVin, vin] = parseVin(part)
+  if (isVin) {
    type = TYPE_VIN;
-    part = `${part}`;
+    part = vin;
  }

  return [type, part];
@@ -55,11 +61,19 @@ export default function useQuery() {
      }
    });

+    setQuery(() => parts.map(([type, part]) => {
+      if (type !== "search") {
+        return `${type}:${part}`;
+      }
+
+      return part;
+    }).join(" ").replace(/\s{2,}/g, ' ').trim());
+
    setPayload({
      search,
      vins: vins.join(","),
    })
-  }, [query, setPayload]);
+  }, [query, setPayload, setQuery]);

  useEffect(() => {
    setLoading(false);
--- a/src/components/Cars/List/useQuery.test.jsx
+++ b/src/components/Cars/List/useQuery.test.jsx
@@ -35,25 +35,80 @@ const template = (desc, data, expected) => {
    fireEvent.change(input, { target: { value: data } });
    expect(search.innerHTML).toBe(expected[0]);
    expect(vins.innerHTML).toBe(expected[1]);
-    expect(query.innerHTML).toBe(data);
+    expect(query.innerHTML).toBe(expected[2]);
  });
 }

 describe("useQuery", () => {
  [
-    ["parses a search query", "test", ["test", ""]],
-    ["parses a vin query", "VCF1ZBU23PG001209", ["", "VCF1ZBU23PG001209"]],
-    ["parses a mixed search and vin query", "test VCF1ZBU23PG001209", ["test", "VCF1ZBU23PG001209"]],
+    [
+      "parses a search query",
+      "test",
+      ["test", "", "test"]
+    ],
+    [
+      "parses a vin query",
+      "VCF1ZBU23PG001209",
+      ["", "VCF1ZBU23PG001209", "vin:VCF1ZBU23PG001209"]
+    ],
+    [
+      "parses a mixed search and vin query",
+      "test VCF1ZBU23PG001209",
+      ["test", "VCF1ZBU23PG001209", "test vin:VCF1ZBU23PG001209"]
+    ],

-    ["parses a comma separated search query", "ocean,pear,alaska,ronin", ["ocean pear alaska ronin", ""]],
-    ["parses a comma separated vin query", "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162", ["", "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162"]],
-    ["parses a comma separated mixed search and vin query", "test,VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162", ["test", "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162"]],
+    [
+      "parses a comma separated search query",
+      "ocean,pear,alaska,ronin",
+      ["ocean pear alaska ronin", "", "ocean pear alaska ronin"]
+    ],
+    [
+      "parses a comma separated vin query",
+      "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162",
+      ["", "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162", "vin:VCF1EBE2008016235 vin:VCF1EBE20PG001002 vin:VCF1EBE20PG001162"]
+    ],
+    [
+      "parses a comma separated mixed search and vin query",
+      "test,VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162",
+      ["test", "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162", "test vin:VCF1EBE2008016235 vin:VCF1EBE20PG001002 vin:VCF1EBE20PG001162"]
+    ],

-    ["parses a space separated search query", "ocean pear alaska ronin", ["ocean pear alaska ronin", ""]],
-    ["parses a space separated vin query", "VCF1EBE2008016235 VCF1EBE20PG001002 VCF1EBE20PG001162", ["", "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162"]],
-    ["parses a space separated mixed search and vin query", "test VCF1EBE2008016235 VCF1EBE20PG001002 VCF1EBE20PG001162", ["test", "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162"]],
+    [
+      "parses a space separated search query",
+      "ocean pear alaska ronin",
+      ["ocean pear alaska ronin", "", "ocean pear alaska ronin"]
+    ],
+    [
+      "parses a space separated vin query",
+      "VCF1EBE2008016235 VCF1EBE20PG001002 VCF1EBE20PG001162",
+      ["", "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162", "vin:VCF1EBE2008016235 vin:VCF1EBE20PG001002 vin:VCF1EBE20PG001162"]
+    ],
+    [
+      "parses a space separated mixed search and vin query",
+      "test VCF1EBE2008016235 VCF1EBE20PG001002 VCF1EBE20PG001162",
+      ["test", "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162", "test vin:VCF1EBE2008016235 vin:VCF1EBE20PG001002 vin:VCF1EBE20PG001162"]
+    ],

-    ["trims extraneous values from search", "ocean,, , ,,,,pear,,, ", ["ocean pear", ""]],
-    ["trims extraneous values from vins", "VCF1EBE2008016235,, , ,,,,VCF1EBE20PG001002,,, ", ["", "VCF1EBE2008016235,VCF1EBE20PG001002"]],
+    [
+      "trims extraneous values from search",
+      "ocean,, , ,,,,pear,,, ",
+      ["ocean pear", "", "ocean pear"]
+    ],
+    [
+      "trims extraneous values from vins",
+      "VCF1EBE2008016235,, , ,,,,VCF1EBE20PG001002,,, ",
+      ["", "VCF1EBE2008016235,VCF1EBE20PG001002", "vin:VCF1EBE2008016235 vin:VCF1EBE20PG001002"]
+    ],
+
+    [
+      "honors a declared vin",
+      "vin:1209",
+      ["", "1209", "vin:1209"]
+    ],
+    [
+      "keeps order of query parts",
+      "test vin:1209 VCF1EBE2008016235,VCF1EBE20PG001002 test2",
+      ["test test2", "1209,VCF1EBE2008016235,VCF1EBE20PG001002", "test vin:1209 vin:VCF1EBE2008016235 vin:VCF1EBE20PG001002 test2"]
+    ],
  ].forEach((args) => template(...args))
 });
--- a/src/components/Contexts/FleetContext.jsx
+++ b/src/components/Contexts/FleetContext.jsx
@@ -116,19 +116,25 @@ export const FleetProvider = ({ children }) => {

      const result = await api.getFleetVehicles(name, search, token);
      if (result.error) {
-        setFleetVehicles([])
+        setFleetVehicles([]);
        throw new Error(`Get fleet vehicles error. ${result.message}`);
      }

-      const vins = result.data.map(vehicle => vehicle.vin);
+      if (!result.data) {
+        setFleetVehicles([]);
+        throw new Error("Fleet is empty, consider adding some vehicles.");
+      }
+
+      const vins = result.data?.map(vehicle => vehicle.vin);
+
      const connectionsResult = await vehiclesAPI.getConnections({ "VINs": vins }, token)
      if (connectionsResult.error) {
-        setFleetVehicles([])
+        setFleetVehicles([]);
        throw new Error(`Get vehicles connections error. ${result.message}`);
      }

      var cars = []
-      result.data.forEach((vehicle) => {
+      result.data?.forEach((vehicle) => {
        cars.push({
          vin: vehicle.vin,
          connected: connectionsResult[vehicle.vin] || false,
--- a/src/components/Fleets/Status/Vehicles/Add/index.jsx
+++ b/src/components/Fleets/Status/Vehicles/Add/index.jsx
@@ -27,6 +27,7 @@ import { logger } from "../../../../../services/monitoring";
 import { VehicleProvider } from "../../../../Contexts/VehicleContext";
 import CarSelectionTable from "../../../../Controls/CarSelectionTable";
 import SearchField from "../../../../Controls/SearchField";
+import useQuery from "../../../../Cars/List/useQuery";

 const MainForm = () => {
  const { name } = useParams();
@@ -41,7 +42,7 @@ const MainForm = () => {
  const [redirect, setRedirect] = useState(null);

  const [vins, setVins] = useState([]);
-  const [search, setSearch] = useState("");
+  const { payload, query, setQuery } = useQuery();
  const [selectedLogLevel, setSelectedLogLevel] = useState("info");
  const [canbusEnabled, setCANBusEnabled] = useState(true);
  const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
@@ -69,7 +70,7 @@ const MainForm = () => {

  const handleSearch = (query) => {
    setVins([]);
-    setSearch(query);
+    setQuery(query);
  };

  const handleSelectAll = (cars) => {
@@ -143,20 +144,20 @@ const MainForm = () => {
  return (
    <div className={classes.paper}>
      <form className={classes.form} noValidate action="{onSubmit}">
-        <SearchField classes={classes} onSearch={handleSearch}/>
+        <SearchField classes={classes} onSearch={handleSearch} savedSearchValue={query} />
        <VehicleProvider sx={{ height: "auto" }}>
          <CarSelectionTable
            classes={classes}
            token={token}
            multiSelect={true}
-            search={{search}}
+            search={payload}
            selected={vins}
            onSelect={handleSelect}
            onSelectAll={handleSelectAll}
          />
        </VehicleProvider>

-        <Box className={classes.fleetVehicleAddSubmit}>
+        <Box className={classes.fleetVehicleAddSubmit} sx={{ zIndex: 10 }}>
          <Accordion>
            <AccordionSummary>
              <Typography>Additional Options</Typography>
--- a/src/components/Fleets/Status/Vehicles/Table/index.jsx
+++ b/src/components/Fleets/Status/Vehicles/Table/index.jsx
@@ -8,7 +8,8 @@ import {
  TableFooter,
  TablePagination,
  TableRow,
-  Tooltip
+  Tooltip,
+  IconButton,
 } from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import DeleteIcon from "@material-ui/icons/Delete";
@@ -17,7 +18,6 @@ import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";

 import { logger } from "../../../../../services/monitoring";
-import { hasRole, Permissions } from "../../../../../utils/roles";
 import {
  FleetProvider,
  useFleetContext
@@ -25,7 +25,6 @@ import {
 import { useStatusContext } from "../../../../Contexts/StatusContext";
 import { useUserContext } from "../../../../Contexts/UserContext";
 import SearchField from "../../../../Controls/SearchField";
-import DeleteConfirmation from "../../../../DeleteConfirmation";
 import TableHeaderSortable from "../../../../Table/HeaderSortable";
 import { useLocalStorage } from "../../../../useLocalStorage";
 import ConnectedIcon from "../../../../Controls/ConnectedIcon";
@@ -76,7 +75,6 @@ const MainForm = ({ name }) => {
  const [orderBy, setOrderBy] = useState("id");
  const [order, setOrder] = useState("desc");
  const [search, setSearch] = useState("");
-  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [selected, setSelected] = useState([]);
  const classes = useStyles();
  const { setMessage } = useStatusContext();
@@ -91,8 +89,6 @@ const MainForm = ({ name }) => {
    token: {
      idToken: { jwtToken: token },
    },
-    groups,
-    providers,
  } = useUserContext();

  const handleSearch = (query) => {
@@ -174,46 +170,6 @@ const MainForm = ({ name }) => {
    }
  };

-  const Actions = (vin) => {
-    let actions = [];
-    if (hasRole(groups, Permissions.FiskerDelete, providers)) {
-      actions.push({
-        tip: `Delete "${vin}"`,
-        id: vin,
-        icon: <DeleteIcon aria-label={`Delete ${vin}`} />,
-      });
-    }
-    if (actions.length === 0) return ["No actions"];
-
-    return actions.map((action) => {
-      if (action.link != null) {
-        return (
-          <Tooltip key={action.link} title={action.tip}>
-            <Link to={action.link} style={{ margin: 5 }}>
-              {action.icon}
-            </Link>
-          </Tooltip>
-        );
-      } else {
-        return (
-          <span key={`delete-${action.id}-of-div`}>
-            <Tooltip key={`delete-${action.id}`} title={action.tip}>
-              <Link to="#" onClick={() => onDelete(action.id)}>
-                {action.icon}
-              </Link>
-            </Tooltip>
-            <DeleteConfirmation
-              message={action.id}
-              open={showDeleteModal}
-              close={() => setShowDeleteModal(false)}
-              deleteFunction={() => onDelete(action.id)}
-            />
-          </span>
-        );
-      }
-    });
-  };
-
  return (
    <div className={clsx(classes.paper, classes.tableSize)}>
      <Grid container className={classes.root} spacing={2}>
@@ -285,7 +241,13 @@ const MainForm = ({ name }) => {
              <TableCell key={"cell7" + car.vin}>
                {car.park ? "Yes" : "No"}
              </TableCell>
-              <TableCell key={"cell8" + car.vin} align="center">{Actions(car.vin)}</TableCell>
+              <TableCell key={"cell8" + car.vin} align="center">
+                <Tooltip key={`delete-${car.vin}`} title={`Delete "${car.vin}"`}>
+                  <IconButton onClick={() => onDelete(car.vin)}>
+                    <DeleteIcon aria-label={`Delete ${car.vin}`} />
+                  </IconButton>
+                </Tooltip>
+              </TableCell>
            </TableRow>
            )
          })}