From c3561fae3a8715a914d6ef052d4acd4ff08c9e9a Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Wed, 4 Sep 2024 12:12:10 +0200
Subject: [PATCH] fix(dashboard): Display breadcrumbs for variant route (#8983)

Resolves CC-63
---
 .../providers/router-provider/route-map.tsx   | 157 ++++++++++--------
 1 file changed, 89 insertions(+), 68 deletions(-)

diff --git a/packages/admin-next/dashboard/src/providers/router-provider/route-map.tsx b/packages/admin-next/dashboard/src/providers/router-provider/route-map.tsx
index 2c88205073..168a7e857d 100644
--- a/packages/admin-next/dashboard/src/providers/router-provider/route-map.tsx
+++ b/packages/admin-next/dashboard/src/providers/router-provider/route-map.tsx
@@ -15,6 +15,7 @@ import {
   getProvinceByIso2,
   isProvinceInCountry,
 } from "../../lib/data/country-states"
+import { productLoader } from "../../routes/products/product-detail/loader"
 import { taxRegionLoader } from "../../routes/tax-regions/tax-region-detail/loader"
 import { RouteExtensions } from "./route-extensions"
 import { SettingsExtensions } from "./settings-extensions"
@@ -73,85 +74,105 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () => import("../../routes/products/product-detail"),
+                errorElement: <ErrorBoundary />,
+                Component: Outlet,
+                loader: productLoader,
                 handle: {
                   crumb: (data: HttpTypes.AdminProductResponse) =>
                     data.product.title,
                 },
                 children: [
                   {
-                    path: "edit",
-                    lazy: () => import("../../routes/products/product-edit"),
+                    path: "",
+                    lazy: () => import("../../routes/products/product-detail"),
+                    children: [
+                      {
+                        path: "edit",
+                        lazy: () =>
+                          import("../../routes/products/product-edit"),
+                      },
+                      {
+                        path: "sales-channels",
+                        lazy: () =>
+                          import(
+                            "../../routes/products/product-sales-channels"
+                          ),
+                      },
+                      {
+                        path: "attributes",
+                        lazy: () =>
+                          import("../../routes/products/product-attributes"),
+                      },
+                      {
+                        path: "organization",
+                        lazy: () =>
+                          import("../../routes/products/product-organization"),
+                      },
+                      {
+                        path: "media",
+                        lazy: () =>
+                          import("../../routes/products/product-media"),
+                      },
+                      {
+                        path: "prices",
+                        lazy: () =>
+                          import("../../routes/products/product-prices"),
+                      },
+                      {
+                        path: "options/create",
+                        lazy: () =>
+                          import("../../routes/products/product-create-option"),
+                      },
+                      {
+                        path: "options/:option_id/edit",
+                        lazy: () =>
+                          import("../../routes/products/product-edit-option"),
+                      },
+                      {
+                        path: "variants/create",
+                        lazy: () =>
+                          import(
+                            "../../routes/products/product-create-variant"
+                          ),
+                      },
+                      {
+                        path: "metadata/edit",
+                        lazy: () =>
+                          import("../../routes/products/product-metadata"),
+                      },
+                    ],
                   },
                   {
-                    path: "sales-channels",
-                    lazy: () =>
-                      import("../../routes/products/product-sales-channels"),
-                  },
-                  {
-                    path: "attributes",
-                    lazy: () =>
-                      import("../../routes/products/product-attributes"),
-                  },
-                  {
-                    path: "organization",
-                    lazy: () =>
-                      import("../../routes/products/product-organization"),
-                  },
-                  {
-                    path: "media",
-                    lazy: () => import("../../routes/products/product-media"),
-                  },
-                  {
-                    path: "prices",
-                    lazy: () => import("../../routes/products/product-prices"),
-                  },
-                  {
-                    path: "options/create",
-                    lazy: () =>
-                      import("../../routes/products/product-create-option"),
-                  },
-                  {
-                    path: "options/:option_id/edit",
-                    lazy: () =>
-                      import("../../routes/products/product-edit-option"),
-                  },
-                  {
-                    path: "variants/create",
-                    lazy: () =>
-                      import("../../routes/products/product-create-variant"),
-                  },
-                  {
-                    path: "metadata/edit",
-                    lazy: () =>
-                      import("../../routes/products/product-metadata"),
-                  },
-                ],
-              },
-              {
-                path: ":id/variants/:variant_id",
-                lazy: () =>
-                  import(
-                    "../../routes/product-variants/product-variant-detail"
-                  ),
-                children: [
-                  {
-                    path: "edit",
+                    path: "variants/:variant_id",
                     lazy: () =>
                       import(
-                        "../../routes/product-variants/product-variant-edit"
-                      ),
-                  },
-                  {
-                    path: "prices",
-                    lazy: () => import("../../routes/products/product-prices"),
-                  },
-                  {
-                    path: "manage-items",
-                    lazy: () =>
-                      import(
-                        "../../routes/product-variants/product-variant-manage-inventory-items"
+                        "../../routes/product-variants/product-variant-detail"
                       ),
+                    handle: {
+                      crumb: (data: HttpTypes.AdminProductVariantResponse) =>
+                        data.variant.title,
+                    },
+                    children: [
+                      {
+                        path: "edit",
+                        lazy: () =>
+                          import(
+                            "../../routes/product-variants/product-variant-edit"
+                          ),
+                      },
+                      {
+                        path: "prices",
+                        lazy: () =>
+                          import("../../routes/products/product-prices"),
+                      },
+                      {
+                        path: "manage-items",
+                        lazy: () =>
+                          import(
+                            "../../routes/product-variants/product-variant-manage-inventory-items"
+                          ),
+                      },
+                    ],
                   },
                 ],
               },