Interface bug fixes

1. Editing operation, property value now shows
2. Existing interface/operation combos are now disabled in operation
name dropdown
3. Adding value for Local interface name now updates validation

Change-Id: I66497c12903fb47325236c09d3b2d6b248e79da7
Issue-ID: SDC-2052
Signed-off-by: Arielk <Ariel.Kenan@amdocs.com>

5 files changed, 55 insertions, 26 deletions

diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
index e9b2001de1..70a0e958bb 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
@@ -240,6 +240,7 @@ export class InterfaceOperationComponent {
 
         const input: OperationCreatorInput = {
             inputOperation: operation,
+            interfaces: this.interfaces,
             inputProperties: this.inputs,
             enableWorkflowAssociation: this.enableWorkflowAssociation,
             readonly: this.readonly,
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
index 81a33c4c8a..4acf424993 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
@@ -49,7 +49,8 @@
                 <sdc-input
                     label="{{ 'OPERATION_NAME' | translate }}"
                     [(value)]="operation.name"
-                    testId="operationName">
+                    testId="operationName"
+                    (valueChange)="onChangeName()">
                 </sdc-input>
             </div>
 
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
index e1b2b4e079..7f31e99b93 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
@@ -5,7 +5,7 @@ import {Subscription} from "rxjs/Subscription";
 
 import {TranslateService} from "app/ng2/shared/translator/translate.service";
 import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service';
-import {OperationModel, OperationParameter, InputBEModel, RadioButtonModel, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/models';
+import {InterfaceModel, OperationModel, OperationParameter, InputBEModel, RadioButtonModel, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/models';
 
 import {IDropDownOption} from "sdc-ui/lib/angular/form-elements/dropdown/dropdown-models";
 import {Tabs, Tab} from "app/ng2/components/ui/tabs/tabs.component";
@@ -32,6 +32,7 @@ class TypedDropDownOption extends DropDownOption {
 
 export interface OperationCreatorInput {
     inputOperation: OperationModel,
+    interfaces: Array<InterfaceModel>,
     inputProperties: Array<InputBEModel>,
     enableWorkflowAssociation: boolean,
     readonly: boolean,
@@ -51,10 +52,11 @@ export class OperationCreatorComponent {
 
     input: OperationCreatorInput;
     inputOperation: OperationModel;
+    interfaces: Array<InterfaceModel>;
     operation: OperationModel;
     interfaceNames: Array<TypedDropDownOption> = [];
     interfaceTypes: { [interfaceType: string]: Array<string> };
-    operationNames: Array<DropDownOption> = [];
+    operationNames: Array<TypedDropDownOption> = [];
     validityChangedCallback: Function;
 
     workflows: Array<DropdownValue> = [];
@@ -215,13 +217,23 @@ export class OperationCreatorComponent {
 
     onSelectInterface(interf: IDropDownOption) {
         if (interf && this.operation.interfaceType !== interf.value) {
-            this.operation.name = undefined;
+            this.operation.name = null;
         }
         this.operation.interfaceType = interf && interf.value;
         this.operationNames = !this.operation.interfaceType ? [] : (
             _.map(
                 this.interfaceTypes[this.operation.interfaceType],
-                name => new DropDownOption(name)
+                name => {
+                    const existingOp = _.find(
+                        _.find(
+                            this.interfaces,
+                            interf => interf.type === this.operation.interfaceType
+                        ).operations,
+                        op => op.name === name
+                    );
+                    const ddType = (existingOp && existingOp.uniqueId !== this.operation.uniqueId) ? 2 : 0;
+                    return new TypedDropDownOption(name, name, ddType);
+                }
             )
         );
         this.validityChanged();
@@ -230,8 +242,12 @@ export class OperationCreatorComponent {
     onSelectOperationName(name: IDropDownOption) {
         if (name) {
             this.operation.name = name.value;
-            this.validityChanged();
         }
+        this.validityChanged();
+    }
+
+    onChangeName() {
+        this.validityChanged();
     }
 
     get descriptionValue() {
@@ -401,6 +417,7 @@ export class OperationCreatorComponent {
     onRemoveParam = (param: OperationParameter): void => {
         let index = _.indexOf(this.tableParameters, param);
         this.tableParameters.splice(index, 1);
+        this.validityChanged();
     }
 
     createParamLists = () => {
@@ -415,7 +432,7 @@ export class OperationCreatorComponent {
 
     shouldCreateWF = (operation?: OperationModel): boolean => {
         operation = operation || this.operation;
-        return this.operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW;
+        return operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW;
     }
 
     checkFormValidForSubmit = (): boolean => {
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
index 1128d60e04..18142c982b 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
@@ -38,14 +38,14 @@
 </div>
 
 <div class="cell field-property" *ngIf="isInputParam">
-    <ui-element-dropdown
-        *ngIf="filteredInputProps.length || !isAssociateWorkflow"
-        data-tests-id="paramProperty"
-        [values]="filteredInputProps"
-        value="paramId"
-        (valueChange)="onChangeProperty($event)"
-        [readonly]="readonly">
-    </ui-element-dropdown>
+  <ui-element-dropdown
+      *ngIf="filteredInputProps.length || !isAssociateWorkflow"
+      data-tests-id="paramProperty"
+      [values]="filteredInputProps"
+      [(value)]="param.inputId"
+      (valueChange)="onChangeProperty($event)"
+      [readonly]="readonly">
+  </ui-element-dropdown>
     <span
         *ngIf="!filteredInputProps.length && isAssociateWorkflow"
         class="no-properties-error">
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
index 8837a17bd9..89aa251252 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
@@ -19,8 +19,7 @@ export class ParamRowComponent {
     @Input() isInputParam: boolean;
     @Input() validityChanged: Function;
 
-    paramId: string;
-    propTypeEnum: Array<DropDownOption> = [];
+    propTypeEnum: Array<string> = [];
     filteredInputProps: Array<DropdownValue> = [];
 
     constructor(private dataTypeService: DataTypeService) {}
@@ -29,7 +28,7 @@ export class ParamRowComponent {
         this.propTypeEnum = _.uniq(
             _.map(
                 this.getPrimitiveSubtypes(),
-                prop => new DropDownOption(prop.type)
+                prop => prop.type
             )
         );
         this.onChangeType();
@@ -40,7 +39,7 @@ export class ParamRowComponent {
         this.validityChanged();
     }
 
-    onChangeType(paramId?: string) {
+    onChangeType() {
         this.filteredInputProps = _.map(
             _.filter(
                 this.getPrimitiveSubtypes(),
@@ -48,13 +47,24 @@ export class ParamRowComponent {
             ),
             prop => new DropdownValue(prop.uniqueId, prop.name)
         );
-        if (paramId) {
-            this.paramId = paramId;
+
+        if (this.param.inputId) {
+            const selProp = _.find(
+                this.getPrimitiveSubtypes(),
+                prop => prop.uniqueId === this.param.inputId
+            );
+            if (selProp && selProp.type === this.param.type) {
+                this.param.inputId = '-1';
+                setTimeout(() => this.param.inputId = selProp.uniqueId, 100);
+            } else {
+                this.param.inputId = null;
+            }
         }
+
+        this.validityChanged();
     }
 
-    onChangeProperty(paramId: string) {
-        this.param.inputId = paramId;
+    onChangeProperty() {
         const newProp = _.find(
             this.getPrimitiveSubtypes(),
             prop => this.param.inputId === prop.uniqueId
@@ -62,20 +72,20 @@ export class ParamRowComponent {
 
         if (!this.param.type) {
             this.param.type = newProp.type;
-            this.onChangeType(paramId);
-        } else {
-            this.paramId = paramId;
+            this.onChangeType();
         }
 
         if (!this.param.name) {
             this.param.name = newProp.name;
         }
+
         this.validityChanged();
     }
 
     getPrimitiveSubtypes(): Array<InputBEModel> {
         const flattenedProps: Array<any> = [];
         const dataTypes = this.dataTypeService.getAllDataTypes();
+
         _.forEach(this.inputProps, prop => {
             const type = _.find(
                 _.toArray(dataTypes),