## 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 #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: f08c31b3e5d81318144e3a71d652526fd1b01a00
> <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 -->
|
||
|---|---|---|
| .github | ||
| app | ||
| contributions | ||
| deploy | ||
| scripts | ||
| static | ||
| .coderabbit.yaml | ||
| .deepsource.toml | ||
| .editorconfig | ||
| .env.example | ||
| .gitignore | ||
| .imgbotconfig | ||
| .nojekyll | ||
| app.json | ||
| appsmith_events.md | ||
| appsmith_templates.md | ||
| ci-debug.sh | ||
| CODE_OF_CONDUCT.md | ||
| CODEOWNERS | ||
| CONTRIBUTING.md | ||
| depot.json | ||
| Dockerfile | ||
| heroku.yml | ||
| IssuesReport.md | ||
| LICENSE | ||
| README.md | ||
| SECURITY.md | ||
Organizations build internal applications such as dashboards, database GUIs, admin panels, approval apps, customer support dashboards, and more to help their teams perform day-to-day operations. Appsmith is an open-source tool that enables the rapid development of these internal apps. Read more on our website.
Installation
There are two ways to start using Appsmith:
- Signup on Appsmith Cloud.
- Install Appsmith on your machine. See the installation guides below.
| Installation Methods | Documentation |
|---|---|
| Docker (Recommended) | |
| Kubernetes | |
| AWS AMI |
For other deployment options, see the Installation Guides documentation.
Development
To build and run Appsmith in your local dev environment, see Setup for local development.
Learning Resources
Need Help?
Contributing
We ❤️ our contributors. We're committed to fostering an open, welcoming, and safe environment in the community.
📕 We expect everyone participating in the community to abide by our Code of Conduct. Please read and follow it.
🤝 If you'd like to contribute, start by reading our Contribution Guide.
👾 Explore some good first issues.
Let's build great software together.
Top Contributors
License
Appsmith is licensed under the terms of Apache License 2.0.
