OHIF-208 (#1842)

* Set measurement as active

* Add basic dialog component

* Update styles and prop types

* Jump to image

* Update dialog

* Format date

* Update summary to use primary modalities

* delete empty studySummary page

* add missing PropTypes import

* fix for accidental sync'd viewports

* CR Updates

* CR Update avoid cache of measurements

* Use get measurement

* Add comment to edit function

* Remove request and merge modalities from series

* Update dependency: react-cornerstone-viewport@2.3.9

react-cornerstone-viewport
  * @ohif/extension-cornerstone: 2.3.8 → 2.3.9
  * @ohif/extension-dicom-sr: 2.3.8 → 2.3.9

* Update extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

* Add debugs

* remove console.debug

* Update frameindex to imageindex

* Use new rcv debounced function

* Fix hovering

* Update dialog text

* Dismiss dialogs on esc

* Update dependency: react-cornerstone-viewport@3.0.0

react-cornerstone-viewport
  * @ohif/extension-cornerstone: 2.3.9 → 3.0.0
  * @ohif/extension-dicom-sr: 2.3.9 → 3.0.0

* OHIF-237

* remove console.debug

* Remove dead code brought in from rebase

* EmptyViewport should not display a message

* Remove more dead code from rebase

* fix variable naming

* remove unused hook

* bump yarn lock

* formatting

* Add arrow dialog

* Filter based on trackedSeries

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

platform/ui/src/components/Dialog/Body.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { Typography } from '..';
+
+const Body = ({ text, className }) => {
+  const theme = 'bg-primary-dark';
+  return (
+    <div className={classNames('relative flex-auto', theme, className)}>
+      <div className="p-6">
+        <Typography variant="body" className="my-4 leading-relaxed">
+          {text}
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+Body.propTypes = {
+  text: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export default Body;

platform/ui/src/components/Dialog/Dialog.jsx

@@ -1,12 +1,83 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-const Dialog = ({ children }) => {
-  return <div className="absolute top-0 left-0">{children}</div>;
+import Footer from './Footer';
+import Body from './Body';
+import Header from './Header';
+
+const Dialog = ({
+  title,
+  text,
+  onClose,
+  noCloseButton,
+  actions,
+  onSubmit,
+  header: HeaderComponent,
+  body: BodyComponent,
+  footer: FooterComponent,
+  value: defaultValue
+}) => {
+  const [value, setValue] = useState(defaultValue);
+
+  const theme = 'bg-secondary-light';
+  const flex = 'flex flex-col';
+  const border = 'border-0 rounded-lg shadow-lg';
+  const outline = 'outline-none focus:outline-none';
+  const position = 'relative';
+  const width = 'w-full';
+
+  return (
+    <div
+      className={classNames(theme, flex, border, outline, position, width)}
+    >
+      <HeaderComponent
+        title={title}
+        noCloseButton={noCloseButton}
+        onClose={onClose}
+        value={value}
+        setValue={setValue}
+      />
+      <BodyComponent
+        text={text}
+        value={value}
+        setValue={setValue}
+      />
+      <FooterComponent
+        actions={actions}
+        onSubmit={onSubmit}
+        value={value}
+        setValue={setValue}
+      />
+    </div>
+  );
 };
 
 Dialog.propTypes = {
-  children: PropTypes.node,
+  title: PropTypes.string,
+  text: PropTypes.string,
+  onClose: PropTypes.func,
+  noCloseButton: PropTypes.bool,
+  header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  onSubmit: PropTypes.func.isRequired,
+  value: PropTypes.object,
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+      value: PropTypes.any,
+      type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
+    })
+  ).isRequired,
+};
+
+Dialog.defaultProps = {
+  header: Header,
+  footer: Footer,
+  body: Body,
+  value: {}
 };
 
 export default Dialog;

platform/ui/src/components/Dialog/Footer.js

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { Button } from '..';
+
+const Footer = ({ actions, className, onSubmit, value }) => {
+  const flex = 'flex items-center justify-end';
+  const border = 'border-t-2 border-solid border-black rounded-b';
+  const spacing = 'p-6';
+  const theme = 'bg-primary-dark';
+
+  return (
+    <div className={classNames(flex, border, spacing, theme, className)}>
+      {actions.map((action, index) => {
+        const isFirst = index === 0;
+        const isPrimary = action.type === 'primary';
+
+        const onClickHandler = event => onSubmit({ action, value, event });
+
+        return (
+          <Button
+            key={index}
+            className={classNames({ 'ml-2': !isFirst })}
+            color={isPrimary ? 'primary' : undefined}
+            onClick={onClickHandler}
+            style={{ transition: 'all .15s ease', height: 34 }}
+          >
+            {action.text}
+          </Button>
+        );
+      })}
+    </div>
+  );
+};
+
+const noop = () => { };
+
+Footer.propTypes = {
+  className: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+      value: PropTypes.any,
+      type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
+    })
+  ).isRequired,
+};
+
+Footer.defaultProps = {
+  onSubmit: noop,
+  actions: []
+};
+
+export default Footer;

platform/ui/src/components/Dialog/Header.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { Typography, Icon } from '..';
+
+const CloseButton = ({ onClick }) => {
+  const theme = 'bg-transparent fill-primary-active';
+  const outline = 'outline-none focus:outline-none';
+  const flex = 'flex h-full';
+
+  return (
+    <button className={classNames(flex, theme, 'border-0')} onClick={onClick}>
+      <Icon name="close" className={classNames(theme, outline, 'h-3 w-3')} />
+    </button>
+  );
+};
+
+CloseButton.propTypes = {
+  onClick: PropTypes.func,
+};
+
+const Header = ({ title, noCloseButton, onClose }) => {
+  const theme = 'bg-secondary-main';
+  const flex = 'flex items-center justify-between';
+  const border = 'border-b-2 border-solid border-black rounded-t';
+  const spacing = 'p-4';
+
+  return (
+    <div className={classNames(theme, flex, border, spacing)}>
+      <Typography variant="h6" className="text-primary-active">
+        {title}
+      </Typography>
+      {!noCloseButton && <CloseButton onClick={onClose} />}
+    </div>
+  );
+};
+
+Header.propTypes = {
+  className: PropTypes.string,
+  title: PropTypes.string,
+  noCloseButton: PropTypes.bool,
+  onClose: PropTypes.func,
+};
+
+Header.defaultProps = {
+  noCloseButton: false
+};
+
+export default Header;