feat(ui/data-contract): Data contract UI under Validation Tab

datahub-web-react/package.json

@@ -11,6 +11,7 @@
         "@apollo/client": "^3.3.19",
         "@graphql-codegen/fragment-matcher": "^5.0.0",
         "@monaco-editor/react": "^4.3.1",
+        "@mui/icons-material": "^5.15.2",
         "@react-hook/window-size": "^3.0.7",
         "@react-spring/web": "^9.7.3",
         "@remirror/pm": "^2.0.3",
@@ -150,4 +151,4 @@
         "prosemirror-transform": "1.2.2",
         "prosemirror-view": "1.13.4"
     }
-}
+}

datahub-web-react/src/app/entity/shared/tabs/Dataset/Validations/Assertions.tsx

@@ -6,6 +6,7 @@ import { DatasetAssertionsList } from './DatasetAssertionsList';
 import { DatasetAssertionsSummary } from './DatasetAssertionsSummary';
 import { sortAssertions } from './assertionUtils';
 import { combineEntityDataWithSiblings, useIsSeparateSiblingsMode } from '../../../siblingUtils';
+import { useGetDatasetContractQuery } from '../../../../../../graphql/contract.generated';
 
 /**
  * Returns a status summary for the assertions associated with a Dataset.
@@ -46,6 +47,11 @@ export const Assertions = () => {
     const combinedData = isHideSiblingMode ? data : combineEntityDataWithSiblings(data);
     const [removedUrns, setRemovedUrns] = useState<string[]>([]);
 
+    const { data: contractData, refetch: contractRefetch } = useGetDatasetContractQuery({
+        variables: { urn },
+        fetchPolicy: 'cache-first',
+    });
+    const contract = contractData?.dataset?.contract as any;
     const assertions =
         (combinedData && combinedData.dataset?.assertions?.assertions?.map((assertion) => assertion as Assertion)) ||
         [];
@@ -67,6 +73,7 @@ export const Assertions = () => {
                         setRemovedUrns([...removedUrns, assertionUrn]);
                         setTimeout(() => refetch(), 3000);
                     }}
+                    contract={contract}
                 />
             )}
         </>

datahub-web-react/src/app/entity/shared/tabs/Dataset/Validations/DatasetAssertionsList.tsx

@@ -1,15 +1,28 @@
-import { Button, Dropdown, Empty, Image, message, Modal, Tag, Tooltip, Typography } from 'antd';
+import { Button, Dropdown, Empty, Image, message, Modal, Tag, Tooltip, Typography, Checkbox } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
-import { DeleteOutlined, DownOutlined, MoreOutlined, RightOutlined, StopOutlined } from '@ant-design/icons';
+import {
+    DeleteOutlined,
+    DownOutlined,
+    MoreOutlined,
+    RightOutlined,
+    StopOutlined,
+    AuditOutlined,
+} from '@ant-design/icons';
 import { DatasetAssertionDescription } from './DatasetAssertionDescription';
 import { StyledTable } from '../../../components/styled/StyledTable';
 import { DatasetAssertionDetails } from './DatasetAssertionDetails';
-import { Assertion, AssertionRunStatus } from '../../../../../../types.generated';
+import { Assertion, AssertionRunStatus, DataContract, EntityType } from '../../../../../../types.generated';
 import { getResultColor, getResultIcon, getResultText } from './assertionUtils';
 import { useDeleteAssertionMutation } from '../../../../../../graphql/assertion.generated';
 import { capitalizeFirstLetterOnly } from '../../../../../shared/textUtil';
 import AssertionMenu from './AssertionMenu';
+import { Link, useParams } from 'react-router-dom';
+import { REDESIGN_COLORS } from '../../../constants';
+import { useEntityRegistry } from '../../../../../useEntityRegistry';
+import { isAssertionPartOfContract } from './contract/utils';
+import { decodeUrn } from '../../../utils';
+import { useEntityData } from '../../../EntityContext';
 
 const ResultContainer = styled.div`
     display: flex;
@@ -35,9 +48,26 @@ const StyledMoreOutlined = styled(MoreOutlined)`
     font-size: 18px;
 `;
 
+const AssertionSelectCheckbox = styled(Checkbox)`
+    margin-right: 12px;
+`;
+
+const DataContractLogo = styled(AuditOutlined)`
+    margin-left: 8px;
+    font-size: 16px;
+    color: ${REDESIGN_COLORS.BLUE};
+`;
+
 type Props = {
     assertions: Array<Assertion>;
     onDelete?: (urn: string) => void;
+    contract?: DataContract;
+    // required for enabling menu/actions
+    showMenu?: boolean;
+    onSelect?: (assertionUrn: string) => void;
+    // required for enabling selection logic
+    showSelect?: boolean;
+    selectedUrns?: string[];
 };
 
 /**
@@ -46,8 +76,18 @@ type Props = {
  *
  * Currently this component supports rendering Dataset Assertions only.
  */
