Commit Graph

25 Commits

Author SHA1 Message Date
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
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
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
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
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
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
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
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
18dea07344 Create many steps in a row (#9727)
Fixes
https://discord.com/channels/1130383047699738754/1329099124515274823
2025-01-17 18:12:11 +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
530a18558b 9426 migrate workflow pages to command menu (#9515)
Closes twentyhq/core-team-issues#53 

- Removes command menu top bar text input when the user is not on root
page
- Fixes bug when resetting command menu context
- Added animations on command menu open and close
- Refactored workflow visualizer code to remove unnecessary rerenders
and props drilling


https://github.com/user-attachments/assets/1da3adb8-220b-407b-9279-30354d3100d3
2025-01-13 16:53:57 +01:00
7d7955fc65 Move capitalize into twenty-shared (#9414)
capitalize had been moved into twenty-shared. Let's remove the
duplicates in server and front !
2025-01-07 14:25:29 +00:00
c61831c78a Workflow dark mode improvements (#9412)
## Dark mode

Old vs New

![CleanShot 2025-01-06 at 17 49
19@2x](https://github.com/user-attachments/assets/4fda3da0-3a84-43b5-a60b-ee2f3356e540)

![CleanShot 2025-01-06 at 17 49
32@2x](https://github.com/user-attachments/assets/e2aa498a-fa4d-41d3-af20-fa3ab605bbab)

## Light mode

Old vs New

![CleanShot 2025-01-06 at 17 49
11@2x](https://github.com/user-attachments/assets/0587d18f-4f1d-42bd-94a5-9e06be685bb3)

![CleanShot 2025-01-06 at 17 49
01@2x](https://github.com/user-attachments/assets/aacbc40c-c477-4ece-bed2-12cdf18ab705)
2025-01-06 18:07:23 +01:00
5da744ebc5 Continue workflow folders re-ordering (#9315)
- put actions in steps
- move hooks
- move states
2025-01-02 12:23:07 +00:00
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