Merge pull request #1579 from karinakharchenko/dashboard-ux

Dashboard ux

Author: lyubov-voloshko

backend/src/entities/visualizations/dashboard/repository/dashboard-custom-repository-extension.ts

@@ -20,10 +20,11 @@ export const dashboardCustomRepositoryExtension: IDashboardRepository = {
 	},
 
 	async findAllDashboardsByConnectionId(connectionId: string): Promise<DashboardEntity[]> {
-		return await this.find({
-			where: { connection_id: connectionId },
-			order: { created_at: 'DESC' },
-		});
+		const qb = this.createQueryBuilder('dashboard')
+			.leftJoinAndSelect('dashboard.widgets', 'widgets')
+			.where('dashboard.connection_id = :connectionId', { connectionId })
+			.orderBy('dashboard.created_at', 'DESC');
+		return await qb.getMany();
 	},
 
 	async findAllDashboardsWithWidgetsByConnectionId(connectionId: string): Promise<DashboardEntity[]> {

frontend/src/app/components/charts/chart-edit/chart-edit.component.css

@@ -1,20 +1,35 @@
+.chart-edit-layout {
+	display: flex;
+	height: calc(100vh - 64px);
+}
+
+.chart-edit-main {
+	flex: 1;
+	overflow-y: auto;
+}
+
 .chart-edit-page {
-	margin: 2em auto;
-	padding: 0 clamp(100px, 10vw, 200px);
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+	padding: 0 clamp(40px, 5vw, 100px);
 	max-width: 1400px;
+	margin: 3em auto;
 }
 
-@media (width <= 900px) {
+@media (width <= 600px) {
 	.chart-edit-page {
 		padding: 0 16px;
+		margin: 1.5em auto;
 	}
 }
 
 .chart-edit-header {
 	display: flex;
 	align-items: center;
 	gap: 16px;
-	margin-bottom: 24px;
+	margin-bottom: 32px;
+	flex-shrink: 0;
 }
 
 .chart-edit-header h1 {
@@ -31,11 +46,15 @@
 	display: flex;
 	flex-direction: column;
 	gap: 24px;
+	flex: 1;
+	overflow-y: auto;
+	padding-bottom: 24px;
 }
 
 .query-details {
 	display: flex;
 	gap: 16px;
+	margin-top: 8px;
 }
 
 @media (width <= 600px) {
@@ -210,17 +229,29 @@
 	display: flex;
 	justify-content: flex-end;
 	gap: 16px;
-	padding-top: 16px;
+	padding: 16px 0;
 	border-top: 1px solid rgba(0, 0, 0, 0.12);
+	background-color: #fff;
+	flex-shrink: 0;
+	position: sticky;
+	bottom: 0;
+	margin-top: auto;
 }
 
 @media (prefers-color-scheme: dark) {
 	.actions {
 		border-top-color: rgba(255, 255, 255, 0.12);
+		background-color: #1e1e1e;
 	}
 }
 
 .actions button mat-spinner {
 	display: inline-block;
 	margin-right: 8px;
 }
+
+.test-query-button .button-spinner {
+	display: inline-block;
+	vertical-align: middle;
+	margin-right: 4px;
+}

frontend/src/app/components/charts/chart-edit/chart-edit.component.html

@@ -1,11 +1,18 @@
-<app-alert></app-alert>
+<div class="chart-edit-layout">
+    <app-dashboards-sidebar
+        [connectionId]="connectionId()"
+        activeTab="queries">
+    </app-dashboards-sidebar>
 
-<div class="chart-edit-page">
+    <div class="chart-edit-main">
+        <app-alert></app-alert>
+
+        <div class="chart-edit-page">
     <div class="chart-edit-header">
         <button mat-icon-button (click)="cancel()" matTooltip="Back to list">
             <mat-icon>arrow_back</mat-icon>
         </button>
-        <h1 class="mat-h1">{{ isEditMode() ? 'Edit Saved Query' : 'Create Saved Query' }}</h1>
+        <h1 class="mat-h1">{{ isEditMode() ? 'Edit Widget' : 'Create Widget' }}</h1>
     </div>
 
     <div *ngIf="loading()" class="loading-container">
@@ -41,9 +48,10 @@ <h3>SQL Query</h3>
                     <button mat-stroked-button
                         (click)="testQuery()"
                         [disabled]="!canTest()"
+                        class="test-query-button"
                         data-testid="test-query-button">
                         <mat-icon *ngIf="!testing()">play_arrow</mat-icon>
-                        <mat-spinner *ngIf="testing()" diameter="18"></mat-spinner>
+                        <mat-spinner *ngIf="testing()" diameter="18" class="button-spinner"></mat-spinner>
                         {{ testing() ? 'Testing...' : 'Test Query' }}
                     </button>
                 </div>
@@ -148,18 +156,20 @@ <h3>Query Results ({{ testResults().length }} rows)</h3>
             <mat-icon>info</mat-icon>
             <p>Query executed successfully but returned no results.</p>
         </div>
+    </div>
 
-        <div class="actions">
-            <button mat-button (click)="cancel()" data-testid="cancel-button">
-                Cancel
-            </button>
-            <button mat-flat-button color="primary"
-                (click)="saveQuery()"
-                [disabled]="!canSave()"
-                data-testid="save-query-button">
-                <mat-spinner *ngIf="saving()" diameter="18"></mat-spinner>
-                {{ saving() ? 'Saving...' : (isEditMode() ? 'Update Query' : 'Save Query') }}
-            </button>
+    <div class="actions" *ngIf="!loading()">
+        <button mat-button (click)="cancel()" data-testid="cancel-button">
+            Cancel
+        </button>
+        <button mat-flat-button color="primary"
+            (click)="saveQuery()"
+            [disabled]="!canSave()"
+            data-testid="save-query-button">
+            <mat-spinner *ngIf="saving()" diameter="18"></mat-spinner>
+            {{ saving() ? 'Saving...' : (isEditMode() ? 'Update Query' : 'Save Query') }}
+        </button>
+    </div>
         </div>
     </div>
 </div>

frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts

@@ -74,6 +74,7 @@ describe('ChartEditComponent', () => {
 
 		mockUiSettingsService = {
 			editorTheme: 'vs-dark',
+			getUiSettings: vi.fn().mockReturnValue(of({})),
 		};
 
 		await TestBed.configureTestingModule({

frontend/src/app/components/charts/chart-edit/chart-edit.component.ts

@@ -19,6 +19,7 @@ import { ChartType, TestQueryResult } from 'src/app/models/saved-query';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { SavedQueriesService } from 'src/app/services/saved-queries.service';
 import { UiSettingsService } from 'src/app/services/ui-settings.service';
+import { DashboardsSidebarComponent } from '../../dashboards/dashboards-sidebar/dashboards-sidebar.component';
 import { AlertComponent } from '../../ui-components/alert/alert.component';
 import { ChartPreviewComponent } from '../chart-preview/chart-preview.component';
 
@@ -41,6 +42,7 @@ import { ChartPreviewComponent } from '../chart-preview/chart-preview.component'
 		CodeEditorModule,
 		ChartPreviewComponent,
 		AlertComponent,
+		DashboardsSidebarComponent,
 	],
 })
 export class ChartEditComponent implements OnInit {