Remove kebab factory uses from default-resouce list and details pages

Author: vikram-raj

frontend/packages/console-shared/src/components/actions/menu/ActionMenu.tsx

@@ -14,6 +14,7 @@ type ActionMenuProps = {
   variant?: ActionMenuVariant;
   label?: string;
   className?: string;
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
 };
 
 const ActionMenu: React.FC<ActionMenuProps> = ({
@@ -23,6 +24,7 @@ const ActionMenu: React.FC<ActionMenuProps> = ({
   variant = ActionMenuVariant.KEBAB,
   label,
   className,
+  appendTo,
 }) => {
   const isKebabVariant = variant === ActionMenuVariant.KEBAB;
   const [isVisible, setVisible] = useSafetyFirst(isKebabVariant);
@@ -103,7 +105,7 @@ const ActionMenu: React.FC<ActionMenuProps> = ({
           popper={menu}
           placement="bottom-end"
           isVisible={isOpen}
-          appendTo={containerRef.current}
+          appendTo={appendTo || containerRef.current}
         />
       </div>
     )

frontend/packages/metal3-plugin/src/components/modals/PowerOffHostModal.tsx

@@ -167,14 +167,6 @@ const isPowerOffSafe = (status: string) => {
   return safeStates.includes(status);
 };
 
-export type PowerOffHostModalProps1 = {
-  host: BareMetalHostKind;
-  nodeName: string;
-  status: StatusProps;
-  cancel?: () => void;
-  close?: () => void;
-};
-
 export type PowerOffHostModalProps = {
   host: BareMetalHostKind;
   nodeName: string;

frontend/public/components/default-resource.tsx

@@ -21,7 +21,6 @@ import {
   ExtensionK8sGroupModel,
 } from '../module/k8s';
 import { DetailsItem } from './utils/details-item';
-import { Kebab, ResourceKebab } from './utils/kebab';
 import { kindObj } from './utils/inject';
 import { navFactory } from './utils/horizontal-nav';
 import { ResourceLink } from './utils/resource-link';
@@ -51,8 +50,10 @@ import {
   ResolvedExtension,
 } from '@console/dynamic-plugin-sdk';
 import LazyActionMenu from '@console/shared/src/components/actions/LazyActionMenu';
-
-const { common } = Kebab.factory;
+import { useCommonResourceActions } from '@console/app/src/actions/hooks/useCommonResourceActions';
+import ActionMenu from '@console/shared/src/components/actions/menu/ActionMenu';
+import { ActionMenuVariant } from '@console/shared/src/components/actions/types';
+import { useK8sGet } from './utils/k8s-get-hook';
 
 const tableColumnInfo = [{ id: 'name' }, { id: 'namespace' }, { id: 'created' }, { id: 'actions' }];
 
@@ -77,6 +78,16 @@ const getAdditionaPrinterColumnID = (column: CRDAdditionalPrinterColumn) => {
   return `apc-${column.name}`;
 };
 
+const ResourceActionsMenu: React.FC<{
+  resource: K8sResourceKind;
+  variant: ActionMenuVariant;
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+}> = ({ resource, variant, appendTo }) => {
+  const common = useCommonResourceActions(kindObj(referenceFor(resource)), resource);
+  const menuActions = [...common];
+  return <ActionMenu actions={menuActions} variant={variant} appendTo={appendTo} />;
+};
+
 const NamespaceCell: React.FCC<NamespaceCellProps> = ({ namespace }) => {
   const { t } = useTranslation();
   return namespace ? <ResourceLink kind="Namespace" name={namespace} /> : <>{t('public~None')}</>;
@@ -176,7 +187,6 @@ const getDataViewRows = (
   return data.map(({ obj }) => {
     const { name, namespace, creationTimestamp } = obj.metadata;
     const kind = referenceFor(obj) || kinds[0];
-    const menuActions = [...common];
 
     const hasExtensionActions =
       resourceProviderExtensionsResolved && resourceProviderExtensions?.length > 0;
@@ -214,7 +224,11 @@ const getDataViewRows = (
             {hasExtensionActions ? (
               <LazyActionMenu context={{ [kind]: obj }} />
             ) : (
-              <ResourceKebab actions={menuActions} kind={kind} resource={obj} />
+              <ResourceActionsMenu
+                resource={obj}
+                variant={ActionMenuVariant.KEBAB}
+                appendTo={document.getElementById('popper-container')}
+              />
             )}
           </>
         ),
@@ -375,9 +389,23 @@ DefaultPage.displayName = 'DefaultPage';
 
 export const DefaultDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (props) => {
   const pages = [navFactory.details(DetailsForKind), navFactory.editYaml()];
-  const menuActions = [...common];
+  const [resource, resourceLoaded, resourceError] = useK8sGet(
+    kindObj(props.kind),
+    props.name,
+    props.namespace,
+  );
 
-  return <DetailsPage {...props} menuActions={menuActions} pages={pages} />;
+  return (
+    <DetailsPage
+      {...props}
+      customActionMenu={
+        resourceLoaded && !resourceError ? (
+          <ResourceActionsMenu resource={resource} variant={ActionMenuVariant.DROPDOWN} />
+        ) : null
+      }
+      pages={pages}
+    />
+  );
 };
 DefaultDetailsPage.displayName = 'DefaultDetailsPage';