Fix[#14242]: displaying artifacts when using codeBlock in the descrip…

…tion of objects (#14617)
open-metadata · Jan 8, 2024 · 3bc5b60 · 3bc5b60
1 parent c62afed
commit 3bc5b60
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/...resources/ui/src/components/common/RichTextEditor/CustomHtmlRederer/CustomHtmlRederer.tsx b/...resources/ui/src/components/common/RichTextEditor/CustomHtmlRederer/CustomHtmlRederer.tsx
@@ -103,7 +103,6 @@ export const customHTMLRenderer: CustomHTMLRenderer = {
         type: 'openTag',
         tagName: 'pre',
         classNames: preClasses,
-        attributes: { 'data-content': codeText },
       },
       {
         type: 'html',
@@ -116,11 +115,9 @@ export const customHTMLRenderer: CustomHTMLRenderer = {
               data-testid="copied-message">
               {t('label.copied')}
             </span>
-            <CopyIcon
-              className="code-copy-button"
-              data-copied="false"
-              data-testid="code-block-copy-icon"
-            />
+            <span data-testid="code-block-copy-icon">
+              <CopyIcon className="code-copy-button" data-copied="false" />
+            </span>
           </>
         ),
       },

diff --git a/...c/main/resources/ui/src/components/common/RichTextEditor/RichTextEditorPreviewer.test.tsx b/...c/main/resources/ui/src/components/common/RichTextEditor/RichTextEditorPreviewer.test.tsx
@@ -29,6 +29,10 @@ const mockDescription =
   // eslint-disable-next-line max-len
   '**Headings**\n\n# H1\n## H2\n### H3\n\n***\n**Bold**\n\n**bold text**\n\n\n***\n**Italic**\n\n*italic*\n\n***\n**BlockQuote**\n\n> blockquote\n\n***\n**Ordered List**\n\n1. First item\n2. Second item\n3. Third item\n\n\n***\n**Unordered List**\n\n- First item\n- Second item\n- Third item\n\n\n***\n**Code**\n\n`code`\n\n\n***\n**Horizontal Rule**\n\n---\n\n\n***\n**Link**\n[title](https://www.example.com)\n\n\n***\n**Image**\n\n![alt text](https://github.com/open-metadata/OpenMetadata/blob/main/docs/.gitbook/assets/openmetadata-banner.png?raw=true)\n\n\n***\n**Table**\n\n| Syntax | Description |\n| ----------- | ----------- |\n| Header | Title |\n| Paragraph | Text |\n***\n\n**Fenced Code Block**\n\n```\n{\n  "firstName": "John",\n  "lastName": "Smith",\n  "age": 25\n}\n```\n\n\n***\n**Strikethrough**\n~~The world is flat.~~\n';
 
+const mockCodeBlockMarkdown =
+  // eslint-disable-next-line max-len
+  "```\nIFERROR ( \n    IF (\n        SUM ( 'Запасы'[СЗ, руб2] ) <> BLANK (),\n        CALCULATE (\n            DIVIDE ( SUM ( 'Запасы'[СЗ, руб2] ), [Количество дней в периоде_new] ),\n            FILTER ( 'Место отгрузки', [Код предприятия] <> \"7001\" ),\n            FILTER ( 'Запасы', [Код типа запаса] <> \"E\" )\n        ),\n        BLANK ()\n    ),\n    0\n)\n```";
+
 const mockProp: PreviewerProp = {
   markdown: mockDescription,
   className: '',
@@ -435,4 +439,22 @@ describe('Test RichTextEditor Previewer Component', () => {
     expect(screen.getByText(markdown)).toBeInTheDocument();
     expect(screen.queryByTestId('read-more-button')).toBeNull();
   });
+
+  it('Should render code block with copy button', async () => {
+    const { container } = render(
+      <RichTextEditorPreviewer
+        {...mockProp}
+        markdown={mockCodeBlockMarkdown}
+      />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+
+    const markdownParser = await findByTestId(container, 'markdown-parser');
+
+    expect(markdownParser.querySelector('pre')).toBeInTheDocument();
+
+    expect(screen.getByTestId('code-block-copy-icon')).toBeInTheDocument();
+  });
 });
diff --git a/...ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditorPreviewer.tsx b/...ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditorPreviewer.tsx
@@ -71,8 +71,9 @@ const RichTextEditorPreviewer = ({
     const targetNodeDataTestId = targetNode.getAttribute('data-testid');
 
     if (targetNodeDataTestId === 'code-block-copy-icon' && previousSibling) {
-      const content =
-        targetNode.parentElement?.getAttribute('data-content') ?? '';
+      const codeNode = previousSibling.previousElementSibling;
+
+      const content = codeNode?.textContent ?? '';
 
       try {
         await navigator.clipboard.writeText(content);