feat: Add non-alphanumeric character detection in Cloud Config parameters

[mtrezza]

Pull Request

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

Feature

Summary by CodeRabbit

• New Features

  • Non-alphanumeric character detection added to input fields with visual highlighting and an expandable info panel showing total counts, per-character breakdown, positions, and per-path locations for JSON values.
  • Detection enabled by default in array-entry and config editors.

• Style

  • New info-badge and details panel styling (hover/expanded states).

• Bug Fixes

  • Adjusted summary text pluralization for 0/1 counts.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[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]

Warning

Rate limit exceeded

@mtrezza has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 1 minutes and 20 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

Adds non-alphanumeric detection and reporting to NonPrintableHighlighter: new exported utilities (hasNonAlphanumericChars, getNonAlphanumericChars, getNonAlphanumericCharsFromJson), a detectNonAlphanumeric prop, UI (info badge + details panel) and SCSS, and updates usages to enable the feature in dialog editors.

Changes

Cohort / File(s)	Summary
NonPrintableHighlighter Component src/components/NonPrintableHighlighter/NonPrintableHighlighter.react.js	Adds NON_ALPHANUMERIC_REGEX, stripQuotes(), hasNonAlphanumericChars(), getNonAlphanumericChars(), getNonAlphanumericCharsFromJson(); exposes detectNonAlphanumeric prop; adds state showNonAlphanumericDetails, UI to toggle and render per-character non-alphanumeric breakdown (labels, codes, counts, positions, locations); minor pluralization tweak; preserves existing non-printable logic.
NonPrintableHighlighter Styling src/components/NonPrintableHighlighter/NonPrintableHighlighter.scss	Adds .infoContainer, .infoBadge, .infoIcon, .infoText, .infoDetailsPanel, .charLabelInfo and hover/expanded styles for the info badge and details panel.
Config Dialog Usages src/dashboard/Data/Config/AddArrayEntryDialog.react.js, src/dashboard/Data/Config/ConfigDialog.react.js	Updated NonPrintableHighlighter invocations to pass detectNonAlphanumeric={true} (applied to string/object/array editors); small dropdown value handling change in ConfigDialog.react.js (stringified option values and Number conversion on change).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat: Detect and warn about unprintable characters in Cloud Config parameter values #3119: Prior changes to NonPrintableHighlighter adding non-printable detection and utilities; directly related to the same component extended here.
• feat: Add quick-remove button to array parameter in Cloud Config #3121: Touches NonPrintableHighlighter integration in dialogs—related to usage updates and UI behavior added in this PR.
• feat: Add quick-add button to array parameter in Cloud Config #2866: Introduced/modified AddArrayEntryDialog component that now receives the detectNonAlphanumeric prop in this PR.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is largely incomplete, containing only a boilerplate header, security/license links, and a screenshot without any substantive details about the implementation.	Complete the description by filling in the Issue reference, providing an Approach section explaining the implementation changes, and documenting whether tests and documentation were added.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main feature being added: non-alphanumeric character detection in Cloud Config parameters, which aligns with the core changeset.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

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

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/NonPrintableHighlighter/NonPrintableHighlighter.react.js`:
- Around line 148-155: The function stripQuotes uses double-quoted string
literals causing lint failures; update the quote characters to single quotes in
the startsWith/endsWith checks and anywhere else in stripQuotes that uses double
quotes (e.g., change '"' to "'" and vice versa as appropriate), keeping the same
logic that returns str.slice(1, -1) when matching single or double quotes and
otherwise returns the original value; ensure you only modify string literal
quote characters and not the function logic.

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/components/NonPrintableHighlighter/NonPrintableHighlighter.react.js`:
- Around line 144-157: stripQuotes currently strips matching leading/trailing
quotes even for a single-character quoted string (e.g. "'" or '"'), producing an
empty string and hiding the lone quote; update stripQuotes to only remove
matching surrounding single or double quotes when the input length is >= 2 (e.g.
check str.length >= 2) so that lone quote characters are returned unchanged,
leaving the function behavior otherwise intact.
- Around line 388-398: The non‑alphanumeric detection currently runs on the raw
JSON when isJson is true and thus falsely flags punctuation; update render() so
detectNonAlphanumeric only runs when !isJson (or alternatively call a JSON‑aware
helper you add). Concretely, change the nonAlphanumericResult/hasNonAlphanumeric
logic in render() (referencing detectNonAlphanumeric, isJson,
getNonAlphanumericChars and getNonPrintableCharsFromJson) to skip or use a
JSON‑aware routine when isJson is true so object/array punctuation isn’t
reported.

🧹 Nitpick comments (1)

src/components/NonPrintableHighlighter/NonPrintableHighlighter.react.js (1)

439-470: Make the info badge keyboard‑accessible.
This is a clickable <div> without keyboard support, so the details panel can’t be opened via keyboard. Consider button semantics or add role="button", tabIndex, and a key handler.

♿ Example accessibility patch

-            <div
-              className={`${styles.infoBadge} ${this.state.showNonAlphanumericDetails ? styles.expanded : ''}`}
-              onClick={() => this.setState({ showNonAlphanumericDetails: !this.state.showNonAlphanumericDetails })}
-              title="Click for details"
-            >
+            <div
+              className={`${styles.infoBadge} ${this.state.showNonAlphanumericDetails ? styles.expanded : ''}`}
+              role="button"
+              tabIndex={0}
+              onClick={() => this.setState({ showNonAlphanumericDetails: !this.state.showNonAlphanumericDetails })}
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  this.setState({ showNonAlphanumericDetails: !this.state.showNonAlphanumericDetails });
+                }
+              }}
+              title="Click for details"
+            >

[parseplatformorg]

🎉 This change has been released in version 8.3.0-alpha.24