Interface operation screen enhancements

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

7 files changed, 354 insertions, 120 deletions

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 441875b2a9..81a33c4c8a 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
@@ -20,66 +20,92 @@
     <form class="w-sdc-form">
 
         <div class="side-by-side">
-            <div class="i-sdc-form-item">
-                <label class="i-sdc-form-label" [ngClass]="{'required': !isEditMode}">{{ 'OPERATION_NAME' | translate }}</label>
-                <input
-                    type="text"
-                    name="type"
-                    data-tests-id="operationType"
-                    [(ngModel)]="operation.operationType"
-                    [attr.maxLength]="200"
-                    [ngClass]="{'disabled':isEditMode}" />
+            <div class="form-item">
+                <sdc-dropdown
+                    label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
+                    [required]="true"
+                    testId="interface-name"
+                    selectedOption="{{operation.interfaceType}}"
+                    placeHolder="Select..."
+                    [disabled]="readonly"
+                    (changed)="onSelectInterface($event)"
+                    [options]="interfaceNames">
+                </sdc-dropdown>
             </div>
 
-            <div class="i-sdc-form-item">
-                <label class="i-sdc-form-label">{{ 'OPERATION_DESCRIPTION' | translate }}</label>
-                <input
-                    type="text"
-                    data-tests-id="operationDescription"
-                    name="description"
-                    [ngClass]="{'disabled': readonly}"
-                    [(ngModel)]="operation.description"
-                    [attr.maxLength]="200" />
+            <div class="form-item" *ngIf="!isInterfaceOther()">
+                <sdc-dropdown
+                    label="{{ 'OPERATION_NAME' | translate }}"
+                    [required]="true"
+                    testId="operation-name"
+                    selectedOption="{{operation.name}}"
+                    placeHolder="Select..."
+                    [disabled]="readonly"
+                    (changed)="onSelectOperationName($event)"
+                    [options]="operationNames">
+                </sdc-dropdown>
             </div>
+            <div class="form-item" *ngIf="isInterfaceOther()">
+                <sdc-input
+                    label="{{ 'OPERATION_NAME' | translate }}"
+                    [(value)]="operation.name"
+                    testId="operationName">
+                </sdc-input>
+            </div>
+
         </div>
 
-        <div class="side-by-side association-options">
-            <div class="i-sdc-form-item" *ngIf="enableWorkflowAssociation">
-                <label class="i-sdc-form-label">{{ 'OPERATION_WORKFLOW_ASSIGNMENT' | translate }}</label>
-                <ui-element-dropdown
-                    data-tests-id="association-type"
-                    [(value)]="operation.workflowAssociationType"
-                    [values]="associationOptions"
-                    (valueChange)="toggleAssociateWorkflow()"
-                    [readonly]="readonly">
-                </ui-element-dropdown>
-            </div>
-            <div></div>
+        <div class="i-sdc-form-item sdc-input">
+            <span class="sdc-input__label">{{ 'OPERATION_DESCRIPTION' | translate }}</span>
+            <textarea
+                data-tests-id="operationDescription"
+                rows="2"
+                name="description"
+                [(ngModel)]="descriptionValue"
+                [ngClass]="{'disabled': readonly}">
+            </textarea>
         </div>
 
-        <div class="side-by-side" *ngIf="isUsingExistingWF()">
-            <div class="i-sdc-form-item">
-                <label class="i-sdc-form-label required">{{ 'OPERATION_WORKFLOW' | translate }}
+        <div class="side-by-side" *ngIf="enableWorkflowAssociation">
+            <div class="form-item">
+                <sdc-dropdown
+                    label="{{ 'OPERATION_WORKFLOW_ASSIGNMENT' | translate }}"
+                    placeHolder="Select..."
+                    testId="association-type"
+                    selectedOption="{{workflowAssociationType}}"
+                    [options]="associationOptions"
+                    (changed)="toggleAssociateWorkflow($event)"
+                    [disabled]="readonly">
+                </sdc-dropdown>
+            </div>
+
+            <div class="form-item" *ngIf="!isUsingExistingWF()"></div>
+
+            <div class="form-item sdc-input" *ngIf="isUsingExistingWF()">
+                <label class="sdc-input__label required">{{ 'OPERATION_WORKFLOW' | translate }}
                     <span class="archive-warning" *ngIf="archivedWorkflowId === operation.workflowId">({{ 'OPERATION_WORKFLOW_ARCHIVED' | translate }})</span>
