fix: display label instead of value in select column of table widget

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

@@ -0,0 +1,228 @@
+import {
+  entityExplorer,
+  propPane,
+  agHelper,
+  draggableWidgets,
+  table,
+  locators,
+} from "../../../../../../support/Objects/ObjectsCore";
+import {
+  getWidgetSelector,
+  WIDGET,
+} from "../../../../../../locators/WidgetLocators";
+
+const tableData = `[
+    {
+      "id": 2,
+      "name": "saicharan",
+      "gender": "M"
+    },
+    {
+      "id": 3,
+      "name": "Raju",
+      "gender": "M"
+    },
+    {
+      "id": 4,
+      "name": "Rajesh",
+      "gender": "M"
+    },
+    {
+      "id": 5,
+      "name": "Lahari",
+      "gender": "F"
+    },
+    {
+      "id": 6,
+      "name": "Sneha",
+      "gender": "F"
+    },
+    {
+      "id": 7,
+      "name": "Varshini",
+      "gender": "F"
+    },
+    {
+      "id": 8,
+      "name": "Vidmahi",
+      "gender": "F"
+    },
+    {
+      "id": 9,
+      "name": "nikhil",
+      "gender": "M"
+    }
+  ]`;
+const updatedTableData = `[
+    {
+      "id": 2,
+      "name": "saicharan",
+      "gender": "27"
+    },
+    {
+      "id": 3,
+      "name": "Raju",
+      "gender": "M"
+    },
+    {
+      "id": 4,
+      "name": "Rajesh",
+      "gender": "M"
+    },
+    {
+      "id": 5,
+      "name": "Lahari",
+      "gender": "F"
+    },
+    {
+      "id": 6,
+      "name": "Sneha",
+      "gender": "F"
+    },
+    {
+      "id": 7,
+      "name": "Varshini",
+      "gender": "F"
+    },
+    {
+      "id": 8,
+      "name": "Vidmahi",
+      "gender": "F"
+    },
+    {
+      "id": 9,
+      "name": "nikhil",
+      "gender": "M"
+    }
+  ]`;
+
+describe(
+  "Table widget v2: select column displayAs property test",
+  { tags: ["@tag.Widget", "@tag.Table"] },
+  () => {
+    before(() => {
+      entityExplorer.DragDropWidgetNVerify(draggableWidgets.TABLE, 300, 300);
+      propPane.EnterJSContext("Table data", tableData);
+    });
+
+    it("Check if property displayAs, helperText are visible", function () {
+      table.ChangeColumnType("gender", "Select", "v2");
+      table.EditColumn("gender", "v2");
+      agHelper.GetNAssertContains(
+        locators._helperText,
+        "Each computed value here represents default value/display value",
+      );
+      agHelper.AssertElementExist(propPane._propertyControl("displayas"));
+    });
+    it("Check that select options value and label are being present on table when displayAs = value or label", function () {
+      propPane.UpdatePropertyFieldValue(
+        "Options",
+        `[
+            {
+            "label":"female",
+            "value":"F"
+            },
+            {
+            "label":"male",
+            "value":"M"
+            }
+          ]`,
+      );
+      propPane.SelectPropertiesDropDown("Display as", "Value");
+      table.ReadTableRowColumnData(0, 2, "v2").then(($cellData) => {
+        expect($cellData).to.eq("M");
+      });
+      table.ReadTableRowColumnData(4, 2, "v2").then(($cellData) => {
+        expect($cellData).to.eq("F");
+      });
+
+      propPane.SelectPropertiesDropDown("Display as", "Label");
+
+      table.ReadTableRowColumnData(0, 2, "v2").then(($cellData) => {
+        expect($cellData).to.eq("male");
+      });
+      table.ReadTableRowColumnData(4, 2, "v2").then(($cellData) => {
+        expect($cellData).to.eq("female");
+      });
+    });
+    it("Check computed value appearance in table and validation error in select options", function () {
+      let propPaneBack = "[data-testid='t--property-pane-back-btn']";
+
+      agHelper.SelectDropdownList("Column type", "Plain text");
+      propPane.TogglePropertyState("Editable", "On");
+      table.EditTableCell(0, 2, "27");
+      // Click on the save button
+      agHelper.GetNClickByContains(
+        table._tableRowColumnData(0, 3, "v2"),
+        "Save",
+      );
+      cy.get(propPaneBack).click({ force: true });
+      propPane.EnterJSContext("Table data", updatedTableData);
+      table.ChangeColumnTypeWithoutNavigatingBackToPropertyPane(
+        "gender",
+        "Select",
+        "v2",
+      );
+
+      table.ReadTableRowColumnData(0, 2, "v2").then(($cellData) => {
+        expect($cellData).to.eq("");
+      });
+
+      propPane.SelectPropertiesDropDown("Display as", "Value");
+
+      table.ReadTableRowColumnData(0, 2, "v2").then(($cellData) => {
+        expect($cellData).to.eq("27");
+      });
+
+      agHelper
+        .GetElement(`${propPane._propertyControl("options")}`)
+        .then(($elem: any) => {
+          agHelper.TypeIntoTextArea($elem, " ");
+        });
+
+      agHelper.VerifyEvaluatedErrorMessage(
+        "Computed Value at row: [1] is not present in the select options.",
+      );
+    });
+    it("Check that while editing cell's value is changed to label or value of select options based on displayAs property", () => {
+      entityExplorer.DragDropWidgetNVerify(draggableWidgets.TEXT, 300, 600);
+      propPane.TypeTextIntoField(
+        "Text",
+        "{{Table1.primaryColumns.gender.computedValue}}",
+      );
+
+      // Click on edit icon of select cell
+      agHelper.HoverElement(table._tableRow(1, 2, "v2"));
+      agHelper.GetNClick(
+        table._tableRow(1, 2, "v2") + " " + table._editCellIconDiv,
+        0,
+        true,
+      );
+
+      agHelper.ContainsNClick("male", 0);
+      table.ReadTableRowColumnData(1, 2, "v2").then(($cellData) => {
+        expect($cellData).to.eq("M");
+      });
+      agHelper.GetText(getWidgetSelector(WIDGET.TEXT)).then((value) => {
+        expect(value).to.equal(
+          '[  "27",  "M",  "M",  "F",  "F",  "F",  "F",  "M"]',
+        );
+      });
+
+      // open table property pane:
+      agHelper.GetNClick(getWidgetSelector(WIDGET.TABLE), 0, true);
+      propPane.SelectPropertiesDropDown("Display as", "Label");
+
+      agHelper.HoverElement(table._tableRow(1, 2, "v2"));
+      agHelper.GetNClick(
+        table._tableRow(1, 2, "v2") + " " + table._editCellIconDiv,
+        0,
+        true,
+      );
+      agHelper.ContainsNClick("male", 0);
+      table.ReadTableRowColumnData(1, 2, "v2").then(($cellData) => {
+        expect($cellData).to.eq("male");
+      });
+    });
+  },
+);

