chore: Product page shows list of categories associated with it (#3400)

packages/admin-ui/ui/src/components/molecules/delimited-list/index.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+import Tooltip from "../../atoms/tooltip"
+
+type DelimitedListProps = {
+  list: string[]
+  delimit?: number
+}
+
+const DelimitedList: React.FC<DelimitedListProps> = ({ list, delimit = 1 }) => {
+  if (!list.length) {
+    return <></>
+  }
+
+  const itemsToDisplay = list.slice(0, delimit).join(", ")
+  const showExtraItemsInTooltip = list.length > delimit
+  const extraItemsInToolTipCount = list.length - delimit
+
+  const ToolTipContent = () => {
+    return (
+      <div className="flex flex-col">
+        {list.slice(delimit).map((listItem) => (
+          <span key={listItem}>{listItem}</span>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <span className="inter-small-regular">
+      {itemsToDisplay}
+
+      {showExtraItemsInTooltip && (
+        <Tooltip content={<ToolTipContent />}>
+          <span className="text-grey-40">
+            {" "}
+            + {extraItemsInToolTipCount} more
+          </span>
+        </Tooltip>
+      )}
+    </span>
+  )
+}
+
+export default DelimitedList

packages/admin-ui/ui/src/components/molecules/sales-channels-display/index.tsx

@@ -13,12 +13,12 @@ const SalesChannelsDisplay = ({ channels = [] }: Props) => {
   const remainder = Math.max(channels.length - 3, 0)
 
   return (
-    <div className="flex flex-col gap-y-small">
+    <div className="gap-y-small flex flex-col">
       {channels.length > 0 && (
         <div className="flex gap-x-1">
-          <div className="flex gap-x-1 max-w-[600px] overflow-clip">
+          <div className="flex max-w-[600px] gap-x-1 overflow-clip">
             {channels.slice(0, 3).map((sc) => (
-              <SalesChannelBadge channel={sc} />
+              <SalesChannelBadge key={sc.id} channel={sc} />
             ))}
           </div>
           {remainder > 0 && (
@@ -32,7 +32,7 @@ const SalesChannelsDisplay = ({ channels = [] }: Props) => {
               }
             >
               <Badge variant="ghost" className="px-3 py-1.5">
-                <div className="flex items-center h-full inter-small-regular text-grey-50">
+                <div className="inter-small-regular text-grey-50 flex h-full items-center">
                   + {remainder} more
                 </div>
               </Badge>

packages/admin-ui/ui/src/components/templates/product-table/use-product-column.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx"
 import { useAdminStore } from "medusa-react"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { defaultChannelsSorter } from "../../../utils/sales-channel-compare-operator"
-import Tooltip from "../../atoms/tooltip"
+import DelimitedList from "../../molecules/delimited-list"
 import ListIcon from "../../fundamentals/icons/list-icon"
 import TileIcon from "../../fundamentals/icons/tile-icon"
 import ImagePlaceholder from "../../fundamentals/image-placeholder"
@@ -27,33 +27,11 @@ const useProductTableColumn = ({ setTileView, setListView, showList }) => {
   const { store } = useAdminStore()
 
   const getProductSalesChannels = (salesChannels) => {
-    if (salesChannels?.length) {
-      salesChannels.sort(
-        defaultChannelsSorter(store?.default_sales_channel_id || "")
-      )
-      return (
-        <span className="inter-small-regular">
-          {salesChannels[0].name}
-          {salesChannels.length > 1 && (
-            <Tooltip
-              content={
-                <div className="flex flex-col">
-                  {salesChannels.slice(1).map((sc) => (
-                    <span>{sc.name}</span>
-                  ))}
-                </div>
-              }
-            >
-              <span className="text-grey-40">
-                {" "}
-                + {salesChannels.length - 1} more
-              </span>
-            </Tooltip>
-          )}
-        </span>
-      )
-    }
-    return <></>
+    ;(salesChannels || []).sort(
+      defaultChannelsSorter(store?.default_sales_channel_id || "")
+    )
+
+    return <DelimitedList list={salesChannels.map((sc) => sc.name)} />
   }
 
   const columns = useMemo(
@@ -64,11 +42,11 @@ const useProductTableColumn = ({ setTileView, setListView, showList }) => {
         Cell: ({ row: { original } }) => {
           return (
             <div className="flex items-center">
-              <div className="h-[40px] w-[30px] my-1.5 flex items-center mr-4">
+              <div className="my-1.5 mr-4 flex h-[40px] w-[30px] items-center">
                 {original.thumbnail ? (
                   <img
                     src={original.thumbnail}
-                    className="h-full object-cover rounded-soft"
+                    className="rounded-soft h-full object-cover"
                   />
                 ) : (
                   <ImagePlaceholder />
@@ -110,7 +88,7 @@ const useProductTableColumn = ({ setTileView, setListView, showList }) => {
       {
         accessor: "col-3",
         Header: (
-          <div className="text-right flex justify-end">
+          <div className="flex justify-end text-right">
             <span
               onClick={setListView}
               className={clsx("hover:bg-grey-5 cursor-pointer rounded p-0.5", {