From 6a44ca350d8663dc7213039caf73acb2eef2622b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Mon, 28 Jun 2021 23:24:13 +0200
Subject: [PATCH] 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      |  9 +++++++--
 .../shared/advanced_search_component.html.erb  |  4 ++--
 .../shared/advanced_search_component_spec.rb   | 18 ++++++++++++++++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/advanced_search.js b/app/assets/javascripts/advanced_search.js
index 7ca0245a1..89f8be04f 100644
--- a/app/assets/javascripts/advanced_search.js
+++ b/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();
diff --git a/app/components/shared/advanced_search_component.html.erb b/app/components/shared/advanced_search_component.html.erb
index 04926b755..f221eed99 100644
--- a/app/components/shared/advanced_search_component.html.erb
+++ b/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") %>
diff --git a/spec/components/shared/advanced_search_component_spec.rb b/spec/components/shared/advanced_search_component_spec.rb
index 84f072b8f..8dd88d147 100644
--- a/spec/components/shared/advanced_search_component_spec.rb
+++ b/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