Limit the number of build problems shown in staging project

The list can get quite long and for consistency with the old
staging workflow (obs_factory).

Co-authored-by: Ana María Martínez Gómez <ammartinez@suse.de>

src/api/app/assets/stylesheets/webui2/staging-workflow.scss

@@ -18,3 +18,11 @@ ul .table-list-group-item {
   padding: 0.5rem 0.75rem;
   background-color: transparent;
 }
+
+.collapse-link[aria-expanded="false"] .less{
+  display: none;
+}
+
+.collapse-link[aria-expanded="true"] .more{
+  display: none;
+}

src/api/app/views/webui2/webui/staging/workflows/_problems.html.haml

@@ -1,22 +1,22 @@
+:ruby
+  max_problems = 5
+  project_class = project.name.tr(':', '_')
+  item_project_class = 'hidden-item-' + project_class
+
 - if project.problems.empty?
   .text-center
     %i.fas.fa-check-circle.fa-2x.text-success
 - else
   %ul.list-group.list-group-flush
-    - project.problems.each do |name, states|
-      %li.list-group-item.table-list-group-item
-        = link_to("#{name}:", package_show_path(package: name, project: project))
-        - states.each do |state, values|
-          = state
-          = surround '(', ')' do
-            - values.each do |value|
-              - coma = ', ' unless values.last == value
-              = succeed coma do
-                - if state == 'unresolvable'
-                  = value[:arch]
-                - else
-                  = link_to(value[:arch], package_live_build_log_path(package: name,
-                                                                      repository: value[:repository],
-                                                                      project: project,
-                                                                      arch: value[:arch]))
+    = render partial: 'problems_item', locals: { project: project, index: 1..(max_problems - 1) }
 
+    %span.collapse{ 'id': item_project_class }
+      = render partial: 'problems_item', locals: { project: project, index: max_problems..-1 }
+
+    - length = project.problems.length
+    - if project.problems.length > max_problems
+      - number = length - max_problems
+      %li.list-group-item.table-list-group-item
+        %a.collapse-link{ 'data-toggle': 'collapse', href: "##{item_project_class}", 'aria-expanded': 'false' }
+          %span.more See #{number} more
+          %span.less See #{number} less

src/api/app/views/webui2/webui/staging/workflows/_problems_item.html.haml

@@ -0,0 +1,16 @@
+- project.problems[index].each do |name, states|
+  %li.list-group-item.table-list-group-item
+    = link_to("#{name}:", package_show_path(package: name, project: project))
+    - states.each do |state, values|
+      = state
+      = surround '(', ')' do
+        - values.each do |value|
+          - coma = ', ' unless values.last == value
+          = succeed coma do
+            - if state == 'unresolvable'
+              = value[:arch]
+            - else
+              = link_to(value[:arch], package_live_build_log_path(package: name,
+                                                                  repository: value[:repository],
+                                                                  project: project,
+                                                                  arch: value[:arch]))