feat: display label in table select cell (appsmithorg#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 appsmithorg#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: 78b268d
> <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 -->

app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select1_spec.ts

@@ -5,6 +5,7 @@ import {
 
 const commonlocators = require("../../../../../../locators/commonlocators.json");
 import * as _ from "../../../../../../support/Objects/ObjectsCore";
+import { featureFlagIntercept } from "../../../../../../support/Objects/FeatureFlags";
 
 describe(
   "Table widget - Select column type functionality",
@@ -153,23 +154,43 @@ describe(
     });
 
     it("5. should check that on option select is working", () => {
+      featureFlagIntercept({ release_table_cell_label_value_enabled: true });
       cy.openPropertyPane("tablewidgetv2");
       cy.editColumn("step");
       cy.get(".t--property-control-onoptionchange .t--js-toggle").click();
       cy.updateCodeInput(
         ".t--property-control-onoptionchange",
         `
       {{showAlert(currentRow.step)}}
+    `,
+      );
+      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("#3").click();
+      cy.get(".menu-item-link").contains("#3label").click();
 
-      _.agHelper.ValidateToastMessage("#3");
+      _.agHelper.ValidateToastMessage("#3value");
 
       cy.get(".menu-virtual-list").should("not.exist");
       cy.readTableV2data(0, 0).then((val) => {
-        expect(val).to.equal("#3");
+        expect(val).to.equal("#3label");
       });
       cy.discardTableRow(4, 0);
     });

app/client/src/ce/entities/FeatureFlag.ts

@@ -34,6 +34,8 @@ export const FEATURE_FLAG = {
     "rollout_remove_feature_walkthrough_enabled",
   release_drag_drop_building_blocks_enabled:
     "release_drag_drop_building_blocks_enabled",
+  release_table_cell_label_value_enabled:
+    "release_table_cell_label_value_enabled",
   rollout_js_enabled_one_click_binding_enabled:
     "rollout_js_enabled_one_click_binding_enabled",
   rollout_side_by_side_enabled: "rollout_side_by_side_enabled",
@@ -63,6 +65,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   license_gac_enabled: false,
   release_anvil_enabled: false,
   release_drag_drop_building_blocks_enabled: false,
+  release_table_cell_label_value_enabled: false,
   license_git_branch_protection_enabled: false,
   release_git_autocommit_feature_enabled: false,
   license_git_continuous_delivery_enabled: false,

app/client/src/widgets/TableWidgetV2/component/Constants.ts

@@ -571,3 +571,8 @@ export const noOfItemsToDisplay = 4;
 
 // 12px for the (noOfItemsToDisplay+ 1) item to let the user know there are more items to scroll
 export const extraSpace = 12;
+
+export enum TableSelectColumnOptionKeys {
+  LABEL = "label",
+  VALUE = "value",
+}

app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx

@@ -1,13 +1,18 @@
-import React from "react";
-import SelectComponent from "widgets/SelectWidget/component";
+import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
+import React, { useCallback, useMemo } from "react";
 import styled from "styled-components";
+import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
+import SelectComponent from "widgets/SelectWidget/component";
 import type { DropdownOption } from "widgets/SelectWidget/constants";
+import type { EditableCellActions } from "widgets/TableWidgetV2/constants";
 import type { BaseCellComponentProps } from "../Constants";
-import { EDITABLE_CELL_PADDING_OFFSET, TABLE_SIZES } from "../Constants";
+import {
+  EDITABLE_CELL_PADDING_OFFSET,
+  TABLE_SIZES,
+  TableSelectColumnOptionKeys,
+} from "../Constants";
 import { CellWrapper } from "../TableStyledWrappers";
-import type { EditableCellActions } from "widgets/TableWidgetV2/constants";
 import { BasicCell } from "./BasicCell";
-import { useCallback } from "react";
 
 const StyledSelectComponent = styled(SelectComponent)<{
   accentColor: string;
@@ -189,6 +194,23 @@ export const SelectCell = (props: SelectProps) => {
     .map((d: DropdownOption) => d.value)
     .indexOf(value);
 
+  const releaseTableSelectCellLabelValue = useFeatureFlag(
+    FEATURE_FLAG.release_table_cell_label_value_enabled,
+  );
+
+  const cellLabelValue = useMemo(() => {
+    if (releaseTableSelectCellLabelValue) {
+      const selectedOption = options.find(
+        (option) => option[TableSelectColumnOptionKeys.VALUE] === value,
+      );
+      return selectedOption
+        ? selectedOption[TableSelectColumnOptionKeys.LABEL]
+        : "";
+    } else {
+      return value;
+    }
+  }, [releaseTableSelectCellLabelValue, value, options]);
+
   if (isEditable && isCellEditable && isCellEditMode) {
     return (
       <StyledCellWrapper
@@ -227,7 +249,7 @@ export const SelectCell = (props: SelectProps) => {
           resetFilterTextOnClose={resetFilterTextOnClose}
           selectedIndex={selectedIndex}
           serverSideFiltering={serverSideFiltering}
-          value={value}
+          value={cellLabelValue}
           widgetId={""}
           width={width}
         />
@@ -257,7 +279,7 @@ export const SelectCell = (props: SelectProps) => {
         tableWidth={tableWidth}
         textColor={textColor}
         textSize={textSize}
-        value={value}
+        value={cellLabelValue}
         verticalAlignment={verticalAlignment}
       />
     );