Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Nov 2, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
69a67d7
fix(admin-ui): Prevent oversized product request in Price List domain
kasperkristensen Nov 2, 2023
edadb9b
add changeset
kasperkristensen Nov 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/wicked-worms-kneel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 2 additions & 2 deletions packages/admin-ui/ui/src/domain/pricing/edit/edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
106 changes: 61 additions & 45 deletions packages/admin-ui/ui/src/domain/pricing/edit/prices/add-products-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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>
) : 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>
</div>
) : (
<React.Fragment>
<ProgressTabs.Content
value={Tab.PRICES}
className="h-full w-full"
>
<PriceListPricesForm
setProduct={onSetProduct}
form={nestedForm(form, "prices")}
productIds={selectedIds}
) : (
<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>
Expand Down
4 changes: 2 additions & 2 deletions ...es/admin-ui/ui/src/domain/pricing/forms/price-list-prices-form/price-list-prices-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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,
}
)

Expand Down
16 changes: 12 additions & 4 deletions ...ages/admin-ui/ui/src/domain/pricing/forms/price-list-prices-form/use-prices-form-data.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
}
)

Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion ...dmin-ui/ui/src/domain/pricing/forms/price-list-products-form/price-list-products-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
108 changes: 64 additions & 44 deletions packages/admin-ui/ui/src/domain/pricing/new/new.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -159,6 +159,9 @@ const PriceListNew = () => {
const { isLoading, isError, isNotFound, regions, currencies } =
usePricesFormData({
productIds: selectedIds,
enable: {
products: false,
},
})

const onCloseModal = React.useCallback(() => {
Expand Down Expand Up @@ -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>
Expand Down