Remove kebab factory uses from resourceQuota and pod-list pages

Author: vikram-raj

frontend/packages/console-app/console-extensions.json

@@ -432,7 +432,9 @@
         "kind": "VolumeAttributesClass",
         "group": "storage.k8s.io"
       },
-      "provider": { "$codeRef": "volumeAttributesClassProvider.useVolumeAttributesClassActionsProvider" }
+      "provider": {
+        "$codeRef": "volumeAttributesClassProvider.useVolumeAttributesClassActionsProvider"
+      }
     },
     "flags": {
       "required": ["VAC_PLATFORM_SUPPORT"]
@@ -528,6 +530,41 @@
       "provider": { "$codeRef": "prometheusProvider.usePrometheusActionsProvider" }
     }
   },
+  {
+    "type": "console.action/resource-provider",
+    "properties": {
+      "model": {
+        "group": "",
+        "version": "v1",
+        "kind": "ResourceQuota"
+      },
+      "provider": { "$codeRef": "defaultProvider.useDefaultActionsProvider" }
+    }
+  },
+  {
+    "type": "console.action/resource-provider",
+    "properties": {
+      "model": {
+        "group": "quota.openshift.io",
+        "version": "v1",
+        "kind": "ClusterResourceQuota"
+      },
+      "provider": { "$codeRef": "defaultProvider.useDefaultActionsProvider" }
+    }
+  },
+  {
+    "type": "console.action/resource-provider",
+    "properties": {
+      "model": {
+        "group": "quota.openshift.io",
+        "version": "v1",
+        "kind": "AppliedClusterResourceQuota"
+      },
+      "provider": {
+        "$codeRef": "appliedClusterResourceQuotaProvider.useAppliedClusterResourceQuotaActionsProvider"
+      }
+    }
+  },
   {
     "type": "console.page/route",
     "properties": {
@@ -1286,8 +1323,8 @@
         "kind": "VolumeAttributesClass"
       }
     },
-    "flags": { 
-      "required": ["VAC_PLATFORM_SUPPORT"] 
+    "flags": {
+      "required": ["VAC_PLATFORM_SUPPORT"]
     }
   },
   {

frontend/packages/console-app/package.json

@@ -99,6 +99,7 @@
       "customResourceDefinitionProvider": "src/actions/providers/custom-resource-definition-provider.ts",
       "machineConfigPoolProvider": "src/actions/providers/machine-config-pool-provider.ts",
       "serviceMonitorProvider": "src/actions/providers/service-monitor-provider.ts",
+      "appliedClusterResourceQuotaProvider": "src/actions/providers/applied-cluster-resource-quota-provider.ts",
       "userProvider": "src/actions/providers/user-provider.ts"
     }
   }

frontend/packages/console-app/src/actions/providers/applied-cluster-resource-quota-provider.ts

