Add show more button base

Author: kowalczyk-krzysztof

src/platform/plugins/shared/navigation/public/top_nav_menu/create_top_nav_menu.tsx

@@ -53,8 +53,6 @@ export function createTopNav(
                     .primaryActionItem,
                   secondaryActionItem: (props.config as TopNavMenuPropsBeta<QT>['config'])!
                     .secondaryActionItem,
-                  enableShowMoreButton: (props.config as TopNavMenuPropsBeta<QT>['config'])!
-                    .enableShowMoreButton,
                 }
               : { items: relevantConfig }
           }

src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu_data.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { EuiButtonProps, EuiBetaBadgeProps, IconType, EuiButtonColor } from '@elastic/eui';
+import type { EuiButtonProps, EuiBetaBadgeProps, IconType } from '@elastic/eui';
 import type { InjectedIntl } from '@kbn/i18n-react';
 import type { SplitButtonProps } from '@kbn/split-button';
 
@@ -42,47 +42,3 @@ export interface TopNavMenuData {
 export interface RegisteredTopNavMenuData extends TopNavMenuData {
   appName?: string;
 }
-
-export type TopNavMenuSplitButtonProps = Pick<
-  SplitButtonProps,
-  | 'isMainButtonLoading'
-  | 'isMainButtonDisabled'
-  | 'isSecondaryButtonLoading'
-  | 'isSecondaryButtonDisabled'
-  | 'secondaryButtonAriaLabel'
-  | 'secondaryButtonTitle'
-  | 'iconType'
-> & {
-  run: TopNavMenuAction;
-};
-
-export interface TopNavMenuItemCommonBeta {
-  id?: string;
-  htmlId?: string;
-  label: string;
-  run: TopNavMenuAction;
-  testId?: string;
-  disableButton?: boolean | (() => boolean);
-  isLoading?: boolean;
-  target?: string;
-  href?: string;
-  iconType?: IconType;
-}
-
-export type TopNavMenuItemBeta = TopNavMenuItemCommonBeta;
-
-export interface TopNavMenuActionItemBeta extends TopNavMenuItemCommonBeta {
-  splitButtonProps?: TopNavMenuSplitButtonProps;
-  color?: EuiButtonColor;
-}
-
-export interface TopNavMenuDataBeta {
-  items: TopNavMenuItemBeta[];
-  enableShowMoreButton?: boolean;
-  secondaryActionItem?: TopNavMenuActionItemBeta;
-  primaryActionItem?: TopNavMenuActionItemBeta;
-}
-
-export interface RegisteredTopNavMenuDataBeta extends TopNavMenuItemBeta {
-  appName?: string;
-}

src/platform/plugins/shared/navigation/public/top_nav_menu_beta/constants.ts

@@ -0,0 +1,10 @@
+/*
+ * 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 const TOP_NAV_MENU_ITEM_LIMIT = 5;

src/platform/plugins/shared/navigation/public/top_nav_menu_beta/index.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 { TopNavMenuItemsBeta } from './top_nav_menu_items_beta';
+export { TopNavMenuActionButton } from './top_nav_menu_action_button';
+export { TopNavMenuItemBeta } from './top_nav_menu_item_beta';
+export { TopNavMenuShowMoreButton } from './top_nav_menu_show_more_button';
+
+export type {
+  TopNavMenuSplitButtonProps,
+  TopNavMenuItemBetaType,
+  TopNavMenuActionItemBeta,
+  TopNavMenuSecondaryActionItemBeta,
+  TopNavMenuPrimaryActionItemBeta,
+  TopNavMenuConfigBeta,
+  RegisteredTopNavMenuDataBeta,
+} from './types';
+
+export { TOP_NAV_MENU_ITEM_LIMIT } from './constants';
+export { getTopNavItems, isDisabled, getTooltip } from './utils';

src/platform/plugins/shared/navigation/public/top_nav_menu_beta/top_nav_menu_action_button.test.tsx

@@ -17,11 +17,13 @@ describe('TopNavMenuActionButton', () => {
     label: 'save',
     run: jest.fn(),
     closePopover: jest.fn(),
+    iconType: 'save',
   };
 
   const splitButtonProps = {
     run: jest.fn(),
     secondaryButtonAriaLabel: 'More options',
+    secondaryButtonIcon: 'arrowDown',
   };
 
   beforeEach(() => {

src/platform/plugins/shared/navigation/public/top_nav_menu_beta/top_nav_menu_action_button.tsx

@@ -9,38 +9,46 @@
 
 import React from 'react';
 import { SplitButton } from '@kbn/split-button';
-import { isFunction, upperFirst } from 'lodash';
+import { upperFirst } from 'lodash';
 import type { MouseEvent } from 'react';
-import { EuiButton } from '@elastic/eui';
-import type { TopNavMenuActionItemBeta } from '../top_nav_menu/top_nav_menu_data';
+import { EuiButton, EuiToolTip } from '@elastic/eui';
+import { getTooltip, isDisabled } from './utils';
+import type {
+  TopNavMenuPrimaryActionItemBeta,
+  TopNavMenuSecondaryActionItemBeta,
+  TopNavMenuSplitButtonProps,
+} from './types';
 
-interface TopNavMenuActionButtonProps extends TopNavMenuActionItemBeta {
+type TopNavMenuActionButtonProps = (
+  | TopNavMenuPrimaryActionItemBeta
+  | TopNavMenuSecondaryActionItemBeta
+) & {
   closePopover: () => void;
   isMobileMenu?: boolean;
-}
+};
 
-export const TopNavMenuActionButton = ({
-  run,
-  htmlId,
-  label,
-  testId,
-  iconType,
-  disableButton,
-  href,
-  target,
-  isLoading,
-  color,
-  splitButtonProps,
-  isMobileMenu,
-  closePopover,
-}: TopNavMenuActionButtonProps) => {
+export const TopNavMenuActionButton = (props: TopNavMenuActionButtonProps) => {
+  const {
+    run,
+    htmlId,
+    label,
+    testId,
+    iconType,
+    disableButton,
+    href,
+    target,
+    isLoading,
+    isMobileMenu,
+    tooltip,
+    closePopover,
+  } = props;
   const itemText = upperFirst(label);
-  const { run: splitButtonRun, ...otherSplitButtonProps } = splitButtonProps ?? {};
 
-  const isDisabled = () => Boolean(isFunction(disableButton) ? disableButton() : disableButton);
+  const splitButtonProps = 'splitButtonProps' in props ? props.splitButtonProps : undefined;
+  const colorProp = 'color' in props ? props.color : undefined;
 
   const handleClick = (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
-    if (isDisabled()) return;
+    if (isDisabled(disableButton)) return;
 
     run(e.currentTarget);
 
@@ -52,7 +60,7 @@ export const TopNavMenuActionButton = ({
   const handleSecondaryButtonClick = (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
     if (splitButtonProps?.isSecondaryButtonDisabled) return;
 
-    splitButtonRun?.(event.currentTarget);
+    splitButtonProps?.run?.(event.currentTarget);
 
     if (isMobileMenu) {
       closePopover();
@@ -64,33 +72,36 @@ export const TopNavMenuActionButton = ({
     id: htmlId,
     'data-test-subj': testId,
     iconType,
-    isDisabled: isDisabled(),
+    isDisabled: isDisabled(disableButton),
     href,
     target: href ? target : undefined,
     isLoading,
-    color,
     size: 's' as const,
     iconSize: 'm' as const,
-    fill: false,
+    fullWidth: isMobileMenu,
   };
 
-  if (splitButtonProps) {
-    return (
-      <SplitButton
-        {...otherSplitButtonProps}
-        {...commonProps}
-        secondaryButtonFill={false}
-        onSecondaryButtonClick={handleSecondaryButtonClick}
-        secondaryButtonIcon="arrowDown"
-      >
-        {itemText}
-      </SplitButton>
-    );
-  }
-
-  return (
-    <EuiButton {...commonProps} iconSide="left">
+  const button = splitButtonProps ? (
+    <SplitButton
+      {...(splitButtonProps as TopNavMenuSplitButtonProps)}
+      {...commonProps}
+      secondaryButtonFill={false}
+      onSecondaryButtonClick={handleSecondaryButtonClick}
+      color="text"
+    >
+      {itemText}
+    </SplitButton>
+  ) : (
+    <EuiButton {...commonProps} iconSide="left" color={colorProp}>
       {itemText}
     </EuiButton>
   );
+
+  const tooltipContent = getTooltip(tooltip);
+
+  if (tooltipContent) {
+    return <EuiToolTip content={tooltipContent}>{button}</EuiToolTip>;
+  }
+
+  return button;
 };