Dragging a chart onto a top-level tab (not an in-dash tab set) makes the chart a new (broken) tab

[rusackas]

Bug description

Well this is weird...

If you create a dashboard (or use an example dash) with top-level tabs, and you try to drag a chart to another tab, the chart goes INTO the tab bar, which doesn't work at all. It seems to work fine with tab sets that are IN the dashboard.

How to reproduce the bug

1. Open the example sales dash
2. Go into edit mode
3. Drag any chart onto one of the tabs you're not on
4. Hilarity ensues

Screenshots/recordings

May-09-2024.16-52-01.mp4

Superset version

master / latest-dev

Python version

3.9

Node version

16

Browser

Chrome

Additional context

No response

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

To address the issue where dragging a chart onto a top-level tab in Apache Superset's dashboard edit mode incorrectly creates a new tab, you'll need to modify the logic that handles drop actions. This involves adjusting the newEntitiesFromDrop function within superset-frontend/src/dashboard/util/newEntitiesFromDrop.js to ensure that when a chart is dropped onto a top-level tab, it is added to the tab's content rather than creating a new, broken tab.

Here's a concise approach to fix this:

1. Conditionally Handle Drops on Top-Level Tabs: Implement a condition in the newEntitiesFromDrop function to check if the drop target is a top-level tab. If so, the logic should be tailored to add the dropped chart directly to the tab's content.

2. Adjust the Logic for Adding to Tabs: Modify the function to prevent it from creating a new tab when a chart is dropped onto a top-level tab. Instead, ensure the chart is added as a child of the tab's content.

3. Ensure Correct Update of Children: Make sure the nextDropChildren array is correctly updated to reflect the addition of the new chart to the selected tab's content, maintaining the intended layout and functionality.

4. Thorough Testing: After making these changes, it's crucial to test the drag-and-drop functionality in various scenarios to ensure the dashboard behaves as expected without introducing new issues.

This solution requires familiarity with the Superset codebase and JavaScript. If you're not comfortable making these changes, consider reaching out to a developer with experience in Superset development.

Details

Sources

• superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
• superset-frontend/src/dashboard/util/newEntitiesFromDrop.js

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.