333d7081ef
This PR refactors the `DropdownMenuItemsContainer` component and simplifies its inner parts, which have been modified over months for different needs without taking the time to have a global approach. It should however be noted that due to the recent refactor of the `DropdownContent`, it is now much easier to refactor `DropdownMenuItemsContainer`, mainly because of the width management being nicely handled by `DropdownContent` now. Fixes https://github.com/twentyhq/twenty/issues/11766 # Changes The `width` props of `DropdownMenuItemsContainer` and its usage in calling components have been removed. The multiple ternaries inside `DropdownMenuItemsContainer` have been reduced to one ternary on `scrollable` props. The `ScrollWrapper` usage has been removed from `DropdownMenuItemsContainer`, because the only thing we need is to have a simple `overflow-y: scroll;` CSS property. Why ? Because it was previously relevant to have a `ScrollWrapper`, when we were using an external library, but now that `ScrollWrapper` is a simple `div` with overflowing, which only benefit is to expose a hook to imperatively toggle this overflowing behavior from outside (mainly useful for table fixed row and column), and that we don’t need this for `DropdownMenuItemsContainer`, then it follows that we just need a simple overflowing `div` container, which simplifies everything and boils down our `DropdownMenuItemsContainer` to a straightforward and standard CSS stack. We remove the temporary `scrollWrapperHeightAuto` props that was used to fix a bug in a previous PR, we also rollback `ScrollWrapper` to its previous state with `width: 100%` and `height: 100%` and removed `heightAuto` props. The `hasMaxHeight` props is kept, but the `168` pixels value is extracted in a constant. # QA Component | Comment -- | -- CommandMenuActionDropdown | Reported bug https://github.com/twentyhq/twenty/issues/12541 RecordIndexActionMenuDropdown | AttachmentDropdown | Cannot test because cannot add a file (currently broken, maybe because of permissions ?) CommandMenuContextChipGroups | FavoriteFolderNavigationDrawerItemDropdown | FavoriteFolderPicker | FavoriteFolderPickerFooter | AdvancedFilterAddFilterRuleSelect | AdvancedFilterFieldSelectMenu | AdvancedFilterRecordFilterGroupOptionsDropdown | AdvancedFilterRecordFilterOperandSelect | AdvancedFilterRecordFilterOptionsDropdown | AdvancedFilterSubFieldSelectMenu | ObjectFilterDropdownBooleanSelect | ObjectFilterDropdownCountrySelect | ObjectFilterDropdownCurrencySelect | ObjectFilterDropdownNumberInput | ObjectFilterDropdownOptionSelect | Fixed “No result” case ObjectFilterDropdownRecordRemoveFilterMenuItem | Removed because unused ObjectFilterDropdownTextInput | ObjectOptionsDropdownFieldsContent | Spotted bug with icon eye https://github.com/twentyhq/twenty/issues/12545 ObjectOptionsDropdownHiddenFieldsContent | Spotted bug with icon eye https://github.com/twentyhq/twenty/issues/12545 ObjectOptionsDropdownLayoutContent | Refactored DropdownMenuItemsContainer usage with DropdownMenuSeparator, spotted bug switch view type https://github.com/twentyhq/twenty/issues/12546 ObjectOptionsDropdownMenuContent | Refactored DropdownMenuItemsContainer usage with DropdownMenuSeparator ObjectOptionsDropdownLayoutOpenInContent | ObjectOptionsDropdownMenuViewName | ObjectOptionsDropdownRecordGroupFieldsContent | ObjectOptionsDropdownRecordGroupSortContent | ObjectSortDropdownButton | RecordBoardColumnDropdownMenu | RecordBoardColumnDropdownMenu | RecordBoardColumnHeaderAggregateDropdownFieldsContent | RecordBoardColumnHeaderAggregateDropdownMenuContent | RecordBoardColumnHeaderAggregateDropdownOptionsContent | MultiItemFieldInput | Added hasMaxHeight on list of items MultiItemFieldMenuItem | RecordGroupsVisibilityDropdownSection | MultipleRecordPicker | MultipleRecordPickerMenuItems | SingleRecordPickerMenuItems | SingleRecordPickerMenuItemsWithSearch | RecordDetailRelationRecordsListItem | RecordTableColumnAggregateFooterDropdownSubmenuContent | RecordTableColumnAggregateFooterMenuContent | RecordTableHeaderPlusButtonContent | RecordTableHeaderPlusButtonContent | MultipleSelectDropdown | SettingsAccountsRowDropdownMenu | ConfigVariableDatabaseInput | ConfigVariableOptionsDropdownContent | SettingsDataModelNewFieldBreadcrumbDropDown | SettingsDataModelFieldSelectFormOptionRow | SettingsObjectFieldActiveActionDropdown | SettingsObjectFieldInactiveActionDropdown | SettingsObjectInactiveMenuDropDown | SettingsIntegrationDatabaseConnectionSummaryCard | SettingsRoleAssignmentWorkspaceMemberPickerDropdown | SettingsRolePermissionsObjectLevelObjectPickerDropdownContent | Cannot test SettingsSecurityApprovedAccessDomainRowDropdownMenu | Cannot test SettingsSecuritySSORowDropdownMenu | Cannot test SettingsServerlessFunctionTabEnvironmentVariableTableRow | Cannot test MatchColumnSelectFieldSelectDropdownContent | MatchColumnSelectSubFieldSelectDropdownContent | SubMatchingSelectInput | SupportDropdown | IconPicker | Select | SelectInput | CurrencyPickerDropdownSelect | PhoneCountryPickerDropdownSelect | CustomSlashMenu | TabListDropdown | Cannot test MultiWorkspaceDropdownDefaultComponents | Removed unnecessary StyledDropdownMenuItemsContainer MultiWorkspaceDropdownThemesComponents | MultiWorkspaceDropdownWorkspacesListComponents | UpdateViewButtonGroup | ViewBarFilterDropdownFieldSelectMenu | ViewFieldsVisibilityDropdownSection | ViewPickerContentCreateMode | ViewPickerContentEditMode | ViewPickerListContent | Add hasMaxHeight to limit the height of view list ViewPickerOptionDropdown | WorkflowEditTriggerDatabaseEventForm | WorkflowVariablesDropdownFieldItems | WorkflowVariablesDropdownObjectItems | WorkflowVariablesDropdownWorkflowStepItems | <!-- notionvc: a3a87101-9944-4b03-a29d-b2974d5ffa9d --> --------- Co-authored-by: Charles Bochet <charles@twenty.com>
The #1 Open-Source CRM
🌐 Website · 📚 Documentation · 
Roadmap · 
Discord · 
Figma
Installation
See:
🚀 Self-hosting
🖥️ Local Setup
Does the world need another CRM?
We built Twenty for three reasons:
CRMs are too expensive, and users are trapped. Companies use locked-in customer data to hike prices. It shouldn't be that way.
A fresh start is required to build a better experience. We can learn from past mistakes and craft a cohesive experience inspired by new UX patterns from tools like Notion, Airtable or Linear.
We believe in Open-source and community. Hundreds of developers are already building Twenty together. Once we have plugin capabilities, a whole ecosystem will grow around it.
What You Can Do With Twenty
We're currently developing Twenty's beta version.
Please feel free to flag any specific needs you have by creating an issue.
Below are a few features we have implemented to date:
- Add, filter, sort, edit, and track customers
- Create one or several opportunities for each company
- See rich notes tasks displayed in a timeline
- Create tasks on records
- Navigate quickly through the app using keyboard shortcuts and search
Add, filter, sort, edit, and track customers:
Create one or several opportunities for each company:
Track deals effortlessly with the email integration:
Tailor your data model to meet business needs:
See rich notes displayed in a timeline:
Create tasks on records
Navigate quickly through the app using keyboard shortcuts and search:
Connect your CRM to all your tools through our APIs and Webhooks.
Stack
- TypeScript
- Nx
- NestJS, with BullMQ, PostgreSQL, Redis
- React, with Recoil, Emotion and Lingui
Thanks
Thanks to these amazing services that we use and recommend for UI testing (Chromatic), code review (Greptile), catching bugs (Sentry) and translating (Crowdin).
Join the Community
- Star the repo
- Subscribe to releases (watch -> custom -> releases)
- Follow us on Twitter or LinkedIn
- Join our Discord
- Improve translations on Crowdin
- Contributions are, of course, most welcome!