From a0e6adabd71d18c698acbc90aa376b6618ceccf5 Mon Sep 17 00:00:00 2001 From: Christian Sutter Date: Thu, 28 Nov 2024 17:07:20 +0000 Subject: [PATCH 1/3] Layout super nav header: Add search autocomplete This changes the layout super navigation header to use the new `search_with_autocomplete` component instead of the vanilla `search` one. --- .../components/_layout_super_navigation_header.html.erb | 4 +++- spec/component_guide/component_index_spec.rb | 2 ++ spec/components/layout_super_navigation_header_spec.rb | 5 +++++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb b/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb index a4dfae7a1e..f363fd8848 100644 --- a/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +++ b/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb @@ -317,7 +317,7 @@ label: "Site-wide", } ) do %> - <%= render "govuk_publishing_components/components/search", { + <%= render "govuk_publishing_components/components/search_with_autocomplete", { name: "keywords", inline_label: false, label_size: "m", @@ -326,6 +326,8 @@ size: "large", margin_bottom: 0, disable_corrections: true, + source_url: [Plek.new.website_root, "/api/search/autocomplete.json"].join, + source_key: "suggestions" } %> <% end %> diff --git a/spec/component_guide/component_index_spec.rb b/spec/component_guide/component_index_spec.rb index 3bd536db51..cab419a89a 100644 --- a/spec/component_guide/component_index_spec.rb +++ b/spec/component_guide/component_index_spec.rb @@ -71,6 +71,7 @@ @import 'govuk_publishing_components/components/print-link'; @import 'govuk_publishing_components/components/related-navigation'; @import 'govuk_publishing_components/components/search'; +@import 'govuk_publishing_components/components/search-with-autocomplete'; @import 'govuk_publishing_components/components/skip-link'; @import 'govuk_publishing_components/components/step-by-step-nav'; @import 'govuk_publishing_components/components/step-by-step-nav-header'; @@ -98,6 +99,7 @@ //= require govuk_publishing_components/components/layout-header //= require govuk_publishing_components/components/layout-super-navigation-header //= require govuk_publishing_components/components/print-link +//= require govuk_publishing_components/components/search-with-autocomplete //= require govuk_publishing_components/components/skip-link //= require govuk_publishing_components/components/step-by-step-nav //= require govuk_publishing_components/components/tabs" diff --git a/spec/components/layout_super_navigation_header_spec.rb b/spec/components/layout_super_navigation_header_spec.rb index 251ecfdb06..6853ee3479 100644 --- a/spec/components/layout_super_navigation_header_spec.rb +++ b/spec/components/layout_super_navigation_header_spec.rb @@ -163,6 +163,11 @@ def component_name assert_select ".js-module-initialised[data-module=\"super-navigation-mega-menu\"]", false end + it "includes the search_with_autocomplete component with correct URL" do + render_component({}) + assert_select ".gem-c-search-with-autocomplete[data-source-url='http://www.dev.gov.uk/api/search/autocomplete.json']" + end + it "adds GA4 tracking" do render_component({}) From 42c69fbc2707d59e3d0629dec4c66dd4fa21ce6f Mon Sep 17 00:00:00 2001 From: Kevin Dew Date: Mon, 9 Dec 2024 14:36:17 +0000 Subject: [PATCH 2/3] Disable Search Autocomplete based off env var presence Autocomplete uses a denylist to stop certain terms from serving suggestions. The process to update the denylist is very manual and developer heavy. It might be difficult to update the denylist over the holiday period. In that situation the decision might be taken to temporarily turn off autocomplete entirely. An environment variable is used to determine whether search with autocomplete has been disabled. The value of this variable will be applied globally across all applications that use site search. See: https://github.com/alphagov/govuk-helm-charts/pull/2832 Co-authored-by: Leena Gupte --- Gemfile.lock | 2 ++ .../_layout_super_navigation_header.html.erb | 12 ++++++++--- govuk_publishing_components.gemspec | 1 + .../layout_super_navigation_header_spec.rb | 20 ++++++++++++++----- spec/rails_helper.rb | 1 + 5 files changed, 28 insertions(+), 8 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index 607b45085c..82954b578a 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -105,6 +105,7 @@ GEM regexp_parser (>= 1.5, < 3.0) xpath (~> 3.2) chartkick (5.1.2) + climate_control (1.2.0) coderay (1.1.3) concurrent-ruby (1.3.4) connection_pool (2.4.1) @@ -614,6 +615,7 @@ PLATFORMS DEPENDENCIES capybara + climate_control dartsass-rails faker gds-api-adapters diff --git a/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb b/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb index f363fd8848..a5135e77fd 100644 --- a/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +++ b/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb @@ -317,7 +317,7 @@ label: "Site-wide", } ) do %> - <%= render "govuk_publishing_components/components/search_with_autocomplete", { + <% search_options = { name: "keywords", inline_label: false, label_size: "m", @@ -326,9 +326,15 @@ size: "large", margin_bottom: 0, disable_corrections: true, - source_url: [Plek.new.website_root, "/api/search/autocomplete.json"].join, - source_key: "suggestions" } %> + <% if ENV["GOVUK_DISABLE_SEARCH_AUTOCOMPLETE"] %> + <%= render "govuk_publishing_components/components/search", search_options %> + <% else %> + <%= render "govuk_publishing_components/components/search_with_autocomplete", search_options.merge({ + source_url: [Plek.new.website_root, "/api/search/autocomplete.json"].join, + source_key: "suggestions", + }) %> + <% end %> <% end %> diff --git a/govuk_publishing_components.gemspec b/govuk_publishing_components.gemspec index f8efbf5da7..f19b1868e1 100644 --- a/govuk_publishing_components.gemspec +++ b/govuk_publishing_components.gemspec @@ -28,6 +28,7 @@ Gem::Specification.new do |s| s.add_dependency "sprockets-rails" s.add_development_dependency "capybara" + s.add_development_dependency "climate_control" s.add_development_dependency "dartsass-rails" s.add_development_dependency "faker" s.add_development_dependency "gds-api-adapters" diff --git a/spec/components/layout_super_navigation_header_spec.rb b/spec/components/layout_super_navigation_header_spec.rb index 6853ee3479..0531e014e9 100644 --- a/spec/components/layout_super_navigation_header_spec.rb +++ b/spec/components/layout_super_navigation_header_spec.rb @@ -163,11 +163,6 @@ def component_name assert_select ".js-module-initialised[data-module=\"super-navigation-mega-menu\"]", false end - it "includes the search_with_autocomplete component with correct URL" do - render_component({}) - assert_select ".gem-c-search-with-autocomplete[data-source-url='http://www.dev.gov.uk/api/search/autocomplete.json']" - end - it "adds GA4 tracking" do render_component({}) @@ -180,4 +175,19 @@ def component_name assert_select 'a[data-ga4-link=\'{"event_name":"navigation","type":"header menu bar","index_section":2,"index_link":6,"index_section_count":3,"index_total":6,"section":"Government activity"}\']' assert_select "form[data-module='ga4-search-tracker']" end + + describe "search autocomplete" do + it "includes the search_with_autocomplete component by default" do + render_component({}) + assert_select ".gem-c-search-with-autocomplete[data-source-url='http://www.dev.gov.uk/api/search/autocomplete.json']" + end + + it "allows the GOVUK_DISABLE_SEARCH_AUTOCOMPLETE env var presence to fallback to search without autocomplete" do + ClimateControl.modify GOVUK_DISABLE_SEARCH_AUTOCOMPLETE: "1" do + render_component({}) + assert_select ".gem-c-search-autocomplete", false + assert_select ".gem-c-search" + end + end + end end diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb index 935e426876..17856cb79a 100644 --- a/spec/rails_helper.rb +++ b/spec/rails_helper.rb @@ -5,6 +5,7 @@ require "rspec/rails" require "capybara/rails" require "govuk_test" +require "climate_control" GovukTest.configure Selenium::WebDriver::Options.chrome(loggingPrefs: { browser: "ALL" }) From 4ddb2995547ba7853f819b4f4ea4e6f7a6936b2e Mon Sep 17 00:00:00 2001 From: Kevin Dew Date: Tue, 10 Dec 2024 15:05:02 +0000 Subject: [PATCH 3/3] Search autocomplete changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e5a1c6f59..a615056f69 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ## Unreleased +* Add search autocomplete to layout super navigation header ([PR #4451](https://github.com/alphagov/govuk_publishing_components/pull/4451)) * Use component wrapper on reorderable list component ([PR #4474](https://github.com/alphagov/govuk_publishing_components/pull/4474)) * Use "button" button type for copy to clipboard component ([PR #4480](https://github.com/alphagov/govuk_publishing_components/pull/4480)) * Use component wrapper on signup link component ([PR #4481](https://github.com/alphagov/govuk_publishing_components/pull/4481))