Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity
4e68f16fb1
PromucFlow_constructor/app/client/cypress/locators/commonlocators.json
Jacques Ikot 3b1c14a9f0
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"

### 🔍 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 08:37:00 +01:00

246 lines
15 KiB
JSON
Raw Blame History

{
"editIcon": ".t--widget-propertypane-toggle",
"helpIcon": ".t--widget-help-control",
"editPropCrossButton": ".t--property-pane-close-btn",
"editPropBackButton": "[data-testid='t--property-pane-back-btn']",
"deleteWidgetIcon": ".t--widget-delete-control",
"dropdownSelectButton": ".t--open-dropdown-Select-Action",
"crossbutton": ".t--property-pane-close-btn",
"dropdownAction": ".t--open-dropdown-Select-Action",
"datatypedropdown": ".t--property-control-datatype button",
"Alerttypedropdown": ".t--open-dropdown-Select-type",
"dropdownmenu": ".rc-select-item-option-content",
"containerInnerText": ".t--draggable-containerwidget span.t--widget-name",
"optionchangetextDropdown": " .t--property-control-onoptionchange .CodeMirror textarea",
"optionchangetextDatePicker": " .t--property-control-ondateselected .CodeMirror-code",
"optionchangetextCheckbox": ".t--property-control-oncheckchange .CodeMirror-code",
"optionchangetextSwitch": ".t--property-control-onchange .CodeMirror textarea",
"optionchangetextInput": ".t--property-control-ontextchanged .CodeMirror-code",
"optionchangeRadioselect": ".t--property-control-onselectionchange .CodeMirror textarea",
"optionalignment": ".t--property-control-alignment input",
"optionposition": ".t--property-control-position span:contains('Right')",
"optionpositionL": ".t--property-control-position span:contains('Left')",
"onMarkerclick": ".t--property-control-onmarkerclick .CodeMirror-code",
"success": "div[type='success'] span",
"mapOptionChange": ".t--property-control-onmarkerclick .CodeMirror-code",
"dropdownbuttonclick": ".bp3-button",
"menuSelection": ".bp3-button > .bp3-button-text",
"scrollView": ".t--property-control-scrollcontents input",
"InputforText": ".t--property-control-text .CodeMirror-code",
"TextInside": ".bp3-ui-text span",
"homeIcon": ".t--appsmith-logo",
"typeWidgetName": ".bp3-editable-text-editing>input",
"requiredCheckbox": ".t--property-control-required input[type='checkbox']",
"visibleCheckbox": ".t--property-control-visible input[type='checkbox']",
"allowSelectAllCheckbox": ".t--property-control-allowselectall input[type='checkbox']",
"selectAllOptions": ".t--property-control-selectalloptions input[type='checkbox']",
"disableCheckbox": ".t--property-control-disabled input[type='checkbox']",
"hideToolbarCheckbox": ".t--property-control-hidetoolbar input[type='checkbox']",
"labelTextStyle": ".bp3-ui-text span",
"bodyTextStyle": ".bp3-ui-text span",
"headingTextStyle": ".bp3-ui-text span",
"propertyPaneTitle": ".t--property-pane-title",
"dropDownIcon": ".t--property-control-fontsize input",
"onDateSelectedField": ".t--property-control-ondateselected",
"TableRow": ".t--draggable-tablewidget .tbody",
"TableV2Row": ".t--draggable-tablewidgetv2 .tbody",
"TableV2Head": ".t--draggable-tablewidgetv2 .thead",
"Disablejs": ".t--property-control-disabled",
"spellCheck": ".t--property-control-spellcheck",
"requiredjs": ".t--property-control-required",
"allowScroll": ".t--property-control-allowscroll input",
"tableInner": ".t--draggable-tablewidget span.t--widget-name",
"tableV2Inner": ".t--draggable-tablewidgetv2 span.t--widget-name",
"buttonInner": ".t--draggable-buttonwidget span.t--widget-name",
"inputWidgetInner": ".t--draggable-inputwidgetv2 span.t--widget-name",
"pdfSupport": ".t--property-control-pdfexport input",
"ExcelSupport": ".t--property-control-excelexport input",
"dropDownBtn": "input",
"disabledField": " .bp3-disabled",
"disabledBtn": " button[disabled='disabled']",
"rteToolbar": " .tox-toolbar__primary",
"inputField": " .bp3-input",
"csvSupport": ".t--property-control-csvexport input",
"backToEditor": ".t--back-to-editor",
"enableSearchLocCheckbox": ".t--property-control-enablesearchlocation input",
"enablePickLocCheckbox": ".t--property-control-enablepicklocation input",
"enableCreateMarkerCheckbox": ".t--property-control-createnewmarker input",
"widgetNameTag": "span.t--widget-name",
"serverSidePaginationCheckbox": ".t--property-control-serversidepagination input",
"rightArrowBtn": "span[icon='chevron-right']",
"toastMsg": "div.Toastify__toast",
"callApi": ".t--property-control-onpagechange .t--open-dropdown-Select-Action",
"singleSelectMenuItem": ".bp3-menu-item.single-select div",
"singleSelectWidgetMenuItem": ".menu-item-link",
"singleSelectActiveMenuItem": ".menu-item-active div",
"selectInputSearch": ".select-popover-wrapper .bp3-input",
"multiSelectMenuItem": "rc-select-item.rc-select-item-option div",
"selectMenuItem": ".bp3-menu li>a>div",
"evaluatedTypeTitle": ".t--CodeEditor-evaluatedValue > p:first-of-type",
"evaluatedType": ".t--CodeEditor-evaluatedValue > div:first-of-type pre",
"evaluatedCurrentValue": "div:last-of-type .t--CodeEditor-evaluatedValue > div:last-of-type pre",
"entityExplorersearch": "#entity-explorer-search",
"saveStatusContainer": ".t--save-status-container",
"statusSaving": ".t--save-status-is-saving",
"saveStatusError": ".t--save-status-error",
"selectWidgetVirtualList": ".menu-virtual-list div",
"tableNextPage": ".t--table-widget-next-page",
"tablePrevPage": ".t--table-widget-prev-page",
"toastmsg": ".Toastify__toast-body span",
"copyWidget": "[data-testid='t--copy-widget']",
"deleteWidget": "[data-testid='t--delete-widget']",
"dropTarget": ".t--drop-target",
"toastAction": "div.Toastify__toast",
"toastBody": ".Toastify__toast-body",
"videoInner": ".t--draggable-videowidget span.t--widget-name",
"audioInner": ".t--draggable-audiowidget span.t--widget-name",
"onPlay": ".t--property-control-onplay .t--open-dropdown-Select-Action",
"chooseAction": ".single-select",
"chooseMsgType": ".t--open-dropdown-Select-type",
"onPause": ".t--property-control-onpause .t--open-dropdown-Select-Action",
"chooseWidget": ".t--open-dropdown-Select-widget",
"onClick": ".t--property-control-onclick .t--open-dropdown-Select-Action",
"changeZoomlevel": ".t--property-control-maxzoomlevel input",
"selectedZoomlevel": ".t--property-control-maxzoomlevel .rc-select-selection-item span",
"imgWidget": "div[data-testid='styledImage']",
"editColTitle": ".t--property-pane-title",
"editColText": ".t--property-pane-title span",
"changeColType": ".t--property-control-columntype input",
"changeSortBy": ".t--property-control-sortby input",
"selectedColType": ".t--property-control-columntype button span",
"collapsesection": ".t--property-pane-section-collapse-general .bp3-icon",
"selectTab": ".t--tab-Tab",
"layoutControls": ".t--layout-control-wrapper > .ads-v2-segmented-control div",
"layoutPopover": ".bp3-popover.bp3-minimal.layout-control",
"canvas": ".t--canvas-artboard",
"deflautSelectedRow": ".t--property-control-defaultselectedrow textarea",
"defaultSearchText": ".t--property-control-defaultsearchtext textarea",
"entityItem": ".t--entity-item",
"entityCollapseToggle": ".t--entity-collapse-toggle",
"entityContextMenu": ".t--context-menu",
"entityContextMenuContent": ".t--entity-context-menu",
"filePickerButton": ".t--widget-filepickerwidget",
"filePickerInput": ".uppy-Dashboard-input",
"filePickerUploadButton": ".uppy-StatusBar-actionBtn--upload",
"filePickerRemoveButton": ".uppy-Dashboard-Item-action--remove",
"AddMoreFiles": ".uppy-DashboardContent-addMoreCaption",
"filePickerOnFilesSelected": ".t--property-control-onfilesselected",
"dataType": ".t--property-control-datatype input",
"recaptchaVersion": ".t--property-control-googlerecaptchaversion input",
"recaptchaVersionText": ".t--property-control-googlerecaptchaversion span.rc-select-selection-item span",
"filePickerDataFormat": ".t--property-control-dataformat .rc-select-selection-item",
"helperText": ".t--property-control-helperText",
"jsonFormFieldType": ".t--property-control-fieldtype input",
"jsonFormAddNewCustomFieldBtn": ".t--property-control-fieldconfiguration .t--add-column-btn",
"evaluateMsg": ".t--evaluatedPopup-error",
"globalSearchModal": "[data-testid='t--global-search-modal']",
"globalSearchInput": ".t--global-search-input",
"globalSearchTrigger": ".t--global-search-modal-trigger",
"globalSearchClearInput": ".t--global-clear-input",
"containerWidget": ".t--widget-containerwidget",
"paginationButton": ".rc-pagination-item",
"switchWidgetActive": ".t--switch-widget-active",
"switchWidgetInActive": ".t--switch-widget-inactive",
"switchWidgetLoading": ".t--switch-widget-loading",
"tablePageSizeChangeAction": ".t--property-control-onpagesizechange .t--open-dropdown-Select-Action",
"listWidgetNameTag": ".bp3-editable-text-content",
"currencyType": ".t--property-control-currency input",
"decimalType": ".t--property-control-decimals input",
"allowCurrencyChange": ".t--property-control-allowcurrencychange input[type='checkbox']",
"inputCurrencyChangeType": ".t--input-currency-change",
"inputCountryCodeChangeType": ".t--input-country-code-change",
"viewerPage": "[data-testid='t--app-viewer-page']",
"dropDownOptSelected": "//span[@type='p1']",
"generalChevran": ".t--property-pane-section-collapse-general .t--chevron-icon",
"generalSection": ".t--property-pane-section-general",
"selectedIcon": ".t--property-control-icon .icon-select-container .bp3-button .bp3-button-text",
"isSortable": ".t--property-control-columnsorting input[type='checkbox']",
"isSortable_tablev1": ".t--property-control-sortable input[type='checkbox']",
"labelSection": ".cm-keyword",
"lintWarning": ".CodeMirror-lint-mark-warning",
"lintErrorMsg": ".CodeMirror-lint-message-error",
"lintWarningMsg": ".CodeMirror-lint-message-warning",
"labelSectionTxt": ".CodeMirror-code .cm-variable",
"lintError": ".CodeMirror-lint-mark-error",
"debugger": ".t--debugger-count",
"errorTab": "[data-testid=t--tab-ERROR]",
"debugErrorMsg": "[data-testid=t--debugger-log-message]",
"tableButtonVariant": ".t--property-control-buttonvariant",
"debuggerLabel": "span.debugger-label",
"debuggerToggle": "[data-testid=t--debugger-toggle]",
"debuggerDownStreamErrMsg": "[data-testid=t--debugger-downStreamErrorMsg]",
"debuggerDownStreamErrCode": "[data-testid=t--debugger-downStreamErrorCode]",
"debuggerDescription": ".debugger-description",
"cyclicDependencyError": "//div[@class='Toastify']//span[contains(text(),'Cyclic dependency found while evaluating')]",
"openDocumentationfromErrorTab": "//span[text()='Open documentation']",
"selectInner": ".t--draggable-selectwidget span.t--widget-name, Select1",
"toastifyError": "//div[@class='Toastify']//span]",
"selectButton": ".select-button",
"selectwidget": ".t--draggable-selectwidget",
"textWidget": ".t--draggable-textwidget",
"filepickerv2": ".t--draggable-filepickerwidgetv2",
"dashboardItemName": ".uppy-Dashboard-Item-name",
"mapChartShowLabels": ".t--property-control-showlabels input",
"widgetSection": ".t--entity.widgets > .t--entity-item > span.t--entity-collapse-toggle",
"changeThemeBtn": ".t--change-theme-btn",
"editThemeBtn": ".t--edit-theme-btn",
"themeCard": ".t--theme-card",
"saveThemeBtn": ".t--save-theme-btn",
"selectThemeBackBtn": ".t--theme-select-back-btn",
"themeAppBorderRadiusBtn": ".t--theme-appBorderRadius",
"themeAppBoxShadowBtn": ".t--theme-appBoxShadow",
"lazyCodeEditorFallback": ".t--lazyCodeEditor-fallback",
"lazyCodeEditorRendered": ".t--lazyCodeEditor-editor",
"textWidgetContainer": ".t--text-widget-container",
"propertyStyle": "button[role='tab'] span:contains('Style')",
"propertyContent": "button[role='tab'] span:contains('Content')",
"cancelActionExecution": ".t--cancel-action-button",
"menuButtonMenuItemsSource": ".t--property-control-menuitemssource",
"menuButtonSourceData": ".t--property-control-sourcedata",
"menuButtonConfigureArrayItems": ".t--property-control-configuremenuitems button",
"codeScannerScannerLayout": ".t--property-control-scannerlayout",
"codeScannerVideo": ".code-scanner-camera-container video",
"codeScannerDisabledSVGIcon": ".code-scanner-camera-container div[disabled] svg",
"layoutHeightDropdown": ".t--property-control-height .remixicon-icon",
"fixed": "Fixed",
"autoHeight": "Auto Height",
"autoHeightWithLimits": "Auto Height with limits",
"heightDropdown": "[data-guided-tour-iid='dynamicHeight'] input",
"minHeight": "minheight\\(inrows\\)",
"maxHeight": "maxheight\\(inrows\\)",
"overlayMin": "[data-testid='t--auto-height-overlay-min']",
"overlayMax": "[data-testid='t--auto-height-overlay-max']",
"addOption": ".t--property-control-options-add",
"showTabsControl": ".t--property-control-showtabs input",
"checkboxIndicator": ".t--draggable-checkboxwidget input",
"generalSectionHeight": ".t--property-pane-section-general .t--property-control-label:contains('Height')",
"listPaginateNextButton": ".t--widget-listwidgetv2 .rc-pagination-next .rc-pagination-item-link",
"listPaginateActivePage": ".t--widget-listwidgetv2 .rc-pagination-item-active",
"listPaginatePrevButton": ".t--widget-listwidgetv2 .rc-pagination-prev .rc-pagination-item-link",
"listPaginateNextButtonDisabled": ".t--widget-listwidgetv2 .rc-pagination-disabled .rc-pagination-item-link",
"PropertyPaneSearchInput": ".t--property-pane-search-input-wrapper input",
"BorderRadius0px": ".t--property-control-borderradius .ads-v2-segmented-control-value-0px",
"EnableFormatting": ".t--property-control-enableformatting input[type='checkbox']",
"autoConvert": "#t--layout-conversion-cta",
"convert": "button:contains('Convert layout')",
"refreshApp": "button:contains('Refresh the app')",
"autoConversionDialog": "span:contains('Use snapshot')",
"useSnapshot": "button:contains('Use snapshot')",
"useSnapshotBanner": "span:contains('Use snapshot')",
"discardSnapshot": "span:contains('Discard snapshot')",
"desktopOption": "//span[@data-value = 'DESKTOP']",
"mobileOption": "//span[@data-value = 'MOBILE']",
"convertanyways": "button:contains('Convert anyways')",
"discard": "button:contains('Discard')",
"heightProperty": ".rc-select-single input",
"heightPropertyOption": ".rc-select-item-option-content span",
"filePickerMaxNoOfFiles": ".t--property-control-maxno\\.offiles .CodeMirror-code",
"allowclearingValueInput": ".t--property-control-allowclearingvalue input[type='checkbox']",
"allowcountrycodechangeInput": ".t--property-control-allowcountrycodechange input[type='checkbox']",
"allowsearchingInput": ".t--property-control-allowsearching input",
"allowsearchingInputTypeCheckbox": ".t--property-control-allowsearching input[type='checkbox']",
"clientSideSearch": ".t--property-control-clientsidesearch input[type='checkbox']",
"enableClientSideSearch": ".t--property-control-enableclientsidesearch input[type='checkbox']",
"fixedFooterInput": ".t--property-control-fixedfooter input"
}
Reference in New Issue View Git Blame Copy Permalink