Skip to content

feat: Add additional values in info panel key-value element #2904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 15, 2025

Conversation

mtrezza
Copy link
Member

@mtrezza mtrezza commented Jul 15, 2025

Summary

  • support multiple values in KeyValueElement so arrays can be passed for value, url and isRelativeUrl

Testing

  • npm test
  • npx eslint src/components/AggregationPanel/AggregationPanelComponents.js

https://chatgpt.com/codex/tasks/task_e_68761033ec0c832d9b65c99cdae73723

Summary by CodeRabbit

  • New Features

    • Enhanced support for displaying multiple values and URLs within key-value elements.
  • Bug Fixes

    • Minor formatting corrections in text display components.
  • Documentation

    • Updated info panel configuration docs to support multiple values and new optional properties with usage examples.

Copy link

I will reformat the title to use the proper commit message syntax.

Copy link

parse-github-assistant bot commented Jul 15, 2025

🚀 Thanks for opening this pull request!

@parse-github-assistant parse-github-assistant bot changed the title feat: allow arrays in KeyValueElement feat: Allow arrays in KeyValueElement Jul 15, 2025
Copy link

coderabbitai bot commented Jul 15, 2025

📝 Walkthrough

Walkthrough

The KeyValueElement component was modified to support multiple values by normalizing single or multiple inputs into an array and updating the rendering logic to map over all values, conditionally rendering links or spans. A helper function was added for value rendering, and a minor formatting fix was applied to the TextElement component. The README documentation was updated to reflect the new optional values property allowing multiple additional values with URLs.

Changes

File(s) Change Summary
src/components/AggregationPanel/AggregationPanelComponents.js Updated KeyValueElement to handle multiple values by normalizing into an array, added helper function for rendering values with URL handling, adjusted copy-to-clipboard logic to copy only the primary value, and applied minor formatting fix in TextElement.
README.md Extended documentation for "Key-Value Item" type to include new optional values array property with example usage showing multiple values and URL options.

Possibly related PRs


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e32efc0 and 683f26a.

