Commit Graph

22 Commits

Author SHA1 Message Date
Abdul Rahman fe5c90ed42 feat: Add drag-to-create node with placeholder preview in workflow diagram (#16873)
Closes #14951

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2026-01-05 13:09:09 +01:00
martmull 0f347e2f42 Fix connection design (#14070)
- refactor edges related files into sub-module
- remove top handle from workflow, workflowVersion and workflowRun
- add a custom design for connection (edge being created)
- connect when hovering a connectable node
- fix marker z-index
- refactor Handles

## Before


https://github.com/user-attachments/assets/013dec36-5cc7-4561-938c-404511118578

<img width="934" height="409" alt="image"
src="https://github.com/user-attachments/assets/2b43c6cb-0bf3-4110-b1cc-b2e50c15c9a8"
/>



## After


https://github.com/user-attachments/assets/a5b32cbf-bfbd-48e6-9889-037234adf38f

<img width="1433" height="599" alt="image"
src="https://github.com/user-attachments/assets/02edc085-9b23-4434-b666-bf25e5c430a8"
/>
2025-08-26 16:33:39 +02:00
martmull 97e5f06ff9 Fix edge design on hover (#14061)
## Before



https://github.com/user-attachments/assets/d44c9c20-fcf0-4f79-8ebf-8e03202c3559

## After



https://github.com/user-attachments/assets/ac7ef2ff-585e-49c1-96f9-63d6bea8de3f
2025-08-25 15:14:05 +02:00
Baptiste Devessier cded145609 Implement new workflow node design (#13929)
## Demo workflows + workflow runs


https://github.com/user-attachments/assets/f2ee9451-37c3-4fce-803e-7696093456c6

## Demo workflow versions


https://github.com/user-attachments/assets/0f40c670-3fb3-4c73-a842-549b31ae26df

## With Branches disabled


https://github.com/user-attachments/assets/a9a39515-dd18-4310-b96e-a42dbebb17d9
2025-08-18 15:40:34 +00:00
Baptiste Devessier 36fcb29e86 Implement proper arrows between nodes for workflows and workflow versions (#13909)
> [!IMPORTANT]
> We still have to implement the new arrows for **workflow runs**. I
kept the old arrows because they currently indicate the success state of
an execution. In the new version, arrows will all look the same,
regardless of the execution state of the previous node, so we'll be able
to use the same arrows everywhere.

## Workflows

You can see that arrows start from the right spot and end just above the
target node. **We will soon remove the round top handle, and the arrow
will gently touch the top of the node.**


https://github.com/user-attachments/assets/febd5f49-393f-4d97-addc-bede5cf6944a

## Workflow versions


https://github.com/user-attachments/assets/e519850f-abd9-4d75-8337-c4c44a2dbfed

Closes https://github.com/twentyhq/core-team-issues/issues/1369
2025-08-14 10:05:42 +02:00
Thomas Trompette 954da6da9d Delete filter on branch deletion (#13834)
When the target is not in the direct next step ids of the source (step
or trigger), check if there is a filter between both. If yes, delete the
filter and remove it from source next step ids.

Also refactored the existing.
2025-08-12 12:30:08 +02:00
Félix Malfait 464a480043 Continue ESLINT9 Migration (#13795)
Might already fix #13793
2025-08-10 23:25:58 +02:00
Baptiste Devessier b8cd4491c2 Replace useOnSelectionChange with onClick listeners for steps opening (#13672)
This PR cleans a few parts of the workflow features and fixes a few
improper behaviors.

Here is a non-exaustive list of improved things:

- Clicking on an action will always reset the command menu's navigation
stack. Previously, the behavior wasn't unified between workflows,
workflow versions and workflow runs.
- Opening a step in the side panel is now down in the `onClick` event
handler put on individual Reactflow nodes. This makes interoperability
between filters (which are buttons on edges) and traditional actions.
- Simplified the code that automatically opens pending forms in the side
panel. This feature should now work more predictably.
- Splitted the `WorkflowDiagramEmptyTrigger` component into
`WorkflowDiagramEmptyTriggerEditable` and
`WorkflowDiagramEmptyTriggerReadonly`. This makes handling events easier
as the behavior isn't the same in both cases.
- Dropped all `useOnSelectionChange` hooks that were used to open steps
in the side panel upon user selection.
- Created a specific `WorkflowRunDiagramStepNode` instead of using
`WorkflowDiagramStepNodeReadonly` in `WorkflowRunDiagramCanvas`
- Deleted `useHandleWorkflowRunDiagramCanvasInit` as it was used to open
the initially selected step in the command menu, which is now handled in
an effect that works for all cases, including workflow run's state
refreshing.

Closes https://github.com/twentyhq/core-team-issues/issues/1227
Closes https://github.com/twentyhq/twenty/issues/11923
2025-08-06 19:00:48 +02:00
martmull 9a05673093 Implement branch front end (#13489)
First PR to support workflow branches on frontend
2025-08-04 14:11:46 +00:00
Baptiste Devessier 924e599cba Open filters in side panel (#13304)
In this PR:

- Open filters in the side panel for **workflows**
- Open filters in the side panel for **workflow versions**
- Preparation for opening filters in the side panel for **workflow
runs**
- Add many tests to increase the coverage

Remaining to do:

- Open filters in the side panel for **workflow runs**
- Upon filter creation, open it in the side panel

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
2025-07-23 10:30:08 +02:00
Baptiste Devessier 0752f24638 Update filter design (#13243)
In this PR:

- Adjust the edges to match the new Figma design
- Properly display the filters for workflows and workflow versions
(replaced shouldDisplayEdgeOptions with isEdgeEditable as we want to
display configured filters on workflow versions, but want to disallow
editing them)
- Wrote a few tests to make coverage pass


https://github.com/user-attachments/assets/d303d338-1938-4efe-b489-5a530d65fb30
2025-07-17 15:36:46 +02:00
Raphaël Bosi 79b8c4660c Fix side panel closing when clicking on workflow nodes or options (#12629)
This bug was introduced by
https://github.com/twentyhq/twenty/pull/12609. This previous PR was made
to prevent interacting with elements behind the side panel when it is
opened. But in the workflow visualizer we need to interact with the
diagram nodes.

Fix: add the workflow visualizer nodes and options to the excluded click
outside ids of the side panel.



https://github.com/user-attachments/assets/1fb770d6-1c17-4ac1-b1a9-ed162bdbe298
2025-06-16 13:52:05 +00:00
martmull cf01faf276 965 flow control arrow menu 1/3 add insert step button (#12519)
Add insert step button to workflow edges



https://github.com/user-attachments/assets/7144f722-f1c7-450f-a8eb-c902071986a1



Also fixes `iconButtonGroup` UI component

## Before


https://github.com/user-attachments/assets/7b5f0245-d0e8-48af-9aa5-a29388a1caea


## After



https://github.com/user-attachments/assets/1820874f-aa99-41ae-8254-c76c275ee3ae
2025-06-12 12:14:21 +00:00
martmull f48145c01b Fix edge x position (#12410)
## Before
<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/59014e1f-8cf1-4a38-8cf7-675104fc8f3d"
/>

## After
<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/93da4dbb-d0ed-417c-86f7-970a4e9858a4"
/>
2025-06-02 14:59:06 +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
Baptiste Devessier 5b7b58c85f Remove dead code about workflow leaf nodes (#10901)
Leaf nodes is no longer a concept in the workflow diagrams. This PR
removes dead code.

Closes https://github.com/twentyhq/core-team-issues/issues/386
2025-03-14 18:33:19 +01:00
Baptiste Devessier 81b2d5bc89 Add workflow run visualizer (#10146)
- Remove the tabs from the workflowRun show page; now, we only show the
visualizer with the nodes highlighted based on the run's output
- Create the `generateWorkflowRunDiagram` function to go other each step
and assign a `runStatus` to it based on the workflow run's output

Remaining to do:

- Show the output of each step in the right drawer when selecting one
- The labels (e.g. "1 item") are not set on the edges; we might
implement that later


https://github.com/user-attachments/assets/bcf22f4c-db8c-4b02-9a1a-62d688b4c28e

Closes https://github.com/twentyhq/core-team-issues/issues/338
Closes https://github.com/twentyhq/core-team-issues/issues/336
2025-02-13 18:57:54 +01:00
Baptiste Devessier 179d3ae2a4 Add workflow success edge (#10120)
- Refactor the handles: the source handles are now part of the edges as
markerStart
- **As the source handles are now part of the edges, we can delete the
`markLeafNodes` logic; this can be done in another PR**. See
https://github.com/twentyhq/core-team-issues/issues/386
- Create a custom edge component for the default edge
- Create a custom edge component for the success edge; this includes a
label

**The edges can be tested in Storybook. I wrote two stories for the
edges.**

| Default | Success |
|--------|--------|
| ![CleanShot 2025-02-11 at 11 46
09@2x](https://github.com/user-attachments/assets/c7c42328-6502-4c77-bdc9-dea825d4651a)
| ![CleanShot 2025-02-11 at 11 46
16@2x](https://github.com/user-attachments/assets/572204de-299c-4cbc-9900-46744b59c351)
|
2025-02-11 13:01:11 +00:00
Baptiste Devessier 03f3ccd060 Fix workflow edges color (#9917)
Fixes
https://discord.com/channels/1130383047699738754/1333831150535442462
2025-01-29 18:04:32 +01:00
Baptiste Devessier 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
Baptiste Devessier 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
Thomas Trompette 9e74ffae52 Refacto workflow folders (#9302)
- Create separated folders for sections
- Add components
- Add utils and clean old ones
- Add constants
- Rename search variables folder and components

Next steps:
- clean hooks
- clean states
2024-12-31 16:08:14 +00:00