Provide input name when declaring service property as input

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

7 files changed, 179 insertions, 6 deletions

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 => {