From debfe2c20b2ab4cbcdefbe659713f599e6d3b644 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Sat, 15 Feb 2025 14:02:41 +0200
Subject: [PATCH 1/7] permissions: show group actions when it is open; fix
 click area

---
 frontend/src/app/components/users/users.component.css  | 7 +++++--
 frontend/src/app/components/users/users.component.html | 3 ++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/users/users.component.css b/frontend/src/app/components/users/users.component.css
index bf45301a5..ef9279c68 100644
--- 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
index d2bfc39ef..1107df1f2 100644
--- 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>

From 6544634b48d420f81fbb83d3ab15b18fa8aa7ce6 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Sat, 15 Feb 2025 14:17:38 +0200
Subject: [PATCH 2/7] record view: change icon for edit link

---
 .../db-table-row-view/db-table-row-view.component.html          | 2 +-
 .../app/components/dashboard/db-table/db-table.component.html   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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
index b55165476..d357bc025 100644
--- 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
@@ -14,7 +14,7 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
                 [routerLink]="selectedRow.link"
                 [queryParams]="selectedRow.primaryKeys"
                 matTooltip="Open the record">
-                <mat-icon>open_in_new</mat-icon>
+                <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/db-table.component.html b/frontend/src/app/components/dashboard/db-table/db-table.component.html
index f85465e15..5169c4ac3 100644
--- a/frontend/src/app/components/dashboard/db-table/db-table.component.html
+++ b/frontend/src/app/components/dashboard/db-table/db-table.component.html
@@ -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"

From 725dd9bc7bf4a5f5f1681b86800bb33a711c06f2 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Sat, 15 Feb 2025 15:20:49 +0200
Subject: [PATCH 3/7] record view: stash filters and params on open edit

---
 .../components/dashboard/dashboard.component.html   |  1 +
 .../db-table-row-view.component.html                |  3 ++-
 .../db-table-row-view.component.ts                  | 13 ++++++++++++-
 .../dashboard/db-table/db-table.component.html      |  2 +-
 .../dashboard/db-table/db-table.component.ts        |  7 +++++--
 .../db-table-row-edit.component.ts                  |  9 ++++++---
 6 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/components/dashboard/dashboard.component.html b/frontend/src/app/components/dashboard/dashboard.component.html
index 2ea5655b4..de6d936f6 100644
--- 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
index d357bc025..4a75d9189 100644
--- 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,7 +13,8 @@ <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">
+                matTooltip="Open the record"
+                (click)="stashUrlParams()">
                 <mat-icon fontSet="material-icons-outlined">create</mat-icon>
             </a>
         </div>
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
index dd78325af..d084cbcfa 100644
--- 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 (Object.keys(this.activeFilters).length === 0) {
+      this._tableState.setBackUrlFilters(null);
+    } else {
+      this._tableState.setBackUrlFilters(this.activeFilters);
+    }
+  }
+
   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
index 5169c4ac3..09c458031 100644
--- 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>
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
index a9bc84bff..df07c7b03 100644
--- 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 (Object.keys(this.activeFilters).length === 0) {
+      this._tableState.setBackUrlFilters(null);
+    } else {
+      this._tableState.setBackUrlFilters(this.activeFilters);
+    }
   }
 
   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
index c9cf2c679..b8e0fae7f 100644
--- 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
@@ -24,19 +24,19 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { NotificationsService } from 'src/app/services/notifications.service';
 import { PlaceholderRowEditComponent } from '../skeletons/placeholder-row-edit/placeholder-row-edit.component';
 import { RouterModule } from '@angular/router';
+import { Subscription } from 'rxjs';
 import { TableRowService } from 'src/app/services/table-row.service';
 import { TableStateService } from 'src/app/services/table-state.service';
 import { TablesService } from 'src/app/services/tables.service';
 import { Title } from '@angular/platform-browser';
 import { getTableTypes } from 'src/app/lib/setup-table-row-structure';
 import { normalizeTableName } from '../../lib/normalize';
