rearrange app inspect section

Summary:
- remove tooltip as it is about the items that are in the navbar now
- metro buttons and bookmarks are still located in the sidebar
- so are plugin app actions

Reviewed By: elboman

Differential Revision: D47470797

fbshipit-source-id: cb7d757821eaa45ea770d3731b94e4e2f1a6d0ff
This commit is contained in:
Anton Kastritskiy
2023-07-18 03:52:34 -07:00
committed by Facebook GitHub Bot
parent cf3455f126
commit d198f19471

View File

@@ -9,8 +9,8 @@
import React from 'react'; import React from 'react';
import {Typography} from 'antd'; import {Typography} from 'antd';
import {LeftSidebar, SidebarTitle, InfoIcon} from '../LeftSidebar'; import {LeftSidebar, SidebarTitle} from '../LeftSidebar';
import {Layout, Link, styled} from '../../ui'; import {Layout, styled} from '../../ui';
import {theme, useValue} from 'flipper-plugin'; import {theme, useValue} from 'flipper-plugin';
import {PluginList} from './PluginList'; import {PluginList} from './PluginList';
import MetroButton from '../../chrome/MetroButton'; import MetroButton from '../../chrome/MetroButton';
@@ -29,15 +29,6 @@ import {PluginActionsMenu} from '../../chrome/PluginActionsMenu';
const {Text} = Typography; const {Text} = Typography;
const appTooltip = (
<>
Inspect apps by selecting connected devices and emulators. Navigate and
bookmark frequent destinations in the app. Refresh, screenshot and
screenrecord is also available.{' '}
<Link href="https://fbflipper.com/docs/getting-started/">Learn More</Link>
</>
);
export function AppInspect() { export function AppInspect() {
const metroDevice = useSelector(getMetroDevice); const metroDevice = useSelector(getMetroDevice);
const client = useSelector(getActiveClient); const client = useSelector(getActiveClient);
@@ -49,16 +40,16 @@ export function AppInspect() {
<LeftSidebar> <LeftSidebar>
<Layout.Top> <Layout.Top>
<Layout.Container borderBottom> <Layout.Container borderBottom>
<SidebarTitle actions={<InfoIcon>{appTooltip}</InfoIcon>}> <Toolbar gap>
App Inspect <SidebarTitle>App Inspect</SidebarTitle>
</SidebarTitle> <div style={{flex: 1, marginRight: -16}} />
<PluginActionsMenu />
</Toolbar>
<Layout.Container padv="small" padh="medium" gap={theme.space.large}> <Layout.Container padv="small" padh="medium" gap={theme.space.large}>
{isDeviceConnected && isAppConnected && <BookmarkSection />} {isDeviceConnected && isAppConnected && <BookmarkSection />}
{isDeviceConnected && activeDevice && ( {isDeviceConnected && activeDevice && (
<Toolbar gap> <Toolbar gap>
<MetroButton /> <MetroButton />
<div style={{flex: 1}} />
<PluginActionsMenu />
</Toolbar> </Toolbar>
)} )}
</Layout.Container> </Layout.Container>