Update ADS Select #38079
Assignees
Labels
Anvil Pod
Issue related to Anvil project
Frontend
This label marks the issue or pull request to reference client code
Task
A simple Todo
Workflows Pod
Issues that the workflows team owns
Workflows Product
Issues related to the workflows product
Comments
KelvinOm
added
the
Frontend
|
@ayushpahwa can add the estimate for this task, and also if you have started on, let's move it in "in progess" pipeline on zenhub. |
ayushpahwa
added
Workflows Pod
|
@jsartisan please add the new requirement to this issue and ensure that all folks in the team are aligned with the same. |
github-actions bot
pushed a commit
to Zeral-Zhang/appsmith
that referenced
this issue
Feb 7, 2025
## Description
This PR adds grouping capabilities to our dropdown control component
(using `rc-select`). Specifically:
- Introduces an `optionGroupConfig` object that maps each group key to a
label and collects relevant options under it.
- Defaults any ungrouped options to the “Others” group if no matching
group is found.
- Includes refactoring to maintain backward compatibility for
non-grouped dropdown usage.
Additionally:
- New tests are added to validate grouped dropdown behaviour.
- Existing multi-select and clear-all functionality is unaffected.
Sample config for the grouping to be enabled
```
{
"label": "Command",
"description": "Choose method you would like to use to query the database",
"configProperty": "actionConfiguration.formData.command.data",
"controlType": "DROP_DOWN",
"initialValue": "FIND",
"options": [
{
"label": "Find document(s)",
"value": "FIND",
"optionGroupType": "testGrp1"
},
{
"label": "Insert document(s)",
"value": "INSERT",
"optionGroupType": "testGrp1"
},
{
"label": "Update document(s)",
"value": "UPDATE",
"optionGroupType": "testGrp2"
},
{
"label": "Delete document(s)",
"value": "DELETE",
"optionGroupType": "testGrp2"
},
{
"label": "Count",
"value": "COUNT",
"optionGroupType": "testGrp2"
},
{
"label": "Distinct",
"value": "DISTINCT",
"optionGroupType": "testGrp3"
},
{
"label": "Aggregate",
"value": "AGGREGATE",
"optionGroupType": "testGrp3"
},
{
"label": "Raw",
"value": "RAW",
"optionGroupType": "testGrp3"
}
],
"optionGroupConfig": {
"testGrp1": {
"label": "Group 1",
"children": []
},
"testGrp2": {
"label": "Group 2",
"children": []
},
"testGrp3": {
"label": "Group 3",
"children": []
}
}
}
```
Fixes appsmithorg#38079
## Automation
/ok-to-test tags="@tag.Sanity, @tag.IDE"
### 🔍 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/13059919318>
> Commit: f08c31b
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13059919318&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.IDE`
> Spec:
> <hr>Thu, 30 Jan 2025 20:22:48 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
- **New Features**
- Added option grouping functionality to the Select component.
- Introduced the ability to organize dropdown options into labeled
groups.
- Enhanced dropdown visual hierarchy with group-based option display.
- **Improvements**
- Updated Select component type definitions to support option grouping.
- Added CSS styles for improved presentation of option groups and
grouped options.
- **Testing**
- Added comprehensive test coverage for dropdown option grouping
functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
ayushpahwa
added a commit
that referenced
this issue
Feb 13, 2025
## Description This PR adds capability of server side pagination to the dropdown form component. There is another PR in works to add server side search. To ensure both grouping and pagination work correctly, the dropdown control component is refactored by adding memoization and fixing some rendering issues. Fixes #38079 ## Automation /ok-to-test tags="@tag.All" ### 🔍 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/13306719132> > Commit: 01f4649 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13306719132&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Thu, 13 Feb 2025 12:58:12 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** - Enabled dynamic pagination for form options, allowing users to load additional choices smoothly. - Enhanced dropdown controls for both single and multi-select modes with improved responsiveness and clearer grouping. - Improved form evaluation processes for a more seamless and performant user experience. - Introduced new functionality for fetching paginated dynamic values, enhancing the overall data handling experience. - Added new function to retrieve conditional output based on form configuration. - **Bug Fixes** - Improved error handling and logging for dynamic value fetching processes. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Issue Description
The text was updated successfully, but these errors were encountered: