Do not hide annotation thread when annotations are waiting to anchor.

When an annotation is created or updated the sidebar briefly transitions into the
`waitingToAnchor` state and hides the entire thread list, losing the user's scroll
position as a result.
Instead of hiding the entire thread, filter out the annotations which are waiting to
anchor.

https://trello.com/c/hQRpsUPj/444-avoid-hiding-thread-list-while-new-annotations-received-over-ws-are-being-anchored

h/static/scripts/directive/selection-tabs.js

@@ -20,6 +20,17 @@ module.exports = function () {
       this.orphansTabFlagEnabled = function () {
         return features.flagEnabled('orphans_tab');
       };
+
+      this.showAnnotationsUnavailableMessage = function () {
+        return this.selectedTab === this.TAB_ANNOTATIONS &&
+          this.totalAnnotations === 0 &&
+          !this.isWaitingToAnchorAnnotations;
+      };
+
+      this.showNotesUnavailableMessage = function () {
+        return this.selectedTab === this.TAB_NOTES &&
+          this.totalNotes === 0;
+      };
     },
     restrict: 'E',
     scope: {

h/static/scripts/root-thread.js

@@ -62,23 +62,31 @@ function RootThread($rootScope, annotationUI, features, searchFilter, viewFilter
     if (state.isSidebar && !state.filterQuery) {
       if (!features.flagEnabled('orphans_tab')) {
         threadFilterFn = function (thread) {
-          if (state.selectedTab === uiConstants.TAB_ANNOTATIONS || state.selectedTab === uiConstants.TAB_ORPHANS) {
-            return thread.annotation && (metadata.isAnnotation(thread.annotation) || metadata.isOrphan(thread.annotation));
-          } else if (state.selectedTab === uiConstants.TAB_NOTES) {
-            return thread.annotation && metadata.isPageNote(thread.annotation);
+          if (!thread.annotation) {
+            return false;
+          }
+          if (state.selectedTab === uiConstants.TAB_NOTES) {
+            return metadata.isPageNote(thread.annotation);
           } else {
-            throw new Error('Invalid selected tab');
+            return metadata.isAnnotation(thread.annotation) || metadata.isOrphan(thread.annotation);
           }
         };
       } else {
         threadFilterFn = function (thread) {
-          if (state.selectedTab === uiConstants.TAB_ANNOTATIONS) {
-            return thread.annotation && metadata.isAnnotation(thread.annotation);
-          } else if (state.selectedTab === uiConstants.TAB_NOTES) {
-            return thread.annotation && metadata.isPageNote(thread.annotation);
-          } else if (state.selectedTab === uiConstants.TAB_ORPHANS) {
-            return thread.annotation && metadata.isOrphan(thread.annotation);
-          } else {
+          if (!thread.annotation) {
+            return false;
+          }
+          if (metadata.isWaitingToAnchor(thread.annotation)) {
+            return false;
+          }
+          switch (state.selectedTab) {
+          case uiConstants.TAB_ANNOTATIONS:
+            return metadata.isAnnotation(thread.annotation);
+          case uiConstants.TAB_ORPHANS:
+            return metadata.isOrphan(thread.annotation);
+          case uiConstants.TAB_NOTES:
+            return metadata.isPageNote(thread.annotation);
+          default:
             throw new Error('Invalid selected tab');
           }
         };

h/static/scripts/test/integration/threading-test.js

@@ -7,18 +7,21 @@ var unroll = require('../util').unroll;
 
 var fixtures = immutable({
   annotations: [{
+    $orphan: false,
     id: '1',
     references: [],
     target: [{selector: []}],
     text: 'first annotation',
     updated: 50,
   },{
+    $orphan: false,
     id: '2',
     references: [],
     text: 'second annotation',
     target: [{selector: []}],
     updated: 200,
   },{
+    $orphan: false,
     id: '3',
     references: ['2'],
     text: 'reply to first annotation',

h/static/scripts/test/root-thread-test.js

@@ -264,6 +264,22 @@ describe('rootThread', function () {
       // pages, since we show all types of annotations here
       assert.notOk(threadFilterFn);
     });
+
+    it('filter does not match annotation when it is still waiting to anchor', function () {
+      fakeBuildThread.reset();
+
+      fakeAnnotationUI.state = Object.assign({}, fakeAnnotationUI.state,
+        {selectedTab: uiConstants.TAB_ANNOTATIONS});
+
+      rootThread.thread(fakeAnnotationUI.state);
+      var threadFilterFn = fakeBuildThread.args[0][1].threadFilterFn;
+
+      var annotation = {
+        $orphan: undefined,
+        target: [{ selector: {} }],
+      };
+      assert.isFalse(threadFilterFn({annotation: annotation}));
+    });
   });
 
   describe('when the filter query changes', function () {

h/templates/client/selection_tabs.html

@@ -33,7 +33,7 @@
   </a>
 </div>
 <div ng-if="!vm.isLoading()" class="selection-tabs__empty-message">
-  <div ng-if="vm.selectedTab === vm.TAB_NOTES && vm.totalNotes === 0"  class="annotation-unavailable-message">
+  <div ng-if="vm.showNotesUnavailableMessage()"  class="annotation-unavailable-message">
     <p class="annotation-unavailable-message__label">
       There are no page notes in this group.
       <br />
@@ -42,7 +42,7 @@
       button.
     </p>
   </div>
-  <div ng-if="vm.selectedTab === vm.TAB_ANNOTATIONS && vm.totalAnnotations === 0"  class="annotation-unavailable-message">
+  <div ng-if="vm.showAnnotationsUnavailableMessage()"  class="annotation-unavailable-message">
     <p class="annotation-unavailable-message__label">
       There are no annotations in this group.
       <br />

h/templates/client/viewer.html

@@ -13,7 +13,6 @@
 (See gh2642 for rationale for 'ng-show="true"')
  -->
 <ul class="thread-list ng-hide"
-    ng-if="!waitingToAnchorAnnotations"
     ng-show="true"
     window-scroll="loadMore(20)">
   <search-status-bar