fix(medusa, admin-ui): Fix edit order variant stock (#3512)

The stock column when adding variants in an order edit would just look at `inventory_quantity`, location-unaware. Updated this to now attempt to request location-aware stock information and updated the column to use this information and show total stock across how many locations, and a tooltip showing per-location stock.

![image](https://user-images.githubusercontent.com/948623/225901225-177a2ce4-7344-49d0-84d5-3f3b0ce9f62e.png)

Resolves CORE-1250

Co-authored-by: Philip Korsholm <88927411+pKorsholm@users.noreply.github.com>

.changeset/fair-hats-hammer.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(medusa, admin-ui): Fix edit order variant stock

packages/admin-ui/package.json

@@ -50,6 +50,7 @@
     "emoji-picker-react": "^4.4.3",
     "framer-motion": "^9.1.6",
     "medusa-react": "*",
+    "pluralize": "^8.0.0",
     "postcss": "^8.4.21",
     "query-string": "^8.1.0",
     "react": "^18.2.0",
@@ -81,6 +82,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/pluralize": "^0.0.29",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@types/react-table": "^7.7.9",

packages/admin-ui/ui/src/domain/orders/edit/variants-table.tsx

@@ -1,15 +1,18 @@
-import { useAdminVariants } from "medusa-react"
+import { useAdminVariants, useAdminVariantsInventory } from "medusa-react"
 import React, { useEffect, useMemo, useState } from "react"
 import { usePagination, useRowSelect, useTable } from "react-table"
-import { ProductVariant } from "@medusajs/medusa"
+import { InventoryLevelDTO, ProductVariant } from "@medusajs/medusa"
 import clsx from "clsx"
-
+import pluralize from "pluralize"
 import { useDebounce } from "../../../hooks/use-debounce"
 import ImagePlaceholder from "../../../components/fundamentals/image-placeholder"
 import Table from "../../../components/molecules/table"
 import IndeterminateCheckbox from "../../../components/molecules/indeterminate-checkbox"
 import { formatAmountWithSymbol } from "../../../utils/prices"
 import TableContainer from "../../../components/organisms/table-container"
+import Tooltip from "../../../components/atoms/tooltip"
+import useStockLocations from "../../../hooks/use-stock-locations"
+import Skeleton from "../../../components/atoms/skeleton"
 
 const PAGE_SIZE = 12
 
@@ -46,6 +49,59 @@ const VariantsTable: React.FC<Props> = (props) => {
     }
   }, [count])
 
+  const VariantInventoryCell = ({ row: { original } }) => {
+    const { getLocationNameById } = useStockLocations()
+
+    const { variant, isLoading } = useAdminVariantsInventory(original.id)
+
+    if (isLoading) {
+      return (
+        <div className="flex justify-end">
+          <Skeleton isLoading={true}>
+            <div className="h-[20px] w-[50px]" />
+          </Skeleton>
+        </div>
+      )
+    }
+
+    if (!isLoading && (!variant || !variant.inventory)) {
+      return <div className="text-right">{original.inventory_quantity}</div>
+    }
+
+    const { inventory } = variant
+
+    const total = inventory[0].location_levels.reduce(
+      (sum: number, location_level: InventoryLevelDTO) =>
+        (sum += location_level.stocked_quantity),
+      0
+    )
+
+    const LocationTooltip = (
+      <>
+        {inventory[0].location_levels.map(
+          (location_level: InventoryLevelDTO) => (
+            <div key={location_level.id} className="font-normal">
+              <span className="font-semibold">
+                {location_level.stocked_quantity}
+              </span>
+              {" in "}
+              {getLocationNameById(location_level.location_id)}
+            </div>
+          )
+        )}
+      </>
+    )
+
+    return (
+      <Tooltip content={LocationTooltip} side="top" className="translate-x-1/4">
+        <div className="text-right">
+          {total} in {inventory[0].location_levels.length}{" "}
+          {pluralize("location", inventory[0].location_levels.length)}
+        </div>
+      </Tooltip>
+    )
+  }
+
   const columns = useMemo(() => {
     return [
       {
@@ -103,9 +159,7 @@ const VariantsTable: React.FC<Props> = (props) => {
           </div>
         ),
         accessor: "inventory_quantity",
-        Cell: ({ row: { original } }) => (
+        Cell: VariantInventoryCell,
-          <div className="text-right">{original.inventory_quantity}</div>
-        ),
       },
       {
         Header: (

yarn.lock

@@ -5633,6 +5633,7 @@ __metadata:
     "@testing-library/jest-dom": ^5.16.5
     "@testing-library/react": ^14.0.0
     "@testing-library/user-event": ^14.4.3
+    "@types/pluralize": ^0.0.29
     "@types/react": ^18.0.27
     "@types/react-dom": ^18.0.10
     "@types/react-table": ^7.7.9
@@ -5643,6 +5644,7 @@ __metadata:
     emoji-picker-react: ^4.4.3
     framer-motion: ^9.1.6
     medusa-react: "*"
+    pluralize: ^8.0.0
     postcss: ^8.4.21
     query-string: ^8.1.0
     react: ^18.2.0
@@ -11372,6 +11374,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/pluralize@npm:^0.0.29":
+  version: 0.0.29
+  resolution: "@types/pluralize@npm:0.0.29"
+  checksum: 840796fa1db158eb4d9787758d134736e29d9a8035f5b0cbad06e3801fc64b79112ba944c83f9a1a5b94da08703f505b8315b7e0f28bfc0f8e9e1ccfead7b083
+  languageName: node
+  linkType: hard
+
 "@types/prettier@npm:^1.19.0":
   version: 1.19.1
   resolution: "@types/prettier@npm:1.19.1"