Introduce Design System Page / Design system improvements

Summary:
This diff introduces:

- ScrollContainer
- Make sure Ant Link components always open URLs externally, to avoid users needing to use electron api's
- Introduce a design systems page where people can find docs on how to organise sandy layout, and it also provides a convenient way to test layout mechanisms.
- Fixed several layout bugs found as a result of adding the design system page

In next diff:
- more convenience around organizing paddings
- making the design system accessible from the menu

Reviewed By: cekkaewnumchai

Differential Revision: D23930274

fbshipit-source-id: 4aab058d15b3391287e0e32513a5d83831448857

desktop/app/src/ui/components/Link.tsx

@@ -9,9 +9,11 @@
 
 import styled from '@emotion/styled';
 import {colors} from './colors';
-import {Component} from 'react';
+import {useCallback} from 'react';
 import {shell} from 'electron';
 import React from 'react';
+import {useIsSandy} from '../../sandy-chrome/SandyContext';
+import {Typography} from 'antd';
 
 const StyledLink = styled.span({
   color: colors.highlight,
@@ -22,20 +24,33 @@ const StyledLink = styled.span({
 });
 StyledLink.displayName = 'Link:StyledLink';
 
-export default class Link extends Component<{
+const AntOriginalLink = Typography.Link;
+
+export default function Link(props: {
   href: string;
   children?: React.ReactNode;
   style?: React.CSSProperties;
-}> {
-  onClick = () => {
-    shell.openExternal(this.props.href);
-  };
+}) {
+  const isSandy = useIsSandy();
+  const onClick = useCallback(
+    (e: React.MouseEvent<any>) => {
+      shell.openExternal(props.href);
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    [props.href],
+  );
 
-  render() {
-    return (
-      <StyledLink onClick={this.onClick} style={this.props.style}>
-        {this.props.children || this.props.href}
-      </StyledLink>
-    );
-  }
+  return isSandy ? (
+    <AntOriginalLink {...props} onClick={onClick} />
+  ) : (
+    <StyledLink onClick={onClick} style={props.style}>
+      {props.children || props.href}
+    </StyledLink>
+  );
 }
+
+// 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;