The `QueryResultGettersFactory` that is called on every query return to
was called only on the first level of relations because recursivity
wasn't implemented.
In this PR I implement recursivity and add some typing for the possible
forms a GraphQL query field can take.
This PR will fix any issue we have with pictures that were losing their
token (here for person.avatarUrl)
Fixes https://github.com/twentyhq/twenty/issues/8425
Fixes https://github.com/twentyhq/twenty/issues/8498
---------
Co-authored-by: Weiko <corentin@twenty.com>
Many dropdown bugs have been fixed, more refactoring is needed.
Dropdown fixed :
- Filter select
- Sort select
- Visible field select
- Hidden field select
- Multi item picker (phones, links, emails, etc.)
- Phone country select
- Fixed CSS for SortOrFilter chips
- Fixed bug when refreshing with an actor source filter set
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
This PR refactors the view module to implement utils that avoid having
to create hooks to inject the scope id in the states, like
`useViewStates`, each componentState will know its unique related
InstanceContext (which holds the instanceId), and thus will be able to
retrieve it itself.
We keep the naming componentState as it reflects the fact that those
states are tied to instances of a component (or its children).
We introduce the instance word where it is needed, in place of scopeId
for example, to precise the fact that we handle instances of component
state, one for each instance of a component.
For example, the currentViewId is a state that is tied to an instance of
the ViewBar, but as we can switch between views, we want currentViewId
to be a componentState tied to an instance of the ViewBar component.
This PR also refactors view filter and sort states to fix this issue :
https://github.com/twentyhq/twenty/issues/6837 and other problems
involving resetting those states between page navigation.
Fixes https://github.com/twentyhq/twenty/issues/6837
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
Fixed bug that was appearing with records without any activity target
The problem may come from the new TwentyORM that doesn't understand the
filter like before.
Open table cell was triggered by a click on a field input.
This is a temporary solution.
I fixed it for DoubleTextInput but it might be problematic for other
field types as well, we should implement a kind of bubbling shield to
make sure that no click event can bubble up to trigger things like open
table cell in the above components that shouldn't listen.
See https://github.com/twentyhq/twenty/issues/6909
Fixes#6833
The view states for unsaved changes were not reseted on view change.
The fix was to just add a call to the existing resetCurrentView when the
viewId changes in the related effect.
In this PR:
- revert de-optimization of icons bundle for storybook. This was forcing
the browser to load ~3k files while running stories
- adding lazy loading on Settings route to improve developer experience
(some files will be loaded later)
- fix FE tests: unit, modules stories, pages stories
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
Fetch more on the record table was causing a strange bug where it was
auto scrolling to the bottom of the newly loaded chunk of rows.
This was confusing because we lost our previous position in the record
table.
With this fix the table doesn't scroll when more rows are loaded.
The fetch more row has been moved in the same tbody as the rest of the
rows.
We now only hide it when there is no more record to fetch.
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
The update of all fields was caused by `useContextSelector` not being
properly implemented.
As it is a memoization library the `useRecordFieldValue` hook wasn't
giving to the library the required things to allow memoization.
I just added recordId + fieldName to the memoization function so that
`useContextSelector` doesn't recompute itself whenever any record
changes.
Activity creation was duplicating the new activity on already visited
records of the same type.
The fix was to activate `shouldMatchRootQueryFilter` on createOne for
activity.
Modal clickoutside was modified recently.
It was considering portaled component like dropdown outside, so
comparePixel mode for click outside is needed here.
Closes https://github.com/twentyhq/twenty/issues/5741
Filtering was already working.
I just added the required logic in the frontend to allow sorting by
primary link url (because label can be empty)
Fixes https://github.com/twentyhq/twenty/issues/5762
The problem was only happening with a sort on a select type field, also
appears with currency type and maybe other types.
This was because NULL values were sorted in a random order because the
sort function was comparing two NULL values as not equal, so I just
added a case for when A === B === NULL.
Implement date formatting per workspace member settings
We'll need another round to maybe initialize all workspaces on the
default settings.
For now the default behavior is to take system settings if nothing is
found in DB.
---------
Co-authored-by: Weiko <corentin@twenty.com>
- Removed enabled props from useScopedHotkeys becayse it doesn't work
- Moved enter useScopedHotkeys in a handler that we drill down to the
text inputs on the settings form
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
- Fixed activity creation in cache
- Fixed activity creation in DB, where the relation target was
disappearing after creation
- Added an option to match root query filter in creation optimistic
effect to avoid adding the newly created record in every mounted query
in Apollo cache on the same object (which was causing notes to be
duplicated on every object in the cache)
- Fixed tab list scope id
- Fixed various browser console warnings
- Refactored components in table
- Added a isTableRecordScrolledLeftState and
isTableRecordScrolledTopState to subscribe to table scroll
- Added a zIndex logic that subscribes to those new states in new tinier
components
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
CSS modules were used as a first test for performance optimization.
We later found out that Linaria was a better tradeoff.
This PR removes what was implemented in CSS modules and also the CSS
theme file that was created that was overlapping with the TS theme
files.
Fixes https://github.com/twentyhq/twenty/issues/6016
This was another side effect of the optimization made on
RecordTableCellContainer to avoid using recoil states, but which causes
too many unpredictable side effects.
I just put back the previous system which works well. We'll see how to
optimize it again later.
Timezone with a negative offset weren't working good with date pickers.
I split the logic for display and parsing between date only and
datetime.
Date time is sending and displaying using timezone, and date only is
sending and displaying by forcing the date to take its UTC day and month
and 00:00:00 time.
This way its consistent across all timezones.
Previously the error boundary component was re-rendering with the same
state as long as we stayed in the same router, so for page change inside
an index container, it would stay on error state.
The fix is to memorize the location the error page is on during its
first render, and then to reset the error boundary if it gets
re-rendered with a different location even in the same index container.
Fixes : #3592
The display for Rating field type was missing, I just added it based on
RatingInput in readonly mode and optimized a bit for performance also.
Fixes https://github.com/twentyhq/twenty/issues/5900
The record chip generator context was missing a edge were a new field of
type relation is created and not yet in the metadata so no chip
generator function can be precomputed.
For now I added a fallback default chip generator, to prevent any bug,
but we might want to add a new chip generator function while creating
the new field ?
The new date time formatting util made for performance optimization
missed two things :
- Padding 0 for hours and minutes with 1 digit only.
- Correctly parsing the day of the month (now uses JS Date native
getDate() instead of slicing the ISO String)
In the settings part of the app, where display fields are used as in
table cell and board cards, we didn't have the new context selector
logic implemented, due to the recent performance optimization.
In RecordTableCellContainer, I just removed onMouseEnter event handler
that was being triggered when we used keyboard soft focus move.
It's not necessary to have it because we already listen on mouse move
which is matching our use case where we only want soft focus to move
when mouse move and not when the cursor stays on top of a cell.
- 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
- Fix duplicate view field creation
- Fix redirect to proper settings data model page
- Refetch view fields after field creation (temporary solution)
Fixes https://github.com/twentyhq/twenty/issues/5598
We have a lot of contributors that are not aware of our method for
implementing hotkey listeners.
I updated the documentation to provide clear examples so that users can
refer to it and maintainers and reviewers can point to it when they see
onKeyDown implementations.
This PR fixes creation on table.
With the recent optimization refactor, we now use a custom event to
trigger edit and soft focus mode on a table cell.
There's a specific case when we create a pending row to allow creating a
new record, where the custom event gets triggered before the cell
exists, so it cannot listen and put itself in edit mode.
The fix is passing down a new isPendingRow in the context, so the
identifier cell on a pending row can put itself in edit mode during its
first render.
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
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
This PR introduces a Profiling feature for our story book tests.
It also implements a new CI job : front-sb-test-performance, that only
runs stories suffixed with `.perf.stories.tsx`
## How it works
It allows to wrap any component into an array of React Profiler
components that will run tests many times to have the most replicable
average render time possible.
It is simply used by calling the new `getProfilingStory` util.
Internally it creates a defined number of tests, separated by an
arbitrary waiting time to allow the CPU to give more stable results.
It will do 3 warm-up and 3 finishing runs of tests because the first and
last renders are always a bit erratic, so we want to measure only the
runs in-between.
On the UI side it gives a table of results :
<img width="515" alt="image"
src="https://github.com/twentyhq/twenty/assets/26528466/273d2d91-26da-437a-890e-778cb6c1f993">
On the programmatic side, it stores the result in a div that can then be
parsed by the play fonction of storybook, to expect a defined threshold.
```tsx
play: async ({ canvasElement }) => {
await findByTestId(
canvasElement,
'profiling-session-finished',
{},
{ timeout: 60000 },
);
const profilingReport = getProfilingReportFromDocument(canvasElement);
if (!isDefined(profilingReport)) {
return;
}
const p95result = profilingReport?.total.p95;
expect(
p95result,
`Component render time is more than p95 threshold (${p95ThresholdInMs}ms)`,
).toBeLessThan(p95ThresholdInMs);
},
```
In this PR I'm introducing a simple custom graphql-yoga plugin to create
a caching mechanism specific to our metadata.
The cache key is made of : workspace id + workspace cache version, with
this the cache is automatically invalidated each time a change is made
on the workspace metadata.
In this PR I'm introducing a new patch on @graphql-yoga/nestjs package.
This patch overrides a previous patch that was made to compute the
conditionnal schema on each request,
Here we use a cache map to compute only once per schema workspace cache
version.
This allows us to have sub 100ms query time.
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>
Default currency logic was not handling a specific case where the
default currency is empty in the field metadata.
I fixed the ternary cascade and made it more explicit, thus also
avoiding falling into having an empty currency code being persisted.
Improved table cell performances by putting all hooks from
RecordTableCell in RecordTableContext and RecordTable component, so that
each cell now only subscribes to a reference to those hooks' returned
function.
We couldn't do memoization here since the problem is not to memoize
between re-renders but to share the same function reference between
hundreds of different components, so a context it the fastest way for
this.
I had to refactor the hooks a little bit so that they take as arguments
what was previously taken from the cell's context.
- 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>
- 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>
- Implemented dataloader package on metadata graphql server
- Implemented a dataloader for relation metadata module
---------
Co-authored-by: Jérémy M <jeremy.magrin@gmail.com>
- Select component was adding a duplicate useListenClickOutside already
present in useDropdown for closing dropdown.
- Added debug logs for hotkeys scopes
* Refactor task count
* Fixed show page rerender
* Less rerenders and way better title and body UX
* Finished breaking down activity editor subscriptions
* Removed console.log
* Last console.log
* Fixed bugs and cleaned
* Refactored PageTitle to remove a dependency to location from App component
* Refactored DefaultHomePage and DefaultPageTitle to remove dependencies from App component.
- Created addRecordInCache to inject a record in Apollo cache and inject single read query on this record
- Created createOneRecordInCache and createManyRecordsInCache that uses this addRecordInCache
- Created useOpenCreateActivityDrawerV2 hook to create an activity in cache and inject it into all other relevant requests in the app before opening activity drawer
- Refactored DEFAULT_SEARCH_REQUEST_LIMIT constant and hardcoded arbitrary request limits
- Added Apollo dev logs to see errors in the console when manipulating cache
