From d06bac8bf2f8fba84ddbf36a5cc11f8261a9b575 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 24 Dec 2024 11:46:06 +0200
Subject: [PATCH 1/2] UI: Fixed not detect delete js module

---
 ui-ngx/src/app/shared/components/js-func-modules.component.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui-ngx/src/app/shared/components/js-func-modules.component.ts b/ui-ngx/src/app/shared/components/js-func-modules.component.ts
index 6269ffc596..84970ff081 100644
--- a/ui-ngx/src/app/shared/components/js-func-modules.component.ts
+++ b/ui-ngx/src/app/shared/components/js-func-modules.component.ts
@@ -119,6 +119,7 @@ export class JsFuncModulesComponent implements OnInit {
 
   removeModule(index: number, emitEvent = true) {
     (this.modulesFormGroup.get('modules') as UntypedFormArray).removeAt(index, {emitEvent});
+    this.modulesFormGroup.get('modules').markAsDirty({emitEvent});
   }
 
   addModule() {

From 8a53140b3fbb7d0faef0f68f14b535f14148c085 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 24 Dec 2024 11:47:05 +0200
Subject: [PATCH 2/2] UI: Fixed validation alias name for js module

---
 .../components/js-func-module-row.component.html     |  8 ++++++++
 .../components/js-func-module-row.component.ts       | 12 +++++++++---
 ui-ngx/src/assets/locale/locale.constant-en_US.json  |  1 +
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/js-func-module-row.component.html b/ui-ngx/src/app/shared/components/js-func-module-row.component.html
index 38456fbda4..7c1650ccbf 100644
--- a/ui-ngx/src/app/shared/components/js-func-module-row.component.html
+++ b/ui-ngx/src/app/shared/components/js-func-module-row.component.html
@@ -18,6 +18,14 @@
 <div [formGroup]="moduleRowFormGroup" class="tb-form-table-row tb-js-func-module-row">
   <mat-form-field class="tb-inline-field tb-alias-field" appearance="outline" subscriptSizing="dynamic">
     <input required matInput formControlName="alias" placeholder="{{ 'widget-config.set' | translate }}">
+    <mat-icon matSuffix
+              matTooltipPosition="above"
+              matTooltipClass="tb-error-tooltip"
+              [matTooltip]="'js-func.invalid-module-alias-name' | translate"
+              *ngIf="moduleRowFormGroup.get('alias').invalid && moduleRowFormGroup.get('alias').touched"
+              class="tb-error">
+      warning
+    </mat-icon>
   </mat-form-field>
   <tb-resource-autocomplete class="tb-module-link-field"
                             #resourceAutocomplete
diff --git a/ui-ngx/src/app/shared/components/js-func-module-row.component.ts b/ui-ngx/src/app/shared/components/js-func-module-row.component.ts
index c25e7ede04..5a527acd7b 100644
--- a/ui-ngx/src/app/shared/components/js-func-module-row.component.ts
+++ b/ui-ngx/src/app/shared/components/js-func-module-row.component.ts
@@ -39,7 +39,7 @@ import {
 } from '@angular/forms';
 import { JsFuncModulesComponent } from '@shared/components/js-func-modules.component';
 import { ResourceSubType } from '@shared/models/resource.models';
-import { Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
 import { ResourceAutocompleteComponent } from '@shared/components/resource/resource-autocomplete.component';
 import { HttpClient } from '@angular/common/http';
 import { loadModuleMarkdownDescription, loadModuleMarkdownSourceCode } from '@shared/models/js-function.models';
@@ -103,7 +103,7 @@ export class JsFuncModuleRowComponent implements ControlValueAccessor, OnInit, V
 
   ngOnInit() {
     this.moduleRowFormGroup = this.fb.group({
-      alias: [null, [this.moduleAliasValidator()]],
+      alias: [null, [this.moduleAliasValidator(), Validators.pattern(/^[$_\p{ID_Start}][$\p{ID_Continue}]*$/u)]],
       moduleLink: [null, [Validators.required]]
     });
     this.moduleRowFormGroup.valueChanges.pipe(
@@ -133,7 +133,7 @@ export class JsFuncModuleRowComponent implements ControlValueAccessor, OnInit, V
 
   public validate(_c: UntypedFormControl) {
     const aliasControl = this.moduleRowFormGroup.get('alias');
-    if (aliasControl.hasError('moduleAliasNotUnique')) {
+    if (aliasControl.hasError('moduleAliasNotUnique') || aliasControl.hasError('pattern')) {
       aliasControl.updateValueAndValidity({onlySelf: false, emitEvent: false});
     }
     if (aliasControl.hasError('moduleAliasNotUnique')) {
@@ -142,6 +142,12 @@ export class JsFuncModuleRowComponent implements ControlValueAccessor, OnInit, V
         moduleAliasNotUnique: true
       };
     }
+    if (aliasControl.hasError('pattern')) {
+      this.moduleRowFormGroup.get('alias').markAsTouched();
+      return {
+        invalidVariableName: true
+      };
+    }
     const module: JsFuncModuleRow = {...this.modelValue, ...this.moduleRowFormGroup.value};
     if (!moduleValid(module)) {
       return {
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 76e1ada0e0..b25bd917fc 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3324,6 +3324,7 @@
         "no-modules": "No modules configured",
         "add-module": "Add module",
         "module-alias": "Alias",
+        "invalid-module-alias-name": "Invalid alias name",
         "module-resource": "JS module resource",
         "not-unique-module-aliases-error": "Modules aliases must be unique!",
         "show-module-info": "Show module info",