Implement adding Interface to VFC

Change-Id: I7cd8b82c306294d897d37d486aa3eeff7ca4206d
Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>
Issue-ID: SDC-3893
Signed-off-by: andre.schmid <andre.schmid@est.tech>

9 files changed, 1684 insertions, 61 deletions

diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html
index 25ccf111a1..f3043ffebd 100644
--- a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html
@@ -24,6 +24,13 @@
       <div>{{ 'INTERFACE_DATA_EMPTY' | translate }}</div>
     </div>
   </div>
+  <div
+      class="top-add-btn add-btn"
+      [ngClass]="{'disabled': readonly}"
+      data-tests-id="add-operation"
+      (click)="onSelectInterfaceOperation(undefined, undefined)">
+    {{ 'INTERFACE_ADD_OPERATION' | translate }}
+  </div>
   <div class="operation-list">
     <div *ngIf="!isInterfaceListEmpty()">
       <div class="expand-collapse" *ngIf="isOperationListEmpty()">
@@ -38,11 +45,11 @@
         </a>
       </div>
 
-      <div class="interface-row" *ngFor="let interface of interfaces">
-        <div class="interface-accordion" (click)="interface.toggleCollapse()">
+      <div class="interface-row" *ngFor="let interface1 of interfaces">
+        <div class="interface-accordion" (click)="interface1.toggleCollapse()">
           <span
               class="chevron-container"
-              [ngClass]="{'isCollapsed': interface.isCollapsed}"
+              [ngClass]="{'isCollapsed': interface1.isCollapsed}"
               *ngIf="isOperationListEmpty()">
               <svg-icon
                   name="caret1-down-o"
@@ -50,10 +57,10 @@
                   size="small">
               </svg-icon>
           </span>
-          <span class="interface-name">{{interface.type}}</span>
+          <span class="interface-name">{{interface1.type}}</span>
         </div>
 
-        <div class="generic-table" *ngIf="!interface.isCollapsed && isOperationListEmpty()">
+        <div class="generic-table" *ngIf="!interface1.isCollapsed && isOperationListEmpty()">
           <div class="header-row table-row">
             <span
                 class="cell header-cell field-name header-name">
@@ -63,20 +70,14 @@
               {{ 'INTERFACE_HEADER_DESCRIPTION' | translate }}
             </span>
           </div>
-
-          <div class="data-row" *ngFor="let operation of interface.operations"
-               (click)="onSelectInterfaceOperation(interface, operation)">
-            <span
-                class="cell field-name">
-                {{operation.name}}
-            </span>
-            <span class="cell field-description"
-                  [ngClass]="{'collapsed': operation.isCollapsed}">
-              {{operation.getDescriptionEllipsis()}}
+          <div class="data-row" *ngFor="let operation of interface1.operations" (click)="onSelectInterfaceOperation(interface1, operation)">
+            <span class="cell field-name">{{operation.name}}</span>
+            <span class="cell field-description" [ngClass]="{'collapsed': operation.isCollapsed}">
+                {{operation.getDescriptionEllipsis()}}
               <span class="more-or-less link" (click)="operation.toggleCollapsed($event)">
-                {{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}}
+                  {{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}}
+                </span>
               </span>
-            </span>
           </div>
         </div>
       </div>
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts
index 8dd17f60e2..c9a6d07057 100644
--- a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts
@@ -20,26 +20,27 @@
 */
 import {Component, ComponentRef, Inject, Input} from '@angular/core';
 import {Component as IComponent} from 'app/models/components/component';
+import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service';
 
 import {ISdcConfig, SdcConfigToken} from "app/ng2/config/sdc-config.config";
 import {TranslateService} from "app/ng2/shared/translator/translate.service";
-
+import {IModalButtonComponent, SdcUiServices} from 'onap-ui-angular';
 import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
+
 import {ModalService} from 'app/ng2/services/modal.service';
-import {ButtonModel, CapabilitiesGroup, ModalModel, OperationModel} from 'app/models';
+import {
+    ButtonModel,
+    CapabilitiesGroup,
+    InputBEModel,
+    InterfaceModel,
+    ModalModel,
+    OperationModel,
+    WORKFLOW_ASSOCIATION_OPTIONS
+} from 'app/models';
 
 import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
-
-import {SdcUiServices} from 'onap-ui-angular';
 import {TopologyTemplateService} from "../../services/component-services/topology-template.service";
-import {
-    ComponentInterfaceDefinitionModel,
-    InputOperationParameter,
-    InterfaceOperationModel
-} from "../../../models/interfaceOperation";
-import {
-    PropertyParamRowComponent
-} from "../composition/interface-operatons/operation-creator/property-param-row/property-param-row.component";
+import {InterfaceOperationModel} from "../../../models/interfaceOperation";
 import {
     InterfaceOperationHandlerComponent
 } from "../composition/interface-operatons/operation-creator/interface-operation-handler.component";
