Commit 8a10b81b authored by Olena Horal-Koretska's avatar Olena Horal-Koretska

Merge branch '344388-pajamas-badges-layout-header-default' into 'master'

Make badges in the header Pajamas compliant

See merge request gitlab-org/gitlab!79610
parents eb7f6238 8b1bbc74
......@@ -415,49 +415,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
}
}
.title-container,
.navbar-nav {
.badge.badge-pill:not(.gl-badge) {
position: inherit;
font-weight: $gl-font-weight-normal;
margin-left: -6px;
font-size: 11px;
color: var(--gray-950, $white);
padding: 0 5px;
line-height: 12px;
border-radius: 7px;
box-shadow: 0 1px 0 rgba($gl-header-color, 0.2);
&.green-badge {
background-color: var(--green-400, $green-400);
}
&.merge-requests-count {
background-color: var(--orange-400, $orange-400);
}
&.todos-count {
background-color: var(--blue-400, $blue-400);
}
}
.canary-badge {
.badge {
font-size: $gl-font-size-small;
line-height: $gl-line-height;
padding: 0 $grid-size;
}
&:hover {
text-decoration: none;
.badge {
text-decoration: none;
}
}
}
}
@include media-breakpoint-down(xs) {
.navbar-gitlab .container-fluid {
font-size: 18px;
......
......@@ -42,12 +42,6 @@ $status-box-line-height: 26px;
}
.milestone-content {
.issues-count {
margin-right: 17px;
float: right;
width: 105px;
}
.issuable-row {
span {
a {
......
......@@ -7,12 +7,8 @@ body.gl-dark {
--gray-100: #404040;
--gray-600: #bfbfbf;
--gray-900: #fafafa;
--gray-950: #fff;
--green-100: #0d532a;
--green-400: #108548;
--green-700: #91d4a8;
--blue-400: #1f75cb;
--orange-400: #ab6100;
--indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
--gl-text-color: #fafafa;
--border-color: #4f4f4f;
......@@ -314,10 +310,18 @@ h1 {
padding-left: 0.6em;
border-radius: 10rem;
}
.badge-success {
color: #fff;
background-color: #2da160;
}
.badge-info {
color: #fff;
background-color: #428fdc;
}
.badge-warning {
color: #fff;
background-color: #c17d10;
}
.bg-transparent {
background-color: transparent !important;
}
......@@ -394,6 +398,34 @@ a.gl-badge.badge-info:active {
0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
outline: none;
}
.gl-badge.badge-success {
background-color: #0d532a;
color: #91d4a8;
}
a.gl-badge.badge-success.active,
a.gl-badge.badge-success:active {
color: #ecf4ee;
background-color: #24663b;
}
a.gl-badge.badge-success:active {
box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8),
0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
outline: none;
}
.gl-badge.badge-warning {
background-color: #703800;
color: #e9be74;
}
a.gl-badge.badge-warning.active,
a.gl-badge.badge-warning:active {
color: #fdf1dd;
background-color: #8f4700;
}
a.gl-badge.badge-warning:active {
box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8),
0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
outline: none;
}
.gl-button .gl-badge {
top: 0;
}
......@@ -920,36 +952,6 @@ input {
line-height: 18px;
margin: 4px 0 4px 2px;
}
.title-container .badge.badge-pill:not(.gl-badge),
.navbar-nav .badge.badge-pill:not(.gl-badge) {
position: inherit;
font-weight: 400;
margin-left: -6px;
font-size: 11px;
color: var(--gray-950, #333);
padding: 0 5px;
line-height: 12px;
border-radius: 7px;
box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
}
.title-container .badge.badge-pill:not(.gl-badge).green-badge,
.navbar-nav .badge.badge-pill:not(.gl-badge).green-badge {
background-color: var(--green-400, #108548);
}
.title-container .badge.badge-pill:not(.gl-badge).merge-requests-count,
.navbar-nav .badge.badge-pill:not(.gl-badge).merge-requests-count {
background-color: var(--orange-400, #ab6100);
}
.title-container .badge.badge-pill:not(.gl-badge).todos-count,
.navbar-nav .badge.badge-pill:not(.gl-badge).todos-count {
background-color: var(--blue-400, #1f75cb);
}
.title-container .canary-badge .badge,
.navbar-nav .canary-badge .badge {
font-size: 12px;
line-height: 16px;
padding: 0 0.5rem;
}
@media (max-width: 575.98px) {
.navbar-gitlab .container-fluid {
font-size: 18px;
......@@ -2022,18 +2024,9 @@ body.gl-dark {
white-space: nowrap;
width: 1px;
}
.gl-bg-green-500 {
background-color: #2da160;
}
.gl-border-none\! {
border-style: none !important;
}
.gl-rounded-pill {
border-radius: 0.75rem;
}
.gl-text-white {
color: #333;
}
.gl-display-none {
display: none;
}
......@@ -2055,9 +2048,8 @@ body.gl-dark {
.gl-pr-2 {
padding-right: 0.25rem;
}
.gl-py-1 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
.gl-ml-n2 {
margin-left: -0.25rem;
}
.gl-ml-3 {
margin-left: 0.5rem;
......
......@@ -295,10 +295,18 @@ h1 {
padding-left: 0.6em;
border-radius: 10rem;
}
.badge-success {
color: #fff;
background-color: #108548;
}
.badge-info {
color: #fff;
background-color: #1f75cb;
}
.badge-warning {
color: #fff;
background-color: #ab6100;
}
.bg-transparent {
background-color: transparent !important;
}
......@@ -375,6 +383,34 @@ a.gl-badge.badge-info:active {
0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
outline: none;
}
.gl-badge.badge-success {
background-color: #c3e6cd;
color: #24663b;
}
a.gl-badge.badge-success.active,
a.gl-badge.badge-success:active {
color: #0a4020;
background-color: #91d4a8;
}
a.gl-badge.badge-success:active {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8),
0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
outline: none;
}
.gl-badge.badge-warning {
background-color: #f5d9a8;
color: #8f4700;
}
a.gl-badge.badge-warning.active,
a.gl-badge.badge-warning:active {
color: #5c2900;
background-color: #e9be74;
}
a.gl-badge.badge-warning:active {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8),
0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
outline: none;
}
.gl-button .gl-badge {
top: 0;
}
......@@ -901,36 +937,6 @@ input {
line-height: 18px;
margin: 4px 0 4px 2px;
}
.title-container .badge.badge-pill:not(.gl-badge),
.navbar-nav .badge.badge-pill:not(.gl-badge) {
position: inherit;
font-weight: 400;
margin-left: -6px;
font-size: 11px;
color: var(--gray-950, #fff);
padding: 0 5px;
line-height: 12px;
border-radius: 7px;
box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
}
.title-container .badge.badge-pill:not(.gl-badge).green-badge,
.navbar-nav .badge.badge-pill:not(.gl-badge).green-badge {
background-color: var(--green-400, #2da160);
}
.title-container .badge.badge-pill:not(.gl-badge).merge-requests-count,
.navbar-nav .badge.badge-pill:not(.gl-badge).merge-requests-count {
background-color: var(--orange-400, #c17d10);
}
.title-container .badge.badge-pill:not(.gl-badge).todos-count,
.navbar-nav .badge.badge-pill:not(.gl-badge).todos-count {
background-color: var(--blue-400, #428fdc);
}
.title-container .canary-badge .badge,
.navbar-nav .canary-badge .badge {
font-size: 12px;
line-height: 16px;
padding: 0 0.5rem;
}
@media (max-width: 575.98px) {
.navbar-gitlab .container-fluid {
font-size: 18px;
......@@ -1691,18 +1697,9 @@ svg.s16 {
white-space: nowrap;
width: 1px;
}
.gl-bg-green-500 {
background-color: #108548;
}
.gl-border-none\! {
border-style: none !important;
}
.gl-rounded-pill {
border-radius: 0.75rem;
}
.gl-text-white {
color: #fff;
}
.gl-display-none {
display: none;
}
......@@ -1724,9 +1721,8 @@ svg.s16 {
.gl-pr-2 {
padding-right: 0.25rem;
}
.gl-py-1 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
.gl-ml-n2 {
margin-left: -0.25rem;
}
.gl-ml-3 {
margin-left: 0.5rem;
......
......@@ -16,7 +16,7 @@
= logo_text
- if Gitlab.com_and_canary?
= link_to Gitlab::Saas.canary_toggle_com_url, class: 'canary-badge bg-transparent', data: { qa_selector: 'canary_badge_link' }, target: :_blank, rel: 'noopener noreferrer' do
%span.gl-badge.gl-bg-green-500.gl-text-white.gl-rounded-pill.gl-font-weight-bold.gl-py-1
= gl_badge_tag({ variant: :success }) do
= _('Next')
- if current_user
......@@ -64,7 +64,7 @@
container: 'body' } do
= sprite_icon('issues')
- issues_count = assigned_issuables_count(:issues)
%span.badge.badge-pill.issues-count.green-badge{ class: ('hidden' if issues_count == 0) }
= gl_badge_tag({ size: :sm, variant: :success }, { class: "gl-ml-n2 #{(' gl-display-none' if issues_count == 0)}", "aria-label": n_("%d assigned issue", "%d assigned issues", issues_count) % issues_count }) do
= number_with_delimiter(issues_count)
- if header_link?(:merge_requests)
= nav_link(path: 'dashboard#merge_requests', html_options: { class: "user-counter dropdown" }) do
......@@ -77,7 +77,7 @@
track_property: 'navigation',
container: 'body' } do
= sprite_icon('git-merge')
%span.badge.badge-pill.merge-requests-count.js-merge-requests-count{ class: ('hidden' if user_merge_requests_counts[:total] == 0) }
= gl_badge_tag({ size: :sm, variant: :warning }, { class: "js-merge-requests-count gl-ml-n2#{(' gl-display-none' if user_merge_requests_counts[:total] == 0)}", "aria-label": n_("%d merge request", "%d merge requests", user_merge_requests_counts[:total]) % user_merge_requests_counts[:total] }) do
= number_with_delimiter(user_merge_requests_counts[:total])
= sprite_icon('chevron-down', css_class: 'caret-down gl-mx-0!')
.dropdown-menu.dropdown-menu-right
......@@ -87,12 +87,12 @@
%li
= link_to assigned_mrs_dashboard_path, class: 'gl-display-flex! gl-align-items-center js-prefetch-document' do
= _('Assigned to you')
%span.badge.gl-badge.badge-pill.badge-muted.merge-request-badge.gl-ml-auto.js-assigned-mr-count{ class: "" }
= gl_badge_tag({ variant: :neutral, size: :sm }, { class: "js-assigned-mr-count gl-ml-auto" }) do
= user_merge_requests_counts[:assigned]
%li
= link_to reviewer_mrs_dashboard_path, class: 'gl-display-flex! gl-align-items-center js-prefetch-document' do
= _('Review requests for you')
%span.badge.gl-badge.badge-pill.badge-muted.merge-request-badge.gl-ml-auto.js-reviewer-mr-count{ class: "" }
= gl_badge_tag({ variant: :neutral, size: :sm }, { class: "js-reviewer-mr-count gl-ml-auto" }) do
= user_merge_requests_counts[:review_requested]
- if header_link?(:todos)
= nav_link(controller: 'dashboard/todos', html_options: { class: "user-counter" }) do
......@@ -103,7 +103,9 @@
track_property: 'navigation',
container: 'body' } do
= sprite_icon('todo-done')
%span.badge.badge-pill.todos-count.js-todos-count{ class: ('hidden' if todos_pending_count == 0) }
-# The todos' counter badge's visibility is being toggled by adding or removing the .hidden class in Js.
-# We'll eventually migrate to .gl-display-none: https://gitlab.com/gitlab-org/gitlab/-/issues/351792.
= gl_badge_tag({ size: :sm, variant: :info }, { class: "js-todos-count gl-ml-n2#{(' hidden' if todos_pending_count == 0)}", "aria-label": _("Todos count") }) do
= todos_count_format(todos_pending_count)
%li.nav-item.header-help.dropdown.d-none.d-md-block{ **tracking_attrs('main_navigation', 'click_question_mark_link', 'navigation') }
= link_to help_path, class: 'header-help-dropdown-toggle gl-relative', data: { toggle: "dropdown" } do
......
......@@ -7,12 +7,8 @@ body.gl-dark {
--gray-100: #404040;
--gray-600: #bfbfbf;
--gray-900: #fafafa;
--gray-950: #fff;
--green-100: #0d532a;
--green-400: #108548;
--green-700: #91d4a8;
--blue-400: #1f75cb;
--orange-400: #ab6100;
--indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
--gl-text-color: #fafafa;
--border-color: #4f4f4f;
......@@ -314,10 +310,18 @@ h1 {
padding-left: 0.6em;
border-radius: 10rem;
}
.badge-success {
color: #fff;
background-color: #2da160;
}
.badge-info {
color: #fff;
background-color: #428fdc;
}
.badge-warning {
color: #fff;
background-color: #c17d10;
}
.bg-transparent {
background-color: transparent !important;
}
......@@ -394,6 +398,34 @@ a.gl-badge.badge-info:active {
0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
outline: none;
}
.gl-badge.badge-success {
background-color: #0d532a;
color: #91d4a8;
}
a.gl-badge.badge-success.active,
a.gl-badge.badge-success:active {
color: #ecf4ee;
background-color: #24663b;
}
a.gl-badge.badge-success:active {
box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8),
0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
outline: none;
}
.gl-badge.badge-warning {
background-color: #703800;
color: #e9be74;
}
a.gl-badge.badge-warning.active,
a.gl-badge.badge-warning:active {
color: #fdf1dd;
background-color: #8f4700;
}
a.gl-badge.badge-warning:active {
box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8),
0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
outline: none;
}
.gl-button .gl-badge {
top: 0;
}
......@@ -920,36 +952,6 @@ input {
line-height: 18px;
margin: 4px 0 4px 2px;
}
.title-container .badge.badge-pill:not(.gl-badge),
.navbar-nav .badge.badge-pill:not(.gl-badge) {
position: inherit;
font-weight: 400;
margin-left: -6px;
font-size: 11px;
color: var(--gray-950, #333);
padding: 0 5px;
line-height: 12px;
border-radius: 7px;
box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
}
.title-container .badge.badge-pill:not(.gl-badge).green-badge,
.navbar-nav .badge.badge-pill:not(.gl-badge).green-badge {
background-color: var(--green-400, #108548);
}
.title-container .badge.badge-pill:not(.gl-badge).merge-requests-count,
.navbar-nav .badge.badge-pill:not(.gl-badge).merge-requests-count {
background-color: var(--orange-400, #ab6100);
}
.title-container .badge.badge-pill:not(.gl-badge).todos-count,
.navbar-nav .badge.badge-pill:not(.gl-badge).todos-count {
background-color: var(--blue-400, #1f75cb);
}
.title-container .canary-badge .badge,
.navbar-nav .canary-badge .badge {
font-size: 12px;
line-height: 16px;
padding: 0 0.5rem;
}
@media (max-width: 575.98px) {
.navbar-gitlab .container-fluid {
font-size: 18px;
......@@ -2022,18 +2024,9 @@ body.gl-dark {
white-space: nowrap;
width: 1px;
}
.gl-bg-green-500 {
background-color: #2da160;
}
.gl-border-none\! {
border-style: none !important;
}
.gl-rounded-pill {
border-radius: 0.75rem;
}
.gl-text-white {
color: #333;
}
.gl-display-none {
display: none;
}
......@@ -2055,9 +2048,8 @@ body.gl-dark {
.gl-pr-2 {
padding-right: 0.25rem;
}
.gl-py-1 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
.gl-ml-n2 {
margin-left: -0.25rem;
}
.gl-ml-3 {
margin-left: 0.5rem;
......
......@@ -295,10 +295,18 @@ h1 {
padding-left: 0.6em;
border-radius: 10rem;
}
.badge-success {
color: #fff;
background-color: #108548;
}
.badge-info {
color: #fff;
background-color: #1f75cb;
}
.badge-warning {
color: #fff;
background-color: #ab6100;
}
.bg-transparent {
background-color: transparent !important;
}
......@@ -375,6 +383,34 @@ a.gl-badge.badge-info:active {
0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
outline: none;
}
.gl-badge.badge-success {
background-color: #c3e6cd;
color: #24663b;
}
a.gl-badge.badge-success.active,
a.gl-badge.badge-success:active {
color: #0a4020;
background-color: #91d4a8;
}
a.gl-badge.badge-success:active {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8),
0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
outline: none;
}
.gl-badge.badge-warning {
background-color: #f5d9a8;
color: #8f4700;
}
a.gl-badge.badge-warning.active,
a.gl-badge.badge-warning:active {
color: #5c2900;
background-color: #e9be74;
}
a.gl-badge.badge-warning:active {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8),
0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
outline: none;
}
.gl-button .gl-badge {
top: 0;
}
......@@ -901,36 +937,6 @@ input {
line-height: 18px;
margin: 4px 0 4px 2px;
}
.title-container .badge.badge-pill:not(.gl-badge),
.navbar-nav .badge.badge-pill:not(.gl-badge) {
position: inherit;
font-weight: 400;
margin-left: -6px;
font-size: 11px;
color: var(--gray-950, #fff);
padding: 0 5px;
line-height: 12px;
border-radius: 7px;
box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
}
.title-container .badge.badge-pill:not(.gl-badge).green-badge,
.navbar-nav .badge.badge-pill:not(.gl-badge).green-badge {
background-color: var(--green-400, #2da160);
}
.title-container .badge.badge-pill:not(.gl-badge).merge-requests-count,
.navbar-nav .badge.badge-pill:not(.gl-badge).merge-requests-count {
background-color: var(--orange-400, #c17d10);
}
.title-container .badge.badge-pill:not(.gl-badge).todos-count,
.navbar-nav .badge.badge-pill:not(.gl-badge).todos-count {
background-color: var(--blue-400, #428fdc);
}
.title-container .canary-badge .badge,
.navbar-nav .canary-badge .badge {
font-size: 12px;
line-height: 16px;
padding: 0 0.5rem;
}
@media (max-width: 575.98px) {
.navbar-gitlab .container-fluid {
font-size: 18px;
......@@ -1691,18 +1697,9 @@ svg.s16 {
white-space: nowrap;
width: 1px;
}
.gl-bg-green-500 {
background-color: #108548;
}
.gl-border-none\! {
border-style: none !important;
}
.gl-rounded-pill {
border-radius: 0.75rem;
}
.gl-text-white {
color: #fff;
}
.gl-display-none {
display: none;
}
......@@ -1724,9 +1721,8 @@ svg.s16 {
.gl-pr-2 {
padding-right: 0.25rem;
}
.gl-py-1 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
.gl-ml-n2 {
margin-left: -0.25rem;
}
.gl-ml-3 {
margin-left: 0.5rem;
......
......@@ -21,7 +21,7 @@ RSpec.describe 'Manually create a todo item from epic', :js do
expect(page).to have_content 'Mark as done'
end
page.within '.header-content .todos-count' do
page.within ".header-content span[aria-label='#{_('Todos count')}']" do
expect(page).to have_content '1'
end
end
......@@ -31,8 +31,8 @@ RSpec.describe 'Manually create a todo item from epic', :js do
click_button 'Add a to do'
end
expect(page).to have_selector('.todos-count', visible: true)
page.within '.header-content .todos-count' do
expect(page).to have_selector(".header-content span[aria-label='#{_('Todos count')}']", visible: true)
page.within ".header-content span[aria-label='#{_('Todos count')}']" do
expect(page).to have_content '1'
end
......@@ -40,6 +40,6 @@ RSpec.describe 'Manually create a todo item from epic', :js do
click_button 'Mark as done'
end
expect(page).to have_selector('.todos-count', visible: false)
expect(page).to have_selector(".header-content span[aria-label='#{_('Todos count')}']", visible: false)
end
end
......@@ -99,7 +99,7 @@ RSpec.describe 'Update Epic', :js do
visit dashboard_todos_path
page.within '.header-content .todos-count' do
page.within ".header-content span[aria-label='#{_('Todos count')}']" do
expect(page).to have_content '1'
end
expect(page).to have_selector('.todos-list .todo', count: 1)
......
......@@ -13,6 +13,7 @@ RSpec.shared_examples 'iteration report group by label' do
end
it 'groups by label', :aggregate_failures do
page.within('#content-body') do
expect(page).to have_button('Collapse issues')
expect(page).to have_css('.gl-label', text: label1.title)
expect(page).to have_css('.gl-badge', text: 2)
......@@ -22,8 +23,10 @@ RSpec.shared_examples 'iteration report group by label' do
expect(page).to have_no_content(closed_issue.title)
expect(page).to have_no_content(other_iteration_issue.title)
end
end
it 'shows ungrouped issues when `Group by: None` is selected again', :aggregate_failures do
page.within('#content-body') do
select 'None', from: 'Group by'
expect(page).to have_no_button('Collapse issues')
......@@ -35,12 +38,14 @@ RSpec.shared_examples 'iteration report group by label' do
expect(page).to have_content(closed_issue.title)
expect(page).to have_no_content(other_iteration_issue.title)
end
end
it 'shows ungrouped issues when label `x` is clicked to remove it', :aggregate_failures do
within 'section' do
click_button 'Remove label'
end
page.within('#content-body') do
expect(page).to have_no_button('Collapse issues')
expect(page).to have_no_css('.gl-label', text: label1.title)
expect(page).to have_no_css('.gl-badge', text: 2)
......@@ -50,4 +55,5 @@ RSpec.shared_examples 'iteration report group by label' do
expect(page).to have_content(closed_issue.title)
expect(page).to have_no_content(other_iteration_issue.title)
end
end
end
......@@ -146,6 +146,11 @@ msgid_plural "%d approvers (you've approved)"
msgstr[0] ""
msgstr[1] ""
msgid "%d assigned issue"
msgid_plural "%d assigned issues"
msgstr[0] ""
msgstr[1] ""
msgid "%d changed file"
msgid_plural "%d changed files"
msgstr[0] ""
......@@ -37796,6 +37801,9 @@ msgstr ""
msgid "Today"
msgstr ""
msgid "Todos count"
msgstr ""
msgid "Todos|Are you looking for things to do? Take a look at %{strongStart}%{openIssuesLinkStart}open issues%{openIssuesLinkEnd}%{strongEnd}, contribute to %{strongStart}%{mergeRequestLinkStart}a merge request%{mergeRequestLinkEnd}%{mergeRequestLinkEnd}%{strongEnd}, or mention someone in a comment to automatically assign them a new to-do item."
msgstr ""
......
......@@ -17,7 +17,7 @@ RSpec.describe 'Navigation bar counter', :use_clean_rails_memory_store_caching d
it 'reflects dashboard issues count' do
visit issues_path
expect_counters('issues', '1')
expect_counters('issues', '1', n_("%d assigned issue", "%d assigned issues", 1) % 1)
issue.assignees = []
......@@ -26,14 +26,14 @@ RSpec.describe 'Navigation bar counter', :use_clean_rails_memory_store_caching d
travel_to(3.minutes.from_now) do
visit issues_path
expect_counters('issues', '0')
expect_counters('issues', '0', n_("%d assigned issue", "%d assigned issues", 0) % 0)
end
end
it 'reflects dashboard merge requests count' do
visit merge_requests_path
expect_counters('merge_requests', '1')
expect_counters('merge_requests', '1', n_("%d merge request", "%d merge requests", 1) % 1)
merge_request.update!(assignees: [])
......@@ -42,7 +42,7 @@ RSpec.describe 'Navigation bar counter', :use_clean_rails_memory_store_caching d
travel_to(3.minutes.from_now) do
visit merge_requests_path
expect_counters('merge_requests', '0')
expect_counters('merge_requests', '0', n_("%d merge request", "%d merge requests", 0) % 0)
end
end
......@@ -54,13 +54,14 @@ RSpec.describe 'Navigation bar counter', :use_clean_rails_memory_store_caching d
merge_requests_dashboard_path(assignee_username: user.username)
end
def expect_counters(issuable_type, count)
def expect_counters(issuable_type, count, badge_label)
dashboard_count = find('.gl-tabs-nav li a.active')
nav_count = find(".dashboard-shortcuts-#{issuable_type}")
header_count = find(".header-content .#{issuable_type.tr('_', '-')}-count")
expect(dashboard_count).to have_content(count)
expect(nav_count).to have_content(count)
expect(header_count).to have_content(count)
within("span[aria-label='#{badge_label}']") do
expect(page).to have_content(count)
end
end
end
......@@ -112,7 +112,9 @@ RSpec.describe 'Dashboard Merge Requests' do
end
it 'includes assigned and reviewers in badge' do
expect(find('.merge-requests-count')).to have_content('3')
within("span[aria-label='#{n_("%d merge request", "%d merge requests", 3) % 3}']") do
expect(page).to have_content('3')
end
expect(find('.js-assigned-mr-count')).to have_content('2')
expect(find('.js-reviewer-mr-count')).to have_content('1')
end
......
......@@ -19,13 +19,13 @@ RSpec.describe 'Manually create a todo item from issue', :js do
expect(page).to have_content 'Mark as done'
end
page.within '.header-content .todos-count' do
page.within ".header-content span[aria-label='#{_('Todos count')}']" do
expect(page).to have_content '1'
end
visit project_issue_path(project, issue)
page.within '.header-content .todos-count' do
page.within ".header-content span[aria-label='#{_('Todos count')}']" do
expect(page).to have_content '1'
end
end
......@@ -36,10 +36,10 @@ RSpec.describe 'Manually create a todo item from issue', :js do
click_button 'Mark as done'
end
expect(page).to have_selector('.todos-count', visible: false)
expect(page).to have_selector(".header-content span[aria-label='#{_('Todos count')}']", visible: false)
visit project_issue_path(project, issue)
expect(page).to have_selector('.todos-count', visible: false)
expect(page).to have_selector(".header-content span[aria-label='#{_('Todos count')}']", visible: false)
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