Compare partial URLs to highlight navigation items (#493)

* Compare partial URLs to highlight navigation items

* fix tests

* Extract method and add tests

app/components/primary_navigation_component.html.erb

@@ -2,7 +2,7 @@
   <div class="govuk-width-container">
     <ul class="app-primary-navigation__list">
       <% items.each do |item| %>
-        <% if item.fetch(:current, false) || current_page?(item.fetch(:url)) || current_page?("#{item.fetch(:url)}/details") %>
+        <% if highlighted_tab?(item, request.fullpath) %>
           <li class="app-primary-navigation__item app-primary-navigation__item--current">
             <%= govuk_link_to item[:name], item[:url], class: "app-primary-navigation__link", aria: { current: "page" } %>
           </li>

app/components/primary_navigation_component.rb

@@ -5,4 +5,8 @@ class PrimaryNavigationComponent < ViewComponent::Base
     @items = items
     super
   end
+
+  def highlighted_tab?(item, path)
+    item.fetch(:current, false) || item.fetch(:comparable_urls).any? { |url| path.include?(url) }
+  end
 end

app/views/layouts/application.html.erb

@@ -65,15 +65,15 @@
     <% if !current_user.nil? %>
       <% if current_user.support? %>
         <% items = [
-          { name: "Organisations", url: "/organisations" },
+          { name: "Organisations", url: "/organisations", comparable_urls: ["/details", "/organisations"] },
-          { name: "Users", url: "/users" },
+          { name: "Users", url: "/users",  comparable_urls: ["/users", "/account"] },
-          { name: "Logs", url: case_logs_path },
+          { name: "Logs", url: case_logs_path,  comparable_urls: ["/logs"] },
         ] %>
       <% else %>
         <% items = [
-          { name: "Logs", url: case_logs_path },
+          { name: "Logs", url: case_logs_path, comparable_urls: ["/logs"]  },
-          { name: "Users", url: users_organisation_path(current_user.organisation) },
+          { name: "Users", url: users_organisation_path(current_user.organisation), comparable_urls: ["/users", "/account"]  },
-          { name: "About your organisation", url: "/organisations/#{current_user.organisation.id}" },
+          { name: "About your organisation", url: "/organisations/#{current_user.organisation.id}", comparable_urls: ["/details"]  },
         ] %>
       <% end %>
       <%= render PrimaryNavigationComponent.new(items:) %>

spec/components/primary_navigation_component_spec.rb

@@ -2,9 +2,9 @@ require "rails_helper"
 
 RSpec.describe PrimaryNavigationComponent, type: :component do
   let(:items) do
-    [{ name: "Organisations", url: "#", current: true },
+    [{ name: "Organisations", url: "/organisations", current: true, comparable_urls: ["/organisations", "/something-else"] },
-     { name: "Users", url: "#" },
+     { name: "Users", url: "/users", comparable_urls: ["/users"] },
-     { name: "Logs ", url: "#" }]
+     { name: "Logs ", url: "/logs", comparable_urls: ["/logs"] }]
   end
 
   context "when the item is 'current' in nav tabs" do
@@ -15,6 +15,16 @@ RSpec.describe PrimaryNavigationComponent, type: :component do
     end
   end
 
+  context "when the current page is sub-page" do
+    it "highlights the correct tab" do
+      navigation_panel = described_class.new(items:)
+
+      expect(navigation_panel).to be_highlighted_tab(items[0], "/something-else")
+      expect(navigation_panel).not_to be_highlighted_tab(items[1], "/something-else")
+      expect(navigation_panel).not_to be_highlighted_tab(items[2], "/something-else")
+    end
+  end
+
   context "when rendering tabs" do
     it "all of the nav tabs specified in the items hash are passed to it" do
       result = render_inline(described_class.new(items:))