Provide user to specify the ouput name while declaring the atrributes

User specified output name is provided on declare output functionality

Issue-ID: SDC-4616
Signed-off-by: Imam hussain <imam.hussain@est.tech>
Change-Id: Ic0cd50f9dde2482f5fbb2363cdc83d8fcf09f48f

2 files changed, 61 insertions, 3 deletions

diff --git a/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.html b/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.html
index e4f672ce9b..e55fc47007 100644
--- a/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.html
@@ -57,7 +57,7 @@
           </div>
         </tabs>
         <div class="header">
-          <button class="tlv-btn blue declare-button" [disabled]="!checkedAttributesCount || isReadonly || hasChangedData" (click)="declareAttributes()" data-tests-id="declare-button declare-output">Declare Output</button>
+          <button class="tlv-btn blue declare-button" [disabled]="!checkedAttributesCount || isReadonly || hasChangedData" (click)="declareOutput()" data-tests-id="declare-button declare-output">Declare Output</button>
         </div>
       </div>
     </div>
diff --git a/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.ts b/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.ts
index 85d2756da8..48700f2ecb 100644
--- a/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.ts
@@ -60,6 +60,7 @@ import {DerivedFEAttribute} from "../../../models/attributes-outputs/derived-fe-
 import {AttributeBEModel} from "../../../models/attributes-outputs/attribute-be-model";
 import {AttributeCreatorComponent} from "app/ng2/pages/attributes-outputs/attribute-creator/attribute-creator.component";
 import {AttributeRowSelectedEvent} from "app/ng2/components/logic/attributes-table/attributes-table.component";
+import { DeclareInputComponent } from '../properties-assignment/declare-input/declare-input.component';
 
 const SERVICE_SELF_TITLE = "SELF";
 
@@ -432,9 +433,62 @@ export class AttributesOutputsComponent {
     this.searchQuery = '';
   };
 
+  declareOutput = (): void => {
+    if (this.checkedAttributesCount == 1) {
+        this.openAddOutputNameModal();
+    } else if (this.checkedAttributesCount > 1) {
+        this.declareAttributes();
+    }
+  }
+
+  private openAddOutputNameModal = (): void => {
+    const modalTitle = 'Enter name of the ouput to be created';
+    const modalButtons = [];
+    const modal = this.ModalService.createCustomModal(new ModalModel(
+        'sm',
+        modalTitle,
+        null,
+        modalButtons,
+        null /* type */
+    ));
+    modalButtons.push(new ButtonModel('Save', 'blue',
+        () => {
+            const outputName: string = modal.instance.dynamicContent.instance.inputNameForm.value;
+            if (outputName) {
+                this.declareAttributes(outputName);
+            } else {
+                this.Notification.warning({
+                    message: 'Failed to set input name',
+                    title: 'Warning'
+                });
+            }
+            this.ModalService.closeCurrentModal();
+        }
+    ));
+    modalButtons.push(new ButtonModel('Cancel', 'outline grey', () => {
+        this.ModalService.closeCurrentModal();
+    }));
+    this.ModalService.addDynamicContentToModal(modal, DeclareInputComponent, {defaultInputName: this.generateDefaultOutputName()});
+    modal.instance.open();
+  }
+
+  generateDefaultOutputName = (): string => {
+    let defaultInputName: string;
+    let instancesIds = this.keysPipe.transform(this.instanceFeAttributesMap, []);
+    angular.forEach(instancesIds, (instanceId: string) => {
+      const selectedOutput : AttributeBEModel = this.attributesService.getCheckedAttributes(this.instanceFeAttributesMap[instanceId])[0];
+        let selectedInstanceData: any = this.instances.find(instance => instance.uniqueId == instanceId);
+        defaultInputName = selectedOutput.name;
+        if (selectedInstanceData.invariantName) {
+          defaultInputName = selectedInstanceData.invariantName+'_'+selectedOutput.name;
+        }
+    });
+    return defaultInputName;
+  }
 
   /*** DECLARE ATTRIBUTES/OUTPUTS ***/
-  declareAttributes = (): void => {
+  declareAttributes = (outputName?: string): void => {
+    this.loadingAttributes = true;
     let selectedComponentInstancesAttributes: InstanceBeAttributesMap = new InstanceBeAttributesMap();
     let selectedComponentInstancesOutputs: InstanceBeAttributesMap = new InstanceBeAttributesMap();
     let instancesIds = this.keysPipe.transform(this.instanceFeAttributesMap, []);
@@ -445,6 +499,9 @@ export class AttributesOutputsComponent {
         if (!this.isOutput(selectedInstanceData.originType)) {
           // convert Attribute FE model -> Attribute BE model, extract only checked
           selectedComponentInstancesAttributes[instanceId] = this.attributesService.getCheckedAttributes(this.instanceFeAttributesMap[instanceId]);
+          if (outputName) {
+            selectedComponentInstancesAttributes[instanceId][0].outputName = outputName;
+          }
         } else {
           selectedComponentInstancesOutputs[instanceId] = this.attributesService.getCheckedAttributes(this.instanceFeAttributesMap[instanceId]);
         }
@@ -463,7 +520,8 @@ export class AttributesOutputsComponent {
         this.outputs.push(newOutput);
         this.updateAttributeValueAfterDeclare(newOutput);
       });
-    });
+      this.loadingAttributes = false;
+    }, error => {this.loadingAttributes = false;}); //ignore error
   };
 
   saveChangedData = (): Promise<(AttributeBEModel | OutputBEModel)[]> => {