Merge branch 'feat/jh-scss-overwrite-config' into 'master'

Make the scss file overwriting works in jh folder

See merge request gitlab-org/gitlab!66707

app/assets/stylesheets/_jh/application_jh.scss

+/*
+ This is a noop-file. In JH:
+ jh/app/assets/stylesheets/_jh/application_jh.scss
+ will take precedence over it and import more styles
+ */

app/assets/stylesheets/application.scss

@@ -24,6 +24,9 @@
 // EE-only stylesheets
 @import 'application_ee';
 
+// JH-only stylesheets
+@import 'application_jh';
+
 /* print styles */
 @media print {
   @import 'print';

config/application.rb

@@ -264,7 +264,9 @@ module Gitlab
     # Import path for EE specific SCSS entry point
     # In CE it will import a noop file, in EE a functioning file
     # Order is important, so that the ee file takes precedence:
+    config.assets.paths << "#{config.root}/jh/app/assets/stylesheets/_jh" if Gitlab.jh?
     config.assets.paths << "#{config.root}/ee/app/assets/stylesheets/_ee" if Gitlab.ee?
+    config.assets.paths << "#{config.root}/app/assets/stylesheets/_jh"
     config.assets.paths << "#{config.root}/app/assets/stylesheets/_ee"
 
     config.assets.paths << "#{config.root}/vendor/assets/javascripts/"

storybook/config/webpack.config.js

@@ -5,6 +5,7 @@ const path = require('path');
 const sass = require('node-sass'); // eslint-disable-line import/no-unresolved
 const { buildIncludePaths, resolveGlobUrl } = require('node-sass-magic-importer/dist/toolbox'); // eslint-disable-line import/no-unresolved
 const webpack = require('webpack');
+const IS_JH = require('../../config/helpers/is_jh_env');
 const gitlabWebpackConfig = require('../../config/webpack.config');
 
 const ROOT = path.resolve(__dirname, '../../');
@@ -13,11 +14,20 @@ const TRANSPARENT_1X1_PNG =
 const SASS_INCLUDE_PATHS = [
   'app/assets/stylesheets',
   'app/assets/stylesheets/_ee',
+  'app/assets/stylesheets/_jh',
   'ee/app/assets/stylesheets',
   'ee/app/assets/stylesheets/_ee',
   'node_modules',
 ].map((p) => path.resolve(ROOT, p));
 
+if (IS_JH) {
+  SASS_INCLUDE_PATHS.push(
+    ...['jh/app/assets/stylesheets', 'jh/app/assets/stylesheets/_jh'].map((p) =>
+      path.resolve(ROOT, p),
+    ),
+  );
+}
+
 /**
  * Custom importer for node-sass, used when LibSass encounters the `@import` directive.
  * Doc source: https://github.com/sass/node-sass#importer--v200---experimental