CEC-4543 - Add Aftersales filter to Deployments (#378)

* CEC-4543 - Add location to digital twin map

* CEC-4565 - Add Aftersales filter to Deployments

* Comments

---------

Co-authored-by: jwu-fisker <jwu@fiskerinc.com>

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

@@ -6261,9 +6261,9 @@ exports[`App Route /packages authenticated 1`] = `
                       class="MuiButtonBase-root MuiToggleButton-root Mui-selected MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
                       tabindex="0"
                       type="button"
-                      value="true"
+                      value="software"
                     >
-                      Active
+                      Software
                       <span
                         class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                       />
@@ -6273,13 +6273,25 @@ exports[`App Route /packages authenticated 1`] = `
                       class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
                       tabindex="0"
                       type="button"
-                      value="false"
+                      value="archived"
                     >
                       Archived
                       <span
                         class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                       />
                     </button>
+                    <button
+                      aria-pressed="false"
+                      class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
+                      tabindex="0"
+                      type="button"
+                      value="all"
+                    >
+                      All
+                      <span
+                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                      />
+                    </button>
                   </div>
                 </div>
                 <div
@@ -6441,6 +6453,29 @@ exports[`App Route /packages authenticated 1`] = `
                         </svg>
                       </span>
                     </th>
+                    <th
+                      class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root MuiTableSortLabel-root"
+                        role="button"
+                        tabindex="0"
+                      >
+                        Type
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                          />
+                        </svg>
+                      </span>
+                    </th>
                     <th
                       class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                       scope="col"
@@ -6474,7 +6509,7 @@ exports[`App Route /packages authenticated 1`] = `
                         role="button"
                         tabindex="0"
                       >
-                        Type
+                        Update
                         <svg
                           aria-hidden="true"
                           class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
@@ -6597,6 +6632,9 @@ exports[`App Route /packages authenticated 1`] = `
                     <td
                       class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                     />
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    />
                     <td
                       class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                     >
@@ -6662,7 +6700,7 @@ exports[`App Route /packages authenticated 1`] = `
                   >
                     <td
                       class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                      colspan="8"
+                      colspan="10"
                     >
                       <div
                         class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"

src/components/Manifest/List/index.jsx

@@ -1,4 +1,5 @@
 import {
+  Checkbox,
   Grid,
   Table,
   TableBody,
@@ -7,7 +8,6 @@ import {
   TablePagination,
   TableRow,
   Tooltip,
-  Checkbox,
 } from "@material-ui/core";
 import DeleteIcon from "@material-ui/icons/Delete";
 import SendIcon from "@material-ui/icons/Send";
@@ -21,16 +21,18 @@ import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
 import EditIcon from "@material-ui/icons/Edit";
+import { useArchiveManifests } from "../../../hooks";
 import { logger } from "../../../services/monitoring";
 import { LocalDateTimeString } from "../../../utils/dates";
-import { TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
+import { TYPE_MANIFEST_AFTERSALES, TYPE_MANIFEST_CONFIG, TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
-import { hasRole, Permissions } from "../../../utils/roles";
+import { Permissions, hasRole } from "../../../utils/roles";
 import {
   ManifestsProvider,
   useManifestsContext
 } from "../../Contexts/ManifestsContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
+import DropDownButton from "../../Controls/DropDownButton";
 import ECUList from "../../Controls/ECUList";
 import { RoleWrap } from "../../Controls/RoleWrap";
 import SearchField from "../../Controls/SearchField";
@@ -38,8 +40,6 @@ import DeleteConfirmation from "../../DeleteConfirmation";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import { useLocalStorage } from "../../useLocalStorage";
 import useStyles from "../../useStyles";
-import { useArchiveManifests } from "../../../hooks";
-import DropDownButton from "../../Controls/DropDownButton";
 
 const tableColumns = [
   {
@@ -54,13 +54,17 @@ const tableColumns = [
     id: "version",
     label: "Version",
   },
+  {
+    id: "manifest_type",
+    label: "Type",
+  },
   {
     id: "sums",
     label: "SUMS",
   },
   {
     id: "type",
-    label: "Type",
+    label: "Update",
   },
   {
     id: "created_at",
@@ -76,7 +80,7 @@ const tableColumns = [
   },
 ];
 
-const formatManifestType = (type) => {
+const formatType = (type) => {
   switch (type) {
     case "forced":
       return "Forced";
@@ -85,6 +89,21 @@ const formatManifestType = (type) => {
   }
 };
 
+const formatManifestType = (manifestType) => {
+  switch (manifestType) {
+    case 1:
+      return "Software";
+    case 2:
+      return "Config";
+    case 3:
+      return "Magna";
+    case 4:
+      return "Aftersales";
+    default:
+      return manifestType;
+  }
+}
+
 const PAGE_SIZE = "MANIFEST_LIST_PAGE_SIZE";
 
 const MainForm = () => {
@@ -94,7 +113,7 @@ const MainForm = () => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("asc");
   const [search, setSearch] = useLocalStorage("DEPLOYMENT_SEARCH", "");
-  const [active, setActive] = useLocalStorage("DEPLOYMENT_ACTIVE", "true");
+  const [active, setActive] = useLocalStorage("DEPLOYMENT_ACTIVE", "software");
   const [selected, setSelected] = useState([]);
 
   const [showDeleteModal, setShowDeleteModal] = useState(false);
@@ -135,6 +154,45 @@ const MainForm = () => {
     (async () => {
       try {
         handleActiveChange(null, active);
+        switch (active) {
+          case "all":
+            await getManifests(
+              {
+                limit: pageSize,
+                offset: pageSize * pageIndex,
+                order: `${orderBy} ${order}`,
+                search,
+              },
+              token
+            );
+            break;
+          case "aftersales":
+            await getManifests(
+              {
+                limit: pageSize,
+                offset: pageSize * pageIndex,
+                order: `${orderBy} ${order}`,
+                manifest_type: TYPE_MANIFEST_AFTERSALES,
+                search,
+                active: "true",
+              },
+              token
+            );
+            break;
+          case "config":
+            await getManifests(
+              {
+                limit: pageSize,
+                offset: pageSize * pageIndex,
+                order: `${orderBy} ${order}`,
+                manifest_type: TYPE_MANIFEST_CONFIG,
+                search,
+                active: "true",
+              },
+              token
+            );
+            break;
+          case "software":
             await getManifests(
               {
                 limit: pageSize,
@@ -142,10 +200,27 @@ const MainForm = () => {
                 order: `${orderBy} ${order}`,
                 manifest_type: TYPE_MANIFEST_SOFTWARE,
                 search,
-            active,
+                active: "true",
               },
               token
             );
+            break;
+          case "archived":
+            await getManifests(
+              {
+                limit: pageSize,
+                offset: pageSize * pageIndex,
+                order: `${orderBy} ${order}`,
+                manifest_type: TYPE_MANIFEST_SOFTWARE,
+                search,
+                active: "false",
+              },
+              token
+            );
+            break;
+          default:
+            break;
+        }
       } catch (e) {
         setMessage(e.message);
         logger.warn(e.stack);
@@ -287,8 +362,9 @@ const MainForm = () => {
               aria-label="Active"
               onChange={handleActiveChange}
             >
-              <ToggleButton value={"true"}>Active</ToggleButton>
+              <ToggleButton value={"software"}>Software</ToggleButton>
-              <ToggleButton value={"false"}>Archived</ToggleButton>
+              <ToggleButton value={"archived"}>Archived</ToggleButton>
+              <ToggleButton value={"all"}>All</ToggleButton>
             </ToggleButtonGroup>
           </RoleWrap>
         </Grid>
@@ -344,9 +420,12 @@ const MainForm = () => {
                   )}
                 </TableCell>
                 <TableCell align="center">{row.version}</TableCell>
+                <TableCell align="center">
+                  {formatManifestType(row.manifest_type)}
+                </TableCell>
                 <TableCell align="center">{row.sums}</TableCell>
                 <TableCell align="center">
-                  {formatManifestType(row.type)}
+                  {formatType(row.type)}
                 </TableCell>
                 <TableCell align="center">
                   {LocalDateTimeString(row.created)}
@@ -363,7 +442,7 @@ const MainForm = () => {
           <TableRow>
             <TablePagination
               rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={8}
+              colSpan={tableColumns.length + 1}
               count={totalManifests}
               rowsPerPage={pageSize}
               page={pageIndex}

src/utils/manifest_types.js

@@ -1,2 +1,4 @@
 export const TYPE_MANIFEST_SOFTWARE = 1;
 export const TYPE_MANIFEST_CONFIG = 2;
+export const TYPE_MANIFEST_MAGNA = 3;
+export const TYPE_MANIFEST_AFTERSALES = 4;