Share sheet for the file export

Summary: This diff shows an export sheet when one exports the Flipper data in a file. It also shows if any error happens. Look at the video in test case. Reviewed By: danielbuechele Differential Revision: D14624194 fbshipit-source-id: dea0179a83e626e49593e5dde1d5ff128048db02
2019-04-01 08:50:48 -07:00
parent 2dacea8541
commit 45999a5292
5 changed files with 188 additions and 16 deletions
--- a/src/chrome/ShareSheetExportFile.js
+++ b/src/chrome/ShareSheetExportFile.js
@@ -0,0 +1,143 @@
+/**
+ * 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,
+  Button,
+  styled,
+  colors,
+  Text,
+  LoadingIndicator,
+  Component,
+  FlexRow,
+  Spacer,
+} from 'flipper';
+import {reportPlatformFailures} from '../utils/metrics';
+import {
+  exportStoreToFile,
+  EXPORT_FLIPPER_TRACE_EVENT,
+} from '../utils/exportData.js';
+import PropTypes from 'prop-types';
+
+const Container = styled(FlexColumn)({
+  padding: 20,
+  width: 500,
+});
+
+const Center = styled(FlexColumn)({
+  alignItems: 'center',
+  paddingTop: 50,
+  paddingBottom: 50,
+});
+
+const Uploading = styled(Text)({
+  marginTop: 15,
+});
+
+const ErrorMessage = styled(Text)({
+  display: 'block',
+  marginTop: 6,
+  wordBreak: 'break-all',
+  whiteSpace: 'pre-line',
+  lineHeight: 1.35,
+});
+
+const Title = styled(Text)({
+  marginBottom: 6,
+});
+
+const InfoText = styled(Text)({
+  lineHeight: 1.35,
+  marginBottom: 15,
+});
+
+type Props = {
+  onHide: () => mixed,
+  file: string,
+};
+type State = {
+  result: ?{
+    success: boolean,
+    error: ?Error,
+  },
+};
+
+export default class ShareSheetExportFile extends Component<Props, State> {
+  static contextTypes = {
+    store: PropTypes.object.isRequired,
+  };
+
+  state = {
+    result: null,
+  };
+
+  async componentDidMount() {
+    try {
+      await reportPlatformFailures(
+        exportStoreToFile(this.props.file, this.context.store),
+        `${EXPORT_FLIPPER_TRACE_EVENT}:UI`,
+      );
+      this.setState({result: {success: true, error: null}});
+    } catch (err) {
+      this.setState({result: {success: false, error: err}});
+    }
+  }
+
+  render() {
+    const {result} = this.state;
+    if (result) {
+      const {success, error} = result;
+      if (success) {
+        return (
+          <Container>
+            <FlexColumn>
+              <Title bold>Data Exported Successfully</Title>
+              <InfoText>
+                When sharing your Flipper data, consider that the captured data
+                might contain sensitive information like access tokens used in
+                network requests.
+              </InfoText>
+            </FlexColumn>
+            <FlexRow>
+              <Spacer />
+              <Button compact padded onClick={this.props.onHide}>
+                Close
+              </Button>
+            </FlexRow>
+          </Container>
+        );
+      }
+      if (error) {
+        return (
+          <Container>
+            <Title bold>Error</Title>
+            <ErrorMessage code>
+              {error?.message || 'File could not be saved.'}
+            </ErrorMessage>
+            <FlexRow>
+              <Spacer />
+              <Button compact padded onClick={this.props.onHide}>
+                Close
+              </Button>
+            </FlexRow>
+          </Container>
+        );
+      }
+      return null;
+    } else {
+      return (
+        <Container>
+          <Center>
+            <LoadingIndicator size={30} />
+            <Uploading bold color={colors.macOSTitleBarIcon}>
+              Exporting Flipper trace...
+            </Uploading>
+          </Center>
+        </Container>
+      );
+    }
+  }
+}