fix: Non-printable character box missing when editing Cloud Config parameter

[mtrezza]

Pull Request

• Report security issues confidentially.
• Any contribution is under this license.

Issue

Non-printable character box not visible when editing Cloud Config parameter.

Summary by CodeRabbit

• Bug Fixes

  • Improved detection and handling of non-printable characters in JSON configuration editors.

• Style

  • Adjusted spacing in the information container for better visual alignment.

[parse-github-assistant]

🚀 Thanks for opening this pull request!

[parseplatformorg]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[coderabbitai]

📝 Walkthrough

Walkthrough

JsonEditor components for Object and Array editors in the configuration dialog are now wrapped with NonPrintableHighlighter to handle non-printable content detection. Additionally, vertical spacing above the information badge in the highlighter component is adjusted from 8px to -4px.

Changes

Cohort / File(s)	Summary
NonPrintableHighlighter styling and ConfigDialog integration src/components/NonPrintableHighlighter/NonPrintableHighlighter.scss, src/dashboard/Data/Config/ConfigDialog.react.js	NonPrintableHighlighter wrapper applied to Object and Array JsonEditor components with isJson={true} and detectNonAlphanumeric={true} props. Info container margin-top adjusted from 8px to -4px for better visual alignment.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• feat: Detect and warn about unprintable characters in Cloud Config parameter values #3119 — Introduces the NonPrintableHighlighter component and its initial styling that this PR now applies to ConfigDialog's JSON editors.
• feat: Add syntax highlighting, formatting, auto-indentation for Cloud Config parameter values of type Object and Array #3176 — Modifies the same ConfigDialog.react.js Object/Array editor rendering logic that is now being wrapped with NonPrintableHighlighter.
• feat: Add non-alphanumeric character detection in Cloud Config parameters #3143 — Uses NonPrintableHighlighter with the same detectNonAlphanumeric prop configuration introduced in this PR.

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is incomplete. It includes the Issue section but lacks the Approach section describing the actual changes and does not address the Tasks section.	Add an Approach section explaining how the NonPrintableHighlighter was integrated into the JsonEditor components, and indicate whether tests or documentation updates were completed.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: fixing the missing non-printable character highlighter box in the Cloud Config parameter editor.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into alpha

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

src/components/NonPrintableHighlighter/NonPrintableHighlighter.scss (1)

107-109: Negative margin may clip or overlap content depending on parent context.

The margin-top: -4px pulls the info badge upward, which works for the Config dialog's JsonEditor layout but could cause visual overlap if NonPrintableHighlighter is reused in contexts with tighter spacing or overflow: hidden on a parent. Consider whether a context-specific override (e.g., a prop-driven class) would be safer than changing the shared style.

---

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 and usage tips.}

[parseplatformorg]

🎉 This change has been released in version 9.0.0-alpha.2

[parseplatformorg]

🎉 This change has been released in version 9.0.0