Override Frame response target from server

src/core/frames/frame_controller.ts

@@ -172,8 +172,16 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
   }
 
   async requestSucceededWithResponse(request: FetchRequest, response: FetchResponse) {
-    await this.loadResponse(response)
-    this.resolveVisitPromise()
+    const { location, redirected, statusCode } = response
+
+    if (redirected && response.header("Turbo-Frame") == "_top") {
+      const responseHTML = await response.responseHTML
+
+      session.visit(location, { response: { statusCode, redirected, responseHTML } })
+    } else {
+      await this.loadResponse(response)
+      this.resolveVisitPromise()
+    }
   }
 
   requestFailedWithResponse(request: FetchRequest, response: FetchResponse) {
@@ -197,9 +205,18 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
     frame.setAttribute("busy", "")
   }
 
-  formSubmissionSucceededWithResponse(formSubmission: FormSubmission, response: FetchResponse) {
-    const frame = this.findFrameElement(formSubmission.formElement, formSubmission.submitter)
-    frame.delegate.loadResponse(response)
+  async formSubmissionSucceededWithResponse(formSubmission: FormSubmission, response: FetchResponse) {
+    const { location, redirected, statusCode } = response
+
+    if (redirected && response.header("Turbo-Frame") == "_top") {
+      const responseHTML = await response.responseHTML
+
+      session.view.clearSnapshotCache()
+      session.visit(location, { response: { statusCode, redirected, responseHTML } })
+    } else {
+      const frame = this.findFrameElement(formSubmission.formElement, formSubmission.submitter)
+      frame.delegate.loadResponse(response)
+    }
   }
 
   formSubmissionFailedWithResponse(formSubmission: FormSubmission, fetchResponse: FetchResponse) {

src/tests/fixtures/form.html

@@ -181,6 +181,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="turbo_frame" value="_top">
+        <input type="hidden" name="path" value="/__turbo/headers">
+        <button>response with Turbo-Frame: _top</button>
+      </form>
       <form action="/__turbo/messages" method="post" class="created">
         <input type="hidden" name="content" value="Hello!">
         <input type="submit" style="">

src/tests/fixtures/frames.html

@@ -65,6 +65,7 @@ <h2>Frames: #nested-child</h2>
     </turbo-frame>
 
     <a id="frame-self" href="/src/tests/fixtures/frames/self.html" data-turbo-frame="frame">Visit self.html</a>
+    <a id="navigate-form-redirect-top" href="/__turbo/redirect?turbo_frame=_top&path=%2F__turbo%2Fheaders" data-turbo-frame="frame">Response with Turbo-Frame: _top</a>
 
     <a id="navigate-form-redirect" href="/src/tests/fixtures/frames/form-redirect.html" data-turbo-frame="form-redirect">Visit form-redirect.html</a>
     <turbo-frame id="form-redirect"></turbo-frame>

src/tests/functional/form_submission_tests.ts

@@ -451,6 +451,18 @@ export class FormSubmissionTests extends TurboDriveTestCase {
     this.assert.equal(await title.getVisibleText(), "Frame: Unprocessable Entity")
   }
 
+  async "test frame form submission response with Turbo-Frame=_top header"() {
+    await this.clickSelector("#frame form.redirect.turbo-frame-header button")
+    await this.nextEventNamed("turbo:before-fetch-request")
+    await this.nextEventNamed("turbo:before-fetch-response")
+    const eventLog = await this.eventLogChannel.read()
+    await this.nextBody
+
+    this.assert.notOk(await this.hasSelector("#frame"), "Navigates entire page")
+    this.assert.equal(await (await this.querySelector("h1")).getVisibleText(), "Request Headers")
+    this.assert.notOk(eventLog.some(([ name ]) => name == "turbo:before-fetch-request" || name == "turbo:before-fetch-response"), "does not make subsequent requests")
+  }
+
   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/functional/frame_tests.ts

@@ -25,6 +25,18 @@ export class FrameTests extends TurboDriveTestCase {
     this.assert.equal(otherEvents.length, 0, "no more events")
   }
 
+  async "test a frame request with Turbo-Frame=_top header in response"() {
+    await this.clickSelector("#navigate-form-redirect-top")
+    await this.nextEventOnTarget("frame", "turbo:before-fetch-request")
+    await this.nextEventOnTarget("frame", "turbo:before-fetch-response")
+    const eventLog = await this.eventLogChannel.read()
+    await this.nextBody
+
+    this.assert.notOk(await this.hasSelector("#frame"), "Navigates entire page")
+    this.assert.equal(await (await this.querySelector("h1")).getVisibleText(), "Request Headers")
+    this.assert.notOk(eventLog.some(([ name ]) => name == "turbo:before-fetch-request" || name == "turbo:before-fetch-response"), "does not make subsequent requests")
+  }
+
   async "test following a link driving a frame toggles the [busy] attribute"() {
     await this.clickSelector("#hello a")
 

src/tests/server.ts

@@ -53,6 +53,10 @@ router.post("/reject", (request, response) => {
 
 router.get("/headers", (request, response) => {
   const template = fs.readFileSync("src/tests/fixtures/headers.html").toString()
+  const { turbo_frame } = request.query
+
+  if (typeof turbo_frame == "string") response.set("Turbo-Frame", turbo_frame)
+
   response.type("html").status(200).send(template.replace('$HEADERS', JSON.stringify(request.headers, null, 4)))
 })