Attach Flipper Trace in the support form

Summary: This diff sets up Flipper to attach flipper trace to the support form. This diff adds a property named `exportResult` in the redux store. This will hold the export url or the path of the export, depending on the type of the flipper export. Once the exportResult is populated, we listen for this change and update the button style and fill the comment box.

Reviewed By: passy

Differential Revision: D17478491

fbshipit-source-id: 10dd5e130a9e3df5f41afde42b92b08959d9ed9e

src/chrome/MainSidebar.tsx

@@ -312,7 +312,7 @@ class MainSidebar extends PureComponent<Props> {
               onClick={() => setStaticView(SupportRequestForm)}>
               <PluginIcon
                 color={colors.light50}
-                name={'bell'}
+                name={'app-dailies'}
                 isActive={
                   staticView != null && staticView === SupportRequestForm
                 }

src/chrome/SelectPluginSheet.tsx

@@ -16,7 +16,9 @@ import {
   colors,
   View,
 } from 'flipper';
+import {unsetShare} from '../reducers/application';
 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 
 export type PluginSelection = Map<string, boolean>;
 
@@ -107,6 +109,10 @@ class PluginRowComponent extends Component<PluginRowComponentProps> {
 }
 
 export default class SelectPluginSheet extends Component<Props, State> {
+  static contextTypes = {
+    store: PropTypes.object.isRequired,
+  };
+
   state = {plugins: new Map<string, boolean>()};
   static getDerivedStateFromProps(props: Props, state: State) {
     if (state.plugins.size > 0) {
@@ -128,7 +134,10 @@ export default class SelectPluginSheet extends Component<Props, State> {
     this.props.onSelect(selectedArray);
   }
   render() {
-    const {onHide} = this.props;
+    const onHide = () => {
+      this.context.store.dispatch(unsetShare());
+      this.props.onHide();
+    };
     const {plugins} = this.state;
 
     return (

src/chrome/ShareSheet.tsx

@@ -17,7 +17,11 @@ import {
   Input,
 } from 'flipper';
 import React, {Component} from 'react';
-import {setExportStatusComponent, unsetShare} from '../reducers/application';
+import {
+  setExportStatusComponent,
+  unsetShare,
+  setExportURL,
+} from '../reducers/application';
 import {Logger} from '../fb-interfaces/Logger';
 import {Idler} from '../utils/Idler';
 import {
@@ -127,7 +131,6 @@ export default class ShareSheet extends Component<Props, State> {
         `${EXPORT_FLIPPER_TRACE_EVENT}:UI_LINK`,
       );
 
-      this.context.store.dispatch(unsetShare());
       statusUpdate('Uploading Flipper Trace...');
       const result = await reportPlatformFailures(
         shareFlipperData(serializedString),
@@ -135,8 +138,10 @@ export default class ShareSheet extends Component<Props, State> {
       );
 
       this.setState({errorArray, result});
-      if ((result as DataExportResult).flipperUrl) {
+      const flipperUrl = (result as DataExportResult).flipperUrl;
-        clipboard.writeText(String((result as DataExportResult).flipperUrl));
+      if (flipperUrl) {
+        clipboard.writeText(String(flipperUrl));
+        this.context.store.dispatch(setExportURL(flipperUrl));
         new Notification('Sharable Flipper trace created', {
           body: 'URL copied to clipboard',
           requireInteraction: true,
@@ -159,6 +164,7 @@ export default class ShareSheet extends Component<Props, State> {
         }
         this.setState({result});
       }
+      this.context.store.dispatch(unsetShare());
       this.props.logger.trackTimeSince(mark, 'export:url-error');
     }
   }
@@ -208,6 +214,7 @@ export default class ShareSheet extends Component<Props, State> {
 
   render() {
     const onHide = () => {
+      this.context.store.dispatch(unsetShare());
       this.props.onHide();
       this.idler.cancel();
     };

src/chrome/ShareSheetExportFile.tsx

@@ -149,6 +149,7 @@ export default class ShareSheetExportFile extends Component<Props, State> {
 
   render() {
     const onHide = () => {
+      this.context.store.dispatch(unsetShare());
       this.props.onHide();
       this.idler.cancel();
     };

src/reducers/application.tsx

@@ -47,7 +47,10 @@ type SubShareType =
       type: 'file';
       file: string;
     }
-  | {type: 'link'};
+  | {
+      type: 'link';
+      url?: string;
+    };
 
 export type ShareType = {
   statusComponent?: React.ReactNode;
@@ -117,6 +120,10 @@ export type Action =
   | {
       type: 'SET_EXPORT_STATUS_MESSAGE';
       payload: React.ReactNode;
+    }
+  | {
+      type: 'SET_EXPORT_URL';
+      payload: string;
     };
 
 const initialState: () => State = () => ({
@@ -208,6 +215,12 @@ export default function reducer(
     return state;
   } else if (action.type === 'UNSET_SHARE') {
     return {...state, share: null};
+  } else if (action.type === 'SET_EXPORT_URL') {
+    const share = state.share;
+    if (share && share.type === 'link') {
+      return {...state, share: {...share, url: action.payload}};
+    }
+    return state;
   } else {
     return state;
   }
@@ -270,3 +283,8 @@ export const setFlipperRating = (rating: number): Action => ({
     rating,
   },
 });
+
+export const setExportURL = (result: string): Action => ({
+  type: 'SET_EXPORT_URL',
+  payload: result,
+});