Skip to content

Commit d98ebd3

Browse files
jfrancos-maijfrancos-mai
authored
fix(ui): SchemaDescriptionField 'read-more' doesn't affect table height (#7970)
1 parent 530b9a6 commit d98ebd3

File tree

4 files changed

+73
-37
lines changed

4 files changed

+73
-37
lines changed

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

Lines changed: 46 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,13 @@ describe('SchemaDescriptionField', () => {
1010
const { getByText, getByRole, queryByText } = render(
1111
<MockedProvider mocks={mocks} addTypename={false}>
1212
<TestPageContainer>
13-
<SchemaDescriptionField description="test description updated" isEdited onUpdate={async () => {}} />
13+
<SchemaDescriptionField
14+
expanded
15+
onExpanded={() => {}}
16+
description="test description updated"
17+
isEdited
18+
onUpdate={async () => {}}
19+
/>{' '}
1420
</TestPageContainer>
1521
</MockedProvider>,
1622
);
@@ -24,6 +30,8 @@ describe('SchemaDescriptionField', () => {
2430
<MockedProvider mocks={mocks} addTypename={false}>
2531
<TestPageContainer>
2632
<SchemaDescriptionField
33+
expanded
34+
onExpanded={() => {}}
2735
description="test description"
2836
original="test description"
2937
isEdited
@@ -44,42 +52,51 @@ describe('SchemaDescriptionField', () => {
4452

4553
it('renders short messages without show more / show less', () => {
4654
const { getByText, queryByText } = render(
47-
<SchemaDescriptionField description="short description" onUpdate={() => Promise.resolve()} />,
55+
<SchemaDescriptionField
56+
expanded
57+
onExpanded={() => {}}
58+
description="short description"
59+
onUpdate={() => Promise.resolve()}
60+
/>,
4861
);
4962
expect(getByText('short description')).toBeInTheDocument();
5063
expect(queryByText('Read Less')).not.toBeInTheDocument();
5164
expect(queryByText('Read More')).not.toBeInTheDocument();
5265
});
5366

54-
it('renders longer messages with show more / show less', () => {
67+
describe('renders longer messages with show more / show less', () => {
5568
const longDescription =
5669
'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';
57-
const { getByText, queryByText } = render(
58-
<SchemaDescriptionField description={longDescription} onUpdate={() => Promise.resolve()} />,
59-
);
60-
expect(getByText('Read More')).toBeInTheDocument();
61-
expect(queryByText(longDescription)).not.toBeInTheDocument();
62-
63-
fireEvent(
64-
getByText('Read More'),
65-
new MouseEvent('click', {
66-
bubbles: true,
67-
cancelable: true,
68-
}),
69-
);
70-
71-
expect(getByText(longDescription)).toBeInTheDocument();
72-
expect(getByText('Read Less')).toBeInTheDocument();
73-
74-
fireEvent(
75-
getByText('Read Less'),
76-
new MouseEvent('click', {
77-
bubbles: true,
78-
cancelable: true,
79-
}),
80-
);
70+
it('renders longer messages with show more when not expanded', () => {
71+
const onClick = jest.fn();
72+
const { getByText, queryByText } = render(
73+
<SchemaDescriptionField
74+
expanded={false}
75+
onExpanded={onClick}
76+
description={longDescription}
77+
onUpdate={() => Promise.resolve()}
78+
/>,
79+
);
80+
expect(getByText('Read More')).toBeInTheDocument();
81+
expect(queryByText(longDescription)).not.toBeInTheDocument();
82+
fireEvent.click(getByText('Read More'));
83+
expect(onClick).toHaveBeenCalled();
84+
});
8185

82-
expect(getByText('Read More')).toBeInTheDocument();
83-
expect(queryByText(longDescription)).not.toBeInTheDocument();
86+
it('renders longer messages with show less when expanded', () => {
87+
const onClick = jest.fn();
88+
const { getByText } = render(
89+
<SchemaDescriptionField
90+
expanded
91+
onExpanded={onClick}
92+
description={longDescription}
93+
onUpdate={() => Promise.resolve()}
94+
/>,
95+
);
96+
expect(getByText(longDescription)).toBeInTheDocument();
97+
expect(getByText('Read Less')).toBeInTheDocument();
98+
fireEvent.click(getByText('Read Less'));
99+
expect(onClick).toHaveBeenCalled();
100+
});
84101
});
85102
});

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,8 @@ const StyledViewer = styled(Editor)`
7878
`;
7979

8080
type Props = {
81+
onExpanded: (expanded: boolean) => void;
82+
expanded: boolean;
8183
description: string;
8284
original?: string | null;
8385
onUpdate: (
@@ -88,10 +90,16 @@ type Props = {
8890

8991
const ABBREVIATED_LIMIT = 80;
9092

91-
export default function DescriptionField({ description, onUpdate, isEdited = false, original }: Props) {
93+
export default function DescriptionField({
94+
expanded,
95+
onExpanded: handleExpanded,
96+
description,
97+
onUpdate,
98+
isEdited = false,
99+
original,
100+
}: Props) {
92101
const [showAddModal, setShowAddModal] = useState(false);
93102
const overLimit = removeMarkdown(description).length > 80;
94-
const [expanded, setExpanded] = useState(!overLimit);
95103
const isSchemaEditable = React.useContext(SchemaEditableContext);
96104
const onCloseModal = () => setShowAddModal(false);
97105
const { urn, entityType } = useEntityData();
@@ -129,15 +137,15 @@ export default function DescriptionField({ description, onUpdate, isEdited = fal
129137

130138
return (
131139
<DescriptionContainer>
132-
{expanded ? (
140+
{expanded || !overLimit ? (
133141
<>
134142
{!!description && <StyledViewer content={description} readOnly />}
135143
{!!description && (
136144
<ExpandedActions>
137145
{overLimit && (
138146
<ReadLessText
139147
onClick={() => {
140-
setExpanded(false);
148+
handleExpanded(false);
141149
}}
142150
>
143151
Read Less
@@ -155,7 +163,7 @@ export default function DescriptionField({ description, onUpdate, isEdited = fal
155163
<>
156164
<Typography.Link
157165
onClick={() => {
158-
setExpanded(true);
166+
handleExpanded(true);
159167
}}
160168
>
161169
Read More

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export default function TableOfMlFeatures({ features }: Props) {
4040
const entityRegistry = useEntityRegistry();
4141

4242
const [tagHoveredIndex, setTagHoveredIndex] = useState<string | undefined>(undefined);
43+
const [expandedRows, setExpandedRows] = useState({});
4344

4445
const onTagTermCell = (record: any, rowIndex: number | undefined) => ({
4546
onMouseEnter: () => {
@@ -66,8 +67,12 @@ export default function TableOfMlFeatures({ features }: Props) {
6667
title: 'Description',
6768
dataIndex: 'description',
6869
key: 'description',
69-
render: (_, feature: MlFeature | MlPrimaryKey) => (
70+
render: (_, feature: MlFeature | MlPrimaryKey, index: number) => (
7071
<SchemaDescriptionField
72+
onExpanded={(expanded) => {
73+
setExpandedRows((prev) => ({ ...prev, [index]: expanded }));
74+
}}
75+
expanded={!!expandedRows[index]}
7176
description={feature?.editableProperties?.description || feature?.properties?.description || ''}
7277
original={feature?.properties?.description}
7378
isEdited={!!feature?.editableProperties?.description}

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import DOMPurify from 'dompurify';
33
import { EditableSchemaMetadata, SchemaField, SubResourceType } from '../../../../../../../types.generated';
44
import DescriptionField from '../../../../../dataset/profile/schema/components/SchemaDescriptionField';
@@ -12,22 +12,27 @@ export default function useDescriptionRenderer(editableSchemaMetadata: EditableS
1212
const refetch = useRefetch();
1313
const schemaRefetch = useSchemaRefetch();
1414
const [updateDescription] = useUpdateDescriptionMutation();
15+
const [expandedRows, setExpandedRows] = useState({});
1516

1617
const refresh: any = () => {
1718
refetch?.();
1819
schemaRefetch?.();
1920
};
2021

21-
return (description: string, record: SchemaField): JSX.Element => {
22+
return (description: string, record: SchemaField, index: number): JSX.Element => {
2223
const relevantEditableFieldInfo = editableSchemaMetadata?.editableSchemaFieldInfo.find(
2324
(candidateEditableFieldInfo) => pathMatchesNewPath(candidateEditableFieldInfo.fieldPath, record.fieldPath),
2425
);
2526
const displayedDescription = relevantEditableFieldInfo?.description || description;
2627
const sanitizedDescription = DOMPurify.sanitize(displayedDescription);
2728
const original = record.description ? DOMPurify.sanitize(record.description) : undefined;
2829

30+
const handleExpandedRows = (expanded) => setExpandedRows((prev) => ({ ...prev, [index]: expanded }));
31+
2932
return (
3033
<DescriptionField
34+
onExpanded={handleExpandedRows}
35+
expanded={!!expandedRows[index]}
3136
description={sanitizedDescription}
3237
original={original}
3338
isEdited={!!relevantEditableFieldInfo?.description}
@@ -47,3 +52,4 @@ export default function useDescriptionRenderer(editableSchemaMetadata: EditableS
4752
);
4853
};
4954
}
55+
//

0 commit comments

Comments
 (0)