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,5 @@
+import { demoTableDataForSelect } from "../../../../../fixtures/Table/DemoTableData";
+import { featureFlagIntercept } from "../../../../../support/Objects/FeatureFlags";
 import {
   entityExplorer,
   propPane,
@@ -8,6 +10,9 @@ import {
   draggableWidgets,
   agHelper,
 } from "../../../../../support/Objects/ObjectsCore";
+import EditorNavigation, {
+  EntityType,
+} from "../../../../../support/Pages/EditorNavigation";
 
 describe(
   "Verify various Table_Filter combinations",
@@ -136,5 +141,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", demoTableDataForSelect);
+
+      // 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/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select1_spec.ts

@@ -37,10 +37,10 @@ describe(
       });
     });
 
-    it("3. should check that options given in the property pane is appearing on the table", () => {
-      cy.get(".t--property-control-options").should("exist");
+    it("3. should check that JSON options given in the property pane is appearing on the table", () => {
+      cy.get(_.locators._controlOption).should("exist");
       cy.updateCodeInput(
-        ".t--property-control-options",
+        _.locators._controlOption,
         `
       [
         {
@@ -80,9 +80,52 @@ describe(
       cy.get(".menu-item-active.has-focus").should("contain", "#1");
     });
 
-    it("4. should check that placeholder property is working", () => {
+    it("4. should check that javascript options given in the property pane is appearing on the table", () => {
+      cy.get(_.locators._controlOption).should("exist");
       cy.updateCodeInput(
-        ".t--property-control-options",
+        _.locators._controlOption,
+        `
+      {{[
+        {
+          "label": "#1",
+          "value": "#1"
+        },
+        {
+          "label": "#2",
+          "value": "#2"
+        },
+        {
+          "label": "#3",
+          "value": "#3"
+        }
+      ]}}
+    `,
+      );
+      cy.editTableSelectCell(0, 0);
+
+      [
+        {
+          label: "#1",
+          value: "#1",
+        },
+        {
+          label: "#2",
+          value: "#2",
+        },
+        {
+          label: "#3",
+          value: "#3",
+        },
+      ].forEach((item) => {
+        cy.get(".menu-item-text").contains(item.value).should("exist");
+      });
+
+      cy.get(".menu-item-active.has-focus").should("contain", "#1");
+    });
+
+    it("5. should check that placeholder property is working", () => {
+      cy.updateCodeInput(
+        _.locators._controlOption,
         `
       [
         {
@@ -116,9 +159,9 @@ describe(
       ).should("contain", "choose an item");
     });
 
-    it("5. should check that filterable property is working", () => {
+    it("6. should check that filterable property is working", () => {
       cy.updateCodeInput(
-        ".t--property-control-options",
+        _.locators._controlOption,
         `
       {{[
         {
@@ -161,7 +204,7 @@ describe(
       cy.get(".t--canvas-artboard").click({ force: true });
     });
 
-    it("6. should check that on option select is working", () => {
+    it("7. should check that on option select is working", () => {
       _.agHelper.CheckForPageSaveError();
       featureFlagIntercept({ release_table_cell_label_value_enabled: true });
       cy.openPropertyPane("tablewidgetv2");
@@ -174,7 +217,7 @@ describe(
     `,
       );
       cy.updateCodeInput(
-        ".t--property-control-options",
+        _.locators._controlOption,
         `
       [
         {
@@ -204,9 +247,9 @@ describe(
       cy.discardTableRow(4, 0);
     });
 
-    it("7. should check that currentRow is accessible in the select options", () => {
+    it("8. should check that currentRow is accessible in the select options", () => {
       cy.updateCodeInput(
-        ".t--property-control-options",
+        _.locators._controlOption,
         `
       {{[
         {
@@ -229,7 +272,7 @@ describe(
       cy.get(".menu-item-text").contains("#1").should("not.exist");
     });
 
-    it("8. should check that 'same select option in new row' property is working", () => {
+    it("9. should check that 'same select option in new row' property is working", () => {
       _.propPane.NavigateBackToPropertyPane();
 
       const checkSameOptionsInNewRowWhileEditing = () => {
@@ -246,7 +289,7 @@ describe(
         cy.get(".t--property-control-newrowoptions").should("not.exist");
 
         cy.updateCodeInput(
-          ".t--property-control-options",
+          _.locators._controlOption,
           `
         {{[{
           "label": "male",
@@ -295,7 +338,7 @@ describe(
       checkSameOptionsWhileAddingNewRow();
     });
 
-    it("9. should check that 'new row select options' is working", () => {
+    it("10. 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");
@@ -360,7 +403,7 @@ describe(
       checkNoOptionState();
     });
 
-    it("10. should check that server side filering is working", () => {
+    it("11. 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;",

app/client/cypress/fixtures/Table/DemoTableData.ts

@@ -0,0 +1,46 @@
+export const demoTableDataForSelect = `
+{{
+  [
+    {
+      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
+    }
+  ]
+}}
+  `;