Merge pull request #809 from hypothesis/dissable-groups-drop-down

Disable groups drop-down menu when using third-party accounts and there is only one group

src/sidebar/components/group-list.js

@@ -75,6 +75,10 @@ function GroupListController($window, analytics, groups, settings, serviceUrl) {
   }
 
   this.isThirdPartyService = isThirdPartyService(settings);
+
+  this.showGroupsMenu = () => {
+    return !( this.isThirdPartyService && (this.groups.all().length <= 1) );
+  };
 }
 
 module.exports = {

src/sidebar/components/test/group-list-test.js

@@ -332,4 +332,89 @@ describe('groupList', function () {
     assert.calledWith($window.open, 'https://test.hypothes.is/groups/new',
       '_blank');
   });
+  describe('group menu visibility', () => {
+    it('is hidden when third party service and only one group', function () {
+      // Configure third party service.
+      fakeSettings.authDomain = 'example.com';
+      fakeSettings.services = [{
+        authority: 'publisher.org',
+      }];
+
+      // Configure only one group.
+      const groups = [{
+        id: 'h-devs',
+        links: {
+          html: PRIVATE_GROUP_LINK,
+        },
+        name: 'Hypothesis Developers',
+        organization: groupFixtures.defaultOrganization(),
+        type: 'private',
+      }];
+      fakeGroups.all = () => { return groups; };
+
+      const element = createGroupList();
+
+      const showGroupsMenu = element.ctrl.showGroupsMenu();
+      const dropdownToggle = element.find('.dropdown-toggle');
+      const arrowIcon = element.find('.h-icon-arrow-drop-down');
+      const dropdownMenu = element.find('.dropdown-menu__top-arrow');
+      const dropdownOptions = element.find('.dropdown-menu__row ');
+
+      assert.isFalse(showGroupsMenu);
+      assert.lengthOf(dropdownToggle, 0);
+      assert.lengthOf(arrowIcon, 0);
+      assert.lengthOf(dropdownMenu, 0);
+      assert.lengthOf(dropdownOptions, 0);
+    });
+
+    it('is shown when there is more than one group', function () {
+      // Configure third party service.
+      fakeSettings.authDomain = 'example.com';
+      fakeSettings.services = [{
+        authority: 'publisher.org',
+      }];
+
+      const element = createGroupList();
+
+      const showGroupsMenu = element.ctrl.showGroupsMenu();
+      const dropdownToggle = element.find('.dropdown-toggle');
+      const arrowIcon = element.find('.h-icon-arrow-drop-down');
+      const dropdownMenu = element.find('.dropdown-menu__top-arrow');
+      const dropdownOptions = element.find('.dropdown-menu__row ');
+
+      assert.isTrue(showGroupsMenu);
+      assert.lengthOf(dropdownToggle, 1);
+      assert.lengthOf(arrowIcon, 1);
+      assert.lengthOf(dropdownMenu, 1);
+      assert.lengthOf(dropdownOptions, 4);
+    });
+
+    it('is shown when it is not a third party service', function () {
+      // Configure only one group.
+      const groups = [{
+        id: 'h-devs',
+        links: {
+          html: PRIVATE_GROUP_LINK,
+        },
+        name: 'Hypothesis Developers',
+        organization: groupFixtures.defaultOrganization(),
+        type: 'private',
+      }];
+      fakeGroups.all = () => { return groups; };
+
+      const element = createGroupList();
+
+      const showGroupsMenu = element.ctrl.showGroupsMenu();
+      const dropdownToggle = element.find('.dropdown-toggle');
+      const arrowIcon = element.find('.h-icon-arrow-drop-down');
+      const dropdownMenu = element.find('.dropdown-menu__top-arrow');
+      const dropdownOptions = element.find('.dropdown-menu__row ');
+
+      assert.isTrue(showGroupsMenu);
+      assert.lengthOf(dropdownToggle, 1);
+      assert.lengthOf(arrowIcon, 1);
+      assert.lengthOf(dropdownMenu, 1);
+      assert.lengthOf(dropdownOptions, 2);
+    });
+  });
 });

src/sidebar/templates/group-list.html

 <div class="pull-right"
      dropdown
      keyboard-nav>
+  <!-- Show a drop down menu if showGroupsMenu is true. -->
   <div class="dropdown-toggle"
         dropdown-toggle
         data-toggle="dropdown"
         role="button"
-        title="Change the selected group">
+        tabindex="0"
+        ng-if="vm.showGroupsMenu()">
     <img class="group-list-label__icon group-list-label__icon--organization"
          ng-src="{{ vm.focusedIcon() }}"
          alt="{{ vm.orgName(vm.groups.focused().id)}}"
          ng-if="vm.focusedIcon()">
          <i class="group-list-label__icon h-icon-{{ vm.focusedIconClass() }}"
              ng-if="!vm.focusedIcon()"></i><!-- nospace
-    !--><span class="group-list-label__label">{{vm.groups.focused().name}}</span><!-- nospace
-      !--><i class="h-icon-arrow-drop-down"></i>
+    !--><span class="group-list-label__label"><a class="group-list-label__toggle">{{vm.groups.focused().name}}</a><!-- nospace
+      !--><i class="h-icon-arrow-drop-down"></i></span>
   </div>
-  <div class="dropdown-menu__top-arrow"></div>
-  <ul class="dropdown-menu pull-none" role="menu">
+  <!-- Do not show a drop down menu if showGroupsMenu is false. -->
+  <div ng-if="!vm.showGroupsMenu()">
+    <img class="group-list-label__icon group-list-label__icon--organization"
+         ng-src="{{ vm.focusedIcon() }}"
+         alt="{{ vm.orgName(vm.groups.focused().id)}}"
+         ng-if="vm.focusedIcon()">
+         <i class="group-list-label__icon h-icon-{{ vm.focusedIconClass() }}"
+             ng-if="!vm.focusedIcon()"></i><!-- nospace
+    !--><span class="group-list-label__label">{{vm.groups.focused().name}}</span>
+  </div>
+  <!-- Only build the drop down menu if showGroupsMenu is true. -->
+  <div class="dropdown-menu__top-arrow" ng-if="vm.showGroupsMenu()"></div>
+  <ul class="dropdown-menu pull-none" role="menu" ng-if="vm.showGroupsMenu()">
     <li class="dropdown-menu__row dropdown-menu__row--unpadded "
         ng-repeat="group in vm.groupOrganizations() track by group.id">
       <div ng-class="{'group-item': true, selected: group.id == vm.groups.focused().id}"

src/styles/sidebar/components/group-list.scss

@@ -105,6 +105,12 @@ $group-list-spacing-below: 50px;
 .group-list-label__label {
   font-size: $body2-font-size;
   font-weight:bold;
+  display: inline-block;
+}
+
+// the anchor showing the name of the currently selected group
+.group-list-label__toggle {
+  color: $gray-dark;
 }
 
 // the name of a group in the groups drop-down list