2022-07-14 07:02:35 +00:00
|
|
|
/* eslint-disable @typescript-eslint/no-unused-vars*/
|
|
|
|
|
export default {
|
|
|
|
|
getSelectedRow: (props, moment, _) => {
|
|
|
|
|
let index = -1;
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* If multiRowSelection is turned on, use the last index to
|
|
|
|
|
* populate the selectedRowIndex
|
|
|
|
|
*/
|
|
|
|
|
if (props.multiRowSelection) {
|
|
|
|
|
if (
|
|
|
|
|
_.isArray(props.selectedRowIndices) &&
|
|
|
|
|
props.selectedRowIndices.length &&
|
|
|
|
|
props.selectedRowIndices.every((i) => _.isNumber(i))
|
|
|
|
|
) {
|
|
|
|
|
index = props.selectedRowIndices[props.selectedRowIndices.length - 1];
|
|
|
|
|
} else if (_.isNumber(props.selectedRowIndices)) {
|
|
|
|
|
index = props.selectedRowIndices;
|
|
|
|
|
}
|
|
|
|
|
} else if (
|
|
|
|
|
!_.isNil(props.selectedRowIndex) &&
|
|
|
|
|
!_.isNaN(parseInt(props.selectedRowIndex))
|
|
|
|
|
) {
|
|
|
|
|
index = parseInt(props.selectedRowIndex);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const rows = props.filteredTableData || props.processedTableData || [];
|
2022-09-21 10:58:11 +00:00
|
|
|
|
|
|
|
|
const primaryColumns = props.primaryColumns;
|
|
|
|
|
const nonDataColumnTypes = [
|
|
|
|
|
"editActions",
|
|
|
|
|
"button",
|
|
|
|
|
"iconButton",
|
|
|
|
|
"menuButton",
|
|
|
|
|
];
|
|
|
|
|
const nonDataColumnAliases = primaryColumns
|
|
|
|
|
? Object.values(primaryColumns)
|
|
|
|
|
.filter((column) => nonDataColumnTypes.includes(column.columnType))
|
|
|
|
|
.map((column) => column.alias)
|
|
|
|
|
: [];
|
|
|
|
|
|
2022-07-14 07:02:35 +00:00
|
|
|
let selectedRow;
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Note(Balaji): Need to include customColumn values in the selectedRow (select, rating)
|
|
|
|
|
* It should have updated values.
|
|
|
|
|
*/
|
|
|
|
|
if (index > -1) {
|
|
|
|
|
selectedRow = { ...rows[index] };
|
|
|
|
|
} else {
|
|
|
|
|
/*
|
|
|
|
|
* If index is not a valid, selectedRow should have
|
|
|
|
|
* proper row structure with empty string values
|
|
|
|
|
*/
|
|
|
|
|
selectedRow = {};
|
|
|
|
|
Object.keys(rows[0]).forEach((key) => {
|
|
|
|
|
selectedRow[key] = "";
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2022-09-21 10:58:11 +00:00
|
|
|
const keysToBeOmitted = [
|
|
|
|
|
"__originalIndex__",
|
|
|
|
|
"__primaryKey__",
|
|
|
|
|
...nonDataColumnAliases,
|
|
|
|
|
];
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-07-14 07:02:35 +00:00
|
|
|
return _.omit(selectedRow, keysToBeOmitted);
|
|
|
|
|
},
|
|
|
|
|
//
|
|
|
|
|
getTriggeredRow: (props, moment, _) => {
|
|
|
|
|
let index = -1;
|
|
|
|
|
const parsedTriggeredRowIndex = parseInt(props.triggeredRowIndex);
|
|
|
|
|
|
|
|
|
|
if (!_.isNaN(parsedTriggeredRowIndex)) {
|
|
|
|
|
index = parsedTriggeredRowIndex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const rows = props.filteredTableData || props.processedTableData || [];
|
2022-09-21 10:58:11 +00:00
|
|
|
const primaryColumns = props.primaryColumns;
|
|
|
|
|
const nonDataColumnTypes = [
|
|
|
|
|
"editActions",
|
|
|
|
|
"button",
|
|
|
|
|
"iconButton",
|
|
|
|
|
"menuButton",
|
|
|
|
|
];
|
|
|
|
|
const nonDataColumnAliases = primaryColumns
|
|
|
|
|
? Object.values(primaryColumns)
|
|
|
|
|
.filter((column) => nonDataColumnTypes.includes(column.columnType))
|
|
|
|
|
.map((column) => column.alias)
|
|
|
|
|
: [];
|
2022-07-14 07:02:35 +00:00
|
|
|
let triggeredRow;
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Note(Balaji): Need to include customColumn values in the triggeredRow (select, rating)
|
|
|
|
|
* It should have updated values.
|
|
|
|
|
*/
|
|
|
|
|
if (index > -1) {
|
|
|
|
|
const row = rows.find((row) => row.__originalIndex__ === index);
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-07-14 07:02:35 +00:00
|
|
|
triggeredRow = { ...row };
|
|
|
|
|
} else {
|
|
|
|
|
/*
|
|
|
|
|
* If triggeredRowIndex is not a valid index, triggeredRow should
|
|
|
|
|
* have proper row structure with empty string values
|
|
|
|
|
*/
|
|
|
|
|
triggeredRow = {};
|
|
|
|
|
Object.keys(rows[0]).forEach((key) => {
|
|
|
|
|
triggeredRow[key] = "";
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2022-09-21 10:58:11 +00:00
|
|
|
const keysToBeOmitted = [
|
|
|
|
|
"__originalIndex__",
|
|
|
|
|
"__primaryKey__",
|
|
|
|
|
...nonDataColumnAliases,
|
|
|
|
|
];
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-07-14 07:02:35 +00:00
|
|
|
return _.omit(triggeredRow, keysToBeOmitted);
|
|
|
|
|
},
|
|
|
|
|
//
|
|
|
|
|
getSelectedRows: (props, moment, _) => {
|
|
|
|
|
if (!props.multiRowSelection) {
|
|
|
|
|
return [];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let indices = [];
|
|
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
_.isArray(props.selectedRowIndices) &&
|
|
|
|
|
props.selectedRowIndices.every((i) => _.isNumber(i))
|
|
|
|
|
) {
|
|
|
|
|
indices = props.selectedRowIndices;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const rows = props.filteredTableData || props.processedTableData || [];
|
2022-09-21 10:58:11 +00:00
|
|
|
const primaryColumns = props.primaryColumns;
|
|
|
|
|
const nonDataColumnTypes = [
|
|
|
|
|
"editActions",
|
|
|
|
|
"button",
|
|
|
|
|
"iconButton",
|
|
|
|
|
"menuButton",
|
|
|
|
|
];
|
|
|
|
|
const nonDataColumnAliases = primaryColumns
|
|
|
|
|
? Object.values(primaryColumns)
|
|
|
|
|
.filter((column) => nonDataColumnTypes.includes(column.columnType))
|
|
|
|
|
.map((column) => column.alias)
|
|
|
|
|
: [];
|
|
|
|
|
const keysToBeOmitted = [
|
|
|
|
|
"__originalIndex__",
|
|
|
|
|
"__primaryKey__",
|
|
|
|
|
...nonDataColumnAliases,
|
|
|
|
|
];
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-07-14 07:02:35 +00:00
|
|
|
return indices.map((index) => _.omit(rows[index], keysToBeOmitted));
|
|
|
|
|
},
|
|
|
|
|
//
|
|
|
|
|
getPageSize: (props, moment, _) => {
|
|
|
|
|
const TABLE_SIZES = {
|
|
|
|
|
DEFAULT: {
|
|
|
|
|
COLUMN_HEADER_HEIGHT: 32,
|
|
|
|
|
TABLE_HEADER_HEIGHT: 38,
|
|
|
|
|
ROW_HEIGHT: 40,
|
|
|
|
|
ROW_FONT_SIZE: 14,
|
|
|
|
|
VERTICAL_PADDING: 6,
|
|
|
|
|
EDIT_ICON_TOP: 10,
|
|
|
|
|
},
|
|
|
|
|
SHORT: {
|
|
|
|
|
COLUMN_HEADER_HEIGHT: 32,
|
|
|
|
|
TABLE_HEADER_HEIGHT: 38,
|
2022-08-23 11:49:59 +00:00
|
|
|
ROW_HEIGHT: 30,
|
2022-07-14 07:02:35 +00:00
|
|
|
ROW_FONT_SIZE: 12,
|
|
|
|
|
VERTICAL_PADDING: 0,
|
|
|
|
|
EDIT_ICON_TOP: 5,
|
|
|
|
|
},
|
|
|
|
|
TALL: {
|
|
|
|
|
COLUMN_HEADER_HEIGHT: 32,
|
|
|
|
|
TABLE_HEADER_HEIGHT: 38,
|
|
|
|
|
ROW_HEIGHT: 60,
|
|
|
|
|
ROW_FONT_SIZE: 18,
|
|
|
|
|
VERTICAL_PADDING: 16,
|
|
|
|
|
EDIT_ICON_TOP: 21,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
const compactMode = props.compactMode || "DEFAULT";
|
2023-09-19 05:22:11 +00:00
|
|
|
const componentHeight = props.componentHeight - 10;
|
2022-07-14 07:02:35 +00:00
|
|
|
const tableSizes = TABLE_SIZES[compactMode];
|
2022-08-23 11:49:59 +00:00
|
|
|
|
|
|
|
|
let pageSize =
|
2022-07-14 07:02:35 +00:00
|
|
|
(componentHeight -
|
|
|
|
|
tableSizes.TABLE_HEADER_HEIGHT -
|
|
|
|
|
tableSizes.COLUMN_HEADER_HEIGHT) /
|
2022-08-23 11:49:59 +00:00
|
|
|
tableSizes.ROW_HEIGHT;
|
|
|
|
|
|
2024-05-30 09:40:02 +00:00
|
|
|
return pageSize % 1 > 0.3 && props.tableData.length > pageSize
|
|
|
|
|
? Math.ceil(pageSize)
|
|
|
|
|
: Math.floor(pageSize);
|
2022-07-14 07:02:35 +00:00
|
|
|
},
|
|
|
|
|
//
|
|
|
|
|
getProcessedTableData: (props, moment, _) => {
|
|
|
|
|
let data;
|
|
|
|
|
|
|
|
|
|
if (_.isArray(props.tableData)) {
|
|
|
|
|
/* Populate meta keys (__originalIndex__, __primaryKey__) and transient values */
|
|
|
|
|
data = props.tableData.map((row, index) => ({
|
|
|
|
|
...row,
|
|
|
|
|
__originalIndex__: index,
|
|
|
|
|
__primaryKey__: props.primaryColumnId
|
|
|
|
|
? row[props.primaryColumnId]
|
|
|
|
|
: undefined,
|
|
|
|
|
...props.transientTableData[index],
|
|
|
|
|
}));
|
|
|
|
|
} else {
|
|
|
|
|
data = [];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return data;
|
|
|
|
|
},
|
|
|
|
|
//
|
|
|
|
|
getOrderedTableColumns: (props, moment, _) => {
|
|
|
|
|
let columns = [];
|
|
|
|
|
let existingColumns = props.primaryColumns || {};
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-07-14 07:02:35 +00:00
|
|
|
/*
|
|
|
|
|
* Assign index based on the columnOrder
|
|
|
|
|
*/
|
|
|
|
|
if (
|
|
|
|
|
_.isArray(props.columnOrder) &&
|
|
|
|
|
props.columnOrder.length > 0 &&
|
|
|
|
|
Object.keys(existingColumns).length > 0
|
|
|
|
|
) {
|
|
|
|
|
const newColumnsInOrder = {};
|
|
|
|
|
let index = 0;
|
|
|
|
|
|
|
|
|
|
_.uniq(props.columnOrder).forEach((columnId) => {
|
|
|
|
|
if (existingColumns[columnId]) {
|
|
|
|
|
newColumnsInOrder[columnId] = Object.assign(
|
|
|
|
|
{},
|
|
|
|
|
existingColumns[columnId],
|
|
|
|
|
{
|
|
|
|
|
index,
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
index++;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
existingColumns = newColumnsInOrder;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const sortByColumn = props.sortOrder && props.sortOrder.column;
|
|
|
|
|
const isAscOrder = props.sortOrder && props.sortOrder.order === "asc";
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-07-14 07:02:35 +00:00
|
|
|
/* set sorting flags and convert the existing columns into an array */
|
|
|
|
|
Object.values(existingColumns).forEach((column) => {
|
|
|
|
|
/* guard to not allow columns without id */
|
|
|
|
|
if (column.id) {
|
2023-11-06 05:35:26 +00:00
|
|
|
columns.push({
|
|
|
|
|
...column,
|
|
|
|
|
isAscOrder: column.id === sortByColumn ? isAscOrder : undefined,
|
|
|
|
|
});
|
2022-07-14 07:02:35 +00:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return columns;
|
|
|
|
|
},
|
|
|
|
|
//
|
|
|
|
|
getFilteredTableData: (props, moment, _) => {
|
|
|
|
|
/* Make a shallow copy */
|
|
|
|
|
const primaryColumns = props.primaryColumns || {};
|
|
|
|
|
let processedTableData = [...props.processedTableData];
|
|
|
|
|
const derivedColumns = {};
|
|
|
|
|
|
|
|
|
|
Object.keys(primaryColumns).forEach((id) => {
|
|
|
|
|
if (primaryColumns[id] && primaryColumns[id].isDerived) {
|
|
|
|
|
derivedColumns[id] = primaryColumns[id];
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!processedTableData || !processedTableData.length) {
|
|
|
|
|
return [];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* extend processedTableData with values from
|
|
|
|
|
* - computedValues, in case of normal column
|
|
|
|
|
* - empty values, in case of derived column
|
|
|
|
|
*/
|
|
|
|
|
if (primaryColumns && _.isPlainObject(primaryColumns)) {
|
|
|
|
|
Object.entries(primaryColumns).forEach(([id, column]) => {
|
|
|
|
|
let computedValues = [];
|
|
|
|
|
|
|
|
|
|
if (column && column.computedValue) {
|
|
|
|
|
if (_.isString(column.computedValue)) {
|
|
|
|
|
try {
|
|
|
|
|
computedValues = JSON.parse(column.computedValue);
|
|
|
|
|
} catch (e) {
|
2022-10-04 11:38:02 +00:00
|
|
|
/* do nothing */
|
2022-07-14 07:02:35 +00:00
|
|
|
}
|
|
|
|
|
} else if (_.isArray(column.computedValue)) {
|
|
|
|
|
computedValues = column.computedValue;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* for derived columns inject empty strings */
|
|
|
|
|
if (
|
|
|
|
|
computedValues.length === 0 &&
|
|
|
|
|
derivedColumns &&
|
|
|
|
|
derivedColumns[id]
|
|
|
|
|
) {
|
|
|
|
|
computedValues = Array(processedTableData.length).fill("");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
computedValues.forEach((computedValue, index) => {
|
|
|
|
|
processedTableData[index] = {
|
|
|
|
|
...processedTableData[index],
|
|
|
|
|
[column.alias]: computedValue,
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const columns = props.orderedTableColumns;
|
|
|
|
|
const sortByColumnId = props.sortOrder.column;
|
|
|
|
|
|
|
|
|
|
let sortedTableData;
|
feat: add sortBy property to table select cell type (#35187)
## Description
**Problem**
The table widget now supports the Select column type, which allows the
column to contain both a label and a value. This could be useful for
currency fields, foreign keys, or any other case where you want to
display a different version of the column value. However, there is a
problem with sorting. The table always sorts using the value, and does
not give the user an option to sort using the label, where it makes
sense in specific cases.
**Solution**
This PR adds a Sort By property to the table select cell, allowing the
users to choose which value is used for sorting without affecting any
functionality of the label or value of the select cell.
[Additional Technical
Documentation](https://www.notion.so/appsmith/Adding-sortBy-Property-to-Select-Columns-in-Table-Widget-V2-a5a41e6319a047378eb50a42be8c32ef?pvs=4)
**Tested Cases**
1. Sort select column by default value
Objective: Ensure that a newly added table with select column default
sorts by the value
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type.
- Add selectOptions property
- Verify that when sorted in ascending or descending order, the sorting
is correct
2. Sort select column by label
Objective: Ensure that a newly added table with select column and sortBy
property set to label sorts correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when sorted in ascending or descending order, the sorting
is correct and based on the label value only
3. Verify that sorting of other table cells that are not select works as
expected
Objective: Ensure that every other cell type in the table sorts
correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when columns other that role are sorted, they are sorted
correctly
4. Verify that sorting works as expected when table data is a binding
Objective: Ensure that the sorting works for all columns while using
data binding in table data
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Verify that all columns sort correctly
5. Verify that sorting works as expected when table data is a binding
and select column sorting is set to label
Objective: Ensure that the sorting works for all columns while using
data binding in table data with a select column set to sort by the label
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that all columns sort correctly
6. Verify that sortBy logic does not take effect or break user
experience until the user adds selectOptions in select cell
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Do not add selectOptions
- Set sortBy property to label
- Verify that all other columns display and sort correctly
7. Verify that sorting by label and value works correctly in deployed
mode
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Add selectOptions
- Set sortBy property to label
- Deploy application
- Confirm that sorting works correctly for all columns
Fixes #21993
## Automation
/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10165119164>
> Commit: 8a4e8b238adc0d78726a811b54a209caa4990606
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10165119164&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Tue, 30 Jul 2024 16:02:35 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [x] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a feature flag for dynamic table cell labeling.
- Added a sorting option for select cells, allowing sort by value or
label.
- Enhanced user interface with new configuration options for select
components.
- Improved sorting functionality for select columns to sort by labels.
- **Bug Fixes**
- Improved sorting functionality in the table widget to ensure accurate
data representation.
- **Tests**
- Expanded and clarified test cases for sorting functionality in the
Table Widget V2.
- Updated testing structure for better reliability and isolation of test
scenarios.
- Integrated dynamic testing capabilities based on feature flags.
- **Documentation**
- Added new locators for sorting controls to enhance UI interaction
capabilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-02 07:37:00 +00:00
|
|
|
/*
|
|
|
|
|
Check if there are select columns,
|
|
|
|
|
and if the columns are sorting by label instead of default value
|
|
|
|
|
*/
|
|
|
|
|
const selectColumnKeysWithSortByLabel = [];
|
2024-09-18 16:35:28 +00:00
|
|
|
|
feat: add sortBy property to table select cell type (#35187)
## Description
**Problem**
The table widget now supports the Select column type, which allows the
column to contain both a label and a value. This could be useful for
currency fields, foreign keys, or any other case where you want to
display a different version of the column value. However, there is a
problem with sorting. The table always sorts using the value, and does
not give the user an option to sort using the label, where it makes
sense in specific cases.
**Solution**
This PR adds a Sort By property to the table select cell, allowing the
users to choose which value is used for sorting without affecting any
functionality of the label or value of the select cell.
[Additional Technical
Documentation](https://www.notion.so/appsmith/Adding-sortBy-Property-to-Select-Columns-in-Table-Widget-V2-a5a41e6319a047378eb50a42be8c32ef?pvs=4)
**Tested Cases**
1. Sort select column by default value
Objective: Ensure that a newly added table with select column default
sorts by the value
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type.
- Add selectOptions property
- Verify that when sorted in ascending or descending order, the sorting
is correct
2. Sort select column by label
Objective: Ensure that a newly added table with select column and sortBy
property set to label sorts correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when sorted in ascending or descending order, the sorting
is correct and based on the label value only
3. Verify that sorting of other table cells that are not select works as
expected
Objective: Ensure that every other cell type in the table sorts
correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when columns other that role are sorted, they are sorted
correctly
4. Verify that sorting works as expected when table data is a binding
Objective: Ensure that the sorting works for all columns while using
data binding in table data
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Verify that all columns sort correctly
5. Verify that sorting works as expected when table data is a binding
and select column sorting is set to label
Objective: Ensure that the sorting works for all columns while using
data binding in table data with a select column set to sort by the label
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that all columns sort correctly
6. Verify that sortBy logic does not take effect or break user
experience until the user adds selectOptions in select cell
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Do not add selectOptions
- Set sortBy property to label
- Verify that all other columns display and sort correctly
7. Verify that sorting by label and value works correctly in deployed
mode
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Add selectOptions
- Set sortBy property to label
- Deploy application
- Confirm that sorting works correctly for all columns
Fixes #21993
## Automation
/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10165119164>
> Commit: 8a4e8b238adc0d78726a811b54a209caa4990606
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10165119164&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Tue, 30 Jul 2024 16:02:35 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [x] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a feature flag for dynamic table cell labeling.
- Added a sorting option for select cells, allowing sort by value or
label.
- Enhanced user interface with new configuration options for select
components.
- Improved sorting functionality for select columns to sort by labels.
- **Bug Fixes**
- Improved sorting functionality in the table widget to ensure accurate
data representation.
- **Tests**
- Expanded and clarified test cases for sorting functionality in the
Table Widget V2.
- Updated testing structure for better reliability and isolation of test
scenarios.
- Integrated dynamic testing capabilities based on feature flags.
- **Documentation**
- Added new locators for sorting controls to enhance UI interaction
capabilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-02 07:37:00 +00:00
|
|
|
Object.entries(primaryColumns).forEach(([id, column]) => {
|
|
|
|
|
const isColumnSortedByLabel =
|
|
|
|
|
column?.columnType === "select" &&
|
|
|
|
|
column?.sortBy === "label" &&
|
|
|
|
|
column?.selectOptions?.length;
|
2024-09-18 16:35:28 +00:00
|
|
|
|
feat: add sortBy property to table select cell type (#35187)
## Description
**Problem**
The table widget now supports the Select column type, which allows the
column to contain both a label and a value. This could be useful for
currency fields, foreign keys, or any other case where you want to
display a different version of the column value. However, there is a
problem with sorting. The table always sorts using the value, and does
not give the user an option to sort using the label, where it makes
sense in specific cases.
**Solution**
This PR adds a Sort By property to the table select cell, allowing the
users to choose which value is used for sorting without affecting any
functionality of the label or value of the select cell.
[Additional Technical
Documentation](https://www.notion.so/appsmith/Adding-sortBy-Property-to-Select-Columns-in-Table-Widget-V2-a5a41e6319a047378eb50a42be8c32ef?pvs=4)
**Tested Cases**
1. Sort select column by default value
Objective: Ensure that a newly added table with select column default
sorts by the value
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type.
- Add selectOptions property
- Verify that when sorted in ascending or descending order, the sorting
is correct
2. Sort select column by label
Objective: Ensure that a newly added table with select column and sortBy
property set to label sorts correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when sorted in ascending or descending order, the sorting
is correct and based on the label value only
3. Verify that sorting of other table cells that are not select works as
expected
Objective: Ensure that every other cell type in the table sorts
correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when columns other that role are sorted, they are sorted
correctly
4. Verify that sorting works as expected when table data is a binding
Objective: Ensure that the sorting works for all columns while using
data binding in table data
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Verify that all columns sort correctly
5. Verify that sorting works as expected when table data is a binding
and select column sorting is set to label
Objective: Ensure that the sorting works for all columns while using
data binding in table data with a select column set to sort by the label
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that all columns sort correctly
6. Verify that sortBy logic does not take effect or break user
experience until the user adds selectOptions in select cell
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Do not add selectOptions
- Set sortBy property to label
- Verify that all other columns display and sort correctly
7. Verify that sorting by label and value works correctly in deployed
mode
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Add selectOptions
- Set sortBy property to label
- Deploy application
- Confirm that sorting works correctly for all columns
Fixes #21993
## Automation
/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10165119164>
> Commit: 8a4e8b238adc0d78726a811b54a209caa4990606
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10165119164&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Tue, 30 Jul 2024 16:02:35 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [x] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a feature flag for dynamic table cell labeling.
- Added a sorting option for select cells, allowing sort by value or
label.
- Enhanced user interface with new configuration options for select
components.
- Improved sorting functionality for select columns to sort by labels.
- **Bug Fixes**
- Improved sorting functionality in the table widget to ensure accurate
data representation.
- **Tests**
- Expanded and clarified test cases for sorting functionality in the
Table Widget V2.
- Updated testing structure for better reliability and isolation of test
scenarios.
- Integrated dynamic testing capabilities based on feature flags.
- **Documentation**
- Added new locators for sorting controls to enhance UI interaction
capabilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-02 07:37:00 +00:00
|
|
|
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;
|
2024-09-18 16:35:28 +00:00
|
|
|
|
feat: add sortBy property to table select cell type (#35187)
## Description
**Problem**
The table widget now supports the Select column type, which allows the
column to contain both a label and a value. This could be useful for
currency fields, foreign keys, or any other case where you want to
display a different version of the column value. However, there is a
problem with sorting. The table always sorts using the value, and does
not give the user an option to sort using the label, where it makes
sense in specific cases.
**Solution**
This PR adds a Sort By property to the table select cell, allowing the
users to choose which value is used for sorting without affecting any
functionality of the label or value of the select cell.
[Additional Technical
Documentation](https://www.notion.so/appsmith/Adding-sortBy-Property-to-Select-Columns-in-Table-Widget-V2-a5a41e6319a047378eb50a42be8c32ef?pvs=4)
**Tested Cases**
1. Sort select column by default value
Objective: Ensure that a newly added table with select column default
sorts by the value
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type.
- Add selectOptions property
- Verify that when sorted in ascending or descending order, the sorting
is correct
2. Sort select column by label
Objective: Ensure that a newly added table with select column and sortBy
property set to label sorts correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when sorted in ascending or descending order, the sorting
is correct and based on the label value only
3. Verify that sorting of other table cells that are not select works as
expected
Objective: Ensure that every other cell type in the table sorts
correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when columns other that role are sorted, they are sorted
correctly
4. Verify that sorting works as expected when table data is a binding
Objective: Ensure that the sorting works for all columns while using
data binding in table data
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Verify that all columns sort correctly
5. Verify that sorting works as expected when table data is a binding
and select column sorting is set to label
Objective: Ensure that the sorting works for all columns while using
data binding in table data with a select column set to sort by the label
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that all columns sort correctly
6. Verify that sortBy logic does not take effect or break user
experience until the user adds selectOptions in select cell
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Do not add selectOptions
- Set sortBy property to label
- Verify that all other columns display and sort correctly
7. Verify that sorting by label and value works correctly in deployed
mode
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Add selectOptions
- Set sortBy property to label
- Deploy application
- Confirm that sorting works correctly for all columns
Fixes #21993
## Automation
/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10165119164>
> Commit: 8a4e8b238adc0d78726a811b54a209caa4990606
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10165119164&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Tue, 30 Jul 2024 16:02:35 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [x] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a feature flag for dynamic table cell labeling.
- Added a sorting option for select cells, allowing sort by value or
label.
- Enhanced user interface with new configuration options for select
components.
- Improved sorting functionality for select columns to sort by labels.
- **Bug Fixes**
- Improved sorting functionality in the table widget to ensure accurate
data representation.
- **Tests**
- Expanded and clarified test cases for sorting functionality in the
Table Widget V2.
- Updated testing structure for better reliability and isolation of test
scenarios.
- Integrated dynamic testing capabilities based on feature flags.
- **Documentation**
- Added new locators for sorting controls to enhance UI interaction
capabilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-02 07:37:00 +00:00
|
|
|
if (selectColumnKeysWithSortByLabel.length) {
|
|
|
|
|
const transformedValueToLabelTableData = processedTableData.map((row) => {
|
|
|
|
|
const newRow = { ...row };
|
2024-09-18 16:35:28 +00:00
|
|
|
|
feat: add sortBy property to table select cell type (#35187)
## Description
**Problem**
The table widget now supports the Select column type, which allows the
column to contain both a label and a value. This could be useful for
currency fields, foreign keys, or any other case where you want to
display a different version of the column value. However, there is a
problem with sorting. The table always sorts using the value, and does
not give the user an option to sort using the label, where it makes
sense in specific cases.
**Solution**
This PR adds a Sort By property to the table select cell, allowing the
users to choose which value is used for sorting without affecting any
functionality of the label or value of the select cell.
[Additional Technical
Documentation](https://www.notion.so/appsmith/Adding-sortBy-Property-to-Select-Columns-in-Table-Widget-V2-a5a41e6319a047378eb50a42be8c32ef?pvs=4)
**Tested Cases**
1. Sort select column by default value
Objective: Ensure that a newly added table with select column default
sorts by the value
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type.
- Add selectOptions property
- Verify that when sorted in ascending or descending order, the sorting
is correct
2. Sort select column by label
Objective: Ensure that a newly added table with select column and sortBy
property set to label sorts correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when sorted in ascending or descending order, the sorting
is correct and based on the label value only
3. Verify that sorting of other table cells that are not select works as
expected
Objective: Ensure that every other cell type in the table sorts
correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when columns other that role are sorted, they are sorted
correctly
4. Verify that sorting works as expected when table data is a binding
Objective: Ensure that the sorting works for all columns while using
data binding in table data
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Verify that all columns sort correctly
5. Verify that sorting works as expected when table data is a binding
and select column sorting is set to label
Objective: Ensure that the sorting works for all columns while using
data binding in table data with a select column set to sort by the label
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that all columns sort correctly
6. Verify that sortBy logic does not take effect or break user
experience until the user adds selectOptions in select cell
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Do not add selectOptions
- Set sortBy property to label
- Verify that all other columns display and sort correctly
7. Verify that sorting by label and value works correctly in deployed
mode
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Add selectOptions
- Set sortBy property to label
- Deploy application
- Confirm that sorting works correctly for all columns
Fixes #21993
## Automation
/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10165119164>
> Commit: 8a4e8b238adc0d78726a811b54a209caa4990606
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10165119164&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Tue, 30 Jul 2024 16:02:35 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [x] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a feature flag for dynamic table cell labeling.
- Added a sorting option for select cells, allowing sort by value or
label.
- Enhanced user interface with new configuration options for select
components.
- Improved sorting functionality for select columns to sort by labels.
- **Bug Fixes**
- Improved sorting functionality in the table widget to ensure accurate
data representation.
- **Tests**
- Expanded and clarified test cases for sorting functionality in the
Table Widget V2.
- Updated testing structure for better reliability and isolation of test
scenarios.
- Integrated dynamic testing capabilities based on feature flags.
- **Documentation**
- Added new locators for sorting controls to enhance UI interaction
capabilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-02 07:37:00 +00:00
|
|
|
selectColumnKeysWithSortByLabel.forEach((key) => {
|
|
|
|
|
const value = row[key];
|
2024-09-12 07:28:46 +00:00
|
|
|
const isSelectOptionsAnArray = _.isArray(
|
|
|
|
|
primaryColumns[key].selectOptions,
|
|
|
|
|
);
|
feat: add sortBy property to table select cell type (#35187)
## Description
**Problem**
The table widget now supports the Select column type, which allows the
column to contain both a label and a value. This could be useful for
currency fields, foreign keys, or any other case where you want to
display a different version of the column value. However, there is a
problem with sorting. The table always sorts using the value, and does
not give the user an option to sort using the label, where it makes
sense in specific cases.
**Solution**
This PR adds a Sort By property to the table select cell, allowing the
users to choose which value is used for sorting without affecting any
functionality of the label or value of the select cell.
[Additional Technical
Documentation](https://www.notion.so/appsmith/Adding-sortBy-Property-to-Select-Columns-in-Table-Widget-V2-a5a41e6319a047378eb50a42be8c32ef?pvs=4)
**Tested Cases**
1. Sort select column by default value
Objective: Ensure that a newly added table with select column default
sorts by the value
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type.
- Add selectOptions property
- Verify that when sorted in ascending or descending order, the sorting
is correct
2. Sort select column by label
Objective: Ensure that a newly added table with select column and sortBy
property set to label sorts correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when sorted in ascending or descending order, the sorting
is correct and based on the label value only
3. Verify that sorting of other table cells that are not select works as
expected
Objective: Ensure that every other cell type in the table sorts
correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when columns other that role are sorted, they are sorted
correctly
4. Verify that sorting works as expected when table data is a binding
Objective: Ensure that the sorting works for all columns while using
data binding in table data
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Verify that all columns sort correctly
5. Verify that sorting works as expected when table data is a binding
and select column sorting is set to label
Objective: Ensure that the sorting works for all columns while using
data binding in table data with a select column set to sort by the label
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that all columns sort correctly
6. Verify that sortBy logic does not take effect or break user
experience until the user adds selectOptions in select cell
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Do not add selectOptions
- Set sortBy property to label
- Verify that all other columns display and sort correctly
7. Verify that sorting by label and value works correctly in deployed
mode
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Add selectOptions
- Set sortBy property to label
- Deploy application
- Confirm that sorting works correctly for all columns
Fixes #21993
## Automation
/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10165119164>
> Commit: 8a4e8b238adc0d78726a811b54a209caa4990606
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10165119164&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Tue, 30 Jul 2024 16:02:35 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [x] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a feature flag for dynamic table cell labeling.
- Added a sorting option for select cells, allowing sort by value or
label.
- Enhanced user interface with new configuration options for select
components.
- Improved sorting functionality for select columns to sort by labels.
- **Bug Fixes**
- Improved sorting functionality in the table widget to ensure accurate
data representation.
- **Tests**
- Expanded and clarified test cases for sorting functionality in the
Table Widget V2.
- Updated testing structure for better reliability and isolation of test
scenarios.
- Integrated dynamic testing capabilities based on feature flags.
- **Documentation**
- Added new locators for sorting controls to enhance UI interaction
capabilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-02 07:37:00 +00:00
|
|
|
|
2024-09-12 07:28:46 +00:00
|
|
|
let selectOptions;
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* If selectOptions is an array, check if it contains nested arrays.
|
|
|
|
|
* This is to handle situations where selectOptons is a javascript object and computes as a nested array.
|
|
|
|
|
*/
|
|
|
|
|
if (isSelectOptionsAnArray) {
|
|
|
|
|
if (_.some(primaryColumns[key].selectOptions, _.isArray)) {
|
|
|
|
|
/* Handle the case where selectOptions contains nested arrays - selectOptions is javascript */
|
|
|
|
|
selectOptions =
|
|
|
|
|
primaryColumns[key].selectOptions[row.__originalIndex__];
|
|
|
|
|
const option = selectOptions.find((option) => {
|
|
|
|
|
return option.value === value;
|
|
|
|
|
});
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2024-09-12 07:28:46 +00:00
|
|
|
if (option) {
|
|
|
|
|
newRow[key] = option.label;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
/* Handle the case where selectOptions is a flat array - selectOptions is plain JSON */
|
|
|
|
|
selectOptions = primaryColumns[key].selectOptions;
|
|
|
|
|
const option = selectOptions.find(
|
|
|
|
|
(option) => option.value === value,
|
|
|
|
|
);
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2024-09-12 07:28:46 +00:00
|
|
|
if (option) {
|
|
|
|
|
newRow[key] = option.label;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
/* If selectOptions is not an array, parse it as JSON - not evaluated yet, so returns as string */
|
|
|
|
|
selectOptions = JSON.parse(primaryColumns[key].selectOptions);
|
|
|
|
|
const option = selectOptions.find(
|
|
|
|
|
(option) => option.value === value,
|
|
|
|
|
);
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2024-09-12 07:28:46 +00:00
|
|
|
if (option) {
|
|
|
|
|
newRow[key] = option.label;
|
|
|
|
|
}
|
feat: add sortBy property to table select cell type (#35187)
## Description
**Problem**
The table widget now supports the Select column type, which allows the
column to contain both a label and a value. This could be useful for
currency fields, foreign keys, or any other case where you want to
display a different version of the column value. However, there is a
problem with sorting. The table always sorts using the value, and does
not give the user an option to sort using the label, where it makes
sense in specific cases.
**Solution**
This PR adds a Sort By property to the table select cell, allowing the
users to choose which value is used for sorting without affecting any
functionality of the label or value of the select cell.
[Additional Technical
Documentation](https://www.notion.so/appsmith/Adding-sortBy-Property-to-Select-Columns-in-Table-Widget-V2-a5a41e6319a047378eb50a42be8c32ef?pvs=4)
**Tested Cases**
1. Sort select column by default value
Objective: Ensure that a newly added table with select column default
sorts by the value
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type.
- Add selectOptions property
- Verify that when sorted in ascending or descending order, the sorting
is correct
2. Sort select column by label
Objective: Ensure that a newly added table with select column and sortBy
property set to label sorts correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when sorted in ascending or descending order, the sorting
is correct and based on the label value only
3. Verify that sorting of other table cells that are not select works as
expected
Objective: Ensure that every other cell type in the table sorts
correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when columns other that role are sorted, they are sorted
correctly
4. Verify that sorting works as expected when table data is a binding
Objective: Ensure that the sorting works for all columns while using
data binding in table data
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Verify that all columns sort correctly
5. Verify that sorting works as expected when table data is a binding
and select column sorting is set to label
Objective: Ensure that the sorting works for all columns while using
data binding in table data with a select column set to sort by the label
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that all columns sort correctly
6. Verify that sortBy logic does not take effect or break user
experience until the user adds selectOptions in select cell
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Do not add selectOptions
- Set sortBy property to label
- Verify that all other columns display and sort correctly
7. Verify that sorting by label and value works correctly in deployed
mode
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Add selectOptions
- Set sortBy property to label
- Deploy application
- Confirm that sorting works correctly for all columns
Fixes #21993
## Automation
/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10165119164>
> Commit: 8a4e8b238adc0d78726a811b54a209caa4990606
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10165119164&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Tue, 30 Jul 2024 16:02:35 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [x] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a feature flag for dynamic table cell labeling.
- Added a sorting option for select cells, allowing sort by value or
label.
- Enhanced user interface with new configuration options for select
components.
- Improved sorting functionality for select columns to sort by labels.
- **Bug Fixes**
- Improved sorting functionality in the table widget to ensure accurate
data representation.
- **Tests**
- Expanded and clarified test cases for sorting functionality in the
Table Widget V2.
- Updated testing structure for better reliability and isolation of test
scenarios.
- Integrated dynamic testing capabilities based on feature flags.
- **Documentation**
- Added new locators for sorting controls to enhance UI interaction
capabilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-02 07:37:00 +00:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return newRow;
|
|
|
|
|
});
|
2024-09-18 16:35:28 +00:00
|
|
|
|
feat: add sortBy property to table select cell type (#35187)
## Description
**Problem**
The table widget now supports the Select column type, which allows the
column to contain both a label and a value. This could be useful for
currency fields, foreign keys, or any other case where you want to
display a different version of the column value. However, there is a
problem with sorting. The table always sorts using the value, and does
not give the user an option to sort using the label, where it makes
sense in specific cases.
**Solution**
This PR adds a Sort By property to the table select cell, allowing the
users to choose which value is used for sorting without affecting any
functionality of the label or value of the select cell.
[Additional Technical
Documentation](https://www.notion.so/appsmith/Adding-sortBy-Property-to-Select-Columns-in-Table-Widget-V2-a5a41e6319a047378eb50a42be8c32ef?pvs=4)
**Tested Cases**
1. Sort select column by default value
Objective: Ensure that a newly added table with select column default
sorts by the value
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type.
- Add selectOptions property
- Verify that when sorted in ascending or descending order, the sorting
is correct
2. Sort select column by label
Objective: Ensure that a newly added table with select column and sortBy
property set to label sorts correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when sorted in ascending or descending order, the sorting
is correct and based on the label value only
3. Verify that sorting of other table cells that are not select works as
expected
Objective: Ensure that every other cell type in the table sorts
correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when columns other that role are sorted, they are sorted
correctly
4. Verify that sorting works as expected when table data is a binding
Objective: Ensure that the sorting works for all columns while using
data binding in table data
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Verify that all columns sort correctly
5. Verify that sorting works as expected when table data is a binding
and select column sorting is set to label
Objective: Ensure that the sorting works for all columns while using
data binding in table data with a select column set to sort by the label
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that all columns sort correctly
6. Verify that sortBy logic does not take effect or break user
experience until the user adds selectOptions in select cell
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Do not add selectOptions
- Set sortBy property to label
- Verify that all other columns display and sort correctly
7. Verify that sorting by label and value works correctly in deployed
mode
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Add selectOptions
- Set sortBy property to label
- Deploy application
- Confirm that sorting works correctly for all columns
Fixes #21993
## Automation
/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10165119164>
> Commit: 8a4e8b238adc0d78726a811b54a209caa4990606
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10165119164&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Tue, 30 Jul 2024 16:02:35 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [x] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a feature flag for dynamic table cell labeling.
- Added a sorting option for select cells, allowing sort by value or
label.
- Enhanced user interface with new configuration options for select
components.
- Improved sorting functionality for select columns to sort by labels.
- **Bug Fixes**
- Improved sorting functionality in the table widget to ensure accurate
data representation.
- **Tests**
- Expanded and clarified test cases for sorting functionality in the
Table Widget V2.
- Updated testing structure for better reliability and isolation of test
scenarios.
- Integrated dynamic testing capabilities based on feature flags.
- **Documentation**
- Added new locators for sorting controls to enhance UI interaction
capabilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-02 07:37:00 +00:00
|
|
|
processedTableDataWithLabelInsteadOfValue =
|
|
|
|
|
transformedValueToLabelTableData;
|
|
|
|
|
}
|
2022-07-14 07:02:35 +00:00
|
|
|
|
|
|
|
|
if (sortByColumnId) {
|
|
|
|
|
const sortBycolumn = columns.find(
|
|
|
|
|
(column) => column.id === sortByColumnId,
|
|
|
|
|
);
|
2023-04-20 06:41:38 +00:00
|
|
|
const sortByColumnOriginalId = sortBycolumn.alias;
|
2022-07-14 07:02:35 +00:00
|
|
|
|
|
|
|
|
const columnType =
|
|
|
|
|
sortBycolumn && sortBycolumn.columnType
|
|
|
|
|
? sortBycolumn.columnType
|
|
|
|
|
: "text";
|
2024-01-26 12:40:12 +00:00
|
|
|
|
|
|
|
|
let inputFormat = (() => {
|
|
|
|
|
switch (sortBycolumn.inputFormat) {
|
|
|
|
|
case "Epoch":
|
|
|
|
|
return "X";
|
|
|
|
|
case "Milliseconds":
|
|
|
|
|
return "x";
|
|
|
|
|
default:
|
|
|
|
|
return sortBycolumn.inputFormat;
|
|
|
|
|
}
|
|
|
|
|
})();
|
|
|
|
|
|
2022-07-14 07:02:35 +00:00
|
|
|
const isEmptyOrNil = (value) => {
|
|
|
|
|
return _.isNil(value) || value === "";
|
|
|
|
|
};
|
|
|
|
|
const isAscOrder = props.sortOrder.order === "asc";
|
|
|
|
|
const sortByOrder = (isAGreaterThanB) => {
|
|
|
|
|
if (isAGreaterThanB) {
|
|
|
|
|
return isAscOrder ? 1 : -1;
|
|
|
|
|
} else {
|
|
|
|
|
return isAscOrder ? -1 : 1;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
feat: add sortBy property to table select cell type (#35187)
## Description
**Problem**
The table widget now supports the Select column type, which allows the
column to contain both a label and a value. This could be useful for
currency fields, foreign keys, or any other case where you want to
display a different version of the column value. However, there is a
problem with sorting. The table always sorts using the value, and does
not give the user an option to sort using the label, where it makes
sense in specific cases.
**Solution**
This PR adds a Sort By property to the table select cell, allowing the
users to choose which value is used for sorting without affecting any
functionality of the label or value of the select cell.
[Additional Technical
Documentation](https://www.notion.so/appsmith/Adding-sortBy-Property-to-Select-Columns-in-Table-Widget-V2-a5a41e6319a047378eb50a42be8c32ef?pvs=4)
**Tested Cases**
1. Sort select column by default value
Objective: Ensure that a newly added table with select column default
sorts by the value
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type.
- Add selectOptions property
- Verify that when sorted in ascending or descending order, the sorting
is correct
2. Sort select column by label
Objective: Ensure that a newly added table with select column and sortBy
property set to label sorts correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when sorted in ascending or descending order, the sorting
is correct and based on the label value only
3. Verify that sorting of other table cells that are not select works as
expected
Objective: Ensure that every other cell type in the table sorts
correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when columns other that role are sorted, they are sorted
correctly
4. Verify that sorting works as expected when table data is a binding
Objective: Ensure that the sorting works for all columns while using
data binding in table data
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Verify that all columns sort correctly
5. Verify that sorting works as expected when table data is a binding
and select column sorting is set to label
Objective: Ensure that the sorting works for all columns while using
data binding in table data with a select column set to sort by the label
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that all columns sort correctly
6. Verify that sortBy logic does not take effect or break user
experience until the user adds selectOptions in select cell
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Do not add selectOptions
- Set sortBy property to label
- Verify that all other columns display and sort correctly
7. Verify that sorting by label and value works correctly in deployed
mode
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Add selectOptions
- Set sortBy property to label
- Deploy application
- Confirm that sorting works correctly for all columns
Fixes #21993
## Automation
/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10165119164>
> Commit: 8a4e8b238adc0d78726a811b54a209caa4990606
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10165119164&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Tue, 30 Jul 2024 16:02:35 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [x] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a feature flag for dynamic table cell labeling.
- Added a sorting option for select cells, allowing sort by value or
label.
- Enhanced user interface with new configuration options for select
components.
- Improved sorting functionality for select columns to sort by labels.
- **Bug Fixes**
- Improved sorting functionality in the table widget to ensure accurate
data representation.
- **Tests**
- Expanded and clarified test cases for sorting functionality in the
Table Widget V2.
- Updated testing structure for better reliability and isolation of test
scenarios.
- Integrated dynamic testing capabilities based on feature flags.
- **Documentation**
- Added new locators for sorting controls to enhance UI interaction
capabilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-02 07:37:00 +00:00
|
|
|
const transformedTableDataForSorting =
|
|
|
|
|
selectColumnKeysWithSortByLabel.length
|
|
|
|
|
? processedTableDataWithLabelInsteadOfValue
|
|
|
|
|
: processedTableData;
|
|
|
|
|
|
|
|
|
|
sortedTableData = transformedTableDataForSorting.sort((a, b) => {
|
2022-07-14 07:02:35 +00:00
|
|
|
if (_.isPlainObject(a) && _.isPlainObject(b)) {
|
|
|
|
|
if (
|
|
|
|
|
isEmptyOrNil(a[sortByColumnOriginalId]) ||
|
|
|
|
|
isEmptyOrNil(b[sortByColumnOriginalId])
|
|
|
|
|
) {
|
|
|
|
|
/* push null, undefined and "" values to the bottom. */
|
|
|
|
|
return isEmptyOrNil(a[sortByColumnOriginalId]) ? 1 : -1;
|
|
|
|
|
} else {
|
|
|
|
|
switch (columnType) {
|
|
|
|
|
case "number":
|
2023-11-06 05:35:26 +00:00
|
|
|
case "currency":
|
2022-07-14 07:02:35 +00:00
|
|
|
return sortByOrder(
|
|
|
|
|
Number(a[sortByColumnOriginalId]) >
|
|
|
|
|
Number(b[sortByColumnOriginalId]),
|
|
|
|
|
);
|
|
|
|
|
case "date":
|
|
|
|
|
try {
|
|
|
|
|
return sortByOrder(
|
|
|
|
|
moment(a[sortByColumnOriginalId], inputFormat).isAfter(
|
|
|
|
|
moment(b[sortByColumnOriginalId], inputFormat),
|
|
|
|
|
),
|
|
|
|
|
);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
return -1;
|
|
|
|
|
}
|
2023-06-21 12:01:06 +00:00
|
|
|
case "url":
|
|
|
|
|
const column = primaryColumns[sortByColumnOriginalId];
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2023-06-21 12:01:06 +00:00
|
|
|
if (column && column.displayText) {
|
|
|
|
|
if (_.isString(column.displayText)) {
|
|
|
|
|
return sortByOrder(false);
|
|
|
|
|
} else if (_.isArray(column.displayText)) {
|
|
|
|
|
return sortByOrder(
|
|
|
|
|
column.displayText[a.__originalIndex__]
|
|
|
|
|
.toString()
|
|
|
|
|
.toLowerCase() >
|
|
|
|
|
column.displayText[b.__originalIndex__]
|
|
|
|
|
.toString()
|
|
|
|
|
.toLowerCase(),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-07-14 07:02:35 +00:00
|
|
|
default:
|
|
|
|
|
return sortByOrder(
|
|
|
|
|
a[sortByColumnOriginalId].toString().toLowerCase() >
|
|
|
|
|
b[sortByColumnOriginalId].toString().toLowerCase(),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
return isAscOrder ? 1 : 0;
|
|
|
|
|
}
|
|
|
|
|
});
|
feat: add sortBy property to table select cell type (#35187)
## Description
**Problem**
The table widget now supports the Select column type, which allows the
column to contain both a label and a value. This could be useful for
currency fields, foreign keys, or any other case where you want to
display a different version of the column value. However, there is a
problem with sorting. The table always sorts using the value, and does
not give the user an option to sort using the label, where it makes
sense in specific cases.
**Solution**
This PR adds a Sort By property to the table select cell, allowing the
users to choose which value is used for sorting without affecting any
functionality of the label or value of the select cell.
[Additional Technical
Documentation](https://www.notion.so/appsmith/Adding-sortBy-Property-to-Select-Columns-in-Table-Widget-V2-a5a41e6319a047378eb50a42be8c32ef?pvs=4)
**Tested Cases**
1. Sort select column by default value
Objective: Ensure that a newly added table with select column default
sorts by the value
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type.
- Add selectOptions property
- Verify that when sorted in ascending or descending order, the sorting
is correct
2. Sort select column by label
Objective: Ensure that a newly added table with select column and sortBy
property set to label sorts correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when sorted in ascending or descending order, the sorting
is correct and based on the label value only
3. Verify that sorting of other table cells that are not select works as
expected
Objective: Ensure that every other cell type in the table sorts
correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when columns other that role are sorted, they are sorted
correctly
4. Verify that sorting works as expected when table data is a binding
Objective: Ensure that the sorting works for all columns while using
data binding in table data
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Verify that all columns sort correctly
5. Verify that sorting works as expected when table data is a binding
and select column sorting is set to label
Objective: Ensure that the sorting works for all columns while using
data binding in table data with a select column set to sort by the label
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that all columns sort correctly
6. Verify that sortBy logic does not take effect or break user
experience until the user adds selectOptions in select cell
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Do not add selectOptions
- Set sortBy property to label
- Verify that all other columns display and sort correctly
7. Verify that sorting by label and value works correctly in deployed
mode
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Add selectOptions
- Set sortBy property to label
- Deploy application
- Confirm that sorting works correctly for all columns
Fixes #21993
## Automation
/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10165119164>
> Commit: 8a4e8b238adc0d78726a811b54a209caa4990606
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10165119164&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Tue, 30 Jul 2024 16:02:35 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [x] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a feature flag for dynamic table cell labeling.
- Added a sorting option for select cells, allowing sort by value or
label.
- Enhanced user interface with new configuration options for select
components.
- Improved sorting functionality for select columns to sort by labels.
- **Bug Fixes**
- Improved sorting functionality in the table widget to ensure accurate
data representation.
- **Tests**
- Expanded and clarified test cases for sorting functionality in the
Table Widget V2.
- Updated testing structure for better reliability and isolation of test
scenarios.
- Integrated dynamic testing capabilities based on feature flags.
- **Documentation**
- Added new locators for sorting controls to enhance UI interaction
capabilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-02 07:37:00 +00:00
|
|
|
|
2024-09-12 07:28:46 +00:00
|
|
|
/*
|
|
|
|
|
* When sorting is done, transform the data back to its original state
|
|
|
|
|
* where table data shows value instead of label
|
|
|
|
|
*/
|
feat: add sortBy property to table select cell type (#35187)
## Description
**Problem**
The table widget now supports the Select column type, which allows the
column to contain both a label and a value. This could be useful for
currency fields, foreign keys, or any other case where you want to
display a different version of the column value. However, there is a
problem with sorting. The table always sorts using the value, and does
not give the user an option to sort using the label, where it makes
sense in specific cases.
**Solution**
This PR adds a Sort By property to the table select cell, allowing the
users to choose which value is used for sorting without affecting any
functionality of the label or value of the select cell.
[Additional Technical
Documentation](https://www.notion.so/appsmith/Adding-sortBy-Property-to-Select-Columns-in-Table-Widget-V2-a5a41e6319a047378eb50a42be8c32ef?pvs=4)
**Tested Cases**
1. Sort select column by default value
Objective: Ensure that a newly added table with select column default
sorts by the value
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type.
- Add selectOptions property
- Verify that when sorted in ascending or descending order, the sorting
is correct
2. Sort select column by label
Objective: Ensure that a newly added table with select column and sortBy
property set to label sorts correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when sorted in ascending or descending order, the sorting
is correct and based on the label value only
3. Verify that sorting of other table cells that are not select works as
expected
Objective: Ensure that every other cell type in the table sorts
correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when columns other that role are sorted, they are sorted
correctly
4. Verify that sorting works as expected when table data is a binding
Objective: Ensure that the sorting works for all columns while using
data binding in table data
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Verify that all columns sort correctly
5. Verify that sorting works as expected when table data is a binding
and select column sorting is set to label
Objective: Ensure that the sorting works for all columns while using
data binding in table data with a select column set to sort by the label
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that all columns sort correctly
6. Verify that sortBy logic does not take effect or break user
experience until the user adds selectOptions in select cell
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Do not add selectOptions
- Set sortBy property to label
- Verify that all other columns display and sort correctly
7. Verify that sorting by label and value works correctly in deployed
mode
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Add selectOptions
- Set sortBy property to label
- Deploy application
- Confirm that sorting works correctly for all columns
Fixes #21993
## Automation
/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10165119164>
> Commit: 8a4e8b238adc0d78726a811b54a209caa4990606
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10165119164&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Tue, 30 Jul 2024 16:02:35 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [x] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a feature flag for dynamic table cell labeling.
- Added a sorting option for select cells, allowing sort by value or
label.
- Enhanced user interface with new configuration options for select
components.
- Improved sorting functionality for select columns to sort by labels.
- **Bug Fixes**
- Improved sorting functionality in the table widget to ensure accurate
data representation.
- **Tests**
- Expanded and clarified test cases for sorting functionality in the
Table Widget V2.
- Updated testing structure for better reliability and isolation of test
scenarios.
- Integrated dynamic testing capabilities based on feature flags.
- **Documentation**
- Added new locators for sorting controls to enhance UI interaction
capabilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-02 07:37:00 +00:00
|
|
|
if (selectColumnKeysWithSortByLabel.length) {
|
|
|
|
|
const transformedLabelToValueData = sortedTableData.map((row) => {
|
|
|
|
|
const newRow = { ...row };
|
2024-09-18 16:35:28 +00:00
|
|
|
|
feat: add sortBy property to table select cell type (#35187)
## Description
**Problem**
The table widget now supports the Select column type, which allows the
column to contain both a label and a value. This could be useful for
currency fields, foreign keys, or any other case where you want to
display a different version of the column value. However, there is a
problem with sorting. The table always sorts using the value, and does
not give the user an option to sort using the label, where it makes
sense in specific cases.
**Solution**
This PR adds a Sort By property to the table select cell, allowing the
users to choose which value is used for sorting without affecting any
functionality of the label or value of the select cell.
[Additional Technical
Documentation](https://www.notion.so/appsmith/Adding-sortBy-Property-to-Select-Columns-in-Table-Widget-V2-a5a41e6319a047378eb50a42be8c32ef?pvs=4)
**Tested Cases**
1. Sort select column by default value
Objective: Ensure that a newly added table with select column default
sorts by the value
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type.
- Add selectOptions property
- Verify that when sorted in ascending or descending order, the sorting
is correct
2. Sort select column by label
Objective: Ensure that a newly added table with select column and sortBy
property set to label sorts correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when sorted in ascending or descending order, the sorting
is correct and based on the label value only
3. Verify that sorting of other table cells that are not select works as
expected
Objective: Ensure that every other cell type in the table sorts
correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when columns other that role are sorted, they are sorted
correctly
4. Verify that sorting works as expected when table data is a binding
Objective: Ensure that the sorting works for all columns while using
data binding in table data
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Verify that all columns sort correctly
5. Verify that sorting works as expected when table data is a binding
and select column sorting is set to label
Objective: Ensure that the sorting works for all columns while using
data binding in table data with a select column set to sort by the label
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that all columns sort correctly
6. Verify that sortBy logic does not take effect or break user
experience until the user adds selectOptions in select cell
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Do not add selectOptions
- Set sortBy property to label
- Verify that all other columns display and sort correctly
7. Verify that sorting by label and value works correctly in deployed
mode
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Add selectOptions
- Set sortBy property to label
- Deploy application
- Confirm that sorting works correctly for all columns
Fixes #21993
## Automation
/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10165119164>
> Commit: 8a4e8b238adc0d78726a811b54a209caa4990606
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10165119164&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Tue, 30 Jul 2024 16:02:35 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [x] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a feature flag for dynamic table cell labeling.
- Added a sorting option for select cells, allowing sort by value or
label.
- Enhanced user interface with new configuration options for select
components.
- Improved sorting functionality for select columns to sort by labels.
- **Bug Fixes**
- Improved sorting functionality in the table widget to ensure accurate
data representation.
- **Tests**
- Expanded and clarified test cases for sorting functionality in the
Table Widget V2.
- Updated testing structure for better reliability and isolation of test
scenarios.
- Integrated dynamic testing capabilities based on feature flags.
- **Documentation**
- Added new locators for sorting controls to enhance UI interaction
capabilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-02 07:37:00 +00:00
|
|
|
selectColumnKeysWithSortByLabel.forEach((key) => {
|
|
|
|
|
const label = row[key];
|
2024-09-12 07:28:46 +00:00
|
|
|
const isSelectOptionsAnArray = _.isArray(
|
|
|
|
|
primaryColumns[key].selectOptions,
|
feat: add sortBy property to table select cell type (#35187)
## Description
**Problem**
The table widget now supports the Select column type, which allows the
column to contain both a label and a value. This could be useful for
currency fields, foreign keys, or any other case where you want to
display a different version of the column value. However, there is a
problem with sorting. The table always sorts using the value, and does
not give the user an option to sort using the label, where it makes
sense in specific cases.
**Solution**
This PR adds a Sort By property to the table select cell, allowing the
users to choose which value is used for sorting without affecting any
functionality of the label or value of the select cell.
[Additional Technical
Documentation](https://www.notion.so/appsmith/Adding-sortBy-Property-to-Select-Columns-in-Table-Widget-V2-a5a41e6319a047378eb50a42be8c32ef?pvs=4)
**Tested Cases**
1. Sort select column by default value
Objective: Ensure that a newly added table with select column default
sorts by the value
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type.
- Add selectOptions property
- Verify that when sorted in ascending or descending order, the sorting
is correct
2. Sort select column by label
Objective: Ensure that a newly added table with select column and sortBy
property set to label sorts correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when sorted in ascending or descending order, the sorting
is correct and based on the label value only
3. Verify that sorting of other table cells that are not select works as
expected
Objective: Ensure that every other cell type in the table sorts
correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when columns other that role are sorted, they are sorted
correctly
4. Verify that sorting works as expected when table data is a binding
Objective: Ensure that the sorting works for all columns while using
data binding in table data
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Verify that all columns sort correctly
5. Verify that sorting works as expected when table data is a binding
and select column sorting is set to label
Objective: Ensure that the sorting works for all columns while using
data binding in table data with a select column set to sort by the label
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that all columns sort correctly
6. Verify that sortBy logic does not take effect or break user
experience until the user adds selectOptions in select cell
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Do not add selectOptions
- Set sortBy property to label
- Verify that all other columns display and sort correctly
7. Verify that sorting by label and value works correctly in deployed
mode
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Add selectOptions
- Set sortBy property to label
- Deploy application
- Confirm that sorting works correctly for all columns
Fixes #21993
## Automation
/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10165119164>
> Commit: 8a4e8b238adc0d78726a811b54a209caa4990606
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10165119164&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Tue, 30 Jul 2024 16:02:35 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [x] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a feature flag for dynamic table cell labeling.
- Added a sorting option for select cells, allowing sort by value or
label.
- Enhanced user interface with new configuration options for select
components.
- Improved sorting functionality for select columns to sort by labels.
- **Bug Fixes**
- Improved sorting functionality in the table widget to ensure accurate
data representation.
- **Tests**
- Expanded and clarified test cases for sorting functionality in the
Table Widget V2.
- Updated testing structure for better reliability and isolation of test
scenarios.
- Integrated dynamic testing capabilities based on feature flags.
- **Documentation**
- Added new locators for sorting controls to enhance UI interaction
capabilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-02 07:37:00 +00:00
|
|
|
);
|
2024-09-12 07:28:46 +00:00
|
|
|
|
|
|
|
|
let selectOptions;
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* If selectOptions is an array, check if it contains nested arrays.
|
|
|
|
|
* This is to handle situations where selectOptons is a javascript object and computes as a nested array.
|
|
|
|
|
*/
|
|
|
|
|
if (isSelectOptionsAnArray) {
|
|
|
|
|
if (_.some(primaryColumns[key].selectOptions, _.isArray)) {
|
|
|
|
|
/* Handle the case where selectOptions contains nested arrays - selectOptions is javascript */
|
|
|
|
|
selectOptions =
|
|
|
|
|
primaryColumns[key].selectOptions[row.__originalIndex__];
|
|
|
|
|
const option = selectOptions.find((option) => {
|
|
|
|
|
return option.label === label;
|
|
|
|
|
});
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2024-09-12 07:28:46 +00:00
|
|
|
if (option) {
|
|
|
|
|
newRow[key] = option.value;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
/* Handle the case where selectOptions is a flat array - selectOptions is plain JSON */
|
|
|
|
|
selectOptions = primaryColumns[key].selectOptions;
|
|
|
|
|
const option = selectOptions.find(
|
|
|
|
|
(option) => option.label === label,
|
|
|
|
|
);
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2024-09-12 07:28:46 +00:00
|
|
|
if (option) {
|
|
|
|
|
newRow[key] = option.value;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
/* If selectOptions is not an array, parse it as JSON - not evaluated yet, so returns as string */
|
|
|
|
|
selectOptions = JSON.parse(primaryColumns[key].selectOptions);
|
|
|
|
|
const option = selectOptions.find(
|
|
|
|
|
(option) => option.label === label,
|
|
|
|
|
);
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2024-09-12 07:28:46 +00:00
|
|
|
if (option) {
|
|
|
|
|
newRow[key] = option.value;
|
|
|
|
|
}
|
feat: add sortBy property to table select cell type (#35187)
## Description
**Problem**
The table widget now supports the Select column type, which allows the
column to contain both a label and a value. This could be useful for
currency fields, foreign keys, or any other case where you want to
display a different version of the column value. However, there is a
problem with sorting. The table always sorts using the value, and does
not give the user an option to sort using the label, where it makes
sense in specific cases.
**Solution**
This PR adds a Sort By property to the table select cell, allowing the
users to choose which value is used for sorting without affecting any
functionality of the label or value of the select cell.
[Additional Technical
Documentation](https://www.notion.so/appsmith/Adding-sortBy-Property-to-Select-Columns-in-Table-Widget-V2-a5a41e6319a047378eb50a42be8c32ef?pvs=4)
**Tested Cases**
1. Sort select column by default value
Objective: Ensure that a newly added table with select column default
sorts by the value
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type.
- Add selectOptions property
- Verify that when sorted in ascending or descending order, the sorting
is correct
2. Sort select column by label
Objective: Ensure that a newly added table with select column and sortBy
property set to label sorts correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when sorted in ascending or descending order, the sorting
is correct and based on the label value only
3. Verify that sorting of other table cells that are not select works as
expected
Objective: Ensure that every other cell type in the table sorts
correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when columns other that role are sorted, they are sorted
correctly
4. Verify that sorting works as expected when table data is a binding
Objective: Ensure that the sorting works for all columns while using
data binding in table data
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Verify that all columns sort correctly
5. Verify that sorting works as expected when table data is a binding
and select column sorting is set to label
Objective: Ensure that the sorting works for all columns while using
data binding in table data with a select column set to sort by the label
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that all columns sort correctly
6. Verify that sortBy logic does not take effect or break user
experience until the user adds selectOptions in select cell
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Do not add selectOptions
- Set sortBy property to label
- Verify that all other columns display and sort correctly
7. Verify that sorting by label and value works correctly in deployed
mode
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Add selectOptions
- Set sortBy property to label
- Deploy application
- Confirm that sorting works correctly for all columns
Fixes #21993
## Automation
/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10165119164>
> Commit: 8a4e8b238adc0d78726a811b54a209caa4990606
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10165119164&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Tue, 30 Jul 2024 16:02:35 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [x] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a feature flag for dynamic table cell labeling.
- Added a sorting option for select cells, allowing sort by value or
label.
- Enhanced user interface with new configuration options for select
components.
- Improved sorting functionality for select columns to sort by labels.
- **Bug Fixes**
- Improved sorting functionality in the table widget to ensure accurate
data representation.
- **Tests**
- Expanded and clarified test cases for sorting functionality in the
Table Widget V2.
- Updated testing structure for better reliability and isolation of test
scenarios.
- Integrated dynamic testing capabilities based on feature flags.
- **Documentation**
- Added new locators for sorting controls to enhance UI interaction
capabilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-02 07:37:00 +00:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return newRow;
|
|
|
|
|
});
|
2024-09-18 16:35:28 +00:00
|
|
|
|
feat: add sortBy property to table select cell type (#35187)
## Description
**Problem**
The table widget now supports the Select column type, which allows the
column to contain both a label and a value. This could be useful for
currency fields, foreign keys, or any other case where you want to
display a different version of the column value. However, there is a
problem with sorting. The table always sorts using the value, and does
not give the user an option to sort using the label, where it makes
sense in specific cases.
**Solution**
This PR adds a Sort By property to the table select cell, allowing the
users to choose which value is used for sorting without affecting any
functionality of the label or value of the select cell.
[Additional Technical
Documentation](https://www.notion.so/appsmith/Adding-sortBy-Property-to-Select-Columns-in-Table-Widget-V2-a5a41e6319a047378eb50a42be8c32ef?pvs=4)
**Tested Cases**
1. Sort select column by default value
Objective: Ensure that a newly added table with select column default
sorts by the value
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type.
- Add selectOptions property
- Verify that when sorted in ascending or descending order, the sorting
is correct
2. Sort select column by label
Objective: Ensure that a newly added table with select column and sortBy
property set to label sorts correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when sorted in ascending or descending order, the sorting
is correct and based on the label value only
3. Verify that sorting of other table cells that are not select works as
expected
Objective: Ensure that every other cell type in the table sorts
correctly
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that when columns other that role are sorted, they are sorted
correctly
4. Verify that sorting works as expected when table data is a binding
Objective: Ensure that the sorting works for all columns while using
data binding in table data
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Verify that all columns sort correctly
5. Verify that sorting works as expected when table data is a binding
and select column sorting is set to label
Objective: Ensure that the sorting works for all columns while using
data binding in table data with a select column set to sort by the label
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property
- Set a column (e.g., role) to select type
- Add selectOptions property
- Set sortBy property to label
- Verify that all columns sort correctly
6. Verify that sortBy logic does not take effect or break user
experience until the user adds selectOptions in select cell
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Do not add selectOptions
- Set sortBy property to label
- Verify that all other columns display and sort correctly
7. Verify that sorting by label and value works correctly in deployed
mode
**Steps:**
- Drop a new table widget
- Link a query binding to the table data property or add raw data
- Set a column (e.g., role) to select type
- Add selectOptions
- Set sortBy property to label
- Deploy application
- Confirm that sorting works correctly for all columns
Fixes #21993
## Automation
/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10165119164>
> Commit: 8a4e8b238adc0d78726a811b54a209caa4990606
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10165119164&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Tue, 30 Jul 2024 16:02:35 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [x] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a feature flag for dynamic table cell labeling.
- Added a sorting option for select cells, allowing sort by value or
label.
- Enhanced user interface with new configuration options for select
components.
- Improved sorting functionality for select columns to sort by labels.
- **Bug Fixes**
- Improved sorting functionality in the table widget to ensure accurate
data representation.
- **Tests**
- Expanded and clarified test cases for sorting functionality in the
Table Widget V2.
- Updated testing structure for better reliability and isolation of test
scenarios.
- Integrated dynamic testing capabilities based on feature flags.
- **Documentation**
- Added new locators for sorting controls to enhance UI interaction
capabilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-02 07:37:00 +00:00
|
|
|
sortedTableData = transformedLabelToValueData;
|
|
|
|
|
}
|
2022-07-14 07:02:35 +00:00
|
|
|
} else {
|
|
|
|
|
sortedTableData = [...processedTableData];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const ConditionFunctions = {
|
|
|
|
|
isExactly: (a, b) => {
|
|
|
|
|
return a.toString() === b.toString();
|
|
|
|
|
},
|
|
|
|
|
empty: (a) => {
|
|
|
|
|
return _.isNil(a) || _.isEmpty(a.toString());
|
|
|
|
|
},
|
|
|
|
|
notEmpty: (a) => {
|
|
|
|
|
return !_.isNil(a) && !_.isEmpty(a.toString());
|
|
|
|
|
},
|
|
|
|
|
notEqualTo: (a, b) => {
|
|
|
|
|
return a.toString() !== b.toString();
|
|
|
|
|
},
|
|
|
|
|
/* Note: Duplicate of isExactly */
|
|
|
|
|
isEqualTo: (a, b) => {
|
|
|
|
|
return a.toString() === b.toString();
|
|
|
|
|
},
|
|
|
|
|
lessThan: (a, b) => {
|
|
|
|
|
return Number(a) < Number(b);
|
|
|
|
|
},
|
|
|
|
|
lessThanEqualTo: (a, b) => {
|
|
|
|
|
return Number(a) <= Number(b);
|
|
|
|
|
},
|
|
|
|
|
greaterThan: (a, b) => {
|
|
|
|
|
return Number(a) > Number(b);
|
|
|
|
|
},
|
|
|
|
|
greaterThanEqualTo: (a, b) => {
|
|
|
|
|
return Number(a) >= Number(b);
|
|
|
|
|
},
|
|
|
|
|
contains: (a, b) => {
|
|
|
|
|
try {
|
|
|
|
|
return a
|
|
|
|
|
.toString()
|
|
|
|
|
.toLowerCase()
|
|
|
|
|
.includes(b.toString().toLowerCase());
|
|
|
|
|
} catch (e) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
doesNotContain: (a, b) => {
|
|
|
|
|
try {
|
|
|
|
|
return !a
|
|
|
|
|
.toString()
|
|
|
|
|
.toLowerCase()
|
|
|
|
|
.includes(b.toString().toLowerCase());
|
|
|
|
|
} catch (e) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
startsWith: (a, b) => {
|
|
|
|
|
try {
|
|
|
|
|
return (
|
chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
## Description
This PR upgrades Prettier to v2 + enforces TypeScript’s [`import
type`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export)
syntax where applicable. It’s submitted as a separate PR so we can merge
it easily.
As a part of this PR, we reformat the codebase heavily:
- add `import type` everywhere where it’s required, and
- re-format the code to account for Prettier 2’s breaking changes:
https://prettier.io/blog/2020/03/21/2.0.0.html#breaking-changes
This PR is submitted against `release` to make sure all new code by team
members will adhere to new formatting standards, and we’ll have fewer
conflicts when merging `bundle-optimizations` into `release`. (I’ll
merge `release` back into `bundle-optimizations` once this PR is
merged.)
### Why is this needed?
This PR is needed because, for the Lodash optimization from
https://github.com/appsmithorg/appsmith/commit/7cbb12af886621256224be0c93e6a465dd710ad3,
we need to use `import type`. Otherwise, `babel-plugin-lodash` complains
that `LoDashStatic` is not a lodash function.
However, just using `import type` in the current codebase will give you
this:
<img width="962" alt="Screenshot 2023-03-08 at 17 45 59"
src="https://user-images.githubusercontent.com/2953267/223775744-407afa0c-e8b9-44a1-90f9-b879348da57f.png">
That’s because Prettier 1 can’t parse `import type` at all. To parse it,
we need to upgrade to Prettier 2.
### Why enforce `import type`?
Apart from just enabling `import type` support, this PR enforces
specifying `import type` everywhere it’s needed. (Developers will get
immediate TypeScript and ESLint errors when they forget to do so.)
I’m doing this because I believe `import type` improves DX and makes
refactorings easier.
Let’s say you had a few imports like below. Can you tell which of these
imports will increase the bundle size? (Tip: it’s not all of them!)
```ts
// app/client/src/workers/Linting/utils.ts
import { Position } from "codemirror";
import { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
It’s pretty hard, right?
What about now?
```ts
// app/client/src/workers/Linting/utils.ts
import type { Position } from "codemirror";
import type { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
Now, it’s clear that only `lodash` will be bundled.
This helps developers to see which imports are problematic, but it
_also_ helps with refactorings. Now, if you want to see where
`codemirror` is bundled, you can just grep for `import \{.*\} from
"codemirror"` – and you won’t get any type-only imports.
This also helps (some) bundlers. Upon transpiling, TypeScript erases
type-only imports completely. In some environment (not ours), this makes
the bundle smaller, as the bundler doesn’t need to bundle type-only
imports anymore.
## Type of change
- Chore (housekeeping or task changes that don't impact user perception)
## How Has This Been Tested?
This was tested to not break the build.
### Test Plan
> Add Testsmith test cases links that relate to this PR
### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
---------
Co-authored-by: Satish Gandham <hello@satishgandham.com>
Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
2023-03-16 11:41:47 +00:00
|
|
|
a.toString().toLowerCase().indexOf(b.toString().toLowerCase()) === 0
|
2022-07-14 07:02:35 +00:00
|
|
|
);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
endsWith: (a, b) => {
|
|
|
|
|
try {
|
|
|
|
|
const _a = a.toString().toLowerCase();
|
|
|
|
|
const _b = b.toString().toLowerCase();
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-10-14 05:39:52 +00:00
|
|
|
return (
|
|
|
|
|
_a.lastIndexOf(_b) >= 0 &&
|
|
|
|
|
_a.length === _a.lastIndexOf(_b) + _b.length
|
|
|
|
|
);
|
2022-07-14 07:02:35 +00:00
|
|
|
} catch (e) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
is: (a, b) => {
|
|
|
|
|
return moment(a).isSame(moment(b), "minute");
|
|
|
|
|
},
|
|
|
|
|
isNot: (a, b) => {
|
|
|
|
|
return !moment(a).isSame(moment(b), "minute");
|
|
|
|
|
},
|
|
|
|
|
isAfter: (a, b) => {
|
|
|
|
|
return moment(a).isAfter(moment(b), "minute");
|
|
|
|
|
},
|
|
|
|
|
isBefore: (a, b) => {
|
|
|
|
|
return moment(a).isBefore(moment(b), "minute");
|
|
|
|
|
},
|
2022-09-08 11:05:59 +00:00
|
|
|
isChecked: (a) => {
|
|
|
|
|
return a === true;
|
|
|
|
|
},
|
|
|
|
|
isUnChecked: (a) => {
|
|
|
|
|
return a === false;
|
|
|
|
|
},
|
2022-07-14 07:02:35 +00:00
|
|
|
};
|
|
|
|
|
let searchKey;
|
|
|
|
|
|
|
|
|
|
/* skipping search when client side search is turned off */
|
|
|
|
|
if (
|
|
|
|
|
props.searchText &&
|
|
|
|
|
(!props.onSearchTextChanged || props.enableClientSideSearch)
|
|
|
|
|
) {
|
|
|
|
|
searchKey = props.searchText.toLowerCase();
|
|
|
|
|
} else {
|
|
|
|
|
searchKey = "";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* We need to omit hidden column values from being included
|
|
|
|
|
* in the search
|
|
|
|
|
*/
|
|
|
|
|
const hiddenColumns = Object.values(props.primaryColumns)
|
|
|
|
|
.filter((column) => !column.isVisible)
|
|
|
|
|
.map((column) => column.alias);
|
|
|
|
|
|
|
|
|
|
const finalTableData = sortedTableData.filter((row) => {
|
|
|
|
|
let isSearchKeyFound = true;
|
2023-06-21 12:01:06 +00:00
|
|
|
const columnWithDisplayText = Object.values(props.primaryColumns).filter(
|
|
|
|
|
(column) => column.columnType === "url" && column.displayText,
|
|
|
|
|
);
|
2024-09-12 07:28:46 +00:00
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* For select columns with label and values, we need to include the label value
|
feat: Allow filtering of table select column label (#36755)
## Description
**Problem**
When filtering a table with a select column type, users expect to filter
by the visible label values shown in each cell. Currently, however,
filtering is applied to the underlying option values rather than the
displayed labels, leading to unexpected filter results for end-users.
**Root Cause**
In a previous update ([PR
#35124](https://github.com/appsmithorg/appsmith/pull/35124)), the table
cell display for select columns was changed to show labels instead of
values. However, the filtering logic was not updated accordingly, so the
table still filtered on the original option values, creating a mismatch
between displayed and filtered content.
**Solution**
This PR modifies the displayedRow property within the table widget to
use the label property instead of the value key when filtering or
searching select column data. This ensures that table filtering and
searching now align with the visible label values in the select columns,
providing a more intuitive user experience.
Fixes #36635
## Automation
/ok-to-test tags="@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11234735437>
> Commit: fd6c179ffb2c61d23cb98fd749c8df49cebcfcdd
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11234735437&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding`
> Spec:
> <hr>Tue, 08 Oct 2024 12:48:01 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new test case to verify filtering functionality for the
"role" column in the Table Widget.
- Enhanced filtering mechanism to support multiple label values for
select columns.
- **Bug Fixes**
- Removed outdated search functionality to streamline user experience.
- **Refactor**
- Restructured existing test cases for improved clarity and flow.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-10-09 08:09:12 +00:00
|
|
|
* in the search and filter data
|
2024-09-12 07:28:46 +00:00
|
|
|
*/
|
feat: Allow filtering of table select column label (#36755)
## Description
**Problem**
When filtering a table with a select column type, users expect to filter
by the visible label values shown in each cell. Currently, however,
filtering is applied to the underlying option values rather than the
displayed labels, leading to unexpected filter results for end-users.
**Root Cause**
In a previous update ([PR
#35124](https://github.com/appsmithorg/appsmith/pull/35124)), the table
cell display for select columns was changed to show labels instead of
values. However, the filtering logic was not updated accordingly, so the
table still filtered on the original option values, creating a mismatch
between displayed and filtered content.
**Solution**
This PR modifies the displayedRow property within the table widget to
use the label property instead of the value key when filtering or
searching select column data. This ensures that table filtering and
searching now align with the visible label values in the select columns,
providing a more intuitive user experience.
Fixes #36635
## Automation
/ok-to-test tags="@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11234735437>
> Commit: fd6c179ffb2c61d23cb98fd749c8df49cebcfcdd
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11234735437&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding`
> Spec:
> <hr>Tue, 08 Oct 2024 12:48:01 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new test case to verify filtering functionality for the
"role" column in the Table Widget.
- Enhanced filtering mechanism to support multiple label values for
select columns.
- **Bug Fixes**
- Removed outdated search functionality to streamline user experience.
- **Refactor**
- Restructured existing test cases for improved clarity and flow.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-10-09 08:09:12 +00:00
|
|
|
let labelValuesForSelectCell = {};
|
2024-09-12 07:28:46 +00:00
|
|
|
/*
|
|
|
|
|
* Initialize an array to store keys for columns that have the 'select' column type
|
|
|
|
|
* and contain selectOptions.
|
|
|
|
|
*/
|
|
|
|
|
const selectColumnKeys = [];
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2024-09-12 07:28:46 +00:00
|
|
|
/*
|
|
|
|
|
* Iterate over the primary columns to identify which columns are of type 'select'
|
|
|
|
|
* and have selectOptions. These keys are pushed into the selectColumnKeys array.
|
|
|
|
|
*/
|
|
|
|
|
Object.entries(props.primaryColumns).forEach(([id, column]) => {
|
|
|
|
|
const isColumnSelectColumnType =
|
|
|
|
|
column?.columnType === "select" && column?.selectOptions?.length;
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2024-09-12 07:28:46 +00:00
|
|
|
if (isColumnSelectColumnType) {
|
|
|
|
|
selectColumnKeys.push(id);
|
|
|
|
|
}
|
|
|
|
|
});
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2024-09-12 07:28:46 +00:00
|
|
|
/*
|
|
|
|
|
* If there are any select columns, iterate over them to find the label value
|
|
|
|
|
* associated with the selected value in each row.
|
|
|
|
|
*/
|
|
|
|
|
if (selectColumnKeys.length) {
|
|
|
|
|
selectColumnKeys.forEach((key) => {
|
|
|
|
|
const value = row[key];
|
|
|
|
|
|
|
|
|
|
const isSelectOptionsAnArray = _.isArray(
|
|
|
|
|
primaryColumns[key].selectOptions,
|
|
|
|
|
);
|
|
|
|
|
|
feat: Allow filtering of table select column label (#36755)
## Description
**Problem**
When filtering a table with a select column type, users expect to filter
by the visible label values shown in each cell. Currently, however,
filtering is applied to the underlying option values rather than the
displayed labels, leading to unexpected filter results for end-users.
**Root Cause**
In a previous update ([PR
#35124](https://github.com/appsmithorg/appsmith/pull/35124)), the table
cell display for select columns was changed to show labels instead of
values. However, the filtering logic was not updated accordingly, so the
table still filtered on the original option values, creating a mismatch
between displayed and filtered content.
**Solution**
This PR modifies the displayedRow property within the table widget to
use the label property instead of the value key when filtering or
searching select column data. This ensures that table filtering and
searching now align with the visible label values in the select columns,
providing a more intuitive user experience.
Fixes #36635
## Automation
/ok-to-test tags="@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11234735437>
> Commit: fd6c179ffb2c61d23cb98fd749c8df49cebcfcdd
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11234735437&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding`
> Spec:
> <hr>Tue, 08 Oct 2024 12:48:01 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new test case to verify filtering functionality for the
"role" column in the Table Widget.
- Enhanced filtering mechanism to support multiple label values for
select columns.
- **Bug Fixes**
- Removed outdated search functionality to streamline user experience.
- **Refactor**
- Restructured existing test cases for improved clarity and flow.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-10-09 08:09:12 +00:00
|
|
|
let selectOptions = {};
|
2024-09-12 07:28:46 +00:00
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* If selectOptions is an array, check if it contains nested arrays.
|
|
|
|
|
* This is to handle situations where selectOptons is a javascript object and computes as a nested array.
|
|
|
|
|
*/
|
|
|
|
|
if (isSelectOptionsAnArray) {
|
feat: Allow filtering of table select column label (#36755)
## Description
**Problem**
When filtering a table with a select column type, users expect to filter
by the visible label values shown in each cell. Currently, however,
filtering is applied to the underlying option values rather than the
displayed labels, leading to unexpected filter results for end-users.
**Root Cause**
In a previous update ([PR
#35124](https://github.com/appsmithorg/appsmith/pull/35124)), the table
cell display for select columns was changed to show labels instead of
values. However, the filtering logic was not updated accordingly, so the
table still filtered on the original option values, creating a mismatch
between displayed and filtered content.
**Solution**
This PR modifies the displayedRow property within the table widget to
use the label property instead of the value key when filtering or
searching select column data. This ensures that table filtering and
searching now align with the visible label values in the select columns,
providing a more intuitive user experience.
Fixes #36635
## Automation
/ok-to-test tags="@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11234735437>
> Commit: fd6c179ffb2c61d23cb98fd749c8df49cebcfcdd
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11234735437&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding`
> Spec:
> <hr>Tue, 08 Oct 2024 12:48:01 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new test case to verify filtering functionality for the
"role" column in the Table Widget.
- Enhanced filtering mechanism to support multiple label values for
select columns.
- **Bug Fixes**
- Removed outdated search functionality to streamline user experience.
- **Refactor**
- Restructured existing test cases for improved clarity and flow.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-10-09 08:09:12 +00:00
|
|
|
const selectOptionKey = primaryColumns[key].alias;
|
|
|
|
|
|
2024-09-12 07:28:46 +00:00
|
|
|
if (_.some(primaryColumns[key].selectOptions, _.isArray)) {
|
|
|
|
|
/* Handle the case where selectOptions contains nested arrays - selectOptions is javascript */
|
|
|
|
|
selectOptions =
|
|
|
|
|
primaryColumns[key].selectOptions[row.__originalIndex__];
|
|
|
|
|
const option = selectOptions.find((option) => {
|
|
|
|
|
return option.value === value;
|
|
|
|
|
});
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2024-09-12 07:28:46 +00:00
|
|
|
if (option) {
|
feat: Allow filtering of table select column label (#36755)
## Description
**Problem**
When filtering a table with a select column type, users expect to filter
by the visible label values shown in each cell. Currently, however,
filtering is applied to the underlying option values rather than the
displayed labels, leading to unexpected filter results for end-users.
**Root Cause**
In a previous update ([PR
#35124](https://github.com/appsmithorg/appsmith/pull/35124)), the table
cell display for select columns was changed to show labels instead of
values. However, the filtering logic was not updated accordingly, so the
table still filtered on the original option values, creating a mismatch
between displayed and filtered content.
**Solution**
This PR modifies the displayedRow property within the table widget to
use the label property instead of the value key when filtering or
searching select column data. This ensures that table filtering and
searching now align with the visible label values in the select columns,
providing a more intuitive user experience.
Fixes #36635
## Automation
/ok-to-test tags="@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11234735437>
> Commit: fd6c179ffb2c61d23cb98fd749c8df49cebcfcdd
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11234735437&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding`
> Spec:
> <hr>Tue, 08 Oct 2024 12:48:01 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new test case to verify filtering functionality for the
"role" column in the Table Widget.
- Enhanced filtering mechanism to support multiple label values for
select columns.
- **Bug Fixes**
- Removed outdated search functionality to streamline user experience.
- **Refactor**
- Restructured existing test cases for improved clarity and flow.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-10-09 08:09:12 +00:00
|
|
|
labelValuesForSelectCell[selectOptionKey] = option.label;
|
2024-09-12 07:28:46 +00:00
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
/* Handle the case where selectOptions is a flat array - selectOptions is plain JSON */
|
|
|
|
|
selectOptions = primaryColumns[key].selectOptions;
|
|
|
|
|
const option = selectOptions.find(
|
|
|
|
|
(option) => option.value === value,
|
|
|
|
|
);
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2024-09-12 07:28:46 +00:00
|
|
|
if (option) {
|
feat: Allow filtering of table select column label (#36755)
## Description
**Problem**
When filtering a table with a select column type, users expect to filter
by the visible label values shown in each cell. Currently, however,
filtering is applied to the underlying option values rather than the
displayed labels, leading to unexpected filter results for end-users.
**Root Cause**
In a previous update ([PR
#35124](https://github.com/appsmithorg/appsmith/pull/35124)), the table
cell display for select columns was changed to show labels instead of
values. However, the filtering logic was not updated accordingly, so the
table still filtered on the original option values, creating a mismatch
between displayed and filtered content.
**Solution**
This PR modifies the displayedRow property within the table widget to
use the label property instead of the value key when filtering or
searching select column data. This ensures that table filtering and
searching now align with the visible label values in the select columns,
providing a more intuitive user experience.
Fixes #36635
## Automation
/ok-to-test tags="@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11234735437>
> Commit: fd6c179ffb2c61d23cb98fd749c8df49cebcfcdd
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11234735437&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding`
> Spec:
> <hr>Tue, 08 Oct 2024 12:48:01 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new test case to verify filtering functionality for the
"role" column in the Table Widget.
- Enhanced filtering mechanism to support multiple label values for
select columns.
- **Bug Fixes**
- Removed outdated search functionality to streamline user experience.
- **Refactor**
- Restructured existing test cases for improved clarity and flow.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-10-09 08:09:12 +00:00
|
|
|
labelValuesForSelectCell[selectOptionKey] = option.label;
|
2024-09-12 07:28:46 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
/* If selectOptions is not an array, parse it as JSON - not evaluated yet, so returns as string */
|
|
|
|
|
selectOptions = JSON.parse(primaryColumns[key].selectOptions);
|
|
|
|
|
const option = selectOptions.find(
|
|
|
|
|
(option) => option.value === value,
|
|
|
|
|
);
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2024-09-12 07:28:46 +00:00
|
|
|
if (option) {
|
feat: Allow filtering of table select column label (#36755)
## Description
**Problem**
When filtering a table with a select column type, users expect to filter
by the visible label values shown in each cell. Currently, however,
filtering is applied to the underlying option values rather than the
displayed labels, leading to unexpected filter results for end-users.
**Root Cause**
In a previous update ([PR
#35124](https://github.com/appsmithorg/appsmith/pull/35124)), the table
cell display for select columns was changed to show labels instead of
values. However, the filtering logic was not updated accordingly, so the
table still filtered on the original option values, creating a mismatch
between displayed and filtered content.
**Solution**
This PR modifies the displayedRow property within the table widget to
use the label property instead of the value key when filtering or
searching select column data. This ensures that table filtering and
searching now align with the visible label values in the select columns,
providing a more intuitive user experience.
Fixes #36635
## Automation
/ok-to-test tags="@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11234735437>
> Commit: fd6c179ffb2c61d23cb98fd749c8df49cebcfcdd
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11234735437&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding`
> Spec:
> <hr>Tue, 08 Oct 2024 12:48:01 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new test case to verify filtering functionality for the
"role" column in the Table Widget.
- Enhanced filtering mechanism to support multiple label values for
select columns.
- **Bug Fixes**
- Removed outdated search functionality to streamline user experience.
- **Refactor**
- Restructured existing test cases for improved clarity and flow.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-10-09 08:09:12 +00:00
|
|
|
labelValuesForSelectCell[selectOptionKey] = option.label;
|
2024-09-12 07:28:46 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2023-06-21 12:01:06 +00:00
|
|
|
const displayedRow = {
|
|
|
|
|
...row,
|
feat: Allow filtering of table select column label (#36755)
## Description
**Problem**
When filtering a table with a select column type, users expect to filter
by the visible label values shown in each cell. Currently, however,
filtering is applied to the underlying option values rather than the
displayed labels, leading to unexpected filter results for end-users.
**Root Cause**
In a previous update ([PR
#35124](https://github.com/appsmithorg/appsmith/pull/35124)), the table
cell display for select columns was changed to show labels instead of
values. However, the filtering logic was not updated accordingly, so the
table still filtered on the original option values, creating a mismatch
between displayed and filtered content.
**Solution**
This PR modifies the displayedRow property within the table widget to
use the label property instead of the value key when filtering or
searching select column data. This ensures that table filtering and
searching now align with the visible label values in the select columns,
providing a more intuitive user experience.
Fixes #36635
## Automation
/ok-to-test tags="@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11234735437>
> Commit: fd6c179ffb2c61d23cb98fd749c8df49cebcfcdd
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11234735437&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Table, @tag.Select, @tag.Binding`
> Spec:
> <hr>Tue, 08 Oct 2024 12:48:01 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new test case to verify filtering functionality for the
"role" column in the Table Widget.
- Enhanced filtering mechanism to support multiple label values for
select columns.
- **Bug Fixes**
- Removed outdated search functionality to streamline user experience.
- **Refactor**
- Restructured existing test cases for improved clarity and flow.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-10-09 08:09:12 +00:00
|
|
|
...labelValuesForSelectCell,
|
2023-06-21 12:01:06 +00:00
|
|
|
...columnWithDisplayText.reduce((acc, column) => {
|
|
|
|
|
let displayText;
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2023-06-21 12:01:06 +00:00
|
|
|
if (_.isArray(column.displayText)) {
|
|
|
|
|
displayText = column.displayText[row.__originalIndex__];
|
|
|
|
|
} else {
|
|
|
|
|
displayText = column.displayText;
|
|
|
|
|
}
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2023-06-21 12:01:06 +00:00
|
|
|
acc[column.alias] = displayText;
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2023-06-21 12:01:06 +00:00
|
|
|
return acc;
|
|
|
|
|
}, {}),
|
|
|
|
|
};
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-07-14 07:02:35 +00:00
|
|
|
if (searchKey) {
|
2023-06-21 12:01:06 +00:00
|
|
|
isSearchKeyFound = Object.values(_.omit(displayedRow, hiddenColumns))
|
2022-07-14 07:02:35 +00:00
|
|
|
.join(", ")
|
|
|
|
|
.toLowerCase()
|
|
|
|
|
.includes(searchKey);
|
|
|
|
|
}
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-07-14 07:02:35 +00:00
|
|
|
if (!isSearchKeyFound) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
2023-08-22 11:27:02 +00:00
|
|
|
/* when there is no filter defined or when server side filtering is enabled prevent client-side filtering */
|
|
|
|
|
if (
|
|
|
|
|
!props.filters ||
|
|
|
|
|
props.filters.length === 0 ||
|
|
|
|
|
props.enableServerSideFiltering
|
|
|
|
|
) {
|
2022-07-14 07:02:35 +00:00
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const filterOperator =
|
|
|
|
|
props.filters.length >= 2 ? props.filters[1].operator : "OR";
|
|
|
|
|
let isSatisfyingFilters = filterOperator === "AND";
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-07-14 07:02:35 +00:00
|
|
|
for (let i = 0; i < props.filters.length; i++) {
|
|
|
|
|
let filterResult = true;
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-07-14 07:02:35 +00:00
|
|
|
try {
|
|
|
|
|
const conditionFunction =
|
|
|
|
|
ConditionFunctions[props.filters[i].condition];
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-07-14 07:02:35 +00:00
|
|
|
if (conditionFunction) {
|
|
|
|
|
filterResult = conditionFunction(
|
2023-06-21 12:01:06 +00:00
|
|
|
displayedRow[props.filters[i].column],
|
2022-07-14 07:02:35 +00:00
|
|
|
props.filters[i].value,
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
filterResult = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* if one filter condition is not satisfied and filter operator is AND, bailout early */
|
|
|
|
|
if (!filterResult && filterOperator === "AND") {
|
|
|
|
|
isSatisfyingFilters = false;
|
|
|
|
|
break;
|
|
|
|
|
} else if (filterResult && filterOperator === "OR") {
|
|
|
|
|
/* if one filter condition is satisfied and filter operator is OR, bailout early */
|
|
|
|
|
isSatisfyingFilters = true;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
isSatisfyingFilters =
|
|
|
|
|
filterOperator === "AND"
|
|
|
|
|
? isSatisfyingFilters && filterResult
|
|
|
|
|
: isSatisfyingFilters || filterResult;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return isSatisfyingFilters;
|
|
|
|
|
});
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-07-14 07:02:35 +00:00
|
|
|
return finalTableData;
|
|
|
|
|
},
|
|
|
|
|
//
|
2022-11-25 04:39:59 +00:00
|
|
|
getUpdatedRow: (props, moment, _) => {
|
|
|
|
|
let index = -1;
|
|
|
|
|
const parsedUpdatedRowIndex = parseInt(props.updatedRowIndex);
|
|
|
|
|
|
|
|
|
|
if (!_.isNaN(parsedUpdatedRowIndex)) {
|
|
|
|
|
index = parsedUpdatedRowIndex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const rows = props.filteredTableData || props.processedTableData || [];
|
|
|
|
|
const primaryColumns = props.primaryColumns;
|
|
|
|
|
let updatedRow;
|
|
|
|
|
|
|
|
|
|
if (index > -1) {
|
|
|
|
|
const row = rows.find((row) => row.__originalIndex__ === index);
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-11-25 04:39:59 +00:00
|
|
|
updatedRow = { ...row };
|
|
|
|
|
} else {
|
|
|
|
|
/*
|
|
|
|
|
* If updatedRowIndex is not a valid index, updatedRow should
|
|
|
|
|
* have proper row structure with empty string values
|
|
|
|
|
*/
|
|
|
|
|
updatedRow = {};
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-11-25 04:39:59 +00:00
|
|
|
if (rows && rows[0]) {
|
|
|
|
|
Object.keys(rows[0]).forEach((key) => {
|
|
|
|
|
updatedRow[key] = "";
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const nonDataColumnTypes = [
|
|
|
|
|
"editActions",
|
|
|
|
|
"button",
|
|
|
|
|
"iconButton",
|
|
|
|
|
"menuButton",
|
|
|
|
|
];
|
|
|
|
|
const nonDataColumnAliases = primaryColumns
|
|
|
|
|
? Object.values(primaryColumns)
|
|
|
|
|
.filter((column) => nonDataColumnTypes.includes(column.columnType))
|
|
|
|
|
.map((column) => column.alias)
|
|
|
|
|
: [];
|
|
|
|
|
|
|
|
|
|
const keysToBeOmitted = [
|
|
|
|
|
"__originalIndex__",
|
|
|
|
|
"__primaryKey__",
|
|
|
|
|
...nonDataColumnAliases,
|
|
|
|
|
];
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-11-25 04:39:59 +00:00
|
|
|
return _.omit(updatedRow, keysToBeOmitted);
|
|
|
|
|
},
|
|
|
|
|
//
|
2022-07-14 07:02:35 +00:00
|
|
|
getUpdatedRows: (props, moment, _) => {
|
2022-09-21 10:58:11 +00:00
|
|
|
const primaryColumns = props.primaryColumns;
|
|
|
|
|
const nonDataColumnTypes = [
|
|
|
|
|
"editActions",
|
|
|
|
|
"button",
|
|
|
|
|
"iconButton",
|
|
|
|
|
"menuButton",
|
|
|
|
|
];
|
|
|
|
|
const nonDataColumnAliases = primaryColumns
|
|
|
|
|
? Object.values(primaryColumns)
|
|
|
|
|
.filter((column) => nonDataColumnTypes.includes(column.columnType))
|
|
|
|
|
.map((column) => column.alias)
|
|
|
|
|
: [];
|
|
|
|
|
const keysToBeOmitted = [
|
|
|
|
|
"__originalIndex__",
|
|
|
|
|
"__primaryKey__",
|
|
|
|
|
...nonDataColumnAliases,
|
|
|
|
|
];
|
2022-07-14 07:02:35 +00:00
|
|
|
/*
|
|
|
|
|
* case 1. If transientTableData is not empty, return aray of updated row.
|
|
|
|
|
* case 2. If transientTableData is empty, return empty array
|
|
|
|
|
*
|
|
|
|
|
* updated row structure
|
|
|
|
|
* {
|
|
|
|
|
* index: {{original index of the row}},
|
|
|
|
|
* {{primary_column}}: {{primary_column_value}} // only if primary has been set
|
|
|
|
|
* updatedFields: {
|
|
|
|
|
* {{updated_column_1}}: {{updated_column_1_value}}
|
|
|
|
|
* },
|
|
|
|
|
* allFields: {
|
|
|
|
|
* {{updated_column_1}}: {{updated_column_1_value}}
|
|
|
|
|
* {{rest of the fields from the row}}
|
|
|
|
|
* }
|
|
|
|
|
* }
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
/* case 1 */
|
|
|
|
|
if (
|
|
|
|
|
props.transientTableData &&
|
|
|
|
|
!!Object.keys(props.transientTableData).length
|
|
|
|
|
) {
|
|
|
|
|
const updatedRows = [];
|
|
|
|
|
const tableData = props.processedTableData || props.tableData;
|
|
|
|
|
|
|
|
|
|
/* updatedRows is not sorted by index */
|
|
|
|
|
Object.entries(props.transientTableData)
|
|
|
|
|
.filter((entry) => {
|
|
|
|
|
return (
|
|
|
|
|
!_.isNil(entry[0]) && !!entry[0] && _.isFinite(Number(entry[0]))
|
|
|
|
|
);
|
|
|
|
|
})
|
|
|
|
|
.forEach((entry) => {
|
|
|
|
|
const key = entry[0];
|
|
|
|
|
const value = entry[1];
|
|
|
|
|
const row = tableData.find(
|
|
|
|
|
(row) => row.__originalIndex__ === Number(key),
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
updatedRows.push({
|
|
|
|
|
index: Number(key),
|
|
|
|
|
[props.primaryColumnId]: row[props.primaryColumnId],
|
|
|
|
|
updatedFields: value,
|
|
|
|
|
allFields: _.omit(row, keysToBeOmitted) || {},
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return updatedRows;
|
|
|
|
|
} else {
|
|
|
|
|
/* case 2 */
|
|
|
|
|
return [];
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//
|
|
|
|
|
getUpdatedRowIndices: (props, moment, _) => {
|
|
|
|
|
/* should return the keys of the transientTableData */
|
|
|
|
|
if (props.transientTableData) {
|
|
|
|
|
return Object.keys(props.transientTableData).map((index) =>
|
|
|
|
|
Number(index),
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
return [];
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//
|
2022-09-01 10:01:02 +00:00
|
|
|
getPageOffset: (props, moment, _) => {
|
2024-10-25 10:47:54 +00:00
|
|
|
const pageSize = props.pageSize;
|
2022-09-01 10:01:02 +00:00
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
Number.isFinite(props.pageNo) &&
|
|
|
|
|
Number.isFinite(pageSize) &&
|
|
|
|
|
props.pageNo >= 0 &&
|
|
|
|
|
pageSize >= 0
|
|
|
|
|
) {
|
|
|
|
|
/* Math.max fixes the value of (pageNo - 1) to a minimum of 0 as negative values are not valid */
|
|
|
|
|
return Math.max(props.pageNo - 1, 0) * pageSize;
|
|
|
|
|
}
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-09-01 10:01:02 +00:00
|
|
|
return 0;
|
|
|
|
|
},
|
|
|
|
|
//
|
2022-09-13 05:41:59 +00:00
|
|
|
getEditableCellValidity: (props, moment, _) => {
|
2022-11-05 09:54:20 +00:00
|
|
|
if (
|
2023-04-20 13:12:31 +00:00
|
|
|
(!props.editableCell?.column && !props.isAddRowInProgress) ||
|
2022-11-05 09:54:20 +00:00
|
|
|
!props.primaryColumns
|
|
|
|
|
) {
|
|
|
|
|
return {};
|
2022-09-13 05:41:59 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const createRegex = (regex) => {
|
|
|
|
|
if (!regex) {
|
|
|
|
|
return new RegExp("//");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* break up the regexp pattern into 4 parts: given regex, regex prefix , regex pattern, regex flags
|
|
|
|
|
* Example /test/i will be split into ["/test/gi", "/", "test", "gi"]
|
|
|
|
|
*/
|
|
|
|
|
const regexParts = regex.match(/(\/?)(.+)\\1([a-z]*)/i);
|
|
|
|
|
let parsedRegex;
|
|
|
|
|
|
|
|
|
|
if (!regexParts) {
|
|
|
|
|
parsedRegex = new RegExp(regex);
|
|
|
|
|
} else {
|
|
|
|
|
/*
|
|
|
|
|
* if we don't have a regex flags (gmisuy), convert provided string into regexp directly
|
|
|
|
|
*/
|
|
|
|
|
if (
|
|
|
|
|
regexParts[3] &&
|
|
|
|
|
!/^(?!.*?(.).*?\\1)[gmisuy]+$/.test(regexParts[3])
|
|
|
|
|
) {
|
|
|
|
|
parsedRegex = RegExp(regex);
|
|
|
|
|
} else {
|
|
|
|
|
/*
|
|
|
|
|
* if we have a regex flags, use it to form regexp
|
|
|
|
|
*/
|
|
|
|
|
parsedRegex = new RegExp(regexParts[2], regexParts[3]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return parsedRegex;
|
|
|
|
|
};
|
|
|
|
|
|
2022-11-05 09:54:20 +00:00
|
|
|
let editableColumns = [];
|
fix: isRequired validation property for table select column (#36375)
## Description
**Problem**
The select column of the table widget does not have a validation
property within its property pane to allow users add an isRequired
validation to the table select column.
**Solution**
Added a Validation section to the table select column's property pane,
which includes an isRequired toggle. When enabled, this feature will
trigger a visual indication (error border colour) around the select
widget if a required field is left unselected during "Add new row" or
inline editing.
Fixes #30091
## Automation
/ok-to-test tags="@tag.Widget, @tag.Table, @tag.Binding, @tag.Sanity,
@tag.Select"
### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10957896180>
> Commit: d2597e6a26938f2b99f2f997fca7bc110e5c2091
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10957896180&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Widget, @tag.Table, @tag.Binding, @tag.Sanity,
@tag.Select`
> Spec:
> <hr>Fri, 20 Sep 2024 12:23:29 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced end-to-end tests for Select column validation in Table
widgets.
- Enhanced validation logic to support Select column types in the Table
widget.
- Added visual feedback for required Select fields during row addition
and inline editing.
- Improved locator for single-select widget button control to enhance UI
interaction.
- **Bug Fixes**
- Improved error handling and visual representation for invalid editable
Select cells.
- **Documentation**
- Updated validation configuration to include Select column types for
better usability.
- **Refactor**
- Enhanced code clarity for styled components related to Select fields.
- Modified method to improve versatility in handling table interactions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Sai Charan <saicharan.chetpelly@zemosolabs.com>
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
2024-09-23 07:44:46 +00:00
|
|
|
const validatableColumns = ["text", "number", "currency", "date", "select"];
|
2022-11-05 09:54:20 +00:00
|
|
|
|
|
|
|
|
if (props.isAddRowInProgress) {
|
|
|
|
|
Object.values(props.primaryColumns)
|
|
|
|
|
.filter(
|
|
|
|
|
(column) =>
|
|
|
|
|
column.isEditable && validatableColumns.includes(column.columnType),
|
|
|
|
|
)
|
|
|
|
|
.forEach((column) => {
|
|
|
|
|
editableColumns.push([column, props.newRow[column.alias]]);
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
const editedColumn = Object.values(props.primaryColumns).find(
|
2023-04-20 13:12:31 +00:00
|
|
|
(column) => column.alias === props.editableCell?.column,
|
2022-11-05 09:54:20 +00:00
|
|
|
);
|
2022-09-13 05:41:59 +00:00
|
|
|
|
2022-11-05 09:54:20 +00:00
|
|
|
if (validatableColumns.includes(editedColumn.columnType)) {
|
2023-04-20 13:12:31 +00:00
|
|
|
editableColumns.push([editedColumn, props.editableCell?.value]);
|
2022-09-13 05:41:59 +00:00
|
|
|
}
|
2022-11-05 09:54:20 +00:00
|
|
|
}
|
2022-09-13 05:41:59 +00:00
|
|
|
|
2022-11-05 09:54:20 +00:00
|
|
|
const validationMap = {};
|
2022-09-13 05:41:59 +00:00
|
|
|
|
2022-11-05 09:54:20 +00:00
|
|
|
editableColumns.forEach((validationObj) => {
|
|
|
|
|
const editedColumn = validationObj[0];
|
|
|
|
|
const value = validationObj[1];
|
|
|
|
|
|
|
|
|
|
if (editedColumn && editedColumn.validation) {
|
|
|
|
|
const validation = editedColumn.validation;
|
|
|
|
|
|
|
|
|
|
/* General validations */
|
|
|
|
|
if (
|
|
|
|
|
!validation.isColumnEditableCellRequired &&
|
|
|
|
|
(value === "" || _.isNil(value))
|
|
|
|
|
) {
|
|
|
|
|
validationMap[editedColumn.alias] = true;
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-11-05 09:54:20 +00:00
|
|
|
return;
|
|
|
|
|
} else if (
|
|
|
|
|
(!_.isNil(validation.isColumnEditableCellValid) &&
|
|
|
|
|
!validation.isColumnEditableCellValid) ||
|
|
|
|
|
(validation.regex && !createRegex(validation.regex).test(value)) ||
|
|
|
|
|
(validation.isColumnEditableCellRequired &&
|
|
|
|
|
(value === "" || _.isNil(value)))
|
|
|
|
|
) {
|
|
|
|
|
validationMap[editedColumn.alias] = false;
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-11-05 09:54:20 +00:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Column type related validations */
|
|
|
|
|
switch (editedColumn.columnType) {
|
|
|
|
|
case "number":
|
2023-11-06 05:35:26 +00:00
|
|
|
case "currency":
|
2022-11-05 09:54:20 +00:00
|
|
|
if (
|
|
|
|
|
!_.isNil(validation.min) &&
|
|
|
|
|
validation.min !== "" &&
|
|
|
|
|
validation.min > value
|
|
|
|
|
) {
|
|
|
|
|
validationMap[editedColumn.alias] = false;
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-11-05 09:54:20 +00:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
!_.isNil(validation.max) &&
|
|
|
|
|
validation.max !== "" &&
|
|
|
|
|
validation.max < value
|
|
|
|
|
) {
|
|
|
|
|
validationMap[editedColumn.alias] = false;
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-11-05 09:54:20 +00:00
|
|
|
return;
|
|
|
|
|
}
|
2024-09-18 16:35:28 +00:00
|
|
|
|
2022-11-05 09:54:20 +00:00
|
|
|
break;
|
|
|
|
|
}
|
2022-09-13 05:41:59 +00:00
|
|
|
}
|
|
|
|
|
|
2022-11-05 09:54:20 +00:00
|
|
|
validationMap[editedColumn.alias] = true;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return validationMap;
|
2022-09-13 05:41:59 +00:00
|
|
|
},
|
|
|
|
|
//
|
2022-11-25 06:12:23 +00:00
|
|
|
getTableHeaders: (props, moment, _) => {
|
|
|
|
|
const columns = props.primaryColumns
|
|
|
|
|
? Object.values(props.primaryColumns)
|
|
|
|
|
: [];
|
2023-06-01 17:26:05 +00:00
|
|
|
|
2022-11-25 06:12:23 +00:00
|
|
|
return columns
|
|
|
|
|
.sort((a, b) => a.index - b.index)
|
|
|
|
|
.map((column) => ({
|
|
|
|
|
id: column?.id,
|
|
|
|
|
label: column?.label,
|
|
|
|
|
isVisible: column?.isVisible,
|
|
|
|
|
}));
|
|
|
|
|
},
|
|
|
|
|
//
|
2022-07-14 07:02:35 +00:00
|
|
|
};
|