From cd1c04b78742f67d1a82704be50fc4faf85e790c Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Fri, 7 Feb 2020 13:02:16 +0100
Subject: [PATCH] fix auto closing new vis modal when navigating to lens or
 when navigating away with browser history (#56998) (#57092)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../np_ready/listing/visualize_listing.js     | 12 ++++++++---
 .../public/wizard/new_vis_modal.test.tsx      | 20 +++++++++++++++++++
 .../np_ready/public/wizard/new_vis_modal.tsx  |  2 +-
 .../np_ready/public/wizard/show_new_vis.tsx   |  5 +++++
 4 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/visualize/np_ready/listing/visualize_listing.js b/src/legacy/core_plugins/kibana/public/visualize/np_ready/listing/visualize_listing.js
index 6bac4e4c62efa5..cae1e40cd445a4 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/np_ready/listing/visualize_listing.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/np_ready/listing/visualize_listing.js
@@ -32,7 +32,7 @@ export function initListingDirective(app) {
   );
 }
 
-export function VisualizeListingController($injector, createNewVis) {
+export function VisualizeListingController($injector, $scope, createNewVis) {
   const {
     addBasePath,
     chrome,
@@ -59,7 +59,7 @@ export function VisualizeListingController($injector, createNewVis) {
   this.savedObjects = savedObjects;
 
   this.createNewVis = () => {
-    visualizations.showNewVisModal();
+    this.closeNewVisModal = visualizations.showNewVisModal();
   };
 
   this.editItem = ({ editUrl }) => {
@@ -73,7 +73,7 @@ export function VisualizeListingController($injector, createNewVis) {
 
   if (createNewVis) {
     // In case the user navigated to the page via the /visualize/new URL we start the dialog immediately
-    visualizations.showNewVisModal({
+    this.closeNewVisModal = visualizations.showNewVisModal({
       onClose: () => {
         // In case the user came via a URL to this page, change the URL to the regular landing page URL after closing the modal
         kbnUrl.changePath(VisualizeConstants.LANDING_PAGE_PATH);
@@ -124,4 +124,10 @@ export function VisualizeListingController($injector, createNewVis) {
   this.listingLimit = uiSettings.get('savedObjects:listingLimit');
 
   addHelpMenuToAppChrome(chrome, docLinks);
+
+  $scope.$on('$destroy', () => {
+    if (this.closeNewVisModal) {
+      this.closeNewVisModal();
+    }
+  });
 }
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/new_vis_modal.test.tsx b/src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/new_vis_modal.test.tsx
index 0701b5042a4bd0..58f7bc49d1cdb8 100644
--- a/src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/new_vis_modal.test.tsx
+++ b/src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/new_vis_modal.test.tsx
@@ -155,6 +155,26 @@ describe('NewVisModal', () => {
       expect(window.location.assign).toBeCalledWith('testbasepath/aliasUrl?addToDashboard');
       expect(onClose).toHaveBeenCalled();
     });
+
+    it('closes and redirects properly if visualization with aliasUrl and without addToDashboard in editorParams', () => {
+      const onClose = jest.fn();
+      window.location.assign = jest.fn();
+      const wrapper = mountWithIntl(
+        <NewVisModal
+          isOpen={true}
+          onClose={onClose}
+          visTypesRegistry={visTypes}
+          editorParams={['foo=true', 'bar=42']}
+          addBasePath={addBasePath}
+          uiSettings={uiSettings}
+          savedObjects={{} as SavedObjectsStart}
+        />
+      );
+      const visButton = wrapper.find('button[data-test-subj="visType-visWithAliasUrl"]');
+      visButton.simulate('click');
+      expect(window.location.assign).toBeCalledWith('testbasepath/aliasUrl');
+      expect(onClose).toHaveBeenCalled();
+    });
   });
 
   describe('filter for visualization types', () => {
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/new_vis_modal.tsx b/src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/new_vis_modal.tsx
index fe66d2e56c6115..b39e8e8926707f 100644
--- a/src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/new_vis_modal.tsx
+++ b/src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/new_vis_modal.tsx
@@ -145,8 +145,8 @@ class NewVisModal extends React.Component<TypeSelectionProps, TypeSelectionState
       params = this.props.addBasePath(visType.aliasUrl);
       if (this.props.editorParams && this.props.editorParams.includes('addToDashboard')) {
         params = `${params}?addToDashboard`;
-        this.props.onClose();
       }
+      this.props.onClose();
       window.location.assign(params);
       return;
     }
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/show_new_vis.tsx b/src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/show_new_vis.tsx
index 8ca846ee39499a..a79c6ad98edf6f 100644
--- a/src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/show_new_vis.tsx
+++ b/src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/show_new_vis.tsx
@@ -31,12 +31,15 @@ export interface ShowNewVisModalParams {
 
 export function showNewVisModal({ editorParams = [], onClose }: ShowNewVisModalParams = {}) {
   const container = document.createElement('div');
+  let isClosed = false;
   const handleClose = () => {
+    if (isClosed) return;
     ReactDOM.unmountComponentAtNode(container);
     document.body.removeChild(container);
     if (onClose) {
       onClose();
     }
+    isClosed = true;
   };
 
   document.body.appendChild(container);
@@ -55,4 +58,6 @@ export function showNewVisModal({ editorParams = [], onClose }: ShowNewVisModalP
     </I18nProvider>
   );
   ReactDOM.render(element, container);
+
+  return () => handleClose();
 }