Knockout tab changes

This reduces the work involved in rendering knockout tabs, which will make moving them to React under a feature flag a bit easier.

jest.config.js

@@ -67,7 +67,8 @@ module.exports = {
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    "^.*[.](svg|png|gif|less)$": "<rootDir>/mockModule",
+    "^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
+    "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
     "worker-loader": "<rootDir>/mockModule",
     "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1", // https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes
     "^dnd-core$": "dnd-core/dist/cjs",

less/documentDB.less

@@ -718,7 +718,7 @@ execute-sproc-params-pane {
   }
 }
 
-stored-procedure-tab {
+.stored-procedure-tab {
   @ToggleHeight: 30px;
   @ToggleWidth: 180px;
 

src/Explorer/ComponentRegisterer.ts

@@ -1,6 +1,5 @@
 import * as ko from "knockout";
 import * as PaneComponents from "./Panes/PaneComponents";
-import * as TabComponents from "./Tabs/TabComponents";
 import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
 import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
 import { EditorComponent } from "./Controls/Editor/EditorComponent";
@@ -9,9 +8,26 @@ import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleCompo
 import { InputTypeaheadComponent } from "./Controls/InputTypeahead/InputTypeahead";
 import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
 import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
-import { TabsManagerKOComponent } from "./Tabs/TabsManager";
 import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
 
+import DocumentsTab from "./Tabs/DocumentsTab";
+import MongoDocumentsTab from "./Tabs/MongoDocumentsTab";
+import StoredProcedureTab from "./Tabs/StoredProcedureTab";
+import TriggerTab from "./Tabs/TriggerTab";
+import UserDefinedFunctionTab from "./Tabs/UserDefinedFunctionTab";
+import { DatabaseSettingsTabV2, SettingsTabV2 } from "./Tabs/SettingsTabV2";
+import QueryTab from "./Tabs/QueryTab";
+import QueryTablesTab from "./Tabs/QueryTablesTab";
+import GraphTab from "./Tabs/GraphTab";
+import MongoShellTab from "./Tabs/MongoShellTab";
+import ConflictsTab from "./Tabs/ConflictsTab";
+import NotebookTabV2 from "./Tabs/NotebookV2Tab";
+import TerminalTab from "./Tabs/TerminalTab";
+import GalleryTab from "./Tabs/GalleryTab";
+import NotebookViewerTab from "./Tabs/NotebookViewerTab";
+import DatabaseSettingsTab from "./Tabs/DatabaseSettingsTab";
+import TabsManagerTemplate from "./Tabs/TabsManager.html";
+
 ko.components.register("input-typeahead", new InputTypeaheadComponent());
 ko.components.register("new-vertex-form", NewVertexComponent);
 ko.components.register("error-display", new ErrorDisplayComponent());
@@ -21,28 +37,28 @@ ko.components.register("json-editor", new JsonEditorComponent());
 ko.components.register("diff-editor", new DiffEditorComponent());
 ko.components.register("dynamic-list", DynamicListComponent);
 ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);
-ko.components.register("tabs-manager", TabsManagerKOComponent());
+ko.components.register("tabs-manager", { template: TabsManagerTemplate });
 
 // Collection Tabs
-ko.components.register("documents-tab", new TabComponents.DocumentsTab());
-ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTab());
-ko.components.register("stored-procedure-tab", new TabComponents.StoredProcedureTab());
-ko.components.register("trigger-tab", new TabComponents.TriggerTab());
-ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
-ko.components.register("collection-settings-tab-v2", new TabComponents.SettingsTabV2());
-ko.components.register("query-tab", new TabComponents.QueryTab());
-ko.components.register("tables-query-tab", new TabComponents.QueryTablesTab());
-ko.components.register("graph-tab", new TabComponents.GraphTab());
-ko.components.register("mongo-shell-tab", new TabComponents.MongoShellTab());
-ko.components.register("conflicts-tab", new TabComponents.ConflictsTab());
-ko.components.register("notebookv2-tab", new TabComponents.NotebookV2Tab());
-ko.components.register("terminal-tab", new TabComponents.TerminalTab());
-ko.components.register("gallery-tab", new TabComponents.GalleryTab());
-ko.components.register("notebook-viewer-tab", new TabComponents.NotebookViewerTab());
-
-// Database Tabs
-ko.components.register("database-settings-tab", new TabComponents.DatabaseSettingsTab());
-ko.components.register("database-settings-tab-v2", new TabComponents.SettingsTabV2());
+[
+  DocumentsTab,
+  MongoDocumentsTab,
+  StoredProcedureTab,
+  TriggerTab,
+  UserDefinedFunctionTab,
+  SettingsTabV2,
+  QueryTab,
+  QueryTablesTab,
+  GraphTab,
+  MongoShellTab,
+  ConflictsTab,
+  NotebookTabV2,
+  TerminalTab,
+  GalleryTab,
+  NotebookViewerTab,
+  DatabaseSettingsTab,
+  DatabaseSettingsTabV2,
+].forEach(({ component: { name, template } }) => ko.components.register(name, { template }));
 
 // Panes
 ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());

