WIP: Fix #12980: Expand description issue (#15778)

openmetadata-ui/src/main/resources/ui/src/components/Classifications/ClassificationDetails/ClassificationDetails.tsx

@@ -16,7 +16,7 @@ import ButtonGroup from 'antd/lib/button/button-group';
 import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
-import { capitalize, isUndefined, toString } from 'lodash';
+import { capitalize, isEmpty, isUndefined, toString } from 'lodash';
 import React, {
   forwardRef,
   useCallback,
@@ -93,7 +93,6 @@ const ClassificationDetails = forwardRef(
     const history = useHistory();
     const [tags, setTags] = useState<Tag[]>([]);
     const [isTagsLoading, setIsTagsLoading] = useState(false);
-
     const {
       currentPage,
       paging,
@@ -478,7 +477,6 @@ const ClassificationDetails = forwardRef(
             </Col>
           </Row>
         )}
-
         <div className="m-b-sm m-t-xs" data-testid="description-container">
           <DescriptionV1
             className={classNames({
@@ -488,6 +486,7 @@ const ClassificationDetails = forwardRef(
             entityName={getEntityName(currentClassification)}
             entityType={EntityType.CLASSIFICATION}
             hasEditAccess={editDescriptionPermission}
+            isDescriptionExpanded={isEmpty(tags)}
             isEdit={isEditClassification}
             showCommentsIcon={false}
             onCancel={handleCancelEditDescription}

openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DashboardDetails/DashboardDetails.component.tsx

@@ -558,6 +558,7 @@ const DashboardDetails = ({
       hasEditTagAccess,
       handleUpdateChart,
       handleChartTagSelection,
+      charts,
     ]
   );
 
@@ -607,6 +608,7 @@ const DashboardDetails = ({
                   entityName={entityName}
                   entityType={EntityType.DASHBOARD}
                   hasEditAccess={editDescriptionPermission}
+                  isDescriptionExpanded={isEmpty(charts)}
                   isEdit={isEdit}
                   owner={dashboardDetails.owner}
                   showActions={!deleted}

openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DataModel/DataModels/DataModelDetails.component.tsx

@@ -13,7 +13,7 @@
 
 import { Card, Col, Row, Tabs } from 'antd';
 import { AxiosError } from 'axios';
-import { isUndefined, toString } from 'lodash';
+import { isEmpty, isUndefined, toString } from 'lodash';
 import { EntityTags } from 'Models';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -220,6 +220,7 @@ const DataModelDetails = ({
               entityName={entityName}
               entityType={EntityType.DASHBOARD_DATA_MODEL}
               hasEditAccess={editDescriptionPermission}
+              isDescriptionExpanded={isEmpty(dataModelData.columns)}
               isEdit={isEditDescription}
               owner={owner}
               showActions={!deleted}

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryDetails/GlossaryDetails.component.tsx

@@ -12,7 +12,7 @@
  */
 
 import { Col, Row, Space, Tabs } from 'antd';
-import { noop } from 'lodash';
+import { isEmpty, noop } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
@@ -152,6 +152,7 @@ const GlossaryDetails = ({
               entityName={getEntityName(glossary)}
               entityType={EntityType.GLOSSARY}
               hasEditAccess={permissions.EditDescription || permissions.EditAll}
+              isDescriptionExpanded={isEmpty(glossaryTerms)}
               isEdit={isDescriptionEditable}
               owner={glossary?.owner}
               showActions={!glossary.deleted}

openmetadata-ui/src/main/resources/ui/src/components/MlModel/MlModelDetail/MlModelDetail.component.tsx

@@ -404,6 +404,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
                   entityName={mlModelName}
                   entityType={EntityType.MLMODEL}
                   hasEditAccess={editDescriptionPermission}
+                  isDescriptionExpanded={isEmpty(mlModelDetail.mlFeatures)}
                   isEdit={isEdit}
                   owner={mlModelDetail.owner}
                   showActions={!deleted}

openmetadata-ui/src/main/resources/ui/src/components/Pipeline/PipelineDetails/PipelineDetails.component.tsx

@@ -582,6 +582,7 @@ const PipelineDetails = ({
                     entityName={entityName}
                     entityType={EntityType.PIPELINE}
                     hasEditAccess={editDescriptionPermission}
+                    isDescriptionExpanded={isEmpty(tasksInternal)}
                     isEdit={isEdit}
                     owner={owner}
                     showActions={!deleted}

openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicDetails/TopicDetails.component.tsx

@@ -13,6 +13,7 @@
 
 import { Col, Row, Tabs } from 'antd';
 import { AxiosError } from 'axios';
+import { isEmpty } from 'lodash';
 import { EntityTags } from 'Models';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -313,6 +314,9 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
                   entityName={entityName}
                   entityType={EntityType.TOPIC}
                   hasEditAccess={editDescriptionPermission}
+                  isDescriptionExpanded={isEmpty(
+                    topicDetails.messageSchema?.schemaFields
+                  )}
                   isEdit={isEdit}
                   owner={topicDetails.owner}
                   showActions={!deleted}

openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/Description.interface.ts

@@ -36,4 +36,5 @@ export interface DescriptionProps {
   reduceDescription?: boolean;
   className?: string;
   showSuggestions?: boolean;
+  isDescriptionExpanded?: boolean;
 }

openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/DescriptionV1.tsx

@@ -57,6 +57,7 @@ const DescriptionV1 = ({
   showCommentsIcon = true,
   reduceDescription,
   showSuggestions = false,
+  isDescriptionExpanded,
 }: DescriptionProps) => {
   const history = useHistory();
   const { suggestions = [], selectedUserSuggestions = [] } =
@@ -191,13 +192,14 @@ const DescriptionV1 = ({
         <RichTextEditorPreviewer
           className={reduceDescription ? 'max-two-lines' : ''}
           enableSeeMoreVariant={!removeBlur}
+          isDescriptionExpanded={isDescriptionExpanded}
           markdown={description}
         />
       ) : (
         <span>{t('label.no-description')}</span>
       );
     }
-  }, [description, suggestionData]);
+  }, [description, suggestionData, isDescriptionExpanded]);
 
   const content = (
     <Space

openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditor.interface.ts

@@ -35,6 +35,7 @@ export interface PreviewerProp {
   className?: string;
   enableSeeMoreVariant?: boolean;
   showReadMoreBtn?: boolean;
+  isDescriptionExpanded?: boolean;
   textVariant?: TextVariant;
 }
 

openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditorPreviewer.test.tsx

@@ -38,6 +38,7 @@ const mockProp: PreviewerProp = {
   className: '',
   maxLength: 300,
   enableSeeMoreVariant: true,
+  isDescriptionExpanded: false,
 };
 
 describe('Test RichTextEditor Previewer Component', () => {
@@ -457,4 +458,27 @@ describe('Test RichTextEditor Previewer Component', () => {
 
     expect(screen.getByTestId('code-block-copy-icon')).toBeInTheDocument();
   });
+
+  it('Should render read less button if isDescriptionExpanded is true', async () => {
+    const { container } = render(
+      <RichTextEditorPreviewer {...mockProp} isDescriptionExpanded />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+
+    const readLessButton = await findByTestId(container, 'read-less-button');
+
+    expect(readLessButton).toBeInTheDocument();
+  });
+
+  it('Should render read more button if isDescriptionExpanded is false', async () => {
+    const { container } = render(<RichTextEditorPreviewer {...mockProp} />, {
+      wrapper: MemoryRouter,
+    });
+
+    const readMoreButton = await findByTestId(container, 'read-more-button');
+
+    expect(readMoreButton).toBeInTheDocument();
+  });
 });

openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditorPreviewer.tsx

@@ -31,10 +31,10 @@ const RichTextEditorPreviewer = ({
   textVariant = 'black',
   showReadMoreBtn = true,
   maxLength = DESCRIPTION_MAX_PREVIEW_CHARACTERS,
+  isDescriptionExpanded = false,
 }: PreviewerProp) => {
   const { t, i18n } = useTranslation();
   const [content, setContent] = useState<string>('');
-
   // initially read more will be false
   const [readMore, setReadMore] = useState<boolean>(false);
 
@@ -95,6 +95,10 @@ const RichTextEditorPreviewer = ({
     return () => window.removeEventListener('mousedown', handleMouseDownEvent);
   }, [handleMouseDownEvent]);
 
+  useEffect(() => {
+    setReadMore(Boolean(isDescriptionExpanded));
+  }, [isDescriptionExpanded]);
+
   return (
     <div
       className={classNames('rich-text-editor-container', className, {

openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.tsx

@@ -566,6 +566,7 @@ const ContainerPage = () => {
                   entityName={entityName}
                   entityType={EntityType.CONTAINER}
                   hasEditAccess={editDescriptionPermission}
+                  isDescriptionExpanded={isEmpty(containerChildrenData)}
                   isEdit={isEditDescription}
                   owner={owner}
                   showActions={!deleted}

openmetadata-ui/src/main/resources/ui/src/pages/DatabaseDetailsPage/DatabaseDetailsPage.tsx

@@ -516,6 +516,7 @@ const DatabaseDetails: FunctionComponent = () => {
                     entityName={getEntityName(database)}
                     entityType={EntityType.DATABASE}
                     hasEditAccess={editDescriptionPermission}
+                    isDescriptionExpanded={isEmpty(database)}
                     isEdit={isEdit}
                     showActions={!database.deleted}
                     onCancel={onCancel}

openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx

@@ -13,6 +13,7 @@
 
 import { Col, Row, Switch, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
+import { isEmpty } from 'lodash';
 import { PagingResponse } from 'Models';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -114,6 +115,7 @@ function SchemaTablesTab({
             description={description}
             entityFqn={databaseSchemaDetails.fullyQualifiedName}
             entityType={EntityType.DATABASE_SCHEMA}
+            isDescriptionExpanded={isEmpty(tableData.data)}
             showActions={false}
           />
         ) : (
@@ -123,6 +125,7 @@ function SchemaTablesTab({
             entityName={getEntityName(databaseSchemaDetails)}
             entityType={EntityType.DATABASE_SCHEMA}
             hasEditAccess={editDescriptionPermission}
+            isDescriptionExpanded={isEmpty(tableData.data)}
             isEdit={isEdit}
             showActions={!databaseSchemaDetails.deleted}
             onCancel={onCancel}

openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexDetailsPage.tsx

@@ -14,7 +14,7 @@
 import { Col, Row, Tabs } from 'antd';
 import { AxiosError } from 'axios';
 import { compare } from 'fast-json-patch';
-import { isEqual, isUndefined, omitBy } from 'lodash';
+import { isEmpty, isEqual, isUndefined, omitBy } from 'lodash';
 import { EntityTags } from 'Models';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -392,6 +392,7 @@ function SearchIndexDetailsPage() {
                   entityName={entityName}
                   entityType={EntityType.SEARCH_INDEX}
                   hasEditAccess={editDescriptionPermission}
+                  isDescriptionExpanded={isEmpty(searchIndexDetails?.fields)}
                   isEdit={isEdit}
                   owner={searchIndexDetails?.owner}
                   showActions={!searchIndexDetails?.deleted}

openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedurePage.tsx

@@ -22,6 +22,7 @@ import { ActivityFeedTab } from '../../components/ActivityFeed/ActivityFeedTab/A
 import ActivityThreadPanel from '../../components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanel';
 import { withActivityFeed } from '../../components/AppRouter/withActivityFeed';
 
+import { isEmpty } from 'lodash';
 import { CustomPropertyTable } from '../../components/common/CustomPropertyTable/CustomPropertyTable';
 import DescriptionV1 from '../../components/common/EntityDescription/DescriptionV1';
 import ErrorPlaceHolder from '../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
@@ -550,6 +551,7 @@ const StoredProcedurePage = () => {
                   entityName={entityName}
                   entityType={EntityType.STORED_PROCEDURE}
                   hasEditAccess={editDescriptionPermission}
+                  isDescriptionExpanded={isEmpty(code)}
                   isEdit={isEdit}
                   owner={owner}
                   showActions={!deleted}

openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx

@@ -518,6 +518,7 @@ const TableDetailsPageV1: React.FC = () => {
               entityName={entityName}
               entityType={EntityType.TABLE}
               hasEditAccess={editDescriptionPermission}
+              isDescriptionExpanded={isEmpty(tableDetails?.columns)}
               isEdit={isEdit}
               owner={tableDetails?.owner}
               showActions={!deleted}