Disable auto scroll to the top on assign references (#1510) (#1524)

* add resetScroll behavior to navigator hook

* disable scroll to top on modal close

* refactor useNavigator hook

* fix linter issue

* fix no default value of destructured parameter

src/auth/views/NewPassword.tsx

@@ -24,7 +24,7 @@ const NewPassword: React.FC<RouteComponentProps> = ({ location }) => {
         data.setPassword.csrfToken,
         data.setPassword.user
       );
-      navigate("/", true);
+      navigate("/", { replace: true });
     }
   };
 

src/categories/views/CategoryList/CategoryList.tsx

@@ -132,7 +132,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
 
   const handleCategoryBulkDelete = (data: CategoryBulkDelete) => {
     if (data.categoryBulkDelete.errors.length === 0) {
-      navigate(categoryListUrl(), true);
+      navigate(categoryListUrl(), { replace: true });
       refetch();
       reset();
     }

src/collections/views/CollectionDetails.tsx

@@ -120,7 +120,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
               defaultMessage: "Added product to collection"
             })
           });
-          navigate(collectionUrl(id), true);
+          navigate(collectionUrl(id), { replace: true });
         }
       }
     }

src/customers/views/CustomerDetails.tsx

@@ -149,7 +149,9 @@ export const CustomerDetailsView: React.FC<CustomerDetailsViewProps> = ({
                     />
                     <ActionDialog
                       confirmButtonState={removeCustomerOpts.status}
-                      onClose={() => navigate(customerUrl(id), true)}
+                      onClose={() =>
+                        navigate(customerUrl(id), { replace: true })
+                      }
                       onConfirm={() => removeCustomer()}
                       title={intl.formatMessage({
                         defaultMessage: "Delete Customer",

src/discounts/views/SaleCreate/SaleCreate.tsx

@@ -74,7 +74,7 @@ export const SaleCreateView: React.FC<SaleCreateProps> = ({ params }) => {
           defaultMessage: "Successfully created sale"
         })
       });
-      navigate(saleUrl(data.saleCreate.sale.id), true);
+      navigate(saleUrl(data.saleCreate.sale.id), { replace: true });
     }
   };
 

src/discounts/views/SaleDetails/SaleDetails.tsx

@@ -159,7 +159,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
         status: "success",
         text: intl.formatMessage(messages.saleDetailsSaleDeleteDialog)
       });
-      navigate(saleListUrl(), true);
+      navigate(saleListUrl(), { replace: true });
     }
   };
 

src/discounts/views/VoucherCreate/VoucherCreate.tsx

@@ -79,7 +79,7 @@ export const VoucherCreateView: React.FC<VoucherCreateProps> = ({ params }) => {
           defaultMessage: "Successfully created voucher"
         })
       });
-      navigate(voucherUrl(data.voucherCreate.voucher.id), true);
+      navigate(voucherUrl(data.voucherCreate.voucher.id), { replace: true });
     }
   };
 

src/discounts/views/VoucherDetails/VoucherDetails.tsx

@@ -169,7 +169,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
           defaultMessage: "Deleted voucher"
         })
       });
-      navigate(voucherListUrl(), true);
+      navigate(voucherListUrl(), { replace: true });
     }
   };
 

src/hooks/useNavigator.ts

@@ -2,8 +2,11 @@ import useRouter from "use-react-router";
 
 export type UseNavigatorResult = (
   url: string,
-  replace?: boolean,
-  preserveQs?: boolean
+  opts?: {
+    replace?: boolean;
+    preserveQs?: boolean;
+    resetScroll?: boolean;
+  }
 ) => void;
 function useNavigator(): UseNavigatorResult {
   const {
@@ -11,15 +14,19 @@ function useNavigator(): UseNavigatorResult {
     history
   } = useRouter();
 
-  return (url: string, replace = false, preserveQs = false) => {
+  return (
+    url: string,
+    { replace = false, preserveQs = false, resetScroll = true } = {}
+  ) => {
     const targetUrl = preserveQs ? url + search : url;
     if (replace) {
       history.replace(targetUrl);
     } else {
       history.push(targetUrl);
     }
-
+    if (resetScroll) {
       window.scrollTo({ behavior: "smooth", top: 0 });
+    }
   };
 }
 

src/hooks/usePaginationReset.ts

@@ -5,5 +5,5 @@ import useNavigator from "./useNavigator";
 export const usePaginationReset = (url: string, rowNumber: number) => {
   const navigate = useNavigator();
 
-  useEffect(() => navigate(url, true), [rowNumber]);
+  useEffect(() => navigate(url, { replace: true }), [rowNumber]);
 };

src/hooks/usePaginator.ts

@@ -52,7 +52,7 @@ function usePaginator() {
             after: pageInfo.endCursor,
             before: undefined
           }),
-        true
+        { replace: true }
       );
 
     const loadPreviousPage = () =>
