From 470bdc8d9c27785e27b7b4d4386b25d4d6a63161 Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Tue, 5 Nov 2024 12:00:13 +0200
Subject: [PATCH 1/6] Changed font sizes in dashboard toolbar and default state
 id

---
 ui-ngx/src/app/core/services/dashboard-utils.service.ts       | 4 ++--
 .../layout/select-dashboard-breakpoint.component.scss         | 1 +
 .../states/default-state-controller.component.scss            | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
index 235924f98f..b1483f99a5 100644
--- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts
+++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
@@ -95,10 +95,10 @@ export class DashboardUtilsService {
     }
     if (isUndefined(dashboard.configuration.states)) {
       dashboard.configuration.states = {
-        default: this.createDefaultState(dashboard.title, true)
+        Default: this.createDefaultState(dashboard.title, true)
       };
 
-      const mainLayout = dashboard.configuration.states.default.layouts.main;
+      const mainLayout = dashboard.configuration.states.Default.layouts.main;
       for (const id of Object.keys(dashboard.configuration.widgets)) {
         const widget = dashboard.configuration.widgets[id];
         mainLayout.widgets[id] = {
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.scss
index 278afa87ad..2551c36f63 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.scss
@@ -26,6 +26,7 @@
   .mat-mdc-select.select-dashboard-breakpoint {
     .mat-mdc-select-value {
       max-width: 200px;
+      font-size: 14px;
     }
     .mat-mdc-select-arrow {
       width: 24px;
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.scss
index 809d95de9e..e31350381a 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.scss
@@ -22,6 +22,7 @@
   .mat-mdc-select.default-state-controller {
     .mat-mdc-select-value {
       max-width: 200px;
+      font-size: 14px;
     }
     .mat-mdc-select-arrow {
       width: 24px;

From dc7f0110591cc18896e8d2171bca20e492ecaeba Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Fri, 8 Nov 2024 12:10:53 +0200
Subject: [PATCH 2/6] force title case

---
 .../src/app/core/services/dashboard-utils.service.ts  |  4 ++--
 .../states/dashboard-state-dialog.component.ts        | 11 +++++++----
 .../states/default-state-controller.component.html    |  2 +-
 .../manage-dashboard-states-dialog.component.html     |  4 ++--
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
index b1483f99a5..235924f98f 100644
--- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts
+++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
@@ -95,10 +95,10 @@ export class DashboardUtilsService {
     }
     if (isUndefined(dashboard.configuration.states)) {
       dashboard.configuration.states = {
-        Default: this.createDefaultState(dashboard.title, true)
+        default: this.createDefaultState(dashboard.title, true)
       };
 
-      const mainLayout = dashboard.configuration.states.Default.layouts.main;
+      const mainLayout = dashboard.configuration.states.default.layouts.main;
       for (const id of Object.keys(dashboard.configuration.widgets)) {
         const widget = dashboard.configuration.widgets[id];
         mainLayout.widgets[id] = {
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts
index 223dfdbb54..0a4abccf61 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts
@@ -109,10 +109,12 @@ export class DashboardStateDialogComponent extends
 
   private validateDuplicateStateId(): ValidatorFn {
     return (c: UntypedFormControl) => {
-      const newStateId: string = c.value;
+      const newStateId: string = c.value.toLowerCase();
       if (newStateId) {
-        const existing = this.states[newStateId];
-        if (existing && newStateId !== this.prevStateId) {
+        const existing = Object.keys(this.states).some(
+          key => key.toLowerCase() === newStateId
+        );
+        if (existing && newStateId !== this.prevStateId.toLowerCase()) {
           return {
             stateExists: true
           };
@@ -138,7 +140,8 @@ export class DashboardStateDialogComponent extends
   save(): void {
     this.submitted = true;
     this.state = {...this.state, ...this.stateFormGroup.value};
-    this.state.id = this.state.id.trim();
+    this.state.name = this.state.name.toLowerCase().trim();
+    this.state.id = this.state.id.toLowerCase().trim();
     this.dialogRef.close(this.state);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
index 03604d6d94..1e77ae97e6 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
@@ -18,6 +18,6 @@
 <mat-select class="default-state-controller" [class.!hidden]="!displayStateSelection()"
     [(ngModel)]="stateObject[0].id" (ngModelChange)="selectedStateIdChanged()">
   <mat-option *ngFor="let stateKv of states | keyvalue" [value]="stateKv.key">
-    {{getStateName(stateKv.key, stateKv.value)}}
+    {{ getStateName(stateKv.key, stateKv.value)  | titlecase }}
   </mat-option>
 </mat-select>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
index 0119c8e757..bb17e53f8f 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
@@ -80,13 +80,13 @@
                 <ng-container matColumnDef="name">
                   <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 60%"> {{ 'dashboard.state-name' | translate }} </mat-header-cell>
                   <mat-cell *matCellDef="let state">
-                    {{ state.name }}
+                    {{ state.name | titlecase }}
                   </mat-cell>
                 </ng-container>
                 <ng-container matColumnDef="id">
                   <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'dashboard.state-id' | translate }} </mat-header-cell>
                   <mat-cell *matCellDef="let state">
-                    {{ state.id }}
+                    {{ state.id | titlecase }}
                   </mat-cell>
                 </ng-container>
                 <ng-container matColumnDef="root">

From 4937976296b87af9aa75e089104c10da00b0bb4c Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Fri, 8 Nov 2024 12:12:42 +0200
Subject: [PATCH 3/6] refactoring

---
 .../dashboard-page/states/dashboard-state-dialog.component.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts
index 0a4abccf61..c9224c1da0 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts
@@ -111,9 +111,7 @@ export class DashboardStateDialogComponent extends
     return (c: UntypedFormControl) => {
       const newStateId: string = c.value.toLowerCase();
       if (newStateId) {
-        const existing = Object.keys(this.states).some(
-          key => key.toLowerCase() === newStateId
-        );
+        const existing = this.states[newStateId];
         if (existing && newStateId !== this.prevStateId.toLowerCase()) {
           return {
             stateExists: true

From b9d4092208c628e6240e167a1e89efe828a820c6 Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Fri, 8 Nov 2024 12:22:57 +0200
Subject: [PATCH 4/6] Revert "refactoring"

This reverts commit 4937976296b87af9aa75e089104c10da00b0bb4c.
---
 .../dashboard-page/states/dashboard-state-dialog.component.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts
index c9224c1da0..0a4abccf61 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts
@@ -111,7 +111,9 @@ export class DashboardStateDialogComponent extends
     return (c: UntypedFormControl) => {
       const newStateId: string = c.value.toLowerCase();
       if (newStateId) {
-        const existing = this.states[newStateId];
+        const existing = Object.keys(this.states).some(
+          key => key.toLowerCase() === newStateId
+        );
         if (existing && newStateId !== this.prevStateId.toLowerCase()) {
           return {
             stateExists: true

From 508effe16a4eec1d8d1845ba4b41b855960e70e3 Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Fri, 8 Nov 2024 12:22:57 +0200
Subject: [PATCH 5/6] Revert "force title case"

This reverts commit dc7f0110591cc18896e8d2171bca20e492ecaeba.
---
 .../src/app/core/services/dashboard-utils.service.ts  |  4 ++--
 .../states/dashboard-state-dialog.component.ts        | 11 ++++-------
 .../states/default-state-controller.component.html    |  2 +-
 .../manage-dashboard-states-dialog.component.html     |  4 ++--
 4 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
index 235924f98f..b1483f99a5 100644
--- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts
+++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
@@ -95,10 +95,10 @@ export class DashboardUtilsService {
     }
     if (isUndefined(dashboard.configuration.states)) {
       dashboard.configuration.states = {
-        default: this.createDefaultState(dashboard.title, true)
+        Default: this.createDefaultState(dashboard.title, true)
       };
 
-      const mainLayout = dashboard.configuration.states.default.layouts.main;
+      const mainLayout = dashboard.configuration.states.Default.layouts.main;
       for (const id of Object.keys(dashboard.configuration.widgets)) {
         const widget = dashboard.configuration.widgets[id];
         mainLayout.widgets[id] = {
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts
index 0a4abccf61..223dfdbb54 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts
@@ -109,12 +109,10 @@ export class DashboardStateDialogComponent extends
 
   private validateDuplicateStateId(): ValidatorFn {
     return (c: UntypedFormControl) => {
-      const newStateId: string = c.value.toLowerCase();
+      const newStateId: string = c.value;
       if (newStateId) {
-        const existing = Object.keys(this.states).some(
-          key => key.toLowerCase() === newStateId
-        );
-        if (existing && newStateId !== this.prevStateId.toLowerCase()) {
+        const existing = this.states[newStateId];
+        if (existing && newStateId !== this.prevStateId) {
           return {
             stateExists: true
           };
@@ -140,8 +138,7 @@ export class DashboardStateDialogComponent extends
   save(): void {
     this.submitted = true;
     this.state = {...this.state, ...this.stateFormGroup.value};
-    this.state.name = this.state.name.toLowerCase().trim();
-    this.state.id = this.state.id.toLowerCase().trim();
+    this.state.id = this.state.id.trim();
     this.dialogRef.close(this.state);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
index 1e77ae97e6..03604d6d94 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
@@ -18,6 +18,6 @@
 <mat-select class="default-state-controller" [class.!hidden]="!displayStateSelection()"
     [(ngModel)]="stateObject[0].id" (ngModelChange)="selectedStateIdChanged()">
   <mat-option *ngFor="let stateKv of states | keyvalue" [value]="stateKv.key">
-    {{ getStateName(stateKv.key, stateKv.value)  | titlecase }}
+    {{getStateName(stateKv.key, stateKv.value)}}
   </mat-option>
 </mat-select>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
index bb17e53f8f..0119c8e757 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
@@ -80,13 +80,13 @@
                 <ng-container matColumnDef="name">
                   <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 60%"> {{ 'dashboard.state-name' | translate }} </mat-header-cell>
                   <mat-cell *matCellDef="let state">
-                    {{ state.name | titlecase }}
+                    {{ state.name }}
                   </mat-cell>
                 </ng-container>
                 <ng-container matColumnDef="id">
                   <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'dashboard.state-id' | translate }} </mat-header-cell>
                   <mat-cell *matCellDef="let state">
-                    {{ state.id | titlecase }}
+                    {{ state.id }}
                   </mat-cell>
                 </ng-container>
                 <ng-container matColumnDef="root">

From d1ef183f8d801ccaa8d4c3d5d147dacb053c5c2b Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Fri, 8 Nov 2024 12:45:59 +0200
Subject: [PATCH 6/6] title case only for default label

---
 ui-ngx/src/app/core/services/dashboard-utils.service.ts       | 4 ++--
 .../states/default-state-controller.component.ts              | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
index b1483f99a5..235924f98f 100644
--- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts
+++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
@@ -95,10 +95,10 @@ export class DashboardUtilsService {
     }
     if (isUndefined(dashboard.configuration.states)) {
       dashboard.configuration.states = {
-        Default: this.createDefaultState(dashboard.title, true)
+        default: this.createDefaultState(dashboard.title, true)
       };
 
-      const mainLayout = dashboard.configuration.states.Default.layouts.main;
+      const mainLayout = dashboard.configuration.states.default.layouts.main;
       for (const id of Object.keys(dashboard.configuration.widgets)) {
         const widget = dashboard.configuration.widgets[id];
         mainLayout.widgets[id] = {
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.ts
index a59387fc4d..251b8f28ec 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.ts
@@ -187,7 +187,8 @@ export class DefaultStateControllerComponent extends StateControllerComponent im
   }
 
   public getStateName(id: string, state: DashboardState): string {
-    return this.utils.customTranslation(state.name, id);
+    const name = this.utils.customTranslation(state.name, id);
+    return name === this.stateControllerId() ? name.charAt(0).toUpperCase() + name.slice(1) : name;
   }
 
   public getCurrentStateName(): string {