Improve Storybook composition from chromatic workflow (#19468)

.github/workflows/chromatic.yml

@@ -88,75 +88,62 @@ jobs:
         if: steps.get-changed-files.outputs.storyFiles == 'true'
         run: npm ci
 
-      - name: Get branch name
-        id: branch-names
-        env: 
-          EVENT_NAME: ${{ github.event_name }}
-          HEAD_REF: ${{ github.event.pull_request.head.ref || github.head_ref }}
-          REF_NAME: ${{ github.ref_name }}
-        run: |
-            # Get branch name based on event type
-            if [[ "$EVENT_NAME" == *"pull_request"* ]]; then
-              BRANCH_NAME="$HEAD_REF"
-            else
-              BRANCH_NAME="$REF_NAME"
-            fi
-            # Replace slashes with hyphens
-            BRANCH_NAME_NORMALIZED="${BRANCH_NAME//\//-}"
-            echo "current_branch=$BRANCH_NAME_NORMALIZED" >> "$GITHUB_OUTPUT"
-        shell: bash
-
-      # Manually build the Storybook to resolve a bug related to TurboSnap
-      - name: Build CL Storybook
-        if: steps.get-changed-files.outputs.storyFiles == 'true'
-        env:
-          STORYBOOK_BRANCH_NAME: ${{ steps.branch-names.outputs.current_branch }}
-        run: npm run build-storybook:ci
-
-      - name: Build Autofill Storybook
-        if: steps.get-changed-files.outputs.storyFiles == 'true'
-        run: npm run build-storybook:autofill:ci
-
       - name: Log in to Azure
+        if: steps.get-changed-files.outputs.storyFiles == 'true'
         uses: bitwarden/gh-actions/azure-login@main
         with:
           subscription_id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
           tenant_id: ${{ secrets.AZURE_TENANT_ID }}
           client_id: ${{ secrets.AZURE_CLIENT_ID }}
-
+  
       - name: Get Azure Key Vault secrets
+        if: steps.get-changed-files.outputs.storyFiles == 'true'
         id: get-kv-secrets
         uses: bitwarden/gh-actions/get-keyvault-secrets@main
         with:
           keyvault: gh-clients
           secrets: "CHROMATIC-PROJECT-TOKEN,CHROMATIC-PROJECT-TOKEN-AUTOFILL"
-
+  
       - name: Log out from Azure
+        if: steps.get-changed-files.outputs.storyFiles == 'true'
         uses: bitwarden/gh-actions/azure-logout@main
 
-      - name: Publish to Chromatic for CL
+      # Manually build the Storybook to resolve a bug related to TurboSnap
+      - name: Build Autofill Storybook
+        if: steps.get-changed-files.outputs.storyFiles == 'true'
+        run: npm run build-storybook:autofill:ci
+
+      - name: Publish to Chromatic for Autofill
+        id: publish-chromatic-autofill
         uses: chromaui/action@ac86f2ff0a458ffbce7b40698abd44c0fa34d4b6 # v13.3.3
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          projectToken: ${{ steps.get-kv-secrets.outputs.CHROMATIC-PROJECT-TOKEN }}
-          storybookBuildDir: ./storybook-static
+          projectToken: ${{ steps.get-kv-secrets.outputs.CHROMATIC-PROJECT-TOKEN-AUTOFILL }}
+          storybookBaseDir: ./apps/browser/src/autofill/content/components
+          storybookBuildDir: ./apps/browser/src/autofill/content/components/storybook-static
           exitOnceUploaded: true
           onlyChanged: true
-          externals: |
-            libs/components/**/*.scss
-            libs/components/**/*.css
-            libs/components/tailwind.config*.js
           # Rather than use an `if` check on the whole publish step, we need to tell Chromatic to skip so that any Chromatic-spawned actions are properly skipped
           skip: ${{ steps.get-changed-files.outputs.storyFiles == 'false' }}
 
-      - name: Publish to Chromatic for Autofill
+      # Manually build the Storybook to resolve a bug related to TurboSnap
+      - name: Build CL Storybook
+        if: steps.get-changed-files.outputs.storyFiles == 'true'
+        env:
+          AUTOFILL_CHROMATIC_URL: ${{ steps.publish-chromatic-autofill.outputs.storybookUrl }}
+        run: npm run build-storybook:ci
+
+      - name: Publish to Chromatic for CL
         uses: chromaui/action@ac86f2ff0a458ffbce7b40698abd44c0fa34d4b6 # v13.3.3
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          projectToken: ${{ steps.get-kv-secrets.outputs.CHROMATIC-PROJECT-TOKEN-AUTOFILL }}
-          storybookBaseDir: ./apps/browser/src/autofill/content/components
-          storybookBuildDir: ./apps/browser/src/autofill/content/components/storybook-static
+          projectToken: ${{ steps.get-kv-secrets.outputs.CHROMATIC-PROJECT-TOKEN }}
+          storybookBuildDir: ./storybook-static
           exitOnceUploaded: true
           onlyChanged: true
+          externals: |
+            libs/components/**/*.scss
+            libs/components/**/*.css
+            libs/components/tailwind.config*.js
           # Rather than use an `if` check on the whole publish step, we need to tell Chromatic to skip so that any Chromatic-spawned actions are properly skipped
-          skip: ${{ steps.get-changed-files.outputs.storyFiles == 'false' }}
+          skip: ${{ steps.get-changed-files.outputs.storyFiles == 'false' }}

.storybook/main.ts

@@ -71,12 +71,17 @@ const config: StorybookConfig = {
   staticDirs: ["../apps/web/src/images"],
   refs: (config, { configType }) => {
     if (configType === "PRODUCTION") {
-      const branchName = process.env.STORYBOOK_BRANCH_NAME;
+      const autofillUrl = process.env.AUTOFILL_CHROMATIC_URL;
 
       return {
         autofill: {
-          title: `Autofill Components (branch: ${branchName})`,
-          url: `https://${branchName}--695ffc4bef53d3a5ae4c8067.chromatic.com`,
+          /**
+           * If we don't have a chromatic URL for the current branch's build, default to `main`
+           * and include it in the sidebar title to notify users that they're not looking at the
+           * current branch's stories
+           */
+          title: `Autofill Components ${autofillUrl ? "" : "(main)"}`,
+          url: autofillUrl ?? "https://main--695ffc4bef53d3a5ae4c8067.chromatic.com",
         },
       };
     }