Add dialog window for deleting data views/dashboards and test functio…

…nality with new E2E-test (#3137)

* Add dialog window for deletion of data view and dashboards + add tests for this feature

* Enhance test with cancellation of deletion

* bug fixes and minor changes in data explorer

* new functions for data lake utils + fixes for delete-widget-test

ui/cypress/support/utils/datalake/DataLakeUtils.ts

@@ -184,6 +184,34 @@ export class DataLakeUtils {
         cy.dataCy('save-dashboard-btn', { timeout: 10000 }).click();
     }
 
+    public static deleteDashboard(dashboardName: string) {
+        cy.dataCy('delete-dashboard-' + dashboardName, {
+            timeout: 10000,
+        }).click();
+        cy.dataCy('confirm-delete', { timeout: 10000 }).click();
+    }
+
+    public static deleteDataView(dataViewName: string) {
+        cy.dataCy('delete-data-view-' + dataViewName, {
+            timeout: 10000,
+        }).click();
+        cy.dataCy('confirm-delete', { timeout: 10000 }).click();
+    }
+
+    public static cancelDeleteDashboard(dashboardName: string) {
+        cy.dataCy('delete-dashboard-' + dashboardName, {
+            timeout: 10000,
+        }).click();
+        cy.dataCy('cancel-delete', { timeout: 10000 }).click();
+    }
+
+    public static cancelDeleteDataView(dataViewName: string) {
+        cy.dataCy('delete-data-view-' + dataViewName, {
+            timeout: 10000,
+        }).click();
+        cy.dataCy('cancel-delete', { timeout: 10000 }).click();
+    }
+
     public static editWidget(widgetName: string) {
         cy.dataCy('edit-' + widgetName).click();
     }
@@ -426,4 +454,16 @@ export class DataLakeUtils {
             .invoke('text')
             .then(text => text.trim());
     }
+
+    public static checkRowsDashboardTable(amount: number) {
+        cy.dataCy('dashboard-table-overview', {
+            timeout: 10000,
+        }).should('have.length', amount);
+    }
+
+    public static checkRowsViewsTable(amount: number) {
+        cy.dataCy('data-views-table-overview', {
+            timeout: 10000,
+        }).should('have.length', amount);
+    }
 }

ui/cypress/tests/datalake/deleteViewAndDashboard.spec.ts

@@ -0,0 +1,58 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+import { DataLakeUtils } from '../../support/utils/datalake/DataLakeUtils';
+
+describe('Test Deletion of Data View and Dashboard', () => {
+    beforeEach('Setup Test', () => {
+        cy.initStreamPipesTest();
+        DataLakeUtils.loadDataIntoDataLake('datalake/sample.csv', false);
+    });
+
+    it('Perform Test', () => {
+        DataLakeUtils.goToDatalake();
+
+        DataLakeUtils.addDataViewAndTableWidget('TestView', 'Persist');
+
+        DataLakeUtils.saveDataViewConfiguration();
+
+        DataLakeUtils.createAndEditDashboard('TestDashboard');
+
+        DataLakeUtils.saveDashboardConfiguration();
+
+        DataLakeUtils.checkRowsDashboardTable(1);
+
+        DataLakeUtils.checkRowsViewsTable(1);
+
+        // Click "Delete" but cancel action and check if dashboard and view are still displayed
+        DataLakeUtils.cancelDeleteDashboard('TestDashboard');
+
+        DataLakeUtils.checkRowsDashboardTable(1);
+
+        DataLakeUtils.cancelDeleteDataView('TestView');
+
+        DataLakeUtils.checkRowsViewsTable(1);
+
+        DataLakeUtils.deleteDashboard('TestDashboard');
+
+        DataLakeUtils.deleteDataView('TestView');
+
+        DataLakeUtils.checkRowsDashboardTable(0);
+
+        DataLakeUtils.checkRowsViewsTable(0);
+    });
+});

ui/cypress/tests/datalake/deleteWidget.ts

@@ -41,31 +41,20 @@ describe('Test Table View in Data Explorer', () => {
         // Delete widget
         DataLakeUtils.removeWidget('TestView');
 
-        // Save dashboard
-        DataLakeUtils.saveDashboardConfiguration();
-
         // Go back to dashboard
         DataLakeUtils.saveAndReEditDashboard('TestDashboard');
 
         // Check that widget is gone
-        cy.dataCy('widget-datalake_configuration', { timeout: 10000 }).should(
-            'not.exist',
-        );
+        cy.dataCy('widget-TestView', { timeout: 10000 }).should('not.exist');
 
         DataLakeUtils.goBackToOverview();
 
-        cy.dataCy('delete-dashboard-TestDashboard', { timeout: 10000 }).should(
-            'have.length',
-            1,
-        );
+        DataLakeUtils.checkRowsDashboardTable(1);
 
         // Delete dashboard
-        cy.dataCy('delete-dashboard-TestDashboard', { timeout: 10000 }).click();
+        DataLakeUtils.deleteDashboard('TestDashboard');
 
         // Check that dashboard is gone
-        cy.dataCy('delete-dashboard-TestDashboard', { timeout: 10000 }).should(
-            'have.length',
-            0,
-        );
+        DataLakeUtils.checkRowsDashboardTable(0);
     });
 });

ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.html

