feat(react): implement visualizing historical versions of dataset sch…

…ema (#2855)
datahub-project · Jul 9, 2021 · eff502b · eff502b
1 parent 0e36df4
commit eff502b
Show file tree

Hide file tree

Showing 30 changed files with 1,053 additions and 3,303 deletions.
diff --git a/datahub-web-react/.storybook/main.js b/datahub-web-react/.storybook/main.js
diff --git a/datahub-web-react/.storybook/preview.js b/datahub-web-react/.storybook/preview.js
diff --git a/datahub-web-react/package.json b/datahub-web-react/package.json
@@ -14,10 +14,10 @@
         "@craco/craco": "^6.1.1",
         "@data-ui/xy-chart": "^0.0.84",
         "@react-hook/window-size": "^3.0.7",
-        "@storybook/react": "^6.2.9",
         "@testing-library/jest-dom": "^5.11.6",
         "@testing-library/react": "^11.2.2",
         "@testing-library/user-event": "^12.6.0",
+        "@types/diff": "^5.0.0",
         "@types/jest": "^26.0.19",
         "@types/js-cookie": "^2.2.6",
         "@types/node": "^12.19.9",
@@ -45,6 +45,7 @@
         "craco-antd": "^1.19.0",
         "d3-scale": "^3.3.0",
         "d3-time-format": "^3.0.0",
+        "diff": "^5.0.0",
         "dotenv": "^8.2.0",
         "graphql": "^15.4.0",
         "history": "^5.0.0",
@@ -71,8 +72,6 @@
         "build": "yarn run generate && CI=false craco build && rm -rf dist/ && cp -r build/ dist/ && rm -r build/",
         "test": "craco test",
         "eject": "react-scripts eject",
-        "storybook": "start-storybook -p 6006 -s public",
-        "build-storybook": "build-storybook -s public",
         "generate": "graphql-codegen --config codegen.yml",
         "lint": "eslint . --ext .ts,.tsx --quiet",
         "lint-fix": "eslint '*/**/*.{ts,tsx}' --quiet --fix"
@@ -102,11 +101,6 @@
         "@graphql-codegen/typescript-document-nodes": "1.17.9",
         "@graphql-codegen/typescript-operations": "1.17.13",
         "@graphql-codegen/typescript-react-apollo": "2.2.1",
-        "@storybook/addon-actions": "^6.1.11",
-        "@storybook/addon-essentials": "^6.2.9",
-        "@storybook/addon-links": "^6.1.11",
-        "@storybook/node-logger": "^6.1.11",
-        "@storybook/preset-create-react-app": "^3.1.5",
         "@types/graphql": "^14.5.0",
         "@types/query-string": "^6.3.0",
         "@types/styled-components": "^5.1.7",

diff --git a/datahub-web-react/src/Mocks.tsx b/datahub-web-react/src/Mocks.tsx
@@ -280,7 +280,8 @@ export const dataset3 = {
             },
         ],
     },
-    schema: null,
+    schemaMetadata: null,
+    previousSchemaMetadata: null,
     editableSchemaMetadata: null,
     deprecation: null,
     usageStats: null,

