Fixes

frontend/src/app/components/connections-list/own-connections/own-connections.component.css

@@ -194,7 +194,8 @@
 .connections {
     list-style: none;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(300px, calc(33.33% - 14px)));
+    justify-content: center;
     gap: 20px;
     margin-top: 24px;
     width: 100%;

frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css

@@ -51,6 +51,8 @@
 
 .order-settings__panel {
     flex-grow: 1;
+    position: relative;
+    margin-top: 16px;
     margin-bottom: 8px;
 }
 

frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.html

@@ -5,14 +5,14 @@
     <app-breadcrumbs [crumbs]="getCrumbs(currentConnection.title || currentConnection.database)" class="row-breadcrumbs"></app-breadcrumbs>
     <form #tableSettingsForm="ngForm" class="settings-form" (ngSubmit)="updateSettings()">
         <div class="settings-fields">
-            <h2 class="mat-heading-2 settings-fields__heading">General</h2>
+            <h2 class="mat-heading-2 settings-fields__heading">General settings</h2>
 
             <div class="settings-table-display">
                 <mat-form-field appearance="outline" class="settings-table-display__title">
-                    <mat-label>Table display name</mat-label>
+                    <mat-label>Displayed table name</mat-label>
                     <input matInput [(ngModel)]="tableSettings.display_name" name="display_name" #displayName="ngModel">
                     <!-- <mat-error *ngIf="title.errors?.required && (title.invalid && title.touched)">Title should not be empty.</mat-error> -->
-                    <mat-hint>Enter table name to be displayed in the interface.</mat-hint>
+                    <mat-hint>Change the name of your table. This will not override your database.</mat-hint>
                 </mat-form-field>
                 <app-icon-picker class="icon-picker" [resetButtonShown]="true"
                     [icon]="tableSettings.icon"
@@ -29,7 +29,7 @@ <h2 class="mat-heading-2 settings-fields__heading">General</h2>
                     [(ngModel)]="tableSettings.sensitive_fields">
                     <mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
                 </mat-select>
-                <mat-hint>Define sensitive fields to hide them from Audit logs.</mat-hint>
+                <mat-hint>Choose the fields you want hidden in the "Audit" tab. They won't be logged on our servers.</mat-hint>
             </mat-form-field>
 
             <mat-form-field appearance="outline">
@@ -43,16 +43,22 @@ <h2 class="mat-heading-2 settings-fields__heading">General</h2>
                 <mat-hint>Select a column you want to display as a foreign key field.</mat-hint>
             </mat-form-field>
 
+            <mat-slide-toggle name="allow_import"
+                color="primary"
+                [(ngModel)]="tableSettings.allow_csv_import">
+                Allow importing rows from CSV
+            </mat-slide-toggle>
+
             <mat-slide-toggle name="allow_export"
                 color="primary"
                 [(ngModel)]="tableSettings.allow_csv_export">
-                Allow export
+                Allow table export to CSV
             </mat-slide-toggle>
 
-            <mat-slide-toggle name="allow_import"
+            <mat-slide-toggle name="can_delete"
                 color="primary"
-                [(ngModel)]="tableSettings.allow_csv_import">
-                Allow import
+                [(ngModel)]="tableSettings.can_delete">
+                Allow row deletion
             </mat-slide-toggle>
 
             <h2 class="mat-heading-2 settings-fields__heading">Table view</h2>
@@ -63,7 +69,7 @@ <h2 class="mat-heading-2 settings-fields__heading">Table view</h2>
                     [(ngModel)]="tableSettings.columns_view">
                     <mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
                 </mat-select>
-                <mat-hint>Select the columns you always want to see when you open this table.</mat-hint>
+                <mat-hint>Choose the columns you want users to see when they first open this table. Changes made to a table's Columns view are saved over the default values.</mat-hint>
             </mat-form-field>
 
             <div class="order-settings">
@@ -100,18 +106,18 @@ <h2 class="mat-heading-2 settings-fields__heading">Table view</h2>
             </div>
 
             <mat-form-field appearance="outline">
