Saleor 1659 use query params in channels picker (#886)

* use Query params in channels picker

* update urls

src/categories/views/CategoryDetails.tsx

@@ -219,7 +219,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
         disabled={loading}
         errors={updateResult.data?.categoryUpdate.errors || []}
         onAddCategory={() => navigate(categoryAddUrl(id))}
-        onAddProduct={() => navigate(productAddUrl)}
+        onAddProduct={() => navigate(productAddUrl())}
         onBack={() =>
           navigate(
             maybe(() => categoryUrl(data.category.parent.id), categoryListUrl())

src/channels/urls.ts

@@ -17,6 +17,8 @@ export type ChannelsListUrlQueryParams = Dialog<ChannelsListUrlDialog> &
   ChannelsListUrlSort &
   SingleAction;
 
+export type ChannelsAction = "open-channels-picker";
+
 export const channelsSection = "/channels/";
 
 export const channelsListPath = channelsSection;

src/collections/index.tsx

@@ -8,13 +8,14 @@ import { Route, RouteComponentProps, Switch } from "react-router-dom";
 import { WindowTitle } from "../components/WindowTitle";
 import {
   collectionAddPath,
+  CollectionCreateUrlQueryParams,
   collectionListPath,
   CollectionListUrlQueryParams,
   CollectionListUrlSortField,
   collectionPath,
   CollectionUrlQueryParams
 } from "./urls";
-import CollectionCreate from "./views/CollectionCreate";
+import CollectionCreateView from "./views/CollectionCreate";
 import CollectionDetailsView from "./views/CollectionDetails";
 import CollectionListView from "./views/CollectionList";
 
@@ -43,6 +44,12 @@ const CollectionDetails: React.FC<RouteComponentProps<
   );
 };
 
+const CollectionCreate: React.FC<RouteComponentProps> = ({ location }) => {
+  const qs = parseQs(location.search.substr(1));
+  const params: CollectionCreateUrlQueryParams = qs;
+  return <CollectionCreateView params={params} />;
+};
+
 const Component = () => {
   const intl = useIntl();
 

src/collections/urls.ts

@@ -1,3 +1,4 @@
+import { ChannelsAction } from "@saleor/channels/urls";
 import { stringify as stringifyQs } from "qs";
 import urlJoin from "url-join";
 
@@ -40,12 +41,15 @@ export type CollectionUrlDialog =
   | "remove"
   | "removeImage"
   | "assign"
-  | "unassign";
+  | "unassign"
+  | ChannelsAction;
 export type CollectionUrlQueryParams = BulkAction &
   Pagination &
   Dialog<CollectionUrlDialog>;
+export type CollectionCreateUrlQueryParams = Dialog<ChannelsAction>;
 export const collectionUrl = (id: string, params?: CollectionUrlQueryParams) =>
   collectionPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
 
 export const collectionAddPath = urlJoin(collectionSectionUrl, "add");
-export const collectionAddUrl = collectionAddPath;
+export const collectionAddUrl = (params?: CollectionCreateUrlQueryParams) =>
+  collectionAddPath + "?" + stringifyQs(params);

src/collections/views/CollectionCreate.tsx

@@ -1,4 +1,5 @@
 import { useChannelsList } from "@saleor/channels/queries";
+import { ChannelsAction } from "@saleor/channels/urls";
 import { createCollectionChannels } from "@saleor/channels/utils";
 import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
 import { WindowTitle } from "@saleor/components/WindowTitle";
@@ -6,6 +7,7 @@ import useChannels from "@saleor/hooks/useChannels";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
 import {
   useMetadataUpdate,
@@ -21,15 +23,31 @@ import {
   useCollectionChannelListingUpdate,
   useCollectionCreateMutation
 } from "../mutations";
-import { collectionListUrl, collectionUrl } from "../urls";
+import {
+  collectionAddUrl,
+  CollectionCreateUrlQueryParams,
+  collectionListUrl,
+  collectionUrl
+} from "../urls";
 
-export const CollectionCreate: React.FC = () => {
+interface CollectionCreateProps {
+  params: CollectionCreateUrlQueryParams;
+}
+
+export const CollectionCreate: React.FC<CollectionCreateProps> = ({
+  params
+}) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
   const [updateMetadata] = useMetadataUpdate({});
   const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
+  const [openModal, closeModal] = createDialogActionHandlers<
+    ChannelsAction,
+    CollectionCreateUrlQueryParams
+  >(navigate, params => collectionAddUrl(params), params);
+
   const [
     updateChannels,
     updateChannelsOpts
@@ -53,7 +71,7 @@ export const CollectionCreate: React.FC = () => {
     isChannelsModalOpen,
     setCurrentChannels,
     toggleAllChannels
-  } = useChannels(allChannels);
+  } = useChannels(allChannels, params?.action, { closeModal, openModal });
 
   const [createCollection, createCollectionOpts] = useCollectionCreateMutation({
     onCompleted: data => {

src/collections/views/CollectionDetails.tsx

@@ -71,6 +71,11 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
   const { search, loadMore, result } = useProductSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
+  const [openModal, closeModal] = createDialogActionHandlers<
+    CollectionUrlDialog,
+    CollectionUrlQueryParams
+  >(navigate, params => collectionUrl(id, params), params);
+
   const [updateMetadata] = useMetadataUpdate({});
   const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
@@ -151,11 +156,6 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
     }
   });
 
-  const [openModal, closeModal] = createDialogActionHandlers<
-    CollectionUrlDialog,
-    CollectionUrlQueryParams
-  >(navigate, params => collectionUrl(id, params), params);
-
   const paginationState = createPaginationState(PAGINATE_BY, params);
   const handleBack = () => navigate(collectionListUrl());
 
@@ -190,7 +190,10 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
           isChannelsModalOpen,
           setCurrentChannels,
           toggleAllChannels
-        } = useChannels(collectionChannelsChoices);
+        } = useChannels(collectionChannelsChoices, params?.action, {
+          closeModal,
+          openModal
+        });
 
         const handleUpdate = async (formData: CollectionUpdateData) => {
           const input: CollectionInput = {

src/collections/views/CollectionList/CollectionList.tsx

@@ -151,7 +151,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
         currentTab={currentTab}
         initialSearch={params.query || ""}
         onSearchChange={handleSearchChange}
-        onAdd={() => navigate(collectionAddUrl)}
+        onAdd={() => navigate(collectionAddUrl())}
         onAll={() => navigate(collectionListUrl())}
         onTabChange={handleTabChange}
         onTabDelete={() => openModal("delete-search")}

src/components/Navigator/modes/commands/actions.ts

@@ -39,14 +39,14 @@ export function searchInCommands(
     {
       label: intl.formatMessage(messages.createCollection),
       onClick: () => {
-        navigate(collectionAddUrl);
+        navigate(collectionAddUrl());
         return false;
       }
     },
     {
       label: intl.formatMessage(messages.createProduct),
       onClick: () => {
-        navigate(productAddUrl);
+        navigate(productAddUrl());
         return false;
       }
     },
@@ -67,7 +67,7 @@ export function searchInCommands(
     {
       label: intl.formatMessage(messages.createVoucher),
       onClick: () => {
-        navigate(voucherAddUrl);
+        navigate(voucherAddUrl());
         return false;
       }
     },

src/discounts/index.tsx

@@ -10,22 +10,24 @@ import { saleDetailsPageTab } from "./components/SaleDetailsPage";
 import { voucherDetailsPageTab } from "./components/VoucherDetailsPage";
 import {
   saleAddPath,
+  SaleCreateUrlQueryParams,
   saleListPath,
   SaleListUrlQueryParams,
   SaleListUrlSortField,
   salePath,
   SaleUrlQueryParams,
   voucherAddPath,
+  VoucherCreateUrlQueryParams,
   voucherListPath,
   VoucherListUrlQueryParams,
   VoucherListUrlSortField,
   voucherPath,
   VoucherUrlQueryParams
 } from "./urls";
-import SaleCreateView from "./views/SaleCreate/SaleCreate";
+import SaleCreateViewComponent from "./views/SaleCreate/SaleCreate";
 import SaleDetailsViewComponent from "./views/SaleDetails";
 import SaleListViewComponent from "./views/SaleList";
-import VoucherCreateView from "./views/VoucherCreate";
+import VoucherCreateViewComponent from "./views/VoucherCreate";
 import VoucherDetailsViewComponent from "./views/VoucherDetails";
 import VoucherListViewComponent from "./views/VoucherList";
 
@@ -53,6 +55,13 @@ const SaleDetailsView: React.FC<RouteComponentProps<{ id: string }>> = ({
   );
 };
 
+const SaleCreateView: React.FC<RouteComponentProps> = ({ location }) => {
+  const qs = parseQs(location.search.substr(1));
+  const params: SaleCreateUrlQueryParams = qs;
+
+  return <SaleCreateViewComponent params={params} />;
+};
+
 const VoucherListView: React.FC<RouteComponentProps<{}>> = ({ location }) => {
   const qs = parseQs(location.search.substr(1));
   const params: VoucherListUrlQueryParams = asSortParams(
@@ -80,6 +89,13 @@ const VoucherDetailsView: React.FC<RouteComponentProps<{ id: string }>> = ({
   );
 };
 
+const VoucherCreateView: React.FC<RouteComponentProps> = ({ location }) => {
+  const qs = parseQs(location.search.substr(1));
+  const params: VoucherCreateUrlQueryParams = qs;
+
+  return <VoucherCreateViewComponent params={params} />;
+};
+
 export const DiscountSection: React.FC<{}> = () => {
   const intl = useIntl();
 

src/discounts/urls.ts

@@ -1,3 +1,4 @@
+import { ChannelsAction } from "@saleor/channels/urls";
 import { stringify as stringifyQs } from "qs";
 import urlJoin from "url-join";
 
@@ -54,15 +55,18 @@ export type SaleUrlDialog =
   | "unassign-category"
   | "unassign-collection"
   | "unassign-product"
-  | "remove";
+  | "remove"
+  | ChannelsAction;
 export type SaleUrlQueryParams = Pagination &
   BulkAction &
   Dialog<SaleUrlDialog> &
   ActiveTab<SaleDetailsPageTab>;
+export type SaleCreateUrlQueryParams = Dialog<ChannelsAction>;
 export const saleUrl = (id: string, params?: SaleUrlQueryParams) =>
   salePath(encodeURIComponent(id)) + "?" + stringifyQs(params);
 export const saleAddPath = urlJoin(saleSection, "add");
-export const saleAddUrl = saleAddPath;
+export const saleAddUrl = (params?: SaleCreateUrlQueryParams) =>
+  saleAddPath + "?" + stringifyQs(params);
 
 export const voucherSection = urlJoin(discountSection, "vouchers");
 export const voucherListPath = voucherSection;
@@ -107,12 +111,15 @@ export type VoucherUrlDialog =
   | "unassign-category"
   | "unassign-collection"
   | "unassign-product"
-  | "remove";
+  | "remove"
+  | ChannelsAction;
 export type VoucherUrlQueryParams = Pagination &
   BulkAction &
   Dialog<VoucherUrlDialog> &
   ActiveTab<VoucherDetailsPageTab>;
+export type VoucherCreateUrlQueryParams = Dialog<ChannelsAction>;
 export const voucherUrl = (id: string, params?: VoucherUrlQueryParams) =>
   voucherPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
 export const voucherAddPath = urlJoin(voucherSection, "add");
-export const voucherAddUrl = voucherAddPath;
+export const voucherAddUrl = (params?: VoucherCreateUrlQueryParams) =>
+  voucherAddPath + "?" + stringifyQs(params);

src/discounts/views/SaleCreate/SaleCreate.tsx

@@ -1,4 +1,5 @@
 import { useChannelsList } from "@saleor/channels/queries";
+import { ChannelsAction } from "@saleor/channels/urls";
 import { ChannelSaleData, createSortedSaleData } from "@saleor/channels/utils";
 import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
 import { WindowTitle } from "@saleor/components/WindowTitle";
@@ -8,21 +9,36 @@ import {
   useSaleChannelListingUpdate
 } from "@saleor/discounts/mutations";
 import { SaleCreate } from "@saleor/discounts/types/SaleCreate";
-import { saleListUrl, saleUrl } from "@saleor/discounts/urls";
+import {
+  saleAddUrl,
+  SaleCreateUrlQueryParams,
+  saleListUrl,
+  saleUrl
+} from "@saleor/discounts/urls";
 import useChannels from "@saleor/hooks/useChannels";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { sectionNames } from "@saleor/intl";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import { createHandler } from "./handlers";
 
-export const SaleDetails: React.FC = () => {
+interface SaleCreateProps {
+  params: SaleCreateUrlQueryParams;
+}
+
+export const SaleCreateView: React.FC<SaleCreateProps> = ({ params }) => {
   const navigate = useNavigator();
   const pushMessage = useNotifier();
   const intl = useIntl();
 
+  const [openModal, closeModal] = createDialogActionHandlers<
+    ChannelsAction,
+    SaleCreateUrlQueryParams
+  >(navigate, params => saleAddUrl(params), params);
+
   const { data: channelsData } = useChannelsList({});
   const allChannels: ChannelSaleData[] = createSortedSaleData(
     channelsData?.channels
@@ -39,7 +55,7 @@ export const SaleDetails: React.FC = () => {
     isChannelsModalOpen,
     setCurrentChannels,
     toggleAllChannels
-  } = useChannels(allChannels);
+  } = useChannels(allChannels, params?.action, { closeModal, openModal });
 
   const [updateChannels, updateChannelsOpts] = useSaleChannelListingUpdate({});
 
@@ -105,4 +121,4 @@ export const SaleDetails: React.FC = () => {
     </>
   );
 };
-export default SaleDetails;
+export default SaleCreateView;

src/discounts/views/SaleDetails/SaleDetails.tsx

@@ -111,6 +111,11 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
     }
   });
 
+  const [openModal, closeModal] = createDialogActionHandlers<
+    SaleUrlDialog,
+    SaleUrlQueryParams
+  >(navigate, params => saleUrl(id, params), params);
+
   const allChannels: ChannelSaleData[] = createChannelsDataWithSaleDiscountPrice(
     data?.sale,
     channelsData?.channels
@@ -130,7 +135,10 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
     isChannelsModalOpen,
     setCurrentChannels,
     toggleAllChannels
-  } = useChannels(saleChannelsChoices);
+  } = useChannels(saleChannelsChoices, params?.action, {
+    closeModal,
+    openModal
+  });
 
   const [updateChannels, updateChannelsOpts] = useSaleChannelListingUpdate({});
 
@@ -157,11 +165,6 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
     }
   };
 
-  const [openModal, closeModal] = createDialogActionHandlers<
-    SaleUrlDialog,
-    SaleUrlQueryParams
-  >(navigate, params => saleUrl(id, params), params);
-
   const handleCatalogueAdd = (data: SaleCataloguesAdd) => {
     if (data.saleCataloguesAdd.errors.length === 0) {
       closeModal();

src/discounts/views/SaleList/SaleList.tsx

@@ -176,7 +176,7 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
               settings={settings}
               disabled={loading}
               pageInfo={pageInfo}
-              onAdd={() => navigate(saleAddUrl)}
+              onAdd={() => navigate(saleAddUrl())}
               onNextPage={loadNextPage}
               onPreviousPage={loadPreviousPage}
               onSort={handleSort}

src/discounts/views/VoucherCreate/VoucherCreate.tsx

@@ -1,4 +1,5 @@
 import { useChannelsList } from "@saleor/channels/queries";
+import { ChannelsAction } from "@saleor/channels/urls";
 import {
   ChannelVoucherData,
   createSortedVoucherData
@@ -9,6 +10,7 @@ import useChannels from "@saleor/hooks/useChannels";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { sectionNames } from "@saleor/intl";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -18,14 +20,28 @@ import {
   useVoucherChannelListingUpdate
 } from "../../mutations";
 import { VoucherCreate } from "../../types/VoucherCreate";
-import { voucherListUrl, voucherUrl } from "../../urls";
+import {
+  voucherAddUrl,
+  VoucherCreateUrlQueryParams,
+  voucherListUrl,
+  voucherUrl
+} from "../../urls";
 import { createHandler } from "./handlers";
 
-export const VoucherDetails: React.FC = () => {
+interface VoucherCreateProps {
+  params: VoucherCreateUrlQueryParams;
+}
+
+export const VoucherCreateView: React.FC<VoucherCreateProps> = ({ params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
 
+  const [openModal, closeModal] = createDialogActionHandlers<
+    ChannelsAction,
+    VoucherCreateUrlQueryParams
+  >(navigate, params => voucherAddUrl(params), params);
+
   const { data: channelsData } = useChannelsList({});
   const allChannels: ChannelVoucherData[] = createSortedVoucherData(
     channelsData?.channels
@@ -42,7 +58,7 @@ export const VoucherDetails: React.FC = () => {
     isChannelsModalOpen,
     setCurrentChannels,
     toggleAllChannels
-  } = useChannels(allChannels);
+  } = useChannels(allChannels, params?.action, { closeModal, openModal });
 
   const [updateChannels, updateChannelsOpts] = useVoucherChannelListingUpdate(
     {}
@@ -111,4 +127,4 @@ export const VoucherDetails: React.FC = () => {
     </TypedVoucherCreate>
   );
 };
-export default VoucherDetails;
+export default VoucherCreateView;

src/discounts/views/VoucherDetails/VoucherDetails.tsx

@@ -114,6 +114,12 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
       ...paginationState
     }
   });
+
+  const [openModal, closeModal] = createDialogActionHandlers<
+    VoucherUrlDialog,
+    VoucherUrlQueryParams
+  >(navigate, params => voucherUrl(id, params), params);
+
   const { data: channelsData } = useChannelsList({});
 
   const allChannels: ChannelVoucherData[] = createChannelsDataWithDiscountPrice(
@@ -134,7 +140,10 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
     isChannelsModalOpen,
     setCurrentChannels,
     toggleAllChannels
-  } = useChannels(voucherChannelsChoices);
+  } = useChannels(voucherChannelsChoices, params?.action, {
+    closeModal,
+    openModal
+  });
 
   React.useEffect(() => {
     if (!currentChannels.length && voucherChannelsChoices.length) {
@@ -169,11 +178,6 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
     }
   };
 
-  const [openModal, closeModal] = createDialogActionHandlers<
-    VoucherUrlDialog,
-    VoucherUrlQueryParams
-  >(navigate, params => voucherUrl(id, params), params);
-
   const handleCatalogueAdd = (data: VoucherCataloguesAdd) => {
     if (data.voucherCataloguesAdd.errors.length === 0) {
       closeModal();

src/discounts/views/VoucherList/VoucherList.tsx

@@ -177,7 +177,7 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
               vouchers={maybe(() => data.vouchers.edges.map(edge => edge.node))}
               disabled={loading}
               pageInfo={pageInfo}
-              onAdd={() => navigate(voucherAddUrl)}
+              onAdd={() => navigate(voucherAddUrl())}
               onNextPage={loadNextPage}
               onPreviousPage={loadPreviousPage}
               onUpdateListSettings={updateListSettings}

src/hooks/useChannels.ts

@@ -1,11 +1,18 @@
+import { ChannelsAction } from "@saleor/channels/urls";
 import { Channel } from "@saleor/channels/utils";
 import useListActions from "@saleor/hooks/useListActions";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
-import { useState } from "react";
 
-function useChannels<T extends Channel>(channels: T[]) {
-  const [isChannelsModalOpen, setChannelsModalOpen] = useState(false);
+interface Modal {
+  openModal: (action: ChannelsAction) => void;
+  closeModal: () => void;
+}
 
+function useChannels<T extends Channel, A>(
+  channels: T[],
+  action: A | ChannelsAction,
+  { closeModal, openModal }: Modal
+) {
   const [currentChannels, setCurrentChannels] = useStateFromProps(channels);
 
   const {
@@ -16,18 +23,18 @@ function useChannels<T extends Channel>(channels: T[]) {
   } = useListActions<T>(currentChannels, (a, b) => a.id === b.id);
 
   const handleChannelsModalClose = () => {
-    setChannelsModalOpen(false);
+    closeModal();
     setChannels(currentChannels);
   };
 
-  const handleChannelsModalOpen = () => setChannelsModalOpen(true);
+  const handleChannelsModalOpen = () => openModal("open-channels-picker");
 
   const handleChannelsConfirm = () => {
     const sortedChannelListElements = channelListElements.sort(
       (channel, nextChannel) => channel.name.localeCompare(nextChannel.name)
     );
     setCurrentChannels(sortedChannelListElements);
-    setChannelsModalOpen(false);
+    closeModal();
   };
 
   const toggleAllChannels = (items: T[], selected: number) => {
@@ -46,7 +53,7 @@ function useChannels<T extends Channel>(channels: T[]) {
     handleChannelsModalClose,
     handleChannelsModalOpen,
     isChannelSelected,
-    isChannelsModalOpen,
+    isChannelsModalOpen: action === "open-channels-picker",
     setCurrentChannels,
     toggleAllChannels
   };

src/products/index.tsx

@@ -9,6 +9,7 @@ import { Route, RouteComponentProps, Switch } from "react-router-dom";
 import { WindowTitle } from "../components/WindowTitle";
 import {
   productAddPath,
+  ProductCreateUrlQueryParams,
   productImagePath,
   ProductImageUrlQueryParams,
   productListPath,
@@ -21,7 +22,7 @@ import {
   productVariantEditPath,
   ProductVariantEditUrlQueryParams
 } from "./urls";
-import ProductCreate from "./views/ProductCreate";
+import ProductCreateComponent from "./views/ProductCreate";
 import ProductImageComponent from "./views/ProductImage";
 import ProductListComponent from "./views/ProductList";
 import ProductUpdateComponent from "./views/ProductUpdate";
@@ -60,6 +61,13 @@ const ProductUpdate: React.FC<RouteComponentProps<any>> = ({ match }) => {
   );
 };
 
+const ProductCreate: React.FC<RouteComponentProps<any>> = () => {
+  const qs = parseQs(location.search.substr(1));
+  const params: ProductCreateUrlQueryParams = qs;
+
+  return <ProductCreateComponent params={params} />;
+};
+
 const ProductVariant: React.FC<RouteComponentProps<any>> = ({ match }) => {
   const qs = parseQs(location.search.substr(1));
   const params: ProductVariantEditUrlQueryParams = qs;

src/products/urls.ts

@@ -1,3 +1,4 @@
+import { ChannelsAction } from "@saleor/channels/urls";
 import urlJoin from "url-join";
 
 import {
@@ -16,7 +17,8 @@ import { stringifyQs } from "../utils/urls";
 const productSection = "/products/";
 
 export const productAddPath = urlJoin(productSection, "add");
-export const productAddUrl = productAddPath;
+export const productAddUrl = (params?: ProductCreateUrlQueryParams) =>
+  productAddPath + "?" + stringifyQs(params);
 
 export const productListPath = productSection;
 export type ProductListUrlDialog = "delete" | "export" | TabActionDialog;
@@ -61,8 +63,9 @@ export const productListUrl = (params?: ProductListUrlQueryParams): string =>
   productListPath + "?" + stringifyQs(params);
 
 export const productPath = (id: string) => urlJoin(productSection + id);
-export type ProductUrlDialog = "remove" | "remove-variants";
+export type ProductUrlDialog = "remove" | "remove-variants" | ChannelsAction;
 export type ProductUrlQueryParams = BulkAction & Dialog<ProductUrlDialog>;
+export type ProductCreateUrlQueryParams = Dialog<ChannelsAction>;
 export const productUrl = (id: string, params?: ProductUrlQueryParams) =>
   productPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
 

src/products/views/ProductCreate/ProductCreate.tsx

@@ -1,4 +1,5 @@
 import { useChannelsList } from "@saleor/channels/queries";
+import { ChannelsAction } from "@saleor/channels/urls";
 import { ChannelData, createSortedChannelsData } from "@saleor/channels/utils";
 import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
 import { WindowTitle } from "@saleor/components/WindowTitle";
@@ -15,12 +16,18 @@ import {
   useVariantCreateMutation
 } from "@saleor/products/mutations";
 import { useProductCreateMutation } from "@saleor/products/mutations";
-import { productListUrl, productUrl } from "@saleor/products/urls";
+import {
+  productAddUrl,
+  ProductCreateUrlQueryParams,
+  productListUrl,
+  productUrl
+} from "@saleor/products/urls";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
 import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import useProductTypeSearch from "@saleor/searches/useProductTypeSearch";
 import { useTaxTypeList } from "@saleor/taxes/queries";
 import { getProductErrorMessage } from "@saleor/utils/errors";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
 import {
   useMetadataUpdate,
@@ -33,7 +40,11 @@ import { useIntl } from "react-intl";
 
 import { createHandler } from "./handlers";
 
-export const ProductCreateView: React.FC = () => {
+interface ProductCreateProps {
+  params: ProductCreateUrlQueryParams;
+}
+
+export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const shop = useShop();
@@ -41,6 +52,12 @@ export const ProductCreateView: React.FC = () => {
   const [productCreateComplete, setProductCreateComplete] = React.useState(
     false
   );
+
+  const [openModal, closeModal] = createDialogActionHandlers<
+    ChannelsAction,
+    ProductCreateUrlQueryParams
+  >(navigate, params => productAddUrl(params), params);
+
   const {
     loadMore: loadMoreCategories,
     search: searchCategory,
@@ -92,7 +109,10 @@ export const ProductCreateView: React.FC = () => {
     isChannelsModalOpen,
     setCurrentChannels,
     toggleAllChannels
-  } = useChannels(allChannels);
+  } = useChannels(allChannels, params?.action, {
+    closeModal,
+    openModal
+  });
 
   const handleSuccess = (productId: string) => {
     notify({

src/products/views/ProductList/ProductList.tsx

@@ -320,7 +320,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
           () => attributes.data.availableInGrid.pageInfo.hasNextPage,
           false
         )}
-        onAdd={() => navigate(productAddUrl)}
+        onAdd={() => navigate(productAddUrl())}
         disabled={loading}
         products={maybe(() => data.products.edges.map(edge => edge.node))}
         onFetchMore={() =>

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -190,6 +190,11 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     }
   });
 
+  const [openModal, closeModal] = createDialogActionHandlers<
+    ProductUrlDialog,
+    ProductUrlQueryParams
+  >(navigate, params => productUrl(id, params), params);
+
   const product = data?.product;
 
   const allChannels: ChannelData[] = createChannelsDataWithPrice(
@@ -213,7 +218,10 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     isChannelsModalOpen,
     setCurrentChannels,
     toggleAllChannels
-  } = useChannels(productChannelsChoices);
+  } = useChannels(productChannelsChoices, params?.action, {
+    closeModal,
+    openModal
+  });
 
   const [updateChannels, updateChannelsOpts] = useProductChannelListingUpdate({
     onCompleted: data => {
@@ -235,11 +243,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     value: listing.channel.id
   }));
 
-  const [openModal, closeModal] = createDialogActionHandlers<
-    ProductUrlDialog,
-    ProductUrlQueryParams
-  >(navigate, params => productUrl(id, params), params);
-
   const handleBack = () => navigate(productListUrl());
 
   if (product === null) {

src/shipping/urls.ts

@@ -1,3 +1,4 @@
+import { ChannelsAction } from "@saleor/channels/urls";
 import { stringify as stringifyQs } from "qs";
 import urlJoin from "url-join";
 
@@ -44,13 +45,14 @@ type ZipCodeRangeActions = "add-range" | "remove-range";
 export type ShippingRateUrlDialog =
   | ZipCodeRangeActions
   | "remove"
-  | ShippingMethodActions;
+  | ShippingMethodActions
+  | ChannelsAction;
 
 export type ShippingRateUrlQueryParams = Dialog<ShippingRateUrlDialog> &
   SingleAction &
   BulkAction &
   Pagination;
-export type ShippingRateCreateUrlDialog = ZipCodeRangeActions;
+export type ShippingRateCreateUrlDialog = ZipCodeRangeActions | ChannelsAction;
 export type ShippingRateCreateUrlQueryParams = Dialog<
   ShippingRateCreateUrlDialog
 > &

src/shipping/views/PriceRatesCreate/PriceRatesCreate.tsx

@@ -59,7 +59,7 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
     isChannelsModalOpen,
     setCurrentChannels,
     toggleAllChannels
-  } = useChannels(allChannels);
+  } = useChannels(allChannels, params?.action, { closeModal, openModal });
 
   const {
     channelErrors,

src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx

@@ -180,7 +180,7 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
     isChannelsModalOpen,
     setCurrentChannels,
     toggleAllChannels
-  } = useChannels(shippingChannels);
+  } = useChannels(shippingChannels, params?.action, { closeModal, openModal });
 
   const [updateShippingRate, updateShippingRateOpts] = useShippingRateUpdate(
     {}

src/shipping/views/WeightRatesCreate/WeightRatesCreate.tsx

@@ -63,7 +63,7 @@ export const WeightRatesCreate: React.FC<WeightRatesCreateProps> = ({
     isChannelsModalOpen,
     setCurrentChannels,
     toggleAllChannels
-  } = useChannels(shippingChannels);
+  } = useChannels(shippingChannels, params?.action, { closeModal, openModal });
 
   const {
     channelErrors,

src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx

@@ -144,7 +144,7 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
     isChannelsModalOpen,
     setCurrentChannels,
     toggleAllChannels
-  } = useChannels(shippingChannels);
+  } = useChannels(shippingChannels, params?.action, { closeModal, openModal });
 
   const [updateShippingRate, updateShippingRateOpts] = useShippingRateUpdate(
     {}