Skip to content

Commit 13ff49f

Browse files
lyubov-voloshkolyubov-voloshko
authored
Merge branch 'main' into feat/add-posthog-tracking
2 parents 094d346 + aadc39f commit 13ff49f

31 files changed

+304
-192
lines changed

‎frontend/src/app/components/charts/chart-delete-dialog/chart-delete-dialog.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h2 mat-dialog-title>Delete Saved Query</h2>
1+
<h2 mat-dialog-title>Delete saved query</h2>
22

33
<mat-dialog-content>
44
<div class="warning-container">
@@ -18,6 +18,6 @@ <h2 mat-dialog-title>Delete Saved Query</h2>
1818
(click)="onDelete()"
1919
[disabled]="submitting()"
2020
data-testid="delete-chart-confirm-button">
21-
{{submitting() ? 'Deleting...' : 'Delete Query'}}
21+
{{submitting() ? 'Deleting...' : 'Delete query'}}
2222
</button>
2323
</mat-dialog-actions>

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

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,33 @@
1+
:host {
2+
display: block;
3+
height: calc(100vh - 44px);
4+
margin-bottom: -60px;
5+
overflow: hidden;
6+
position: relative;
7+
z-index: 1;
8+
}
9+
110
.chart-edit-layout {
211
display: flex;
3-
height: calc(100vh - 64px);
12+
height: 100%;
413
}
514

615
.chart-edit-main {
716
flex: 1;
817
overflow-y: auto;
18+
display: flex;
19+
flex-direction: column;
920
}
1021

1122
.chart-edit-page {
1223
display: flex;
1324
flex-direction: column;
14-
min-height: 100%;
25+
flex: 1;
1526
padding: 0 clamp(40px, 5vw, 100px);
1627
max-width: 1400px;
1728
margin: 3em auto;
29+
width: 100%;
30+
box-sizing: border-box;
1831
}
1932

2033
@media (width <= 600px) {
@@ -47,7 +60,6 @@
4760
flex-direction: column;
4861
gap: 24px;
4962
flex: 1;
50-
overflow-y: auto;
5163
padding-bottom: 24px;
5264
}
5365

@@ -130,17 +142,11 @@
130142

131143
.code-editor-box {
132144
height: 300px;
133-
border: 1px solid rgba(0, 0, 0, 0.12);
145+
border: 1px solid var(--mat-sidenav-container-divider-color);
134146
border-radius: 4px;
135147
overflow: hidden;
136148
}
137149

138-
@media (prefers-color-scheme: dark) {
139-
.code-editor-box {
140-
border-color: rgba(255, 255, 255, 0.12);
141-
}
142-
}
143-
144150
.code-editor-box ngs-code-editor {
145151
height: 100%;
146152
}
@@ -222,26 +228,34 @@
222228
}
223229

224230
.no-results mat-icon {
225-
color: #1976d2;
231+
color: var(--color-accentedPalette-500);
226232
}
227233

228234
.actions {
235+
position: sticky;
236+
bottom: 0;
229237
display: flex;
230-
justify-content: flex-end;
238+
align-items: center;
239+
justify-content: space-between;
231240
gap: 16px;
232-
padding: 16px 0;
233-
border-top: 1px solid rgba(0, 0, 0, 0.12);
234-
background-color: #fff;
241+
padding: 0 clamp(40px, 5vw, 100px);
242+
background-color: var(--mat-sidenav-content-background-color);
243+
box-shadow: var(--shadow);
244+
height: 64px;
235245
flex-shrink: 0;
236-
position: sticky;
237-
bottom: 0;
238-
margin-top: auto;
246+
z-index: 10;
247+
--shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
239248
}
240249

241250
@media (prefers-color-scheme: dark) {
242251
.actions {
243-
border-top-color: rgba(255, 255, 255, 0.12);
244-
background-color: #1e1e1e;
252+
--shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.5), 0 2px 2px 0 rgba(0, 0, 0, 0.64), 0 1px 5px 0 rgba(0, 0, 0, 0.85);
253+
}
254+
}
255+
256+
@media (width <= 600px) {
257+
.actions {
258+
padding: 0 16px;
245259
}
246260
}
247261

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

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@
99

1010
<div class="chart-edit-page">
1111
<div class="chart-edit-header">
12-
<button mat-icon-button (click)="cancel()" matTooltip="Back to list">
13-
<mat-icon>arrow_back</mat-icon>
14-
</button>
15-
<h1 class="mat-h1">{{ isEditMode() ? 'Edit Widget' : 'Create Widget' }}</h1>
12+
<h1 class="mat-h1">{{ isEditMode() ? 'Edit widget' : 'Create widget' }}</h1>
1613
</div>
1714