@@ -29,11 +29,13 @@ <h5>{{ data.subtitle }}</h5>
                 mat-button
                 (click)="onCancel()"
                 *ngIf="data.confirmAndCancel"
+                data-cy="cancel-delete"
             >
                 {{ data.cancelTitle }}
             </button>
             <button
-                mat-button
+                mat-raised-button
+                color="accent"
                 (click)="onOk()"
                 cdkFocusInitial
                 data-cy="confirm-delete"

ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-preview/data-view-preview.component.html

@@ -16,7 +16,15 @@
   ~
   -->
 
-<div fxLayout="row" class="data-view-preview-outer">
+<div
+    fxLayout="row"
+    class="data-view-preview-outer"
+    [attr.data-cy]="
+        'add-data-view-btn-' +
+        dataView.baseAppearanceConfig.widgetTitle.replaceAll(' ', '')
+    "
+    (click)="addDataViewEmitter.emit(dataView.elementId)"
+>
     <div fxFlex fxLayout="column">
         <h5>{{ dataView.baseAppearanceConfig.widgetTitle }}</h5>
         <div fxLayout="row" fxLayoutGap="15px" class="data-view-preview-info">
@@ -37,16 +45,6 @@ <h5>{{ dataView.baseAppearanceConfig.widgetTitle }}</h5>
         </div>
     </div>
     <div fxLayoutAlign="end center">
-        <button
-            mat-icon-button
-            color="accent"
-            [attr.data-cy]="
-                'add-data-view-btn-' +
-                dataView.baseAppearanceConfig.widgetTitle.replaceAll(' ', '')
-            "
-            (click)="addDataViewEmitter.emit(dataView.elementId)"
-        >
-            <i class="material-icons">add</i>
-        </button>
+        <i class="material-icons">add</i>
     </div>
 </div>

ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-preview/data-view-preview.component.scss

@@ -24,6 +24,7 @@
 .data-view-preview-outer:hover {
     border-color: var(--color-bg-3);
     background: var(--color-bg-1);
+    cursor: pointer;
 }
 
 .data-view-preview-info {

ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts

@@ -137,6 +137,7 @@ export class DataExplorerDashboardPanelComponent implements OnInit, OnDestroy {
     }
 
     persistDashboardChanges() {
+        this.dashboard.dashboardGeneralSettings.defaultViewMode = this.viewMode;
         this.dataViewDataExplorerService
             .updateDashboard(this.dashboard)
             .subscribe(result => {
@@ -152,11 +153,8 @@ export class DataExplorerDashboardPanelComponent implements OnInit, OnDestroy {
         );
     }
 
-    removeDataViewFromDashboard(widget: DataExplorerWidgetModel) {
-        const index = this.dashboard.widgets.findIndex(
-            item => item.id === widget.elementId,
-        );
-        this.dashboard.widgets.splice(index, 1);
+    removeDataViewFromDashboard(widgetIndex: number) {
+        this.dashboard.widgets.splice(widgetIndex, 1);
     }
 
     updateDateRange(timeSettings: TimeSettings) {
@@ -170,7 +168,7 @@ export class DataExplorerDashboardPanelComponent implements OnInit, OnDestroy {
     }
 
     discardChanges() {
-        this.editMode = false;
+        this.routingService.navigateToOverview();
     }
 
     triggerEditMode() {

ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.html

@@ -34,6 +34,7 @@
             (downloadFileEmitter)="downloadDataAsFile()"
             (updateDateRangeEmitter)="updateDateRange($event)"
             (saveDataViewEmitter)="saveDataView()"
+            (discardDataViewEmitter)="discardChanges()"
             fxFlex="100"
         >
         </sp-data-explorer-data-view-toolbar>

ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts

@@ -125,6 +125,10 @@ export class DataExplorerDataViewComponent implements OnInit {
         });
     }
 
+    discardChanges() {
+        this.routingService.navigateToOverview();
+    }
+
     updateDateRange(timeSettings: TimeSettings) {
         this.timeSettings = timeSettings;
         this.timeSelectionService.notify(timeSettings);

ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview/data-explorer-dashboard-overview.component.html

@@ -39,6 +39,7 @@
                     fxFlex="60"
                     fxLayoutAlign="start center"
                     mat-cell
+                    data-cy="dashboard-table-overview"
                     *matCellDef="let element"
                 >
                     {{ element.name }}<br />

ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview/data-explorer-dashboard-overview.component.ts

@@ -25,13 +25,14 @@ import {
 import { ObjectPermissionDialogComponent } from '../../../../core-ui/object-permission-dialog/object-permission-dialog.component';
 import {
     CurrentUserService,
+    ConfirmDialogComponent,
     DialogService,
-    PanelType,
 } from '@streampipes/shared-ui';
 import { AuthService } from '../../../../services/auth.service';
 import { SpDataExplorerOverviewDirective } from '../data-explorer-overview.directive';
 import { DataExplorerDashboardService } from '../../../services/data-explorer-dashboard.service';
 import { DataExplorerRoutingService } from '../../../services/data-explorer-routing.service';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
     selector: 'sp-data-explorer-dashboard-overview',
@@ -51,6 +52,7 @@ export class SpDataExplorerDashboardOverviewComponent extends SpDataExplorerOver
         routingService: DataExplorerRoutingService,
         authService: AuthService,
         currentUserService: CurrentUserService,
+        private dialog: MatDialog,
     ) {
         super(dialogService, authService, currentUserService, routingService);
     }
@@ -87,8 +89,24 @@ export class SpDataExplorerDashboardOverviewComponent extends SpDataExplorerOver
     }
 
     openDeleteDashboardDialog(dashboard: Dashboard) {
-        this.dashboardService.deleteDashboard(dashboard).subscribe(() => {
-            this.getDashboards();
+        const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+            width: '600px',
+            data: {
+                title: 'Are you sure you want to delete this dashboard?',
+                subtitle: 'This action cannot be reversed!',
+                cancelTitle: 'Cancel',
+                okTitle: 'Delete Dashboard',
+                confirmAndCancel: true,
+            },
+        });
+        dialogRef.afterClosed().subscribe(result => {
+            if (result) {
+                this.dashboardService
+                    .deleteDashboard(dashboard)
+                    .subscribe(() => {
+                        this.getDashboards();
+                    });
+            }
         });
     }
 

ui/src/app/data-explorer/components/overview/data-explorer-data-view-overview/data-explorer-data-view-overview.component.html

@@ -39,6 +39,7 @@
                     fxFlex="60"
                     fxLayoutAlign="start center"
                     mat-cell
+                    data-cy="data-views-table-overview"
                     *matCellDef="let element"
                 >
                     {{ element.baseAppearanceConfig.widgetTitle }}<br />

ui/src/app/data-explorer/components/overview/data-explorer-data-view-overview/data-explorer-data-view-overview.component.ts

@@ -24,10 +24,15 @@ import {
     DataExplorerWidgetModel,
     DataViewDataExplorerService,
 } from '@streampipes/platform-services';
-import { CurrentUserService, DialogService } from '@streampipes/shared-ui';
+import {
+    CurrentUserService,
+    DialogService,
+    ConfirmDialogComponent,
+} from '@streampipes/shared-ui';
 import { AuthService } from '../../../../services/auth.service';
 import { DataExplorerRoutingService } from '../../../services/data-explorer-routing.service';
 import { DataExplorerDashboardService } from '../../../services/data-explorer-dashboard.service';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
     selector: 'sp-data-explorer-data-view-overview',
@@ -46,6 +51,7 @@ export class SpDataExplorerDataViewOverviewComponent extends SpDataExplorerOverv
         authService: AuthService,
         currentUserService: CurrentUserService,
         routingService: DataExplorerRoutingService,
+        private dialog: MatDialog,
     ) {
         super(dialogService, authService, currentUserService, routingService);
     }
@@ -85,8 +91,24 @@ export class SpDataExplorerDataViewOverviewComponent extends SpDataExplorerOverv
     }
 
     deleteDataView(dataView: DataExplorerWidgetModel) {
-        this.dataViewService
-            .deleteWidget(dataView.elementId)
-            .subscribe(() => this.getDataViews());
+        const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+            width: '600px',
+            data: {
+                title: 'Are you sure you want to delete this data view?',
+                subtitle: 'This action cannot be reversed!',
+                cancelTitle: 'Cancel',
+                okTitle: 'Delete Data View',
+                confirmAndCancel: true,
+            },
+        });
+        dialogRef.afterClosed().subscribe(result => {
+            if (result) {
+                this.dataViewService
+                    .deleteWidget(dataView.elementId)
+                    .subscribe(() => {
+                        this.getDataViews();
+                    });
+            }
+        });
     }
 }

ui/src/app/data-explorer/components/widget-view/abstract-widget-view.directive.ts

@@ -56,8 +56,7 @@ export abstract class AbstractWidgetViewDirective {
     @Input()
     timeSettings: TimeSettings;
 
-    @Output() deleteCallback: EventEmitter<DataExplorerWidgetModel> =
-        new EventEmitter<DataExplorerWidgetModel>();
+    @Output() deleteCallback: EventEmitter<number> = new EventEmitter<number>();
     @Output() startEditModeEmitter: EventEmitter<DataExplorerWidgetModel> =
         new EventEmitter<DataExplorerWidgetModel>();
 
@@ -128,8 +127,8 @@ export abstract class AbstractWidgetViewDirective {
         );
     }
 
-    propagateItemRemoval(widget: DataExplorerWidgetModel) {
-        this.deleteCallback.emit(widget);
+    propagateItemRemoval(widgetIndex: number) {
+        this.deleteCallback.emit(widgetIndex);
     }
 
     propagateWidgetSelection(configuredWidget: DataExplorerWidgetModel) {