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 5 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
15 changes: 11 additions & 4 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 @@ -811,10 +811,17 @@ export default {
ConditionFunctions[props.filters[i].condition];

if (conditionFunction) {
filterResult = conditionFunction(
displayedRow[props.filters[i].column],
props.filters[i].value,
);
const originalRow = props.tableData[row.__originalIndex__];

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

@coderabbitai coderabbitai Bot Oct 25, 2024

Copy link
Copy Markdown
Contributor

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
122 changes: 122 additions & 0 deletions app/client/src/widgets/TableWidgetV2/widget/derived.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,12 @@ const sampleProcessedTableData = [

describe("Validates getFilteredTableData Properties", () => {
const inputWithDisplayText = {
tableData: [
{ url: "A.COM" },
{ url: "B.COM" },
{ url: "C.COM" },
{ url: "D.COM" },
],
processedTableData: [
{ url: "A.COM", __originalIndex__: 0 },
{ url: "B.COM", __originalIndex__: 1 },
Expand Down Expand Up @@ -1181,6 +1187,122 @@ describe("Validates getFilteredTableData Properties", () => {
expect(result).toStrictEqual(expected);
});

it("should filter correctly after editing a value with an applied filter", () => {
const { getFilteredTableData } = derivedProperty;
const input = {
tableData: [
{ id: 1234, name: "Jim Doe" },
{ id: 123, name: "Hamza Khafaga" },
{ id: 234, name: "Khadija Khafaga" },
],
processedTableData: [
{ id: 1234, name: "Jim Doe", __originalIndex__: 0 },
{ id: 123, name: "Hamza Anas", __originalIndex__: 1 },
{ id: 234, name: "Khadija Khafaga", __originalIndex__: 2 },
],
filters: [
{
condition: "contains",
column: "name",
value: "Khafaga",
},
],
sortOrder: { column: "id", order: "desc" },
columnOrder: ["name", "id"],
primaryColumns: {
id: {
index: 1,
width: 150,
id: "id",
alias: "id",
originalId: "id",
horizontalAlignment: "LEFT",
verticalAlignment: "CENTER",
columnType: "number",
textColor: "#231F20",
textSize: "PARAGRAPH",
fontStyle: "REGULAR",
enableFilter: true,
enableSort: true,
isVisible: true,
isDerived: false,
label: "id",
isAscOrder: false,
},
name: {
index: 0,
width: 150,
id: "name",
alias: "name",
originalId: "name",
horizontalAlignment: "LEFT",
verticalAlignment: "CENTER",
columnType: "text",
textColor: "#231F20",
textSize: "PARAGRAPH",
fontStyle: "REGULAR",
enableFilter: true,
enableSort: true,
isVisible: true,
isDerived: false,
label: "awesome",
isAscOrder: undefined,
},
},
tableColumns: [
{
index: 0,
width: 150,
id: "name",
horizontalAlignment: "LEFT",
verticalAlignment: "CENTER",
columnType: "text",
textColor: "#231F20",
textSize: "PARAGRAPH",
fontStyle: "REGULAR",
enableFilter: true,
enableSort: true,
isVisible: true,
isDerived: false,
label: "awesome",
isAscOrder: undefined,
},
{
index: 1,
width: 150,
id: "id",
horizontalAlignment: "LEFT",
verticalAlignment: "CENTER",
columnType: "number",
textColor: "#231F20",
textSize: "PARAGRAPH",
fontStyle: "REGULAR",
enableFilter: true,
enableSort: true,
isVisible: true,
isDerived: false,
label: "id",
isAscOrder: false,
},
],
};

input.orderedTableColumns = Object.values(input.primaryColumns).sort(
(a, b) => {
return input.columnOrder[a.id] < input.columnOrder[b.id];
},
);

const expected = [
{ id: 234, name: "Khadija Khafaga", __originalIndex__: 2 },
{ id: 123, name: "Hamza Anas", __originalIndex__: 1 },
];

let result = getFilteredTableData(input, moment, _);

expect(result).toStrictEqual(expected);
});

it("validates generated sanitized table data with valid property keys", () => {
const { getProcessedTableData } = derivedProperty;

Expand Down