From 85969c5a671b07406650638acbf6dff01be75724 Mon Sep 17 00:00:00 2001
From: kontrollanten <6680299+kontrollanten@users.noreply.github.com>
Date: Tue, 14 Jan 2025 11:18:07 +0100
Subject: [PATCH] client: add plugin support for external links (#6784)

* client: add plugin support for external links

* Styling

---------

Co-authored-by: Chocobozzz <me@florianbigard.com>
---
 client/src/app/menu/menu.component.html          | 16 +++++++++++++---
 client/src/app/menu/menu.component.ts            |  3 ++-
 .../shared-main/buttons/button.component.html    |  8 ++++++++
 .../shared-main/buttons/button.component.ts      |  3 ++-
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 181eb1f8a..c8edf3917 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -54,16 +54,26 @@
                 <ul class="ul-unstyle">
                   <li *ngFor="let link of menuSection.links">
                     @if (link.isPrimaryButton === true) {
-                      <my-button class="d-block menu-button" [ngClass]="link.ngClass" theme="primary" [icon]="link.icon" [title]="link.label" [ptRouterLink]="link.path" [ptQueryParams]="link.query">
+                      <my-button class="d-block menu-button" [ngClass]="link.ngClass" theme="primary" [icon]="link.icon" [title]="link.label" [ptRouterLink]="link.path" [ptQueryParams]="link.query" [href]="link.url">
                         @if (!collapsed) {
                           {{ link.label }}
                         }
                       </my-button>
                     } @else {
-                      <a class="menu-link ellipsis" [routerLink]="link.path" [queryParams]="link.query" routerLinkActive="active" [ngClass]="link.ngClass" [title]="link.label">
+                      <ng-template #linkTemplate>
                         <my-global-icon *ngIf="link.icon" [iconName]="link.icon" [ngClass]="link.iconClass" aria-hidden="true"></my-global-icon>
                         <span [ngClass]="{ 'visually-hidden': collapsed }">{{ link.label }}</span>
-                      </a>
+                      </ng-template>
+
+                      @if (link.path) {
+                        <a class="menu-link ellipsis" [routerLink]="link.path" [queryParams]="link.query" routerLinkActive="active" [ngClass]="link.ngClass" [title]="link.label">
+                          <ng-container *ngTemplateOutlet="linkTemplate"></ng-container>
+                        </a>
+                      } @else {
+                        <a class="menu-link ellipsis" [href]="link.url" [ngClass]="link.ngClass" [title]="link.label" target="_blank">
+                          <ng-container *ngTemplateOutlet="linkTemplate"></ng-container>
+                        </a>
+                      }
                     }
                   </li>
                 </ul>
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index f8442f41f..d35dce92d 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -25,7 +25,8 @@ type MenuLink = {
 
   label: string
 
-  path: string
+  path?: string
+  url?: string
   query?: Params
 
   isPrimaryButton?: boolean // default false
diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index 35d99d4b7..bbdc33711 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -6,6 +6,14 @@
   >
     <ng-container *ngTemplateOutlet="content"></ng-container>
   </a>
+} @else if (href) {
+  <a
+    class="action-button"
+    [ngClass]="classes" [ngbTooltip]="tooltip" [attr.title]="title"
+    [href]="href" target="_blank"
+  >
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </a>
 } @else {
   <button type="button" class="action-button" [ngClass]="classes" [disabled]="disabled" [ngbTooltip]="tooltip" [attr.title]="title">
     <ng-container *ngTemplateOutlet="content"></ng-container>
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
index 0dc09d003..9c98c3600 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -44,6 +44,7 @@ export class ButtonComponent implements OnChanges, AfterViewInit {
   @Input() theme: 'primary' | 'secondary' | 'tertiary' = 'secondary'
   @Input() icon: GlobalIconName
 
+  @Input() href: string
   @Input() ptRouterLink: string[] | string
   @Input() ptQueryParams: Params
   @Input() ptQueryParamsHandling: QueryParamsHandling
@@ -73,7 +74,7 @@ export class ButtonComponent implements OnChanges, AfterViewInit {
   }
 
   private buildClasses () {
-    const isButtonLink = !!this.ptRouterLink
+    const isButtonLink = !!this.ptRouterLink || !!this.href
 
     this.classes = {
       'active': this.active,