Operation WF association UI

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

12 files changed, 94 insertions, 110 deletions

diff --git a/catalog-ui/src/app/models/operation.ts b/catalog-ui/src/app/models/operation.ts
index f15f0b13b5..2aa1332f06 100644
--- a/catalog-ui/src/app/models/operation.ts
+++ b/catalog-ui/src/app/models/operation.ts
@@ -2,7 +2,7 @@
 
 export class OperationParameter {
     name: string;
-    type: string;
+    type: String;
     property: string;
     mandatory: boolean;
 
@@ -20,6 +20,12 @@ export interface IOperationParamsList {
     listToscaDataDefinition: Array<OperationParameter>;
 }
 
+export class WORKFLOW_ASSOCIATION_OPTIONS {
+    static NONE = 'NONE';
+    static NEW = 'NEW';
+    static EXISTING = 'EXISTING';
+}
+
 export class OperationModel {
     operationType: string;
     description: string;
@@ -28,16 +34,20 @@ export class OperationModel {
     inputParams: IOperationParamsList;
     outputParams: IOperationParamsList;
 
+    workflowAssociationType: string;
     workflowId: string;
     workflowVersionId: string;
 
     constructor(operation?: any) {
         if (operation) {
+            this.operationType = operation.operationType;
             this.description = operation.description;
+            this.uniqueId = operation.uniqueId;
+
             this.inputParams = operation.inputParams;
-            this.operationType = operation.operationType;
             this.outputParams = operation.outputParams;
-            this.uniqueId = operation.uniqueId;
+
+            this.workflowAssociationType = operation.workflowAssociationType;
             this.workflowId = operation.workflowId;
             this.workflowVersionId = operation.workflowVersionId;
         }
diff --git a/catalog-ui/src/app/modules/directive-module.ts b/catalog-ui/src/app/modules/directive-module.ts
index e7acb1ccf6..683a3344ca 100644
--- a/catalog-ui/src/app/modules/directive-module.ts
+++ b/catalog-ui/src/app/modules/directive-module.ts
@@ -245,7 +245,7 @@ directiveModule.directive('ng2ServicePathSelector', downgradeComponent({
     outputs: []
 }) as angular.IDirectiveFactory);
 
-directiveModule.directive('ng2InterfaceOperation', downgradeComponent({
+directiveModule.directive('interfaceOperation', downgradeComponent({
     component: InterfaceOperationComponent,
     inputs: ['component', 'readonly'],
     outputs: []
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 f23f66a5ff..2dff6a833d 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
@@ -4,9 +4,11 @@ import {Component as IComponent} from 'app/models/components/component';
 
 import {SdcConfigToken, ISdcConfig} from "app/ng2/config/sdc-config.config";
 
+import {Observable} from "rxjs/Observable";
+
 import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
 import {ModalService} from 'app/ng2/services/modal.service';
-import {ModalModel, ButtonModel, InputBEModel, OperationModel, CreateOperationResponse} from 'app/models';
+import {ModalModel, ButtonModel, InputBEModel, OperationModel, CreateOperationResponse, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/models';
 
 import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
 import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response';
@@ -47,26 +49,14 @@ export class InterfaceOperationComponent {
 
     ngOnInit(): void {
         this.isLoading = true;
-        let gotOperations = false;
-        let gotInputs = false;
-
-        this.ComponentServiceNg2.getInterfaceOperations(this.component).subscribe((response: ComponentGenericResponse) => {
-            if (gotInputs) {
-                this.isLoading = false;
-            } else {
-                gotOperations = true;
-            }
-            this.component.interfaceOperations = response.interfaceOperations;
-            this.operationList = _.toArray(response.interfaceOperations).sort((a, b) => a.operationType.localeCompare(b.operationType));
-        });
-
-        this.ComponentServiceNg2.getComponentInputs(this.component).subscribe((response: ComponentGenericResponse) => {
-            if (gotOperations) {
-                this.isLoading = false;
-            } else {
-                gotInputs = true;
-            }
-            this.inputs = response.inputs;
+        Observable.forkJoin(
+            this.ComponentServiceNg2.getInterfaceOperations(this.component),
+            this.ComponentServiceNg2.getComponentInputs(this.component)
+        ).subscribe((response) => {
+            this.isLoading = false;
+            this.component.interfaceOperations = response[0].interfaceOperations;
+            this.operationList = _.toArray(response[0].interfaceOperations).sort((a, b) => a.operationType.localeCompare(b.operationType));
+            this.inputs = response[1].inputs;
         });
     }
 
@@ -183,14 +173,14 @@ export class InterfaceOperationComponent {
             this.operationList.push(new OperationModel(response));
             this.operationList.sort((a, b) => a.operationType.localeCompare(b.operationType));
 
-            if (response.workflowId) {
+            if (response.workflowId && operation.workflowAssociationType === 'EXISTING') {
                 const resourceId = this.component.uuid;
                 const operationId = response.uniqueId;
                 const workflowId = response.workflowId;
                 const versionId = response.workflowVersionId;
                 const artifactId = response.artifactUUID;
                 this.WorkflowServiceNg2.associateWorkflowArtifact(resourceId, operationId, workflowId, versionId, artifactId).subscribe();
-            } else {
+            } else if (operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW) {
                 this.$state.go('workspace.plugins', { path: 'workflowDesigner' });
             }
         });
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 5c511c15f3..6d5fd8d72f 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
@@ -47,7 +47,8 @@
             <div class="i-sdc-form-item" *ngIf="enableWorkflowAssociation">
                 <label class="i-sdc-form-label">Workflow Assignment</label>
                 <ui-element-dropdown
-                    [(value)]="workflowAssociationType"
+                    data-tests-id="association-type"
+                    [(value)]="operation.workflowAssociationType"
                     [values]="associationOptions"
                     (valueChange)="toggleAssociateWorkflow()"
                     [readonly]="readonly">
@@ -56,7 +57,7 @@
             <div></div>
         </div>
 
-        <div class="side-by-side" *ngIf="workflowAssociationType == WORKFLOW_ASSOCIATION_OPTIONS.EXISTING">
+        <div class="side-by-side" *ngIf="isUsingExistingWF()">
             <div class="i-sdc-form-item">
                 <label class="i-sdc-form-label required">Workflow</label>
                 <ui-element-dropdown
@@ -87,7 +88,7 @@
             </tabs>
             <a
                 class="add-param-link add-btn"
-                *ngIf="workflowAssociationType != WORKFLOW_ASSOCIATION_OPTIONS.EXISTING && !readonly"
+                *ngIf="!isUsingExistingWF() && !readonly"
                 data-tests-id="addInputParameter"
                 [ngClass]="{'disabled':!isParamsValid()}"
                 (click)="addParam()">Add Parameter</a>
@@ -100,19 +101,19 @@
                 <span class="cell header-cell field-property" *ngIf="currentTab == TYPE_INPUT">
                     Property
                     <span
-                        *ngIf="workflowAssociationType != WORKFLOW_ASSOCIATION_OPTIONS.EXISTING"
+                        *ngIf="!isUsingExistingWF()"
                         class="sprite-new info-icon"
                         tooltip="{{propertyTooltipText}}"
                         tooltipDelay="0">
                     </span>
                 </span>
-                <span class="cell header-cell field-mandatory" *ngIf="workflowAssociationType != WORKFLOW_ASSOCIATION_OPTIONS.EXISTING">Mandatory</span>
-                <span class="cell header-cell remove" *ngIf="workflowAssociationType != WORKFLOW_ASSOCIATION_OPTIONS.EXISTING && !readonly">●●●</span>
+                <span class="cell header-cell field-mandatory" *ngIf="!isUsingExistingWF()">Mandatory</span>
+                <span class="cell header-cell remove" *ngIf="!isUsingExistingWF() && !readonly">●●●</span>
             </div>
 
             <div class="empty-msg data-row" *ngIf="tableParameters.length === 0">
                 <div>NO PARAMETERS TO SHOW</div>
-                <div *ngIf="workflowAssociationType == WORKFLOW_ASSOCIATION_OPTIONS.EXISTING && !operation.workflowVersionId">
+                <div *ngIf="isUsingExistingWF() && !operation.workflowVersionId">
                     <div *ngIf="workflows.length">
                         <span class="bold-message">Select Workflow and Workflow Version above</span>
                         <span>in order to see the parameters</span>
@@ -127,7 +128,7 @@
                 *ngFor="let param of tableParameters"
                 class="data-row"
                 [isInputParam]="currentTab == TYPE_INPUT"
-                [isAssociateWorkflow]="workflowAssociationType == WORKFLOW_ASSOCIATION_OPTIONS.EXISTING"
+                [isAssociateWorkflow]="isUsingExistingWF()"
                 [param]="param"
                 [inputProps]="inputProperties"
                 [propTypes]="inputPropertyTypes"
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 42f95d577c..207bfa9f55 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} from 'app/models';
+import {OperationModel, OperationParameter, InputBEModel, RadioButtonModel, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/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";
@@ -47,7 +47,6 @@ export class OperationCreatorComponent {
     tableParameters: Array<OperationParameter> = [];
 
     associationOptions: Array<DropdownValue>;
-    workflowAssociationType: String;
 
     enableWorkflowAssociation: boolean;
     isEditMode: boolean = false;
@@ -57,12 +56,6 @@ export class OperationCreatorComponent {
 
     propertyTooltipText: String;
 
-    WORKFLOW_ASSOCIATION_OPTIONS = {
-        NONE: 'No Workflow',
-        NEW: 'New Workflow',
-        EXISTING: 'Existing Workflow'
-    }
-
     TYPE_INPUT = 'Inputs';
     TYPE_OUTPUT = 'Outputs';
 
@@ -72,15 +65,14 @@ export class OperationCreatorComponent {
     constructor(private workflowServiceNg2: WorkflowServiceNg2, private translateService: TranslateService) {
         this.translateService.languageChangedObservable.subscribe(lang => {
             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"))
+            ];
         });
-        this.currentTab = this.TYPE_INPUT;
 
-        this.associationOptions = [
-            new DropdownValue(this.WORKFLOW_ASSOCIATION_OPTIONS.NONE, this.WORKFLOW_ASSOCIATION_OPTIONS.NONE),
-            new DropdownValue(this.WORKFLOW_ASSOCIATION_OPTIONS.NEW, this.WORKFLOW_ASSOCIATION_OPTIONS.NEW),
-            new DropdownValue(this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING)
-        ];
-        this.workflowAssociationType = this.WORKFLOW_ASSOCIATION_OPTIONS.NONE;
+        this.currentTab = this.TYPE_INPUT;
     }
 
     ngOnInit() {
@@ -100,6 +92,7 @@ export class OperationCreatorComponent {
 
         const inputOperation = this.input.operation;
         this.operation = new OperationModel(inputOperation || {});
+        this.operation.workflowAssociationType = inputOperation ? inputOperation.workflowAssociationType : WORKFLOW_ASSOCIATION_OPTIONS.NONE;
 
         if (this.enableWorkflowAssociation) {
             this.isLoading = true;
@@ -125,7 +118,7 @@ export class OperationCreatorComponent {
                 this.buildParams();
                 this.updateTable();
             } else {
-                this.workflowAssociationType = this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING;
+                this.operation.workflowAssociationType = WORKFLOW_ASSOCIATION_OPTIONS.EXISTING;
                 this.onSelectWorkflow(inputOperation.workflowVersionId).add(() => {
                     this.buildParams();
                     this.updateTable();
@@ -179,26 +172,19 @@ export class OperationCreatorComponent {
                     versions, version => version.state === this.workflowServiceNg2.VERSION_STATE_CERTIFIED
                 ).sort((a, b) => a.name.localeCompare(b.name)),
                 (version: any) => {
-                    if (!this.assignInputParameters[this.operation.workflowId][version.id]) {
-                        this.assignInputParameters[this.operation.workflowId][version.id] = _.map(version.inputs, (input: any) => {
-                            return new OperationParameter({
-                                name: input.name,
-                                type: input.type && input.type.toLowerCase(),
-                                property: null,
-                                mandatory: input.mandatory,
-                            });
+                    if (!this.assignInputParameters[this.operation.workflowId][version.id] && !selectedVersionId) {
+                        this.assignInputParameters[this.operation.workflowId][version.id] = _.map(version.inputs, (input: OperationParameter) => {
+                            return new OperationParameter({...input, type: input.type.toLowerCase()});
                         })
                         .sort((a, b) => a.name.localeCompare(b.name));
 
-                        this.assignOutputParameters[this.operation.workflowId][version.id] = _.map(version.outputs, (output: any) => {
-                            return new OperationParameter({
-                                name: output.name,
-                                type: output.type && output.type.toLowerCase(),
-                                property: null,
-                                mandatory: output.mandatory,
-                            });
+                        this.assignOutputParameters[this.operation.workflowId][version.id] = _.map(version.outputs, (output: OperationParameter) => {
+                            return new OperationParameter({...output, type: output.type.toLowerCase()});
                         })
                         .sort((a, b) => a.name.localeCompare(b.name));
+                    } else if (selectedVersionId) {
+                        this.assignInputParameters[this.operation.workflowId][version.id] = [];
+                        this.assignOutputParameters[this.operation.workflowId][version.id] = [];
                     }
                     return new DropdownValue(version.id, `V ${version.name}`);
                 }
@@ -207,6 +193,7 @@ export class OperationCreatorComponent {
             if (!selectedVersionId && this.workflowVersions.length) {
                 this.operation.workflowVersionId = _.last(this.workflowVersions).value;
             }
+
             this.changeWorkflowVersion();
         });
 
@@ -220,7 +207,7 @@ export class OperationCreatorComponent {
 
     toggleAssociateWorkflow() {
 
-        if (this.workflowAssociationType !== this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING) {
+        if (!this.isUsingExistingWF()) {
             this.inputParameters = this.noAssignInputParameters;
             this.outputParameters = this.noAssignOutputParameters;
         } else {
@@ -258,16 +245,13 @@ export class OperationCreatorComponent {
     }
 
     isParamsValid(): boolean {
-
-        for (let ctr=0; ctr<this.tableParameters.length; ctr++) {
-            if (!this.tableParameters[ctr].name ||
-                (this.currentTab == this.TYPE_INPUT && !this.tableParameters[ctr].property)
-            ) {
-                return false;
+        let valid = true;
+        _.forEach(this.tableParameters, param => {
+            if (!param.name || (this.currentTab == this.TYPE_INPUT && !param.property)) {
+                valid = false;
             }
-        }
-        return true;
-
+        });
+        return valid;
     }
 
     onRemoveParam = (param: OperationParameter): void => {
@@ -276,27 +260,21 @@ export class OperationCreatorComponent {
     }
 
     createParamLists(): void {
-        this.operation.createInputParamsList(_.map(this.inputParameters, input => {
-            return {
-                name: input.name,
-                type: input.type,
-                property: input.property,
-                mandatory: Boolean(input.mandatory)
-            }
-        }));
-        this.operation.createOutputParamsList(_.map(this.outputParameters, output => {
-            return {
-                name: output.name,
-                type: output.type,
-                property: output.property,
-                mandatory: Boolean(output.mandatory)
-            }
-        }));
+        this.operation.createInputParamsList(this.inputParameters);
+        this.operation.createOutputParamsList(this.outputParameters);
+    }
+
+    isUsingExistingWF(): boolean {
+        return this.operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXISTING;
+    }
+
+    shouldCreateWF(): boolean {
+        return this.operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW;
     }
 
     checkFormValidForSubmit(): boolean {
         return this.operation.operationType &&
-            (this.workflowAssociationType !== this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING || this.operation.workflowVersionId) &&
+            (!this.isUsingExistingWF() || this.operation.workflowVersionId) &&
             this.isParamsValid();
     }
 
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 9128e74641..461a35e4d1 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
@@ -1,9 +1,11 @@
 import {NgModule} from "@angular/core";
 import {CommonModule} from "@angular/common";
-import {OperationCreatorComponent} from "./operation-creator.component";
+
 import {FormsModule} from "@angular/forms";
 import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
 import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+
+import {OperationCreatorComponent} from "./operation-creator.component";
 import {ParamRowComponent} from './param-row/param-row.component';
 
 @NgModule({
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 8382f1e842..29e8a3508b 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,11 +38,17 @@
 
 <div class="cell field-property" *ngIf="isInputParam">
     <ui-element-dropdown
+        *ngIf="filteredInputProps.length > 0"
         data-tests-id="paramProperty"
         [values]="filteredInputProps"
         [(value)]="param.property"
         [readonly]="readonly">
     </ui-element-dropdown>
+    <span
+        *ngIf="filteredInputProps.length == 0"
+        class="no-properties-error">
+        No available properties of this type.
+    </span>
 </div>
 
 <div class="cell field-mandatory" *ngIf="!isAssociateWorkflow">
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 81a1832c21..28932eb90f 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
@@ -36,5 +36,10 @@
         &:last-child {
             flex: 1;
         }
+
+        .no-properties-error {
+            color: red;
+            font-style: italic;
+        }
     }
 }
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 9f7f4230ee..8844cf65bb 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,5 +1,4 @@
 import {Component, Input} from '@angular/core';
-import {PROPERTY_DATA} from "app/utils";
 import {DataTypeService} from "app/ng2/services/data-type.service";
 import {OperationParameter} from 'app/models';
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
@@ -22,19 +21,8 @@ export class ParamRowComponent {
     propTypeEnum: Array<String> = [];
     filteredInputProps: Array<DropdownValue> = [];
 
-    constructor(private dataTypeService:DataTypeService) {}
-
     ngOnInit() {
-        const types = PROPERTY_DATA.TYPES.concat(
-            _.filter(
-                Object.keys(this.dataTypeService.getAllDataTypes()),
-                type => PROPERTY_DATA.TYPES.indexOf(type) === -1
-            )
-        );
-        this.propTypeEnum = _.filter(
-            types,
-            type => _.toArray(this.propTypes).indexOf(type) > -1
-        );
+        this.propTypeEnum = _.uniq(_.toArray(this.propTypes));
         this.onChangeType();
     }
 
diff --git a/catalog-ui/src/app/utils/common-utils.ts b/catalog-ui/src/app/utils/common-utils.ts
index f195e2dc96..7ba50fdcf1 100644
--- a/catalog-ui/src/app/utils/common-utils.ts
+++ b/catalog-ui/src/app/utils/common-utils.ts
@@ -145,11 +145,12 @@ export class CommonUtils {
 
             return acc.concat(
                 _.map(interf.operations,
-                    ({description, name, uniqueId, inputs, outputs, workflowId, workflowVersionId}) => {
+                    ({description, name, uniqueId, inputs, outputs, workflowId, workflowVersionId, workflowAssociationType}) => {
                         const operation = new OperationModel({
                             description,
                             operationType: name,
                             uniqueId,
+                            workflowAssociationType,
                             workflowId,
                             workflowVersionId
                         });
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html b/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html
index a92fca2a1c..0e7c355c47 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html
@@ -15,10 +15,10 @@
 -->
 
 <div class="workspace-interface-operation">
-    <ng2-interface-operation
+    <interface-operation
         [component]="component"
         [readonly]="isViewMode() || !isDesigner()"
         [disableMenuItems]="disableMenuItems"
         [enableMenuItems]="enableMenuItems">
-    </ng2-interface-operation>
+    </interface-operation>
 </div>
diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json
index 48751c9f73..d959d84df9 100644
--- a/catalog-ui/src/assets/languages/en_US.json
+++ b/catalog-ui/src/assets/languages/en_US.json
@@ -454,6 +454,9 @@
     "=========== OPERATION CREATOR ============": "",
     "OPERATION_PROPERTY_TOOLTIP_TEXT": "VNF properties are defined by the input parameter type. In case you can't find a certain parameter, it might be due to a wrong type selection.",
     "SERVICE_OPERATION_PROPERTY_TOOLTIP_TEXT": "Service properties are defined by the input parameter type. In case you can't find a certain parameter, it might be due to a wrong type selection.",
+    "NO_WORKFLOW_ASSOCIATION": "No Workflow",
+    "NEW_WORKFLOW_ASSOCIATION": "New Workflow",
+    "EXISTING_WORKFLOW_ASSOCIATION": "Existing Workflow",
 
     "=========== PLUGIN NOT CONNECTED ===========": "",
     "PLUGIN_NOT_CONNECTED_ERROR_MAIN": "The \"{{pluginName}}\" plugin is currently unavailable.",