feat: Add row number column to data browser #2878
Merged
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! |
|
The label |
|
Caution Review failedThe pull request is closed. 📝 Walkthrough## Walkthrough
Row number display functionality has been introduced to the data browser table. This includes new props, state, and UI elements to render a sticky row number column, as well as context menu actions to toggle its visibility. Supporting style classes and layout calculations were updated to accommodate the new column.
## Changes
| File(s) | Change Summary |
|------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| src/components/BrowserRow/BrowserRow.react.js | Added support for `showRowNumber`, `rowNumberWidth`, and `skip` props. Renders a sticky row number cell when enabled, with locale formatting and correct positioning. |
| src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js | Extended context menu to toggle row number display. Added row number header cell rendering logic and styling when enabled. |
| src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss | Added `.rowNumber` CSS class for header cell. Minor formatting and whitespace corrections. |
| src/dashboard/Data/Browser/Browser.react.js | Formatting and style fixes only (quotes, indentation, semicolons). Added missing `skip` prop to `DataBrowser` instantiation. No logic changes. |
| src/dashboard/Data/Browser/Browser.scss | Added `.rowNumberCell` CSS class for row number cells. Lowercased hex codes and improved formatting. |
| src/dashboard/Data/Browser/BrowserTable.react.js | Added calculation and usage of `rowNumberWidth`. Updated layout offsets and row width calculations. Passed `showRowNumber`, `rowNumberWidth`, and `skip` props to children. Integrated with header bar and row components. |
| src/dashboard/Data/Browser/DataBrowser.react.js | Introduced `showRowNumber` state and `setShowRowNumber` method. Passed these and `skip`/`limit` props to `BrowserTable`. Minor formatting cleanups. |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant DataBrowser
participant BrowserTable
participant DataBrowserHeaderBar
participant BrowserRow
User->>DataBrowser: Open table view
DataBrowser->>BrowserTable: Pass showRowNumber, setShowRowNumber, skip, limit
BrowserTable->>DataBrowserHeaderBar: Pass showRowNumber, setShowRowNumber, rowNumberWidth
BrowserTable->>BrowserRow: Pass showRowNumber, rowNumberWidth, skip (for each row)
User->>DataBrowserHeaderBar: Open context menu, toggle row number
DataBrowserHeaderBar->>DataBrowser: Call setShowRowNumber(newValue)
DataBrowser->>BrowserTable: Update showRowNumber prop
BrowserTable->>DataBrowserHeaderBar: Update header rendering
BrowserTable->>BrowserRow: Update row rendering (show/hide row number)Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes detected related to the objectives from the linked issues. |
🎉 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: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/components/BrowserRow/BrowserRow.react.js(3 hunks)src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js(3 hunks)src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss(3 hunks)src/dashboard/Data/Browser/Browser.react.js(12 hunks)src/dashboard/Data/Browser/Browser.scss(10 hunks)src/dashboard/Data/Browser/BrowserTable.react.js(7 hunks)src/dashboard/Data/Browser/DataBrowser.react.js(7 hunks)
🧰 Additional context used
🧠 Learnings (4)
src/dashboard/Data/Browser/Browser.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.
src/dashboard/Data/Browser/DataBrowser.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.
src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.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.
src/dashboard/Data/Browser/BrowserTable.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/components/BrowserRow/BrowserRow.react.js
[failure] 93-93:
Expected indentation of 14 spaces but found 16
[failure] 92-92:
Expected indentation of 16 spaces but found 18
[failure] 91-91:
Expected indentation of 16 spaces but found 18
[failure] 90-90:
Expected indentation of 16 spaces but found 18
[failure] 89-89:
Expected indentation of 16 spaces but found 18
[failure] 88-88:
Expected indentation of 16 spaces but found 18
[failure] 113-113:
Expected indentation of 18 spaces but found 20
[failure] 112-112:
Expected indentation of 18 spaces but found 20
[failure] 111-111:
Expected indentation of 18 spaces but found 20
[failure] 110-110:
Expected indentation of 18 spaces but found 20
⏰ 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 (32)
src/dashboard/Data/Browser/DataBrowser.react.js (5)
53-53: LGTM: Row number state initialized correctly.The
showRowNumberstate is properly initialized tofalse, which is a sensible default.
73-73: LGTM: Method binding follows consistent pattern.The
setShowRowNumbermethod binding follows the same pattern as other methods in the constructor.
557-559: LGTM: Simple state setter implementation.The
setShowRowNumbermethod is correctly implemented as a simple state setter.
676-679: LGTM: Props passed to support row number functionality.The necessary props (
showRowNumber,setShowRowNumber,skip,limit) are correctly passed to theBrowserTablecomponent to enable the row number feature.
302-305: LGTM: Improved code formatting for readability.The formatting changes improve readability by properly structuring the ternary operator for field value extraction.
src/dashboard/Data/Browser/Browser.react.js (10)
664-664: LGTM: Consistent string formatting.Changed from single quotes to double quotes around the ID for consistency with other similar messages in the codebase.
767-767: LGTM: Consistent string formatting.The string formatting change maintains consistency with other success messages throughout the codebase.
911-911: LGTM: Added missing semicolon.Good catch adding the missing semicolon after the object property.
1273-1273: LGTM: Consistent string formatting.The string formatting change maintains consistency with other update messages.
1401-1401: LGTM: Consistent string formatting for error messages.All error message formatting changes maintain consistency by using double quotes around IDs.
Also applies to: 1429-1429, 1446-1446
1601-1609: LGTM: Improved Promise formatting.The Promise chain formatting is improved for better readability with proper indentation and structure.
1636-1639: LGTM: Improved method call formatting.The multi-line method call formatting improves readability.
Also applies to: 1644-1647
1968-1968: LGTM: Consistent formatting.Minor formatting improvement for the method call.
1989-1989: LGTM: Smooth scrolling behavior added.Adding
behavior: 'smooth'provides better UX when scrolling to the top of the page.
2212-2212: LGTM: Critical prop addition for row number feature.The
skipprop is essential for the row number feature to calculate correct row numbers based on pagination parameters.src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss (5)
21-21: LGTM: Minor formatting improvement.The webkit-transform property formatting is improved for consistency.
56-57: LGTM: Added missing background color.The background color addition to the
.checkclass maintains visual consistency.
59-68: LGTM: Well-designed row number header styling.The new
.rowNumberclass provides appropriate styling for the row number column header with:
- Proper dimensions (30px height, line-height)
- Right text alignment for numbers
- Consistent background color matching the header theme
- Appropriate border and padding
- Box-sizing for proper layout
The styling integrates well with the existing design system.
104-104: LGTM: Added missing width property.The
width: 100%property ensures the skeleton row spans the full width correctly.
111-111: LGTM: Formatting improvements.The added empty line and background-color property improve code organization and completeness.
Also applies to: 114-114
src/components/BrowserRow/BrowserRow.react.js (1)
36-38: LGTM: New props properly added for row number functionality.The new props
showRowNumber,rowNumberWidth, andskipare correctly added to support the row number feature implementation.src/dashboard/Data/Browser/Browser.scss (2)
113-122: LGTM: Well-designed CSS class for row number cells.The
.rowNumberCellclass is properly styled with:
- Appropriate display, height, and alignment properties
- Consistent border styling with other table cells
- Right-aligned text for number display
- Proper padding and box-sizing
37-37: LGTM: Hex color code normalization.Good practice to normalize hex color codes to lowercase for consistency.
Also applies to: 54-54, 72-72, 75-75, 99-99, 237-237, 238-238
src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js (3)
18-35: LGTM: Context menu properly implements row number toggle.The context menu enhancement is well implemented:
- Dynamic text based on current
showRowNumberstate- Proper callback to toggle the state
- Maintains existing freeze/unfreeze functionality
- Clean array structure for menu items
54-55: LGTM: New props properly added.The
showRowNumberandrowNumberWidthprops are correctly added to the destructuring assignment.
69-83: LGTM: Row number header cell implementation is consistent.The header cell implementation is excellent:
- Proper conditional rendering based on
showRowNumber- Consistent styling with checkbox cell (sticky positioning, z-index)
- Appropriate left offset (30px) to align with row number cells
- Clean use of CSS classes and inline styles
- Simple "#" symbol is appropriate for row numbers
src/dashboard/Data/Browser/BrowserTable.react.js (6)
124-128: LGTM: Row number width calculation is logical.The width calculation is well-designed:
- Uses maximum row number (skip + data length or limit) for accurate sizing
- Multiplies character count by 8 pixels plus 16 for padding
- Conditional calculation based on
showRowNumberstate- Returns 0 when disabled to avoid layout issues
129-138: LGTM: Sticky positioning correctly accounts for row number width.The sticky left calculation properly includes
rowNumberWidthin the initial offset (30 + rowNumberWidth), ensuring proper alignment of frozen columns.
142-146: LGTM: Row width calculation properly includes row number width.The total row width calculation correctly includes
rowNumberWidthto ensure proper table layout and scrolling behavior.
181-183: LGTM: Row number props consistently passed to all BrowserRow instances.All BrowserRow instances (edit clone rows, new row, and data rows) properly receive the
showRowNumber,rowNumberWidth, andskipprops for consistent behavior.Also applies to: 267-269, 364-366
465-465: LGTM: Editor positioning correctly updated for row number width.The editor's
wrapLeftcalculation properly accounts for the row number width (30 + rowNumberWidth), ensuring the editor appears in the correct position.
597-599: LGTM: DataBrowserHeaderBar receives necessary row number props.The header bar component properly receives
showRowNumber,setShowRowNumber, androwNumberWidthprops to render the header and provide toggle functionality.
Comment on lines
104
to
122
| {showRowNumber && ( | ||
| <span | ||
| className={styles.rowNumberCell} | ||
| style={ | ||
| freezeIndex >= 0 | ||
| ? { | ||
| position: 'sticky', | ||
| left: 30, | ||
| zIndex: 1, | ||
| background: rowBackground, | ||
| borderBottom: '1px solid #e3e3ea', | ||
| width: rowNumberWidth, | ||
| } | ||
| : { width: rowNumberWidth } | ||
| } | ||
| > | ||
| {row >= 0 ? (skip + row + 1).toLocaleString() : ''} | ||
| </span> | ||
| )} |
There was a problem hiding this comment.
Row number cell implementation looks good, but fix indentation issues.
The row number cell logic is correctly implemented:
- Proper conditional rendering based on
showRowNumber - Correct calculation:
(skip + row + 1)for pagination - Appropriate styling with sticky positioning matching checkbox cell
- Good use of
toLocaleString()for number formatting
However, there are indentation issues that need to be addressed.
Apply this diff to fix the indentation:
{showRowNumber && (
<span
className={styles.rowNumberCell}
style={
freezeIndex >= 0
? {
- position: 'sticky',
- left: 30,
- zIndex: 1,
- background: rowBackground,
- borderBottom: '1px solid #e3e3ea',
- width: rowNumberWidth,
- }
+ position: 'sticky',
+ left: 30,
+ zIndex: 1,
+ background: rowBackground,
+ borderBottom: '1px solid #e3e3ea',
+ width: rowNumberWidth,
+ }
: { width: rowNumberWidth }
}
>
{row >= 0 ? (skip + row + 1).toLocaleString() : ''}
</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
| {showRowNumber && ( | |
| <span | |
| className={styles.rowNumberCell} | |
| style={ | |
| freezeIndex >= 0 | |
| ? { | |
| position: 'sticky', | |
| left: 30, | |
| zIndex: 1, | |
| background: rowBackground, | |
| borderBottom: '1px solid #e3e3ea', | |
| width: rowNumberWidth, | |
| } | |
| : { width: rowNumberWidth } | |
| } | |
| > | |
| {row >= 0 ? (skip + row + 1).toLocaleString() : ''} | |
| </span> | |
| )} | |
| {showRowNumber && ( | |
| <span | |
| className={styles.rowNumberCell} | |
| style={ | |
| freezeIndex >= 0 | |
| ? { | |
| position: 'sticky', | |
| left: 30, | |
| zIndex: 1, | |
| background: rowBackground, | |
| borderBottom: '1px solid #e3e3ea', | |
| width: rowNumberWidth, | |
| } | |
| : { width: rowNumberWidth } | |
| } | |
| > | |
| {row >= 0 ? (skip + row + 1).toLocaleString() : ''} | |
| </span> | |
| )} |
🧰 Tools
🪛 GitHub Check: Lint
[failure] 113-113:
Expected indentation of 18 spaces but found 20
[failure] 112-112:
Expected indentation of 18 spaces but found 20
[failure] 111-111:
Expected indentation of 18 spaces but found 20
[failure] 110-110:
Expected indentation of 18 spaces but found 20
🤖 Prompt for AI Agents
In src/components/BrowserRow/BrowserRow.react.js between lines 104 and 122, the
row number cell JSX block has inconsistent indentation. Fix the indentation by
aligning the opening and closing tags and nested properties properly, ensuring
each nested level is indented uniformly for better readability and
maintainability.
4 tasks
parseplatformorg
pushed a commit
that referenced
this pull request
Jul 9, 2025
# [7.3.0-alpha.6](7.3.0-alpha.5...7.3.0-alpha.6) (2025-07-09) ### Features * Add row number column to data browser ([#2878](#2878)) ([c0aa407](c0aa407))
|
🎉 This change has been released in version 7.3.0-alpha.6 |
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_686e65027e58832d959c26859e50029e
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Style
Closes: #2484