From 06ee382fc308d3676d87526da53aa6697d6875af Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Fri, 1 Feb 2019 09:34:33 +0200 Subject: [PATCH 1/5] [Widget Params] Migrated edit params dialog to Ant Modal --- .../EditParameterMappingsDialog.jsx | 100 +++++------------- client/app/components/dashboards/widget.html | 5 +- client/app/components/dashboards/widget.js | 26 ++--- 3 files changed, 47 insertions(+), 84 deletions(-) diff --git a/client/app/components/dashboards/EditParameterMappingsDialog.jsx b/client/app/components/dashboards/EditParameterMappingsDialog.jsx index 56b438fa5d..b16e91debb 100644 --- a/client/app/components/dashboards/EditParameterMappingsDialog.jsx +++ b/client/app/components/dashboards/EditParameterMappingsDialog.jsx @@ -1,6 +1,7 @@ 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, @@ -10,19 +11,11 @@ import { class EditParameterMappingsDialog extends React.Component { static propTypes = { - dashboard: PropTypes.object, // eslint-disable-line react/forbid-prop-types - widget: PropTypes.object, // eslint-disable-line react/forbid-prop-types - close: PropTypes.func, - dismiss: PropTypes.func, + 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, }; - - static defaultProps = { - dashboard: null, - widget: null, - close: () => {}, - dismiss: () => {}, - }; - constructor(props) { super(props); this.state = { @@ -32,6 +25,7 @@ class EditParameterMappingsDialog extends React.Component { props.widget.query.getParametersDefs(), map(this.props.dashboard.getParametersDefs(), p => p.name), ), + showModal: true, }; } @@ -45,7 +39,8 @@ class EditParameterMappingsDialog extends React.Component { widget .save() .then(() => { - this.props.close(); + this.props.onChange(); + this.close(); }) .catch(() => { toastr.error('Widget cannot be updated'); @@ -55,6 +50,10 @@ class EditParameterMappingsDialog extends React.Component { }); } + close = () => { + this.setState({ showModal: false }); + } + updateParamMappings(parameterMappings) { this.setState({ parameterMappings }); } @@ -66,69 +65,28 @@ class EditParameterMappingsDialog extends React.Component { ); return ( -
-
- -

Parameters

-
-
- {(this.state.parameterMappings.length > 0) && ( - this.updateParamMappings(mappings)} - /> - )} -
- -
- - -
-
+ this.saveWidget()} + okButtonProps={{ loading: this.state.saveInProgress }} + onCancel={this.close} + > + {(this.state.parameterMappings.length > 0) && ( + this.updateParamMappings(mappings)} + /> + )} + ); } } export default function init(ngModule) { - ngModule.component('editParameterMappingsDialog', { - template: ` - - `, - bindings: { - resolve: '<', - close: '&', - dismiss: '&', - }, - }); - ngModule.component('editParameterMappingsDialogImpl', react2angular(EditParameterMappingsDialog)); + ngModule.component('editParameterMappingsDialog', react2angular(EditParameterMappingsDialog)); } init.init = true; diff --git a/client/app/components/dashboards/widget.html b/client/app/components/dashboards/widget.html index 6a37d4676b..05fb1b1d35 100644 --- a/client/app/components/dashboards/widget.html +++ b/client/app/components/dashboards/widget.html @@ -21,7 +21,10 @@
  • View Query
    • -
  • Edit Parameters
    • +
  • + Edit Parameters + +
  • Remove from Dashboard
    • diff --git a/client/app/components/dashboards/widget.js b/client/app/components/dashboards/widget.js index d8e7f9653d..16f606bc36 100644 --- a/client/app/components/dashboards/widget.js +++ b/client/app/components/dashboards/widget.js @@ -77,18 +77,20 @@ function DashboardWidgetCtrl($location, $uibModal, $window, $rootScope, Events, this.hasParameters = () => this.widget.query.getParametersDefs().length > 0; - this.editParameterMappings = () => { - $uibModal.open({ - component: 'editParameterMappingsDialog', - resolve: { - dashboard: this.dashboard, - widget: this.widget, - }, - size: 'lg', - }).result.then(() => { - this.localParameters = null; - $rootScope.$broadcast('dashboard.update-parameters'); - }); + 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.localParametersDefs = () => { From 0f2c4b227235c98218cb292a9f5947f5a9f4678c Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Fri, 1 Feb 2019 21:43:13 +0200 Subject: [PATCH 2/5] Did the same for Add Widget modal --- .../components/dashboards/AddWidgetDialog.jsx | 116 +++++++----------- client/app/pages/dashboards/dashboard.html | 11 +- client/app/pages/dashboards/dashboard.js | 37 +++--- 3 files changed, 70 insertions(+), 94 deletions(-) diff --git a/client/app/components/dashboards/AddWidgetDialog.jsx b/client/app/components/dashboards/AddWidgetDialog.jsx index f043fcd0eb..99e21a71d1 100644 --- a/client/app/components/dashboards/AddWidgetDialog.jsx +++ b/client/app/components/dashboards/AddWidgetDialog.jsx @@ -3,6 +3,7 @@ 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'; import { MappingType, @@ -19,15 +20,9 @@ const { Option, OptGroup } = Select; class AddWidgetDialog extends React.Component { static propTypes = { - dashboard: PropTypes.object, // eslint-disable-line react/forbid-prop-types - close: PropTypes.func, - dismiss: PropTypes.func, - }; - - static defaultProps = { - dashboard: null, - close: () => {}, - dismiss: () => {}, + dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types + onClose: PropTypes.func.isRequired, + onAdded: PropTypes.func.isRequired, }; constructor(props) { @@ -40,12 +35,14 @@ class AddWidgetDialog extends React.Component { searchedQueries: [], selectedVis: null, parameterMappings: [], + showModal: false, // show only after recent queries populated to avoid height "jump" }; // Don't show draft (unpublished) queries in recent queries. Query.recent().$promise.then((items) => { this.setState({ recentQueries: items.filter(item => !item.is_draft), + showModal: true, }); }); @@ -143,7 +140,8 @@ class AddWidgetDialog extends React.Component { .save() .then(() => { dashboard.widgets.push(widget); - this.props.close(); + this.props.onAdded(); + this.close(); }) .catch(() => { toastr.error('Widget can not be added'); @@ -153,6 +151,10 @@ class AddWidgetDialog extends React.Component { }); } + close = () => { + this.setState({ showModal: false }); + } + updateParamMappings(parameterMappings) { this.setState({ parameterMappings }); } @@ -290,77 +292,41 @@ class AddWidgetDialog extends React.Component { ); return ( -
    -
    - -

    Add Widget

    -
    -
    - {this.renderQueryInput()} - {!this.state.selectedQuery && this.renderSearchQueryResults()} - {this.state.selectedQuery && this.renderVisualizationInput()} + this.saveWidget()} + okButtonProps={{ + loading: this.state.saveInProgress, + disabled: !this.state.selectedQuery, + }} + okText="Add to Dashboard" + onCancel={this.close} + > + {this.renderQueryInput()} + {!this.state.selectedQuery && this.renderSearchQueryResults()} + {this.state.selectedQuery && this.renderVisualizationInput()} - { - (this.state.parameterMappings.length > 0) && [ - , - this.updateParamMappings(mappings)} - />, - ] - } -
    - -
    - - -
    -
    + { + (this.state.parameterMappings.length > 0) && [ + , + this.updateParamMappings(mappings)} + />, + ] + } + ); } } export default function init(ngModule) { - ngModule.component('addWidgetDialog', { - template: ` - - `, - bindings: { - resolve: '<', - close: '&', - dismiss: '&', - }, - }); - ngModule.component('addWidgetDialogImpl', react2angular(AddWidgetDialog)); + ngModule.component('addWidgetDialog', react2angular(AddWidgetDialog)); } init.init = true; diff --git a/client/app/pages/dashboards/dashboard.html b/client/app/pages/dashboards/dashboard.html index c28ec8ebd9..c6134ddb34 100644 --- a/client/app/pages/dashboards/dashboard.html +++ b/client/app/pages/dashboards/dashboard.html @@ -5,13 +5,13 @@

    - + {{$ctrl.dashboard.user.name}} - + - +
    @@ -110,8 +110,9 @@

    diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js index 2c317e691d..108516a8c7 100644 --- a/client/app/pages/dashboards/dashboard.js +++ b/client/app/pages/dashboards/dashboard.js @@ -318,26 +318,35 @@ function DashboardCtrl( ); }; - this.addWidget = (widgetType) => { - const widgetTypes = { - textbox: 'addTextboxDialog', - widget: 'addWidgetDialog', - }; + this.addTextBox = () => { $uibModal .open({ - component: widgetTypes[widgetType], + component: 'addTextboxDialog', resolve: { dashboard: () => this.dashboard, }, }) - .result.then(() => { - this.extractGlobalParameters(); - // Save position of newly added widget (but not entire layout) - const widget = _.last(this.dashboard.widgets); - if (_.isObject(widget)) { - return widget.save(); - } - }); + .result.then(this.onWidgetAdded); + }; + + this.onWidgetAdded = () => { + this.extractGlobalParameters(); + // Save position of newly added widget (but not entire layout) + const widget = _.last(this.dashboard.widgets); + if (_.isObject(widget)) { + return widget.save(); + } + }; + + this.addWidgetDialogOpened = false; + + this.openAddWidgetDialog = () => { + this.addWidgetDialogOpened = true; + }; + + this.closeAddWidgetDialog = () => { + this.addWidgetDialogOpened = false; + $scope.$applyAsync(); }; this.removeWidget = (widgetId) => { From 380ccc228f0f4fcff157023d8058d17179aa1ae9 Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Mon, 4 Feb 2019 20:02:15 +0200 Subject: [PATCH 3/5] Converted both to HOC asUIBModal --- .../components/dashboards/AddWidgetDialog.jsx | 27 +++++++------- .../EditParameterMappingsDialog.jsx | 28 ++++++++------- client/app/components/dashboards/widget.html | 3 +- client/app/components/dashboards/widget.js | 23 +++++------- client/app/hoc/asUIBModal.jsx | 36 +++++++++++++++++++ client/app/pages/dashboards/dashboard.html | 5 ++- client/app/pages/dashboards/dashboard.js | 15 ++++---- 7 files changed, 86 insertions(+), 51 deletions(-) create mode 100644 client/app/hoc/asUIBModal.jsx diff --git a/client/app/components/dashboards/AddWidgetDialog.jsx b/client/app/components/dashboards/AddWidgetDialog.jsx index 99e21a71d1..662204ba5c 100644 --- 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 index b16e91debb..d875795b71 100644 --- 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 index 05fb1b1d35..94954841f7 100644 --- a/client/app/components/dashboards/widget.html +++ b/client/app/components/dashboards/widget.html @@ -22,8 +22,7 @@
  • View Query
  • - Edit Parameters - +
  • Edit Parameters
  • diff --git a/client/app/components/dashboards/widget.js b/client/app/components/dashboards/widget.js index 16f606bc36..61069f15d3 100644 --- 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 new file mode 100644 index 0000000000..572ddb9e52 --- /dev/null +++ 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 = ( + + ); + + 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 index c6134ddb34..a6ae111b7a 100644 --- a/client/app/pages/dashboards/dashboard.html +++ b/client/app/pages/dashboards/dashboard.html @@ -110,9 +110,8 @@

    diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js index 108516a8c7..170a6b2bf2 100644 --- 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(); From 8ee8073176be1e2f880345a8d7c3cb2a1da8db40 Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Mon, 4 Feb 2019 20:13:28 +0200 Subject: [PATCH 4/5] Removed leftover code. Yuck. --- client/app/pages/dashboards/dashboard.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js index 170a6b2bf2..e6be3262f7 100644 --- a/client/app/pages/dashboards/dashboard.js +++ b/client/app/pages/dashboards/dashboard.js @@ -347,11 +347,6 @@ function DashboardCtrl( } }; - this.closeAddWidgetDialog = () => { - this.addWidgetDialogOpened = false; - $scope.$applyAsync(); - }; - this.removeWidget = (widgetId) => { this.dashboard.widgets = this.dashboard.widgets.filter(w => w.id !== undefined && w.id !== widgetId); this.extractGlobalParameters(); From e9d783cd9a51f6374c25e4d79bf3be5442c16da3 Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Mon, 4 Feb 2019 20:47:45 +0200 Subject: [PATCH 5/5] Renamed to ModalOpener --- client/app/components/dashboards/AddWidgetDialog.jsx | 4 ++-- .../app/components/dashboards/EditParameterMappingsDialog.jsx | 4 ++-- client/app/hoc/{asUIBModal.jsx => ModalOpener.jsx} | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) rename client/app/hoc/{asUIBModal.jsx => ModalOpener.jsx} (90%) diff --git a/client/app/components/dashboards/AddWidgetDialog.jsx b/client/app/components/dashboards/AddWidgetDialog.jsx index 662204ba5c..b1f8a85c94 100644 --- a/client/app/components/dashboards/AddWidgetDialog.jsx +++ b/client/app/components/dashboards/AddWidgetDialog.jsx @@ -3,6 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Select from 'antd/lib/select'; import Modal from 'antd/lib/modal'; +import ModalOpener from '@/hoc/ModalOpener'; import highlight from '@/lib/highlight'; import { MappingType, @@ -14,7 +15,6 @@ 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; @@ -330,4 +330,4 @@ class AddWidgetDialog extends React.Component { } } -export default asUIBModal(AddWidgetDialog); +export default ModalOpener(AddWidgetDialog); diff --git a/client/app/components/dashboards/EditParameterMappingsDialog.jsx b/client/app/components/dashboards/EditParameterMappingsDialog.jsx index d875795b71..c76ad5e724 100644 --- a/client/app/components/dashboards/EditParameterMappingsDialog.jsx +++ b/client/app/components/dashboards/EditParameterMappingsDialog.jsx @@ -2,12 +2,12 @@ import { map } from 'lodash'; import React from 'react'; import PropTypes from 'prop-types'; import Modal from 'antd/lib/modal'; +import ModalOpener from '@/hoc/ModalOpener'; import { ParameterMappingListInput, parameterMappingsToEditableMappings, editableMappingsToParameterMappings, } from '@/components/ParameterMappingInput'; -import asUIBModal from '@/hoc/asUIBModal'; class EditParameterMappingsDialog extends React.Component { static propTypes = { @@ -91,4 +91,4 @@ class EditParameterMappingsDialog extends React.Component { } } -export default asUIBModal(EditParameterMappingsDialog); +export default ModalOpener(EditParameterMappingsDialog); diff --git a/client/app/hoc/asUIBModal.jsx b/client/app/hoc/ModalOpener.jsx similarity index 90% rename from client/app/hoc/asUIBModal.jsx rename to client/app/hoc/ModalOpener.jsx index 572ddb9e52..e9e3801a2c 100644 --- a/client/app/hoc/asUIBModal.jsx +++ b/client/app/hoc/ModalOpener.jsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -const asUIBModal = (WrappedComponent) => { +const ModalOpener = (WrappedComponent) => { const container = document.createElement('div'); const render = (component) => { @@ -33,4 +33,4 @@ const asUIBModal = (WrappedComponent) => { }; }; -export default asUIBModal; +export default ModalOpener;