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

packages/admin/dashboard/src/routes/api-key-management/api-key-management-detail/api-key-management-detail.tsx

@@ -1,39 +1,28 @@
-import { Outlet, useLoaderData, useParams } from "react-router-dom"
+import { useLoaderData, useParams } from "react-router-dom"
 
-import { JsonViewSection } from "../../../components/common/json-view-section"
-import {
-  GeneralSectionSkeleton,
-  JsonViewSectionSkeleton,
-  TableSectionSkeleton,
-} from "../../../components/common/skeleton"
+import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
+import { SingleColumnPage } from "../../../components/layout/pages"
+import { useDashboardExtension } from "../../../extensions"
 import { useApiKey } from "../../../hooks/api/api-keys"
 import { ApiKeyType } from "../common/constants"
 import { ApiKeyGeneralSection } from "./components/api-key-general-section"
 import { ApiKeySalesChannelSection } from "./components/api-key-sales-channel-section"
 import { apiKeyLoader } from "./loader"
 
-import after from "virtual:medusa/widgets/api_key/details/after"
-import before from "virtual:medusa/widgets/api_key/details/before"
-
 export const ApiKeyManagementDetail = () => {
   const initialData = useLoaderData() as Awaited<
     ReturnType<typeof apiKeyLoader>
   >
 
   const { id } = useParams()
+  const { getWidgets } = useDashboardExtension()
 
-  const { api_key, isLoading, isError, error } = useApiKey(id!, undefined, {
+  const { api_key, isLoading, isError, error } = useApiKey(id!, {
     initialData: initialData,
   })
 
   if (isLoading || !api_key) {
-    return (
-      <div className="flex flex-col gap-y-2">
-        <GeneralSectionSkeleton rowCount={4} />
-        <TableSectionSkeleton />
-        <JsonViewSectionSkeleton />
-      </div>
-    )
+    return <SingleColumnPageSkeleton showJSON sections={1} />
   }
 
   const isPublishable = api_key?.type === ApiKeyType.PUBLISHABLE
@@ -43,25 +32,17 @@ export const ApiKeyManagementDetail = () => {
   }
 
   return (
-    <div className="flex flex-col gap-y-2">
-      {before.widgets.map((w, i) => {
-        return (
-          <div key={i}>
-            <w.Component apiKey={api_key} />
-          </div>
-        )
-      })}
+    <SingleColumnPage
+      hasOutlet
+      showJSON
+      widgets={{
+        before: getWidgets("api_key.details.before"),
+        after: getWidgets("api_key.details.after"),
+      }}
+      data={api_key}
+    >
       <ApiKeyGeneralSection apiKey={api_key} />
       {isPublishable && <ApiKeySalesChannelSection apiKey={api_key} />}
-      {after.widgets.map((w, i) => {
-        return (
-          <div key={i}>
-            <w.Component apiKey={api_key} />
-          </div>
-        )
-      })}
-      <JsonViewSection data={api_key} />
-      <Outlet />
-    </div>
+    </SingleColumnPage>
   )
 }

packages/admin/dashboard/src/routes/api-key-management/api-key-management-detail/loader.ts

@@ -1,6 +1,6 @@
 import { LoaderFunctionArgs } from "react-router-dom"
 
-import { AdminApiKeyResponse } from "@medusajs/types"
+import { HttpTypes } from "@medusajs/types"
 import { apiKeysQueryKeys } from "../../../hooks/api/api-keys"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
@@ -15,7 +15,7 @@ export const apiKeyLoader = async ({ params }: LoaderFunctionArgs) => {
   const query = apiKeyDetailQuery(id!)
 
   return (
-    queryClient.getQueryData<AdminApiKeyResponse>(query.queryKey) ??
+    queryClient.getQueryData<HttpTypes.AdminApiKeyResponse>(query.queryKey) ??
     (await queryClient.fetchQuery(query))
   )
 }

packages/admin/dashboard/src/routes/api-key-management/api-key-management-list/api-key-management-list.tsx

@@ -1,33 +1,25 @@
-import { Outlet, useLocation } from "react-router-dom"
+import { useLocation } from "react-router-dom"
 import { getApiKeyTypeFromPathname } from "../common/utils"
 import { ApiKeyManagementListTable } from "./components/api-key-management-list-table"
 
-import after from "virtual:medusa/widgets/api_key/list/after"
-import before from "virtual:medusa/widgets/api_key/list/before"
+import { SingleColumnPage } from "../../../components/layout/pages"
+import { useDashboardExtension } from "../../../extensions"
 
 export const ApiKeyManagementList = () => {
   const { pathname } = useLocation()
+  const { getWidgets } = useDashboardExtension()
 
   const keyType = getApiKeyTypeFromPathname(pathname)
 
   return (
-    <div className="flex flex-col gap-y-2">
-      {before.widgets.map((w, i) => {
-        return (
-          <div key={i}>
-            <w.Component />
-          </div>
-        )
-      })}
+    <SingleColumnPage
+      hasOutlet
+      widgets={{
+        before: getWidgets("api_key.list.before"),
+        after: getWidgets("api_key.list.after"),
+      }}
+    >
       <ApiKeyManagementListTable keyType={keyType} />
-      {after.widgets.map((w, i) => {
-        return (
-          <div key={i}>
-            <w.Component />
-          </div>
-        )
-      })}
-      <Outlet />
-    </div>
+    </SingleColumnPage>
   )
 }