progress; delete and list

src/components/Contexts/CarUpdatesContext.jsx

@@ -326,12 +326,29 @@ export const CarUpdatesProvider = ({ children }) => {
     return result;
   };
 
+  const deleteSUMSVersionRxSwins = async (sums_version, rxswin, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+
+      result = await api.deleteSUMSVersionRxSwins(sums_version, rxswin, token);
+      if (result.error)
+        throw new Error(`Delete software version rxswin error. ${result.message}`);
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  };
+
   return (
     <CarUpdatesContext.Provider
       value={{
         busy,
         carUpdates,
         totalCarUpdates,
+        versionRxSwins,
         versions,
         cancelUpdate,
         deployUpdate,
@@ -345,6 +362,7 @@ export const CarUpdatesProvider = ({ children }) => {
         stopMonitor,
         updateSUMSVersion,
         getSUMSVersionRxSwins,
+        deleteSUMSVersionRxSwins,
       }}
     >
       {children}

src/components/Contexts/__mocks__/CarUpdatesContext.jsx

@@ -154,5 +154,6 @@ export const useCarUpdatesContext = () => ({
   approveUpdate: jest.fn(),
   getSUMSVersions: jest.fn(() => sumsVersions),
   getSUMSVersionRxSwins: jest.fn(() => sumsVersionRxSwins),
+  deleteSUMSVersionRxSwins: jest.fn(),
   updateSUMSVersion: jest.fn(),
 });

src/components/SUMS/index.jsx

@@ -1,4 +1,5 @@
 import {
+  IconButton,
   Table,
   TableBody,
   TableCell,
@@ -6,6 +7,7 @@ import {
   TablePagination,
   TableRow,
 } from "@material-ui/core";
+import DeleteIcon from "@material-ui/icons/Delete";
 import { logger } from "../../services/monitoring";
 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router";
@@ -13,9 +15,14 @@ import {
   CarUpdatesProvider,
   useCarUpdatesContext
 } from "../Contexts/CarUpdatesContext";
+import { useStatusContext } from "../Contexts/StatusContext";
 import { useUserContext } from "../Contexts/UserContext";
 import TableHeaderSortable from "../Table/HeaderSortable";
+import { useLocalStorage } from "../useLocalStorage";
+import DeleteConfirmation from "../DeleteConfirmation";
 import useStyles from "../useStyles";
+import { Permissions } from "../../utils/roles";
+import { RoleWrap } from "../Controls/RoleWrap";
 
 const tableColumns = [
   {
@@ -28,21 +35,31 @@ const tableColumns = [
   },
 ];
 
+const PAGE_SIZE = "SUMS_RXSWIN_TABLE_PAGE_SIZE";
+
 const MainForm = () => {
   const { sums_version } = useParams();
   const classes = useStyles();
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
+  const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [rowToDelete, setRowToDelete] = useState({});
   const {
+    deleteSUMSVersionRxSwins,
     getSUMSVersionRxSwins,
+    versionRxSwins,
     stopMonitor,
   } = useCarUpdatesContext();
-  const [versionRxSwins, setVersionRxSwins] = useState([]);
   const {
     token: {
       idToken: { jwtToken: token },
     },
+    groups,
+    providers,
   } = useUserContext();
+  const { setMessage } = useStatusContext();
 
   useEffect(() => {
     (async () => {
@@ -54,13 +71,22 @@ const MainForm = () => {
           token
         );
       } catch (e) {
-        setVersionRxSwins(e.message);
+        setMessage(e.message);
         logger.warn(e.stack);
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sums_version, token]);
 
+  const handleChangePageIndex = (event, newIndex) => {
+    setPageIndex(newIndex);
+  };
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+  };
+
   const handleSort = (event, property) => {
     try {
       if (property === orderBy) {
@@ -78,7 +104,24 @@ const MainForm = () => {
     }
   };
 
+  const onDeleteClick = (row) => {
+    setRowToDelete(row);
+    setShowDeleteModal(true);
+  }
+
+  const sendDelete = async () => {
+    if (rowToDelete) {
+      try {
+        await deleteSUMSVersionRxSwins(rowToDelete.version, rowToDelete.rxswin, token);
+        setMessage(`Sent delete for ${rowToDelete.rxswin}`);
+      } catch (e) {
+        setMessage(e.message);
+      }
+    }
+  };
+
   return (
+    <div>
       <Table>
         <TableHeaderSortable
           classes={classes}
@@ -88,8 +131,61 @@ const MainForm = () => {
           onSortRequest={handleSort}
         />
         <TableBody>
+          {versionRxSwins.map((row, index) => (
+            <TableRow key={index}>
+              <TableCell align="center">
+                {row.version}
+              </TableCell>
+              <TableCell align="center">
+                {row.rxswin}
+              </TableCell>
+              <TableCell>
+                <RoleWrap
+                  groups={groups}
+                  providers={providers}
+                  rolesPerProvider={Permissions.FiskerMagnaCreate}
+                >
+                  <IconButton
+                    onClick={() => onDeleteClick(row)}
+                    aria-label={`Send delete for ${row.rxswin}`}
+                    size="small"
+                    color="primary"
+                  >
+                    <DeleteIcon aria-label={`Delete ${row.rxswin}`} />
+                  </IconButton>
+                </RoleWrap>
+              </TableCell>
+            </TableRow>
+          ))}
         </TableBody>
+        <TableFooter>
+          <TableRow>
+            {versionRxSwins.length === 0 ? (
+              <TableCell colSpan={8} align="center">No RX Identification Numbers</TableCell>
+            ) : (
+              <TablePagination
+                rowsPerPageOptions={[5, 10, 25, 100]}
+                colSpan={8}
+                count={versionRxSwins.length}
+                rowsPerPage={pageSize}
+                page={pageIndex}
+                SelectProps={{
+                  inputProps: { "aria-label": "rows per page" },
+                  native: true,
+                }}
+                onPageChange={handleChangePageIndex}
+                onRowsPerPageChange={handleChangePageSize}
+              />)}
+          </TableRow>
+        </TableFooter>
       </Table>
+      <DeleteConfirmation
+        message={rowToDelete && rowToDelete.rxswin ? rowToDelete.rxswin : ""}
+        open={showDeleteModal}
+        close={() => setShowDeleteModal(false)}
+        deleteFunction={sendDelete}
+      />
+    </div>
   );
 };
 

src/services/updatesAPI.js

@@ -134,6 +134,18 @@ const updatesAPI = {
     })
       .then(fetchRespHandler)
       .catch(errorHandler);
+  },
+
+  deleteSUMSVersionRxSwins: async (sums_version, rxswin, token) => {
+    return fetch(`${API_ENDPOINT}/manifest/sums/${sums_version}/rxswins/${rxswin}`, {
+      method: "DELETE",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler);
   }
 };
 

src/utils/roles.js

@@ -96,7 +96,7 @@ export const Permissions = {
     [Providers.MAGNA]: [Roles.MAGNAGROUP],
   },
   FiskerMagnaCreate: {
-    [Providers.FISKER]: [Roles.CREATE],
+    [Providers.FISKER]: [Roles.CREATE, Roles.DELETE],
     [Providers.FISKER_QA]: [Roles.MANUFACTURE],
     [Providers.MAGNA]: [Roles.MAGNAGROUP],
   },

src/utils/roles.test.js

@@ -103,7 +103,7 @@ describe("Roles Helper", () => {
 
   it("Check FiskerMagnaCreate permission", () => {
     expect(
-      hasRole([Roles.CREATE], Permissions.FiskerMagnaCreate, [Providers.FISKER])
+      hasRole([Roles.CREATE, Roles.DELETE], Permissions.FiskerMagnaCreate, [Providers.FISKER])
     ).toEqual(true);
     expect(
       hasRole([Roles.MAGNAGROUP], Permissions.FiskerMagnaCreate, [Providers.MAGNA])