[One Workflow] Fix Actions menu row layout after EUI 116 upgrade

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