Add latest changes from gitlab-org/gitlab@master

3 files changed, 58 insertions, 1 deletions

diff --git a/app/assets/javascripts/issues/show/components/incidents/constants.js b/app/assets/javascripts/issues/show/components/incidents/constants.js
index 2fdae538902..eeebd6bb32b 100644
--- a/app/assets/javascripts/issues/show/components/incidents/constants.js
+++ b/app/assets/javascripts/issues/show/components/incidents/constants.js
@@ -50,6 +50,14 @@ export const timelineEventTagsI18n = Object.freeze({
   endTime: __('End time'),
 });
 
+export const timelineEventTagsPopover = Object.freeze({
+  title: s__('Incident|Event tag'),
+  message: s__(
+    'Incident|Adding an event tag associates the timeline comment with specific incident metrics.',
+  ),
+  link: __('Learn more'),
+});
+
 export const MAX_TEXT_LENGTH = 280;
 
 export const TIMELINE_EVENT_TAGS = Object.values(timelineEventTagsI18n).map((item) => ({
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
index 2fa1308d7d8..7f98e74f4aa 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
@@ -3,6 +3,7 @@ import { GlDatepicker, GlFormInput, GlFormGroup, GlButton, GlCollapsibleListbox
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { __, sprintf } from '~/locale';
+import TimelineEventsTagsPopover from './timeline_events_tags_popover.vue';
 import { MAX_TEXT_LENGTH, TIMELINE_EVENT_TAGS, timelineFormI18n } from './constants';
 import { getUtcShiftedDate, getPreviousEventTags } from './utils';
 
@@ -21,6 +22,7 @@ export default {
   ],
   components: {
     MarkdownField,
+    TimelineEventsTagsPopover,
     GlDatepicker,
     GlFormInput,
     GlFormGroup,
@@ -197,8 +199,13 @@ export default {
         <p class="gl-ml-3 gl-align-self-end gl-line-height-32">{{ __('UTC') }}</p>
       </div>
     </div>
-    <gl-form-group v-if="glFeatures.incidentEventTags" :label="$options.i18n.tagsLabel">
+    <gl-form-group v-if="glFeatures.incidentEventTags">
+      <label class="gl-display-flex gl-align-items-center gl-gap-3" for="timeline-input-tags">
+        {{ $options.i18n.tagsLabel }}
+        <timeline-events-tags-popover />
+      </label>
       <gl-collapsible-listbox
+        id="timeline-input-tags"
         :selected="selectedTags"
         :toggle-text="listboxText"
         :items="tags"
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_tags_popover.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_tags_popover.vue
new file mode 100644
index 00000000000..772a16e9ba2
--- /dev/null
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_tags_popover.vue
@@ -0,0 +1,42 @@
+<script>
+import { GlIcon, GlPopover, GlLink } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { timelineEventTagsPopover } from './constants';
+
+export default {
+  name: 'TimelineEventsTagsPopover',
+  components: {
+    GlIcon,
+    GlPopover,
+    GlLink,
+  },
+  i18n: timelineEventTagsPopover,
+  learnMoreLink: helpPagePath('ee/operations/incident_management/incident_timeline_events', {
+    anchor: 'incident-tags',
+  }),
+};
+</script>
+
+<template>
+  <span>
+    <gl-icon id="timeline-events-tag-question" name="question-o" class="gl-text-blue-600" />
+
+    <gl-popover
+      target="timeline-events-tag-question"
+      triggers="hover focus"
+      placement="top"
+      container="viewport"
+      :title="$options.i18n.title"
+    >
+      <div>
+        <p class="gl-mb-0">
+          {{ $options.i18n.message }}
+        </p>
+        <gl-link target="_blank" class="gl-font-sm" :href="$options.learnMoreLink">{{
+          $options.i18n.link
+        }}</gl-link
+        >.
+      </div>
+    </gl-popover>
+  </span>
+</template>