@onewelcome/react-lib-components 2.2.0 → 3.0.0

package/src/components/Notifications/Dialog/DialogTitle/DialogTitle.module.scss

@@ -16,8 +16,19 @@
 
 .header {
   margin: 1.5rem 1.25rem 1.25rem;
+  display: flex;
+  align-items: flex-start;
 }
 
 .title {
   margin: 0;
+  line-height: 1;
+
+  &-icon > [data-icon] {
+    font-size: 1.25rem;
+  }
+}
+
+.caption {
+  color: var(--color-blue-grey500);
 }

package/src/components/Notifications/Dialog/DialogTitle/DialogTitle.test.tsx

@@ -31,6 +31,33 @@ describe("DialogTitle", () => {
     expect(dialogTitleContainer).toHaveClass("header");
     expect(getByText(container, initParams.title));
   });
+
+  it("should render a title icon", () => {
+    const { container } = render(<DialogTitle {...initParams} titleIcon={true} />);
+
+    const dialogTitleContainer = container.children[0];
+    expect(dialogTitleContainer).toHaveClass("header");
+    expect(getByText(container, initParams.title));
+  });
+
+  it("should render a custom title icon", () => {
+    const { container } = render(
+      <DialogTitle {...initParams} titleIcon={<div>Custom Icon</div>} />
+    );
+
+    const dialogTitleContainer = container.children[0];
+    expect(dialogTitleContainer).toHaveClass("header");
+    expect(getByText(container, initParams.title));
+  });
+
+  it("should render a caption", () => {
+    const { container } = render(<DialogTitle {...initParams} caption="Example caption" />);
+
+    const dialogTitleContainer = container.children[0];
+    expect(dialogTitleContainer).toHaveClass("header");
+    expect(getByText(container, initParams.title));
+    expect(getByText(container, "Example caption"));
+  });
 });
 
 describe("ref should work", () => {

package/src/components/Notifications/Dialog/DialogTitle/DialogTitle.tsx

@@ -17,21 +17,42 @@
 import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import { Typography } from "../../../Typography/Typography";
 import classes from "./DialogTitle.module.scss";
+import { Icon, Icons } from "../../../Icon/Icon";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
   id: string;
   title: string;
+  titleIcon?: React.ReactNode;
+  caption?: string;
 }
 
 const DialogTitleComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { id, title, ...rest }: Props,
+  { id, title, titleIcon, caption, ...rest }: Props,
   ref
 ) => {
   return (
     <div {...rest} ref={ref} className={classes["header"]}>
-      <Typography id={id} className={classes["title"]} tag="h1" variant="h4">
-        {title}
-      </Typography>
+      {titleIcon && (
+        <div className={classes["title-icon"]}>
+          {typeof titleIcon === "boolean" ? <Icon icon={Icons.InfoCircle} /> : titleIcon}
+        </div>
+      )}
+      <div className={classes["title-wrapper"]}>
+        <Typography
+          id={id}
+          className={classes["title"]}
+          spacing={{ marginLeft: 2 }}
+          tag="h1"
+          variant="h4"
+        >
+          {title}
+        </Typography>
+        {caption && (
+          <Typography className={classes["caption"]} spacing={{ marginLeft: 2 }} variant="sub-text">
+            {caption}
+          </Typography>
+        )}
+      </div>
     </div>
   );
 };

package/src/components/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.tsx

@@ -18,11 +18,13 @@ import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import { Dialog } from "../../Dialog/Dialog";
 import { Typography } from "../../../Typography/Typography";
 import { DataAttributeKey } from "../../../../interfaces";
+import { CancelAction } from "../../BaseModal/BaseModalActions/BaseModalActions";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
   open: boolean;
   discardChangesButtonLabel: string;
   keepEditingButtonLabel: string;
+  cancelAction?: CancelAction;
   contentLabel: string;
   titleLabel: string;
   [dataAttribute: DataAttributeKey]: any;
@@ -39,6 +41,7 @@ const DiscardChangesDialogComponent: ForwardRefRenderFunction<HTMLDivElement, Pr
     keepEditingButtonLabel,
     contentLabel,
     titleLabel,
+    cancelAction,
     ...rest
   }: Props,
   ref