-                <mat-label>Fields to search</mat-label>
+                <mat-label>Searchable columns</mat-label>
                 <mat-select multiple
                     name="search_fields"
                     [(ngModel)]="tableSettings.search_fields">
                     <mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
                 </mat-select>
-                <mat-hint>Select the columns you often use as filters.</mat-hint>
+                <mat-hint>Choose the columns Rocketadmin scans when using the Search bar.</mat-hint>
             </mat-form-field>
 
             <div class="form-group-ordering">
                 <mat-form-field appearance="outline" class="form-group-ordering__ordering-by">
-                    <mat-label>Ordering by field</mat-label>
+                    <mat-label>Order by</mat-label>
                     <mat-select name="ordering_field" [(ngModel)]="tableSettings.ordering_field">
                         <mat-option value="">None</mat-option>
                         <mat-option *ngFor="let field of fields" [value]="field">
@@ -129,33 +135,35 @@ <h2 class="mat-heading-2 settings-fields__heading">Table view</h2>
             </div>
 
             <mat-form-field appearance="outline">
-                <mat-label>Sort fields by</mat-label>
+                <mat-label>Sortable columns</mat-label>
                 <mat-select multiple
                     name="sortable_by"
                     [(ngModel)]="tableSettings.sortable_by">
-                    <mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
-                </mat-select>
+                <mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
+            </mat-select>
+            <mat-hint>Choose which columns allow you to sort their values by pressing the arrow next to the column's name. Columns which aren't selected will not be sortable.</mat-hint>
             </mat-form-field>
 
-            <h2 class="mat-heading-2" style="margin-bottom: -4px;">Record view</h2>
+            <h2 class="mat-heading-2" style="margin-bottom: -4px; margin-top: 12px">"Edit row" behavior</h2>
+            <p class="mat-body-1" style="margin-top: -16px; margin-bottom: 0; color: rgba(0,0,0,0.64)">You can edit a row by clicking on the "pencil" icon on the right.</p>
             <mat-form-field appearance="outline">
-                <mat-label>Foreign key search fields</mat-label>
+                <mat-label>Searchable foreign key columns</mat-label>
                 <mat-select multiple
                     name="autocomplete_columns"
                     [(ngModel)]="tableSettings.autocomplete_columns">
                     <mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
                 </mat-select>
-                <mat-hint>Select the columns you want to search by when you look for the record as a foreign key.</mat-hint>
+                <mat-hint>Choose the columns Rocketadmin scans within a related table when using the foreign keys box.</mat-hint>
             </mat-form-field>
 
             <mat-form-field appearance="outline">
-                <mat-label>Fields to exclude</mat-label>
+                <mat-label>Columns to hide</mat-label>
                 <mat-select multiple
                     name="excluded_fields"
                     [(ngModel)]="tableSettings.excluded_fields">
                     <mat-option *ngFor="let field of fields_to_exclude" [value]="field">{{field}}</mat-option>
                 </mat-select>
-                <mat-hint>Select the columns you want to hide and protect from editing.</mat-hint>
+                <mat-hint>Choose the columns you want to hide from the "Table" view and the "Edit row" view. This also removes the option to edit them.</mat-hint>
             </mat-form-field>
 
             <mat-form-field appearance="outline">
@@ -165,7 +173,7 @@ <h2 class="mat-heading-2" style="margin-bottom: -4px;">Record view</h2>
                     [(ngModel)]="tableSettings.readonly_fields">
                     <mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
                 </mat-select>
-                <mat-hint>Select the columns you want to display and protect from editing.</mat-hint>
+                <mat-hint>Choose columns that will be visible in "Table" view but not editable in "Edit row" view.</mat-hint>
             </mat-form-field>
         </div>
 

frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.spec.ts

