Disable group switch and logout during import

Fixes https://github.com/hypothesis/client/issues/5774

src/sidebar/components/GroupList/GroupList.tsx

@@ -40,6 +40,9 @@ function GroupList({ settings }: GroupListProps) {
   const focusedGroup = store.focusedGroup();
   const userid = store.profile().userid;
 
+  // Prevent changing groups during an import
+  const disabled = store.importsPending() > 0;
+
   const myGroupsSorted = useMemo(
     () => groupsByOrganization(myGroups),
     [myGroups],
@@ -117,6 +120,7 @@ function GroupList({ settings }: GroupListProps) {
     <Menu
       align="left"
       contentClass="min-w-[250px]"
+      disabled={disabled}
       label={label}
       onOpenChanged={() => setExpandedGroup(null)}
       title={menuTitle}

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

@@ -50,6 +50,7 @@ describe('GroupList', () => {
       getLink: sinon.stub().returns(''),
       getMyGroups: sinon.stub().returns([]),
       focusedGroup: sinon.stub().returns(testGroup),
+      importsPending: sinon.stub().returns(0),
       profile: sinon.stub().returns({ userid: null }),
     };
     fakeServiceConfig = sinon.stub().returns(null);
@@ -72,6 +73,13 @@ describe('GroupList', () => {
     assert.equal(menu.props().title, 'Select group (now viewing: Test group)');
   });
 
+  it('disables menu if imports are in progress', () => {
+    fakeStore.importsPending.returns(1);
+    const wrapper = createGroupList();
+    const menu = wrapper.find('Menu');
+    assert.isTrue(menu.prop('disabled'));
+  });
+
   it('adds descriptive label text if no currently-focused group', () => {
     fakeStore.focusedGroup.returns(undefined);
     const wrapper = createGroupList();

src/sidebar/components/UserMenu.tsx

@@ -42,8 +42,14 @@ function UserMenu({ frameSync, onLogout, settings }: UserMenuProps) {
 
   const isSelectableProfile =
     !isThirdParty || serviceSupports('onProfileRequestProvided');
-  const isLogoutEnabled =
+
+  // Is logging out generally possible for the current user?
+  const logoutAvailable =
     !isThirdParty || serviceSupports('onLogoutRequestProvided');
+
+  // Is logging out possible right now?
+  const logoutDisabled = store.importsPending() > 0;
+
   const isProfileEnabled = store.isFeatureEnabled('client_user_profile');
 
   const onSelectNotebook = () => {
@@ -104,9 +110,13 @@ function UserMenu({ frameSync, onLogout, settings }: UserMenuProps) {
           )}
           <MenuItem label="Open notebook" onClick={() => onSelectNotebook()} />
         </MenuSection>
-        {isLogoutEnabled && (
+        {logoutAvailable && (
           <MenuSection>
-            <MenuItem label="Log out" onClick={onLogout} />
+            <MenuItem
+              isDisabled={logoutDisabled}
+              label="Log out"
+              onClick={onLogout}
+            />
           </MenuSection>
         )}
       </Menu>

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

@@ -48,6 +48,7 @@ describe('UserMenu', () => {
       focusedGroupId: sinon.stub().returns('mygroup'),
       getLink: sinon.stub(),
       profile: sinon.stub().returns(fakeProfile),
+      importsPending: sinon.stub().returns(0),
       isFeatureEnabled: fakeIsFeatureEnabled,
     };
 
@@ -296,6 +297,20 @@ describe('UserMenu', () => {
   });
 
   describe('log out menu item', () => {
+    it('is disabled if an import is in progress', () => {
+      fakeStore.importsPending.returns(1);
+      const wrapper = createUserMenu();
+
+      let logOutMenuItem = findMenuItem(wrapper, 'Log out');
+      assert.isTrue(logOutMenuItem.prop('isDisabled'));
+
+      fakeStore.importsPending.returns(0);
+      wrapper.setProps({});
+
+      logOutMenuItem = findMenuItem(wrapper, 'Log out');
+      assert.isFalse(logOutMenuItem.prop('isDisabled'));
+    });
+
     const tests = [
       {
         it: 'should be present for first-party user if no service configured',