Navigate when <dialog> element closes

When viewing seats through the page's modal `<dialog>` element, closing
the modal does not update the page's URL. This means that after viewing
a Seat's details early on in a session, a User can navigate back to the
Seats index, filter seats, remove Seats from their cart.

The whole time they're taking action, they might not update the
URL's path. If they were to reload the page, they might be surprised to
re-visit the last selected seat's details in a modal `<dialog>` element.

This commit replaces the `<form method="dialog">` element with an `<a>`
element that links to the `/venues/:venue_id/floors/:floor_id/seats`
URL.

Additionally, this commit handles the [`<dialog>`'s `cancel`
event][cancel] that's triggered by <kbd>esc</kbd>, by introducing the
`dialog_controller.js` file and declaring the
`data-action="cancel->dialog#cancel"` attribute to route events to the
`dialog#cancel` function.

Once events are routed to `cancel`, invoke [`Turbolinks.visit`][visit]
with the value of `data-return-to-url`.

In a JavaScript-disabled environment, clicking the "Close" button will
navigate the user back to the Seats index, but a <kbd>esc</kbd> will
not. Whoops!

[cancel]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event
[visit]: https://github.com/turbolinks/turbolinks#turbolinksvisit

app/javascript/controllers/dialog_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "stimulus"
+import Turbolinks from "turbolinks"
+
+export default class extends Controller {
+  cancel({ currentTarget }) {
+    const { redirectToUrl } = currentTarget.dataset
+
+    Turbolinks.visit(redirectToUrl, { action: "replace" })
+  }
+}

app/views/seats/_dialog.html.erb

@@ -1,6 +1,9 @@
 <%= tag.dialog(
   class: "syos-dialog",
   open: true,
+  "data-controller": "dialog",
+  "data-action": "cancel->dialog#cancel",
+  "data-redirect-to-url": redirect_to_url,
 ) do %>
   <%= yield %>
 <% end %>

app/views/seats/show.html.erb

@@ -1,23 +1,22 @@
 <%= render(template: "seats/index", locals: local_assigns) %>
 
-<%= render(layout: "seats/dialog") do %>
+<%= render(layout: "seats/dialog", locals: { redirect_to_url: venue_floor_seats_path(venue, floor) }) do %>
   <header class="syos-dialog__header">
     <h2 class="syos-dialog__title">
       Confirm seat selection
     </h2>
 
-    <form method="dialog">
-      <button
-        class="syos-button syos-button--transparent"
-      >
-        <%= inline_svg_tag(
-          "icons/x-circle.svg",
-          aria: true,
-          class: "syos-icon syos-icon--large",
-          title: "Close modal",
-        ) %>
-      </button>
-    </form>
+    <%= link_to(
+      venue_floor_seats_path(venue, floor),
+      class: "syos-button syos-button--transparent",
+    ) do %>
+      <%= inline_svg_tag(
+        "icons/x-circle.svg",
+        aria: true,
+        class: "syos-icon syos-icon--large",
+        title: "Close modal",
+      ) %>
+    <% end %>
   </header>
 
   <section class="syos-dialog__body">