Add startup-css-check in CI

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

@@ -317,3 +317,30 @@ bundle-size-review:
     expire_in: 31d
     paths:
       - bundle-size-review
+
+.startup-css-check-base:
+  extends:
+    - .frontend-test-base
+  script:
+    - *yarn-install
+    - run_timed_command "yarn generate:startup_css"
+    - yarn check:startup_css
+
+startup-css-check:
+  extends:
+    - .startup-css-check-base
+    - .frontend:rules:startup-css-check
+  needs:
+    - job: "compile-test-assets"
+    - job: "rspec frontend_fixture"
+    - job: "rspec-ee frontend_fixture"
+      optional: true
+
+startup-css-check as-if-foss:
+  extends:
+    - .startup-css-check-base
+    - .as-if-foss
+    - .frontend:rules:startup-css-check-as-if-foss
+  needs:
+    - job: "compile-test-assets as-if-foss"
+    - job: "rspec frontend_fixture as-if-foss"

.gitlab/ci/rules.gitlab-ci.yml

@@ -485,6 +485,17 @@
       changes: *frontend-build-patterns
       allow_failure: true
 
+.frontend:rules:startup-css-check:
+  rules:
+    - changes: *code-backstage-qa-patterns
+
+.frontend:rules:startup-css-check-as-if-foss:
+  rules:
+    - <<: *if-not-ee
+      when: never
+    - <<: *if-merge-request
+      changes: *code-backstage-qa-patterns
+
 ################
 # Memory rules #
 ################

.stylelintrc

@@ -3,6 +3,7 @@
    "ignoreFiles": [
      "app/assets/stylesheets/pages/emojis.scss",
      "app/assets/stylesheets/startup/startup-*.scss",
+     "ee/app/assets/stylesheets/startup/startup-*.scss",
      "app/assets/stylesheets/lazy_bundles/select2.scss",
      "app/assets/stylesheets/highlight/themes/*.scss",
      "app/assets/stylesheets/lazy_bundles/cropper.css"

app/assets/stylesheets/pages/login.scss

@@ -106,6 +106,10 @@
         width: 100%;
       }
     }
