CEC-3149: Archive Manifest option (#241)

Co-authored-by: Alexander Andrews <aandrews@fiskerinc.com>

src/components/Manifest/List/index.jsx

@@ -8,6 +8,10 @@ import {
   TableRow,
   Tooltip,
 } from "@material-ui/core";
+import {
+  ToggleButton,
+  ToggleButtonGroup
+} from "@mui/material"
 import DeleteIcon from "@material-ui/icons/Delete";
 import SendIcon from "@material-ui/icons/Send";
 import VisibilityIcon from "@material-ui/icons/Visibility";
@@ -82,6 +86,7 @@ const MainForm = () => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("asc");
   const [search, setSearch] = useState("");
+  const [active, setActive] = useState(true);
 
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [deleteId, setDeleteId] = useState("");
@@ -127,6 +132,7 @@ const MainForm = () => {
             order: `${orderBy} ${order}`,
             manifest_type: TYPE_MANIFEST_SOFTWARE,
             search,
+            active: active,
           },
           token
         );
@@ -136,7 +142,7 @@ const MainForm = () => {
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageIndex, pageSize, token, orderBy, order, search]);
+  }, [pageIndex, pageSize, token, orderBy, order, search, active]);
 
   const handleChangePageIndex = (_event, newIndex) => {
     setPageIndex(newIndex);
@@ -152,6 +158,12 @@ const MainForm = () => {
     setSearch(query);
   };
 
+  const handleActiveChange = (event, newAlignment) => {
+    if (newAlignment !== null){
+      setActive(newAlignment)
+    }
+  }
+
   const setDeletePopup = (id, row) => {
     setDeleteId(id);
     setDeleteRowName(`${row.name} ${row.version}`);
@@ -230,6 +242,15 @@ const MainForm = () => {
         <Grid item md={4} className={classes.textJustifyAlign}></Grid>
         <Grid item md={4} className={classes.textCenterAlign}>
           <SearchField classes={classes} onSearch={handleSearch} />
+          <ToggleButtonGroup
+            value={active}
+            exclusive
+            aria-label="Active"
+            onChange={handleActiveChange}
+          >
+            <ToggleButton value={true}>Active</ToggleButton>
+            <ToggleButton value={false}>Archived</ToggleButton>
+          </ToggleButtonGroup>
         </Grid>
         <Grid item md={4} className={classes.textRightAlign}></Grid>
       </Grid>

src/components/Manifest/Update/__snapshots__/index.test.jsx.snap

@@ -168,6 +168,62 @@ exports[`Manifest Details Component Render 1`] = `
                 </fieldset>
               </div>
             </div>
+            <div
+              class="MuiFormControl-root makeStyles-form-0 MuiFormControl-marginNormal MuiFormControl-fullWidth"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                data-shrink="true"
+                for="manifest-active"
+              >
+                Type
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+              >
+                <select
+                  aria-invalid="false"
+                  class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
+                  id="send-manifest-active"
+                  name="manifest-active"
+                >
+                  <option
+                    value="true"
+                  >
+                    active
+                  </option>
+                  <option
+                    value="false"
+                  >
+                    archived
+                  </option>
+                </select>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  style="padding-left: 8px;"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legend-0"
+                    style="width: 0.01px;"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
             <button
               aria-label="send command"
               class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"

src/components/Manifest/Update/index.jsx

@@ -1,15 +1,15 @@
-import React, {useEffect, useState} from "react";
-import {useParams} from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import { Redirect } from "react-router";
 import useStyles from "../../useStyles";
-import {ManifestsProvider, useManifestsContext} from "../../Contexts/ManifestsContext";
-import {useUserContext} from "../../Contexts/UserContext";
-import {useStatusContext} from "../../Contexts/StatusContext";
-import {Button, FormControl, InputLabel, Select, TextField} from "@material-ui/core";
+import { ManifestsProvider, useManifestsContext } from "../../Contexts/ManifestsContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { Button, FormControl, InputLabel, Select, TextField } from "@material-ui/core";
 
 const manifestTypes = [
-  {value: "standard", label: "Standard"},
-  {value: "forced", label: "Forced"},
+  { value: "standard", label: "Standard" },
+  { value: "forced", label: "Forced" },
 ];
 
 const emptyManifest = {
@@ -19,23 +19,24 @@ const emptyManifest = {
 
 const MainForm = () => {
 
-  const {manifest_id} = useParams();
+  const { manifest_id } = useParams();
   const classes = useStyles();
 
   const [manifest, setManifest] = useState(null);
   const [redirect, setRedirect] = useState(null);
 
-  const {getManifest, busy, updateManifest} = useManifestsContext();
+  const { getManifest, busy, updateManifest } = useManifestsContext();
   const {
     token: {
-      idToken: {jwtToken: token},
+      idToken: { jwtToken: token },
     },
   } = useUserContext();
 
-  const {setMessage, setTitle, setSitePath} = useStatusContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
 
   const [name, setName] = useState("");
   const [type, setType] = useState("");
+  const [active, setActive] = useState(true); // So !active = archived
 
 
   const changeName = (e) => {
@@ -46,10 +47,14 @@ const MainForm = () => {
     setType(e.target.value);
   };
 
+  const changeActive = (e) => {
+    setActive(e.target.value === 'true')
+  }
+
   const onSubmit = async (e) => {
     e.preventDefault();
     try {
-      const result = await updateManifest(manifest_id, {name, type}, token);
+      const result = await updateManifest(manifest_id, { name, type, active }, token);
       if (!result || result.error) return;
 
       setMessage(`Updated manifest ${manifest_id}`);
@@ -70,6 +75,7 @@ const MainForm = () => {
           setManifest(result);
           setName(result.name);
           setType(result.type);
+          setActive(result.active)
         }
       } catch (e) {
         setMessage(e.message);
@@ -156,6 +162,29 @@ const MainForm = () => {
             ))}
           </Select>
         </FormControl>
+        <FormControl
+          className={classes.form}
+          variant="outlined"
+          fullWidth
+          margin="normal"
+        >
+          <InputLabel htmlFor="manifest-active" className={classes.whiteBackground}>
+            Type
+          </InputLabel>
+          <Select
+            native
+            value={active}
+            variant="outlined"
+            inputProps={{
+              name: "manifest-active",
+              id: "send-manifest-active",
+            }}
+            onChange={changeActive}
+          >
+            <option key={0} value={true}>active</option>
+            <option key={1} value={false}>archived</option>
+          </Select>
+        </FormControl>
         <Button
           type="submit"
           aria-label="send command"
@@ -176,7 +205,7 @@ const MainForm = () => {
 
 const ManifestUpdate = () => (
   <ManifestsProvider>
-    <MainForm/>
+    <MainForm />
   </ManifestsProvider>
 );