Fix: #2067 No character display limit for column description (#2579)

openmetadata-ui/src/main/resources/ui/src/assets/svg/icon-chevron-down.svg

@@ -0,0 +1,3 @@
+<svg width="448" height="112" viewBox="0 0 448 112" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M212.658 109.793L4.73114 12.8014C3.23202 12.1078 2.04208 11.2826 1.23007 10.3734C0.41806 9.46425 -3.7107e-07 8.48907 -3.28017e-07 7.50414C-2.84965e-07 6.51921 0.41806 5.54403 1.23007 4.63485C2.04208 3.72567 3.23203 2.90049 4.73114 2.2069C6.21802 1.5076 7.98697 0.952557 9.93604 0.573777C11.8851 0.194998 13.9756 -1.89718e-05 16.0871 -1.88795e-05C18.1985 -1.87872e-05 20.2891 0.194998 22.2382 0.573778C24.1872 0.952558 25.9562 1.5076 27.4431 2.2069L224.014 93.976L420.584 2.20692C423.596 0.802005 427.681 0.0127354 431.94 0.0127356C434.049 0.0127357 436.138 0.206502 438.086 0.582982C440.034 0.959462 441.805 1.51128 443.296 2.20692C444.787 2.90256 445.97 3.72841 446.778 4.63731C447.585 5.54621 448 6.52037 448 7.50416C448 9.49101 446.308 11.3965 443.296 12.8014L235.37 109.793C233.883 110.492 232.114 111.047 230.165 111.426C228.216 111.805 226.125 112 224.014 112C221.902 112 219.812 111.805 217.863 111.426C215.914 111.047 214.145 110.492 212.658 109.793Z" fill="#6B7280"/>
+</svg>

openmetadata-ui/src/main/resources/ui/src/components/Modals/AddServiceModal/AddServiceModal.tsx

@@ -1522,7 +1522,12 @@ export const AddServiceModal: FunctionComponent<Props> = ({
     if (description) {
       serviceDetailsData.push({
         key: 'Description',
-        value: <RichTextEditorPreviewer markdown={description} />,
+        value: (
+          <RichTextEditorPreviewer
+            enableSeeMoreVariant={false}
+            markdown={description}
+          />
+        ),
       });
     }
 

openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/ChangeLogs.tsx

@@ -30,7 +30,10 @@ const ChangeLogs = ({ data }: Props) => {
           <div className="tw-border-b tw-mb-2.5 tw-border-text">
             <p className="tw-text-base tw-font-medium tw-mb-2.5">{log}</p>
           </div>
-          <RichTextEditorPreviewer markdown={data[log]} />
+          <RichTextEditorPreviewer
+            enableSeeMoreVariant={false}
+            markdown={data[log]}
+          />
         </div>
       ))}
     </div>

openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx

