Provide input name suggestion

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

4 files changed, 49 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
index 19b23598fa..e5793d5d7a 100644
--- 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
@@ -18,5 +18,5 @@
   -->
 
 <div class="declare-input">
-  <input id="myText" type="text" (keyup)="setInputName($event)"/>
+  <input id="myText" type="text" value={{defaultInputName}} (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
index c3fa1f506f..96bf9ad2da 100644
--- 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
@@ -19,25 +19,33 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DeclareInputComponent } from './declare-input.component';
+import {ModalService} from "../../../services/modal.service";
+import {DynamicComponentService} from "../../../services/dynamic-component.service";
 
 describe('DeclareInputComponent', () => {
   let component: DeclareInputComponent;
   let fixture: ComponentFixture<DeclareInputComponent>;
+  let modalService: ModalService;
+  let dynamicComponentService: DynamicComponentService;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DeclareInputComponent ]
+      declarations: [ DeclareInputComponent ],
+      providers: [ ModalService, DynamicComponentService]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DeclareInputComponent);
+    modalService = TestBed.get(ModalService);
+    dynamicComponentService = TestBed.get(DynamicComponentService);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
+    expect(modalService).toBeTruthy();
+    expect(dynamicComponentService).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
index d156383f6b..f5acfa400b 100644
--- 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
@@ -16,8 +16,9 @@
  *  SPDX-License-Identifier: Apache-2.0
  *  ============LICENSE_END=========================================================
  */
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {FormControl, FormGroup} from "@angular/forms";
+import {ModalService} from "../../../services/modal.service";
 
 @Component({
   selector: 'declare-input',
@@ -29,9 +30,16 @@ export class DeclareInputComponent implements OnInit {
     'inputName': this.inputNameForm,
   });
   inputName: string;
-  constructor() { }
+  defaultInputName: string;
+
+  constructor(private modalService: ModalService) {
+  }
+
   ngOnInit() {
+    this.defaultInputName = this.modalService.currentModal.instance.dynamicContent.instance.input.defaultInputName;
+    this.inputNameForm.setValue(this.defaultInputName);
   }
+
   setInputName(event) {
     this.inputName = event.target.value;
     this.inputNameForm.setValue(this.inputName);
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 2592227afa..f1404d37f9 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
@@ -124,6 +124,7 @@ export class PropertiesAssignmentComponent {
     serviceBeCapabilitiesPropertiesMap: InstanceBePropertiesMap;
     selectedInstance_FlattenCapabilitiesList: Capability[];
     componentInstancePropertyMap : PropertiesGroup;
+    defaultInputName: string;
 
     @ViewChild('hierarchyNavTabs') hierarchyNavTabs: Tabs;
     @ViewChild('propertyInputTabs') propertyInputTabs: Tabs;
@@ -805,6 +806,32 @@ export class PropertiesAssignmentComponent {
             }, error => {}); //ignore error
     };
 
+    generateDefaultInputName = (): string => {
+        let defaultInputName: string;
+        let instancesIds = this.keysPipe.transform(this.instanceFePropertiesMap, []);
+        angular.forEach(instancesIds, (instanceId: string) => {
+            let selectedProperty: PropertyBEModel = new PropertyBEModel(this.propertiesService.getCheckedProperties(this.instanceFePropertiesMap[instanceId])[0]);
+            let selectedInstanceData: any = this.instances.find(instance => instance.uniqueId == instanceId);
+            defaultInputName = this.generateInputName(selectedInstanceData.invariantName, selectedProperty.name);
+        });
+        return defaultInputName;
+    }
+
+    private generateInputName = (componentName: string, propertyName: string): string => {
+        let inputName: string;
+        if (propertyName) {
+            if (propertyName.includes("::")) {
+                propertyName = propertyName.replace("::", "_");
+            }
+            if (componentName) {
+                inputName = componentName + "_" + propertyName;
+            } else {
+                inputName = propertyName;
+            }
+        }
+        return inputName;
+    }
+
     private openAddInputNameAndDeclareInputModal = (): void => {
         const modalTitle = this.translateService.translate('ADD_INPUT_NAME_TO_DECLARE');
         const modalButtons = [];
@@ -832,7 +859,7 @@ export class PropertiesAssignmentComponent {
         modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CANCEL'), 'outline grey', () => {
             this.modalService.closeCurrentModal();
         }));
-        this.modalService.addDynamicContentToModal(modal, DeclareInputComponent, {});
+        this.modalService.addDynamicContentToModal(modal, DeclareInputComponent, {defaultInputName: this.generateDefaultInputName()});
         modal.instance.open();
     }