@@ -63,7 +63,7 @@ function usePaginator() {
             after: undefined,
             before: pageInfo.startCursor
           }),
-        true
+        { replace: true }
       );
 
     const newPageInfo = pageInfo

src/navigation/views/MenuDetails/index.tsx

@@ -77,7 +77,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
         action: undefined,
         id: undefined
       }),
-      true
+      { replace: true }
     );
 
   const handleItemClick = (id: string, type: MenuItemType) => {

src/navigation/views/MenuDetails/successHandlers.ts

@@ -56,7 +56,7 @@ export function handleDelete(
       status: "success",
       text: intl.formatMessage(commonMessages.savedChanges)
     });
-    navigate(menuListUrl(), true);
+    navigate(menuListUrl(), { replace: true });
   }
 }
 

src/navigation/views/MenuList/MenuList.tsx

@@ -66,7 +66,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
         id: undefined,
         ids: undefined
       }),
-      true
+      { replace: true }
     );
 
   const paginationState = createPaginationState(settings.rowNumber, params);

src/orders/views/OrderFulfill/OrderFulfill.tsx

@@ -58,7 +58,7 @@ const OrderFulfill: React.FC<OrderFulfillProps> = ({ orderId }) => {
   const [fulfillOrder, fulfillOrderOpts] = useOrderFulfill({
     onCompleted: data => {
       if (data.orderFulfill.errors.length === 0) {
-        navigate(orderUrl(orderId), true);
+        navigate(orderUrl(orderId), { replace: true });
         notify({
           status: "success",
           text: intl.formatMessage({

src/orders/views/OrderRefund/OrderRefund.tsx

@@ -69,7 +69,7 @@ const OrderRefund: React.FC<OrderRefundProps> = ({ orderId }) => {
   const [refundOrder, refundOrderOpts] = useOrderRefundMutation({
     onCompleted: data => {
       if (data.orderRefund.errors.length === 0) {
-        navigate(orderUrl(orderId), true);
+        navigate(orderUrl(orderId), { replace: true });
         notify({
           status: "success",
           text: intl.formatMessage({
@@ -86,7 +86,7 @@ const OrderRefund: React.FC<OrderRefundProps> = ({ orderId }) => {
   ] = useOrderFulfillmentRefundProductsMutation({
     onCompleted: data => {
       if (data.orderFulfillmentRefundProducts.errors.length === 0) {
-        navigate(orderUrl(orderId), true);
+        navigate(orderUrl(orderId), { replace: true });
         notify({
           status: "success",
           text: intl.formatMessage({

src/pageTypes/views/PageTypeDetails.tsx

@@ -74,7 +74,7 @@ export const PageTypeDetails: React.FC<PageTypeDetailsProps> = ({
             defaultMessage: "Page type deleted"
           })
         });
-        navigate(pageTypeListUrl(), true);
+        navigate(pageTypeListUrl(), { replace: true });
       }
     }
   });
@@ -175,7 +175,7 @@ export const PageTypeDetails: React.FC<PageTypeDetailsProps> = ({
     return <NotFoundPage onBack={handleBack} />;
   }
 
-  const closeModal = () => navigate(pageTypeUrl(id), true);
+  const closeModal = () => navigate(pageTypeUrl(id), { replace: true });
 
   const handleSubmit = createMetadataUpdateHandler(
     data?.pageType,

src/productTypes/views/ProductTypeUpdate/index.tsx

@@ -175,7 +175,8 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
           return <NotFoundPage onBack={handleBack} />;
         }
 
-        const closeModal = () => navigate(productTypeUrl(id), true);
+        const closeModal = () =>
+          navigate(productTypeUrl(id), { replace: true });
 
         const handleAttributeAssignSuccess = (data: AssignProductAttribute) => {
           if (data.productAttributeAssign.errors.length === 0) {
@@ -217,7 +218,7 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
                 defaultMessage: "Product type deleted"
               })
             });
-            navigate(productTypeListUrl(), true);
+            navigate(productTypeListUrl(), { replace: true });
           }
         };
         const handleSubmit = createMetadataUpdateHandler(

src/products/views/ProductImage.tsx

@@ -99,7 +99,9 @@ export const ProductImage: React.FC<ProductMediaProps> = ({
         saveButtonBarState={updateResult.status}
       />
       <ActionDialog
-        onClose={() => navigate(productImageUrl(productId, mediaId), true)}
+        onClose={() =>
+          navigate(productImageUrl(productId, mediaId), { replace: true })
+        }
         onConfirm={handleDelete}
         open={params.action === "remove"}
         title={intl.formatMessage({

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -430,7 +430,8 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
       productUrl(id, {
         action: "assign-attribute-value",
         id: attribute.id
-      })
+      }),
+      { resetScroll: false }
     );
 
   const disableFormSave =
@@ -619,7 +620,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
         fetchReferenceProducts={searchProducts}
         fetchMoreReferenceProducts={fetchMoreReferenceProducts}
         fetchMoreAttributeValues={fetchMoreAttributeValues}
-        onCloseDialog={() => navigate(productUrl(id))}
+        onCloseDialog={() => navigate(productUrl(id), { resetScroll: false })}
         onAttributeSelectBlur={searchAttributeReset}
       />
       <ActionDialog

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -100,7 +100,7 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
           status: "success",
           text: intl.formatMessage(commonMessages.savedChanges)
         });
-        navigate(shippingZonesListUrl(), true);
+        navigate(shippingZonesListUrl(), { replace: true });
       }
     }
   });

src/translations/views/TranslationsAttributes.tsx

@@ -86,7 +86,7 @@ const TranslationsAttributes: React.FC<TranslationsAttributesProps> = ({
         stringifyQs({
           activeField: field
         }),
-      true
+      { replace: true }
     );
   const onAttributeUpdate = (data: UpdateAttributeTranslations) => {
     if (data.attributeTranslate.errors.length === 0) {
@@ -95,7 +95,7 @@ const TranslationsAttributes: React.FC<TranslationsAttributesProps> = ({
         status: "success",
         text: intl.formatMessage(commonMessages.savedChanges)
       });
-      navigate("?", true);
+      navigate("?", { replace: true });
     }
   };
   const onAttributeValueUpdate = (data: UpdateAttributeValueTranslations) => {
@@ -105,11 +105,11 @@ const TranslationsAttributes: React.FC<TranslationsAttributesProps> = ({
         status: "success",
         text: intl.formatMessage(commonMessages.savedChanges)
       });
-      navigate("?", true);
+      navigate("?", { replace: true });
     }
   };
   const onDiscard = () => {
-    navigate("?", true);
+    navigate("?", { replace: true });
   };
 
   return (

src/translations/views/TranslationsCategories.tsx

@@ -49,7 +49,7 @@ const TranslationsCategories: React.FC<TranslationsCategoriesProps> = ({
         stringifyQs({
           activeField: field
         }),
-      true
+      { replace: true }
     );
   const onUpdate = (data: UpdateCategoryTranslations) => {
     if (data.categoryTranslate.errors.length === 0) {
@@ -58,11 +58,11 @@ const TranslationsCategories: React.FC<TranslationsCategoriesProps> = ({
         status: "success",
         text: intl.formatMessage(commonMessages.savedChanges)
       });
-      navigate("?", true);
+      navigate("?", { replace: true });
     }
   };
   const onDiscard = () => {
-    navigate("?", true);
+    navigate("?", { replace: true });
   };
 
   return (

src/translations/views/TranslationsCollections.tsx

@@ -49,7 +49,7 @@ const TranslationsCollections: React.FC<TranslationsCollectionsProps> = ({
         stringifyQs({
           activeField: field
         }),
-      true
+      { replace: true }
     );
   const onUpdate = (data: UpdateCollectionTranslations) => {
     if (data.collectionTranslate.errors.length === 0) {
@@ -58,11 +58,11 @@ const TranslationsCollections: React.FC<TranslationsCollectionsProps> = ({
         status: "success",
         text: intl.formatMessage(commonMessages.savedChanges)
       });
-      navigate("?", true);
+      navigate("?", { replace: true });
     }
   };
   const onDiscard = () => {
-    navigate("?", true);
+    navigate("?", { replace: true });
   };
   const translation = collectionTranslations?.data?.translation;
 

src/translations/views/TranslationsEntities.tsx

@@ -50,7 +50,7 @@ const TranslationsEntities: React.FC<TranslationsEntitiesProps> = ({
         stringifyQs({
           tab: TranslatableEntities.categories
         }),
-      true
+      { replace: true }
     );
   }
 

src/translations/views/TranslationsPages.tsx

@@ -51,7 +51,7 @@ const TranslationsPages: React.FC<TranslationsPagesProps> = ({
         stringifyQs({
           activeField: field
         }),
-      true
+      { replace: true }
     );
 
   const onUpdate = (errors: unknown[]) => {
@@ -61,12 +61,12 @@ const TranslationsPages: React.FC<TranslationsPagesProps> = ({
         status: "success",
         text: intl.formatMessage(commonMessages.savedChanges)
       });
-      navigate("?", true);
+      navigate("?", { replace: true });
     }
   };
 
   const onDiscard = () => {
-    navigate("?", true);
+    navigate("?", { replace: true });
   };
 
   return (

src/translations/views/TranslationsProductVariants.tsx

@@ -54,7 +54,7 @@ const TranslationsProductVariants: React.FC<TranslationsProductVariantsProps> =
         stringifyQs({
           activeField: field
         }),
-      true
+      { replace: true }
     );
 
   const onUpdate = (errors: unknown[]) => {
@@ -64,12 +64,12 @@ const TranslationsProductVariants: React.FC<TranslationsProductVariantsProps> =
         status: "success",
         text: intl.formatMessage(commonMessages.savedChanges)
       });
-      navigate("?", true);
+      navigate("?", { replace: true });
     }
   };
 
   const onDiscard = () => {
-    navigate("?", true);
+    navigate("?", { replace: true });
   };
 
   return (

src/translations/views/TranslationsProducts.tsx

@@ -52,7 +52,7 @@ const TranslationsProducts: React.FC<TranslationsProductsProps> = ({
         stringifyQs({
           activeField: field
         }),
-      true
+      { replace: true }
     );
 
   const onUpdate = (errors: unknown[]) => {
@@ -62,12 +62,12 @@ const TranslationsProducts: React.FC<TranslationsProductsProps> = ({
         status: "success",
         text: intl.formatMessage(commonMessages.savedChanges)
       });
-      navigate("?", true);
+      navigate("?", { replace: true });
     }
   };
 
   const onDiscard = () => {
-    navigate("?", true);
+    navigate("?", { replace: true });
   };
 
   return (

src/translations/views/TranslationsSales.tsx

@@ -48,7 +48,7 @@ const TranslationsSales: React.FC<TranslationsSalesProps> = ({
         stringifyQs({
           activeField: field
         }),
-      true
+      { replace: true }
     );
   const onUpdate = (data: UpdateSaleTranslations) => {
     if (data.saleTranslate.errors.length === 0) {
@@ -57,11 +57,11 @@ const TranslationsSales: React.FC<TranslationsSalesProps> = ({
         status: "success",
         text: intl.formatMessage(commonMessages.savedChanges)
       });
-      navigate("?", true);
+      navigate("?", { replace: true });
     }
   };
   const onDiscard = () => {
-    navigate("?", true);
+    navigate("?", { replace: true });
   };
 
   return (

src/translations/views/TranslationsShippingMethod.tsx

@@ -48,7 +48,7 @@ const TranslationsShippingMethod: React.FC<TranslationsShippingMethodProps> = ({
         stringifyQs({
           activeField: field
         }),
-      true
+      { replace: true }
     );
   const onUpdate = (data: UpdateShippingMethodTranslations) => {
     if (data.shippingPriceTranslate.errors.length === 0) {
@@ -57,11 +57,11 @@ const TranslationsShippingMethod: React.FC<TranslationsShippingMethodProps> = ({
         status: "success",
         text: intl.formatMessage(commonMessages.savedChanges)
       });
-      navigate("?", true);
+      navigate("?", { replace: true });
     }
   };
   const onDiscard = () => {
-    navigate("?", true);
+    navigate("?", { replace: true });
   };
 
   return (

src/translations/views/TranslationsVouchers.tsx

@@ -49,7 +49,7 @@ const TranslationsVouchers: React.FC<TranslationsVouchersProps> = ({
         stringifyQs({
           activeField: field
         }),
-      true
+      { replace: true }
     );
   const onUpdate = (data: UpdateVoucherTranslations) => {
     if (data.voucherTranslate.errors.length === 0) {
@@ -58,11 +58,11 @@ const TranslationsVouchers: React.FC<TranslationsVouchersProps> = ({
         status: "success",
         text: intl.formatMessage(commonMessages.savedChanges)
       });
-      navigate("?", true);
+      navigate("?", { replace: true });
     }
   };
   const onDiscard = () => {
-    navigate("?", true);
+    navigate("?", { replace: true });
   };
 
   return (

src/utils/handlers/dialogActionHandlers.ts

@@ -28,7 +28,7 @@ function createDialogActionHandlers<
         id: undefined,
         ids: undefined
       }),
-      true
+      { replace: true }
     );
   const open = (action: TAction, newParams?: TParams) =>
     navigate(

src/utils/handlers/sortHandler.ts

@@ -18,7 +18,7 @@ function createSortHandler<T extends string>(
         ...getSortUrlVariables(field, params),
         ...DEFAULT_INITIAL_PAGINATION_DATA
       }),
-      true
+      { replace: true }
     );
 }