Merge pull request #15636 from logonoff/OCPBUGS-63471-amenu-dropdown

OCPBUGS-63471: Render a button if there is 1 action

Author: openshift-merge-bot[bot]

frontend/packages/dev-console/integration-tests/features/customization/customization-of-pinned-resource.feature

@@ -13,26 +13,26 @@ Feature: Customization of pre-pinned resources
              When user navigates to Cluster configuration page
               And user clicks on Developer tab
              Then user should see Pre-pinned navigation items section
- 
+
         @regression @manual
         Scenario: When pre-pinned resources customization is not added: DC-02-TC02
             Given user is at "operator.openshift.io/v1" console details page
-              And user selects "Customize" in the Actions menu
+              And user clicks the "Customize" button in the page heading
               And user selects "Developer" tab in "Cluster configuration" page
              Then user should see default pins from extension under "Pinned Resources" in "Pre-pinned navigation items"
 
         @regression @manual
         Scenario: When resource is selected for pre-pinned navigation: DC-02-TC03
             Given user is at "operator.openshift.io/v1" console details page
-              And user selects "Customize" in the Actions menu
+              And user clicks the "Customize" button in the page heading
               And user selects "Developer" tab in "Cluster configuration" page
              When user selects "Deployment" under "Resources" and added to "Pinned Resources"
              Then user should see "Deployment" resource details in "operator.openshift.io/v1" console YAML under spec.customization.perspectives.id.pinnedResources for id 'dev'
- 
+
         @regression @manual
         Scenario: When resource is removed from pre-pinned navigation: DC-02-TC04
             Given user is at "operator.openshift.io/v1" console details page
-              And user selects "Customize" in the Actions menu
+              And user clicks the "Customize" button in the page heading
               And user selects "Developer" tab in "Cluster configuration" page
              When user selects "Deployment" under "Pinned Resources" and moved back "Resources"
              Then user should not see "Deployment" resource details in "operator.openshift.io/v1" console YAML under spec.customization.perspectives.id.pinnedResources for id 'dev'

frontend/packages/dev-console/integration-tests/features/e2e/enable-dev-perspective-ci.feature

@@ -6,15 +6,14 @@ Feature: Enable dev perspective
             Given user has only admin perspective enabled
               And user has logged in as admin user
 
- 
+
         Scenario: Enable dev perspective: P-01-TC04
             Given user is at admin perspective
               And user is at Search page in Home section
               And user searches "console"
               And user clicks on cluster
-              And user selects "Customize" from actions menu
+              And user clicks the "Customize" button in the page heading
               And user selects "Enabled" in the Developer under perspective section of general customisation
              Then user will see Saved alert
               And user refreshes the page to see developer option
               And user will see developer perspective in the perspective switcher
-

frontend/packages/dev-console/integration-tests/features/perspectives/configure-perspectives.feature

@@ -5,7 +5,7 @@ Feature: Configure perspectives
 
         Background:
             Given user has logged in as admin user
- 
+
         @regression @manual
         Scenario: Configuring available perspectives: P-01-TC01
             Given user is at cluster YAML of "operator.openshift.io/v1" console
@@ -45,9 +45,8 @@ Feature: Configure perspectives
               And user searches "console"
               And user clicks on cluster
             #   And user selects "operator.openshift.io" console
-              And user selects "Customize" from actions menu
+              And user clicks the "Customize" button in the page heading
               And user selects "Enabled" in the Developer under perspective section of general customisation
              Then user will see Saved alert
               And user refreshes the page to see developer option
               And user will see developer perspective in the perspective switcher
-

frontend/packages/dev-console/integration-tests/support/step-definitions/customization/configure-perspectives.ts

@@ -70,9 +70,8 @@ When('user clicks on cluster', () => {
   cy.byTestID('cluster').should('be.visible').click({ force: true });
 });
 
