From dca8f9e5e159d3c39d2df5c019a8a6cad5cad6bd Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 14 Feb 2024 17:41:22 +0200
Subject: [PATCH] UI: Add notification subject and message limits characters

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

diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html
index 9ed015aa95..e39d7f27c8 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html
@@ -97,6 +97,11 @@
           <mat-error *ngIf="templateConfigurationForm.get('MOBILE_APP.subject').hasError('required')">
             {{ 'notification.subject-required' | translate }}
           </mat-error>
+          <mat-error *ngIf="templateConfigurationForm.get('MOBILE_APP.subject').hasError('maxlength')">
+            {{ 'notification.subject-max-length' | translate :
+            {length: templateConfigurationForm.get('MOBILE_APP.subject').getError('maxlength').requiredLength}
+            }}
+          </mat-error>
         </mat-form-field>
         <mat-form-field class="mat-block">
           <mat-label translate>notification.message</mat-label>
@@ -109,6 +114,11 @@
           <mat-error *ngIf="templateConfigurationForm.get('MOBILE_APP.body').hasError('required')">
             {{ 'notification.message-required' | translate }}
           </mat-error>
+          <mat-error *ngIf="templateConfigurationForm.get('MOBILE_APP.body').hasError('maxlength')">
+            {{ 'notification.message-max-length' | translate :
+            {length: templateConfigurationForm.get('MOBILE_APP.body').getError('maxlength').requiredLength}
+            }}
+          </mat-error>
         </mat-form-field>
         <div formGroupName="additionalConfig">
           <tb-notification-action-button-configuration
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts
index 6941215d9f..1f54784d64 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts
@@ -210,8 +210,8 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
         break;
       case NotificationDeliveryMethod.MOBILE_APP:
         deliveryMethodForm = this.fb.group({
-          subject: ['', Validators.required],
-          body: ['', Validators.required],
+          subject: ['', [Validators.required, Validators.maxLength(50)]],
+          body: ['', [Validators.required, Validators.maxLength(150)]],
           additionalConfig: this.fb.group({
             onClick: [null]
           })
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 8a5678e2ae..da8972c39e 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3420,6 +3420,7 @@
         "stop-escalation-alarm-status-become": "Stop the escalation on the alarm status become:",
         "subject": "Subject",
         "subject-required": "Subject is required",
+        "subject-max-length": "Subject should be less than or equal to {{ length }} characters",
         "template": "Template",
         "template-name": "Template name",
         "template-required": "Template is required",