Override Turbo Frame target from response

hotwired#257

---

src/core/drive/form_submission.ts

@@ -1,7 +1,7 @@
 import { FetchRequest, FetchMethod, fetchMethodFromString, FetchRequestHeaders } from "../../http/fetch_request"
 import { FetchResponse } from "../../http/fetch_response"
 import { expandURL } from "../url"
-import { dispatch } from "../../util"
+import { dispatch, getCookieValue } from "../../util"
 import { StreamMessage } from "../streams/stream_message"
 
 export interface FormSubmissionDelegate {
@@ -181,17 +181,6 @@ function buildFormData(formElement: HTMLFormElement, submitter?: HTMLElement): F
   return formData
 }
 
-function getCookieValue(cookieName: string | null) {
-  if (cookieName != null) {
-    const cookies = document.cookie ? document.cookie.split("; ") : []
-    const cookie = cookies.find((cookie) => cookie.startsWith(cookieName))
-    if (cookie) {
-      const value = cookie.split("=").slice(1).join("=")
-      return value ? decodeURIComponent(value) : undefined
-    }
-  }
-}
-
 function getMetaContent(name: string) {
   const element: HTMLMetaElement | null = document.querySelector(`meta[name="${name}"]`)
   return element && element.content

src/core/frames/frame_controller.ts

@@ -2,7 +2,7 @@ import { FrameElement, FrameElementDelegate, FrameLoadingStyle } from "../../ele
 import { FetchMethod, FetchRequest, FetchRequestDelegate, FetchRequestHeaders } from "../../http/fetch_request"
 import { FetchResponse } from "../../http/fetch_response"
 import { AppearanceObserver, AppearanceObserverDelegate } from "../../observers/appearance_observer"
-import { parseHTMLDocument } from "../../util"
+import { deleteCookieValue, getCookieValue, parseHTMLDocument } from "../../util"
 import { FormSubmission, FormSubmissionDelegate } from "../drive/form_submission"
 import { Snapshot } from "../snapshot"
 import { ViewDelegate } from "../view"
@@ -201,8 +201,16 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
   }
 
   formSubmissionSucceededWithResponse(formSubmission: FormSubmission, response: FetchResponse) {
-    const frame = this.findFrameElement(formSubmission.formElement)
-    frame.delegate.loadResponse(response)
+    const turboFrameOverride = getCookieValue("Turbo-Frame")
+
+    if (turboFrameOverride == "_top") {
+      deleteCookieValue("Turbo-Frame")
+
+      session.visit(response.location, { action: "advance" })
+    } else {
+      const frame = this.findFrameElement(formSubmission.formElement)
+      frame.delegate.loadResponse(response)
+    }
   }
 
   formSubmissionFailedWithResponse(formSubmission: FormSubmission, fetchResponse: FetchResponse) {

src/tests/fixtures/form.html

@@ -153,6 +153,11 @@ <h2>Frame: Form</h2>
         <input type="hidden" name="path" value="/src/tests/fixtures/frames/form.html">
         <input type="submit">
       </form>
+      <form action="/__turbo/redirect" method="post" class="redirect turbo-frame-header">
+        <input type="hidden" name="cookies[Turbo-Frame]" value="_top">
+        <input type="hidden" name="path" value="/src/tests/fixtures/one.html">
+        <input type="submit">
+      </form>
       <form action="/__turbo/messages" method="post" class="created">
         <input type="hidden" name="content" value="Hello!">
         <input type="submit" style="">

src/tests/functional/form_submission_tests.ts

@@ -292,6 +292,15 @@ export class FormSubmissionTests extends TurboDriveTestCase {
     this.assert.equal(await title.getVisibleText(), "Frame: Unprocessable Entity")
   }
 
+  async "test frame form submission response with Turbo-Frame cookie"() {
+    await this.clickSelector("#frame form.redirect.turbo-frame-header [type=submit]")
+    await this.nextBeat
+
+    const title = await this.querySelector("h1")
+    this.assert.equal(await title.getVisibleText(), "One")
+    this.assert.equal(await this.pathname, "/src/tests/fixtures/one.html")
+  }
+
   async "test invalid frame form submission with internal server errror status"() {
     await this.clickSelector("#frame form.internal_server_error input[type=submit]")
     await this.nextBeat

src/tests/server.ts

@@ -18,12 +18,15 @@ router.use((request, response, next) => {
 })
 
 router.post("/redirect", (request, response) => {
-  const { path, sleep, ...query } = request.body
+  const { path, sleep, cookies, ...query } = request.body
   const pathname = path ?? "/src/tests/fixtures/one.html"
   const enctype = request.get("Content-Type")
   if (enctype) {
     query.enctype = enctype
   }
+  if (typeof cookies == "object" && "Turbo-Frame" in cookies) {
+    response.cookie("Turbo-Frame", cookies["Turbo-Frame"], { path: "/", httpOnly: false })
+  }
   setTimeout(() => response.redirect(303, url.format({ pathname, query })), parseInt(sleep || "0", 10))
 })
 

src/util.ts

@@ -49,3 +49,20 @@ export function uuid() {
     }
   }).join("")
 }
+
+export function getCookieValue(cookieName: string | null) {
+  if (cookieName != null) {
+    const cookies = document.cookie ? document.cookie.split("; ") : []
+    const cookie = cookies.find((cookie) => cookie.startsWith(cookieName))
+    if (cookie) {
+      const value = cookie.split("=").slice(1).join("=")
+      return value ? decodeURIComponent(value) : undefined
+    }
+  }
+}
+
+export function deleteCookieValue(cookieName: string) {
+  const dateInThePast = new Date(0)
+
+  document.cookie = `${cookieName}=; expires=${dateInThePast.toUTCString()}`
+}