Skip to content

Commit 4aa4296

Browse files
lyubov-voloshkolyubov-voloshko
authored
Merge pull request #1146 from rocket-admin/fixes
Fixes
2 parents 856fc34 + b49e53f commit 4aa4296

10 files changed

Lines changed: 225 additions & 19 deletions

File tree

‎frontend/src/app/app.component.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838

3939
position: sticky;
4040
top: 0;
41-
z-index: 2;
41+
z-index: 3;
4242
}
4343

4444
.nav-bar_exterior {
@@ -54,7 +54,7 @@
5454
.nav-bar_connection {
5555
display: grid;
5656
grid-template-columns: repeat(3, 1fr);
57-
z-index: 2;
57+
z-index: 3;
5858
}
5959

6060
@media (width <= 600px) {

‎frontend/src/app/components/connect-db/db-credentials-forms/db2-credentials-form/db2-credentials-form.component.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,9 +113,10 @@
113113
Use SSH tunnel
114114
</mat-checkbox>
115115

116-
<mat-form-field *ngIf="connection.ssh" appearance="outline" class="advanced-settings__fullLine">
116+
<mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always" class="advanced-settings__fullLine">
117117
<mat-label>Private SSH key</mat-label>
118118
<textarea matInput resizeToFitContent rows="8" name="privateSSHKey" #privateSSHKey="ngModel"
119+
placeholder="Sensitive — write only field"
119120
data-testid="connection-ssh-key-textarea"
120121
angulartics2On="change"
121122
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH key is edited"
@@ -150,9 +151,10 @@
150151
<mat-error *ngIf="sshPort.errors?.required && (sshPort.invalid && sshPort.touched)">SSH port should not be empty.</mat-error>
151152
</mat-form-field>
152153

153-
<mat-form-field *ngIf="connection.ssh" appearance="outline">
154+
<mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always">
154155
<mat-label>SSH username</mat-label>
155156
<input matInput name="sshUsername" #sshUsername="ngModel"
157+
placeholder="Sensitive — write only field"
156158
data-testid="connection-ssh-username-input"
157159
angulartics2On="change"
158160
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH username is edited"

‎frontend/src/app/components/connect-db/db-credentials-forms/mongodb-credentials-form/mongodb-credentials-form.component.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,9 +113,10 @@
113113
Use SSH tunnel
114114
</mat-checkbox>
115115

116-
<mat-form-field *ngIf="connection.ssh" appearance="outline" class="advanced-settings__fullLine">
116+
<mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always" class="advanced-settings__fullLine">
117117
<mat-label>Private SSH key</mat-label>
118118
<textarea matInput resizeToFitContent rows="8" name="privateSSHKey" #privateSSHKey="ngModel"
119+
placeholder="Sensitive — write only field"
119120
data-testid="connection-ssh-key-textarea"
120121
angulartics2On="change"
121122
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH key is edited"
@@ -150,9 +151,10 @@
150151
<mat-error *ngIf="sshPort.errors?.required && (sshPort.invalid && sshPort.touched)">SSH port should not be empty.</mat-error>
151152
</mat-form-field>
152153

153-
<mat-form-field *ngIf="connection.ssh" appearance="outline">
154+
<mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always">
154155
<mat-label>SSH username</mat-label>
155156
<input matInput name="sshUsername" #sshUsername="ngModel"
157+
placeholder="Sensitive — write only field"
156158
data-testid="connection-ssh-username-input"
157159
angulartics2On="change"
158160
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH username is edited"

‎frontend/src/app/components/connect-db/db-credentials-forms/mssql-credentials-form/mssql-credentials-form.component.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,9 +114,10 @@
114114
Use SSH tunnel
115115
</mat-checkbox>
116116

117-
<mat-form-field *ngIf="connection.ssh" appearance="outline" class="advanced-settings__fullLine">
117+
<mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always" class="advanced-settings__fullLine">
118118
<mat-label>Private SSH key</mat-label>
119119
<textarea matInput resizeToFitContent rows="8" name="privateSSHKey" #privateSSHKey="ngModel"
120+
placeholder="Sensitive — write only field"
120121
data-testid="connection-ssh-key-textarea"
121122
angulartics2On="change"
122123
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH key is edited"
@@ -151,9 +152,10 @@
151152
<mat-error *ngIf="sshPort.errors?.required && (sshPort.invalid && sshPort.touched)">SSH port should not be empty.</mat-error>
152153
</mat-form-field>
153154

154-
<mat-form-field *ngIf="connection.ssh" appearance="outline">
155+
<mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always">
155156
<mat-label>SSH username</mat-label>
156157
<input matInput name="sshUsername" #sshUsername="ngModel"
158+
placeholder="Sensitive — write only field"
157159
data-testid="connection-ssh-username-input"
158160
angulartics2On="change"
159161
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH username is edited"

‎frontend/src/app/components/connect-db/db-credentials-forms/mysql-credentials-form/mysql-credentials-form.component.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,9 +101,10 @@
101101
Use SSH tunnel
102102
</mat-checkbox>
103103

104-
<mat-form-field *ngIf="connection.ssh" appearance="outline" class="advanced-settings__fullLine">
104+
<mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always" class="advanced-settings__fullLine">
105105
<mat-label>Private SSH key</mat-label>
106106
<textarea matInput resizeToFitContent rows="8" name="privateSSHKey" #privateSSHKey="ngModel"
107+
placeholder="Sensitive — write only field"
107108
data-testid="connection-ssh-key-textarea"
108109
angulartics2On="change"
109110
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH key is edited"
@@ -138,9 +139,10 @@
138139
<mat-error *ngIf="sshPort.errors?.required && (sshPort.invalid && sshPort.touched)">SSH port should not be empty.</mat-error>
139140
</mat-form-field>
140141

141-
<mat-form-field *ngIf="connection.ssh" appearance="outline">
142+
<mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always">
142143
<mat-label>SSH username</mat-label>
143144
<input matInput name="sshUsername" #sshUsername="ngModel"
145+
placeholder="Sensitive — write only field"
144146
data-testid="connection-ssh-username-input"
145147
angulartics2On="change"
146148
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH username is edited"

‎frontend/src/app/components/connect-db/db-credentials-forms/oracledb-credentials-form/oracledb-credentials-form.component.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,9 +122,10 @@
122122
Use SSH tunnel
123123
</mat-checkbox>
124124

125-
<mat-form-field *ngIf="connection.ssh" appearance="outline" class="advanced-settings__fullLine">
125+
<mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always" class="advanced-settings__fullLine">
126126
<mat-label>Private SSH key</mat-label>
127127
<textarea matInput resizeToFitContent rows="8" name="privateSSHKey" #privateSSHKey="ngModel"
128+
placeholder="Sensitive — write only field"
128129
data-testid="connection-ssh-key-textarea"
129130
angulartics2On="change"
130131
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH key is edited"
@@ -159,9 +160,10 @@
159160
<mat-error *ngIf="sshPort.errors?.required && (sshPort.invalid && sshPort.touched)">SSH port should not be empty.</mat-error>
160161
</mat-form-field>
161162

162-
<mat-form-field *ngIf="connection.ssh" appearance="outline">
163+
<mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always">
163164
<mat-label>SSH username</mat-label>
164165
<input matInput name="sshUsername" #sshUsername="ngModel"
166+
placeholder="Sensitive — write only field"
165167
data-testid="connection-ssh-username-input"
166168
angulartics2On="change"
167169
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH username is edited"

‎frontend/src/app/components/connect-db/db-credentials-forms/postgres-credentials-form/postgres-credentials-form.component.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,16 +113,18 @@
113113
Use SSH tunnel
114114
</mat-checkbox>
115115

116-
<mat-form-field *ngIf="connection.ssh" appearance="outline" class="advanced-settings__fullLine">
116+
<mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always" class="advanced-settings__fullLine">
117117
<mat-label>Private SSH key</mat-label>
118118
<textarea matInput resizeToFitContent rows="8" name="privateSSHKey" #privateSSHKey="ngModel"
119+
placeholder="Sensitive — write only field"
119120
data-testid="connection-ssh-key-textarea"
120121
angulartics2On="change"
121122
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH key is edited"
122123
[required]="connection.ssh && !connection.id" [readonly]="accessLevel === 'readonly' && connection.id"
123124
[disabled]="submitting"
124125
[(ngModel)]="connection.privateSSHKey"
125126
></textarea>
127+
<mat-hint>Sensitive — write only field.</mat-hint>
126128
<mat-error *ngIf="privateSSHKey.errors?.required && (privateSSHKey.invalid && privateSSHKey.touched)">Private SSH key should not be empty.</mat-error>
127129
</mat-form-field>
128130

@@ -150,9 +152,10 @@
150152
<mat-error *ngIf="sshPort.errors?.required && (sshPort.invalid && sshPort.touched)">SSH port should not be empty.</mat-error>
151153
</mat-form-field>
152154

153-
<mat-form-field *ngIf="connection.ssh" appearance="outline">
155+
<mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always">
154156
<mat-label>SSH username</mat-label>
155157
<input matInput name="sshUsername" #sshUsername="ngModel"
158+
placeholder="Sensitive — write only field"
156159
data-testid="connection-ssh-username-input"
157160
angulartics2On="change"
158161
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH username is edited"

‎frontend/src/app/components/foreign-key-row/foreign-key-row.component.html‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<app-alert></app-alert>
2+
<app-placeholder-table-widgets *ngIf="!widgets"></app-placeholder-table-widgets>
3+
4+
<div *ngIf="widgets" class="wrapper">
5+
<header class="header">
6+
<app-breadcrumbs [crumbs]="getCrumbs(currentConnection.title || currentConnection.database)" class="row-breadcrumbs"></app-breadcrumbs>
7+
8+
<div *ngIf="widgets.length" class="header-actions">
9+
<button mat-stroked-button
10+
type="button"
11+
(click)="openClearAllConfirmation()"
12+
[disabled]="fields.length === 0 && widgets.length === 0">
13+
Clear All
14+
</button>
15+
<button mat-stroked-button color="accent"
16+
type="button"
17+
angulartics2On="click"
18+
angularticsAction="Widgets: add widget is clicked"
19+
(click)="addNewWidget()"
20+
[disabled]="fields.length === 0 || widgets.length === fieldsCount">
21+
<mat-icon>add</mat-icon>
22+
Add field UI config
23+
</button>
24+
</div>
25+
26+
</header>
27+
28+
<form *ngIf="widgets && widgets.length; else emptyState" (ngSubmit)="updateWidgets()" class="widget-settings">
29+
<app-widget *ngFor="let widget of widgets; let i = index"
30+
class="widget-item"
31+
[index]="i"
32+
[widgetType]="widget.widget_type"
33+
[widget]="widget"
34+
[fields]="fields"
35+
[widgetTypes]="widgetTypes"
36+
[isReadonlyParams]="isReadOnly(widget.widget_type)"
37+
[codeEditorTheme]="codeEditorTheme"
38+
(onSelectWidgetField)="selectWidgetField($event)"
39+
(onWidgetTypeChange)="widgetTypeChange($event)"
40+
(onWidgetParamsChange)="widgetParamsChange($event)"
41+
(onWidgetDelete)="openDeleteWidgetDialog($event)">
42+
</app-widget>
43+
44+
45+
<div class="actions">
46+
<a mat-stroked-button routerLink="/dashboard/{{connectionID}}/{{tableName}}">
47+
Back
48+
</a>
49+
50+
<button mat-flat-button color="primary"
51+
type="submit" [disabled]="submitting">
52+
Save
53+
</button>
54+
</div>
55+
</form>
56+
57+
<ng-template #emptyState>
58+
<div class="empty-state">
59+
<!--<p class="empty-state__text">No fields configured</p>-->
60+
<p class="widgets-hint">
61+
<strong class="widgets-hint__title">Customize how fields look in forms and tables</strong>
62+
<span class="widgets-hint__text">Nothing will be changed in your data types, just better reflecting the nature of the data.</span>
63+
</p>
64+
65+
<button mat-flat-button color="accent"
66+
angulartics2On="click"
67+
angularticsAction="Widgets: add first widget is clicked"
68+
(click)="addNewWidget()">
69+
Configure fields
70+
</button>
71+
72+
<div class="widget-examples">
73+
<div class="widget-example">
74+
<app-row-text
75+
key="password-original-example"
76+
label="Password"
77+
value="MySuper-Secret-Password_12345678"
78+
[required]="false"
79+
[readonly]="false"
80+
[disabled]="false">
81+
</app-row-text>
82+
<mat-icon class="examples-arrow">arrow_downward</mat-icon>
83+
<app-row-password
84+
key="password-example"
85+
label="Password"
86+
value="MySuper-Secret-Password_12345678"
87+
[required]="false"
88+
[readonly]="false"
89+
[disabled]="false">
90+
</app-row-password>
91+
</div>
92+
93+
<div class="widget-example widget-example_row-2">
94+
<app-row-text
95+
key="select-original-example"
96+
label="Color"
97+
value="💜 Purple"
98+
[required]="false"
99+
[readonly]="false"
100+
[disabled]="false">
101+
</app-row-text>
102+
<mat-icon class="examples-arrow">arrow_downward</mat-icon>
103+
<app-row-select
104+
key="select-example"
105+
label="Color"
106+
value="purple"
107+
[widgetStructure]="{widget_params: {options: [{value: 'red', label: '❤️ Red'}, {value: 'green', label: '💚 Green'}, {value: 'blue', label: '💙 Blue'}, {value: 'purple', label: '💜 Purple'}]}}"
108+
[required]="false"
109+
[readonly]="false"
110+
[disabled]="false">
111+
</app-row-select>
112+
</div>
113+
114+
<div class="widget-example widget-example_row-1-2">
115+
<app-row-text
116+
key="image-original-example"
117+
label="Image"
118+
value="https://app.rocketadmin.com/assets/main-table-reg-image.svg"
119+
[required]="false"
120+
[readonly]="false"
121+
[disabled]="false">
122+
</app-row-text>
123+
<mat-icon class="examples-arrow">arrow_downward</mat-icon>
124+
<app-image
125+
key="image-example"
126+
label="Image"
127+
value="https://app.rocketadmin.com/assets/main-table-reg-image.svg"
128+
[required]="false"
129+
[readonly]="false"
130+
[disabled]="false">
131+
</app-image>
132+
</div>
133+
134+
<div class="widget-example widget-example_row-1-2">
135+
<app-row-long-text
136+
key="long-text-original-example"
137+
label="code"
138+
[value]="widgetCodeEample"
139+
[required]="false"
140+
[readonly]="false"
141+
[disabled]="false">
142+
</app-row-long-text>
143+
<mat-icon class="examples-arrow">arrow_downward</mat-icon>
144+
<app-code
145+
key="code-example"
146+
label="Code"
147+
[value]="widgetCodeEample"
148+
[widgetStructure]="{widget_params: {language: 'html'}}"
149+
[required]="false"
150+
[readonly]="false"
151+
[disabled]="false">
152+
</app-code>
153+
</div>
154+
</div>
155+
156+
<div class="actions">
157+
<button mat-stroked-button type="button" (click)="goBack()">
158+
Back
159+
</button>
160+
161+
<button mat-flat-button color="primary"
162+
type="submit" disabled>
163+
Save
164+
</button>
165+
</div>
166+
</div>
167+
</ng-template>
168+
</div>

‎frontend/src/app/components/foreign-key-row/foreign-key-row.component.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Component, Input, OnInit } from '@angular/core';
2+
3+
import { FormGroup } from '@angular/forms';
4+
5+
@Component({
6+
selector: 'app-foreign-key-row',
7+
templateUrl: './foreign-key-row.component.html',
8+
styleUrls: ['./foreign-key-row.component.scss']
9+
})
10+
export class ForeignKeyRowComponent implements OnInit {
11+
@Input() form: FormGroup;
12+
@Input() field: any;
13+
@Input() options: any[];
14+
15+
constructor() { }
16+
17+
ngOnInit(): void {
18+
}
19+
20+
trackByFn(index: number, item: any): any {
21+
return item.id || index; // Adjust based on unique identifier
22+
}
23+
}

‎frontend/src/app/components/ui-components/row-fields/foreign-key/foreign-key.component.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,13 @@
1010
[matAutocomplete]="auto"
1111
(ngModelChange)="autocmpleteUpdate.next($event)">
1212
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="updateRelatedLink($event)">
13-
<mat-option *ngFor="let suggestion of suggestions"
14-
[ngClass]="{'disabled': suggestion.displayString === 'No matches'}"
15-
[value]="suggestion.displayString">
16-
{{suggestion.displayString}}
17-
</mat-option>
13+
@for (suggestion of suggestions; track suggestion.fieldValue) {
14+
<mat-option
15+
[ngClass]="{'disabled': suggestion.displayString === 'No matches'}"
16+
[value]="suggestion.displayString">
17+
{{suggestion.displayString}}
18+
</mat-option>
19+
}
1820
</mat-autocomplete>
1921
<mat-hint>Improve search performance by configuring <em>Foreign key search fields</em>&nbsp;
2022
<a routerLink="/dashboard/{{connectionID}}/{{relations.referenced_table_name}}/settings" class="hint-link">here</a>.

0 commit comments

Comments
 (0)