From 463ac86087fbb790ff1cbce0fe36fbed26cb64e8 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Thu, 19 Jun 2025 16:20:25 +0300
Subject: [PATCH 1/2] clear row preview on redirect to row edit

---
 .../dashboard/db-table-row-view/db-table-row-view.component.ts  | 2 ++
 1 file changed, 2 insertions(+)

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 6c35fdbe8..7cab023ca 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
@@ -217,6 +217,8 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
     } else {
       this._tableState.setBackUrlFilters(null);
     }
+
+    this._tableState.clearSelection();
   }
 
   handleClose() {

From 6e5ac892161929ae2373c1aad6c428e6fecca21b Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Thu, 19 Jun 2025 16:44:06 +0300
Subject: [PATCH 2/2] record preview: related records in expansion panel

---
 .../db-table-row-view.component.css           | 27 +++++++------------
 .../db-table-row-view.component.html          | 17 +++++-------
 .../db-table-row-view.component.ts            |  5 ----
 3 files changed, 16 insertions(+), 33 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css
index 9566b057f..1658663c4 100644
--- a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css
+++ b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css
@@ -84,31 +84,22 @@
     margin-bottom: 16px;
 }
 
-.related-records__title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 8px 0 16px;
+.related-records-panel {
+    margin-left: 4px;
+    width: calc(100% - 8px);
 }
 
-.related-records__title h3 {
-    margin: 0 !important;
+.related-records-panel__header {
+    height: 36px !important;
+    padding: 0 12px 0 8px;
 }
 
-.related-records__toggle_open {
-    transform: rotate(180deg);
-    transition: transform 200ms ease;
-}
-
-.related-records__accordion {
-    display: block;
-    margin-left: 8px;
-    margin-bottom: 16px;
-    width: calc(100% - 16px);
+.related-records-panel ::ng-deep .mat-expansion-panel-body {
+    padding: 0;
 }
 
 .related-records__header {
-    padding: 0 8px;
+    padding: 0 12px 0 8px;
 }
 
 .related-records__table-name {
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 8d1912839..11adc16fc 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
@@ -25,15 +25,12 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
 
     <br />
 
-    <div *ngIf="selectedRow?.relatedRecords?.referenced_by?.length">
-        <div class="related-records__title">
-            <h3 class="mat-heading-3">Related records</h3>
-            <button mat-icon-button type="button"
-                (click)="toggleReferencedRecords()">
-                <mat-icon [ngClass]="{'related-records__toggle_open': referencedRecordsShown}">keyboard_arrow_down</mat-icon>
-            </button>
-        </div>
-        <mat-accordion multi="true" *ngIf="referencedRecordsShown" class="related-records__accordion">
+    <mat-expansion-panel *ngIf="selectedRow?.relatedRecords?.referenced_by?.length" class="related-records-panel">
+        <mat-expansion-panel-header class="related-records-panel__header">
+            Related records
+        </mat-expansion-panel-header>
+
+        <mat-accordion multi="true">
             <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel">
                 <mat-expansion-panel-header class="related-records__header">
                     <mat-panel-title class="related-records__table-name"> {{referencedTable.displayTableName}} </mat-panel-title>
@@ -70,7 +67,7 @@ <h3 class="mat-heading-3">Related records</h3>
                 </mat-nav-list>
             </mat-expansion-panel>
         </mat-accordion>
-    </div>
+    </mat-expansion-panel>
 
     <div *ngIf="!selectedRow?.relatedRecords?.referenced_by">
         <div class="skeleton loading-related-records">
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 7cab023ca..aefa4ea05 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
@@ -48,7 +48,6 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
   public referencedTables: { table_name: string; displayTableName: string; columns: string[] }[] = [];
   public referencedTablesURLParams: any;
   public referencedRecords: {} = {};
-  public referencedRecordsShown: boolean = false;
 
   constructor(
     private _tables: TablesService,
@@ -168,10 +167,6 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
     this.selectedRowCast.unsubscribe();
   }
 
-  toggleReferencedRecords() {
-    this.referencedRecordsShown = !this.referencedRecordsShown;
-  }
-
   isForeignKey(columnName: string) {
     return this.selectedRow.foreignKeysList.includes(columnName);
   }