From 711ae5952d06339ff646c43159a644596b5ae58c Mon Sep 17 00:00:00 2001 From: Christian Karidas <105549337+chriskari@users.noreply.github.com> Date: Fri, 29 Dec 2023 09:02:43 +0100 Subject: [PATCH] code-clean-up ModalWithForm (#2707) * code clean-up * bump deployment * reverted some changes * removed debugging statements --------- Co-authored-by: Agata Kucharska --- resources/web/deployment.yaml | 2 +- src/components/Clusters/views/ClusterList.js | 7 +++-- src/shared/ResourceForm/useCreateResource.js | 9 +++---- .../components/ModalWithForm/ModalWithForm.js | 27 +++---------------- .../components/ResourcesList/ResourcesList.js | 7 ++--- 5 files changed, 12 insertions(+), 40 deletions(-) diff --git a/resources/web/deployment.yaml b/resources/web/deployment.yaml index 6ba39fa1de..64fdbe8625 100644 --- 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 index 106dd44272..4bc95a9d94 100644 --- 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,7 +163,7 @@ function ClusterList() { const addDialog = ; const editDialog = ( )} modalOpeningComponent={<>} - customCloseAction={() => setShowEdit(false)} confirmText={t('common.buttons.update')} /> ); diff --git a/src/shared/ResourceForm/useCreateResource.js b/src/shared/ResourceForm/useCreateResource.js index 94a9085854..0aaa7f196c 100644 --- 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 index fe6c2513da..b2a5adc460 100644 --- 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( {}, invalidPopupMessage: '', - onModalOpenStateChange: () => {}, - alwaysOpen: false, }; diff --git a/src/shared/components/ResourcesList/ResourcesList.js b/src/shared/components/ResourcesList/ResourcesList.js index e7431605a7..f70be1cfa4 100644 --- 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({ )} modalOpeningComponent={<>} - customCloseAction={() => setShowEditDialog(false)} /> {createPortal(