Add new Service index browser client side search with variant support

Author: adrw

service/src/main/kotlin/app/cash/backfila/ui/actions/ServiceAutocompleteAction.kt

@@ -23,12 +23,10 @@ class ServiceAutocompleteAction @Inject constructor(
   fun get(
     @QueryParam q: String?,
   ): String {
-    val services = getServicesAction.services().services
+    val services = getFlattenedServices()
 
     return buildHtml {
-      services.flatMap { service ->
-        service.variants.map { variant -> "${service.name}/$variant" to service }
-      }.filter { (path, _) ->
+      services.filter { (path, _) ->
         q.isNullOrBlank() || path.lowercase().contains(q.lowercase())
       }.map { (path, service) ->
         li("list-group-item cursor-default select-none px-4 py-2 text-left") {
@@ -43,6 +41,13 @@ class ServiceAutocompleteAction @Inject constructor(
     }
   }
 
+  fun getFlattenedServices(): Map<String, GetServicesAction.UiService> {
+    val services = getServicesAction.services().services
+    return services.flatMap { service ->
+      service.variants.map { variant -> "${service.name}/$variant" to service }
+    }.toMap()
+  }
+
   companion object {
     const val PATH = "/api/autocomplete/services"
   }

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

@@ -4,13 +4,19 @@ import kotlinx.html.TagConsumer
 import kotlinx.html.div
 import kotlinx.html.main
 import kotlinx.html.script
+import misk.tailwind.Link
+import misk.tailwind.pages.MenuSection
+import misk.tailwind.pages.Navbar
 import misk.web.dashboard.HtmlLayout
+import wisp.deployment.getDeploymentFromEnvironmentVariable
 
 fun TagConsumer<*>.DashboardLayout(
   title: String,
   path: String,
   block: TagConsumer<*>.() -> Unit = {},
 ) {
+  val deployment = getDeploymentFromEnvironmentVariable()
+
   HtmlLayout(
     appRoot = "/",
     title = title,
@@ -22,19 +28,90 @@ fun TagConsumer<*>.DashboardLayout(
         type = "module"
         src = "/static/js/autocomplete_controller.js"
       }
+      script {
+        type = "module"
+        src = "/static/js/search_bar_controller.js"
+      }
     },
   ) {
     div("min-h-full") {
-      NavBar(path)
-      div("py-10") {
-        main {
-          div("mx-auto max-w-7xl sm:px-6 lg:px-8") {
-            // TODO remove when new UI is stable and preferred
-            UseOldUIAlert()
-            block()
+      if (true) {
+        // Uses Misk's Navbar with sidebar
+        Navbar(
+          appName = "Backfila",
+          deployment = deployment,
+          homeHref = "/",
+          menuSections = buildMenuSections(
+            currentPath = path,
+          ),
+        ) {
+          div("py-10") {
+            main {
+              div("mx-auto max-w-7xl sm:px-6 lg:px-8") {
+                // TODO remove when new UI is stable and preferred
+                UseOldUIAlert()
+                block()
+              }
+            }
+          }
+        }
+      } else {
+        NavBar(path)
+        div("py-10") {
+          main {
+            div("mx-auto max-w-7xl sm:px-6 lg:px-8") {
+              // TODO remove when new UI is stable and preferred
+              UseOldUIAlert()
+              block()
+            }
           }
         }
       }
     }
   }
 }
+
+private fun buildMenuSections(
+  currentPath: String,
+) = listOf(
+  MenuSection(
+    title = "Backfila",
+    links = listOf(
+      Link(
+        label = "Services",
+        href = "/services/",
+        isSelected = currentPath.startsWith("/services/"),
+      ),
+      Link(
+        label = "Backfills",
+        href = "/backfills/",
+        isSelected = currentPath.startsWith("/backfills/"),
+      ),
+    ),
+  ),
+  MenuSection(
+    title = "Your Services",
+    links = listOf(
+      Link(
+        label = "Fine Dining",
+        href = "/services/?q=FineDining",
+        isSelected = currentPath.startsWith("/services/?q=FindDining"),
+      ),
+    ),
+  ),
+  MenuSection(
+    title = "Your Backfills",
+    links = listOf(
+      Link(
+        label = "FineDining #0034",
+        href = "/services/",
+        isSelected = currentPath.startsWith("/backfill/"),
+      ),
+      Link(
+        label = "FineDining #0067",
+        href = "/backfill/",
+        isSelected = currentPath.startsWith("/backfill/"),
+      ),
+    ),
+  ),
+)