feat: New dialog service (#1202)

* Add dialog provider boilerplate and improve provider imports

* Add react-draggable dependency

* Add dialog service boilerplate

* Refactor modal to use react-modal and remove dependency on modal themed styles

* Update cinedialog to use new dialog provider

* Add multiple dialogs and refactor provider (dialogs)

* Set app root (modal)

* Add modal zindex bigger than tooltip

* Block drag on buttons/svgs/paths/input and improve jsdoc

* Use guid util to generate dialog ids

* Explicit props in dialog provider

* Improve jsdocs

* Fix tests broken

* Fix boundaries calculation

* Remember last dialog position

* Update providers location

* Add scroll to modal

* Add toggable button toolbar and fix css modal

platform/ui/package.json

@@ -52,7 +52,9 @@
     "react-dnd": "9.4.0",
     "react-dnd-html5-backend": "^9.4.0",
     "react-dnd-touch-backend": "^9.4.0",
+    "react-draggable": "^4.1.0",
     "react-i18next": "^10.11.0",
+    "react-modal": "^3.11.1",
     "react-with-direction": "1.3.0"
   },
   "devDependencies": {

platform/ui/src/components/cineDialog/CineDialog.js

@@ -1,7 +1,7 @@
 import './CineDialog.styl';
 
 import React, { PureComponent } from 'react';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';
 import { Icon } from './../../elements/Icon';
 import PropTypes from 'prop-types';
 

platform/ui/src/components/content/aboutContent/AboutContent.js

@@ -58,7 +58,7 @@ const AboutContent = () => {
   );
 
   return (
-    <div data-cy="about-modal">
+    <div className="AboutContent" data-cy="about-modal">
       <div className="btn-group">
         <a
           className="btn btn-default"

platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.js

@@ -189,7 +189,7 @@ const ViewportDownloadForm = ({
   };
 
   return (
-    <>
+    <div className="ViewportDownloadForm">
       <div className="title">
         {t(
           'Please specify the dimensions, filename, and desired type for the output image.'
@@ -284,10 +284,6 @@ const ViewportDownloadForm = ({
           className="viewport-preview"
           src={viewportPreview.src}
           alt="Viewport Preview"
-          style={{
-            height: viewportPreview.height,
-            width: viewportPreview.width,
-          }}
         />
       </div>
 
@@ -303,7 +299,7 @@ const ViewportDownloadForm = ({
           </button>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.styl

@@ -3,15 +3,13 @@
 @import '../../../design/styles/common/button.styl'
 
 .ViewportDownloadForm
-  color: var(--text-secondary-color);
-  filter: drop-shadow(0 0 3px var(--ui-gray-darkest));
-  border: none;
-  border-radius: 8px;
-  width: inherit;
-  padding: 15px;
-  background: transparent;
+  display: flex;
+  flex-direction: column;
   z-index: 1080 !important;
 
+  input, select
+    max-height: 30px;
+
   .title
     margin: 0;
     font-weight: bold;
@@ -67,6 +65,7 @@
     padding: 10px;
     border-radius: 5px;
     align-self: center;
+    margin-bottom: 20px;
     @media screen and (max-width: 1023px)
       width: 100%;
       justify-content: center;
@@ -90,7 +89,6 @@
 
   .actions
     display: flex;
-    height: 60px;
     flex-wrap: nowrap;
     justify-content: flex-end;
     align-items: center;

platform/ui/src/components/languageSwitcher/LanguageSwitcher.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import i18n from '@ohif/i18n';
 
 import './LanguageSwitcher.styl';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';
 
 const LanguageSwitcher = () => {
   const getCurrentLanguage = (language = i18n.language) =>

platform/ui/src/components/measurementTable/MeasurementTable.js

@@ -1,7 +1,7 @@
 import './MeasurementTable.styl';
 
 import React, { Component } from 'react';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';
 
 import { Icon } from './../../elements/Icon';
 import { MeasurementTableItem } from './MeasurementTableItem.js';

platform/ui/src/components/measurementTable/MeasurementTableItem.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';
 
 import { Icon } from './../../elements/Icon';
 import { OverlayTrigger } from './../overlayTrigger';

platform/ui/src/components/ohifModal/OHIFModal.js

@@ -1,64 +1,69 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactBootstrapModal from 'react-bootstrap-modal';
+import Modal from 'react-modal';
 import classNames from 'classnames';
 
+import './OHIFModal.styl';
+
+const customStyle = {
+  overlay: {
+    zIndex: 1071,
+    backgroundColor: 'rgb(0, 0, 0, 0.5)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+};
+
+Modal.setAppElement(document.getElementById('root'));
+
 const OHIFModal = ({
   className,
   closeButton,
-  backdrop,
-  keyboard,
-  show,
+  shouldCloseOnEsc,
+  isOpen,
   title,
-  onHide,
-  footer: Footer,
-  header: Header,
+  onClose,
   children,
-}) => (
-  <ReactBootstrapModal
-    className={classNames('modal fade themed in', className)}
-    backdrop={backdrop}
-    keyboard={keyboard}
-    show={show}
-    large={true}
-    title={title}
-    onHide={onHide}
-  >
-    {(Header || title) && (
-      <ReactBootstrapModal.Header closeButton={closeButton}>
-        {title && (
-          <ReactBootstrapModal.Title>{title}</ReactBootstrapModal.Title>
-        )}
-        {Header && <Header hide={onHide} />}
-      </ReactBootstrapModal.Header>
-    )}
-    <ReactBootstrapModal.Body>{children}</ReactBootstrapModal.Body>
-    {Footer && (
-      <ReactBootstrapModal.Footer>
-        <Footer hide={onHide} />
-      </ReactBootstrapModal.Footer>
-    )}
-  </ReactBootstrapModal>
-);
+}) => {
+  const renderHeader = () => {
+    return (
+      title && (
+        <div className="OHIFModal__header">
+          <h4>{title}</h4>
+          {closeButton && (
+            <button data-cy="close-button" onClick={onClose}>
+              ×
+            </button>
+          )}
+        </div>
+      )
+    );
+  };
+
+  return (
+    <Modal
+      className={classNames('OHIFModal', className)}
+      shouldCloseOnEsc={shouldCloseOnEsc}
+      isOpen={isOpen}
+      title={title}
+      style={customStyle}
+    >
+      <>
+        {renderHeader()}
+        <div className="OHIFModal__content">{children}</div>
+      </>
+    </Modal>
+  );
+};
 
 OHIFModal.propTypes = {
   className: PropTypes.string,
   closeButton: PropTypes.bool,
-  backdrop: PropTypes.bool,
-  keyboard: PropTypes.bool,
-  show: PropTypes.bool,
+  shouldCloseOnEsc: PropTypes.bool,
+  isOpen: PropTypes.bool,
   title: PropTypes.string,
-  onHide: PropTypes.func,
-  footer: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.func,
-  ]),
-  header: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.func,
-  ]),
+  onClose: PropTypes.func,
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,

platform/ui/src/components/ohifModal/OHIFModal.styl

@@ -0,0 +1,67 @@
+.OHIFModal
+  background-color: var(--ui-gray-darker)
+  border-color: var(--ui-border-color)
+  color: var(--text-secondary-color)
+  border-radius: 6px
+  border: 0
+  color: var(--text-primary-color)
+  position: relative
+  -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5)
+  box-shadow: 0 3px 9px rgba(0,0,0,.5);
+  background-clip: padding-box
+  outline: 0
+
+  @media (min-width: 320px)
+    width: 78%
+    min-width: 300px
+
+  @media (min-width: 768px)
+    width: 600px
+
+  @media (min-width: 992px)
+    width: 900px
+
+  &__content
+    padding: 20px
+    max-height: 90vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar
+      display: none;
+
+  &__header
+    display: flex
+    justify-content: space-between
+    align-items: center
+    border-bottom-width: 3px
+    border-bottom-style: solid
+    border-bottom-color: #000000
+    padding: 20px
+    position: relative
+
+    h4
+      color: var(--text-secondary-color)
+      font-size: 20px
+      font-weight: 500
+      line-height: 24px
+      padding-right: 24px
+      margin: 0
+
+    button
+      cursor: pointer
+      margin: -10px 0 0 0
+      padding: 0
+      background-color: transparent
+      border: none
+      color: var(--text-secondary-color)
+      font-size: 25px
+      font-weight: lighter
+
+      &:active,
+      &:focus,
+      &:focus:active
+        background-image: none
+        outline: 0
+        box-shadow: none

platform/ui/src/components/overlayTrigger/Overlay.js

@@ -3,7 +3,7 @@ import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { Overlay as BaseOverlay } from 'react-overlays';
 import elementType from 'prop-types-extra/lib/elementType';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';
 
 import Fade from './Fade';
 

platform/ui/src/components/snackbar/SnackbarContainer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import SnackbarItem from './SnackbarItem';
 import './Snackbar.css';
-import { useSnackbarContext } from '../../utils/SnackbarProvider';
+import { useSnackbarContext } from '../../contextProviders';
 
 const SnackbarContainer = () => {
   const { snackbarItems, hide } = useSnackbarContext();

platform/ui/src/components/studyList/StudyList.js

@@ -6,7 +6,7 @@ import TableSearchFilter from './TableSearchFilter.js';
 import useMedia from '../../hooks/useMedia.js';
 import PropTypes from 'prop-types';
 import { StudyListLoadingText } from './StudyListLoadingText.js';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';
 
 /**
  *

platform/ui/src/components/studyList/StudyListLoadingText.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon } from './../../elements/Icon';
 // TODO: useTranslation
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';
 
 function StudyListLoadingText({ t: translate }) {
   return (

platform/ui/src/components/studyList/TablePagination.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import './PaginationArea.styl';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';
 
 class TablePagination extends PureComponent {
   static defaultProps = {

platform/ui/src/components/userPreferencesForm/HotKeysPreferences.styl

@@ -1,7 +1,5 @@
 .HotKeysPreferences
   display: flex;
-  margin-right: -15px;
-  margin-left: -15px;
 
   .column
     width: 50%;

platform/ui/src/components/userPreferencesForm/UserPreferences.js

@@ -90,8 +90,8 @@ export class UserPreferences extends Component {
 
   render() {
     return (
-      <div>
-        <div className="dialog-separator-after">
+      <div className="UserPreferences">
+        <div className="UserPreferences__selector">
           <ul className="nav nav-tabs">
             <li
               onClick={() => {

platform/ui/src/components/userPreferencesForm/UserPreferences.styl

@@ -3,23 +3,27 @@
 @import './../../design/styles/common/state.styl'
 @import './../../design/styles/common/global.styl'
 
-.modal-body
-  overflow: hidden
+.UserPreferences
+  display: flex
+  flex-direction: column
 
-.errorMessage
-  color: var(--state-error-text)
-  font-size: 10px
-  text-transform: uppercase;
+  &__selector
+    border-bottom: 3px solid black
 
-.form-content
-  border-bottom: 3px solid var(--primary-background-color)
-  margin-bottom: 20px
-  margin-left: -22px
-  margin-right: -22px
-  max-height: 70vh
-  overflow-y: auto
-  padding: 22px
-  min-height: 500px
+  .errorMessage
+    color: var(--state-error-text)
+    font-size: 10px
+    text-transform: uppercase;
 
-.popover
-  width: 300px
+  .form-content
+    border-bottom: 3px solid var(--primary-background-color)
+    margin-bottom: 20px
+    margin-left: -20px
+    margin-right: -20px
+    max-height: 70vh
+    overflow-y: auto
+    padding: 20px
+    min-height: 500px
+
+  .popover
+    width: 300px

platform/ui/src/components/userPreferencesForm/UserPreferencesForm.js

@@ -2,7 +2,7 @@ import './UserPreferencesForm.styl';
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';
 
 import cloneDeep from 'lodash.clonedeep';
 import isEqual from 'lodash.isequal';

platform/ui/src/components/userPreferencesForm/UserPreferencesForm.styl

@@ -16,7 +16,6 @@
   .footer
     display: flex
     flex-direction: row
-    padding-bottom: 20px
     justify-content: space-between
 
     div

platform/ui/src/contextProviders/DialogProvider.js

@@ -0,0 +1,208 @@
+import React, {
+  useState,
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+} from 'react';
+import PropTypes from 'prop-types';
+import Draggable from 'react-draggable';
+import classNames from 'classnames';
+
+import { utils } from '@ohif/core';
+
+import './DialogProvider.styl';
+
+const DialogContext = createContext(null);
+
+export const useDialog = () => useContext(DialogContext);
+
+const DialogProvider = ({ children, service }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [dialogs, setDialogs] = useState([]);
+  const [lastDialogPosition, setLastDialogPosition] = useState(null);
+
+  /**
+   * Sets the implementation of a dialog service that can be used by extensions.
+   *
+   * @returns void
+   */
+  useEffect(() => {
+    if (service) {
+      service.setServiceImplementation({ create, dismiss, dismissAll });
+    }
+  }, [create, dismiss, service]);
+
+  /**
+   * Creates a dialog and return its id.
+   *
+   * @returns id
+   */
+  const create = useCallback(
+    ({
+      id,
+      content,
+      onSubmit,
+      onClose,
+      onDrag,
+      onStop,
+      isDraggable,
+      defaultPosition,
+      position,
+    }) => {
+      let dialogId = id;
+      if (!dialogId) {
+        dialogId = utils.guid();
+      }
+
+      const newDialog = {
+        id: dialogId,
+        content,
+        onSubmit,
+        onClose,
+        onDrag,
+        onStop,
+        isDraggable,
+        defaultPosition,
+        position,
+      };
+
+      setDialogs(dialogs => [...dialogs, newDialog]);
+
+      return dialogId;
+    },
+    []
+  );
+
+  /**
+   * Dismisses the dialog with a given id.
+   *
+   * @returns void
+   */
+  const dismiss = useCallback(({ id }) => {
+    setDialogs(dialogs => dialogs.filter(dialog => dialog.id !== id));
+  }, []);
+
+  /**
+   * Dismisses all dialogs.
+   *
+   * @returns void
+   */
+  const dismissAll = () => {
+    setDialogs([]);
+  };
+
+  /**
+   * Moves the dialog to the foreground if clicked.
+   *
+   * @returns void
+   */
+  const _reorder = id => {
+    setDialogs(dialogs => [
+      ...dialogs.filter(dialog => dialog.id !== id),
+      dialogs.find(dialog => dialog.id === id),
+    ]);
+  };
+
+  const _updateLastDialogPosition = dialogId => {
+    const draggableItemBounds = document
+      .querySelector(`#draggableItem-${dialogId}`)
+      .getBoundingClientRect();
+    setLastDialogPosition({
+      x: draggableItemBounds.x,
+      y: draggableItemBounds.y,
+    });
+  };
+
+  return (
+    <DialogContext.Provider value={{ create, dismiss, dismissAll, dialogs }}>
+      <div className="DraggableArea">
+        {dialogs.map(dialog => {
+          const {
+            id,
+            content: Dialog,
+            position /* Position of the dialog. {{x: 0, y: 0}} */,
+            defaultPosition,
+            isDraggable = true,
+            onStart = () => {},
+            onStop = () => {},
+            onDrag = () => {},
+          } = dialog;
+
+          return (
+            <Draggable
+              key={id}
+              disabled={!isDraggable}
+              position={position}
+              defaultPosition={lastDialogPosition || defaultPosition}
+              bounds="parent"
+              onStart={event => {
+                const e = event || window.event;
+                const target = e.target || e.srcElement;
+                const BLACKLIST = ['SVG', 'BUTTON', 'PATH', 'INPUT'];
+                if (BLACKLIST.includes(target.tagName.toUpperCase())) {
+                  return false;
+                }
+
+                onStart(event);
+              }}
+              onStop={event => {
+                onStop(event);
+                setIsDragging(false);
+                return;
+              }}
+              onDrag={event => {
+                setIsDragging(true);
+                _reorder(id);
+                _updateLastDialogPosition(id);
+                onDrag(event);
+              }}
+            >
+              <div
+                id={`draggableItem-${id}`}
+                className={classNames(
+                  'DraggableItem',
+                  isDragging && 'dragging'
+                )}
+                style={{ zIndex: '999', position: 'absolute' }}
+                onClick={() => _reorder(id)}
+              >
+                <Dialog {...dialog} />
+              </div>
+            </Draggable>
+          );
+        })}
+      </div>
+      {children}
+    </DialogContext.Provider>
+  );
+};
+
+DialogProvider.defaultProps = {
+  service: null,
+};
+
+DialogProvider.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.func,
+  ]).isRequired,
+  service: PropTypes.shape({
+    setServiceImplementation: PropTypes.func,
+  }),
+};
+
+/**
+ *
+ * High Order Component to use the dialog methods through a Class Component
+ *
+ */
+export const withDialog = Component => {
+  return function WrappedComponent(props) {
+    const { create, dismiss, dismissAll } = useDialog();
+    return <Component {...props} dialog={{ create, dismiss, dismissAll }} />;
+  };
+};
+
+export default DialogProvider;

platform/ui/src/contextProviders/DialogProvider.styl

@@ -0,0 +1,12 @@
+.DraggableItem
+  div
+    cursor: grab !important
+
+.DraggableItem.dragging
+  div
+    cursor: grabbing !important
+
+.DraggableArea
+  width: 100vw
+  height: 100vh
+  position: absolute

platform/ui/src/contextProviders/ModalProvider.js

@@ -16,14 +16,11 @@ export const useModal = () => useContext(ModalContext);
 const ModalProvider = ({ children, modal: Modal, service }) => {
   const DEFAULT_OPTIONS = {
     component: null /* The component instance inside the modal. */,
-    header: null /* The content inside the modal header. */,
-    footer: null /* The content inside the modal footer. */,
-    backdrop: false /* Should the modal render a backdrop overlay. */,
-    keyboard: false /* Modal is dismissible via the esc key. */,
-    show: true /* Make the Modal visible or hidden. */,
+    shouldCloseOnEsc: false /* Modal is dismissible via the esc key. */,
+    isOpen: true /* Make the Modal visible or hidden. */,
     closeButton: true /* Should the modal body render the close button. */,
     title: null /* Should the modal render the title independently of the body content. */,
-    customClassName: null /* The custom class to style the modal. */,
+    customClassName: '' /* The custom class to style the modal. */,
   };
 
   const [options, setOptions] = useState(DEFAULT_OPTIONS);
@@ -69,14 +66,11 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
             options.customClassName,
             options.component.className
           )}
-          backdrop={options.backdrop}
-          keyboard={options.keyboard}
-          show={options.show}
+          shouldCloseOnEsc={options.keyboard}
+          isOpen={options.isOpen}
           title={options.title}
           closeButton={options.closeButton}
-          footer={options.footer}
-          header={options.header}
-          onHide={hide}
+          onClose={hide}
         >
           <Component {...options} show={show} hide={hide} />
         </Modal>

platform/ui/src/contextProviders/index.js

@@ -0,0 +1,20 @@
+export {
+  default as ModalProvider,
+  useModal,
+  withModal,
+  ModalConsumer,
+} from './ModalProvider.js';
+export {
+  default as SnackbarProvider,
+  useSnackbarContext,
+  withSnackbar,
+} from './SnackbarProvider.js';
+export {
+  default as LanguageProvider,
+  withTranslation,
+} from './LanguageProvider.js';
+export {
+  default as DialogProvider,
+  withDialog,
+  useDialog,
+} from './DialogProvider.js';

platform/ui/src/index.js

@@ -49,15 +49,18 @@ import { ScrollableArea } from './ScrollableArea/ScrollableArea.js';
 import Toolbar from './viewer/Toolbar.js';
 import ToolbarButton from './viewer/ToolbarButton.js';
 import ViewerbaseDragDropContext from './utils/viewerbaseDragDropContext.js';
-import SnackbarProvider, {
+import {
+  SnackbarProvider,
   useSnackbarContext,
   withSnackbar,
-} from './utils/SnackbarProvider';
-import ModalProvider, {
+  DialogProvider,
+  useDialog,
+  withDialog,
+  ModalProvider,
+  ModalConsumer,
   useModal,
   withModal,
-  ModalConsumer,
-} from './utils/ModalProvider';
+} from './contextProviders';
 
 export {
   // Elements
@@ -111,6 +114,9 @@ export {
   ModalConsumer,
   withModal,
   OHIFModal,
+  DialogProvider,
+  withDialog,
+  useDialog,
   // Hooks
   useDebounce,
   useMedia,

platform/ui/src/viewer/ToolbarButton.js

@@ -4,7 +4,7 @@ import { Icon } from './../elements/Icon';
 import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
-import { withTranslation } from '../utils/LanguageProvider';
+import { withTranslation } from '../contextProviders';
 
 export function ToolbarButton(props) {
   const { isActive, icon, labelWhenActive, onClick, t } = props;