From a0b0f365dd6ac3e06cac2d6e488e40ff05b70178 Mon Sep 17 00:00:00 2001
From: dannyrb <danny.ri.brown@gmail.com>
Date: Mon, 29 Jun 2020 23:29:40 -0400
Subject: [PATCH] Handle for interaction outside of the ViewportDialog (default
 to cancel)

---
 .../promptBeginTracking.js                    |  4 +++
 .../promptTrackNewSeries.js                   | 10 +++++-
 .../promptTrackNewStudy.js                    | 10 +++++-
 .../viewports/TrackedCornerstoneViewport.js   |  1 +
 .../services/UIViewportDialogService/index.js | 10 +++++-
 .../components/Notification/Notification.jsx  | 33 ++++++++++++++++---
 .../ViewportDialogProvider.jsx                |  3 ++
 7 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptBeginTracking.js b/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptBeginTracking.js
index e1560150c..657c24e66 100644
--- a/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptBeginTracking.js
+++ b/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptBeginTracking.js
@@ -50,6 +50,10 @@ function _askTrackMeasurements(UIViewportDialogService, viewportIndex) {
       message,
       actions,
       onSubmit,
+      onOutsideClick: () => {
+        UIViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
     });
   });
 }
diff --git a/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewSeries.js b/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewSeries.js
index fbbe31c15..4a6f7dcc1 100644
--- a/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewSeries.js
+++ b/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewSeries.js
@@ -63,6 +63,10 @@ function _askShouldAddMeasurements(UIViewportDialogService, viewportIndex) {
       message,
       actions,
       onSubmit,
+      onOutsideClick: () => {
+        UIViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
     });
   });
 }
@@ -91,10 +95,14 @@ function _askSaveDiscardOrCancel(UIViewportDialogService, viewportIndex) {
 
     UIViewportDialogService.show({
       viewportIndex,
-      type: 'info', // TODO: warn
+      type: 'warning',
       message,
       actions,
       onSubmit,
+      onOutsideClick: () => {
+        UIViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
     });
   });
 }
diff --git a/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewStudy.js b/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewStudy.js
index 71265b6c4..0f8842a31 100644
--- a/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewStudy.js
+++ b/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewStudy.js
@@ -57,6 +57,10 @@ function _askTrackMeasurements(UIViewportDialogService, viewportIndex) {
       message,
       actions,
       onSubmit,
+      onOutsideClick: () => {
+        UIViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
     });
   });
 }
@@ -85,10 +89,14 @@ function _askSaveDiscardOrCancel(UIViewportDialogService, viewportIndex) {
 
     UIViewportDialogService.show({
       viewportIndex,
-      type: 'info', // TODO: warn
+      type: 'warning',
       message,
       actions,
       onSubmit,
+      onOutsideClick: () => {
+        UIViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
     });
   });
 }
diff --git a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
index 38e0938dd..55eb3ef29 100644
--- a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
+++ b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
@@ -277,6 +277,7 @@ function TrackedCornerstoneViewport({
               type={viewportDialogState.type}
               actions={viewportDialogState.actions}
               onSubmit={viewportDialogState.onSubmit}
+              onOutsideClick={viewportDialogState.onOutsideClick}
             />
           )}
         </div>
diff --git a/platform/core/src/services/UIViewportDialogService/index.js b/platform/core/src/services/UIViewportDialogService/index.js
index 8fdb91437..12cc526c5 100644
--- a/platform/core/src/services/UIViewportDialogService/index.js
+++ b/platform/core/src/services/UIViewportDialogService/index.js
@@ -26,13 +26,21 @@ const serviceImplementation = {
  *
  * @param {ViewportDialogProps} props { content, contentProps, viewportIndex }
  */
-function _show({ viewportIndex, type, message, actions, onSubmit }) {
+function _show({
+  viewportIndex,
+  type,
+  message,
+  actions,
+  onSubmit,
+  onOutsideClick,
+}) {
   return serviceImplementation._show({
     viewportIndex,
     type,
     message,
     actions,
     onSubmit,
+    onOutsideClick,
   });
 }
 
diff --git a/platform/ui/src/components/Notification/Notification.jsx b/platform/ui/src/components/Notification/Notification.jsx
index f980f2f07..d76428373 100644
--- a/platform/ui/src/components/Notification/Notification.jsx
+++ b/platform/ui/src/components/Notification/Notification.jsx
@@ -1,16 +1,35 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { Button, Icon } from '@ohif/ui';
 
-const Notification = ({ type, message, actions, onSubmit }) => {
+const Notification = ({ type, message, actions, onSubmit, onOutsideClick }) => {
+  const notificationRef = useRef(null);
+
+  useEffect(() => {
+    const notificationElement = notificationRef.current;
+    const handleClick = function(event) {
+      const isClickInside = notificationElement.contains(event.target);
+
+      if (!isClickInside) {
+        onOutsideClick();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, [onOutsideClick]);
+
   const iconsByType = {
     error: {
       icon: 'info',
       color: 'text-red-700',
     },
     warning: {
-      icon: 'info',
+      icon: 'notificationwarning-diamond',
       color: 'text-yellow-500',
     },
     info: {
@@ -35,7 +54,10 @@ const Notification = ({ type, message, actions, onSubmit }) => {
   const { icon, color } = getIconData();
 
   return (
-    <div className="flex flex-col p-2 mx-2 mt-2 rounded bg-common-bright">
+    <div
+      ref={notificationRef}
+      className="flex flex-col p-2 mx-2 mt-2 rounded bg-common-bright"
+    >
       <div className="flex flex-grow">
         <Icon name={icon} className={classnames('w-5', color)} />
         <span className="ml-2 text-base text-black">{message}</span>
@@ -65,6 +87,7 @@ const Notification = ({ type, message, actions, onSubmit }) => {
 
 Notification.defaultProps = {
   type: 'info',
+  onOutsideClick: () => {},
 };
 
 Notification.propTypes = {
@@ -78,6 +101,8 @@ Notification.propTypes = {
     })
   ).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,
 };
 
 export default Notification;
diff --git a/platform/ui/src/contextProviders/ViewportDialogProvider.jsx b/platform/ui/src/contextProviders/ViewportDialogProvider.jsx
index 325ed3ea3..0fe8979fe 100644
--- a/platform/ui/src/contextProviders/ViewportDialogProvider.jsx
+++ b/platform/ui/src/contextProviders/ViewportDialogProvider.jsx
@@ -18,6 +18,9 @@ const DEFAULT_STATE = {
   onSubmit: () => {
     console.log('btn value?');
   },
+  onOutsideClick: () => {
+    console.warn('default: onOutsideClick')
+  },
   onDismiss: () => {
     console.log('dismiss? -1');
   },