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

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',
             {

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

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 <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" />
+            )}
+        </>
+    );
 }

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 = {