feat(dashboard): inventory details variants section (#7705)

packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-variants/variants-section.tsx

@@ -0,0 +1,61 @@
+import { Container, Heading, IconButton } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { ArrowUpRightOnBox } from "@medusajs/icons"
+import { useNavigate } from "react-router-dom"
+
+import { ProductVariantDTO } from "@medusajs/types"
+import { Thumbnail } from "../../../../../components/common/thumbnail"
+
+type InventoryItemVariantsSectionProps = {
+  variants: ProductVariantDTO[]
+}
+
+export const InventoryItemVariantsSection = ({
+  variants,
+}: InventoryItemVariantsSectionProps) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  if (!variants?.length) {
+    return null
+  }
+
+  return (
+    <Container className="p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("inventory.associatedVariants")}</Heading>
+      </div>
+
+      <div className="txt-small flex flex-col gap-2 px-2 pb-2">
+        {variants.map((variant) => (
+          <div
+            key={variant.id}
+            className="shadow-elevation-card-rest bg-ui-bg-component rounded-md px-4 py-2"
+          >
+            <div className="flex items-center gap-3">
+              <div className="shadow-elevation-card-rest rounded-md">
+                <Thumbnail src={variant.product?.thumbnail} />
+              </div>
+              <div className="flex flex-1 flex-col">
+                <span className="text-ui-fg-base font-medium">
+                  {variant.title}
+                </span>
+                <span className="text-ui-fg-subtle">
+                  {variant.options.map((o) => o.value).join(" ⋅ ")}
+                </span>
+              </div>
+              <IconButton
+                size="2xsmall"
+                variant="transparent"
+                type="button"
+                onClick={() => navigate(`/products/${variant.product.id}`)} // TODO: navigate to variant details when implemented
+              >
+                <ArrowUpRightOnBox className="text-ui-fg-muted" />
+              </IconButton>
+            </div>
+          </div>
+        ))}
+      </div>
+    </Container>
+  )
+}

packages/admin-next/dashboard/src/routes/inventory/inventory-detail/inventory-detail.tsx

@@ -6,6 +6,7 @@ import { InventoryItemLocationLevelsSection } from "./components/inventory-item-
 import { InventoryItemReservationsSection } from "./components/inventory-item-reservations"
 import { JsonViewSection } from "../../../components/common/json-view-section"
 import { useInventoryItem } from "../../../hooks/api/inventory"
+import { InventoryItemVariantsSection } from "./components/inventory-item-variants/variants-section"
 import { inventoryItemLoader } from "./loader"
 
 export const InventoryDetail = () => {
@@ -23,7 +24,7 @@ export const InventoryDetail = () => {
   } = useInventoryItem(
     id!,
     {
-      fields: "*variants",
+      fields: "*variants,*variants.product,*variants.options",
     },
     {
       initialData,
@@ -54,6 +55,7 @@ export const InventoryDetail = () => {
           <Outlet />
         </div>
         <div className="mt-2 flex w-full max-w-[100%] flex-col gap-y-2 lg:mt-0 lg:max-w-[400px]">
+          <InventoryItemVariantsSection variants={inventory_item.variants} />
           <InventoryItemAttributeSection inventoryItem={inventory_item} />
           <div className="lg:hidden">
             <JsonViewSection data={inventory_item} />

packages/admin-next/dashboard/src/routes/inventory/inventory-detail/loader.ts

@@ -9,7 +9,7 @@ const inventoryDetailQuery = (id: string) => ({
   queryKey: inventoryItemsQueryKeys.detail(id),
   queryFn: async () =>
     sdk.admin.inventoryItem.retrieve(id, {
-      fields: "*variant",
+      fields: "*variants,*variants.product,*variants.options",
     }),
 })
 

packages/modules/link-modules/src/definitions/product-variant-inventory-item.ts

@@ -62,13 +62,14 @@ export const ProductVariantInventoryItem: ModuleJoinerConfig = {
     {
       serviceName: Modules.INVENTORY,
       fieldAlias: {
-        variant: "variant_link.variant",
+        variants: "variant_link.variant",
       },
       relationship: {
         serviceName: LINKS.ProductVariantInventoryItem,
         primaryKey: "inventory_item_id",
         foreignKey: "id",
         alias: "variant_link",
+        isList: true,
       },
     },
   ],