Merge pull request #1662 from rocket-admin/frontend_rename_widget_to_panel

rename "widget" and "chart" to "panel" in dashboard UI and analytics

Author: lyubov-voloshko

frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.html

@@ -3,7 +3,7 @@
 <div class="dashboard-view-page">
     <div class="dashboard-header">
         <div class="header-left">
-            <button mat-icon-button (click)="navigateBack()" matTooltip="Back to dashboards">
+            <button type="button" mat-icon-button (click)="navigateBack()" matTooltip="Back to dashboards">
                 <mat-icon>arrow_back</mat-icon>
             </button>
             <div class="header-info">
@@ -22,11 +22,11 @@ <h1 class="mat-h1">{{ dashboard()?.name || 'Loading...' }}</h1>
                     data-testid="edit-mode-toggle">
                     Edit mode
                 </mat-slide-toggle>
-                <button mat-flat-button color="primary"
+                <button type="button" mat-flat-button color="primary"
                     (click)="openAddPanelDialog()"
                     data-testid="add-panel-button">
                     <mat-icon>add</mat-icon>
-                    Add chart
+                    Add panel
                 </button>
             </div>
         }
@@ -41,11 +41,11 @@ <h1 class="mat-h1">{{ dashboard()?.name || 'Loading...' }}</h1>
     @if (!loading() && gridsterItems().length === 0) {
         <div class="no-panels">
             <mat-icon class="no-panels-icon">bar_chart</mat-icon>
-            <h3>No charts yet</h3>
-            <p>Add charts to visualize your data from saved queries.</p>
-            <button mat-flat-button color="primary" (click)="openAddPanelDialog()">
+            <h3>No panels yet</h3>
+            <p>Add panels to visualize your data from saved queries.</p>
+            <button type="button" mat-flat-button color="primary" (click)="openAddPanelDialog()">
                 <mat-icon>add</mat-icon>
-                Add chart
+                Add panel
             </button>
         </div>
     }
@@ -56,19 +56,19 @@ <h3>No charts yet</h3>
                 <gridster-item [item]="item" class="panel-item" [class.edit-mode]="editMode()">
                     <div class="panel-header">
                         <span class="panel-title">{{ panelRef.savedQuery()?.name || 'Loading...' }}</span>
-                        <button mat-icon-button [matMenuTriggerFor]="panelMenu" class="panel-menu-button">
+                        <button type="button" mat-icon-button [matMenuTriggerFor]="panelMenu" class="panel-menu-button">
                             <mat-icon>more_vert</mat-icon>
                         </button>
                         <mat-menu #panelMenu="matMenu">
                             <a mat-menu-item [routerLink]="['/panels', connectionId(), item.widget.query_id]">
                                 <mat-icon>tune</mat-icon>
-                                <span>Configure chart</span>
+                                <span>Configure panel</span>
                             </a>
-                            <button mat-menu-item (click)="openEditPanelDialog(item.widget)">
+                            <button type="button" mat-menu-item (click)="openEditPanelDialog(item.widget)">
                                 <mat-icon>swap_horiz</mat-icon>
                                 <span>Change query</span>
                             </button>
-                            <button mat-menu-item (click)="openDeletePanelDialog(item.widget)" class="delete-action">
+                            <button type="button" mat-menu-item (click)="openDeletePanelDialog(item.widget)" class="delete-action">
                                 <mat-icon color="warn">delete</mat-icon>
                                 <span>Delete</span>
                             </button>

frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.ts

@@ -191,9 +191,9 @@ export class DashboardViewComponent implements OnInit {
 			},
 		});
 		this.angulartics2.eventTrack.next({
-			action: 'Dashboards: add widget dialog opened',
+			action: 'Dashboards: add panel dialog opened',
 		});
