get ViewportDialog to display as a part of machine transition

platform/ui/src/components/Notification/Notification.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { Icon } from '@ohif/ui';
+import { Button, Icon } from '@ohif/ui';
 
-const Notification = ({ type, text, actionButtons }) => {
+const Notification = ({ type, message, actions, onSubmit }) => {
   const iconsByType = {
     error: {
       icon: 'info',
@@ -35,12 +35,30 @@ const Notification = ({ type, text, actionButtons }) => {
   const { icon, color } = getIconData();
 
   return (
-    <div className="mx-2 mt-2 p-2 flex flex-col bg-common-bright rounded">
+    <div 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="text-base text-black ml-2">{text}</span>
+        <span className="ml-2 text-base text-black">{message}</span>
+      </div>
+      <div className="flex justify-end mt-2">
+        {actions.map((action, index) => {
+          const isFirst = index === 0;
+          const isPrimary = action.type === 'primary';
+
+          return (
+            <Button
+              key={index}
+              className={classnames({ 'ml-2': !isFirst })}
+              color={isPrimary ? 'primary' : undefined}
+              onClick={() => {
+                onSubmit(action.value);
+              }}
+            >
+              {action.text}
+            </Button>
+          );
+        })}
       </div>
-      <div className="flex justify-end mt-2">{actionButtons}</div>
     </div>
   );
 };
@@ -51,8 +69,15 @@ Notification.defaultProps = {
 
 Notification.propTypes = {
   type: PropTypes.string,
-  text: PropTypes.string.isRequired,
-  actionButtons: PropTypes.node.isRequired,
+  message: PropTypes.string.isRequired,
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      text: PropTypes.string.isRequired,
+      value: PropTypes.any.isRequired,
+      type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
+    })
+  ).isRequired,
+  onSubmit: PropTypes.func.isRequired,
 };
 
 export default Notification;

platform/ui/src/components/Notification/Notification.mdx

@@ -5,7 +5,7 @@ route: components/notification
 ---
 
 import { Playground, Props } from 'docz';
-import { Notification, Button } from '@ohif/ui';
+import { Notification } from '@ohif/ui';
 
 # Notification
 
@@ -22,23 +22,31 @@ import { Notification } from '@ohif/ui';
 
 <Playground>
   {() => {
-    const actionButtons = () => {
-      return (
-        <div>
-          <Button>No</Button>
-          <Button className="ml-2">No, do not ask again</Button>
-          <Button className="ml-2" color="primary">
-            Yes
-          </Button>
-        </div>
-      );
-    };
     return (
       <div className="p-4 w-full lg:w-2/3">
         <Notification
-          text="Track all measurement for this series?"
+          message="Track all measurement for this series?"
           type="info"
-          actionButtons={actionButtons()}
+          actions={[
+            {
+              type: 'cancel',
+              text: 'No',
+              value: 0,
+            },
+            {
+              type: 'secondary',
+              text: 'No, do not ask again',
+              value: -1,
+            },
+            {
+              type: 'primary',
+              text: 'Yes',
+              value: 1,
+            },
+          ]}
+          onSubmit={value => {
+            window.alert(value);
+          }}
         />
       </div>
     );

platform/ui/src/components/Viewport/Viewport.jsx

@@ -4,7 +4,7 @@ import { ViewportActionBar, Notification, Button } from '@ohif/ui';
 
 const Viewport = ({ viewportIndex, onSeriesChange, studyData, children }) => {
   return (
-    <div className="flex flex-col h-full relative">
+    <div className="relative flex flex-col h-full">
       <div className="absolute top-0 left-0 w-full">
         <ViewportActionBar
           onSeriesChange={onSeriesChange}
@@ -13,17 +13,28 @@ const Viewport = ({ viewportIndex, onSeriesChange, studyData, children }) => {
 
         {/* TODO: NOTIFICATION API DEFINITION - OHIF-112 */}
         <Notification
-          text="Track all measurement for this series?"
+          message="Track all measurement for this series?"
           type="info"
-          actionButtons={
-            <div>
-              <Button>No</Button>
-              <Button className="ml-2">No, do not ask again</Button>
-              <Button className="ml-2" color="primary">
-                Yes
-              </Button>
-            </div>
-          }
+          actions={[
+            {
+              type: 'cancel',
+              text: 'No',
+              value: 0,
+            },
+            {
+              type: 'secondary',
+              text: 'No, do not ask again',
+              value: -1,
+            },
+            {
+              type: 'primary',
+              text: 'Yes',
+              value: 1,
+            },
+          ]}
+          onSubmit={value => {
+            window.alert(value);
+          }}
         />
       </div>
 

platform/ui/src/contextProviders/ViewportDialogProvider.jsx

@@ -7,10 +7,20 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
-const DEFAULT_OPTIONS = {
-  content: null,
-  contentProps: null,
-  customClassName: null,
+const DEFAULT_STATE = {
+  viewportIndex: null,
+  message: undefined,
+  type: 'info', // "error" | "warning" | "info" | "success"
+  actions: undefined, // array of { type, text, value }
+  // dismissable?
+  // blockInteraction (single viewport? allViewports? everything?)
+  // TODO: Buttons --> type/color? text? value?
+  onSubmit: () => {
+    console.log('btn value?');
+  },
+  onDismiss: () => {
+    console.log('dismiss? -1');
+  },
 };
 
 const ViewportDialogContext = createContext(null);
@@ -18,42 +28,26 @@ const { Provider } = ViewportDialogContext;
 
 export const useViewportDialog = () => useContext(ViewportDialogContext);
 
-const ViewportDialogProvider = ({
-  children,
-  dialog: Dialog,
-  service,
-  viewportIndex,
-}) => {
-  const [options, setOptions] = useState(DEFAULT_OPTIONS);
-
-  const show = useCallback((props) => setOptions({ ...options, ...props }), [
-    options,
-  ]);
-
-  const hide = useCallback(() => setOptions(DEFAULT_OPTIONS), []);
+const ViewportDialogProvider = ({ children, service }) => {
+  const [viewportDialogState, setViewportDialogState] = useState(DEFAULT_STATE);
+  const show = useCallback(
+    params => setViewportDialogState({ ...viewportDialogState, ...params }),
+    [viewportDialogState]
+  );
+  const hide = useCallback(() => setViewportDialogState(DEFAULT_STATE), []);
 
   useEffect(() => {
     if (service) {
-      service.setServiceImplementation({ hide, show, viewportIndex });
+      service.setServiceImplementation({
+        hide,
+        show,
+      });
     }
-  }, [hide, service, show, viewportIndex]);
-
-  const {
-    content: ViewportDialogContent,
-    contentProps,
-    customClassName,
-  } = options;
+  }, [hide, service, show]);
 
   return (
-    <Provider value={{ show, hide }}>
-      <div className="relative w-full h-full">
-        {ViewportDialogContent && (
-          <Dialog className={customClassName}>
-            <ViewportDialogContent {...contentProps} show={show} hide={hide} />
-          </Dialog>
-        )}
-        {children}
-      </div>
+    <Provider value={[viewportDialogState, { show, hide }]}>
+      {children}
     </Provider>
   );
 };
@@ -64,16 +58,9 @@ ViewportDialogProvider.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
   ]).isRequired,
-  /** dialog component */
-  dialog: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.func,
-  ]).isRequired,
   service: PropTypes.shape({
     setServiceImplementation: PropTypes.func,
   }),
-  viewportIndex: PropTypes.number,
 };
 
 export default ViewportDialogProvider;

platform/ui/src/contextProviders/ViewportDialogProvider.mdx

@@ -28,19 +28,26 @@ component across all application.
     const ViewportNotification = ({ hide }) => {
       return (
         <Notification
-          text="Track all measurement for this series?"
+          message="Track all measurement for this series?"
           type="info"
-          actionButtons={
-            <div>
-              <Button onClick={hide}>No</Button>
-              <Button onClick={hide} className="ml-2">
-                No, do not ask again
-              </Button>
-              <Button onClick={hide} className="ml-2" color="primary">
-                Yes
-              </Button>
-            </div>
-          }
+          actions={[
+            {
+              type: 'cancel',
+              text: 'No',
+              value: 0,
+            },
+            {
+              type: 'secondary',
+              text: 'No, do not ask again',
+              value: -1,
+            },
+            {
+              type: 'primary',
+              text: 'Yes',
+              value: 1,
+            },
+          ]}
+          onSubmit={value => { window.alert(value); }}
         />
       );
     };
@@ -88,17 +95,26 @@ component across all application.
     const ViewportNotification = ({ hide }) => {
       return (
         <Notification
-          text="Track all measurement for this series?"
+          message="Track all measurement for this series?"
           type="info"
-          actionButtons={
-            <div>
-              <Button onClick={hide}>No</Button>
-              <Button className="ml-2">No, do not ask again</Button>
-              <Button className="ml-2" color="primary">
-                Yes
-              </Button>
-            </div>
-          }
+          actions={[
+            {
+              type: 'cancel',
+              text: 'No',
+              value: 0,
+            },
+            {
+              type: 'secondary',
+              text: 'No, do not ask again',
+              value: -1,
+            },
+            {
+              type: 'primary',
+              text: 'Yes',
+              value: 1,
+            },
+          ]}
+          onSubmit={value => { window.alert(value); }}
         />
       );
     };