Add survey banner for Hermes Debugger

Summary:
As requested by the Hermes team, this adds an internal-only banner linking to a survey for the debugger (controlled by a GK).

Gatekeeper: https://our.intern.facebook.com/intern/gatekeeper/projects/flipper_plugin_hermes_debugger_survey/

Reviewed By: mweststrate

Differential Revision: D21556848

fbshipit-source-id: df34f49f504d11bba622709df86c8475be2433eb

desktop/plugins/hermesdebuggerrn/index.tsx

@@ -8,8 +8,16 @@
  */
 
 import React from 'react';
-import {FlipperDevicePlugin, Device} from 'flipper';
+import {
+  FlipperDevicePlugin,
+  Device,
+  styled,
+  colors,
+  FlexRow,
+  FlexColumn,
+} from 'flipper';
 import LaunchScreen from './LaunchScreen';
+import Banner, {isBannerEnabled} from './Banner';
 import SelectScreen from './SelectScreen';
 import ErrorScreen from './ErrorScreen';
 import ChromeDevTools from './ChromeDevTools';
@@ -36,6 +44,22 @@ type State = Readonly<{
   error?: Error | null;
 }>;
 
+const Content = styled(FlexRow)({
+  height: '100%',
+  width: '100%',
+  flexGrow: 1,
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const Container = styled(FlexColumn)({
+  height: '100%',
+  width: '100%',
+  justifyContent: 'flex-start',
+  alignItems: 'flex-start',
+  backgroundColor: colors.light02,
+});
+
 export default class extends FlipperDevicePlugin<State, any, any> {
   static title = 'Hermes Debugger';
   static id = 'Hermesdebuggerrn';
@@ -117,11 +141,21 @@ export default class extends FlipperDevicePlugin<State, any, any> {
 
   handleSelect = (selectedTarget: Target) => this.setState({selectedTarget});
 
-  render() {
+  renderContent() {
     const {error, selectedTarget, targets} = this.state;
 
     if (selectedTarget) {
-      return <ChromeDevTools url={selectedTarget.devtoolsFrontendUrl} />;
+      let bannerMargin = null;
+      if (isBannerEnabled()) {
+        bannerMargin = '29px';
+      }
+
+      return (
+        <ChromeDevTools
+          url={selectedTarget.devtoolsFrontendUrl}
+          marginTop={bannerMargin}
+        />
+      );
     } else if (targets != null && targets.length === 0) {
       return <LaunchScreen />;
     } else if (targets != null && targets.length > 0) {
@@ -132,4 +166,13 @@ export default class extends FlipperDevicePlugin<State, any, any> {
       return null;
     }
   }
+
+  render() {
+    return (
+      <Container>
+        <Banner />
+        <Content>{this.renderContent()}</Content>
+      </Container>
+    );
+  }
 }