Provide a collapse icon for multibuild packages

The collapse/uncollapse status is kept for each element between
refreshes of build results.

Also make the clickable area bigger for collapse/uncollapse icons.
These icons were moved to the right.

All these changes contribute to the navigation experience related to
build results.

Co-authored-by: David Kang <dkang@suse.com>

src/api/app/assets/javascripts/webui/buildresult.js

@@ -16,16 +16,23 @@ function updateRpmlintResult(index) { // jshint ignore:line
 }
 
 function updateBuildResult(index) { // jshint ignore:line
-  var elements = {};
+  var collapsedPackages = [];
+  var collapsedRepositories = {};
   $('.result div.collapse:not(.show)').map(function(_index, domElement) {
     var main = $(domElement).data('main') ? $(domElement).data('main') : 'project';
-    if (elements[main] === undefined) { elements[main] = []; }
-    elements[main].push($(domElement).data('repository'));
+    if (collapsedRepositories[main] === undefined) { collapsedRepositories[main] = []; }
+    if ($(domElement).data('repository') === undefined) {
+      collapsedPackages.push(main);
+    }
+    else {
+      collapsedRepositories[main].push($(domElement).data('repository'));
+    }
   });
 
   var ajaxDataShow = $('#buildresult' + index + '-box').data();
   ajaxDataShow.show_all = $('#show_all_'+index).is(':checked'); // jshint ignore:line
-  ajaxDataShow.collapsedRepositories = elements;
+  ajaxDataShow.collapsedPackages = collapsedPackages;
+  ajaxDataShow.collapsedRepositories = collapsedRepositories;
   $('#build'+index+'-reload').addClass('fa-spin');
   $.ajax({
     url: $('#buildresult' + index + '-urls').data('buildresultUrl'),

src/api/app/assets/stylesheets/webui/build-results.scss

@@ -31,6 +31,10 @@
   @extend .text-nowrap;
 }
 
+.build-results {
+  a[data-toggle="collapse"] { width: 1.875rem; }
+}
+
 .build-state-succeeded {
   color: $green;
 }

src/api/app/controllers/webui/package_controller.rb

@@ -739,6 +739,7 @@ def buildresult
       render partial: 'buildstatus', locals: { buildresults: @buildresults,
                                                index: @index,
                                                project: @project,
+                                               collapsed_packages: params.fetch(:collapsedPackages, []),
                                                collapsed_repositories: params.fetch(:collapsedRepositories, {}) }
     else
       render partial: 'no_repositories', locals: { project: @project }

src/api/app/helpers/webui/buildresult_helper.rb

@@ -33,4 +33,17 @@ def repository_expanded?(collapsed_repositories, repository_name, key = 'project
     return collapsed_repositories[key].exclude?(repository_name) if collapsed_repositories[key]
     true
   end
+
+  def collapse_link(expanded, main_name, repository_name = nil)
+    collapse_id = repository_name ? "#{main_name}-#{repository_name}" : main_name
+    collapse_text = repository_name ? 'repository' : 'package'
+
+    link_to('#', aria: { controls: "collapse-#{collapse_id}", expanded: expanded }, class: 'px-2 float-right',
+                 data: { toggle: 'collapse' }, href: ".collapse-#{collapse_id}", role: 'button') do
+      capture do
+        concat(content_tag(:i, nil, class: ['fas', 'fa-chevron-left', 'expander'], title: "Show build results for this #{collapse_text}"))
+        concat(content_tag(:i, nil, class: ['fas', 'fa-chevron-down', 'collapser'], title: "Hide build results for this #{collapse_text}"))
+      end
+    end
+  end
 end

src/api/app/views/webui/package/_buildstatus.html.haml

@@ -7,25 +7,27 @@
       %u.custom-label #{label_message} excluded/disabled results
 
 - buildresults.results.each_pair do |package, results|
-  %h5.text-primary.mt-3.mb-3= package
-  #package-buildstatus
+  :ruby
+    package_name = package.tr('.:', '_')
+    expanded = collapsed_packages.exclude?(package_name)
+  %h5.text-primary.mt-3.mb-3
+    = package
+    - if buildresults.results.count > 1
+      = collapse_link(expanded, package_name)
+  .collapse#package-buildstatus{ class: "collapse-#{package_name}#{expanded ? ' show' : ''}", data: { main: package_name } }
     - if results.present?
       - previous_repo = nil
       - results.each do |result|
         :ruby
           repository_name = result.repository.tr('.', '_')
-          package_name = package.tr('.:', '_')
           expanded = repository_expanded?(collapsed_repositories, repository_name, package_name)
         - if result.repository != previous_repo
           .row.no-gutters.py-1.bg-light
             .col.pl-1.pl-sm-2{ title: result.repository.to_s }
               = link_to(word_break(result.repository, 22),
                 package_binaries_path(project: project, package: package, repository: result.repository),
                 data: { content: "Binaries for #{result.repository}", placement: 'top', toggle: 'popover' })
-              = link_to('#', aria: { controls: "collapse-#{package_name}-#{repository_name}", expanded: expanded }, class: 'ml-1',
-                        data: { toggle: 'collapse' }, href: ".collapse-#{package_name}-#{repository_name}", role: 'button') do
-                %i.fas.fa-chevron-left.expander{ title: 'Show build results for this repository' }
-                %i.fas.fa-chevron-down.collapser{ title: 'Hide build results for this repository' }
+              = collapse_link(expanded, package_name, repository_name)
 
         .collapse{ class: "collapse-#{package_name}-#{repository_name}#{expanded ? ' show' : ''}",
                    data: { repository: repository_name, main: package_name } }

src/api/app/views/webui/project/_buildstatus.html.haml

@@ -21,10 +21,7 @@
           = link_to(word_break(repository, 12),
             project_repository_state_path(project: project.name, repository: repository),
             title: "Repository #{repository}")
-          = link_to('#', aria: { controls: "collapse-project-#{repository_name}", expanded: expanded }, class: 'ml-1',
-                    data: { toggle: 'collapse' }, href: ".collapse-project-#{repository_name}", role: 'button') do
-            %i.fas.fa-chevron-left.expander{ title: 'Show build results for this repository' }
-            %i.fas.fa-chevron-down.collapser{ title: 'Hide build results for this repository' }
+          = collapse_link(expanded, 'project', repository_name)
 
         .collapse{ class: "collapse-project-#{repository_name}#{expanded ? ' show' : ''}", data: { repository: repository_name } }
           - build_results.sort_by(&:architecture).each do |build_result|