Merge pull request #19884 from mozilla/FXA-12879

feat(storybooks): use custom action for github pages deploy

Author: MagentaManifold

.github/workflows/deploy-storybooks.yml

@@ -11,6 +11,8 @@ permissions:
   contents: write
   pull-requests: write
   statuses: write
+  pages: write
+  id-token: write
 
 jobs:
   build:
@@ -84,11 +86,13 @@ jobs:
           path: deploy/
           retention-days: 1
 
-  deploy:
-    name: Deploy to GitHub Pages
+  prepare:
+    name: Prepare Storybooks for Deployment
     runs-on: ubuntu-latest
     needs: build
     if: needs.build.outputs.has_storybooks == 'true'
+    outputs:
+      deploy_dir: ${{ steps.deploy-dir.outputs.path }}
     # Single concurrency group to prevent conflicts
     concurrency:
       group: gh-pages-deploy
@@ -135,16 +139,16 @@ jobs:
           REPO_NAME: ${{ github.event.repository.name }}
           REPO_OWNER: ${{ github.repository_owner }}
 
-      - name: Commit and push to gh-pages
+      - name: Update gh-pages branch for artifact storage
         run: |
           cd gh-pages
           git config user.name "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"
 
           if [ "${{ github.event_name }}" == "pull_request" ]; then
-            COMMIT_MSG="Deploy storybooks for PR ${{ github.event.pull_request.number }}"
+            COMMIT_MSG="Store storybooks for PR ${{ github.event.pull_request.number }}"
           else
-            COMMIT_MSG="Deploy storybooks from main branch"
+            COMMIT_MSG="Store storybooks from main branch"
           fi
 
           # Create orphan branch (no history) with current content
@@ -155,12 +159,28 @@ jobs:
           # Replace gh-pages with the new orphan branch
           git push --force origin gh-pages-new:gh-pages
 
+      - name: Upload GitHub Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: gh-pages/
+
+  deploy:
+    name: Deploy to GitHub Pages
+    runs-on: ubuntu-latest
+    needs: [build, prepare]
+    if: needs.build.outputs.has_storybooks == 'true'
+    continue-on-error: true
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+
       - name: Create GitHub status check
         if: github.event_name == 'pull_request'
         uses: actions/github-script@v8
         with:
           script: |
-            const deployDir = process.env.DEPLOY_DIR;
+            const deployDir = "${{ needs.prepare.outputs.deploy_dir }}";
             const deployUrl = `https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/${deployDir}/`;
             const sha = context.payload.pull_request.head.sha;