0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed protobuf schema rendering

Browse source 
Fixed the duplicate key problem on schema list

Co-authored-by: Si Tang <si@indeed.com>
This commit is contained in:
Si Tang 2021-10-15 22:16:45 +09:00 • committed by GitHub
parent 576f5d5b15
commit 547863fdb2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 73 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

@ -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,
},
];

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

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