feat: display label in table select cell

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}
       />
     );