UI: Add notification sms template max length limit

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>

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({

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>

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",