Retain non-variable sub route on breadcrumbs (#5526)

web-common/src/components/navigation/breadcrumbs/BreadcrumbItem.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import { page } from "$app/stores";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
+  import { getNonVariableSubRoute } from "@rilldata/web-common/components/navigation/breadcrumbs/utils";
   import type { PathOption, PathOptions } from "./Breadcrumbs.svelte";
 
   export let options: PathOptions;
@@ -18,6 +20,7 @@
     depth: number,
     id: string,
     option: PathOption,
+    route: string,
   ) {
     if (onSelect) return undefined;
     if (option?.href) return option.href;
@@ -29,8 +32,10 @@
     if (option?.section) newPath.push(option.section);
 
     newPath.push(id);
+    const path = `/${newPath.join("/")}`;
 
-    return `/${newPath.join("/")}`;
+    // add the sub route if it has no variables
+    return path + getNonVariableSubRoute(path, route);
   }
 </script>
 
@@ -41,7 +46,7 @@
         on:click={() => {
           if (isCurrentPage && !isEmbedded) window.location.reload();
         }}
-        href={linkMaker(currentPath, depth, current, selected)}
+        href={linkMaker(currentPath, depth, current, selected, "")}
         class="text-gray-500 hover:text-gray-600"
         class:current={isCurrentPage}
       >
@@ -65,7 +70,13 @@
               class="cursor-pointer"
               checked={selected}
               checkSize={"h-3 w-3"}
-              href={linkMaker(currentPath, depth, id, option)}
+              href={linkMaker(
+                currentPath,
+                depth,
+                id,
+                option,
+                $page.route.id ?? "",
+              )}
               on:click={() => {
                 if (onSelect) {
                   onSelect(id);

web-common/src/components/navigation/breadcrumbs/utils.ts

@@ -0,0 +1,21 @@
+const variableRouteRegex = /\[.*]/;
+
+/**
+ * Gets sub route with prefix of path if it does not have any variables.
+ * This helps to easily switch to another org/project but keep the same sub route like settings/alerts
+ * @param path
+ * @param route
+ */
+export function getNonVariableSubRoute(path: string, route: string) {
+  const pathParts = path.split("/");
+  const routeParts = route.split("/").slice(pathParts.length);
+  if (
+    // if any sub route has a variable then do not return sub route
+    routeParts.some((p) => p.match(variableRouteRegex)) ||
+    routeParts.length === 0
+  ) {
+    return "";
+  }
+
+  return "/" + routeParts.join("/");
+}