[Chrome Next] Hide app menu separator when you only have static items (elastic#270618)

## Summary

This PR removes the separator above `staticItems` when there are no
regular items.
<img width="273" height="147" alt="Screenshot 2026-05-22 at 19 03 26"
src="https://github.com/user-attachments/assets/39da8872-5b66-4054-be27-1c2e4ca2fd4e"
/>

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Ángeles Martínez Barrio <angeles.martinezbarrio@elastic.co>

Author: 3 people

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/utils.test.tsx

@@ -669,7 +669,22 @@ describe('utils', () => {
       expect(mainPanel?.['data-test-subj']).toBeUndefined(); // Main panel has no test ID by default
     });
 
-    it('should append staticItems after regular items in the main panel', () => {
+    it('should not show a separator when only static items are present', () => {
+      const items: AppMenuPopoverItem[] = [];
+      const staticItems: AppMenuPopoverItem[] = [
+        { id: 'static1', label: 'Static 1', run: jest.fn(), order: 1 },
+        { id: 'static2', label: 'Static 2', run: jest.fn(), order: 2 },
+      ];
+
+      const panels = getPopoverPanels({ items, staticItems });
+
+      expect(panels).toHaveLength(1);
+      const panelItems = panels[0].items as Array<{ key?: string; isSeparator?: boolean }>;
+      expect(panelItems[0].isSeparator).not.toBe(true);
+      expect(panelItems.map((i) => i.key)).toEqual(['static1', 'static2']);
+    });
+
+    it('should add a separator between regular and static items', () => {
       const items: AppMenuPopoverItem[] = [
         { id: '1', label: 'Item 1', run: jest.fn(), order: 2 },
         { id: '2', label: 'Item 2', run: jest.fn(), order: 1 },
@@ -681,9 +696,9 @@ describe('utils', () => {
       const panels = getPopoverPanels({ items, staticItems });
 
       expect(panels).toHaveLength(1);
-      const panelItems = panels[0].items as Array<{ key?: string }>;
-      // Regular items sorted by order: Item 2 (order 1), Item 1 (order 2), then static
-      expect(panelItems.map((i) => i.key)).toEqual(['2', '1', 'static1']);
+      const panelItems = panels[0].items as Array<{ key?: string; isSeparator?: boolean }>;
+      expect(panelItems.map((i) => i.key)).toEqual(['2', '1', 'static-items-separator', 'static1']);
+      expect(panelItems[2].isSeparator).toBe(true);
     });
 
     it('should not re-sort staticItems together with regular items', () => {
@@ -854,27 +869,27 @@ describe('utils', () => {
       expect(result.every((item) => item.overflow === true)).toBe(true);
     });
 
-    it('should add separator "above" only to the first item', () => {
+    it('should not add separator to items', () => {
       const items = [
         createStaticItem({ id: 'a', order: 1 }),
         createStaticItem({ id: 'b', order: 2 }),
         createStaticItem({ id: 'c', order: 3 }),
       ];
       const result = processStaticItems(items);
 
-      expect(result[0].separator).toBe('above');
+      expect(result[0].separator).toBeUndefined();
       expect(result[1].separator).toBeUndefined();
       expect(result[2].separator).toBeUndefined();
     });
 
-    it('should strip existing separator values from non-first items', () => {
+    it('should strip existing separator values from items', () => {
       const items = [
         createStaticItem({ id: 'a', order: 1, separator: 'below' }),
         createStaticItem({ id: 'b', order: 2, separator: 'above' }),
       ];
       const result = processStaticItems(items);
 
-      expect(result[0].separator).toBe('above');
+      expect(result[0].separator).toBeUndefined();
       expect(result[1].separator).toBeUndefined();
     });
 
@@ -889,15 +904,15 @@ describe('utils', () => {
       expect(result.map((item) => item.id)).toEqual(['a', 'b', 'c']);
     });
 
-    it('should add separator "above" to the first item after sorting', () => {
+    it('should not add separator to the first item after sorting', () => {
       const items = [
         createStaticItem({ id: 'c', order: 3 }),
         createStaticItem({ id: 'a', order: 1 }),
       ];
       const result = processStaticItems(items);
 
       expect(result[0].id).toBe('a');
-      expect(result[0].separator).toBe('above');
+      expect(result[0].separator).toBeUndefined();
     });
   });
 });

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/utils.tsx

@@ -121,10 +121,9 @@ export const getAppMenuItems = ({
 };
 
 export const processStaticItems = (staticItems?: AppMenuItemType[]): AppMenuItemType[] =>
-  sortByOrder(staticItems ?? []).map(({ separator, ...item }, index) => ({
+  sortByOrder(staticItems ?? []).map(({ separator, ...item }) => ({
     ...item,
     overflow: true,
-    ...(index === 0 ? { separator: 'above' as const } : {}),
   }));
 
 export const isDisabled = (disableButton: AppMenuItemCommon['disableButton']) =>
@@ -433,10 +432,13 @@ export const getPopoverPanels = ({
     const mainPanel = panels.find((panel) => panel.id === startPanelId);
 
     if (staticPanel && mainPanel) {
-      mainPanel.items = [
-        ...(mainPanel.items as EuiContextMenuPanelItemDescriptor[]),
-        ...(staticPanel.items as EuiContextMenuPanelItemDescriptor[]),
-      ];
+      const mainItems = mainPanel.items as EuiContextMenuPanelItemDescriptor[];
+      const staticPanelItems = staticPanel.items as EuiContextMenuPanelItemDescriptor[];
+
+      // Only add a separator between regular and static items
+      const separator = mainItems.length > 0 ? [createSeparatorItem('static-items-separator')] : [];
+
+      mainPanel.items = [...mainItems, ...separator, ...staticPanelItems];
       panels.splice(panels.indexOf(staticPanel), 1);
     }
   }