Updated JSONViewer

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

@@ -45,39 +45,43 @@ const Details: React.FC<DetailsProps> = ({
         </div>
       </div>
       <div className="box">
-        <div className="level-left">
-          <div className="level-item">
-            <div className="mr-1">
-              <b>Latest Version</b>
-            </div>
-            <div className="tag is-info is-light" title="Version">
-              #{schema.version}
+        <div className="level">
+          <div className="level-left">
+            <div className="level-item">
+              <div className="mr-1">
+                <b>Latest Version</b>
+              </div>
+              <div className="tag is-info is-light" title="Version">
+                #{schema.version}
+              </div>
             </div>
           </div>
-          <button
-            className="button is-info is-small level-item"
-            type="button"
-            title="work in progress"
-            disabled
-          >
-            Create Schema
-          </button>
-          <button
-            className="button is-warning is-small level-item"
-            type="button"
-            title="work in progress"
-            disabled
-          >
-            Update Schema
-          </button>
-          <button
-            className="button is-danger is-small level-item"
-            type="button"
-            title="work in progress"
-            disabled
-          >
-            Delete
-          </button>
+          <div className="level-right">
+            <button
+              className="button is-primary is-small level-item"
+              type="button"
+              title="work in progress"
+              disabled
+            >
+              Create Schema
+            </button>
+            <button
+              className="button is-warning is-small level-item"
+              type="button"
+              title="work in progress"
+              disabled
+            >
+              Update Schema
+            </button>
+            <button
+              className="button is-danger is-small level-item"
+              type="button"
+              title="work in progress"
+              disabled
+            >
+              Delete
+            </button>
+          </div>
         </div>
         <div className="tile is-ancestor mt-1">
           <div className="tile is-4 is-parent">
@@ -109,7 +113,7 @@ const Details: React.FC<DetailsProps> = ({
         </div>
       </div>
       <div className="box">
-        <table className="table is-fullwidth">
+        <table className="table is-striped is-fullwidth">
           <thead>
             <tr>
               <th>Version</th>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SchemaSubject } from 'generated-sources';
-import JSONTree from 'react-json-tree';
+import JSONViewer from 'components/common/JSONViewer/JSONViewer';
 
 interface SchemaVersionProps {
   version: SchemaSubject;
@@ -9,33 +9,12 @@ interface SchemaVersionProps {
 const SchemaVersion: React.FC<SchemaVersionProps> = ({
   version: { version, id, schema },
 }) => {
-  const themeJsonTree = {
-    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',
-  };
-
   return (
     <tr>
       <td>{version}</td>
       <td>{id}</td>
       <td className="py-0">
-        <JSONTree data={JSON.parse(schema as string)} theme={themeJsonTree} />
+        <JSONViewer data={JSON.parse(schema as string)} />
       </td>
     </tr>
   );

kafka-ui-react-app/src/components/common/JSONViewer/JSONViewer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import JSONTree from 'react-json-tree';
-import theme from './themes/grayscale';
+import theme from './themes/google';
 
 interface JSONViewerProps {
   data: {
@@ -9,7 +9,7 @@ interface JSONViewerProps {
 }
 
 const JSONViewer: React.FC<JSONViewerProps> = ({ data }) => (
-  <JSONTree data={data} theme={theme} invertTheme={false} hideRoot />
+  <JSONTree data={data} theme={theme} shouldExpandNode={() => true} hideRoot />
 );
 
 export default JSONViewer;

kafka-ui-react-app/src/components/common/JSONViewer/themes/google.ts

@@ -0,0 +1,20 @@
+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/components/common/JSONViewer/themes/grayscale.ts

@@ -1,20 +0,0 @@
-export default {
-  scheme: 'grayscale',
-  author: 'alexandre gavioli (https://github.com/alexx2/)',
-  base00: '#101010',
-  base01: '#252525',
-  base02: '#464646',
-  base03: '#525252',
-  base04: '#ababab',
-  base05: '#b9b9b9',
-  base06: '#e3e3e3',
-  base07: '#f7f7f7',
-  base08: '#7c7c7c',
-  base09: '#999999',
-  base0A: '#a0a0a0',
-  base0B: '#8e8e8e',
-  base0C: '#868686',
-  base0D: '#686868',
-  base0E: '#747474',
-  base0F: '#5e5e5e',
-};

kafka-ui-react-app/src/redux/actions/thunks.ts

@@ -267,9 +267,8 @@ export const fetchSchemasByClusterName = (
 export const fetchSchemaVersions = (
   clusterName: ClusterName,
   subject: SchemaName
-  // eslint-disable-next-line consistent-return
 ): PromiseThunk<void> => async (dispatch) => {
-  if (!subject) return Promise.resolve();
+  if (!subject) return;
   dispatch(actions.fetchSchemaVersionsAction.request());
   try {
     const versions = await apiClient.getAllVersionsBySubject({