Converted both to HOC asUIBModal

getredash · Feb 4, 2019 · 380ccc2 · 380ccc2
1 parent 0f2c4b2
commit 380ccc2
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 51 deletions.
diff --git a/client/app/components/dashboards/AddWidgetDialog.jsx b/client/app/components/dashboards/AddWidgetDialog.jsx
@@ -1,7 +1,6 @@
 import { debounce, each, values, map, includes, first } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { react2angular } from 'react2angular';
 import Select from 'antd/lib/select';
 import Modal from 'antd/lib/modal';
 import highlight from '@/lib/highlight';
@@ -15,14 +14,20 @@ import { QueryTagsControl } from '@/components/tags-control/QueryTagsControl';
 import { toastr } from '@/services/ng';
 import { Widget } from '@/services/widget';
 import { Query } from '@/services/query';
+import asUIBModal from '@/hoc/asUIBModal';
 
 const { Option, OptGroup } = Select;
 
 class AddWidgetDialog extends React.Component {
   static propTypes = {
     dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-    onClose: PropTypes.func.isRequired,
-    onAdded: PropTypes.func.isRequired,
+    onClose: PropTypes.func,
+    onConfirm: PropTypes.func,
+  };
+
+  static defaultProps = {
+    onClose: () => {},
+    onConfirm: () => {},
   };
 
   constructor(props) {
@@ -54,6 +59,10 @@ class AddWidgetDialog extends React.Component {
     };
   }
 
+  close = () => {
+    this.setState({ showModal: false });
+  }
+
   selectQuery(queryId) {
     // Clear previously selected query (if any)
     this.setState({
@@ -140,7 +149,7 @@ class AddWidgetDialog extends React.Component {
       .save()
       .then(() => {
         dashboard.widgets.push(widget);
-        this.props.onAdded();
+        this.props.onConfirm();
         this.close();
       })
       .catch(() => {
@@ -151,10 +160,6 @@ class AddWidgetDialog extends React.Component {
       });
   }
 
-  close = () => {
-    this.setState({ showModal: false });
-  }
-
   updateParamMappings(parameterMappings) {
     this.setState({ parameterMappings });
   }
@@ -325,8 +330,4 @@ class AddWidgetDialog extends React.Component {
   }
 }
 
-export default function init(ngModule) {
-  ngModule.component('addWidgetDialog', react2angular(AddWidgetDialog));
-}
-
-init.init = true;
+export default asUIBModal(AddWidgetDialog);
diff --git a/client/app/components/dashboards/EditParameterMappingsDialog.jsx b/client/app/components/dashboards/EditParameterMappingsDialog.jsx
@@ -2,20 +2,26 @@ import { map } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Modal from 'antd/lib/modal';
-import { react2angular } from 'react2angular';
 import {
   ParameterMappingListInput,
   parameterMappingsToEditableMappings,
   editableMappingsToParameterMappings,
 } from '@/components/ParameterMappingInput';
+import asUIBModal from '@/hoc/asUIBModal';
 
 class EditParameterMappingsDialog extends React.Component {
   static propTypes = {
     dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
     widget: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-    onClose: PropTypes.func.isRequired,
-    onChange: PropTypes.func.isRequired,
+    onClose: PropTypes.func,
+    onConfirm: PropTypes.func,
   };
+
+  static defaultProps = {
+    onClose: () => {},
+    onConfirm: () => {},
+  };
+
   constructor(props) {
     super(props);
     this.state = {
@@ -29,6 +35,10 @@ class EditParameterMappingsDialog extends React.Component {
     };
   }
 
+  close = () => {
+    this.setState({ showModal: false });
+  }
+
   saveWidget() {
     const toastr = this.props.toastr; // eslint-disable-line react/prop-types
     const widget = this.props.widget;
@@ -39,7 +49,7 @@ class EditParameterMappingsDialog extends React.Component {
     widget
       .save()
       .then(() => {
-        this.props.onChange();
+        this.props.onConfirm();
         this.close();
       })
       .catch(() => {
@@ -50,10 +60,6 @@ class EditParameterMappingsDialog extends React.Component {
       });
   }
 
-  close = () => {
-    this.setState({ showModal: false });
-  }
-
   updateParamMappings(parameterMappings) {
     this.setState({ parameterMappings });
   }
@@ -85,8 +91,4 @@ class EditParameterMappingsDialog extends React.Component {
   }
 }
 
-export default function init(ngModule) {
-  ngModule.component('editParameterMappingsDialog', react2angular(EditParameterMappingsDialog));
-}
-
-init.init = true;
+export default asUIBModal(EditParameterMappingsDialog);
diff --git a/client/app/components/dashboards/widget.html b/client/app/components/dashboards/widget.html
@@ -22,8 +22,7 @@
             <li ng-if="$ctrl.canViewQuery || ($ctrl.dashboard.canEdit() && $ctrl.hasParameters())" class="divider"></li>
             <li ng-if="$ctrl.canViewQuery"><a ng-href="{{$ctrl.widget.getQuery().getUrl(true, $ctrl.widget.visualization.id)}}">View Query</a></li>
             <li ng-if="$ctrl.dashboard.canEdit() && $ctrl.hasParameters()">
-              <a ng-click="$ctrl.openMappingsDialog()">Edit Parameters</a>
-              <edit-parameter-mappings-dialog ng-if="$ctrl.mappingsDialogOpened" dashboard="$ctrl.dashboard" widget="$ctrl.widget" on-close="$ctrl.closeMappingsDialog" on-change="$ctrl.onMappingsUpdated" />
+              <li ng-if="$ctrl.dashboard.canEdit() && $ctrl.hasParameters()"><a ng-click="$ctrl.editParameterMappings()">Edit Parameters</a></li>
             </li>
 
             <li ng-if="$ctrl.dashboard.canEdit()" class="divider"></li>

diff --git a/client/app/components/dashboards/widget.js b/client/app/components/dashboards/widget.js
@@ -2,6 +2,7 @@ import { filter } from 'lodash';
 import template from './widget.html';
 import editTextBoxTemplate from './edit-text-box.html';
 import widgetDialogTemplate from './widget-dialog.html';
+import editParameterMappingsDialog from '@/components/dashboards/EditParameterMappingsDialog';
 import './widget.less';
 import './widget-dialog.less';
 
@@ -77,20 +78,14 @@ function DashboardWidgetCtrl($location, $uibModal, $window, $rootScope, Events,
 
   this.hasParameters = () => this.widget.query.getParametersDefs().length > 0;
 
-  this.mappingsDialogOpened = false;
-
-  this.openMappingsDialog = () => {
-    this.mappingsDialogOpened = true;
-  };
-
-  this.closeMappingsDialog = () => {
-    this.mappingsDialogOpened = false;
-    $rootScope.$applyAsync();
-  };
-
-  this.onMappingsUpdated = () => {
-    this.localParameters = null;
-    $rootScope.$broadcast('dashboard.update-parameters');
+  this.editParameterMappings = () => {
+    editParameterMappingsDialog.open({
+      dashboard: this.dashboard,
+      widget: this.widget,
+    }).result.then(() => {
+      this.localParameters = null;
+      $rootScope.$broadcast('dashboard.update-parameters');
+    });
   };
 
   this.localParametersDefs = () => {

diff --git a/client/app/hoc/asUIBModal.jsx b/client/app/hoc/asUIBModal.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const asUIBModal = (WrappedComponent) => {
+  const container = document.createElement('div');
+
+  const render = (component) => {
+    ReactDOM.render(component, container);
+    document.body.appendChild(container);
+  };
+
+  const destroy = () => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  };
+
+  const getResult = props => new Promise((resolve) => {
+    const component = (
+      <WrappedComponent
+        onClose={destroy}
+        onConfirm={resolve}
+        {...props}
+      />
+    );
+
+    render(component);
+  });
+
+  return {
+    open: props => ({
+      result: getResult(props),
+    }),
+  };
+};
+
+export default asUIBModal;
diff --git a/client/app/pages/dashboards/dashboard.html b/client/app/pages/dashboards/dashboard.html
@@ -110,9 +110,8 @@ <h2>
       <span class="hidden-xs hidden-sm">Widgets are individual query visualizations or text boxes you can place on your dashboard in various arrangements.</span>
     </h2>
     <div>
-      <a class="btn btn-default" ng-click="$ctrl.addTextBox()">Add Textbox</a>
-      <a class="btn btn-primary m-l-10" ng-click="$ctrl.openAddWidgetDialog()">Add Widget</a>
-      <add-widget-dialog ng-if="$ctrl.addWidgetDialogOpened" dashboard="$ctrl.dashboard" on-close="$ctrl.closeAddWidgetDialog" on-added="$ctrl.onWidgetAdded" />
+      <a class="btn btn-default" ng-click="$ctrl.addTextBox">Add Textbox</a>
+      <a class="btn btn-primary m-l-10" ng-click="$ctrl.addWidget('widget')">Add Widget</a>
     </div>
   </div>
 </div>
diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js
@@ -5,6 +5,7 @@ import { policy } from '@/services/policy';
 import { durationHumanize } from '@/filters';
 import template from './dashboard.html';
 import shareDashboardTemplate from './share-dashboard.html';
+import AddWidgetDialog from '@/components/dashboards/AddWidgetDialog';
 import './dashboard.less';
 
 function isWidgetPositionChanged(oldPosition, newPosition) {
@@ -329,6 +330,14 @@ function DashboardCtrl(
       .result.then(this.onWidgetAdded);
   };
 
+  this.addWidget = () => {
+    AddWidgetDialog
+      .open({
+        dashboard: this.dashboard,
+      })
+      .result.then(this.onWidgetAdded);
+  };
+
   this.onWidgetAdded = () => {
     this.extractGlobalParameters();
     // Save position of newly added widget (but not entire layout)
@@ -338,12 +347,6 @@ function DashboardCtrl(
     }
   };
 
-  this.addWidgetDialogOpened = false;
-
-  this.openAddWidgetDialog = () => {
-    this.addWidgetDialogOpened = true;
-  };
-
   this.closeAddWidgetDialog = () => {
     this.addWidgetDialogOpened = false;
     $scope.$applyAsync();