Introduce support request details form

Summary: Initial setup for a support detail form. Will only show up if meta data is present in the flipper file, so use the attached one to see it.

Reviewed By: jknoxville

Differential Revision: D18479193

fbshipit-source-id: 61da089f1e883fea20b2422a6bea99b2f8a4434b

src/MenuBar.tsx

@@ -214,7 +214,7 @@ function getTemplate(
   ];
   if (constants.ENABLE_SHAREABLE_LINK) {
     exportSubmenu.push({
-      label: 'Sharable Link',
+      label: 'Shareable Link',
       accelerator: 'CommandOrControl+Shift+E',
       click: function() {
         store.dispatch(

src/chrome/MainSidebar.tsx

@@ -30,6 +30,7 @@ import {
   LoadingIndicator,
   Button,
   StarButton,
+  ArchivedDevice,
 } from 'flipper';
 import React, {Component, PureComponent, Fragment} from 'react';
 import NotificationsHub from '../NotificationsHub';
@@ -46,6 +47,7 @@ import {connect} from 'react-redux';
 import {BackgroundColorProperty} from 'csstype';
 import {StyledOtherComponent} from 'create-emotion-styled';
 import SupportRequestFormManager from '../fb-stubs/SupportRequestFormManager';
+import SupportRequestDetails from '../fb-stubs/SupportRequestDetails';
 
 type FlipperPlugins = typeof FlipperPlugin[];
 type PluginsByCategory = [string, FlipperPlugins][];
@@ -309,20 +311,7 @@ class MainSidebar extends PureComponent<Props, State> {
               <ListItem>
                 <SidebarButton>{selectedDevice.title}</SidebarButton>
               </ListItem>
-              {selectedDevice.isArchived && selectedDevice.source ? (
+              {this.showArchivedDeviceDetails(selectedDevice)}
-                <ListItem
-                  style={{
-                    fontSize: 9,
-                    lineHeight: '11px',
-                    color: colors.light30,
-                    wordBreak: 'break-all',
-                    paddingBottom: '10px',
-                  }}>
-                  Snapshot imported from:
-                  <br />
-                  {selectedDevice.source}
-                </ListItem>
-              ) : null}
             </>
           )}
           {selectedDevice &&
@@ -447,6 +436,51 @@ class MainSidebar extends PureComponent<Props, State> {
     );
   }
 
+  showArchivedDeviceDetails(selectedDevice: BaseDevice) {
+    if (!selectedDevice.isArchived || !selectedDevice.source) {
+      return null;
+    }
+    const {staticView, setStaticView} = this.props;
+    return (
+      <>
+        <ListItem
+          style={{
+            fontSize: 9,
+            lineHeight: '11px',
+            color: colors.light30,
+            wordBreak: 'break-all',
+            paddingBottom: '10px',
+          }}>
+          Snapshot imported from:
+          <br />
+          {selectedDevice.source}
+        </ListItem>
+        {this.state.showSupportForm &&
+          (selectedDevice as ArchivedDevice).supportRequestDetails && (
+            <ListItem
+              active={
+                staticView != null && staticView === SupportRequestDetails
+              }
+              onClick={() => setStaticView(SupportRequestDetails)}>
+              <PluginIcon
+                color={colors.light50}
+                name={'app-dailies'}
+                isActive={
+                  staticView != null && staticView === SupportRequestDetails
+                }
+              />
+              <PluginName
+                isActive={
+                  staticView != null && staticView === SupportRequestDetails
+                }>
+                Support Request Details
+              </PluginName>
+            </ListItem>
+          )}
+      </>
+    );
+  }
+
   renderPluginsByCategory(
     client: Client,
     plugins: FlipperPlugins,

src/devices/ArchivedDevice.tsx

@@ -9,6 +9,7 @@
 
 import BaseDevice from './BaseDevice';
 import {DeviceType, OS, DeviceShell, DeviceLogEntry} from './BaseDevice';
+import {SupportRequestDetailsMetaData} from '../utils/exportData';
 
 function normalizeArchivedDeviceType(deviceType: DeviceType): DeviceType {
   let archivedDeviceType = deviceType;
@@ -28,16 +29,20 @@ export default class ArchivedDevice extends BaseDevice {
     os: OS,
     logEntries: Array<DeviceLogEntry>,
     source: string = '',
+    supportRequestDetails?: SupportRequestDetailsMetaData,
   ) {
     super(serial, normalizeArchivedDeviceType(deviceType), title, os);
     this.logs = logEntries;
     this.source = source;
+    this.supportRequestDetails = supportRequestDetails;
   }
 
   logs: Array<DeviceLogEntry>;
 
   isArchived = true;
 
+  supportRequestDetails?: SupportRequestDetailsMetaData;
+
   getLogs() {
     return this.logs;
   }

src/fb-stubs/SupportRequestDetails.tsx

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React, {Component} from 'react';
+import {Text} from '../ui';
+
+export default class extends Component<void, void> {
+  render() {
+    return <Text>Build your support request deteails form.</Text>;
+  }
+}

src/plugins/crash_reporter/index.js

@@ -753,7 +753,12 @@ export default class CrashReporterPlugin extends FlipperDevicePlugin<
               ]}>
               <Line />
               {children.map(child => {
-                return <StackTraceComponent stacktrace={child.message} />;
+                return (
+                  <StackTraceComponent
+                    key={child.message}
+                    stacktrace={child.message}
+                  />
+                );
               })}
             </ContextMenu>
           </ScrollableColumn>

src/utils/exportData.tsx

@@ -48,6 +48,7 @@ export type ExportType = {
     pluginStates: PluginStatesExportState;
     activeNotifications: Array<PluginNotification>;
   };
+  supportRequestDetails?: SupportRequestDetailsMetaData;
 };
 
 type ProcessPluginStatesOptions = {
@@ -81,6 +82,15 @@ type AddSaltToDeviceSerialOptions = {
   statusUpdate?: (msg: string) => void;
 };
 
+export type SupportRequestDetailsMetaData = {
+  title: string;
+  app: string;
+  description: string;
+  commitHash: string;
+  screenshots: {image: string; description: string}[];
+  videos: {url: string; description: string}[];
+};
+
 export function processClients(
   clients: Array<ClientExport>,
   serial: string,
@@ -577,7 +587,7 @@ export const exportStoreToFile = (
 export function importDataToStore(source: string, data: string, store: Store) {
   getLogger().track('usage', IMPORT_FLIPPER_TRACE_EVENT);
   const json: ExportType = JSON.parse(data);
-  const {device, clients} = json;
+  const {device, clients, supportRequestDetails} = json;
   if (device == null) {
     return;
   }
@@ -593,6 +603,7 @@ export function importDataToStore(source: string, data: string, store: Store) {
         })
       : [],
     source,
+    supportRequestDetails,
   );
   const devices = store.getState().connections.devices;
   const matchedDevices = devices.filter(