This PR is the first part of a refactoring aiming to deprecate the
hotkey scopes api in favor of the new focus stack api which is more
robust.
The refactored components in this PR are the dropdowns and the side
panel/command menu.
- Replaced `useScopedHotkeys` by `useHotkeysOnFocusedElement` for all
dropdown components, selectable lists and the command menu
- Introduced `focusId` for all dropdowns and created a common hotkey
scope `DropdownHotkeyScope` for backward compatibility
- Replaced `setHotkeyScopeAndMemorizePreviousScope` occurrences with
`usePushFocusItemToFocusStack` and `goBackToPreviousHotkeyScope` with
`removeFocusItemFromFocusStack`
Note: Test that the shorcuts and arrow key navigation still work
properly when interacting with dropdowns and the command menu.
Bugs that I have spotted during the QA but which are already present on
main:
- Icon picker select with arrow keys doesn’t work inside dropdowns
- Some dropdowns are not selectable with arrow keys (no selectable list)
- Dropdowns in dropdowns don’t reset the hotkey scope correctly when
closing
- The table click outside is not triggered after closing a table cell
and clicking outside of the table
Remove FieldContext hotkey scope as:
- each Field should set its own hotkey scope (ex:
emails-field-input-{recordId} or emails-field-input for now)
- while opening a fieldInput, we should synchronously set the
corresponding hotkey scope
To cut this refactoring in half, I'm allowing all input to use
TableHotkeyScope.CellEditMode
## What
- Deprecate overlayscrollbars as we decided to follow the native
behavior
- rework on performances (avoid calling recoil states too much at field
level which is quite expensive)
- Also implements:
https://github.com/twentyhq/core-team-issues/issues/569
---------
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
# 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
Refactor to only have MultipleRecordPicker and SingleRecordPicker
What's done:
- SingleRecordPicker, MultipleRecordPicker
- RelationToOneInput
- RelationFromManyInput
- usage in TableCell, InlineCell, RelationDetailSection, Workflow
What's left:
- Make a pass on the app, to make sure the hotkeyScopes, clickOutside
are properly set
- Fix flashing on ActivityTarget
- add more tests on the code
## Context
ActivityTargetsInlineCell was not using the useIsFieldValueReadOnly hook
but a dedicated prop instead. To align with the rest of the
implementation I've updated that part of the code however we still want
the table/kanban views to always be in read-only mode regardless of the
hook logic so I've updated the hook to take the ContextStoreViewType
into account.
This PR is part 3 of RecordPicker refactoring.
It aims to remove all effects from:
- (low level layer) SingleRecordPicker, MultipleRecordPicker
- (higher level layer) RelationPicker, RelationToOneInput,
RelationFromManyInput, ActivityTargetInput...
In this PR, I'm re-grouping Effects in ActivityTarget section and
creating a hook that will be called on inlineCellOpen
Fixes [#6335](https://github.com/twentyhq/twenty/issues/6335)
This pull request is for issue
[#6335](https://github.com/twentyhq/twenty/issues/6335): Refactor
RecordInlineCell tree with a Context to avoid props drilling. For the
refactoring, this PR made changes as below:
- Created new script RecordInlineCellContext.tsx: Defining a context to
pass in useContext()
- Updated RecordInlineCell.tsx: Passing the necessary props as context
values, wrapping with RecordInlineCellContext.Provider
- Updated RecordInlineCellContainer.tsx: Passing the props to
RecordInlineContainer as RecordInlineCellContext
- Updated RecordInlineCellDisplayMode.tsx: retrieves values from
useRecordInlineCellContext instead of directly assigning them
- RecordInlineCellValue.tsx: Removed values passed through
<RecordInlineCellDisplayMode> as they are now retrieved through
useRecordInlineCellContext + Removed the null check for
RecordInlineCellContextProps.
Using RecordInlineCellContext, I believe the context goes to the top of
the hierarchy and passed to the required layers without going through
several layers. However, please let me know if I understood the issue
incorrectly or it is not solved properly.
Thank you in advance for your review!
---------
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Closes#5924.
Adding the "many" side of relations in the table view, and fixing some
issues (glitch in Multi record select, cache update after update).
---------
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
## Context
Fixing `setIsFocused is not a function` and the fact that edit buttons
were not showing up anymore.
A new FieldFocusContextProvider has been introduced and added to
RecordInlineCell but not ActivityTargetsInlineCell. This should fix the
issue.
<img width="523" alt="Screenshot 2024-06-05 at 17 42 07"
src="https://github.com/twentyhq/twenty/assets/1834158/1c1f919e-3829-4e40-b573-3b1b75b7c16f">
This PR introduces many improvements over the new profiling story
feature, with new tests and some refactor with main :
- Added use-context-selector for getting value faster in display fields
and created useRecordFieldValue() hook and RecordValueSetterEffect to
synchronize states
- Added performance test command in CI
- Refactored ExpandableList drill-downs with FieldFocusContext
- Refactored field button icon logic into getFieldButtonIcon util
- Added RelationFieldDisplay perf story
- Added RecordTableCell perf story
- First split test of useField.. hook with useRelationFieldDisplay()
- Fixed problem with set cell soft focus
- Isolated logic between display / soft focus and edit mode in the
related components to optimize performances for display mode.
- Added warmupRound config for performance story decorator
- Added variance in test reporting
When writing to the normalized cache (record), it's crucial to use _refs
for relationships to avoid many problems. Essentially, we only deal with
level 0 and generate all fields to be comfortable with their defaults.
When writing in queries (which should be very rare, the only cases are
prefetch and the case of activities due to the nested query; I've
reduced this to a single file for activities
usePrepareFindManyActivitiesQuery 🙂), it's important to use queryFields
to avoid bugs. I've implemented them on the side of query generation and
record generation.
When doing an updateOne / createOne, etc., it's necessary to distinguish
between optimistic writing (which we actually want to do with _refs) and
the server response without refs. This allows for a clean write in the
optimistic cache without worrying about nesting (as the first point).
To simplify the whole activities part, write to the normalized cache
first. Then, base queries on it in an idempotent manner. This way,
there's no need to worry about the current page or action. The
normalized cache is up-to-date, so I update the queries. Same idea as
for optimisticEffects, actually.
Finally, I've triggered optimisticEffects rather than the manual update
of many queries.
---------
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
* on click focus on activity body editor
* acitivity editor hot key scope added
* classname prop added escape hot key scope call back added
* passing containerClassName prop for activity editor
* hot key scope added
* console log cleanup
* activity target escape hot key listener added
* tasks filter hot key scope refactor
* scope renaming refactor
* imports order linting refactor
* imports order linting refactor
* acitivity editor field focus state and body editor text listener added
* logic refactor removed state for activity editor fields focus
* removed conflicting click handler of inline cell creating new scope
* linting and formatting
* acitivity editor field focus state and body editor text listener added
* adding text at the end of line
* fix duplicate imports
* styling: gap fix activity editor
* format fix
* Added comments
* Fixes
* Remove useListenClickOutside, state, onFocus and onBlur
* Keep simplifying
* Complete review
* Fix lint
---------
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
