Skip to content

refactor: rename dashboard widgets to panels and update /charts route… #1610

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lyubov-voloshko merged 3 commits into from
Feb 19, 2026
Merged

refactor: rename dashboard widgets to panels and update /charts route… #1610

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
db26861
refactor: rename dashboard widgets to panels and update /charts route…
gugu Feb 17, 2026
d9c95cb
Merge branch 'main' into frontend_rename_widgets_to_panels
gugu Feb 19, 2026
7cc589b
Merge branch 'main' into frontend_rename_widgets_to_panels
gugu Feb 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions frontend/src/app/app-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,21 +211,21 @@ const routes: Routes = [
canActivate: [AuthGuard],
},
{
path: 'charts/:connection-id',
path: 'panels/:connection-id',
loadComponent: () =>
import('./components/charts/charts-list/charts-list.component').then((m) => m.ChartsListComponent),
canActivate: [AuthGuard],
title: 'Saved Queries | Rocketadmin',
},
{
path: 'charts/:connection-id/new',
path: 'panels/:connection-id/new',
loadComponent: () =>
import('./components/charts/chart-edit/chart-edit.component').then((m) => m.ChartEditComponent),
canActivate: [AuthGuard],
title: 'Create Query | Rocketadmin',
},
{
path: 'charts/:connection-id/:query-id',
path: 'panels/:connection-id/:query-id',
loadComponent: () =>
import('./components/charts/chart-edit/chart-edit.component').then((m) => m.ChartEditComponent),
canActivate: [AuthGuard],
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/components/charts/chart-edit/chart-edit.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<div class="chart-edit-page">
<div class="chart-edit-header">
<h1 class="mat-h1">{{ isEditMode() ? 'Edit widget' : 'Create widget' }}</h1>
<h1 class="mat-h1">{{ isEditMode() ? 'Edit panel' : 'Create panel' }}</h1>
</div>

@if (loading()) {
Expand Down Expand Up @@ -538,7 +538,7 @@ <h3>Query results ({{ testResults().length }} rows)</h3>

@if (!loading()) {
<div class="actions">
<a mat-stroked-button [routerLink]="['/charts', connectionId()]" data-testid="cancel-button">Back</a>
<a mat-stroked-button [routerLink]="['/panels', connectionId()]" data-testid="cancel-button">Back</a>
<button mat-flat-button color="primary"
(click)="saveQuery()"
[disabled]="!canSave()"
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ describe('ChartEditComponent', () => {
testable.queryName.set('New Query');
testable.queryText.set('SELECT 1');
component.saveQuery();
expect(router.navigate).toHaveBeenCalledWith(['/charts', 'conn-1']);
expect(router.navigate).toHaveBeenCalledWith(['/panels', 'conn-1']);
});
});

Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/components/charts/chart-edit/chart-edit.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -596,7 +596,7 @@ export class ChartEditComponent implements OnInit {
.updateSavedQuery(this.connectionId(), this.queryId(), payload)
.pipe(finalize(() => this.saving.set(false)))
.subscribe(() => {
this.router.navigate(['/charts', this.connectionId()]);
this.router.navigate(['/panels', this.connectionId()]);
});
this.angulartics2.eventTrack.next({
action: 'Charts: saved query updated',
Expand All @@ -607,7 +607,7 @@ export class ChartEditComponent implements OnInit {
.createSavedQuery(this.connectionId(), payload)
.pipe(finalize(() => this.saving.set(false)))
.subscribe(() => {
this.router.navigate(['/charts', this.connectionId()]);
this.router.navigate(['/panels', this.connectionId()]);
});
this.angulartics2.eventTrack.next({
action: 'Charts: saved query created',
Expand Down
30 changes: 15 additions & 15 deletions frontend/src/app/components/charts/charts-list/charts-list.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,27 +72,27 @@
}

/* Table Styles */
.widgets-table {
.panels-table {
width: 100%;
background: transparent;
}

.widgets-table tr.mat-mdc-row {
.panels-table tr.mat-mdc-row {
height: 64px;
cursor: pointer;
}

.widgets-table tr.mat-mdc-row:hover {
.panels-table tr.mat-mdc-row:hover {
background-color: rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
.widgets-table tr.mat-mdc-row:hover {
.panels-table tr.mat-mdc-row:hover {
background-color: rgba(255, 255, 255, 0.04);
}
}

.widgets-table th.mat-mdc-header-cell {
.panels-table th.mat-mdc-header-cell {
font-weight: 500;
color: rgba(0, 0, 0, 0.6);
font-size: 12px;
Expand All @@ -101,7 +101,7 @@
}

@media (prefers-color-scheme: dark) {
.widgets-table th.mat-mdc-header-cell {
.panels-table th.mat-mdc-header-cell {
color: rgba(255, 255, 255, 0.6);
}
}
Expand All @@ -127,7 +127,7 @@
}

/* Name Cell */
.widget-name-cell {
.panel-name-cell {
font-weight: 500;
}

Expand Down Expand Up @@ -165,7 +165,7 @@
}

/* Empty State */
.no-widgets {
.no-panels {
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -177,12 +177,12 @@
}

@media (prefers-color-scheme: dark) {
.no-widgets {
.no-panels {
background-color: rgba(255, 255, 255, 0.05);
}
}

.no-widgets-icon {
.no-panels-icon {
font-size: 64px;
width: 64px;
height: 64px;
Expand All @@ -191,29 +191,29 @@
}

@media (prefers-color-scheme: dark) {
.no-widgets-icon {
.no-panels-icon {
color: rgba(255, 255, 255, 0.3);
}
}

.no-widgets h3 {
.no-panels h3 {
margin: 0 0 8px 0;
color: rgba(0, 0, 0, 0.87);
}

@media (prefers-color-scheme: dark) {
.no-widgets h3 {
.no-panels h3 {
color: rgba(255, 255, 255, 0.87);
}
}

.no-widgets p {
.no-panels p {
margin: 0 0 16px 0;
color: rgba(0, 0, 0, 0.54);
}

@media (prefers-color-scheme: dark) {
.no-widgets p {
.no-panels p {
color: rgba(255, 255, 255, 0.54);
}
}
Expand Down
40 changes: 20 additions & 20 deletions frontend/src/app/components/charts/charts-list/charts-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,48 +9,48 @@

<div class="charts-page">
<div class="charts-header">
<h1 class="mat-h1">Widgets</h1>
<h1 class="mat-h1">Panels</h1>
<p class="charts-description">
Create and manage widgets with chart visualizations for your dashboards.
Create and manage panels with chart visualizations for your dashboards.
</p>
</div>

<div class="charts-toolbar">
<mat-form-field appearance="outline" class="search-field">
<mat-label>Search widgets</mat-label>
<mat-label>Search panels</mat-label>
<input matInput
[ngModel]="searchQuery()"
(ngModelChange)="searchQuery.set($event)"
placeholder="Search by name or description..."
data-testid="widgets-search-input">
data-testid="panels-search-input">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>

<a *ngIf="filteredQueries().length > 0" mat-flat-button color="primary"
[routerLink]="['/charts', connectionId(), 'new']"
[routerLink]="['/panels', connectionId(), 'new']"
(click)="trackCreatePageOpened()"
data-testid="create-widget-button">
data-testid="create-panel-button">
<mat-icon>add</mat-icon>
Create widget
Create panel
</a>
</div>

<app-placeholder-table-data *ngIf="loading()"></app-placeholder-table-data>

<div *ngIf="!loading() && filteredQueries().length === 0" class="no-widgets">
<mat-icon class="no-widgets-icon">widgets</mat-icon>
<h3>No widgets found</h3>
<p *ngIf="searchQuery()">No widgets match your search criteria.</p>
<p *ngIf="!searchQuery()">Create your first widget to visualize your data.</p>
<div *ngIf="!loading() && filteredQueries().length === 0" class="no-panels">
<mat-icon class="no-panels-icon">widgets</mat-icon>
<h3>No panels found</h3>
<p *ngIf="searchQuery()">No panels match your search criteria.</p>
<p *ngIf="!searchQuery()">Create your first panel to visualize your data.</p>
<a mat-flat-button color="primary"
[routerLink]="['/charts', connectionId(), 'new']"
[routerLink]="['/panels', connectionId(), 'new']"
(click)="trackCreatePageOpened()">
<mat-icon>add</mat-icon>
Create widget
Create panel
</a>
</div>

<table *ngIf="!loading() && filteredQueries().length > 0" mat-table [dataSource]="filteredQueries()" class="widgets-table">
<table *ngIf="!loading() && filteredQueries().length > 0" mat-table [dataSource]="filteredQueries()" class="panels-table">
<!-- Preview Column -->
<ng-container matColumnDef="preview">
<th mat-header-cell *matHeaderCellDef>Type</th>
Expand All @@ -64,7 +64,7 @@ <h3>No widgets found</h3>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let query" class="widget-name-cell">
<td mat-cell *matCellDef="let query" class="panel-name-cell">
{{query.name}}
</td>
</ng-container>
Expand All @@ -91,20 +91,20 @@ <h3>No widgets found</h3>
<td mat-cell *matCellDef="let query; let i = index" class="actions-cell">
<button mat-icon-button [matMenuTriggerFor]="rowMenu"
(click)="$event.stopPropagation()"
attr.data-testid="widget-actions-{{i}}-button">
attr.data-testid="panel-actions-{{i}}-button">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #rowMenu="matMenu">
<a mat-menu-item
[routerLink]="['/charts', connectionId(), query.id]"
[routerLink]="['/panels', connectionId(), query.id]"
(click)="trackEditPageOpened()"
attr.data-testid="widget-edit-{{i}}-menu-item">
attr.data-testid="panel-edit-{{i}}-menu-item">
<mat-icon>edit</mat-icon>
<span>Edit</span>
</a>
<mat-divider></mat-divider>
<button mat-menu-item (click)="openDeleteDialog(query)" class="delete-action"
attr.data-testid="widget-delete-{{i}}-menu-item">
attr.data-testid="panel-delete-{{i}}-menu-item">
<mat-icon color="warn">delete</mat-icon>
<span>Delete</span>
</button>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/charts/charts-list/charts-list.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export class ChartsListComponent implements OnInit {

openQuery(query: SavedQuery): void {
this.trackEditPageOpened();
this.router.navigate(['/charts', this.connectionId(), query.id]);
this.router.navigate(['/panels', this.connectionId(), query.id]);
}

openDeleteDialog(query: SavedQuery): void {
Expand Down
Loading
Loading