FFS-1809: Disable multiple clicking on send invitation button #400

YvetteWhiteUSDS · 2024-12-18T16:16:35Z

Ticket

Changes

Overview of the bug

When a user is presented with the invitation page, if the user clicks on the send button multiple times, then multiple duplicate invitations will be generated and sent to the invitee. The purpose of this fix is to make sure that only one invite is generated.

Summary of changes

Note: This work went through several iterations of approaches. This final approach is deemed most ideal as it maintains the use of the Turbo framework and allows for component reuse.

app/app/views/caseworker/cbv_flow_invitations/new.html.erb - Wrap the invitation form in a turbo form so that form field errors will be rendered.
app/app/helpers/application_helper.rb - Create a custom "form_with" that will assist with the proper rendering of page errors in the header area and default the builder to UswdsFormBuilder.
app/app/controllers/caseworker/cbv_flow_invitations_controller.rb - Fixed a couple bugs that appeared when page errors (i.e., validation errors) were present. First, used flash.now instead of flash when setting the page's errors. The former will make sure the messages are shown on the page when no redirect occurs. Second, the page returns a 4XX status as opposed to a 2XX status. This fixes the error rendering at the top of the page.

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

Screenshots

Validation errors are rendering properly

Screenshot of disabled button

Query of before and after an invitation was generated after the fix

Created an invitation for "Jimmy J". The first query is prior to invitation creation and the second is after.

For context, prior to changes, I was able to generate multiple invitations by continuously clicking the send button

app/app/javascript/controllers/caseworker/cbv_flow_invitations/invitation.js

app/app/views/caseworker/cbv_flow_invitations/new.html.erb

app/docker-compose.yml

Co-authored-by: Tom Dooner <[email protected]>

Co-Authored-By: Yvette White <[email protected]>

…/iv-cbv-payroll into yvette/1809-multi-invites

allthesignals · 2024-12-26T20:00:29Z

app/app/controllers/health_check_controller.rb

+    # keep the database connection alive
+    ActiveRecord::Base.connection.execute("SELECT 1")


Oh interesting. What's this for?

It's an unrelated change that's already on main. George and I diagnosed the slow performance as lengthy database reconnections: #401

allthesignals · 2024-12-26T20:01:23Z

app/app/controllers/caseworker/cbv_flow_invitations_controller.rb

+      flash.now[:alert_heading] = error_header
+      flash.now[:alert] = error_messages.html_safe


Interesting, point on #now https://guides.rubyonrails.org/action_controller_overview.html#the-flash

Wasn't aware! Was the flash not appearing?

Was the flash not appearing?

The opposite, actually, the flash was appearing on this page and whatever next page the user went to.

The form has weird behavior currently: it POSTs to /sandbox/invitations, which adds the validation errors via flash, but then doesn't take the user to a subsequent page (rather, it renders :new view). So it leaves the user on a page they can't refresh (/sandbox/invitations) with the flash in the cookie for the next request, e.g. if they hit the back button/refresh.

So by using flash.now it makes the flash error available to the current view but not afterwards.

allthesignals · 2024-12-26T20:02:38Z

app/app/helpers/application_helper.rb

+    turbo_frame_tag(model) do
+      form_with(model: model, scope: scope, url: url, format: format, **options, &block)
+    end


Wonderful, so this lets use keep the turbo feature without breaking forms?

Yeah, Turbo with target="_top" seems to work pretty well in general, so we could probably use it on all the other pages.

tdooner · 2024-12-24T17:17:01Z

app/Gemfile.lock

@@ -449,8 +449,6 @@ GEM
      connection_pool (>= 2.2.5, < 3)
      rack (~> 2.0)
      redis (>= 4.5.0, < 5)
-    skylight (6.0.4)
-      activesupport (>= 5.2.0)


I'm not sure why these changes are duplicated on your branch (I think it's because it's branched off an old version of main?)

tdooner · 2024-12-26T20:47:24Z

app/app/controllers/health_check_controller.rb

+    # keep the database connection alive
+    ActiveRecord::Base.connection.execute("SELECT 1")


It's an unrelated change that's already on main. George and I diagnosed the slow performance as lengthy database reconnections: #401

