Display a notification if the selected annotation is not available

If an annotation is selected but was not successfully loaded,
display a message in the sidebar indicating that the user does
not have permission to see that annotation.

h/static/scripts/test/widget-controller-test.js

@@ -65,7 +65,8 @@ describe('WidgetController', function () {
       clearSelectedAnnotations: sandbox.spy(),
       selectedAnnotationMap: {},
       hasSelectedAnnotations: function () {
-        return Object.keys(this.selectedAnnotationMap).length > 0;
+        return !!this.selectedAnnotationMap &&
+               Object.keys(this.selectedAnnotationMap).length > 0;
       },
     };
     fakeCrossFrame = {
@@ -286,4 +287,26 @@ describe('WidgetController', function () {
       assert.notCalled($scope.clearSelection);
     });
   });
+
+  describe('direct linking messages', function () {
+    it('displays a message if the selection is unavailable', function () {
+      fakeAnnotationUI.selectedAnnotationMap = {'missing': true};
+      fakeThreading.idTable = {'123': {}};
+      $scope.$digest();
+      assert.isTrue($scope.selectedAnnotationUnavailable());
+    });
+
+    it('does not show a message if the selection is available', function () {
+      fakeAnnotationUI.selectedAnnotationMap = {'123': true};
+      fakeThreading.idTable = {'123': {}};
+      $scope.$digest();
+      assert.isFalse($scope.selectedAnnotationUnavailable());
+    });
+
+    it('does not a show a message if there is no selection', function () {
+      fakeAnnotationUI.selectedAnnotationMap = null;
+      $scope.$digest();
+      assert.isFalse($scope.selectedAnnotationUnavailable());
+    });
+  });
 });

h/static/scripts/widget-controller.js

@@ -3,12 +3,22 @@
 var events = require('./events');
 var SearchClient = require('./search-client');
 
+function firstKey(object) {
+  for (var k in object) {
+    if (!object.hasOwnProperty(k)) {
+      continue;
+    }
+    return k;
+  }
+  return null;
+}
+
 /**
  * Returns the group ID of the first annotation in `results` whose
  * ID is a key in `selection`.
  */
 function groupIDFromSelection(selection, results) {
-  var id = Object.keys(selection)[0];
+  var id = firstKey(selection);
   var annot = results.find(function (annot) {
     return annot.id === id;
   });
@@ -193,6 +203,12 @@ module.exports = function WidgetController(
     return annotation.$$tag in $scope.focusedAnnotations;
   };
 
+  $scope.selectedAnnotationUnavailable = function () {
+    return searchClients.length === 0 &&
+           annotationUI.hasSelectedAnnotations() &&
+           !threading.idTable[firstKey(annotationUI.selectedAnnotationMap)];
+  };
+
   $rootScope.$on(events.BEFORE_ANNOTATION_CREATED, function (event, data) {
     if (data.$highlight || (data.references && data.references.length > 0)) {
       return;

h/static/styles/thread.scss

@@ -15,6 +15,26 @@ $thread-padding: $annotation-card-left-padding;
   }
 }
 
+.annotation-unavailable-message {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid $gray-lighter;
+  padding-top: 30px;
+  padding-bottom: 30px;
+  border-radius: 3px;
+  align-items: center;
+
+  &__label {
+    margin-top: 10px;
+    max-width: 160px;
+    text-align: center;
+  }
+
+  &__icon {
+    font-size: 50px;
+  }
+}
+
 .thread-replies .thread:first-child {
   margin-top: 0.5em;
 }

h/templates/client/viewer.html

@@ -21,6 +21,13 @@
       on-change-sort-by="sort.name = sortBy">
     </sort-dropdown>
   </li>
+  <li class="annotation-unavailable-message"
+      ng-if="selectedAnnotationUnavailable()">
+    <span class="h-icon-lock annotation-unavailable-message__icon"></span>
+    <p class="annotation-unavailable-message__label">
+      You do not have permission to see this annotation
+    </p>
+  </li>
   <li id="{{vm.id}}"
       class="annotation-card thread"
       ng-class="{'js-hover': hasFocus(child.message)}"