diff options
Diffstat (limited to 'extensions/FlagTypeComment/web/js/ftc.js')
| -rw-r--r-- | extensions/FlagTypeComment/web/js/ftc.js | 189 |
1 files changed, 189 insertions, 0 deletions
diff --git a/extensions/FlagTypeComment/web/js/ftc.js b/extensions/FlagTypeComment/web/js/ftc.js new file mode 100644 index 000000000..2682721bc --- /dev/null +++ b/extensions/FlagTypeComment/web/js/ftc.js @@ -0,0 +1,189 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. + * + * This Source Code Form is "Incompatible With Secondary Licenses", as + * defined by the Mozilla Public License, v. 2.0. */ + +/** + * Reference or define the Bugzilla app namespace. + * @namespace + */ +var Bugzilla = Bugzilla || {}; // eslint-disable-line no-var + +/** + * Provide the ability to insert a comment template when a patch's approval flag is selected. + */ +Bugzilla.FlagTypeComment = class FlagTypeComment { + /** + * Initialize a new FlagTypeComment instance. + */ + constructor() { + this.templates = [...document.querySelectorAll('template.approval-request')]; + this.$flags = document.querySelector('#flags'); + this.$comment = document.querySelector('#comment'); + + if (this.$flags && this.$comment) { + this.selects = [...this.$flags.querySelectorAll('.flag_select')]; + this.selects.forEach($select => $select.addEventListener('change', () => this.flag_onselect($select))); + this.$comment.form.addEventListener('submit', () => this.form_onsubmit()); + } + } + + /** + * Check if a `<fieldset>` is compatible with the given flag. For example, `approval‑mozilla‑beta` matches + * `<fieldset data-flags="approval‑mozilla‑beta approval‑mozilla‑release">` while `approval‑mozilla‑esr60` + * matches `<fieldset data-flags="approval‑mozilla‑esr*">`. + * @param {String} name Flag name, such as `approval‑mozilla‑beta`. + * @param {(HTMLFieldSetElement|HTMLTemplateElement)} $element `<fieldset>` or `<template>` element with the + * `data-flags` attribute which is a space-separated list of flag names (wildcard chars can be used). + * @returns {Boolean} Whether the `<fieldset>` is compatible. + */ + check_compatibility(name, $element) { + return !!$element.dataset.flags.split(' ') + .find(_name => !!name.match(new RegExp(`^${_name.replace('*', '.+')}$`, 'i'))); + } + + /** + * Return a list of temporary `<fieldset>`s already inserted to the current page. + * @type {Array<HTMLFieldSetElement>} + */ + get inserted_fieldsets() { + return [...this.$flags.parentElement.querySelectorAll('fieldset.approval-request')]; + } + + /** + * Find a temporary `<fieldset>` already inserted to the current page by a flag name. + * @param {String} name Flag name, such as `approval‑mozilla‑beta`. + * @returns {HTMLFieldSetElement} Any `<fieldset>` element. + */ + find_inserted_fieldset(name) { + return this.inserted_fieldsets.find($fieldset => this.check_compatibility(name, $fieldset)); + } + + /** + * Find an available `<fieldset>` embedded in HTML by a flag name. + * @param {String} name Flag name, such as `approval‑mozilla‑beta`. + * @returns {HTMLFieldSetElement} Any `<fieldset>` element. + */ + find_available_fieldset(name) { + for (const $template of this.templates) { + if (this.check_compatibility(name, $template)) { + const $fieldset = $template.content.cloneNode(true).querySelector('fieldset'); + + $fieldset.className = 'approval-request'; + $fieldset.dataset.flags = $template.dataset.flags; + + return $fieldset; + } + } + + return null; + } + + /** + * Find a `<select>` element for a requested flag that matches the given `<fieldset>`. + * @param {HTMLFieldSetElement} $fieldset `<fieldset>` element with the `data-flags` attribute. + * @returns {HTMLSelectElement} Any `<select>` element. + */ + find_select($fieldset) { + return this.selects + .find($_select => $_select.value === '?' && this.check_compatibility($_select.dataset.name, $fieldset)); + } + + /** + * Add text to the comment box at the end of any existing comment. + * @param {String} text Comment text to be added. + */ + add_comment(text) { + this.$comment.value = this.$comment.value.match(/\S+/g) ? [this.$comment.value, text].join('\n\n') : text; + } + + /** + * Called whenever a flag selection is changed. Insert or remove a comment template. + * @param {HTMLSelectElement} $select `<select>` element that the `change` event is fired. + */ + flag_onselect($select) { + const id = Number($select.dataset.id); + const { name } = $select.dataset; + const state = $select.value; + let $fieldset = this.find_inserted_fieldset(name); + + // Remove the temporary `<fieldset>` if not required. One `<fieldset>` can support multiple flags, so, for example, + // if `approval‑mozilla‑release` is unselected but `approval‑mozilla‑beta` is still selected, keep it + if (state !== '?' && $fieldset && !this.find_select($fieldset)) { + $fieldset.remove(); + } + + // Insert a temporary `<fieldset>` if available + if (state === '?' && !$fieldset) { + $fieldset = this.find_available_fieldset(name); + + if ($fieldset) { + this.$flags.parentElement.appendChild($fieldset); + } + } + + // Insert a traditional plaintext comment template if available + if (!$fieldset) { + const $meta = document.querySelector(`meta[name="ftc:${id}:${state}"]`); + const text = $meta ? $meta.content : ''; + + if (text && this.$comment.value !== text) { + this.add_comment(text); + } + } + } + + /** + * Convert the input values into comment text and remove the temporary `<fieldset>` before submitting the form. + * @returns {Boolean} Always `true` to allow submitting the form. + */ + form_onsubmit() { + for (const $fieldset of this.inserted_fieldsets) { + const text = [ + `[${$fieldset.querySelector('legend').innerText}]`, + ...[...$fieldset.querySelectorAll('tr')].map($tr => { + const checkboxes = [...$tr.querySelectorAll('input[type="checkbox"]:checked')]; + const $radio = $tr.querySelector('input[type="radio"]:checked'); + const $input = $tr.querySelector('textarea,select,input'); + const label = $tr.querySelector('th').innerText.replace(/\n/g, ' '); + let value = ''; + + if (checkboxes.length) { + value = checkboxes.map($checkbox => $checkbox.value.trim()).join(', '); + } else if ($radio) { + value = $radio.value.trim(); + } else if ($input) { + value = $input.value.trim(); + + if ($input.dataset.type === 'bug') { + if (!value) { + value = 'None'; + } else if (!isNaN(value)) { + value = `Bug ${value}`; + } + } + + if ($input.dataset.type === 'bugs') { + if (!value) { + value = 'None'; + } else { + value = value.split(/,\s*/).map(str => (!isNaN(str) ? `Bug ${str}` : str)).join(', '); + } + } + } + + return `${label}: ${value}`; + }), + ].join('\n\n'); + + this.add_comment(text); + $fieldset.remove(); + } + + return true; + } +}; + +window.addEventListener('DOMContentLoaded', () => new Bugzilla.FlagTypeComment()); |