1815
<div *ngIf="loading()" class="loading-container">
@@ -22,7 +19,7 @@ <h1 class="mat-h1">{{ isEditMode() ? 'Edit Widget' : 'Create Widget' }}</h1>
2219
<div *ngIf="!loading()" class="chart-edit-content">
2320
<div class="query-details">
2421
<mat-form-field appearance="outline" class="name-field">
25-
<mat-label>Query Name</mat-label>
22+
<mat-label>Query name</mat-label>
2623
<input matInput
2724
[ngModel]="queryName()"
2825
(ngModelChange)="queryName.set($event)"
@@ -44,15 +41,15 @@ <h1 class="mat-h1">{{ isEditMode() ? 'Edit Widget' : 'Create Widget' }}</h1>
4441
<div class="editor-preview-container">
4542
<div class="editor-section">
4643
<div class="section-header">
47-
<h3>SQL Query</h3>
44+
<h3>SQL query</h3>
4845
<button mat-stroked-button
4946
(click)="testQuery()"
5047
[disabled]="!canTest()"
5148
class="test-query-button"
5249
data-testid="test-query-button">
5350
<mat-icon *ngIf="!testing()">play_arrow</mat-icon>
5451
<mat-spinner *ngIf="testing()" diameter="18" class="button-spinner"></mat-spinner>
55-
{{ testing() ? 'Testing...' : 'Test Query' }}
52+
{{ testing() ? 'Testing...' : 'Test query' }}
5653
</button>
5754
</div>
5855
<div class="code-editor-box ph-no-capture">
@@ -68,15 +65,15 @@ <h3>SQL Query</h3>
6865
<div class="right-panel" *ngIf="showResults()">
6966
<div class="config-section">
7067
<div class="section-header">
71-
<h3>Chart Configuration</h3>
68+
<h3>Chart configuration</h3>
7269
<span class="execution-time" *ngIf="executionTime() !== null">
7370
Executed in {{ executionTime() }}ms
7471
</span>
7572
</div>
7673

7774
<div class="chart-config">
7875
<mat-form-field appearance="outline" class="chart-config-field">
79-
<mat-label>Chart Type</mat-label>
76+
<mat-label>Chart type</mat-label>
8077
<mat-select [ngModel]="chartType()" (ngModelChange)="chartType.set($event)" data-testid="chart-type-select">
8178
<mat-option *ngFor="let type of chartTypes" [value]="type.value">
8279
{{ type.label }}
@@ -85,7 +82,7 @@ <h3>Chart Configuration</h3>
8582
</mat-form-field>
8683

8784
<mat-form-field appearance="outline" class="chart-config-field">
88-
<mat-label>Label Column</mat-label>
85+
<mat-label>Label column</mat-label>
8986
<mat-select [ngModel]="labelColumn()" (ngModelChange)="labelColumn.set($event)" data-testid="label-column-select">
9087
<mat-option *ngFor="let col of resultColumns()" [value]="col">
9188
{{ col }}
@@ -94,7 +91,7 @@ <h3>Chart Configuration</h3>
9491
</mat-form-field>
9592

9693
<mat-form-field appearance="outline" class="chart-config-field" *ngIf="showLabelTypeOption()">
97-
<mat-label>Label Type</mat-label>
94+
<mat-label>Label type</mat-label>
9895
<mat-select [ngModel]="labelType()" (ngModelChange)="labelType.set($event)" data-testid="label-type-select">
9996
<mat-option *ngFor="let type of labelTypes" [value]="type.value">
10097
{{ type.label }}
@@ -103,7 +100,7 @@ <h3>Chart Configuration</h3>
103100
</mat-form-field>
104101

105102
<mat-form-field appearance="outline" class="chart-config-field">
106-
<mat-label>Value Column</mat-label>
103+
<mat-label>Value column</mat-label>
107104
<mat-select [ngModel]="valueColumn()" (ngModelChange)="valueColumn.set($event)" data-testid="value-column-select">
108105
<mat-option *ngFor="let col of resultColumns()" [value]="col">
109106
{{ col }}
@@ -115,7 +112,7 @@ <h3>Chart Configuration</h3>
115112

116113
<div class="preview-section">
117114
<div class="section-header">
118-
<h3>Chart Preview</h3>
115+
<h3>Chart preview</h3>
119116
</div>
120117

121118
<div class="chart-container" *ngIf="hasChartData()">
@@ -137,7 +134,7 @@ <h3>Chart Preview</h3>
137134

138135
<div class="results-section" *ngIf="showResults() && testResults().length > 0">
139136
<div class="section-header">
140-
<h3>Query Results ({{ testResults().length }} rows)</h3>
137+
<h3>Query results ({{ testResults().length }} rows)</h3>
141138
</div>
142139
<div class="results-table-container">
143140
<table mat-table [dataSource]="testResults()" class="results-table mat-elevation-z1">
@@ -158,18 +155,17 @@ <h3>Query Results ({{ testResults().length }} rows)</h3>
158155
</div>
159156
</div>
160157

161-
<div class="actions" *ngIf="!loading()">
162-
<button mat-button (click)="cancel()" data-testid="cancel-button">
163-
Cancel
164-
</button>
165-
<button mat-flat-button color="primary"
166-
(click)="saveQuery()"
167-
[disabled]="!canSave()"
168-
data-testid="save-query-button">
169-
<mat-spinner *ngIf="saving()" diameter="18"></mat-spinner>
170-
{{ saving() ? 'Saving...' : (isEditMode() ? 'Update Query' : 'Save Query') }}
171-
</button>
172-
</div>
158+
</div>
159+
160+
<div class="actions" *ngIf="!loading()">
161+
<a mat-stroked-button [routerLink]="['/charts', connectionId()]" data-testid="cancel-button">Back</a>
162+
<button mat-flat-button color="primary"
163+
(click)="saveQuery()"
164+
[disabled]="!canSave()"
165+
data-testid="save-query-button">
166+
<mat-spinner *ngIf="saving()" diameter="18"></mat-spinner>
167+
{{ saving() ? 'Saving...' : (isEditMode() ? 'Update query' : 'Save query') }}
168+
</button>
173169
</div>
174170
</div>
175171
</div>

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

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -247,13 +247,6 @@ describe('ChartEditComponent', () => {
247247
});
248248
});
249249

250-
describe('cancel', () => {
251-
it('should navigate to charts list', () => {
252-
component.cancel();
253-
expect(router.navigate).toHaveBeenCalledWith(['/charts', 'conn-1']);
254-
});
255-
});
256-
257250
describe('onCodeChange', () => {
258251
it('should update queryText', () => {
259252
const testable = component as ChartEditComponentTestable;

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,4 @@ export class ChartEditComponent implements OnInit {
263263
}
264264
}
265265

266-
cancel(): void {
267-
this.router.navigate(['/charts', this.connectionId()]);
268-
}
269266
}

‎frontend/src/app/components/charts/charts-list/charts-list.component.css‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1+
:host {
2+
display: block;
3+
height: calc(100vh - 44px);
4+
margin-bottom: -60px;
5+
overflow: hidden;
6+
position: relative;
7+
z-index: 1;
8+
}
9+
110
.charts-layout {
211
display: flex;
3-
height: calc(100vh - 64px);
12+
height: 100%;
413
}
514

615
.charts-main {
@@ -70,6 +79,17 @@
7079

7180
.widgets-table tr.mat-mdc-row {
7281
height: 64px;
82+
cursor: pointer;
83+
}
84+
85+
.widgets-table tr.mat-mdc-row:hover {
86+
background-color: rgba(0, 0, 0, 0.04);
87+
}
88+
89+
@media (prefers-color-scheme: dark) {
90+
.widgets-table tr.mat-mdc-row:hover {
91+
background-color: rgba(255, 255, 255, 0.04);
92+
}
7393
}
7494

7595
.widgets-table th.mat-mdc-header-cell {
@@ -98,7 +118,6 @@
98118
justify-content: center;
99119
width: 56px;
100120
height: 56px;
101-
text-decoration: none;
102121
overflow: hidden;
103122
}
104123

@@ -107,21 +126,9 @@
107126
height: 40px;
108127
}
109128

110-
/* Name Link */
111-
.widget-name-link {
129+
/* Name Cell */
130+
.widget-name-cell {
112131
font-weight: 500;
113-
color: inherit;
114-
text-decoration: none;
115-
}
116-
117-
.widget-name-link:hover {
118-
color: #673ab7;
119-
}
120-
121-
@media (prefers-color-scheme: dark) {
122-
.widget-name-link:hover {
123-
color: #b388ff;
124-
}
125132
}
126133

127134
/* Description Cell */
@@ -212,11 +219,11 @@
212219
}
213220

214221
.delete-action {
215-
color: #c62828;
222+
color: var(--color-warnPalette-500);
216223
}
217224

218225
@media (prefers-color-scheme: dark) {
219226
.delete-action {
220-
color: #ef5350;
227+
color: var(--color-warnDarkPalette-500);
221228
}
222229
}

0 commit comments

Comments
 (0)