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 {
-  FlexColumn,
-  Button,
-  styled,
-  colors,
-  Text,
-  LoadingIndicator,
-  FlexRow,
-  Spacer,
-} from 'flipper';
+import {FlexColumn, Button, styled, Text, 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>
-        <Center>
-          <LoadingIndicator size={30} />
-          {statusUpdate && statusUpdate.length > 0 ? (
-            <Uploading bold color={colors.macOSTitleBarIcon}>
-              {statusUpdate}
-            </Uploading>
-          ) : (
-            <Uploading bold color={colors.macOSTitleBarIcon}>
-              Exporting Flipper trace...
-            </Uploading>
-          )}
-        </Center>
-        <FlexRow>
-          <Spacer />
-          <Button compact padded onClick={() => this.cancelAndHide(context)}>
-            Cancel
-          </Button>
-          <Button
-            compact
-            padded
-            type="primary"
-            onClick={() => {
+      <ShareSheetPendingDialog
+        statusUpdate={statusUpdate}
+        statusMessage="Exporting Flipper trace..."
+        onCancel={() => this.cancelAndHide(context)}
+        onRunInBackground={() => {
           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(
-    cancelAndHide: () => void,
-    statusUpdate: string | null | undefined,
-  ) {
+  renderPending(cancelAndHide: () => void, statusUpdate: string | null) {
     return (
-      <Container>
-        <FlexColumn>
-          <Center>
-            <LoadingIndicator size={30} />
-            {statusUpdate && statusUpdate.length > 0 ? (
-              <Uploading bold color={colors.macOSTitleBarIcon}>
-                {statusUpdate}
-              </Uploading>
-            ) : (
-              <Uploading bold color={colors.macOSTitleBarIcon}>
-                Uploading Flipper trace...
-              </Uploading>
-            )}
-          </Center>
-          <FlexRow>
-            <Spacer />
-            <Button compact padded onClick={cancelAndHide}>
-              Cancel
-            </Button>
-            <Button
-              compact
-              padded
-              type="primary"
-              onClick={() => {
+      <ShareSheetPendingDialog
+        statusUpdate={statusUpdate}
+        statusMessage="Uploading Flipper trace..."
+        onCancel={cancelAndHide}
+        onRunInBackground={() => {
           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>
+  );
+}