fix(sqllab): Invalid display of table column keys (#32763)

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(

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}</>}
     />
   );
 };