Adds information about Canary env46048-canary-next

This commit adds a badge to the navbar
that indicates if Canary is being used
When canary is not being used, it renders a link
to next.gitlab.com

4 files changed, 32 insertions, 22 deletions

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 1b722c0505a..a2ca4b07a66 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -135,6 +135,12 @@ function deferredInitialisation() {
   });
 
   loadAwardsHandler();
+
+  // Toggle Canary Badge
+  if (Cookies.get('gitlab_canary') && Cookies.get('gitlab_canary') === 'true') {
+    document.querySelector('.js-canary-badge').classList.remove('hidden');
+    document.querySelector('.js-canary-link').classList.add('hidden');
+  }
 }
 
 document.addEventListener('DOMContentLoaded', () => {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 1e025b3a67d..a6179e2a96e 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -447,30 +447,29 @@
   }
 }
 
+.title-container,
 .navbar-nav {
-  li {
-    .badge.badge-pill {
-      position: inherit;
-      font-weight: $gl-font-weight-normal;
-      margin-left: -6px;
-      font-size: 11px;
-      color: $white-light;
-      padding: 0 5px;
-      line-height: 12px;
-      border-radius: 7px;
-      box-shadow: 0 1px 0 rgba($gl-header-color, 0.2);
-
-      &.issues-count {
-        background-color: $green-500;
-      }
+  .badge.badge-pill {
+    position: inherit;
+    font-weight: $gl-font-weight-normal;
+    margin-left: -6px;
+    font-size: 11px;
+    color: $white-light;
+    padding: 0 5px;
+    line-height: 12px;
+    border-radius: 7px;
+    box-shadow: 0 1px 0 rgba($gl-header-color, 0.2);
+
+    &.green-badge {
+      background-color: $green-500;
+    }
 
-      &.merge-requests-count {
-        background-color: $orange-600;
-      }
+    &.merge-requests-count {
+      background-color: $orange-600;
+    }
 
-      &.todos-count {
-        background-color: $blue-500;
-      }
+    &.todos-count {
+      background-color: $blue-500;
     }
   }
 }
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index a9b85889846..319d0307f78 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -17,6 +17,8 @@
             - if logo_text.present?
               %span.logo-text.d-none.d-lg-block.prepend-left-8
                 = logo_text
+          %span.js-canary-badge.badge.badge-pill.green-badge.align-self-center
+            = _('Next')
 
         - if current_user
           = render "layouts/nav/dashboard"
@@ -38,7 +40,7 @@
               = link_to assigned_issues_dashboard_path, title: _('Issues'), class: 'dashboard-shortcuts-issues', aria: { label: _('Issues') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                 = sprite_icon('issues', size: 16)
                 - issues_count = assigned_issuables_count(:issues)
-                %span.badge.badge-pill.issues-count{ class: ('hidden' if issues_count.zero?) }
+                %span.badge.badge-pill.issues-count.green-badge{ class: ('hidden' if issues_count.zero?) }
                   = number_with_delimiter(issues_count)
           - if header_link?(:merge_requests)
             = nav_link(path: 'dashboard#merge_requests', html_options: { class: "user-counter" }) do
diff --git a/app/views/layouts/header/_help_dropdown.html.haml b/app/views/layouts/header/_help_dropdown.html.haml
index cd9128c452b..c53bfd8a85d 100644
--- a/app/views/layouts/header/_help_dropdown.html.haml
+++ b/app/views/layouts/header/_help_dropdown.html.haml
@@ -7,3 +7,6 @@
     = link_to _("Submit feedback"), "https://about.gitlab.com/submit-feedback"
   - if current_user_menu?(:help) || current_user_menu?(:settings) || current_user_menu?(:profile)
     = render 'shared/user_dropdown_contributing_link'
+  - if Gitlab.com?
+    %li.js-canary-link
+      = link_to _("Switch to GitLab Next"), "https://next.gitlab.com/"