Merge pull request #12329 from vvlladd28/bug/js-mobule-validation

Fixed deletion of JS module in function and added validation for alias name in JS module

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

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 {

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

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3325,6 +3325,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",