From 458e9dc2cccc381079dbe4cafaf7e6fb7fd40fd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Thu, 30 Jan 2025 10:32:10 +0100 Subject: [PATCH 1/6] Fix open with cmd key --- src/components/Datagrid/Datagrid.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Datagrid/Datagrid.tsx b/src/components/Datagrid/Datagrid.tsx index d4f4659b25..fb11d36f6c 100644 --- a/src/components/Datagrid/Datagrid.tsx +++ b/src/components/Datagrid/Datagrid.tsx @@ -533,12 +533,10 @@ export const Datagrid: React.FC = ({ e.preventDefault(); if (e.currentTarget.dataset.reactRouterPath) { - const url = e.currentTarget.dataset.reactRouterPath; - if (e.metaKey || e.ctrlKey) { - window.open(url, "_blank"); + window.open(e.currentTarget.href, "_blank"); } else { - navigate(url, navigatorOpts); + navigate(e.currentTarget.dataset.reactRouterPath, navigatorOpts); } } }} From 4a366337e257aec58419e102e7ed524cc3e42465 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Thu, 30 Jan 2025 10:34:04 +0100 Subject: [PATCH 2/6] Add changeset --- .changeset/five-bears-doubt.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/five-bears-doubt.md diff --git a/.changeset/five-bears-doubt.md b/.changeset/five-bears-doubt.md new file mode 100644 index 0000000000..12c431600b --- /dev/null +++ b/.changeset/five-bears-doubt.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": patch +--- + +Opening item in new tab using cmd key on datagrid now takes into account mounting point From e4610c2c2c4ae1c53644722c223cf95c661c9565 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Thu, 30 Jan 2025 10:48:38 +0100 Subject: [PATCH 3/6] Log href --- src/components/Datagrid/Datagrid.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Datagrid/Datagrid.tsx b/src/components/Datagrid/Datagrid.tsx index fb11d36f6c..f0434dc008 100644 --- a/src/components/Datagrid/Datagrid.tsx +++ b/src/components/Datagrid/Datagrid.tsx @@ -534,6 +534,8 @@ export const Datagrid: React.FC = ({ if (e.currentTarget.dataset.reactRouterPath) { if (e.metaKey || e.ctrlKey) { + // eslint-disable-next-line no-console + console.log("Current url", e.currentTarget.href); window.open(e.currentTarget.href, "_blank"); } else { navigate(e.currentTarget.dataset.reactRouterPath, navigatorOpts); From f6047cf47287d24b264040b39a6c032a1ed1062a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Thu, 30 Jan 2025 11:04:21 +0100 Subject: [PATCH 4/6] Remove console.log and use default action --- src/components/Datagrid/Datagrid.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Datagrid/Datagrid.tsx b/src/components/Datagrid/Datagrid.tsx index f0434dc008..66e30dc266 100644 --- a/src/components/Datagrid/Datagrid.tsx +++ b/src/components/Datagrid/Datagrid.tsx @@ -530,16 +530,16 @@ export const Datagrid: React.FC = ({ aria-hidden={true} onWheelCapture={hideLinkAndShowAfterDelay} onClick={e => { + // When someone clicks with CMD key to open in new tab we should not prevent default + if (e.metaKey || e.ctrlKey) { + return; + } + + // Prevent default when navigate with react-router e.preventDefault(); if (e.currentTarget.dataset.reactRouterPath) { - if (e.metaKey || e.ctrlKey) { - // eslint-disable-next-line no-console - console.log("Current url", e.currentTarget.href); - window.open(e.currentTarget.href, "_blank"); - } else { - navigate(e.currentTarget.dataset.reactRouterPath, navigatorOpts); - } + navigate(e.currentTarget.dataset.reactRouterPath, navigatorOpts); } }} /> From 16ae2f5485c900fb75ac78e9d8d3b8f47b2c61c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Fri, 31 Jan 2025 12:24:03 +0100 Subject: [PATCH 5/6] Add tests --- src/components/Datagrid/Datagrid.tsx | 16 +---- .../hooks/useRowAnchorHandler.test.ts | 63 +++++++++++++++++++ .../Datagrid/hooks/useRowAnchorHandler.ts | 23 +++++++ 3 files changed, 89 insertions(+), 13 deletions(-) create mode 100644 src/components/Datagrid/hooks/useRowAnchorHandler.test.ts create mode 100644 src/components/Datagrid/hooks/useRowAnchorHandler.ts diff --git a/src/components/Datagrid/Datagrid.tsx b/src/components/Datagrid/Datagrid.tsx index 66e30dc266..55f0dbf5e0 100644 --- a/src/components/Datagrid/Datagrid.tsx +++ b/src/components/Datagrid/Datagrid.tsx @@ -1,5 +1,6 @@ import "@glideapps/glide-data-grid/dist/index.css"; +import { useRowAnchorHandler } from "@dashboard/components/Datagrid/hooks/useRowAnchorHandler"; import useNavigator, { NavigatorOpts } from "@dashboard/hooks/useNavigator"; import { usePreventHistoryBack } from "@dashboard/hooks/usePreventHistoryBack"; import { getCellAction } from "@dashboard/products/components/ProductListDatagrid/datagrid"; @@ -152,6 +153,7 @@ export const Datagrid: React.FC = ({ rowMarkers, availableColumns, }); + const rowAnchorHandler = useRowAnchorHandler(navigate, navigatorOpts); const { handleRowHover, hoverRow } = useRowHover({ hasRowHover, @@ -529,19 +531,7 @@ export const Datagrid: React.FC = ({ tabIndex={-1} aria-hidden={true} onWheelCapture={hideLinkAndShowAfterDelay} - onClick={e => { - // When someone clicks with CMD key to open in new tab we should not prevent default - if (e.metaKey || e.ctrlKey) { - return; - } - - // Prevent default when navigate with react-router - e.preventDefault(); - - if (e.currentTarget.dataset.reactRouterPath) { - navigate(e.currentTarget.dataset.reactRouterPath, navigatorOpts); - } - }} + onClick={rowAnchorHandler} /> )} diff --git a/src/components/Datagrid/hooks/useRowAnchorHandler.test.ts b/src/components/Datagrid/hooks/useRowAnchorHandler.test.ts new file mode 100644 index 0000000000..ac38b5cfa9 --- /dev/null +++ b/src/components/Datagrid/hooks/useRowAnchorHandler.test.ts @@ -0,0 +1,63 @@ +import { renderHook } from "@testing-library/react-hooks"; + +import { useRowAnchorHandler } from "./useRowAnchorHandler"; + +describe("useRowAnchorHandler", () => { + it("should navigate to the given path", () => { + // Arrange + const navigate = jest.fn(); + const navigatorOpts = { replace: true }; + const handler = renderHook(() => useRowAnchorHandler(navigate, navigatorOpts)).result.current; + const event = { + preventDefault: jest.fn(), + currentTarget: { + dataset: { + reactRouterPath: "/some-path", + }, + }, + }; + + // Act + handler(event as any); + + // Assert + expect(event.preventDefault).toHaveBeenCalled(); + expect(navigate).toHaveBeenCalledWith("/some-path", navigatorOpts); + }); + + it("should not prevent default when CMD key is pressed", () => { + // Arrange + const navigate = jest.fn(); + const handler = renderHook(() => useRowAnchorHandler(navigate)).result.current; + const event = { + preventDefault: jest.fn(), + metaKey: true, + ctrlKey: false, + }; + + // Act + handler(event as any); + + // Assert + expect(event.preventDefault).not.toHaveBeenCalled(); + expect(navigate).not.toHaveBeenCalled(); + }); + + it("should not prevent default when CTRL key is pressed", () => { + // Arrange + const navigate = jest.fn(); + const handler = renderHook(() => useRowAnchorHandler(navigate)).result.current; + const event = { + preventDefault: jest.fn(), + metaKey: false, + ctrlKey: true, + }; + + // Act + handler(event as any); + + // Assert + expect(event.preventDefault).not.toHaveBeenCalled(); + expect(navigate).not.toHaveBeenCalled(); + }); +}); diff --git a/src/components/Datagrid/hooks/useRowAnchorHandler.ts b/src/components/Datagrid/hooks/useRowAnchorHandler.ts new file mode 100644 index 0000000000..e09d0b7d3f --- /dev/null +++ b/src/components/Datagrid/hooks/useRowAnchorHandler.ts @@ -0,0 +1,23 @@ +import { NavigatorOpts, UseNavigatorResult } from "@dashboard/hooks/useNavigator"; +import { MouseEvent } from "react"; + +export const useRowAnchorHandler = ( + navigate: UseNavigatorResult, + navigatorOpts?: NavigatorOpts, +) => { + return (e: MouseEvent) => { + // When someone clicks with CMD key to open in new tab, we should not prevent default + if (e.metaKey || e.ctrlKey) { + return; + } + + // Prevent default when navigate with browser router + e.preventDefault(); + + if (e.currentTarget.dataset.reactRouterPath) { + // Navigate gets only a path to navigate, for example, /products/1 + // Navigate use browser router and cover case when url is with /dashboard or not + navigate(e.currentTarget.dataset.reactRouterPath, navigatorOpts); + } + }; +}; From 789cfe5bf35e3f45b4458001887a55217242ef4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Fri, 31 Jan 2025 12:32:44 +0100 Subject: [PATCH 6/6] Change mocking --- src/components/Datagrid/Datagrid.tsx | 5 ++-- .../hooks/useRowAnchorHandler.test.ts | 23 ++++++++++++++++--- .../Datagrid/hooks/useRowAnchorHandler.ts | 9 ++++---- 3 files changed, 26 insertions(+), 11 deletions(-) diff --git a/src/components/Datagrid/Datagrid.tsx b/src/components/Datagrid/Datagrid.tsx index 55f0dbf5e0..c628b7d5b3 100644 --- a/src/components/Datagrid/Datagrid.tsx +++ b/src/components/Datagrid/Datagrid.tsx @@ -1,7 +1,7 @@ import "@glideapps/glide-data-grid/dist/index.css"; import { useRowAnchorHandler } from "@dashboard/components/Datagrid/hooks/useRowAnchorHandler"; -import useNavigator, { NavigatorOpts } from "@dashboard/hooks/useNavigator"; +import { NavigatorOpts } from "@dashboard/hooks/useNavigator"; import { usePreventHistoryBack } from "@dashboard/hooks/usePreventHistoryBack"; import { getCellAction } from "@dashboard/products/components/ProductListDatagrid/datagrid"; import DataEditor, { @@ -140,7 +140,6 @@ export const Datagrid: React.FC = ({ const datagridTheme = useDatagridTheme(readonly, readonly); const editor = useRef(null); const customRenderers = useCustomCellRenderers(); - const navigate = useNavigator(); const { scrolledToRight, scroller } = useScrollRight(); const fullScreenClasses = useFullScreenStyles(classes); const { isOpen, isAnimationOpenFinished, toggle } = useFullScreenMode(); @@ -153,7 +152,7 @@ export const Datagrid: React.FC = ({ rowMarkers, availableColumns, }); - const rowAnchorHandler = useRowAnchorHandler(navigate, navigatorOpts); + const rowAnchorHandler = useRowAnchorHandler(navigatorOpts); const { handleRowHover, hoverRow } = useRowHover({ hasRowHover, diff --git a/src/components/Datagrid/hooks/useRowAnchorHandler.test.ts b/src/components/Datagrid/hooks/useRowAnchorHandler.test.ts index ac38b5cfa9..0fa8a6c99a 100644 --- a/src/components/Datagrid/hooks/useRowAnchorHandler.test.ts +++ b/src/components/Datagrid/hooks/useRowAnchorHandler.test.ts @@ -1,13 +1,24 @@ +import useNavigator from "@dashboard/hooks/useNavigator"; import { renderHook } from "@testing-library/react-hooks"; import { useRowAnchorHandler } from "./useRowAnchorHandler"; +jest.mock("@dashboard/hooks/useNavigator", () => jest.fn()); + +jest.mock("@dashboard/hooks/useNavigator", () => ({ + __esModule: true, + default: jest.fn(() => jest.fn()), +})); + describe("useRowAnchorHandler", () => { it("should navigate to the given path", () => { // Arrange const navigate = jest.fn(); + + (useNavigator as jest.Mock).mockReturnValue(navigate); + const navigatorOpts = { replace: true }; - const handler = renderHook(() => useRowAnchorHandler(navigate, navigatorOpts)).result.current; + const handler = renderHook(() => useRowAnchorHandler(navigatorOpts)).result.current; const event = { preventDefault: jest.fn(), currentTarget: { @@ -28,7 +39,10 @@ describe("useRowAnchorHandler", () => { it("should not prevent default when CMD key is pressed", () => { // Arrange const navigate = jest.fn(); - const handler = renderHook(() => useRowAnchorHandler(navigate)).result.current; + + (useNavigator as jest.Mock).mockReturnValue(navigate); + + const handler = renderHook(() => useRowAnchorHandler()).result.current; const event = { preventDefault: jest.fn(), metaKey: true, @@ -46,7 +60,10 @@ describe("useRowAnchorHandler", () => { it("should not prevent default when CTRL key is pressed", () => { // Arrange const navigate = jest.fn(); - const handler = renderHook(() => useRowAnchorHandler(navigate)).result.current; + + (useNavigator as jest.Mock).mockReturnValue(navigate); + + const handler = renderHook(() => useRowAnchorHandler()).result.current; const event = { preventDefault: jest.fn(), metaKey: false, diff --git a/src/components/Datagrid/hooks/useRowAnchorHandler.ts b/src/components/Datagrid/hooks/useRowAnchorHandler.ts index e09d0b7d3f..a85acf35a0 100644 --- a/src/components/Datagrid/hooks/useRowAnchorHandler.ts +++ b/src/components/Datagrid/hooks/useRowAnchorHandler.ts @@ -1,10 +1,9 @@ -import { NavigatorOpts, UseNavigatorResult } from "@dashboard/hooks/useNavigator"; +import useNavigator, { NavigatorOpts } from "@dashboard/hooks/useNavigator"; import { MouseEvent } from "react"; -export const useRowAnchorHandler = ( - navigate: UseNavigatorResult, - navigatorOpts?: NavigatorOpts, -) => { +export const useRowAnchorHandler = (navigatorOpts?: NavigatorOpts) => { + const navigate = useNavigator(); + return (e: MouseEvent) => { // When someone clicks with CMD key to open in new tab, we should not prevent default if (e.metaKey || e.ctrlKey) {