fix(ui): SchemaDescriptionField 'read-more' doesn't affect table height (#7970)

datahub-web-react/src/app/entity/dataset/profile/__tests__/SchemaDescriptionField.test.tsx

@@ -10,7 +10,13 @@ describe('SchemaDescriptionField', () => {
         const { getByText, getByRole, queryByText } = render(
             <MockedProvider mocks={mocks} addTypename={false}>
                 <TestPageContainer>
-                    <SchemaDescriptionField description="test description updated" isEdited onUpdate={async () => {}} />
+                    <SchemaDescriptionField
+                        expanded
+                        onExpanded={() => {}}
+                        description="test description updated"
+                        isEdited
+                        onUpdate={async () => {}}
+                    />{' '}
                 </TestPageContainer>
             </MockedProvider>,
         );
@@ -24,6 +30,8 @@ describe('SchemaDescriptionField', () => {
             <MockedProvider mocks={mocks} addTypename={false}>
                 <TestPageContainer>
                     <SchemaDescriptionField
+                        expanded
+                        onExpanded={() => {}}
                         description="test description"
                         original="test description"
                         isEdited
@@ -44,42 +52,51 @@ describe('SchemaDescriptionField', () => {
 
     it('renders short messages without show more / show less', () => {
         const { getByText, queryByText } = render(
-            <SchemaDescriptionField description="short description" onUpdate={() => Promise.resolve()} />,
+            <SchemaDescriptionField
+                expanded
+                onExpanded={() => {}}
+                description="short description"
+                onUpdate={() => Promise.resolve()}
+            />,
         );
         expect(getByText('short description')).toBeInTheDocument();
         expect(queryByText('Read Less')).not.toBeInTheDocument();
         expect(queryByText('Read More')).not.toBeInTheDocument();
     });
 
-    it('renders longer messages with show more / show less', () => {
+    describe('renders longer messages with show more / show less', () => {
         const longDescription =
             'really long description over 80 characters, really long description over 80 characters, really long description over 80 characters, really long description over 80 characters, really long description over 80 characters';
-        const { getByText, queryByText } = render(
-            <SchemaDescriptionField description={longDescription} onUpdate={() => Promise.resolve()} />,
-        );
-        expect(getByText('Read More')).toBeInTheDocument();
-        expect(queryByText(longDescription)).not.toBeInTheDocument();
+        it('renders longer messages with show more when not expanded', () => {
+            const onClick = jest.fn();
+            const { getByText, queryByText } = render(
+                <SchemaDescriptionField
+                    expanded={false}
+                    onExpanded={onClick}
+                    description={longDescription}
+                    onUpdate={() => Promise.resolve()}
+                />,
+            );
+            expect(getByText('Read More')).toBeInTheDocument();
+            expect(queryByText(longDescription)).not.toBeInTheDocument();
+            fireEvent.click(getByText('Read More'));
+            expect(onClick).toHaveBeenCalled();
+        });
 
-        fireEvent(
-            getByText('Read More'),
-            new MouseEvent('click', {
-                bubbles: true,
-                cancelable: true,
-            }),
-        );
-
-        expect(getByText(longDescription)).toBeInTheDocument();
-        expect(getByText('Read Less')).toBeInTheDocument();
-
-        fireEvent(
-            getByText('Read Less'),
-            new MouseEvent('click', {
-                bubbles: true,
-                cancelable: true,
-            }),
-        );
-
-        expect(getByText('Read More')).toBeInTheDocument();
-        expect(queryByText(longDescription)).not.toBeInTheDocument();
+        it('renders longer messages with show less when expanded', () => {
+            const onClick = jest.fn();
+            const { getByText } = render(
+                <SchemaDescriptionField
+                    expanded
+                    onExpanded={onClick}
+                    description={longDescription}
+                    onUpdate={() => Promise.resolve()}
+                />,
+            );
+            expect(getByText(longDescription)).toBeInTheDocument();
+            expect(getByText('Read Less')).toBeInTheDocument();
+            fireEvent.click(getByText('Read Less'));
+            expect(onClick).toHaveBeenCalled();
+        });
     });
 });

datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaDescriptionField.tsx

@@ -78,6 +78,8 @@ const StyledViewer = styled(Editor)`
 `;
 
 type Props = {
+    onExpanded: (expanded: boolean) => void;
+    expanded: boolean;
     description: string;
     original?: string | null;
     onUpdate: (
@@ -88,10 +90,16 @@ type Props = {
 
 const ABBREVIATED_LIMIT = 80;
 
-export default function DescriptionField({ description, onUpdate, isEdited = false, original }: Props) {
+export default function DescriptionField({
+    expanded,
+    onExpanded: handleExpanded,
+    description,
+    onUpdate,
+    isEdited = false,
+    original,
+}: Props) {
     const [showAddModal, setShowAddModal] = useState(false);
     const overLimit = removeMarkdown(description).length > 80;
-    const [expanded, setExpanded] = useState(!overLimit);
     const isSchemaEditable = React.useContext(SchemaEditableContext);
     const onCloseModal = () => setShowAddModal(false);
     const { urn, entityType } = useEntityData();
@@ -129,7 +137,7 @@ export default function DescriptionField({ description, onUpdate, isEdited = fal
 
     return (
         <DescriptionContainer>
-            {expanded ? (
+            {expanded || !overLimit ? (
                 <>
                     {!!description && <StyledViewer content={description} readOnly />}
                     {!!description && (
@@ -137,7 +145,7 @@ export default function DescriptionField({ description, onUpdate, isEdited = fal
                             {overLimit && (
                                 <ReadLessText
                                     onClick={() => {
-                                        setExpanded(false);
+                                        handleExpanded(false);
                                     }}
                                 >
                                     Read Less
@@ -155,7 +163,7 @@ export default function DescriptionField({ description, onUpdate, isEdited = fal
                             <>
                                 <Typography.Link
                                     onClick={() => {
-                                        setExpanded(true);
+                                        handleExpanded(true);
                                     }}
                                 >
                                     Read More

datahub-web-react/src/app/entity/mlFeatureTable/profile/features/TableOfMlFeatures.tsx

@@ -40,6 +40,7 @@ export default function TableOfMlFeatures({ features }: Props) {
     const entityRegistry = useEntityRegistry();
 
     const [tagHoveredIndex, setTagHoveredIndex] = useState<string | undefined>(undefined);
+    const [expandedRows, setExpandedRows] = useState({});
 
     const onTagTermCell = (record: any, rowIndex: number | undefined) => ({
         onMouseEnter: () => {
@@ -66,8 +67,12 @@ export default function TableOfMlFeatures({ features }: Props) {
         title: 'Description',
         dataIndex: 'description',
         key: 'description',
-        render: (_, feature: MlFeature | MlPrimaryKey) => (
+        render: (_, feature: MlFeature | MlPrimaryKey, index: number) => (
             <SchemaDescriptionField
+                onExpanded={(expanded) => {
+                    setExpandedRows((prev) => ({ ...prev, [index]: expanded }));
+                }}
+                expanded={!!expandedRows[index]}
                 description={feature?.editableProperties?.description || feature?.properties?.description || ''}
                 original={feature?.properties?.description}
                 isEdited={!!feature?.editableProperties?.description}

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/utils/useDescriptionRenderer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import DOMPurify from 'dompurify';
 import { EditableSchemaMetadata, SchemaField, SubResourceType } from '../../../../../../../types.generated';
 import DescriptionField from '../../../../../dataset/profile/schema/components/SchemaDescriptionField';
@@ -12,13 +12,14 @@ export default function useDescriptionRenderer(editableSchemaMetadata: EditableS
     const refetch = useRefetch();
     const schemaRefetch = useSchemaRefetch();
     const [updateDescription] = useUpdateDescriptionMutation();
+    const [expandedRows, setExpandedRows] = useState({});
 
     const refresh: any = () => {
         refetch?.();
         schemaRefetch?.();
     };
 
-    return (description: string, record: SchemaField): JSX.Element => {
+    return (description: string, record: SchemaField, index: number): JSX.Element => {
         const relevantEditableFieldInfo = editableSchemaMetadata?.editableSchemaFieldInfo.find(
             (candidateEditableFieldInfo) => pathMatchesNewPath(candidateEditableFieldInfo.fieldPath, record.fieldPath),
         );
@@ -26,8 +27,12 @@ export default function useDescriptionRenderer(editableSchemaMetadata: EditableS
         const sanitizedDescription = DOMPurify.sanitize(displayedDescription);
         const original = record.description ? DOMPurify.sanitize(record.description) : undefined;
 
+        const handleExpandedRows = (expanded) => setExpandedRows((prev) => ({ ...prev, [index]: expanded }));
+
         return (
             <DescriptionField
+                onExpanded={handleExpandedRows}
+                expanded={!!expandedRows[index]}
                 description={sanitizedDescription}
                 original={original}
                 isEdited={!!relevantEditableFieldInfo?.description}
@@ -47,3 +52,4 @@ export default function useDescriptionRenderer(editableSchemaMetadata: EditableS
         );
     };
 }
+//