CEC-2374 - Add online filter to deploy search page (#422)

* CEC-4855: fix manifest deselect (#410)

* fix manifest deselect

* CEC-4563: add cancel and include results in promise (#411)

* CEC-4635: prevent false 0 calculation (#413)

* prevent false 0 calculation

* refactor switch statement

* CEC-4729: add retry button to active car updates (#414)

* add deploy button

* disable control if inactive

* add cases

* CEC-2374 - Add online filter to deploy search page

---------

Co-authored-by: Tristan Timblin <ttimblin@fiskerinc.com>

src/components/App/__snapshots__/App.test.js.snap

@@ -4255,7 +4255,7 @@ exports[`App Route /package-deploy authenticated 1`] = `
                       </label>
                     </div>
                     <div
-                      class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                      class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-2"
                     >
                       <div
                         class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
@@ -4308,6 +4308,36 @@ exports[`App Route /package-deploy authenticated 1`] = `
                         </div>
                       </div>
                     </div>
+                    <div
+                      class="MuiGrid-root makeStyles-textJustifyAlign-0 makeStyles-actionsBar-0 MuiGrid-item MuiGrid-grid-md-2"
+                    >
+                      <div>
+                        <button
+                          aria-haspopup="true"
+                          class="MuiButtonBase-root MuiIconButton-root"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
+                              />
+                            </svg>
+                          </span>
+                          <span
+                            class="MuiTouchRipple-root"
+                          />
+                        </button>
+                      </div>
+                    </div>
                     <div
                       class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-justify-content-xs-flex-end MuiGrid-grid-md-4"
                     >

src/components/Manifest/Deploy/index.jsx

@@ -1,4 +1,5 @@
-import { Button, FormControlLabel, Grid, Switch, Typography } from "@material-ui/core";
+import { Button, Checkbox, FormControlLabel, Grid, MenuItem, Switch, Typography } from "@material-ui/core";
+import clsx from "clsx";
 import SendIcon from "@material-ui/icons/Send";
 import React, { useEffect, useState } from "react";
 import { Redirect, useParams } from "react-router";
@@ -13,6 +14,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
 import CarSelectionTable from "../../Controls/CarSelectionTable";
+import OptionsDropdown from "../../Controls/OptionsDropdown";
 import { DropDownList } from "../../Controls/DropDownList";
 import FleetSelectionTable from "../../Controls/FleetSelectionTable";
 import { RoleWrap } from "../../Controls/RoleWrap";
@@ -24,23 +26,25 @@ const FLEET_UPDATE = true;
 
 const MainForm = () => {
   const [updateType, setUpdateType] = useState(CAR_UPDATE);
-  const {manifest_id} = useParams();
+  const { manifest_id } = useParams();
-  const {getManifests, manifests, busy} = useManifestsContext();
+  const { getManifests, manifests, busy } = useManifestsContext();
-  const {deployCarUpdates, deployFleetUpdates, getSUMSVersions, versions, updateSUMSVersion} = useCarUpdatesContext();
+  const { deployCarUpdates, deployFleetUpdates, getSUMSVersions, versions, updateSUMSVersion } = useCarUpdatesContext();
   const {
     groups,
     providers,
     token: {
-      idToken: {jwtToken: token},
+      idToken: { jwtToken: token },
     },
   } = useUserContext();
-  const {setMessage, setTitle, setSitePath} = useStatusContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
   const [manifestName, setManifestName] = useState("");
   const [version, setVersion] = useState("");
   const [sumsVersion, setSUMSersion] = useState("");
   const [createDate, setCreateDate] = useState("");
   const [selected, setSelected] = useState([]);
   const [search, setSearch] = useState("");
+  const [online, setOnline] = useState(false);
+  const [onlineHMI, setOnlineHMI] = useState(false);
   const [softwareVersion, setSoftwareVersion] = useState(SELECT_VERSION);
   const [redirect, setRedirect] = useState("");
   const classes = useStyles();
@@ -55,6 +59,14 @@ const MainForm = () => {
     setSearch(query);
   };
 
+  const handleOnline = (event) => {
+    setOnline(event.target.checked);
+  };
+
+  const handleOnlineHMI = (event) => {
+    setOnlineHMI(event.target.checked);
+  };
+
   const handleSelectAll = (cars) => {
     setSelected(cars);
   };
@@ -103,7 +115,7 @@ const MainForm = () => {
 
   const getData = async () => {
     try {
-      await getManifests({id: parseInt(manifest_id)}, token);
+      await getManifests({ id: parseInt(manifest_id) }, token);
       await getSUMSVersions(token);
     } catch (e) {
       setMessage(e.message);
@@ -146,7 +158,7 @@ const MainForm = () => {
   }, [manifests]);
 
   if (redirect.length > 0) {
-    return <Redirect to={redirect}/>;
+    return <Redirect to={redirect} />;
   }
 
   return (
@@ -168,12 +180,30 @@ const MainForm = () => {
               <FormControlLabel control={<Switch
                 checked={updateType === CAR_UPDATE}
                 onChange={handleChange}
-                inputProps={{'aria-label': 'controlled'}}
+                inputProps={{ 'aria-label': 'controlled' }}
-              />} label="Car(default) or Fleet"/>
+              />} label="Car(default) or Fleet" />
             </RoleWrap>
           </Grid>
-          <Grid item md={4} className={classes.textCenterAlign}>
+          <Grid item md={2} className={classes.textCenterAlign}>
-            <SearchField classes={classes} onSearch={handleSearch}/>
+            <SearchField classes={classes} onSearch={handleSearch} />
+          </Grid>
+          <Grid item md={2} className={clsx(classes.textJustifyAlign, classes.actionsBar)}>
+            <OptionsDropdown listId="filter-menu">
+              <MenuItem>
+                <FormControlLabel
+                  control={<Checkbox checked={online} onChange={handleOnline} />}
+                  label="Only online"
+                />
+              </MenuItem>
+              <MenuItem>
+                <FormControlLabel
+                  control={
+                    <Checkbox checked={onlineHMI} onChange={handleOnlineHMI} />
+                  }
+                  label="Only online HMI"
+                />
+              </MenuItem>
+            </OptionsDropdown>
           </Grid>
           <Grid item md={4} container justifyContent="flex-end">
             {sumsVersion.length === 0 &&
@@ -202,7 +232,11 @@ const MainForm = () => {
               classes={classes}
               token={token}
               multiSelect={true}
-              search={{search}}
+              search={{
+                search,
+                online: online ? true : null,
+                online_hmi: onlineHMI ? true : null,
+              }}
               selected={selected}
               onSelect={handleSelect}
               onSelectAll={handleSelectAll}
@@ -212,10 +246,10 @@ const MainForm = () => {
               classes={classes}
               token={token}
               multiSelect={true}
-              search={{search}}
+              search={{ search }}
               selected={selected}
               onSelect={handleSelect}
-              onSelectAll={handleSelectAll}/>
+              onSelectAll={handleSelectAll} />
           </FleetProvider>
         }
       </form>
@@ -226,7 +260,7 @@ const MainForm = () => {
 const ManifestDeployForm = () => (
   <ManifestsProvider>
     <CarUpdatesProvider>
-      <MainForm/>
+      <MainForm />
     </CarUpdatesProvider>
   </ManifestsProvider>
 );