fix: use proper links for chart navigation and reorder navbar tabs

Changed create/edit chart buttons to anchor tags with routerLink for
better accessibility and navigation behavior. Moved Charts to be the
second navbar item after Tables.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: gugu

frontend/src/app/components/charts/charts-list/charts-list.component.html

@@ -19,12 +19,13 @@ <h1 class="mat-h1">Saved Queries</h1>
             <mat-icon matSuffix>search</mat-icon>
         </mat-form-field>
 
-        <button mat-flat-button color="primary"
-            (click)="openCreatePage()"
+        <a mat-flat-button color="primary"
+            [routerLink]="['/charts', connectionId, 'new']"
+            (click)="trackCreatePageOpened()"
             data-testid="create-chart-button">
             <mat-icon>add</mat-icon>
             Create Query
-        </button>
+        </a>
     </div>
 
     <app-placeholder-table-data *ngIf="loading"></app-placeholder-table-data>
@@ -34,10 +35,12 @@ <h1 class="mat-h1">Saved Queries</h1>
         <h3>No saved queries found</h3>
         <p *ngIf="searchQuery">No queries match your search criteria.</p>
         <p *ngIf="!searchQuery">Create your first saved query to visualize your data.</p>
-        <button *ngIf="!searchQuery" mat-stroked-button color="primary" (click)="openCreatePage()">
+        <a *ngIf="!searchQuery" mat-stroked-button color="primary"
+            [routerLink]="['/charts', connectionId, 'new']"
+            (click)="trackCreatePageOpened()">
             <mat-icon>add</mat-icon>
             Create Query
-        </button>
+        </a>
     </div>
 
     <table *ngIf="!loading && filteredQueries.length > 0" mat-table [dataSource]="filteredQueries" class="mat-elevation-z2 charts-table">
@@ -85,11 +88,13 @@ <h3>No saved queries found</h3>
                     <mat-icon>more_vert</mat-icon>
                 </button>
                 <mat-menu #actionsMenu="matMenu">
-                    <button mat-menu-item (click)="openEditPage(query)"
+                    <a mat-menu-item
+                        [routerLink]="['/charts', connectionId, query.id]"
+                        (click)="trackEditPageOpened()"
                         attr.data-testid="chart-edit-{{i}}-menu-item">
                         <mat-icon>edit</mat-icon>
                         <span>Edit</span>
-                    </button>
+                    </a>
                     <mat-divider></mat-divider>
                     <button mat-menu-item (click)="openDeleteDialog(query)" class="delete-action"
                         attr.data-testid="chart-delete-{{i}}-menu-item">

frontend/src/app/components/charts/charts-list/charts-list.component.ts

@@ -11,7 +11,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { Title } from '@angular/platform-browser';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { ActivatedRoute, RouterModule } from '@angular/router';
 import { Angulartics2 } from 'angulartics2';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@@ -57,7 +57,6 @@ export class ChartsListComponent implements OnInit, OnDestroy {
 		private _savedQueries: SavedQueriesService,
 		private _connections: ConnectionsService,
 		private route: ActivatedRoute,
-		private router: Router,
 		private dialog: MatDialog,
 		private angulartics2: Angulartics2,
 		private title: Title,
@@ -115,15 +114,13 @@ export class ChartsListComponent implements OnInit, OnDestroy {
 		this.searchSubject.next(query);
 	}
 
-	openCreatePage(): void {
-		this.router.navigate(['/charts', this.connectionId, 'new']);
+	trackCreatePageOpened(): void {
 		this.angulartics2.eventTrack.next({
 			action: 'Charts: create chart page opened',
 		});
 	}
 
-	openEditPage(query: SavedQuery): void {
-		this.router.navigate(['/charts', this.connectionId, query.id]);
+	trackEditPageOpened(): void {
 		this.angulartics2.eventTrack.next({
 			action: 'Charts: edit chart page opened',
 		});

frontend/src/app/services/connections.service.spec.ts

@@ -253,18 +253,18 @@ describe('ConnectionsService', () => {
 		expect(service.currentTab).toEqual('dashboard');
 	});
 
-	it('should get visible tabs dashboard, audit and charts in any case', () => {
-		expect(service.visibleTabs).toEqual(['dashboard', 'audit', 'charts']);
+	it('should get visible tabs dashboard, charts and audit in any case', () => {
+		expect(service.visibleTabs).toEqual(['dashboard', 'charts', 'audit']);
 	});
 
-	it('should get visible tabs dashboard, audit, permissions and charts if groupsAccessLevel is true', () => {
+	it('should get visible tabs dashboard, charts, audit and permissions if groupsAccessLevel is true', () => {
 		service.groupsAccessLevel = true;
-		expect(service.visibleTabs).toEqual(['dashboard', 'audit', 'permissions', 'charts']);
+		expect(service.visibleTabs).toEqual(['dashboard', 'charts', 'audit', 'permissions']);
 	});
 
-	it('should get visible tabs dashboard, audit, charts, connection-settings and edit-db if connectionAccessLevel is edit', () => {
+	it('should get visible tabs dashboard, charts, audit, connection-settings and edit-db if connectionAccessLevel is edit', () => {
 		service.connectionAccessLevel = AccessLevel.Edit;
-		expect(service.visibleTabs).toEqual(['dashboard', 'audit', 'charts', 'connection-settings', 'edit-db']);
+		expect(service.visibleTabs).toEqual(['dashboard', 'charts', 'audit', 'connection-settings', 'edit-db']);
 	});
 
 	it('should call fetchConnections', () => {

frontend/src/app/services/connections.service.ts

@@ -117,9 +117,8 @@ export class ConnectionsService {
 	}
 
 	get visibleTabs() {
-		let tabs = ['dashboard', 'audit'];
+		let tabs = ['dashboard', 'charts', 'audit'];
 		if (this.groupsAccessLevel) tabs.push('permissions');
-		tabs.push('charts');
 		if (this.isPermitted(this.connectionAccessLevel)) tabs.push('connection-settings', 'edit-db');
 		return tabs;
 	}