github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Dashboard] Close toolbar popover for log stream visualizations (#126840)

Browse source 
* Fix close popover on click

* Fix close popover on click - second attempt

* Add functional test to ensure menu closes
This commit is contained in:
Hannah Mudge 2022-03-04 13:46:45 -07:00 • committed by GitHub
parent 1ed4aea9e4
commit f974150c7b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 65 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

85
src/plugins/dashboard/public/application/top_nav/editor_menu.tsx
View file

@ -153,7 +153,8 @@ export const EditorMenu = ({ dashboardContainer, createNewVisType }: Props) => {
};
const getEmbeddableFactoryMenuItem = (
factory: EmbeddableFactoryDefinition
factory: EmbeddableFactoryDefinition,
closePopover: () => void
): EuiContextMenuPanelItemDescriptor => {
const icon = factory?.getIconType ? factory.getIconType() : 'empty';
@ -164,6 +165,7 @@ export const EditorMenu = ({ dashboardContainer, createNewVisType }: Props) => {
icon,
toolTipContent,
onClick: async () => {
closePopover();
if (trackUiMetric) {
trackUiMetric(METRIC_TYPE.CLICK, factory.type);
}
@ -192,42 +194,47 @@ export const EditorMenu = ({ dashboardContainer, createNewVisType }: Props) => {
defaultMessage: 'Aggregation based',
});
const editorMenuPanels = [
{
id: 0,
items: [
...visTypeAliases.map(getVisTypeAliasMenuItem),
...Object.values(factoryGroupMap).map(({ id, appName, icon, panelId }) => ({
name: appName,
icon,
panel: panelId,
'data-test-subj': `dashboardEditorMenu-${id}Group`,
})),
...ungroupedFactories.map(getEmbeddableFactoryMenuItem),
...promotedVisTypes.map(getVisTypeMenuItem),
{
name: aggsPanelTitle,
icon: 'visualizeApp',
panel: aggBasedPanelID,
'data-test-subj': `dashboardEditorAggBasedMenuItem`,
},
...toolVisTypes.map(getVisTypeMenuItem),
],
},
{
id: aggBasedPanelID,
title: aggsPanelTitle,
items: aggsBasedVisTypes.map(getVisTypeMenuItem),
},
...Object.values(factoryGroupMap).map(
({ appName, panelId, factories: groupFactories }: FactoryGroup) => ({
id: panelId,
title: appName,
items: groupFactories.map(getEmbeddableFactoryMenuItem),
})
),
];
const getEditorMenuPanels = (closePopover: () => void) => {
return [
{
id: 0,
items: [
...visTypeAliases.map(getVisTypeAliasMenuItem),
...Object.values(factoryGroupMap).map(({ id, appName, icon, panelId }) => ({
name: appName,
icon,
panel: panelId,
'data-test-subj': `dashboardEditorMenu-${id}Group`,
})),
...ungroupedFactories.map((factory) => {
return getEmbeddableFactoryMenuItem(factory, closePopover);
}),
...promotedVisTypes.map(getVisTypeMenuItem),
{
name: aggsPanelTitle,
icon: 'visualizeApp',
panel: aggBasedPanelID,
'data-test-subj': `dashboardEditorAggBasedMenuItem`,
},
...toolVisTypes.map(getVisTypeMenuItem),
],
},
{
id: aggBasedPanelID,
title: aggsPanelTitle,
items: aggsBasedVisTypes.map(getVisTypeMenuItem),
},
...Object.values(factoryGroupMap).map(
({ appName, panelId, factories: groupFactories }: FactoryGroup) => ({
id: panelId,
title: appName,
items: groupFactories.map((factory) => {
return getEmbeddableFactoryMenuItem(factory, closePopover);
}),
})
),
];
};
return (
<SolutionToolbarPopover
ownFocus
@ -239,10 +246,10 @@ export const EditorMenu = ({ dashboardContainer, createNewVisType }: Props) => {
panelPaddingSize="none"
data-test-subj="dashboardEditorMenuButton"
>
{() => (
{({ closePopover }: { closePopover: () => void }) => (
<EuiContextMenu
initialPanelId={0}
panels={editorMenuPanels}
panels={getEditorMenuPanels(closePopover)}
className={`dshSolutionToolbar__editorContextMenu ${
IS_DARK_THEME
? 'dshSolutionToolbar__editorContextMenu--dark'

16
test/functional/apps/dashboard/create_and_add_embeddables.ts
View file

@ -26,12 +26,24 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await kibanaServer.uiSettings.replace({
defaultIndex: '0bf35f60-3dc9-11e8-8660-4d65aa086b3c',
});
});
it('ensure toolbar popover closes on add', async () => {
await PageObjects.common.navigateToApp('dashboard');
await PageObjects.dashboard.preserveCrossAppState();
await PageObjects.dashboard.loadSavedDashboard('few panels');
await PageObjects.dashboard.clickNewDashboard();
await PageObjects.dashboard.switchToEditMode();
await dashboardAddPanel.clickEditorMenuButton();
await dashboardAddPanel.clickAddNewEmbeddableLink('LOG_STREAM_EMBEDDABLE');
await dashboardAddPanel.expectEditorMenuClosed();
});
describe('add new visualization link', () => {
before(async () => {
await PageObjects.common.navigateToApp('dashboard');
await PageObjects.dashboard.preserveCrossAppState();
await PageObjects.dashboard.loadSavedDashboard('few panels');
});
it('adds new visualization via the top nav link', async () => {
const originalPanelCount = await PageObjects.dashboard.getPanelCount();
await PageObjects.dashboard.switchToEditMode();

5
test/functional/services/dashboard/add_panel.ts
View file

@ -46,6 +46,11 @@ export class DashboardAddPanelService extends FtrService {
async clickEditorMenuButton() {
this.log.debug('DashboardAddPanel.clickEditorMenuButton');
await this.testSubjects.click('dashboardEditorMenuButton');
await this.testSubjects.existOrFail('dashboardEditorContextMenu');
}
async expectEditorMenuClosed() {
await this.testSubjects.missingOrFail('dashboardEditorContextMenu');
}
async clickAggBasedVisualizations() {