fix: open application in the new tab

* On a ctrl (command) + left mouse click is now opened the application in the new tab and routing is stopped in the parent tab.
* This is now implemented also for side menu, tables and inner page menu in user-profile (authentication and settings).

Author: HejdaJakub

apps/admin-gui/src/app/shared/side-menu/side-menu-item.service.ts

@@ -133,7 +133,7 @@ export class SideMenuItemService {
         {
           label: 'MENU_ITEMS.USER.SETTINGS',
           url: [`/myProfile/settings`],
-          activatedRegex: `^/myProfile/settings$`,
+          activatedRegex: `^/myProfile/settings$`, // this route is never activated (expandable submenu)
           children: [
             {
               label: 'MENU_ITEMS.USER.PASSWORD_RESET',
@@ -609,7 +609,7 @@ export class SideMenuItemService {
       links.push({
         label: 'MENU_ITEMS.VO.SETTINGS',
         url: [`/organizations/${vo.id}/settings`],
-        activatedRegex: '/organizations/\\d+/settings$',
+        activatedRegex: '/organizations/\\d+/settings$', // this route is never activated (expandable submenu)
         children: children,
         showChildren: 'settings',
       });
@@ -900,7 +900,7 @@ export class SideMenuItemService {
       links.push({
         label: 'MENU_ITEMS.FACILITY.SETTINGS',
         url: ['/facilities', facility.id.toString(), 'settings'],
-        activatedRegex: '/facilities/\\d+/settings$',
+        activatedRegex: '/facilities/\\d+/settings$', // this route is never activated (expandable submenu)
         children: children,
         showChildren: 'settings',
       });
@@ -1062,7 +1062,7 @@ export class SideMenuItemService {
       links.push({
         label: 'MENU_ITEMS.GROUP.SETTINGS',
         url: [`/organizations/${group.voId}/groups/${group.id}/settings`],
-        activatedRegex: '/organizations/\\d+/groups/\\d+/settings$',
+        activatedRegex: '/organizations/\\d+/groups/\\d+/settings$', // this route is never activated (expandable submenu)
         children: settingsChildrenLinks,
         showChildren: 'settings',
       });
@@ -1144,7 +1144,7 @@ export class SideMenuItemService {
       links.push({
         label: 'MENU_ITEMS.RESOURCE.SETTINGS',
         url: [baseUrl, `settings`],
-        activatedRegex: `${regexStart}/\\d+/resources/\\d+/settings$`,
+        activatedRegex: `${regexStart}/\\d+/resources/\\d+/settings$`, // this route is never activated (expandable submenu)
         children: children,
         showChildren: `settings`,
       });

apps/admin-gui/src/app/shared/side-menu/side-menu-item/side-menu-item.component.html

@@ -1,14 +1,17 @@
 <div class="w-100">
   <div
-    [routerLink]="item.baseLink"
-    [perunWebAppsMiddleClickRouterLink]="item.baseLink"
     [ngStyle]="{'background': item.backgroundColorCss, 'border-top': !root ? dividerStyle: ''}"
     [matRippleColor]="rippleColor"
     [class.header-activated]="(currentUrl | activeSideMenuItem: item.baseColorClassRegex) && root"
     class="side-menu-item"
     matRipple>
     <div class="{{item.labelClass}}" matRipple>
-      <a [ngStyle]="{'color': item.textColorCss}" class="side-menu-item-label clickable">
+      <a
+        class="side-menu-item-label clickable"
+        [ngStyle]="{'color': item.textColorCss}"
+        (auxclick)="$event.preventDefault()"
+        [routerLink]="item.baseLink"
+        [perunWebAppsMiddleClickRouterLink]="item.baseLink">
         <mat-icon
           [ngStyle]="{'color': 'currentColor'}"
           [svgIcon]="item.icon"
@@ -26,8 +29,9 @@
       @rollInOut>
       <div *ngFor="let link of item.links">
         <a
-          (click)="linkClicked(link)"
-          [perunWebAppsMiddleClickRouterLink]="link.url"
+          (click)="navigateOrExpandSideMenu(link, $event)"
+          (auxclick)="$event.preventDefault()"
+          [perunWebAppsMiddleClickRouterLink]="link.children ? null : link.url"
           [ngClass]="(currentUrl | activeSideMenuItem: link.activatedRegex) && item.activatedClass"
           [ngStyle]="{'color': linkTextColor}"
           class="clickable d-flex"
@@ -42,6 +46,7 @@
         <div *ngIf="expandSections.get(link.showChildren)" @rollInOut class="overflow-hidden">
           <a
             *ngFor="let child of link?.children"
+            (auxclick)="$event.preventDefault()"
             [routerLink]="child.url"
             [perunWebAppsMiddleClickRouterLink]="child.url"
             [matRippleColor]="rippleColor"

apps/admin-gui/src/app/shared/side-menu/side-menu-item/side-menu-item.component.ts

@@ -43,12 +43,18 @@ export class SideMenuItemComponent {
     });
   }
 
-  linkClicked(link: SideMenuLink): void {
-    // Navigate or expand children based on item
-    if (!link.children) {
-      void this.router.navigate(link.url);
-    } else {
-      this.expandedTilesStore.setItem(link.showChildren);
+  /**
+   * Navigate or expand children based on item if ctrl (metaKey) is not pressed
+   * @param link SideMenuLink with url and list of children
+   * @param event mouse event used for detect ctrlKey (support for Windows/Linux keyboards) or metaKey (support for Mac keyboards)
+   */
+  navigateOrExpandSideMenu(link: SideMenuLink, event: MouseEvent): void {
+    if (!event.ctrlKey && !event.metaKey) {
+      if (!link.children) {
+        void this.router.navigate(link.url);
+      } else {
+        this.expandedTilesStore.setItem(link.showChildren);
+      }
     }
   }
 }

apps/user-profile/src/app/components/side-menu/side-menu.component.html

@@ -1,18 +1,21 @@
 <mat-nav-list class="pt-0">
-  <mat-list-item
+  <a
+    mat-list-item
     (click)="item.external ? goToURL(item.link):shouldHideMenu()"
     *ngFor="let item of items"
     [class.activated]="isActive(item.activatedRegex)"
     mat-ripple
     [matRippleColor]="'rgba(255, 255, 255, 0.1)'"
     class="side-menu-item-height"
     routerLink="{{item.external ? null: item.link}}"
+    [perunWebAppsMiddleClickRouterLink]="[item.external ? null: item.link]"
+    (auxclick)="$event.preventDefault()"
     queryParamsHandling="merge">
     <div [ngStyle]="{'color': textColor}" class="d-flex flex-row">
       <mat-icon>{{item.icon}}</mat-icon>
       <span class="ms-4">
         {{item.external ? (item | localisedText: lang:'label') : item.label | customTranslate: lang | translate}}
       </span>
     </div>
-  </mat-list-item>
+  </a>
 </mat-nav-list>

apps/user-profile/src/app/pages/authentication-page/authentication-overview/authentication-overview.component.html

@@ -1,15 +1,18 @@
 <div [hidden]="loading">
-  <mat-list>
-    <mat-list-item
+  <mat-nav-list>
+    <a
+      mat-list-item
       *ngFor="let item of items"
       matRipple
       [routerLink]="item.url"
+      [perunWebAppsMiddleClickRouterLink]="[item.url]"
+      (auxclick)="$event.preventDefault()"
       queryParamsHandling="merge">
       <div class="d-flex flex-row">
         <mat-icon>{{item.icon}}</mat-icon>
         <p class="ms-2 mt-auto mb-auto">{{item.label | customTranslate | translate}}</p>
       </div>
-    </mat-list-item>
-  </mat-list>
+    </a>
+  </mat-nav-list>
 </div>
 <mat-spinner class="ms-auto me-auto" *ngIf="loading"></mat-spinner>

apps/user-profile/src/app/pages/authentication-page/authentication-overview/authentication-overview.component.scss

@@ -3,7 +3,7 @@
   color: grey;
 }
 
-mat-list-item:hover {
+mat-nav-list a:hover {
   background: var(--side-hover) !important;
   color: var(--side-text-hover) !important;
   cursor: pointer;

apps/user-profile/src/app/pages/settings-page/settings-overview/settings-overview.component.html

@@ -1,12 +1,15 @@
-<mat-list>
-  <mat-list-item
+<mat-nav-list>
+  <a
+    mat-list-item
     *ngFor="let item of items"
     matRipple
     [routerLink]="item.url"
+    [perunWebAppsMiddleClickRouterLink]="[item.url]"
+    (auxclick)="$event.preventDefault()"
     queryParamsHandling="merge">
     <div class="d-flex flex-row">
       <mat-icon>{{item.icon}}</mat-icon>
       <p class="ms-2 mt-auto mb-auto">{{item.label | customTranslate | translate}}</p>
     </div>
-  </mat-list-item>
-</mat-list>
+  </a>
+</mat-nav-list>

apps/user-profile/src/app/pages/settings-page/settings-overview/settings-overview.component.scss

@@ -1,4 +1,4 @@
-mat-list-item:hover {
+mat-nav-list a:hover {
   background: var(--side-hover) !important;
   color: var(--side-text-hover) !important;
   cursor: pointer;

libs/perun/directives/src/lib/middle-click-router-link.ts

@@ -1,20 +1,43 @@
-import { Directive, HostListener, Input } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
 
 @Directive({
   selector: '[perunWebAppsMiddleClickRouterLink]',
 })
 export class MiddleClickRouterLinkDirective {
   @Input() perunWebAppsMiddleClickRouterLink: string[];
 
+  constructor(private ref: ElementRef, private renderer: Renderer2) {
+    const htmlElement: HTMLElement = this.ref.nativeElement as HTMLElement;
+    this.renderer.listen(htmlElement, 'click', (event: MouseEvent) => {
+      // ctrl (command) + left mouse click will stop routing and open router link in the new tab
+      if (
+        // ctrlKey = support for Windows/Linux keyboards
+        // metaKey = support for Mac keyboards
+        (event.ctrlKey || event.metaKey) &&
+        event.button === 0 &&
+        this.perunWebAppsMiddleClickRouterLink
+      ) {
+        if (htmlElement.tagName.toLowerCase() === 'tr') {
+          // handle correct behavior for table 'tr' tag (with this directive)
+          event.stopImmediatePropagation();
+        } else {
+          // handle correct behavior primarily for 'a' tag in our apps (with this directive)
+          event.preventDefault();
+        }
+        window.open(this.getUrlWithParams());
+      }
+    });
+  }
+
   @HostListener('mouseup', ['$event']) onClick(event: MouseEvent): void {
-    if (
-      event.button === 1 &&
-      this.perunWebAppsMiddleClickRouterLink !== null &&
-      this.perunWebAppsMiddleClickRouterLink !== undefined
-    ) {
-      const fullUrl = this.perunWebAppsMiddleClickRouterLink.join('/');
-      const queryParams = location.search;
-      window.open(fullUrl + queryParams);
+    if (event.button === 1 && this.perunWebAppsMiddleClickRouterLink) {
+      window.open(this.getUrlWithParams());
     }
   }
+
+  private getUrlWithParams(): string {
+    const fullUrl = this.perunWebAppsMiddleClickRouterLink.join('/');
+    const queryParams = location.search;
+    return fullUrl + queryParams;
+  }
 }