AppMenu changes for DnD

Author: kowalczyk-krzysztof

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 = {