Improve error handling / roundtrip behavior

Summary:
Slightly improves the support form interactions / code flow:
* When uploading, input fields are hidden
* WHen upload succeeded: Show link to final post
* When upload succeeded: be able to start a new bug report
* Styled error messages, and unified error flow
* Don't support report if errors occurred

Reviewed By: priteshrnandgaonkar

Differential Revision: D18779791

fbshipit-source-id: 28e873d0509865c66d861fe9cedb62a31f0e8bae

src/chrome/ShareSheetErrorList.tsx

@@ -8,7 +8,7 @@
  */
 
 import React, {PureComponent} from 'react';
-import {FlexColumn, Text, styled} from '../ui';
+import {Text, styled, Info, VBox} from '../ui';
 
 type Props = {
   errors: Array<Error>;
@@ -22,25 +22,6 @@ const ErrorMessage = styled(Text)({
   lineHeight: 1.35,
 });
 
-const Padder = styled('div')(
-  ({
-    paddingLeft,
-    paddingRight,
-    paddingBottom,
-    paddingTop,
-  }: {
-    paddingLeft?: number;
-    paddingRight?: number;
-    paddingBottom?: number;
-    paddingTop?: number;
-  }) => ({
-    paddingLeft: paddingLeft || 0,
-    paddingRight: paddingRight || 0,
-    paddingBottom: paddingBottom || 0,
-    paddingTop: paddingTop || 0,
-  }),
-);
-
 const Title = styled(Text)({
   marginBottom: 6,
 });
@@ -65,18 +46,16 @@ export default class Popover extends PureComponent<Props> {
       return null;
     }
     return (
-      <>
-        <Padder paddingBottom={8}>
-          <FlexColumn>
-            <Title bold>
-              The following errors occurred while exporting your data
-            </Title>
-            {this.props.errors.map((e: Error) => (
-              <ErrorMessage code>{formatError(e)}</ErrorMessage>
-            ))}
-          </FlexColumn>
-        </Padder>
-      </>
+      <VBox>
+        <Info type="error">
+          <Title bold>
+            The following errors occurred while exporting your data
+          </Title>
+          {this.props.errors.map((e: Error) => (
+            <ErrorMessage code>{formatError(e)}</ErrorMessage>
+          ))}
+        </Info>
+      </VBox>
     );
   }
 }

src/ui/components/Link.tsx

@@ -25,6 +25,7 @@ StyledLink.displayName = 'Link:StyledLink';
 export default class Link extends Component<{
   href: string;
   children?: React.ReactNode;
+  style?: React.CSSProperties;
 }> {
   onClick = () => {
     shell.openExternal(this.props.href);
@@ -32,7 +33,7 @@ export default class Link extends Component<{
 
   render() {
     return (
-      <StyledLink onClick={this.onClick}>
+      <StyledLink onClick={this.onClick} style={this.props.style}>
         {this.props.children || this.props.href}
       </StyledLink>
     );