feat: add dashboard component (#6706)

* feat: add dashboard packages (#6548) * feat: add dashboard packages * chore: use correct license * refactor: comment out npm package temporarily * refactor: add polymer legacy adapter * chore: remove incorrect npm package * fix: correct the inverted module names * chore: add license to pom * fix: add module to root level pom * chore: run formatter * feat: add packages for testbench and integration tests * fix: update polymer legacy adapter version * chore: remove unused dependency * feat: add title API to dashboard widget (#6560) * feat: add title for widget * chore: run formatter * refactor: use properties instead of attributes * docs: fix the widget title property name * feat: introduce add and remove widget functionality to dashboard (#6572) * feat: introduce add and remove widget functionality to dashboard * fix: add missing lines and run formatter * fix: fix compilation error * chore: run formatter * test: remove first and last widgets and use clickelementswithjs * refactor: make remove from parent use removevirtualchild for widgets * refactor: use append and remove with virtual children and remove from parent before add * chore: remove unused code * refactor: merge attach handlers * refactor: do not try to remove virtual child on detach * refactor: use widgets list to update detach listeners * test: add more unit tests for testing node ids on detach * refactor: use dashboard remove when removing widget from parent * test: use clickelementwithjs without locating element * refactor: remove detach listeners * test: add tests for moving widgets between parents * test: add unit tests for moving widgets between components * test: cleanup dashboard widget related unit tests * refactor: use add remove directly instead of using virtual children * refactor: simplify removing all widgets by reusing single remove logic * refactor: override getchildren * test: remove duplicate test and rename tests (#6585) * fix: handle invalid widget index (#6584) * feat: implement max col count feature (#6581) * feat: implement max col count feature * feat: add getter for maximum column count * Update vaadin-dashboard-flow-parent/vaadin-dashboard-flow/src/main/java/com/vaadin/flow/component/dashboard/Dashboard.java Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com> * Update vaadin-dashboard-flow-parent/vaadin-dashboard-flow/src/main/java/com/vaadin/flow/component/dashboard/Dashboard.java Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com> --------- Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com> * feat: add dashboard widget colspan support (#6591) * feat: add dashboard widget colspan support * test: add getter for colspan to dashboard widget element * test: use computed styles for getting colspan from testbench element * test: add its for getting and updating colspans * test: updated wording for getting colspan from testbench element * feat: add max min column width support (#6594) * feat: add max min column width support * test: remove its * feat: add gap support to dashboard (#6596) * feat: add min row height support to dashboard (#6613) * feat: add dashboard sections support (#6606) * feat: add dashboard sections support * feat: use components to set items on the client side (#6610) * refactor: restore patching virtual container to fix its * test: add its that cover more cases updating the client * refactor: make detach handler implement detach listener * feat: add content support to dashboard widget (#6618) * feat: add content related api to dashboard widget * refactor: make set get content separate from slotted elements * test: update testbench content to check for all slots * feat: add content related api to dashboard widget * refactor: make set get content separate from slotted elements * test: update testbench content to check for all slots * chore: run formatter * test: move tests into appropriate classes * feat: add rowspan support to dashboard widget (#6624) * feat: add content related api to dashboard widget * chore: run formatter * test: move tests into appropriate classes * feat: add rowspan support to dashboard widget * feat: add header support to dashboard widget (#6617) * feat: add content related api to dashboard widget * feat: add header support to dashboard widget * test: fix merge problems * test: add missing buttons to test page * feat: support drag drop for dashboard (#6633) * feat: support drag drop for dashboard * chore: run formatter * test: fix unit test assertion * test: update test route names to align with others * test: add its that test the server client communication * refactor: simplify js event workaround * fix: do not remove widgets on detach * refactor: remove item sanitization on drag reorder * refactor: check children of element and remove workaround * refactor: make dashboard not editable by default * test: use selenium for drag drop and add tests for editable * feat: add drag resize support to dashboard (#6643) * feat: add drag resize support to dashboard * refactor: make resize events return the item instead of node id * refactor: return widget instead of component in resize events * test: simplify resize it page and tests * feat: support dashboard item remove using button (#6650) * feat: support dashboard item remove using button * test: remove tests about visibility of edit buttons * refactor: do not handle clients events if dashboard is not editable (#6656) * refactor: make dashboard implement hassize (#6661) * refactor: throw exception when setting and getting visibility (#6658) * refactor: throw exception when setting and getting visibility * refactor: always return true when isvisible is called * refactor: make section and widget return true for isvisible * refactor: update events based on web component event changes (#6660) * refactor: return reordered items and parent from event * fix: handle the case where drag reorder returns the same items * chore: remove unused code * chore: rename incorrectly named test method * refactor: update events based on web component event changes * refactor: align event apis with web component * chore: run formatter * feat: implement i18n support (#6668) * feat: implement i18n support * test: do not check for default values * refactor: update i18n property names * docs: update wording for i18n methods * feat: implement item mode changed events (#6672) * refactor: use id instead of nodeid in client items array (#6671) * test: add tests for keyboard move and resize * fix: only update client items when necessary * refactor: use id in items array instead of nodeid * refactor: reintroduce removed client item updates * refactor: use id instead of nodeid in item state changed events * refactor: remove unnecessary equality check * feat: add dense layout support to dashboard (#6678) * feat: add dense layout support to dashboard * test: remove dense layout its * refactor: update dense property name * chore: update setter wordings * refactor: rename gap to spacing (#6687) * refactor: rename gap to spacing * docs: update spacing api javadocs * refactor: rename header apis and use header content slot (#6683) * test: fix tests * refactor: use latest web components * test: make test pages larger for consistency * chore: update dashboard package versions * fix: update pom versions * refactor: combine internal remove methods for widget and section * Update vaadin-dashboard-flow-parent/vaadin-dashboard-flow/pom.xml Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com> * docs: update event descriptions to specify when they are fired * docs: add descriptions to dashboard classes * docs: update javadocs to explain the index logic for adding widgets * Update vaadin-dashboard-flow-parent/vaadin-dashboard-flow-integration-tests/pom.xml Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com> --------- Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com> Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>
vaadin · Oct 15, 2024 · 53d36a0 · 53d36a0
1 parent 0078e88
commit 53d36a0
Show file tree

Hide file tree

Showing 41 changed files with 5,864 additions and 0 deletions.
diff --git a/pom.xml b/pom.xml
@@ -56,6 +56,7 @@
         <module>vaadin-combo-box-flow-parent</module>
         <module>vaadin-context-menu-flow-parent</module>
         <module>vaadin-custom-field-flow-parent</module>
+        <module>vaadin-dashboard-flow-parent</module>
         <module>vaadin-date-picker-flow-parent</module>
         <module>vaadin-date-time-picker-flow-parent</module>
         <module>vaadin-details-flow-parent</module>

diff --git a/vaadin-dashboard-flow-parent/LICENSE b/vaadin-dashboard-flow-parent/LICENSE
@@ -0,0 +1,3 @@
+This program is available under Vaadin Commercial License and Service Terms.
+See https://vaadin.com/commercial-license-and-service-terms for the full
+license.
diff --git a/vaadin-dashboard-flow-parent/README.md b/vaadin-dashboard-flow-parent/README.md
@@ -0,0 +1,22 @@
+# Dashboard component for Vaadin Flow
+
+This project is the Component wrapper implementation of [`<vaadin-dashboard>`](https://github.com/vaadin/web-components/tree/main/packages/dashboard)
+element for use from the server side with [Vaadin Flow](https://github.com/vaadin/flow).
+
+## Using the component in a Flow application
+
+To use the component in an application using maven,
+add the following dependency to your `pom.xml`:
+```
+<dependency>
+    <groupId>com.vaadin</groupId>
+    <artifactId>vaadin-dashboard-flow</artifactId>
+    <version>${component.version}</version>
+</dependency>
+```
+
+## License
+
+This component is distributed under [Vaadin Commercial License and Service Terms](https://vaadin.com/commercial-license-and-service-terms).
+
+To purchase a license, visit http://vaadin.com/pricing
diff --git a/vaadin-dashboard-flow-parent/pom.xml b/vaadin-dashboard-flow-parent/pom.xml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>com.vaadin</groupId>
+        <artifactId>vaadin-flow-components</artifactId>
+        <version>24.6-SNAPSHOT</version>
+    </parent>
+    <artifactId>vaadin-dashboard-flow-parent</artifactId>
+    <packaging>pom</packaging>
+    <name>Vaadin Dashboard Parent</name>
+    <description>Vaadin Dashboard Parent</description>
+    <licenses>
+        <license>
+            <name>Vaadin Commercial License and Service Terms</name>
+            <url>https://vaadin.com/commercial-license-and-service-terms</url>
+        </license>
+    </licenses>
+    <properties>
+        <spotless.licence-header>${maven.multiModuleProjectDirectory}/scripts/templates/vaadin-commercial-license-header.txt</spotless.licence-header>
+    </properties>
+    <modules>
+        <module>vaadin-dashboard-flow</module>
+        <module>vaadin-dashboard-testbench</module>
+    </modules>
+    <profiles>
+        <profile>
+            <id>default</id>
+            <activation>
+                <property>
+                    <name>!release</name>
+                </property>
+            </activation>
+            <modules>
+                <module>vaadin-dashboard-flow-integration-tests</module>
+            </modules>
+        </profile>
+    </profiles>
+    <dependencies/>
+</project>
diff --git a/vaadin-dashboard-flow-parent/vaadin-dashboard-flow-integration-tests/pom.xml b/vaadin-dashboard-flow-parent/vaadin-dashboard-flow-integration-tests/pom.xml
@@ -0,0 +1,162 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>com.vaadin</groupId>
+        <artifactId>vaadin-dashboard-flow-parent</artifactId>
+        <version>24.6-SNAPSHOT</version>
+    </parent>
+    <artifactId>vaadin-dashboard-integration-tests</artifactId>
+    <packaging>war</packaging>
+    <name>Vaadin Dashboard Integration Tests</name>
+    <description>Vaadin Dashboard Integration Tests</description>
+    <dependencies>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-dev-server</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-testbench-core</artifactId>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-client</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-data</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-html-components</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-lumo-theme</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.slf4j</groupId>
+            <artifactId>slf4j-simple</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-test-util</artifactId>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-flow-components-test-util</artifactId>
+            <version>${project.version}</version>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-lit-template</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-polymer-template</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-dashboard-flow</artifactId>
+            <version>24.6-SNAPSHOT</version>
+            <scope>compile</scope>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-dashboard-testbench</artifactId>
+            <version>24.6-SNAPSHOT</version>
+            <scope>test</scope>
+        </dependency>
+    </dependencies>
+    <build>
+        <plugins>
+            <plugin>
+                <artifactId>maven-clean-plugin</artifactId>
+                <configuration>
+                    <filesets>
+                        <fileset>
+                            <directory>${project.basedir}</directory>
+                            <includes>
+                                <include>package*.json</include>
+                                <include>pnpm*</include>
+                                <include>vite.generated.ts</include>
+                                <include>types.d.ts</include>
+                                <include>tsconfig.json</include>
+                                <include>frontend/routes.tsx</include>
+                                <include>frontend/App.tsx</include>
+                            </includes>
+                        </fileset>
+                        <fileset>
+                            <directory>${project.basedir}/node_modules</directory>
+                            <directory>${project.basedir}/frontend/generated</directory>
+                        </fileset>
+                    </filesets>
+                </configuration>
+            </plugin>
+            <plugin>
+                <artifactId>maven-failsafe-plugin</artifactId>
+            </plugin>
+            <plugin>
+                <artifactId>maven-resources-plugin</artifactId>
+            </plugin>
+            <plugin>
+                <groupId>org.sonatype.plugins</groupId>
+                <artifactId>nexus-staging-maven-plugin</artifactId>
+                <configuration>
+                    <skipNexusStagingDeployMojo>true</skipNexusStagingDeployMojo>
+                </configuration>
+            </plugin>
+            <plugin>
+                <groupId>org.codehaus.mojo</groupId>
+                <artifactId>properties-maven-plugin</artifactId>
+            </plugin>
+            <plugin>
+                <artifactId>maven-install-plugin</artifactId>
+                <configuration>
+                    <skip>true</skip>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>
+    <profiles>
+        <profile>
+            <id>build-frontend</id>
+            <activation>
+                <property>
+                    <name>!skipFrontend</name>
+                </property>
+            </activation>
+            <build>
+                <plugins>
+                    <plugin>
+                        <groupId>com.vaadin</groupId>
+                        <artifactId>flow-maven-plugin</artifactId>
+                    </plugin>
+                </plugins>
+            </build>
+        </profile>
+        <profile>
+            <id>run-jetty</id>
+            <activation>
+                <property>
+                    <name>!skipJetty</name>
+                </property>
+            </activation>
+            <build>
+                <plugins>
+                    <plugin>
+                        <groupId>org.eclipse.jetty.ee10</groupId>
+                        <artifactId>jetty-ee10-maven-plugin</artifactId>
+                        <configuration>
+                            <scan>5</scan>
+                        </configuration>
+                    </plugin>
+                </plugins>
+            </build>
+        </profile>
+    </profiles>
+</project>
diff --git a/...tion-tests/src/main/java/com/vaadin/flow/component/dashboard/tests/DashboardI18nPage.java b/...tion-tests/src/main/java/com/vaadin/flow/component/dashboard/tests/DashboardI18nPage.java
@@ -0,0 +1,100 @@
+/**
+ * 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;
+
+@Route("vaadin-dashboard/i18n")
+public class DashboardI18nPage extends Div {
+
+    enum I18nEntry {
+        SELECT_SECTION("selectSection"),
+
+        SELECT_WIDGET("selectWidget"),
+
+        REMOVE("remove"),
+
+        RESIZE("resize"),
+
+        RESIZE_APPLY("resizeApply"),
+
+        RESIZE_SHRINK_WIDTH("resizeShrinkWidth"),
+
+        RESIZE_GROW_WIDTH("resizeGrowWidth"),
+
+        RESIZE_SHRINK_HEIGHT("resizeShrinkHeight"),
+
+        RESIZE_GROW_HEIGHT("resizeGrowHeight"),
+
+        MOVE("move"),
+
+        MOVE_APPLY("moveApply"),
+
+        MOVE_FORWARD("moveForward"),
+
+        MOVE_BACKWARD("moveBackward");
+
+        private final String key;
+
+        I18nEntry(String key) {
+            this.key = key;
+        }
+
+        public String getKey() {
+            return key;
+        }
+
+        public String getCustomValue() {
+            return "Custom " + key;
+        }
+    }
+
+    public DashboardI18nPage() {
+        Dashboard dashboard = new Dashboard();
+        dashboard.setEditable(true);
+
+        dashboard.add(new DashboardWidget());
+        DashboardSection section = dashboard.addSection();
+        section.add(new DashboardWidget());
+
+        NativeButton setCustomI18n = new NativeButton("Set custom i18n",
+                e -> dashboard.setI18n(getCustomI18n()));
+        setCustomI18n.setId("set-custom-i18n");
+
+        add(setCustomI18n, dashboard);
+    }
+
+    private static Dashboard.DashboardI18n getCustomI18n() {
+        Dashboard.DashboardI18n dashboardI18n = new Dashboard.DashboardI18n();
+        dashboardI18n
+                .setSelectSection(I18nEntry.SELECT_SECTION.getCustomValue());
+        dashboardI18n.setSelectWidget(I18nEntry.SELECT_WIDGET.getCustomValue());
+        dashboardI18n.setRemove(I18nEntry.REMOVE.getCustomValue());
+        dashboardI18n.setResize(I18nEntry.RESIZE.getCustomValue());
+        dashboardI18n.setResizeApply(I18nEntry.RESIZE_APPLY.getCustomValue());
+        dashboardI18n.setResizeShrinkWidth(
+                I18nEntry.RESIZE_SHRINK_WIDTH.getCustomValue());
+        dashboardI18n.setResizeGrowWidth(
+                I18nEntry.RESIZE_GROW_WIDTH.getCustomValue());
+        dashboardI18n.setResizeShrinkHeight(
+                I18nEntry.RESIZE_SHRINK_HEIGHT.getCustomValue());
+        dashboardI18n.setResizeGrowHeight(
+                I18nEntry.RESIZE_GROW_HEIGHT.getCustomValue());
+        dashboardI18n.setMove(I18nEntry.MOVE.getCustomValue());
+        dashboardI18n.setMoveApply(I18nEntry.MOVE_APPLY.getCustomValue());
+        dashboardI18n.setMoveForward(I18nEntry.MOVE_FORWARD.getCustomValue());
+        dashboardI18n.setMoveBackward(I18nEntry.MOVE_BACKWARD.getCustomValue());
+        return dashboardI18n;
+    }
+}