#RI-4795 - add json format component (#2480)

* #RI-4795 - add json format component

---------

Co-authored-by: mariasergeenko <[email protected]>
Co-authored-by: mariasergeenko <[email protected]>
Co-authored-by: zalenskiSofteq <[email protected]>

Author: 3 people

package.json

@@ -129,6 +129,7 @@
     "@types/ioredis": "^4.26.0",
     "@types/is-glob": "^4.0.2",
     "@types/jest": "^27.5.2",
+    "@types/json-bigint": "^1.0.1",
     "@types/jsonpath": "^0.2.0",
     "@types/lodash": "^4.14.171",
     "@types/node": "14.14.10",
@@ -247,6 +248,7 @@
     "html-react-parser": "^1.2.4",
     "java-object-serialization": "^0.1.1",
     "jpickle": "^0.4.1",
+    "json-bigint": "^1.0.0",
     "jsonpath": "^1.1.1",
     "lodash": "^4.17.21",
     "lz4js": "^0.2.0",
@@ -257,7 +259,6 @@
     "react-contenteditable": "^3.3.5",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^3.3.1",
-    "react-json-pretty": "^2.2.0",
     "react-jsx-parser": "^1.28.4",
     "react-monaco-editor": "^0.45.0",
     "react-redux": "^7.2.2",

redisinsight/ui/src/components/json-viewer/JSONViewer.tsx

@@ -1,6 +1,8 @@
 import cx from 'classnames'
 import React from 'react'