app/client/cypress/support/Objects/CommonLocators.ts

@@ -330,4 +330,5 @@ export class CommonLocators {
   _menuItem = ".bp3-menu-item";
   _slashCommandHintText = ".slash-command-hint-text";
   _selectionItem = ".rc-select-selection-item";
+  _helperText = ".t--property-control-helperText";
 }

app/client/cypress/support/Pages/AggregateHelper.ts

@@ -609,10 +609,10 @@ export class AggregateHelper {
     this.Sleep(); //for selected value to reflect!
   }
 
-  // public SelectDropdownList(ddName: string, dropdownOption: string) {
-  //   this.GetNClick(this.locator._existingFieldTextByName(ddName));
-  //   cy.get(this.locator._dropdownText).contains(dropdownOption).click();
-  // }
+  public SelectDropdownList(ddName: string, dropdownOption: string) {
+    this.GetNClick(this.locator._existingFieldTextByName(ddName));
+    cy.get(this.locator._dropdownText).contains(dropdownOption).click();
+  }
 
   public SelectFromMultiSelect(
     options: string[],

app/client/cypress/support/Pages/Table.ts

@@ -554,6 +554,16 @@ export class Table {
     if (tableVersion == "v2") this.propPane.NavigateBackToPropertyPane();
   }
 
+  public ChangeColumnTypeWithoutNavigatingBackToPropertyPane(
+    columnName: string,
+    newDataType: columnTypeValues,
+    tableVersion: "v1" | "v2" = "v1",
+  ) {
+    this.EditColumn(columnName, tableVersion);
+    this.propPane.SelectPropertiesDropDown("Column type", newDataType);
+    this.assertHelper.AssertNetworkStatus("@updateLayout");
+  }
+
   public AssertURLColumnNavigation(
     row: number,
     col: number,

app/client/src/constants/PropertyControlConstants.tsx

@@ -55,7 +55,9 @@ export interface PropertyPaneControlConfig {
   // Serves in the tooltip
   helpText?: string;
   //Dynamic text serves below the property pane inputs
-  helperText?: ((props: any) => React.ReactNode) | React.ReactNode;
+  helperText?:
+    | ((props: any, propertyName?: string) => React.ReactNode)
+    | React.ReactNode;
   isJSConvertible?: boolean;
   customJSControl?: string;
   controlType: ControlType;

app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx

@@ -719,7 +719,7 @@ const PropertyControl = memo((props: Props) => {
       : props.label;
 
     const helperText = isFunction(props.helperText)
-      ? props.helperText(widgetProperties)
+      ? props.helperText(widgetProperties, propertyName)
       : props.helperText;
 
     dataTreePath =

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

@@ -183,6 +183,7 @@ export interface SelectCellProperties {
   placeholderText?: string;
   resetFilterTextOnClose?: boolean;
   selectOptions?: DropdownOption[];
+  selectDisplayAs?: string;
 }
 
 export interface ImageCellProperties {
@@ -385,6 +386,7 @@ export interface ColumnProperties
   menuItemsSource?: MenuItemsSource;
   configureMenuItems?: ConfigureMenuItems;
   sourceData?: Array<Record<string, unknown>>;
+  selectDisplayAs?: SelectCellProperties["selectDisplayAs"];
 }
 
 export const ConditionFunctions: {
@@ -571,3 +573,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 SelectOptionAccessor {
+  LABEL = "label",
+  VALUE = "value",
+}

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

@@ -8,6 +8,7 @@ import { CellWrapper } from "../TableStyledWrappers";
 import type { EditableCellActions } from "widgets/TableWidgetV2/constants";
 import { BasicCell } from "./BasicCell";
 import { useCallback } from "react";
+import { SelectOptionAccessor } from "../Constants";
 
 const StyledSelectComponent = styled(SelectComponent)<{
   accentColor: string;
@@ -100,6 +101,7 @@ type SelectProps = BaseCellComponentProps & {
   onFilterChangeActionString?: string;
   disabledEditIconMessage: string;
   isNewRow: boolean;
+  selectDisplayAs: string;
 };
 
 /*
@@ -137,6 +139,7 @@ export const SelectCell = (props: SelectProps) => {
     placeholderText,
     resetFilterTextOnClose,
     rowIndex,
+    selectDisplayAs = SelectOptionAccessor.LABEL,
     serverSideFiltering = false,
     tableWidth,
     textColor,
@@ -149,7 +152,7 @@ export const SelectCell = (props: SelectProps) => {
   const onSelect = useCallback(
     (option: DropdownOption) => {
       onItemSelect(
-        option.value || "",
+        option?.value ?? "",
         rowIndex,
         alias,
         onOptionSelectActionString,
@@ -189,6 +192,18 @@ export const SelectCell = (props: SelectProps) => {
     .map((d: DropdownOption) => d.value)
     .indexOf(value);
 
+  let cellValue: string | number | undefined | null = value;
+
+  if (selectDisplayAs === SelectOptionAccessor.LABEL) {
+    const selectedOption = options.find(
+      (item) => item[SelectOptionAccessor.VALUE] === value,
+    );
+
+    cellValue = selectedOption
+      ? selectedOption[SelectOptionAccessor.LABEL]
+      : "";
+  }
+
   if (isEditable && isCellEditable && isCellEditMode) {
     return (
       <StyledCellWrapper
@@ -227,7 +242,7 @@ export const SelectCell = (props: SelectProps) => {
           resetFilterTextOnClose={resetFilterTextOnClose}
           selectedIndex={selectedIndex}
           serverSideFiltering={serverSideFiltering}
-          value={value}
+          value={cellValue}
           widgetId={""}
           width={width}
         />
@@ -257,7 +272,7 @@ export const SelectCell = (props: SelectProps) => {
         tableWidth={tableWidth}
         textColor={textColor}
         textSize={textSize}
-        value={value}
+        value={cellValue}
         verticalAlignment={verticalAlignment}
       />
     );

app/client/src/widgets/TableWidgetV2/constants.ts

@@ -230,3 +230,5 @@ export const DEFAULT_COLUMN_NAME = "Table Column";
 
 export const ALLOW_TABLE_WIDGET_SERVER_SIDE_FILTERING =
   FEATURE_FLAG["release_table_serverside_filtering_enabled"];
+export const COMPUTED_VALUE_SELECT_HELPER_TEXT =
+  "Each computed value here represents default value/display value";