Service operation UI merge

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

5 files changed, 121 insertions, 72 deletions

diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
index c0a6966ceb..84f3910c9b 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
@@ -5,13 +5,14 @@
 
         <div class="side-by-side">
             <div class="i-sdc-form-item">
-                <label class="i-sdc-form-label" [ngClass]="{'required': !isEditMode}">Operation Type</label>
-                <ui-element-dropdown
-                    data-tests-id="operationTypeDropdown"
-                    [values]="operation.OperationTypeEnum"
-                    [(value)]="operation.operationType"
-                    [readonly]="isEditMode">
-                </ui-element-dropdown>
+                <label class="i-sdc-form-label" [ngClass]="{'required': !isEditMode}">Operation Name</label>
+                <input
+                    type="text"
+                    name="type"
+                    data-tests-id="operationType"
+                    [(ngModel)]="operation.operationType"
+                    [attr.maxLength]="200"
+                    [ngClass]="{'disabled':isEditMode}" />
             </div>
 
             <div class="i-sdc-form-item" >
@@ -20,16 +21,18 @@
                     type="text"
                     data-tests-id="operationDescription"
                     name="description"
+                    [ngClass]="{'disabled': readonly}"
                     [(ngModel)]="operation.description"
                     [attr.maxLength]="200" />
             </div>
         </div>
 
-        <div class="i-sdc-form-item">
+        <div class="i-sdc-form-item" *ngIf="enableWorkflowAssociation">
             <checkbox
                 [label]="'Assign Workflow'"
                 [(checked)]="isAssociateWorkflow"
                 (checkedChange)="toggleAssociateWorkflow()"
+                [ngClass]="{'disabled': readonly}"
                 data-tests-id="checkbox-assign-workflow">
             </checkbox>
         </div>
@@ -39,6 +42,7 @@
                 <label class="i-sdc-form-label required">Workflow</label>
                 <ui-element-dropdown
                     data-tests-id="associated-workflow"
+                    [readonly]="readonly"
                     [values]="workflows"
                     [(value)]="operation.workflowId"
                     (valueChange)="onSelectWorkflow()">
@@ -49,7 +53,7 @@
                 <label class="i-sdc-form-label required">Workflow Version</label>
                 <ui-element-dropdown
                     data-tests-id="associated-workflow-version"
-                    [ngClass]="{'disabled': !operation.workflowId}"
+                    [readonly]="!operation.workflowId || readonly"
                     [values]="workflowVersions"
                     [(value)]="operation.workflowVersionId"
                     (valueChange)="changeWorkflowVersion()">
@@ -61,7 +65,7 @@
             <span class="input-param-title">Input Parameters</span>
             <a
                 class="add-param-link add-btn"
-                *ngIf="!isAssociateWorkflow"
+                *ngIf="!isAssociateWorkflow && !readonly"
                 data-tests-id="addInputParameter"
                 [ngClass]="{'disabled':!isParamsValid()}"
                 (click)="addParam()">Add Input Parameter</a>
@@ -70,7 +74,7 @@
         <div class="generic-table">
             <div class="header-row table-row">
                 <span class="cell header-cell field-name">Name</span>
-                <span class="cell header-cell">Type</span>
+                <span class="cell header-cell field-type">Type</span>
                 <span class="cell header-cell field-property">
                     Property
                     <span
@@ -81,7 +85,7 @@
                     </span>
                 </span>
                 <span class="cell header-cell field-mandatory" *ngIf="!isAssociateWorkflow">Mandatory</span>
-                <span class="cell header-cell remove" *ngIf="!isAssociateWorkflow">●●●</span>
+                <span class="cell header-cell remove" *ngIf="!isAssociateWorkflow && !readonly">●●●</span>
             </div>
 
             <div class="empty-msg data-row" *ngIf="inputParameters.length === 0">
@@ -98,13 +102,14 @@
             </div>
 
             <param-row
-                *ngFor="let param of inputParameters; let idx=index"
+                *ngFor="let param of inputParameters"
                 class="data-row"
                 [isAssociateWorkflow]="isAssociateWorkflow"
                 [param]="param"
                 [inputProps]="inputProperties"
                 [propTypes]="inputPropertyTypes"
