1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
import $ from 'jquery';
import { joinPaths } from '~/lib/utils/url_utility';
import CreateMergeRequestDropdown from './create_merge_request_dropdown';
import { deprecatedCreateFlash as flash } from './flash';
import { EVENT_ISSUABLE_VUE_APP_CHANGE } from './issuable/constants';
import axios from './lib/utils/axios_utils';
import { addDelimiter } from './lib/utils/text_utility';
import { __ } from './locale';
export default class Issue {
constructor() {
if ($('.js-alert-moved-from-service-desk-warning').length) {
Issue.initIssueMovedFromServiceDeskDismissHandler();
}
if (document.querySelector('#related-branches')) {
Issue.initRelatedBranches();
}
Issue.createMrDropdownWrap = document.querySelector('.create-mr-dropdown-wrap');
if (Issue.createMrDropdownWrap) {
this.createMergeRequestDropdown = new CreateMergeRequestDropdown(Issue.createMrDropdownWrap);
}
// Listen to state changes in the Vue app
this.issuableVueAppChangeHandler = (event) =>
this.updateTopState(event.detail.isClosed, event.detail.data);
document.addEventListener(EVENT_ISSUABLE_VUE_APP_CHANGE, this.issuableVueAppChangeHandler);
}
dispose() {
document.removeEventListener(EVENT_ISSUABLE_VUE_APP_CHANGE, this.issuableVueAppChangeHandler);
}
/**
* 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
*/
updateTopState(
isClosed,
data,
issueFailMessage = __('Unable to update this issue at this time.'),
) {
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);
let numProjectIssues = Number(
projectIssuesCounter.first().text().trim().replace(/[^\d]/, ''),
);
numProjectIssues = isClosed ? numProjectIssues - 1 : numProjectIssues + 1;
projectIssuesCounter.text(addDelimiter(numProjectIssues));
if (this.createMergeRequestDropdown) {
this.createMergeRequestDropdown.checkAbilityToCreateBranch();
}
} else {
flash(issueFailMessage);
}
}
static initIssueMovedFromServiceDeskDismissHandler() {
const alertMovedFromServiceDeskWarning = $('.js-alert-moved-from-service-desk-warning');
const trimmedPathname = window.location.pathname.slice(1);
const alertMovedFromServiceDeskDismissedKey = joinPaths(
trimmedPathname,
'alert-issue-moved-from-service-desk-dismissed',
);
if (!localStorage.getItem(alertMovedFromServiceDeskDismissedKey)) {
alertMovedFromServiceDeskWarning.show();
}
alertMovedFromServiceDeskWarning.on('click', '.js-close', (e) => {
e.preventDefault();
e.stopImmediatePropagation();
alertMovedFromServiceDeskWarning.remove();
localStorage.setItem(alertMovedFromServiceDeskDismissedKey, true);
});
}
static initRelatedBranches() {
const $container = $('#related-branches');
axios
.get($container.data('url'))
.then(({ data }) => {
if ('html' in data) {
$container.html(data.html);
}
})
.catch(() => flash(__('Failed to load related branches')));
}
}
|
