feat(medusa, admin-ui): add description field to product categories (#3768)

* feat(medusa): add description field to product categories

* chore: set nullable to false

* chore: added UI for description

* chore: added codegen files

.changeset/wicked-adults-repair.md

@@ -0,0 +1,6 @@
+---
+"@medusajs/medusa": patch
+"@medusajs/admin-ui": patch
+---
+
+feat(medusa, admin-ui): add description field to product categories

integration-tests/api/__tests__/admin/product-category.ts

@@ -437,6 +437,27 @@ describe("/admin/product-categories", () => {
       )
     })
 
+    it("throws an error when description is not a string", async () => {
+      const api = useApi()
+      const payload = {
+        name: "test",
+        handle: "test",
+        description: null
+      }
+
+      const error = await api.post(
+        `/admin/product-categories`,
+        payload,
+        adminHeaders
+      ).catch(e => e)
+
+      expect(error.response.status).toEqual(400)
+      expect(error.response.data.type).toEqual("invalid_data")
+      expect(error.response.data.message).toEqual(
+        "description must be a string"
+      )
+    })
+
     it("successfully creates a product category", async () => {
       const api = useApi()
       const payload = {
@@ -444,6 +465,7 @@ describe("/admin/product-categories", () => {
         handle: "test",
         is_internal: true,
         parent_category_id: productCategory.id,
+        description: "test"
       }
 
       const response = await api.post(
@@ -457,6 +479,7 @@ describe("/admin/product-categories", () => {
         expect.objectContaining({
           product_category: expect.objectContaining({
             name: payload.name,
+            description: payload.description,
             handle: payload.handle,
             is_internal: payload.is_internal,
             is_active: false,

integration-tests/api/__tests__/store/product-category.ts

@@ -38,6 +38,7 @@ describe("/store/product-categories", () => {
   beforeEach(async () => {
     productCategoryParent = await simpleProductCategoryFactory(dbConnection, {
       name: "category parent",
+      description: "test description",
       is_active: true,
       is_internal: false,
       rank: 0,
@@ -93,7 +94,7 @@ describe("/store/product-categories", () => {
       const api = useApi()
 
       const response = await api.get(
-        `/store/product-categories/${productCategory.id}?fields=handle,name`,
+        `/store/product-categories/${productCategory.id}?fields=handle,name,description`,
       )
 
       expect(response.data.product_category).toEqual(
@@ -101,10 +102,12 @@ describe("/store/product-categories", () => {
           id: productCategory.id,
           handle: productCategory.handle,
           name: productCategory.name,
+          description: "",
           parent_category: expect.objectContaining({
             id: productCategoryParent.id,
             handle: productCategoryParent.handle,
             name: productCategoryParent.name,
+            description: "test description"
           }),
           category_children: [
             expect.objectContaining({

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

@@ -10,6 +10,7 @@ import { useQueryClient } from "@tanstack/react-query"
 import Button from "../../../components/fundamentals/button"
 import CrossIcon from "../../../components/fundamentals/icons/cross-icon"
 import InputField from "../../../components/molecules/input"
+import TextArea from "../../../components/molecules/textarea"
 import FocusModal from "../../../components/molecules/modal/focus-modal"
 import { NextSelect } from "../../../components/molecules/select/next-select"
 import useNotification from "../../../hooks/use-notification"
@@ -44,6 +45,7 @@ function CreateProductCategory(props: CreateProductCategoryProps) {
 
   const [name, setName] = useState("")
   const [handle, setHandle] = useState("")
+  const [description, setDescription] = useState("")
   const [isActive, setIsActive] = useState(true)
   const [isPublic, setIsPublic] = useState(true)
 
@@ -54,6 +56,7 @@ function CreateProductCategory(props: CreateProductCategoryProps) {
       await createProductCategory({
         name,
         handle,
+        description,
         is_active: isActive,
         is_internal: !isPublic,
         parent_category_id: parentCategory?.id ?? null,
@@ -132,6 +135,16 @@ function CreateProductCategory(props: CreateProductCategoryProps) {
             />
           </div>
 
+          <div className="mb-8">
+            <TextArea
+              label="Description"
+              name="description"
+              value={description}
+              placeholder="Give this category a description"
+              onChange={(ev) => setDescription(ev.target.value)}
+            />
+          </div>
+
           <div className="mb-8 flex justify-between gap-6">
             <div className="flex-1">
               <NextSelect

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

@@ -6,6 +6,7 @@ import { useAdminUpdateProductCategory } from "medusa-react"
 import Button from "../../../components/fundamentals/button"
 import CrossIcon from "../../../components/fundamentals/icons/cross-icon"
 import InputField from "../../../components/molecules/input"
+import TextArea from "../../../components/molecules/textarea"
 import SideModal from "../../../components/molecules/modal/side-modal"
 import { NextSelect } from "../../../components/molecules/select/next-select"
 import useNotification from "../../../hooks/use-notification"
@@ -42,6 +43,7 @@ function EditProductCategoriesSideModal(
 
   const [name, setName] = useState("")
   const [handle, setHandle] = useState("")
+  const [description, setDescription] = useState("")
   const [isActive, setIsActive] = useState(true)
   const [isPublic, setIsPublic] = useState(true)
 
@@ -55,6 +57,7 @@ function EditProductCategoriesSideModal(
     if (activeCategory) {
       setName(activeCategory.name)
       setHandle(activeCategory.handle)
+      setDescription(activeCategory.description)
       setIsActive(activeCategory.is_active)
       setIsPublic(!activeCategory.is_internal)
     }
@@ -65,6 +68,7 @@ function EditProductCategoriesSideModal(
       await updateCategory({
         name,
         handle,
+        description,
         is_active: isActive,
         is_internal: !isPublic,
       })
@@ -130,6 +134,15 @@ function EditProductCategoriesSideModal(
             onChange={(ev) => setHandle(ev.target.value)}
           />
 
+          <TextArea
+            label="Description"
+            name="description"
+            value={description}
+            className="my-6"
+            placeholder="Give this category a description"
+            onChange={(ev) => setDescription(ev.target.value)}
+          />
+
           <NextSelect
             label="Status"
             options={statusOptions}

packages/generated/client-types/src/lib/models/AdminPostProductCategoriesCategoryReq.ts

@@ -8,6 +8,10 @@ export interface AdminPostProductCategoriesCategoryReq {
    * The name to identify the Product Category by.
    */
   name?: string
+  /**
+   * An optional text field to describe the Product Category by.
+   */
+  description?: string
   /**
    * A handle to be used in slugs.
    */

packages/generated/client-types/src/lib/models/AdminPostProductCategoriesReq.ts

@@ -8,6 +8,10 @@ export interface AdminPostProductCategoriesReq {
    * The name to identify the Product Category by.
    */
   name: string
+  /**
+   * An optional text field to describe the Product Category by.
+   */
+  description?: string
   /**
    * An optional handle to be used in slugs, if none is provided we will kebab-case the title.
    */

packages/medusa/src/api/routes/admin/product-categories/create-product-category.ts

@@ -103,6 +103,9 @@ export default async (req: Request, res: Response) => {
  *   name:
  *     type: string
  *     description: The name to identify the Product Category by.
+ *   description:
+ *     type: string
+ *     description: An optional text field to describe the Product Category by.
  *   handle:
  *     type: string
  *     description: An optional handle to be used in slugs, if none is provided we will kebab-case the title.

packages/medusa/src/api/routes/admin/product-categories/index.ts

@@ -141,6 +141,7 @@ export const allowedAdminProductCategoryRelations = [
 export const defaultProductCategoryFields = [
   "id",
   "name",
+  "description",
   "handle",
   "is_active",
   "is_internal",

packages/medusa/src/api/routes/admin/product-categories/update-product-category.ts

@@ -103,6 +103,9 @@ export default async (req: Request, res: Response) => {
  *   name:
  *     type: string
  *     description:  The name to identify the Product Category by.
+ *   description:
+ *     type: string
+ *     description: An optional text field to describe the Product Category by.
  *   handle:
  *     type: string
  *     description:  A handle to be used in slugs.

packages/medusa/src/api/routes/store/product-categories/index.ts

@@ -54,6 +54,7 @@ export const defaultStoreCategoryScope = {
 export const defaultStoreProductCategoryFields = [
   "id",
   "name",
+  "description",
   "handle",
   "parent_category_id",
   "created_at",
@@ -64,6 +65,7 @@ export const defaultStoreProductCategoryFields = [
 export const allowedStoreProductCategoryFields = [
   "id",
   "name",
+  "description",
   "handle",
   "parent_category_id",
   "created_at",

packages/medusa/src/migrations/1680857773272-add-description-to-product-category.ts

@@ -0,0 +1,15 @@
+import { MigrationInterface, QueryRunner } from "typeorm"
+
+export class addDescriptionToProductCategory1680857773272 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "product_category" ADD COLUMN IF NOT EXISTS "description" TEXT NOT NULL DEFAULT ''`
+    )
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "product_category" DROP COLUMN IF EXISTS "description"`
+    )
+  }
+}

packages/medusa/src/models/product-category.ts

@@ -25,6 +25,9 @@ export class ProductCategory extends BaseEntity {
   @Column()
   name: string
 
+  @Column({ nullable: false, default: '' })
+  description: string
+
   @Index({ unique: true })
   @Column({ nullable: false })
   handle: string

packages/medusa/src/types/product-category.ts

@@ -1,5 +1,12 @@
 import { Transform } from "class-transformer"
-import { IsNotEmpty, IsOptional, IsString, IsBoolean } from "class-validator"
+import {
+  IsNotEmpty,
+  IsOptional,
+  IsString,
+  IsBoolean,
+  ValidateIf,
+} from "class-validator"
+import { isDefined } from "medusa-core-utils"
 import { ProductCategory } from "../models"
 
 export const tempReorderRank = 99999
@@ -21,6 +28,11 @@ export type UpdateProductCategoryInput = ProductCategoryInput & {
 }
 
 export class AdminProductCategoriesReqBase {
+  @Transform(({ value }) => (value === "null" ? null : value))
+  @ValidateIf((input) => isDefined(input.description))
+  @IsString()
+  description?: string
+
   @IsOptional()
   @IsString()
   handle?: string