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/DatasetPicker.js

@@ -9,7 +9,7 @@ export default class DatasetPicker extends Component {
     error: null,
     loading: true,
     datasets: [],
-    filterStr: ""
+    filterStr: '',
   };
 
   static propTypes = {
@@ -42,22 +42,23 @@ export default class DatasetPicker extends Component {
   }
 
   render() {
-    const { datasets, loading, error, filterStr  } = this.state;
+    const { datasets, loading, error, filterStr } = this.state;
     const { onSelect } = this.props;
     return (
       <div>
-        <input class="form-control gcp-input"
-            type="text"
-            value={ filterStr }
-            onChange={ e => this.setState({ filterStr: e.target.value }) }
+        <input
+          className="form-control gcp-input"
+          type="text"
+          value={filterStr}
+          onChange={e => this.setState({ filterStr: e.target.value })}
+        />
+        <DatasetsList
+          datasets={datasets}
+          loading={loading}
+          error={error}
+          filter={filterStr}
+          onSelect={onSelect}
         />
-      <DatasetsList
-        datasets={datasets}
-        loading={loading}
-        error={error}
-        filter={filterStr}
-        onSelect={onSelect}
-      />
       </div>
     );
   }

platform/viewer/src/googleCloud/DatasetSelector.js

@@ -122,10 +122,7 @@ class DatasetSelector extends Component {
       <>
         {projectBreadcrumbs}
         {!project && (
-          <ProjectPicker
-            accessToken={accessToken}
-            onSelect={onProjectSelect}
-          />
+          <ProjectPicker accessToken={accessToken} onSelect={onProjectSelect} />
         )}
 
         {project && !location && (

platform/viewer/src/googleCloud/DicomStorePicker.js

@@ -10,13 +10,13 @@ export default class DicomStorePicker extends Component {
     loading: true,
     stores: [],
     locations: [],
-    filterStr: ""
+    filterStr: '',
   };
 
   static propTypes = {
     dataset: PropTypes.object,
     onSelect: PropTypes.func,
-    accessToken: PropTypes.string.isRequired
+    accessToken: PropTypes.string.isRequired,
   };
 
   async componentDidMount() {
@@ -44,10 +44,11 @@ export default class DicomStorePicker extends Component {
 
     return (
       <div>
-        <input class="form-control gcp-input"
-            type="text"
-            value={ filterStr }
-            onChange={ e => this.setState({ filterStr: e.target.value }) }
+        <input
+          className="form-control gcp-input"
+          type="text"
+          value={filterStr}
+          onChange={e => this.setState({ filterStr: e.target.value })}
         />
         <DicomStoreList
           stores={stores}

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

platform/viewer/src/googleCloud/LocationPicker.js

@@ -9,7 +9,7 @@ export default class LocationPicker extends Component {
     error: null,
     loading: true,
     locations: [],
-    filterStr: "",
+    filterStr: '',
   };
 
   static propTypes = {
@@ -42,10 +42,11 @@ export default class LocationPicker extends Component {
     const { onSelect } = this.props;
     return (
       <div>
-        <input class="form-control gcp-input"
-            type="text"
-            value={ filterStr }
-            onChange={ e => this.setState({ filterStr: e.target.value }) }
+        <input
+          className="form-control gcp-input"
+          type="text"
+          value={filterStr}
+          onChange={e => this.setState({ filterStr: e.target.value })}
         />
         <LocationsList
           locations={locations}

platform/viewer/src/googleCloud/ProjectPicker.js

@@ -30,7 +30,7 @@ export default class ProjectPicker extends Component {
 
     this.setState({
       projects: response.data.projects || [],
-      filterStr: "",
+      filterStr: '',
       loading: false,
     });
   }
@@ -40,10 +40,11 @@ export default class ProjectPicker extends Component {
     const { onSelect } = this.props;
     return (
       <div>
-        <input class="form-control gcp-input"
-            type="text"
-            value={ filterStr }
-            onChange={ e => this.setState({ filterStr: e.target.value }) } 
+        <input
+          className="form-control gcp-input"
+          type="text"
+          value={filterStr}
+          onChange={e => this.setState({ filterStr: e.target.value })}
         />
         <ProjectsList
           projects={projects}