From d9bf726ed0b2da1e632545bb39b3cb1db4c209c0 Mon Sep 17 00:00:00 2001 From: David Sinclair Date: Sun, 21 May 2023 17:07:39 -0700 Subject: [PATCH] build panels tests and more comments Signed-off-by: David Sinclair --- .../build_eui_context_menu_panels.test.ts | 155 ++++++++++++------ .../build_eui_context_menu_panels.tsx | 1 + 2 files changed, 110 insertions(+), 46 deletions(-) diff --git a/src/plugins/ui_actions/public/context_menu/build_eui_context_menu_panels.test.ts b/src/plugins/ui_actions/public/context_menu/build_eui_context_menu_panels.test.ts index a22a660a032..b9afca9fb99 100644 --- a/src/plugins/ui_actions/public/context_menu/build_eui_context_menu_panels.test.ts +++ b/src/plugins/ui_actions/public/context_menu/build_eui_context_menu_panels.test.ts @@ -257,7 +257,108 @@ test('hides items behind in "More" submenu if there are more than 4 actions', as `); }); -test('tests groups and separators', async () => { +test('flattening of group with only one action', async () => { + const grouping1 = [ + { + id: 'test-group', + getDisplayName: () => 'Test group', + getIconType: () => 'bell', + }, + ]; + const actions = [ + createTestAction({ + dispayName: 'Foo 1', + }), + createTestAction({ + dispayName: 'Bar 1', + grouping: grouping1, + }), + ]; + const menu = await buildContextMenuForActions({ + actions: actions.map((action) => ({ action, context: {}, trigger: 'TEST' as any })), + }); + + expect(menu.map(resultMapper)).toMatchInlineSnapshot(` + Array [ + Object { + "items": Array [ + Object { + "name": "Foo 1", + }, + Object { + "isSeparator": true, + }, + Object { + "name": "Bar 1", + }, + ], + }, + Object { + "items": Array [ + Object { + "name": "Bar 1", + }, + ], + }, + ] + `); +}); + +test('grouping with only two actions', async () => { + const grouping1 = [ + { + id: 'test-group', + getDisplayName: () => 'Test group', + getIconType: () => 'bell', + }, + ]; + const actions = [ + createTestAction({ + dispayName: 'Foo 1', + }), + createTestAction({ + dispayName: 'Bar 1', + grouping: grouping1, + }), + createTestAction({ + dispayName: 'Bar 2', + grouping: grouping1, + }), + ]; + const menu = await buildContextMenuForActions({ + actions: actions.map((action) => ({ action, context: {}, trigger: 'TEST' as any })), + }); + + expect(menu.map(resultMapper)).toMatchInlineSnapshot(` + Array [ + Object { + "items": Array [ + Object { + "name": "Foo 1", + }, + Object { + "isSeparator": true, + }, + Object { + "name": "Test group", + }, + ], + }, + Object { + "items": Array [ + Object { + "name": "Bar 1", + }, + Object { + "name": "Bar 2", + }, + ], + }, + ] + `); +}); + +test('groups with deep nesting', async () => { const grouping1 = [ { id: 'test-group', @@ -271,48 +372,29 @@ test('tests groups and separators', async () => { getDisplayName: () => 'Test group 2', getIconType: () => 'bell', }, - ]; - const grouping3 = [ { id: 'test-group-3', getDisplayName: () => 'Test group 3', getIconType: () => 'bell', }, - { - id: 'test-group-4', - getDisplayName: () => 'Test group 4', - getIconType: () => 'bell', - }, ]; const actions = [ - createTestAction({ - dispayName: 'First action', - }), createTestAction({ dispayName: 'Foo 1', - grouping: grouping1, }), createTestAction({ - dispayName: 'Foo 2', + dispayName: 'Bar 1', grouping: grouping1, }), createTestAction({ - dispayName: 'Foo 3', + dispayName: 'Bar 2', grouping: grouping1, }), createTestAction({ - dispayName: 'Bar 1', + dispayName: 'Qux 1', grouping: grouping2, }), - createTestAction({ - dispayName: 'Bar 2', - grouping: grouping2, - }), - createTestAction({ - dispayName: 'Inner', - grouping: grouping3, - }), ]; const menu = await buildContextMenuForActions({ actions: actions.map((action) => ({ action, context: {}, trigger: 'TEST' as any })), @@ -323,7 +405,7 @@ test('tests groups and separators', async () => { Object { "items": Array [ Object { - "name": "First action", + "name": "Foo 1", }, Object { "isSeparator": true, @@ -335,26 +417,7 @@ test('tests groups and separators', async () => { "isSeparator": true, }, Object { - "name": "Test group 2", - }, - Object { - "isSeparator": true, - }, - Object { - "name": "Test group 4", - }, - ], - }, - Object { - "items": Array [ - Object { - "name": "Foo 1", - }, - Object { - "name": "Foo 2", - }, - Object { - "name": "Foo 3", + "name": "Test group 3", }, ], }, @@ -371,14 +434,14 @@ test('tests groups and separators', async () => { Object { "items": Array [ Object { - "name": "Test group 4", + "name": "Test group 3", }, ], }, Object { "items": Array [ Object { - "name": "Inner", + "name": "Qux 1", }, ], }, diff --git a/src/plugins/ui_actions/public/context_menu/build_eui_context_menu_panels.tsx b/src/plugins/ui_actions/public/context_menu/build_eui_context_menu_panels.tsx index cf2369f97fc..6d69be1f3fa 100644 --- a/src/plugins/ui_actions/public/context_menu/build_eui_context_menu_panels.tsx +++ b/src/plugins/ui_actions/public/context_menu/build_eui_context_menu_panels.tsx @@ -242,6 +242,7 @@ export async function buildContextMenuForActions({ // If a panel has more than one child, then allow items to be grouped // and link to it in the mainMenu. Otherwise, flatten the group. + // Note: this only happens on the root level panels, not for inner groups. if (panel.items.length > 1) { panels.mainMenu.items.push({ name: panel.title || panel.id,