deploy-ui-docs-pr.yml

name: Deploy UI Docs (PR Preview)

on:
  pull_request:
    branches:
      - main
    paths:
      - 'projects/orcid-ui-docs/**'
      - 'projects/orcid-ui/**'
      - 'projects/orcid-tokens/**'
      - 'package.json'
      - 'angular.json'
      - '.github/workflows/deploy-ui-docs-pr.yml'
  workflow_dispatch:
    # Allows manual triggering for testing

jobs:
  build-and-deploy-preview:
    runs-on: ubuntu-latest
    
    permissions:
      contents: write
      pull-requests: write  # To comment on PR with preview URL
    
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      
      - name: Extract ticket ID from branch name
        id: extract-ticket
        env:
          HEAD_REF: ${{ github.head_ref }}
          REF_NAME: ${{ github.ref_name }}
        run: |
          BRANCH_NAME="${HEAD_REF:-$REF_NAME}"
          echo "Branch name: $BRANCH_NAME"
          
          # Extract ticket ID (e.g., PD-1234 from lmendoza/PD-1234)
          TICKET_ID=$(echo "$BRANCH_NAME" | grep -oE '[A-Z]+-[0-9]+' || echo "")
          
          if [ -z "$TICKET_ID" ]; then
            echo "WARNING: No ticket ID found in branch name, using full branch name"
            # Sanitize branch name for URL (replace / with -)
            TICKET_ID=$(echo "$BRANCH_NAME" | sed 's/\//-/g')
          fi
          
          echo "ticket_id=$TICKET_ID" >> "$GITHUB_OUTPUT"
          echo "Extracted ticket ID: $TICKET_ID"
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'yarn'
      
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      
      - name: Build orcid-ui-docs with dynamic base-href
        run: |
          TICKET_ID="${{ steps.extract-ticket.outputs.ticket_id }}"
          BASE_HREF="/orcid-angular/runway/$TICKET_ID/"
          echo "Building with base-href: $BASE_HREF"
          yarn build:ui-docs --base-href "$BASE_HREF"
        continue-on-error: false
      
      - name: Determine build output directory
        id: set-output
        run: |
          if [ -d "dist/orcid-ui-docs/browser" ]; then
            echo "directory=dist/orcid-ui-docs/browser" >> "$GITHUB_OUTPUT"
          elif [ -d "dist/orcid-ui-docs" ]; then
            echo "directory=dist/orcid-ui-docs" >> "$GITHUB_OUTPUT"
          else
            echo "ERROR: Build output directory not found" >&2
            ls -la dist/ >&2
            exit 1
          fi
      
      - name: Setup SPA support for GitHub Pages
        run: |
          BUILD_DIR="${{ steps.set-output.outputs.directory }}"
          # Copy index.html to 404.html for SPA routing support
          # This 404.html will handle routes within THIS specific PR preview SPA
          cp "$BUILD_DIR/index.html" "$BUILD_DIR/404.html"
          # Note: .nojekyll is already in the repo root and applies to all subdirectories
          echo "✅ SPA support configured: 404.html created for PR preview"
      
      - name: Deploy to GitHub Pages (PR Preview)
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ${{ steps.set-output.outputs.directory }}
          destination_dir: runway/${{ steps.extract-ticket.outputs.ticket_id }}
          keep_files: true  # Keep other PR previews and main deployment
          cname: false
      
      - name: Comment on PR with preview URL
        uses: actions/github-script@v7
        if: github.event_name == 'pull_request'
        with:
          script: |
            const ticketId = '${{ steps.extract-ticket.outputs.ticket_id }}';
            const previewUrl = `https://orcid.github.io/orcid-angular/runway/${ticketId}/`;
            
            const comment = `## 🚀 Preview Deployment
            
            Your UI docs preview is ready!
            
            **Preview URL:** ${previewUrl}
            
            This preview will be updated automatically when you push new commits to this PR.
            
            ---
            *Deployed from commit: \`${context.sha.substring(0, 7)}\`*`;
            
            // 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) {
              // Update existing comment
              await github.rest.issues.updateComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                comment_id: botComment.id,
                body: comment
              });
            } else {
              // Create new comment
              await github.rest.issues.createComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: context.issue.number,
                body: comment
              });
            }