Update chromatic job with build details (#4856)

* move chromatic to push event and change message

* output test

* test

* tweak

* get PR for push event

* changes

* omit forks and check label using gh action

* tweak

* workflow tweaks

* test tweak

* remove test output

* add pending comment

* tweak message

* newline

* only run chromatic workflow if pushed files are in js folder

* test

* remove test

* update workflow path filter with theme files

Co-authored-by: pngwn <hello@pngwn.io>

* add chromatic workflow to path filter

---------

Co-authored-by: pngwn <hello@pngwn.io>

.github/workflows/deploy-chromatic.yml

@@ -0,0 +1,67 @@
+name: 'deploy to chromatic'
+
+on: 
+  push:
+    paths:
+      - js/**
+      - gradio/themes/**
+      - .github/workflows/deploy-chromatic.yml
+
+jobs:
+  get-current-pr:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: 8BitJonny/gh-get-current-pr@2.2.0
+      id: get-pr
+    outputs:
+      pr_found: ${{ steps.get-pr.outputs.pr_found }}
+      pr_number: ${{ steps.get-pr.outputs.number }}
+      pr_labels: ${{ steps.get-pr.outputs.pr_labels }}
+  chromatic-deployment:
+    needs: get-current-pr
+    runs-on: ubuntu-latest
+    if: ${{ github.repository == 'gradio-app/gradio' && !contains(needs.get-current-pr.outputs.pr_labels, 'no-visual-update') }}
+    steps:
+      - name: post pending deployment comment to PR
+        if: ${{ needs.get-current-pr.outputs.pr_found }} == 'true' 
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            Chromatic build pending :hourglass:
+          GITHUB_TOKEN: ${{ secrets.COMMENT_TOKEN }}
+          comment_tag: chromatic-build
+          pr_number: ${{ needs.get-current-pr.outputs.pr_number }}
+      - 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: 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@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+      - name: post deployment link to PR
+        if: ${{ needs.get-current-pr.outputs.pr_found }} == 'true' 
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            :tada: Chromatic build completed!
+            
+            There are ${{ steps.publish-chromatic.outputs.changeCount }} visual changes to review.
+            There are ${{ steps.publish-chromatic.outputs.errorCount }} failed tests to fix. 
+            * [Storybook Preview](${{ steps.publish-chromatic.outputs.storybookUrl }})
+            * [Build Review](${{ steps.publish-chromatic.outputs.buildUrl }})
+          GITHUB_TOKEN: ${{ secrets.COMMENT_TOKEN }}
+          comment_tag: chromatic-build
+          pr_number: ${{ needs.get-current-pr.outputs.pr_number }}

.github/workflows/ui.yml

@@ -57,38 +57,3 @@ jobs:
         run: |
           . venv/bin/activate
           pnpm run test:ct
-  chromatic-deployment:
-    runs-on: ubuntu-latest
-    if: ${{ !contains( github.event.pull_request.labels.*.name, 'no-visual-update') && !github.event.pull_request.head.repo.fork }}  
-    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: 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@v1
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          token: ${{ secrets.GITHUB_TOKEN }}
-      - name: post deployment link to PR
-        if: ${{ github.event_name == 'pull_request' }}
-        uses: thollander/actions-comment-pull-request@v2
-        with:
-          message: |
-            Chromatic build successful :tada:
-            * [Storybook Preview](${{steps.publish-chromatic.outputs.storybookUrl}})
-            * [Build Review](${{steps.publish-chromatic.outputs.buildUrl}})
-          GITHUB_TOKEN: ${{ secrets.COMMENT_TOKEN }}
-          comment_tag: chromatic-build
-          pr_number: ${{ env.pr_number }}