vaadin · mshabarov · Apr 16, 2024 · Mar 27, 2024 · Mar 27, 2024 · Mar 28, 2024
diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
@@ -1,7 +1,7 @@
 name: Verify
 on:
   push:
-    branches: [v24]
+    branches: [v24.4]
   workflow_dispatch:
   pull_request:
 permissions:
@@ -13,7 +13,7 @@ jobs:
       # for EnricoMi/publish-unit-test-result-action
       issues: read
       checks: write
-      pull-requests: write 
+      pull-requests: write
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -28,7 +28,7 @@ jobs:
           TBL=${{ secrets.TB_LICENSE }}
           [ -z "$TBL" ] && echo "No TB license provided" && exit 1
           mkdir -p ~/.vaadin/
-          echo '{"username":"'`echo $TBL | cut -d / -f1`'","proKey":"'`echo $TBL | cut -d / -f2`'"}' > ~/.vaadin/proKey          
+          echo '{"username":"'`echo $TBL | cut -d / -f1`'","proKey":"'`echo $TBL | cut -d / -f2`'"}' > ~/.vaadin/proKey
       - uses: actions/cache@v3
         with:
           path: ~/.m2/repository
@@ -37,7 +37,7 @@ jobs:
       - uses: browser-actions/setup-chrome@latest
         with:
           chrome-version: stable
-      - uses: nanasess/setup-chromedriver@master          
+      - uses: nanasess/setup-chromedriver@master
       - name: Verify
         run: |
           mvn -B -V -ntp verify -Dcom.vaadin.testbench.Parameters.headless -Pit,production
@@ -46,4 +46,4 @@ jobs:
         with:
           files: "**/target/*-reports/TEST*.xml"
           check_run_annotations: all tests, skipped tests
-          check_run_annotations_branch: v24
+          check_run_annotations_branch: v24.4
diff --git a/README.md b/README.md
@@ -47,8 +47,8 @@ Vaadin web applications are full-stack and include both client-side and server-s
 | &nbsp;&nbsp;&nbsp;&nbsp;`themes/`                             | Application theme sources          |
 | &nbsp;&nbsp;&nbsp;&nbsp;`util/`                               | Util scripts                       |
 | &nbsp;&nbsp;&nbsp;&nbsp;`views/`                              | UI views in React/TypeScript       |
-| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`$layout.tsx` | Layout/Menu for other views        |
-| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`index.tsx`   | Public Hilla view                  |
+| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`@layout.tsx` | Layout/Menu for other views        |
+| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`@index.tsx`  | Public Hilla view                  |
 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`about.tsx`   | Hilla view for authenticated users |
 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`hilla.tsx`   | Hilla view for 'USER'              |
 | &nbsp;&nbsp;&nbsp;&nbsp;`index.html`                          | HTML template                      |

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,23 +4,23 @@
   "type": "module",
   "dependencies": {
     "@polymer/polymer": "3.5.1",
-    "@vaadin/bundles": "24.4.0-alpha17",
+    "@vaadin/bundles": "24.4.0-alpha19",
     "@vaadin/common-frontend": "0.0.19",
-    "@vaadin/hilla-file-router": "24.4.0-alpha15",
-    "@vaadin/hilla-frontend": "24.4.0-alpha15",
-    "@vaadin/hilla-lit-form": "24.4.0-alpha15",
-    "@vaadin/hilla-react-auth": "24.4.0-alpha15",
-    "@vaadin/hilla-react-crud": "24.4.0-alpha15",
-    "@vaadin/hilla-react-form": "24.4.0-alpha15",
-    "@vaadin/hilla-react-i18n": "24.4.0-alpha15",
-    "@vaadin/hilla-react-signals": "24.4.0-alpha15",
-    "@vaadin/polymer-legacy-adapter": "24.4.0-alpha17",
-    "@vaadin/react-components": "24.4.0-alpha17",
+    "@vaadin/hilla-file-router": "24.4.0-alpha21",
+    "@vaadin/hilla-frontend": "24.4.0-alpha21",
+    "@vaadin/hilla-lit-form": "24.4.0-alpha21",
+    "@vaadin/hilla-react-auth": "24.4.0-alpha21",
+    "@vaadin/hilla-react-crud": "24.4.0-alpha21",
+    "@vaadin/hilla-react-form": "24.4.0-alpha21",
+    "@vaadin/hilla-react-i18n": "24.4.0-alpha21",
+    "@vaadin/hilla-react-signals": "24.4.0-alpha21",
+    "@vaadin/polymer-legacy-adapter": "24.4.0-alpha19",
+    "@vaadin/react-components": "24.4.0-alpha19",
     "@vaadin/router": "1.7.5",
     "@vaadin/vaadin-development-mode-detector": "2.0.6",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha17",
-    "@vaadin/vaadin-material-styles": "24.4.0-alpha17",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha17",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha19",
+    "@vaadin/vaadin-material-styles": "24.4.0-alpha19",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha19",
     "@vaadin/vaadin-usage-statistics": "2.1.2",
     "construct-style-sheets-polyfill": "3.1.0",
     "date-fns": "2.29.3",
@@ -31,29 +31,29 @@
     "react-router-dom": "6.22.3"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7",
+    "@babel/preset-react": "7.24.1",
     "@rollup/plugin-replace": "5.0.5",
     "@rollup/pluginutils": "5.1.0",
-    "@types/react": "18.2.64",
-    "@types/react-dom": "18.2.21",
-    "@vaadin/hilla-generator-cli": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-core": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-plugin-backbone": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-plugin-barrel": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-plugin-client": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-plugin-model": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-plugin-push": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-plugin-subtypes": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-utils": "24.4.0-alpha15",
+    "@types/react": "18.2.74",
+    "@types/react-dom": "18.2.24",
+    "@vaadin/hilla-generator-cli": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-core": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-plugin-backbone": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-plugin-barrel": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-plugin-client": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-plugin-model": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-plugin-push": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-plugin-subtypes": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-utils": "24.4.0-alpha21",
     "@vitejs/plugin-react": "4.2.1",
     "async": "3.2.5",
-    "glob": "10.3.10",
+    "glob": "10.3.12",
     "rollup-plugin-brotli": "3.1.0",
     "rollup-plugin-visualizer": "5.12.0",
     "strip-css-comments": "5.0.0",
     "transform-ast": "2.4.4",
-    "typescript": "5.4.2",
-    "vite": "5.1.6",
+    "typescript": "5.4.4",
+    "vite": "5.2.8",
     "vite-plugin-checker": "0.6.4",
     "workbox-build": "7.0.0",
     "workbox-core": "7.0.0",
@@ -62,23 +62,23 @@
   "vaadin": {
     "dependencies": {
       "@polymer/polymer": "3.5.1",
-      "@vaadin/bundles": "24.4.0-alpha17",
+      "@vaadin/bundles": "24.4.0-alpha19",
       "@vaadin/common-frontend": "0.0.19",
-      "@vaadin/hilla-file-router": "24.4.0-alpha15",
-      "@vaadin/hilla-frontend": "24.4.0-alpha15",
-      "@vaadin/hilla-lit-form": "24.4.0-alpha15",
-      "@vaadin/hilla-react-auth": "24.4.0-alpha15",
-      "@vaadin/hilla-react-crud": "24.4.0-alpha15",
-      "@vaadin/hilla-react-form": "24.4.0-alpha15",
-      "@vaadin/hilla-react-i18n": "24.4.0-alpha15",
-      "@vaadin/hilla-react-signals": "24.4.0-alpha15",
-      "@vaadin/polymer-legacy-adapter": "24.4.0-alpha17",
-      "@vaadin/react-components": "24.4.0-alpha17",
+      "@vaadin/hilla-file-router": "24.4.0-alpha21",
+      "@vaadin/hilla-frontend": "24.4.0-alpha21",
+      "@vaadin/hilla-lit-form": "24.4.0-alpha21",
+      "@vaadin/hilla-react-auth": "24.4.0-alpha21",
+      "@vaadin/hilla-react-crud": "24.4.0-alpha21",
+      "@vaadin/hilla-react-form": "24.4.0-alpha21",
+      "@vaadin/hilla-react-i18n": "24.4.0-alpha21",
+      "@vaadin/hilla-react-signals": "24.4.0-alpha21",
+      "@vaadin/polymer-legacy-adapter": "24.4.0-alpha19",
+      "@vaadin/react-components": "24.4.0-alpha19",
       "@vaadin/router": "1.7.5",
       "@vaadin/vaadin-development-mode-detector": "2.0.6",
-      "@vaadin/vaadin-lumo-styles": "24.4.0-alpha17",
-      "@vaadin/vaadin-material-styles": "24.4.0-alpha17",
-      "@vaadin/vaadin-themable-mixin": "24.4.0-alpha17",
+      "@vaadin/vaadin-lumo-styles": "24.4.0-alpha19",
+      "@vaadin/vaadin-material-styles": "24.4.0-alpha19",
+      "@vaadin/vaadin-themable-mixin": "24.4.0-alpha19",
       "@vaadin/vaadin-usage-statistics": "2.1.2",
       "construct-style-sheets-polyfill": "3.1.0",
       "date-fns": "2.29.3",
@@ -89,35 +89,35 @@
       "react-router-dom": "6.22.3"
     },
     "devDependencies": {
-      "@babel/preset-react": "^7",
+      "@babel/preset-react": "7.24.1",
       "@rollup/plugin-replace": "5.0.5",
       "@rollup/pluginutils": "5.1.0",
-      "@types/react": "18.2.64",
-      "@types/react-dom": "18.2.21",
-      "@vaadin/hilla-generator-cli": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-core": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-plugin-backbone": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-plugin-barrel": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-plugin-client": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-plugin-model": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-plugin-push": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-plugin-subtypes": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-utils": "24.4.0-alpha15",
+      "@types/react": "18.2.74",
+      "@types/react-dom": "18.2.24",
+      "@vaadin/hilla-generator-cli": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-core": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-plugin-backbone": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-plugin-barrel": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-plugin-client": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-plugin-model": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-plugin-push": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-plugin-subtypes": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-utils": "24.4.0-alpha21",
       "@vitejs/plugin-react": "4.2.1",
       "async": "3.2.5",
-      "glob": "10.3.10",
+      "glob": "10.3.12",
       "rollup-plugin-brotli": "3.1.0",
       "rollup-plugin-visualizer": "5.12.0",
       "strip-css-comments": "5.0.0",
       "transform-ast": "2.4.4",
-      "typescript": "5.4.2",
-      "vite": "5.1.6",
+      "typescript": "5.4.4",
+      "vite": "5.2.8",
       "vite-plugin-checker": "0.6.4",
       "workbox-build": "7.0.0",
       "workbox-core": "7.0.0",
       "workbox-precaching": "7.0.0"
     },
-    "hash": "14b0af69cef053b610020cef2a642f6cf5c00c7f758fbfadeea64a7c93c65d5b"
+    "hash": "77239bbc54a45d83b2a88bb2844736fd850436620e92081675affe96f66fef7c"
   },
   "overrides": {
     "@vaadin/bundles": "$@vaadin/bundles",
@@ -132,8 +132,10 @@
     "@vaadin/hilla-react-auth": "$@vaadin/hilla-react-auth",
     "react": "$react",
     "@vaadin/hilla-react-crud": "$@vaadin/hilla-react-crud",
+    "@vaadin/hilla-file-router": "$@vaadin/hilla-file-router",
     "construct-style-sheets-polyfill": "$construct-style-sheets-polyfill",
     "react-router-dom": "$react-router-dom",
+    "@vaadin/hilla-react-i18n": "$@vaadin/hilla-react-i18n",
     "lit": "$lit",
     "@polymer/polymer": "$@polymer/polymer",
     "@vaadin/hilla-lit-form": "$@vaadin/hilla-lit-form",
@@ -143,8 +145,6 @@
     "proj4": "$proj4",
     "@vaadin/vaadin-themable-mixin": "$@vaadin/vaadin-themable-mixin",
     "@vaadin/vaadin-lumo-styles": "$@vaadin/vaadin-lumo-styles",
-    "@vaadin/vaadin-material-styles": "$@vaadin/vaadin-material-styles",
-    "@vaadin/hilla-file-router": "$@vaadin/hilla-file-router",
-    "@vaadin/hilla-react-i18n": "$@vaadin/hilla-react-i18n"
+    "@vaadin/vaadin-material-styles": "$@vaadin/vaadin-material-styles"
   }
 }