📒 Files selected for processing (1)
  • README.md (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • README.md

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
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai auto-generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

The label codex cannot be used here.

@parseplatformorg
Copy link
Contributor

parseplatformorg commented Jul 15, 2025

🎉 Snyk checks have passed. No issues have been found so far.

security/snyk check is complete. No issues have been found. (View Details)

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
src/components/AggregationPanel/AggregationPanelComponents.js (1)

57-62: Improve accessibility and consider semantic markup.

The current implementation uses spaces to separate multiple values, which may not be ideal for screen readers. Consider using semantic markup for better accessibility.

Consider using a more semantic approach:

-      {values.map((val, idx) => (
-        <React.Fragment key={idx}>
-          {idx > 0 && ' '}
-          {renderValue(val, idx)}
-        </React.Fragment>
-      ))}
+      <span role="list" aria-label="Values">
+        {values.map((val, idx) => (
+          <span key={idx} role="listitem">
+            {idx > 0 && <span aria-hidden="true"> </span>}
+            {renderValue(val, idx)}
+          </span>
+        ))}
+      </span>

This provides better semantic meaning and screen reader support.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4564a25 and 59d6287.

📒 Files selected for processing (1)
  • src/components/AggregationPanel/AggregationPanelComponents.js (1 hunks)
🔇 Additional comments (2)
src/components/AggregationPanel/AggregationPanelComponents.js (2)

7-7: LGTM: Clean destructuring syntax.

The formatting change improves readability by destructuring props directly in the function signature.


28-28: LGTM: Copy functionality correctly updated for arrays.

The change from copying a single value to joining all values with spaces is appropriate for the new array support.

coderabbitai[bot]
coderabbitai bot previously approved these changes Jul 15, 2025
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
README.md (1)

984-993: Minor wording nit – clarify dual use of value + values.

Consider adding a short inline comment explaining that when both value and values are provided, the component renders value first followed by the entries in values, to avoid any ambiguity for readers skimming the example.

No blocking issue, purely documentation clarity.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 487adcb and 9de68b7.

📒 Files selected for processing (2)
  • README.md (3 hunks)
  • src/components/AggregationPanel/AggregationPanelComponents.js (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/components/AggregationPanel/AggregationPanelComponents.js
🧰 Additional context used
🪛 LanguageTool
README.md

[style] ~949-~949: To form a complete sentence, be sure to include a subject or ‘there’.
Context: ...| No | The value text to display. Can be an array of values. ...

(MISSING_IT_THERE)

🪛 markdownlint-cli2 (0.17.2)
README.md

949-949: Table column count
Expected: 5; Actual: 6; Too many cells, extra data will be missing

(MD056, table-column-count)

README.md Outdated
Comment on lines 949 to 953
| `value` | String | Array | - | No | The value text to display. Can be an array of values. |
| `values` | Array | - | Yes | Additional values to display after `value`. Each item is an object with `value`, optional `url` and `isRelativeUrl`. |
| `url` | String | `undefined` | Yes | The URL that will be opened in a new browser tab when clicking on the value text. It can be set to an absolute URL or a relative URL in which case the base URL is `<PROTOCOL>://<HOST>/<MOUNT_PATH>/`. |
| `isRelativeUrl` | Boolean | `false` | Yes | Set this to `true` when linking to another dashboard page, in which case the base URL for the relative URL will be `<PROTOCOL>://<HOST>/<MOUNT_PATH>/apps/<APP_NAME>/`. |
| `style` | Object | - | Yes | The CSS style definition. |
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Fix Markdown table – too many columns due to un-escaped “|”.

The added value row now has 6 cells, which breaks the table rendering and triggers MD056.
Escape the internal pipe so it stays inside the “Type” cell and realign the columns.

-| `value`         | String | Array | -           | No       | The value text to display. Can be an array of values.                                                                                                                                                                              |
+| `value`         | String\|Array | - | No | The value text to display. Can be an array of values. |

This also removes the extra “Default” placeholder that was introduced by accident.
After the change markdownlint and LanguageTool warnings disappear and the table renders correctly.

📝 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
| `value` | String | Array | - | No | The value text to display. Can be an array of values. |
| `values` | Array | - | Yes | Additional values to display after `value`. Each item is an object with `value`, optional `url` and `isRelativeUrl`. |
| `url` | String | `undefined` | Yes | The URL that will be opened in a new browser tab when clicking on the value text. It can be set to an absolute URL or a relative URL in which case the base URL is `<PROTOCOL>://<HOST>/<MOUNT_PATH>/`. |
| `isRelativeUrl` | Boolean | `false` | Yes | Set this to `true` when linking to another dashboard page, in which case the base URL for the relative URL will be `<PROTOCOL>://<HOST>/<MOUNT_PATH>/apps/<APP_NAME>/`. |
| `style` | Object | - | Yes | The CSS style definition. |
| `value` | String\|Array | - | No | The value text to display. Can be an array of values. |
| `values` | Array | - | Yes | Additional values to display after `value`. Each item is an object with `value`, optional `url` and `isRelativeUrl`. |
| `url` | String | `undefined` | Yes | The URL that will be opened in a new browser tab when clicking on the value text. It can be set to an absolute URL or a relative URL in which case the base URL is `<PROTOCOL>://<HOST>/<MOUNT_PATH>/`. |
| `isRelativeUrl` | Boolean | `false` | Yes | Set this to `true` when linking to another dashboard page, in which case the base URL for the relative URL will be `<PROTOCOL>://<HOST>/<MOUNT_PATH>/apps/<APP_NAME>/`. |
| `style` | Object | - | Yes | The CSS style definition. |
🧰 Tools
🪛 LanguageTool

[style] ~949-~949: To form a complete sentence, be sure to include a subject or ‘there’.
Context: ...| No | The value text to display. Can be an array of values. ...

(MISSING_IT_THERE)

🪛 markdownlint-cli2 (0.17.2)

949-949: Table column count
Expected: 5; Actual: 6; Too many cells, extra data will be missing

(MD056, table-column-count)

🤖 Prompt for AI Agents
In README.md around lines 949 to 953, the Markdown table for the `value` row has
an unescaped pipe character in the "Type" column, causing the row to split into
six cells and breaking the table layout. To fix this, escape the internal pipe
character within the "Type" cell by prefixing it with a backslash, and remove
the unintended extra "Default" column placeholder. Then realign the columns so
the table renders correctly and passes markdownlint checks.

@mtrezza mtrezza changed the title feat: Allow arrays in KeyValueElement feat: Add multiple values in info panel key-value element Jul 15, 2025
@mtrezza mtrezza changed the title feat: Add multiple values in info panel key-value element feat: Add support for additional values in info panel key-value element via the values parameter Jul 15, 2025
@mtrezza mtrezza changed the title feat: Add support for additional values in info panel key-value element via the values parameter feat: Add additional values in info panel key-value element via the values parameter Jul 15, 2025
@mtrezza mtrezza changed the title feat: Add additional values in info panel key-value element via the values parameter feat: Add additional values in info panel key-value element via new values parameter Jul 15, 2025
@mtrezza mtrezza changed the title feat: Add additional values in info panel key-value element via new values parameter feat: Add additional values in info panel key-value element Jul 15, 2025
@mtrezza mtrezza merged commit a8f110e into alpha Jul 15, 2025
11 checks passed
@mtrezza mtrezza deleted the codex/add-array-support-for-keyvalueelement-values branch July 15, 2025 13:35
parseplatformorg pushed a commit that referenced this pull request Jul 15, 2025
# [7.3.0-alpha.15](7.3.0-alpha.14...7.3.0-alpha.15) (2025-07-15)

### Features

* Add additional values in info panel key-value element ([#2904](#2904)) ([a8f110e](a8f110e))
@parseplatformorg
Copy link
Contributor

🎉 This change has been released in version 7.3.0-alpha.15

@parseplatformorg parseplatformorg added the state:released-alpha Released as alpha version label Jul 15, 2025
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
Labels
state:released-alpha Released as alpha version
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants