fix auto closing new vis modal when navigating to lens or when navigating away with browser history (#56998)

Dosant · elasticmachine · Dosant · commit 68802f19d6ef · 2020-02-07T11:26:45.000+01:00
Co-authored-by: Elastic Machine &lt;elasticmachine@users.noreply.github.com&gt;
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();
 }

Original file line number	Diff line number	Diff line change
`@@ -145,8 +145,8 @@ class NewVisModal extends React.Component<TypeSelectionProps, TypeSelectionState`
`145`	`145`	`params = this.props.addBasePath(visType.aliasUrl);`
`146`	`146`	`if (this.props.editorParams && this.props.editorParams.includes('addToDashboard')) {`
`147`	`147`	params = `${params}?addToDashboard`;
`148`		`- this.props.onClose();`
`149`	`148`	`}`
	`149`	`+ this.props.onClose();`
`150`	`150`	`window.location.assign(params);`
`151`	`151`	`return;`
`152`	`152`	`}`