Merge pull request #343 from hypothesis/first-party-flagging

Enable first-party users to flag annotations

src/sidebar/components/annotation.js

@@ -482,6 +482,13 @@ function AnnotationController(
     return vm.annotation.hidden;
   };
 
+  vm.canFlag = function () {
+    if (persona.isThirdPartyUser(vm.annotation.user, settings.authDomain)) {
+      return true;
+    }
+    return features.flagEnabled('flag_action');
+  };
+
   vm.isFlagged = function() {
     return vm.annotation.flagged;
   };

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

@@ -83,6 +83,7 @@ describe('annotation', function() {
     var fakeAnnotationMapper;
     var fakeAnnotationUI;
     var fakeDrafts;
+    var fakeFeatures;
     var fakeFlash;
     var fakeGroups;
     var fakePermissions;
@@ -154,7 +155,7 @@ describe('annotation', function() {
         get: sandbox.stub(),
       };
 
-      var fakeFeatures = {
+      fakeFeatures = {
         flagEnabled: sandbox.stub().returns(true),
       };
 
@@ -194,7 +195,8 @@ describe('annotation', function() {
       };
 
       fakeSettings = {
-        authDomain: 'example.com',
+        // "localhost" is the host used by 'first party' annotation fixtures
+        authDomain: 'localhost',
       };
 
       fakeStore = {
@@ -763,6 +765,24 @@ describe('annotation', function() {
       });
     });
 
+    describe('#canFlag', function () {
+      it('returns true if the user is a third-party user', function () {
+        var ann = fixtures.thirdPartyAnnotation();
+        var controller = createDirective(ann).controller;
+        assert.isTrue(controller.canFlag());
+      });
+
+      it('returns the value of the `flag_action` feature flag', function () {
+        var controller = createDirective().controller;
+
+        fakeFeatures.flagEnabled.returns(false);
+        assert.equal(controller.canFlag(), false);
+
+        fakeFeatures.flagEnabled.returns(true);
+        assert.equal(controller.canFlag(), true);
+      });
+    });
+
     describe('saving a new annotation', function() {
       var annotation;
 
@@ -1006,5 +1026,20 @@ describe('annotation', function() {
         },
       });
     });
+
+    it('flags the annotation when the user clicks the "Flag" button', function () {
+      fakeAnnotationMapper.flagAnnotation.returns(Promise.resolve());
+      var el = createDirective().element;
+      var flagBtn = el[0].querySelector('button[aria-label="Flag"]');
+      flagBtn.click();
+      assert.called(fakeAnnotationMapper.flagAnnotation);
+    });
+
+    it('highlights the "Flag" button if the annotation is flagged', function () {
+      var ann = Object.assign(fixtures.defaultAnnotation(), { flagged: true });
+      var el = createDirective(ann).element;
+      var flaggedBtn = el[0].querySelector('button[aria-label="Annotation has been flagged"]');
+      assert.ok(flaggedBtn);
+    });
   });
 });

src/sidebar/templates/annotation.html

@@ -188,7 +188,7 @@
           on-close="vm.showShareDialog = false">
         </annotation-share-dialog>
       </span>
-      <span ng-if="vm.isThirdPartyUser()">
+      <span ng-if="vm.canFlag()">
         <button class="btn btn-clean annotation-action-btn"
           ng-if="!vm.isFlagged()"
           ng-click="vm.flag()"

src/sidebar/test/annotation-fixtures.js

@@ -16,6 +16,15 @@ function defaultAnnotation() {
   };
 }
 
+/**
+ * Return a fake annotation created by a third-party user.
+ */
+function thirdPartyAnnotation() {
+  return Object.assign(defaultAnnotation(), {
+    user: 'acct:ben@publisher.org',
+  });
+}
+
 /**
  * Return a fake public annotation with the basic properties filled in.
  */
@@ -171,4 +180,5 @@ module.exports = {
   oldHighlight: oldHighlight,
   oldPageNote: oldPageNote,
   oldReply: oldReply,
+  thirdPartyAnnotation: thirdPartyAnnotation,
 };