Make schema definitions collapsible

and set max lines for displaying schemas (#905) (#963)
Co-authored-by: Si Tang <si@indeed.com>

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

@@ -115,8 +115,9 @@ const Details: React.FC<DetailsProps> = ({
             <table className="table is-fullwidth">
               <thead>
                 <tr>
-                  <th>Version</th>
-                  <th>ID</th>
+                  <th style={{ width: 40 }}> </th>
+                  <th style={{ width: 90 }}>Version</th>
+                  <th style={{ width: 170 }}>ID</th>
                   <th>Schema</th>
                 </tr>
               </thead>

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

@@ -36,7 +36,10 @@ const LatestVersionItem: React.FC<LatestVersionProps> = ({
           isFixedHeight
           name="schema"
           value={JSON.stringify(JSON.parse(schema), null, '\t')}
-          showGutter={false}
+          setOptions={{
+            showLineNumbers: false,
+            maxLines: 40,
+          }}
           readOnly
         />
       </div>

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

@@ -9,18 +9,39 @@ interface SchemaVersionProps {
 const SchemaVersion: React.FC<SchemaVersionProps> = ({
   version: { version, id, schema },
 }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const toggleIsOpen = () => setIsOpen(!isOpen);
   return (
     <tr>
+      <td>
+        <span
+          className="icon has-text-link is-size-7 is-small is-clickable"
+          onClick={toggleIsOpen}
+          aria-hidden
+        >
+          <i className={`fas fa-${isOpen ? 'minus' : 'plus'}`} />
+        </span>
+      </td>
       <td>{version}</td>
       <td>{id}</td>
-      <td>
-        <JSONEditor
-          isFixedHeight
-          name="schema"
-          value={JSON.stringify(JSON.parse(schema), null, '\t')}
-          showGutter={false}
-          readOnly
-        />
+      <td
+        className="has-text-overflow-ellipsis is-family-code"
+        style={{ width: '100%', maxWidth: 0 }}
+      >
+        {isOpen ? (
+          <JSONEditor
+            isFixedHeight
+            name="schema"
+            value={JSON.stringify(JSON.parse(schema), null, '\t')}
+            setOptions={{
+              showLineNumbers: false,
+              maxLines: 40,
+            }}
+            readOnly
+          />
+        ) : (
+          <span>{schema}</span>
+        )}
       </td>
     </tr>
   );

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

@@ -8,7 +8,9 @@ describe('SchemaVersion', () => {
   it('renders versions', () => {
     const wrapper = shallow(<SchemaVersion version={versions[0]} />);
 
-    expect(wrapper.find('td').length).toEqual(3);
+    expect(wrapper.find('td').length).toEqual(4);
+    expect(wrapper.exists('JSONEditor')).toBeFalsy();
+    wrapper.find('.is-clickable').simulate('click');
     expect(wrapper.exists('JSONEditor')).toBeTruthy();
   });
 

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

@@ -99,10 +99,31 @@ exports[`Details View Initial state matches snapshot 1`] = `
     >
       <thead>
         <tr>
-          <th>
+          <th
+            style={
+              Object {
+                "width": 40,
+              }
+            }
+          >
+             
+          </th>
+          <th
+            style={
+              Object {
+                "width": 90,
+              }
+            }
+          >
             Version
           </th>
-          <th>
+          <th
+            style={
+              Object {
+                "width": 170,
+              }
+            }
+          >
             ID
           </th>
           <th>
@@ -247,10 +268,31 @@ exports[`Details View when page with schema versions loaded when schema has vers
     >
       <thead>
         <tr>
-          <th>
+          <th
+            style={
+              Object {
+                "width": 40,
+              }
+            }
+          >
+             
+          </th>
+          <th
+            style={
+              Object {
+                "width": 90,
+              }
+            }
+          >
             Version
           </th>
-          <th>
+          <th
+            style={
+              Object {
+                "width": 170,
+              }
+            }
+          >
             ID
           </th>
           <th>
@@ -390,10 +432,31 @@ exports[`Details View when page with schema versions loaded when versions are em
     >
       <thead>
         <tr>
-          <th>
+          <th
+            style={
+              Object {
+                "width": 40,
+              }
+            }
+          >
+             
+          </th>
+          <th
+            style={
+              Object {
+                "width": 90,
+              }
+            }
+          >
             Version
           </th>
-          <th>
+          <th
+            style={
+              Object {
+                "width": 170,
+              }
+            }
+          >
             ID
           </th>
           <th>

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

@@ -52,7 +52,12 @@ exports[`LatestVersionItem matches snapshot 1`] = `
         isFixedHeight={true}
         name="schema"
         readOnly={true}
-        showGutter={false}
+        setOptions={
+          Object {
+            "maxLines": 40,
+            "showLineNumbers": false,
+          }
+        }
         value="{
 	\\"type\\": \\"record\\",
 	\\"name\\": \\"MyRecord1\\",

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

@@ -3,29 +3,34 @@
 exports[`SchemaVersion matches snapshot 1`] = `
 <tr>
   <td>
-    1
+    <span
+      aria-hidden={true}
+      className="icon has-text-link is-size-7 is-small is-clickable"
+      onClick={[Function]}
+    >
+      <i
+        className="fas fa-plus"
+      />
+    </span>
   </td>
   <td>
     1
   </td>
   <td>
-    <JSONEditor
-      isFixedHeight={true}
-      name="schema"
-      readOnly={true}
-      showGutter={false}
-      value="{
-	\\"type\\": \\"record\\",
-	\\"name\\": \\"MyRecord1\\",
-	\\"namespace\\": \\"com.mycompany\\",
-	\\"fields\\": [
-		{
-			\\"name\\": \\"id\\",
-			\\"type\\": \\"long\\"
-		}
-	]
-}"
-    />
+    1
+  </td>
+  <td
+    className="has-text-overflow-ellipsis is-family-code"
+    style={
+      Object {
+        "maxWidth": 0,
+        "width": "100%",
+      }
+    }
+  >
+    <span>
+      {"type":"record","name":"MyRecord1","namespace":"com.mycompany","fields":[{"name":"id","type":"long"}]}
+    </span>
   </td>
 </tr>
 `;