use react instead of angular for overlay and loading of dom element

elastic · May 17, 2017 · a7256da · a7256da
1 parent dc601c4
commit a7256da
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 69 deletions.
diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.html b/src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.html
diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.js b/src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.js
@@ -8,7 +8,8 @@ import {
   KuiModalBody,
   KuiModalBodyText,
   KuiModalFooter,
-  KuiButton
+  KuiButton,
+  KuiModalOverlay
 } from 'ui_framework/components';
 
 export class DashboardCloneModal extends React.Component {
@@ -40,48 +41,50 @@ export class DashboardCloneModal extends React.Component {
 
   render() {
     return (
-      <KuiModal
-        data-tests-subj="dashboardCloneModal"
-        aria-label="Clone a dashboard"
-        className="dashboardCloneModal"
-        onKeyDown={ this.onKeyDown }
-      >
-        <KuiModalHeader>
-          <KuiModalHeaderTitle>
-            Clone Dashboard
-          </KuiModalHeaderTitle>
-        </KuiModalHeader>
-        <KuiModalBody>
-          <KuiModalBodyText className="kuiVerticalRhythm">
-            Please enter a new name for your dashboard.
-          </KuiModalBodyText>
-          <KuiModalBodyText className="kuiVerticalRhythm">
-            <input
-              data-test-subj="clonedDashboardTitle"
-              className="kuiTextInput kuiTextInput--large"
-              value={ this.state.newDashboardName }
-              onChange={ this.onInputChange } />
-          </KuiModalBodyText>
-        </KuiModalBody>
+      <KuiModalOverlay>
+        <KuiModal
+          data-tests-subj="dashboardCloneModal"
+          aria-label="Clone a dashboard"
+          className="dashboardCloneModal"
+          onKeyDown={ this.onKeyDown }
+        >
+          <KuiModalHeader>
+            <KuiModalHeaderTitle>
+              Clone Dashboard
+            </KuiModalHeaderTitle>
+          </KuiModalHeader>
+          <KuiModalBody>
+            <KuiModalBodyText className="kuiVerticalRhythm">
+              Please enter a new name for your dashboard.
+            </KuiModalBodyText>
+            <KuiModalBodyText className="kuiVerticalRhythm">
+              <input
+                data-test-subj="clonedDashboardTitle"
+                className="kuiTextInput kuiTextInput--large"
+                value={ this.state.newDashboardName }
+                onChange={ this.onInputChange } />
+            </KuiModalBodyText>
+          </KuiModalBody>
 
-        <KuiModalFooter>
-          <KuiButton
-            type="hollow"
-            data-test-subj="cloneCancelButton"
-            onClick={ this.props.onClose }
-          >
-            Cancel
-          </KuiButton>
-          <KuiButton
-            type="primary"
-            data-test-subj="cloneConfirmButton"
-            onClick={ this.cloneDashboard }
-            ref={ (button) => { this.confirmButton = button; } }
-          >
-            Confirm Clone
-          </KuiButton>
-        </KuiModalFooter>
-      </KuiModal>
+          <KuiModalFooter>
+            <KuiButton
+              type="hollow"
+              data-test-subj="cloneCancelButton"
+              onClick={ this.props.onClose }
+            >
+              Cancel
+            </KuiButton>
+            <KuiButton
+              type="primary"
+              data-test-subj="cloneConfirmButton"
+              onClick={ this.cloneDashboard }
+              ref={ (button) => { this.confirmButton = button; } }
+            >
+              Confirm Clone
+            </KuiButton>
+          </KuiModalFooter>
+        </KuiModal>
+      </KuiModalOverlay>
     );
   }
 }

diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/show_clone_modal.js b/src/core_plugins/kibana/public/dashboard/top_nav/show_clone_modal.js
@@ -1,15 +1,11 @@
-import template from './show_clone_template.html';
-import { ModalOverlay } from 'ui/modals';
-import angular from 'angular';
+import { DashboardCloneModal } from './clone_modal';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-export function showCloneModal(onClone, title, $rootScope, $compile) {
-  let modalPopover;
-  const cloneScope = $rootScope.$new();
+export function showCloneModal(onClone, title) {
+  const container = document.createElement('div');
   const closeModal = () => {
-    modalPopover.destroy();
-    modalPopover = undefined;
-    angular.element(document.body).off('keydown');
-    cloneScope.$destroy();
+    document.body.removeChild(container);
   };
 
   const onCloneConfirmed = (newTitle) => {
@@ -19,11 +15,9 @@ export function showCloneModal(onClone, title, $rootScope, $compile) {
       }
     });
   };
-
-  cloneScope.onClone = onCloneConfirmed;
-  cloneScope.onClose = closeModal;
-  cloneScope.title = title;
-
-  const modalInstance = $compile(template)(cloneScope);
-  modalPopover = new ModalOverlay(modalInstance);
+  document.body.appendChild(container);
+  const element = (
+    <DashboardCloneModal onClone={onCloneConfirmed} onClose={closeModal} title={title}></DashboardCloneModal>
+  );
+  ReactDOM.render(element, container);
 }
diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/show_clone_template.html b/src/core_plugins/kibana/public/dashboard/top_nav/show_clone_template.html