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

app/spec/rails_helper.rb

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.

app/app/components/help_topic_content_component.html.erb

app/spec/e2e/help_feature_spec.rb

app/app/components/help_link_component.rb

app/app/components/help_alert_component.html.erb

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

app/app/assets/stylesheets/cbv.scss

app/app/components/help_modal_component.rb

app/app/components/help_link_component.rb

app/app/components/help_link_component.html.erb

app/app/components/help_alert_component.rb

app/app/components/help_modal_component.rb

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 :)

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

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 :)

….com/DSACMS/iv-cbv-payroll into george/ffs-2295-help-modal

…g tracked

…ther than base_controller

tdooner

Looks good to me, pending the one last issue I noticed (the feedback form URL)

tdooner · 2025-02-06T01:52:50Z

app/app/assets/stylesheets/cbv.scss

+// Button display handling based on device orientation and screen size
+.usa-button {
+  &.display-block,
+  &[class*="margin-bottom"] {


If we need to override the button display within the iframe, can we just give them a custom class name? I find it odd to have a selector like .usa-button[class*="margin-bottom"], since to me the "margin-bottom" class doesn't really have any connection to the "usa-button" class.

app/app/views/help/index.html.erb

tdooner · 2025-02-06T02:03:37Z

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 designers are ok with the order these items are displaying in now, I guess you can ignore this.

allthesignals · 2025-02-06T16:10:22Z

app/app/assets/stylesheets/cbv.scss

+  html {
+    overflow: hidden;
+  }


Does this do anything? I don't think iframe contents can inherit like this.

It does NOTHING. I was experimenting with some things and accidentally left it in there. The solution here was to set the scrolling property on the iframe itself to false. This approached worked, but it's actually deprecated.

allthesignals · 2025-02-06T16:25:15Z

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.


I'm sad this feedback didn't make it in!

allthesignals · 2025-02-06T16:25:51Z

app/app/controllers/api/help_controller.rb

Eager for this redundant controller to be refactored away in follow up work

Yup, it's actually going to be addressed in the follow up ticket that I'll start on today.

…account for sub-bullets, converted en.yml help config entries to have a content property

… and test

…ow-use-new-database * origin/main: FFS-2295: Help modal (#417)

George Byers 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/spec/rails_helper.rb Outdated Show resolved Hide resolved

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

app/app/components/help_topic_content_component.html.erb Outdated Show resolved Hide resolved

GeorgeCodes19 commented Jan 28, 2025

View reviewed changes

app/spec/e2e/help_feature_spec.rb Show resolved Hide resolved

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

George Byers and others added 15 commits February 3, 2025 12:11

FFS-2295: updated the missing i18n-tasks

a351290

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

be3d9cc

FFS-2295: resolved i18n-tasks unused entries

de990e9

Run lint

c75dd24

FFS-2295: accidentally created a routes.rb file

4b20345

FFS-2295: Merge branch 'george/ffs-2295-help-modal' of https://github…

745b81c

….com/DSACMS/iv-cbv-payroll into george/ffs-2295-help-modal

FFS-2295: added to tests to assert that selected help topics are bein…

b6b3e26

…g tracked

FFS-2295: removed trialing white space

a4f711f

FFS-2295: restoring much of the csp settings and removing skip

94f88b5

FFS-2295: changed help controller to extend application_controller ra…

e5c058c

…ther than base_controller

FFS-2295: updated help_controller to infer site_config and current_site

7fc8acd

FFS-2295: removed redundant site_config

2da8e3a

FFS-2295: cleaned up the current_site method in helper_controller

aec3c77

FFS-2295: rubocop linting

3ef1857

FFS-2295: swapped out .matches for .includes

88b6813

GeorgeCodes19 requested review from allthesignals and tdooner February 5, 2025 18:23

tdooner approved these changes Feb 6, 2025

View reviewed changes

allthesignals approved these changes Feb 6, 2025

View reviewed changes

George Byers added 8 commits February 6, 2025 11:30

FFS-2295: updated help modal to use proper feedback_form_url helper

380c249

FFS-2295: removed invalid css styling, updated help_topic_content to …

8896968

…account for sub-bullets, converted en.yml help config entries to have a content property

FFS-2295: removing trailing whitespace

180be27

FFS-2295: added missing help entries & yaml linting

0624500

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

ada72bb

FFS-2295: applying the fix for the users account promotion rake tasks…

50e176c

… and test

FFS-2295: address rubocop linting

1ae5c8d

FFS-2295: reenabling rake tasks prior to execution in test

1e93af1

GeorgeCodes19 merged commit 859c96e into main Feb 6, 2025
15 checks passed

tdooner added a commit that referenced this pull request Feb 6, 2025

Merge remote-tracking branch 'origin/main' into td/ffs-2110-update-fl…

2a00e03

…ow-use-new-database * origin/main: FFS-2295: Help modal (#417)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FFS-2295: Help modal #417

FFS-2295: Help modal #417

GeorgeCodes19 commented Jan 22, 2025 •

edited

Loading

GeorgeCodes19 Jan 27, 2025

GeorgeCodes19 Jan 27, 2025

tdooner Jan 28, 2025

allthesignals Jan 28, 2025

allthesignals Jan 28, 2025

tdooner left a comment

tdooner Feb 6, 2025

tdooner Feb 6, 2025

allthesignals Feb 6, 2025

GeorgeCodes19 Feb 6, 2025

allthesignals Feb 6, 2025

allthesignals Feb 6, 2025

GeorgeCodes19 Feb 6, 2025

FFS-2295: Help modal #417

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

tdooner left a 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

GeorgeCodes19 commented Jan 22, 2025 •

edited

Loading