feat: Add custom CSS styling for info panel items #2788
Conversation
|
🚀 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. |
|
Warning Rate limit exceeded@parseplatformorg has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 29 minutes and 4 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 (1)
📝 WalkthroughWalkthroughThe changes introduce support for custom inline CSS styling of info panel segments and items in Parse Dashboard. Documentation in Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DashboardConfig
participant AggregationPanel
participant PanelComponent
participant ItemComponent
User->>DashboardConfig: Defines info panel with segments/items and style fields
DashboardConfig->>AggregationPanel: Passes segments/items with style/titleStyle
AggregationPanel->>PanelComponent: Renders segment containers with segment.style
AggregationPanel->>PanelComponent: Renders headings with segment.titleStyle
AggregationPanel->>ItemComponent: Renders each item with item.style
Possibly related PRs
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 (
|
mtrezza
changed the title
🎉 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
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
README.md (1)
902-903: Fix typo in style example.There's a typo in the example CSS property.
- "style": { "backgroudColor": "lightgray", "font-size": "10px" }, + "style": { "backgroundColor": "lightgray", "fontSize": "10px" },src/components/AggregationPanel/AggregationPanelComponents.js (3)
26-28: Consider consistent style application location.The style is applied to the
<table>element rather than the root<div>as in other components. This is functional but inconsistent with the pattern used in other elements.Consider applying the style to the root div for consistency:
export const TableElement = ({ columns, rows, style }) => ( - <div className="table-element"> - <table style={style}> + <div className="table-element" style={style}> + <table>Alternatively, if styling the table directly is intentional, this could be kept as is.
59-61: Consider consistent style application location.The style is applied to the
<video>element rather than the root<div>as in other components like TextElement and ImageElement.Consider applying the style to the root div for consistency:
export const VideoElement = ({ url, style }) => ( - <div className="video-element"> - <video controls className={styles.video} style={style}> + <div className="video-element" style={style}> + <video controls className={styles.video}>Alternatively, if styling the video element directly is intentional, this could be kept as is.
69-71: Consider consistent style application location.Similar to the VideoElement, the style is applied to the
<audio>element rather than the root<div>.Consider applying the style to the root div for consistency:
export const AudioElement = ({ url, style }) => ( - <div className="audio-element"> - <audio controls className={styles.audio} style={style}> + <div className="audio-element" style={style}> + <audio controls className={styles.audio}>Alternatively, if styling the audio element directly is intentional, this could be kept as is.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
README.md(13 hunks)src/components/AggregationPanel/AggregationPanel.js(4 hunks)src/components/AggregationPanel/AggregationPanelComponents.js(4 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/components/AggregationPanel/AggregationPanel.js (1)
src/components/AggregationPanel/AggregationPanelComponents.js (14)
TextElement(5-9)TextElement(5-9)KeyValueElement(12-23)KeyValueElement(12-23)TableElement(26-47)TableElement(26-47)ImageElement(50-56)ImageElement(50-56)VideoElement(59-66)VideoElement(59-66)AudioElement(69-76)AudioElement(69-76)ButtonElement(79-103)ButtonElement(79-103)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Docker linux/amd64
🔇 Additional comments (12)
src/components/AggregationPanel/AggregationPanel.js (5)
29-29: LGTM: Added style prop to component signature.The style prop has been added to the component parameters, which enables custom styling to be passed down from parent components.
96-97: LGTM: Style properties applied to segment container and heading.Style properties are now applied to both the segment container and its heading, allowing for customization of individual segments and their titles.
102-115: LGTM: Added style prop to all item components.Style props have been systematically added to all item components (TextElement, KeyValueElement, TableElement, etc.), ensuring consistent styling capabilities across the entire info panel.
131-131: LGTM: Added style prop to nested panel.Style properties are now properly passed to nested AggregationPanel instances, allowing for consistent styling across the component hierarchy.
149-149: LGTM: Style applied to nested panel header.The style prop is now properly applied to the nested panel header container, completing the styling support for all panel elements.
README.md (3)
129-147: LGTM: Improved table formatting for better readability.The parameter table has been reformatted with consistent column alignment, improving readability of the documentation.
886-892: LGTM: Updated segments documentation with style properties.The segments documentation now includes the new
styleandtitleStyleproperties, properly describing the CSS styling capabilities.
922-926: LGTM: Consistently documented style properties for all item types.The style property has been consistently added to the documentation for all item types (text, keyValue, table, image, video, audio, button, panel).
Also applies to: 949-949, 1008-1008, 1047-1047, 1067-1067, 1087-1087, 1112-1112, 1143-1143
src/components/AggregationPanel/AggregationPanelComponents.js (4)
5-6: LGTM: Added style support to TextElement.Style prop has been added to the TextElement component and applied to the root div element.
12-13: LGTM: Added style support to KeyValueElement.Style prop has been added to the KeyValueElement component and applied to the root div element.
50-51: LGTM: Added style support to ImageElement.Style prop has been added to the ImageElement component and applied to the root div element.
79-79: LGTM: Added style support to ButtonElement.Style prop has been added to the ButtonElement component and applied to the button element, which is appropriate for this case since the styling should affect the actual button.
Also applies to: 98-98
# [7.2.0-alpha.1](7.1.1-alpha.3...7.2.0-alpha.1) (2025-05-06) ### Features * Add custom CSS styling for info panel items ([#2788](#2788)) ([f031e5d](f031e5d))
|
🎉 This change has been released in version 7.2.0-alpha.1 |
# [7.2.0](7.1.0...7.2.0) (2025-06-01) ### Bug Fixes * Data browser not scrolling to top when changing filter while cell selected ([#2821](#2821)) ([c2527dc](c2527dc)) * Data browser table shows loading indicator when info panel is loading ([#2782](#2782)) ([da57e5e](da57e5e)) * Improperly aligned unfolding sub-items in context menu in data browser ([#2726](#2726)) ([3fed292](3fed292)) * Notifications fade out erratically when executing a script on large number of rows ([#2822](#2822)) ([3891381](3891381)) * Pagination does not reset to page 1 when clicking on class or filter ([#2798](#2798)) ([29d1447](29d1447)) * Saving new filter in data browser overwrites filters added in other dashboard instances ([#2769](#2769)) ([46bc154](46bc154)) * Selecting a saved filter in data browser may highlight a different filter ([#2783](#2783)) ([4c6e853](4c6e853)) ### Features * Add confirmation dialog before saving a Cloud Config parameter that has been modified since editing it ([#2770](#2770)) ([adb9b5c](adb9b5c)) * Add custom CSS styling for info panel items ([#2788](#2788)) ([f031e5d](f031e5d)) * Add relative date filter in data browser for date constraints relative to when the query is run ([#2736](#2736)) ([d9dfd69](d9dfd69)) * Add script execution on parallel batches with option `script.executionBatchSize` ([#2828](#2828)) ([cee8b8d](cee8b8d)) * Keyboard Enter key can be used to select item in data browser filter dialog field dropdown ([#2771](#2771)) ([dc14710](dc14710))
|
🎉 This change has been released in version 7.2.0 |
New Pull Request Checklist
Issue Description
Adds custom CSS styling to info panel items.
Approach
styleproperty to which the style for the element can be defined in general.titleStylewhich allows to style a specific HTML element within the item.Example:
{ "type": "text", "text": "This user has a high churn risk!", "style": { "backgroundColor": "red" }, }TODOs before merging
Summary by CodeRabbit
New Features
Documentation