feat: add SubmissionsTable to SubmissionsView (#2905)

editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/SubmissionView.stories.tsx

@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { mockApplications } from "./mocks";
+import SubmissionsView from "./SubmissionsView";
+
+const meta: Meta<typeof SubmissionsView> = {
+  title: "Design System/Molecules/SubmissionsView",
+  component: SubmissionsView,
+};
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+export const DefaultView: Story = {
+  render: () => (
+    <SubmissionsView
+      applications={mockApplications}
+      loading={false}
+      error={undefined}
+    />
+  ),
+};
+
+export const Loading: Story = {
+  render: () => (
+    <SubmissionsView applications={[]} loading={true} error={undefined} />
+  ),
+};
+
+export const ErrorState: Story = {
+  render: () => (
+    <SubmissionsView
+      applications={[]}
+      loading={false}
+      error={new Error("Failed to load data")}
+    />
+  ),
+};
+
+export const Empty: Story = {
+  render: () => (
+    <SubmissionsView applications={[]} loading={false} error={undefined} />
+  ),
+};

editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/SubmissionsView.test.tsx

@@ -0,0 +1,61 @@
+import { waitFor } from "@storybook/testing-library";
+import React from "react";
+import { axe, setup } from "testUtils";
+
+import { mockApplications } from "./mocks";
+import SubmissionsView from "./SubmissionsView";
+
+describe("SubmissionsView Component", () => {
+  test("displays the loading indicator when loading", async () => {
+    const { container, getByTestId } = setup(
+      <SubmissionsView applications={[]} loading={true} error={undefined} />,
+    );
+    await waitFor(() => {
+      expect(getByTestId("delayed-loading-indicator")).toBeInTheDocument();
+    });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  test("displays the error message when there is an error", async () => {
+    const errorMessage = "Test error message";
+    const { container, getByText } = setup(
+      <SubmissionsView
+        applications={[]}
+        loading={false}
+        error={new Error(errorMessage)}
+      />,
+    );
+    expect(getByText(errorMessage)).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  test("displays a message when there are no applications", async () => {
+    const { container, getByText } = setup(
+      <SubmissionsView applications={[]} loading={false} error={undefined} />,
+    );
+    expect(
+      getByText("No submitted applications found for this service."),
+    ).toBeInTheDocument();
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  test("displays the submissions table when there are applications", async () => {
+    const { container, getByText } = setup(
+      <SubmissionsView
+        applications={mockApplications}
+        loading={false}
+        error={undefined}
+      />,
+    );
+    mockApplications.forEach((app) => {
+      expect(getByText(app.sessionId)).toBeInTheDocument();
+    });
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/SubmissionsView.tsx

@@ -1,11 +1,10 @@
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
 import Typography from "@mui/material/Typography";
 import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
 import ErrorFallback from "components/ErrorFallback";
 import React from "react";
 
 import { SubmissionData } from "./submissionData";
+import SubmissionsTable from "./SubmissionsTable";
 
 interface SubmissionsViewProps {
   applications: SubmissionData[];
@@ -26,13 +25,7 @@ const SubmissionsView: React.FC<SubmissionsViewProps> = ({
         No submitted applications found for this service.
       </Typography>
     );
-  return (
-    <List>
-      {applications.map((application, index) => (
-        <ListItem key={index}>{application.sessionId}</ListItem>
-      ))}
-    </List>
-  );
+  return <SubmissionsTable applications={applications} />;
 };
 
 export default SubmissionsView;