Organise code into ~/issues/new

app/assets/javascripts/issues/form.js

@@ -4,8 +4,7 @@ import $ from 'jquery';
 import IssuableForm from 'ee_else_ce/issuable/issuable_form';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import GLForm from '~/gl_form';
-import initSuggestions from '~/issues/suggestions';
-import initIssuableTypeSelector from '~/issues/type_selector';
+import { initTitleSuggestions, initTypePopover } from '~/issues/new';
 import LabelsSelect from '~/labels/labels_select';
 import MilestoneSelect from '~/milestones/milestone_select';
 import IssuableTemplateSelectors from '~/issuable/issuable_template_selectors';
@@ -20,6 +19,6 @@ export default () => {
     warnTemplateOverride: true,
   });
 
-  initSuggestions();
-  initIssuableTypeSelector();
+  initTitleSuggestions();
+  initTypePopover();
 };

app/assets/javascripts/issues/suggestions/components/app.vue → app/assets/javascripts/issues/new/components/title_suggestions.vue

@@ -2,12 +2,12 @@
 import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import query from '../queries/issues.query.graphql';
-import Suggestion from './item.vue';
+import TitleSuggestionsItem from './title_suggestions_item.vue';
 
 export default {
   components: {
-    Suggestion,
     GlIcon,
+    TitleSuggestionsItem,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -66,7 +66,7 @@ export default {
 </script>
 
 <template>
-  <div v-show="showSuggestions" class="form-group row issuable-suggestions">
+  <div v-show="showSuggestions" class="form-group row">
     <div v-once class="col-form-label col-sm-2 pt-0">
       {{ __('Similar issues') }}
       <gl-icon
@@ -86,7 +86,7 @@ export default {
             'gl-mb-3': index !== issues.length - 1,
           }"
         >
-          <suggestion :suggestion="suggestion" />
+          <title-suggestions-item :suggestion="suggestion" />
         </li>
       </ul>
     </div>

app/assets/javascripts/issues/type_selector/components/info_popover.vue → app/assets/javascripts/issues/new/components/type_popover.vue

@@ -19,9 +19,9 @@ export default {
 
 <template>
   <span id="popovercontainer">
-    <gl-icon id="issuable-type-info" name="question-o" class="gl-ml-5 gl-text-gray-500" />
+    <gl-icon id="issue-type-info" name="question-o" class="gl-ml-5 gl-text-gray-500" />
     <gl-popover
-      target="issuable-type-info"
+      target="issue-type-info"
       container="popovercontainer"
       :title="$options.i18n.issueTypes"
       triggers="focus hover"

app/assets/javascripts/issues/suggestions/index.js → app/assets/javascripts/issues/new/index.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
-import App from './components/app.vue';
+import TitleSuggestions from './components/title_suggestions.vue';
+import TypePopover from './components/type_popover.vue';
 
-Vue.use(VueApollo);
+export function initTitleSuggestions() {
+  Vue.use(VueApollo);
 
-export default function initIssuableSuggestions() {
   const el = document.getElementById('js-suggestions');
   const issueTitle = document.getElementById('issue_title');
-  const { projectPath } = el.dataset;
+
+  if (!el) {
+    return undefined;
+  }
+
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(),
   });
@@ -26,13 +31,26 @@ export default function initIssuableSuggestions() {
         this.search = issueTitle.value;
       });
     },
-    render(h) {
-      return h(App, {
+    render(createElement) {
+      return createElement(TitleSuggestions, {
         props: {
-          projectPath,
+          projectPath: el.dataset.projectPath,
           search: this.search,
         },
       });
     },
   });
 }
+
+export function initTypePopover() {
+  const el = document.getElementById('js-type-popover');
+
+  if (!el) {
+    return undefined;
+  }
+
+  return new Vue({
+    el,
+    render: (createElement) => createElement(TypePopover),
+  });
+}

app/assets/javascripts/issues/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/stylesheets/pages/issuable.scss

@@ -875,10 +875,6 @@
   }
 }
 
-.issuable-suggestions svg {
-  vertical-align: sub;
-}
-
 .suggestion-footer {
   font-size: 12px;
   line-height: 15px;

spec/frontend/issues/type_selector/components/__snapshots__/info_popover_spec.js.snap → spec/frontend/issues/new/components/__snapshots__/type_popover_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Issuable type info popover renders 1`] = `
+exports[`Issue type info popover renders 1`] = `
 <span
   id="popovercontainer"
 >
   <gl-icon-stub
     class="gl-ml-5 gl-text-gray-500"
-    id="issuable-type-info"
+    id="issue-type-info"
     name="question-o"
     size="16"
   />
@@ -14,7 +14,7 @@ exports[`Issuable type info popover renders 1`] = `
   <gl-popover-stub
     container="popovercontainer"
     cssclasses=""
-    target="issuable-type-info"
+    target="issue-type-info"
     title="Issue types"
     triggers="focus hover"
   >

spec/frontend/issues/suggestions/components/item_spec.js → spec/frontend/issues/new/components/title_suggestions_item_spec.js

 import { GlTooltip, GlLink, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { TEST_HOST } from 'helpers/test_constants';
-import Suggestion from '~/issues/suggestions/components/item.vue';
+import TitleSuggestionsItem from '~/issues/new/components/title_suggestions_item.vue';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 import mockData from '../mock_data';
 
-describe('Issuable suggestions suggestion component', () => {
+describe('Issue title suggestions item component', () => {
   let wrapper;
 
   function createComponent(suggestion = {}) {
-    wrapper = shallowMount(Suggestion, {
+    wrapper = shallowMount(TitleSuggestionsItem, {
       propsData: {
         suggestion: {
           ...mockData(),

spec/frontend/issues/suggestions/components/app_spec.js → spec/frontend/issues/new/components/title_suggestions_spec.js

 import { shallowMount } from '@vue/test-utils';
-import App from '~/issues/suggestions/components/app.vue';
-import Suggestion from '~/issues/suggestions/components/item.vue';
+import TitleSuggestions from '~/issues/new/components/title_suggestions.vue';
+import TitleSuggestionsItem from '~/issues/new/components/title_suggestions_item.vue';
 
-describe('Issuable suggestions app component', () => {
+describe('Issue title suggestions component', () => {
   let wrapper;
 
   function createComponent(search = 'search') {
-    wrapper = shallowMount(App, {
+    wrapper = shallowMount(TitleSuggestions, {
       propsData: {
         search,
         projectPath: 'project',
@@ -77,7 +77,7 @@ describe('Issuable suggestions app component', () => {
       wrapper.setData(data);
 
       return wrapper.vm.$nextTick(() => {
-        expect(wrapper.findAll(Suggestion).length).toBe(2);
+        expect(wrapper.findAll(TitleSuggestionsItem).length).toBe(2);
       });
     });
 

spec/frontend/issues/type_selector/components/info_popover_spec.js → spec/frontend/issues/new/components/type_popover_spec.js

 import { shallowMount } from '@vue/test-utils';
-import InfoPopover from '~/issues/type_selector/components/info_popover.vue';
+import TypePopover from '~/issues/new/components/type_popover.vue';
 
-describe('Issuable type info popover', () => {
+describe('Issue type info popover', () => {
   let wrapper;
 
   function createComponent() {
-    wrapper = shallowMount(InfoPopover);
+    wrapper = shallowMount(TypePopover);
   }
 
   afterEach(() => {