Filters behaviors to dedicated assets

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

@@ -72,3 +72,4 @@
 //= require webui/canned_responses.js
 //= require webui/multi_select.js
 //= require webui/dropdown.js
+//= require webui/filters.js

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

@@ -0,0 +1,38 @@
+$(document).ready(function(){
+  function highlightSelectedFilters() {
+    var filters = $('#filters .accordion .accordion-item');
+    filters.each(function() {
+      var currentFilter = $(this);
+      var selectedContentWrapper = currentFilter.find('.selected-content');
+      if (selectedContentWrapper.length > 0) {
+        var anySelected = [];
+        $(this).find('input').each(function() {
+          if ($(this).is(':checked')) {
+            anySelected.push($(this).next('label').html());
+          }
+        });
+        if (anySelected.length > 0) {
+          currentFilter.find('.selected-content').html(anySelected.join(', '));
+        }
+        else {
+          currentFilter.find('.selected-content').text("");
+        }
+      }
+    });
+  }
+  highlightSelectedFilters();
+
+  function submitFilters() {
+    $('#filter-form').submit();
+    $('#filters input').attr('disabled', 'disabled');
+    $('#requests-list').hide();
+    $('#requests-list-loading').removeClass('d-none');
+  }
+  let submitFiltersTimeout;
+
+  $(document).on('change keyup', '#filter-form input, #filter-form select', function() {
+    highlightSelectedFilters();
+    $(window).clearTimeout(submitFiltersTimeout);
+    submitFiltersTimeout = $(window).setTimeout(submitFilters, 2000);
+  });
+});

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

@@ -74,6 +74,7 @@
 @import 'tokens';
 @import 'subscriptions';
 @import 'build-log';
+@import 'filters';
 @import 'mixin';
 
 html {

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

@@ -0,0 +1,65 @@
+#filters {
+  .accordion-item {
+    .accordion-button {
+      &.no-style {
+        cursor: pointer;
+        padding: 0;
+        background: none;
+      }
+      &:focus {
+        box-shadow: none;
+      }
+      &:not(.collapsed) {
+        box-shadow: none;
+      }
+      &:hover {
+        background-color: var(--bs-secondary-bg);
+      }
+    }
+
+    .accordion-button {
+      .selected-content {
+        display: none;
+      }
+    }
+    .accordion-button.collapsed {
+      .selected-content {
+        display: inline;
+      }
+    }
+
+    .scroll-list-wrapper {
+      overflow-y: scroll;
+      max-height: 15rem;
+      word-break: break-all;
+    }
+  }
+}
+
+
+@include media-breakpoint-up(md) {
+  #filters.collapse {
+    display: block !important;
+  }
+}
+
+@include media-breakpoint-between(xs, md) {
+  #filter-desktop {
+    &.show { border-top: 1px solid $gray-300; }
+    &.sticky-top { top: $top-navigation-height; }
+    height: $notifications-filter-box-height;
+    // To not overlap with the notification action bar
+    z-index: calc(#{$zindex-sticky} + 1);
+
+    #filters {
+      max-height: 100vw; overflow: auto;
+      -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+      -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+      box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+    }
+  }
+
+  @media (orientation: landscape) {
+    #filters { max-height: 20vw; }
+  }
+}

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

@@ -10,70 +10,3 @@
   color: var(--placeholder-text)!important;
   font-style: italic;
 }
-
-
-#filters {
-  .accordion-item {
-    .accordion-button {
-      &.no-style {
-        cursor: pointer;
-        padding: 0;
-        background: none;
-      }
-      &:focus {
-        box-shadow: none;
-      }
-      &:not(.collapsed) {
-        box-shadow: none;
-      }
-      &:hover {
-        background-color: var(--bs-secondary-bg);
-      }
-    }
-
-    .accordion-button {
-      .selected-content {
-        display: none;
-      }
-    }
-    .accordion-button.collapsed {
-      .selected-content {
-        display: inline;
-      }
-    }
-
-    .scroll-list-wrapper {
-      overflow-y: scroll;
-      max-height: 15rem;
-      word-break: break-all;
-    }
-  }
-}
-
-
-@include media-breakpoint-up(md) {
-  #filters.collapse {
-    display: block !important;
-  }
-}
-
-@include media-breakpoint-between(xs, md) {
-  #filter-desktop {
-    &.show { border-top: 1px solid $gray-300; }
-    &.sticky-top { top: $top-navigation-height; }
-    height: $notifications-filter-box-height;
-    // To not overlap with the notification action bar
-    z-index: calc(#{$zindex-sticky} + 1);
-
-    #filters {
-      max-height: 100vw; overflow: auto;
-      -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-      -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-      box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-    }
-  }
-
-  @media (orientation: landscape) {
-    #filters { max-height: 20vw; }
-  }
-}

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

