fix: Correct Select Widget Mapping for Dynamic Label and Value Keys (#…

…35862)

## Description
**Problem**
When the Select widget's labelKey or valueKey properties are switched to
JS mode, passing a function that returns a string as the key causes the
dropdown options to break. Instead of correctly mapping the labels and
values, the options are incorrectly returned as an array of the key
itself.

**Root Cause**
The issue lies in the `getOptions` function in derived.js. The logic
that computes the select options based on the labelKey and valueKey was
not handling cases where these properties are functions that return
arrays. Instead of mapping through the source data and returning the
corresponding values for each key, the function was mistakenly returning
the entire array.

**Solution**
The `getOptions` function in derived.js has been updated to correctly
handle cases where labelKey or valueKey are arrays. The function now
maps through the sourceData and computes the correct labels and values
based on the provided properties, ensuring that the dropdown options are
displayed as expected.



Fixes #35269

## Automation

/ok-to-test tags="@tag.Sanity, @tag.Select, @tag.Widget, @tag.Binding"

### 🔍 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/10560970428>
> Commit: 118bade
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10560970428&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Select, @tag.Widget, @tag.Binding`
> Spec:
> <hr>Mon, 26 Aug 2024 15:24:26 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**
- Enhanced test coverage for the Select widget by adding new test cases
to validate the correct functioning of JavaScript functions in the label
and value keys.
- Improved processing of `optionLabel` and `optionValue` properties for
the Select widget, ensuring accurate mapping to `sourceData`.
- Introduced a new helper function to streamline the validation of label
and value keys in the Select widget tests.

- **Bug Fixes**
- Corrected the handling of multiple options in the Select widget to
enhance data mapping accuracy and functionality.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/cypress/e2e/Regression/ClientSide/Widgets/Select/Select2_Spec.ts

@@ -7,6 +7,7 @@ import {
   locators,
   propPane,
   widgetLocators,
+  jsEditor,
 } from "../../../../../support/Objects/ObjectsCore";
 import EditorNavigation, {
   EntityType,
@@ -20,6 +21,24 @@ describe(
       entityExplorer.DragDropWidgetNVerify(draggableWidgets.SELECT);
     });
 
+    const validateLabelAndValueKey = (labelKey: string, valueKey: string) => {
+      // Validate Label key
+      propPane.ToggleJSMode("Label key", true);
+      propPane.UpdatePropertyFieldValue("Label key", labelKey);
+      agHelper.SelectDropDown("Blue");
+      agHelper.ReadSelectedDropDownValue().then(($selectedValue) => {
+        expect($selectedValue).to.eq("Blue");
+      });
+
+      // Validate Value key
+      propPane.ToggleJSMode("Value key", true);
+      propPane.UpdatePropertyFieldValue("Value key", valueKey);
+      agHelper.SelectDropDown("Blue");
+      agHelper.ReadSelectedDropDownValue().then(($selectedValue) => {
+        expect($selectedValue).to.eq("Blue");
+      });
+    };
+
     it("1. Validate Label properties - Text , Position , Alignment , Width(in columns)", function () {
       //Text
       propPane.TypeTextIntoField("Text", "Select Value");
@@ -305,5 +324,37 @@ describe(
         1,
       );
     });
+
+    it("10.Validate using function inside label key and value key returns correct label options", () => {
+      // Navigate back to the editor
+      deployMode.NavigateBacktoEditor();
+
+      // Select the widget
+      EditorNavigation.SelectEntityByName("Select1", EntityType.Widget);
+
+      // Validate keys
+      validateLabelAndValueKey("{{(() => 'name')()}}", "{{(() => 'code')()}}");
+
+      // Create JS Object with array data
+      jsEditor.CreateJSObject(
+        `export default {
+            array: [1, 2, 3]
+          }`,
+        {
+          completeReplace: true,
+          toRun: false,
+          prettify: true,
+        },
+      );
+
+      // Select the widget
+      EditorNavigation.SelectEntityByName("Select1", EntityType.Widget);
+
+      // Validate keys
+      validateLabelAndValueKey(
+        "{{JSObject1.array.length > 0 ? 'name' : ''}}",
+        "{{JSObject1.array.length > 0 ? 'code' : ''}}",
+      );
+    });
   },
 );

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

@@ -8,13 +8,13 @@ export default {
     if (typeof props.optionLabel === "string") {
       labels = sourceData.map((d) => d[props.optionLabel]);
     } else if (_.isArray(props.optionLabel)) {
-      labels = props.optionLabel;
+      labels = sourceData.map((d, i) => d[props.optionLabel[i]]);
     }
 
     if (typeof props.optionValue === "string") {
       values = sourceData.map((d) => d[props.optionValue]);
     } else if (_.isArray(props.optionValue)) {
-      values = props.optionValue;
+      values = sourceData.map((d, i) => d[props.optionValue[i]]);
     }
 
     return sourceData.map((d, i) => ({