Skip to content
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

Jump to bottom

feat: add sortBy property to table select cell type #35187

Merged
merged 16 commits into from
Aug 2, 2024
Merged

feat: add sortBy property to table select cell type #35187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
012dfeb
set table select cell content as label + tests
jacquesikot Jul 23, 2024
af16d61
change string to enum + change useCallback to useMemo in cellLabelValue
jacquesikot Jul 24, 2024
b4ab468
Merge branch 'release' of https://github.com/appsmithorg/appsmith int…
jacquesikot Jul 24, 2024
c0f3773
add error proof feature flag
jacquesikot Jul 24, 2024
78b268d
remove redundant cypress test + improve existing test case
jacquesikot Jul 24, 2024
b5c3ab8
complete sortBy logic in getFilteredTableData
jacquesikot Jul 25, 2024
500944c
Merge branch 'feat/display-label-in-table-select-column-cell' of http…
jacquesikot Jul 25, 2024
8de7fa4
return sorted data to standard format after sorting
jacquesikot Jul 25, 2024
aca623b
remove hard coded feature flag
jacquesikot Jul 25, 2024
a78f61e
Merge branch 'release' of https://github.com/appsmithorg/appsmith int…
jacquesikot Jul 25, 2024
7f93e56
add test to check sortBy as label and value
jacquesikot Jul 26, 2024
6174a55
better naming + add better check for primaryColumn.selectOptions
jacquesikot Jul 29, 2024
cc83a5e
fix cypress test locators - use commonLocators
jacquesikot Jul 29, 2024
678a3a4
fix test cases
jacquesikot Jul 29, 2024
7c90156
improve selectColumnKeysWithSortByLabel logic
jacquesikot Jul 30, 2024
8a4e8b2
fix typo in processedTableDataWithLabelInsteadOfValue
jacquesikot Jul 30, 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
169 changes: 164 additions & 5 deletions app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_Sorting_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,66 @@
import { featureFlagIntercept } from "../../../../../support/Objects/FeatureFlags";
import * as _ from "../../../../../support/Objects/ObjectsCore";
const testdata = require("../../../../../fixtures/testdata.json");
const commonlocators = require("../../../../../locators/commonlocators.json");
import PageList from "../../../../../support/Pages/PageList";

const demoTableData = `
{{
[
{
role: 1,
id: 1,
name: "Alice Johnson",
email: "alice.johnson@example.com",
age: 28,
gender: 2
},
{
role: 2,
id: 2,
name: "Bob Smith",
email: "bob.smith@example.com",
age: 34,
gender: 1
},
{
role: 3,
id: 3,
name: "Charlie Brown",
email: "charlie.brown@example.com",
age: 25,
gender: 3
},
{
role: 2,
id: 4,
name: "Diana Prince",
email: "diana.prince@example.com",
age: 30,
gender: 2
},
{
role: 1,
id: 5,
name: "Evan Williams",
email: "evan.williams@example.com",
age: 27,
gender: 1
}
]
}}
`;

