Only show left sidebar toggle if there is a sidebar

Summary:
^

Not all selections have a left sidebar. If the current selection doesn't have one, it doesn't make sense to have the toggle sidebar button, so hide it.

Reviewed By: LukeDefeo

Differential Revision: D47593545

fbshipit-source-id: 940d59536e26bd1ab341d2038df431c67e0a5442

desktop/flipper-ui-core/src/reducers/application.tsx

@@ -37,6 +37,7 @@ export type ShareType = {
 } & SubShareType;
 
 export type State = {
+  hasLeftSidebar: boolean;
   leftSidebarVisible: boolean;
   rightSidebarVisible: boolean;
   rightSidebarAvailable: boolean;
@@ -48,6 +49,7 @@ export type State = {
 };
 
 type BooleanActionType =
+  | 'hasLeftSidebar'
   | 'leftSidebarVisible'
   | 'rightSidebarVisible'
   | 'rightSidebarAvailable';
@@ -78,6 +80,7 @@ export type Action =
     };
 
 export const initialState: () => State = () => ({
+  hasLeftSidebar: true,
   leftSidebarVisible: true,
   rightSidebarVisible: true,
   rightSidebarAvailable: false,
@@ -110,6 +113,7 @@ export default function reducer(
 ): State {
   state = state || initialState();
   if (
+    action.type === 'hasLeftSidebar' ||
     action.type === 'leftSidebarVisible' ||
     action.type === 'rightSidebarVisible' ||
     action.type === 'rightSidebarAvailable'
@@ -175,6 +179,11 @@ export const toggleLeftSidebarVisible = (payload?: boolean): Action => ({
   payload,
 });
 
+export const toggleHasLeftSidebar = (payload?: boolean): Action => ({
+  type: 'hasLeftSidebar',
+  payload,
+});
+
 export const toggleRightSidebarVisible = (payload?: boolean): Action => ({
   type: 'rightSidebarVisible',
   payload,

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

@@ -246,20 +246,25 @@ function NotificationButton({
 
 function LeftSidebarToggleButton() {
   const dispatch = useDispatch();
+  const hasMainMenu = useStore((state) => state.application.hasLeftSidebar);
   const mainMenuVisible = useStore(
     (state) => state.application.leftSidebarVisible,
   );
 
-  return (
+  if (hasMainMenu) {
-    <NavbarButton
+    return (
-      label="Toggle Sidebar"
+      <NavbarButton
-      icon={LayoutOutlined}
+        label="Toggle Sidebar"
-      toggled={!mainMenuVisible}
+        icon={LayoutOutlined}
-      onClick={() => {
+        toggled={!mainMenuVisible}
-        dispatch(toggleLeftSidebarVisible());
+        onClick={() => {
-      }}
+          dispatch(toggleLeftSidebarVisible());
-    />
+        }}
-  );
+      />
+    );
+  }
+
+  return null;
 }
 
 function RightSidebarToggleButton() {

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

@@ -24,7 +24,10 @@ import {Navbar} from './Navbar';
 import {useStore, useDispatch} from '../utils/useStore';
 import {FlipperDevTools} from '../chrome/FlipperDevTools';
 import {setStaticView} from '../reducers/connections';
-import {toggleLeftSidebarVisible} from '../reducers/application';
+import {
+  toggleHasLeftSidebar,
+  toggleLeftSidebarVisible,
+} from '../reducers/application';
 import {AppInspect} from './appinspect/AppInspect';
 import PluginContainer from '../PluginContainer';
 import {ContentContainer} from './ContentContainer';
@@ -79,6 +82,8 @@ export function SandyApp() {
       // toggle sidebar visibility if needed
       const hasLeftSidebar =
         newSelection === 'appinspect' || newSelection === 'notification';
+
+      dispatch(toggleHasLeftSidebar(hasLeftSidebar));
       if (hasLeftSidebar) {
         if (newSelection === toplevelSelection) {
           dispatch(toggleLeftSidebarVisible());