yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-08-15 04:37:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(react): adding raw schema view option for table schemas (#2179)

Browse Source
This commit is contained in:
Gabe Lyons 2021-03-05 17:05:03 -08:00 committed by GitHub
parent 1f082b114b
commit f399f7ce32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 61 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
datahub-web-react/.eslintrc.js
View File

@ -31,6 +31,7 @@ module.exports = {
'no-plusplus': 'off',
'no-prototype-builtins': 'off',
'react/require-default-props': 'off',
'no-underscore-dangle': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{

25
datahub-web-react/src/app/entity/dataset/profile/__tests__/Schema.test.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { render } from '@testing-library/react';
import { fireEvent, render } from '@testing-library/react';
import Schema from '../schema/Schema';
import TestPageContainer from '../../../../../utils/test-utils/TestPageContainer';
import { sampleSchema } from '../stories/sampleSchema';
@ -17,4 +17,27 @@ describe('Schema', () => {
expect(getByText('the address the order ships to')).toBeInTheDocument();
expect(queryAllByTestId('icon-STRING')).toHaveLength(2);
});
it('renders raw', () => {
const { getByText, queryAllByTestId } = render(
<TestPageContainer>
<Schema schema={sampleSchema} />
</TestPageContainer>,
);
expect(queryAllByTestId('icon-STRING')).toHaveLength(2);
expect(queryAllByTestId('schema-raw-view')).toHaveLength(0);
const rawButton = getByText('Raw');
fireEvent.click(rawButton);
expect(queryAllByTestId('icon-STRING')).toHaveLength(0);
expect(queryAllByTestId('schema-raw-view')).toHaveLength(1);
const schemaButton = getByText('Tabular');
fireEvent.click(schemaButton);
expect(queryAllByTestId('icon-STRING')).toHaveLength(2);
expect(queryAllByTestId('schema-raw-view')).toHaveLength(0);
});
});

34
datahub-web-react/src/app/entity/dataset/profile/schema/Schema.tsx
View File

@ -1,6 +1,6 @@
import React, { useMemo } from 'react';
import React, { useMemo, useState } from 'react';
import { Table, Typography } from 'antd';
import { Button, Table, Typography } from 'antd';
import { AlignType } from 'rc-table/lib/interface';
import styled from 'styled-components';
@ -15,6 +15,12 @@ const BadgeGroup = styled.div`
margin-left: -4px;
`;
const ViewRawButtonContainer = styled.div`
display: flex;
justify-content: flex-end;
padding-bottom: 16px;
`;
export type Props = {
schema?: Schema | null;
};
@ -76,5 +82,27 @@ export default function SchemaView({ schema }: Props) {
return [...defaultColumns, ...categoryColumns];
}, [schema]);
return <Table pagination={false} dataSource={schema?.fields} columns={columns} rowKey="fieldPath" />;
const [showRaw, setShowRaw] = useState(false);
return (
<>
{schema?.platformSchema?.__typename === 'TableSchema' && (
<ViewRawButtonContainer>
<Button onClick={() => setShowRaw(!showRaw)}>{showRaw ? 'Tabular' : 'Raw'}</Button>
</ViewRawButtonContainer>
)}
{showRaw ? (
<Typography.Text data-testid="schema-raw-view">
<pre>
<code>
{schema?.platformSchema?.__typename === 'TableSchema' &&
JSON.stringify(JSON.parse(schema.platformSchema.schema), null, 2)}
</code>
</pre>
</Typography.Text>
) : (
<Table pagination={false} dataSource={schema?.fields} columns={columns} rowKey="fieldPath" />
)}
</>
);
}

5
datahub-web-react/src/app/entity/dataset/profile/stories/sampleSchema.ts
View File

@ -94,6 +94,11 @@ export const sampleSchema: Schema = {
recursive: false,
},
],
platformSchema: {
__typename: 'TableSchema',
schema:
'{ "type": "record", "name": "SampleHdfsSchema", "namespace": "com.linkedin.dataset", "doc": "Sample HDFS dataset", "fields": [ { "name": "field_foo", "type": [ "string" ] }, { "name": "field_bar", "type": [ "boolean" ] } ] }',
},
};
export const sampleSchemaWithTags: Schema = {