From 385f9dcdcb5db022ab79dabc7e2d1d9f112bb904 Mon Sep 17 00:00:00 2001
From: Marijn Valk <marijncv@hotmail.com>
Date: Fri, 8 Nov 2024 19:19:15 +0100
Subject: [PATCH] Render asset check description with the Description component
 (#25765)

## Summary & Motivation

This closes https://github.com/dagster-io/dagster/issues/23829 and makes
the rendering of the `asset_check` description the same as `asset`
description

## How I Tested These Changes

Ran locally with the following definitions file and checked the
description rendering in the asset, asset_check with description, and
asset_check without description:

```
from dagster import Definitions, asset_check, asset

@asset
def my_asset():
    """ A simple asset with a docstring

    And some more text

    """
    return None

@asset_check(asset=my_asset)
def my_asset_check():
    """ Asset check for my_asset

    With a docstring

    With some more text
    """
    return None

@asset_check(asset=my_asset)
def my_asset_check2():
    return None

defs = Definitions(
    assets=[my_asset],
    asset_checks=[my_asset_check, my_asset_check2],
)
```

The result in the UI looks like this:
<img width="653" alt="image"
src="https://github.com/user-attachments/assets/dbf1acb7-f02f-400b-95ed-b034a1055fcc">
---
 .../ui-core/src/assets/asset-checks/AssetChecks.tsx    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecks.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecks.tsx
index 0285b45297b52..61deb84093b17 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecks.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecks.tsx
@@ -272,11 +272,11 @@ export const AssetChecks = ({
               arrowSide="right"
             >
               <Box padding={{top: 12}} flex={{gap: 12, direction: 'column'}}>
-                <Body2>
-                  {selectedCheck.description ?? (
-                    <Caption color={Colors.textLight()}>No description provided</Caption>
-                  )}
-                </Body2>
+                {selectedCheck.description ? (
+                  <Description description={selectedCheck.description} maxHeight={260} />
+                ) : (
+                  <Caption color={Colors.textLight()}>No description provided</Caption>
+                )}
                 {/* {selectedCheck.dependencies?.length ? (
                   <Box flex={{direction: 'row', gap: 6}}>
                     {assetNode.dependencies.map((dep) => {