From e708b2b693e20a043f10f504eef6166a95891006 Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Thu, 17 Jun 2021 03:43:33 -0700 Subject: [PATCH] Fix links not always opening outside Electron Summary: Changelog: Fix links not always openening in the Browser As reported in https://fb.workplace.com/groups/flippersupport/permalink/1154240895056567/, in some cases links would open inside Flipper itself, and as a result the user would be stick as he can't navigate away. This happened only when a `Link` was being deconstructed from `Typography` by a module that was loaded before `Link.tsx`, which fixes `Typography.Link` to do that automatically. For example: ``` import {Typograph} from "antd" const {Link} = Typography; ``` Addressed this issue by patching the antd package directly during build, rather than during application start. Reviewed By: passy Differential Revision: D29193899 fbshipit-source-id: b291018406e343c0f7de1d1d899924902159d8c7 --- desktop/app/src/ui/components/Link.tsx | 29 +++---------- desktop/patches/antd+4.15.4.patch | 28 ------------- desktop/patches/antd+4.16.3.patch | 57 ++++++++++++++++++++++++++ 3 files changed, 63 insertions(+), 51 deletions(-) delete mode 100644 desktop/patches/antd+4.15.4.patch create mode 100644 desktop/patches/antd+4.16.3.patch diff --git a/desktop/app/src/ui/components/Link.tsx b/desktop/app/src/ui/components/Link.tsx index 290281e5e..47e392a9e 100644 --- a/desktop/app/src/ui/components/Link.tsx +++ b/desktop/app/src/ui/components/Link.tsx @@ -7,32 +7,15 @@ * @format */ -import {useCallback} from 'react'; import {shell} from 'electron'; -import React from 'react'; import {Typography} from 'antd'; const AntOriginalLink = Typography.Link; -export default function Link(props: { - href: string; - children?: React.ReactNode; - style?: React.CSSProperties; - onClick?: ((event: React.MouseEvent) => void) | undefined; -}) { - const onClick = useCallback( - (e: React.MouseEvent) => { - shell.openExternal(props.href); - e.preventDefault(); - e.stopPropagation(); - }, - [props.href], - ); - - return ; -} - -// XXX. For consistent usage, we monkey patch AntDesign's Link component, -// as we never want to open links internally, which gives a really bad experience +// used by patch for Typography.Link in AntD // @ts-ignore -Typography.Link = Link; +global.flipperOpenLink = function openLinkExternal(url: string) { + shell.openExternal(url); +}; + +export default AntOriginalLink; diff --git a/desktop/patches/antd+4.15.4.patch b/desktop/patches/antd+4.15.4.patch deleted file mode 100644 index 924032ac7..000000000 --- a/desktop/patches/antd+4.15.4.patch +++ /dev/null @@ -1,28 +0,0 @@ -diff --git a/node_modules/antd/es/button/button.js b/node_modules/antd/es/button/button.js -index c96d188..bba8ba5 100644 ---- a/node_modules/antd/es/button/button.js -+++ b/node_modules/antd/es/button/button.js -@@ -189,6 +189,8 @@ var InternalButton = function InternalButton(props, ref) { - }, [loadingOrDelay]); - React.useEffect(fixTwoCNChar, [buttonRef]); - -+ var scope = React.useContext(global.FlipperTrackingScopeContext); -+ - var handleClick = function handleClick(e) { - var _a; - -@@ -200,7 +202,13 @@ var InternalButton = function InternalButton(props, ref) { - return; - } - -- (_a = onClick) === null || _a === void 0 ? void 0 : _a(e); -+ if(onClick !== null && onClick !== void 0) { -+ global.flipperTrackInteraction( -+ 'Button', 'onClick', scope, props.title || props.children || props.icon, -+ onClick, -+ e -+ ); -+ } - }; - - devWarning(!(typeof icon === 'string' && icon.length > 2), 'Button', "`icon` is using ReactNode instead of string naming in v4. Please check `".concat(icon, "` at https://ant.design/components/icon")); diff --git a/desktop/patches/antd+4.16.3.patch b/desktop/patches/antd+4.16.3.patch new file mode 100644 index 000000000..14bdd7281 --- /dev/null +++ b/desktop/patches/antd+4.16.3.patch @@ -0,0 +1,57 @@ +diff --git a/node_modules/antd/es/button/button.js b/node_modules/antd/es/button/button.js +index 28a12c7..13f7382 100644 +--- a/node_modules/antd/es/button/button.js ++++ b/node_modules/antd/es/button/button.js +@@ -193,6 +193,8 @@ var InternalButton = function InternalButton(props, ref) { + }, [loadingOrDelay]); + React.useEffect(fixTwoCNChar, [buttonRef]); + ++ var scope = React.useContext(global.FlipperTrackingScopeContext); ++ + var handleClick = function handleClick(e) { + var _a; + +@@ -204,7 +206,13 @@ var InternalButton = function InternalButton(props, ref) { + return; + } + +- (_a = onClick) === null || _a === void 0 ? void 0 : _a(e); ++ if(onClick !== null && onClick !== void 0) { ++ global.flipperTrackInteraction( ++ 'Button', 'onClick', scope, props.title || props.children || props.icon, ++ onClick, ++ e ++ ); ++ } + }; + + devWarning(!(typeof icon === 'string' && icon.length > 2), 'Button', "`icon` is using ReactNode instead of string naming in v4. Please check `".concat(icon, "` at https://ant.design/components/icon")); +diff --git a/node_modules/antd/es/typography/Link.js b/node_modules/antd/es/typography/Link.js +index 2847840..294ec8d 100644 +--- a/node_modules/antd/es/typography/Link.js ++++ b/node_modules/antd/es/typography/Link.js +@@ -36,12 +36,23 @@ var Link = function Link(_a, ref) { + }); // https://github.com/ant-design/ant-design/issues/26622 + // @ts-ignore + ++ var onClick = React.useCallback((e) => { ++ if (mergedProps.onClick) { ++ return mergedProps.onClick(e); ++ } ++ if (mergedProps.href) { ++ global.flipperOpenLink(mergedProps.href); ++ e.preventDefault(); ++ e.stopPropagation(); ++ }; ++ }, [mergedProps.href, mergedProps.onClick]) + + delete mergedProps.navigate; + return /*#__PURE__*/React.createElement(Base, _extends({}, mergedProps, { + ref: baseRef, + ellipsis: !!ellipsis, +- component: "a" ++ component: "a", ++ onClick: onClick, + })); + }; +