fix auto closing new vis modal when navigating to lens or when naviga…

…ting away with browser history (#56998) Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Feb 7, 2020 · a7be72c · a7be72c
1 parent 31985a3
commit a7be72c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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();
 }