issues fixed

src/components/Contexts/CarUpdatesContext.jsx

@@ -57,6 +57,7 @@ export const CarUpdatesProvider = ({ children }) => {
   const [carUpdates, setCarUpdates] = useState([]);
   const [versions, setVersions] = useState([SELECT_VERSION_OBJ]);
   const [versionRxSwins, setVersionRxSwins] = useState([]);
+  const [totalVersionRxSwins, setTotalVersionRxSwins] = useState(0);
   const [totalCarUpdates, setTotalCarUpdates] = useState(0);
   const [delayCount, setDelayCount] = useState(0);
   let progressTimer = 0;
@@ -308,17 +309,20 @@ export const CarUpdatesProvider = ({ children }) => {
     return result;
   };
 
-  const getSUMSVersionRxSwins = async (sums_version, token) => {
+  const getSUMSVersionRxSwins = async (sums_version, options, token) => {
     let result;
 
     try {
       setBusy(true);
 
-      result = await api.getSUMSVersionRxSwins(sums_version, token);
+      result = await api.getSUMSVersionRxSwins(sums_version, options, token);
       if (result.error)
         throw new Error(`Get software version rxswins error. ${result.message}`);
 
       setVersionRxSwins(result.data);
+      if (options && options.offset === 0 && result.total) {
+        setTotalVersionRxSwins(result.total);
+      }
     } finally {
       setBusy(false);
     }
@@ -374,6 +378,7 @@ export const CarUpdatesProvider = ({ children }) => {
         stopMonitor,
         updateSUMSVersion,
         getSUMSVersionRxSwins,
+        totalVersionRxSwins,
         deleteSUMSVersionRxSwins,
         addSUMSVersionRxSwins,
       }}

src/components/SUMS/__snapshots__/index.test.jsx.snap

@@ -71,19 +71,25 @@ exports[`SUMS Render 1`] = `
                     </span>
                   </th>
                   <th
+                    aria-sort="descending"
                     class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                     scope="col"
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
                       role="button"
                       tabindex="0"
                     >
                       Created
+                      <span
+                        class="makeStyles-hiddenSortSpan-0"
+                      >
+                        sorted descending
+                      </span>
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionDesc"
                         focusable="false"
                         viewBox="0 0 24 24"
                       >

src/components/SUMS/index.jsx

@@ -31,7 +31,7 @@ import { RoleWrap } from "../Controls/RoleWrap";
 
 const tableColumns = [
   {
-    id: "sums_rxswin",
+    id: "rxswin",
     label: "RXSWIN (RX Software Identification Number)",
   },
   {
@@ -47,7 +47,7 @@ const MainForm = () => {
   const classes = useStyles();
   const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
-  const [orderBy, setOrderBy] = useState("id");
+  const [orderBy, setOrderBy] = useState("created_at");
   const [order, setOrder] = useState("desc");
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [rowToDelete, setRowToDelete] = useState({});
@@ -55,6 +55,7 @@ const MainForm = () => {
     deleteSUMSVersionRxSwins,
     getSUMSVersionRxSwins,
     versionRxSwins,
+    totalVersionRxSwins,
     stopMonitor,
   } = useCarUpdatesContext();
   const {
@@ -78,21 +79,28 @@ const MainForm = () => {
   }, []);
 
   useEffect(() => {
-    (async () => {
+    loadSUMSVersionRxSwins();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sums_version, token, pageIndex, pageSize, orderBy, order]);
+
+  const loadSUMSVersionRxSwins = async () => {
     try {
       if (!sums_version || !token) return;
       stopMonitor();
       await getSUMSVersionRxSwins(
         sums_version,
+        {
+          limit: pageSize,
+          offset: pageSize * pageIndex,
+          order: `${orderBy} ${order}`,
+        },
         token
       );
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
     }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sums_version, token]);
+  };
 
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
@@ -128,10 +136,14 @@ const MainForm = () => {
   const sendDelete = async () => {
     if (rowToDelete) {
       try {
-        await deleteSUMSVersionRxSwins(rowToDelete.version, rowToDelete.rxswin, token);
-        setMessage(`Sent delete for ${rowToDelete.rxswin}`);
+        const result = await deleteSUMSVersionRxSwins(rowToDelete.version, rowToDelete.rxswin, token);
+        if (!result || result.error) return;
+
+        setMessage(`Deleted ${rowToDelete.rxswin}`);
+        loadSUMSVersionRxSwins();
       } catch (e) {
         setMessage(e.message);
+        logger.warn(e.stack);
       }
     }
   };
@@ -166,7 +178,7 @@ const MainForm = () => {
                 <RoleWrap
                   groups={groups}
                   providers={providers}
-                  rolesPerProvider={Permissions.FiskerMagnaCreate}
+                  rolesPerProvider={Permissions.FiskerMagnaDelete}
                 >
                   <IconButton
                     onClick={() => onDeleteClick(row)}
@@ -188,8 +200,8 @@ const MainForm = () => {
             ) : (
               <TablePagination
                 rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={8}
-                count={versionRxSwins.length}
+                colSpan={3}
+                count={totalVersionRxSwins}
                 rowsPerPage={pageSize}
                 page={pageIndex}
                 SelectProps={{

src/services/updatesAPI.js

@@ -124,8 +124,8 @@ const updatesAPI = {
       .catch(errorHandler);
   },
 
-  getSUMSVersionRxSwins: async (sums_version, token) => {
-    return fetch(`${API_ENDPOINT}/manifest/sums/${sums_version}/rxswins`, {
+  getSUMSVersionRxSwins: async (sums_version, options, token) => {
+    return fetch(addQueryParams(`${API_ENDPOINT}/manifest/sums/${sums_version}/rxswins`, options), {
       method: "GET",
       headers: Object.assign(
         { "Content-Type": "application/json" },

src/utils/roles.js

@@ -96,7 +96,12 @@ export const Permissions = {
     [Providers.MAGNA]: [Roles.MAGNAGROUP],
   },
   FiskerMagnaCreate: {
-    [Providers.FISKER]: [Roles.CREATE, Roles.DELETE],
+    [Providers.FISKER]: [Roles.CREATE],
+    [Providers.FISKER_QA]: [Roles.MANUFACTURE],
+    [Providers.MAGNA]: [Roles.MAGNAGROUP],
+  },
+  FiskerMagnaDelete: {
+    [Providers.FISKER]: [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, Roles.DELETE], Permissions.FiskerMagnaCreate, [Providers.FISKER])
+      hasRole([Roles.CREATE], Permissions.FiskerMagnaCreate, [Providers.FISKER])
     ).toEqual(true);
     expect(
       hasRole([Roles.MAGNAGROUP], Permissions.FiskerMagnaCreate, [Providers.MAGNA])
@@ -113,6 +113,18 @@ describe("Roles Helper", () => {
     ).toEqual(true);
   });
 
+  it("Check FiskerMagnaDelete permission", () => {
+    expect(
+      hasRole([Roles.DELETE], Permissions.FiskerMagnaDelete, [Providers.FISKER])
+    ).toEqual(true);
+    expect(
+      hasRole([Roles.MAGNAGROUP], Permissions.FiskerMagnaDelete, [Providers.MAGNA])
+    ).toEqual(true);
+    expect(
+      hasRole([Roles.MANUFACTURE], Permissions.FiskerMagnaDelete, [Providers.FISKER_QA])
+    ).toEqual(true);
+  });
+
   it("Get groups", () => {
     expect(getGroups(TEST_TOKEN)).toEqual(TEST_EXPECTED_GROUPS);
   });