Commit Graph

323 Commits

Author SHA1 Message Date
d02b5b4086 fix: adjust padding for icon button in Data model visualizer (#11180)
Fixes #10958 


![image](https://github.com/user-attachments/assets/4d9105c9-1bdb-4cb1-801c-56cb1cac0cce)

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2025-03-26 22:53:51 +01:00
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
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
ccf60284cf Various fixes (#11108)
Fixes many bug regarding TableCell and InlineCells
2025-03-22 14:19:10 +01:00
5f390d75b0 refactor(button): rename loading to isLoading for clarity (#11058)
Updated all instances of the loading prop to isLoading across Button and
related components. This improves readability and ensures consistency in
the codebase.
2025-03-20 11:57:19 +00:00
1ecc5e2bf6 Limit nodes opened by default in the JSON Tree component (#11002)
- Add a parameter to choose which nodes to open by default
- On the Admin Panel, open all nodes by default
- On the Workflow Run step output, open only the two first depths
- On the Workflow Run step input, open only the previous step first
depth
- Display `[empty string]` when a node is an empty string
- Now, display `null` instead of `[null]`

## Demo


https://github.com/user-attachments/assets/99b3078a-da3c-4330-b0ff-ddb2e360d933

Closes https://github.com/twentyhq/core-team-issues/issues/538
2025-03-19 11:44:34 +01:00
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
a4bd00ae29 Remove opportunity specific code on Kanban (#11000)
In this PR:
- clean board from opportunity specific logic
- remove in place creation in board
- trigger creation in right drawer instead
2025-03-18 23:54:40 +01:00
c3a9c85265 Update 'Settings Permissions' Layout (#10997)
Fixes https://github.com/twentyhq/core-team-issues/issues/566

## Before
<img width="712" alt="Screenshot 2025-03-18 at 17 17 38"
src="https://github.com/user-attachments/assets/5c2dd8c6-e0cc-4610-b858-071d50de692c"
/>
<img width="775" alt="Screenshot 2025-03-18 at 17 17 30"
src="https://github.com/user-attachments/assets/52bdde22-f26d-4698-8138-5f2af28ddd50"
/>


## After
<img width="949" alt="Screenshot 2025-03-18 at 16 58 31"
src="https://github.com/user-attachments/assets/71b77032-0f5d-452b-b088-7af7e306d0a6"
/>
<img width="946" alt="Screenshot 2025-03-18 at 16 58 38"
src="https://github.com/user-attachments/assets/dc2ddf95-1622-419a-a35b-3037da7bdd4d"
/>
2025-03-18 17:48:35 +01:00
eb5fb51c1b Animate the opening and exiting states of the JSON visualizer (#10965)
I used `overflow-y: clip` instead of `overflow-y: hidden` because of
this behavior:

> Setting overflow to visible in one direction (i.e. overflow-x or
overflow-y) when it isn't set to visible or clip in the other direction
results in the visible value behaving as auto.


## Demo


https://github.com/user-attachments/assets/b7975c99-58cc-4b63-b420-a54b27752188

Closes https://github.com/twentyhq/core-team-issues/issues/562
2025-03-18 12:05:10 +01:00
bda835b9f8 feat(twenty-front/workspace-menu): improve workspace menu (#10642)
New workspace menu
2025-03-17 15:31:31 +00:00
8db8d9ad00 feat(twenty-front): improve dropdown menu header (#10672) 2025-03-17 16:10:52 +01:00
093d6c0a1a Extract the JSON visualizer component in twenty-ui (#10937)
- Move the JsonTree component and the other components to twenty-ui
- Rely on a React Context to provide translations

## Future work

It would be good to migrate the `createRequiredContext` function to
`twenty-ui`. I didn't want to migrate it in this PR but would have liked
to use it.
2025-03-17 15:00:06 +00:00
d0c31d3f71 Fix missing translations for advanced mode toggle (#10931)
Advanced mode toggle was in `twenty-ui` which doesn't support Lingui.

I removed lingui from the global package json and moved it to the local
package.json instead to prevent that kind of error from happening again
2025-03-17 10:09:07 +01:00
fb1e674781 Add ids to translations to make it easier to debug (#10930)
As per title
2025-03-17 09:15:54 +01:00
f44f42e9a0 Advanced toggle alignment (#10844)
This PR address advanced toggle alignment, especially the left yellow
dot placement.
In other advanced settings navigation drawer, the dot appears -20px to
left, while this was not the case for advanced toggle's dot.
Matched the height and paddings to that of NavigationDrawerItem.

@Bonapara FYI

before:
<img width="399" alt="Screenshot 2025-03-13 at 15 49 21"
src="https://github.com/user-attachments/assets/6dd60b3a-1b2e-43a0-ad28-dc44437460ab"
/>

after:
<img width="401" alt="Screenshot 2025-03-13 at 15 47 43"
src="https://github.com/user-attachments/assets/86e51b07-e84a-413a-8a49-1820c165dc68"
/>

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2025-03-14 18:28:14 +01:00
29ead8ab69 Create a running variant for workflow diagram nodes (#10857)
- Add all the missing adaptive colors
- Create a running variant for the workflow diagram nodes
- Make the `<Loader />` be precisely `24px` large

## Demo



https://github.com/user-attachments/assets/cc9ef259-30dd-445d-b167-af35b4f9c4cc



Closes https://github.com/twentyhq/core-team-issues/issues/430
2025-03-13 16:50:55 +01:00
b1322beac3 Fix console errors (#10859)
Fixes https://github.com/twentyhq/core-team-issues/issues/276

## Before

![image](https://github.com/user-attachments/assets/d1b49746-eb9b-4f96-81af-81332ebb2e43)

![image](https://github.com/user-attachments/assets/41ceccfc-6ee3-4ff5-9d02-c621244bf36b)


## After

![image](https://github.com/user-attachments/assets/67eea9c9-d838-4211-9e75-47d895d2662e)
2025-03-13 16:50:35 +01:00
c61748cd6e Admin panel fixes (#10792)
<img width="573" alt="Screenshot 2025-03-12 at 17 36 44"
src="https://github.com/user-attachments/assets/be6c20b0-626d-4a2c-810c-78a49e9f65ee"
/>
<img width="579" alt="Screenshot 2025-03-12 at 17 37 03"
src="https://github.com/user-attachments/assets/23692ff8-ac88-4104-823e-1a06b3074551"
/>
<img width="590" alt="Screenshot 2025-03-12 at 17 37 14"
src="https://github.com/user-attachments/assets/b46de1d3-a312-44cc-a54d-72208224453d"
/>
<img width="556" alt="Screenshot 2025-03-12 at 17 37 37"
src="https://github.com/user-attachments/assets/12176d49-d76d-4fb1-abe6-1f7dc5349d94"
/>
<img width="607" alt="Screenshot 2025-03-12 at 17 37 50"
src="https://github.com/user-attachments/assets/00e2edff-09db-45c5-a4df-6fd9ead830b6"
/>
2025-03-13 01:25:38 +05:30
1b0413bf8b Add days schedule trigger (#10800)
<img width="1470" alt="image"
src="https://github.com/user-attachments/assets/660d79ba-60c7-4874-aa82-80a7575366ba"
/>
2025-03-12 15:25:07 +00:00
d9817d6b9c Fix tabler icons load (#10782)
As per
https://github.com/tabler/tabler-icons/issues/1233#issuecomment-2428245119
2025-03-11 18:01:28 +01:00
f0de6d31b7 Refactor MultipleObjectsPicker component (#10552)
Refactor to only have MultipleRecordPicker and SingleRecordPicker

What's done:
- SingleRecordPicker, MultipleRecordPicker
- RelationToOneInput
- RelationFromManyInput
- usage in TableCell, InlineCell, RelationDetailSection, Workflow

What's left:
- Make a pass on the app, to make sure the hotkeyScopes, clickOutside
are properly set
- Fix flashing on ActivityTarget
- add more tests on the code
2025-03-10 15:04:09 +01:00
77574594f2 admin panel fast follows (#10723)
fast follows:
- https://discord.com/channels/1130383047699738754/1346433965451382845
- https://discord.com/channels/1130383047699738754/1346434512757981264
- https://discord.com/channels/1130383047699738754/1346453484911853610

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2025-03-10 19:02:40 +05:30
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
37d7c0c994 Bump version to 0.44.0-canary (#10702) 2025-03-06 16:50:22 +01:00
d61f48d7ee Add icons next to permission settings labels (#10673)
## Context
as title

Before
<img width="842" alt="Screenshot 2025-03-05 at 15 11 19"
src="https://github.com/user-attachments/assets/1c228f29-368b-460d-8067-90bb2afc6e41"
/>

After
<img width="862" alt="Screenshot 2025-03-05 at 15 09 51"
src="https://github.com/user-attachments/assets/e7f9d02a-0c4a-49f3-977f-a0d6bef20862"
/>
2025-03-05 16:11:15 +01:00
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
5d2be60758 Various frontend fixes for roles pages (#10654) 2025-03-04 18:09:23 +01:00
41db10daff Revert "Remove reference to data-testid from styling" (#10635)
Reverts twentyhq/twenty#10407
2025-03-03 19:15:12 +01:00
3d56e5394f Create a JSON tree visualizer (#10579)
Inspired by
https://github.com/reduxjs/redux-devtools/tree/main/packages/react-json-tree

- Created a reusable JSON tree visualizer
- For now, the visualizer is only meant to render raw JSON. It can't
determine if a string is a UUID and display a specific icon.

**The visualizer is not rendered in the app. You must use Storybook to
review it.**

## Demo



https://github.com/user-attachments/assets/ffd4fc94-b33d-4481-9ac1-fa3a348b7c81
2025-03-03 16:55:16 +01:00
cb3b0633b5 [FIX]: Overflow issue in delete record popup (#10417)
#10411
**Issue**: After right-clicking on deleted record, popup is cut
**Solution**: Added text-overflow ellipsis

previous behaviour: 


![image](https://github.com/user-attachments/assets/415e3603-5181-4656-a719-a5898e02128d)

fix:


![image](https://github.com/user-attachments/assets/a5178990-df14-45b4-a5cd-0b0261990407)

![image](https://github.com/user-attachments/assets/bdbc385f-4a92-4049-b0bc-70f6a38afeac)

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2025-03-03 15:08:06 +00:00
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
83899ff26b feat(button): add accent prop and disable pointer events (#10618)
Added an accent prop to the StyledButtonWrapper for additional styling
capabilities. Also disabled pointer events on ButtonIcon to prevent
interference during loading states.
2025-03-03 13:59:55 +00:00
51c34b77d9 feat(twenty-front/Button): add loading state on Button (#10536) 2025-03-03 11:04:32 +01:00
2773dde714 Remove reference to data-testid from styling (#10407)
Fixes https://github.com/twentyhq/core-team-issues/issues/204

---------

Co-authored-by: ad-elias <elias@autodiligence.com>
2025-02-28 16:37:14 +01:00
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
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
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
89e11b4626 [BUGFIX] Account owner should not be clickable & [Refactor] Chip.tsx links (#10359)
# Introduction

closes #10196 
Initially fixing the `Account Owner` record field value should not be
clickable and redirects on current page bug.
This has been fixed computing whereas the current filed is a workspace
member dynamically rendering a stale Chip components instead of an
interactive one

## Refactor
Refactored the `AvatarChip` `to` props logic to be scoped to lower level
scope `Chip`.
Now we have `LinkChip` `Chip`, `LinkAvatarChip` and `AvatarChip` all
exported from twenty-ui.

The caller has to determine which one to call from the design system

## New rule regarding chip links
As discussed with @charlesBochet and @FelixMalfait 
A chip link will now ***always*** have `to` defined. ( and optionally an
`onClick` ).
`ChipLinks` cannot be used as buttons anymore

## Factorization
Deleted the `RecordIndexRecordChip.tsx` file ( aka
`RecordIdentifierChip` component ) that was duplicating some logic,
refactored the `RecordChip` in order to handle what was covered by
`RecordIdentifierChip`

## Conclusion
As always any suggestions are more than welcomed ! Took few opinionated
decision/refactor regarding nested long ternaries rendering `ReactNode`
elements

## Misc


https://github.com/user-attachments/assets/8ef11fb2-7ba6-4e96-bd59-b0be5a425156

---------

Co-authored-by: Mohammed Razak <mohammedrazak2001@gmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2025-02-25 14:36:17 +00:00
7abc67c905 refactor(forms): simplify form handling and button behavior (#10441)
Removed redundant handleSave and handleSubmit props in domain settings.
Integrated form submission logic directly into form components, ensuring
consistent behavior and reducing complexity. Updated button components
to explicitly support the "type" attribute for improved accessibility
and functionality.

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2025-02-25 10:37:36 +00:00
0220672fa9 Add default role to workspace (#10444)
## Context
Adding a defaultRole to each workspace, this role will be automatically
added when a member joins a workspace via invite link or public link
(seeds work differently though).
Took the occasion to refactor a bit the frontend components, splitting
them in smaller components for more readability.

## Test
<img width="948" alt="Screenshot 2025-02-24 at 14 54 02"
src="https://github.com/user-attachments/assets/13ef1452-d3c9-4385-940c-2ced0f0b05ef"
/>
2025-02-25 11:26:35 +01:00
ff001d9def Add missing translations (#10414)
As per title, add ~200 missing translations in different places of app.
Most places are now available for translation with AI but still some
aren't available - some enums (like in MenuItemSelectColor.tsx) or
values in complex types (like in
SettingsNonCompositeFieldTypeConfigs.ts) or values where are injected
some variables (like in SettingsDataModelFieldNumberForm.tsx)

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
2025-02-23 23:35:03 +01:00
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
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
8d8bd4a597 feedback from Thomas (#10297)
as required by @bonapara
here :
https://discord.com/channels/1130383047699738754/1341421200739536978/1341421200739536978
2025-02-18 19:05:24 +01:00
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
9ef6486b06 Fix autogrowing input glitch (#10224)
- Removed unnecessary resize observer
- Removed unused component
- Fixed autogrowing input glitch

# Before


https://github.com/user-attachments/assets/a7de71d5-bc6e-495f-851c-18df596749dd

# After


https://github.com/user-attachments/assets/63588d0e-1122-43fe-b685-3f3a4ec4114e
2025-02-17 10:10:39 +00:00
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
ea07692abb refactor(ui/settings): update styles and improve structure (#10201)
Adjusted border color in SettingsRadioCard for better visual hierarchy.
Simplified grid template layout in SSO form for consistency. Enhanced
HorizontalSeparator by wrapping text in Label for improved accessibility
and styling.

Fix
https://github.com/twentyhq/core-team-issues/issues/385#event-16262349051

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
2025-02-14 10:19:02 +01:00
193ef432a0 add object settings permission tab (#10159)
## Context
Introducing the "Permissions" tab in the role page

Next: Need to address some css improvements, some components might be
reusable and it still does not fully match the figma (icon missing for
permission types for example). We decided to merge like this for now so
we have something functional and I will update the code in an upcoming
PR

<img width="633" alt="Screenshot 2025-02-12 at 13 54 16"
src="https://github.com/user-attachments/assets/762db5d7-e0a6-4ee1-b299-24de6645bad1"
/>
2025-02-12 18:49:50 +01:00