@@ -99,7 +99,8 @@ describe('DbTableSettingsComponent', () => {
     sensitive_fields: [],
     connection_id: "63f804e4-8588-4957-8d7f-655e2309fef7",
     allow_csv_export: true,
-    allow_csv_import: true
+    allow_csv_import: true,
+    can_delete: true,
   }
 
   beforeEach(async () => {

frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.ts

@@ -82,6 +82,7 @@ export class DbTableSettingsComponent implements OnInit {
     sensitive_fields: [],
     allow_csv_export: true,
     allow_csv_import: true,
+    can_delete: true,
   }
   public tableSettings: TableSettings = null;
   public defaultIcons = ['favorite', 'star', 'done', 'arrow_forward', 'key', 'lock', 'visibility', 'language', 'notifications', 'schedule'];

frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css

@@ -137,10 +137,6 @@
     }
 }
 
-.actions__action {
-    transform: scale(0.85);
-}
-
 .action_active {
     position: relative;
 }

frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html

@@ -32,12 +32,12 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
     <div *ngIf="selection.selected.length; else generalActions" class="db-table-bulk-actions">
         <div class="actions">
             <ng-container *ngIf="tableData.tableBulkActions && tableData.tableBulkActions.length">
-                <button type="button" mat-button class="actions__action" *ngFor="let action of tableData.tableBulkActions"
+                <button type="button" mat-button *ngFor="let action of tableData.tableBulkActions"
                 (click)="handleActions(action)">
                     {{action.title}}
                 </button>
             </ng-container>
-            <button mat-button *ngIf="tableData && tableData.permissions && tableData.permissions.delete"
+            <button mat-button *ngIf="tableData && tableData.permissions && tableData.permissions.delete && tableData.canDelete"
                 (click)="handleActions({title: 'Delete rows', type: 'multiple',  require_confirmation: true})">
                 Delete
             </button>
@@ -304,7 +304,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                         (click)="stashUrlParams()">
                         <mat-icon fontSet="material-icons-outlined">difference</mat-icon>
                     </a>
-                    <button type="button" mat-icon-button *ngIf="tableData.permissions.delete"
+                    <button type="button" mat-icon-button *ngIf="tableData.permissions.delete && tableData.canDelete"
                         attr.data-testid="table-delete-record-{{i}}-button"
                         angulartics2On="click"
                         angularticsAction="Dashboard: delete row is clicked"

frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.html

@@ -13,7 +13,7 @@
 
 <div class="widget-type">
     <mat-form-field appearance="outline">
-        <mat-label>Display type</mat-label>
+        <mat-label>Displayed field type</mat-label>
         <mat-select name="{{widget.field_name}}-field-type"
             [(ngModel)]="widget.widget_type"
             (ngModelChange)="onWidgetTypeChange.emit(widget.field_name)">
@@ -43,12 +43,12 @@
 </div>
 
 <mat-form-field appearance="outline">
-    <mat-label>Display field name</mat-label>
+    <mat-label>Displayed field name</mat-label>
     <input matInput [(ngModel)]="widget.name" name="{{widget.field_name}}-field-new-name">
 </mat-form-field>
 
 <mat-form-field appearance="outline">
-    <mat-label>Display description</mat-label>
+    <mat-label>Displayed field description</mat-label>
     <textarea matInput [(ngModel)]="widget.description" name="{{widget.field_name}}-field-description"></textarea>
 </mat-form-field>
 

frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.ts

@@ -62,18 +62,21 @@ export class WidgetComponent implements OnInit, OnChanges {
 
   public docsUrls = {
     Boolean: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#boolean',
-    Textarea: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#textarea',
-    Select: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#select',
-    Password: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#password',
     Code: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#code',
-    Image: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#image',
-    Foreign_key: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#foreign-key',
-    Phone: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#phone',
     Color: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#color',
-    Money: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#money',
     Country: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#country',
-    UUID: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#uuid',
+    Foreign_key: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#foreign-key',
+    Image: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#image',
+    Money: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#money',
+    Number: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#number',
+    Password: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#password',
+    Phone: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#phone',
     Range: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#range',
+    Select: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#select',
+    String: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#string',
+    Textarea: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#textarea',
+    URL: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#url',
+    UUID: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#uuid',
     Date: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#date-time-and-datetime',
     DateTime: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#date-time-and-datetime',
     Time: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#date-time-and-datetime',

frontend/src/app/components/dashboard/db-tables-data-source.ts

@@ -76,6 +76,7 @@ export class TablesDataSource implements DataSource<Object> {
   public permissions;
   public isExportAllowed: boolean;
   public isImportAllowed: boolean;
+  public canDelete: boolean;
   public isEmptyTable: boolean;
   public tableActions: CustomAction[];
   public tableBulkActions: CustomAction[];
@@ -280,6 +281,7 @@ export class TablesDataSource implements DataSource<Object> {
 
           this.isExportAllowed = res.allow_csv_export;
           this.isImportAllowed = res.allow_csv_import;
+          this.canDelete = res.can_delete;
 
           this.sortByColumns = res.sortable_by;
 
@@ -313,9 +315,10 @@ export class TablesDataSource implements DataSource<Object> {
   }
 
   getActionsColumnWidth(actions, permissions) {
-    const defaultActionsCount = permissions.edit + permissions.add + permissions.delete;
-    const lendthValue = (((actions.length + defaultActionsCount) * 36) + 32);
-    return `${lendthValue}px`
+    const defaultActionsCount = permissions.edit + permissions.add + (!!permissions.delete && !!this.canDelete);
+    const totalActionsCount = actions.length + defaultActionsCount;
+    const lengthValue = ((totalActionsCount * 36) + 32);
+    return totalActionsCount === 0 ? '0' : `${lengthValue}px`
   }
 
   changleColumnList(connectionId: string, tableName: string) {

frontend/src/app/components/ui-components/icon-picker/icon-picker.component.html

@@ -17,11 +17,11 @@
 <mat-menu #menu="matMenu">
     <div class="icons-menu">
         <div class="icons-menu__header">
-            <strong>Select an icon</strong>
+            <strong>Choose an icon</strong>
             <button type="button" *ngIf="icon && resetButtonShown"
                 mat-button color="warn"
                 (click)="resetIcon()">
-                Reset
+                Remove
             </button>
         </div>
         <ul class="icons-list">
@@ -40,12 +40,12 @@
         </ul>
         <div class="custom-icon-box" (click)="$event.stopPropagation();">
             <mat-form-field appearance="outline" class="icon-input">
-                <mat-label>Another icon</mat-label>
+                <mat-label>Add another icon</mat-label>
                 <input matInput
                     name="action-icon"
                     [(ngModel)]="customIcon">
                 <mat-hint class="icon-input__hint">
-                    More icons <a href="https://fonts.google.com/icons" target="_blank" class="google-icons-link">here</a>
+                    Copy "Icon name" from <a href="https://fonts.google.com/icons" target="_blank" class="google-icons-link">here</a>
                 </mat-hint>
             </mat-form-field>
             <button type="button" mat-button color="primary"

frontend/src/app/models/table.ts

@@ -36,6 +36,7 @@ export interface TableSettings {
     sensitive_fields: string[],
     allow_csv_export: boolean,
     allow_csv_import: boolean,
+    can_delete: boolean,
 }
 
 export interface TableRow {

frontend/src/app/services/tables.service.spec.ts

@@ -1,8 +1,8 @@
 import { AlertActionType, AlertType } from '../models/alert';
 import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { Angulartics2Module } from 'angulartics2';
 
+import { Angulartics2Module } from 'angulartics2';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { NotificationsService } from './notifications.service';
 import { TableOrdering } from '../models/table';
 import { TablesService } from './tables.service';
@@ -166,7 +166,8 @@ describe('TablesService', () => {
     "table_name": "contacts_with_uuid",
     "sensitive_fields": [],
     "allow_csv_export": true,
-    "allow_csv_import": true
+    "allow_csv_import": true,
+    "can_delete": true,
   };
 
   const tableWidgetsNetwork = [