Merge branch 'latest' into docs/auto-responsive-form-layout

Author: vursen

articles/building-apps/security/add-login/flow.adoc

@@ -263,18 +263,32 @@ public final class MainLayout extends AppLayout {
 }
 ----
 
-.TodoView.java
+.MainView.java
 [source,java]
 ----
 import jakarta.annotation.security.PermitAll;
 
-@Route("")
+@Route
+// tag::snippet[]
+@PermitAll
+// end::snippet[]
+public final class MainView extends Main {
+    ...
+}
+----
+
+.TaskListView.java
+[source,java]
+----
+import jakarta.annotation.security.PermitAll;
+
+@Route("task-list")
 @PageTitle("Task List")
 @Menu(order = 0, icon = "vaadin:clipboard-check", title = "Task List")
 // tag::snippet[]
 @PermitAll
 // end::snippet[]
-public class TodoView extends Main {
+public class TaskListView extends Main {
     ...
 }
 ----
@@ -295,7 +309,7 @@ You should now see the login screen. Login with one of the following credentials
 * *User:* user / *Password:* password
 * *Admin:* admin / *Password:* admin
 
-After logging in, you should be able to access the todo view.
+After logging in, you should be able to access the task list view.
 ====
 
 

articles/building-apps/security/add-login/hilla.adoc

@@ -442,7 +442,7 @@ You should now see the login screen. Login with one of the following credentials
 * *User:* user / *Password:* password
 * *Admin:* admin / *Password:* admin
 
-After logging in, you should be able to access the todo view.
+After logging in, you should be able to access the task list view.
 ====
 
 

articles/building-apps/security/add-logout/hilla.adoc

@@ -85,7 +85,7 @@ In this mini-tutorial, you'll add logout functionality to a real Vaadin applicat
 ====
 Import `useAuth` into `src/main/frontend/views/@layout.tsx`:
 
-[email protected]
+.frontend/views/@layout.tsx
 [source,tsx]
 ----
 import {useAuth} from "Frontend/security/auth";
@@ -99,7 +99,7 @@ import {useAuth} from "Frontend/security/auth";
 ====
 The *user menu* in `@layout.tsx` already contains a *logout item*, but it does nothing. Modify it to call `logout()` when clicked:
 
-[email protected]
+.frontend/views/@layout.tsx
 [source,tsx]
 ----
 ...

articles/building-apps/security/protect-services/flow.adoc

@@ -117,32 +117,32 @@ class SecurityConfig extends VaadinWebSecurity {
 ====
 
 
-.Secure the Todo Service
+.Secure the Task Service
 [%collapsible]
 ====
 In an earlier tutorial, you made the task list read-only for users, allowing only admins to create tasks.
 
-Open [classname]`TodoService` and add [annotationname]`@PreAuthorize` annotations like this:
+Open [classname]`TaskService` and add [annotationname]`@PreAuthorize` annotations like this:
 
-.TodoService.java
+.TaskService.java
 [source,java]
 ----
 @Service
 // tag::snippet[]
 @PreAuthorize("isAuthenticated()")
 // end::snippet[]
 @Transactional(propagation = Propagation.REQUIRES_NEW)
-public class TodoService {
+public class TaskService {
     ...
 
 // tag::snippet[]
     @PreAuthorize("hasRole('" + Roles.ADMIN + "')")
 // end::snippet[]
-    public void createTodo(String description, @Nullable LocalDate dueDate) {
+    public void createTask(String description, @Nullable LocalDate dueDate) {
         // ...
     }
 
-    public List<Todo> list(Pageable pageable) {
+    public List<Task> list(Pageable pageable) {
         // ...
     }
 }
@@ -154,21 +154,21 @@ Log in as `ADMIN` and create some tasks. Everything should work as before.
 ====
 
 
-.Break the Task List
+.Break the Task List View
 [%collapsible]
 ====
-To see that the service is actually protected, you're going to break the task list. Open [classname]`TodoView` and comment out the lines that check whether the user is an admin or not:
+To see that the service is actually protected, you're going to break the task list. Open [classname]`TaskListView` and comment out the lines that check whether the user is an admin or not:
 
-.TodoView.java
+.TaskListView.java
 [source,java]
 ----
-@Route("")
+@Route("task-list")
 @PageTitle("Task List")
 @Menu(order = 0, icon = "vaadin:clipboard-check", title = "Task List")
 @PermitAll
-public class TodoView extends Main {
+public class TaskListView extends Main {
 
-    public TodoView(TodoService todoService, Clock clock,
+    public TaskListView(TaskService taskService, Clock clock,
             AuthenticationContext authenticationContext) {
 
         // The rest of the constructor omitted
@@ -183,14 +183,14 @@ public class TodoView extends Main {
         //    add(new ViewToolbar("Task List")); 
         //}
 // end::snippet[]
-        add(todoGrid);
+        add(taskGrid);
     }
     ...
 }
 ----
 Then go back to the browser, logout, and login as `USER`. If you now try to create a task, you should get an error message.
 
-Now change `TodoView()` back again by removing the comments.
+Now change `TaskListView()` back again by removing the comments.
 // TODO This should be replaced with an integration test that checks the security.
 ====
 

articles/building-apps/security/protect-services/hilla.adoc

@@ -194,32 +194,32 @@ class SecurityConfig extends VaadinWebSecurity {
 ====
 
 
-.Secure the Todo Service
+.Secure the Task Service
 [%collapsible]
 ====
 In an earlier tutorial, you made the task list read-only for users, allowing only admins to create tasks.
 
-Open [classname]`TodoService` and replace [annotationname]`@AnonymousAllowed` with [annotationname]`@PermitAll`. Then, add [annotationname]`@RolesAllowed` to `createTodo()`:
+Open [classname]`TaskService` and replace [annotationname]`@AnonymousAllowed` with [annotationname]`@PermitAll`. Then, add [annotationname]`@RolesAllowed` to `createTask()`:
 
-.TodoService.java
+.TaskService.java
 [source,java]
 ----
 @BrowserCallable
 // tag::snippet[]
 @PermitAll
 // end::snippet[]
 @Transactional(propagation = Propagation.REQUIRES_NEW)
-public class TodoService {
+public class TaskService {
     ...
 
 // tag::snippet[]
     @RolesAllowed(Roles.ADMIN)
 // end::snippet[]
-    public void createTodo(String description, @Nullable LocalDate dueDate) {
+    public void createTask(String description, @Nullable LocalDate dueDate) {
         //...
     }
 
-    public List<Todo> list(Pageable pageable) {
+    public List<Task> list(Pageable pageable) {
         // ...
     }
 }
@@ -234,16 +234,16 @@ Log in as `ADMIN` and create some tasks. Everything should work as before.
 .Break the Task List
 [%collapsible]
 ====
-To see that the service is actually protected, you're going to break the task list. Open `src/main/frontend/views/@index.tsx` and change `TodoView()` so that `isAdmin` is always `true`:
+To see that the service is actually protected, you're going to break the task list. Open `src/main/frontend/views/task-list.tsx` and change `TaskListView()` so that `isAdmin` is always `true`:
 
-.frontend/views/@index.tsx
+.frontend/views/task-list.tsx
 [source,tsx]
 ----
 ...
 
-export default function TodoView() {
-    const dataProvider = useDataProvider<Todo>({
-        list: (pageable) => TodoService.list(pageable),
+export default function TaskListView() {
+    const dataProvider = useDataProvider<Task>({
+        list: (pageable) => TaskService.list(pageable),
     });
     const auth = useAuth();
 // tag::snippet[]
@@ -255,7 +255,7 @@ export default function TodoView() {
 
 Then go back to the browser, logout, and login as `USER`. If you now try to create a task, you should get an error message.
 
-Now change `TodoView()` back again.
+Now change `TaskListView()` back again.
 // TODO This should be replaced with an integration test that checks the security, if that is even possible to write at the moment.
 ====
 

articles/building-apps/security/protect-views/flow.adoc

@@ -320,7 +320,7 @@ class SecurityConfig extends VaadinWebSecurity {
 .Create Admin View
 [%collapsible]
 ====
-Create a new class [classname]`AdminView` in the [packagename]`[application package].todo.ui.view` package:
+Create a new class [classname]`AdminView` in the [packagename]`[application package].taskmanagement.ui.view` package:
 
 .AdminView.java
 [source,java]
@@ -359,18 +359,18 @@ Attempt to access http://localhost:8080/admin directly. You should see an access
 .Make the Task List Read-Only For Users
 [%collapsible]
 ====
-So far all authenticated users have been able to add tasks to [classname]`TodoView`. You'll now change it so that only users with the `ADMIN` role can add tasks. Open [classname]`TodoView` and change the constructor as follows:
+So far all authenticated users have been able to add tasks to [classname]`TaskListView`. You'll now change it so that only users with the `ADMIN` role can add tasks. Open [classname]`TaskListView` and change the constructor as follows:
 
-.TodoView.java
+.TaskListView.java
 [source,java]
 ----
-@Route("")
+@Route("task-list")
 @PageTitle("Task List")
 @Menu(order = 0, icon = "vaadin:clipboard-check", title = "Task List")
 @PermitAll
-public class TodoView extends Main {
+public class TaskListView extends Main {
 
-    public TodoView(TodoService todoService, Clock clock, 
+    public TaskListView(TaskService taskService, Clock clock, 
 // tag::snippet[]
             AuthenticationContext authenticationContext) {
 // end::snippet[]
@@ -385,7 +385,7 @@ public class TodoView extends Main {
             add(new ViewToolbar("Task List")); // <2>
         }
 // end::snippet[]
-        add(todoGrid);
+        add(taskGrid);
     }
     ...
 }

articles/building-apps/security/protect-views/hilla.adoc

@@ -239,18 +239,18 @@ Attempt to access http://localhost:8080/admin directly. You should end up on the
 .Make the Task List Read-Only For Users
 [%collapsible]
 ====
-So far all authenticated users have been able to add tasks to the todo view. You'll now change it so that only users with the `ADMIN` role can add tasks. Open `src/main/frontend/views/index.tsx` and change it as follows:
+So far all authenticated users have been able to add tasks to the task list view. You'll now change it so that only users with the `ADMIN` role can add tasks. Open `src/main/frontend/views/task-list.tsx` and change it as follows:
 
-.frontend/views/index.tsx
+.frontend/views/task-list.tsx
 [source,tsx]
 ----
 // tag::snippet[]
 import { useAuth } from "Frontend/security/auth";
 // end::snippet[]
 ...
-export default function TodoView() {
-  const dataProvider = useDataProvider<Todo>({
-    list: (pageable) => TodoService.list(pageable),
+export default function TaskListView() {
+  const dataProvider = useDataProvider<Task>({
+    list: (pageable) => TaskService.list(pageable),
   });
 // tag::snippet[]
   const auth = useAuth();
@@ -262,7 +262,7 @@ export default function TodoView() {
       <ViewToolbar title="Task List">
 {/* tag::snippet[] */}
         {isAdmin && <Group> {/* <1> */}
-          <TodoEntryForm onTodoCreated={dataProvider.refresh} />
+          <TaskEntryForm onTaskCreated={dataProvider.refresh} />
         </Group>}
 {/* end::snippet[] */}
       </ViewToolbar>

articles/building-apps/views/add-router-layout/hilla.adoc

@@ -24,7 +24,7 @@ To create a router layout, create a file named `@layout.tsx` in any directory un
 Here's an example of a basic router layout created directly under the `views` directory that wraps all views in the application, as it is located in the root of `views` directory:
 
 [source,tsx]
-./views/@layout.tsx
+.frontend/views/@layout.tsx
 ----
 // tag::snippet[]
 import { Outlet } from 'react-router';
@@ -56,7 +56,7 @@ In this example, the `MainLayout` component wraps all views in the application w
 Here's an example of a layout that wraps the views defined in the `customers` directory and any possible subdirectories:
 
 [source,tsx]
-./views/customers/@layout.tsx
+.frontend/views/customers/@layout.tsx
 ----
 import { Outlet } from 'react-router';
 
@@ -100,7 +100,7 @@ views
 There are certain views and routes that should not be rendered inside any layouts. A `login` view is common example of such a view that should escape being rendered within the application layout. You can skip the layouts that are applied to views using the `ViewConfig` configuration object. Export this object from your view file to instruct the router not to wrap this view inside any layout available in the directory structure:
 
 [source,tsx]
-./views/login.tsx
+.frontend/views/login.tsx
 ----
 // tag::snippet[]
 import { ViewConfig } from '@vaadin/hilla-file-router/types.js';
@@ -126,7 +126,7 @@ export const config: ViewConfig = {
 The Hilla router provides utilities to create navigation menus based on your route structure. Use the `createMenuItems()` utility to automatically generate menu items:
 
 [source,tsx]
-./views/@layout.tsx
+.frontend/views/@layout.tsx
 ----
 // tag::snippet[]
 import { createMenuItems } from '@vaadin/hilla-file-router/runtime.js';
@@ -190,7 +190,7 @@ The skeleton already contains a main layout. Instead of implementing one from sc
 
 The main layout is based on <<{articles}/components/app-layout#,App Layout>>:
 
-./views/@layout.tsx
+.frontend/views/@layout.tsx
 [source,tsx]
 ----
 // imports and interal components
@@ -321,7 +321,7 @@ The <<{articles}/building-apps/security#,Security>> guides show you how to add r
 Create a new directory named as `customers` under `views`. Inside this directory, create a new file called [filename]`@layout.tsx`, like this:
 
 [source,tsx]
-./views/customers/@layout.tsx
+.frontend/views/customers/@layout.tsx
 ----
 import { Outlet } from 'react-router';
 
@@ -353,7 +353,7 @@ You can't see what your new layout looks like yet, because you don't have any vi
 ====
 You'll now create two views that both use the new nested layout automatically. Inside the [directoryname]`views` directory, create two new views; [filename]`new.tsx` and [filename]`@index.tsx`:
 
-./views/customers/new.tsx
+.frontend/views/customers/new.tsx
 [source,tsx]
 ----
 export default function NewCustomerView() {
@@ -368,7 +368,7 @@ export default function NewCustomerView() {
 ----
 <1> A red background is added to the view to make it visually distinct from the main layout and the nested layout.
 
-./views/customers/@index.tsx
+.frontend/views/customers/@index.tsx
 [source,tsx]
 ----
 export default function CustomerListView() {
@@ -403,7 +403,7 @@ Navigate back and forth between them, and verify that the nested layout is appli
 ====
 Add a [filename]`login.tsx` under the `views` directory:
 
-.views/login.tsx
+.frontend/views/login.tsx
 [source,tsx]
 ----
 export default function LoginView() {
@@ -428,7 +428,7 @@ Navigate to the login view using the menu or by navigating to http://localhost:8
 ====
 To skip the automatic layout for the login view, you need to export a `config` object from the view file. Add the following code to the `login.tsx` file:
 
-./views/login.tsx
+.frontend/views/login.tsx
 [source,tsx]
 ----
 import { ViewConfig } from '@vaadin/hilla-file-router/types.js';