fix: discard changes and unnecessary scroll in Modules form (#3048)

* fix form height & discard * remove unused imports * add comment * fix comment
kyma-project · Jul 10, 2024 · 3561fa4 · 3561fa4
1 parent 135b992
commit 3561fa4
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 15 deletions.
diff --git a/src/components/KymaModules/KymaModulesCreate.js b/src/components/KymaModules/KymaModulesCreate.js
@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { ResourceForm } from 'shared/ResourceForm';
+import './KymaModulesCreate.scss';
 
 export default function KymaModulesCreate({ resource, ...props }) {
   const { t } = useTranslation();
@@ -13,6 +14,7 @@ export default function KymaModulesCreate({ resource, ...props }) {
   return (
     <ResourceForm
       {...props}
+      className="kyma-modules-create"
       pluralKind="kymas"
       singularName={t('kyma-modules.kyma')}
       resource={kymaResource}

diff --git a/src/components/KymaModules/KymaModulesCreate.scss b/src/components/KymaModules/KymaModulesCreate.scss
@@ -0,0 +1,20 @@
+.kyma-modules {
+  .edit-form {
+    min-height: calc(100vh - 17rem);
+  }
+
+  .kyma-modules-create {
+    .resource-form--panel,
+    .resource-form--panel::part(content) {
+      min-height: calc(100vh - 20rem);
+    }
+
+    .resource-form--panel {
+      margin-bottom: 0 !important;
+    }
+
+    .yaml-form {
+      height: calc(100vh - 20rem);
+    }
+  }
+}
diff --git a/src/components/KymaModules/KymaModulesList.js b/src/components/KymaModules/KymaModulesList.js
@@ -36,6 +36,7 @@ import { cloneDeep } from 'lodash';
 import { useCreateResource } from 'shared/ResourceForm/useCreateResource';
 import { useNotification } from 'shared/contexts/NotificationContext';
 import { PopoverBadge } from 'shared/components/PopoverBadge/PopoverBadge';
+import { isFormOpenState } from 'state/formOpenAtom';
 
 export function KymaModulesList(props) {
   const { t } = useTranslation();
@@ -46,6 +47,7 @@ export function KymaModulesList(props) {
     setShowReleaseChannelTitleDescription,
   ] = useState(false);
   const setLayoutColumn = useSetRecoilState(columnLayoutState);
+  const setIsFormOpen = useSetRecoilState(isFormOpenState);
   const { clusterUrl } = useUrl();
 
   const { data: kymaResources, loading: kymaResourcesLoading } = useGet(
@@ -98,6 +100,8 @@ export function KymaModulesList(props) {
         resourceUrl: resourceUrl,
       },
     });
+
+    setIsFormOpen({ formOpen: true });
   };
 
   const ModulesList = resource => {
@@ -407,6 +411,7 @@ export function KymaModulesList(props) {
 
   return (
     <ResourceDetails
+      className="kyma-modules"
       layoutNumber="StartColumn"
       windowTitle={t('kyma-modules.title')}
       headerContent={

diff --git a/src/shared/ResourceForm/components/ResourceForm.js b/src/shared/ResourceForm/components/ResourceForm.js
@@ -94,7 +94,8 @@ export function ResourceForm({
   const [editorError, setEditorError] = useState(null);
 
   useEffect(() => {
-    if (leavingForm) {
+    // Check if form is opened based on width
+    if (leavingForm && formElementRef.current?.clientWidth > 0) {
       if (
         JSON.stringify(excludeStatus(resource)) !==
           JSON.stringify(excludeStatus(initialResource)) ||
@@ -324,5 +325,4 @@ export function ResourceForm({
       {createPortal(<UnsavedMessageBox />, document.body)}
     </section>
   );
-  // }
 }
diff --git a/src/shared/components/DynamicPageComponent/DynamicPageComponent.js b/src/shared/components/DynamicPageComponent/DynamicPageComponent.js
@@ -49,6 +49,7 @@ export const DynamicPageComponent = ({
   showYamlTab,
   protectedResource,
   protectedResourceWarning,
+  className,
 }) => {
   const [showTitleDescription, setShowTitleDescription] = useState(false);
   const [layoutColumn, setLayoutColumn] = useRecoilState(columnLayoutState);
@@ -241,7 +242,7 @@ export const DynamicPageComponent = ({
     return (
       <ObjectPage
         mode="IconTabBar"
-        className="page-header"
+        className={`page-header ${className}`}
         alwaysShowContentHeader
         showHideHeaderButton={false}
         headerContentPinnable={false}
@@ -251,19 +252,21 @@ export const DynamicPageComponent = ({
         onBeforeNavigate={e => {
           if (isFormOpen.formOpen) {
             e.preventDefault();
-            setIsResourceEdited({
-              ...isResourceEdited,
-              discardAction: () => {
-                setSelectedSectionIdState(e.detail.sectionId);
-                setIsResourceEdited({
-                  isEdited: false,
-                });
-              },
-            });
-            setIsFormOpen({ formOpen: true, leavingForm: true });
-            return;
           }
-          setSelectedSectionIdState(e.detail.sectionId);
+
+          handleActionIfFormOpen(
+            isResourceEdited,
+            setIsResourceEdited,
+            isFormOpen,
+            setIsFormOpen,
+            () => {
+              setSelectedSectionIdState(e.detail.sectionId);
+              setIsResourceEdited({
+                isEdited: false,
+              });
+            },
+          );
+
           if (e.detail.sectionId === 'edit') {
             setIsFormOpen({ formOpen: true });
           }

diff --git a/src/shared/components/ResourceDetails/ResourceDetails.js b/src/shared/components/ResourceDetails/ResourceDetails.js
@@ -174,6 +174,7 @@ function Resource({
   showHealthCardsTitle,
   statusConditions,
   headerContent,
+  className,
 }) {
   useVersionWarning({ resourceUrl, resourceType });
   const { t } = useTranslation();
@@ -401,6 +402,7 @@ function Resource({
   return (
     <ResourceDetailContext.Provider value={true}>
       <DynamicPageComponent
+        className={className}
         headerContent={headerContent}
         showYamlTab={showYamlTab || disableEdit}
         layoutNumber={layoutNumber ?? 'MidColumn'}