From b7853a99b252d437f4ebfdc768392d0a3e82710b Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Tue, 9 Jul 2024 09:00:00 +0100
Subject: [PATCH] feat: change value to label in onItemSelect inside SelectCell
 of table widget (#34743)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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, ensuring
alignment with the behaviour of the standalone select widget.


Fixes #26188

## Automation

/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Widget, @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/9843945454>
> Commit: 330d0d3f82ea7a8769c350f7caa0714959838f12
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9843945454&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Widget, @tag.Sanity`
> Spec:
> <hr>Mon, 08 Jul 2024 18:21:02 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

- **Bug Fixes**
- Updated the `SelectCell` component to use the `option.label` instead
of `option.value` for item selection.

- **Tests**
- Revised test descriptions and assertions for select options in Table
Widget to reflect the new functionality of using labels as values in
select cells.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../TableV2/columnTypes/Select1_spec.ts       | 40 +++++++++++++++++--
 .../component/cellComponents/SelectCell.tsx   |  2 +-
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select1_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select1_spec.ts
index ba126c6e70..000f373fe1 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select1_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select1_spec.ts
@@ -174,7 +174,39 @@ describe(
       cy.discardTableRow(4, 0);
     });
 
-    it("6. should check that currentRow is accessible in the select options", () => {
+    it("6. should check that on option select uses label as value in select cell (#34743)", () => {
+      cy.updateCodeInput(
+        ".t--property-control-options",
+        `
+      [
+        {
+          "label": "#1label",
+          "value": "#1value"
+        },
+        {
+          "label": "#2label",
+          "value": "#2value"
+        },
+        {
+          "label": "#3label",
+          "value": "#3value"
+        }
+      ]
+    `,
+      );
+      cy.editTableSelectCell(0, 0);
+      cy.get(".menu-item-link").contains("#3label").click();
+
+      _.agHelper.ValidateToastMessage("#3label");
+
+      cy.get(".menu-virtual-list").should("not.exist");
+      cy.readTableV2data(0, 0).then((val) => {
+        expect(val).to.equal("#3label");
+      });
+      cy.discardTableRow(4, 0);
+    });
+
+    it("7. should check that currentRow is accessible in the select options", () => {
       cy.updateCodeInput(
         ".t--property-control-options",
         `
@@ -199,7 +231,7 @@ describe(
       cy.get(".menu-item-text").contains("#1").should("not.exist");
     });
 
-    it("7. should check that 'same select option in new row' property is working", () => {
+    it("8. should check that 'same select option in new row' property is working", () => {
       _.propPane.NavigateBackToPropertyPane();
 
       const checkSameOptionsInNewRowWhileEditing = () => {
@@ -265,7 +297,7 @@ describe(
       checkSameOptionsWhileAddingNewRow();
     });
 
-    it("8. should check that 'new row select options' is working", () => {
+    it("9. should check that 'new row select options' is working", () => {
       const checkNewRowOptions = () => {
         // New row select options should be visible when "Same options in new row" is turned off
         _.propPane.TogglePropertyState("Same options in new row", "Off");
@@ -330,7 +362,7 @@ describe(
       checkNoOptionState();
     });
 
-    it("9. should check that server side filering is working", () => {
+    it("10. should check that server side filering is working", () => {
       _.dataSources.CreateDataSource("Postgres");
       _.dataSources.CreateQueryAfterDSSaved(
         "SELECT * FROM public.astronauts {{this.params.filterText ? `WHERE name LIKE '%${this.params.filterText}%'` : ''}} LIMIT 10;",
diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx
index 89c9a1fe15..a0648a18a7 100644
--- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx
+++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx
@@ -149,7 +149,7 @@ export const SelectCell = (props: SelectProps) => {
   const onSelect = useCallback(
     (option: DropdownOption) => {
       onItemSelect(
-        option.value || "",
+        option.label || "",
         rowIndex,
         alias,
         onOptionSelectActionString,