CB-4356 switch tabs simplified (cleanup)

webapp/packages/core-ui/src/Tabs/TabPanel.tsx

@@ -29,21 +29,20 @@ export const TabPanel: React.FC<TabPanelProps> = observer(function TabPanel({ ta
   const selected = getComputed(() => tabContextState.state.selectedId === tabId);
   const enabled = getComputed(() => (lazy || tabContextState.lazy) && !selected);
 
+  async function trackValidity(event: Event) {
+    tabPanelValidationHandlerContext?.validate(tabId);
+  }
+
   useEffect(() => {
     if (tabPanelValidationHandlerContext === null) {
       return;
     }
 
-    async function trackValidity(event: Event) {
-      tabPanelValidationHandlerContext?.addInvalidTab(tabId);
-    }
-
-    panelRef.current?.removeEventListener('invalid', trackValidity, true);
     panelRef.current?.addEventListener('invalid', trackValidity, true);
     return () => {
       panelRef.current?.removeEventListener('invalid', trackValidity, true);
     };
-  }, [tabId]);
+  }, []);
 
   if (enabled) {
     return null;

webapp/packages/core-ui/src/Tabs/TabPanelValidationHandler.tsx

@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite';
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useRef, useState } from 'react';
 import { TabsContext } from './TabsContext';
 import { FormContext, useExecutor, useObjectRef } from '@cloudbeaver/core-blocks';
 import { TabPanelValidationHandlerContext } from './TabPanelValidationHandlerContext';
@@ -20,17 +20,33 @@ export const TabPanelValidationHandler = observer(function TabPanelValidationHan
     throw new Error('TabsState should be defined');
   }
 
-  function addInvalidTab(tabId: string) {
-    invalidTabs.current.add(tabId);
-  };
-
   function resetInvalidTabs() {
     invalidTabs.current = new Set();
   }
 
+  const validate = useCallback((tabId: string) => {
+    invalidTabs.current.add(tabId);
+  
+    setTimeout(() => {
+      const next = Array.from(invalidTabs.current)[0];
+
+      if (
+        !selectedTab || 
+        !invalidTabs.current.size || 
+        invalidTabs.current.has(selectedTab)
+      ) {
+        return;
+      }
+
+      state.open(next);
+    }, 0);
+  }, [selectedTab, state]);
+
   useExecutor({
     executor: resetExecutor,
-    handlers: [resetInvalidTabs],
+    handlers: [() => {
+      resetInvalidTabs();
+    }],
   });
 
   useExecutor({
@@ -38,40 +54,7 @@ export const TabPanelValidationHandler = observer(function TabPanelValidationHan
     before: resetExecutor,
   });
 
-  useExecutor({
-    executor: formContext?.onValidate,
-    postHandlers: [() => formContext?.reportValidity()],
-  });
-
-  useEffect(() => {
-    async function goNextTab() {
-      const firstInvalidTab = invalidTabs.current.values().next().value;
-  
-      if (
-        (selectedTab && invalidTabs.current.has(selectedTab)) || 
-        invalidTabs.current.size === 0 ||
-        !firstInvalidTab
-      ) {
-        return;
-      }
-  
-      await state?.open(firstInvalidTab);
-      resetInvalidTabs();
-    }
-
-    if (formContext === null) {
-      return;
-    }
-
-    formContext?.parent?.ref?.removeEventListener('invalid', goNextTab, true);
-    formContext?.parent?.ref?.addEventListener('invalid', goNextTab, true);
-
-    return () => {
-      formContext?.parent?.ref?.removeEventListener('invalid', goNextTab, true);
-    };
-  }, [selectedTab, state, formContext]);
-
-  const value = useObjectRef(() => ({ addInvalidTab, invalidTabs }), { invalidTabs });
+  const value = useObjectRef(() => ({ validate, invalidTabs }), { invalidTabs, validate });
 
   return (
     <TabPanelValidationHandlerContext.Provider value={value}>

webapp/packages/core-ui/src/Tabs/TabPanelValidationHandlerContext.ts

@@ -2,7 +2,7 @@ import { MutableRefObject, createContext } from 'react';
 
 export interface ITabPanelValidationHandlerContext {
   invalidTabs: MutableRefObject<Set<string>>;
-  addInvalidTab: (tabId: string) => void;
+  validate: (tabId: string) => void;
 }
 
 export const TabPanelValidationHandlerContext = createContext<ITabPanelValidationHandlerContext | null>(null);