Merge pull request #296 from mirumee/ref/unify-modals

Unify dialog handling

CHANGELOG.md

@@ -22,6 +22,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add ability to reset own password - #289 by @dominik-zeglen
 - Move mutation state to mutation - #297 by @dominik-zeglen
 - Add table sorting - #292 by @dominik-zeglen
+- Unify dialog handling - #296 by @dominik-zeglen
 
 ## 2.0.0
 

src/attributes/views/AttributeCreate/AttributeCreate.tsx

@@ -13,6 +13,7 @@ import {
   remove,
   updateAtIndex
 } from "@saleor/utils/lists";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import AttributePage from "../../components/AttributePage";
 import AttributeValueDeleteDialog from "../../components/AttributeValueDeleteDialog";
 import AttributeValueEditDialog, {
@@ -22,10 +23,10 @@ import { AttributeCreateMutation } from "../../mutations";
 import { AttributeCreate } from "../../types/AttributeCreate";
 import {
   attributeAddUrl,
-  AttributeAddUrlDialog,
   AttributeAddUrlQueryParams,
   attributeListUrl,
-  attributeUrl
+  attributeUrl,
+  AttributeAddUrlDialog
 } from "../../urls";
 
 interface AttributeDetailsProps {
@@ -51,24 +52,10 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
 
   const id = params.id ? parseInt(params.id, 0) : undefined;
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    AttributeAddUrlDialog,
-      attributeAddUrl({
+    AttributeAddUrlQueryParams
-        ...params,
+  >(navigate, attributeAddUrl, params);
-        action: undefined,
-        id: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: AttributeAddUrlDialog, valueId?: string) =>
-    navigate(
-      attributeAddUrl({
-        ...params,
-        action,
-        id: valueId
-      })
-    );
 
   const handleValueDelete = () => {
     setValues(remove(values[params.id], values, areValuesEqual));
@@ -159,9 +146,17 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
               })
             }
             onValueAdd={() => openModal("add-value")}
-            onValueDelete={id => openModal("remove-value", id)}
+            onValueDelete={id =>
+              openModal("remove-value", {
+                id
+              })
+            }
             onValueReorder={handleValueReorder}
-            onValueUpdate={id => openModal("edit-value", id)}
+            onValueUpdate={id =>
+              openModal("edit-value", {
+                id
+              })
+            }
             saveButtonBarState={attributeCreateOpts.status}
             values={values.map((value, valueIndex) => ({
               __typename: "AttributeValue" as "AttributeValue",

src/attributes/views/AttributeDetails/AttributeDetails.tsx

@@ -7,6 +7,7 @@ import { commonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { ReorderEvent } from "@saleor/types";
 import { move } from "@saleor/utils/lists";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import AttributeDeleteDialog from "../../components/AttributeDeleteDialog";
 import AttributePage from "../../components/AttributePage";
 import AttributeValueDeleteDialog from "../../components/AttributeValueDeleteDialog";
@@ -29,8 +30,8 @@ import { AttributeValueUpdate } from "../../types/AttributeValueUpdate";
 import {
   attributeListUrl,
   attributeUrl,
-  AttributeUrlDialog,
+  AttributeUrlQueryParams,
-  AttributeUrlQueryParams
+  AttributeUrlDialog
 } from "../../urls";
 
 interface AttributeDetailsProps {
@@ -43,25 +44,10 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
   const notify = useNotifier();
   const intl = useIntl();
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    AttributeUrlDialog,
-      attributeUrl(id, {
+    AttributeUrlQueryParams
-        ...params,
+  >(navigate, params => attributeUrl(id, params), params);
-        action: undefined,
-        id: undefined,
-        ids: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: AttributeUrlDialog, valueId?: string) =>
-    navigate(
-      attributeUrl(id, {
-        ...params,
-        action,
-        id: valueId
-      })
-    );
 
   const handleDelete = (data: AttributeDelete) => {
     if (data.attributeDelete.errors.length === 0) {
@@ -200,11 +186,15 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
                                       }}
                                       onValueAdd={() => openModal("add-value")}
                                       onValueDelete={id =>
-                                        openModal("remove-value", id)
+                                        openModal("remove-value", {
+                                          id
+                                        })
                                       }
                                       onValueReorder={handleValueReorder}
                                       onValueUpdate={id =>
-                                        openModal("edit-value", id)
+                                        openModal("edit-value", {
+                                          id
+                                        })
                                       }
                                       saveButtonBarState={
                                         attributeUpdateOpts.status

src/attributes/views/AttributeList/AttributeList.tsx

@@ -23,6 +23,7 @@ import usePaginator, {
 } from "@saleor/hooks/usePaginator";
 import { getSortParams } from "@saleor/utils/sort";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import { PAGINATE_BY } from "../../../config";
 import useBulkActions from "../../../hooks/useBulkActions";
 import { maybe } from "../../../misc";
@@ -34,10 +35,10 @@ import { AttributeBulkDelete } from "../../types/AttributeBulkDelete";
 import {
   attributeAddUrl,
   attributeListUrl,
-  AttributeListUrlDialog,
   AttributeListUrlFilters,
   AttributeListUrlQueryParams,
-  attributeUrl
+  attributeUrl,
+  AttributeListUrlDialog
 } from "../../urls";
 import { getSortQueryVariables } from "./sort";
 
@@ -76,24 +77,10 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
         : 0
       : parseInt(params.activeTab, 0);
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    AttributeListUrlDialog,
-      attributeListUrl({
+    AttributeListUrlQueryParams
-        ...params,
+  >(navigate, attributeListUrl, params);
-        action: undefined,
-        ids: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: AttributeListUrlDialog, ids?: string[]) =>
-    navigate(
-      attributeListUrl({
-        ...params,
-        action,
-        ids
-      })
-    );
 
   const changeFilterField = (filter: AttributeListUrlFilters) => {
     reset();
@@ -181,7 +168,11 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
             toolbar={
               <IconButton
                 color="primary"
-                onClick={() => openModal("remove", listElements)}
+                onClick={() =>
+                  openModal("remove", {
+                    ids: listElements
+                  })
+                }
               >
                 <DeleteIcon />
               </IconButton>

src/categories/views/CategoryDetails.tsx

@@ -13,6 +13,7 @@ import usePaginator, {
   createPaginationState
 } from "@saleor/hooks/usePaginator";
 import { commonMessages } from "@saleor/intl";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import { PAGINATE_BY } from "../../config";
 import { maybe } from "../../misc";
 import { TypedProductBulkDeleteMutation } from "../../products/mutations";
@@ -36,8 +37,8 @@ import {
   categoryAddUrl,
   categoryListUrl,
   categoryUrl,
-  CategoryUrlDialog,
+  CategoryUrlQueryParams,
-  CategoryUrlQueryParams
+  CategoryUrlDialog
 } from "../urls";
 
 export interface CategoryDetailsProps {
@@ -128,24 +129,10 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
     );
   };
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    CategoryUrlDialog,
-      categoryUrl(id, {
+    CategoryUrlQueryParams
-        ...params,
+  >(navigate, params => categoryUrl(id, params), params);
-        action: undefined,
-        ids: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: CategoryUrlDialog, ids?: string[]) =>
-    navigate(
-      categoryUrl(id, {
-        ...params,
-        action,
-        ids
-      })
-    );
 
   const handleBulkProductDelete = (data: productBulkDelete) => {
     if (data.productBulkDelete.errors.length === 0) {
@@ -240,7 +227,11 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
               subcategoryListToolbar={
                 <IconButton
                   color="primary"
-                  onClick={() => openModal("delete-categories", listElements)}
+                  onClick={() =>
+                    openModal("delete-categories", {
+                      ids: listElements
+                    })
+                  }
                 >
                   <DeleteIcon />
                 </IconButton>
@@ -248,7 +239,11 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
               productListToolbar={
                 <IconButton
                   color="primary"
-                  onClick={() => openModal("delete-products", listElements)}
+                  onClick={() =>
+                    openModal("delete-products", {
+                      ids: listElements
+                    })
+                  }
                 >
                   <DeleteIcon />
                 </IconButton>

src/categories/views/CategoryList/CategoryList.tsx

@@ -19,6 +19,7 @@ import { maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import { getSortParams } from "@saleor/utils/sort";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import { CategoryListPage } from "../../components/CategoryListPage/CategoryListPage";
 import { useCategoryBulkDeleteMutation } from "../../mutations";
 import { useRootCategoriesQuery } from "../../queries";
@@ -26,10 +27,10 @@ import { CategoryBulkDelete } from "../../types/CategoryBulkDelete";
 import {
   categoryAddUrl,
   categoryListUrl,
-  CategoryListUrlDialog,
   CategoryListUrlFilters,
   CategoryListUrlQueryParams,
-  categoryUrl
+  categoryUrl,
+  CategoryListUrlDialog
 } from "../../urls";
 import {
   areFiltersApplied,
@@ -91,24 +92,10 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
     );
   };
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    CategoryListUrlDialog,
-      categoryListUrl({
+    CategoryListUrlQueryParams
-        ...params,
+  >(navigate, categoryListUrl, params);
-        action: undefined,
-        ids: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: CategoryListUrlDialog, ids?: string[]) =>
-    navigate(
-      categoryListUrl({
-        ...params,
-        action,
-        ids
-      })
-    );
 
   const handleTabChange = (tab: number) => {
     reset();
@@ -187,13 +174,9 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
           <IconButton
             color="primary"
             onClick={() =>
-              navigate(
+              openModal("delete", {
-                categoryListUrl({
-                  ...params,
-                  action: "delete",
                 ids: listElements
               })
-              )
             }
           >
             <DeleteIcon />

src/collections/views/CollectionDetails.tsx

@@ -15,6 +15,7 @@ import usePaginator, {
 } from "@saleor/hooks/usePaginator";
 import { commonMessages } from "@saleor/intl";
 import useProductSearch from "@saleor/searches/useProductSearch";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import { getMutationState, maybe } from "../../misc";
 import { productUrl } from "../../products/urls";
 import { CollectionInput } from "../../types/globalTypes";
@@ -30,8 +31,8 @@ import { UnassignCollectionProduct } from "../types/UnassignCollectionProduct";
 import {
   collectionListUrl,
   collectionUrl,
-  CollectionUrlDialog,
+  CollectionUrlQueryParams,
-  CollectionUrlQueryParams
+  CollectionUrlDialog
 } from "../urls";
 
 interface CollectionDetailsProps {
@@ -54,22 +55,10 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    CollectionUrlDialog,
-      collectionUrl(id, {
+    CollectionUrlQueryParams
-        ...params,
+  >(navigate, params => collectionUrl(id, params), params);
-        action: undefined
-      }),
-      true
-    );
-  const openModal = (action: CollectionUrlDialog) =>
-    navigate(
-      collectionUrl(id, {
-        ...params,
-        action
-      }),
-      false
-    );
 
   const paginationState = createPaginationState(PAGINATE_BY, params);
 
@@ -243,12 +232,9 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
                       <Button
                         color="primary"
                         onClick={() =>
-                          navigate(
+                          openModal("unassign", {
-                            collectionUrl(id, {
-                              action: "unassign",
                             ids: listElements
                           })
-                          )
                         }
                       >
                         <FormattedMessage

src/collections/views/CollectionList/CollectionList.tsx

@@ -22,6 +22,7 @@ import { maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import { getSortParams } from "@saleor/utils/sort";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import CollectionListPage from "../../components/CollectionListPage/CollectionListPage";
 import {
   TypedCollectionBulkDelete,
@@ -33,10 +34,10 @@ import { CollectionBulkPublish } from "../../types/CollectionBulkPublish";
 import {
   collectionAddUrl,
   collectionListUrl,
-  CollectionListUrlDialog,
   CollectionListUrlFilters,
   CollectionListUrlQueryParams,
-  collectionUrl
+  collectionUrl,
+  CollectionListUrlDialog
 } from "../../urls";
 import {
   areFiltersApplied,
@@ -98,24 +99,10 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
     );
   };
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    CollectionListUrlDialog,
-      collectionListUrl({
+    CollectionListUrlQueryParams
-        ...params,
+  >(navigate, collectionListUrl, params);
-        action: undefined,
-        ids: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: CollectionListUrlDialog, ids?: string[]) =>
-    navigate(
-      collectionListUrl({
-        ...params,
-        action,
-        ids
-      })
-    );
 
   const handleTabChange = (tab: number) => {
     reset();
@@ -200,7 +187,11 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
                   <>
                     <Button
                       color="primary"
-                      onClick={() => openModal("unpublish", listElements)}
+                      onClick={() =>
+                        openModal("unpublish", {
+                          ids: listElements
+                        })
+                      }
                     >
                       <FormattedMessage
                         defaultMessage="Unpublish"
@@ -209,7 +200,11 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
                     </Button>
                     <Button
                       color="primary"
-                      onClick={() => openModal("publish", listElements)}
+                      onClick={() =>
+                        openModal("publish", {
+                          ids: listElements
+                        })
+                      }
                     >
                       <FormattedMessage
                         defaultMessage="Publish"
@@ -218,7 +213,11 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
                     </Button>
                     <IconButton
                       color="primary"
-                      onClick={() => openModal("remove", listElements)}
+                      onClick={() =>
+                        openModal("remove", {
+                          ids: listElements
+                        })
+                      }
                     >
                       <DeleteIcon />
                     </IconButton>

src/components/Navigator/modes/default/views.ts

@@ -20,7 +20,7 @@ import { siteSettingsUrl } from "@saleor/siteSettings/urls";
 import { staffListUrl } from "@saleor/staff/urls";
 import { countryListUrl } from "@saleor/taxes/urls";
 import { languageListUrl } from "@saleor/translations/urls";
-import { webhooksListUrl } from "@saleor/webhooks/urls";
+import { webhookListUrl } from "@saleor/webhooks/urls";
 import { QuickSearchActionInput } from "../../types";
 
 interface View {
@@ -115,7 +115,7 @@ function searchInViews(
     },
     {
       label: intl.formatMessage(sectionNames.webhooks),
-      url: webhooksListUrl()
+      url: webhookListUrl()
     }
   ];
 

src/configuration/index.tsx

@@ -28,7 +28,7 @@ import { siteSettingsUrl } from "@saleor/siteSettings/urls";
 import { staffListUrl } from "@saleor/staff/urls";
 import { taxSection } from "@saleor/taxes/urls";
 import { PermissionEnum } from "@saleor/types/globalTypes";
-import { webhooksListUrl } from "@saleor/webhooks/urls";
+import { webhookListUrl } from "@saleor/webhooks/urls";
 import ConfigurationPage, { MenuSection } from "./ConfigurationPage";
 
 export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
@@ -171,7 +171,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
           icon: <Webhooks fontSize="inherit" viewBox="0 0 44 44" />,
           permission: PermissionEnum.MANAGE_WEBHOOKS,
           title: intl.formatMessage(sectionNames.webhooks),
-          url: webhooksListUrl()
+          url: webhookListUrl()
         }
       ]
     }

src/customers/views/CustomerAddresses.tsx

@@ -8,6 +8,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import useShop from "@saleor/hooks/useShop";
 import { commonMessages } from "@saleor/intl";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import { maybe } from "../../misc";
 import CustomerAddressDialog from "../components/CustomerAddressDialog";
 import CustomerAddressListPage from "../components/CustomerAddressListPage";
@@ -24,9 +25,9 @@ import { SetCustomerDefaultAddress } from "../types/SetCustomerDefaultAddress";
 import { UpdateCustomerAddress } from "../types/UpdateCustomerAddress";
 import {
   customerAddressesUrl,
-  CustomerAddressesUrlDialog,
   CustomerAddressesUrlQueryParams,
-  customerUrl
+  customerUrl,
+  CustomerAddressesUrlDialog
 } from "../urls";
 
 interface CustomerAddressesProps {
@@ -43,9 +44,10 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
   const shop = useShop();
   const intl = useIntl();
 
-  const closeModal = () => navigate(customerAddressesUrl(id), true);
+  const [openModal, closeModal] = createDialogActionHandlers<
-  const openModal = (action: CustomerAddressesUrlDialog, addressId?: string) =>
+    CustomerAddressesUrlDialog,
-    navigate(customerAddressesUrl(id, { action, id: addressId }));
+    CustomerAddressesUrlQueryParams
+  >(navigate, params => customerAddressesUrl(id, params), params);
 
   const handleSetAddressAsDefault = (data: SetCustomerDefaultAddress) => {
     if (data.addressSetDefault.errors.length === 0) {
@@ -116,9 +118,15 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
                               disabled={customerData.loading}
                               onAdd={() => openModal("add")}
                               onBack={() => navigate(customerUrl(id))}
-                              onEdit={addressId => openModal("edit", addressId)}
+                              onEdit={id =>
-                              onRemove={addressId =>
+                                openModal("edit", {
-                                openModal("remove", addressId)
+                                  id
+                                })
+                              }
+                              onRemove={id =>
+                                openModal("remove", {
+                                  id
+                                })
                               }
                               onSetAsDefault={(addressId, type) =>
                                 setCustomerDefaultAddress({

src/customers/views/CustomerList/CustomerList.tsx

@@ -21,6 +21,7 @@ import { maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import { getSortParams } from "@saleor/utils/sort";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import CustomerListPage from "../../components/CustomerListPage";
 import { TypedBulkRemoveCustomers } from "../../mutations";
 import { useCustomerListQuery } from "../../queries";
@@ -28,10 +29,10 @@ import { BulkRemoveCustomers } from "../../types/BulkRemoveCustomers";
 import {
   customerAddUrl,
   customerListUrl,
-  CustomerListUrlDialog,
   CustomerListUrlFilters,
   CustomerListUrlQueryParams,
-  customerUrl
+  customerUrl,
+  CustomerListUrlDialog
 } from "../../urls";
 import {
   areFiltersApplied,
@@ -93,24 +94,10 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
     );
   };
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    CustomerListUrlDialog,
-      customerListUrl({
+    CustomerListUrlQueryParams
-        ...params,
+  >(navigate, customerListUrl, params);
-        action: undefined,
-        ids: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: CustomerListUrlDialog, ids?: string[]) =>
-    navigate(
-      customerListUrl({
-        ...params,
-        action,
-        ids
-      })
-    );
 
   const handleTabChange = (tab: number) => {
     reset();
@@ -179,12 +166,9 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
               <IconButton
                 color="primary"
                 onClick={() =>
-                  navigate(
+                  openModal("remove", {
-                    customerListUrl({
-                      action: "remove",
                     ids: listElements
                   })
-                  )
                 }
               >
                 <DeleteIcon />

src/discounts/views/SaleDetails.tsx

@@ -20,6 +20,7 @@ import { commonMessages, sectionNames } from "@saleor/intl";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
 import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import { categoryUrl } from "../../categories/urls";
 import { collectionUrl } from "../../collections/urls";
 import { decimal, joinDateTime, maybe } from "../../misc";
@@ -42,8 +43,8 @@ import { SaleUpdate } from "../types/SaleUpdate";
 import {
   saleListUrl,
   saleUrl,
-  SaleUrlDialog,
+  SaleUrlQueryParams,
-  SaleUrlQueryParams
+  SaleUrlDialog
 } from "../urls";
 
 interface SaleDetailsProps {
@@ -114,24 +115,10 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
     }
   };
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    SaleUrlDialog,
-      saleUrl(id, {
+    SaleUrlQueryParams
-        ...params,
+  >(navigate, params => saleUrl(id, params), params);
-        action: undefined,
-        ids: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: SaleUrlDialog, ids?: string[]) =>
-    navigate(
-      saleUrl(id, {
-        ...params,
-        action,
-        ids
-      })
-    );
 
   const handleCatalogueAdd = (data: SaleCataloguesAdd) => {
     if (data.saleCataloguesAdd.errors.length === 0) {
@@ -285,7 +272,9 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                                 <Button
                                   color="primary"
                                   onClick={() =>
-                                    openModal("unassign-category", listElements)
+                                    openModal("unassign-category", {
+                                      ids: listElements
+                                    })
                                   }
                                 >
                                   <FormattedMessage
@@ -299,10 +288,9 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                                 <Button
                                   color="primary"
                                   onClick={() =>
-                                    openModal(
+                                    openModal("unassign-collection", {
-                                      "unassign-collection",
+                                      ids: listElements
-                                      listElements
+                                    })
-                                    )
                                   }
                                 >
                                   <FormattedMessage
@@ -316,7 +304,9 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                                 <Button
                                   color="primary"
                                   onClick={() =>
-                                    openModal("unassign-product", listElements)
+                                    openModal("unassign-product", {
+                                      ids: listElements
+                                    })
                                   }
                                 >
                                   <FormattedMessage

src/discounts/views/SaleList/SaleList.tsx

@@ -23,17 +23,18 @@ import { maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import { getSortParams } from "@saleor/utils/sort";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import SaleListPage from "../../components/SaleListPage";
 import { TypedSaleBulkDelete } from "../../mutations";
 import { useSaleListQuery } from "../../queries";
 import { SaleBulkDelete } from "../../types/SaleBulkDelete";
 import {
   saleAddUrl,
-  saleListUrl,
-  SaleListUrlDialog,
   SaleListUrlFilters,
   SaleListUrlQueryParams,
-  saleUrl
+  saleUrl,
+  saleListUrl,
+  SaleListUrlDialog
 } from "../../urls";
 import {
   areFiltersApplied,
@@ -96,24 +97,10 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
     );
   };
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    SaleListUrlDialog,
-      saleListUrl({
+    SaleListUrlQueryParams
-        ...params,
+  >(navigate, saleListUrl, params);
-        action: undefined,
-        ids: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: SaleListUrlDialog, ids?: string[]) =>
-    navigate(
-      saleListUrl({
-        ...params,
-        action,
-        ids
-      })
-    );
 
   const handleTabChange = (tab: number) => {
     reset();
@@ -199,12 +186,9 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
                 <IconButton
                   color="primary"
                   onClick={() =>
-                    navigate(
+                    openModal("remove", {
-                      saleListUrl({
-                        action: "remove",
                       ids: listElements
                     })
-                    )
                   }
                 >
                   <DeleteIcon />

src/discounts/views/VoucherDetails.tsx

@@ -20,6 +20,7 @@ import { commonMessages, sectionNames } from "@saleor/intl";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
 import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import { categoryUrl } from "../../categories/urls";
 import { collectionUrl } from "../../collections/urls";
 import { decimal, joinDateTime, maybe } from "../../misc";
@@ -47,8 +48,8 @@ import { VoucherUpdate } from "../types/VoucherUpdate";
 import {
   voucherListUrl,
   voucherUrl,
-  VoucherUrlDialog,
+  VoucherUrlQueryParams,
-  VoucherUrlQueryParams
+  VoucherUrlDialog
 } from "../urls";
 
 interface VoucherDetailsProps {
@@ -117,23 +118,10 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
     }
   };
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    VoucherUrlDialog,
-      voucherUrl(id, {
+    VoucherUrlQueryParams
-        ...params,
+  >(navigate, params => voucherUrl(id, params), params);
-        action: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: VoucherUrlDialog, ids?: string[]) =>
-    navigate(
-      voucherUrl(id, {
-        ...params,
-        action,
-        ids
-      })
-    );
 
   const handleCatalogueAdd = (data: VoucherCataloguesAdd) => {
     if (data.voucherCataloguesAdd.errors.length === 0) {
@@ -360,7 +348,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                                 <Button
                                   color="primary"
                                   onClick={() =>
-                                    openModal("unassign-category", listElements)
+                                    openModal("unassign-category", {
+                                      ids: listElements
+                                    })
                                   }
                                 >
                                   <FormattedMessage
@@ -374,10 +364,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                                 <Button
                                   color="primary"
                                   onClick={() =>
-                                    openModal(
+                                    openModal("unassign-collection", {
-                                      "unassign-collection",
+                                      ids: listElements
-                                      listElements
+                                    })
-                                    )
                                   }
                                 >
                                   <FormattedMessage
@@ -391,7 +380,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                                 <Button
                                   color="primary"
                                   onClick={() =>
-                                    openModal("unassign-product", listElements)
+                                    openModal("unassign-product", {
+                                      ids: listElements
+                                    })
                                   }
                                 >
                                   <FormattedMessage

src/discounts/views/VoucherList/VoucherList.tsx

@@ -23,6 +23,7 @@ import { maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import { getSortParams } from "@saleor/utils/sort";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import VoucherListPage from "../../components/VoucherListPage";
 import { TypedVoucherBulkDelete } from "../../mutations";
 import { useVoucherListQuery } from "../../queries";
@@ -30,10 +31,10 @@ import { VoucherBulkDelete } from "../../types/VoucherBulkDelete";
 import {
   voucherAddUrl,
   voucherListUrl,
-  VoucherListUrlDialog,
   VoucherListUrlFilters,
   VoucherListUrlQueryParams,
-  voucherUrl
+  voucherUrl,
+  VoucherListUrlDialog
 } from "../../urls";
 import {
   areFiltersApplied,
@@ -96,24 +97,10 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
     );
   };
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    VoucherListUrlDialog,
-      voucherListUrl({
+    VoucherListUrlQueryParams
-        ...params,
+  >(navigate, voucherListUrl, params);
-        action: undefined,
-        ids: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: VoucherListUrlDialog, ids?: string[]) =>
-    navigate(
-      voucherListUrl({
-        ...params,
-        action,
-        ids
-      })
-    );
 
   const handleTabChange = (tab: number) => {
     reset();
@@ -199,12 +186,9 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
                 <IconButton
                   color="primary"
                   onClick={() =>
-                    navigate(
+                    openModal("remove", {
-                      voucherListUrl({
-                        action: "remove",
                       ids: listElements
                     })
-                    )
                   }
                 >
                   <DeleteIcon />

src/orders/views/OrderDetails/index.tsx

@@ -5,6 +5,7 @@ import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useUser from "@saleor/hooks/useUser";
 import useCustomerSearch from "@saleor/searches/useCustomerSearch";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import { customerUrl } from "../../../customers/urls";
 import { getMutationState, maybe, transformAddressToForm } from "../../../misc";
 import { productUrl } from "../../../products/urls";
@@ -31,8 +32,8 @@ import { OrderDetails_order } from "../../types/OrderDetails";
 import {
   orderListUrl,
   orderUrl,
-  OrderUrlDialog,
+  OrderUrlQueryParams,
-  OrderUrlQueryParams
+  OrderUrlDialog
 } from "../../urls";
 import { OrderDetailsMessages } from "./OrderDetailsMessages";
 
@@ -97,13 +98,11 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
     >
       {({ data, loading }) => {
         const order = maybe(() => data.order);
-        const closeModal = () => navigate(orderUrl(id), true);
+        const [openModal, closeModal] = createDialogActionHandlers<
-        const openModal = (action: OrderUrlDialog) =>
+          OrderUrlDialog,
-          navigate(
+          OrderUrlQueryParams
-            orderUrl(id, {
+        >(navigate, params => orderUrl(id, params), params);
-              action
+
-            })
-          );
         return (
           <OrderDetailsMessages>
             {orderMessages => (

src/orders/views/OrderDraftList/OrderDraftList.tsx

@@ -20,6 +20,7 @@ import { maybe } 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 OrderDraftListPage from "../../components/OrderDraftListPage";
 import {
   TypedOrderDraftBulkCancelMutation,
@@ -30,10 +31,10 @@ import { OrderDraftBulkCancel } from "../../types/OrderDraftBulkCancel";
 import { OrderDraftCreate } from "../../types/OrderDraftCreate";
 import {
   orderDraftListUrl,
-  OrderDraftListUrlDialog,
   OrderDraftListUrlFilters,
   OrderDraftListUrlQueryParams,
-  orderUrl
+  orderUrl,
+  OrderDraftListUrlDialog
 } from "../../urls";
 import {
   areFiltersApplied,
@@ -94,24 +95,10 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
     );
   };
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    OrderDraftListUrlDialog,
-      orderDraftListUrl({
+    OrderDraftListUrlQueryParams
-        ...params,
+  >(navigate, orderDraftListUrl, params);
-        action: undefined,
-        ids: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: OrderDraftListUrlDialog, ids?: string[]) =>
-    navigate(
-      orderDraftListUrl({
-        ...params,
-        action,
-        ids
-      })
-    );
 
   const handleTabChange = (tab: number) => {
     reset();
@@ -211,12 +198,9 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
                 <IconButton
                   color="primary"
                   onClick={() =>
-                    navigate(
+                    openModal("remove", {
-                      orderDraftListUrl({
-                        action: "remove",
                       ids: listElements
                     })
-                    )
                   }
                 >
                   <DeleteIcon />

src/orders/views/OrderList/OrderList.tsx

@@ -19,6 +19,7 @@ import { maybe } 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 OrderBulkCancelDialog from "../../components/OrderBulkCancelDialog";
 import OrderListPage from "../../components/OrderListPage/OrderListPage";
 import {
@@ -30,10 +31,10 @@ import { OrderBulkCancel } from "../../types/OrderBulkCancel";
 import { OrderDraftCreate } from "../../types/OrderDraftCreate";
 import {
   orderListUrl,
-  OrderListUrlDialog,
   OrderListUrlFilters,
   OrderListUrlQueryParams,
-  orderUrl
+  orderUrl,
+  OrderListUrlDialog
 } from "../../urls";
 import {
   areFiltersApplied,
@@ -87,16 +88,6 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
         : 0
       : parseInt(params.activeTab, 0);
 
-  const closeModal = () =>
-    navigate(
-      orderListUrl({
-        ...params,
-        action: undefined,
-        ids: undefined
-      }),
-      true
-    );
-
   const changeFilters = (filters: OrderListUrlFilters) => {
     reset();
     navigate(orderListUrl(filters));
@@ -113,14 +104,10 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
     );
   };
 
-  const openModal = (action: OrderListUrlDialog, ids?: string[]) =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    OrderListUrlDialog,
-      orderListUrl({
+    OrderListUrlQueryParams
-        ...params,
+  >(navigate, orderListUrl, params);
-        action,
-        ids
-      })
-    );
 
   const handleTabChange = (tab: number) => {
     reset();
@@ -222,7 +209,11 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
               toolbar={
                 <Button
                   color="primary"
-                  onClick={() => openModal("cancel", listElements)}
+                  onClick={() =>
+                    openModal("cancel", {
+                      ids: listElements
+                    })
+                  }
                 >
                   <FormattedMessage
                     defaultMessage="Cancel"

src/pages/views/PageList/PageList.tsx

@@ -18,6 +18,7 @@ import { maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import { getSortParams } from "@saleor/utils/sort";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import PageListPage from "../../components/PageListPage/PageListPage";
 import { TypedPageBulkPublish, TypedPageBulkRemove } from "../../mutations";
 import { usePageListQuery } from "../../queries";
@@ -67,24 +68,10 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
     params
   );
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    PageListUrlDialog,
-      pageListUrl({
+    PageListUrlQueryParams
-        ...params,
+  >(navigate, pageListUrl, params);
-        action: undefined,
-        ids: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: PageListUrlDialog, ids: string[]) =>
-    navigate(
-      pageListUrl({
-        ...params,
-        action,
-        ids
-      })
-    );
 
   const handlePageBulkPublish = (data: PageBulkPublish) => {
     if (data.pageBulkPublish.errors.length === 0) {
@@ -138,7 +125,11 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
                   <>
                     <Button
                       color="primary"
-                      onClick={() => openModal("unpublish", listElements)}
+                      onClick={() =>
+                        openModal("unpublish", {
+                          ids: listElements
+                        })
+                      }
                     >
                       <FormattedMessage
                         defaultMessage="Unpublish"
@@ -147,7 +138,11 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
                     </Button>
                     <Button
                       color="primary"
-                      onClick={() => openModal("publish", listElements)}
+                      onClick={() =>
+                        openModal("publish", {
+                          ids: listElements
+                        })
+                      }
                     >
                       <FormattedMessage
                         defaultMessage="Publish"
@@ -156,7 +151,11 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
                     </Button>
                     <IconButton
                       color="primary"
-                      onClick={() => openModal("remove", listElements)}
+                      onClick={() =>
+                        openModal("remove", {
+                          ids: listElements
+                        })
+                      }
                     >
                       <DeleteIcon />
                     </IconButton>

src/plugins/urls.ts

@@ -19,8 +19,6 @@ export const pluginListUrl = (params?: PluginListUrlQueryParams) =>
 
 export const pluginPath = (id: string) => urlJoin(pluginSection, id);
 export type PluginUrlDialog = "clear" | "edit";
-export type PluginUrlQueryParams = Dialog<PluginUrlDialog> & {
+export type PluginUrlQueryParams = Dialog<PluginUrlDialog> & SingleAction;
-  field?: string;
+export const pluginUrl = (id: string, params?: PluginUrlQueryParams) =>
-};
-export const pluginsUrl = (id: string, params?: PluginUrlQueryParams) =>
   pluginPath(encodeURIComponent(id)) + "?" + stringifyQs(params);

src/plugins/views/PluginList/PluginList.tsx

@@ -12,11 +12,7 @@ import { getSortParams } from "@saleor/utils/sort";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
 import PluginsListPage from "../../components/PluginsListPage/PluginsListPage";
 import { usePluginsListQuery } from "../../queries";
-import {
+import { PluginListUrlQueryParams, pluginListUrl, pluginUrl } from "../../urls";
-  PluginListUrlQueryParams,
-  pluginListUrl,
-  pluginsUrl
-} from "../../urls";
 import { getSortQueryVariables } from "./sort";
 
 interface PluginsListProps {
@@ -65,7 +61,7 @@ export const PluginsList: React.FC<PluginsListProps> = ({ params }) => {
         onPreviousPage={loadPreviousPage}
         onSort={handleSort}
         onUpdateListSettings={updateListSettings}
-        onRowClick={id => () => navigate(pluginsUrl(id))}
+        onRowClick={id => () => navigate(pluginUrl(id))}
       />
     </>
   );

src/plugins/views/PluginsDetails.tsx

@@ -8,6 +8,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
 import { ConfigurationItemInput } from "@saleor/types/globalTypes";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import { maybe } from "../../misc";
 import PluginsDetailsPage from "../components/PluginsDetailsPage";
 import PluginSecretFieldDialog from "../components/PluginSecretFieldDialog";
@@ -17,7 +18,7 @@ import { Plugin_plugin_configuration } from "../types/Plugin";
 import { PluginUpdate } from "../types/PluginUpdate";
 import {
   pluginListUrl,
-  pluginsUrl,
+  pluginUrl,
   PluginUrlQueryParams,
   PluginUrlDialog
 } from "../urls";
@@ -52,24 +53,10 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
   const notify = useNotifier();
   const intl = useIntl();
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    PluginUrlDialog,
-      pluginsUrl(id, {
+    PluginUrlQueryParams
-        ...params,
+  >(navigate, params => pluginUrl(id, params), params);
-        action: undefined,
-        field: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: PluginUrlDialog, field?: string) =>
-    navigate(
-      pluginsUrl(id, {
-        ...params,
-        action,
-        field
-      })
-    );
 
   const handleUpdate = (data: PluginUpdate) => {
     if (data.pluginUpdate.errors.length === 0) {
@@ -97,7 +84,7 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
                   input: {
                     configuration: [
                       {
-                        name: params.field,
+                        name: params.id,
                         value
                       }
                     ]
@@ -118,8 +105,16 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
                   }
                   plugin={maybe(() => pluginDetails.data.plugin)}
                   onBack={() => navigate(pluginListUrl())}
-                  onClear={field => openModal("clear", field)}
+                  onClear={id =>
-                  onEdit={field => openModal("edit", field)}
+                    openModal("clear", {
+                      id
+                    })
+                  }
+                  onEdit={id =>
+                    openModal("edit", {
+                      id
+                    })
+                  }
                   onSubmit={formData =>
                     pluginUpdate({
                       variables: {
@@ -142,7 +137,7 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
                         !!params.action ? pluginUpdateOpts.status : "default"
                       }
                       onClose={closeModal}
-                      open={params.action === "clear" && !!params.field}
+                      open={params.action === "clear" && !!params.id}
                       title={intl.formatMessage({
                         defaultMessage: "Authorization Field Delete",
                         description: "header"
@@ -159,12 +154,12 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
                       }
                       field={maybe(() =>
                         pluginDetails.data.plugin.configuration.find(
-                          field => field.name === params.field
+                          field => field.name === params.id
                         )
                       )}
                       onClose={closeModal}
                       onConfirm={formData => handleFieldUpdate(formData.value)}
-                      open={params.action === "edit" && !!params.field}
+                      open={params.action === "edit" && !!params.id}
                     />
                   </>
                 )}

src/productTypes/views/ProductTypeList/ProductTypeList.tsx

@@ -20,6 +20,7 @@ import { commonMessages } from "@saleor/intl";
 import { ListViews } from "@saleor/types";
 import { getSortParams } from "@saleor/utils/sort";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import { configurationMenuUrl } from "../../../configuration";
 import { maybe } from "../../../misc";
 import ProductTypeListPage from "../../components/ProductTypeListPage";
@@ -92,24 +93,10 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
     );
   };
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    ProductTypeListUrlDialog,
-      productTypeListUrl({
+    ProductTypeListUrlQueryParams
-        ...params,
+  >(navigate, productTypeListUrl, params);
-        action: undefined,
-        ids: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: ProductTypeListUrlDialog, ids?: string[]) =>
-    navigate(
-      productTypeListUrl({
-        ...params,
-        action,
-        ids
-      })
-    );
 
   const handleTabChange = (tab: number) => {
     reset();
@@ -200,12 +187,9 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
                 <IconButton
                   color="primary"
                   onClick={() =>
-                    navigate(
+                    openModal("remove", {
-                      productTypeListUrl({
-                        action: "remove",
                       ids: listElements
                     })
-                    )
                   }
                 >
                   <DeleteIcon />

src/products/urls.ts

@@ -52,9 +52,8 @@ export const productListUrl = (params?: ProductListUrlQueryParams): string =>
   productListPath + "?" + stringifyQs(params);
 
 export const productPath = (id: string) => urlJoin(productSection + id);
-export type ProductUrlDialog = "remove";
+export type ProductUrlDialog = "create-variants" | "remove" | "remove-variants";
-export type ProductUrlQueryParams = BulkAction &
+export type ProductUrlQueryParams = BulkAction & Dialog<ProductUrlDialog>;
-  Dialog<"create-variants" | "remove" | "remove-variants">;
 export const productUrl = (id: string, params?: ProductUrlQueryParams) =>
   productPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
 

src/products/views/ProductList/ProductList.tsx

@@ -25,6 +25,7 @@ import { maybe } from "@saleor/misc";
 import { ProductListVariables } from "@saleor/products/types/ProductList";
 import { ListViews } from "@saleor/types";
 import { getSortUrlVariables } from "@saleor/utils/sort";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import ProductListPage from "../../components/ProductListPage";
 import {
   TypedProductBulkDeleteMutation,
@@ -39,11 +40,11 @@ import { productBulkPublish } from "../../types/productBulkPublish";
 import {
   productAddUrl,
   productListUrl,
-  ProductListUrlDialog,
   ProductListUrlFilters,
   ProductListUrlQueryParams,
   ProductListUrlSortField,
-  productUrl
+  productUrl,
+  ProductListUrlDialog
 } from "../../urls";
 import {
   areFiltersApplied,
@@ -97,15 +98,10 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
         : 0
       : parseInt(params.activeTab, 0);
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    ProductListUrlDialog,
-      productListUrl({
+    ProductListUrlQueryParams
-        ...params,
+  >(navigate, productListUrl, params);
-        action: undefined,
-        ids: undefined
-      }),
-      true
-    );
 
   const changeFilters = (filters: ProductListUrlFilters) => {
     reset();
@@ -123,15 +119,6 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
     );
   };
 
-  const openModal = (action: ProductListUrlDialog, ids?: string[]) =>
-    navigate(
-      productListUrl({
-        ...params,
-        action,
-        ids
-      })
-    );
-
   const handleTabChange = (tab: number) => {
     reset();
     navigate(
@@ -311,7 +298,9 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
                               <Button
                                 color="primary"
                                 onClick={() =>
-                                  openModal("unpublish", listElements)
+                                  openModal("unpublish", {
+                                    ids: listElements
+                                  })
                                 }
                               >
                                 <FormattedMessage
@@ -322,7 +311,9 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
                               <Button
                                 color="primary"
                                 onClick={() =>
-                                  openModal("publish", listElements)
+                                  openModal("publish", {
+                                    ids: listElements
+                                  })
                                 }
                               >
                                 <FormattedMessage
@@ -333,7 +324,9 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
                               <IconButton
                                 color="primary"
                                 onClick={() =>
-                                  openModal("delete", listElements)
+                                  openModal("delete", {
+                                    ids: listElements
+                                  })
                                 }
                               >
                                 <DeleteIcon />

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -17,6 +17,7 @@ import ProductVariantCreateDialog from "@saleor/products/components/ProductVaria
 import { ProductVariantBulkCreate } from "@saleor/products/types/ProductVariantBulkCreate";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
 import useCollectionSearch from "@saleor/searches/useCollectionSearch";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import { getMutationState, maybe } from "../../../misc";
 import ProductUpdatePage from "../../components/ProductUpdatePage";
 import ProductUpdateOperations from "../../containers/ProductUpdateOperations";
@@ -31,10 +32,10 @@ import {
   productImageUrl,
   productListUrl,
   productUrl,
-  ProductUrlDialog,
   ProductUrlQueryParams,
   productVariantAddUrl,
-  productVariantEditUrl
+  productVariantEditUrl,
+  ProductUrlDialog
 } from "../../urls";
 import {
   createImageReorderHandler,
@@ -70,12 +71,10 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
 
-  const openModal = (action: ProductUrlDialog) =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    ProductUrlDialog,
-      productUrl(id, {
+    ProductUrlQueryParams
-        action
+  >(navigate, params => productUrl(id, params), params);
-      })
-    );
 
   return (
     <TypedProductDetailsQuery
@@ -128,7 +127,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
           data: ProductVariantBulkCreate
         ) => {
           if (data.productVariantBulkCreate.errors.length === 0) {
-            navigate(productUrl(id), true);
+            closeModal();
             refetch();
           }
         };
@@ -137,20 +136,12 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
           data: ProductVariantBulkDelete
         ) => {
           if (data.productVariantBulkDelete.errors.length === 0) {
-            navigate(productUrl(id), true);
+            closeModal();
             reset();
             refetch();
           }
         };
 
-        const handleVariantCreatorOpen = () =>
-          navigate(
-            productUrl(id, {
-              ...params,
-              action: "create-variants"
-            })
-          );
-
         const product = data ? data.product : undefined;
         return (
           <ProductUpdateOperations
@@ -248,7 +239,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
                     onImageReorder={handleImageReorder}
                     onSubmit={handleSubmit}
                     onVariantAdd={handleVariantAdd}
-                    onVariantsAdd={handleVariantCreatorOpen}
+                    onVariantsAdd={() => openModal("create-variants")}
                     onVariantShow={variantId => () =>
                       navigate(productVariantEditUrl(product.id, variantId))}
                     onImageUpload={handleImageUpload}
@@ -258,12 +249,9 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
                       <IconButton
                         color="primary"
                         onClick={() =>
-                          navigate(
+                          openModal("remove-variants", {
-                            productUrl(id, {
-                              action: "remove-variants",
                             ids: listElements
                           })
-                          )
                         }
                       >
                         <DeleteIcon />
@@ -292,7 +280,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
                   />
                   <ActionDialog
                     open={params.action === "remove"}
-                    onClose={() => navigate(productUrl(id), true)}
+                    onClose={closeModal}
                     confirmButtonState={deleteProduct.opts.status}
                     onConfirm={() => deleteProduct.mutate({ id })}
                     variant="delete"
@@ -313,7 +301,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
                   </ActionDialog>
                   <ActionDialog
                     open={params.action === "remove-variants"}
-                    onClose={() => navigate(productUrl(id), true)}
+                    onClose={closeModal}
                     confirmButtonState={bulkProductVariantDelete.opts.status}
                     onConfirm={() =>
                       bulkProductVariantDelete.mutate({
@@ -355,14 +343,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
                       []
                     )}
                     currencySymbol={maybe(() => shop.defaultCurrency)}
-                    onClose={() =>
+                    onClose={closeModal}
-                      navigate(
-                        productUrl(id, {
-                          ...params,
-                          action: undefined
-                        })
-                      )
-                    }
                     onSubmit={inputs =>
                       bulkProductVariantCreate.mutate({
                         id,

src/services/views/ServiceDetails/ServiceDetails.tsx

@@ -21,6 +21,7 @@ import { ServiceDelete } from "@saleor/services/types/ServiceDelete";
 import { ServiceTokenCreate } from "@saleor/services/types/ServiceTokenCreate";
 import { ServiceTokenDelete } from "@saleor/services/types/ServiceTokenDelete";
 import { ServiceUpdate } from "@saleor/services/types/ServiceUpdate";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import ServiceDetailsPage, {
   ServiceDetailsPageFormData
 } from "../../components/ServiceDetailsPage";
@@ -52,24 +53,10 @@ export const ServiceDetails: React.FC<OrderListProps> = ({
 
   React.useEffect(() => onTokenClose, []);
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    ServiceUrlDialog,
-      serviceUrl(id, {
+    ServiceUrlQueryParams
-        ...params,
+  >(navigate, params => serviceUrl(id, params), params);
-        action: undefined,
-        id: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: ServiceUrlDialog, tokenId?: string) =>
-    navigate(
-      serviceUrl(id, {
-        ...params,
-        action,
-        id: tokenId
-      })
-    );
 
   const onServiceUpdate = (data: ServiceUpdate) => {
     if (maybe(() => data.serviceAccountUpdate.errors.length === 0)) {
@@ -170,7 +157,11 @@ export const ServiceDetails: React.FC<OrderListProps> = ({
                               <ServiceDetailsPage
                                 apiUri={API_URI}
                                 disabled={loading}
-                                errors={[]}
+                                errors={maybe(
+                                  () =>
+                                    updateServiceOpts.data.serviceAccountUpdate
+                                      .errors
+                                )}
                                 token={token}
                                 onApiUriClick={() => open(API_URI, "blank")}
                                 onBack={handleBack}
@@ -179,7 +170,9 @@ export const ServiceDetails: React.FC<OrderListProps> = ({
                                 onTokenClose={onTokenClose}
                                 onTokenCreate={() => openModal("create-token")}
                                 onTokenDelete={id =>
-                                  openModal("remove-token", id)
+                                  openModal("remove-token", {
+                                    id
+                                  })
                                 }
                                 permissions={maybe(() => shop.permissions)}
                                 service={maybe(() => data.serviceAccount)}

src/services/views/ServiceList/ServiceList.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-
 import useListSettings from "@saleor/hooks/useListSettings";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
@@ -20,6 +19,7 @@ import { ServiceDelete } from "@saleor/services/types/ServiceDelete";
 import { ListViews } from "@saleor/types";
 import { getSortParams } from "@saleor/utils/sort";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import ServiceDeleteDialog from "../../components/ServiceDeleteDialog";
 import ServiceListPage from "../../components/ServiceListPage";
 import { useServiceListQuery } from "../../queries";
@@ -86,24 +86,10 @@ export const ServiceList: React.FC<ServiceListProps> = ({ params }) => {
       })
     );
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    ServiceListUrlDialog,
-      serviceListUrl({
+    ServiceListUrlQueryParams
-        ...params,
+  >(navigate, serviceListUrl, params);
-        action: undefined,
-        id: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: ServiceListUrlDialog, id?: string) =>
-    navigate(
-      serviceListUrl({
-        ...params,
-        action,
-        id
-      })
-    );
 
   const handleTabChange = (tab: number) => {
     navigate(
@@ -131,14 +117,7 @@ export const ServiceList: React.FC<ServiceListProps> = ({ params }) => {
   );
 
   const handleCreate = () => navigate(serviceAddUrl);
-  const handleRemove = (id: string) =>
+
-    navigate(
-      serviceListUrl({
-        ...params,
-        action: "remove",
-        id
-      })
-    );
   const onRemove = (data: ServiceDelete) => {
     if (data.serviceAccountDelete.errors.length === 0) {
       notify({
@@ -185,7 +164,11 @@ export const ServiceList: React.FC<ServiceListProps> = ({ params }) => {
               onPreviousPage={loadPreviousPage}
               onUpdateListSettings={updateListSettings}
               onRowClick={id => () => navigate(serviceUrl(id))}
-              onRemove={handleRemove}
+              onRemove={id =>
+                openModal("remove", {
+                  id
+                })
+              }
               onSort={handleSort}
             />
             <ServiceDeleteDialog

src/staff/views/StaffList/StaffList.tsx

@@ -22,6 +22,7 @@ import { maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import { getSortParams } from "@saleor/utils/sort";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import StaffAddMemberDialog, {
   FormData as AddStaffMemberForm
 } from "../../components/StaffAddMemberDialog";
@@ -92,24 +93,10 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
       })
     );
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    StaffListUrlDialog,
-      staffListUrl({
+    StaffListUrlQueryParams
-        ...params,
+  >(navigate, staffListUrl, params);
-        action: undefined,
-        ids: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: StaffListUrlDialog, ids?: string[]) =>
-    navigate(
-      staffListUrl({
-        ...params,
-        action,
-        ids
-      })
-    );
 
   const handleTabChange = (tab: number) => {
     navigate(
@@ -188,13 +175,7 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
               staffMembers={maybe(() =>
                 data.staffUsers.edges.map(edge => edge.node)
               )}
-              onAdd={() =>
+              onAdd={() => openModal("add")}
-                navigate(
-                  staffListUrl({
-                    action: "add"
-                  })
-                )
-              }
               onBack={() => navigate(configurationMenuUrl)}
               onNextPage={loadNextPage}
               onPreviousPage={loadPreviousPage}

src/utils/handlers/dialogActionHandlers.ts

@@ -0,0 +1,40 @@
+import { UseNavigatorResult } from "@saleor/hooks/useNavigator";
+import { Dialog, BulkAction, SingleAction } from "@saleor/types";
+
+type Url<T extends Dialog<any>> = (params: T) => string;
+type CreateCloseModal<
+  TAction extends string,
+  TParams extends Dialog<TAction>
+> = [(action: TAction, newParams?: TParams) => void, () => void];
+
+function createDialogActionHandlers<
+  TAction extends string,
+  TParams extends Dialog<TAction> & BulkAction & SingleAction
+>(
+  navigate: UseNavigatorResult,
+  url: Url<TParams>,
+  params: TParams
+): CreateCloseModal<TAction, TParams> {
+  const close = () =>
+    navigate(
+      url({
+        ...params,
+        action: undefined,
+        id: undefined,
+        ids: undefined
+      }),
+      true
+    );
+  const open = (action: TAction, newParams?: TParams) =>
+    navigate(
+      url({
+        ...params,
+        ...newParams,
+        action
+      })
+    );
+
+  return [open, close];
+}
+
+export default createDialogActionHandlers;

src/webhooks/index.tsx

@@ -7,10 +7,11 @@ import { sectionNames } from "@saleor/intl";
 import { asSortParams } from "@saleor/utils/sort";
 import { WindowTitle } from "../components/WindowTitle";
 import {
-  webhooksAddUrl,
+  webhookAddUrl,
-  webhooksListPath,
+  webhookListPath,
   WebhookListUrlQueryParams,
-  webhooksPath,
+  webhookPath,
+  WebhookUrlQueryParams,
   WebhookListUrlSortField
 } from "./urls";
 import WebhookCreate from "./views/WebhooksCreate";
@@ -29,7 +30,7 @@ const WebhookList: React.FC<RouteComponentProps<any>> = ({ location }) => {
 
 const WebhookDetails: React.FC<RouteComponentProps<any>> = ({ match }) => {
   const qs = parseQs(location.search.substr(1));
-  const params: WebhookListUrlQueryParams = qs;
+  const params: WebhookUrlQueryParams = qs;
 
   return (
     <WebhooksDetails id={decodeURIComponent(match.params.id)} params={params} />
@@ -42,9 +43,9 @@ const Component = () => {
     <>
       <WindowTitle title={intl.formatMessage(sectionNames.webhooks)} />
       <Switch>
-        <Route exact path={webhooksListPath} component={WebhookList} />
+        <Route exact path={webhookListPath} component={WebhookList} />
-        <Route exact path={webhooksAddUrl} component={WebhookCreate} />
+        <Route exact path={webhookAddUrl} component={WebhookCreate} />
-        <Route path={webhooksPath(":id")} component={WebhookDetails} />
+        <Route path={webhookPath(":id")} component={WebhookDetails} />
       </Switch>
     </>
   );

src/webhooks/urls.ts

@@ -11,9 +11,9 @@ import {
   Sort
 } from "../types";
 
-export const webhooksSection = "/webhooks/";
+export const webhookSection = "/webhooks/";
 
-export const webhooksListPath = webhooksSection;
+export const webhookListPath = webhookSection;
 export enum WebhookListUrlFiltersEnum {
   query = "query"
 }
@@ -30,14 +30,14 @@ export type WebhookListUrlQueryParams = ActiveTab &
   SingleAction &
   WebhookListUrlFilters &
   WebhookListUrlSort;
-export const webhooksListUrl = (params?: WebhookListUrlQueryParams) =>
+export const webhookListUrl = (params?: WebhookListUrlQueryParams) =>
-  webhooksListPath + "?" + stringifyQs(params);
+  webhookListPath + "?" + stringifyQs(params);
 
-export const webhooksPath = (id: string) => urlJoin(webhooksSection, id);
+export const webhookPath = (id: string) => urlJoin(webhookSection, id);
 export type WebhookUrlDialog = "remove";
-export type WebhooksUrlQueryParams = Dialog<WebhookUrlDialog> & SingleAction;
+export type WebhookUrlQueryParams = Dialog<WebhookUrlDialog> & SingleAction;
-export const webhooksUrl = (id: string, params?: WebhooksUrlQueryParams) =>
+export const webhookUrl = (id: string, params?: WebhookUrlQueryParams) =>
-  webhooksPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
+  webhookPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
 
-export const webhooksAddPath = urlJoin(webhooksSection, "add");
+export const webhookAddPath = urlJoin(webhookSection, "add");
-export const webhooksAddUrl = webhooksAddPath;
+export const webhookAddUrl = webhookAddPath;

src/webhooks/views/WebhookList/WebhookList.tsx

@@ -25,10 +25,10 @@ import { useWebhooksListQuery } from "../../queries";
 import {
   WebhookListUrlDialog,
   WebhookListUrlFilters,
-  webhooksAddUrl,
+  webhookAddUrl,
-  webhooksListUrl,
+  webhookListUrl,
   WebhookListUrlQueryParams,
-  webhooksUrl
+  webhookUrl
 } from "../../urls";
 import { getSortQueryVariables } from "./sort";
 import {
@@ -78,7 +78,7 @@ export const WebhooksList: React.FC<WebhooksListProps> = ({ params }) => {
 
   const changeFilterField = (filter: WebhookListUrlFilters) =>
     navigate(
-      webhooksListUrl({
+      webhookListUrl({
         ...getActiveFilters(params),
         ...filter,
         activeTab: undefined
@@ -86,7 +86,7 @@ export const WebhooksList: React.FC<WebhooksListProps> = ({ params }) => {
     );
   const closeModal = () =>
     navigate(
-      webhooksListUrl({
+      webhookListUrl({
         ...params,
         action: undefined,
         id: undefined
@@ -96,7 +96,7 @@ export const WebhooksList: React.FC<WebhooksListProps> = ({ params }) => {
 
   const openModal = (action: WebhookListUrlDialog, id?: string) =>
     navigate(
-      webhooksListUrl({
+      webhookListUrl({
         ...params,
         action,
         id
@@ -105,7 +105,7 @@ export const WebhooksList: React.FC<WebhooksListProps> = ({ params }) => {
 
   const handleTabChange = (tab: number) => {
     navigate(
-      webhooksListUrl({
+      webhookListUrl({
         activeTab: tab.toString(),
         ...getFilterTabs()[tab - 1].data
       })
@@ -114,7 +114,7 @@ export const WebhooksList: React.FC<WebhooksListProps> = ({ params }) => {
 
   const handleTabDelete = () => {
     deleteFilterTab(currentTab);
-    navigate(webhooksListUrl());
+    navigate(webhookListUrl());
   };
 
   const handleTabSave = (data: SaveFilterTabDialogFormData) => {
@@ -127,12 +127,12 @@ export const WebhooksList: React.FC<WebhooksListProps> = ({ params }) => {
       notify({
         text: intl.formatMessage(commonMessages.savedChanges)
       });
-      navigate(webhooksListUrl());
+      navigate(webhookListUrl());
       refetch();
     }
   };
 
-  const handleSort = createSortHandler(navigate, webhooksListUrl, params);
+  const handleSort = createSortHandler(navigate, webhookListUrl, params);
 
   return (
     <TypedWebhookDelete onCompleted={onWebhookDelete}>
@@ -144,7 +144,7 @@ export const WebhooksList: React.FC<WebhooksListProps> = ({ params }) => {
         );
         const handleRemove = (id: string) => {
           navigate(
-            webhooksListUrl({
+            webhookListUrl({
               ...params,
               action: "remove",
               id
@@ -165,7 +165,7 @@ export const WebhooksList: React.FC<WebhooksListProps> = ({ params }) => {
               currentTab={currentTab}
               initialSearch={params.query || ""}
               onSearchChange={query => changeFilterField({ query })}
-              onAll={() => navigate(webhooksListUrl())}
+              onAll={() => navigate(webhookListUrl())}
               onTabChange={handleTabChange}
               onTabDelete={() => openModal("delete-search")}
               onTabSave={() => openModal("save-search")}
@@ -175,14 +175,14 @@ export const WebhooksList: React.FC<WebhooksListProps> = ({ params }) => {
               sort={getSortParams(params)}
               webhooks={maybe(() => data.webhooks.edges.map(edge => edge.node))}
               pageInfo={pageInfo}
-              onAdd={() => navigate(webhooksAddUrl)}
+              onAdd={() => navigate(webhookAddUrl)}
               onBack={() => navigate(configurationMenuUrl)}
               onNextPage={loadNextPage}
               onPreviousPage={loadPreviousPage}
               onRemove={handleRemove}
               onSort={handleSort}
               onUpdateListSettings={updateListSettings}
-              onRowClick={id => () => navigate(webhooksUrl(id))}
+              onRowClick={id => () => navigate(webhookUrl(id))}
             />
             <WebhookDeleteDialog
               confirmButtonState={webhookDeleteOpts.status}

src/webhooks/views/WebhooksCreate.tsx

@@ -11,11 +11,7 @@ import { useIntl } from "react-intl";
 import { maybe } from "../../misc";
 import WebhookCreatePage, { FormData } from "../components/WebhookCreatePage";
 import { TypedWebhookCreate } from "../mutations";
-import {
+import { webhookListUrl, WebhookListUrlQueryParams, webhookUrl } from "../urls";
-  webhooksListUrl,
-  WebhookListUrlQueryParams,
-  webhooksUrl
-} from "../urls";
 
 export interface WebhooksCreateProps {
   id: string;
@@ -38,11 +34,11 @@ export const WebhooksCreate: React.FC<WebhooksCreateProps> = () => {
       notify({
         text: intl.formatMessage(commonMessages.savedChanges)
       });
-      navigate(webhooksUrl(data.webhookCreate.webhook.id));
+      navigate(webhookUrl(data.webhookCreate.webhook.id));
     }
   };
 
-  const handleBack = () => navigate(webhooksListUrl());
+  const handleBack = () => navigate(webhookListUrl());
 
   return (
     <TypedWebhookCreate onCompleted={onSubmit}>

src/webhooks/views/WebhooksDetails.tsx

@@ -11,20 +11,21 @@ import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
 import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog";
 import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete";
 import { WebhookUpdate } from "@saleor/webhooks/types/WebhookUpdate";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import { maybe } from "../../misc";
 import WebhooksDetailsPage from "../components/WebhooksDetailsPage";
 import { TypedWebhookDelete, TypedWebhookUpdate } from "../mutations";
 import { TypedWebhooksDetailsQuery } from "../queries";
 import {
-  webhooksListUrl,
+  webhookListUrl,
-  WebhookListUrlQueryParams,
+  webhookUrl,
-  webhooksUrl,
+  WebhookUrlDialog,
-  WebhookUrlDialog
+  WebhookUrlQueryParams
 } from "../urls";
 
 export interface WebhooksDetailsProps {
   id: string;
-  params: WebhookListUrlQueryParams;
+  params: WebhookUrlQueryParams;
 }
 
 export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
@@ -41,31 +42,17 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
 
-  const closeModal = () =>
+  const [openModal, closeModal] = createDialogActionHandlers<
-    navigate(
+    WebhookUrlDialog,
-      webhooksUrl(id, {
+    WebhookUrlQueryParams
-        ...params,
+  >(navigate, params => webhookUrl(id, params), params);
-        action: undefined,
-        id: undefined
-      }),
-      true
-    );
-
-  const openModal = (action: WebhookUrlDialog, tokenId?: string) =>
-    navigate(
-      webhooksUrl(id, {
-        ...params,
-        action,
-        id: tokenId
-      })
-    );
 
   const onWebhookDelete = (data: WebhookDelete) => {
     if (data.webhookDelete.errors.length === 0) {
       notify({
         text: intl.formatMessage(commonMessages.savedChanges)
       });
-      navigate(webhooksListUrl());
+      navigate(webhookListUrl());
     }
   };
 
@@ -74,7 +61,7 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
       notify({
         text: intl.formatMessage(commonMessages.savedChanges)
       });
-      navigate(webhooksUrl(data.webhookUpdate.webhook.id));
+      navigate(webhookUrl(data.webhookUpdate.webhook.id));
     }
   };
 
@@ -113,7 +100,7 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
                           edge => edge.node
                         )
                       )}
-                      onBack={() => navigate(webhooksListUrl())}
+                      onBack={() => navigate(webhookListUrl())}
                       onDelete={() => openModal("remove")}
                       onSubmit={data => {
                         webhookUpdate({