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/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 ? (
-                <ListItem
-                  style={{
-                    fontSize: 9,
-                    lineHeight: '11px',
-                    color: colors.light30,
-                    wordBreak: 'break-all',
-                    paddingBottom: '10px',
-                  }}>
-                  Snapshot imported from:
-                  <br />
-                  {selectedDevice.source}
-                </ListItem>
-              ) : null}
+              {this.showArchivedDeviceDetails(selectedDevice)}
             </>
           )}
           {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,