Skip to content

Fix auto closing new Vis modal when selecting Lens or navigating away with browser history #56998

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Dosant merged 2 commits into from
Feb 7, 2020
Merged

Fix auto closing new Vis modal when selecting Lens or navigating away with browser history #56998

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3c429b1
fix auto closing new vis modal when navigating to lens or when naviga…
Dosant Feb 6, 2020
607d5f2
Merge branch 'master' into dev/auto-close-modal-lens
elasticmachine Feb 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions src/legacy/core_plugins/kibana/public/visualize/np_ready/listing/visualize_listing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function initListingDirective(app) {
);
}

export function VisualizeListingController($injector, createNewVis) {
export function VisualizeListingController($injector, $scope, createNewVis) {
const {
addBasePath,
chrome,
Expand All @@ -59,7 +59,7 @@ export function VisualizeListingController($injector, createNewVis) {
this.savedObjects = savedObjects;

this.createNewVis = () => {
visualizations.showNewVisModal();
this.closeNewVisModal = visualizations.showNewVisModal();
};

this.editItem = ({ editUrl }) => {
Expand All @@ -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);
Expand Down Expand Up @@ -124,4 +124,10 @@ export function VisualizeListingController($injector, createNewVis) {
this.listingLimit = uiSettings.get('savedObjects:listingLimit');

addHelpMenuToAppChrome(chrome, docLinks);

$scope.$on('$destroy', () => {
Copy link
Copy Markdown
Contributor Author

@Dosant Dosant Feb 6, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is added for cases when we navigate away without interacting with dialog. E.g. back button in browser which navigates us to other app.

if (this.closeNewVisModal) {
this.closeNewVisModal();
}
});
}
20 changes: 20 additions & 0 deletions src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/new_vis_modal.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/new_vis_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Copy link
Copy Markdown
Contributor Author

@Dosant Dosant Feb 6, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure, why this onClose was called specifically for aliasUrl with addToDashboard, but not just aliasUrl. This was the reason why for other vis types closing worked, but not for Lens

Copy link
Copy Markdown
Contributor

@flash1293 flash1293 Feb 6, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could it be related to the modal having to stay open for OSS visualizations to pick the index pattern?

Edit: Probably not, forgot they are not an "aliasUrl". Maybe @majagrubic knows more

Copy link
Copy Markdown
Contributor Author

@Dosant Dosant Feb 6, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I understand you correctly, then this seems like handled separately:

kibana/src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/new_vis_modal.tsx

Line 123 in 3c429b1

private onVisTypeSelected = (visType: VisType | VisTypeAlias) => {

And then after search source is selected, code goes to that redirect function.

}
this.props.onClose();
window.location.assign(params);
return;
}
Expand Down
5 changes: 5 additions & 0 deletions src/legacy/core_plugins/visualizations/public/np_ready/public/wizard/show_new_vis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -55,4 +58,6 @@ export function showNewVisModal({ editorParams = [], onClose }: ShowNewVisModalP
</I18nProvider>
);
ReactDOM.render(element, container);

return () => handleClose();
}