MAT-7576b: On TC create, navigate page 1

src/components/createTestCase/CreateNewTestCaseDialog.test.tsx

@@ -7,6 +7,7 @@ import CreateNewTestCaseDialog from "./CreateNewTestCaseDialog";
 import { Measure } from "@madie/madie-models";
 import axios from "../../api/axios-instance";
 import { specialChars } from "../../util/checkSpecialCharacters";
+import { MemoryRouter } from "react-router-dom";
 
 jest.mock("../../api/axios-instance");
 const mockedAxios = axios as jest.Mocked<typeof axios>;
@@ -39,10 +40,18 @@ describe("Create New Test Case Dialog", () => {
     jest.clearAllMocks();
   });
 
+  const mockMeasure = { ...formikInfo, id: "test-id" };
+
   test("should render all the fields in the test case creation form", async () => {
     await act(async () => {
       const { findByTestId } = await render(
-        <CreateNewTestCaseDialog open={true} onClose={undefined} />
+        <MemoryRouter
+          initialEntries={[
+            `/measures/${mockMeasure.id}/edit/test-cases/list-page`,
+          ]}
+        >
+          <CreateNewTestCaseDialog open={true} onClose={undefined} />
+        </MemoryRouter>
       );
 
       expect(await findByTestId("create-test-case-title")).toBeInTheDocument();
@@ -64,7 +73,13 @@ describe("Create New Test Case Dialog", () => {
   test("Save button should not be enabled when required field is empty", async () => {
     await act(async () => {
       const { getByTestId } = await render(
-        <CreateNewTestCaseDialog open={true} onClose={undefined} />
+        <MemoryRouter
+          initialEntries={[
+            `/measures/${mockMeasure.id}/edit/test-cases/list-page`,
+          ]}
+        >
+          <CreateNewTestCaseDialog open={true} onClose={undefined} />
+        </MemoryRouter>
       );
 
       const titleInput = await getByTestId("create-test-case-title-input");
@@ -96,11 +111,17 @@ describe("Create New Test Case Dialog", () => {
     } as unknown as Measure;
     await act(async () => {
       const { getByRole, getByTestId, getByText, queryByTestId } = await render(
-        <CreateNewTestCaseDialog
-          open={true}
-          onClose={jest.fn()}
-          measure={measure}
-        />
+        <MemoryRouter
+          initialEntries={[
+            `/measures/${mockMeasure.id}/edit/test-cases/list-page`,
+          ]}
+        >
+          <CreateNewTestCaseDialog
+            open={true}
+            onClose={jest.fn()}
+            measure={measure}
+          />
+        </MemoryRouter>
       );
 
       const titleInput = await getByTestId("create-test-case-title-input");
@@ -143,7 +164,13 @@ describe("Create New Test Case Dialog", () => {
 
     await act(async () => {
       const { getByRole, getByTestId, getByText, queryByTestId } = await render(
-        <CreateNewTestCaseDialog open={true} onClose={jest.fn()} />
+        <MemoryRouter
+          initialEntries={[
+            `/measures/${mockMeasure.id}/edit/test-cases/list-page`,
+          ]}
+        >
+          <CreateNewTestCaseDialog open={true} onClose={jest.fn()} />
+        </MemoryRouter>
       );
 
       const titleInput = await getByTestId("create-test-case-title-input");
@@ -196,11 +223,17 @@ describe("Create New Test Case Dialog", () => {
     } as unknown as Measure;
     await act(async () => {
       const { getByRole, getByTestId, getByText, queryByTestId } = await render(
-        <CreateNewTestCaseDialog
-          open={true}
-          onClose={jest.fn()}
-          measure={measure}
-        />
+        <MemoryRouter
+          initialEntries={[
+            `/measures/${mockMeasure.id}/edit/test-cases/list-page`,
+          ]}
+        >
+          <CreateNewTestCaseDialog
+            open={true}
+            onClose={jest.fn()}
+            measure={measure}
+          />
+        </MemoryRouter>
       );
 
       const titleInput = await getByTestId("create-test-case-title-input");

src/components/createTestCase/CreateNewTestCaseDialog.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate, useLocation } from "react-router-dom";
+import queryString from "query-string";
 import { TestCase, Measure, Model } from "@madie/madie-models";
 import { TestCaseValidator } from "../../validators/TestCaseValidator";
 import {
@@ -73,6 +74,10 @@
   onClose,
   measure,
 }: createNewTestCaseDialogProps) => {
+  let navigate = useNavigate();
+  const { search } = useLocation();
+  const values = queryString.parse(search);
+
   const [toast, setToast] = useState<Toast>({
     toastOpen: false,
     toastType: "danger",
@@ -162,6 +167,13 @@
         measureId
       );
       handleTestCaseResponse(savedTestCase);
+      // go to page 1
+      const newPath = `/measures/${measureId}/edit/test-cases/list-page/${
+        measure.groups[0].id
+      }?filter=${values.filter ? values.filter : ""}&search=${
+        values.search ? values.search : ""
+      }&page=1&limit=${values.limit ? values.limit : 10}`;
+      navigate(newPath);
     } catch (error) {
       setToast({
         toastOpen: true,