Added support for Admitions and code copy button in serviceDoc panel

[Rohit0301]

Describe your changes:

collate PR - https://github.com/open-metadata/openmetadata-collate/pull/3890
Added admonition (note/warning/tip etc.) rendering and code block copy button support to the Service Documentation panel.

Fixes #27705

I worked on ... because ...

https://github.com/user-attachments/assets/7346feee-5cde-4eb3-a4dc-9831a9a6a9f6

Type of change:

• Bug fix
• Improvement
• New feature
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation

Checklist:

• I have read the CONTRIBUTING document.
• My PR title is Fixes <issue-number>: <short explanation>
• I have commented on my code, particularly in hard-to-understand areas.
• For JSON Schema changes: I updated the migration scripts or explained why it is not needed.

---

Summary by Gitar

• Testing:
  • Added extensive Playwright E2E tests for ServiceDocPanel to verify content rendering, section highlighting, and copy functionality.
• Styling & Components:
  • Refactored CodeBlockComponent to use Ant Design Button and Tooltip for the copy action.
  • Updated service-doc-panel.less for improved copy button positioning and styling.

_{This will update automatically on new commits.}

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	62.1% (62278/100285)	42.27% (33375/78944)	45.31% (9896/21837)

[github-actions]

🟡 Playwright Results — all passed (12 flaky)

✅ 3973 passed · ❌ 0 failed · 🟡 12 flaky · ⏭️ 86 skipped

Shard	Passed	Failed	Flaky	Skipped
🟡 Shard 1	298	0	1	4
🟡 Shard 2	752	0	2	8
🟡 Shard 3	747	0	2	7
🟡 Shard 4	757	0	2	18
🟡 Shard 5	686	0	1	41
🟡 Shard 6	733	0	4	8

🟡 12 flaky test(s) (passed on retry)

• Pages/AuditLogs.spec.ts › should apply both User and EntityType filters simultaneously (shard 1, 1 retry)
• Features/ActivityAPI.spec.ts › Activity event is created when description is updated (shard 2, 1 retry)
• Features/ActivityAPI.spec.ts › Activity event shows the actor who made the change (shard 2, 1 retry)
• Features/RTL.spec.ts › Verify Following widget functionality (shard 3, 1 retry)
• Flow/ServiceForm.spec.ts › Verify SSL cert upload with long filename and UI overflow handling (shard 3, 1 retry)
• Pages/DataContracts.spec.ts › Create Data Contract and validate for Container (shard 4, 1 retry)
• Pages/Domains.spec.ts › Domain Rbac (shard 4, 1 retry)
• Pages/EntityDataConsumer.spec.ts › Tier Add, Update and Remove (shard 5, 1 retry)
• Pages/Lineage/LineageFilters.spec.ts › Verify lineage schema filter selection (shard 6, 1 retry)
• Pages/Lineage/LineageRightPanel.spec.ts › Verify custom properties tab IS visible for supported type: searchIndex (shard 6, 1 retry)
• Pages/UserDetails.spec.ts › Admin user can edit teams from the user profile (shard 6, 1 retry)
• Pages/UserDetails.spec.ts › Create team with domain and verify visibility of inherited domain in user profile after team removal (shard 6, 1 retry)

📦 Download artifacts

How to debug locally

# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip    # view trace

[github-actions]

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

[gitar-bot]

Code Review ✅ Approved 6 resolved / 6 findings

ServiceDoc panel now supports admonitions and a code copy button. Resolved issues include redundant state sets, memory leaks in copy handlers, and improper parsing of node attributes.

✅ 6 resolved

✅ Bug: Admonition content is double-converted through markdown-to-HTML

📄 openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtils.tsx:693-705 📄 openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtils.tsx:720-734
convertAdmonitionsToHtml converts the inner markdown content to HTML via MarkdownToHTMLConverter.makeHtml (line 700) and wraps it in a <div>. Then in processDocMarkdown, the entire result (including those already-converted HTML divs) is passed through MarkdownToHTMLConverter.makeHtml again (lines 723-724, 735-737, 744). While showdown generally passes through raw HTML blocks, this double-processing can cause issues:

• Paragraph wrapping (<p>) may be added around or inside the div
• Edge cases with inline markdown syntax inside the already-converted HTML

The fix is to not pre-convert admonition content to HTML in convertAdmonitionsToHtml. Instead, just replace the $$type ... $$ markers with the <div> wrapper while leaving the inner content as raw markdown, so it gets converted once by the section processing loop.

✅ Bug: contentRef will always be null — NodeViewContent doesn't forward refs

📄 openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/CodeBlock/CodeBlockComponent.tsx:21 📄 openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/CodeBlock/CodeBlockComponent.tsx:24 📄 openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/CodeBlock/CodeBlockComponent.tsx:36
Tiptap's NodeViewContent does not forward refs (known limitation, see tiptap#6150). This means contentRef.current on line 24 will always be null, and the copy fallback node.textContent will always be used. While the fallback works, it silently defeats the purpose of the ref. If node.textContent ever diverges from the rendered DOM text (e.g., decorated content), copying will be incorrect.

A more reliable approach is to use a wrapper <pre> ref and query the <code> element from it, or simply rely on node.textContent intentionally and remove the misleading ref.

✅ Edge Case: setTimeout in handleCopy not cleared on unmount

📄 openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/CodeBlock/CodeBlockComponent.tsx:28
The setTimeout(() => setCopied(false), 2000) on line 28 is not cleaned up if the component unmounts before the timeout fires. This can cause a React "state update on unmounted component" warning. Use a ref to track the timeout and clear it in a cleanup effect.

✅ Quality: ADMONITION_TYPES set is redundant — regex already constrains values

📄 openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtils.tsx:681-688 📄 openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtils.tsx:690-691 📄 openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtils.tsx:699
The ADMONITION_TYPES Set on line 681 duplicates the types already hard-coded in ADMONITION_BLOCK_REGEX. Since the regex only matches note|warning|danger|info|tip|caution, the ADMONITION_TYPES.has(type) check on line 699 is always true, making the fallback 'note' unreachable. Either remove the Set and the guard, or derive the regex from the Set to keep a single source of truth.

✅ Security: AdmonitionNode type attribute is not validated on parse

📄 openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/AdmonitionNode.ts:25 📄 openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/AdmonitionNode.ts:41
In AdmonitionNode.ts, the parseHTML handler reads data-admonition from the DOM element without validating it against the known admonition types (line 25). Since this attribute value is interpolated into a CSS class name (admonition-${node.attrs.type}) in renderHTML (line 41), a crafted document could inject arbitrary class names (e.g., data-admonition="foo bar" → class="admonition admonition-foo bar"). Consider validating the attribute against the allowed types set.

...and 1 more resolved from earlier reviews

Options

Display: compact → Showing less information.

Comment with these commands to change:

Compact

gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}

[sonarqubecloud]

Quality Gate passed for 'open-metadata-ui'

Issues
1071 New issues
0 Accepted issues

Measures
17 Security Hotspots
0.0% Coverage on New Code
3.8% Duplication on New Code

See analysis details on SonarQube Cloud