Details component refactored

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

@@ -1,10 +1,10 @@
-import { SchemaSubject } from 'generated-sources';
 import React from 'react';
+import { SchemaSubject } from 'generated-sources';
 import { ClusterName, SchemaName } from 'redux/interfaces';
-import JSONViewer from 'components/common/JSONViewer/JSONViewer';
+import { clusterSchemasPath } from 'lib/paths';
 import Breadcrumb from '../../common/Breadcrumb/Breadcrumb';
-import { clusterSchemasPath } from '../../../lib/paths';
 import SchemaVersion from './SchemaVersion';
+import LatestVersionItem from './LatestVersionItem';
 
 interface DetailsProps {
   schema: SchemaSubject;
@@ -31,18 +31,16 @@ const Details: React.FC<DetailsProps> = ({
   return (
     <div className="section">
       <div className="level">
-        <div className="level-item level-left">
-          <Breadcrumb
-            links={[
-              {
-                href: clusterSchemasPath(clusterName),
-                label: 'Schema Registry',
-              },
-            ]}
-          >
-            {schema.subject}
-          </Breadcrumb>
-        </div>
+        <Breadcrumb
+          links={[
+            {
+              href: clusterSchemasPath(clusterName),
+              label: 'Schema Registry',
+            },
+          ]}
+        >
+          {schema.subject}
+        </Breadcrumb>
       </div>
       <div className="box">
         <div className="level">
@@ -83,34 +81,7 @@ const Details: React.FC<DetailsProps> = ({
             </button>
           </div>
         </div>
-        <div className="tile is-ancestor mt-1">
-          <div className="tile is-4 is-parent">
-            <div className="tile is-child">
-              <table className="table is-fullwidth">
-                <tbody>
-                  <tr>
-                    <td>ID</td>
-                    <td>{schema.id}</td>
-                  </tr>
-                  <tr>
-                    <td>Subject</td>
-                    <td>{schema.subject}</td>
-                  </tr>
-                  <tr>
-                    <td>Compatibility</td>
-                    <td>{schema.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.schema as string)} />
-            </div>
-          </div>
-        </div>
+        <LatestVersionItem schema={schema} />
       </div>
       <div className="box">
         <table className="table is-striped is-fullwidth">
@@ -122,11 +93,9 @@ const Details: React.FC<DetailsProps> = ({
             </tr>
           </thead>
           <tbody>
-            {versions
-              .sort((a: SchemaSubject, b: SchemaSubject) => a.id - b.id)
-              .map((version) => (
-                <SchemaVersion key={version.id} version={version} />
-              ))}
+            {versions.map((version) => (
+              <SchemaVersion key={version.id} version={version} />
+            ))}
           </tbody>
         </table>
       </div>

kafka-ui-react-app/src/components/Schemas/Details/DetailsContainer.ts

@@ -2,8 +2,8 @@ import { connect } from 'react-redux';
 import { ClusterName, RootState } from 'redux/interfaces';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { getSchema, getSchemaVersions } from 'redux/reducers/schemas/selectors';
+import { fetchSchemaVersions } from 'redux/actions';
 import Details from './Details';
-import { fetchSchemaVersions } from '../../../redux/actions';
 
 interface RouteProps {
   clusterName: ClusterName;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { SchemaSubject } from 'generated-sources';
+import JSONViewer from 'components/common/JSONViewer/JSONViewer';
+
+interface LatestVersionProps {
+  schema: SchemaSubject;
+}
+
+const LatestVersionItem: React.FC<LatestVersionProps> = ({
+  schema: { id, subject, schema, compatibilityLevel },
+}) => {
+  return (
+    <div className="tile is-ancestor mt-1">
+      <div className="tile is-4 is-parent">
+        <div className="tile is-child">
+          <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 as string)} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LatestVersionItem;

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

@@ -1,5 +1,5 @@
-import { SchemaSubject } from 'generated-sources';
 import React from 'react';
+import { SchemaSubject } from 'generated-sources';
 import Breadcrumb from '../../common/Breadcrumb/Breadcrumb';
 import ListItem from './ListItem';
 

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

@@ -1,5 +1,5 @@
-import { SchemaSubject } from 'generated-sources';
 import React from 'react';
+import { SchemaSubject } from 'generated-sources';
 import { NavLink } from 'react-router-dom';
 
 interface ListItemProps {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { format } from 'date-fns';
-import JSONTree from 'react-json-tree';
 import { TopicMessage } from 'generated-sources';
+import JSONViewer from 'components/common/JSONViewer/JSONViewer';
 
 export interface MessageItemProp {
   partition: TopicMessage['partition'];
@@ -21,28 +21,7 @@ const MessageItem: React.FC<MessageItemProp> = ({
     <td style={{ width: 150 }}>{offset}</td>
     <td style={{ width: 100 }}>{partition}</td>
     <td style={{ wordBreak: 'break-word' }}>
-      {content && (
-        <JSONTree
-          data={content}
-          hideRoot
-          invertTheme={false}
-          theme={{
-            tree: ({ style }) => ({
-              style: {
-                ...style,
-                backgroundColor: undefined,
-                marginLeft: 0,
-                marginTop: 0,
-              },
-            }),
-            value: ({ style }) => ({
-              style: { ...style, marginLeft: 0 },
-            }),
-            base0D: '#3273dc',
-            base0B: '#363636',
-          }}
-        />
-      )}
+      {content && <JSONViewer data={content as { [key: string]: string }} />}
     </td>
   </tr>
 );

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

@@ -32,7 +32,7 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
                 partition={partition}
                 offset={offset}
                 timestamp={timestamp}
-                content={content as Record<string, unknown>}
+                content={content as { [key: string]: string }}
               />
             )
           )}

kafka-ui-react-app/src/redux/reducers/schemas/selectors.ts

@@ -1,6 +1,7 @@
 import { createSelector } from 'reselect';
 import { RootState, SchemasState } from 'redux/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
+import { SchemaSubject } from 'generated-sources';
 
 const schemasState = ({ schemas }: RootState): SchemasState => schemas;
 
@@ -38,5 +39,8 @@ export const getSchema = createSelector(
 
 export const getSchemaVersions = createSelector(
   schemasState,
-  ({ currentSchemaVersions }) => currentSchemaVersions
+  ({ currentSchemaVersions }) =>
+    currentSchemaVersions.sort(
+      (a: SchemaSubject, b: SchemaSubject) => a.id - b.id
+    )
 );