From 5edd35dc92312cf3dac141c0a8c6a98a6066cdba Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 4 Jun 2025 16:39:38 +0300
Subject: [PATCH] UI: Add missing validation for notification length message.

---
 ...ion-action-button-configuration.component.html |  6 ++++++
 ...ation-action-button-configuration.component.ts |  2 +-
 ...fication-template-configuration.component.html | 15 +++++++++++++++
 ...tification-template-configuration.component.ts |  6 +++---
 .../src/assets/locale/locale.constant-en_US.json  |  1 +
 5 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.html
index bb15320c4d..3eb330bb50 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.html
@@ -62,6 +62,12 @@
             *ngIf="actionButtonConfigForm.get('link').hasError('required')">
             {{ 'notification.link-required' | translate }}
           </mat-error>
+          <mat-error
+            *ngIf="actionButtonConfigForm.get('link').hasError('maxlength')">
+            {{ 'notification.link-max-length' | translate :
+                {length: actionButtonConfigForm.get('link').getError('maxlength').requiredLength}
+            }}
+          </mat-error>
         </mat-form-field>
         <ng-template #dashboardSelector>
           <tb-dashboard-autocomplete
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.ts b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.ts
index 49885fb767..983c0fe4f3 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.ts
@@ -84,7 +84,7 @@ export class NotificationActionButtonConfigurationComponent implements ControlVa
       enabled: [false],
       text: [{value: '', disabled: true}, [Validators.required, Validators.maxLength(50)]],
       linkType: [ActionButtonLinkType.LINK],
-      link: [{value: '', disabled: true}, Validators.required],
+      link: [{value: '', disabled: true}, [Validators.required, Validators.maxLength(300)]],
       dashboardId: [{value: null, disabled: true}, Validators.required],
       dashboardState: [{value: null, disabled: true}],
       setEntityIdInState: [{value: true, disabled: true}]
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 47b0a3576a..e127774fe0 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
@@ -44,6 +44,11 @@
           <mat-error *ngIf="templateConfigurationForm.get('WEB.subject').hasError('required')">
             {{ 'notification.subject-required' | translate }}
           </mat-error>
+          <mat-error *ngIf="templateConfigurationForm.get('WEB.subject').hasError('maxlength')">
+            {{'notification.subject-max-length' | translate :
+              {length: templateConfigurationForm.get('WEB.subject').getError('maxlength').requiredLength}
+            }}
+          </mat-error>
         </mat-form-field>
         <mat-form-field class="mat-block">
           <mat-label translate>notification.message</mat-label>
@@ -56,6 +61,11 @@
           <mat-error *ngIf="templateConfigurationForm.get('WEB.body').hasError('required')">
             {{ 'notification.message-required' | translate }}
           </mat-error>
+          <mat-error *ngIf="templateConfigurationForm.get('WEB.body').hasError('maxlength')">
+            {{ 'notification.message-max-length' | translate :
+              {length: templateConfigurationForm.get('WEB.body').getError('maxlength').requiredLength}
+            }}
+          </mat-error>
         </mat-form-field>
         <section formGroupName="additionalConfig" class="tb-form-panel no-padding no-border">
           <div class="tb-form-row space-between" formGroupName="icon">
@@ -194,6 +204,11 @@
           <mat-error *ngIf="templateConfigurationForm.get('EMAIL.subject').hasError('required')">
             {{ 'notification.subject-required' | translate }}
           </mat-error>
+          <mat-error *ngIf="templateConfigurationForm.get('EMAIL.subject').hasError('maxlength')">
+            {{'notification.subject-max-length' | translate :
+              {length: templateConfigurationForm.get('EMAIL.subject').getError('maxlength').requiredLength}
+            }}
+          </mat-error>
         </mat-form-field>
         <mat-label class="tb-title tb-required"
                    [class.tb-error]="(interacted || templateConfigurationForm.get('EMAIL.body').touched) && templateConfigurationForm.get('EMAIL.body').hasError('required')"
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 2fa5b1fa1e..ee92ec3539 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
@@ -226,8 +226,8 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
     switch (deliveryMethod) {
       case NotificationDeliveryMethod.WEB:
         deliveryMethodForm = this.fb.group({
-          subject: ['', Validators.required],
-          body: ['', Validators.required],
+          subject: ['', [Validators.required, Validators.maxLength(150)]],
+          body: ['', [Validators.required, Validators.maxLength(250)]],
           additionalConfig: this.fb.group({
             icon: this.fb.group({
               enabled: [false],
@@ -252,7 +252,7 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
         break;
       case NotificationDeliveryMethod.EMAIL:
         deliveryMethodForm = this.fb.group({
-          subject: ['', Validators.required],
+          subject: ['', [Validators.required, Validators.maxLength(250)]],
           body: ['', Validators.required]
         });
         break;
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 55e136e031..d192aceb90 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3963,6 +3963,7 @@
         "input-fields-support-templatization": "Input fields support templatization.",
         "link": "Link",
         "link-required": "Link is required",
+        "link-max-length": "Link should be less than or equal to {{ length }} characters",
         "link-type": {
             "dashboard": "Open dashboard",
             "link": "Open URL link"