twenty/packages/twenty-ui
Baptiste Devessier e49acae851
Visualize Workflows (#6697)
## Features

- Fetch a workflow and display it in a tree with the React Flow library
- The nodes are positioned by an algorithm
- The feature is put behind a feature flag. The `/workflow/:id` route is
disabled if the flag is off.
- I started implementing a right drawer. That's a big WIP and it will be
finished in another PR.

## How to test this feature

1. Create a workflow instance in the database through a GraphQL query.
See below for instructions.
2. After enabling the feature flag, you should be able to see the
workflow you created in the workflows list. To visualize the workflow,
go to the `/workflow/:id` page where the id is the id of the workflow.
See the video for a quick way to do so.

```gql
// First
mutation createWorkflow($data: WorkflowCreateInput!) {
  createWorkflow(data: $data) {
    id
  }
}

// Result
{
  "data": {
    "name": "test"
  }
}

// Second
mutation createWorkflowVersion($data: WorkflowVersionCreateInput!) {
  createWorkflowVersion (data: $data) {
    id
  }
}

// Result
{
  "data": {
    "name": "v1",
    "trigger": {
  "name": "trigger",
"displayName": "New or Updated Row",
"type": "DATABASE_EVENT",
"settings": {
"eventName": "company.created",
"triggerName": "Company Created"
},
  "nextAction": {
    "name": "step_1",
    "displayName": "Code",
    "type": "CODE",
    "valid": true,
    "settings": {
      "serverlessFunctionId": "function_id",
      "errorHandlingOptions": {
        "retryOnFailure": {
          "value": false
        },
        "continueOnFailure": {
          "value": false
        }
      }
    }
  }
},
"workflowId": "workflow_id"
  }
}
```


https://github.com/user-attachments/assets/42bbd98c-5e13-447c-9307-461a18ac2195
2024-08-23 17:50:13 +02:00
..
__mocks__ Refactor default value for select (#5343) 2024-05-10 10:26:46 +02:00
.storybook added typechecking for all ts files (#6466) 2024-08-20 11:05:13 +02:00
scripts refactor: move @/ui/display/icon to twenty-ui (#4820) 2024-04-12 15:30:48 +02:00
src Visualize Workflows (#6697) 2024-08-23 17:50:13 +02:00
.eslintrc.cjs fix: fix storybook:build memory allocation error in CI (#5284) 2024-05-03 19:19:21 +02:00
jest.config.ts Refactor default value for select (#5343) 2024-05-10 10:26:46 +02:00
package.json Bump version to 0.23.2 2024-08-21 15:39:55 +02:00
project.json Clarify storybook tests (#6073) 2024-06-30 20:02:13 +02:00
README.md fix: attempt to fix Dockerfile front build (#5020) 2024-04-18 11:24:39 +02:00
setupTests.ts chore: include react components in twenty-ui test config (#4709) 2024-04-04 12:30:49 +02:00
tsconfig.build.json added typechecking for all ts files (#6466) 2024-08-20 11:05:13 +02:00
tsconfig.dev.json added typechecking for all ts files (#6466) 2024-08-20 11:05:13 +02:00
tsconfig.json added typechecking for all ts files (#6466) 2024-08-20 11:05:13 +02:00
tsconfig.spec.json chore: add incremental typecheck to twenty-ui (#4947) 2024-04-15 12:15:29 +02:00
tsconfig.storybook.json chore: add incremental typecheck to twenty-ui (#4947) 2024-04-15 12:15:29 +02:00
vite.config.ts added typechecking for all ts files (#6466) 2024-08-20 11:05:13 +02:00

Twenty UI

This library was generated with Nx.

Building

Run npx nx build twenty-ui to build the library.

Storybook Server

Run npx nx start twenty-ui to start the storybook development server on localhost:6006.

Running unit tests

Run npx nx test twenty-ui to execute the unit tests via Jest.