From 345005573a337d63394b63d33d6740a4171d1479 Mon Sep 17 00:00:00 2001
From: Rares Stefan <rares.capilnar@gmail.com>
Date: Tue, 28 Mar 2023 19:21:40 +0200
Subject: [PATCH] fix(admin-ui): Update order edit variants table to fit longer
 content (#3608)

* Fix stock cell check, update table columns to fit longer content

* Create nine-planes-kneel.md

* Update check

Co-authored-by: Carlos R. L. Rodrigues <37986729+carlos-r-l-rodrigues@users.noreply.github.com>

---------

Co-authored-by: Carlos R. L. Rodrigues <37986729+carlos-r-l-rodrigues@users.noreply.github.com>
---
 .changeset/nine-planes-kneel.md               |  5 ++
 .../src/domain/orders/edit/variants-table.tsx | 77 ++++++++-----------
 2 files changed, 38 insertions(+), 44 deletions(-)
 create mode 100644 .changeset/nine-planes-kneel.md

diff --git a/.changeset/nine-planes-kneel.md b/.changeset/nine-planes-kneel.md
new file mode 100644
index 0000000000..1024b75635
--- /dev/null
+++ b/.changeset/nine-planes-kneel.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): Update order edit variants table to fit longer content
diff --git a/packages/admin-ui/ui/src/domain/orders/edit/variants-table.tsx b/packages/admin-ui/ui/src/domain/orders/edit/variants-table.tsx
index 1ae45b475a..77cdb65019 100644
--- a/packages/admin-ui/ui/src/domain/orders/edit/variants-table.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/edit/variants-table.tsx
@@ -64,7 +64,7 @@ const VariantsTable: React.FC<Props> = (props) => {
       )
     }
 
-    if (!isLoading && (!variant || !variant.inventory)) {
+    if (!isLoading && !variant?.inventory?.length) {
       return <div className="text-right">{original.inventory_quantity}</div>
     }
 
@@ -102,55 +102,44 @@ const VariantsTable: React.FC<Props> = (props) => {
     )
   }
 
+  const ProductCell = ({ row: { original } }) => {
+    return (
+      <div className="flex items-center">
+        <div className="my-1.5 mr-4 flex h-[40px] w-[30px] items-center">
+          {original.product.thumbnail ? (
+            <img
+              src={original.product.thumbnail}
+              className="rounded-soft h-full object-cover"
+            />
+          ) : (
+            <ImagePlaceholder />
+          )}
+        </div>
+        <div className="flex max-w-[200px] flex-col">
+          <Tooltip
+            content={
+              <span className="font-normal">{original.product.title}</span>
+            }
+            maxWidth={400}
+          >
+            <div className="truncate">
+              {original.sku ?? original.product.title}
+            </div>
+          </Tooltip>
+          <span className="text-grey-50">{original.title}</span>
+        </div>
+      </div>
+    )
+  }
+
   const columns = useMemo(() => {
     return [
       {
         Header: (
-          <div className="text-small font-semibold text-gray-500">Name</div>
-        ),
-        accessor: "title",
-        Cell: ({ row: { original } }) => {
-          return (
-            <div className="flex items-center">
-              <div className="my-1.5 mr-4 flex h-[40px] w-[30px] items-center">
-                {original.product.thumbnail ? (
-                  <img
-                    src={original.product.thumbnail}
-                    className="rounded-soft h-full object-cover"
-                  />
-                ) : (
-                  <ImagePlaceholder />
-                )}
-              </div>
-              <div className="flex flex-col">
-                <span>{original.product.title}</span>
-                {original.title}
-              </div>
-            </div>
-          )
-        },
-      },
-      {
-        Header: (
-          <div className="text-small font-semibold text-gray-500">SKU</div>
+          <div className="text-small font-semibold text-gray-500">Product</div>
         ),
         accessor: "sku",
-        Cell: ({ row: { original } }) => <div>{original.sku}</div>,
-      },
-      {
-        Header: (
-          <div className="text-small font-semibold text-gray-500">Options</div>
-        ),
-        accessor: "options",
-        Cell: ({ row: { original } }) => {
-          const options = original.options?.map(({ value }) => value).join(", ")
-
-          return (
-            <div title={options} className="max-w-[160px] truncate">
-              <span>{options}</span>
-            </div>
-          )
-        },
+        Cell: ProductCell,
       },
       {
         Header: (