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

3 files changed, 56 insertions, 12 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
+}
diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts
index 38714c96da..636217fb68 100644
--- a/catalog-ui/src/app/ng2/services/data-type.service.ts
+++ b/catalog-ui/src/app/ng2/services/data-type.service.ts
@@ -20,9 +20,15 @@
 
 import * as _ from "lodash";
 import {Inject, Injectable} from '@angular/core';
-import {DataTypeModel, DataTypesMap, PropertyFEModel, DerivedFEProperty, PropertyBEModel} from "app/models";
-import { DataTypesService } from "app/services/data-types-service";
-import { PROPERTY_DATA } from "app/utils";
+import {
+    DataTypeModel,
+    DataTypesMap,
+    DerivedFEProperty,
+    PropertyBEModel,
+    PropertyFEModel
+} from "app/models";
+import {DataTypesService} from "app/services/data-types-service";
+import {PROPERTY_DATA} from "app/utils";
 import {DerivedFEAttribute} from "../../models/attributes-outputs/derived-fe-attribute";
 import {ISdcConfig} from "../config/sdc-config.config.factory";
 import {SdcConfigToken} from "../config/sdc-config.config";
@@ -62,7 +68,7 @@ export class DataTypeService {
     }
 
     public getDataTypeByTypeName(typeName: string): DataTypeModel {
-        if(!this.dataTypes){
+        if (!this.dataTypes) {
             this.dataTypes = this.dataTypeService.getAllDataTypes();
         }
         if (!this.dataTypes[typeName]) console.log("MISSING Datatype: " + typeName);
@@ -97,6 +103,15 @@ export class DataTypeService {
         return this.httpClient.put<PropertyBEModel>(url, property);
     }
 
+    public deleteProperty(dataTypeId: string, propertyId: string): Observable<Object> {
+        const url = `${this.dataTypeUrl}/${dataTypeId}/${propertyId}`;
+        let headers = new HttpHeaders({'USER_ID': this.authService.getLoggedinUser().userId});
+        let options = {headers: headers};
+        return this.httpClient.delete(url, options).map((res: Response) => {
+            return propertyId;
+        });
+    }
+
     public createImportedType(model: string, importingFile: File): Observable<any> {
         const url = `${this.dataTypeUploadUrl}/datatypesyaml`;
         const formData = new FormData();
@@ -109,7 +124,7 @@ export class DataTypeService {
         return this.httpClient.post<any>(url, formData, options);
     }
 
-    public getConstraintsByParentTypeAndUniqueID(rootPropertyType, propertyName){
+    public getConstraintsByParentTypeAndUniqueID(rootPropertyType, propertyName) {
         // const property = this.dataTypes[rootPropertyType].properties.filter(property =>
         //     property.name == propertyName);
         // return property[0] && property[0].constraints ? property[0].constraints[0].validValues : null;
@@ -121,7 +136,7 @@ export class DataTypeService {
         if (!dataTypeObj) return;
         if (dataTypeObj.properties) {
             dataTypeObj.properties.forEach((derivedProperty) => {
-                if(dataTypeObj.name !== PROPERTY_DATA.OPENECOMP_ROOT || derivedProperty.name !== PROPERTY_DATA.SUPPLEMENTAL_DATA){//The requirement is to not display the property supplemental_data
+                if (dataTypeObj.name !== PROPERTY_DATA.OPENECOMP_ROOT || derivedProperty.name !== PROPERTY_DATA.SUPPLEMENTAL_DATA) {//The requirement is to not display the property supplemental_data
                     propertiesArray.push(new DerivedFEProperty(derivedProperty, parentName));
                 }
                 let derivedDataTypeObj: DataTypeModel = this.getDataTypeByTypeName(derivedProperty.type);
@@ -139,7 +154,7 @@ export class DataTypeService {
         if (!dataTypeObj) return;
         if (dataTypeObj.attributes) {
             dataTypeObj.attributes.forEach((derivedAttribute) => {
-                if(dataTypeObj.name !== PROPERTY_DATA.OPENECOMP_ROOT || derivedAttribute.name !== PROPERTY_DATA.SUPPLEMENTAL_DATA){//The requirement is to not display the property supplemental_data
+                if (dataTypeObj.name !== PROPERTY_DATA.OPENECOMP_ROOT || derivedAttribute.name !== PROPERTY_DATA.SUPPLEMENTAL_DATA) {//The requirement is to not display the property supplemental_data
                     attributesArray.push(new DerivedFEAttribute(derivedAttribute, parentName));
                 }
                 let derivedDataTypeObj: DataTypeModel = this.getDataTypeByTypeName(derivedAttribute.type);
@@ -156,8 +171,8 @@ export class DataTypeService {
      * Checks for custom behavior for a given data type by checking if a function exists within data-type.service with that name
      * Additional custom behavior can be added by adding a function with the given dataType name
      */
-    public checkForCustomBehavior = (property:PropertyFEModel) => {
-        let shortTypeName:string = property.type.split('.').pop();
+    public checkForCustomBehavior = (property: PropertyFEModel) => {
+        let shortTypeName: string = property.type.split('.').pop();
         if (this[shortTypeName]) {
             this[shortTypeName](property); //execute function for given type, pass property as param
         }