Commit Graph
100 Commits
Author SHA1 Message Date
Raphaël Bosi 2f89b36693 Fix ClientConfigProviderEffect infite loop (#12472)
Fixes an infinite loop introduced by #12371

An infinite loop was triggered when there was an error when fetching the
client config.
Cause of the bug: `isLoadedOnce` wasn't set to true when catching an
error in `useClientConfig`.

This effect then created an infinite loop inside
`ClientConfigProviderEffect` because `fetchClientConfig` updated
`clientConfigApiStatus.isLoading` but not `isLoadedOnce`.

```typescript
useEffect(() => {
    if (
      !clientConfigApiStatus.isLoadedOnce &&
      !clientConfigApiStatus.isLoading
    ) {
      fetchClientConfig();
    }
  }, [
    clientConfigApiStatus.isLoadedOnce,
    clientConfigApiStatus.isLoading,
    fetchClientConfig,
  ]);
```
2025-06-05 19:38:10 +02:00
Raphaël Bosi 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
Raphaël BosiandThomas des Francs a943f9cf36 Improve documentation by adding multiple emails support (#12435)
Follow up on https://github.com/twentyhq/twenty/pull/12368

---------

Co-authored-by: Thomas des Francs <tdesfrancs@gmail.com>
2025-06-03 13:07:06 +00:00
Raphaël Bosiandguillim eed9125945 Improved participant matching with additional emails support (#12368)
# Improved participant matching with additional emails support

Closes #8991 

This PR extends the participant matching system to support additional
emails in addition to primary emails for both calendar events and
messages. Previously, the system only matched participants based on
primary emails, missing matches with secondary email addresses.

- Contact creation now consider both primary and additional emails when
checking for existing contacts
- Calendar and message participant listeners now handle both primary and
additional email changes
- Added tests

## To test this PR:

Check that:
- Primary emails take precedence over additional emails in matching
- Case-insensitive email comparisons work correctly
- A contact is not created if a person already exists with the email as
its additional email
- Event listeners handle both creation and update scenarios
- Matching and unmatching logic works for complex email change scenarios
- When unmatching after a change in a primary or secondary email, events
and messages should be rematched if another person has this email as its
primary or secondary email.

---------

Co-authored-by: guillim <guigloo@msn.com>
2025-06-03 14:36:56 +02:00
Raphaël Bosi 70cc3e75fe Eliminate unnecessary API calls when persisting field (#12429)
Fixes #10177

Modified `usePersistField` to check for deep equality between the value
to persist and the current record store value before sending an update
query.
2025-06-03 12:20:57 +02:00
Raphaël Bosi c7b8df428f Don't overwrite SELECT fields at draft (#12413)
Fixes https://github.com/twentyhq/twenty/issues/12328
2025-06-02 15:33:57 +02:00
Raphaël Bosi f0d85ea868 Fix auth modal closing hotkey scopes (#12407)
The auth modal is a particular modal because it is the only one that is
opened in an effect (because its opening depends on the location).

After the hotkey scopes and the modal refactoring, we are now force to
call `openModal` and `closeModal` to open and close the modals. Here,
the `closeModal` wasn't called, but the modal was simply unmounted. The
global hotkeys were then disabled because the modal was still in the
focus stack.

Fixes
[#1052](https://github.com/twentyhq/core-team-issues/issues/1052#event-17916955590)
2025-06-02 13:42:08 +02:00
Raphaël Bosi d85c45a4cf Fix last row disappearing when dragging a row in the table (#12297)
# Fix last row disappearing when dragging a row in the table

Fixes https://github.com/twentyhq/core-team-issues/issues/836

The issue came from the fact that the provided placeholder was not
mounted at the right place (after the footer when it should be mounted
before it).

I created a context to which we can pass the placeholder. We can use
this placeholder anywhere inside the table by using
`RecordTableBodyDroppablePlaceholder`.

## Before


https://github.com/user-attachments/assets/39a2e45b-6d97-4450-bfee-12135a873a1d


## After


https://github.com/user-attachments/assets/ca126819-67f2-4358-b644-85172fef3b8f
2025-05-27 12:02:24 +02:00
Raphaël Bosi 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
Raphaël Bosi 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
Raphaël Bosi 5da446d7f7 Display "Untitled" in MultipleRecordPicker (#12246)
Fixes #11940 

Display untitled with the object name for untitled records in
`MultipleRecordPicker`:

![CleanShot 2025-05-23 at 11 29
20@2x](https://github.com/user-attachments/assets/062df33c-5c7a-4170-a973-8a1fc1b04729)
2025-05-23 14:51:16 +02:00
Raphaël Bosi 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
Raphaël BosiandLucas Bordeau ffdedf7af3 Fix "PageChangeEffect does not run when changing view on the same object" (#12196)
Fixes https://github.com/twentyhq/core-team-issues/issues/950

This issue was due to the memoization inside `useIsMatchingLocation`,
which was rerendered only if the pathname changed but not the search
params.

After discussion with @lucasbordeau, we decided to remove the hook
`useIsMatchingLocation` and to create an equivalent util function which
takes the location as an argument.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2025-05-22 12:06:07 +02:00
Raphaël Bosi 342583e891 Fix stacking multiple time the same record in the side panel (#12192)
Fixes #12043 

This bug had two distinct root causes:
- The command menu closing wasn't triggering correctly because of a
hotkey scope issue. We reset the hotkey scope to record index inside
`useLeaveTableFocus` but we should do it only when needed
- The portal on top of the table cell didn't stop the propagation of the
click so the table cell was opened twice (once in the portal and once in
the underlying cell)

Before:


https://github.com/user-attachments/assets/16c41135-fff9-4f89-a512-6a7c0e143190


After:


https://github.com/user-attachments/assets/865b6063-5f82-4f44-b0c8-d03f5955d685
2025-05-22 11:13:20 +02:00
Raphaël Bosi c982bcdb52 Introduce focus stack to handle hotkeys (#12166)
# Introduce focus stack to handle hotkeys

This PR introduces a focus stack to track the order in which the
elements are focused:
- Each focused element has a unique focus id
- When an element is focused, it is pushed on top of the stack
- When an element loses focus, we remove it from the stack 

This focus stack is then used to determine which hotkeys are available.
The previous implementation lead to many regressions because of race
conditions, of wrong order of open and close operations and by
overwriting previous states. This implementation should be way more
robust than the previous one.

The new api can be incrementally implemented since it preserves
backwards compatibility by writing to the old hotkey scopes states.
For now, it has been implemented on the modal components.

To test this PR, verify that the shortcuts still work correctly,
especially for the modal components.
2025-05-21 15:52:40 +02:00
Raphaël Bosi b70119dbe6 Fix modal click outside (#12120)
Fixes https://github.com/twentyhq/twenty/issues/12111

The bug occurred because in
https://github.com/twentyhq/twenty/pull/12062, I changed the click
outside mode of the modal from compare pixels to compare html ref. This
happens because the modal is in a portal, so the `compareHTMLRef`
doesn't work.

A bug already existed before but since the mode was compare pixel, it
only happened when a dropdown was overflowing from the modal:


https://github.com/user-attachments/assets/e34bfaca-dd21-46e5-a532-a66ba494889d

I commented the tests `CancelButtonClick`, and `ConfirmButtonClick`
because they don't work with compare pixel mode (the `userEvent.click()`
creates a `MouseEvent` with `clientX`=0 and `clientY`=0 so it triggers
the click outside listener even when the story tiggers a click on an
element inside a modal)

We should find a way to make the ClickOutsideMode `compareHTMLRef` work
with portals. I believe the `comparePixels` mode was used as a hacky way
to get around this problem (hacky because of the existing bug above).
2025-05-19 15:04:04 +02:00
Raphaël Bosi e48b84f241 Fix hidden copy button on production build for text fields (#12099)
Fixes #11762

The `copy-button` classname from scalar was overwritting the style of
our copy button. It only happened in production build and not with `npx
nx run twenty-front:start` so it was quite hard to catch. Thanks
@charlesBochet for finding the root cause.

- Removed `copy-button` classname since it was unused
- Added `?inline` when importing scalar css to have inline css

Before:
<img width="210" alt="Capture d’écran 2025-05-16 à 17 43 50"
src="https://github.com/user-attachments/assets/7256b5e6-0b61-4590-a4de-d6b28ab2b4ed"
/>

After:
<img width="230" alt="Capture d’écran 2025-05-16 à 17 43 32"
src="https://github.com/user-attachments/assets/a763172b-0566-413d-bbdd-470f28097ae4"
/>
2025-05-16 18:29:42 +02:00
Raphaël Bosi 455615b14c Fix drag selection on table make rows bigger (#12096)
Fixes [#12036](https://github.com/twentyhq/twenty/issues/12036)
2025-05-16 17:15:24 +02:00
Raphaël Bosi 6554947671 Modal API Refactoring (#12062)
# Modal API Refactoring

This PR refactors the modal system to use an imperative approach for
setting hotkey scopes, addressing race conditions that occurred with the
previous effect-based implementation.

Fixes #11986
Closes #12087

## Key Changes:

- **New Modal API**: Introduced a `useModal` hook with `openModal`,
`closeModal`, and `toggleModal` functions, similar to the existing
dropdown API
- **Modal Identification**: Added a `modalId` prop to uniquely identify
modals
- **State Management**: Introduced `isModalOpenedComponentState` and
removed individual boolean state atoms (like
`isRemoveSortingModalOpenState`)
- **Modal Constants**: Added consistent modal ID constants (e.g.,
`FavoriteFolderDeleteModalId`, `RecordIndexRemoveSortingModalId`) for
better maintainability
- **Mount Effects**: Created mount effect components (like
`AuthModalMountEffect`) to handle initial modal opening where needed

## Implementation Details:

- Modified `Modal` and `ConfirmationModal` components to accept the new
`modalId` prop
- Added a component-state-based approach using
`ModalComponentInstanceContext` to track modal state
- Introduced imperative modal handlers that properly manage hotkey
scopes
- Components like `ActionModal` and `AttachmentList` now use the new
`useModal` hook for better control over modal state

## Benefits:

- **Race Condition Prevention**: Hotkey scopes are now set imperatively,
eliminating race conditions
- **Consistent API**: Modal and dropdown now share similar patterns,
improving developer experience

## Tests to do before merging:

1. Action Modals (Modal triggered by an action, for example the delete
action)

2. Auth Modal (`AuthModal.tsx` and `AuthModalMountEffect.tsx`)
   - Test that auth modal opens automatically on mount
   - Verify authentication flow works properly

3. Email Verification Sent Modal (in `SignInUp.tsx`)
   - Verify this modal displays correctly

4. Attachment Preview Modal (in `AttachmentList.tsx`)
   - Test opening preview modal by clicking on attachments
   - Verify close, download functionality works
   - Test modal navigation and interactions

5. Favorite Folder Delete Modal (`CurrentWorkspaceMemberFavorites.tsx`)
   - Test deletion confirmation flow
- Check that modal opens when attempting to delete folders with
favorites

6. Record Board Remove Sorting Modal (`RecordBoard.tsx` using
`RecordIndexRemoveSortingModalId`)
- Test that modal appears when trying to drag records with sorting
enabled
   - Verify sorting removal works correctly

7. Record Group Reorder Confirmation Modal
(`RecordGroupReorderConfirmationModal.tsx`)
   - Test group reordering with sorting enabled
   - Verify confirmation modal properly handles sorting removal

8. Confirmation Modal (base component used by several modals)
   - Test all variants with different confirmation options

For each modal, verify:
- Opening/closing behavior
- Hotkey support (Esc to close, Enter to confirm where applicable)
- Click outside behavior
- Proper z-index stacking
- Any modal-specific functionality
2025-05-16 15:04:22 +00:00
Raphaël Bosi 8ef9109925 Fix table click outside (#12038)
Fixes #12037 
Follow up on #12011

Make `RecordTableBodyFocusClickOutsideEffect` also be available for
`RecordIndexHotkeyScope.RecordIndex`
2025-05-14 13:08:06 +00:00
Raphaël Bosi 0766e73fc4 Fix filtering on grouped table view (#12029)
# Fix filtering on grouped table view

Fixes #11776 
This PR fixes the filtering issue on the grouped by column in the table.
State filters were overwritten by group filters.

- Implemented a new `combineFilters` utility function that properly
merges multiple filter objects using AND logic
- Added tests
- Modified `useFindManyRecordIndexTableParams` to use the new utility
instead of directly merging filter objects

## Before


https://github.com/user-attachments/assets/45d51535-ecbc-4cfd-b523-37e72aafc723


## After


https://github.com/user-attachments/assets/70416779-9a9c-4972-82ed-73ad98b0234f
2025-05-14 13:30:37 +02:00
Raphaël Bosi e835e0ad64 Fix UI not being refreshed after grouping by None in the table (#12013)
Fixes https://github.com/twentyhq/twenty/issues/11719

Before:


https://github.com/user-attachments/assets/9350d20c-e782-4bf4-9e24-bc7dd7f3d03b


After:


https://github.com/user-attachments/assets/d452fd54-63f7-4519-b70f-5c380b7dd8da
2025-05-14 08:14:19 +00:00
Raphaël Bosi dfe8011948 Fix side panel click outside (#12011)
Fixes https://github.com/twentyhq/twenty/issues/11988

## Description

The issue came from `RecordTableBodyFocusClickOutsideEffect`.
When clicking outside the table with the side panel opened, two click
outside listeners were triggered: the one which closes the side panel
and the one which leaves the table focus. There was a race condition and
the leave table focus was executed first, changing the hotkey scope. The
side panel closure wasn't executed because the hotkey scope was wrong.

## Fix
Only leave the table focus if the hotkey scope is `TableFocus`


## Videos

Before:


https://github.com/user-attachments/assets/0ea666a6-c212-4b94-b89b-49211d18a13b


After:


https://github.com/user-attachments/assets/2ec6d593-ff65-4cbf-ac92-a0cfbd7dfd8b
2025-05-13 17:56:04 +02:00
Raphaël Bosi 4d352cb4e4 Keyboard Navigation and Shortcuts Implementation on the board (#11930)
# Keyboard Navigation and Shortcuts Implementation on the board

This PR implements keyboard navigation and shortcuts for the Record
Board component, enabling users to navigate and interact with board
cards using keyboard inputs.

## Key changes

### Navigation Architecture
- Added `useBoardCardNavigation` hook for directional navigation (arrow
keys)
- Implemented scroll behavior to automatically focus visible cards
- Created card focus/active states with component-level management

### State Management
- Added new component states: `focusedBoardCardIndexesComponentState`,
`activeBoardCardIndexesComponentState`,
`isBoardCardActiveComponentFamilyState`
- Extended index tracking with column/row position indicators
- Create hooks to manage these states

### Hotkey Implementation
- Created new `RecordBoardHotkeyEffect` component for hotkey handling
- Added `BoardHotkeyScope`
- Implemented Escape key handling to clear selections
- Replaced table-specific `TableHotkeyScope` with more generic
`RecordIndexHotkeyScope`. This is because, before, the hotkey scope was
always set to Table inside the page change effect, and we used the table
hotkey scope for board shortcuts, which doesn't make a lot of sense.
Since we don't know upon navigation on which type of view we are
navigating, I introduced this generic hotkey scope which can be used on
the table and on the board.

### Page Navigation Integration
- Modified `PageChangeEffect` to handle both table and board view types
- Added cleanup for board state upon navigating away from record pages

### Component Updates
- Updated `RecordBoardColumn` to track indexes for position-based
navigation
- Added `RecordBoardScrollToFocusedCardEffect` for auto-scrolling to
focused cards
- Added `RecordBoardDeactivateBoardCardEffect` for cleanup

This implementation maintains feature parity with table row navigation
while accounting for the 2D navigation needs of the board view.

## New behaviors

### Arrow keys navigation


https://github.com/user-attachments/assets/929ee00d-2f82-43b9-8cde-f7bc8818052f


### Record selection with X


https://github.com/user-attachments/assets/0b534c4d-2865-43ac-8ba3-09cb8c121f06


### Command + Enter opens the record


https://github.com/user-attachments/assets/0df01d1c-0437-4444-beb1-ce74bcfb91a4


### Escape unselect the records and unfocus the card



https://github.com/user-attachments/assets/e2bb176b-b6f7-49ca-9549-803eb31bfc23
2025-05-12 19:02:14 +02:00
Raphaël Bosi c726a7d524 Fix input width (#11897)
Fixes #11742. The bug introduced by
https://github.com/twentyhq/twenty/pull/11536
2025-05-06 18:43:53 +02:00
Raphaël Bosi b3f5a3f75f Record Table Row Navigation (#11879)
# Record Table Row Navigation

This PR improves the table accessibility by adding a row navigation and
new shortcuts to the table. Closes #896.

# Introduce focused active row states on the table

This PR implements the focused and active row states feature for the
record table, allowing users to navigate through the table with keyboard
arrows and providing visual feedback for selection.

## Implementation details:

- Added new component states to track focused and active row positions
and states.

- Implemented dedicated hooks for row state management

- Updated UI styling for active and focused rows:
  - Applied blue border (Adaptive Colors Blue 3)
  - Added highlight background (Accent Quaternary)
  - Added styling for focused rows to clearly indicate selection state

- Added row state cleanup:
- `RecordTableDeactivateRecordTableRowEffect` component to reset states
  - Added row state reset logic upon navigation

## Bug fixes
- Fixed record table unselection in the page change effect
- Fixed a hack introduced by
https://github.com/twentyhq/twenty/pull/8489 which duplicated the last
table column

# Shortcuts

## Arrow keys and J+K navigation


https://github.com/user-attachments/assets/6b46f6b5-cd98-4053-aaef-f8bf2b9584b5


## Record selection with X


https://github.com/user-attachments/assets/44ab7397-e00c-4dfe-8dd1-b3ffc53b3e5f


## Enter allows for cell navigation, Escape goes back to row navigation


https://github.com/user-attachments/assets/890d7e25-2d81-47e3-972f-043a1879b8cc


## Command + Enter opens the record



https://github.com/user-attachments/assets/cf8cdbd5-7cf0-4d78-909f-dc6be88b9e25
2025-05-06 12:52:05 +00:00
Raphaël Bosi 7be56862e4 Fix object metadata not found for id (#11777)
Fixes https://github.com/twentyhq/twenty/issues/11668

Fixed an error due to falling back to the main context store object
metadata when the one in the context store wasn't defined.

When closing the command menu, the
`contextStoreCurrentObjectMetadataItemIdComponentState` is reset, but
the ActionMenuContextProvider was falling back to the main context store
object metadata id, so the action components were mounted. But they
still tried to access the
`contextStoreCurrentObjectMetadataItemIdComponentState` which is
`undefined`, which lead to an error being thrown.

Fix:
- Removed the fallback to the main context store object metadata item
2025-04-28 18:18:15 +02:00
Raphaël Bosi 6cf44ef3c2 Fix open record in menu (#11772)
Fix open record in menu
2025-04-28 16:39:44 +02:00
Raphaël BosiandLucas Bordeau f201091c68 512 Ability to navigate dropdown menus with keyboard (#11735)
# Ability to navigate dropdown menus with keyboard

The aim of this PR is to improve accessibility by allowing the user to
navigate inside the dropdown menus with the keyboard.
This PR refactors the `SelectableList` and `SelectableListItem`
components to move the Enter event handling responsibility from
`SelectableList` to the individual `SelectableListItem` components.
Closes [512](https://github.com/twentyhq/core-team-issues/issues/512)

## Key Changes:
- All dropdowns are now navigable with arrow keys

## Technical Implementation:
- Each `SelectableListItem` now has direct access to its own `Enter` key
handler, improving component encapsulation
- Removed the central `Enter` key handler logic from `SelectableList`
- Added `SelectableList` and `SelectableListItem` to all `Dropdown`
components inside the app
- Updated all component implementations to adapt to the new pattern:
  - Action menu components (`ActionDropdownItem`, `ActionListItem`)
  - Command menu components
  - Object filter, sort and options dropdowns
  - Record picker components
  - Select components

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2025-04-25 18:55:39 +02:00
Raphaël Bosi 5207836566 Table hover and click outside fixes (#11737)
# Table hover and click outside fixes

This PR improves table interaction behavior by refining cell hover
states and click-outside handling in the record table component.

## Changes

### Click Outside Handling
- Removed conditional rendering of
`RecordTableBodyFocusClickOutsideEffect`

### Hover State Management
Implemented hover state cleanup in multiple components:
- Added `recordTableHoverPosition` state reset in `useLeaveTableFocus`
hook
- Integrated mouse leave handler in `RecordTableBodyDroppable` to clear
hover position

### Fixes double focus bug
- Reset the focus and the hover when the table data changes

## Videos

### Before


https://github.com/user-attachments/assets/f815b65c-c545-4841-a0d9-04c58771e69f

### After


https://github.com/user-attachments/assets/046cc7df-18b8-46ca-b2cc-bdfa3125311b
2025-04-25 16:50:48 +02:00
Raphaël Bosi 4a61956087 Fixes on record title input (#11720)
- Fix record creation title cell opening
- Fix full name input hotkey scope
2025-04-24 15:29:21 +02:00
Raphaël Bosi 87083cb414 834 Design Adjustments for the Record Page Breadcrumb (#11670)
# Design Adjustments for the Record Page Breadcrumb

Closes [834](https://github.com/twentyhq/core-team-issues/issues/834)
and [826](https://github.com/twentyhq/core-team-issues/issues/826)

## Description

- Added the breadcrumb to every object (not just the workflows)
- Fixed spacings
- Changed icon color from primary to tertiary for proper visual
hierarchy
- Displayed pagination information (current/total)
- Close button has been removed to simplify the UI
- Navigate to index page when the breadcrumb is clicked
- Fixed problems when two record title cells were displayed at the same
time (in the header and in the record page)

## Before

<img width="247" alt="Capture d’écran 2025-04-22 à 12 15 34"
src="https://github.com/user-attachments/assets/5ca2aca7-ffb0-49ea-8d3a-4bd621d78f8d"
/>

## After

<img width="233" alt="Capture d’écran 2025-04-22 à 12 15 06"
src="https://github.com/user-attachments/assets/cbcb5dfe-d616-47c9-8017-71dd4d388534"
/>
2025-04-22 13:52:56 +02:00
Raphaël Bosi 251a7b126b 838 design adjustments on table kanban and inline fields (#11654)
Closes [#838]( https://github.com/twentyhq/core-team-issues/issues/838)
Design adjustments on table kanban and inline fields.

The table row border selection will be done later since it is harder
than initially thought.
2025-04-22 11:15:53 +02:00
Raphaël Bosi dd0ea2366f 839 Table focus refactoring (#11629)
# Table Focus Refactoring

This pull request implements the table focus refactoring requested in
[#839](https://github.com/twentyhq/core-team-issues/issues/839),
dissociating hover and focus behaviors in the table component to improve
keyboard navigation.

## Technical Implementation

- Created separate component states to handle focus and hover
independently.
- Updated all relevant hooks and functions to use the new focus
mechanism.
- Removed deprecated states and hooks.
- Introduced dedicated portal components to improve the table
performance (the table cells are much simpler and the more complex logic
is handled via the portals)

## Key Behavior Changes

- Performance improvements
- Focus is now handled exclusively with keyboard navigation
- Clicking on a cell or inline-cell now sets the focus to that cell
- Hover state is managed separately from focus, improving user
experience and accessibility
- The table scrolls when the focused cell changes

## Video



https://github.com/user-attachments/assets/9966beac-3b0f-4433-a87a-299506d83353
2025-04-17 16:40:24 +00:00
Raphaël Bosi 8f2dddaa5f Create stories for action display components (#11547)
Create stories for:
- ActionButton
- ActionComponent
- ActionDisplay
- ActionDropdownItem
- ActionListItem
2025-04-14 18:42:49 +02:00
Raphaël BosiandCharles Bochet ace515eea7 Fix workflow with manual triggers and no selection not appearing in the command menu (#11544)
Fix workflow with manual triggers and no selection not appearing in the
command menu

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2025-04-14 11:03:29 +02:00
Raphaël Bosi c8011da4d7 Fix title input hotkey scope (#11530)
Before:


https://github.com/user-attachments/assets/e0be8247-6d3e-49d0-8595-76f9547bf354


After:


https://github.com/user-attachments/assets/ae23b01b-3ad7-4b90-b4ae-ce604d984d73
2025-04-11 14:22:31 +02:00
Raphaël BosiandCharles Bochet 446919bc72 Remove onboarding flashes + close all dropdowns on CommandMenu close (#11483)
## Remove onboarding flashes

Tested:
- sign in with credentials
- sign in with social oAuth
- sign up with credentials
- multidomain
- single domain
- reset password

No more flashes, and code logic simplified!

## Close all dropdowns on CommandMenu close

Before:


https://github.com/user-attachments/assets/244ff935-3d40-47d5-a097-12d4cc3810dd


After:


https://github.com/user-attachments/assets/1de692f8-5032-404a-be74-025ebca67138

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2025-04-11 14:15:14 +02:00
Raphaël Bosi 637a7f0e64 Fix workflow dropdown hotkey scope (#11518)
The hokey scope was set on focus of the outermost container of the field
inputs. When clicking on a dropdown inside this container, the hokey
scope was set first by the dropdown and then by the focused container.
This led to the previous hotkey scope being overwritten.
The fix consists in moving the hokey scope setter on focus to the inner
container.

Before:


https://github.com/user-attachments/assets/12538c5b-43ab-4b76-a867-7eda6992b1ea


After:


https://github.com/user-attachments/assets/002fedba-010c-41e9-bec6-d5d80cb2dcc5
2025-04-11 09:07:36 +00:00
Raphaël Bosi b84a31cb8a Create open side panel page action (#11481)
Closes https://github.com/twentyhq/core-team-issues/issues/697
2025-04-10 11:34:34 +02:00
Raphaël Bosi 4a4ce9a6fe Fix PageHeaderToggleCommandMenuButton (#11496)
This PR fixes a bug introduced by
https://github.com/twentyhq/twenty/pull/11470

Before:


https://github.com/user-attachments/assets/8c1b8114-591f-4b58-a177-551c4f0dfb98

After:


https://github.com/user-attachments/assets/b93aa498-2ae8-4001-b541-372866d24f54
2025-04-10 11:29:45 +02:00
Raphaël Bosi 9e0402e691 Action menu refactoring (#11454)
# Description

Closes [#696](https://github.com/twentyhq/core-team-issues/issues/696)

- `useAction` hooks have been removed for all actions
- Every action can now declare a react component
- Some standard action components have been introduced: `Action`,
`ActionLink` and `ActionModal`
- The `ActionDisplay` component uses the new `displayType` prop of the
`ActionMenuContext` to render the right component for the action
according to its container: `ActionButton`, `ActionDropdownItem` or
`ActionListItem`
- The `ActionDisplayer` wraps the action component inside a context
which gives it all the information about the action
-`actionMenuEntriesComponenState` has been removed and now all actions
are computed directly using `useRegisteredAction`
- This computation is done inside `ActionMenuContextProvider` and the
actions are passed inside a context
- `actionMenuType` gives information about the container of the action,
so the action can know wether or not to close this container upon
execution
2025-04-09 13:12:49 +00:00
Raphaël Bosi ad2357a6fd Fix error when workflows aren't enabled (#11388)
Fix Uncaught Error: Workflow is not enabled. If you want to use it,
please enable it in the lab.
<img width="505" alt="erroractionmenu"
src="https://github.com/user-attachments/assets/66e60219-20fb-4b00-90e4-d6bd640be774"
/>

This error was due to using the hook `useWorkflowWithCurrentVersion`
outside of a workflow object. Adding a skip parameter wasn't enough
because the `useFindOneRecord` uses `useObjectMetadataItem` which throws
if workflows aren't enabled.
2025-04-04 14:26:19 +02:00
Raphaël Bosi 1240d39f56 Introduce hooks to retrieve directly the registered actions without using actionMenuEntriesComponentState (#11359)
Introduce two hooks:
- `useRegisteredRecordActions`
- `useRegisteredRecordAgnosticActions`

These hooks will be used to read directly the registered actions
according to the context.
We will stop to rely on `actionMenuEntriesComponentState` to improve
performances and reduce state copies and updates.

This PR is part of
https://github.com/twentyhq/core-team-issues/issues/683, and at this
step, we still save the actions inside
`actionMenuEntriesComponentState`.
2025-04-03 10:25:42 +02:00
Raphaël Bosi 5e905180c8 690 extract shouldberegistered from the useaction hooks (#11355)
Closes https://github.com/twentyhq/core-team-issues/issues/690

This PR is the first part of a refactoring on the actions system
https://github.com/twentyhq/core-team-issues/issues/683. It:
- Removes `shouldBeRegistered` from the useAction hook
- Instead `shouldBeRegistered` becomes a function to which we can pass
parameters which describe the context of the app (the object, the
selected record, information about favorites ...). It returns a boolean.
- `useShouldActionBeRegisteredParams` returns the parameters to pass to
the `shouldBeRegistered`
- Introduces a way to inherit actions from the default config and to
overwrite its properties, closing
https://github.com/twentyhq/core-team-issues/issues/72

Some tests testing if an action was registered correctly have been
removed, we should add them back at the end of the global refactoring.
2025-04-02 17:58:14 +02:00
Raphaël Bosi a24e96ae0e 685 Move all navigation actions inside the actions configs (#11303)
Move all navigation actions inside the actions configs
2025-04-01 11:23:28 +02:00
Raphaël Bosi 352cf3d38e Update previousHotkeyScopeState to be a family state (#11270)
Fixes #11259
2025-03-28 17:59:05 +01:00
Raphaël Bosi b1c57edc90 Display a tooltip for actions without short labels (#11243)
- Merge `RecordIndexActionMenuButtons` and `RecordShowActionMenuButtons`
into a single component `PageHeaderActionMenuButtons`
- Display tooltip after 1s for actions without short labels


https://github.com/user-attachments/assets/7649bed8-a1a9-4c1d-8fbe-f1bf3a51db56
2025-03-28 11:01:55 +01:00
Raphaël Bosi f145862cf1 Design fixes on show page (#11221)
- Fixes record inline cell height
- Fixes notes body empty state
2025-03-27 17:03:06 +01:00
Raphaël Bosi 1860768b52 Create 'Hide deleted records' action (#11198)
This PR:
- Makes 'See deleted records' action unavailable when the deleted filter
is active
- Creates 'Hide deleted records'



https://github.com/user-attachments/assets/b45f8ead-d973-418d-afba-a5983ac85172
2025-03-26 17:59:59 +01:00
Raphaël Bosi 3660bec01d New TitleInput UI component for side panel (#11192)
# Description

I previously introduced the `RecordTitleCell` component, but it was
coupled with the field context, so it was only usable for record fields.
This PR:
- Introduces a new component `TitleInput` for side panel pages which
needed to have an editable title which wasn't a record field.
- Fixes the hotkey scope problem with the workflow step page title
- Introduces a new hook `useUpdateCommandMenuPageInfo`, to update the
side panel page title and icon.
- Fixes workflow side panel UI
- Adds jest tests and stories

# Video



https://github.com/user-attachments/assets/c501245c-4492-4351-b761-05b5abc4bd14
2025-03-26 17:31:48 +01:00
Raphaël Bosi b24046b1bb Various design fixes on side panel (#11165)
- Fix background color
- Fix Menu Item height
- Fix Input design
- Fix show page summary card design
2025-03-25 15:21:10 +00:00
Raphaël Bosi f3f4dd7648 Fix record page title focus (#11145)
Fix record page title focus when creating a new record.

Before:


https://github.com/user-attachments/assets/3f032873-ef5b-4799-a6b7-6459674e4347


After:


https://github.com/user-attachments/assets/7ca4107d-cea8-477d-9e6a-2b74c3121a13
2025-03-25 11:54:29 +01:00
Raphaël Bosi fd23a6e5ff Update delete record message (#11132)
Update delete record message
2025-03-24 20:22:05 +01:00
Raphaël Bosi bc1b55ddc3 Add see runs and see workflows actions (#11131)
On default objects:
- Add see workflows

On workflows:
- Add see all runs (no selection)

On workflow runs:
- Add see workflows (no selection)
- Add see linked workflow (single record selection)
- Add see run version (single record selection)

On workflows versions
- Add see all runs (no selection)
- Add see workflows (no selection)
- Add see linked workflow (single record selection)
- Add see linked runs (single record selection)
2025-03-24 18:12:32 +01:00
Raphaël Bosi 0084946b76 608 fix hotkey scope and dropdown issues in the command menu (#11121)
Closes https://github.com/twentyhq/core-team-issues/issues/608

- Introduces a new hotkey scope `CommandMenuFocused`
- Fixes hotkey scopes issues in the side panel
2025-03-24 14:34:09 +00:00
Raphaël Bosi 3328998e61 Remove hotkey scope from useListenClickOutside (#11098)
The old `useListenClickOutside` API allowed us to pass a hotkeyScope as
a parameter, the click outside was triggered only if the current hotkey
scope matched the parameter. We don't want this anymore. This fixes a
few bugs related to hotkey scopes inside the side panel.
2025-03-21 16:27:58 +01:00
Raphaël Bosi d7dabe5826 Update timeline empty state in the side panel (#11093)
Fixes https://github.com/twentyhq/twenty/issues/10914

Before:


https://github.com/user-attachments/assets/83764543-06bf-455e-8b07-fa2822691005


After:


https://github.com/user-attachments/assets/09afa15d-6352-4024-a6b9-2cccf5991d8a
2025-03-21 15:30:14 +01:00
Raphaël Bosi cecb32cd89 Fixes on rich text editor (#11087)
- Update skeleton loader padding and make it take only one line
- Update rich text editor padding to align with the fields inside the
side panel
<img width="163" alt="Capture d’écran 2025-03-21 à 11 57 00"
src="https://github.com/user-attachments/assets/5964404a-3a32-4d7e-b96f-3377949430bf"
/>
2025-03-21 13:49:39 +01:00
Raphaël Bosi 3af5cde170 Reorder commands (#11084)
Put workflows on top of navigation commands in the command menu.
2025-03-21 11:10:30 +01:00
Raphaël Bosi 70a295641d Fix overscroll behavior on dev environment (#11080)
Before:


https://github.com/user-attachments/assets/c04e8d5d-cfa2-4d62-a4c6-39041c8b61c8


After:


https://github.com/user-attachments/assets/953b31b4-9388-43ed-9279-2bc0a73b24dc
2025-03-20 22:44:43 +01:00
Raphaël Bosi 7dac60cfee Fix useFindManyRecords withSoftDeleterFilter (#11056)
Fixes #11038

# Fix useFindManyRecords withSoftDeleterFilter

The error came from a faulty implementation of the `withSoftDeleted`
parameter inside `useFindManyRecords` and from the fact that
`withSoftDeleted: true` was added to access deleted records actions.
However, this parameter was always set in
`useFindManyRecordsSelectedInContextStore` instead of considering
whether the filter was active or not.

```
const withSoftDeleterFilter = {
  or: [{ deletedAt: { is: 'NULL' } }, { deletedAt: { is: 'NOT_NULL' } }],
};
```

The final filter was incorrectly doing an `or` operation between the
base filter and `withSoftDeleterFilter` when it should have been an
`and`:

```
filter: {
  ...filter,
  ...(withSoftDeleted ? withSoftDeleterFilter : {}),
}
```

The correct implementation should be:

```
filter:
  filter || withSoftDeleted
    ? {
        and: [
          ...(filter ? [filter] : []),
          ...(withSoftDeleted ? [withSoftDeleterFilter] : []),
        ],
      }
    : undefined,
```

# Fix useFindManyRecordsSelectedInContextStore

- Check if the soft deleted filter is active before using the
`withSoftDeleterFilter` parameter
2025-03-20 16:27:55 +01:00
Raphaël Bosi 7fe81f28b7 Update CommandMenuContextChipRecordSetterEffect to use the cache (#11043)
Closes https://github.com/twentyhq/core-team-issues/issues/581

Get records from the cache directly instead of querying them.
2025-03-19 18:21:06 +01:00
Raphaël Bosi cfdb3f5778 584 Refactor Tabs (#11008)
Closes https://github.com/twentyhq/core-team-issues/issues/584

This PR:
- Migrates the component state `activeTabIdComponentState` from the
deprecated V1 version to V2.
- Allows the active tab state to be preserved during navigation inside
the side panel and reset when the side panel is closed.
- Allows the active tab state to be preserved when we open a record in
full page from the side panel


https://github.com/user-attachments/assets/f2329d7a-ea15-4bd8-81dc-e98ce11edbd0


https://github.com/user-attachments/assets/474bffd5-29e0-40ba-97f4-fa5e9be34dc2
2025-03-19 15:53:22 +00:00
Raphaël Bosi b4412ab3c8 Fix workflow id not being set (#10989)
The workflow id was not set inside `WorkflowRunVisualizerEffect` and
`WorkflowVersionVisualizerEffect` this PR fixes this
2025-03-18 17:00:56 +01:00
Raphaël Bosi 2680f1d6be 583 refactor useCommandMenu hook (#10984)
Closes https://github.com/twentyhq/core-team-issues/issues/583

- Split hook into smaller hooks
- Create tests
2025-03-18 15:37:28 +01:00
Raphaël Bosi 428499e222 598 remove favorites actions from pinned actions on workflows and add see runs (#10946)
Closes https://github.com/twentyhq/core-team-issues/issues/598
- Add export single run action
- Add export single version action
2025-03-17 15:45:20 +01:00
Raphaël BosiandFélix Malfait 794110f9dd Fix wrong font in chips and tabs (#10825)
Fix wrong font in chips and tabs

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
2025-03-13 14:44:04 +01:00
Raphaël Bosi 9f9302136f Fix command O delete action on record page (#10820)
There were two issues, the hotkey scope wasn't set properly when opening
the dropdown with the shortcut and we didn't close the command menu upon
completion of the delete action.

Before:


https://github.com/user-attachments/assets/817442ae-6db4-4fc5-a637-4e2e3d9b9b70


After:


https://github.com/user-attachments/assets/b6fd07f6-6c2f-4b29-9162-f29b661ad358
2025-03-13 08:09:49 +01:00
Raphaël Bosi 3eb1aa1b5a Fix alignment and background icon color on record page header (#10817)
Before:
<img width="501" alt="Capture d’écran 2025-03-12 à 17 23 58"
src="https://github.com/user-attachments/assets/b9f58bc1-61e5-4a6b-905d-76eeb63f88be"
/>

After:
<img width="499" alt="Capture d’écran 2025-03-12 à 17 22 12"
src="https://github.com/user-attachments/assets/30c95603-77e9-4647-b233-8c0ea2a27df8"
/>
2025-03-12 17:46:07 +01:00
Raphaël Bosi daa501549e 271 remove is command menu v2 enabled (#10809)
Closes https://github.com/twentyhq/core-team-issues/issues/271

This PR
- Removes the feature flag IS_COMMAND_MENU_V2_ENABLED
- Removes all old Right drawer components
- Removes the Action menu bar
- Removes unused Copilot page
2025-03-12 16:26:29 +01:00
Raphaël Bosi bfc542290b 545 replace objects icons and names with records avatars and labelidentifiers in command menu context chips (#10787)
Closes https://github.com/twentyhq/core-team-issues/issues/545

This PR:
- Introduces `commandMenuNavigationMorphItemsState` which stores the
information about the `recordId` and the `objectMetadataItemId` for each
page
- Creates `CommandMenuContextChipEffect`, which queries the records from
the previous pages in case a record has been updated during the
navigation, to keep up to date information and stores it inside
`commandMenuNavigationRecordsState`
- `useCommandMenuContextChips` returns the context chips information
- Style updates (icons background and color)
- Updates `useCommandMenu` to set and reset these new states


https://github.com/user-attachments/assets/8886848a-721d-4709-9330-8e84ebc0d51e
2025-03-12 15:26:14 +01:00
Raphaël Bosi f45a682249 491 save the page component instance id for side panel navigation (Part 2) (#10732)
This PR follows #10700, it is the same refactor but for the workflows
pages.

- Duplicates the right drawer workflow pages for the command menu and
replace the states used in these pages by component states
- We store the component instance id upon navigation to restore the
states when we navigate back to a page

There are still states which are not component states inside the
workflow diagram and workflow command menu pages, we should convert them
in a futur refactor.

`closeCommandMenu` was called programmatically in multiple places for
the workflow, I refactored that to only rely on the click outside
listener. This introduced a wiggling bug on the workflow canvas when we
change node selection. This should be fixed in another PR by updating
the canvas animation to take the animation values of the command menu
instead. I'm thinking we could use [motion
values](https://motion.dev/docs/react-motion-value) for this as I told
you @Devessier
2025-03-07 18:18:24 +01:00
Raphaël BosiandLucas Bordeau e86116aa57 491 save the page component instance id for side panel navigation (#10700)
Closes https://github.com/twentyhq/core-team-issues/issues/491

This PR:
- Duplicates the right drawer pages for the command menu and replace all
the states used in these pages by component states (The right drawer
pages will be deleted when we deprecate the command menu v1)
- Wraps those pages into a component instance provider
- We store the component instance id upon navigation to restore the
states when we navigate back to a page

The only pages which are not updated for now are the pages related to
the workflow objects, this will be done in another PR.
In another PR, to improve the navigation experience I will replace the
icons and titles of the chips by the label identifier and the avatar if
the page is a record page.


https://github.com/user-attachments/assets/a76d3345-01f3-4db9-8a55-331cca8b87e0

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2025-03-06 17:09:40 +01:00
Raphaël Bosi f3e667a651 496 add open in full page button on command menu record page (#10659)
Closes https://github.com/twentyhq/core-team-issues/issues/496

I upgraded react tabler icons to the latest version to be able to use
the newest icons.

The option menu was no longer accessible on right drawer record pages,
this pr fixes this and creates a new button which opens the record show
page.
This button is accessible via the shortcut `Command` + `Enter`


https://github.com/user-attachments/assets/570071b2-4406-40bd-be48-a0e5e430ed70
2025-03-05 12:02:31 +01:00
Raphaël Bosi 9da973592d 460 create restore one and restore many records action (#10647)
Closes https://github.com/twentyhq/core-team-issues/issues/460


https://github.com/user-attachments/assets/5271e56d-bf67-49cc-a8da-e25c12171e2e
2025-03-04 17:27:14 +01:00
Raphaël Bosi a5d60919a7 Create import csv action (#10624)
Closes https://github.com/twentyhq/core-team-issues/issues/63

This PR:
- Creates an **Import csv** action
- Allows the import of notes and tasks
- Removes the import action from the index option menu
- Adds export action when only one record is selected
- Adds see deleted record action to workflow objects
2025-03-03 17:03:53 +01:00
Raphaël Bosi 44018911f2 Fix buttons size (#10620)
The button size attribute was removed accidentally in this PR
https://github.com/twentyhq/twenty/pull/10536, I'm putting it back.
All the buttons were 32px instead of 24px for the small ones.
2025-03-03 14:02:30 +00:00
Raphaël Bosi 4d7ba29d9f Add PageHeaderOpenCommandMenuButton on Record index page header for command menu v1 (#10576)
The only way to open the command menu in v1 on the index page was
through the shortcut, but since important actions (export and see
deleted records) have been moved to the command menu, we want an easy
way to open it on v1.


https://github.com/user-attachments/assets/b446f385-da69-4dcc-af9d-74d36b52e94f
2025-02-28 11:42:02 +01:00
Raphaël Bosi aa74c36ce9 Fix record opening on board card (#10559)
The record opening when clicking on the body of the board card should
behave the same as when clicking on the record chip.

Before:


https://github.com/user-attachments/assets/8d5956e4-d529-455c-9d28-02d5a8b6e290

After:


https://github.com/user-attachments/assets/70dadd77-a151-47b5-b8b4-ec01d6e2c48e
2025-02-27 18:29:09 +01:00
Raphaël Bosi dddf67ed01 Prevent command menu backspace shortcut on V1 (#10555)
Before:


https://github.com/user-attachments/assets/87be65fa-4b24-4e15-b0a4-ca1aa06f5ca6


After:


https://github.com/user-attachments/assets/ef9076a0-214f-4680-a455-157a206e8197
2025-02-27 18:14:45 +01:00
Raphaël Bosi fb38828943 Fix command menu list item overflow (#10544)
Before:
<img width="501" alt="Capture d’écran 2025-02-27 à 12 10 52"
src="https://github.com/user-attachments/assets/dd3637b4-cfe4-44b9-8db2-78e14741a415"
/>

After:
<img width="503" alt="Capture d’écran 2025-02-27 à 12 10 40"
src="https://github.com/user-attachments/assets/71ebb02d-cdc8-44e6-82dd-d00b3a45e7c0"
/>
2025-02-27 11:38:30 +00:00
Raphaël Bosi d9e6b95c04 Disable drag select when the command menu is opened (#10541)
Before:


https://github.com/user-attachments/assets/3d6a3833-cf5d-4330-a814-896a5c9df930

After:


https://github.com/user-attachments/assets/5f490fc2-59aa-45d5-b485-2abced4b31ef
2025-02-27 12:36:47 +01:00
Raphaël Bosi 05f15a827f Fix contact creation (#10540)
Fixes the following bug:
When I connect an account, a contact is created for that email if the
domain name differs from the workspace domain name.
2025-02-27 11:51:15 +01:00
Raphaël Bosi b349d3f8c2 62 create see deleted records action (#10525)
Closes https://github.com/twentyhq/core-team-issues/issues/62

- Created action
- Removed action from the option menu
- Fixed the filters and sorts providers for the command menu



https://github.com/user-attachments/assets/b42de3ea-536c-458c-a0e7-abd6f929d234
2025-02-26 18:51:17 +01:00
Raphaël Bosi 24aca790f7 Remove export action from the view options menu (#10517)
Closes https://github.com/twentyhq/core-team-issues/issues/64
Remove export action from the view options menu
2025-02-26 18:20:07 +01:00
Raphaël Bosi d47e5ec47d Fix command menu closing and opening (#10497)
Since I introduced AnimatePresence to animate the exit of the command
menu, the command menu wasn't working properly. By adding this
animation, I had to reset the command menu states at the end of the
animation, otherwise, the component inside the command menu would throw
errors. The problem was that, by closing and instantly reopening the
command menu, the `onExitComplete` wasn't triggered and the states
weren't reset before the opening. By introducing a new state
`isCommandMenuClosingState`, I can reset those states at the beginning
of the opening if the animation didn't have the time to finish.
2025-02-26 16:52:44 +01:00
Raphaël Bosi dd12bc31ca Fix record page context store instance id (#10508)
Fixes bug introduced by https://github.com/twentyhq/twenty/pull/10272
- Replace show page context store instance id by 'main-context-store'
2025-02-26 15:05:22 +00:00
Raphaël Bosi 42ea02329a Fix thread pagination (#10485)
Fixes https://github.com/twentyhq/twenty/issues/10308.

The issue came from the fact that the pagination inside the
`findAndCount` wasn't working properly. The limit was applied on the
joint table. Adding a `groupBy` fixes this, but since it isn't available
on the `findAndCount` I had to modify the query using the query builder.
2025-02-25 17:44:42 +01:00
Raphaël BosiandDevessier 9997cf5a4e 322 compact command chips dropdown (#10456)
Closes https://github.com/twentyhq/core-team-issues/issues/322



https://github.com/user-attachments/assets/d4806f04-e217-40f5-9707-93334bbd49ea

---------

Co-authored-by: Devessier <baptiste@devessier.fr>
2025-02-25 16:42:38 +01:00
Raphaël Bosi e77ba2be52 Add non root user for twenty website docker file (#10470)
- Create user 1000 and give it the necessary permissions
2025-02-25 10:51:09 +00:00
Raphaël BosiandLucas Bordeau 9c7213a1e1 Fix hover on table cells when the command menu is opened (#10446)
This PR allows the table cell hover to be accessible even when the
command menu is opened.
I extracted the hotkeys logic from `RecordTableCellSoftFocusMode` into
`RecordTableCellSoftFocusModeHotkeysSetterEffect`. This component is
mounted conditionally if the hotkey scope is `TableSoftFocus`. By doing
so, the table cell hotkey scopes are not available when the command menu
is opened.

Before


https://github.com/user-attachments/assets/f0925565-f00a-4962-b18d-3c1617f77dd0


After


https://github.com/user-attachments/assets/49ec9195-3110-46d7-abb6-12854a8bb991

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2025-02-24 17:09:23 +01:00
Raphaël Bosi 7a3e92fe0b Fix command menu selectable items ordering (#10392)
The order of the selectableItems was not the same as the command groups
so the navigation with arrow keys inside the command menu was broken.

Before:


https://github.com/user-attachments/assets/a3487b58-9c26-4522-9e7b-584d30396a21


After:


https://github.com/user-attachments/assets/bd60263b-b4e2-4d41-bad1-eef9115caec6
2025-02-21 16:05:31 +01:00
Raphaël Bosi f269f8b905 Fix autogrow input whitespace bug (#10388)
Also fixed chip alignment.

Before:


https://github.com/user-attachments/assets/7bfe7c73-676a-4dee-b5df-fed15b663267

After:


https://github.com/user-attachments/assets/9060b3cc-051b-41f7-8149-418ed1c223cb
2025-02-21 15:37:07 +01:00
Raphaël Bosi 0571eb2cf6 Only display record actions inside the RecordIndexActionMenuDropdown (#10384)
In the action menu dropdown, we only want to display the actions for the
selected records, so we need to filter available actions according to
their type and scope.
Note: the `Search record` action was appearing twice because one is a
standard action and one is a fallback action and both are registered in
the available actions. We don't want to display this action because it
isn't related to the selected records, it is a global action.

Before:
<img width="226" alt="Capture d’écran 2025-02-21 à 12 12 53"
src="https://github.com/user-attachments/assets/0a4f9b8c-4e30-4697-9861-559e76dc288f"
/>

After:
<img width="241" alt="Capture d’écran 2025-02-21 à 12 10 34"
src="https://github.com/user-attachments/assets/0a98c9d5-432d-4018-a4d3-bf3a6d0c49be"
/>
2025-02-21 12:29:41 +01:00
Raphaël Bosi ec9587414b Fix open record in setting for command menu v1 (#10383)
- Hide open record in settings for command menu version 1 users
- Create a selector to check which version of the command menu the user
has before returning if the record should be opened in the record page
or in the side panel
2025-02-21 12:06:27 +01:00
Raphaël Bosi 9f454c565b 410 open in side panel (#10363)
Closes https://github.com/twentyhq/core-team-issues/issues/410

- Added `openRecordIn` column in the `view` entity, which is set to
`SIDE_PANEL` by default
- Created a new option inside the view option dropdown to be able to set
`openRecordIn`
- Updated all record show page openings to reflect the setting behavior
- For `workflow`, `workflowVersion` and `workflowRun` (what I call
workflow objects), we want the default view `openRecordIn` to be set to
`RECORD_PAGE`. When seeding the views for the new workspaces, we set
`openRecordIn` to `RECORD_PAGE` for workflow objects. Since the workflow
objects views `openRecordIn` will be set to the default value
`SIDE_PANEL` for the existing workspaces when the sync metadata runs, I
created a script to run in the 0.43 update to update this value.
- Updated `closeCommandMenu` because of problems introduced by the
animate presence wrapper around the command menu. We now reset the
states at the end of the animation.

Note: We want to be able to open all workflow objects pages in the side
panel, but this requires some refactoring of the workflow module. For
now @Bonapara wanted to allow the possibility to change the
`openRecordIn` setting to `SIDE_PANEL` even for the workflows even if
it's buggy and not ready for the moment. Since this is an experimental
feature, it shouldn't cause too many problems.
2025-02-21 09:27:33 +00:00
Raphaël Bosi aeed1c9f15 406 animate the command menu button (#10305)
Closes https://github.com/twentyhq/core-team-issues/issues/406

- Added animation on the Icon (The dots rotate and transform into an a
cross)
- Introduced a new component `AnimatedButton`. All the button styling
could be extracted to another file so we don't duplicate the code, but
since `AnimatedLightIconButton` duplicates the style from
`LightIconButton`, I did the same here.
- Added an animate presence component on the command menu to have a
smooth transition from `open` to `close` state
- Merged the open and close command menu button
- For all the pages that are not an index page or a record page, we want
the old behavior because there is no button in the page header to open
the command menu

# Before


https://github.com/user-attachments/assets/5ec7d9eb-9d8b-4838-af1b-c04382694342


# After


https://github.com/user-attachments/assets/f700deec-1c52-4afd-b294-f9ee7b9206e9
2025-02-18 18:07:11 +01:00
Raphaël Bosi 270744eca6 Fix command menu context chip display on show page (#10267)
## New Company
### Before:
<img width="500" alt="Capture d’écran 2025-02-17 à 16 47 54"
src="https://github.com/user-attachments/assets/4573450d-14b1-41f0-9b86-24003f489fde"
/>

### After:
<img width="500" alt="Capture d’écran 2025-02-17 à 16 46 24"
src="https://github.com/user-attachments/assets/6622bd75-900a-451b-ac21-c98bddeee32d"
/>


## Task
### Before:
<img width="500" alt="Capture d’écran 2025-02-17 à 16 47 35"
src="https://github.com/user-attachments/assets/04b77faa-b628-4839-ab94-95c8570c1818"
/>

### After:
<img width="501" alt="Capture d’écran 2025-02-17 à 16 47 03"
src="https://github.com/user-attachments/assets/1577dea6-7541-497e-af6e-3a4559f1a913"
/>
2025-02-18 09:52:25 +01:00
Raphaël Bosi e6a484bb58 Fix search fallback action (#10256)
The command menu search bar was reset after clicking on the `Search
records` fallback action, but it shouldn't.
This PR:
- Introduces a new type of action: `Fallback` actions
- Reset the search bar only if the action key differs from
'record-search-fallback'
2025-02-17 14:24:42 +00:00