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
2023-04-08 18:29:12 +02:00
parent 74c54a134d
commit d533caa4c2
14 changed files with 107 additions and 2 deletions
--- a/.changeset/wicked-adults-repair.md
+++ b/.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
--- a/integration-tests/api/tests/admin/product-category.ts
+++ b/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,
--- a/integration-tests/api/tests/store/product-category.ts
+++ b/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({
--- a/packages/admin-ui/ui/src/domain/product-categories/modals/add-product-category.tsx
+++ b/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
--- a/packages/admin-ui/ui/src/domain/product-categories/modals/edit-product-category.tsx
+++ b/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}
--- a/packages/generated/client-types/src/lib/models/AdminPostProductCategoriesCategoryReq.ts
+++ b/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.
   */
--- a/packages/generated/client-types/src/lib/models/AdminPostProductCategoriesReq.ts
+++ b/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.
   */
--- a/packages/medusa/src/api/routes/admin/product-categories/create-product-category.ts
+++ b/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.
--- a/packages/medusa/src/api/routes/admin/product-categories/index.ts
+++ b/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",
--- a/packages/medusa/src/api/routes/admin/product-categories/update-product-category.ts
+++ b/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.
--- a/packages/medusa/src/api/routes/store/product-categories/index.ts
+++ b/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",
--- a/packages/medusa/src/migrations/1680857773272-add-description-to-product-category.ts
+++ b/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"`
+    )
+  }
+}
--- a/packages/medusa/src/models/product-category.ts
+++ b/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
--- a/packages/medusa/src/types/product-category.ts
+++ b/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