fix: Tab navigation (#3893)

* fix: tab navigation

* fix: clearer naming of state variable

---------

Co-authored-by: mrCherry97 <mwisnia97@gmail.com>

Author: chriskari

src/shared/components/DynamicPageComponent/DynamicPageComponent.js

@@ -121,28 +121,23 @@ export const DynamicPageComponent = ({
   const [isFormOpen, setIsFormOpen] = useRecoilState(isFormOpenState);
   const { navigateSafely } = useFormNavigation();
   const [searchParams] = useSearchParams();
-  const showEdit = searchParams.get('showEdit');
   const editColumn = searchParams.get('editColumn');
-  const currColumnInfo = layoutColumn[layoutNumber] ?? layoutColumn.startColumn;
 
-  const [selectedSectionIdState, setSelectedSectionIdState] = useState(
-    showEdit &&
-      currColumnInfo?.resourceName === layoutColumn?.showEdit?.resourceName
-      ? 'edit'
-      : 'view',
+  const [selectedTab, setSelectedTab] = useState(
+    layoutColumn?.showEdit ? 'edit' : 'view',
   );
 
+  useEffect(() => {
+    setSelectedTab(layoutColumn?.showEdit ? 'edit' : 'view');
+  }, [layoutColumn]);
+
   const dynamicPageRef = useRef(null);
   const tabContainerRef = useRef(null);
   const { headerHeight, tabContainerHeight } = useGetHeaderHeight(
     dynamicPageRef,
     tabContainerRef,
   );
 
-  useEffect(() => {
-    if (showEdit) setSelectedSectionIdState('edit');
-  }, [showEdit]);
-
   const handleColumnClose = () => {
     layoutNumber === 'midColumn'
       ? setLayoutColumn({
@@ -161,7 +156,10 @@ export const DynamicPageComponent = ({
         });
 
     if (layoutCloseUrl) {
-      navigate(layoutCloseUrl + (editColumn ? `?showEdit=${showEdit}` : ''));
+      navigate(
+        layoutCloseUrl +
+          (editColumn ? `?showEdit=${!!layoutColumn.showEdit}` : ''),
+      );
       return;
     }
 
@@ -351,23 +349,16 @@ export const DynamicPageComponent = ({
                 isFormOpen,
                 setIsFormOpen,
               );
-              setSelectedSectionIdState(e.detail.tab.getAttribute('data-mode'));
+              setSelectedTab(e.detail.tab.getAttribute('data-mode'));
               return;
             }
             if (isFormOpen.formOpen) {
               e.preventDefault();
             }
-            if (
-              showEdit &&
-              currColumnInfo?.resourceName !==
-                layoutColumn?.showEdit?.resourceName
-            ) {
-              return;
-            }
 
             const newTabName = e.detail.tab.getAttribute('data-mode');
             navigateSafely(() => {
-              setSelectedSectionIdState(newTabName);
+              setSelectedTab(newTabName);
 
               if (newTabName === 'edit') {
                 const params = new URLSearchParams();
@@ -382,7 +373,6 @@ export const DynamicPageComponent = ({
                 setLayoutColumn({
                   ...layoutColumn,
                   showEdit: {
-                    ...currColumnInfo,
                     resource: null,
                   },
                 });
@@ -406,18 +396,18 @@ export const DynamicPageComponent = ({
           <Tab
             data-mode="view"
             text={t('common.tabs.view')}
-            selected={selectedSectionIdState === 'view'}
+            selected={selectedTab === 'view'}
           ></Tab>
           <Tab
             data-mode="edit"
             text={showYamlTab ? t('common.tabs.yaml') : t('common.tabs.edit')}
-            selected={selectedSectionIdState === 'edit'}
+            selected={selectedTab === 'edit'}
           ></Tab>
         </TabContainer>
 
-        {selectedSectionIdState === 'view' && content}
+        {selectedTab === 'view' && content}
 
-        {selectedSectionIdState === 'edit' &&
+        {selectedTab === 'edit' &&
           inlineEditForm(headerHeight + tabContainerHeight)}
       </DynamicPage>
     );