Add breadcrumbs

Author: adrw

service/src/main/kotlin/app/cash/backfila/ui/components/DashboardPageLayout.kt

@@ -5,18 +5,27 @@ import app.cash.backfila.service.BackfilaConfig
 import app.cash.backfila.service.persistence.BackfilaDb
 import app.cash.backfila.service.persistence.BackfillRunQuery
 import app.cash.backfila.service.persistence.BackfillState
+import app.cash.backfila.ui.pages.IndexAction
 import jakarta.inject.Inject
 import kotlinx.html.TagConsumer
+import kotlinx.html.a
 import kotlinx.html.div
+import kotlinx.html.li
 import kotlinx.html.main
+import kotlinx.html.nav
+import kotlinx.html.ol
+import kotlinx.html.role
 import kotlinx.html.script
+import kotlinx.html.span
 import misk.MiskCaller
 import misk.hibernate.Query
 import misk.hibernate.Transacter
 import misk.hibernate.newQuery
 import misk.hotwire.buildHtml
 import misk.scope.ActionScoped
 import misk.tailwind.Link
+import misk.tailwind.icons.Heroicons
+import misk.tailwind.icons.heroicon
 import misk.tailwind.pages.MenuSection
 import misk.tailwind.pages.Navbar
 import misk.web.HttpCall
@@ -42,6 +51,7 @@ class DashboardPageLayout @Inject constructor(
   private var newBuilder = false
   private var headBlock: TagConsumer<*>.() -> Unit = {}
   private var title: String = "Backfila"
+  private var breadcrumbLinks: List<Link> = listOf()
 
   private val path by lazy {
     clientHttpCall.get().url.encodedPath
@@ -65,6 +75,8 @@ class DashboardPageLayout @Inject constructor(
 
   fun headBlock(block: TagConsumer<*>.() -> Unit) = apply { this.headBlock = block }
 
+  fun breadcrumbLinks(links: List<Link>) = apply { this.breadcrumbLinks = links }
+
   @JvmOverloads
   fun build(block: TagConsumer<*>.() -> Unit = { }): String {
     check(newBuilder) {
@@ -112,6 +124,10 @@ class DashboardPageLayout @Inject constructor(
                   // TODO remove when new UI is stable and preferred
                   UseOldUIAlert()
 
+                  if (breadcrumbLinks.isNotEmpty()) {
+                    Breadcrumbs(breadcrumbLinks)
+                  }
+
                   block()
 
                   AlertSupport(config.support_button_label, config.support_button_url)
@@ -202,6 +218,37 @@ class DashboardPageLayout @Inject constructor(
     }
   }
 
+  private fun TagConsumer<*>.Breadcrumbs(links: List<Link>) {
+    nav("flex") {
+      attributes["aria-label"] = "Breadcrumb"
+      ol("flex items-center space-x-4") {
+        role = "list"
+        li {
+          div {
+            a(classes = "text-gray-400 hover:text-gray-500") {
+              href = IndexAction.PATH
+
+              heroicon(Heroicons.OUTLINE_HOME)
+              span("sr-only") { +"""Home""" }
+            }
+          }
+        }
+        links.forEach {
+          li {
+            div("flex items-center") {
+              // TODO upstream chevron_right and use instead
+              heroicon(Heroicons.MINI_ARROW_LONG_RIGHT)
+              a(classes = "ml-4 text-sm font-medium text-gray-500 hover:text-gray-700") {
+                href = it.href
+                +it.label
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
   companion object {
   }
 }

service/src/main/kotlin/app/cash/backfila/ui/pages/BackfillShowAction.kt

@@ -51,9 +51,16 @@ class BackfillShowAction @Inject constructor(
     @PathParam id: String,
   ): Response<ResponseBody> {
     val backfill = getBackfillStatusAction.status(id.toLong())
+    val label = if (backfill.variant == "default") backfill.service_name else "${backfill.service_name} (${backfill.variant})"
 
     val htmlResponseBody = dashboardPageLayout.newBuilder()
       .title("Backfill $id | Backfila")
+      .breadcrumbLinks(
+        listOf(
+          Link(label, ServiceShowAction.PATH.replace("{service}", backfill.service_name).replace("{variantOrBlank}", if (backfill.variant != "default") backfill.variant else "")),
+          Link("Backfill $id", PATH.replace("{id}", id)),
+        ),
+      )
       .buildHtmlResponseBody {
         AutoReload {
           PageTitle("Backfill", id) {

service/src/main/kotlin/app/cash/backfila/ui/pages/ServiceShowAction.kt

@@ -13,6 +13,7 @@ import kotlinx.html.a
 import kotlinx.html.button
 import misk.scope.ActionScoped
 import misk.security.authz.Authenticated
+import misk.tailwind.Link
 import misk.tokens.TokenGenerator
 import misk.web.Get
 import misk.web.HttpCall
@@ -58,11 +59,18 @@ class ServiceShowAction @Inject constructor(
     val label = if (variant == "default") service else "$service ($variant)"
     val htmlResponseBody = dashboardPageLayout.newBuilder()
       .title("$label | Backfila")
+      .breadcrumbLinks(
+        listOf(
+          Link("Services", ServiceIndexAction.PATH),
+          Link(label, path),
+        ),
+      )
       .buildHtmlResponseBody {
         AutoReload {
           PageTitle("Service", label) {
             a {
-              href = BackfillCreateAction.PATH.replace("{service}", service).replace("{variantOrBlank}", variantOrBlank ?: "")
+              href = BackfillCreateAction.PATH.replace("{service}", service)
+                .replace("{variantOrBlank}", variantOrBlank ?: "")
 
               button(classes = "rounded-full bg-indigo-600 px-3 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600") {
                 type = ButtonType.button