diff --git a/datahub-web-react/.eslintrc.js b/datahub-web-react/.eslintrc.js
index ba1dbf1181..9c6ff90f2c 100644
--- a/datahub-web-react/.eslintrc.js
+++ b/datahub-web-react/.eslintrc.js
@@ -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',
{
diff --git a/datahub-web-react/src/app/entity/dataset/profile/__tests__/Schema.test.tsx b/datahub-web-react/src/app/entity/dataset/profile/__tests__/Schema.test.tsx
index 4ae64f0136..b5f7035aab 100644
--- a/datahub-web-react/src/app/entity/dataset/profile/__tests__/Schema.test.tsx
+++ b/datahub-web-react/src/app/entity/dataset/profile/__tests__/Schema.test.tsx
@@ -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(
+
+
+ ,
+ );
+
+ 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);
+ });
});
diff --git a/datahub-web-react/src/app/entity/dataset/profile/schema/Schema.tsx b/datahub-web-react/src/app/entity/dataset/profile/schema/Schema.tsx
index f1a5a73070..b56cf19188 100644
--- a/datahub-web-react/src/app/entity/dataset/profile/schema/Schema.tsx
+++ b/datahub-web-react/src/app/entity/dataset/profile/schema/Schema.tsx
@@ -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
;
+ const [showRaw, setShowRaw] = useState(false);
+
+ return (
+ <>
+ {schema?.platformSchema?.__typename === 'TableSchema' && (
+
+
+
+ )}
+ {showRaw ? (
+
+
+
+ {schema?.platformSchema?.__typename === 'TableSchema' &&
+ JSON.stringify(JSON.parse(schema.platformSchema.schema), null, 2)}
+
+
+
+ ) : (
+
+ )}
+ >
+ );
}
diff --git a/datahub-web-react/src/app/entity/dataset/profile/stories/sampleSchema.ts b/datahub-web-react/src/app/entity/dataset/profile/stories/sampleSchema.ts
index 3858244a74..83b2204df4 100644
--- a/datahub-web-react/src/app/entity/dataset/profile/stories/sampleSchema.ts
+++ b/datahub-web-react/src/app/entity/dataset/profile/stories/sampleSchema.ts
@@ -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 = {