code-clean-up ModalWithForm (#2707)

* code clean-up * bump deployment * reverted some changes * removed debugging statements --------- Co-authored-by: Agata Kucharska <akucharska@users.noreply.github.com>
kyma-project · Dec 29, 2023 · 711ae59 · 711ae59
1 parent 57a5d22
commit 711ae59
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 40 deletions.
diff --git a/resources/web/deployment.yaml b/resources/web/deployment.yaml
@@ -16,7 +16,7 @@ spec:
     spec:
       containers:
         - name: busola
-          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2703
+          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2707
           imagePullPolicy: Always
           resources:
             requests:

diff --git a/src/components/Clusters/views/ClusterList.js b/src/components/Clusters/views/ClusterList.js
@@ -47,7 +47,7 @@ function ClusterList() {
   const [chosenCluster, setChosenCluster] = useState(null);
   const setShowAdd = useSetRecoilState(showAddClusterWizard);
 
-  const [showEdit, setShowEdit] = useState(false);
+  const [toggleFormFn, getToggleFormFn] = useState(() => {});
   const [editedCluster, setEditedCluster] = useState(null);
 
   const { clusters, currentCluster } = clustersInfo;
@@ -117,7 +117,7 @@ function ClusterList() {
       tooltip: t('clusters.edit-cluster'),
       handler: cluster => {
         setEditedCluster(cluster);
-        setShowEdit(true);
+        toggleFormFn(true);
       },
     },
     {
@@ -163,15 +163,14 @@ function ClusterList() {
   const addDialog = <AddClusterDialog />;
   const editDialog = (
     <ModalWithForm
-      opened={showEdit}
+      getToggleFormFn={getToggleFormFn}
       className="modal-size--l"
       title={t('clusters.edit-cluster')}
       id="edit-cluster"
       renderForm={props => (
         <EditCluster {...props} editedCluster={editedCluster} />
       )}
       modalOpeningComponent={<></>}
-      customCloseAction={() => setShowEdit(false)}
       confirmText={t('common.buttons.update')}
     />
   );

diff --git a/src/shared/ResourceForm/useCreateResource.js b/src/shared/ResourceForm/useCreateResource.js
@@ -87,14 +87,11 @@ export function useCreateResource({
           createUrl,
           createPatch(initialUnchangedResource, resource),
         );
-        if (typeof toggleFormFn === 'function') {
-          toggleFormFn(false);
-        }
       } else {
         await postRequest(createUrl, resource);
-        if (typeof toggleFormFn === 'function') {
-          toggleFormFn(false);
-        }
+      }
+      if (typeof toggleFormFn === 'function') {
+        toggleFormFn(false);
       }
 
       onSuccess();

diff --git a/src/shared/components/ModalWithForm/ModalWithForm.js b/src/shared/components/ModalWithForm/ModalWithForm.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Dialog, Button, Bar } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
@@ -11,24 +11,19 @@ import { createPortal } from 'react-dom';
 
 export const ModalWithForm = ({
   performRefetch,
-  sendNotification,
   title,
   button,
   renderForm,
-  opened,
-  customCloseAction,
   item,
   modalOpeningComponent,
   confirmText,
   invalidPopupMessage,
   className,
-  onModalOpenStateChange,
-  alwaysOpen,
   getToggleFormFn,
   ...props
 }) => {
   const { t } = useTranslation();
-  const [isOpen, setOpen] = useState(alwaysOpen || false);
+  const [isOpen, setOpen] = useState(false);
   const [resetFormFn, setResetFormFn] = useState(() => () => {});
 
   const {
@@ -41,19 +36,9 @@ export const ModalWithForm = ({
 
   confirmText = confirmText || t('common.buttons.create');
 
-  useEffect(() => {
-    if (!alwaysOpen) setOpenStatus(opened); // if alwaysOpen===true we can ignore the 'opened' prop
-  }, [opened]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  useEffect(() => {
-    if (isOpen !== undefined) onModalOpenStateChange(isOpen);
-  }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps
-
   const setOpenStatus = status => {
     if (status) {
       setTimeout(() => revalidate());
-    } else {
-      if (customCloseAction) customCloseAction();
     }
     setOpen(status);
   };
@@ -148,7 +133,7 @@ export const ModalWithForm = ({
 
   return (
     <>
-      {alwaysOpen ? null : renderModalOpeningComponent()}
+      {renderModalOpeningComponent()}
       {createPortal(
         <Dialog
           className={`${className}`}
@@ -203,21 +188,15 @@ ModalWithForm.propTypes = {
   performRefetch: PropTypes.func.isRequired,
   title: PropTypes.string.isRequired,
   renderForm: PropTypes.func.isRequired,
-  opened: PropTypes.bool,
-  customCloseAction: PropTypes.func,
   item: PropTypes.object,
   modalOpeningComponent: PropTypes.node,
   confirmText: PropTypes.string,
   invalidPopupMessage: PropTypes.string,
   button: CustomPropTypes.button,
   className: PropTypes.string,
-  onModalOpenStateChange: PropTypes.func,
-  alwaysOpen: PropTypes.bool, // set this to true if you want to control the modal by rendering and un-rendering it instead of the open/closed state
 };
 
 ModalWithForm.defaultProps = {
   performRefetch: () => {},
   invalidPopupMessage: '',
-  onModalOpenStateChange: () => {},
-  alwaysOpen: false,
 };
diff --git a/src/shared/components/ResourcesList/ResourcesList.js b/src/shared/components/ResourcesList/ResourcesList.js
@@ -215,7 +215,6 @@ export function ResourceListRenderer({
   });
 
   const [activeResource, setActiveResource] = useState(null);
-  const [showEditDialog, setShowEditDialog] = useState(false);
   const {
     setEditedYaml: setEditedSpec,
     closeEditor,
@@ -414,7 +413,7 @@ export function ResourceListRenderer({
       activeResource = CreateResourceForm.sanitizeClone(activeResource);
     }
     setActiveResource(activeResource);
-    setShowEditDialog(true);
+    toggleFormFn(true);
   };
 
   const actions = readOnly
@@ -483,7 +482,7 @@ export function ResourceListRenderer({
         design="Transparent"
         onClick={() => {
           setActiveResource(undefined);
-          setShowEditDialog(true);
+          toggleFormFn(true);
         }}
       >
         {createActionLabel ||
@@ -516,7 +515,6 @@ export function ResourceListRenderer({
           })
         }
         getToggleFormFn={getToggleFormFn}
-        opened={showEditDialog}
         confirmText={t('common.buttons.create')}
         id={`add-${resourceType}-modal`}
         className="modal-size--l"
@@ -536,7 +534,6 @@ export function ResourceListRenderer({
           </ErrorBoundary>
         )}
         modalOpeningComponent={<></>}
-        customCloseAction={() => setShowEditDialog(false)}
       />
       {createPortal(
         <DeleteMessageBox