diff --git a/app/assets/javascripts/issues/list/components/issue_card_statistics.vue b/app/assets/javascripts/issues/list/components/issue_card_statistics.vue
index 2d00c3e549da99c0c362dc87ff21d93ef482d1db..4906cec526a2007e6961955c11faaece72c2808b 100644
--- a/app/assets/javascripts/issues/list/components/issue_card_statistics.vue
+++ b/app/assets/javascripts/issues/list/components/issue_card_statistics.vue
@@ -21,20 +21,10 @@ export default {
<template>
<ul class="gl-display-contents">
- <li
- v-if="issue.mergeRequestsCount"
- v-gl-tooltip
- class="gl-display-none gl-sm-display-block gl-mr-3"
- :title="$options.i18n.relatedMergeRequests"
- data-testid="merge-requests"
- >
- <gl-icon name="merge-request" />
- {{ issue.mergeRequestsCount }}
- </li>
<li
v-if="issue.upvotes"
v-gl-tooltip
- class="gl-display-none gl-sm-display-block gl-mr-3"
+ class="gl-display-none gl-sm-display-block"
:title="$options.i18n.upvotes"
data-testid="issuable-upvotes"
>
@@ -44,13 +34,23 @@ export default {
<li
v-if="issue.downvotes"
v-gl-tooltip
- class="gl-display-none gl-sm-display-block gl-mr-3"
+ class="gl-display-none gl-sm-display-block"
:title="$options.i18n.downvotes"
data-testid="issuable-downvotes"
>
<gl-icon name="thumb-down" />
{{ issue.downvotes }}
</li>
+ <li
+ v-if="issue.mergeRequestsCount"
+ v-gl-tooltip
+ class="gl-display-none gl-sm-display-block"
+ :title="$options.i18n.relatedMergeRequests"
+ data-testid="merge-requests"
+ >
+ <gl-icon name="merge-request" />
+ {{ issue.mergeRequestsCount }}
+ </li>
<slot></slot>
</ul>
</template>
diff --git a/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue b/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue
index 2bce8314a0cde2802e0e4b844c59767f5032608b..53d5b2be327bb88080c637600aa108834ec3bc91 100644
--- a/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue
+++ b/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue
@@ -24,7 +24,7 @@ export default {
<li
v-if="mergeRequest.upvotes"
v-gl-tooltip
- class="gl-display-none gl-sm-display-block gl-mr-3"
+ class="gl-display-none gl-sm-display-block"
:title="$options.i18n.upvotes"
data-testid="issuable-upvotes"
>
@@ -34,7 +34,7 @@ export default {
<li
v-if="mergeRequest.downvotes"
v-gl-tooltip
- class="gl-display-none gl-sm-display-block gl-mr-3"
+ class="gl-display-none gl-sm-display-block"
:title="$options.i18n.downvotes"
data-testid="issuable-downvotes"
>
diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
index 4dce443b709fc3c12d54ae9f0572a56bf53f7007..e06abfbfc772a5e6ea27603c30318596d2d48824 100644
--- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
+++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
@@ -376,41 +376,38 @@ export default {
</div>
</div>
<div class="issuable-meta">
- <ul v-if="showIssuableMeta" class="controls">
+ <ul v-if="showIssuableMeta" class="controls gl-gap-3">
<!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
- <li v-if="$slots.status" data-testid="issuable-status">
+ <li v-if="$slots.status" data-testid="issuable-status" class="gl-mr-0!">
<gl-badge v-if="isNotOpen" size="sm" :variant="statusBadgeVariant">
<slot name="status"></slot>
</gl-badge>
<slot v-else name="status"></slot>
</li>
<slot name="pipeline-status"></slot>
- <li v-if="assignees.length">
+ <li v-if="assignees.length" class="gl-mr-0!">
<issuable-assignees
:assignees="assignees"
:icon-size="16"
:max-visible="4"
- img-css-classes="gl-mr-2!"
class="gl-align-items-center gl-display-flex"
/>
</li>
- <slot name="statistics"></slot>
<li
- v-if="showDiscussions"
- class="gl-display-none gl-sm-display-block"
+ v-if="showDiscussions && notesCount"
+ class="gl-display-none gl-sm-display-block gl-mr-0!"
data-testid="issuable-comments"
>
- <gl-link
+ <div
v-gl-tooltip.top
:title="__('Comments')"
- :href="issuableNotesLink"
- :class="{ 'no-comments': !notesCount }"
- class="gl-reset-color!"
+ class="gl-reset-color! gl-display-flex gl-align-items-center"
>
- <gl-icon name="comments" />
+ <gl-icon name="comments" class="gl-mr-2" />
{{ notesCount }}
- </gl-link>
+ </div>
</li>
+ <slot name="statistics"></slot>
</ul>
<div
v-gl-tooltip.bottom
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index b319354edfbf27d1833d947b76ea2000e5089a51..c1dc29de84f040df995e2be332c1274c937143d0 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -168,10 +168,6 @@ ul.content-list {
}
}
-.no-comments {
- opacity: 0.5;
-}
-
// Content list using flexbox
.flex-list {
.flex-row {
diff --git a/app/views/projects/merge_requests/_approvals_count.html.haml b/app/views/projects/merge_requests/_approvals_count.html.haml
index 35d0eb4cdd49615a6096af06267b27f60ae39017..c8638398337a46396f4dc2222a154b99ad74db7c 100644
--- a/app/views/projects/merge_requests/_approvals_count.html.haml
+++ b/app/views/projects/merge_requests/_approvals_count.html.haml
@@ -10,4 +10,4 @@
- badge_variant = :success
- badge_label = _("Approved")
- %li.gl-display-flex= render Pajamas::BadgeComponent.new(badge_label, size: 'sm', variant: badge_variant, icon: approval_icon, title: approval_tooltip, class: 'has-tooltip', data: { 'testid': 'mr-appovals' })
+ %li.gl-display-flex{ class: 'gl-mr-0!' }= render Pajamas::BadgeComponent.new(badge_label, size: 'sm', variant: badge_variant, icon: approval_icon, title: approval_tooltip, class: 'has-tooltip', data: { 'testid': 'mr-appovals' })
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 0b90b7409aad5501bf545b7d92ea3beb5152b81a..94e5bb4fb656f4e378372562ef79e2691fae959b 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -43,29 +43,28 @@
= link_to_label(label, type: :merge_request, small: true)
.issuable-meta
- %ul.controls.d-flex.gl-align-items-center
+ %ul.controls.gl-gap-3
- if merge_request.merged?
- merged_at = merge_request.merged_at ? l(merge_request.merged_at.to_time) : _("Merge date & time could not be determined")
- %li.d-none.d-sm-flex
+ %li.gl-display-none.gl-sm-display-flex{ class: 'gl-mr-0!' }
%a.has-tooltip{ href: "#{merge_request_path(merge_request)}#widget-state", title: merged_at }
= render Pajamas::BadgeComponent.new(_('Merged'), size: 'sm', variant: 'info')
- elsif merge_request.closed?
- %li.d-none.d-sm-flex
+ %li.gl-display-none.gl-sm-display-flex{ class: 'gl-mr-0!' }
= render Pajamas::BadgeComponent.new(_('Closed'), size: 'sm', variant: 'danger')
- = render 'shared/merge_request_pipeline_status', merge_request: merge_request
- if merge_request.open? && merge_request.broken?
- %li.issuable-pipeline-broken.d-none.d-sm-flex
+ %li.issuable-pipeline-broken.gl-display-none.gl-sm-display-flex{ class: 'gl-mr-0!' }
= link_to merge_request_path(merge_request), class: "has-tooltip", title: _('Cannot be merged automatically') do
= sprite_icon('warning-solid')
- if merge_request.assignees.any?
- %li.gl-display-flex.gl-align-items-center
+ %li.gl-display-flex{ class: 'gl-mr-0!' }
= render 'shared/issuable/assignees', project: merge_request.project, issuable: merge_request
- if merge_request.reviewers.any?
- %li.gl-display-flex.issuable-reviewers
+ %li.gl-display-flex.issuable-reviewers{ class: 'gl-mr-0!' }
= render 'shared/issuable/reviewers', project: merge_request.project, issuable: merge_request
- = render 'projects/merge_requests/approvals_count', merge_request: merge_request
-
= render 'shared/issuable_meta_data', issuable: merge_request
+ = render 'projects/merge_requests/approvals_count', merge_request: merge_request
+ = render 'shared/merge_request_pipeline_status', merge_request: merge_request
- if merge_request.updated_at != merge_request.created_at
.gl-float-right.issuable-updated-at.gl-display-none.gl-sm-display-inline-block.gl-text-gray-500
diff --git a/app/views/shared/_issuable_meta_data.html.haml b/app/views/shared/_issuable_meta_data.html.haml
index 982d3b687929d0eac7c8b9d32970893544e80413..e1b83f45d3d5ad4e73c6a115eef1f2a189a78b05 100644
--- a/app/views/shared/_issuable_meta_data.html.haml
+++ b/app/views/shared/_issuable_meta_data.html.haml
@@ -2,27 +2,27 @@
- issue_votes = @issuable_meta_data[issuable.id]
- upvotes = issue_votes.upvotes
- downvotes = issue_votes.downvotes
-- issuable_path = issuable_path(issuable, anchor: 'notes')
- issuable_mr = @issuable_meta_data[issuable.id].merge_requests_count
- if issuable_mr > 0
- %li.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Related merge requests'), data: { testid: 'merge-requests' } }
+ %li.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Related merge requests'), data: { testid: 'merge-requests' }, class: 'gl-mr-0!' }
= sprite_icon('merge-request', css_class: "gl-vertical-align-middle")
= issuable_mr
+- if note_count > 0
+ %li.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Comments'), data: { testid: 'issuable-comments' }, class: 'gl-mr-0!' }
+ = sprite_icon('comments', css_class: "gl-vertical-align-middle")
+ = note_count
+
- if upvotes > 0
- %li.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Upvotes'), data: { testid: 'issuable-upvotes' } }
+ %li.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Upvotes'), data: { testid: 'issuable-upvotes' }, class: 'gl-mr-0!' }
= sprite_icon('thumb-up', css_class: "gl-vertical-align-middle")
= upvotes
- if downvotes > 0
- %li.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Downvotes'), data: { testid: 'issuable-downvotes' } }
+ %li.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Downvotes'), data: { testid: 'issuable-downvotes' }, class: 'gl-mr-0!' }
= sprite_icon('thumb-down', css_class: "gl-vertical-align-middle")
= downvotes
= render_if_exists 'shared/issuable/blocking_issues_count', issuable: issuable
-%li.gl-display-none.gl-sm-display-block
- = link_to issuable_path, class: ['has-tooltip', ('no-comments' if note_count == 0)], title: _('Comments'), data: { testid: 'issuable-comments' } do
- = sprite_icon('comments', css_class: 'gl-vertical-align-text-bottom')
- = note_count
diff --git a/app/views/shared/snippets/_snippet.html.haml b/app/views/shared/snippets/_snippet.html.haml
index a61d49f30cfc94ff6fed044615d9d8f6e32e5a7f..753350f5c97eeb79b7c44a8592adf1ccb7516be4 100644
--- a/app/views/shared/snippets/_snippet.html.haml
+++ b/app/views/shared/snippets/_snippet.html.haml
@@ -14,8 +14,8 @@
%span{ class: 'has-tooltip gl-bg-orange-50 gl-text-orange-600 border-radius-default gl-p-2', title: s_("Snippets|This snippet is hidden because its author has been banned") }
= sprite_icon('spam', size: '16')
- .snippet-info
- .gl-display-inline.gl-text-secondary{ data: { testid: 'snippet-created-at'} }
+ .snippet-info.gl-font-sm.gl-text-gray-500!
+ .gl-display-inline{ data: { testid: 'snippet-created-at'} }
- created_at = time_ago_with_tooltip(snippet.created_at, placement: 'bottom')
- author = link_to(snippet.author_name, user_snippets_path(snippet.author), data: { user_id: snippet.author.id }, class: 'gl-text-black-normal')
#{snippet.to_reference} ·
@@ -27,10 +27,11 @@
.gl-sm-display-flex.gl-flex-direction-column.gl-align-items-flex-end{ data: { testid: 'snippet-file-count-content', qa_snippet_files: snippet.statistics&.file_count } }
.gl-display-flex.gl-gap-4.gl-align-items-center
+ - if notes_count > 0
+ %span.has-tooltip{ title: _('Comments') }
+ = sprite_icon('comments')
+ = notes_count
= snippet_file_count(snippet)
- = link_to gitlab_snippet_path(snippet, anchor: 'notes'), class: "#{'no-comments' if notes_count == 0} gl-text-black-normal" do
- = sprite_icon('comments', css_class: 'gl-vertical-align-text-bottom')
- = notes_count
%span.has-tooltip{ title: visibility_level_label(snippet.visibility_level), data: { testid: 'snippet-visibility-content', qa_snippet_visibility: visibility_level_label(snippet.visibility_level) } }
= visibility_level_icon(snippet.visibility_level)
- .gl-white-space-nowrap.gl-text-secondary= _('updated %{timeAgo}').html_safe % { timeAgo: time_ago_with_tooltip(snippet.updated_at, placement: 'bottom') }
+ .gl-white-space-nowrap.gl-font-sm.gl-text-secondary= _('updated %{timeAgo}').html_safe % { timeAgo: time_ago_with_tooltip(snippet.updated_at, placement: 'bottom') }
diff --git a/ee/app/assets/javascripts/issues/list/components/issue_card_statistics.vue b/ee/app/assets/javascripts/issues/list/components/issue_card_statistics.vue
index ce1f3f6506f69a554423288fcd4f771137cf7e99..4c6ccec4ab57b601eb2147029ec82166eaf18b02 100644
--- a/ee/app/assets/javascripts/issues/list/components/issue_card_statistics.vue
+++ b/ee/app/assets/javascripts/issues/list/components/issue_card_statistics.vue
@@ -19,7 +19,7 @@ export default {
<template>
<issue-card-statistics :issue="issue">
<blocking-issues-count
- class="gl-display-none gl-sm-display-block gl-mr-3"
+ class="gl-display-none gl-sm-display-inline-block"
:blocking-issues-count="issue.blockingCount"
is-list-item
data-testid="blocking-issues"
diff --git a/ee/app/views/projects/merge_requests/_approvals_count.html.haml b/ee/app/views/projects/merge_requests/_approvals_count.html.haml
index 147bcc706c7c488bf00ecad77b40b33b0ad8982a..8b856d169134baf48875ba3cd922c61c4729ca53 100644
--- a/ee/app/views/projects/merge_requests/_approvals_count.html.haml
+++ b/ee/app/views/projects/merge_requests/_approvals_count.html.haml
@@ -14,6 +14,6 @@
- badge_variant = approved ? :success : :muted
- badge_label = approved ? _("Approved") : _("%{approvals_given} of %{required} Approvals") % { approvals_given: total_given, required: required }
- %li.gl-display-flex= render Pajamas::BadgeComponent.new(badge_label, size: 'sm', variant: badge_variant, icon: approval_icon, title: approval_tooltip, class: 'has-tooltip', data: { 'testid': 'mr-appovals' })
+ %li.gl-display-flex{ class: 'gl-mr-0!' }= render Pajamas::BadgeComponent.new(badge_label, size: 'sm', variant: badge_variant, icon: approval_icon, title: approval_tooltip, class: 'has-tooltip', data: { 'testid': 'mr-appovals' })
- else
= render_ce "projects/merge_requests/approvals_count", merge_request: merge_request
diff --git a/spec/features/issues/user_sees_breadcrumb_links_spec.rb b/spec/features/issues/user_sees_breadcrumb_links_spec.rb
index 632999c5d4919dab56923ea1097455c084a772eb..1612da17f5b91c2d684ebd7110f5c9e7d44ba10e 100644
--- a/spec/features/issues/user_sees_breadcrumb_links_spec.rb
+++ b/spec/features/issues/user_sees_breadcrumb_links_spec.rb
@@ -34,6 +34,6 @@
visit project_issues_path(project, assignee_id: user.id)
expect(page).to have_content 'foobar'
- expect(page.all('.no-comments').first.text).to eq "0"
+ expect(page).not_to have_selector("[data-testid='issuable-comments']")
end
end
diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
index fccf4ae4258752dcc39da78489753931a75078d8..c75ef0eb642a29d3913cc83e7bda7a5b52d01b2e 100644
--- a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
+++ b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
@@ -227,7 +227,7 @@ describe('IssuableItem', () => {
describe('showDiscussions', () => {
it.each`
userDiscussionsCount | returnValue
- ${0} | ${true}
+ ${0} | ${false}
${1} | ${true}
${undefined} | ${false}
${null} | ${false}
@@ -555,12 +555,9 @@ describe('IssuableItem', () => {
const discussionsEl = wrapper.findByTestId('issuable-comments');
expect(discussionsEl.exists()).toBe(true);
- expect(discussionsEl.findComponent(GlLink).attributes()).toMatchObject({
- title: 'Comments',
- href: `${mockIssuable.webUrl}#notes`,
- });
+
expect(discussionsEl.findComponent(GlIcon).props('name')).toBe('comments');
- expect(discussionsEl.findComponent(GlLink).text()).toContain('2');
+ expect(discussionsEl.text()).toBe('2');
});
it('renders issuable-assignees component', () => {