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

Make schema definitions collapsible

Browse source 
and set max lines for displaying schemas (#905) (#963)
Co-authored-by: Si Tang <si@indeed.com>
This commit is contained in:
Si Tang 2021-10-13 21:54:43 +09:00 • committed by GitHub
parent 7abf5db187
commit ad19571eca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 137 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

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

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

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