From ee6dbe8adb47ba1e4e632b71f5fd6110d60753bb Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Tue, 2 Aug 2022 15:41:17 +0530
Subject: [PATCH] Fix #6497 UI : Replace arrow with `Read more` text (#6498)

* Fix #6497 UI : Replace arrow with `Read more` text

* Add unit test

* Fix unit test

* Fix unit test
---
 .../common/rich-text-editor/BlurLayout.test.tsx           | 2 ++
 .../src/components/common/rich-text-editor/BlurLayout.tsx | 8 +-------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/BlurLayout.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/BlurLayout.test.tsx
index 400e168894c..3214ae27337 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/BlurLayout.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/BlurLayout.test.tsx
@@ -98,6 +98,8 @@ describe('Test BlurLayout Component', () => {
 
     expect(displayButton).toBeInTheDocument();
 
+    expect(displayButton).toHaveTextContent('Read less');
+
     fireEvent.click(displayButton);
 
     expect(displayMoreHandler).toBeCalled();
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/BlurLayout.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/BlurLayout.tsx
index b56bce57bf8..c90879d9b96 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/BlurLayout.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/BlurLayout.tsx
@@ -13,7 +13,6 @@
 
 import classNames from 'classnames';
 import React, { FC } from 'react';
-import SVGIcons, { Icons } from '../../../utils/SvgUtils';
 import { MAX_LENGTH } from './RichTextEditorPreviewer';
 
 interface BlurLayoutProp {
@@ -51,12 +50,7 @@ export const BlurLayout: FC<BlurLayoutProp> = ({
         data-testid="display-button"
         onClick={displayMoreHandler}>
         <span className="tw-flex tw-items-center tw-gap-2">
-          <SVGIcons
-            alt="expand-collapse"
-            className={classNames({ 'rotate-inverse': displayMoreText })}
-            icon={Icons.CHEVRON_DOWN}
-            width="32"
-          />
+          {displayMoreText ? 'Read less' : 'Read more'}
         </span>
       </p>
     </div>