fix(ui/table): Fix column / ml feature description show more button (#13525)

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

@@ -105,12 +105,10 @@ type Props = {
     onExpanded: (expanded: boolean) => void;
     expanded: boolean;
     description: string;
-    fieldPath?: string;
     original?: string | null;
     onUpdate: (
         description: string,
     ) => Promise<FetchResult<UpdateDatasetMutation, Record<string, any>, Record<string, any>> | void>;
-    handleShowMore?: (_: string) => void;
     isEdited?: boolean;
     isReadOnly?: boolean;
     isPropagated?: boolean;
@@ -121,9 +119,7 @@ export default function DescriptionField({
     expanded,
     onExpanded: handleExpanded,
     description,
-    fieldPath,
     onUpdate,
-    handleShowMore,
     isEdited = false,
     original,
     isReadOnly,
@@ -217,7 +213,6 @@ export default function DescriptionField({
                             <CompactMarkdownViewer
                                 content={description}
                                 lineLimit={1}
-                                handleShowMore={() => handleShowMore && handleShowMore(fieldPath || '')}
                                 fixedLineHeight
                                 customStyle={{ fontSize: '12px' }}
                                 scrollableY={false}

datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/AboutSection/DescriptionSection.tsx

@@ -16,17 +16,12 @@ interface Props {
     description: string;
     isExpandable?: boolean;
     lineLimit?: number;
-    isShowMoreEnabled?: boolean;
 }
 
-export default function DescriptionSection({ description, isExpandable, lineLimit, isShowMoreEnabled }: Props) {
+export default function DescriptionSection({ description, isExpandable, lineLimit }: Props) {
     return (
         <ContentWrapper>
-            <CompactMarkdownViewer
-                lineLimit={isExpandable ? lineLimit : null}
-                content={description}
-                isShowMoreEnabled={isShowMoreEnabled}
-            />
+            <CompactMarkdownViewer lineLimit={isExpandable ? lineLimit : null} content={description} />
         </ContentWrapper>
     );
 }

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Schema/SchemaTable.tsx

@@ -116,17 +116,23 @@ const TableContainer = styled.div<{ isSearchActive: boolean; hasRowWithDepth: bo
     }
 
     // this makes the table fill up height of parent
+
     .ant-spin-nested-loading {
         height: 100%;
+
         .ant-spin-container {
             height: 100%;
+
             .ant-table {
                 height: 100%;
+
                 .ant-table-container {
                     height: 100%;
+
                     .ant-table-body {
                         height: 100%;
                     }
+
                     .ant-table-body > div:first-child {
                         height: 100%;
                     }
@@ -182,17 +188,7 @@ export default function SchemaTable({
 
     const schemaFields = schemaMetadata ? schemaMetadata.fields : inputFields;
 
-    const [rowDescriptionExpanded, setRowDescriptionExpanded] = useState<{
-        [_: string]: boolean;
-    }>({});
-
-    const handleShowMore = (field) => {
-        setRowDescriptionExpanded({ [field]: true });
-    };
-
-    const descriptionRender = useDescriptionRenderer(editableSchemaMetadata, false, {
-        handleShowMore,
-    });
+    const descriptionRender = useDescriptionRenderer(editableSchemaMetadata, false);
     const usageStatsRenderer = useUsageStatsRenderer(usageStats, expandedDrawerFieldPath);
     const tagRenderer = useTagsAndTermsRenderer(
         editableSchemaMetadata,
@@ -523,9 +519,6 @@ export default function SchemaTable({
                     usageStats={usageStats}
                     displayedRows={schemaSorter ? sortedDisplayedRows : displayedRows}
                     refetch={refetch}
-                    isShowMoreEnabled={
-                        (schemaFieldDrawerFieldPath && rowDescriptionExpanded[schemaFieldDrawerFieldPath]) || false
-                    }
                 />
             )}
         </>

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/AboutFieldTab.tsx

@@ -31,7 +31,6 @@ interface AboutFieldTabProps {
         profiles: any[];
         notes: Post[];
         setSelectedTabName: any;
-        isShowMoreEnabled?: boolean;
         refetch?: () => void;
         refetchNotes?: () => void;
     };
@@ -78,11 +77,7 @@ export function AboutFieldTab({ properties }: AboutFieldTabProps) {
                             refetch={delayedRefetchNotes}
                         />
                         {!!notes?.length && <StyledDivider dashed />}
-                        <FieldDescription
-                            expandedField={expandedField}
-                            editableFieldInfo={editableFieldInfo}
-                            isShowMoreEnabled={properties.isShowMoreEnabled}
-                        />
+                        <FieldDescription expandedField={expandedField} editableFieldInfo={editableFieldInfo} />
                         <FieldTags
                             expandedField={expandedField}
                             editableSchemaMetadata={properties.editableSchemaMetadata}

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldDescription.tsx

@@ -57,10 +57,9 @@ const DescriptionWrapper = styled.div`
 interface Props {
     expandedField: SchemaField;
     editableFieldInfo?: EditableSchemaFieldInfo;
-    isShowMoreEnabled?: boolean;
 }
 
-export default function FieldDescription({ expandedField, editableFieldInfo, isShowMoreEnabled }: Props) {
+export default function FieldDescription({ expandedField, editableFieldInfo }: Props) {
     const isSchemaEditable = React.useContext(SchemaEditableContext);
     const urn = useMutationUrn();
     const refetch = useRefetch();
@@ -150,11 +149,7 @@ export default function FieldDescription({ expandedField, editableFieldInfo, isS
                         <DescriptionWrapper>
                             {isPropagated && <DocumentationPropagationDetails sourceDetail={sourceDetail} />}
                             {!!displayedDescription && (
-                                <DescriptionSection
-                                    description={displayedDescription}
-                                    isShowMoreEnabled={isShowMoreEnabled}
-                                    isExpandable
-                                />
+                                <DescriptionSection description={displayedDescription} isExpandable />
                             )}
                         </DescriptionWrapper>
                     </>

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/SchemaFieldDrawer.tsx

@@ -86,7 +86,6 @@ interface Props {
     displayedRows: ExtendedSchemaFields[];
     refetch?: () => void;
     mask?: boolean;
-    isShowMoreEnabled?: boolean;
     defaultSelectedTabName?: string;
 }
 
@@ -103,7 +102,6 @@ export default function SchemaFieldDrawer({
     displayedRows,
     refetch,
     mask = false,
-    isShowMoreEnabled,
     defaultSelectedTabName = 'About',
 }: Props) {
     const expandedFieldIndex = useMemo(
@@ -193,7 +191,6 @@ export default function SchemaFieldDrawer({
                 fieldProfile,
                 profiles,
                 notes,
-                isShowMoreEnabled,
                 setSelectedTabName,
                 refetch,
                 refetchNotes,

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

@@ -14,9 +14,6 @@ import { EditableSchemaMetadata, SchemaField, SubResourceType } from '@types';
 export default function useDescriptionRenderer(
     editableSchemaMetadata: EditableSchemaMetadata | null | undefined,
     isCompact: boolean,
-    options?: {
-        handleShowMore?: (_: string) => void;
-    },
 ) {
     const urn = useMutationUrn();
     const refetch = useRefetch();
@@ -34,7 +31,6 @@ export default function useDescriptionRenderer(
         const editableFieldInfo = editableSchemaMetadata?.editableSchemaFieldInfo?.find((candidateEditableFieldInfo) =>
             pathMatchesExact(candidateEditableFieldInfo.fieldPath, record.fieldPath),
         );
-        const { schemaFieldEntity } = record;
         const { displayedDescription, sanitizedDescription, isPropagated, sourceDetail } = extractFieldDescription(
             record,
             description,
@@ -51,7 +47,6 @@ export default function useDescriptionRenderer(
             <DescriptionField
                 onExpanded={handleExpandedRows}
                 expanded={!!expandedRows[index]}
-                fieldPath={schemaFieldEntity?.fieldPath}
                 description={sanitizedDescription}
                 original={original}
                 isEdited={!!editableFieldInfo?.description}
@@ -67,7 +62,6 @@ export default function useDescriptionRenderer(
                         },
                     }).then(refresh)
                 }
-                handleShowMore={options?.handleShowMore}
                 isReadOnly
                 isPropagated={isPropagated}
                 sourceDetail={sourceDetail}

datahub-web-react/src/app/entityV2/shared/tabs/Documentation/components/CompactMarkdownViewer.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 
 import { Editor } from '@app/entityV2/shared/tabs/Documentation/components/editor/Editor';
@@ -8,6 +8,7 @@ const LINE_HEIGHT = 1.5;
 
 const ShowMoreWrapper = styled.div`
     align-items: start;
+    justify-content: center;
     display: flex;
     flex-direction: column;
 `;
@@ -22,11 +23,6 @@ const MarkdownContainer = styled.div<{ lineLimit?: number | null }>`
         display: flex;
         align-items: center;
         gap: 4px;
-        ${ShowMoreWrapper}{
-            flex-direction: row;
-            align-items: center;
-            gap: 4px;
-        }
     `}
 `;
 
@@ -96,7 +92,6 @@ export type Props = {
     content: string;
     lineLimit?: number | null;
     fixedLineHeight?: boolean;
-    isShowMoreEnabled?: boolean;
     customStyle?: React.CSSProperties;
     scrollableY?: boolean; // Whether the viewer is vertically scrollable.
     handleShowMore?: () => void;
@@ -107,7 +102,6 @@ export default function CompactMarkdownViewer({
     content,
     lineLimit = 4,
     fixedLineHeight = false,
-    isShowMoreEnabled = false,
     customStyle = {},
     scrollableY = true,
     handleShowMore,
@@ -116,15 +110,6 @@ export default function CompactMarkdownViewer({
     const [isShowingMore, setIsShowingMore] = useState(false);
     const [isTruncated, setIsTruncated] = useState(false);
 
-    useEffect(() => {
-        if (isShowMoreEnabled) {
-            setIsShowingMore(isShowMoreEnabled);
-        }
-        return () => {
-            setIsShowingMore(false);
-        };
-    }, [isShowMoreEnabled]);
-
     const measuredRef = useCallback((node: HTMLDivElement | null) => {
         if (node !== null) {
             const resizeObserver = new ResizeObserver(() => {
@@ -153,6 +138,7 @@ export default function CompactMarkdownViewer({
                     <ShowMoreWrapper>
                         <CustomButton
                             variant="text"
+                            size={lineLimit && lineLimit <= 1 ? 'sm' : undefined}
                             onClick={(e) => {
                                 if (handleShowMore) {
                                     handleShowMore();