2019-11-15 07:06:12 -05:00
|
|
|
/* eslint-disable consistent-return */
|
2018-03-09 15:18:59 -05:00
|
|
|
|
|
|
|
import $ from 'jquery';
|
2018-01-30 09:53:28 -05:00
|
|
|
import axios from './lib/utils/axios_utils';
|
2017-11-13 04:11:54 -05:00
|
|
|
import { addDelimiter } from './lib/utils/text_utility';
|
2018-01-30 09:53:28 -05:00
|
|
|
import flash from './flash';
|
2017-05-16 16:52:40 -04:00
|
|
|
import CreateMergeRequestDropdown from './create_merge_request_dropdown';
|
2017-07-07 11:04:43 -04:00
|
|
|
import IssuablesHelper from './helpers/issuables_helper';
|
2020-05-27 08:08:19 -04:00
|
|
|
import { joinPaths } from '~/lib/utils/url_utility';
|
2019-05-02 10:49:16 -04:00
|
|
|
import { __ } from './locale';
|
2016-07-24 16:45:11 -04:00
|
|
|
|
2017-10-30 14:59:16 -04:00
|
|
|
export default class Issue {
|
2017-03-01 14:54:04 -05:00
|
|
|
constructor() {
|
2020-06-23 05:08:47 -04:00
|
|
|
if ($('.btn-close, .btn-reopen').length) this.initIssueBtnEventListeners();
|
2017-04-12 15:40:35 -04:00
|
|
|
|
2020-04-21 11:21:10 -04:00
|
|
|
if ($('.js-close-blocked-issue-warning').length) this.initIssueWarningBtnEventListener();
|
|
|
|
|
2020-05-27 08:08:19 -04:00
|
|
|
if ($('.js-alert-moved-from-service-desk-warning').length) {
|
|
|
|
const trimmedPathname = window.location.pathname.slice(1);
|
|
|
|
this.alertMovedFromServiceDeskDismissedKey = joinPaths(
|
|
|
|
trimmedPathname,
|
|
|
|
'alert-issue-moved-from-service-desk-dismissed',
|
|
|
|
);
|
|
|
|
|
|
|
|
this.initIssueMovedFromServiceDeskDismissHandler();
|
|
|
|
}
|
|
|
|
|
2017-04-12 15:40:35 -04:00
|
|
|
Issue.$btnNewBranch = $('#new-branch');
|
2017-05-04 04:09:21 -04:00
|
|
|
Issue.createMrDropdownWrap = document.querySelector('.create-mr-dropdown-wrap');
|
2017-04-12 15:40:35 -04:00
|
|
|
|
2019-03-11 04:52:40 -04:00
|
|
|
if (document.querySelector('#related-branches')) {
|
|
|
|
Issue.initRelatedBranches();
|
|
|
|
}
|
2017-05-04 04:09:21 -04:00
|
|
|
|
2020-06-23 05:08:47 -04:00
|
|
|
this.closeButtons = $('.btn-close');
|
|
|
|
this.reopenButtons = $('.btn-reopen');
|
2017-06-07 06:18:35 -04:00
|
|
|
|
2017-07-07 09:51:34 -04:00
|
|
|
this.initCloseReopenReport();
|
2017-07-03 12:00:59 -04:00
|
|
|
|
2017-05-04 04:09:21 -04:00
|
|
|
if (Issue.createMrDropdownWrap) {
|
|
|
|
this.createMergeRequestDropdown = new CreateMergeRequestDropdown(Issue.createMrDropdownWrap);
|
|
|
|
}
|
2018-02-09 12:07:20 -05:00
|
|
|
|
|
|
|
// Listen to state changes in the Vue app
|
2018-10-10 03:13:34 -04:00
|
|
|
document.addEventListener('issuable_vue_app:change', event => {
|
2018-02-09 12:07:20 -05:00
|
|
|
this.updateTopState(event.detail.isClosed, event.detail.data);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* This method updates the top area of the issue.
|
|
|
|
*
|
|
|
|
* Once the issue state changes, either through a click on the top area (jquery)
|
|
|
|
* or a click on the bottom area (Vue) we need to update the top area.
|
|
|
|
*
|
|
|
|
* @param {Boolean} isClosed
|
|
|
|
* @param {Array} data
|
|
|
|
* @param {String} issueFailMessage
|
|
|
|
*/
|
2019-05-02 10:49:16 -04:00
|
|
|
updateTopState(
|
|
|
|
isClosed,
|
|
|
|
data,
|
|
|
|
issueFailMessage = __('Unable to update this issue at this time.'),
|
|
|
|
) {
|
2018-02-09 12:07:20 -05:00
|
|
|
if ('id' in data) {
|
|
|
|
const isClosedBadge = $('div.status-box-issue-closed');
|
|
|
|
const isOpenBadge = $('div.status-box-open');
|
|
|
|
const projectIssuesCounter = $('.issue_counter');
|
|
|
|
|
|
|
|
isClosedBadge.toggleClass('hidden', !isClosed);
|
|
|
|
isOpenBadge.toggleClass('hidden', isClosed);
|
|
|
|
|
|
|
|
$(document).trigger('issuable:change', isClosed);
|
|
|
|
this.toggleCloseReopenButton(isClosed);
|
|
|
|
|
2018-10-10 03:13:34 -04:00
|
|
|
let numProjectIssues = Number(
|
|
|
|
projectIssuesCounter
|
|
|
|
.first()
|
|
|
|
.text()
|
|
|
|
.trim()
|
|
|
|
.replace(/[^\d]/, ''),
|
|
|
|
);
|
2018-02-09 12:07:20 -05:00
|
|
|
numProjectIssues = isClosed ? numProjectIssues - 1 : numProjectIssues + 1;
|
|
|
|
projectIssuesCounter.text(addDelimiter(numProjectIssues));
|
|
|
|
|
|
|
|
if (this.createMergeRequestDropdown) {
|
|
|
|
if (isClosed) {
|
|
|
|
this.createMergeRequestDropdown.unavailable();
|
|
|
|
this.createMergeRequestDropdown.disable();
|
|
|
|
} else {
|
|
|
|
// We should check in case a branch was created in another tab
|
|
|
|
this.createMergeRequestDropdown.checkAbilityToCreateBranch();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
flash(issueFailMessage);
|
|
|
|
}
|
2017-03-01 14:54:04 -05:00
|
|
|
}
|
2016-07-24 16:45:11 -04:00
|
|
|
|
2017-05-04 04:09:21 -04:00
|
|
|
initIssueBtnEventListeners() {
|
2019-05-02 10:49:16 -04:00
|
|
|
const issueFailMessage = __('Unable to update this issue at this time.');
|
2017-04-12 15:40:35 -04:00
|
|
|
|
2020-05-29 02:08:16 -04:00
|
|
|
// NOTE: data attribute seems unnecessary but is actually necessary
|
|
|
|
return $('.js-issuable-buttons[data-action="close-reopen"]').on(
|
2018-10-10 03:13:34 -04:00
|
|
|
'click',
|
2020-06-23 05:08:47 -04:00
|
|
|
'.btn-close, .btn-reopen, .btn-close-anyway',
|
2018-10-10 03:13:34 -04:00
|
|
|
e => {
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopImmediatePropagation();
|
2019-11-15 07:06:12 -05:00
|
|
|
const $button = $(e.currentTarget);
|
|
|
|
const shouldSubmit = $button.hasClass('btn-comment');
|
2018-10-10 03:13:34 -04:00
|
|
|
if (shouldSubmit) {
|
|
|
|
Issue.submitNoteForm($button.closest('form'));
|
|
|
|
}
|
2017-06-07 06:18:35 -04:00
|
|
|
|
2020-04-21 11:21:10 -04:00
|
|
|
const shouldDisplayBlockedWarning = $button.hasClass('btn-issue-blocked');
|
|
|
|
const warningBanner = $('.js-close-blocked-issue-warning');
|
|
|
|
if (shouldDisplayBlockedWarning) {
|
|
|
|
this.toggleWarningAndCloseButton();
|
|
|
|
} else {
|
|
|
|
this.disableCloseReopenButton($button);
|
|
|
|
|
2020-06-23 05:08:47 -04:00
|
|
|
const url = $button.data('endpoint');
|
2020-05-27 17:08:05 -04:00
|
|
|
|
2020-04-21 11:21:10 -04:00
|
|
|
return axios
|
|
|
|
.put(url)
|
|
|
|
.then(({ data }) => {
|
|
|
|
const isClosed = $button.is('.btn-close, .btn-close-anyway');
|
|
|
|
this.updateTopState(isClosed, data);
|
|
|
|
if ($button.hasClass('btn-close-anyway')) {
|
|
|
|
warningBanner.addClass('hidden');
|
|
|
|
if (this.closeReopenReportToggle)
|
|
|
|
$('.js-issuable-close-dropdown').removeClass('hidden');
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(() => flash(issueFailMessage))
|
|
|
|
.then(() => {
|
|
|
|
this.disableCloseReopenButton($button, false);
|
|
|
|
});
|
|
|
|
}
|
2018-10-10 03:13:34 -04:00
|
|
|
},
|
|
|
|
);
|
2017-03-01 14:54:04 -05:00
|
|
|
}
|
2016-07-24 16:45:11 -04:00
|
|
|
|
2017-06-07 06:18:35 -04:00
|
|
|
initCloseReopenReport() {
|
2017-07-07 11:04:43 -04:00
|
|
|
this.closeReopenReportToggle = IssuablesHelper.initCloseReopenReport();
|
2017-06-07 06:18:35 -04:00
|
|
|
|
2017-07-07 11:04:43 -04:00
|
|
|
if (this.closeButtons) this.closeButtons = this.closeButtons.not('.issuable-close-button');
|
|
|
|
if (this.reopenButtons) this.reopenButtons = this.reopenButtons.not('.issuable-close-button');
|
2017-06-07 06:18:35 -04:00
|
|
|
}
|
|
|
|
|
2017-07-03 12:00:59 -04:00
|
|
|
disableCloseReopenButton($button, shouldDisable) {
|
|
|
|
if (this.closeReopenReportToggle) {
|
|
|
|
this.closeReopenReportToggle.setDisable(shouldDisable);
|
|
|
|
} else {
|
|
|
|
$button.prop('disabled', shouldDisable);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleCloseReopenButton(isClosed) {
|
2017-07-07 09:51:34 -04:00
|
|
|
if (this.closeReopenReportToggle) this.closeReopenReportToggle.updateButton(isClosed);
|
|
|
|
this.closeButtons.toggleClass('hidden', isClosed);
|
|
|
|
this.reopenButtons.toggleClass('hidden', !isClosed);
|
2017-07-03 12:00:59 -04:00
|
|
|
}
|
|
|
|
|
2020-04-21 11:21:10 -04:00
|
|
|
toggleWarningAndCloseButton() {
|
|
|
|
const warningBanner = $('.js-close-blocked-issue-warning');
|
|
|
|
warningBanner.toggleClass('hidden');
|
|
|
|
$('.btn-close').toggleClass('hidden');
|
|
|
|
if (this.closeReopenReportToggle) {
|
|
|
|
$('.js-issuable-close-dropdown').toggleClass('hidden');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
initIssueWarningBtnEventListener() {
|
|
|
|
return $(document).on('click', '.js-close-blocked-issue-warning button.btn-secondary', e => {
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopImmediatePropagation();
|
|
|
|
this.toggleWarningAndCloseButton();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-05-27 08:08:19 -04:00
|
|
|
initIssueMovedFromServiceDeskDismissHandler() {
|
|
|
|
const alertMovedFromServiceDeskWarning = $('.js-alert-moved-from-service-desk-warning');
|
|
|
|
|
|
|
|
if (!localStorage.getItem(this.alertMovedFromServiceDeskDismissedKey)) {
|
|
|
|
alertMovedFromServiceDeskWarning.show();
|
|
|
|
}
|
|
|
|
|
|
|
|
alertMovedFromServiceDeskWarning.on('click', '.js-close', e => {
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopImmediatePropagation();
|
|
|
|
alertMovedFromServiceDeskWarning.remove();
|
|
|
|
localStorage.setItem(this.alertMovedFromServiceDeskDismissedKey, true);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-03-01 14:54:04 -05:00
|
|
|
static submitNoteForm(form) {
|
2019-11-15 07:06:12 -05:00
|
|
|
const noteText = form.find('textarea.js-note-text').val();
|
2017-07-11 18:35:07 -04:00
|
|
|
if (noteText && noteText.trim().length > 0) {
|
2017-03-01 14:54:04 -05:00
|
|
|
return form.submit();
|
|
|
|
}
|
|
|
|
}
|
2016-07-24 16:45:11 -04:00
|
|
|
|
2017-03-01 14:54:04 -05:00
|
|
|
static initRelatedBranches() {
|
2019-11-15 07:06:12 -05:00
|
|
|
const $container = $('#related-branches');
|
2018-10-10 03:13:34 -04:00
|
|
|
return axios
|
|
|
|
.get($container.data('url'))
|
2018-01-30 09:53:28 -05:00
|
|
|
.then(({ data }) => {
|
|
|
|
if ('html' in data) {
|
|
|
|
$container.html(data.html);
|
|
|
|
}
|
2018-10-10 03:13:34 -04:00
|
|
|
})
|
2019-05-02 10:49:16 -04:00
|
|
|
.catch(() => flash(__('Failed to load related branches')));
|
2017-03-01 14:54:04 -05:00
|
|
|
}
|
|
|
|
}
|