Generalise Select Input button in Properties Assignment view

Issue-ID: SDC-3996
Signed-off-by: KrupaNagabhushan <krupa.nagabhushan@est.tech>
Change-Id: Idb7ff3552ffb68748c688c374625b216ac273499

8 files changed, 98 insertions, 53 deletions

diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts
index 37167b4360..707e328a52 100644
--- a/catalog-ui/src/app/ng2/app.module.ts
+++ b/catalog-ui/src/app/ng2/app.module.ts
@@ -94,7 +94,7 @@ import {ServiceDependenciesModule} from './components/logic/service-dependencies
 import {ServiceDependenciesEditorModule} from './pages/service-dependencies-editor/service-dependencies-editor.module';
 import {PropertyCreatorModule} from './pages/properties-assignment/property-creator/property-creator.module';
 import {DeclareListModule} from './pages/properties-assignment/declare-list/declare-list.module';
-import { InputListModule } from "./pages/properties-assignment/input-list/input-list.module";
+import { ToscaFunctionModule } from "./pages/properties-assignment/tosca-function/tosca-function.module";
 import {WorkflowServiceNg2} from './services/workflow.service';
 import {ToscaTypesServiceNg2} from "./services/tosca-types.service";
 import {CapabilitiesFilterPropertiesEditorComponentModule} from "./pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.module";
