Remove order bulk cancel

src/orders/components/OrderList/OrderList.tsx

@@ -3,16 +3,15 @@ import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
 import TableRow from "@material-ui/core/TableRow";
+import TableHead from "@material-ui/core/TableHead";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import Checkbox from "@saleor/components/Checkbox";
 import { DateTime } from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
-import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import {
   maybe,
@@ -20,7 +19,7 @@ import {
   transformOrderStatus,
   transformPaymentStatus
 } from "@saleor/misc";
-import { ListActions, ListProps, SortPage } from "@saleor/types";
+import { ListProps, SortPage } from "@saleor/types";
 import { OrderListUrlSortField } from "@saleor/orders/urls";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import { getArrowDirection } from "@saleor/utils/sort";
@@ -59,14 +58,11 @@ const useStyles = makeStyles(
   { name: "OrderList" }
 );
 
-interface OrderListProps
+interface OrderListProps extends ListProps, SortPage<OrderListUrlSortField> {
-  extends ListProps,
-    ListActions,
-    SortPage<OrderListUrlSortField> {
   orders: OrderList_orders_edges_node[];
 }
 
-const numberOfColumns = 7;
+const numberOfColumns = 6;
 
 export const OrderList: React.FC<OrderListProps> = props => {
   const {
@@ -79,12 +75,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
     onUpdateListSettings,
     onRowClick,
     onSort,
-    isChecked,
+    sort
-    selected,
-    sort,
-    toggle,
-    toggleAll,
-    toolbar
   } = props;
   const classes = useStyles(props);
 
@@ -99,14 +90,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
     : undefined;
   return (
     <ResponsiveTable>
-      <TableHead
+      <TableHead>
-        colSpan={numberOfColumns}
-        selected={selected}
-        disabled={disabled}
-        items={orders}
-        toggleAll={toggleAll}
-        toolbar={toolbar}
-      >
         <TableCellHeader
           direction={
             sort.sort === OrderListUrlSortField.number
@@ -206,84 +190,67 @@ export const OrderList: React.FC<OrderListProps> = props => {
       <TableBody>
         {renderCollection(
           orderList,
-          order => {
+          order => (
-            const isSelected = order ? isChecked(order.id) : false;
+            <TableRow
-
+              hover={!!order}
-            return (
+              className={!!order ? classes.link : undefined}
-              <TableRow
+              onClick={order ? onRowClick(order.id) : undefined}
-                hover={!!order}
+              key={order ? order.id : "skeleton"}
-                className={!!order ? classes.link : undefined}
+            >
-                onClick={order ? onRowClick(order.id) : undefined}
+              <TableCell className={classes.colNumber}>
-                key={order ? order.id : "skeleton"}
+                {maybe(() => order.number) ? "#" + order.number : <Skeleton />}
-                selected={isSelected}
+              </TableCell>
-              >
+              <TableCell className={classes.colDate}>
-                <TableCell padding="checkbox">
+                {maybe(() => order.created) ? (
-                  <Checkbox
+                  <DateTime date={order.created} />
-                    checked={isSelected}
+                ) : (
-                    disabled={disabled}
+                  <Skeleton />
-                    disableClickPropagation
+                )}
-                    onChange={() => toggle(order.id)}
+              </TableCell>
-                  />
+              <TableCell className={classes.colCustomer}>
-                </TableCell>
+                {maybe(() => order.billingAddress) ? (
-                <TableCell className={classes.colNumber}>
+                  <>
-                  {maybe(() => order.number) ? (
+                    {order.billingAddress.firstName}
-                    "#" + order.number
+                    &nbsp;
-                  ) : (
+                    {order.billingAddress.lastName}
-                    <Skeleton />
+                  </>
-                  )}
+                ) : maybe(() => order.userEmail) !== undefined ? (
-                </TableCell>
+                  order.userEmail
-                <TableCell className={classes.colDate}>
+                ) : (
-                  {maybe(() => order.created) ? (
+                  <Skeleton />
-                    <DateTime date={order.created} />
+                )}
-                  ) : (
+              </TableCell>
-                    <Skeleton />
+              <TableCell className={classes.colPayment}>
-                  )}
+                {maybe(() => order.paymentStatus.status) !== undefined ? (
-                </TableCell>
+                  order.paymentStatus.status === null ? null : (
-                <TableCell className={classes.colCustomer}>
-                  {maybe(() => order.billingAddress) ? (
-                    <>
-                      {order.billingAddress.firstName}
-                      &nbsp;
-                      {order.billingAddress.lastName}
-                    </>
-                  ) : maybe(() => order.userEmail) !== undefined ? (
-                    order.userEmail
-                  ) : (
-                    <Skeleton />
-                  )}
-                </TableCell>
-                <TableCell className={classes.colPayment}>
-                  {maybe(() => order.paymentStatus.status) !== undefined ? (
-                    order.paymentStatus.status === null ? null : (
-                      <StatusLabel
-                        status={order.paymentStatus.status}
-                        label={order.paymentStatus.localized}
-                      />
-                    )
-                  ) : (
-                    <Skeleton />
-                  )}
-                </TableCell>
-                <TableCell className={classes.colFulfillment}>
-                  {maybe(() => order.status) ? (
                     <StatusLabel
-                      status={order.status.status}
+                      status={order.paymentStatus.status}
-                      label={order.status.localized}
+                      label={order.paymentStatus.localized}
                     />
-                  ) : (
+                  )
-                    <Skeleton />
+                ) : (
-                  )}
+                  <Skeleton />
-                </TableCell>
+                )}
-                <TableCell className={classes.colTotal}>
+              </TableCell>
-                  {maybe(() => order.total.gross) ? (
+              <TableCell className={classes.colFulfillment}>
-                    <Money money={order.total.gross} />
+                {maybe(() => order.status) ? (
-                  ) : (
+                  <StatusLabel
-                    <Skeleton />
+                    status={order.status.status}
-                  )}
+                    label={order.status.localized}
-                </TableCell>
+                  />
-              </TableRow>
+                ) : (
-            );
+                  <Skeleton />
-          },
+                )}
+              </TableCell>
+              <TableCell className={classes.colTotal}>
+                {maybe(() => order.total.gross) ? (
+                  <Money money={order.total.gross} />
+                ) : (
+                  <Skeleton />
+                )}
+              </TableCell>
+            </TableRow>
+          ),
           () => (
             <TableRow>
               <TableCell colSpan={numberOfColumns}>

src/orders/components/OrderListPage/OrderListPage.tsx

@@ -7,12 +7,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
 import { sectionNames } from "@saleor/intl";
-import {
+import { FilterPageProps, PageListProps, SortPage } from "@saleor/types";
-  FilterPageProps,
-  ListActions,
-  PageListProps,
-  SortPage
-} from "@saleor/types";
 import { OrderListUrlSortField } from "@saleor/orders/urls";
 import FilterBar from "@saleor/components/FilterBar";
 import { OrderList_orders_edges_node } from "../../types/OrderList";
@@ -25,7 +20,6 @@ import {
 
 export interface OrderListPageProps
   extends PageListProps,
-    ListActions,
     FilterPageProps<OrderFilterKeys, OrderListFilterOpts>,
     SortPage<OrderListUrlSortField> {
   orders: OrderList_orders_edges_node[];

src/orders/mutations.ts

@@ -8,10 +8,6 @@ import {
   fragmentOrderEvent
 } from "./queries";
 import { OrderAddNote, OrderAddNoteVariables } from "./types/OrderAddNote";
-import {
-  OrderBulkCancel,
-  OrderBulkCancelVariables
-} from "./types/OrderBulkCancel";
 import { OrderCancel, OrderCancelVariables } from "./types/OrderCancel";
 import { OrderCapture, OrderCaptureVariables } from "./types/OrderCapture";
 import {
@@ -87,21 +83,6 @@ export const TypedOrderCancelMutation = TypedMutation<
   OrderCancelVariables
 >(orderCancelMutation);
 
-const orderBulkCancelMutation = gql`
-  ${orderErrorFragment}
-  mutation OrderBulkCancel($ids: [ID]!) {
-    orderBulkCancel(ids: $ids) {
-      errors: orderErrors {
-        ...OrderErrorFragment
-      }
-    }
-  }
-`;
-export const TypedOrderBulkCancelMutation = TypedMutation<
-  OrderBulkCancel,
-  OrderBulkCancelVariables
->(orderBulkCancelMutation);
-
 const orderDraftCancelMutation = gql`
   ${fragmentOrderDetails}
   ${orderErrorFragment}

src/orders/types/OrderBulkCancel.ts

@@ -1,28 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// This file was automatically generated and should not be edited.
-
-import { OrderErrorCode } from "./../../types/globalTypes";
-
-// ====================================================
-// GraphQL mutation operation: OrderBulkCancel
-// ====================================================
-
-export interface OrderBulkCancel_orderBulkCancel_errors {
-  __typename: "OrderError";
-  code: OrderErrorCode;
-  field: string | null;
-}
-
-export interface OrderBulkCancel_orderBulkCancel {
-  __typename: "OrderBulkCancel";
-  errors: OrderBulkCancel_orderBulkCancel_errors[];
-}
-
-export interface OrderBulkCancel {
-  orderBulkCancel: OrderBulkCancel_orderBulkCancel | null;
-}
-
-export interface OrderBulkCancelVariables {
-  ids: (string | null)[];
-}

src/orders/views/OrderList/OrderList.tsx

@@ -1,12 +1,10 @@
-import Button from "@material-ui/core/Button";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
 import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog";
 import SaveFilterTabDialog, {
   SaveFilterTabDialogFormData
 } from "@saleor/components/SaveFilterTabDialog";
-import useBulkActions from "@saleor/hooks/useBulkActions";
 import useListSettings from "@saleor/hooks/useListSettings";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
@@ -14,20 +12,15 @@ import usePaginator, {
   createPaginationState
 } from "@saleor/hooks/usePaginator";
 import useShop from "@saleor/hooks/useShop";
-import { maybe } from "@saleor/misc";
+import { maybe, getStringOrPlaceholder } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
 import { getSortParams } from "@saleor/utils/sort";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
-import OrderBulkCancelDialog from "../../components/OrderBulkCancelDialog";
 import OrderListPage from "../../components/OrderListPage/OrderListPage";
-import {
+import { useOrderDraftCreateMutation } from "../../mutations";
-  TypedOrderBulkCancelMutation,
-  useOrderDraftCreateMutation
-} from "../../mutations";
 import { useOrderListQuery } from "../../queries";
-import { OrderBulkCancel } from "../../types/OrderBulkCancel";
 import { OrderDraftCreate } from "../../types/OrderDraftCreate";
 import {
   orderListUrl,
@@ -56,9 +49,6 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
   const notify = useNotifier();
   const paginate = usePaginator();
   const shop = useShop();
-  const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
-    params.ids
-  );
   const { updateListSettings, settings } = useListSettings(
     ListViews.ORDER_LIST
   );
@@ -91,7 +81,6 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
     resetFilters,
     handleSearchChange
   ] = createFilterHandlers({
-    cleanupFn: reset,
     createUrl: orderListUrl,
     getFilterQueryParam,
     navigate,
@@ -103,19 +92,16 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
     OrderListUrlQueryParams
   >(navigate, orderListUrl, params);
 
-  const handleTabChange = (tab: number) => {
+  const handleTabChange = (tab: number) =>
-    reset();
     navigate(
       orderListUrl({
         activeTab: tab.toString(),
         ...getFilterTabs()[tab - 1].data
       })
     );
-  };
 
   const handleFilterTabDelete = () => {
     deleteFilterTab(currentTab);
-    reset();
     navigate(orderListUrl());
   };
 
@@ -135,7 +121,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
     }),
     [params, settings.rowNumber]
   );
-  const { data, loading, refetch } = useOrderListQuery({
+  const { data, loading } = useOrderListQuery({
     displayLoader: true,
     variables: queryVariables
   });
@@ -146,100 +132,48 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
     params
   );
 
-  const handleOrderBulkCancel = (data: OrderBulkCancel) => {
-    if (data.orderBulkCancel.errors.length === 0) {
-      notify({
-        text: intl.formatMessage({
-          defaultMessage: "Orders cancelled"
-        })
-      });
-      reset();
-      refetch();
-      closeModal();
-    }
-  };
-
   const handleSort = createSortHandler(navigate, orderListUrl, params);
 
   return (
-    <TypedOrderBulkCancelMutation onCompleted={handleOrderBulkCancel}>
+    <>
-      {(orderBulkCancel, orderBulkCancelOpts) => {
+      <OrderListPage
-        const onOrderBulkCancel = () =>
+        currencySymbol={currencySymbol}
-          orderBulkCancel({
+        settings={settings}
-            variables: {
+        currentTab={currentTab}
-              ids: params.ids
+        disabled={loading}
-            }
+        filterOpts={getFilterOpts(params)}
-          });
+        orders={maybe(() => data.orders.edges.map(edge => edge.node))}
-
+        pageInfo={pageInfo}
-        return (
+        sort={getSortParams(params)}
-          <>
+        onAdd={createOrder}
-            <OrderListPage
+        onNextPage={loadNextPage}
-              currencySymbol={currencySymbol}
+        onPreviousPage={loadPreviousPage}
-              settings={settings}
+        onUpdateListSettings={updateListSettings}
-              currentTab={currentTab}
+        onRowClick={id => () => navigate(orderUrl(id))}
-              disabled={loading}
+        onSort={handleSort}
-              filterOpts={getFilterOpts(params)}
+        onSearchChange={handleSearchChange}
-              orders={maybe(() => data.orders.edges.map(edge => edge.node))}
+        onFilterChange={changeFilters}
-              pageInfo={pageInfo}
+        onTabSave={() => openModal("save-search")}
-              sort={getSortParams(params)}
+        onTabDelete={() => openModal("delete-search")}
-              onAdd={createOrder}
+        onTabChange={handleTabChange}
-              onNextPage={loadNextPage}
+        initialSearch={params.query || ""}
-              onPreviousPage={loadPreviousPage}
+        tabs={getFilterTabs().map(tab => tab.name)}
-              onUpdateListSettings={updateListSettings}
+        onAll={resetFilters}
-              onRowClick={id => () => navigate(orderUrl(id))}
+      />
-              onSort={handleSort}
+      <SaveFilterTabDialog
-              isChecked={isSelected}
+        open={params.action === "save-search"}
-              selected={listElements.length}
+        confirmButtonState="default"
-              toggle={toggle}
+        onClose={closeModal}
-              toggleAll={toggleAll}
+        onSubmit={handleFilterTabSave}
-              toolbar={
+      />
-                <Button
+      <DeleteFilterTabDialog
-                  color="primary"
+        open={params.action === "delete-search"}
-                  onClick={() =>
+        confirmButtonState="default"
-                    openModal("cancel", {
+        onClose={closeModal}
-                      ids: listElements
+        onSubmit={handleFilterTabDelete}
-                    })
+        tabName={getStringOrPlaceholder(tabs[currentTab - 1]?.name)}
-                  }
+      />
-                >
+    </>
-                  <FormattedMessage
-                    defaultMessage="Cancel"
-                    description="cancel orders, button"
-                  />
-                </Button>
-              }
-              onSearchChange={handleSearchChange}
-              onFilterChange={changeFilters}
-              onTabSave={() => openModal("save-search")}
-              onTabDelete={() => openModal("delete-search")}
-              onTabChange={handleTabChange}
-              initialSearch={params.query || ""}
-              tabs={getFilterTabs().map(tab => tab.name)}
-              onAll={resetFilters}
-            />
-            <OrderBulkCancelDialog
-              confirmButtonState={orderBulkCancelOpts.status}
-              numberOfOrders={maybe(() => params.ids.length.toString(), "...")}
-              onClose={closeModal}
-              onConfirm={onOrderBulkCancel}
-              open={params.action === "cancel"}
-            />
-            <SaveFilterTabDialog
-              open={params.action === "save-search"}
-              confirmButtonState="default"
-              onClose={closeModal}
-              onSubmit={handleFilterTabSave}
-            />
-            <DeleteFilterTabDialog
-              open={params.action === "delete-search"}
-              confirmButtonState="default"
-              onClose={closeModal}
-              onSubmit={handleFilterTabDelete}
-              tabName={maybe(() => tabs[currentTab - 1].name, "...")}
-            />
-          </>
-        );
-      }}
-    </TypedOrderBulkCancelMutation>
   );
 };