[Chrome Next] AppMenu changes for DnD (#259949)

## Summary

This PR updates app menu to match the first milestone of the new design
from [Project Vibranium (Chrome
Next)](elastic/kibana-team#3115).

### Changes: 
- removal of `secondaryActionItem` from `AppMenuConfig` interface
- the number of items visible at once has been reduced to `3`:
- `primaryActionItem` is now treated separately and doesn't contribute
to the limit
- if the number of `items` is less or equal than `3` then all the items
are visible
- if the number of `items` is more than `3` then the overflow button
will appear **consuming one of the available slots**, resulting in
maximum of `2` items being visible alongside the overflow button

The changes affect both classic and solution views. The order of the
items has been changed to match design decisions.

### Visuals: 
|  App    | Before        | After           |
|--------|------------|------------|
| Dashboards view mode | <img width="596" height="141" alt="Screenshot
2026-03-30 at 23 43 49"
src="https://github.com/user-attachments/assets/1b75e843-d088-47f1-b221-f61e8d721655"
/> | <img width="353" height="210" alt="Screenshot 2026-03-30 at 23 51
35"
src="https://github.com/user-attachments/assets/2bd09d71-4d99-49d8-b2f7-5b21b09e03e2"
/> |
| Dashboards edit mode | <img width="592" height="122" alt="Screenshot
2026-03-30 at 23 43 42"
src="https://github.com/user-attachments/assets/62fecc1c-09cc-4bd5-b1a3-c33a198e3dcb"
/> | <img width="421" height="208" alt="Screenshot 2026-03-30 at 23 52
25"
src="https://github.com/user-attachments/assets/bba87abe-141c-4206-a7e3-79b5e827275e"
/> |
| Discover KQL mode | <img width="540" height="250" alt="Screenshot
2026-03-30 at 23 45 12"
src="https://github.com/user-attachments/assets/4497ccb9-4856-4278-ae16-5c9cd0e85dd1"
/> | <img width="360" height="328" alt="Screenshot 2026-03-30 at 23 53
01"
src="https://github.com/user-attachments/assets/638c6a23-52b9-41ef-971f-e0ad75997a53"
/> |
| Discover ES\|QL mode | <img width="530" height="208" alt="Screenshot
2026-03-30 at 23 45 26"
src="https://github.com/user-attachments/assets/fa7a97b9-1d2a-42d3-a26b-cff154d7dd1d"
/> | <img width="355" height="287" alt="Screenshot 2026-03-30 at 23 53
38"
src="https://github.com/user-attachments/assets/ce9a9dd4-ef43-4c12-a2ef-7c164d244fa0"
/> |

Implements: #259991

Author: kowalczyk-krzysztof

.github/CODEOWNERS

@@ -2192,6 +2192,7 @@ x-pack/platform/test/plugin_api_integration/test_suites/platform/ @elastic/kiban
 /src/platform/test/node_roles_functional @elastic/kibana-core
 /src/platform/test/functional/page_objects/newsfeed_page.ts @elastic/kibana-core # assigned per https://github.com/elastic/kibana/pull/160210
 /src/platform/test/functional/page_objects/home_page.ts @elastic/appex-sharedux
+/src/platform/test/functional/page_objects/app_menu.ts @elastic/appex-sharedux
 /src/platform/test/functional/page_objects/export_page.ts @elastic/appex-sharedux
 /src/platform/test/functional/page_objects/solution_navigation.ts @elastic/appex-sharedux
 /src/platform/test/functional/fixtures/es_archiver/deprecations_service @elastic/kibana-core

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/app_menu.stories.tsx

@@ -54,6 +54,86 @@ type Story = StoryObj<AppMenuWrapperProps>;
 
 const dashboardEditModeConfig: AppMenuConfig = {
   items: [
+    {
+      id: 'add',
+      order: 0,
+      label: 'add',
+      testId: 'addButton',
+      iconType: 'plus',
+      popoverWidth: 200,
+      items: [
+        {
+          run: () => action('create-visualization-clicked'),
+          order: 1,
+          id: 'createVisualization',
+          label: 'Visualization',
+          iconType: 'lensApp',
+          testId: 'createNewVisButton',
+        },
+        {
+          run: () => action('new-panel-clicked'),
+          id: 'newPanel',
+          order: 2,
+          label: 'New panel',
+          iconType: 'plusCircle',
+          testId: 'openAddPanelFlyoutButton',
+        },
+        {
+          run: () => action('add-section-clicked'),
+          id: 'collapsibleSection',
+          order: 3,
+          label: 'Collapsible section',
+          iconType: 'section',
+          testId: 'addCollapsibleSectionButton',
+        },
+        {
+          id: 'controls',
+          order: 4,
+          label: 'Controls',
+          iconType: 'controls',
+          testId: 'controls-menu-button',
+          items: [
+            {
+              run: () => action('control-clicked'),
+              id: 'control',
+              order: 1,
+              label: 'control',
+              testId: 'controlButton',
+            },
+            {
+              run: () => action('variable-control-clicked'),
+              id: 'variableControl',
+              order: 2,
+              label: 'variable control',
+              testId: 'variableControlButton',
+            },
+            {
+              run: () => action('time-slider-control-clicked'),
+              id: 'timeSliderControl',
+              order: 3,
+              label: 'time slider control',
+              testId: 'timeSliderControlButton',
+            },
+            {
+              run: () => action('setting-clicked'),
+              id: 'settings',
+              order: 4,
+              label: 'settings',
+              testId: 'settingButton',
+              separator: 'above',
+            },
+          ],
+        },
+        {
+          run: () => action('add-from-library-clicked'),
+          id: 'fromLibrary',
+          order: 5,
+          label: 'From library',
+          iconType: 'folderOpen',
+          testId: 'addFromLibraryButton',
+        },
+      ],
+    },
     {
       run: action('exit-edit-clicked'),
       id: 'exitEdit',
@@ -121,87 +201,6 @@ const dashboardEditModeConfig: AppMenuConfig = {
       iconType: 'backgroundTask',
     },
   ],
-  secondaryActionItem: {
-    id: 'add',
-    label: 'add',
-    testId: 'addButton',
-    iconType: 'plusCircle',
-    color: 'success',
-    minWidth: false,
-    popoverWidth: 200,
-    items: [
-      {
-        run: () => action('create-visualization-clicked'),
-        order: 1,
-        id: 'createVisualization',
-        label: 'Visualization',
-        iconType: 'lensApp',
-        testId: 'createNewVisButton',
-      },
-      {
-        run: () => action('new-panel-clicked'),
-        id: 'newPanel',
-        order: 2,
-        label: 'New panel',
-        iconType: 'plusCircle',
-        testId: 'openAddPanelFlyoutButton',
-      },
-      {
-        run: () => action('add-section-clicked'),
-        id: 'collapsibleSection',
-        order: 3,
-        label: 'Collapsible section',
-        iconType: 'section',
-        testId: 'addCollapsibleSectionButton',
-      },
-      {
-        id: 'controls',
-        order: 4,
-        label: 'Controls',
-        iconType: 'controls',
-        testId: 'controls-menu-button',
-        items: [
-          {
-            run: () => action('control-clicked'),
-            id: 'control',
-            order: 1,
-            label: 'control',
-            testId: 'controlButton',
-          },
-          {
-            run: () => action('variable-control-clicked'),
-            id: 'variableControl',
-            order: 2,
-            label: 'variable control',
-            testId: 'variableControlButton',
-          },
-          {
-            run: () => action('time-slider-control-clicked'),
-            id: 'timeSliderControl',
-            order: 3,
-            label: 'time slider control',
-            testId: 'timeSliderControlButton',
-          },
-          {
-            run: () => action('setting-clicked'),
-            id: 'settings',
-            order: 4,
-            label: 'settings',
-            testId: 'settingButton',
-            separator: 'above',
-          },
-        ],
-      },
-      {
-        run: () => action('add-from-library-clicked'),
-        id: 'fromLibrary',
-        order: 5,
-        label: 'From library',
-        iconType: 'folderOpen',
-        testId: 'addFromLibraryButton',
-      },
-    ],
-  },
   primaryActionItem: {
     run: action('save-clicked'),
     id: 'save',

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts

@@ -19,7 +19,6 @@ export type {
   AppMenuRunActionParams,
   AppMenuConfig,
   AppMenuItemType,
-  AppMenuSecondaryActionItem,
   AppMenuPrimaryActionItem,
   AppMenuPopoverItem,
   AppMenuSplitButtonProps,

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

@@ -89,43 +89,6 @@ describe('AppMenu', () => {
 
       expect(screen.getByText('Save')).toBeInTheDocument();
     });
-
-    it('should render secondary action item', () => {
-      const configWithSecondary: AppMenuConfig = {
-        secondaryActionItem: {
-          id: 'cancel',
-          label: 'Cancel',
-          run: jest.fn(),
-          iconType: 'cross',
-        },
-      };
-
-      render(<AppMenuComponent config={configWithSecondary} />);
-
-      expect(screen.getByText('Cancel')).toBeInTheDocument();
-    });
-
-    it('should render both primary and secondary action items', () => {
-      const configWithBoth: AppMenuConfig = {
-        primaryActionItem: {
-          id: 'save',
-          label: 'Save',
-          run: jest.fn(),
-          iconType: 'save',
-        },
-        secondaryActionItem: {
-          id: 'cancel',
-          label: 'Cancel',
-          run: jest.fn(),
-          iconType: 'cross',
-        },
-      };
-
-      render(<AppMenuComponent config={configWithBoth} />);
-
-      expect(screen.getByText('Save')).toBeInTheDocument();
-      expect(screen.getByText('Cancel')).toBeInTheDocument();
-    });
   });
 
   describe('responsive behavior', () => {

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

@@ -26,8 +26,7 @@ export interface AppMenuItemsProps {
   isCollapsed?: boolean;
 }
 
-const hasNoItems = (config: AppMenuConfig) =>
-  !config.items?.length && !config?.primaryActionItem && !config?.secondaryActionItem;
+const hasNoItems = (config: AppMenuConfig) => !config.items?.length && !config?.primaryActionItem;
 
 export const AppMenuComponent = ({
   config,
@@ -43,7 +42,6 @@ export const AppMenuComponent = ({
   }
 
   const primaryActionItem = config?.primaryActionItem;
-  const secondaryActionItem = config?.secondaryActionItem;
   const showMoreButtonId = 'show-more';
 
   const headerLinksProps = {
@@ -76,22 +74,10 @@ export const AppMenuComponent = ({
     />
   ) : undefined;
 
-  const secondaryActionComponent = secondaryActionItem ? (
-    <AppMenuActionButton
-      {...secondaryActionItem}
-      isPopoverOpen={openPopoverId === secondaryActionItem.id}
-      onPopoverToggle={() => {
-        handlePopoverToggle(secondaryActionItem.id);
-      }}
-      onPopoverClose={handleOnPopoverClose}
-    />
-  ) : undefined;
-
   const collapsedComponent = (
     <AppMenuOverflowButton
       items={[...displayedItems, ...overflowItems]}
       isPopoverOpen={openPopoverId === showMoreButtonId}
-      secondaryActionItem={secondaryActionItem}
       primaryActionItem={primaryActionItem}
       onPopoverToggle={() => handlePopoverToggle(showMoreButtonId)}
       onPopoverClose={handleOnPopoverClose}
@@ -111,7 +97,6 @@ export const AppMenuComponent = ({
           onPopoverToggle={() => handlePopoverToggle(showMoreButtonId)}
           onPopoverClose={handleOnPopoverClose}
         />
-        {secondaryActionComponent}
         {primaryActionComponent}
       </EuiHeaderLinks>
     );
@@ -138,7 +123,6 @@ export const AppMenuComponent = ({
             onPopoverClose={handleOnPopoverClose}
           />
         )}
-        {secondaryActionComponent}
         {primaryActionComponent}
       </EuiHeaderLinks>
     );

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

@@ -110,28 +110,6 @@ describe('AppMenuActionButton', () => {
     expect(defaultProps.run).not.toHaveBeenCalled();
   });
 
-  it('should toggle popover when button with items is clicked', async () => {
-    const user = userEvent.setup();
-    const secondaryActionProps = {
-      label: 'options',
-      id: 'optionsButton',
-      iconType: 'gear',
-      isPopoverOpen: false,
-      onPopoverToggle: jest.fn(),
-      onPopoverClose: jest.fn(),
-      items: [
-        { id: 'item1', label: 'Item 1', run: jest.fn(), order: 1 },
-        { id: 'item2', label: 'Item 2', run: jest.fn(), order: 2 },
-      ],
-    };
-
-    render(<AppMenuActionButton {...secondaryActionProps} testId="test-action-button" />);
-
-    await user.click(screen.getByTestId('test-action-button'));
-
-    expect(secondaryActionProps.onPopoverToggle).toHaveBeenCalledTimes(1);
-  });
-
   it('should toggle popover when split button with items is clicked', async () => {
     const user = userEvent.setup();
     const splitButtonPropsWithItems = {