@@ -48,9 +51,9 @@ const DiscardChangesDialogComponent: ForwardRefRenderFunction<HTMLDivElement, Pr
       {...rest}
       ref={ref}
       open={open}
-      alignActions="left"
       title={titleLabel}
       onClose={onKeepEditing}
+      cancelAction={cancelAction}
       primaryAction={{
         label: discardChangesButtonLabel,
         onClick: onDiscardChanges

package/src/components/Notifications/DiscardChangesModal/DiscardChangesModal.test.tsx

@@ -97,15 +97,12 @@ describe("DiscardChangesModal should show DiscardChangesDialog", () => {
 
     expect(defaultParams.onClose).not.toBeCalled();
     await findDiscardChangesDialog(container);
-    const [_, keepEditingBtn] = getDiscardChangesButtons(container);
+    const [_cancelButton, _discardButton, keepEditingBtn] = getDiscardChangesButtons(container);
     expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel);
     expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.contentLabel);
 
     await userEvent.click(keepEditingBtn);
     expect(defaultParams.onClose).not.toBeCalled();
-    await waitFor(() =>
-      expect(container).not.toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel)
-    );
   });
 
   it("showing DiscardChangesDialog and clicking on `discard` button", async () => {
@@ -118,7 +115,7 @@ describe("DiscardChangesModal should show DiscardChangesDialog", () => {
     await userEvent.click(closeBtn);
 
     await findDiscardChangesDialog(container);
-    const [discardBtn] = getDiscardChangesButtons(container);
+    const [_cancelButton, discardBtn] = getDiscardChangesButtons(container);
     expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel);
 
     await userEvent.click(discardBtn);

package/src/components/Notifications/NotificationProvider/NotificationContext.test.tsx

@@ -0,0 +1,449 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { useEffect, useState } from "react";
+import { getByTestId, render, renderHook, waitFor } from "@testing-library/react";
+import { NotificationProvider, useNotificationContext } from "./NotificationContext";
+import { Translations } from "./notification.interfaces";
+import { act } from "react-dom/test-utils";
+import { SnackbarProvider } from "../Snackbar/SnackbarProvider/SnackbarProvider";
+import userEvent from "@testing-library/user-event";
+import * as useSnackbarModule from "../Snackbar/useSnackbar";
+
+jest.mock("../../../util/helper", () => ({
+  generateID: () => "test-id",
+  deepMerge: (defaultTranslations: Translations, translations: Translations) => ({
+    ...defaultTranslations,
+    ...translations
+  })
+}));
+
+describe("Notification", () => {
+  describe("useNotificationContext", () => {
+    it("returns the correct context", () => {
+      const { result } = renderHook(() => useNotificationContext(), {
+        wrapper: NotificationProvider
+      });
+      expect(result.current).toEqual({
+        addNotification: expect.any(Function),
+        removeNotification: expect.any(Function),
+        resetNotifications: expect.any(Function),
+        state: {
+          notifications: []
+        }
+      });
+    });
+  });
+
+  describe("Adding and using the notification functions", () => {
+    it("Fires the addNotification and removeNotification function", async () => {
+      const { result } = renderHook(() => useNotificationContext(), {
+        wrapper: NotificationProvider
+      });
+
+      expect(result.current.state.notifications).toEqual([]);
+
+      await act(() => {
+        result.current.addNotification({
+          type: "error",
+          status: 401,
+          message: "Test Error"
+        });
+      });
+
+      expect(result.current.state.notifications).toEqual([
+        {
+          id: "test-id",
+          type: "error",
+          status: 401,
+          message: "Test Error",
+          handled: true
+        }
+      ]);
+
+      await act(() => {
+        result.current.removeNotification("test-id");
+      });
+
+      expect(result.current.state.notifications).toEqual([]);
+    });
+
+    it("Fires the resetNotifications function", async () => {
+      const { result } = renderHook(() => useNotificationContext(), {
+        wrapper: NotificationProvider
+      });
+
+      expect(result.current.state.notifications).toEqual([]);
+
+      await act(() => {
+        result.current.addNotification({
+          type: "error",
+          status: 401,
+          message: "Test Error"
+        });
+      });
+
+      expect(result.current.state.notifications).toEqual([
+        {
+          id: "test-id",
+          type: "error",
+          status: 401,
+          message: "Test Error",
+          handled: true
+        }
+      ]);
+
+      await act(() => {
+        result.current.resetNotifications();
+      });
+
+      expect(result.current.state.notifications).toEqual([]);
+    });
+  });
+
+  describe("Translations", () => {
+    it("Translates the status 400, 401 and 403 translations", async () => {
+      const enqueueErrorSnackbarMock = jest.fn();
+
+      jest.spyOn(useSnackbarModule, "useSnackbar").mockImplementation(() => ({
+        enqueueWarningSnackbar: jest.fn(),
+        enqueueErrorSnackbar: enqueueErrorSnackbarMock,
+        enqueueSuccessSnackbar: jest.fn(),
+        enqueueSnackbar: jest.fn()
+      }));
+
+      const providedTranslations = {
+        general: { error: "TestError" },
+        messages: {
+          unauthorized: "Test unauthorized",
+          badRequest: "Test bad request",
+          forbidden: "Test forbidden"
+        }
+      };
+
+      const TestComponent = () => {
+        const { addNotification, state } = useNotificationContext();
+
+        useEffect(() => {
+          (async () => {
+            if (state.notifications.length === 3) {
+              await waitFor(() =>
+                expect(state.notifications).toEqual([
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 400,
+                    message: "TestError",
+                    handled: true
+                  },
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 401,
+                    message: "TestError",
+                    handled: true
+                  },
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 403,
+                    message: "TestError",
+                    handled: true
+                  }
+                ])
+              );
+            }
+          })();
+        }, [state.notifications]);
+
+        useEffect(() => {
+          (async () => {
+            await act(() => {
+              addNotification({ type: "error", status: 400 });
+              addNotification({ type: "error", status: 401 });
+              addNotification({ type: "error", status: 403 });
+            });
+          })();
+        }, []);
+
+        return null;
+      };
+
+      render(
+        <NotificationProvider translations={providedTranslations}>
+          <TestComponent />
+        </NotificationProvider>
+      );
+
+      await waitFor(() => {
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledTimes(3);
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test bad request", {
+          onClose: expect.any(Function)
+        });
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test unauthorized", {
+          onClose: expect.any(Function)
+        });
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test forbidden", {
+          onClose: expect.any(Function)
+        });
+      });
+    });
+
+    it("Translates the status 404, 500 and 502 translations", async () => {
+      const enqueueErrorSnackbarMock = jest.fn();
+
+      jest.spyOn(useSnackbarModule, "useSnackbar").mockImplementation(() => ({
+        enqueueWarningSnackbar: jest.fn(),
+        enqueueErrorSnackbar: enqueueErrorSnackbarMock,
+        enqueueSuccessSnackbar: jest.fn(),
+        enqueueSnackbar: jest.fn()
+      }));
+
+      const providedTranslations = {
+        general: { error: "TestError" },
+        messages: {
+          notFound: "Test not found",
+          general: "Test general",
+          unavailable: "Test unavailable"
+        }
+      };
+
+      const TestComponent = () => {
+        const { addNotification, state } = useNotificationContext();
+
+        useEffect(() => {
+          (async () => {
+            if (state.notifications.length === 3) {
+              await waitFor(() =>
+                expect(state.notifications).toEqual([
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 404,
+                    message: "TestError",
+                    handled: true
+                  },
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 500,
+                    message: "TestError",
+                    handled: true
+                  },
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 502,
+                    message: "TestError",
+                    handled: true
+                  }
+                ])
+              );
+            }
+          })();
+        }, [state.notifications]);
+
+        useEffect(() => {
+          (async () => {
+            await act(() => {
+              addNotification({ type: "error", status: 404 });
+              addNotification({ type: "error", status: 500 });
+              addNotification({ type: "error", status: 502 });
+            });
+          })();
+        }, []);
+
+        return null;
+      };
+
+      render(
+        <NotificationProvider translations={providedTranslations}>
+          <TestComponent />
+        </NotificationProvider>
+      );
+
+      await waitFor(() => {
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledTimes(3);
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test not found", {
+          onClose: expect.any(Function)
+        });
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test general", {
+          onClose: expect.any(Function)
+        });
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test unavailable", {
+          onClose: expect.any(Function)
+        });
+      });
+    });
+
+    it("Translates the status 503, 504 and general if the code isn't recognized", async () => {
+      const enqueueErrorSnackbarMock = jest.fn();
+
+      jest.spyOn(useSnackbarModule, "useSnackbar").mockImplementation(() => ({
+        enqueueWarningSnackbar: jest.fn(),
+        enqueueErrorSnackbar: enqueueErrorSnackbarMock,
+        enqueueSuccessSnackbar: jest.fn(),
+        enqueueSnackbar: jest.fn()
+      }));
+
+      const providedTranslations = {
+        general: { error: "TestError" },
+        messages: {
+          timeout: "Test timeout",
+          general: "Test general",
+          unavailable: "Test unavailable"
+        }
+      };
+
+      const TestComponent = () => {
+        const { addNotification, state } = useNotificationContext();
+
+        useEffect(() => {
+          (async () => {
+            if (state.notifications.length === 3) {
+              await waitFor(() =>
+                expect(state.notifications).toEqual([
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 503,
+                    message: "TestError",
+                    handled: true
+                  },
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 504,
+                    message: "TestError",
+                    handled: true
+                  },
+                  {
+                    id: "test-id",
+                    type: "error",
+                    status: 999,
+                    message: "TestError",
+                    handled: true
+                  }
+                ])
+              );
+            }
+          })();
+        }, [state.notifications]);
+
+        useEffect(() => {
+          (async () => {
+            await act(() => {
+              addNotification({ type: "error", status: 503 });
+              addNotification({ type: "error", status: 504 });
+              // @ts-ignore-next-line - We want to test the default case
+              addNotification({ type: "error", status: 999 });
+            });
+          })();
+        }, []);
+
+        return null;
+      };
+
+      render(
+        <NotificationProvider translations={providedTranslations}>
+          <TestComponent />
+        </NotificationProvider>
+      );
+
+      await waitFor(() => {
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledTimes(3);
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test timeout", {
+          onClose: expect.any(Function)
+        });
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test general", {
+          onClose: expect.any(Function)
+        });
+        expect(enqueueErrorSnackbarMock).toHaveBeenCalledWith("TestError", "Test unavailable", {
+          onClose: expect.any(Function)
+        });
+      });
+    });
+  });
+});
+
+const renderSnackbarProvider = () => {
+  const AppComponent = () => {
+    const { addNotification } = useNotificationContext();
+    const [index, setIndex] = useState(0);
+    return (
+      <div>
+        content
+        <button
+          data-testid="show-success"
+          onClick={() => {
+            addNotification({
+              status: 200,
+              type: "success",
+              title: "Test Success",
+              message: "Test successful request"
+            });
+            setIndex(index + 1);
+          }}
+        >
+          Success
+        </button>
+        <button
+          data-testid="show-error"
+          onClick={() => {
+            addNotification({
+              status: 400,
+              type: "error",
+              title: "TestError",
+              message: "Test bad request"
+            });
+            setIndex(index + 1);
+          }}
+        >
+          Error
+        </button>
+      </div>
+    );
+  };
+
+  const queries = render(
+    <SnackbarProvider closeButtonTitle="close">
+      <NotificationProvider>
+        <AppComponent />
+      </NotificationProvider>
+    </SnackbarProvider>
+  );
+
+  const showSuccessSnackbarBtn = getByTestId(queries.container, "show-success");
+  const showErrorSnackbarBtn = getByTestId(queries.container, "show-error");
+
+  return {
+    ...queries,
+    showSuccessSnackbarBtn,
+    showErrorSnackbarBtn
+  };
+};
+
+describe("Actually shows the snackbars showing up", () => {
+  it("Shows the snackbars", async () => {
+    const { showSuccessSnackbarBtn, showErrorSnackbarBtn, getByText } = renderSnackbarProvider();
+
+    await userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showErrorSnackbarBtn);
+
+    await waitFor(() => expect(getByText("Test Success")).toBeInTheDocument());
+    await waitFor(() => expect(getByText("Test bad request")).toBeInTheDocument());
+  });
+});