get ViewportDialog to display as a part of machine transition

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); }}
         />
       );
     };