User is able to select the personal access token page via a new user menu (#488)

* Replace button bar with datamanagermenu class

* remove duplicate logout handler logic

* Extend userdetails to provide fullname for Avatar abbreviation within user menu

* Adjust layout extension so navbars are configured correctly

* Address code smell

* Adjust method name for readability

Co-authored-by: Sven F. <[email protected]>

* adjust method call as well

---------

Co-authored-by: Sven F. <[email protected]>

Author: Steffengreiner

project-management/src/main/java/life/qbic/projectmanagement/application/authorization/QbicUserDetails.java

@@ -57,6 +57,10 @@ public String getUsername() {
     return user.id();
   }
 
+  public String fullName() {
+    return user.fullName();
+  }
+
   @Override
   public boolean isAccountNonExpired() {
     return true;

user-interface/frontend/themes/datamanager/components/navbar.css

@@ -1,48 +1,68 @@
-.project-navbar {
-  width: 100%;
+.data-manager-layout::part(navbar) {
   display: inline-flex;
-  align-items: start;
   justify-content: space-between;
 }
 
-.project-navbar-buttonbar {
+.data-manager-layout .data-manager-title {
+  font-size: var(--lumo-font-size-l);
+  margin: var(--lumo-space-m);
+  color: var(--lumo-header-text-color);
+  font-weight: 600;
+  line-height: var(--lumo-line-height-xs);
+  margin-block: 0;
+  padding-inline: var(--lumo-space-m);
+}
+
+.data-manager-menu {
   display: inline-flex;
-  gap: var(--lumo-space-m);
-  align-items: center;
+  justify-content: space-between;
+  column-gap: var(--lumo-space-s);
 }
 
-.project-navbar-drawer-bar {
+/*Increase gap between menu items*/
+.data-manager-menu .menubar::part(container) {
   display: inline-flex;
-  align-items: center;
+  column-gap: var(--lumo-space-s);
 }
 
-.project-navbar-title {
-  font-weight: bold;
-  font-size: var(--lumo-font-size-l);
+.data-manager-menu .user-avatar {
+  cursor: pointer;
 }
 
-.experiment-app-navbar {
-  width: 100%;
+/*Increase gap between menu items*/
+.experiment-main-layout::part(navbar) {
   display: flex;
-  align-items: start;
-  justify-content: space-between;
-  background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
-  padding: var(--lumo-space-s);
+  flex-direction: column;
+  /*Ensure proper padding even if secondary experiment tab based navigation is present*/
+  padding-top: var(--lumo-space-s);
 }
 
-.experiment-navbar {
+/*Increase gap between menu items*/
+.experiment-main-layout .experiment-app-navbar {
+  display: inline-flex;
+  justify-content: space-between;
   width: 100%;
 }
 
-.experiment-navbar-buttonbar {
+.project-main-layout::part(navbar) {
+  display: inline-flex;
+  justify-content: space-between;
+}
+
+.drawer-title-bar {
   display: inline-flex;
-  gap: var(--lumo-space-m);
   align-items: center;
 }
 
+.project-navbar-title {
+  font-weight: bold;
+  font-size: var(--lumo-font-size-l);
+}
+
 .experiment-navbar-drawer-bar {
   display: inline-flex;
   align-items: center;
+  justify-content: space-between;
 }
 
 .experiment-navbar-title {

user-interface/src/main/java/life/qbic/datamanager/views/DataManagerLayout.java

@@ -1,47 +1,22 @@
 package life.qbic.datamanager.views;
 
 import com.vaadin.flow.component.applayout.AppLayout;
-import com.vaadin.flow.component.html.H1;
-import com.vaadin.flow.component.orderedlayout.FlexComponent;
-import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
+import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.router.PageTitle;
 
 /**
- * <b>Main layout of the app</b>
+ * <b>Data Manager Layout</b>
  *
- * <p>Defines the look of the header and the project title
+ * <p>Defines the basic look of the application before a user has logged in
  *
- * @since 1.0.0
  */
+@PageTitle("Data Manager")
 public abstract class DataManagerLayout extends AppLayout {
 
-  private HorizontalLayout headerLayout;
-
   protected DataManagerLayout() {
-    createHeaderContent();
-  }
-
-  private void createHeaderContent() {
-    createHeaderLayout();
-
-    addToNavbar(headerLayout);
-  }
-
-  private void createHeaderLayout() {
-    H1 appName = styleHeaderTitle();
-    headerLayout = new HorizontalLayout(appName);
-
-    styleHeaderLayout();
-  }
-
-  private void styleHeaderLayout() {
-    headerLayout.setDefaultVerticalComponentAlignment(FlexComponent.Alignment.CENTER);
-    headerLayout.setWidth("100%");
-    headerLayout.addClassNames("py-0", "px-m");
-  }
-
-  private H1 styleHeaderTitle() {
-    H1 appName = new H1("Data Manager");
-    appName.addClassNames("text-l", "m-m");
-    return appName;
+    addClassName("data-manager-layout");
+    Span drawerTitle = new Span("Data Manager");
+    drawerTitle.addClassName("data-manager-title");
+    addToNavbar(drawerTitle);
   }
 }

user-interface/src/main/java/life/qbic/datamanager/views/MainHandler.java

@@ -17,7 +17,7 @@
  *
  * @since 1.0.0
  */
-@Route(value = "", layout = MainLayout.class)
+@Route(value = "", layout = UserMainLayout.class)
 @PermitAll
 public class MainPage extends Div implements BeforeEnterObserver {
 

user-interface/src/main/java/life/qbic/datamanager/views/MainHandlerInterface.java

@@ -0,0 +1,28 @@
+package life.qbic.datamanager.views;
+
+import com.vaadin.flow.router.PageTitle;
+import java.util.Objects;
+import life.qbic.datamanager.security.LogoutService;
+import life.qbic.datamanager.views.account.PersonalAccessTokenMain;
+import life.qbic.datamanager.views.general.DataManagerMenu;
+import life.qbic.datamanager.views.projects.overview.ProjectOverviewMain;
+import org.springframework.beans.factory.annotation.Autowired;
+
+/**
+ * <b> The user main layout is the layout holding all views outside of an individual project view,
+ * such as the personal-access-token-management {@link PersonalAccessTokenMain} and listing the all
+ * projects for a user {@link ProjectOverviewMain}</b>
+ *
+ * @since 1.0.0
+ */
+@PageTitle("Data Manager")
+public class UserMainLayout extends DataManagerLayout {
+
+  private final DataManagerMenu dataManagerMenu;
+
+  public UserMainLayout(@Autowired LogoutService logoutService) {
+    Objects.requireNonNull(logoutService);
+    dataManagerMenu = new DataManagerMenu(logoutService);
+    addToNavbar(dataManagerMenu);
+  }
+}

user-interface/src/main/java/life/qbic/datamanager/views/MainLayout.java

@@ -13,7 +13,7 @@
 import java.util.Collection;
 import java.util.List;
 import java.util.Objects;
-import life.qbic.datamanager.views.MainLayout;
+import life.qbic.datamanager.views.UserMainLayout;
 import life.qbic.datamanager.views.account.PersonalAccessTokenComponent.AddTokenEvent;
 import life.qbic.datamanager.views.account.PersonalAccessTokenComponent.DeleteTokenEvent;
 import life.qbic.datamanager.views.account.PersonalAccessTokenComponent.PersonalAccessTokenDTO;
@@ -36,7 +36,7 @@
  * create and delete {@link PersonalAccessToken} via the provided UI elements
  */
 
-@Route(value = "personal-access-token", layout = MainLayout.class)
+@Route(value = "personal-access-token", layout = UserMainLayout.class)
 @SpringComponent
 @UIScope
 @PermitAll

user-interface/src/main/java/life/qbic/datamanager/views/MainPage.java

@@ -0,0 +1,66 @@
+package life.qbic.datamanager.views.general;
+
+import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.avatar.Avatar;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.contextmenu.MenuItem;
+import com.vaadin.flow.component.contextmenu.SubMenu;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.menubar.MenuBar;
+import com.vaadin.flow.component.menubar.MenuBarVariant;
+import life.qbic.datamanager.security.LogoutService;
+import life.qbic.datamanager.views.account.PersonalAccessTokenMain;
+import life.qbic.datamanager.views.projects.overview.ProjectOverviewMain;
+import life.qbic.projectmanagement.application.authorization.QbicUserDetails;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.SecurityContextHolder;
+
+/**
+ * Data Manager Menu
+ * <p>
+ * Menubar within the data manager application with which the user can route to the
+ * {@link ProjectOverviewMain}, logout and access his personal access tokens in the
+ * {@link PersonalAccessTokenMain}
+ */
+public class DataManagerMenu extends Div {
+
+  MenuBar projectMenu = new MenuBar();
+  Avatar userAvatar = new Avatar();
+  private final LogoutService logoutService;
+
+  public DataManagerMenu(@Autowired LogoutService logoutService) {
+    this.logoutService = logoutService;
+    initializeHomeMenuItem();
+    initializeUserSubMenuItems();
+    add(projectMenu);
+    projectMenu.addClassName("menubar");
+    addClassName("data-manager-menu");
+    projectMenu.addThemeVariants(MenuBarVariant.LUMO_TERTIARY_INLINE);
+  }
+
+  private void initializeHomeMenuItem() {
+    projectMenu.addItem(new Button("Home"), event -> routeTo(ProjectOverviewMain.class));
+  }
+
+  private void initializeUserSubMenuItems() {
+    initializeAvatar();
+    MenuItem userMenuItem = projectMenu.addItem(userAvatar);
+    SubMenu userSubMenu = userMenuItem.getSubMenu();
+    userSubMenu.addItem("Personal Access Tokens (PAT)", event -> routeTo(
+        PersonalAccessTokenMain.class));
+    userSubMenu.addItem("Log Out", event -> logoutService.logout());
+  }
+
+  private void initializeAvatar() {
+    Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+    QbicUserDetails details = (QbicUserDetails) authentication.getPrincipal();
+    userAvatar.setName(details.fullName());
+    userAvatar.addClassName("user-avatar");
+
+  }
+
+  private <T extends Component> void routeTo(Class<T> mainComponent) {
+    getUI().orElseThrow().navigate(mainComponent);
+  }
+}