diff --git a/src/platform/plugins/shared/workflows_management/public/features/actions_menu_popover/lib/use_display_options.test.ts b/src/platform/plugins/shared/workflows_management/public/features/actions_menu_popover/lib/use_display_options.test.ts index 01cff5b59cbec..1db66b14e096a 100644 --- a/src/platform/plugins/shared/workflows_management/public/features/actions_menu_popover/lib/use_display_options.test.ts +++ b/src/platform/plugins/shared/workflows_management/public/features/actions_menu_popover/lib/use_display_options.test.ts @@ -43,9 +43,24 @@ describe('buildDisplayOptions', () => { }; it('shows Add step + Commands sections when no search is active', () => { - const result = buildDisplayOptions(base); + const result = buildDisplayOptions({ ...base, options: [makeAction('a', 'A')] }); expect(groupLabels(result)).toEqual(['Add step', 'Commands']); - expect(dataKinds(result)).toEqual(['command', 'command']); + expect(dataKinds(result)).toEqual(['action', 'command', 'command']); + }); + + it('hides Add step section when no actions match the search', () => { + const result = buildDisplayOptions({ ...base, options: [], searchTerm: 'zzz' }); + expect(groupLabels(result)).not.toContain('Add step'); + }); + + it('hides Add step section in Steps: mode when no actions match', () => { + const result = buildDisplayOptions({ + ...base, + options: [], + searchTerm: `${STEPS_PREFIX}zzz`, + }); + expect(groupLabels(result)).not.toContain('Add step'); + expect(result).toHaveLength(0); }); it('returns action items directly when inside a sub-group', () => { diff --git a/src/platform/plugins/shared/workflows_management/public/features/actions_menu_popover/lib/use_display_options.ts b/src/platform/plugins/shared/workflows_management/public/features/actions_menu_popover/lib/use_display_options.ts index 3d9c755b07596..2cdfc475518a6 100644 --- a/src/platform/plugins/shared/workflows_management/public/features/actions_menu_popover/lib/use_display_options.ts +++ b/src/platform/plugins/shared/workflows_management/public/features/actions_menu_popover/lib/use_display_options.ts @@ -91,37 +91,41 @@ export function buildDisplayOptions({ } if (isStepsMode) { + if (options.length > 0) { + result.push({ + label: i18n.translate('workflows.actionsMenu.addStepGroupLabel', { + defaultMessage: 'Add step', + }), + isGroupLabel: true, + }); + for (const opt of options) { + result.push({ label: opt.label, data: { menuItem: { kind: 'action', action: opt } } }); + } + } + return result; + } + + const visibleOptions = hasSearch ? options.slice(0, MAX_VISIBLE_STEPS) : options; + if (visibleOptions.length > 0) { result.push({ label: i18n.translate('workflows.actionsMenu.addStepGroupLabel', { defaultMessage: 'Add step', }), isGroupLabel: true, }); - for (const opt of options) { + for (const opt of visibleOptions) { result.push({ label: opt.label, data: { menuItem: { kind: 'action', action: opt } } }); } - return result; - } - - result.push({ - label: i18n.translate('workflows.actionsMenu.addStepGroupLabel', { - defaultMessage: 'Add step', - }), - isGroupLabel: true, - }); - const visibleOptions = hasSearch ? options.slice(0, MAX_VISIBLE_STEPS) : options; - for (const opt of visibleOptions) { - result.push({ label: opt.label, data: { menuItem: { kind: 'action', action: opt } } }); - } - if (hasSearch && options.length > MAX_VISIBLE_STEPS) { - result.push({ - label: i18n.translate('workflows.actionsMenu.viewAllSteps', { - defaultMessage: 'View all steps to add', - }), - className: 'compactOption', - data: { menuItem: { kind: 'nav', target: 'viewAll' } }, - }); + if (hasSearch && options.length > MAX_VISIBLE_STEPS) { + result.push({ + label: i18n.translate('workflows.actionsMenu.viewAllSteps', { + defaultMessage: 'View all steps to add', + }), + className: 'compactOption', + data: { menuItem: { kind: 'nav', target: 'viewAll' } }, + }); + } } const filteredCmds = (commands ?? []).filter( diff --git a/src/platform/plugins/shared/workflows_management/public/features/actions_menu_popover/ui/actions_menu.tsx b/src/platform/plugins/shared/workflows_management/public/features/actions_menu_popover/ui/actions_menu.tsx index 8e9be745a55bf..bb68e13ff62d4 100644 --- a/src/platform/plugins/shared/workflows_management/public/features/actions_menu_popover/ui/actions_menu.tsx +++ b/src/platform/plugins/shared/workflows_management/public/features/actions_menu_popover/ui/actions_menu.tsx @@ -417,12 +417,26 @@ const componentStyles = { '& .euiSelectableListItem.compactOption': { paddingBlock: euiTheme.size.s, }, + // EUI 116 routes EuiSelectableListItem through EuiListItemLayout, which + // adds gap on __content and vertical padding on __text and drops the + // between-row border. renderActionOption owns its own spacing, so zero + // the new gap/padding out and re-add the row border to match the design. + '& .euiSelectableListItem__content': { + gap: 0, + }, + '& .euiSelectableListItem__text': { + paddingBlock: 0, + }, + '& .euiSelectableListItem:not(:last-of-type)': { + borderBottom: euiTheme.border.thin, + }, '& .euiSelectableList': { maxHeight: '420px', overflowY: 'auto', }, '& .euiSelectableList__groupLabel': { borderBottom: euiTheme.border.thin, + paddingInline: '16px', }, '& .euiSelectableList__groupLabel ~ .euiSelectableList__groupLabel': { marginTop: '24px', @@ -435,7 +449,8 @@ const componentStyles = { }), header: ({ euiTheme }: UseEuiTheme) => css({ - padding: euiTheme.size.m, + paddingBlock: euiTheme.size.m, + paddingInline: '16px', }), actionOption: css({ gap: '12px',