Allow urlText to be saved on metric images

What does this MR do and why?

This adds the ability to add a Url Text (text describing what the image or external URL is, i.e 'Production error rate').

It also adds the ability to update both the url and url_text fields on the metric image.

The backend for this change was added in !78430 (merged).

Screenshots or screen recordings

header	header
Form
URL with URL Text

How to set up and validate locally

1. Ensure you have at least a GitLab Premium account.
2. Head to Monitor -> Incidents and create an incident.
3. Once created, add a metric via the metric tab.
4. Add / Edit / Delete as you please.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #346171 (closed)

ee/app/assets/javascripts/issues/show/components/incidents/metrics_image.vue

@@ -8,6 +8,7 @@ import {
   GlLink,
   GlModal,
   GlSprintf,
+  GlTooltipDirective,
 } from '@gitlab/ui';
 import { mapActions } from 'vuex';
 import { __, s__ } from '~/locale';
@@ -20,6 +21,8 @@ export default {
     modalTitle: s__('Incident|Deleting %{filename}'),
     editModalUpdate: __('Update'),
     editModalTitle: s__('Incident|Editing %{filename}'),
+    editIconTitle: s__('Incident|Edit image text or link'),
+    deleteIconTitle: s__('Incident|Delete image'),
   },
   components: {
     GlButton,
@@ -32,6 +35,9 @@ export default {
     GlSprintf,
   },
   inject: ['canUpdate'],
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     id: {
       type: Number,
@@ -215,19 +221,22 @@ export default {
             <gl-icon name="external-link" class="gl-vertical-align-middle" />
           </gl-link>
           <span v-else>{{ urlText == null || urlText == '' ? filename : urlText }}</span>
-          <div class="gl-ml-auto">
+          <div class="gl-ml-auto btn-group">
             <gl-button
               v-if="canUpdate"
-              class="gl-mr-2"
-              icon="link"
+              v-gl-tooltip.bottom
+              icon="pencil"
               :aria-label="__('Edit')"
+              :title="$options.i18n.editIconTitle"
               data-testid="edit-button"
               @click="editModalVisible = true"
             />
             <gl-button
               v-if="canUpdate"
+              v-gl-tooltip.bottom
               icon="remove"
               :aria-label="__('Delete')"
+              :title="$options.i18n.deleteIconTitle"
               data-testid="delete-button"
               @click="modalVisible = true"
             />