Add compile-storybook as-if-foss job

- Add .storybook-yarn-cache alias
- Push to storybook node modules cache in ci
- Use frontend rules for storybook job

.gitlab/ci/frontend.gitlab-ci.yml

@@ -2,6 +2,10 @@
   - source scripts/utils.sh
   - run_timed_command "retry yarn install --frozen-lockfile"
 
+.storybook-yarn-install: &storybook-yarn-install
+  - source scripts/utils.sh
+  - run_timed_command "retry yarn run storybook:install --frozen-lockfile"
+
 .compile-assets-base:
   extends:
     - .default-retry
@@ -80,6 +84,15 @@ update-yarn-cache:
   script:
     - *yarn-install
 
+update-storybook-yarn-cache:
+  extends:
+    - .default-retry
+    - .storybook-yarn-cache-push
+    - .shared:rules:update-cache
+  stage: prepare
+  script:
+    - *storybook-yarn-install
+
 .frontend-fixtures-base:
   extends:
     - .default-retry
@@ -345,17 +358,28 @@ startup-css-check as-if-foss:
     - job: "compile-test-assets as-if-foss"
     - job: "rspec frontend_fixture as-if-foss"
 
-compile-storybook:
+.compile-storybook-base:
   extends:
-    - .compile-assets-base
+    - .frontend-test-base
+    - .storybook-yarn-cache
   script:
-    - source scripts/utils.sh
-    - cd storybook/
-    - run_timed_command "retry yarn install --frozen-lockfile"
-    - yarn build
+    - *yarn-install  # storybook depends on the global webpack config, so we must install global deps.
+    - *storybook-yarn-install
+    - yarn run storybook:build
+
+compile-storybook:
+  extends:
+    - .compile-storybook-base
+    - .frontend:rules:default-frontend-jobs
   artifacts:
     name: storybook
     expire_in: 31d
     when: always
     paths:
       - storybook/public
+
+compile-storybook as-if-foss:
+  extends:
+    - .compile-storybook-base
+    - .as-if-foss
+    - .frontend:rules:default-frontend-jobs-as-if-foss

.gitlab/ci/global.gitlab-ci.yml

@@ -88,6 +88,16 @@
   <<: *assets-cache
   policy: push  # We want to rebuild the cache from scratch to ensure stale dependencies are cleaned up.
 
+.storybook-node-modules-cache: &storybook-node-modules-cache
+  key: "storybook-node-modules-${NODE_ENV}-v1"
+  paths:
+    - storybook/node_modules/
+  policy: pull
+
+.storybook-node-modules-cache-push: &storybook-node-modules-cache-push
+  <<: *storybook-node-modules-cache
+  policy: push  # We want to rebuild the cache from scratch to ensure stale dependencies are cleaned up.
+
 .rubocop-cache: &rubocop-cache
   key: "rubocop-v1"
   paths:
@@ -181,6 +191,14 @@
     - *node-modules-cache-push
     - *assets-cache-push
 
+.storybook-yarn-cache:
+  cache:
+    - *storybook-node-modules-cache
+
+.storybook-yarn-cache-push:
+  cache:
+    - *storybook-node-modules-cache-push
+
 .use-pg11:
   image: "registry.gitlab.com/gitlab-org/gitlab-build-images:ruby-2.7.2.patched-golang-1.16-git-2.31-lfs-2.9-chrome-89-node-14.15-yarn-1.22-postgresql-11-graphicsmagick-1.3.36"
   services:

.gitlab/ci/pages.gitlab-ci.yml

@@ -9,6 +9,7 @@ pages:
     - karma
     - compile-production-assets
     - compile-storybook
+    - compile-storybook as-if-foss
   script:
     - mv public/ .public/
     - mkdir public/

doc/development/pipelines.md

@@ -560,7 +560,7 @@ request, be sure to start the `dont-interrupt-me` job before pushing.
    - `.yarn-cache`
    - `.assets-compile-cache` (the key includes `${NODE_ENV}` so it's actually two different caches).
 1. These cache definitions are composed of [multiple atomic caches](../ci/caching/index.md#use-multiple-caches).
-1. Only 6 specific jobs, running in 2-hourly scheduled pipelines, are pushing (i.e. updating) to the caches:
+1. Only the following jobs, running in 2-hourly scheduled pipelines, are pushing (i.e. updating) to the caches:
    - `update-setup-test-env-cache`, defined in [`.gitlab/ci/rails.gitlab-ci.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/ci/rails.gitlab-ci.yml).
    - `update-gitaly-binaries-cache`, defined in [`.gitlab/ci/rails.gitlab-ci.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/ci/rails.gitlab-ci.yml).
    - `update-static-analysis-cache`, defined in [`.gitlab/ci/rails.gitlab-ci.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/ci/rails.gitlab-ci.yml).
@@ -568,6 +568,7 @@ request, be sure to start the `dont-interrupt-me` job before pushing.
    - `update-assets-compile-production-cache`, defined in [`.gitlab/ci/frontend.gitlab-ci.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/ci/frontend.gitlab-ci.yml).
    - `update-assets-compile-test-cache`, defined in [`.gitlab/ci/frontend.gitlab-ci.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/ci/frontend.gitlab-ci.yml).
    - `update-yarn-cache`, defined in [`.gitlab/ci/frontend.gitlab-ci.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/ci/frontend.gitlab-ci.yml).
+   - `update-storybook-yarn-cache`, defined in [`.gitlab/ci/frontend.gitlab-ci.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/ci/frontend.gitlab-ci.yml).
 1. These jobs can also be forced to run in merge requests whose title include `UPDATE CACHE` (this can be useful to warm the caches in a MR that updates the cache keys).
 
 ### Artifacts strategy

package.json

@@ -41,6 +41,7 @@
     "markdownlint:no-trailing-spaces:fix": "yarn run markdownlint:no-trailing-spaces --fix",
     "postinstall": "node ./scripts/frontend/postinstall.js",
     "storybook:install": "yarn --cwd ./storybook install",
+    "storybook:build": "yarn --cwd ./storybook build",
     "storybook:start": "yarn --cwd ./storybook start",
     "stylelint-create-utility-map": "node scripts/frontend/stylelint/stylelint-utility-map.js",
     "webpack": "NODE_OPTIONS=\"--max-old-space-size=3584\" webpack --config config/webpack.config.js",

storybook/config/webpack.config.js

@@ -12,6 +12,7 @@ const TRANSPARENT_1X1_PNG =
   'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==)';
 const SASS_INCLUDE_PATHS = [
   'app/assets/stylesheets',
+  'app/assets/stylesheets/_ee',
   'ee/app/assets/stylesheets',
   'ee/app/assets/stylesheets/_ee',
   'node_modules',