feat(ui): customization option for viewport notification (#4638)

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -3,7 +3,7 @@ import { useResizeDetector } from 'react-resize-detector';
 import * as cs3DTools from '@cornerstonejs/tools';
 import { Enums, eventTarget, getEnabledElement } from '@cornerstonejs/core';
 import { MeasurementService } from '@ohif/core';
-import { AllInOneMenu, Notification, useViewportDialog } from '@ohif/ui';
+import { AllInOneMenu, useViewportDialog } from '@ohif/ui';
 import type { Types as csTypes } from '@cornerstonejs/core';
 
 import { setEnabledElement } from '../state';
@@ -99,6 +99,7 @@ const OHIFCornerstoneViewport = React.memo(
       segmentationService,
       cornerstoneCacheService,
       viewportActionCornersService,
+      customizationService,
     } = servicesManager.services;
 
     const [viewportDialogState] = useViewportDialog();
@@ -373,6 +374,8 @@ const OHIFCornerstoneViewport = React.memo(
       onResize,
     });
 
+    const Notification = customizationService.getCustomization('ui.notificationComponent');
+
     return (
       <React.Fragment>
         <div className="viewport-wrapper">

extensions/default/src/customizations/notificationCustomization.ts

@@ -0,0 +1,5 @@
+import { Notification } from '@ohif/ui';
+
+export default {
+  'ui.notificationComponent': Notification,
+};

extensions/default/src/getCustomizationModule.tsx

@@ -17,6 +17,7 @@ import loadingIndicatorTotalPercentCustomization from './customizations/loadingI
 import progressLoadingBarCustomization from './customizations/progressLoadingBarCustomization';
 import viewportActionCornersCustomization from './customizations/viewportActionCornersCustomization';
 import labellingFlowCustomization from './customizations/labellingFlowCustomization';
+import viewportNotificationCustomization from './customizations/notificationCustomization';
 
 /**
  *
@@ -60,6 +61,7 @@ export default function getCustomizationModule({ servicesManager, extensionManag
         ...viewportActionCornersCustomization,
         ...labellingFlowCustomization,
         ...contextMenuUICustomization,
+        ...viewportNotificationCustomization,
       },
     },
   ];

platform/docs/docs/platform/services/customization-service/sampleCustomizations.tsx

@@ -22,6 +22,7 @@ import segDisplayEditingFalse from '../../../assets/img/segDisplayEditingFalse.p
 import thumbnailMenuItemsImage from '../../../assets/img/thumbnailMenuItemsImage.png';
 import studyMenuItemsImage from '../../../assets/img/studyMenuItemsImage.png';
 import windowLevelActionMenu from '../../../assets/img/windowLevelActionMenu.png';
+import viewPortNotificationImage from '../../../assets/img/viewport-notification.png';
 
 export const viewportOverlayCustomizations = [
   {
@@ -614,6 +615,24 @@ window.config = {
       },
     },
   ],
+};
+  `,
+  },
+  {
+    id: 'ui.notificationComponent',
+    description: 'Define the component which is used to render viewport notifications',
+    default: 'Default Notification component in viewport',
+    image: [viewPortNotificationImage],
+    configuration: `
+window.config = {
+  // rest of window config
+  customizationService: [
+    {
+      'ui.notificationComponent': {
+          $set: CustomizedComponent,
+      },
+    },
+  ],
 };
     `,
   },

platform/ui/src/components/Notification/Notification.tsx

@@ -1,11 +1,28 @@
 import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 
 import Button, { ButtonEnums } from '../Button';
 import { Icons } from '@ohif/ui-next';
 
-const Notification = ({
+type NotificationAction = {
+  id: string;
+  text: string;
+  value: any;
+  type: ButtonEnums.type.primary | ButtonEnums.type.secondary;
+  size?: ButtonEnums.size.small | ButtonEnums.size.medium;
+};
+
+export type NotificationProps = {
+  id: string;
+  type: 'error' | 'warning' | 'info' | 'success';
+  message: string | React.ReactNode;
+  actions: NotificationAction[];
+  onSubmit: (e: any) => void;
+  onOutsideClick?: () => void;
+  onKeyPress?: (e: React.KeyboardEvent) => void;
+};
+
+const Notification: React.FC<NotificationProps> = ({
   id,
   type = 'info',
   message,
@@ -107,21 +124,4 @@ const Notification = ({
   );
 };
 
-Notification.propTypes = {
-  type: PropTypes.oneOf(['error', 'warning', 'info', 'success']),
-  message: PropTypes.string.isRequired,
-  actions: PropTypes.arrayOf(
-    PropTypes.shape({
-      text: PropTypes.string.isRequired,
-      value: PropTypes.any.isRequired,
-      type: PropTypes.oneOf([ButtonEnums.type.primary, ButtonEnums.type.secondary]).isRequired,
-      size: PropTypes.oneOf([ButtonEnums.size.small, ButtonEnums.size.medium]),
-    })
-  ).isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  /** Can be used as a callback to dismiss the notification for clicks that occur outside of it */
-  onOutsideClick: PropTypes.func,
-  onKeyPress: PropTypes.func,
-};
-
 export default Notification;