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 ...

Screen.Recording.2026-04-27.at.10.27.49.PM.mov

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

• Admonition Support:
  • Implemented AdmonitionNode for rendering markdown note/warning/danger/tip/info blocks in documentation panels.
  • Added ADMONITION_BLOCK_REGEX and convertAdmonitionsToHtml utility to integrate with ServiceDocPanel.
• Code Copy Functionality:
  • Introduced CodeBlockComponent and CodeBlockWithCopy extension to provide a copy-to-clipboard button for code blocks.
  • Added CSS styles in service-doc-panel.less for copy button interaction and layout.
• Block Editor Enhancements:
  • Enabled heading levels 4-6 in BlockEditorExtensionsClassBase.
• Documentation Updates:
  • Standardized connector documentation files by normalizing $$section tags, fixing image paths, and migrating legacy syntax to the new admonition format.

_{This will update automatically on new commits.}

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	62.04% (61998/99932)	42.14% (33140/78632)	45.22% (9825/21727)

[github-actions]

🟡 Playwright Results — all passed (22 flaky)

✅ 3952 passed · ❌ 0 failed · 🟡 22 flaky · ⏭️ 86 skipped

Shard	Passed	Failed	Flaky	Skipped
🟡 Shard 1	293	0	6	4
🟡 Shard 2	737	0	7	8
🟡 Shard 3	746	0	2	7
🟡 Shard 4	758	0	1	18
🟡 Shard 5	685	0	2	41
🟡 Shard 6	733	0	4	8

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

• Features/TeamsDragAndDrop.spec.ts › Should drag and drop on Department team type (shard 1, 1 retry)
• Flow/Tour.spec.ts › Tour should work from help section (shard 1, 1 retry)
• Flow/Tour.spec.ts › Tour should work from welcome screen (shard 1, 1 retry)
• Flow/Tour.spec.ts › Tour should work from URL directly (shard 1, 1 retry)
• Pages/AuditLogs.spec.ts › should apply both User and EntityType filters simultaneously (shard 1, 1 retry)
• Pages/UserCreationWithPersona.spec.ts › Create user with persona and verify on profile (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/DomainFilterQueryFilter.spec.ts › Subdomain assets should be visible when parent domain is selected (shard 2, 1 retry)
• Features/DomainFilterQueryFilter.spec.ts › 3-level domain hierarchy: SubSubDomain assets visible when SubDomain selected (shard 2, 1 retry)
• Features/DomainTierCertificationVoting.spec.ts › DataProduct - Certification assign, update, and remove (shard 2, 1 retry)
• Features/Glossary/GlossaryHierarchy.spec.ts › should cancel move operation (shard 2, 1 retry)
• Features/Glossary/GlossaryWorkflow.spec.ts › should start term as Draft when glossary has reviewers (shard 2, 1 retry)
• Features/RTL.spec.ts › Verify Following widget functionality (shard 3, 1 retry)
• Features/UserProfileOnlineStatus.spec.ts › Should show "Active recently" for users active within last hour (shard 3, 1 retry)
• Pages/DataContracts.spec.ts › Create Data Contract and validate for Chart (shard 4, 1 retry)
• Pages/Entity.spec.ts › Delete Container (shard 5, 1 retry)
• Pages/Entity.spec.ts › User as Owner Add, Update and Remove (shard 5, 1 retry)
• Pages/Lineage/DataAssetLineage.spec.ts › Column lineage for searchIndex -> table (shard 6, 1 retry)
• Pages/Lineage/LineageFilters.spec.ts › Verify lineage schema filter selection (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

[gitar-bot]

Code Review ✅ Approved 5 resolved / 5 findings

ServiceDoc panel now supports admonitions and a code copy button. This update resolves issues with double markdown conversion, reference forwarding, memory leaks in the copy handler, and redundant type validation.

✅ 5 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.

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
1066 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud