diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index e221a54d9c6d6e2149615262930dd3dae1efce5b..376134afef0026736d0f6f8c34e3928889fa6a2b 100644
--- a/app/assets/javascripts/main.js
+++ b/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(
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 44b099fc873d0677e9ecac3a0200e858a270af31..68535badd78ed02769f2d5498c4325c0dad1dd6e 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/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;
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index fb96c23517ceab339d316189d8fd39b40f50b695..96dee4a3da17e1a5d2039a3e7703f7a16570586d 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -837,7 +837,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;
}
@@ -920,8 +920,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;
@@ -932,17 +934,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,
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 8d3c0fbb485cb1103e4e8e7419e3ef6968e1cabc..2f79c86cdc6255c45be69b82c7a1cbf56424ce57 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -818,7 +818,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;
}
@@ -901,8 +901,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;
@@ -913,17 +915,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,
diff --git a/app/views/layouts/header/_gitlab_version.html.haml b/app/views/layouts/header/_gitlab_version.html.haml
new file mode 100644
index 0000000000000000000000000000000000000000..125fbaa084c350445df571f240c06a6ae38d5634
--- /dev/null
+++ b/app/views/layouts/header/_gitlab_version.html.haml
@@ -0,0 +1,11 @@
+- 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" } }
diff --git a/app/views/layouts/header/_help_dropdown.html.haml b/app/views/layouts/header/_help_dropdown.html.haml
index e2c7781da54779cc3eae0682a10d311bbab9267a..738bca2f2ccc1d3064f1ad11f2ae6dd2d25e1186 100644
--- a/app/views/layouts/header/_help_dropdown.html.haml
+++ b/app/views/layouts/header/_help_dropdown.html.haml
@@ -1,5 +1,6 @@
%ul
- if current_user_menu?(:help)
+ = render 'layouts/header/gitlab_version'
= render 'layouts/header/whats_new_dropdown_item'
%li
= link_to _("Help"), help_path
diff --git a/ee/app/assets/stylesheets/startup/startup-dark.scss b/ee/app/assets/stylesheets/startup/startup-dark.scss
index fb96c23517ceab339d316189d8fd39b40f50b695..96dee4a3da17e1a5d2039a3e7703f7a16570586d 100644
--- a/ee/app/assets/stylesheets/startup/startup-dark.scss
+++ b/ee/app/assets/stylesheets/startup/startup-dark.scss
@@ -837,7 +837,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;
}
@@ -920,8 +920,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;
@@ -932,17 +934,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,
diff --git a/ee/app/assets/stylesheets/startup/startup-general.scss b/ee/app/assets/stylesheets/startup/startup-general.scss
index 8d3c0fbb485cb1103e4e8e7419e3ef6968e1cabc..2f79c86cdc6255c45be69b82c7a1cbf56424ce57 100644
--- a/ee/app/assets/stylesheets/startup/startup-general.scss
+++ b/ee/app/assets/stylesheets/startup/startup-general.scss
@@ -818,7 +818,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;
}
@@ -901,8 +901,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;
@@ -913,17 +915,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,
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 827ff8642528d87566cd4ed752eb7c9acc322e8f..38e9c348d1c283abea512aab935e3fb4e10733be 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -39167,6 +39167,9 @@ msgstr ""
msgid "VersionCheck|Update available"
msgstr ""
+msgid "VersionCheck|Your GitLab Version"
+msgstr ""
+
msgid "View Documentation"
msgstr ""
diff --git a/spec/features/help_dropdown_spec.rb b/spec/features/help_dropdown_spec.rb
new file mode 100644
index 0000000000000000000000000000000000000000..db98f58240da74e4170f7049198aa3da08773c9d
--- /dev/null
+++ b/spec/features/help_dropdown_spec.rb
@@ -0,0 +1,67 @@
+# 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
diff --git a/spec/views/layouts/header/_gitlab_version.html.haml_spec.rb b/spec/views/layouts/header/_gitlab_version.html.haml_spec.rb
new file mode 100644
index 0000000000000000000000000000000000000000..0e24810f8350212c5d72e10963459acd6927a99a
--- /dev/null
+++ b/spec/views/layouts/header/_gitlab_version.html.haml_spec.rb
@@ -0,0 +1,16 @@
+# 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