feat(ui): Supporting rendering custom assertion descriptions (#9722)

Co-authored-by: John Joyce <john@Johns-MBP.attlocal.net>

datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/types/assertion/AssertionMapper.java

@@ -66,6 +66,7 @@ public class AssertionMapper {
           mapDatasetAssertionInfo(gmsAssertionInfo.getDatasetAssertion());
       assertionInfo.setDatasetAssertion(datasetAssertion);
     }
+    assertionInfo.setDescription(gmsAssertionInfo.getDescription());
     return assertionInfo;
   }
 

datahub-graphql-core/src/main/resources/entity.graphql

@@ -6803,6 +6803,11 @@ type AssertionInfo {
     Dataset-specific assertion information
     """
     datasetAssertion: DatasetAssertionInfo
+
+    """
+    An optional human-readable description of the assertion
+    """
+    description: String
 }
 
 """

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

@@ -35,6 +35,8 @@ const getAssertionsStatusSummary = (assertions: Array<Assertion>) => {
 
 /**
  * Component used for rendering the Validations Tab on the Dataset Page.
+ *
+ * TODO: Note that only the legacy DATASET assertions are supported for viewing as of today.
  */
 export const Assertions = () => {
     const { urn, entityData } = useEntityData();
@@ -47,7 +49,9 @@ export const Assertions = () => {
     const assertions =
         (combinedData && combinedData.dataset?.assertions?.assertions?.map((assertion) => assertion as Assertion)) ||
         [];
-    const filteredAssertions = assertions.filter((assertion) => !removedUrns.includes(assertion.urn));
+    const filteredAssertions = assertions.filter(
+        (assertion) => !removedUrns.includes(assertion.urn) && !!assertion.info?.datasetAssertion,
+    );
 
     // Pre-sort the list of assertions based on which has been most recently executed.
     assertions.sort(sortAssertions);

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

@@ -19,6 +19,7 @@ const ViewLogicButton = styled(Button)`
 `;
 
 type Props = {
+    description?: string;
     assertionInfo: DatasetAssertionInfo;
 };
 
@@ -319,18 +320,20 @@ const TOOLTIP_MAX_WIDTH = 440;
  *
  * For example, Column 'X' values are in [1, 2, 3]
  */
-export const DatasetAssertionDescription = ({ assertionInfo }: Props) => {
+export const DatasetAssertionDescription = ({ description, assertionInfo }: Props) => {
     const { scope, aggregation, fields, operator, parameters, nativeType, nativeParameters, logic } = assertionInfo;
     const [isLogicVisible, setIsLogicVisible] = useState(false);
     /**
      * Build a description component from a) input (aggregation, inputs) b) the operator text
      */
-    const description = (
+    const descriptionFragment = (
         <>
-            <Typography.Text>
-                {getAggregationText(scope, aggregation, fields)}{' '}
-                {getOperatorText(operator, parameters || undefined, nativeType || undefined)}
-            </Typography.Text>
+            {description || (
+                <Typography.Text>
+                    {getAggregationText(scope, aggregation, fields)}{' '}
+                    {getOperatorText(operator, parameters || undefined, nativeType || undefined)}
+                </Typography.Text>
+            )}
         </>
     );
 
@@ -349,7 +352,7 @@ export const DatasetAssertionDescription = ({ assertionInfo }: Props) => {
                 </>
             }
         >
-            <div>{description}</div>
+            <div>{descriptionFragment}</div>
             {logic && (
                 <div>
                     <ViewLogicButton onClick={() => setIsLogicVisible(true)} type="link">

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

@@ -83,6 +83,7 @@ export const DatasetAssertionsList = ({ assertions, onDelete }: Props) => {
         type: assertion.info?.type,
         platform: assertion.platform,
         datasetAssertionInfo: assertion.info?.datasetAssertion,
+        description: assertion.info?.description,
         lastExecTime: assertion.runEvents?.runEvents?.length && assertion.runEvents.runEvents[0].timestampMillis,
         lastExecResult:
             assertion.runEvents?.runEvents?.length &&
@@ -101,6 +102,7 @@ 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 { description } = record;
                 return (
                     <ResultContainer>
                         <div>
@@ -111,7 +113,10 @@ export const DatasetAssertionsList = ({ assertions, onDelete }: Props) => {
                                 </Tag>
                             </Tooltip>
                         </div>
-                        <DatasetAssertionDescription assertionInfo={record.datasetAssertionInfo} />
+                        <DatasetAssertionDescription
+                            description={description}
+                            assertionInfo={record.datasetAssertionInfo}
+                        />
                     </ResultContainer>
                 );
             },
@@ -146,12 +151,7 @@ export const DatasetAssertionsList = ({ assertions, onDelete }: Props) => {
                     <Button onClick={() => onDeleteAssertion(record.urn)} type="text" shape="circle" danger>
                         <DeleteOutlined />
                     </Button>
-                    <Dropdown
-                        overlay={
-                            <AssertionMenu urn={record.urn}/>
-                        }
-                        trigger={['click']}
-                    >
+                    <Dropdown overlay={<AssertionMenu urn={record.urn} />} trigger={['click']}>
                         <StyledMoreOutlined />
                     </Dropdown>
                 </ActionButtonContainer>

datahub-web-react/src/graphql/assertion.graphql

@@ -46,6 +46,7 @@ fragment assertionDetails on Assertion {
             }
             logic
         }
+        description
     }
 }