Use a submit button in budget executions filters

As mentioned in commit 5214d89c8, there are several issues with
submitting a form when a `<select>` tag changes. In particular, keyboard
users might accidentally fire the event while browsing the options, and
screen reader users will find a form with no obvious way to submit it.

In this case, there's an extra problem: in commit be8a0dbe8 we added a
second `<select>` field to this form, which also submitted on change.
Sometimes users changed one of the values and wanted to change the other
value as well before submitting the form. However, it wasn't possible,
because we would submit it before they had a chance to change the second
value.

So now we don't submit the form on change and add a submit button. This
is similar to what we do in the "Advanced filters" we use in several
places.

app/assets/stylesheets/budgets/executions/filters.scss

@@ -0,0 +1,22 @@
+.budget-executions-filters {
+  margin-bottom: $line-height / 2;
+
+  @include breakpoint(medium) {
+    $gap: 1em;
+    align-items: flex-end;
+    display: flex;
+    margin-left: -$gap;
+
+    > * {
+      margin-left: $gap;
+    }
+  }
+
+  select {
+    height: $line-height * 2;
+  }
+
+  [type="submit"] {
+    @include regular-button;
+  }
+}

app/components/budgets/executions/filters_component.html.erb

@@ -1,23 +1,24 @@
-<%= form_tag(budget_executions_path(budget), method: :get) do %>
-  <div class="small-12 medium-3 column">
+<%= form_tag(budget_executions_path(budget), method: :get, class: "budget-executions-filters") do %>
+  <div class="filter">
     <%= label_tag :milestone_tag, t("budgets.executions.filters.milestone_tag.label") %>
     <%= select_tag :milestone_tag,
                   options_for_select(
                     options_for_milestone_tags,
                     params[:milestone_tag]
                   ),
-                  class: "js-submit-on-change",
                   prompt: t("budgets.executions.filters.milestone_tag.all",
                   count: budget.investments.winners.with_milestones.count) %>
   </div>
-  <div class="small-12 medium-3 column">
+  <div class="filter">
     <%= label_tag :status, t("budgets.executions.filters.status.label") %>
     <%= select_tag :status,
                   options_from_collection_for_select(statuses,
                   :id, lambda { |s| "#{s.name} (#{filters_select_counts(s.id)})" },
                   params[:status]),
-                  class: "js-submit-on-change",
                   prompt: t("budgets.executions.filters.status.all",
                   count: budget.investments.winners.with_milestones.count) %>
   </div>
+  <div class="submit">
+    <%= submit_tag t("shared.filter") %>
+  </div>
 <% end %>

config/locales/en/general.yml

@@ -669,6 +669,7 @@ en:
       back: "Go back to my content"
   shared:
     edit: "Edit"
+    filter: "Filter"
     save: "Save"
     delete: "Delete"
     "yes": "Yes"

config/locales/es/general.yml

@@ -669,6 +669,7 @@ es:
       back: "Volver a mi contenido"
   shared:
     edit: "Editar"
+    filter: "Filtrar"
     save: "Guardar"
     delete: "Borrar"
     "yes": "Si"

spec/system/budgets/executions_spec.rb

@@ -71,6 +71,7 @@ describe "Executions" do
     expect(page).to have_content("No winner investments in this state")
 
     select "Executed (0)", from: "Project's current state"
+    click_button "Filter"
 
     expect(page).to have_content("No winner investments in this state")
   end
@@ -166,16 +167,19 @@ describe "Executions" do
       expect(page).to have_content(investment2.title)
 
       select "Studying the project (1)", from: "Project's current state"
+      click_button "Filter"
 
       expect(page).to have_content(investment1.title)
       expect(page).not_to have_content(investment2.title)
 
       select "Bidding (1)", from: "Project's current state"
+      click_button "Filter"
 
       expect(page).to have_content(investment2.title)
       expect(page).not_to have_content(investment1.title)
 
       select "Executing the project (0)", from: "Project's current state"
+      click_button "Filter"
 
       expect(page).not_to have_content(investment1.title)
       expect(page).not_to have_content(investment2.title)
@@ -195,9 +199,13 @@ describe "Executions" do
       click_link "Milestones"
 
       select "Studying the project (0)", from: "Project's current state"
+      click_button "Filter"
+
       expect(page).not_to have_content(investment1.title)
 
       select "Bidding (1)", from: "Project's current state"
+      click_button "Filter"
+
       expect(page).to have_content(investment1.title)
     end
 
@@ -215,9 +223,13 @@ describe "Executions" do
       click_link "Milestones"
 
       select "Studying the project (1)", from: "Project's current state"
+      click_button "Filter"
+
       expect(page).to have_content(investment1.title)
 
       select "Bidding (0)", from: "Project's current state"
+      click_button "Filter"
+
       expect(page).not_to have_content(investment1.title)
     end
 
@@ -241,26 +253,26 @@ describe "Executions" do
       expect(page).to have_content(investment2.title)
 
       select "tag2 (2)", from: "Milestone tag"
-
-      expect(page).to have_content(investment1.title)
-      expect(page).to have_content(investment2.title)
-
       select "Studying the project (1)", from: "Project's current state"
+      click_button "Filter"
 
       expect(page).to have_content(investment1.title)
       expect(page).not_to have_content(investment2.title)
 
       select "Bidding (1)", from: "Project's current state"
+      click_button "Filter"
 
       expect(page).not_to have_content(investment1.title)
       expect(page).to have_content(investment2.title)
 
       select "tag1 (1)", from: "Milestone tag"
+      click_button "Filter"
 
       expect(page).not_to have_content(investment1.title)
       expect(page).not_to have_content(investment2.title)
 
       select "All (2)", from: "Milestone tag"
+      click_button "Filter"
 
       expect(page).not_to have_content(investment1.title)
       expect(page).to have_content(investment2.title)