Skip to content

G
gitlab-ce
Commit 6c15cbf2 authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Merge branch '295266_2-increase-upgrade-clarity-ui' into 'master' 

GitLab Version - Help Dropdown Version Indicator

See merge request gitlab-org/gitlab!74830
parents 4604394a a12657ea
Show whitespace changes
Inline Side-by-side
Showing with 179 additions and 38 deletions
app/assets/javascripts/main.js
View file @ 6c15cbf2
......@@ -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
View file @ 6c15cbf2
......@@ -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
View file @ 6c15cbf2
......@@ -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,
......
app/assets/stylesheets/startup/startup-general.scss
View file @ 6c15cbf2
......@@ -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,
......
app/views/layouts/header/_gitlab_version.html.haml 0 → 100644
View file @ 6c15cbf2
- 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
View file @ 6c15cbf2
%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
View file @ 6c15cbf2
......@@ -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,
......
ee/app/assets/stylesheets/startup/startup-general.scss
View file @ 6c15cbf2
......@@ -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,
......
locale/gitlab.pot
View file @ 6c15cbf2
......@@ -39167,6 +39167,9 @@ msgstr ""
msgid "VersionCheck|Update available"
msgstr ""
msgid "VersionCheck|Your GitLab Version"
msgstr ""
msgid "View Documentation"
msgstr ""
......
spec/features/help_dropdown_spec.rb 0 → 100644
View file @ 6c15cbf2
# 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 0 → 100644
View file @ 6c15cbf2
# 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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7