5a6479c5dd
## 🐞 Problem We've identified several issues with the TableWidgetV2's infinite scroll functionality: - **Stale Data After Toggle** When users enable infinite scroll for the first time, the table's state and cached data aren't properly reset, potentially leading to incorrect data display and inconsistent behavior. - **Height Changes Breaking Existing Data** When a table's height is increased while infinite scroll is enabled, the existing cached data becomes invalid due to changing offsets, but the table wasn't resetting its state accordingly. - **Empty Initial View** When loading a table with infinite scroll enabled, rows were not visible during the initial load until data was fetched, creating a jarring user experience. - **Disabled Properties Still Rendering Controls** Property controls that should be disabled (based on section disabling conditions) were still being rendered and active, causing unexpected behavior. --- ## ✅ Solution ### 1. Implement Table Reset on Infinite Scroll Toggle Added a new method `resetTableForInfiniteScroll()` that properly resets the table's state when infinite scroll is enabled. This method: - Clears cached table data - Resets the "end of data" flag - Resets all meta properties to their default values - Sets the page number back to `1` and triggers a page load ```ts resetTableForInfiniteScroll = () => { const { infiniteScrollEnabled, pushBatchMetaUpdates } = this.props; if (infiniteScrollEnabled) { // reset the cachedRows pushBatchMetaUpdates("cachedTableData", {}); pushBatchMetaUpdates("endOfData", false); // reset the meta properties const metaProperties = Object.keys(TableWidgetV2.getMetaPropertiesMap()); metaProperties.forEach((prop) => { if (prop !== "pageNo") { const defaultValue = TableWidgetV2.getMetaPropertiesMap()[prop]; this.props.updateWidgetMetaProperty(prop, defaultValue); } }); // reset and reload page this.updatePageNumber(1, EventType.ON_NEXT_PAGE); } }; ``` --- ### 2. Reset on Height Changes Added a check in `componentDidUpdate` to detect height changes and reset the table when needed: ```ts // Reset widget state when height changes while infinite scroll is enabled if ( infiniteScrollEnabled && prevProps.componentHeight !== componentHeight ) { this.resetTableForInfiniteScroll(); } ``` --- ### 3. Improved Empty State Rendering Modified the `InfiniteScrollBodyComponent` to show placeholder rows during initial load by using the maximum of `rows.length` and `pageSize`: ```ts const itemCount = useMemo( () => Math.max(rows.length, pageSize), [rows.length, pageSize], ); ``` This ensures the table maintains its expected height and appearance even before data is loaded. --- ### 4. Fixed Property Control Rendering Fixed the `PropertyControl` component to respect the `isControlDisabled` flag by conditionally rendering the control: ```ts {!isControlDisabled && PropertyControlFactory.createControl( config, { onPropertyChange: onPropertyChange, // ...other props }, // ...other args )} ``` This prevents disabled controls from being rendered and potentially causing issues. --- These improvements significantly enhance the stability and user experience of **TableWidgetV2**'s infinite scroll functionality. Fixes #39377 ## Automation /ok-to-test tags="@tag.Table, @tag.Widget, @tag.Binding, @tag.Sanity, @tag.PropertyPane" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/14373134089> > Commit: 2b0715bbbe2e9a254cd287f831329be529a17c3c > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14373134089&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Table, @tag.Widget, @tag.Binding, @tag.Sanity, @tag.PropertyPane` > Spec: > <hr>Thu, 10 Apr 2025 07:15:53 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Property panels now display controls only when enabled, enhancing clarity. - Table widgets offer smoother infinite scrolling with automatic resets on state or size changes. - Columns dynamically adjust for optimal display when infinite scrolling is active. - **Bug Fixes** - Improved handling of item counts and loading states in infinite scrolling. - **Refactor** - Improved performance through optimized item computations and streamlined scrolling logic. - Removed redundant loading button logic for a cleaner user experience. - **Tests** - Expanded test scenarios to verify improved content wrapping and rich HTML rendering in table cells, with a focus on internal logic and behavior. - Enhanced clarity and robustness of infinite scroll tests by verifying loading through scrolling actions. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Rahul Barwal <rahul.barwal@appsmith.com> |
||
|---|---|---|
| .. | ||
| .husky | ||
| .yarn | ||
| config | ||
| cypress | ||
| docker/templates | ||
| generators | ||
| packages | ||
| public | ||
| scripts | ||
| src | ||
| test | ||
| typings | ||
| .babelrc | ||
| .dockerignore | ||
| .editorconfig | ||
| .eslintrc.base.json | ||
| .eslintrc.js | ||
| .fork-ts-checkerrc | ||
| .gitignore | ||
| .lintstagedrc.json | ||
| .nvmrc | ||
| .prettierignore | ||
| .prettierrc | ||
| .sentryclirc | ||
| .yarnrc.yml | ||
| build.sh | ||
| cypress_ci_custom.config.ts | ||
| cypress_ci_hosted.config.ts | ||
| cypress_ci.config.ts | ||
| cypress-add-tags.js | ||
| cypress.config.ts | ||
| download-assets.js | ||
| jest.config.js | ||
| knip.json | ||
| package.json | ||
| README.md | ||
| README.old.md | ||
| start-caddy.sh | ||
| start-https.sh | ||
| tailwind.config.js | ||
| tsconfig.json | ||
| tsconfig.path.json | ||
| vercel.json | ||
| yarn.lock | ||
Appsmith Client
This project was bootstrapped with Create React App.
For details on setting up your development machine, please refer to the Setup Guide