Render display name in new annotations

src/sidebar/components/annotation-header.js

@@ -12,8 +12,12 @@ function AnnotationHeaderController(groups, settings, serviceUrl) {
     return self.annotation.user;
   };
 
-  this.username = function () {
-    return persona.username(self.annotation.user);
+  this.displayName = () => {
+    var userInfo = this.annotation.user_info;
+    if (userInfo && userInfo.display_name) {
+      return userInfo.display_name;
+    }
+    return persona.username(this.annotation.user);
   };
 
   this.isThirdPartyUser = function () {

src/sidebar/components/annotation.js

@@ -106,7 +106,11 @@ function AnnotationController(
 
     // New annotations (just created locally by the client, rather then
     // received from the server) have some fields missing. Add them.
+    //
+    // FIXME: This logic should go in the `addAnnotations` Redux action once all
+    // required state is in the store.
     self.annotation.user = self.annotation.user || session.state.userid;
+    self.annotation.user_info = self.annotation.user_info || session.state.user_info;
     self.annotation.group = self.annotation.group || groups.focused().id;
     if (!self.annotation.permissions) {
       self.annotation.permissions = permissions.default(self.annotation.user,

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

@@ -11,7 +11,7 @@ var fakeDocumentMeta = {
   titleText: 'Dummy title',
 };
 
-describe('annotationHeader', function () {
+describe('sidebar.components.annotation-header', function () {
   var $componentController;
   var fakeGroups;
   var fakeSettings;
@@ -72,5 +72,26 @@ describe('annotationHeader', function () {
         assert.deepEqual(ctrl.documentMeta(), fakeDocumentMeta);
       });
     });
+
+    describe('#displayName', () => {
+      it('returns the username if no display name is set', () => {
+        var ann = fixtures.defaultAnnotation();
+        var ctrl = $componentController('annotationHeader', {}, {
+          annotation: ann,
+        });
+        assert.deepEqual(ctrl.displayName(), 'bill');
+      });
+
+      it('returns the display name if set', () => {
+        var ann = fixtures.defaultAnnotation();
+        ann.user_info = {
+          display_name: 'Bill Jones',
+        };
+        var ctrl = $componentController('annotationHeader', {}, {
+          annotation: ann,
+        });
+        assert.deepEqual(ctrl.displayName(), 'Bill Jones');
+      });
+    });
   });
 });

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

@@ -276,10 +276,16 @@ describe('annotation', function() {
         var annotation = fixtures.newAnnotation();
         annotation.user = undefined;
         fakeSession.state.userid = 'acct:bill@localhost';
+        fakeSession.state.user_info = {
+          display_name: 'Bill Jones',
+        };
 
         createDirective(annotation);
 
         assert.equal(annotation.user, 'acct:bill@localhost');
+        assert.deepEqual(annotation.user_info, {
+          display_name: 'Bill Jones',
+        });
       });
 
       it('sets the permissions of new annotations', function() {

src/sidebar/templates/annotation-header.html

@@ -5,10 +5,10 @@
       target="_blank"
       ng-if="!vm.isThirdPartyUser()"
       ng-href="{{vm.serviceUrl('user',{user:vm.user()})}}"
-      >{{vm.username()}}</a>
+      >{{vm.displayName()}}</a>
     <span class="annotation-header__user"
       ng-if="vm.isThirdPartyUser()"
-      >{{vm.username()}}</span>
+      >{{vm.displayName()}}</span>
     <span class="annotation-collapsed-replies">
       <a class="annotation-link" href=""
         ng-click="vm.onReplyCountClick()"