From fd196c65349d187291d5f77de1e0de924fd863dc Mon Sep 17 00:00:00 2001 From: Jonathan Bobel Date: Thu, 5 Oct 2023 16:20:37 -0400 Subject: [PATCH 1/2] 814 - Adding alert component to CSV error area --- app/assets/javascripts/errorBanner.js | 1 - app/assets/javascripts/fileUpload.js | 4 +- app/assets/javascripts/main.js | 2 - .../components/components/alert/template.njk | 2 +- app/templates/views/check/column-errors.html | 53 ++++++++++--------- 5 files changed, 31 insertions(+), 31 deletions(-) diff --git a/app/assets/javascripts/errorBanner.js b/app/assets/javascripts/errorBanner.js index 2efef7d95..c05c821ea 100644 --- a/app/assets/javascripts/errorBanner.js +++ b/app/assets/javascripts/errorBanner.js @@ -12,6 +12,5 @@ hideBanner: () => $('.banner-dangerous').addClass('display-none'), showBanner: () => $('.banner-dangerous') .removeClass('display-none') - .trigger('focus'), }; })(window); diff --git a/app/assets/javascripts/fileUpload.js b/app/assets/javascripts/fileUpload.js index 9ef72d531..ea6c7ac62 100644 --- a/app/assets/javascripts/fileUpload.js +++ b/app/assets/javascripts/fileUpload.js @@ -15,9 +15,9 @@ // The label gets styled like a button and is used to hide the native file upload control. This is so that // users see a button that looks like the others on the site. -// - this.$form.find('label.file-upload-button').addClass('usa-button margin-bottom-1'); + this.$form.find('label.file-upload-button').addClass('usa-button margin-bottom-1').attr( {role: 'button', tabindex: '0'} ); + // Clear the form if the user navigates back to the page $(window).on("pageshow", () => this.$form[0].reset()); diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 144b2ba67..3cc17c20d 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -16,8 +16,6 @@ $(() => GOVUK.modules.start()); $(() => $('.error-message, .usa-error-message').eq(0).parent('label').next('input').trigger('focus')); -$(() => $('.banner-dangerous').eq(0).trigger('focus')); - $(() => $('.govuk-header__container').on('click', function() { $(this).css('border-color', '#005ea5'); })); diff --git a/app/templates/components/components/alert/template.njk b/app/templates/components/components/alert/template.njk index 85d40a785..d89405e64 100644 --- a/app/templates/components/components/alert/template.njk +++ b/app/templates/components/components/alert/template.njk @@ -11,7 +11,7 @@
{{params.heading}}

- {{params.text}} + {{params.text | safe }}

diff --git a/app/templates/views/check/column-errors.html b/app/templates/views/check/column-errors.html index d63a1258c..83cc92907 100644 --- a/app/templates/views/check/column-errors.html +++ b/app/templates/views/check/column-errors.html @@ -4,6 +4,8 @@ {% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %} {% from "components/file-upload.html" import file_upload %} {% from "components/components/back-link/macro.njk" import usaBackLink %} +{% from "components/components/alert/macro.njk" import usaAlert %} + {% block service_page_title %} Error @@ -64,34 +66,35 @@ {% elif recipients.duplicate_recipient_column_headers %} -

- There’s a problem with your column names -

-

- We found more than one column called {{ ( - recipients.duplicate_recipient_column_headers - ) | formatted_list( - conjunction='or', - prefix='', - prefix_plural='' - ) }}. -

-

- Delete or rename one of these columns and try again. -

+ {% set duplicate_recipient_column_headers = recipients.duplicate_recipient_column_headers + | formatted_list( + conjunction='or', + prefix='', + prefix_plural='' + ) %} + + {{ usaAlert({ + "heading": "There’s a problem with your column names", + "text": "We found more than one column called " + duplicate_recipient_column_headers + ". Delete or rename one of these columns and try again.", + "type": "error", + }) + }} {% elif recipients.missing_column_headers %} -

- Your column names need to match the double brackets in your template -

-

- Your file is missing {{ recipients.missing_column_headers | formatted_list( - conjunction='and', - prefix='a column called ', - prefix_plural='columns called ' - ) }}. -

+ {% set missing_column_headers = recipients.missing_column_headers | formatted_list( + conjunction='and', + prefix='a column called ', + prefix_plural='columns called ' + )%} + + {{ usaAlert({ + "heading": "Your column names need to match the double brackets in your template", + "text": "Your file is missing " + missing_column_headers + ".", + "type": "error", + }) + }} + {% elif sent_previously %} From af2da54ffce4f654b362fb2a4a94b03ac126a8fa Mon Sep 17 00:00:00 2001 From: Jonathan Bobel Date: Fri, 6 Oct 2023 11:31:28 -0400 Subject: [PATCH 2/2] Decided not to use the template and include the USWDS alert one-by-one --- .../partials/check/message-too-long.html | 16 +- .../check/not-allowed-to-send-to.html | 28 +- .../partials/check/sent-previously.html | 14 +- .../partials/check/too-many-messages.html | 49 +-- app/templates/views/check/column-errors.html | 318 +++++++++--------- 5 files changed, 226 insertions(+), 199 deletions(-) diff --git a/app/templates/partials/check/message-too-long.html b/app/templates/partials/check/message-too-long.html index 35facdffe..f44ed84b5 100644 --- a/app/templates/partials/check/message-too-long.html +++ b/app/templates/partials/check/message-too-long.html @@ -1,7 +1,9 @@ -

- Message too long -

-

- Text messages cannot be longer than {{ SMS_CHAR_COUNT_LIMIT }} characters. - Your message is {{ template.content_count }} characters. -

+ diff --git a/app/templates/partials/check/not-allowed-to-send-to.html b/app/templates/partials/check/not-allowed-to-send-to.html index ff566a76a..b438f296f 100644 --- a/app/templates/partials/check/not-allowed-to-send-to.html +++ b/app/templates/partials/check/not-allowed-to-send-to.html @@ -1,12 +1,16 @@ -

- You cannot send to - {{ 'this' if count_of_recipients == 1 else 'these' }} - {{ template_type_label }} - {%- if count_of_recipients != 1 -%} - {{ 'es' if 'email address' == template_type_label else 's' }} - {%- endif %} -

-

- In trial mode you can only - send to yourself and members of your team -

+ diff --git a/app/templates/partials/check/sent-previously.html b/app/templates/partials/check/sent-previously.html index 0f657e047..49bf82cdf 100644 --- a/app/templates/partials/check/sent-previously.html +++ b/app/templates/partials/check/sent-previously.html @@ -1,6 +1,8 @@ -

- These messages have already been sent today -

-

- If you need to resend them, rename the file and upload it again. -

+ \ No newline at end of file diff --git a/app/templates/partials/check/too-many-messages.html b/app/templates/partials/check/too-many-messages.html index ef2a87f06..932574981 100644 --- a/app/templates/partials/check/too-many-messages.html +++ b/app/templates/partials/check/too-many-messages.html @@ -1,23 +1,30 @@ -

- {% if original_file_name %} - Too many recipients - {% else %} - Daily limit reached - {% endif %} -

-

- You can only send {{ current_service.message_limit|format_thousands }} messages per day - {%- if current_service.trial_mode %} - in trial mode - {%- endif -%} - . -

-{% if original_file_name %} -

- {% if current_service.message_limit != remaining_messages %} +

+ + + diff --git a/app/templates/views/check/column-errors.html b/app/templates/views/check/column-errors.html index 83cc92907..404302ffe 100644 --- a/app/templates/views/check/column-errors.html +++ b/app/templates/views/check/column-errors.html @@ -4,198 +4,210 @@ {% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %} {% from "components/file-upload.html" import file_upload %} {% from "components/components/back-link/macro.njk" import usaBackLink %} -{% from "components/components/alert/macro.njk" import usaAlert %} - {% block service_page_title %} - Error +Error {% endblock %} {% block backLink %} - {{ usaBackLink({ "href": back_link }) }} +{{ usaBackLink({ "href": back_link }) }} {% endblock %} {% block maincolumn_content %} -
- {% call banner_wrapper(type='dangerous') %} +
+ {% call banner_wrapper(type='dangerous') %} - {% if recipients.too_many_rows %} + {% if recipients.too_many_rows %} -

- Your file has too many rows -

-

+

- {% elif not count_of_recipients %} + {% elif not count_of_recipients %} -

- Your file is missing some rows -

- {% if recipients.missing_column_headers %} -

- It needs at least one row of data, and {{ recipients.missing_column_headers | sort() | formatted_list( - prefix='a column called', - prefix_plural='columns called' - ) }}. -

- {% else %} -

- It needs at least one row of data. -

- {% endif %} + - {% elif not recipients.has_recipient_columns %} + {% elif not recipients.has_recipient_columns %} -

- There’s a problem with your column names -

-

- Your file needs a column called ‘{{ first_recipient_column }}’. -

-

- Right now it has {{ recipients.column_headers | formatted_list( - prefix='one column, called ', - prefix_plural='columns called ' - ) }}. -

+ - {% elif recipients.duplicate_recipient_column_headers %} + {% elif recipients.duplicate_recipient_column_headers %} - {% set duplicate_recipient_column_headers = recipients.duplicate_recipient_column_headers - | formatted_list( + - {% elif recipients.missing_column_headers %} + {% elif recipients.missing_column_headers %} - {% set missing_column_headers = recipients.missing_column_headers | formatted_list( +