From 838d6982a834225413c32efb79cafbc555040bd7 Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Mon, 11 Oct 2021 12:26:01 +0300
Subject: [PATCH 1/2] UI: make dashboard title translatable when 'Display
 dashboard title' option enabled

---
 .../components/dashboard-page/dashboard-page.component.html     | 2 +-
 .../home/components/dashboard-page/dashboard-page.component.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
index a6d91d87ae..8f97f5c7e8 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
@@ -148,7 +148,7 @@
       <mat-drawer-content fxLayout="column" fxLayoutAlign="center start">
         <section *ngIf="!widgetEditMode" class="tb-dashboard-title"
                  [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
-          <h3 [fxShow]="!isEdit && displayTitle()">{{ dashboard.title }}</h3>
+          <h3 [fxShow]="!isEdit && displayTitle()">{{ utils.customTranslation(dashboard.title, dashboard.title) }}</h3>
           <mat-form-field [fxShow]="isEdit" class="mat-block">
             <mat-label translate [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">dashboard.title</mat-label>
             <input matInput class="tb-dashboard-title"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
index 143b1743c7..acef5ea4b9 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
@@ -303,7 +303,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
               private breakpointObserver: BreakpointObserver,
               private route: ActivatedRoute,
               private router: Router,
-              private utils: UtilsService,
+              public utils: UtilsService,
               private dashboardUtils: DashboardUtilsService,
               private authService: AuthService,
               private entityService: EntityService,

From 62e17ffd48ee3ef75d844174312f2c708dea5fbc Mon Sep 17 00:00:00 2001
From: Ekaterina Chantsova <chantsova.ekaterina@gmail.com>
Date: Thu, 21 Oct 2021 13:10:31 +0300
Subject: [PATCH 2/2] Save translated title as variable

---
 .../dashboard-page/dashboard-page.component.html      |  2 +-
 .../dashboard-page/dashboard-page.component.ts        | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
index 8f97f5c7e8..27c436c802 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
@@ -148,7 +148,7 @@
       <mat-drawer-content fxLayout="column" fxLayoutAlign="center start">
         <section *ngIf="!widgetEditMode" class="tb-dashboard-title"
                  [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
-          <h3 [fxShow]="!isEdit && displayTitle()">{{ utils.customTranslation(dashboard.title, dashboard.title) }}</h3>
+          <h3 [fxShow]="!isEdit && displayTitle()">{{ translatedDashboardTitle }}</h3>
           <mat-form-field [fxShow]="isEdit" class="mat-block">
             <mat-label translate [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">dashboard.title</mat-label>
             <input matInput class="tb-dashboard-title"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
index acef5ea4b9..779545c3b8 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
@@ -209,6 +209,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
 
   thingsboardVersion: string = env.tbVersion;
 
+  translatedDashboardTitle: string;
+
   currentDashboardId: string;
   currentCustomerId: string;
   currentDashboardScope: DashboardPageScope;
@@ -303,7 +305,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
               private breakpointObserver: BreakpointObserver,
               private route: ActivatedRoute,
               private router: Router,
-              public utils: UtilsService,
+              private utils: UtilsService,
               private dashboardUtils: DashboardUtilsService,
               private authService: AuthService,
               private entityService: EntityService,
@@ -375,6 +377,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     this.reset();
 
     this.dashboard = data.dashboard;
+    this.translatedDashboardTitle = this.getTranslatedDashboardTitle();
     if (!this.embedded && this.dashboard.id) {
       this.setStateDashboardId = true;
     }
@@ -424,6 +427,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
 
   private reset() {
     this.dashboard = null;
+    this.translatedDashboardTitle = null;
     this.dashboardConfiguration = null;
     this.dashboardLogoCache = undefined;
     this.prevDashboard = null;
@@ -520,6 +524,10 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     }
   }
 
+  private getTranslatedDashboardTitle(): string {
+    return this.utils.customTranslation(this.dashboard.title, this.dashboard.title);
+  }
+
   public displayExport(): boolean {
     if (this.dashboard.configuration.settings &&
       isDefined(this.dashboard.configuration.settings.showDashboardExport)) {
@@ -817,6 +825,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   }
 
   public saveDashboard() {
+    this.translatedDashboardTitle = this.getTranslatedDashboardTitle();
     this.setEditMode(false, false);
     this.notifyDashboardUpdated();
   }