diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 86ecd7bfba4..6780ae373bd 100644 --- a/.github/workflows/chromatic.yml +++ b/.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' }} \ No newline at end of file + skip: ${{ steps.get-changed-files.outputs.storyFiles == 'false' }} diff --git a/.storybook/main.ts b/.storybook/main.ts index abe71df3abb..5d8d248046f 100644 --- a/.storybook/main.ts +++ b/.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", }, }; }