-When('user selects {string} from actions menu', (item: string) => {
-  cy.byLegacyTestID('actions-menu-button').should('be.visible').click();
-  cy.get(`[data-test-action="${item}"] button`).should('be.visible').click();
+When('user clicks the {string} button in the page heading', (item: string) => {
+  cy.get(`button[data-test-action="${item}"]`).should('be.visible').click();
   cy.get('[data-test="page-heading"] h1').should('have.text', 'Cluster configuration');
 });
 

frontend/public/components/utils/actions-menu.tsx

@@ -3,25 +3,31 @@ import {
   impersonateStateToProps,
   useSafetyFirst,
 } from '@console/dynamic-plugin-sdk';
-import { Dropdown, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import { Button, Dropdown, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 import { some } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { useNavigate } from 'react-router-dom-v5-compat';
 
 import { ReactNode, RefObject, useEffect, useState } from 'react';
-import { KebabItems, KebabOption } from './kebab';
+import { KebabItem, KebabItems, KebabOption } from './kebab';
 import { checkAccess } from './rbac';
 
 type ActionsMenuProps = {
   actions: KebabOption[];
   title?: ReactNode;
 };
 
-const ActionsMenuDropdown = (props) => {
+type ActionsMenuDropdownProps = {
+  actions: KebabOption[];
+  title?: ReactNode;
+  active?: boolean;
+};
+
+const ActionsMenuDropdown: React.FCC<ActionsMenuDropdownProps> = ({ actions, title, active }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const [active, setActive] = useState(!!props.active);
+  const [isActive, setIsActive] = useState(!!active);
 
   const onClick = (event, option) => {
     event.preventDefault();
@@ -34,14 +40,22 @@ const ActionsMenuDropdown = (props) => {
       navigate(option.href);
     }
 
-    setActive(false);
+    setIsActive(false);
   };
 
+  if (actions.length === 0) {
+    return null;
+  }
+
+  if (actions.length === 1) {
+    return <KebabItem option={actions[0]} onClick={onClick} Component={Button} />;
+  }
+
   return (
     <Dropdown
-      isOpen={active}
-      onSelect={() => setActive(false)}
-      onOpenChange={setActive}
+      isOpen={isActive}
+      onSelect={() => setIsActive(false)}
+      onOpenChange={setIsActive}
       shouldFocusToggleOnSelect
       popperProps={{
         enableFlip: true,
@@ -50,15 +64,15 @@ const ActionsMenuDropdown = (props) => {
       toggle={(toggleRef: RefObject<MenuToggleElement>) => (
         <MenuToggle
           ref={toggleRef}
-          onClick={() => setActive(!active)}
+          onClick={() => setIsActive(!active)}
           isExpanded={active}
           data-test-id="actions-menu-button"
         >
-          {props.title || t('public~Actions')}
+          {title || t('public~Actions')}
         </MenuToggle>
       )}
     >
-      <KebabItems options={props.actions} onClick={onClick} />
+      <KebabItems options={actions} onClick={onClick} />
     </Dropdown>
   );
 };

frontend/public/components/utils/kebab.tsx

@@ -88,19 +88,20 @@ const KebabItem_: React.FC<KebabItemProps & { isAllowed: boolean }> = ({
   onClick,
   autoFocus,
   isAllowed,
+  Component = DropdownItem,
 }) => {
   const { t } = useTranslation();
   const isDisabled = !isAllowed || option.isDisabled || (!option.href && !option.callback);
   return (
-    <DropdownItem
+    <Component
       onClick={(e) => !isDisabled && onClick(e, option)}
       autoFocus={autoFocus}
       isDisabled={isDisabled}
       data-test-action={option.labelKey ? t(option.labelKey, option.labelKind) : option.label}
       icon={option.icon}
     >
       {option.labelKey ? t(option.labelKey, option.labelKind) : option.label}
-    </DropdownItem>
+    </Component>
   );
 };
 export const KebabItemAccessReview_ = (
@@ -456,6 +457,12 @@ type KebabItemProps = {
   option: KebabOption;
   onClick: (event: React.MouseEvent<{}>, option: KebabOption) => void;
   autoFocus?: boolean;
+  Component?: React.ComponentType<
+    Pick<
+      React.ComponentProps<typeof DropdownItem>,
+      'onClick' | 'isDisabled' | 'autoFocus' | 'children' | 'icon'
+    >
+  >;
 };
 
 export type KebabItemsProps = {