diff --git a/datahub-web-react/src/app/auth/LogIn.stories.tsx b/datahub-web-react/src/app/auth/LogIn.stories.tsx
diff --git a/datahub-web-react/src/app/entity/dataset/profile/DatasetProfile.tsx b/datahub-web-react/src/app/entity/dataset/profile/DatasetProfile.tsx
@@ -8,7 +8,7 @@ import {
 import { Ownership as OwnershipView } from '../../shared/Ownership';
 import SchemaView from './schema/Schema';
 import { EntityProfile } from '../../../shared/EntityProfile';
-import { Dataset, EntityType, GlobalTags, GlossaryTerms } from '../../../../types.generated';
+import { Dataset, EntityType, GlobalTags, GlossaryTerms, SchemaMetadata } from '../../../../types.generated';
 import LineageView from './Lineage';
 import { Properties as PropertiesView } from '../../shared/Properties';
 import DocumentsView from './Documentation';
@@ -63,26 +63,28 @@ export const DatasetProfile = ({ urn }: { urn: string }): JSX.Element => {
 
     const getHeader = (dataset: Dataset) => <DatasetHeader dataset={dataset} updateDataset={updateDataset} />;
 
-    const getTabs = (dataset: Dataset) => {
-        const {
-            ownership,
-            upstreamLineage,
-            downstreamLineage,
-            properties,
-            institutionalMemory,
-            schema,
-            editableSchemaMetadata,
-        } = dataset;
-
+    const getTabs = ({
+        ownership,
+        upstreamLineage,
+        downstreamLineage,
+        properties,
+        institutionalMemory,
+        schema,
+        schemaMetadata,
+        previousSchemaMetadata,
+        editableSchemaMetadata,
+        usageStats,
+    }: Dataset & { previousSchemaMetadata: SchemaMetadata }) => {
         return [
             {
                 name: TabType.Schema,
                 path: TabType.Schema.toLowerCase(),
                 content: (
                     <SchemaView
                         urn={urn}
-                        schema={schema}
-                        usageStats={dataset.usageStats}
+                        schema={schemaMetadata || schema}
+                        previousSchemaMetadata={previousSchemaMetadata}
+                        usageStats={usageStats}
                         editableSchemaMetadata={editableSchemaMetadata}
                         updateEditableSchema={(update) => {
                             analytics.event({
@@ -123,7 +125,7 @@ export const DatasetProfile = ({ urn }: { urn: string }): JSX.Element => {
             {
                 name: TabType.Queries,
                 path: TabType.Queries.toLowerCase(),
-                content: <QueriesTab dataset={dataset} />,
+                content: <QueriesTab usageStats={usageStats} />,
             },
             {
                 name: TabType.Properties,
@@ -180,7 +182,7 @@ export const DatasetProfile = ({ urn }: { urn: string }): JSX.Element => {
                         />
                     }
                     tagCardHeader={data.dataset?.glossaryTerms ? 'Tags & Terms' : 'Tags'}
-                    tabs={getTabs(data.dataset as Dataset)}
+                    tabs={getTabs(data.dataset as Dataset & { previousSchemaMetadata: SchemaMetadata })}
                     header={getHeader(data.dataset as Dataset)}
                     onTabChange={(tab: string) => {
                         analytics.event({

diff --git a/datahub-web-react/src/app/entity/dataset/profile/QueriesTab.tsx b/datahub-web-react/src/app/entity/dataset/profile/QueriesTab.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { Empty, Typography } from 'antd';
 import styled from 'styled-components';
 
-import { Dataset, Maybe, UsageAggregation } from '../../../../types.generated';
+import { UsageQueryResult, Maybe, UsageAggregation } from '../../../../types.generated';
 import Query from './Query';
 
 export type Props = {
-    dataset: Dataset;
+    usageStats?: UsageQueryResult | null;
 };
 
 const SectionTitle = styled(Typography.Title)`
@@ -36,8 +36,8 @@ function getTopNQueries(responseSize: number, buckets?: Maybe<UsageAggregation>[
     return response;
 }
 
-export default function QueriesTab({ dataset }: Props) {
-    const topQueries = getTopNQueries(5, dataset.usageStats?.buckets);
+export default function QueriesTab({ usageStats }: Props) {
+    const topQueries = getTopNQueries(5, usageStats?.buckets);
 
     if (topQueries.length === 0) {
         return <Empty description="No Sample Queries" image={Empty.PRESENTED_IMAGE_SIMPLE} />;

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
@@ -8,7 +8,7 @@ describe('Schema', () => {
     it('renders', () => {
         const { getByText, queryAllByTestId } = render(
             <TestPageContainer>
-                <Schema schema={sampleSchema} updateEditableSchema={jest.fn()} />
+                <Schema urn={sampleSchema?.platformUrn || ''} schema={sampleSchema} updateEditableSchema={jest.fn()} />
             </TestPageContainer>,
         );
         expect(getByText('name')).toBeInTheDocument();
@@ -21,7 +21,7 @@ describe('Schema', () => {
     it('renders raw', () => {
         const { getByText, queryAllByTestId } = render(
             <TestPageContainer>
-                <Schema schema={sampleSchema} updateEditableSchema={jest.fn()} />
+                <Schema urn={sampleSchema?.platformUrn || ''} schema={sampleSchema} updateEditableSchema={jest.fn()} />
             </TestPageContainer>,
         );
 
@@ -44,7 +44,11 @@ describe('Schema', () => {
     it('renders tags and terms', () => {
         const { getByText } = render(
             <TestPageContainer>
-                <Schema schema={sampleSchemaWithTags} updateEditableSchema={jest.fn()} />
+                <Schema
+                    urn={sampleSchema?.platformUrn || ''}
+                    schema={sampleSchemaWithTags}
+                    updateEditableSchema={jest.fn()}
+                />
             </TestPageContainer>,
         );
         expect(getByText('Legacy')).toBeInTheDocument();
@@ -54,7 +58,11 @@ describe('Schema', () => {
     it('renders description', () => {
         const { getByText } = render(
             <TestPageContainer>
-                <Schema schema={sampleSchemaWithTags} updateEditableSchema={jest.fn()} />
+                <Schema
+                    urn={sampleSchema?.platformUrn || ''}
+                    schema={sampleSchemaWithTags}
+                    updateEditableSchema={jest.fn()}
+                />
             </TestPageContainer>,
         );
         expect(getByText('order id')).toBeInTheDocument();
@@ -63,7 +71,11 @@ describe('Schema', () => {
     it('renders field', () => {
         const { getByText } = render(
             <TestPageContainer>
-                <Schema schema={sampleSchemaWithTags} updateEditableSchema={jest.fn()} />
+                <Schema
+                    urn={sampleSchema?.platformUrn || ''}
+                    schema={sampleSchemaWithTags}
+                    updateEditableSchema={jest.fn()}
+                />
             </TestPageContainer>,
         );
         expect(getByText('shipping_address')).toBeInTheDocument();

diff --git a/datahub-web-react/src/app/entity/dataset/profile/__tests__/SchemaDescriptionField.test.tsx b/datahub-web-react/src/app/entity/dataset/profile/__tests__/SchemaDescriptionField.test.tsx
@@ -1,17 +1,13 @@
 import React from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
-import SchemaDescriptionField from '../schema/SchemaDescriptionField';
+import SchemaDescriptionField from '../schema/components/SchemaDescriptionField';
 import TestPageContainer from '../../../../../utils/test-utils/TestPageContainer';
 
 describe('SchemaDescriptionField', () => {
     it('renders editable description', async () => {
         const { getByText, getByRole, queryByText } = render(
             <TestPageContainer>
-                <SchemaDescriptionField
-                    description="test description"
-                    updatedDescription="test description updated"
-                    onUpdate={async () => {}}
-                />
+                <SchemaDescriptionField description="test description updated" isEdited onUpdate={async () => {}} />
             </TestPageContainer>,
         );
         expect(getByRole('img')).toBeInTheDocument();
@@ -22,11 +18,7 @@ describe('SchemaDescriptionField', () => {
     it('renders update description modal', async () => {
         const { getByText, getByRole, queryByText } = render(
             <TestPageContainer>
-                <SchemaDescriptionField
-                    description="test description"
-                    updatedDescription="test description updated"
-                    onUpdate={async () => {}}
-                />
+                <SchemaDescriptionField description="test description" isEdited onUpdate={async () => {}} />
             </TestPageContainer>,
         );
         expect(queryByText('Update description')).not.toBeInTheDocument();