Fix click issue with topology context menu

openshift · Aug 31, 2021 · 52872c8 · 52872c8
1 parent 600a63c
commit 52872c8
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 58 deletions.
diff --git a/frontend/packages/console-shared/src/components/actions/menu/ActionMenuItem.tsx b/frontend/packages/console-shared/src/components/actions/menu/ActionMenuItem.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { KEY_CODES, MenuItem, Tooltip } from '@patternfly/react-core';
+import {
+  KEY_CODES,
+  MenuItem,
+  Tooltip,
+  DropdownItemProps,
+  MenuItemProps,
+} from '@patternfly/react-core';
 import * as classNames from 'classnames';
 import * as _ from 'lodash';
 import { connect } from 'react-redux';
@@ -9,6 +15,7 @@ import { impersonateStateToProps } from '@console/internal/reducers/ui';
 
 export type ActionMenuItemProps = {
   action: Action;
+  component?: React.ComponentType<MenuItemProps | DropdownItemProps>;
   autoFocus?: boolean;
   onClick?: () => void;
   onEscape?: () => void;
@@ -20,6 +27,7 @@ const ActionItem: React.FC<ActionMenuItemProps & { isAllowed: boolean }> = ({
   onEscape,
   autoFocus,
   isAllowed,
+  component,
 }) => {
   const { label, icon, disabled, cta } = action;
   const { href, external } = cta as { href: string; external?: boolean };
@@ -50,21 +58,27 @@ const ActionItem: React.FC<ActionMenuItemProps & { isAllowed: boolean }> = ({
       handleClick(event);
     }
   };
+  const Component = component ?? MenuItem;
+
+  const props = {
+    icon,
+    autoFocus,
+    isDisabled,
+    className: classes,
+    onClick: handleClick,
+    'data-test-action': label,
+  };
+
+  const extraProps = {
+    onKeyDown: handleKeyDown,
+    tabIndex: 0, // Override PF tabIndex -1 to make action items tabbable
+    ...(external ? { to: href, isExternalLink: external } : {}),
+  };
 
   return (
-    <MenuItem
-      className={classes}
-      icon={icon}
-      autoFocus={autoFocus}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-      isDisabled={isDisabled}
-      data-test-action={label}
-      tabIndex={0} // Override PF tabIndex -1 to make action items tabbable
-      {...(external ? { to: href, isExternalLink: external } : {})}
-    >
+    <Component {...props} {...(component ? {} : extraProps)}>
       {label}
-    </MenuItem>
+    </Component>
   );
 };
 

diff --git a/frontend/packages/topology/src/actions/contextMenuActions.tsx b/frontend/packages/topology/src/actions/contextMenuActions.tsx
@@ -1,7 +1,41 @@
 import * as React from 'react';
-import { Node } from '@patternfly/react-topology';
-import { ActionServiceProvider } from '@console/shared';
-import { createContextMenuItems } from '../components/graph-view';
+import { Node, ContextSubMenuItem, ContextMenuItem } from '@patternfly/react-topology';
+import { Action } from '@console/dynamic-plugin-sdk/src';
+import {
+  ActionServiceProvider,
+  getMenuOptionType,
+  GroupedMenuOption,
+  MenuOption,
+  MenuOptionType,
+  orderExtensionBasedOnInsertBeforeAndAfter,
+} from '@console/shared';
+import ActionMenuItem from '@console/shared/src/components/actions/menu/ActionMenuItem';
+
+export const createContextMenuItems = (actions: MenuOption[]) => {
+  const sortedOptions = orderExtensionBasedOnInsertBeforeAndAfter(actions);
+  return sortedOptions.map((option: MenuOption) => {
+    const optionType = getMenuOptionType(option);
+    switch (optionType) {
+      case MenuOptionType.SUB_MENU:
+        return (
+          <ContextSubMenuItem label={option.label} key={option.id}>
+            {createContextMenuItems((option as GroupedMenuOption).children)}
+          </ContextSubMenuItem>
+        );
+      case MenuOptionType.GROUP_MENU:
+        return (
+          <React.Fragment key={option.id}>
+            {option.label && <h1 className="pf-c-dropdown__group-title">{option.label}</h1>}
+            {createContextMenuItems((option as GroupedMenuOption).children)}
+          </React.Fragment>
+        );
+      default:
+        return (
+          <ActionMenuItem key={option.id} action={option as Action} component={ContextMenuItem} />
+        );
+    }
+  });
+};
 
 export const contextMenuActions = (element: Node): React.ReactElement[] => {
   return [

diff --git a/frontend/packages/topology/src/components/graph-view/components/nodeContextMenu.tsx b/frontend/packages/topology/src/components/graph-view/components/nodeContextMenu.tsx
@@ -7,7 +7,6 @@ import {
   isGraph,
 } from '@patternfly/react-topology';
 import i18next from 'i18next';
-import { Action } from '@console/dynamic-plugin-sdk/src';
 import {
   history,
   KebabItem,
@@ -16,14 +15,6 @@ import {
   kebabOptionsToMenu,
   isKebabSubMenu,
 } from '@console/internal/components/utils';
-import {
-  getMenuOptionType,
-  GroupedMenuOption,
-  MenuOption,
-  MenuOptionType,
-  orderExtensionBasedOnInsertBeforeAndAfter,
-} from '@console/shared';
-import ActionMenuItem from '@console/shared/src/components/actions/menu/ActionMenuItem';
 import { graphActions } from '../../../actions/graphActions';
 import { groupActions } from '../../../actions/groupActions';
 import { workloadActions } from '../../../actions/workloadActions';
@@ -60,39 +51,6 @@ export const createMenuItems = (actions: KebabMenuOption[]) =>
     ),
   );
 
-export const createContextMenuItems = (actions: MenuOption[]) => {
-  const sortedOptions = orderExtensionBasedOnInsertBeforeAndAfter(actions);
-  return sortedOptions.map((option: MenuOption) => {
-    const optionType = getMenuOptionType(option);
-    switch (optionType) {
-      case MenuOptionType.SUB_MENU:
-        return (
-          <ContextSubMenuItem label={option.label} key={option.id}>
-            {createContextMenuItems((option as GroupedMenuOption).children)}
-          </ContextSubMenuItem>
-        );
-      case MenuOptionType.GROUP_MENU:
-        return (
-          <>
-            <div className="pf-c-dropdown__group-title">{option.label}</div>
-            {createContextMenuItems((option as GroupedMenuOption).children)}
-          </>
-        );
-      default:
-        return (
-          <ContextMenuItem
-            key={option.id}
-            component={
-              <div className="pf-c-dropdown__menu-item">
-                <ActionMenuItem action={option as Action} />
-              </div>
-            }
-          />
-        );
-    }
-  });
-};
-
 export const workloadContextMenu = (element: Node) =>
   createMenuItems(
     kebabOptionsToMenu(