Use history navigation for detail back buttons

Clicking the back arrow in job and queue detail pages removed any
applied params, as it dropped any non-id params on navigation. The new
approach uses a history hook that leverages native window history
instead.

Closes #138

Author: sorentwo

assets/js/app.js

@@ -5,6 +5,7 @@ import { loadAll } from "./lib/settings";
 
 import Charter from "./hooks/charter";
 import Completer from "./hooks/completer";
+import HistoryBack from "./hooks/history_back";
 import Instantiator from "./hooks/instantiator";
 import Refresher from "./hooks/refresher";
 import Relativize from "./hooks/relativize";
@@ -15,6 +16,7 @@ import Tippy from "./hooks/tippy";
 const hooks = {
   Charter,
   Completer,
+  HistoryBack,
   Instantiator,
   Refresher,
   Relativize,

assets/js/hooks/history_back.js

@@ -0,0 +1,11 @@
+const HistoryBack = {
+  mounted() {
+    this.el.addEventListener("click", (event) => {
+      event.preventDefault();
+
+      window.history.back();
+    });
+  },
+};
+
+export default HistoryBack;

lib/oban/web/live/jobs/detail_component.ex

@@ -9,16 +9,16 @@ defmodule Oban.Web.Jobs.DetailComponent do
     ~H"""
     <div id="job-details">
       <div class="flex justify-between items-center px-3 py-4 border-b border-gray-200 dark:border-gray-700">
-        <.link
-          patch={oban_path(:jobs, @params)}
+        <button
           id="back-link"
-          class="flex items-center hover:text-blue-500"
+          class="flex items-center hover:text-blue-500 cursor-pointer bg-transparent border-0 p-0"
           data-title="Back to jobs"
-          phx-hook="Tippy"
+          phx-hook="HistoryBack"
+          type="button"
         >
           <Icons.arrow_left class="w-5 h-5" />
           <span class="text-lg font-bold ml-2">Job Details</span>
-        </.link>
+        </button>
 
         <div class="flex">
           <%= if can?(:cancel_jobs, @access) and cancelable?(@job) do %>

lib/oban/web/live/queues/detail_component.ex

@@ -61,10 +61,15 @@ defmodule Oban.Web.Queues.DetailComponent do
     ~H"""
     <div id="queue-details">
       <div class="flex justify-between items-center px-3 py-6">
-        <.link patch={oban_path(:queues)} id="back-link" class="flex items-center hover:text-blue-500">
+        <button
+          id="back-link"
+          class="flex items-center hover:text-blue-500 cursor-pointer bg-transparent border-0 p-0"
+          phx-hook="HistoryBack"
+          type="button"
+        >
           <Icons.arrow_left class="w-5 h-5" />
           <span class="text-lg capitalize font-bold ml-2">{@queue} Queue</span>
-        </.link>
+        </button>
       </div>
 
       <table class="table-fixed w-full bg-blue-50 dark:bg-blue-300 dark:bg-opacity-25">