Improve related merge requests markup

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

@@ -64,58 +64,51 @@ export default {
 </script>
 
 <template>
-  <div
-    v-if="isFetchingMergeRequests || (!isFetchingMergeRequests && totalCount)"
-    id="related-merge-requests"
-  >
-    <div id="merge-requests" class="card card-slim mt-3">
+  <div v-if="isFetchingMergeRequests || (!isFetchingMergeRequests && totalCount)">
+    <div class="card card-slim gl-mt-5">
       <div class="card-header">
-        <div class="card-title mt-0 mb-0 h5 merge-requests-title position-relative">
+        <div
+          class="card-title gl-relative gl-display-flex gl-align-items-center gl-line-height-20 gl-font-weight-bold gl-m-0"
+        >
           <gl-link
-            id="user-content-related-merge-requests"
-            class="anchor position-absolute text-decoration-none"
+            class="anchor gl-absolute gl-text-decoration-none"
             href="#related-merge-requests"
-            aria-hidden="true"
+            aria-labelledby="related-merge-requests"
           />
-          <span class="mr-1">
+          <h3 id="related-merge-requests" class="gl-font-base gl-m-0">
             {{ __('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 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>
+          </h3>
+          <template v-if="totalCount">
+            <gl-icon name="merge-request" class="gl-ml-5 gl-mr-2 gl-text-gray-500" />
+            <span data-testid="count">{{ totalCount }}</span>
+          </template>
         </div>
       </div>
-      <div>
-        <div v-if="isFetchingMergeRequests" class="qa-related-merge-requests-loading-icon">
-          <gl-loading-icon size="sm" label="Fetching related merge requests" class="py-2" />
-        </div>
-        <ul v-else class="content-list related-items-list">
-          <li v-for="mr in mergeRequests" :key="mr.id" class="list-item pt-0 pb-0">
-            <related-issuable-item
-              :id-key="mr.id"
-              :display-reference="mr.reference"
-              :title="mr.title"
-              :milestone="mr.milestone"
-              :assignees="getAssignees(mr)"
-              :created-at="mr.created_at"
-              :closed-at="mr.closed_at"
-              :merged-at="mr.merged_at"
-              :path="mr.web_url"
-              :state="mr.state"
-              :is-merge-request="true"
-              :pipeline-status="mr.head_pipeline && mr.head_pipeline.detailed_status"
-              path-id-separator="!"
-            />
-          </li>
-        </ul>
-      </div>
+      <gl-loading-icon
+        v-if="isFetchingMergeRequests"
+        size="sm"
+        label="Fetching related merge requests"
+        class="gl-py-3"
+      />
+      <ul v-else class="content-list related-items-list">
+        <li v-for="mr in mergeRequests" :key="mr.id" class="list-item gl-m-0! gl-p-0!">
+          <related-issuable-item
+            :id-key="mr.id"
+            :display-reference="mr.reference"
+            :title="mr.title"
+            :milestone="mr.milestone"
+            :assignees="getAssignees(mr)"
+            :created-at="mr.created_at"
+            :closed-at="mr.closed_at"
+            :merged-at="mr.merged_at"
+            :path="mr.web_url"
+            :state="mr.state"
+            :is-merge-request="true"
+            :pipeline-status="mr.head_pipeline && mr.head_pipeline.detailed_status"
+            path-id-separator="!"
+          />
+        </li>
+      </ul>
     </div>
     <div
       v-if="hasClosingMergeRequest && !isFetchingMergeRequests"

spec/features/issuables/markdown_references/internal_references_spec.rb

@@ -53,9 +53,7 @@ RSpec.describe "Internal references", :js do
           end
 
           it "doesn't show any references", quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/257832' do
-            page.within(".issue-details") do
-              expect(page).not_to have_content("#merge-requests .merge-requests-title")
-            end
+            expect(page).not_to have_text 'Related merge requests'
           end
         end
 
@@ -65,12 +63,9 @@ RSpec.describe "Internal references", :js do
           end
 
           it "shows references", :sidekiq_might_not_need_inline do
-            page.within("#merge-requests .merge-requests-title") do
-              expect(page).to have_content("Related merge requests")
-              expect(page).to have_css(".mr-count-badge")
-            end
+            expect(page).to have_text 'Related merge requests 1'
 
-            page.within("#merge-requests ul") do
+            page.within('.related-items-list') do
               expect(page).to have_content(private_project_merge_request.title)
               expect(page).to have_css(".ic-issue-open-m")
             end
@@ -122,9 +117,7 @@ RSpec.describe "Internal references", :js do
           end
 
           it "doesn't show any references", quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/257832' do
-            page.within(".merge-request-details") do
-              expect(page).not_to have_content("#merge-requests .merge-requests-title")
-            end
+            expect(page).not_to have_text 'Related merge requests'
           end
         end
 

spec/frontend/related_merge_requests/components/related_merge_requests_spec.js

@@ -66,8 +66,8 @@ describe('RelatedMergeRequests', () => {
 
   describe('template', () => {
     it('should render related merge request items', () => {
-      expect(wrapper.find('.js-items-count').text()).toEqual('2');
-      expect(wrapper.findAll(RelatedIssuableItem).length).toEqual(2);
+      expect(wrapper.find('[data-testid="count"]').text()).toBe('2');
+      expect(wrapper.findAll(RelatedIssuableItem)).toHaveLength(2);
 
       const props = wrapper.findAll(RelatedIssuableItem).at(1).props();
       const data = mockData[1];