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
Closes#5062.
Refactoring tables list to avoid rendering all toggles on each sync or
schema update while using fresh data:
- introducing id for RemoteTables in apollo cache
- manually updating the cache for the record that was updated after a
sync or schema update instead of fetching all tables again
Stripe tables do not support `hasNextPage` and `totalCount`. This may be
because of stripe wrapper do not properly support `COUNT` request.
Waiting on pg_graphql answer
[here](https://github.com/supabase/pg_graphql/issues/519).
This PR:
- removes `totalCount` and `hasNextPage` form queries for remote
objects. Even if it works for postgres, this may really be inefficient
- adapt the `fetchMore` functions so it works despite `hasNextPage`
missing
- remove `totalCount` display for remotes
- fix `orderBy`
---------
Co-authored-by: Thomas Trompette <thomast@twenty.com>
Makes sure the `twenty-front:chromatic:ci` task in the CI job
`front-chromatic-deployment` reuses the cache of the Storybook built in
the CI job `front-sb-build` instead of re-building Storybook so
Chromatic is deployed faster in the CI.
Closes#5375
<img width="381" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/d87773df-c685-466b-ae35-a8349f79df48">
_____
~~Note that I ugraded `@apollo/client` to v3.10.4 because current
version is causing an error when trying to write the Links field in the
cache in `updateRecordFromCache` (`TypeError: Cannot convert object to
primitive value`). After upgrade, the error is gone but console still
prints a warning (here the custom object name is `Listing` and the Links
field name is `website`):~~
<img width="964" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/834b8909-e8dc-464a-8c5a-6b7e4c964a7f">
~~It might be because the Links field seems to somehow have a
`__typename` property in Apollo's cache, so Apollo considers it as a
record and tries to match the object's cache with an id, but the Links
field value has no id so it can't find it.
We might want to find where this `__typename` is added and remove it
from the Links object in the cache.~~
Edit: will fix this in another PR as upgrading `@apollo/client` +
`apollo-upload-client` seems to break types and/or tests. Related issue:
[#5437](https://github.com/twentyhq/twenty/issues/5437)
Closes#5069 back-end part
And:
- do not display schemaPendingUpdates status on remote server lists as
this call will become too costly if there are dozens of servers
- (refacto) create foreignTableService
After this is merged we will be able to delete remoteTable's
availableTables column
fixes: #5325
changes done (commits in order):
1. **Fixed fontLight & fontDark 'danger' color as per design spec**:
changed theme.font.color.danger to match the disabled color theme (for
light and dark) as followed by the BorderDark and BorderLight. Use the
updated colors for Buttons
2. **Replace theme.font.color.danger with theme.color.red (5 changed
files)**: Since `theme.font.color.danger` has now been updated to
contain the disabled button color values, we use the `theme.color.red`
color in all the places using `theme.font.color.danger` as it contains
same value that was used to be of `theme.font.color.danger` before.
3. **fixed hover color of StyledConfirmationButton in
ConfirmationModal**: issue can be seen when going to /settings/workspace
and trying to hover on delete the workspace button in dark mode. fixed
with this commit.
**Important Note**: The files
`/twenty-front/src/modules/ui/theme/constants/FontLight.ts` and
`/twenty-front/src/modules/ui/theme/constants/FontDark.ts` **are of no
use** as theme for the entire 'twenty-front' and
'twenty-chrome-extension' packages use the same files from '@/ui/theme'
(twenty-ui package)
dark mode :
<img width="987" alt="Screenshot 2024-05-09 at 9 14 35 PM"
src="https://github.com/twentyhq/twenty/assets/60315832/75fe3972-0e8a-41f6-90a1-09bfcd013e72">
when disabled:
<img width="1098" alt="Screenshot 2024-05-09 at 9 13 46 PM"
src="https://github.com/twentyhq/twenty/assets/60315832/5caab8b5-47ba-43e5-90cd-a41a1f690ca0">
on hover:
<img width="1052" alt="Screenshot 2024-05-09 at 9 14 05 PM"
src="https://github.com/twentyhq/twenty/assets/60315832/58de3df6-ed77-4aad-84fc-67b01154b493">
<br>
<br>
light mode (when disabled):
<img width="918" alt="Screenshot 2024-05-09 at 9 13 14 PM"
src="https://github.com/twentyhq/twenty/assets/60315832/18228783-d6c7-44a6-9fce-00053bb35ef2">
on hover:
<img width="983" alt="Screenshot 2024-05-09 at 9 14 18 PM"
src="https://github.com/twentyhq/twenty/assets/60315832/6df99f12-5767-4136-80c9-5d8883ac8e00">
---------
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
For remotes, we will only create the foreign key, without the relation
metadata. Expected behavior will be:
- possible to create an activity. But the remote object will not be
displayed in the relations of the activity
- the remote objects should not be available in the search for relations
Also switched the number settings to an enum, since we now have to
handle `BigInt` case.
---------
Co-authored-by: Thomas Trompette <thomast@twenty.com>
[#4422](https://github.com/twentyhq/twenty/issues/4422)
Demo:
https://github.com/twentyhq/twenty/assets/155670906/f8027ab2-c579-45f7-9f08-f4441a346ae7
Within the demo, we show the various areas in which the Command/CTRL +
Click functionality works. The table cells within the People and
Companies tab open within both the current tab and new tab due to
unchanged functionality within RecordTableCell. We did this to ensure we
could get a PR within by the end of the week.
In this commit, we ONLY edited EntityChip.tsx. We did this by:
- Removing useNavigate() and handleLinkClick/onClick functionality
- Wrapping InnerEntityChip in an anchor tag
This allowed for Command/CTRL + Click functionality to work. Clickable
left cells on tables, left side menu, and data model navigation
files/areas DID NOT get updated.
---------
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
TL;DR:
- removed `--configuration={args.scope}` from `storybook:static:test`
for the `storybook:static` part, as it was making `front-sb-test` jobs
in CI not reuse the cache from the `front-sb-build` job and re-build
storybook every time.
- replaced it with a new `test` configuration which optimizes storybook
build for tests and builds storybook 2x faster.
## Fix storybook:build cache usage in CI
`storybook:static:test` executes two scripts in parallel:
1. `storybook:static`, which depends on `storybook:build`
1.a. it builds storybook first with `storybook:build`, the output
directory is `storybook-static`.
1.b. then it launches an `http-server`, using what has been built in
`storybook-static`
2. `storybook:test` to execute tests (needs the storybook http-server to
be running)
When passing `--configuration=pages` or `--configuration=modules` to
`storybook:static` from step 1, those configurations are passed to the
`storybook:build` script from step 1.a as well.
But for Nx `storybook:build` and `storybook:build --configuration=pages`
(or `modules`) are not the same command, therefore one does not reuse
the cache of the other because they could output completely different
things.
As `front-sb-test` jobs are passing `--configuration={args.scope}` to
`storybook:static`, the cache of the previously executed
`storybook:build` (from `front-sb-build`) is not reused and therefore
each job re-builds Storybook with its own scope, which increases CI
time.
### Solution
- Removed scope configurations from `storybook:static` and
`storybook:build` scripts to avoid confusion.
- `storybook:test` and `storybook:dev` can keep scope configurations as
they can be useful and this doesn't impact storybook build cache in CI.
### Improve Storybook build time for testing
Added the `test` configuration to `storybook:build` and
`storybook:static` which makes Storybook build time 2x faster. It
disables addons that slow down build time and are not used in tests.
Update for #4836
- edit primary and secondary transparency opacities from 0.8 to 0.5
- remove forBackdropFilter from themes
- update components referencing transparency/primary and
transparency/secondary to have the following backdrop-filter: blur(12px)
saturate(200%) contrast(50%) brightness(130%)
---------
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
## Description
Adds a view for creation date and author to notes and tasks panel. Here
is a preview of the new `ActivityCreationDate` component:
Closes#5424
### Type of change
<!-- Please delete options that are not relevant. -->
- [x] New feature (non-breaking change which adds functionality)
## Checklist
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules
---------
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Signing in is a two steps process:
- Checking if the user email is already used
- Checking if the email + password is correct
Those two steps need a captchaToken to be valid. Unfortunately, from
Cloudflare Turnstile doc:
`A token can only be validated once and cannot be consumed twice. Once a
token has been issued, it can be validated within the next 300 seconds.
After 300 seconds, the token is no longer valid and another challenge
needs to be solved`
So we need to generate a new token at each step instead of re-using the
same
## Context
Fixes#5403
Transliteration is now integrated to form validation through the schema.
While it does not impede inputting an invalid value, it impedes
submitting a form that will fail as the transliteration is not possible.
Until then we were only performing the transliteration at save time in
the front-end, but it's best to provide the information as soon as
possible. Later we will add helpers to guide the user (eg "This name is
not valid": https://github.com/twentyhq/twenty/issues/5428).
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
## Description
This PR fixes a display issue when editing the company name or the name
of a person where the edit input would be offset to the left instead of
being in the middle.
Fixes#5416
### Type of change
<!-- Please delete options that are not relevant. -->
- [x] Bug fix (non-breaking change which fixes an issue)
## Checklist
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules
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);
},
```
