Update `AnnotationHeader` to use util for `isHighlight`

src/sidebar/components/annotation-header.js

 const propTypes = require('prop-types');
 const { createElement } = require('preact');
 
+const { isHighlight } = require('../util/annotation-metadata');
+
 const AnnotationDocumentInfo = require('./annotation-document-info');
 const AnnotationShareInfo = require('./annotation-share-info');
 const AnnotationUser = require('./annotation-user');
@@ -15,7 +17,6 @@ const Timestamp = require('./timestamp');
 function AnnotationHeader({
   annotation,
   isEditing,
-  isHighlight,
   onReplyCountClick,
   replyCount,
   showDocumentInfo,
@@ -60,7 +61,7 @@ function AnnotationHeader({
 
       <div className="annotation-header__row">
         <AnnotationShareInfo annotation={annotation} />
-        {!isEditing && isHighlight && (
+        {!isEditing && isHighlight(annotation) && (
           <div className="annotation-header__highlight">
             <SvgIcon
               name="highlight"
@@ -81,8 +82,6 @@ AnnotationHeader.propTypes = {
   annotation: propTypes.object.isRequired,
   /* Whether the annotation is actively being edited */
   isEditing: propTypes.bool,
-  /* Whether the annotation is a highlight */
-  isHighlight: propTypes.bool,
   /* Callback for when the toggle-replies element is clicked */
   onReplyCountClick: propTypes.func.isRequired,
   /* How many replies this annotation currently has */

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

@@ -8,12 +8,13 @@ const { $imports } = require('../annotation-header');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('AnnotationHeader', () => {
+  let fakeIsHighlight;
+
   const createAnnotationHeader = props => {
     return mount(
       <AnnotationHeader
         annotation={fixtures.defaultAnnotation()}
         isEditing={false}
-        isHighlight={false}
         onReplyCountClick={sinon.stub()}
         replyCount={0}
         showDocumentInfo={false}
@@ -23,7 +24,14 @@ describe('AnnotationHeader', () => {
   };
 
   beforeEach(() => {
+    fakeIsHighlight = sinon.stub().returns(false);
+
     $imports.$mock(mockImportedComponents());
+    $imports.$mock({
+      '../util/annotation-metadata': {
+        isHighlight: fakeIsHighlight,
+      },
+    });
   });
 
   afterEach(() => {
@@ -111,9 +119,9 @@ describe('AnnotationHeader', () => {
 
   describe('annotation is-highlight icon', () => {
     it('should display is-highlight icon if annotation is a highlight', () => {
+      fakeIsHighlight.returns(true);
       const wrapper = createAnnotationHeader({
         isEditing: false,
-        isHighlight: true,
       });
       const highlightIcon = wrapper.find('.annotation-header__highlight');
 
@@ -121,9 +129,9 @@ describe('AnnotationHeader', () => {
     });
 
     it('should not display the is-highlight icon if annotation is not a highlight', () => {
+      fakeIsHighlight.returns(false);
       const wrapper = createAnnotationHeader({
         isEditing: false,
-        isHighlight: false,
       });
       const highlightIcon = wrapper.find('.annotation-header__highlight');
 

src/sidebar/templates/annotation.html

@@ -6,7 +6,6 @@
 
   <annotation-header annotation="vm.annotation"
                          is-editing="vm.editing()"
-                         is-highlight="vm.isHighlight()"
                          on-reply-count-click="vm.onReplyCountClick()"
                          reply-count="vm.replyCount"
                          show-document-info="vm.showDocumentInfo">