diff --git a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx index 5a5c30cfd..52603da52 100644 --- a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx +++ b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx @@ -16,9 +16,7 @@ import { BugOutlined, ApiOutlined, } from '@ant-design/icons'; -import {SidebarRight} from './SandyIcons'; -import {useDispatch, useStore} from '../utils/useStore'; -import {toggleRightSidebarVisible} from '../reducers/application'; +import {useStore} from '../utils/useStore'; import { theme, Layout, @@ -165,7 +163,6 @@ export const LeftRail = withTrackingScope(function LeftRail({ - @@ -296,29 +293,6 @@ function ExtrasMenu() { ); } -function RightSidebarToggleButton() { - const dispatch = useDispatch(); - const rightSidebarAvailable = useStore( - (state) => state.application.rightSidebarAvailable, - ); - const rightSidebarVisible = useStore( - (state) => state.application.rightSidebarVisible, - ); - - return ( - } - small - title="Right Sidebar Toggle" - toggled={rightSidebarVisible} - disabled={!rightSidebarAvailable} - onClick={() => { - dispatch(toggleRightSidebarVisible()); - }} - /> - ); -} - function NotificationButton({ toplevelSelection, setToplevelSelection, diff --git a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx index 84fcb5bcd..34a5bbe11 100644 --- a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx +++ b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx @@ -35,7 +35,10 @@ import { VideoCameraOutlined, WarningOutlined, } from '@ant-design/icons'; -import {toggleLeftSidebarVisible} from '../reducers/application'; +import { + toggleLeftSidebarVisible, + toggleRightSidebarVisible, +} from '../reducers/application'; import {ToplevelProps} from './SandyApp'; import PluginManager from '../chrome/plugin-manager/PluginManager'; import {showEmulatorLauncher} from './appinspect/LaunchEmulator'; @@ -90,6 +93,7 @@ export const Navbar = withTrackingScope(function Navbar({ + {config.showLogin && } @@ -114,6 +118,29 @@ function LeftSidebarToggleButton() { ); } +function RightSidebarToggleButton() { + const dispatch = useDispatch(); + const rightSidebarAvailable = useStore( + (state) => state.application.rightSidebarAvailable, + ); + const rightSidebarVisible = useStore( + (state) => state.application.rightSidebarVisible, + ); + + return ( + { + dispatch(toggleRightSidebarVisible()); + }} + /> + ); +} + function LaunchEmulatorButton() { const store = useStore(); @@ -184,14 +211,18 @@ function NavbarButton({ toggled = false, onClick, count, + disabled = false, + flipIcon = false, }: { - icon: typeof LoginOutlined; + icon: (props: any) => any; label: string; selected?: boolean; // TODO remove optional onClick?: () => void; toggled?: boolean; count?: number | true; + disabled?: boolean; + flipIcon?: boolean; }) { const color = toggled ? theme.primaryColor : theme.textColorActive; const button = ( @@ -206,8 +237,15 @@ function NavbarButton({ flexDirection: 'column', alignItems: 'center', height: 'auto', - }}> - + }} + disabled={disabled}> +