View Interface definition on VFC

Add Interface support to VFC view UI

Issue-ID: SDC-3850
Signed-off-by: aribeiro <anderson.ribeiro@est.tech>
Change-Id: Icd195c939af39d40ae8c617e740323dd3e70fc15

3 files changed, 20 insertions, 10 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts
index 2cc91a92a0..60d66788ac 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts
@@ -227,7 +227,8 @@ export class InterfaceOperationsComponent {
           toscaArtifactTypes: this.toscaArtifactTypes,
           selectedInterface: interfaceModel,
           selectedInterfaceOperation: operation,
-          validityChangedCallback: this.enableOrDisableSaveButton
+          validityChangedCallback: this.enableOrDisableSaveButton,
+          isViewOnly: false
         }
     );
     this.modalInstance.instance.open();
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 428c4cd5ed..6dec4160f6 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
@@ -28,7 +28,7 @@
                 <sdc-input
                     label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
                     [(value)]="interfaceType"
-                    [disabled]="true">
+                    [disabled]=isViewOnly>
                 </sdc-input>
             </div>
 
@@ -36,7 +36,7 @@
                 <sdc-input
                     label="{{ 'OPERATION_NAME' | translate }}"
                     [(value)]="operationToUpdate.name"
-                    [disabled]="true">
+                    [disabled]=isViewOnly>
                 </sdc-input>
             </div>
         </div>
@@ -46,7 +46,8 @@
                 label="{{'OPERATION_DESCRIPTION' | translate}}"
                 [(value)]="operationToUpdate.description"
                 testId="interface-operation-description"
-                (valueChange)="onDescriptionChange($event)">
+                (valueChange)="onDescriptionChange($event)"
+                [disabled]=isViewOnly>
             </sdc-input>
         </div>
 
@@ -55,7 +56,8 @@
             <div class="form-item">
                 <checkbox [label]="'Add Artifact To Implementation'"
                           [(checked)]="enableAddArtifactImplementation"
-                          (checkedChange)="onMarkToAddArtifactToImplementation($event)">
+                          (checkedChange)="onMarkToAddArtifactToImplementation($event)"
+                          [disabled]=isViewOnly>
                 </checkbox>
             </div>
             <div class="form-item" *ngIf="!enableAddArtifactImplementation">
@@ -63,7 +65,8 @@
                     label="{{'INTERFACE_OPERATION_IMPLEMENTATION_NAME' | translate}}"
                     testId="interface-operation-implementation-name"
                     [(value)]="artifactName"
-                    (valueChange)="onImplementationNameChange($event)">
+                    (valueChange)="onImplementationNameChange($event)"
+                    [disabled]=isViewOnly>
                 </sdc-input>
             </div>
 
@@ -76,7 +79,8 @@
                         [selectedOption]="toscaArtifactTypeSelected"
                         placeHolder="{{toscaArtifactTypeSelected != undefined ? toscaArtifactTypeSelected : 'Select...'}}"
                         (changed)="onSelectToscaArtifactType($event)"
-                        [options]="toscaArtifactTypes">
+                        [options]="toscaArtifactTypes"
+                        [disabled]=isViewOnly>
                     </sdc-dropdown>
                 </div>
                 <div class="form-item" *ngIf="toscaArtifactTypeSelected && enableAddArtifactImplementation">
@@ -85,7 +89,8 @@
                         data-tests-id="artifactFile"
                         [(value)]="artifactName"
                         [required]="true"
-                        (valueChange)="onArtifactFileChange($event)">
+                        (valueChange)="onArtifactFileChange($event)"
+                        [disabled]=isViewOnly>
                     </sdc-input>
                 </div>
                 <div class="form-item">
@@ -93,7 +98,8 @@
                         label="{{ 'ARTIFACT_VERSION' | translate }}"
                         data-tests-id="artifactVersion"
                         [(value)]="artifactVersion"
-                        (valueChange)="onArtifactVersionChange($event)">
+                        (valueChange)="onArtifactVersionChange($event)"
+                        [disabled]=isViewOnly>
                     </sdc-input>
                 </div>
             </div>
@@ -122,7 +128,7 @@
         <div class="separator-buttons">
             <tab tabTitle="Inputs"></tab>
             <a class="add-param-link add-btn"
-               [ngClass]="{'disabled': readonly}"
+               [ngClass]="{'disabled': readonly || isViewOnly}"
                (click)="onAddInput()">{{'OPERATION_ADD_INPUT' | translate}}
             </a>
         </div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts
index 6e4ae45487..1099391548 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts
@@ -49,6 +49,7 @@ export class InterfaceOperationHandlerComponent {
         selectedInterface: UIInterfaceModel;
         selectedInterfaceOperation: InterfaceOperationModel;
         validityChangedCallback: Function;
+        isViewOnly: boolean;
     };
 
     interfaceType: string;
@@ -60,6 +61,7 @@ export class InterfaceOperationHandlerComponent {
     properties: Array<PropertyParamRowComponent> = [];
     isLoading: boolean = false;
     readonly: boolean;
+    isViewOnly: boolean;
 
     toscaArtifactTypeSelected: string;
     toscaArtifactTypeProperties: Array<PropertyBEModel> = [];
@@ -70,6 +72,7 @@ export class InterfaceOperationHandlerComponent {
     propertyValueValid: boolean = true;
 
     ngOnInit() {
+        this.isViewOnly = this.input.isViewOnly;
         this.interfaceType = this.input.selectedInterface.displayType();
         this.operationToUpdate = new InterfaceOperationModel(this.input.selectedInterfaceOperation);
         this.operationToUpdate.interfaceId = this.input.selectedInterface.uniqueId;