Bug 1365344 - Extract the "status" and "null" modules (#101)

* Added comp_desc, ajax loading, modified rest

* Make summary field long

* Fixed indentations

4 files changed, 179 insertions, 86 deletions

diff --git a/extensions/BugModal/lib/WebService.pm b/extensions/BugModal/lib/WebService.pm
index a7026288c..556a2d7cc 100644
--- a/extensions/BugModal/lib/WebService.pm
+++ b/extensions/BugModal/lib/WebService.pm
@@ -96,9 +96,10 @@ sub components {
         ThrowCodeError( 'params_required',
             { function => 'BugModal.components', params => ['product'] } );
     }
-    my $product = Bugzilla::Product->check( { name => $params->{product_name}, cache => 1 } );
-    $product = Bugzilla->user->can_enter_product( $product, 1 );
-    return { components => _name( $product->components ) };
+    my $product = Bugzilla::Product->check({ name => $params->{product_name}, cache => 1 });
+    $product = Bugzilla->user->can_enter_product($product, 1);
+    my @components = map { { name => $_->name, description => Bugzilla::Component->check({ product => $product, name => $_->name })->description} } @{ $product->components };
+    return { components => \@components }
 }
 
 # everything we need for edit mode in a single call, returning just the fields
diff --git a/extensions/BugModal/web/common_bug_modal.js b/extensions/BugModal/web/common_bug_modal.js
index 3a5a149fb..1a2d309bb 100644
--- a/extensions/BugModal/web/common_bug_modal.js
+++ b/extensions/BugModal/web/common_bug_modal.js
@@ -1079,88 +1079,6 @@ $(function() {
     $('#component, #version, #target_milestone').each(function() {
         $(this).data('default', $(this).val());
     });
-    $('#product')
-        .change(function(event) {
-            $('#product-throbber').show();
-            $('#component, #version, #target_milestone').attr('disabled', true);
-
-            slide_module($('#module-tracking'), 'show');
-
-            $.each($('input[name=groups]'), function() {
-                if (this.checked) {
-                    slide_module($('#module-security'), 'show');
-                    return false;
-                }
-            });
-
-            bugzilla_ajax(
-                {
-                    url: 'rest/bug_modal/new_product/' + BUGZILLA.bug_id + '?product=' + encodeURIComponent($('#product').val())
-                },
-                function(data) {
-                    $('#product-throbber').hide();
-                    $('#component, #version, #target_milestone').attr('disabled', false);
-                    var is_default = $('#product').val() == $('#product').data('default');
-
-                    // populate selects
-                    $.each(data, function(key, value) {
-                        if (key == 'groups') return;
-                        var el = $('#' + key);
-                        if (!el) return;
-                        el.empty();
-                        var selected = el.data('preselect');
-                        $(value).each(function(i, v) {
-                            el.append($('<option>', { value: v.name, text: v.name }));
-                            if (typeof selected === 'undefined' && v.selected)
-                                selected = v.name;
-                        });
-                        el.val(selected);
-                        el.prop('required', true);
-                        if (is_default) {
-                            el.removeClass('attention');
-                            el.val(el.data('default'));
-                        }
-                        else {
-                            el.addClass('attention');
-                        }
-                    });
-
-                    // update groups
-                    var dirtyGroups = [];
-                    var any_groups_checked = 0;
-                    $('#module-security').find('input[name=groups]').each(function() {
-                        var that = $(this);
-                        var defaultChecked = !!that.attr('checked');
-                        if (defaultChecked !== that.is(':checked')) {
-                            dirtyGroups.push({ name: that.val(), value: that.is(':checked') });
-                        }
-                        if (that.is(':checked')) {
-                            any_groups_checked = 1;
-                        }
-                    });
-                    $('#module-security .module-content')
-                        .html(data.groups)
-                        .addClass('attention');
-                    $.each(dirtyGroups, function() {
-                        $('#module-security').find('input[value=' + this.name + ']').prop('checked', this.value);
-                    });
-                    // clear any default groups if user was making bug public
-                    // unless the group is mandatory for the new product
-                    if (!any_groups_checked) {
-                        $('#module-security').find('input[name=groups]').each(function() {
-                            var that = $(this);
-                            if (!that.data('mandatory')) {
-                                that.prop('checked', false);
-                            }
-                        });
-                    }
-                },
-                function() {
-                    $('#product-throbber').hide();
-                    $('#component, #version, #target_milestone').attr('disabled', false);
-                }
-            );
-        });
 
     // product/component search
     $('#product-search')
diff --git a/extensions/BugModal/web/new_bug.js b/extensions/BugModal/web/new_bug.js
new file mode 100644
index 000000000..cd1b16453
--- /dev/null
+++ b/extensions/BugModal/web/new_bug.js
@@ -0,0 +1,48 @@
+$(document).ready(function() {
+    bugzilla_ajax(
+            {
+                url: 'rest/bug_modal/products'
+            },
+            function(data) {
+                $('#product').empty()
+                $('#product').append($('<option>', { value: 'Select Product', text: 'Select Product' }));
+                // populate select menus
+                $.each(data.products, function(key, value) {
+                    $('#product').append($('<option>', { value: value.name, text: value.name }));
+                });
+            },
+            function() {}
+        );
+
+    $('#component').empty()
+    $('#component').append($('<option>', { value: 'Select Component', text: 'Select Component' }));
+
+    $('#product')
+    .change(function(event) {
+        $('#product-throbber').show();
+        $('#component').attr('disabled', true);
+        $("#product option[value='Select Product']").remove();
+        bugzilla_ajax(
+            {
+                url: 'rest/bug_modal/components?product=' + encodeURIComponent($('#product').val())
+            },
+            function(data) {
+                $('#product-throbber').hide();
+                $('#component').attr('disabled', false);
+                $('#component').empty();
+                $('#component').append($('<option>', { value: 'Select Component', text: 'Select Component' }));
+                $('#comp_desc').text('Select a component to read its description.');
+                $.each(data.components, function(key, value) {  
+                    $('#component').append('<option value=' + value.name + ' desc=' + value.description.split(' ').join('_') + '>' + value.name + '</option>');
+                });
+            },
+            function() {}
+        );
+    });
+    $('#component')
+    .change(function(event) {
+        $("#component option[value='Select Product']").remove();
+        $('#comp_desc').text($('#component').find(":selected").attr('desc').split('_').join(' '));
+    });
+    
+});
diff --git a/template/en/default/bug/new_bug.html.tmpl b/template/en/default/bug/new_bug.html.tmpl
index 96ec7d8d3..dc64a9678 100644
--- a/template/en/default/bug/new_bug.html.tmpl
+++ b/template/en/default/bug/new_bug.html.tmpl
@@ -8,11 +8,137 @@
 [% PROCESS global/variables.none.tmpl %]
 [% title = BLOCK %]Enter [% terms.Bug %] [% END %]
 [% PROCESS bug_modal/common_header.html.tmpl 
-title = title
+    title = title
+    javascript_urls = ['extensions/BugModal/web/new_bug.js']
 %]
 [% PROCESS global/header.html.tmpl %]
 <p>Coming Soon!</p>
 <p>This is a demonstration of a reusable comment component</p>
+
+[% WRAPPER bug_modal/module.html.tmpl
+    title = ""
+%]
+    <div id="summary-container">
+    [%# summary %]
+    [% INCLUDE bug_modal/field.html.tmpl
+        field = bug_fields.short_desc
+        field_type = constants.FIELD_TYPE_FREETEXT
+        edit_only = 1
+        editable = 1
+        help = "https://wiki.mozilla.org/BMO/UserGuide/BugFields#short_desc"
+    %]
+    
+  </div>
+  <div id="mode-container">
+    <div id="user-guide">
+      <a title="User guide for [% terms.Bugzilla %]" href="#">Get help with this page</a>
+    </div>
+  </div>
+[%END%]
+
+
+[%# === status === %]
+
+[% WRAPPER bug_modal/module.html.tmpl
+    title = "Status"
+%]
+  [% WRAPPER fields_lhs %]
+
+    [%# product %]
+    [% can_edit_product   = bug.check_can_change_field("product", 0, 1) %]
+    [% filtered_product   = bug.product_obj.name FILTER uri %]
+    [% filtered_component = bug.component_obj.name FILTER uri %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        field        = bug_fields.product
+        field_type   = constants.FIELD_TYPE_SINGLE_SELECT
+        edit_only = 1
+        editable = 1
+        help         = "describecomponents.cgi?product=$filtered_product"
+    %]
+      <span aria-owns="product-name product-latch">
+        <span role="button" aria-label="show product information" aria-expanded="false" tabindex="0"
+              class="spin-latch" id="product-latch" data-latch="product" data-for="product">&#9656;</span>
+        <div title="show product information" tabindex="0" class="spin-toggle"
+             id="product-name" data-latch="product" data-for="product">
+          [% bug.product FILTER html %]
+        </div>
+        <div id="product-info" style="display:none">
+          [% bug.product_obj.description FILTER html_light %]
+        </div>
+      </span>
+    [% END %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        field          = bug_fields.product
+        field_type     = constants.FIELD_TYPE_SINGLE_SELECT
+        hide_on_view   = 1
+        hide_on_edit   = !can_edit_product
+        append_content = 1
+        help           = "describecomponents.cgi?product=$filtered_product"
+    %]
+      <span id="product-search-container">
+        [% INCLUDE prodcompsearch/form.html.tmpl
+            id            = "pcs"
+            custom_select = 1
+            hidden        = 1
+            throbber      = "product-throbber"
+        %]
+        <button id="product-search" type="button" class="minor">Search</button>
+        <button id="product-search-cancel" type="button" class="minor" style="display:none">X</button>
+        <img id="product-throbber" src="extensions/BugModal/web/throbber.gif"
+          width="16" height="11" style="display:none">
+        <img id="product-search-error" class="tt" src="extensions/BugModal/web/error.png"
+          width="16" height="16" style="display:none">
+      </span>
+    [% END %]
+
+    [%# component %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        field      = bug_fields.component
+        field_type = constants.FIELD_TYPE_SINGLE_SELECT
+        help       = "describecomponents.cgi?product=$filtered_product&component=$filtered_component#$filtered_component"
+        edit_only = 1
+        editable = 1
+    %]
+      <span aria-owns="component-name component-latch">
+        <span role="button" aria-label="show component description" aria-expanded="false" tabindex="0"
+              class="spin-latch" id="component-latch" data-latch="component" data-for="component">&#9656;</span>
+        <div title="show component information" tabindex="0" class="spin-toggle" id="component-name"
+             data-latch="#component-latch" data-for="component">
+            [% bug.component FILTER html %]
+        </div>
+        <div id="component-info" style="display:none">
+          <div>[% bug.component_obj.description FILTER html_light %]</div>
+          <a href="buglist.cgi?component=[% bug.component FILTER uri %]&amp;
+                  [%~ %]product=[% bug.product FILTER uri %]&amp;
+                  [%~ %]bug_status=__open__" target="_blank">Other [% terms.Bugs %]</a>
+        </div>
+      </span>
+    [% END %]
+  [% END %]
+  [% WRAPPER fields_rhs %]
+  <td colspan="2" id="comp_desc_container">
+    <table>
+        <tr>
+          <td>
+            <fieldset>
+              <legend>Component Description</legend>
+              <div id="comp_desc" class="comment">Select a component to read its description.</div>
+            </fieldset>
+          </td>
+        </tr>
+      </table>
+    </td>
+  [% END %]
+[% END %]
+
+[% BLOCK fields_lhs %]
+  <div class="fields-lhs">[% content FILTER none %]</div>
+[% END %]
+
+[% BLOCK fields_rhs %]
+  <div class="fields-rhs">[% content FILTER none %]</div>
+[% END %]
+
 [%
     IF user.id;
       INCLUDE bug_modal/common_new_comment.html.tmpl;