Merge branch '341816-improve-markup' into 'master'

Improve related merge requests markup

See merge request gitlab-org/gitlab!72617

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

@@ -64,40 +64,34 @@ export default {
 </script>
 
 <template>
+  <div v-if="isFetchingMergeRequests || (!isFetchingMergeRequests && totalCount)">
+    <div class="card card-slim gl-mt-5">
+      <div class="card-header">
         <div
-    v-if="isFetchingMergeRequests || (!isFetchingMergeRequests && totalCount)"
-    id="related-merge-requests"
+          class="card-title gl-relative gl-display-flex gl-align-items-center gl-line-height-20 gl-font-weight-bold gl-m-0"
         >
-    <div id="merge-requests" class="card card-slim mt-3">
-      <div class="card-header">
-        <div class="card-title mt-0 mb-0 h5 merge-requests-title position-relative">
           <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>
+          </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>
-        <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>
+      <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 pt-0 pb-0">
+        <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"
@@ -116,7 +110,6 @@ export default {
         </li>
       </ul>
     </div>
-    </div>
     <div
       v-if="hasClosingMergeRequest && !isFetchingMergeRequests"
       class="issue-closed-by-widget second-block"

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];