feat(dashboard,admin-sdk,admin-shared,admin-vite-plugin): Add support for UI extensions (#7383)

* intial work

* update lock

* add routes and fix HMR of configs

* cleanup

* rm imports

* rm debug from plugin

* address feedback

* address feedback

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

@@ -13,12 +13,15 @@ import { Avatar, Text } from "@medusajs/ui"
 import * as Collapsible from "@radix-ui/react-collapsible"
 import { useTranslation } from "react-i18next"
 
-import { ComponentType } from "react"
 import { useStore } from "../../../hooks/api/store"
 import { Skeleton } from "../../common/skeleton"
 import { NavItem, NavItemProps } from "../../layout/nav-item"
 import { Shell } from "../../layout/shell"
 
+import routes from "virtual:medusa/routes/links"
+import { settingsRouteRegex } from "../../../lib/extension-helpers"
+import { Divider } from "../../common/divider"
+
 export const MainLayout = () => {
   return (
     <Shell>
@@ -34,7 +37,7 @@ const MainSidebar = () => {
         <div className="bg-ui-bg-subtle sticky top-0">
           <Header />
           <div className="px-3">
-            <div className="border-ui-border-strong h-px w-full border-b border-dashed" />
+            <Divider variant="dashed" />
           </div>
         </div>
         <CoreRouteSection />
@@ -157,7 +160,7 @@ const CoreRouteSection = () => {
   const coreRoutes = useCoreRoutes()
 
   return (
-    <nav className="flex flex-col gap-y-1 py-2">
+    <nav className="flex flex-col gap-y-1 py-3">
       {coreRoutes.map((route) => {
         return <NavItem key={route.to} {...route} />
       })}
@@ -165,27 +168,31 @@ const CoreRouteSection = () => {
   )
 }
 
-const extensions = {
-  links: null as { path: string; label: string; icon?: ComponentType }[] | null,
-}
-
 const ExtensionRouteSection = () => {
-  if (!extensions.links || extensions.links.length === 0) {
+  const { t } = useTranslation()
+
+  const links = routes.links
+
+  const extensionLinks = links.filter(
+    (link) => !settingsRouteRegex.test(link.path)
+  )
+
+  if (!extensionLinks.length) {
     return null
   }
 
   return (
     <div>
       <div className="px-3">
-        <div className="border-ui-border-strong h-px w-full border-b border-dashed" />
+        <Divider variant="dashed" />
       </div>
-      <div className="flex flex-col gap-y-1 py-2">
+      <div className="flex flex-col gap-y-1 py-3">
         <Collapsible.Root defaultOpen>
           <div className="px-4">
             <Collapsible.Trigger asChild className="group/trigger">
               <button className="text-ui-fg-subtle flex w-full items-center justify-between px-2">
                 <Text size="xsmall" weight="plus" leading="compact">
-                  Extensions
+                  {t("nav.extensions")}
                 </Text>
                 <div className="text-ui-fg-muted">
                   <ChevronDownMini className="group-data-[state=open]/trigger:hidden" />
@@ -196,7 +203,7 @@ const ExtensionRouteSection = () => {
           </div>
           <Collapsible.Content>
             <div className="flex flex-col gap-y-1 py-1 pb-4">
-              {extensions.links.map((link) => {
+              {extensionLinks.map((link) => {
                 return (
                   <NavItem
                     key={link.path}