root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 137 Packages Projects Releases Wiki Activity

DashboardLayoutOrchestrator: Refine drag drop logic (#106079)

This commit is contained in:
kay delaney 2025-05-29 13:48:25 +01:00 committed by GitHub
parent c23ee1e116
commit 3b78078ea4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 36 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
e2e/dashboard-new-layouts/dashboards-move-panel.spec.ts
View File

@ -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');
});
});

16
public/app/features/dashboard-scene/scene/DashboardLayoutOrchestrator.tsx
View File

@ -101,13 +101,17 @@ export class DashboardLayoutOrchestrator extends SceneObjectBase<DashboardLayout
}
private _getDropTargetUnderMouse(evt: MouseEvent): DashboardDropTarget | null {
const key = document
.elementsFromPoint(evt.clientX, evt.clientY)
?.find((element) => {
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) {