Clarify the impact of selecting incidents in the new issue form

app/assets/javascripts/issuable_type_selector/components/info_popover.vue

+<script>
+import { GlIcon, GlPopover } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  i18n: {
+    issueTypes: __('Issue types'),
+    issue: __('Issue'),
+    incident: __('Incident'),
+    issueHelpText: __('For general work'),
+    incidentHelpText: __('For investigating IT service disruptions or outages'),
+  },
+  components: {
+    GlIcon,
+    GlPopover,
+  },
+};
+</script>
+
+<template>
+  <span id="popovercontainer">
+    <gl-icon id="issuable-type-info" name="question-o" class="gl-ml-5 gl-text-gray-500" />
+    <gl-popover
+      target="issuable-type-info"
+      container="popovercontainer"
+      :title="$options.i18n.issueTypes"
+      triggers="focus hover"
+    >
+      <ul class="gl-list-style-none gl-p-0 gl-m-0">
+        <li class="gl-mb-3">
+          <div class="gl-font-weight-bold">{{ $options.i18n.issue }}</div>
+          <span>{{ $options.i18n.issueHelpText }}</span>
+        </li>
+        <li>
+          <div class="gl-font-weight-bold">{{ $options.i18n.incident }}</div>
+          <span>{{ $options.i18n.incidentHelpText }}</span>
+        </li>
+      </ul>
+    </gl-popover>
+  </span>
+</template>

app/assets/javascripts/issuable_type_selector/index.js

+import Vue from 'vue';
+import InfoPopover from './components/info_popover.vue';
+
+export default function initIssuableTypeSelector() {
+  const el = document.getElementById('js-type-popover');
+
+  return new Vue({
+    el,
+    components: {
+      InfoPopover,
+    },
+    render(h) {
+      return h(InfoPopover);
+    },
+  });
+}

app/assets/javascripts/pages/projects/issues/form.js

@@ -5,6 +5,7 @@ import IssuableForm from 'ee_else_ce/issuable_form';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import GLForm from '~/gl_form';
 import initSuggestions from '~/issuable_suggestions';
+import initIssuableTypeSelector from '~/issuable_type_selector';
 import LabelsSelect from '~/labels_select';
 import MilestoneSelect from '~/milestone_select';
 import IssuableTemplateSelectors from '~/templates/issuable_template_selectors';
@@ -20,4 +21,5 @@ export default () => {
   });
 
   initSuggestions();
+  initIssuableTypeSelector();
 };

app/views/shared/issuable/form/_type_selector.html.haml

@@ -3,6 +3,7 @@
 .form-group.row.gl-mb-0
   = form.label :type, 'Type', class: 'col-form-label col-sm-2'
   .col-sm-10
+    .gl-display-flex.gl-align-items-center
       .issuable-form-select-holder.selectbox.form-group.gl-mb-0
         .dropdown.js-issuable-type-filter-dropdown-wrap
           %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
@@ -23,6 +24,9 @@
                 %li.js-filter-issuable-type{ data: { track: { event: "select_issue_type_incident", label: "select_issue_type_incident_dropdown_option" } } }
                   = link_to new_project_issue_path(@project, { issuable_template: 'incident', issue: { issue_type: 'incident' } }), class: ("is-active" if issuable.incident?) do
                     = _("Incident")
+
+      #js-type-popover
+
     - if issuable.incident?
       %p.form-text.text-muted
         - incident_docs_url = help_page_path('operations/incident_management/incidents.md')

changelogs/unreleased/297267-clarify-the-impact-od-selecting-incidents-in-new-issue-form.yml

+---
+title: Clarify the impact of selecting incidents in the new issue form
+merge_request: 57373
+author:
+type: added

locale/gitlab.pot

@@ -13523,9 +13523,15 @@ msgstr ""
 msgid "For each job, re-use the project workspace. If the workspace doesn't exist, use %{code_open}git clone%{code_close}."
 msgstr ""
 
+msgid "For general work"
+msgstr ""
+
 msgid "For individual use, create a separate account under your personal email address, not tied to the Enterprise email domain or group."
 msgstr ""
 
+msgid "For investigating IT service disruptions or outages"
+msgstr ""
+
 msgid "For more info, read the documentation."
 msgstr ""
 
@@ -17180,6 +17186,9 @@ msgstr ""
 msgid "Issue title"
 msgstr ""
 
+msgid "Issue types"
+msgstr ""
+
 msgid "Issue update failed"
 msgstr ""
 

spec/frontend/issuable_type_selector/components/__snapshots__/info_popover_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Issuable type info popover renders 1`] = `
+<span
+  id="popovercontainer"
+>
+  <gl-icon-stub
+    class="gl-ml-5 gl-text-gray-500"
+    id="issuable-type-info"
+    name="question-o"
+    size="16"
+  />
+   
+  <gl-popover-stub
+    container="popovercontainer"
+    cssclasses=""
+    target="issuable-type-info"
+    title="Issue types"
+    triggers="focus hover"
+  >
+    <ul
+      class="gl-list-style-none gl-p-0 gl-m-0"
+    >
+      <li
+        class="gl-mb-3"
+      >
+        <div
+          class="gl-font-weight-bold"
+        >
+          Issue
+        </div>
+         
+        <span>
+          For general work
+        </span>
+      </li>
+       
+      <li>
+        <div
+          class="gl-font-weight-bold"
+        >
+          Incident
+        </div>
+         
+        <span>
+          For investigating IT service disruptions or outages
+        </span>
+      </li>
+    </ul>
+  </gl-popover-stub>
+</span>
+`;

spec/frontend/issuable_type_selector/components/info_popover_spec.js

+import { shallowMount } from '@vue/test-utils';
+import InfoPopover from '~/issuable_type_selector/components/info_popover.vue';
+
+describe('Issuable type info popover', () => {
+  let wrapper;
+
+  function createComponent() {
+    wrapper = shallowMount(InfoPopover);
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders', () => {
+    createComponent();
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});