feat: support drag drop for dashboard

vaadin-dashboard-flow-parent/vaadin-dashboard-flow-integration-tests/src/main/java/com/vaadin/flow/component/dashboard/tests/DashboardDragDropPage.java

@@ -0,0 +1,65 @@
+/**
+ * Copyright 2000-2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ * See {@literal <https://vaadin.com/commercial-license-and-service-terms>} for the full
+ * license.
+ */
+package com.vaadin.flow.component.dashboard.tests;
+
+import com.vaadin.flow.component.dashboard.Dashboard;
+import com.vaadin.flow.component.dashboard.DashboardSection;
+import com.vaadin.flow.component.dashboard.DashboardWidget;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.NativeButton;
+import com.vaadin.flow.router.Route;
+
+/**
+ * @author Vaadin Ltd
+ */
+@Route("vaadin-dashboard/drag-drop")
+public class DashboardDragDropPage extends Div {
+
+    public DashboardDragDropPage() {
+        Dashboard dashboard = new Dashboard();
+
+        DashboardWidget widget1 = new DashboardWidget();
+        widget1.setTitle("Widget 1");
+
+        DashboardWidget widget2 = new DashboardWidget();
+        widget2.setTitle("Widget 2");
+
+        dashboard.add(widget1, widget2);
+
+        DashboardWidget widget1InSection1 = new DashboardWidget();
+        widget1InSection1.setTitle("Widget 1 in Section 1");
+
+        DashboardWidget widget2InSection1 = new DashboardWidget();
+        widget2InSection1.setTitle("Widget 2 in Section 1");
+
+        DashboardSection section1 = new DashboardSection("Section 1");
+        section1.add(widget1InSection1, widget2InSection1);
+
+        dashboard.addSection(section1);
+
+        DashboardWidget widgetInSection2 = new DashboardWidget();
+        widgetInSection2.setTitle("Widget in Section 2");
+
+        DashboardSection section2 = new DashboardSection("Section 2");
+        section2.add(widgetInSection2);
+
+        dashboard.addSection(section2);
+
+        NativeButton toggleAttached = new NativeButton("Toggle attached", e -> {
+            if (dashboard.getParent().isPresent()) {
+                dashboard.removeFromParent();
+            } else {
+                add(dashboard);
+            }
+        });
+        toggleAttached.setId("toggle-attached");
+
+        add(toggleAttached, dashboard);
+    }
+}

vaadin-dashboard-flow-parent/vaadin-dashboard-flow-integration-tests/src/main/java/com/vaadin/flow/component/dashboard/tests/DashboardSectionPage.java

@@ -21,7 +21,7 @@
 /**
  * @author Vaadin Ltd
  */
-@Route("vaadin-dashboard-section")
+@Route("vaadin-dashboard/section")
 public class DashboardSectionPage extends Div {
 
     public DashboardSectionPage() {

vaadin-dashboard-flow-parent/vaadin-dashboard-flow-integration-tests/src/main/java/com/vaadin/flow/component/dashboard/tests/DashboardWidgetPage.java

@@ -20,7 +20,7 @@
 /**
  * @author Vaadin Ltd
  */
-@Route("vaadin-dashboard-widget")
+@Route("vaadin-dashboard/widget")
 public class DashboardWidgetPage extends Div {
 
     public DashboardWidgetPage() {

vaadin-dashboard-flow-parent/vaadin-dashboard-flow-integration-tests/src/test/java/com/vaadin/flow/component/dashboard/tests/DashboardDragDropIT.java

@@ -0,0 +1,94 @@
+/**
+ * Copyright 2000-2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ * See {@literal <https://vaadin.com/commercial-license-and-service-terms>} for the full
+ * license.
+ */
+package com.vaadin.flow.component.dashboard.tests;
+
+import org.junit.Assert;
+import org.junit.Before;
+import org.junit.Test;
+
+import com.vaadin.flow.component.dashboard.testbench.DashboardElement;
+import com.vaadin.flow.component.dashboard.testbench.DashboardSectionElement;
+import com.vaadin.flow.component.dashboard.testbench.DashboardWidgetElement;
+import com.vaadin.flow.testutil.TestPath;
+import com.vaadin.tests.AbstractComponentIT;
+
+/**
+ * @author Vaadin Ltd
+ */
+@TestPath("vaadin-dashboard/drag-drop")
+public class DashboardDragDropIT extends AbstractComponentIT {
+
+    private DashboardElement dashboardElement;
+
+    @Before
+    public void init() {
+        open();
+        dashboardElement = $(DashboardElement.class).waitForFirst();
+    }
+
+    @Test
+    public void reorderWidgetOnClientSide_itemsAreReorderedCorrectly() {
+        DashboardWidgetElement widgetToReorder = dashboardElement.getWidgets()
+                .get(0);
+        reorderRootLevelItem(1, 0);
+        Assert.assertEquals(widgetToReorder.getTitle(),
+                dashboardElement.getWidgets().get(1).getTitle());
+    }
+
+    @Test
+    public void reorderSectionOnClientSide_itemsAreReorderedCorrectly() {
+        DashboardSectionElement sectionToReorder = dashboardElement
+                .getSections().get(0);
+        reorderRootLevelItem(2, 3);
+        Assert.assertEquals(sectionToReorder.getTitle(),
+                dashboardElement.getSections().get(1).getTitle());
+    }
+
+    @Test
+    public void reorderWidgetInSectionOnClientSide_itemsAreReorderedCorrectly() {
+        DashboardSectionElement firstSection = dashboardElement.getSections()
+                .get(0);
+        DashboardWidgetElement widgetToReorder = firstSection.getWidgets()
+                .get(1);
+        reorderWidgetInSection(2, 0, 1);
+        firstSection = dashboardElement.getSections().get(0);
+        Assert.assertEquals(widgetToReorder.getTitle(),
+                firstSection.getWidgets().get(0).getTitle());
+    }
+
+    @Test
+    public void detachReattach_reorderWidgetOnClientSide_itemsAreReorderedCorrectly() {
+        clickElementWithJs("toggle-attached");
+        clickElementWithJs("toggle-attached");
+        dashboardElement = $(DashboardElement.class).waitForFirst();
+        reorderWidgetOnClientSide_itemsAreReorderedCorrectly();
+    }
+
+    private void reorderWidgetInSection(int sectionIndex, int initialIndex,
+            int targetIndex) {
+        executeScript(
+                """
+                        const sectionIndex = %d;
+                        const reorderedItem = arguments[0].items[sectionIndex].items.splice(%d, 1)[0];
+                        arguments[0].items[sectionIndex].items.splice(%d, 0, reorderedItem);
+                        arguments[0].dispatchEvent(new CustomEvent('dashboard-item-reorder-end'));"""
+                        .formatted(sectionIndex, initialIndex, targetIndex),
+                dashboardElement);
+    }
+
+    private void reorderRootLevelItem(int initialIndex, int targetIndex) {
+        executeScript(
+                """
+                        const reorderedItem = arguments[0].items.splice(%d, 1)[0];
+                        arguments[0].items.splice(%d, 0, reorderedItem);
+                        arguments[0].dispatchEvent(new CustomEvent('dashboard-item-reorder-end'));"""
+                        .formatted(initialIndex, targetIndex),
+                dashboardElement);
+    }
+}

vaadin-dashboard-flow-parent/vaadin-dashboard-flow-integration-tests/src/test/java/com/vaadin/flow/component/dashboard/tests/DashboardSectionIT.java

@@ -24,7 +24,7 @@
 /**
  * @author Vaadin Ltd
  */
-@TestPath("vaadin-dashboard-section")
+@TestPath("vaadin-dashboard/section")
 public class DashboardSectionIT extends AbstractComponentIT {
 
     private DashboardElement dashboardElement;

vaadin-dashboard-flow-parent/vaadin-dashboard-flow-integration-tests/src/test/java/com/vaadin/flow/component/dashboard/tests/DashboardWidgetIT.java

@@ -22,7 +22,7 @@
 /**
  * @author Vaadin Ltd
  */
-@TestPath("vaadin-dashboard-widget")
+@TestPath("vaadin-dashboard/widget")
 public class DashboardWidgetIT extends AbstractComponentIT {
 
     private DashboardElement dashboardElement;