Added move to project in issue inline edit form
[ci skip]
This commit is contained in:
parent
4fcff0bfa2
commit
907dd68e0a
|
@ -15,6 +15,10 @@ export default {
|
||||||
required: true,
|
required: true,
|
||||||
type: String,
|
type: String,
|
||||||
},
|
},
|
||||||
|
canMove: {
|
||||||
|
required: true,
|
||||||
|
type: Boolean,
|
||||||
|
},
|
||||||
canUpdate: {
|
canUpdate: {
|
||||||
required: true,
|
required: true,
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
@ -49,6 +53,10 @@ export default {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
projectsAutocompleteUrl: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
const store = new Store({
|
const store = new Store({
|
||||||
|
@ -79,6 +87,7 @@ export default {
|
||||||
this.store.formState = {
|
this.store.formState = {
|
||||||
title: this.state.titleText,
|
title: this.state.titleText,
|
||||||
description: this.state.descriptionText,
|
description: this.state.descriptionText,
|
||||||
|
move_to_project_id: 0,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
closeForm() {
|
closeForm() {
|
||||||
|
@ -86,7 +95,12 @@ export default {
|
||||||
},
|
},
|
||||||
updateIssuable() {
|
updateIssuable() {
|
||||||
this.service.updateIssuable(this.store.formState)
|
this.service.updateIssuable(this.store.formState)
|
||||||
.then(() => {
|
.then(res => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
if (location.pathname !== data.path) {
|
||||||
|
gl.utils.visitUrl(data.path);
|
||||||
|
}
|
||||||
|
|
||||||
eventHub.$emit('close.form');
|
eventHub.$emit('close.form');
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
|
@ -153,9 +167,11 @@ export default {
|
||||||
<form-component
|
<form-component
|
||||||
v-if="canUpdate && showForm"
|
v-if="canUpdate && showForm"
|
||||||
:form-state="formState"
|
:form-state="formState"
|
||||||
|
:can-move="canMove"
|
||||||
:can-destroy="canDestroy"
|
:can-destroy="canDestroy"
|
||||||
:markdown-docs="markdownDocs"
|
:markdown-docs="markdownDocs"
|
||||||
:markdown-preview-url="markdownPreviewUrl" />
|
:markdown-preview-url="markdownPreviewUrl"
|
||||||
|
:projects-autocomplete-url="projectsAutocompleteUrl" />
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<title-component
|
<title-component
|
||||||
:issuable-ref="issuableRef"
|
:issuable-ref="issuableRef"
|
||||||
|
|
|
@ -0,0 +1,84 @@
|
||||||
|
<script>
|
||||||
|
import tooltipMixin from '../../../vue_shared/mixins/tooltip';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [
|
||||||
|
tooltipMixin,
|
||||||
|
],
|
||||||
|
props: {
|
||||||
|
formState: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
projectsAutocompleteUrl: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const $moveDropdown = $(this.$refs['move-dropdown']);
|
||||||
|
|
||||||
|
$moveDropdown.select2({
|
||||||
|
ajax: {
|
||||||
|
url: this.projectsAutocompleteUrl,
|
||||||
|
quietMillis: 125,
|
||||||
|
data(term, page, context) {
|
||||||
|
return {
|
||||||
|
search: term,
|
||||||
|
offset_id: context,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
results(data) {
|
||||||
|
const more = data.length >= 50;
|
||||||
|
const context = data[data.length - 1] ? data[data.length - 1].id : null;
|
||||||
|
|
||||||
|
return {
|
||||||
|
results: data,
|
||||||
|
more,
|
||||||
|
context,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
formatResult(project) {
|
||||||
|
return project.name_with_namespace;
|
||||||
|
},
|
||||||
|
formatSelection(project) {
|
||||||
|
return project.name_with_namespace;
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.on('change', (e) => {
|
||||||
|
this.formState.move_to_project_id = parseInt(e.target.value, 10);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
$(this.$refs['move-dropdown']).select2('destroy');
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<fieldset>
|
||||||
|
<label
|
||||||
|
for="issuable-move"
|
||||||
|
class="sr-only">
|
||||||
|
Move
|
||||||
|
</label>
|
||||||
|
<div class="issuable-form-select-holder append-right-5">
|
||||||
|
<input
|
||||||
|
ref="move-dropdown"
|
||||||
|
type="hidden"
|
||||||
|
id="issuable-move"
|
||||||
|
data-placeholder="Move to a different project" />
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
data-placement="auto top"
|
||||||
|
style="cursor: default"
|
||||||
|
title="Moving an issue will copy the discussion to a different project and close it here. All participants will be notified of the new location."
|
||||||
|
ref="tooltip">
|
||||||
|
<i
|
||||||
|
class="fa fa-question-circle"
|
||||||
|
aria-hidden="true">
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
|
</fieldset>
|
||||||
|
</template>
|
|
@ -2,9 +2,14 @@
|
||||||
import titleField from './fields/title.vue';
|
import titleField from './fields/title.vue';
|
||||||
import descriptionField from './fields/description.vue';
|
import descriptionField from './fields/description.vue';
|
||||||
import editActions from './edit_actions.vue';
|
import editActions from './edit_actions.vue';
|
||||||
|
import projectMove from './fields/project_move.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
canMove: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
canDestroy: {
|
canDestroy: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: true,
|
required: true,
|
||||||
|
@ -21,11 +26,16 @@
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
projectsAutocompleteUrl: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
titleField,
|
titleField,
|
||||||
descriptionField,
|
descriptionField,
|
||||||
editActions,
|
editActions,
|
||||||
|
projectMove,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -38,6 +48,10 @@
|
||||||
:form-state="formState"
|
:form-state="formState"
|
||||||
:markdown-preview-url="markdownPreviewUrl"
|
:markdown-preview-url="markdownPreviewUrl"
|
||||||
:markdown-docs="markdownDocs" />
|
:markdown-docs="markdownDocs" />
|
||||||
|
<project-move
|
||||||
|
v-if="canMove"
|
||||||
|
:form-state="formState"
|
||||||
|
:projects-autocomplete-url="projectsAutocompleteUrl" />
|
||||||
<edit-actions
|
<edit-actions
|
||||||
:can-destroy="canDestroy" />
|
:can-destroy="canDestroy" />
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -23,15 +23,18 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
const {
|
const {
|
||||||
canUpdate,
|
canUpdate,
|
||||||
canDestroy,
|
canDestroy,
|
||||||
|
canMove,
|
||||||
endpoint,
|
endpoint,
|
||||||
issuableRef,
|
issuableRef,
|
||||||
markdownPreviewUrl,
|
markdownPreviewUrl,
|
||||||
markdownDocs,
|
markdownDocs,
|
||||||
|
projectsAutocompleteUrl,
|
||||||
} = issuableElement.dataset;
|
} = issuableElement.dataset;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
canUpdate: gl.utils.convertPermissionToBoolean(canUpdate),
|
canUpdate: gl.utils.convertPermissionToBoolean(canUpdate),
|
||||||
canDestroy: gl.utils.convertPermissionToBoolean(canDestroy),
|
canDestroy: gl.utils.convertPermissionToBoolean(canDestroy),
|
||||||
|
canMove: gl.utils.convertPermissionToBoolean(canMove),
|
||||||
endpoint,
|
endpoint,
|
||||||
issuableRef,
|
issuableRef,
|
||||||
initialTitle: issuableTitleElement.innerHTML,
|
initialTitle: issuableTitleElement.innerHTML,
|
||||||
|
@ -39,6 +42,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
|
initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
|
||||||
markdownPreviewUrl,
|
markdownPreviewUrl,
|
||||||
markdownDocs,
|
markdownDocs,
|
||||||
|
projectsAutocompleteUrl,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
render(createElement) {
|
render(createElement) {
|
||||||
|
@ -46,6 +50,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
props: {
|
props: {
|
||||||
canUpdate: this.canUpdate,
|
canUpdate: this.canUpdate,
|
||||||
canDestroy: this.canDestroy,
|
canDestroy: this.canDestroy,
|
||||||
|
canMove: this.canMove,
|
||||||
endpoint: this.endpoint,
|
endpoint: this.endpoint,
|
||||||
issuableRef: this.issuableRef,
|
issuableRef: this.issuableRef,
|
||||||
initialTitle: this.initialTitle,
|
initialTitle: this.initialTitle,
|
||||||
|
@ -53,6 +58,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
initialDescriptionText: this.initialDescriptionText,
|
initialDescriptionText: this.initialDescriptionText,
|
||||||
markdownPreviewUrl: this.markdownPreviewUrl,
|
markdownPreviewUrl: this.markdownPreviewUrl,
|
||||||
markdownDocs: this.markdownDocs,
|
markdownDocs: this.markdownDocs,
|
||||||
|
projectsAutocompleteUrl: this.projectsAutocompleteUrl,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
|
@ -7,7 +7,7 @@ export default class Service {
|
||||||
constructor(endpoint) {
|
constructor(endpoint) {
|
||||||
this.endpoint = endpoint;
|
this.endpoint = endpoint;
|
||||||
|
|
||||||
this.resource = Vue.resource(this.endpoint, {}, {
|
this.resource = Vue.resource(`${this.endpoint}.json`, {}, {
|
||||||
realtimeChanges: {
|
realtimeChanges: {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
url: `${this.endpoint}/realtime_changes`,
|
url: `${this.endpoint}/realtime_changes`,
|
||||||
|
|
|
@ -15,6 +15,7 @@ export default class Store {
|
||||||
this.formState = {
|
this.formState = {
|
||||||
title: '',
|
title: '',
|
||||||
description: '',
|
description: '',
|
||||||
|
move_to_project_id: 0,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -148,10 +148,7 @@ class Projects::IssuesController < Projects::ApplicationController
|
||||||
|
|
||||||
format.json do
|
format.json do
|
||||||
if @issue.valid?
|
if @issue.valid?
|
||||||
render json: @issue.to_json(methods: [:task_status, :task_status_short],
|
render json: IssueSerializer.new.represent(@issue)
|
||||||
include: { milestone: {},
|
|
||||||
assignees: { only: [:id, :name, :username], methods: [:avatar_url] },
|
|
||||||
labels: { methods: :text_color } })
|
|
||||||
else
|
else
|
||||||
render json: { errors: @issue.errors.full_messages }, status: :unprocessable_entity
|
render json: { errors: @issue.errors.full_messages }, status: :unprocessable_entity
|
||||||
end
|
end
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
class IssueEntity < IssuableEntity
|
class IssueEntity < IssuableEntity
|
||||||
|
include RequestAwareEntity
|
||||||
|
|
||||||
expose :branch_name
|
expose :branch_name
|
||||||
expose :confidential
|
expose :confidential
|
||||||
expose :assignees, using: API::Entities::UserBasic
|
expose :assignees, using: API::Entities::UserBasic
|
||||||
|
@ -7,4 +9,8 @@ class IssueEntity < IssuableEntity
|
||||||
expose :project_id
|
expose :project_id
|
||||||
expose :milestone, using: API::Entities::Milestone
|
expose :milestone, using: API::Entities::Milestone
|
||||||
expose :labels, using: LabelEntity
|
expose :labels, using: LabelEntity
|
||||||
|
|
||||||
|
expose :path do |issue|
|
||||||
|
namespace_project_issue_path(issue.project.namespace, issue.project, issue)
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|
|
@ -54,9 +54,11 @@
|
||||||
#js-issuable-app{ "data" => { "endpoint" => namespace_project_issue_path(@project.namespace, @project, @issue),
|
#js-issuable-app{ "data" => { "endpoint" => namespace_project_issue_path(@project.namespace, @project, @issue),
|
||||||
"can-update" => can?(current_user, :update_issue, @issue).to_s,
|
"can-update" => can?(current_user, :update_issue, @issue).to_s,
|
||||||
"can-destroy" => can?(current_user, :destroy_issue, @issue).to_s,
|
"can-destroy" => can?(current_user, :destroy_issue, @issue).to_s,
|
||||||
|
"can-move" => @issue.can_move?(current_user).to_s,
|
||||||
"issuable-ref" => @issue.to_reference,
|
"issuable-ref" => @issue.to_reference,
|
||||||
"markdown-preview-url" => preview_markdown_path(@project),
|
"markdown-preview-url" => preview_markdown_path(@project),
|
||||||
"markdown-docs" => help_page_path('user/markdown'),
|
"markdown-docs" => help_page_path('user/markdown'),
|
||||||
|
"projects-autocomplete-url" => autocomplete_projects_path(project_id: @project.id),
|
||||||
} }
|
} }
|
||||||
%h2.title= markdown_field(@issue, :title)
|
%h2.title= markdown_field(@issue, :title)
|
||||||
- if @issue.description.present?
|
- if @issue.description.present?
|
||||||
|
|
|
@ -29,12 +29,15 @@ describe('Issuable output', () => {
|
||||||
propsData: {
|
propsData: {
|
||||||
canUpdate: true,
|
canUpdate: true,
|
||||||
canDestroy: true,
|
canDestroy: true,
|
||||||
|
canMove: true,
|
||||||
endpoint: '/gitlab-org/gitlab-shell/issues/9/realtime_changes',
|
endpoint: '/gitlab-org/gitlab-shell/issues/9/realtime_changes',
|
||||||
issuableRef: '#1',
|
issuableRef: '#1',
|
||||||
initialTitle: '',
|
initialTitle: '',
|
||||||
initialDescriptionHtml: '',
|
initialDescriptionHtml: '',
|
||||||
initialDescriptionText: '',
|
initialDescriptionText: '',
|
||||||
showForm: false,
|
markdownPreviewUrl: '/',
|
||||||
|
markdownDocs: '/',
|
||||||
|
projectsAutocompleteUrl: '/',
|
||||||
},
|
},
|
||||||
}).$mount();
|
}).$mount();
|
||||||
});
|
});
|
||||||
|
@ -108,6 +111,46 @@ describe('Issuable output', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('does not redirect if issue has not moved', (done) => {
|
||||||
|
spyOn(gl.utils, 'visitUrl');
|
||||||
|
spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
|
||||||
|
resolve();
|
||||||
|
}));
|
||||||
|
|
||||||
|
vm.updateIssuable();
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(
|
||||||
|
gl.utils.visitUrl,
|
||||||
|
).not.toHaveBeenCalled();
|
||||||
|
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('redirects if issue is moved', (done) => {
|
||||||
|
spyOn(gl.utils, 'visitUrl');
|
||||||
|
spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
|
||||||
|
resolve({
|
||||||
|
json() {
|
||||||
|
return {
|
||||||
|
path: '/testing-issue-move',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
vm.updateIssuable();
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(
|
||||||
|
gl.utils.visitUrl,
|
||||||
|
).toHaveBeenCalledWith('/testing-issue-move');
|
||||||
|
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
it('closes form on error', (done) => {
|
it('closes form on error', (done) => {
|
||||||
spyOn(window, 'Flash').and.callThrough();
|
spyOn(window, 'Flash').and.callThrough();
|
||||||
spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve, reject) => {
|
spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve, reject) => {
|
||||||
|
|
|
@ -0,0 +1,38 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
import projectMove from '~/issue_show/components/fields/project_move.vue';
|
||||||
|
|
||||||
|
describe('Project move field component', () => {
|
||||||
|
let vm;
|
||||||
|
let formState;
|
||||||
|
|
||||||
|
beforeEach((done) => {
|
||||||
|
const Component = Vue.extend(projectMove);
|
||||||
|
|
||||||
|
formState = {
|
||||||
|
move_to_project_id: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
vm = new Component({
|
||||||
|
propsData: {
|
||||||
|
formState,
|
||||||
|
projectsAutocompleteUrl: '/autocomplete',
|
||||||
|
},
|
||||||
|
}).$mount();
|
||||||
|
|
||||||
|
Vue.nextTick(done);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('mounts select2 element', () => {
|
||||||
|
expect(
|
||||||
|
vm.$el.querySelector('.select2-container'),
|
||||||
|
).not.toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('updates formState on change', () => {
|
||||||
|
$(vm.$refs['move-dropdown']).val(2).trigger('change');
|
||||||
|
|
||||||
|
expect(
|
||||||
|
formState.move_to_project_id,
|
||||||
|
).toBe(2);
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue