From dff29e32698e6cd24e94d0b90f74c70b76fbd18c Mon Sep 17 00:00:00 2001
From: Shubhranshu Sanjeev <shubhranshu.sanjeev@gmail.com>
Date: Thu, 14 Nov 2024 16:14:16 +0530
Subject: [PATCH] fix: better breadcrumbs management

---
 crates/frontend/src/hoc/layout.rs         | 27 ++++-----
 crates/frontend/src/hoc/nav_breadcrums.rs | 41 ++-----------
 crates/frontend/src/routes.rs             | 70 +++++++++++++----------
 3 files changed, 59 insertions(+), 79 deletions(-)

diff --git a/crates/frontend/src/hoc/layout.rs b/crates/frontend/src/hoc/layout.rs
index b8f8f3e5..7105d80e 100644
--- a/crates/frontend/src/hoc/layout.rs
+++ b/crates/frontend/src/hoc/layout.rs
@@ -2,7 +2,7 @@ use std::ops::Deref;
 
 use crate::{
     components::{side_nav::SideNav, toast::Toast},
-    hoc::nav_breadcrums::{BreadcrumbCtx, Breadcrumbs},
+    hoc::nav_breadcrums::Breadcrumbs,
     providers::alert_provider::AlertQueue,
     utils::{use_tenants, use_url_base},
 };
@@ -21,29 +21,19 @@ impl AsRef<str> for PageHeading {
 }
 
 #[component]
-pub fn Layout() -> impl IntoView {
+pub fn layout() -> impl IntoView {
     let params_map = use_params_map();
     let tenant = Signal::derive(move || match params_map.get().get("tenant") {
         Some(tenant) => tenant.clone(),
         None => String::from("no-tenant"),
     });
-    let breadcrumbs = create_rw_signal(BreadcrumbCtx {
-        current_path: String::new(),
-        params: ParamsMap::new()
-    });
-    provide_context(breadcrumbs);
     provide_context(tenant);
 
     view! {
         <div class="relative p-4 flex min-h-screen bg-surface">
             <SideNav />
 
-            <section class="relative w-full h-full ml-[366px] overflow-y-auto px-4">
-                <Header tenant />
-                <main class="py-8 min-h-[calc(100vh-16px-12px-12px-16px-36px)]">
-                    <Outlet />
-                </main>
-            </section>
+            <Outlet />
 
             {move || {
                 let alert_queue = use_context::<ReadSignal<AlertQueue>>();
@@ -58,6 +48,17 @@ pub fn Layout() -> impl IntoView {
     }
 }
 
+#[component]
+pub fn page(children: Children) -> impl IntoView {
+    let tenant = use_context::<Signal<String>>().unwrap();
+    view! {
+        <section class="relative w-full h-full ml-[366px] overflow-y-auto px-4">
+            <Header tenant />
+            <main class="py-8 min-h-[calc(100vh-16px-12px-12px-16px-36px)]">{children()}</main>
+        </section>
+    }
+}
+
 #[component]
 fn header(tenant: Signal<String>) -> impl IntoView {
     view! {
diff --git a/crates/frontend/src/hoc/nav_breadcrums.rs b/crates/frontend/src/hoc/nav_breadcrums.rs
index 36f543fe..6f1c8f7c 100644
--- a/crates/frontend/src/hoc/nav_breadcrums.rs
+++ b/crates/frontend/src/hoc/nav_breadcrums.rs
@@ -16,12 +16,6 @@ struct RouteMetadata {
 
 type DynamicLabelFn = Box<Arc<dyn Fn(&ParamsMap) -> Option<String> + Send + Sync>>;
 
-#[derive(Clone)]
-pub struct BreadcrumbCtx {
-    pub current_path: String,
-    pub params: ParamsMap,
-}
-
 static BREADCRUMB_STORE: Lazy<HashMap<String, RouteMetadata>> = Lazy::new(|| {
     let mut routes = HashMap::new();
 
@@ -229,39 +223,15 @@ pub fn get_breadcrumbs(
     breadcrumbs
 }
 
-// Components
 #[component]
-pub fn with_breadcrumbs(children: Children) -> impl IntoView {
+pub fn breadcrumbs() -> impl IntoView {
     let params = use_params_map();
-    let service_prefix = use_url_base();
-    let breadcrumb_ctx = use_context::<RwSignal<BreadcrumbCtx>>()
-        .expect("BreadcrumbContext not found");
+    let tenant = use_context::<Signal<String>>().unwrap();
 
-    create_effect(move |_| {
-        let base = format!("{service_prefix}/admin/:tenant");
+    let breadcrumbs = create_memo(move |_| {
+        let base = format!("{}/admin/:tenant", use_url_base());
         let current_path = use_route().original_path().replace(&base, "");
         let params = params.get();
-        logging::log!("{current_path} {}", use_route().original_path());
-        logging::log!("{:?}", params.0);
-        breadcrumb_ctx.set(BreadcrumbCtx {
-            current_path,
-            params,
-        });
-    });
-
-    children()
-}
-
-#[component]
-pub fn breadcrumbs() -> impl IntoView {
-    let breadcrumb_ctx =
-        use_context::<RwSignal<BreadcrumbCtx>>().expect("BreadcrumbStore not found");
-
-    let breadcrumbs = create_memo(move |_| {
-        let BreadcrumbCtx {
-            current_path,
-            params,
-        } = breadcrumb_ctx.get();
         logging::log!("BREAD {current_path}");
         logging::log!("BREAD {:?}", params.0);
         get_breadcrumbs(&current_path, &params)
@@ -278,7 +248,8 @@ pub fn breadcrumbs() -> impl IntoView {
                         .map(|(index, (path, label, icon))| {
                             let is_last = index == breadcrumbs.get().len() - 1;
                             let show_separator = index > 0;
-                            let path = path.trim_matches('/').to_string();
+                            let base = format!("{}/admin/{}", use_url_base(), tenant.get());
+                            let path = format!("{}{}", base, path);
                             view! {
                                 <li class="flex items-center">
                                     {if show_separator {
diff --git a/crates/frontend/src/routes.rs b/crates/frontend/src/routes.rs
index 9313e347..0cd0e4db 100644
--- a/crates/frontend/src/routes.rs
+++ b/crates/frontend/src/routes.rs
@@ -2,7 +2,7 @@ use leptos::*;
 use leptos_router::{Route, SsrMode};
 
 use crate::{
-    hoc::{layout::Layout, nav_breadcrums::WithBreadcrumbs},
+    hoc::layout::{Layout, Page},
     pages::{
         config_version::ConfigVersion,
         config_version_list::ConfigVersionList,
@@ -38,9 +38,9 @@ pub fn app_routes() -> impl IntoView {
                 path="/experiments"
                 view=move || {
                     view! {
-                        <WithBreadcrumbs>
+                        <Page>
                             <ExperimentList />
-                        </WithBreadcrumbs>
+                        </Page>
                     }
                 }
             />
@@ -50,9 +50,9 @@ pub fn app_routes() -> impl IntoView {
                 path="/experiments/new"
                 view=move || {
                     view! {
-                        <WithBreadcrumbs>
+                        <Page>
                             <NewExperiment />
-                        </WithBreadcrumbs>
+                        </Page>
                     }
                 }
             />
@@ -62,9 +62,9 @@ pub fn app_routes() -> impl IntoView {
                 path="/experiments/:id"
                 view=move || {
                     view! {
-                        <WithBreadcrumbs>
+                        <Page>
                             <ExperimentPage />
-                        </WithBreadcrumbs>
+                        </Page>
                     }
                 }
             />
@@ -74,9 +74,9 @@ pub fn app_routes() -> impl IntoView {
                 path="/function"
                 view=move || {
                     view! {
-                        <WithBreadcrumbs>
+                        <Page>
                             <FunctionList />
-                        </WithBreadcrumbs>
+                        </Page>
                     }
                 }
             />
@@ -86,9 +86,9 @@ pub fn app_routes() -> impl IntoView {
                 path="/function/create"
                 view=move || {
                     view! {
-                        <WithBreadcrumbs>
+                        <Page>
                             <CreateFunctionView />
-                        </WithBreadcrumbs>
+                        </Page>
                     }
                 }
             />
@@ -98,9 +98,9 @@ pub fn app_routes() -> impl IntoView {
                 path="/function/:function_name"
                 view=move || {
                     view! {
-                        <WithBreadcrumbs>
+                        <Page>
                             <FunctionPage />
-                        </WithBreadcrumbs>
+                        </Page>
                     }
                 }
             />
@@ -110,9 +110,9 @@ pub fn app_routes() -> impl IntoView {
                 path="/types"
                 view=move || {
                     view! {
-                        <WithBreadcrumbs>
+                        <Page>
                             <TypesPage />
-                        </WithBreadcrumbs>
+                        </Page>
                     }
                 }
             />
@@ -122,9 +122,9 @@ pub fn app_routes() -> impl IntoView {
                 path="/types/new"
                 view=move || {
                     view! {
-                        <WithBreadcrumbs>
+                        <Page>
                             <NewTemplateType />
-                        </WithBreadcrumbs>
+                        </Page>
                     }
                 }
             />
@@ -134,26 +134,34 @@ pub fn app_routes() -> impl IntoView {
                 path="/types/:type_name/update"
                 view=move || {
                     view! {
-                        <WithBreadcrumbs>
+                        <Page>
                             <UpdateTemplateType />
-                        </WithBreadcrumbs>
+                        </Page>
                     }
                 }
             />
 
             <Route
                 ssr=SsrMode::Async
-                path="/config/version"
+                path="/config/versions"
                 view=move || {
-                    view! { <ConfigVersionList /> }
+                    view! {
+                        <Page>
+                            <ConfigVersionList />
+                        </Page>
+                    }
                 }
             />
 
             <Route
                 ssr=SsrMode::Async
-                path="/config/version/:version"
+                path="/config/versions/:version"
                 view=move || {
-                    view! { <ConfigVersion /> }
+                    view! {
+                        <Page>
+                            <ConfigVersion />
+                        </Page>
+                    }
                 }
             />
 
@@ -162,9 +170,9 @@ pub fn app_routes() -> impl IntoView {
                 path="/dimensions"
                 view=move || {
                     view! {
-                        <WithBreadcrumbs>
+                        <Page>
                             <Dimensions />
-                        </WithBreadcrumbs>
+                        </Page>
                     }
                 }
             />
@@ -174,9 +182,9 @@ pub fn app_routes() -> impl IntoView {
                 path="/default-config"
                 view=move || {
                     view! {
-                        <WithBreadcrumbs>
+                        <Page>
                             <DefaultConfig />
-                        </WithBreadcrumbs>
+                        </Page>
                     }
                 }
             />
@@ -186,9 +194,9 @@ pub fn app_routes() -> impl IntoView {
                 path="/overrides"
                 view=move || {
                     view! {
-                        <WithBreadcrumbs>
+                        <Page>
                             <ContextOverride />
-                        </WithBreadcrumbs>
+                        </Page>
                     }
                 }
             />
@@ -198,9 +206,9 @@ pub fn app_routes() -> impl IntoView {
                 path="/resolve"
                 view=move || {
                     view! {
-                        <WithBreadcrumbs>
+                        <Page>
                             <Home />
-                        </WithBreadcrumbs>
+                        </Page>
                     }
                 }
             />