Improve new build results view

- Extract build status for architecture to a view component
- Display many results in a row on large viewports and minimize content
  for small ones
- Make help icon bigger but soberer
- Set status color on a left border and remove color from status text
- Sort results following the order given by the constant
Buildresult::AVAIL_STATUS_VALUES in app/models/buildresult.rb.
- Extend the popover trigger area to the whole box

Co-authored-by: Daniel Donisa <daniel.donisa@suse.com>
Co-authored-by: Dario Leidi <dleidi@suse.com>

src/api/app/assets/stylesheets/request_show_redesign/build_results.scss

@@ -0,0 +1,29 @@
+.build-result {
+  // One element per row
+  // The div width is 100% minus the sum of its margins: ml-2 + mr-2 = 0.5rem + 0.5rem = 1rem
+  width: calc(100% - 1rem);
+  border-left: thick solid $gray-300;
+  cursor: help;
+
+  &:hover {
+    background-color: $gray-100;
+  }
+
+  @include media-breakpoint-up(sm) {
+    // Up to 2 elements in a row
+    // The div width is 50% minus the sum of its margins: ml-2 + mr-5 = 0.5rem + 3rem = 3.5rem
+    width: calc(50% - 3.5rem);
+  }
+
+  @include media-breakpoint-up(lg) {
+    // Up to 4 elements in a row
+    // The div width is 25% minus the sum of its margins: ml-2 + mr-5 = 0.5rem + 3rem = 3.5rem
+    width: calc(25% - 3.5rem);
+  }
+
+  @include media-breakpoint-up(xxl) {
+    // Up to 5 elements in a row
+    // The div width is 20% minus the sum of its margins: ml-2 + mr-5 = 0.5rem + 3rem = 3.5rem
+    width: calc(20% - 3.5rem);
+  }
+}

src/api/app/assets/stylesheets/webui/application.scss

@@ -70,6 +70,7 @@
 @import 'new_watchlist/watchlist';
 @import 'timeline';
 @import 'request_show_redesign/add_review';
