CONSOLE-3569: Expose labels modal through dynamic plugin SDK (openshift#13037)

* Rename labelsModal to labelsModalLauncher

Factor out LabelsModal component from labelsModal and rename the original labelsModal to labelsModalLauncher to differentiate between the two.

* Rename annotationsModal to annotationsModalLauncher

Update annotationsModal to annotationsModalLauncher to be consistent with labelsModalLauncher. As we expose the underlying React components, we need to rename the exported launchers to eliminate the ambiguity.

* Rename labels-modal.jsx to labels-modal.tsx

* Add type definitions to labels-modal.tsx

* Create useLabelsModal hook in console-shared package

* Expose useLabelsModal hook through dyanmic plugin SDK

* Use new `useLabelsModal` hook in `NodeDetailsOverview` and `ResourceSummary` components

* Address tech debt in labels-modal.tsx

Author: TheRealJon

frontend/packages/console-app/src/actions/creators/common-factory.ts

@@ -1,9 +1,9 @@
 import i18next from 'i18next';
 import { Action } from '@console/dynamic-plugin-sdk';
 import {
-  annotationsModal,
+  annotationsModalLauncher,
   deleteModal,
-  labelsModal,
+  labelsModalLauncher,
   configureReplicaCountModal,
   podSelectorModal,
   tolerationsModal,
@@ -50,7 +50,7 @@ export const CommonActionFactory: ResourceActionFactory = {
     id: 'edit-labels',
     label: i18next.t('console-app~Edit labels'),
     cta: () =>
-      labelsModal({
+      labelsModalLauncher({
         kind,
         resource: obj,
         blocking: true,
@@ -61,7 +61,7 @@ export const CommonActionFactory: ResourceActionFactory = {
     id: 'edit-annotations',
     label: i18next.t('console-app~Edit annotations'),
     cta: () =>
-      annotationsModal({
+      annotationsModalLauncher({
         kind,
         resource: obj,
         blocking: true,

frontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsx

@@ -14,10 +14,13 @@ import {
   Timestamp,
 } from '@console/internal/components/utils';
 import { DetailsItem } from '@console/internal/components/utils/details-item';
-import { editLabelsModal } from '@console/internal/components/utils/details-page';
 import { NodeModel, MachineModel } from '@console/internal/models';
 import { NodeKind, referenceForModel } from '@console/internal/module/k8s';
-import { getNodeMachineNameAndNamespace, getNodeAddresses } from '@console/shared';
+import { useLabelsModal } from '@console/shared/src/hooks/useLabelsModal';
+import {
+  getNodeMachineNameAndNamespace,
+  getNodeAddresses,
+} from '@console/shared/src/selectors/node';
 import NodeIPList from './NodeIPList';
 import NodeStatus from './NodeStatus';
 import MarkAsSchedulablePopover from './popovers/MarkAsSchedulablePopover';
@@ -27,6 +30,7 @@ type NodeDetailsOverviewProps = {
 };
 
 const NodeDetailsOverview: React.FC<NodeDetailsOverviewProps> = ({ node }) => {
+  const launchLabelsModal = useLabelsModal(node);
   const machine = getNodeMachineNameAndNamespace(node);
   const canUpdate = useAccessReview({
     group: NodeModel.apiGroup,
@@ -64,7 +68,7 @@ const NodeDetailsOverview: React.FC<NodeDetailsOverviewProps> = ({ node }) => {
               obj={node}
               path="metadata.labels"
               valueClassName="details-item__value--labels"
-              onEdit={(e) => editLabelsModal(e, { resource: node, kind: NodeModel })}
+              onEdit={launchLabelsModal}
               canEdit={canUpdate}
               editAsGroup
             >

frontend/packages/console-dynamic-plugin-sdk/docs/api.md

@@ -65,10 +65,11 @@
 63.  [QueryBrowser](#querybrowser)
 64.  [useAnnotationsModal](#useannotationsmodal)
 65.  [useDeleteModal](#usedeletemodal)
-66. [DEPRECATED] [PerspectiveContext](#perspectivecontext)
-67. [DEPRECATED] [useAccessReviewAllowed](#useaccessreviewallowed)
-68. [DEPRECATED] [useSafetyFirst](#usesafetyfirst)
-69. [DEPRECATED] [YAMLEditor](#yamleditor)
+66.  [useLabelsModal](#uselabelsmodal)
+67. [DEPRECATED] [PerspectiveContext](#perspectivecontext)
+68. [DEPRECATED] [useAccessReviewAllowed](#useaccessreviewallowed)
+69. [DEPRECATED] [useSafetyFirst](#usesafetyfirst)
+70. [DEPRECATED] [YAMLEditor](#yamleditor)
 
 ---
 
@@ -2248,7 +2249,7 @@ A component that renders a graph of the results from a Prometheus PromQL query a
 
 ### Summary 
 
-A hook for launching a modal for editing a Kubernetes resource's annotations.
+A hook that provides a callback to launch a modal for editing Kubernetes resource annotations.
 
 
 
@@ -2286,7 +2287,7 @@ A function which will launch a modal for editing a resource's annotations.
 
 ### Summary 
 
-A hook for launching a modal for deleting a resource.
+A hook that provides a callback to launch a modal for deleting a resource.
 
 
 
@@ -2320,6 +2321,44 @@ const DeletePodButton = ({ pod }) => {
 A function which will launch a modal for deleting a resource.
 
 
+---
+
+## `useLabelsModal`
+
+### Summary 
+
+A hook that provides a callback to launch a modal for editing Kubernetes resource labels.
+
+
+
+### Example
+
+
+```tsx
+const PodLabelsButton = ({ pod }) => {
+  const { t } = useTranslation();
+  const launchLabelsModal = useLabelsModal<PodKind>(pod);
+  return <button onClick={launchLabelsModal}>{t('Edit Pod Labels')}</button>
+}
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `resource` | The resource to edit labels for, an object of K8sResourceCommon type. |
+
+
+
+### Returns
+
+A function which will launch a modal for editing a resource's labels.
+
+
 ---
 
 ## `PerspectiveContext`

frontend/packages/console-dynamic-plugin-sdk/src/api/dynamic-core-api.ts

@@ -2,36 +2,37 @@
 import * as React from 'react';
 import { ActionServiceProviderProps } from '../extensions/actions';
 import {
+  CodeEditorProps,
+  CodeEditorRef,
   ErrorBoundaryFallbackProps,
   HorizontalNavProps,
-  UseResolvedExtensions,
-  VirtualizedTableFC,
-  TableDataProps,
-  UseActiveColumns,
-  ListPageHeaderProps,
-  ListPageCreateProps,
-  ListPageCreateLinkProps,
+  InventoryItemBodyProps,
+  InventoryItemStatusProps,
+  InventoryItemTitleProps,
   ListPageCreateButtonProps,
   ListPageCreateDropdownProps,
+  ListPageCreateLinkProps,
+  ListPageCreateProps,
   ListPageFilterProps,
-  UseListPageFilter,
-  ResourceLinkProps,
-  ResourceIconProps,
-  OverviewProps,
+  ListPageHeaderProps,
+  NamespaceBarProps,
   OverviewGridProps,
-  InventoryItemTitleProps,
-  InventoryItemBodyProps,
-  InventoryItemStatusProps,
-  CodeEditorProps,
-  ResourceYAMLEditorProps,
+  OverviewProps,
+  QueryBrowserProps,
   ResourceEventStreamProps,
-  UsePrometheusPoll,
+  ResourceIconProps,
+  ResourceLinkProps,
+  ResourceYAMLEditorProps,
+  TableDataProps,
   TimestampProps,
-  NamespaceBarProps,
-  CodeEditorRef,
-  QueryBrowserProps,
+  UseActiveColumns,
   UseAnnotationsModal,
   UseDeleteModal,
+  UseLabelsModal,
+  UseListPageFilter,
+  UsePrometheusPoll,
+  UseResolvedExtensions,
+  VirtualizedTableFC,
 } from '../extensions/console-types';
 import { StatusPopupSectionProps, StatusPopupItemProps } from '../extensions/dashboard-types';
 
@@ -795,7 +796,7 @@ export const QueryBrowser: React.FC<QueryBrowserProps> = require('@console/share
   .default;
 
 /**
- * A hook for launching a modal for editing a Kubernetes resource's annotations.
+ * A hook that provides a callback to launch a modal for editing Kubernetes resource annotations.
  *
  * @param {object} resource - The resource to edit annotations for, an object of K8sResourceCommon type.
  * @returns A function which will launch a modal for editing a resource's annotations.
@@ -812,7 +813,7 @@ export const useAnnotationsModal: UseAnnotationsModal = require('@console/shared
   .useAnnotationsModal;
 
 /**
- * A hook for launching a modal for deleting a resource.
+ * A hook that provides a callback to launch a modal for deleting a resource.
  *
  * @param resource - The resource to delete.
  * @param redirectTo - (optional) A location to redirect to after deleting the resource.
@@ -829,3 +830,19 @@ export const useAnnotationsModal: UseAnnotationsModal = require('@console/shared
  */
 export const useDeleteModal: UseDeleteModal = require('@console/shared/src/hooks/useDeleteModal')
   .useDeleteModal;
+
+/**
+ * A hook that provides a callback to launch a modal for editing Kubernetes resource labels.
+ *
+ * @param {object} resource - The resource to edit labels for, an object of K8sResourceCommon type.
+ * @returns A function which will launch a modal for editing a resource's labels.
+ * @example
+ * ```tsx
+ * const PodLabelsButton = ({ pod }) => {
+ *   const { t } = useTranslation();
+ *   const launchLabelsModal = useLabelsModal<PodKind>(pod);
+ *   return <button onClick={launchLabelsModal}>{t('Edit Pod Labels')}</button>
+ * }
+ * ```
+ */
+export const useLabelsModal: UseLabelsModal = require('@console/shared/src/hooks/useLabelsModal');

frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts

@@ -724,3 +724,5 @@ export type UseDeleteModal = (
   btnText?: React.ReactNode,
   deleteAllResources?: () => Promise<K8sResourceKind[]>,
 ) => () => void;
+
+export type UseLabelsModal = (resource: K8sResourceCommon) => () => void;

frontend/packages/console-shared/src/hooks/useLabelsModal.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ModalComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/ModalProvider';
+import { useModal } from '@console/dynamic-plugin-sdk/src/app/modal-support/useModal';
+import { UseLabelsModal } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
+import { useK8sModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useK8sModel';
+import { getGroupVersionKindForResource } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref';
+import { ModalWrapper } from '@console/internal/components/factory/modal';
+import { LabelsModal, LabelsModalProps } from '@console/internal/components/modals/labels-modal';
+
+const LabelsModalComponent: ModalComponent<LabelsModalProps> = ({ closeModal, kind, resource }) => {
+  return (
+    <ModalWrapper blocking onClose={closeModal}>
+      <LabelsModal cancel={closeModal} close={closeModal} kind={kind} resource={resource} />
+    </ModalWrapper>
+  );
+};
+
+export const useLabelsModal: UseLabelsModal = (resource) => {
+  const launcher = useModal();
+  const groupVersionKind = getGroupVersionKindForResource(resource);
+  const [kind] = useK8sModel(groupVersionKind);
+  return React.useCallback(
+    () => resource && kind && launcher<LabelsModalProps>(LabelsModalComponent, { kind, resource }),
+    [launcher, kind, resource],
+  );
+};

frontend/public/components/modals/index.ts

@@ -47,8 +47,10 @@ export const configureNamespacePullSecretModal = (props) =>
     './configure-ns-pull-secret-modal' /* webpackChunkName: "configure-ns-pull-secret-modal" */
   ).then((m) => m.configureNamespacePullSecretModal(props));
 
-export const labelsModal = (props) =>
-  import('./labels-modal' /* webpackChunkName: "labels-modal" */).then((m) => m.labelsModal(props));
+export const labelsModalLauncher = (props) =>
+  import('./labels-modal' /* webpackChunkName: "labels-modal" */).then((m) =>
+    m.labelsModalLauncher(props),
+  );
 
 export const podSelectorModal = (props) =>
   import('./labels-modal' /* webpackChunkName: "labels-modal" */).then((m) =>
@@ -65,8 +67,8 @@ export const configureUpdateStrategyModal = (props) =>
     './configure-update-strategy-modal' /* webpackChunkName: "configure-update-strategy-modal" */
   ).then((m) => m.configureUpdateStrategyModal(props));
 
-export const annotationsModal = (props) =>
-  import('./tags' /* webpackChunkName: "tags" */).then((m) => m.annotationsModal(props));
+export const annotationsModalLauncher = (props) =>
+  import('./tags' /* webpackChunkName: "tags" */).then((m) => m.annotationsModalLauncher(props));
 
 export const deleteModal = (props) =>
   import('./delete-modal' /* webpackChunkName: "delete-modal" */).then((m) => m.deleteModal(props));