Refactor tabs.js and add dropdown to buildresults on Bootstrap

The tab.js file was controlling the tabs behaviour for Bootstrap
version.
But it didn't work when having more than one group of tabs.

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

src/api/app/assets/javascripts/webui2/tabs.js

@@ -1,46 +1,43 @@
-$.fn.hasOverflow = function() {
-  var element = $(this)[0];
-
-  if ((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)) {
-    return true;
+function resizeTabs(trigger, tabListContainer, selector, target) {
+  var item;
+  while(tabListContainer.hasOverflow() === trigger && (item = tabListContainer.find(selector)).length) {
+    item.toggleClass('nav-link dropdown-item');
+    if (trigger) { item.parent().empty(); }
+    item.prependTo(tabListContainer.find(target));
   }
+}
 
-  return false;
-};
-
-$.fn.collapse = function(){
-  var collapsibleElement = this,
-      container = this.parent(),
-      item;
+function refreshTabs(tabList) {
+  var tabListContainer = $(tabList.parent());
+  if (tabListContainer.hasOverflow()) {
+    // Shrink... moving links to the dropdown
+    resizeTabs(true, tabListContainer, 'li:not(.dropdown):not(:empty):last a', 'li.dropdown .dropdown-menu');
+  }
+  else {
+    // Grow... moving links to tabs
+    resizeTabs(false, tabListContainer, 'li.dropdown .dropdown-menu a:first', 'li:not(.dropdown):empty:first');
 
-  return collapsibleElement.each(function() {
-    function resize(trigger, selector, target) {
-      while(container.hasOverflow() === trigger && (item = collapsibleElement.find(selector)).length) {
-        item.toggleClass('nav-link dropdown-item');
-        if (trigger) { item.parent().empty(); }
-        item.prependTo(target);
-      }
-    }
+    // TODO: Grow is triggered when it shouldn't sometimes (this fixes it...)
+    resizeTabs(true, tabListContainer, 'li:not(.dropdown):not(:empty):last a', 'li.dropdown .dropdown-menu');
+  }
 
-    function refresh() {
-      if (container.hasOverflow()) {
-        // Shrink... moving links to the dropdown
-        resize(true, 'li:not(.dropdown):not(:empty):last a', 'li.dropdown .dropdown-menu');
-      }
-      else {
-        // Grow... moving links to tabs
-        resize(false, 'li.dropdown .dropdown-menu a:first', 'li:not(.dropdown):empty:first');
+  var dropdownState = tabList.find('.dropdown-menu').is(':not(:empty)');
+  tabList.find('li.dropdown').toggle(dropdownState);
+}
 
-        // TODO: Grow is triggered when it shouldn't sometimes (this fixes it...)
-        resize(true, 'li:not(.dropdown):not(:empty):last a', 'li.dropdown .dropdown-menu');
-      }
+$.fn.hasOverflow = function() {
+  var element = $(this)[0];
+  return (element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth);
+};
 
-      var dropdownState = collapsibleElement.find('.dropdown-menu').is(':not(:empty)');
-      collapsibleElement.find('li.dropdown').toggle(dropdownState);
-    }
-    refresh();
+$.fn.collapse = function(){
+  var collapsibleElements = this;
+
+  return collapsibleElements.each(function() {
+    var element = $(this);
+    refreshTabs(element);
 
-    $(window).resize(function() { refresh(); });
+    $(window).resize(function() { refreshTabs(element); });
   });
 };
 

src/api/app/views/webui2/shared/_buildresult_box.html.haml

@@ -12,7 +12,7 @@
 
 .card.mb-3
   .bg-light
-    %ul.nav.nav-tabs.pt-2.px-3#buildresult-box{ role: 'tablist', data: ajax_data }
+    %ul.nav.nav-tabs.pt-2.px-3.flex-nowrap.collapsible#buildresult-box{ role: 'tablist', data: ajax_data }
       %li.nav-item
         = link_to("#build#{index}", id: "build#{index}-tab", class: 'nav-link active',
           data: { toggle: 'tab' }, role: 'tab', aria: { controls: "build#{index}", selected: true }) do
@@ -24,6 +24,9 @@
             role: 'tab', aria: { controls: "rpm#{index}", selected: false }) do
             Rpmlint Results
             %i.fas.fa-sync-alt.invisible{ id: "rpm#{index}-reload", onclick: "update_rpmlint_result_#{index}()" }
+      %li.nav-item.dropdown
+        %a.nav-link.dropdown-toggle{ href: '#', 'data-toggle': 'dropdown', 'role': 'button', 'aria-expanded': 'false', 'aria-haspopup': 'true' }
+        .dropdown-menu.dropdown-menu-right
   .card-boby
     .col-12
       .tab-content