feat: migrate storybook to gh actions (#29929)

## **Description**  [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29929?quickstart=1) This PR migrates the storybook jobs from CircleCI to GitHub Actions. ## **Related issues** Fixes: #29447 ## **Manual testing steps** 1. Everything should work the same as before ## **Screenshots/Recordings** Not applicable  ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
MetaMask · Jan 29, 2025 · a9d90e5 · a9d90e5
1 parent d9a2a12
commit a9d90e5
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 215 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -134,9 +134,6 @@ workflows:
       - prep-build-test-flask-mv2:
           requires:
             - prep-deps
-      - prep-build-storybook:
-          requires:
-            - prep-deps
       - prep-build-ts-migration-dashboard:
           requires:
             - prep-deps
@@ -185,10 +182,6 @@ workflows:
                 - /^Version-v(\d+)[.](\d+)[.](\d+)/
           requires:
             - prep-build
-      - test-storybook:
-          requires:
-            - prep-deps
-            - prep-build-storybook
       - validate-source-maps:
           requires:
             - prep-build
@@ -222,7 +215,6 @@ workflows:
             - test-e2e-firefox-flask
             - test-e2e-chrome-vault-decryption
             - test-e2e-chrome-webpack
-            - test-storybook
       - benchmark:
           requires:
             - prep-build-test
@@ -243,7 +235,6 @@ workflows:
             - prep-build-test-mv2
             - prep-build-test-flask
             - prep-build-test-flask-mv2
-            - prep-build-storybook
             - prep-build-ts-migration-dashboard
             - benchmark
             - user-actions-benchmark
@@ -260,12 +251,6 @@ workflows:
             - prep-build-flask
             - prep-build-flask-mv2
             - all-tests-pass
-      - job-publish-storybook:
-          filters:
-            branches:
-              only: main
-          requires:
-            - prep-build-storybook
       - job-publish-ts-migration-dashboard:
           filters:
             branches:
@@ -663,21 +648,6 @@ jobs:
           paths:
             - dist-test-webpack
 
-  prep-build-storybook:
-    executor: node-linux-medium
-    steps:
-      - run: *shallow-git-clone-and-enable-vnc
-      - run: corepack enable
-      - attach_workspace:
-          at: .
-      - run:
-          name: Build Storybook
-          command: yarn storybook:build
-      - persist_to_workspace:
-          root: .
-          paths:
-            - storybook-build
-
   prep-build-ts-migration-dashboard:
     executor: node-browsers-small
     steps:
@@ -704,20 +674,6 @@ jobs:
           name: Rerun workflows from failed
           command: yarn ci-rerun-from-failed
 
-  test-storybook:
-    executor: node-browsers-medium-plus
-    steps:
-      - run: *shallow-git-clone-and-enable-vnc
-      - run: sudo corepack enable
-      - attach_workspace:
-          at: .
-      - run:
-          name: Install Playwright browsers
-          command: yarn exec playwright install chromium
-      - run:
-          name: Test Storybook
-          command: yarn test-storybook:ci
-
   test-e2e-chrome-webpack:
     executor: node-browsers-medium-plus
     parallelism: 20
@@ -1085,9 +1041,6 @@ jobs:
       - store_artifacts:
           path: build-artifacts
           destination: build-artifacts
-      - store_artifacts:
-          path: storybook-build
-          destination: storybook
       - store_artifacts:
           path: development/ts-migration-dashboard/build/final
           destination: ts-migration-dashboard
@@ -1115,22 +1068,6 @@ jobs:
           name: Create GitHub release
           command: .circleci/scripts/release-create-gh-release.sh
 
-  job-publish-storybook:
-    executor: node-browsers-small
-    steps:
-      - add_ssh_keys:
-          fingerprints:
-            - '3d:49:29:f4:b2:e8:ea:af:d1:32:eb:2a:fc:15:85:d8'
-      - run: *shallow-git-clone-and-enable-vnc
-      - run: sudo corepack enable
-      - attach_workspace:
-          at: .
-      - run:
-          name: storybook:deploy
-          command: |
-            git remote add storybook [email protected]:MetaMask/metamask-storybook.git
-            yarn storybook:deploy
-
   job-publish-ts-migration-dashboard:
     executor: node-browsers-small
     steps:

diff --git a/.github/workflows/build-storybook.yml b/.github/workflows/build-storybook.yml
@@ -0,0 +1,34 @@
+name: Build storybook
+
+on:
+  workflow_call:
+
+jobs:
+  build-storybook:
+    name: Build storybook
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup environment
+        uses: metamask/github-tools/.github/actions/setup-environment@main
+
+      - name: Build storybook
+        run: yarn storybook:build
+
+      - name: Upload 'storybook-build' to S3
+        uses: metamask/github-tools/.github/actions/upload-s3@1233659b3850eb84824d7375e2e0c58eb237701d
+        with:
+          aws-region: ${{ vars.AWS_REGION }}
+          role-to-assume: ${{ vars.AWS_IAM_ROLE }}
+          s3-bucket: ${{ vars.AWS_S3_BUCKET }}/${{ github.event.repository.name }}/${{ github.run_id }}/storybook-build
+          path: storybook-build
+
+      - name: Deploy storybook
+        # For a `pull_request` event, the branch is `github.head_ref``.
+        # For a `push` event, the branch is `github.ref_name`.
+        if: ${{ (github.head_ref || github.ref_name) == 'main' }}
+        run: |
+          git remote add storybook [email protected]:MetaMask/metamask-storybook.git
+          yarn storybook:deploy
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -46,6 +46,10 @@ jobs:
     name: Test deps depcheck
     uses: ./.github/workflows/test-deps-depcheck.yml
 
+  test-storybook:
+    name: Test storybook
+    uses: ./.github/workflows/test-storybook.yml
+
   validate-lavamoat-allow-scripts:
     name: Validate lavamoat allow scripts
     uses: ./.github/workflows/validate-lavamoat-allow-scripts.yml
@@ -75,18 +79,28 @@ jobs:
       - wait-for-circleci-workflow-status
     uses: ./.github/workflows/runway.yml
 
+  build-storybook:
+    name: Build storybook
+    uses: ./.github/workflows/build-storybook.yml
+    permissions:
+      contents: read
+      # id-token permission is required for uploading to s3
+      id-token: write
+
   build-beta:
     name: Build beta
     uses: ./.github/workflows/build-beta.yml
     permissions:
       contents: read
+      # id-token permission is required for uploading to s3
       id-token: write
 
   publish-prerelease:
     name: Publish prerelease
     if: ${{ github.event_name == 'pull_request' }}
     needs:
       - wait-for-circleci-workflow-status
+      - build-storybook
       - build-beta
     uses: ./.github/workflows/publish-prerelease.yml
     secrets:
@@ -103,11 +117,13 @@ jobs:
       - test-lint-lockfile
       - test-yarn-dedupe
       - test-deps-depcheck
+      - test-storybook
       - validate-lavamoat-allow-scripts
       - validate-lavamoat-policy-build
       - validate-lavamoat-policy-webapp
       - run-tests
       - wait-for-circleci-workflow-status
+      - build-storybook
       - build-beta
     outputs:
       PASSED: ${{ steps.set-output.outputs.PASSED }}

diff --git a/.github/workflows/publish-prerelease.yml b/.github/workflows/publish-prerelease.yml
@@ -62,9 +62,6 @@ jobs:
           mkdir -p test-artifacts/chrome
           curl --silent --location "https://output.circle-artifacts.com/output/job/${CIRCLE_WORKFLOW_JOB_ID}/artifacts/0/test-artifacts/chrome/bundle_size.json" > "test-artifacts/chrome/bundle_size.json"
 
-          mkdir storybook-build
-          curl --silent --location "https://output.circle-artifacts.com/output/job/${CIRCLE_WORKFLOW_JOB_ID}/artifacts/0/storybook/stories.json" > "storybook-build/stories.json"
-
       - name: Publish prerelease
         env:
           PR_COMMENT_TOKEN: ${{ secrets.PR_COMMENT_TOKEN }}

diff --git a/.github/workflows/test-storybook.yml b/.github/workflows/test-storybook.yml
@@ -0,0 +1,21 @@
+name: Test storybook
+
+on:
+  workflow_call:
+
+jobs:
+  test-storybook:
+    name: Test storybook
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup environment
+        uses: metamask/github-tools/.github/actions/setup-environment@main
+
+      - name: Install Playwright browsers
+        run: yarn exec playwright install chromium
+
+      - name: Test Storybook
+        run: yarn test-storybook:ci
diff --git a/development/highlights/README.md b/development/highlights/README.md
diff --git a/development/highlights/index.js b/development/highlights/index.js
diff --git a/development/highlights/storybook.js b/development/highlights/storybook.js