Diff and update mobile configs

Summary:
This diff makes it possible to apply MC's to a currently running as part of the support form process.

Things _NOT_ done in the diff:

* make sure getUniverses and getGatekeepers returns valid configs (this broke since somewhere last week, opened T57918601 for that. However, before that this worked correctly
* provide a more interactive UI when applying MC's, such as beeing able to see a diff preview, ask confirmation before overriding current config, etc

Reviewed By: jknoxville

Differential Revision: D18452172

fbshipit-source-id: da3f24bccf88260282f86e2564e983a9ee217c2f

src/chrome/MainSidebar.tsx

@@ -30,9 +30,9 @@ import {
   LoadingIndicator,
   Button,
   StarButton,
-  ArchivedDevice,
   Heading,
   Spacer,
+  ArchivedDevice,
 } from 'flipper';
 import React, {Component, PureComponent, Fragment} from 'react';
 import NotificationsHub from '../NotificationsHub';

src/reducers/connections.tsx

@@ -219,6 +219,7 @@ const reducer = (state: State = INITAL_STATE, action: Actions): State => {
 
       return updateSelection({
         ...state,
+        staticView: null,
         selectedApp,
         selectedPlugin,
         userPreferredPlugin: selectedPlugin || state.userPreferredPlugin,
@@ -519,6 +520,10 @@ function canBeDefaultDevice(device: BaseDevice) {
  * @param state
  */
 function updateSelection(state: Readonly<State>): State {
+  if (state.staticView && state.staticView !== WelcomeScreen) {
+    return state;
+  }
+
   const updates: Partial<State> = {
     staticView: null,
   };
@@ -569,7 +574,5 @@ function updateSelection(state: Readonly<State>): State {
     updates.selectedPlugin = DEFAULT_PLUGIN;
   }
 
-  const res = {...state, ...updates};
+  return {...state, ...updates};
-  console.log(res.selectedDevice, res.selectedApp, res.selectedPlugin);
-  return res;
 }

src/ui/components/Info.tsx

@@ -49,6 +49,7 @@ const InfoWrapper = styled(FlexColumn)(({type}: {type: InfoProps['type']}) => ({
   border: `1px solid ${color[type]}`,
   background: bgColor[type],
 }));
+InfoWrapper.displayName = 'InfoWrapper';
 
 /**
  * Shows an info box with some text and a symbol.

src/ui/components/Labeled.tsx

@@ -8,7 +8,6 @@
  */
 
 import React from 'react';
-import FlexColumn from './FlexColumn';
 import Label from './Label';
 import VBox from './VBox';
 
@@ -16,10 +15,10 @@ import VBox from './VBox';
  * Vertically arranged section that starts with a label and includes standard margins
  */
 const Labeled: React.FC<{title: string}> = ({title, children}) => (
-  <FlexColumn>
+  <VBox>
     <Label style={{marginBottom: 6}}>{title}</Label>
-    <VBox>{children}</VBox>
+    {children}
-  </FlexColumn>
+  </VBox>
 );
 
 export default Labeled;