feat: Add context menu in data browser to add cell content or selected text to Cloud Config parameter

[mtrezza]

New Pull Request Checklist

• I am not disclosing a vulnerability.
• I am creating this PR in reference to an issue.

Feature

Adds "Add to config parameter..." context menu item to add cell content to Cloud Config array. When right-clicking on selected text inside the cell while in edit mode, or on selected text in the info panel, hold the Alt key while clicking to show the custom context menu.

Summary by CodeRabbit

• New Features

  • Added "Add to config parameter..." context menu across the app to add cell values or selected text to cloud config array parameters.
  • Enabled Alt+right-click context menus in text editors and aggregation panels to quickly invoke the add-to-config action.
  • Added a dialog UI for adding and managing entries in array configuration parameters.

• Style

  • Added non-interactive separators in context menus for clearer organization.

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

[parse-github-assistant]

🚀 Thanks for opening this pull request! We appreciate your effort in improving the project. Please let us know once your pull request is ready for review.

[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 9 minutes and 42 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.

📥 Commits

Reviewing files that changed from the base of the PR and between 31ce32e and f1da5ed.

📒 Files selected for processing (3)

• src/components/ContextMenu/ContextMenu.react.js
• src/dashboard/Data/Browser/Browser.react.js
• src/dashboard/Data/Config/AddArrayEntryDialog.react.js

📝 Walkthrough

Walkthrough

Adds "Add to config parameter..." context-menu flow: threads arrayConfigParams and onAddToArrayConfig through UI components, captures Alt+right-click in cells, string editors, and aggregation panels, shows a parameter-selection menu, opens AddArrayEntryDialog, and performs AddUnique updates to cloud config.

Changes

Cohort / File(s)	Summary
Context Menu Rendering & Styles src/components/ContextMenu/ContextMenu.react.js, src/components/ContextMenu/ContextMenu.scss	Render support for items of type 'separator' (renders an empty <li> with .separator class); added .separator CSS rules.
Aggregation Panels src/components/AggregationPanel/AggregationPanel.js	Added onContextMenu prop; attached onContextMenu={onContextMenu} to outer container and forwarded to nested AggregationPanel instances.
Browser Cell Context Menu src/components/BrowserCell/BrowserCell.react.js	New getAddToConfigContextMenuOption() method; context menu items now alphabetically sorted; optionally insert separator and append "Add to config parameter..." submenu built from arrayConfigParams.
Row/Table Prop Threading src/components/BrowserRow/BrowserRow.react.js, src/dashboard/Data/Browser/BrowserTable.react.js	Threaded arrayConfigParams and onAddToArrayConfig props from BrowserTable/BrowserRow down to BrowserCell and editors in clone/new/edit paths.
StringEditor Context Menu src/components/StringEditor/StringEditor.react.js	Added handleContextMenu(e) bound in constructor and attached to input/textarea; on Alt+context builds menu from arrayConfigParams and calls onAddToArrayConfig.
DataBrowser Integration src/dashboard/Data/Browser/DataBrowser.react.js	Added handleAggregationPanelTextContextMenu(event) (Alt+context handler) and passed it as onContextMenu to AggregationPanel instances.
Editor Prop API src/dashboard/Data/Browser/Editor.react.js	Added setContextMenu, arrayConfigParams, and onAddToArrayConfig props; propagated to StringEditor and other child editors.
Browser (Main) - Config Array Flow src/dashboard/Data/Browser/Browser.react.js	Added state (arrayConfigParams, showAddToConfigDialog, addToConfigParam, addToConfigLastType, addToConfigPrefillValue); implemented fetchArrayConfigParams(), getEntryType(), handleAddToArrayConfig(), handleConfirmAddToConfig(); loads params on mount; renders AddArrayEntryDialog.
AddArrayEntryDialog Initialization src/dashboard/Data/Config/AddArrayEntryDialog.react.js	Constructor now accepts props and initializes state.value from `props.initialValue

Sequence Diagram

sequenceDiagram
    participant User
    participant Cell as BrowserCell / StringEditor
    participant Context as ContextMenu
    participant DataBrowser as DataBrowser / AggregationPanel
    participant Browser as Browser (state & handlers)
    participant Dialog as AddArrayEntryDialog
    participant Config as Config Store / Server

    User->>Cell: Alt + Right-click (selected text)
    Cell->>Cell: handleContextMenu(e) / build menu items
    Cell->>Context: setContextMenu({position, items})
    User->>Context: Click "Add to config parameter..." → choose param
    Context->>Browser: onAddToArrayConfig(paramName, value)
    Browser->>Browser: handleAddToArrayConfig(param, value) (open dialog)
    Browser->>Dialog: show dialog with initialValue
    User->>Dialog: Confirm add entry
    Dialog->>Browser: handleConfirmAddToConfig(finalValue)
    Browser->>Config: PUT config with AddUnique operation
    Config-->>Browser: Success / Error
    Browser->>Browser: fetchArrayConfigParams() refresh & close dialog

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat: Execute scripts via right-click on info panel header column #3068 — Modifies BrowserCell context-menu logic and adds context-menu handlers on panel headers; overlaps with BrowserCell menu changes here.
• feat: Add quick-add button to array parameter in Cloud Config #2866 — Implements AddArrayEntryDialog and related config array entry flows; closely related to the dialog usage and server AddUnique calls.
• feat: Add context menu in data browser to get related records from String and Number fields #3118 — Also updates BrowserCell context menu option builders and ContextMenu rendering; touches similar UI/menu code paths.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is incomplete; it covers the feature but omits the required 'Issue Description' (Closes: FILL_THIS_OUT) and 'Approach' sections from the template, and the 'TODOs before merging' section is missing.	Add the missing 'Closes:' section referencing the related issue, provide an 'Approach' subsection explaining the implementation strategy, and include the 'TODOs before merging' checklist with relevant items addressed.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main feature: adding a context menu to the data browser for adding cell content or selected text to Cloud Config parameters.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/AggregationPanel/AggregationPanel.js (1)

153-190: Wire the context menu for nested panels, too.

onContextMenu is forwarded (Line 141), but the depth>0 render path never attaches it, so Alt+right‑click won’t surface the add‑to‑config menu inside nested panels.

🐛 Proposed fix

-        {isExpanded && (
-          <div className={styles.nestedPanelContent}>
+        {isExpanded && (
+          <div className={styles.nestedPanelContent} onContextMenu={onContextMenu}>

🤖 Fix all issues with AI agents

In `@src/components/BrowserCell/BrowserCell.react.js`:
- Around line 633-657: The menu builder getAddToConfigContextMenuOption can leak
real values for hidden cells because it only checks the stringified
copyableValue; add an explicit guard that returns early when the cell is hidden
(e.g., check this.props.hidden or an equivalent per-cell hidden flag) before
computing cellValue so the "Add to config parameter..." option is suppressed for
hidden fields; update the guard alongside arrayConfigParams and
onAddToArrayConfig checks and leave the rest of the mapping
(arrayConfigParams.map and onAddToArrayConfig callback) unchanged.

In `@src/components/ContextMenu/ContextMenu.react.js`:
- Around line 123-131: The submenu vertical offset is currently computed from
the index (path[level] * 30), which assumes fixed item height and breaks when
separators exist; update the mouse/hover handler that opens submenus (e.g., the
function handling item hover like
handleMouseEnter/openSubmenu/setSubmenuPosition) to compute the submenu top
using the hovered element's actual position (use event.currentTarget.offsetTop
relative to the parent menu or subtract parent.getBoundingClientRect().top from
event.currentTarget.getBoundingClientRect().top) and store that value instead of
index*30 so submenu alignment accounts for separators and variable item heights.

In `@src/dashboard/Data/Browser/Browser.react.js`:
- Around line 327-329: The component currently calls
this.fetchArrayConfigParams() only on mount, so arrayConfigParams can go stale
when the passed-in appId changes; add logic to componentDidUpdate(prevProps)
that compares prevProps.appId !== this.props.appId and, when different, calls
this.fetchArrayConfigParams() (and any related refresh methods) so the context
menu targets the correct app; apply the same change to the other Browser
instance/section that uses fetchArrayConfigParams (lines referenced around the
other block) to ensure both locations refresh on appId changes.

In `@src/dashboard/Data/Config/AddArrayEntryDialog.react.js`:
- Around line 17-21: The component's constructor sets state.value from
props.initialValue but doesn't normalize to a string or keep it in sync when
props change; update the constructor to coerce props.initialValue to a string
for state.value (e.g., String(props.initialValue || '')) and add a
componentDidUpdate(prevProps) that checks if prevProps.initialValue !==
this.props.initialValue and, if so, sets state.value to the normalized string of
this.props.initialValue; make sure this fixes TextInput's expectation of a
string and prevents stale state while the dialog is mounted.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/dashboard/Data/Browser/Browser.react.js`:
- Around line 2573-2600: The async method fetchArrayConfigParams sets state
after an await without checking component mount status; before calling
this.setState({ arrayConfigParams: arrayParams }) in fetchArrayConfigParams,
guard the update with the existing mount flag (this._isMounted) used elsewhere
(e.g., loadAllClassFilters) so you only call this.setState when this._isMounted
is true to avoid setting state on an unmounted component.

♻️ Duplicate comments (2)

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

633-663: Hidden cell guard has been properly implemented.

The method now correctly checks for hidden prop at the beginning (line 637-639) and returns early, preventing sensitive hidden field values from being exposed through the config menu. This addresses the security concern from the previous review.

The filtering of special values ((undefined), (null), (hidden)) at line 650 provides additional defense-in-depth.

src/dashboard/Data/Browser/Browser.react.js (1)

327-328: Refetch config params when switching apps.

fetchArrayConfigParams() is only called on mount. When the user switches apps (appId changes), the arrayConfigParams state will contain stale data from the previous app, causing the context menu to target wrong config parameters.

Add the call in componentWillReceiveProps when appId changes:

🐛 Proposed fix

   componentWillReceiveProps(nextProps, nextContext) {
     if (nextProps.params.appId !== this.props.params.appId) {
       this.removeLocation();
       this.addLocation(nextProps.params.appId);
+      this.fetchArrayConfigParams();
     }

🧹 Nitpick comments (1)

src/dashboard/Data/Browser/Browser.react.js (1)

2612-2632: Consider escaping quotes in the prefill value.

When lastType === 'string', the code wraps the selected text in quotes (line 2623). If selectedText contains embedded quotes (e.g., foo"bar), the resulting prefill value "foo"bar" would be invalid JSON. While AddArrayEntryDialog handles this gracefully by falling back to the raw string, this may confuse users expecting the value to be pre-parsed correctly.

♻️ Optional: Escape embedded quotes

     // If the last item in the array is a string, wrap the prefilled text in quotes
     let prefillValue = selectedText;
     if (lastType === 'string') {
-      prefillValue = `"${selectedText}"`;
+      prefillValue = JSON.stringify(selectedText);
     }

Using JSON.stringify will properly escape embedded quotes, newlines, and other special characters.

[parseplatformorg]

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