feat(dashboard,admin-vite-plugin,admin-bundler,admin-sdk): Rework admin extensions and introduce custom fields API (#9338)

packages/admin/dashboard/src/providers/index.ts

@@ -0,0 +1 @@
+export * from "./providers"

packages/admin/dashboard/src/providers/providers.tsx

@@ -0,0 +1,35 @@
+import { Toaster, TooltipProvider } from "@medusajs/ui"
+import { QueryClientProvider } from "@tanstack/react-query"
+import type { PropsWithChildren } from "react"
+import { HelmetProvider } from "react-helmet-async"
+
+import { I18n } from "../components/utilities/i18n"
+import {
+  DashboardExtensionManager,
+  DashboardExtensionProvider,
+} from "../extensions"
+import { queryClient } from "../lib/query-client"
+import { I18nProvider } from "./i18n-provider"
+import { ThemeProvider } from "./theme-provider"
+
+type ProvidersProps = PropsWithChildren<{
+  api: DashboardExtensionManager["api"]
+}>
+
+export const Providers = ({ api, children }: ProvidersProps) => {
+  return (
+    <TooltipProvider>
+      <DashboardExtensionProvider api={api}>
+        <HelmetProvider>
+          <QueryClientProvider client={queryClient}>
+            <ThemeProvider>
+              <I18n />
+              <I18nProvider>{children}</I18nProvider>
+              <Toaster />
+            </ThemeProvider>
+          </QueryClientProvider>
+        </HelmetProvider>
+      </DashboardExtensionProvider>
+    </TooltipProvider>
+  )
+}

packages/admin/dashboard/src/providers/router-provider/route-extensions.tsx

@@ -1,12 +1,12 @@
-import routes from "virtual:medusa/routes/pages"
+import routeModule from "virtual:medusa/routes"
+import {
+  createRouteMap,
+  getRouteExtensions,
+} from "../../extensions/routes/utils"
 
-import { createRouteMap, settingsRouteRegex } from "../../lib/extension-helpers"
-
-const pages = routes.pages
-  .filter((ext) => !settingsRouteRegex.test(ext.path))
-  .map((ext) => ext)
+const routes = getRouteExtensions(routeModule, "core")
 
 /**
  * Core Route extensions.
  */
-export const RouteExtensions = createRouteMap(pages)
+export const RouteExtensions = createRouteMap(routes)

packages/admin/dashboard/src/providers/router-provider/route-map.tsx

@@ -1,15 +1,11 @@
-import {
-  AdminProductCategoryResponse,
-  AdminTaxRegionResponse,
-  HttpTypes,
-} from "@medusajs/types"
+import { AdminProductCategoryResponse, HttpTypes } from "@medusajs/types"
 import { Outlet, RouteObject } from "react-router-dom"
 
 import { ProtectedRoute } from "../../components/authentication/protected-route"
 import { MainLayout } from "../../components/layout/main-layout"
+import { PublicLayout } from "../../components/layout/public-layout"
 import { SettingsLayout } from "../../components/layout/settings-layout"
 import { ErrorBoundary } from "../../components/utilities/error-boundary"
-
 import { getCountryByIso2 } from "../../lib/data/countries"
 import {
   getProvinceByIso2,
@@ -22,32 +18,14 @@ import { SettingsExtensions } from "./settings-extensions"
 
 // TODO: Add translations for all breadcrumbs
 export const RouteMap: RouteObject[] = [
-  {
-    path: "/login",
-    lazy: () => import("../../routes/login"),
-  },
-  {
-    path: "/reset-password",
-    lazy: () => import("../../routes/reset-password"),
-  },
-  {
-    path: "*",
-    lazy: () => import("../../routes/no-match"),
-  },
-  {
-    path: "/invite",
-    lazy: () => import("../../routes/invite"),
-  },
   {
     element: <ProtectedRoute />,
-    errorElement: <ErrorBoundary />,
     children: [
       {
-        path: "/",
         element: <MainLayout />,
         children: [
           {
-            index: true,
+            path: "/",
             errorElement: <ErrorBoundary />,
             lazy: () => import("../../routes/home"),
           },
@@ -677,6 +655,11 @@ export const RouteMap: RouteObject[] = [
                         "../../routes/inventory/inventory-detail/components/edit-inventory-item-attributes"
                       ),
                   },
+                  {
+                    path: "metadata/edit",
+                    lazy: () =>
+                      import("../../routes/inventory/inventory-metadata"),
+                  },
                   {
                     path: "locations",
                     lazy: () =>
@@ -691,21 +674,6 @@ export const RouteMap: RouteObject[] = [
                         "../../routes/inventory/inventory-detail/components/adjust-inventory"
                       ),
                   },
-                  {
-                    path: "metadata/edit",
-                    lazy: () =>
-                      import("../../routes/inventory/inventory-metadata"),
-                  },
-                  {
-                    // TODO: create reservation
-                    path: "reservations",
-                    lazy: () => import("../../routes/customers/customer-edit"),
-                  },
-                  {
-                    // TODO: edit reservation
-                    path: "reservations/:reservation_id",
-                    lazy: () => import("../../routes/customers/customer-edit"),
-                  },
                 ],
               },
             ],
@@ -780,10 +748,6 @@ export const RouteMap: RouteObject[] = [
                     lazy: () =>
                       import("../../routes/regions/region-add-countries"),
                   },
-                  {
-                    path: "metadata/edit",
-                    lazy: () => import("../../routes/regions/region-metadata"),
-                  },
                 ],
               },
             ],
