Merge pull request openshift#16061 from rhamilto/CONSOLE-4447-use-modal

CONSOLE-4447: Migrate modal hooks from useModal to useOverlay

Author: openshift-merge-bot[bot]

frontend/packages/console-app/src/actions/hooks/useCommonActions.ts

@@ -161,11 +161,7 @@ export const useCommonActions = <T extends readonly CommonActionCreator[]>(
         accessReview: asAccessReview(kind as K8sModel, resource as K8sResourceKind, 'patch'),
       }),
     }),
-    // Excluding stable modal launcher functions (launchCountModal)
-    // to prevent unnecessary re-renders
-    // TODO: remove once all Modals have been updated to useOverlay
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [kind, resource, t, message, actualEditPath, launchModal],
+    [kind, resource, t, message, actualEditPath, launchModal, launchCountModal],
   );
 
   const result = useMemo((): [ActionObject<T>, boolean] => {

frontend/packages/console-app/src/components/oauth-config/IdentityProviders.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import { useCallback } from 'react';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { useModal } from '@console/dynamic-plugin-sdk/src/app/modal-support/useModal';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 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 type { RemoveIdentityProvider } from '@console/internal/components/modals/remove-idp-modal';
@@ -13,13 +13,13 @@ import type { IdentityProvider, OAuthKind } from '@console/internal/module/k8s';
 
 export const IdentityProviders: FC<IdentityProvidersProps> = ({ identityProviders, obj }) => {
   const { t } = useTranslation();
-  const launcher = useModal();
+  const launchModal = useOverlay();
   const groupVersionKind = getGroupVersionKindForResource(obj);
   const [model] = useK8sModel(groupVersionKind);
-  const launchModal = useCallback(
+  const openRemoveModal = useCallback(
     (index, name, type) => {
       if (obj && model) {
-        launcher<RemoveIdentityProvider>(RemoveIdentityProviderModal, {
+        launchModal<RemoveIdentityProvider>(RemoveIdentityProviderModal, {
           obj,
           model,
           index,
@@ -28,7 +28,7 @@ export const IdentityProviders: FC<IdentityProvidersProps> = ({ identityProvider
         });
       }
     },
-    [launcher, model, obj],
+    [launchModal, model, obj],
   );
 
   return _.isEmpty(identityProviders) ? (
@@ -60,7 +60,7 @@ export const IdentityProviders: FC<IdentityProvidersProps> = ({ identityProvider
                   options={[
                     {
                       label: t('console-app~Remove identity provider'),
-                      callback: () => launchModal(index, idp.name, idp.type),
+                      callback: () => openRemoveModal(index, idp.name, idp.type),
                     },
                   ]}
                 />

frontend/packages/console-dynamic-plugin-sdk/CHANGELOG-core.md

@@ -12,6 +12,7 @@ table in [Console dynamic plugins README](./README.md).
 
 ## 4.22.0-prerelease.2 - TBD
 
+- **Breaking**: Changed `AlertAction` extension to use `LaunchOverlay` instead of `LaunchModal`. The `action` callback parameter is now typed as `LaunchOverlay`, which does not support the optional `id` parameter that `LaunchModal` had. Plugins implementing `console.alert-action` extensions must update their action callbacks accordingly. ([CONSOLE-4447])
 - **Breaking**: Removed `pluginID` from the result in `useResolvedExtensions` hook ([CONSOLE-3769], [#15904])
 - **Breaking**: Removed `AppInitSDK` and `useReduxStore` in `app` directory ([CONSOLE-5063], [#16019])
 - **Deprecated**: `useUserSettings` hook has been renamed to `useUserPreference` for consistency ([OCPBUGS-44612], [#16057])

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

@@ -158,7 +158,7 @@ This extension can be used to trigger a specific action when a specific Promethe
 | ---- | ---------- | -------- | ----------- |
 | `alert` | `string` | no | Alert name as defined by `alert.rule.name` property |
 | `text` | `string` | no | Action text |
-| `action` | `CodeRef<(alert: Alert, launchModal: LaunchModal) => void>` | no | Function to perform side effect |
+| `action` | `CodeRef<(alert: Alert, launchModal: LaunchOverlay) => void>` | no | Function to perform side effect |
 
 ---
 

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

@@ -1,5 +1,5 @@
 import type { Alert } from '../api/common-types';
-import type { LaunchModal } from '../app/modal-support/ModalProvider';
+import type { LaunchOverlay } from '../app/modal-support/OverlayProvider';
 import type { Extension, CodeRef } from '../types';
 
 /** This extension can be used to trigger a specific action when a specific Prometheus alert is observed by the Console based on its `rule.name` value. */
@@ -11,7 +11,7 @@ export type AlertAction = Extension<
     /** Action text */
     text: string;
     /** Function to perform side effect */
-    action: CodeRef<(alert: Alert, launchModal: LaunchModal) => void>;
+    action: CodeRef<(alert: Alert, launchModal: LaunchOverlay) => void>;
   }
 >;
 

frontend/packages/console-shared/src/components/dashboard/status-card/AlertItem.tsx

@@ -6,7 +6,7 @@ import { Link, useNavigate } from 'react-router';
 import type { AlertAction } from '@console/dynamic-plugin-sdk';
 import { isAlertAction, useResolvedExtensions } from '@console/dynamic-plugin-sdk';
 import type { AlertItemProps } from '@console/dynamic-plugin-sdk/src/api/internal-types';
-import { useModal } from '@console/dynamic-plugin-sdk/src/lib-core';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { alertURL } from '@console/internal/components/monitoring/utils';
 import { getAlertActions } from '@console/internal/components/notification-drawer';
 import { LinkifyExternal } from '@console/internal/components/utils/link';
@@ -92,7 +92,7 @@ export const StatusItem: FC<StatusItemProps> = ({
 
 const AlertItem: FC<AlertItemProps> = ({ alert, documentationLink }) => {
   const { t } = useTranslation();
-  const launchModal = useModal();
+  const launchModal = useOverlay();
   const [actionExtensions] = useResolvedExtensions<AlertAction>(
     useCallback(
       (e): e is AlertAction => isAlertAction(e) && e.properties.alert === alert.rule.name,

frontend/packages/console-shared/src/components/modals/CreateNamespaceModal.tsx

@@ -20,7 +20,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
 import type { CreateProjectModalProps } from '@console/dynamic-plugin-sdk/src';
-import type { ModalComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/ModalProvider';
+import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { FieldLevelHelp } from '@console/internal/components/utils/field-level-help';
 import { resourceObjPath } from '@console/internal/components/utils/resource-link';
 import { SelectorInput } from '@console/internal/components/utils/selector-input';
@@ -39,8 +39,8 @@ const defaultDeny = {
   },
 };
 
-export const CreateNamespaceModal: ModalComponent<CreateProjectModalProps> = ({
-  closeModal,
+export const CreateNamespaceModal: OverlayComponent<CreateProjectModalProps> = ({
+  closeOverlay,
   onSubmit,
 }) => {
   const { t } = useTranslation();
@@ -99,7 +99,7 @@ export const CreateNamespaceModal: ModalComponent<CreateProjectModalProps> = ({
     event.preventDefault();
     handlePromise(create())
       .then((obj) => {
-        closeModal();
+        closeOverlay();
         if (onSubmit) {
           onSubmit(obj);
         } else {
@@ -157,7 +157,7 @@ export const CreateNamespaceModal: ModalComponent<CreateProjectModalProps> = ({
     <Modal
       variant={ModalVariant.small}
       isOpen
-      onClose={closeModal}
+      onClose={closeOverlay}
       aria-labelledby="create-namespace-modal-title"
     >
       <ModalHeader
@@ -236,7 +236,7 @@ export const CreateNamespaceModal: ModalComponent<CreateProjectModalProps> = ({
           type="button"
           variant="link"
           isDisabled={inProgress}
-          onClick={closeModal}
+          onClick={closeOverlay}
           data-test-id="modal-cancel-action"
         >
           {t('console-shared~Cancel')}

frontend/packages/console-shared/src/components/modals/CreateProjectModal.tsx

@@ -19,6 +19,7 @@ import type {
   CreateProjectModalProps,
 } from '@console/dynamic-plugin-sdk/src';
 import { isCreateProjectModal, useResolvedExtensions } from '@console/dynamic-plugin-sdk/src';
+import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { setFlag } from '@console/internal/actions/flags';
 import {
   documentationURLs,
@@ -33,10 +34,9 @@ import { ExternalLink } from '@console/shared/src/components/links/ExternalLink'
 import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 import { FLAGS } from '@console/shared/src/constants/common';
 import { useConsoleDispatch } from '@console/shared/src/hooks/useConsoleDispatch';
-import type { ModalComponent } from 'packages/console-dynamic-plugin-sdk/src/app/modal-support/ModalProvider';
 
-const DefaultCreateProjectModal: ModalComponent<CreateProjectModalProps> = ({
-  closeModal,
+const DefaultCreateProjectModal: OverlayComponent<CreateProjectModalProps> = ({
+  closeOverlay,
   onSubmit,
 }) => {
   const navigate = useNavigate();
@@ -95,7 +95,7 @@ const DefaultCreateProjectModal: ModalComponent<CreateProjectModalProps> = ({
     event.preventDefault();
     handlePromise(createProject())
       .then((obj) => {
-        closeModal();
+        closeOverlay();
         if (onSubmit) {
           onSubmit(obj);
         } else {
@@ -114,7 +114,7 @@ const DefaultCreateProjectModal: ModalComponent<CreateProjectModalProps> = ({
     <Modal
       variant={ModalVariant.small}
       isOpen
-      onClose={closeModal}
+      onClose={closeOverlay}
       aria-labelledby="create-project-modal-title"
     >
       <ModalHeader
@@ -200,7 +200,7 @@ const DefaultCreateProjectModal: ModalComponent<CreateProjectModalProps> = ({
           type="button"
           variant="link"
           isDisabled={inProgress}
-          onClick={closeModal}
+          onClick={closeOverlay}
           data-test-id="modal-cancel-action"
         >
           {t('console-shared~Cancel')}
@@ -210,7 +210,7 @@ const DefaultCreateProjectModal: ModalComponent<CreateProjectModalProps> = ({
   );
 };
 
-export const CreateProjectModal: ModalComponent<CreateProjectModalProps> = (props) => {
+export const CreateProjectModal: OverlayComponent<CreateProjectModalProps> = (props) => {
   // Get create project modal extensions
   const [createProjectModalExtensions, resolved] = useResolvedExtensions<
     CreateProjectModalExtension
@@ -225,5 +225,10 @@ export const CreateProjectModal: ModalComponent<CreateProjectModalProps> = (prop
   }
 
   // If extension modal component exists, render it, else render default
-  return Component ? <Component {...props} /> : <DefaultCreateProjectModal {...props} />;
+  // Pass closeModal as an alias for closeOverlay for backward compatibility with extensions
+  return Component ? (
+    <Component {...props} closeModal={props.closeOverlay} />
+  ) : (
+    <DefaultCreateProjectModal {...props} />
+  );
 };

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

@@ -1,34 +1,20 @@
 import { useCallback } from 'react';
-import type { ModalComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/ModalProvider';
-import { useModal } from '@console/dynamic-plugin-sdk/src/app/modal-support/useModal';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import type { UseAnnotationsModal } 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 { LazyAnnotationsModalOverlay } from '@console/internal/components/modals';
 import type { AnnotationsModalProps } from '@console/internal/components/modals/tags';
-import { AnnotationsModal } from '@console/internal/components/modals/tags';
-
-const AnnotationsModalComponent: ModalComponent<AnnotationsModalProps> = ({
-  closeModal,
-  kind,
-  resource,
-}) => {
-  return (
-    <ModalWrapper blocking onClose={closeModal}>
-      <AnnotationsModal cancel={closeModal} close={closeModal} kind={kind} resource={resource} />
-    </ModalWrapper>
-  );
-};
 
 export const useAnnotationsModal: UseAnnotationsModal = (resource) => {
-  const launcher = useModal();
+  const launchModal = useOverlay();
   const groupVersionKind = getGroupVersionKindForResource(resource);
   const [kind] = useK8sModel(groupVersionKind);
   return useCallback(
     () =>
       resource &&
       kind &&
-      launcher<AnnotationsModalProps>(AnnotationsModalComponent, { kind, resource }),
-    [launcher, kind, resource],
+      launchModal<AnnotationsModalProps>(LazyAnnotationsModalOverlay, { kind, resource }),
+    [launchModal, kind, resource],
   );
 };

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

@@ -1,27 +1,32 @@
 import { useCallback } from 'react';
 import { Modal, ModalHeader, ModalBody, ModalVariant } from '@patternfly/react-core';
-import { useModal } from '@console/dynamic-plugin-sdk/src/lib-core';
+import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { CopyToClipboard } from '@console/internal/components/utils/copy-to-clipboard';
-import type { ModalComponent } from 'packages/console-dynamic-plugin-sdk/src/app/modal-support/ModalProvider';
 
-const CopyCodeModal: CopyCodeModalComponent = ({ title, snippet, closeModal }) => (
-  <Modal isOpen onClose={closeModal} variant={ModalVariant.medium}>
-    <ModalHeader title={title} />
+const CopyCodeModal: CopyCodeModalComponent = ({ title, snippet, closeOverlay }) => (
+  <Modal
+    isOpen
+    onClose={closeOverlay}
+    variant={ModalVariant.medium}
+    aria-labelledby="copy-code-modal-title"
+  >
+    <ModalHeader title={title} labelId="copy-code-modal-title" />
     <ModalBody>
       <CopyToClipboard key={snippet} value={snippet} />
     </ModalBody>
   </Modal>
 );
 
 export const useCopyCodeModal: UseCopyCodeModal = (title, snippet) => {
-  const launcher = useModal();
-  return useCallback(() => (snippet ? launcher(CopyCodeModal, { title, snippet }) : null), [
-    launcher,
+  const launchModal = useOverlay();
+  return useCallback(() => (snippet ? launchModal(CopyCodeModal, { title, snippet }) : null), [
+    launchModal,
     snippet,
     title,
   ]);
 };
 
 type CopyCodeModalProps = { title: string; snippet: string };
-type CopyCodeModalComponent = ModalComponent<CopyCodeModalProps>;
+type CopyCodeModalComponent = OverlayComponent<CopyCodeModalProps>;
 type UseCopyCodeModal = (title: string, snippet: string) => () => void;