Provide input name when declaring service property as input

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

13 files changed, 198 insertions, 8 deletions

diff --git a/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts b/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
index c2ea1ecbdf..7ca1fee21d 100644
--- a/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
+++ b/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
@@ -45,7 +45,8 @@ export class DerivedFEProperty extends PropertyBEModel {
     canBeDeclared: boolean;
     mapKey: string;
     mapKeyError: string;
-    mapInlist: boolean;
+    mapInlist: boolean
+    inputName: string;
     parentMapKey: string;
 
     constructor(property: PropertyBEModel, parentName?: string, createChildOfListOrMap?: boolean, key?:string, value?:any) {
@@ -69,7 +70,7 @@ export class DerivedFEProperty extends PropertyBEModel {
             this.parentName = parentName;
             this.propertiesName = parentName + '#' + this.name;
             
-            if (property.type == PROPERTY_TYPES.LIST) { 
+            if (property.type == PROPERTY_TYPES.LIST) {
                 let parentKey : string = null;
                 if(property.value != null) {
                     const valueJson = JSON.parse(property.value);
@@ -128,6 +129,7 @@ export class DerivedFEProperty extends PropertyBEModel {
         // this.constraints = property ? property.constraints : null;
         this.valueObjIsValid = true;
         this.derivedDataType = this.getDerivedPropertyType();
+        this.inputName = property.inputName;
     }
 
     public getActualMapKey() {
diff --git a/catalog-ui/src/app/models/properties-inputs/property-be-model.ts b/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
index ae72977b80..e4c0f8165c 100644
--- a/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
+++ b/catalog-ui/src/app/models/properties-inputs/property-be-model.ts
@@ -69,6 +69,7 @@ export class PropertyBEModel {
     parentPropertyType: string;
     subPropertyInputPath: string;
     inputPath: string;
+    inputName: string;
     toscaPresentation: ToscaPresentationData;
     metadata: Metadata;
     propertyConstraints: any;
@@ -103,6 +104,7 @@ export class PropertyBEModel {
             this.toscaPresentation = property.toscaPresentation;
             this.getPolicyValues = property.getPolicyValues;
             this.inputPath = property.inputPath;
+            this.inputName = property.inputName;
             this.metadata = property.metadata;
             if (property.toscaFunction) {
                 this.toscaFunction = property.toscaFunction;
diff --git a/catalog-ui/src/app/models/properties-inputs/property-declare-api-model.ts b/catalog-ui/src/app/models/properties-inputs/property-declare-api-model.ts
index 5b1c12091b..84970ad0f9 100644
--- a/catalog-ui/src/app/models/properties-inputs/property-declare-api-model.ts
+++ b/catalog-ui/src/app/models/properties-inputs/property-declare-api-model.ts
@@ -25,6 +25,7 @@ import { PropertyBEModel, PropertyFEModel, DerivedFEProperty } from "../../model
 export class PropertyDeclareAPIModel extends PropertyBEModel{
     input: PropertyBEModel;
     propertiesName: string;
+    inputName: string;
 
 
     constructor(property: PropertyFEModel, childProperty?: DerivedFEProperty) {
@@ -32,6 +33,7 @@ export class PropertyDeclareAPIModel extends PropertyBEModel{
         if (childProperty) {
             this.input = childProperty;
             this.propertiesName = childProperty.propertiesName;
+            this.inputName = childProperty.inputName;
         }
     }
 
diff --git a/catalog-ui/src/app/modules/directive-module.ts b/catalog-ui/src/app/modules/directive-module.ts
index adc88cbc6d..40e701aa35 100644
--- a/catalog-ui/src/app/modules/directive-module.ts
+++ b/catalog-ui/src/app/modules/directive-module.ts
@@ -99,6 +99,7 @@ import {ToscaFunctionComponent} from '../ng2/pages/properties-assignment/tosca-f
 import {ConstraintsComponent} from '../ng2/pages/properties-assignment/constraints/constraints.component';
 import {TypeWorkspaceComponent} from "../ng2/pages/type-workspace/type-workspace.component";
 import {TypeWorkspaceGeneralComponent} from "../ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component";
+import {DeclareInputComponent} from "../ng2/pages/properties-assignment/declare-input/declare-input.component";
 
 let moduleName: string = 'Sdc.Directives';
 let directiveModule: ng.IModule = angular.module(moduleName, []);
@@ -342,3 +343,9 @@ directiveModule.directive('appTypeWorkspaceGeneral', downgradeComponent({
   inputs: [],
   outputs: []
 }) as angular.IDirectiveFactory);
+
+directiveModule.directive('declareInput', downgradeComponent({
+  component: DeclareInputComponent,
+  inputs: ['property'],
+  outputs: []
+}) as angular.IDirectiveFactory);
diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts
index 1e23bb6c4e..0c5b10f1e4 100644
--- a/catalog-ui/src/app/ng2/app.module.ts
+++ b/catalog-ui/src/app/ng2/app.module.ts
@@ -110,6 +110,7 @@ import {ModelService} from "./services/model.service";
 import {ToscaArtifactService} from "./services/tosca-artifact.service";
 import {InterfaceDefinitionModule} from "./pages/interface-definition/interface-definition.module";
 import {TypeWorkspaceModule} from "./pages/type-workspace/type-workspace.module";
+import {DeclareInputModule} from "./pages/properties-assignment/declare-input/declare-input.module";
 
 declare const __ENV__: string;
 
@@ -158,6 +159,7 @@ export function configServiceFactory(config: ConfigService, authService: Authent
     PropertiesAssignmentModule,
     AttributesOutputsModule,
     PropertyCreatorModule,
+    DeclareInputModule,
     DeclareListModule,
     ToscaFunctionModule,
     ConstraintsModule,
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/declare-input/declare-input.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-input/declare-input.component.html
new file mode 100644
index 0000000000..19b23598fa
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-input/declare-input.component.html
@@ -0,0 +1,22 @@
+<!--
+  ~ ============LICENSE_START=======================================================
+  ~  Copyright (C) 2023 Nordix Foundation
+  ~  ================================================================================
+  ~  Licensed under the Apache License, Version 2.0 (the "License");
+  ~  you may not use this file except in compliance with the License.
+  ~  You may obtain a copy of the License at
+  ~
+  ~        http://www.apache.org/licenses/LICENSE-2.0
+  ~  Unless required by applicable law or agreed to in writing, software
+  ~  distributed under the License is distributed on an "AS IS" BASIS,
+  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~  See the License for the specific language governing permissions and
+  ~  limitations under the License.
+  ~
+  ~  SPDX-License-Identifier: Apache-2.0
+  ~  ============LICENSE_END=========================================================
+  -->
+
+<div class="declare-input">
+  <input id="myText" type="text" (keyup)="setInputName($event)"/>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/declare-input/declare-input.component.spec.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-input/declare-input.component.spec.ts
new file mode 100644
index 0000000000..c3fa1f506f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-input/declare-input.component.spec.ts
@@ -0,0 +1,43 @@
+/*
+ * ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 Nordix Foundation
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeclareInputComponent } from './declare-input.component';
+
+describe('DeclareInputComponent', () => {
+  let component: DeclareInputComponent;
+  let fixture: ComponentFixture<DeclareInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeclareInputComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeclareInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/declare-input/declare-input.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-input/declare-input.component.ts
new file mode 100644
index 0000000000..d156383f6b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-input/declare-input.component.ts
@@ -0,0 +1,40 @@
+/*
+ * ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 Nordix Foundation
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+import {Component, Input, OnInit} from '@angular/core';
+import {FormControl, FormGroup} from "@angular/forms";
+
+@Component({
+  selector: 'declare-input',
+  templateUrl: './declare-input.component.html'
+})
+export class DeclareInputComponent implements OnInit {
+  inputNameForm: FormControl = new FormControl(undefined);
+  formGroup: FormGroup = new FormGroup({
+    'inputName': this.inputNameForm,
+  });
+  inputName: string;
+  constructor() { }
+  ngOnInit() {
+  }
+  setInputName(event) {
+    this.inputName = event.target.value;
+    this.inputNameForm.setValue(this.inputName);
+  }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/declare-input/declare-input.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-input/declare-input.module.ts
new file mode 100644
index 0000000000..0dae0a2421
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/declare-input/declare-input.module.ts
@@ -0,0 +1,36 @@
+/*
+ * ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 Nordix Foundation
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {DeclareInputComponent} from "./declare-input.component";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule
+    ],
+    declarations: [DeclareInputComponent],
+    exports: [DeclareInputComponent],
+    entryComponents: [
+        DeclareInputComponent
+    ],
+})
+
+export class DeclareInputModule { }
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 1eed6dfba1..36d316ee5d 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
@@ -78,12 +78,12 @@
                     <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)="selectToscaFunctionAndValues()"
+                <button (click)="openToscaGetFunctionModal()"
                         *ngIf="isPropertiesTabSelected && !isSelf()"
                         [disabled]="(checkedPropertiesCount != 1 || isReadonly || hasChangedData) && !enableToscaFunction"
                         class="tlv-btn blue declare-button"
                         data-tests-id="declare-button select-tosca-function">{{'TOSCA_FUNCTION_LABEL' | translate}}</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" (click)="openAddInputNameAndDeclareInputModal()" 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>
             </div>
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 a1e4f415be..2592227afa 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
@@ -70,6 +70,7 @@ import {Observable} from "rxjs";
 import {TranslateService} from "../../shared/translator/translate.service";
 import {ToscaFunction} from "../../../models/tosca-function";
 import {SubPropertyToscaFunction} from "../../../models/sub-property-tosca-function";
+import {DeclareInputComponent} from "./declare-input/declare-input.component";
 
 const SERVICE_SELF_TITLE = "SELF";
 @Component({
@@ -728,7 +729,7 @@ export class PropertiesAssignmentComponent {
     }
 
     /*** DECLARE PROPERTIES/INPUTS ***/
-    declareProperties = (): void => {
+    declareInputFromProperties = (inputName:string): void => {
         console.debug("==>" + this.constructor.name + ": declareProperties");
 
         let selectedComponentInstancesProperties: InstanceBePropertiesMap = new InstanceBePropertiesMap();
@@ -743,6 +744,9 @@ export class PropertiesAssignmentComponent {
                 if (!this.isInput(selectedInstanceData.originType)) {
                     // convert Property FE model -> Property BE model, extract only checked
                     selectedComponentInstancesProperties[instanceId] = this.propertiesService.getCheckedProperties(this.instanceFePropertiesMap[instanceId]);
+                    if (inputName) {
+                        selectedComponentInstancesProperties[instanceId][0].inputName = inputName;
+                    }
                 } else {
                     selectedComponentInstancesInputs[instanceId] = this.propertiesService.getCheckedProperties(this.instanceFePropertiesMap[instanceId]);
                 }
@@ -801,6 +805,37 @@ export class PropertiesAssignmentComponent {
             }, error => {}); //ignore error
     };
 
+    private openAddInputNameAndDeclareInputModal = (): void => {
+        const modalTitle = this.translateService.translate('ADD_INPUT_NAME_TO_DECLARE');
+        const modalButtons = [];
+        const modal = this.modalService.createCustomModal(new ModalModel(
+            'sm',
+            modalTitle,
+            null,
+            modalButtons,
+            null /* type */
+        ));
+        modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_SAVE'), 'blue',
+            () => {
+                const inputName: string = modal.instance.dynamicContent.instance.inputNameForm.value;
+                if (inputName) {
+                    this.declareInputFromProperties(inputName);
+                } else {
+                    this.notification.warning({
+                        message: 'Failed to set input name',
+                        title: 'Warning'
+                    });
+                }
+                this.modalService.closeCurrentModal();
+            }
+        ));
+        modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CANCEL'), 'outline grey', () => {
+            this.modalService.closeCurrentModal();
+        }));
+        this.modalService.addDynamicContentToModal(modal, DeclareInputComponent, {});
+        modal.instance.open();
+    }
+
     declareListProperties = (): void => {
         // get selected properties
         let selectedComponentInstancesProperties: InstanceBePropertiesMap = new InstanceBePropertiesMap();
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
index 0b984ac2a4..bc5345c386 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts
@@ -65,9 +65,6 @@ export class PropertiesUtils {
                     newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children
                     this.dataTypeService.checkForCustomBehavior(newFEProp);
 
-                    if (newFEProp.isToscaFunction()) {
-                        return;
-                    }
                     //if this prop (or any children) are declared, set isDeclared and disable checkbox on parents/children
                     if (newFEProp.getInputValues && newFEProp.getInputValues.length) {
                         newFEProp.getInputValues.forEach(propInputDetail => {
diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json
index 58288840d6..18813280d6 100644
--- a/catalog-ui/src/assets/languages/en_US.json
+++ b/catalog-ui/src/assets/languages/en_US.json
@@ -518,6 +518,8 @@
   "=========== PROPERTIES ASSIGNMENT DECLARE AS POLICY ===========": "",
   "DELETE_POLICY_TITLE": "Delete Policy",
   "DELETE_POLICY_MSG": "Are you sure you want to delete policy '{{policyName}}'?",
+  "=========== PROPERTIES ASSIGNMENT DECLARE AS INPUT ===========": "",
+  "ADD_INPUT_NAME_TO_DECLARE": "Enter name of input to be created",
   "=========== PROPERTIES ASSIGNMENT TOSCA FUNCTION BUTTON ===========": "",
   "TOSCA_FUNCTION_LABEL": "TOSCA function",
   "TOSCA_FUNCTION_PROPERTY_SOURCE_LABEL": "Property Source",