OCPBUGS-55896: Refactor Kebab+ActionsMenu to use PF

Author: logonoff

frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-builder/task-sidebar/TaskSidebarHeader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { ActionsMenu } from '@console/internal/components/utils';
+import { ActionsMenu } from '@console/internal/components/utils/actions-menu';
 import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
 import { TaskKind } from '../../../../types';
 import PipelineResourceRef from '../../../shared/common/PipelineResourceRef';

frontend/packages/topology/src/components/side-bar/TopologyEdgePanel.tsx

@@ -4,7 +4,8 @@
 import * as React from 'react';
 import { Edge, isNode, Node } from '@patternfly/react-topology';
 import { useTranslation } from 'react-i18next';
-import { ActionsMenu, SimpleTabNav } from '@console/internal/components/utils';
+import { SimpleTabNav } from '@console/internal/components/utils';
+import { ActionsMenu } from '@console/internal/components/utils/actions-menu';
 import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
 import { edgeActions } from '../../actions/edgeActions';
 import { TYPE_TRAFFIC_CONNECTOR } from '../../const';

frontend/public/components/utils/__tests__/kebab.spec.tsx

@@ -18,21 +18,21 @@ describe('KebabItem', () => {
     const nothingOption = { ...mockOption, href: undefined };
     const trackOnClick = jest.fn();
     const renderItem = render(<KebabItem onClick={trackOnClick} option={nothingOption} />);
-    fireEvent.click(renderItem.getByRole('button'));
+    fireEvent.click(renderItem.getByRole('menuitem'));
     expect(trackOnClick).toHaveBeenCalledTimes(0);
   });
   it('should enable when option has href', () => {
     const hrefOption = { ...mockOption };
     const trackOnClick = jest.fn();
     const renderItem = render(<KebabItem onClick={trackOnClick} option={hrefOption} />);
-    fireEvent.click(renderItem.getByRole('button'));
+    fireEvent.click(renderItem.getByRole('menuitem'));
     expect(trackOnClick).toHaveBeenCalledTimes(1);
   });
   it('should enable when option has a callback', () => {
     const callbackOption = { ...mockOption, href: undefined, callback: () => {} };
     const trackOnClick = jest.fn();
     const renderItem = render(<KebabItem onClick={trackOnClick} option={callbackOption} />);
-    fireEvent.click(renderItem.getByRole('button'));
+    fireEvent.click(renderItem.getByRole('menuitem'));
     expect(trackOnClick).toHaveBeenCalledTimes(1);
   });
 });
@@ -55,7 +55,7 @@ describe('KebabItemAccessReview_', () => {
         impersonate={mockImpersonate}
       />,
     );
-    fireEvent.click(renderItem.getByRole('button'));
+    fireEvent.click(renderItem.getByRole('menuitem'));
     expect(trackOnClick).toHaveBeenCalledTimes(0);
   });
   it('should enable option when option.accessReview present and allowed', () => {
@@ -69,7 +69,7 @@ describe('KebabItemAccessReview_', () => {
         impersonate={mockImpersonate}
       />,
     );
-    fireEvent.click(renderItem.getByRole('button'));
+    fireEvent.click(renderItem.getByRole('menuitem'));
     expect(trackOnClick).toHaveBeenCalledTimes(1);
   });
 });

frontend/public/components/utils/_kebab.scss

@@ -0,0 +1,93 @@
+import {
+  ImpersonateKind,
+  impersonateStateToProps,
+  useSafetyFirst,
+} from '@console/dynamic-plugin-sdk';
+import { 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 { checkAccess } from './rbac';
+
+type ActionsMenuProps = {
+  actions: KebabOption[];
+  title?: ReactNode;
+};
+
+const ActionsMenuDropdown = (props) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [active, setActive] = useState(!!props.active);
+
+  const onClick = (event, option) => {
+    event.preventDefault();
+
+    if (option.callback) {
+      option.callback();
+    }
+
+    if (option.href) {
+      navigate(option.href);
+    }
+
+    setActive(false);
+  };
+
+  return (
+    <Dropdown
+      isOpen={active}
+      onSelect={() => setActive(false)}
+      onOpenChange={setActive}
+      shouldFocusToggleOnSelect
+      popperProps={{
+        enableFlip: true,
+        position: 'right',
+      }}
+      toggle={(toggleRef: RefObject<MenuToggleElement>) => (
+        <MenuToggle ref={toggleRef} onClick={() => setActive(!active)} isExpanded={active}>
+          {props.title || t('public~Actions')}
+        </MenuToggle>
+      )}
+    >
+      <KebabItems options={props.actions} onClick={onClick} />
+    </Dropdown>
+  );
+};
+
+export const ActionsMenu: React.FCC<ActionsMenuProps> = connect(impersonateStateToProps)(
+  ({
+    actions,
+    impersonate,
+    title = undefined,
+  }: ActionsMenuProps & { impersonate?: ImpersonateKind }) => {
+    const [isVisible, setVisible] = useSafetyFirst(false);
+
+    // Check if any actions are visible when actions have access reviews.
+    useEffect(() => {
+      if (!actions.length) {
+        setVisible(false);
+        return;
+      }
+      const promises = actions.reduce((acc, action) => {
+        if (action.accessReview) {
+          acc.push(checkAccess(action.accessReview));
+        }
+        return acc;
+      }, []);
+
+      // Only need to resolve if all actions require access review
+      if (promises.length !== actions.length) {
+        setVisible(true);
+        return;
+      }
+      Promise.all(promises)
+        .then((results) => setVisible(some(results, 'status.allowed')))
+        .catch(() => setVisible(true));
+    }, [actions, impersonate, setVisible]);
+    return isVisible ? <ActionsMenuDropdown actions={actions} title={title} /> : null;
+  },
+);

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

