fix(ui): Improve Model/Model Group description handling (truncate + editableProperties) (#14595)

Author: yoonhyejin

datahub-web-react/src/app/entityV2/mlModel/profile/MLModelGroupsTab.tsx

@@ -1,7 +1,7 @@
 import { Space, Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import Link from 'antd/lib/typography/Link';
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { useBaseEntity } from '@app/entity/shared/EntityContext';
@@ -14,11 +14,18 @@ const TabContent = styled.div`
     padding: 16px;
 `;
 
+const TruncatedDescription = styled.div<{ isExpanded: boolean }>`
+    display: -webkit-box;
+    -webkit-line-clamp: ${({ isExpanded }) => (isExpanded ? 'unset' : '3')};
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+`;
+
 export default function MLModelGroupsTab() {
     const baseEntity = useBaseEntity<GetMlModelQuery>();
     const model = baseEntity?.mlModel;
-
     const entityRegistry = useEntityRegistry();
+    const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
 
     const propertyTableColumns: ColumnsType<MlModelGroup> = [
         {
@@ -35,6 +42,37 @@ export default function MLModelGroupsTab() {
         {
             title: 'Description',
             dataIndex: 'description',
+            render: (_, record) => {
+                const editableDesc = record.editableProperties?.description;
+                const originalDesc = record.description;
+                const description = editableDesc || originalDesc;
+
+                if (!description) return '-';
+
+                const isExpanded = expandedRows.has(record.urn);
+                const isLong = description.length > 150;
+
+                if (!isLong) return description;
+
+                return (
+                    <>
+                        <TruncatedDescription isExpanded={isExpanded}>{description}</TruncatedDescription>
+                        <Typography.Link
+                            onClick={() => {
+                                const newExpanded = new Set(expandedRows);
+                                if (isExpanded) {
+                                    newExpanded.delete(record.urn);
+                                } else {
+                                    newExpanded.add(record.urn);
+                                }
+                                setExpandedRows(newExpanded);
+                            }}
+                        >
+                            {isExpanded ? 'Show less' : 'Read more'}
+                        </Typography.Link>
+                    </>
+                );
+            },
         },
     ];
 

datahub-web-react/src/app/entityV2/mlModelGroup/profile/ModelGroupModels.tsx

@@ -1,5 +1,5 @@
 import { Table, Typography } from 'antd';
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { useBaseEntity } from '@app/entity/shared/EntityContext';
@@ -67,10 +67,18 @@ const VersionContainer = styled.div`
     align-items: center;
 `;
 
+const TruncatedDescription = styled.div<{ isExpanded: boolean }>`
+    display: -webkit-box;
+    -webkit-line-clamp: ${({ isExpanded }) => (isExpanded ? 'unset' : '3')};
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+`;
+
 export default function MLGroupModels() {
     const baseEntity = useBaseEntity<GetMlModelGroupQuery>();
     const entityRegistry = useEntityRegistry();
     const modelGroup = baseEntity?.mlModelGroup;
+    const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
 
     const models =
         baseEntity?.mlModelGroup?.incoming?.relationships
@@ -149,8 +157,33 @@ export default function MLGroupModels() {
             render: (_: any, record: any) => {
                 const editableDesc = record.editableProperties?.description;
                 const originalDesc = record.description;
+                const description = editableDesc || originalDesc;
+
+                if (!description) return '-';
+
+                const isExpanded = expandedRows.has(record.urn);
+                const isLong = description.length > 150;
 
-                return <Typography.Text>{editableDesc || originalDesc || '-'}</Typography.Text>;
+                if (!isLong) return <Typography.Text>{description}</Typography.Text>;
+
+                return (
+                    <>
+                        <TruncatedDescription isExpanded={isExpanded}>{description}</TruncatedDescription>
+                        <Typography.Link
+                            onClick={() => {
+                                const newExpanded = new Set(expandedRows);
+                                if (isExpanded) {
+                                    newExpanded.delete(record.urn);
+                                } else {
+                                    newExpanded.add(record.urn);
+                                }
+                                setExpandedRows(newExpanded);
+                            }}
+                        >
+                            {isExpanded ? 'Show less' : 'Read more'}
+                        </Typography.Link>
+                    </>
+                );
             },
         },
     ];

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

@@ -1105,6 +1105,9 @@ fragment nonRecursiveMLModel on MLModel {
             properties {
                 name
             }
+            editableProperties {
+                description
+            }
         }
         customProperties {
             key