From 6c92d2f9ecdb3a4b718e5dadef3587c34eca122f Mon Sep 17 00:00:00 2001
From: darth-coder00 <86726556+darth-coder00@users.noreply.github.com>
Date: Thu, 3 Feb 2022 00:36:11 +0530
Subject: [PATCH] Fix: #2067 No character display limit for column description
 (#2579)

---
 .../ui/src/assets/svg/icon-chevron-down.svg   |  3 ++
 .../AddServiceModal/AddServiceModal.tsx       |  7 ++-
 .../Modals/WhatsNewModal/ChangeLogs.tsx       |  5 +-
 .../Modals/WhatsNewModal/FeaturesCarousel.tsx |  5 +-
 .../CardListItem/CardWithListItems.tsx        |  5 +-
 .../common/description/Description.tsx        | 16 +++++--
 .../common/editor/MarkdownWithPreview.tsx     |  7 ++-
 .../RichTextEditorPreviewer.tsx               | 48 ++++++++++++++++++-
 .../table-data-card/TableDataCardBody.tsx     |  5 +-
 .../pages/RolesPage/RolesPage.component.tsx   |  1 +
 .../resources/ui/src/pages/services/index.tsx |  1 +
 .../main/resources/ui/src/styles/tailwind.css |  4 ++
 .../main/resources/ui/src/styles/x-master.css | 35 ++++++++++++++
 .../main/resources/ui/src/utils/SvgUtils.tsx  |  6 +++
 14 files changed, 136 insertions(+), 12 deletions(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/icon-chevron-down.svg

diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/icon-chevron-down.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/icon-chevron-down.svg
new file mode 100644
index 00000000000..883bc7bc054
--- /dev/null
+++ b/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>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AddServiceModal/AddServiceModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AddServiceModal/AddServiceModal.tsx
index 1e75c8ad661..a4b740b1227 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AddServiceModal/AddServiceModal.tsx
+++ b/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}
+          />
+        ),
       });
     }
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/ChangeLogs.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/ChangeLogs.tsx
index 9c4c777f52c..b4732f45b28 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/ChangeLogs.tsx
+++ b/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>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx
index 348408f5bbb..1cf83a3e9b7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx
+++ b/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 ? (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/card-list/CardListItem/CardWithListItems.tsx b/openmetadata-ui/src/main/resources/ui/src/components/card-list/CardListItem/CardWithListItems.tsx
index fdf043b7a27..7e078c35dd6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/card-list/CardListItem/CardWithListItems.tsx
+++ b/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>
   );
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx
index 918f41de1fd..2f07b6fff12 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx
+++ b/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">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/editor/MarkdownWithPreview.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/editor/MarkdownWithPreview.tsx
index a79d6060365..10c5da4bda9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/editor/MarkdownWithPreview.tsx
+++ b/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, () => ({
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditorPreviewer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditorPreviewer.tsx
index 56278f26270..c32fc0da95d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditorPreviewer.tsx
+++ b/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>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCardBody.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCardBody.tsx
index 1818c17dd8b..8079c356afb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCardBody.tsx
+++ b/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>
         )}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx
index b8c33d54405..a97ff7be3d7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx
+++ b/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}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
index 090facbe19d..c3178846733 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
+++ b/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}
                               />
                             ) : (
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css b/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
index 7e72ec469a5..a5036c6efbb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
+++ b/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;
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
index 8049dcf4c9e..b886912e918 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
+++ b/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 */
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx
index bc0e41c19a0..f1ad94f6e05 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx
+++ b/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: