Delete some issues CSS

app/assets/javascripts/boards/components/board_card_inner.vue

@@ -316,7 +316,7 @@ export default {
               </p>
             </gl-tooltip>
 
-            <span ref="countBadge" class="issue-count-badge board-card-info gl-mr-0 gl-pr-0">
+            <span ref="countBadge" class="board-card-info gl-mr-0 gl-pr-0 gl-pl-3">
               <span v-if="allowSubEpics" class="gl-mr-3">
                 <gl-icon name="epic" />
                 {{ totalEpicsCount }}
@@ -334,7 +334,7 @@ export default {
             <span
               v-if="shouldRenderEpicProgress"
               ref="progressBadge"
-              class="issue-count-badge board-card-info gl-pl-0"
+              class="board-card-info gl-pl-0"
             >
               <span class="gl-mr-3" data-testid="epic-progress">
                 <gl-icon name="progress" />

app/assets/javascripts/boards/components/board_list_header.vue

@@ -365,7 +365,7 @@ export default {
       >
         <span class="gl-display-inline-flex">
           <gl-tooltip :target="() => $refs.itemCount" :title="itemsTooltipLabel" />
-          <span ref="itemCount" class="issue-count-badge-count">
+          <span ref="itemCount" class="gl-display-inline-flex gl-align-items-center">
             <gl-icon class="gl-mr-2" :name="countIcon" />
             <item-count :items-size="itemsCount" :max-issue-count="list.maxIssueCount" />
           </span>
@@ -388,7 +388,7 @@ export default {
           v-gl-tooltip.hover
           :aria-label="$options.i18n.newIssue"
           :title="$options.i18n.newIssue"
-          class="issue-count-badge-add-button no-drag"
+          class="no-drag"
           icon="plus"
           @click="showNewIssueForm"
         />

app/assets/javascripts/related_issues/components/related_issues_block.vue

@@ -162,7 +162,6 @@ export default {
               icon="plus"
               :aria-label="__('Add a related issue')"
               :class="qaClass"
-              class="js-issue-count-badge-add-button"
               @click="$emit('toggleAddRelatedIssuesForm', $event)"
             />
           </div>

app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue

@@ -81,13 +81,13 @@ export default {
             {{ __('Related merge requests') }}
           </span>
           <div v-if="totalCount" class="d-inline-flex lh-100 align-middle">
-            <div class="mr-count-badge gl-display-inline-flex">
-              <div class="mr-count-badge-count">
-                <svg class="s16 mr-1 text-secondary">
-                  <gl-icon name="merge-request" class="mr-1 text-secondary" />
-                </svg>
-                <span class="js-items-count">{{ totalCount }}</span>
-              </div>
+            <div
+              class="mr-count-badge gl-display-inline-flex gl-align-items-center gl-py-2 gl-px-3"
+            >
+              <svg class="s16 mr-1 text-secondary">
+                <gl-icon name="merge-request" class="mr-1 text-secondary" />
+              </svg>
+              <span class="js-items-count">{{ totalCount }}</span>
             </div>
           </div>
         </div>

app/assets/stylesheets/_page_specific_files.scss

@@ -10,7 +10,6 @@
 @import './pages/groups';
 @import './pages/help';
 @import './pages/issuable';
-@import './pages/issues/issue_count_badge';
 @import './pages/issues';
 @import './pages/labels';
 @import './pages/login';

app/assets/stylesheets/pages/issues/issue_count_badge.scss

-.issue-count-badge,
-.mr-count-badge {
-  padding: 5px $gl-padding-8;
-}
-
-.issue-count-badge-count,
-.mr-count-badge-count {
-  display: inline-flex;
-  align-items: center;
-}

ee/app/assets/javascripts/issues_analytics/components/issues_analytics.vue

@@ -178,7 +178,7 @@ export default {
     <gl-loading-icon v-if="loading" size="md" class="mt-8" />
 
     <div v-if="showChart" class="issues-analytics-chart">
-      <h4 class="chart-title">{{ s__('IssuesAnalytics|Issues opened per month') }}</h4>
+      <h4 class="gl-mt-6 gl-mb-7">{{ s__('IssuesAnalytics|Issues opened per month') }}</h4>
 
       <gl-column-chart
         data-qa-selector="issues_analytics_graph"
@@ -191,10 +191,10 @@ export default {
       />
       <div class="d-flex">
         <gl-chart-legend v-if="chart" :chart="chart" :series-info="seriesInfo" />
-        <div class="issues-analytics-legend">
-          <span>{{ s__('IssuesAnalytics|Total:') }} {{ seriesTotal }}</span>
-          <span>&#8226;</span>
-          <span>{{ s__('IssuesAnalytics|Avg/Month:') }} {{ seriesAverage }}</span>
+        <div class="gl-font-sm gl-text-gray-500">
+          {{ s__('IssuesAnalytics|Total:') }} {{ seriesTotal }}
+          &#8226;
+          {{ s__('IssuesAnalytics|Avg/Month:') }} {{ seriesAverage }}
         </div>
       </div>
     </div>

ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue

@@ -233,7 +233,7 @@ export default {
             <div
               v-if="isEpic"
               ref="countBadge"
-              class="issue-count-badge text-secondary gl-display-inline-flex gl-py-0 p-lg-0"
+              class="gl-text-gray-500 gl-display-inline-flex gl-py-0 p-lg-0"
             >
               <span
                 v-if="allowSubEpics"

ee/app/assets/stylesheets/pages/issues_analytics.scss

@@ -11,14 +11,3 @@
     max-width: px-to-rem($milestone-title-max-width);
   }
 }
-
-.issues-analytics-chart {
-  .chart-title {
-    margin: $gl-padding-24 0 $gl-padding-32;
-  }
-}
-
-.issues-analytics-legend {
-  font-size: $gl-font-size-small;
-  color: $gl-text-color-secondary;
-}

ee/spec/features/boards/swimlanes/epics_swimlanes_spec.rb

@@ -119,12 +119,12 @@ RSpec.describe 'epics swimlanes', :js do
     end
 
     it 'displays new issue button' do
-      expect(first('.board')).to have_selector('.issue-count-badge-add-button', count: 1)
+      expect(first('.board')).to have_button('New issue', count: 1)
     end
 
     it 'shows form in unassigned issues lane when clicking button' do
       page.within(first('.board')) do
-        find('.issue-count-badge-add-button').click
+        click_button 'New issue'
       end
 
       page.within("[data-testid='board-lane-unassigned-issues']") do
@@ -134,7 +134,7 @@ RSpec.describe 'epics swimlanes', :js do
 
     it 'hides form when clicking cancel' do
       page.within(first('.board')) do
-        find('.issue-count-badge-add-button').click
+        click_button 'New issue'
       end
 
       page.within("[data-testid='board-lane-unassigned-issues']") do
@@ -148,7 +148,7 @@ RSpec.describe 'epics swimlanes', :js do
 
     it 'creates new issue in unassigned issues lane' do
       page.within(first('.board')) do
-        find('.issue-count-badge-add-button').click
+        click_button 'New issue'
       end
 
       wait_for_all_requests
@@ -160,7 +160,7 @@ RSpec.describe 'epics swimlanes', :js do
 
       wait_for_all_requests
 
-      page.within(first('.board .issue-count-badge-count')) do
+      page.within(first('.board [data-testid="issue-count-badge"]')) do
         expect(page).to have_content('3')
       end
 

ee/spec/features/epic_boards/new_epic_spec.rb

@@ -32,7 +32,7 @@ RSpec.describe 'create epic in board', :js do
 
       wait_for_requests
 
-      page.within(first('.board .issue-count-badge-count')) do
+      page.within(first('.board [data-testid="issue-count-badge"]')) do
         expect(page).to have_content('1')
       end
 

ee/spec/features/issues/related_issues_spec.rb

@@ -51,7 +51,7 @@ RSpec.describe 'Related issues', :js do
 
     context 'with "Relates to", "Blocks", "Is blocked by" groupings' do
       def add_linked_issue(issue, radio_input_value)
-        find('.js-issue-count-badge-add-button').click
+        click_button 'Add a related issue'
         find('.js-add-issuable-form-input').set "#{issue.to_reference(project)} "
         find("input[name=\"linked-issue-type-radio\"][value=\"#{radio_input_value}\"]").click
         find('.js-add-issuable-form-add-button').click

spec/features/boards/new_issue_spec.rb

@@ -68,7 +68,7 @@ RSpec.describe 'Issue Boards new issue', :js do
 
       wait_for_requests
 
-      page.within(first('.board .issue-count-badge-count')) do
+      page.within(first('.board [data-testid="issue-count-badge"]')) do
         expect(page).to have_content('1')
       end
 

spec/features/boards/reload_boards_on_browser_back_spec.rb

@@ -16,7 +16,7 @@ RSpec.describe 'Ensure Boards do not show stale data on browser back', :js do
       visit project_board_path(project, board)
       wait_for_requests
 
-      page.within(first('.board .issue-count-badge-count')) do
+      page.within(first('.board [data-testid="issue-count-badge"]')) do
         expect(page).to have_content('0')
       end
     end
@@ -35,7 +35,7 @@ RSpec.describe 'Ensure Boards do not show stale data on browser back', :js do
       page.go_back
       wait_for_requests
 
-      page.within(first('.board .issue-count-badge-count')) do
+      page.within(first('.board [data-testid="issue-count-badge"]')) do
         expect(page).to have_content('1')
       end
 

spec/features/groups/board_spec.rb

@@ -24,7 +24,7 @@ RSpec.describe 'Group Boards' do
     it 'adds an issue to the backlog' do
       page.within(find('.board', match: :first)) do
         issue_title = 'New Issue'
-        find(:css, '.issue-count-badge-add-button').click
+        click_button 'New issue'
 
         wait_for_requests
 

spec/features/issues/related_issues_spec.rb

@@ -41,13 +41,13 @@ RSpec.describe 'Related issues', :js do
         visit project_issue_path(project, issue)
 
         expect(page).to have_css('.related-issues-block')
-        expect(page).not_to have_selector('.js-issue-count-badge-add-button')
+        expect(page).not_to have_button 'Add a related issue'
       end
     end
 
     context 'when logged in but not a member' do
       before do
-        gitlab_sign_in(user)
+        sign_in(user)
       end
 
       it 'shows widget when internal project' do
@@ -57,7 +57,7 @@ RSpec.describe 'Related issues', :js do
         visit project_issue_path(project, issue)
 
         expect(page).to have_css('.related-issues-block')
-        expect(page).not_to have_selector('.js-issue-count-badge-add-button')
+        expect(page).not_to have_button 'Add a related issue'
       end
 
       it 'does not show widget when private project' do
@@ -76,7 +76,7 @@ RSpec.describe 'Related issues', :js do
         visit project_issue_path(project, issue)
 
         expect(page).to have_css('.related-issues-block')
-        expect(page).not_to have_selector('.js-issue-count-badge-add-button')
+        expect(page).not_to have_button 'Add a related issue'
       end
 
       it 'shows widget on their own public issue' do
@@ -86,13 +86,13 @@ RSpec.describe 'Related issues', :js do
         visit project_issue_path(project, issue)
 
         expect(page).to have_css('.related-issues-block')
-        expect(page).not_to have_selector('.js-issue-count-badge-add-button')
+        expect(page).not_to have_button 'Add a related issue'
       end
     end
 
     context 'when logged in and a guest' do
       before do
-        gitlab_sign_in(user)
+        sign_in(user)
       end
 
       it 'shows widget when internal project' do
@@ -103,7 +103,7 @@ RSpec.describe 'Related issues', :js do
         visit project_issue_path(project, issue)
 
         expect(page).to have_css('.related-issues-block')
-        expect(page).not_to have_selector('.js-issue-count-badge-add-button')
+        expect(page).not_to have_button 'Add a related issue'
       end
 
       it 'shows widget when private project' do
@@ -114,7 +114,7 @@ RSpec.describe 'Related issues', :js do
         visit project_issue_path(project, issue)
 
         expect(page).to have_css('.related-issues-block')
-        expect(page).not_to have_selector('.js-issue-count-badge-add-button')
+        expect(page).not_to have_button 'Add a related issue'
       end
 
       it 'shows widget when public project' do
@@ -125,13 +125,13 @@ RSpec.describe 'Related issues', :js do
         visit project_issue_path(project, issue)
 
         expect(page).to have_css('.related-issues-block')
-        expect(page).not_to have_selector('.js-issue-count-badge-add-button')
+        expect(page).not_to have_button 'Add a related issue'
       end
     end
 
     context 'when logged in and a reporter' do
       before do
-        gitlab_sign_in(user)
+        sign_in(user)
       end
 
       it 'shows widget when internal project' do
@@ -142,7 +142,7 @@ RSpec.describe 'Related issues', :js do
         visit project_issue_path(project, issue)
 
         expect(page).to have_css('.related-issues-block')
-        expect(page).to have_selector('.js-issue-count-badge-add-button')
+        expect(page).to have_button 'Add a related issue'
       end
 
       it 'shows widget when private project' do
@@ -153,7 +153,7 @@ RSpec.describe 'Related issues', :js do
         visit project_issue_path(project, issue)
 
         expect(page).to have_css('.related-issues-block')
-        expect(page).to have_selector('.js-issue-count-badge-add-button')
+        expect(page).to have_button 'Add a related issue'
       end
 
       it 'shows widget when public project' do
@@ -164,7 +164,7 @@ RSpec.describe 'Related issues', :js do
         visit project_issue_path(project, issue)
 
         expect(page).to have_css('.related-issues-block')
-        expect(page).to have_selector('.js-issue-count-badge-add-button')
+        expect(page).to have_button 'Add a related issue'
       end
 
       it 'shows widget on their own public issue' do
@@ -175,7 +175,7 @@ RSpec.describe 'Related issues', :js do
         visit project_issue_path(project, issue)
 
         expect(page).to have_css('.related-issues-block')
-        expect(page).to have_selector('.js-issue-count-badge-add-button')
+        expect(page).to have_button 'Add a related issue'
       end
     end
   end
@@ -186,7 +186,7 @@ RSpec.describe 'Related issues', :js do
 
     before do
       project.add_guest(user)
-      gitlab_sign_in(user)
+      sign_in(user)
     end
 
     context 'visiting some issue someone else created' do
@@ -216,7 +216,7 @@ RSpec.describe 'Related issues', :js do
     before do
       project.add_maintainer(user)
       project_b.add_maintainer(user)
-      gitlab_sign_in(user)
+      sign_in(user)
     end
 
     context 'without existing related issues' do
@@ -230,7 +230,7 @@ RSpec.describe 'Related issues', :js do
       end
 
       it 'add related issue' do
-        find('.js-issue-count-badge-add-button').click
+        click_button 'Add a related issue'
         find('.js-add-issuable-form-input').set "#{issue_b.to_reference(project)} "
         find('.js-add-issuable-form-add-button').click
 
@@ -247,7 +247,7 @@ RSpec.describe 'Related issues', :js do
       end
 
       it 'add cross-project related issue' do
-        find('.js-issue-count-badge-add-button').click
+        click_button 'Add a related issue'
         find('.js-add-issuable-form-input').set "#{issue_project_b_a.to_reference(project)} "
         find('.js-add-issuable-form-add-button').click
 
@@ -261,7 +261,7 @@ RSpec.describe 'Related issues', :js do
       end
 
       it 'pressing enter should submit the form' do
-        find('.js-issue-count-badge-add-button').click
+        click_button 'Add a related issue'
         find('.js-add-issuable-form-input').set "#{issue_project_b_a.to_reference(project)} "
         find('.js-add-issuable-form-input').native.send_key(:enter)
 
@@ -275,7 +275,7 @@ RSpec.describe 'Related issues', :js do
       end
 
       it 'disallows duplicate entries' do
-        find('.js-issue-count-badge-add-button').click
+        click_button 'Add a related issue'
         find('.js-add-issuable-form-input').set 'duplicate duplicate duplicate'
 
         items = all('.js-add-issuable-form-token-list-item')
@@ -288,7 +288,7 @@ RSpec.describe 'Related issues', :js do
 
       it 'allows us to remove pending issues' do
         # Tests against https://gitlab.com/gitlab-org/gitlab/issues/11625
-        find('.js-issue-count-badge-add-button').click
+        click_button 'Add a related issue'
         find('.js-add-issuable-form-input').set 'issue1 issue2 issue3 '
 
         items = all('.js-add-issuable-form-token-list-item')
@@ -351,7 +351,7 @@ RSpec.describe 'Related issues', :js do
       end
 
       it 'add related issue' do
-        find('.js-issue-count-badge-add-button').click
+        click_button 'Add a related issue'
         find('.js-add-issuable-form-input').set "##{issue_d.iid} "
         find('.js-add-issuable-form-add-button').click
 
@@ -367,7 +367,7 @@ RSpec.describe 'Related issues', :js do
       end
 
       it 'add invalid related issue' do
-        find('.js-issue-count-badge-add-button').click
+        click_button 'Add a related issue'
         find('.js-add-issuable-form-input').set "#9999999 "
         find('.js-add-issuable-form-add-button').click
 
@@ -382,7 +382,7 @@ RSpec.describe 'Related issues', :js do
       end
 
       it 'add unauthorized related issue' do
-        find('.js-issue-count-badge-add-button').click
+        click_button 'Add a related issue'
         find('.js-add-issuable-form-input').set "#{issue_project_unauthorized_a.to_reference(project)} "
         find('.js-add-issuable-form-add-button').click
 

spec/support/helpers/feature_flag_helpers.rb

@@ -71,7 +71,7 @@ module FeatureFlagHelpers
   end
 
   def add_linked_issue_button
-    find('.js-issue-count-badge-add-button')
+    find_button 'Add a related issue'
   end
 
   def remove_linked_issue_button