Add support for delete property from non-normative data type

Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>
Change-Id: I668b1e7f7d00e97b7827d759766e105fdd53ed53
Issue-ID: SDC-4378

2 files changed, 32 insertions, 3 deletions

diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.html b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.html
index e657520ee4..12b2d992a8 100644
--- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.html
+++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.html
@@ -32,14 +32,15 @@
         <div class="table-header head-row hand flex-item" *ngFor="let header of tableHeadersList" (click)="onUpdateSort(header.property)">{{header.title}}
           <span *ngIf="tableSortBy === header.property" class="table-header-sort-arrow" [ngClass]="{'down': tableColumnReverse, 'up': !tableColumnReverse}"></span>
         </div>
+        <div class="table-no-text-header head-row flex-item" *ngIf="!isViewOnly"><span class="delete-col-header"></span></div>
       </div>
 
       <div class="body">
         <div *ngIf="filteredProperties.length === 0" class="no-row-text">
           {{'PROPERTY_LIST_EMPTY_MESSAGE' | translate}}
         </div>
-        <div *ngFor="let property of filteredProperties" [attr.data-tests-id]="'property-row-' + property.name" class="flex-container data-row" (click)="onNameClick(property)">
-          <div class="table-col-general flex-item text" [title]="property.name">
+        <div *ngFor="let property of filteredProperties" [attr.data-tests-id]="'property-row-' + property.name" class="flex-container data-row">
+          <div class="table-col-general flex-item text" [title]="property.name" (click)="onNameClick(property)">
             <a [attr.data-tests-id]="'property-name-' + property.name" [ngClass]="{'disabled': false}">{{property.name}}</a>
           </div>
           <div class="table-col-general flex-item text" [title]="property.type">
@@ -54,6 +55,10 @@
           <div class="table-col-general flex-item text" [title]="property.description || ''">
             <span [attr.data-tests-id]="'property-description-' + property.name" [title]="property.description">{{property.description}}</span>
           </div>
+          <div class="table-btn-col flex-item" *ngIf="!isViewOnly">
+            <button class="table-delete-btn" data-ng-if="!property.ownerId || property.ownerId==component.uniqueId"
+                    (click)="delete(property); $event.stopPropagation();"  data-ng-class="{'disabled': isViewOnly}"></button>
+          </div>
         </div>
       </div>
 
diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts
index 60edd13c2d..f9eaa1332d 100644
--- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts
+++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts
@@ -32,6 +32,8 @@ import {TranslateService} from "../../../shared/translator/translate.service";
 import {AddPropertyComponent, PropertyValidationEvent} from "./add-property/add-property.component";
 import {IWorkspaceViewModelScope} from "../../../../view-models/workspace/workspace-view-model";
 import {SdcUiServices} from "onap-ui-angular/dist";
+import {PropertyModel} from "../../../../models/properties";
+import {SdcUiCommon, SdcUiComponents} from "onap-ui-angular";
 import {ToscaTypeHelper} from "../../../../utils/tosca-type-helper";
 
 @Component({
@@ -249,9 +251,31 @@ export class TypeWorkspacePropertiesComponent implements OnInit {
         }
         return null;
     }
+
+    delete(property: PropertyModel) {
+        let onOk: Function = (): void => {
+            this.dataTypeService.deleteProperty(this.dataType.uniqueId, property.uniqueId).subscribe((response) => {
+                const props = this.properties;
+                props.splice(props.findIndex(p => p.uniqueId === response), 1);
+                this.filter();
+            }, (error) => {
+                console.error(error);
+            });
+        };
+        let title: string = this.translateService.translate("PROPERTY_VIEW_DELETE_MODAL_TITLE");
+        let message: string = this.translateService.translate("PROPERTY_VIEW_DELETE_MODAL_TEXT", {'name': property.name});
+        const okButton = {
+            testId: "OK",
+            text: "OK",
+            type: SdcUiCommon.ButtonType.info,
+            callback: onOk,
+            closeModal: true
+        } as SdcUiComponents.ModalButtonComponent;
+        this.modalServiceSdcUI.openInfoModal(title, message, 'delete-modal', [okButton]);
+    };
 }
 
 interface TableHeader {
     title: string;
     property: string;
-}
\ No newline at end of file
+}