Skip to content

Commit 4d93380

Browse files
authored
Storybook: Deploy PR previews (#107322)
* Create workflow to build storybook * rename action, gate to non-forks * fix my branch name * add upload to gcs * fix permissions * login first * try prod env * remove login * clean up GHA * try to upload storybook to better path * better cache node modules * specify parent: false * write summary * fix summary url * comment * add comment * fix commit hash * add issue number to new comment * remove comment stuff * codeowners * change deploy name preview * fix
1 parent 47e5bd2 commit 4d93380

File tree

3 files changed

+95
-0
lines changed

3 files changed

+95
-0
lines changed

.github/CODEOWNERS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -835,6 +835,7 @@ embed.go @grafana/grafana-as-code
835835
/.github/workflows/i18n-crowdin-download.yml @grafana/grafana-frontend-platform
836836
/.github/workflows/i18n-crowdin-create-tasks.yml @grafana/grafana-frontend-platform
837837
/.github/workflows/i18n-verify.yml @grafana/grafana-frontend-platform
838+
/.github/workflows/deploy-storybook-preview.yml @grafana/grafana-frontend-platform
838839
/.github/workflows/scripts/crowdin/create-tasks.ts @grafana/grafana-frontend-platform
839840
/.github/workflows/pr-go-workspace-check.yml @grafana/grafana-app-platform-squad
840841
/.github/workflows/pr-dependabot-update-go-workspace.yml @grafana/grafana-app-platform-squad
Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
name: Deploy Storybook preview
2+
3+
on:
4+
pull_request:
5+
paths:
6+
- 'packages/grafana-ui/**'
7+
8+
concurrency:
9+
group: ${{ github.workflow }}-${{ github.ref }}
10+
cancel-in-progress: true
11+
12+
permissions: {}
13+
14+
jobs:
15+
deploy-storybook-preview:
16+
name: Deploy Storybook preview
17+
runs-on: ubuntu-latest
18+
# Don't run from forks for the moment. If we find this useful we can do the workflow_run dance
19+
# to make it work for forks.
20+
if: github.event.pull_request.head.repo.fork == false
21+
permissions:
22+
contents: read
23+
id-token: write
24+
25+
env:
26+
BUCKET_NAME: grafana-storybook-previews
27+
28+
steps:
29+
- name: Checkout code
30+
uses: actions/checkout@v4
31+
with:
32+
persist-credentials: false
33+
34+
- name: Setup Node.js
35+
uses: actions/setup-node@v4
36+
with:
37+
node-version-file: '.nvmrc'
38+
cache: 'yarn'
39+
40+
- name: Cache node_modules
41+
uses: actions/cache@v4
42+
with:
43+
path: |
44+
node_modules
45+
key: node_modules-${{ hashFiles('yarn.lock') }}
46+
restore-keys: |
47+
node_modules-
48+
49+
- name: Install dependencies
50+
env:
51+
# If the PR isn't from a fork then don't use the slower yarn checks
52+
YARN_ENABLE_HARDENED_MODE: ${{ github.event.pull_request.head.repo.fork == false && '1' || '0' }}
53+
run: yarn install --immutable
54+
55+
- name: Build storybook
56+
run: yarn storybook:build
57+
58+
# Create the GCS folder name for the preview. Creates a consistent name for all deploys for the PR.
59+
# Matches format of `pr_<PR_NUMBER>_<SANITIZED_BRANCH>`.
60+
# Where `SANITIZED_BRANCH` is the branch name with only alphanumeric and hyphens, limited to 30 characters.
61+
- name: Create deploy name
62+
id: create-deploy-name
63+
env:
64+
BRANCH_NAME: ${{ github.event.pull_request.head.ref }}
65+
PR_NUMBER: ${{ github.event.pull_request.number }}
66+
run: |
67+
# Convert branch name to only contain alphanumeric and hyphens
68+
SANITIZED_BRANCH=$(echo "$BRANCH_NAME" | tr -cs "[:alnum:]-" "-" | sed "s/^-//;s/-$//")
69+
70+
# Check if SANITIZED_BRANCH is empty and fail if it is
71+
if [ -z "$SANITIZED_BRANCH" ]; then
72+
echo "Error: Branch name resulted in empty string after sanitization"
73+
exit 1
74+
fi
75+
76+
echo "deploy-name=pr_${PR_NUMBER}_${SANITIZED_BRANCH:0:30}" >> "$GITHUB_OUTPUT"
77+
78+
- name: Upload Storybook
79+
uses: grafana/shared-workflows/actions/push-to-gcs@main
80+
with:
81+
environment: prod
82+
bucket: ${{ env.BUCKET_NAME }}
83+
bucket_path: ${{ steps.create-deploy-name.outputs.deploy-name }}
84+
path: packages/grafana-ui/dist/storybook
85+
service_account: github-gf-storybook-preview@grafanalabs-workload-identity.iam.gserviceaccount.com
86+
parent: false
87+
88+
- name: Write summary
89+
env:
90+
DEPLOY_NAME: ${{ steps.create-deploy-name.outputs.deploy-name }}
91+
run: |
92+
echo "## Storybook preview deployed! 🚀" >> $GITHUB_STEP_SUMMARY
93+
echo "Check it out at https://storage.googleapis.com/${BUCKET_NAME}/${DEPLOY_NAME}/index.html" >> $GITHUB_STEP_SUMMARY

packages/grafana-ui/.storybook/preview.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ if (process.env.NODE_ENV === 'development') {
5252
initialize({
5353
onUnhandledRequest: 'bypass',
5454
serviceWorker: {
55+
// Important! The path must be relative to work when we deploy storybook to subpaths (e.g. /ui/canary)
5556
url: 'mockServiceWorker.js',
5657
},
5758
});

0 commit comments

Comments
 (0)