PromucFlow_constructor/app/client/cypress/e2e/Regression/ClientSide/Widgets
Jacques Ikot 2cded02983
feat: display label in table select cell (#35124)
## Description
**Issue**
In the table widget, the select column currently displays the value from
the dropdown when a user makes a selection, rather than the label. This
behaviour is inconsistent with the standalone select widget, which
correctly renders the label upon selection.

**Fix**
This PR addresses the inconsistency by modifying the table widget's
select column to display the label of the selected item, while
maintaining the table cell value and ensuring alignment with the
behaviour of the standalone select widget.

**Tested Cases**
Manual Test Cases for Table Select Widget Improvement

1. Default Value Display
**Objective:** Ensure that a new table displays the correct default
label key from the selectOptions in the cell.
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., gender) to select type.
- Verify that the table cell displays the value from the label key of
the `selectOptions` by default.

2. Binding Check for Selected Row
**Objective:** Ensure that the table binding for the selected row
reflects the correct value key from the selectOptions.
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., gender) to select type.
- Select a row and verify that `Table1.selectedRow.gender` matches the
value key from the `selectOptions`.

3. Updating Table Cell Content
**Objective:** Verify that updating the table cell content via the
dropdown updates the cell with the correct label key property.
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., gender) to select type.
- Change the content of the table cell using the dropdown.
- Confirm that the cell content updates accordingly with the value key
property.

4. Add New Row Functionality
**Objective:** Ensure that adding a new row works as expected with the
enhanced functionality.
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., gender) to select type.
- Add a new row to the table.
- Verify that the new row uses the label key property from the
`selectOptions` in the table display.

5. Deployed Mode Verification
**Objective:** Verify that the display functionality works correctly in
deployed mode.
**Steps:**
- Drop a new table widget.
- Add sample data to the table.
- Set a column (e.g., gender) to select type.
- Change the displayAs property to both value and label.
- Deploy the table.
- Verify that the table displays correctly in both value and label modes
in the deployed environment.


Fixes #26188

