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
* Use new ObjectRecordConnection
* Use new records without connection in GraphQLView
* Added playwright for storybook tests
* Fixed lint
* Fixed test and tsc
* Fixed storybook tests
* wip tests
* Added useMapConnectionToRecords unit test
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
* WIP
* Finished cleaning favorites create, update, delete on record show page
* Fixed context menu favorite
* Fixed relation field bug
* Fix from review
* Review
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
* Moved pure UI object fields to ui folder
* Moved pure UI object fields to ui folder 2
* Updated graphql metadata schema and fixed typing issues
* Added a new hook to create a record identifier mapper
* Fixed merge main
* WIP
* Finished multi select filter
* Cleaned console log
* Fix naming
* Fixed naming
* Moved RelationPicker folder
* Moved EntitySelect components
* Moved story
* Moved RelationPicker non component folders
* Moved everything else
* Refactored useFindOneObjectMetadataItem and useFindManyObjectMetadataItems to rely on a recoil family selector
* Removed console.log
* Cleaned
* Removed unused hook
* Fixed seeds
* Added react-dev-inspector
* Add field relation type parsing and filter available fields for record table and show page
* Revert "Added react-dev-inspector"
This reverts commit 7a78964c2c3996ce2e27f6f8d0c0b5e1f3283e17.
* Finished renaming and scope
* wip
* WIP update
* Ok
* Cleaned
* Finished infinite scroll
* Clean
* Fixed V1 tables
* Fix post merge
* Removed ScrollWrapper
* Put back ScrollWrapper
* Put back in the right place
Lucas Bordeau