frontend.yml

name: Frontend

on:
  push:
  pull_request:

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Concurrency control:
# - For master: serialize to prevent out-of-order deployments and preserve test feedback
# - For PRs: group by PR number and cancel outdated runs
# - For other branches: allow parallel runs per branch
concurrency:
  group: ${{ github.event_name == 'pull_request' && format('pr-{0}', github.event.pull_request.number) || (github.ref == 'refs/heads/master' && 'master-deploy-frontend' || format('ci-frontend-{0}', github.ref)) }}
  cancel-in-progress: ${{ github.event_name == 'pull_request' }}

permissions:
  contents: read

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version-file: 'frontend/package.json'
          cache: npm
          cache-dependency-path: frontend/package.json
      - name: Install Dependencies
        working-directory: frontend
        run: npm install
      - name: Run Unit Tests
        working-directory: frontend
        run: npm test -- --ci --coverage
      - name: Upload Coverage Report
        uses: actions/upload-artifact@v4
        with:
          name: coverage-report
          path: frontend/coverage/

  test-e2e:
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      matrix:
        include:
          - project: chromium
            browser: chromium
          - project: firefox
            browser: firefox
          - project: webkit
            browser: webkit
          - project: mobile-chrome
            browser: chromium
          - project: mobile-safari
            browser: webkit
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version-file: 'frontend/package.json'
          cache: npm
          cache-dependency-path: frontend/package.json
      - name: Install Dependencies
        working-directory: frontend
        run: npm install
      - name: Cache Playwright Browser
        uses: actions/cache@v4
        with:
          path: ~/.cache/ms-playwright
          key: playwright-${{ matrix.browser }}-${{ runner.os }}-${{ hashFiles('frontend/package-lock.json') }}
      - name: Install Playwright Browser
        working-directory: frontend
        run: npx playwright install --with-deps ${{ matrix.browser }}
      - name: Run E2E Tests
        working-directory: frontend
        run: npm run test:e2e -- --project=${{ matrix.project }}
      - name: Upload Playwright Report
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report-${{ matrix.project }}
          path: frontend/playwright-report/
          retention-days: 30
      - name: Upload Playwright Test Results
        uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-test-results-${{ matrix.project }}
          path: frontend/test-results/
          retention-days: 7

  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version-file: 'frontend/package.json'
          cache: npm
          cache-dependency-path: frontend/package.json
      - name: Setup Pages
        uses: actions/configure-pages@v5
        with:
          # Automatically inject basePath in your Next.js configuration file and disable
          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
          #
          # You may remove this line if you want to manage the configuration yourself.
          static_site_generator: next
      - name: Cache Build
        id: cache-build
        uses: actions/cache@v4
        with:
          path: frontend/.next/cache
          # Generate a new cache whenever packages or source files change.
          key: v1-build-cache-frontend-${{ runner.os }}-${{ hashFiles('frontend/package-lock.json') }}-${{ hashFiles('frontend/**.[jt]s', 'frontend/**.[jt]sx') }}
          # If source files changed but packages didn't, rebuild from a prior cache.
          restore-keys: |
            v1-build-cache-frontend-${{ runner.os }}-${{ hashFiles('frontend/package-lock.json') }}-
      - name: Install Dependencies
        working-directory: frontend
        run: npm install
      - name: Build
        working-directory: frontend
        run: npm run build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: 'frontend/out'

  deploy:
    needs: [test, test-e2e, build]
    if: success() && github.event_name == 'push' && github.ref == 'refs/heads/master'
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
    permissions:
      contents: read
      pages: write
      id-token: write
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

  deploy-preview:
    needs: [build]
    if: github.event_name == 'pull_request'
    environment: cloudflare-preview
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write  # Required to post PR comments
    steps:
      - name: Download build artifact
        uses: actions/download-artifact@v4
        with:
          name: github-pages
          path: preview-build
      - name: Extract artifact
        run: tar -xf preview-build/artifact.tar -C preview-build && rm preview-build/artifact.tar
      - name: Deploy to Cloudflare Pages
        id: cloudflare-deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy preview-build --project-name=cryfs-preview --branch=${{ github.head_ref }}
      - name: Post Preview URL Comment
        uses: actions/github-script@v7
        with:
          script: |
            const deploymentUrl = '${{ steps.cloudflare-deploy.outputs.deployment-url }}';
            const sha = '${{ github.event.pull_request.head.sha }}'.substring(0, 7);

            const body = `## 🚀 Preview Deployment

            | Name | Link |
            |------|------|
            | **Preview URL** | ${deploymentUrl} |
            | **Commit** | ${sha} |

            This preview was deployed to Cloudflare Pages.`;

            // Find existing comment
            const { data: comments } = await github.rest.issues.listComments({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: context.issue.number,
            });

            const botComment = comments.find(comment =>
              comment.user.type === 'Bot' &&
              comment.body.includes('Preview Deployment')
            );

            if (botComment) {
              await github.rest.issues.updateComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                comment_id: botComment.id,
                body: body
              });
            } else {
              await github.rest.issues.createComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: context.issue.number,
                body: body
              });
            }