fix: GCloud dataset picker dialog broken (#1453)

* Replace class with className

* Start implementing UIDialogService

* Including UIModalService on dicomStorePicker

* Cleanup

* Remove unecessary divs

* Remove props not used

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

platform/viewer/src/googleCloud/DicomStorePickerModal.js

@@ -1,57 +1,56 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import Modal from 'react-bootstrap-modal';
 import DatasetSelector from './DatasetSelector';
 import './googleCloud.css';
 import { withTranslation } from 'react-i18next';
 import * as GoogleCloudUtilServers from './utils/getServers';
 
-class DicomStorePickerModal extends Component {
-  static propTypes = {
-    url: PropTypes.string,
-    user: PropTypes.object.isRequired,
-    setServers: PropTypes.func.isRequired,
-    isOpen: PropTypes.bool.isRequired,
-    onClose: PropTypes.func,
+import { servicesManager } from './../App.js';
+
+function DicomStorePickerModal({
+  isOpen = false,
+  setServers,
+  onClose,
+  user,
+  url,
+  t,
+}) {
+  const { UIModalService } = servicesManager.services;
+
+  const showDicomStorePickerModal = () => {
+    const handleEvent = data => {
+      const servers = GoogleCloudUtilServers.getServers(data, data.dicomstore);
+      setServers(servers);
+
+      // Force auto close
+      UIModalService.hide();
+      onClose();
+    };
+
+    if (UIModalService) {
+      UIModalService.show({
+        content: DatasetSelector,
+        title: t('Google Cloud Healthcare API'),
+        contentProps: {
+          setServers: handleEvent,
+          user,
+          url,
+        },
+      });
+    }
   };
 
-  static defaultProps = {
-    isOpen: false,
-  };
-
-  handleEvent = data => {
-    const servers = GoogleCloudUtilServers.getServers(data, data.dicomstore);
-    this.props.setServers(servers);
-    // Force auto close
-    this.props.onClose();
-  };
-
-  render() {
-    return (
-      <Modal
-        show={this.props.isOpen}
-        onHide={this.props.onClose}
-        aria-labelledby="ModalHeader"
-        className="modal fade themed in"
-        backdrop={false}
-        size={'md'}
-        keyboard={true}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>
-            {this.props.t('Google Cloud Healthcare API')}
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <DatasetSelector
-            setServers={this.handleEvent}
-            user={this.props.user}
-            url={this.props.url}
-          />
-        </Modal.Body>
-      </Modal>
-    );
-  }
+  return (
+    <React.Fragment>{isOpen && showDicomStorePickerModal()}</React.Fragment>
+  );
 }
 
+DicomStorePickerModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  setServers: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
+  user: PropTypes.object.isRequired,
+  url: PropTypes.string,
+};
+
 export default withTranslation('Common')(DicomStorePickerModal);