feat(admin-ui): added breadcrumbs for categories on create/edit modal

.changeset/calm-bananas-roll.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+feat(admin-ui): added breadcrumbs for categories on create/edit modal

packages/admin-ui/ui/src/components/molecules/tree-crumbs/index.tsx

@@ -0,0 +1,46 @@
+import React from "react"
+import { ProductCategory } from "@medusajs/medusa"
+
+type TreeCrumbsProps = React.HtmlHTMLAttributes<HTMLDivElement> & {
+  nodes: ProductCategory
+  currentNode: ProductCategory
+}
+
+const TreeCrumbs: React.FC<TreeCrumbsProps> = ({
+  nodes,
+  currentNode,
+  showPlaceholder = false,
+  ...props
+}) => {
+  const parentNode = nodes.find((n) => n.id === currentNode?.parent_category_id)
+
+  return (
+    <span {...props}>
+      <span className="text-grey-40">
+        {parentNode && (
+          <TreeCrumbs
+            nodes={nodes}
+            currentNode={parentNode}
+            showPlaceholder={false}
+          />
+        )}
+
+        {parentNode && <span className="mx-2">/</span>}
+
+        {currentNode.name}
+
+        {showPlaceholder && (
+          <span>
+            <span className="mx-2">/</span>
+
+            <span className="border-grey-40 rounded-[10px] border-[1px] border-dashed px-[8px] py-[4px]">
+              New
+            </span>
+          </span>
+        )}
+      </span>
+    </span>
+  )
+}
+
+export default TreeCrumbs

packages/admin-ui/ui/src/domain/product-categories/modals/add-product-category.tsx

@@ -12,6 +12,7 @@ import Button from "../../../components/fundamentals/button"
 import CrossIcon from "../../../components/fundamentals/icons/cross-icon"
 import InputField from "../../../components/molecules/input"
 import Select from "../../../components/molecules/select"
+import TreeCrumbs from "../../../components/molecules/tree-crumbs"
 import { useQueryClient } from "@tanstack/react-query"
 
 const visibilityOptions = [
@@ -36,7 +37,7 @@ type CreateProductCategoryProps = {
  * Focus modal container for creating Publishable Keys.
  */
 function CreateProductCategory(props: CreateProductCategoryProps) {
-  const { closeModal, parentCategory } = props
+  const { closeModal, parentCategory, rootCategory, categories } = props
   const notification = useNotification()
   const queryClient = useQueryClient()
 
@@ -90,9 +91,20 @@ function CreateProductCategory(props: CreateProductCategoryProps) {
 
       <FocusModal.Main className="no-scrollbar flex w-full justify-center">
         <div className="small:w-4/5 medium:w-7/12 large:w-6/12 my-16 max-w-[700px]">
-          <h1 className="inter-xlarge-semibold text-grey-90 pb-8">
+          <h1 className="inter-xlarge-semibold text-grey-90 pb-10">
             Add category {parentCategory && `to ${parentCategory.name}`}
           </h1>
+
+          {parentCategory && (
+            <div className="mb-10">
+              <TreeCrumbs
+                nodes={categories}
+                currentNode={parentCategory}
+                showPlaceholder={true}
+              />
+            </div>
+          )}
+
           <h4 className="inter-large-semibold text-grey-90 pb-1">Details</h4>
 
           <div className="mb-8 flex justify-between gap-6">

packages/admin-ui/ui/src/domain/product-categories/modals/edit-product-category.tsx

@@ -9,6 +9,7 @@ import CrossIcon from "../../../components/fundamentals/icons/cross-icon"
 import InputField from "../../../components/molecules/input"
 import Select from "../../../components/molecules/select"
 import useNotification from "../../../hooks/use-notification"
+import TreeCrumbs from "../../../components/molecules/tree-crumbs"
 
 const visibilityOptions = [
   {
@@ -35,7 +36,7 @@ type EditProductCategoriesSideModalProps = {
 function EditProductCategoriesSideModal(
   props: EditProductCategoriesSideModalProps
 ) {
-  const { isVisible, close, activeCategory } = props
+  const { isVisible, close, activeCategory, categories } = props
 
   const [name, setName] = useState("")
   const [handle, setHandle] = useState("")
@@ -98,6 +99,12 @@ function EditProductCategoriesSideModal(
         </div>
         {/* === DIVIDER === */}
 
+        {activeCategory && (
+          <div className="mt-[30px]">
+            <TreeCrumbs nodes={categories} currentNode={activeCategory} />
+          </div>
+        )}
+
         <div className="flex-grow">
           <InputField
             required

packages/admin-ui/ui/src/domain/product-categories/pages/index.tsx

@@ -8,6 +8,7 @@ import BodyCard from "../../../components/organisms/body-card"
 import CreateProductCategory from "../modals/add-product-category"
 import ProductCategoriesList from "../components/product-categories-list"
 import EditProductCategoriesSideModal from "../modals/edit-product-category"
+import { flattenCategoryTree } from "../../../utils/tree-helpers"
 
 /**
  * Product categories empty state placeholder.
@@ -46,7 +47,7 @@ function ProductCategoryPage() {
 
   const [activeCategory, setActiveCategory] = useState<ProductCategory>()
 
-  const { product_categories: categories, isLoading } =
+  const { product_categories: categories = [], isLoading } =
     useAdminProductCategories({
       parent_category_id: "null",
       include_descendants_tree: true,
@@ -59,18 +60,22 @@ function ProductCategoryPage() {
     },
   ]
 
-  const showPlaceholder = !isLoading && !categories?.length
+  const showPlaceholder = !isLoading && !categories.length
 
   const editCategory = (category: ProductCategory) => {
     setActiveCategory(category)
     showEditModal()
   }
 
   const createSubCategory = (category: ProductCategory) => {
+    if (isLoading) {
+      return
+    }
     setActiveCategory(category)
     showCreateModal()
   }
 
+  const flattenedCategories = flattenCategoryTree(categories)
   const context = {
     editCategory,
     createSubCategory,
@@ -97,6 +102,7 @@ function ProductCategoryPage() {
           {isCreateModalVisible && (
             <CreateProductCategory
               parentCategory={activeCategory}
+              categories={flattenedCategories}
               closeModal={() => {
                 hideCreateModal()
                 setActiveCategory(undefined)
@@ -108,6 +114,7 @@ function ProductCategoryPage() {
             close={hideEditModal}
             activeCategory={activeCategory}
             isVisible={!!activeCategory && isEditModalVisible}
+            categories={flattenedCategories}
           />
         </div>
       </div>

packages/admin-ui/ui/src/utils/tree-helpers.ts

@@ -0,0 +1,13 @@
+export const flattenCategoryTree = (rootCategories) => {
+  return rootCategories.reduce((acc, category) => {
+    if (category?.category_children.length) {
+      acc = acc
+        .concat(flattenCategoryTree(category.category_children))
+        .concat(category)
+    } else {
+      acc.push(category)
+    }
+
+    return acc
+  }, [])
+}