Update buttons in collection details page (#5343)

* Update buttons in collection details page * Add changeset * Fix typing * Remove maybe * Update e2e locator
saleor · Jan 16, 2025 · 9737ff3 · 9737ff3
1 parent cb5fd4f
commit 9737ff3
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 32 deletions.
diff --git a/.changeset/four-schools-train.md b/.changeset/four-schools-train.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Collection details page uses now Buttons from new macaw
diff --git 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"),
   ) {

diff --git 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<CollectionDetailsProps> = ({
         </DashboardCard.Title>
       </DashboardCard.Header>
       <DashboardCard.Content>
-        <TextField
+        <Input
           data-test-id="collection-name-input"
           label={intl.formatMessage({
             id: "/WXs6H",
@@ -53,7 +52,6 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
           onChange={onChange}
           error={!!formErrors.name}
           helperText={getProductErrorMessage(formErrors.name, intl)}
-          fullWidth
         />
         <FormSpacer />
         {isReadyForMount ? (

diff --git 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";
 
@@ -61,10 +59,10 @@ export interface CollectionImageProps {
 
 export const CollectionImage: React.FC<CollectionImageProps> = props => {
   const { data, onImageUpload, image, onChange, onImageDelete } = props;
-  const anchor = React.useRef<HTMLInputElement>();
+  const anchor = React.useRef<HTMLInputElement | null>(null);
   const classes = useStyles(props);
   const intl = useIntl();
-  const handleImageUploadButtonClick = () => anchor.current.click();
+  const handleImageUploadButtonClick = () => anchor?.current?.click();
 
   return (
     <DashboardCard>
@@ -79,7 +77,7 @@ export const CollectionImage: React.FC<CollectionImageProps> = props => {
         <DashboardCard.Toolbar>
           <>
             <Button
-              variant="tertiary"
+              variant="secondary"
               onClick={handleImageUploadButtonClick}
               data-test-id="upload-image-button"
             >
@@ -88,7 +86,7 @@ export const CollectionImage: React.FC<CollectionImageProps> = props => {
             <input
               className={classes.fileField}
               id="fileUpload"
-              onChange={event => onImageUpload(event.target.files[0])}
+              onChange={event => event?.target?.files && onImageUpload(event.target.files[0])}
               type="file"
               ref={anchor}
               accept="image/*"

diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx
@@ -1,5 +1,3 @@
-// @ts-strict-ignore
-import { Button } from "@dashboard/components/Button";
 import { DashboardCard } from "@dashboard/components/Card";
 import { ChannelsAvailabilityDropdown } from "@dashboard/components/ChannelsAvailabilityDropdown";
 import Checkbox from "@dashboard/components/Checkbox";
@@ -14,12 +12,12 @@ import { CollectionDetailsQuery } from "@dashboard/graphql";
 import { productUrl } from "@dashboard/products/urls";
 import { mapEdgesToItems } from "@dashboard/utils/maps";
 import { TableBody, TableCell, TableFooter } from "@material-ui/core";
-import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
-import { Skeleton } from "@saleor/macaw-ui-next";
+import { makeStyles } from "@saleor/macaw-ui";
+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(
@@ -86,15 +84,20 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
                 description: "products in collection",
               },
               {
-                name: maybe(() => collection.name, "..."),
+                name: collection?.name ?? "...",
               },
             )
           ) : (
             <Skeleton />
           )}
         </DashboardCard.Title>
         <DashboardCard.Toolbar>
-          <Button data-test-id="add-product" disabled={disabled} variant="tertiary" onClick={onAdd}>
+          <Button
+            data-test-id="add-product"
+            disabled={disabled}
+            variant="secondary"
+            onClick={onAdd}
+          >
             <FormattedMessage id="scHVdW" defaultMessage="Assign product" description="button" />
           </Button>
         </DashboardCard.Toolbar>
@@ -104,7 +107,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = 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<CollectionProductsProps> = props => {
                       checked={isSelected}
                       disabled={disabled}
                       disableClickPropagation
-                      onChange={() => toggle(product.id)}
+                      onChange={() => product?.id && toggle(product.id)}
                     />
                   </TableCell>
-                  <TableCellAvatar
-                    className={classes.colName}
-                    thumbnail={maybe(() => product.thumbnail.url)}
-                  >
-                    {maybe<React.ReactNode>(() => product.name, <Skeleton />)}
+                  <TableCellAvatar className={classes.colName} thumbnail={product?.thumbnail?.url}>
+                    {product?.name ?? <Skeleton />}
                   </TableCellAvatar>
                   <TableCell className={classes.colType}>
-                    {maybe<React.ReactNode>(() => product.productType.name, <Skeleton />)}
+                    {product?.productType?.name ?? <Skeleton />}
                   </TableCell>
                   <TableCell className={classes.colType}>
                     {product && !product?.channelListings?.length ? (
@@ -173,14 +173,13 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
                   </TableCell>
                   <TableCell className={classes.colActions}>
                     <TableButtonWrapper>
-                      <IconButton
+                      <Button
+                        icon={<TrashBinIcon />}
                         data-test-id="delete-icon"
                         variant="secondary"
                         disabled={!product}
-                        onClick={event => onProductUnassign(product.id, event)}
-                      >
-                        <DeleteIcon />
-                      </IconButton>
+                        onClick={event => product?.id && onProductUnassign(product.id, event)}
+                      />
                     </TableButtonWrapper>
                   </TableCell>
                 </TableRowLink>