CONSOLE-4712: Remove PromiseComponent and convert its dependent components to functional components

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { TextInputTypes } from '@patternfly/react-core';
 import { Formik, FormikProps, FormikValues } from 'formik';
 import { useTranslation, Trans } from 'react-i18next';
@@ -8,9 +7,9 @@ import {
   ModalBody,
   ModalSubmitFooter,
 } from '@console/internal/components/factory/modal';
-import { PromiseComponent } from '@console/internal/components/utils/promise-component';
 import { history } from '@console/internal/components/utils/router';
 import { K8sResourceKind } from '@console/internal/module/k8s';
+import { usePromiseHandler } from '../../hooks/promise-handler';
 import { InputField } from '../formik-fields';
 import { YellowExclamationTriangleIcon } from '../status';
 
@@ -25,11 +24,6 @@ type DeleteResourceModalProps = {
   close?: () => void;
 };
 
-type DeleteResourceModalState = {
-  inProgress: boolean;
-  errorMessage: string;
-};
-
 const DeleteResourceForm: React.FC<FormikProps<FormikValues> & DeleteResourceModalProps> = ({
   handleSubmit,
   resourceName,
@@ -76,15 +70,15 @@ const DeleteResourceForm: React.FC<FormikProps<FormikValues> & DeleteResourceMod
   );
 };
 
