Fix anchor in datagrid-based lists

.changeset/grumpy-worms-love.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+List item links are no longer rendered outside of cursor. This means you can now copy the item's URL with mouse right click or use middle click to open page in new tab.

src/attributes/components/AttributeListDatagrid/AttributeListDatagrid.tsx

@@ -8,6 +8,7 @@ import {
 } from "@dashboard/components/Datagrid/hooks/useDatagridChange";
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
 import { AttributeFragment } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { ListProps, SortPage } from "@dashboard/types";
 import { Item } from "@glideapps/glide-data-grid";
@@ -69,9 +70,7 @@ export const AttributeListDatagrid = ({
 
       if (rowData) {
         navigate(attributeUrl(rowData.id), {
-          state: {
-            prevLocation: location,
-          },
+          state: getPrevLocationState(location),
         });
       }
     },
@@ -120,6 +119,7 @@ export const AttributeListDatagrid = ({
             onToggle={handlers.onToggle}
           />
         )}
+        navigatorOpts={{ state: getPrevLocationState(location) }}
       />
 
       <Box paddingX={6}>

src/categories/components/CategoryListDatagrid/CategoryListDatagrid.tsx

@@ -8,6 +8,7 @@ import {
 } from "@dashboard/components/Datagrid/hooks/useDatagridChange";
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
 import { CategoryFragment } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import { PageListProps, SortPage } from "@dashboard/types";
 import { Item } from "@glideapps/glide-data-grid";
 import { Box } from "@saleor/macaw-ui-next";
@@ -105,11 +106,7 @@ export const CategoryListDatagrid = ({
             staticColumns={staticColumns}
           />
         )}
-        navigatorOpts={{
-          state: {
-            prevLocation: location,
-          },
-        }}
+        navigatorOpts={{ state: getPrevLocationState(location) }}
       />
 
       <Box paddingX={6}>

src/collections/components/CollectionListDatagrid/CollectionListDatagrid.tsx

@@ -10,6 +10,7 @@ import {
 } from "@dashboard/components/Datagrid/hooks/useDatagridChange";
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
 import { commonTooltipMessages } from "@dashboard/components/TooltipTableCellHeader/messages";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import { ListProps, SortPage } from "@dashboard/types";
 import { Item } from "@glideapps/glide-data-grid";
 import { Box, useTheme } from "@saleor/macaw-ui-next";
@@ -157,6 +158,7 @@ export const CollectionListDatagrid = ({
             onToggle={handlers.onToggle}
           />
         )}
+        navigatorOpts={{ state: getPrevLocationState(location) }}
       />
 
       <Box paddingX={6}>

src/collections/components/CollectionListPage/CollectionListPage.tsx

@@ -12,6 +12,7 @@ import { DashboardCard } from "@dashboard/components/Card";
 import { getByName } from "@dashboard/components/Filter/utils";
 import { FilterPresetsSelect } from "@dashboard/components/FilterPresetsSelect";
 import { ListPageLayout } from "@dashboard/components/Layouts";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { sectionNames } from "@dashboard/intl";
 import { FilterPageProps, PageListProps, SortPage } from "@dashboard/types";
@@ -143,9 +144,7 @@ const CollectionListPage: React.FC<CollectionListPageProps> = ({
           filterDependency={filterDependency}
           onRowClick={id => {
             navigate(collectionUrl(id), {
-              state: {
-                prevLocation: location,
-              },
+              state: getPrevLocationState(location),
             });
           }}
           hasRowHover={!isFilterPresetOpen}

src/components/Card/Root.tsx

@@ -5,14 +5,7 @@ export const Root: React.FC<PropsWithBox<{ children: React.ReactNode }>> = ({
   children,
   ...rest
 }) => (
-  <Box
-    display="flex"
-    flexDirection="column"
-    gap={5}
-    position="relative"
-    backgroundColor="default1"
-    {...rest}
-  >
+  <Box display="flex" flexDirection="column" gap={5} backgroundColor="default1" {...rest}>
     {children}
   </Box>
 );

src/customers/components/CustomerListDatagrid/CustomerListDatagrid.tsx

@@ -10,6 +10,7 @@ import { TablePaginationWithContext } from "@dashboard/components/TablePaginatio
 import { Customer, Customers } from "@dashboard/customers/types";
 import { CustomerListUrlSortField } from "@dashboard/customers/urls";
 import { PermissionEnum } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import { ListProps, SortPage } from "@dashboard/types";
 import { Item } from "@glideapps/glide-data-grid";
 import { Box } from "@saleor/macaw-ui-next";
@@ -137,11 +138,7 @@ export const CustomerListDatagrid = ({
             onToggle={handlers.onToggle}
           />
         )}
-        navigatorOpts={{
-          state: {
-            prevLocation: location,
-          },
-        }}
+        navigatorOpts={{ state: getPrevLocationState(location) }}
       />
 
       <Box paddingX={6}>

src/discounts/components/DiscountListDatagrid/DiscountListDatagrid.tsx

@@ -9,6 +9,7 @@ import { useEmptyColumn } from "@dashboard/components/Datagrid/hooks/useEmptyCol
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
 import { DiscountListUrlSortField, discountUrl } from "@dashboard/discounts/discountsUrls";
 import { PromotionFragment } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import { ListProps, SortPage } from "@dashboard/types";
 import { Item } from "@glideapps/glide-data-grid";
 import { Box } from "@saleor/macaw-ui-next";
@@ -121,6 +122,7 @@ export const DiscountListDatagrid = ({
             onToggle={handlers.onToggle}
           />
         )}
+        navigatorOpts={{ state: getPrevLocationState(location) }}
       />
 
       <Box paddingX={6}>

src/discounts/components/DiscountListPage/DiscountListPage.tsx

@@ -11,6 +11,7 @@ import {
   discountUrl,
 } from "@dashboard/discounts/discountsUrls";
 import { PromotionFragment } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { commonMessages } from "@dashboard/intl";
 import { FilterPresetsProps, PageListProps, SortPage } from "@dashboard/types";
@@ -50,9 +51,7 @@ const DiscountListPage: React.FC<DiscountListPageProps> = ({
   const [isFilterPresetOpen, setFilterPresetOpen] = useState(false);
   const handleRowClick = (id: string) => {
     navigation(discountUrl(id), {
-      state: {
-        prevLocation: location,
-      },
+      state: getPrevLocationState(location),
     });
   };
 

src/discounts/components/SaleListDatagrid/SaleListDatagrid.tsx

@@ -9,6 +9,7 @@ import { TablePaginationWithContext } from "@dashboard/components/TablePaginatio
 import { commonTooltipMessages } from "@dashboard/components/TooltipTableCellHeader/messages";
 import { SaleListUrlSortField, saleUrl } from "@dashboard/discounts/urls";
 import { SaleFragment } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useLocale from "@dashboard/hooks/useLocale";
 import { ChannelProps, ListProps, SortPage } from "@dashboard/types";
 import { Item } from "@glideapps/glide-data-grid";
@@ -141,6 +142,7 @@ export const SaleListDatagrid = ({
             onToggle={handlers.onToggle}
           />
         )}
+        navigatorOpts={{ state: getPrevLocationState(location) }}
       />
 
       <Box paddingX={6}>

src/discounts/components/SaleListPage/SaleListPage.tsx

@@ -7,6 +7,7 @@ import { FilterPresetsSelect } from "@dashboard/components/FilterPresetsSelect";
 import { ListPageLayout } from "@dashboard/components/Layouts";
 import { saleAddUrl, SaleListUrlSortField, saleUrl } from "@dashboard/discounts/urls";
 import { SaleFragment } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { commonMessages } from "@dashboard/intl";
 import {
@@ -60,9 +61,7 @@ const SaleListPage: React.FC<SaleListPageProps> = ({
   const filterDependency = structure.find(getByName("channel"));
   const handleRowClick = (id: string) => {
     navigation(saleUrl(id), {
-      state: {
-        prevLocation: location,
-      },
+      state: getPrevLocationState(location),
     });
   };
 

src/discounts/components/VoucherListDatagrid/VoucherListDatagrid.tsx

@@ -10,6 +10,7 @@ import { commonTooltipMessages } from "@dashboard/components/TooltipTableCellHea
 import { VoucherListUrlSortField, voucherUrl } from "@dashboard/discounts/urls";
 import { canBeSorted } from "@dashboard/discounts/views/VoucherList/sort";
 import { VoucherFragment } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useLocale from "@dashboard/hooks/useLocale";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { ChannelProps, ListProps, SortPage } from "@dashboard/types";
@@ -80,9 +81,7 @@ export const VoucherListDatagrid = ({
 
       if (rowData) {
         navigate(voucherUrl(rowData.id), {
-          state: {
-            prevLocation: location,
-          },
+          state: getPrevLocationState(location),
         });
       }
     },

src/giftCards/GiftCardsList/GiftCardsListDatagrid/GiftCardsListDatagrid.tsx

@@ -8,6 +8,7 @@ import {
 import TablePagination from "@dashboard/components/TablePagination";
 import { commonTooltipMessages } from "@dashboard/components/TooltipTableCellHeader/messages";
 import { giftCardListUrl, giftCardUrl } from "@dashboard/giftCards/urls";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import usePaginator from "@dashboard/hooks/usePaginator";
 import { Item } from "@glideapps/glide-data-grid";
@@ -171,11 +172,7 @@ export const GiftCardsListDatagrid = () => {
             onToggle={handlers.onToggle}
           />
         )}
-        navigatorOpts={{
-          state: {
-            prevLocation: location,
-          },
-        }}
+        navigatorOpts={{ state: getPrevLocationState(location) }}
       />
 
       <Box paddingX={6}>

src/hooks/useBackLinkWithState.ts

@@ -2,12 +2,21 @@ import { useEffect, useState } from "react";
 import { useLocation } from "react-router";
 import urljoin from "url-join";
 
+type LocationData = Pick<Location, "pathname" | "search">;
+
 type LocationWithState = Location & {
   state?: {
-    prevLocation?: Location;
+    prevLocation?: LocationData;
   };
 };
 
+export const getPrevLocationState = (location: LocationData) => ({
+  prevLocation: {
+    pathname: location.pathname,
+    search: location.search,
+  },
+});
+
 const getPreviousUrl = (location: LocationWithState) => {
   if (!location.state?.prevLocation) {
     return null;

src/orders/components/OrderDraftListDatagrid/OrderDraftListDatagrid.tsx

@@ -6,6 +6,7 @@ import {
   useDatagridChangeState,
 } from "@dashboard/components/Datagrid/hooks/useDatagridChange";
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useLocale from "@dashboard/hooks/useLocale";
 import { OrderDraft } from "@dashboard/orders/types";
 import { OrderDraftListUrlSortField, orderUrl } from "@dashboard/orders/urls";
@@ -125,11 +126,7 @@ export const OrderDraftListDatagrid = ({
             onToggle={handlers.onToggle}
           />
         )}
-        navigatorOpts={{
-          state: {
-            prevLocation: location,
-          },
-        }}
+        navigatorOpts={{ state: getPrevLocationState(location) }}
       />
 
       <Box paddingX={6}>

src/orders/components/OrderListDatagrid/OrderListDatagrid.tsx

@@ -9,6 +9,7 @@ import {
 import { useEmptyColumn } from "@dashboard/components/Datagrid/hooks/useEmptyColumn";
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
 import { OrderListQuery } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import { OrderListUrlSortField } from "@dashboard/orders/urls";
 import { ListProps, RelayToFlat, SortPage } from "@dashboard/types";
 import { Item } from "@glideapps/glide-data-grid";
@@ -129,11 +130,7 @@ export const OrderListDatagrid: React.FC<OrderListDatagridProps> = ({
           )}
           onRowClick={handleRowClick}
           rowAnchor={handleRowAnchor}
-          navigatorOpts={{
-            state: {
-              prevLocation: location,
-            },
-          }}
+          navigatorOpts={{ state: getPrevLocationState(location) }}
         />
 
         <Box paddingX={6}>

src/pageTypes/components/PageTypeList/PageTypeList.tsx

@@ -6,6 +6,7 @@ import TableHead from "@dashboard/components/TableHead";
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
 import TableRowLink from "@dashboard/components/TableRowLink";
 import { PageTypeFragment } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import { PageTypeListUrlSortField, pageTypeUrl } from "@dashboard/pageTypes/urls";
 import { getArrowDirection } from "@dashboard/utils/sort";
 import { TableBody, TableCell, TableFooter } from "@material-ui/core";
@@ -86,7 +87,7 @@ const PageTypeList: React.FC<PageTypeListProps> = props => {
                   pageType
                     ? {
                         pathname: pageTypeUrl(pageType.id),
-                        state: { prevLocation: location },
+                        state: getPrevLocationState(location),
                       }
                     : undefined
                 }

src/pages/components/PageListPage/PageListPage.tsx

@@ -4,6 +4,7 @@ import { BulkDeleteButton } from "@dashboard/components/BulkDeleteButton";
 import { DashboardCard } from "@dashboard/components/Card";
 import { FilterPresetsSelect } from "@dashboard/components/FilterPresetsSelect";
 import { ListPageLayout } from "@dashboard/components/Layouts";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { sectionNames } from "@dashboard/intl";
 import { Pages } from "@dashboard/pages/types";
@@ -133,9 +134,7 @@ const PageListPage: React.FC<PageListPageProps> = ({
           rowAnchor={pageUrl}
           onRowClick={id =>
             navigate(pageUrl(id), {
-              state: {
-                prevLocation: location,
-              },
+              state: getPrevLocationState(location),
             })
           }
         />

src/permissionGroups/components/PermissionGroupListDatagrid/PermissionGroupListDatagrid.tsx

@@ -7,6 +7,7 @@ import {
 import { useEmptyColumn } from "@dashboard/components/Datagrid/hooks/useEmptyColumn";
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
 import { PermissionGroupFragment } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import {
   permissionGroupDetailsUrl,
@@ -72,9 +73,7 @@ export const PermissionGroupListDatagrid = ({
 
       if (rowData) {
         navigate(permissionGroupDetailsUrl(rowData.id), {
-          state: {
-            prevLocation: location,
-          },
+          state: getPrevLocationState(location),
         });
       }
     },
@@ -118,6 +117,7 @@ export const PermissionGroupListDatagrid = ({
         onHeaderClicked={handleHeaderClick}
         rowAnchor={handleRowAnchor}
         recentlyAddedColumn={recentlyAddedColumn}
+        navigatorOpts={{ state: getPrevLocationState(location) }}
       />
 
       <Box paddingX={6}>

src/productTypes/components/ProductTypeList/ProductTypeList.tsx

@@ -6,6 +6,7 @@ import TableHead from "@dashboard/components/TableHead";
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
 import TableRowLink from "@dashboard/components/TableRowLink";
 import { ProductTypeFragment } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import { ProductTypeListUrlSortField, productTypeUrl } from "@dashboard/productTypes/urls";
 import { getArrowDirection } from "@dashboard/utils/sort";
 import { TableBody, TableCell, TableFooter } from "@material-ui/core";
@@ -122,7 +123,7 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
                   productType
                     ? {
                         pathname: productTypeUrl(productType.id),
-                        state: { prevLocation: location },
+                        state: getPrevLocationState(location),
                       }
                     : undefined
                 }

src/products/components/ProductListDatagrid/ProductListDatagrid.tsx

@@ -16,6 +16,7 @@ import {
   ProductListQuery,
   useAvailableColumnAttributesLazyQuery,
 } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useLocale from "@dashboard/hooks/useLocale";
 import { ProductListUrlSortField } from "@dashboard/products/urls";
 import { canBeSorted } from "@dashboard/products/views/ProductList/sort";
@@ -25,6 +26,7 @@ import { Item } from "@glideapps/glide-data-grid";
 import { Box, useTheme } from "@saleor/macaw-ui-next";
 import React, { useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
+import { useLocation } from "react-router";
 
 import { getAttributeIdFromColumnValue, isAttributeColumnValue } from "../ProductListPage/utils";
 import {
@@ -85,6 +87,7 @@ export const ProductListDatagrid: React.FC<ProductListDatagridProps> = ({
   const { theme } = useTheme();
   const datagrid = useDatagridChangeState();
   const { locale } = useLocale();
+  const location = useLocation();
   const productsLength = getProductRowsLength(disabled, products, disabled);
   const onPriceClick = usePriceClick({ isChannelSelected });
 
@@ -275,6 +278,7 @@ export const ProductListDatagrid: React.FC<ProductListDatagridProps> = ({
               onToggle={handlers.onToggle}
             />
           )}
+          navigatorOpts={{ state: getPrevLocationState(location) }}
         />
 
         <Box paddingX={6}>

src/products/components/ProductListPage/ProductListPage.tsx

@@ -23,6 +23,7 @@ import {
   RefreshLimitsQuery,
   useAvailableColumnAttributesLazyQuery,
 } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useLocalStorage from "@dashboard/hooks/useLocalStorage";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { sectionNames } from "@dashboard/intl";
@@ -277,9 +278,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
             rowAnchor={productUrl}
             onRowClick={id => {
               navigate(productUrl(id), {
-                state: {
-                  prevLocation: location,
-                },
+                state: getPrevLocationState(location),
               });
             }}
           />

src/shipping/components/ShippingZonesListDatagrid/ShippingZonesListDatagrid.tsx

@@ -6,6 +6,7 @@ import {
 } from "@dashboard/components/Datagrid/hooks/useDatagridChange";
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
 import { ShippingZoneFragment } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useLocale from "@dashboard/hooks/useLocale";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { shippingZoneUrl } from "@dashboard/shipping/urls";
@@ -102,11 +103,7 @@ export const ShippingZoneListDatagrid = ({
         onRowClick={handleRowClick}
         rowAnchor={handleRowAnchor}
         recentlyAddedColumn={recentlyAddedColumn}
-        navigatorOpts={{
-          state: {
-            prevLocation: location,
-          },
-        }}
+        navigatorOpts={{ state: getPrevLocationState(location) }}
       />
 
       <Box paddingX={6}>

src/staff/components/StaffListDatagrid/StaffListDatagrid.tsx

@@ -6,6 +6,7 @@ import {
 } from "@dashboard/components/Datagrid/hooks/useDatagridChange";
 import { useEmptyColumn } from "@dashboard/components/Datagrid/hooks/useEmptyColumn";
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { StaffMember, StaffMembers } from "@dashboard/staff/types";
 import { StaffListUrlSortField, staffMemberDetailsUrl } from "@dashboard/staff/urls";
@@ -69,7 +70,7 @@ export const StaffListDatagrid = ({
 
       if (rowData) {
         navigate(staffMemberDetailsUrl(rowData?.id), {
-          state: { prevLocation: location },
+          state: getPrevLocationState(location),
         });
       }
     },
@@ -112,6 +113,7 @@ export const StaffListDatagrid = ({
         onHeaderClicked={handleHeaderClick}
         rowAnchor={handleRowAnchor}
         recentlyAddedColumn={recentlyAddedColumn}
+        navigatorOpts={{ state: getPrevLocationState(location) }}
       />
 
       <Box paddingX={6}>

src/warehouses/components/WarehouseList/WarehouseList.tsx

@@ -4,6 +4,7 @@ import TableCellHeader from "@dashboard/components/TableCellHeader";
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
 import TableRowLink from "@dashboard/components/TableRowLink";
 import { WarehouseWithShippingFragment } from "@dashboard/graphql";
+import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import { renderCollection, stopPropagation } from "@dashboard/misc";
 import { ListProps, SortPage } from "@dashboard/types";
 import { mapEdgesToItems } from "@dashboard/utils/maps";
@@ -108,7 +109,7 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
                 warehouse
                   ? {
                       pathname: warehouseUrl(warehouse.id),
-                      state: { prevLocation: location },
+                      state: getPrevLocationState(location),
                     }
                   : undefined
               }