Commit Graph

136 Commits

Author SHA1 Message Date
Baptiste Devessier 2466d81ace [Record Page Layouts] Pin record header (#16339)
https://github.com/user-attachments/assets/df988bf2-d2d6-49a4-b062-bc7ec49e1fad

Closes https://github.com/twentyhq/core-team-issues/issues/1806
2025-12-05 16:10:08 +01:00
nitin 2f36c2e82e [Dashboards] Server: Rich Text Widget (#16296)
closes https://github.com/twentyhq/core-team-issues/issues/1893

sync in the transformation layer - 
with just the blocknote format -

<img width="1532" height="1058" alt="CleanShot 2025-12-04 at 16 43 27"
src="https://github.com/user-attachments/assets/081483fb-0bd0-4f14-81fc-8ea2261367a2"
/>

with just the mardown format - 
<img width="1534" height="1056" alt="CleanShot 2025-12-04 at 16 45 03"
src="https://github.com/user-attachments/assets/4eae513b-423d-4597-b79c-97d1f33ab994"
/>

attaching response since in screen shot its getting cut - 
```
{
  "id": "7189a10a-177c-4cc2-8946-950b8c125913",
  "pageLayoutTabId": "82ac56dd-4351-43ad-bf3d-49624c057e17",
  "workspaceId": "20202020-1c25-4d02-bf25-6aeccf7ea419",
  "title": "awdawd awdawdawd",
  "type": "STANDALONE_RICH_TEXT",
  "objectMetadataId": null,
  "gridPosition": {
    "row": 1,
    "column": 1,
    "rowSpan": 1,
    "columnSpan": 1
  },
  "configuration": {
    "body": {
      "markdown": "# Hello World",
      "blocknote": "[{\"id\":\"2e744f21-7c71-414d-b87f-fb48400c593c\",\"type\":\"heading\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\",\"level\":1},\"content\":[{\"type\":\"text\",\"text\":\"Hello World\",\"styles\":{}}],\"children\":[]}]"
    }
  },
  "createdAt": "2025-12-04T11:14:52.212Z",
  "updatedAt": "2025-12-04T11:14:52.212Z",
  "deletedAt": null
}
```
2025-12-04 18:28:33 +05:30
Baptiste Devessier 0bf2d13832 [Side Panel V2] Bring back old container (#16065)
## Before

<img width="1446" height="780" alt="image"
src="https://github.com/user-attachments/assets/fa25f22d-b979-4a8f-9989-004d07f862d7"
/>

## After

<img width="3456" height="2160" alt="CleanShot 2025-11-25 at 17 35
59@2x"
src="https://github.com/user-attachments/assets/a87880c4-3faa-47c3-9215-34afc36270a3"
/>
2025-11-25 18:04:56 +01:00
Abdul Rahman 04b0a65e73 feat: fix Command Menu Side Panel Layout (#15883)
[Figma
Design](https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=81380-344641&t=FpjWNOK2gZuDQQfr-0)

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds a side panel layout for the Command Menu, routes modals into a
local container, updates the top bar and context chips, and standardizes
small button sizes.
> 
> - **Command Menu**:
> - **Side Panel Layout**: Introduces `CommandMenuSidePanelLayout` with
animated width, hosts `CommandMenuRouter`, and provides a modal
container via `ModalContainerContext`.
> - **Top Bar**: Redesign (`CommandMenuTopBar`) with back icon, optional
AI sparkles action, compact height
(`COMMAND_MENU_SEARCH_BAR_HEIGHT=40`), and updated placeholder.
> - **Context Chips**: Adds `CommandMenuLastContextChip` and
`CommandMenuRecordInfo`; extends `CommandMenuContextChip` with `page`
prop; updates `CommandMenuContextChipGroups` to render last chip as
record info when applicable.
> - **Container Simplification**: `CommandMenuContainer` simplified to
just provide contexts and `AgentChatProvider`.
> - **Modal System**:
> - Adds `ModalContainerContext` and updates `Modal` to portal into
provided container; `Modal.Backdrop` supports `isInContainer`.
> - Updates usages (e.g., `UserOrMetadataLoader`, `ActionModal`) to
align with new modal behavior.
> - **Page Integration**:
> - Replaces `PageBody` with `CommandMenuSidePanelLayout` in
`RecordShowPage` and `RecordIndexContainerGater`.
> - Removes global `CommandMenuRouter` from `DefaultLayout` (keeps
keyboard shortcuts).
> - **UI/Styling**:
> - Standardizes several buttons to `size="small"` (e.g., command
actions, open record, options, reply, workflow footer).
> - Adjusts `ShowPageSubContainer` styling when rendered inside command
menu.
>   - Storybook tests updated for new placeholder text.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
81fcaa145618a2fa1c3e11e2dc88fe832c51374c. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Devessier <baptiste@devessier.fr>
Co-authored-by: Aman Raj <92664006+araj00@users.noreply.github.com>
Co-authored-by: Etienne <45695613+etiennejouan@users.noreply.github.com>
Co-authored-by: Paul Rastoin <45004772+prastoin@users.noreply.github.com>
2025-11-21 16:12:41 +01:00
Baptiste Devessier e58668003d Support side panel in record page layout (#15216)
## Demo


https://github.com/user-attachments/assets/078b67d3-52d7-4ddf-a65a-fb002f82cfdd

Closes https://github.com/twentyhq/core-team-issues/issues/1731

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2025-10-21 13:01:43 +02:00
Copilot b4bf0be089 Fix duplicate height properties in styled components (#15200)
## Overview

This PR fixes instances where `height` properties were incorrectly
defined multiple times within the same styled component definitions
across the codebase.

## Problem

Several styled components had duplicate `height` CSS properties where
the exact same property was declared twice in the same selector, causing
confusion and reducing code maintainability. The second declaration
would override the first, making the first one dead code.

## Changes

Fixed 4 files across the codebase:

### Duplicate `height: 100%` Removed
**StyledShowPageRightContainer** in twenty-front:
- `PageLayoutRendererContent.tsx` 
- `ShowPageSubContainer.tsx`
- `PageLayoutRecordPageRenderer.tsx`

Each had `height: 100%` declared twice in the same component definition
(strict duplicates).

### Duplicate `height` with Different Values Removed
**StyledCommandKey** in twenty-ui:
- `MenuItemHotKeys.tsx` - Had both `height: ${({ theme }) =>
theme.spacing(5)}` and `height: 18px` declared. Removed the first
declaration as the second was overriding it.

## Testing

-  ESLint checks pass
-  TypeScript compilation successful
-  CodeQL security analysis - no issues
-  Comprehensive codebase scan confirms no remaining strict height
duplicates

## Impact

- **Visual Changes**: None - purely cleanup refactoring
- **Performance**: No runtime impact
- **Breaking Changes**: None
- **Code Quality**: Improved CSS maintainability by removing dead code

---

**Total:** 4 files modified, 5 lines removed



Created from VS Code via the <a
href="https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github">GitHub
Pull Request</a> extension.

<!-- START COPILOT CODING AGENT SUFFIX -->



<details>

<summary>Original prompt</summary>

> Hi! It seems that a few styled components in the #codebase are defined
with duplicate `height: 100%`, like in
#file:PageLayoutRendererContent.tsx:27-36.
> 
> Your job is to find all the places where we defined `height: 100%`
incorrectly several times and to keep only one `height` property.


</details>

Created from VS Code via the [GitHub Pull
Request](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)
extension.

<!-- START COPILOT CODING AGENT TIPS -->
---

💡 You can make Copilot smarter by setting up custom instructions,
customizing its development environment and configuring Model Context
Protocol (MCP) servers. Learn more [Copilot coding agent
tips](https://gh.io/copilot-coding-agent-tips) in the docs.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Devessier <29370468+Devessier@users.noreply.github.com>
Co-authored-by: Baptiste Devessier <baptiste@devessier.fr>
2025-10-20 16:33:55 +02:00
Baptiste Devessier 23de047787 Extract DashboardCard from ShowPageSubContainer (#15073)
This PR determines the minimal setup required to render dashboards
without errors while extracting them from the record show page. The
ultimate goal is to create a `PageLayoutRenderer` component that takes
any page layout configuration and correctly renders dashboards or record
pages.

Currently, the `DashboardCard` component renders itself the
`PageLayoutRenderer` component. The next step is to reverse the flow of
control and make `PageLayoutRenderer` take a configuration and decide
whether it should render a dashboard or something else.

This PR takes into consideration two comments left by Charles on [the
first PR scaffolding the
refactor](https://github.com/twentyhq/twenty/pull/15021): renaming
`targetRecord` to `targetRecordIdentifier` and adding tests to
`evaluateTabVisibility()`.

## Demo to assert this PR doesn't break everything


https://github.com/user-attachments/assets/b5b99cf3-08fa-43d3-8da1-79018bc63641
2025-10-14 16:09:44 +02:00
Félix Malfait 938debd83e Refactor record layouts for backend-driven configuration (#15021)
## Refactor: Prepare frontend record layouts for backend-driven
configuration

This PR simplifies and prepares the frontend record layout system for
eventual migration to backend-driven layouts, aligning the architecture
with the existing PageLayout system used for dashboards.

### Key Changes

**Architecture Improvements:**
- Created unified LayoutRenderingContext that works for both record
pages (with targetRecord) and dashboards (standalone)
- Replaced prop drilling with context-based data flow - cards access
targetRecord and isInRightDrawer via context hooks
- Introduced useTargetRecord() helper hook that provides type-safe
access to the current record
- Created generic CardRenderer component that handles configuration
injection and context guards uniformly

**Configuration System:**
- Converted all tab icons from React components to JSON-serializable
strings (e.g., Icon: IconCheckbox → icon: 'IconCheckbox')
- Added configuration field to cards, matching the widget configuration
pattern on the backend
- Created CardConfiguration types system similar to WidgetConfiguration
on the backend
- Moved widget-specific props (like showDuplicatesSection) into
configuration objects

**Code Organization:**
- Extracted visibility evaluation logic into reusable
evaluateTabVisibility() utility
- Organized layouts into dedicated files (one per object:
base-record-layout.ts, company-record-layout.ts, etc.)
- Renamed components to match their purpose: Notes → NotesCard,
Attachments → FilesCard, etc.
- Consolidated card rendering from registry object to direct
getCardComponent() function

**API Alignment:**
- Made ifNoReadPermissionObject an explicit part of TabVisibilityConfig
(follows if* naming convention)
- Removed redundant targetObjectNameSingular from tab-level (now derived
from visibility config)
- Card API now mirrors Widget API (both use type, configuration,
accessed via context)
2025-10-10 16:26:17 +02:00
Balaji Krishnamurthy 7a999c8476 Format date displayed in Releases section (#14183)
Closes #14177 

I noticed a `formatDisplayDate` file being used in `twenty-website` and
created the same one for `twenty-front` as well. Unit tests for the same
have been added.

<img width="1438" height="770" alt="image"
src="https://github.com/user-attachments/assets/5aa6eef5-19c5-4108-bf3f-c582d0ca1b59"
/>
<img width="1275" height="785" alt="image"
src="https://github.com/user-attachments/assets/20a87ba6-fca4-472c-a691-362901505303"
/>

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
2025-09-04 17:27:31 +02:00
Félix Malfait 464a480043 Continue ESLINT9 Migration (#13795)
Might already fix #13793
2025-08-10 23:25:58 +02:00
Lucas Bordeau de802b1447 Removed all v2 in naming of state management logic (#13675)
This PR removes any V2 naming in state management logic and some minor
utils and hooks.

It has a lot of changes but nearly all of them were made by the rename
functionality of vscode which is deterministic, so it shouldn't
introduce any regression.

QA has been made on this PR on the main features of the app without any
noticeable issue.

Also renamed some other v2 naming related items : 
- TextInputV2 => TextInput
- TextInput => SettingsTextInput
- ObjectFilterDropdownFilterSelectMenuItemV2 =>
ObjectFilterDropdownFilterSelectMenuItem
- useInitDraftValueV2 => useInitDraftValue
- useOpenRecordTableCellV2 => useOpenRecordTableCell
2025-08-06 12:09:15 +02:00
nitin 6f156a69b0 feat: new tab list (#12384)
closes #9904

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2025-06-05 20:44:21 +02:00
Lucas Bordeau 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
Guillim da0c7e679e Blocknote editor fix (#11823)
After reading the blocknote documentation :

- we decided to increase to 100% the lines width
- we decided to reduce as much as possible inner padding
- we decided it's on the parent to decide the padding of the richtext
The two last points are recommended in a discussion on the project
blocknote. This way clicking on padding won't trigger weird behaviour on
Chrome.

Fixes
https://github.com/twentyhq/core-team-issues/issues/827#issuecomment-2842350359
2025-05-05 17:22:49 +02:00
Charles Bochet 2308091b13 Remove overlay-scroll-bar (#11258)
## What

- Deprecate overlayscrollbars as we decided to follow the native
behavior
- rework on performances (avoid calling recoil states too much at field
level which is quite expensive)
- Also implements:
https://github.com/twentyhq/core-team-issues/issues/569

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2025-04-04 16:13:48 +02:00
Paul Rastoin 4a4e65fe4a [REFACTOR] Twenty UI multi barrel (#11301)
# Introduction
closes https://github.com/twentyhq/core-team-issues/issues/591
Same than for `twenty-shared` made in
https://github.com/twentyhq/twenty/pull/11083.

## TODO
- [x] Manual migrate twenty-website twenty-ui imports

## What's next:
- Generate barrel and migration script factorization within own package
+ tests
- Refactoring using preconstruct ? TimeBox
- Lint circular dependencies
- Lint import from barrel and forbid them

### Preconstruct
We need custom rollup plugins addition, but preconstruct does not expose
its rollup configuration. It might be possible to handle this using the
babel overrides. But was a big tunnel.
We could give it a try afterwards ! ( allowing cjs interop and stuff
like that )
Stuck to vite lib app

Closed related PRs:
- https://github.com/twentyhq/twenty/pull/11294
- https://github.com/twentyhq/twenty/pull/11203
2025-04-03 09:47:55 +00: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
Charles Bochet 6898a40ac3 Fix relation from many notes (#11120)
Fixes https://github.com/twentyhq/twenty/issues/3415
2025-03-24 15:19:05 +01:00
Paul Rastoin 9ad8287dbc [REFACTOR] twenty-shared multi barrel and CJS/ESM build with preconstruct (#11083)
# Introduction

In this PR we've migrated `twenty-shared` from a `vite` app
[libary-mode](https://vite.dev/guide/build#library-mode) to a
[preconstruct](https://preconstruct.tools/) "atomic" application ( in
the future would like to introduce preconstruct to handle of all our
atomic dependencies such as `twenty-emails` `twenty-ui` etc it will be
integrated at the monorepo's root directly, would be to invasive in the
first, starting incremental via `twenty-shared`)

For more information regarding the motivations please refer to nor:
- https://github.com/twentyhq/core-team-issues/issues/587
-
https://github.com/twentyhq/core-team-issues/issues/281#issuecomment-2630949682

close https://github.com/twentyhq/core-team-issues/issues/589
close https://github.com/twentyhq/core-team-issues/issues/590

## How to test
In order to ease the review this PR will ship all the codegen at the
very end, the actual meaning full diff is `+2,411 −114`
In order to migrate existing dependent packages to `twenty-shared` multi
barrel new arch you need to run in local:
```sh
yarn tsx packages/twenty-shared/scripts/migrateFromSingleToMultiBarrelImport.ts && \
npx nx run-many -t lint --fix -p twenty-front twenty-ui twenty-server twenty-emails twenty-shared twenty-zapier
```
Note that `migrateFromSingleToMultiBarrelImport` is idempotent, it's atm
included in the PR but should not be merged. ( such as codegen will be
added before merging this script will be removed )

## Misc
- related opened issue preconstruct
https://github.com/preconstruct/preconstruct/issues/617

## Closed related PR
- https://github.com/twentyhq/twenty/pull/11028
- https://github.com/twentyhq/twenty/pull/10993
- https://github.com/twentyhq/twenty/pull/10960

## Upcoming enhancement: ( in others dedicated PRs )
- 1/ refactor generate barrel to export atomic module instead of `*`
- 2/ generate barrel own package with several files and tests
- 3/ Migration twenty-ui the same way
- 4/ Use `preconstruct` at monorepo global level

## Conclusion
As always any suggestions are welcomed !
2025-03-22 19:16:06 +01:00
martmull 6a412a531f Remove useless skelettonLoader (#11096)
## After

![image](https://github.com/user-attachments/assets/772e9a8c-5df2-4bfd-95ea-5854022e82e0)
<img width="825" alt="Capture d’écran 2025-03-21 à 15 43 14"
src="https://github.com/user-attachments/assets/87818683-9cb0-4264-a6c3-f0420b0ae34d"
/>
2025-03-21 16:19:45 +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 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
Charles Bochet ca9c070945 Fix activity (#11015)
Deprecating unused states and making sure that the ActivityRichText
editor loads when activity.bodyV2 is present
2025-03-19 10:45:11 +01:00
Weiko 38dabc9f84 [fix] Users with readOnly permissions should not be able to edit richtext fields (#10959)
Before
<img width="1024" alt="Screenshot 2025-03-17 at 17 46 34"
src="https://github.com/user-attachments/assets/c754adfb-4197-4be8-95dc-2f2024ed8a5c"
/>


After
<img width="954" alt="Screenshot 2025-03-17 at 17 46 20"
src="https://github.com/user-attachments/assets/e6063990-5d30-416f-9d16-2974d8d1d831"
/>
2025-03-17 19:03:43 +01:00
nitin bd7e7713e8 fix workflow view not visible (#10918)
fixes: #10913

1. Original issue:
```typescript
<StyledTabListContainer shouldDisplay={visibleTabs.length > 1}>
  <StyledTabList />
</StyledTabListContainer>
```

TabList wasn't getting full width.

2. First fix attempt ie #10904:
```typescript
{visibleTabs.length > 1 && (
  <StyledTabList />
)}
```
This broke workflow views because:
Workflows use single-tab layouts
The conditional rendering prevented the tab from showing at all when
visibleTabs.length <= 1


3. Current working solution:
```typescript
const StyledOuterContainer = styled.div`
  width: 100%;
`;

<StyledTabListContainer shouldDisplay={visibleTabs.length > 1}>
  <StyledOuterContainer>
    <StyledTabList />
  </StyledOuterContainer>
</StyledTabListContainer>
```
This works because:
Keeps the original display logic that supports single-tab workflows
Fixes the width issue with the new container
Maintains tab state management needed for workflow visualization
2025-03-17 10:27:23 +01:00
nitin 1bc30e9b21 Side panel tablist fix (#10904)
followup #10832
whats wrong? -- in "before" screen grabs, the light bottom border
doesn't go all the way!

fix -- removed the redundant div :)

(╯°□°)╯︵ ┻━┻

before:
<img width="608" alt="Screenshot 2025-03-14 at 22 26 26"
src="https://github.com/user-attachments/assets/4fff92f7-5adc-4816-95dc-7b78ad08cd1c"
/>
<img width="605" alt="Screenshot 2025-03-14 at 22 26 20"
src="https://github.com/user-attachments/assets/e7a796a3-d5ff-4366-bd45-afbe3a219ee5"
/>
after:
<img width="610" alt="Screenshot 2025-03-14 at 22 24 33"
src="https://github.com/user-attachments/assets/c6f744b8-ec8b-4549-a1bb-db1a9fd1fafe"
/>
<img width="603" alt="Screenshot 2025-03-14 at 22 24 24"
src="https://github.com/user-attachments/assets/4758a591-3375-4387-a115-c74d534decb6"
/>
2025-03-14 18:32:46 +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
nitin 5ddc34b182 Tablist bottom margin fix (#10801)
### Bug
The active tab bottom border appeared slightly above the TabList's light
bottom border.

### Investigation
- Initial fix: Adjusted margin-bottom to -1px in Tab component to align
borders
- This fix caused active bottom borders to disappear in tabs wrapped
with ShowPageSubContainerTabListContainer
- Found that ShowPageSubContainerTabListContainer was adding a redundant
bottom border that overlapped with TabList's border

### Solution
- Removed ShowPageSubContainerTabListContainer to eliminate the
redundant border
- Kept the -1px margin-bottom fix in Tab component
- This ensures consistent border behavior across all TabList
implementations
2025-03-12 14:45:50 +01:00
oliver fc287dac78 Feat: API Playground (#10376)
/claim #10283

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2025-03-07 18:03:57 +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
Baptiste Devessier f74e4bedc4 Create a right drawer for viewing steps in workflow runs (#10366)
- Improve the type-safety of the objects mapping the id of a right
drawer or side panel view to a React component
- Improve the types of the `useTabList` hook to type the available tab
identifiers strictly
- Create a specialized `WorkflowRunDiagramCanvas` component to render a
`WorkflowRunDiagramCanvasEffect` component that opens
`RightDrawerPages.WorkflowRunStepView` when a step is selected
- Create a new side panel view specifically for workflow run step
details
- Create tab list in the new side panel; all the tabs are `Node`,
`Input` and `Output`
- Create a hook `useWorkflowSelectedNodeOrThrow` not to duplicate
throwing mechanisms

Closes https://github.com/twentyhq/core-team-issues/issues/432

## Demo


https://github.com/user-attachments/assets/8d5df7dc-0b99-49a2-9a54-d3eaee80a8e6
2025-02-26 16:48:24 +01:00
Weiko e301c7856b Add all object level read-only behavior (#10356)
Fixes https://github.com/twentyhq/core-team-issues/issues/427

---------

Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>
2025-02-21 09:59:47 +01:00
Raphaël Bosi 80c55b4462 384 update the input of the record show page inside the command menu (#10213)
Created a new component `RecordTitleCell` with an API close to
`RecordInlineCell`.
This new component is an autogrowing input. 
It consumes the `FieldContext`. It uses some hooks and states from
`RecordInlineCell` because I didn't want to duplicate all the logic, but
this logic could be duplicated.

Two issues that I didn't solve in this PR:
- There is a flashing glitch inside the input when typing
- The input of a workflow isn't focused when creating a new one. This is
because of an issue with the `useHotkeyScopeOnMount` hook which is
deprecated but still used in some components. Upon redirection on the
workflow showpage, the hokey scope of the input is overridden by the
hokey scopes of the components which use `useHotkeyScopeOnMount`. I
decided not to open the input for now.

## Command menu record show page

### Single input


https://github.com/user-attachments/assets/50dc235c-8f34-4445-8b04-586125606bd5

### Double input


https://github.com/user-attachments/assets/bdcfd6eb-d25e-4006-a87f-6e615e8a6e7e

## Workflow breadcrumb


https://github.com/user-attachments/assets/ded38dd6-5794-4779-a4ae-b3948567595a

## Record show page

### Single input


https://github.com/user-attachments/assets/8ad7a606-556a-416b-8788-93415f7989e1

### Double input


https://github.com/user-attachments/assets/55aae40b-36ae-40f1-8171-06f1a5db3532
2025-02-14 12:33:18 +00:00
Mohammed Abdul Razak Wahab d2d3b21c90 consistent background color in notes (#10097)
fixes #10086 

![image](https://github.com/user-attachments/assets/c8233d63-9020-457f-9ce1-4c88d6dc2019)

![image](https://github.com/user-attachments/assets/3deeb644-eeb1-4073-9ee8-dd08745282f6)

---------

Co-authored-by: ehconitin <nitinkoche03@gmail.com>
2025-02-12 17:15:26 +05:30
Paul Rastoin 7fd89678b7 [CHORE] Avoid isDefined duplicated reference, move it to twenty-shared (#9967)
# Introduction
Avoid having multiple `isDefined` definition across our pacakges
Also avoid importing `isDefined` from `twenty-ui` which exposes a huge
barrel for a such little util function

## In a nutshell
Removed own `isDefined.ts` definition from `twenty-ui` `twenty-front`
and `twenty-server` to move it to `twenty-shared`.
Updated imports for each packages, and added explicit dependencies to
`twenty-shared` if not already in place

Related PR https://github.com/twentyhq/twenty/pull/9941
2025-02-01 12:10:10 +01:00
Félix Malfait 9d32e63111 Continue Frontend localization (#9909)
Translation more content on the frontend
2025-01-29 17:36:28 +01:00
Félix Malfait 056cb7c66d Translation followup (#9735)
Address PR comments and more progress on translation
2025-01-19 13:29:19 +01:00
Raphaël Bosi a2f2f4148a Migrate right drawer record page to the command menu (#9459)
Closes #9423



https://github.com/user-attachments/assets/0d93f170-8c4f-43ff-a0ca-3d2874d44820
2025-01-09 09:58:14 +01:00
Félix Malfait 85c04c8931 Performance improvement to dev xp (#9294)
The DX is not great when you need to do a lot of database
resets/command.

Should we disable Typescript validation to speed things up? With this
and caching database:reset takes 1min instead of 2 on my machine.


See also: https://github.com/typeorm/typeorm/issues/4136

And #9291 / #9293

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2025-01-01 17:28:45 +01:00
nitin 49da7d2ca0 Tablist fix (#9216) 2024-12-23 17:31:04 +01:00
Charles Bochet f71527bf6d Fixes before 0-35 release (#9176)
Co-authored-by: Weiko <corentin@twenty.com>
2024-12-23 10:56:25 +01:00
Charles Bochet f499c728fd Fix activity editor (#9165) 2024-12-20 11:52:00 +01:00
nitin 54c4d64ae8 Scrollable fixed dropdowns container minor refactor (#9159)
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-12-20 10:43:48 +01:00
Marie 311b5f64c4 Refacto scroll + Aggregate queries for view groups (#9089)
Closes https://github.com/twentyhq/private-issues/issues/217.

Refactoring scroll not to cause table-wide re-render when opening a
dropdown (triggering a scroll lock) in the table.
2024-12-16 17:58:57 +01:00
martmull b10d831371 8726 workflow add a test button in workflow code step (#9016)
- add test button to workflow code step
- add test tab to workflow code step


https://github.com/user-attachments/assets/e180a827-7321-49a2-8026-88490c557da2



![image](https://github.com/user-attachments/assets/cacbd756-de3f-4141-a84c-8e1853f6556b)

![image](https://github.com/user-attachments/assets/ee170d81-8a22-4178-bd6d-11a0e8c73365)
2024-12-13 10:16:29 +00:00
Lucas Bordeau 013eda4a32 Fixed dropdown bugs on 0.34 (#9000)
- New task dropdown wasn't using the proper dropdown id
- Action menu triggered by context menu (right click) on table cell was
listening in edit mode.
2024-12-10 16:01:03 +01:00
Raphaël Bosi d70987653b 8964 add feature flag is page header v2 enabled (#8995)
Closes #8964
2024-12-10 10:56:28 +01:00
Raphaël Bosi 387f5259a7 8928 refactor page header buttons (#8952)
Closes #8928 

<img width="1296" alt="Capture d’écran 2024-12-09 à 10 26 37"
src="https://github.com/user-attachments/assets/f33202b0-9c11-48da-8daa-e867d62a1803">
<img width="1296" alt="Capture d’écran 2024-12-09 à 10 26 54"
src="https://github.com/user-attachments/assets/a94f89d4-ca12-403f-bfcb-12168a82f77c">
2024-12-09 10:55:33 +01:00
Félix Malfait 29eb9fe77b Don't show summary/fields on workflow record pages (#8804)
Hiding the left column on workflow pages


This raises additional questions: how do we edit the title then?
Probably need a significant refacto of PageHeader


<img width="1094" alt="Screenshot 2024-11-29 at 10 01 08"
src="https://github.com/user-attachments/assets/b98d55cb-5097-4e46-bac5-5570d9ca0ad8">
2024-11-29 18:11:44 +01:00