Provide validation to the json type property in the operation inputs

Validation for json type properties is provided in operation inputs

Issue-ID: SDC-4593
Signed-off-by: Imam hussain <imam.hussain@est.tech>
Change-Id: Id466b1de26007b77d4bb9093ee37580d312824ea

3 files changed, 17 insertions, 1 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts
index 21e8363eb8..116b9ebc9d 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts
@@ -85,6 +85,9 @@ export class InputListItemComponent implements OnInit {
       this.valueObjRef = this.toscaFunction.value;
       this.isToscaFunction = true;
     }
+    if (this.property.type == PROPERTY_TYPES.JSON) {
+      this.valueObjRef = JSON.stringify(this.valueObjRef);
+    }
   }
 
   ngOnChanges(): void {
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts
index 62c5e8a52a..3956fe2822 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts
@@ -137,7 +137,19 @@ export class InputListComponent {
       } else if (this.isTypeComplex(inputOperationParameter.type)) {
         this.setComplexType($event, inputOperationParameter);
       } else {
-        inputOperationParameter.value = $event.value;
+        if (inputOperationParameter.type == PROPERTY_TYPES.JSON) {
+          const parseValue = $event.value;
+          try {
+            JSON.parse(parseValue);
+            inputOperationParameter.value = $event.value;
+          } catch (err) {
+            console.log('invalid json');
+            inputOperationParameter.valid = false;
+            inputOperationParameter.value = null;
+          }
+        } else {
+          inputOperationParameter.value = $event.value;
+        }
         inputOperationParameter.toscaFunction = null;
       }
     }
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
index 0b42f756b3..38aed30918 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
@@ -133,6 +133,7 @@
                 [componentInstanceMap]="componentInstanceMap"
                 [showToscaFunctionOption]="true"
                 (onValueChange)="onInputValueChange($event)"
+                (onInputsValidityChange)="implementationPropsValidityChange($event)"
                 (onDelete)="onInputDelete($event)"
             >
             </input-list>