From 12be3cfeadacaf04d86fb8ef36dfefd3f945dfa0 Mon Sep 17 00:00:00 2001
From: timpeat <tim@timpeat.com>
Date: Thu, 9 Jan 2025 16:16:57 +0000
Subject: [PATCH] CRIMAPP-1568 Replace MoJ primary navigation with Govuk

Replacing the MoJ primary navigation with the GOVUK Service navigation
improves accessibility at higher magnification. Latest GOVUK  header navigation recommendations not adopted as part of this work.
---
 Gemfile.lock                                  | 18 +++---
 app/assets/stylesheets/local/custom.scss      |  4 ++
 .../base/_primary_navigation.html.erb         | 57 +++++--------------
 app/views/layouts/govuk_template.html.erb     |  1 +
 spec/system/errors_spec.rb                    | 10 ++--
 .../manage_users/deactivate_a_user_spec.rb    |  4 +-
 .../manage_users/reactivate_a_user_spec.rb    |  2 +-
 7 files changed, 35 insertions(+), 61 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index d0c01cb20..fef66ec50 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -133,7 +133,7 @@ GEM
       erubi (~> 1.4)
       parser (>= 2.4)
       smart_properties
-    bigdecimal (3.1.8)
+    bigdecimal (3.1.9)
     bindata (2.5.0)
     bindex (0.8.1)
     bootsnap (1.17.0)
@@ -154,7 +154,7 @@ GEM
     coercible (1.0.0)
       descendants_tracker (~> 0.0.1)
     concurrent-ruby (1.3.4)
-    connection_pool (2.4.1)
+    connection_pool (2.5.0)
     crack (1.0.0)
       bigdecimal
       rexml
@@ -239,10 +239,10 @@ GEM
     google-protobuf (4.28.3-x86_64-linux)
       bigdecimal
       rake (>= 13)
-    govuk-components (5.2.1)
+    govuk-components (5.7.1)
       html-attributes-utils (~> 1.0.0, >= 1.0.0)
-      pagy (~> 6.0)
-      view_component (>= 3.9, < 3.11)
+      pagy (>= 6, < 10)
+      view_component (>= 3.18, < 3.21)
     govuk_design_system_formbuilder (5.0.0)
       actionview (>= 6.1)
       activemodel (>= 6.1)
@@ -309,7 +309,7 @@ GEM
       net-smtp
     marcel (1.0.4)
     matrix (0.4.2)
-    method_source (1.0.0)
+    method_source (1.1.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.8)
     minitest (5.25.4)
@@ -369,7 +369,7 @@ GEM
       validate_url
       webfinger (~> 2.0)
     orm_adapter (0.5.0)
-    pagy (6.5.0)
+    pagy (9.3.3)
     parallel (1.26.3)
     parser (3.3.6.0)
       ast (~> 2.4.1)
@@ -567,8 +567,8 @@ GEM
       activemodel (>= 3.0.0)
       public_suffix
     version_gem (1.1.4)
-    view_component (3.10.0)
-      activesupport (>= 5.2.0, < 8.0)
+    view_component (3.20.0)
+      activesupport (>= 5.2.0, < 8.1)
       concurrent-ruby (~> 1.0)
       method_source (~> 1.0)
     virtus (2.0.0)
diff --git a/app/assets/stylesheets/local/custom.scss b/app/assets/stylesheets/local/custom.scss
index b26e176db..a552a90b5 100644
--- a/app/assets/stylesheets/local/custom.scss
+++ b/app/assets/stylesheets/local/custom.scss
@@ -66,6 +66,10 @@ html {
   overflow-x: auto
 }
 
