Improve backlink in order details and draft order details (#5193)

* improve backlink in order details

* fix tests

* pass navigator opts to datagrid

* make hook generic

* fix ts

* fix test

---------

Co-authored-by: Paweł Chyła <chyla1988@gmail.com>

.changeset/thick-kiwis-study.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+When navigating to order details from the order list, the back button will now return you to the previous page with the same filters and pagination applied.

src/components/Datagrid/Datagrid.tsx

@@ -1,6 +1,6 @@
 import "@glideapps/glide-data-grid/dist/index.css";
 
-import useNavigator from "@dashboard/hooks/useNavigator";
+import useNavigator, { NavigatorOpts } from "@dashboard/hooks/useNavigator";
 import { usePreventHistoryBack } from "@dashboard/hooks/usePreventHistoryBack";
 import { getCellAction } from "@dashboard/products/components/ProductListDatagrid/datagrid";
 import DataEditor, {
@@ -98,6 +98,7 @@ export interface DatagridProps {
   recentlyAddedColumn?: string | null; // Enables scroll to recently added column
   onClearRecentlyAddedColumn?: () => void;
   renderHeader?: (props: DatagridRenderHeaderProps) => ReactNode;
+  navigatorOpts?: NavigatorOpts;
 }
 
 export const Datagrid: React.FC<DatagridProps> = ({
@@ -130,6 +131,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
   onClearRecentlyAddedColumn,
   rowHeight = cellHeight,
   renderHeader,
+  navigatorOpts,
   ...datagridProps
 }): ReactElement => {
   const classes = useStyles({ actionButtonPosition });
@@ -531,7 +533,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
             e.preventDefault();
 
             if (e.currentTarget.dataset.reactRouterPath) {
-              navigate(e.currentTarget.dataset.reactRouterPath);
+              navigate(e.currentTarget.dataset.reactRouterPath, navigatorOpts);
             }
           }}
         />

src/hooks/useBackLinkWithState.test.ts

@@ -0,0 +1,72 @@
+import { renderHook } from "@testing-library/react-hooks";
+import { useLocation } from "react-router";
+
+import { useBackLinkWithState } from "./useBackLinkWithState";
+
+jest.mock("react-router", () => ({
+  useLocation: jest.fn(),
+}));
+
+describe("useBackLinkWithState", () => {
+  // Arrange
+  it("should return path if there is no previous location in state", () => {
+    (useLocation as jest.Mock).mockReturnValue({
+      state: {},
+    });
+
+    // Act
+    const { result } = renderHook(() =>
+      useBackLinkWithState({
+        path: "/orders",
+      }),
+    );
+
+    // Assert
+    expect(result.current).toBe("/orders");
+  });
+
+  it("should return the previous URL if it is an order list path", () => {
+    // Arrange
+
+    (useLocation as jest.Mock).mockReturnValue({
+      state: {
+        prevLocation: {
+          pathname: "/orders",
+          search: "?asc=false&after=cursor",
+        },
+      },
+    });
+
+    // Act
+    const { result } = renderHook(() =>
+      useBackLinkWithState({
+        path: "/orders",
+      }),
+    );
+
+    // Assert
+    expect(result.current).toBe("/orders?asc=false&after=cursor");
+  });
+
+  it("should return the previous URL if it is a draft order list path", () => {
+    // Arrange
+    (useLocation as jest.Mock).mockReturnValue({
+      state: {
+        prevLocation: {
+          pathname: "/orders/drafts",
+          search: "?asc=false&after=cursor",
+        },
+      },
+    });
+
+    // Act
+    const { result } = renderHook(() =>
+      useBackLinkWithState({
+        path: "/orders/drafts",
+      }),
+    );
+
+    // Assert
+    expect(result.current).toBe("/orders/drafts?asc=false&after=cursor");
+  });
+});

src/hooks/useBackLinkWithState.ts

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router";
+import urljoin from "url-join";
+
+type LocationWithState = Location & {
+  state?: {
+    prevLocation?: Location;
+  };
+};
+
+const getPreviousUrl = (location: LocationWithState) => {
+  if (!location.state?.prevLocation) {
+    return null;
+  }
+
+  const { pathname, search } = location.state.prevLocation;
+
+  return urljoin(pathname, search);
+};
+
+interface UseBackLinkWithState {
+  path: string;
+}
+
+export const useBackLinkWithState = ({ path }: UseBackLinkWithState) => {
+  const location = useLocation();
+  const [backLink, setBackLink] = useState<string>(path);
+
+  useEffect(() => {
+    if (location.state) {
+      const previousUrl = getPreviousUrl(location as LocationWithState);
+
+      // Prevent other links from being set as back link
+      const isCorrectPath = previousUrl?.includes(path);
+
+      if (isCorrectPath && previousUrl) {
+        setBackLink(previousUrl);
+      }
+    }
+  }, [location, path]);
+
+  return backLink;
+};

src/hooks/useNavigator.ts

@@ -2,32 +2,35 @@ import { ExitFormDialogContext } from "@dashboard/components/Form/ExitFormDialog
 import { useContext } from "react";
 import useRouter from "use-react-router";
 
-export type UseNavigatorResult = (
-  url: string,
-  opts?: {
-    replace?: boolean;
-    preserveQs?: boolean;
-    resetScroll?: boolean;
-  },
-) => void;
+export type NavigatorOpts = {
+  replace?: boolean;
+  preserveQs?: boolean;
+  resetScroll?: boolean;
+  state?: Record<string, unknown>;
+};
+
+export type UseNavigatorResult = (url: string, opts?: NavigatorOpts) => void;
 function useNavigator(): UseNavigatorResult {
   const {
     location: { search },
     history,
   } = useRouter();
   const { shouldBlockNavigation } = useContext(ExitFormDialogContext);
 
-  return (url: string, { replace = false, preserveQs = false, resetScroll = false } = {}) => {
+  return (
+    url: string,
+    { replace = false, preserveQs = false, resetScroll = false, state } = {},
+  ) => {
     if (shouldBlockNavigation()) {
       return;
     }
 
     const targetUrl = preserveQs ? url + search : url;
 
     if (replace) {
-      history.replace(targetUrl);
+      history.replace(targetUrl, state);
     } else {
-      history.push(targetUrl);
+      history.push(targetUrl, state);
     }
 
     if (resetScroll) {

src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx

@@ -20,6 +20,7 @@ import {
   OrderStatus,
   TransactionActionEnum,
 } from "@dashboard/graphql";
+import { useBackLinkWithState } from "@dashboard/hooks/useBackLinkWithState";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { defaultGraphiQLQuery } from "@dashboard/orders/queries";
@@ -172,14 +173,18 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
     context.setDevModeVisibility(true);
   };
 
+  const backLinkUrl = useBackLinkWithState({
+    path: orderListUrl(),
+  });
+
   return (
     <Form confirmLeave initial={initial} onSubmit={handleSubmit} mergeData={false}>
       {({ set, triggerChange, data, submit }) => {
         const handleChangeMetadata = createMetadataHandler(data, set, triggerChange);
 
         return (
           <DetailPageLayout>
-            <TopNav href={orderListUrl()} title={<Title order={order} />}>
+            <TopNav href={backLinkUrl} title={<Title order={order} />}>
               <CardMenu
                 menuItems={[
                   ...selectCardMenuItems,

src/orders/components/OrderDraftListDatagrid/OrderDraftListDatagrid.tsx

@@ -14,6 +14,7 @@ import { Item } from "@glideapps/glide-data-grid";
 import { Box } from "@saleor/macaw-ui-next";
 import React, { useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
+import { useLocation } from "react-router";
 
 import { createGetCellContent, orderDraftListStaticColumnsAdapter } from "./datagrid";
 import { messages } from "./messages";
@@ -37,6 +38,7 @@ export const OrderDraftListDatagrid = ({
   onUpdateListSettings,
   onSelectOrderDraftIds,
 }: OrderDraftListDatagridProps) => {
+  const location = useLocation();
   const intl = useIntl();
   const { locale } = useLocale();
   const datagridState = useDatagridChangeState();
@@ -123,6 +125,11 @@ export const OrderDraftListDatagrid = ({
             onToggle={handlers.onToggle}
           />
         )}
+        navigatorOpts={{
+          state: {
+            prevLocation: location,
+          },
+        }}
       />
 
       <Box paddingX={6}>

src/orders/components/OrderDraftPage/OrderDraftPage.tsx

@@ -13,6 +13,7 @@ import {
   OrderLineInput,
   SearchCustomersQuery,
 } from "@dashboard/graphql";
+import { useBackLinkWithState } from "@dashboard/hooks/useBackLinkWithState";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import OrderChannelSectionCard from "@dashboard/orders/components/OrderChannelSectionCard";
@@ -51,6 +52,8 @@ export interface OrderDraftPageProps extends FetchMoreProps {
   onShowMetadata: (id: string) => void;
 }
 
+const draftOrderListUrl = orderDraftListUrl();
+
 const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
   const {
     loading,
@@ -78,11 +81,14 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
   } = props;
   const navigate = useNavigator();
   const intl = useIntl();
+  const backLinkUrl = useBackLinkWithState({
+    path: draftOrderListUrl,
+  });
 
   return (
     <DetailPageLayout>
       <TopNav
-        href={orderDraftListUrl()}
+        href={backLinkUrl}
         title={
           <Box display="flex" alignItems="center" gap={3}>
             <span>{order?.number ? "#" + order?.number : undefined}</span>

src/orders/components/OrderListDatagrid/OrderListDatagrid.tsx

@@ -15,6 +15,7 @@ import { Item } from "@glideapps/glide-data-grid";
 import { Box } from "@saleor/macaw-ui-next";
 import React, { useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
+import { useLocation } from "react-router";
 
 import { orderListStaticColumnAdapter, useGetCellContent } from "./datagrid";
 import { messages } from "./messages";
@@ -38,6 +39,7 @@ export const OrderListDatagrid: React.FC<OrderListDatagridProps> = ({
   hasRowHover,
   rowAnchor,
 }) => {
+  const location = useLocation();
   const intl = useIntl();
   const datagrid = useDatagridChangeState();
   const ordersLength = getOrdersRowsLength(orders, disabled);
@@ -127,6 +129,11 @@ export const OrderListDatagrid: React.FC<OrderListDatagridProps> = ({
           )}
           onRowClick={handleRowClick}
           rowAnchor={handleRowAnchor}
+          navigatorOpts={{
+            state: {
+              prevLocation: location,
+            },
+          }}
         />
 
         <Box paddingX={6}>