tdooner · 2024-12-26T21:19:46Z

app/app/controllers/caseworker/cbv_flow_invitations_controller.rb

+      flash.now[:alert_heading] = error_header
+      flash.now[:alert] = error_messages.html_safe


Was the flash not appearing?

The opposite, actually, the flash was appearing on this page and whatever next page the user went to.

The form has weird behavior currently: it POSTs to /sandbox/invitations, which adds the validation errors via flash, but then doesn't take the user to a subsequent page (rather, it renders :new view). So it leaves the user on a page they can't refresh (/sandbox/invitations) with the flash in the cookie for the next request, e.g. if they hit the back button/refresh.

So by using flash.now it makes the flash error available to the current view but not afterwards.

tdooner · 2024-12-26T21:20:24Z

app/app/helpers/application_helper.rb

+    turbo_frame_tag(model) do
+      form_with(model: model, scope: scope, url: url, format: format, **options, &block)
+    end


Yeah, Turbo with target="_top" seems to work pretty well in general, so we could probably use it on all the other pages.

Added controller to add javascript on send button.

e602451

YvetteWhiteUSDS commented Dec 18, 2024

View reviewed changes

app/app/javascript/controllers/caseworker/cbv_flow_invitations/invitation.js Outdated Show resolved Hide resolved

app/app/views/caseworker/cbv_flow_invitations/new.html.erb Show resolved Hide resolved

app/docker-compose.yml Show resolved Hide resolved

YvetteWhiteUSDS requested review from tdooner and GeorgeCodes19 and removed request for tdooner December 18, 2024 16:27

George Byers and others added 3 commits December 18, 2024 21:58

FFS-2175: Adding DB query to /health endpoint (#401)

69a0315

Co-authored-by: Tom Dooner <[email protected]>

FFS-2175: Removing Skylight from the project (#402)

51ba09d

Wire up Caseworker Invitation JS controller

c25ce56

Co-Authored-By: Yvette White <[email protected]>

YvetteWhiteUSDS requested a review from allthesignals December 20, 2024 18:44

tdooner and others added 2 commits December 23, 2024 11:57

Create uswds_form_with helper to use Turbo on invitation page

90171fb

Co-Authored-By: Yvette White <[email protected]>

Merge branch 'yvette/1809-multi-invites' of https://github.com/DSACMS…

616bb2e

…/iv-cbv-payroll into yvette/1809-multi-invites

YvetteWhiteUSDS marked this pull request as ready for review December 24, 2024 00:12

allthesignals approved these changes Dec 26, 2024

View reviewed changes

tdooner reviewed Dec 26, 2024

View reviewed changes

YvetteWhiteUSDS merged commit 014dd2d into main Jan 3, 2025
21 checks passed

YvetteWhiteUSDS deleted the yvette/1809-multi-invites branch January 3, 2025 22:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FFS-1809: Disable multiple clicking on send invitation button #400

FFS-1809: Disable multiple clicking on send invitation button #400

YvetteWhiteUSDS commented Dec 18, 2024 •

edited

Loading

allthesignals Dec 26, 2024

tdooner Dec 26, 2024

allthesignals Dec 26, 2024

tdooner Dec 26, 2024

allthesignals Dec 26, 2024

tdooner Dec 26, 2024

tdooner Dec 24, 2024

tdooner Dec 26, 2024

tdooner Dec 26, 2024

tdooner Dec 26, 2024

		# keep the database connection alive
		ActiveRecord::Base.connection.execute("SELECT 1")

		flash.now[:alert_heading] = error_header
		flash.now[:alert] = error_messages.html_safe

FFS-1809: Disable multiple clicking on send invitation button #400

FFS-1809: Disable multiple clicking on send invitation button #400

Conversation

YvetteWhiteUSDS commented Dec 18, 2024 • edited Loading

Ticket

Changes

Overview of the bug

Summary of changes

Acceptance testing

Screenshots

Validation errors are rendering properly

Screenshot of disabled button

Query of before and after an invitation was generated after the fix

For context, prior to changes, I was able to generate multiple invitations by continuously clicking the send button

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

YvetteWhiteUSDS commented Dec 18, 2024 •

edited

Loading