toggle right sidebar button

Reviewed By: elboman

Differential Revision: D47437493

fbshipit-source-id: c799dddb2bb1a7e6420f41670b130724bb1817eb

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({
         <Layout.Container center gap={10} padh={6}>
           <UpdateIndicator />
           <SandyRatingButton />
-          <RightSidebarToggleButton />
           <ExportEverythingEverywhereAllAtOnceButton />
           <ExtrasMenu />
         </Layout.Container>
@@ -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 (
-    <LeftRailButton
-      icon={<SidebarRight />}
-      small
-      title="Right Sidebar Toggle"
-      toggled={rightSidebarVisible}
-      disabled={!rightSidebarAvailable}
-      onClick={() => {
-        dispatch(toggleRightSidebarVisible());
-      }}
-    />
-  );
-}
-
 function NotificationButton({
   toplevelSelection,
   setToplevelSelection,

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({
         <SetupDoctorButton />
         <NavbarButton label="Help" icon={QuestionCircleOutlined} />
         <NavbarButton label="More" icon={EllipsisOutlined} />
+        <RightSidebarToggleButton />
         {config.showLogin && <LoginConnectivityButton />}
       </Layout.Horizontal>
     </Layout.Horizontal>
@@ -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 (
+    <NavbarButton
+      icon={LayoutOutlined}
+      flipIcon
+      label="Toggle R.Sidebar"
+      toggled={!rightSidebarVisible}
+      disabled={!rightSidebarAvailable}
+      onClick={() => {
+        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',
-      }}>
-      <Icon style={{color, fontSize: 24}} />
+      }}
+      disabled={disabled}>
+      <Icon
+        style={{
+          color,
+          fontSize: 24,
+          transform: flipIcon ? 'scaleX(-1)' : undefined,
+        }}
+      />
       <span
         style={{
           margin: 0,