@@ -1160,10 +1124,8 @@ export const RouteMap: RouteObject[] = [
               },
             ],
           },
-
           {
             path: "publishable-api-keys",
-            errorElement: <ErrorBoundary />,
             element: <Outlet />,
             handle: {
               crumb: () => "Publishable API Keys",
@@ -1223,7 +1185,6 @@ export const RouteMap: RouteObject[] = [
           },
           {
             path: "secret-api-keys",
-            errorElement: <ErrorBoundary />,
             element: <Outlet />,
             handle: {
               crumb: () => "Secret API Keys",
@@ -1276,7 +1237,6 @@ export const RouteMap: RouteObject[] = [
           },
           {
             path: "tax-regions",
-            errorElement: <ErrorBoundary />,
             element: <Outlet />,
             handle: {
               crumb: () => "Tax Regions",
@@ -1298,7 +1258,7 @@ export const RouteMap: RouteObject[] = [
                 Component: Outlet,
                 loader: taxRegionLoader,
                 handle: {
-                  crumb: (data: AdminTaxRegionResponse) => {
+                  crumb: (data: HttpTypes.AdminTaxRegionResponse) => {
                     return (
                       getCountryByIso2(data.tax_region.country_code)
                         ?.display_name ||
@@ -1356,7 +1316,7 @@ export const RouteMap: RouteObject[] = [
                         "../../routes/tax-regions/tax-region-province-detail"
                       ),
                     handle: {
-                      crumb: (data: AdminTaxRegionResponse) => {
+                      crumb: (data: HttpTypes.AdminTaxRegionResponse) => {
                         const countryCode =
                           data.tax_region.country_code?.toUpperCase()
                         const provinceCode =
@@ -1395,7 +1355,6 @@ export const RouteMap: RouteObject[] = [
           },
           {
             path: "return-reasons",
-            errorElement: <ErrorBoundary />,
             element: <Outlet />,
             handle: {
               crumb: () => "Return Reasons",
@@ -1435,4 +1394,30 @@ export const RouteMap: RouteObject[] = [
       },
     ],
   },
+  {
+    element: <PublicLayout />,
+    children: [
+      {
+        errorElement: <ErrorBoundary />,
+        children: [
+          {
+            path: "/login",
+            lazy: () => import("../../routes/login"),
+          },
+          {
+            path: "/reset-password",
+            lazy: () => import("../../routes/reset-password"),
+          },
+          {
+            path: "/invite",
+            lazy: () => import("../../routes/invite"),
+          },
+          {
+            path: "*",
+            lazy: () => import("../../routes/no-match"),
+          },
+        ],
+      },
+    ],
+  },
 ]

packages/admin/dashboard/src/providers/router-provider/settings-extensions.tsx

@@ -1,12 +1,12 @@
-import routes from "virtual:medusa/routes/pages"
+import routeModule from "virtual:medusa/routes"
+import {
+  createRouteMap,
+  getRouteExtensions,
+} from "../../extensions/routes/utils"
 
-import { createRouteMap, settingsRouteRegex } from "../../lib/extension-helpers"
-
-const pages = routes.pages
-  .filter((ext) => settingsRouteRegex.test(ext.path))
-  .map((ext) => ext)
+const routes = getRouteExtensions(routeModule, "settings")
 
 /**
  * Settings Route extensions.
  */
-export const SettingsExtensions = createRouteMap(pages, "/settings")
+export const SettingsExtensions = createRouteMap(routes, "/settings")