Refactor uploads preview error banner to use a shared component

Also refactor a corresponding test to avoid asserting on the content

app/main/views/uploads.py

@@ -145,13 +145,13 @@ def uploaded_letter_preview(service_id, file_id):
     original_filename = metadata.get('filename')
     page_count = metadata.get('page_count')
     status = metadata.get('status')
-    error_message = metadata.get('message')
+    error_shortcode = metadata.get('message')
     invalid_pages = metadata.get('invalid_pages')
 
     if invalid_pages:
         invalid_pages = json.loads(invalid_pages)
 
-    error = get_letter_validation_error(error_message, invalid_pages, page_count)
+    error_message = get_letter_validation_error(error_shortcode, invalid_pages, page_count)
     template_dict = service_api_client.get_precompiled_template(service_id)
     # Override pre compiled letter template postage to none as it has not yet been picked even though
     # the pre compiled letter template has its postage set as second class as the DB currently requires
@@ -177,7 +177,8 @@ def uploaded_letter_preview(service_id, file_id):
         template=template,
         status=status,
         file_id=file_id,
-        error=error,
+        message=error_message,
+        error_code=error_shortcode,
         form=form,
     )
 

app/templates/partials/check/letter-too-long.html

@@ -1,4 +1,4 @@
-<h1 class='banner-title' data-module="track-error" data-error-type="Trying to send a letter that's too long" data-error-label="{{ upload_id }}">
+<h1 class='banner-title' data-module="track-error" data-error-type="Trying to send a letter that's too long" data-error-label="service_id: {{ current_service.id }}">
   Your letter is too long
 </h1>
 <p>

app/templates/partials/check/letter-validation-failed-banner.html

@@ -2,9 +2,13 @@
 
 {% call banner_wrapper(type='dangerous') %}
   {% if message is string %}
-    <h1 class="banner-title">{{ message }}</h1>
+    <h1 class="banner-title">
+      {{ message }}
+    </h1>
   {% else %}
-    <h1 class="banner-title">{{ message.title }}</h1>
+    <h1 class="banner-title" data-module="track-error" data-error-type="{{ error_code }}" data-error-label="precompiled letter validation failed for service_id: {{ current_service.id }}">
+      {{ message.title }}
+    </h1>
     {% if message.detail %}
       <p>
         {{ message.detail | safe }}

app/templates/views/uploads/preview.html

@@ -9,13 +9,8 @@
 {% endblock %}
 
 {% block maincolumn_content %}
-  {% if status == 'invalid' and error %}
-    {% call banner_wrapper(type='dangerous') %}
-      <h1 class="banner-title">{{ error.title }}</h1>
-      {% if error.detail %}
-        <p>{{ error.detail | safe }}</p>
-      {% endif %}
-    {% endcall %}
+  {% if status == 'invalid' and message %}
+    {% include "partials/check/letter-validation-failed-banner.html" %}
   {% elif current_service.trial_mode %}
     {% call banner_wrapper(type='dangerous') %}
       {% with

tests/app/main/views/test_uploads.py

@@ -249,11 +249,7 @@ def test_post_upload_letter_with_invalid_file(mocker, client_request):
             message='content-outside-printable-area'
         )
 
-    assert page.find('div', class_='banner-dangerous').find('h1').text == 'We cannot print your letter'
-    assert page.find(
-        'div', class_='banner-dangerous').find('p').text == (
-        'The content appears outside the printable area on page 1 Files must meet our letter specification.'
-    )
+    assert page.find('div', class_='banner-dangerous').find('h1', {"data-error-type": 'content-outside-printable-area'})
     assert not page.find('button', {'type': 'submit'})