diff --git a/pom.xml b/pom.xml
@@ -11,7 +11,7 @@
 
     <properties>
         <java.version>17</java.version>
-        <vaadin.version>24.4.0.alpha17</vaadin.version>
+        <vaadin.version>24.4.0.alpha21</vaadin.version>
     </properties>
 
     <parent>

diff --git a/src/main/frontend/index.html b/src/main/frontend/index.html
@@ -1,22 +1,23 @@
 <!DOCTYPE html>
-<html lang="en">
+<!--
+This file is auto-generated by Vaadin.
+-->
+
+<html>
 <head>
-  <meta charset="UTF-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
-  <title>###Project Name###</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
-    body {
+    body, #outlet {
       height: 100vh;
+      width: 100%;
       margin: 0;
     }
-
-    #outlet {
-      height: 100%;
-    }
   </style>
   <!-- index.ts is included here automatically (either by the dev server or during the build) -->
 </head>
 <body>
+  <!-- This outlet div is where the views are rendered -->
   <div id="outlet"></div>
 </body>
 </html>
diff --git a/src/main/frontend/index.tsx b/src/main/frontend/index.tsx
@@ -1,15 +1,17 @@
+/******************************************************************************
+ * Copied from generated file to wrap in AuthProvider
+ ******************************************************************************/
+
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
-import { AuthProvider} from "./auth";
-import router from 'Frontend/routes.js';
+import { router } from 'Frontend/generated/routes.js';
+import { AuthProvider } from './auth';
 
 function App() {
-    return (
-        <AuthProvider>
-            <RouterProvider router={router} />
-        </AuthProvider>
-    );
+    return <AuthProvider>
+        <RouterProvider router={router} />
+    </AuthProvider>;
 }
 
 createRoot(document.getElementById('outlet')!).render(createElement(App));
