FFS-2295: Help modal #417

GeorgeCodes19 · 2025-01-22T14:16:48Z

Ticket

Resolves FFS-2295.

Update help topic(s) content
Add E2E tests
Add /help route to use in iframe
Add Help link in top nav that triggers the Help Modal
Ensuring that clicking the options link in the help banner triggers the Help Modal
Ensuring that the "Go Back" button works within the Help Modal
Ensuring that closing the Pinwheel modal triggers the Help Banner to appear

Changes

Context for reviewers

Acceptance testing

No acceptance testing needed
- This change will not affect the user experience (bugfix, dependency updates, etc.)
Acceptance testing prior to merge
- This change can be verified visually via screenshots attached below or by sending a link to a local development environment to the acceptance tester
- Acceptance testing should be done by design for visual changes, product for behavior/logic changes, or both for changes that impact both.
Acceptance testing after merge
- This change is hard to test locally, so we'll test it in the demo environment (deployed automatically after merge.)
- Make sure to notify the team once this PR is merged so we don't inadvertently deploy the unaccepted change to production. (e.g. :alert: Deploy block! @ffs-eng I just merged PR [#123] and will be doing acceptance testing in demo - please don't deploy until I'm finished!)

…w partials" This reverts commit c64e94f.

…with view partials"" This reverts commit 034a500.

…working with view partials""" This reverts commit 2d09705.

…er modal content

…nwheel modal

…ent that is cut off

…ution

…cessible

GeorgeCodes19 · 2025-01-27T20:50:35Z

app/spec/rails_helper.rb

 Capybara.default_driver = Capybara.javascript_driver
+Capybara.server = :puma
+Capybara.register_server :puma do |app, port, host|


I couldn't get Capybara to automatically register puma as a server so I manually did it.

Huh, weird, but ok, sounds good. Since we haven't been in the habit of running these tests, I could believe that they're not configured correctly.

Maybe you weren't running specs locally with bundle exec?

app/app/assets/stylesheets/cbv.scss

GeorgeCodes19 · 2025-01-27T23:57:19Z

app/app/components/help_link_component.html.erb

I opted to use a component here since there's now a Help nav item in the main nav as well as a link in the Help banner.

GeorgeCodes19 · 2025-01-27T23:58:26Z

app/app/components/help_modal_component.html.erb

+  <div class="usa-modal__content">
+    <div class="usa-modal__main padding-0 margin-0 maxw-none-important">
+      <div class="usa-modal__body padding-0">
+        <iframe


Note that I've resorted to an iframe here rather coding a bunch of JS. I figured this would more closely resemble our current approach and that we can add custom Mixpanel/New Relic events using Rails helpers.

Kinda a bummer to use an <iframe> but I understand the complexity.

GeorgeCodes19 · 2025-01-27T23:59:46Z

app/app/components/help_topic_content_component.html.erb

Rather than creating explicit views for each help topic I opted to rely on the en.yml entries and this component since the help topic content share a consistent layout.

GeorgeCodes19 · 2025-01-28T00:03:02Z

app/spec/e2e/help_feature_spec.rb

This test suite is missing one test that I racked my brain on for a while... when the pinwheel modal closes the help banner appears

I had difficulty with getting Capybara to click the close button located within the Pinwheel modal. I figured we could resort the manual/smoke testing this feature for now, but I've confirmed that it works.

GeorgeCodes19 · 2025-01-28T21:25:41Z

app/app/components/help_link_component.rb

+
+  private
+
+  attr_reader :class_name, :text


Move to top of class?

GeorgeCodes19 · 2025-01-28T21:27:15Z

app/app/components/help_link_component.rb

+  end
+
+  def before_render
+    @text ||= t("help.alert.help_options")


Pass this in, rather than setting the default in the component

GeorgeCodes19 · 2025-01-28T21:36:26Z

app/app/components/help_alert_component.html.erb

This can be a partial since it's only used once.

GeorgeCodes19 · 2025-01-28T21:42:16Z

app/app/views/layouts/application.html.erb

@@ -18,6 +18,8 @@
      <%= render "application/header" %>
      <main id="main-content">
        <section class="grid-container usa-section">
+          <%= render HelpAlertComponent.new(visible: params[:help] == "true", help_path: cbv_flow_help_index_path(locale: I18n.locale)) %>


Rather than using HelpAlertComponent we can read the help params within the help controller and use flash instead. This would mean that we don't introduce new patterns.

app/app/assets/stylesheets/cbv.scss

allthesignals · 2025-01-28T21:19:09Z

app/app/components/help_modal_component.rb

+  def modal_id
+    "help-modal"
+  end


I don't think this gets used anywhere

allthesignals · 2025-01-28T21:20:46Z

app/app/components/help_modal_component.rb

+  def open?
+    @open
+  end


I don't think this gets used anywhere

allthesignals · 2025-01-28T21:21:00Z

app/app/components/help_modal_component.rb

+  def help_path
+    @help_path
+  end


I wouldn't wrap this in a method like this because it's somewhat superfluous.

Yeah, could be an attr_reader.

allthesignals · 2025-01-28T21:27:49Z

app/app/components/help_link_component.rb

+    @text = text
+  end
+
+  def before_render
+    @text ||= t("help.alert.help_options")
+  end


Im' not sure what this is for yet maybe vestigial? I think it's confusing way to set a default

allthesignals · 2025-01-28T21:28:36Z

app/app/components/help_link_component.html.erb

+<%= link_to text, "#help-modal", 
+  class: class_name,
+  aria: { controls: "help-modal" }, 
+  data: { open_modal: true } %> 


This could be a partial probably

allthesignals · 2025-01-28T21:39:20Z

app/app/components/help_alert_component.rb

I think this can be a partial too

allthesignals · 2025-01-28T21:40:51Z

app/app/components/help_modal_component.rb

I would see if you can get away with a partial for this too :)

allthesignals · 2025-01-28T21:41:36Z

app/app/components/help_alert_component.html.erb

I woudl investigate whether you could do this within the existing flash error/alert system :)

allthesignals · 2025-01-28T21:45:43Z

app/app/views/layouts/application.html.erb

@@ -54,5 +56,7 @@
      </main>
      <%= render "application/footer" %>
    </div>
+
+    <%= render HelpModalComponent.new(open: params[:help_modal] == "true", help_path: cbv_flow_help_index_path(locale: I18n.locale)) %>


This is here because this modal can always be accesse and the design calls for accessing the help modal anywhere in the app

To match the other param name:

Suggested change

<%= render HelpModalComponent.new(open: params[:help_modal] == "true", help_path: cbv_flow_help_index_path(locale: I18n.locale)) %>

<%= render HelpModalComponent.new(open: params[:help] == "true", help_path: cbv_flow_help_index_path(locale: I18n.locale)) %>

allthesignals · 2025-01-28T21:46:23Z

app/app/components/help_topic_content_component.html.erb

+
+<ol>
+  <% steps = t("help.show.#{topic}", default: {}).select { |k, _| k.to_s.start_with?('step') } %>
+  <% steps.each do |step, _| %>


I would not use this _ thing :)

tdooner

Looking good. Only blocker I see is the CSP policy (the visual regression on the payment_details page.)

tdooner · 2025-01-28T22:26:32Z

app/app/components/help_modal_component.html.erb

+      </svg>
+    </button>
+  </div>
+</div>


Hmm, would have been interesting to try and make a UswdsModal component that took arbitrary contents (i.e. the help <iframe>). Then it would be reusable if we needed another modal elsewhere. Don't worry about it for now, though, just a thought. We could generalize it later if we need another modal.

tdooner · 2025-01-28T22:27:05Z

app/app/components/help_modal_component.html.erb

+  <div class="usa-modal__content">
+    <div class="usa-modal__main padding-0 margin-0 maxw-none-important">
+      <div class="usa-modal__body padding-0">
+        <iframe


Kinda a bummer to use an <iframe> but I understand the complexity.

tdooner · 2025-01-28T22:28:17Z

app/config/initializers/content_security_policy.rb

    policy.style_src_elem :self
-    # Allow inline styles as we have some on the payment_details page:
-    policy.style_src_attr "'unsafe-inline'"
+    policy.style_src_attr :self


This will break the payment_details page rendering, since there are some inline styles on that page (see the comment on line 20):

(The section headers should have blue backgrounds.)

I'm going to make a ticket to remove the inline styles since they shouldn't be necessary. Until then, we'll have to keep this as "'unsafe-inline'". (edit: it's https://jiraent.cms.gov/browse/FFS-2430 )

tdooner · 2025-01-28T22:28:35Z

app/config/initializers/content_security_policy.rb

@@ -7,25 +7,24 @@
 Rails.application.configure do
  config.content_security_policy do |policy|
    policy.default_src :self
-    policy.font_src :self
+    policy.font_src :self, :data


Not sure I understand why this change is necessary - did you change anything having to do with fonts?

tdooner · 2025-01-28T22:34:53Z

app/app/components/help_topic_content_component.rb

+
+  private
+
+  attr_reader :topic


Should also be at the top (I saw another comment about it in a different file).

tdooner · 2025-01-28T22:39:53Z

app/config/locales/en.yml

+          search_keywords: Search your email for keywords like "payroll," "[Payroll Provider Name]," or "company ID."
+          title: Check your welcome materials
+          welcome_materials: Your company ID is often in your onboarding documents, welcome email, or payroll setup info.


If these are dynamically rendered in the order they appear in this file (and it has to match the designs), you may want to use an array here instead. Something like:

Suggested change

search_keywords: Search your email for keywords like "payroll," "[Payroll Provider Name]," or "company ID."

title: Check your welcome materials

welcome_materials: Your company ID is often in your onboarding documents, welcome email, or payroll setup info.

- Search your email for keywords like "payroll," "[Payroll Provider Name]," or "company ID."

- Check your welcome materials

- Your company ID is often in your onboarding documents, welcome email, or payroll setup info.

Otherwise you may have to fight with the i18n normalizer to get the key names in the right order to match the designs.

tdooner · 2025-01-28T22:41:42Z

app/app/views/layouts/application.html.erb

@@ -54,5 +56,7 @@
      </main>
      <%= render "application/footer" %>
    </div>
+
+    <%= render HelpModalComponent.new(open: params[:help_modal] == "true", help_path: cbv_flow_help_index_path(locale: I18n.locale)) %>


To match the other param name:

Suggested change

<%= render HelpModalComponent.new(open: params[:help_modal] == "true", help_path: cbv_flow_help_index_path(locale: I18n.locale)) %>

<%= render HelpModalComponent.new(open: params[:help] == "true", help_path: cbv_flow_help_index_path(locale: I18n.locale)) %>

tdooner · 2025-01-28T22:42:25Z

app/spec/e2e/help_feature_spec.rb

+        expect(page).to have_link(I18n.t("help.index.provider"))
+        expect(page).to have_link(I18n.t("help.index.credentials"))
+        expect(page).to have_link(I18n.t("help.index.feedback"))
+      end


tdooner · 2025-01-28T22:45:29Z

app/spec/rails_helper.rb

 Capybara.default_driver = Capybara.javascript_driver
+Capybara.server = :puma
+Capybara.register_server :puma do |app, port, host|


Huh, weird, but ok, sounds good. Since we haven't been in the habit of running these tests, I could believe that they're not configured correctly.

Maybe you weren't running specs locally with bundle exec?

tdooner · 2025-01-28T22:50:35Z

app/app/components/help_topic_content_component.html.erb

+      </ul>
+    </li>
+  <% end %>
+</ol> 


Not sure we're getting much out of these components since they are single-purpose. If it's gonna be single purpose anyway, for future stuff I think just using views (and possibly partials) is simpler and easier to follow.

tdooner · 2025-01-29T02:35:42Z

@GeorgeCodes19 Also, I just discovered weird behavior if the session expires:

…ck form

…ion when opened

…f the previous iframe contents from being persisted when the modal is closed and opened again

… events (nav/banner)

…e refactoring to make things a bit more explicit. Added event tracking for help topics

GeorgeCodes19 added 18 commits January 22, 2025 09:03

FFS-2295: initial helper component and modal working with view partials

c64e94f

Revert "FFS-2295: initial helper component and modal working with vie…

034a500

…w partials" This reverts commit c64e94f.

Revert "Revert "FFS-2295: initial helper component and modal working …

2d09705

…with view partials"" This reverts commit 034a500.

Revert "Revert "Revert "FFS-2295: initial helper component and modal …

469a2df

…working with view partials""" This reverts commit 2d09705.

FFS-2295: initial helper component and modal working with view partials

3756b72

FFS-2295: restored a couple files to mirror main

b2fe2f7

FFS-2295: using a component and inferring content from locale to rend…

c977581

…er modal content

FFS-2295: removed copilot generated comments

3dba842

FFS-2295: updated modal and help layout to match figma mock

d54cf02

FFS-2295: added a help_link_component for DRY purposes

34ed33f

FFS-2295: added a method to show the help banner after closing the pi…

4840ccc

…nwheel modal

FFS-2295: updated help content to match confluence doc

2d0803b

FFS-2295: modal close button now appears

5fb082f

FFS-2295: Added css to fix button styled anchor tags from having cont…

cc94909

…ent that is cut off

FFS-2295: added css query to change help button width by screen resol…

959cc85

…ution

FFS-2295: using uswds mixins to make the mobile portrait view more ac…

25c81f0

…cessible

FFS-2295: added capybara tests

9c2c771

FFS-2295: Merge branch 'main' into george/ffs-2295-help-modal

6f2f5bd

GeorgeCodes19 commented Jan 27, 2025

View reviewed changes

app/app/assets/stylesheets/cbv.scss Outdated Show resolved Hide resolved

GeorgeCodes19 commented Jan 27, 2025

View reviewed changes

GeorgeCodes19 commented Jan 28, 2025

View reviewed changes

GeorgeCodes19 marked this pull request as ready for review January 28, 2025 00:07

GeorgeCodes19 requested review from tdooner and allthesignals January 28, 2025 00:09

GeorgeCodes19 commented Jan 28, 2025

View reviewed changes

app/app/assets/stylesheets/cbv.scss Outdated Show resolved Hide resolved

allthesignals reviewed Jan 28, 2025

View reviewed changes

tdooner reviewed Jan 28, 2025

View reviewed changes

GeorgeCodes19 added 13 commits January 29, 2025 12:15

FFS-2295: addressing PR feedback

5e00ef0

FFS-2295: deleting component files that are no longer needed

dc910ed

FFS-2295: converting help link to a partial

e94625d

FFS-2295: deleted help link component

209d8b2

FFS-2295: updated the help topics feedback to point the agency feedba…

8f80af5

…ck form

FFS-2295: updated help iframe so that it defaults to the topic select…

49ef9cc

…ion when opened

FFS-2295: reverted some CSP rules, fixed html rendering in help banner

ec57b7b

FFS-2295: added a stimulus controller to modal to resolve the issue o…

8f4d99b

…f the previous iframe contents from being persisted when the modal is closed and opened again

FFS-2295: updated styling modal height

4981cba

FFS-2295: Fixed modal height bug, added help event tracking for click…

bc03a14

… events (nav/banner)

FFS-2295: added help api controller for tracking events

1667085

FFS-2295: moved the /help route out of the /cbv namespace and did som…

350b692

…e refactoring to make things a bit more explicit. Added event tracking for help topics

FFS-2295: changed check_help_param to be a before_action callback

f62a76e

	<%= render HelpModalComponent.new(open: params[:help_modal] == "true", help_path: cbv_flow_help_index_path(locale: I18n.locale)) %>
	<%= render HelpModalComponent.new(open: params[:help] == "true", help_path: cbv_flow_help_index_path(locale: I18n.locale)) %>

FFS-2295: Help modal #417

Are you sure you want to change the base?

FFS-2295: Help modal #417

Conversation

GeorgeCodes19 commented Jan 22, 2025 • edited Loading

Ticket

Changes

Context for reviewers

Acceptance testing

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tdooner left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tdooner Jan 28, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tdooner commented Jan 29, 2025

GeorgeCodes19 commented Jan 22, 2025 •

edited

Loading

tdooner left a comment •

edited

Loading

tdooner Jan 28, 2025 •

edited

Loading