Restore styleguide menu entry, reordered menu

Summary: The styleguide was no longer accessible in Flipper, this diff restores that, and also cleans up the extras menu a bit to by creating a plugin devs only section.

Reviewed By: antonk52

Differential Revision: D36697071

fbshipit-source-id: a2abce40157fffd4952172f379c8063492e2dcc0

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

@@ -68,6 +68,7 @@ import {openDeeplinkDialog} from '../deeplink';
 import {css} from '@emotion/css';
 import {getRenderHostInstance} from '../RenderHost';
 import openSupportRequestForm from '../fb-stubs/openSupportRequestForm';
+import {StyleGuide} from './StyleGuide';
 
 const LeftRailButtonElem = styled(Button)<{kind?: 'small'}>(({kind}) => ({
   width: kind === 'small' ? 32 : 36,
@@ -216,10 +217,6 @@ const submenu = css`
   }
 `;
 
-const MenuDividerPadded = styled(Menu.Divider)({
-  marginBottom: '8px !important',
-});
-
 function ExtrasMenu() {
   const store = useStore();
 
@@ -280,14 +277,24 @@ function ExtrasMenu() {
                 Export shareable link
               </Menu.Item>
             ) : null}
-            <Menu.Item
+            <Menu.Divider />
-              key="triggerDeeplink"
+            <SubMenu title="Plugin developers">
-              onClick={() => openDeeplinkDialog(store)}>
+              <Menu.Item
-              Trigger deeplink
+                key="styleguide"
-            </Menu.Item>
+                onClick={() => {
+                  store.dispatch(setStaticView(StyleGuide));
+                }}>
+                Flipper Style Guide
+              </Menu.Item>
+              <Menu.Item
+                key="triggerDeeplink"
+                onClick={() => openDeeplinkDialog(store)}>
+                Trigger deeplink
+              </Menu.Item>
+            </SubMenu>
+            <Menu.Divider />
             {config.isFBBuild ? (
               <>
-                <MenuDividerPadded />
                 <Menu.Item
                   key="feedback"
                   onClick={() => {
@@ -307,11 +314,9 @@ function ExtrasMenu() {
                 </Menu.Item>
               </>
             ) : null}
-            <MenuDividerPadded />
             <Menu.Item key="settings" onClick={() => setShowSettings(true)}>
               Settings
             </Menu.Item>
-            <Menu.Divider />
             <Menu.Item key="help" onClick={() => setWelcomeVisible(true)}>
               Help
             </Menu.Item>