2024-04-17 19:06:02 +03:00
|
|
|
{
|
|
|
|
"name": "twenty-front",
|
|
|
|
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
|
|
|
"projectType": "application",
|
chore: use Nx affected tasks in CI (#5110)
Closes #5097
- Uses "nx affected" to detect what projects need to be checked in the
current PR (for now, `ci-front` and `ci-server` workflows only).
- Caches results of certain tasks (`lint`, `typecheck`, `test`,
`storybook:build`) when a PR pipeline runs. The next runs of the same
PR's pipeline will then be able to reuse the PR's task cache to execute
tasks faster.
- Caches Yarn's cache folder to install dependencies faster in CI jobs.
- Rewrites the node modules cache/install steps as a custom, reusable
Github action.
- Distributes `ci-front` jobs with a "matrix" strategy.
- Sets common tasks config at the root `nx.json`. For instance, to
activate the `typecheck` task in a project, add `typecheck: {}` to its
`project.json` and it'll use the default config set in `nx.json` for the
`typecheck` task. Options can be overridden in each individual
`project.json` if needed.
- Adds "scope" tags to some projects: `scope:frontend`, `scope:backend`,
`scope:shared`. An eslint rule ensures that `scope:frontend` only
depends on `scope:frontent` or `scope:shared` projects, same for
`scope:backend`. These tags are used by `nx affected` to filter projects
by scope and generates different task cache keys according to the
requested scope.
- Enables checks for twenty-emails in the `ci-server` workflow.
2024-04-30 17:28:25 +03:00
|
|
|
"tags": ["scope:frontend"],
|
2024-04-17 19:06:02 +03:00
|
|
|
"targets": {
|
|
|
|
"build": {
|
|
|
|
"outputs": ["{options.outputPath}"],
|
|
|
|
"options": {
|
|
|
|
"outputPath": "{projectRoot}/build"
|
|
|
|
}
|
|
|
|
},
|
|
|
|
"start": {
|
|
|
|
"executor": "@nx/vite:dev-server",
|
|
|
|
"options": {
|
|
|
|
"buildTarget": "twenty-front:build",
|
|
|
|
"hmr": true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
"preview": {
|
|
|
|
"executor": "@nx/vite:preview-server",
|
|
|
|
"options": {
|
|
|
|
"buildTarget": "twenty-front:build",
|
|
|
|
"port": 3001,
|
|
|
|
"open": true
|
|
|
|
}
|
|
|
|
},
|
chore: use Nx affected tasks in CI (#5110)
Closes #5097
- Uses "nx affected" to detect what projects need to be checked in the
current PR (for now, `ci-front` and `ci-server` workflows only).
- Caches results of certain tasks (`lint`, `typecheck`, `test`,
`storybook:build`) when a PR pipeline runs. The next runs of the same
PR's pipeline will then be able to reuse the PR's task cache to execute
tasks faster.
- Caches Yarn's cache folder to install dependencies faster in CI jobs.
- Rewrites the node modules cache/install steps as a custom, reusable
Github action.
- Distributes `ci-front` jobs with a "matrix" strategy.
- Sets common tasks config at the root `nx.json`. For instance, to
activate the `typecheck` task in a project, add `typecheck: {}` to its
`project.json` and it'll use the default config set in `nx.json` for the
`typecheck` task. Options can be overridden in each individual
`project.json` if needed.
- Adds "scope" tags to some projects: `scope:frontend`, `scope:backend`,
`scope:shared`. An eslint rule ensures that `scope:frontend` only
depends on `scope:frontent` or `scope:shared` projects, same for
`scope:backend`. These tags are used by `nx affected` to filter projects
by scope and generates different task cache keys according to the
requested scope.
- Enables checks for twenty-emails in the `ci-server` workflow.
2024-04-30 17:28:25 +03:00
|
|
|
"reset:env": {
|
2024-04-17 19:06:02 +03:00
|
|
|
"executor": "nx:run-commands",
|
chore: use Nx affected tasks in CI (#5110)
Closes #5097
- Uses "nx affected" to detect what projects need to be checked in the
current PR (for now, `ci-front` and `ci-server` workflows only).
- Caches results of certain tasks (`lint`, `typecheck`, `test`,
`storybook:build`) when a PR pipeline runs. The next runs of the same
PR's pipeline will then be able to reuse the PR's task cache to execute
tasks faster.
- Caches Yarn's cache folder to install dependencies faster in CI jobs.
- Rewrites the node modules cache/install steps as a custom, reusable
Github action.
- Distributes `ci-front` jobs with a "matrix" strategy.
- Sets common tasks config at the root `nx.json`. For instance, to
activate the `typecheck` task in a project, add `typecheck: {}` to its
`project.json` and it'll use the default config set in `nx.json` for the
`typecheck` task. Options can be overridden in each individual
`project.json` if needed.
- Adds "scope" tags to some projects: `scope:frontend`, `scope:backend`,
`scope:shared`. An eslint rule ensures that `scope:frontend` only
depends on `scope:frontent` or `scope:shared` projects, same for
`scope:backend`. These tags are used by `nx affected` to filter projects
by scope and generates different task cache keys according to the
requested scope.
- Enables checks for twenty-emails in the `ci-server` workflow.
2024-04-30 17:28:25 +03:00
|
|
|
"inputs": ["{projectRoot}/.env.example"],
|
|
|
|
"outputs": ["{projectRoot}/.env"],
|
|
|
|
"cache": true,
|
2024-04-17 19:06:02 +03:00
|
|
|
"options": {
|
|
|
|
"cwd": "{projectRoot}",
|
chore: use Nx affected tasks in CI (#5110)
Closes #5097
- Uses "nx affected" to detect what projects need to be checked in the
current PR (for now, `ci-front` and `ci-server` workflows only).
- Caches results of certain tasks (`lint`, `typecheck`, `test`,
`storybook:build`) when a PR pipeline runs. The next runs of the same
PR's pipeline will then be able to reuse the PR's task cache to execute
tasks faster.
- Caches Yarn's cache folder to install dependencies faster in CI jobs.
- Rewrites the node modules cache/install steps as a custom, reusable
Github action.
- Distributes `ci-front` jobs with a "matrix" strategy.
- Sets common tasks config at the root `nx.json`. For instance, to
activate the `typecheck` task in a project, add `typecheck: {}` to its
`project.json` and it'll use the default config set in `nx.json` for the
`typecheck` task. Options can be overridden in each individual
`project.json` if needed.
- Adds "scope" tags to some projects: `scope:frontend`, `scope:backend`,
`scope:shared`. An eslint rule ensures that `scope:frontend` only
depends on `scope:frontent` or `scope:shared` projects, same for
`scope:backend`. These tags are used by `nx affected` to filter projects
by scope and generates different task cache keys according to the
requested scope.
- Enables checks for twenty-emails in the `ci-server` workflow.
2024-04-30 17:28:25 +03:00
|
|
|
"command": "cp .env.example .env"
|
2024-04-17 19:06:02 +03:00
|
|
|
}
|
|
|
|
},
|
chore: use Nx affected tasks in CI (#5110)
Closes #5097
- Uses "nx affected" to detect what projects need to be checked in the
current PR (for now, `ci-front` and `ci-server` workflows only).
- Caches results of certain tasks (`lint`, `typecheck`, `test`,
`storybook:build`) when a PR pipeline runs. The next runs of the same
PR's pipeline will then be able to reuse the PR's task cache to execute
tasks faster.
- Caches Yarn's cache folder to install dependencies faster in CI jobs.
- Rewrites the node modules cache/install steps as a custom, reusable
Github action.
- Distributes `ci-front` jobs with a "matrix" strategy.
- Sets common tasks config at the root `nx.json`. For instance, to
activate the `typecheck` task in a project, add `typecheck: {}` to its
`project.json` and it'll use the default config set in `nx.json` for the
`typecheck` task. Options can be overridden in each individual
`project.json` if needed.
- Adds "scope" tags to some projects: `scope:frontend`, `scope:backend`,
`scope:shared`. An eslint rule ensures that `scope:frontend` only
depends on `scope:frontent` or `scope:shared` projects, same for
`scope:backend`. These tags are used by `nx affected` to filter projects
by scope and generates different task cache keys according to the
requested scope.
- Enables checks for twenty-emails in the `ci-server` workflow.
2024-04-30 17:28:25 +03:00
|
|
|
"typecheck": {},
|
2024-04-17 19:06:02 +03:00
|
|
|
"lint": {
|
|
|
|
"options": {
|
|
|
|
"lintFilePatterns": [
|
|
|
|
"{projectRoot}/src/**/*.{ts,tsx,json}",
|
|
|
|
"{projectRoot}/package.json"
|
|
|
|
],
|
|
|
|
"maxWarnings": 0,
|
chore: use Nx affected tasks in CI (#5110)
Closes #5097
- Uses "nx affected" to detect what projects need to be checked in the
current PR (for now, `ci-front` and `ci-server` workflows only).
- Caches results of certain tasks (`lint`, `typecheck`, `test`,
`storybook:build`) when a PR pipeline runs. The next runs of the same
PR's pipeline will then be able to reuse the PR's task cache to execute
tasks faster.
- Caches Yarn's cache folder to install dependencies faster in CI jobs.
- Rewrites the node modules cache/install steps as a custom, reusable
Github action.
- Distributes `ci-front` jobs with a "matrix" strategy.
- Sets common tasks config at the root `nx.json`. For instance, to
activate the `typecheck` task in a project, add `typecheck: {}` to its
`project.json` and it'll use the default config set in `nx.json` for the
`typecheck` task. Options can be overridden in each individual
`project.json` if needed.
- Adds "scope" tags to some projects: `scope:frontend`, `scope:backend`,
`scope:shared`. An eslint rule ensures that `scope:frontend` only
depends on `scope:frontent` or `scope:shared` projects, same for
`scope:backend`. These tags are used by `nx affected` to filter projects
by scope and generates different task cache keys according to the
requested scope.
- Enables checks for twenty-emails in the `ci-server` workflow.
2024-04-30 17:28:25 +03:00
|
|
|
"reportUnusedDisableDirectives": "error"
|
2024-04-17 19:06:02 +03:00
|
|
|
},
|
|
|
|
"configurations": {
|
chore: use Nx affected tasks in CI (#5110)
Closes #5097
- Uses "nx affected" to detect what projects need to be checked in the
current PR (for now, `ci-front` and `ci-server` workflows only).
- Caches results of certain tasks (`lint`, `typecheck`, `test`,
`storybook:build`) when a PR pipeline runs. The next runs of the same
PR's pipeline will then be able to reuse the PR's task cache to execute
tasks faster.
- Caches Yarn's cache folder to install dependencies faster in CI jobs.
- Rewrites the node modules cache/install steps as a custom, reusable
Github action.
- Distributes `ci-front` jobs with a "matrix" strategy.
- Sets common tasks config at the root `nx.json`. For instance, to
activate the `typecheck` task in a project, add `typecheck: {}` to its
`project.json` and it'll use the default config set in `nx.json` for the
`typecheck` task. Options can be overridden in each individual
`project.json` if needed.
- Adds "scope" tags to some projects: `scope:frontend`, `scope:backend`,
`scope:shared`. An eslint rule ensures that `scope:frontend` only
depends on `scope:frontent` or `scope:shared` projects, same for
`scope:backend`. These tags are used by `nx affected` to filter projects
by scope and generates different task cache keys according to the
requested scope.
- Enables checks for twenty-emails in the `ci-server` workflow.
2024-04-30 17:28:25 +03:00
|
|
|
"ci": { "eslintConfig": "{projectRoot}/.eslintrc-ci.cjs" },
|
|
|
|
"fix": {}
|
2024-04-17 19:06:02 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
"fmt": {
|
|
|
|
"options": {
|
chore: use Nx affected tasks in CI (#5110)
Closes #5097
- Uses "nx affected" to detect what projects need to be checked in the
current PR (for now, `ci-front` and `ci-server` workflows only).
- Caches results of certain tasks (`lint`, `typecheck`, `test`,
`storybook:build`) when a PR pipeline runs. The next runs of the same
PR's pipeline will then be able to reuse the PR's task cache to execute
tasks faster.
- Caches Yarn's cache folder to install dependencies faster in CI jobs.
- Rewrites the node modules cache/install steps as a custom, reusable
Github action.
- Distributes `ci-front` jobs with a "matrix" strategy.
- Sets common tasks config at the root `nx.json`. For instance, to
activate the `typecheck` task in a project, add `typecheck: {}` to its
`project.json` and it'll use the default config set in `nx.json` for the
`typecheck` task. Options can be overridden in each individual
`project.json` if needed.
- Adds "scope" tags to some projects: `scope:frontend`, `scope:backend`,
`scope:shared`. An eslint rule ensures that `scope:frontend` only
depends on `scope:frontent` or `scope:shared` projects, same for
`scope:backend`. These tags are used by `nx affected` to filter projects
by scope and generates different task cache keys according to the
requested scope.
- Enables checks for twenty-emails in the `ci-server` workflow.
2024-04-30 17:28:25 +03:00
|
|
|
"files": "src"
|
2024-04-17 19:06:02 +03:00
|
|
|
},
|
|
|
|
"configurations": {
|
chore: use Nx affected tasks in CI (#5110)
Closes #5097
- Uses "nx affected" to detect what projects need to be checked in the
current PR (for now, `ci-front` and `ci-server` workflows only).
- Caches results of certain tasks (`lint`, `typecheck`, `test`,
`storybook:build`) when a PR pipeline runs. The next runs of the same
PR's pipeline will then be able to reuse the PR's task cache to execute
tasks faster.
- Caches Yarn's cache folder to install dependencies faster in CI jobs.
- Rewrites the node modules cache/install steps as a custom, reusable
Github action.
- Distributes `ci-front` jobs with a "matrix" strategy.
- Sets common tasks config at the root `nx.json`. For instance, to
activate the `typecheck` task in a project, add `typecheck: {}` to its
`project.json` and it'll use the default config set in `nx.json` for the
`typecheck` task. Options can be overridden in each individual
`project.json` if needed.
- Adds "scope" tags to some projects: `scope:frontend`, `scope:backend`,
`scope:shared`. An eslint rule ensures that `scope:frontend` only
depends on `scope:frontent` or `scope:shared` projects, same for
`scope:backend`. These tags are used by `nx affected` to filter projects
by scope and generates different task cache keys according to the
requested scope.
- Enables checks for twenty-emails in the `ci-server` workflow.
2024-04-30 17:28:25 +03:00
|
|
|
"fix": {}
|
2024-04-19 19:28:02 +03:00
|
|
|
}
|
|
|
|
},
|
chore: use Nx affected tasks in CI (#5110)
Closes #5097
- Uses "nx affected" to detect what projects need to be checked in the
current PR (for now, `ci-front` and `ci-server` workflows only).
- Caches results of certain tasks (`lint`, `typecheck`, `test`,
`storybook:build`) when a PR pipeline runs. The next runs of the same
PR's pipeline will then be able to reuse the PR's task cache to execute
tasks faster.
- Caches Yarn's cache folder to install dependencies faster in CI jobs.
- Rewrites the node modules cache/install steps as a custom, reusable
Github action.
- Distributes `ci-front` jobs with a "matrix" strategy.
- Sets common tasks config at the root `nx.json`. For instance, to
activate the `typecheck` task in a project, add `typecheck: {}` to its
`project.json` and it'll use the default config set in `nx.json` for the
`typecheck` task. Options can be overridden in each individual
`project.json` if needed.
- Adds "scope" tags to some projects: `scope:frontend`, `scope:backend`,
`scope:shared`. An eslint rule ensures that `scope:frontend` only
depends on `scope:frontent` or `scope:shared` projects, same for
`scope:backend`. These tags are used by `nx affected` to filter projects
by scope and generates different task cache keys according to the
requested scope.
- Enables checks for twenty-emails in the `ci-server` workflow.
2024-04-30 17:28:25 +03:00
|
|
|
"test": {},
|
2024-05-07 22:05:45 +03:00
|
|
|
"storybook:build": {
|
2024-05-02 17:15:36 +03:00
|
|
|
"options": {
|
2024-05-07 22:05:45 +03:00
|
|
|
"env": { "NODE_OPTIONS": "--max_old_space_size=5000" }
|
2024-05-02 17:15:36 +03:00
|
|
|
},
|
|
|
|
"configurations": {
|
2024-05-17 17:05:31 +03:00
|
|
|
"test": {}
|
2024-05-02 17:15:36 +03:00
|
|
|
}
|
|
|
|
},
|
2024-04-17 19:06:02 +03:00
|
|
|
"storybook:dev": {
|
2024-05-07 22:05:45 +03:00
|
|
|
"options": { "port": 6006 },
|
2024-05-02 17:15:36 +03:00
|
|
|
"configurations": {
|
2024-05-03 15:59:09 +03:00
|
|
|
"docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
|
|
|
|
"modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
|
Generic Profiling story to wrap any component (#5341)
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);
},
```
2024-05-15 14:50:02 +03:00
|
|
|
"pages": { "env": { "STORYBOOK_SCOPE": "pages" } },
|
|
|
|
"performance": { "env": { "STORYBOOK_SCOPE": "performance" } }
|
2024-05-02 17:15:36 +03:00
|
|
|
}
|
|
|
|
},
|
2024-04-17 19:06:02 +03:00
|
|
|
"storybook:static": {
|
2024-05-07 22:05:45 +03:00
|
|
|
"options": { "port": 6006 },
|
2024-05-02 17:15:36 +03:00
|
|
|
"configurations": {
|
2024-05-17 17:05:31 +03:00
|
|
|
"test": {}
|
2024-05-03 15:59:09 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
"storybook:coverage": {
|
|
|
|
"configurations": {
|
2024-05-07 22:05:45 +03:00
|
|
|
"text": {},
|
2024-05-03 15:59:09 +03:00
|
|
|
"docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
|
|
|
|
"modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
|
Generic Profiling story to wrap any component (#5341)
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);
},
```
2024-05-15 14:50:02 +03:00
|
|
|
"pages": { "env": { "STORYBOOK_SCOPE": "pages" } },
|
|
|
|
"performance": { "env": { "STORYBOOK_SCOPE": "performance" } }
|
2024-05-02 17:15:36 +03:00
|
|
|
}
|
|
|
|
},
|
2024-04-17 19:06:02 +03:00
|
|
|
"storybook:test": {
|
2024-05-07 22:05:45 +03:00
|
|
|
"options": { "port": 6006 },
|
2024-04-17 19:06:02 +03:00
|
|
|
"configurations": {
|
2024-05-03 15:59:09 +03:00
|
|
|
"docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
|
|
|
|
"modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
|
Generic Profiling story to wrap any component (#5341)
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);
},
```
2024-05-15 14:50:02 +03:00
|
|
|
"pages": { "env": { "STORYBOOK_SCOPE": "pages" } },
|
|
|
|
"performance": { "env": { "STORYBOOK_SCOPE": "performance" } }
|
|
|
|
}
|
|
|
|
},
|
|
|
|
"storybook:test:nocoverage": {
|
|
|
|
"configurations": {
|
|
|
|
"docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
|
|
|
|
"modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
|
|
|
|
"pages": { "env": { "STORYBOOK_SCOPE": "pages" } },
|
|
|
|
"performance": { "env": { "STORYBOOK_SCOPE": "performance" } }
|
2024-05-03 15:59:09 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
"storybook:static:test": {
|
|
|
|
"options": {
|
|
|
|
"commands": [
|
2024-05-17 17:05:31 +03:00
|
|
|
"npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:static {projectName} --configuration=test --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port} --configuration={args.scope}'"
|
2024-05-03 15:59:09 +03:00
|
|
|
],
|
2024-05-07 22:05:45 +03:00
|
|
|
"port": 6006
|
2024-05-03 15:59:09 +03:00
|
|
|
},
|
|
|
|
"configurations": {
|
2024-05-02 17:15:36 +03:00
|
|
|
"docs": { "scope": "ui-docs" },
|
|
|
|
"modules": { "scope": "modules" },
|
Generic Profiling story to wrap any component (#5341)
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);
},
```
2024-05-15 14:50:02 +03:00
|
|
|
"pages": { "scope": "pages" },
|
|
|
|
"performance": { "scope": "performance" }
|
2024-04-17 19:06:02 +03:00
|
|
|
}
|
|
|
|
},
|
Generic Profiling story to wrap any component (#5341)
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);
},
```
2024-05-15 14:50:02 +03:00
|
|
|
"storybook:performance:test": {},
|
2024-04-17 19:06:02 +03:00
|
|
|
"graphql:generate": {
|
|
|
|
"executor": "nx:run-commands",
|
|
|
|
"defaultConfiguration": "data",
|
|
|
|
"options": {
|
|
|
|
"cwd": "{projectRoot}",
|
|
|
|
"command": "dotenv cross-var graphql-codegen -- --config={args.config}"
|
|
|
|
},
|
|
|
|
"configurations": {
|
|
|
|
"data": {
|
chore: use Nx affected tasks in CI (#5110)
Closes #5097
- Uses "nx affected" to detect what projects need to be checked in the
current PR (for now, `ci-front` and `ci-server` workflows only).
- Caches results of certain tasks (`lint`, `typecheck`, `test`,
`storybook:build`) when a PR pipeline runs. The next runs of the same
PR's pipeline will then be able to reuse the PR's task cache to execute
tasks faster.
- Caches Yarn's cache folder to install dependencies faster in CI jobs.
- Rewrites the node modules cache/install steps as a custom, reusable
Github action.
- Distributes `ci-front` jobs with a "matrix" strategy.
- Sets common tasks config at the root `nx.json`. For instance, to
activate the `typecheck` task in a project, add `typecheck: {}` to its
`project.json` and it'll use the default config set in `nx.json` for the
`typecheck` task. Options can be overridden in each individual
`project.json` if needed.
- Adds "scope" tags to some projects: `scope:frontend`, `scope:backend`,
`scope:shared`. An eslint rule ensures that `scope:frontend` only
depends on `scope:frontent` or `scope:shared` projects, same for
`scope:backend`. These tags are used by `nx affected` to filter projects
by scope and generates different task cache keys according to the
requested scope.
- Enables checks for twenty-emails in the `ci-server` workflow.
2024-04-30 17:28:25 +03:00
|
|
|
"config": "codegen.cjs"
|
2024-04-17 19:06:02 +03:00
|
|
|
},
|
|
|
|
"metadata": {
|
chore: use Nx affected tasks in CI (#5110)
Closes #5097
- Uses "nx affected" to detect what projects need to be checked in the
current PR (for now, `ci-front` and `ci-server` workflows only).
- Caches results of certain tasks (`lint`, `typecheck`, `test`,
`storybook:build`) when a PR pipeline runs. The next runs of the same
PR's pipeline will then be able to reuse the PR's task cache to execute
tasks faster.
- Caches Yarn's cache folder to install dependencies faster in CI jobs.
- Rewrites the node modules cache/install steps as a custom, reusable
Github action.
- Distributes `ci-front` jobs with a "matrix" strategy.
- Sets common tasks config at the root `nx.json`. For instance, to
activate the `typecheck` task in a project, add `typecheck: {}` to its
`project.json` and it'll use the default config set in `nx.json` for the
`typecheck` task. Options can be overridden in each individual
`project.json` if needed.
- Adds "scope" tags to some projects: `scope:frontend`, `scope:backend`,
`scope:shared`. An eslint rule ensures that `scope:frontend` only
depends on `scope:frontent` or `scope:shared` projects, same for
`scope:backend`. These tags are used by `nx affected` to filter projects
by scope and generates different task cache keys according to the
requested scope.
- Enables checks for twenty-emails in the `ci-server` workflow.
2024-04-30 17:28:25 +03:00
|
|
|
"config": "codegen-metadata.cjs"
|
2024-04-17 19:06:02 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
2024-04-30 19:21:08 +03:00
|
|
|
"chromatic": {
|
|
|
|
"configurations": {
|
2024-05-02 17:15:36 +03:00
|
|
|
"ci": {}
|
2024-04-30 19:21:08 +03:00
|
|
|
}
|
|
|
|
}
|
2024-04-17 19:06:02 +03:00
|
|
|
}
|
|
|
|
}
|