twenty/.github/workflows/ci-front.yaml

name: CI Front and E2E

on:
  push:
    branches:
      - main

  pull_request:

permissions:
  contents: read

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}

env:
  STORYBOOK_BUILD_CACHE_KEY_FOR_RESTORE_ACTION: storybook-build-depot-ubuntu-24.04-8-runner
  STORYBOOK_BUILD_CACHE_KEY_FOR_SAVE_ACTION: v3-storybook-build-depot-ubuntu-24.04-8-runner-${{ github.ref_name }}-${{ github.sha }}

jobs:
  changed-files-check:
    uses: ./.github/workflows/changed-files.yaml
    with:
      files: |
        package.json
        yarn.lock
        packages/twenty-front/**
        packages/twenty-ui/**
        packages/twenty-shared/**
  changed-files-check-e2e:
    uses: ./.github/workflows/changed-files.yaml
    with:
      files: |
        packages/**
        playwright.config.ts
        .github/workflows/ci-front.yaml
  front-sb-build:
    needs: changed-files-check
    if: needs.changed-files-check.outputs.any_changed == 'true'
    timeout-minutes: 30
    runs-on: depot-ubuntu-24.04-8
    env:
      REACT_APP_SERVER_BASE_URL: http://localhost:3000
    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
        with:
          fetch-depth: 0
      - name: Install dependencies
        uses: ./.github/actions/yarn-install
      - name: Diagnostic disk space issue
        run: df -h
      - name: Front / Write .env
        run: npx nx reset:env twenty-front
      - name: Front / Build storybook
        run: npx nx storybook:build twenty-front
      - name: Save storybook build cache
        uses: ./.github/actions/save-cache
        with:
          key: ${{ env.STORYBOOK_BUILD_CACHE_KEY_FOR_SAVE_ACTION }}
  front-sb-test:
    timeout-minutes: 30
    runs-on: depot-ubuntu-24.04-8
    needs: front-sb-build
    strategy:
      fail-fast: false
      matrix:
        shard: [1, 2, 3, 4]
        storybook_scope: [modules, pages, performance]
    env:
      SHARD_COUNTER: 4
      REACT_APP_SERVER_BASE_URL: http://localhost:3000
    steps:
      - name: Fetch local actions
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Install dependencies
        uses: ./.github/actions/yarn-install
      - name: Install Playwright
        run: cd packages/twenty-front && npx playwright install
      - name: Restore storybook build cache
        uses: ./.github/actions/restore-cache
        with:
          key: ${{ env.STORYBOOK_BUILD_CACHE_KEY_FOR_RESTORE_ACTION }}
      - name: Front / Write .env
        run: npx nx reset:env twenty-front
      - name: Run storybook tests
        run: npx nx storybook:serve-and-test:static twenty-front --configuration=${{ matrix.storybook_scope }} --shard=${{ matrix.shard }}/${{ env.SHARD_COUNTER }} --checkCoverage=false
      - name: Rename coverage file
        run: mv packages/twenty-front/coverage/storybook/coverage-storybook.json packages/twenty-front/coverage/storybook/coverage-shard-${{matrix.shard}}.json
      - name: Upload coverage artifact
        uses: actions/upload-artifact@v4
        with:
          retention-days: 1
          name: coverage-artifacts-${{ matrix.storybook_scope }}-${{ github.run_id }}-${{ matrix.shard }}
          path: packages/twenty-front/coverage/storybook/coverage-shard-${{matrix.shard}}.json
  merge-reports-and-check-coverage:
    timeout-minutes: 30
    runs-on: ubuntu-latest
    needs: front-sb-test
    env:
      PATH_TO_COVERAGE: packages/twenty-front/coverage/storybook
    strategy:
      matrix:
        storybook_scope: [modules, pages, performance]
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Install dependencies
        uses: ./.github/actions/yarn-install
      - uses: actions/download-artifact@v4
        with:
          pattern: coverage-artifacts-${{ matrix.storybook_scope }}-${{ github.run_id }}-*
          merge-multiple: true
          path: coverage-artifacts
      - name: Merge coverage reports
        run: |
          mkdir -p ${{ env.PATH_TO_COVERAGE }}
          npx nyc merge coverage-artifacts ${{ env.PATH_TO_COVERAGE }}/coverage-storybook.json
      - name: Checking coverage
        run: npx nx storybook:coverage twenty-front --checkCoverage=true --configuration=${{ matrix.storybook_scope }}
  front-chromatic-deployment:
    timeout-minutes: 30
    if: contains(github.event.pull_request.labels.*.name, 'run-chromatic') || github.event_name == 'push'
    needs: front-sb-build
    runs-on: depot-ubuntu-24.04-8
    env:
      REACT_APP_SERVER_BASE_URL: http://127.0.0.1:3000
      CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Install dependencies
        uses: ./.github/actions/yarn-install
      - name: Restore storybook build cache
        uses: ./.github/actions/restore-cache
        with:
          key: ${{ env.STORYBOOK_BUILD_CACHE_KEY }}
      - name: Front / Write .env
        run: |
          cd packages/twenty-front
          touch .env
          echo "" >> .env
          echo "REACT_APP_SERVER_BASE_URL=$REACT_APP_SERVER_BASE_URL" >> .env
      - name: Publish to Chromatic
        run: npx nx run twenty-front:chromatic:ci
  front-task:
    needs: changed-files-check
    if: needs.changed-files-check.outputs.any_changed == 'true'
    timeout-minutes: 30
    runs-on: ubuntu-latest
    env:
      TASK_CACHE_KEY: front-task-${{ matrix.task }}
    strategy:
      matrix:
        task: [lint, typecheck, test]
    steps:
      - name: Cancel Previous Runs
        uses: styfle/cancel-workflow-action@0.11.0
        with:
          access_token: ${{ github.token }}
      - name: Fetch custom Github Actions and base branch history
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Install dependencies
        uses: ./.github/actions/yarn-install
      - name: Restore ${{ matrix.task }} cache
        id: restore-task-cache
        uses: ./.github/actions/restore-cache
        with:
          key: ${{ env.TASK_CACHE_KEY }}
      - name: Reset .env
        uses: ./.github/actions/nx-affected
        with:
          tag: scope:frontend
          tasks: reset:env
      - name: Run ${{ matrix.task }} task
        uses: ./.github/actions/nx-affected
        with:
          tag: scope:frontend
          tasks: ${{ matrix.task }}
      - name: Save ${{ matrix.task }} cache
        uses: ./.github/actions/save-cache
        with:
          key: ${{ steps.restore-task-cache.outputs.cache-primary-key }}
  front-build:
    needs: changed-files-check
    if: needs.changed-files-check.outputs.any_changed == 'true'
    timeout-minutes: 30
    runs-on: depot-ubuntu-24.04-8
    env:
      NODE_OPTIONS: "--max-old-space-size=10240"
    steps:
      - name: Cancel Previous Runs
        uses: styfle/cancel-workflow-action@0.11.0
        with:
          access_token: ${{ github.token }}
      - name: Fetch custom Github Actions and base branch history
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Install dependencies
        uses: ./.github/actions/yarn-install
      - name: Front / Write .env
        run: npx nx reset:env twenty-front
      - name: Build frontend
        run: npx nx build twenty-front
      - name: Upload frontend build artifact
        uses: actions/upload-artifact@v4
        with:
          name: frontend-build
          path: packages/twenty-front/build
          retention-days: 1
  e2e-test:
    runs-on: ubuntu-latest
    needs: [changed-files-check-e2e, front-build]
    if: |
      always() &&
      needs.changed-files-check-e2e.outputs.any_changed == 'true' &&
      (needs.front-build.result == 'success' || needs.front-build.result == 'skipped') &&
      (github.event_name == 'push' || (github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'run-e2e')))
    timeout-minutes: 30
    env:
      NODE_OPTIONS: "--max-old-space-size=10240"
    services:
      postgres:
        image: twentycrm/twenty-postgres-spilo
        env:
          PGUSER_SUPERUSER: postgres
          PGPASSWORD_SUPERUSER: postgres
          ALLOW_NOSSL: "true"
          SPILO_PROVIDER: "local"
        ports:
          - 5432:5432
        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5
      redis:
        image: redis
        ports:
          - 6379:6379
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*

      - name: Check system resources
        run: |
          echo "Available memory:"
          free -h
          echo "Available disk space:"
          df -h
          echo "CPU info:"
          lscpu

      - name: Install dependencies
        uses: ./.github/actions/yarn-install

      - name: Build twenty-shared
        run: npx nx build twenty-shared

      - name: Install Playwright Browsers
        run: npx nx setup twenty-e2e-testing

      - name: Setup environment files
        run: |
          cp packages/twenty-front/.env.example packages/twenty-front/.env
          npx nx reset:env:e2e-testing-server twenty-server

      - name: Download frontend build artifact
        if: needs.front-build.result == 'success'
        uses: actions/download-artifact@v4
        with:
          name: frontend-build
          path: packages/twenty-front/build

      - name: Build frontend (if not available from front-build)
        if: needs.front-build.result == 'skipped'
        run: NODE_ENV=production NODE_OPTIONS="--max-old-space-size=10240" npx nx build twenty-front

      - name: Build server
        run: npx nx build twenty-server

      - name: Create and setup database
        run: |
          PGPASSWORD=postgres psql -h localhost -p 5432 -U postgres -d postgres -c 'CREATE DATABASE "default";'
          PGPASSWORD=postgres psql -h localhost -p 5432 -U postgres -d postgres -c 'CREATE DATABASE "test";'
          npx nx run twenty-server:database:reset

      - name: Start server
        run: |
          npx nx start twenty-server &
          echo "Waiting for server to be ready..."
          timeout 60 bash -c 'until curl -s http://localhost:3000/health; do sleep 2; done'

      - name: Start frontend
        run: |
          npm_config_yes=true npx serve -s packages/twenty-front/build -l 3001 &
          echo "Waiting for frontend to be ready..."
          timeout 60 bash -c 'until curl -s http://localhost:3001; do sleep 2; done'

      - name: Start worker
        run: |
          npx nx run twenty-server:worker &
          echo "Worker started"

      - name: Run Playwright tests
        run: npx nx test twenty-e2e-testing

      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: packages/twenty-e2e-testing/run_results/
          retention-days: 30

  ci-front-status-check:
    if: always() && !cancelled()
    timeout-minutes: 5
    runs-on: ubuntu-latest
    needs:
      [
        changed-files-check,
        front-task,
        front-build,
        front-chromatic-deployment,
        merge-reports-and-check-coverage,
        front-sb-test,
        front-sb-build,
      ]
    steps:
      - name: Fail job if any needs failed
        if: contains(needs.*.result, 'failure')
        run: exit 1
  ci-e2e-status-check:
    if: always() && !cancelled()
    timeout-minutes: 5
    runs-on: ubuntu-latest
    needs: [changed-files-check-e2e, e2e-test]
    steps:
      - name: Fail job if any needs failed
        if: contains(needs.*.result, 'failure')
        run: exit 1