From 050b91801972d982eacf1d82471d1c8b692763ae Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 12 Apr 2023 17:48:43 +0300
Subject: [PATCH 1/4] UI: Add notification sms template max length limit

---
 .../sent/sent-notification-dialog.component.html           | 7 ++++++-
 .../pages/notification/template/template-configuration.ts  | 2 +-
 .../template/template-notification-dialog.component.html   | 7 ++++++-
 ui-ngx/src/assets/locale/locale.constant-en_US.json        | 1 +
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
index 3aa7c98069..1ebd5a098e 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
@@ -246,7 +246,7 @@
               trigger-text="{{ 'notification.see-documentation' | translate }}"></span>
       </div>
       <form [formGroup]="smsTemplateForm">
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" subscriptSizing="dynamic">
           <mat-label translate>notification.message</mat-label>
           <textarea matInput
                     cdkTextareaAutosize
@@ -257,6 +257,11 @@
           <mat-error *ngIf="smsTemplateForm.get('body').hasError('required')">
             {{ 'notification.message-required' | translate }}
           </mat-error>
+          <mat-error *ngIf="smsTemplateForm.get('body').hasError('maxlength')">
+            {{ 'notification.message-max-length' | translate :
+            {length: smsTemplateForm.get('body').getError('maxlength').requiredLength}
+            }}
+          </mat-error>
         </mat-form-field>
       </form>
     </mat-step>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts b/ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts
index 2eaf1807a0..79612a8592 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts
@@ -156,7 +156,7 @@ export abstract class TemplateConfiguration<T, R = any> extends DialogComponent<
     });
 
     this.smsTemplateForm = this.fb.group({
-      body: ['', Validators.required]
+      body: ['', [Validators.required, Validators.maxLength(320)]]
     });
 
     this.slackTemplateForm = this.fb.group({
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
index a7576f7265..414bf11732 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
@@ -203,7 +203,7 @@
               trigger-text="{{ 'notification.see-documentation' | translate }}"></span>
       </div>
       <form [formGroup]="smsTemplateForm">
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" subscriptSizing="dynamic">
           <mat-label translate>notification.message</mat-label>
           <textarea matInput
                     cdkTextareaAutosize
@@ -214,6 +214,11 @@
           <mat-error *ngIf="smsTemplateForm.get('body').hasError('required')">
             {{ 'notification.message-required' | translate }}
           </mat-error>
+          <mat-error *ngIf="smsTemplateForm.get('body').hasError('maxlength')">
+            {{ 'notification.message-max-length' | translate :
+            {length: smsTemplateForm.get('body').getError('maxlength').requiredLength}
+            }}
+          </mat-error>
         </mat-form-field>
       </form>
     </mat-step>
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 75c373250e..20fe768b65 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -2840,6 +2840,7 @@
         "mark-as-read": "Mark as read",
         "message": "Message",
         "message-required": "Message is required",
+        "message-max-length": "Message should be less than or equal to {{ length }} characters",
         "name": "Name",
         "name-required": "Name is required",
         "new-notification": "New notification",

From d7c0acb4f485b785867f6318d26367fb0b6c229e Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 13 Apr 2023 12:41:06 +0300
Subject: [PATCH 2/4] UI: Added in notification email template highlight for
 message field is required

---
 .../sent-notification-dialog.component.html     | 16 ++++++++++------
 .../sent-notification-dialog.component.scss     | 16 ++++++++++++++++
 .../template-notification-dialog.component.html | 12 +++++++++---
 .../template-notification-dialog.component.scss | 17 +++++++++++++++++
 .../template-notification-dialog.component.ts   |  2 +-
 5 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
index 1ebd5a098e..7fbde30dce 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
@@ -59,10 +59,8 @@
           <ng-container *ngTemplateOutlet="recipientsList"></ng-container>
           <section formGroupName="template">
             <section formGroupName="configuration">
-              <label class="tb-title tb-required"
-                     [ngClass]="{'tb-error': notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')}">
-                {{ "notification.delivery-methods" | translate }}
-              </label>
+              <label [ngClass]="{'tb-error': notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"
+                     class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
               <div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
               <section formGroupName="deliveryMethodsTemplates" fxLayout="row wrap" style="margin-bottom: 12px;">
                 <section *ngFor="let deliveryMethods of notificationDeliveryMethods; even as isEven" class="delivery-method-container"
@@ -209,7 +207,7 @@
     </mat-step>
     <mat-step *ngIf="!notificationRequestForm.get('useTemplate').value &&
                      notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.EMAIL.enabled').value"
-              [stepControl]="emailTemplateForm">
+              [stepControl]="emailTemplateForm"  #emailStep="matStep">
       <ng-template matStepLabel>{{ 'notification.delivery-method.email' | translate }}</ng-template>
       <ng-template matStepContent>
         <div class="tb-hint-available-params mat-body-2">
@@ -228,8 +226,14 @@
               {{ 'notification.subject-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <mat-label class="tb-title" translate>notification.message</mat-label>
+          <mat-label class="tb-title tb-required"
+                     [ngClass]="{'tb-error': (emailStep.interacted || emailTemplateForm.get('body').dirty) && emailTemplateForm.get('body').hasError('required')}"
+                     translate>notification.message</mat-label>
           <editor [init]="tinyMceOptions" formControlName="body"></editor>
+          <mat-error class="tb-mat-error"
+                     *ngIf="(emailStep.interacted || emailTemplateForm.get('body').dirty) && emailTemplateForm.get('body').hasError('required')">
+            {{ 'notification.message-required' | translate }}
+          </mat-error>
         </form>
       </ng-template>
     </mat-step>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
index 0bf2baebc2..55542b3905 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
@@ -27,6 +27,22 @@
   .tb-title {
     font-size: 16px;
     line-height: 24px;
+    &.tb-required::after {
+      font-size: initial;
+      content: "*";
+    }
+
+    &.tb-error {
+      color: var(--mdc-theme-error, #f44336);
+
+      &.tb-required::after {
+        color: var(--mdc-theme-error, #f44336);
+      }
+    }
+  }
+
+  .tb-mat-error {
+    font-size: 13px;
   }
 
   .tb-hint {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
index 414bf11732..6662c38fd1 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
@@ -167,7 +167,7 @@
       </form>
     </mat-step>
     <mat-step *ngIf="templateNotificationForm.get('configuration.deliveryMethodsTemplates.EMAIL.enabled').value"
-      [stepControl]="emailTemplateForm">
+      [stepControl]="emailTemplateForm" #emailStep="matStep">
       <ng-template matStepLabel>{{ 'notification.delivery-method.email' | translate }}</ng-template>
       <ng-template matStepContent>
         <div class="tb-hint-available-params mat-body-2">
@@ -186,8 +186,14 @@
               {{ 'notification.subject-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <mat-label class="tb-title" translate>notification.message</mat-label>
-          <editor [init]="tinyMceOptions" formControlName="body"></editor>
+          <mat-label class="tb-title tb-required"
+                     [ngClass]="{'tb-error': (emailStep.interacted || emailTemplateForm.get('body').dirty) && emailTemplateForm.get('body').hasError('required')}"
+                     translate>notification.message</mat-label>
+          <editor [init]="tinyMceOptions" matInput formControlName="body"></editor>
+          <mat-error class="tb-mat-error"
+            *ngIf="(emailStep.interacted || emailTemplateForm.get('body').dirty) && emailTemplateForm.get('body').hasError('required')">
+            {{ 'notification.message-required' | translate }}
+          </mat-error>
         </form>
       </ng-template>
     </mat-step>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
index 1fc1b427d0..9c52098ac9 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
@@ -27,6 +27,23 @@
   .tb-title {
     font-size: 16px;
     line-height: 24px;
+
+    &.tb-required::after {
+      font-size: initial;
+      content: "*";
+    }
+
+    &.tb-error {
+      color: var(--mdc-theme-error, #f44336);
+
+      &.tb-required::after {
+        color: var(--mdc-theme-error, #f44336);
+      }
+    }
+  }
+
+  .tb-mat-error {
+    font-size: 13px;
   }
 
   .tb-hint {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.ts
index 5fb10e7374..b4ba480732 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.ts
@@ -138,7 +138,7 @@ export class TemplateNotificationDialogComponent
   }
 
   nextStepLabel(): string {
-    if (this.selectedIndex >= this.maxStepperIndex) {
+    if (this.selectedIndex >= this.maxStepperIndex && this.selectedIndex !== 0) {
       return (this.data.isAdd || this.data.isCopy) ? 'action.add' : 'action.save';
     }
     return 'action.next';

From 96ec9a133ac7e111d0d4a51a1809b379ffa13e2d Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 13 Apr 2023 16:47:55 +0300
Subject: [PATCH 3/4] UI: Fixed notification action open dashboard with state
 params

---
 .../components/notification/notification.component.ts      | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.ts b/ui-ngx/src/app/shared/components/notification/notification.component.ts
index e002cdb395..7ecd91f6d0 100644
--- a/ui-ngx/src/app/shared/components/notification/notification.component.ts
+++ b/ui-ngx/src/app/shared/components/notification/notification.component.ts
@@ -97,7 +97,8 @@ export class NotificationComponent implements OnInit {
       let link: string;
       if (this.notification.additionalConfig.actionButtonConfig.linkType === ActionButtonLinkType.DASHBOARD) {
         let state = null;
-        if (this.notification.additionalConfig.actionButtonConfig.dashboardState) {
+        if (this.notification.additionalConfig.actionButtonConfig.dashboardState ||
+          this.notification.additionalConfig.actionButtonConfig.setEntityIdInState) {
           const stateObject: StateObject = {};
           if (this.notification.additionalConfig.actionButtonConfig.setEntityIdInState) {
             stateObject.params = {
@@ -106,7 +107,9 @@ export class NotificationComponent implements OnInit {
           } else {
             stateObject.params = {};
           }
-          stateObject.id = this.notification.additionalConfig.actionButtonConfig.dashboardState;
+          if (this.notification.additionalConfig.actionButtonConfig.dashboardState) {
+            stateObject.id = this.notification.additionalConfig.actionButtonConfig.dashboardState;
+          }
           state = objToBase64URI([ stateObject ]);
         }
         link = `/dashboards/${this.notification.additionalConfig.actionButtonConfig.dashboardId}`;

From f905533df90d227a3443fe5127a94b44c2059e36 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 13 Apr 2023 17:40:57 +0300
Subject: [PATCH 4/4] UI: Fixed template notification view

---
 .../template/template-notification-dialog.component.html    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
index 6662c38fd1..6af12c1f32 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
@@ -54,10 +54,8 @@
           </mat-select>
         </mat-form-field>
         <section formGroupName="configuration">
-          <label class="tb-title tb-required"
-                 [ngClass]="{'tb-error': templateNotificationForm.get('configuration.deliveryMethodsTemplates').hasError('atLeastOne')}">
-            {{ "notification.delivery-methods" | translate }}
-          </label>
+          <label [ngClass]="{'tb-error': templateNotificationForm.get('configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"
+            class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
           <div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
           <section formGroupName="deliveryMethodsTemplates" fxLayout="row warap">
             <section *ngFor="let deliveryMethods of notificationDeliveryMethods; even as isEven" class="delivery-method-container"