-                [onRemoveParam]="onRemoveParam">
+                [onRemoveParam]="onRemoveParam"
+                [readonly]="readonly">
             </param-row>
         </div>
 
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
index f962bc2dca..e2b53bee65 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
@@ -84,14 +84,8 @@
         }
 
         /deep/ .cell {
-            &.field-name {
-                flex: 2;
-            }
-
-
-            &.field-mandatory {
-                flex: 0.5;
-                text-align: center;
+            &.field-name, &.field-type {
+                flex: 1;
             }
 
             &.field-property {
@@ -100,6 +94,11 @@
                 }
             }
 
+            &.field-mandatory {
+                flex: 0.5;
+                text-align: center;
+            }
+
             &.remove {
                 min-width: 40px;
             }
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 8d26055feb..d2bad5f02d 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,34 +5,45 @@ import {Subscription} from "rxjs/Subscription";
 
 import {TranslateService} from "app/ng2/shared/translator/translate.service";
 import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service';
-import {InputModel, OperationModel, OperationParameter} from 'app/models';
+import {OperationModel, OperationParameter, InputBEModel} from 'app/models';
 
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
 
+export interface OperationCreatorInput {
+    operation: OperationModel,
+    inputProperties: Array<InputBEModel>,
+    enableWorkflowAssociation: boolean,
+    readonly: boolean,
+    isService: boolean
+}
+
 @Component({
     selector: 'operation-creator',
     templateUrl: './operation-creator.component.html',
-    styleUrls:['./operation-creator.component.less'],
+    styleUrls: ['./operation-creator.component.less'],
     providers: [TranslateService]
 })
 
 export class OperationCreatorComponent {
 
-    input: any;
+    input: OperationCreatorInput;
     operation: OperationModel;
 
     workflows: Array<DropdownValue> = [];
     workflowVersions: Array<DropdownValue> = [];
     inputProperties: Array<DropdownValue> = [];
-    inputPropertyTypes: {};
+    inputPropertyTypes: { [key: string]: string };
 
     inputParameters: Array<OperationParameter> = [];
     noAssignInputParameters: Array<OperationParameter> = [];
     assignInputParameters: { [key: string]: { [key: string]: Array<OperationParameter>; }; } = {};
 
-    isAssociateWorkflow: boolean = false;
+    enableWorkflowAssociation: boolean;
+    isAssociateWorkflow: boolean;
     isEditMode: boolean = false;
     isLoading: boolean = false;
+    readonly: boolean;
+    isService: boolean;
 
     propertyTooltipText: String;
 
@@ -44,52 +55,64 @@ export class OperationCreatorComponent {
 
     ngOnInit() {
 
+        this.readonly = this.input.readonly;
+        this.isService = this.input.isService;
+        this.enableWorkflowAssociation = this.input.enableWorkflowAssociation && !this.isService;
+
         this.inputProperties = _.map(this.input.inputProperties,
-            (input: InputModel) => new DropdownValue(input.uniqueId, input.name)
+            (input: InputBEModel) => new DropdownValue(input.uniqueId, input.name)
         );
 
         this.inputPropertyTypes = {};
-        _.forEach(this.input.inputProperties, (input: InputModel) => {
+        _.forEach(this.input.inputProperties, (input: InputBEModel) => {
             this.inputPropertyTypes[input.uniqueId] = input.type;
         });
 
-        const inputOperation = <OperationModel>this.input.operation;
+        const inputOperation = this.input.operation;
         this.operation = new OperationModel(inputOperation || {});
 
-        const buildInputParams = () => {
-            if (inputOperation.inputParams) {
-                this.inputParameters = [];
-                _.forEach(inputOperation.inputParams.listToscaDataDefinition, (input: OperationParameter) => {
-                    this.addParam(input);
+        if (this.enableWorkflowAssociation) {
+            this.isLoading = true;
+            this.workflowServiceNg2.getWorkflows().subscribe(workflows => {
+                this.isLoading = false;
+                this.workflows = _.map(workflows, (workflow: any) => {
+                    return new DropdownValue(workflow.id, workflow.name);
                 });
-            }
-        }
-
-        this.isLoading = true;
-        this.workflowServiceNg2.getWorkflows().subscribe(workflows => {
-            this.isLoading = false;
-
-            this.workflows = _.map(workflows, (workflow: any) => {
-                return new DropdownValue(workflow.id, workflow.name);
+                this.reconstructOperation();
             });
+        } else {
+            this.reconstructOperation();
+        }
 
-            if (inputOperation) {
-                if (inputOperation.workflowVersionId) {
-                    this.isAssociateWorkflow = true;
-                    this.onSelectWorkflow(inputOperation.workflowVersionId).add(buildInputParams);
-                } else {
-                    this.inputParameters = this.noAssignInputParameters;
-                    this.isAssociateWorkflow = false;
-                    buildInputParams();
-                }
+    }
 
-                if (inputOperation.uniqueId) {
-                    this.isEditMode = true;
-                }
+    reconstructOperation = () => {
+        const inputOperation = this.input.operation;
+        if (inputOperation) {
+            if (!this.enableWorkflowAssociation || !inputOperation.workflowVersionId || this.isService) {
+                this.inputParameters = this.noAssignInputParameters;
+                this.isAssociateWorkflow = false;
+                this.buildInputParams();
+            } else {
+                this.isAssociateWorkflow = true;
+                this.onSelectWorkflow(inputOperation.workflowVersionId).add(this.buildInputParams);
             }
-        });
 
+            if (inputOperation.uniqueId) {
+                this.isEditMode = true;
+            }
+        }
+    }
 
+    buildInputParams = () => {
+        if (this.input.operation.inputParams) {
+            _.forEach(
+                [...this.input.operation.inputParams.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)),
+                (input: OperationParameter) => {
+                    this.addParam(input);
+                }
+            );
+        }
     }
 
     onSelectWorkflow(selectedVersionId?: string): Subscription {
@@ -104,7 +127,9 @@ export class OperationCreatorComponent {
             this.isLoading = false;
 
             this.workflowVersions = _.map(
-                _.filter(versions, version => version.state === this.workflowServiceNg2.VERSION_STATE_CERTIFIED),
+                _.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]) {
                         this.assignInputParameters[this.operation.workflowId][version.id] = _.map(version.inputs, (input: any) => {
@@ -114,14 +139,15 @@ export class OperationCreatorComponent {
                                 property: null,
                                 mandatory: input.mandatory,
                             });
-                        });
+                        })
+                        .sort((a, b) => a.name.localeCompare(b.name));
                     }
-                    return new DropdownValue(version.id, `v. ${version.name}`);
+                    return new DropdownValue(version.id, `V ${version.name}`);
                 }
             );
 
-            if (!selectedVersionId && versions.length) {
-                this.operation.workflowVersionId = _.last(versions.sort()).id;
+            if (!selectedVersionId && this.workflowVersions.length) {
+                this.operation.workflowVersionId = _.last(this.workflowVersions).value;
             }
             this.changeWorkflowVersion();
         });
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 2a72177621..25ecd2932e 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
@@ -1,9 +1,10 @@
 <div class="cell field-name">
-    <input
+    <ui-element-input
         *ngIf="!isAssociateWorkflow"
-        type="text"
         data-tests-id="paramName"
-        [(ngModel)]="param.name" />
+        [(value)]="param.name"
+        [readonly]="readonly">
+    </ui-element-input>
     <span *ngIf="isAssociateWorkflow">{{param.name}}</span>
 </div>
 
@@ -13,7 +14,8 @@
         data-tests-id="paramType"
         [values]="propTypeEnum"
         [(value)]="param.type"
-        (valueChange)="onChangeType()">
+        (valueChange)="onChangeType()"
+        [readonly]="readonly">
     </ui-element-dropdown>
     <span *ngIf="isAssociateWorkflow">{{param.type}}</span>
 </div>
@@ -22,7 +24,8 @@
     <ui-element-dropdown
         data-tests-id="paramProperty"
         [values]="filteredInputProps"
-        [(value)]="param.property">
+        [(value)]="param.property"
+        [readonly]="readonly">
     </ui-element-dropdown>
 </div>
 
@@ -30,11 +33,12 @@
     <checkbox
         *ngIf="!isAssociateWorkflow"
         data-tests-id="paramMandatory"
-        [(checked)]="param.mandatory">
+        [(checked)]="param.mandatory"
+        [ngClass]="{'disabled':readonly}">
     </checkbox>
 </div>
 
-<div class="cell remove" *ngIf="!isAssociateWorkflow">
+<div class="cell remove" *ngIf="!isAssociateWorkflow && !readonly">
     <span
         class="sprite-new delete-item-icon"
         data-tests-id="removeInputParam"
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 75d4fcf7d2..53dcffddd3 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
@@ -1,6 +1,8 @@
 import {Component, Input} from '@angular/core';
-import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+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";
 
 @Component({
     selector: 'param-row',
@@ -11,14 +13,27 @@ import {OperationParameter} from 'app/models';
 export class ParamRowComponent {
     @Input() param: OperationParameter;
     @Input() inputProps: Array<DropdownValue>;
-    @Input() propTypes: {};
+    @Input() propTypes: { [key: string]: string };
     @Input() onRemoveParam: Function;
     @Input() isAssociateWorkflow: boolean;
+    @Input() readonly: boolean;
 
-    propTypeEnum: Array<string> = ['boolean', 'float', 'integer', 'string'];
+    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.onChangeType();
     }