Skip to content

Generate startup css as if com_and_canary

Lee Tickett requested to merge fix-vnext-startup-style into master

What does this MR do and why?

This MR fixes the vNext badge from "glitching" when you load every page on canary.

We achieve this by generating the fixtures which are used to generate startup css with canary and .com mocked to true.

Screenshots or screen recordings

before after
image image

How to set up and validate locally

  1. Block application.css from loading in your browser (dev tools/network tab)
  2. Apply the following patch to your local GDK to "pretend" to be in canary and on .com:
lee@cc-gdk-2:~/gitlab-development-kit/gitlab$ git diff
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 8d28823bfa4..78ff8721f25 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -14,7 +14,7 @@
             - if logo_text.present?
               %span.logo-text.d-none.d-lg-block.gl-ml-3
                 = logo_text
-          - if Gitlab.com_and_canary?
+          - if Gitlab.com_and_canary? || true
             = link_to 'https://next.gitlab.com', class: 'canary-badge bg-transparent', data: { qa_selector: 'canary_badge_link' }, target: :_blank, rel: :_noopener do
               %span.gl-badge.gl-bg-green-500.gl-text-white.gl-rounded-pill.gl-font-weight-bold.gl-py-1
                 = _('Next')
  1. Reload the page

If you do this with master checked out, you should see the "before" screenshot from above (the oversized vNext badge)

If you do this with this branch checked out, you should see the "after" screenshot with the correct vNext badge

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Lee Tickett

Merge request reports