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,26 +3,30 @@
 .form-group.row.gl-mb-0
   = form.label :type, 'Type', class: 'col-form-label col-sm-2'
   .col-sm-10
-    .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' }
-          %span.dropdown-toggle-text.is-default
-            = issuable.issue_type.capitalize || _("Select type")
-          = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
-        .dropdown-menu.dropdown-menu-selectable.dropdown-select
-          .dropdown-title.gl-display-flex
-            %span.gl-ml-auto
-              = _("Select type")
-            %button.dropdown-title-button.dropdown-menu-close.gl-ml-auto{ type: 'button', "aria-label" => _('Close') }
-              = sprite_icon('close', size: 16, css_class: 'dropdown-menu-close-icon')
-          .dropdown-content
-            %ul
-              %li.js-filter-issuable-type
-                = link_to new_project_issue_path(@project), class: ("is-active" if issuable.issue?) do
-                  = _("Issue")
-              %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")
+    .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' }
+            %span.dropdown-toggle-text.is-default
+              = issuable.issue_type.capitalize || _("Select type")
+            = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
+          .dropdown-menu.dropdown-menu-selectable.dropdown-select
+            .dropdown-title.gl-display-flex
+              %span.gl-ml-auto
+                = _("Select type")
+              %button.dropdown-title-button.dropdown-menu-close.gl-ml-auto{ type: 'button', "aria-label" => _('Close') }
+                = sprite_icon('close', size: 16, css_class: 'dropdown-menu-close-icon')
+            .dropdown-content
+              %ul
+                %li.js-filter-issuable-type
+                  = link_to new_project_issue_path(@project), class: ("is-active" if issuable.issue?) do
+                    = _("Issue")
+                %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();
+  });
+});