From a7256daa68e1ec58460338790e19c8d22f1d1dcf Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Tue, 16 May 2017 09:51:02 -0400
Subject: [PATCH] use react instead of angular for overlay and loading of dom
 element

---
 .../public/dashboard/top_nav/clone_modal.html |  9 --
 .../public/dashboard/top_nav/clone_modal.js   | 87 ++++++++++---------
 .../dashboard/top_nav/show_clone_modal.js     | 28 +++---
 .../top_nav/show_clone_template.html          |  1 -
 4 files changed, 56 insertions(+), 69 deletions(-)
 delete mode 100644 src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.html
 delete mode 100644 src/core_plugins/kibana/public/dashboard/top_nav/show_clone_template.html

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
deleted file mode 100644
index b12e229639d57..0000000000000
--- a/src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<clone-modal
-  data-test-subj="cloneModal"
-  on-cancel="onCancel"
-  on-confirm="onConfirm"
-  confirm-button-text="confirmButtonText"
-  cancel-button-text="cancelButtonText"
-  message="message"
-  title="title"
-></clone-modal>
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
index 04f156e445fdf..cd8824899672b 100644
--- 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
index 85523f8314777..ed2765cf01b41 100644
--- 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
deleted file mode 100644
index 727743c0a2241..0000000000000
--- a/src/core_plugins/kibana/public/dashboard/top_nav/show_clone_template.html
+++ /dev/null
@@ -1 +0,0 @@
-<dashboard-clone-modal on-clone="onClone" on-close="onClose" title="title"/>