feat: replace react-toastify with custom NotificationsContext

Introduce a NotificationsProvider/useNotificationsContext system backed
by HDS Notification components and migrate all notification call-sites
away from react-toastify.

- Add NotificationsContext, NotificationsProvider and
  useNotificationsContext hook
- Wrap App in NotificationsProvider; move hook usage to AppContent child
  so it is always called within the provider tree
- Add NotificationsProvider to shared test wrappers (customRender,
  renderWithRoute) and to per-file render helpers that bypass them
- Migrate all addNotification call-sites: Apollo client, auth callback,
  event/enrolment/occurrence pages, image/keyword/profile utilities,
  occurrences form and actions dropdowns, events list load-more error

Refs: PT-2015

Author: jorilindell

package.json

@@ -83,7 +83,6 @@
     "react-i18next": "^15.5.1",
     "react-idle-timer": "^5.7.2",
     "react-router": "^7.15.0",
-    "react-toastify": "^11.0.5",
     "sass": "^1.87.0",
     "typescript": "^5.8.3",
     "use-deep-compare-effect": "^1.8.1",

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
 
 import apiReportClient, { ROUTES } from './apiReportClient';
+import { useNotificationsContext } from '../../common/components/notificationsContext/hooks/useNotificationsContext';
 
 /**
  * A browser hack to download a file instead of just a byte string.
@@ -18,6 +18,8 @@ function downloadFile(data: string, filename: string) {
 
 function useDownloadEventsEnrolmentsCsvQuery(pEventId: string | undefined) {
   const { t } = useTranslation();
+  const { addNotification } = useNotificationsContext();
+
   if (!pEventId) return undefined;
   return async () => {
     const filename = `kultus_events_approved_enrolments.csv`;
@@ -39,7 +41,10 @@ function useDownloadEventsEnrolmentsCsvQuery(pEventId: string | undefined) {
     if (response.status === 200 && response?.data?.type === 'text/csv') {
       downloadFile(response.data, filename);
     } else {
-      toast.error(t('eventEnrolmentsReport.downloadError'));
+      addNotification({
+        type: 'error',
+        label: t('eventEnrolmentsReport.downloadError'),
+      });
     }
   };
 }

src/clients/apiReportClient/useReportClientQuery.ts

@@ -10,7 +10,7 @@
 // an interactive content element. (jsx-a11y/no-static-element-interactions)"
 
 import classNames from 'classnames';
-import { IconCheck, IconCross } from 'hds-react';
+import { IconCheck, IconCross, NotificationProps } from 'hds-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -23,6 +23,7 @@ import styles from './autoSuggest.module.scss';
 import useKeyboardNavigation from '../../../hooks/useDropdownKeyboardNavigation';
 import useLocale from '../../../hooks/useLocale';
 import { Language } from '../../../types';
+import { useNotificationsContext } from '../notificationsContext/hooks/useNotificationsContext';
 import ScrollIntoViewWithFocus from '../scrollIntoViewWithFocus/ScrollIntoViewWithFocus';
 import InputWrapper from '../textInput/InputWrapper';
 import inputStyles from '../textInput/inputWrapper.module.scss';
@@ -92,7 +93,11 @@ export interface AutoSuggestProps {
   onBlur: (val: AutoSuggestOption | AutoSuggestOption[] | null) => void;
   onChange: (val: AutoSuggestOption | AutoSuggestOption[] | null) => void;
   options: AutoSuggestOption[];
-  optionLabelToString?: (option: AutoSuggestOption, locale: Language) => string;
+  optionLabelToString?: (
+    option: AutoSuggestOption,
+    locale: Language,
+    addNotification: (props: NotificationProps) => void
+  ) => string;
   placeholder?: string;
   readOnly?: boolean;
   required?: boolean;
@@ -121,6 +126,7 @@ const AutoSuggest: React.FC<AutoSuggestProps> = ({
   required,
 }) => {
   const { t } = useTranslation();
+  const { addNotification } = useNotificationsContext();
   const locale = useLocale();
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   const [isFocused, setIsFocused] = React.useState(false);
@@ -214,7 +220,7 @@ const AutoSuggest: React.FC<AutoSuggestProps> = ({
       valueEventAriaMessage({
         event,
         value: optionLabelToString
-          ? optionLabelToString(option, locale)
+          ? optionLabelToString(option, locale, addNotification)
           : option.label.toString(),
         t,
       })
@@ -365,7 +371,7 @@ const AutoSuggest: React.FC<AutoSuggestProps> = ({
                 'common.autoSuggest.accessibility.deselectOptionButtonAriaMessage',
                 {
                   value: optionLabelToString
-                    ? optionLabelToString(item, locale)
+                    ? optionLabelToString(item, locale, addNotification)
                     : item.label.toString(),
                 }
               )}

src/common/components/autoSuggest/AutoSuggest.tsx

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 import { vi } from 'vitest';
 
+import { NotificationsProvider } from '../../notificationsContext/NotificationsContext';
 import AutoSuggest, { AutoSuggestProps } from '../AutoSuggest';
 
 const options = [
@@ -34,15 +35,23 @@ function renderAutoSuggest(props?: Partial<AutoSuggestProps>) {
     ...props,
   };
 
-  const { rerender } = render(<AutoSuggest {...defaultProps} />);
+  const { rerender } = render(
+    <NotificationsProvider>
+      <AutoSuggest {...defaultProps} />
+    </NotificationsProvider>
+  );
 
   return {
     ...defaultProps,
     onChange,
     onBlur,
     setInputValue,
     rerender: (newProps: Partial<AutoSuggestProps>) =>
-      rerender(<AutoSuggest {...defaultProps} {...newProps} />),
+      rerender(
+        <NotificationsProvider>
+          <AutoSuggest {...defaultProps} {...newProps} />
+        </NotificationsProvider>
+      ),
   };
 }
 

src/common/components/autoSuggest/__test__/AutoSuggest.test.tsx

@@ -2,9 +2,9 @@ import { FormikErrors } from 'formik';
 import { Button, ButtonVariant } from 'hds-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
 
 import { useUploadSingleImageMutation } from '../../../generated/graphql';
+import { useNotificationsContext } from '../notificationsContext/hooks/useNotificationsContext';
 import InputWrapper, { InputWrapperProps } from '../textInput/InputWrapper';
 
 // 2 megabytes
@@ -27,6 +27,7 @@ const ImageInput: React.FC<ImageInputProps> = ({
   const { t } = useTranslation();
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [uploadImage] = useUploadSingleImageMutation();
+  const { addNotification } = useNotificationsContext();
 
   const handleChooseImageClick = () => {
     inputRef.current?.click();
@@ -42,7 +43,10 @@ const ImageInput: React.FC<ImageInputProps> = ({
     const file = e.currentTarget.files?.[0];
     const fileSize = file?.size;
     if (fileSize && fileSize > IMAGE_MAX_SIZE) {
-      toast.error(t('form.error.imageTooBig'));
+      addNotification({
+        type: 'error',
+        label: t('form.error.imageTooBig'),
+      });
       resetImageInput();
       return;
     }

src/common/components/imageInput/ImageInput.tsx

@@ -0,0 +1,94 @@
+import { Notification, NotificationProps, NotificationSize } from 'hds-react';
+import uniqueId from 'lodash/uniqueId';
+import React, {
+  CSSProperties,
+  createContext,
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+
+export type NotificationsContextProps = {
+  addNotification: (props: NotificationProps) => void;
+};
+
+export const NotificationsContext = createContext<
+  NotificationsContextProps | undefined
+>(undefined);
+
+const NOTIFICATION_OFFSET = 24;
+const NOTIFICATION_Z_INDEX = 1000;
+const AUTO_CLOSE_DURATION = 10000;
+
+const getNotificationStyle = (
+  heights: number[],
+  index: number
+): CSSProperties => {
+  const topMargin = heights
+    .slice(0, index)
+    .reduce(
+      (acc, curr) => acc + curr + NOTIFICATION_OFFSET,
+      NOTIFICATION_OFFSET
+    );
+
+  return {
+    top: topMargin,
+    transform: 'translate3d(0px, 0px, 0px)',
+    zIndex: NOTIFICATION_Z_INDEX,
+  };
+};
+
+export const NotificationsProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [notifications, setNotifications] = useState<NotificationProps[]>([]);
+
+  const addNotification = useCallback((props: NotificationProps) => {
+    setNotifications((items) => [
+      ...items,
+      { ...props, id: uniqueId('notification-') },
+    ]);
+  }, []);
+
+  const value = useMemo<NotificationsContextProps>(
+    () => ({ addNotification }),
+    [addNotification]
+  );
+
+  const heights = useMemo(
+    () =>
+      // Height of last added notification is 0 because it's not rendered yet.
+      // In this case it doesn't matter because it's not used for top-margin calculation
+      notifications.map(
+        ({ id }) => document.getElementById(id as string)?.clientHeight ?? 0
+      ),
+    [notifications]
+  );
+
+  return (
+    <NotificationsContext.Provider value={value}>
+      {notifications.map((props, index) => {
+        return (
+          <Notification
+            notificationAriaLabel={
+              typeof props.label === 'string' ? props.label : undefined
+            }
+            autoCloseDuration={AUTO_CLOSE_DURATION}
+            autoClose={true}
+            {...props}
+            size={NotificationSize.Medium}
+            style={getNotificationStyle(heights, index)}
+            key={props.id}
+            position="top-right"
+            onClose={() =>
+              setNotifications((items) =>
+                items.filter((i) => i.id !== props.id)
+              )
+            }
+          />
+        );
+      })}
+      {children}
+    </NotificationsContext.Provider>
+  );
+};

src/common/components/notificationsContext/NotificationsContext.tsx

@@ -0,0 +1,58 @@
+import { configure, render, screen, waitFor } from '@testing-library/react';
+import React, { useEffect } from 'react';
+
+import { useNotificationsContext } from '../hooks/useNotificationsContext';
+import { NotificationsProvider } from '../NotificationsContext';
+
+configure({ defaultHidden: true });
+
+it('should show several notifications', async () => {
+  const Component = () => {
+    const { addNotification } = useNotificationsContext();
+
+    useEffect(() => {
+      addNotification({ label: 'Notification 1', type: 'success' });
+      addNotification({ label: 'Notification 2', type: 'error' });
+      addNotification({ label: 'Notification 3', type: 'info' });
+    });
+    return null;
+  };
+
+  render(
+    <NotificationsProvider>
+      <Component />
+    </NotificationsProvider>
+  );
+
+  await screen.findByRole('alert', { name: 'Notification 1' });
+  await screen.findByRole('alert', { name: 'Notification 2' });
+  await screen.findByRole('alert', { name: 'Notification 3' });
+});
+
+it('should automatically hide notification after certain period of time', async () => {
+  const Component = () => {
+    const { addNotification } = useNotificationsContext();
+
+    useEffect(() => {
+      addNotification({
+        autoCloseDuration: 50,
+        label: 'Notification 1',
+        type: 'success',
+      });
+    });
+    return null;
+  };
+
+  render(
+    <NotificationsProvider>
+      <Component />
+    </NotificationsProvider>
+  );
+
+  await screen.findByRole('alert', { name: 'Notification 1' });
+  await waitFor(() =>
+    expect(
+      screen.queryByRole('alert', { name: 'Notification 1' })
+    ).not.toBeInTheDocument()
+  );
+});

src/common/components/notificationsContext/__tests__/NotificationsContext.test.tsx

@@ -0,0 +1,23 @@
+/* eslint @typescript-eslint/explicit-function-return-type: 0 */
+import { useContext } from 'react';
+
+import {
+  NotificationsContext,
+  NotificationsContextProps,
+} from '../NotificationsContext';
+
+export const useNotificationsContext = (): NotificationsContextProps => {
+  const context = useContext<NotificationsContextProps | undefined>(
+    NotificationsContext
+  );
+
+  /* istanbul ignore next */
+  if (!context) {
+    throw new Error(
+      // eslint-disable-next-line max-len
+      'NotificationsContext context is undefined, please verify you are calling useNotificationsContext() as child of a <NotificationsProvider> component.'
+    );
+  }
+
+  return context;
+};