fix(sqllab): Overflow bigint in json-tree view (apache#22609)

(cherry picked from commit a8f3a4f)

superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx

@@ -21,6 +21,7 @@ import { ReactWrapper } from 'enzyme';
 import { styledMount as mount } from 'spec/helpers/theming';
 import FilterableTable, {
   MAX_COLUMNS_FOR_TABLE,
+  renderBigIntStrToNumber,
 } from 'src/components/FilterableTable';
 import { render, screen } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
@@ -331,3 +332,19 @@ describe('FilterableTable sorting - RTL', () => {
     expect(gridCells[6]).toHaveTextContent('2022-01-02');
   });
 });
+
+test('renders bigInt value in a number format', () => {
+  expect(renderBigIntStrToNumber('123')).toBe('123');
+  expect(renderBigIntStrToNumber('some string value')).toBe(
+    'some string value',
+  );
+  expect(renderBigIntStrToNumber('{ a: 123 }')).toBe('{ a: 123 }');
+  expect(renderBigIntStrToNumber('"Not a Number"')).toBe('"Not a Number"');
+  // trim quotes for bigint string format
+  expect(renderBigIntStrToNumber('"-12345678901234567890"')).toBe(
+    '-12345678901234567890',
+  );
+  expect(renderBigIntStrToNumber('"12345678901234567890"')).toBe(
+    '12345678901234567890',
+  );
+});

superset-frontend/src/components/FilterableTable/index.tsx

@@ -53,7 +53,7 @@ function safeJsonObjectParse(
 
   // We know `data` is a string starting with '{' or '[', so try to parse it as a valid object
   try {
-    const jsonData = JSON.parse(data);
+    const jsonData = JSONbig({ storeAsString: true }).parse(data);
     if (jsonData && typeof jsonData === 'object') {
       return jsonData;
     }
@@ -63,6 +63,13 @@ function safeJsonObjectParse(
   }
 }
 
+export function renderBigIntStrToNumber(value: string) {
+  if (typeof value === 'string' && /^"-?\d+"$/.test(value)) {
+    return value.substring(1, value.length - 1);
+  }
+  return value;
+}
+
 const GRID_POSITION_ADJUSTMENT = 4;
 const SCROLL_BAR_HEIGHT = 15;
 // This regex handles all possible number formats in javascript, including ints, floats,
@@ -405,7 +412,13 @@ const FilterableTable = ({
     jsonString: CellDataType,
   ) => (
     <ModalTrigger
-      modalBody={<JSONTree data={jsonObject} theme={getJsonTreeTheme()} />}
+      modalBody={
+        <JSONTree
+          data={jsonObject}
+          theme={getJsonTreeTheme()}
+          valueRenderer={renderBigIntStrToNumber}
+        />
+      }
       modalFooter={
         <Button>
           <CopyToClipboard shouldShowText={false} text={jsonString} />