From 5144d4021f4d223ac98c36485f9479f26ce4e735 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 11 Nov 2024 17:44:04 +0100
Subject: [PATCH 01/11] fix(dashboard): Load product variant properly

---
 .../dashboard/src/hooks/api/products.tsx      |  9 ++-
 .../product-edit-variant-form.tsx             |  5 +-
 .../product-variant-edit/loader.ts            | 19 +++--
 .../product-variant-edit.tsx                  | 47 ++++++------
 .../components/data-table-filter-bar.tsx      | 71 +++++++++++++++++++
 5 files changed, 111 insertions(+), 40 deletions(-)
 create mode 100644 packages/design-system/ui/src/blocks/data-table/components/data-table-filter-bar.tsx

diff --git a/packages/admin/dashboard/src/hooks/api/products.tsx b/packages/admin/dashboard/src/hooks/api/products.tsx
index 2ee357a93a4aa..61b4837cde76b 100644
--- a/packages/admin/dashboard/src/hooks/api/products.tsx
+++ b/packages/admin/dashboard/src/hooks/api/products.tsx
@@ -87,9 +87,14 @@ export const useDeleteProductOption = (
 export const useProductVariant = (
   productId: string,
   variantId: string,
-  query?: Record<string, any>,
+  query?: HttpTypes.AdminProductVariantParams,
   options?: Omit<
-    UseQueryOptions<any, FetchError, any, QueryKey>,
+    UseQueryOptions<
+      HttpTypes.AdminProductVariantResponse,
+      FetchError,
+      HttpTypes.AdminProductVariantResponse,
+      QueryKey
+    >,
     "queryFn" | "queryKey"
   >
 ) => {
diff --git a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/components/product-edit-variant-form/product-edit-variant-form.tsx b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/components/product-edit-variant-form/product-edit-variant-form.tsx
index 89faed6beea17..79f902e747b90 100644
--- a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/components/product-edit-variant-form/product-edit-variant-form.tsx
+++ b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/components/product-edit-variant-form/product-edit-variant-form.tsx
@@ -44,8 +44,8 @@ const ProductEditVariantSchema = z.object({
 
 // TODO: Either pass option ID or make the backend handle options constraints differently to handle the lack of IDs
 export const ProductEditVariantForm = ({
-  product,
   variant,
+  product,
 }: ProductEditVariantFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
@@ -63,7 +63,6 @@ export const ProductEditVariantForm = ({
       ean: variant.ean || "",
       upc: variant.upc || "",
       barcode: variant.barcode || "",
-      inventory_quantity: variant.inventory_quantity || "",
       manage_inventory: variant.manage_inventory || false,
       allow_backorder: variant.allow_backorder || false,
       weight: variant.weight || "",
@@ -79,7 +78,7 @@ export const ProductEditVariantForm = ({
   })
 
   const { mutateAsync, isPending } = useUpdateProductVariant(
-    product.id,
+    variant.product_id!,
     variant.id
   )
 
diff --git a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/loader.ts b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/loader.ts
index 55c48ca0b7be0..368806527b6cb 100644
--- a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/loader.ts
+++ b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/loader.ts
@@ -1,27 +1,24 @@
 import { LoaderFunctionArgs } from "react-router-dom"
 
-import { productsQueryKeys } from "../../../hooks/api/products"
+import { productVariantQueryKeys } from "../../../hooks/api"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
 
-const queryKey = (id: string) => {
-  return [productsQueryKeys.detail(id)]
+const queryFn = async (id: string, variantId: string) => {
+  return await sdk.admin.product.retrieveVariant(id, variantId)
 }
 
-const queryFn = async (id: string) => {
-  return await sdk.admin.product.retrieve(id)
-}
-
-const editProductVariantQuery = (id: string) => ({
-  queryKey: queryKey(id),
-  queryFn: async () => queryFn(id),
+const editProductVariantQuery = (id: string, variantId: string) => ({
+  queryKey: productVariantQueryKeys.detail(variantId),
+  queryFn: async () => queryFn(id, variantId),
 })
 
 export const editProductVariantLoader = async ({
   params,
 }: LoaderFunctionArgs) => {
   const id = params.id
-  const query = editProductVariantQuery(id!)
+  const variantId = params.variant_id
+  const query = editProductVariantQuery(id!, variantId!)
 
   return (
     queryClient.getQueryData<ReturnType<typeof queryFn>>(query.queryKey) ??
diff --git a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx
index bc3fb67724b49..61394ea49c3fb 100644
--- a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx
+++ b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx
@@ -1,14 +1,8 @@
-import { HttpTypes } from "@medusajs/types"
 import { Heading } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
-import {
-  json,
-  useLoaderData,
-  useParams,
-  useSearchParams,
-} from "react-router-dom"
+import { useLoaderData, useParams, useSearchParams } from "react-router-dom"
 import { RouteDrawer } from "../../../components/modals"
-import { useProduct } from "../../../hooks/api/products"
+import { useProduct, useProductVariant } from "../../../hooks/api/products"
 import { ProductEditVariantForm } from "./components/product-edit-variant-form"
 import { editProductVariantLoader } from "./loader"
 
@@ -22,41 +16,46 @@ export const ProductVariantEdit = () => {
   const [URLSearchParms] = useSearchParams()
   const searchVariantId = URLSearchParms.get("variant_id")
 
-  const { product, isPending, isFetching, isError, error } = useProduct(
+  const { variant, isPending, isError, error } = useProductVariant(
     id!,
+    variant_id || searchVariantId!,
     undefined,
     {
       initialData,
     }
   )
 
-  const variant = product?.variants.find(
-    (v: HttpTypes.AdminProductVariant) =>
-      v.id === (variant_id || searchVariantId)
+  const {
+    product,
+    isPending: isProductPending,
+    isError: isProductError,
+    error: productError,
+  } = useProduct(
+    variant?.product_id!,
+    {
+      fields: "-variants",
+    },
+    {
+      enabled: !!variant?.product_id,
+    }
   )
 
-  if (!isPending && !isFetching && !variant) {
-    throw json({
-      status: 404,
-      message: `Variant with ID ${variant_id || searchVariantId} was not found.`,
-    })
-  }
+  const ready = !isPending && !!variant && !isProductPending && !!product
 
   if (isError) {
     throw error
   }
 
+  if (isProductError) {
+    throw productError
+  }
+
   return (
     <RouteDrawer>
       <RouteDrawer.Header>
         <Heading>{t("products.variant.edit.header")}</Heading>
       </RouteDrawer.Header>
-      {variant && (
-        <ProductEditVariantForm
-          product={product}
-          variant={variant as unknown as HttpTypes.AdminProductVariant}
-        />
-      )}
+      {ready && <ProductEditVariantForm variant={variant} product={product} />}
     </RouteDrawer>
   )
 }
diff --git a/packages/design-system/ui/src/blocks/data-table/components/data-table-filter-bar.tsx b/packages/design-system/ui/src/blocks/data-table/components/data-table-filter-bar.tsx
new file mode 100644
index 0000000000000..b20f06afb45c1
--- /dev/null
+++ b/packages/design-system/ui/src/blocks/data-table/components/data-table-filter-bar.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/components/button"
+import { Skeleton } from "@/components/skeleton"
+import { useDataTableContext } from "../context/use-data-table-context"
+import { DataTableFilter } from "./data-table-filter"
+
+interface DataTableFilterBarProps {
+  clearAllFiltersLabel?: string
+}
+
+const DataTableFilterBar = ({
+  clearAllFiltersLabel = "Clear all",
+}: DataTableFilterBarProps) => {
+  const { instance } = useDataTableContext()
+
+  const filterState = instance.getFiltering()
+
+  const clearFilters = React.useCallback(() => {
+    instance.clearFilters()
+  }, [instance])
+
+  const filterCount = Object.keys(filterState).length
+
+  if (filterCount === 0) {
+    return null
+  }
+
+  if (instance.showSkeleton) {
+    return <DataTableFilterBarSkeleton filterCount={filterCount} />
+  }
+
+  return (
+    <div className="bg-ui-bg-subtle flex w-full flex-nowrap items-center gap-2 overflow-x-auto border-t px-6 py-2 md:flex-wrap">
+      {Object.values(filterState).map((filter) => (
+        <DataTableFilter key={filter.id} filter={filter} />
+      ))}
+      {filterCount > 0 ? (
+        <Button
+          variant="transparent"
+          size="small"
+          className="text-ui-fg-muted hover:text-ui-fg-subtle flex-shrink-0 whitespace-nowrap"
+          type="button"
+          onClick={clearFilters}
+        >
+          {clearAllFiltersLabel}
+        </Button>
+      ) : null}
+    </div>
+  )
+}
+
+const DataTableFilterBarSkeleton = ({
+  filterCount,
+}: {
+  filterCount: number
+}) => {
+  return (
+    <div className="bg-ui-bg-subtle flex w-full flex-nowrap items-center gap-2 overflow-x-auto border-t px-6 py-2 md:flex-wrap">
+      {Array.from({ length: filterCount }).map((_, index) => (
+        <Skeleton key={index} className="h-7 w-[180px]" />
+      ))}
+      {filterCount > 0 ? <Skeleton className="h-7 w-[66px]" /> : null}
+    </div>
+  )
+}
+
+export { DataTableFilterBar }
+export type { DataTableFilterBarProps }

From 188bc85396835d61ce609eb0553e9e977c2aca5b Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 11 Nov 2024 17:53:28 +0100
Subject: [PATCH 02/11] fix(dashboard): Load product variant properly and fix
 product detail query key

---
 packages/admin/dashboard/src/hooks/api/products.tsx       | 2 +-
 .../src/routes/products/product-prices/pricing-edit.tsx   | 8 ++++----
 .../src/routes/products/product-prices/product-prices.tsx | 4 +++-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/admin/dashboard/src/hooks/api/products.tsx b/packages/admin/dashboard/src/hooks/api/products.tsx
index 61b4837cde76b..6384ff0deb78b 100644
--- a/packages/admin/dashboard/src/hooks/api/products.tsx
+++ b/packages/admin/dashboard/src/hooks/api/products.tsx
@@ -243,7 +243,7 @@ export const useProduct = (
 ) => {
   const { data, ...rest } = useQuery({
     queryFn: () => sdk.admin.product.retrieve(id, query),
-    queryKey: productsQueryKeys.detail(id),
+    queryKey: productsQueryKeys.detail(id, query),
     ...options,
   })
 
diff --git a/packages/admin/dashboard/src/routes/products/product-prices/pricing-edit.tsx b/packages/admin/dashboard/src/routes/products/product-prices/pricing-edit.tsx
index b4f757f9abd34..dd269541fcb64 100644
--- a/packages/admin/dashboard/src/routes/products/product-prices/pricing-edit.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-prices/pricing-edit.tsx
@@ -51,12 +51,12 @@ export const PricingEdit = ({
   }, [regions])
 
   const variants = variantId
-    ? product.variants.filter((v) => v.id === variantId)
+    ? product.variants?.filter((v) => v.id === variantId)
     : product.variants
 
   const form = useForm<UpdateVariantPricesSchemaType>({
     defaultValues: {
-      variants: variants.map((variant: any) => ({
+      variants: variants?.map((variant: any) => ({
         title: variant.title,
         prices: variant.prices.reduce((acc: any, price: any) => {
           if (price.rules?.region_id) {
@@ -90,11 +90,11 @@ export const PricingEdit = ({
           let existingId = undefined
 
           if (regionId) {
-            existingId = variants[ind].prices.find(
+            existingId = variants?.[ind]?.prices?.find(
               (p) => p.rules["region_id"] === regionId
             )?.id
           } else {
-            existingId = variants[ind].prices.find(
+            existingId = variants?.[ind]?.prices?.find(
               (p) =>
                 p.currency_code === currencyCode &&
                 Object.keys(p.rules ?? {}).length === 0
diff --git a/packages/admin/dashboard/src/routes/products/product-prices/product-prices.tsx b/packages/admin/dashboard/src/routes/products/product-prices/product-prices.tsx
index 90ea3d888d3b9..85efaac29502f 100644
--- a/packages/admin/dashboard/src/routes/products/product-prices/product-prices.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-prices/product-prices.tsx
@@ -7,7 +7,9 @@ import { PricingEdit } from "./pricing-edit"
 export const ProductPrices = () => {
   const { id, variant_id } = useParams()
 
-  const { product, isLoading, isError, error } = useProduct(id!)
+  const { product, isLoading, isError, error } = useProduct(id!, {
+    fields: "+variants,+variants.prices",
+  })
 
   if (isError) {
     throw error

From e2b85db9b0979e056f80da43899e3ea853e5c878 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 11 Nov 2024 17:54:40 +0100
Subject: [PATCH 03/11] cleanup

---
 .../components/data-table-filter-bar.tsx      | 71 -------------------
 1 file changed, 71 deletions(-)
 delete mode 100644 packages/design-system/ui/src/blocks/data-table/components/data-table-filter-bar.tsx

diff --git a/packages/design-system/ui/src/blocks/data-table/components/data-table-filter-bar.tsx b/packages/design-system/ui/src/blocks/data-table/components/data-table-filter-bar.tsx
deleted file mode 100644
index b20f06afb45c1..0000000000000
--- a/packages/design-system/ui/src/blocks/data-table/components/data-table-filter-bar.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { Button } from "@/components/button"
-import { Skeleton } from "@/components/skeleton"
-import { useDataTableContext } from "../context/use-data-table-context"
-import { DataTableFilter } from "./data-table-filter"
-
-interface DataTableFilterBarProps {
-  clearAllFiltersLabel?: string
-}
-
-const DataTableFilterBar = ({
-  clearAllFiltersLabel = "Clear all",
-}: DataTableFilterBarProps) => {
-  const { instance } = useDataTableContext()
-
-  const filterState = instance.getFiltering()
-
-  const clearFilters = React.useCallback(() => {
-    instance.clearFilters()
-  }, [instance])
-
-  const filterCount = Object.keys(filterState).length
-
-  if (filterCount === 0) {
-    return null
-  }
-
-  if (instance.showSkeleton) {
-    return <DataTableFilterBarSkeleton filterCount={filterCount} />
-  }
-
-  return (
-    <div className="bg-ui-bg-subtle flex w-full flex-nowrap items-center gap-2 overflow-x-auto border-t px-6 py-2 md:flex-wrap">
-      {Object.values(filterState).map((filter) => (
-        <DataTableFilter key={filter.id} filter={filter} />
-      ))}
-      {filterCount > 0 ? (
-        <Button
-          variant="transparent"
-          size="small"
-          className="text-ui-fg-muted hover:text-ui-fg-subtle flex-shrink-0 whitespace-nowrap"
-          type="button"
-          onClick={clearFilters}
-        >
-          {clearAllFiltersLabel}
-        </Button>
-      ) : null}
-    </div>
-  )
-}
-
-const DataTableFilterBarSkeleton = ({
-  filterCount,
-}: {
-  filterCount: number
-}) => {
-  return (
-    <div className="bg-ui-bg-subtle flex w-full flex-nowrap items-center gap-2 overflow-x-auto border-t px-6 py-2 md:flex-wrap">
-      {Array.from({ length: filterCount }).map((_, index) => (
-        <Skeleton key={index} className="h-7 w-[180px]" />
-      ))}
-      {filterCount > 0 ? <Skeleton className="h-7 w-[66px]" /> : null}
-    </div>
-  )
-}
-
-export { DataTableFilterBar }
-export type { DataTableFilterBarProps }

From 7cd7ee6a6fa8a6b10c177c90bdd2e206f427e4fb Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 11 Nov 2024 18:01:31 +0100
Subject: [PATCH 04/11] add changeset

---
 .changeset/modern-walls-appear.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/modern-walls-appear.md

diff --git a/.changeset/modern-walls-appear.md b/.changeset/modern-walls-appear.md
new file mode 100644
index 0000000000000..62869d2b7652b
--- /dev/null
+++ b/.changeset/modern-walls-appear.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+fix(dashboard): Fix query key for product details and load product variant data correctly

From 8c934780f0ddc97237598e7861477c57c497da73 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 11 Nov 2024 19:31:55 +0100
Subject: [PATCH 05/11] fix loader

---
 .../product-variants/product-variant-edit/loader.ts   | 11 +++++++++--
 .../product-variant-edit/product-variant-edit.tsx     |  9 +++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/loader.ts b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/loader.ts
index 368806527b6cb..85818ae4908da 100644
--- a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/loader.ts
+++ b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/loader.ts
@@ -15,10 +15,17 @@ const editProductVariantQuery = (id: string, variantId: string) => ({
 
 export const editProductVariantLoader = async ({
   params,
+  request,
 }: LoaderFunctionArgs) => {
   const id = params.id
-  const variantId = params.variant_id
-  const query = editProductVariantQuery(id!, variantId!)
+
+  // get search params
+  const searchParams = new URL(request.url).searchParams
+  const searchVariantId = searchParams.get("variant_id")
+
+  const variantId = params.variant_id || searchVariantId
+
+  const query = editProductVariantQuery(id!, variantId || searchVariantId!)
 
   return (
     queryClient.getQueryData<ReturnType<typeof queryFn>>(query.queryKey) ??
diff --git a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx
index 61394ea49c3fb..2b382325c317b 100644
--- a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx
+++ b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx
@@ -42,6 +42,15 @@ export const ProductVariantEdit = () => {
 
   const ready = !isPending && !!variant && !isProductPending && !!product
 
+  console.log(
+    variant_id,
+    searchVariantId,
+    variant,
+    variant?.product_id,
+    isPending,
+    isProductPending
+  )
+
   if (isError) {
     throw error
   }

From 6fbd72cc08f1ea3912edb4968084cc8cbf221629 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 11 Nov 2024 19:32:14 +0100
Subject: [PATCH 06/11] cleanup

---
 .../src/routes/product-variants/product-variant-edit/loader.ts   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/loader.ts b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/loader.ts
index 85818ae4908da..c42c76428cc52 100644
--- a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/loader.ts
+++ b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/loader.ts
@@ -19,7 +19,6 @@ export const editProductVariantLoader = async ({
 }: LoaderFunctionArgs) => {
   const id = params.id
 
-  // get search params
   const searchParams = new URL(request.url).searchParams
   const searchVariantId = searchParams.get("variant_id")
 

From ea47b67b1bc8b1fb7d7597f71b4792c6305436be Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 11 Nov 2024 19:47:39 +0100
Subject: [PATCH 07/11] fix query key on variants hook

---
 packages/admin/dashboard/src/hooks/api/products.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/admin/dashboard/src/hooks/api/products.tsx b/packages/admin/dashboard/src/hooks/api/products.tsx
index 6384ff0deb78b..72e2508125a5f 100644
--- a/packages/admin/dashboard/src/hooks/api/products.tsx
+++ b/packages/admin/dashboard/src/hooks/api/products.tsx
@@ -101,7 +101,7 @@ export const useProductVariant = (
   const { data, ...rest } = useQuery({
     queryFn: () =>
       sdk.admin.product.retrieveVariant(productId, variantId, query),
-    queryKey: variantsQueryKeys.detail(variantId),
+    queryKey: variantsQueryKeys.detail(variantId, query),
     ...options,
   })
 

From c49a75efb1cdd1d6ec210df2c375c623088722cf Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 11 Nov 2024 19:53:07 +0100
Subject: [PATCH 08/11] rm console.log

---
 packages/admin/dashboard/src/lib/query-key-factory.ts    | 8 ++++----
 .../product-variants/product-variant-detail/loader.ts    | 6 ++++--
 .../product-variant-detail/product-variant-detail.tsx    | 6 +++---
 .../product-variant-edit/product-variant-edit.tsx        | 9 ---------
 4 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/packages/admin/dashboard/src/lib/query-key-factory.ts b/packages/admin/dashboard/src/lib/query-key-factory.ts
index cf477d387a74a..62bc16e7857ac 100644
--- a/packages/admin/dashboard/src/lib/query-key-factory.ts
+++ b/packages/admin/dashboard/src/lib/query-key-factory.ts
@@ -7,7 +7,7 @@ export type TQueryKey<TKey, TListQuery = any, TDetailQuery = string> = {
     query?: TListQuery
   ) => readonly [
     ...ReturnType<TQueryKey<TKey>["lists"]>,
-    { query: TListQuery | undefined },
+    { query: TListQuery | undefined }
   ]
   details: () => readonly [...TQueryKey<TKey>["all"], "detail"]
   detail: (
@@ -16,7 +16,7 @@ export type TQueryKey<TKey, TListQuery = any, TDetailQuery = string> = {
   ) => readonly [
     ...ReturnType<TQueryKey<TKey>["details"]>,
     TDetailQuery,
-    { query: TListQuery | undefined },
+    { query: TListQuery | undefined }
   ]
 }
 
@@ -26,7 +26,7 @@ export type UseQueryOptionsWrapper<
   // Type thrown in case the queryFn rejects
   E = Error,
   // Query key type
-  TQueryKey extends QueryKey = QueryKey,
+  TQueryKey extends QueryKey = QueryKey
 > = Omit<
   UseQueryOptions<TQueryFn, E, TQueryFn, TQueryKey>,
   "queryKey" | "queryFn"
@@ -35,7 +35,7 @@ export type UseQueryOptionsWrapper<
 export const queryKeysFactory = <
   T,
   TListQueryType = any,
-  TDetailQueryType = string,
+  TDetailQueryType = string
 >(
   globalKey: T
 ) => {
diff --git a/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/loader.ts b/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/loader.ts
index fe6c609466602..0a9167c330e17 100644
--- a/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/loader.ts
+++ b/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/loader.ts
@@ -1,12 +1,14 @@
 import { LoaderFunctionArgs } from "react-router-dom"
 
 import { variantsQueryKeys } from "../../../hooks/api/products"
+import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
 import { VARIANT_DETAIL_FIELDS } from "./constants"
-import { sdk } from "../../../lib/client"
 
 const variantDetailQuery = (productId: string, variantId: string) => ({
-  queryKey: variantsQueryKeys.detail(variantId),
+  queryKey: variantsQueryKeys.detail(variantId, {
+    fields: VARIANT_DETAIL_FIELDS,
+  }),
   queryFn: async () =>
     sdk.admin.product.retrieveVariant(productId, variantId, {
       fields: VARIANT_DETAIL_FIELDS,
diff --git a/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx b/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx
index a1b5cb556986a..1a1027c2101c8 100644
--- a/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx
+++ b/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx
@@ -3,14 +3,14 @@ import { Outlet, useLoaderData, useParams } from "react-router-dom"
 import { JsonViewSection } from "../../../components/common/json-view-section"
 import { useProductVariant } from "../../../hooks/api/products"
 
-import { variantLoader } from "./loader"
-import { VARIANT_DETAIL_FIELDS } from "./constants"
 import { VariantGeneralSection } from "./components/variant-general-section"
 import {
   InventorySectionPlaceholder,
   VariantInventorySection,
 } from "./components/variant-inventory-section"
 import { VariantPricesSection } from "./components/variant-prices-section"
+import { VARIANT_DETAIL_FIELDS } from "./constants"
+import { variantLoader } from "./loader"
 
 export const ProductVariantDetail = () => {
   const initialData = useLoaderData() as Awaited<
@@ -20,7 +20,7 @@ export const ProductVariantDetail = () => {
   const { id, variant_id } = useParams()
   const { variant, isLoading, isError, error } = useProductVariant(
     id!,
-    variant_id,
+    variant_id!,
     { fields: VARIANT_DETAIL_FIELDS },
     {
       initialData: initialData,
diff --git a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx
index 2b382325c317b..61394ea49c3fb 100644
--- a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx
+++ b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx
@@ -42,15 +42,6 @@ export const ProductVariantEdit = () => {
 
   const ready = !isPending && !!variant && !isProductPending && !!product
 
-  console.log(
-    variant_id,
-    searchVariantId,
-    variant,
-    variant?.product_id,
-    isPending,
-    isProductPending
-  )
-
   if (isError) {
     throw error
   }

From 8048cfd4181f07d83d4cc9eb9ebd84454e233192 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 11 Nov 2024 19:59:45 +0100
Subject: [PATCH 09/11] cleanup

---
 .../variant-general-section.tsx               | 12 +--
 .../variant-prices-section.tsx                | 16 ++--
 .../product-variant-detail.tsx                | 82 ++++++++++---------
 3 files changed, 59 insertions(+), 51 deletions(-)

diff --git a/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/components/variant-general-section/variant-general-section.tsx b/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/components/variant-general-section/variant-general-section.tsx
index 297ef0df6cbe5..b2000ddce5bf7 100644
--- a/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/components/variant-general-section/variant-general-section.tsx
+++ b/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/components/variant-general-section/variant-general-section.tsx
@@ -1,6 +1,6 @@
-import { ProductVariantDTO } from "@medusajs/types"
-import { Badge, Container, Heading, usePrompt } from "@medusajs/ui"
 import { Component, PencilSquare, Trash } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
+import { Badge, Container, Heading, usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 
@@ -9,7 +9,7 @@ import { SectionRow } from "../../../../../components/common/section"
 import { useDeleteVariant } from "../../../../../hooks/api/products"
 
 type VariantGeneralSectionProps = {
-  variant: ProductVariantDTO
+  variant: HttpTypes.AdminProductVariant
 }
 
 export function VariantGeneralSection({ variant }: VariantGeneralSectionProps) {
@@ -19,7 +19,7 @@ export function VariantGeneralSection({ variant }: VariantGeneralSectionProps) {
 
   const hasInventoryKit = variant.inventory?.length > 1
 
-  const { mutateAsync } = useDeleteVariant(variant.product_id, variant.id)
+  const { mutateAsync } = useDeleteVariant(variant.product_id!, variant.id)
 
   const handleDelete = async () => {
     const res = await prompt({
@@ -85,10 +85,10 @@ export function VariantGeneralSection({ variant }: VariantGeneralSectionProps) {
       </div>
 
       <SectionRow title={t("fields.sku")} value={variant.sku} />
-      {variant.options.map((o) => (
+      {variant.options?.map((o) => (
         <SectionRow
           key={o.id}
-          title={o.option?.title}
+          title={o.option?.title!}
           value={<Badge size="2xsmall">{o.value}</Badge>}
         />
       ))}
diff --git a/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/components/variant-prices-section/variant-prices-section.tsx b/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/components/variant-prices-section/variant-prices-section.tsx
index 5615365f645f6..1c2c85af1b74a 100644
--- a/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/components/variant-prices-section/variant-prices-section.tsx
+++ b/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/components/variant-prices-section/variant-prices-section.tsx
@@ -1,27 +1,27 @@
-import { useTranslation } from "react-i18next"
 import { useState } from "react"
+import { useTranslation } from "react-i18next"
 
 import { CurrencyDollar } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
 import { Button, Container, Heading } from "@medusajs/ui"
-import { MoneyAmountDTO, ProductVariantDTO } from "@medusajs/types"
 
 import { ActionMenu } from "../../../../../components/common/action-menu"
-import { getLocaleAmount } from "../../../../../lib/money-amount-helpers"
 import { NoRecords } from "../../../../../components/common/empty-table-content"
+import { getLocaleAmount } from "../../../../../lib/money-amount-helpers"
 
 type VariantPricesSectionProps = {
-  variant: ProductVariantDTO & { prices: MoneyAmountDTO[] }
+  variant: HttpTypes.AdminProductVariant
 }
 
 export function VariantPricesSection({ variant }: VariantPricesSectionProps) {
   const { t } = useTranslation()
   const prices = variant.prices
-    .filter((p) => !Object.keys(p.rules || {}).length) // display just currency prices
+    ?.filter((p) => !Object.keys(p.rules || {}).length)
     .sort((p1, p2) => p1.currency_code?.localeCompare(p2.currency_code))
 
-  const hasPrices = !!prices.length
+  const hasPrices = !!prices?.length
   const [pageSize, setPageSize] = useState(3)
-  const displayPrices = prices.slice(0, pageSize)
+  const displayPrices = prices?.slice(0, pageSize)
 
   const onShowMore = () => {
     setPageSize(pageSize + 3)
@@ -46,7 +46,7 @@ export function VariantPricesSection({ variant }: VariantPricesSectionProps) {
         />
       </div>
       {!hasPrices && <NoRecords className="h-60" />}
-      {displayPrices.map((price) => {
+      {displayPrices?.map((price) => {
         return (
           <div
             key={price.id}
diff --git a/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx b/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx
index 1a1027c2101c8..95fcb802b209e 100644
--- a/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx
+++ b/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx
@@ -1,8 +1,9 @@
-import { Outlet, useLoaderData, useParams } from "react-router-dom"
+import { useLoaderData, useParams } from "react-router-dom"
 
-import { JsonViewSection } from "../../../components/common/json-view-section"
 import { useProductVariant } from "../../../hooks/api/products"
 
+import { TwoColumnPageSkeleton } from "../../../components/common/skeleton"
+import { TwoColumnPage } from "../../../components/layout/pages"
 import { VariantGeneralSection } from "./components/variant-general-section"
 import {
   InventorySectionPlaceholder,
@@ -23,12 +24,19 @@ export const ProductVariantDetail = () => {
     variant_id!,
     { fields: VARIANT_DETAIL_FIELDS },
     {
-      initialData: initialData,
+      initialData,
     }
   )
 
   if (isLoading || !variant) {
-    return <div>Loading...</div>
+    return (
+      <TwoColumnPageSkeleton
+        mainSections={2}
+        sidebarSections={1}
+        showJSON
+        showMetadata
+      />
+    )
   }
 
   if (isError) {
@@ -36,38 +44,38 @@ export const ProductVariantDetail = () => {
   }
 
   return (
-    <div className="flex flex-col gap-y-2">
-      <div className="flex flex-col gap-x-4 gap-y-3 xl:flex-row xl:items-start">
-        <div className="flex w-full flex-col gap-y-3">
-          <VariantGeneralSection variant={variant} />
-          {!variant.manage_inventory ? (
-            <InventorySectionPlaceholder />
-          ) : (
-            <VariantInventorySection
-              inventoryItems={variant.inventory_items.map((i) => {
-                return {
-                  ...i.inventory,
-                  required_quantity: i.required_quantity,
-                  variant,
-                }
-              })}
-            />
-          )}
-
-          <div className="hidden xl:block">
-            <JsonViewSection data={variant} root="product" />
-          </div>
-        </div>
-
-        <div className="flex w-full max-w-[100%] flex-col gap-y-3 xl:mt-0 xl:max-w-[400px]">
-          <VariantPricesSection variant={variant} />
-
-          <div className="xl:hidden">
-            <JsonViewSection data={variant} />
-          </div>
-        </div>
-      </div>
-      <Outlet />
-    </div>
+    <TwoColumnPage
+      data={variant}
+      hasOutlet
+      showJSON
+      showMetadata
+      // TODO: Add widgets zones for variant detail page
+      widgets={{
+        after: [],
+        before: [],
+        sideAfter: [],
+        sideBefore: [],
+      }}
+    >
+      <TwoColumnPage.Main>
+        <VariantGeneralSection variant={variant} />
+        {!variant.manage_inventory ? (
+          <InventorySectionPlaceholder />
+        ) : (
+          <VariantInventorySection
+            inventoryItems={variant.inventory_items.map((i) => {
+              return {
+                ...i.inventory,
+                required_quantity: i.required_quantity,
+                variant,
+              }
+            })}
+          />
+        )}
+      </TwoColumnPage.Main>
+      <TwoColumnPage.Sidebar>
+        <VariantPricesSection variant={variant} />
+      </TwoColumnPage.Sidebar>
+    </TwoColumnPage>
   )
 }

From 34e9fba62d94d46e767a89fc6e490e4378ddb0c5 Mon Sep 17 00:00:00 2001
From: fPolic <mainacc.polic@gmail.com>
Date: Mon, 11 Nov 2024 21:29:01 +0100
Subject: [PATCH 10/11] fix: temp fix for query keys

---
 packages/admin/dashboard/src/lib/query-key-factory.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/admin/dashboard/src/lib/query-key-factory.ts b/packages/admin/dashboard/src/lib/query-key-factory.ts
index 62bc16e7857ac..c9c4c7fce7830 100644
--- a/packages/admin/dashboard/src/lib/query-key-factory.ts
+++ b/packages/admin/dashboard/src/lib/query-key-factory.ts
@@ -44,11 +44,10 @@ export const queryKeysFactory = <
     lists: () => [...queryKeyFactory.all, "list"],
     list: (query?: TListQueryType) => [...queryKeyFactory.lists(), { query }],
     details: () => [...queryKeyFactory.all, "detail"],
-    detail: (id: TDetailQueryType, query?: TListQueryType) => [
-      ...queryKeyFactory.details(),
-      id,
-      { query },
-    ],
+    detail: (id: TDetailQueryType, query?: TListQueryType) =>
+      [...queryKeyFactory.details(), id, query ? { query } : undefined].filter(
+        (k) => !!k
+      ),
   }
   return queryKeyFactory
 }

From ef4a884b81767b599844e4a020afb83173de71f5 Mon Sep 17 00:00:00 2001
From: fPolic <mainacc.polic@gmail.com>
Date: Tue, 12 Nov 2024 08:45:17 +0100
Subject: [PATCH 11/11] fix: for list as well, update types

---
 .../admin/dashboard/src/lib/query-key-factory.ts     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/admin/dashboard/src/lib/query-key-factory.ts b/packages/admin/dashboard/src/lib/query-key-factory.ts
index c9c4c7fce7830..8510217ea2b14 100644
--- a/packages/admin/dashboard/src/lib/query-key-factory.ts
+++ b/packages/admin/dashboard/src/lib/query-key-factory.ts
@@ -5,10 +5,7 @@ export type TQueryKey<TKey, TListQuery = any, TDetailQuery = string> = {
   lists: () => readonly [...TQueryKey<TKey>["all"], "list"]
   list: (
     query?: TListQuery
-  ) => readonly [
-    ...ReturnType<TQueryKey<TKey>["lists"]>,
-    { query: TListQuery | undefined }
-  ]
+  ) => readonly [...ReturnType<TQueryKey<TKey>["lists"]>, { query: TListQuery }]
   details: () => readonly [...TQueryKey<TKey>["all"], "detail"]
   detail: (
     id: TDetailQuery,
@@ -16,7 +13,7 @@ export type TQueryKey<TKey, TListQuery = any, TDetailQuery = string> = {
   ) => readonly [
     ...ReturnType<TQueryKey<TKey>["details"]>,
     TDetailQuery,
-    { query: TListQuery | undefined }
+    { query: TListQuery }
   ]
 }
 
@@ -42,7 +39,10 @@ export const queryKeysFactory = <
   const queryKeyFactory: TQueryKey<T, TListQueryType, TDetailQueryType> = {
     all: [globalKey],
     lists: () => [...queryKeyFactory.all, "list"],
-    list: (query?: TListQueryType) => [...queryKeyFactory.lists(), { query }],
+    list: (query?: TListQueryType) =>
+      [...queryKeyFactory.lists(), query ? { query } : undefined].filter(
+        (k) => !!k
+      ),
     details: () => [...queryKeyFactory.all, "detail"],
     detail: (id: TDetailQueryType, query?: TListQueryType) =>
       [...queryKeyFactory.details(), id, query ? { query } : undefined].filter(