Add Marketing Bar for Flipper Support Form

Summary: This diff shows marketing bar for support feature when someone inspects the litho view. Once it is inspected it will shown for the rest of the time till the plugin is unmounted.

Reviewed By: jknoxville

Differential Revision: D18086347

fbshipit-source-id: cb906614f571e8ece2293b028f809d1aa5c211e5

src/PluginContainer.tsx

@@ -24,6 +24,7 @@ import {
   styled,
   ArchivedDevice,
 } from 'flipper';
+import {StaticView, setStaticView} from './reducers/connections';
 import React, {PureComponent} from 'react';
 import {connect} from 'react-redux';
 import {setPluginState} from './reducers/pluginStates';
@@ -66,6 +67,7 @@ type DispatchFromProps = {
     deepLinkPayload: string | null;
   }) => any;
   setPluginState: (payload: {pluginKey: string; state: any}) => void;
+  setStaticView: (payload: StaticView) => void;
 };
 
 type Props = StateFromProps & DispatchFromProps & OwnProps;
@@ -136,6 +138,7 @@ class PluginContainer extends PureComponent<Props> {
             ...pluginState,
           }
         : pluginState,
+      setStaticView: (payload: StaticView) => this.props.setStaticView(payload),
       setPersistedState: state => setPluginState({pluginKey, state}),
       target,
       deepLinkPayload: this.props.deepLinkPayload,
@@ -228,5 +231,6 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
   {
     setPluginState,
     selectPlugin,
+    setStaticView,
   },
 )(PluginContainer);

src/index.tsx

@@ -24,9 +24,12 @@ export {PluginClient, Props} from './plugin';
 export {default as Client} from './Client';
 export {MetricType} from './utils/exportMetrics';
 export {clipboard} from 'electron';
+export {
+  default as SupportRequestFormManager,
+} from './fb-stubs/SupportRequestFormManager';
 export {default as constants} from './fb-stubs/constants';
 export {connect} from 'react-redux';
-export {selectPlugin} from './reducers/connections';
+export {selectPlugin, StaticView} from './reducers/connections';
 export {writeBufferToFile, bufferToBlob} from './utils/screenshot';
 export {getPluginKey, getPersistedState} from './utils/pluginUtils';
 export {Idler} from './utils/Idler';

src/plugin.tsx

@@ -17,6 +17,7 @@ import {ReactNode, Component} from 'react';
 import BaseDevice from './devices/BaseDevice';
 import {serialize, deserialize} from './utils/serialization';
 import {Idler} from './utils/Idler';
+import {StaticView} from './reducers/connections';
 type Parameters = any;
 
 // This function is intended to be called from outside of the plugin.
@@ -60,6 +61,7 @@ export type Props<T> = {
   selectPlugin: (pluginID: string, deepLinkPayload: string | null) => boolean;
   isArchivedDevice: boolean;
   selectedApp: string | null;
+  setStaticView: (payload: StaticView) => void;
 };
 
 export type BaseAction = {

src/plugins/layout/index.tsx

@@ -22,6 +22,11 @@ import {
   Button,
   GK,
   Idler,
+  Text,
+  styled,
+  colors,
+  SupportRequestFormManager,
+  constants,
 } from 'flipper';
 import Inspector from './Inspector';
 import ToolbarIcon from './ToolbarIcon';
@@ -49,7 +54,39 @@ export type PersistedState = {
   AXelements: ElementMap;
 };
 
+const FlipperADBarContainer = styled(FlexRow)({
+  backgroundColor: colors.warningTint,
+  flexGrow: 1,
+  height: 50,
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderWidth: 2,
+});
+
+const FlipperADText = styled(Text)({
+  padding: 10,
+});
+
 export default class Layout extends FlipperPlugin<State, any, PersistedState> {
+  FlipperADBar() {
+    return (
+      <FlipperADBarContainer>
+        <FlipperADText>
+          You can now submit support requests to Litho Group from Flipper. This
+          automatically attaches critical information for reproducing your issue
+          with just a single click.
+        </FlipperADText>
+        <Button
+          type="primary"
+          onClick={() => {
+            this.props.setStaticView(SupportRequestFormManager);
+          }}>
+          Try it out
+        </Button>
+      </FlipperADBarContainer>
+    );
+  }
+
   static exportPersistedState = async (
     callClient: (
       method: 'getAllNodes',
@@ -164,7 +201,7 @@ export default class Layout extends FlipperPlugin<State, any, PersistedState> {
       ax: this.state.inAXMode,
     });
   };
-
+  showFlipperADBar: boolean = false;
   render() {
     const inspectorProps = {
       client: this.getClient(),
@@ -184,7 +221,9 @@ export default class Layout extends FlipperPlugin<State, any, PersistedState> {
     } else if (selectedElement) {
       element = this.props.persistedState.elements[selectedElement];
     }
-
+    if (!constants.IS_PUBLIC_BUILD && !this.showFlipperADBar) {
+      this.showFlipperADBar = element != null && element.decoration === 'litho';
+    }
     const inspector = (
       <Inspector
         {...inspectorProps}
@@ -247,12 +286,12 @@ export default class Layout extends FlipperPlugin<State, any, PersistedState> {
                 initialQuery={this.props.deepLinkPayload}
               />
             </Toolbar>
-
             <FlexRow grow={true}>
               {inspector}
               {divider}
               {axInspector}
             </FlexRow>
+            {this.showFlipperADBar && this.FlipperADBar()}
             <DetailSidebar>
               <InspectorSidebar
                 client={this.getClient()}

src/ui/components/colors.tsx

@@ -261,6 +261,8 @@ export const colors = {
   sectionHeaderBorder: '#DDDFE2',
   placeholder: '#A7AAB1',
   info: '#5ACFEC',
+  // Warning colors
+  warningTint: '#ecd9ad',
 };
 
 export const darkColors = {