Fixed protobuf schema rendering

Fixed the duplicate key problem on schema list

Co-authored-by: Si Tang <si@indeed.com>

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

@@ -35,7 +35,11 @@ const LatestVersionItem: React.FC<LatestVersionProps> = ({
         <JSONEditor
           isFixedHeight
           name="schema"
-          value={JSON.stringify(JSON.parse(schema), null, '\t')}
+          value={
+            schema.trim().startsWith('{')
+              ? JSON.stringify(JSON.parse(schema), null, '\t')
+              : schema
+          }
           setOptions={{
             showLineNumbers: false,
             maxLines: 40,

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

@@ -32,7 +32,11 @@ const SchemaVersion: React.FC<SchemaVersionProps> = ({
           <JSONEditor
             isFixedHeight
             name="schema"
-            value={JSON.stringify(JSON.parse(schema), null, '\t')}
+            value={
+              schema.trim().startsWith('{')
+                ? JSON.stringify(JSON.parse(schema), null, '\t')
+                : schema
+            }
             setOptions={{
               showLineNumbers: false,
               maxLines: 40,

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

@@ -7,7 +7,7 @@ import ClusterContext from 'components/contexts/ClusterContext';
 import DetailsContainer from 'components/Schemas/Details/DetailsContainer';
 import Details, { DetailsProps } from 'components/Schemas/Details/Details';
 
-import { schema, versions } from './fixtures';
+import { jsonSchema, versions } from './fixtures';
 
 const clusterName = 'testCluster';
 const fetchSchemaVersionsMock = jest.fn();
@@ -37,8 +37,8 @@ describe('Details', () => {
   describe('View', () => {
     const setupWrapper = (props: Partial<DetailsProps> = {}) => (
       <Details
-        subject={schema.subject}
-        schema={schema}
+        subject={jsonSchema.subject}
+        schema={jsonSchema}
         clusterName={clusterName}
         fetchSchemaVersions={fetchSchemaVersionsMock}
         deleteSchema={jest.fn()}
@@ -66,7 +66,7 @@ describe('Details', () => {
 
         expect(fetchSchemaVersionsMock).toHaveBeenCalledWith(
           clusterName,
-          schema.subject
+          jsonSchema.subject
         );
       });
 
@@ -114,7 +114,7 @@ describe('Details', () => {
           expect(wrapper.exists('LatestVersionItem')).toBeTruthy();
           expect(wrapper.exists('button')).toBeTruthy();
           expect(wrapper.exists('thead')).toBeTruthy();
-          expect(wrapper.find('SchemaVersion').length).toEqual(2);
+          expect(wrapper.find('SchemaVersion').length).toEqual(3);
         });
 
         it('matches snapshot', () => {

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

@@ -2,18 +2,28 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 import LatestVersionItem from 'components/Schemas/Details/LatestVersionItem';
 
-import { schema } from './fixtures';
+import { jsonSchema, protoSchema } from './fixtures';
 
 describe('LatestVersionItem', () => {
-  it('renders latest version of schema', () => {
-    const wrapper = mount(<LatestVersionItem schema={schema} />);
+  it('renders latest version of json schema', () => {
+    const wrapper = mount(<LatestVersionItem schema={jsonSchema} />);
 
     expect(wrapper.find('table').length).toEqual(1);
     expect(wrapper.find('td').at(1).text()).toEqual('1');
     expect(wrapper.exists('JSONEditor')).toBeTruthy();
   });
 
+  it('renders latest version of proto schema', () => {
+    const wrapper = mount(<LatestVersionItem schema={protoSchema} />);
+
+    expect(wrapper.find('table').length).toEqual(1);
+    expect(wrapper.find('td').at(1).text()).toEqual('2');
+    expect(wrapper.exists('JSONEditor')).toBeTruthy();
+  });
+
   it('matches snapshot', () => {
-    expect(shallow(<LatestVersionItem schema={schema} />)).toMatchSnapshot();
+    expect(
+      shallow(<LatestVersionItem schema={jsonSchema} />)
+    ).toMatchSnapshot();
   });
 });

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

@@ -327,6 +327,26 @@ exports[`Details View when page with schema versions loaded when schema has vers
             }
           }
         />
+        <SchemaVersion
+          key="3"
+          version={
+            Object {
+              "compatibilityLevel": "BACKWARD",
+              "id": 3,
+              "schema": "syntax = \\"proto3\\";
+package com.indeed;
+
+message MyRecord {
+  int32 id = 1;
+  string name = 2;
+}
+",
+              "schemaType": "PROTOBUF",
+              "subject": "test",
+              "version": "3",
+            }
+          }
+        />
       </tbody>
     </table>
   </div>

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

@@ -1,6 +1,6 @@
 import { SchemaSubject, SchemaType } from 'generated-sources';
 
-export const schema: SchemaSubject = {
+export const jsonSchema: SchemaSubject = {
   subject: 'test',
   version: '1',
   id: 1,
@@ -10,6 +10,16 @@ export const schema: SchemaSubject = {
   schemaType: SchemaType.JSON,
 };
 
+export const protoSchema: SchemaSubject = {
+  subject: 'test_proto',
+  version: '1',
+  id: 2,
+  schema:
+    'syntax = "proto3";\npackage com.indeed;\n\nmessage MyRecord {\n  int32 id = 1;\n  string name = 2;\n}\n',
+  compatibilityLevel: 'BACKWARD',
+  schemaType: SchemaType.PROTOBUF,
+};
+
 export const versions: SchemaSubject[] = [
   {
     subject: 'test',
@@ -29,4 +39,13 @@ export const versions: SchemaSubject[] = [
     compatibilityLevel: 'BACKWARD',
     schemaType: SchemaType.JSON,
   },
+  {
+    subject: 'test',
+    version: '3',
+    id: 3,
+    schema:
+      'syntax = "proto3";\npackage com.indeed;\n\nmessage MyRecord {\n  int32 id = 1;\n  string name = 2;\n}\n',
+    compatibilityLevel: 'BACKWARD',
+    schemaType: SchemaType.PROTOBUF,
+  },
 ];

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

@@ -88,7 +88,10 @@ const List: React.FC<ListProps> = ({
                 </tr>
               )}
               {schemas.map((subject) => (
-                <ListItem key={subject.id} subject={subject} />
+                <ListItem
+                  key={[subject.id, subject.subject].join('-')}
+                  subject={subject}
+                />
               ))}
             </tbody>
           </table>