-import { MatListModule } from '@angular/material/list';
-import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-db-table-row-edit',
@@ -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');

From aa20e9ec25457a70b481c27132cd49ddc482724f Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Sat, 15 Feb 2025 15:31:07 +0200
Subject: [PATCH 4/7] bread crumbs: add queryParams to a crumb link; redirect
 to filtered table from crumb link

---
 .../db-table-row-edit/db-table-row-edit.component.ts           | 3 ++-
 .../ui-components/breadcrumbs/breadcrumbs.component.html       | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

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
index b8e0fae7f..4779dc582 100644
--- 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
@@ -330,7 +330,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
index fe4ce38f2..58e401be1 100644
--- 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>

From 81b9581b1b40e18968f9200673ec0fc53582578d Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Sat, 15 Feb 2025 15:51:06 +0200
Subject: [PATCH 5/7] stash params: fix reset stashed filter if no active
 filters

---
 .../db-table-row-view/db-table-row-view.component.ts        | 6 +++---
 .../app/components/dashboard/db-table/db-table.component.ts | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

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
index d084cbcfa..80b56091b 100644
--- 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
@@ -83,10 +83,10 @@ export class DbTableRowViewComponent implements OnInit {
 
   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 (Object.keys(this.activeFilters).length === 0) {
-      this._tableState.setBackUrlFilters(null);
-    } else {
+    if (this.activeFilters && Object.keys(this.activeFilters).length > 0) {
       this._tableState.setBackUrlFilters(this.activeFilters);
+    } else {
+      this._tableState.setBackUrlFilters(null);
     }
   }
 
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
index df07c7b03..dafe21c77 100644
--- a/frontend/src/app/components/dashboard/db-table/db-table.component.ts
+++ b/frontend/src/app/components/dashboard/db-table/db-table.component.ts
@@ -334,10 +334,10 @@ export class DbTableComponent implements OnInit {
   }
 
   stashFilters() {
-    if (Object.keys(this.activeFilters).length === 0) {
-      this._tableState.setBackUrlFilters(null);
-    } else {
+    if (this.activeFilters && Object.keys(this.activeFilters).length > 0) {
       this._tableState.setBackUrlFilters(this.activeFilters);
+    } else {
+      this._tableState.setBackUrlFilters(null);
     }
   }
 

From e1550a48b6fdf6fb24ad8a5b615d5025bc4a7db2 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Sat, 15 Feb 2025 16:22:30 +0200
Subject: [PATCH 6/7] navbar: substitute Edit connetion tab with icon button
 and move to the end

---
 frontend/src/app/app.component.html              | 6 +++++-
 frontend/src/app/app.component.ts                | 6 +++---
 frontend/src/app/services/connections.service.ts | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index ecc5f9228..ca8b27d66 100644
--- 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
index fb0a655d9..4ce12baaa 100644
--- 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/services/connections.service.ts b/frontend/src/app/services/connections.service.ts
index a3d54a98d..dfb5b389b 100644
--- 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;
   }
 

From 9d4269b4bdcef7328df167c3b8596403906c5d39 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Sat, 15 Feb 2025 18:22:15 +0200
Subject: [PATCH 7/7] user permissions: update UI

---
 .../permissions-add-dialog.component.css      |  19 ++++
 .../permissions-add-dialog.component.html     | 106 +++++++++---------
 .../permissions-add-dialog.component.ts       |   2 +
 3 files changed, 77 insertions(+), 50 deletions(-)

diff --git a/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css b/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css
index 5baf26881..cdb8a4b98 100644
--- a/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css
+++ b/frontend/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/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.html b/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.html
index 2eaa34c60..4ba744b52 100644
--- a/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.html
+++ b/frontend/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
index 4e006f4c3..1f3228178 100644
--- 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
   ],