From 19cf2036066be477136b3dd478c7273a3faab00c Mon Sep 17 00:00:00 2001
From: Jordi Bunster <jbunster@microsoft.com>
Date: Mon, 19 Apr 2021 12:58:53 -0700
Subject: [PATCH] Misc fixes from #500 (#701)

* Ensure TabsBase.tabPath is always observable

* In tests, Date.getTime() is not different enough

* Add class name only in the Tab that needs it
---
 src/Explorer/Tabs/StoredProcedureTab.html | 2 +-
 src/Explorer/Tabs/TabsBase.ts             | 9 +++------
 src/Explorer/Tabs/TabsManager.html        | 4 +---
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/Explorer/Tabs/StoredProcedureTab.html b/src/Explorer/Tabs/StoredProcedureTab.html
index 93f985af8..dc7db1bf7 100644
--- a/src/Explorer/Tabs/StoredProcedureTab.html
+++ b/src/Explorer/Tabs/StoredProcedureTab.html
@@ -1,4 +1,4 @@
-<div class="tab-pane flexContainer" data-bind="attr:{ id: tabId }" role="tabpanel">
+<div class="tab-pane flexContainer stored-procedure-tab" data-bind="attr:{ id: tabId }" role="tabpanel">
   <!-- Stored Procedure Tab Form - Start -->
   <div class="storedTabForm flexContainer">
     <div class="formTitleFirst">Stored Procedure Id</div>
diff --git a/src/Explorer/Tabs/TabsBase.ts b/src/Explorer/Tabs/TabsBase.ts
index 3addaba4f..c49705ddc 100644
--- a/src/Explorer/Tabs/TabsBase.ts
+++ b/src/Explorer/Tabs/TabsBase.ts
@@ -14,6 +14,7 @@ import { TabsManager } from "./TabsManager";
 
 // TODO: Use specific actions for logging telemetry data
 export default class TabsBase extends WaitsForTemplateViewModel {
+  private static id = 0;
   public static readonly component = { name: "tab", template: "" };
   public closeTabButton: ViewModels.Button;
   public node: ViewModels.TreeNode;
@@ -22,7 +23,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
   public rid: string;
   public hasFocus: ko.Observable<boolean>;
   public isMouseOver: ko.Observable<boolean>;
-  public tabId: string;
+  public tabId = `tab${TabsBase.id++}`;
   public tabKind: ViewModels.CollectionTabKind;
   public tabTitle: ko.Observable<string>;
   public tabPath: ko.Observable<string>;
@@ -31,14 +32,11 @@ export default class TabsBase extends WaitsForTemplateViewModel {
   public isExecuting: ko.Observable<boolean>;
   public pendingNotification?: ko.Observable<DataModels.Notification>;
   public manager?: TabsManager;
-
   protected _theme: string;
   public onLoadStartKey: number;
 
   constructor(options: ViewModels.TabOptions) {
     super();
-    const id = new Date().getTime().toString();
-
     this._theme = ThemeUtility.getMonacoTheme(options.theme);
     this.node = options.node;
     this.collection = options.collection;
@@ -46,11 +44,10 @@ export default class TabsBase extends WaitsForTemplateViewModel {
     this.rid = options.rid || (this.collection && this.collection.rid) || "";
     this.hasFocus = ko.observable<boolean>(false);
     this.isMouseOver = ko.observable<boolean>(false);
-    this.tabId = `tab${id}`;
     this.tabKind = options.tabKind;
     this.tabTitle = ko.observable<string>(options.title);
     this.tabPath =
-      (options.tabPath && ko.observable<string>(options.tabPath)) ||
+      ko.observable(options.tabPath ?? "") ||
       (this.collection &&
         ko.observable<string>(`${this.collection.databaseId}>${this.collection.id()}>${this.tabTitle()}`));
     this.isExecutionError = ko.observable<boolean>(false);
diff --git a/src/Explorer/Tabs/TabsManager.html b/src/Explorer/Tabs/TabsManager.html
index a876cf38d..d8d27967d 100644
--- a/src/Explorer/Tabs/TabsManager.html
+++ b/src/Explorer/Tabs/TabsManager.html
@@ -85,9 +85,7 @@
   <div class="tabPanesContainer">
     <!-- ko foreach: openedTabs -->
     <div class="tabs-container" data-bind="visible: $parent.activeTab() === $data">
-      <span
-        data-bind="class: $data.constructor.component.name, component: { name: $data.constructor.component.name, params: $data }"
-      ></span>
+      <span data-bind="component: { name: $data.constructor.component.name, params: $data }"></span>
     </div>
     <!-- /ko -->
   </div>