Commit Graph

149 Commits

Author SHA1 Message Date
ead626c2ec 360 workflow implement workflow cron triggers frontend 2 (#10051)
as title, closes https://github.com/twentyhq/core-team-issues/issues/360

## Cron Setting behavior

https://github.com/user-attachments/assets/0de3a8b9-d899-4455-a945-20c7541c3053

## Cron running behavior


https://github.com/user-attachments/assets/4c33f167-857c-4fcb-9dbe-0f9b661c9e61
2025-02-07 17:15:03 +01:00
1403c55625 321 command menu context chips compact version (#10072)
Closes https://github.com/twentyhq/core-team-issues/issues/321

- Create component
- Create stories
- Fix bug due to `WorkflowDiagramCanvasEditableEffect`
2025-02-07 13:48:41 +00:00
3cc66fe712 Remove the source handle for leaf nodes (#10057)
- Do not render a source handle for the leaf nodes
- Upgrade the `@xyflow/react` library

| Before | After |
|--------|--------|
| ![CleanShot 2025-02-06 at 16 21
08@2x](https://github.com/user-attachments/assets/42b7d11b-76bf-43b9-ba91-8d0c5c2f1792)
| ![CleanShot 2025-02-06 at 16 21
24@2x](https://github.com/user-attachments/assets/ac94aa32-45ad-4462-8db9-0078d6252ea4)
|

## Other options considered

React Flow exposes a hook to get the connections of the current node. I
tried to use this hook – which makes things way simpler – but I couldn't
find a way to make it work in Storybook. I had two options: 1. Set up
React Flow to render the nodes properly, 2. Mock the hook in Storybook.

The first option was hard to achieve as the `<Reactflow />` component
renders a whole flow, and it doesn't play well with the idea of
rendering a single node in a story.

The second option seemed overkill as mocking modules with Storybook is
not straightforward. See
https://storybook.js.org/docs/writing-stories/mocking-data-and-modules/mocking-modules.

I chose to keep the initial version of my code, written before I spot a
function simplifying the code. We can give it a look another time.
2025-02-07 13:17:43 +01:00
e21cbb2fe2 Simplify the component layers for workflow nodes (#10042)
- Remove the `WorkflowDiagramBaseStepNode` component
- Create the `WorkflowDiagramStepNodeIcon` component to centralize the
icon put in workflow step nodes; that was the main task of the
`WorkflowDiagramBaseStepNode` component and the new
`WorkflowDiagramStepNodeIcon` component made it obsolete
- Update the `WorkflowDiagramStepNodeBase` component to be THE low level
component
2025-02-06 10:42:32 +01:00
700eb2d473 Add the new workflow not executed node type (#10030)
- Added the new workflow `not executed` node type
- Fixed minor style issues
- Created one big catalog for all node variants


![image](https://github.com/user-attachments/assets/5e510d49-c6a2-42a9-9641-057cff481dd9)
2025-02-05 18:43:46 +01:00
125a0c3419 Create variants for workflow visualizer nodes (#10006)
Closes https://github.com/twentyhq/core-team-issues/issues/332

- Create the success and failed variants
- Introduce the first responsive color
- Creating stories for the new variants

These components are not yet in use in the source code. If you want to
see them, launch Storybook.

| Success | Failure |
|--------|--------|
| ![CleanShot 2025-02-04 at 16 24
43@2x](https://github.com/user-attachments/assets/0dd68a8f-3914-4b6e-b2d8-43108c2f5e8c)
| ![CleanShot 2025-02-04 at 16 24
59@2x](https://github.com/user-attachments/assets/e4e408d3-29fb-4fbc-a277-044aec9b0f4b)
|
| ![CleanShot 2025-02-04 at 16 24
54@2x](https://github.com/user-attachments/assets/d565ee47-1476-475d-adf6-dadfff9c6719)
| ![CleanShot 2025-02-04 at 16 25
05@2x](https://github.com/user-attachments/assets/9a0aabcc-84d1-41e2-a5a1-7c8cb05f963f)
|
2025-02-04 18:38:38 +01:00
7dfb9dd77f Fix send email error when empty connected account (#10005)
- Fix send email error when empty connected account
- Add a global util to valid uuid
- Add an util to check if object is workflow related
2025-02-04 17:13:29 +01:00
2368dad9ad Enable workflow in lab (#9997)
Refresh of `objectmetadataitems` was not happening fast enough. Page was
breaking when enabling the feature flag. Instead of not storing worklow
objects in state, we will use the feature flag to block on read. This
way we avoid race conditions

<img width="1511" alt="Capture d’écran 2025-02-04 à 14 11 56"
src="https://github.com/user-attachments/assets/912cc59a-f422-48ab-84b7-7fdd7bbc35c1"
/>
2025-02-04 15:25:04 +01:00
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
f00e7cc670 Make variable nodes undeletable in a readonly tiptap editor (#9950)
In this PR:

- Refactor how we initialize the content of the tiptap editor; providing
a default value for the editor makes node appear instantly
- Hide the button to remove a variable tag when the editor is readonly

| Editable | Readonly |
|--------|--------|
| ![CleanShot 2025-01-31 at 15 04
25@2x](https://github.com/user-attachments/assets/54b90c80-aab1-4ff0-93f9-a0550f031d82)
| ![CleanShot 2025-01-31 at 15 05
51@2x](https://github.com/user-attachments/assets/0480a7dc-9d7a-4e3f-b1a5-0550548622c6)
|

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2025-01-31 18:00:40 +01:00
ae62789159 Serverless function follow up (#9924)
- remove asynchronous serverless function build
- build serverless function synchronously instead on activate workflow
or execute
- add a loader on workflow code step test tab test button
- add a new `ServerlessFunctionSyncStatus` `BUILDING`
- add a new route to build a serverless function draft version 
- delay artificially execution to avoid UI flashing



https://github.com/user-attachments/assets/8d958d9a-ef41-4261-999e-6ea374191e33
2025-01-31 17:12:42 +01:00
d946cdcba4 Disable the fields of all CRUD workflow actions on readonly mode (#9939)
Fixes
https://discord.com/channels/1130383047699738754/1333822806504247467

In this PR:

- Make the workflow step title input readonly when the visualizer is in
readonly mode
- Make all the fields of the Update Record and Delete Record readonly
when the visualizer is in readonly mode
- Create stories for the Create Record, Updated Record and Delete Record
actions; I'm checking for the default mode and several variants of the
disabled mode
- Set up mocks for the workflows and use them in msw handlers

Follow up:

- We use `readonly` and `disabled` alternatively; these are two
different states when talking about a HTML `<input />` element. I think
we should settle on a single word.
- Refactor the `<WorkflowSingleRecordPicker />` component to behave as
other selects

| Current component | Should look like |
|--------|--------|
| ![CleanShot 2025-01-30 at 17 30
29@2x](https://github.com/user-attachments/assets/104f2e7f-d758-4121-987a-f62f2e138df2)
| ![CleanShot 2025-01-30 at 17 30
49@2x](https://github.com/user-attachments/assets/e74b318e-a41a-40b9-9db8-bcc8015a1d67)
|
2025-01-31 12:31:57 +01:00
4e32fd1c98 Fix refetch on workflow status update (#9946)
Refetch was not set-up properly on activation/deactivation
2025-01-31 11:19:53 +01:00
460253ab98 Use refetch instead of cache modify when activating/deactivating a workflow (#9937)
Workflow version statuses are too complex to handle in cache. You always
need to:
- modify entity in cache
- modify queries in cache
- do the same for all other version statuses that should also be updated

This complex behavior leads to bugs because of a cache wrongly updated.

Let's simply do a refetch versions on status update.
2025-01-30 17:30:50 +01:00
afed36ef5b Remove before-after + fix header label (#9932)
- Fix header label on step

Before
<img width="224" alt="Capture d’écran 2025-01-30 à 12 11 27"
src="https://github.com/user-attachments/assets/e04e2d83-2414-4a92-a307-159e1ca16c64"
/> <img width="224" alt="Capture d’écran 2025-01-30 à 13 27 40"
src="https://github.com/user-attachments/assets/72e2c567-7ee0-43ff-9ae2-898e46d677c1"
/>

After
<img width="224" alt="Capture d’écran 2025-01-30 à 13 29 00"
src="https://github.com/user-attachments/assets/e7e458ab-458d-4e84-98a2-63596f44e0e7"
/> <img width="224" alt="Capture d’écran 2025-01-30 à 13 29 25"
src="https://github.com/user-attachments/assets/df1b0cbd-c8f2-44f6-b2f6-944e5ec8e14f"
/>



- Remove before - after when there is only one of them
2025-01-30 16:19:47 +00:00
9ec524213c Localization of actions (#9934)
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
2025-01-30 17:00:35 +01:00
85df6ada52 Prevent all workflow node and edge deletions made through the UI (#9918)
## Old

In the demo, I press the `Delete` key multiple times, and it deletes the
nodes.


https://github.com/user-attachments/assets/75bf84d3-b182-488c-a781-bbe236985142

## New


https://github.com/user-attachments/assets/4ae4f387-e143-4ce8-8140-6cb2c549f5d2
2025-01-29 18:29:01 +01:00
03f3ccd060 Fix workflow edges color (#9917)
Fixes
https://discord.com/channels/1130383047699738754/1333831150535442462
2025-01-29 18:04:32 +01:00
ce0a6c1b17 Fix empty trigger on readonly + fix cache apollo on deactivation (#9912)
- On deactivation, we should not need to refresh so the workflow
disappear from cmd+k


https://github.com/user-attachments/assets/826fa4c6-3faa-49d1-b180-ed5d3ed187e5

- When readonly, step empty, we should not see the right drawer


https://github.com/user-attachments/assets/b557ef61-da81-446d-b160-f26c4c7a5191
2025-01-29 17:25:20 +01:00
7536a5a9a0 Add missing fields in update action (#9908)
Fix https://discord.com/channels/1130383047699738754/1333806855264145500
2025-01-29 14:23:21 +00:00
5329dd0c63 Disable variable picker when no available variables (#9894)
- Disable variable picker when no available variables
(https://discord.com/channels/1130383047699738754/1331236819227906049)
<img width="496" alt="image"
src="https://github.com/user-attachments/assets/e4cb97c8-648c-4bdf-b230-49687113c9e6"
/>
2025-01-28 18:53:26 +01:00
1e9dce3fd5 Fix the design of the Variable chip (#9871)
- Use a React component for variable tags in tiptap
- Fix the design of the variable chip
- Always display a button to delete the chip

![CleanShot 2025-01-28 at 12 35
55@2x](https://github.com/user-attachments/assets/d78ffa52-fcc3-4bbc-b427-68edde255408)
2025-01-28 14:59:45 +01:00
069c34cd7b Add link on snack bar (#9873)
Add link to workflow execution 

<img width="639" alt="Capture d’écran 2025-01-27 à 18 15 34"
src="https://github.com/user-attachments/assets/f2a1b3b5-7bf6-4b33-bba7-bf8907f6bcc6"
/>
2025-01-28 11:26:20 +01:00
7362558e30 Reset selectedStep with proper step (#9867)
as title
fixes
https://discord.com/channels/1130383047699738754/1331215762840485908
2025-01-27 15:35:29 +01:00
687b61849a Fix rightDrawer padding (#9869)
Fixes
https://discord.com/channels/1130383047699738754/1331236153713627157
## Before

![image](https://github.com/user-attachments/assets/3b265461-774b-480b-83dd-d3a410cfb31b)

## After

![image](https://github.com/user-attachments/assets/259122fa-3759-4cd6-8698-b94ccd5470bc)
2025-01-27 14:31:47 +00:00
68c4f9cb0d Fix design to match figma (#9864)
As title
Fixes
https://discord.com/channels/1130383047699738754/1331212573902770228

## Before

![image](https://github.com/user-attachments/assets/4b556022-92c3-4197-ab18-91c089117936)

## After

![image](https://github.com/user-attachments/assets/67f97c60-d08b-4ae1-87b4-79c24ae79b93)
2025-01-27 15:23:28 +01:00
c1e84a746c Fix design for select action (#9857)
as title 
fixes
https://discord.com/channels/1130383047699738754/1330945172489371771
2025-01-27 13:29:04 +01:00
fb0b342374 Fix background color in code step right drawer (#9856)
Fixes
https://discord.com/channels/1130383047699738754/1331211019430924380
as title
2025-01-27 12:16:21 +01:00
84c299f8d4 Create a reusable Label component (#9833)
As seen with @Bonapara, I'm creating a Label component and use it in the
workflows.
2025-01-24 19:25:04 +01:00
07dec36976 Tt fast follows 24/01 (#9843)
- Add icons on steps
- Add search input on object selection
- Improve event label
<img width="503" alt="Capture d’écran 2025-01-24 à 17 59 34"
src="https://github.com/user-attachments/assets/4e5d31d6-6fe5-4f78-9112-3fbd6ee66743"
/>
<img width="503" alt="Capture d’écran 2025-01-24 à 17 59 54"
src="https://github.com/user-attachments/assets/7f37402f-3d1a-4bea-9082-05f50a711f35"
/>
<img width="503" alt="Capture d’écran 2025-01-24 à 18 00 08"
src="https://github.com/user-attachments/assets/fffabaff-9d5d-4584-9297-e21434333de0"
/>
2025-01-24 17:25:01 +00:00
29df6e64a0 Fix icon matching + small other fixes on workflows (#9814)
- Record Fields label
- body height fix
- Icons on object picker
- Fix icon matching between nodes and right drawer

<img width="1296" alt="Capture d’écran 2025-01-23 à 18 51 12"
src="https://github.com/user-attachments/assets/ecd5fb00-49cd-416e-96af-9200418294e0"
/>
2025-01-24 15:47:09 +01:00
1a42483aa9 Fix wrong label formatting (#9830)
Fixes
https://discord.com/channels/1130383047699738754/1324785862830985266
## Before
<img width="451" alt="image"
src="https://github.com/user-attachments/assets/53ae96f9-4bbd-40e3-beaa-a5702f2adee4"
/>

## After
<img width="388" alt="image"
src="https://github.com/user-attachments/assets/e36da162-bc60-4596-823b-ffb6ddfed98d"
/>
2025-01-24 15:11:30 +01:00
23400e9679 Normalize the spacing between nodes (#9820)
## Old

![CleanShot 2025-01-23 at 16 38
25@2x](https://github.com/user-attachments/assets/0c8e3b26-5ef4-455a-978e-b430e54b63ba)

![CleanShot 2025-01-23 at 16 38
51@2x](https://github.com/user-attachments/assets/929b73d3-2d7f-45b9-a0fb-62516969bd63)

## New

![CleanShot 2025-01-23 at 17 12
25@2x](https://github.com/user-attachments/assets/670ba386-c643-408d-a682-d279bc81f5c1)
2025-01-23 18:26:51 +01:00
bbb0c9a761 Improve the design of workflow nodes (#9810)
- Go over every node in the workflows and fix the styles to conform to
Figma
- Create stories for every node type
2025-01-23 15:12:37 +00:00
337b6a86ab 251 create top bar chips inside the command menu (#9809)
Closes #https://github.com/twentyhq/core-team-issues/issues/251



https://github.com/user-attachments/assets/065c97fe-1daf-4b48-9d57-6bbb96d24ede
2025-01-23 14:44:21 +01:00
26aca9508b Align the workflow visualizer's nodes on the left (#9776)
**This PR implements a new layout for the visualizer, but the dimensions
of the nodes will change soon. I used hard-coded dimensions, like
`40px`, but I'll update them when I work on fixing the nodes' design. I
think we can merge this PR first and then fix the nodes' design.**



https://github.com/user-attachments/assets/580fa812-ee8e-4452-b6ac-ca55ecb31759
2025-01-22 11:03:36 +01:00
ed7c48e12a Fix use as draft (#9718)
- remove delete serverless function when archiving workflow version
- update copy serverless function to reset serverless function to old
version
- remove createNewWorkflowVersion and use createDraftFromWorkflowVersion
- fix step update issue and optimistic rendering when generate draft
from active version
2025-01-21 15:44:52 +01:00
8e0467e2e4 Workflow E2E tests – batch 2 (#9747)
- Fix the e2e according to the last changes in the workflows
- Create a few more tests regarding the workflow visualizer
2025-01-21 11:46:27 +01:00
e1731bb31e chore: update codegen config for enum naming convention (#9751)
Co-authored-by: etiennejouan <jouan.etienne@gmail.com>
2025-01-21 11:34:33 +01:00
e3f7cec82f Fix import twenty-shared (#9754)
In this PR:
- removing rootDir / baseUrl from any tsconfig.json
- we need to keep it in tsconfig.spec.json and also specify rootDir in
jest.config.ts moduleMapper because of the way nx jest executor works
(automatically moving back to root)
- we need to explictly specify the depencies to twenty-shared /
twenty-emails (built packages) in packages package.json to help nx
understand dependencies
2025-01-20 23:10:39 +01:00
8762af050a Fix action selection design (#9748)
<img width="1512" alt="Capture d’écran 2025-01-20 à 16 24 22"
src="https://github.com/user-attachments/assets/fc1ce873-1b7b-49bc-9ab3-105e16adde2e"
/>
2025-01-20 16:56:19 +00:00
7ed2c12e7a Workflow e2e tests – 1st batch (#9713)
- Clean Playwright's configuration:
  - Remove artificial 500ms delay between each step
- Group all tests under a `chrome` project relying on a `setup` project
to get an authentication state which all tests can reuse
- Changes on the `Sign up with invite link via email` test:
- Generate a new email for each test trial, as previously it was failing
when run many times
- Make deleting the account part of the test; if we write other tests
for account sign-up, we'll prefer to delete the accounts with an HTTP
call to speed up things
- Added some assertions to ensure we reached steps when expected, as we
removed the 500ms delay between each step, and it made some assertions
fail
- Wrote new tests for workflows:
- Created `Create workflow`, a test asserting we can create a workflow
from the record table
- Created `Create simple workflow`, a test asserting we can create a
simple flow; I will add more assertions to this test and write other
tests once this first PR is approved
- I make HTTP calls to delete and destroy workflows after they run to
keep the database clean
- Added a data-testid to ensure we focus elements from the Cmd+K; our
selectors are not strong – see `getByRole('textbox')` – and I preferred
to scope them to a root element
  - Added an `aria-label` to a button

---------

Co-authored-by: prastoin <paul@twenty.com>
2025-01-20 10:59:01 +01:00
d50294d39a Update trigger selection design (#9717)
https://github.com/user-attachments/assets/62bc705a-2f69-4ce7-986f-0208154c9965
2025-01-20 10:54:27 +01:00
056cb7c66d Translation followup (#9735)
Address PR comments and more progress on translation
2025-01-19 13:29:19 +01:00
152902d1be New useNavigateApp (#9729)
Todo : 
- replace all instances of useNavigate(
- remove getSettingsPagePath
- add eslint rule to enfore usage of useNavigateApp instead of
useNavigate
2025-01-18 13:58:12 +01:00
18dea07344 Create many steps in a row (#9727)
Fixes
https://discord.com/channels/1130383047699738754/1329099124515274823
2025-01-17 18:12:11 +01:00
1df0603aaa Fix filter displayed value from query params (#9693)
Filter displayed value that use query params was broken. Recently we
added a new type of filters using the schema `{ selectedRecordIds:
string[] }` while before we were using `string[]` directly.
In that case, when fetching relation record name, we need to fix the
findManyRecord query.

Before
<img width="1512" alt="Capture d’écran 2025-01-16 à 16 10 33"
src="https://github.com/user-attachments/assets/36dc8c4f-91a4-438f-8480-bc237745a59e"
/>

After
<img width="1512" alt="Capture d’écran 2025-01-16 à 16 04 43"
src="https://github.com/user-attachments/assets/544512a3-0ef9-4d3e-993b-a4416737ab53"
/>
2025-01-16 17:16:42 +01:00
7ec48b93eb Use main apollo client for workflows (#9675)
We were using metadata client by legacy. Architecture is not great for
Core engine: workflows are available both in data and metadata client.
It makes more sense to use the data client since workflows are part of
standard objects
2025-01-16 15:21:29 +01:00
c79cb14132 Refetch query on draft creation (#9650)
After hitting use as draft, we redirect the user to the workflow page.
If the user already accessed that page, the workflow and its current
version will be stored in cache. So we also need to update that cache.

I tried to update it manually but it was more complex than expected.
Steps and trigger are not fully defined objects.

I ended with a simple refetch query that I wanted to avoid but that is
at least fully working with minimum logic.
2025-01-16 10:46:23 +01:00
c543a930cd Improve workflow arrows' design (#9619)
Old design:

![CleanShot_2024-11-12_at_17 37
33](https://github.com/user-attachments/assets/1fcaba6d-f23c-4679-b038-d051abeb0bbd)


New design:

![CleanShot 2025-01-14 at 18 22
10@2x](https://github.com/user-attachments/assets/a683163d-2e3c-42ed-8abd-1f1fd31bf7db)
2025-01-14 22:38:44 +01:00