Merge pull request #3170 from hypothesis/t312-see-all-public-annotations-msg

Display 'Show all N public annotations' message when there is a selection

h/static/scripts/directive/search-status-bar.js

+'use strict';
+
 // @ngInject
 module.exports = function () {
   return {
@@ -8,6 +10,7 @@ module.exports = function () {
       onClearSelection: '&',
       searchQuery: '<',
       selectionCount: '<',
+      totalCount: '<',
     },
     templateUrl: 'search_status_bar.html',
   };

h/static/scripts/directive/test/search-status-bar-test.js

 'use strict';
 
+var angular = require('angular');
+
 var util = require('./util');
 
 describe('searchStatusBar', function () {
@@ -13,20 +15,32 @@ describe('searchStatusBar', function () {
     angular.mock.module('h.templates');
   });
 
-  it('should display the filter count', function () {
-    var elem = util.createDirective(document, 'searchStatusBar', {
-      newDesign: true,
-      filterActive: true,
-      filterMatchCount: 5
+  context('when there is a filter', function () {
+    it('should display the filter count', function () {
+      var elem = util.createDirective(document, 'searchStatusBar', {
+        filterActive: true,
+        filterMatchCount: 5
+      });
+      assert.include(elem[0].textContent, "5 search results");
     });
-    assert.include($(elem).text(), "5 search results");
   });
 
-  it('should display the selection count', function () {
-    var elem = util.createDirective(document, 'searchStatusBar', {
-      newDesign: true,
-      selectionCount: 2
+  context('when there is a selection', function () {
+    var cases = [
+      {count: 0, message: 'Show all annotations'},
+      {count: 1, message: 'Show all annotations'},
+      {count: 10, message: 'Show all 10 annotations'},
+    ];
+
+    cases.forEach(function (testCase) {
+      it('should display the "Show all annotations" message', function () {
+        var elem = util.createDirective(document, 'searchStatusBar', {
+          selectionCount: 1,
+          totalCount: testCase.count
+        });
+        var clearBtn = elem[0].querySelector('button');
+        assert.include(clearBtn.textContent, testCase.message);
+      });
     });
-    assert.include($(elem).text(), '2 selected annotations');
   });
 });

h/static/scripts/widget-controller.js

@@ -234,6 +234,10 @@ module.exports = function WidgetController(
 
   $scope.isLoading = isLoading;
 
+  $scope.topLevelThreadCount = function () {
+    return threading.root.children.length;
+  };
+
   $rootScope.$on(events.BEFORE_ANNOTATION_CREATED, function (event, data) {
     if (data.$highlight || (data.references && data.references.length > 0)) {
       return;

h/templates/client/search_status_bar.html

-<div class="search-status-bar" ng-show="filterActive">
+<div class="search-status-bar" ng-if="filterActive">
   <button class="primary-action-btn primary-action-btn--short"
           ng-click="onClearSelection()"
           title="Clear the search filter and show all annotations"
@@ -11,16 +11,16 @@
                   'one': '1 search result',
                   'other': '{} search results'}"></span>
 </div>
-<div class="search-status-bar" ng-show="!filterActive && selectionCount > 0">
+<div class="search-status-bar" ng-if="!filterActive && selectionCount > 0">
   <button class="primary-action-btn primary-action-btn--short"
           ng-click="onClearSelection()"
           title="Clear the selection and show all annotations"
   >
-    <i class="primary-action-btn__icon h-icon-close"></i> Clear selection
+    <span ng-pluralize
+             count="totalCount"
+             when="{'0': 'Show all annotations',
+                    'one': 'Show all annotations',
+                    'other': 'Show all {{totalCount}} annotations'}"></span>
   </button>
-  <span ng-pluralize
-           count="selectionCount"
-           when="{'0': 'No annotations selected',
-                  'one': '1 selected annotation',
-                  'other': '{} selected annotations'}"></span>
+
 </div>

h/templates/client/viewer.html

@@ -8,12 +8,14 @@
     thread-filter="search.query"
     window-scroll="loadMore(20)">
   <search-status-bar
+    ng-show="!isLoading()"
     filter-active="threadFilter.active()"
     filter-match-count="count('match')"
+    on-clear-selection="clearSelection()"
     search-query="search ? search.query : ''"
     selection-count="selectedAnnotationsCount"
-    on-clear-selection="clearSelection()"
-    ng-show="!isLoading()">
+    total-count="topLevelThreadCount()"
+    >
   </search-status-bar>
   <li ng-if="isStream">
     <sort-dropdown