From 7026b7670514eb80d8e0a015dc35a2d8959c6f0e Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Fri, 13 Sep 2024 15:52:30 +0300
Subject: [PATCH] fix: do not throw on drag when dashboard has one widget

---
 .../dashboard/src/widget-reorder-controller.js  |  4 ++++
 .../test/dashboard-widget-reordering.test.ts    | 17 +++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/packages/dashboard/src/widget-reorder-controller.js b/packages/dashboard/src/widget-reorder-controller.js
index 9952181596..0fe154244c 100644
--- a/packages/dashboard/src/widget-reorder-controller.js
+++ b/packages/dashboard/src/widget-reorder-controller.js
@@ -67,6 +67,10 @@ export class WidgetReorderController extends EventTarget {
     }
     // Get all elements except the dragged element from the drag context
     const otherElements = dragContextElements.filter((element) => element !== draggedElement);
+    if (otherElements.length === 0) {
+      return;
+    }
+
     // Find the element closest to the x and y coordinates of the drag event
     const closestElement = this.__getClosestElement(otherElements, e.clientX, e.clientY);
 
diff --git a/packages/dashboard/test/dashboard-widget-reordering.test.ts b/packages/dashboard/test/dashboard-widget-reordering.test.ts
index ada60b6e26..c9c5ade5ee 100644
--- a/packages/dashboard/test/dashboard-widget-reordering.test.ts
+++ b/packages/dashboard/test/dashboard-widget-reordering.test.ts
@@ -487,6 +487,23 @@ describe('dashboard - widget reordering', () => {
       ]);
     });
 
+    it('should throw when dragging when there is only one widget', async () => {
+      dashboard.items = [{ id: 0 }];
+      await nextFrame();
+      // Start dragging the first widget
+      fireDragStart(getElementFromCell(dashboard, 0, 0)!);
+      await nextFrame();
+
+      expect(() => {
+        const dashboardRect = dashboard.getBoundingClientRect();
+        const dragOverEvent = createDragEvent('dragover', {
+          x: dashboardRect.right - dashboardRect.width / 4,
+          y: dashboardRect.top + dashboardRect.height / 2,
+        });
+        dashboard.dispatchEvent(dragOverEvent);
+      }).to.not.throw();
+    });
+
     describe('sections', () => {
       beforeEach(async () => {
         dashboard.items = [{ id: 0 }, { id: 1 }, { items: [{ id: 2 }, { id: 3 }] }];