GitLab Version - Help Dropdown Version

This change adds a version indicator
and version check badge to the header
help dropdown.

This is only for admin users
and should provide an easy way
to indicate an out of date version.

This uses the newly created and
cached version check api.

Changelog: added

app/assets/javascripts/main.js

@@ -101,6 +101,21 @@ function deferredInitialisation() {
   initFeatureHighlight();
   initCopyCodeButton();
 
+  const helpToggle = document.querySelector('.header-help-dropdown-toggle');
+  if (helpToggle) {
+    helpToggle.addEventListener(
+      'click',
+      () => {
+        import(/* webpackChunkName: 'versionCheck' */ './gitlab_version_check')
+          .then(({ default: initGitlabVersionCheck }) => {
+            initGitlabVersionCheck();
+          })
+          .catch(() => {});
+      },
+      { once: true },
+    );
+  }
+
   const search = document.querySelector('#search');
   if (search) {
     search.addEventListener(

app/assets/stylesheets/framework/header.scss

@@ -150,7 +150,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
       }
 
       li {
-        .badge.badge-pill:not(.merge-request-badge) {
+        .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
           box-shadow: none;
           font-weight: $gl-font-weight-bold;
         }
@@ -417,7 +417,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
 
 .title-container,
 .navbar-nav {
-  .badge.badge-pill:not(.merge-request-badge) {
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
     position: inherit;
     font-weight: $gl-font-weight-normal;
     margin-left: -6px;

app/assets/stylesheets/startup/startup-dark.scss

@@ -815,7 +815,7 @@ input {
   .container-fluid
   .navbar-nav
   li
-  .badge.badge-pill:not(.merge-request-badge) {
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
   box-shadow: none;
   font-weight: 600;
 }
@@ -898,8 +898,10 @@ input {
   line-height: 18px;
   margin: 4px 0 4px 2px;
 }
-.title-container .badge.badge-pill:not(.merge-request-badge),
-.navbar-nav .badge.badge-pill:not(.merge-request-badge) {
+.title-container
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge),
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
   position: inherit;
   font-weight: 400;
   margin-left: -6px;
@@ -910,17 +912,22 @@ input {
   border-radius: 7px;
   box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
 }
-.title-container .badge.badge-pill:not(.merge-request-badge).green-badge,
-.navbar-nav .badge.badge-pill:not(.merge-request-badge).green-badge {
+.title-container
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge,
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge {
   background-color: var(--green-400, #108548);
 }
 .title-container
-  .badge.badge-pill:not(.merge-request-badge).merge-requests-count,
-.navbar-nav .badge.badge-pill:not(.merge-request-badge).merge-requests-count {
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count,
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count {
   background-color: var(--orange-400, #ab6100);
 }
-.title-container .badge.badge-pill:not(.merge-request-badge).todos-count,
-.navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count {
+.title-container
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count,
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count {
   background-color: var(--blue-400, #1f75cb);
 }
 .title-container .canary-badge .badge,

app/assets/stylesheets/startup/startup-general.scss

@@ -796,7 +796,7 @@ input {
   .container-fluid
   .navbar-nav
   li
-  .badge.badge-pill:not(.merge-request-badge) {
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
   box-shadow: none;
   font-weight: 600;
 }
@@ -879,8 +879,10 @@ input {
   line-height: 18px;
   margin: 4px 0 4px 2px;
 }
-.title-container .badge.badge-pill:not(.merge-request-badge),
-.navbar-nav .badge.badge-pill:not(.merge-request-badge) {
+.title-container
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge),
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
   position: inherit;
   font-weight: 400;
   margin-left: -6px;
@@ -891,17 +893,22 @@ input {
   border-radius: 7px;
   box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
 }
-.title-container .badge.badge-pill:not(.merge-request-badge).green-badge,
-.navbar-nav .badge.badge-pill:not(.merge-request-badge).green-badge {
+.title-container
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge,
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge {
   background-color: var(--green-400, #2da160);
 }
 .title-container
-  .badge.badge-pill:not(.merge-request-badge).merge-requests-count,
-.navbar-nav .badge.badge-pill:not(.merge-request-badge).merge-requests-count {
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count,
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count {
   background-color: var(--orange-400, #c17d10);
 }
-.title-container .badge.badge-pill:not(.merge-request-badge).todos-count,
-.navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count {
+.title-container
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count,
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count {
   background-color: var(--blue-400, #428fdc);
 }
 .title-container .canary-badge .badge,

app/views/layouts/header/_gitlab_version.html.haml

+- return unless show_version_check?
+
+.gl-display-flex.gl-flex-direction-column.gl-px-4.gl-py-3
+  %span
+    = s_("VersionCheck|Your GitLab Version")
+    = emoji_icon('rocket')
+  %span
+    %span.gl-font-sm.gl-text-gray-500
+      #{Gitlab.version_info.major}.#{Gitlab.version_info.minor}
+    %span.gl-ml-2
+      .js-gitlab-version-check{ data: { "size": "sm" } }

app/views/layouts/header/_help_dropdown.html.haml

 %ul
   - if current_user_menu?(:help)
+    = render 'layouts/header/gitlab_version'
     = render 'layouts/header/whats_new_dropdown_item'
     %li
       = link_to _("Help"), help_path

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -815,7 +815,7 @@ input {
   .container-fluid
   .navbar-nav
   li
-  .badge.badge-pill:not(.merge-request-badge) {
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
   box-shadow: none;
   font-weight: 600;
 }
@@ -898,8 +898,10 @@ input {
   line-height: 18px;
   margin: 4px 0 4px 2px;
 }
-.title-container .badge.badge-pill:not(.merge-request-badge),
-.navbar-nav .badge.badge-pill:not(.merge-request-badge) {
+.title-container
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge),
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
   position: inherit;
   font-weight: 400;
   margin-left: -6px;
@@ -910,17 +912,22 @@ input {
   border-radius: 7px;
   box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
 }
-.title-container .badge.badge-pill:not(.merge-request-badge).green-badge,
-.navbar-nav .badge.badge-pill:not(.merge-request-badge).green-badge {
+.title-container
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge,
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge {
   background-color: var(--green-400, #108548);
 }
 .title-container
-  .badge.badge-pill:not(.merge-request-badge).merge-requests-count,
-.navbar-nav .badge.badge-pill:not(.merge-request-badge).merge-requests-count {
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count,
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count {
   background-color: var(--orange-400, #ab6100);
 }
-.title-container .badge.badge-pill:not(.merge-request-badge).todos-count,
-.navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count {
+.title-container
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count,
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count {
   background-color: var(--blue-400, #1f75cb);
 }
 .title-container .canary-badge .badge,

ee/app/assets/stylesheets/startup/startup-general.scss

@@ -796,7 +796,7 @@ input {
   .container-fluid
   .navbar-nav
   li
-  .badge.badge-pill:not(.merge-request-badge) {
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
   box-shadow: none;
   font-weight: 600;
 }
@@ -879,8 +879,10 @@ input {
   line-height: 18px;
   margin: 4px 0 4px 2px;
 }
-.title-container .badge.badge-pill:not(.merge-request-badge),
-.navbar-nav .badge.badge-pill:not(.merge-request-badge) {
+.title-container
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge),
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
   position: inherit;
   font-weight: 400;
   margin-left: -6px;
@@ -891,17 +893,22 @@ input {
   border-radius: 7px;
   box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
 }
-.title-container .badge.badge-pill:not(.merge-request-badge).green-badge,
-.navbar-nav .badge.badge-pill:not(.merge-request-badge).green-badge {
+.title-container
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge,
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge {
   background-color: var(--green-400, #2da160);
 }
 .title-container
-  .badge.badge-pill:not(.merge-request-badge).merge-requests-count,
-.navbar-nav .badge.badge-pill:not(.merge-request-badge).merge-requests-count {
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count,
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count {
   background-color: var(--orange-400, #c17d10);
 }
-.title-container .badge.badge-pill:not(.merge-request-badge).todos-count,
-.navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count {
+.title-container
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count,
+.navbar-nav
+  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count {
   background-color: var(--blue-400, #428fdc);
 }
 .title-container .canary-badge .badge,

locale/gitlab.pot

@@ -39143,6 +39143,9 @@ msgstr ""
 msgid "VersionCheck|Update available"
 msgstr ""
 
+msgid "VersionCheck|Your GitLab Version"
+msgstr ""
+
 msgid "View Documentation"
 msgstr ""
 

spec/features/help_dropdown_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe "Help Dropdown", :js do
+  let_it_be(:user) { create(:user) }
+  let_it_be(:admin) { create(:admin) }
+
+  before do
+    stub_application_setting(version_check_enabled: true)
+  end
+
+  context 'when logged in as non-admin' do
+    before do
+      sign_in(user)
+      visit root_path
+    end
+
+    it 'does not render version data' do
+      page.within '.header-help' do
+        find('.header-help-dropdown-toggle').click
+
+        expect(page).not_to have_text('Your GitLab Version')
+        expect(page).not_to have_text("#{Gitlab.version_info.major}.#{Gitlab.version_info.minor}")
+        expect(page).not_to have_selector('.version-check-badge')
+        expect(page).not_to have_text('Up to date')
+      end
+    end
+  end
+
+  context 'when logged in as admin' do
+    before do
+      sign_in(admin)
+      gitlab_enable_admin_mode_sign_in(admin)
+    end
+
+    describe 'does render version data' do
+      where(:response, :ui_text) do
+        [
+          [{ "severity" => "success" }, 'Up to date'],
+          [{ "severity" => "warning" }, 'Update available'],
+          [{ "severity" => "danger" }, 'Update ASAP']
+        ]
+      end
+
+      with_them do
+        before do
+          allow_next_instance_of(VersionCheck) do |instance|
+            allow(instance).to receive(:response).and_return(response)
+          end
+          visit root_path
+        end
+
+        it 'renders correct version badge variant' do
+          page.within '.header-help' do
+            find('.header-help-dropdown-toggle').click
+
+            expect(page).to have_text('Your GitLab Version')
+            expect(page).to have_text("#{Gitlab.version_info.major}.#{Gitlab.version_info.minor}")
+            expect(page).to have_selector('.version-check-badge')
+            expect(page).to have_text(ui_text)
+          end
+        end
+      end
+    end
+  end
+end

spec/views/layouts/header/_gitlab_version.html.haml_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'layouts/header/_gitlab_version' do
+  describe 'when show_version_check? is true' do
+    before do
+      allow(view).to receive(:show_version_check?).and_return(true)
+      render
+    end
+
+    it 'renders the version check badge' do
+      expect(rendered).to have_selector('.js-gitlab-version-check')
+    end
+  end
+end