RI-6339

Author: KIvanow

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/RejsonDetailsWrapper.tsx

@@ -25,10 +25,10 @@ const RejsonDetailsWrapper = (props: Props) => {
   const { id: instanceId } = useSelector(connectedInstanceSelector)
   const { viewType } = useSelector(keysSelector)
 
-  const updatedData = parseJsonData(data)
-
   const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
 
+  const updatedData = parseJsonData(data)
+
   useEffect(() => {
     setExpandedRows(new Set())
   }, [nameString])

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-details/RejsonDetails.tsx

@@ -9,7 +9,7 @@ import {
 } from 'uiSrc/slices/browser/rejson'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 
-import { getBrackets, isRealArray, isRealObject, wrapPath } from '../utils'
+import { getBrackets, isRealArray, isRealObject, parseJsonData, wrapPath } from '../utils'
 import { BaseProps, ObjectTypes } from '../interfaces'
 import RejsonDynamicTypes from '../rejson-dynamic-types'
 import { AddItem } from '../components'
@@ -32,8 +32,14 @@ const RejsonDetails = (props: BaseProps) => {
 
   const dispatch = useDispatch()
 
-  const handleFetchVisualisationResults = (path: string, forceRetrieve = false) =>
+  const handleFetchVisualisationResults = (path: string, forceRetrieve = false) => new Promise((resolve, reject) => {
     dispatch<any>(fetchVisualisationResults(path, forceRetrieve))
+      .then((data: any) => resolve({
+        ...data,
+        data: parseJsonData(data?.data)
+      }))
+      .catch(reject)
+  })
 
   const handleAppendRejsonArrayItemAction = (keyName: RedisResponseBuffer, path: string, data: string) => {
     dispatch(appendReJSONArrayItemAction(keyName, path, data, length))

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-dynamic-types/RejsonDynamicTypes.spec.tsx

@@ -6,7 +6,7 @@ import RejsonDynamicTypes from './RejsonDynamicTypes'
 
 const mockedProps = mock<DynamicTypesProps>()
 
-const mockedDownloadedSimpleArray = '[1, 2, 3]'
+const mockedDownloadedSimpleArray = [1, 2, 3]
 
 describe('RejsonDynamicTypes Component', () => {
   it('renders correctly simple downloaded JSON', () => {

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-dynamic-types/RejsonDynamicTypes.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { isNull, isObject } from 'lodash'
 import { MAX_LEFT_PADDING_NESTING } from '../constants'
 import { DynamicTypesProps, ObjectTypes } from '../interfaces'
-import { generatePath, isScalar, parseJsonData } from '../utils'
+import { generatePath, isScalar } from '../utils'
 
 import RejsonScalar from '../rejson-scalar'
 import RejsonObject from '../rejson-object'
@@ -102,7 +102,7 @@ const RejsonDynamicTypes = (props: DynamicTypesProps) => {
     return Object.entries(data).map(([key, value]) => renderArrayItem(key, value))
   }
 
-  return renderResult(parseJsonData(data))
+  return renderResult(data)
 }
 
 export default RejsonDynamicTypes

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/utils/utils.spec.ts

@@ -82,6 +82,7 @@ describe('JSONUtils', () => {
 
   describe('JSON Parsing Utils', () => {
     const bigintAsString = '1188950299261208742'
+    const scientificNotation = 1.2345678901234568e+29
 
     describe('parseValue', () => {
       it('should handle non-string values', () => {
@@ -131,6 +132,19 @@ describe('JSONUtils', () => {
         expect(result[0].toString()).toBe(bigintAsString)
         expect(result[1]).toBe('test')
       })
+
+      it('should handle extremely large integers and maintain scientific notation', () => {
+        const resultFromString = parseValue(`'${scientificNotation}'`, 'integer')
+        expect(resultFromString).toBe(`'${scientificNotation}'`)
+
+        const resultFromInt = parseValue(scientificNotation, 'integer')
+        expect(resultFromInt).toBe(scientificNotation)
+
+        // Also test parsing as part of JSON
+        const jsonWithLargeInt = `{"value": ${scientificNotation}}`
+        const parsedJson = parseValue(jsonWithLargeInt)
+        expect(parsedJson.value).toBe(scientificNotation)
+      })
     })
 
     describe('parseJsonData', () => {

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/utils/utils.ts

@@ -66,10 +66,6 @@ export const isValidKey = (key: string): boolean => /^"([^"\\]|\\.)*"$/.test(key
 const JSONParser = JSONBigInt({
   useNativeBigInt: true,
   strict: false,
-  // Parse all numbers as BigInt if they exceed safe integer
-  alwaysParseAsBig: false,
-  // This option helps with scientific notation
-  storeAsString: true
 })
 
 export const parseValue = (value: any, type?: string): any => {
@@ -114,7 +110,11 @@ export const parseValue = (value: any, type?: string): any => {
     }
     return parsed
   } catch (e) {
-    return value
+    try {
+      return JSON.parse(value)
+    } catch (error) {
+      return value
+    }
   }
 }