Migrate Helm actions on topology to use the new extensions

frontend/packages/helm-plugin/src/topology/components/helmComponentFactory.ts

@@ -1,17 +1,15 @@
 import * as React from 'react';
 import {
-  Node,
   GraphElement,
   withDragNode,
   withSelection,
   withDndDrop,
   withCreateConnector,
 } from '@patternfly/react-topology';
-import { kebabOptionsToMenu } from '@console/internal/components/utils';
+import { contextMenuActions } from '@console/topology/src/actions/contextMenuActions';
 import {
   WorkloadNode,
   noRegroupWorkloadContextMenu,
-  createMenuItems,
   createConnectorCallback,
   NodeComponentProps,
   nodeDragSourceSpec,
@@ -21,21 +19,17 @@ import {
   CreateConnector,
 } from '@console/topology/src/components/graph-view';
 import { withEditReviewAccess } from '@console/topology/src/utils';
-import { helmReleaseActions } from '../actions/helmReleaseActions';
 import { TYPE_HELM_RELEASE, TYPE_HELM_WORKLOAD } from './const';
 import HelmRelease from './HelmRelease';
 
-export const helmReleaseContextMenu = (element: Node) =>
-  createMenuItems(kebabOptionsToMenu(helmReleaseActions(element)));
-
 export const getHelmComponentFactory = (
   kind,
   type,
 ): React.ComponentType<{ element: GraphElement }> | undefined => {
   switch (type) {
     case TYPE_HELM_RELEASE:
       return withSelection({ controlled: true })(
-        withContextMenu(helmReleaseContextMenu)(withNoDrop()(HelmRelease)),
+        withContextMenu(contextMenuActions)(withNoDrop()(HelmRelease)),
       );
     case TYPE_HELM_WORKLOAD:
       return withCreateConnector(

frontend/packages/topology/src/actions/contextMenuActions.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Node } from '@patternfly/react-topology';
+import { ActionsLoader } from '@console/shared';
+import { createContextMenuItems } from '../components/graph-view';
+
+export const contextMenuActions = (element: Node): React.ReactElement[] => {
+  return [
+    <ActionsLoader key="topology" contextId="topology-actions" scope={element}>
+      {(loader) => loader.loaded && createContextMenuItems(loader.options)}
+    </ActionsLoader>,
+  ];
+};

frontend/packages/topology/src/components/graph-view/components/nodeContextMenu.tsx

@@ -7,6 +7,7 @@ import {
   isGraph,
 } from '@patternfly/react-topology';
 import i18next from 'i18next';
+import { Action } from '@console/dynamic-plugin-sdk/src';
 import {
   history,
   KebabItem,
@@ -15,6 +16,14 @@ import {
   kebabOptionsToMenu,
   isKebabSubMenu,
 } from '@console/internal/components/utils';
+import {
+  GroupedMenuOption,
+  MenuOption,
+  MenuOptionType,
+  orderExtensionBasedOnInsertBeforeAndAfter,
+} from '@console/shared/src';
+import ActionMenuItem from '@console/shared/src/components/actions/menu/ActionMenuItem';
+import { getMenuOptionType } from '@console/shared/src/components/actions/menu/menu-utils';
 import { graphActions } from '../../../actions/graphActions';
 import { groupActions } from '../../../actions/groupActions';
 import { workloadActions } from '../../../actions/workloadActions';
@@ -51,6 +60,39 @@ 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(