[WIP] CONSOLE-4447: Remove deprecated modal components and CSS

frontend/package.json

@@ -214,7 +214,6 @@
     "react-helmet-async": "^2.0.5",
     "react-i18next": "~15.1.4",
     "react-linkify": "^0.2.2",
-    "react-modal": "^3.16.3",
     "react-redux": "8.1.3",
     "react-router": "5.3.x",
     "react-router-dom": "5.3.x",

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

@@ -111,7 +111,9 @@ export const useHPAActions = (kindObj: K8sKind, resource: K8sResourceKind) => {
         },
       },
     ];
-  }, [kindObj, launchModal, relatedHPAs, resource, supportsHPA]);
+    // Missing launchModal dependency causes max depth exceeded error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [kindObj, relatedHPAs, resource, supportsHPA]);
 
   const result = useMemo<[Action[], HorizontalPodAutoscalerKind[]]>(() => {
     return [actions, relatedHPAs];

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

@@ -7,10 +7,10 @@ import {
   LazyAnnotationsModalOverlay,
   LazyDeleteModalOverlay,
   LazyLabelsModalOverlay,
+  LazyTaintsModalOverlay,
   LazyTolerationsModalOverlay,
 } from '@console/internal/components/modals';
 import { useConfigureCountModal } from '@console/internal/components/modals/configure-count-modal';
-import { TaintsModalOverlay } from '@console/internal/components/modals/taints-modal';
 import { asAccessReview } from '@console/internal/components/utils/rbac';
 import { resourceObjPath } from '@console/internal/components/utils/resource-link';
 import type { K8sModel, K8sResourceKind, NodeKind } from '@console/internal/module/k8s';
@@ -135,15 +135,14 @@ export const useCommonActions = <T extends readonly CommonActionCreator[]>(
           launchModal(LazyTolerationsModalOverlay, {
             resourceKind: kind,
             resource,
-            modalClassName: 'modal-lg',
           }),
         accessReview: asAccessReview(kind as K8sModel, resource as K8sResourceKind, 'patch'),
       }),
       [CommonActionCreator.ModifyTaints]: (): Action => ({
         id: 'edit-taints',
         label: t('console-app~Edit taints'),
         cta: () =>
-          launchModal(TaintsModalOverlay, {
+          launchModal(LazyTaintsModalOverlay, {
             resourceKind: kind,
             resource: resource as NodeKind,
           }),

frontend/packages/console-app/src/components/modals/add-group-users-modal.tsx

@@ -15,7 +15,7 @@ import { k8sPatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s';
 import { ListInput } from '@console/internal/components/utils/list-input';
 import { GroupModel } from '@console/internal/models';
 import type { GroupKind } from '@console/internal/module/k8s';
-import type { ModalComponentProps } from 'public/components/factory/modal';
+import type { ModalComponentProps } from '@console/shared/src/types/modal';
 
 type AddGroupUsersModalProps = {
   group: GroupKind;

frontend/packages/console-app/src/components/modals/clone/clone-pvc-modal.tsx

@@ -22,7 +22,6 @@ import {
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
-import type { ModalComponentProps } from '@console/internal/components/factory';
 import type { DataPoint } from '@console/internal/components/graphs';
 import { PrometheusEndpoint } from '@console/internal/components/graphs/helpers';
 import { usePrometheusPoll } from '@console/internal/components/graphs/prometheus-poll-hook';
@@ -53,6 +52,7 @@ import { k8sCreate, referenceFor } from '@console/internal/module/k8s';
 import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
 import { getName, getRequestedPVCSize, onlyPvcSCs } from '@console/shared/src/selectors';
+import type { ModalComponentProps } from '@console/shared/src/types/modal';
 import { isCephProvisioner } from '@console/shared/src/utils/storage-utils';
 import { getPVCAccessModes, AccessModeSelector } from '../../access-modes/access-mode';
 

frontend/packages/console-app/src/components/modals/resource-limits/ResourceLimitsModalLauncher.tsx

@@ -7,10 +7,10 @@ import { useTranslation } from 'react-i18next';
 import * as yup from 'yup';
 import { limitsValidationSchema } from '@console/dev-console/src/components/import/validation-schema';
 import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
-import type { ModalComponentProps } from '@console/internal/components/factory';
 import type { K8sKind, K8sResourceKind } from '@console/internal/module/k8s';
 import { k8sPatch } from '@console/internal/module/k8s';
 import { getLimitsDataFromResource, getResourceLimitsData } from '@console/shared/src';
+import type { ModalComponentProps } from '@console/shared/src/types/modal';
 import ResourceLimitsModal from './ResourceLimitsModal';
 
 export type ResourceLimitsModalLauncherProps = {

frontend/packages/console-app/src/components/modals/restore-pvc/restore-pvc-modal.tsx

@@ -19,7 +19,6 @@ import { Trans, useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { VolumeModeSelector } from '@console/app/src/components/volume-modes/volume-mode';
 import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
-import type { ModalComponentProps } from '@console/internal/components/factory';
 import {
   dropdownUnits,
   snapshotPVCStorageClassAnnotation,
@@ -54,6 +53,7 @@ import { Status } from '@console/shared/src/components/status/Status';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
 import { getName, getNamespace, getAnnotations } from '@console/shared/src/selectors/common';
 import { onlyPvcSCs } from '@console/shared/src/selectors/storage';
+import type { ModalComponentProps } from '@console/shared/src/types/modal';
 import { isCephProvisioner } from '@console/shared/src/utils/storage-utils';
 import { AccessModeSelector } from '../../access-modes/access-mode';
 

frontend/packages/console-app/src/components/nodes/modals/ConfigureUnschedulableModal.tsx

@@ -3,10 +3,10 @@ import { useState } from 'react';
 import { Button, Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
-import type { ModalComponentProps } from '@console/internal/components/factory/modal';
 import type { NodeKind } from '@console/internal/module/k8s';
 import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
+import type { ModalComponentProps } from '@console/shared/src/types/modal';
 import { makeNodeUnschedulable } from '../../../k8s/requests/nodes';
 
 type ConfigureUnschedulableModalProps = {

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-app/src/components/pdb/modals/DeletePDBModal.tsx

@@ -3,11 +3,11 @@ import { useState } from 'react';
 import { Button, Form, Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core';
 import { useTranslation, Trans } from 'react-i18next';
 import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
-import type { ModalComponentProps } from '@console/internal/components/factory/modal';
 import { LoadingInline } from '@console/internal/components/utils/status-box';
 import { k8sKill } from '@console/internal/module/k8s';
 import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
+import type { ModalComponentProps } from '@console/shared/src/types/modal';
 import { PodDisruptionBudgetModel } from '../../../models';
 import type { PodDisruptionBudgetKind } from '../types';
 

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/release-notes/4.22.md

@@ -18,6 +18,12 @@ Additional updates to these shared modules might occur before the 4.22 release i
 
 Support for PatternFly 5.x within Console is removed. Console now only uses PatternFly 6.x.
 
+> [!WARNING]
+> OpenShift web console does not support non-PatternFly CSS provided by Console in plugins.
+> The following information is provided for reference only.
+
+OpenShift web console no longer applies styling to the following CSS classes:
+- Removed CSS classes from Console core that were used for deprecated modal components. Plugins that reference these classes in their custom CSS should migrate to PatternFly v6 modal classes (e.g., `.pf-v6-c-modal-box__body`) or use data-test attributes. Removed classes: `.co-overlay`, `.modal-footer`, `.modal-paragraph`, `.modal-header`, `.modal-body`, `.modal-body-border`, `.modal-body-content`, `.modal-content`, `.modal-dialog`, `.co-modal-table`, `.modal__inline-resource-link`.
 ## Removal of `@openshift-console/plugin-shared`
 
 The `@openshift-console/plugin-shared` package has been removed from the Console codebase, and the

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/locales/en/console-shared.json

@@ -174,7 +174,6 @@
   "Container {{containersName}} does not have health checks to ensure your Application is running correctly.": "Container {{containersName}} does not have health checks to ensure your Application is running correctly.",
   "Health checks": "Health checks",
   "Add health checks": "Add health checks",
-  "Unknown error removing {{hpaLabel}} {{hpaName}}.": "Unknown error removing {{hpaLabel}} {{hpaName}}.",
   "Remove {{label}}?": "Remove {{label}}?",
   "Are you sure you want to remove the {{hpaLabel}}": "Are you sure you want to remove the {{hpaLabel}}",
   "from": "from",
@@ -205,7 +204,7 @@
   "Description": "Description",
   "Delete": "Delete",
   "This action cannot be undone. All associated Deployments, Routes, Builds, Pipelines, Storage/PVCs, Secrets, and ConfigMaps will be deleted.": "This action cannot be undone. All associated Deployments, Routes, Builds, Pipelines, Storage/PVCs, Secrets, and ConfigMaps will be deleted.",
-  "Confirm deletion by typing <1>{{resourceName}}</1> below:": "Confirm deletion by typing <1>{{resourceName}}</1> below:",
+  "Confirm deletion by typing <2>{{resourceName}}</2> below:": "Confirm deletion by typing <2>{{resourceName}}</2> below:",
   "Description:": "Description:",
   "Component trace:": "Component trace:",
   "Stack trace:": "Stack trace:",

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

@@ -6,7 +6,7 @@ import { Link, useNavigate } from 'react-router-dom-v5-compat';
 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/lib-core';
 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,