Commit Graph

167 Commits

Author SHA1 Message Date
brendanlaschke
f9c076df31
o365 calendar sync (#8044)
Implemented:

* Account Connect
* Calendar sync via delta ids then requesting single events


I think I would split the messaging part into a second pr - that's a
step more complex then the calendar :)

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
2024-11-07 18:13:22 +01:00
Igor Kowalski
3ae987be92
folderStructure.json refactor (#8088)
#7911 

If you encounter any issues or have any questions regarding the library,
feel free to write
[here](https://github.com/Igorkowalski94/eslint-plugin-project-structure/discussions/new?category=help),
I’d be happy to help.
2024-10-28 12:06:58 +01:00
Thomas Trompette
2e73d020a3
Text area using variables (#8034)
- Adding multiline props to component
- Update design and logic accordingly 
- Fix hotkey scope for right drawer



https://github.com/user-attachments/assets/65ff9641-71a4-4828-a62b-e09327b63150
2024-10-25 12:55:56 +00:00
Thomas Trompette
2e8b8452c1
Add available variables dropdown (#7964)
- Add variable dropdown
- Insert variables on click
- Save variable as `{{stepName.object.myVar}}` and display only `myVar`


https://github.com/user-attachments/assets/9b49e32c-15e6-4b64-9901-0e63664bc3e8
2024-10-23 18:32:10 +02:00
Antoine Moreaux
0f0a7966b1
feat(sso): allow to use OIDC and SAML (#7246)
## What it does
### Backend
- [x] Add a mutation to create OIDC and SAML configuration
- [x] Add a mutation to delete an SSO config
- [x] Add a feature flag to toggle SSO
- [x] Add a mutation to activate/deactivate an SSO config
- [x] Add a mutation to delete an SSO config
- [x] Add strategy to use OIDC or SAML
- [ ] Improve error management

### Frontend
- [x] Add section "security" in settings
- [x] Add page to list SSO configurations
- [x] Add page and forms to create OIDC or SAML configuration
- [x] Add field to "connect with SSO" in the signin/signup process
- [x] Trigger auth when a user switch to a workspace with SSO enable
- [x] Add an option on the security page to activate/deactivate the
global invitation link
- [ ] Add new Icons for SSO Identity Providers (okta, Auth0, Azure,
Microsoft)

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
2024-10-21 20:07:08 +02:00
uluckydev
5416773951
Fix Storybook Configuration for Windows Development Environment (#7904)
#### Description
This PR resolves issue #7903 regarding the Storybook configuration for
Windows development environments. Previously, the configuration script
generated forward slashes instead of backslashes, leading to errors when
running the command `npx nx run twenty-front:storybook:serve:dev
--configuration=modules` on Windows systems.

#### Changes Made
- Updated the Storybook configuration to ensure that backslashes are
used in file paths for Windows environments, preventing command
execution errors.

#### How to Test
1. **Run Storybook Command**:
   - On a Windows machine, execute the command:
     ```
     npx nx run twenty-front:storybook:serve:dev --configuration=modules
     ```
- Ensure that the command runs successfully without any path-related
errors.

2. **Verify Configuration**:
- Check the Storybook configuration files to confirm that paths are
using backslashes where applicable.
- Test the same command on non-Windows environments to verify that there
are no regressions.

#### Related Issue
- Fixes #7903
2024-10-21 18:28:31 +02:00
Charles Bochet
eccf0bf8ba
Enforce front project structure through ESLINT (#7863)
Fixes: https://github.com/twentyhq/twenty/issues/7329
2024-10-20 20:20:19 +02:00
Thomas Trompette
f338d01b4f
Build code introspection service (#7760)
Starting to use ts-morph to retrieve function parameters
2024-10-17 15:08:42 +02:00
Charles Bochet
73cb8c5561 Re-add nivo to twenty-website package 2024-10-13 19:50:56 +02:00
martmull
29bd74feea
7203 support emails links phones in zapier inputs 2 (#7562)
## Done
- add `EMAILS`, `PHONES`, `LINKS`, `RICH_TEXT`, `POSITION`, and `ARRAY`
field support in Twenty zapier integration
- fix `twenty-zapier` package tests and requirements

## Emails
<img width="791" alt="image"
src="https://github.com/user-attachments/assets/7987a1a2-6076-4715-9221-d4a1898b7634">

## Links
<img width="797" alt="image"
src="https://github.com/user-attachments/assets/b94ce972-fae2-4953-b9e8-79c0478f5f60">

## Phones
<img width="789" alt="image"
src="https://github.com/user-attachments/assets/7234eaaf-40b8-4772-8880-c58ba47618c5">

## Array
<img width="834" alt="image"
src="https://github.com/user-attachments/assets/99cb6795-e428-40ea-9c3a-d52561c2c6e1">
2024-10-10 15:32:06 +02:00
Ana Sofia Marin Alexandre
f901512a4f
Add webhook response graph from the last 5 days (#7487)
#7346 #7343 #7342 #7344 

Before:

<img width="799" alt="Screenshot 2024-10-08 at 11 59 37"
src="https://github.com/user-attachments/assets/a1cd1714-41ed-4f96-85eb-2861e7a8b2c2">


Now:

![Screenshot 2024-10-07 at 18 56
21](https://github.com/user-attachments/assets/c87ee17a-c6c4-4938-b024-aaa635bab022)


In order to test:

1. Set ANALYTICS_ENABLED to true
2. Set TINYBIRD_TOKEN to your token from the workspace
_twenty_analytics_playground_
3. Write your client tinybird token in
SettingsDeveloppersWebhookDetail.tsx in line 93
4. Create a Webhook in twenty and set wich events it needs to track
5. Run twenty-worker in order to make the webhooks work.
6. Do your tasks in order to populate the data
7. Enter to settings> webhook>your webhook and the statistics section
should be displayed.
2024-10-09 15:41:41 +02:00
Charles Bochet
4008f8f40e
Add redis to contributor guide (#7369)
## Context

We are adding redis to default twenty configuration. 

## What

1. This PR sets up the local setup for contributors accordingly

2. I'm also updating the code blocks guide:

Before:
<img width="921" alt="image"
src="https://github.com/user-attachments/assets/2203cc99-b5a5-4d05-a8b1-98a348aee9df">


After:
<img width="921" alt="image"
src="https://github.com/user-attachments/assets/5b3e6f34-723d-4309-888b-c02ce794891d">
2024-10-01 15:21:45 +02:00
ad-elias
9d36493cf0
Date filter improvements (#5917) (#7196)
Solves issue #5917.

This PR is now ready for the first review!

Filters do not fully work yet, there's a problem applying multiple
filters like the following:

```
{
  and: [
    {
      [correspondingField.name]: {
        gte: start.toISOString(),
      } as DateFilter,
    },
    {
      [correspondingField.name]: {
        lte: end.toISOString(),
      } as DateFilter,
    },
  ],
}
```

I'll do my best to dig into it tonight!

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
2024-09-27 15:57:38 +02:00
Félix Malfait
6d5d73fbe8
Improve snackbar and fix sentry (#7181)
- Improve snackbar to enable displaying multi-line message (so far we
only displayed the first few words which was very frustrating)

- Followup on previous issue to enable tim@apple.dev on the demo
workspace (prefilled automatically)

- Fix sentry tracing which had been broken when migrating from v7 to v8
2024-09-21 06:33:15 +02:00
Félix Malfait
3025ac346c
Upgrade sentry (#7145)
Upgrave Sentry to v8 and add Sentry Cron monitoring

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2024-09-19 18:09:24 +02:00
Charles Bochet
759eb3070e
Improve demo seed (#7125)
We have a few issues on demo seeding:
- redis metdata cache was not flushed
- server ram graphql schema cache was not cleared on metadata version
increment
2024-09-18 17:35:08 +02:00
nitin
0dbd4a7665
removed @chakra-ui dependencies (#7004)
Issue #6976 
@FelixMalfait 

I could not do
```
import { Banner } from 'twenty-ui';

const StyledBanner = styled(Banner)
  display: flex;
  align-items: center;
  padding: ${({ theme }) => theme.spacing(8)};
  position: absolute;
  border-radius: 8px;
  &:hover {
    background-color: ${({ theme }) => theme.accent.primary};
  }
;
```
The styles wont get overridden for Banner, so for now I styled a new
banner in `UnmatchColumnBanner` which is inconsistent.
I couldnt figure out why css properties are not being overridden, need
help!

@Bonapara 
Question - 
Should the click work on entire banner or just cheveron? For now it just
on cheveron click.


https://github.com/user-attachments/assets/0f409e78-a341-4f26-af74-117e4b2775a9

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2024-09-14 16:55:17 +02:00
martmull
3190f4a87b
6658 workflows add a first twenty piece email sender (#6965) 2024-09-12 11:00:25 +02:00
martmull
7e03419c16
Serverless function improvements (#6769)
- add layer for lambda execution
- add layer for local execution
- add package resolve for the monaco editor
- add route to get installed package for serverless functions
- add layer versioning
2024-09-02 15:25:20 +02:00
Charles Bochet
ef4f2e43b0
Fix Website build CD (#6751)
Website CD has been broken by the recent addition of typeorm patch in
root package.json

Our current vision is to add npm package to each twenty-package
package.json directly
2024-08-27 14:13:05 +02:00
BOHEUS
b1fbf4b683
E2E tests (#6717)
Continuation of #6644 

Now chromium browser is used in workspaces tests instead of firefox and
screenshots after each test are properly saved in one folder when run
from IDE and from terminal using `yarn test:e2e` command
2024-08-27 11:07:10 +02:00
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
Naineel Soyantar
4c5fc2311f
chore: upgrade aws-sdk v2 to v3 (#6643) (#6693)
Fixes (#6643)

- According to `aws-sdk` v3, each service is packaged as a separate
module, and the codebase uses all of the required AWS services
accordingly. Therefore, removing the direct dependency on `aws-sdk:v2`
to resolve the warning shown in (#6643)

Co-authored-by: Charles Bochet <charles@twenty.com>
2024-08-23 12:10:18 +02:00
Charles Bochet
08e07ac2d5 Update graphql-yoga patch in yarn.lock 2024-08-21 00:39:55 +02:00
Nabhag Motivaras
197bca57ba
feat(e2e): twenty-e2e-testing with playwright (#6539)
## ISSUE (e2e) - Introduces e2e for twenty

 - Closes #6360
 
##  Description

- [x] Create Package. 
- [x] Setup environments such as baseUrl.
- [x] ignore CI configuration for now.
- [x] write a simple test to check if table is visible in companies tab.

### Running test with UI

```
yarn run test:e2e:ui
```

https://github.com/user-attachments/assets/a7b7ae35-8898-461e-8c7c-d3e4e9515aeb

### Running all test and seeing report

```
yarn run test:e2e
yarn run test:e2e:report
```



https://github.com/user-attachments/assets/2558a1f9-97cc-4f06-86f0-806f207eac5a

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-08-14 17:23:32 +02:00
Félix Malfait
f2cc385710
Fix frontend tests (#6585)
Fix a few broken tests
2024-08-09 08:38:01 +02:00
nitin
774cb554f4
removed @blocknote/core from dependencies (#6580)
Fixes #6564  & #6561 

@FelixMalfait 

Removed @blocknote/core from dependencies



https://github.com/user-attachments/assets/ef6acfff-2945-4062-a35c-21dd108a4345

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2024-08-08 15:44:09 +02:00
Weiko
5b7933a6ab
bump lock file (#6568)
ran `yarn` to bump lock file
2024-08-07 15:06:34 +02:00
Jérémy M
11a41b3d97
feat: created by email calendar (#6536)
This PR is a followup of #6324 to add support of EMAIL and CALENDAR
source for the created by composite field.
2024-08-07 15:03:06 +02:00
Jérémy M
6432ad39b9
feat: add new ACTOR field type and createdBy standard fields (#6324)
This pull request introduces a new `FieldMetadataType` called `ACTOR`.
The primary objective of this new type is to add an extra column to the
following objects: `person`, `company`, `opportunity`, `note`, `task`,
and all custom objects.

This composite type contains three properties:

- `source`
    ```typescript
    export enum FieldActorSource {
      EMAIL = 'EMAIL',
      CALENDAR = 'CALENDAR',
      API = 'API',
      IMPORT = 'IMPORT',
      MANUAL = 'MANUAL',
    }
    ```
- `workspaceMemberId`
- This property can be `undefined` in some cases and refers to the
member who created the record.
- `name`
- Serves as a fallback if the `workspaceMember` is deleted and is used
for other source types like `API`.

### Functionality

The pre-hook system has been updated to allow real-time argument
updates. When a record is created, a pre-hook can now compute and update
the arguments accordingly. This enhancement enables the `createdBy`
field to be populated with the correct values based on the
`authContext`.

The `authContext` now includes:
- An optional User entity
- An optional ApiKey entity
- The workspace entity

This provides access to the necessary data for the `createdBy` field.

In the GraphQL API, only the `source` can be specified in the
`createdBy` input. This allows the front-end to specify the source when
creating records from a CSV file.

### Front-End Handling

On the front-end, `orderBy` and `filter` are only applied to the name
property of the `ACTOR` composite type. Currently, we are unable to
apply these operations to the workspace member relation. This means that
if a workspace member changes their first name or last name, there may
be a mismatch because the name will differ from the new one. The name
displayed on the screen is based on the workspace member entity when
available.

### Missing Components

Currently, this PR does not include a `createdBy` value for the `MAIL`
and `CALENDAR` sources. These records are created in a job, and at
present, we only have access to the workspaceId within the job. To
address this, we should use a function similar to
`loadServiceWithContext`, which was recently removed from `TwentyORM`.
This function would allow us to pass the `authContext` to the jobs
without disrupting existing jobs.
Another PR will be created to handle these cases.

### Related Issues

Fixes issue #5155.

### Additional Notes

This PR doesn't include the migrations of the current records and views.
Everything works properly when the database is reset but this part is
still missing for now. We'll add that in another PR.

- There is a minor issue: front-end tests are broken since this commit:
[80c0fc7ff1).

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
2024-08-03 15:43:31 +02:00
martmull
00fea17920
Serverless function UI (#6388)
https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=36235-120877

Did not do the file manager part. A Function is defined using one unique
file at the moment

Feature protected by featureFlag `IS_FUNCTION_SETTINGS_ENABLED`

## Demo


https://github.com/user-attachments/assets/0acb8291-47b4-4521-a6fa-a88b9198609b
2024-07-29 13:03:09 +02:00
martmull
c3cdb664be
Fix yarn lock (#6402) 2024-07-25 11:40:12 +02:00
martmull
b9c8d607aa
Test revert crm integration (#6321)
PR to test revert integration in production
2024-07-25 09:38:55 +02:00
brendanlaschke
4545ba2737
Update blocknote (#6349)
Updating blocknote providing bugfixes & new block types

---------

Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>
2024-07-22 16:00:14 +02:00
Charles Bochet
41211dc1a6 Fix linter and yarn.lock not being synced 2024-07-19 18:57:38 +02:00
martmull
47ddc7be83
6181 workflows create a custom code executor (#6235)
Closes #6181

## Testing
- download Altair graphql dev tool https://altairgraphql.dev/#download
- create a file locally `test.ts` containing:
```
export const handler = async (event: object, context: object) => {
  return { test: 'toto', data: event['data'] };
}
```
- play those requests in Altair:
mutation UpsertFunction($file: Upload!) {
  upsertFunction(name: "toto", file: $file)
}

mutation ExecFunction {
  executeFunction(name:"toto", payload: {data: "titi"})
}
- it will run the local driver, add those env variable to test with
lambda driver
```
CUSTOM_CODE_ENGINE_DRIVER_TYPE=lambda
LAMBDA_REGION=eu-west-2
LAMBDA_ROLE=<ASK_ME>
```
2024-07-17 17:53:01 +02:00
Félix Malfait
aa2218900c
Fix website doc search (#6134)
NEXT_PUBLIC environnement variable values are set at build time and not
run time.
Build is currently performed in Github actions so setting those vars at
runtime has no effect.
We can use a package to automatically pass those variables at runtime
2024-07-04 16:46:18 +02:00
ad-elias
4c642a0bb8
Text-to-SQL proof of concept (#5788)
Added:
- An "Ask AI" command to the command menu.
- A simple GraphQL resolver that converts the user's question into a
relevant SQL query using an LLM, runs the query, and returns the result.

<img width="428" alt="Screenshot 2024-06-09 at 20 53 09"
src="https://github.com/twentyhq/twenty/assets/171685816/57127f37-d4a6-498d-b253-733ffa0d209f">

No security concerns have been addressed, this is only a
proof-of-concept and not intended to be enabled in production.

All changes are behind a feature flag called `IS_ASK_AI_ENABLED`.

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2024-07-04 08:57:26 +02:00
bosiraphael
4f9527c860
5901 refactor email and calendar auto contact creation to create them by batch (#6038)
Closes #5901
2024-06-27 16:37:34 +02:00
Félix Malfait
dbaa787d19
website / Fix broken links, slow loading, and prod errors (#5932)
The code is in a bad state, this is just fixing it but not improving the
structure
2024-06-18 18:40:19 +02:00
Jérémy M
d99b9d1d6b
feat: Enhancements to MessageQueue Module with Decorators (#5657)
### Overview

This PR introduces significant enhancements to the MessageQueue module
by integrating `@Processor`, `@Process`, and `@InjectMessageQueue`
decorators. These changes streamline the process of defining and
managing queue processors and job handlers, and also allow for
request-scoped handlers, improving compatibility with services that rely
on scoped providers like TwentyORM repositories.

### Key Features

1. **Decorator-based Job Handling**: Use `@Processor` and `@Process`
decorators to define job handlers declaratively.
2. **Request Scope Support**: Job handlers can be scoped per request,
enhancing integration with request-scoped services.

### Usage

#### Defining Processors and Job Handlers

The `@Processor` decorator is used to define a class that processes jobs
for a specific queue. The `@Process` decorator is applied to methods
within this class to define specific job handlers.

##### Example 1: Specific Job Handlers

```typescript
import { Processor, Process, InjectMessageQueue } from 'src/engine/integrations/message-queue';

@Processor('taskQueue')
export class TaskProcessor {

  @Process('taskA')
  async handleTaskA(job: { id: string, data: any }) {
    console.log(`Handling task A with data:`, job.data);
    // Logic for task A
  }

  @Process('taskB')
  async handleTaskB(job: { id: string, data: any }) {
    console.log(`Handling task B with data:`, job.data);
    // Logic for task B
  }
}
```

In the example above, `TaskProcessor` is responsible for processing jobs
in the `taskQueue`. The `handleTaskA` method will only be called for
jobs with the name `taskA`, while `handleTaskB` will be called for
`taskB` jobs.

##### Example 2: General Job Handler

```typescript
import { Processor, Process, InjectMessageQueue } from 'src/engine/integrations/message-queue';

@Processor('generalQueue')
export class GeneralProcessor {

  @Process()
  async handleAnyJob(job: { id: string, name: string, data: any }) {
    console.log(`Handling job ${job.name} with data:`, job.data);
    // Logic for any job
  }
}
```

In this example, `GeneralProcessor` handles all jobs in the
`generalQueue`, regardless of the job name. The `handleAnyJob` method
will be invoked for every job added to the `generalQueue`.

#### Adding Jobs to a Queue

You can use the `@InjectMessageQueue` decorator to inject a queue into a
service and add jobs to it.

##### Example:

```typescript
import { Injectable } from '@nestjs/common';
import { InjectMessageQueue, MessageQueue } from 'src/engine/integrations/message-queue';

@Injectable()
export class TaskService {
  constructor(
    @InjectMessageQueue('taskQueue') private readonly taskQueue: MessageQueue,
  ) {}

  async addTaskA(data: any) {
    await this.taskQueue.add('taskA', data);
  }

  async addTaskB(data: any) {
    await this.taskQueue.add('taskB', data);
  }
}
```

In this example, `TaskService` adds jobs to the `taskQueue`. The
`addTaskA` and `addTaskB` methods add jobs named `taskA` and `taskB`,
respectively, to the queue.

#### Using Scoped Job Handlers

To utilize request-scoped job handlers, specify the scope in the
`@Processor` decorator. This is particularly useful for services that
use scoped repositories like those in TwentyORM.

##### Example:

```typescript
import { Processor, Process, InjectMessageQueue, Scope } from 'src/engine/integrations/message-queue';

@Processor({ name: 'scopedQueue', scope: Scope.REQUEST })
export class ScopedTaskProcessor {

  @Process('scopedTask')
  async handleScopedTask(job: { id: string, data: any }) {
    console.log(`Handling scoped task with data:`, job.data);
    // Logic for scoped task, which might use request-scoped services
  }
}
```

Here, the `ScopedTaskProcessor` is associated with `scopedQueue` and
operates with request scope. This setup is essential when the job
handler relies on services that need to be instantiated per request,
such as scoped repositories.

### Migration Notes

- **Decorators**: Refactor job handlers to use `@Processor` and
`@Process` decorators.
- **Request Scope**: Utilize the scope option in `@Processor` if your
job handlers depend on request-scoped services.

Fix #5628

---------

Co-authored-by: Weiko <corentin@twenty.com>
2024-06-17 09:49:37 +02:00
martmull
3986824017
5623 add an inviteteam onboarding step (#5769)
## Changes
- add a new invite Team onboarding step
- update currentUser.state to currentUser.onboardingStep

## Edge cases
We will never display invite team onboarding step 
- if number of workspaceMember > 1
- if a workspaceMember as been deleted

## Important changes
Update typeorm package version to 0.3.20 because we needed a fix on
`indexPredicates` pushed in 0.3.20 version
(https://github.com/typeorm/typeorm/issues/10191)

## Result
<img width="844" alt="image"
src="https://github.com/twentyhq/twenty/assets/29927851/0dab54cf-7c66-4c64-b0c9-b0973889a148">



https://github.com/twentyhq/twenty/assets/29927851/13268d0a-cfa7-42a4-84c6-9e1fbbe48912
2024-06-12 21:13:18 +02:00
Lucas Bordeau
03b3c8a67a
Refactored all FieldDisplay types for performance optimization (#5768)
This PR is the second part of
https://github.com/twentyhq/twenty/pull/5693.

It optimizes all remaining field types.

The observed improvements are :
- x2 loading time improvement on table rows
- more consistent render time

Here's a summary of measured improvements, what's given here is the
average of hundreds of renders with a React Profiler component. (in our
Storybook performance stories)

| Component | Before (µs) | After (µs) |
| ----- | ------------- | --- |
| TextFieldDisplay | 127 | 83 |
| EmailFieldDisplay | 117 | 83 |
| NumberFieldDisplay | 97 | 56 |
| DateFieldDisplay | 240 | 52 |
| CurrencyFieldDisplay | 236 | 110 |
| FullNameFieldDisplay | 131 | 85 |
| AddressFieldDisplay | 118 | 81 |
| BooleanFieldDisplay | 130 | 100 |
| JSONFieldDisplay | 248 | 49 |
| LinksFieldDisplay | 1180 | 140 |
| LinkFieldDisplay | 140 | 78 |
| MultiSelectFieldDisplay | 770 | 130 |
| SelectFieldDisplay | 230 | 87 |
2024-06-12 18:36:25 +02:00
Lucas Bordeau
732e8912da
Added Linaria for performance optimization (#5693)
- Added Linaria to have compiled CSS on our optimized field displays
- Refactored mocks for performance stories on fields
- Refactored generateRecordChipData into a global context, computed only
when we fetch object metadata items.
- Refactored ChipFieldDisplay 
- Refactored PhoneFieldDisplay
2024-06-12 16:31:07 +02:00
Charles Bochet
a57e251208
Fix docs build in CI (#5826) 2024-06-11 19:06:37 +02:00
Ady Beraud
671de4170f
Migrated Developer Docs (#5683)
- Migrated developer docs to Twenty website

- Modified User Guide and Docs layout to include sections and
subsections

**Section Example:**
<img width="549" alt="Screenshot 2024-05-30 at 15 44 42"
src="https://github.com/twentyhq/twenty/assets/102751374/41bd4037-4b76-48e6-bc79-48d3d6be9ab8">

**Subsection Example:**
<img width="557" alt="Screenshot 2024-05-30 at 15 44 55"
src="https://github.com/twentyhq/twenty/assets/102751374/f14c65a9-ab0c-4530-b624-5b20fc00511a">


- Created different components (Tabs, Tables, Editors etc.) for the mdx
files

**Tabs & Editor**

<img width="665" alt="Screenshot 2024-05-30 at 15 47 39"
src="https://github.com/twentyhq/twenty/assets/102751374/5166b5c7-b6cf-417d-9f29-b1f674c1c531">

**Tables**

<img width="698" alt="Screenshot 2024-05-30 at 15 57 39"
src="https://github.com/twentyhq/twenty/assets/102751374/2bbfe937-ec19-4004-ab00-f7a56e96db4a">

<img width="661" alt="Screenshot 2024-05-30 at 16 03 32"
src="https://github.com/twentyhq/twenty/assets/102751374/ae95b47c-dd92-44f9-b535-ccdc953f71ff">

- Created a crawler for Twenty Developers (now that it will be on the
twenty website). Once this PR is merged and the website is re-deployed,
we need to start crawling and make sure the index name is
‘twenty-developer’
- Added a dropdown menu in the header to access User Guide and
Developers + added Developers to footer


https://github.com/twentyhq/twenty/assets/102751374/1bd1fbbd-1e65-4461-b18b-84d4ddbb8ea1

- Made new layout responsive

Please fill in the information for each mdx file so that it can appear
on its card, as well as in the ‘In this article’ section. Example with
‘Getting Started’ in the User Guide:

<img width="786" alt="Screenshot 2024-05-30 at 16 29 39"
src="https://github.com/twentyhq/twenty/assets/102751374/2714b01d-a664-4ddc-9291-528632ee12ea">

Example with info and sectionInfo filled in for 'Getting Started':

<img width="620" alt="Screenshot 2024-05-30 at 16 33 57"
src="https://github.com/twentyhq/twenty/assets/102751374/bc69e880-da6a-4b7e-bace-1effea866c11">


Please keep in mind that the images that are being used for Developers
are the same as those found in User Guide and may not match the article.

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2024-06-03 18:52:43 +02:00
Aditya Pimpalkar
a12c1aad5e
fix: user has to login every time chrome sidepanel is opened (#5544)
We can pass the auth tokens to our front app via post message, which
will also allow us to pass route names to navigate on it
2024-05-30 12:58:45 +02:00
brendanlaschke
1c867d49a1
Add Object Alternative view (#5356)
Current state:

<img width="704" alt="Bildschirmfoto 2024-05-11 um 17 57 33"
src="https://github.com/twentyhq/twenty/assets/48770548/c979f6fd-083e-40d3-8dbb-c572229e0da3">



I have some things im not really happy with right now:

* If I have different connections it would be weird to display a one_one
or many_one connection differently
* The edges overlay always at one hand at the source/target (also being
a problem with the 3 dots vs 1 dot)
* I would have to do 4 versions of the 3 dot marker variant as an svg
with exactly the same width as the edges wich is not as easy as it seems
:)
* The initial layout is not really great - I know dagre or elkjs could
solve this but maybe there is a better solution ...


If someone has a good idea for one or more of the problems im happy to
integrate them ;)

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2024-05-25 10:38:27 +02:00
Lucas Bordeau
a0178478d4
Feat/performance-refactor-styled-component (#5516)
In this PR I'm optimizing a whole RecordTableCell in real conditions
with a complex RelationFieldDisplay component :
- Broke down getObjectRecordIdentifier into multiple utils
- Precompute memoized function for getting chip data per field with
useRecordChipDataGenerator()
- Refactored RelationFieldDisplay
- Use CSS modules where performance is needed instead of styled
components
- Create a CSS theme with global CSS variables to be used by CSS modules
2024-05-24 18:53:37 +02:00
Thaïs
c7d61e183a
feat: simplify field preview logic in Settings (#5541)
Closes #5382

TODO:

- [x] Test all field previews in app
- [x] Fix tests
- [x] Fix JSON preview
2024-05-24 18:06:57 +02:00