From b27dbb9af3b8fc2f66d61d05d41a44a8f860bfff Mon Sep 17 00:00:00 2001
From: Vijay Prasanna <vijayprasanna2896@gmail.com>
Date: Wed, 8 Nov 2023 12:27:35 +0530
Subject: [PATCH] console (fix): json values are not truncated in GDC browse
 rows

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/10459
GitOrigin-RevId: 0ed4456cb42d19739421cfbce77bdb5cdb0355a5
---
 .../DataGrid/parts/ReactTableWrapper.tsx         |  2 ++
 .../components/DataGrid/parts/RowDialog.tsx      | 16 ++++++++++++++--
 .../lib/features/DataSidebar/navigation-utils.ts |  4 ++--
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/libs/console/legacy-ce/src/lib/features/BrowseRows/components/DataGrid/parts/ReactTableWrapper.tsx b/frontend/libs/console/legacy-ce/src/lib/features/BrowseRows/components/DataGrid/parts/ReactTableWrapper.tsx
index 9e8de2a525b..01a1e0b8ff9 100644
--- a/frontend/libs/console/legacy-ce/src/lib/features/BrowseRows/components/DataGrid/parts/ReactTableWrapper.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/features/BrowseRows/components/DataGrid/parts/ReactTableWrapper.tsx
@@ -110,6 +110,7 @@ export const ReactTableWrapper: React.VFC<ReactTableWrapperProps> = ({
                   <FaExternalLinkAlt />
                 </span>
               ) : (
+                // eslint-disable-next-line jsx-a11y/anchor-is-valid
                 <a
                   onClick={() => {
                     relationships?.onClick({
@@ -269,6 +270,7 @@ export const ReactTableWrapper: React.VFC<ReactTableWrapperProps> = ({
                     key={`${row.id}-${i}`}
                     data-testid={`@table-cell-${row.id}-${i}`}
                     style={{ maxWidth: '20ch' }}
+                    className="px-sm py-xs whitespace-nowrap text-muted overflow-hidden text-ellipsis"
                   >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </CardedTable.TableBodyCell>
diff --git a/frontend/libs/console/legacy-ce/src/lib/features/BrowseRows/components/DataGrid/parts/RowDialog.tsx b/frontend/libs/console/legacy-ce/src/lib/features/BrowseRows/components/DataGrid/parts/RowDialog.tsx
index b29d0ed5fdb..08452527697 100644
--- a/frontend/libs/console/legacy-ce/src/lib/features/BrowseRows/components/DataGrid/parts/RowDialog.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/features/BrowseRows/components/DataGrid/parts/RowDialog.tsx
@@ -6,9 +6,9 @@ import {
   Textarea,
   InputField,
   SimpleForm,
-  CodeEditorField,
 } from '../../../../../new-components/Form';
 import { TableColumn } from '../../../../DataSource';
+import ReactJson from 'react-json-view';
 
 interface RowDialogProps {
   row: Record<string, any>;
@@ -28,7 +28,19 @@ export const RowDialog = ({ onClose, row, columns }: RowDialogProps) => {
     )?.consoleDataType;
 
     if (columnDataType === 'json')
-      return <CodeEditorField name={key} label={key} disabled />;
+      return (
+        <div>
+          <div className="font-semibold">{key}</div>
+          <div className="border p-4 rounded">
+            <ReactJson
+              src={
+                typeof row[key] === 'string' ? JSON.parse(row[key]) : row[key]
+              }
+              collapsed
+            />
+          </div>
+        </div>
+      );
 
     if (columnDataType === 'string')
       return <InputField disabled type="text" name={key} label={key} />;
diff --git a/frontend/libs/console/legacy-ce/src/lib/features/DataSidebar/navigation-utils.ts b/frontend/libs/console/legacy-ce/src/lib/features/DataSidebar/navigation-utils.ts
index 5f28f0f5c89..b8de20e9450 100644
--- a/frontend/libs/console/legacy-ce/src/lib/features/DataSidebar/navigation-utils.ts
+++ b/frontend/libs/console/legacy-ce/src/lib/features/DataSidebar/navigation-utils.ts
@@ -11,7 +11,7 @@ export const manageTableUrl = ({
   const tab =
     sessionStore.getItem('manageTable.lastTab') ?? DEFAULT_MANAGE_TABLE_TAB;
 
-  return `data/v2/manage/table/${tab}?database=${dataSourceName}&table=${encodeURIComponent(
+  return `/data/v2/manage/table/${tab}?database=${dataSourceName}&table=${encodeURIComponent(
     JSON.stringify(table)
   )}`;
 };
@@ -26,6 +26,6 @@ export const manageFunctionUrl = ({
   dataSourceName: string;
   fn: unknown;
 }) =>
-  `data/v2/manage/function?database=${dataSourceName}&function=${encodeURIComponent(
+  `/data/v2/manage/function?database=${dataSourceName}&function=${encodeURIComponent(
     JSON.stringify(fn)
   )}`;