-class DeleteResourceModal extends PromiseComponent<
-  DeleteResourceModalProps,
-  DeleteResourceModalState
-> {
-  private handleSubmit = (values, actions) => {
-    const { onSubmit, close, redirect } = this.props;
+const DeleteResourceModal: React.FC<DeleteResourceModalProps> = (props) => {
+  const [handlePromise] = usePromiseHandler();
+
+  const handleSubmit = (values: FormikValues, actions) => {
+    const { onSubmit, close, redirect } = props;
+    actions.setStatus({ submitError: null });
     return (
       onSubmit &&
-      this.handlePromise(onSubmit(values))
+      handlePromise(onSubmit(values))
         .then(() => {
           close();
           redirect && history.push(redirect);
@@ -95,17 +89,16 @@ class DeleteResourceModal extends PromiseComponent<
     );
   };
 
-  render() {
-    const initialValues = {
-      resourceName: '',
-    };
-    return (
-      <Formik initialValues={initialValues} onSubmit={this.handleSubmit}>
-        {(formikProps) => <DeleteResourceForm {...formikProps} {...this.props} />}
-      </Formik>
-    );
-  }
-}
+  const initialValues = {
+    resourceName: '',
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      {(formikProps) => <DeleteResourceForm {...formikProps} {...props} />}
+    </Formik>
+  );
+};
 
 export const deleteResourceModal = createModalLauncher((props: DeleteResourceModalProps) => (
   <DeleteResourceModal {...props} />

frontend/packages/integration-tests-cypress/tests/crud/secrets/image-pull.cy.ts

@@ -22,7 +22,7 @@ describe('Image pull secrets', () => {
   });
 
   after(() => {
-    cy.deleteProjectWithCLI(testName);
+    cy.exec(`oc delete project ${testName} --wait=false`);
   });
 
   it(`Creates, edits, and deletes an image registry credentials pull secret`, () => {

frontend/packages/topology/src/components/modals/EditApplicationModal.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Title } from '@patternfly/react-core';
 import { Formik, FormikProps, FormikValues } from 'formik';
-import * as _ from 'lodash';
 import { Trans, useTranslation } from 'react-i18next';
 import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
@@ -11,8 +10,8 @@ import {
   ModalSubmitFooter,
   ModalWrapper,
 } from '@console/internal/components/factory/modal';
-import { PromiseComponent } from '@console/internal/components/utils';
 import { K8sKind, K8sResourceKind } from '@console/internal/module/k8s';
+import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
 import { UNASSIGNED_KEY } from '../../const';
 import { updateResourceApplication } from '../../utils/application-utils';
 import ApplicationSelector from '../dropdowns/ApplicationSelector';
@@ -23,11 +22,6 @@ type EditApplicationFormProps = {
   cancel?: () => void;
 };
 
-type EditApplicationModalState = {
-  inProgress: boolean;
-  errorMessage: string;
-};
-
 type EditApplicationModalProps = EditApplicationFormProps & {
   resourceKind: K8sKind;
   close?: () => void;
@@ -43,7 +37,7 @@ const EditApplicationForm: React.FC<FormikProps<FormikValues> & EditApplicationF
   status,
 }) => {
   const { t } = useTranslation();
-  const dirty = _.get(values, 'application.selectedKey') !== initialApplication;
+  const dirty = values?.application?.selectedKey !== initialApplication;
   return (
     <form onSubmit={handleSubmit} className="modal-content">
       <ModalTitle>{t('topology~Edit application grouping')}</ModalTitle>
@@ -69,43 +63,43 @@ const EditApplicationForm: React.FC<FormikProps<FormikValues> & EditApplicationF
   );
 };
 
-class EditApplicationModal extends PromiseComponent<
-  EditApplicationModalProps,
-  EditApplicationModalState
-> {
-  private handleSubmit = (values, actions) => {
-    const { resourceKind, resource } = this.props;
-    const applicationKey = values.application.selectedKey;
-    const application = applicationKey === UNASSIGNED_KEY ? undefined : values.application.name;
+const EditApplicationModal: React.FC<EditApplicationModalProps> = (props) => {
+  const { resourceKind, resource, close } = props;
+  const [handlePromise] = usePromiseHandler();
 
-    return this.handlePromise(updateResourceApplication(resourceKind, resource, application))
-      .then(() => {
-        this.props.close();
-      })
-      .catch((errorMessage) => {
-        actions.setStatus({ submitError: errorMessage });
-      });
-  };
+  const handleSubmit = React.useCallback(
+    (values, actions) => {
+      const applicationKey = values.application.selectedKey;
+      const application = applicationKey === UNASSIGNED_KEY ? undefined : values.application.name;
+
+      return handlePromise(updateResourceApplication(resourceKind, resource, application))
+        .then(() => {
+          close();
+        })
+        .catch((errorMessage) => {
+          actions.setStatus({ submitError: errorMessage });
+        });
+    },
+    [resourceKind, resource, handlePromise, close],
+  );
 
-  render() {
-    const { resource } = this.props;
-    const application = _.get(resource, ['metadata', 'labels', 'app.kubernetes.io/part-of']);
+  const application = resource?.metadata?.labels?.['app.kubernetes.io/part-of'];
 
-    const initialValues = {
-      application: {
-        name: application,
-        selectedKey: application || UNASSIGNED_KEY,
-      },
-    };
-    return (
-      <Formik initialValues={initialValues} onSubmit={this.handleSubmit}>
-        {(formikProps) => (
-          <EditApplicationForm {...formikProps} {...this.props} initialApplication={application} />
-        )}
-      </Formik>
-    );
-  }
-}
+  const initialValues = {
+    application: {
+      name: application,
+      selectedKey: application || UNASSIGNED_KEY,
+    },
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      {(formikProps) => (
+        <EditApplicationForm {...formikProps} {...props} initialApplication={application} />
+      )}
+    </Formik>
+  );
+};
 
 const EditApplicationModalProvider: OverlayComponent<EditApplicationModalProps> = (props) => {
   return (

frontend/packages/topology/src/components/modals/MoveConnectionModal.tsx

@@ -10,7 +10,6 @@ import {
 } from '@patternfly/react-core';
 import { Edge, Node } from '@patternfly/react-topology';
 import { Formik, FormikProps, FormikValues } from 'formik';
-import { TFunction } from 'i18next';
 import { Trans, useTranslation } from 'react-i18next';
 import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
@@ -20,7 +19,7 @@ import {
   ModalSubmitFooter,
   ModalWrapper,
 } from '@console/internal/components/factory/modal';
-import { PromiseComponent, ResourceIcon } from '@console/internal/components/utils';
+import { ResourceIcon } from '@console/internal/components/utils';
 import { K8sResourceKind } from '@console/internal/module/k8s';
 import {
   TYPE_EVENT_SOURCE_LINK,
@@ -30,6 +29,7 @@ import {
   createEventSourceKafkaConnection,
   createSinkConnection,
 } from '@console/knative-plugin/src/topology/knative-topology-utils';
+import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
 import { TYPE_CONNECTS_TO } from '../../const';
 import { createConnection } from '../../utils';
 
@@ -40,11 +40,6 @@ type MoveConnectionModalProps = {
   close?: () => void;
 };
 
-type MoveConnectionModalState = {
-  inProgress: boolean;
-  errorMessage: string;
-};
-
 const nodeItem = (node: Node) => (
   <span>
     <span className="co-icon-space-r">
@@ -54,22 +49,19 @@ const nodeItem = (node: Node) => (
   </span>
 );
 
-const MoveConnectionForm: React.FC<
-  FormikProps<FormikValues> & MoveConnectionModalProps & { setTranslator: (t: TFunction) => void }
-> = ({
+const MoveConnectionForm: React.FC<FormikProps<FormikValues> & MoveConnectionModalProps> = ({
   handleSubmit,
   isSubmitting,
-  setTranslator,
   cancel,
   values,
+  setFieldValue,
   edge,
   availableTargets,
   status,
 }) => {
   const { t } = useTranslation();
   const [isOpen, setOpen] = React.useState<boolean>(false);
   const isDirty = values.target.getId() !== edge.getTarget().getId();
-  setTranslator(t);
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
@@ -100,7 +92,7 @@ const MoveConnectionForm: React.FC<
               // @ts-expect-error FIXME: PatternFly's onSelect is typed wrong (value should be any)
               onSelect={(_, value: Node) => {
                 if (value) {
-                  values.target = value;
+                  setFieldValue('target', value);
                 }
                 setOpen(false);
               }}
@@ -134,61 +126,56 @@ const MoveConnectionForm: React.FC<
   );
 };
 
-class MoveConnectionModal extends PromiseComponent<
-  MoveConnectionModalProps,
-  MoveConnectionModalState
-> {
-  private t: TFunction;
+const MoveConnectionModal: React.FC<MoveConnectionModalProps> = (props) => {
+  const { edge, close } = props;
+  const { t } = useTranslation();
+  const [handlePromise] = usePromiseHandler();
 
-  private onSubmit = (newTarget: Node): Promise<K8sResourceKind[] | K8sResourceKind> => {
-    const { edge } = this.props;
-    switch (edge.getType()) {
-      case TYPE_CONNECTS_TO:
-        return createConnection(edge.getSource(), newTarget, edge.getTarget());
-      case TYPE_EVENT_SOURCE_LINK:
-        return createSinkConnection(edge.getSource(), newTarget);
-      case TYPE_KAFKA_CONNECTION_LINK:
-        return createEventSourceKafkaConnection(edge.getSource(), newTarget);
-      default:
-        return Promise.reject(
-          new Error(
-            this.t('topology~Unable to move connector of type {{type}}.', {
-              type: edge.getType(),
-            }),
-          ),
-        );
-    }
-  };
+  const onSubmit = React.useCallback(
+    (newTarget: Node): Promise<K8sResourceKind[] | K8sResourceKind> => {
+      switch (edge.getType()) {
+        case TYPE_CONNECTS_TO:
+          return createConnection(edge.getSource(), newTarget, edge.getTarget());
+        case TYPE_EVENT_SOURCE_LINK:
+          return createSinkConnection(edge.getSource(), newTarget);
+        case TYPE_KAFKA_CONNECTION_LINK:
+          return createEventSourceKafkaConnection(edge.getSource(), newTarget);
+        default:
+          return Promise.reject(
+            new Error(
+              t('topology~Unable to move connector of type {{type}}.', {
+                type: edge.getType(),
+              }),
+            ),
+          );
+      }
+    },
+    [edge, t],
+  );
 
-  private handleSubmit = (values, actions) => {
-    const { close } = this.props;
-    return this.handlePromise(this.onSubmit(values.target))
-      .then(() => {
-        close();
-      })
-      .catch((err) => {
-        actions.setStatus({ submitError: err });
-      });
-  };
+  const handleSubmit = React.useCallback(
+    (values, actions) => {
+      return handlePromise(onSubmit(values.target))
+        .then(() => {
+          close();
+        })
+        .catch((err) => {
+          actions.setStatus({ submitError: err });
+        });
+    },
+    [handlePromise, onSubmit, close],
+  );
 
-  private setTranslator = (t: TFunction) => {
-    this.t = t;
+  const initialValues = {
+    target: edge.getTarget(),
   };
 
-  render() {
-    const { edge } = this.props;
-    const initialValues = {
-      target: edge.getTarget(),
-    };
-    return (
-      <Formik initialValues={initialValues} onSubmit={this.handleSubmit}>
-        {(formikProps) => (
-          <MoveConnectionForm setTranslator={this.setTranslator} {...formikProps} {...this.props} />
-        )}
-      </Formik>
-    );
-  }
-}
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      {(formikProps) => <MoveConnectionForm {...formikProps} {...props} />}
+    </Formik>
+  );
+};
 
 const MoveConnectionModalProvider: OverlayComponent<MoveConnectionModalProps> = (props) => {
   return (