@@ -153,7 +153,7 @@ export function configServiceFactory(config: ConfigService, authService: Authent
     AttributesOutputsModule,
     PropertyCreatorModule,
     DeclareListModule,
-    InputListModule,
+    ToscaFunctionModule,
     PluginFrameModule,
     PluginsModule,
     InterfaceOperationModule,
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
index d04ddf5c91..c1a1ae5b57 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
@@ -75,11 +75,11 @@
                     <span class="sprite search-icon" data-tests-id="search-button"></span>
                     <filter-properties-assignment *ngIf="isPropertiesTabSelected" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment>
                 </div>
-                <button (click)="selectInput()"
+                <button (click)="selectToscaFunctionAndValues()"
                         *ngIf="isPropertiesTabSelected && !isSelf()"
                         [disabled]="checkedPropertiesCount != 1 || isReadonly || hasChangedData"
                         class="tlv-btn blue declare-button"
-                        data-tests-id="declare-button select-input">{{btnSelectInputText}}</button>
+                        data-tests-id="declare-button select-tosca-function">{{btnToscaFunctionText}}</button>
                 <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly || hasChangedData" (click)="declareProperties()" data-tests-id="declare-button declare-input">Declare Input</button>
                 <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly || hasChangedData || isSelf()" (click)="declarePropertiesToPolicies()" data-tests-id="declare-button declare-policy">Declare Policy</button>
                 <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || checkedChildPropertiesCount || isReadonly || hasChangedData" (click)="declareListProperties()" data-tests-id="declare-but($event)ton declare-list-input">Create List Input</button>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
index 4baae199c4..a6e0b51136 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
@@ -19,7 +19,7 @@
  */
 
 import * as _ from "lodash";
-import {Component, Inject, ViewChild} from "@angular/core";
+import {Component, Inject, ViewChild, ComponentRef} from "@angular/core";
 import {PropertiesService} from "../../services/properties.service";
 import {
     ButtonModel,
@@ -62,12 +62,13 @@ import {UnsavedChangesComponent} from "app/ng2/components/ui/forms/unsaved-chang
 import {PropertyCreatorComponent} from "./property-creator/property-creator.component";
 import {ModalService} from "../../services/modal.service";
 import {DeclareListComponent} from "./declare-list/declare-list.component";
-import {InputListComponent} from "./input-list/input-list.component";
+import {ToscaFunctionComponent} from "./tosca-function/tosca-function.component";
 import {CapabilitiesGroup, Capability} from "../../../models/capability";
 import {ToscaPresentationData} from "../../../models/tosca-presentation";
 import {Observable} from "rxjs";
 import {ToscaGetFunctionType} from "../../../models/tosca-get-function-type.enum";
 import {TranslateService} from "../../shared/translator/translate.service";
+import {ModalComponent} from "../../components/ui/modal/modal.component";
 
 const SERVICE_SELF_TITLE = "SELF";
 @Component({
@@ -102,7 +103,6 @@ export class PropertiesAssignmentComponent {
     currentMainTab: Tab;
     isInputsTabSelected: boolean;
     isPropertiesTabSelected: boolean;
-    isInputValueSelected: boolean = false;
     isPoliciesTabSelected: boolean;
     isReadonly: boolean;
     resourceIsReadonly: boolean;
@@ -118,8 +118,7 @@ export class PropertiesAssignmentComponent {
     serviceBePropertiesMap: InstanceBePropertiesMap;
     serviceBeCapabilitiesPropertiesMap: InstanceBePropertiesMap;
     selectedInstance_FlattenCapabilitiesList: Capability[];
-    propertyType: string;
-    btnSelectInputText: string;
+    btnToscaFunctionText: string;
 
     @ViewChild('hierarchyNavTabs') hierarchyNavTabs: Tabs;
     @ViewChild('propertyInputTabs') propertyInputTabs: Tabs;
@@ -157,7 +156,7 @@ export class PropertiesAssignmentComponent {
 
     ngOnInit() {
         console.log("==>" + this.constructor.name + ": ngOnInit");
-        this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL');
+        this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
         this.loadingInputs = true;
         this.loadingPolicies = true;
         this.loadingInstances = true;
@@ -501,8 +500,8 @@ export class PropertiesAssignmentComponent {
         this.searchQuery = '';
     };
 
-    /**Select Properties value from defined input values**/
-    selectInput = (): void => {
+    /**Select Tosca function value from defined values**/
+    selectToscaFunctionAndValues = (): void => {
         let instancesIds = this.keysPipe.transform(this.instanceFePropertiesMap, []);
         angular.forEach(instancesIds, (instanceId: string): void => {
             let selectedInstanceData: any = this.instances.find(instance => instance.uniqueId == instanceId
@@ -518,7 +517,7 @@ export class PropertiesAssignmentComponent {
                         property.toscaGetFunctionType = null;
                         this.updateInstancePropertiesWithInput(checkedProperties, selectedInstanceData);
                     } else {
-                        let modalTitle = 'Select value from Input';
+                        const modalTitle = 'Set value using TOSCA functions';
                         const modal = this.ModalService.createCustomModal(new ModalModel(
                             'sm',
                             modalTitle,
@@ -526,19 +525,10 @@ export class PropertiesAssignmentComponent {
                             [
                                 new ButtonModel('Save', 'blue',
                                     () => {
-                                        this.loadingProperties = true;
-                                        let selectInputValue: InputFEModel = modal.instance.dynamicContent.instance.selectInputValue;
-                                        property.getInputValues = [];
-                                        const propertyInputDetail = new PropertyInputDetail();
-                                        propertyInputDetail.inputId = selectInputValue.uniqueId;
-                                        propertyInputDetail.inputName = selectInputValue.name;
-                                        propertyInputDetail.inputType = selectInputValue.type;
-                                        property.getInputValues.push(propertyInputDetail);
-                                        property.value = selectInputValue.name.indexOf("->") !== -1
-                                            ? '{"get_input":[' + selectInputValue.name.replace("->", ", ") + ']}'
-                                            : '{"get_input":"' + selectInputValue.name+ '"}' ;
-                                        property.toscaGetFunctionType = ToscaGetFunctionType.GET_INPUT;
-                                        this.updateInstancePropertiesWithInput(checkedProperties, selectedInstanceData);
+                                        const selectedToscaFunction: string = modal.instance.dynamicContent.instance.selectToscaFunction;
+                                        if (selectedToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) {
+                                            this.updateSelectInputValues(modal, property, checkedProperties, selectedInstanceData);
+                                        }
                                         modal.instance.close();
                                     }
                                 ),
@@ -548,7 +538,7 @@ export class PropertiesAssignmentComponent {
                             ],
                             null /* type */
                         )); //modal
-                        this.ModalService.addDynamicContentToModal(modal, InputListComponent);
+                        this.ModalService.addDynamicContentToModal(modal, ToscaFunctionComponent);
                         modal.instance.open();
                     }
                 });
@@ -556,6 +546,22 @@ export class PropertiesAssignmentComponent {
         });
     };
 
+    private updateSelectInputValues(modal:ComponentRef<ModalComponent>, property:PropertyBEModel, checkedProperties:PropertyBEModel[], selectedInstanceData:any) {
+        this.loadingProperties = true;
+        let selectInputValue: InputFEModel = modal.instance.dynamicContent.instance.selectValue;
+        property.getInputValues = [];
+        const propertyInputDetail = new PropertyInputDetail();
+        propertyInputDetail.inputId = selectInputValue.uniqueId;
+        propertyInputDetail.inputName = selectInputValue.name;
+        propertyInputDetail.inputType = selectInputValue.type;
+        property.getInputValues.push(propertyInputDetail);
+        property.value = selectInputValue.name.indexOf("->") !== -1
+            ? '{"get_input":[' + selectInputValue.name.replace("->", ", ") + ']}'
+            : '{"get_input":"' + selectInputValue.name+ '"}' ;
+        property.toscaGetFunctionType = ToscaGetFunctionType.GET_INPUT;
+        this.updateInstancePropertiesWithInput(checkedProperties, selectedInstanceData);
+    }
+
     updateInstancePropertiesWithInput(checkedProperties: PropertyBEModel[], selectedInstanceData: any) {
         this.componentInstanceServiceNg2.updateInstanceProperties(this.component.componentType, this.component.uniqueId,
             this.selectedInstanceData.uniqueId, checkedProperties)
@@ -568,7 +574,7 @@ export class PropertiesAssignmentComponent {
             });
         }, () => {
             this.loadingProperties = false;
-            this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL');
+            this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
         });
     }
 
@@ -579,18 +585,17 @@ export class PropertiesAssignmentComponent {
             angular.forEach(checkedProperties, (property: PropertyBEModel) => {
                 if(this.checkedPropertiesCount == 1) {
                     if (property.toscaGetFunctionType == null) {
-                        this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL');
+                        this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
                     } else {
-                        this.btnSelectInputText = this.translateService.translate('DESELECT_INPUT_LABEL');
+                        this.btnToscaFunctionText = this.translateService.translate('DESELECT_INPUT_LABEL');
                     }
                 } else {
-                    this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL');
+                    this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
                 }
             });
         });
     }
 
-
     /*** DECLARE PROPERTIES/INPUTS ***/
     declareProperties = (): void => {
         console.log("==>" + this.constructor.name + ": declareProperties");
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
index b61d25cb25..ea52f20e91 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
@@ -17,14 +17,21 @@
   ~  ============LICENSE_END=========================================================
   -->
 
-<div class="input-list">
+<div class="tosca-function">
   <loader [display]="isLoading" [loaderDelay]="500" [relative]="true" [size]="'large'"></loader>
   <form class="w-sdc-form">
     <div class="i-sdc-form-item">
-      <label class="i-sdc-form-label required">Input Value</label>
-        <select [(ngModel)]="selectInputValue" name="selectInputValue">
-          <option *ngFor="let input of inputs"
-                  [ngValue]="input">{{input.name}}</option>
+      <label class="i-sdc-form-label required">TOSCA function</label>
+      <select [(ngModel)]="selectToscaFunction" (change)="onToscaFunctionChange()" name="selectToscaFunction">
+        <option *ngFor="let toscaFunction of toscaFunctions"
+                [ngValue]="toscaFunction">{{toscaFunction}}</option>
+      </select>
+    </div>
+    <div *ngIf="selectToscaFunction" class="i-sdc-form-item">
+      <label class="i-sdc-form-label required">{{dropdownValuesLabel}}</label>
+        <select [(ngModel)]="selectValue" name="selectValue">
+          <option *ngFor="let value of dropdownValues"
+                  [ngValue]="value">{{value.name}}</option>
         </select>
     </div>
   </form>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less
index e1e9b0d20d..e1e9b0d20d 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
index 0bdd028d93..22fb8cc358 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
@@ -26,19 +26,24 @@ import {WorkspaceService} from "../../workspace/workspace.service";
 import {PropertiesService} from "../../../services/properties.service";
 import {PROPERTY_DATA} from "../../../../utils/constants";
 import {DataTypeService} from "../../../services/data-type.service";
+import {ToscaGetFunctionType} from "../../../../models/tosca-get-function-type.enum";
+import {TranslateService} from "../../../shared/translator/translate.service";
 
 @Component({
-    selector: 'input-list',
-    templateUrl: './input-list.component.html',
-    styleUrls: ['./input-list.component.less'],
+    selector: 'tosca-function',
+    templateUrl: './tosca-function.component.html',
+    styleUrls: ['./tosca-function.component.less'],
 })
 
-export class InputListComponent {
+export class ToscaFunctionComponent {
 
-    selectInputValue;
+    selectToscaFunction;
+    selectValue;
     isLoading: boolean;
     propertyType: string;
-    inputs: Array<PropertyBEModel> = [];
+    dropdownValues: Array<PropertyBEModel> = [];
+    toscaFunctions: Array<string> = [];
+    dropdownValuesLabel: string;
 
     private dataTypeProperties: Array<PropertyBEModel> = [];
     private componentMetadata: ComponentMetadata;
@@ -46,13 +51,40 @@ export class InputListComponent {
     constructor(private topologyTemplateService: TopologyTemplateService,
                 private workspaceService: WorkspaceService,
                 private propertiesService: PropertiesService,
-                private dataTypeService: DataTypeService) {
+                private dataTypeService: DataTypeService,
+                private translateService: TranslateService) {
     }
 
     ngOnInit() {
         this.componentMetadata = this.workspaceService.metadata;
         this.propertyType = this.propertiesService.getCheckedPropertyType();
-        this.loadInputValues(this.propertyType);
+        this.loadToscaFunctions();
+    }
+
+    private loadToscaFunctions(): void {
+        this.toscaFunctions.push(ToscaGetFunctionType.GET_INPUT.toLowerCase());
+    }
+
+    onToscaFunctionChange(): void {
+        this.loadDropdownValueLabel();
+        this.loadDropdownValues();
+    }
+
+    private loadDropdownValueLabel(): void {
+        if (this.selectToscaFunction) {
+            if (this.selectToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) {
+                this.dropdownValuesLabel = this.translateService.translate('INPUT_DROPDOWN_LABEL');
+            }
+        }
+    }
+
+    private loadDropdownValues(): void {
+        if (this.selectToscaFunction) {
+            this.dropdownValues = [];
+            if (this.selectToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) {
+                this.loadInputValues(this.propertyType);
+            }
+        }
     }
 
     private loadInputValues(propertyType: string): void {
@@ -61,7 +93,7 @@ export class InputListComponent {
         .subscribe((response) => {
             response.inputs.forEach((inputProperty: any) => {
                 if (propertyType === inputProperty.type) {
-                    this.inputs.push(inputProperty);
+                    this.dropdownValues.push(inputProperty);
                 } else if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(inputProperty.type) === -1 && inputProperty.type !== propertyType) {
                     this.buildInputDataForComplexType(inputProperty, propertyType);
                 }
@@ -80,7 +112,7 @@ export class InputListComponent {
                 let inputData = inputProperty.name + "->" + dataTypeProperty.name;
                 dataTypeProperty.name = inputData;
                 if (this.dataTypeProperties.indexOf(dataTypeProperty) === -1 && dataTypeProperty.type === propertyType) {
-                    this.inputs.push(dataTypeProperty);
+                    this.dropdownValues.push(dataTypeProperty);
                 }
             });
         }
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.module.ts
index 50d7b08314..efe45c3d27 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.module.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.module.ts
@@ -23,12 +23,12 @@ import { FormsModule } from '@angular/forms';
 import { FormElementsModule } from 'app/ng2/components/ui/form-components/form-elements.module';
 import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
 import { TranslateModule } from '../../../shared/translator/translate.module';
-import { InputListComponent } from './input-list.component';
+import { ToscaFunctionComponent } from './tosca-function.component';
 import { SdcUiComponentsModule } from 'onap-ui-angular';
 
 @NgModule({
     declarations: [
-        InputListComponent,
+        ToscaFunctionComponent,
     ],
     imports: [
         CommonModule,
@@ -40,9 +40,9 @@ import { SdcUiComponentsModule } from 'onap-ui-angular';
     ],
     exports: [],
     entryComponents: [
-        InputListComponent
+        ToscaFunctionComponent
     ],
     providers: []
 })
 
-export class InputListModule {}
+export class ToscaFunctionModule {}
diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json
index fe855c168e..3c659dcf06 100644
--- a/catalog-ui/src/assets/languages/en_US.json
+++ b/catalog-ui/src/assets/languages/en_US.json
@@ -508,9 +508,10 @@
   "=========== PROPERTIES ASSIGNMENT DECLARE AS POLICY ===========": "",
   "DELETE_POLICY_TITLE": "Delete Policy",
   "DELETE_POLICY_MSG": "Are you sure you want to delete policy '{{policyName}}'?",
-  "=========== PROPERTIES ASSIGNMENT SELECT INPUT BUTTON ===========": "",
-  "SELECT_INPUT_LABEL": "Select Input",
+  "=========== PROPERTIES ASSIGNMENT TOSCA FUNCTION BUTTON ===========": "",
+  "TOSCA_FUNCTION_LABEL": "TOSCA function",
   "DESELECT_INPUT_LABEL": "Deselect Input",
+  "INPUT_DROPDOWN_LABEL": "Input",
   "=========== AUTOMATED UPGRADE ===========": "",
   "RESOURCE_UPGRADE_TITLE": "Upgrade Services",
   "SERVICE_UPGRADE_TITLE": "Update Service References",