OCPBUGS-98159: Fix leading whitespace in Quick Start {{execute}} code snippets

[dtambat]

Analysis / Root cause:
The {{execute}} markdown extensions (multiline-execute-extension.ts and inline-execute-extension.ts) generate a PatternFly CodeBlock HTML string for Quick Start code snippets. The <pre> and <code> tags in that generated markup were on separate lines with indentation between them. Since <pre> uses white-space: pre-wrap (PatternFly's own code-block.css rule, which preserves whitespace literally like white-space: pre), the newline and indentation between <pre> and <code> rendered as a visible leading blank line and leading spaces in the snippet, even though the snippet text itself (group.trim()) was already trimmed. This reproduces on any Quick Start with an {{execute}} code snippet (e.g. "Enable Developer Perspective"), on fresh 4.19/4.21 installs and after upgrades.

PatternFly's own {{copy}} extension avoids this by keeping <pre><code>...</code></pre> adjacent on one line, which this fix now mirrors.

Solution description:

• Removed the whitespace/newline between the <pre> and <code> opening tags (and their closing tags) in both multiline-execute-extension.ts and inline-execute-extension.ts, so the tags are directly adjacent in the generated HTML.
• Added regression tests (execute-extensions.spec.ts) asserting the generated HTML for both extensions has <pre>/<code> adjacent with no interstitial whitespace text node, and that the rendered <code> element's text content has no leading whitespace.
• No behavior change to copy-to-clipboard or "Run in Web Terminal": both already read innerText from the <code data-snippet-id> element directly, so they were unaffected by this purely visual bug.

Screenshots / screen recording:

Verified using the real {{execute}} snippet from the enable-developer-perspective ConsoleQuickStart on a live OCP 4.21.17 test cluster (the same Quick Start named in the bug's repro steps), rendered against the actual PatternFly 6.6.0 CodeBlock CSS:

Before fix	After fix

code.innerText (what Copy to clipboard / Run in Web Terminal actually read) is identical before and after, confirming those behaviors are unaffected by this purely visual fix:

Before fix	After fix

Test setup:
Open the Quick Starts catalog (Help icon (?) → Quick Starts) and select any Quick Start containing an {{execute}} code snippet, e.g. "Enable Developer Perspective".

Test cases:

• Open a Quick Start with an {{execute}} code snippet (inline and/or multiline) and confirm there is no leading blank line or leading spaces before the snippet text. (Verified above using real cluster content, pre/post fix comparison.)
• Confirm "Copy to clipboard" still copies the exact snippet text (no leading/trailing whitespace). (Verified: code.innerText identical before/after fix.)
• Confirm "Run in Web Terminal" (when Web Terminal is available) still executes the correct command. (Verified: same innerText value used by both features.)

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

(Verification above used headless Chrome against real cluster content; full manual QA in each browser against a running Console build is still recommended before merge.)

Additional info:
Jira: https://redhat.atlassian.net/browse/OCPBUGS-98159

Reviewers and assignees:

[openshift-merge-bot]

Pipeline controller notification
This repo is configured to use the pipeline controller. Second-stage tests will be triggered either automatically or after lgtm label is added, depending on the repository configuration. The pipeline controller will automatically detect which contexts are required and will utilize /test Prow commands to trigger the second stage.

For optional jobs, comment /test ? to see a list of all defined jobs. To trigger manually all jobs from second stage use /pipeline required command.

This repository is configured in: LGTM mode

[openshift-ci-robot]

@dtambat: This pull request references Jira Issue OCPBUGS-98159, which is invalid:

• expected the bug to target the "5.0.0" version, but no target version was set

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

The bug has been updated to refer to the pull request using the external bug tracker.

Details

In response to this:

Analysis / Root cause:
The {{execute}} markdown extensions (multiline-execute-extension.ts and inline-execute-extension.ts) generate a PatternFly CodeBlock HTML string for Quick Start code snippets. The <pre> and <code> tags in that generated markup were on separate lines with indentation between them. Since <pre> uses white-space: pre (preserves whitespace literally, unlike normal HTML), the newline and indentation between <pre> and <code> rendered as a visible leading blank line and leading spaces in the snippet, even though the snippet text itself (group.trim()) was already trimmed. This reproduces on any Quick Start with an {{execute}} code snippet (e.g. "Enable Developer Perspective"), on fresh 4.19/4.21 installs and after upgrades.

PatternFly's own {{copy}} extension avoids this by keeping <pre><code>...</code></pre> adjacent on one line, which this fix now mirrors.

Solution description:

• Removed the whitespace/newline between the <pre> and <code> opening tags (and their closing tags) in both multiline-execute-extension.ts and inline-execute-extension.ts, so the tags are directly adjacent in the generated HTML.
• Added regression tests (execute-extensions.spec.ts) asserting the generated HTML for both extensions has <pre>/<code> adjacent with no interstitial whitespace text node, and that the rendered <code> element's text content has no leading whitespace.
• No behavior change to copy-to-clipboard or "Run in Web Terminal": both already read innerText from the <code data-snippet-id> element directly, so they were unaffected by this purely visual bug.

Screenshots / screen recording:

Test setup:
Open the Quick Starts catalog (Help icon (?) → Quick Starts) and select any Quick Start containing an {{execute}} code snippet, e.g. "Enable Developer Perspective".

Test cases:

• Open a Quick Start with an {{execute}} code snippet (inline and/or multiline) and confirm there is no leading blank line or leading spaces before the snippet text.
• Confirm "Copy to clipboard" still copies the exact snippet text (no leading/trailing whitespace).
• Confirm "Run in Web Terminal" (when Web Terminal is available) still executes the correct command.

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:
Jira: https://redhat.atlassian.net/browse/OCPBUGS-98159

Reviewers and assignees:

Made with Cursor

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[coderabbitai]

Walkthrough

Changes

Execute extension rendering

Layer / File(s)	Summary
Compact markup and regression coverage frontend/packages/console-shared/src/components/markdown-extensions/inline-execute-extension.ts, frontend/packages/console-shared/src/components/markdown-extensions/multiline-execute-extension.ts, frontend/packages/console-shared/src/components/markdown-extensions/__tests__/execute-extensions.spec.ts	Both execute extensions use single-line <pre><code> markup, with tests verifying adjacent tags and preserved oc get pods text.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested labels: component/shared

Suggested reviewers: logonoff

🚥 Pre-merge checks | ✅ 15

✅ Passed checks (15 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Stable And Deterministic Test Names	✅ Passed	PASS: The new spec titles are static strings; no generated IDs, timestamps, or other dynamic values appear in any It/Describe title.
Test Structure And Quality	✅ Passed	PASS: The PR only adds Jest unit tests, not Ginkgo/cluster tests, and each It block is single-purpose with local setup and no cleanup/timeouts needed.
Microshift Test Compatibility	✅ Passed	No new Ginkgo/e2e tests were added; the only new test is a React/Jest spec, and it contains no MicroShift-unsupported APIs or assumptions.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	New test is a Jest unit spec using @testing-library/react, not a Ginkgo e2e test; no multi-node or SNO assumptions are present.
Topology-Aware Scheduling Compatibility	✅ Passed	Only markdown-extension UI code and tests changed; no deployment manifests, operators, or scheduling logic were added or modified.
Ote Binary Stdout Contract	✅ Passed	PR only changes frontend markdown-extension code/tests; no OTE binary entrypoints or stdout writes in main/suite setup were touched.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	This PR only adds React/Jest markdown-extension unit tests and local HTML string changes; no Ginkgo e2e, IPv4-only assumptions, or external network access found.
No-Weak-Crypto	✅ Passed	Changed files only adjust markdown HTML spacing and tests; no crypto, weak algorithms, or secret comparisons are present.
Container-Privileges	✅ Passed	Only frontend markdown-extension TS/tests changed; no container/K8s manifests or privileged, host*, SYS_ADMIN, or allowPrivilegeEscalation settings were added.
No-Sensitive-Data-In-Logs	✅ Passed	No logging calls or sensitive-data sinks were added; the changes only reformat HTML templates and add tests.
Title check	✅ Passed	The title is concise and accurately describes the whitespace fix in execute code snippets.
Description check	✅ Passed	The description covers root cause, solution, tests, and screenshots; only some template checkboxes and reviewer tags are left blank.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: dtambat
Once this PR has been reviewed and has the lgtm label, please assign logonoff for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[openshift-ci]

Hi @dtambat. Thanks for your PR.

I'm waiting for a openshift member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work.

Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.