feat: Add user hint to data view selection panel if no data view is p…

…resent (#3406)
apache · Jan 9, 2025 · a6cd5ee · a6cd5ee
1 parent 171e7c3
commit a6cd5ee
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 11 deletions.
diff --git a/...ashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component.html b/...ashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component.html
@@ -32,13 +32,11 @@
                 <div class="scroll-tab-content">
                     <sp-data-explorer-data-view-selection
                         (addDataViewEmitter)="addDataViewEmitter.emit($event)"
+                        fxFlex="100"
                     >
                     </sp-data-explorer-data-view-selection>
                 </div>
             </mat-tab>
-            <mat-tab data-cy="designer-panel-data-config" label="Layout">
-                <div class="scroll-tab-content">Layout</div>
-            </mat-tab>
         </mat-tab-group>
     </div>
 </div>
diff --git a/...d/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.html b/...d/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.html
@@ -17,11 +17,28 @@
   -->
 
 <div fxFlex="100" class="m-10" fxLayoutGap="10px" fxLayout="column">
-    <div *ngFor="let dataView of dataViews">
-        <sp-data-explorer-data-view-preview
-            [dataView]="dataView"
-            (addDataViewEmitter)="addDataViewEmitter.emit($event)"
-        >
-        </sp-data-explorer-data-view-preview>
-    </div>
+    @if (dataViews.length > 0) {
+        <div *ngFor="let dataView of dataViews">
+            <sp-data-explorer-data-view-preview
+                [dataView]="dataView"
+                (addDataViewEmitter)="addDataViewEmitter.emit($event)"
+            >
+            </sp-data-explorer-data-view-preview>
+        </div>
+    } @else {
+        <div fxLayoutAlign="center center" fxLayout="column" fxFlex="100">
+            <span class="no-widget-hint"
+                >No data views found - create a new data view first to add it to
+                this dashboard.</span
+            >
+            <button
+                mat-button
+                color="accent"
+                class="mt-10"
+                (click)="navigateToDataViewCreation()"
+            >
+                Create Data View
+            </button>
+        </div>
+    }
 </div>
diff --git a/...d/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.scss b/...d/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.scss
@@ -19,3 +19,8 @@
 .m-10 {
     margin: 10px;
 }
+
+.no-widget-hint {
+    font-size: 10pt;
+    text-align: center;
+}
diff --git a/...ard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.ts b/...ard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.ts
@@ -21,6 +21,7 @@ import {
     DataExplorerWidgetModel,
     DataViewDataExplorerService,
 } from '@streampipes/platform-services';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'sp-data-explorer-data-view-selection',
@@ -33,7 +34,10 @@ export class DataExplorerDataViewSelectionComponent implements OnInit {
 
     dataViews: DataExplorerWidgetModel[] = [];
 
-    constructor(private dataViewService: DataViewDataExplorerService) {}
+    constructor(
+        private dataViewService: DataViewDataExplorerService,
+        private router: Router,
+    ) {}
 
     ngOnInit() {
         this.dataViewService.getAllWidgets().subscribe(dataViews => {
@@ -44,4 +48,11 @@ export class DataExplorerDataViewSelectionComponent implements OnInit {
             );
         });
     }
+
+    navigateToDataViewCreation(): void {
+        this.router.navigate(['dataexplorer', 'data-view'], {
+            queryParams: { editMode: true },
+            state: { omitConfirm: true },
+        });
+    }
 }