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

packages/admin/dashboard/src/routes/users/user-detail/components/user-general-section/user-general-section.tsx

@@ -1,5 +1,5 @@
 import { PencilSquare, Trash } from "@medusajs/icons"
-import { UserDTO } from "@medusajs/types"
+import { HttpTypes } from "@medusajs/types"
 import { Container, Heading, Text, usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
@@ -7,7 +7,7 @@ import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useDeleteUser } from "../../../../../hooks/api/users"
 
 type UserGeneralSectionProps = {
-  user: UserDTO
+  user: HttpTypes.AdminUser
 }
 
 export const UserGeneralSection = ({ user }: UserGeneralSectionProps) => {

packages/admin/dashboard/src/routes/users/user-detail/user-detail.tsx

@@ -1,13 +1,12 @@
-import { Outlet, json, useLoaderData, useParams } from "react-router-dom"
+import { useLoaderData, useParams } from "react-router-dom"
 
-import { JsonViewSection } from "../../../components/common/json-view-section"
 import { useUser } from "../../../hooks/api/users"
 import { UserGeneralSection } from "./components/user-general-section"
 import { userLoader } from "./loader"
 
-import after from "virtual:medusa/widgets/user/details/after"
-import before from "virtual:medusa/widgets/user/details/before"
+import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
+import { useDashboardExtension } from "../../../extensions"
 
 export const UserDetail = () => {
   const initialData = useLoaderData() as Awaited<ReturnType<typeof userLoader>>
@@ -22,40 +21,27 @@ export const UserDetail = () => {
     initialData,
   })
 
-  if (isLoading) {
-    return <div>Loading...</div>
+  const { getWidgets } = useDashboardExtension()
+
+  if (isLoading || !user) {
+    return <SingleColumnPageSkeleton sections={1} showJSON showMetadata />
   }
 
-  if (isError || !user) {
-    if (error) {
-      throw error
-    }
-
-    throw json("An unknown error has occured", 500)
+  if (isError) {
+    throw error
   }
 
   return (
     <SingleColumnPage
-      widgets={{
-        before,
-        after,
-      }}
       data={user}
-      hasOutlet
-      showMetadata
       showJSON
+      showMetadata
+      widgets={{
+        after: getWidgets("user.details.after"),
+        before: getWidgets("user.details.before"),
+      }}
     >
-      {before.widgets.map((w, i) => (
-        <div key={i}>
-          <w.Component data={user} />
-        </div>
-      ))}
       <UserGeneralSection user={user} />
-      {after.widgets.map((w, i) => (
-        <div key={i}>
-          <w.Component data={user} />
-        </div>
-      ))}
     </SingleColumnPage>
   )
 }

packages/admin/dashboard/src/routes/users/user-list/user-list.tsx

@@ -1,25 +1,18 @@
-import { Outlet } from "react-router-dom"
-
+import { SingleColumnPage } from "../../../components/layout/pages"
+import { useDashboardExtension } from "../../../extensions"
 import { UserListTable } from "./components/user-list-table"
 
-import after from "virtual:medusa/widgets/user/list/after"
-import before from "virtual:medusa/widgets/user/list/before"
-
 export const UserList = () => {
+  const { getWidgets } = useDashboardExtension()
+
   return (
-    <div className="flex flex-col gap-y-2">
-      {before.widgets.map((w, i) => (
-        <div key={i}>
-          <w.Component />
-        </div>
-      ))}
+    <SingleColumnPage
+      widgets={{
+        after: getWidgets("user.list.after"),
+        before: getWidgets("user.list.before"),
+      }}
+    >
       <UserListTable />
-      {after.widgets.map((w, i) => (
-        <div key={i}>
-          <w.Component />
-        </div>
-      ))}
-      <Outlet />
-    </div>
+    </SingleColumnPage>
   )
 }