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", {

packages/admin-ui/ui/src/domain/products/edit/sections/general/index.tsx

@@ -1,6 +1,4 @@
-import { Product, SalesChannel } from "@medusajs/medusa"
-import React from "react"
-import Badge from "../../../../../components/fundamentals/badge"
+import { Product } from "@medusajs/medusa"
 import FeatureToggle from "../../../../../components/fundamentals/feature-toggle"
 import ChannelsIcon from "../../../../../components/fundamentals/icons/channels-icon"
 import EditIcon from "../../../../../components/fundamentals/icons/edit-icon"
@@ -8,9 +6,13 @@ import TrashIcon from "../../../../../components/fundamentals/icons/trash-icon"
 import { ActionType } from "../../../../../components/molecules/actionables"
 import SalesChannelsDisplay from "../../../../../components/molecules/sales-channels-display"
 import StatusSelector from "../../../../../components/molecules/status-selector"
+import DelimitedList from "../../../../../components/molecules/delimited-list"
 import Section from "../../../../../components/organisms/section"
+import {
+  useFeatureFlag,
+  FeatureFlag,
+} from "../../../../../providers/feature-flag-provider"
 import useToggleState from "../../../../../hooks/use-toggle-state"
-import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 import useEditProductActions from "../../hooks/use-edit-product-actions"
 import ChannelsModal from "./channels-modal"
 import GeneralModal from "./general-modal"
@@ -95,19 +97,33 @@ const GeneralSection = ({ product }: Props) => {
 
 type DetailProps = {
   title: string
-  value?: string | null
+  value?: string[] | string | null
 }
 
 const Detail = ({ title, value }: DetailProps) => {
+  const DetailValue = () => {
+    if (!Array.isArray(value)) {
+      return <p>{value ? value : "–"}</p>
+    }
+
+    if (value.length) {
+      return <DelimitedList list={value} delimit={2} />
+    }
+
+    return <p>–</p>
+  }
+
   return (
     <div className="inter-base-regular text-grey-50 flex items-center justify-between">
       <p>{title}</p>
-      <p>{value ? value : "–"}</p>
+      <DetailValue />
     </div>
   )
 }
 
 const ProductDetails = ({ product }: Props) => {
+  const { isFeatureEnabled } = useFeatureFlag()
+
   return (
     <div className="mt-8 flex flex-col gap-y-3">
       <h2 className="inter-base-semibold">Details</h2>
@@ -115,6 +131,12 @@ const ProductDetails = ({ product }: Props) => {
       <Detail title="Handle" value={product.handle} />
       <Detail title="Type" value={product.type?.value} />
       <Detail title="Collection" value={product.collection?.title} />
+      {isFeatureEnabled(FeatureFlag.PRODUCT_CATEGORIES) && (
+        <Detail
+          title="Category"
+          value={product.categories.map((c) => c.name)}
+        />
+      )}
       <Detail
         title="Discountable"
         value={product.discountable ? "True" : "False"}
@@ -141,20 +163,6 @@ const ProductTags = ({ product }: Props) => {
   )
 }
 
-type SalesChannelBadgeProps = {
-  channel: SalesChannel
-}
-
-const SalesChannelBadge: React.FC<SalesChannelBadgeProps> = ({ channel }) => {
-  return (
-    <Badge variant="ghost" className="px-3 py-1.5">
-      <div className="flex items-center">
-        <span className="inter-small-regular text-grey-90">{channel.name}</span>
-      </div>
-    </Badge>
-  )
-}
-
 const ProductSalesChannels = ({ product }: Props) => {
   return (
     <FeatureToggle featureFlag="sales_channels">

packages/admin-ui/ui/src/providers/feature-flag-provider.tsx

@@ -6,6 +6,10 @@ import React, {
   useState,
 } from "react"
 
+export enum FeatureFlag {
+  PRODUCT_CATEGORIES = "product_categories",
+}
+
 const defaultFeatureFlagContext: {
   featureToggleList: Record<string, boolean>
   isFeatureEnabled: (flag: string) => boolean