2023-05-29 23:42:24 +03:00
|
|
|
name: CI Front
|
2023-04-13 18:37:37 +03:00
|
|
|
on:
|
|
|
|
push:
|
2023-06-27 18:55:07 +03:00
|
|
|
branches:
|
|
|
|
- main
|
2024-10-21 13:02:14 +03:00
|
|
|
|
2023-09-14 06:33:17 +03:00
|
|
|
pull_request:
|
2024-10-21 13:02:14 +03:00
|
|
|
|
2024-04-04 10:30:55 +03:00
|
|
|
concurrency:
|
|
|
|
group: ${{ github.workflow }}-${{ github.ref }}
|
|
|
|
cancel-in-progress: true
|
|
|
|
|
2023-04-13 18:37:37 +03:00
|
|
|
jobs:
|
2024-05-02 17:15:36 +03:00
|
|
|
front-sb-build:
|
2024-05-17 17:05:31 +03:00
|
|
|
runs-on: ubuntu-latest
|
2024-05-02 17:15:36 +03:00
|
|
|
env:
|
|
|
|
REACT_APP_SERVER_BASE_URL: http://localhost:3000
|
2024-05-15 23:54:51 +03:00
|
|
|
NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
|
2024-05-02 17:15:36 +03:00
|
|
|
steps:
|
|
|
|
- name: Cancel Previous Runs
|
|
|
|
uses: styfle/cancel-workflow-action@0.11.0
|
|
|
|
with:
|
|
|
|
access_token: ${{ github.token }}
|
|
|
|
- name: Fetch local actions
|
|
|
|
uses: actions/checkout@v4
|
2024-10-21 14:16:01 +03:00
|
|
|
with:
|
|
|
|
fetch-depth: 0
|
2024-10-21 13:02:14 +03:00
|
|
|
|
|
|
|
- name: Check for changed files
|
|
|
|
id: changed-files
|
|
|
|
uses: tj-actions/changed-files@v11
|
|
|
|
with:
|
|
|
|
files: |
|
|
|
|
package.json
|
|
|
|
packages/twenty-front/**
|
|
|
|
packages/twenty-ui/**
|
|
|
|
|
|
|
|
- name: Skip if no relevant changes
|
|
|
|
if: steps.changed-files.outputs.any_changed == 'false'
|
|
|
|
run: echo "No relevant changes. Skipping CI."
|
|
|
|
|
2024-05-02 17:15:36 +03:00
|
|
|
- name: Install dependencies
|
2024-10-21 14:16:01 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
2024-05-02 17:15:36 +03:00
|
|
|
uses: ./.github/workflows/actions/yarn-install
|
2024-10-05 10:56:51 +03:00
|
|
|
- name: Diagnostic disk space issue
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
2024-10-05 10:56:51 +03:00
|
|
|
run: df -h
|
2024-05-02 17:15:36 +03:00
|
|
|
- name: Front / Restore Storybook Task Cache
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
2024-05-02 17:15:36 +03:00
|
|
|
uses: ./.github/workflows/actions/task-cache
|
|
|
|
with:
|
|
|
|
tag: scope:frontend
|
|
|
|
tasks: storybook:build
|
|
|
|
- name: Front / Write .env
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
2024-05-02 17:15:36 +03:00
|
|
|
run: npx nx reset:env twenty-front
|
|
|
|
- name: Front / Build storybook
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
2024-06-30 21:02:13 +03:00
|
|
|
run: npx nx storybook:build twenty-front
|
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
|
|
|
front-sb-test:
|
2024-10-21 15:23:57 +03:00
|
|
|
runs-on: shipfox-8vcpu-ubuntu-2204
|
2024-10-21 13:02:14 +03:00
|
|
|
timeout-minutes: 60
|
|
|
|
needs: front-sb-build
|
|
|
|
strategy:
|
|
|
|
matrix:
|
|
|
|
storybook_scope: [pages, modules]
|
|
|
|
env:
|
|
|
|
REACT_APP_SERVER_BASE_URL: http://localhost:3000
|
|
|
|
NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
|
|
|
|
steps:
|
|
|
|
- name: Fetch local actions
|
|
|
|
uses: actions/checkout@v4
|
2024-10-21 14:16:01 +03:00
|
|
|
with:
|
|
|
|
fetch-depth: 0
|
2024-10-21 13:02:14 +03:00
|
|
|
- name: Check for changed files
|
|
|
|
id: changed-files
|
|
|
|
uses: tj-actions/changed-files@v11
|
|
|
|
with:
|
|
|
|
files: |
|
|
|
|
packages/twenty-front/**
|
|
|
|
- name: Skip if no relevant changes
|
|
|
|
if: steps.changed-files.outputs.any_changed == 'false'
|
|
|
|
run: echo "No relevant changes. Skipping CI."
|
|
|
|
|
|
|
|
- name: Install dependencies
|
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
|
|
|
uses: ./.github/workflows/actions/yarn-install
|
|
|
|
- name: Install Playwright
|
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
|
|
|
run: cd packages/twenty-front && npx playwright install
|
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
|
|
|
- name: Front / Restore Storybook Task Cache
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == '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
|
|
|
uses: ./.github/workflows/actions/task-cache
|
2023-09-19 05:07:38 +03:00
|
|
|
with:
|
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
|
|
|
tag: scope:frontend
|
|
|
|
tasks: storybook:build
|
2023-09-19 05:07:38 +03:00
|
|
|
- name: Front / Write .env
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == '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
|
|
|
run: npx nx reset:env twenty-front
|
2023-12-21 21:45:47 +03:00
|
|
|
- name: Run storybook tests
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
2024-06-30 21:02:13 +03:00
|
|
|
run: npx nx storybook:serve-and-test:static twenty-front --configuration=${{ matrix.storybook_scope }}
|
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
|
|
|
front-sb-test-performance:
|
2024-10-18 19:36:01 +03:00
|
|
|
runs-on: shipfox-8vcpu-ubuntu-2204
|
2024-10-17 20:35:27 +03:00
|
|
|
timeout-minutes: 60
|
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
|
|
|
env:
|
|
|
|
REACT_APP_SERVER_BASE_URL: http://localhost:3000
|
2024-05-15 23:54:51 +03:00
|
|
|
NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
|
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
|
|
|
steps:
|
|
|
|
- name: Fetch local actions
|
|
|
|
uses: actions/checkout@v4
|
2024-10-21 14:16:01 +03:00
|
|
|
with:
|
|
|
|
fetch-depth: 0
|
2024-10-21 13:02:14 +03:00
|
|
|
- name: Check for changed files
|
|
|
|
id: changed-files
|
|
|
|
uses: tj-actions/changed-files@v11
|
|
|
|
with:
|
|
|
|
files: |
|
|
|
|
packages/twenty-front/**
|
|
|
|
|
|
|
|
- name: Skip if no relevant changes
|
|
|
|
if: steps.changed-files.outputs.any_changed == 'false'
|
|
|
|
run: echo "No relevant changes. Skipping CI."
|
|
|
|
|
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
|
|
|
- name: Install dependencies
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
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
|
|
|
uses: ./.github/workflows/actions/yarn-install
|
|
|
|
- name: Install Playwright
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
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
|
|
|
run: cd packages/twenty-front && npx playwright install
|
|
|
|
- name: Front / Write .env
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
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
|
|
|
run: npx nx reset:env twenty-front
|
|
|
|
- name: Run storybook tests
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
2024-10-23 18:09:32 +03:00
|
|
|
run: npx nx run twenty-front:storybook:serve-and-test:static:performance
|
2024-05-02 17:15:36 +03:00
|
|
|
front-chromatic-deployment:
|
|
|
|
if: contains(github.event.pull_request.labels.*.name, 'run-chromatic') || github.event_name == 'push'
|
|
|
|
needs: front-sb-build
|
|
|
|
runs-on: ubuntu-latest
|
|
|
|
env:
|
|
|
|
REACT_APP_SERVER_BASE_URL: http://127.0.0.1:3000
|
|
|
|
CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
|
2024-05-15 23:54:51 +03:00
|
|
|
NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
|
2024-05-02 17:15:36 +03:00
|
|
|
steps:
|
|
|
|
- uses: actions/checkout@v4
|
|
|
|
with:
|
|
|
|
fetch-depth: 0
|
2024-10-21 13:02:14 +03:00
|
|
|
|
|
|
|
- name: Check for changed files
|
|
|
|
id: changed-files
|
|
|
|
uses: tj-actions/changed-files@v11
|
|
|
|
with:
|
|
|
|
files: |
|
|
|
|
packages/twenty-front/**
|
|
|
|
|
|
|
|
- name: Skip if no relevant changes
|
|
|
|
if: steps.changed-files.outputs.any_changed == 'false'
|
|
|
|
run: echo "No relevant changes. Skipping CI."
|
|
|
|
|
2024-05-02 17:15:36 +03:00
|
|
|
- name: Install dependencies
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
2024-05-02 17:15:36 +03:00
|
|
|
uses: ./.github/workflows/actions/yarn-install
|
|
|
|
- name: Front / Restore Storybook Task Cache
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
2024-05-02 17:15:36 +03:00
|
|
|
uses: ./.github/workflows/actions/task-cache
|
|
|
|
with:
|
|
|
|
tag: scope:frontend
|
|
|
|
tasks: storybook:build
|
|
|
|
- name: Front / Write .env
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
2024-05-02 17:15:36 +03:00
|
|
|
run: |
|
|
|
|
cd packages/twenty-front
|
|
|
|
touch .env
|
|
|
|
echo "REACT_APP_SERVER_BASE_URL: $REACT_APP_SERVER_BASE_URL" >> .env
|
|
|
|
- name: Publish to Chromatic
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
2024-05-07 22:05:45 +03:00
|
|
|
run: npx nx run twenty-front:chromatic:ci
|
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
|
|
|
front-task:
|
2023-09-19 05:07:38 +03:00
|
|
|
runs-on: ubuntu-latest
|
2024-05-15 23:54:51 +03:00
|
|
|
env:
|
|
|
|
NX_REJECT_UNKNOWN_LOCAL_CACHE: 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
|
|
|
strategy:
|
|
|
|
matrix:
|
|
|
|
task: [lint, typecheck, test]
|
2023-09-19 05:07:38 +03:00
|
|
|
steps:
|
2023-11-07 01:31:26 +03:00
|
|
|
- name: Cancel Previous Runs
|
|
|
|
uses: styfle/cancel-workflow-action@0.11.0
|
|
|
|
with:
|
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
|
|
|
access_token: ${{ github.token }}
|
2024-05-06 12:33:48 +03:00
|
|
|
- name: Fetch custom Github Actions and base branch history
|
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
|
|
|
uses: actions/checkout@v4
|
2023-09-19 05:07:38 +03:00
|
|
|
with:
|
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
|
|
|
fetch-depth: 0
|
2024-10-21 13:02:14 +03:00
|
|
|
- name: Check for changed files
|
|
|
|
id: changed-files
|
|
|
|
uses: tj-actions/changed-files@v11
|
|
|
|
with:
|
|
|
|
files: |
|
|
|
|
packages/twenty-front/**
|
|
|
|
|
|
|
|
- name: Skip if no relevant changes
|
|
|
|
if: steps.changed-files.outputs.any_changed == 'false'
|
|
|
|
run: echo "No relevant changes. Skipping CI."
|
|
|
|
|
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
|
|
|
- name: Install dependencies
|
2024-10-21 14:16:01 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == '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
|
|
|
uses: ./.github/workflows/actions/yarn-install
|
2024-05-06 12:33:48 +03:00
|
|
|
- name: Front / Restore ${{ matrix.task }} task cache
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == '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
|
|
|
uses: ./.github/workflows/actions/task-cache
|
2023-09-19 05:07:38 +03:00
|
|
|
with:
|
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
|
|
|
tag: scope:frontend
|
|
|
|
tasks: ${{ matrix.task }}
|
2024-05-06 12:33:48 +03:00
|
|
|
- name: Reset .env
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == 'true'
|
2024-05-06 12:33:48 +03:00
|
|
|
uses: ./.github/workflows/actions/nx-affected
|
|
|
|
with:
|
|
|
|
tag: scope:frontend
|
|
|
|
tasks: reset:env
|
|
|
|
- name: Run ${{ matrix.task }} task
|
2024-10-21 13:02:14 +03:00
|
|
|
if: steps.changed-files.outputs.any_changed == '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
|
|
|
uses: ./.github/workflows/actions/nx-affected
|
2023-09-19 05:07:38 +03:00
|
|
|
with:
|
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
|
|
|
tag: scope:frontend
|
2024-10-28 14:25:29 +03:00
|
|
|
tasks: ${{ matrix.task }}
|