PMM-13372: Replaced react-json-view with @microlink/react-json-view (#…

…1654) * Replaced react-json-view with @microlink/react-json-view * Updated yarn.lock * Fixed prettier * Fixed Example.test.tsx * PMM-13676 Set display object size to false --------- Co-authored-by: Matej Kubinec <[email protected]>
percona · Feb 11, 2025 · a2fe68f · a2fe68f
1 parent e5e406d
commit a2fe68f
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 108 deletions.
diff --git a/pmm-app/package.json b/pmm-app/package.json
@@ -43,6 +43,7 @@
     "@grafana/runtime": "^11.1.8",
     "@grafana/schema": "^11.1.8",
     "@grafana/ui": "^11.1.8",
+    "@microlink/react-json-view": "^1.24.0",
     "@tippyjs/react": "^4.2.6",
     "antd": "^5.19.2",
     "axios": "^1.7.7",
@@ -61,7 +62,6 @@
     "react-dom": "18.2.0",
     "react-final-form": "^6.5.3",
     "react-horizontal-stacked-bar-chart": "^8.15.2",
-    "react-json-view": "^1.19.1",
     "react-router-dom": "^6.22.0",
     "react-split-pane": "^0.1.91",
     "react-table": "^7.6.2",

diff --git a/pmm-app/src/pmm-qan/panel/components/Details/Example/Example.test.tsx b/pmm-app/src/pmm-qan/panel/components/Details/Example/Example.test.tsx
@@ -6,7 +6,7 @@ import Example from './Example';
 import { ExampleInterface } from './Example.types';
 
 jest.mock('shared/components/helpers/notification-manager');
-jest.mock('react-json-view', () => ({ src = {} }) => <div className="json" data-src={JSON.stringify(src)} />);
+jest.mock('@microlink/react-json-view', () => ({ src = {} }) => <div className="json" data-src={JSON.stringify(src)} />);
 
 describe('Example tab page render test', () => {
   it('Component shows error text when there is no examples', () => {

diff --git a/pmm-app/src/shared/components/Elements/ReactJSON/ReactJSON.tsx b/pmm-app/src/shared/components/Elements/ReactJSON/ReactJSON.tsx
@@ -1,4 +1,4 @@
-import ReactJson from 'react-json-view';
+import ReactJsonView from '@microlink/react-json-view';
 import React from 'react';
 
 // TODO: remove stryling code duplicates
@@ -23,5 +23,11 @@ const THEME_JSON_VIEW = {
 
 export const ReactJSON = ({ json = {} }) => (
   // @ts-ignore
-  <ReactJson src={json} theme={THEME_JSON_VIEW} collapseStringsAfterLength={50} displayDataTypes={false} />
+  <ReactJsonView
+    src={json}
+    theme={THEME_JSON_VIEW}
+    collapseStringsAfterLength={50}
+    displayDataTypes={false}
+    displayObjectSize={false}
+  />
 );