From b79b160d2fabb2af3bc2e982223d548759ad5030 Mon Sep 17 00:00:00 2001 From: Rahul Barwal Date: Thu, 25 Sep 2025 16:01:59 +0530 Subject: [PATCH] fix: updates the logic to not interfere with DSL when infinitescroll is enabled (#41217) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description TLDR: Refines TableWidgetV2 cell editability logic to disable editing when infinite scroll is enabled. Problem When people toggled infinite scroll of ON and then moved it back to ON, we were forcibly enabling editing for all columns which was wrong product behavior. Root cause The utilities were putting the additables to true in DSL. And editability logic missed a check for the infinite scroll setting, causing cells to remain editable even when infinite scroll was active. Solution This PR handles the integration of infinite scroll support into TableWidgetV2 by updating header and cell components to respect the infiniteScrollEnabled prop. Editability is now disabled when infinite scroll is active, ensuring consistent and predictable user experience. Fixes #`Issue Number` _or_ Fixes https://github.com/appsmithorg/appsmith-ee/issues/8144 > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Table" ### :mag: Cypress test results > [!TIP] > ๐ŸŸข ๐ŸŸข ๐ŸŸข All cypress tests have passed! ๐ŸŽ‰ ๐ŸŽ‰ ๐ŸŽ‰ > Workflow run: > Commit: 4d0ff9c41d97c55a94a3d261b962faef492f453a > Cypress dashboard. > Tags: `@tag.Table` > Spec: >
Thu, 25 Sep 2025 06:15:12 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No --------- Signed-off-by: dependabot[bot] Signed-off-by: Laveena Enid Co-authored-by: Aparna Ramachandran <101863839+btsgh@users.noreply.github.com> Co-authored-by: Abhijeet <41686026+abhvsn@users.noreply.github.com> Co-authored-by: yatinappsmith <84702014+yatinappsmith@users.noreply.github.com> Co-authored-by: Nidhi Co-authored-by: Shrikant Sharat Kandula Co-authored-by: โ€œsneha122โ€ <โ€œsneha@appsmith.comโ€> Co-authored-by: Nidhi Co-authored-by: Ankita Kinger Co-authored-by: Rudraprasad Das Co-authored-by: Trisha Anand Co-authored-by: Trisha Anand Co-authored-by: Arpit Mohan Co-authored-by: Hetu Nandu Co-authored-by: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Co-authored-by: Albin Co-authored-by: Manish Kumar <107841575+sondermanish@users.noreply.github.com> Co-authored-by: Pawan Kumar Co-authored-by: Apeksha Bhosale <7846888+ApekshaBhosale@users.noreply.github.com> Co-authored-by: Diljit Co-authored-by: jacquesikot Co-authored-by: Goutham Pratapa Co-authored-by: Wyatt Walter Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Laveena Enid <109572422+laveena-en@users.noreply.github.com> Co-authored-by: Abhinav Jha --- .../component/cellComponents/HeaderCell.tsx | 5 +- .../widget/__tests__/propertyUtils.test.ts | 93 ------------------- .../widgets/TableWidgetV2/widget/index.tsx | 5 +- .../propertyConfig/PanelConfig/General.ts | 5 +- .../widget/propertyConfig/contentConfig.ts | 2 - .../TableWidgetV2/widget/propertyUtils.ts | 43 --------- .../reactTableUtils/getColumnsPureFn.tsx | 11 +++ .../widgets/TableWidgetV2/widget/utilities.ts | 7 +- 8 files changed, 28 insertions(+), 143 deletions(-) diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/HeaderCell.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/HeaderCell.tsx index 9bc73b67ea..b938f722a9 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/HeaderCell.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/HeaderCell.tsx @@ -200,7 +200,10 @@ const HeaderCellComponent = (props: HeaderProps) => { const isColumnEditable = props.column.columnProperties.isCellEditable && props.column.columnProperties.isEditable && - isColumnTypeEditable(props.column.columnProperties.columnType); + isColumnTypeEditable( + props.column.columnProperties.columnType, + isInfiniteScrollEnabled, + ); const toggleColumnFreeze = (value: StickyType) => { handleColumnFreeze && diff --git a/app/client/src/widgets/TableWidgetV2/widget/__tests__/propertyUtils.test.ts b/app/client/src/widgets/TableWidgetV2/widget/__tests__/propertyUtils.test.ts index 2d3eb8985b..160ab69d5f 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/__tests__/propertyUtils.test.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/__tests__/propertyUtils.test.ts @@ -10,7 +10,6 @@ import { updateCustomColumnAliasOnLabelChange, selectColumnOptionsValidation, allowedFirstDayOfWeekRange, - updateCellEditabilityOnInfiniteScrollChange, updateSearchSortFilterOnInfiniteScrollChange, } from "../propertyUtils"; import _ from "lodash"; @@ -1151,96 +1150,4 @@ describe("Infinite Scroll Update Hooks - ", () => { ), ).toBeUndefined(); }); - - it("updateCellEditabilityOnInfiniteScrollChange - should disable cell editability when infinite scroll is enabled", () => { - // Setup mock primary columns - const props = { - primaryColumns: { - column1: { - id: "column1", - alias: "column1", - isEditable: true, - isCellEditable: true, - }, - column2: { - id: "column2", - alias: "column2", - isEditable: true, - isCellEditable: true, - }, - }, - } as unknown as TableWidgetProps; - - // When infinite scroll is enabled - expect( - updateCellEditabilityOnInfiniteScrollChange( - props, - "infiniteScrollEnabled", - true, - ), - ).toEqual([ - { - propertyPath: "primaryColumns.column1.isCellEditable", - propertyValue: false, - }, - { - propertyPath: "primaryColumns.column1.isEditable", - propertyValue: false, - }, - { - propertyPath: "primaryColumns.column2.isCellEditable", - propertyValue: false, - }, - { - propertyPath: "primaryColumns.column2.isEditable", - propertyValue: false, - }, - ]); - - // When infinite scroll is disabled - expect( - updateCellEditabilityOnInfiniteScrollChange( - props, - "infiniteScrollEnabled", - false, - ), - ).toEqual([ - { - propertyPath: "primaryColumns.column1.isCellEditable", - propertyValue: true, - }, - { - propertyPath: "primaryColumns.column1.isEditable", - propertyValue: true, - }, - { - propertyPath: "primaryColumns.column2.isCellEditable", - propertyValue: true, - }, - { - propertyPath: "primaryColumns.column2.isEditable", - propertyValue: true, - }, - ]); - - // Test with no primary columns - const propsWithoutColumns = {} as TableWidgetProps; - - expect( - updateCellEditabilityOnInfiniteScrollChange( - propsWithoutColumns, - "infiniteScrollEnabled", - true, - ), - ).toBeUndefined(); - - // When some other value is passed - expect( - updateCellEditabilityOnInfiniteScrollChange( - props, - "infiniteScrollEnabled", - "some-other-value", - ), - ).toBeUndefined(); - }); }); diff --git a/app/client/src/widgets/TableWidgetV2/widget/index.tsx b/app/client/src/widgets/TableWidgetV2/widget/index.tsx index 78a21afa3f..2e865783be 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/index.tsx +++ b/app/client/src/widgets/TableWidgetV2/widget/index.tsx @@ -580,6 +580,7 @@ class TableWidgetV2 extends BaseWidget { getTableColumns = () => { const { columnWidthMap, + infiniteScrollEnabled, isPreviewMode, orderedTableColumns, renderMode, @@ -597,6 +598,7 @@ class TableWidgetV2 extends BaseWidget { componentWidth, renderMode, isPreviewMode, + infiniteScrollEnabled, ); }; @@ -2067,7 +2069,8 @@ class TableWidgetV2 extends BaseWidget { } const isColumnEditable = - column.isEditable && isColumnTypeEditable(column.columnType); + column.isEditable && + isColumnTypeEditable(column.columnType, this.props.infiniteScrollEnabled); const alias = props.cell.column.columnProperties.alias; const isCellEditable = isColumnEditable && cellProperties.isCellEditable; diff --git a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/General.ts b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/General.ts index 82ccf971bc..96210b4dd0 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/General.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/General.ts @@ -137,7 +137,10 @@ export default { const columnType = get(props, `${baseProperty}.columnType`, ""); const isDerived = get(props, `${baseProperty}.isDerived`, false); - return !isColumnTypeEditable(columnType) || isDerived; + return ( + !isColumnTypeEditable(columnType, props.infiniteScrollEnabled) || + isDerived + ); }, }, { diff --git a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/contentConfig.ts b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/contentConfig.ts index 02de96fffc..48351f3553 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/contentConfig.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/contentConfig.ts @@ -22,7 +22,6 @@ import { totalRecordsCountValidation, uniqueColumnNameValidation, updateAllowAddNewRowOnInfiniteScrollChange, - updateCellEditabilityOnInfiniteScrollChange, updateColumnOrderHook, updateCustomColumnAliasOnLabelChange, updateInlineEditingOptionDropdownVisibilityHook, @@ -197,7 +196,6 @@ export default [ isTriggerProperty: false, updateHook: composePropertyUpdateHook([ updateAllowAddNewRowOnInfiniteScrollChange, - updateCellEditabilityOnInfiniteScrollChange, updateSearchSortFilterOnInfiniteScrollChange, ]), dependencies: ["primaryColumns", "serverSidePaginationEnabled"], diff --git a/app/client/src/widgets/TableWidgetV2/widget/propertyUtils.ts b/app/client/src/widgets/TableWidgetV2/widget/propertyUtils.ts index c92a573664..bf6bb16960 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/propertyUtils.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/propertyUtils.ts @@ -1513,46 +1513,3 @@ export const updateSearchSortFilterOnInfiniteScrollChange = ( return; }; - -// Disable cell editability when infinite scroll is enabled -export const updateCellEditabilityOnInfiniteScrollChange = ( - props: TableWidgetProps, - propertyPath: string, - propertyValue: unknown, -): Array<{ propertyPath: string; propertyValue: unknown }> | undefined => { - if (!props.primaryColumns) return; - - const updates: Array<{ propertyPath: string; propertyValue: unknown }> = []; - - if (propertyValue === true) { - Object.entries(props.primaryColumns).forEach(([, column]) => { - const columnName = column.alias; - - updates.push({ - propertyPath: `primaryColumns.${columnName}.isCellEditable`, - propertyValue: false, - }); - - updates.push({ - propertyPath: `primaryColumns.${columnName}.isEditable`, - propertyValue: false, - }); - }); - } else if (propertyValue === false) { - Object.entries(props.primaryColumns).forEach(([, column]) => { - const columnName = column.alias; - - updates.push({ - propertyPath: `primaryColumns.${columnName}.isCellEditable`, - propertyValue: true, - }); - - updates.push({ - propertyPath: `primaryColumns.${columnName}.isEditable`, - propertyValue: true, - }); - }); - } - - return updates.length > 0 ? updates : undefined; -}; diff --git a/app/client/src/widgets/TableWidgetV2/widget/reactTableUtils/getColumnsPureFn.tsx b/app/client/src/widgets/TableWidgetV2/widget/reactTableUtils/getColumnsPureFn.tsx index 47e97e2766..769768d68d 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/reactTableUtils/getColumnsPureFn.tsx +++ b/app/client/src/widgets/TableWidgetV2/widget/reactTableUtils/getColumnsPureFn.tsx @@ -4,6 +4,7 @@ import { RenderModes } from "constants/WidgetConstants"; import { StickyType } from "../../component/Constants"; import { COLUMN_MIN_WIDTH, + ColumnTypes, DEFAULT_COLUMN_WIDTH, DEFAULT_COLUMN_NAME, } from "../../constants"; @@ -21,6 +22,7 @@ export type getColumns = ( componentWidth: number, renderMode: RenderMode, isPreviewMode: boolean, + infiniteScrollEnabled?: boolean, ) => ReactTableColumnProps[]; //TODO: (Vamsi) need to unit test this function @@ -32,6 +34,7 @@ export const getColumnsPureFn: getColumns = ( componentWidth, renderMode, isPreviewMode, + infiniteScrollEnabled = false, ) => { let columns: ReactTableColumnProps[] = []; const hiddenColumns: ReactTableColumnProps[] = []; @@ -42,6 +45,14 @@ export const getColumnsPureFn: getColumns = ( // TODO: Fix this the next time the file is edited // eslint-disable-next-line @typescript-eslint/no-explicit-any orderedTableColumns.forEach((column: any) => { + // Skip EDIT_ACTIONS columns when infinite scroll is enabled + if ( + infiniteScrollEnabled && + column.columnType === ColumnTypes.EDIT_ACTIONS + ) { + return; + } + const isHidden = !column.isVisible; const columnData = { diff --git a/app/client/src/widgets/TableWidgetV2/widget/utilities.ts b/app/client/src/widgets/TableWidgetV2/widget/utilities.ts index c1c17d8160..5b2cd649cc 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/utilities.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/utilities.ts @@ -540,8 +540,11 @@ const EdtiableColumnTypes: string[] = [ ColumnTypes.CURRENCY, ]; -export function isColumnTypeEditable(columnType: string) { - return EdtiableColumnTypes.includes(columnType); +export function isColumnTypeEditable( + columnType: string, + isInfiniteScrollEnabled = false, +) { + return EdtiableColumnTypes.includes(columnType) && !isInfiniteScrollEnabled; } /*