Simplify the group share links

h/static/scripts/directive/group-list.js

@@ -4,22 +4,6 @@ var events = require('../events');
 
 // @ngInject
 function GroupListController($scope, $window, groups) {
-  $scope.expandedGroupId = undefined;
-
-  // show the share link for the specified group or clear it if
-  // null
-  $scope.toggleShareLink = function (groupId) {
-    if (!groupId || $scope.expandedGroupId === groupId) {
-      $scope.expandedGroupId = undefined;
-    } else {
-      $scope.expandedGroupId = groupId;
-    }
-  };
-
-  $scope.shouldShowShareLink = function (groupId) {
-    return $scope.expandedGroupId === groupId;
-  };
-
   $scope.leaveGroup = function (groupId) {
     var groupName = groups.get(groupId).name;
     var message = 'Are you sure you want to leave the group "' +
@@ -50,20 +34,6 @@ function groupList(groups, $window) {
       $scope.createNewGroup = function() {
         $window.open('/groups/new', '_blank');
       }
-
-      $scope.$watch('expandedGroupId', function (activeGroupId) {
-        if (activeGroupId) {
-          // wait for the share link field to be revealed and then select
-          // the link's text
-          setTimeout(function() {
-            var shareLinkSelector = '.share-link-field[data-group-id="' +
-                                    activeGroupId + '"]';
-            var activeShareLinkField = elem[0].querySelector(shareLinkSelector);
-            activeShareLinkField.focus();
-            activeShareLinkField.select();
-          }, 0);
-        }
-      });
     },
     restrict: 'E',
     scope: {

h/static/scripts/directive/test/group-list-test.js

@@ -21,26 +21,6 @@ describe('GroupListController', function () {
     controller = new groupList.Controller($scope, fakeWindow, fakeGroups);
   });
 
-  it('toggles share links', function () {
-    $scope.toggleShareLink('group-a');
-    assert.equal($scope.expandedGroupId, 'group-a');
-    $scope.toggleShareLink('group-a');
-    assert.equal($scope.expandedGroupId, undefined);
-
-    $scope.toggleShareLink('group-b');
-    assert.equal($scope.expandedGroupId, 'group-b');
-    $scope.toggleShareLink('group-c');
-    assert.equal($scope.expandedGroupId, 'group-c');
-  });
-
-  it('shows share link for selected group', function () {
-    assert.equal($scope.shouldShowShareLink('group-a'), false);
-    $scope.toggleShareLink('group-a');
-    assert.equal($scope.shouldShowShareLink('group-a'), true);
-    $scope.toggleShareLink('group-b');
-    assert.equal($scope.shouldShowShareLink('group-a'), false);
-    assert.equal($scope.shouldShowShareLink('group-b'), true);
-  });
 });
 
 // returns true if a jQuery-like element has
@@ -122,20 +102,9 @@ describe('groupList', function () {
     var shareLinks = element.find('.share-link-container');
     assert.equal(shareLinks.length, 1);
 
-    var linkField = element.find('.share-link-field');
-    assert.equal(linkField.length, 1);
-    assert.equal(linkField[0].value, GROUP_LINK);
-  });
-
-  it('should toggle share link on click', function () {
-    var element = createGroupList();
-    var toggleLink = element.find('.share-link-toggle');
-    var expander = element.find('.share-link-expander');
-    assert.ok(isElementHidden(expander));
-    toggleLink.click();
-    assert.ok(!isElementHidden(expander));
-    toggleLink.click();
-    assert.ok(isElementHidden(expander));
+    var link = element.find('.share-link');
+    assert.equal(link.length, 1);
+    assert.equal(link[0].href, GROUP_LINK);
   });
 
   function clickLeaveIcon(element, acceptPrompt) {

h/static/styles/app.scss

@@ -114,9 +114,6 @@ $group-list-width: 270px;
     cursor: pointer;
 
     &:hover {
-      .share-link-toggle {
-        color: inherit;
-      }
       .group-name-link {
         color: $brand-color;
       }
@@ -143,7 +140,6 @@ $group-list-width: 270px;
   }
 
   .group-details {
-    margin-right: 20px;
     flex-grow: 1;
     flex-shrink: 1;
   }

h/static/styles/share-link.scss

@@ -7,11 +7,11 @@
   white-space: normal;
 }
 
-.share-link-toggle {
+.share-link {
   color: $gray-light;
 }
 
-.share-link-toggle:hover {
+.share-link:hover {
   text-decoration: underline;
   color: $gray-dark;
 }

h/templates/client/group_list.html

@@ -14,7 +14,6 @@
         data-toggle="dropdown"
         role="button"
         ng-switch on="groups.focused().public"
-        ng-click="toggleShareLink(undefined)"
         title="Change the selected group">
     <i class="group-list-label__icon h-icon-public" ng-switch-when="true"></i><!-- nospace
     !--><i class="group-list-label__icon h-icon-group" ng-switch-default></i>
@@ -42,21 +41,9 @@
             </a>
           </div>
           <div class="share-link-container" ng-click="$event.stopPropagation()" ng-if="!group.public">
-            <div>
-              <a class="share-link-toggle"
-                 href=""
-                 ng-click="toggleShareLink(group.id)"
-                 title="Invite others to join this group">
-                Invite others to join this group
-              </a>
-            </div>
-            <div class="share-link-expander" ng-show="shouldShowShareLink(group.id)">
-              <input class="share-link-field" data-group-id="{{group.id}}" ng-value="group.url">
-              <p>
-                You can invite other people to join this group
-                by sending them this link
-              </p>
-            </div>
+            <a class="share-link" href="{{group.url}}" target="_blank">
+              View group activity and invite others
+            </a>
           </div>
         </div>
         <!-- the 'Leave group' icon !-->