Bug 1151745: add ui to minimise steps required to move bugs between products

2 files changed, 42 insertions, 22 deletions

diff --git a/extensions/ProdCompSearch/template/en/default/prodcompsearch/form.html.tmpl b/extensions/ProdCompSearch/template/en/default/prodcompsearch/form.html.tmpl
index 4239a9738..39919510c 100644
--- a/extensions/ProdCompSearch/template/en/default/prodcompsearch/form.html.tmpl
+++ b/extensions/ProdCompSearch/template/en/default/prodcompsearch/form.html.tmpl
@@ -8,24 +8,28 @@
 
 [%#
   # parameters (all are optional, defaults below)
-  # id               : id and prefix of elements
-  # script_name      : .cgi to redirect to
-  # max_results      : maximum results displayed
-  # input_label      : input field label
-  # auto_focus       : focus the search form on page load
-  # format           : format parameter passed to cgi
-  # cloned_bug_id    : cloned_bug_id parameter
-  # new_tab          : open in a new tab
-  # anchor_component : append #component to url
+  # id:               id and prefix of elements
+  # script_name:      .cgi to redirect to
+  # max_results:      maximum results displayed
+  # input_label:      input field label
+  # auto_focus:       focus the search form on page load
+  # format:           format parameter passed to cgi
+  # cloned_bug_id:    cloned_bug_id parameter
+  # new_tab:          open in a new tab
+  # anchor_component: append #component to url
+  # custom_select:    when true don't manage menu-item selects
+  # hidden:           initialise container as display:none
+  # throbber:         id of the throbber element
   #%]
 
 [%
-  DEFAULT id = "pcs";
+  DEFAULT id          = "pcs";
   DEFAULT max_results = 100;
   DEFAULT script_name = "enter_bug.cgi";
+  DEFAULT throbber    = id _ "-throbber";
 %]
 
-<div class="pcs-form">
+<div class="pcs-form" [%= 'style="display:none"' IF hidden %]>
   <div class="pcs-header">
     [% input_label FILTER none %]&nbsp;
     <img id="[% id FILTER html %]-throbber"
@@ -42,12 +46,14 @@
     </span>
   </div>
   <input type="text" class="prod_comp_search" id="[% id FILTER html %]" size="50"
-    placeholder="Search by product and component keywords"
+    placeholder="Search by product and component"
     data-script_name="[% script_name FILTER html %]"
     data-format="[% format FILTER html %]"
     data-cloned_bug_id="[% cloned_bug_id FILTER html %]"
     data-new_tab="[% new_tab ? "1" : "0" %]"
     data-anchor_component="[% anchor_component ? "1" : "0" %]"
     data-max_results="[% max_results FILTER html %]"
+    data-ignore-select="[% custom_select ? "1" : "0" %]"
+    data-throbber="[% throbber FILTER html %]"
     [% "autofocus" IF auto_focus %]>
 </div>
diff --git a/extensions/ProdCompSearch/web/js/prod_comp_search.js b/extensions/ProdCompSearch/web/js/prod_comp_search.js
index ae7353779..2c9516967 100644
--- a/extensions/ProdCompSearch/web/js/prod_comp_search.js
+++ b/extensions/ProdCompSearch/web/js/prod_comp_search.js
@@ -14,8 +14,10 @@ $(function() {
         delay: 500,
         source: function(request, response) {
             var el = this.element;
+            $(document).trigger('pcs:search', [ el ]);
             var id = '#' + el.prop('id');
-            $(id + '-throbber').show();
+            var throbber = $('#' + $(el).data('throbber'));
+            throbber.show();
             $(id + '-no_components').hide();
             $(id + '-too_many_components').hide();
             $(id + '-error').hide();
@@ -29,17 +31,22 @@ $(function() {
                 contentType: 'application/json'
             })
             .done(function(data) {
-                $(id + '-throbber').hide();
+                throbber.hide();
                 if (data.error) {
                     $(id + '-error').show();
                     console.log(data.message);
                     return false;
                 }
                 if (data.products.length === 0) {
-                    $(id + '-no_components').show();
+                    $(id + '-no_results').show();
+                    $(document).trigger('pcs:no_results', [ el ]);
                 }
                 else if (data.products.length > el.data('max_results')) {
-                    $(id + '-too_many_components').show();
+                    $(id + '-too_many_results').show();
+                    $(document).trigger('pcs:too_many_results', [ el ]);
+                }
+                else {
+                    $(document).trigger('pcs:results', [ el, data ]);
                 }
                 var current_product = "";
                 var prod_comp_array = [];
@@ -55,8 +62,9 @@ $(function() {
                     params.push('product=' + encodeURIComponent(this.product));
                     if (this.product != current_product) {
                         prod_comp_array.push({
-                            label: this.product,
-                            url: el.data('script_name') + '?' + params.join('&')
+                            label:   this.product,
+                            product: this.product,
+                            url:     el.data('script_name') + '?' + params.join('&')
                         });
                         current_product = this.product;
                     }
@@ -66,18 +74,21 @@ $(function() {
                         url += "#" + encodeURIComponent(this.component);
                     }
                     prod_comp_array.push({
-                        label: this.product + ' :: ' + this.component,
-                        url: url
+                        label:     this.product + ' :: ' + this.component,
+                        product:   this.product,
+                        component: this.component,
+                        url:       url
                     });
                 });
                 response(prod_comp_array);
             })
             .fail(function(xhr, error_text) {
-                if (xhr.responseJSON.error) {
+                if (xhr.responseJSON && xhr.responseJSON.error) {
                     error_text = xhr.responseJSON.message;
                 }
-                $(id + '-throbber').hide();
+                throbber.hide();
                 $(id + '-comp_error').show();
+                $(document).trigger('pcs:error', [ el, error_text ]);
                 console.log(error_text);
             });
         },
@@ -88,6 +99,9 @@ $(function() {
             event.preventDefault();
             var el = $(this);
             el.val(ui.item.label);
+            if (el.data('ignore-select')) {
+                return;
+            }
             if (el.data('new_tab')) {
                 window.open(ui.item.url, '_blank');
             }