NHSDigital · bshand · Jan 31, 2025 · Jan 23, 2025 · Jan 24, 2025 · Jan 24, 2025
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -45,6 +45,8 @@ jobs:
       run: bundle install
     - name: Prepare SQLite
       run: RAILS_ENV=test bundle exec rake db:migrate --trace
+    - name: Precompile assets
+      run: RAILS_ENV=test bundle exec rails app:assets:clobber app:assets:precompile
     - name: Run tests
       run: bundle exec rails test
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [Unreleased]
-* no unreleased changes
+### Changed
+* new views with bootstrap 5 styles
+* switch to bootstrap-icons as glyphicon no longer available in bootstrap 5
 
 ## 2.3.2 / 2024-11-21
 ### Fixed

diff --git a/app/helpers/ndr_error/application_helper.rb b/app/helpers/ndr_error/application_helper.rb
@@ -2,11 +2,6 @@ module NdrError
   # Application-wide helpers.
   # TODO: await ndr_ui gem!
   module ApplicationHelper
-    # Bootstrap icon tag.
-    def glyphicon_tag(type)
-      content_tag(:span, '', class: "glyphicon glyphicon-#{type}")
-    end
-
     # Pagination helper for will_paginate:
     def pagination_summary_for(collection)
       page    = collection.current_page

diff --git a/app/helpers/ndr_error/errors_helper.rb b/app/helpers/ndr_error/errors_helper.rb
@@ -56,25 +56,25 @@ def downstream_fingerprint_link(print)
       bootstrap_list_link_to hash + ' - ' + text, error_fingerprint_path(print)
     end
 
-    def ticket_link_for(fingerprint, small = false)
-      text = glyphicon_tag('asterisk') + ' View ticket'
-      css  = 'btn btn-default'
+    def ticket_link_for(fingerprint, small = false) # rubocop:disable Style/OptionalBooleanParameter
+      text = "#{bootstrap_icon_tag('asterisk', :bi)} View ticket"
+      css  = 'btn btn-outline-secondary'
       css << ' btn-xs' if small
 
       url = fingerprint.ticket_url
       link_to(text, /^http/i =~ url ? url : "http://#{url}", class: css)
     end
 
     def edit_button_for(fingerprint)
-      css   = 'btn btn-default'
-      text  = glyphicon_tag('pencil') + ' Edit Ticket'
+      css   = 'btn btn-outline-secondary'
+      text  = "#{bootstrap_icon_tag('pencil', :bi)} Edit Ticket"
 
       link_to(text, edit_error_fingerprint_path(fingerprint), class: css)
     end
 
     def purge_button_for(fingerprint)
       css   = 'btn btn-danger'
-      text  = glyphicon_tag('trash icon-white') + ' Purge'
+      text  = "#{bootstrap_icon_tag('trash-fill', :bi)} Purge"
 
       options = {
         'method'       => :delete,
@@ -86,18 +86,18 @@ def purge_button_for(fingerprint)
     end
 
     def previous_button_for(error)
-      css = 'btn btn-default'
+      css = 'btn btn-outline-secondary'
       css << ' disabled' if error.nil?
-      text = glyphicon_tag('chevron-left')
+      text = bootstrap_icon_tag('chevron-left', :bi)
       path = error.nil? ? '#' : error_fingerprint_path(error.error_fingerprint, log_id: error)
 
       link_to(text, path, class: css)
     end
 
     def next_button_for(error)
-      css = 'btn btn-default'
+      css = 'btn btn-outline-secondary'
       css << ' disabled' if error.nil?
-      text = glyphicon_tag('chevron-right')
+      text = bootstrap_icon_tag('chevron-right', :bi)
       path = error.nil? ? '#' : error_fingerprint_path(error.error_fingerprint, log_id: error)
 
       link_to(text, path, class: css)

diff --git a/app/views/layouts/ndr_error/ndr_error.html.erb b/app/views/layouts/ndr_error/ndr_error.html.erb
@@ -8,19 +8,14 @@
 </head>
 <body class="bootstrap">
 
-<div class="navbar navbar-default navbar-fixed-top" role="navigation">
+<div class="navbar navbar-expand-lg fixed-top bg-body-tertiary" role="navigation">
   <div class="container-fluid">
-    <!-- Brand and toggle get grouped for better mobile display -->
     <div class="navbar-header">
-      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menubar" aria-controls="menubar" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
       </button>
-
       <%= link_to '&#171; Back to App'.html_safe, '/', class: "navbar-brand" %>
-      <p class="navbar-text">Error Logging by NDR</p>
+      <span class="navbar-text">Error Logging by NDR</span>
     </div>
   </div>
 </div>

diff --git a/app/views/ndr_error/errors/edit.html.erb b/app/views/ndr_error/errors/edit.html.erb
@@ -16,5 +16,5 @@
   </div>
 
   <%= form.submit 'Update', class: 'btn btn-primary' %>
-  <%= link_to 'Cancel', error_fingerprint_path(@fingerprint), class: 'btn btn-default' %>
+  <%= link_to 'Cancel', error_fingerprint_path(@fingerprint), class: 'btn btn-outline-secondary' %>
 <% end %>
diff --git a/app/views/ndr_error/errors/index.html.erb b/app/views/ndr_error/errors/index.html.erb
@@ -5,16 +5,14 @@
 %>
 
 <div class="row">
-  <div id="search_form_container" class="col-md-4 col-md-offset-8">
+  <div id="search_form_container" class="col-md-4 offset-md-8">
   <%= form_tag(error_fingerprints_path, method: :get) do %>
     <div class="input-group">
       <% if @keywords.any? %>
-        <%= link_to glyphicon_tag('list icon-white') + ' ' + glyphicon_tag('arrow-left icon-white'), error_fingerprints_path, class: 'btn btn-info input-group-addon' %>
+        <%= link_to bootstrap_icon_tag(:'list-task', :bi) + ' ' + bootstrap_icon_tag(:'arrow-left-circle-fill', :bi), error_fingerprints_path, class: 'btn btn-info' %>
       <% end %>
       <%= text_field_tag :q, @keywords.join(', '), class: 'form-control search-query' %>
-      <span class="input-group-btn">
-        <button type="submit" class="btn btn-default"><%= glyphicon_tag('search') %></button>
-      </span>
+      <button type="submit" class="btn btn-outline-secondary"><%= bootstrap_icon_tag(:search, :bi) %></button>
     </div>
   <% end %>
   </div>
@@ -45,7 +43,7 @@
             <%= latest_user_for(fingerprint, @keywords) %>
           </td>
           <td>
-            <div class="pull-right">
+            <div class="float-end">
               <%= ticket_link_for(fingerprint, true) if fingerprint.ticket_url.present? %>
             </div>
 
@@ -57,7 +55,8 @@
       </tbody>
     </table>
 
-    <span class="pull-right text-muted"><%= pagination_summary_for(@fingerprints) %></span>
+    <span class="float-end text-muted"><%= pagination_summary_for(@fingerprints) %></span>
+    <%# TODO: use bootstrap_will_paginate %>
     <%= will_paginate(@fingerprints) %>
   </div>
 </div>
diff --git a/app/views/ndr_error/errors/show.html.erb b/app/views/ndr_error/errors/show.html.erb
@@ -7,7 +7,7 @@
 
 <hr />
 <div class="clearfix">
-  <div class="pull-right">
+  <div class="float-end">
     <div class="btn-group">
       <%= ticket_link_for(@fingerprint) if @fingerprint.ticket_url.present? %>
       <%= edit_button_for(@fingerprint) if user_can_edit_errors? %>
@@ -22,7 +22,7 @@
         <%= previous_button_for(@error.previous) %>
 
         <div class="btn-group">
-          <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
+          <a class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" href="#">
             <%= pluralize(@error.similar_errors.length - 1, 'Similar Error') %> Stored
             <span class="caret"></span>
           </a>
@@ -39,13 +39,13 @@
 
     <% if @fingerprint.causal_error_fingerprint %>
       <div class="btn-group">
-        <%= link_to bootstrap_icon_tag('arrow-up') + ' View Cause', error_fingerprint_path(@fingerprint.causal_error_fingerprint), class: 'btn btn-default' %>
+        <%= link_to bootstrap_icon_tag('arrow-up') + ' View Cause', error_fingerprint_path(@fingerprint.causal_error_fingerprint), class: 'btn btn-outline-secondary' %>
       </div>
     <% end %>
 
     <% if @fingerprint.caused_error_fingerprints.any? %>
       <div class="btn-group">
-        <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
+        <a class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" href="#">
           <%= pluralize(@fingerprint.caused_error_fingerprints.length, 'Downstream Error') %> Stored
           <span class="caret"></span>
         </a>
@@ -117,7 +117,7 @@
 <% end %>
 
 <h4>
-  <small class="pull-right"><%= check_box_tag :toggle_app_trace_only %> only app trace?</small>
+  <small class="float-end"><%= check_box_tag :toggle_app_trace_only %> only app trace?</small>
   Backtrace:
 </h4>
 <% if (highlighted_trace = highlighted_trace_for(@error)).present? %>

diff --git a/ndr_error.gemspec b/ndr_error.gemspec
@@ -30,7 +30,7 @@ Gem::Specification.new do |s|
 
   s.add_dependency 'will_paginate'
 
-  s.add_dependency 'ndr_ui', '< 5.0'
+  s.add_dependency 'ndr_ui', '>= 5.0'
 
   s.add_development_dependency 'pry'
   s.add_development_dependency 'puma'

diff --git a/test/unit/helpers/ndr_error/application_helper_test.rb b/test/unit/helpers/ndr_error/application_helper_test.rb
@@ -3,12 +3,6 @@
 module NdrError
   # Test application-wide helpers
   class ApplicationHelperTest < ActionView::TestCase
-    test 'glyphicon_tag' do
-      expected = '<span class="glyphicon glyphicon-padlock"></span>'
-      actual   = glyphicon_tag(:padlock)
-      assert_equal expected, actual
-    end
-
     test 'pagination_summary_for within range' do
       collection = (1..10).to_a.paginate(per_page: 3, page: 2)
       assert_equal 'Showing 4 - 6 of 10', pagination_summary_for(collection)