Merge branch '208153-add-anchor-to-related-issues-and-related-merge-requests' into 'master'

Add anchor tags to related issues and related merge requests

Closes #208153

See merge request gitlab-org/gitlab!26756

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

 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLink, GlLoadingIcon } from '@gitlab/ui';
 import { sprintf, n__, s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue';
@@ -10,6 +10,7 @@ export default {
   name: 'RelatedMergeRequests',
   components: {
     Icon,
+    GlLink,
     GlLoadingIcon,
     RelatedIssuableItem,
   },
@@ -64,10 +65,19 @@ export default {
 </script>
 
 <template>
-  <div v-if="isFetchingMergeRequests || (!isFetchingMergeRequests && totalCount)">
+  <div
+    v-if="isFetchingMergeRequests || (!isFetchingMergeRequests && totalCount)"
+    id="related-merge-requests"
+  >
     <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">
+        <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"
+            href="#related-merge-requests"
+            aria-hidden="true"
+          />
           <span class="mr-1">
             {{ __('Related merge requests') }}
           </span>

app/assets/stylesheets/pages/issues.scss

@@ -284,3 +284,22 @@ ul.related-merge-requests > li {
     text-align: right;
   }
 }
+
+.issue-details {
+  .card-title {
+    a.anchor {
+      left: -16px;
+      top: 4px;
+      outline: none;
+
+      &::after {
+        content: image-url('icon_anchor.svg');
+        @include invisible(hidden);
+      }
+    }
+
+    &:hover > a.anchor::after {
+      @include invisible(visible);
+    }
+  }
+}

changelogs/unreleased/208153-add-anchor-to-related-issues-and-related-merge-requests.yml

+---
+title: Add anchor tags to related issues and related merge requests.
+merge_request: 26756
+author: Gilang Gumilar
+type: added

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

 <script>
+import { GlLink } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import AddIssuableForm from './add_issuable_form.vue';
 import RelatedIssuesList from './related_issues_list.vue';
@@ -13,6 +14,7 @@ export default {
   name: 'RelatedIssuesBlock',
   components: {
     Icon,
+    GlLink,
     AddIssuableForm,
     RelatedIssuesList,
   },
@@ -114,10 +116,16 @@ export default {
 </script>
 
 <template>
-  <div class="related-issues-block">
+  <div id="related-issues" class="related-issues-block">
     <div class="card card-slim">
       <div :class="{ 'panel-empty-heading border-bottom-0': !hasBody }" class="card-header">
-        <h3 class="card-title mt-0 mb-0 h5">
+        <h3 class="card-title mt-0 mb-0 h5 position-relative">
+          <gl-link
+            id="user-content-related-issues"
+            class="anchor position-absolute text-decoration-none"
+            href="#related-issues"
+            aria-hidden="true"
+          />
           {{ __('Linked issues') }}
           <a v-if="hasHelpPath" :href="helpPath">
             <i