feat(dashboard, medusa, medusa-js, medusa-react, icons): DataGrid, partial Product domain, and ProductVariant hook (#6428)

The PR for the Products section is growing quite large, so I would like to merge this PR that contains a lot of the ground work before moving onto finalizing the rest of the domain. **Note** Since the PR contains changes to the core, that the dashboard depends on, the staging env will not work. To preview this PR, you will need to run it locally. ## `@medusajs/medusa` **What** - Adds missing query params to `GET /admin/products/:id/variants` - `options.values` has been added to the default relations of admin product endpoints. ## `medusa-react` **What** - Adds missing hook for `GET /admin/products/:id/variants` ## `@medusajs/dashboard` - Adds base implementation for `DataGrid` component (formerly `BulkEditor`) (WIP) - Adds `/products` overview page - Adds partial `/products/create` page for creating new products (WIP - need to go over design w/ Ludvig before continuing) - Adds `/products/:id` details page - Adds `/products/:id/gallery` page for inspecting a products images in fullscreen. - Adds `/products/:id/edit` page for editing the general information of a product - Adds `/products/:id/attributes` page for editing the attributes information of a product - Adds `/products/:id/sales-channels` page for editing which sales channels a product is available in - Fixes a bug in `DataTable` where a table with two fixed columns would not display correctly For the review its not important to test the DataGrid, as it is still WIP, and I need to go through some minor changes to the behaviour with Ludvig, as virtualizing it adds some constraints. ## `@medusajs/icons` **What** - Pulls latest icons from Figma ## TODO in next PR - [ ] Fix the typing of POST /admin/products/:id as it is currently not possible to delete any of the nullable fields once they have been added. Be aware of this when reviewing this PR. - [ ] Wrap up `/products/create` page - [ ] Add `/products/:id/media` page for managing media associated with the product. - [ ] Add `/products/id/options` for managing product options (need Ludvig to rethink this as the current API is very limited and we can implement the current design as is.) - [ ] Add `/products/:id/variants/:id` page for editing a variant. (Possibly concat all of these into one BulkEditor page?)
2024-02-21 11:29:35 +00:00
parent c3e30224c7
commit 44d43e8155
131 changed files with 5799 additions and 656 deletions
@@ -1,5 +1,6 @@
 import {
  AdminGetProductsParams,
+  AdminGetProductsVariantsParams,
  AdminPostProductsProductMetadataReq,
  AdminPostProductsProductOptionsOption,
  AdminPostProductsProductOptionsReq,
@@ -13,6 +14,7 @@ import {
  AdminProductsListRes,
  AdminProductsListTagsRes,
  AdminProductsListTypesRes,
+  AdminProductsListVariantsRes,
  AdminProductsRes,
 } from "@medusajs/medusa"
 import qs from "qs"
@@ -22,11 +24,11 @@ import BaseResource from "../base"
 /**
 * This class is used to send requests to [Admin Product API Routes](https://docs.medusajs.com/api/admin#products). All its method
 * are available in the JS Client under the `medusa.admin.products` property.
- * 
+ *
 * All methods in this class require {@link AdminAuthResource.createSession | user authentication}.
- * 
+ *
 * Products are saleable items in a store. This also includes [saleable gift cards](https://docs.medusajs.com/modules/gift-cards/admin/manage-gift-cards#manage-gift-card-product) in a store.
- * 
+ *
 * Related Guide: [How to manage products](https://docs.medusajs.com/modules/products/admin/manage-products).
 */
 class AdminProductsResource extends BaseResource {
@@ -35,7 +37,7 @@ class AdminProductsResource extends BaseResource {
   * @param {AdminPostProductsReq} payload - The product to create.
   * @param {Record<string, any>} customHeaders - Custom headers to attach to the request.
   * @returns {ResponsePromise<AdminProductsRes>} Resolves to the product's details.
-   * 
+   *
   * @example
   * import Medusa from "@medusajs/medusa-js"
   * const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })
@@ -62,7 +64,7 @@ class AdminProductsResource extends BaseResource {
   * @param {string} id - The product's ID.
   * @param {Record<string, any>} customHeaders - Custom headers to attach to the request.
   * @returns {ResponsePromise<AdminProductsRes>} Resolves to the product's details.
-   * 
+   *
   * @example
   * import Medusa from "@medusajs/medusa-js"
   * const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })
@@ -86,7 +88,7 @@ class AdminProductsResource extends BaseResource {
   * @param {AdminPostProductsProductReq} payload - The attributes to update in a product.
   * @param {Record<string, any>} customHeaders - Custom headers to attach to the request.
   * @returns {ResponsePromise<AdminProductsRes>} Resolves to the product's details.
-   * 
+   *
   * @example
   * import Medusa from "@medusajs/medusa-js"
   * const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })
@@ -112,7 +114,7 @@ class AdminProductsResource extends BaseResource {
   * @param {string} id - The product's ID.
   * @param {Record<string, any>} customHeaders - Custom headers to attach to the request.
   * @returns {ResponsePromise<AdminProductsDeleteRes>} Resolves to the deletion operation's details.
-   * 
+   *
   * @example
   * import Medusa from "@medusajs/medusa-js"
   * const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })
@@ -135,10 +137,10 @@ class AdminProductsResource extends BaseResource {
   * @param {AdminGetProductsParams} query - Filters and pagination configurations to apply on the retrieved products.
   * @param {Record<string, any>} customHeaders - Custom headers to attach to the request.
   * @returns {ResponsePromise<AdminProductsListRes>} Resolves to the list of products with pagination fields.
-   * 
+   *
   * @example
   * To list products:
-   * 
+   *
   * ```ts
   * import Medusa from "@medusajs/medusa-js"
   * const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })
@@ -148,9 +150,9 @@ class AdminProductsResource extends BaseResource {
   *   console.log(products.length);
   * })
   * ```
-   * 
+   *
   * To specify relations that should be retrieved within the products:
-   * 
+   *
   * ```ts
   * import Medusa from "@medusajs/medusa-js"
   * const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })
@@ -162,9 +164,9 @@ class AdminProductsResource extends BaseResource {
   *   console.log(products.length);
   * })
   * ```
-   * 
+   *
   * By default, only the first `50` records are retrieved. You can control pagination by specifying the `limit` and `offset` properties:
-   * 
+   *
   * ```ts
   * import Medusa from "@medusajs/medusa-js"
   * const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })
@@ -195,7 +197,7 @@ class AdminProductsResource extends BaseResource {

  /**
   * @ignore
-   * 
+   *
   * @deprecated Use {@link AdminProductTypesResource.list} instead.
   */
  listTypes(
@@ -209,7 +211,7 @@ class AdminProductsResource extends BaseResource {
   * Retrieve a list of Product Tags with how many times each is used in products.
   * @param {Record<string, any>} customHeaders - Custom headers to attach to the request.
   * @returns {ResponsePromise<AdminProductsListTagsRes>} Resolves to the list of tags.
-   * 
+   *
   * @example
   * import Medusa from "@medusajs/medusa-js"
   * const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })
@@ -227,13 +229,13 @@ class AdminProductsResource extends BaseResource {
  }

  /**
-   * Set the metadata of a product. It can be any key-value pair, which allows adding custom data to a product. Learn about how you can update and delete the metadata attribute 
+   * Set the metadata of a product. It can be any key-value pair, which allows adding custom data to a product. Learn about how you can update and delete the metadata attribute
   * [here](https://docs.medusajs.com/development/entities/overview#metadata-attribute).
   * @param {string} id - The product's ID.
   * @param {AdminPostProductsProductMetadataReq} payload - The metadata details to add, update, or delete.
   * @param {Record<string, any>} customHeaders - Custom headers to attach to the request.
   * @returns {ResponsePromise<AdminProductsRes>} Resolves to the product's details.
-   * 
+   *
   * @example
   * import Medusa from "@medusajs/medusa-js"
   * const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })
@@ -261,7 +263,7 @@ class AdminProductsResource extends BaseResource {
   * @param {AdminPostProductsProductVariantsReq} payload - The product variant to create.
   * @param {Record<string, any>} customHeaders - Custom headers to attach to the request.
   * @returns {ResponsePromise<AdminProductsRes>} Resolves to the product's details. You can access the variant under the `variants` property.
-   * 
+   *
   * @example
   * import Medusa from "@medusajs/medusa-js"
   * const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })
@@ -298,11 +300,11 @@ class AdminProductsResource extends BaseResource {
  /**
   * Update a product variant's details.
   * @param {string} id - The ID of the product that the variant belongs to.
-   * @param {string} variantId - The ID of the product variant. 
+   * @param {string} variantId - The ID of the product variant.
   * @param {AdminPostProductsProductVariantsVariantReq} payload - The attributes to update in the product variant.
   * @param {Record<string, any>} customHeaders - Custom headers to attach to the request.
   * @returns {ResponsePromise<AdminProductsRes>} Resolves to the product's details. You can access the variant under the `variants` property.
-   * 
+   *
   * @example
   * import Medusa from "@medusajs/medusa-js"
   * const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })
@@ -340,10 +342,10 @@ class AdminProductsResource extends BaseResource {
  /**
   * Delete a product variant.
   * @param {string} id - The ID of the product that the variant belongs to.
-   * @param {string} variantId - The ID of the product variant. 
+   * @param {string} variantId - The ID of the product variant.
   * @param {Record<string, any>} customHeaders - Custom headers to attach to the request.
   * @returns {ResponsePromise<AdminProductsDeleteVariantRes>} Resolves to the deletion operation's details.
-   * 
+   *
   * @example
   * import Medusa from "@medusajs/medusa-js"
   * const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })
@@ -362,13 +364,46 @@ class AdminProductsResource extends BaseResource {
    return this.client.request("DELETE", path, undefined, {}, customHeaders)
  }

+  /**
+   * List the product variants associated with a product. The product variants can be filtered by fields such as `q` or `manage_inventory` passed in the `query` parameter. The product variants can also be sorted or paginated.
+   * @param {string} id - The ID of the product that the variants belongs to.
+   * @param {AdminGetProductsVariantsParams} query - Filters and pagination configurations to apply on the retrieved product variants. If undefined, the first 100 records are retrieved.
+   * @param {Record<string, any>} customHeaders - Custom headers to attach to the request.
+   * @returns {ResponsePromise<AdminProductsListVariantsRes>} Resolves to the list of product variants with pagination fields.
+   *
+   * @example
+   * import Medusa from "@medusajs/medusa-js"
+   * const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })
+   * // must be previously logged in or use api token
+   * medusa.admin.products.listVariants(productId, {
+   *   limit: 10,
+   * })
+   * .then(({ variants, limit, offset, count }) => {
+   *  console.log(variants.length);
+   * })
+   */
+  listVariants(
+    id: string,
+    query?: AdminGetProductsVariantsParams,
+    customHeaders: Record<string, any> = {}
+  ): ResponsePromise<AdminProductsListVariantsRes> {
+    let path = `/admin/products/${id}/variants`
+
+    if (query) {
+      const queryString = qs.stringify(query)
+      path = `/admin/products/${id}/variants?${queryString}`
+    }
+
+    return this.client.request("GET", path, undefined, {}, customHeaders)
+  }
+
  /**
   * Add a product option to a product.
   * @param {string} id - The product's ID.
   * @param {AdminPostProductsProductOptionsReq} payload - The option to add.
   * @param {Record<string, any>} customHeaders - Custom headers to attach to the request.
   * @returns {ResponsePromise<AdminProductsRes>} Resolves to the product's details. You can access the variant under the `options` property.
-   * 
+   *
   * @example
   * import Medusa from "@medusajs/medusa-js"
   * const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })
@@ -396,7 +431,7 @@ class AdminProductsResource extends BaseResource {
   * @param {AdminPostProductsProductOptionsOption} payload - The attributes to update in the product option.
   * @param {Record<string, any>} customHeaders - Custom headers to attach to the request.
   * @returns {ResponsePromise<AdminProductsRes>} Resolves to the product's details. You can access the variant under the `options` property.
-   * 
+   *
   * @example
   * import Medusa from "@medusajs/medusa-js"
   * const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })