MO-1537 Upgrade moj and govuk frontend versions (#2468)

* Upgrade moj and govuk frontend versions Ticket: https://dsdmoj.atlassian.net/browse/MO-1537 Also update to the latest version of `govuk_design_system_formbuilder`. A few deprecation and html markup changes to go along with the new versions. Deleted some old Heroku files/references. * Replace uglifier with terser This let us upgrade to the very latest version of the MoJ frontend that introduces some ES6 syntax that uglifier was not compatible with. * Remove unnecessary custom styling All this is part of the default frontend distribution. * Copy changes to some tags This is to make tags copy consistent across the board, no longer using all capital letters.
ministryofjustice · Aug 13, 2024 · c7bbfe9 · c7bbfe9
1 parent 34ae6d9
commit c7bbfe9
Show file tree

Hide file tree

Showing 33 changed files with 112 additions and 271 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -89,4 +89,5 @@ RUN chown -R appuser:appuser /app
 
 USER 1001
 
-RUN RAILS_ENV=production SECRET_KEY_BASE=key rails assets:precompile
+RUN RAILS_ENV=production SECRET_KEY_BASE=key \
+    rails assets:precompile --trace
diff --git a/Gemfile b/Gemfile
@@ -13,7 +13,7 @@ gem 'date_validator'
 gem 'faraday', '~> 1.10.3'
 gem 'net-http' # needed to undo a conflict with system libs
 gem 'govuk_notify_rails', '~> 3.0.0'
-gem 'govuk_design_system_formbuilder', '~> 2.5'
+gem 'govuk_design_system_formbuilder', '~> 5.4.1'
 gem 'json-schema', '~> 4.0'
 gem 'jsonb_accessor'
 gem 'jwt'
@@ -32,7 +32,7 @@ gem 'sentry-ruby'
 gem 'sentry-rails'
 gem 'sentry-sidekiq'
 gem 'turbolinks', '~> 5'
-gem 'uglifier', '>= 1.3.0'
+gem 'terser' # javascript compressor
 gem 'typhoeus'
 gem 'redis', '~> 4.6.0'
 gem 'fast_underscore', require: false

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -161,7 +161,6 @@ GEM
       activemodel (>= 3)
       activesupport (>= 3)
     debug_inspector (1.2.0)
-    deep_merge (1.2.2)
     diff-lcs (1.5.1)
     docile (1.4.1)
     dotenv (3.1.2)
@@ -214,11 +213,11 @@ GEM
     formtastic_i18n (0.7.0)
     globalid (1.2.1)
       activesupport (>= 6.1)
-    govuk_design_system_formbuilder (2.8.0)
-      actionview (>= 6.0)
-      activemodel (>= 6.0)
-      activesupport (>= 6.0)
-      deep_merge (~> 1.2.1)
+    govuk_design_system_formbuilder (5.4.1)
+      actionview (>= 6.1)
+      activemodel (>= 6.1)
+      activesupport (>= 6.1)
+      html-attributes-utils (~> 1)
     govuk_notify_rails (3.0.0)
       notifications-ruby-client (~> 6.2)
       rails (>= 4.1.0)
@@ -244,6 +243,8 @@ GEM
       activesupport (>= 5.2)
     hashdiff (1.1.1)
     hashie (5.0.0)
+    html-attributes-utils (1.0.2)
+      activesupport (>= 6.1.4.4)
     i18n (1.14.5)
       concurrent-ruby (~> 1.0)
     imagen (0.1.8)
@@ -591,6 +592,8 @@ GEM
     stackprof (0.2.26)
     stringio (3.1.1)
     strscan (3.1.0)
+    terser (1.2.3)
+      execjs (>= 0.3.0, < 3)
     test-prof (1.3.3.1)
     thor (1.3.1)
     tilt (2.4.0)
@@ -610,8 +613,6 @@ GEM
       ethon (>= 0.9.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    uglifier (4.2.0)
-      execjs (>= 0.3.0, < 3)
     undercover (0.5.0)
       bigdecimal
       imagen (>= 0.1.8)
@@ -669,7 +670,7 @@ DEPENDENCIES
   faraday (~> 1.10.3)
   fast_underscore
   flamegraph
-  govuk_design_system_formbuilder (~> 2.5)
+  govuk_design_system_formbuilder (~> 5.4.1)
   govuk_notify_rails (~> 3.0.0)
   guard-rspec
   guard-rubocop
@@ -721,13 +722,13 @@ DEPENDENCIES
   spring
   spring-watcher-listen (~> 2.1.0)
   stackprof
+  terser
   test-prof
   timecop
   turbolinks (~> 5)
   turnout
   typhoeus
   tzinfo-data
-  uglifier (>= 1.3.0)
   undercover
   valid_email2
   vcr

diff --git a/app.json b/app.json
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -1,4 +1,5 @@
 //= link_tree ../images
+//= link_tree ../../../node_modules/govuk-frontend/dist/govuk/assets
 //= link_tree ../../../node_modules/@ministryofjustice/frontend/moj/assets/images
 //= link_directory ../javascripts .js
 //= link application.css
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -12,6 +12,6 @@
 //
 //= require rails-ujs
 //= require turbolinks
-//= require 'govuk/all'
-//= require 'moj/all'
+//= require govuk/all.bundle
+//= require moj/all
 //= require_tree .
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -15,8 +15,6 @@
 @import "gov_uk";
 
 // GOV.UK Design System customizations
-@import "gov_uk_tag";
-@import "gov_uk_button_group";
 @import "gov_uk_notification_banner";
 
 // Then application specific components

diff --git a/app/assets/stylesheets/gov_uk.scss b/app/assets/stylesheets/gov_uk.scss
@@ -1,9 +1,14 @@
 $govuk-global-styles: true;
+$govuk-new-typography-scale: true;
 $govuk-image-url-function: "image-url";
 $govuk-font-url-function: "asset-url";
 
-@import "govuk/all";
-@import "moj/all";
+$govuk-suppressed-warnings: (
+  govuk-typography-scale-14
+);
+
+@import "govuk-frontend/dist/govuk/index";
+@import "@ministryofjustice/frontend/moj/all";
 
 .govuk-data-value {
    @extend .govuk-heading-l;

diff --git a/app/assets/stylesheets/gov_uk_button_group.scss b/app/assets/stylesheets/gov_uk_button_group.scss
diff --git a/app/assets/stylesheets/gov_uk_notification_banner.scss b/app/assets/stylesheets/gov_uk_notification_banner.scss
@@ -23,10 +23,8 @@
   // we need to override the text colour for that combination of selectors so
   // so that unvisited links styled as buttons do not end up with dark blue
   // text when focussed.
-  @include govuk-compatibility(govuk_template) {
-    &:link:focus {
-      color: $govuk-focus-text-colour;
-    }
+  &:link:focus {
+    color: $govuk-focus-text-colour;
   }
 }
 

diff --git a/app/assets/stylesheets/gov_uk_tag.scss b/app/assets/stylesheets/gov_uk_tag.scss
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -59,7 +59,7 @@ def sentence_type_label(offender)
   def vlo_tag(offender)
     return '' unless offender.active_vlo? || offender.victim_liaison_officers.any?
 
-    tag.span('VLO CONTACT', class: 'govuk-tag govuk-tag--red')
+    tag.span('VLO contact', class: 'govuk-tag govuk-tag--red')
   end
 
   def humanized_bool(bool_value)

diff --git a/app/helpers/early_allocation_helper.rb b/app/helpers/early_allocation_helper.rb
@@ -70,10 +70,10 @@ def pom_full_name(early_allocation)
   end
 
   EARLY_ALLOCATION_STATUSES = {
-    eligible: 'ELIGIBLE',
-    decision_pending: 'DECISION PENDING',
-    assessment_saved: 'ASSESSMENT SAVED',
+    eligible: 'eligible',
+    decision_pending: 'decision pending',
+    assessment_saved: 'assessment saved',
     # in status terms we don't care about the need to make a new assessment
-    call_to_action: 'ASSESSMENT SAVED'
+    call_to_action: 'assessment saved'
   }.freeze
 end
diff --git a/app/views/allocation_staff/compare_poms.html.erb b/app/views/allocation_staff/compare_poms.html.erb
@@ -81,7 +81,7 @@
   <%= render layout: 'grid_compare_row', locals: {poms: @poms, current_pom_id: @current_pom_id} do |pom| %>
     <% if @coworking %>
       <% if @current_pom_id == pom.staff_id %>
-        <button disabled="disabled" aria-disabled="true" class="govuk-button govuk-button--disabled" data-module="govuk-button">
+        <button disabled="disabled" aria-disabled="true" class="govuk-button" data-module="govuk-button">
           Allocate co-working POM
         </button>
       <% else %>
@@ -96,4 +96,4 @@
                   class: 'govuk-button' %>
     <% end %>
   <% end %>
-</div>
+</div>
diff --git a/app/views/early_allocations/index.html.erb b/app/views/early_allocations/index.html.erb
@@ -22,7 +22,7 @@
             </span>
           </h2>
         </div>
-        <div id="accordion-default-content-1" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-1">
+        <div id="accordion-default-content-1" class="govuk-accordion__section-content">
           <%= render 'early_allocations_list', early_allocations: @early_allocations, prison_id: @prison.code, prisoner_id: @prisoner.offender_no %>
         </div>
       </div>