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}>
+