+.app-service-navigation {
+  border-bottom: none;
+}
+
 .app-table {
   thead {
     position: sticky;
diff --git a/app/views/casework/base/_primary_navigation.html.erb b/app/views/casework/base/_primary_navigation.html.erb
index 2c5de2d20..c5aca4e5c 100644
--- a/app/views/casework/base/_primary_navigation.html.erb
+++ b/app/views/casework/base/_primary_navigation.html.erb
@@ -1,44 +1,13 @@
-<div class="moj-primary-navigation">
-
-  <div class="moj-primary-navigation__container">
-
-    <div class="moj-primary-navigation__nav">
-      <nav class="moj-primary-navigation" aria-label="Primary navigation">
-
-        <!-- Applications -->
-        <% if current_user.service_user? %>
-          <ul class="moj-primary-navigation__list">
-            <li class="moj-primary-navigation__item">
-              <%= link_to t('primary_navigation.your_list',
-                            count: assignments_count),
-                          assigned_applications_path,
-                          class: 'moj-primary-navigation__link',
-                          aria: { current: current_page?(assigned_applications_path) ? 'page' : nil } %>
-            </li>
-
-            <li class="moj-primary-navigation__item">
-              <%= link_to t('primary_navigation.search'),
-                          new_application_searches_path,
-                          class: 'moj-primary-navigation__link',
-                          aria: { current: request.url.include?('searches') ? 'page' : nil } %>
-            </li>
-
-            <li class="moj-primary-navigation__item">
-              <%= link_to t('primary_navigation.open_apps'),
-                          open_crime_applications_path,
-                          class: 'moj-primary-navigation__link',
-                          aria: { current: current_page?(open_crime_applications_path) ? 'page' : nil } %>
-            </li>
-
-            <li class="moj-primary-navigation__item">
-              <%= link_to t('primary_navigation.closed_apps'),
-                          closed_crime_applications_path,
-                          class: 'moj-primary-navigation__link',
-                          aria: { current: current_page?(closed_crime_applications_path) ? 'page' : nil } %>
-            </li>
-          </ul>
-        <% end %>
-      </nav>
-    </div>
-  </div>
-</div>
+<%= govuk_service_navigation(navigation_id: 'example-5', current_path: request.path, classes: 'app-service-navigation') do |sn| %>
+  <%= sn.with_navigation_item(
+        text: t('primary_navigation.your_list', count: assignments_count),
+        href: assigned_applications_path
+      ) %>
+  <%= sn.with_navigation_item(
+        text: t('primary_navigation.search'),
+        href: new_application_searches_path,
+        active_when: /application_searches/
+      ) %>
+  <%= sn.with_navigation_item(text: t('primary_navigation.open_apps'), href: open_crime_applications_path) %>
+  <%= sn.with_navigation_item(text: t('primary_navigation.closed_apps'), href: closed_crime_applications_path) %>
+<% end %>
diff --git a/app/views/layouts/govuk_template.html.erb b/app/views/layouts/govuk_template.html.erb
index 80cdb8e5c..936572376 100644
--- a/app/views/layouts/govuk_template.html.erb
+++ b/app/views/layouts/govuk_template.html.erb
@@ -36,6 +36,7 @@
   </div>
 
   <%= yield(:primary_navgation) %>
+
   <main class="govuk-main-wrapper" id="main-content" role="main">
     <div class="govuk-width-container">
 
diff --git a/spec/system/errors_spec.rb b/spec/system/errors_spec.rb
index 6253c5882..f5643ff7d 100644
--- a/spec/system/errors_spec.rb
+++ b/spec/system/errors_spec.rb
@@ -13,7 +13,7 @@
       end
 
       it 'uses the system user layout with navigation' do
-        expect(page).to have_css('nav.moj-primary-navigation')
+        expect(page).to have_css('nav.govuk-service-navigation__wrapper')
         expect(page).to have_link('Sign out')
       end
     end
@@ -51,7 +51,7 @@
           end
 
           it 'uses the system user layout with navigation' do
-            expect(page).to have_css('nav.moj-primary-navigation')
+            expect(page).to have_css('nav.govuk-service-navigation__wrapper')
             expect(page).to have_link('Sign out')
           end
         end
@@ -85,7 +85,7 @@
       end
 
       it 'uses the system user layout with navigation' do
-        expect(page).to have_css('nav.moj-primary-navigation')
+        expect(page).to have_css('nav.govuk-service-navigation__wrapper')
         expect(page).to have_link('Sign out')
       end
     end
@@ -101,7 +101,7 @@
       end
 
       it 'uses the simplified errors page layout' do
-        expect(page).to have_no_css('nav.moj-primary-navigation')
+        expect(page).to have_no_css('nav.govuk-service-navigation__wrapper')
       end
     end
 
@@ -116,7 +116,7 @@
       end
 
       it 'uses the simplified errors page layout' do
-        expect(page).to have_no_css('nav.moj-primary-navigation')
+        expect(page).to have_no_css('nav.govuk-service-navigation__wrapper')
       end
     end
 
diff --git a/spec/system/manage_users/deactivate_a_user_spec.rb b/spec/system/manage_users/deactivate_a_user_spec.rb
index 652220157..0aa576315 100644
--- a/spec/system/manage_users/deactivate_a_user_spec.rb
+++ b/spec/system/manage_users/deactivate_a_user_spec.rb
@@ -32,7 +32,7 @@ def do_deactivate_journey
       end
 
       it 'warns about the impact of deactivating' do
-        within('div.govuk-warning-text') do
+        within('.govuk-warning-text') do
           expect(page).to have_content(
             'This will mean Zoe Blogs can no longer access this service.'
           )
@@ -110,7 +110,7 @@ def do_deactivate_journey
     end
 
     it 'shows error message on manage users page' do
-      within('div.govuk-notification-banner__heading') do
+      within('.govuk-notification-banner__heading') do
         expect(page).to have_content(
           'Unable to deactivate user. There must be at least two users who can manage others'
         )
diff --git a/spec/system/manage_users/reactivate_a_user_spec.rb b/spec/system/manage_users/reactivate_a_user_spec.rb
index 683de6b09..7713cedad 100644
--- a/spec/system/manage_users/reactivate_a_user_spec.rb
+++ b/spec/system/manage_users/reactivate_a_user_spec.rb
@@ -117,7 +117,7 @@
       end
 
       it 'shows error message' do
-        within('div.govuk-notification-banner__heading') do
+        within('.govuk-notification-banner__heading') do
           expect(page).to have_content('You cannot reactivate yourself')
         end
       end