fix(dashboard): Add Breadcrumb components

medusajs · Nov 13, 2024 · c3b1e21 · c3b1e21
1 parent 89e26ac
commit c3b1e21
Show file tree

Hide file tree

Showing 83 changed files with 1,137 additions and 319 deletions.
diff --git a/packages/admin/dashboard/package.json b/packages/admin/dashboard/package.json
@@ -51,6 +51,7 @@
     "@medusajs/ui": "4.0.1",
     "@radix-ui/react-collapsible": "1.1.0",
     "@tanstack/react-query": "^5.28.14",
+    "@tanstack/react-query-devtools": "^5.59.20",
     "@tanstack/react-table": "8.20.5",
     "@tanstack/react-virtual": "^3.8.3",
     "@uiw/react-json-view": "^2.0.0-alpha.17",

diff --git a/packages/admin/dashboard/src/components/layout/shell/shell.tsx b/packages/admin/dashboard/src/components/layout/shell/shell.tsx
@@ -2,7 +2,7 @@ import * as Dialog from "@radix-ui/react-dialog"
 
 import { SidebarLeft, TriangleRightMini, XMark } from "@medusajs/icons"
 import { IconButton, clx } from "@medusajs/ui"
-import { PropsWithChildren } from "react"
+import { PropsWithChildren, ReactNode } from "react"
 import { useTranslation } from "react-i18next"
 import { Link, Outlet, UIMatch, useMatches } from "react-router-dom"
 
@@ -45,18 +45,20 @@ const Gutter = ({ children }: PropsWithChildren) => {
 const Breadcrumbs = () => {
   const matches = useMatches() as unknown as UIMatch<
     unknown,
-    { crumb?: (data?: unknown) => string }
+    {
+      breadcrumb?: (match?: UIMatch) => string | ReactNode
+    }
   >[]
 
   const crumbs = matches
-    .filter((match) => Boolean(match.handle?.crumb))
+    .filter((match) => match.handle?.breadcrumb)
     .map((match) => {
       const handle = match.handle
 
-      let label: string | null = null
+      let label: string | ReactNode | undefined = undefined
 
       try {
-        label = handle.crumb!(match.data)
+        label = handle.breadcrumb?.(match)
       } catch (error) {
         // noop
       }
@@ -70,7 +72,7 @@ const Breadcrumbs = () => {
         path: match.pathname,
       }
     })
-    .filter(Boolean) as { label: string; path: string }[]
+    .filter(Boolean) as { label: string | ReactNode; path: string }[]
 
   return (
     <ol

diff --git a/packages/admin/dashboard/src/hooks/api/products.tsx b/packages/admin/dashboard/src/hooks/api/products.tsx
@@ -237,7 +237,12 @@ export const useProduct = (
   id: string,
   query?: Record<string, any>,
   options?: Omit<
-    UseQueryOptions<any, FetchError, any, QueryKey>,
+    UseQueryOptions<
+      HttpTypes.AdminProductResponse,
+      FetchError,
+      HttpTypes.AdminProductResponse,
+      QueryKey
+    >,
     "queryFn" | "queryKey"
   >
 ) => {
@@ -302,9 +307,13 @@ export const useUpdateProduct = (
 ) => {
   return useMutation({
     mutationFn: (payload) => sdk.admin.product.update(id, payload),
-    onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({ queryKey: productsQueryKeys.lists() })
-      queryClient.invalidateQueries({ queryKey: productsQueryKeys.detail(id) })
+    onSuccess: async (data, variables, context) => {
+      await queryClient.invalidateQueries({
+        queryKey: productsQueryKeys.lists(),
+      })
+      await queryClient.invalidateQueries({
+        queryKey: productsQueryKeys.detail(id),
+      })
 
       options?.onSuccess?.(data, variables, context)
     },

diff --git a/packages/admin/dashboard/src/hooks/api/shipping-profiles.tsx b/packages/admin/dashboard/src/hooks/api/shipping-profiles.tsx
@@ -40,11 +40,14 @@ export const useCreateShippingProfile = (
 export const useShippingProfile = (
   id: string,
   query?: Record<string, any>,
-  options?: UseQueryOptions<
-    HttpTypes.AdminShippingProfileResponse,
-    FetchError,
-    HttpTypes.AdminShippingProfileResponse,
-    QueryKey
+  options?: Omit<
+    UseQueryOptions<
+      HttpTypes.AdminShippingProfileResponse,
+      FetchError,
+      HttpTypes.AdminShippingProfileResponse,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
   >
 ) => {
   const { data, ...rest } = useQuery({

diff --git a/packages/admin/dashboard/src/providers/providers.tsx b/packages/admin/dashboard/src/providers/providers.tsx
@@ -1,8 +1,8 @@
 import { Toaster, TooltipProvider } from "@medusajs/ui"
 import { QueryClientProvider } from "@tanstack/react-query"
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 import type { PropsWithChildren } from "react"
 import { HelmetProvider } from "react-helmet-async"
-
 import { I18n } from "../components/utilities/i18n"
 import {
   DashboardExtensionManager,
@@ -27,6 +27,7 @@ export const Providers = ({ api, children }: ProvidersProps) => {
               <I18nProvider>{children}</I18nProvider>
               <Toaster />
             </ThemeProvider>
+            <ReactQueryDevtools initialIsOpen={false} position="bottom" />
           </QueryClientProvider>
         </HelmetProvider>
       </DashboardExtensionProvider>