Use group section in group list

src/sidebar/components/group-list.js

@@ -26,9 +26,6 @@ function GroupListController(
 ) {
   this.groups = groups;
 
-  // Track which non-selectable groups have their group details expanded.
-  this.groupDetailsExpanded = {};
-
   this.createNewGroup = function() {
     $window.open(serviceUrl('groups.new'), '_blank');
   };
@@ -90,23 +87,6 @@ function GroupListController(
     groups.focus(groupId);
   };
 
-  this.isGroupDetailsExpanded = function(groupId) {
-    if (!(groupId in this.groupDetailsExpanded)) {
-      this.groupDetailsExpanded[groupId] = false;
-    }
-    return this.groupDetailsExpanded[groupId];
-  };
-
-  /**
-   * Toggle the expanded setting on un-selectable groups.
-   */
-  this.toggleGroupDetails = function(event, groupId) {
-    event.stopPropagation();
-    // Call the isGroupDetailsExpanded method so that if the groupId doesn't exist,
-    // it gets added before toggling it.
-    this.groupDetailsExpanded[groupId] = !this.isGroupDetailsExpanded(groupId);
-  };
-
   /**
    * Show the share link for the group if it is not a third-party group
    * AND if the URL needed is present in the group object. We should be able

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

@@ -3,6 +3,7 @@
 const angular = require('angular');
 const immutable = require('seamless-immutable');
 
+const { events } = require('../../services/analytics');
 const groupList = require('../group-list');
 const util = require('../../directive/test/util');
 
@@ -33,17 +34,6 @@ describe('groupList', function() {
     isScopedToUri: true,
   });
 
-  const restrictedOutOfScopeGroup = immutable({
-    id: 'restrictedoos',
-    links: {
-      html: 'https://hypothes.is/groups/restricto',
-    },
-    name: 'Restricted',
-    organization: groupFixtures.defaultOrganization(),
-    type: 'restricted',
-    isScopedToUri: false,
-  });
-
   const publicGroup = immutable({
     id: '__world__',
     links: {
@@ -85,11 +75,7 @@ describe('groupList', function() {
 
     fakeAnalytics = {
       track: sinon.stub(),
-      events: {
-        GROUP_LEAVE: 'groupLeave',
-        GROUP_SWITCH: 'groupSwitch',
-        GROUP_VIEW_ACTIVITY: 'groupViewActivity',
-      },
+      events,
     };
 
     fakeServiceUrl = sinon.stub();
@@ -385,6 +371,7 @@ describe('groupList', function() {
       '_blank'
     );
   });
+
   describe('group section visibility', () => {
     [
       {
@@ -393,7 +380,7 @@ describe('groupList', function() {
         currentlyViewingGroups: [publicGroup],
         featuredGroups: [restrictedGroup],
         myGroups: [],
-        expectedSections: ['Currently Viewing', 'Featured Groups'],
+        expectedSections: ["'Currently Viewing'", "'Featured Groups'"],
       },
       {
         description:
@@ -401,14 +388,14 @@ describe('groupList', function() {
         currentlyViewingGroups: [],
         featuredGroups: [restrictedGroup],
         myGroups: [publicGroup],
-        expectedSections: ['Featured Groups', 'My Groups'],
+        expectedSections: ["'Featured Groups'", "'My Groups'"],
       },
       {
         description: 'shows My Groups section when there are my groups',
         currentlyViewingGroups: [],
         featuredGroups: [],
         myGroups: [publicGroup, privateGroup],
-        expectedSections: ['My Groups'],
+        expectedSections: ["'My Groups'"],
       },
     ].forEach(
       ({
@@ -433,76 +420,21 @@ describe('groupList', function() {
           const showGroupsMenu = element.ctrl.showGroupsMenu();
           const dropdownToggle = element.find('.dropdown-toggle');
           const arrowIcon = element.find('.h-icon-arrow-drop-down');
-          const sectionHeader = element.find('.dropdown-menu__section-heading');
-          const section = element.find('.dropdown-menu__section');
-          const dropdownOptions = element.find(
-            '.dropdown-community-groups-menu__row'
-          );
+          const groupListSection = element.find('group-list-section');
 
           assert.isTrue(showGroupsMenu);
           assert.lengthOf(dropdownToggle, 1);
           assert.lengthOf(arrowIcon, 1);
-          sectionHeader.each(function() {
-            assert.isTrue(expectedSections.includes(this.textContent));
+          assert.lengthOf(groupListSection, expectedSections.length);
+          groupListSection.each(function() {
+            assert.isTrue(
+              expectedSections.includes(this.getAttribute('heading'))
+            );
           });
-          // Plus one for the create private group section.
-          assert.lengthOf(section, expectedSections.length + 1);
-          assert.lengthOf(dropdownOptions, 3);
         });
       }
     );
   });
-  describe('group details expanded on out of scope groups', () => {
-    it('sets the default for the given groupid to false and returns it', () => {
-      const element = createGroupList();
-
-      const expanded = element.ctrl.isGroupDetailsExpanded('groupid');
-
-      assert.isFalse(expanded);
-      assert.isFalse(element.ctrl.groupDetailsExpanded.groupid);
-    });
-
-    it('gets expanded value for the given groupid if already present', () => {
-      const element = createGroupList();
-
-      element.ctrl.groupDetailsExpanded = { groupid: true };
-      const expanded = element.ctrl.isGroupDetailsExpanded('groupid');
-
-      assert.isTrue(expanded);
-    });
-
-    it('toggles the expanded value for the given groupid', () => {
-      const element = createGroupList();
-      let fakeEvent = { stopPropagation: sinon.stub() };
-
-      element.ctrl.toggleGroupDetails(fakeEvent, 'groupid');
-      assert.isTrue(element.ctrl.groupDetailsExpanded.groupid);
-
-      element.ctrl.toggleGroupDetails(fakeEvent, 'groupid');
-      assert.isFalse(element.ctrl.groupDetailsExpanded.groupid);
-    });
-
-    it('stops the event from propogating when toggling', () => {
-      const element = createGroupList();
-      let fakeEvent = { stopPropagation: sinon.spy() };
-
-      element.ctrl.toggleGroupDetails(fakeEvent, 'groupid');
-
-      sinon.assert.called(fakeEvent.stopPropagation);
-    });
-  });
-
-  it('displays out of scope groups as non-selectable', () => {
-    fakeFeatures.flagEnabled.withArgs('community_groups').returns(true);
-    // In order to show the group drop down there must be at least two groups.
-    groups = [publicGroup, restrictedOutOfScopeGroup];
-    fakeStore.getMyGroups.returns(groups);
-
-    const element = createGroupList();
-    const notSelectable = element.find('.group-item--out-of-scope');
-
-    assert.lengthOf(notSelectable, 1);
-  });
 
   describe('group menu visibility', () => {
     it('is hidden when third party service and only one group', function() {
@@ -585,14 +517,12 @@ describe('groupList', function() {
       const showGroupsMenu = element.ctrl.showGroupsMenu();
       const dropdownToggle = element.find('.dropdown-toggle');
       const arrowIcon = element.find('.h-icon-arrow-drop-down');
-      const dropdownOptions = element.find(
-        '.dropdown-community-groups-menu__row'
-      );
+      const groupListSection = element.find('.group-list-section');
 
       assert.isTrue(showGroupsMenu);
       assert.lengthOf(dropdownToggle, 1);
       assert.lengthOf(arrowIcon, 1);
-      assert.lengthOf(dropdownOptions, 3);
+      assert.lengthOf(groupListSection, 1);
     });
 
     it('is not shown when community_groups feature flag is on and there is only one group', function() {
@@ -605,14 +535,12 @@ describe('groupList', function() {
       const showGroupsMenu = element.ctrl.showGroupsMenu();
       const dropdownToggle = element.find('.dropdown-toggle');
       const arrowIcon = element.find('.h-icon-arrow-drop-down');
-      const dropdownOptions = element.find(
-        '.dropdown-community-groups-menu__row'
-      );
+      const groupListSection = element.find('.group-list-section');
 
       assert.isFalse(showGroupsMenu);
       assert.lengthOf(dropdownToggle, 0);
       assert.lengthOf(arrowIcon, 0);
-      assert.lengthOf(dropdownOptions, 0);
+      assert.lengthOf(groupListSection, 0);
     });
   });
 

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

@@ -9,7 +9,7 @@ $group-list-spacing-below: 50px;
 
   .dropdown-menu {
     width: $group-list-width;
-    max-height: 500px;  // fallback for browsers lacking support for vh/calc
+    max-height: 500px; // fallback for browsers lacking support for vh/calc
     max-height: calc(100vh - #{$top-bar-height} - #{$group-list-spacing-below});
     overflow-y: auto;
 
@@ -21,26 +21,11 @@ $group-list-spacing-below: 50px;
   }
 
   .dropdown-menu__section--no-header {
-    border-top: solid 1px rgba(0, 0, 0, 0.15);
-
     .group-details {
       font-weight: 400;
     }
   }
 
-  .dropdown-menu__section-heading {
-    color: $gray-light;
-    font-size: 12px;
-    line-height: 1;
-    margin: 1px 1px 0;
-    padding: 12px 10px 0;
-    text-transform: uppercase;
-
-    &:not(:first-child) {
-      border-top: solid 1px rgba(0, 0, 0, 0.15);
-    }
-  }
-
   .group-item {
     display: flex;
     flex-direction: row;
@@ -90,11 +75,6 @@ $group-list-spacing-below: 50px;
     }
   }
 
-  .group-item--out-of-scope {
-    background-color: $gray-lightest;
-    color: $gray-light;
-  }
-
   .group-icon-container {
     margin-right: 10px;
   }
@@ -113,13 +93,6 @@ $group-list-spacing-below: 50px;
     margin-right: 2px;
   }
 
-  .group__icon--unavailable {
-    fill: $gray-light;
-    float: right;
-    height: 20px;
-    width: auto;
-  }
-
   .group-details {
     flex-grow: 1;
     flex-shrink: 1;
@@ -146,31 +119,6 @@ $group-list-spacing-below: 50px;
     }
   }
 
-  .group-details__toggle {
-    font-size: $body1-font-size;
-    font-style: italic;
-    margin: 0;
-    text-decoration: underline;
-  }
-
-  .group-details__unavailable-message {
-    font-size: $body1-font-size;
-    line-height: 1.5;
-    white-space: normal;
-    width: $group-list-width - 60px;
-  }
-
-  .group-details__actions {
-    text-align: right;
-  }
-
-  .group-details__group-page-link {
-    color: inherit;
-    font-size: $body1-font-size;
-    text-decoration: underline;
-    text-transform: uppercase;
-  }
-
   .new-group-btn {
     background-color: $gray-lightest;
 
@@ -209,7 +157,7 @@ $group-list-spacing-below: 50px;
 // the drop-down list when clicked
 .group-list-label__label {
   font-size: $body2-font-size;
-  font-weight:bold;
+  font-weight: bold;
   display: inline-block;
 }
 
@@ -225,7 +173,6 @@ $group-list-spacing-below: 50px;
   color: inherit;
 }
 
-
 .open {
   & > .group-list__toggle {
     background: $gray-lighter;