CEC-5150: search on fleets in bulk action (#454)

* CEC-5150: search on fleets in bulk action

* add deps

* add deps

* sonar

* sonar

* break out fetch

src/components/BulkActions/actions/AddToFleet.jsx

@@ -1,23 +1,20 @@
-import { useEffect, useState, forwardRef, useImperativeHandle } from "react";
+import { useState, forwardRef, useImperativeHandle } from "react";
 import {
   FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
 } from '@material-ui/core';
+import SearchSelect from "../../SearchSelect/SearchSelect";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
 import fleetsAPI from "../../../services/fleetsAPI";
 
 export default forwardRef(({
-  vins,
-  vinCSV,
+  ids,
+  idCSV,
 }, ref) => {
   const { setMessage } = useStatusContext();
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
 
-  const [fleet, setFleet] = useState("");
-  const [options, setOptions] = useState([]);
+  const [fleet, setFleet] = useState(null);
 
   useImperativeHandle(ref, () => ({
     async submit() {
@@ -27,7 +24,7 @@ export default forwardRef(({
       }
 
       return fleetsAPI
-        .addFleetVehicles(fleet, { vins }, token)
+        .addFleetVehicles(fleet, { vins: ids }, token)
         .then((response) => {
           if (response.error) {
             setMessage(`${response.error}: ${response.message}`);
@@ -46,54 +43,32 @@ export default forwardRef(({
     },
   }));
 
-  useEffect(() => {
-    const controller = new AbortController();
-    let isMounted = true;
-
-    fleetsAPI
+  async function searchFleets(search) {
+    return fleetsAPI
       .getFleets({
-        search: "",
+        search,
         limit: 10,
         offset: 0,
         order: `id desc`,
-      }, token, controller)
-      .then(({ data }) => {
-        if (isMounted) {
-          setOptions(data.map((fleet) => fleet.name));
-        }
-      });
-    return () => {
-      controller?.abort();
-      isMounted = false;
-    }
-  }, [token]);
-
-  const handleChange = (event) => {
-    setFleet(event.target.value);
+      }, token)
+      .then(response => response.data.map(fleet => fleet.name))
+      .catch(() => []);
   }
 
   return (
     <div>
       <p>
-        You are adding the following VINs to a fleet: {vinCSV}.
+        You are adding the following VINs to a fleet: {idCSV}.
       </p>
-      {options && (
-        <FormControl variant="filled" fullWidth={true}>
-          <InputLabel id="fleet-selection">
-            Fleet
-          </InputLabel>
-          <Select
-            labelId="fleet-selection"
-            value={fleet}
-            label="Fleet"
-            onChange={handleChange}
-          >
-            {options.map((option) => (
-              <MenuItem key={option} value={option}>{option}</MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      )}
+      <FormControl variant="filled" fullWidth={true}>
+        <SearchSelect
+          label="Fleet"
+          value={fleet}
+          setValue={setFleet}
+          getData={searchFleets}
+          research={true}
+        />
+      </FormControl>
     </div>
   );
 });

src/components/BulkActions/index.jsx

@@ -3,6 +3,7 @@ import { hasRole, Permissions } from "../../utils/roles";
 import DropDownButton from "../Controls/DropDownButton";
 import { useUserContext } from "../Contexts/UserContext";
 import { Modal } from "./Modal";
+import truncateCSV from "../../utils/truncateCSV";
 
 // Code-splitting individual actions
 // https://react.dev/reference/react/lazy
@@ -71,7 +72,7 @@ export default function BulkActions({
 
   const payload = {
     ids,
-    idCSV: (ids && ids.length > 0) ? ids.join(", ") : "N/A",
+    idCSV: (ids && ids.length > 0) ? truncateCSV(ids, 10) : "N/A",
     ref: activeRef
   };