From ad07a6840b39ae8e1e0fcc4d47cce367c6905acc Mon Sep 17 00:00:00 2001 From: George Byers II Date: Mon, 24 Feb 2025 17:23:19 -0500 Subject: [PATCH] FFS-2453: Replace Help Modal iframe with Turbo Frame (#459) Co-authored-by: George Byers --- app/app/assets/stylesheets/cbv.scss | 20 --------- app/app/controllers/application_controller.rb | 8 ++-- app/app/controllers/help_controller.rb | 3 ++ app/app/javascript/controllers/help.js | 44 ++++++------------- app/app/views/help/_help_modal.html.erb | 16 +++---- app/app/views/help/_help_topic_link.html.erb | 3 +- app/app/views/help/index.html.erb | 32 +++++++------- app/app/views/help/show.html.erb | 21 +++++---- 8 files changed, 57 insertions(+), 90 deletions(-) diff --git a/app/app/assets/stylesheets/cbv.scss b/app/app/assets/stylesheets/cbv.scss index 50d64ad8..3e2bdf6c 100644 --- a/app/app/assets/stylesheets/cbv.scss +++ b/app/app/assets/stylesheets/cbv.scss @@ -136,26 +136,6 @@ html { /** * Help Modal */ -#help-iframe { - min-height: 600px; - line-height: 1; - - // Small screens such as mobile - @media screen and (max-width: 375px) { - height: 73vh; - } - - // Medium screens such as tablets - @media screen and (min-width: 810px) { - height: 630px; - } - - // Larger screens such as desktop - @include at-media(desktop) { - height: 660px; - } -} - .main-bullets { list-style-type: disc; } diff --git a/app/app/controllers/application_controller.rb b/app/app/controllers/application_controller.rb index 1ef0977f..c03ab921 100644 --- a/app/app/controllers/application_controller.rb +++ b/app/app/controllers/application_controller.rb @@ -92,11 +92,9 @@ def redirect_if_maintenance_mode def check_help_param if params[:help] == "true" help_link = helpers.render(partial: "help/help_link", locals: { text: t("help.alert.help_options"), source: "banner" }) - flash.merge!( - alert: "#{t('help.alert.text_before')} #{help_link}", - alert_heading: t("help.alert.heading"), - alert_type: "warning" - ) + flash.now[:alert] = "#{t('help.alert.text_before')} #{help_link}" + flash.now[:alert_heading] = t("help.alert.heading") + flash.now[:alert_type] = "warning" end end end diff --git a/app/app/controllers/help_controller.rb b/app/app/controllers/help_controller.rb index 43529205..a1e85b00 100644 --- a/app/app/controllers/help_controller.rb +++ b/app/app/controllers/help_controller.rb @@ -4,6 +4,7 @@ class HelpController < ApplicationController def index @title = t("help.index.title") + render layout: false end def show @@ -25,6 +26,8 @@ def show rescue => ex Rails.logger.error "Unable to track event (ApplicantViewedHelpTopic): #{ex}" end + + render layout: false if turbo_frame_request? end private diff --git a/app/app/javascript/controllers/help.js b/app/app/javascript/controllers/help.js index 03d6ec24..681c026f 100644 --- a/app/app/javascript/controllers/help.js +++ b/app/app/javascript/controllers/help.js @@ -1,40 +1,24 @@ -import { Controller } from "@hotwired/stimulus" -import { trackUserAction } from "../utilities/api" +import { Controller } from "@hotwired/stimulus"; +import { trackUserAction } from "../utilities/api"; export default class extends Controller { - static targets = ["iframe"] + static targets = ["content"]; - connect() { - this.handleClick = (event) => { - if (event.target.href?.includes("#help-modal")) { - trackUserAction("ApplicantOpenedHelpModal", { source: event.target.dataset.source }) - } + handleClick(event) { + if (event.target.href?.includes("#help-modal")) { + trackUserAction("ApplicantOpenedHelpModal", { + source: event.target.dataset.source, + }); + // reset the help modal src on mousedown to ensure the help modal src is reset to "/help" + document.querySelector("#help_modal_content").src = "/help"; } - - document.addEventListener("click", this.handleClick) } - disconnect() { - document.removeEventListener("click", this.handleClick) + connect() { + document.addEventListener("click", this.handleClick); } - /** - * This function is used to prepare the next URL for the iframe. - * It generates a new random parameter and updates the iframe src - * so that when the modal is opened, the iframe will load the - * default help topics rather than the last viewed topic. - */ - prepareNextUrl() { - const iframe = this.iframeTarget - const currentSrc = new URL(iframe.src) - - // Generate a new random parameter - const randomHex = Array.from(crypto.getRandomValues(new Uint8Array(2))) - .map(b => b.toString(16).padStart(2, "0")) - .join("") - - // Update the iframe src with new random parameter - currentSrc.searchParams.set("r", randomHex) - iframe.src = currentSrc.toString() + disconnect() { + document.removeEventListener("click", this.handleClick); } } diff --git a/app/app/views/help/_help_modal.html.erb b/app/app/views/help/_help_modal.html.erb index 0e8422a1..1b31a768 100644 --- a/app/app/views/help/_help_modal.html.erb +++ b/app/app/views/help/_help_modal.html.erb @@ -6,17 +6,11 @@ data-controller="help" >
-
-
- +
+
+ <%= turbo_frame_tag "help_content" do %> + <%= render template: "help/index" %> + <% end %>
diff --git a/app/app/views/help/_help_topic_link.html.erb b/app/app/views/help/_help_topic_link.html.erb index 7f0e123e..b5969b5e 100644 --- a/app/app/views/help/_help_topic_link.html.erb +++ b/app/app/views/help/_help_topic_link.html.erb @@ -1,4 +1,5 @@ <%= link_to help_topic_path(topic: topic, locale: I18n.locale), - class: "usa-button margin-bottom-1 height-5 text-left display-block" do %> + class: "usa-button margin-bottom-1 height-5 text-left display-block", + data: { turbo_frame: "help_modal_content" } do %> <%= text %> <% end %> diff --git a/app/app/views/help/index.html.erb b/app/app/views/help/index.html.erb index a15cbfba..315372a9 100644 --- a/app/app/views/help/index.html.erb +++ b/app/app/views/help/index.html.erb @@ -1,20 +1,22 @@ -
-

<%= t("help.index.title") %>

-
-

<%= t("help.index.select_prompt") %>

+<%= turbo_frame_tag "help_modal_content" do %> +
+

<%= t("help.index.title") %>

+
+

<%= t("help.index.select_prompt") %>

- <%= render "help_topic_link", topic: "username", text: t("help.index.username") %> - <%= render "help_topic_link", topic: "password", text: t("help.index.password") %> - <%= render "help_topic_link", topic: "company-id", text: t("help.index.company_id") %> - <%= render "help_topic_link", topic: "employer", text: t("help.index.employer") %> - <%= render "help_topic_link", topic: "provider", text: t("help.index.provider") %> - <%= render "help_topic_link", topic: "credentials", text: t("help.index.credentials") %> + <%= render "help/help_topic_link", topic: "username", text: t("help.index.username") %> + <%= render "help/help_topic_link", topic: "password", text: t("help.index.password") %> + <%= render "help/help_topic_link", topic: "company-id", text: t("help.index.company_id") %> + <%= render "help/help_topic_link", topic: "employer", text: t("help.index.employer") %> + <%= render "help/help_topic_link", topic: "provider", text: t("help.index.provider") %> + <%= render "help/help_topic_link", topic: "credentials", text: t("help.index.credentials") %> - <% if current_agency && current_agency.caseworker_feedback_form.present? %> - <%= link_to feedback_form_url, class: "usa-button margin-bottom-1 height-5 text-left display-block", target: "_blank" do %> - <%= t("help.index.feedback") %> + <% if current_agency && current_agency.caseworker_feedback_form.present? %> + <%= link_to feedback_form_url, class: "usa-button margin-bottom-1 height-5 text-left display-block", target: "_blank" do %> + <%= t("help.index.feedback") %> + <% end %> <% end %> - <% end %> +
-
+<% end %> diff --git a/app/app/views/help/show.html.erb b/app/app/views/help/show.html.erb index 922eb1ad..90e7698f 100644 --- a/app/app/views/help/show.html.erb +++ b/app/app/views/help/show.html.erb @@ -1,11 +1,16 @@ -
-

- <%= t("help.show.#{@help_topic}.title") %> -

+<%= turbo_frame_tag "help_modal_content" do %> +
+

+ <%= t("help.show.#{@help_topic}.title") %> +

- <%= render partial: "help_topic_content", locals: { topic: @help_topic } %> + <%= render partial: "help_topic_content", locals: { topic: @help_topic } %> -
- <%= link_to t("help.show.go_back"), help_path, class: "usa-link" %> +
+ <%= link_to t("help.show.go_back"), + help_path, + class: "usa-link", + data: { turbo_frame: "help_modal_content" } %> +
-
+<% end %>