import $ from 'jquery'; import { joinPaths } from '~/lib/utils/url_utility'; import { createAlert } from '~/alert'; 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'; import CreateMergeRequestDropdown from './create_merge_request_dropdown'; 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 = $('.issuable-status-badge-closed'); const isOpenBadge = $('.issuable-status-badge-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 { createAlert({ message: 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(() => createAlert({ message: __('Failed to load related branches'), }), ); } }