From f399f7ce322fbe1fa1434b9008c00b3b7ec6e01c Mon Sep 17 00:00:00 2001
From: Gabe Lyons <itsgabelyons@gmail.com>
Date: Fri, 5 Mar 2021 17:05:03 -0800
Subject: [PATCH] feat(react): adding raw schema view option for table schemas
 (#2179)

---
 datahub-web-react/.eslintrc.js                |  1 +
 .../dataset/profile/__tests__/Schema.test.tsx | 25 +++++++++++++-
 .../entity/dataset/profile/schema/Schema.tsx  | 34 +++++++++++++++++--
 .../dataset/profile/stories/sampleSchema.ts   |  5 +++
 4 files changed, 61 insertions(+), 4 deletions(-)

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