Skip to content

fix(#16584): filterTableData source of truth #36849

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.

Sign up for GitHub

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
yatinappsmith merged 11 commits into from
Oct 30, 2024
Merged

fix(#16584): filterTableData source of truth #36849

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
72f3828
fix(#16584): filterTableData source of truth
anasKhafaga Oct 13, 2024
4d5c7e8
test: add unit test for editing a record in filter state
anasKhafaga Oct 14, 2024
fbcd17f
fix: enhance unit test case
anasKhafaga Oct 14, 2024
b08abe7
fix(test): compatibility with filtering via displyed text
anasKhafaga Oct 14, 2024
39d4e5e
fix(linting): CI lint and prettier tasks
anasKhafaga Oct 15, 2024
6869df8
fix(search): disappearing record with searchKey applied
anasKhafaga Oct 16, 2024
6632e4a
fix(e2e): update failing e2e test cases to expect the correct behavior
anasKhafaga Oct 17, 2024
01e008f
chore(e2e): use the suitable apis to dispatch actions and run assertions
anasKhafaga Oct 22, 2024
d89cb67
fix(sorting): case of editing while sorting is applied
anasKhafaga Oct 23, 2024
163e7b6
test(sorting): add unit test for editing when sorting is applied
anasKhafaga Oct 23, 2024
c10dd6a
fix(sorting): handle sorting by label
anasKhafaga Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 16 additions & 5 deletions ...client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/checkboxCell_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ describe(
.contains("This is a test message")
.should("be.visible");
});
_.agHelper.ClickButton("Discard", { index: 0 }); // discard changes
});

it("4. Verify filter condition", () => {
Expand All @@ -159,7 +160,17 @@ describe(

// filter and verify checked rows
cy.getTableV2DataSelector("0", "4").then((selector) => {
cy.get(selector + checkboxSelector).should("be.checked");
_.agHelper.AssertExistingCheckedState(
selector + checkboxSelector,
"true",
);
});

cy.getTableV2DataSelector("1", "4").then((selector) => {
_.agHelper.AssertExistingCheckedState(
selector + checkboxSelector,
"true",
);
});

// Filter and verify unchecked rows
Expand All @@ -170,10 +181,10 @@ describe(
cy.get(publishPage.applyFiltersBtn).click();

cy.getTableV2DataSelector("0", "4").then((selector) => {
cy.get(selector + checkboxSelector).should("not.be.checked");
});
cy.getTableV2DataSelector("1", "4").then((selector) => {
cy.get(selector + checkboxSelector).should("not.be.checked");
_.agHelper.AssertExistingCheckedState(
selector + checkboxSelector,
"false",
);
});
});

Expand Down
12 changes: 7 additions & 5 deletions app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/switchCell_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ describe(
cy.wait(100);
agHelper.ValidateToastMessage("This is a test message");
});
agHelper.ClickButton("Discard", { index: 0 }); // discard changes
});