@@ -67,7 +67,10 @@ const FeaturesCarousel = ({ data }: Props) => {
         <div className="tw-px-1" key={uniqueId()}>
           <p className="tw-text-sm tw-font-medium tw-mb-2">{d.title}</p>
           <div className="tw-text-sm tw-mb-3">
-            <RichTextEditorPreviewer markdown={d.description} />
+            <RichTextEditorPreviewer
+              enableSeeMoreVariant={false}
+              markdown={d.description}
+            />
           </div>
           <div>
             {d.path ? (

openmetadata-ui/src/main/resources/ui/src/components/card-list/CardListItem/CardWithListItems.tsx

@@ -50,7 +50,10 @@ const CardListItem: FunctionComponent<Props> = ({
           cardStyle.body.base,
           isActive ? cardStyle.body.active : cardStyle.body.default
         )}>
-        <RichTextEditorPreviewer markdown={card.data} />
+        <RichTextEditorPreviewer
+          enableSeeMoreVariant={false}
+          markdown={card.data}
+        />
       </div>
     </div>
   );

openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx

@@ -26,7 +26,7 @@ type Props = {
   owner?: Table['owner'];
   hasEditAccess?: boolean;
   blurWithBodyBG?: boolean;
-  removeBlurOnScroll?: boolean;
+  removeBlur?: boolean;
   description: string;
   isEdit?: boolean;
   onDescriptionEdit?: () => void;
@@ -46,29 +46,35 @@ const Description = ({
   onDescriptionUpdate,
   isReadOnly = false,
   blurWithBodyBG = false,
-  removeBlurOnScroll = false,
+  removeBlur = false,
   entityName,
 }: Props) => {
   return (
     <div className="schema-description tw-relative">
       <div className="tw-px-3 tw-py-1 tw-flex">
         <div className="tw-relative">
-          {!removeBlurOnScroll && description.length > 800 && (
+          {/* {!removeBlur && description.length > 800 && (
             <div
               className={classNames(
                 'tw-absolute tw-inset-0 tw-z-10',
                 blurWithBodyBG ? 'on-scroll-blur-body' : 'on-scroll-blur-white'
               )}
             />
-          )}
+          )} */}
           <div
-            className="description tw-h-full tw-overflow-y-scroll tw-max-h-40 tw-min-h-12 tw-relative tw-py-2.5"
+            className="description tw-h-full tw-overflow-y-scroll tw-min-h-12 tw-relative tw-py-2.5"
             data-testid="description"
             id="center">
             {description?.trim() ? (
               <RichTextEditorPreviewer
+                blurClasses={
+                  blurWithBodyBG ? 'see-more-blur-body' : 'see-more-blur-white'
+                }
                 className="tw-p-2"
+                enableSeeMoreVariant={!removeBlur}
                 markdown={description}
+                maxHtClass="tw-max-h-36"
+                maxLen={800}
               />
             ) : (
               <span className="tw-no-description tw-p-2">

openmetadata-ui/src/main/resources/ui/src/components/common/editor/MarkdownWithPreview.tsx

@@ -56,7 +56,12 @@ const MarkdownWithPreview = forwardRef<editorRef, Props>(
         return 'Nothing to preview';
       }
 
-      return <RichTextEditorPreviewer markdown={preview} />;
+      return (
+        <RichTextEditorPreviewer
+          enableSeeMoreVariant={false}
+          markdown={preview}
+        />
+      );
     };
 
     useImperativeHandle(ref, () => ({

openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditorPreviewer.tsx

@@ -18,21 +18,43 @@ import { Link } from 'react-router-dom';
 import rehypeRaw from 'rehype-raw';
 import gfm from 'remark-gfm';
 import { isValidUrl } from '../../../utils/CommonUtils';
+import SVGIcons, { Icons } from '../../../utils/SvgUtils';
+
+const MAX_LENGTH = 300;
 
 /*eslint-disable  */
 const RichTextEditorPreviewer = ({
   markdown,
   className = '',
+  blurClasses = 'see-more-blur',
+  maxHtClass = 'tw-h-24',
+  maxLen = MAX_LENGTH,
+  enableSeeMoreVariant = true,
 }: {
   markdown: string;
   className?: string;
+  blurClasses?: string;
+  maxHtClass?: string;
+  maxLen?: number;
+  enableSeeMoreVariant?: boolean;
 }) => {
   const [content, setContent] = useState<string>('');
+  const [displayMoreText, setDisplayMoreText] = useState(false);
   useEffect(() => {
     setContent(markdown);
   }, [markdown]);
   return (
-    <div className={classNames('content-container', className)}>
+    <div
+      className={classNames(
+        'content-container tw-relative',
+        className,
+        enableSeeMoreVariant && markdown.length > maxLen && !displayMoreText
+          ? `${maxHtClass} tw-overflow-hidden`
+          : null,
+        {
+          'tw-mb-5': displayMoreText,
+        }
+      )}>
       <ReactMarkdown
         children={content
           .replaceAll(/&lt;/g, '<')
@@ -78,6 +100,30 @@ const RichTextEditorPreviewer = ({
         remarkPlugins={[gfm] as unknown as PluggableList | undefined}
         rehypePlugins={[[rehypeRaw, { allowDangerousHtml: false }]]}
       />
+      {enableSeeMoreVariant && markdown.length > MAX_LENGTH && (
+        <div
+          className={classNames(
+            'tw-absolute tw-flex tw-h-full tw-w-full tw-inset-x-0',
+            !displayMoreText ? blurClasses : null,
+            {
+              'tw-top-0 tw-bottom-0': !displayMoreText,
+              ' tw--bottom-4': displayMoreText,
+            }
+          )}>
+          <p
+            className="tw-cursor-pointer tw-self-end tw-pointer-events-auto tw-text-primary tw-mx-auto"
+            onClick={() => setDisplayMoreText((pre) => !pre)}>
+            <span className="tw-flex tw-items-center tw-gap-2">
+              <SVGIcons
+                alt="expand-collapse"
+                className={classNames({ 'rotate-inverse': displayMoreText })}
+                width="32"
+                icon={Icons.CHEVRON_DOWN}
+              />
+            </span>
+          </p>
+        </div>
+      )}
     </div>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCardBody.tsx

@@ -62,7 +62,10 @@ const TableDataCardBody: FunctionComponent<Props> = ({
       </div>
       <div className="description-text" data-testid="description-text">
         {description.trim() ? (
-          <RichTextEditorPreviewer markdown={description} />
+          <RichTextEditorPreviewer
+            enableSeeMoreVariant={false}
+            markdown={description}
+          />
         ) : (
           <span className="tw-no-description">No description added</span>
         )}

openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx

@@ -557,6 +557,7 @@ const RolesPage = () => {
                       className="tw-mb-3 tw--ml-5"
                       data-testid="description-container">
                       <Description
+                        blurWithBodyBG
                         description={currentRole?.description || ''}
                         entityName={currentRole?.displayName}
                         isEdit={isEditable}

openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx

@@ -560,6 +560,7 @@ const ServicesPage = () => {
                             data-testid="service-description">
                             {service.description ? (
                               <RichTextEditorPreviewer
+                                enableSeeMoreVariant={false}
                                 markdown={service.description}
                               />
                             ) : (

openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css

@@ -333,6 +333,10 @@
     animation: highlight 3000ms ease-out;
   }
 
+  .rotate-inverse {
+    transform: rotate(180deg);
+  }
+
   @keyframes highlight {
     0% {
       @apply tw-bg-warning-lite;

openmetadata-ui/src/main/resources/ui/src/styles/x-master.css

@@ -844,3 +844,38 @@ body .profiler-graph .recharts-active-dot circle {
   );
   pointer-events: none; /* so the text is still selectable */
 }
+
+.see-more-blur-white {
+  background: linear-gradient(
+    to top,
+    rgba(255, 255, 255, 1) 10%,
+    rgba(255, 255, 255, 0) 36%
+  );
+  pointer-events: none; /* so the text is still selectable */
+}
+
+.see-more-blur-body {
+  background: linear-gradient(
+    to top,
+    rgba(248, 249, 250, 1) 10%,
+    rgba(255, 255, 255, 0) 36%
+  );
+  pointer-events: none; /* so the text is still selectable */
+}
+
+.see-more-blur {
+  background: linear-gradient(
+    to top,
+    rgba(255, 255, 255, 1) 20%,
+    rgba(255, 255, 255, 0) 42%
+  );
+  pointer-events: none; /* so the text is still selectable */
+}
+.tableBody-row:hover .see-more-blur {
+  background: linear-gradient(
+    to top,
+    rgba(245, 246, 248, 1) 20%,
+    rgba(255, 255, 255, 0) 42%
+  );
+  pointer-events: none; /* so the text is still selectable */
+}

openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx

@@ -76,6 +76,7 @@ import IconTrends from '../assets/svg/ic-trends.svg';
 import IconUpArrow from '../assets/svg/ic-up-arrow.svg';
 import IconVEllipsis from '../assets/svg/ic-v-ellipsis.svg';
 import IconWorkflows from '../assets/svg/ic-workflows.svg';
+import IconChevronDown from '../assets/svg/icon-chevron-down.svg';
 import IconKey from '../assets/svg/icon-key.svg';
 import IconNotNull from '../assets/svg/icon-notnull.svg';
 import IconTour from '../assets/svg/icon-tour.svg';
@@ -229,6 +230,7 @@ export const Icons = {
   ARROW_DOWN_PRIMARY: 'icon-arrow-down-primary',
   ANNOUNCEMENT: 'icon-announcement',
   ANNOUNCEMENT_WHITE: 'icon-announcement-white',
+  CHEVRON_DOWN: 'icon-chevron-down',
 };
 
 const SVGIcons: FunctionComponent<Props> = ({
@@ -660,6 +662,10 @@ const SVGIcons: FunctionComponent<Props> = ({
     case Icons.ANNOUNCEMENT_WHITE:
       IconComponent = IconAnnouncementWhite;
 
+      break;
+    case Icons.CHEVRON_DOWN:
+      IconComponent = IconChevronDown;
+
       break;
 
     default: