Merge pull request #12023 from maxunbearable/fix/4175-metadata-not-required

Made value not required property in Rule Node

ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html

@@ -62,6 +62,7 @@
             <tb-key-val-map
               subscriptSizing="dynamic"
               formControlName="metadata"
+              [isValueRequired]="false"
               titleText="rulenode.metadata">
             </tb-key-val-map>
           </div>

ui-ngx/src/app/shared/components/kv-map.component.html

@@ -25,7 +25,7 @@
              placeholder="{{ (keyPlaceholderText ? keyPlaceholderText : 'key-val.key') | translate }}"/>
     </mat-form-field>
     <mat-form-field class="mat-block flex-1" subscriptSizing="{{ subscriptSizing }}">
-      <input [formControl]="keyValControl.get('value')" matInput required
+      <input [formControl]="keyValControl.get('value')" matInput [required]="isValueRequired"
              placeholder="{{ (valuePlaceholderText ? valuePlaceholderText : 'key-val.value') | translate }}"/>
     </mat-form-field>
     <button mat-icon-button color="primary"

ui-ngx/src/app/shared/components/kv-map.component.ts

@@ -20,12 +20,12 @@ import {
   ControlValueAccessor,
   UntypedFormArray,
   UntypedFormBuilder,
-  UntypedFormControl,
   UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   Validator,
-  Validators
+  Validators,
+  ValidationErrors
 } from '@angular/forms';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
@@ -33,6 +33,7 @@ import { AppState } from '@core/core.state';
 import { SubscriptSizing } from '@angular/material/form-field';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-key-val-map',
@@ -55,6 +56,8 @@ export class KeyValMapComponent extends PageComponent implements ControlValueAcc
 
   @Input() disabled: boolean;
 
+  @Input() @coerceBoolean() isValueRequired = true;
+
   @Input() titleText: string;
 
   @Input() keyPlaceholderText: string;
@@ -118,7 +121,7 @@ export class KeyValMapComponent extends PageComponent implements ControlValueAcc
         if (Object.prototype.hasOwnProperty.call(keyValMap, property)) {
           keyValsControls.push(this.fb.group({
             key: [property, [Validators.required]],
-            value: [keyValMap[property], [Validators.required]]
+            value: [keyValMap[property], this.isValueRequired ? [Validators.required] : []]
           }));
         }
       }
@@ -139,24 +142,12 @@ export class KeyValMapComponent extends PageComponent implements ControlValueAcc
     const keyValsFormArray = this.kvListFormGroup.get('keyVals') as UntypedFormArray;
     keyValsFormArray.push(this.fb.group({
       key: ['', [Validators.required]],
-      value: ['', [Validators.required]]
+      value: ['', this.isValueRequired ? [Validators.required] : []]
     }));
   }
 
-  public validate(c: UntypedFormControl) {
-    const kvList: {key: string; value: string}[] = this.kvListFormGroup.get('keyVals').value;
-    let valid = true;
-    for (const entry of kvList) {
-      if (!entry.key || !entry.value) {
-        valid = false;
-        break;
-      }
-    }
-    return (valid) ? null : {
-      keyVals: {
-        valid: false,
-      },
-    };
+  public validate(): ValidationErrors | null {
+    return this.kvListFormGroup.valid ? null : { keyVals: { valid: false } };
   }
 
   private updateModel() {