@@ -0,0 +1,75 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom-v5-compat';
+import { Action } from '@console/dynamic-plugin-sdk';
+import { AppliedClusterResourceQuotaModel } from '@console/internal/models';
+import { K8sResourceKind, referenceFor, referenceForModel } from '@console/internal/module/k8s';
+import { useK8sModel } from '@console/shared/src/hooks/useK8sModel';
+import { CommonActionCreator } from '../hooks/types';
+import { useCommonActions } from '../hooks/useCommonActions';
+
+const useEditAppliedClusterResourceQuotaActions = (
+  resource: K8sResourceKind,
+  namespace: string,
+) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const factory = useMemo(
+    () => ({
+      editResourceQuota: () => ({
+        id: 'edit-resource-quota',
+        label: t('public~Edit AppliedClusterResourceQuota'),
+        cta: () =>
+          navigate(
+            `/k8s/ns/${namespace}/${referenceForModel(AppliedClusterResourceQuotaModel)}/${
+              resource?.metadata?.name
+            }/yaml`,
+          ),
+      }),
+    }),
+    [t, navigate, namespace, resource?.metadata?.name],
+  );
+
+  const action = useMemo<Action[]>(() => [factory.editResourceQuota()], [factory]);
+  return action;
+};
+
+export const useAppliedClusterResourceQuotaActionsProvider = (data) => {
+  const { quota, namespace } = data;
+  const [kindObj, inFlight] = useK8sModel(referenceFor(quota));
+  const [editLabelsAction, isLabelActionReady] = useCommonActions(kindObj, quota, [
+    CommonActionCreator.ModifyLabels,
+  ] as const);
+  const [editAnnotationsAction, isAnnotationActionReady] = useCommonActions(kindObj, quota, [
+    CommonActionCreator.ModifyAnnotations,
+  ] as const);
+  const [editDeleteAction, isDeleteActionReady] = useCommonActions(kindObj, quota, [
+    CommonActionCreator.Delete,
+  ] as const);
+  const editLabels = useMemo(() => (isLabelActionReady ? Object.values(editLabelsAction) : []), [
+    editLabelsAction,
+    isLabelActionReady,
+  ]);
+  const editAnnotations = useMemo(
+    () => (isAnnotationActionReady ? Object.values(editAnnotationsAction) : []),
+    [editAnnotationsAction, isAnnotationActionReady],
+  );
+  const deleteQuota = useMemo(() => (isDeleteActionReady ? Object.values(editDeleteAction) : []), [
+    editDeleteAction,
+    isDeleteActionReady,
+  ]);
+  const editAppliedClusterResourceQuotaActions = useEditAppliedClusterResourceQuotaActions(
+    quota,
+    namespace,
+  );
+  const resourceQuotaActions = useMemo(
+    () => [
+      ...editLabels,
+      ...editAnnotations,
+      ...editAppliedClusterResourceQuotaActions,
+      ...deleteQuota,
+    ],
+    [editLabels, editAnnotations, editAppliedClusterResourceQuotaActions, deleteQuota],
+  );
+  return [resourceQuotaActions, !inFlight, false];
+};

frontend/public/components/pod-list.tsx

@@ -54,7 +54,6 @@ import { sortResourceByValue } from './factory/Table/sort';
 import { PROMETHEUS_BASE_PATH, PROMETHEUS_TENANCY_BASE_PATH } from './graphs/consts';
 import { PodTraffic } from './pod-traffic';
 import { useK8sWatchResource } from './utils/k8s-watch-hook';
-import { Kebab } from './utils/kebab';
 import { LabelList } from './utils/label-list';
 import { OwnerReferences } from './utils/owner-references';
 import { ResourceLink, resourcePath } from './utils/resource-link';
@@ -97,8 +96,6 @@ const fetchPodMetrics = (namespace: string): Promise<UIActions.PodMetrics> => {
   return Promise.all(promises).then((data: unknown[]) => _.assign({}, ...data));
 };
 
