Add export handling funcionality

kowalczyk-krzysztof · kowalczyk-krzysztof · commit 1772b5ee8cf9 · 2026-01-11T21:40:32.000+01:00
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu.test.tsx b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu.test.tsx
@@ -63,7 +63,7 @@ describe('AppMenu', () => {
     it('should render the top nav menu when config has items', () => {
       render(<AppMenuComponent config={defaultConfig} />);
 
-      expect(screen.getByTestId('top-nav')).toBeInTheDocument();
+      expect(screen.getByTestId('app-menu')).toBeInTheDocument();
     });
 
     it('should render menu items at xl breakpoint', () => {
@@ -137,15 +137,15 @@ describe('AppMenu', () => {
 
       render(<AppMenuComponent config={defaultConfig} />);
 
-      expect(screen.getByTestId('top-nav-menu-overflow-button')).toBeInTheDocument();
+      expect(screen.getByTestId('app-menu-overflow-button')).toBeInTheDocument();
     });
 
     it('should render overflow button with all items at small breakpoint', () => {
       mockUseIsWithinBreakpoints.mockReturnValue(false);
 
       render(<AppMenuComponent config={defaultConfig} />);
 
-      expect(screen.getByTestId('top-nav-menu-overflow-button')).toBeInTheDocument();
+      expect(screen.getByTestId('app-menu-overflow-button')).toBeInTheDocument();
     });
 
     it('should render individual menu items at xl breakpoint', () => {
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu.tsx b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu.tsx
@@ -37,7 +37,7 @@ export const AppMenuComponent = ({ config, visible = true }: AppMenuItemsProps)
   const showMoreButtonId = 'show-more';
 
   const headerLinksProps = {
-    'data-test-subj': 'top-nav',
+    'data-test-subj': 'app-menu',
     gutterSize: 'xs' as const,
     popoverBreakpoints: 'none' as const,
     className: 'kbnTopNavMenu__wrapper',
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_action_button.tsx b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_action_button.tsx
@@ -100,7 +100,7 @@ export const AppMenuActionButton = (props: AppMenuActionButtonProps) => {
   const commonProps = {
     onClick: href ? undefined : handleClick,
     id: htmlId,
-    'data-test-subj': testId || `top-nav-menu-action-button-${id}`,
+    'data-test-subj': testId || `app-menu-action-button-${id}`,
     iconType,
     isDisabled: isDisabled(disableButton),
     href,
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_item.tsx b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_item.tsx
@@ -74,7 +74,7 @@ export const AppMenuItem = ({
       <EuiHeaderLink
         onClick={href ? undefined : handleClick}
         id={htmlId}
-        data-test-subj={testId || `top-nav-menu-item-${id}`}
+        data-test-subj={testId || `app-menu-item-${id}`}
         iconType={iconType}
         isDisabled={isDisabled(disableButton)}
         href={href}
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_overflow_button.test.tsx b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_overflow_button.test.tsx
@@ -32,14 +32,14 @@ describe('AppMenuOverflowButton', () => {
   it('should render the overflow button', () => {
     render(<AppMenuOverflowButton {...defaultProps} />);
 
-    expect(screen.getByTestId('top-nav-menu-overflow-button')).toBeInTheDocument();
+    expect(screen.getByTestId('app-menu-overflow-button')).toBeInTheDocument();
   });
 
   it('should call onPopoverToggle when clicked', async () => {
     const user = userEvent.setup();
     render(<AppMenuOverflowButton {...defaultProps} />);
 
-    await user.click(screen.getByTestId('top-nav-menu-overflow-button'));
+    await user.click(screen.getByTestId('app-menu-overflow-button'));
 
     expect(defaultProps.onPopoverToggle).toHaveBeenCalledTimes(1);
   });
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_overflow_button.tsx b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_overflow_button.tsx
@@ -68,7 +68,7 @@ export const AppMenuOverflowButton = ({
       onClick={handleClick}
       isSelected={isPopoverOpen}
       css={buttonCss}
-      data-test-subj="top-nav-menu-overflow-button"
+      data-test-subj="app-menu-overflow-button"
     />
   );
 
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_popover.tsx b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_popover.tsx
@@ -45,8 +45,8 @@ export const AppMenuPopover = ({
   onClose,
 }: AppMenuContextMenuProps) => {
   const panels = useMemo(
-    () => getPopoverPanels({ items, primaryActionItem, secondaryActionItem }),
-    [items, primaryActionItem, secondaryActionItem]
+    () => getPopoverPanels({ items, primaryActionItem, secondaryActionItem, onClose }),
+    [items, primaryActionItem, secondaryActionItem, onClose]
   );
 
   if (panels.length === 0) {
@@ -66,7 +66,7 @@ export const AppMenuPopover = ({
 
   return (
     <EuiPopover
-      data-test-subj={testId || 'top-nav-menu-popover'}
+      data-test-subj={testId || 'app-menu-popover'}
       button={button}
       isOpen={isOpen}
       closePopover={onClose}
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_popover_action_buttons.test.tsx b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_popover_action_buttons.test.tsx
@@ -39,13 +39,13 @@ describe('AppMenuPopoverActionButtons', () => {
   it('should render container when primary action item is provided', () => {
     render(<AppMenuPopoverActionButtons primaryActionItem={primaryActionItem} />);
 
-    expect(screen.getByTestId('top-nav-menu-popover-action-buttons-container')).toBeInTheDocument();
+    expect(screen.getByTestId('app-menu-popover-action-buttons-container')).toBeInTheDocument();
   });
 
   it('should render container when secondary action item is provided', () => {
     render(<AppMenuPopoverActionButtons secondaryActionItem={secondaryActionItem} />);
 
-    expect(screen.getByTestId('top-nav-menu-popover-action-buttons-container')).toBeInTheDocument();
+    expect(screen.getByTestId('app-menu-popover-action-buttons-container')).toBeInTheDocument();
   });
 
   it('should render primary action button', () => {
@@ -80,7 +80,7 @@ describe('AppMenuPopoverActionButtons', () => {
       />
     );
 
-    const container = screen.getByTestId('top-nav-menu-popover-action-buttons-container');
+    const container = screen.getByTestId('app-menu-popover-action-buttons-container');
     const buttons = container.querySelectorAll('button');
 
     // Secondary should come first, then primary
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_popover_action_buttons.tsx b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_popover_action_buttons.tsx
@@ -49,7 +49,7 @@ export const AppMenuPopoverActionButtons = ({
       gutterSize="m"
       alignItems="center"
       css={containerCss}
-      data-test-subj="top-nav-menu-popover-action-buttons-container"
+      data-test-subj="app-menu-popover-action-buttons-container"
     >
       {secondaryActionItem && (
         <EuiFlexItem grow={false}>
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/types.ts b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/types.ts
@@ -160,7 +160,7 @@ export type AppMenuPopoverItem = Omit<AppMenuItemType, 'iconType' | 'hidden' | '
   /**
    * Adds a separator line above or below the item in the popover menu.
    */
-  seperator?: 'above' | 'below';
+  separator?: 'above' | 'below';
 };
 
 /**
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/utils.test.tsx b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/utils.test.tsx
@@ -407,9 +407,9 @@ describe('utils', () => {
       expect(childPanel?.title).toBe('Parent');
     });
 
-    it('should add separator above item when seperator is "above"', () => {
+    it('should add separator above item when separator is "above"', () => {
       const items: AppMenuPopoverItem[] = [
-        { id: '1', label: 'Item 1', run: jest.fn(), order: 1, seperator: 'above' },
+        { id: '1', label: 'Item 1', run: jest.fn(), order: 1, separator: 'above' },
       ];
 
       const result = getPopoverPanels({ items });
@@ -419,9 +419,9 @@ describe('utils', () => {
       expect(panelItems[0].key).toBe('separator-1');
     });
 
-    it('should add separator below item when seperator is "below"', () => {
+    it('should add separator below item when separator is "below"', () => {
       const items: AppMenuPopoverItem[] = [
-        { id: '1', label: 'Item 1', run: jest.fn(), order: 1, seperator: 'below' },
+        { id: '1', label: 'Item 1', run: jest.fn(), order: 1, separator: 'below' },
       ];
 
       const result = getPopoverPanels({ items });
diff --git a/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/utils.tsx b/src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/utils.tsx
@@ -108,7 +108,8 @@ export const getTooltip = ({
 
 export const mapAppMenuItemToPanelItem = (
   item: AppMenuPopoverItem,
-  childPanelId?: number
+  childPanelId?: number,
+  onClose?: () => void
 ): EuiContextMenuPanelItemDescriptor => {
   const { content, title } = getTooltip({
     tooltipContent: item?.tooltipContent,
@@ -119,7 +120,15 @@ export const mapAppMenuItemToPanelItem = (
     if (isDisabled(item?.disableButton)) {
       return;
     }
+
+    const shouldClosePopover =
+      !item?.href && childPanelId === undefined && item.run?.length === 0 && onClose;
+
     item.run?.();
+
+    if (shouldClosePopover) {
+      onClose();
+    }
   };
 
   return {
@@ -175,10 +184,10 @@ export const getPopoverActionItems = ({
     return [];
   }
 
-  const seperator = createSeparatorItem('action-items-separator');
+  const separator = createSeparatorItem('action-items-separator');
 
   return [
-    seperator,
+    separator,
     {
       key: 'action-items',
       renderItem: () => (
@@ -199,11 +208,13 @@ export const getPopoverPanels = ({
   primaryActionItem,
   secondaryActionItem,
   startPanelId = 0,
+  onClose,
 }: {
   items: AppMenuPopoverItem[];
   primaryActionItem?: AppMenuPrimaryActionItem;
   secondaryActionItem?: AppMenuSecondaryActionItem;
   startPanelId?: number;
+  onClose?: () => void;
 }): EuiContextMenuPanelDescriptor[] => {
   const panels: EuiContextMenuPanelDescriptor[] = [];
   const hasActionItems = Boolean(primaryActionItem || secondaryActionItem);
@@ -217,7 +228,7 @@ export const getPopoverPanels = ({
     const panelItems: EuiContextMenuPanelItemDescriptor[] = [];
 
     itemsToProcess.forEach((item) => {
-      if (item.seperator === 'above') {
+      if (item.separator === 'above') {
         panelItems.push(createSeparatorItem(`separator-${item.id}`));
       }
 
@@ -226,12 +237,12 @@ export const getPopoverPanels = ({
         const childPanelId = currentPanelId;
 
         processItems(item.items, childPanelId, item.label);
-        panelItems.push(mapAppMenuItemToPanelItem(item, childPanelId));
+        panelItems.push(mapAppMenuItemToPanelItem(item, childPanelId, onClose));
       } else {
-        panelItems.push(mapAppMenuItemToPanelItem(item));
+        panelItems.push(mapAppMenuItemToPanelItem(item, undefined, onClose));
       }
 
-      if (item.seperator === 'below') {
+      if (item.separator === 'below') {
         panelItems.push(createSeparatorItem(`separator-${item.id}`));
       }
     });
diff --git a/src/platform/packages/private/shared-ux/storybook/config/app_menu.stories.tsx b/src/platform/packages/private/shared-ux/storybook/config/app_menu.stories.tsx
@@ -315,7 +315,7 @@ const dashboardEditModeConfig: AppMenuConfig = {
             order: 4,
             label: 'settings',
             testId: 'settingButton',
-            seperator: 'above',
+            separator: 'above',
           },
         ],
       },
diff --git a/src/platform/plugins/shared/share/public/components/export_integrations/export_integrations.tsx b/src/platform/plugins/shared/share/public/components/export_integrations/export_integrations.tsx
@@ -59,7 +59,7 @@ interface LayoutOptionsProps {
   printLayoutChange: (evt: EuiSwitchEvent) => void;
 }
 
-interface ManagedFlyoutProps {
+export interface ManagedFlyoutProps {
   exportIntegration: ExportShareConfig;
   intl: InjectedIntl;
   isDirty: boolean;
diff --git a/src/platform/plugins/shared/share/public/components/export_integrations/index.ts b/src/platform/plugins/shared/share/public/components/export_integrations/index.ts
@@ -7,4 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { ExportMenu } from './export_integrations';
+export { ExportMenu, ManagedFlyout, type ManagedFlyoutProps } from './export_integrations';
diff --git a/src/platform/plugins/shared/share/public/mocks.ts b/src/platform/plugins/shared/share/public/mocks.ts
@@ -55,6 +55,8 @@ const createStartContract = (): Start => {
     toggleShareContextMenu: jest.fn(),
     availableIntegrations: jest.fn(),
     navigate: jest.fn(),
+    getExportHandler: jest.fn(),
+    getExportDerivativeHandler: jest.fn(),
   };
   return startContract;
 };
diff --git a/src/platform/plugins/shared/share/public/services/share_menu_manager.mock.ts b/src/platform/plugins/shared/share/public/services/share_menu_manager.mock.ts
@@ -13,6 +13,10 @@ import type { ShareMenuManager, ShareMenuManagerStart } from './share_menu_manag
 const createStartMock = (): jest.Mocked<ShareMenuManagerStart> => {
   const start = {
     toggleShareContextMenu: jest.fn(),
+    availableIntegrations: jest.fn(),
+    navigate: jest.fn(),
+    getExportHandler: jest.fn(),
+    getExportDerivativeHandler: jest.fn(),
   };
   return start;
 };
diff --git a/src/platform/plugins/shared/share/public/services/share_menu_manager.tsx b/src/platform/plugins/shared/share/public/services/share_menu_manager.tsx

Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ export const AppMenuPopoverActionButtons = ({`
`49`	`49`	`gutterSize="m"`
`50`	`50`	`alignItems="center"`
`51`	`51`	`css={containerCss}`
`52`		`- data-test-subj="top-nav-menu-popover-action-buttons-container"`
	`52`	`+ data-test-subj="app-menu-popover-action-buttons-container"`
`53`	`53`	`>`
`54`	`54`	`{secondaryActionItem && (`
`55`	`55`	`<EuiFlexItem grow={false}>`