Merge pull request #8103 from ministryofjustice/ctskf-1001-format-inj…

…ection-errors [CTSKF-1001] Format injection messages
ministryofjustice · Jan 30, 2025 · 2110713 · 2110713
2 parents c535132 + 0a2deb9
commit 2110713
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 89 deletions.
diff --git a/app/views/case_workers/_injection_errors.html.haml b/app/views/case_workers/_injection_errors.html.haml
@@ -0,0 +1,9 @@
+- if claim.injection_error.present? || claim.disk_evidence
+  %div.error-message-container
+    - if claim.injection_error
+      - claim.injection_error do |message|
+        %div.error-message
+          = message
+    - if claim.disk_evidence
+      %div.error-message
+        = t('.disk_evidence')
diff --git a/app/views/case_workers/admin/allocations/_re_allocation.html.haml b/app/views/case_workers/admin/allocations/_re_allocation.html.haml
@@ -60,26 +60,19 @@
           = govuk_table_tbody do
             = collection_check_boxes :allocation, :claim_ids, @claims, :id, :case_number do |b|
               - present(b.object) do |claim|
-                = govuk_table_row(id: dom_id(claim), class: claim.injection_error ? 'error injection-error' : nil) do
+                = govuk_table_row(id: dom_id(claim)) do
                   = govuk_table_td('data-label': t('.select')) do
-                    .govuk-form-group.error-message-container
-                      .govuk-checkboxes.govuk-checkboxes--small{ 'data-module': 'govuk-checkboxes' }
-                        .govuk-checkboxes__item
-                          = b.check_box(class: 'govuk-checkboxes__input')
-                          = b.label(class: 'govuk-label govuk-checkboxes__label'){ t('.choose_label_html', case_number: claim.case_number) }
-
-                      - claim.injection_error do |message|
-                        .error-message
-                          = message
+                    .govuk-checkboxes.govuk-checkboxes--small{ 'data-module': 'govuk-checkboxes' }
+                      .govuk-checkboxes__item
+                        = b.check_box(class: 'govuk-checkboxes__input')
+                        = b.label(class: 'govuk-label govuk-checkboxes__label'){ t('.choose_label_html', case_number: claim.case_number) }
 
                   = govuk_table_td('data-label': t('.case_number')) do
                     %span.js-test-case-number
                       = govuk_link_to claim.case_number, case_workers_claim_path(claim), 'aria-label': t('.case_number_label', case_number: claim.case_number)
                       %span.unique-id-small
                         = claim.unique_id
-                      - if claim.disk_evidence == true
-                        %span.disk-evidence
-                          = t('.disk_evidence')
+                      = render partial: 'case_workers/injection_errors', locals: { claim: claim }
 
                   = govuk_table_td('data-label': t('.court')) do
                     = claim.court.name

diff --git a/app/views/case_workers/claims/_claims_list.html.haml b/app/views/case_workers/claims/_claims_list.html.haml
@@ -51,23 +51,16 @@
             = sortable 'last_submitted_at', t('.submission_date'), 'aria-label': t('.last_submitted_at_sort_label'), id: 'last_submitted_at_ms'
 
         - present_collection(claims).each do |claim|
-          = govuk_table_row(class: claim.injection_error ? 'error injection-error' : nil) do
+          = govuk_table_row do
             = govuk_table_td('data-label': t('.type')) do
-              .error-message-container
-                = claim.pretty_type
-                - claim.injection_error do |message|
-                  .error-message
-                    = message
+              = claim.pretty_type
 
             = govuk_table_td('data-label': t('.case_number')) do
               = govuk_link_to claim.case_number,
                         case_workers_claim_path(claim),
                         class: 'js-test-case-number-link',
                         'aria-label': "View #{claim.state.humanize} Claim, Case number: #{claim.case_number}"
-
-              - if claim.disk_evidence == true
-                %span.disk-evidence
-                  = t('.disk_evidence')
+              = render partial: 'case_workers/injection_errors', locals: { claim: claim }
 
             = govuk_table_td('data-label': t('.advocate_litigator')) do
               = claim.external_user.name

