rocket-admin · lyubov-voloshko · Feb 16, 2025 · Feb 15, 2025 · Feb 15, 2025 · Feb 15, 2025
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
@@ -92,7 +92,11 @@
                     routerLink="{{tab}}/{{connectionID}}"
                     routerLinkActive="nav-bar__button_active"
                     class="nav-bar__button">
-                    {{navigationTabs[tab].caption}}
+                    <span *ngIf="tab !== 'edit-db' ">{{navigationTabs[tab].caption}}</span>
+                    <mat-icon *ngIf="tab === 'edit-db' "
+                        matTooltip="Database credentials">
+                        key_vertical
+                    </mat-icon>
                 </a>
             </div>
 

diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
@@ -126,12 +126,12 @@ export class AppComponent {
       'permissions': {
         caption: 'Permissions'
       },
+      'connection-settings': {
+        caption: 'Connection settings'
+      },
       'edit-db': {
         caption: 'Edit connection'
       },
-      'connection-settings': {
-        caption: 'Connection settings'
-      }
     }
 
     document.cookie = "G_AUTH2_MIGRATION=informational";

diff --git a/frontend/src/app/components/dashboard/dashboard.component.html b/frontend/src/app/components/dashboard/dashboard.component.html
@@ -95,6 +95,7 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
                 [foreignKeysList]="dataSource.foreignKeysList"
                 [widgets]="dataSource.widgets"
                 [widgetsList]="dataSource.widgetsList"
+                [activeFilters]="filters"
             ></app-db-table-row-view>
             <app-db-table-ai-panel *ngIf="isAIpanelOpened"
                 [displayName]="selectedTableDisplayName"

diff --git a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html
@@ -13,8 +13,9 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
             <a mat-icon-button
                 [routerLink]="selectedRow.link"
                 [queryParams]="selectedRow.primaryKeys"
-                matTooltip="Open the record">
-                <mat-icon>open_in_new</mat-icon>
+                matTooltip="Open the record"
+                (click)="stashUrlParams()">
+                <mat-icon fontSet="material-icons-outlined">create</mat-icon>
             </a>
         </div>
         <button mat-icon-button (click)="handleClose()">

diff --git a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.ts b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.ts
@@ -1,3 +1,4 @@
+import { ActivatedRoute, RouterModule } from '@angular/router';
 import { Component, Input, OnInit } from '@angular/core';
 import { TableRow, Widget } from 'src/app/models/table';
 
