Enable first-party users to flag annotations

Enable first-party users to flag annotations if the `flag_action`
feature flag is enabled for them.

src/sidebar/components/annotation.js

@@ -482,6 +482,13 @@ function AnnotationController(
     return annotationUI.isHiddenByModerator(vm.annotation.id);
   };
 
+  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;
@@ -155,7 +156,7 @@ describe('annotation', function() {
         get: sandbox.stub(),
       };
 
-      var fakeFeatures = {
+      fakeFeatures = {
         flagEnabled: sandbox.stub().returns(true),
       };
 
@@ -195,7 +196,8 @@ describe('annotation', function() {
       };
 
       fakeSettings = {
-        authDomain: 'example.com',
+        // "localhost" is the host used by 'first party' annotation fixtures
+        authDomain: 'localhost',
       };
 
       fakeStore = {
@@ -764,6 +766,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;
 
@@ -1008,5 +1028,13 @@ 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);
+    });
   });
 });

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.
  */
@@ -148,4 +157,5 @@ module.exports = {
   oldHighlight: oldHighlight,
   oldPageNote: oldPageNote,
   oldReply: oldReply,
+  thirdPartyAnnotation: thirdPartyAnnotation,
 };