Surface Alert number GFM reference in highlight bar on Incidents

app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue

 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlTooltipDirective, GlSprintf } from '@gitlab/ui';
 import { formatDate } from '~/lib/utils/datetime_utility';
 
 export default {
   components: {
     GlLink,
+    GlSprintf,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     alert: {
@@ -24,17 +28,23 @@ export default {
   <div
     class="gl-border-solid gl-border-1 gl-border-gray-100 gl-p-5 gl-mb-3 gl-rounded-base gl-display-flex gl-justify-content-space-between"
   >
-    <div class="text-truncate gl-pr-3">
+    <div class="gl-pr-3">
       <span class="gl-font-weight-bold">{{ s__('HighlightBar|Original alert:') }}</span>
-      <gl-link :href="alert.detailsUrl">{{ alert.title }}</gl-link>
+      <gl-link v-gl-tooltip :title="alert.title" :href="alert.detailsUrl">
+        <gl-sprintf :message="__('Alert #%{alertId}')">
+          <template #alertId>
+            <span>{{ alert.iid }}</span>
+          </template>
+        </gl-sprintf>
+      </gl-link>
     </div>
 
-    <div class="gl-pr-3 gl-white-space-nowrap">
+    <div class="gl-pr-3">
       <span class="gl-font-weight-bold">{{ s__('HighlightBar|Alert start time:') }}</span>
       {{ startTime }}
     </div>
 
-    <div class="gl-white-space-nowrap">
+    <div>
       <span class="gl-font-weight-bold">{{ s__('HighlightBar|Alert events:') }}</span>
       <span>{{ alert.eventCount }}</span>
     </div>

changelogs/unreleased/230841-update-alert-gfm-like-reference.yml

+---
+title: Surface Alert number GFM reference in highlight bar
+merge_request: 42832
+author:
+type: changed

locale/gitlab.pot

@@ -2168,6 +2168,9 @@ msgid_plural "Alerts"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "Alert #%{alertId}"
+msgstr ""
+
 msgid "AlertManagement|Acknowledged"
 msgstr ""
 

spec/frontend/issue_show/components/incidents/highlight_bar_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlSprintf } from '@gitlab/ui';
 import HighlightBar from '~/issue_show/components/incidents/highlight_bar.vue';
 import { formatDate } from '~/lib/utils/datetime_utility';
 
@@ -9,6 +9,7 @@ describe('Highlight Bar', () => {
   let wrapper;
 
   const alert = {
+    iid: 1,
     startedAt: '2020-05-29T10:39:22Z',
     detailsUrl: 'http://127.0.0.1:3000/root/unique-alerts/-/alert_management/1/details',
     eventCount: 1,
@@ -20,6 +21,9 @@ describe('Highlight Bar', () => {
       propsData: {
         alert,
       },
+      stubs: {
+        GlSprintf,
+      },
     });
   };
 
@@ -39,7 +43,8 @@ describe('Highlight Bar', () => {
   it('renders a link to the alert page', () => {
     expect(findLink().exists()).toBe(true);
     expect(findLink().attributes('href')).toBe(alert.detailsUrl);
-    expect(findLink().text()).toContain(alert.title);
+    expect(findLink().attributes('title')).toBe(alert.title);
+    expect(findLink().text()).toBe(`Alert #${alert.iid}`);
   });
 
   it('renders formatted start time of the alert', () => {