Add edited timestamp to header component

src/sidebar/components/annotation-header.js

@@ -24,6 +24,9 @@ function AnnotationHeader({
 }) {
   const annotationLink = annotation.links ? annotation.links.html : '';
   const replyPluralized = !replyCount || replyCount > 1 ? 'replies' : 'reply';
+  // NB: `created` and `updated` are strings, not `Date`s
+  const hasBeenEdited =
+    annotation.updated && annotation.created !== annotation.updated;
 
   return (
     <header className="annotation-header">
@@ -34,13 +37,26 @@ function AnnotationHeader({
             {replyCount} {replyPluralized}
           </a>
         </div>
-        {!isEditing && annotation.updated && (
+        {!isEditing && annotation.created && (
           <div className="annotation-header__timestamp">
+            {hasBeenEdited && (
+              <span className="annotation-header__timestamp-edited">
+                (edited{' '}
                 <Timestamp
-              className="annotation-header__timestamp-link"
+                  className="annotation-header__timestamp-edited-link"
                   href={annotationLink}
                   timestamp={annotation.updated}
                 />
+                ){' '}
+              </span>
+            )}
+            <span className="annotation-header__timestamp-created">
+              <Timestamp
+                className="annotation-header__timestamp-created-link"
+                href={annotationLink}
+                timestamp={annotation.created}
+              />
+            </span>
           </div>
         )}
       </div>

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

@@ -62,19 +62,46 @@ describe('AnnotationHeader', () => {
     );
   });
 
-  describe('timestamp', () => {
-    it('should render a timestamp if annotation has an `updated` value', () => {
+  describe('timestamps', () => {
+    it('should render timestamp container element if annotation has a `created` value', () => {
       const wrapper = createAnnotationHeader();
-      const timestamp = wrapper.find(Timestamp);
+      const timestamp = wrapper.find('.annotation-header__timestamp');
 
       assert.isTrue(timestamp.exists());
     });
 
-    it('should not render a timestamp if annotation does not have an `updated` value', () => {
+    it('should not render timestamp container if annotation does not have a `created` value', () => {
       const wrapper = createAnnotationHeader({
         annotation: fixtures.newAnnotation(),
       });
-      const timestamp = wrapper.find(Timestamp);
+      const timestamp = wrapper.find('.annotation-header__timestamp');
+
+      assert.isFalse(timestamp.exists());
+    });
+
+    it('should render edited timestamp if annotation has been edited', () => {
+      const annotation = fixtures.defaultAnnotation();
+      annotation.updated = '2018-05-10T20:18:56.613388+00:00';
+
+      const wrapper = createAnnotationHeader({
+        annotation: annotation,
+      });
+      const timestamp = wrapper
+        .find(Timestamp)
+        .filter('.annotation-header__timestamp-edited-link');
+
+      assert.isTrue(timestamp.exists());
+    });
+
+    it('should not render edited timestamp if annotation has not been edited', () => {
+      // Default annotation's created value is same as updated; as if the annotation
+      // has not been edited before
+      const wrapper = createAnnotationHeader({
+        annotation: fixtures.newAnnotation(),
+      });
+      const timestamp = wrapper
+        .find(Timestamp)
+        .filter('.annotation-header__timestamp-edited-link');
 
       assert.isFalse(timestamp.exists());
     });

src/sidebar/test/annotation-fixtures.js

@@ -6,6 +6,7 @@
 function defaultAnnotation() {
   return {
     id: 'deadbeef',
+    created: '2015-05-10T20:18:56.613388+00:00',
     document: {
       title: 'A special document',
     },

src/styles/sidebar/components/annotation-header.scss

@@ -10,12 +10,29 @@
     align-items: baseline;
   }
 
+  // Timestamps are right aligned in a flex row
   &__timestamp {
     margin-left: auto;
   }
 
-  &__timestamp-link {
+  &__timestamp-edited {
     @include font-small;
+    font-style: italic;
+    color: $grey-4;
+  }
+
+  &__timestamp-created-link,
+  &__timestamp-edited-link {
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__timestamp-created-link {
+    color: $grey-5;
+  }
+
+  &__timestamp-edited-link {
     color: $grey-4;
   }