Added spinner while submitting bug report

Summary:
Solves this T65385916.
Before this diff the bugreporter showed a disabled UI while waiting for the upload to finish. Its confusing for the user as, it can be seen from the above the task.  Thus I added an intermediate UI with a spinner and a text "Submitting..." which makes it clear for the user that we are uploading a bug report.

Reviewed By: mweststrate

Differential Revision: D21017426

fbshipit-source-id: ce12dfbefc8726adfad9ef17abd744cc92c254ed

desktop/app/src/chrome/BugReporterDialog.tsx

@@ -25,13 +25,20 @@ import {
   styled,
 } from 'flipper';
 import {State as Store} from '../reducers';
-
+import LoadingIndicator from '../ui/components/LoadingIndicator';
 const Container = styled(FlexColumn)({
   padding: 10,
   width: 400,
   height: 300,
 });
 
+const CenteredContainer = styled(FlexColumn)<{size: number}>(({size}) => ({
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: size,
+  height: size,
+}));
+
 const Icon = styled(Glyph)({
   marginRight: 8,
   marginLeft: 3,
@@ -193,10 +200,14 @@ class BugReporterDialog extends Component<Props, State> {
   };
 
   onCancel = () => {
+    if (this.state.submitting) {
+      this.props.bugReporter.abort();
+    }
     this.setState({
       error: null,
       title: '',
       description: '',
+      submitting: false,
     });
     this.props.onHide();
   };
@@ -233,6 +244,25 @@ class BugReporterDialog extends Component<Props, State> {
           </FlexColumn>
         </FlexCenter>
       );
+    } else {
+      if (submitting) {
+        content = (
+          <Fragment>
+            <FlexCenter grow={true}>
+              <CenteredContainer size={200}>
+                <LoadingIndicator size={16} />
+                <Title> Submitting... </Title>
+              </CenteredContainer>
+            </FlexCenter>
+            <Footer>
+              <SubmitButtonContainer>
+                <Button onClick={this.onCancel} disabled={false} compact padded>
+                  Cancel
+                </Button>
+              </SubmitButtonContainer>
+            </Footer>
+          </Fragment>
+        );
       } else {
         content = (
           <Fragment>
@@ -242,7 +272,6 @@ class BugReporterDialog extends Component<Props, State> {
               value={title}
               ref={this.setTitleRef}
               onChange={this.onTitleChange}
-            disabled={submitting}
             />
 
             <DescriptionTextarea
@@ -250,7 +279,6 @@ class BugReporterDialog extends Component<Props, State> {
               value={description}
               ref={this.setDescriptionRef}
               onChange={this.onDescriptionChange}
-            disabled={submitting}
             />
             {activePlugin && activePlugin.bugs && (
               <InfoBox>
@@ -269,10 +297,13 @@ class BugReporterDialog extends Component<Props, State> {
                       </Link>
                     </span>
                   )}
-                {activePlugin && activePlugin.bugs && activePlugin.bugs.email && (
+                  {activePlugin &&
+                    activePlugin.bugs &&
+                    activePlugin.bugs.email && (
                       <span>
                         , you might also want contact{' '}
-                    <Link href={'mailto:' + String(activePlugin.bugs.email)}>
+                        <Link
+                          href={'mailto:' + String(activePlugin.bugs.email)}>
                           {activePlugin.bugs.email}
                         </Link>
                         , the author/oncall of this plugin, directly
@@ -286,19 +317,10 @@ class BugReporterDialog extends Component<Props, State> {
             <Footer>
               {error != null && <Text color={colors.red}>{error}</Text>}
               <SubmitButtonContainer>
-              <Button
+                <Button onClick={this.onCancel} compact padded>
-                onClick={this.onCancel}
-                disabled={submitting}
-                compact
-                padded>
                   Cancel
                 </Button>
-              <Button
+                <Button type="primary" onClick={this.onSubmit} compact padded>
-                type="primary"
-                onClick={this.onSubmit}
-                disabled={submitting}
-                compact
-                padded>
                   Submit Report
                 </Button>
               </SubmitButtonContainer>
@@ -306,7 +328,7 @@ class BugReporterDialog extends Component<Props, State> {
           </Fragment>
         );
       }
-
+    }
     return <Container>{content}</Container>;
   }
 }

desktop/app/src/fb-stubs/BugReporter.tsx

@@ -12,6 +12,9 @@ import {Store} from '../reducers/index';
 
 export default class BugReporter {
   constructor(_logManager: Logger, _store: Store) {}
+  public abort() {
+    console.log('Stub implementation of an abort function.');
+  }
   async report(_title: string, _body: string): Promise<number> {
     return Promise.resolve(-1);
   }