Allow to delete an interface operation from VFC

Issue-ID: SDC-4055
Change-Id: I43e79315dce12e2060f8b1dbdfcae29da46fc02e
Signed-off-by: stasys10 <stasys.jurgaitis@est.tech>
Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>
Signed-off-by: andre.schmid <andre.schmid@est.tech>

3 files changed, 35 insertions, 9 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 f3043ffebd..bf36df0593 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
@@ -69,15 +69,20 @@
             <span class="cell header-cell field-description header-description">
               {{ 'INTERFACE_HEADER_DESCRIPTION' | translate }}
             </span>
+            <span class="cell field-delete" *ngIf="!readonly"><span class="delete-col-header"></span></span>
           </div>
-          <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()}}
+          <div class="data-row" *ngFor="let operation of interface1.operations">
+            <span class="cell field-name"
+                  (click)="onSelectInterfaceOperation(interface1, operation)">{{operation.name}}</span>
+            <span class="cell field-description" (click)="onSelectInterfaceOperation(interface1, operation)"
+                  [ngClass]="{'collapsed': operation.isCollapsed}">{{operation.getDescriptionEllipsis()}}
               <span class="more-or-less link" (click)="operation.toggleCollapsed($event)">
                   {{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}}
-                </span>
               </span>
+            </span>
+            <span class="cell field-delete" *ngIf="!readonly">
+              <button class="table-delete-btn" (click)="onRemoveOperation(operation)"></button>
+            </span>
           </div>
         </div>
       </div>
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less
index 2b76c8c0ec..464732e016 100644
--- a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less
@@ -20,10 +20,21 @@
 */
 @import '../../../../assets/styles/variables.less';
 @import '../../../../assets/styles/override.less';
-
+@import '../../../../assets/styles/sprite-old.less';
 .interface-definition {
     font-size: 14px;
 
+    .delete-col-header{
+        .sprite;
+        .sprite.e-sdc-small-icon-delete;
+    }
+
+    .field-delete{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
     .interface-empty-msg {
         .bold-message {
             font-family: @font-opensans-bold;
@@ -184,10 +195,18 @@
 
                 .data-row {
                     cursor: pointer;
+                    .table-delete-btn{
+                        .sprite;
+                        .sprite.e-sdc-small-icon-delete;
+                        border: none;
+                        display: none !important;
+                    }
 
                     &:hover {
                         background: @sdcui_color_light-silver;
-
+                        .table-delete-btn{
+                            display: inline-block !important;
+                        }
                         .cell {
                             &.field-name {
                                 color: @sdcui_color_dark-blue;
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 5372fc919d..2a25ad90df 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
@@ -398,8 +398,10 @@ export class InterfaceDefinitionComponent {
         return this.interfaces.filter((interfaceData) => interfaceData.operations && interfaceData.operations.length > 0).length > 0;
     }
 
-    onRemoveOperation = (event: Event, operation: OperationModel): void => {
-        event.stopPropagation();
+    onRemoveOperation(operation: OperationModel): void {
+        if (this.readonly) {
+            return;
+        }
 
         const deleteButton: IModalButtonComponent = {
             id: 'deleteButton',