From 29243c9dd89ad4d218a278c5fbed0b00c2a3ad27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Thu, 9 Jan 2025 13:43:00 +0100 Subject: [PATCH 1/5] Update buttons in collection details page --- .../CollectionDetails/CollectionDetails.tsx | 6 ++-- .../CollectionImage/CollectionImage.tsx | 6 ++-- .../CollectionProducts/CollectionProducts.tsx | 35 +++++++++---------- 3 files changed, 21 insertions(+), 26 deletions(-) diff --git a/src/collections/components/CollectionDetails/CollectionDetails.tsx b/src/collections/components/CollectionDetails/CollectionDetails.tsx index 560eaee03e3..cf9485767ed 100644 --- a/src/collections/components/CollectionDetails/CollectionDetails.tsx +++ b/src/collections/components/CollectionDetails/CollectionDetails.tsx @@ -1,4 +1,3 @@ -// @ts-strict-ignore import { DashboardCard } from "@dashboard/components/Card"; import FormSpacer from "@dashboard/components/FormSpacer"; import RichTextEditor from "@dashboard/components/RichTextEditor"; @@ -8,7 +7,7 @@ import { commonMessages } from "@dashboard/intl"; import { getFormErrors, getProductErrorMessage } from "@dashboard/utils/errors"; import { useRichTextContext } from "@dashboard/utils/richText/context"; import { OutputData } from "@editorjs/editorjs"; -import { TextField } from "@material-ui/core"; +import { Input } from "@saleor/macaw-ui-next"; import React from "react"; import { useIntl } from "react-intl"; @@ -40,7 +39,7 @@ const CollectionDetails: React.FC = ({ - = ({ onChange={onChange} error={!!formErrors.name} helperText={getProductErrorMessage(formErrors.name, intl)} - fullWidth /> {isReadyForMount ? ( diff --git a/src/collections/components/CollectionImage/CollectionImage.tsx b/src/collections/components/CollectionImage/CollectionImage.tsx index 0b15cf80450..e205c949abb 100644 --- a/src/collections/components/CollectionImage/CollectionImage.tsx +++ b/src/collections/components/CollectionImage/CollectionImage.tsx @@ -1,5 +1,3 @@ -// @ts-strict-ignore -import { Button } from "@dashboard/components/Button"; import { DashboardCard } from "@dashboard/components/Card"; import Hr from "@dashboard/components/Hr"; import ImageUpload from "@dashboard/components/ImageUpload"; @@ -8,7 +6,7 @@ import { CollectionDetailsFragment } from "@dashboard/graphql"; import { commonMessages } from "@dashboard/intl"; import { TextField } from "@material-ui/core"; import { makeStyles } from "@saleor/macaw-ui"; -import { Skeleton, vars } from "@saleor/macaw-ui-next"; +import { Button, Skeleton, vars } from "@saleor/macaw-ui-next"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -79,7 +77,7 @@ export const CollectionImage: React.FC = props => { <> @@ -104,7 +107,7 @@ const CollectionProducts: React.FC = props => { colSpan={numberOfColumns} selected={selected} disabled={disabled} - items={mapEdgesToItems(collection?.products)} + items={mapEdgesToItems(collection?.products) ?? []} toggleAll={toggleAll} toolbar={toolbar} > @@ -150,17 +153,14 @@ const CollectionProducts: React.FC = props => { checked={isSelected} disabled={disabled} disableClickPropagation - onChange={() => toggle(product.id)} + onChange={() => product?.id && toggle(product.id)} /> - product.thumbnail.url)} - > - {maybe(() => product.name, )} + + {product?.name ?? } - {maybe(() => product.productType.name, )} + {product?.productType?.name ?? } {product && !product?.channelListings?.length ? ( @@ -173,14 +173,13 @@ const CollectionProducts: React.FC = props => { - } data-test-id="delete-icon" variant="secondary" disabled={!product} - onClick={event => onProductUnassign(product.id, event)} - > - - + onClick={event => product?.id && onProductUnassign(product.id, event)} + /> From 4eb71400ab1d341d725b52b59c6c76bda0079763 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Thu, 9 Jan 2025 13:44:20 +0100 Subject: [PATCH 2/5] Add changeset --- .changeset/four-schools-train.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/four-schools-train.md diff --git a/.changeset/four-schools-train.md b/.changeset/four-schools-train.md new file mode 100644 index 00000000000..2c7f0b7596c --- /dev/null +++ b/.changeset/four-schools-train.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": patch +--- + +Collection details page uses now Buttons from new macaw From b44bf18661d24cf1aa63ec6ca22890ecd0444b8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Thu, 9 Jan 2025 13:49:51 +0100 Subject: [PATCH 3/5] Fix typing --- .../components/CollectionImage/CollectionImage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/collections/components/CollectionImage/CollectionImage.tsx b/src/collections/components/CollectionImage/CollectionImage.tsx index e205c949abb..06af9f62b8a 100644 --- a/src/collections/components/CollectionImage/CollectionImage.tsx +++ b/src/collections/components/CollectionImage/CollectionImage.tsx @@ -59,10 +59,10 @@ export interface CollectionImageProps { export const CollectionImage: React.FC = props => { const { data, onImageUpload, image, onChange, onImageDelete } = props; - const anchor = React.useRef(); + const anchor = React.useRef(null); const classes = useStyles(props); const intl = useIntl(); - const handleImageUploadButtonClick = () => anchor.current.click(); + const handleImageUploadButtonClick = () => anchor?.current?.click(); return ( @@ -86,7 +86,7 @@ export const CollectionImage: React.FC = props => { onImageUpload(event.target.files[0])} + onChange={event => event?.target?.files && onImageUpload(event.target.files[0])} type="file" ref={anchor} accept="image/*" From d02f5e9ce6451284ef0de68376f2a56867eb1ad7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Thu, 9 Jan 2025 13:54:12 +0100 Subject: [PATCH 4/5] Remove maybe --- .../components/CollectionProducts/CollectionProducts.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx index acad18fa94c..3244b20cb9a 100644 --- a/src/collections/components/CollectionProducts/CollectionProducts.tsx +++ b/src/collections/components/CollectionProducts/CollectionProducts.tsx @@ -17,7 +17,7 @@ import { Button, Skeleton, TrashBinIcon } from "@saleor/macaw-ui-next"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; -import { maybe, renderCollection } from "../../../misc"; +import { renderCollection } from "../../../misc"; import { ListActions, PageListProps } from "../../../types"; const useStyles = makeStyles( @@ -84,7 +84,7 @@ const CollectionProducts: React.FC = props => { description: "products in collection", }, { - name: maybe(() => collection.name, "..."), + name: collection?.name ?? "...", }, ) ) : ( From e8760a33dedd2119991ee6a5f499f04892f8a4df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Thu, 9 Jan 2025 21:59:49 +0100 Subject: [PATCH 5/5] Update e2e locator --- playwright/pages/collectionsPage.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playwright/pages/collectionsPage.ts b/playwright/pages/collectionsPage.ts index 3782013ebac..e3f98a3b017 100644 --- a/playwright/pages/collectionsPage.ts +++ b/playwright/pages/collectionsPage.ts @@ -28,7 +28,7 @@ export class CollectionsPage extends BasePage { readonly assignProductButton = page.getByTestId("add-product"), readonly collectionImages = page.getByTestId("product-image"), readonly uploadImageButton = page.getByTestId("upload-image-button"), - readonly collectionNameInput = page.getByTestId("collection-name-input").locator("input"), + readonly collectionNameInput = page.getByTestId("collection-name-input"), readonly collectionDescriptionEditor = page.getByTestId("rich-text-editor-description"), readonly descriptionLoader = page.locator(".codex-editor__loader"), ) {