## 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/10080592979>
> Commit: 78b268d2b566aa07ef23fec567ce05e8c5a6add4
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10080592979&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Sanity`
> Spec:
> <hr>Wed, 24 Jul 2024 17:17:06 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**
- Improved display of selected options in table widgets by showing the
corresponding label instead of the raw value.
- Introduced a feature flag to toggle the table cell label value
functionality.

- **Bug Fixes**
- Enhanced test cases to ensure accurate validation of select options
behavior within the table widget.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-07-25 12:39:24 +01:00
..
Audio feat: enabled editor pane sidebar (#29882) 2024-01-12 20:13:58 +05:30
Button test:replace assertPageSave with AssertAutoSave (#33972) 2024-06-06 13:11:03 +05:30
Camera chore: Make pages section into a dropdown (#32486) 2024-04-18 16:04:38 +05:30
Chart chore: Removing widgets related feature flags for the features that are GA (#33229) 2024-05-07 15:26:48 +05:30
Checkbox test: replace togglebarDisable with CheckUncheck (#34069) 2024-06-10 19:55:17 +05:30
CodeScanner test: replace togglebarDisable with CheckUncheck (#34069) 2024-06-10 19:55:17 +05:30
CurrencyInput test: removed toggleBar command and replaced with ts helper (#33835) 2024-06-06 15:25:08 +05:30
Custom fix: Disable custom widgets for airgapped environments (#34540) 2024-06-27 13:47:32 +05:30
Datepicker test: removed toggleBar command and replaced with ts helper (#33835) 2024-06-06 15:25:08 +05:30
Divider test: Cypress - added @tag.Checkbox, @tag.Scanner, @tag.Datepicker, @tag.DocumentViewer, @tag.CurrencyInput, @tag.Dropdown (#29687) 2023-12-18 16:59:48 +05:30
DocumentViewer test: Cypress - added @tag.Checkbox, @tag.Scanner, @tag.Datepicker, @tag.DocumentViewer, @tag.CurrencyInput, @tag.Dropdown (#29687) 2023-12-18 16:59:48 +05:30
Dropdown test: replace togglebarDisable with CheckUncheck (#34069) 2024-06-10 19:55:17 +05:30
Filepicker fix: file picker widgets removing files causing abnormal content (#31646) 2024-03-11 18:13:12 +05:30
Form test: replace togglebarDisable with CheckUncheck (#34069) 2024-06-10 19:55:17 +05:30
Iframe feat: New IDE Top Navbar (#31594) 2024-03-12 14:02:58 +05:30
Image test: replace togglebarDisable with CheckUncheck (#34069) 2024-06-10 19:55:17 +05:30
Input test: Updated file name for remove duplicate (#34821) 2024-07-12 10:07:17 +05:30
JSONForm test: replace togglebarDisable with CheckUncheck (#34069) 2024-06-10 19:55:17 +05:30
List feat: enabled editor pane sidebar (#29882) 2024-01-12 20:13:58 +05:30
ListV2 test: Remove unused data in DSL fixtures (#34405) 2024-06-24 17:17:43 +05:30
Modal feat: added modal name, lint warning for string, action selector modal (#32893) 2024-05-02 17:48:53 +05:30
Multiselect test: Updated file name for remove duplicate (#34821) 2024-07-12 10:07:17 +05:30
Others test: replace togglebarDisable with CheckUncheck (#34069) 2024-06-10 19:55:17 +05:30
PhoneInput feat: enabled editor pane sidebar (#29882) 2024-01-12 20:13:58 +05:30
Radio test: Cypress - remove width tests (#30577) 2024-01-24 13:05:49 +05:30
Rating test: Cypress - added tags - @tag.Radio, @tag.Rating, @tag.TextEditor, @tag.PhoneInput, @tag.IconButton, @tag.Maps, @tag.MenuButton, @tag.Progress, @tag.Statbox (#29693) 2023-12-18 17:25:28 +05:30
RTE fix: replaced with different solution (#32820) 2024-04-19 17:20:12 +05:30
Select feat: Refactor SelectWidget sourceData handling (#34619) 2024-07-03 13:31:35 +05:30
Sliders fix: number slider + category slider color spec fails (#32935) 2024-04-29 11:31:46 +05:30
Statbox feat: enabled editor pane sidebar (#29882) 2024-01-12 20:13:58 +05:30
Switch fix: Wrong evaluated value after binding checkbox group widget with… (#33906) 2024-07-17 10:54:03 +05:30
Tab test: replace togglebarDisable with CheckUncheck (#34069) 2024-06-10 19:55:17 +05:30
TableV1 test: replace togglebarDisable with CheckUncheck (#34069) 2024-06-10 19:55:17 +05:30
TableV2 feat: display label in table select cell (#35124) 2024-07-25 12:39:24 +01:00
Text feat: enabled editor pane sidebar (#29882) 2024-01-12 20:13:58 +05:30
TreeSelect test: replace togglebarDisable with CheckUncheck (#34069) 2024-06-10 19:55:17 +05:30
Video feat: enabled editor pane sidebar (#29882) 2024-01-12 20:13:58 +05:30
Container_spec.js test: Cypress - @tag.Video, @tag.Container, @tag.Switch, @tag.Slider, @tag.Tab, @tag.Table, @tag.Select (#29698) 2023-12-18 17:05:27 +05:30
ContainerTest2_spec.ts chore: Block Selections when Canvas is in Side by Side mode (#31587) 2024-03-13 11:53:49 +05:30
deprecatedWidgets_spec.js test: Cypress - @tag.Video, @tag.Container, @tag.Switch, @tag.Slider, @tag.Tab, @tag.Table, @tag.Select (#29698) 2023-12-18 17:05:27 +05:30
Disabled_Widgets_drag_validation_spec.js test: Cypress - @tag.Video, @tag.Container, @tag.Switch, @tag.Slider, @tag.Tab, @tag.Table, @tag.Select (#29698) 2023-12-18 17:05:27 +05:30
Migration_Spec.js test: updated tests with aghelper table methods (#33737) 2024-05-31 14:01:06 +05:30
Tab_reset_spec.js test: Cypress - @tag.Video, @tag.Container, @tag.Switch, @tag.Slider, @tag.Tab, @tag.Table, @tag.Select (#29698) 2023-12-18 17:05:27 +05:30
WidgetCanvas_spec.js test: Cypress - @tag.Video, @tag.Container, @tag.Switch, @tag.Slider, @tag.Tab, @tag.Table, @tag.Select (#29698) 2023-12-18 17:05:27 +05:30
WidgetCopyPaste_spec.js chore: autoFocus widget search input on load (#32002) 2024-04-03 13:21:53 +05:30
WidgetGrouping_spec.js test: Cypress - @tag.Video, @tag.Container, @tag.Switch, @tag.Slider, @tag.Tab, @tag.Table, @tag.Select (#29698) 2023-12-18 17:05:27 +05:30
Widgets_Labels_spec.js feat: Homepage experience v2 changes (#29282) 2024-01-25 19:11:48 +05:30
WidgetSelection_spec.js feat: enabled editor pane sidebar (#29882) 2024-01-12 20:13:58 +05:30