Cleaning up sheet abstraction to use Ant/flipper-plugin dialogs instead

Summary:
This diff cleans up order remaining dialogs, the ones involved in exporting to file or url. Includes some legacy component cleanup boyscouting, but not too much.

This removes a lot of code where state of the wizard was stored globally, and makes it locally instead.

Other code that was removed involves interaction with the old UI, which allowed import / export to be running in the background as well. (which is no longer needed since we optimised the process)

Reviewed By: timur-valiev

Differential Revision: D30192000

fbshipit-source-id: 13be883c5bf217a3d58b610b78516359e9bd0ebc

desktop/app/src/chrome/ShareSheetExportUrl.tsx

@@ -7,14 +7,9 @@
  * @format
  */
 
-import {FlexColumn, Button, styled, Text, FlexRow, Spacer, Input} from '../ui';
+import {FlexColumn, styled, Text, FlexRow, Spacer, Input} from '../ui';
 import React, {Component} from 'react';
 import {ReactReduxContext} from 'react-redux';
-import {
-  setExportStatusComponent,
-  unsetShare,
-  setExportURL,
-} from '../reducers/application';
 import {Logger} from '../fb-interfaces/Logger';
 import {IdlerImpl} from '../utils/Idler';
 import {
@@ -29,21 +24,16 @@ import {
 } from '../utils/exportData';
 import ShareSheetErrorList from './ShareSheetErrorList';
 import {reportPlatformFailures} from '../utils/metrics';
-import CancellableExportStatus from './CancellableExportStatus';
 import {performance} from 'perf_hooks';
 import ShareSheetPendingDialog from './ShareSheetPendingDialog';
 import {getInstance as getLogger} from '../fb-stubs/Logger';
 import {resetSupportFormV2State} from '../reducers/supportForm';
 import {MiddlewareAPI} from '../reducers/index';
-import {getFlipperLib} from 'flipper-plugin';
+import {getFlipperLib, Layout} from 'flipper-plugin';
+import {Button, Modal} from 'antd';
 
 export const SHARE_FLIPPER_TRACE_EVENT = 'share-flipper-link';
 
-const Container = styled(FlexColumn)({
-  padding: 20,
-  width: 500,
-});
-
 const Copy = styled(Input)({
   marginRight: 0,
   marginBottom: 15,
@@ -69,11 +59,9 @@ const ErrorMessage = styled(Text)({
 type Props = {
   onHide: () => any;
   logger: Logger;
-  closeOnFinish: boolean;
 };
 
 type State = {
-  runInBackground: boolean;
   fetchMetaDataErrors: {
     [plugin: string]: Error;
   } | null;
@@ -88,7 +76,6 @@ export default class ShareSheetExportUrl extends Component<Props, State> {
     fetchMetaDataErrors: null,
     result: null,
     statusUpdate: null,
-    runInBackground: false,
   };
 
   get store(): MiddlewareAPI {
@@ -97,30 +84,12 @@ export default class ShareSheetExportUrl extends Component<Props, State> {
 
   idler = new IdlerImpl();
 
-  dispatchAndUpdateToolBarStatus(msg: string) {
-    this.store.dispatch(
-      setExportStatusComponent(
-        <CancellableExportStatus
-          msg={msg}
-          onCancel={() => {
-            this.idler.cancel();
-            this.store.dispatch(unsetShare());
-          }}
-        />,
-      ),
-    );
-  }
-
   async componentDidMount() {
     const mark = 'shareSheetExportUrl';
     performance.mark(mark);
     try {
       const statusUpdate = (msg: string) => {
-        if (this.state.runInBackground) {
-          this.dispatchAndUpdateToolBarStatus(msg);
-        } else {
-          this.setState({statusUpdate: msg});
-        }
+        this.setState({statusUpdate: msg});
       };
       const {serializedString, fetchMetaDataErrors} =
         await reportPlatformFailures(
@@ -146,17 +115,13 @@ export default class ShareSheetExportUrl extends Component<Props, State> {
       });
       const flipperUrl = (result as DataExportResult).flipperUrl;
       if (flipperUrl) {
-        this.store.dispatch(setExportURL(flipperUrl));
-        if (this.state.runInBackground) {
-          getFlipperLib().writeTextToClipboard(String(flipperUrl));
-          new Notification('Shareable Flipper Export created', {
-            body: 'URL copied to clipboard',
-            requireInteraction: true,
-          });
-        }
+        getFlipperLib().writeTextToClipboard(String(flipperUrl));
+        new Notification('Shareable Flipper Export created', {
+          body: 'URL copied to clipboard',
+          requireInteraction: true,
+        });
       }
       this.setState({fetchMetaDataErrors, result});
-      this.store.dispatch(unsetShare());
       this.store.dispatch(resetSupportFormV2State());
       this.props.logger.trackTimeSince(mark, 'export:url-success');
     } catch (e) {
@@ -165,62 +130,39 @@ export default class ShareSheetExportUrl extends Component<Props, State> {
         error: e,
         stacktrace: '',
       };
-      if (!this.state.runInBackground) {
-        if (e instanceof Error) {
-          result.error = e.message;
-          result.stacktrace = e.stack || '';
-        }
-        // Show the error in UI.
-        this.setState({result});
+      if (e instanceof Error) {
+        result.error = e.message;
+        result.stacktrace = e.stack || '';
       }
-      this.store.dispatch(unsetShare());
+      // Show the error in UI.
+      this.setState({result});
       this.props.logger.trackTimeSince(mark, 'export:url-error', result);
-      throw e;
+      console.error('Failed to export to flipper trace', e);
     }
   }
 
-  sheetHidden: boolean = false;
-
-  hideSheet = () => {
-    this.sheetHidden = true;
-    this.props.onHide();
-    this.idler.cancel();
-  };
-
   componentDidUpdate() {
     const {result} = this.state;
     if (!result || !(result as DataExportResult).flipperUrl) {
       return;
     }
-    if (!this.sheetHidden && this.props.closeOnFinish) {
-      this.hideSheet();
-    }
   }
 
-  cancelAndHide = (store: MiddlewareAPI) => () => {
-    store.dispatch(unsetShare());
-    this.hideSheet();
+  cancelAndHide = () => {
+    this.props.onHide();
+    this.idler.cancel();
   };
 
   renderPending(statusUpdate: string | null) {
     return (
-      <ReactReduxContext.Consumer>
-        {({store}) => (
-          <ShareSheetPendingDialog
-            width={500}
-            statusUpdate={statusUpdate}
-            statusMessage="Uploading Flipper Export..."
-            onCancel={this.cancelAndHide(store)}
-            onRunInBackground={() => {
-              this.setState({runInBackground: true});
-              if (statusUpdate) {
-                this.dispatchAndUpdateToolBarStatus(statusUpdate);
-              }
-              this.props.onHide();
-            }}
-          />
-        )}
-      </ReactReduxContext.Consumer>
+      <Modal visible onCancel={this.cancelAndHide} footer={null}>
+        <ShareSheetPendingDialog
+          width={500}
+          statusUpdate={statusUpdate}
+          statusMessage="Uploading Flipper Export..."
+          onCancel={this.cancelAndHide}
+        />
+      </Modal>
     );
   }
 
@@ -232,56 +174,54 @@ export default class ShareSheetExportUrl extends Component<Props, State> {
 
     const {title, errorArray} = displayFetchMetadataErrors(fetchMetaDataErrors);
     return (
-      <ReactReduxContext.Consumer>
-        {({store}) => (
-          <Container>
-            <>
-              <FlexColumn>
-                {(result as DataExportResult).flipperUrl ? (
-                  <>
-                    <Title bold>Data Upload Successful</Title>
-                    <InfoText>
-                      Flipper's data was successfully uploaded. This URL can be
-                      used to share with other Flipper users. Opening it will
-                      import the data from your export.
-                    </InfoText>
-                    <Copy
-                      value={(result as DataExportResult).flipperUrl}
-                      readOnly
-                    />
-                    <InfoText>
-                      When sharing your Flipper link, consider that the captured
-                      data might contain sensitve information like access tokens
-                      used in network requests.
-                    </InfoText>
-                    <ShareSheetErrorList
-                      errors={errorArray}
-                      title={title}
-                      type={'warning'}
-                    />
-                  </>
-                ) : (
-                  <>
-                    <Title bold>
-                      {(result as DataExportError).error_class || 'Error'}
-                    </Title>
-                    <ErrorMessage code>
-                      {(result as DataExportError).error ||
-                        'The data could not be uploaded'}
-                    </ErrorMessage>
-                  </>
-                )}
-              </FlexColumn>
-              <FlexRow>
-                <Spacer />
-                <Button compact padded onClick={this.cancelAndHide(store)}>
-                  Close
-                </Button>
-              </FlexRow>
-            </>
-          </Container>
-        )}
-      </ReactReduxContext.Consumer>
+      <Modal visible onCancel={this.cancelAndHide} footer={null}>
+        <Layout.Container>
+          <>
+            <FlexColumn>
+              {(result as DataExportResult).flipperUrl ? (
+                <>
+                  <Title bold>Data Upload Successful</Title>
+                  <InfoText>
+                    Flipper's data was successfully uploaded. This URL can be
+                    used to share with other Flipper users. Opening it will
+                    import the data from your export.
+                  </InfoText>
+                  <Copy
+                    value={(result as DataExportResult).flipperUrl}
+                    readOnly
+                  />
+                  <InfoText>
+                    When sharing your Flipper link, consider that the captured
+                    data might contain sensitve information like access tokens
+                    used in network requests.
+                  </InfoText>
+                  <ShareSheetErrorList
+                    errors={errorArray}
+                    title={title}
+                    type={'warning'}
+                  />
+                </>
+              ) : (
+                <>
+                  <Title bold>
+                    {(result as DataExportError).error_class || 'Error'}
+                  </Title>
+                  <ErrorMessage code>
+                    {(result as DataExportError).error ||
+                      'The data could not be uploaded'}
+                  </ErrorMessage>
+                </>
+              )}
+            </FlexColumn>
+            <FlexRow>
+              <Spacer />
+              <Button type="primary" onClick={this.cancelAndHide}>
+                Close
+              </Button>
+            </FlexRow>
+          </>
+        </Layout.Container>
+      </Modal>
     );
   }
 }