Mongo tabs UX fixes (#851)

* Fixed mongo tabs UX

* changed logic for new tab index

* moved index to tabs base

* removed getIndex method

src/Contracts/ViewModels.ts

@@ -286,6 +286,7 @@ export interface TabOptions {
   rid?: string;
   node?: TreeNode;
   theme?: string;
+  index?: number;
 }
 
 export interface DocumentsTabOptions extends TabOptions {

src/Explorer/Explorer.tsx

@@ -1394,7 +1394,11 @@ export default class Explorer {
       tab.hashLocation().startsWith(hashLocation)
     ) as TerminalTab[];
 
-    const index = terminalTabs.length + 1;
+    let index = 1;
+    if (terminalTabs.length > 0) {
+      index = terminalTabs[terminalTabs.length - 1].index + 1;
+    }
+
     const newTab = new TerminalTab({
       account: userContext.databaseAccount,
       tabKind: ViewModels.CollectionTabKind.Terminal,
@@ -1407,6 +1411,7 @@ export default class Explorer {
       onLoadStartKey: null,
       container: this,
       kind: kind,
+      index: index,
     });
 
     this.tabsManager.activateNewTab(newTab);

src/Explorer/Tabs/TabsBase.ts

@@ -16,6 +16,7 @@ import { TabsManager } from "./TabsManager";
 // TODO: Use specific actions for logging telemetry data
 export default class TabsBase extends WaitsForTemplateViewModel {
   private static id = 0;
+  public readonly index: number;
   public closeTabButton: ViewModels.Button;
   public node: ViewModels.TreeNode;
   public collection: ViewModels.CollectionBase;
@@ -35,6 +36,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
 
   constructor(options: ViewModels.TabOptions) {
     super();
+    this.index = options.index;
     this._theme = ThemeUtility.getMonacoTheme(options.theme);
     this.node = options.node;
     this.collection = options.collection;

src/Explorer/Tabs/TerminalTab.tsx

@@ -1,3 +1,4 @@
+import { Spinner, SpinnerSize } from "@fluentui/react";
 import * as ko from "knockout";
 import * as React from "react";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
@@ -33,7 +34,7 @@ class NotebookTerminalComponentAdapter implements ReactAdapter {
         databaseAccount={this.getDatabaseAccount()}
       />
     ) : (
-      <></>
+      <Spinner styles={{ root: { marginTop: 10 } }} size={SpinnerSize.large}></Spinner>
     );
   }
 }
@@ -51,7 +52,11 @@ export default class TerminalTab extends TabsBase {
       () => userContext?.databaseAccount
     );
     this.notebookTerminalComponentAdapter.parameters = ko.computed<boolean>(() => {
-      if (this.isTemplateReady() && this.container.isNotebookEnabled()) {
+      if (
+        this.isTemplateReady() &&
+        this.container.isNotebookEnabled() &&
+        this.container.notebookServerInfo().notebookServerEndpoint
+      ) {
         return true;
       }
       return false;

src/Explorer/Tree/Collection.ts

@@ -690,14 +690,23 @@ export default class Collection implements ViewModels.Collection {
   }
 
   public onNewMongoShellClick() {
-    const id = this.container.tabsManager.getTabs(ViewModels.CollectionTabKind.MongoShell).length + 1;
+    const mongoShellTabs = this.container.tabsManager.getTabs(
+      ViewModels.CollectionTabKind.MongoShell
+    ) as MongoShellTab[];
+
+    let index = 1;
+    if (mongoShellTabs.length > 0) {
+      index = mongoShellTabs[mongoShellTabs.length - 1].index + 1;
+    }
+
     const mongoShellTab: MongoShellTab = new MongoShellTab({
       tabKind: ViewModels.CollectionTabKind.MongoShell,
-      title: "Shell " + id,
+      title: "Shell " + index,
       tabPath: "",
       collection: this,
       node: this,
       hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(this.databaseId, this.id())}/mongoShell`,
+      index: index,
     });
 
     this.container.tabsManager.activateNewTab(mongoShellTab);