UI support for deleting services

Issue-ID: SDC-3962
Change-Id: Ib72a0c43b067cff31609bb47759497802a420511
Signed-off-by: JvD_Ericsson <jeff.van.dam@est.tech>

2 files changed, 51 insertions, 0 deletions

diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
index dad7b13e2a..532df0e2f9 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
@@ -45,6 +45,7 @@ import {
 import {
     CacheService
 } from 'app/services-ng2';
+import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
 import { AutomatedUpgradeService } from '../../ng2/pages/automated-upgrade/automated-upgrade.service';
 import { CatalogService } from '../../ng2/services/catalog.service';
 import { ComponentServiceNg2 } from '../../ng2/services/component-services/component.service';
@@ -151,6 +152,7 @@ export class WorkspaceViewModel {
         'ComponentServiceNg2',
         'AutomatedUpgradeService',
         'EventBusService',
+        'ModalServiceSdcUI',
         'PluginsService',
         'WorkspaceNg1BridgeService',
         'workspaceService'
@@ -176,6 +178,7 @@ export class WorkspaceViewModel {
                 private ComponentServiceNg2: ComponentServiceNg2,
                 private AutomatedUpgradeService: AutomatedUpgradeService,
                 private eventBusService: EventBusService,
+                private modalServiceSdcUI: SdcUiServices.ModalService,
                 private pluginsService: PluginsService,
                 private workspaceNg1BridgeService: WorkspaceNg1BridgeService,
                 private workspaceService: WorkspaceService) {
@@ -613,7 +616,48 @@ export class WorkspaceViewModel {
             this.ChangeLifecycleStateHandler.changeLifecycleState(this.$scope.component, data, this.$scope, onSuccess);
         };
 
+        this.$scope.deleteArchivedComponent = (): void => {
+            const modalTitle: string = this.$filter('translate')("COMPONENT_VIEW_DELETE_MODAL_TITLE");
+            const modalMessage: string = this.$filter('translate')("COMPONENT_VIEW_DELETE_MODAL_TEXT");
+            const modalButton = {
+                testId: 'ok-button',
+                text: this.sdcMenu.alertMessages.okButton,
+                type: SdcUiCommon.ButtonType.warning,
+                callback: this.$scope.handleDeleteArchivedComponent,
+                closeModal: true
+            } as SdcUiComponents.ModalButtonComponent;
+            this.modalServiceSdcUI.openWarningModal(modalTitle, modalMessage, 'alert-modal', [modalButton]);
+        };
 
+        this.$scope.handleDeleteArchivedComponent = (): void => {
+            this.$scope.isLoading = true;
+            const typeComponent = this.$scope.component.componentType;
+            this.ComponentServiceNg2.deleteComponent(typeComponent, this.$scope.component.uniqueId).subscribe(()=> {
+                this.deleteArchiveCache();
+                this.Notification.success({
+                    message: this.$scope.component.name + ' ' + this.$filter('translate')("DELETE_SUCCESS_MESSAGE_TEXT"),
+                    title: this.$filter('translate')("DELETE_SUCCESS_MESSAGE_TITLE")
+                });
+                if (this.$state.params.previousState) {
+                    switch (this.$state.params.previousState) {
+                        case 'catalog':
+                        case 'dashboard':
+                            this.$state.go(this.$state.params.previousState);
+                            break;
+                        default:
+                            this.$state.go('dashboard');
+                            break;
+                    }
+                }
+                this.$scope.isLoading = false;
+            }, () => {
+                this.Notification.error({
+                    message: this.$scope.component.name + ' ' + this.$filter('translate')('DELETE_FAILURE_MESSAGE_TEXT'),
+                    title: this.$filter('translate')('DELETE_FAILURE_MESSAGE_TITLE')
+                });
+                this.$scope.isLoading = false;
+            });
+        };
 
         this.$scope.isViewMode = ():boolean => {
             return this.$scope.mode === WorkspaceMode.VIEW;
diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view.html b/catalog-ui/src/app/view-models/workspace/workspace-view.html
index 2d5b234fbf..21cebeb388 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace-view.html
+++ b/catalog-ui/src/app/view-models/workspace/workspace-view.html
@@ -90,6 +90,13 @@
                         data-ng-class="{'disabled' : !isValidForm || isDisableMode() || isViewMode() || unsavedChanges}" ng-click="changeLifecycleState('deleteVersion')"
                         class="sprite-new delete-btn" data-tests-id="delete_version" sdc-smart-tooltip="Delete" prevent-double-click>Delete</span>
 
+                    <span ng-if="!isCreateMode() && component.isArchived"
+                          ng-click="deleteArchivedComponent()"
+                          class="sprite-new delete-btn"
+                          data-tests-id="delete_archive_version"
+                          sdc-smart-tooltip="Delete Service"
+                          prevent-double-click>Delete</span>
+
                     <span data-ng-click = "archiveComponent()"
                         ng-model-options="{ debounce: 300 }"
                         data-ng-class="{'disabled' : !component.isLatestVersion()}"