fix: Revert "fix: Correct Select Widget Mapping for Dynamic Label and Value Keys (#35862)" #38250
Conversation
rahulbarwal
requested review from
ApekshaBhosale and
sagar-qa007
as code owners
WalkthroughThis pull request involves modifications to the Select widget's functionality and test suite. The changes primarily focus on simplifying the option label and value handling in the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
/build-deploy-preview skip-tests=true |
rahulbarwal
changed the title
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/12408272311. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (2)
app/client/src/widgets/SelectWidget/widget/derived.js (2)
Test coverage needed for getOptions function
The derived.test.ts file lacks test coverage for the
getOptionsfunction, particularly for:
- Array-based label handling (
props.optionLabelas array)- Array-based value handling (
props.optionValueas array)- String-based property mapping from sourceData
Add test cases to cover these scenarios:
- When optionLabel is a string (property name)
- When optionLabel is an array
- When optionValue is a string (property name)
- When optionValue is an array
- When sourceData is empty/undefined
🔗 Analysis chain
Line range hint
1-24: Restore or replace removed test coverageThe AI summary indicates that
validateLabelAndValueKeytest was removed. Consider adding alternative test coverage for the array-based label and value handling.Let's check existing test coverage:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for Select widget test files fd -e ts -e js "Select.*test|Select.*spec"Length of output: 4079
Script:
#!/bin/bash # Search for test files specifically for SelectWidget fd "Select.*test" app/client/src/widgets/SelectWidget/ # Check for any test files in the widget's directory fd -e test.js -e test.ts -e spec.js -e spec.ts . app/client/src/widgets/SelectWidget/ # Search for test cases related to optionLabel and optionValue in Select widget tests rg -i "optionLabel|optionValue" app/client/cypress/e2e/Regression/ClientSide/Widgets/Select/Length of output: 1484
Script:
#!/bin/bash # Check the content of the derived.test.ts file cat app/client/src/widgets/SelectWidget/widget/derived.test.ts # Look for any test cases related to getOptions function rg -A 10 "getOptions.*test" app/client/src/widgets/SelectWidget/Length of output: 9427
Add array length validation to prevent misaligned mappings
The code shows that while
sourceDatais initialized with a fallback (props.sourceData || []), there's no validation to ensurelabelsandvaluesarrays have the same length assourceData. This could lead to undefined values when:
props.optionLabelis an array with different length thansourceDataprops.optionValueis an array with different length thansourceData- Property access via
d[props.optionLabel]ord[props.optionValue]returns undefinedAdd length validation before the final mapping:
if (labels.length !== sourceData.length || values.length !== sourceData.length) { return []; }🔗 Analysis chain
Line range hint
20-24: Verify array indices alignmentThe mapping logic assumes that
labels[i]andvalues[i]will always exist and correspond to the correctsourceDataentry. Without validation, this could lead to undefined values or incorrect mappings.Let's check for existing validation or error handling:
Let me check for more context around the SelectWidget's data handling.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Look for validation patterns in Select widget ast-grep --pattern 'if ($_ === undefined || $_ === null) { $$$ }'Length of output: 2620
Script:
#!/bin/bash # Look for the full implementation context of the SelectWidget's derived.js rg -B 10 -A 10 "sourceData.map\(\(d, i\) => \({" app/client/src/widgets/SelectWidget/ # Check for any validation in SelectWidget ast-grep --pattern 'function $_($$$) { if ($$$) { $$$ } return sourceData.map($$$) }'Length of output: 312
Script:
#!/bin/bash # Look for the SelectWidget's derived.js content rg --type js -A 10 -B 10 "sourceData\.map" app/client/src/widgets/SelectWidget/ # Check for any array length validation ast-grep --pattern 'if ($_.length !== $_.length) { $$$ }' # Look for any validation before the map operation rg --type js -B 5 "sourceData\.map" app/client/src/widgets/SelectWidget/Length of output: 9548
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/client/cypress/e2e/Regression/ClientSide/Widgets/Select/Select2_Spec.ts(0 hunks)app/client/src/widgets/SelectWidget/widget/derived.js(1 hunks)
💤 Files with no reviewable changes (1)
- app/client/cypress/e2e/Regression/ClientSide/Widgets/Select/Select2_Spec.ts
🔇 Additional comments (1)
app/client/src/widgets/SelectWidget/widget/derived.js (1)
11-11:
Direct array assignment could lead to data inconsistency
The direct assignment of arrays (props.optionLabel and props.optionValue) removes the previous mapping logic that ensured synchronization with sourceData. This could cause mismatches if the arrays don't align with sourceData.
Let's verify the usage patterns:
Also applies to: 17-17
| if (typeof props.optionLabel === "string") { | ||
| labels = sourceData.map((d) => d[props.optionLabel]); | ||
| } else if (_.isArray(props.optionLabel)) { | ||
| labels = sourceData.map((d, i) => d[props.optionLabel[i]]); | ||
| labels = props.optionLabel; | ||
| } | ||
|
|
||
| if (typeof props.optionValue === "string") { | ||
| values = sourceData.map((d) => d[props.optionValue]); | ||
| } else if (_.isArray(props.optionValue)) { | ||
| values = sourceData.map((d, i) => d[props.optionValue[i]]); | ||
| values = props.optionValue; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider adding type validation for array inputs
Since this is reverting a previous fix, we should ensure type safety for array inputs to prevent runtime errors.
Consider adding validation:
} else if (_.isArray(props.optionLabel)) {
+ if (!props.optionLabel.every(label => label !== undefined)) {
+ console.warn("Invalid labels found in optionLabel array");
+ }
labels = props.optionLabel;
}
if (typeof props.optionValue === "string") {
values = sourceData.map((d) => d[props.optionValue]);
} else if (_.isArray(props.optionValue)) {
+ if (!props.optionValue.every(value => value !== undefined)) {
+ console.warn("Invalid values found in optionValue array");
+ }
values = props.optionValue;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (typeof props.optionLabel === "string") { | |
| labels = sourceData.map((d) => d[props.optionLabel]); | |
| } else if (_.isArray(props.optionLabel)) { | |
| labels = sourceData.map((d, i) => d[props.optionLabel[i]]); | |
| labels = props.optionLabel; | |
| } | |
| if (typeof props.optionValue === "string") { | |
| values = sourceData.map((d) => d[props.optionValue]); | |
| } else if (_.isArray(props.optionValue)) { | |
| values = sourceData.map((d, i) => d[props.optionValue[i]]); | |
| values = props.optionValue; | |
| } | |
| if (typeof props.optionLabel === "string") { | |
| labels = sourceData.map((d) => d[props.optionLabel]); | |
| } else if (_.isArray(props.optionLabel)) { | |
| if (!props.optionLabel.every(label => label !== undefined)) { | |
| console.warn("Invalid labels found in optionLabel array"); | |
| } | |
| labels = props.optionLabel; | |
| } | |
| if (typeof props.optionValue === "string") { | |
| values = sourceData.map((d) => d[props.optionValue]); | |
| } else if (_.isArray(props.optionValue)) { | |
| if (!props.optionValue.every(value => value !== undefined)) { | |
| console.warn("Invalid values found in optionValue array"); | |
| } | |
| values = props.optionValue; | |
| } |
|
Deploy-Preview-URL: https://ce-38250.dp.appsmith.com |
This reverts commit 9f387d5.
Description
Tip
Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team).
Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR.
Fixes #
Issue Numberor
Fixes
Issue URLWarning
If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.
Automation
/ok-to-test tags=""
🔍 Cypress test results
Caution
If you modify the content in this section, you are likely to disrupt the CI result for your PR.
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
Bug Fixes
New Features
Documentation