feat(admin-ui): ProductCategory list page (#3380)

packages/admin-ui/ui/src/components/organisms/body-card.tsx

@@ -32,13 +32,15 @@ const BodyCard: React.FC<BodyCardProps> = ({
   className,
   children,
   compact = false,
+  setBorders = false,
+  footerMinHeight = 24,
   ...rest
 }) => {
   const { isScrolled, scrollListener } = useScroll({ threshold: 16 })
   return (
     <div
       className={clsx(
-        "rounded-rounded border bg-grey-0 border-grey-20 overflow-hidden flex flex-col h-full w-full",
+        "rounded-rounded bg-grey-0 border-grey-20 flex h-full w-full flex-col overflow-hidden border",
         { "min-h-[350px]": !compact },
         className
       )}
@@ -46,49 +48,63 @@ const BodyCard: React.FC<BodyCardProps> = ({
     >
       <div className="relative">
         {isScrolled && (
-          <div className="absolute rounded-t-rounded top-0 left-0 right-0 bg-gradient-to-b from-grey-0 to-[rgba(255,255,255,0)] h-xlarge z-10" />
+          <div className="rounded-t-rounded from-grey-0 h-xlarge absolute top-0 left-0 right-0 z-10 bg-gradient-to-b to-[rgba(255,255,255,0)]" />
         )}
       </div>
       <div
-        className="pt-medium px-xlarge flex flex-col grow overflow-y-auto"
+        className={clsx("flex grow flex-col overflow-y-auto", {
+          "border-grey-20 border-b border-solid": setBorders,
+        })}
         onScroll={scrollListener}
       >
-        <div className="flex items-center justify-between mt-6 h-xlarge">
-          {customHeader ? (
-            <div>{customHeader}</div>
-          ) : title ? (
-            <h1 className="inter-xlarge-semibold text-grey-90">{title}</h1>
-          ) : (
-            <div />
-          )}
+        <div
+          className={clsx("px-xlarge py-large", {
+            "border-grey-20 border-b border-solid": setBorders,
+          })}
+        >
+          <div className="flex items-center justify-between">
+            <div>
+              {customHeader ? (
+                <div>{customHeader}</div>
+              ) : title ? (
+                <h1 className="inter-xlarge-semibold text-grey-90">{title}</h1>
+              ) : (
+                <div />
+              )}
 
-          <div className="flex items-center space-x-2">
-            {status && status}
-            <Actionables
-              actions={actionables}
-              forceDropdown={forceDropdown}
-              customTrigger={customActionable}
-            />
+              {subtitle && (
+                <h3 className="inter-small-regular text-grey-50 pt-1.5">
+                  {subtitle}
+                </h3>
+              )}
+            </div>
+
+            <div className="flex items-center space-x-2">
+              {status && status}
+              <Actionables
+                actions={actionables}
+                forceDropdown={forceDropdown}
+                customTrigger={customActionable}
+              />
+            </div>
           </div>
         </div>
-        {subtitle && (
-          <h3 className="inter-small-regular pt-1.5 text-grey-50">
-            {subtitle}
-          </h3>
-        )}
-        {children && (
-          <div
-            className={clsx("flex flex-col", {
-              "my-large grow": !compact,
-            })}
-          >
-            {children}
-          </div>
-        )}
+
+        <div className="px-xlarge">
+          {children && (
+            <div
+              className={clsx("flex flex-col", {
+                "my-large grow": !compact,
+              })}
+            >
+              {children}
+            </div>
+          )}
+        </div>
       </div>
       {events && events.length > 0 ? (
-        <div className="pb-large pt-base px-xlarge border-t border-grey-20">
-          <div className="flex items-center flex-row-reverse">
+        <div className="pb-large pt-base px-xlarge border-grey-20 border-t">
+          <div className="flex flex-row-reverse items-center">
             {events.map((event, i: React.Key) => {
               return (
                 <Button
@@ -106,7 +122,7 @@ const BodyCard: React.FC<BodyCardProps> = ({
           </div>
         </div>
       ) : (
-        <div className="min-h-[24px]" />
+        <div className={`min-h-[${footerMinHeight}px]`} />
       )}
     </div>
   )

packages/admin-ui/ui/src/components/organisms/sidebar/index.tsx

@@ -1,5 +1,5 @@
 import { useAdminStore } from "medusa-react"
-import { useState } from "react"
+import React, { useState } from "react"
 import { useFeatureFlag } from "../../../providers/feature-flag-provider"
 import BuildingsIcon from "../../fundamentals/icons/buildings-icon"
 import CartIcon from "../../fundamentals/icons/cart-icon"
@@ -8,15 +8,17 @@ import GearIcon from "../../fundamentals/icons/gear-icon"
 import GiftIcon from "../../fundamentals/icons/gift-icon"
 import SaleIcon from "../../fundamentals/icons/sale-icon"
 import TagIcon from "../../fundamentals/icons/tag-icon"
+import SwatchIcon from "../../fundamentals/icons/swatch-icon"
 import UsersIcon from "../../fundamentals/icons/users-icon"
 import SidebarMenuItem from "../../molecules/sidebar-menu-item"
 import UserMenu from "../../molecules/user-menu"
 
 const ICON_SIZE = 20
 
-const Sidebar = () => {
+const Sidebar: React.FC = () => {
   const [currentlyOpen, setCurrentlyOpen] = useState(-1)
 
+  const { isFeatureEnabled } = useFeatureFlag()
   const { store } = useAdminStore()
 
   const triggerHandler = () => {
@@ -30,8 +32,6 @@ const Sidebar = () => {
   // infinite updates, and we do not want the variable to be free floating.
   triggerHandler.id = 0
 
-  const { isFeatureEnabled } = useFeatureFlag()
-
   const inventoryEnabled =
     isFeatureEnabled("inventoryService") &&
     isFeatureEnabled("stockLocationService")
@@ -63,6 +63,14 @@ const Sidebar = () => {
             text={"Products"}
             triggerHandler={triggerHandler}
           />
+          {isFeatureEnabled("product_categories") && (
+            <SidebarMenuItem
+              pageLink={"/a/product-categories"}
+              icon={<SwatchIcon size={ICON_SIZE} />}
+              text={"Categories"}
+              triggerHandler={triggerHandler}
+            />
+          )}
           <SidebarMenuItem
             pageLink={"/a/customers"}
             icon={<UsersIcon size={ICON_SIZE} />}