Merge pull request #351 from hypothesis/simplify-quote-display

Simplify handling of quotes in annotations

src/sidebar/components/annotation.js

@@ -283,14 +283,20 @@ function AnnotationController(
   };
 
   /**
-    * @returns {boolean} True if this annotation has quotes
+    * Return the annotation's quote if it has one or `null` otherwise.
     */
-  vm.hasQuotes = function() {
-    return vm.annotation.target.some(function(target) {
-      return target.selector && target.selector.some(function(selector) {
-        return selector.type === 'TextQuoteSelector';
-      });
+  vm.quote = function() {
+    if (vm.annotation.target.length === 0) {
+      return null;
+    }
+    var target = vm.annotation.target[0];
+    if (!target.selector) {
+      return null;
+    }
+    var quoteSel = target.selector.find(function (sel) {
+      return sel.type === 'TextQuoteSelector';
     });
+    return quoteSel ? quoteSel.exact : null;
   };
 
   vm.id = function() {
@@ -437,10 +443,6 @@ function AnnotationController(
     return serviceUrl('search.tag', {tag: tag});
   };
 
-  vm.target = function() {
-    return vm.annotation.target;
-  };
-
   // Note: We fetch the feature flag outside the `isOrphan` method to avoid a
   // lookup on every $digest cycle
   var indicateOrphans = features.flagEnabled('orphans_tab');

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

@@ -598,29 +598,40 @@ describe('annotation', function() {
       });
     });
 
-    describe('#hasQuotes', function() {
-      it('returns false if the annotation has no quotes', function() {
+    describe('#quote', function() {
+      it('returns `null` if the annotation has no quotes', function() {
         var annotation = fixtures.defaultAnnotation();
         annotation.target = [{}];
         var controller = createDirective(annotation).controller;
 
-        assert.isFalse(controller.hasQuotes());
+        assert.isNull(controller.quote());
       });
 
-      it('returns true if the annotation has quotes', function() {
+      it('returns `null` if the annotation has selectors but no quote selector', function () {
+        var annotation = fixtures.defaultAnnotation();
+        annotation.target = [{
+          selector: [],
+        }];
+        var controller = createDirective(annotation).controller;
+
+        assert.isNull(controller.quote());
+      });
+
+      it("returns the first quote's text if the annotation has quotes", function() {
         var annotation = fixtures.defaultAnnotation();
         annotation.target = [
           {
             selector: [
               {
                 type: 'TextQuoteSelector',
+                exact: 'The text that the user selected',
               },
             ],
           },
         ];
         var controller = createDirective(annotation).controller;
 
-        assert.isTrue(controller.hasQuotes());
+        assert.equal(controller.quote(), 'The text that the user selected');
       });
     });
 
@@ -943,10 +954,9 @@ describe('annotation', function() {
           .withArgs('search.tag', {tag: 'atag'})
           .returns('https://test.hypothes.is/stream?q=tag:atag');
 
-        var directive = createDirective({
-          id: '1234',
+        var directive = createDirective(Object.assign(fixtures.defaultAnnotation(), {
           tags: ['atag'],
-        });
+        }));
         var links = [].slice.apply(directive.element[0].querySelectorAll('a'));
         var tagLinks = links.filter(function (link) {
           return link.textContent === 'atag';

src/sidebar/templates/annotation.html

@@ -16,18 +16,14 @@
   <!-- Excerpts -->
   <section class="annotation-quote-list"
     ng-class="{'is-orphan' : vm.isOrphan()}"
-    ng-repeat="target in vm.target() track by $index"
-    ng-if="vm.hasQuotes()">
+    ng-if="vm.quote()">
     <excerpt collapsed-height="35"
       inline-controls="true"
       overflow-hysteresis="20"
       content-data="selector.exact">
       <blockquote class="annotation-quote"
         h-branding="selectionFontFamily"
-        ng-bind="selector.exact"
-        ng-repeat="selector in target.selector
-          | filter : {'type': 'TextQuoteSelector'}
-          track by $index"></blockquote>
+        ng-bind="vm.quote()"></blockquote>
     </excerpt>
   </section>
 

src/sidebar/test/annotation-fixtures.js

@@ -89,6 +89,7 @@ function newHighlight() {
   return {
     id: undefined,
     $highlight: true,
+    target: [{source: 'http://example.org'}],
   };
 }
 
@@ -126,7 +127,7 @@ function oldHighlight() {
 function oldPageNote() {
   return {
     highlight: undefined,
-    target: [],
+    target: [{ source: 'http://example.org' }],
     references: [],
     text: '',
     tags: [],