+                    <span class="no-workflow-warning" *ngIf="!workflows.length">{{ 'OPERATION_NO_WORKFLOW_ERROR' | translate }}</span>
                 </label>
-                <ui-element-dropdown
-                    data-tests-id="associated-workflow"
-                    [readonly]="readonly"
-                    [values]="workflows"
-                    [(value)]="operation.workflowId"
-                    (valueChange)="onSelectWorkflow()">
-                </ui-element-dropdown>
+                <sdc-dropdown
+                    placeHolder="Select..."
+                    testId="associated-workflow"
+                    selectedOption="{{operation.workflowId}}"
+                    [options]="workflows"
+                    (changed)="onSelectWorkflow($event)"
+                    [disabled]="readonly || !workflows.length">
+                </sdc-dropdown>
             </div>
 
-            <div class="i-sdc-form-item">
-                <label class="i-sdc-form-label required">{{ 'OPERATION_WORKFLOW_VERSION' | translate }}</label>
-                <ui-element-dropdown
-                    data-tests-id="associated-workflow-version"
-                    [readonly]="!operation.workflowId || archivedWorkflowId === operation.workflowId || readonly"
-                    [values]="workflowVersions"
-                    [(value)]="operation.workflowVersionId"
-                    (valueChange)="changeWorkflowVersion()">
-                </ui-element-dropdown>
+            <div class="form-item sdc-input" *ngIf="isUsingExistingWF()">
+                <sdc-dropdown
+                    *ngIf="workflows.length"
+                    label="{{ 'OPERATION_WORKFLOW_VERSION' | translate }}"
+                    testId="associated-workflow-version"
+                    selectedOption="{{operation.workflowVersionId}}"
+                    [options]="workflowVersions"
+                    (changed)="changeWorkflowVersion($event)"
+                    [disabled]="!operation.workflowId || archivedWorkflowId === operation.workflowId || readonly">
+                </sdc-dropdown>
             </div>
         </div>
 
@@ -93,7 +119,7 @@
                 *ngIf="!isUsingExistingWF() && !readonly"
                 data-tests-id="addInputParameter"
                 [ngClass]="{'disabled':!canAdd()}"
-                (click)="addParam()">{{ 'OPERATION_ADD_PARAMS' | translate }}</a>
+                (click)="addParam()">{{ currentTab === TYPE_INPUT ? 'Add Input' : 'Add Output' }}</a>
         </div>
 
         <div class="generic-table">
@@ -120,7 +146,6 @@
                         <span class="bold-message">{{ 'EMPTY_PARAM_TABLE_NO_SELECTED_WORKFLOW_1' | translate }}</span>
                         <span>{{ 'EMPTY_PARAM_TABLE_NO_SELECTED_WORKFLOW_2' | translate }}</span>
                     </div>
-                    <div *ngIf="!workflows.length" [innerHTML]="'EMPTY_PARAM_TABLE_NO_WORKFLOWS' | translate"></div>
                 </div>
             </div>
 
@@ -132,7 +157,8 @@
                 [param]="param"
                 [inputProps]="inputProperties"
                 [onRemoveParam]="onRemoveParam"
-                [readonly]="readonly">
+                [readonly]="readonly"
+                [validityChanged]="validityChanged">
             </param-row>
         </div>
 
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
index 10976ef473..1d65d98b9c 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
@@ -1,4 +1,5 @@
 @import '../../../../../assets/styles/variables.less';
+@import '../../../../../assets/styles/override.less';
 
 .operation-creator {
     font-family: @font-opensans-regular;
@@ -10,32 +11,66 @@
         font-size: 12px;
     }
 
