diff --git a/e2e/dashboard-new-layouts/dashboards-move-panel.spec.ts b/e2e/dashboard-new-layouts/dashboards-move-panel.spec.ts index 81d6dc749b1..431a75dd54b 100644 --- a/e2e/dashboard-new-layouts/dashboards-move-panel.spec.ts +++ b/e2e/dashboard-new-layouts/dashboards-move-panel.spec.ts @@ -30,4 +30,30 @@ describe('Dashboard', () => { .should('be.higherThan', panel3); }); }); + + // Note, moving a panel from a nested row to a parent row currently just deletes the panel + // This test will need to be updated once the correct behavior is implemented. + it('can move panel from nested row to parent row', () => { + e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); + + e2e.flows.scenes.toggleEditMode(); + + e2e.flows.scenes.groupIntoRow(); + e2e.flows.scenes.groupIntoRow(); + + cy.get('[data-testid="data-testid dashboard-row-title-New row"]') + .first() + .then((el) => { + const rect = el.offset(); + e2e.components.Panels.Panel.headerContainer() + .contains(/^Panel one$/) + .trigger('pointerdown', { which: 1 }) + .trigger('pointermove', { clientX: rect.left, clientY: rect.top }) + .trigger('pointerup'); + }); + + e2e.components.Panels.Panel.headerContainer() + .contains(/^Panel one$/) + .should('not.exist'); + }); }); diff --git a/public/app/features/dashboard-scene/scene/DashboardLayoutOrchestrator.tsx b/public/app/features/dashboard-scene/scene/DashboardLayoutOrchestrator.tsx index f97eeaa87a0..ff46c11cc0e 100644 --- a/public/app/features/dashboard-scene/scene/DashboardLayoutOrchestrator.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardLayoutOrchestrator.tsx @@ -101,13 +101,17 @@ export class DashboardLayoutOrchestrator extends SceneObjectBase { - const key = element.getAttribute('data-dashboard-drop-target-key'); + const elementsUnderPoint = document.elementsFromPoint(evt.clientX, evt.clientY); + const cursorIsInSourceTarget = elementsUnderPoint.some( + (el) => el.getAttribute('data-dashboard-drop-target-key') === this._sourceDropTarget?.state.key + ); - return !!key && key !== this._sourceDropTarget?.state.key; - }) + if (cursorIsInSourceTarget) { + return null; + } + + const key = elementsUnderPoint + ?.find((element) => element.getAttribute('data-dashboard-drop-target-key')) ?.getAttribute('data-dashboard-drop-target-key'); if (!key) {