Add warehouse delete action

src/warehouses/components/WarehouseDeleteDialog/WarehouseDeleteDialog.tsx

@@ -0,0 +1,51 @@
+import DialogContentText from "@material-ui/core/DialogContentText";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import ActionDialog from "@saleor/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
+
+export interface WarehouseDeleteDialogProps {
+  confirmButtonState: ConfirmButtonTransitionState;
+  open: boolean;
+  onConfirm: () => void;
+  onClose: () => void;
+  name: string;
+}
+
+const WarehouseDeleteDialog: React.FC<WarehouseDeleteDialogProps> = ({
+  name,
+  confirmButtonState,
+  onClose,
+  onConfirm,
+  open
+}) => {
+  const intl = useIntl();
+
+  return (
+    <ActionDialog
+      open={open}
+      onClose={onClose}
+      confirmButtonState={confirmButtonState}
+      onConfirm={onConfirm}
+      variant="delete"
+      title={intl.formatMessage({
+        defaultMessage: "Delete Warehouse",
+        description: "dialog title"
+      })}
+    >
+      <DialogContentText>
+        <FormattedMessage
+          defaultMessage="Are you sure you want to delete {warehouseName}?"
+          description="dialog content"
+          values={{
+            warehouseName: <strong>{name}</strong>
+          }}
+        />
+      </DialogContentText>
+    </ActionDialog>
+  );
+};
+
+WarehouseDeleteDialog.displayName = "WarehouseDeleteDialog";
+export default WarehouseDeleteDialog;

src/warehouses/components/WarehouseDeleteDialog/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./WarehouseDeleteDialog";
+export * from "./WarehouseDeleteDialog";

src/warehouses/components/WarehouseList/WarehouseList.tsx

@@ -14,7 +14,7 @@ import { WarehouseFragment } from "@saleor/warehouses/types/WarehouseFragment";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TablePagination from "@saleor/components/TablePagination";
-import { maybe, renderCollection } from "@saleor/misc";
+import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
 import { ListProps, SortPage } from "@saleor/types";
 import { WarehouseListUrlSortField } from "@saleor/warehouses/urls";
 import TableCellHeader from "@saleor/components/TableCellHeader";
@@ -153,7 +153,7 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
                   </IconButton>
                   <IconButton
                     color="primary"
-                    onClick={() => onRemove(warehouse.id)}
+                    onClick={stopPropagation(() => onRemove(warehouse.id))}
                   >
                     <DeleteIcon />
                   </IconButton>

src/warehouses/mutations.ts

@@ -0,0 +1,22 @@
+import gql from "graphql-tag";
+
+import makeMutation from "@saleor/hooks/makeMutation";
+import {
+  WarehouseDelete,
+  WarehouseDeleteVariables
+} from "./types/WarehouseDelete";
+
+const deleteWarehouse = gql`
+  mutation WarehouseDelete($id: ID!) {
+    deleteWarehouse(id: $id) {
+      errors {
+        field
+        message
+      }
+    }
+  }
+`;
+export const useWarehouseDelete = makeMutation<
+  WarehouseDelete,
+  WarehouseDeleteVariables
+>(deleteWarehouse);

src/warehouses/types/WarehouseDelete.ts

@@ -0,0 +1,26 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL mutation operation: WarehouseDelete
+// ====================================================
+
+export interface WarehouseDelete_deleteWarehouse_errors {
+  __typename: "Error";
+  field: string | null;
+  message: string | null;
+}
+
+export interface WarehouseDelete_deleteWarehouse {
+  __typename: "WarehouseDelete";
+  errors: WarehouseDelete_deleteWarehouse_errors[] | null;
+}
+
+export interface WarehouseDelete {
+  deleteWarehouse: WarehouseDelete_deleteWarehouse | null;
+}
+
+export interface WarehouseDeleteVariables {
+  id: string;
+}

src/warehouses/urls.ts

@@ -18,7 +18,7 @@ export enum WarehouseListUrlFiltersEnum {
   query = "query"
 }
 export type WarehouseListUrlFilters = Filters<WarehouseListUrlFiltersEnum>;
