FFS-2453: Replace Help Modal iframe with Turbo Frame (#459)

Co-authored-by: George Byers <[email protected]>

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;
 }

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

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

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);
   }
 }

app/app/views/help/_help_modal.html.erb

@@ -6,17 +6,11 @@
   data-controller="help"
 >
   <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
-          id="help-iframe"
-          src="<%= help_path(site_id: params[:site_id]) %>"
-          class="width-full border-0"
-          title="Help Content"
-          data-help-target="iframe"
-          scrolling="no"
-          >
-        </iframe>
+    <div class="usa-modal__main">
+      <div class="usa-modal__body" data-help-target="content">
+        <%= turbo_frame_tag "help_content" do %>
+          <%= render template: "help/index" %>
+        <% end %>
       </div>
     </div>
 

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 %>

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

@@ -1,20 +1,22 @@
-<div class="padding-2">
-  <h2 class="margin-top-0"><%= t("help.index.title") %></h2>
-  <div class="usa-prose">
-    <p><%= t("help.index.select_prompt") %></p>
+<%= turbo_frame_tag "help_modal_content" do %>
+  <div class="padding-2">
+    <h2 class="margin-top-0"><%= t("help.index.title") %></h2>
+    <div class="usa-prose">
+      <p><%= t("help.index.select_prompt") %></p>
 
-    <%= 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 %>
 
+    </div>
   </div>
-</div>
+<% end %>

app/app/views/help/show.html.erb

@@ -1,11 +1,16 @@
-<div class="padding-3">
-  <h2 class="margin-top-0">
-    <%= t("help.show.#{@help_topic}.title") %>
-  </h2>
+<%= turbo_frame_tag "help_modal_content" do %>
+  <div class="padding-3">
+    <h2 class="margin-top-0">
+      <%= t("help.show.#{@help_topic}.title") %>
+    </h2>
 
-  <%= render partial: "help_topic_content", locals: { topic: @help_topic } %>
+    <%= render partial: "help_topic_content", locals: { topic: @help_topic } %>
 
-  <div class="margin-top-3">
-    <%= link_to t("help.show.go_back"), help_path, class: "usa-link" %>
+    <div class="margin-top-3">
+      <%= link_to t("help.show.go_back"),
+          help_path,
+          class: "usa-link",
+          data: { turbo_frame: "help_modal_content" } %>
+    </div>
   </div>
-</div>
+<% end %>