From b9654c161d2b4fa2dceb22fd72b089657425296d Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Tue, 19 Nov 2024 13:42:10 +0100
Subject: [PATCH] bugfix

---
 .../components/gridComponents/Tabs.jsx        | 42 ++++++++++++-------
 .../containers/DashboardComponent.jsx         |  4 ++
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
index 0d64448dcb1e0..4912eb29a1464 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
@@ -155,7 +155,7 @@ export const Tabs = props => {
       tabIndex,
       activeKey,
     };
-  }, [activeTabs?.length, props.component, directPathToChild]);
+  }, [activeTabs, props.component, directPathToChild]);
 
   const [activeKey, setActiveKey] = useState(initActiveKey);
   const [selectedTabIndex, setSelectedTabIndex] = useState(initTabIndex);
@@ -173,14 +173,14 @@ export const Tabs = props => {
     } else {
       props.setActiveTab(activeKey);
     }
-  }, [activeKey]);
+  }, [props.setActiveTab, prevActiveKey, activeKey]);
 
   useEffect(() => {
     if (prevDashboardId && props.dashboardId !== prevDashboardId) {
       setSelectedTabIndex(initTabIndex);
       setActiveKey(initActiveKey);
     }
-  }, [props.dashboardId, prevDashboardId]);
+  }, [props.dashboardId, prevDashboardId, initTabIndex, initActiveKey]);
 
   useEffect(() => {
     const maxIndex = Math.max(0, props.component.children.length - 1);
@@ -224,6 +224,7 @@ export const Tabs = props => {
     props.isComponentVisible,
     selectedTabIndex,
     prevDirectPathToChild,
+    prevTabIds,
   ]);
 
   const handleClickTab = useCallback(
@@ -390,13 +391,19 @@ export const Tabs = props => {
 
   const { children: tabIds } = tabsComponent;
 
-  const showDropIndicators = currentDropTabIndex =>
-    currentDropTabIndex === dragOverTabIndex && {
-      left: editMode && dropPosition === DROP_LEFT,
-      right: editMode && dropPosition === DROP_RIGHT,
-    };
+  const showDropIndicators = useCallback(
+    currentDropTabIndex =>
+      currentDropTabIndex === dragOverTabIndex && {
+        left: editMode && dropPosition === DROP_LEFT,
+        right: editMode && dropPosition === DROP_RIGHT,
+      },
+    [dragOverTabIndex, dropPosition, editMode],
+  );
 
-  const removeDraggedTab = tabID => draggingTabId === tabID;
+  const removeDraggedTab = useCallback(
+    tabID => draggingTabId === tabID,
+    [draggingTabId],
+  );
 
   let tabsToHighlight;
   const highlightedFilterId =
@@ -498,24 +505,29 @@ export const Tabs = props => {
       </StyledTabsContainer>
     ),
     [
-      activeKey,
       editMode,
       renderHoverMenu,
       handleDeleteComponent,
-      handleClickTab,
+      tabsComponent.id,
+      activeKey,
       handleEdit,
-      handleDropOnTab,
-      renderTabContent,
       tabIds,
-      tabsComponent.id,
+      handleClickTab,
+      removeDraggedTab,
+      showDropIndicators,
+      depth,
       availableColumnCount,
       columnWidth,
+      handleDropOnTab,
+      handleGetDropPosition,
+      handleDragggingTab,
+      tabsToHighlight,
+      renderTabContent,
       onResizeStart,
       onResize,
       onResizeStop,
       selectedTabIndex,
       isCurrentTabVisible,
-      tabsToHighlight,
     ],
   );
 
diff --git a/superset-frontend/src/dashboard/containers/DashboardComponent.jsx b/superset-frontend/src/dashboard/containers/DashboardComponent.jsx
index 4f773c96bd3ca..f72ee2ecfaff8 100644
--- a/superset-frontend/src/dashboard/containers/DashboardComponent.jsx
+++ b/superset-frontend/src/dashboard/containers/DashboardComponent.jsx
@@ -19,6 +19,7 @@
 import { useCallback, memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
+import { isDefined } from '@superset-ui/core';
 import { useSelector, useDispatch } from 'react-redux';
 import { logEvent } from 'src/logger/actions';
 import { addDangerToast } from 'src/components/MessageToasts/actions';
@@ -123,6 +124,9 @@ const DashboardComponent = props => {
       fullSizeChartId={fullSizeChartId}
       occupiedColumnCount={occupiedColumnCount}
       minColumnWidth={minColumnWidth}
+      isComponentVisible={
+        isDefined(props.isComponentVisible) ? props.isComponentVisible : true
+      }
       {...boundActionCreators}
       {...props}
     />