Clean up home screen

Summary: The default screen without any devices or magic GK's was a bit noisy, this diffs cleans it up

Reviewed By: jknoxville

Differential Revision: D25946004

fbshipit-source-id: 76b7eec16b433544e9872e726e8f57dd1ce02b0f

desktop/app/src/reducers/connections.tsx

@@ -17,7 +17,7 @@ import {UninitializedClient} from '../UninitializedClient';
 import {isEqual} from 'lodash';
 import {performance} from 'perf_hooks';
 import {Actions} from '.';
-import WelcomeScreen from '../chrome/WelcomeScreen';
+import {WelcomeScreenStaticView} from '../sandy-chrome/WelcomeScreen';
 import {getPluginKey, isDevicePluginDefinition} from '../utils/pluginUtils';
 import {deconstructClientId} from '../utils/clientUtils';
 import {PluginDefinition} from '../plugin';
@@ -27,7 +27,10 @@ import {Logger} from 'flipper-plugin';
 
 export type StaticViewProps = {logger: Logger};
 
-export type StaticView = null | ComponentType<StaticViewProps>;
+export type StaticView =
+  | null
+  | ComponentType<StaticViewProps>
+  | React.FunctionComponent<any>;
 
 export type State = {
   devices: Array<BaseDevice>;
@@ -142,7 +145,7 @@ const INITAL_STATE: State = {
   clients: [],
   uninitializedClients: [],
   deepLinkPayload: null,
-  staticView: WelcomeScreen,
+  staticView: WelcomeScreenStaticView,
 };
 
 export default (state: State = INITAL_STATE, action: Actions): State => {
@@ -466,7 +469,7 @@ export function canBeDefaultDevice(device: BaseDevice) {
  * @param state
  */
 function updateSelection(state: Readonly<State>): State {
-  if (state.staticView && state.staticView !== WelcomeScreen) {
+  if (state.staticView && state.staticView !== WelcomeScreenStaticView) {
     return state;
   }
 
@@ -488,7 +491,7 @@ function updateSelection(state: Readonly<State>): State {
   }
   updates.selectedDevice = device;
   if (!device) {
-    updates.staticView = WelcomeScreen;
+    updates.staticView = WelcomeScreenStaticView;
   }
 
   // Select client based on device

desktop/app/src/sandy-chrome/SandyApp.tsx

@@ -33,6 +33,7 @@ import {hasNewChangesToShow} from '../chrome/ChangelogSheet';
 import {SandyWelcomScreen} from './SandyWelcomeScreen';
 import {getVersionString} from '../utils/versionString';
 import config from '../fb-stubs/config';
+import {WelcomeScreenStaticView} from './WelcomeScreen';
 
 export type ToplevelNavItem =
   | 'appinspect'
@@ -136,11 +137,15 @@ export function SandyApp() {
                   staticView.constructor?.name ??
                   'unknown static view'
                 }>
-                <ContentContainer>
+                {staticView === WelcomeScreenStaticView ? (
-                  {React.createElement(staticView, {
+                  React.createElement(staticView) /* avoid shadow */
-                    logger: logger,
+                ) : (
-                  })}
+                  <ContentContainer>
-                </ContentContainer>
+                    {React.createElement(staticView, {
+                      logger: logger,
+                    })}
+                  </ContentContainer>
+                )}
               </TrackingScope>
             ) : (
               <PluginContainer logger={logger} isSandy />

desktop/app/src/sandy-chrome/WelcomeScreen.tsx

@@ -16,7 +16,7 @@ import {
   CodeOutlined,
   BugOutlined,
 } from '@ant-design/icons';
-import {theme, Tracked, TrackingScope} from 'flipper-plugin';
+import {Layout, theme, Tracked, TrackingScope} from 'flipper-plugin';
 
 const {Text, Title} = Typography;
 
@@ -113,48 +113,70 @@ export default function WelcomeScreen({
         />
       }
       onCancel={onClose}>
-      <TrackingScope scope="welcomescreen">
+      <WelcomeScreenContent />
-        <Space
-          direction="vertical"
-          size="middle"
-          style={{width: '100%', padding: '32px', alignItems: 'center'}}>
-          <Image width={125} height={125} src="./icon.png" preview={false} />
-          <Title level={1}>Welcome to Flipper</Title>
-          <Text style={{color: theme.textColorPlaceholder}}>
-            {isProduction() && remote
-              ? `Version ${remote.app.getVersion()}`
-              : 'Development Mode'}
-          </Text>
-        </Space>
-        <Space direction="vertical" size="large" style={{width: '100%'}}>
-          <Row
-            icon={<RocketOutlined />}
-            title="Using Flipper"
-            subtitle="Learn how Flipper can help you debug your App"
-            onClick={openExternal('https://fbflipper.com/docs/features/index')}
-          />
-          <Row
-            icon={<AppstoreAddOutlined />}
-            title="Create Your Own Plugin"
-            subtitle="Get started with these pointers"
-            onClick={openExternal('https://fbflipper.com/docs/tutorial/intro')}
-          />
-          <Row
-            icon={<CodeOutlined />}
-            title="Add Flipper Support to Your App"
-            subtitle="Get started with these pointers"
-            onClick={openExternal(
-              'https://fbflipper.com/docs/getting-started/index',
-            )}
-          />
-          <Row
-            icon={<BugOutlined />}
-            title="Contributing and Feedback"
-            subtitle="Report issues and help us improve Flipper"
-            onClick={openExternal(constants.FEEDBACK_GROUP_LINK)}
-          />
-        </Space>
-      </TrackingScope>
     </Modal>
   );
 }
+
+export function WelcomeScreenStaticView() {
+  return (
+    <Layout.Container
+      center
+      style={{
+        justifyContent: 'center',
+      }}
+      pad
+      grow>
+      <Layout.Container width={400} center>
+        <WelcomeScreenContent />
+      </Layout.Container>
+    </Layout.Container>
+  );
+}
+
+function WelcomeScreenContent() {
+  return (
+    <TrackingScope scope="welcomescreen">
+      <Space
+        direction="vertical"
+        size="middle"
+        style={{width: '100%', padding: '0 32px 32px', alignItems: 'center'}}>
+        <Image width={125} height={125} src="./icon.png" preview={false} />
+        <Title level={1}>Welcome to Flipper</Title>
+        <Text style={{color: theme.textColorPlaceholder}}>
+          {isProduction() && remote
+            ? `Version ${remote.app.getVersion()}`
+            : 'Development Mode'}
+        </Text>
+      </Space>
+      <Space direction="vertical" size="large" style={{width: '100%'}}>
+        <Row
+          icon={<RocketOutlined />}
+          title="Using Flipper"
+          subtitle="Learn how Flipper can help you debug your App"
+          onClick={openExternal('https://fbflipper.com/docs/features/index')}
+        />
+        <Row
+          icon={<AppstoreAddOutlined />}
+          title="Create Your Own Plugin"
+          subtitle="Get started with these pointers"
+          onClick={openExternal('https://fbflipper.com/docs/tutorial/intro')}
+        />
+        <Row
+          icon={<CodeOutlined />}
+          title="Add Flipper Support to Your App"
+          subtitle="Get started with these pointers"
+          onClick={openExternal(
+            'https://fbflipper.com/docs/getting-started/index',
+          )}
+        />
+        <Row
+          icon={<BugOutlined />}
+          title="Contributing and Feedback"
+          subtitle="Report issues and help us improve Flipper"
+          onClick={openExternal(constants.FEEDBACK_GROUP_LINK)}
+        />
+      </Space>
+    </TrackingScope>
+  );
+}

desktop/app/src/sandy-chrome/appinspect/AppInspect.tsx

@@ -71,7 +71,7 @@ export function AppInspect() {
             ) : (
               <BookmarkSection />
             )}
-            {!isArchived && (
+            {!isArchived && activeDevice && (
               <Toolbar gap>
                 <MetroButton useSandy />
                 <ScreenCaptureButtons useSandy />
@@ -86,11 +86,7 @@ export function AppInspect() {
               metroDevice={metroDevice}
               client={client}
             />
-          ) : (
+          ) : null}
-            <Layout.Container padh>
-              <Alert message="No device or app selected." type="info" />
-            </Layout.Container>
-          )}
         </Layout.ScrollContainer>
       </Layout.Top>
     </LeftSidebar>