it("4. Verify filter condition", () => {
Expand All @@ -151,7 +152,11 @@ describe(

// filter and verify checked rows
cy.getTableV2DataSelector("0", "4").then((selector) => {
cy.get(selector + switchSelector).should("be.checked");
agHelper.AssertExistingCheckedState(selector + switchSelector, "true");
});

cy.getTableV2DataSelector("1", "4").then((selector) => {
agHelper.AssertExistingCheckedState(selector + switchSelector, "true");
});

// Filter and verify unchecked rows
Expand All @@ -162,10 +167,7 @@ describe(
cy.get(publishPage.applyFiltersBtn).click();

cy.getTableV2DataSelector("0", "4").then((selector) => {
cy.get(selector + switchSelector).should("not.be.checked");
});
cy.getTableV2DataSelector("1", "4").then((selector) => {
cy.get(selector + switchSelector).should("not.be.checked");
agHelper.AssertExistingCheckedState(selector + switchSelector, "false");
});
});

Expand Down
56 changes: 42 additions & 14 deletions app/client/src/widgets/TableWidgetV2/widget/derived.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -446,25 +446,42 @@ export default {

sortedTableData = transformedTableDataForSorting.sort((a, b) => {
if (_.isPlainObject(a) && _.isPlainObject(b)) {
let [processedA, processedB] = [a, b];

if (!selectColumnKeysWithSortByLabel.length) {
const originalA = (props.tableData ??
transformedTableDataForSorting)[a.__originalIndex__];
const originalB = (props.tableData ??
transformedTableDataForSorting)[b.__originalIndex__];

[processedA, processedB] = [
{ ...a, ...originalA },
{ ...b, ...originalB },
];
}

if (
isEmptyOrNil(a[sortByColumnOriginalId]) ||
isEmptyOrNil(b[sortByColumnOriginalId])
isEmptyOrNil(processedA[sortByColumnOriginalId]) ||
isEmptyOrNil(processedB[sortByColumnOriginalId])
) {
/* push null, undefined and "" values to the bottom. */
return isEmptyOrNil(a[sortByColumnOriginalId]) ? 1 : -1;
return isEmptyOrNil(processedA[sortByColumnOriginalId]) ? 1 : -1;
} else {
switch (columnType) {
case "number":
case "currency":
return sortByOrder(
Number(a[sortByColumnOriginalId]) >
Number(b[sortByColumnOriginalId]),
Number(processedA[sortByColumnOriginalId]) >
Number(processedB[sortByColumnOriginalId]),
);
case "date":
try {
return sortByOrder(
moment(a[sortByColumnOriginalId], inputFormat).isAfter(
moment(b[sortByColumnOriginalId], inputFormat),
moment(
processedA[sortByColumnOriginalId],
inputFormat,
).isAfter(
moment(processedB[sortByColumnOriginalId], inputFormat),
),
);
} catch (e) {
Expand All @@ -489,8 +506,8 @@ export default {
}
default:
return sortByOrder(
a[sortByColumnOriginalId].toString().toLowerCase() >
b[sortByColumnOriginalId].toString().toLowerCase(),
processedA[sortByColumnOriginalId].toString().toLowerCase() >
processedB[sortByColumnOriginalId].toString().toLowerCase(),
);
}
}
Expand Down Expand Up @@ -676,6 +693,9 @@ export default {

const finalTableData = sortedTableData.filter((row) => {
let isSearchKeyFound = true;
const originalRow = (props.tableData ?? sortedTableData)[
row.__originalIndex__
];
const columnWithDisplayText = Object.values(props.primaryColumns).filter(
(column) => column.columnType === "url" && column.displayText,
);
Expand Down Expand Up @@ -780,7 +800,10 @@ export default {
};

if (searchKey) {
isSearchKeyFound = Object.values(_.omit(displayedRow, hiddenColumns))
isSearchKeyFound = [
...Object.values(_.omit(displayedRow, hiddenColumns)),
...Object.values(_.omit(originalRow, hiddenColumns)),
]
Comment on lines +803 to +806
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 23, 2024

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Consider optimizing the search operation.

While including both displayed and original values in the search is thorough, let's think about performance. When dealing with large datasets, concatenating all values and performing string operations could be expensive.

Consider this optimization:

-isSearchKeyFound = [
-  ...Object.values(_.omit(displayedRow, hiddenColumns)),
-  ...Object.values(_.omit(originalRow, hiddenColumns)),
-].join(", ").toLowerCase().includes(searchKey);
+const searchInRow = (row) => Object.values(_.omit(row, hiddenColumns))
+  .some(value => value.toString().toLowerCase().includes(searchKey));
+isSearchKeyFound = searchInRow(displayedRow) || searchInRow(originalRow);

This approach stops searching as soon as a match is found, potentially improving performance with large datasets.

Committable suggestion was skipped due to low confidence.

.join(", ")
.toLowerCase()
.includes(searchKey);
Expand Down Expand Up @@ -811,10 +834,15 @@ export default {
ConditionFunctions[props.filters[i].condition];

if (conditionFunction) {
filterResult = conditionFunction(
displayedRow[props.filters[i].column],
props.filters[i].value,
);
filterResult =
conditionFunction(
originalRow[props.filters[i].column],
props.filters[i].value,
) ||
conditionFunction(
displayedRow[props.filters[i].column],
props.filters[i].value,
);
Comment on lines +837 to +845
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 25, 2024

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Let's make the filter condition check more readable!

Class, while the logic is correct, we can make it more maintainable by extracting the condition check into a helper function.

Consider this refactor to improve readability:

-filterResult =
-  conditionFunction(
-    originalRow[props.filters[i].column],
-    props.filters[i].value,
-  ) ||
-  conditionFunction(
-    displayedRow[props.filters[i].column],
-    props.filters[i].value,
-  );
+const checkCondition = (row, column, value) => 
+  conditionFunction(row[column], value);
+
+filterResult = 
+  checkCondition(originalRow, props.filters[i].column, props.filters[i].value) ||
+  checkCondition(displayedRow, props.filters[i].column, props.filters[i].value);
📝 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
filterResult =
conditionFunction(
originalRow[props.filters[i].column],
props.filters[i].value,
) ||
conditionFunction(
displayedRow[props.filters[i].column],
props.filters[i].value,
);
const checkCondition = (row, column, value) =>
conditionFunction(row[column], value);
filterResult =
checkCondition(originalRow, props.filters[i].column, props.filters[i].value) ||
checkCondition(displayedRow, props.filters[i].column, props.filters[i].value);

}
} catch (e) {
filterResult = false;
Expand Down
Loading