feat: Add clipboard icon to copy value of key-value element in info panel #2871
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
🚀 Thanks for opening this pull request! |
📝 WalkthroughWalkthroughThe changes modify the AggregationPanel component to pass a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AggregationPanel
participant KeyValueElement
participant Clipboard
participant Notification
User->>AggregationPanel: Hover over key-value item
AggregationPanel->>KeyValueElement: Render with showNote prop
User->>KeyValueElement: Click copy icon
KeyValueElement->>Clipboard: Copy item.value
Clipboard-->>KeyValueElement: Success
KeyValueElement->>Notification: Call showNote("Copied to clipboard")
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error code ERR_SSL_WRONG_VERSION_NUMBER 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ 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)
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: 2
🧹 Nitpick comments (1)
src/components/AggregationPanel/AggregationPanelComponents.js (1)
15-20: Add error handling for copy operation.The copy operation could potentially fail. Consider adding error handling to provide user feedback if the copy action fails.
const handleCopy = () => { - copy(String(item.value)); - if (showNote) { - showNote('Value copied to clipboard', false); - } + try { + const success = copy(String(item.value)); + if (showNote) { + showNote(success ? 'Value copied to clipboard' : 'Failed to copy value', !success); + } + } catch (error) { + if (showNote) { + showNote('Failed to copy value', true); + } + } };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/AggregationPanel/AggregationPanel.js(1 hunks)src/components/AggregationPanel/AggregationPanel.scss(1 hunks)src/components/AggregationPanel/AggregationPanelComponents.js(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/components/AggregationPanel/AggregationPanel.js (1)
src/components/AggregationPanel/AggregationPanelComponents.js (2)
KeyValueElement(14-37)KeyValueElement(14-37)
⏰ 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 (2)
src/components/AggregationPanel/AggregationPanel.scss (1)
24-34: LGTM! Clean CSS implementation for copy icon behavior.The styling correctly implements the show-on-hover pattern for the copy icon with appropriate visual alignment and spacing.
src/components/AggregationPanel/AggregationPanel.js (1)
104-112: LGTM! Proper prop passing for copy functionality.The addition of the
showNoteprop correctly enables the copy notification feature while maintaining the existing component structure.
Comment on lines
32
to
34
| <span className={styles.copyIcon} onClick={handleCopy}> | ||
| <Icon name="clone-icon" width={12} height={12} /> | ||
| </span> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add accessibility attributes to the copy icon.
The copy icon is missing accessibility attributes, making it less accessible to screen readers and keyboard users.
- <span className={styles.copyIcon} onClick={handleCopy}>
+ <span
+ className={styles.copyIcon}
+ onClick={handleCopy}
+ role="button"
+ tabIndex={0}
+ aria-label="Copy value to clipboard"
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ handleCopy();
+ }
+ }}
+ >
<Icon name="clone-icon" width={12} height={12} />
</span>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <span className={styles.copyIcon} onClick={handleCopy}> | |
| <Icon name="clone-icon" width={12} height={12} /> | |
| </span> | |
| <span | |
| className={styles.copyIcon} | |
| onClick={handleCopy} | |
| role="button" | |
| tabIndex={0} | |
| aria-label="Copy value to clipboard" | |
| onKeyDown={(e) => { | |
| if (e.key === 'Enter' || e.key === ' ') { | |
| e.preventDefault(); | |
| handleCopy(); | |
| } | |
| }} | |
| > | |
| <Icon name="clone-icon" width={12} height={12} /> | |
| </span> |
🤖 Prompt for AI Agents
In src/components/AggregationPanel/AggregationPanelComponents.js around lines 32
to 34, the copy icon span lacks accessibility attributes. Add appropriate
attributes such as role="button", tabIndex="0" to make it focusable by keyboard,
and include aria-label describing the action (e.g., "Copy to clipboard") to
improve screen reader accessibility. Also, ensure the onClick handler is
complemented with onKeyPress or onKeyDown to support keyboard interaction.
Comment on lines
+2
to
+3
| import copy from 'copy-to-clipboard'; | ||
| import Icon from 'components/Icon/Icon.react'; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify the imported dependencies are available.
Ensure that copy-to-clipboard library and the Icon component with "clone-icon" name are available in the project.
🏁 Script executed:
#!/bin/bash
# Check if copy-to-clipboard is available in package.json
echo "Checking copy-to-clipboard dependency:"
cat package.json | jq '.dependencies."copy-to-clipboard", .devDependencies."copy-to-clipboard"'
# Check if Icon component exists and supports clone-icon
echo "Checking Icon component:"
fd -t f "Icon.react.js" -x cat {}
# Search for clone-icon usage or definition
echo "Searching for clone-icon definition:"
rg "clone-icon" -A 2 -B 2Length of output: 2473
Dependencies verified: copy-to-clipboard@3.3.3 and Icon('clone-icon') are available
The copy-to-clipboard package is listed in package.json and the Icon component supports the clone-icon sprite (see src/icons/clone-icon.svg).
Next steps (src/components/AggregationPanel/AggregationPanelComponents.js):
- Add accessibility attributes to the copy icon wrapper:
- e.g.
<span role="button" aria-label="Copy value" …>
- e.g.
- Introduce error handling around the copy operation in
handleCopy:- wrap
copy(String(item.value))in try/catch and surface failures (toast, console.warn, etc.)
- wrap
🤖 Prompt for AI Agents
In src/components/AggregationPanel/AggregationPanelComponents.js around lines 2
to 3, enhance accessibility by adding role="button" and aria-label="Copy value"
attributes to the span wrapping the copy icon. Additionally, update the
handleCopy function to wrap the copy(String(item.value)) call in a try/catch
block, and handle any errors by displaying a toast notification or logging a
warning to the console.
Uffizzi Ephemeral Environment
|
parseplatformorg
pushed a commit
that referenced
this pull request
Jul 7, 2025
# [7.3.0-alpha.2](7.3.0-alpha.1...7.3.0-alpha.2) (2025-07-07) ### Features * Add clipboard icon to copy value of key-value element in info panel ([#2871](#2871)) ([7862c42](7862c42))
|
🎉 This change has been released in version 7.3.0-alpha.2 |
4 tasks
3 tasks
parseplatformorg
pushed a commit
that referenced
this pull request
Aug 1, 2025
# [7.3.0](7.2.1...7.3.0) (2025-08-01) ### Bug Fixes * Changing "Relative dates" option of saved filter does not enable save button ([#2947](#2947)) ([4f4977d](4f4977d)) * Class object counters in sidebar not updating ([#2950](#2950)) ([0f1920b](0f1920b)) * Clicking linked pointer with Cmd key in view table doesn't open page in new browser tab ([#2902](#2902)) ([101b194](101b194)) * Fails to generate MFA code with CLI command `parse-dashboard --createMFA` ([#2883](#2883)) ([544df1f](544df1f)) * Gracefully fail when trying to get new features in latest version of dashboard ([#2880](#2880)) ([1969a0e](1969a0e)) * Header checkbox in data browser does not indicate when a few rows are selected ([#2957](#2957)) ([e4ab666](e4ab666)) * Hyperlink in Views table ignores `urlQuery` key ([#2926](#2926)) ([c5eedf4](c5eedf4)) * Incorrect table cell width in App Settings table ([#2933](#2933)) ([d46765b](d46765b)) * Info panel scroll-to-top setting not persistent across dashboard sessions ([#2938](#2938)) ([2b78087](2b78087)) * Invalid clipboard content for multi-cell copy in data browser ([#2882](#2882)) ([22a2065](22a2065)) * Legacy filters without `filterId` cannot be deleted in data browser ([#2946](#2946)) ([65df9d6](65df9d6)) * Legacy filters without `filterId` do not appear in sidebar ([#2945](#2945)) ([fde3769](fde3769)) * Modal text input can be resized smaller than its cell in Safari browser ([#2930](#2930)) ([82a0cdc](82a0cdc)) * Move settings button on data browser toolbar for better UI ([#2940](#2940)) ([c473ce6](c473ce6)) * Pagination footer bar hides rows in data browser ([#2879](#2879)) ([6bc2da8](6bc2da8)) * Race condition on info panel request shows info panel data not corresponding to selected cell ([#2909](#2909)) ([6f45bb3](6f45bb3)) * Saved legacy filter in data browser cannot be deleted or cloned ([#2944](#2944)) ([15da90d](15da90d)) * Saved legacy filter with classname in query cannot be deleted ([#2948](#2948)) ([05ee5b3](05ee5b3)) * Selected text in info panel cannot be copied using Ctrl+C ([#2951](#2951)) ([0164c19](0164c19)) * Views not sorted alphabetically in sidebar ([#2943](#2943)) ([4c81fe4](4c81fe4)) * Warning dialog is shown after executing script on selected rows ([#2899](#2899)) ([027f1ed](027f1ed)) ### Features * Add additional values in info panel key-value element ([#2904](#2904)) ([a8f110e](a8f110e)) * Add AI agent for natural language interaction with Parse Server ([#2954](#2954)) ([32bd6e8](32bd6e8)) * Add clipboard icon to copy value of key-value element in info panel ([#2871](#2871)) ([7862c42](7862c42)) * Add Cloud Function as data source for views with optional text or file upload ([#2939](#2939)) ([f5831c7](f5831c7)) * Add column freezing in data browser ([#2877](#2877)) ([29f4a88](29f4a88)) * Add custom data views with aggregation query ([#2888](#2888)) ([b1679db](b1679db)) * Add environment variable support for AI agent configuration ([#2956](#2956)) ([2ac9e7e](2ac9e7e)) * Add hyperlink support in Views table ([#2925](#2925)) ([06cfc11](06cfc11)) * Add inclusive date filters "is on or after", "is on or before" in data browser ([#2929](#2929)) ([c8d621b](c8d621b)) * Add quick-add button to array parameter in Cloud Config ([#2866](#2866)) ([e98ccb2](e98ccb2)) * Add row number column to data browser ([#2878](#2878)) ([c0aa407](c0aa407)) * Add Settings menu to scroll info panel to top when browsing through rows ([#2937](#2937)) ([f339cb8](f339cb8)) * Add support for "not equal to" filter for Boolean values in data browser and analytics explorer ([#2914](#2914)) ([d55b89c](d55b89c)) * Add support for `Image` type in View table to display images ([#2952](#2952)) ([6a6b1f0](6a6b1f0)) * Add type mismatch warning when quick-adding entry to Cloud Config array parameter ([#2875](#2875)) ([bb1837f](bb1837f)) * Add view edit icon to views list in sidebar ([#2901](#2901)) ([96e33b9](96e33b9)) * Allow editing filter without loading data in data browser ([#2949](#2949)) ([9623580](9623580)) * Allow editing saved filters in data browser ([#2942](#2942)) ([daaccaa](daaccaa)) * Allow freeform text view resizing in modal dialogs ([#2910](#2910)) ([1399162](1399162)) * Persist info panel visibility when navigating across classes in data browser ([#2908](#2908)) ([1a3610a](1a3610a)) * Prefetch info panel data with config options `prefetchObjects` and `prefetchStale` ([#2915](#2915)) ([54a8156](54a8156)) * Warn when leaving data browser page with selected rows ([#2887](#2887)) ([206ead1](206ead1)) ### Performance Improvements * Add config option `enableResourceCache` to cache dashboard resources locally for faster loading in additional browser tabs ([#2920](#2920)) ([41a4963](41a4963))
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Testing
npm test(fails: jest not found)npm run lint(fails: cannot find module 'eslint/config')https://chatgpt.com/codex/tasks/task_e_686ba5f9d250832dab77f9cd8c029c44
Summary by CodeRabbit
New Features
Style