Service operation UI merge

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

1 files changed, 19 insertions, 14 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>