+
+    .omniauth-btn {
+      width: 100%;
+    }
   }
 
   .new-session-tabs {

app/assets/stylesheets/pages/search.scss

@@ -45,6 +45,7 @@ input[type='checkbox']:hover {
   margin: 0 8px;
 
   form {
+    display: block;
     margin: 0;
     padding: 4px;
     width: $search-input-width;

app/views/layouts/_head.html.haml

@@ -36,7 +36,7 @@
 
   = favicon_link_tag favicon, id: 'favicon', data: { original_href: favicon }, type: 'image/png'
 
-  = render 'layouts/startup_css'
+  = render 'layouts/startup_css', { startup_filename: local_assigns.fetch(:startup_filename, nil) }
   - if user_application_theme == 'gl-dark'
     = stylesheet_link_tag_defer "application_dark"
     = yield :page_specific_styles

app/views/layouts/_startup_css.haml

-- startup_filename = current_path?("sessions#new") ? 'signin' : user_application_theme == 'gl-dark' ? 'dark' : 'general'
+- startup_filename_default = user_application_theme == 'gl-dark' ? 'dark' : 'general'
+- startup_filename = local_assigns.fetch(:startup_filename, nil) || startup_filename_default
 
 %style
   = Rails.application.assets_manifest.find_sources("themes/#{user_application_theme_css_filename}.css").first.to_s.html_safe if user_application_theme_css_filename

app/views/layouts/devise.html.haml

 !!! 5
 %html.devise-layout-html{ class: system_message_class }
-  = render "layouts/head"
+  = render "layouts/head", { startup_filename: 'signin' }
   %body.ui-indigo.login-page.application.navless{ class: "#{client_class_list}", data: { page: body_data_page, qa_selector: 'login_page' } }
     = header_message
     = render "layouts/init_client_detection_flags"

package.json

@@ -3,6 +3,7 @@
   "scripts": {
     "check-dependencies": "scripts/frontend/check_dependencies.sh",
     "block-dependencies": "node scripts/frontend/block_dependencies.js",
+    "check:startup_css": "scripts/frontend/startup_css/startup_css_changed.sh",
     "clean": "rm -rf public/assets tmp/cache/*-loader",
     "dev-server": "NODE_OPTIONS=\"--max-old-space-size=3584\" node scripts/frontend/webpack_dev_server.js",
     "file-coverage": "scripts/frontend/file_test_coverage.js",

scripts/frontend/startup_css/constants.js

@@ -27,7 +27,6 @@ const CSS_TO_REMOVE = [
   /\.commit/,
   /\.md/,
   /\.with-performance-bar/,
-  /\.identicon/,
 ];
 const APPLICATION_CSS_PREFIX = 'application';
 const APPLICATION_DARK_CSS_PREFIX = 'application_dark';
@@ -36,49 +35,55 @@ const UTILITIES_DARK_CSS_PREFIX = 'application_utilities_dark';
 
 // paths -----------------------------------------------------------------------
 const ROOT = path.resolve(__dirname, '../../..');
+const ROOT_RAILS = IS_EE ? path.join(ROOT, 'ee') : ROOT;
 const FIXTURES_FOLDER_NAME = IS_EE ? 'fixtures-ee' : 'fixtures';
 const FIXTURES_ROOT = path.join(ROOT, 'tmp/tests/frontend', FIXTURES_FOLDER_NAME);
 const PATH_SIGNIN_HTML = path.join(FIXTURES_ROOT, 'startup_css/sign-in.html');
 const PATH_ASSETS = path.join(ROOT, 'tmp/startup_css_assets');
-const PATH_STARTUP_SCSS = path.join(ROOT, 'app/assets/stylesheets/startup');
-const OUTPUTS = [
-  {
-    outFile: 'startup-general',
+const PATH_STARTUP_SCSS = path.join(ROOT_RAILS, 'app/assets/stylesheets/startup');
+
+// helpers ---------------------------------------------------------------------
+const createMainOutput = ({ outFile, cssKeys, type }) => ({
+  outFile,
   htmlPaths: [
-      path.join(FIXTURES_ROOT, 'startup_css/project-general.html'),
-      path.join(FIXTURES_ROOT, 'startup_css/project-general-legacy-menu.html'),
-      path.join(FIXTURES_ROOT, 'startup_css/project-general-signed-out.html'),
+    path.join(FIXTURES_ROOT, `startup_css/project-${type}.html`),
+    path.join(FIXTURES_ROOT, `startup_css/project-${type}-legacy-menu.html`),
+    path.join(FIXTURES_ROOT, `startup_css/project-${type}-legacy-sidebar.html`),
+    path.join(FIXTURES_ROOT, `startup_css/project-${type}-signed-out.html`),
   ],
-    cssKeys: [APPLICATION_CSS_PREFIX, UTILITIES_CSS_PREFIX],
-    // We want to include the root dropdown-menu style since it should be hidden by default
+  cssKeys,
   purgeOptions: {
     safelist: {
-        standard: ['dropdown-menu'],
-      },
+      standard: [
+        'page-with-icon-sidebar',
+        'sidebar-collapsed-desktop',
+        // We want to include the root dropdown-menu style since it should be hidden by default
+        'dropdown-menu',
+      ],
+      // We want to include the identicon backgrounds
+      greedy: [/^bg[0-9]$/],
     },
   },
-  {
+});
+
+const OUTPUTS = [
+  createMainOutput({
+    type: 'general',
+    outFile: 'startup-general',
+    cssKeys: [APPLICATION_CSS_PREFIX, UTILITIES_CSS_PREFIX],
+  }),
+  createMainOutput({
+    type: 'dark',
     outFile: 'startup-dark',
-    htmlPaths: [
-      path.join(FIXTURES_ROOT, 'startup_css/project-dark.html'),
-      path.join(FIXTURES_ROOT, 'startup_css/project-dark-legacy-menu.html'),
-      path.join(FIXTURES_ROOT, 'startup_css/project-dark-signed-out.html'),
-    ],
     cssKeys: [APPLICATION_DARK_CSS_PREFIX, UTILITIES_DARK_CSS_PREFIX],
-    // We want to include the root dropdown-menu styles since it should be hidden by default
-    purgeOptions: {
-      safelist: {
-        standard: ['dropdown-menu'],
-      },
-    },
-  },
+  }),
   {
     outFile: 'startup-signin',
     htmlPaths: [PATH_SIGNIN_HTML],
     cssKeys: [APPLICATION_CSS_PREFIX, UTILITIES_CSS_PREFIX],
     purgeOptions: {
       safelist: {
-        standard: ['fieldset'],
+        standard: ['fieldset', 'hidden'],
         deep: [/login-page$/],
       },
     },

scripts/frontend/startup_css/startup_css_changed.sh

+#!/bin/sh
+
+echo "-----------------------------------------------------------"
+echo "If you are run into any issues with Startup CSS generation,"
+echo "please check out the feedback issue:"
+echo ""
+echo "https://gitlab.com/gitlab-org/gitlab/-/issues/331812"
+echo "-----------------------------------------------------------"
+
+startup_glob="*stylesheets/startup*"
+
+echo "Staging changes to '${startup_glob}' so we can check for untracked files..."
+git add ${startup_glob}
+
+if [ -n "$(git diff HEAD --name-only -- ${startup_glob})" ]; then
+  diff=$(git diff HEAD -- ${startup_glob})
+  cat <<EOF
+
+Startup CSS changes detected!
+
+It looks like there have been recent changes which require
+regenerating the Startup CSS files.
+
+Consider one of the following options:
+
+  1. Regenerating locally with "yarn run generate:startup_css".
+  2. Copy and apply the following diff:
+
+----- start diff -----
+$diff
+
+----- end diff -------
+EOF
+
+  exit 1
+fi

scripts/frontend/startup_css/write_startup_scss.js

@@ -9,7 +9,7 @@ const buildFinalContent = (raw) => {
 // https://gitlab.com/gitlab-org/gitlab/-/issues/331812
 @charset "UTF-8";
 ${raw}
-@import 'cloaking';
+@import 'startup/cloaking';
 @include cloak-startup-scss(none);
 `;
 

spec/frontend/fixtures/startup_css.rb

@@ -11,12 +11,13 @@ RSpec.describe 'Startup CSS fixtures', type: :controller do
 
   before(:all) do
     stub_feature_flags(combined_menu: true)
+    stub_feature_flags(sidebar_refactor: true)
     clean_frontend_fixtures('startup_css/')
   end
 
   shared_examples 'startup css project fixtures' do |type|
     let(:user) { create(:user, :admin) }
-    let(:project) { create(:project, :public, :repository, description: 'Code and stuff', avatar: fixture_file_upload('spec/fixtures/dk.png', 'image/png'), creator: user) }
+    let(:project) { create(:project, :public, :repository, description: 'Code and stuff', creator: user) }
 
     before do
       sign_in(user)
@@ -42,6 +43,17 @@ RSpec.describe 'Startup CSS fixtures', type: :controller do
       expect(response).to be_successful
     end
 
+    it "startup_css/project-#{type}-legacy-sidebar.html" do
+      stub_feature_flags(sidebar_refactor: false)
+
+      get :show, params: {
+        namespace_id: project.namespace.to_param,
+        id: project
+      }
+
+      expect(response).to be_successful
+    end
+
     it "startup_css/project-#{type}-signed-out.html" do
       sign_out(user)