-export type WarehouseListUrlDialog = "remove" | TabActionDialog;
+export type WarehouseListUrlDialog = "delete" | TabActionDialog;
 export enum WarehouseListUrlSortField {
   name = "name"
 }
@@ -33,7 +33,7 @@ export const warehouseListUrl = (params?: WarehouseListUrlQueryParams) =>
   warehouseListPath + "?" + stringifyQs(params);
 
 export const warehousePath = (id: string) => urlJoin(warehouseSection, id);
-export type WarehouseUrlDialog = "remove";
+export type WarehouseUrlDialog = "delete";
 export type WarehouseUrlQueryParams = Dialog<WarehouseUrlDialog> & SingleAction;
 export const warehouseUrl = (id: string, params?: WarehouseUrlQueryParams) =>
   warehousePath(encodeURIComponent(id)) + "?" + stringifyQs(params);

src/warehouses/views/WarehouseList/WarehouseList.tsx

@@ -17,18 +17,20 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import useListSettings from "@saleor/hooks/useListSettings";
 import { ListViews } from "@saleor/types";
 import { WindowTitle } from "@saleor/components/WindowTitle";
-import { sectionNames } from "@saleor/intl";
+import { sectionNames, commonMessages } from "@saleor/intl";
 import WarehouseListPage from "@saleor/warehouses/components/WarehouseListPage";
 import SaveFilterTabDialog, {
   SaveFilterTabDialogFormData
 } from "@saleor/components/SaveFilterTabDialog";
 import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog";
-import { maybe } from "@saleor/misc";
+import { maybe, getMutationStatus } from "@saleor/misc";
 import { getSortParams } from "@saleor/utils/sort";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
 import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import { configurationMenuUrl } from "@saleor/configuration";
+import WarehouseDeleteDialog from "@saleor/warehouses/components/WarehouseDeleteDialog";
+import { useWarehouseDelete } from "@saleor/warehouses/mutations";
 import { getSortQueryVariables } from "./sort";
 import {
   getFilterVariables,
@@ -65,6 +67,17 @@ const WarehouseList: React.FC<WarehouseListProps> = ({ params }) => {
     displayLoader: true,
     variables: queryVariables
   });
+  const [deleteWarehouse, deleteWarehouseOpts] = useWarehouseDelete({
+    onCompleted: data => {
+      if (data.deleteWarehouse.errors.length === 0) {
+        notify({
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
+        refetch();
+        closeModal();
+      }
+    }
+  });
 
   const tabs = getFilterTabs();
 
@@ -113,6 +126,8 @@ const WarehouseList: React.FC<WarehouseListProps> = ({ params }) => {
 
   const handleSort = createSortHandler(navigate, warehouseListUrl, params);
 
+  const deleteTransitionState = getMutationStatus(deleteWarehouseOpts);
+
   return (
     <>
       <WindowTitle title={intl.formatMessage(sectionNames.warehouses)} />
@@ -133,12 +148,29 @@ const WarehouseList: React.FC<WarehouseListProps> = ({ params }) => {
         onAdd={() => navigate(warehouseAddUrl)}
         onNextPage={loadNextPage}
         onPreviousPage={loadPreviousPage}
-        onRemove={() => undefined}
+        onRemove={id => openModal("delete", { id })}
         onSort={handleSort}
         onUpdateListSettings={updateListSettings}
         onRowClick={id => () => navigate(warehouseUrl(id))}
         sort={getSortParams(params)}
       />
+      <WarehouseDeleteDialog
+        confirmButtonState={deleteTransitionState}
+        name={maybe(
+          () =>
+            data.warehouses.edges.find(edge => edge.node.id === params.id).node
+              .name
+        )}
+        open={params.action === "delete"}
+        onClose={closeModal}
+        onConfirm={() =>
+          deleteWarehouse({
+            variables: {
+              id: params.id
+            }
+          })
+        }
+      />
       <SaveFilterTabDialog
         open={params.action === "save-search"}
         confirmButtonState="default"