Clean up related issues card styles

- use gitlab-ui classes where possible
- use GlButton, GlIcon and GlLink where possible
- use correct Pajamas-style spacing
- update aria label to be more descriptive

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

 <script>
-import { GlLink, GlIcon } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlLink, GlIcon, GlButton } from '@gitlab/ui';
 import AddIssuableForm from './add_issuable_form.vue';
 import RelatedIssuesList from './related_issues_list.vue';
 import {
@@ -13,8 +12,8 @@ import {
 export default {
   name: 'RelatedIssuesBlock',
   components: {
-    Icon,
     GlLink,
+    GlButton,
     GlIcon,
     AddIssuableForm,
     RelatedIssuesList,
@@ -127,42 +126,42 @@ export default {
   <div id="related-issues" class="related-issues-block">
     <div class="card card-slim gl-overflow-hidden">
       <div :class="{ 'panel-empty-heading border-bottom-0': !hasBody }" class="card-header">
-        <h3 class="card-title mt-0 mb-0 h5 position-relative gl-display-flex gl-align-items-center">
+        <h3
+          class="card-title h5 position-relative gl-my-0 gl-display-flex gl-align-items-center gl-h-7"
+        >
           <gl-link
             id="user-content-related-issues"
-            class="anchor position-absolute text-decoration-none"
+            class="anchor position-absolute gl-text-decoration-none"
             href="#related-issues"
             aria-hidden="true"
           />
           <slot name="headerText">{{ __('Linked issues') }}</slot>
-          <a v-if="hasHelpPath" :href="helpPath">
-            <i
-              class="related-issues-header-help-icon fa fa-question-circle"
+          <gl-link
+            v-if="hasHelpPath"
+            :href="helpPath"
+            target="_blank"
+            class="gl-display-flex gl-align-items-center gl-ml-2 gl-text-gray-700"
             :aria-label="__('Read more about related issues')"
-            ></i>
-          </a>
-          <div class="d-inline-flex lh-100 align-middle">
-            <div
-              class="js-related-issues-header-issue-count related-issues-header-issue-count issue-count-badge gl-display-inline-flex gl-mx-2"
           >
-              <span class="issue-count-badge-count">
-                <icon :name="issuableTypeIcon" class="mr-1 text-secondary" />
+            <gl-icon name="question" :size="12" role="text" />
+          </gl-link>
+
+          <div class="gl-display-inline-flex">
+            <div class="js-related-issues-header-issue-count gl-display-inline-flex gl-mx-5">
+              <span class="gl-display-inline-flex gl-align-items-center">
+                <gl-icon :name="issuableTypeIcon" class="gl-mr-2 gl-text-gray-700" />
                 {{ badgeLabel }}
               </span>
             </div>
-            <button
+            <gl-button
               v-if="canAdmin"
-              ref="issueCountBadgeAddButton"
-              type="button"
-              :class="qaClass"
-              class="js-issue-count-badge-add-button issue-count-badge-add-button btn btn-sm btn-default"
-              :aria-label="__('Add an issue')"
-              data-placement="top"
               data-qa-selector="related_issues_plus_button"
+              icon="plus"
+              :aria-label="__('Add a related issue')"
+              :class="qaClass"
+              class="js-issue-count-badge-add-button"
               @click="$emit('toggleAddRelatedIssuesForm', $event)"
-            >
-              <gl-icon name="plus" aria-hidden="true" />
-            </button>
+            />
           </div>
         </h3>
       </div>

ee/app/assets/stylesheets/pages/issues/related_issues.scss

@@ -9,10 +9,6 @@ $token-spacing-bottom: 0.5em;
   color: $gl-text-color-secondary;
 }
 
-.related-issues-header-issue-count {
-  margin-left: 0.5em;
-}
-
 .related-issues-token-body {
   padding: 0;
 

ee/spec/frontend/issuable/related_issues/components/related_issues_block_spec.js

 import { shallowMount, mount } from '@vue/test-utils';
+import { GlButton, GlIcon } from '@gitlab/ui';
 import RelatedIssuesBlock from 'ee/related_issues/components/related_issues_block.vue';
 import {
   issuable1,
@@ -14,6 +15,8 @@ import {
 describe('RelatedIssuesBlock', () => {
   let wrapper;
 
+  const findIssueCountBadgeAddButton = () => wrapper.find(GlButton);
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -33,7 +36,7 @@ describe('RelatedIssuesBlock', () => {
     });
 
     it('unable to add new related issues', () => {
-      expect(wrapper.vm.$refs.issueCountBadgeAddButton).toBeUndefined();
+      expect(findIssueCountBadgeAddButton().exists()).toBe(false);
     });
 
     it('add related issues form is hidden', () => {
@@ -85,7 +88,7 @@ describe('RelatedIssuesBlock', () => {
     });
 
     it('can add new related issues', () => {
-      expect(wrapper.vm.$refs.issueCountBadgeAddButton).toBeDefined();
+      expect(findIssueCountBadgeAddButton().exists()).toBe(true);
     });
   });
 
@@ -171,14 +174,16 @@ describe('RelatedIssuesBlock', () => {
       },
     ].forEach(({ issuableType, icon }) => {
       it(`issuableType=${issuableType} is passed`, () => {
-        wrapper = mount(RelatedIssuesBlock, {
+        wrapper = shallowMount(RelatedIssuesBlock, {
           propsData: {
             pathIdSeparator: PathIdSeparator.Issue,
             issuableType,
           },
         });
 
-        expect(wrapper.contains(`.issue-count-badge-count .ic-${icon}`)).toBe(true);
+        const iconComponent = wrapper.find(GlIcon);
+        expect(iconComponent.exists()).toBe(true);
+        expect(iconComponent.props('name')).toBe(icon);
       });
     });
   });

locale/gitlab.pot

@@ -1429,6 +1429,9 @@ msgstr ""
 msgid "Add a numbered list"
 msgstr ""
 
+msgid "Add a related issue"
+msgstr ""
+
 msgid "Add a table"
 msgstr ""
 
@@ -1447,9 +1450,6 @@ msgstr ""
 msgid "Add an impersonation token"
 msgstr ""
 
-msgid "Add an issue"
-msgstr ""
-
 msgid "Add another link"
 msgstr ""