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>