feat: Add quick-add button to array parameter in Cloud Config #2866
Conversation
|
🚀 Thanks for opening this pull request! |
|
Warning Rate limit exceeded@mtrezza has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 6 minutes and 37 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the 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. 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThe update adds user notifications and a new action for array-type configuration parameters in the config dashboard. It introduces a notification system for transient messages and a button to add unique entries to array parameters, using a modal prompt and direct server update. Minor UI and style adjustments are also included. A new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ConfigComponent
participant ParseServer
User->>ConfigComponent: Clicks "Add" button on array parameter
ConfigComponent->>User: Shows AddArrayEntryDialog modal
User->>ConfigComponent: Submits new entry (JSON or string)
ConfigComponent->>ParseServer: Sends request to add entry (master key)
alt Success
ParseServer-->>ConfigComponent: Success response
ConfigComponent->>ConfigComponent: Show success notification
ConfigComponent->>ConfigComponent: Refresh config data
else Failure
ParseServer-->>ConfigComponent: Error response
ConfigComponent->>ConfigComponent: Show error notification
end
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
The label |
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) |
mtrezza
changed the title
mtrezza
changed the title
mtrezza
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/dashboard/Data/Config/Config.react.js(8 hunks)
🧰 Additional context used
🧠 Learnings (1)
src/dashboard/Data/Config/Config.react.js (1)
Learnt from: mtrezza
PR: parse-community/parse-dashboard#2828
File: src/dashboard/Data/Browser/Browser.react.js:1605-1607
Timestamp: 2025-05-27T12:09:47.644Z
Learning: In script execution dialogs in Parse Dashboard (specifically the `confirmExecuteScriptRows` method in `src/dashboard/Data/Browser/Browser.react.js`), individual `setState` calls to update `processedScripts` counter should be kept as-is rather than batched, because this provides real-time progress feedback to users in the dialog UI.
🪛 GitHub Check: Lint
src/dashboard/Data/Config/Config.react.js
[failure] 484-484:
'e' is defined but never used
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Docker linux/amd64
🔇 Additional comments (6)
src/dashboard/Data/Config/Config.react.js (6)
26-26: LGTM: Notification component importThe import statement is correctly added for the notification functionality.
45-48: LGTM: Notification state managementThe state variables for managing notifications and timeout are well-structured. The
noteTimeoutreference will properly handle clearing timers.
140-151: LGTM: Notification rendering logicThe notification rendering logic is well-implemented with proper conditional rendering and error/success state management.
264-270: LGTM: Action column implementationThe conditional rendering of the plus button for Array types is appropriate and follows the established pattern.
291-296: LGTM: Action column headerThe header addition is consistent with the existing table structure.
461-474: LGTM: Well-implemented notification methodThe
showNotemethod properly manages notification state and automatically clears notifications after 3.5 seconds. The timeout clearing prevents memory leaks.
Uffizzi Ephemeral Environment
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/dashboard/Data/Config/AddArrayEntryDialog.react.js (2)
14-18: Consider adding PropTypes for better documentation.The component expects
onCancelandonConfirmprops but doesn't define PropTypes. Consider adding them for better type safety and documentation.+import PropTypes from 'prop-types'; + export default class AddArrayEntryDialog extends React.Component { + static propTypes = { + onCancel: PropTypes.func.isRequired, + onConfirm: PropTypes.func.isRequired, + }; + constructor() {
20-22: Consider enhancing validation logic.The current validation only checks for non-empty values. Consider adding more robust validation such as trimming whitespace or validating JSON format if needed.
valid() { - return this.state.value !== ''; + return this.state.value.trim() !== ''; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/dashboard/Data/Config/AddArrayEntryDialog.react.js(1 hunks)src/dashboard/Data/Config/Config.react.js(10 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/dashboard/Data/Config/Config.react.js
🧰 Additional context used
🧠 Learnings (1)
src/dashboard/Data/Config/AddArrayEntryDialog.react.js (1)
Learnt from: mtrezza
PR: parse-community/parse-dashboard#2828
File: src/dashboard/Data/Browser/Browser.react.js:1605-1607
Timestamp: 2025-05-27T12:09:47.644Z
Learning: In script execution dialogs in Parse Dashboard (specifically the `confirmExecuteScriptRows` method in `src/dashboard/Data/Browser/Browser.react.js`), individual `setState` calls to update `processedScripts` counter should be kept as-is rather than batched, because this provides real-time progress feedback to users in the dialog UI.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Docker linux/amd64
🔇 Additional comments (3)
src/dashboard/Data/Config/AddArrayEntryDialog.react.js (3)
8-12: LGTM! Clean import structure.The imports are well-organized and follow the project's component structure.
24-30: Excellent flexible input handling!The JSON parsing approach is well-designed, allowing users to input both JSON objects and plain strings. The fallback to raw string on parsing failure provides excellent UX flexibility.
32-50: Well-structured modal implementation.The modal is properly configured with good UX features like autofocus and appropriate disabled state handling. The component integration is clean and follows React best practices.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/dashboard/Data/Config/Config.scss (2)
1-1: Prefer@useover@importfor future-proof Sass code
@importis now officially deprecated in Dart Sass; the Sass team recommends migrating to@use/@forwardfor better namespacing and faster compile times. Unless the rest of the codebase is still on@import, consider switching early to avoid technical debt.-@import 'stylesheets/globals.scss'; +@use 'stylesheets/globals' as *;
3-7: Class name is very generic – risk of leaking styles
.actionIconcould match unrelated SVG wrappers elsewhere, causing unintended color overrides. Prefix or scope the selector (e.g..configActionIconor.Config-table .actionIcon) to minimise collision risk and keep styles discoverable.-.actionIcon { +.config-actionIcon { svg { fill: $lightBlue; } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/dashboard/Data/Config/Config.scss(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Node 22
- GitHub Check: Node 18
- GitHub Check: Node 20
- GitHub Check: Docker linux/amd64
- GitHub Check: Node Engine Check
- GitHub Check: Lint
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/dashboard/Data/Config/Config.scss (2)
4-10: Consider enlarging hit-area for accessibility25 px × 25 px is below the WCAG-recommended 44 px minimum target size for touch devices, which may frustrate mobile / tablet users when tapping the icon.
- width: 25px; - height: 25px; + /* Increase touch target while keeping visual size via padding */ + width: 44px; + height: 44px; + padding: 10px; // tweak to centre the SVGIf you’d rather avoid a visual size change, you can keep the SVG at 25 px and simply add transparent padding to reach 44 px.
11-13: UsecurrentColorinstead of hard-coded fill for easier themingHard-coding
$darkBlueties the SVG color to this one stylesheet. Settingfill: currentColor;lets the icon inherit fromcolor, so themes or hover/disabled states can be changed in one place without editing SVG rules.- svg { - fill: $darkBlue; - } + svg { + fill: currentColor; + color: $darkBlue; // default, but can be overridden by themes/hover + }This makes the component more flexible while preserving the default palette.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/dashboard/Data/Config/AddArrayEntryDialog.react.js(1 hunks)src/dashboard/Data/Config/Config.react.js(10 hunks)src/dashboard/Data/Config/Config.scss(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/dashboard/Data/Config/Config.react.js
- src/dashboard/Data/Config/AddArrayEntryDialog.react.js
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Docker linux/amd64
mtrezza
changed the title
# [7.3.0-alpha.1](7.2.1...7.3.0-alpha.1) (2025-07-07) ### Features * Add quick-add button to array parameter in Cloud Config ([#2866](#2866)) ([e98ccb2](e98ccb2))
|
🎉 This change has been released in version 7.3.0-alpha.1 |
Summary
Testing
npm run lint(fails: Cannot find module 'eslint/config')npm test(fails: jest: not found)https://chatgpt.com/codex/tasks/task_e_686b1b37db54832d89ef6887e264b889
Summary by CodeRabbit
New Features
Style
Documentation