describe(
"Table Widget V2 Sorting",
{ tags: ["@tag.Widget", "@tag.Table"] },
function () {
before(() => {
_.agHelper.AddDsl("tableV2NewDslWithPagination");
beforeEach(() => {
PageList.AddNewPage();
});

it("verifies that table sorting works for a custom column with computed value even when it is renamed", function () {
it("1. Verifies that table sorting works for a custom column with computed value even when it is renamed", function () {
_.agHelper.AddDsl("tableV2NewDslWithPagination");
cy.openPropertyPane("tablewidgetv2");
cy.addColumnV2("customColumn1");
cy.editColumn("customColumn1");
Expand Down Expand Up @@ -37,8 +88,8 @@ describe(
// Rename customColumn1 to customColumn2
cy.openPropertyPane("tablewidgetv2");
cy.editColumn("customColumn1");
cy.get(".t--property-pane-title").click({ force: true });
cy.get(".t--property-pane-title")
cy.get(_.propPane._paneTitle).click({ force: true });
cy.get(_.propPane._paneTitle)
.type("customColumn2", { delay: 300 })
.type("{enter}");

Expand All @@ -64,5 +115,113 @@ describe(
expect(data).to.eq("8");
});
});

it("2. Verifies that default sorting works for a select column using the value property", function () {
// This flag is turned on to allow the label show in the table select cell content
// when this feature is turned on fully, this flag will be removed
featureFlagIntercept({ release_table_cell_label_value_enabled: true });
jacquesikot marked this conversation as resolved.
Show resolved Hide resolved
cy.dragAndDropToCanvas("tablewidgetv2", { x: 350, y: 500 });
_.propPane.EnterJSContext("Table data", demoTableData);

// edit role column to select type
cy.openPropertyPane("tablewidgetv2");
cy.editColumn("role");
cy.get(commonlocators.changeColType).last().click();
cy.get(_.locators._dropdownText).children().contains("Select").click();
cy.wait("@updateLayout");

// add dummy select data to the column
cy.get(_.locators._controlOption).should("exist");
cy.updateCodeInput(
_.locators._controlOption,
`
{{
[
{"label": "Software Engineer",
"value": 1,},
{"label": "Product Manager",
"value": 2,},
{"label": "UX Designer",
"value": 3,}
]
}}
`,
);
cy.backFromPropertyPanel();

// sort the column in ascending order
cy.sortColumn("role", "ascending");
cy.readTableV2data(0, 0).then((data) => {
expect(data).to.eq("Software Engineer");
});
jacquesikot marked this conversation as resolved.
Show resolved Hide resolved
cy.readTableV2data(1, 0).then((data) => {
expect(data).to.eq("Software Engineer");
});
cy.readTableV2data(2, 0).then((data) => {
expect(data).to.eq("Product Manager");
});
cy.readTableV2data(3, 0).then((data) => {
expect(data).to.eq("Product Manager");
});
cy.readTableV2data(4, 0).then((data) => {
expect(data).to.eq("UX Designer");
});
});

it("3. Verifies that sorting works for the select column type when sortBy is set to label", function () {
// This flag is turned on to allow the label show in the table select cell content
// when this feature is turned on fully, this flag will be removed
featureFlagIntercept({ release_table_cell_label_value_enabled: true });
cy.dragAndDropToCanvas("tablewidgetv2", { x: 350, y: 500 });
_.propPane.EnterJSContext("Table data", demoTableData);

// edit role column to select type
cy.openPropertyPane("tablewidgetv2");
cy.editColumn("role");
cy.get(commonlocators.changeColType).last().click();
cy.get(_.locators._dropdownText).children().contains("Select").click();

// change sortBy to label
cy.get(commonlocators.changeSortBy).last().click();
jacquesikot marked this conversation as resolved.
Show resolved Hide resolved
cy.get(_.locators._dropdownText).children().contains("Label").click();
cy.wait("@updateLayout");

// add dummy select data to the column
cy.get(_.locators._controlOption).should("exist");
cy.updateCodeInput(
_.locators._controlOption,
`
{{
[
{"label": "Software Engineer",
"value": 1,},
{"label": "Product Manager",
"value": 2,},
{"label": "UX Designer",
"value": 3,}
]
}}
`,
);
cy.backFromPropertyPanel();

// sort the column in ascending order
cy.sortColumn("role", "ascending");
cy.readTableV2data(0, 0).then((data) => {
expect(data).to.eq("Product Manager");
});
jacquesikot marked this conversation as resolved.
Show resolved Hide resolved
cy.readTableV2data(1, 0).then((data) => {
expect(data).to.eq("Product Manager");
});
cy.readTableV2data(2, 0).then((data) => {
expect(data).to.eq("Software Engineer");
});
cy.readTableV2data(3, 0).then((data) => {
expect(data).to.eq("Software Engineer");
});
cy.readTableV2data(4, 0).then((data) => {
expect(data).to.eq("UX Designer");
});
});
},
);
3 changes: 2 additions & 1 deletion app/client/cypress/locators/commonlocators.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@
"editColTitle": ".t--property-pane-title",
"editColText": ".t--property-pane-title span",
"changeColType": ".t--property-control-columntype input",
"changeSortBy": ".t--property-control-sortby input",
"selectedColType": ".t--property-control-columntype button span",
"collapsesection": ".t--property-pane-section-collapse-general .bp3-icon",
"selectTab": ".t--tab-Tab",
Expand Down Expand Up @@ -241,4 +242,4 @@
"clientSideSearch": ".t--property-control-clientsidesearch input[type='checkbox']",
"enableClientSideSearch": ".t--property-control-enableclientsidesearch input[type='checkbox']",
"fixedFooterInput": ".t--property-control-fixedfooter input"
}
}
2 changes: 2 additions & 0 deletions app/client/src/widgets/TableWidgetV2/component/Constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,7 @@ export interface SelectCellProperties {
placeholderText?: string;
resetFilterTextOnClose?: boolean;
selectOptions?: DropdownOption[];
sortBy?: string;
}

export interface ImageCellProperties {
Expand Down Expand Up @@ -341,6 +342,7 @@ export interface EditActionColumnProperties {
placeholderText?: string;
resetFilterTextOnClose?: boolean;
selectOptions?: DropdownOption[] | DropdownOption[][];
sortBy?: string;
}

export interface CurrencyColumnProperties {
Expand Down
66 changes: 65 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 @@ -317,6 +317,45 @@ export default {
const sortByColumnId = props.sortOrder.column;

let sortedTableData;
/*
Check if there are select columns,
and if the columns are sorting by label instead of default value
*/
const selectColumnKeysWithSortByLabel = [];
Object.entries(primaryColumns).forEach(([id, column]) => {
const isColumnSortedByLabel =
column?.columnType === "select" &&
column?.sortBy === "label" &&
column?.selectOptions?.length;
Comment on lines +326 to +329
Copy link
Contributor

Choose a reason for hiding this comment

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

Is it possible to implement the same logic without a specific check? I am wondering why we required such a check only for this case.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don’t think so. The sort by label logic I implemented should only take effect if those checks are true for specific fields, if those checks do not exist, we need to sort by value, which is the default method for sorting.

if (isColumnSortedByLabel) {
selectColumnKeysWithSortByLabel.push(id);
}
});

/*
If there are select columns,
transform the specific columns data to show the label instead of the value for sorting
*/
let processedTableDataWithLabelInsteadOfValue;
if (selectColumnKeysWithSortByLabel.length) {
const transformedValueToLabelTableData = processedTableData.map((row) => {
const newRow = { ...row };
selectColumnKeysWithSortByLabel.forEach((key) => {
const value = row[key];
const selectOptions =
primaryColumns[key].selectOptions[row.__originalIndex__];
const option = selectOptions.find((option) => option.value === value);

if (option) {
newRow[key] = option.label;
}
});

return newRow;
});
processedTableDataWithLabelInsteadOfValue =
transformedValueToLabelTableData;
}

if (sortByColumnId) {
const sortBycolumn = columns.find(
Expand Down Expand Up @@ -352,7 +391,12 @@ export default {
}
};

sortedTableData = processedTableData.sort((a, b) => {
const transformedTableDataForSorting =
selectColumnKeysWithSortByLabel.length
? processedTableDataWithLabelInsteadOfValue
: processedTableData;

sortedTableData = transformedTableDataForSorting.sort((a, b) => {
if (_.isPlainObject(a) && _.isPlainObject(b)) {
if (
isEmptyOrNil(a[sortByColumnOriginalId]) ||
Expand Down Expand Up @@ -405,6 +449,26 @@ export default {
return isAscOrder ? 1 : 0;
}
});

if (selectColumnKeysWithSortByLabel.length) {
const transformedLabelToValueData = sortedTableData.map((row) => {
const newRow = { ...row };
selectColumnKeysWithSortByLabel.forEach((key) => {
const label = row[key];
const selectOptions =
primaryColumns[key].selectOptions[row.__originalIndex__];
const option = selectOptions.find(
(option) => option.label === label,
);
if (option) {
newRow[key] = option.value;
}
});

return newRow;
});
sortedTableData = transformedLabelToValueData;
}
} else {
sortedTableData = [...processedTableData];
}
Expand Down
30 changes: 30 additions & 0 deletions app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Select.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
hideByColumnType,
selectColumnOptionsValidation,
} from "../../propertyUtils";
import { TableSelectColumnOptionKeys } from "widgets/TableWidgetV2/component/Constants";

export default {
sectionName: "Select properties",
Expand Down Expand Up @@ -37,6 +38,35 @@ export default {
return hideByColumnType(props, propertyPath, [ColumnTypes.SELECT]);
},
},
{
propertyName: "sortBy",
defaultValue: "value",
helpText: "Choose whether to sort the select cell by the value or label",
label: "Sort by",
controlType: "DROP_DOWN",
isBindProperty: true,
isJSConvertible: false,
isTriggerProperty: false,
options: [
{
label: "Label",
value: TableSelectColumnOptionKeys.LABEL,
},
{
label: "Value",
value: TableSelectColumnOptionKeys.VALUE,
},
],
validation: {
type: ValidationTypes.TEXT,
params: {
allowedValues: [
TableSelectColumnOptionKeys.LABEL,
TableSelectColumnOptionKeys.VALUE,
],
},
},
},
{
propertyName: "allowSameOptionsInNewRow",
defaultValue: true,
Expand Down
Loading