From ee60f61cfe69457e249a9ee4ffc0aa4cb20632b4 Mon Sep 17 00:00:00 2001
From: Srinath Narayanan <srnara@microsoft.com>
Date: Tue, 8 Jun 2021 00:17:55 +0530
Subject: [PATCH] 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       |  1 +
 src/Explorer/Explorer.tsx         |  7 ++++++-
 src/Explorer/Tabs/TabsBase.ts     |  2 ++
 src/Explorer/Tabs/TerminalTab.tsx |  9 +++++++--
 src/Explorer/Tree/Collection.ts   | 13 +++++++++++--
 5 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/Contracts/ViewModels.ts b/src/Contracts/ViewModels.ts
index c44a86041..38091f611 100644
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -286,6 +286,7 @@ export interface TabOptions {
   rid?: string;
   node?: TreeNode;
   theme?: string;
+  index?: number;
 }
 
 export interface DocumentsTabOptions extends TabOptions {
diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx
index f5368679b..3c93ee918 100644
--- a/src/Explorer/Explorer.tsx
+++ b/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);
diff --git a/src/Explorer/Tabs/TabsBase.ts b/src/Explorer/Tabs/TabsBase.ts
index 2130a6715..feb0d2e03 100644
--- a/src/Explorer/Tabs/TabsBase.ts
+++ b/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;
diff --git a/src/Explorer/Tabs/TerminalTab.tsx b/src/Explorer/Tabs/TerminalTab.tsx
index b3126d790..c0c7bf8c6 100644
--- a/src/Explorer/Tabs/TerminalTab.tsx
+++ b/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;
diff --git a/src/Explorer/Tree/Collection.ts b/src/Explorer/Tree/Collection.ts
index ffd236573..ac3cc06ca 100644
--- a/src/Explorer/Tree/Collection.ts
+++ b/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);