-    .w-sdc-form .i-sdc-form-item {
+    .w-sdc-form .form-item {
         margin-bottom: 15px;
     }
 
-    .side-by-side {
-        display: flex;
+    textarea {
+        min-height: 74px;
+        margin-bottom: 18px;
+    }
+
+    /deep/ .sdc-dropdown__component-container {
+        .sdc-dropdown__header {
+            height: 38px;
+            line-height: 35px;
+
+            svg-icon {
+                margin: 13px 6px;
+            }
+        }
+    }
+
+    /deep/ .sdc-input {
+        margin-bottom: 0;
 
-        &.association-options {
-            margin-top: 5px;
+        .sdc-input__input {
+            height: 38px;
         }
+    }
+
+    .side-by-side {
+        display: flex;
 
-        .i-sdc-form-item {
-            flex-basis: 100%;
+        .form-item {
+            flex: 1;
 
             &:first-child {
-                flex-basis: 40%;
-                margin-right: 10px;
+                margin-right: 14px;
+                flex-basis: 37%;
+                flex-grow: 0;
+                flex-shrink: 0;
             }
 
-            .archive-warning {
-                font-family: @font-opensans-bold;
-                color: @main_color_i;
+            &:nth-child(3) {
+                margin-left: 14px;
+                flex: 0.4;
             }
+
         }
     }
 
+    .archive-warning {
+        font-family: @font-opensans-bold;
+        color: @main_color_i;
+    }
+
+    .no-workflow-warning {
+        font-family: @font-opensans-bold;
+        color: @sdcui_color_red;
+        float: right;
+    }
+
     .input-param-title {
         font-size: 16px;
         text-transform: uppercase;
@@ -51,24 +86,33 @@
                 cursor: pointer;
             }
         }
+
+        .tab {
+            width: 84px;
+            text-align: center;
+        }
     }
 
     .generic-table {
-        max-height: 233px;
+        max-height: 244px;
         min-height: 91px;
         background: @main_color_p;
 
         .header-row .header-cell {
-            &.remove {
-                padding: 8px;
-            }
             .info-icon {
                 float: right;
+                position: relative;
+                top: 2px;
             }
             /deep/ .tooltip-inner {
-                max-width: 280px;
+                padding: 2px;
+                max-width: 270px;
                 font-size: 11px;
             }
+            &.remove {
+                padding: 10px;
+                font-size: 10px;
+            }
         }
 
         .data-row {
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 a304f1a30d..e1b2b4e079 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
@@ -7,15 +7,37 @@ 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 {IDropDownOption} from "sdc-ui/lib/angular/form-elements/dropdown/dropdown-models";
 import {Tabs, Tab} from "app/ng2/components/ui/tabs/tabs.component";
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
 
+export class DropDownOption implements IDropDownOption {
+    value: string;
+    label: string;
+
+    constructor(value: string, label?: string) {
+        this.value = value;
+        this.label = label || value;
+    }
+}
+
+class TypedDropDownOption extends DropDownOption {
+    type: number;
+
+    constructor(value: string, label?: string, type?: number) {
+        super(value, label);
+        this.type = type;
+    }
+}
+
 export interface OperationCreatorInput {
-    operation: OperationModel,
+    inputOperation: OperationModel,
     inputProperties: Array<InputBEModel>,
     enableWorkflowAssociation: boolean,
     readonly: boolean,
-    isService: boolean
+    isService: boolean,
+    interfaceTypes: { [interfaceType: string]: Array<string> },
+    validityChangedCallback: Function
 }
 
 @Component({
@@ -28,7 +50,12 @@ export interface OperationCreatorInput {
 export class OperationCreatorComponent {
 
     input: OperationCreatorInput;
+    inputOperation: OperationModel;
     operation: OperationModel;
+    interfaceNames: Array<TypedDropDownOption> = [];
+    interfaceTypes: { [interfaceType: string]: Array<string> };
+    operationNames: Array<DropDownOption> = [];
+    validityChangedCallback: Function;
 
     workflows: Array<DropdownValue> = [];
     workflowVersions: Array<DropdownValue> = [];
@@ -45,7 +72,8 @@ export class OperationCreatorComponent {
 
     tableParameters: Array<OperationParameter> = [];
 
-    associationOptions: Array<DropdownValue>;
+    associationOptions: Array<DropdownValue> = [];
+    workflowAssociationType: string;
 
     enableWorkflowAssociation: boolean;
     isEditMode: boolean = false;
@@ -57,6 +85,9 @@ export class OperationCreatorComponent {
     TYPE_INPUT = 'Inputs';
     TYPE_OUTPUT = 'Outputs';
 
+    INTERFACE_OTHER_HEADER = 'Local Interfaces';
+    INTERFACE_OTHER = 'Local';
+
     @ViewChild('propertyInputTabs') propertyInputTabs: Tabs;
     currentTab: String;
 
@@ -65,24 +96,41 @@ export class OperationCreatorComponent {
             this.propertyTooltipText = this.translateService.translate("OPERATION_PROPERTY_TOOLTIP_TEXT");
 
             this.associationOptions = [
-                new DropdownValue(WORKFLOW_ASSOCIATION_OPTIONS.NONE, this.translateService.translate("NO_WORKFLOW_ASSOCIATION")),
-                new DropdownValue(WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.translateService.translate("EXISTING_WORKFLOW_ASSOCIATION"))
+                new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.NONE, this.translateService.translate("NO_WORKFLOW_ASSOCIATION")),
+                new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.translateService.translate("EXISTING_WORKFLOW_ASSOCIATION"))
             ];
+
+            this.workflowAssociationType = this.operation.workflowAssociationType || WORKFLOW_ASSOCIATION_OPTIONS.NONE;
         });
 
         this.currentTab = this.TYPE_INPUT;
     }
 
-    ngOnInit() {
-        this.readonly = this.input.readonly;
-        this.enableWorkflowAssociation = this.input.enableWorkflowAssociation;
-        this.inputProperties = this.input.inputProperties;
+    createInterfaceDropdown(type: string) {
+        let label = type;
+        const lastDot = label.lastIndexOf('.');
+        if (lastDot > -1) {
+            label = label.substr(lastDot + 1);
+        }
+        return new TypedDropDownOption(type, label);
+    }
 
-        const inputOperation = this.input.operation;
+    ngOnInit() {
+        this.interfaceNames = _.map(
+            _.keys(this.interfaceTypes),
+            type => this.createInterfaceDropdown(type)
+        );
+        this.interfaceNames.unshift(new TypedDropDownOption('Existing Interfaces', 'Existing Interfaces', 1));
+        this.interfaceNames = this.interfaceNames.concat([
+            new TypedDropDownOption(' ', ' ', 3),
+            new TypedDropDownOption(this.INTERFACE_OTHER_HEADER, this.INTERFACE_OTHER_HEADER, 1),
+            new TypedDropDownOption(this.INTERFACE_OTHER)
+        ]);
+
+        const inputOperation = this.inputOperation;
         this.operation = new OperationModel(inputOperation || {});
-        if (!inputOperation) {
-            this.operation.workflowAssociationType = WORKFLOW_ASSOCIATION_OPTIONS.NONE;
-        }
+        this.onSelectInterface(new DropDownOption(this.operation.interfaceType));
+        this.validityChanged();
 
         if (this.enableWorkflowAssociation) {
             this.isLoading = true;
@@ -113,13 +161,16 @@ export class OperationCreatorComponent {
     }
 
     reconstructOperation = () => {
-        const inputOperation = this.input.operation;
+        const inputOperation = this.inputOperation;
         if (inputOperation) {
             if (this.enableWorkflowAssociation && inputOperation.workflowVersionId && this.isUsingExistingWF(inputOperation)) {
-                this.onSelectWorkflow(inputOperation.workflowVersionId).add(() => {
-                    this.buildParams();
-                    this.updateTable();
-                });
+                const sub = this.onSelectWorkflow(new DropDownOption(inputOperation.workflowId), inputOperation.workflowVersionId);
+                if (sub) {
+                    sub.add(() => {
+                        this.buildParams();
+                        this.updateTable();
+                    });
+                }
             } else {
                 this.inputParameters = this.noAssignInputParameters;
                 this.outputParameters = this.noAssignOutputParameters;
@@ -132,14 +183,15 @@ export class OperationCreatorComponent {
             }
         }
         this.updateTable();
+        this.validityChanged();
     }
 
     buildParams = () => {
-        if (this.input.operation.outputParams) {
+        if (this.inputOperation.outputs) {
             this.currentTab = this.TYPE_OUTPUT;
             this.updateTable();
             _.forEach(
-                [...this.input.operation.outputParams.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)),
+                [...this.inputOperation.outputs.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)),
                 (output: OperationParameter) => {
                     this.addParam(output);
                 }
@@ -147,9 +199,9 @@ export class OperationCreatorComponent {
         }
         this.currentTab = this.TYPE_INPUT;
         this.updateTable();
-        if (this.input.operation.inputParams) {
+        if (this.inputOperation.inputs) {
             _.forEach(
-                [...this.input.operation.inputParams.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)),
+                [...this.inputOperation.inputs.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)),
                 (input: OperationParameter) => {
                     this.addParam(input);
                 }
@@ -157,15 +209,53 @@ export class OperationCreatorComponent {
         }
     }
 
-    onSelectWorkflow(selectedVersionId?: string): Subscription {
+    isInterfaceOther(): boolean {
+        return this.operation.interfaceType === this.INTERFACE_OTHER;
+    }
+
+    onSelectInterface(interf: IDropDownOption) {
+        if (interf && this.operation.interfaceType !== interf.value) {
+            this.operation.name = undefined;
+        }
+        this.operation.interfaceType = interf && interf.value;
+        this.operationNames = !this.operation.interfaceType ? [] : (
+            _.map(
+                this.interfaceTypes[this.operation.interfaceType],
+                name => new DropDownOption(name)
+            )
+        );
+        this.validityChanged();
+    }
+
+    onSelectOperationName(name: IDropDownOption) {
+        if (name) {
+            this.operation.name = name.value;
+            this.validityChanged();
+        }
+    }
+
+    get descriptionValue() {
+        return this.operation.description;
+    }
+
+    set descriptionValue(v) {
+        this.operation.description = v;
+        this.validityChanged();
+    }
 
-        this.operation.workflowVersionId = selectedVersionId || null;
+    onSelectWorkflow(workflowId: DropDownOption, selectedVersionId?: string): Subscription {
+
+        if (_.isUndefined(workflowId) || workflowId.value === this.operation.workflowId) {
+            return;
+        }
+        this.operation.workflowId = workflowId.value;
         if (!this.assignInputParameters[this.operation.workflowId]) {
             this.assignInputParameters[this.operation.workflowId] = {};
             this.assignOutputParameters[this.operation.workflowId] = {};
         }
 
         this.isLoading = true;
+        this.validityChanged();
         return this.workflowServiceNg2.getWorkflowVersions(this.operation.workflowId).subscribe((versions: Array<any>) => {
             this.isLoading = false;
 
@@ -197,18 +287,34 @@ export class OperationCreatorComponent {
                 this.operation.workflowVersionId = _.last(this.workflowVersions).value;
             }
 
-            this.changeWorkflowVersion();
+            this.changeWorkflowVersion(new DropDownOption(this.operation.workflowVersionId));
+            this.validityChanged();
         });
 
     }
 
-    changeWorkflowVersion() {
+    changeWorkflowVersion(versionId: DropDownOption) {
+
+        if (_.isUndefined(versionId)) {
+            return;
+        }
+
+        this.operation.workflowVersionId = versionId.value;
         this.inputParameters = this.assignInputParameters[this.operation.workflowId][this.operation.workflowVersionId];
         this.outputParameters = this.assignOutputParameters[this.operation.workflowId][this.operation.workflowVersionId];
         this.updateTable();
+        this.validityChanged();
+
     }
 
-    toggleAssociateWorkflow() {
+    toggleAssociateWorkflow(type: DropDownOption) {
+
+        if (_.isUndefined(type)) {
+            return;
+        }
+
+        this.operation.workflowAssociationType = type.value;
+        this.workflowAssociationType = this.operation.workflowAssociationType;
 
         if (!this.isUsingExistingWF()) {
             this.inputParameters = this.noAssignInputParameters;
@@ -224,15 +330,19 @@ export class OperationCreatorComponent {
         }
 
         this.updateTable();
+        this.validityChanged();
 
     }
 
     tabChanged = (event) => {
+
         this.currentTab = event.title;
         this.updateTable();
+
     }
 
     updateTable() {
+
         switch (this.currentTab) {
             case this.TYPE_INPUT:
                 this.tableParameters = this.inputParameters;
@@ -241,17 +351,20 @@ export class OperationCreatorComponent {
                 this.tableParameters = this.outputParameters;
                 break;
         }
+
     }
 
     addParam(param?: OperationParameter): void {
+        this.validityChanged();
         this.tableParameters.push(new OperationParameter(param));
     }
 
-    canAdd(): boolean {
+    canAdd = (): boolean => {
+
         let valid = true;
         if (this.currentTab === this.TYPE_INPUT) {
             _.forEach(this.inputParameters, param => {
-                if (!param.name || !param.property) {
+                if (!param.name || !param.inputId) {
                     valid = false;
                 }
             });
@@ -262,13 +375,16 @@ export class OperationCreatorComponent {
                 }
             });
         }
+
         return valid;
+
     }
 
-    isParamsValid(): boolean {
+    isParamsValid = (): boolean => {
+
         let valid = true;
         _.forEach(this.inputParameters, param => {
-            if (!param.name || !param.property) {
+            if (!param.name || !param.inputId) {
                 valid = false;
             }
         });
@@ -277,7 +393,9 @@ export class OperationCreatorComponent {
                 valid = false;
             }
         });
+
         return valid;
+
     }
 
     onRemoveParam = (param: OperationParameter): void => {
@@ -285,9 +403,9 @@ export class OperationCreatorComponent {
         this.tableParameters.splice(index, 1);
     }
 
-    createParamLists(): void {
-        this.operation.createInputParamsList(this.inputParameters);
-        this.operation.createOutputParamsList(this.outputParameters);
+    createParamLists = () => {
+        this.operation.createInputsList(this.inputParameters);
+        this.operation.createOutputsList(this.outputParameters);
     }
 
     isUsingExistingWF = (operation?: OperationModel): boolean => {
@@ -295,15 +413,20 @@ export class OperationCreatorComponent {
         return operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXISTING;
     }
 
-    shouldCreateWF(operation?: OperationModel): boolean {
+    shouldCreateWF = (operation?: OperationModel): boolean => {
         operation = operation || this.operation;
         return this.operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW;
     }
 
-    checkFormValidForSubmit(): boolean {
-        return this.operation.operationType &&
+    checkFormValidForSubmit = (): boolean => {
+        return this.operation.name &&
             (!this.isUsingExistingWF() || this.operation.workflowVersionId) &&
             this.isParamsValid();
     }
 
+    validityChanged = () => {
+        let validState = this.checkFormValidForSubmit();
+        this.validityChangedCallback(validState);
+    }
+
 }
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts
index 7d881231d5..0b6f8336c3 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts
@@ -3,8 +3,9 @@ import {CommonModule} from "@angular/common";
 
 import {FormsModule} from "@angular/forms";
 import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
-import {TranslateModule} from "app/ng2/shared/translator/translate.module";
+import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
 import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+import {TranslateModule} from "app/ng2/shared/translator/translate.module";
 
 import {OperationCreatorComponent} from "./operation-creator.component";
 import {ParamRowComponent} from './param-row/param-row.component';
@@ -16,6 +17,7 @@ import {ParamRowComponent} from './param-row/param-row.component';
     ],
     imports: [
         CommonModule,
+        SdcUiComponentsModule,
         FormsModule,
         FormElementsModule,
         TranslateModule,
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 9a5c101e87..1128d60e04 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
@@ -19,6 +19,7 @@
         *ngIf="!isAssociateWorkflow"
         data-tests-id="paramName"
         [(value)]="param.name"
+        (valueChange)="onChangeName()"
         [readonly]="readonly">
     </ui-element-input>
     <span *ngIf="isAssociateWorkflow">{{param.name}}</span>
@@ -41,13 +42,14 @@
         *ngIf="filteredInputProps.length || !isAssociateWorkflow"
         data-tests-id="paramProperty"
         [values]="filteredInputProps"
-        [(value)]="param.property"
+        value="paramId"
+        (valueChange)="onChangeProperty($event)"
         [readonly]="readonly">
     </ui-element-dropdown>
     <span
         *ngIf="!filteredInputProps.length && isAssociateWorkflow"
         class="no-properties-error">
-        No available properties of this type.
+        {{ 'PARAM_NONE_OF_TYPE' | translate }}
     </span>
 </div>
 
@@ -55,15 +57,18 @@
     <checkbox
         *ngIf="!isAssociateWorkflow"
         data-tests-id="paramMandatory"
-        [(checked)]="param.mandatory"
+        [(checked)]="param.required"
         [ngClass]="{'disabled':readonly}">
     </checkbox>
 </div>
 
 <div class="cell remove" *ngIf="!isAssociateWorkflow && !readonly">
-    <span
-        class="sprite-new delete-item-icon"
-        data-tests-id="removeInputParam"
-        (click)="onRemoveParam(param)">
-    </span>
+    <svg-icon
+      name="trash-o"
+      mode="info"
+      size="small"
+      testId="removeInputParam"
+      (click)="onRemoveParam(param)"
+      [clickable]="true">
+  </svg-icon>
 </div>
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
index 2c2625d778..99a54bb65c 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
@@ -5,7 +5,10 @@
     align-items: center;
     justify-content: center;
 
-    .delete-item-icon {
+    svg-icon {
+        position: relative;
+        right: -3px;
+
         &:hover {
             cursor: pointer;
         }
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 a12425d6e9..8837a17bd9 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
@@ -1,6 +1,7 @@
 import {Component, Input} from '@angular/core';
 import {DataTypeService} from "app/ng2/services/data-type.service";
 import {OperationParameter, InputBEModel} from 'app/models';
+import {DropDownOption} from "../operation-creator.component";
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
 
 @Component({
@@ -16,8 +17,10 @@ export class ParamRowComponent {
     @Input() isAssociateWorkflow: boolean;
     @Input() readonly: boolean;
     @Input() isInputParam: boolean;
+    @Input() validityChanged: Function;
 
-    propTypeEnum: Array<String> = [];
+    paramId: string;
+    propTypeEnum: Array<DropDownOption> = [];
     filteredInputProps: Array<DropdownValue> = [];
 
     constructor(private dataTypeService: DataTypeService) {}
@@ -26,20 +29,48 @@ export class ParamRowComponent {
         this.propTypeEnum = _.uniq(
             _.map(
                 this.getPrimitiveSubtypes(),
-                prop => prop.type
+                prop => new DropDownOption(prop.type)
             )
         );
         this.onChangeType();
+        this.validityChanged();
     }
 
-    onChangeType() {
+    onChangeName() {
+        this.validityChanged();
+    }
+
+    onChangeType(paramId?: string) {
         this.filteredInputProps = _.map(
             _.filter(
                 this.getPrimitiveSubtypes(),
-                prop => prop.type === this.param.type
+                prop => !this.param.type || prop.type === this.param.type
             ),
             prop => new DropdownValue(prop.uniqueId, prop.name)
         );
+        if (paramId) {
+            this.paramId = paramId;
+        }
+    }
+
+    onChangeProperty(paramId: string) {
+        this.param.inputId = paramId;
+        const newProp = _.find(
+            this.getPrimitiveSubtypes(),
+            prop => this.param.inputId === prop.uniqueId
+        );
+
+        if (!this.param.type) {
+            this.param.type = newProp.type;
+            this.onChangeType(paramId);
+        } else {
+            this.paramId = paramId;
+        }
+
+        if (!this.param.name) {
+            this.param.name = newProp.name;
+        }
+        this.validityChanged();
     }
 
     getPrimitiveSubtypes(): Array<InputBEModel> {