-		posthog.capture('Dashboards: add widget dialog opened');
+		posthog.capture('Dashboards: add panel dialog opened');
 
 		const result = await dialogRef.afterClosed().toPromise();
 		if (result) {
@@ -211,9 +211,9 @@ export class DashboardViewComponent implements OnInit {
 			},
 		});
 		this.angulartics2.eventTrack.next({
-			action: 'Dashboards: edit widget dialog opened',
+			action: 'Dashboards: edit panel dialog opened',
 		});
-		posthog.capture('Dashboards: edit widget dialog opened');
+		posthog.capture('Dashboards: edit panel dialog opened');
 
 		const result = await dialogRef.afterClosed().toPromise();
 		if (result) {
@@ -231,9 +231,9 @@ export class DashboardViewComponent implements OnInit {
 			},
 		});
 		this.angulartics2.eventTrack.next({
-			action: 'Dashboards: delete widget dialog opened',
+			action: 'Dashboards: delete panel dialog opened',
 		});
-		posthog.capture('Dashboards: delete widget dialog opened');
+		posthog.capture('Dashboards: delete panel dialog opened');
 
 		const result = await dialogRef.afterClosed().toPromise();
 		if (result) {

frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.ts

@@ -34,9 +34,9 @@ export class PanelDeleteDialogComponent {
 		);
 		if (result) {
 			this.angulartics2.eventTrack.next({
-				action: 'Dashboards: widget deleted successfully',
+				action: 'Dashboards: panel deleted successfully',
 			});
-			posthog.capture('Dashboards: widget deleted successfully');
+			posthog.capture('Dashboards: panel deleted successfully');
 			this.dialogRef.close(true);
 		}
 		this.submitting.set(false);

frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.html

@@ -1,5 +1,5 @@
 <form [formGroup]="form" (ngSubmit)="onSubmit()">
-    <h2 mat-dialog-title>{{ isEdit ? 'Edit panel' : 'Add chart' }}</h2>
+    <h2 mat-dialog-title>{{ isEdit ? 'Edit panel' : 'Add panel' }}</h2>
 
     <mat-dialog-content>
         @if (savedQueries().length > 0) {
@@ -27,7 +27,7 @@ <h2 mat-dialog-title>{{ isEdit ? 'Edit panel' : 'Add chart' }}</h2>
             <div class="no-queries-message">
                 <mat-icon class="no-queries-icon">code</mat-icon>
                 <h3>No saved queries yet</h3>
-                <p>Create a saved query first to add it as a chart on this dashboard.</p>
+                <p>Create a saved query first to add it as a panel on this dashboard.</p>
                 <a mat-stroked-button color="primary"
                     [routerLink]="['/panels', data.connectionId, 'new']"
                     (click)="dialogRef.close()">

frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.ts

@@ -79,9 +79,9 @@ export class PanelEditDialogComponent implements OnInit {
 			);
 			if (result) {
 				this.angulartics2.eventTrack.next({
-					action: 'Dashboards: widget updated successfully',
+					action: 'Dashboards: panel updated successfully',
 				});
-				posthog.capture('Dashboards: widget updated successfully');
+				posthog.capture('Dashboards: panel updated successfully');
 				this.dialogRef.close(true);
 			}
 		} else {
@@ -96,9 +96,9 @@ export class PanelEditDialogComponent implements OnInit {
 			const result = await this._dashboards.createWidget(this.data.connectionId, this.data.dashboardId, payload);
 			if (result) {
 				this.angulartics2.eventTrack.next({
-					action: 'Dashboards: widget created successfully',
+					action: 'Dashboards: panel created successfully',
 				});
-				posthog.capture('Dashboards: widget created successfully');
+				posthog.capture('Dashboards: panel created successfully');
 				this.dialogRef.close(true);
 			}
 		}

frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.html

@@ -5,6 +5,6 @@
 } @else {
     <div class="no-content-container">
         <p>No content</p>
-        <p class="hint">Edit this widget to add text content.</p>
+        <p class="hint">Edit this panel to add text content.</p>
     </div>
 }