asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(admin-ui): Prevent oversized product request in Price List domain (#5535)

Browse Source 
* fix(admin-ui): Prevent oversized product request in Price List domain

* add changeset
This commit is contained in:
Kasper Fabricius Kristensen
2023-11-02 17:05:08 +01:00
committed by GitHub
parent 3bf9d8ddec
commit f7e9829881
7 changed files with 147 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/wicked-worms-kneel.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@medusajs/admin-ui": patch
---
fix(admin-ui): Fix issue were Price List domain would fetch all products on initial load"

4
packages/admin-ui/ui/src/domain/pricing/edit/edit.tsx
View File

@@ -59,11 +59,11 @@ const PriceListEdit = () => {
)
})}
<PriceListGeneralSection
key={`${price_list.updated_at}`}
key={`gs_${price_list.id}_${price_list.updated_at}`}
priceList={price_list}
/>
<PriceListPricesSection
key={`${price_list.updated_at}`}
key={`ps_${price_list.id}_${price_list.updated_at}`}
priceList={price_list}
/>
{getWidgets("price_list.details.after").map((w, i) => {

106
packages/admin-ui/ui/src/domain/pricing/edit/prices/add-products-modal.tsx
View File

@@ -9,11 +9,11 @@ import {
Text,
usePrompt,
} from "@medusajs/ui"
import { useAdminCreatePriceListPrices } from "medusa-react"
import * as React from "react"
import { useForm } from "react-hook-form"
import * as z from "zod"
import { useAdminCreatePriceListPrices } from "medusa-react"
import { useTranslation } from "react-i18next"
import * as z from "zod"
import { Form } from "../../../../components/helpers/form"
import useNotification from "../../../../hooks/use-notification"
@@ -621,52 +621,68 @@ const AddProductsModal = ({
productIds={productIds}
/>
</ProgressTabs.Content>
{isLoading ? (
<div className="flex h-full w-full items-center justify-center">
<Spinner className="text-ui-fg-subtle animate-spin" />
</div>
) : isError || isNotFound ? (
<div className="flex h-full w-full items-center justify-center">
<div className="text-ui-fg-subtle flex items-center gap-x-2">
<ExclamationCircle />
<Text>
{t(
"price-list-add-products-modal-error",
"An error occurred while preparing the form. Reload the page and try again. If the issue persists, try again later."
)}
</Text>
<ProgressTabs.Content
value={Tab.PRICES}
className="h-full w-full"
>
{isLoading ? (
<div className="flex h-full w-full items-center justify-center">
<Spinner className="text-ui-fg-subtle animate-spin" />
</div>
</div>
) : (
<React.Fragment>
<ProgressTabs.Content
value={Tab.PRICES}
className="h-full w-full"
>
<PriceListPricesForm
setProduct={onSetProduct}
form={nestedForm(form, "prices")}
productIds={selectedIds}
) : isError || isNotFound ? (
<div className="flex h-full w-full items-center justify-center">
<div className="text-ui-fg-subtle flex items-center gap-x-2">
<ExclamationCircle />
<Text>
{t(
"price-list-add-products-modal-error",
"An error occurred while preparing the form. Reload the page and try again. If the issue persists, try again later."
)}
</Text>
</div>
</div>
) : (
<PriceListPricesForm
setProduct={onSetProduct}
form={nestedForm(form, "prices")}
productIds={selectedIds}
/>
)}
</ProgressTabs.Content>
{product && (
<ProgressTabs.Content
value={Tab.EDIT}
className="h-full w-full"
>
{isLoading ? (
<div className="flex h-full w-full items-center justify-center">
<Spinner className="text-ui-fg-subtle animate-spin" />
</div>
) : isError || isNotFound ? (
<div className="flex h-full w-full items-center justify-center">
<div className="text-ui-fg-subtle flex items-center gap-x-2">
<ExclamationCircle />
<Text>
{t(
"price-list-add-products-modal-error",
"An error occurred while preparing the form. Reload the page and try again. If the issue persists, try again later."
)}
</Text>
</div>
</div>
) : (
<PriceListProductPricesForm
product={product}
currencies={currencies}
regions={regions}
control={editControl}
priceListTaxInclusive={priceList.includes_tax}
taxInclEnabled={isTaxInclPricesEnabled}
setValue={setEditValue}
getValues={getEditValues}
/>
</ProgressTabs.Content>
{product && (
<ProgressTabs.Content
value={Tab.EDIT}
className="h-full w-full"
>
<PriceListProductPricesForm
product={product}
currencies={currencies}
regions={regions}
control={editControl}
priceListTaxInclusive={priceList.includes_tax}
taxInclEnabled={isTaxInclPricesEnabled}
setValue={setEditValue}
getValues={getEditValues}
/>
</ProgressTabs.Content>
)}
</React.Fragment>
</ProgressTabs.Content>
)}
</Form>
</FocusModal.Body>

4
packages/admin-ui/ui/src/domain/pricing/forms/price-list-prices-form/price-list-prices-form.tsx
View File

@@ -5,11 +5,11 @@ import { useAdminProducts } from "medusa-react"
import * as React from "react"
import { useTranslation } from "react-i18next"
import { Form } from "../../../../components/helpers/form"
import { useDebounce } from "../../../../hooks/use-debounce"
import { NestedForm } from "../../../../utils/nested-form"
import { ProductFilter, ProductFilterMenu } from "../../components"
import { PriceListPricesSchema } from "./types"
import { Form } from "../../../../components/helpers/form"
type PriceListPricesFormProps = {
form: NestedForm<PriceListPricesSchema>
@@ -46,13 +46,13 @@ const PriceListPricesForm = ({
{
id: productIds,
q: debouncedQuery,
limit: productIds?.length,
price_list_id: priceListId ? [priceListId] : undefined,
...filters,
expand: "variants.prices",
},
{
keepPreviousData: true,
enabled: !!productIds?.length,
}
)

16
packages/admin-ui/ui/src/domain/pricing/forms/price-list-prices-form/use-prices-form-data.tsx
View File

@@ -5,11 +5,17 @@ import * as React from "react"
type UsePricesFormDataProps = {
priceList?: PriceList
productIds: string[]
enable?: {
products?: boolean
}
}
const usePricesFormData = ({
priceList,
productIds,
enable = {
products: true,
},
}: UsePricesFormDataProps) => {
const {
products,
@@ -18,11 +24,11 @@ const usePricesFormData = ({
} = useAdminProducts(
{
id: productIds,
limit: productIds?.length,
price_list_id: priceList ? [priceList.id] : undefined,
},
{
keepPreviousData: true,
enabled: !!productIds?.length && enable.products,
}
)
@@ -53,9 +59,11 @@ const usePricesFormData = ({
}
)
const isLoading = isLoadingProducts || isLoadingStore || isLoadingRegions
const isError = isErrorProducts || isStoreError || isErrorRegions
const isNotFound = !products || !regions || !currencies
const isLoading =
(enable.products && isLoadingProducts) || isLoadingStore || isLoadingRegions
const isError =
(enable.products && isErrorProducts) || isStoreError || isErrorRegions
const isNotFound = (enable.products && !products) || !regions || !currencies
return {
isError,

2
packages/admin-ui/ui/src/domain/pricing/forms/price-list-products-form/price-list-products-form.tsx
View File

@@ -280,7 +280,7 @@ const PriceListProductsForm = ({
const { products, count, isLoading, isError } = useAdminProducts(
{
limit: PAGE_SIZE,
limit: 20,
offset,
expand: "variants,sales_channels,collection",
q: debouncedQuery,

108
packages/admin-ui/ui/src/domain/pricing/new/new.tsx
View File

@@ -11,7 +11,6 @@ import * as React from "react"
import { useForm, useWatch } from "react-hook-form"
import * as z from "zod"
import { ExclamationCircle, Spinner } from "@medusajs/icons"
import { Product } from "@medusajs/medusa"
import { useAdminCreatePriceList } from "medusa-react"
import { Form } from "../../../components/helpers/form"
@@ -41,6 +40,7 @@ import {
type PriceListProductPricesSchema,
} from "../forms/price-list-product-prices-form"
import { ExclamationCircle, Spinner } from "@medusajs/icons"
import { useTranslation } from "react-i18next"
import {
PriceListProductsForm,
@@ -159,6 +159,9 @@ const PriceListNew = () => {
const { isLoading, isError, isNotFound, regions, currencies } =
usePricesFormData({
productIds: selectedIds,
enable: {
products: false,
},
})
const onCloseModal = React.useCallback(() => {
@@ -690,52 +693,69 @@ const PriceListNew = () => {
>
<PriceListProductsForm form={nestedForm(form, "products")} />
</ProgressTabs.Content>
{isLoading ? (
<div className="flex h-full w-full items-center justify-center">
<Spinner className="text-ui-fg-subtle animate-spin" />
</div>
) : isError || isNotFound ? (
<div className="flex h-full w-full items-center justify-center">
<div className="text-ui-fg-subtle flex items-center gap-x-2">
<ExclamationCircle />
<Text>
{t(
"price-list-new-form-error-loading-products",
"An error occurred while preparing the form. Reload the page and try again. If the issue persists, try again later."
)}
</Text>
<ProgressTabs.Content
value={Tab.PRICES}
className="h-full w-full"
>
{isLoading ? (
<div className="flex h-full w-full items-center justify-center">
<Spinner className="text-ui-fg-subtle animate-spin" />
</div>
</div>
) : (
<React.Fragment>
<ProgressTabs.Content
value={Tab.PRICES}
className="h-full w-full"
>
<PriceListPricesForm
setProduct={onSetProduct}
form={nestedForm(form, "prices")}
productIds={selectedIds}
) : isError || isNotFound ? (
<div className="flex h-full w-full items-center justify-center">
<div className="text-ui-fg-subtle flex items-center gap-x-2">
<ExclamationCircle />
<Text>
{t(
"price-list-new-form-error-loading-products",
"An error occurred while preparing the form. Reload the page and try again. If the issue persists, try again later."
)}
</Text>
</div>
</div>
) : (
<PriceListPricesForm
setProduct={onSetProduct}
form={nestedForm(form, "prices")}
productIds={selectedIds}
/>
)}
</ProgressTabs.Content>
{product && (
<ProgressTabs.Content
value={Tab.EDIT}
className="h-full w-full"
>
{isLoading ? (
<div className="flex h-full w-full items-center justify-center">
<Spinner className="text-ui-fg-subtle animate-spin" />
</div>
) : isError || isNotFound ? (
<div className="flex h-full w-full items-center justify-center">
<div className="text-ui-fg-subtle flex items-center gap-x-2">
<ExclamationCircle />
<Text>
{t(
"price-list-new-form-error-loading-products",
"An error occurred while preparing the form. Reload the page and try again. If the issue persists, try again later."
)}
</Text>
</div>
</div>
) : (
<PriceListProductPricesForm
priceListTaxInclusive={taxToggleState}
taxInclEnabled={isTaxInclPricesEnabled}
product={product}
currencies={currencies}
regions={regions}
control={editControl}
getValues={getEditValues}
setValue={setEditValue}
/>
</ProgressTabs.Content>
{product && (
<ProgressTabs.Content
value={Tab.EDIT}
className="h-full w-full"
>
<PriceListProductPricesForm
priceListTaxInclusive={taxToggleState}
taxInclEnabled={isTaxInclPricesEnabled}
product={product}
currencies={currencies}
regions={regions}
control={editControl}
getValues={getEditValues}
setValue={setEditValue}
/>
</ProgressTabs.Content>
)}
</React.Fragment>
</ProgressTabs.Content>
)}
</Form>
</FocusModal.Body>