[One Workflow] Fix Actions menu row layout after EUI 116 upgrade (#271409)

Closes elastic/security-team#17599

## Summary

EUI 116 ([#260949](#260949))
routes `EuiSelectableListItem` through the shared `EuiListItemLayout`
(EUI [#9532](elastic/eui#9532)). The new layout
(a) adds `padding-block: 6px` on `.euiSelectableListItem__text` and
`gap: 8px` on `.euiSelectableListItem__content`, (b) drops the
between-row `border-bottom` that EUI 114/115 set on every non-last item,
and (c) shrinks the `.euiSelectableList__groupLabel` horizontal padding
from `12px` to `4px`.

`renderActionOption` in the workflows Actions menu builds a custom icon
+ title + subtitle layout and owns its own spacing, so the new
padding/gap stacked on top — rows grew from ~64 px to 76 px and the
subtitle shifted. The dropped row border also broke the divider lines
the design relies on, and the group label / header no longer sat on the
same left edge as the items.

The fix scopes a few CSS overrides to the menu's `EuiSelectable`:

- `__content { gap: 0 }`
- `__text { padding-block: 0 }`
- `.euiSelectableListItem:not(:last-of-type) { border-bottom: thin }` —
restores the row divider
- `.euiSelectableList__groupLabel { padding-inline: 16px }` — aligns
"Add step" with the icon column
- `header { padding-inline: 16px }` (was `padding: 12px`) — aligns the
popover title and search with the items

Also gated the "Add step" group label on having at least one matching
action, so searches with no step matches no longer leave an orphan label
(matching the existing behavior of the Commands and Jump-to-a-step
groups, per designer feedback).

After the fix, "Actions menu" title, search input, "Add step" label, and
item icons all sit at the same `x = 16` from the popover edge — matching
the [Figma
design](https://www.figma.com/design/bVapoDOKB46hm0pSQXp9nA/One-Workflow--2?node-id=9838-34071).
Item height settles at 65 px with 1 px row borders.

## Before / after

| Current main (bug) | With fix |
|---|---|
|
![before](https://pub-6b50802d113345dea50c783e8280b53e.r2.dev/artifacts/20260528/pokm12gw-sb_before_main.webp)
|
![after](https://pub-6b50802d113345dea50c783e8280b53e.r2.dev/artifacts/20260528/6xla69h8-sb_after_main_clean.webp)
|

### Empty search state

When a search has no matching steps, EuiSelectable's "doesn't match any
options" message shows instead of an orphan "Add step" label:


![empty](https://pub-6b50802d113345dea50c783e8280b53e.r2.dev/artifacts/20260528/7yjujiv6-sb_no_match.webp)

## Test plan

- [ ] Open the workflows YAML editor, press `⌘K`, confirm rows are tight
(~65 px), divider lines visible between items, subtitle sits directly
under the title next to the icon
- [ ] Confirm title, search input, "Add step" label, and item icons all
sit at the same left edge
- [ ] Click into a connector group (e.g. Triggers) — nested view renders
the same way with dividers
- [ ] Type `Steps: ` to enter the virtualized full-catalog mode — items
render correctly without overlapping
- [ ] Type a query that doesn't match any step — confirm no orphan "Add
step" label
- [ ] No regression in the existing `ActionsMenu` Jest tests

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Kiryous

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', () => {

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(

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',