Back links with pagination and filters (#5200)

* improve backlink in order details * fix tests * pass navigator opts to datagrid * make hook generic * fix ts * fix test * back links with pagination and filters * back links with pagination and filters
saleor · Oct 23, 2024 · 6c85d52 · 6c85d52
1 parent 12edac4
commit 6c85d52
Show file tree

Hide file tree

Showing 37 changed files with 260 additions and 61 deletions.
diff --git a/.changeset/pretty-cobras-remember.md b/.changeset/pretty-cobras-remember.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Back buttons now navigate to the list with previously used filters and pagination applied.
diff --git a/src/attributes/components/AttributeListDatagrid/AttributeListDatagrid.tsx b/src/attributes/components/AttributeListDatagrid/AttributeListDatagrid.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 { attributesListStaticColumnsAdapter, createGetCellContent } from "./datagrid";
 import { messages } from "./messages";
@@ -33,6 +34,7 @@ export const AttributeListDatagrid = ({
   onUpdateListSettings,
 }: AttributeListDatagridProps) => {
   const datagridState = useDatagridChangeState();
+  const location = useLocation();
   const navigate = useNavigator();
   const intl = useIntl();
   const attributesListStaticColumns = useMemo(
@@ -66,7 +68,11 @@ export const AttributeListDatagrid = ({
       const rowData: AttributeFragment = attributes[row];
 
       if (rowData) {
-        navigate(attributeUrl(rowData.id));
+        navigate(attributeUrl(rowData.id), {
+          state: {
+            prevLocation: location,
+          },
+        });
       }
     },
     [attributes],

diff --git a/src/attributes/components/AttributePage/AttributePage.tsx b/src/attributes/components/AttributePage/AttributePage.tsx
@@ -1,4 +1,4 @@
-import { attributeListUrl } from "@dashboard/attributes/urls";
+import { attributeListPath } from "@dashboard/attributes/urls";
 import { ATTRIBUTE_TYPES_WITH_DEDICATED_VALUES } from "@dashboard/attributes/utils/data";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
@@ -18,6 +18,7 @@ import {
   AttributeTypeEnum,
   MeasurementUnitsEnum,
 } from "@dashboard/graphql";
+import { useBackLinkWithState } from "@dashboard/hooks/useBackLinkWithState";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { ListSettings, ReorderAction } from "@dashboard/types";
@@ -135,6 +136,10 @@ const AttributePage: React.FC<AttributePageProps> = ({
     });
   };
 
+  const attributePageBackLink = useBackLinkWithState({
+    path: attributeListPath,
+  });
+
   return (
     <Form confirmLeave initial={initialForm} onSubmit={handleSubmit} disabled={disabled}>
       {({ change, set, data, isSaveDisabled, submit, errors, setError, clearErrors }) => {
@@ -144,7 +149,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
           <>
             <DetailPageLayout>
               <TopNav
-                href={attributeListUrl()}
+                href={attributePageBackLink}
                 title={
                   attribute === null
                     ? intl.formatMessage({
@@ -207,7 +212,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
               <Savebar>
                 {attribute !== null && <Savebar.DeleteButton onClick={onDelete} />}
                 <Savebar.Spacer />
-                <Savebar.CancelButton onClick={() => navigate(attributeListUrl())} />
+                <Savebar.CancelButton onClick={() => navigate(attributePageBackLink)} />
                 <Savebar.ConfirmButton
                   transitionState={saveButtonBarState}
                   onClick={submit}

diff --git a/src/categories/components/CategoryListDatagrid/CategoryListDatagrid.tsx b/src/categories/components/CategoryListDatagrid/CategoryListDatagrid.tsx
@@ -13,6 +13,7 @@ import { Item } from "@glideapps/glide-data-grid";
 import { Box } from "@saleor/macaw-ui-next";
 import React, { ReactNode, useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
+import { useLocation } from "react-router";
 
 import { categoryListStaticColumnsAdapter, createGetCellContent } from "./datagrid";
 import { messages } from "./messages";
@@ -37,6 +38,7 @@ export const CategoryListDatagrid = ({
   selectionActionButton = null,
   hasRowHover = true,
 }: CategoryListDatagridProps) => {
+  const location = useLocation();
   const datagridState = useDatagridChangeState();
   const intl = useIntl();
   const memoizedStaticColumns = useMemo(
@@ -103,6 +105,11 @@ export const CategoryListDatagrid = ({
             staticColumns={staticColumns}
           />
         )}
+        navigatorOpts={{
+          state: {
+            prevLocation: location,
+          },
+        }}
       />
 
       <Box paddingX={6}>

diff --git a/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx b/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx
@@ -1,4 +1,4 @@
-import { categoryListUrl, categoryUrl } from "@dashboard/categories/urls";
+import { categoryListPath, categoryUrl } from "@dashboard/categories/urls";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
@@ -8,6 +8,7 @@ import { Savebar } from "@dashboard/components/Savebar";
 import { SeoForm } from "@dashboard/components/SeoForm";
 import { Tab, TabContainer } from "@dashboard/components/Tab";
 import { CategoryDetailsQuery, ProductErrorFragment } from "@dashboard/graphql";
+import { useBackLinkWithState } from "@dashboard/hooks/useBackLinkWithState";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { sprinkles } from "@saleor/macaw-ui-next";
@@ -74,7 +75,12 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
 }: CategoryUpdatePageProps) => {
   const intl = useIntl();
   const navigate = useNavigator();
-  const backHref = category?.parent?.id ? categoryUrl(category?.parent?.id) : categoryListUrl();
+
+  const categoryBackListUrl = useBackLinkWithState({
+    path: categoryListPath,
+  });
+
+  const backHref = category?.parent?.id ? categoryUrl(category?.parent?.id) : categoryBackListUrl;
 
   return (
     <CategoryUpdateForm category={category} onSubmit={onSubmit} disabled={disabled}>

diff --git a/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
@@ -1,6 +1,6 @@
 // @ts-strict-ignore
 import { ChannelCollectionData } from "@dashboard/channels/utils";
-import { collectionListUrl } from "@dashboard/collections/urls";
+import { collectionListPath } from "@dashboard/collections/urls";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
@@ -15,6 +15,7 @@ import {
   CollectionErrorFragment,
   PermissionEnum,
 } from "@dashboard/graphql";
+import { useBackLinkWithState } from "@dashboard/hooks/useBackLinkWithState";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import React from "react";
@@ -62,6 +63,10 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
   const intl = useIntl();
   const navigate = useNavigator();
 
+  const collectionListBackLink = useBackLinkWithState({
+    path: collectionListPath,
+  });
+
   return (
     <CollectionUpdateForm
       collection={collection}
@@ -72,7 +77,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
     >
       {({ change, data, handlers, submit, isSaveDisabled }) => (
         <DetailPageLayout>
-          <TopNav href={collectionListUrl()} title={collection?.name} />
+          <TopNav href={collectionListBackLink} title={collection?.name} />
           <DetailPageLayout.Content>
             <CollectionDetails data={data} disabled={disabled} errors={errors} onChange={change} />
             <CardSpacer />
@@ -138,7 +143,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
           <Savebar>
             <Savebar.DeleteButton onClick={onCollectionRemove} />
             <Savebar.Spacer />
-            <Savebar.CancelButton onClick={() => navigate(collectionListUrl())} />
+            <Savebar.CancelButton onClick={() => navigate(collectionListBackLink)} />
             <Savebar.ConfirmButton
               transitionState={saveButtonBarState}
               onClick={submit}

diff --git a/src/collections/components/CollectionListPage/CollectionListPage.tsx b/src/collections/components/CollectionListPage/CollectionListPage.tsx
@@ -18,6 +18,7 @@ import { FilterPageProps, PageListProps, SortPage } from "@dashboard/types";
 import { Box, Button, ChevronRightIcon } from "@saleor/macaw-ui-next";
 import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { useLocation } from "react-router";
 
 import { CollectionListDatagrid } from "../CollectionListDatagrid";
 import { CollectionFilterKeys, CollectionListFilterOpts, createFilterStructure } from "./filters";
@@ -59,6 +60,7 @@ const CollectionListPage: React.FC<CollectionListPageProps> = ({
   ...listProps
 }) => {
   const intl = useIntl();
+  const location = useLocation();
   const navigate = useNavigator();
   const filterStructure = createFilterStructure(intl, filterOpts);
   const [isFilterPresetOpen, setFilterPresetOpen] = useState(false);
@@ -140,7 +142,11 @@ const CollectionListPage: React.FC<CollectionListPageProps> = ({
           selectedChannelId={selectedChannelId}
           filterDependency={filterDependency}
           onRowClick={id => {
-            navigate(collectionUrl(id));
+            navigate(collectionUrl(id), {
+              state: {
+                prevLocation: location,
+              },
+            });
           }}
           hasRowHover={!isFilterPresetOpen}
           rowAnchor={collectionUrl}

diff --git a/src/components/TableRowLink/TableRowLink.tsx b/src/components/TableRowLink/TableRowLink.tsx
@@ -3,13 +3,15 @@ import { TableRow, TableRowTypeMap } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
 import clsx from "clsx";
 import React, { forwardRef } from "react";
-import { Link } from "react-router-dom";
+import { Link, LinkProps } from "react-router-dom";
 
 type MaterialTableRowPropsType = TableRowTypeMap["props"];
 
+type LocationDescriptor = LinkProps["to"];
+
 export interface TableRowLinkProps extends MaterialTableRowPropsType {
   children: React.ReactNode;
-  href?: string;
+  href?: string | LocationDescriptor;
   className?: string;
   linkClassName?: string;
   onClick?: () => void;
@@ -28,7 +30,7 @@ const TableRowLink = forwardRef<HTMLTableRowElement, TableRowLinkProps>((props,
   const { href, children, linkClassName, onClick, ...restProps } = props;
   const classes = useStyles();
 
-  if (!href || isExternalURL(href)) {
+  if (!href || (typeof href === "string" && isExternalURL(href))) {
     return (
       <TableRow ref={ref} hover={!!onClick} onClick={onClick} {...restProps}>
         {children}

diff --git a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
@@ -15,9 +15,10 @@ import { Metadata } from "@dashboard/components/Metadata/Metadata";
 import { MetadataFormData } from "@dashboard/components/Metadata/types";
 import RequirePermissions from "@dashboard/components/RequirePermissions";
 import { Savebar } from "@dashboard/components/Savebar";
-import { customerAddressesUrl, customerListUrl } from "@dashboard/customers/urls";
+import { customerAddressesUrl, customerListPath } from "@dashboard/customers/urls";
 import CustomerGiftCardsCard from "@dashboard/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCard";
 import { AccountErrorFragment, CustomerDetailsQuery, PermissionEnum } from "@dashboard/graphql";
+import { useBackLinkWithState } from "@dashboard/hooks/useBackLinkWithState";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { sectionNames } from "@dashboard/intl";
@@ -81,18 +82,22 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
     customerId,
   );
 
+  const customerBackLink = useBackLinkWithState({
+    path: customerListPath,
+  });
+
   return (
     <Form confirmLeave initial={initialForm} onSubmit={onSubmit} disabled={disabled}>
       {({ change, data, isSaveDisabled, submit }) => {
         const changeMetadata = makeMetadataChangeHandler(change);
 
         return (
           <DetailPageLayout>
-            <TopNav href={customerListUrl()} title={getUserName(customer, true)}>
+            <TopNav href={customerBackLink} title={getUserName(customer, true)}>
               {extensionMenuItems.length > 0 && <CardMenu menuItems={extensionMenuItems} />}
             </TopNav>
             <DetailPageLayout.Content>
-              <Backlink href={customerListUrl()}>
+              <Backlink href={customerBackLink}>
                 {intl.formatMessage(sectionNames.customers)}
               </Backlink>
               <CustomerDetails
@@ -132,7 +137,7 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
             <Savebar>
               <Savebar.DeleteButton onClick={onDelete} />
               <Savebar.Spacer />
-              <Savebar.CancelButton onClick={() => navigate(customerListUrl())} />
+              <Savebar.CancelButton onClick={() => navigate(customerBackLink)} />
               <Savebar.ConfirmButton
                 transitionState={saveButtonBar}
                 onClick={submit}

diff --git a/src/customers/components/CustomerListDatagrid/CustomerListDatagrid.tsx b/src/customers/components/CustomerListDatagrid/CustomerListDatagrid.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 { createGetCellContent, customerListStaticColumnsAdapter } from "./datagrid";
 import { messages } from "./messages";
@@ -42,6 +43,7 @@ export const CustomerListDatagrid = ({
   onSort,
 }: CustomerListDatagridProps) => {
   const intl = useIntl();
+  const location = useLocation();
   const datagrid = useDatagridChangeState();
   const userPermissions = useUserPermissions();
   const hasManageOrdersPermission =
@@ -135,6 +137,11 @@ export const CustomerListDatagrid = ({
             onToggle={handlers.onToggle}
           />
         )}
+        navigatorOpts={{
+          state: {
+            prevLocation: location,
+          },
+        }}
       />
 
       <Box paddingX={6}>

diff --git a/src/discounts/components/DiscountDetailsPage/DiscountDetailsPage.tsx b/src/discounts/components/DiscountDetailsPage/DiscountDetailsPage.tsx
@@ -1,7 +1,6 @@
 import { TopNav } from "@dashboard/components/AppLayout";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
-import { discountListUrl } from "@dashboard/discounts/discountsUrls";
 import { Rule } from "@dashboard/discounts/models";
 import { DiscoutFormData } from "@dashboard/discounts/types";
 import {
@@ -38,6 +37,7 @@ export interface DiscountDetailsPageProps {
   onRuleDeleteSubmit: (id: string) => void;
   ruleDeleteButtonState: ConfirmButtonTransitionState;
   onBack: () => void;
+  backLinkHref: string;
 }
 
 export const DiscountDetailsPage = ({
@@ -55,13 +55,14 @@ export const DiscountDetailsPage = ({
   ruleCreateButtonState,
   ruleUpdateButtonState,
   ruleDeleteButtonState,
+  backLinkHref,
 }: DiscountDetailsPageProps) => {
   const intl = useIntl();
   const formErrors = getFormErrors(["name"], errors);
 
   return (
     <DetailPageLayout gridTemplateColumns={1}>
-      <TopNav href={discountListUrl()} title={data?.name} />
+      <TopNav href={backLinkHref} title={data?.name} />
       <DetailPageLayout.Content>
         <DiscountDetailsForm
           data={data}

diff --git a/src/discounts/components/DiscountListPage/DiscountListPage.tsx b/src/discounts/components/DiscountListPage/DiscountListPage.tsx
@@ -17,6 +17,7 @@ import { FilterPresetsProps, PageListProps, SortPage } from "@dashboard/types";
 import { Box, Button, ChevronRightIcon } from "@saleor/macaw-ui-next";
 import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { useLocation } from "react-router";
 
 import { DiscountListDatagrid } from "../DiscountListDatagrid";
 
@@ -45,9 +46,14 @@ const DiscountListPage: React.FC<DiscountListPageProps> = ({
 }) => {
   const intl = useIntl();
   const navigation = useNavigator();
+  const location = useLocation();
   const [isFilterPresetOpen, setFilterPresetOpen] = useState(false);
   const handleRowClick = (id: string) => {
-    navigation(discountUrl(id));
+    navigation(discountUrl(id), {
+      state: {
+        prevLocation: location,
+      },
+    });
   };
 
   return (