Add anchor to an incident timeline

The incident timelines on the Timeline tab of an incident missing an anchor. That prevents to link a timeline event or navigate to a timeline event from a system note

Steps to reproduce

1. Navigate to an incident page
2. Navigate to Timeline tab
3. Create a timeline event
4. Navigate to the summary tab of the incident
5. Click on "incident timeline event" link from the latest system note

Expected behaviour

Page changes the focus to the timeline event

Demo

TimelineEventAnchor

Implementation Guide

Part 1: Make incident timeline events linkable.

• backend: expose a useable, url friendly timeline event reference as a string on the graphql api, e.g. an iid. This only has to be unique within a given incident.
  • note: getIdFromGraphQLId from ~/graphql_shared/utils.js in the frontend may actually make the backend part of this redundant, this should be checked.
• frontend:
  1. Add the iid to the api request. Ensure this data is passed to the timeline event item component.
  2. Add this string as an id to the html for a given timeline event. This allows browser hash-nav mechanism to scroll to the item. For example: add it to this element https://gitlab.com/gitlab-org/gitlab/-/blob/63c3ea6b9d66e6d21e05d980974ea868de8b4a6f/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue#L63. example: <h3 id="6" class="...">05:00 UTC</h3>

Part 2: Add the link to system notes.

• backend: Notes are populated by constructing html on the backend. Construct a url using the path to the incident. Add the timeline and unique id to the url, e.g. https://<gitlab-root>/-/incidents/5/timeline#6. The file to update is here: https://gitlab.com/gitlab-org/gitlab/-/blob/63c3ea6b9d66e6d21e05d980974ea868de8b4a6f/app/services/system_notes/incidents_service.rb.
• There are two notes to add the link to - add event and edit event.

Things to look out for / test:

• The relative url root option.
• Both incident/issue routes (/-/issues/5 versus /-/incidents/issues/5).