Update `AnnotationThread` to render `AnnotationOmega` if flag set

src/sidebar/components/annotation-thread.js

@@ -33,7 +33,7 @@ function showAllParents(thread, showFn) {
 }
 
 // @ngInject
-function AnnotationThreadController(store) {
+function AnnotationThreadController(features, store) {
   // Flag that tracks whether the content of the annotation is hovered,
   // excluding any replies.
   this.annotationHovered = false;
@@ -103,6 +103,10 @@ function AnnotationThreadController(store) {
       store.setCollapsed(thread.parent.id, false);
     }
   };
+
+  this.shouldShowAnnotationOmega = () => {
+    return features.flagEnabled('client_preact_annotation');
+  };
 }
 
 /**

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

@@ -34,16 +34,20 @@ describe('annotationThread', function() {
       });
   });
 
+  let fakeFeatures;
   let fakeStore;
 
   beforeEach(function() {
+    fakeFeatures = {
+      flagEnabled: sinon.stub().returns(false),
+    };
     fakeStore = {
       setForceVisible: sinon.stub(),
       setCollapsed: sinon.stub(),
       getState: sinon.stub(),
     };
 
-    angular.mock.module('app', { store: fakeStore });
+    angular.mock.module('app', { features: fakeFeatures, store: fakeStore });
   });
 
   it('renders the tree structure of parent and child annotations', function() {
@@ -253,4 +257,55 @@ describe('annotationThread', function() {
     assert.notOk(element[0].querySelector('moderation-banner'));
     assert.notOk(element[0].querySelector('annotation'));
   });
+
+  describe('preact-migrated Annotation component', () => {
+    it('additionally renders `AnnotationOmega` when `client_preact_annotation` feature flag is enabled', () => {
+      fakeFeatures.flagEnabled
+        .withArgs('client_preact_annotation')
+        .returns(true);
+
+      const element = util.createDirective(document, 'annotationThread', {
+        thread: {
+          id: '1',
+          annotation: { id: '1', text: 'text' },
+          children: [
+            {
+              id: '2',
+              annotation: { id: '2', text: 'areply' },
+              children: [],
+              visible: true,
+            },
+          ],
+          visible: true,
+        },
+      });
+
+      assert.ok(element[0].querySelector('annotation'));
+      assert.ok(element[0].querySelector('annotation-omega'));
+    });
+    it('does not render `AnnotationOmega` if `client_preact_annotation` feature flag is not enabled', () => {
+      fakeFeatures.flagEnabled
+        .withArgs('client_preact_annotation')
+        .returns(false);
+
+      const element = util.createDirective(document, 'annotationThread', {
+        thread: {
+          id: '1',
+          annotation: { id: '1', text: 'text' },
+          children: [
+            {
+              id: '2',
+              annotation: { id: '2', text: 'areply' },
+              children: [],
+              visible: true,
+            },
+          ],
+          visible: true,
+        },
+      });
+
+      assert.ok(element[0].querySelector('annotation'));
+      assert.notOk(element[0].querySelector('annotation-omega'));
+    });
+  });
 });

src/sidebar/templates/annotation-thread.html

@@ -14,6 +14,12 @@
       annotation="vm.thread.annotation"
       ng-if="vm.thread.annotation">
     </moderation-banner>
+    <annotation-omega ng-if="vm.shouldShowAnnotationOmega()"
+      annotation="vm.thread.annotation"
+      reply-count="vm.thread.replyCount"
+      on-reply-count-click="vm.toggleCollapsed()"
+      show-document-info="vm.showDocumentInfo">
+    </annotation-omega>
     <annotation ng-class="vm.annotationClasses()"
              annotation="vm.thread.annotation"
              is-collapsed="vm.thread.collapsed"