From 59a1d5d563b070cfeb1981d284c0654d19fc397d Mon Sep 17 00:00:00 2001
From: Michael Bromley <michael@michaelbromley.co.uk>
Date: Thu, 10 Aug 2023 11:04:42 +0200
Subject: [PATCH] fix(admin-ui): Correctly display widget titles in dropdown

Fixes #2334
---
 .../dashboard-widget/dashboard-widget.service.ts | 16 ++++++++++------
 .../dashboard/dashboard.component.html           |  6 +++---
 .../components/dashboard/dashboard.component.ts  |  8 ++++----
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/admin-ui/src/lib/core/src/providers/dashboard-widget/dashboard-widget.service.ts b/packages/admin-ui/src/lib/core/src/providers/dashboard-widget/dashboard-widget.service.ts
index 1e49f21b65..b9ae540b33 100644
--- a/packages/admin-ui/src/lib/core/src/providers/dashboard-widget/dashboard-widget.service.ts
+++ b/packages/admin-ui/src/lib/core/src/providers/dashboard-widget/dashboard-widget.service.ts
@@ -28,15 +28,19 @@ export class DashboardWidgetService {
         this.registry.set(id, config);
     }
 
-    getAvailableIds(currentUserPermissions: Permission[]): string[] {
-        const hasAllPermissions = (requiredPerms: string[], userPerms: string[]): boolean => requiredPerms.every(p => userPerms.includes(p));
+    getAvailableWidgets(
+        currentUserPermissions: Permission[],
+    ): Array<{ id: string; config: DashboardWidgetConfig }> {
+        const hasAllPermissions = (requiredPerms: string[], userPerms: string[]): boolean =>
+            requiredPerms.every(p => userPerms.includes(p));
 
         return [...this.registry.entries()]
-            .filter(([id, config]) => (
+            .filter(
+                ([id, config]) =>
                     !config.requiresPermissions ||
-                    hasAllPermissions(config.requiresPermissions, currentUserPermissions)
-                ))
-            .map(([id]) => id);
+                    hasAllPermissions(config.requiresPermissions, currentUserPermissions),
+            )
+            .map(([id, config]) => ({ id, config }));
     }
 
     getWidgetById(id: string) {
diff --git a/packages/admin-ui/src/lib/dashboard/src/components/dashboard/dashboard.component.html b/packages/admin-ui/src/lib/dashboard/src/components/dashboard/dashboard.component.html
index 5a0e19da6f..fa9a00d873 100644
--- a/packages/admin-ui/src/lib/dashboard/src/components/dashboard/dashboard.component.html
+++ b/packages/admin-ui/src/lib/dashboard/src/components/dashboard/dashboard.component.html
@@ -9,10 +9,10 @@
             <vdr-dropdown-menu vdrPosition="bottom-right">
                 <button
                     vdrDropdownItem
-                    *ngFor="let id of availableWidgetIds$ | async"
-                    (click)="addWidget(id)"
+                    *ngFor="let widget of availableWidgets$ | async"
+                    (click)="addWidget(widget.id)"
                 >
-                    {{ id }}
+                    {{ (widget.config.title ?? widget.id) | translate }}
                 </button>
             </vdr-dropdown-menu>
         </vdr-dropdown>
diff --git a/packages/admin-ui/src/lib/dashboard/src/components/dashboard/dashboard.component.ts b/packages/admin-ui/src/lib/dashboard/src/components/dashboard/dashboard.component.ts
index 2064c02cb1..ed5b7c80c5 100644
--- a/packages/admin-ui/src/lib/dashboard/src/components/dashboard/dashboard.component.ts
+++ b/packages/admin-ui/src/lib/dashboard/src/components/dashboard/dashboard.component.ts
@@ -22,7 +22,7 @@ import { map, tap } from 'rxjs/operators';
 })
 export class DashboardComponent implements OnInit {
     widgetLayout: WidgetLayout | undefined;
-    availableWidgetIds$: Observable<string[]>;
+    availableWidgets$: Observable<Array<{ id: string; config: DashboardWidgetConfig }>>;
     private readonly deletionMarker = '__delete__';
     private setTitle = titleSetter();
     constructor(
@@ -33,10 +33,10 @@ export class DashboardComponent implements OnInit {
     ) {}
 
     ngOnInit() {
-        this.availableWidgetIds$ = this.dataService.client.userStatus().stream$.pipe(
+        this.availableWidgets$ = this.dataService.client.userStatus().stream$.pipe(
             map(({ userStatus }) => userStatus.permissions),
-            map(permissions => this.dashboardWidgetService.getAvailableIds(permissions)),
-            tap(ids => (this.widgetLayout = this.initLayout(ids))),
+            map(permissions => this.dashboardWidgetService.getAvailableWidgets(permissions)),
+            tap(widgets => (this.widgetLayout = this.initLayout(widgets.map(w => w.id)))),
         );
         this.setTitle('breadcrumb.dashboard');
     }