[CHORE] Get rid of react-json-tree (#387)

2021-04-23 13:50:13 +03:00 · 2021-04-23 13:50:13 +03:00 · 993db2fc00
commit 993db2fc00
parent f935083b09
30 changed files with 425 additions and 511 deletions
--- a/kafka-ui-react-app/package.json
+++ b/kafka-ui-react-app/package.json
@ -21,7 +21,6 @@
    "react-datepicker": "^3.7.0",
    "react-dom": "^17.0.1",
    "react-hook-form": "^6.15.5",
-    "react-json-tree": "^0.15.0",
    "react-multi-select-component": "^4.0.0",
    "react-redux": "^7.2.2",
    "react-router": "^5.2.0",
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
@ -54,7 +54,6 @@ const Details: React.FC<Props> = ({

      {isFetched ? (
        <div className="box">
-          <div className="table-container">
          <table className="table is-striped is-fullwidth">
            <thead>
              <tr>
@ -78,7 +77,6 @@ const Details: React.FC<Props> = ({
            </tbody>
          </table>
        </div>
-        </div>
      ) : (
        <PageLoader />
      )}
--- a/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx
@ -37,7 +37,6 @@ const List: React.FC<Props> = ({ consumerGroups }) => {
                />
              </div>
            </div>
-            <div className="table-container">
            <table className="table is-striped is-fullwidth is-hoverable">
              <thead>
                <tr>
@ -62,7 +61,6 @@ const List: React.FC<Props> = ({ consumerGroups }) => {
              </tbody>
            </table>
          </div>
-          </div>
        ) : (
          'No active consumer groups'
        )}
--- a/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx
@ -112,8 +112,7 @@ const Details: React.FC<DetailsProps> = ({
            <LatestVersionItem schema={schema} />
          </div>
          <div className="box">
-            <div className="table-container">
-              <table className="table is-striped is-fullwidth">
+            <table className="table is-fullwidth">
              <thead>
                <tr>
                  <th>Version</th>
@ -128,7 +127,6 @@ const Details: React.FC<DetailsProps> = ({
              </tbody>
            </table>
          </div>
-          </div>
        </>
      ) : (
        <PageLoader />
--- a/kafka-ui-react-app/src/components/Schemas/Details/LatestVersionItem.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Details/LatestVersionItem.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import { SchemaSubject } from 'generated-sources';
-import JSONViewer from 'components/common/JSONViewer/JSONViewer';
+import JSONEditor from 'components/common/JSONEditor/JSONEditor';

 interface LatestVersionProps {
  schema: SchemaSubject;
@ -12,7 +12,6 @@ const LatestVersionItem: React.FC<LatestVersionProps> = ({
  <div className="tile is-ancestor mt-1">
    <div className="tile is-4 is-parent">
      <div className="tile is-child">
-        <div className="table-container">
        <table className="table is-fullwidth">
          <tbody>
            <tr>
@ -31,10 +30,14 @@ const LatestVersionItem: React.FC<LatestVersionProps> = ({
        </table>
      </div>
    </div>
-    </div>
    <div className="tile is-parent">
-      <div className="tile is-child box py-1">
-        <JSONViewer data={JSON.parse(schema)} />
+      <div className="tile is-child box">
+        <JSONEditor
+          name="schema"
+          value={JSON.stringify(JSON.parse(schema), null, '\t')}
+          showGutter={false}
+          readOnly
+        />
      </div>
    </div>
  </div>
--- a/kafka-ui-react-app/src/components/Schemas/Details/SchemaVersion.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Details/SchemaVersion.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import { SchemaSubject } from 'generated-sources';
-import JSONViewer from 'components/common/JSONViewer/JSONViewer';
+import JSONEditor from 'components/common/JSONEditor/JSONEditor';

 interface SchemaVersionProps {
  version: SchemaSubject;
@ -13,8 +13,13 @@ const SchemaVersion: React.FC<SchemaVersionProps> = ({
    <tr>
      <td>{version}</td>
      <td>{id}</td>
-      <td className="py-0">
-        <JSONViewer data={JSON.parse(schema)} />
+      <td>
+        <JSONEditor
+          name="schema"
+          value={JSON.stringify(JSON.parse(schema), null, '\t')}
+          showGutter={false}
+          readOnly
+        />
      </td>
    </tr>
  );
--- a/kafka-ui-react-app/src/components/Schemas/Details/test/LatestVersionItem.spec.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Details/test/LatestVersionItem.spec.tsx
@ -10,7 +10,7 @@ describe('LatestVersionItem', () => {

    expect(wrapper.find('table').length).toEqual(1);
    expect(wrapper.find('td').at(1).text()).toEqual('1');
-    expect(wrapper.exists('JSONViewer')).toBeTruthy();
+    expect(wrapper.exists('JSONEditor')).toBeTruthy();
  });

  it('matches snapshot', () => {
--- a/kafka-ui-react-app/src/components/Schemas/Details/test/SchemaVersion.spec.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Details/test/SchemaVersion.spec.tsx
@ -9,7 +9,7 @@ describe('SchemaVersion', () => {
    const wrapper = shallow(<SchemaVersion version={versions[0]} />);

    expect(wrapper.find('td').length).toEqual(3);
-    expect(wrapper.exists('JSONViewer')).toBeTruthy();
+    expect(wrapper.exists('JSONEditor')).toBeTruthy();
  });

  it('matches snapshot', () => {
--- a/kafka-ui-react-app/src/components/Schemas/Details/test/snapshots/Details.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Schemas/Details/test/snapshots/Details.spec.tsx.snap
@ -93,12 +93,9 @@ exports[`Details View Initial state matches snapshot 1`] = `
  </div>
  <div
    className="box"
-  >
-    <div
-      className="table-container"
  >
    <table
-        className="table is-striped is-fullwidth"
+      className="table is-fullwidth"
    >
      <thead>
        <tr>
@ -116,7 +113,6 @@ exports[`Details View Initial state matches snapshot 1`] = `
      <tbody />
    </table>
  </div>
-  </div>
 </div>
 `;

@ -237,12 +233,9 @@ exports[`Details View when page with schema versions loaded when schema has vers
  </div>
  <div
    className="box"
-  >
-    <div
-      className="table-container"
  >
    <table
-        className="table is-striped is-fullwidth"
+      className="table is-fullwidth"
    >
      <thead>
        <tr>
@ -287,7 +280,6 @@ exports[`Details View when page with schema versions loaded when schema has vers
      </tbody>
    </table>
  </div>
-  </div>
 </div>
 `;

@ -384,12 +376,9 @@ exports[`Details View when page with schema versions loaded when versions are em
  </div>
  <div
    className="box"
-  >
-    <div
-      className="table-container"
  >
    <table
-        className="table is-striped is-fullwidth"
+      className="table is-fullwidth"
    >
      <thead>
        <tr>
@ -407,7 +396,6 @@ exports[`Details View when page with schema versions loaded when versions are em
      <tbody />
    </table>
  </div>
-  </div>
 </div>
 `;

--- a/kafka-ui-react-app/src/components/Schemas/Details/test/snapshots/LatestVersionItem.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Schemas/Details/test/snapshots/LatestVersionItem.spec.tsx.snap
@ -9,9 +9,6 @@ exports[`LatestVersionItem matches snapshot 1`] = `
  >
    <div
      className="tile is-child"
-    >
-      <div
-        className="table-container"
    >
      <table
        className="table is-fullwidth"
@ -45,27 +42,27 @@ exports[`LatestVersionItem matches snapshot 1`] = `
      </table>
    </div>
  </div>
-  </div>
  <div
    className="tile is-parent"
  >
    <div
-      className="tile is-child box py-1"
+      className="tile is-child box"
    >
-      <JSONViewer
-        data={
-          Object {
-            "fields": Array [
-              Object {
-                "name": "id",
-                "type": "long",
-              },
-            ],
-            "name": "MyRecord1",
-            "namespace": "com.mycompany",
-            "type": "record",
-          }
+      <JSONEditor
+        name="schema"
+        readOnly={true}
+        showGutter={false}
+        value="{
+	\\"type\\": \\"record\\",
+	\\"name\\": \\"MyRecord1\\",
+	\\"namespace\\": \\"com.mycompany\\",
+	\\"fields\\": [
+		{
+			\\"name\\": \\"id\\",
+			\\"type\\": \\"long\\"
 		}
+	]
+}"
      />
    </div>
  </div>
--- a/kafka-ui-react-app/src/components/Schemas/Details/test/snapshots/SchemaVersion.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Schemas/Details/test/snapshots/SchemaVersion.spec.tsx.snap
@ -8,23 +8,22 @@ exports[`SchemaVersion matches snapshot 1`] = `
  <td>
    1
  </td>
-  <td
-    className="py-0"
-  >
-    <JSONViewer
-      data={
-        Object {
-          "fields": Array [
-            Object {
-              "name": "id",
-              "type": "long",
-            },
-          ],
-          "name": "MyRecord1",
-          "namespace": "com.mycompany",
-          "type": "record",
-        }
+  <td>
+    <JSONEditor
+      name="schema"
+      readOnly={true}
+      showGutter={false}
+      value="{
+	\\"type\\": \\"record\\",
+	\\"name\\": \\"MyRecord1\\",
+	\\"namespace\\": \\"com.mycompany\\",
+	\\"fields\\": [
+		{
+			\\"name\\": \\"id\\",
+			\\"type\\": \\"long\\"
 		}
+	]
+}"
    />
  </td>
 </tr>
--- a/kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx
@ -1,16 +1,16 @@
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
+import React from 'react';
+import { useHistory } from 'react-router';
+import { useForm, Controller } from 'react-hook-form';
 import {
  CompatibilityLevelCompatibilityEnum,
  SchemaSubject,
  SchemaType,
 } from 'generated-sources';
 import { clusterSchemaPath, clusterSchemasPath } from 'lib/paths';
-import React from 'react';
 import { ClusterName, NewSchemaSubjectRaw, SchemaName } from 'redux/interfaces';
 import PageLoader from 'components/common/PageLoader/PageLoader';
-import { useHistory } from 'react-router';
 import JSONEditor from 'components/common/JSONEditor/JSONEditor';
-import { useForm } from 'react-hook-form';
+import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';

 export interface EditProps {
  subject: SchemaName;
@ -143,17 +143,24 @@ const Edit = ({
              <div className="column is-one-half">
                <h4 className="title is-5 mb-2">Latest Schema</h4>
                <JSONEditor
-                  readonly
+                  readOnly
                  value={getFormattedSchema()}
                  name="latestSchema"
+                  highlightActiveLine={false}
                />
              </div>
              <div className="column is-one-half">
                <h4 className="title is-5 mb-2">New Schema</h4>
-                <JSONEditor
+                <Controller
                  control={control}
-                  value={getFormattedSchema()}
                  name="newSchema"
+                  render={({ name, onChange }) => (
+                    <JSONEditor
+                      defaultValue={getFormattedSchema()}
+                      name={name}
+                      onChange={onChange}
+                    />
+                  )}
                />
              </div>
            </div>
--- a/kafka-ui-react-app/src/components/Schemas/Edit/tests/Edit.spec.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Edit/tests/Edit.spec.tsx
@ -54,7 +54,10 @@ describe('Edit Component', () => {
      expect(component).toMatchSnapshot();
    });
    it('shows editor', () => {
-      expect(component.find('JSONEditor').length).toEqual(2);
+      expect(component.find('JSONEditor[name="latestSchema"]').length).toEqual(
+        1
+      );
+      expect(component.find('Controller[name="newSchema"]').length).toEqual(1);
      expect(component.find('button').exists()).toBeTruthy();
    });
    it('does not fetch them', () => {
--- a/kafka-ui-react-app/src/components/Schemas/Edit/tests/snapshots/Edit.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Schemas/Edit/tests/snapshots/Edit.spec.tsx.snap
@ -143,8 +143,9 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
            Latest Schema
          </h4>
          <JSONEditor
+            highlightActiveLine={false}
            name="latestSchema"
-            readonly={true}
+            readOnly={true}
            value="{
 	\\"schema\\": \\"schema\\"
 }"
@ -158,7 +159,7 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
          >
            New Schema
          </h4>
-          <JSONEditor
+          <Controller
            control={
              Object {
                "defaultValuesRef": Object {
@ -261,9 +262,7 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
              }
            }
            name="newSchema"
-            value="{
-	\\"schema\\": \\"schema\\"
-}"
+            render={[Function]}
          />
        </div>
      </div>
--- a/kafka-ui-react-app/src/components/Schemas/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/List/List.tsx
@ -49,7 +49,6 @@ const List: React.FC<ListProps> = ({
        <PageLoader />
      ) : (
        <div className="box">
-          <div className="table-container">
          <table className="table is-striped is-fullwidth">
            <thead>
              <tr>
@ -70,7 +69,6 @@ const List: React.FC<ListProps> = ({
            </tbody>
          </table>
        </div>
-        </div>
      )}
    </div>
  );
--- a/kafka-ui-react-app/src/components/Topics/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx
@ -88,7 +88,6 @@ const List: React.FC<Props> = ({
        <PageLoader />
      ) : (
        <div className="box">
-          <div className="table-container">
          <table className="table is-fullwidth">
            <thead>
              <tr>
@ -118,7 +117,6 @@ const List: React.FC<Props> = ({
          </table>
          <Pagination totalPages={totalPages} />
        </div>
-        </div>
      )}
    </div>
  );
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageItem.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageItem.tsx
@ -1,10 +1,9 @@
 import React from 'react';
 import { format } from 'date-fns';
 import { TopicMessage } from 'generated-sources';
-import JSONViewer from 'components/common/JSONViewer/JSONViewer';
-import { isObject } from 'lodash';
 import Dropdown from 'components/common/Dropdown/Dropdown';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
+import JSONEditor from 'components/common/JSONEditor/JSONEditor';
 import useDataSaver from 'lib/hooks/useDataSaver';

 export interface MessageItemProp {
@ -24,18 +23,19 @@ const MessageItem: React.FC<MessageItemProp> = ({
    'topic-message',
    (content as Record<string, string>) || ''
  );
-
  return (
    <tr>
      <td style={{ width: 200 }}>{format(timestamp, 'yyyy-MM-dd HH:mm:ss')}</td>
      <td style={{ width: 150 }}>{offset}</td>
      <td style={{ width: 100 }}>{partition}</td>
      <td style={{ wordBreak: 'break-word' }}>
-        {isObject(content) ? (
-          <JSONViewer data={content as Record<string, string>} />
-        ) : (
-          content
-        )}
+        <JSONEditor
+          readOnly
+          value={JSON.stringify(content, null, '\t')}
+          name="latestSchema"
+          highlightActiveLine={false}
+          height="300px"
+        />
      </td>
      <td className="has-text-right">
        <Dropdown
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx
@ -16,7 +16,6 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {

  return (
    <>
-      <div className="table-container">
      <table className="table is-fullwidth">
        <thead>
          <tr>
@ -41,7 +40,6 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
          )}
        </tbody>
      </table>
-      </div>
      <div className="columns">
        <div className="column is-full">
          <CustomParamButton
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/test/MessageItem.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/test/MessageItem.spec.tsx
@ -10,12 +10,12 @@ jest.mock('date-fns', () => ({

 describe('MessageItem', () => {
  describe('when content is defined', () => {
-    it('renders table row with JSONTree', () => {
+    it('renders table row with JSONEditor', () => {
      const wrapper = shallow(<MessageItem {...messages[0]} />);

      expect(wrapper.find('tr').length).toEqual(1);
      expect(wrapper.find('td').length).toEqual(5);
-      expect(wrapper.find('JSONViewer').length).toEqual(1);
+      expect(wrapper.find('JSONEditor').length).toEqual(1);
    });

    it('matches snapshot', () => {
@ -24,14 +24,6 @@ describe('MessageItem', () => {
  });

  describe('when content is undefined', () => {
-    it('renders table row without JSONTree', () => {
-      const wrapper = shallow(<MessageItem {...messages[1]} />);
-
-      expect(wrapper.find('tr').length).toEqual(1);
-      expect(wrapper.find('td').length).toEqual(5);
-      expect(wrapper.find('JSONViewer').length).toEqual(0);
-    });
-
    it('matches snapshot', () => {
      expect(shallow(<MessageItem {...messages[1]} />)).toMatchSnapshot();
    });
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/test/Messages.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/test/Messages.spec.tsx
@ -65,8 +65,8 @@ describe('Messages', () => {
        it('renders table', () => {
          expect(messagesWrapper.exists('.table.is-fullwidth')).toBeTruthy();
        });
-        it('renders JSONTree', () => {
-          expect(messagesWrapper.find('JSONTree').length).toEqual(1);
+        it('renders JSONEditor', () => {
+          expect(messagesWrapper.find('JSONEditor').length).toEqual(1);
        });
        it('parses message content correctly', () => {
          const messages = [
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/test/MessagesTable.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/test/MessagesTable.spec.tsx
@ -16,7 +16,7 @@ describe('MessagesTable', () => {
  );

  describe('when topic is empty', () => {
-    it('renders table row with JSONTree', () => {
+    it('renders table row with JSONEditor', () => {
      const wrapper = shallow(setupWrapper());
      expect(wrapper.exists('table')).toBeFalsy();
      expect(wrapper.exists('CustomParamButton')).toBeFalsy();
@ -32,7 +32,7 @@ describe('MessagesTable', () => {
    const onNext = jest.fn();
    const wrapper = shallow(setupWrapper({ messages, onNext }));

-    it('renders table row without JSONTree', () => {
+    it('renders table row without JSONEditor', () => {
      expect(wrapper.exists('table')).toBeTruthy();
      expect(wrapper.exists('CustomParamButton')).toBeTruthy();
      expect(wrapper.find('MessageItem').length).toEqual(2);
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/test/snapshots/MessageItem.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/test/snapshots/MessageItem.spec.tsx.snap
@ -36,13 +36,15 @@ exports[`MessageItem when content is defined matches snapshot 1`] = `
      }
    }
  >
-    <JSONViewer
-      data={
-        Object {
-          "foo": "bar",
-          "key": "val",
-        }
-      }
+    <JSONEditor
+      height="300px"
+      highlightActiveLine={false}
+      name="latestSchema"
+      readOnly={true}
+      value="{
+	\\"foo\\": \\"bar\\",
+	\\"key\\": \\"val\\"
+}"
    />
  </td>
  <td
@ -110,7 +112,14 @@ exports[`MessageItem when content is undefined matches snapshot 1`] = `
        "wordBreak": "break-word",
      }
    }
+  >
+    <JSONEditor
+      height="300px"
+      highlightActiveLine={false}
+      name="latestSchema"
+      readOnly={true}
    />
+  </td>
  <td
    className="has-text-right"
  >
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/test/snapshots/MessagesTable.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/test/snapshots/MessagesTable.spec.tsx.snap
@ -2,9 +2,6 @@

 exports[`MessagesTable when topic contains messages matches snapshot 1`] = `
 <Fragment>
-  <div
-    className="table-container"
-  >
  <table
    className="table is-fullwidth"
  >
@ -48,7 +45,6 @@ exports[`MessagesTable when topic contains messages matches snapshot 1`] = `
      />
    </tbody>
  </table>
-  </div>
  <div
    className="columns"
  >
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/Settings.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/Settings.tsx
@ -47,7 +47,6 @@ const Settings: React.FC<Props> = ({

  return (
    <div className="box">
-      <div className="table-container">
      <table className="table is-striped is-fullwidth">
        <thead>
          <tr>
@ -63,7 +62,6 @@ const Settings: React.FC<Props> = ({
        </tbody>
      </table>
    </div>
-    </div>
  );
 };

--- a/kafka-ui-react-app/src/components/common/JSONEditor/JSONEditor.tsx
+++ b/kafka-ui-react-app/src/components/common/JSONEditor/JSONEditor.tsx
@ -1,56 +1,18 @@
-import AceEditor from 'react-ace';
+/* eslint-disable react/jsx-props-no-spreading */
+import AceEditor, { IAceEditorProps } from 'react-ace';
 import 'ace-builds/src-noconflict/mode-json5';
-import 'ace-builds/src-noconflict/theme-dawn';
+import 'ace-builds/src-noconflict/theme-textmate';
 import React from 'react';
-import { Control, Controller } from 'react-hook-form';

-interface JSONEditorProps {
-  readonly?: boolean;
-  onChange?: (e: string) => void;
-  value: string;
-  name: string;
-  control?: Control;
-}
-
-const JSONEditor: React.FC<JSONEditorProps> = ({
-  readonly,
-  onChange,
-  value,
-  name,
-  control,
-}) => {
-  if (control) {
-    return (
-      <Controller
-        control={control}
-        name={name}
-        as={
+const JSONEditor: React.FC<IAceEditorProps> = (props) => (
  <AceEditor
-            defaultValue={value}
    mode="json5"
-            theme="dawn"
-            name={name}
+    theme="textmate"
    tabSize={2}
    width="100%"
    wrapEnabled
+    {...props}
  />
-        }
-      />
-    );
-  }
-  return (
-    <AceEditor
-      mode="json5"
-      theme="dawn"
-      name={name}
-      value={value}
-      tabSize={2}
-      width="100%"
-      readOnly={readonly}
-      onChange={onChange}
-      wrapEnabled
-    />
-  );
-};
+);

 export default JSONEditor;
--- a/kafka-ui-react-app/src/components/common/JSONEditor/tests/snapshots/JSONEditor.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/common/JSONEditor/tests/snapshots/JSONEditor.spec.tsx.snap
@ -35,7 +35,7 @@ exports[`JSONEditor component matches the snapshot 1`] = `
  showPrintMargin={true}
  style={Object {}}
  tabSize={2}
-  theme="dawn"
+  theme="textmate"
  value="{}"
  width="100%"
  wrapEnabled={true}
--- a/kafka-ui-react-app/src/components/common/JSONViewer/JSONViewer.tsx
+++ b/kafka-ui-react-app/src/components/common/JSONViewer/JSONViewer.tsx
@ -1,13 +0,0 @@
-import React from 'react';
-import JSONTree from 'react-json-tree';
-import theme from 'components/common/JSONViewer/themes/google';
-
-interface JSONViewerProps {
-  data: Record<string, string>;
-}
-
-const JSONViewer: React.FC<JSONViewerProps> = ({ data }) => (
-  <JSONTree data={data} theme={theme} shouldExpandNode={() => true} hideRoot />
-);
-
-export default JSONViewer;
--- a/kafka-ui-react-app/src/components/common/JSONViewer/themes/google.ts
+++ b/kafka-ui-react-app/src/components/common/JSONViewer/themes/google.ts
@ -1,20 +0,0 @@
-export default {
-  scheme: 'google',
-  author: 'seth wright (http://sethawright.com)',
-  base00: '#1d1f21',
-  base01: '#282a2e',
-  base02: '#373b41',
-  base03: '#969896',
-  base04: '#b4b7b4',
-  base05: '#c5c8c6',
-  base06: '#e0e0e0',
-  base07: '#ffffff',
-  base08: '#CC342B',
-  base09: '#F96A38',
-  base0A: '#FBA922',
-  base0B: '#198844',
-  base0C: '#3971ED',
-  base0D: '#3971ED',
-  base0E: '#A36AC7',
-  base0F: '#3971ED',
-};
--- a/kafka-ui-react-app/src/redux/reducers/schemas/test/selectors.spec.ts
+++ b/kafka-ui-react-app/src/redux/reducers/schemas/test/selectors.spec.ts
@ -1,3 +1,4 @@
+import { orderBy } from 'lodash';
 import {
  createSchemaAction,
  fetchSchemasByClusterNameAction,
@ -65,9 +66,9 @@ describe('Schemas selectors', () => {
      );
    });

-    it('returns sorted versions of schema', () => {
+    it('returns ordered versions of schema', () => {
      expect(selectors.getSortedSchemaVersions(store.getState())).toEqual(
-        schemaVersionsPayload
+        orderBy(schemaVersionsPayload, 'id', 'desc')
      );
    });
  });
--- a/kafka-ui-react-app/src/redux/reducers/schemas/selectors.ts
+++ b/kafka-ui-react-app/src/redux/reducers/schemas/selectors.ts
@ -1,7 +1,7 @@
 import { createSelector } from 'reselect';
+import { orderBy } from 'lodash';
 import { RootState, SchemasState } from 'redux/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
-import { sortBy } from 'lodash';

 const schemasState = ({ schemas }: RootState): SchemasState => schemas;

@ -56,5 +56,6 @@ export const getSchema = createSelector(

 export const getSortedSchemaVersions = createSelector(
  schemasState,
-  ({ currentSchemaVersions }) => sortBy(currentSchemaVersions, ['id'])
+  ({ currentSchemaVersions }) =>
+    orderBy(currentSchemaVersions, ['id'], ['desc'])
 );