-export const DatasetAssertionsList = ({ assertions, onDelete }: Props) => {
+export const DatasetAssertionsList = ({
+    assertions,
+    onDelete,
+    showMenu = true,
+    showSelect,
+    onSelect,
+    selectedUrns,
+    contract,
+}: Props) => {
+    const entityData = useEntityData();
     const [deleteAssertionMutation] = useDeleteAssertionMutation();
+    const entityRegistry = useEntityRegistry();
 
     const deleteAssertion = async (urn: string) => {
         try {
@@ -102,9 +142,19 @@ export const DatasetAssertionsList = ({ assertions, onDelete }: Props) => {
                 const resultColor = (record.lastExecResult && getResultColor(record.lastExecResult)) || 'default';
                 const resultText = (record.lastExecResult && getResultText(record.lastExecResult)) || 'No Evaluations';
                 const resultIcon = (record.lastExecResult && getResultIcon(record.lastExecResult)) || <StopOutlined />;
+                const selected = selectedUrns?.some((selectedUrn) => selectedUrn === record.urn);
+                const isPartOfContract = contract && isAssertionPartOfContract(record, contract);
+
                 const { description } = record;
                 return (
                     <ResultContainer>
+                        {showSelect ? (
+                            <AssertionSelectCheckbox
+                                checked={selected}
+                                onClick={(e) => e.stopPropagation()}
+                                onChange={() => onSelect?.(record.urn as string)}
+                            />
+                        ) : undefined}
                         <div>
                             <Tooltip title={(localTime && `Last evaluated on ${localTime}`) || 'No Evaluations'}>
                                 <Tag style={{ borderColor: resultColor }}>
@@ -117,6 +167,34 @@ export const DatasetAssertionsList = ({ assertions, onDelete }: Props) => {
                             description={description}
                             assertionInfo={record.datasetAssertionInfo}
                         />
+                        {(isPartOfContract && entityData?.urn && (
+                            <Tooltip
+                                title={
+                                    <>
+                                        Part of Data Contract{' '}
+                                        <Link
+                                            to={`${entityRegistry.getEntityUrl(
+                                                EntityType.Dataset,
+                                                entityData.urn,
+                                            )}/Validation/Data Contract`}
+                                            style={{ color: REDESIGN_COLORS.BLUE }}
+                                        >
+                                            view
+                                        </Link>
+                                    </>
+                                }
+                            >
+                                <Link
+                                    to={`${entityRegistry.getEntityUrl(
+                                        EntityType.Dataset,
+                                        entityData.urn,
+                                    )}/Validation/Data Contract`}
+                                >
+                                    <DataContractLogo />
+                                </Link>
+                            </Tooltip>
+                        )) ||
+                            undefined}
                     </ResultContainer>
                 );
             },
@@ -125,37 +203,44 @@ export const DatasetAssertionsList = ({ assertions, onDelete }: Props) => {
             title: '',
             dataIndex: '',
             key: '',
-            render: (_, record: any) => (
-                <ActionButtonContainer>
-                    <Tooltip
-                        title={
-                            record.platform.properties?.displayName || capitalizeFirstLetterOnly(record.platform.name)
-                        }
-                    >
-                        <PlatformContainer>
-                            {(record.platform.properties?.logoUrl && (
-                                <Image
-                                    preview={false}
-                                    height={20}
-                                    width={20}
-                                    src={record.platform.properties?.logoUrl}
-                                />
-                            )) || (
-                                <Typography.Text>
-                                    {record.platform.properties?.displayName ||
-                                        capitalizeFirstLetterOnly(record.platform.name)}
-                                </Typography.Text>
-                            )}
-                        </PlatformContainer>
-                    </Tooltip>
-                    <Button onClick={() => onDeleteAssertion(record.urn)} type="text" shape="circle" danger>
-                        <DeleteOutlined />
-                    </Button>
-                    <Dropdown overlay={<AssertionMenu urn={record.urn} />} trigger={['click']}>
-                        <StyledMoreOutlined />
-                    </Dropdown>
-                </ActionButtonContainer>
-            ),
+            render: (_, record: any) => {
+                return (
+                    <>
+                        {showMenu && (
+                            <ActionButtonContainer>
+                                <Tooltip
+                                    title={
+                                        record.platform.properties?.displayName ||
+                                        capitalizeFirstLetterOnly(record.platform.name)
+                                    }
+                                >
+                                    <PlatformContainer>
+                                        {(record.platform.properties?.logoUrl && (
+                                            <Image
+                                                preview={false}
+                                                height={20}
+                                                width={20}
+                                                src={record.platform.properties?.logoUrl}
+                                            />
+                                        )) || (
+                                            <Typography.Text>
+                                                {record.platform.properties?.displayName ||
+                                                    capitalizeFirstLetterOnly(record.platform.name)}
+                                            </Typography.Text>
+                                        )}
+                                    </PlatformContainer>
+                                </Tooltip>
+                                <Button onClick={() => onDeleteAssertion(record.urn)} type="text" shape="circle" danger>
+                                    <DeleteOutlined />
+                                </Button>
+                                <Dropdown overlay={<AssertionMenu urn={record.urn} />} trigger={['click']}>
+                                    <StyledMoreOutlined />
+                                </Dropdown>
+                            </ActionButtonContainer>
+                        )}
+                    </>
+                );
+            },
         },
     ];
 
@@ -168,18 +253,36 @@ export const DatasetAssertionsList = ({ assertions, onDelete }: Props) => {
                 locale={{
                     emptyText: <Empty description="No Assertions Found :(" image={Empty.PRESENTED_IMAGE_SIMPLE} />,
                 }}
-                expandable={{
-                    defaultExpandAllRows: false,
-                    expandRowByClick: true,
-                    expandedRowRender: (record) => {
-                        return <DatasetAssertionDetails urn={record.urn} lastEvaluatedAtMillis={record.lastExecTime} />;
-                    },
-                    expandIcon: ({ expanded, onExpand, record }: any) =>
-                        expanded ? (
-                            <DownOutlined style={{ fontSize: 8 }} onClick={(e) => onExpand(record, e)} />
-                        ) : (
-                            <RightOutlined style={{ fontSize: 8 }} onClick={(e) => onExpand(record, e)} />
-                        ),
+                expandable={
+                    showSelect
+                        ? {}
+                        : {
+                              defaultExpandAllRows: false,
+                              expandRowByClick: true,
+                              expandedRowRender: (record) => {
+                                  return (
+                                      <DatasetAssertionDetails
+                                          urn={record.urn}
+                                          lastEvaluatedAtMillis={record.lastExecTime}
+                                      />
+                                  );
+                              },
+                              expandIcon: ({ expanded, onExpand, record }: any) =>
+                                  expanded ? (
+                                      <DownOutlined style={{ fontSize: 8 }} onClick={(e) => onExpand(record, e)} />
+                                  ) : (
+                                      <RightOutlined style={{ fontSize: 8 }} onClick={(e) => onExpand(record, e)} />
+                                  ),
+                          }
+                }
+                onRow={(record) => {
+                    return {
+                        onClick: (_) => {
+                            if (showSelect) {
+                                onSelect?.(record.urn as string);
+                            }
+                        },
+                    };
                 }}
                 showHeader={false}
                 pagination={false}

datahub-web-react/src/app/entity/shared/tabs/Dataset/Validations/FieldAssertionDescription.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Typography } from 'antd';
+// import { FieldAssertionInfo } from '../../../../../../types.generated';
+import {
+    getFieldDescription,
+    getFieldOperatorDescription,
+    getFieldParametersDescription,
+    getFieldTransformDescription,
+} from './fieldDescriptionUtils';
+
+type Props = {
+    assertionInfo: any;
+};
+
+/**
+ * A human-readable description of a Field Assertion.
+ */
+export const FieldAssertionDescription = ({ assertionInfo }: Props) => {
+    const field = getFieldDescription(assertionInfo);
+    const operator = getFieldOperatorDescription(assertionInfo);
+    const transform = getFieldTransformDescription(assertionInfo);
+    const parameters = getFieldParametersDescription(assertionInfo);
+
+    return (
+        <Typography.Text>
+            {transform}
+            {transform ? ' of ' : ''}
+            <Typography.Text code>{field}</Typography.Text> {operator} {parameters}
+        </Typography.Text>
+    );
+};

datahub-web-react/src/app/entity/shared/tabs/Dataset/Validations/SqlAssertionDescription.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Typography } from 'antd';
+import { AssertionInfo } from '../../../../../../types.generated';
+
+type Props = {
+    assertionInfo: AssertionInfo;
+};
+
+/**
+ * A human-readable description of a SQL Assertion.
+ */
+export const SqlAssertionDescription = ({ assertionInfo }: Props) => {
+    const { description } = assertionInfo;
+
+    return <Typography.Text>{description}</Typography.Text>;
+};