@@ -6,7 +7,6 @@ import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { NotificationsService } from 'src/app/services/notifications.service';
-import { RouterModule } from '@angular/router';
 import { TableStateService } from 'src/app/services/table-state.service';
 
 @Component({
@@ -27,12 +27,14 @@ export class DbTableRowViewComponent implements OnInit {
   @Input() foreignKeysList: string[];
   @Input() widgets: { string: Widget };
   @Input() widgetsList: string[];
+  @Input() activeFilters: object;
 
   public selectedRow: TableRow;
 
   constructor(
     private _tableState: TableStateService,
     private _notifications: NotificationsService,
+    private route: ActivatedRoute,
   ) { }
 
   ngOnInit(): void {
@@ -79,6 +81,15 @@ export class DbTableRowViewComponent implements OnInit {
     this._notifications.showSuccessSnackbar(message);
   }
 
+  stashUrlParams() {
+    this._tableState.setBackUrlParams(this.route.snapshot.queryParams.page_index, this.route.snapshot.queryParams.page_size, this.route.snapshot.queryParams.sort_active, this.route.snapshot.queryParams.sort_direction);
+    if (this.activeFilters && Object.keys(this.activeFilters).length > 0) {
+      this._tableState.setBackUrlFilters(this.activeFilters);
+    } else {
+      this._tableState.setBackUrlFilters(null);
+    }
+  }
+
   handleClose() {
     this._tableState.clearSelection();
   }

diff --git a/frontend/src/app/components/dashboard/db-table/db-table.component.html b/frontend/src/app/components/dashboard/db-table/db-table.component.html
@@ -74,7 +74,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                     data-testid="table-add-record-link"
                     angulartics2On="click"
                     angularticsAction="Dashboard: add row is clicked"
-                    (click)="stashFilters()">
+                    (click)="stashUrlParams()">
                     <mat-icon>add</mat-icon>
                     Add row
                 </a>
@@ -310,7 +310,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                     <a mat-icon-button *ngIf="tableData.permissions.add"
                         routerLink="/dashboard/{{connectionID}}/{{name}}/entry"
                         [queryParams]="tableData.getQueryParams(element, 'dub')"
-                        attr.data-testid="table-edit-record-{{i}}-link"
+                        attr.data-testid="table-duplicate-record-{{i}}-link"
                         attr.data-test-primary-key-name="{{tableData.keyAttributes[0]?.column_name}}"
                         attr.data-test-primary-key-value="{{element[tableData.keyAttributes[0]?.column_name]}}"
                         angulartics2On="click"

diff --git a/frontend/src/app/components/dashboard/db-table/db-table.component.ts b/frontend/src/app/components/dashboard/db-table/db-table.component.ts
@@ -329,13 +329,16 @@ export class DbTableComponent implements OnInit {
   }
 
   stashUrlParams() {
-    console.log('stashUrlParams');
     this._tableState.setBackUrlParams(this.route.snapshot.queryParams.page_index, this.route.snapshot.queryParams.page_size, this.route.snapshot.queryParams.sort_active, this.route.snapshot.queryParams.sort_direction);
     this.stashFilters();
   }
 
   stashFilters() {
-    this._tableState.setBackUrlFilters(this.activeFilters);
+    if (this.activeFilters && Object.keys(this.activeFilters).length > 0) {
+      this._tableState.setBackUrlFilters(this.activeFilters);
+    } else {
+      this._tableState.setBackUrlFilters(null);
+    }
   }
 
   getIdentityFieldsValues() {

diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts
@@ -136,7 +136,10 @@ export class DbTableRowEditComponent implements OnInit {
     this.connectionID = this._connections.currentConnectionID;
     this.tableFiltersUrlString = JsonURL.stringify(this._tableState.getBackUrlFilters());
     const navUrlParams = this._tableState.getBackUrlParams();
-    this.backUrlParams = {...navUrlParams, filters: this.tableFiltersUrlString};
+    this.backUrlParams = {
+      ...navUrlParams,
+      ...(this.tableFiltersUrlString !== 'null' ? { filters: this.tableFiltersUrlString } : {})
+    };
 
     this.routeSub = this.route.queryParams.subscribe((params) => {
       this.tableName = this.route.snapshot.paramMap.get('table-name');
@@ -330,7 +333,8 @@ export class DbTableRowEditComponent implements OnInit {
       },
       {
         label: this.dispalyTableName,
-        link: `/dashboard/${this.connectionID}/${this.tableName}`
+        link: `/dashboard/${this.connectionID}/${this.tableName}`,
+        queryParams: this.backUrlParams
       },
       {
         label: pageTitle,

diff --git a/frontend/src/app/components/ui-components/breadcrumbs/breadcrumbs.component.html b/frontend/src/app/components/ui-components/breadcrumbs/breadcrumbs.component.html
@@ -2,6 +2,7 @@
     <ng-container *ngFor="let crumb of crumbs; let i = index">
         <a mat-button *ngIf="crumb.link; else staticCrumb"
             [routerLink]="crumb.link"
+            [queryParams]="crumb.queryParams"
             class="breadcrumb">
             {{crumb.label}}
         </a>

diff --git a/...tend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css b/...tend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css
@@ -40,6 +40,25 @@
     margin: 0 -8px;
 }
 
+.tables-list__header {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: subgrid;
+    justify-items: center;
+    background-color: var(--color-accentedPalette-100);
+    padding: 8px 0;
+}
+
+.tables-list__item {
+    display: contents;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.tables-list__divider {
+    grid-column: 1 / -1;
+    width: 100%;
+}
+
 .table-name-title {
     justify-self: flex-start;
     padding-left: 16px;

diff --git a/...end/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.html b/...end/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.html
@@ -43,59 +43,65 @@ <h2 class="mat-subtitle-1 permissions__title">Tables</h2>
             <app-content-loader *ngIf="loading"></app-content-loader>
             <div class="tables-list">
                 <div *ngIf="connectionAccess === 'edit'" class="tables-overlay"></div>
-                <div>Visibility</div>
-                <div class="table-name-title">Table name</div>
-                <div>ReadOnly</div>
-                <div>Add</div>
-                <div>Delete</div>
-                <div>Edit</div>
-                <ng-container *ngFor="let table of tablesAccess; let i = index">
-                    <div class="tableVisibility">
-                        <input type="checkbox" name="{{table.tableName}}-visibility" id="{{table.tableName}}-visibility"
-                            class="visually-hidden"
-                            (change)="uncheckActions(table)"
-                            [(ngModel)]="table.accessLevel.visibility">
-                        <label for="{{table.tableName}}-visibility">
-                            <mat-icon class="visibilityIcon" [ngClass]="{'visibilityIcon_visible' : table.accessLevel.visibility}"
-                                matTooltip="{{ table.accessLevel.visibility ? 'Table visible' : 'Table invisible' }}">
-                                {{ table.accessLevel.visibility ? 'visibility' : 'visibility_off' }}
-                            </mat-icon>
-                        </label>
-                    </div>
+                <div class="tables-list__header">
+                    <div>Visibility</div>
+                    <div class="table-name-title">Table name</div>
+                    <div>ReadOnly</div>
+                    <div>Add</div>
+                    <div>Delete</div>
+                    <div>Edit</div>
+                </div>
 
-                    <div class="table-name" [ngClass]="{'table-name_disabled': !table.accessLevel.visibility}">
-                        <span class="table-name__title">{{table.display_name}}</span>
-                        <span class="table-name__line">{{table.tableName}}</span>
-                    </div>
+                <div *ngFor="let table of tablesAccess; let i = index" class="tables-list__item">
+                    <div style="display: contents;">
+                        <div class="tableVisibility">
+                            <input type="checkbox" name="{{table.tableName}}-visibility" id="{{table.tableName}}-visibility"
+                                class="visually-hidden"
+                                (change)="uncheckActions(table)"
+                                [(ngModel)]="table.accessLevel.visibility">
+                            <label for="{{table.tableName}}-visibility">
+                                <mat-icon class="visibilityIcon" [ngClass]="{'visibilityIcon_visible' : table.accessLevel.visibility}"
+                                    matTooltip="{{ table.accessLevel.visibility ? 'Table visible' : 'Table invisible' }}">
+                                    {{ table.accessLevel.visibility ? 'visibility' : 'visibility_off' }}
+                                </mat-icon>
+                            </label>
+                        </div>
 
-                    <mat-slide-toggle name="{{table.tableName}}-readonly-toggle"
-                        [disabled]="!table.accessLevel.visibility"
-                        (change)="uncheckActions(table)"
-                        [(ngModel)]="table.accessLevel.readonly"
-                        (click)="onVisibilityChange($event, i)">
-                    </mat-slide-toggle>
-                    <div (click)="onRecordActionPermissionChange('add', i)">
-                        <mat-checkbox name="{{table.tableName}}-add"
-                            matTooltip="Add"
-                            [disabled]="!table.accessLevel.visibility || table.accessLevel.readonly"
-                            [checked]="table.accessLevel.add">
-                        </mat-checkbox>
-                    </div>
-                    <div (click)="onRecordActionPermissionChange('delete', i)">
-                        <mat-checkbox name="{{table.tableName}}-delete"
-                            matTooltip="Delete"
-                            [disabled]="!table.accessLevel.visibility || table.accessLevel.readonly"
-                            [checked]="table.accessLevel.delete">
-                        </mat-checkbox>
-                    </div>
-                    <div (click)="onRecordActionPermissionChange('edit', i)">
-                        <mat-checkbox name="{{table.tableName}}-edit"
-                            matTooltip="Edit"
-                            [disabled]="!table.accessLevel.visibility || table.accessLevel.readonly"
-                            [checked]="table.accessLevel.edit">
-                        </mat-checkbox>
+                        <div class="table-name" [ngClass]="{'table-name_disabled': !table.accessLevel.visibility}">
+                            <span class="table-name__title">{{table.display_name}}</span>
+                            <span class="table-name__line">{{table.tableName}}</span>
+                        </div>
+
+                        <mat-slide-toggle name="{{table.tableName}}-readonly-toggle"
+                            [disabled]="!table.accessLevel.visibility"
+                            (change)="uncheckActions(table)"
+                            [(ngModel)]="table.accessLevel.readonly"
+                            (click)="onVisibilityChange($event, i)">
+                        </mat-slide-toggle>
+                        <div (click)="onRecordActionPermissionChange('add', i)">
+                            <mat-checkbox name="{{table.tableName}}-add"
+                                matTooltip="Add"
+                                [disabled]="!table.accessLevel.visibility || table.accessLevel.readonly"
+                                [checked]="table.accessLevel.add">
+                            </mat-checkbox>
+                        </div>
+                        <div (click)="onRecordActionPermissionChange('delete', i)">
+                            <mat-checkbox name="{{table.tableName}}-delete"
+                                matTooltip="Delete"
+                                [disabled]="!table.accessLevel.visibility || table.accessLevel.readonly"
+                                [checked]="table.accessLevel.delete">
+                            </mat-checkbox>
+                        </div>
+                        <div (click)="onRecordActionPermissionChange('edit', i)">
+                            <mat-checkbox name="{{table.tableName}}-edit"
+                                matTooltip="Edit"
+                                [disabled]="!table.accessLevel.visibility || table.accessLevel.readonly"
+                                [checked]="table.accessLevel.edit">
+                            </mat-checkbox>
+                        </div>
                     </div>
-                </ng-container>
+                    <mat-divider class="tables-list__divider"></mat-divider>
+                </div>
             </div>
         </div>
     </mat-dialog-content>

diff --git a/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.ts b/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.ts
@@ -18,6 +18,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { CommonModule } from '@angular/common';
 import { ContentLoaderComponent } from '../../ui-components/content-loader/content-loader.component';
 import { AlertComponent } from '../../ui-components/alert/alert.component';
+import { MatDividerModule } from '@angular/material/divider';
 
 @Component({
   selector: 'app-permissions-add-dialog',
@@ -31,6 +32,7 @@ import { AlertComponent } from '../../ui-components/alert/alert.component';
     MatIconModule,
     MatSlideToggleModule,
     MatTooltipModule,
+    MatDividerModule,
     ContentLoaderComponent,
     AlertComponent
   ],

diff --git a/frontend/src/app/components/users/users.component.css b/frontend/src/app/components/users/users.component.css
@@ -34,15 +34,18 @@ header {
 
 .group-actions {
     display: none;
+    flex-grow: 0 !important;
     justify-content: flex-end;
     align-items: center;
 }
 
-.group-item:hover .title-edit-button {
+.group-item:hover .title-edit-button,
+.mat-expanded .title-edit-button {
     display: block;
 }
 
-.group-item:hover .group-actions {
+.group-item:hover .group-actions,
+.mat-expanded .group-actions {
     display: flex;
 }
 

diff --git a/frontend/src/app/components/users/users.component.html b/frontend/src/app/components/users/users.component.html
@@ -13,7 +13,8 @@ <h1 class="mat-h1">User groups</h1>
     <app-placeholder-user-groups *ngIf="groups === null"></app-placeholder-user-groups>
 
     <mat-accordion multi="true" *ngIf="groups">
-        <mat-expansion-panel *ngFor="let groupItem of groups" (opened)="openUsersList(groupItem.group.id)"
+        <mat-expansion-panel *ngFor="let groupItem of groups"
+            (opened)="openUsersList(groupItem.group.id)"
             [ngClass]="{'expansion-panel_admin': groupItem.group.title === 'Admin'}">
             <mat-expansion-panel-header class="group-item">
                 <mat-panel-title>

diff --git a/frontend/src/app/services/connections.service.ts b/frontend/src/app/services/connections.service.ts
@@ -119,7 +119,7 @@ export class ConnectionsService {
   get visibleTabs() {
     let tabs = ['dashboard', 'audit'];
     if (this.groupsAccessLevel) tabs.push('permissions');
-    if (this.isPermitted(this.connectionAccessLevel)) tabs.push('edit-db', 'connection-settings');
+    if (this.isPermitted(this.connectionAccessLevel)) tabs.push('connection-settings', 'edit-db');
     return tabs;
   }