From 4a5dabdad8913c845bd8ce616ae52a61965b390e Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 20 Aug 2024 14:00:15 +0300
Subject: [PATCH] UI: Improve menu translation

---
 ui-ngx/src/app/core/services/menu.models.ts              | 1 +
 .../widget/lib/home-page/quick-link.component.ts         | 9 ++++++---
 .../src/app/modules/home/menu/menu-link.component.html   | 2 +-
 .../src/app/modules/home/menu/menu-toggle.component.html | 2 +-
 .../src/app/shared/components/breadcrumb.component.html  | 4 ++--
 ui-ngx/src/app/shared/components/breadcrumb.component.ts | 2 ++
 ui-ngx/src/app/shared/components/breadcrumb.ts           | 1 +
 7 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/ui-ngx/src/app/core/services/menu.models.ts b/ui-ngx/src/app/core/services/menu.models.ts
index e775dd75bd..7afe08f929 100644
--- a/ui-ngx/src/app/core/services/menu.models.ts
+++ b/ui-ngx/src/app/core/services/menu.models.ts
@@ -30,6 +30,7 @@ export interface MenuSection {
   pages?: Array<MenuSection>;
   opened?: boolean;
   rootOnly?: boolean;
+  customTranslate?: boolean;
 }
 
 export interface MenuReference {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.ts
index efc624f90d..2662605e2a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.ts
@@ -137,7 +137,8 @@ export class QuickLinkComponent extends PageComponent implements OnInit, Control
           this.updateView(modelValue);
         }),
         map(value => value ? (typeof value === 'string' ? value :
-          ((value as any).translated ? value.name : this.customTranslate.transform(value.name))) : ''),
+          ((value as any).translated ? value.name
+            : value.customTranslate ? this.customTranslate.transform(value.name) : this.translate.instant(value.name))) : ''),
         distinctUntilChanged(),
         switchMap(name => this.fetchLinks(name) ),
         share()
@@ -204,7 +205,8 @@ export class QuickLinkComponent extends PageComponent implements OnInit, Control
   }
 
   displayLinkFn = (link?: MenuSection): string | undefined =>
-    link ? ((link as any).translated ? link.name : this.customTranslate.transform(link.fullName || link.name)) : undefined;
+    link ? ((link as any).translated ? link.name : link.customTranslate ? this.customTranslate.transform(link.fullName || link.name)
+      : this.translate.instant(link.fullName || link.name)) : undefined;
 
   fetchLinks(searchText?: string): Observable<Array<MenuSection>> {
     this.searchText = searchText;
@@ -230,7 +232,8 @@ export class QuickLinkComponent extends PageComponent implements OnInit, Control
         map((links) => {
           const result = deepClone(links);
           for (const link of result) {
-            link.name = this.customTranslate.transform(link.fullName || link.name);
+            link.name = link.customTranslate ? this.customTranslate.transform(link.fullName || link.name)
+              : this.translate.instant(link.fullName || link.name);
             (link as any).translated = true;
           }
           return result;
diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.html b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
index c0c098d5b6..fea7165214 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-link.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
@@ -17,5 +17,5 @@
 -->
 <a mat-button routerLinkActive="tb-active" [routerLinkActiveOptions]="{paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}" routerLink="{{section.path}}">
   <tb-icon matButtonIcon *ngIf="section.icon !== null">{{section.icon}}</tb-icon>
-  <span>{{section.name | customTranslate}}</span>
+  <span>{{section.customTranslate ? (section.name | customTranslate) : (section.name | translate)}}</span>
 </a>
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
index 13eb0e2095..3d488e9229 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
@@ -17,7 +17,7 @@
 -->
 <a mat-button class="tb-button-toggle" (click)="toggleSection($event)">
   <tb-icon matButtonIcon *ngIf="section.icon !== null">{{section.icon}}</tb-icon>
-  <span>{{section.name | customTranslate}}</span>
+  <span>{{section.customTranslate ? (section.name | customTranslate) : (section.name | translate)}}</span>
   <span class=" pull-right fa fa-chevron-down tb-toggle-icon"
         [ngClass]="{'tb-toggled' : section.opened}"></span>
 </a>
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.html b/ui-ngx/src/app/shared/components/breadcrumb.component.html
index 3397d74e0d..a80d3b375d 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.component.html
+++ b/ui-ngx/src/app/shared/components/breadcrumb.component.html
@@ -17,7 +17,7 @@
 -->
 <div fxFlex class="tb-breadcrumb" fxLayout="row">
   <h1 fxFlex fxHide.gt-sm *ngIf="lastBreadcrumb$ | async; let breadcrumb">
-    {{ breadcrumb.labelFunction ? breadcrumb.labelFunction() : (breadcrumb.label | customTranslate) }}
+    {{ breadcrumb.labelFunction ? breadcrumb.labelFunction() : (breadcrumb.customTranslate ? (breadcrumb.label | customTranslate) : (breadcrumb.label | translate)) }}
   </h1>
   <span fxHide.lt-md fxLayout="row" *ngFor="let breadcrumb of breadcrumbs$ | async; trackBy: trackByBreadcrumbs; last as isLast;" [ngSwitch]="isLast">
 	    <a *ngSwitchCase="false" [routerLink]="breadcrumb.link" [queryParams]="breadcrumb.queryParams">
@@ -38,5 +38,5 @@
   <tb-icon *ngIf="!breadcrumb.iconUrl">
     {{ breadcrumb.icon }}
   </tb-icon>
-  {{ breadcrumb.labelFunction ? breadcrumb.labelFunction() : (breadcrumb.label | customTranslate) }}
+  {{ breadcrumb.labelFunction ? breadcrumb.labelFunction() : (breadcrumb.customTranslate ? (breadcrumb.label | customTranslate) : (breadcrumb.label | translate)) }}
 </ng-template>
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.ts b/ui-ngx/src/app/shared/components/breadcrumb.component.ts
index 9965560b55..23c9abe337 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.component.ts
+++ b/ui-ngx/src/app/shared/components/breadcrumb.component.ts
@@ -116,6 +116,7 @@ export class BreadcrumbComponent implements OnInit, OnDestroy {
         const section: MenuSection = breadcrumbConfig.menuId ?
           availableMenuSections.find(menu => menu.id === breadcrumbConfig.menuId) : null;
         const label = section?.name || breadcrumbConfig.label || 'home.home';
+        const customTranslate = section?.customTranslate || false;
         if (breadcrumbConfig.labelFunction) {
           labelFunction = () => this.activeComponentValue ?
             breadcrumbConfig.labelFunction(route, this.translate, this.activeComponentValue, lastChild.data) : label;
@@ -125,6 +126,7 @@ export class BreadcrumbComponent implements OnInit, OnDestroy {
         const breadcrumb = {
           id: guid(),
           label,
+          customTranslate,
           labelFunction,
           icon,
           link,
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.ts b/ui-ngx/src/app/shared/components/breadcrumb.ts
index 9c85cc5a19..1f5ad82820 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.ts
+++ b/ui-ngx/src/app/shared/components/breadcrumb.ts
@@ -21,6 +21,7 @@ import { MenuId } from '@core/services/menu.models';
 
 export interface BreadCrumb extends HasUUID{
   label: string;
+  customTranslate: boolean;
   labelFunction?: () => string;
   icon: string;
   link: any[];