[App Menu Standardization] New way to register app menu

.github/CODEOWNERS

@@ -126,6 +126,8 @@ src/core/packages/capabilities/common @elastic/kibana-core
 src/core/packages/capabilities/server @elastic/kibana-core
 src/core/packages/capabilities/server-internal @elastic/kibana-core
 src/core/packages/capabilities/server-mocks @elastic/kibana-core
+src/core/packages/chrome/app-menu/core-chrome-app-menu @elastic/appex-sharedux
+src/core/packages/chrome/app-menu/core-chrome-app-menu-components @elastic/appex-sharedux
 src/core/packages/chrome/browser @elastic/appex-sharedux
 src/core/packages/chrome/browser-internal @elastic/appex-sharedux
 src/core/packages/chrome/browser-mocks @elastic/appex-sharedux

package.json

@@ -308,6 +308,8 @@
     "@kbn/core-capabilities-common": "link:src/core/packages/capabilities/common",
     "@kbn/core-capabilities-server": "link:src/core/packages/capabilities/server",
     "@kbn/core-capabilities-server-internal": "link:src/core/packages/capabilities/server-internal",
+    "@kbn/core-chrome-app-menu": "link:src/core/packages/chrome/app-menu/core-chrome-app-menu",
+    "@kbn/core-chrome-app-menu-components": "link:src/core/packages/chrome/app-menu/core-chrome-app-menu-components",
     "@kbn/core-chrome-browser": "link:src/core/packages/chrome/browser",
     "@kbn/core-chrome-browser-internal": "link:src/core/packages/chrome/browser-internal",
     "@kbn/core-chrome-layout": "link:src/core/packages/chrome/layout/core-chrome-layout",

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/README.md

@@ -0,0 +1,18 @@
+# AppMenuComponent
+
+`AppMenuComponent` is the standalone component used in chrome app menu.
+
+## Usage
+
+```tsx
+import React, { useEffect } from 'react';
+import { AppMenuComponent, type AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
+
+interface Props {
+  config: AppMenuConfig;
+}
+
+const Example = ({ config }: Props) => {
+  return <AppMenuComponent config={config} />;
+};
+```

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

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { AppMenuComponent } from './src';
+export { AppMenuItem } from './src';
+export { AppMenuActionButton } from './src';
+export { AppMenuOverflowButton } from './src';
+export { AppMenuPopover } from './src';
+export { AppMenuPopoverActionButtons } from './src';
+
+export type {
+  AppMenuConfig,
+  AppMenuItemType,
+  AppMenuSecondaryActionItem,
+  AppMenuPrimaryActionItem,
+  AppMenuPopoverItem,
+  AppMenuSplitButtonProps,
+} from './src';
+
+export {
+  APP_MENU_ITEM_LIMIT,
+  APP_MENU_NOTIFICATION_INDICATOR_LEFT,
+  APP_MENU_NOTIFICATION_INDICATOR_TOP,
+} from './src';
+
+export {
+  getDisplayedItemsAllowedAmount,
+  getShouldOverflow,
+  isDisabled,
+  getTooltip,
+  mapAppMenuItemToPanelItem,
+  getAppMenuItems,
+  getPopoverPanels,
+  getPopoverActionItems,
+  getIsSelectedColor,
+} from './src';

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/jest.config.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../../../..',
+  roots: ['<rootDir>/src/core/packages/chrome/app-menu/core-chrome-app-menu-components'],
+};

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/kibana.jsonc

@@ -0,0 +1,7 @@
+{
+  "type": "shared-browser",
+  "id": "@kbn/core-chrome-app-menu-components",
+  "owner": "@elastic/appex-sharedux",
+  "group": "platform",
+  "visibility": "shared"
+}

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/moon.yml

@@ -0,0 +1,47 @@
+# This file is generated by the @kbn/moon package. Any manual edits will be erased!
+#  To extend this, write your extensions/overrides to 'moon.extend.yml'
+#  then regenerate this file with: 'node scripts/regenerate_moon_projects.js --update --filter @kbn/core-chrome-app-menu-components'
+
+$schema: https://moonrepo.dev/schemas/project.json
+id: '@kbn/core-chrome-app-menu-components'
+type: unknown
+owners:
+  defaultOwner: '@elastic/appex-sharedux'
+toolchain:
+  default: node
+language: typescript
+project:
+  name: '@kbn/core-chrome-app-menu-components'
+  description: Moon project for @kbn/core-chrome-app-menu-components
+  channel: ''
+  owner: '@elastic/appex-sharedux'
+  metadata:
+    sourceRoot: src/core/packages/chrome/app-menu/core-chrome-app-menu-components
+dependsOn:
+  - '@kbn/split-button'
+  - '@kbn/i18n'
+tags:
+  - shared-browser
+  - package
+  - prod
+  - group-platform
+  - shared
+  - jest-unit-tests
+fileGroups:
+  src:
+    - '**/*.ts'
+    - '**/*.tsx'
+    - '!target/**/*'
+tasks:
+  jest:
+    args:
+      - '--config'
+      - $projectRoot/jest.config.js
+    inputs:
+      - '@group(src)'
+  jestCI:
+    args:
+      - '--config'
+      - $projectRoot/jest.config.js
+    inputs:
+      - '@group(src)'

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@kbn/core-chrome-app-menu-components",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
+  "sideEffects": false
+}

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

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import '@testing-library/jest-dom';

src/platform/plugins/shared/navigation/public/top_nav_menu_beta/top_nav_menu_beta.test.tsx → src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu.test.tsx

@@ -9,8 +9,8 @@
 
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { TopNavMenuBeta } from './top_nav_menu_beta';
-import type { TopNavMenuConfigBeta } from './types';
+import { AppMenuComponent } from './app_menu';
+import type { AppMenuConfig } from '../types';
 
 // Mock useIsWithinBreakpoints to control responsive behavior
 const mockUseIsWithinBreakpoints = jest.fn();
@@ -22,13 +22,13 @@ jest.mock('@elastic/eui', () => {
   };
 });
 
-describe('TopNavMenuBeta', () => {
+describe('AppMenu', () => {
   const defaultItems = [
     { id: 'item1', label: 'Item 1', run: jest.fn(), iconType: 'gear', order: 1 },
     { id: 'item2', label: 'Item 2', run: jest.fn(), iconType: 'search', order: 2 },
   ];
 
-  const defaultConfig: TopNavMenuConfigBeta = {
+  const defaultConfig: AppMenuConfig = {
     items: defaultItems,
   };
 
@@ -43,31 +43,31 @@ describe('TopNavMenuBeta', () => {
 
   describe('rendering', () => {
     it('should return null when config is undefined', () => {
-      const { container } = render(<TopNavMenuBeta config={undefined} />);
+      const { container } = render(<AppMenuComponent config={undefined} />);
 
       expect(container).toBeEmptyDOMElement();
     });
 
     it('should return null when config has no items', () => {
-      const { container } = render(<TopNavMenuBeta config={{}} />);
+      const { container } = render(<AppMenuComponent config={{}} />);
 
       expect(container).toBeEmptyDOMElement();
     });
 
     it('should return null when visible is false', () => {
-      const { container } = render(<TopNavMenuBeta config={defaultConfig} visible={false} />);
+      const { container } = render(<AppMenuComponent config={defaultConfig} visible={false} />);
 
       expect(container).toBeEmptyDOMElement();
     });
 
     it('should render the top nav menu when config has items', () => {
-      render(<TopNavMenuBeta config={defaultConfig} />);
+      render(<AppMenuComponent config={defaultConfig} />);
 
       expect(screen.getByTestId('top-nav')).toBeInTheDocument();
     });
 
     it('should render menu items at xl breakpoint', () => {
-      render(<TopNavMenuBeta config={defaultConfig} />);
+      render(<AppMenuComponent config={defaultConfig} />);
 
       expect(screen.getByText('Item 1')).toBeInTheDocument();
       expect(screen.getByText('Item 2')).toBeInTheDocument();
@@ -76,7 +76,7 @@ describe('TopNavMenuBeta', () => {
 
   describe('action items', () => {
     it('should render primary action item', () => {
-      const configWithPrimary: TopNavMenuConfigBeta = {
+      const configWithPrimary: AppMenuConfig = {
         primaryActionItem: {
           id: 'save',
           label: 'Save',
@@ -85,13 +85,13 @@ describe('TopNavMenuBeta', () => {
         },
       };
 
-      render(<TopNavMenuBeta config={configWithPrimary} />);
+      render(<AppMenuComponent config={configWithPrimary} />);
 
       expect(screen.getByText('Save')).toBeInTheDocument();
     });
 
     it('should render secondary action item', () => {
-      const configWithSecondary: TopNavMenuConfigBeta = {
+      const configWithSecondary: AppMenuConfig = {
         secondaryActionItem: {
           id: 'cancel',
           label: 'Cancel',
@@ -100,13 +100,13 @@ describe('TopNavMenuBeta', () => {
         },
       };
 
-      render(<TopNavMenuBeta config={configWithSecondary} />);
+      render(<AppMenuComponent config={configWithSecondary} />);
 
       expect(screen.getByText('Cancel')).toBeInTheDocument();
     });
 
     it('should render both primary and secondary action items', () => {
-      const configWithBoth: TopNavMenuConfigBeta = {
+      const configWithBoth: AppMenuConfig = {
         primaryActionItem: {
           id: 'save',
           label: 'Save',
@@ -121,7 +121,7 @@ describe('TopNavMenuBeta', () => {
         },
       };
 
-      render(<TopNavMenuBeta config={configWithBoth} />);
+      render(<AppMenuComponent config={configWithBoth} />);
 
       expect(screen.getByText('Save')).toBeInTheDocument();
       expect(screen.getByText('Cancel')).toBeInTheDocument();
@@ -135,15 +135,15 @@ describe('TopNavMenuBeta', () => {
         return false;
       });
 
-      render(<TopNavMenuBeta config={defaultConfig} />);
+      render(<AppMenuComponent config={defaultConfig} />);
 
       expect(screen.getByTestId('top-nav-menu-overflow-button')).toBeInTheDocument();
     });
 
     it('should render overflow button with all items at small breakpoint', () => {
       mockUseIsWithinBreakpoints.mockReturnValue(false);
 
-      render(<TopNavMenuBeta config={defaultConfig} />);
+      render(<AppMenuComponent config={defaultConfig} />);
 
       expect(screen.getByTestId('top-nav-menu-overflow-button')).toBeInTheDocument();
     });
@@ -154,7 +154,7 @@ describe('TopNavMenuBeta', () => {
         return false;
       });
 
-      render(<TopNavMenuBeta config={defaultConfig} />);
+      render(<AppMenuComponent config={defaultConfig} />);
 
       expect(screen.getByText('Item 1')).toBeInTheDocument();
       expect(screen.getByText('Item 2')).toBeInTheDocument();