Commit Graph

232 Commits

Author SHA1 Message Date
444e97fa3e Fixed date picker UI that was too overloaded (#5039)
Date picker UI was off because of the recent refactor with new field
types Date and DateTime. We had to allow the date picker to edit both.

In this PR we come back to the previous design and we only use the input
to modify time.

Also we use our Select component instead of the ones from the library
`react-datepicker`

---------

Co-authored-by: Weiko <corentin@twenty.com>
2024-04-23 18:45:32 +02:00
68662fa543 [refacto] Introduce stateless TextInputV2 (#5013)
## Context
As discussed with @lucasbordeau and @charlesBochet we are looking at
making low level UI components stateless when possible.
Therefore TextInput should not handle a hotkey state. Instead hotkeys
should be defined in the parent component (as done here in
CreateProfile).

Introducing here TextInputV2 that is stateless and that can already
replace TextInput without any behaviour change everywhere it is used
with `disableHotkey` prop.

## How was it tested?
Locally + Storybook

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-04-22 11:19:41 +02:00
d145684966 New Timeline (#4936)
Refactored the code to introduce two different concepts:
- AuditLogs (immutable, raw data)
- TimelineActivities (user-friendly, transformed data)

Still some work needed:
- Add message, files, calendar events to timeline (~2 hours if done
naively)
- Refactor repository to try to abstract concept when we can (tbd, wait
for Twenty ORM)
- Introduce ability to display child timelines on parent timeline with
filtering (~2 days)
- Improve UI: add links to open note/task, improve diff display, etc
(half a day)
- Decide the path forward for Task vs Notes: either introduce a new
field type "Record Type" and start going into that direction ; or split
in two objects?
- Trigger updates when a field is changed (will be solved by real-time /
websockets: 2 weeks)
- Integrate behavioral events (1 day for POC, 1 week for
clean/documented)

<img width="1248" alt="Screenshot 2024-04-12 at 09 24 49"
src="https://github.com/twentyhq/twenty/assets/6399865/9428db1a-ab2b-492c-8b0b-d4d9a36e81fa">
2024-04-19 17:52:57 +02:00
168358a327 Implement a masked currency input (#5010)
### Description
Implement a masked currency input

### Refs
#4358 

### Demo
https://jam.dev/c/93da117c-b193-488f-b9f9-906b33ac5190

Fixes #4358

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2024-04-18 13:44:07 +02:00
627a6bda29 Update twenty-front commands (#4667)
# This PR

- Moves dev and ci scripts to the `project.json` file in the
twenty-front package
- Adds a project.json file in the root of the project with the main
start command that start both twenty-server and twenty-front
applications concurrently
- Updates the script command of the root project with the start:prod
command (replacing the start command which will be used in dev with the
help of nx)
- Add a start:prod command in the twenty-front app, replacing the start
command (now used for dev purpose)

Issue ref #4645 

@charlesBochet @FelixMalfait please let me know how can I improve it

---------

Co-authored-by: Thaïs Guigon <guigon.thais@gmail.com>
2024-04-17 18:06:02 +02:00
d54e690f0d Fix explicit boolean predicates rule not working with boolean constants (#5009)
### Description
Fix explicit boolean predicates rule not working with boolean constants

### Refs
#4881

### Demo

Fixes #4881

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
2024-04-17 17:06:37 +02:00
75fd430149 Increase storybook pages coverage (#4885)
On FE:
- refreshing metadata mocks
- updating jest tests
- fixing storybook pages coverage
- fixing storybook modules coverage
2024-04-17 16:24:04 +02:00
67db7d85c0 Proposal Date picker overflow (#4996)
Unfortunately, it is not possible in CSS to have an overflow:visible
over x-axis while having an overflow:hidden over y-axis, leading to the
following issue:

<img width="1512" alt="image"
src="https://github.com/twentyhq/twenty/assets/12035771/9b84cbbb-c6c4-4fd6-a630-a24f01eccf73">

I'm refactoring the RecordInlineCell and RecordTableCell to use
useFloating + createPortal to open the cell.
2024-04-17 11:35:45 +02:00
17422b7690 fix: I should be able to use "enter" key to create profile (#4978)
## Context
Fixes #4808 

TL;DR
Introducing pure stateless modal component ("UI modal") for our auth
modal not to have default hotkeyScope overriding our create-profile
hotkeyScope
+ we dont want the shortcut to be available for all the modal content, only for the input that should not be using a hotkeyscope, so we are using onKeyDown for the specific issue on create profile.

Explanation
create-profile hotkey scope is set by PageChangeEffect; CreateProfile
component adds enter key shortcut; but this scope is overwritten by the
default scope by the Modal component that expects a hotkeyScope to reset
to (and defaults to the default hotkeyScope if none indicated).
In the auth flow we were using that Modal component to give a modal look
to the flow but it is not a modal per say, it's a set of pages contained
within a modal look.
By creating this UI component we are escaping that hotkeyScope
overriding that does not make sense in our context.

## How was it tested
Locally
Storybook
2024-04-17 10:45:02 +02:00
19a3be7b1b Date picker for Date and DateTime field input (#4981)
- Implemented correct mask for Date and DateTime field in
InternalDatePicker
- Use only keyDown event and click outside in InternalDatePicker and
DateInput
- Refactored InternalDatePicker UI to have month and year displayed
- Fixed bug and synchronized date value between the different inputs
that can change it

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
2024-04-16 16:58:08 +02:00
d7d9f0c16b Fix ParticipantChip and stories imports (#4974)
- Fix ParticipantChip
- Fix stories imports after some component have been moved to twenty UI
2024-04-15 18:09:05 +02:00
9d992143ff Improve phone input display (#4968)
Small UI improvements to border / display on phone input field
2024-04-15 15:31:22 +02:00
b6d0b8a895 refactor: move Checkmark, Avatar, Chip and Tooltip to twenty-ui (#4946)
Split from https://github.com/twentyhq/twenty/pull/4518

Part of #4766
2024-04-15 12:05:06 +02:00
efcb5dc6d4 New Datetime field picker (#4907)
### Description
New Datetime field picker

### Refs
https://github.com/twentyhq/twenty/issues/4376

### Demo


https://github.com/twentyhq/twenty/assets/140154534/32656323-972c-413a-9986-a78efffae1b4


Fixes #4376

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
2024-04-13 19:07:51 +02:00
9f83cc1426 refactor: move @/ui/display/icon to twenty-ui (#4820)
Split from https://github.com/twentyhq/twenty/pull/4518

Part of https://github.com/twentyhq/twenty/issues/4766
2024-04-12 15:30:48 +02:00
c0b3a8715f 4810 display participants in the right drawer of the calendar event (#4896)
Closes #4810

- Introduces a new component `ExpandableList` which uses intersection
observers to display the maximum number of elements possible
2024-04-12 10:33:46 +02:00
7211730570 New field type: DATE (#4876)
### Description
New field type: DATE

### Refs
https://github.com/twentyhq/twenty/issues/4377

### Demo

https://jam.dev/c/d0b59883-593c-4ca3-966b-c12d5d2e1c32

Fixes #4377

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-04-11 17:29:29 +02:00
c69a3f01da Use defaultValue in currency input (#4911)
- Fix default value sent to backend, using single quotes by default
- Use default value in field definition and column definition so that
field inputs can access it
- Used currency default value in CurrencyFieldInput

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2024-04-11 16:49:00 +02:00
ee64576e5f Fix phone cell display (#4924)
Closes #4796 

## What has been done
- fix phone number value detection
- Update formatting from International format to National format

## Before
phone were formatted as text field type

![image](https://github.com/twentyhq/twenty/assets/29927851/27d87522-5b02-4131-8b83-6bce7501fb1b)

## After
phone are properly formatted in National format

![image](https://github.com/twentyhq/twenty/assets/29927851/72f71b0f-4fd7-4060-afe3-feb87bddab0d)

## FYI
Phones in International format look like

![image](https://github.com/twentyhq/twenty/assets/29927851/6bd47dc1-6350-46b9-b5fd-94f4344bffac)
2024-04-11 16:30:49 +02:00
a7fcc5d47e 4778 multi select field front implement multi select type (#4887) 2024-04-11 12:57:08 +02:00
aecf8783a0 Sync table from frontend (#4894)
This PR:
- separates the existing updateSyncStatus endpoint into 2 endpoints
- creates mutations and hooks that will call those endpoints
- trigger the hook on toggle
- removes form logic and add a separated component for toggling

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
2024-04-11 11:51:49 +02:00
584d90ec89 Create new field type JSON (#4729)
### Description
Create new field type JSON

### Refs
https://github.com/twentyhq/twenty/issues/3900

### Demo


https://github.com/twentyhq/twenty/assets/140154534/9ebdf4d4-f332-4940-b9d8-d9cf91935b67

Fixes #3900

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>
2024-04-11 11:41:36 +02:00
97f9fc3f81 Fixed hotkey bug with Select component and added debug logs for hotkeys (#4879)
- Select component was adding a duplicate useListenClickOutside already
present in useDropdown for closing dropdown.
- Added debug logs for hotkeys scopes
2024-04-08 17:08:30 +02:00
a95972f808 refactor(chore):3896-replace-lodash-debounce-to-useDebounce (#4814)
Close: #3896 

## PR Details

Changed `lodash.debounce` to `useDebounce`.

Co-authored-by: VoitovychDM <voitovych.dm.m@gmail.com>
2024-04-05 19:07:44 +02:00
3df4b78e38 Fix dropdown menu header (#4835)
Fix an issue I add introduced by removing "position:static" and an other
regression from https://github.com/twentyhq/twenty/issues/4366
2024-04-05 10:31:08 +02:00
e8c58ae541 Make field input transparency consistent (#4828)
Minor fix until for the release 0.4.0 until we properly fix all input
background and backdrop-filters
2024-04-04 20:51:41 +02:00
499e1a09e3 Fix ScrollWrapper inner elements padding (#4827)
Closes https://github.com/twentyhq/twenty/issues/4824 and
https://github.com/twentyhq/twenty/issues/4788
2024-04-04 19:19:26 +02:00
e784dc8a98 chore: enable no-console eslint rule for tests and stories (#4816)
Re-enables no-console eslint rule in stories and tests files:
- In stories, use `action` from '@storybook/addon-actions' or `fn` from
'@storybook/test' instead of console.
- In tests, console methods can be mocked like this:
`global.console.error = jest.fn()`.
2024-04-04 18:36:39 +02:00
48b1be9917 Fix ViewPicker create mode: view type switcher (#4821)
In this PR, I'm fixing two things on the ViewPicker in Create mode:
- if the Dropdown has no max height, it should not be scrollable (which
is causing issue with inner dropdowns being cut by overflow: hidden
- if the user has changed the icon, the type or the name of the view,
consider the create form as isDirty and prevent its value to be
overriden by re-renders (cache updates for example)
2024-04-04 18:32:55 +02:00
TRP
9d45f7811e adjust window size for scroll (#4792)
related to #4749. 

Adjusted the max height for window so that it cuts the last option a
little.

I wanted to test the menu from the second pic in the issue with the
multi select option but could not figure out where it was in the
application.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-04-04 15:55:39 +02:00
c5349291c8 chore: setup twenty-ui absolute path alias (#4732)
Split from https://github.com/twentyhq/twenty/pull/4518

- Setup `@ui/*` as an internal alias to reference `twenty-ui/src`.
- Configures twenty-front to understand the `@ui/*` alias on development
mode, so twenty-ui can be hot reloaded.
- When building on production mode, twenty-front needs twenty-ui to be
built beforehand (which is automatic with the `dependsOn` option).
- Configures twenty-front to understand the `@ui/*` alias when launching
tests, so there is no need to re-build twenty-ui for tests.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-04-04 15:38:01 +02:00
04c06e3f91 fix: isIconDisplayedOnHoverOnly marked as required (#4805)
Fix PR #4676, `isIconDisplayedOnHoverOnly` should be provided or not
marked as required
2024-04-04 14:38:54 +02:00
9d2bb33646 fix: Add isIconStatic prop item to allow the icons to be always rendered statically ignoring hover behaviour (#4676)
Fix #4653

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2024-04-04 14:05:56 +02:00
bf8ee99ebb chore: use common eslint config for most packages (#4705)
Split from https://github.com/twentyhq/twenty/pull/4518

Related to #4766 

Mutualizes eslint config between projects.
I didn't include `twenty-server` in this PR as this was causing too many
lint errors.
2024-04-04 12:05:26 +02:00
bcf5268f7f 3886 - Shortcut Sort/Filter (#3901)
Closes #3886

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-04-04 00:43:44 +02:00
bc6db2d8b0 fix panel opening wrapping glitch (#4204) (#4673)
Fix: (#4204)

The issue was that when that panel was opened its content would wrap
instead of maintaining its desired structure. I fixed this bug by adding
a minimum width to the panel's contents so that they would stay
correctly formatted throughout the opening transition.

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2024-04-02 16:20:08 +02:00
bbffde1ca0 New field currency (#4338)
Closes #4122 
---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-04-02 15:29:57 +02:00
8ae6af6bd7 refactor: move createState to twenty-ui (#4716)
Split from https://github.com/twentyhq/twenty/pull/4518

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
2024-04-01 13:22:51 +02:00
a3e5cf37b0 chore: upgrade Nx to v18.1.3 (#4706)
Split from https://github.com/twentyhq/twenty/pull/4518

- Upgrades dependencies and applies automatic config migrations with the
command: `npx nx migrate nx` (see
https://nx.dev/nx-api/nx/documents/migrate)
- Fixes lint errors after upgrading `@typescript-eslint`

Note: it was not possible (for now) to migrate Nx to the latest stable
version (v18.2.1) because it upgrades Typescript to v5.4.3, which seems
to cause a bug on install when Yarn tries to apply its native patches.
Might be a bug on the Yarn side.
2024-04-01 13:16:50 +02:00
5d07b6347e refactor: move Tabler Icon exports to twenty-ui (#4727)
Split from https://github.com/twentyhq/twenty/pull/4518
2024-04-01 13:15:47 +02:00
d24d5a9a2e feat: authorize screen (#4687)
* authorize screen

* lint fix

* add BlankLayout on Authorize route

* typo fix

* route decorator fix

* Unrelated fix

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2024-03-31 12:23:56 +02:00
aacb3763e7 Fix overlay scroll gaps (#4512)
* fix overlay scroll leaving gap

* fixed tests

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2024-03-31 10:53:37 +02:00
7f3623239a 4410-feat(front): Implement Confirmation Prompt for Multiple Record Deletion (#4514)
* feat: implement confirmation prompt

* feat: remove prop drilling and introduce recoil state

* chore: fix eslint issues

* feat: set record text according to length of records

* chore: fix eslint issues

* refactor: made changes according to code review

* fix: show delete according to singular and plural records.

* fix: eslint issues

* feat: show number of selected records

* style: fix positioning of actionbar

* feat: display ConfirmationModal seperately

* chore: remove recoil state and use usestate instead

* chore: minor change

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2024-03-29 18:18:21 +01:00
743e203bc7 fix icon search menu (#4565) (#4712) 2024-03-29 15:20:32 +01:00
00eee3158e 4698-Renamed to inbox (#4701)
Renamed to inbox
2024-03-28 17:11:13 +01:00
3171d0c87b feat: address composite field (#4492)
Added new Address field input type.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-03-28 16:50:38 +01:00
f00b9f229a fixed view switcher by changing zindex of TopBar (#4685) 2024-03-27 21:15:29 +01:00
c3cc0f651c feat: add remote object integration databases list card (#4621)
* feat: add remote object integration databases list card

Closes #4549

* fix: fixes after rebase
2024-03-27 18:59:40 +01:00
fefa37b300 4488 connect calendar tab to backend (#4624)
* create states and hooks

* implement fetch more records

* add empty state

* update types

* fix error

* add fetchmoreloader and add scroll to container

* fix visibility in calendarEventFragment

* fix fetchMoreRecords

* update TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE

* add test

* modify empty state subtitle

* replace entity by activityTargetableObject

* create useCustomResolver hook

* refactor

* refactoring

* use generic component

* rename FetchMoreLoader

* remove deprecated states and hooks

* fix typing

* update typing

* update error message

* renaming

* improve typing

* fix bug on contact creation from same company
2024-03-26 14:50:32 +01:00
e126c5c7f3 TWNTY-4602 - Increase coverage for coverage for twenty-front:storybook:modules (#4649)
* Increase coverage for coverage for  `twenty-front:storybook:modules`

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Chiazokam <chiazokamecheta@gmail.com>

* Increase code coverage threshold

* Increase code coverage threshold

* Increase code coverage threshold

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Chiazokam <chiazokamecheta@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
2024-03-25 18:03:55 +01:00