src/Explorer/Tabs/ConflictsTab.ts

@@ -26,8 +26,10 @@ import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
 import { updateDocument } from "../../Common/dataAccess/updateDocument";
 import { deleteConflict } from "../../Common/dataAccess/deleteConflict";
 import { queryConflicts } from "../../Common/dataAccess/queryConflicts";
+import template from "./ConflictsTab.html";
 
 export default class ConflictsTab extends TabsBase {
+  public static readonly component = { name: "conflicts-tab", template };
   public selectedConflictId: ko.Observable<ConflictId>;
   public selectedConflictContent: ViewModels.Editable<string>;
   public selectedConflictCurrent: ViewModels.Editable<string>;

src/Explorer/Tabs/DatabaseSettingsTab.ts

@@ -17,6 +17,7 @@ import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
 import * as PricingUtils from "../../Utils/PricingUtils";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../Explorer";
+import template from "./DatabaseSettingsTab.html";
 import TabsBase from "./TabsBase";
 
 const updateThroughputBeyondLimitWarningMessage: string = `
@@ -44,6 +45,7 @@ const throughputApplyLongDelayMessage = (isAutoscale: boolean, throughput: numbe
   Database: ${databaseName}, ${currentThroughput(isAutoscale, throughput)}`;
 
 export default class DatabaseSettingsTab extends TabsBase implements ViewModels.WaitsForTemplate {
+  public static readonly component = { name: "database-settings-tab", template };
   // editables
   public isAutoPilotSelected: ViewModels.Editable<boolean>;
   public throughput: ViewModels.Editable<number>;

src/Explorer/Tabs/DocumentsTab.ts

@@ -37,8 +37,10 @@ import { readDocument } from "../../Common/dataAccess/readDocument";
 import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
 import { updateDocument } from "../../Common/dataAccess/updateDocument";
 import { createDocument } from "../../Common/dataAccess/createDocument";
+import template from "./DocumentsTab.html";
 
 export default class DocumentsTab extends TabsBase {
+  public static readonly component = { name: "documents-tab", template };
   public selectedDocumentId: ko.Observable<DocumentId>;
   public selectedDocumentContent: ViewModels.Editable<string>;
   public initialDocumentContent: ko.Observable<string>;

src/Explorer/Tabs/GalleryTab.tsx

@@ -6,6 +6,7 @@ import TabsBase from "./TabsBase";
 import Explorer from "../Explorer";
 import { DatabaseAccount } from "../../Contracts/DataModels";
 import { JunoClient, IGalleryItem } from "../../Juno/JunoClient";
+import template from "./GalleryTab.html";
 
 interface GalleryTabOptions extends ViewModels.TabOptions {
   account: DatabaseAccount;
@@ -21,6 +22,7 @@ interface GalleryTabOptions extends ViewModels.TabOptions {
  * Notebook gallery tab
  */
 export default class GalleryTab extends TabsBase {
+  public static readonly component = { name: "gallery-tab", template };
   private container: Explorer;
   private galleryAndNotebookViewerComponentProps: GalleryAndNotebookViewerComponentProps;
   public galleryAndNotebookViewerComponentAdapter: GalleryAndNotebookViewerComponentAdapter;

src/Explorer/Tabs/GraphTab.ts

@@ -10,6 +10,7 @@ import GraphStylingPane from "../Panes/GraphStylingPane";
 import NewVertexPane from "../Panes/NewVertexPane";
 import { DatabaseAccount } from "../../Contracts/DataModels";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
+import template from "./GraphTab.html";
 
 export interface GraphIconMap {
   [key: string]: { data: string; format: string };
@@ -36,6 +37,7 @@ interface GraphTabOptions extends ViewModels.TabOptions {
 }
 
 export default class GraphTab extends TabsBase {
+  public static readonly component = { name: "graph-tab", template };
   // Graph default configuration
   public static readonly DEFAULT_NODE_CAPTION = "id";
   private static readonly LINK_COLOR = "#aaa";

src/Explorer/Tabs/MongoDocumentsTab.ts

@@ -20,8 +20,10 @@ import { extractPartitionKey } from "@azure/cosmos";
 import * as Logger from "../../Common/Logger";
 import { PartitionKeyDefinition } from "@azure/cosmos";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import template from "./MongoDocumentsTab.html";
 
 export default class MongoDocumentsTab extends DocumentsTab {
+  public static readonly component = { name: "mongo-documents-tab", template };
   public collection: ViewModels.Collection;
   private continuationToken: string;
 

src/Explorer/Tabs/MongoQueryTab.ts

@@ -5,8 +5,10 @@ import QueryTab from "./QueryTab";
 import * as HeadersUtility from "../../Common/HeadersUtility";
 import { queryIterator } from "../../Common/MongoProxyClient";
 import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
+import template from "./MongoQueryTab.html";
 
 export default class MongoQueryTab extends QueryTab {
+  public static readonly component = { name: "mongo-query-tab", template };
   public collection: ViewModels.Collection;
 
   constructor(options: ViewModels.QueryTabOptions) {

src/Explorer/Tabs/MongoShellTab.ts

@@ -9,10 +9,12 @@ import { userContext } from "../../UserContext";
 import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
+import template from "./MongoShellTab.html";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import TabsBase from "./TabsBase";
 
 export default class MongoShellTab extends TabsBase {
+  public static readonly component = { name: "mongo-shell-tab", template };
   public url: ko.Computed<string>;
   private _container: Explorer;
   private _runtimeEndpoint: string;

src/Explorer/Tabs/NotebookV2Tab.ts

@@ -33,6 +33,7 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 import { toJS, stringifyNotebook } from "@nteract/commutable";
 import { appInsights } from "../../Shared/appInsights";
 import { userContext } from "../../UserContext";
+import template from "./NotebookV2Tab.html";
 
 export interface NotebookTabOptions extends ViewModels.TabOptions {
   account: DataModels.DatabaseAccount;
@@ -42,6 +43,7 @@ export interface NotebookTabOptions extends ViewModels.TabOptions {
 }
 
 export default class NotebookTabV2 extends TabsBase {
+  public static readonly component = { name: "notebookv2-tab", template };
   private static clientManager: NotebookClientV2;
   private container: Explorer;
   public notebookPath: ko.Observable<string>;

src/Explorer/Tabs/NotebookViewerTab.tsx

@@ -10,6 +10,7 @@ import TabsBase from "./TabsBase";
 import Explorer from "../Explorer";
 import { DatabaseAccount } from "../../Contracts/DataModels";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
+import template from "./NotebookViewerTab.html";
 
 interface NotebookViewerTabOptions extends ViewModels.TabOptions {
   account: DatabaseAccount;
@@ -38,6 +39,7 @@ class NotebookViewerComponentAdapter implements ReactAdapter {
 }
 
 export default class NotebookViewerTab extends TabsBase {
+  public static readonly component = { name: "notebook-viewer-tab", template };
   private container: Explorer;
   public notebookUrl: string;
 

src/Explorer/Tabs/QueryTab.ts

@@ -17,6 +17,7 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
 import { queryDocumentsPage } from "../../Common/dataAccess/queryDocumentsPage";
+import template from "./QueryTab.html";
 
 enum ToggleState {
   Result,
@@ -24,6 +25,7 @@ enum ToggleState {
 }
 
 export default class QueryTab extends TabsBase implements ViewModels.WaitsForTemplate {
+  public static readonly component = { name: "query-tab", template };
   public queryEditorId: string;
   public executeQueryButton: ViewModels.Button;
   public fetchNextPageButton: ViewModels.Button;

src/Explorer/Tabs/QueryTablesTab.ts

@@ -15,9 +15,11 @@ import EditEntityIcon from "../../../images/Edit-entity.svg";
 import DeleteEntitiesIcon from "../../../images/DeleteEntities.svg";
 import Explorer from "../Explorer";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
+import template from "./QueryTablesTab.html";
 
 // Will act as table explorer class
 export default class QueryTablesTab extends TabsBase {
+  public static readonly component = { name: "tables-query-tab", template };
   public collection: ViewModels.Collection;
   public tableEntityListViewModel = ko.observable<TableEntityListViewModel>();
   public queryViewModel = ko.observable<QueryViewModel>();

src/Explorer/Tabs/SettingsTabV2.tsx

@@ -9,8 +9,10 @@ import * as Constants from "../../Common/Constants";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import template from "./SettingsTabV2.html";
 
 export class SettingsTabV2 extends TabsBase {
+  public static readonly component = { name: "collection-settings-tab-v2", template };
   public settingsComponentAdapter: SettingsComponentAdapter;
 
   constructor(options: ViewModels.TabOptions) {
@@ -87,6 +89,7 @@ export class CollectionSettingsTabV2 extends SettingsTabV2 {
 }
 
 export class DatabaseSettingsTabV2 extends SettingsTabV2 {
+  public static readonly component = { name: "database-settings-tab-v2", template };
   private notificationRead: ko.Observable<boolean>;
   private notification: DataModels.Notification;
 

src/Explorer/Tabs/StoredProcedureTab.ts

@@ -14,6 +14,7 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 import StoredProcedure from "../Tree/StoredProcedure";
 import ScriptTabBase from "./ScriptTabBase";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import template from "./StoredProcedureTab.html";
 
 enum ToggleState {
   Result = "result",
@@ -21,6 +22,7 @@ enum ToggleState {
 }
 
 export default class StoredProcedureTab extends ScriptTabBase {
+  public static readonly component = { name: "stored-procedure-tab", template };
   public collection: ViewModels.Collection;
   public node: StoredProcedure;
   public executeResultsEditorId: string;

src/Explorer/Tabs/TabComponents.ts

@@ -1,186 +0,0 @@
-import DocumentsTabTemplate from "./DocumentsTab.html";
-import ConflictsTabTemplate from "./ConflictsTab.html";
-import GraphTabTemplate from "./GraphTab.html";
-import NotebookV2TabTemplate from "./NotebookV2Tab.html";
-import TerminalTabTemplate from "./TerminalTab.html";
-import MongoDocumentsTabTemplate from "./MongoDocumentsTab.html";
-import MongoQueryTabTemplate from "./MongoQueryTab.html";
-import MongoShellTabTemplate from "./MongoShellTab.html";
-import QueryTabTemplate from "./QueryTab.html";
-import QueryTablesTabTemplate from "./QueryTablesTab.html";
-import SettingsTabV2Template from "./SettingsTabV2.html";
-import DatabaseSettingsTabTemplate from "./DatabaseSettingsTab.html";
-import StoredProcedureTabTemplate from "./StoredProcedureTab.html";
-import TriggerTabTemplate from "./TriggerTab.html";
-import UserDefinedFunctionTabTemplate from "./UserDefinedFunctionTab.html";
-import GalleryTabTemplate from "./GalleryTab.html";
-import NotebookViewerTabTemplate from "./NotebookViewerTab.html";
-import TabsManagerTemplate from "./TabsManager.html";
-
-export class TabComponent {
-  constructor(data: any) {
-    return data.data;
-  }
-}
-
-export class TabsManager {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: TabsManagerTemplate,
-    };
-  }
-}
-
-export class DocumentsTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: DocumentsTabTemplate,
-    };
-  }
-}
-
-export class ConflictsTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: ConflictsTabTemplate,
-    };
-  }
-}
-
-export class GraphTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: GraphTabTemplate,
-    };
-  }
-}
-
-export class NotebookV2Tab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: NotebookV2TabTemplate,
-    };
-  }
-}
-
-export class TerminalTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: TerminalTabTemplate,
-    };
-  }
-}
-
-export class MongoDocumentsTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: MongoDocumentsTabTemplate,
-    };
-  }
-}
-
-export class MongoQueryTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: MongoQueryTabTemplate,
-    };
-  }
-}
-
-export class MongoShellTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: MongoShellTabTemplate,
-    };
-  }
-}
-
-export class QueryTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: QueryTabTemplate,
-    };
-  }
-}
-
-export class QueryTablesTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: QueryTablesTabTemplate,
-    };
-  }
-}
-
-export class SettingsTabV2 {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: SettingsTabV2Template,
-    };
-  }
-}
-
-export class DatabaseSettingsTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: DatabaseSettingsTabTemplate,
-    };
-  }
-}
-
-export class StoredProcedureTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: StoredProcedureTabTemplate,
-    };
-  }
-}
-
-export class TriggerTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: TriggerTabTemplate,
-    };
-  }
-}
-
-export class UserDefinedFunctionTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: UserDefinedFunctionTabTemplate,
-    };
-  }
-}
-
-export class GalleryTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: GalleryTabTemplate,
-    };
-  }
-}
-
-export class NotebookViewerTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: NotebookViewerTabTemplate,
-    };
-  }
-}

src/Explorer/Tabs/TabsBase.ts

@@ -13,6 +13,7 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 
 // TODO: Use specific actions for logging telemetry data
 export default class TabsBase extends WaitsForTemplateViewModel {
+  public static readonly component = { name: "tab", template: "" };
   public closeTabButton: ViewModels.Button;
   public node: ViewModels.TreeNode;
   public collection: ViewModels.CollectionBase;

src/Explorer/Tabs/TabsManager.html

@@ -76,79 +76,11 @@
 
   <!-- Tabs Panes -- Start -->
   <div class="tabPanesContainer">
-    <!-- ko foreach: openedTabs -->
-    <div class="tabs-container" data-bind="visible: $data.isActive">
-      <!-- ko if: $data.tabKind === 0 -->
-      <documents-tab params="{data: $data}"></documents-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 1 -->
-      <settings-tab params="{data: $data}"></settings-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 2 -->
-      <stored-procedure-tab params="{data: $data}"></stored-procedure-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 3 -->
-      <user-defined-function-tab params="{data: $data}"></user-defined-function-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 4 -->
-      <trigger-tab params="{data: $data}"></trigger-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 5 -->
-      <query-tab params="{data: $data}"></query-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 6 -->
-      <graph-tab params="{data: $data}"></graph-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 9 -->
-      <tables-query-tab class="flexContainer" params="{data: $data}"></tables-query-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 10 -->
-      <mongo-shell-tab params="{data: $data}"></mongo-shell-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 11 -->
-      <database-settings-tab params="{data: $data}"></database-settings-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 12 -->
-      <conflicts-tab params="{data: $data}"></conflicts-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 14 -->
-      <terminal-tab params="{data: $data}"></terminal-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 15 -->
-      <notebookv2-tab params="{data: $data}"></notebookv2-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 16 -->
-      <spark-master-tab params="{data: $data}"></spark-master-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 17 -->
-      <gallery-tab params="{data: $data}"></gallery-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 18 -->
-      <notebook-viewer-tab params="{data: $data}"></notebook-viewer-tab>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 20 -->
-      <collection-settings-tab-v2 params="{data: $data}"></collection-settings-tab-v2>
-      <!-- /ko -->
-
-      <!-- ko if: $data.tabKind === 21 -->
-      <database-settings-tab-v2 params="{data: $data}"></database-settings-tab-v2>
-      <!-- /ko -->
+    <!-- ko if: activeTab && activeTab() -->
+    <div class="tabs-container" data-bind="visible: activeTab().isActive">
+      <span
+        data-bind="class: activeTab().constructor.component.name, component: { name: activeTab().constructor.component.name, params: activeTab }"
+      ></span>
     </div>
     <!-- /ko -->
   </div>

src/Explorer/Tabs/TabsManager.ts

@@ -1,6 +1,5 @@
 import * as ko from "knockout";
 import * as ViewModels from "../../Contracts/ViewModels";
-import TabsManagerTemplate from "./TabsManager.html";
 import Explorer from "../Explorer";
 import TabsBase from "./TabsBase";
 
@@ -82,14 +81,3 @@ export class TabsManager {
     return this.activeTab() && this.activeTab().tabKind === tabKind;
   }
 }
-
-function TabsManagerWrapperViewModel(params: { data: TabsManager }) {
-  return params.data;
-}
-
-export function TabsManagerKOComponent(): unknown {
-  return {
-    viewModel: TabsManagerWrapperViewModel,
-    template: TabsManagerTemplate,
-  };
-}

src/Explorer/Tabs/TerminalTab.tsx

@@ -7,6 +7,7 @@ import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
 import { NotebookTerminalComponent } from "../Controls/Notebook/NotebookTerminalComponent";
 import Explorer from "../Explorer";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
+import template from "./TerminalTab.html";
 
 export interface TerminalTabOptions extends ViewModels.TabOptions {
   account: DataModels.DatabaseAccount;
@@ -38,6 +39,7 @@ class NotebookTerminalComponentAdapter implements ReactAdapter {
 }
 
 export default class TerminalTab extends TabsBase {
+  public static readonly component = { name: "terminal-tab", template };
   private container: Explorer;
   private notebookTerminalComponentAdapter: NotebookTerminalComponentAdapter;
 

src/Explorer/Tabs/TriggerTab.ts

@@ -9,8 +9,10 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import Trigger from "../Tree/Trigger";
 import ScriptTabBase from "./ScriptTabBase";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import template from "./TriggerTab.html";
 
 export default class TriggerTab extends ScriptTabBase {
+  public static readonly component = { name: "trigger-tab", template };
   public collection: ViewModels.Collection;
   public node: Trigger;
   public triggerType: ViewModels.Editable<string>;

src/Explorer/Tabs/UserDefinedFunctionTab.ts

@@ -8,8 +8,10 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import UserDefinedFunction from "../Tree/UserDefinedFunction";
 import ScriptTabBase from "./ScriptTabBase";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import template from "./UserDefinedFunctionTab.html";
 
 export default class UserDefinedFunctionTab extends ScriptTabBase {
+  public static readonly component = { name: "user-defined-function-tab", template };
   public collection: ViewModels.Collection;
   public node: UserDefinedFunction;
   constructor(options: ViewModels.ScriptTabOption) {

src/Main.tsx

@@ -216,10 +216,7 @@ const App: React.FunctionComponent = () => {
               <SplashScreen explorer={explorer} />
             </form>
           </div>
-          <div
-            className="tabsManagerContainer"
-            data-bind='component: { name: "tabs-manager", params: {data: tabsManager} }'
-          />
+          <div className="tabsManagerContainer" data-bind='component: { name: "tabs-manager", params: tabsManager }' />
         </div>
         {/* Collections Tree and Tabs - End */}
         <div

tsconfig.strict.json

@@ -66,7 +66,6 @@
     "./src/Explorer/Tables/QueryBuilder/DateTimeUtilities.ts",
     "./src/Explorer/Tables/DataTable/CacheBase.ts",
     "./src/Explorer/Tables/Entities.ts",
-    "./src/Explorer/Tabs/TabComponents.ts",
     "./src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts",
     "./src/Explorer/Notebook/NotebookContentClient.ts",
     "./src/GitHub/GitHubConnector.ts",