@@ -49,15 +50,17 @@ import {
 import {ToscaArtifactModel} from "../../../models/toscaArtifact";
 import {ToscaArtifactService} from "../../services/tosca-artifact.service";
 import {
-    UIInterfaceOperationModel
-} from "../composition/interface-operatons/interface-operations.component";
+    InterfaceOperationComponent
+} from "../interface-operation/interface-operation.page.component";
+import {Observable} from "rxjs/Observable";
+import {PluginsService} from 'app/ng2/services/plugins.service';
 
 export class UIOperationModel extends OperationModel {
     isCollapsed: boolean = true;
     isEllipsis: boolean;
     MAX_LENGTH = 75;
 
-    constructor(operation: UIOperationModel) {
+    constructor(operation: OperationModel) {
         super(operation);
 
         if (!operation.description) {
@@ -109,15 +112,14 @@ class ModalTranslation {
     }
 }
 
-export class UIInterfaceModel extends ComponentInterfaceDefinitionModel {
+export class UIInterfaceModel extends InterfaceModel {
     isCollapsed: boolean = false;
 
     constructor(interf?: any) {
         super(interf);
-        this.operations = _.map(
-            this.operations,
-            (operation) => new UIInterfaceOperationModel(operation)
-        );
+        if (this.operations) {
+            this.operations = this.operations.map((operation) => new UIOperationModel(operation));
+        }
     }
 
     toggleCollapse() {
@@ -130,16 +132,14 @@ export class UIInterfaceModel extends ComponentInterfaceDefinitionModel {
     selector: 'interface-definition',
     templateUrl: './interface-definition.page.component.html',
     styleUrls: ['interface-definition.page.component.less'],
-    providers: [ModalService, TranslateService]
+    providers: [ModalService, TranslateService, InterfaceOperationComponent]
 })
-
 export class InterfaceDefinitionComponent {
 
     modalInstance: ComponentRef<ModalComponent>;
     interfaces: UIInterfaceModel[];
-    inputs: Array<InputOperationParameter> = [];
+    inputs: InputBEModel[];
 
-    properties: Array<PropertyParamRowComponent> = [];
     deploymentArtifactsFilePath: Array<DropdownValue> = [];
 
     toscaArtifactTypes: Array<DropdownValue> = [];
@@ -153,6 +153,10 @@ export class InterfaceDefinitionComponent {
     capabilities: CapabilitiesGroup;
     isViewOnly: boolean;
 
+    openOperation: OperationModel;
+    enableWorkflowAssociation: boolean;
+    workflowIsOnline: boolean;
+
     @Input() component: IComponent;
     @Input() readonly: boolean;
     @Input() enableMenuItems: Function;
@@ -167,19 +171,52 @@ export class InterfaceDefinitionComponent {
         private modalServiceNg2: ModalService,
         private modalServiceSdcUI: SdcUiServices.ModalService,
         private topologyTemplateService: TopologyTemplateService,
-        private toscaArtifactService: ToscaArtifactService
+        private toscaArtifactService: ToscaArtifactService,
+        private ComponentServiceNg2: ComponentServiceNg2,
+        private WorkflowServiceNg2: WorkflowServiceNg2,
+        private ModalServiceSdcUI: SdcUiServices.ModalService,
+        private PluginsService: PluginsService
     ) {
         this.modalTranslation = new ModalTranslation(translateService);
         this.interfaceTypesMap = new Map<string, string[]>();
     }
 
     ngOnInit(): void {
-        console.info("this.component.lifecycleState ", this.component.lifecycleState);
-        if (this.component) {
-            this.isViewOnly = this.component.componentMetadata.isComponentDataEditable();
-            this.initInterfaceDefinition();
-            this.loadInterfaceTypes();
-            this.loadToscaArtifacts();
+        this.isLoading = true;
+        this.interfaces = [];
+        this.workflowIsOnline = !_.isUndefined(this.PluginsService.getPluginByStateUrl('workflowDesigner'));
+        Observable.forkJoin(
+            this.ComponentServiceNg2.getInterfaceOperations(this.component),
+            this.ComponentServiceNg2.getComponentInputs(this.component),
+            this.ComponentServiceNg2.getInterfaceTypes(this.component),
+            this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.component.componentType, this.component.uniqueId)
+        ).subscribe((response: any[]) => {
+            const callback = (workflows) => {
+                this.isLoading = false;
+                this.initInterfaces(response[0].interfaces);
+                this.sortInterfaces();
+                this.inputs = response[1].inputs;
+                this.interfaceTypes = response[2];
+                this.workflows = (workflows.items) ? workflows.items : workflows;
+                this.capabilities = response[3].capabilities;
+            };
+            if (this.enableWorkflowAssociation && this.workflowIsOnline) {
+                this.WorkflowServiceNg2.getWorkflows().subscribe(
+                    callback,
+                    (err) => {
+                        this.workflowIsOnline = false;
+                        callback([]);
+                    }
+                );
+            } else {
+                callback([]);
+            }
+        });
+    }
+
+    initInterfaces(interfaces: InterfaceModel[]): void {
+        if (interfaces) {
+            this.interfaces = interfaces.map((interf) => new UIInterfaceModel(interf));
         }
     }
 
@@ -190,15 +227,18 @@ export class InterfaceDefinitionComponent {
     private disableSaveButton = (): boolean => {
         return this.isViewOnly ||
             (this.isEnableAddArtifactImplementation()
-                && (!this.modalInstance.instance.dynamicContent.instance.toscaArtifactTypeSelected ||
-                    !this.modalInstance.instance.dynamicContent.instance.artifactName)
+                && (!this.modalInstance.instance.dynamicContent.toscaArtifactTypeSelected ||
+                    !this.modalInstance.instance.dynamicContent.artifactName)
             );
     }
 
     onSelectInterfaceOperation(interfaceModel: UIInterfaceModel, operation: InterfaceOperationModel) {
+        const isEdit = operation !== undefined;
         const cancelButton: ButtonModel = new ButtonModel(this.modalTranslation.CANCEL_BUTTON, 'outline white', this.cancelAndCloseModal);
-        const saveButton: ButtonModel = new ButtonModel(this.modalTranslation.SAVE_BUTTON, 'blue', () =>
-            this.updateOperation(), this.disableSaveButton);
+        const saveButton: ButtonModel = new ButtonModel(this.modalTranslation.SAVE_BUTTON, 'blue',
+            () => isEdit ? this.updateOperation() : this.createOperationCallback(),
+            this.disableSaveButton
+        );
         const interfaceDataModal: ModalModel =
             new ModalModel('l', this.modalTranslation.EDIT_TITLE, '', [saveButton, cancelButton], 'custom');
         this.modalInstance = this.modalServiceNg2.createCustomModal(interfaceDataModal);
@@ -209,12 +249,14 @@ export class InterfaceDefinitionComponent {
             {
                 deploymentArtifactsFilePath: this.deploymentArtifactsFilePath,
                 toscaArtifactTypes: this.toscaArtifactTypes,
-                selectedInterface: interfaceModel,
-                selectedInterfaceOperation: operation,
+                selectedInterface: interfaceModel ? interfaceModel : new UIInterfaceModel(),
+                selectedInterfaceOperation: operation ? operation : new InterfaceOperationModel(),
                 validityChangedCallback: this.disableSaveButton,
                 isViewOnly: this.isViewOnly,
+                isEdit: isEdit,
                 interfaceTypesMap: this.interfaceTypesMap,
-            });
+            }
+        );
         this.modalInstance.instance.open();
     }
 
@@ -239,6 +281,27 @@ export class InterfaceDefinitionComponent {
         this.modalServiceNg2.closeCurrentModal();
     }
 
+    private createOperationCallback(): void {
+        const operationToUpdate = this.modalInstance.instance.dynamicContent.instance.operationToUpdate;
+        console.log('createOperationCallback', operationToUpdate);
+        console.log('this.component', this.component);
+        this.componentServiceNg2.createComponentInterfaceOperation(this.component.uniqueId, this.component.getTypeUrl(), operationToUpdate)
+        .subscribe((newOperation: InterfaceOperationModel) => {
+            const foundInterface = this.interfaces.find(value => value.type === newOperation.interfaceType);
+            if (foundInterface) {
+                foundInterface.operations.push(new UIOperationModel(new OperationModel(newOperation)));
+            } else {
+                const uiInterfaceModel = new UIInterfaceModel();
+                uiInterfaceModel.type = newOperation.interfaceType;
+                uiInterfaceModel.uniqueId = newOperation.interfaceType;
+                uiInterfaceModel.operations = [];
+                uiInterfaceModel.operations.push(new UIOperationModel(new OperationModel(newOperation)));
+                this.interfaces.push(uiInterfaceModel);
+            }
+        });
+        this.modalServiceNg2.closeCurrentModal();
+    }
+
     private handleEnableAddArtifactImplementation = (newOperation: InterfaceOperationModel): InterfaceOperationModel => {
         if (!this.isEnableAddArtifactImplementation()) {
             newOperation.implementation.artifactType = null;
@@ -248,7 +311,7 @@ export class InterfaceDefinitionComponent {
     }
 
     private isEnableAddArtifactImplementation = (): boolean => {
-        return this.modalInstance.instance.dynamicContent.instance.enableAddArtifactImplementation;
+        return this.modalInstance.instance.dynamicContent.enableAddArtifactImplementation;
     }
 
     private initInterfaceDefinition() {
@@ -257,7 +320,7 @@ export class InterfaceDefinitionComponent {
         this.topologyTemplateService.getComponentInterfaceOperations(this.component.componentType, this.component.uniqueId)
         .subscribe((response) => {
             if (response.interfaces) {
-                this.interfaces = _.map(response.interfaces, (interfaceModel) => new UIInterfaceModel(interfaceModel));
+                this.interfaces = response.interfaces.map((interfaceModel) => new UIInterfaceModel(interfaceModel));
             }
             this.isLoading = false;
         });
@@ -301,11 +364,11 @@ export class InterfaceDefinitionComponent {
     }
 
     isAllCollapsed(): boolean {
-        return _.every(this.interfaces, (interfaceData) => interfaceData.isCollapsed);
+        return this.interfaces.every((interfaceData) => interfaceData.isCollapsed);
     }
 
     isAllExpanded(): boolean {
-        return _.every(this.interfaces, (interfaceData) => !interfaceData.isCollapsed);
+        return this.interfaces.every((interfaceData) => !interfaceData.isCollapsed);
     }
 
     isInterfaceListEmpty(): boolean {
@@ -313,8 +376,92 @@ export class InterfaceDefinitionComponent {
     }
 
     isOperationListEmpty(): boolean {
-        return _.filter(this.interfaces, (interfaceData) =>
-            interfaceData.operations && interfaceData.operations.length > 0).length > 0;
+        return this.interfaces.filter((interfaceData) => interfaceData.operations && interfaceData.operations.length > 0).length > 0;
+    }
+
+    onRemoveOperation = (event: Event, operation: OperationModel): void => {
+        event.stopPropagation();
+
+        const deleteButton: IModalButtonComponent = {
+            id: 'deleteButton',
+            text: this.modalTranslation.DELETE_BUTTON,
+            type: 'primary',
+            size: 'small',
+            closeModal: true,
+            callback: () => {
+                this.ComponentServiceNg2
+                .deleteInterfaceOperation(this.component, operation)
+                .subscribe(() => {
+                    const curInterf = this.interfaces.find((interf) => interf.type === operation.interfaceType);
+                    const index = curInterf.operations.findIndex((el) => el.uniqueId === operation.uniqueId);
+                    curInterf.operations.splice(index, 1);
+                    if (!curInterf.operations.length) {
+                        const interfIndex = this.interfaces.findIndex((interf) => interf.type === operation.interfaceType);
+                        this.interfaces.splice(interfIndex, 1);
+                    }
+                });
+            }
+        };
+
+        const cancelButton: IModalButtonComponent = {
+            id: 'cancelButton',
+            text: this.modalTranslation.CANCEL_BUTTON,
+            type: 'secondary',
+            size: 'small',
+            closeModal: true,
+            callback: () => {
+                this.openOperation = null;
+            },
+        };
+
+        this.ModalServiceSdcUI.openWarningModal(
+            this.modalTranslation.DELETE_TITLE,
+            this.modalTranslation.deleteText(operation.name),
+            'deleteOperationModal',
+            [deleteButton, cancelButton],
+        );
+    }
+
+    private createOperation = (operation: OperationModel): void => {
+        this.ComponentServiceNg2.createInterfaceOperation(this.component, operation).subscribe((response: OperationModel) => {
+            this.openOperation = null;
+
+            let curInterf = this.interfaces.find((interf) => interf.type === operation.interfaceType);
+
+            if (!curInterf) {
+                curInterf = new UIInterfaceModel({
+                    type: response.interfaceType,
+                    uniqueId: response.uniqueId,
+                    operations: []
+                });
+                this.interfaces.push(curInterf);
+            }
+
+            const newOpModel = new UIOperationModel(response);
+            curInterf.operations.push(newOpModel);
+            this.sortInterfaces();
+
+            if (operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXTERNAL && operation.artifactData) {
+                this.ComponentServiceNg2.uploadInterfaceOperationArtifact(this.component, newOpModel, operation).subscribe();
+            } else if (response.workflowId && operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXISTING) {
+                this.WorkflowServiceNg2.associateWorkflowArtifact(this.component, response).subscribe();
+            } else if (operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW) {
+                this.$state.go('workspace.plugins', {path: 'workflowDesigner'});
+            }
+        });
+    }
+
+    private enableOrDisableSaveButton = (shouldEnable: boolean): void => {
+        const saveButton = this.modalInstance.instance.dynamicContent.getButtonById('saveButton');
+        saveButton.disabled = !shouldEnable;
+    }
+
+    private sortInterfaces(): void {
+        this.interfaces = this.interfaces.filter((interf) => interf.operations && interf.operations.length > 0); // remove empty interfaces
+        this.interfaces.sort((a, b) => a.type.localeCompare(b.type)); // sort interfaces alphabetically
+        this.interfaces.forEach((interf) => {
+            interf.operations.sort((a, b) => a.name.localeCompare(b.name)); // sort operations alphabetically
+        });
     }
 
 }
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/operation-creator-interface-definition.component.html b/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/operation-creator-interface-definition.component.html
new file mode 100644
index 0000000000..687c79fe86
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/operation-creator-interface-definition.component.html
@@ -0,0 +1,211 @@
+<!--
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2022 Nordix Foundation. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+-->
+  
+<div class="operation-creator-interface-definition">
+    <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
+
+    <form class="w-sdc-form">
+
+        <div class="side-by-side">
+            <div class="form-item">
+                <sdc-dropdown
+                    label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
+                    [required]="true"
+                    testId="interface-name"
+                    [selectedOption]="getSelectedDropdown(interfaceNames, operation.interfaceType)"
+                    placeHolder="Select..."
+                    [disabled]="readonly"
+                    (changed)="onSelectInterface($event)"
+                    [options]="interfaceNames">
+                </sdc-dropdown>
+            </div>
+
+            <div class="form-item" *ngIf="!isInterfaceOther()">
+                <sdc-dropdown
+                    #operationNamesDropdown
+                    label="{{ 'OPERATION_NAME' | translate }}"
+                    [required]="true"
+                    testId="operation-name"
+                    [selectedOption]="getSelectedDropdown(operationNames, 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"
+                    (valueChange)="onChangeName()"
+                    [disabled]="readonly">
+                </sdc-input>
+            </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="enableWorkflowAssociation">
+            <div class="form-item">
+                <sdc-dropdown
+                    #workflowAssignmentDropdown
+                    label="{{ 'OPERATION_WORKFLOW_ASSIGNMENT' | translate }}"
+                    placeHolder="Select..."
+                    testId="association-type"
+                    [selectedOption]="toDropDownOption(workflowAssociationType)"
+                    [options]="associationOptions"
+                    (changed)="toggleAssociateWorkflow($event)"
+                    [disabled]="readonly">
+                </sdc-dropdown>
+            </div>
+
+            <div class="form-item" *ngIf="!isUsingExistingWF() && !isUsingExternalWF()"></div>
+
+            <div
+                *ngIf="isUsingExternalWF()"
+                class="form-item sdc-input">
+                <label class="sdc-input__label">{{ 'OPERATION_ARTIFACT' | translate }}</label>
+                <div class="i-sdc-form-item i-sdc-form-file-upload">
+                    <span
+                        class="i-sdc-form-file-name"
+                        data-tests-id="artifactFilename">
+                        {{ operation.artifactFileName }}
+                    </span>
+                    <div
+                        *ngIf="operation.artifactFileName"
+                        class="i-sdc-form-file-upload-x-btn"
+                        data-tests-id="clearArtifact"
+                        (click)="onChangeArtifactFile({ target: {} })"></div>
+                    <label
+                        class="i-sdc-form-file-upload-label"
+                        [ngClass]="{'disabled': readonly}">
+                        <input
+                            type="file"
+                            base-sixty-four-input
+                            maxsize="10240"
+                            data-tests-id="artifactUpload"
+                            (change)="onChangeArtifactFile($event)"
+                            (click)="$event.target.value = ''"
+                        />
+                        <div class="file-upload-browse-btn">Browse</div>
+                    </label>
+                </div>
+            </div>
+
+            <div class="form-item sdc-input" *ngIf="isUsingExistingWF()">
+                <label class="sdc-input__label required">{{ 'OPERATION_WORKFLOW' | translate }}
+                    <span class="archive-warning" *ngIf="workflowIsOnline && archivedWorkflowId === operation.workflowId">({{ 'OPERATION_WORKFLOW_ARCHIVED' | translate }})</span>
+                    <span class="no-workflow-warning" *ngIf="!workflowIsOnline">{{ 'OPERATION_NO_WORKFLOW_CONNECTION' | translate }}</span>
+                    <span class="no-workflow-warning" *ngIf="workflowIsOnline && !workflows.length">{{ 'OPERATION_NO_WORKFLOW_ERROR' | translate }}</span>
+                </label>
+                <sdc-dropdown
+                    placeHolder="Select..."
+                    testId="associated-workflow"
+                    [selectedOption]="getSelectedDropdown(workflows, operation.workflowId)"
+                    [options]="workflows"
+                    (changed)="onSelectWorkflow($event)"
+                    [disabled]="readonly || !workflows.length || !workflowIsOnline">
+                </sdc-dropdown>
+            </div>
+
+            <div class="form-item sdc-input" *ngIf="isUsingExistingWF()">
+                <sdc-dropdown
+                    *ngIf="workflowIsOnline && workflows.length"
+                    label="{{ 'OPERATION_WORKFLOW_VERSION' | translate }}"
+                    testId="associated-workflow-version"
+                    [selectedOption]="getSelectedDropdown(workflowVersions, operation.workflowVersionId)"
+                    [options]="workflowVersions"
+                    (changed)="changeWorkflowVersion($event)"
+                    [disabled]="!operation.workflowId || archivedWorkflowId === operation.workflowId || readonly">
+                </sdc-dropdown>
+            </div>
+        </div>
+
+        <div class="separator-buttons">
+            <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true">
+                <tab tabTitle="Inputs"></tab>
+                <tab tabTitle="Outputs"></tab>
+            </tabs>
+            <a
+                class="add-param-link add-btn"
+                *ngIf="!isUsingExistingWF() && !readonly"
+                data-tests-id="addInputParameter"
+                [ngClass]="{'disabled':!canAdd()}"
+                (click)="addParam()">{{ currentTab === TYPE_INPUT ? 'Add Input' : 'Add Output' }}</a>
+        </div>
+
+        <div class="generic-table">
+            <div class="header-row table-row">
+                <span class="cell header-cell field-name">{{ 'OPERATION_PARAM_NAME' | translate }}</span>
+                <span class="cell header-cell field-type">{{ 'OPERATION_PARAM_TYPE' | translate }}</span>
+                <span class="cell header-cell field-property" *ngIf="currentTab == TYPE_INPUT">
+                    {{ 'OPERATION_PARAM_PROPERTY' | translate }}
+                    <span
+                        *ngIf="!isUsingExistingWF()"
+                        class="sprite-new info-icon"
+                        tooltip="{{propertyTooltipText}}"
+                        tooltipDelay="0">
+                    </span>
+                </span>
+                <span class="cell header-cell field-mandatory" *ngIf="!isUsingExistingWF()">{{ 'OPERATION_PARAM_MANDATORY' | translate }}</span>
+                <span class="cell header-cell remove" *ngIf="!isUsingExistingWF() && !readonly">●●●</span>
+            </div>
+
+            <div class="empty-msg data-row" *ngIf="tableParameters.length === 0">
+                <div>{{ 'EMPTY_PARAM_TABLE_HEADER' | translate }}</div>
+                <div *ngIf="isUsingExistingWF() && !operation.workflowVersionId">
+                    <div *ngIf="workflows.length">
+                        <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">
+                        Only <span class="bold-message">certified</span> workflow versions can be assigned to an operation
+                    </div>
+                </div>
+            </div>
+
+            <param-row
+                    *ngFor="let param of tableParameters"
+                    class="data-row"
+                    [isInputParam]="currentTab === TYPE_INPUT"
+                    [isAssociateWorkflow]="isUsingExistingWF()"
+                    [param]="param"
+                    [inputProps]="inputProperties"
+                    [capabilitiesProps]="componentCapabilities"
+                    [operationOutputs]="operationOutputs"
+                    [onRemoveParam]="onRemoveParam"
+                    [readonly]="readonly"
+                    [validityChanged]="validityChanged">
+            </param-row>
+        </div>
+
+    </form>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/operation-creator-interface-definition.component.less b/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/operation-creator-interface-definition.component.less
new file mode 100644
index 0000000000..0afaa47ca3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/operation-creator-interface-definition.component.less
@@ -0,0 +1,200 @@
+/*
+* ============LICENSE_START=======================================================
+* SDC
+* ================================================================================
+*  Copyright (C) 2022 Nordix Foundation. All rights reserved.
+*  ================================================================================
+*  Licensed under the Apache License, Version 2.0 (the "License");
+*  you may not use this file except in compliance with the License.
+*  You may obtain a copy of the License at
+*
+*        http://www.apache.org/licenses/LICENSE-2.0
+*  Unless required by applicable law or agreed to in writing, software
+*  distributed under the License is distributed on an "AS IS" BASIS,
+*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*  See the License for the specific language governing permissions and
+*  limitations under the License.
+*
+*  SPDX-License-Identifier: Apache-2.0
+*  ============LICENSE_END=========================================================
+*/
+@import '../../../../../assets/styles/variables.less';
+@import '../../../../../assets/styles/override.less';
+
+.operation-creator-interface-definition {
+    font-family: @font-opensans-regular;
+    user-select: none;
+    padding-top: 12px;
+    padding-bottom: 20px;
+
+    .i-sdc-form-label {
+        font-size: 12px;
+    }
+
+    .w-sdc-form .i-sdc-form-item {
+        margin-bottom: 15px;
+    }
+
+    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;
+
+        .sdc-input__input {
+            height: 38px;
+        }
+    }
+
+    .side-by-side {
+        display: flex;
+
+        .form-item {
+            flex: 1;
+
+            &:first-child {
+                margin-right: 14px;
+                flex-basis: 37%;
+                flex-grow: 0;
+                flex-shrink: 0;
+            }
+
+            &:nth-child(3) {
+                margin-left: 14px;
+                flex: 0.4;
+            }
+
+            .i-sdc-form-file-upload {
+                height: 37px;
+                margin-bottom: 0;
+
+                .i-sdc-form-file-name {
+                    padding: 8px 10px;
+                }
+
+                .i-sdc-form-file-upload-x-btn {
+                    top: 13px;
+                }
+
+                .file-upload-browse-btn {
+                    height: 100%;
+                    padding: 7px 6px;
+                    z-index: 1;
+                }
+            }
+
+        }
+    }
+
+    .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;
+    }
+
+    .separator-buttons {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+
+        .add-param-link {
+            &:not(.disabled):hover {
+                cursor: pointer;
+            }
+        }
+
+        .tab {
+            width: 84px;
+            text-align: center;
+        }
+    }
+
+    .generic-table {
+        max-height: 244px;
+        min-height: 91px;
+        background: @main_color_p;
+
+        .header-row .header-cell {
+            .info-icon {
+                float: right;
+                position: relative;
+                top: 2px;
+            }
+            /deep/ .tooltip-inner {
+                padding: 2px;
+                max-width: 270px;
+                font-size: 11px;
+            }
+            &.remove {
+                padding: 10px;
+                font-size: 10px;
+            }
+        }
+
+        .data-row {
+            &.empty-msg {
+                .bold-message {
+                    font-family: @font-opensans-bold;
+                }
+
+                :first-child {
+                    &:not(:only-child) {
+                        margin: 6px 0;
+                    }
+                }
+
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                padding: 14px;
+            }
+        }
+
+        /deep/ .cell {
+            &.field-name, &.field-type {
+                flex: 1;
+            }
+
+            &.field-property {
+                &, &:last-child {
+                    flex: 1;
+                }
+            }
+
+            &.field-mandatory {
+                flex: 0.5;
+                text-align: center;
+            }
+
+            &.remove {
+                min-width: 40px;
+                max-width: 40px;
+            }
+        }
+
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/operation-creator-interface-definition.component.ts b/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/operation-creator-interface-definition.component.ts
new file mode 100644
index 0000000000..1897e3190d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/operation-creator-interface-definition.component.ts
@@ -0,0 +1,582 @@
+/*
+* ============LICENSE_START=======================================================
+* SDC
+* ================================================================================
+*  Copyright (C) 2022 Nordix Foundation. All rights reserved.
+*  ================================================================================
+*  Licensed under the Apache License, Version 2.0 (the "License");
+*  you may not use this file except in compliance with the License.
+*  You may obtain a copy of the License at
+*
+*        http://www.apache.org/licenses/LICENSE-2.0
+*  Unless required by applicable law or agreed to in writing, software
+*  distributed under the License is distributed on an "AS IS" BASIS,
+*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*  See the License for the specific language governing permissions and
+*  limitations under the License.
+*
+*  SPDX-License-Identifier: Apache-2.0
+*  ============LICENSE_END=========================================================
+*/
+import * as _ from "lodash";
+import {Component, ViewChild} from '@angular/core';
+
+import {TranslateService} from "app/ng2/shared/translator/translate.service";
+import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service';
+import {
+    Capability,
+    InputBEModel,
+    InterfaceModel,
+    OperationModel,
+    OperationParameter,
+    WORKFLOW_ASSOCIATION_OPTIONS
+} from 'app/models';
+
+import {Tabs} from "app/ng2/components/ui/tabs/tabs.component";
+import {
+    DropdownValue
+} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+import {IDropDownOption} from 'onap-ui-angular';
+import {DropDownComponent} from "onap-ui-angular/dist/components";
+import {DROPDOWN_OPTION_TYPE} from "app/utils";
+import {Subscription} from "rxjs";
+
+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: string;
+
+    constructor(value: string, label?: string, type?: string) {
+        super(value, label);
+        this.type = type;
+    }
+}
+
+export interface OperationCreatorInput {
+    allWorkflows: Array<any>,
+    inputOperation: OperationModel,
+    interfaces: Array<InterfaceModel>,
+    inputProperties: Array<InputBEModel>,
+    enableWorkflowAssociation: boolean,
+    readonly: boolean,
+    interfaceTypes: { [interfaceType: string]: Array<string> },
+    validityChangedCallback: Function,
+    workflowIsOnline: boolean,
+    capabilities: Array<Capability>
+}
+
+@Component({
+    selector: 'operation-creator-interface-definition',
+    templateUrl: './operation-creator-interface-definition.component.html',
+    styleUrls: ['./operation-creator-interface-definition.component.less'],
+    providers: [TranslateService]
+})
+
+export class OperationCreatorInterfaceDefinitionComponent implements OperationCreatorInput {
+
+    input: OperationCreatorInput;
+    inputOperation: OperationModel;
+    interfaces: Array<InterfaceModel>;
+    operation: OperationModel;
+    interfaceNames: Array<TypedDropDownOption> = [];
+    interfaceTypes: { [interfaceType: string]: Array<string> };
+    operationNames: Array<TypedDropDownOption> = [];
+    validityChangedCallback: Function;
+    capabilities: Array<Capability>;
+
+    allWorkflows: Array<any>;
+    workflows: Array<DropdownValue> = [];
+    workflowVersions: Array<DropdownValue> = [];
+    inputProperties: Array<InputBEModel> = [];
+    archivedWorkflowId: string = '&';
+
+    inputParameters: Array<OperationParameter> = [];
+    noAssignInputParameters: Array<OperationParameter> = [];
+    assignInputParameters: { [key: string]: { [key: string]: Array<OperationParameter>; }; } = {};
+
+    outputParameters: Array<OperationParameter> = [];
+    noAssignOutputParameters: Array<OperationParameter> = [];
+    assignOutputParameters: { [key: string]: { [key: string]: Array<OperationParameter>; }; } = {};
+    componentCapabilities: Array<Capability> = [];
+
+    tableParameters: Array<OperationParameter> = [];
+    operationOutputs: Array<OperationModel> = [];
+
+    associationOptions: Array<DropdownValue> = [];
+    workflowAssociationType: string;
+
+    enableWorkflowAssociation: boolean;
+    workflowIsOnline: boolean;
+    isEditMode: boolean = false;
+    isLoading: boolean = false;
+    readonly: boolean;
+
+    propertyTooltipText: String;
+
+    TYPE_INPUT = 'Inputs';
+    TYPE_OUTPUT = 'Outputs';
+
+    INTERFACE_OTHER_HEADER = 'Local Interfaces';
+    INTERFACE_OTHER = 'Local';
+
+    @ViewChild('propertyInputTabs') propertyInputTabs: Tabs;
+    @ViewChild('operationNamesDropdown') operationNamesDropdown: DropDownComponent;
+    @ViewChild('workflowAssignmentDropdown') workflowAssignmentDropdown: DropDownComponent;
+    currentTab: String;
+
+    constructor(private workflowServiceNg2: WorkflowServiceNg2, private translateService: TranslateService) {
+        this.translateService.languageChangedObservable.subscribe(lang => {
+            this.propertyTooltipText = this.translateService.translate("OPERATION_PROPERTY_TOOLTIP_TEXT");
+
+            this.associationOptions = [
+                new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXTERNAL, this.translateService.translate("EXTERNAL_WORKFLOW_ASSOCIATION")),
+                new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.translateService.translate("EXISTING_WORKFLOW_ASSOCIATION")),
+            ];
+
+            this.workflowAssociationType = this.operation.workflowAssociationType;
+        });
+
+        this.currentTab = this.TYPE_INPUT;
+    }
+
+    createInterfaceDropdown(type: string) {
+        let label = type;
+        const lastDot = label.lastIndexOf('.');
+        if (lastDot > -1) {
+            label = label.substr(lastDot + 1);
+        }
+        return new TypedDropDownOption(type, label);
+    }
+
+    ngOnInit() {
+        this.interfaceNames = _.map(
+            _.keys(this.interfaceTypes),
+            type => this.createInterfaceDropdown(type)
+        );
+        this.interfaceNames.unshift(new TypedDropDownOption('Existing Interfaces', 'Existing Interfaces', DROPDOWN_OPTION_TYPE.HEADER));
+        this.interfaceNames = this.interfaceNames.concat([
+            new TypedDropDownOption(' ', ' ', DROPDOWN_OPTION_TYPE.HORIZONTAL_LINE),
+            new TypedDropDownOption(this.INTERFACE_OTHER_HEADER, this.INTERFACE_OTHER_HEADER, DROPDOWN_OPTION_TYPE.HEADER),
+            new TypedDropDownOption(this.INTERFACE_OTHER)
+        ]);
+        const inputOperation = this.inputOperation;
+        this.operation = new OperationModel(inputOperation || {});
+
+        this.operationOutputs = _.reduce(
+            this.interfaces,
+            (acc: Array<OperationModel>, interf) => [
+                ...acc,
+                ..._.filter(
+                    interf.operations,
+                    op => op.uniqueId !== this.operation.uniqueId
+                ),
+            ],
+            []);
+
+        if (this.enableWorkflowAssociation) {
+            if (this.workflowIsOnline) {
+                this.workflows = _.map(
+                    _.filter(
+                        this.allWorkflows,
+                        (workflow: any) => {
+                            if (workflow.archiving === this.workflowServiceNg2.WF_STATE_ACTIVE) {
+                                return true;
+                            }
+                            if (workflow.archiving === this.workflowServiceNg2.WF_STATE_ARCHIVED &&
+                                workflow.id === this.operation.workflowId) {
+                                this.archivedWorkflowId = workflow.id;
+                                return true;
+                            }
+                            return false;
+                        }
+                    ),
+                    (workflow: any) => new DropdownValue(workflow.id, workflow.name)
+                );
+            } else {
+                this.workflows = [];
+            }
+        }
+        this.reconstructOperation();
+        this.filterCapabilities();
+        this.validityChanged();
+        this.updateTable();
+    }
+
+    ngAfterViewInit() {
+        if (this.workflowAssignmentDropdown) {
+            this.workflowAssignmentDropdown.allOptions = this.associationOptions && this.associationOptions.length ?
+                this.associationOptions :
+                [
+                    new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXTERNAL, this.translateService.translate("EXTERNAL_WORKFLOW_ASSOCIATION")),
+                    new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.translateService.translate("EXISTING_WORKFLOW_ASSOCIATION")),
+                ];
+        }
+    }
+
+    reconstructOperation = () => {
+
+        const buildAndUpdate = () => {
+            this.buildParams();
+            this.updateTable();
+        };
+
+        const inputOperation = this.inputOperation;
+        if (inputOperation) {
+            this.onSelectInterface(new DropDownOption(this.operation.interfaceType));
+
+            if (this.enableWorkflowAssociation && inputOperation.workflowVersionId && this.isUsingExistingWF(inputOperation)) {
+                this.assignInputParameters[this.operation.workflowId] = {[inputOperation.workflowVersionId]: []};
+                this.assignOutputParameters[this.operation.workflowId] = {[inputOperation.workflowVersionId]: []};
+                this.inputParameters = this.assignInputParameters[this.operation.workflowId][this.operation.workflowVersionId];
+                this.outputParameters = this.assignOutputParameters[this.operation.workflowId][this.operation.workflowVersionId];
+
+                const sub = this.onSelectWorkflow(new DropDownOption(inputOperation.workflowId), inputOperation.workflowVersionId);
+                if (sub) {
+                    sub.add(() => {
+                        buildAndUpdate();
+                        this.operation.workflowVersionId = '-1';
+                        setTimeout(() => this.operation.workflowVersionId = this.inputOperation.workflowVersionId);
+                    });
+                } else {
+                    buildAndUpdate();
+                }
+            } else {
+                this.inputParameters = this.noAssignInputParameters;
+                this.outputParameters = this.noAssignOutputParameters;
+                buildAndUpdate();
+            }
+
+            if (inputOperation.uniqueId) {
+                this.isEditMode = true;
+            }
+        }
+
+    }
+
+    filterCapabilities() {
+        this.componentCapabilities = _.filter(this.capabilities, (cap: Capability) => cap.properties);
+    }
+
+    buildParams = () => {
+
+        if (this.inputOperation.outputs) {
+            this.currentTab = this.TYPE_OUTPUT;
+            this.updateTable();
+            _.forEach(
+                [...this.inputOperation.outputs.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)),
+                (output: OperationParameter) => {
+                    this.addParam({...output, required: Boolean(output.required)});
+                }
+            );
+        }
+
+        this.currentTab = this.TYPE_INPUT;
+        this.updateTable();
+        if (this.inputOperation.inputs) {
+            _.forEach(
+                [...this.inputOperation.inputs.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)),
+                (input: OperationParameter) => {
+                    this.addParam({...input, required: Boolean(input.required)});
+                }
+            );
+        }
+
+    }
+
+    isInterfaceOther(): boolean {
+        return this.operation.interfaceType === this.INTERFACE_OTHER;
+    }
+
+    onSelectInterface(interf: IDropDownOption) {
+        if (interf && this.operation.interfaceType !== interf.value) {
+            this.operation.name = null;
+        }
+        this.operation.interfaceType = interf && interf.value;
+        this.operationNames = !this.operation.interfaceType ? [] : (
+            _.map(
+                this.interfaceTypes[this.operation.interfaceType],
+                name => {
+                    const curInterf = _.find(
+                        this.interfaces,
+                        interf => interf.type === this.operation.interfaceType
+                    );
+                    const existingOp = _.find(
+                        curInterf && curInterf.operations || [],
+                        op => op.name === name
+                    );
+                    const ddType = (existingOp && existingOp.uniqueId !== this.operation.uniqueId) ? DROPDOWN_OPTION_TYPE.HORIZONTAL_LINE : DROPDOWN_OPTION_TYPE.SIMPLE;
+                    return new TypedDropDownOption(name, name, ddType);
+                }
+            )
+        );
+        if (this.operationNamesDropdown) {
+            this.operationNamesDropdown.allOptions = <IDropDownOption[]>this.operationNames;
+        }
+        this.validityChanged();
+    }
+
+    onSelectOperationName(name: IDropDownOption) {
+        if (name) {
+            this.operation.name = name.value;
+        }
+        this.validityChanged();
+    }
+
+    onChangeName() {
+        this.validityChanged();
+    }
+
+    get descriptionValue() {
+        return this.operation.description;
+    }
+
+    set descriptionValue(v) {
+        this.operation.description = v || null;
+        this.validityChanged();
+    }
+
+    onSelectWorkflow(workflowId: DropDownOption, selectedVersionId?: string): Subscription {
+
+        if (_.isUndefined(workflowId) || !this.workflowIsOnline) {
+            return;
+        }
+
+        if (this.operation.workflowId === workflowId.value && !selectedVersionId) {
+            return;
+        }
+
+        this.operation.workflowId = workflowId.value;
+        if (!this.assignInputParameters[this.operation.workflowId]) {
+            this.assignInputParameters[this.operation.workflowId] = {};
+            this.assignOutputParameters[this.operation.workflowId] = {};
+        }
+        this.operation.workflowName = workflowId.label;
+        if (!this.assignInputParameters[this.operation.workflowName]) {
+            this.assignInputParameters[this.operation.workflowName] = {};
+            this.assignOutputParameters[this.operation.workflowName] = {};
+        }
+
+        this.isLoading = true;
+        this.validityChanged();
+        return this.workflowServiceNg2.getWorkflowVersions(this.operation.workflowId).subscribe((versions: Array<any>) => {
+            this.isLoading = false;
+
+            this.workflowVersions = _.map(
+                _.filter(
+                    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] && version.id !== selectedVersionId) {
+                        this.assignInputParameters[this.operation.workflowId][version.id] = _.map(version.inputs, (input: any) => {
+                            return new OperationParameter({
+                                ...input,
+                                type: input.type.toLowerCase(),
+                                required: Boolean(input.mandatory)
+                            });
+                        })
+                        .sort((a, b) => a.name.localeCompare(b.name));
+
+                        this.assignOutputParameters[this.operation.workflowId][version.id] = _.map(version.outputs, (output: any) => {
+                            return new OperationParameter({
+                                ...output,
+                                type: output.type.toLowerCase(),
+                                required: Boolean(output.mandatory)
+                            });
+                        })
+                        .sort((a, b) => a.name.localeCompare(b.name));
+                    }
+                    return new DropdownValue(version.id, `V ${version.name}`);
+                }
+            );
+            if (!selectedVersionId && this.workflowVersions.length) {
+                this.operation.workflowVersionId = _.last(this.workflowVersions).value;
+                this.operation.workflowVersion = _.last(this.workflowVersions).label;
+            }
+
+            this.changeWorkflowVersion(new DropDownOption(this.operation.workflowVersionId));
+            this.validityChanged();
+        });
+
+    }
+
+    changeWorkflowVersion(versionId: DropDownOption) {
+
+        if (_.isUndefined(versionId) || !this.workflowIsOnline) {
+            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(type: DropDownOption) {
+
+        if (_.isUndefined(type)) {
+            return;
+        }
+
+        this.operation.workflowAssociationType = type.value;
+        this.workflowAssociationType = this.operation.workflowAssociationType;
+
+        if (!this.isUsingExistingWF()) {
+            this.inputParameters = this.noAssignInputParameters;
+            this.outputParameters = this.noAssignOutputParameters;
+        } else {
+            if (!this.operation.workflowId || !this.operation.workflowVersionId) {
+                this.inputParameters = [];
+                this.outputParameters = [];
+            } else {
+                this.inputParameters = this.assignInputParameters[this.operation.workflowId][this.operation.workflowVersionId];
+                this.outputParameters = this.assignOutputParameters[this.operation.workflowId][this.operation.workflowVersionId];
+            }
+        }
+
+        this.updateTable();
+        this.validityChanged();
+
+    }
+
+    onChangeArtifactFile(e: any) {
+        const file = e.target.files && e.target.files[0];
+        this.operation.artifactFileName = file && file.name;
+
+        if (!this.operation.artifactFileName) {
+            this.operation.artifactData = null;
+            this.validityChanged();
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            this.isLoading = false;
+            const result = <String>reader.result;
+            this.operation.artifactData = result.substring(result.indexOf(',') + 1);
+            this.validityChanged();
+        }
+
+        this.isLoading = true;
+        reader.readAsDataURL(file);
+    }
+
+    tabChanged = (event) => {
+
+        this.currentTab = event.title;
+        this.updateTable();
+
+    }
+
+    updateTable() {
+
+        switch (this.currentTab) {
+            case this.TYPE_INPUT:
+                this.tableParameters = this.inputParameters;
+                break;
+            case this.TYPE_OUTPUT:
+                this.tableParameters = this.outputParameters;
+                break;
+        }
+
+    }
+
+    addParam(param?: OperationParameter): void {
+        this.tableParameters.push(new OperationParameter(param || {required: false}));
+        this.validityChanged();
+    }
+
+    canAdd = (): boolean => {
+
+        let valid = true;
+        if (this.currentTab === this.TYPE_INPUT) {
+            _.forEach(this.inputParameters, param => {
+                if (!param.name || !param.inputId) {
+                    valid = false;
+                }
+            });
+        } else {
+            _.forEach(this.outputParameters, param => {
+                if (!param.name || !param.type) {
+                    valid = false;
+                }
+            });
+        }
+
+        return valid;
+
+    }
+
+    isParamsValid = (): boolean => {
+
+        let valid = true;
+        _.forEach(this.inputParameters, param => {
+            if (!param.name || !param.inputId) {
+                valid = false;
+            }
+        });
+        _.forEach(this.outputParameters, param => {
+            if (!param.name || !param.type) {
+                valid = false;
+            }
+        });
+
+        return valid;
+
+    }
+
+    onRemoveParam = (param: OperationParameter): void => {
+        let index = _.indexOf(this.tableParameters, param);
+        this.tableParameters.splice(index, 1);
+        this.validityChanged();
+    }
+
+    createParamLists = () => {
+        this.operation.createInputsList(this.inputParameters);
+        this.operation.createOutputsList(this.outputParameters);
+    }
+
+    isUsingExistingWF = (operation?: OperationModel): boolean => {
+        operation = operation || this.operation;
+        return operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXISTING;
+    }
+
+    isUsingExternalWF = (operation?: OperationModel): boolean => {
+        operation = operation || this.operation;
+        return operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXTERNAL;
+    }
+
+    shouldCreateWF = (operation?: OperationModel): boolean => {
+        operation = operation || this.operation;
+        return operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW;
+    }
+
+    checkFormValidForSubmit = (): boolean => {
+        return this.operation.name &&
+            (!this.isUsingExistingWF() || this.operation.workflowVersionId) &&
+            this.isParamsValid();
+    }
+
+    validityChanged = () => {
+        let validState = this.checkFormValidForSubmit();
+        this.validityChangedCallback(validState);
+    }
+
+    getSelectedDropdown(options: DropdownValue[], selectedValue: string): DropdownValue {
+        const selectedDropdown = _.find(options, (option) => option.value === selectedValue);
+        return selectedDropdown || this.toDropDownOption(null);
+    }
+
+    toDropDownOption(val: string) {
+        return {value: val, label: val};
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/operation-creator-interface-definition.module.ts b/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/operation-creator-interface-definition.module.ts
new file mode 100644
index 0000000000..7f75240735
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/operation-creator-interface-definition.module.ts
@@ -0,0 +1,52 @@
+/*
+* ============LICENSE_START=======================================================
+* SDC
+* ================================================================================
+*  Copyright (C) 2022 Nordix Foundation. All rights reserved.
+*  ================================================================================
+*  Licensed under the Apache License, Version 2.0 (the "License");
+*  you may not use this file except in compliance with the License.
+*  You may obtain a copy of the License at
+*
+*        http://www.apache.org/licenses/LICENSE-2.0
+*  Unless required by applicable law or agreed to in writing, software
+*  distributed under the License is distributed on an "AS IS" BASIS,
+*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*  See the License for the specific language governing permissions and
+*  limitations under the License.
+*
+*  SPDX-License-Identifier: Apache-2.0
+*  ============LICENSE_END=========================================================
+*/
+import {NgModule} from "@angular/core";
+import {ParamRowComponent} from "./param-row/param-row.component";
+import {OperationCreatorInterfaceDefinitionComponent} from "./operation-creator-interface-definition.component";
+import {UiElementsModule} from "../../../components/ui/ui-elements.module";
+import {TranslateModule} from "../../../shared/translator/translate.module";
+import {SdcUiComponentsModule} from "onap-ui-angular";
+import {CommonModule} from "@angular/common";
+import {FormsModule} from "@angular/forms";
+import {FormElementsModule} from "../../../components/ui/form-components/form-elements.module";
+
+@NgModule({
+    declarations: [
+        OperationCreatorInterfaceDefinitionComponent,
+        ParamRowComponent
+    ],
+    imports: [
+        CommonModule,
+        SdcUiComponentsModule,
+        FormsModule,
+        FormElementsModule,
+        TranslateModule,
+        UiElementsModule
+    ],
+    exports: [],
+    entryComponents: [
+        OperationCreatorInterfaceDefinitionComponent
+    ],
+    providers: []
+})
+
+export class OperationCreatorInterfaceDefinitionModule {
+}
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/param-row/param-row.component.html b/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/param-row/param-row.component.html
new file mode 100644
index 0000000000..1ed0375a16
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/param-row/param-row.component.html
@@ -0,0 +1,100 @@
+<!--
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2022 Nordix Foundation. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+-->
+ 
+<div class="cell field-name">
+    <ui-element-input
+        *ngIf="!isAssociateWorkflow"
+        [testId]="'param-name-' + (param.name || 'unnamed')"
+        [(value)]="param.name"
+        (valueChange)="onChangeName()"
+        [readonly]="readonly">
+    </ui-element-input>
+    <span *ngIf="isAssociateWorkflow">{{param.name}}</span>
+</div>
+
+<div class="cell field-type">
+    <ui-element-dropdown
+        *ngIf="!isAssociateWorkflow"
+        [testId]="'param-type-' + (param.name || 'unnamed')"
+        [values]="propTypeEnum"
+        [(value)]="param.type"
+        (valueChange)="onChangeType()"
+        [readonly]="readonly">
+    </ui-element-dropdown>
+    <span *ngIf="isAssociateWorkflow">{{param.type}}</span>
+</div>
+
+<div class="cell field-property" *ngIf="isInputParam">
+    <select
+        *ngIf="filteredInputProps.length || operationOutputCats.length || !isAssociateWorkflow"
+        [(ngModel)]="param.inputId"
+        (change)="onChangeProperty($event)"
+        [ngClass]="{'disabled': readonly}"
+        [attr.data-tests-id]="'value-param-property-' + (param.name || 'unnamed')">
+        <option
+            *ngFor="let prop of filteredInputProps"
+            [ngValue]="prop.value">
+            {{prop.label}}
+        </option>
+        <optgroup
+            *ngFor="let operation of operationOutputCats"
+            label="{{operation.operationName}}">
+            <option
+                *ngFor="let output of operation.outputs"
+                [ngValue]="output.value">
+                {{output.label}}
+            </option>
+        </optgroup>
+        <optgroup
+                *ngFor="let cap of filteredCapabilitiesProps"
+                label="{{cap.capabilityName}}">
+            <option
+                    *ngFor="let prop of cap.properties"
+                    [ngValue]="prop.value">
+                {{prop.label}}
+            </option>
+        </optgroup>
+    </select>
+    <span
+        *ngIf="!filteredInputProps.length && !operationOutputCats.length && isAssociateWorkflow"
+        class="no-properties-error">
+        {{ 'PARAM_NONE_OF_TYPE' | translate }}
+    </span>
+</div>
+
+<div class="cell field-mandatory" *ngIf="!isAssociateWorkflow">
+    <checkbox
+        *ngIf="!isAssociateWorkflow"
+        [attr.data-tests-id]="'param-mandatory-' + (param.name || 'unnamed')"
+        [(checked)]="param.required"
+        [ngClass]="{'disabled':readonly}">
+    </checkbox>
+</div>
+
+<div class="cell remove" *ngIf="!isAssociateWorkflow && !readonly">
+    <svg-icon
+        name="trash-o"
+        mode="info"
+        size="small"
+        [attr.data-tests-id]="'param-remove-' + (param.name || 'unnamed')"
+        (click)="onRemoveParam(param)"
+        [clickable]="true">
+  </svg-icon>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/param-row/param-row.component.less b/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/param-row/param-row.component.less
new file mode 100644
index 0000000000..d616bad1f9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/param-row/param-row.component.less
@@ -0,0 +1,73 @@
+/*
+* ============LICENSE_START=======================================================
+* SDC
+* ================================================================================
+*  Copyright (C) 2022 Nordix Foundation. All rights reserved.
+*  ================================================================================
+*  Licensed under the Apache License, Version 2.0 (the "License");
+*  you may not use this file except in compliance with the License.
+*  You may obtain a copy of the License at
+*
+*        http://www.apache.org/licenses/LICENSE-2.0
+*  Unless required by applicable law or agreed to in writing, software
+*  distributed under the License is distributed on an "AS IS" BASIS,
+*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*  See the License for the specific language governing permissions and
+*  limitations under the License.
+*
+*  SPDX-License-Identifier: Apache-2.0
+*  ============LICENSE_END=========================================================
+*/
+@import '../../../../../../assets/styles/variables.less';
+
+.remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg-icon {
+        position: relative;
+        right: -3px;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+}
+
+
+.cell {
+    min-height: 50px;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+    > * {
+        flex-basis: 100%;
+    }
+
+    /deep/ select {
+        height: 30px;
+    }
+
+    input {
+        height: 30px;
+        border: none;
+        padding-left: 10px;
+    }
+
+    select {
+        width: 100%;
+    }
+
+    &.field-property {
+        &:last-child {
+            flex: 1;
+        }
+
+        .no-properties-error {
+            color: @func_color_q;
+            font-style: italic;
+        }
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/param-row/param-row.component.ts b/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/param-row/param-row.component.ts
new file mode 100644
index 0000000000..43760ba117
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/param-row/param-row.component.ts
@@ -0,0 +1,257 @@
+/*
+* ============LICENSE_START=======================================================
+* SDC
+* ================================================================================
+*  Copyright (C) 2022 Nordix Foundation. All rights reserved.
+*  ================================================================================
+*  Licensed under the Apache License, Version 2.0 (the "License");
+*  you may not use this file except in compliance with the License.
+*  You may obtain a copy of the License at
+*
+*        http://www.apache.org/licenses/LICENSE-2.0
+*  Unless required by applicable law or agreed to in writing, software
+*  distributed under the License is distributed on an "AS IS" BASIS,
+*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*  See the License for the specific language governing permissions and
+*  limitations under the License.
+*
+*  SPDX-License-Identifier: Apache-2.0
+*  ============LICENSE_END=========================================================
+*/
+import {Component, Input} from '@angular/core';
+import {DataTypeService} from "app/ng2/services/data-type.service";
+import {
+    Capability,
+    DataTypeModel,
+    InputBEModel,
+    OperationModel,
+    OperationParameter
+} from 'app/models';
+import {
+    DropdownValue
+} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+import {WorkspaceService} from "../../../workspace/workspace.service";
+
+class DropdownValueType extends DropdownValue {
+    type: string;
+
+    constructor(value: string, label: string, type?: string) {
+        super(value, label);
+        if (type) {
+            this.type = type;
+        }
+    }
+}
+
+@Component({
+    selector: 'param-row',
+    templateUrl: './param-row.component.html',
+    styleUrls: ['./param-row.component.less']
+})
+
+export class ParamRowComponent {
+    @Input() param: OperationParameter;
+    @Input() inputProps: Array<InputBEModel>;
+    @Input() operationOutputs: Array<OperationModel>;
+    @Input() capabilitiesProps: Array<Capability>;
+    @Input() onRemoveParam: Function;
+    @Input() isAssociateWorkflow: boolean;
+    @Input() readonly: boolean;
+    @Input() isInputParam: boolean;
+    @Input() validityChanged: Function;
+
+    propTypeEnum: Array<string> = [];
+    operationOutputCats: Array<{ operationName: string, outputs: Array<DropdownValueType> }> = [];
+    filteredInputProps: Array<DropdownValue> = [];
+    filteredCapabilitiesProps: Array<{ capabilityName: string, properties: Array<DropdownValueType> }> = [];
+
+    constructor(private dataTypeService: DataTypeService, protected workspaceService: WorkspaceService) {
+    }
+
+    ngOnInit() {
+        if (this.isInputParam) {
+            this.propTypeEnum = _.uniq(
+                _.map(
+                    _.concat(
+                        this.getPrimitiveSubtypes(),
+                        _.reduce(
+                            this.operationOutputs,
+                            (acc, op) => [...acc, ...op.outputs.listToscaDataDefinition],
+                            []),
+                        _.reduce(
+                            this.capabilitiesProps,
+                            (acc, capab) => [...acc, ...capab.properties],
+                            [])
+                    ),
+                    prop => prop.type
+                )
+            );
+        } else {
+            const dataTypes: Array<DataTypeModel> = _.toArray(this.dataTypeService.getDataTypeByModel(this.workspaceService.metadata.model));
+            this.propTypeEnum = _.concat(
+                _.map(
+                    _.filter(
+                        dataTypes,
+                        type => this.isTypePrimitive(type.name)
+                    ),
+                    type => type.name
+                ).sort(),
+                _.map(
+                    _.filter(
+                        dataTypes,
+                        type => !this.isTypePrimitive(type.name)
+                    ),
+                    type => type.name
+                ).sort()
+            );
+        }
+
+        this.onChangeType();
+        this.validityChanged();
+    }
+
+    onChangeName() {
+        this.validityChanged();
+    }
+
+    onChangeType() {
+        if (!this.isInputParam) {
+            this.validityChanged();
+            return;
+        }
+
+        this.filteredInputProps = _.map(
+            _.filter(
+                this.getPrimitiveSubtypes(),
+                prop => !this.param.type || prop.type === this.param.type
+            ),
+            prop => new DropdownValue(prop.uniqueId, prop.name)
+        );
+        this.filteredInputProps.unshift(new DropdownValue("", ""));
+
+        this.operationOutputCats = _.filter(
+            _.map(
+                this.operationOutputs,
+                op => {
+                    return {
+                        operationName: `${op.displayType()}.${op.name}`,
+                        outputs: _.map(
+                            _.filter(op.outputs.listToscaDataDefinition, output => !this.param.type || output.type === this.param.type),
+                            output => new DropdownValueType(
+                                `${op.interfaceType}.${op.name}.${output.name}`,
+                                output.name,
+                                output.type
+                            )
+                        )
+                    };
+                }
+            ),
+            category => category.outputs.length > 0
+        );
+
+        this.filteredCapabilitiesProps = _.filter(
+            _.map(
+                this.capabilitiesProps,
+                cap => {
+                    return {
+                        capabilityName: cap.name,
+                        properties: _.map(
+                            _.filter(cap.properties, prop => !this.param.type || prop.type === this.param.type),
+                            prop => new DropdownValueType(
+                                prop.uniqueId,
+                                prop.name,
+                                prop.type
+                            )
+                        )
+                    };
+                }
+            ),
+            capability => capability.properties.length > 0
+        );
+
+        if (this.param.inputId) {
+            const selProp = this.getSelectedProp();
+            if (selProp && selProp.type === this.param.type) {
+                this.param.inputId = '-1';
+                setTimeout(() => this.param.inputId = selProp.uniqueId || selProp.value);
+            } else {
+                this.param.inputId = null;
+            }
+        }
+
+        this.validityChanged();
+    }
+
+    onChangeProperty() {
+        const newProp = this.getSelectedProp();
+
+        if (!this.param.type) {
+            this.param.type = newProp.type;
+            this.onChangeType();
+        }
+
+        if (!this.param.name) {
+            this.param.name = newProp.name || newProp.label;
+        }
+
+        this.validityChanged();
+    }
+
+    getPrimitiveSubtypes(): Array<InputBEModel> {
+        const flattenedProps: Array<any> = [];
+        const dataTypes = this.dataTypeService.getDataTypeByModel(this.workspaceService.metadata.model);
+
+        _.forEach(this.inputProps, prop => {
+            const type: DataTypeModel = _.find(
+                _.toArray(dataTypes),
+                (type: DataTypeModel) => type.name === prop.type
+            );
+            flattenedProps.push(prop);
+            if (!type) {
+                console.error('Could not find prop in dataTypes: ', prop);
+            } else {
+                if (type.properties) {
+                    _.forEach(type.properties, subType => {
+                        if (this.isTypePrimitive(subType.type)) {
+                            flattenedProps.push({
+                                type: subType.type,
+                                name: `${prop.name}.${subType.name}`,
+                                uniqueId: `${prop.uniqueId}.${subType.name}`
+                            });
+                        }
+                    });
+                }
+            }
+        });
+
+        return flattenedProps;
+    }
+
+    getSelectedProp() {
+        return _.find(
+            this.getPrimitiveSubtypes(),
+            prop => this.param.inputId === prop.uniqueId
+        ) || _.find(
+            _.reduce(
+                this.operationOutputCats,
+                (acc, cat) => [...acc, ...cat.outputs],
+                []),
+            (out: DropdownValueType) => this.param.inputId === out.value
+        ) || _.find(
+            _.reduce(
+                this.filteredCapabilitiesProps,
+                (acc, cap) => [...acc, ...cap.properties],
+                []),
+            (prop: DropdownValueType) => this.param.inputId === prop.value
+        );
+    }
+
+    isTypePrimitive(type: string): boolean {
+        return (
+            type === 'string' ||
+            type === 'integer' ||
+            type === 'float' ||
+            type === 'boolean'
+        );
+    }
+}