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

@@ -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: {
+// used by patch for Typography.Link in AntD
-  href: string;
-  children?: React.ReactNode;
-  style?: React.CSSProperties;
-  onClick?: ((event: React.MouseEvent<any>) => void) | undefined;
-}) {
-  const onClick = useCallback(
-    (e: React.MouseEvent<any>) => {
-      shell.openExternal(props.href);
-      e.preventDefault();
-      e.stopPropagation();
-    },
-    [props.href],
-  );
-
-  return <AntOriginalLink {...props} onClick={props.onClick ?? onClick} />;
-}
-
-// 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
 // @ts-ignore
-Typography.Link = Link;
+global.flipperOpenLink = function openLinkExternal(url: string) {
+  shell.openExternal(url);
+};
+
+export default AntOriginalLink;

desktop/patches/antd+4.15.4.patch

@@ -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"));

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,
+   }));
+ };
+