Support viewing of VFC property details when checked in

Issue-ID: SDC-4208
Signed-off-by: JvD_Ericsson <jeff.van.dam@est.tech>
Change-Id: I4c16ca4058716bfee6a52b37604a045ecabc975c

5 files changed, 27 insertions, 21 deletions

diff --git a/catalog-ui/src/app/utils/modals-handler.ts b/catalog-ui/src/app/utils/modals-handler.ts
index 342f03f290..6813d53884 100644
--- a/catalog-ui/src/app/utils/modals-handler.ts
+++ b/catalog-ui/src/app/utils/modals-handler.ts
@@ -24,7 +24,7 @@ import { ComponentMetadata } from '../models/component-metadata';
 export interface IModalsHandler {
 
     openEditPropertyModal(property: PropertyModel, component: Component, filteredProperties: PropertyModel[], isPropertyOwnValue: boolean,
-                          propertyOwnerType: string, propertyOwnerId: string): ng.IPromise<any>;
+                          propertyOwnerType: string, propertyOwnerId: string, isViewOnly: boolean): ng.IPromise<any>;
 }
 
 export class ModalsHandler implements IModalsHandler {
@@ -67,7 +67,7 @@ export class ModalsHandler implements IModalsHandler {
      * @returns {IPromise<T>} - Promise telling if the modal has opened or not
      */
     openEditPropertyModal = (property: PropertyModel, component: Component | ComponentMetadata, filteredProperties: PropertyModel[],
-                             isPropertyValueOwner: boolean, propertyOwnerType: string, propertyOwnerId: string): ng.IPromise<any> => {
+                             isPropertyValueOwner: boolean, propertyOwnerType: string, propertyOwnerId: string, isViewOnly: boolean = false): ng.IPromise<any> => {
         const deferred = this.$q.defer();
 
         const modalOptions: ng.ui.bootstrap.IModalSettings = {
@@ -94,6 +94,9 @@ export class ModalsHandler implements IModalsHandler {
                 },
                 propertyOwnerId: (): string => {
                     return propertyOwnerId;
+                },
+                isViewOnly: (): boolean => {
+                    return isViewOnly;
                 }
             }
         };
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
index 17e82099ab..103b1341c0 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
+++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
@@ -62,6 +62,7 @@ interface IPropertyFormViewModelScope extends ng.IScope {
     dataTypes:DataTypesMap;
     isTypeDataType:boolean;
     maxLength:number;
+    isViewOnly:boolean;
     isPropertyValueOwner:boolean;
     isVnfConfiguration:boolean;
     constraints:string[];
@@ -101,6 +102,7 @@ export class PropertyFormViewModel {
         'ModalServiceSdcUI',
         'filteredProperties',
         '$timeout',
+        'isViewOnly',
         'isPropertyValueOwner',
         'propertyOwnerType',
         'propertyOwnerId',
@@ -125,6 +127,7 @@ export class PropertyFormViewModel {
                 private modalService:SdcUiServices.ModalService,
                 private filteredProperties:Array<PropertyModel>,
                 private $timeout:ng.ITimeoutService,
+                private isViewOnly:boolean,
                 private isPropertyValueOwner:boolean,
                 private propertyOwnerType:string,
                 private propertyOwnerId:string,
@@ -232,6 +235,7 @@ export class PropertyFormViewModel {
     private initScope = ():void => {
 
         //scope properties
+        this.$scope.isViewOnly = this.isViewOnly;
         this.$scope.isLoading = true;
         this.$scope.forms = {};
         this.$scope.validationPattern = this.ValidationPattern;
@@ -398,17 +402,17 @@ export class PropertyFormViewModel {
 
         this.$scope.$watch("forms.editForm.$invalid", (newVal) => {
             if (this.$scope.editPropertyModel.hasGetFunctionValue) {
-                this.$scope.footerButtons[0].disabled = newVal || !this.$scope.editPropertyModel.property.toscaFunction;
+                this.$scope.footerButtons[0].disabled = newVal || !this.$scope.editPropertyModel.property.toscaFunction || this.isViewOnly;
             } else {
-                this.$scope.footerButtons[0].disabled = newVal;
+                this.$scope.footerButtons[0].disabled = newVal || this.isViewOnly;
             }
         });
 
         this.$scope.$watch("forms.editForm.$valid", (newVal) => {
             if (this.$scope.editPropertyModel.hasGetFunctionValue) {
-                this.$scope.footerButtons[0].disabled = !newVal || !this.$scope.editPropertyModel.property.toscaFunction;
+                this.$scope.footerButtons[0].disabled = !newVal || !this.$scope.editPropertyModel.property.toscaFunction || this.isViewOnly;
             } else {
-                this.$scope.footerButtons[0].disabled = !newVal;
+                this.$scope.footerButtons[0].disabled = !newVal || this.isViewOnly;
             }
         });
 
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
index 67fce08311..a6fd69755a 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
+++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
@@ -13,11 +13,11 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-<ng1-modal modal="modalInstanceProperty" type="classic" class="sdc-edit-property-container" buttons="footerButtons" header="{{isNew ? 'Add' : 'Update' }} Property" show-close-button="true" data-tests-id="sdc-edit-property-container">
+<ng1-modal modal="modalInstanceProperty" type="classic" class="sdc-edit-property-container" buttons="footerButtons" header="{{isNew ? 'Add' : isViewOnly ? '' : 'Update'}} Property {{isViewOnly ? 'Definition' : ''}}" show-close-button="true" data-tests-id="sdc-edit-property-container">
     <loader data-display="isLoading" relative="false" size="medium"></loader>
     <div class="sdc-modal-top-bar" data-ng-if="!isNew">
         <div class="sdc-modal-top-bar-buttons">
-            <span ng-click="delete(editPropertyModel.property)" data-ng-class="{'disabled' : isPropertyValueOwner || editPropertyModel.property.readonly || propertyOwnerType == 'group' || propertyOwnerType == 'policy'}" class="sprite-new delete-btn" data-tests-id="delete_property"  sdc-smart-tooltip="">Delete</span>
+            <span ng-click="delete(editPropertyModel.property)" data-ng-class="{'disabled' : isPropertyValueOwner || editPropertyModel.property.readonly || propertyOwnerType == 'group' || propertyOwnerType == 'policy' || isViewOnly}" class="sprite-new delete-btn" data-tests-id="delete_property"  sdc-smart-tooltip="">Delete</span>
             <span class="delimiter"></span>
             <span data-ng-click="getPrev()" data-ng-class="{'disabled' : !currentPropertyIndex }" class="sprite-new left-arrow" data-tests-id="get-prev" sdc-smart-tooltip="">Previous</span>
             <span data-ng-click="getNext()" data-ng-class="{'disabled' : isLastProperty }" class="sprite-new right-arrow" data-tests-id="get-next" sdc-smart-tooltip="">Next</span>
@@ -38,7 +38,7 @@
                             <input class="i-sdc-form-input"
                                    data-tests-id="propertyName"
                                    data-ng-maxlength="50"
-                                   data-ng-disabled="!isNew || editPropertyModel.property.readonly"
+                                   data-ng-disabled="!isNew || editPropertyModel.property.readonly || isViewOnly"
                                    maxlength="50"
                                    data-ng-model="editPropertyModel.property.name"
                                    type="text"
@@ -65,7 +65,7 @@
                                     <select class="i-sdc-form-select"
                                             data-tests-id="propertyType"
                                             data-required
-                                            data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly"
+                                            data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly || isViewOnly"
                                             name="type"
                                             data-ng-change="onTypeChange()"
                                             data-ng-model="editPropertyModel.property.type">
@@ -88,7 +88,7 @@
                                     <select class="i-sdc-form-select"
                                             data-required
                                             data-tests-id="schema-type"
-                                            data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly"
+                                            data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly || isViewOnly"
                                             name="schemaType"
                                             data-ng-change="onSchemaTypeChange()"
                                             data-ng-model="editPropertyModel.property.schema.property.type">
@@ -122,7 +122,7 @@
                     <label class="i-sdc-form-label">Description</label>
                             <textarea  class="i-sdc-form-textarea"
                                        data-ng-maxlength="400"
-                                       data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly"
+                                       data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly || isViewOnly"
                                        maxlength="400"
                                        data-ng-pattern="commentValidationPattern"
                                        name="description"
@@ -167,7 +167,7 @@
                                               type-name="editPropertyModel.property.type"
                                               parent-form-obj="forms.editForm"
                                               fields-prefix-name="currentPropertyIndex"
-                                              read-only="editPropertyModel.property.readonly && !isPropertyValueOwner"
+                                              read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isViewOnly"
                                               default-value="{{getDefaultValue()}}"
                                               expand-by-default="true"></fields-structure>
 
@@ -178,7 +178,7 @@
                                           schema-property="editPropertyModel.property.schema.property"
                                           parent-form-obj="forms.editForm"
                                           fields-prefix-name="currentPropertyIndex"
-                                          read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isVnfConfiguration"
+                                          read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isVnfConfiguration || isViewOnly"
                                           default-value="{{getDefaultValue()}}"
                                           max-length="maxLength"
                                           constraints="editPropertyModel.property.constraints && editPropertyModel.property.constraints[0].validValues">
@@ -190,7 +190,7 @@
                                            schema-property="editPropertyModel.property.schema.property"
                                            parent-form-obj="forms.editForm"
                                            fields-prefix-name="currentPropertyIndex"
-                                           read-only="editPropertyModel.property.readonly && !isPropertyValueOwner"
+                                           read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isViewOnly"
                                            default-value="{{getDefaultValue()}}"
                                            max-length="maxLength"
                                            constraints="editPropertyModel.property.constraints && editPropertyModel.property.constraints[0].validValues"></type-list>
@@ -205,7 +205,7 @@
                                     <select class="i-sdc-form-select"
                                             data-tests-id="constraints"
                                             ng-if="(editPropertyModel.property.constraints)"
-                                            data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner"
+                                            data-ng-disabled="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isViewOnly"
 
                                             data-ng-change="onValueChange()"
                                             data-ng-model="editPropertyModel.property.value">
@@ -226,7 +226,7 @@
                                            data-tests-id="defaultvalue"
                                            ng-if="!(editPropertyModel.property.constraints) && !((editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean')"
                                            data-ng-maxlength="maxLength"
-                                           data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner"
+                                           data-ng-disabled="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isViewOnly"
                                            maxlength="{{maxLength}}"
                                            data-ng-model="editPropertyModel.property.value"
                                            type="text"
@@ -241,7 +241,7 @@
                                     <select class="i-sdc-form-select"
                                             data-tests-id="booleantype"
                                             ng-if="(editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean'"
-                                            data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner"
+                                            data-ng-disabled="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isViewOnly"
                                             name="value"
                                             data-ng-change="onValueChange()"
                                             data-ng-model="editPropertyModel.property.value">
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts
index b15901461a..656c52f908 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts
@@ -73,7 +73,7 @@ export class PropertiesViewModel {
     }
 
     private openEditPropertyModal = (property:PropertyModel):void => {
-        this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.filteredProperties, false, 'component', this.$scope.component.uniqueId);
+        this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.filteredProperties, false, 'component', this.$scope.component.uniqueId, this.$scope.isViewMode());
     };
 
     private initScope = ():void => {
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html
index 1d8a2ff78c..38a8405241 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html
@@ -44,8 +44,7 @@
 
                         <div class="table-col-general flex-item text" tooltips tooltip-content="{{property.name}}">
                             <a data-tests-id="propertyName_{{property.name}}"
-                                   data-ng-click="addOrUpdateProperty(property); $event.stopPropagation();"
-                                   data-ng-class="{'disabled': isViewMode()}">{{property.name}}</a>
+                                   data-ng-click="addOrUpdateProperty(property); $event.stopPropagation();">{{property.name}}</a>
 
                         </div>