Add ability to open the Notebook with a key command within the UserMenu

src/sidebar/components/UserMenu.js

 import { SvgIcon } from '@hypothesis/frontend-shared';
+import { useState } from 'preact/hooks';
 
 import bridgeEvents from '../../shared/bridge-events';
 import serviceConfig from '../config/service-config';
@@ -44,6 +45,7 @@ function UserMenu({ auth, bridge, onLogout, serviceUrl, settings }) {
   const isThirdParty = isThirdPartyUser(auth.userid, settings.authDomain);
   const service = serviceConfig(settings);
   const isNotebookEnabled = store.isFeatureEnabled('notebook_launch');
+  const [isOpen, setOpen] = useState(false);
 
   const serviceSupports = feature => service && !!service[feature];
 
@@ -56,6 +58,15 @@ function UserMenu({ auth, bridge, onLogout, serviceUrl, settings }) {
     bridge.call('openNotebook', store.focusedGroupId());
   };
 
+  // Temporary access to the Notebook without feature flag:
+  // type the key 'n' when user menu is focused/open
+  const onKeyDown = event => {
+    if (event.key === 'n') {
+      onSelectNotebook();
+      setOpen(false);
+    }
+  };
+
   const onProfileSelected = () =>
     isThirdParty && bridge.call(bridgeEvents.PROFILE_REQUESTED);
 
@@ -77,8 +88,16 @@ function UserMenu({ auth, bridge, onLogout, serviceUrl, settings }) {
     </span>
   );
   return (
-    <div className="UserMenu">
-      <Menu label={menuLabel} title={auth.displayName} align="right">
+    // FIXME: KeyDown handling is temporary for Notebook "easter egg"
+    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
+    <div className="UserMenu" onKeyDown={onKeyDown}>
+      <Menu
+        label={menuLabel}
+        title={auth.displayName}
+        align="right"
+        open={isOpen}
+        onOpenChanged={setOpen}
+      >
         <MenuSection>
           <MenuItem
             label={auth.displayName}

src/sidebar/components/test/UserMenu-test.js

 import { mount } from 'enzyme';
+import { act } from 'preact/test-utils';
 
 import bridgeEvents from '../../../shared/bridge-events';
 import UserMenu from '../UserMenu';
@@ -206,6 +207,22 @@ describe('UserMenu', () => {
         assert.calledOnce(fakeBridge.call);
         assert.calledWith(fakeBridge.call, 'openNotebook', 'mygroup');
       });
+
+      it('opens the notebook and closes itself when `n` is typed', () => {
+        const wrapper = createUserMenu();
+        // Make the menu "open"
+        act(() => {
+          wrapper.find('Menu').props().onOpenChanged(true);
+        });
+        wrapper.update();
+        assert.isTrue(wrapper.find('Menu').props().open);
+
+        wrapper.find('.UserMenu').simulate('keydown', { key: 'n' });
+        assert.calledOnce(fakeBridge.call);
+        assert.calledWith(fakeBridge.call, 'openNotebook', 'mygroup');
+        // Now the menu is "closed" again
+        assert.isFalse(wrapper.find('Menu').props().open);
+      });
     });
 
     context('notebook feature is not enabled', () => {