Minor fixes to gift card list (#2218)

* Fix paginator interface

* Fix link to product

* Fix dropdown in gift card tags

* Do not pass trash to components

package-lock.json

@@ -27216,7 +27216,7 @@
     "request-progress": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz",
-      "integrity": "sha1-TKdUCBx/7GP1BeT6qCWqBs1mnb4=",
+      "integrity": "sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==",
       "dev": true,
       "requires": {
         "throttleit": "^1.0.0"

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -235,7 +235,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
                       open={isOpen}
                       style={{
                         width: anchor.current.clientWidth,
-                        zIndex: 10,
+                        zIndex: 1301,
                       }}
                       placement={popperPlacement}
                     >

src/components/PreviewPill/styles.ts

@@ -3,7 +3,7 @@ import { makeStyles } from "@saleor/macaw-ui";
 const useStyles = makeStyles(
   theme => ({
     popper: {
-      zIndex: 11,
+      zIndex: 1302,
     },
     tooltip: {
       // TO-FIX

src/components/TablePagination/TablePaginationWithContext.tsx

@@ -36,15 +36,15 @@ export const TablePaginationWithContext = (
     );
   }
 
-  const { prevPageHref, nextPageHref } = paginationProps;
+  const { nextHref, prevHref } = paginationProps;
 
   return (
     <TablePagination
       {...props}
+      nextHref={nextHref}
       hasNextPage={hasNextPage}
+      prevHref={prevHref}
       hasPreviousPage={hasPreviousPage}
-      prevHref={prevPageHref}
-      nextHref={nextPageHref}
     />
   );
 };

src/fixtures.ts

@@ -309,8 +309,8 @@ export const paginatorContextValues: PaginatorContextValues = {
   startCursor: "",
   hasNextPage: false,
   hasPreviousPage: false,
-  nextPageHref: "",
-  prevPageHref: "",
+  nextHref: "",
+  prevHref: "",
   paginatorType: "link",
 };
 

src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTable.tsx

@@ -64,10 +64,6 @@ const GiftCardsListTable: React.FC = () => {
     }
   });
 
-  const onLinkClick: React.MouseEventHandler = event => {
-    event.stopPropagation();
-  };
-
   return (
     <Card>
       <GiftCardListSearchAndFilters />
@@ -141,9 +137,13 @@ const GiftCardsListTable: React.FC = () => {
                     {product ? (
                       <TableButtonWrapper>
                         <PillLink
+                          className={classes.pill}
                           component={RouterLink}
                           to={productUrl(product?.id)}
-                          onClick={onLinkClick}
+                          onClick={event => {
+                            event.stopPropagation();
+                            navigate(productUrl(product?.id));
+                          }}
                         >
                           {product?.name}
                         </PillLink>

src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTableHeader/GiftCardsListTableHeader.tsx

@@ -101,7 +101,7 @@ const GiftCardsListTableHeader: React.FC<GiftCardsListTableHeaderProps> = ({
         <col />
         <col className={classes.colCardCode} />
         <col className={classes.colBase} />
-        <col className={classes.colBase} />
+        <col className={classes.colProduct} />
         <col className={classes.colBase} />
         <col className={classes.colBalance} />
         <col className={classes.colDelete} />

src/giftCards/GiftCardsList/styles.ts

@@ -16,9 +16,19 @@ export const useTableStyles = makeStyles(
     colBalance: {
       width: 135,
     },
+    colProduct: {
+      width: 250,
+    },
     colBase: {
       width: 150,
     },
+    pill: {
+      display: "block",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      maxWidth: "min-content",
+      overflow: "hidden",
+    },
     row: {
       cursor: "pointer",
       height: 70,

src/hooks/usePaginator.ts

@@ -60,7 +60,7 @@ function usePaginator({
     [paginationState, pageInfo],
   );
 
-  const nextPageHref = useMemo(() => {
+  const nextHref = useMemo(() => {
     if (!newPageInfo?.hasNextPage || !pageInfo?.endCursor) {
       return undefined;
     }
@@ -75,7 +75,7 @@ function usePaginator({
     );
   }, [pageInfo?.endCursor, newPageInfo?.hasNextPage, queryString]);
 
-  const prevPageHref = useMemo(() => {
+  const prevHref = useMemo(() => {
     if (!newPageInfo?.hasPreviousPage || !pageInfo?.startCursor) {
       return undefined;
     }
@@ -90,8 +90,8 @@ function usePaginator({
   }, [pageInfo?.startCursor, newPageInfo?.hasPreviousPage, queryString]);
 
   return {
-    nextPageHref,
-    prevPageHref,
+    nextHref,
+    prevHref,
     paginatorType: "link" as const,
     ...newPageInfo,
   };
@@ -110,15 +110,15 @@ export type PaginatorContextValues = PaginatorContextValuesCommon &
   (
     | {
         paginatorType: "link";
-        nextPageHref?: string;
-        prevPageHref?: string;
+        nextHref?: string;
+        prevHref?: string;
         loadNextPage?: never;
         loadPreviousPage?: never;
       }
     | {
         paginatorType: "click";
-        nextPageHref?: never;
-        prevPageHref?: never;
+        nextHref?: never;
+        prevHref?: never;
         loadNextPage: () => void;
         loadPreviousPage: () => void;
       }