diff --git a/app/webpack/javascripts/modules/Modules.AllocationDataTable.js b/app/webpack/javascripts/modules/Modules.AllocationDataTable.js
@@ -62,22 +62,16 @@ moj.Modules.AllocationDataTable = {
 
       $('td', row).addClass('govuk-table__cell')
 
-      if (data.filter.injection_errored) {
-        $(row).addClass('error injection-error')
-        $('td', row).eq(0).wrapInner('<div class="error-message-container"></div>')
-        $('td .error-message-container', row).eq(0).append('<div class="error-message">' + data.injection_errors + '</div>')
-      } else if (data.filter.cav_warning) {
-        $(row).addClass('injection-warning')
-        $('td', row).eq(0).wrapInner('<div class="warning-message-container"></div>')
-        $('td .warning-message-container', row).eq(0).append('<div class="warning-message">Conference fees not injected</div>')
-      } else if (data.filter.clar_fees_warning) {
-        $(row).addClass('injection-warning')
-        $('td', row).eq(0).wrapInner('<div class="warning-message-container"></div>')
-        $('td .warning-message-container', row).eq(0).append('<div class="warning-message">Paper heavy case or unused materials fees not injected</div>')
-      } else if (data.filter.additional_prep_fee_warning) {
-        $(row).addClass('injection-warning')
-        $('td', row).eq(0).wrapInner('<div class="warning-message-container"></div>')
-        $('td .warning-message-container', row).eq(0).append('<div class="warning-message">Additional prep fee not injected</div>')
+      const showWarning = data.filter.injection_errored || data.filter.cav_warning || data.filter.clar_fees_warning || data.filter.additional_prep_fee_warning || data.filter.disk_evidence
+
+      if (showWarning) {
+        $('td', row).eq(1).append('<div class="error-message-container"></div>')
+
+        if (data.filter.injection_errored) { $('td .error-message-container', row).append('<div class="error-message">' + data.injection_errors + '</div>') }
+        if (data.filter.cav_warning) { $('td .error-message-container', row).append('<div class="error-message">Conference fees not injected</div>') }
+        if (data.filter.clar_fees_warning) { $('td .error-message-container', row).append('<div class="error-message">Paper heavy case or unused materials fees not injected</div>') }
+        if (data.filter.additional_prep_fee_warning) { $('td .error-message-container', row).append('<div class="error-message">Additional prep fee not injected</div>') }
+        if (data.filter.disk_evidence) { $('td .error-message-container', row).append('<div class="error-message">Disk evidence</div>') }
       }
 
       return row
@@ -158,7 +152,7 @@ moj.Modules.AllocationDataTable = {
       targets: 1,
       data: null,
       render: function (data, type, full) {
-        return data.filter.disk_evidence ? '<span class="js-test-case-number"><a aria-label="View Claim, Case number: ' + data.case_number + '" href="/case_workers/claims/' + data.id + '">' + data.case_number + '</a><br/><span class="disk-evidence">Disk evidence</span></span>' : '<span class="js-test-case-number"><a aria-label="View Claim, Case number: ' + data.case_number + '" href="/case_workers/claims/' + data.id + '">' + data.case_number + '</a></span>'
+        return '<span class="js-test-case-number"><a aria-label="View Claim, Case number: ' + data.case_number + '" href="/case_workers/claims/' + data.id + '">' + data.case_number + '</a></span>'
       }
 
     }, {

diff --git a/app/webpack/stylesheets/_shame.scss b/app/webpack/stylesheets/_shame.scss
@@ -378,11 +378,6 @@ form {
   margin-bottom: $govuk-gutter;
 }
 
-.disk-evidence {
-  display: block;
-  color: $govuk-error-colour;
-}
-
 .js-allocation-page #page-h1 {
   margin-bottom: 0;
 }

diff --git a/app/webpack/stylesheets/components/_table.scss b/app/webpack/stylesheets/components/_table.scss
@@ -1,44 +1,22 @@
 // stylelint-disable max-nesting-depth, selector-class-pattern, selector-no-qualifying-type
 
 tr {
-  &.error.injection-error {
-    border-left: 5px solid $govuk-error-colour;
-    color: inherit;
+  td {
+    padding-top: $govuk-gutter;
 
-    td {
-      padding-top: $govuk-gutter;
-
-      .error-message-container {
-        position: relative;
-        padding-left: $gutter-half;
-      }
+    .error-message-container {
+      position: relative;
+      width: 200px;
+      border-left: 3px solid $govuk-error-colour;
+      @include govuk-responsive-margin(2, "top");
+      @include govuk-responsive-margin(2, "bottom");
 
       .error-message {
-        position: absolute;
-        top: -$govuk-gutter;
-        width: 320px;
+        top: $govuk-gutter;
         color: $govuk-error-colour;
         text-align: left;
-      }
-    }
-  }
-
-  &.injection-warning {
-    border-left: 5px solid govuk-colour("orange");
-
-    td {
-      padding-top: $govuk-gutter;
-
-      .warning-message-container {
-        position: relative;
-      }
-
-      .warning-message {
-        position: absolute;
-        top: -$govuk-gutter;
-        width: 500px;
-        color: govuk-colour("orange");
-        text-align: left;
+        @include govuk-responsive-margin(1, "top");
+        @include govuk-responsive-margin(1, "left");
       }
     }
   }

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -2598,7 +2598,6 @@ en:
           re_allocate: Re-allocate
           select_all: Select all
           allocated_to: Allocated to
-          disk_evidence: Disk evidence
           no_claims_allocated: There is no claim available for allocation
           number_of_claims: 'Number of claims: %{claim_count}'
           choose_label_html: <span class="govuk-visually-hidden">Select case %{case_number}</span>
@@ -2662,7 +2661,6 @@ en:
         case_type: Case type
         case_type_sort_label: 'Sort by: Case type'
         defendants: Defendants
-        disk_evidence: Disk evidence
         last_submitted_at_sort_label: 'Sort by: Last submitted at date'
         messages: Messages
         none: None
@@ -2717,6 +2715,8 @@ en:
         start_date: Effective start date
         end_date: Effective end date
         contract_number: Contract Number
+    injection_errors:
+      disk_evidence: Disk evidence
   api:
     v1:
       common_params:

diff --git a/spec/javascripts/Modules.AllocationDataTable_spec.js b/spec/javascripts/Modules.AllocationDataTable_spec.js
@@ -48,53 +48,67 @@ describe('Modules.AllocationDataTable.js', function () {
       ])
     })
 
-    it('...should have a `createdRow` callback defined', function () {
+    it('...should have a `createdRow` callback defined for injection errors', function () {
       expect(options.createdRow).toBeDefined()
-      const row = $('<tr class="govuk-table__row error injection-error"><td data-label="Select claim" class="govuk-table__cell"></td></tr>')
+      const row = $('<tr class="govuk-table__row"><td data-label="Select claim" class="govuk-table__cell"><td data-label="Case number" class="govuk-table__cell"></td></tr>')
       const data = {
         injection_errors: 'I am an error',
         filter: {
           injection_errored: 1
         }
       }
       const output = options.createdRow(row, data)
-      expect(output[0].outerHTML).toEqual('<tr class="govuk-table__row error injection-error"><td data-label="Select claim" class="govuk-table__cell"><div class="error-message-container"><div class="error-message">I am an error</div></div></td></tr>')
+      expect(output[0].outerHTML).toEqual('<tr class="govuk-table__row"><td data-label="Select claim" class="govuk-table__cell"></td><td data-label="Case number" class="govuk-table__cell"><div class="error-message-container"><div class="error-message">I am an error</div></div></td></tr>')
     })
 
     it('...should have a `createdRow` callback defined for CAV warnings', function () {
       expect(options.createdRow).toBeDefined()
-      const row = $('<tr class="govuk-table__row injection-warning"><td data-label="Select claim" class="govuk-table__cell"></td></tr>')
+      const row = $('<tr class="govuk-table__row"><td data-label="Select claim" class="govuk-table__cell"><td data-label="Case number" class="govuk-table__cell"></td></tr>')
       const data = {
         filter: {
           cav_warning: 1
         }
       }
       const output = options.createdRow(row, data)
-      expect(output[0].outerHTML).toEqual('<tr class="govuk-table__row injection-warning"><td data-label="Select claim" class="govuk-table__cell"><div class="warning-message-container"><div class="warning-message">Conference fees not injected</div></div></td></tr>')
+      expect(output[0].outerHTML).toEqual('<tr class="govuk-table__row"><td data-label="Select claim" class="govuk-table__cell"></td><td data-label="Case number" class="govuk-table__cell"><div class="error-message-container"><div class="error-message">Conference fees not injected</div></div></td></tr>')
     })
 
     it('...should have a `createdRow` callback defined for CLAR fee warnings', function () {
       expect(options.createdRow).toBeDefined()
-      const row = $('<tr class="govuk-table__row injection-warning"><td data-label="Select claim" class="govuk-table__cell"></td></tr>')
+      const row = $('<tr class="govuk-table__row"><td data-label="Select claim" class="govuk-table__cell"><td data-label="Case number" class="govuk-table__cell"></td></tr>')
       const data = {
         filter: {
           clar_fees_warning: 1
         }
       }
       const output = options.createdRow(row, data)
-      expect(output[0].outerHTML).toEqual('<tr class="govuk-table__row injection-warning"><td data-label="Select claim" class="govuk-table__cell"><div class="warning-message-container"><div class="warning-message">Paper heavy case or unused materials fees not injected</div></div></td></tr>')
+      expect(output[0].outerHTML).toEqual('<tr class="govuk-table__row"><td data-label="Select claim" class="govuk-table__cell"></td><td data-label="Case number" class="govuk-table__cell"><div class="error-message-container"><div class="error-message">Paper heavy case or unused materials fees not injected</div></div></td></tr>')
     })
 
     it('...should have a `createdRow` callback defined for Additional Prep fee warnings', function () {
       expect(options.createdRow).toBeDefined()
-      const row = $('<tr class="govuk-table__row injection-warning"><td data-label="Select claim" class="govuk-table__cell"></td></tr>')
+      const row = $('<tr class="govuk-table__row"><td data-label="Select claim" class="govuk-table__cell"><td data-label="Case number" class="govuk-table__cell"></td></tr>')
       const data = {
         filter: {
           additional_prep_fee_warning: 1
         }
       }
       const output = options.createdRow(row, data)
-      expect(output[0].outerHTML).toEqual('<tr class="govuk-table__row injection-warning"><td data-label="Select claim" class="govuk-table__cell"><div class="warning-message-container"><div class="warning-message">Additional prep fee not injected</div></div></td></tr>')
+      expect(output[0].outerHTML).toEqual('<tr class="govuk-table__row"><td data-label="Select claim" class="govuk-table__cell"></td><td data-label="Case number" class="govuk-table__cell"><div class="error-message-container"><div class="error-message">Additional prep fee not injected</div></div></td></tr>')
+    })
+
+    it('...should have a `createdRow` callback defined for multiple fee warnings', function () {
+      expect(options.createdRow).toBeDefined()
+      const row = $('<tr class="govuk-table__row"><td data-label="Select claim" class="govuk-table__cell"><td data-label="Case number" class="govuk-table__cell"></td></tr>')
+      const data = {
+        filter: {
+          cav_warning: 1,
+          clar_fees_warning: 1,
+          additional_prep_fee_warning: 1
+        }
+      }
+      const output = options.createdRow(row, data)
+      expect(output[0].outerHTML).toEqual('<tr class="govuk-table__row"><td data-label="Select claim" class="govuk-table__cell"></td><td data-label="Case number" class="govuk-table__cell"><div class="error-message-container"><div class="error-message">Conference fees not injected</div><div class="error-message">Paper heavy case or unused materials fees not injected</div><div class="error-message">Additional prep fee not injected</div></div></td></tr>')
     })
 
     it('...should have `processing`', function () {