Add 'Your profile' item to UserMenu

src/sidebar/components/UserMenu.tsx

@@ -45,10 +45,12 @@ function UserMenu({ frameSync, onLogout, settings }: UserMenuProps) {
     !isThirdParty || serviceSupports('onProfileRequestProvided');
   const isLogoutEnabled =
     !isThirdParty || serviceSupports('onLogoutRequestProvided');
+  const isProfileEnabled = store.isFeatureEnabled('client_user_profile');
 
   const onSelectNotebook = () => {
     frameSync.notifyHost('openNotebook', store.focusedGroupId());
   };
+  const onSelectProfile = () => frameSync.notifyHost('openProfile');
 
   // Access to the Notebook:
   // type the key 'n' when user menu is focused/open
@@ -56,6 +58,9 @@ function UserMenu({ frameSync, onLogout, settings }: UserMenuProps) {
     if (event.key === 'n') {
       onSelectNotebook();
       setOpen(false);
+    } else if (isProfileEnabled && event.key === 'p') {
+      onSelectProfile();
+      setOpen(false);
     }
   };
 
@@ -95,6 +100,9 @@ function UserMenu({ frameSync, onLogout, settings }: UserMenuProps) {
               href={store.getLink('account.settings')}
             />
           )}
+          {isProfileEnabled && (
+            <MenuItem label="Your profile" onClick={() => onSelectProfile()} />
+          )}
           <MenuItem label="Open notebook" onClick={() => onSelectNotebook()} />
         </MenuSection>
         {isLogoutEnabled && (

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

@@ -12,6 +12,7 @@ describe('UserMenu', () => {
   let fakeServiceConfig;
   let fakeSettings;
   let fakeStore;
+  let fakeIsFeatureEnabled;
 
   const createUserMenu = () => {
     return mount(
@@ -41,11 +42,13 @@ describe('UserMenu', () => {
     fakeOnLogout = sinon.stub();
     fakeServiceConfig = sinon.stub();
     fakeSettings = {};
+    fakeIsFeatureEnabled = sinon.stub().returns(false);
     fakeStore = {
       defaultAuthority: sinon.stub().returns('hypothes.is'),
       focusedGroupId: sinon.stub().returns('mygroup'),
       getLink: sinon.stub(),
       profile: sinon.stub().returns(fakeProfile),
+      isFeatureEnabled: fakeIsFeatureEnabled,
     };
 
     $imports.$mock(mockImportedComponents());
@@ -208,6 +211,54 @@ describe('UserMenu', () => {
     });
   });
 
+  describe('open profile item', () => {
+    [{ isFeatureEnabled: true }, { isFeatureEnabled: false }].forEach(
+      ({ isFeatureEnabled }) => {
+        it('includes profile item only for users with the feature flag enabled', () => {
+          fakeIsFeatureEnabled.returns(isFeatureEnabled);
+
+          const wrapper = createUserMenu();
+          const openProfileItem = findMenuItem(wrapper, 'Your profile');
+
+          assert.equal(isFeatureEnabled, openProfileItem.exists());
+        });
+      }
+    );
+
+    it('opens the profile when clicked', () => {
+      fakeIsFeatureEnabled.returns(true);
+      fakeIsThirdPartyUser.returns(true);
+
+      const wrapper = createUserMenu();
+      const openProfileItem = findMenuItem(wrapper, 'Your profile');
+
+      openProfileItem.props().onClick();
+      assert.calledOnce(fakeFrameSync.notifyHost);
+      assert.calledWith(fakeFrameSync.notifyHost, 'openProfile');
+    });
+
+    [{ featureIsEnabled: true }, { featureIsEnabled: false }].forEach(
+      ({ featureIsEnabled }) => {
+        it('responds to `p` keypress only when feature is enabled', () => {
+          fakeIsFeatureEnabled.returns(featureIsEnabled);
+
+          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('[data-testid="user-menu"]')
+            .simulate('keydown', { key: 'p' });
+
+          assert.equal(featureIsEnabled, fakeFrameSync.notifyHost.called);
+          assert.equal(!featureIsEnabled, wrapper.find('Menu').props().open);
+        });
+      }
+    );
+  });
+
   describe('open notebook item', () => {
     it('includes the open notebook item', () => {
       const wrapper = createUserMenu();

src/types/port-rpc-events.d.ts

@@ -193,6 +193,11 @@ export type SidebarToHostEvent =
    */
   | 'openNotebook'
 
+  /**
+   * The sidebar is asking the host to open the user profile.
+   */
+  | 'openProfile'
+
   /**
    * The sidebar is asking the host to open the sidebar (side-effect of creating
    * an annotation).