Merge branch 'main' into eng-956-metadata-section

Author: kzuraw

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 3.22.6
+
+### Patch Changes
+
+- [#6002](https://github.com/saleor/saleor-dashboard/pull/6002) [`770e1b1`](https://github.com/saleor/saleor-dashboard/commit/770e1b1a5c621b00e7c8696009dfb6a8d13e6028) Thanks [@lkostrowski](https://github.com/lkostrowski)! - App <iframe>s now enable pop-ups (`"allow-popups"`) which means App can use native links to open new tab, instead using AppBridge action. In the nutshell `<a target="_blank"` is now working. It's still recommended to use `rel="noreferrer"` due to security reasons.
+
+- [#6003](https://github.com/saleor/saleor-dashboard/pull/6003) [`727c049`](https://github.com/saleor/saleor-dashboard/commit/727c049ad39a91a8e1377426f1811ae21bbddefc) Thanks [@lkostrowski](https://github.com/lkostrowski)! - Fixed cmd/ctrl + click on Datagrid rows. Now they will properly open row in the new tab as expected
+
 ## 3.22.5
 
 ### Patch Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "saleor-dashboard",
-  "version": "3.22.5",
+  "version": "3.22.6",
   "repository": {
     "type": "git",
     "url": "git://github.com/saleor/saleor-dashboard.git"

src/categories/components/CategoryListDatagrid/CategoryListDatagrid.tsx

@@ -9,6 +9,7 @@ import {
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
 import { CategoryFragment } from "@dashboard/graphql";
 import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
+import useNavigator from "@dashboard/hooks/useNavigator";
 import { PageListProps, SortPage } from "@dashboard/types";
 import { Item } from "@glideapps/glide-data-grid";
 import { Box } from "@saleor/macaw-ui-next";
@@ -39,6 +40,7 @@ export const CategoryListDatagrid = ({
   selectionActionButton = null,
   hasRowHover = true,
 }: CategoryListDatagridProps) => {
+  const navigate = useNavigator();
   const location = useLocation();
   const datagridState = useDatagridChangeState();
   const intl = useIntl();
@@ -94,6 +96,9 @@ export const CategoryListDatagrid = ({
         onHeaderClicked={handleHeaderClick}
         rowAnchor={handleRowAnchor}
         menuItems={() => []}
+        onRowClick={item => {
+          navigate(handleRowAnchor(item));
+        }}
         actionButtonPosition="right"
         selectionActions={() => selectionActionButton}
         onColumnResize={handlers.onResize}

src/components/Datagrid/Datagrid.tsx

@@ -259,8 +259,17 @@ const Datagrid = ({
         return;
       }
 
-      if (onRowClick) {
+      const intentToOpenInNewTab = args.metaKey || args.ctrlKey;
+
+      /**
+       * Assume rowClick is standard click, if ctrl/cmd is used, let it pass to anchor logic and allow to open in a new tab
+       *
+       * TODO: This can be refactored, but every Datagrid is used a little different way
+       */
+      if (onRowClick && !intentToOpenInNewTab) {
         onRowClick(item);
+
+        return;
       }
 
       if (getCellAction(availableColumns, item[0])) {
@@ -270,7 +279,18 @@ const Datagrid = ({
       handleRowHover(args);
 
       if (rowAnchorRef.current) {
-        rowAnchorRef.current.click();
+        /**
+         * Dispatch click event with modifier keys preserved
+         * This allows CMD/CTRL+click to open in new tab
+         */
+        const clickEvent = new MouseEvent("click", {
+          metaKey: args.metaKey,
+          ctrlKey: args.ctrlKey,
+          shiftKey: args.shiftKey,
+          bubbles: true,
+        });
+
+        rowAnchorRef.current.dispatchEvent(clickEvent);
       }
     },
     [rowMarkers, onRowClick, handleRowHover, rowAnchorRef],

src/extensions/views/ViewManifestExtension/components/AppFrame/AppIFrame.tsx

@@ -41,7 +41,7 @@ const _AppIFrame = forwardRef<HTMLIFrameElement, AppIFrameProps>(
         onLoad={onLoad}
         onError={onError}
         className={className}
-        sandbox="allow-same-origin allow-forms allow-scripts allow-downloads"
+        sandbox="allow-same-origin allow-forms allow-scripts allow-downloads allow-popups"
       />
     );
   },

src/orders/views/OrderDraftList/OrderDraftList.tsx

@@ -160,6 +160,10 @@ const OrderDraftList = ({ params }: OrderDraftListProps) => {
   return (
     <PaginatorContext.Provider value={paginationValues}>
       <OrderDraftListPage
+        // @ts-expect-error - due to strict-ignores, this prop is not typed properly but it is passed.
+        onRowClick={item => {
+          navigate(orderUrl(item));
+        }}
         selectedFilterPreset={selectedPreset}
         filterOpts={getFilterOpts(params)}
         limits={limitOpts.data?.shop.limits}

src/orders/views/OrderList/OrderList.tsx

@@ -138,6 +138,10 @@ const OrderList = ({ params }: OrderListProps) => {
   return (
     <PaginatorContext.Provider value={paginationValues}>
       <OrderListPage
+        // @ts-expect-error - due to strict-ignores, this prop is not typed properly but it is passed.
+        onRowClick={item => {
+          navigate(orderUrl(item));
+        }}
         settings={settings}
         currentTab={selectedPreset}
         disabled={!data}