Fix invalid select header in vouchers (#1992)

* Fix selected header width in vouchers

* Update snapshots

* Change number of columns in customer list to correct value

* Update snapshots

* Same fix in navigation view

* Update snapshots

* Remove redundant import

src/customers/components/CustomerList/CustomerList.tsx

@@ -48,8 +48,6 @@ export interface CustomerListProps
   customers: RelayToFlat<ListCustomersQuery["customers"]>;
 }
 
-const numberOfColumns = 3;
-
 const CustomerList: React.FC<CustomerListProps> = props => {
   const {
     settings,
@@ -71,16 +69,18 @@ const CustomerList: React.FC<CustomerListProps> = props => {
 
   const userPermissions = useUserPermissions();
 
+  const numberOfColumns = hasPermissions(userPermissions, [
+    PermissionEnum.MANAGE_ORDERS
+  ])
+    ? 4
+    : 3;
+
   const classes = useStyles(props);
 
   return (
     <ResponsiveTable>
       <TableHead
-        colSpan={
+        colSpan={numberOfColumns}
-          hasPermissions(userPermissions, [PermissionEnum.MANAGE_ORDERS])
-            ? numberOfColumns
-            : numberOfColumns - 1
-        }
         selected={selected}
         disabled={disabled}
         items={customers}

src/discounts/components/VoucherList/VoucherList.tsx

@@ -17,7 +17,6 @@ import { makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
 import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types";
 import { getArrowDirection } from "@saleor/utils/sort";
-import { getFooterColSpanWithBulkActions } from "@saleor/utils/tables";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -82,7 +81,7 @@ const useStyles = makeStyles(
   { name: "VoucherList" }
 );
 
-const numberOfColumns = 6;
+const numberOfColumns = 7;
 
 const VoucherList: React.FC<VoucherListProps> = props => {
   const {
@@ -218,7 +217,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
       <TableFooter>
         <TableRow>
           <TablePagination
-            colSpan={getFooterColSpanWithBulkActions(vouchers, numberOfColumns)}
+            colSpan={numberOfColumns}
             settings={settings}
             hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
             onNextPage={onNextPage}

src/navigation/components/MenuList/MenuList.tsx

@@ -18,7 +18,6 @@ import { maybe, renderCollection } from "@saleor/misc";
 import { MenuListUrlSortField } from "@saleor/navigation/urls";
 import { ListActions, ListProps, SortPage } from "@saleor/types";
 import { getArrowDirection } from "@saleor/utils/sort";
-import { getFooterColSpanWithBulkActions } from "@saleor/utils/tables";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -54,7 +53,7 @@ const useStyles = makeStyles(
   { name: "MenuList" }
 );
 
-const numberOfColumns = 3;
+const numberOfColumns = 4;
 
 const MenuList: React.FC<MenuListProps> = props => {
   const {
@@ -125,7 +124,7 @@ const MenuList: React.FC<MenuListProps> = props => {
         <TableFooter>
           <TableRow>
             <TablePagination
-              colSpan={getFooterColSpanWithBulkActions(menus, numberOfColumns)}
+              colSpan={numberOfColumns}
               settings={settings}
               hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
               onNextPage={onNextPage}

src/navigation/views/MenuList/MenuList.tsx

@@ -15,8 +15,8 @@ import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
   createPaginationState
 } from "@saleor/hooks/usePaginator";
-import { buttonMessages, commonMessages } from "@saleor/intl";
+import { commonMessages } from "@saleor/intl";
-import { Button } from "@saleor/macaw-ui";
+import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
 import { getStringOrPlaceholder, maybe } from "@saleor/misc";
 import { getById } from "@saleor/orders/components/OrderReturnPage/utils";
 import { ListViews } from "@saleor/types";
@@ -160,7 +160,9 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
         toggle={toggle}
         toggleAll={toggleAll}
         toolbar={
-          <Button
+          <IconButton
+            variant="secondary"
+            color="primary"
             onClick={() =>
               navigate(
                 menuListUrl({
@@ -171,8 +173,8 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
               )
             }
           >
-            <FormattedMessage {...buttonMessages.remove} />
+            <DeleteIcon />
-          </Button>
+          </IconButton>
         }
       />
       <MenuCreateDialog

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -74310,7 +74310,7 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="3"
+                colspan="4"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
@@ -75981,7 +75981,7 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="3"
+                colspan="4"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
@@ -76335,7 +76335,7 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="3"
+                colspan="4"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
@@ -76407,7 +76407,7 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="3"
+                colspan="4"
               >
                 No customers found
               </td>
@@ -100948,7 +100948,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="6"
+                colspan="7"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
@@ -101020,7 +101020,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="6"
+                colspan="7"
               >
                 No vouchers found
               </td>
@@ -105723,7 +105723,7 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="3"
+                colspan="4"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
@@ -105795,7 +105795,7 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="3"
+                colspan="4"
               >
                 No menus found
               </td>