name: 'deploy to chromatic'

on: 
  push:
    paths:
      - 'js/**'
      - 'gradio/themes/**'
      - '.github/workflows/deploy-chromatic.yml'
      - '!js/_website/**'


jobs:
  get-current-pr:
    runs-on: ubuntu-latest
    outputs:
      pr_found: ${{ steps.get-pr.outputs.pr_found }}
      pr_number: ${{ steps.get-pr.outputs.number }}
      pr_labels: ${{ steps.get-pr.outputs.pr_labels }}
    steps:
    - uses: 8BitJonny/gh-get-current-pr@2.2.0
      id: get-pr
      with:
        filterOutDraft: true
  comment-chromatic-start:
    uses: "./.github/workflows/comment-queue.yml"
    needs: get-current-pr
    secrets:
      gh_token: ${{ secrets.COMMENT_TOKEN }}
    with:
      pr_number: ${{ needs.get-current-pr.outputs.pr_number }}
      message: |
        storybook~pending~null
        visual~pending~0~0~null
  chromatic-deployment:
    needs: get-current-pr
    runs-on: ubuntu-latest
    outputs:
      changes: ${{ steps.publish-chromatic.outputs.changeCount }}
      errors: ${{ steps.publish-chromatic.outputs.errorCount }}
      storybook_url: ${{ steps.publish-chromatic.outputs.storybookUrl }}
      build_url: ${{ steps.publish-chromatic.outputs.buildUrl }}
    if: ${{ github.repository == 'gradio-app/gradio' && !contains(needs.get-current-pr.outputs.pr_labels, 'no-visual-update') }}
    steps:
      - uses: actions/checkout@v3
        with:
            fetch-depth: 0
      - name: install dependencies
        uses: "./.github/actions/install-all-deps"
        with:
          always-install-pnpm: true
          skip_build: 'true'
      - name: build client
        run: pnpm --filter @gradio/client build 
      - name: generate theme.css
        run: | 
          . venv/bin/activate
          python scripts/generate_theme.py --outfile js/storybook/theme.css
      - name: build storybook
        run: pnpm build-storybook --quiet
      - name: publish to chromatic
        id: publish-chromatic
        uses: chromaui/action@v10
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}
          onlyChanged: true
          exitOnceUploaded: true
  comment-chromatic-end:
    uses: "./.github/workflows/comment-queue.yml"
    needs: [chromatic-deployment, get-current-pr]
    secrets:
      gh_token: ${{ secrets.COMMENT_TOKEN }}
    with:
      pr_number: ${{ needs.get-current-pr.outputs.pr_number }}
      message: |
        storybook~success~${{ needs.chromatic-deployment.outputs.storybook_url }}
        visual~success~${{ needs.chromatic-deployment.outputs.changes }}~${{ needs.chromatic-deployment.outputs.errors }}~${{ needs.chromatic-deployment.outputs.build_url }}
  comment-chromatic-fail:
    uses: "./.github/workflows/comment-queue.yml"
    needs: [chromatic-deployment, get-current-pr]
    if: always() && needs.chromatic-deployment.result == 'failure'
    secrets:
      gh_token: ${{ secrets.COMMENT_TOKEN }}
    with:
      pr_number: ${{ needs.get-current-pr.outputs.pr_number }}
      message: |
        storybook~failure~https://github.com/gradio-app/gradio/actions/runs/${{github.run_id}}/
        visual~failure~0~0~https://github.com/gradio-app/gradio/actions/runs/${{github.run_id}}/