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

Author: logonoff

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