Factor out pending sheet as separate component

Summary: It's copied apart from the status message, so let's centralise it.

Reviewed By: jknoxville

Differential Revision: D17786691

fbshipit-source-id: d5f7a5dccf56b96a58a9c1fc61652d7f9d1786d3

src/chrome/ShareSheetExportFile.tsx

@@ -4,16 +4,7 @@
  * LICENSE file in the root directory of this source tree.
  * @format
  */
-import {
+import {FlexColumn, Button, styled, Text, FlexRow, Spacer} from 'flipper';
-  FlexColumn,
-  Button,
-  styled,
-  colors,
-  Text,
-  LoadingIndicator,
-  FlexRow,
-  Spacer,
-} from 'flipper';
 import React, {Component} from 'react';
 import {setExportStatusComponent, unsetShare} from '../reducers/application';
 import {reportPlatformFailures} from '../utils/metrics';
@@ -27,6 +18,7 @@ import {
 } from '../utils/exportData';
 import PropTypes from 'prop-types';
 import ShareSheetErrorList from './ShareSheetErrorList';
+import ShareSheetPendingDialog from './ShareSheetPendingDialog';
 
 const Container = styled(FlexColumn)({
   padding: 20,
@@ -39,10 +31,6 @@ const Center = styled(FlexColumn)({
   paddingBottom: 50,
 });
 
-const Uploading = styled(Text)({
-  marginTop: 15,
-});
-
 const ErrorMessage = styled(Text)({
   display: 'block',
   marginTop: 6,
@@ -192,40 +180,18 @@ export default class ShareSheetExportFile extends Component<Props, State> {
 
   renderPending(context: any, statusUpdate: string | null) {
     return (
-      <Container>
+      <ShareSheetPendingDialog
-        <Center>
+        statusUpdate={statusUpdate}
-          <LoadingIndicator size={30} />
+        statusMessage="Exporting Flipper trace..."
-          {statusUpdate && statusUpdate.length > 0 ? (
+        onCancel={() => this.cancelAndHide(context)}
-            <Uploading bold color={colors.macOSTitleBarIcon}>
+        onRunInBackground={() => {
-              {statusUpdate}
+          this.setState({runInBackground: true});
-            </Uploading>
+          if (statusUpdate) {
-          ) : (
+            this.dispatchAndUpdateToolBarStatus(statusUpdate);
-            <Uploading bold color={colors.macOSTitleBarIcon}>
+          }
-              Exporting Flipper trace...
+          this.props.onHide();
-            </Uploading>
+        }}
-          )}
+      />
-        </Center>
-        <FlexRow>
-          <Spacer />
-          <Button compact padded onClick={() => this.cancelAndHide(context)}>
-            Cancel
-          </Button>
-          <Button
-            compact
-            padded
-            type="primary"
-            onClick={() => {
-              this.setState({runInBackground: true});
-              const {statusUpdate} = this.state;
-              if (statusUpdate) {
-                this.dispatchAndUpdateToolBarStatus(statusUpdate);
-              }
-              this.props.onHide();
-            }}>
-            Run In Background
-          </Button>
-        </FlexRow>
-      </Container>
     );
   }
 

src/chrome/ShareSheetExportUrl.tsx

@@ -36,6 +36,7 @@ import ShareSheetErrorList from './ShareSheetErrorList';
 import {reportPlatformFailures} from '../utils/metrics';
 import CancellableExportStatus from './CancellableExportStatus';
 import {performance} from 'perf_hooks';
+import ShareSheetPendingDialog from './ShareSheetPendingDialog';
 export const SHARE_FLIPPER_TRACE_EVENT = 'share-flipper-link';
 
 const Container = styled(FlexColumn)({
@@ -84,7 +85,7 @@ type State = {
   runInBackground: boolean;
   errorArray: Array<Error>;
   result: DataExportError | DataExportResult | null | undefined;
-  statusUpdate: string | null | undefined;
+  statusUpdate: string | null;
 };
 
 export default class ShareSheetExportUrl extends Component<Props, State> {
@@ -169,47 +170,20 @@ export default class ShareSheetExportUrl extends Component<Props, State> {
     }
   }
 
-  renderTheProgessState(
+  renderPending(cancelAndHide: () => void, statusUpdate: string | null) {
-    cancelAndHide: () => void,
-    statusUpdate: string | null | undefined,
-  ) {
     return (
-      <Container>
+      <ShareSheetPendingDialog
-        <FlexColumn>
+        statusUpdate={statusUpdate}
-          <Center>
+        statusMessage="Uploading Flipper trace..."
-            <LoadingIndicator size={30} />
+        onCancel={cancelAndHide}
-            {statusUpdate && statusUpdate.length > 0 ? (
+        onRunInBackground={() => {
-              <Uploading bold color={colors.macOSTitleBarIcon}>
+          this.setState({runInBackground: true});
-                {statusUpdate}
+          if (statusUpdate) {
-              </Uploading>
+            this.dispatchAndUpdateToolBarStatus(statusUpdate);
-            ) : (
+          }
-              <Uploading bold color={colors.macOSTitleBarIcon}>
+          this.props.onHide();
-                Uploading Flipper trace...
+        }}
-              </Uploading>
+      />
-            )}
-          </Center>
-          <FlexRow>
-            <Spacer />
-            <Button compact padded onClick={cancelAndHide}>
-              Cancel
-            </Button>
-            <Button
-              compact
-              padded
-              type="primary"
-              onClick={() => {
-                this.setState({runInBackground: true});
-                const {statusUpdate} = this.state;
-                if (statusUpdate) {
-                  this.dispatchAndUpdateToolBarStatus(statusUpdate);
-                }
-                this.props.onHide();
-              }}>
-              Run In Background
-            </Button>
-          </FlexRow>
-        </FlexColumn>
-      </Container>
     );
   }
 
@@ -221,7 +195,7 @@ export default class ShareSheetExportUrl extends Component<Props, State> {
     };
     const {result, statusUpdate, errorArray} = this.state;
     if (!result || !(result as DataExportResult).flipperUrl) {
-      return this.renderTheProgessState(cancelAndHide, statusUpdate);
+      return this.renderPending(cancelAndHide, statusUpdate);
     }
 
     return (

src/chrome/ShareSheetPendingDialog.tsx

@@ -0,0 +1,66 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import {
+  FlexColumn,
+  styled,
+  Button,
+  colors,
+  Spacer,
+  FlexRow,
+  Text,
+  LoadingIndicator,
+} from 'flipper';
+import React from 'react';
+
+const Container = styled(FlexColumn)({
+  padding: 20,
+  width: 500,
+});
+
+const Center = styled(FlexColumn)({
+  alignItems: 'center',
+  paddingTop: 50,
+  paddingBottom: 50,
+});
+
+const Uploading = styled(Text)({
+  marginTop: 15,
+});
+
+export default function(props: {
+  statusMessage: string;
+  statusUpdate: string | null;
+  onCancel: () => void;
+  onRunInBackground: () => void;
+}) {
+  return (
+    <Container>
+      <Center>
+        <LoadingIndicator size={30} />
+        {props.statusUpdate && props.statusUpdate.length > 0 ? (
+          <Uploading bold color={colors.macOSTitleBarIcon}>
+            {props.statusUpdate}
+          </Uploading>
+        ) : (
+          <Uploading bold color={colors.macOSTitleBarIcon}>
+            {props.statusUpdate}
+          </Uploading>
+        )}
+      </Center>
+      <FlexRow>
+        <Spacer />
+        <Button compact padded onClick={() => props.onCancel()}>
+          Cancel
+        </Button>
+        <Button compact padded type="primary" onClick={props.onRunInBackground}>
+          Run In Background
+        </Button>
+      </FlexRow>
+    </Container>
+  );
+}