From 45683f1a48385d2d76b452388d6c2f0e1e9d7af6 Mon Sep 17 00:00:00 2001
From: sergeyteleshev <iamsergeyteleshev@gmail.com>
Date: Mon, 29 Jul 2024 10:23:55 +0200
Subject: [PATCH] CB-3733 Close data editor tabs with the middle mouse button
 (#2805)

* feat: Add closeOnMouseWheelClick prop to Tab components

* fix: close tab on middle mouse button if tab can be closed

* fix: closes tabs for Safari also

* CB-3733 removes closeOnMouseWheelClick prop

---------

Co-authored-by: Evgenia Bezborodova <139753579+EvgeniaBzzz@users.noreply.github.com>
---
 webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx              | 8 +++++++-
 .../NavigationTabsBar/Tabs/TabHandlerTab.tsx              | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx b/webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx
index daa9094496..9c185a34a1 100644
--- a/webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx
+++ b/webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx
@@ -27,9 +27,15 @@ export const Tab = observer<TabProps>(function Tab(props) {
   const styles = useS(style);
   const canClose = getComputed(() => !!onClose || (tab.closable && tab.state.closable));
 
+  function onMouseUpHandler(event: React.MouseEvent<HTMLDivElement>) {
+    if (event.button === 1 && canClose) {
+      tab.handleClose(event);
+    }
+  }
+
   return (
     <TabContext.Provider value={tabContext}>
-      <div className={s(styles, { tabOuter: true })}>
+      <div className={s(styles, { tabOuter: true })} onMouseUp={onMouseUpHandler}>
         <div className={s(styles, { tabInner: true, tabInnerSelected: tab.selected })}>
           <TabActions
             className={s(styles, { actions: true })}
diff --git a/webapp/packages/plugin-navigation-tabs/src/NavigationTabs/NavigationTabsBar/Tabs/TabHandlerTab.tsx b/webapp/packages/plugin-navigation-tabs/src/NavigationTabs/NavigationTabsBar/Tabs/TabHandlerTab.tsx
index c032ba7459..744425fe5a 100644
--- a/webapp/packages/plugin-navigation-tabs/src/NavigationTabs/NavigationTabsBar/Tabs/TabHandlerTab.tsx
+++ b/webapp/packages/plugin-navigation-tabs/src/NavigationTabs/NavigationTabsBar/Tabs/TabHandlerTab.tsx
@@ -21,5 +21,6 @@ export const TabHandlerTab = observer<IProps>(function TabHandlerTab({ tabId, on
   const handler = useTabHandler(tab.handlerId);
 
   const TabHandlerTab = handler.getTabComponent();
+
   return <TabHandlerTab tab={tab} handler={handler} onSelect={onSelect} onClose={onClose} />;
 });