Update AcmDropdown to use PatternFly v5 Menu Components - Policy Bulk actions menu

frontend/public/locales/en/translation.json

@@ -1170,7 +1170,6 @@
   "Details": "Details",
   "Difference for the": "Difference for the",
   "Disable kubectl validation": "Disable kubectl validation",
-  "Disable policies": "Disable policies",
   "Disable policy": "Disable policy",
   "disable.title": "Delete discovery settings",
   "disabled": "Disabled",
@@ -1284,15 +1283,13 @@
   "Enable external infrastructure to place virtual machines on an external infrastructure cluster. The Hosted Control Plane components will still be created on the hub cluster.": "Enable external infrastructure to place virtual machines on an external infrastructure cluster. The Hosted Control Plane components will still be created on the hub cluster.",
   "Enable Globalnet": "Enable Globalnet",
   "Enable Observability to see more metrics": "Enable Observability to see more metrics",
-  "Enable policies": "Enable policies",
   "Enable search to display application statuses properly.": "Enable search to display application statuses properly.",
   "Enable this option to instruct Submariner not to access any external servers for public IP resolution.": "Enable this option to instruct Submariner not to access any external servers for public IP resolution.",
   "Enable this option to use a custom Submariner subscription.": "Enable this option to use a custom Submariner subscription.",
   "enabled": "Enabled",
   "Enabled": "Enabled",
   "End time": "End time",
   "Enforce": "Enforce",
-  "Enforce policies": "Enforce policies",
   "Enforce policies at the target clusters using Kubernetes-supported custom resource definitions.": "Enforce policies at the target clusters using Kubernetes-supported custom resource definitions.",
   "Enforce/InformOnly": "Enforce/InformOnly",
   "Engine": "Engine",
@@ -1644,7 +1641,6 @@
   "Info": "Info",
   "Inform": "Inform",
   "Inform Only": "Inform Only",
-  "Inform policies": "Inform policies",
   "Inform/Enforce": "Inform/Enforce",
   "Inform/Enforce/InformOnly": "Inform/Enforce/InformOnly",
   "Inform/InformOnly": "Inform/InformOnly",
@@ -2209,7 +2205,6 @@
   "policy.modal.title.enable": "Enable policy",
   "policy.modal.title.enforce": "Enforce policy",
   "policy.modal.title.inform": "Inform policy",
-  "policy.table.actionGroup.remediation": "Remediation",
   "policy.table.actionGroup.status": "Status",
   "policy.table.actionGroup.status.disabled": "Disabled",
   "policy.table.actionGroup.status.enabled": "Enabled",

frontend/src/components/Rbac.tsx

@@ -2,44 +2,54 @@
 
 import { css } from '@emotion/css'
 import { createSubjectAccessReview, ResourceAttributes } from '../resources'
-import { AcmButton, AcmDropdown } from '../ui-components'
-import { useEffect, useState } from 'react'
+import { AcmButton, AcmDropdown, AcmDropdownItems, AcmDropdownProps } from '../ui-components'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from '../lib/acm-i18next'
 
-type RbacDropdownProps<T = unknown> = {
+type RbacDropdownProps<T = unknown> = Pick<
+  AcmDropdownProps,
+  'dropdownPosition' | 'id' | 'isDisabled' | 'isKebab' | 'text' | 'tooltip'
+> & {
   actions: Actions<T>[]
   item: T
-  isKebab?: boolean
-  text: string
-  id: string
-  isDisabled?: boolean
-  tooltip?: string
 }
 
-type Actions<T = unknown> = {
+type Actions<T = unknown> = Omit<AcmDropdownItems, 'click' | 'flyoutMenu'> & {
   id: string
   text: React.ReactNode
   isAriaDisabled?: boolean
   tooltip?: string
-  click: (item: T) => void
+  flyoutMenu?: Actions<T>[]
+  click?: (item: T) => void
   rbac?: ResourceAttributes[] | Promise<ResourceAttributes>[]
 }
 
+function flattenActions<T>(actions: Actions<T>[]): Actions<T>[] {
+  return actions.flatMap((action) => (action.flyoutMenu ? [...flattenActions(action.flyoutMenu), action] : action))
+}
+
 export function RbacDropdown<T = unknown>(props: RbacDropdownProps<T>) {
   const { t } = useTranslation()
   const [actions, setActions] = useState<Actions<T>[]>([])
 
+  const actionsWithFlyoutActions = useMemo(() => flattenActions(actions), [actions])
+
   useEffect(() => {
     const isUpdated = !props.actions.every((a, i) => a?.id === actions?.[i]?.id)
     if (isUpdated) {
       setActions(props.actions)
     }
   }, [actions, props.actions])
 
-  const onSelect = (id: string) => {
-    const action = props.actions.find((a) => a.id === id)
-    return action?.click(props.item)
-  }
+  const onSelect = useCallback(
+    (id: string) => {
+      const action = actionsWithFlyoutActions.find((a) => a.id === id)
+      if (action?.click) {
+        action.click(props.item)
+      }
+    },
+    [actionsWithFlyoutActions, props.item]
+  )
 
   const onToggle = async (isOpen?: boolean) => {
     if (isOpen) {
@@ -70,17 +80,32 @@ export function RbacDropdown<T = unknown>(props: RbacDropdownProps<T>) {
     }
   }
 
+  // converts RBAC actions to AcmDropdown format and handles click events
+
+  const convertToAcmDropdownItems = useCallback(
+    (actionItems: Actions<T>[]): AcmDropdownItems[] => {
+      return actionItems.map((action) => ({
+        ...action,
+        click: action.click ? () => action.click?.(props.item) : undefined,
+        flyoutMenu: action.flyoutMenu ? convertToAcmDropdownItems(action.flyoutMenu) : undefined,
+      }))
+    },
+    [props.item]
+  )
+
+  const dropdownItems = useMemo(() => convertToAcmDropdownItems(actions), [actions, convertToAcmDropdownItems])
   return (
     <AcmDropdown
       id={props.id}
       onSelect={onSelect}
-      dropdownItems={actions}
+      dropdownItems={dropdownItems}
       isKebab={props.isKebab}
       isPlain={true}
       text={props.text}
       onToggle={onToggle}
       isDisabled={props.isDisabled}
       tooltip={props.isDisabled ? props.tooltip : undefined}
+      dropdownPosition={props.dropdownPosition}
     />
   )
 }