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>