app inspect button

Reviewed By: elboman

Differential Revision: D47438914

fbshipit-source-id: 297fba476e348dee89fa723db5303f0342b331c2

desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx

@@ -9,7 +9,7 @@
 
 import React, {cloneElement, useState, useCallback} from 'react';
 import {Button, Divider, Badge, Tooltip, Menu, Modal} from 'antd';
-import {MobileFilled, SettingOutlined, BugOutlined} from '@ant-design/icons';
+import {SettingOutlined, BugOutlined} from '@ant-design/icons';
 import {useStore} from '../utils/useStore';
 import {
   theme,
@@ -20,7 +20,6 @@ import {
 } from 'flipper-plugin';
 import SettingsSheet from '../chrome/SettingsSheet';
 import WelcomeScreen from './WelcomeScreen';
-import {ToplevelProps} from './SandyApp';
 import config from '../fb-stubs/config';
 import styled from '@emotion/styled';
 import {setStaticView} from '../reducers/connections';
@@ -119,10 +118,7 @@ const LeftRailDivider = styled(Divider)({
 });
 LeftRailDivider.displayName = 'LeftRailDividier';
 
-export const LeftRail = withTrackingScope(function LeftRail({
+export const LeftRail = withTrackingScope(function LeftRail() {
-  toplevelSelection,
-  setToplevelSelection,
-}: ToplevelProps) {
   return (
     <Layout.Container
       borderRight
@@ -130,25 +126,12 @@ export const LeftRail = withTrackingScope(function LeftRail({
       padv={12}
       width={48}
       style={{background: theme.backgroundDefault}}>
-      <Layout.Bottom style={{overflow: 'visible'}}>
-        <Layout.Container center gap={10} padh={6}>
-          <LeftRailButton
-            icon={<MobileFilled />}
-            title="App Inspect"
-            selected={toplevelSelection === 'appinspect'}
-            onClick={() => {
-              setToplevelSelection('appinspect');
-            }}
-          />
-          <LeftRailDivider />
-        </Layout.Container>
       <Layout.Container center gap={10} padh={6}>
         <UpdateIndicator />
         <SandyRatingButton />
         <ExportEverythingEverywhereAllAtOnceButton />
         <ExtrasMenu />
       </Layout.Container>
-      </Layout.Bottom>
     </Layout.Container>
   );
 });

desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx

@@ -33,6 +33,7 @@ import {
   LayoutOutlined,
   LoginOutlined,
   MedicineBoxOutlined,
+  MobileOutlined,
   QuestionCircleOutlined,
   RocketOutlined,
   VideoCameraOutlined,
@@ -70,6 +71,15 @@ export const Navbar = withTrackingScope(function Navbar({
       }}>
       <Layout.Horizontal style={{gap: 4}}>
         <LeftSidebarToggleButton />
+        <NavbarButton
+          icon={MobileOutlined}
+          label="App Inspect"
+          toggled={toplevelSelection === 'appinspect'}
+          onClick={() => {
+            setToplevelSelection('appinspect');
+          }}
+        />
+
         <button>device picker</button>
         <NavbarButton label="Screenshot" icon={CameraOutlined} />
         <NavbarButton label="Record" icon={VideoCameraOutlined} />

desktop/flipper-ui-core/src/sandy-chrome/SandyApp.tsx

@@ -175,10 +175,7 @@ export function SandyApp() {
           />
           <Layout.Left>
             <Layout.Horizontal>
-              <LeftRail
+              <LeftRail />
-                toplevelSelection={toplevelSelection}
-                setToplevelSelection={setToplevelSelection}
-              />
               <_Sidebar width={250} minWidth={220} maxWidth={800} gutter>
                 {leftMenuContent && (
                   <TrackingScope scope={toplevelSelection!}>