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

@@ -78,7 +78,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

@@ -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,
+  useLayoutEffect,
+} 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, setHeights] = useState<number[]>([]);
+  useLayoutEffect(() => {
+    setHeights(
+      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' });
+    }, [addNotification]);
+    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;
+};

src/common/components/notificationsContext/hooks/useNotificationsContext.ts

@@ -2,20 +2,25 @@ import { ApolloProvider } from '@apollo/client';
 import { ConfigProvider as RHHCConfigProvider } from '@city-of-helsinki/react-helsinki-headless-cms';
 import * as React from 'react';
 import { BrowserRouter } from 'react-router';
-import { ToastContainer } from 'react-toastify';
 
 import { useApolloClient } from './apollo/apolloClient';
 import AppRoutes from './routes/AppRoutes';
 import { FORCE_SCROLL_TO_TOP, IGNORE_SCROLL_TO_TOP } from './routes/constants';
 import ScrollToTop from './ScrollToTop';
+import { useNotificationsContext } from '../../common/components/notificationsContext/hooks/useNotificationsContext';
+import { NotificationsProvider } from '../../common/components/notificationsContext/NotificationsContext';
 import { useCMSApolloClient } from '../../headless-cms/apollo/apolloClient';
 import useRHHCConfig from '../../hooks/useRHHCConfig';
 import IdleTimer from '../auth/IdleTimerProvider';
 import KultusAdminHDSLoginProvider from '../auth/KultusAdminHDSLoginProvider';
 import { OrganisationProvider } from '../organisation/contextProviders/OrganisationProvider';
 
-const App = () => {
-  const apolloClient = useApolloClient();
+const AppContent = () => {
+  const { addNotification } = useNotificationsContext();
+  const apolloClient = useApolloClient({
+    addNotification,
+    initialApolloState: null,
+  });
   const cmsClient = useCMSApolloClient();
 
   const rhhcConfig = useRHHCConfig({
@@ -42,9 +47,16 @@ const App = () => {
           </ApolloProvider>
         </IdleTimer>
       </KultusAdminHDSLoginProvider>
-      <ToastContainer />
     </>
   );
 };
 
+const App = () => {
+  return (
+    <NotificationsProvider>
+      <AppContent />
+    </NotificationsProvider>
+  );
+};
+
 export default App;