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

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>
@@ -164,73 +165,73 @@ const MainForm = () => {
             <AccordionDetails>
               <Box sx={{ width: "100%" }}>
                 <FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
-                  <RadioGroup
-                    row
-                    aria-labelledby="demo-row-radio-buttons-group-label"
-                    name="log-level-group"
-                    value={selectedLogLevel}
-                    onChange={onLogLevelChange}
-                    margin="normal"
-                  >
-                    <FormControlLabel value="trace" control={<Radio />} label="Trace" />
-                    <FormControlLabel value="debug" control={<Radio />} label="Debug" />
-                    <FormControlLabel value="info" control={<Radio />} label="Info" />
-                    <FormControlLabel value="warning" control={<Radio />} label="Warning" />
-                    <FormControlLabel value="error" control={<Radio />} label="Error" />
-                    <FormControlLabel value="critical" control={<Radio />} label="Critical" />
-                  </RadioGroup>
-                  <FormLabel id="demo-row-radio-buttons-group-label">CAN Bus</FormLabel>
-                  <FormGroup>
-                    <FormControlLabel control={
-                      <Checkbox
-                        checked={canbusEnabled}
-                        onChange={onCANBusChange}
-                      />
-                    } label="CAN Bus Enabled" />
-                    <TextField
-                      id="max_mem_buffer_size"
-                      name="max_mem_buffer_size"
-                      label='Max Memory Buffer Size (0 uses default size)'
-                      value={maxMemBufferSize}
-                      onChange={onMaxMemBufferSizeChange}
-                      variant="outlined"
-                      margin="normal"
-                      inputProps={{
-                        maxLength: "12",
-                      }}
-                      type="number"
-                      disabled={!canbusEnabled}
-                      required
-                      fullWidth
+                <RadioGroup
+                  row
+                  aria-labelledby="demo-row-radio-buttons-group-label"
+                  name="log-level-group"
+                  value={selectedLogLevel}
+                  onChange={onLogLevelChange}
+                  margin="normal"
+                >
+                  <FormControlLabel value="trace" control={<Radio />} label="Trace" />
+                  <FormControlLabel value="debug" control={<Radio />} label="Debug" />
+                  <FormControlLabel value="info" control={<Radio />} label="Info" />
+                  <FormControlLabel value="warning" control={<Radio />} label="Warning" />
+                  <FormControlLabel value="error" control={<Radio />} label="Error" />
+                  <FormControlLabel value="critical" control={<Radio />} label="Critical" />
+                </RadioGroup>
+                <FormLabel id="demo-row-radio-buttons-group-label">CAN Bus</FormLabel>
+                <FormGroup>
+                  <FormControlLabel control={
+                    <Checkbox
+                      checked={canbusEnabled}
+                      onChange={onCANBusChange}
                     />
-                    <FormControlLabel control={
-                      <Checkbox
-                        checked={dataLoggerEnabled}
-                        onChange={onDataLoggerChange}
-                        disabled={!canbusEnabled}
-                      />
-                    } label="Data Logger Enabled" />
-                  </FormGroup>
+                  } label="CAN Bus Enabled" />
                   <TextField
-                    id="max_disk_buffer_size"
-                    name="max_disk_buffer_size"
-                    label='Max Disk Buffer Size (0 uses default size)'
-                    value={maxDiskBufferSize}
-                    onChange={onMaxDiskBufferSizeChange}
+                    id="max_mem_buffer_size"
+                    name="max_mem_buffer_size"
+                    label='Max Memory Buffer Size (0 uses default size)'
+                    value={maxMemBufferSize}
+                    onChange={onMaxMemBufferSizeChange}
                     variant="outlined"
                     margin="normal"
                     inputProps={{
                       maxLength: "12",
                     }}
                     type="number"
-                    disabled={!dataLoggerEnabled}
+                    disabled={!canbusEnabled}
                     required
                     fullWidth
                   />
+                  <FormControlLabel control={
+                    <Checkbox
+                      checked={dataLoggerEnabled}
+                      onChange={onDataLoggerChange}
+                      disabled={!canbusEnabled}
+                    />
+                  } label="Data Logger Enabled" />
+                </FormGroup>
+                <TextField
+                  id="max_disk_buffer_size"
+                  name="max_disk_buffer_size"
+                  label='Max Disk Buffer Size (0 uses default size)'
+                  value={maxDiskBufferSize}
+                  onChange={onMaxDiskBufferSizeChange}
+                  variant="outlined"
+                  margin="normal"
+                  inputProps={{
+                    maxLength: "12",
+                  }}
+                  type="number"
+                  disabled={!dataLoggerEnabled}
+                  required
+                  fullWidth
+                />
               </Box>
             </AccordionDetails>
           </Accordion>
-          
+
           <Button
             type="submit"
             disabled={busy}

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