fix(coral): fix redirect after topic request (#512)

As we are navigating the user back to Angular application, we can not use React Router for the operation: fix redirect after topic request Signed-off-by: Samuli Suortti <smulis@aiven.io>
Aiven-Open · Jan 31, 2023 · 341c5c4 · 341c5c4
1 parent 455b623
commit 341c5c4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 29 deletions.
diff --git a/coral/src/app/features/topics/request/TopicRequest.test.tsx b/coral/src/app/features/topics/request/TopicRequest.test.tsx
@@ -14,19 +14,6 @@ import {
 import { waitForElementToBeRemoved } from "@testing-library/react/pure";
 import api from "src/services/api";
 
-const NavigateMock = jest.fn();
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  Navigate: (args: { to: string }) => {
-    NavigateMock(args);
-    return (
-      <div data-testid="mockedRedirectComponent">
-        This dummy component represents &lt;Navigate&gt;
-      </div>
-    );
-  },
-}));
-
 describe("<TopicRequest />", () => {
   const originalConsoleError = console.error;
   let user: ReturnType<typeof userEvent.setup>;
@@ -773,6 +760,22 @@ describe("<TopicRequest />", () => {
       });
     });
     describe("when API request is successful", () => {
+      const locationAssignSpy = jest.fn();
+      let originalLocation: Location;
+
+      beforeAll(() => {
+        originalLocation = window.location;
+        Object.defineProperty(global.window, "location", {
+          writable: true,
+          value: {
+            assign: locationAssignSpy,
+          },
+        });
+      });
+
+      afterAll(() => {
+        global.window.location = originalLocation;
+      });
       beforeEach(async () => {
         mockRequestTopic({
           mswInstance: server,
@@ -803,11 +806,10 @@ describe("<TopicRequest />", () => {
         });
 
         await waitFor(() => {
-          screen.getByTestId("mockedRedirectComponent");
-          expect(NavigateMock).toHaveBeenCalledTimes(1);
-          expect(NavigateMock).toHaveBeenCalledWith({
-            to: "/myTopicRequests?reqsType=created&topicCreated=true",
-          });
+          expect(locationAssignSpy).toHaveBeenCalledTimes(1);
+          expect(locationAssignSpy).toHaveBeenCalledWith(
+            "/myTopicRequests?reqsType=created&topicCreated=true"
+          );
         });
       });
     });

diff --git a/coral/src/app/features/topics/request/TopicRequest.tsx b/coral/src/app/features/topics/request/TopicRequest.tsx
@@ -19,7 +19,6 @@ import { Environment } from "src/domain/environment";
 import { getEnvironmentsForTeam } from "src/domain/environment/environment-api";
 import AdvancedConfiguration from "src/app/features/topics/request/components/AdvancedConfiguration";
 import { requestTopic } from "src/domain/topic/topic-api";
-import { Navigate } from "react-router-dom";
 import { parseErrorMsg } from "src/services/mutation-utils";
 import { createTopicRequestPayload } from "src/app/features/topics/request/utils";
 
@@ -45,8 +44,12 @@ function TopicRequest() {
     defaultValues,
   });
 
-  const { mutate, isLoading, isSuccess, isError, error } =
-    useMutation(requestTopic);
+  const { mutate, isLoading, isError, error } = useMutation(requestTopic, {
+    onSuccess: () =>
+      window.location.assign(
+        "/myTopicRequests?reqsType=created&topicCreated=true"
+      ),
+  });
   const onSubmit: SubmitHandler<Schema> = (data) =>
     mutate(createTopicRequestPayload(data));
 
@@ -55,14 +58,6 @@ function TopicRequest() {
     isInitialized: defaultValues !== undefined,
   });
 
-  if (isSuccess) {
-    const params = new URLSearchParams({
-      reqsType: "created",
-      topicCreated: "true",
-    });
-    return <Navigate to={`/myTopicRequests?${params.toString()}`} />;
-  }
-
   return (
     <Box style={{ maxWidth: 1200 }}>
       {isError && (