Commit ff379f1d authored by Coung Ngo's avatar Coung Ngo Committed by Olena Horal-Koretska

Organise code into ~/issues/new

parent 02c9cf3b
......@@ -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();
};
......@@ -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>
......
......@@ -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"
......
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),
});
}
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);
},
});
}
......@@ -875,10 +875,6 @@
}
}
.issuable-suggestions svg {
vertical-align: sub;
}
.suggestion-footer {
font-size: 12px;
line-height: 15px;
......
// 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"
>
......
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(),
......
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);
});
});
......
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(() => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment