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

@@ -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>

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);

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>