[WIP] CONSOLE-4447: Migrate @console/shared modals to PatternFly v6 Modal components

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

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import i18next from 'i18next';
 import type { Action } from '@console/dynamic-plugin-sdk';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { useK8sWatchResources } from '@console/internal/components/utils/k8s-watch-hook';
 import { HorizontalPodAutoscalerModel } from '@console/internal/models';
 import type {
@@ -12,84 +13,23 @@ import type {
 import { referenceForModel } from '@console/internal/module/k8s';
 import type { ClusterServiceVersionKind } from '@console/operator-lifecycle-manager';
 import { ClusterServiceVersionModel } from '@console/operator-lifecycle-manager';
-import deleteHPAModal from '@console/shared/src/components/hpa/DeleteHPAModal';
+import { LazyDeleteHPAModalOverlay } from '@console/shared/src/components/hpa';
 import { isHelmResource } from '@console/shared/src/utils/helm-utils';
 import { doesHpaMatch } from '@console/shared/src/utils/hpa-utils';
 import { isOperatorBackedService } from '@console/shared/src/utils/operator-utils';
-import type { ResourceActionFactory } from './types';
 
 const hpaRoute = (
   { metadata: { name = '', namespace = '' } = {} }: K8sResourceCommon,
   kind: K8sKind,
 ) => `/workload-hpa/ns/${namespace}/${referenceForModel(kind)}/${name}`;
 
-export const HpaActionFactory: ResourceActionFactory = {
-  AddHorizontalPodAutoScaler: (kind: K8sKind, obj: K8sResourceKind) => ({
-    id: 'add-hpa',
-    label: i18next.t('console-app~Add HorizontalPodAutoscaler'),
-    cta: { href: hpaRoute(obj, kind) },
-    insertBefore: 'add-pdb',
-    accessReview: {
-      group: HorizontalPodAutoscalerModel.apiGroup,
-      resource: HorizontalPodAutoscalerModel.plural,
-      namespace: obj.metadata?.namespace,
-      verb: 'create',
-    },
-  }),
-  EditHorizontalPodAutoScaler: (kind: K8sKind, obj: K8sResourceCommon) => ({
-    id: 'edit-hpa',
-    label: i18next.t('console-app~Edit HorizontalPodAutoscaler'),
-    cta: { href: hpaRoute(obj, kind) },
-    insertBefore: 'add-pdb',
-    accessReview: {
-      group: HorizontalPodAutoscalerModel.apiGroup,
-      resource: HorizontalPodAutoscalerModel.plural,
-      namespace: obj.metadata?.namespace,
-      verb: 'update',
-    },
-  }),
-  DeleteHorizontalPodAutoScaler: (
-    kind: K8sKind,
-    obj: K8sResourceCommon,
-    relatedHPA: HorizontalPodAutoscalerKind,
-  ) => ({
-    id: 'delete-hpa',
-    label: i18next.t('console-app~Remove HorizontalPodAutoscaler'),
-    insertBefore: 'delete-pdb',
-    cta: () => {
-      deleteHPAModal({
-        workload: obj,
-        hpa: relatedHPA,
-      });
-    },
-    accessReview: {
-      group: HorizontalPodAutoscalerModel.apiGroup,
-      resource: HorizontalPodAutoscalerModel.plural,
-      namespace: obj.metadata?.namespace,
-      verb: 'delete',
-    },
-  }),
-};
-
-export const getHpaActions = (
-  kind: K8sKind,
-  obj: K8sResourceKind,
-  relatedHPAs: K8sResourceKind[],
-): Action[] => {
-  if (relatedHPAs.length === 0) return [HpaActionFactory.AddHorizontalPodAutoScaler(kind, obj)];
-
-  return [
-    HpaActionFactory.EditHorizontalPodAutoScaler(kind, obj),
-    HpaActionFactory.DeleteHorizontalPodAutoScaler(kind, obj, relatedHPAs[0]),
-  ];
-};
-
 type DeploymentActionExtraResources = {
   hpas: HorizontalPodAutoscalerKind[];
   csvs: ClusterServiceVersionKind[];
 };
 
 export const useHPAActions = (kindObj: K8sKind, resource: K8sResourceKind) => {
+  const launchModal = useOverlay();
   const namespace = resource?.metadata?.namespace;
 
   const watchedResources = useMemo(
@@ -121,9 +61,63 @@ export const useHPAActions = (kindObj: K8sKind, resource: K8sResourceKind) => {
     [extraResources.csvs.data, resource],
   );
 
-  const result = useMemo<[Action[], HorizontalPodAutoscalerKind[]]>(() => {
-    return [supportsHPA ? getHpaActions(kindObj, resource, relatedHPAs) : [], relatedHPAs];
+  const actions = useMemo<Action[]>(() => {
+    if (!supportsHPA) return [];
+
+    if (relatedHPAs.length === 0) {
+      return [
+        {
+          id: 'add-hpa',
+          label: i18next.t('console-app~Add HorizontalPodAutoscaler'),
+          cta: { href: hpaRoute(resource, kindObj) },
+          insertBefore: 'add-pdb',
+          accessReview: {
+            group: HorizontalPodAutoscalerModel.apiGroup,
+            resource: HorizontalPodAutoscalerModel.plural,
+            namespace: resource.metadata?.namespace,
+            verb: 'create',
+          },
+        },
+      ];
+    }
+    return [
+      {
+        id: 'edit-hpa',
+        label: i18next.t('console-app~Edit HorizontalPodAutoscaler'),
+        cta: { href: hpaRoute(resource, kindObj) },
+        insertBefore: 'add-pdb',
+        accessReview: {
+          group: HorizontalPodAutoscalerModel.apiGroup,
+          resource: HorizontalPodAutoscalerModel.plural,
+          namespace: resource.metadata?.namespace,
+          verb: 'update',
+        },
+      },
+      {
+        id: 'delete-hpa',
+        label: i18next.t('console-app~Remove HorizontalPodAutoscaler'),
+        insertBefore: 'delete-pdb',
+        cta: () => {
+          launchModal(LazyDeleteHPAModalOverlay, {
+            workload: resource,
+            hpa: relatedHPAs[0],
+          });
+        },
+        accessReview: {
+          group: HorizontalPodAutoscalerModel.apiGroup,
+          resource: HorizontalPodAutoscalerModel.plural,
+          namespace: resource.metadata?.namespace,
+          verb: 'delete',
+        },
+      },
+    ];
+    // 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];
+  }, [actions, relatedHPAs]);
+
   return result;
 };

frontend/packages/console-app/src/components/console-operator/ConsoleOperatorConfig.tsx

@@ -11,6 +11,7 @@ import { Link } from 'react-router-dom';
 import { useLocation } from 'react-router-dom-v5-compat';
 import type { WatchK8sResource } from '@console/dynamic-plugin-sdk';
 import { useAccessReview } from '@console/dynamic-plugin-sdk';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import {
   getGroupVersionKindForModel,
   getReferenceForModel,
@@ -35,7 +36,7 @@ import { referenceForModel } from '@console/internal/module/k8s';
 import type { RootState } from '@console/internal/redux';
 import { usePluginInfo } from '@console/plugin-sdk/src/api/usePluginInfo';
 import PaneBody from '@console/shared/src/components/layout/PaneBody';
-import { consolePluginModal } from '@console/shared/src/components/modals/ConsolePluginModal';
+import { LazyConsolePluginModalOverlay } from '@console/shared/src/components/modals';
 import {
   GreenCheckCircleIcon,
   YellowExclamationTriangleIcon,
@@ -102,6 +103,7 @@ export const ConsolePluginEnabledStatus: FC<ConsolePluginEnabledStatusProps> = (
   enabled,
 }) => {
   const { t } = useTranslation('console-app');
+  const launchModal = useOverlay();
 
   const {
     consoleOperatorConfig,
@@ -121,7 +123,7 @@ export const ConsolePluginEnabledStatus: FC<ConsolePluginEnabledStatusProps> = (
           type="button"
           isInline
           onClick={() =>
-            consolePluginModal({
+            launchModal(LazyConsolePluginModalOverlay, {
               consoleOperatorConfig,
               pluginName,
               trusted: false,

frontend/packages/console-app/src/components/favorite/FavoriteButton.tsx

@@ -9,10 +9,13 @@ import {
   HelperTextItem,
   TextInput,
   Tooltip,
+  Modal,
+  ModalVariant,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
 } from '@patternfly/react-core';
-import { ModalVariant } from '@patternfly/react-core/deprecated';
 import { useTranslation } from 'react-i18next';
-import Modal from '@console/shared/src/components/modal/Modal';
 import { useTelemetry } from '@console/shared/src/hooks/useTelemetry';
 import { useUserSettingsCompatibility } from '@console/shared/src/hooks/useUserSettingsCompatibility';
 import { FAVORITES_CONFIG_MAP_KEY, FAVORITES_LOCAL_STORAGE_KEY } from '../../consts';
@@ -78,7 +81,8 @@ export const FavoriteButton = ({ defaultName }: FavoriteButtonProps) => {
     setIsModalOpen(false);
   };
 
-  const handleConfirmStar = () => {
+  const handleConfirmStar = (e?: React.FormEvent) => {
+    e?.preventDefault();
     const trimmedName = name.trim();
     if (!trimmedName) {
       setError(t('Name is required.'));
@@ -151,46 +155,44 @@ export const FavoriteButton = ({ defaultName }: FavoriteButtonProps) => {
       </Tooltip>
 
       {isModalOpen && (
-        <Modal
-          title={t('Add to favorites')}
-          isOpen={isModalOpen}
-          onClose={handleModalClose}
-          actions={[
+        <Modal isOpen={isModalOpen} onClose={handleModalClose} variant={ModalVariant.small}>
+          <ModalHeader title={t('Add to favorites')} />
+          <ModalBody>
+            <Form id="confirm-favorite-form" onSubmit={handleConfirmStar}>
+              <FormGroup label={t('Name')} isRequired fieldId="input-name">
+                <TextInput
+                  id="confirm-favorite-form-name"
+                  data-test="input-name"
+                  name="name"
+                  type="text"
+                  onChange={(e, v) => handleNameChange(v)}
+                  value={name || ''}
+                  autoFocus
+                  required
+                />
+                {error && (
+                  <FormHelperText>
+                    <HelperText>
+                      <HelperTextItem variant="error">{error}</HelperTextItem>
+                    </HelperText>
+                  </FormHelperText>
+                )}
+              </FormGroup>
+            </Form>
+          </ModalBody>
+          <ModalFooter>
             <Button
               key="confirm"
               variant="primary"
               onClick={handleConfirmStar}
-              form="confirm-favorite"
+              form="confirm-favorite-form"
             >
               {t('Save')}
-            </Button>,
+            </Button>
             <Button key="cancel" variant="link" onClick={handleModalClose}>
               {t('Cancel')}
-            </Button>,
-          ]}
-          variant={ModalVariant.small}
-        >
-          <Form id="confirm-favorite-form" onSubmit={handleConfirmStar}>
-            <FormGroup label={t('Name')} isRequired fieldId="input-name">
-              <TextInput
-                id="confirm-favorite-form-name"
-                data-test="input-name"
-                name="name"
-                type="text"
-                onChange={(e, v) => handleNameChange(v)}
-                value={name || ''}
-                autoFocus
-                required
-              />
-              {error && (
-                <FormHelperText>
-                  <HelperText>
-                    <HelperTextItem variant="error">{error}</HelperTextItem>
-                  </HelperText>
-                </FormHelperText>
-              )}
-            </FormGroup>
-          </Form>
+            </Button>
+          </ModalFooter>
         </Modal>
       )}
     </div>

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

@@ -91,9 +91,6 @@ const AddGroupUsersModal: OverlayComponent<AddGroupUsersModalProps> = ({ group,
         )}
       </ModalBody>
       <ModalFooter>
-        <Button variant="secondary" onClick={closeOverlay} type="button">
-          {t('public~Cancel')}
-        </Button>
         <Button
           type="submit"
           variant="primary"
@@ -103,6 +100,9 @@ const AddGroupUsersModal: OverlayComponent<AddGroupUsersModalProps> = ({ group,
         >
           {t('public~Save')}
         </Button>
+        <Button variant="link" onClick={closeOverlay} type="button">
+          {t('public~Cancel')}
+        </Button>
       </ModalFooter>
     </Modal>
   );

frontend/packages/console-app/src/components/tour/TourStepComponent.tsx

@@ -3,14 +3,14 @@ import { useContext } from 'react';
 import {
   Grid,
   GridItem,
+  Modal,
   ModalBody,
   ModalFooter,
   ModalHeader,
   ModalVariant,
 } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { ThemeContext } from '@console/internal/components/ThemeProvider';
-import Modal from '@console/shared/src/components/modal/Modal';
 import type { PopoverPlacement } from '@console/shared/src/components/popover/const';
 import Popover from '@console/shared/src/components/popover/Popover';
 import Spotlight from '@console/shared/src/components/spotlight/Spotlight';
@@ -108,7 +108,6 @@ const TourStepComponent: FC<TourStepComponentProps> = ({
       id="guided-tour-modal"
       data-test="guided-tour-modal"
       aria-label={t('console-app~guided tour {{step, number}}', { step })}
-      isFullScreen
     >
       <ModalBody>
         <Grid hasGutter>

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/actions/menu/ActionMenuItem.tsx

@@ -5,10 +5,10 @@ import { KeyTypes, MenuItem, Tooltip } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import * as _ from 'lodash';
 import { connect } from 'react-redux';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import type { Action, ImpersonateKind } from '@console/dynamic-plugin-sdk';
 import { impersonateStateToProps } from '@console/dynamic-plugin-sdk';
 import { useAccessReview } from '@console/internal/components/utils/rbac';
-import { history } from '@console/internal/components/utils/router';
 
 export type ActionMenuItemProps = {
   action: Action;
@@ -26,6 +26,7 @@ const ActionItem: FC<ActionMenuItemProps & { isAllowed: boolean }> = ({
   isAllowed,
   component,
 }) => {
+  const navigate = useNavigate();
   const { label, icon, disabled, cta } = action;
   const { href, external } = cta as { href: string; external?: boolean };
   const isDisabled = !isAllowed || disabled;
@@ -38,13 +39,13 @@ const ActionItem: FC<ActionMenuItemProps & { isAllowed: boolean }> = ({
         cta();
       } else if (_.isObject(cta)) {
         if (!cta.external) {
-          history.push(cta.href);
+          navigate(cta.href);
         }
       }
       onClick && onClick();
       event.stopPropagation();
     },
-    [cta, onClick],
+    [cta, onClick, navigate],
   );
 
   const handleKeyDown = (event) => {