Merge pull request #469 from Fisker-Inc/CEC-3796

CEC-3796 - UI for creating and managing RxSWIN
2023-10-24 15:40:54 -04:00
parent ed05d6024c e771b144f6
commit 1059389d30
16 changed files with 828 additions and 46 deletions
--- a/src/components/App/snapshots/App.test.js.snap
+++ b/src/components/App/snapshots/App.test.js.snap
@@ -4395,48 +4395,6 @@ exports[`App Route /package-deploy authenticated 1`] = `
                    <div
                      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-justify-content-xs-flex-end MuiGrid-grid-md-4"
                    >
-                      <div
-                        class="MuiFormControl-root MuiFormControl-marginNormal"
-                      >
-                        <label
-                          class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
-                          data-shrink="false"
-                        >
-                          Software Version
-                        </label>
-                        <div
-                          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
-                        >
-                          <select
-                            aria-invalid="false"
-                            class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
-                          />
-                          <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
                        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary Mui-disabled Mui-disabled"
                        disabled=""
@@ -6887,7 +6845,13 @@ exports[`App Route /packages authenticated 1`] = `
                    />
                    <td
                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                    />
+                    >
+                      <a
+                        href="/sums/2023.03.00.00.E"
+                      >
+                        2023.03.00.00.E
+                      </a>
+                    </td>
                    <td
                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                    >