-import JSONPretty from 'react-json-pretty'
+import JSONBigInt from 'json-bigint'
+
+import JsonPretty from 'uiSrc/components/json-viewer/components/json-pretty'
 
 interface Props {
   value: string
@@ -12,12 +14,12 @@ const JSONViewer = (props: Props) => {
   const { value, expanded = false, space = 2 } = props
 
   try {
-    JSON.parse(value)
+    const data = JSONBigInt({ useNativeBigInt: true }).parse(value)
 
     return {
       value: (
         <div className={cx('jsonViewer', { 'jsonViewer-collapsed': !expanded })} data-testid="value-as-json">
-          <JSONPretty json={value} space={space} />
+          <JsonPretty data={data} space={space} />
         </div>
       ),
       isValid: true

redisinsight/ui/src/components/json-viewer/components/json-array/JsonArray.spec.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { render, screen } from 'uiSrc/utils/test-utils'
+
+import JsonArray from './JsonArray'
+
+const mockArray = [123]
+
+describe('JsonArray', () => {
+  it('should render JsonArray', () => {
+    expect(render(<JsonArray data={mockArray} />)).toBeTruthy()
+  })
+
+  it('should render jsonObjectComponent', () => {
+    render(<JsonArray data={mockArray} gap={8} />)
+
+    expect(screen.getByTestId('json-array-component')).toHaveTextContent('[ 123 ]')
+  })
+
+  it('should render coma', () => {
+    render(<JsonArray data={mockArray} lastElement={false} />)
+
+    expect(screen.getByTestId('json-array-component')).toHaveTextContent('[ 123 ],')
+  })
+
+  it('should not render coma', () => {
+    render(<JsonArray data={mockArray} lastElement />)
+
+    expect(screen.getByTestId('json-array-component')).toHaveTextContent('[ 123 ]')
+  })
+
+  it('should not render empty space and line break', () => {
+    render(<JsonArray data={[]} lastElement />)
+
+    expect(screen.getByTestId('json-array-component')).toHaveTextContent('[', { normalizeWhitespace: false })
+  })
+
+  it('should render empty space and line break', () => {
+    const renderedArray = '[\n  123\n]'
+    render(<JsonArray data={mockArray} lastElement />)
+
+    expect(screen.getByTestId('json-array-component')).toHaveTextContent(renderedArray, { normalizeWhitespace: false })
+  })
+})

redisinsight/ui/src/components/json-viewer/components/json-array/JsonArray.tsx

@@ -0,0 +1,29 @@
+import React, { Fragment } from 'react'
+
+import JsonPretty from 'uiSrc/components/json-viewer/components/json-pretty'
+import { IJsonArrayProps } from 'uiSrc/components/json-viewer/interfaces'
+
+const JsonArray = ({ data, space = 2, gap = 0, lastElement = true }: IJsonArrayProps) => (
+  <span data-testid="json-array-component">
+    [
+    {!!data.length && '\n'}
+    {data.map((value, idx) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <Fragment key={idx}>
+        {!!space && Array.from({ length: space + gap }, () => ' ')}
+        <JsonPretty
+          data={value}
+          lastElement={idx === data.length - 1}
+          space={space}
+          gap={gap + space}
+        />
+      </Fragment>
+    ))}
+    {!!data.length && !!gap && Array.from({ length: gap }, () => ' ')}
+    ]
+    {!lastElement && ','}
+    {'\n'}
+  </span>
+)
+
+export default JsonArray

redisinsight/ui/src/components/json-viewer/components/json-array/index.ts

@@ -0,0 +1,3 @@
+import JsonArray from './JsonArray'
+
+export default JsonArray

redisinsight/ui/src/components/json-viewer/components/json-object/JsonObject.spec.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { render, screen } from 'uiSrc/utils/test-utils'
+
+import JsonObject from './JsonObject'
+
+const mockJson = { value: JSON.stringify({}) }
+
+describe('JsonObject', () => {
+  it('should render jsonObjectComponent', () => {
+    expect(render(<JsonObject data={mockJson} />)).toBeTruthy()
+  })
+
+  it('should render jsonObjectComponent', () => {
+    render(<JsonObject data={mockJson} gap={8} />)
+
+    expect(screen.getByTestId('json-object-component')).toHaveTextContent('{ "value": "{}" }')
+  })
+
+  it('should render coma', () => {
+    render(<JsonObject data={mockJson} lastElement={false} />)
+
+    expect(screen.getByTestId('json-object-component')).toHaveTextContent('{ "value": "{}" },')
+  })
+
+  it('should not render coma', () => {
+    render(<JsonObject data={mockJson} lastElement />)
+
+    expect(screen.getByTestId('json-object-component')).toHaveTextContent('{ "value": "{}" }')
+  })
+
+  it('should not render empty space and line break', () => {
+    render(<JsonObject data={{}} lastElement />)
+
+    expect(screen.getByTestId('json-object-component')).toHaveTextContent('{}', { normalizeWhitespace: false })
+  })
+
+  it('should render empty space and line break', () => {
+    const renderedObject = '{\n  "value": "{}"\n}'
+    render(<JsonObject data={mockJson} lastElement />)
+
+    expect(screen.getByTestId('json-object-component')).toHaveTextContent(renderedObject, { normalizeWhitespace: false })
+  })
+})

redisinsight/ui/src/components/json-viewer/components/json-object/JsonObject.tsx

@@ -0,0 +1,36 @@
+import React, { Fragment } from 'react'
+
+import JsonPretty from 'uiSrc/components/json-viewer/components/json-pretty'
+import { IJsonObjectProps } from 'uiSrc/components/json-viewer/interfaces'
+
+const JsonObject = ({ data, space = 2, gap = 0, lastElement = true }: IJsonObjectProps) => {
+  const keys = Object.keys(data)
+
+  return (
+    <span data-testid="json-object-component">
+      {'{'}
+      {!!keys.length && '\n'}
+      {keys.map((key, idx) => (
+        <Fragment key={key}>
+          {!!space && Array.from({ length: space + gap }, () => ' ')}
+          <span className="json-pretty__key">
+            {`"${key}"`}
+          </span>
+          {': '}
+          <JsonPretty
+            data={data[key]}
+            lastElement={idx === keys.length - 1}
+            space={space}
+            gap={gap + space}
+          />
+        </Fragment>
+      ))}
+      {!!keys.length && !!gap && Array.from({ length: gap }, () => ' ')}
+      {'}'}
+      {!lastElement && ','}
+      {'\n'}
+    </span>
+  )
+}
+
+export default JsonObject

redisinsight/ui/src/components/json-viewer/components/json-object/index.ts

@@ -0,0 +1,3 @@
+import JsonObject from './JsonObject'
+
+export default JsonObject

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

@@ -0,0 +1,27 @@
+import React from 'react'
+import { render, screen } from 'uiSrc/utils/test-utils'
+
+import JsonPretty from './JsonPretty'
+
+describe('JsonPretty', () => {
+  it('should render jsonObjectComponent', () => {
+    const json = { value: JSON.stringify({}) }
+    render(<JsonPretty data={json} />)
+
+    expect(screen.getByTestId('json-object-component')).toBeInTheDocument()
+  })
+
+  it('should render json array component', () => {
+    const json = ['123']
+    render(<JsonPretty data={json} />)
+
+    expect(screen.getByTestId('json-array-component')).toBeInTheDocument()
+  })
+
+  it('should render json primitive component', () => {
+    const json = null
+    render(<JsonPretty data={json} />)
+
+    expect(screen.getByTestId('json-primitive-component')).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import JsonPrimitive from 'uiSrc/components/json-viewer/components/json-primitive'
+import JsonArray from 'uiSrc/components/json-viewer/components/json-array'
+import JsonObject from 'uiSrc/components/json-viewer/components/json-object'
+import { isArray, isObject } from 'uiSrc/components/json-viewer/utils'
+import { IDefaultProps } from 'uiSrc/components/json-viewer/interfaces'
+
+const JsonPretty = ({ data, ...props }: IDefaultProps) => {
+  if (isArray(data)) {
+    return <JsonArray data={data} {...props} />
+  }
+
+  if (isObject(data)) {
+    return <JsonObject data={data} {...props} />
+  }
+
+  return <JsonPrimitive data={data} {...props} />
+}
+
+export default JsonPretty