Render the advanced search form without JavaScript

We were using the form and then showing it with JavaScript when advanced
search terms were present. Now we hide it with JavaScript when no
advanced search are present. This means users without JavaScript
(including users with JavaScript enabled but bad internet connections
preventing the JavaScript to load) can now access the form.

The other main difference between the two versions is the way the form
flashes while JavaScript is loading.

Previously, the form would always be hidden when no terms had been
introduced. However, when these terms were present, after submitting the
form it would briefly be hidden and then shown again.

Now the opposite happens. When advanced search terms are present, the
form is shown at all times. However, when they aren't, the form is
briefly shown before it disappears.

Here the previous behavior is arguably better because most of the time
these terms will not be present.

So basically we're significantly improving the experience of some users
at the cost of slightly worsen the experience of other users.

We're also hiding the button to show the form when JavaScript is
disabled, since in this scenario it's useless. We're using the `hidden`
attribute so hidden buttons can be detected in CSS.

app/assets/javascripts/advanced_search.js

@@ -14,11 +14,16 @@
       }
     },
     initialize: function() {
+      var toggle_button = $("#js-advanced-search-title");
+
+      toggle_button.removeAttr("hidden");
+
       if (App.AdvancedSearch.advanced_search_terms()) {
-        $("#js-advanced-search").show();
         App.AdvancedSearch.toggle_date_options();
+      } else {
+        $("#js-advanced-search").hide();
       }
-      $("#js-advanced-search-title").on({
+      toggle_button.on({
         click: function() {
           $(this).attr("aria-expanded", !JSON.parse($(this).attr("aria-expanded")));
           $("#js-advanced-search").slideToggle();

app/components/shared/advanced_search_component.html.erb

@@ -1,11 +1,11 @@
 <div class="relative">
-  <button type="button" aria-expanded="<%= advanced_search.present? %>" id="js-advanced-search-title" class="advanced-search small">
+  <button type="button" aria-expanded="<%= advanced_search.present? %>" id="js-advanced-search-title" class="advanced-search small" hidden>
     <%= t("shared.advanced_search.title") %>
   </button>
 </div>
 
 <%= form_tag request.path, id: "advanced_search_form", class: "advanced-search-form", method: :get do %>
-  <div id="js-advanced-search" data-advanced-search-terms="<%= advanced_search.present? %>" style="display: none">
+  <div id="js-advanced-search" data-advanced-search-terms="<%= advanced_search.present? %>">
     <div class="general-search">
       <label for="search">
         <%= t("shared.advanced_search.general") %>

spec/components/shared/advanced_search_component_spec.rb

@@ -1,9 +1,23 @@
 require "rails_helper"
 
 describe Shared::AdvancedSearchComponent, type: :component do
-  describe "SDG filter" do
+  let(:component) { Shared::AdvancedSearchComponent.new }
-    let(:component) { Shared::AdvancedSearchComponent.new }
 
+  context "JavaScript disabled" do
+    it "renders the form" do
+      render_inline component
+
+      expect(page).to have_button "Filter"
+    end
+
+    it "hides the button to show the form" do
+      render_inline component
+
+      expect(page).to have_button "Advanced search", visible: :hidden
+    end
+  end
+
+  describe "SDG filter" do
     before do
       Setting["feature.sdg"] = true
       Setting["sdg.process.proposals"] = true