-export const menuActions = [...(Kebab.factory.common || [])];
-
 const tableColumnInfo = [
   { id: 'name' },
   { id: 'namespace' },

frontend/public/components/resource-quota.jsx

@@ -18,7 +18,6 @@ import { FLAGS } from '@console/shared/src/constants/common';
 import { YellowExclamationTriangleIcon } from '@console/shared/src/components/status/icons';
 import { DASH } from '@console/shared/src/constants/ui';
 import { DetailsPage, MultiListPage } from './factory';
-import { Kebab, ResourceKebab } from './utils/kebab';
 import { SectionHeading } from './utils/headings';
 import { navFactory } from './utils/horizontal-nav';
 import { ResourceLink } from './utils/resource-link';
@@ -54,32 +53,8 @@ import {
   actionsCellProps,
   cellIsStickyProps,
 } from '@console/app/src/components/data-view/ConsoleDataView';
-
-const { common } = Kebab.factory;
-
-const resourceQuotaMenuActions = [...common];
-const clusterResourceQuotaMenuActions = [...common];
-const appliedClusterResourceQuotaMenuActions = (namespace) => [
-  Kebab.factory.ModifyLabels,
-  Kebab.factory.ModifyAnnotations,
-  (kind, obj) => {
-    return {
-      // t('public~Edit AppliedClusterResourceQuota')
-      labelKey: 'public~Edit AppliedClusterResourceQuota',
-      href: `/k8s/ns/${namespace}/${referenceForModel(AppliedClusterResourceQuotaModel)}/${
-        obj.metadata.name
-      }/yaml`,
-      accessReview: {
-        group: kind.apiGroup,
-        resource: kind.plural,
-        name: obj.metadata.name,
-        namespace,
-        verb: 'update',
-      },
-    };
-  },
-  Kebab.factory.Delete,
-];
+import LazyActionMenu from '@console/shared/src/components/actions/LazyActionMenu';
+import { ActionMenuVariant } from '@console/shared/src/components/actions/types';
 
 const isClusterQuota = (quota) => !quota.metadata.namespace;
 
@@ -88,15 +63,15 @@ const appliedClusterQuotaReference = referenceForModel(AppliedClusterResourceQuo
 
 const quotaActions = (quota, namespace = undefined) => {
   if (quota.metadata.namespace) {
-    return resourceQuotaMenuActions;
+    return <LazyActionMenu context={{ [referenceForModel(ResourceQuotaModel)]: quota }} />;
   }
 
   if (quota.kind === 'ClusterResourceQuota') {
-    return clusterResourceQuotaMenuActions;
+    return <LazyActionMenu context={{ [clusterQuotaReference]: quota }} />;
   }
 
   if (quota.kind === 'AppliedClusterResourceQuota') {
-    return appliedClusterResourceQuotaMenuActions(namespace);
+    return <LazyActionMenu context={{ [appliedClusterQuotaReference]: { quota, namespace } }} />;
   }
 };
 
@@ -479,14 +454,7 @@ const getResourceQuotaDataViewRows = (data, columns, namespace) => {
         cell: <Timestamp timestamp={metadata.creationTimestamp} />,
       },
       [resourceQuotaTableColumnInfo[6].id]: {
-        cell: (
-          <ResourceKebab
-            customData={namespace}
-            actions={quotaActions(obj, namespace)}
-            kind={resourceKind}
-            resource={obj}
-          />
-        ),
+        cell: quotaActions(obj, namespace),
         props: actionsCellProps,
       },
     };
@@ -549,14 +517,7 @@ const getAppliedClusterResourceQuotaDataViewRows = (data, columns, namespace) =>
         cell: <Timestamp timestamp={metadata.creationTimestamp} />,
       },
       [appliedClusterResourceQuotaTableColumnInfo[5].id]: {
-        cell: (
-          <ResourceKebab
-            customData={namespace}
-            actions={quotaActions(obj, namespace)}
-            kind={appliedClusterQuotaReference}
-            resource={obj}
-          />
-        ),
+        cell: quotaActions(obj, namespace),
         props: actionsCellProps,
       },
     };
@@ -851,19 +812,35 @@ export const ResourceQuotasDetailsPage = (props) => {
   return (
     <DetailsPage
       {...props}
-      menuActions={resourceQuotaMenuActions}
+      kind={referenceForModel(ResourceQuotaModel)}
+      customActionMenu={(k8sObj, obj) => (
+        <LazyActionMenu
+          context={{ [referenceForModel(ResourceQuotaModel)]: obj }}
+          variant={ActionMenuVariant.DROPDOWN}
+        />
+      )}
       pages={[navFactory.details(Details), navFactory.editYaml()]}
     />
   );
 };
 
 export const AppliedClusterResourceQuotasDetailsPage = (props) => {
   const params = useParams();
-  const actions = appliedClusterResourceQuotaMenuActions(params?.ns);
   return (
     <DetailsPage
       {...props}
-      menuActions={actions}
+      kind={appliedClusterQuotaReference}
+      customActionMenu={(k8sObj, obj) => (
+        <LazyActionMenu
+          context={{
+            [appliedClusterQuotaReference]: {
+              quota: obj,
+              namespace: params?.ns,
+            },
+          }}
+          variant={ActionMenuVariant.DROPDOWN}
+        />
+      )}
       pages={[navFactory.details(Details), navFactory.editYaml()]}
     />
   );

frontend/public/locales/en/public.json

@@ -1230,7 +1230,6 @@
   "Recently used": "Recently used",
   "No results found": "No results found",
   "Clear input value": "Clear input value",
-  "Edit AppliedClusterResourceQuota": "Edit AppliedClusterResourceQuota",
   "{{count}} resource reached quota_one": "{{count}} resource reached quota",
   "{{count}} resource reached quota_other": "{{count}} resource reached quotas",
   "none are at quota": "none are at quota",
@@ -1718,6 +1717,7 @@
   "Cancel build": "Cancel build",
   "Impersonate Group {{name}}": "Impersonate Group {{name}}",
   "Edit Machine count": "Edit Machine count",
+  "Edit AppliedClusterResourceQuota": "Edit AppliedClusterResourceQuota",
   "Start build": "Start build",
   "Start last run": "Start last run",
   "Pause updates": "Pause updates",