From dcb98eb3badf9480462110b90a10225b073b8236 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 29 Sep 2025 14:57:38 +0300
Subject: [PATCH 1/2] record view: fix hj suppress

---
 .../db-table-row-view/db-table-row-view.component.html       | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
index df273f22e..39c224d2f 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
@@ -92,8 +92,9 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
                 </app-foreign-key-record-view>
             </ng-container>
 
-            <ng-template #recordContent data-hj-suppress>
+            <ng-template #recordContent>
                 <ndc-dynamic *ngIf="isWidget(column.title) && selectedRow.widgets[column.title].widget_type; else simpleValue"
+                    data-hj-suppress
                     [ndcDynamicComponent]="UIwidgets[selectedRow.widgets[column.title].widget_type]"
                     [ndcDynamicInputs]="{
                         key: column.title,
@@ -102,7 +103,7 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
                     }">
                 </ndc-dynamic>
                 <ng-template #simpleValue>
-                    <ndc-dynamic
+                    <ndc-dynamic data-hj-suppress
                         [ndcDynamicComponent]="recordViewComponents[selectedRow.fieldsTypes[column.title]]"
                         [ndcDynamicInputs]="{
                             key: column.title,

From c02fa15197228557e797f54359c8170c47e303ad Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 29 Sep 2025 15:48:34 +0300
Subject: [PATCH 2/2] navigate between foreign key and related records in View
 mode; add Edit button

---
 .../db-table-row-view.component.ts              |  8 ++++----
 .../db-table-row-edit.component.html            | 17 +++++++++++++----
 .../db-table-row-edit.component.ts              | 16 +++++++++++++++-
 .../foreign-key/foreign-key.component.html      |  2 +-
 .../foreign-key/foreign-key.component.ts        | 10 ++++++++--
 5 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.ts
index 1ab7e6d2f..d533b9fc8 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.ts
@@ -1,11 +1,14 @@
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { TableField, TableRow, Widget } from 'src/app/models/table';
+import { UIwidgets, recordViewFieldTypes } from 'src/app/consts/record-view-types';
 import { normalizeFieldName, normalizeTableName } from 'src/app/lib/normalize';
 
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { ConnectionsService } from 'src/app/services/connections.service';
+import { DynamicModule } from 'ng-dynamic-component';
+import { ForeignKeyRecordViewComponent } from 'src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component';
 import JsonURL from "@jsonurl/jsonurl";
 import { MatButtonModule } from '@angular/material/button';
 import { MatExpansionModule } from '@angular/material/expansion';
@@ -18,9 +21,6 @@ import { PlaceholderRecordViewComponent } from '../../../skeletons/placeholder-r
 import { TableStateService } from 'src/app/services/table-state.service';
 import { TablesService } from 'src/app/services/tables.service';
 import { formatFieldValue } from 'src/app/lib/format-field-value';
-import { UIwidgets, recordViewFieldTypes } from 'src/app/consts/record-view-types';
-import { DynamicModule } from 'ng-dynamic-component';
-import { ForeignKeyRecordViewComponent } from 'src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component';
 
 @Component({
   selector: 'app-db-table-row-view',
@@ -220,7 +220,7 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
                       keys[column.column_name] = row[column.column_name];
                     }
                     return keys;
-                  }, {})
+                  }, {mode: 'view'})
                 }),
                 identityColumn,
                 fieldsOrder
diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html
index 26a91f391..b7204d8fa 100644
--- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html
+++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html
@@ -123,7 +123,7 @@ <h3>
                                     label: tableWidgets[value].name || value,
                                     value: tableRowValues[value],
                                     required: tableRowRequiredValues[value],
-                                    readonly: !permissions?.edit && pageAction !== 'dub',
+                                    readonly: (!permissions?.edit && pageAction !== 'dub') || pageMode === 'view',
                                     disabled: isReadonlyField(value),
                                     widgetStructure: tableWidgets[value],
                                     relations: tableTypes[value] === 'foreign key' ? getRelations(value) : undefined
@@ -148,7 +148,7 @@ <h3>
                                     label: value,
                                     value: tableRowValues[value],
                                     required: tableRowRequiredValues[value],
-                                    readonly: !permissions?.edit && pageAction !== 'dub',
+                                    readonly: (!permissions?.edit && pageAction !== 'dub') || pageMode === 'view',
                                     disabled: isReadonlyField(value),
                                     structure: tableRowStructure[value],
                                     relations: tableTypes[value] === 'foreign key' ? getRelations(value) : undefined