@@ -2,18 +2,12 @@ import * as _ from 'lodash-es';
 import * as React from 'react';
 import classNames from 'classnames';
 import * as PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { useTranslation, withTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom-v5-compat';
-import { Divider, Popper, Title } from '@patternfly/react-core';
-import { impersonateStateToProps, useSafetyFirst } from '@console/dynamic-plugin-sdk';
 import { useUserSettingsCompatibility } from '@console/shared';
+import { Divider, Popper, Title } from '@patternfly/react-core';
 import { CaretDownIcon } from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { StarIcon } from '@patternfly/react-icons/dist/esm/icons/star-icon';
-
-import { checkAccess } from './rbac';
-import { KebabItems } from './kebab';
+import { withTranslation } from 'react-i18next';
 
 class DropdownMixin extends React.PureComponent {
   constructor(props) {
@@ -678,147 +672,3 @@ Dropdown.propTypes = {
   required: PropTypes.bool,
   dataTest: PropTypes.string,
 };
-
-const ActionsMenuDropdown = (props) => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const [active, setActive] = React.useState(!!props.active);
-
-  const dropdownElement = React.useRef();
-
-  const show = () => {
-    setActive(true);
-  };
-
-  const hide = (e) => {
-    e?.stopPropagation();
-    setActive(false);
-  };
-
-  const listener = React.useCallback(
-    (event) => {
-      if (!active) {
-        return;
-      }
-
-      const { current } = dropdownElement;
-      if (!current) {
-        return;
-      }
-
-      if (event.target === current || current.contains(event.target)) {
-        return;
-      }
-
-      hide(event);
-    },
-    [active, dropdownElement],
-  );
-
-  React.useEffect(() => {
-    if (active) {
-      window.addEventListener('click', listener);
-    } else {
-      window.removeEventListener('click', listener);
-    }
-    return () => {
-      window.removeEventListener('click', listener);
-    };
-  }, [active, listener]);
-
-  const toggle = (e) => {
-    e.preventDefault();
-
-    if (props.disabled) {
-      return;
-    }
-
-    if (active) {
-      hide(e);
-    } else {
-      show(e);
-    }
-  };
-
-  const onClick = (event, option) => {
-    event.preventDefault();
-
-    if (option.callback) {
-      option.callback();
-    }
-
-    if (option.href) {
-      navigate(option.href);
-    }
-
-    hide();
-  };
-
-  return (
-    <div ref={dropdownElement}>
-      <button
-        type="button"
-        aria-haspopup="true"
-        aria-label={t('public~Actions')}
-        aria-expanded={active}
-        className={classNames({
-          'pf-v6-c-menu-toggle': true,
-          'pf-m-expanded': active,
-        })}
-        onClick={toggle}
-        data-test-id="actions-menu-button"
-      >
-        <span className="pf-v6-c-menu__toggle-text">{props.title || t('public~Actions')}</span>
-        <CaretDownIcon />
-      </button>
-      {active && (
-        <div className="co-actions-menu dropdown-menu pf-v6-c-menu">
-          <KebabItems options={props.actions} onClick={onClick} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-const ActionsMenu_ = ({ actions, impersonate, title = undefined }) => {
-  const [isVisible, setVisible] = useSafetyFirst(false);
-
-  // Check if any actions are visible when actions have access reviews.
-  React.useEffect(() => {
-    if (!actions.length) {
-      setVisible(false);
-      return;
-    }
-    const promises = actions.reduce((acc, action) => {
-      if (action.accessReview) {
-        acc.push(checkAccess(action.accessReview));
-      }
-      return acc;
-    }, []);
-
-    // Only need to resolve if all actions require access review
-    if (promises.length !== actions.length) {
-      setVisible(true);
-      return;
-    }
-    Promise.all(promises)
-      .then((results) => setVisible(_.some(results, 'status.allowed')))
-      .catch(() => setVisible(true));
-  }, [actions, impersonate, setVisible]);
-  return isVisible ? <ActionsMenuDropdown actions={actions} title={title} /> : null;
-};
-
-export const ActionsMenu = connect(impersonateStateToProps)(ActionsMenu_);
-
-ActionsMenu.propTypes = {
-  actions: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.node,
-      labelKey: PropTypes.string,
-      href: PropTypes.string,
-      callback: PropTypes.func,
-      accessReview: PropTypes.object,
-    }),
-  ).isRequired,
-  title: PropTypes.node,
-};

frontend/public/components/utils/dropdown.jsx

@@ -8,9 +8,10 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { PageHeading, PageHeadingProps } from '@console/shared/src/components/heading/PageHeading';
+import { ActionsMenu } from '@console/internal/components/utils/actions-menu';
 import { connectToModel } from '../../kinds';
 import { K8sKind, K8sResourceKind, K8sResourceKindReference } from '../../module/k8s';
-import { ActionsMenu, FirehoseResult, KebabOption, ResourceIcon } from './index';
+import { FirehoseResult, KebabOption, ResourceIcon } from './index';
 import { ManagedByOperatorLink } from './managed-by';
 
 export const ResourceItemDeleting = () => {

frontend/public/components/utils/headings.tsx

@@ -53,7 +53,6 @@ export * from './dom-utils';
 export * from './owner-references';
 export { default } from './operator-backed-owner-references';
 export * from './field-level-help';
-export * from './single-typeahead-dropdown';
 export * from './details-item';
 export * from './types';
 export * from './release-notes-link';