Auto-select first item in DocumentsTab. Fix selection highlighting (#1645)

* Auto-select first document in documentsTab

* Fix style row selection by making selector more specific

less/documentDB.less

@@ -1179,16 +1179,16 @@ menuQuickStart {
   }
 }
 
-.gridRowSelected {
+#tbodycontent tr.gridRowSelected {
   .active();
 }
 
-.gridRowSelected:hover {
+#tbodycontent tr.gridRowSelected:hover {
   cursor: default;
   .hover();
 }
 
-.gridRowHighlighted {
+#tbodycontent tr.gridRowHighlighted {
   border-style: dotted;
   border-width: 2px;
 }
@@ -2576,9 +2576,10 @@ a:link {
 .querydropdown.placeholderVisible {
   font-style: italic;
 }
-.querydropdown.placeholderVisible::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+.querydropdown.placeholderVisible::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: #767474;
-  opacity: 1; 
+  opacity: 1;
 }
 
 .querydropdown:hover {
@@ -2648,7 +2649,7 @@ a:link {
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .tabNavText {
   font-weight: bolder;
-  border-bottom: 2px solid rgba(0,120,212,1);
+  border-bottom: 2px solid rgba(0, 120, 212, 1);
 }
 
 .nav-tabs > li.active:focus > .tabNavContentContainer {
@@ -3096,4 +3097,3 @@ a:link {
   background: white;
   height: 100%;
 }
-

src/Explorer/Tabs/DocumentsTab.ts

@@ -346,6 +346,22 @@ export default class DocumentsTab extends TabsBase {
     return true;
   }
 
+  /**
+   * Query first page of documents
+   * Select and query first document and display content
+   */
+  private async autoPopulateContent() {
+    // reset iterator
+    this._documentsIterator = this.createIterator();
+    // load documents
+    await this.loadNextPage();
+
+    // Select first document and load content
+    if (this.documentIds().length > 0) {
+      this.documentIds()[0].click();
+    }
+  }
+
   public onShowFilterClick(): Q.Promise<any> {
     this.isFilterCreated(true);
     this.isFilterExpanded(true);
@@ -380,10 +396,7 @@ export default class DocumentsTab extends TabsBase {
     this.documentIds([]);
 
     try {
-      // reset iterator
+      await this.autoPopulateContent();
-      this._documentsIterator = this.createIterator();
-      // load documents
-      await this.loadNextPage();
       // collapse filter
       this.appliedFilter(this.filterContent());
       this.isFilterExpanded(false);
@@ -406,6 +419,11 @@ export default class DocumentsTab extends TabsBase {
     this.queryAbortController.abort();
   }
 
+  /**
+   * TODO Doesn't seem to be used: remove?
+   * @param clickedDocumentId
+   * @returns
+   */
   public onDocumentIdClick(clickedDocumentId: DocumentId): Q.Promise<any> {
     if (this.editorState() !== ViewModels.DocumentExplorerState.noDocumentSelected) {
       return Q();
@@ -624,8 +642,7 @@ export default class DocumentsTab extends TabsBase {
 
     if (!this._documentsIterator) {
       try {
-        this._documentsIterator = this.createIterator();
+        await this.autoPopulateContent();
-        await this.loadNextPage();
       } catch (error) {
         if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
           TelemetryProcessor.traceFailure(