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 2 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
3 changes: 2 additions & 1 deletion 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,8 +811,9 @@ export default {
ConditionFunctions[props.filters[i].condition];

if (conditionFunction) {
const originalRow = props.tableData[row.__originalIndex__];
filterResult = conditionFunction(
displayedRow[props.filters[i].column],
originalRow[props.filters[i].column],
props.filters[i].value,
);
}
Expand Down
135 changes: 135 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 @@ -1181,6 +1181,141 @@ describe("Validates getFilteredTableData Properties", () => {
expect(result).toStrictEqual(expected);
});

it("validates generated filtered table data to be filtered correctly after committing an edit to a value in an applied filter state", () => {
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 Khafa", __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
},
extra: {
index: 2,
width: 150,
id: "extra",
alias: "extra",
originalId: "extra",
horizontalAlignment: "LEFT",
verticalAlignment: "CENTER",
columnType: "text",
textColor: "#231F20",
textSize: "PARAGRAPH",
fontStyle: "REGULAR",
enableFilter: true,
enableSort: true,
isVisible: true,
label: "extra",
isAscOrder: undefined,
isDerived: true,
},
},
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", extra: '', __originalIndex__: 2 },
{ id: 123, name: "Hamza Khafa", extra: '', __originalIndex__: 1 },
];

let result = getFilteredTableData(input, moment, _);
console.log(result);
expect(result).toStrictEqual(expected);
});

@coderabbitai coderabbitai Bot Oct 14, 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.

⚠️ Potential issue

Class, let's examine this new test case carefully.

Good job on adding a new test case to validate the filtering functionality after committing an edit. However, there are a few areas where we can improve:

  1. The test description is quite long. Remember, brevity is the soul of wit! Consider shortening it to something like "filters correctly after editing a value with an active filter".

  2. You've included a console.log(result) statement on line 1315. While this is helpful during development, we should remove it from our final test case. Always clean up your workspace, students!

  3. The expected result on lines 1309-1312 includes an empty string for the 'extra' field. Is this intentional? If so, we should add a comment explaining why this field is expected to be empty.

  4. The test data includes a misspelling in the name "Hamza Khafa" (missing the last 'ga'). Let's correct this to ensure our test data is accurate.

  5. Consider adding more assertions to test edge cases, such as:

    • What happens if the edited value no longer matches the filter?
    • How does the system handle multiple filters?

Remember, thorough testing is the foundation of robust code. Let's make these improvements to strengthen our test suite.

Here's a suggested improvement for the test case:

it("filters correctly after editing a value with an active filter", () => {
  const { getFilteredTableData } = derivedProperty;
  const input = {
    // ... (keep the existing input setup)
  };

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

  let result = getFilteredTableData(input, moment, _);
  expect(result).toStrictEqual(expected);

  // Additional test cases
  input.processedTableData[1].name = "Hamza Smith"; // Edit to no longer match filter
  result = getFilteredTableData(input, moment, _);
  expect(result).toHaveLength(1); // Only Khadija should remain

  // Test with multiple filters
  input.filters.push({
    condition: "contains",
    column: "id",
    value: "23"
  });
  result = getFilteredTableData(input, moment, _);
  expect(result).toHaveLength(1); // Only Khadija should match both filters
});

This improved version addresses the issues mentioned and adds more test cases to ensure robust functionality.


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

Expand Down