Commit Graph

944 Commits

Author SHA1 Message Date
6f1107eecd Revert "[Permissions] Force open title input for role label when empty" (#12817)
Reverts twentyhq/twenty#12710
2025-06-24 14:08:16 +02:00
074cd22a67 [Permissions] Force open title input for role label when empty (#12710)
- Fix empty title in breadcrumb 
- Enforce role label input open if empty
2025-06-24 14:06:50 +02:00
3cee2b796f Fixed record picker loading flickering (#12736)
This PR solves a flickering effect on record pickers on the different
loading state they can be in.

It was designed with @Bonapara to settle on a nice UX feeling.

## Before

With fast network (local) :


https://github.com/user-attachments/assets/58899934-c705-4b44-b7f6-289045032c11

With slow network : 


https://github.com/user-attachments/assets/9fb18d86-9da6-4e5d-a83f-00c810fab2dc

## After


https://github.com/user-attachments/assets/f4abb40f-5d42-4c46-88ab-aaef4f883f7f

Fixes https://github.com/twentyhq/twenty/issues/12680

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2025-06-24 12:15:50 +02:00
d0126e22ee feat: ability to switch currency format (#12542)
Fixes #11927

I have added 'format' in the zod schema of currency, and for using it, I
am separately passing 'format' to 'currencyDisplay.'
The feature is working correctly.

---------

Co-authored-by: prastoin <paul@twenty.com>
Co-authored-by: Paul Rastoin <45004772+prastoin@users.noreply.github.com>
2025-06-24 10:28:50 +02:00
85c50f149d [Permissions][FE] Design followup 5 (#12793)
## Context
- We now display workspace member full name and email in role assignment
picker
- Replaced Forbidden by "Not shared" with lock icon
- Fix Disabled for Danger accent
- Fix avatar URL

<img width="575" alt="Screenshot 2025-06-23 at 16 38 56"
src="https://github.com/user-attachments/assets/08430bfe-29c4-4ac4-821c-9062dfad7150"
/>
<img width="756" alt="Screenshot 2025-06-23 at 16 21 36"
src="https://github.com/user-attachments/assets/c19f31bd-fe9d-415d-aa55-62fa3e228c49"
/>
<img width="373" alt="Screenshot 2025-06-23 at 17 13 08"
src="https://github.com/user-attachments/assets/e2f7878c-7c5a-40b4-a482-8e99292257c3"
/>
<img width="342" alt="Screenshot 2025-06-23 at 17 37 49"
src="https://github.com/user-attachments/assets/04169e85-14dd-4aed-bd71-7aefd601a894"
/>
<img width="434" alt="Screenshot 2025-06-23 at 17 37 35"
src="https://github.com/user-attachments/assets/7caf0967-c4dd-4d0f-90c8-259a85182b19"
/>
2025-06-23 19:15:58 +02:00
f05da75bb5 Set error message not absolute (#12802)
Before
<img width="485" alt="Capture d’écran 2025-06-23 à 18 52 50"
src="https://github.com/user-attachments/assets/19c60cd1-f241-4419-9d03-d16d019f2c04"
/>

After
<img width="485" alt="Capture d’écran 2025-06-23 à 18 48 01"
src="https://github.com/user-attachments/assets/85b68984-11e0-456b-aacb-5a0661818b9c"
/>
<img width="485" alt="Capture d’écran 2025-06-23 à 18 48 38"
src="https://github.com/user-attachments/assets/7380d537-e8d0-411c-b4f8-7b38b6550e20"
/>
2025-06-23 17:08:40 +00:00
19fe508ec3 fix confirm close dialog + add restart confirm dialog (#12761)
Test: 
- On upload > No dialog at modal closing
- On match > Confirm cancel dialog at closing (escape, click outside,
cancel cross)
- On match > Restart dialog at Restart Import
- On validation > Confirm cancel dialog at closing (escape, click
outside, cancel cross)
- On import > Confirm cancel dialog at closing (escape, click outside,
cancel cross)
- On import > No confirm at import end

closes : https://github.com/twentyhq/core-team-issues/issues/1071
2025-06-20 15:20:17 +02:00
28466ecbf3 Add icon select to manual trigger (#12724)
## After

<img width="1220" alt="image"
src="https://github.com/user-attachments/assets/98a73aae-80d7-4e92-93d3-be13210da88b"
/>

<img width="1131" alt="image"
src="https://github.com/user-attachments/assets/9919e415-4355-4995-8979-9055b821f1e9"
/>

<img width="1300" alt="image"
src="https://github.com/user-attachments/assets/27f11cb3-d72c-468a-a641-8414172b9b54"
/>

<img width="1353" alt="image"
src="https://github.com/user-attachments/assets/2f0037f2-fe17-48b6-b7e6-c7528687a5fd"
/>
2025-06-19 16:32:42 +00:00
cbc0d06a2f Replace hotkey scopes by focus stack (Part 1 - Dropdowns and Side Panel) (#12673)
This PR is the first part of a refactoring aiming to deprecate the
hotkey scopes api in favor of the new focus stack api which is more
robust.

The refactored components in this PR are the dropdowns and the side
panel/command menu.

- Replaced `useScopedHotkeys` by `useHotkeysOnFocusedElement` for all
dropdown components, selectable lists and the command menu
- Introduced `focusId` for all dropdowns and created a common hotkey
scope `DropdownHotkeyScope` for backward compatibility
- Replaced `setHotkeyScopeAndMemorizePreviousScope` occurrences with
`usePushFocusItemToFocusStack` and `goBackToPreviousHotkeyScope` with
`removeFocusItemFromFocusStack`

Note: Test that the shorcuts and arrow key navigation still work
properly when interacting with dropdowns and the command menu.

Bugs that I have spotted during the QA but which are already present on
main:
- Icon picker select with arrow keys doesn’t work inside dropdowns
- Some dropdowns are not selectable with arrow keys (no selectable list)
- Dropdowns in dropdowns don’t reset the hotkey scope correctly when
closing
- The table click outside is not triggered after closing a table cell
and clicking outside of the table
2025-06-19 14:53:18 +02:00
a8fb039e65 poc - cal.com integration in onboarding flow (#12530) 2025-06-19 15:27:38 +05:30
da5ae34109 [permissions] Filter tabs + registered actions according to permissions (#12657)
Note and task tabs in side panel should only show if user has reading
permission on them.

"Go to companies", "Go to workflows", etc. in command menu should only
show is user has reading permission on related objects.

<img width="507" alt="Capture d’écran 2025-06-17 à 11 09 50"
src="https://github.com/user-attachments/assets/3a2a4c25-0b9b-4ee6-b18f-b019b8a56d47"
/>
<img width="505" alt="Capture d’écran 2025-06-17 à 11 09 56"
src="https://github.com/user-attachments/assets/8a219955-cc8e-4dbf-a4f9-a50e1aaa4b59"
/>

**How to test** 
Assign a user with a custom role that has **no** read permissions on
notes/tasks/workflows/companies/opportunities/people (no need to test
them all but at least one between note and tasks; workflows; one between
companies/opportunities/people). Check that you don't see the related
tab / action.

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2025-06-18 15:12:58 +00:00
f3a8b849aa Fix table loading (#12653)
As per title
2025-06-17 15:01:28 +02:00
e922843afb Created DropdownMenuInnerSelect and implemented it for filter dropdowns (#12626)
This PR introduces a new generic UI component DropdownMenuInnerSelect,
that improves the UI by allowing to have both a dropdown menu header and
a select in the header.

In this PR we implement it just for filter dropdown components.

Fixes https://github.com/twentyhq/core-team-issues/issues/1001
2025-06-16 16:16:32 +02:00
ed1593c089 Fix shortcuts inconsistencies (#12624)
Fixes https://github.com/twentyhq/core-team-issues/issues/1093

The search shortcut and the go to shortcuts were not always available.
They worked after a refresh but not when clicking outside of a table or
a board, or when a table row or board card was focus.
This PR fixes this:


https://github.com/user-attachments/assets/f454037b-9dfd-4f9c-9124-43f4b8b5cec8
2025-06-16 16:10:27 +02:00
e0cb53af48 1031 workflows menu fixes (#12618)
## Before (not exhaustive)
<img width="520" alt="image"
src="https://github.com/user-attachments/assets/642365c5-f359-4ad3-8ba3-d7bb9c7d91e4"
/>
<img width="522" alt="image"
src="https://github.com/user-attachments/assets/0819717f-84c6-436c-b9f4-20a1964cd565"
/>
<img width="528" alt="image"
src="https://github.com/user-attachments/assets/240bf181-ec37-4e25-9fdb-c264a680abcc"
/>
<img width="525" alt="image"
src="https://github.com/user-attachments/assets/0dfd55c1-dfbd-47ee-8741-977b5e57fa0a"
/>


## After (not exhaustive)
<img width="511" alt="image"
src="https://github.com/user-attachments/assets/199b6e6e-be1d-4b75-8df6-d65ff05bee58"
/>
<img width="512" alt="image"
src="https://github.com/user-attachments/assets/a92f67a8-ed58-4c4f-b401-07765158030f"
/>
<img width="522" alt="image"
src="https://github.com/user-attachments/assets/ba3ae73a-4650-4f7f-a62a-980e6a2d21d1"
/>
<img width="518" alt="image"
src="https://github.com/user-attachments/assets/97946870-4fba-4898-8381-9087df0b9ac4"
/>
2025-06-16 11:40:27 +00:00
b1af98f93d refactor(auth): add workspaces selection (#12098) 2025-06-13 16:17:35 +02:00
96c2f5477c Trigger search on mouse up (#12595)
This fixes one of the issues in
https://github.com/twentyhq/core-team-issues/issues/1093.

See discussion in https://github.com/twentyhq/twenty/pull/12577


https://github.com/user-attachments/assets/f02a8b06-6246-4c9e-b1f2-8d8ce5091cdc
2025-06-13 14:50:30 +02:00
5fed618528 Fixed overflow scroll bar in dropdowns (#12587)
Following-up PR https://github.com/twentyhq/twenty/pull/12547 which
introduced a last minute fix that broke the overflow UI.

Before : 

<img width="261" alt="image"
src="https://github.com/user-attachments/assets/e4345d7f-1f4e-4cca-9056-33b5f897ad8c"
/>

After : 

<img width="276" alt="image"
src="https://github.com/user-attachments/assets/ca31b50d-5656-43ca-9819-8d065ec5c005"
/>
2025-06-13 11:52:20 +02:00
a5c0922399 Improve email validation modal design (#12490)
closes https://github.com/twentyhq/core-team-issues/issues/1020
2025-06-12 19:05:36 +02:00
3ba701812b Add display flex on pagePanel (#12568)
## Before


https://github.com/user-attachments/assets/06a4d6e9-7674-4748-937a-ee3bbe5ccc5a

## After


https://github.com/user-attachments/assets/6c2a903b-7720-4fcd-acb9-f106cb05f37b


https://github.com/user-attachments/assets/87b1f7dc-457f-48c6-8622-cb49c2ad3c28
2025-06-12 16:48:01 +02:00
333d7081ef Refactored and simplified DropdownMenuItemsContainer height management (#12547)
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>
2025-06-12 12:22:26 +02:00
cb5a895963 fix: prevent command menu from closing when clicking items in slash menu (#12555)
resolve #12540 

Prevent command menu from closing by adding new excludedClickOutsideIds
constant.


https://github.com/user-attachments/assets/965075d5-d592-4d50-bb5a-1b2bb561e55a

---------

Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com>
2025-06-12 09:30:10 +00:00
4c81d60dc7 Fix workflow run tab not displaying when navigating from side panel to full page (#12531)
closes https://github.com/twentyhq/core-team-issues/issues/1076
## Problem
When opening a workflow run in the side panel and then navigating to the
full page view, the workflow visualizer tab wouldn't display until the
page was refreshed.

## Root Cause
- In the side panel, tabs are merged into a single "home" tab
- When navigating to full page, the activeTabId state persisted as
"home"
- But the full page view only has a "workflowRun"(flow) tab, not "home"
- TabList was trying to display a non-existent tab, resulting in blank
content

## Solution
Added validation in TabList to check if activeTabId exists in
visibleTabs. If not, it falls back to the first available tab.
2025-06-11 10:17:12 +02:00
a15318537f update import steps design (#12463)
closes https://github.com/twentyhq/core-team-issues/issues/916

![Screenshot 2025-06-05 at 10 52
58](https://github.com/user-attachments/assets/ba5b6d65-0c1f-4d63-a197-e61816ec2d55)
![Screenshot 2025-06-05 at 10 53
09](https://github.com/user-attachments/assets/4aed579e-5e0e-4570-9518-b6e8ac604ea6)
![Screenshot 2025-06-05 at 10 53
24](https://github.com/user-attachments/assets/6f716306-ba08-468c-875a-4279991c1abd)
2025-06-10 16:49:37 +02:00
b74f6901b4 modal fix (#12514)
issue was the modal was closing itself due to onclickoutside while it
should have been excluded

fixes https://github.com/twentyhq/twenty/issues/12512
2025-06-10 14:44:25 +02:00
3cbd3427a1 chip-count-black-mode (#12505)
![image](https://github.com/user-attachments/assets/01b4576d-2409-4bf0-8fa7-bd39ad00ded5)

Add chip count display for black mode in participant chips.

Improves visual clarity for participant lists in calendar events.

Fix https://github.com/twentyhq/twenty/issues/12473
2025-06-10 10:03:04 +02:00
1f2c40af61 fix: prevent duplicate dropdowns in activity targets when editing in different contexts (#12462)
Closes #12361

### Changes Made

- In `ActivityTargetsInlineCell`, we now use different component
instance IDs based on context. This ensures that each instance of the
component (whether in right drawer or main view) has its own isolated
state, preventing state conflicts and duplicate dropdowns.
- The `MultipleRecordPicker` component now properly resets its state
when closed, preventing state leakage between instances.


https://github.com/user-attachments/assets/deb99687-a803-417e-a339-cab061026739
2025-06-09 15:20:13 +02:00
322c8a1852 Upgrade to Node22 (#12488)
BlocknoteJS requires an ESM module where our server is CJS, this forced
us to pin the server-util version, which led us to force the resolution
of several packages, leading to bugs downstream.

From Node 22.12 Node supports requiring ESM modules (available from Node
22.0 with a flag). So I upgrade the module.
I picked Node 22 and not Node 23 or Node 24 because 22 is the LTS and we
don't plan to change node versions frequently.

If you remain on Node 18, things should still mostly work, except if you
edit a Rich Text field.

I also starting changing the default runtime for Serverless Functions
which isn't directly related. This means new serverless functions will
be created on Node 22, but we will still need another PR to migrate
existing serverless functions before September (end of support by AWS).

(In this PR I also remove the upgrade commands from 0.43 since they rely
on Blocknote and I didn't want to have to deal with this)

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
2025-06-06 18:35:30 +02:00
276f1796cc Implemented dropdown menu section label in filter and sort (#12453)
This PR implements a new component `DropdownMenuSectionLabel`, to be
used for indicating visible and hidden fields in the multiple dropdowns
that use those two sections.

After : 

<img width="247" alt="Capture d’écran 2025-06-04 à 12 49 42"
src="https://github.com/user-attachments/assets/759c48ca-c54d-4921-bea6-cbfe7a2d244d"
/>
<img width="252" alt="Capture d’écran 2025-06-04 à 12 49 20"
src="https://github.com/user-attachments/assets/72cd63d0-e5d6-4000-897d-c16efd8396c9"
/>
<img width="359" alt="Capture d’écran 2025-06-04 à 12 48 44"
src="https://github.com/user-attachments/assets/d7c41039-dc15-46d7-be89-33a39e226fb2"
/>

In this PR we also fix the scrolling behavior of those two sections so
that it is more natural. The height mechanism will be properly
refactored by this issue :
https://github.com/twentyhq/twenty/issues/11766, in the mean time this
temporary modification is working :


https://github.com/user-attachments/assets/c7ddb424-66b9-41e3-a6a8-a29ece09d62e

Some components that weren't used are also removed :
`AdvancedFilterDropdownFieldSelectMenu`,
`AdvancedFilterDropdownFieldSelectMenuItem` and
`AdvancedFilterDropdownSubFieldSelectMenu`

Fixes https://github.com/twentyhq/core-team-issues/issues/1000
2025-06-05 20:50:12 +02:00
26bd16a2cb fix: favicon when workspace icon is removed (#12451)
closes #12304
2025-06-05 20:46:08 +02:00
6f156a69b0 feat: new tab list (#12384)
closes #9904

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2025-06-05 20:44:21 +02:00
a86b5fb9b2 fix(frontend): prevent command menu reopening when clicking the same field (#12390)
ressolve #12205
This PR fixes the issue where the record in the command menu was
reopening when clicking the same field again.

https://github.com/user-attachments/assets/52da7b3f-4704-4a9c-8fc4-29534568b0c0




- Added recordId to cells so it can be accessed when
useListenClickOutside is triggered, and compared the previous recordId
with the new one to prevent closing the command menu for the same
record.

- When the field is clicked, we compare the lastRecordId with the new
recordId inside the openRecordInCommandMenu function to avoid reopening
the menu unnecessarily.

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2025-06-05 20:32:46 +02:00
3f30964523 [FE] handle restricted objects 2 (#12437)
Co-authored-by: Charles Bochet <charles@twenty.com>
2025-06-05 15:49:22 +02:00
7046965496 Fix dropdown z index (#12442)
Fixes https://github.com/twentyhq/twenty/issues/11942

This PR creates two different dropdown z indexes, one for normal
dropdowns, and one for the dropdowns inside modals.
2025-06-04 11:14:56 +02:00
278a7baf5e Feat: add support for day-first and year-first date formats (DD/MM/YYYY, YYYY/MM/DD) (#12333)
Closes #12152 



https://github.com/user-attachments/assets/53640777-578f-4de8-a1f8-52d409a7582d

---------

Co-authored-by: etiennejouan <jouan.etienne@gmail.com>
2025-06-03 14:12:01 +02:00
f6bfec882a Improve lazy loading (#12393)
Creating manual chunk was a bad idea, we should always solve lazy
loading problem at the source instance.

Setting a 4.5MB for the index bundle size, CI will fail if we go above.

There is still a lot of room for optimizations!
- More agressive lazy loading (e.g. xyflow and tiptap are still loaded
in index!)
- Add a  prefetch mechanism
- Add stronger CI checks to make sure libraries we've set asides are not
added back
- Fix AllIcons component with does not work as intended (loaded on
initial load)
2025-06-01 09:33:16 +02:00
c74d7fe986 Fix hotkey scope in settings (#12387)
Too many conflicts on hotkey scopes (e.g. we still had the issue on the
graphql playground). Let's disable all shortcuts in settings.
2025-05-30 16:45:33 +02:00
630e4780b8 Fixed IconPicker infinite loop (#12356)
This PR fixes an infinite loop that was appearing on IconPicker, since
it was about setting and unsetting the hotkey scope, it wasn't really
noticeable.

The direct cause was using the mouse enter and mouse leave events to set
and unset the hotkey scope, without using a local state to prevent race
condition, so this PR just adds this local state.

Fixes https://github.com/twentyhq/twenty/issues/12344
2025-05-28 16:05:57 +02:00
d4fac6793a Left menu and chip links (#12294)
Small optimization for faster loading (gaining ~80ms - average time of a
click)

It might seem a little over-engineered but there are a lot of edge cases
and I couldn't find a simpler solution

I also tried to tackle Link Chips but it's more complex so this will be
for another PR
2025-05-28 12:32:49 +02:00
01b40e173b Refactored dropdown content and fixed all dropdown width bugs (#12334)
This PR refactors all the dropdown content wrapping mechanism across the
entire app.

It refactors the internals of the `Dropdown` component and introduces a
new generic `DropdownContent` component that is a generic wrapper used
for each dropdown.

## Why this PR ?

Because we’ve been experiencing continuous regressions for months on the
dropdown content width, with weird scrolling behaviors in some and not
in others, and every time a solution was found for a particular set of
dropdowns, it broke another set of dropdowns, which wasn’t noticed
because doing the QA of all dropdowns of the app is very difficult for
fixing an apparently small bug.

## Don’t we already have a `DropdownMenu` component ?

Indeed, this new `DropdownContent` is almost like `DropdownMenu` and
took inspiration from it but `DropdownContent` acts as a generic content
container that sets the width of the whole dropdown, whether we have a
menu or not.

## Why don’t we put it directly in Dropdown internals ?

Because the Dropdown component is using a complex logic with floating-ui
middleware to compute its position and size, and for this logic to work
correctly, it cannot be responsible for the “wanted” width of its
content, because the children components, which the dropdown is not
aware of, can request different widths after the dropdown has been
mounted.

A good example with multiple use cases inside the same dropdown can be
found in `AdvancedFilterDropdownFilterInput`

Thus, it is the responsibility of the content of the dropdown to
determine the width it wants to have.

## What is the difference with DropdownMenuItemsContainer ?

We can have multiple `DropdownMenuItemsContainer` in a dropdown,
alongside other components like `DropdownMenuSeparator` or
`DropdownMenuHeader`, and each of those components behaves differently
regarding to its width, paddings, etc. Therefore it is logical that the
`DropdownMenuItemsContainer` cannot be responsible for the whole
dropdown content width, and trying to do so has been the cause of many
regressions for months.

Now `DropdownMenuItemsContainer` is taking a width of `auto` by default,
which is the best to adapt to a parent which has a defined width.

## How do I set the width of my dropdown now ?

By passing a pixel width to the props `widthInPixels` of
`DropdownContent`, which only accepts numbers to avoid any confusion
with `auto` , `100%` or `160px` and other specific width variables.

The `dropdownWidth` props has been removed from `<Dropdown>` to avoid
any confusion.

Also the `DropdownMenuItemsContainer` is now using `auto` as its default
width to fill the available space inside `DropdownContent` .

It is highly recommended to use the enum `GenericDropdownContentWidt` to
define your width.

## Where to use this new `DropdownContent` component ?

There are two main use cases.

If the dropdown content is defined directly inline in the Dropdown
props, then it is recommended to use it here too.

On the other hand if the dropdown content is abstracted in another
component, it’s recommended to use this new component alongside the
others components like `DropdownMenuItemsContainer`.

A good rule of thumb is to place `DropdownContent` where
`DropdownMenuItemsContainer`, `DropdownMenuSearchInput`, etc. are
placed.

## What if I have a custom width ?

Just define a constant like `ICON_PICKER_DROPDOWN_CONTENT_WIDTH` and use
it with the props `widthInPixels` .

Otherwise there’s a `GenericDropdownContentWidth` enum. The default
value being `GenericDropdownContentWidth.Medium` (or 200px), which most
dropdowns use.

## QA 


Component | Comment
-- | --
AttachmentDropdown | Fixed overflowing (thanks to DropdownContent)
RecordIndexActionMenuDropdown |  
CommandMenuActionMenuDropdown |  
SupportDropdown | Fixed overflowing (thanks to DropdownContent)
MessageThreadSubscribersDropdownButton | Removed because unused
FavoriteFolderNavigationDrawerItemDropdown | Set width at Narrow
FavoriteFolderPicker |  
ViewPickerOptionDropdown |  
PageFavoriteFolderDropdown | Removed because unused
AdvancedFilterAddFilterRuleSelect |  
AdvancedFilterAddFilterRuleSelect |  
AdvancedFilterFieldSelectMenu |  
AdvancedFilterRecordFilterGroupOptionsDropdown |  
AdvancedFilterRecordFilterOperanceSelect | Set width at Narrow
AdvancedFilterLogicalOperatorDropdown | Set width at Narrow
AdvancedFilterRecordFilterOptionsDropdown |  
AdvancedFilterRootRecordFilterGroup | Fixed broken horizontal scrolling
behavior
AdvancedFilterSubFieldSelectMenu |  
AdvancedFilterDropdownFilterInput |  
ObjectFilterDropdownBooleanSelect |  
ObjectFilterDropdownCountrySelect | Fixed broken menu items container
ObjectFilterDropdownCurrencySelect | Set width to Large
ObjectFilterDropdownFilterInput |  
ObjectFilterDropdownOperandDropdown | Fixed width that was not fixed
ObjectFilterDropdownFilterInput | Fixed width that wasn’t the same for
EditableFilterChip
ObjectFilterDropdownOperandSelect | Refactored
ObjectOptionsDropdownRecordGroupFieldsContent | Added missing separator
ObjectOptionDropdownFieldsContent |  
ObjectOptionsDropdownHiddenFieldsContent |  
ObjectOptionsDropdownLayoutContent |  
ObjectOptionsDropdownLayoutOpenInContent |  
ObjectOptionsDropdownMenuContent |  
ObjectOptionsDropdownRecordGroupFieldsContent |  
ObjectOptionsDropdownRecordGroupsContent |  
ObjectOptionsDropdownRecordGroupSortContent |  
ObjectOptionsDropdownHiddenRecordGroupsContent | Removed unnecessary
DropdownMenuItemsContainer
RecordBoardColumnHeaderAggregateDropdown | Fixed overflowing (thanks to
DropdownContent)
RecordBoardColumnHeaderAggregateDropdownFieldsContent | Fixed
overflowing (thanks to DropdownContent)
RecordBoardColumnHeaderAggregateDropdownMenuContent | Fixed overflowing
(thanks to DropdownContent)
RecordBoardColumnHeaderAggregateDropdownOptionsContent | Fixed
overflowing (thanks to DropdownContent)
MultiItemFieldInput | Fixed overflowing (thanks to DropdownContent)
MultiItemFieldMenuItem |  
MultipleRecordPicker | Fixed overflowing (thanks to DropdownContent)
SingleRecordPicker |  
RecordTableColumnAggregateDropdownSubmenuContent |  
RecordTableColumnAggregateFooterMenuContent |  
RecordTableColumnHeadDropdownMenu | Fixed overflowing (thanks to
DropdownContent)
RecordTableHeaderPlusButtonContent |  
MultipleSelectDropdown | Broken width fixed
ObjectSortDropdownButton |  
RecordDetailRelationRecordsListItem |  
ConfigVariableDatabaseInput |  
ConfigVariableOptionsDropdownContent |  
SettingsObjectFieldActiveActionDropdown | Fixed overflowing (thanks to
DropdownContent)
SettingsObjectFieldDisabledActionDropdown | Set width at Narrow
SettingsObjectSummaryCard | Removed because unused
SettingsDataModelFieldSelectFormOptionRow |  
SettingsDataModelNewFieldBreadcrumbDropdown |  
SettingsObjectInactiveMenuDropDown |  
SettingsRoleAssignementWorkspaceMemberPickerDropdown |  
SettingsRolePermissionObjectLevelObjectPickerDropdownContent |  
SettingsSecurityApprovedAccessDomainRowDropdownMenu | Couldn’t test
SettingsSecuritySSORowDropdownMenu | Couldn’t test
SettingsAccountsRowDropdownMenu | Fixed overflowing (thanks to
DropdownContent)
SettingsIntegrationDatabaseConnectionSummaryCard | Couldn’t test
SettingsServerlessFunctionTablEnvironmentVariableTableRow | Deactivated
scope
MatchColumnSelectFieldSelectDropdownContent | Removed now unnecessary
width on DropdownMenuItemsContainer
MatchColumnSelectSubFieldSelectDropdownContent |  
SubMatchingSelectInput |  
CurrencyPickerDropdownSelect |  
IconPicker | Fixed overflowing (thanks to DropdownContent)
PhoneCountryPickerDropdownSelect |  
Select | Refactored to drilldown wanted width of content, in this case
it’s intended
ExpandedListDropdown |  
ShowPageAddButton | Removed because unused
MultiWorkspaceDropdownDefaultComponent |  
MultiWorkspaceDropdownThemesComponent |  
MultiWorkspaceDropdownWorkspacesListComponent |  
AdvancedFilterDropdownButton |  
EditableFilterChip |  
EditableFilterDropdownButton |  
UpdateViewButtonGroup |  
ViewBarFilterDropdown |  
ViewBarFilterDropdownFieldSelectMenu |  
ViewPickerContentCreateMode |  
ViewPickerContentEditMode |  
ViewPickerListContent |  
WorkflowEditTriggerDatabaseEventForm |  
WorkflowVariablesDropdownFieldItems |  
WorkflowVariablesDropdownObjectItems |  
WorkflowVariablesDropdownWorkflowStepItems |  
CommandMenuContextChipGroups |  
RecordBoardColumnDropdownMenu |  
MultiSelectInput |  
SelectInput |  
CustomSlashMenu |  
DropdownMenu | Removed and replaced by DropdownContent
OverlayContainer and around |  


<!-- notionvc: 1e23bdb8-2dda-4f8d-a64d-ecc829a768a2 -->

## Miscellaneous 

Side notes : 

- The `Select` component is now wrapping the `DropdownContent` because
it computes a dynamic width.
- The advanced filter dropdown has been fixed, it was broken when
resizing the window horizontally, we couldn’t scroll. This specific edge
case was taken into account when refactoring the whole dropdown content
system
- As discussed with Nitin, data-select-disable will probably be removed
entirely, so I let it as is, because right now it is not used by the
refactored d&d selection.
- Duplicate separators under DropdownMenuHeader have been removed.

Fixes : https://github.com/twentyhq/twenty/issues/12327
Fixes : https://github.com/twentyhq/core-team-issues/issues/951
2025-05-27 19:44:13 +02:00
78f8562457 fix: prevent drag selection from blocking input focus (#12322)
closes #12309
Fixes input elements becoming unusable due to drag selection preventing
default browser behavior.

**Problem:**
- Input elements couldn't receive focus because `event.preventDefault()`
was called unconditionally
- Removing `preventDefault()` broke click-outside-to-deselect
functionality

**Solution:**
- Only call `preventDefault()` when actually starting drag selection
- Preserves input focus while maintaining drag selection and deselection
behavior

**Changes:**
- Move `event.preventDefault()` inside the `shouldStartSelecting`
condition
- Update test to reflect correct behavior for disabled elements
2025-05-27 14:51:48 +02:00
a83279ddce fix(dropdown): separator width + DropdownHeader height (#12285)
## Before

![CleanShot 2025-05-26 at 15 26
35@2x](https://github.com/user-attachments/assets/d6247af2-6008-4234-b777-13597c697b12)

## After

![CleanShot 2025-05-26 at 15 26
42@2x](https://github.com/user-attachments/assets/65447c84-4313-4f9a-831d-efc1eccd3d26)
2025-05-27 11:17:03 +02:00
a15451dab2 Fix close command menu button (#12282)
Fixes #12280 

The `dataClickOutsideId` and `dataGloballyPreventClickOutside` props
weren't passed to the button components.

This PR fixes this and introduces the type `ClickOutsideAttributes`.



https://github.com/user-attachments/assets/38b1a6f9-8f3a-43d2-aa7b-aaa259ac6737
2025-05-26 15:37:46 +02:00
524a1d78d2 Refactor drag selection: Replace external library with custom implementation and add auto-scroll (#12134)
Closes #12076
Closes #11764

Replaced the `@air/react-drag-to-select` library with a custom
implementation to get better control over the selection behavior and add
auto-scroll functionality.

**What changed:**
- Removed external drag selection dependency 
- Built custom drag selection from scratch using pointer events --
@charlesBochet
- Added auto-scroll when dragging near container edges
- Fixed boundary detection so selection stays within intended areas
- Added proper `data-select-disable` support for checkboxes and other
non-selectable elements

The new implementation gives us full control over the selection logic
and eliminates the external dependency while adding the auto-scroll
feature that was **not** requested 😂

**Auto Scroll**



https://github.com/user-attachments/assets/3509966d-5b6e-4f6c-a77a-f9a2bf26049f



related to #12076 


https://github.com/user-attachments/assets/2837f80e-728c-4739-a0e2-b8d7bc83a21a

**Also fixed:**
- Record board column height not extending to the bottom (styling issue
I found while working on this)

before:

<img width="1512" alt="Screenshot 2025-05-19 at 23 58 54"
src="https://github.com/user-attachments/assets/602b310f-7ef6-44f6-99e9-da5ff59b31d3"
/>

after:

<img width="1512" alt="Screenshot 2025-05-19 at 23 56 40"
src="https://github.com/user-attachments/assets/1d0ecb5c-49e0-4f03-be3b-154a6f16a7a4"
/>

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2025-05-26 11:58:22 +02:00
1e5257f95b Fixes active row state after opening the file preview (#12264)
Fixes #12093
This bug was quite hard to fix because it was an issue with the
`AnimatePresence` component of the framer motion library.

After investigating the issue with @Devessier, here is what we
understood:

Since the modal component has an exit animation but wasn't wrapped
inside an `AnimatePresence` component, the animation seemed to never be
marked as complete when we closed the modal and the component did not
appear anymore but was still in the dom.

This caused an issue when closing the side panel because the state
cleanup function of the command menu is triggered when its closing
animation is complete. This cleanup function emits a right drawer close
event, which is listened by the record table row to update it's state.

The `onExitComplete` was never triggered because the exit animation of
the modal was never considered as complete, and since it's a children
animation of the command menu `AnimatePresence`, this animation was
never considered as complete either (see [PresenceChild
doc](https://github.com/motiondivision/motion/blob/main/packages/framer-motion/src/components/AnimatePresence/PresenceChild.tsx).

This caused the cleanup function to never be executed and the close
event to never be emitted, so the row stayed active.

Before:


https://github.com/user-attachments/assets/a165039b-6203-43d6-b992-dcfb4dfb8f2b


After:


https://github.com/user-attachments/assets/42eab2e8-62c9-4c25-85d6-78210d7ebe89
2025-05-23 16:26:30 +00:00
ec9d8e4e95 Discard empty and null links in Links fields (#12188)
This PR has several objectives:

- Ignore invalid and empty links in the frontend
- Ignore empty links when creating or updating a link field in the
backend
- Throw an error when trying to create or update a link field with an
invalid link

The logic is mostly the same in the frontend and the backend: we take
the initial primaryLink and the secondaryLinks, we discard all the empty
links (with `url === '' || url === null`), and the primaryLink becomes
the first remaining link.

## Frontend

There are three parts in the frontend where we have to remove the empty
links:

- LinksDisplay
- LinksFieldInput
- isFieldValueEmpty; used in RecordInlineCell

## Backend

I put the logic in
`packages/twenty-server/src/engine/core-modules/record-transformer/services/record-input-transformer.service.ts`
as it's used by the REST API, the GraphQL API, and by Create Record and
Update Record actions in the workflows.
2025-05-23 11:13:10 +02:00
75e4a5d19b Fixed dropdown flip and resize edge cases (#12234)
This PR fixes the dropdown resize problems we had with some edge cases,
the most common was that when opening a dropdown that is placed near the
bottom end of the screen the dropdown would shrink to a ridiculously
small height instead of flipping.

With this PR we implement a mechanism that respects all of the existing
behaviors while fixing this edge case, and most of all allows for the
incoming refactor on harmonization of dropdown content width.

Before : 



https://github.com/user-attachments/assets/6da3b291-e60c-4353-94fb-45fef55ee0e1

After : 



https://github.com/user-attachments/assets/c9fd9a34-f5de-4701-a301-08cba1eafdad

Fixes https://github.com/twentyhq/core-team-issues/issues/980
2025-05-23 11:07:47 +02:00
051f0fc83f Use data attributes for click outside instead of classNames (#12228)
We previously used classnames to exclude elements from the click outside
listener.

With this PR we can now use `data-click-outside-id` instead of
`classNames` to target the elements we want to exclude from the click
outside listener.

We can also add `data-globally-prevent-click-outside` to a component to
globally prevent triggering click outside listeners for other
components. This attribute is especially useful for confirmation modals
and snackbar items.

Fixes #11785:


https://github.com/user-attachments/assets/318baa7e-0f82-4e3a-a447-bf981328462d
2025-05-22 18:10:51 +02:00
79b4b3f783 Improve lazy loading (#12186)
WIP, using preview app to test performance (which was very bad)
2025-05-22 15:07:01 +02:00
b5544b6853 Fix timezone display + translate dates (#12147)
Fixes https://github.com/twentyhq/twenty/issues/11566 + translates dates

- Date display bug: We had an issue with date (not date time) display
depending on the timezone the user had selected. The date is stored in
the db as yyyy-mm-dd, eg. 2025-05-01 for **May 1st, 2025**. When
returned this date is formatted in a UTC DateTime at midnight, so
2025-05-1 00:00:00. Then when displaying the date we were converting
this date using the timeZone, so 2025-04-30 17:00:00, thus displaying
**April 30th, 2025**. The fix chosen is that we should not take into
account the timezone for date (not date time!) displays as we always
want to show the same date.
- Date translation: dates were not translated, not in their default
display (_May 1st, 2025_) nor in their relative display (_about a month
ago_). The lib we use for date formatting, date-fns, offers a
translation option with pre-built `Locale`s from their lib.
Unfortunately and surprisingly we cannot just use directly string locale
codes (like `fr-FR`), cf [open issue on
date-fns](https://github.com/date-fns/date-fns/issues/3660). A util was
introduced to offset this by dynamically importing the right date-fns
Locale based on the locale code.
2025-05-22 12:04:44 +00:00