Fixes

frontend/src/app/app.component.css

@@ -38,7 +38,7 @@
 
     position: sticky;
     top: 0;
-    z-index: 2;
+    z-index: 3;
 }
 
 .nav-bar_exterior {
@@ -54,7 +54,7 @@
 .nav-bar_connection {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    z-index: 2;
+    z-index: 3;
 }
 
 @media (width <= 600px) {

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

@@ -113,9 +113,10 @@
             Use SSH tunnel
         </mat-checkbox>
 
-        <mat-form-field *ngIf="connection.ssh" appearance="outline" class="advanced-settings__fullLine">
+        <mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always" class="advanced-settings__fullLine">
             <mat-label>Private SSH key</mat-label>
             <textarea matInput resizeToFitContent rows="8" name="privateSSHKey" #privateSSHKey="ngModel"
+                placeholder="Sensitive — write only field"
                 data-testid="connection-ssh-key-textarea"
                 angulartics2On="change"
                 angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH key is edited"
@@ -150,9 +151,10 @@
             <mat-error *ngIf="sshPort.errors?.required && (sshPort.invalid && sshPort.touched)">SSH port should not be empty.</mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="connection.ssh" appearance="outline">
+        <mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always">
             <mat-label>SSH username</mat-label>
             <input matInput name="sshUsername" #sshUsername="ngModel"
+                placeholder="Sensitive — write only field"
                 data-testid="connection-ssh-username-input"
                 angulartics2On="change"
                 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

@@ -113,9 +113,10 @@
             Use SSH tunnel
         </mat-checkbox>
 
-        <mat-form-field *ngIf="connection.ssh" appearance="outline" class="advanced-settings__fullLine">
+        <mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always" class="advanced-settings__fullLine">
             <mat-label>Private SSH key</mat-label>
             <textarea matInput resizeToFitContent rows="8" name="privateSSHKey" #privateSSHKey="ngModel"
+                placeholder="Sensitive — write only field"
                 data-testid="connection-ssh-key-textarea"
                 angulartics2On="change"
                 angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH key is edited"
@@ -150,9 +151,10 @@
             <mat-error *ngIf="sshPort.errors?.required && (sshPort.invalid && sshPort.touched)">SSH port should not be empty.</mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="connection.ssh" appearance="outline">
+        <mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always">
             <mat-label>SSH username</mat-label>
             <input matInput name="sshUsername" #sshUsername="ngModel"
+                placeholder="Sensitive — write only field"
                 data-testid="connection-ssh-username-input"
                 angulartics2On="change"
                 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

@@ -114,9 +114,10 @@
             Use SSH tunnel
         </mat-checkbox>
 
-        <mat-form-field *ngIf="connection.ssh" appearance="outline" class="advanced-settings__fullLine">
+        <mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always" class="advanced-settings__fullLine">
             <mat-label>Private SSH key</mat-label>
             <textarea matInput resizeToFitContent rows="8" name="privateSSHKey" #privateSSHKey="ngModel"
+                placeholder="Sensitive — write only field"
                 data-testid="connection-ssh-key-textarea"
                 angulartics2On="change"
                 angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH key is edited"
@@ -151,9 +152,10 @@
             <mat-error *ngIf="sshPort.errors?.required && (sshPort.invalid && sshPort.touched)">SSH port should not be empty.</mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="connection.ssh" appearance="outline">
+        <mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always">
             <mat-label>SSH username</mat-label>
             <input matInput name="sshUsername" #sshUsername="ngModel"
+                placeholder="Sensitive — write only field"
                 data-testid="connection-ssh-username-input"
                 angulartics2On="change"
                 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

@@ -101,9 +101,10 @@
             Use SSH tunnel
         </mat-checkbox>
 
-        <mat-form-field *ngIf="connection.ssh" appearance="outline" class="advanced-settings__fullLine">
+        <mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always" class="advanced-settings__fullLine">
             <mat-label>Private SSH key</mat-label>
             <textarea matInput resizeToFitContent rows="8" name="privateSSHKey" #privateSSHKey="ngModel"
+                placeholder="Sensitive — write only field"
                 data-testid="connection-ssh-key-textarea"
                 angulartics2On="change"
                 angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH key is edited"
@@ -138,9 +139,10 @@
             <mat-error *ngIf="sshPort.errors?.required && (sshPort.invalid && sshPort.touched)">SSH port should not be empty.</mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="connection.ssh" appearance="outline">
+        <mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always">
             <mat-label>SSH username</mat-label>
             <input matInput name="sshUsername" #sshUsername="ngModel"
+                placeholder="Sensitive — write only field"
                 data-testid="connection-ssh-username-input"
                 angulartics2On="change"
                 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

@@ -122,9 +122,10 @@
             Use SSH tunnel
         </mat-checkbox>
 
-        <mat-form-field *ngIf="connection.ssh" appearance="outline" class="advanced-settings__fullLine">
+        <mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always" class="advanced-settings__fullLine">
             <mat-label>Private SSH key</mat-label>
             <textarea matInput resizeToFitContent rows="8" name="privateSSHKey" #privateSSHKey="ngModel"
+                placeholder="Sensitive — write only field"
                 data-testid="connection-ssh-key-textarea"
                 angulartics2On="change"
                 angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH key is edited"
@@ -159,9 +160,10 @@
             <mat-error *ngIf="sshPort.errors?.required && (sshPort.invalid && sshPort.touched)">SSH port should not be empty.</mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="connection.ssh" appearance="outline">
+        <mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always">
             <mat-label>SSH username</mat-label>
             <input matInput name="sshUsername" #sshUsername="ngModel"
+                placeholder="Sensitive — write only field"
                 data-testid="connection-ssh-username-input"
                 angulartics2On="change"
                 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

@@ -113,16 +113,18 @@
             Use SSH tunnel
         </mat-checkbox>
 
-        <mat-form-field *ngIf="connection.ssh" appearance="outline" class="advanced-settings__fullLine">
+        <mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always" class="advanced-settings__fullLine">
             <mat-label>Private SSH key</mat-label>
             <textarea matInput resizeToFitContent rows="8" name="privateSSHKey" #privateSSHKey="ngModel"
+                placeholder="Sensitive — write only field"
                 data-testid="connection-ssh-key-textarea"
                 angulartics2On="change"
                 angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH key is edited"
                 [required]="connection.ssh && !connection.id" [readonly]="accessLevel === 'readonly' && connection.id"
                 [disabled]="submitting"
                 [(ngModel)]="connection.privateSSHKey"
             ></textarea>
+            <mat-hint>Sensitive — write only field.</mat-hint>
             <mat-error *ngIf="privateSSHKey.errors?.required && (privateSSHKey.invalid && privateSSHKey.touched)">Private SSH key should not be empty.</mat-error>
         </mat-form-field>
 
@@ -150,9 +152,10 @@
             <mat-error *ngIf="sshPort.errors?.required && (sshPort.invalid && sshPort.touched)">SSH port should not be empty.</mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="connection.ssh" appearance="outline">
+        <mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always">
             <mat-label>SSH username</mat-label>
             <input matInput name="sshUsername" #sshUsername="ngModel"
+                placeholder="Sensitive — write only field"
                 data-testid="connection-ssh-username-input"
                 angulartics2On="change"
                 angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH username is edited"

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

@@ -0,0 +1,168 @@
+<app-alert></app-alert>
+<app-placeholder-table-widgets *ngIf="!widgets"></app-placeholder-table-widgets>
+
+<div *ngIf="widgets" class="wrapper">
+    <header class="header">
+        <app-breadcrumbs [crumbs]="getCrumbs(currentConnection.title || currentConnection.database)" class="row-breadcrumbs"></app-breadcrumbs>
+
+        <div *ngIf="widgets.length" class="header-actions">
+            <button  mat-stroked-button
+                type="button"
+                (click)="openClearAllConfirmation()"
+                [disabled]="fields.length === 0 && widgets.length === 0">
+                Clear All
+            </button>
+            <button mat-stroked-button color="accent"
+                type="button"
+                angulartics2On="click"
+                angularticsAction="Widgets: add widget is clicked"
+                (click)="addNewWidget()"
+                [disabled]="fields.length === 0 || widgets.length === fieldsCount">
+                <mat-icon>add</mat-icon>
+                Add field UI config
+            </button>
+        </div>
+
+    </header>
+
+    <form *ngIf="widgets && widgets.length; else emptyState" (ngSubmit)="updateWidgets()" class="widget-settings">
+        <app-widget *ngFor="let widget of widgets; let i = index"
+            class="widget-item"
+            [index]="i"
+            [widgetType]="widget.widget_type"
+            [widget]="widget"
+            [fields]="fields"
+            [widgetTypes]="widgetTypes"
+            [isReadonlyParams]="isReadOnly(widget.widget_type)"
+            [codeEditorTheme]="codeEditorTheme"
+            (onSelectWidgetField)="selectWidgetField($event)"
+            (onWidgetTypeChange)="widgetTypeChange($event)"
+            (onWidgetParamsChange)="widgetParamsChange($event)"
+            (onWidgetDelete)="openDeleteWidgetDialog($event)">
+        </app-widget>
+
+
+        <div class="actions">
+            <a mat-stroked-button routerLink="/dashboard/{{connectionID}}/{{tableName}}">
+                Back
+            </a>
+
+            <button mat-flat-button color="primary"
+                type="submit" [disabled]="submitting">
+                Save
+            </button>
+        </div>
+    </form>
+
+    <ng-template #emptyState>
+        <div class="empty-state">
+            <!--<p class="empty-state__text">No fields configured</p>-->
+            <p class="widgets-hint">
+                <strong class="widgets-hint__title">Customize how fields look in forms and tables</strong>
+                <span class="widgets-hint__text">Nothing will be changed in your data types, just better reflecting the nature of the data.</span>
+            </p>
+
+            <button mat-flat-button color="accent"
+                angulartics2On="click"
+                angularticsAction="Widgets: add first widget is clicked"
+                (click)="addNewWidget()">
+                Configure fields
+            </button>
+
+            <div class="widget-examples">
+                <div class="widget-example">
+                    <app-row-text
+                        key="password-original-example"
+                        label="Password"
+                        value="MySuper-Secret-Password_12345678"
+                        [required]="false"
+                        [readonly]="false"
+                        [disabled]="false">
+                    </app-row-text>
+                    <mat-icon class="examples-arrow">arrow_downward</mat-icon>
+                    <app-row-password
+                        key="password-example"
+                        label="Password"
+                        value="MySuper-Secret-Password_12345678"
+                        [required]="false"
+                        [readonly]="false"
+                        [disabled]="false">
+                    </app-row-password>
+                </div>
+
+                <div class="widget-example widget-example_row-2">
+                    <app-row-text
+                        key="select-original-example"
+                        label="Color"
+                        value="💜 Purple"
+                        [required]="false"
+                        [readonly]="false"
+                        [disabled]="false">
+                    </app-row-text>
+                    <mat-icon class="examples-arrow">arrow_downward</mat-icon>
+                    <app-row-select
+                        key="select-example"
+                        label="Color"
+                        value="purple"
+                        [widgetStructure]="{widget_params: {options: [{value: 'red', label: '❤️ Red'}, {value: 'green', label: '💚 Green'}, {value: 'blue', label: '💙 Blue'}, {value: 'purple', label: '💜 Purple'}]}}"
+                        [required]="false"
+                        [readonly]="false"
+                        [disabled]="false">
+                    </app-row-select>
+                </div>
+
+                <div class="widget-example widget-example_row-1-2">
+                    <app-row-text
+                        key="image-original-example"
+                        label="Image"
+                        value="https://app.rocketadmin.com/assets/main-table-reg-image.svg"
+                        [required]="false"
+                        [readonly]="false"
+                        [disabled]="false">
+                    </app-row-text>
+                    <mat-icon class="examples-arrow">arrow_downward</mat-icon>
+                    <app-image
+                        key="image-example"
+                        label="Image"
+                        value="https://app.rocketadmin.com/assets/main-table-reg-image.svg"
+                        [required]="false"
+                        [readonly]="false"
+                        [disabled]="false">
+                    </app-image>
+                </div>
+
+                <div class="widget-example widget-example_row-1-2">
+                    <app-row-long-text
+                        key="long-text-original-example"
+                        label="code"
+                        [value]="widgetCodeEample"
+                        [required]="false"
+                        [readonly]="false"
+                        [disabled]="false">
+                    </app-row-long-text>
+                    <mat-icon class="examples-arrow">arrow_downward</mat-icon>
+                    <app-code
+                        key="code-example"
+                        label="Code"
+                        [value]="widgetCodeEample"
+                        [widgetStructure]="{widget_params: {language: 'html'}}"
+                        [required]="false"
+                        [readonly]="false"
+                        [disabled]="false">
+                    </app-code>
+                </div>
+            </div>
+
+            <div class="actions">
+                <button mat-stroked-button type="button" (click)="goBack()">
+                    Back
+                </button>
+
+                <button mat-flat-button color="primary"
+                    type="submit" disabled>
+                    Save
+                </button>
+            </div>
+        </div>
+    </ng-template>
+</div>

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

@@ -0,0 +1,23 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-foreign-key-row',
+  templateUrl: './foreign-key-row.component.html',
+  styleUrls: ['./foreign-key-row.component.scss']
+})
+export class ForeignKeyRowComponent implements OnInit {
+  @Input() form: FormGroup;
+  @Input() field: any;
+  @Input() options: any[];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  trackByFn(index: number, item: any): any {
+    return item.id || index; // Adjust based on unique identifier
+  }
+}

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

@@ -10,11 +10,13 @@
             [matAutocomplete]="auto"
             (ngModelChange)="autocmpleteUpdate.next($event)">
         <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="updateRelatedLink($event)">
-            <mat-option *ngFor="let suggestion of suggestions"
-                [ngClass]="{'disabled': suggestion.displayString === 'No matches'}"
-                [value]="suggestion.displayString">
-                {{suggestion.displayString}}
-            </mat-option>
+            @for (suggestion of suggestions; track suggestion.fieldValue) {
+                <mat-option
+                    [ngClass]="{'disabled': suggestion.displayString === 'No matches'}"
+                    [value]="suggestion.displayString">
+                    {{suggestion.displayString}}
+                </mat-option>
+            }
         </mat-autocomplete>
         <mat-hint>Improve search performance by configuring <em>Foreign key search fields</em>&nbsp;
             <a routerLink="/dashboard/{{connectionID}}/{{relations.referenced_table_name}}/settings" class="hint-link">here</a>.