main to release 2.32.0

.circleci/redisstack/build_modules.sh

@@ -24,6 +24,7 @@ rm -rf redisinsight/build.zip
 cp LICENSE ./redisinsight
 
 cd redisinsight && tar -czvf build.tar.gz \
+--exclude="api/node_modules/**/build/node_gyp_bins/python3" \
 api/node_modules \
 api/dist \
 ui/dist \

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/api/src/modules/server/server.service.spec.ts

@@ -115,6 +115,7 @@ describe('ServerService', () => {
           anonymousId: mockServer.id,
           sessionId,
           appType: SERVER_CONFIG.buildType,
+          appVersion: SERVER_CONFIG.appVersion,
           controlNumber: mockControlNumber,
           controlGroup: mockControlGroup,
         },

redisinsight/api/test/api/feature/GET-features.test.ts

@@ -16,10 +16,16 @@ const updateSettings = (data) => request(server).patch('/settings').send(data);
 
 const mainCheckFn = getMainCheckFn(endpoint);
 
-const waitForFlags = async (flags: any) => {
+const waitForFlags = async (flags: any, action?: Function) => {
   const client = await getSocket('');
 
   await new Promise((res, rej) => {
+    try {
+      action?.()?.catch(rej);
+    } catch (e) {
+      rej(e);
+    }
+
     client.once('features', (data) => {
       expect(flags).to.deep.eq(data);
       res(true);
@@ -61,7 +67,7 @@ describe('GET /features', () => {
 
         // remove all configs
         await featureConfigRepository.delete({});
-        await syncEndpoint();
+        await featureRepository.delete({});
         await waitForFlags({
           features: {
             insightsRecommendations: {
@@ -73,7 +79,7 @@ describe('GET /features', () => {
               name: 'cloudSso',
             },
           },
-        });
+        }, syncEndpoint);
       },
       statusCode: 200,
       responseBody: {
@@ -111,7 +117,6 @@ describe('GET /features', () => {
 
         // remove all configs
 
-        await syncEndpoint();
         await waitForFlags({
           features: {
             insightsRecommendations: {
@@ -123,7 +128,7 @@ describe('GET /features', () => {
               name: 'cloudSso',
             },
           },
-        });
+        }, syncEndpoint);
       },
       statusCode: 200,
       responseBody: {
@@ -164,7 +169,6 @@ describe('GET /features', () => {
           },
         })).catch(console.error);
 
-        await syncEndpoint();
         await waitForFlags({
           features: {
             insightsRecommendations: {
@@ -176,7 +180,7 @@ describe('GET /features', () => {
               name: 'cloudSso',
             },
           },
-        });
+        }, syncEndpoint);
       },
       statusCode: 200,
       responseBody: {

redisinsight/package.json

@@ -2,7 +2,7 @@
   "name": "redisinsight",
   "productName": "RedisInsight",
   "private": true,
-  "version": "2.30.0",
+  "version": "2.32.0",
   "description": "RedisInsight",
   "main": "./dist/main/main.js",
   "author": {

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

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

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