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

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);

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 search query",
-    ["parses a mixed search and vin query", "test VCF1ZBU23PG001209", ["test", "VCF1ZBU23PG001209"]],
+      "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 search query",
-    ["parses a comma separated mixed search and vin query", "test,VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162", ["test", "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162"]],
+      "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 search query",
-    ["parses a space separated mixed search and vin query", "test VCF1EBE2008016235 VCF1EBE20PG001002 VCF1EBE20PG001162", ["test", "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162"]],
+      "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))
 });

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,

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>

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>
             )
           })}