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

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/hpa/DeleteHPAModal.tsx

@@ -1,55 +1,39 @@
-import type { FC } from 'react';
 import { useState } from 'react';
-import { Form } from '@patternfly/react-core';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens';
+import type { FC } from 'react';
+import { Button, Form, 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 {
-  ModalBody,
-  ModalSubmitFooter,
-  ModalTitle,
-  ModalWrapper,
-} from '@console/internal/components/factory/modal';
 import { LoadingInline } from '@console/internal/components/utils/status-box';
 import { HorizontalPodAutoscalerModel } from '@console/internal/models';
 import type { HorizontalPodAutoscalerKind, K8sResourceCommon } from '@console/internal/module/k8s';
 import { k8sKill } from '@console/internal/module/k8s';
+import { usePromiseHandler } from '@console/shared/src/hooks/usePromiseHandler';
+import { ModalFooterWithAlerts } from '../modals/ModalFooterWithAlerts';
 
 const DeleteHPAModal: FC<DeleteHPAModalProps> = ({ close, cancel, hpa, workload }) => {
-  const [submitError, setSubmitError] = useState<string>(null);
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [handlePromise, inProgress, errorMessage] = usePromiseHandler();
   const { t } = useTranslation();
   const hpaName = hpa.metadata.name;
   const workloadName = workload.metadata.name;
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    setIsSubmitting(true);
-    k8sKill(HorizontalPodAutoscalerModel, hpa)
-      .then(() => {
-        close();
-      })
-      .catch((error) => {
-        setSubmitError(
-          error?.message ||
-            t('console-shared~Unknown error removing {{hpaLabel}} {{hpaName}}.', {
-              hpaLabel: HorizontalPodAutoscalerModel.label,
-              hpaName,
-            }),
-        );
-      });
+    return handlePromise(k8sKill(HorizontalPodAutoscalerModel, hpa)).then(() => {
+      close();
+    });
   };
 
   return (
-    <Form onSubmit={handleSubmit}>
-      <div className="modal-content">
-        <ModalTitle>
-          <ExclamationTriangleIcon color={warningColor.value} />{' '}
-          {t('console-shared~Remove {{label}}?', { label: HorizontalPodAutoscalerModel.label })}
-        </ModalTitle>
-        <ModalBody>
+    <>
+      <ModalHeader
+        title={t('console-shared~Remove {{label}}?', { label: HorizontalPodAutoscalerModel.label })}
+        titleIconVariant="warning"
+        labelId="delete-hpa-modal-title"
+        data-test-id="modal-title"
+      />
+      <ModalBody>
+        <Form id="delete-hpa-modal-form">
           {hpaName ? (
             <>
               <p>
@@ -66,33 +50,57 @@ const DeleteHPAModal: FC<DeleteHPAModalProps> = ({ close, cancel, hpa, workload
               </p>
             </>
           ) : (
-            !submitError && <LoadingInline />
+            !errorMessage && <LoadingInline />
           )}
-        </ModalBody>
-        <ModalSubmitFooter
-          errorMessage={submitError}
-          inProgress={isSubmitting}
-          submitText={t('console-shared~Remove')}
-          submitDanger
-          submitDisabled={!!submitError}
-          cancel={cancel}
-        />
-      </div>
-    </Form>
+        </Form>
+      </ModalBody>
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
+        <Button
+          type="submit"
+          variant="danger"
+          onClick={handleSubmit}
+          form="delete-hpa-modal-form"
+          isLoading={inProgress}
+          isDisabled={inProgress || !!errorMessage}
+          data-test="confirm-action"
+        >
+          {t('console-shared~Remove')}
+        </Button>
+        <Button variant="link" onClick={cancel}>
+          {t('console-shared~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
+    </>
   );
 };
 
-export const DeleteHPAModalOverlay: OverlayComponent<DeleteHPAModalProps> = (props) => {
-  return (
-    <ModalWrapper blocking onClose={props.closeOverlay}>
+export const DeleteHPAModalOverlay: OverlayComponent<DeleteHPAModalOverlayProps> = (props) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const handleClose = () => {
+    setIsOpen(false);
+    props.closeOverlay();
+  };
+
+  return isOpen ? (
+    <Modal
+      variant={ModalVariant.small}
+      isOpen
+      onClose={handleClose}
+      aria-labelledby="delete-hpa-modal-title"
+    >
       <DeleteHPAModal
-        close={props.closeOverlay}
-        cancel={props.closeOverlay}
+        close={handleClose}
+        cancel={handleClose}
         hpa={props.hpa}
         workload={props.workload}
       />
-    </ModalWrapper>
-  );
+    </Modal>
+  ) : null;
+};
+
+type DeleteHPAModalOverlayProps = {
+  hpa: HorizontalPodAutoscalerKind;
+  workload: K8sResourceCommon;
 };
 
 type DeleteHPAModalProps = ModalComponentProps & {

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

@@ -1,13 +1,17 @@
 import { useState } from 'react';
+import {
+  Button,
+  Content,
+  ContentVariants,
+  Form,
+  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 {
-  ModalTitle,
-  ModalBody,
-  ModalSubmitFooter,
-  ModalWrapper,
-} from '@console/internal/components/factory/modal';
 import { ConsoleOperatorConfigModel } from '@console/internal/models';
 import type { K8sResourceKind } from '@console/internal/module/k8s';
 import { k8sPatch } from '@console/internal/module/k8s';
@@ -17,6 +21,7 @@ import {
 } from '@console/shared/src/components/utils';
 import { usePromiseHandler } from '@console/shared/src/hooks/usePromiseHandler';
 import { getPluginPatch, isPluginEnabled } from '@console/shared/src/utils';
+import { ModalFooterWithAlerts } from './ModalFooterWithAlerts';
 
 export const ConsolePluginModal = (props: ConsolePluginModalProps) => {
   const { cancel, close, consoleOperatorConfig, csvPluginsCount, pluginName, trusted } = props;
@@ -34,58 +39,95 @@ export const ConsolePluginModal = (props: ConsolePluginModalProps) => {
   };
 
   return (
-    <form onSubmit={submit} name="form" className="modal-content">
-      <ModalTitle>
-        {csvPluginsCount > 1
-          ? t('console-shared~Console plugin enablement - {{plugin}}', { plugin: pluginName })
-          : t('console-shared~Console plugin enablement')}
-      </ModalTitle>
+    <>
+      <ModalHeader
+        title={
+          csvPluginsCount > 1
+            ? t('console-shared~Console plugin enablement - {{plugin}}', { plugin: pluginName })
+            : t('console-shared~Console plugin enablement')
+        }
+        labelId="console-plugin-modal-title"
+        data-test-id="modal-title"
+      />
       <ModalBody>
-        <p>
+        <Content component={ContentVariants.p}>
           {csvPluginsCount
             ? t(
                 'console-shared~This operator includes a console plugin which provides a custom interface that can be included in the console. Updating the enablement of this console plugin will prompt for the console to be refreshed once it has been updated. Make sure you trust this console plugin before enabling.',
               )
             : t(
                 'console-shared~This console plugin provides a custom interface that can be included in the console. Updating the enablement of this console plugin will prompt for the console to be refreshed once it has been updated. Make sure you trust this console plugin before enabling.',
               )}
-        </p>
-        <ConsolePluginRadioInputs
-          autofocus
-          name={pluginName}
-          enabled={enabled}
-          onChange={setEnabled}
-        />
-        <ConsolePluginWarning
-          previouslyEnabled={previouslyEnabled}
-          enabled={enabled}
-          trusted={trusted}
-        />
+        </Content>
+        <Form id="console-plugin-modal-form">
+          <ConsolePluginRadioInputs
+            autofocus
+            name={pluginName}
+            enabled={enabled}
+            onChange={setEnabled}
+          />
+          <ConsolePluginWarning
+            previouslyEnabled={previouslyEnabled}
+            enabled={enabled}
+            trusted={trusted}
+          />
+        </Form>
       </ModalBody>
-      <ModalSubmitFooter
-        errorMessage={errorMessage}
-        inProgress={inProgress}
-        submitText={t('public~Save')}
-        cancel={cancel}
-        submitDisabled={(previouslyEnabled && enabled) || (!previouslyEnabled && !enabled)}
-      />
-    </form>
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
+        <Button
+          type="submit"
+          variant="primary"
+          onClick={submit}
+          form="console-plugin-modal-form"
+          isLoading={inProgress}
+          isDisabled={
+            inProgress || (previouslyEnabled && enabled) || (!previouslyEnabled && !enabled)
+          }
+          data-test="confirm-action"
+        >
+          {t('public~Save')}
+        </Button>
+        <Button variant="link" onClick={cancel} data-test-id="modal-cancel-action">
+          {t('public~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
+    </>
   );
 };
 
-export const ConsolePluginModalOverlay: OverlayComponent<ConsolePluginModalProps> = (props) => {
-  return (
-    <ModalWrapper blocking onClose={props.closeOverlay}>
+export const ConsolePluginModalOverlay: OverlayComponent<ConsolePluginModalProviderProps> = (
+  props,
+) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const handleClose = () => {
+    setIsOpen(false);
+    props.closeOverlay();
+  };
+
+  return isOpen ? (
+    <Modal
+      variant={ModalVariant.small}
+      isOpen
+      onClose={handleClose}
+      aria-labelledby="console-plugin-modal-title"
+    >
       <ConsolePluginModal
-        close={props.closeOverlay}
-        cancel={props.closeOverlay}
+        close={handleClose}
+        cancel={handleClose}
         consoleOperatorConfig={props.consoleOperatorConfig}
         csvPluginsCount={props.csvPluginsCount}
         pluginName={props.pluginName}
         trusted={props.trusted}
       />
-    </ModalWrapper>
-  );
+    </Modal>
+  ) : null;
+};
+
+type ConsolePluginModalProviderProps = {
+  consoleOperatorConfig: K8sResourceKind;
+  csvPluginsCount?: number;
+  pluginName: string;
+  trusted: boolean;
 };
 
 export type ConsolePluginModalProps = {