@@ -16,7 +16,7 @@
                             <p>or a git commit hash like
                             <em>97561db8664eaf86a1e4c7b77d5fb5d5bff6681e</em></p>'
 
-= form_for(:token, url: token_workflow_runs_path(@token), method: :get, id: 'workflow-run-filter-form') do |form|
+= form_for(:token, url: token_workflow_runs_path(@token), method: :get, id: 'filter-form') do |form|
   .accordion.accordion-flush
     .mt-2.mb-2.accordion-item.border-0
       .px-3.py-2.accordion-button.no-style{ data: { 'bs-toggle': 'collapse', 'bs-target': '#workflow-filter-status' },
@@ -78,42 +78,3 @@
 
   .text-center.mt-4.mb-4
     = link_to('Clear', token_workflow_runs_path(@token, []), class: 'btn btn-light border')
-
-:javascript
-
-  function highlightSelectedFilters() {
-    var filters = $('#filters .accordion .accordion-item');
-    filters.each(function() {
-      var currentFilter = $(this);
-      var selectedContentWrapper = currentFilter.find('.selected-content');
-      if (selectedContentWrapper.length > 0) {
-        var anySelected = []
-        $(this).find('input').each(function() {
-          if ($(this).is(':checked')) {
-            anySelected.push($(this).next('label').html());
-          }
-        });
-        if (anySelected.length > 0) {
-          currentFilter.find('.selected-content').html(anySelected.join(', '));
-        }
-        else {
-          currentFilter.find('.selected-content').text("");
-        }
-      }
-    });
-  }
-  highlightSelectedFilters();
-
-  function submitWorkflowFilters() {
-    $('#workflow-run-filter-form').submit();
-    $('#filters input').attr('disabled', 'disabled');
-    $('#requests-list').hide();
-    $('#requests-list-loading').removeClass('d-none');
-  }
-  let submitFiltersTimeout;
-
-  $(document).on('change keyup', '#filter input, #filter select', function() {
-    highlightSelectedFilters();
-    clearTimeout(submitFiltersTimeout);
-    submitFiltersTimeout = setTimeout(submitWorkflowFilters, 1500);
-  });

src/api/app/views/webui/shared/bs_requests/_form.html.haml

@@ -1,4 +1,4 @@
-= form_for(:request, url: url, method: :get, id: 'requests-filter-form') do |form|
+= form_for(:request, url: url, method: :get, id: 'filter-form') do |form|
   .row
     .col-md-4.col-lg-3.px-0.px-md-3.sticky-top.mb-3#filter-desktop
       .card
@@ -33,44 +33,6 @@
 :javascript
   collectMultiSelects();
 
-  function submitRequestFilters() {
-    $('#requests-filter-form').submit();
-    $('#filters input').attr('disabled', 'disabled');
-    $('#requests-list').hide();
-    $('#requests-list-loading').removeClass('d-none');
-  }
-
-  function highlightSelectedFilters() {
-    var filters = $('#filters .accordion .accordion-item');
-    filters.each(function() {
-      var currentFilter = $(this);
-      var selectedContentWrapper = currentFilter.find('.selected-content');
-      if (selectedContentWrapper.length > 0) {
-        var anySelected = []
-        $(this).find('input').each(function() {
-          if ($(this).is(':checked')) {
-            anySelected.push($(this).next('label').html());
-          }
-        });
-        if (anySelected.length > 0) {
-          currentFilter.find('.selected-content').html(anySelected.join(', '));
-        }
-        else {
-          currentFilter.find('.selected-content').text("");
-        }
-      }
-    });
-  }
-  highlightSelectedFilters();
-
-  let submitFiltersTimeout;
-
-  $(document).on('change', '#filters input', function() {
-    highlightSelectedFilters();
-    clearTimeout(submitFiltersTimeout);
-    submitFiltersTimeout = setTimeout(submitRequestFilters, 2000);
-  });
-
   $(document).on("input", "#stag-proj-search", function(event) {
     var searchInput = event.target;
     var filterValue = searchInput.value.toLowerCase();

src/api/app/views/webui/users/notifications/_notification_filter.html.haml

@@ -1,5 +1,5 @@
 -# haml-lint:disable ViewLength
-= form_for(:notification, url: my_notifications_path, method: :get, id: 'notifications-filter-form') do |form|
+= form_for(:notification, url: my_notifications_path, method: :get, id: 'filter-form') do |form|
   .accordion.accordion-flush
     .mt-2.mb-2.accordion-item.border-0
       .px-3.py-2.accordion-button.no-style{ data: { 'bs-toggle': 'collapse', 'bs-target': '#notification-filter-state' },
@@ -143,41 +143,4 @@
 :javascript
   collectMultiSelects()
 
-  function highlightSelectedFilters() {
-    var filters = $('#filters .accordion .accordion-item');
-    filters.each(function() {
-      var currentFilter = $(this);
-      var selectedContentWrapper = currentFilter.find('.selected-content');
-      if (selectedContentWrapper.length > 0) {
-        var anySelected = []
-        $(this).find('input').each(function() {
-          if ($(this).is(':checked')) {
-            anySelected.push($(this).next('label').html());
-          }
-        });
-        if (anySelected.length > 0) {
-          currentFilter.find('.selected-content').html(anySelected.join(', '));
-        }
-        else {
-          currentFilter.find('.selected-content').text("");
-        }
-      }
-    });
-  }
-  highlightSelectedFilters();
-
-  function submitNotificationFilters() {
-    $('#notifications-filter-form').submit();
-    $('#filters input').attr('disabled', 'disabled');
-    $('#notifications-list').hide();
-    $('#notifications-list-loading').removeClass('d-none');
-  }
-  let submitFiltersTimeout;
-
-  $(document).on('change', '#filters input', function() {
-    highlightSelectedFilters();
-    clearTimeout(submitFiltersTimeout);
-    submitFiltersTimeout = setTimeout(submitNotificationFilters, 1500);
-  });
-
 -# haml-lint:enable ViewLength

src/api/spec/features/beta/webui/package_requests_spec.rb

@@ -48,7 +48,7 @@
     it 'filters incoming requests' do
       find_by_id('requests-dropdown-trigger').click if mobile? # open the filter dropdown
       choose('Incoming')
-      execute_script('$("#requests-filter-form").submit()')
+      execute_script('$("#filter-form").submit()')
 
       expect(page).to have_link(href: "/request/show/#{incoming_request.number}")
       expect(page).to have_link(href: "/request/show/#{other_incoming_request.number}")
@@ -58,7 +58,7 @@
     it 'filters outgoing requests' do
       find_by_id('requests-dropdown-trigger').click if mobile? # open the filter dropdown
       choose('Outgoing')
-      execute_script('$("#requests-filter-form").submit()')
+      execute_script('$("#filter-form").submit()')
 
       expect(page).to have_link(href: "/request/show/#{outgoing_request.number}")
       expect(page).to have_no_link(href: "/request/show/#{incoming_request.number}")
@@ -82,7 +82,7 @@
           check('new')
           sleep 2
         end
-        execute_script('$("#requests-filter-form").submit()')
+        execute_script('$("#filter-form").submit()')
 
         within('#requests') do
           expect(page).to have_link(href: "/request/show/#{new_request.number}")

src/api/spec/features/beta/webui/project_requests_spec.rb

@@ -42,7 +42,7 @@
     it 'filters incoming requests' do
       find_by_id('requests-dropdown-trigger').click if mobile?
       choose('Incoming', allow_label_click: true)
-      execute_script('$("#requests-filter-form").submit()')
+      execute_script('$("#filter-form").submit()')
 
       expect(page).to have_link(href: "/request/show/#{incoming_request.number}")
       expect(page).to have_link(href: "/request/show/#{other_incoming_request.number}")
@@ -52,7 +52,7 @@
     it 'filters outgoing requests' do
       find_by_id('requests-dropdown-trigger').click if mobile?
       choose('Outgoing', allow_label_click: true)
-      execute_script('$("#requests-filter-form").submit()')
+      execute_script('$("#filter-form").submit()')
 
       expect(page).to have_link(href: "/request/show/#{outgoing_request.number}")
       expect(page).to have_no_link(href: "/request/show/#{incoming_request.number}")
@@ -75,7 +75,7 @@
           check('new')
           sleep 2
         end
-        execute_script('$("#requests-filter-form").submit()')
+        execute_script('$("#filter-form").submit()')
 
         within('#requests') do
           expect(page).to have_link(href: "/request/show/#{new_request.number}")