Merge pull request #31190 from backstage/chromatic-bot

Improve Chromatic setup

.github/workflows/verify_chromatic.yml

@@ -9,7 +9,7 @@ on:
     paths:
       - '.github/workflows/verify_chromatic.yml'
       - '.storybook/**'
-      - 'packages/ui/src/**'
+      - 'packages/ui/**'
       - '**/*.stories.tsx'
 
 jobs:
@@ -31,7 +31,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
-          fetch-depth: 0 # Required to retrieve git history
+          fetch-depth: 10000 # Required to retrieve git history
 
       - name: Use node.js ${{ matrix.node-version }}
         uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
@@ -48,6 +48,7 @@ jobs:
         run: yarn build-storybook:chromatic
 
       - name: Run Chromatic
+        id: chromatic
         uses: chromaui/action@latest
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
@@ -56,3 +57,28 @@ jobs:
           projectToken: chpt_dab72dc0f97d55b
           storybookBuildDir: dist-storybook
           onlyChanged: true
+          externals: |
+            packages/ui/**/*.css
+            packages/ui/css/**
+            packages/ui/src/**/*.css
+
+      - name: Prepare Chromatic Message
+        if: github.event_name == 'pull_request' && steps.chromatic.outputs.url
+        id: prepare-message
+        run: |
+          if [ "${{ steps.chromatic.outputs.changeCount }}" = "0" ] || [ -z "${{ steps.chromatic.outputs.changeCount }}" ]; then
+            echo "changes-text=No visual changes detected - [**View build in Chromatic**](${{ steps.chromatic.outputs.buildUrl }})" >> $GITHUB_OUTPUT
+          else
+            echo "changes-text=**${{ steps.chromatic.outputs.changeCount }}** visual changes are waiting for review - [**Review changes in Chromatic**](${{ steps.chromatic.outputs.buildUrl }})" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Post Chromatic Link in PR Comment
+        if: github.event_name == 'pull_request' && steps.chromatic.outputs.url
+        uses: mshick/add-pr-comment@v2
+        with:
+          message: |
+            ## 🎨 Visual Testing with Chromatic
+
+            - ${{ steps.prepare-message.outputs.changes-text }}
+            - **${{ steps.chromatic.outputs.specCount}}** stories for **${{ steps.chromatic.outputs.componentCount}}** Components - [**Preview changes in Storybook**](${{ steps.chromatic.outputs.storybookUrl }})
+          repo-token: ${{ secrets.GITHUB_TOKEN }}