feat: Add quick-remove button to array parameter in Cloud Config

[mtrezza]

New Pull Request Checklist

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

Issue Description

There is no way to easily remove a value from a Cloud Config param of type array.

Approach

This adds a remove button (-) to the Cloud Config param to remove a value without having to manually edit the whole array object. If the array contains objects, it allows to conveniently remove all objects that match a key-path and value, like a.b.c: true.

Summary by CodeRabbit

• New Features

  • Added ability to remove entries from array-type configuration parameters.
  • Added side-by-side add and remove action icons for managing array parameters.
  • Introduced removal dialog with optional key-based filtering for precise entry removal.

• Style

  • Improved layout spacing for configuration action icons.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adds array entry removal functionality to the Config component. A new RemoveArrayEntryDialog component enables users to remove entries from array-type parameters, supporting both direct value removal and filtering by key paths. The Config component integrates dialog state management, lifecycle methods, and API interactions to handle the removal workflow, with corresponding styling updates for action icons.

Changes

Cohort / File(s)	Summary
Config Component Core Logic src/dashboard/Data/Config/Config.react.js	Introduces array entry removal dialog flow with new state fields (showRemoveEntryDialog, removeEntryParam, removeEntryArrayValue). Adds four methods: openRemoveEntryDialog() and closeRemoveEntryDialog() for dialog lifecycle; getValueAtPath() for nested object access; removeArrayEntry() for API-backed removal with config history sync and notifications. Wraps add/remove icons in fragment for side-by-side rendering.
Removal Dialog Component src/dashboard/Data/Config/RemoveArrayEntryDialog.react.js	New React component providing modal UI for removing array entries. Includes state management for input value and key-path filtering. Utility methods: extractKeyPaths() for collecting object keys, getValueAtPath() for nested access, getValue() for parsing input. Conditional UI renders key-filter option and dropdown when array contains objects; otherwise provides simple value input. Danger-styled modal with Remove/Cancel actions and appropriate field validation.
Action Icon Styling src/dashboard/Data/Config/Config.scss	Adds margin-right: 4px to .configActionIcon class with &:last-child rule to reset margin for proper icon spacing.

Sequence Diagram

sequenceDiagram
    actor User
    participant Config as Config Component
    participant Dialog as RemoveArrayEntryDialog
    participant API as Backend API
    participant Store as Config State

    User->>Config: Click Remove Icon
    Config->>Config: openRemoveEntryDialog(param)
    Config->>Dialog: Render with param data
    Dialog->>Dialog: extractKeyPaths() for objects
    User->>Dialog: Enter value (+ optional key filter)
    User->>Dialog: Click Remove
    Dialog->>Dialog: getValue() & build payload
    Dialog->>Config: handleConfirm(removeConfig)
    Config->>API: updateConfig(newArray)
    API-->>Config: Success response
    Config->>Store: Update local config + history
    Config->>Config: closeRemoveEntryDialog()
    Config->>User: Show success notification

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: Add quick-add button to array parameter in Cloud Config #2866: Introduces complementary add-entry dialog flow with similar state management and dialog lifecycle patterns in Config.react.js
• feat: Detect and warn about unprintable characters in Cloud Config parameter values #3119: Integrates NonPrintableHighlighter component used by RemoveArrayEntryDialog for value input rendering

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: adding a quick-remove button to array parameters in Cloud Config, which aligns with the primary objective of the PR.
Description check	✅ Passed	The description covers the problem, approach, and relevant checklist items, though it does not explicitly address the TODO section for tests and documentation.
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 docstrings

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

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

[parseplatformorg]

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