refactor: FormOpen state and isResourceEdit state

src/command-pallette/CommandPalletteUI/CommandPaletteUI.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useEffect, useRef, useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilValue } from 'recoil';
 import { useEventListener } from 'hooks/useEventListener';
 import { addHistoryEntry, getHistoryEntries } from './search-history';
 import { activeNamespaceIdState } from 'state/activeNamespaceIdAtom';
@@ -14,11 +14,9 @@ import { useSearchResults } from './useSearchResults';
 import { K8sResource } from 'types';
 import { Button, Icon, Input } from '@ui5/webcomponents-react';
 import './CommandPaletteUI.scss';
-import { handleActionIfFormOpen } from 'shared/components/UnsavedMessageBox/helpers';
-import { isResourceEditedState } from 'state/resourceEditedAtom';
 import { showKymaCompanionState } from 'state/companion/showKymaCompanionAtom';
-import { isFormOpenState } from 'state/formOpenAtom';
 import { SCREEN_SIZE_BREAKPOINT_M } from './types';
+import { useFormNavigation } from 'shared/hooks/useFormNavigation';
 
 function Background({
   hide,
@@ -58,10 +56,7 @@ export function CommandPaletteUI({
   shellbarWidth,
 }: CommandPaletteProps) {
   const namespace = useRecoilValue(activeNamespaceIdState);
-  const [isResourceEdited, setIsResourceEdited] = useRecoilState(
-    isResourceEditedState,
-  );
-  const [isFormOpen, setIsFormOpen] = useRecoilState(isFormOpenState);
+  const { navigateSafely } = useFormNavigation();
 
   const [query, setQuery] = useState('');
   const [originalQuery, setOriginalQuery] = useState('');
@@ -153,17 +148,10 @@ export function CommandPaletteUI({
     if (key === 'Enter' && results[0]) {
       // choose current entry
       e.preventDefault();
-
-      handleActionIfFormOpen(
-        isResourceEdited,
-        setIsResourceEdited,
-        isFormOpen,
-        setIsFormOpen,
-        () => {
-          addHistoryEntry(results[0].query);
-          results[0].onActivate();
-        },
-      );
+      navigateSafely(() => {
+        addHistoryEntry(results[0].query);
+        results[0].onActivate();
+      });
     } else if (key === 'Tab') {
       e.preventDefault();
       // fill search with active history entry

src/command-pallette/CommandPalletteUI/ResultsList/ResultsList.tsx

@@ -6,10 +6,7 @@ import { addHistoryEntry } from '../search-history';
 import './ResultsList.scss';
 import { useTranslation } from 'react-i18next';
 import { LOADING_INDICATOR } from '../types';
-import { useRecoilState } from 'recoil';
-import { isResourceEditedState } from 'state/resourceEditedAtom';
-import { isFormOpenState } from 'state/formOpenAtom';
-import { handleActionIfFormOpen } from 'shared/components/UnsavedMessageBox/helpers';
+import { useFormNavigation } from 'shared/hooks/useFormNavigation';
 
 function scrollInto(element: Element) {
   element.scrollIntoView({
@@ -36,10 +33,7 @@ export function ResultsList({
 }: ResultsListProps) {
   const listRef = useRef<HTMLUListElement | null>(null);
   const { t } = useTranslation();
-  const [isResourceEdited, setIsResourceEdited] = useRecoilState(
-    isResourceEditedState,
-  );
-  const [isFormOpen, setIsFormOpen] = useRecoilState(isFormOpenState);
+  const { navigateSafely } = useFormNavigation();
 
   //todo 2
   const isLoading = results.find((r: any) => r.type === LOADING_INDICATOR);
@@ -71,16 +65,10 @@ export function ResultsList({
         scrollInto(listRef.current!.children[activeIndex - 1]);
       } else if (key === 'Enter' && results?.[activeIndex]) {
         e.preventDefault();
-        handleActionIfFormOpen(
-          isResourceEdited,
-          setIsResourceEdited,
-          isFormOpen,
-          setIsFormOpen,
-          () => {
-            addHistoryEntry(results[activeIndex].query);
-            results[activeIndex].onActivate();
-          },
-        );
+        navigateSafely(() => {
+          addHistoryEntry(results[activeIndex].query);
+          results[activeIndex].onActivate();
+        });
       }
     },
     [activeIndex, results, isHistoryMode],
@@ -97,16 +85,10 @@ export function ResultsList({
             activeIndex={activeIndex}
             setActiveIndex={setActiveIndex}
             onItemClick={() => {
-              handleActionIfFormOpen(
-                isResourceEdited,
-                setIsResourceEdited,
-                isFormOpen,
-                setIsFormOpen,
-                () => {
-                  addHistoryEntry(result.query);
-                  result.onActivate();
-                },
-              );
+              navigateSafely(() => {
+                addHistoryEntry(result.query);
+                result.onActivate();
+              });
             }}
           />
         ))

src/header/Header.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import {
   Avatar,
   ShellBar,
@@ -9,23 +9,21 @@ import {
 
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
+import { useFormNavigation } from 'shared/hooks/useFormNavigation';
 import { useFeature } from 'hooks/useFeature';
 import { useAvailableNamespaces } from 'hooks/useAvailableNamespaces';
 import { useCheckSAPUser } from 'hooks/useCheckSAPUser';
 
 import { clustersState } from 'state/clustersAtom';
 import { clusterState } from 'state/clusterAtom';
 import { showKymaCompanionState } from 'state/companion/showKymaCompanionAtom';
-import { isResourceEditedState } from 'state/resourceEditedAtom';
-import { isFormOpenState } from 'state/formOpenAtom';
 
 import { Logo } from './Logo/Logo';
 import { SidebarSwitcher } from './SidebarSwitcher/SidebarSwitcher';
 import { HeaderMenu } from './HeaderMenu';
 import { CommandPaletteSearchBar } from 'command-pallette/CommandPalletteUI/CommandPaletteSearchBar';
 import { SnowFeature } from './SnowFeature';
 
-import { handleActionIfFormOpen } from 'shared/components/UnsavedMessageBox/helpers';
 import { configFeaturesNames } from 'state/types';
 import './Header.scss';
 
@@ -38,16 +36,13 @@ export function Header() {
 
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const { navigateSafely } = useFormNavigation();
   const { isEnabled: isFeedbackEnabled, link: feedbackLink } = useFeature(
     configFeaturesNames.FEEDBACK,
   );
 
   const cluster = useRecoilValue(clusterState);
   const clusters = useRecoilValue(clustersState);
-  const [isResourceEdited, setIsResourceEdited] = useRecoilState(
-    isResourceEditedState,
-  );
-  const [isFormOpen, setIsFormOpen] = useRecoilState(isFormOpenState);
 
   const { isEnabled: isKymaCompanionEnabled } = useFeature('KYMA_COMPANION');
   const setShowCompanion = useSetRecoilState(showKymaCompanionState);
@@ -83,13 +78,7 @@ export function Header() {
           window.location.pathname !== '/clusters' && <SidebarSwitcher />
         }
         onLogoClick={() => {
-          handleActionIfFormOpen(
-            isResourceEdited,
-            setIsResourceEdited,
-            isFormOpen,
-            setIsFormOpen,
-            () => navigate('/clusters'),
-          );
+          navigateSafely(() => navigate('/clusters'));
           setShowCompanion({
             show: false,
             fullScreen: false,
@@ -103,22 +92,16 @@ export function Header() {
         }
         menuItems={window.location.pathname !== '/clusters' ? clustersList : []}
         onMenuItemClick={e => {
-          handleActionIfFormOpen(
-            isResourceEdited,
-            setIsResourceEdited,
-            isFormOpen,
-            setIsFormOpen,
-            () => {
-              e.detail.item.textContent ===
-              t('clusters.overview.title-all-clusters')
-                ? navigate('/clusters')
-                : navigate(
-                    `/cluster/${encodeURIComponent(
-                      e.detail.item?.textContent ?? '',
-                    )}`,
-                  );
-            },
-          );
+          navigateSafely(() => {
+            e.detail.item.textContent ===
+            t('clusters.overview.title-all-clusters')
+              ? navigate('/clusters')
+              : navigate(
+                  `/cluster/${encodeURIComponent(
+                    e.detail.item?.textContent ?? '',
+                  )}`,
+                );
+          });
           setShowCompanion({
             show: false,
             fullScreen: false,

src/header/NamespaceChooser/NamespaceChooser.tsx

@@ -1,23 +1,18 @@
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilValue } from 'recoil';
 import { useTranslation } from 'react-i18next';
 import { useUrl } from 'hooks/useUrl';
 import { useMatch, useNavigate } from 'react-router';
 import { namespacesState } from 'state/namespacesAtom';
 
 import { SideNavigationSubItem } from '@ui5/webcomponents-react';
-import { isResourceEditedState } from 'state/resourceEditedAtom';
-import { isFormOpenState } from 'state/formOpenAtom';
-import { handleActionIfFormOpen } from 'shared/components/UnsavedMessageBox/helpers';
+import { useFormNavigation } from 'shared/hooks/useFormNavigation';
 
 export function NamespaceChooser() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { namespaceUrl } = useUrl();
   const allNamespaces = useRecoilValue(namespacesState);
-  const [isResourceEdited, setIsResourceEdited] = useRecoilState(
-    isResourceEditedState,
-  );
-  const [isFormOpen, setIsFormOpen] = useRecoilState(isFormOpenState);
+  const { navigateSafely } = useFormNavigation();
 
   const { resourceType = '' } =
     useMatch({
@@ -31,12 +26,8 @@ export function NamespaceChooser() {
       text={t('navigation.all-namespaces')}
       data-key="all-namespaces"
       onClick={() => {
-        handleActionIfFormOpen(
-          isResourceEdited,
-          setIsResourceEdited,
-          isFormOpen,
-          setIsFormOpen,
-          () => navigate(namespaceUrl(resourceType, { namespace: '-all-' })),
+        navigateSafely(() =>
+          navigate(namespaceUrl(resourceType, { namespace: '-all-' })),
         );
       }}
     />,
@@ -49,17 +40,12 @@ export function NamespaceChooser() {
         key={ns}
         data-key={ns}
         onClick={e => {
-          handleActionIfFormOpen(
-            isResourceEdited,
-            setIsResourceEdited,
-            isFormOpen,
-            setIsFormOpen,
-            () =>
-              navigate(
-                namespaceUrl(resourceType, {
-                  namespace: e.target.dataset.key ?? undefined,
-                }),
-              ),
+          navigateSafely(() =>
+            navigate(
+              namespaceUrl(resourceType, {
+                namespace: e.target.dataset.key ?? undefined,
+              }),
+            ),
           );
         }}
       />,

src/shared/ResourceForm/components/ResourceForm.js

@@ -14,25 +14,15 @@ import jp from 'jsonpath';
 import { Form, FormItem } from '@ui5/webcomponents-react';
 import { UI5Panel } from 'shared/components/UI5Panel/UI5Panel';
 
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilValue } from 'recoil';
 import { editViewModeState } from 'state/preferences/editViewModeAtom';
-import { isResourceEditedState } from 'state/resourceEditedAtom';
-import { isFormOpenState } from 'state/formOpenAtom';
 import { createPortal } from 'react-dom';
 import { UnsavedMessageBox } from 'shared/components/UnsavedMessageBox/UnsavedMessageBox';
-import { cloneDeep } from 'lodash';
 import { getDescription, SchemaContext } from 'shared/helpers/schema';
 
-import './ResourceForm.scss';
 import { columnLayoutState } from 'state/columnLayoutAtom';
-
-export const excludeStatus = resource => {
-  const modifiedResource = cloneDeep(resource);
-  delete modifiedResource.status;
-  delete modifiedResource.metadata?.resourceVersion;
-  delete modifiedResource.metadata?.managedFields;
-  return modifiedResource;
-};
+import { useFormEditTracking } from 'shared/hooks/useFormEditTracking';
+import './ResourceForm.scss';
 
 export function ResourceForm({
   pluralKind, // used for the request path
@@ -101,37 +91,9 @@ export function ResourceForm({
   }
 
   const editViewMode = useRecoilValue(editViewModeState);
-  const [isResourceEdited, setIsResourceEdited] = useRecoilState(
-    isResourceEditedState,
-  );
-  const [isFormOpen, setIsFormOpen] = useRecoilState(isFormOpenState);
-  const { leavingForm } = isFormOpen;
   const [editorError, setEditorError] = useState(null);
 
-  useEffect(() => {
-    // Check if form is opened based on width
-    if (leavingForm && formElementRef?.current?.clientWidth !== 0) {
-      if (
-        JSON.stringify(excludeStatus(resource)) !==
-          JSON.stringify(excludeStatus(initialResource)) ||
-        editorError
-      ) {
-        setIsResourceEdited({ ...isResourceEdited, isEdited: true });
-      }
-
-      if (
-        JSON.stringify(excludeStatus(resource)) ===
-          JSON.stringify(excludeStatus(initialResource)) &&
-        !editorError
-      ) {
-        setIsResourceEdited({ isEdited: false });
-        setIsFormOpen({ formOpen: false });
-        if (isResourceEdited.discardAction) isResourceEdited.discardAction();
-      }
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [leavingForm]);
+  useFormEditTracking(resource, initialResource, editorError);
 
   const { t } = useTranslation();
   const createResource = useCreateResource({