Skip to content

Commit

Permalink
feat: Use RoutesBuilder API (#29)
Browse files Browse the repository at this point in the history
* feat: Use RoutesBuilder API

* feat: Use RoutesBuilder API

* Add view configs

* update with the latest changes in Hilla

* use at not $

* Upgrade to alpha 21

* Update package files

* update branch settings

* Apply suggestions from code review

Co-authored-by: Tomi Virtanen <[email protected]>

* hide hilla or flow views if they aren't in the role

* fix compile error

* Handle generated files

---------

Co-authored-by: Tomi Virtanen <[email protected]>
Co-authored-by: Luciano Vernaschi <[email protected]>
  • Loading branch information
3 people authored Apr 16, 2024
1 parent d5a47e9 commit 5ac9643
Show file tree
Hide file tree
Showing 12 changed files with 3,246 additions and 3,034 deletions.
10 changes: 5 additions & 5 deletions .github/workflows/validate.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
name: Verify
on:
push:
branches: [v24]
branches: [v24.4]
workflow_dispatch:
pull_request:
permissions:
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
6,052 changes: 3,134 additions & 2,918 deletions package-lock.json

Large diffs are not rendered by default.

124 changes: 62 additions & 62 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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"
}
}
2 changes: 1 addition & 1 deletion pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
19 changes: 10 additions & 9 deletions src/main/frontend/index.html
Original file line number Diff line number Diff line change
@@ -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>
16 changes: 9 additions & 7 deletions src/main/frontend/index.tsx
Original file line number Diff line number Diff line change
@@ -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));
24 changes: 0 additions & 24 deletions src/main/frontend/routes.tsx

This file was deleted.

File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -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'}`;
Expand All @@ -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">
Expand All @@ -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>
Expand Down
5 changes: 5 additions & 0 deletions src/main/frontend/views/about.tsx
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
Loading

0 comments on commit 5ac9643

Please sign in to comment.