[Discover] Fix ES|QL visualization save modal title not defaulting after first open (#171894)

## Summary

This PR fixes a small bug when saving ES|QL visualizations in Discover
where the title doesn't default correctly when opening the save modal
more than once. The issue was a race condition that resulted in an empty
`title` being passed to `SaveModal` on the first render, causing it to
be used as the title input's initial value. The bug never occurred the
first time the save modal was opened because async imports hid the race
condition.

Fixes #171895.

### Checklist

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
This commit is contained in:
Davis McPhee 2023-11-24 12:26:35 -04:00 committed by GitHub
parent 40e9ee33ea
commit 0c0ac93331
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 6 deletions

View file

@ -538,9 +538,10 @@ describe('Lens App', () => {
}
async function testSave(inst: ReactWrapper, saveProps: SaveProps) {
await getButton(inst).run(inst.getDOMNode());
inst.update();
const handler = inst.find('SavedObjectSaveModalOrigin').prop('onSave') as (
getButton(inst).run(inst.getDOMNode());
// wait a tick since SaveModalContainer initializes asynchronously
await new Promise(process.nextTick);
const handler = inst.update().find('SavedObjectSaveModalOrigin').prop('onSave') as (
p: unknown
) => void;
handler(saveProps);

View file

@ -10,6 +10,7 @@ import { i18n } from '@kbn/i18n';
import { isFilterPinned } from '@kbn/es-query';
import { VisualizeFieldContext } from '@kbn/ui-actions-plugin/public';
import type { SavedObjectReference } from '@kbn/core/public';
import { EuiLoadingSpinner } from '@elastic/eui';
import { SaveModal } from './save_modal';
import type { LensAppProps, LensAppServices } from './types';
import type { SaveProps } from './app';
@ -58,6 +59,7 @@ export function SaveModalContainer({
let title = '';
let description;
let savedObjectId;
const [initializing, setInitializing] = useState(true);
const [lastKnownDoc, setLastKnownDoc] = useState<Document | undefined>(initLastKnownDoc);
if (lastKnownDoc) {
title = lastKnownDoc.title;
@ -92,9 +94,15 @@ export function SaveModalContainer({
getPersisted({
initialInput,
lensServices,
}).then((persisted) => {
if (persisted?.doc && isMounted) setLastKnownDoc(persisted.doc);
});
})
.then((persisted) => {
if (persisted?.doc && isMounted) setLastKnownDoc(persisted.doc);
})
.finally(() => {
setInitializing(false);
});
} else {
setInitializing(false);
}
return () => {
@ -135,6 +143,10 @@ export function SaveModalContainer({
}
};
if (initializing) {
return <EuiLoadingSpinner />;
}
const savingToLibraryPermitted = Boolean(isSaveable && application.capabilities.visualize.save);
return (

View file

@ -304,5 +304,27 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
await testSubjects.click('lnsSuggestion-donut');
expect(await testSubjects.exists('partitionVisChart')).to.be(true);
});
it('should default title when saving chart in Discover (even when modal is closed and reopened)', async () => {
await PageObjects.discover.selectTextBaseLang();
await PageObjects.header.waitUntilLoadingHasFinished();
await monacoEditor.setCodeEditorValue(
'from logstash-* | stats averageB = avg(bytes) by extension'
);
await testSubjects.click('querySubmitButton');
await PageObjects.header.waitUntilLoadingHasFinished();
await PageObjects.discover.chooseLensChart('Bar vertical stacked');
await testSubjects.click('TextBasedLangEditor-expand');
await testSubjects.click('unifiedHistogramSaveVisualization');
await PageObjects.header.waitUntilLoadingHasFinished();
let title = await testSubjects.getAttribute('savedObjectTitle', 'value');
expect(title).to.equal('Bar vertical stacked');
await testSubjects.click('saveCancelButton');
await PageObjects.header.waitUntilLoadingHasFinished();
await testSubjects.click('unifiedHistogramSaveVisualization');
await PageObjects.header.waitUntilLoadingHasFinished();
title = await testSubjects.getAttribute('savedObjectTitle', 'value');
expect(title).to.equal('Bar vertical stacked');
});
});
}