+@import 'request_show_redesign/build_results';
 
 html {
     overflow-y: scroll !important;

src/api/app/components/build_result_for_architecture_component.html.haml

@@ -0,0 +1,22 @@
+.build-result.p-2.pl-3.my-2.my-sm-4.mx-2.mr-sm-5{ class: "#{status_border_color(result_code)}",
+                                            data: { placement: 'auto',
+                                                    toggle: 'popover',
+                                                    html: 'true',
+                                                    content: help,
+                                                    offset: 50 } }
+  .d-flex.align-items-baseline.mb-2
+    %span.font-weight-bold
+      = result.architecture
+    .build-status.ml-3.d-inline.d-sm-none
+      = build_status_icon_with_link
+    .repository-status.ml-3.d-inline.d-sm-none
+      = repository_status_icon
+    %i.fa-regular.fa-lg.fa-question-circle.text-info.ml-3
+  .build-status.mr-3.d-none.d-sm-block
+    = build_status_icon_with_link
+    %span
+      = build_status
+  .repository-status.d-none.d-sm-block
+    = repository_status_icon
+    %span
+      = result.state

src/api/app/components/build_result_for_architecture_component.rb

@@ -0,0 +1,68 @@
+class BuildResultForArchitectureComponent < ApplicationComponent
+  attr_accessor :result, :project, :package
+
+  def initialize(result, project, package)
+    super
+
+    @result = result
+    @project = project
+    @package = package
+  end
+
+  private
+
+  def result_code
+    result.code
+  end
+
+  def help
+    help = "<p><strong>Package build ( #{build_status_icon} #{result_code} ):</strong> #{build_status_help}</p>"
+    help += "<p><u>Details</u>: #{build_status_details}</p>" if build_status_details.present?
+    help += "<p><strong>Repository status ( #{repository_status_icon} #{result.state} ): </strong>#{repository_status_help}</p>"
+    help
+  end
+
+  def build_status_help
+    Buildresult.status_description(result_code)
+  end
+
+  def build_status_details
+    result.details
+  end
+
+  def repository_status_help
+    result.is_repository_in_db ? helpers.repository_info(result.state) : 'This result is outdated'
+  end
+
+  def build_status_icon_with_link
+    return build_status_icon if result_code.in?(['-', 'unresolvable', 'blocked', 'excluded', 'scheduled'])
+
+    link_to(package_live_build_log_path(project: project.to_s, package: package,
+                                        repository: result.repository, arch: result.architecture), rel: 'nofollow') do
+      capture { build_status_icon }
+    end
+  end
+
+  def build_status_icon
+    tag.i(class: "fa #{helpers.build_status_icon(result_code)} text-gray-500")
+  end
+
+  def repository_status_icon
+    helpers.repository_status_icon(status: result.state)
+  end
+
+  def status_border_color(status)
+    build_result = Buildresult.new(status)
+    return 'border-warning' if build_result.in_progress_status?
+    return 'border-success' if build_result.successful_final_status?
+    return 'border-danger' if build_result.unsuccessful_final_status?
+    return 'border-gray-300' if build_result.refused_status?
+  end
+
+  def build_status
+    return result_code if result_code.in?(['-', 'unresolvable', 'blocked', 'excluded', 'scheduled'])
+
+    link_to(result_code, package_live_build_log_path(project: project.to_s, package: package,
+                                                     repository: result.repository, arch: result.architecture), rel: 'nofollow')
+  end
+end

src/api/app/views/webui/request/beta_show_tabs/_build_results.html.haml

@@ -20,6 +20,7 @@
         From staging project
         = link_to(project, project_show_path(project))
     .result
+      // The content of this div is set by JavaScript which calls the partial ../_build_status.html.haml
 
   :javascript
     updateBuildResultBeta();

src/api/app/views/webui/request/beta_show_tabs/_build_status.html.haml

@@ -9,44 +9,16 @@
   %h5.text-primary.mb-3
     = package
   - if results.present?
-    - results_grouped_by_repository = results.group_by(&:repository)
-    - results_grouped_by_repository.each_pair do |repository, results_per_repository|
+    - results.group_by(&:repository).each_pair do |repository, results_per_repository|
       .row.mb-4
         .col-12
           = link_to(word_break(repository, 22),
             package_binaries_path(project: project, package: package, repository: repository),
             title: "Binaries for #{repository}")
-        .col-12
+        .col-12.results.d-flex.flex-wrap.p-2
+          - results_per_repository.sort_by! { |result| Buildresult::AVAIL_STATUS_VALUES[result.code.to_sym] }
           - results_per_repository.each do |result|
-            .row
-              .col-4
-                %p
-                  = result.architecture
-              .col-5
-                = repository_status_icon(status: result.state)
-                %p.d-none.d-sm-inline.d-lg-none
-                  = result.state
-                - result_help = repository_info(result.state) if result.is_repository_in_db
-                - result_help ||= 'This result is outdated'
-                %p.d-none.d-lg-inline
-                  = result_help
-                %i.fa.fa-question-circle.d-lg-none.text-info{ data: { placement: 'top', toggle: 'popover', content: "#{result_help}" } }
-              .col-3
-                - if result.code.in?(['-', 'unresolvable', 'blocked', 'excluded', 'scheduled'])
-                  %i{ class: "fa #{build_status_icon(result.code)}" }
-                - else
-                  = link_to(package_live_build_log_path(project: project.to_s, package: package,
-                      repository: result.repository, arch: result.architecture), rel: 'nofollow') do
-                    %i{ class: "fa #{build_status_icon(result.code)}" }
-                %span.d-none.d-lg-inline
-                  Package build
-                %p.d-none.d-sm-inline
-                  = render(BuildresultStatusLinkComponent.new(repository_name: result.repository, architecture_name: result.architecture,
-                                                              project_name: project.name, package_name: package,
-                                                              build_status: result.code, build_details: result.details))
-                %i.fa.fa-question-circle.text-info{ data: { placement: 'top',
-                                                            toggle: 'popover',
-                                                            content: "#{Buildresult.status_description(result.code)}" } }
+            = render BuildResultForArchitectureComponent.new(result, project, package)
   - else
     All the results have state
     %strong excluded/disabled