Improve support request details import form

Summary:
Created as standard layout that can be used for both the import and export form

Standardized components used, so that we work towards a Design Framework that is consistent. Took inspiration from some existing plugins.

Also fixed weird sidebar transparency.

Reviewed By: passy

Differential Revision: D18504078

fbshipit-source-id: 7649abf7aa3eba8ba635337a41274bba93738e81

src/chrome/MainSidebar.tsx

@@ -283,7 +283,6 @@ class MainSidebar extends PureComponent<Props, State> {
       staticView,
       selectPlugin,
       setStaticView,
-      windowIsFocused,
       numNotifications,
       uninitializedClients,
     } = this.props;
@@ -291,12 +290,7 @@ class MainSidebar extends PureComponent<Props, State> {
     const client: Client | undefined = getClientById(clients, selectedApp);
 
     return (
-      <Sidebar
+      <Sidebar position="left" width={200} backgroundColor={colors.light02}>
-        position="left"
-        width={200}
-        backgroundColor={
-          process.platform === 'darwin' && windowIsFocused ? 'transparent' : ''
-        }>
         <Plugins>
           {selectedDevice ? (
             <>
@@ -451,18 +445,6 @@ class MainSidebar extends PureComponent<Props, State> {
     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
@@ -562,7 +544,7 @@ class MainSidebar extends PureComponent<Props, State> {
                 color: colors.light30,
                 fontStyle: 'italic',
               }}>
-              star your favorite plugins!
+              Star your favorite plugins!
             </div>
           </ListItem>
         ) : (

src/ui/components/BottomSpaced.tsx

@@ -0,0 +1,21 @@
+/**
+ * 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 styled from 'react-emotion';
+import FlexColumn from './FlexColumn';
+
+/**
+ * Container that applies a standardized bottom margin for vertical spacing
+ */
+const BottomSpaced = styled(FlexColumn)({
+  marginBottom: 10,
+});
+BottomSpaced.displayName = 'BottomSpaced';
+
+export default BottomSpaced;

src/ui/components/CenteredView.tsx

@@ -0,0 +1,40 @@
+/**
+ * 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 from 'react';
+import styled from 'react-emotion';
+import {colors} from './colors';
+import FlexColumn from './FlexColumn';
+
+const Container = styled(FlexColumn)({
+  height: '100%',
+  overflow: 'auto',
+  backgroundColor: colors.light02,
+});
+Container.displayName = 'CenteredView:Container';
+
+const ContentWrapper = styled('div')({
+  width: 500,
+  marginLeft: 'auto',
+  marginRight: 'auto',
+  padding: '20px 0',
+});
+ContentWrapper.displayName = 'CenteredView:ContentWrapper';
+
+/**
+ * CenteredView creates a scrollable container with fixed with, centered content.
+ * Recommended to combine with RoundedSection
+ */
+const CenteredView: React.FC<{}> = ({children}) => (
+  <Container grow>
+    <ContentWrapper>{children}</ContentWrapper>
+  </Container>
+);
+
+export default CenteredView;

src/ui/components/Labeled.tsx

@@ -0,0 +1,25 @@
+/**
+ * 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 from 'react';
+import FlexColumn from './FlexColumn';
+import Label from './Label';
+import BottomSpaced from './BottomSpaced';
+
+/**
+ * Vertically arranged section that starts with a label and includes standard margins
+ */
+const Labeled: React.FC<{title: string}> = ({title, children}) => (
+  <FlexColumn>
+    <Label style={{marginBottom: 6}}>{title}</Label>
+    <BottomSpaced>{children}</BottomSpaced>
+  </FlexColumn>
+);
+
+export default Labeled;

src/ui/components/RoundedSection.tsx

@@ -0,0 +1,45 @@
+/**
+ * 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 from 'react';
+import styled from 'react-emotion';
+import {colors} from './colors';
+import Heading from './Heading';
+
+const Divider = styled('hr')({
+  margin: '16px -20px 20px -20px',
+  border: 'none',
+  borderTop: `1px solid ${colors.light05}`,
+});
+Divider.displayName = 'RoundedSection:Divider';
+
+const Container = styled('div')({
+  background: colors.white,
+  borderRadius: 10,
+  boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
+  marginBottom: '20px',
+  width: '100%',
+  padding: 20,
+});
+Container.displayName = 'RoundedSection:Container';
+
+/**
+ * Section with a title, dropshadow, rounded border and white backgorund.
+ *
+ * Recommended to be used inside a CenteredView
+ */
+const RoundedSection: React.FC<{title: string}> = ({title, children}) => (
+  <Container>
+    <Heading>{title}</Heading>
+    <Divider />
+    {children}
+  </Container>
+);
+
+export default RoundedSection;

src/ui/components/SmallText.tsx

@@ -0,0 +1,24 @@
+/**
+ * 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 styled from 'react-emotion';
+import {colors} from './colors';
+import Text from './Text';
+
+/**
+ * Subtle text that should not draw attention
+ */
+const SmallText = styled(Text)({
+  color: colors.light20,
+  size: 10,
+  fontStyle: 'italic',
+});
+SmallText.displayName = 'SmallText';
+
+export default SmallText;

src/ui/index.tsx

@@ -159,3 +159,9 @@ export {Console} from './components/console';
 
 export {default as Sheet} from './components/Sheet';
 export {StarButton} from './components/StarButton';
+
+export {default as BottomSpaced} from './components/BottomSpaced';
+export {default as SmallText} from './components/SmallText';
+export {default as Labeled} from './components/Labeled';
+export {default as RoundedSection} from './components/RoundedSection';
+export {default as CenteredView} from './components/CenteredView';

src/utils/exportData.tsx

@@ -32,6 +32,7 @@ import {tryCatchReportPlatformFailures} from './metrics';
 import {promisify} from 'util';
 import promiseTimeout from './promiseTimeout';
 import {Idler} from './Idler';
+import {setStaticView} from '../reducers/connections';
 export const IMPORT_FLIPPER_TRACE_EVENT = 'import-flipper-trace';
 export const EXPORT_FLIPPER_TRACE_EVENT = 'export-flipper-trace';
 export const EXPORT_FLIPPER_TRACE_TIME_SERIALIZATION_EVENT = `${EXPORT_FLIPPER_TRACE_EVENT}:serialization`;
@@ -664,6 +665,12 @@ export function importDataToStore(source: string, data: string, store: Store) {
       ),
     });
   });
+  if (supportRequestDetails) {
+    store.dispatch(
+      // Late require to avoid circular dependency issue
+      setStaticView(require('../fb-stubs/SupportRequestDetails').default),
+    );
+  }
 }
 
 export const importFileToStore = (file: string, store: Store) => {

src/utils/icons.js

@@ -48,7 +48,7 @@ const ICONS = {
   desktop: [12],
   directions: [12],
   internet: [12],
-  mobile: [12, 32],
+  mobile: [12, 16, 32],
   posts: [20],
   profile: [12],
   rocket: [20],