summaryrefslogtreecommitdiffstats
path: root/extensions/FlagTypeComment
diff options
context:
space:
mode:
authorKohei Yoshino <kohei.yoshino@gmail.com>2018-09-26 17:29:19 +0200
committerDylan William Hardison <dylan@hardison.net>2018-09-26 17:29:19 +0200
commit291bb971595489070ed8db3da1785f5a3977a15a (patch)
treeaabee50d9dccacb21cf57dce1a23dce586079e64 /extensions/FlagTypeComment
parentdeec4ab75d6478f51d6c72a230343ab955116a6b (diff)
downloadbugzilla-291bb971595489070ed8db3da1785f5a3977a15a.tar.gz
bugzilla-291bb971595489070ed8db3da1785f5a3977a15a.tar.xz
Bug 1489718 - Insert form widgets for approval flag requests instead of free-form comment text
Diffstat (limited to 'extensions/FlagTypeComment')
-rw-r--r--extensions/FlagTypeComment/template/en/default/flag/type_comment.html.tmpl40
-rw-r--r--extensions/FlagTypeComment/web/js/ftc.js189
-rw-r--r--extensions/FlagTypeComment/web/styles/ftc.css58
3 files changed, 258 insertions, 29 deletions
diff --git a/extensions/FlagTypeComment/template/en/default/flag/type_comment.html.tmpl b/extensions/FlagTypeComment/template/en/default/flag/type_comment.html.tmpl
index 88d9d4dd7..56e03040a 100644
--- a/extensions/FlagTypeComment/template/en/default/flag/type_comment.html.tmpl
+++ b/extensions/FlagTypeComment/template/en/default/flag/type_comment.html.tmpl
@@ -20,35 +20,17 @@
# byron jones <glob@mozilla.com>
#%]
-[% IF ftc_flags.keys.size %]
- <script [% script_nonce FILTER none %]>
- YAHOO.util.Event.onDOMReady(function() {
- var selects = YAHOO.util.Dom.getElementsByClassName('flag_select');
- for (var i = 0; i < selects.length; i++) {
- YAHOO.util.Event.on(selects[i], 'change', ftc_on_change);
- }
- });
+<link rel="stylesheet" href="extensions/FlagTypeComment/web/styles/ftc.css">
+<script [% script_nonce FILTER none %] src="extensions/FlagTypeComment/web/js/ftc.js"></script>
- function ftc_on_change(ev) {
- var id = ev.target.id.split('-')[1];
- var state = ev.target.value;
- var commentEl = document.getElementById('comment');
- if (!commentEl) return;
- [% FOREACH type_id = ftc_flags.keys %]
- [% FOREACH state = ftc_states %]
- if ([% type_id FILTER none %] == id && '[% state FILTER js %]' == state) {
- var text = '[% ftc_flags.$type_id.$state FILTER js %]';
- var value = commentEl.value;
- if (value == text) {
- return;
- } else if (value == '') {
- commentEl.value = text;
- } else {
- commentEl.value = text + "\n\n" + value;
- }
- }
- [% END %]
+[% IF ftc_flags.keys.size %]
+ [%# plaintext templates from database %]
+ [% FOREACH type_id = ftc_flags.keys %]
+ [% FOREACH state = ftc_states %]
+ <meta name="ftc:[% type_id FILTER none %]:[% state FILTER html %]"
+ content="[% ftc_flags.$type_id.$state FILTER html_linebreak %]">
[% END %]
- }
- </script>
+ [% END %]
+ [%# HTML form templates from extensions %]
+ [% Hook.process("form") %]
[% END %]
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());
diff --git a/extensions/FlagTypeComment/web/styles/ftc.css b/extensions/FlagTypeComment/web/styles/ftc.css
new file mode 100644
index 000000000..93d190935
--- /dev/null
+++ b/extensions/FlagTypeComment/web/styles/ftc.css
@@ -0,0 +1,58 @@
+/* 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. */
+
+fieldset.approval-request {
+ margin: 1em 0;
+}
+
+fieldset.approval-request legend {
+ font-weight: bold;
+}
+
+fieldset.approval-request th {
+ padding: .4em;
+ width: 20em;
+ line-height: 1.25;
+ font-weight: normal;
+ text-align: right;
+ vertical-align: top;
+ white-space: normal !important;
+}
+
+fieldset.approval-request td {
+ vertical-align: middle;
+}
+
+fieldset.approval-request label {
+ font-weight: normal !important;
+}
+
+fieldset.approval-request input[type="text"] {
+ width: 10em;
+}
+
+fieldset.approval-request input.long[type="text"] {
+ width: 40em;
+}
+
+fieldset.approval-request textarea {
+ width: 40em;
+ min-height: 5em;
+ font-size: inherit;
+ line-height: inherit;
+ font-family: inherit;
+ resize: vertical;
+}
+
+fieldset.approval-request div {
+ padding: 0 !important;
+}
+
+fieldset.approval-request table ~ p:last-child {
+ margin: .4em;
+ text-align: right;
+}