refactor(coral): Replace temp dialog with toast (#1352)

* Use toast in topic request * Use toast in acl request forms. * Use toast in connector request form. * Use toast in schema request form. --------- Signed-off-by: Mirjam Aulbach <[email protected]>
Aiven-Open · Jun 14, 2023 · b2be0a1 · b2be0a1
1 parent 7af18ed
commit b2be0a1
Show file tree

Hide file tree

Showing 11 changed files with 400 additions and 538 deletions.
diff --git a/coral/src/app/features/connectors/request/ConnectorRequest.test.tsx b/coral/src/app/features/connectors/request/ConnectorRequest.test.tsx
@@ -24,6 +24,12 @@ jest.mock("react-router-dom", () => ({
   useNavigate: () => mockedUsedNavigate,
 }));
 
+const mockedUseToast = jest.fn();
+jest.mock("@aivenio/aquarium", () => ({
+  ...jest.requireActual("@aivenio/aquarium"),
+  useToast: () => mockedUseToast,
+}));
+
 describe("<ConnectorRequest />", () => {
   const originalConsoleError = console.error;
   let user: ReturnType<typeof userEvent.setup>;
@@ -45,7 +51,12 @@ describe("<ConnectorRequest />", () => {
           createEnvironment({ id: "2", name: "TST" }),
           createEnvironment({ id: "3", name: "PROD" }),
         ]);
-        customRender(<ConnectorRequest />, { queryClient: true });
+        customRender(
+          <AquariumContext>
+            <ConnectorRequest />
+          </AquariumContext>,
+          { queryClient: true }
+        );
       });
 
       afterEach(cleanup);
@@ -96,7 +107,12 @@ describe("<ConnectorRequest />", () => {
           createEnvironment({ id: "2", name: "TST" }),
           createEnvironment({ id: "3", name: "PROD" }),
         ]);
-        customRender(<ConnectorRequest />, { queryClient: true });
+        customRender(
+          <AquariumContext>
+            <ConnectorRequest />
+          </AquariumContext>,
+          { queryClient: true }
+        );
       });
 
       afterEach(cleanup);
@@ -405,7 +421,10 @@ describe("<ConnectorRequest />", () => {
         });
       });
 
-      afterEach(() => cleanup());
+      afterEach(() => {
+        mockedUseToast.mockReset();
+        cleanup();
+      });
 
       it("creates a new connector request when input was valid", async () => {
         await user.click(
@@ -424,6 +443,7 @@ describe("<ConnectorRequest />", () => {
           environment: "1",
           remarks: "",
         });
+        await waitFor(() => expect(mockedUseToast).toHaveBeenCalled());
       });
 
       it("errors and does not create a new connector request when input was invalid", async () => {
@@ -440,12 +460,13 @@ describe("<ConnectorRequest />", () => {
         );
 
         expect(createConnectorRequest).not.toHaveBeenCalled();
+        expect(mockedUseToast).not.toHaveBeenCalled();
         expect(
           screen.getByRole("button", { name: "Submit request" })
         ).toBeEnabled();
       });
 
-      it("shows a dialog informing user that request was successful", async () => {
+      it("shows a notification informing user that request was successful and redirects them", async () => {
         await user.click(
           screen.getByRole("button", { name: "Submit request" })
         );
@@ -456,32 +477,13 @@ describe("<ConnectorRequest />", () => {
         });
 
         expect(createConnectorRequest).toHaveBeenCalledTimes(1);
-
-        const successModal = await screen.findByRole("dialog");
-
-        expect(successModal).toBeVisible();
-        expect(successModal).toHaveTextContent("Connector request successful!");
-      });
-
-      it("user can continue to the next page without waiting for redirect in the dialog", async () => {
-        await user.click(
-          screen.getByRole("button", { name: "Submit request" })
+        await waitFor(() =>
+          expect(mockedUseToast).toHaveBeenCalledWith({
+            message: "Connector request successful!",
+            position: "bottom-left",
+            variant: "default",
+          })
         );
-
-        await waitFor(() => {
-          const btn = screen.getByRole("button", { name: "Submit request" });
-          expect(btn).toBeDisabled();
-        });
-
-        expect(createConnectorRequest).toHaveBeenCalledTimes(1);
-
-        const successModal = await screen.findByRole("dialog");
-        const button = within(successModal).getByRole("button", {
-          name: "Continue",
-        });
-
-        await userEvent.click(button);
-
         expect(mockedUsedNavigate).toHaveBeenCalledWith(
           "/requests/connectors?status=CREATED"
         );

diff --git a/coral/src/app/features/connectors/request/ConnectorRequest.tsx b/coral/src/app/features/connectors/request/ConnectorRequest.tsx
@@ -6,6 +6,7 @@ import {
   Grid,
   Label,
   Typography,
+  useToast,
 } from "@aivenio/aquarium";
 import MonacoEditor from "@monaco-editor/react";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -34,9 +35,10 @@ import { parseErrorMsg } from "src/services/mutation-utils";
 
 function ConnectorRequest() {
   const [cancelDialogVisible, setCancelDialogVisible] = useState(false);
-  const [successModalOpen, setSuccessModalOpen] = useState(false);
 
   const navigate = useNavigate();
+  const toast = useToast();
+
   const form = useForm<ConnectorRequestFormSchema>({
     schema: connectorRequestFormSchema,
   });
@@ -51,17 +53,15 @@ function ConnectorRequest() {
 
   const connectorRequestMutation = useMutation(createConnectorRequest, {
     onSuccess: () => {
-      setSuccessModalOpen(true);
-      setTimeout(() => {
-        redirectToMyRequests();
-      }, 5 * 1000);
+      navigate("/requests/connectors?status=CREATED");
+      toast({
+        message: "Connector request successful!",
+        position: "bottom-left",
+        variant: "default",
+      });
     },
   });
 
-  function redirectToMyRequests() {
-    navigate("/requests/connectors?status=CREATED");
-  }
-
   function onSubmitForm(userInput: ConnectorRequestFormSchema) {
     connectorRequestMutation.mutate(userInput);
   }
@@ -73,20 +73,6 @@ function ConnectorRequest() {
 
   return (
     <>
-      {successModalOpen && (
-        <Dialog
-          title={"Connector request successful!"}
-          primaryAction={{
-            text: "Continue",
-            onClick: redirectToMyRequests,
-          }}
-          type={"confirmation"}
-        >
-          Redirecting to My team&apos;s request page shortly. Select
-          &quot;Continue&quot; for an immediate redirect.
-        </Dialog>
-      )}
-
       <Box>
         {connectorRequestMutation.isError && (
           <Box marginBottom={"l1"} role="alert">