feat: Allow table search to include label and value for tables with select column type

app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2Filter1_1_Spec.ts

@@ -1,3 +1,4 @@
+import { featureFlagIntercept } from "../../../../../support/Objects/FeatureFlags";
 import {
   entityExplorer,
   propPane,
@@ -8,6 +9,56 @@ import {
   draggableWidgets,
   agHelper,
 } from "../../../../../support/Objects/ObjectsCore";
+import EditorNavigation, {
+  EntityType,
+} from "../../../../../support/Pages/EditorNavigation";
+
+const demoTableData = `
+{{
+  [
+    {
+      role: 10,
+      id: 1,
+      name: "Alice Johnson",
+      email: "[email protected]",
+      age: 28,
+      gender: 2
+    },
+    {
+      role: 20,
+      id: 2,
+      name: "Bob Smith",
+      email: "[email protected]",
+      age: 34,
+      gender: 1
+    },
+    {
+      role: 30,
+      id: 3,
+      name: "Charlie Brown",
+      email: "[email protected]",
+      age: 25,
+      gender: 3
+    },
+    {
+      role: 20,
+      id: 4,
+      name: "Diana Prince",
+      email: "[email protected]",
+      age: 30,
+      gender: 2
+    },
+    {
+      role: 10,
+      id: 5,
+      name: "Evan Williams",
+      email: "[email protected]",
+      age: 27,
+      gender: 1
+    }
+  ]
+}}
+  `;
 
 describe(
   "Verify various Table_Filter combinations",
@@ -136,5 +187,46 @@ describe(
       table.WaitForTableEmpty("v2");
       table.RemoveFilterNVerify("2381224", true, true, 0, "v2");
     });
+
+    it("11. Verify table search includes label and value for table with select column type", () => {
+      // This flag is turned on to allow the label show in the table select cell content
+      // when this feature is turned on fully, this flag will be removed
+      featureFlagIntercept({ release_table_cell_label_value_enabled: true });
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Table1", EntityType.Widget);
+      propPane.EnterJSContext("Table data", demoTableData);
+
+      // Edit role column to select type
+      table.ChangeColumnType("role", "Select", "v2");
+      table.EditColumn("role", "v2");
+      agHelper.UpdateCodeInput(
+        locators._controlOption,
+        `
+         {{
+           [
+             {"label": "Software Engineer",
+             "value": 10,},
+             {"label": "Product Manager",
+             "value": 20,},
+             {"label": "UX Designer",
+             "value": 30,}
+           ]
+         }}
+       `,
+      );
+      // Search for a label in the table
+      table.SearchTable("Software Engineer");
+      table.ReadTableRowColumnData(0, 2, "v2").then((afterSearch) => {
+        expect(afterSearch).to.eq("Software Engineer");
+      });
+      table.RemoveSearchTextNVerify("1", "v2");
+
+      // Search for a value in the table
+      table.SearchTable("20");
+      table.ReadTableRowColumnData(0, 2, "v2").then((afterSearch) => {
+        expect(afterSearch).to.eq("Product Manager");
+      });
+      table.RemoveSearchTextNVerify("1", "v2");
+    });
   },
 );

app/client/src/widgets/TableWidgetV2/widget/derived.js

@@ -587,8 +587,36 @@ export default {
       const columnWithDisplayText = Object.values(props.primaryColumns).filter(
         (column) => column.columnType === "url" && column.displayText,
       );
+
+      /*
+       * For select columns with label and values, we need to include the label value
+       * in the search
+       */
+      let labelValueForSelectCell = "";
+      const selectColumnKeys = [];
+      Object.entries(props.primaryColumns).forEach(([id, column]) => {
+        const isColumnSelectColumnType =
+          column?.columnType === "select" && column?.selectOptions?.length;
+        if (isColumnSelectColumnType) {
+          selectColumnKeys.push(id);
+        }
+      });
+      if (selectColumnKeys.length) {
+        selectColumnKeys.forEach((key) => {
+          const value = row[key];
+          const selectOptions =
+            primaryColumns[key].selectOptions[row.__originalIndex__];
+          const option = selectOptions.find((option) => option.value === value);
+
+          if (option) {
+            labelValueForSelectCell = option.label;
+          }
+        });
+      }
+
       const displayedRow = {
         ...row,
+        labelValueForSelectCell,
         ...columnWithDisplayText.reduce((acc, column) => {
           let displayText;
           if (_.isArray(column.displayText)) {