(superset) branch master updated: fix(sqllab): Invalid display of table column keys (#32763)

[michaelsmolina]

This is an automated email from the ASF dual-hosted git repository.

michaelsmolina pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 56bf17f879 fix(sqllab): Invalid display of table column keys (#32763)
56bf17f879 is described below

commit 56bf17f879fb82b07e19326eebb1fe20ad4f5deb
Author: JUST.in DO IT <justin.p...@airbnb.com>
AuthorDate: Mon Mar 31 10:26:31 2025 -0700

    fix(sqllab): Invalid display of table column keys (#32763)
---
 .../src/components/JsonModal/JsonModal.test.tsx         | 15 +++++++++++++++
 superset-frontend/src/components/JsonModal/index.tsx    | 17 +++++++++++++----
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/components/JsonModal/JsonModal.test.tsx 
b/superset-frontend/src/components/JsonModal/JsonModal.test.tsx
index f0e2230f5a..44f01404a3 100644
--- a/superset-frontend/src/components/JsonModal/JsonModal.test.tsx
+++ b/superset-frontend/src/components/JsonModal/JsonModal.test.tsx
@@ -42,6 +42,21 @@ test('renders JSON object in a tree view in a modal', () => {
   expect(getByTestId('mock-json-tree')).toBeInTheDocument();
 });
 
+test('renders an object in a tree view in a modal', () => {
+  const jsonData = { a: 1 };
+  const expected = JSON.stringify(jsonData);
+  const { getByText, getByTestId, queryByTestId } = render(
+    <JsonModal jsonObject={jsonData} jsonValue={jsonData} modalTitle="title" 
/>,
+    {
+      useRedux: true,
+    },
+  );
+  expect(queryByTestId('mock-json-tree')).not.toBeInTheDocument();
+  const link = getByText(expected);
+  fireEvent.click(link);
+  expect(getByTestId('mock-json-tree')).toBeInTheDocument();
+});
+
 test('renders bigInt value in a number format', () => {
   expect(convertBigIntStrToNumber('123')).toBe('123');
   expect(convertBigIntStrToNumber('some string value')).toBe(
diff --git a/superset-frontend/src/components/JsonModal/index.tsx 
b/superset-frontend/src/components/JsonModal/index.tsx
index e599f483dc..79ff25ef5a 100644
--- a/superset-frontend/src/components/JsonModal/index.tsx
+++ b/superset-frontend/src/components/JsonModal/index.tsx
@@ -36,7 +36,7 @@
  * under the License.
  */
 import JSONbig from 'json-bigint';
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import { JSONTree } from 'react-json-tree';
 import { useJsonTreeTheme } from 'src/hooks/useJsonTreeTheme';
 import Button from '../Button';
@@ -46,6 +46,10 @@ import ModalTrigger from '../ModalTrigger';
 export function safeJsonObjectParse(
   data: unknown,
 ): null | unknown[] | Record<string, unknown> {
+  if (typeof data === 'object') {
+    return data as null | unknown[] | Record<string, unknown>;
+  }
+
   // First perform a cheap proxy to avoid calling JSON.parse on data that is 
clearly not a
   // JSON object or array
   if (
@@ -78,7 +82,7 @@ function renderBigIntStrToNumber(value: string | number) {
   return <>{convertBigIntStrToNumber(value)}</>;
 }
 
-type CellDataType = string | number | null;
+type CellDataType = string | number | null | object;
 
 export interface Props {
   modalTitle: string;
@@ -88,6 +92,11 @@ export interface Props {
 
 export const JsonModal: FC<Props> = ({ modalTitle, jsonObject, jsonValue }) => 
{
   const jsonTreeTheme = useJsonTreeTheme();
+  const content = useMemo(
+    () =>
+      typeof jsonValue === 'object' ? JSON.stringify(jsonValue) : jsonValue,
+    [jsonValue],
+  );
 
   return (
     <ModalTrigger
@@ -100,11 +109,11 @@ export const JsonModal: FC<Props> = ({ modalTitle, 
jsonObject, jsonValue }) => {
       }
       modalFooter={
         <Button>
-          <CopyToClipboard shouldShowText={false} text={jsonValue} />
+          <CopyToClipboard shouldShowText={false} text={content} />
         </Button>
       }
       modalTitle={modalTitle}
-      triggerNode={<>{jsonValue}</>}
+      triggerNode={<>{content}</>}
     />
   );
 };