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

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",

kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx

@@ -54,30 +54,28 @@ const Details: React.FC<Props> = ({
 
       {isFetched ? (
         <div className="box">
-          <div className="table-container">
-            <table className="table is-striped is-fullwidth">
-              <thead>
-                <tr>
-                  <th>Consumer ID</th>
-                  <th>Host</th>
-                  <th>Topic</th>
-                  <th>Partition</th>
-                  <th>Messages behind</th>
-                  <th>Current offset</th>
-                  <th>End offset</th>
-                </tr>
-              </thead>
-              <tbody>
-                {items.map((consumer) => (
-                  <ListItem
-                    key={consumer.consumerId}
-                    clusterName={clusterName}
-                    consumer={consumer}
-                  />
-                ))}
-              </tbody>
-            </table>
-          </div>
+          <table className="table is-striped is-fullwidth">
+            <thead>
+              <tr>
+                <th>Consumer ID</th>
+                <th>Host</th>
+                <th>Topic</th>
+                <th>Partition</th>
+                <th>Messages behind</th>
+                <th>Current offset</th>
+                <th>End offset</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((consumer) => (
+                <ListItem
+                  key={consumer.consumerId}
+                  clusterName={clusterName}
+                  consumer={consumer}
+                />
+              ))}
+            </tbody>
+          </table>
         </div>
       ) : (
         <PageLoader />

kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx

@@ -37,31 +37,29 @@ const List: React.FC<Props> = ({ consumerGroups }) => {
                 />
               </div>
             </div>
-            <div className="table-container">
-              <table className="table is-striped is-fullwidth is-hoverable">
-                <thead>
-                  <tr>
-                    <th>Consumer group ID</th>
-                    <th>Num of consumers</th>
-                    <th>Num of topics</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {consumerGroups
-                    .filter(
-                      (consumerGroup) =>
-                        !searchText ||
-                        consumerGroup?.consumerGroupId?.indexOf(searchText) >= 0
-                    )
-                    .map((consumerGroup) => (
-                      <ListItem
-                        key={consumerGroup.consumerGroupId}
-                        consumerGroup={consumerGroup}
-                      />
-                    ))}
-                </tbody>
-              </table>
-            </div>
+            <table className="table is-striped is-fullwidth is-hoverable">
+              <thead>
+                <tr>
+                  <th>Consumer group ID</th>
+                  <th>Num of consumers</th>
+                  <th>Num of topics</th>
+                </tr>
+              </thead>
+              <tbody>
+                {consumerGroups
+                  .filter(
+                    (consumerGroup) =>
+                      !searchText ||
+                      consumerGroup?.consumerGroupId?.indexOf(searchText) >= 0
+                  )
+                  .map((consumerGroup) => (
+                    <ListItem
+                      key={consumerGroup.consumerGroupId}
+                      consumerGroup={consumerGroup}
+                    />
+                  ))}
+              </tbody>
+            </table>
           </div>
         ) : (
           'No active consumer groups'

kafka-ui-react-app/src/components/Schemas/Details/Details.tsx

@@ -112,22 +112,20 @@ const Details: React.FC<DetailsProps> = ({
             <LatestVersionItem schema={schema} />
           </div>
           <div className="box">
-            <div className="table-container">
-              <table className="table is-striped is-fullwidth">
-                <thead>
-                  <tr>
-                    <th>Version</th>
-                    <th>ID</th>
-                    <th>Schema</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {versions.map((version) => (
-                    <SchemaVersion key={version.id} version={version} />
-                  ))}
-                </tbody>
-              </table>
-            </div>
+            <table className="table is-fullwidth">
+              <thead>
+                <tr>
+                  <th>Version</th>
+                  <th>ID</th>
+                  <th>Schema</th>
+                </tr>
+              </thead>
+              <tbody>
+                {versions.map((version) => (
+                  <SchemaVersion key={version.id} version={version} />
+                ))}
+              </tbody>
+            </table>
           </div>
         </>
       ) : (

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,29 +12,32 @@ 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>
-                <td>ID</td>
-                <td>{id}</td>
-              </tr>
-              <tr>
-                <td>Subject</td>
-                <td>{subject}</td>
-              </tr>
-              <tr>
-                <td>Compatibility</td>
-                <td>{compatibilityLevel}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+        <table className="table is-fullwidth">
+          <tbody>
+            <tr>
+              <td>ID</td>
+              <td>{id}</td>
+            </tr>
+            <tr>
+              <td>Subject</td>
+              <td>{subject}</td>
+            </tr>
+            <tr>
+              <td>Compatibility</td>
+              <td>{compatibilityLevel}</td>
+            </tr>
+          </tbody>
+        </table>
       </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>

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>
   );

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', () => {

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', () => {

kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/Details.spec.tsx.snap

@@ -94,28 +94,24 @@ exports[`Details View Initial state matches snapshot 1`] = `
   <div
     className="box"
   >
-    <div
-      className="table-container"
+    <table
+      className="table is-fullwidth"
     >
-      <table
-        className="table is-striped is-fullwidth"
-      >
-        <thead>
-          <tr>
-            <th>
-              Version
-            </th>
-            <th>
-              ID
-            </th>
-            <th>
-              Schema
-            </th>
-          </tr>
-        </thead>
-        <tbody />
-      </table>
-    </div>
+      <thead>
+        <tr>
+          <th>
+            Version
+          </th>
+          <th>
+            ID
+          </th>
+          <th>
+            Schema
+          </th>
+        </tr>
+      </thead>
+      <tbody />
+    </table>
   </div>
 </div>
 `;
@@ -238,55 +234,51 @@ exports[`Details View when page with schema versions loaded when schema has vers
   <div
     className="box"
   >
-    <div
-      className="table-container"
+    <table
+      className="table is-fullwidth"
     >
-      <table
-        className="table is-striped is-fullwidth"
-      >
-        <thead>
-          <tr>
-            <th>
-              Version
-            </th>
-            <th>
-              ID
-            </th>
-            <th>
-              Schema
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <SchemaVersion
-            key="1"
-            version={
-              Object {
-                "compatibilityLevel": "BACKWARD",
-                "id": 1,
-                "schema": "{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord1\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}",
-                "schemaType": "JSON",
-                "subject": "test",
-                "version": "1",
-              }
+      <thead>
+        <tr>
+          <th>
+            Version
+          </th>
+          <th>
+            ID
+          </th>
+          <th>
+            Schema
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <SchemaVersion
+          key="1"
+          version={
+            Object {
+              "compatibilityLevel": "BACKWARD",
+              "id": 1,
+              "schema": "{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord1\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}",
+              "schemaType": "JSON",
+              "subject": "test",
+              "version": "1",
             }
-          />
-          <SchemaVersion
-            key="2"
-            version={
-              Object {
-                "compatibilityLevel": "BACKWARD",
-                "id": 2,
-                "schema": "{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord2\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}",
-                "schemaType": "JSON",
-                "subject": "test",
-                "version": "2",
-              }
+          }
+        />
+        <SchemaVersion
+          key="2"
+          version={
+            Object {
+              "compatibilityLevel": "BACKWARD",
+              "id": 2,
+              "schema": "{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord2\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}",
+              "schemaType": "JSON",
+              "subject": "test",
+              "version": "2",
             }
-          />
-        </tbody>
-      </table>
-    </div>
+          }
+        />
+      </tbody>
+    </table>
   </div>
 </div>
 `;
@@ -385,28 +377,24 @@ exports[`Details View when page with schema versions loaded when versions are em
   <div
     className="box"
   >
-    <div
-      className="table-container"
+    <table
+      className="table is-fullwidth"
     >
-      <table
-        className="table is-striped is-fullwidth"
-      >
-        <thead>
-          <tr>
-            <th>
-              Version
-            </th>
-            <th>
-              ID
-            </th>
-            <th>
-              Schema
-            </th>
-          </tr>
-        </thead>
-        <tbody />
-      </table>
-    </div>
+      <thead>
+        <tr>
+          <th>
+            Version
+          </th>
+          <th>
+            ID
+          </th>
+          <th>
+            Schema
+          </th>
+        </tr>
+      </thead>
+      <tbody />
+    </table>
   </div>
 </div>
 `;

kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/LatestVersionItem.spec.tsx.snap

@@ -10,62 +10,59 @@ exports[`LatestVersionItem matches snapshot 1`] = `
     <div
       className="tile is-child"
     >
-      <div
-        className="table-container"
+      <table
+        className="table is-fullwidth"
       >
-        <table
-          className="table is-fullwidth"
-        >
-          <tbody>
-            <tr>
-              <td>
-                ID
-              </td>
-              <td>
-                1
-              </td>
-            </tr>
-            <tr>
-              <td>
-                Subject
-              </td>
-              <td>
-                test
-              </td>
-            </tr>
-            <tr>
-              <td>
-                Compatibility
-              </td>
-              <td>
-                BACKWARD
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+        <tbody>
+          <tr>
+            <td>
+              ID
+            </td>
+            <td>
+              1
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Subject
+            </td>
+            <td>
+              test
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Compatibility
+            </td>
+            <td>
+              BACKWARD
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </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>

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>

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>

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', () => {

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>

kafka-ui-react-app/src/components/Schemas/List/List.tsx

@@ -49,27 +49,25 @@ const List: React.FC<ListProps> = ({
         <PageLoader />
       ) : (
         <div className="box">
-          <div className="table-container">
-            <table className="table is-striped is-fullwidth">
-              <thead>
+          <table className="table is-striped is-fullwidth">
+            <thead>
+              <tr>
+                <th>Schema Name</th>
+                <th>Version</th>
+                <th>Compatibility</th>
+              </tr>
+            </thead>
+            <tbody>
+              {schemas.length === 0 && (
                 <tr>
-                  <th>Schema Name</th>
-                  <th>Version</th>
-                  <th>Compatibility</th>
+                  <td colSpan={10}>No schemas found</td>
                 </tr>
-              </thead>
-              <tbody>
-                {schemas.length === 0 && (
-                  <tr>
-                    <td colSpan={10}>No schemas found</td>
-                  </tr>
-                )}
-                {schemas.map((subject) => (
-                  <ListItem key={subject.id} subject={subject} />
-                ))}
-              </tbody>
-            </table>
-          </div>
+              )}
+              {schemas.map((subject) => (
+                <ListItem key={subject.id} subject={subject} />
+              ))}
+            </tbody>
+          </table>
         </div>
       )}
     </div>

kafka-ui-react-app/src/components/Topics/List/List.tsx

@@ -88,36 +88,34 @@ const List: React.FC<Props> = ({
         <PageLoader />
       ) : (
         <div className="box">
-          <div className="table-container">
-            <table className="table is-fullwidth">
-              <thead>
+          <table className="table is-fullwidth">
+            <thead>
+              <tr>
+                <th>Topic Name</th>
+                <th>Total Partitions</th>
+                <th>Out of sync replicas</th>
+                <th>Type</th>
+                <th> </th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((topic) => (
+                <ListItem
+                  clusterName={clusterName}
+                  key={topic.name}
+                  topic={topic}
+                  deleteTopic={deleteTopic}
+                  clearTopicMessages={clearTopicMessages}
+                />
+              ))}
+              {items.length === 0 && (
                 <tr>
-                  <th>Topic Name</th>
-                  <th>Total Partitions</th>
-                  <th>Out of sync replicas</th>
-                  <th>Type</th>
-                  <th> </th>
+                  <td colSpan={10}>No topics found</td>
                 </tr>
-              </thead>
-              <tbody>
-                {items.map((topic) => (
-                  <ListItem
-                    clusterName={clusterName}
-                    key={topic.name}
-                    topic={topic}
-                    deleteTopic={deleteTopic}
-                    clearTopicMessages={clearTopicMessages}
-                  />
-                ))}
-                {items.length === 0 && (
-                  <tr>
-                    <td colSpan={10}>No topics found</td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-            <Pagination totalPages={totalPages} />
-          </div>
+              )}
+            </tbody>
+          </table>
+          <Pagination totalPages={totalPages} />
         </div>
       )}
     </div>

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

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx

@@ -16,32 +16,30 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
 
   return (
     <>
-      <div className="table-container">
-        <table className="table is-fullwidth">
-          <thead>
-            <tr>
-              <th>Timestamp</th>
-              <th>Offset</th>
-              <th>Partition</th>
-              <th>Content</th>
-              <th> </th>
-            </tr>
-          </thead>
-          <tbody>
-            {messages.map(
-              ({ partition, offset, timestamp, content }: TopicMessage) => (
-                <MessageItem
-                  key={`message-${timestamp.getTime()}-${offset}`}
-                  partition={partition}
-                  offset={offset}
-                  timestamp={timestamp}
-                  content={content}
-                />
-              )
-            )}
-          </tbody>
-        </table>
-      </div>
+      <table className="table is-fullwidth">
+        <thead>
+          <tr>
+            <th>Timestamp</th>
+            <th>Offset</th>
+            <th>Partition</th>
+            <th>Content</th>
+            <th> </th>
+          </tr>
+        </thead>
+        <tbody>
+          {messages.map(
+            ({ partition, offset, timestamp, content }: TopicMessage) => (
+              <MessageItem
+                key={`message-${timestamp.getTime()}-${offset}`}
+                partition={partition}
+                offset={offset}
+                timestamp={timestamp}
+                content={content}
+              />
+            )
+          )}
+        </tbody>
+      </table>
       <div className="columns">
         <div className="column is-full">
           <CustomParamButton

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();
     });

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 = [

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);

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"
   >

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessagesTable.spec.tsx.snap

@@ -2,53 +2,49 @@
 
 exports[`MessagesTable when topic contains messages matches snapshot 1`] = `
 <Fragment>
-  <div
-    className="table-container"
+  <table
+    className="table is-fullwidth"
   >
-    <table
-      className="table is-fullwidth"
-    >
-      <thead>
-        <tr>
-          <th>
-            Timestamp
-          </th>
-          <th>
-            Offset
-          </th>
-          <th>
-            Partition
-          </th>
-          <th>
-            Content
-          </th>
-          <th>
-             
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <MessageItem
-          content={
-            Object {
-              "foo": "bar",
-              "key": "val",
-            }
+    <thead>
+      <tr>
+        <th>
+          Timestamp
+        </th>
+        <th>
+          Offset
+        </th>
+        <th>
+          Partition
+        </th>
+        <th>
+          Content
+        </th>
+        <th>
+           
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <MessageItem
+        content={
+          Object {
+            "foo": "bar",
+            "key": "val",
           }
-          key="message-802310400000-2"
-          offset={2}
-          partition={1}
-          timestamp={1995-06-05T00:00:00.000Z}
-        />
-        <MessageItem
-          key="message-1596585600000-20"
-          offset={20}
-          partition={2}
-          timestamp={2020-08-05T00:00:00.000Z}
-        />
-      </tbody>
-    </table>
-  </div>
+        }
+        key="message-802310400000-2"
+        offset={2}
+        partition={1}
+        timestamp={1995-06-05T00:00:00.000Z}
+      />
+      <MessageItem
+        key="message-1596585600000-20"
+        offset={20}
+        partition={2}
+        timestamp={2020-08-05T00:00:00.000Z}
+      />
+    </tbody>
+  </table>
   <div
     className="columns"
   >

kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/Settings.tsx

@@ -47,22 +47,20 @@ const Settings: React.FC<Props> = ({
 
   return (
     <div className="box">
-      <div className="table-container">
-        <table className="table is-striped is-fullwidth">
-          <thead>
-            <tr>
-              <th>Key</th>
-              <th>Value</th>
-              <th>Default Value</th>
-            </tr>
-          </thead>
-          <tbody>
-            {config.map((item) => (
-              <ConfigListItem key={item.name} config={item} />
-            ))}
-          </tbody>
-        </table>
-      </div>
+      <table className="table is-striped is-fullwidth">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Value</th>
+            <th>Default Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          {config.map((item) => (
+            <ConfigListItem key={item.name} config={item} />
+          ))}
+        </tbody>
+      </table>
     </div>
   );
 };

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={
-          <AceEditor
-            defaultValue={value}
-            mode="json5"
-            theme="dawn"
-            name={name}
-            tabSize={2}
-            width="100%"
-            wrapEnabled
-          />
-        }
-      />
-    );
-  }
-  return (
-    <AceEditor
-      mode="json5"
-      theme="dawn"
-      name={name}
-      value={value}
-      tabSize={2}
-      width="100%"
-      readOnly={readonly}
-      onChange={onChange}
-      wrapEnabled
-    />
-  );
-};
+const JSONEditor: React.FC<IAceEditorProps> = (props) => (
+  <AceEditor
+    mode="json5"
+    theme="textmate"
+    tabSize={2}
+    width="100%"
+    wrapEnabled
+    {...props}
+  />
+);
 
 export default JSONEditor;

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}

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;

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',
-};

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')
       );
     });
   });

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'])
 );