From 45a21054a03f9b37dfdac0e7e20c1bc16a725e54 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 29 Oct 2021 17:00:30 -0400 Subject: [PATCH 01/11] Refactor Alert partial to ViewComponent **Why**: Consistency, for all the benefits of using ViewComponent in the first place, and to avoid further entrenching ourselves into the partial with ongoing work including alerts (e.g. vendor outages handling). --- .erb-lint.yml | 3 -- app/components/alert_component.html.erb | 9 ++++++ app/components/alert_component.rb | 28 +++++++++++++++++++ app/views/accounts/_password_reset.html.erb | 2 +- .../_pending_profile_bounced_gpo.html.erb | 2 +- .../accounts/_pending_profile_gpo.html.erb | 2 +- app/views/accounts/_personal_key.html.erb | 2 +- .../_service_provider_continue.html.erb | 4 +-- .../forgot_password/_resend_alert.html.erb | 6 ++-- .../idv/capture_doc/capture_complete.html.erb | 2 +- .../idv/doc_auth/_error_messages.html.erb | 8 +++--- app/views/idv/doc_auth/_ssn_init.html.erb | 8 +++--- app/views/idv/doc_auth/agreement.html.erb | 18 ++++++------ app/views/idv/doc_auth/link_sent.html.erb | 12 ++++---- app/views/idv/doc_auth/send_link.html.erb | 6 ++-- app/views/idv/phone/new.html.erb | 16 +++++------ app/views/reactivate_account/index.html.erb | 8 +++--- app/views/shared/_flashes.html.erb | 17 ++++++----- .../shared/_maintenance_window_alert.html.erb | 2 +- .../_personal_key_confirmation_modal.html.erb | 16 +++++------ app/views/shared/_sp_alert.html.erb | 2 +- app/views/sign_up/emails/show.html.erb | 6 ++-- app/views/sign_up/registrations/new.html.erb | 6 ++-- app/views/users/emails/verify.html.erb | 10 +++---- .../index.html.erb | 2 +- .../simple_form/error_notification.rb | 9 +++--- .../alert_component_spec.rb} | 28 +++++++++---------- 27 files changed, 134 insertions(+), 100 deletions(-) create mode 100644 app/components/alert_component.html.erb create mode 100644 app/components/alert_component.rb rename spec/{views/shared/_alert.html.erb_spec.rb => components/alert_component_spec.rb} (53%) diff --git a/.erb-lint.yml b/.erb-lint.yml index 8970f401e18..28149675943 100644 --- a/.erb-lint.yml +++ b/.erb-lint.yml @@ -26,7 +26,6 @@ linters: - '*/app/views/idv/capture_doc/document_capture.html.erb' - '*/app/views/idv/confirmations/show.html.erb' - '*/app/views/idv/doc_auth/_back.html.erb' - - '*/app/views/idv/doc_auth/_error_messages.html.erb' - '*/app/views/idv/doc_auth/_ssn_init.html.erb' - '*/app/views/idv/doc_auth/_ssn_update.html.erb' - '*/app/views/idv/doc_auth/agreement.html.erb' @@ -47,14 +46,12 @@ linters: - '*/app/views/shared/_banner.html.erb' - '*/app/views/shared/_block_link.html.erb' - '*/app/views/shared/_email_languages.html.erb' - - '*/app/views/shared/_flashes.html.erb' - '*/app/views/shared/_footer_lite.html.erb' - '*/app/views/shared/_maintenance_window_alert.html.erb' - '*/app/views/shared/_masked_text.html.erb' - '*/app/views/shared/_nav_branded.html.erb' - '*/app/views/shared/_one_time_code_input.html.erb' - '*/app/views/shared/_personal_key.html.erb' - - '*/app/views/shared/_personal_key_confirmation_modal.html.erb' - '*/app/views/shared/_spinner_button.html.erb' - '*/app/views/shared/_ssn_field.html.erb' - '*/app/views/shared/_step_indicator.html.erb' diff --git a/app/components/alert_component.html.erb b/app/components/alert_component.html.erb new file mode 100644 index 00000000000..7c6d1219ad6 --- /dev/null +++ b/app/components/alert_component.html.erb @@ -0,0 +1,9 @@ +<%= tag.div( + **tag_options, + class: ['usa-alert', "usa-alert--#{type}", *tag_options[:class]], + role: role, + ) do %> +
+ <%= content_tag(text_tag, content, class: 'usa-alert__text') %> +
+<% end %> diff --git a/app/components/alert_component.rb b/app/components/alert_component.rb new file mode 100644 index 00000000000..83e16c51e92 --- /dev/null +++ b/app/components/alert_component.rb @@ -0,0 +1,28 @@ +class AlertComponent < BaseComponent + VALID_TYPES = [:info, :success, :error, :other].freeze + + attr_reader :type, :message, :tag_options, :text_tag + + def initialize(type: :info, text_tag: 'p', message: nil, **tag_options) + if !VALID_TYPES.include?(type) + raise ArgumentError, "`type` of #{type} is invalid, expected one of #{VALID_TYPES}" + end + + @type = type + @message = message + @tag_options = tag_options + @text_tag = text_tag + end + + def role + if type == :error + 'alert' + else + 'status' + end + end + + def content + @message || super + end +end diff --git a/app/views/accounts/_password_reset.html.erb b/app/views/accounts/_password_reset.html.erb index 219ee48c5bf..4aaf4b8bd80 100644 --- a/app/views/accounts/_password_reset.html.erb +++ b/app/views/accounts/_password_reset.html.erb @@ -1,4 +1,4 @@ -<%= render 'shared/alert', { type: 'warning', text_tag: 'div' } do %> +<%= render AlertComponent.new(type: :warning, text_tag: 'div') do %>

<%= t('account.index.reactivation.instructions') %>

diff --git a/app/views/accounts/_pending_profile_bounced_gpo.html.erb b/app/views/accounts/_pending_profile_bounced_gpo.html.erb index 6291582f886..256c67db641 100644 --- a/app/views/accounts/_pending_profile_bounced_gpo.html.erb +++ b/app/views/accounts/_pending_profile_bounced_gpo.html.erb @@ -1,4 +1,4 @@ -<%= render 'shared/alert', { type: 'warning', text_tag: 'div' } do %> +<%= render AlertComponent.new(type: :warning, text_tag: 'div') do %>

<%= t('account.index.verification.bounced') %>

diff --git a/app/views/accounts/_pending_profile_gpo.html.erb b/app/views/accounts/_pending_profile_gpo.html.erb index 413e069eda1..d1e6cdefaa3 100644 --- a/app/views/accounts/_pending_profile_gpo.html.erb +++ b/app/views/accounts/_pending_profile_gpo.html.erb @@ -1,4 +1,4 @@ -<%= render 'shared/alert', { type: 'warning', text_tag: 'div' } do %> +<%= render AlertComponent.new(type: :warning, text_tag: 'div') do %>

<%= t('account.index.verification.instructions') %>

diff --git a/app/views/accounts/_personal_key.html.erb b/app/views/accounts/_personal_key.html.erb index 09c6adb4de2..b7b44d02c44 100644 --- a/app/views/accounts/_personal_key.html.erb +++ b/app/views/accounts/_personal_key.html.erb @@ -1,4 +1,4 @@ -<%= render 'shared/alert', { type: 'warning', class: 'margin-bottom-2', text_tag: 'div' } do %> +<%= render AlertComponent.new(type: :warning, class: 'margin-bottom-2', text_tag: 'div') do %>

<%= t('idv.messages.personal_key') %>

diff --git a/app/views/accounts/_service_provider_continue.html.erb b/app/views/accounts/_service_provider_continue.html.erb index 2b0e9d8f120..efa4210eca3 100644 --- a/app/views/accounts/_service_provider_continue.html.erb +++ b/app/views/accounts/_service_provider_continue.html.erb @@ -1,3 +1,3 @@ -<%= render 'shared/alert', { type: 'info', text_tag: 'div' } do %> - <%= link_to(t('account.index.continue_to_service_provider', service_provider: view_model.sp_name), view_model.sp_session_request_url) %> +<%= render AlertComponent.new(type: :info, text_tag: 'div') do %> + <%= link_to(t('account.index.continue_to_service_provider', service_provider: view_model.sp_name), view_model.sp_session_request_url) %> <% end %> diff --git a/app/views/forgot_password/_resend_alert.html.erb b/app/views/forgot_password/_resend_alert.html.erb index 741a11e4326..5377a916c1b 100644 --- a/app/views/forgot_password/_resend_alert.html.erb +++ b/app/views/forgot_password/_resend_alert.html.erb @@ -1,5 +1,5 @@ -<%= render 'shared/alert', { - type: 'success', +<%= render AlertComponent.new( + type: :success, class: 'margin-bottom-4', message: t('notices.forgot_password.resend_email_success'), - } %> + ) %> diff --git a/app/views/idv/capture_doc/capture_complete.html.erb b/app/views/idv/capture_doc/capture_complete.html.erb index bcbd7db2729..319e46e5586 100644 --- a/app/views/idv/capture_doc/capture_complete.html.erb +++ b/app/views/idv/capture_doc/capture_complete.html.erb @@ -1,6 +1,6 @@ <% title t('titles.doc_auth.switch_back') %> -<%= render 'shared/alert', { type: 'success', class: 'margin-bottom-4' } do %> +<%= render AlertComponent.new(type: :success, class: 'margin-bottom-4') do %> <%= t('doc_auth.headings.capture_complete') %> <% end %> diff --git a/app/views/idv/doc_auth/_error_messages.html.erb b/app/views/idv/doc_auth/_error_messages.html.erb index 1546f4c8ca4..c8f591e659c 100644 --- a/app/views/idv/doc_auth/_error_messages.html.erb +++ b/app/views/idv/doc_auth/_error_messages.html.erb @@ -1,8 +1,8 @@ <% unless flow_session[:error_message].nil? %> - <%= render 'shared/alert', { - type: 'error', - class: 'margin-bottom-4', - } do %> + <%= render AlertComponent.new( + type: :error, + class: 'margin-bottom-4', + ) do %> <%= flow_session[:error_message] %> <% end %> <% end %> diff --git a/app/views/idv/doc_auth/_ssn_init.html.erb b/app/views/idv/doc_auth/_ssn_init.html.erb index 5e73d3f2f67..e6343474656 100644 --- a/app/views/idv/doc_auth/_ssn_init.html.erb +++ b/app/views/idv/doc_auth/_ssn_init.html.erb @@ -1,9 +1,9 @@ <% title t('titles.doc_auth.ssn') %> -<%= render 'shared/alert', { - type: 'success', - class: 'margin-bottom-4' -} do %> +<%= render AlertComponent.new( + type: :success, + class: 'margin-bottom-4' + ) do %> <%= t('doc_auth.headings.capture_complete') %> <% end %> diff --git a/app/views/idv/doc_auth/agreement.html.erb b/app/views/idv/doc_auth/agreement.html.erb index d88e745257e..3fb524c2414 100644 --- a/app/views/idv/doc_auth/agreement.html.erb +++ b/app/views/idv/doc_auth/agreement.html.erb @@ -1,14 +1,14 @@ <% title t('titles.doc_auth.get_started') %> -<%= render 'shared/alert', { - type: 'error', - class: [ - 'js-consent-form-alert', - 'margin-bottom-4', - flow_session[:error_message].blank? && 'display-none', - ].select(&:present?), - message: flow_session[:error_message].presence || t('errors.doc_auth.consent_form'), -} %> +<%= render AlertComponent.new( + type: :error, + class: [ + 'js-consent-form-alert', + 'margin-bottom-4', + flow_session[:error_message].blank? && 'display-none', + ].select(&:present?), + message: flow_session[:error_message].presence || t('errors.doc_auth.consent_form'), + ) %>

<%= t('doc_auth.headings.lets_go') %>

<%= t('doc_auth.info.lets_go') %>

diff --git a/app/views/idv/doc_auth/link_sent.html.erb b/app/views/idv/doc_auth/link_sent.html.erb index a899a322b25..f5d73acf496 100644 --- a/app/views/idv/doc_auth/link_sent.html.erb +++ b/app/views/idv/doc_auth/link_sent.html.erb @@ -5,11 +5,11 @@ <%= content_for(:meta_refresh) { "#{@meta_refresh}" } %> <% end %> <% if flow_session[:error_message] %> - <%= render 'shared/alert', { - type: 'error', - class: 'margin-bottom-4', - message: flow_session[:error_message], - } %> + <%= render AlertComponent.new( + type: :error, + class: 'margin-bottom-4', + message: flow_session[:error_message], + ) %> <% end %>

<%= t('doc_auth.headings.text_message') %>

@@ -21,7 +21,7 @@

<%= t('doc_auth.info.link_sent') %>

- <%= render 'shared/alert', type: 'warning' do %> + <%= render AlertComponent.new(type: 'warning') do %> <%= t('doc_auth.info.keep_window_open') %> <%= t('doc_auth.info.link_sent_complete_nojs') %> <%= t('doc_auth.info.link_sent_complete_js') %> diff --git a/app/views/idv/doc_auth/send_link.html.erb b/app/views/idv/doc_auth/send_link.html.erb index 45d8745acc2..a2191f476f0 100644 --- a/app/views/idv/doc_auth/send_link.html.erb +++ b/app/views/idv/doc_auth/send_link.html.erb @@ -1,11 +1,11 @@ <% title t('titles.doc_auth.take_photo') %> <% if flow_session[:error_message] %> - <%= render 'shared/alert', { - type: 'error', + <%= render AlertComponent.new( + type: :error, class: 'margin-bottom-4', message: flow_session[:error_message], - } %> + ) %> <% end %>

diff --git a/app/views/idv/phone/new.html.erb b/app/views/idv/phone/new.html.erb index 6e9f8606096..4fc16457d0c 100644 --- a/app/views/idv/phone/new.html.erb +++ b/app/views/idv/phone/new.html.erb @@ -8,11 +8,11 @@ <% end %>
- <%= render 'shared/alert', { - type: 'success', - class: 'margin-bottom-4', - message: I18n.t('doc_auth.forms.doc_success'), - } %> + <%= render AlertComponent.new( + type: :success, + class: 'margin-bottom-4', + message: I18n.t('doc_auth.forms.doc_success'), + ) %>
<% title t('titles.idv.phone') %> @@ -57,9 +57,9 @@ method: :put, class: 'margin-top-2', }) do |f| %> - <%= f.input :phone, required: true, - input_html: { aria: { invalid: false }, - class: 'sm-col-8' }, + <%= f.input :phone, required: true, + input_html: { aria: { invalid: false }, + class: 'sm-col-8' }, label: t('idv.form.phone'), wrapper: false, label_html: { class: 'bold' } %> diff --git a/app/views/reactivate_account/index.html.erb b/app/views/reactivate_account/index.html.erb index 52d1c857c9a..525d53deb09 100644 --- a/app/views/reactivate_account/index.html.erb +++ b/app/views/reactivate_account/index.html.erb @@ -1,10 +1,10 @@ <% title t('titles.reactivate_account') %>
- <%= render 'shared/alert', { - type: 'warning', - class: 'margin-bottom-4', - } do %> + <%= render AlertComponent.new( + type: 'warning', + class: 'margin-bottom-4', + ) do %>
<%= t('instructions.account.reactivate.modal.copy') %>
diff --git a/app/views/shared/_flashes.html.erb b/app/views/shared/_flashes.html.erb index 5924326d79b..8088dc4e009 100644 --- a/app/views/shared/_flashes.html.erb +++ b/app/views/shared/_flashes.html.erb @@ -1,13 +1,12 @@ -<% -flash. +<% flash. to_hash. slice(*ApplicationController::FLASH_KEYS + ApplicationController::FLASH_KEY_MAP.keys). each do |type, message| %> - <% if message.present? %> - <%= render 'shared/alert', { - type: ApplicationController::FLASH_KEY_MAP.fetch(type, type), - message: message.html_safe, - class: 'margin-bottom-4', - } %> - <% end %> + <% if message.present? %> + <%= render AlertComponent.new( + type: ApplicationController::FLASH_KEY_MAP.fetch(type, type), + message: message.html_safe, + class: 'margin-bottom-4', + ) %> + <% end %> <% end %> diff --git a/app/views/shared/_maintenance_window_alert.html.erb b/app/views/shared/_maintenance_window_alert.html.erb index 51430766b22..5de685b3ed2 100644 --- a/app/views/shared/_maintenance_window_alert.html.erb +++ b/app/views/shared/_maintenance_window_alert.html.erb @@ -6,7 +6,7 @@ ) %> <% if maintenance_window.active? %> - <%= render 'shared/alert', { type: 'warning', class: 'margin-bottom-2', text_tag: 'div' } do %> + <%= render AlertComponent.new(type: 'warning', class: 'margin-bottom-2', text_tag: 'div') do %>

<%= t('notices.maintenance.currently_under_maintenance_html', finish: l(maintenance_window.finish, diff --git a/app/views/shared/_personal_key_confirmation_modal.html.erb b/app/views/shared/_personal_key_confirmation_modal.html.erb index 561ab3ff398..210e9260306 100644 --- a/app/views/shared/_personal_key_confirmation_modal.html.erb +++ b/app/views/shared/_personal_key_confirmation_modal.html.erb @@ -9,19 +9,19 @@

<%= render 'shared/personal_key_input', code: code %> <%= hidden_field_tag :authenticity_token, form_authenticity_token %> <%= render 'shared/validation_message', { - class: 'margin-bottom-2', - message: t('simple_form.required.text'), - } %> + class: 'margin-bottom-2', + message: t('simple_form.required.text'), + } %>