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

name: CI Front

on:
  pull_request:
  push:
    branches: [main]

permissions:
  contents: read

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}${{ github.ref == 'refs/heads/main' && format('-{0}', github.sha) || '' }}
  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}

env:
  # restore-cache action adds 'v4-' prefix and '-<branch>-<sha>' suffix to the key
  STORYBOOK_BUILD_CACHE_KEY_FOR_RESTORE_ACTION: storybook-build-ubuntu-latest-8-cores-runner
  STORYBOOK_BUILD_CACHE_KEY_FOR_SAVE_ACTION: v4-storybook-build-ubuntu-latest-8-cores-runner-${{ github.ref_name }}-${{ github.sha }}

jobs:
  changed-files-check:
    if: github.event_name == 'pull_request'
    uses: ./.github/workflows/changed-files.yaml
    with:
      files: |
        package.json
        yarn.lock
        packages/twenty-front/**
        packages/twenty-front-component-renderer/**
        packages/twenty-ui/**
        packages/twenty-shared/**
        packages/twenty-sdk/**
        !packages/twenty-sdk/package.json
  front-sb-build:
    needs: changed-files-check
    if: >-
      always() &&
      (github.event_name == 'push' ||
      needs.changed-files-check.outputs.any_changed == 'true')
    timeout-minutes: 30
    runs-on: ubuntu-latest-8-cores
    env:
      REACT_APP_SERVER_BASE_URL: http://localhost:3000
    steps:
      - name: Fetch local actions
        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
        with:
          fetch-depth: 10
      - 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: Upload storybook build
        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: storybook-static
          path: packages/twenty-front/storybook-static
          retention-days: 1
      - 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: ubuntu-latest
    needs: front-sb-build
    if: always() && needs.front-sb-build.result == 'success'
    strategy:
      fail-fast: false
      matrix:
        shard: [1, 2, 3, 4]
        storybook_scope: ${{ github.event_name == 'push' && fromJSON('["modules", "pages"]') || fromJSON('["modules", "pages", "performance"]') }}
    env:
      SHARD_COUNTER: 4
      REACT_APP_SERVER_BASE_URL: http://localhost:3000
      STORYBOOK_URL: http://localhost:6006
    steps:
      - name: Fetch local actions
        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
        with:
          fetch-depth: 10
      - 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_FOR_RESTORE_ACTION }}
      - name: Clean stale storybook vitest cache
        run: rm -rf packages/twenty-front/node_modules/.cache/storybook
      - name: Build dependencies
        run: |
          npx nx build twenty-shared
          npx nx build twenty-ui
          npx nx build twenty-front-component-renderer
      - name: Download storybook build
        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
        with:
          name: storybook-static
          path: packages/twenty-front/storybook-static
      - name: Resolve Playwright version
        id: playwright-version
        run: echo "version=$(node -p "require('@playwright/test/package.json').version")" >> "$GITHUB_OUTPUT"
      - name: Cache Playwright browsers
        id: playwright-cache
        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        with:
          path: ~/.cache/ms-playwright
          key: v4-playwright-browsers-${{ runner.os }}-${{ steps.playwright-version.outputs.version }}
      - name: Install Playwright
        if: steps.playwright-cache.outputs.cache-hit != 'true'
        run: |
          cd packages/twenty-front
          npx playwright install chromium
      - name: Front / Write .env
        run: npx nx reset:env twenty-front
      - name: Serve storybook & run tests
        run: |
          npx http-server packages/twenty-front/storybook-static --port 6006 --silent &
          timeout 30 bash -c 'until curl -sf http://localhost:6006 > /dev/null 2>&1; do sleep 1; done'
          npx nx storybook:test twenty-front --configuration=${{ matrix.storybook_scope }} --shard=${{ matrix.shard }}/${{ env.SHARD_COUNTER }}
      - name: Upload screenshots for visual regression
        if: always() && !cancelled() && matrix.storybook_scope != 'performance'
        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: argos-screenshots-twenty-front-${{ matrix.storybook_scope }}-${{ matrix.shard }}
          path: packages/twenty-front/screenshots
          retention-days: 1
          overwrite: true
      # - name: Rename coverage file
      #   run: |
      #     if [ -f "packages/twenty-front/coverage/storybook/coverage-final.json" ]; then
      #       mv packages/twenty-front/coverage/storybook/coverage-final.json packages/twenty-front/coverage/storybook/coverage-shard-${{matrix.shard}}.json
      #     else
      #       echo "Error: coverage-final.json not found"
      #       ls -la packages/twenty-front/coverage/storybook/ || echo "Coverage directory does not exist"
      #       exit 1
      #     fi
      # - name: Upload coverage artifact
      #   uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
      #   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@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
  #       with:
  #         fetch-depth: 10
  #     - name: Install dependencies
  #       uses: ./.github/actions/yarn-install
  #     - uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
  #       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-sb-screenshots:
    timeout-minutes: 5
    runs-on: ubuntu-latest
    needs: front-sb-test
    if: always() && needs.front-sb-test.result == 'success'
    steps:
      - name: Download shard screenshot artifacts
        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
        with:
          pattern: argos-screenshots-twenty-front-*
          merge-multiple: true
          path: screenshots
      - name: Upload merged screenshots artifact
        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: argos-screenshots-twenty-front
          path: screenshots
          retention-days: 1
          overwrite: true
  front-task:
    needs: changed-files-check
    if: needs.changed-files-check.outputs.any_changed == 'true'
    timeout-minutes: 30
    runs-on: ubuntu-latest
    env:
      NODE_OPTIONS: '--max-old-space-size=6144'
      TASK_CACHE_KEY: front-task-${{ matrix.task }}
    strategy:
      matrix:
        task: [lint, typecheck, test]
    steps:
      - name: Fetch custom Github Actions and base branch history
        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
        with:
          fetch-depth: 10
      - 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
        id: run-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: ubuntu-latest-8-cores
    env:
      NODE_OPTIONS: "--max-old-space-size=10240"
      ANALYZE: "true"
    steps:
      - name: Fetch custom Github Actions and base branch history
        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
        with:
          fetch-depth: 10
      - 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@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
      #   with:
      #     name: frontend-build
      #     path: packages/twenty-front/build
      #     retention-days: 1
  ci-front-status-check:
    if: always() && !cancelled()
    timeout-minutes: 5
    runs-on: ubuntu-latest
    needs:
      [
        changed-files-check,
        front-task,
        front-build,
        # merge-reports-and-check-coverage,
        front-sb-test,
        front-sb-build,
        front-sb-screenshots,
      ]
    steps:
      - name: Fail job if any needs failed
        if: contains(needs.*.result, 'failure')
        run: exit 1