fix(core-ui): CB-1578 make handler function asynс

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

@@ -41,7 +41,7 @@ export const Tab = observer<TabProps>(function Tab({
   const { state, getInfo, handleClose, handleOpen } = useTab(tabId, onOpen, onClose, onClick);
   const menu = useMenu({
     menu: MENU_TAB,
-    context: menuContext, 
+    context: menuContext,
   });
   const info = getInfo();
 
@@ -51,7 +51,8 @@ export const Tab = observer<TabProps>(function Tab({
   menu.context.set(DATA_CONTEXT_TAB_ID, tabId);
 
   const showMenu = menu.getItems().length > 0;
-  const actionsEnabled = !!onClose || showMenu;
+  const canClose = !!onClose || state.closable;
+  const actionsEnabled = canClose || showMenu;
 
   return styled(useStyles(style))(
     <TabContext.Provider value={tabContext}>
@@ -72,7 +73,7 @@ export const Tab = observer<TabProps>(function Tab({
           </BaseTab>
           {actionsEnabled && (
             <tab-actions>
-              {onClose && (
+              {canClose && (
                 <tab-action title={translate('ui_close')} onClick={handleClose}>
                   <Icon name="cross-bold" viewBox="0 0 7 8" />
                 </tab-action>

webapp/packages/core-ui/src/Tabs/Tab/useTab.ts

@@ -8,16 +8,16 @@
 
 import { useContext } from 'react';
 
-import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
 import { useExecutor, useObjectRef } from '@cloudbeaver/core-blocks';
+import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
 
 import type { ITabData } from '../TabsContainer/ITabsContainer';
 import { TabsContext } from '../TabsContext';
 
 export function useTab(
   tabId: string,
-  onOpen?: (tab: ITabData<any>) => void,
-  onClose?: (tab: ITabData<any>) => void,
+  onOpen?: (tab: ITabData<any>) => Promise<void> | void,
+  onClose?: (tab: ITabData<any>) => Promise<void> | void,
   onClick?: (tabId: string) => void,
 ) {
   const state = useContext(TabsContext);
@@ -27,21 +27,21 @@ export function useTab(
 
   useExecutor({
     executor: state.openExecutor,
-    handlers: [function openHandler(data) {
+    handlers: [async function openHandler(data) {
       if (tabId !== data.tabId) {
         return;
       }
-      onOpen?.(data);
+      await onOpen?.(data);
     }],
   });
 
   useExecutor({
     executor: state.closeExecutor,
-    handlers: [function closeHandler(data) {
+    handlers: [async function closeHandler(data) {
       if (tabId !== data.tabId) {
         return;
       }
-      onClose?.(data);
+      await onClose?.(data);
     }],
   });
 

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

@@ -24,6 +24,7 @@ export interface ITabsContext<T = Record<string, any>> {
   openExecutor: IExecutor<ITabData<T>>;
   closeExecutor: IExecutor<ITabData<T>>;
   lazy: boolean;
+  closable: boolean;
   tabList?: string[];
   enabledBaseActions?: boolean;
   getTabInfo: (tabId: string) => ITabInfo<T> | undefined;

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

@@ -62,6 +62,8 @@ export const TabsState = observer(function TabsState<T = Record<string, any>>({
     }
   }
 
+  const closable = !!onClose;
+
   const [localTabsState] = useState(() => new MetadataMap<string, any>());
   const tabsState = localState || localTabsState;
   const [closeExecutor] = useState(() => new Executor<ITabData<T>>());
@@ -82,7 +84,7 @@ export const TabsState = observer(function TabsState<T = Record<string, any>>({
     tabsState,
     container,
     state,
-    tabList
+    tabList,
   });
 
   if (currentTabId !== undefined) {
@@ -197,6 +199,7 @@ export const TabsState = observer(function TabsState<T = Record<string, any>>({
     openExecutor,
     closeExecutor,
     lazy,
+    closable,
     tabList,
     enabledBaseActions,
     getTabInfo,
@@ -215,6 +218,7 @@ export const TabsState = observer(function TabsState<T = Record<string, any>>({
     closeExecutor,
     openExecutor,
     lazy,
+    closable,
     tabList,
     enabledBaseActions,
     getTabInfo,

webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultTab.tsx

@@ -21,7 +21,7 @@ interface Props {
   result: ISqlEditorResultTab;
   className?: string;
   style?: ComponentStyle;
-  onClose: (tab: ITabData) => Promise<void>;
+  onClose?: (tab: ITabData) => Promise<void>;
 }
 
 export const SqlResultTab = observer<Props>(function SqlResultTab({

webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultTabs.tsx

@@ -98,14 +98,19 @@ export const SqlResultTabs = observer<Props>(function SqlDataResult({ state, onT
 
   return styled(style)(
     <wrapper>
-      <TabsState currentTabId={currentId} tabList={tabList} enabledBaseActions onChange={handleSelect}>
+      <TabsState
+        currentTabId={currentId}
+        tabList={tabList}
+        enabledBaseActions
+        onChange={handleSelect}
+        onClose={handleClose}
+      >
         <TabList style={styles}>
           {orderedTabs.map(result => (
             <SqlResultTab
               key={result.id}
               result={result}
               style={styles}
-              onClose={handleClose}
             />
           ))}
         </TabList>