fix(admin-ui): Correctly display widget titles in dropdown

Fixes #2334

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) {

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>

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');
     }