diff --git a/webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx b/webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx index f2e9b3f9fb..b39a309ec1 100644 --- a/webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx +++ b/webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx @@ -41,7 +41,7 @@ export const Tab = observer(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(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))( @@ -72,7 +73,7 @@ export const Tab = observer(function Tab({ {actionsEnabled && ( - {onClose && ( + {canClose && ( diff --git a/webapp/packages/core-ui/src/Tabs/Tab/useTab.ts b/webapp/packages/core-ui/src/Tabs/Tab/useTab.ts index dbfdda7408..90ab9b6beb 100644 --- a/webapp/packages/core-ui/src/Tabs/Tab/useTab.ts +++ b/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) => void, - onClose?: (tab: ITabData) => void, + onOpen?: (tab: ITabData) => Promise | void, + onClose?: (tab: ITabData) => Promise | 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); }], }); diff --git a/webapp/packages/core-ui/src/Tabs/TabsContext.ts b/webapp/packages/core-ui/src/Tabs/TabsContext.ts index af3dce1a30..a82a139583 100644 --- a/webapp/packages/core-ui/src/Tabs/TabsContext.ts +++ b/webapp/packages/core-ui/src/Tabs/TabsContext.ts @@ -24,6 +24,7 @@ export interface ITabsContext> { openExecutor: IExecutor>; closeExecutor: IExecutor>; lazy: boolean; + closable: boolean; tabList?: string[]; enabledBaseActions?: boolean; getTabInfo: (tabId: string) => ITabInfo | undefined; diff --git a/webapp/packages/core-ui/src/Tabs/TabsState.tsx b/webapp/packages/core-ui/src/Tabs/TabsState.tsx index b59a21fd7f..fd6d481bf6 100644 --- a/webapp/packages/core-ui/src/Tabs/TabsState.tsx +++ b/webapp/packages/core-ui/src/Tabs/TabsState.tsx @@ -62,6 +62,8 @@ export const TabsState = observer(function TabsState>({ } } + const closable = !!onClose; + const [localTabsState] = useState(() => new MetadataMap()); const tabsState = localState || localTabsState; const [closeExecutor] = useState(() => new Executor>()); @@ -82,7 +84,7 @@ export const TabsState = observer(function TabsState>({ tabsState, container, state, - tabList + tabList, }); if (currentTabId !== undefined) { @@ -197,6 +199,7 @@ export const TabsState = observer(function TabsState>({ openExecutor, closeExecutor, lazy, + closable, tabList, enabledBaseActions, getTabInfo, @@ -215,6 +218,7 @@ export const TabsState = observer(function TabsState>({ closeExecutor, openExecutor, lazy, + closable, tabList, enabledBaseActions, getTabInfo, diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultTab.tsx b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultTab.tsx index 98faa013f4..3c7fcf7de6 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultTab.tsx +++ b/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; + onClose?: (tab: ITabData) => Promise; } export const SqlResultTab = observer(function SqlResultTab({ diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultTabs.tsx b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultTabs.tsx index cc4451bf5c..ef1cfc3286 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultTabs.tsx +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultTabs.tsx @@ -98,14 +98,19 @@ export const SqlResultTabs = observer(function SqlDataResult({ state, onT return styled(style)( - + {orderedTabs.map(result => ( ))}