diff --git a/src/main/frontend/routes.tsx b/src/main/frontend/routes.tsx
diff --git a/src/main/frontend/views/$index.tsx → src/main/frontend/views/@index.tsx b/src/main/frontend/views/$index.tsx → src/main/frontend/views/@index.tsx
diff --git a/src/main/frontend/views/$layout.tsx → src/main/frontend/views/@layout.tsx b/src/main/frontend/views/$layout.tsx → src/main/frontend/views/@layout.tsx
@@ -4,9 +4,10 @@ import { Button } from '@vaadin/react-components/Button.js';
 import { DrawerToggle } from '@vaadin/react-components/DrawerToggle.js';
 import Placeholder from 'Frontend/components/placeholder/Placeholder.js';
 import { useRouteMetadata } from 'Frontend/util/routing.js';
-import {Suspense, useEffect} from 'react';
+import { Suspense, useEffect } from 'react';
 import { NavLink, Outlet } from 'react-router-dom';
-import {useAuth} from "../auth";
+import { useAuth } from "../auth";
+import { config as hillaConfig } from "Frontend/views/hilla";
 
 const navLinkClasses = ({ isActive }: any) => {
     return `block rounded-m p-s ${isActive ? 'bg-primary-10 text-primary' : 'text-body'}`;
@@ -31,6 +32,11 @@ export default function Layout() {
         }
     }
 
+    const hillaIsInRole = hillaConfig.rolesAllowed?.every(role =>
+        state.user?.authorities?.includes(role))
+    const flowIsInRole = state.user?.authorities?.includes(
+        'ROLE_ADMIN');
+
     return (
         <AppLayout primarySection="drawer">
             <div slot="drawer" className="flex flex-col justify-between h-full p-m">
@@ -40,17 +46,17 @@ export default function Layout() {
                         <NavLink className={navLinkClasses} to="/">
                             Hilla Public
                         </NavLink>
-                        {state.user ? (
+                        { state.user ? (
                             <NavLink className={navLinkClasses} to="/about">
                                 Hilla Authenticated
                             </NavLink>
                         ) : null}
-                        {state.user ? (
+                        { hillaIsInRole ? (
                             <NavLink className={navLinkClasses} to="/hilla">
                                 Hilla User
                             </NavLink>
                         ) : null}
-                        {state.user ? (
+                        { flowIsInRole ? (
                             <NavLink to={'/flow'} className={navLinkClasses}>
                                 Flow Admin
                             </NavLink>

diff --git a/src/main/frontend/views/about.tsx b/src/main/frontend/views/about.tsx
@@ -1,4 +1,9 @@
 import { VerticalLayout } from "@vaadin/react-components/VerticalLayout.js";
+import type { ViewConfig } from "@vaadin/hilla-file-router/types.js";
+
+export const config: ViewConfig = {
+    loginRequired: true
+};
 
 /**
  * Hilla views that allows access only for authenticated users.