Merge pull request #3231 from RedisInsight/bugfix/RI-5523-allow-json-non-native-big-int

RI-5523: Fallback to non-native big integers for JSON formatting

Author: vlad-dargel

redisinsight/ui/src/components/json-viewer/components/json-pretty/JsonPretty.spec.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import JSONBigInt from 'json-bigint'
 import { render, screen } from 'uiSrc/utils/test-utils'
 
 import JsonPretty from './JsonPretty'
@@ -24,4 +25,16 @@ describe('JsonPretty', () => {
 
     expect(screen.getByTestId('json-primitive-component')).toBeInTheDocument()
   })
+
+  it('should render json primitive component with big number', () => {
+    const json = JSONBigInt({ useNativeBigInt: true }).parse('1234567890123456789012345678901234567890')
+    render(<JsonPretty data={json} />)
+    expect(screen.getByTestId('json-primitive-component')).toBeInTheDocument()
+  })
+
+  it('should render json primitive component with big float', () => {
+    const json = JSONBigInt({ useNativeBigInt: false }).parse('1234567890123456789012345678901234567890.1234567890123456789012345678901234567890')
+    render(<JsonPretty data={json} />)
+    expect(screen.getByTestId('json-primitive-component')).toBeInTheDocument()
+  })
 })

redisinsight/ui/src/components/json-viewer/components/json-pretty/JsonPretty.tsx

@@ -7,6 +7,10 @@ import { isArray, isObject } from 'uiSrc/components/json-viewer/utils'
 import { IDefaultProps } from 'uiSrc/components/json-viewer/interfaces'
 
 const JsonPretty = ({ data, ...props }: IDefaultProps) => {
+  if (data?._isBigNumber) {
+    return <JsonPrimitive data={data} {...props} />
+  }
+
   if (isArray(data)) {
     return <JsonArray data={data} {...props} />
   }

redisinsight/ui/src/utils/formatters/valueFormatters.tsx

@@ -65,7 +65,7 @@ const bufferToJSON = (
   reply: RedisResponseBuffer,
   props: FormattingProps
 ): { value: JSX.Element | string, isValid: boolean } =>
-  JSONViewer({ value: bufferToUTF8(reply), ...props })
+  JSONViewer({ value: bufferToUTF8(reply), useNativeBigInt: false, ...props })
 
 const formattingBuffer = (
   reply: RedisResponseBuffer,