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

packages/admin/dashboard/src/components/layout/main-layout/main-layout.tsx

@@ -19,14 +19,13 @@ import * as Collapsible from "@radix-ui/react-collapsible"
 import { useTranslation } from "react-i18next"
 
 import { useStore } from "../../../hooks/api/store"
-import { settingsRouteRegex } from "../../../lib/extension-helpers"
 import { Divider } from "../../common/divider"
 import { Skeleton } from "../../common/skeleton"
-import { NavItem, NavItemProps } from "../../layout/nav-item"
+import { INavItem, NavItem } from "../../layout/nav-item"
 import { Shell } from "../../layout/shell"
 
 import { Link, useLocation, useNavigate } from "react-router-dom"
-import routes from "virtual:medusa/routes/links"
+import { useDashboardExtension } from "../../../extensions"
 import { useLogout } from "../../../hooks/api"
 import { queryClient } from "../../../lib/query-client"
 import { useSearch } from "../../../providers/search-provider"
@@ -177,7 +176,7 @@ const Header = () => {
   )
 }
 
-const useCoreRoutes = (): Omit<NavItemProps, "pathname">[] => {
+const useCoreRoutes = (): Omit<INavItem, "pathname">[] => {
   const { t } = useTranslation()
 
   return [
@@ -297,14 +296,11 @@ const CoreRouteSection = () => {
 
 const ExtensionRouteSection = () => {
   const { t } = useTranslation()
+  const { getMenu } = useDashboardExtension()
 
-  const links = routes.links
+  const menuItems = getMenu("coreExtensions")
 
-  const extensionLinks = links
-    .filter((link) => !settingsRouteRegex.test(link.path))
-    .sort((a, b) => a.label.localeCompare(b.label))
-
-  if (!extensionLinks.length) {
+  if (!menuItems.length) {
     return null
   }
 
@@ -330,13 +326,14 @@ const ExtensionRouteSection = () => {
           </div>
           <Collapsible.Content>
             <nav className="flex flex-col gap-y-0.5 py-1 pb-4">
-              {extensionLinks.map((link) => {
+              {menuItems.map((item, i) => {
                 return (
                   <NavItem
-                    key={link.path}
-                    to={link.path}
-                    label={link.label}
-                    icon={link.icon ? <link.icon /> : <SquaresPlus />}
+                    key={i}
+                    to={item.to}
+                    label={item.label}
+                    icon={item.icon ? item.icon : <SquaresPlus />}
+                    items={item.items}
                     type="extension"
                   />
                 )