--- a/src/components/Contexts/CarUpdatesContext.jsx
+++ b/src/components/Contexts/CarUpdatesContext.jsx
@@ -56,6 +56,8 @@ export const CarUpdatesProvider = ({ children }) => {
  const [busy, setBusy] = useState(false);
  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;
@@ -307,12 +309,62 @@ export const CarUpdatesProvider = ({ children }) => {
    return result;
  };

+  const getSUMSVersionRxSwins = async (sums_version, options, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+
+      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);
+    }
+
+    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;
+  };
+
+  const addSUMSVersionRxSwins = async (sums_version, data, token) => {
+    try {
+      setBusy(true);
+      const result = await api.addSUMSVersionRxSwins(sums_version, data, token);
+      if (result.error)
+        throw new Error(`Add software version rxswin error. ${result.message}`);
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
  return (
    <CarUpdatesContext.Provider
      value={{
        busy,
        carUpdates,
        totalCarUpdates,
+        versionRxSwins,
        versions,
        cancelUpdate,
        deployUpdate,
@@ -325,6 +377,10 @@ export const CarUpdatesProvider = ({ children }) => {
        startMonitor,
        stopMonitor,
        updateSUMSVersion,
+        getSUMSVersionRxSwins,
+        totalVersionRxSwins,
+        deleteSUMSVersionRxSwins,
+        addSUMSVersionRxSwins,
      }}
    >
      {children}
--- a/src/components/Contexts/mocks/CarUpdatesContext.jsx
+++ b/src/components/Contexts/mocks/CarUpdatesContext.jsx
@@ -21,6 +21,7 @@ let carUpdates = [
      ecu_list: "AGS 1.0.0,AMP 1.0.0",
      created: "2021-08-20T18:37:41.960397Z",
      updated: "2021-08-20T18:37:50.007853Z",
+      sums: "2023.03.00.00.E",
    },
  },
  {
@@ -40,6 +41,7 @@ let carUpdates = [
      ecu_list: "AGS 1.0.0,AMP 1.0.0",
      created: "2021-08-20T18:37:41.960397Z",
      updated: "2021-08-20T18:37:50.007853Z",
+      sums: "2023.03.00.00.E",
    },
  },
  {
@@ -59,6 +61,7 @@ let carUpdates = [
      ecu_list: "AGS 1.0.0,AMP 1.0.0",
      created: "2021-08-20T18:37:41.960397Z",
      updated: "2021-08-20T18:37:50.007853Z",
+      sums: "2023.03.00.00.E",
    },
  },
 ];
@@ -122,6 +125,19 @@ let sumsVersions = {
  "data": ["2023.02.01.0.0.A", "2023.02.01.0.0.B"]
 }

+let sumsVersionRxSwins = {
+  data: [
+    {
+      version: "2023.02.01.0.0.A",
+      rxswin: "testrxswin1",
+    },
+    {
+      version: "2023.02.01.0.0.A",
+      rxswin: "testrxswin2",
+    },
+  ]
+}
+
 export const CarUpdatesProvider = ({ children }) => {
  return <div data-testid="mocked-carupdatesprovider">{children}</div>;
 };
@@ -140,5 +156,8 @@ export const useCarUpdatesContext = () => ({
  stopMonitor: jest.fn(),
  approveUpdate: jest.fn(),
  getSUMSVersions: jest.fn(() => sumsVersions),
+  getSUMSVersionRxSwins: jest.fn(() => sumsVersionRxSwins),
+  deleteSUMSVersionRxSwins: jest.fn(),
+  addSUMSVersionRxSwins: jest.fn(),
  updateSUMSVersion: jest.fn(),
 });
--- a/src/components/Contexts/mocks/ManifestsContext.jsx
+++ b/src/components/Contexts/mocks/ManifestsContext.jsx
@@ -53,6 +53,7 @@ let manifest = {
  created: "2021-12-09T22:38:11.679943Z",
  updated: "2022-01-14T00:47:08.996451Z",
  active: true,
+  sums: "2023.03.00.00.E",
 };
 let manifests = [
  {
@@ -62,6 +63,7 @@ let manifests = [
    created: "2021-07-01T22:40:07.778509Z",
    updated: "2021-07-12T18:22:13.736755Z",
    active: true,
+    sums: "2023.03.00.00.E",
  },
 ];
 let totalManifests = 1;
--- a/src/components/Controls/CarUpdatesTable/index.jsx
+++ b/src/components/Controls/CarUpdatesTable/index.jsx
@@ -177,7 +177,9 @@ const MainForm = ({ vin, token }) => {
              </Link>
            </TableCell>
            <TableCell align="center">
-              {row.updatemanifest?.sums}
+              <Link to={`/sums/${row.updatemanifest?.sums}`}>
+                {row.updatemanifest?.sums}
+              </Link>
            </TableCell>
            <TableCell align="center">
              {row.username}
--- a/src/components/Manifest/List/index.jsx
+++ b/src/components/Manifest/List/index.jsx
@@ -447,7 +447,11 @@ const MainForm = () => {
                <TableCell align="center">
                  {formatManifestType(row.manifest_type)}
                </TableCell>
-                <TableCell align="center">{row.sums}</TableCell>
+                <TableCell align="center">
+                  <Link to={`/sums/${row.sums}`}>
+                    {row.sums}
+                  </Link>
+                </TableCell>
                <TableCell align="center">
                  {formatType(row.type)}
                </TableCell>
--- a/src/components/Routes/SiteRoutes.jsx
+++ b/src/components/Routes/SiteRoutes.jsx
@@ -41,6 +41,8 @@ const SMSSend = React.lazy(() => import("../SMS/Send"));
 const SuppliersList = React.lazy(() => import("../Suppliers/List"));
 const SupplierDetails = React.lazy(() => import("../Suppliers/Details"));
 const Datascope = React.lazy(() => import("../Dashboard"));
+const SumsRxSwin = React.lazy(() => import("../SUMS"));
+const SumsRxSwinAdd = React.lazy(() => import("../SUMS/Add"));
 const DashboardCustom = React.lazy(() => import("../DashboardCustom"));

 const SiteRoutes = () => {
@@ -305,6 +307,24 @@ const SiteRoutes = () => {
          rolesPerGroup={Permissions.FiskerMagnaRead}
          providers={providers}
        />
+        <AuthRoute
+          path="/sums/:sums_version"
+          render={() => <SumsRxSwin />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          rolesPerGroup={Permissions.FiskerMagnaCreate}
+          providers={providers}
+        />
+        <AuthRoute
+          path="/sums-rxswin-add/:sums_version"
+          render={() => <SumsRxSwinAdd />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          rolesPerGroup={Permissions.FiskerMagnaCreate}
+          providers={providers}
+        />
        <PageNotFound />
      </Switch>
    </Suspense>
--- a/src/components/SUMS/Add/snapshots/index.test.jsx.snap
+++ b/src/components/SUMS/Add/snapshots/index.test.jsx.snap
@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SUMSAdd Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-carupdatesprovider"
+  >
+    <div
+      data-testid="mocked-statusprovider"
+    >
+      <div
+        data-testid="mocked-userprovider"
+      >
+        <div
+          data-testid="mocked-carupdatesprovider"
+        >
+          <div
+            class="makeStyles-paper-0"
+          >
+            <form
+              action="{onSubmit}"
+              class="makeStyles-form-0"
+              novalidate=""
+            >
+              <div
+                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                  data-shrink="false"
+                  for="rxswin"
+                  id="rxswin-label"
+                >
+                  RX Software Identification Number (RXSWIN)
+                  <span
+                    aria-hidden="true"
+                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                  >
+                     
+                    *
+                  </span>
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="rxswin"
+                    maxlength="255"
+                    name="rxswin"
+                    required=""
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-0"
+                    >
+                      <span>
+                        RX Software Identification Number (RXSWIN)
+                         *
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+              <button
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
+                tabindex="0"
+                type="submit"
+              >
+                <span
+                  class="MuiButton-label"
+                >
+                  Submit
+                </span>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
--- a/src/components/SUMS/Add/index.jsx
+++ b/src/components/SUMS/Add/index.jsx
@@ -0,0 +1,116 @@
+import {
+  Button,
+  TextField
+} from "@material-ui/core";
+import { useParams } from "react-router";
+import React, { useEffect, useState } from "react";
+import { Redirect } from "react-router";
+import { logger } from "../../../services/monitoring";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import {
+  CarUpdatesProvider,
+  useCarUpdatesContext
+} from "../../Contexts/CarUpdatesContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import useStyles from "../../useStyles";
+
+const MainForm = () => {
+  const { addSUMSVersionRxSwins, busy } = useCarUpdatesContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const classes = useStyles();
+  const [redirect, setRedirect] = useState(null);
+  const { sums_version } = useParams();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const [rxswin, setRxswin] = useState("");
+
+  useEffect(() => {
+    setTitle(`Add RXSWIN to SUMS Version ${sums_version}`);
+    setSitePath([
+      {
+        label: `SUMS Version ${sums_version}`,
+        link: `/sums/${sums_version}`,
+      },
+      {
+        label: `Add RXSWIN`,
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onRxswinChange = (event) => {
+    setRxswin(event.target.value);
+  }
+
+  const onSubmit = async (event) => {
+    try {
+      event.preventDefault();
+
+      const data = {
+        "swversion_rxswins": [
+          {
+            "version": sums_version,
+            "rxswin": rxswin,
+          },
+        ],
+      };
+
+      const result = await addSUMSVersionRxSwins(sums_version, data, token);
+      if (!result || result.error) return;
+
+      setMessage(`Added ${rxswin}`);
+      setRedirect(`/sums/${sums_version}`);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  if (redirect && redirect.length > 0) {
+    return <Redirect to={redirect} />;
+  }
+
+  return (
+    <div className={classes.paper}>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <TextField
+          id="rxswin"
+          name="rxswin"
+          label="RX Software Identification Number (RXSWIN)"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+          }}
+          required
+          fullWidth
+          value={rxswin}
+          onChange={onRxswinChange}
+          type="text"
+        />
+        <Button
+          type="submit"
+          disabled={busy}
+          fullWidth
+          variant="contained"
+          color="primary"
+          className={classes.submit}
+          onClick={onSubmit}
+        >
+          {busy ? "Submitting..." : "Submit"}
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+const SumsRxSwinAdd = () => (
+  <CarUpdatesProvider>
+    <MainForm />
+  </CarUpdatesProvider>
+);
+
+export default SumsRxSwinAdd;
--- a/src/components/SUMS/Add/index.test.jsx
+++ b/src/components/SUMS/Add/index.test.jsx
@@ -0,0 +1,46 @@
+jest.mock("../../Contexts/CarUpdatesContext");
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
+);
+import { render, waitFor } from "@testing-library/react";
+import { MemoryRouter, Route } from "react-router-dom";
+import { CarUpdatesProvider } from "../../Contexts/CarUpdatesContext";
+import { StatusProvider } from "../../Contexts/StatusContext";
+import { UserProvider, setToken } from "../../Contexts/UserContext";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
+
+const renderSUMSAdd = async () => {
+  const { container } = render(
+    <CarUpdatesProvider>
+      <StatusProvider>
+        <UserProvider>
+          <MemoryRouter initialEntries={["/sums/add-rxswin/2023.03.00.00.E"]}>
+            <Route path="/sums/add-rxswin/:sums_version">
+              <MainForm sums_version="2023.03.00.00.E" />
+            </Route>
+          </MemoryRouter>
+        </UserProvider>
+      </StatusProvider>
+    </CarUpdatesProvider>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("SUMSAdd", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT_FISKER);
+    const container = await renderSUMSAdd();
+    expect(container).toMatchSnapshot();
+  });
+});
--- a/src/components/SUMS/snapshots/index.test.jsx.snap
+++ b/src/components/SUMS/snapshots/index.test.jsx.snap
@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SUMS Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-carupdatesprovider"
+  >
+    <div
+      data-testid="mocked-statusprovider"
+    >
+      <div
+        data-testid="mocked-userprovider"
+      >
+        <div
+          data-testid="mocked-carupdatesprovider"
+        >
+          <div>
+            <div
+              class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
+            >
+              <div
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 makeStyles-actionsBar-0 MuiGrid-item MuiGrid-grid-md-4"
+              >
+                <a
+                  class="makeStyles-labelInline-0"
+                  href="/sums-rxswin-add/2023.03.00.00.E"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+                    />
+                  </svg>
+                </a>
+              </div>
+            </div>
+            <table
+              class="MuiTable-root"
+            >
+              <thead
+                class="MuiTableHead-root"
+              >
+                <tr
+                  class="MuiTableRow-root MuiTableRow-head"
+                >
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      RXSWIN (RX Software Identification Number)
+                      <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
+                    aria-sort="descending"
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      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-iconDirectionDesc"
+                        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>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root"
+              />
+              <tfoot
+                class="MuiTableFooter-root"
+              >
+                <tr
+                  class="MuiTableRow-root MuiTableRow-footer"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-footer MuiTableCell-alignCenter"
+                    colspan="8"
+                  >
+                    No RX Software Identification Numbers
+                  </td>
+                </tr>
+              </tfoot>
+            </table>
+            <div />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
--- a/src/components/SUMS/index.jsx
+++ b/src/components/SUMS/index.jsx
@@ -0,0 +1,233 @@
+import {
+  Grid,
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TablePagination,
+  TableRow,
+} from "@material-ui/core";
+import AddCircleIcon from "@material-ui/icons/AddCircle";
+import DeleteIcon from "@material-ui/icons/Delete";
+import clsx from "clsx";
+import { LocalDateTimeString } from "../../utils/dates";
+import { logger } from "../../services/monitoring";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import {
+  CarUpdatesProvider,
+  useCarUpdatesContext
+} from "../Contexts/CarUpdatesContext";
+import { useStatusContext } from "../Contexts/StatusContext";
+import { useUserContext } from "../Contexts/UserContext";
+import { Link } from "react-router-dom";
+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 = [
+  {
+    id: "rxswin",
+    label: "RXSWIN (RX Software Identification Number)",
+  },
+  {
+    id: "created_at",
+    label: "Created",
+  },
+];
+
+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("created_at");
+  const [order, setOrder] = useState("desc");
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [rowToDelete, setRowToDelete] = useState({});
+  const {
+    deleteSUMSVersionRxSwins,
+    getSUMSVersionRxSwins,
+    versionRxSwins,
+    totalVersionRxSwins,
+    stopMonitor,
+  } = useCarUpdatesContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+    groups,
+    providers,
+  } = useUserContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
+
+  useEffect(() => {
+    setTitle(`SUMS Version ${sums_version}`);
+    setSitePath([
+      {
+        label: `SUMS Version ${sums_version}`,
+        link: `/sums/${sums_version}`,
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    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);
+    }
+  };
+
+  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) {
+        if (order === "asc") {
+          setOrder("desc");
+        } else {
+          setOrder("asc");
+        }
+      } else {
+        setOrderBy(property);
+        setOrder("asc");
+      }
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
+  const onDeleteClick = (row) => {
+    setRowToDelete(row);
+    setShowDeleteModal(true);
+  }
+
+  const sendDelete = async () => {
+    if (rowToDelete) {
+      try {
+        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);
+      }
+    }
+  };
+
+  return (
+    <div>
+      <Grid container className={classes.root} spacing={2}>
+        <Grid item md={4} className={clsx(classes.textJustifyAlign, classes.actionsBar)}>
+          <Link to={`/sums-rxswin-add/${sums_version}`} className={classes.labelInline}>
+            <AddCircleIcon fontSize="large" />
+          </Link>
+        </Grid>
+      </Grid>
+      <Table>
+        <TableHeaderSortable
+          classes={classes}
+          orderBy={orderBy}
+          order={order}
+          columnData={tableColumns}
+          onSortRequest={handleSort}
+        />
+        <TableBody>
+          {versionRxSwins && versionRxSwins.map((row, index) => (
+            <TableRow key={index}>
+              <TableCell align="center">
+                {row.rxswin}
+              </TableCell>
+              <TableCell align="center">
+                {LocalDateTimeString(row.created)}
+              </TableCell>
+              <TableCell>
+                <RoleWrap
+                  groups={groups}
+                  providers={providers}
+                  rolesPerProvider={Permissions.FiskerMagnaDelete}
+                >
+                  <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 || versionRxSwins.length === 0 ? (
+              <TableCell colSpan={8} align="center">No RX Software Identification Numbers</TableCell>
+            ) : (
+              <TablePagination
+                rowsPerPageOptions={[5, 10, 25, 100]}
+                colSpan={3}
+                count={totalVersionRxSwins}
+                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>
+  );
+};
+
+const SumsRxSwin = () => (
+  <CarUpdatesProvider>
+    <MainForm />
+  </CarUpdatesProvider>
+);
+
+export default SumsRxSwin;
--- a/src/components/SUMS/index.test.jsx
+++ b/src/components/SUMS/index.test.jsx
@@ -0,0 +1,46 @@
+jest.mock("../Contexts/CarUpdatesContext");
+jest.mock("../Contexts/StatusContext");
+jest.mock("../Contexts/UserContext");
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
+);
+import { render, waitFor } from "@testing-library/react";
+import { MemoryRouter, Route } from "react-router-dom";
+import { CarUpdatesProvider } from "../Contexts/CarUpdatesContext";
+import { StatusProvider } from "../Contexts/StatusContext";
+import { UserProvider, setToken } from "../Contexts/UserContext";
+import { TEST_AUTH_OBJECT_FISKER } from "../../utils/testing";
+import MainForm from "./index";
+import addSnapshotSerializer from "../../utils/snapshot";
+
+const renderSUMS = async () => {
+  const { container } = render(
+    <CarUpdatesProvider>
+      <StatusProvider>
+        <UserProvider>
+          <MemoryRouter initialEntries={["/sums/2023.03.00.00.E"]}>
+            <Route path="/sums/:sums_version">
+              <MainForm sums_version="2023.03.00.00.E" />
+            </Route>
+          </MemoryRouter>
+        </UserProvider>
+      </StatusProvider>
+    </CarUpdatesProvider>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("SUMS", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT_FISKER);
+    const container = await renderSUMS();
+    expect(container).toMatchSnapshot();
+  });
+});
--- a/src/services/updatesAPI.js
+++ b/src/services/updatesAPI.js
@@ -122,7 +122,43 @@ const updatesAPI = {
    })
      .then(fetchRespHandler)
      .catch(errorHandler);
-  }
+  },
+
+  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" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .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);
+  },
+
+  addSUMSVersionRxSwins: async (sums_version, data, token) =>
+    fetch(`${API_ENDPOINT}/manifest/sums/${sums_version}/rxswins`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+      body: JSON.stringify(data),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler),
 };

 export default updatesAPI;
--- a/src/utils/roles.js
+++ b/src/utils/roles.js
@@ -100,6 +100,11 @@ export const Permissions = {
    [Providers.FISKER_QA]: [Roles.MANUFACTURE],
    [Providers.MAGNA]: [Roles.MAGNAGROUP],
  },
+  FiskerMagnaDelete: {
+    [Providers.FISKER]: [Roles.DELETE],
+    [Providers.FISKER_QA]: [Roles.MANUFACTURE],
+    [Providers.MAGNA]: [Roles.MAGNAGROUP],
+  },
  ManifestMigration: {
    [Providers.FISKER]: [Roles.MANIFEST_MIGRATION]
  },
--- a/src/utils/roles.test.js
+++ b/src/utils/roles.test.js
@@ -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);
  });