@@ -169,8 +169,17 @@ <h3>
                         data-testid="record-back-to-table-button">
                         Back
                     </a>
+
+                    <button type="button" mat-flat-button color="primary"
+                        *ngIf="(keyAttributesListFromStructure.length || hasKeyAttributesFromURL) && permissions.edit && pageMode === 'view'"
+                        data-testid="switch-to-editing-button"
+                        (click)="switchToEditMode()">
+                        <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
+                        Edit
+                    </button>
+
                     <button type="button" mat-button color="primary"
-                        *ngIf="(keyAttributesListFromStructure.length || hasKeyAttributesFromURL) && permissions.edit"
+                        *ngIf="(keyAttributesListFromStructure.length || hasKeyAttributesFromURL) && permissions.edit && pageMode !== 'view'"
                         class="actions__continue"
                         data-testid="record-save-and-continue-editing-button"
                         [disabled]="submitting || editRowForm.form.invalid"
@@ -178,7 +187,7 @@ <h3>
                         Save and continue editing
                     </button>
 
-                    <button *ngIf="hasKeyAttributesFromURL && permissions?.edit && !pageAction"
+                    <button *ngIf="hasKeyAttributesFromURL && permissions?.edit && !pageAction && pageMode !== 'view'"
                         type="submit" mat-flat-button color="primary"
                         data-testid="record-edit-button"
                         [disabled]="submitting || editRowForm.form.invalid">
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 a888843d2..513796953 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
@@ -105,6 +105,7 @@ export class DbTableRowEditComponent implements OnInit {
   public permissions: TablePermissions;
   public canDelete: boolean;
   public pageAction: string;
+  public pageMode: string = null;
   public tableFiltersUrlString: string;
   public backUrlParams: object;
 
@@ -202,11 +203,15 @@ export class DbTableRowEditComponent implements OnInit {
             this.loading = false;
           })
       } else {
-        const { action, ...primaryKeys } = params;
+        const { action, mode, ...primaryKeys } = params;
         if (action) {
           this.pageAction = action;
         };
 
+        if (mode) {
+          this.pageMode = mode;
+        };
+
         this.keyAttributesFromURL = primaryKeys;
         this.dubURLParams = {...primaryKeys, action: 'dub'};
         this.hasKeyAttributesFromURL = !!Object.keys(this.keyAttributesFromURL).length;
@@ -723,4 +728,13 @@ export class DbTableRowEditComponent implements OnInit {
       }, {}),
     });
   }
+
+  switchToEditMode() {
+    this.pageMode = null;
+    this.router.navigate([`/dashboard/${this.connectionID}/${this.tableName}/entry`], {
+      queryParams: {
+        ...this.keyAttributesFromURL
+      }
+    });
+  }
 }
diff --git a/frontend/src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component.html b/frontend/src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component.html
index 9eaaa8314..54ca8ef61 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component.html
+++ b/frontend/src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component.html
@@ -1,6 +1,6 @@
 <a
   [routerLink]="link"
-  [queryParams]="primaryKeysParams"
+  [queryParams]="foreignKeyURLParams"
   class="field-view-value foreign-key-link"
   (click)="onForeignKeyClick.emit()">
   <span>{{displayValue}}</span>
diff --git a/frontend/src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component.ts b/frontend/src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component.ts
index 569dff91e..82a8068d6 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component.ts
+++ b/frontend/src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Injectable, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Injectable, Input, OnInit, Output } from '@angular/core';
 
 import { BaseRecordViewFieldComponent } from '../base-record-view-field/base-record-view-field.component';
 import { ClipboardModule } from '@angular/cdk/clipboard';
@@ -15,14 +15,20 @@ import { RouterModule } from '@angular/router';
   styleUrls: ['../base-record-view-field/base-record-view-field.component.css', './foreign-key.component.css'],
   imports: [MatIconModule, RouterModule, CommonModule]
 })
-export class ForeignKeyRecordViewComponent extends BaseRecordViewFieldComponent {
+export class ForeignKeyRecordViewComponent extends BaseRecordViewFieldComponent implements OnInit {
   @Input() link: string;
   @Input() primaryKeysParams: any;
   @Input() displayValue: string;
 
   @Output() onForeignKeyClick = new EventEmitter<{foreignKey: any, value: string}>();
 
+  public foreignKeyURLParams: any;
+
   constructor() {
     super();
   }
+
+  ngOnInit() {
+    this.foreignKeyURLParams = {...this.primaryKeysParams, mode: 'view'}
+  }
 }