Remove Tabs from ComponentRegisterer (#713)

Now that Tabs are being rendered via Tabs.tsx the knockout component names are not needed either.

src/Explorer/ComponentRegisterer.test.ts

@@ -20,51 +20,6 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("json-editor")).toBe(true);
   });
 
-  it("should register documents-tab component", () => {
-    expect(ko.components.isRegistered("documents-tab")).toBe(true);
-  });
-
-  it("should register stored-procedure-tab component", () => {
-    expect(ko.components.isRegistered("stored-procedure-tab")).toBe(true);
-  });
-
-  it("should register trigger-tab component", () => {
-    expect(ko.components.isRegistered("trigger-tab")).toBe(true);
-  });
-
-  it("should register user-defined-function-tab component", () => {
-    expect(ko.components.isRegistered("user-defined-function-tab")).toBe(true);
-  });
-
-  it("should register settings-tab-v2 component", () => {
-    expect(ko.components.isRegistered("database-settings-tab-v2")).toBe(true);
-    expect(ko.components.isRegistered("collection-settings-tab-v2")).toBe(true);
-  });
-
-  it("should register query-tab component", () => {
-    expect(ko.components.isRegistered("query-tab")).toBe(true);
-  });
-
-  it("should register tables-query-tab component", () => {
-    expect(ko.components.isRegistered("tables-query-tab")).toBe(true);
-  });
-
-  it("should register graph-tab component", () => {
-    expect(ko.components.isRegistered("graph-tab")).toBe(true);
-  });
-
-  it("should register notebookv2-tab component", () => {
-    expect(ko.components.isRegistered("notebookv2-tab")).toBe(true);
-  });
-
-  it("should register terminal-tab component", () => {
-    expect(ko.components.isRegistered("terminal-tab")).toBe(true);
-  });
-
-  it("should register mongo-shell-tab component", () => {
-    expect(ko.components.isRegistered("mongo-shell-tab")).toBe(true);
-  });
-
   it("should registeradd-collection-pane component", () => {
     expect(ko.components.isRegistered("add-collection-pane")).toBe(true);
   });

src/Explorer/ComponentRegisterer.ts

@@ -8,21 +8,6 @@ import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
 import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
 import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleComponent";
 import * as PaneComponents from "./Panes/PaneComponents";
-import ConflictsTab from "./Tabs/ConflictsTab";
-import DocumentsTab from "./Tabs/DocumentsTab";
-import GalleryTab from "./Tabs/GalleryTab";
-import GraphTab from "./Tabs/GraphTab";
-import MongoShellTab from "./Tabs/MongoShellTab";
-import NotebookTabV2 from "./Tabs/NotebookV2Tab";
-import NotebookViewerTab from "./Tabs/NotebookViewerTab";
-import QueryTab from "./Tabs/QueryTab";
-import QueryTablesTab from "./Tabs/QueryTablesTab";
-import SchemaAnalyzerTab from "./Tabs/SchemaAnalyzerTab";
-import { DatabaseSettingsTabV2, SettingsTabV2 } from "./Tabs/SettingsTabV2";
-import StoredProcedureTab from "./Tabs/StoredProcedureTab";
-import TerminalTab from "./Tabs/TerminalTab";
-import TriggerTab from "./Tabs/TriggerTab";
-import UserDefinedFunctionTab from "./Tabs/UserDefinedFunctionTab";
 
 ko.components.register("input-typeahead", new InputTypeaheadComponent());
 ko.components.register("error-display", new ErrorDisplayComponent());
@@ -33,26 +18,6 @@ ko.components.register("diff-editor", new DiffEditorComponent());
 ko.components.register("dynamic-list", DynamicListComponent);
 ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);
 
-// Collection Tabs
-[
-  DocumentsTab,
-  StoredProcedureTab,
-  TriggerTab,
-  UserDefinedFunctionTab,
-  SettingsTabV2,
-  QueryTab,
-  QueryTablesTab,
-  GraphTab,
-  MongoShellTab,
-  ConflictsTab,
-  NotebookTabV2,
-  TerminalTab,
-  GalleryTab,
-  NotebookViewerTab,
-  DatabaseSettingsTabV2,
-  SchemaAnalyzerTab,
-].forEach(({ component: { name, template } }) => ko.components.register(name, { template }));
-
 // Panes
 ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
 ko.components.register("add-collection-pane", new PaneComponents.AddCollectionPaneComponent());

src/Explorer/Tabs/ConflictsTab.ts

@@ -1,35 +1,34 @@
+import { ConflictDefinition, FeedOptions, QueryIterator, Resource } from "@azure/cosmos";
 import * as ko from "knockout";
 import Q from "q";
+import DeleteIcon from "../../../images/delete.svg";
+import DiscardIcon from "../../../images/discard.svg";
+import SaveIcon from "../../../images/save-cosmos.svg";
 import * as Constants from "../../Common/Constants";
+import { DocumentsGridMetrics, KeyCodes } from "../../Common/Constants";
+import { createDocument } from "../../Common/dataAccess/createDocument";
+import { deleteConflict } from "../../Common/dataAccess/deleteConflict";
+import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
+import { queryConflicts } from "../../Common/dataAccess/queryConflicts";
+import { updateDocument } from "../../Common/dataAccess/updateDocument";
+import editable from "../../Common/EditableUtility";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import * as HeadersUtility from "../../Common/HeadersUtility";
+import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
+import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import { AccessibleVerticalList } from "../Tree/AccessibleVerticalList";
-import { KeyCodes } from "../../Common/Constants";
-import ConflictId from "../Tree/ConflictId";
-import editable from "../../Common/EditableUtility";
-import * as HeadersUtility from "../../Common/HeadersUtility";
-import TabsBase from "./TabsBase";
-import { DocumentsGridMetrics } from "../../Common/Constants";
-import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import SaveIcon from "../../../images/save-cosmos.svg";
-import DiscardIcon from "../../../images/discard.svg";
-import DeleteIcon from "../../../images/delete.svg";
-import { QueryIterator, Resource, ConflictDefinition, FeedOptions } from "@azure/cosmos";
-import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
-import Explorer from "../Explorer";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import Explorer from "../Explorer";
-import { createDocument } from "../../Common/dataAccess/createDocument";
+import { AccessibleVerticalList } from "../Tree/AccessibleVerticalList";
-import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
+import ConflictId from "../Tree/ConflictId";
-import { updateDocument } from "../../Common/dataAccess/updateDocument";
-import { deleteConflict } from "../../Common/dataAccess/deleteConflict";
-import { queryConflicts } from "../../Common/dataAccess/queryConflicts";
 import template from "./ConflictsTab.html";
+import TabsBase from "./TabsBase";
 
 export default class ConflictsTab extends TabsBase {
-  public static readonly component = { name: "conflicts-tab", template };
+  public readonly html = template;
   public selectedConflictId: ko.Observable<ConflictId>;
   public selectedConflictContent: ViewModels.Editable<string>;
   public selectedConflictCurrent: ViewModels.Editable<string>;

src/Explorer/Tabs/DocumentsTab.ts

@@ -31,7 +31,7 @@ import template from "./DocumentsTab.html";
 import TabsBase from "./TabsBase";
 
 export default class DocumentsTab extends TabsBase {
-  public static readonly component = { name: "documents-tab", template };
+  public readonly html = template;
   public selectedDocumentId: ko.Observable<DocumentId>;
   public selectedDocumentContent: ViewModels.Editable<string>;
   public initialDocumentContent: ko.Observable<string>;

src/Explorer/Tabs/GalleryTab.html

@@ -1 +0,0 @@
-<div style="height: 100%" data-bind="react:galleryAndNotebookViewerComponentAdapter, setTemplateReady: true"></div>

src/Explorer/Tabs/GalleryTab.tsx

@@ -1,12 +1,11 @@
+import { DatabaseAccount } from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
+import { IGalleryItem, JunoClient } from "../../Juno/JunoClient";
 import { GalleryAndNotebookViewerComponentProps } from "../Controls/NotebookGallery/GalleryAndNotebookViewerComponent";
 import { GalleryAndNotebookViewerComponentAdapter } from "../Controls/NotebookGallery/GalleryAndNotebookViewerComponentAdapter";
 import { GalleryTab as GalleryViewerTab, SortBy } from "../Controls/NotebookGallery/GalleryViewerComponent";
-import TabsBase from "./TabsBase";
 import Explorer from "../Explorer";
-import { DatabaseAccount } from "../../Contracts/DataModels";
+import TabsBase from "./TabsBase";
-import { JunoClient, IGalleryItem } from "../../Juno/JunoClient";
-import template from "./GalleryTab.html";
 
 interface GalleryTabOptions extends ViewModels.TabOptions {
   account: DatabaseAccount;
@@ -22,7 +21,7 @@ interface GalleryTabOptions extends ViewModels.TabOptions {
  * Notebook gallery tab
  */
 export default class GalleryTab extends TabsBase {
-  public static readonly component = { name: "gallery-tab", template };
+  public readonly html = '<div style="height: 100%" data-bind="react:galleryAndNotebookViewerComponentAdapter"></div>';
   private container: Explorer;
   private galleryAndNotebookViewerComponentProps: GalleryAndNotebookViewerComponentProps;
   public galleryAndNotebookViewerComponentAdapter: GalleryAndNotebookViewerComponentAdapter;

src/Explorer/Tabs/GraphTab.html

@@ -1 +0,0 @@
-<div class="graphExplorerContainer" role="tabpanel" data-bind="react:graphExplorerAdapter, attr:{ id: tabId }"></div>

src/Explorer/Tabs/GraphTab.tsx

@@ -10,7 +10,6 @@ import { GraphExplorerAdapter } from "../Graph/GraphExplorerComponent/GraphExplo
 import { ContextualPaneBase } from "../Panes/ContextualPaneBase";
 import GraphStylingPane from "../Panes/GraphStylingPane";
 import { NewVertexPanel } from "../Panes/NewVertexPanel/NewVertexPanel";
-import template from "./GraphTab.html";
 import TabsBase from "./TabsBase";
 export interface GraphIconMap {
   [key: string]: { data: string; format: string };
@@ -37,7 +36,8 @@ interface GraphTabOptions extends ViewModels.TabOptions {
 }
 
 export default class GraphTab extends TabsBase {
-  public static readonly component = { name: "graph-tab", template };
+  public readonly html =
+    '<div class="graphExplorerContainer" role="tabpanel" data-bind="react:graphExplorerAdapter, attr: {id: tabId}"></div>';
   // Graph default configuration
   public static readonly DEFAULT_NODE_CAPTION = "id";
   private static readonly LINK_COLOR = "#aaa";

src/Explorer/Tabs/MongoShellTab.ts

@@ -13,7 +13,7 @@ import template from "./MongoShellTab.html";
 import TabsBase from "./TabsBase";
 
 export default class MongoShellTab extends TabsBase {
-  public static readonly component = { name: "mongo-shell-tab", template };
+  public readonly html = template;
   public url: ko.Computed<string>;
   private _container: Explorer;
   private _runtimeEndpoint: string;

src/Explorer/Tabs/NotebookV2Tab.html

@@ -1 +0,0 @@
-<div data-bind="react:notebookComponentAdapter" style="height: 100%"></div>

src/Explorer/Tabs/NotebookV2Tab.ts

@@ -27,14 +27,13 @@ import { KernelSpecsDisplay } from "../Notebook/NotebookClientV2";
 import { NotebookComponentAdapter } from "../Notebook/NotebookComponent/NotebookComponentAdapter";
 import { NotebookContentItem } from "../Notebook/NotebookContentItem";
 import NotebookTabBase, { NotebookTabBaseOptions } from "./NotebookTabBase";
-import template from "./NotebookV2Tab.html";
 
 export interface NotebookTabOptions extends NotebookTabBaseOptions {
   notebookContentItem: NotebookContentItem;
 }
 
 export default class NotebookTabV2 extends NotebookTabBase {
-  public static readonly component = { name: "notebookv2-tab", template };
+  public readonly html = '<div data-bind="react:notebookComponentAdapter" style="height: 100%"></div>';
   public notebookPath: ko.Observable<string>;
   private selectedSparkPool: ko.Observable<string>;
   private notebookComponentAdapter: NotebookComponentAdapter;

src/Explorer/Tabs/NotebookViewerTab.html

@@ -1 +0,0 @@
-<div style="height: 100%" data-bind="react:notebookViewerComponentAdapter, setTemplateReady: true"></div>

src/Explorer/Tabs/NotebookViewerTab.tsx

@@ -1,16 +1,15 @@
 import * as ko from "knockout";
 import * as React from "react";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
+import { DatabaseAccount } from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
+import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import {
   NotebookViewerComponent,
   NotebookViewerComponentProps,
 } from "../Controls/NotebookViewer/NotebookViewerComponent";
-import TabsBase from "./TabsBase";
 import Explorer from "../Explorer";
-import { DatabaseAccount } from "../../Contracts/DataModels";
+import TabsBase from "./TabsBase";
-import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import template from "./NotebookViewerTab.html";
 
 interface NotebookViewerTabOptions extends ViewModels.TabOptions {
   account: DatabaseAccount;
@@ -39,7 +38,7 @@ class NotebookViewerComponentAdapter implements ReactAdapter {
 }
 
 export default class NotebookViewerTab extends TabsBase {
-  public static readonly component = { name: "notebook-viewer-tab", template };
+  public readonly html = '<div style="height: 100%" data-bind="react:notebookViewerComponentAdapter"></div>';
   private container: Explorer;
   public notebookUrl: string;
 

src/Explorer/Tabs/QueryTab.html

@@ -1,11 +1,4 @@
-<div
+<div class="tab-pane" data-bind="attr:{id: tabId}" role="tabpanel">
-  class="tab-pane"
-  data-bind="setTemplateReady: true,
-    attr:{
-        id: tabId
-    }"
-  role="tabpanel"
->
   <div class="tabPaneContentContainer">
     <div class="mongoQueryHelper" data-bind="visible: isPreferredApiMongoDB && sqlQueryEditorContent().length === 0">
       Start by writing a Mongo query, for example: <strong>{'id':'foo'}</strong> or <strong>{ }</strong> to get all the

src/Explorer/Tabs/QueryTab.ts

@@ -25,7 +25,7 @@ enum ToggleState {
 }
 
 export default class QueryTab extends TabsBase implements ViewModels.WaitsForTemplate {
-  public static readonly component = { name: "query-tab", template };
+  public readonly html = template;
   public queryEditorId: string;
   public executeQueryButton: ViewModels.Button;
   public fetchNextPageButton: ViewModels.Button;

src/Explorer/Tabs/QueryTablesTab.html

@@ -1,11 +1,4 @@
-<div
+<div class="tab-pane tableContainer" data-bind="attr:{id: tabId}" role="tabpanel">
-  class="tab-pane tableContainer"
-  data-bind="
-                            attr:{
-                                id: tabId
-                            }"
-  role="tabpanel"
->
   <!-- Tables Query Tab Query Builder - Start-->
   <div
     class="query-builder"

src/Explorer/Tabs/QueryTablesTab.ts

@@ -19,7 +19,7 @@ import TabsBase from "./TabsBase";
 
 // Will act as table explorer class
 export default class QueryTablesTab extends TabsBase {
-  public static readonly component = { name: "tables-query-tab", template };
+  public readonly html = template;
   public collection: ViewModels.Collection;
   public tableEntityListViewModel = ko.observable<TableEntityListViewModel>();
   public queryViewModel = ko.observable<QueryViewModel>();

src/Explorer/Tabs/SchemaAnalyzerTab.html

@@ -1 +0,0 @@
-<div data-bind="react:schemaAnalyzerComponentAdapter" style="height: 100%"></div>

src/Explorer/Tabs/SchemaAnalyzerTab.ts

@@ -1,10 +1,8 @@
 import { SchemaAnalyzerComponentAdapter } from "../Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponentAdapter";
 import NotebookTabBase, { NotebookTabBaseOptions } from "./NotebookTabBase";
-import template from "./SchemaAnalyzerTab.html";
 
 export default class SchemaAnalyzerTab extends NotebookTabBase {
-  public static readonly component = { name: "schema-analyzer-tab", template };
+  public readonly html = '<div data-bind="react:schemaAnalyzerComponentAdapter" style="height: 100%"></div>';
-
   private schemaAnalyzerComponentAdapter: SchemaAnalyzerComponentAdapter;
 
   constructor(options: NotebookTabBaseOptions) {

src/Explorer/Tabs/SettingsTabV2.html

@@ -1 +0,0 @@
-<div style="height: 100%" data-bind="react:settingsComponentAdapter"></div>

src/Explorer/Tabs/SettingsTabV2.tsx

@@ -1,18 +1,17 @@
-import * as ViewModels from "../../Contracts/ViewModels";
-import * as DataModels from "../../Contracts/DataModels";
-import TabsBase from "./TabsBase";
-import { SettingsComponentAdapter } from "../Controls/Settings/SettingsComponentAdapter";
-import { SettingsComponentProps } from "../Controls/Settings/SettingsComponent";
-import { traceFailure } from "../../Shared/Telemetry/TelemetryProcessor";
 import ko from "knockout";
 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";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { Action } from "../../Shared/Telemetry/TelemetryConstants";
+import { traceFailure } from "../../Shared/Telemetry/TelemetryProcessor";
+import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
+import { SettingsComponentProps } from "../Controls/Settings/SettingsComponent";
+import { SettingsComponentAdapter } from "../Controls/Settings/SettingsComponentAdapter";
+import TabsBase from "./TabsBase";
 
 export class SettingsTabV2 extends TabsBase {
-  public static readonly component = { name: "collection-settings-tab-v2", template };
+  public readonly html = '<div style="height: 100%" data-bind="react:settingsComponentAdapter"></div>';
   public settingsComponentAdapter: SettingsComponentAdapter;
 
   constructor(options: ViewModels.TabOptions) {
@@ -89,7 +88,6 @@ 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

@@ -22,7 +22,7 @@ enum ToggleState {
 }
 
 export default class StoredProcedureTab extends ScriptTabBase {
-  public static readonly component = { name: "stored-procedure-tab", template };
+  public readonly html = template;
   public collection: ViewModels.Collection;
   public node: StoredProcedure;
   public executeResultsEditorId: string;

src/Explorer/Tabs/Tabs.tsx

@@ -103,11 +103,8 @@ function TabPane({ tab, active }: { tab: Tab; active: boolean }) {
       ko.applyBindings(tab, element);
       const ctx = ko.contextFor(element).createChildContext(tab);
       ko.applyBindingsToDescendants(ctx, element);
-      return () => ko.cleanNode(element);
-    }
-
-    if ("render" in tab) {
       tab.isTemplateReady(true);
+      return () => ko.cleanNode(element);
     }
   }, [ref, tab]);
 
@@ -115,5 +112,5 @@ function TabPane({ tab, active }: { tab: Tab; active: boolean }) {
     return <div {...attrs}>{tab.render()}</div>;
   }
 
-  return <div {...attrs} ref={ref} data-bind="html: constructor.component.template" />;
+  return <div {...attrs} ref={ref} data-bind="html:html" />;
 }

src/Explorer/Tabs/TabsBase.ts

@@ -14,7 +14,6 @@ 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;
   public collection: ViewModels.CollectionBase;

src/Explorer/Tabs/TerminalTab.html

@@ -1 +0,0 @@
-<div style="height: 100%" data-bind="react:notebookTerminalComponentAdapter, setTemplateReady: true"></div>

src/Explorer/Tabs/TerminalTab.tsx

@@ -1,13 +1,12 @@
 import * as ko from "knockout";
-import * as ViewModels from "../../Contracts/ViewModels";
-import * as DataModels from "../../Contracts/DataModels";
-import TabsBase from "./TabsBase";
 import * as React from "react";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import { NotebookTerminalComponent } from "../Controls/Notebook/NotebookTerminalComponent";
 import Explorer from "../Explorer";
-import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
+import TabsBase from "./TabsBase";
-import template from "./TerminalTab.html";
 
 export interface TerminalTabOptions extends ViewModels.TabOptions {
   account: DataModels.DatabaseAccount;
@@ -39,7 +38,7 @@ class NotebookTerminalComponentAdapter implements ReactAdapter {
 }
 
 export default class TerminalTab extends TabsBase {
-  public static readonly component = { name: "terminal-tab", template };
+  public readonly html = '<div style="height: 100%" data-bind="react:notebookTerminalComponentAdapter"></div>  ';
   private container: Explorer;
   private notebookTerminalComponentAdapter: NotebookTerminalComponentAdapter;
 

src/Explorer/Tabs/TriggerTab.ts

@@ -3,16 +3,16 @@ import * as Constants from "../../Common/Constants";
 import { createTrigger } from "../../Common/dataAccess/createTrigger";
 import { updateTrigger } from "../../Common/dataAccess/updateTrigger";
 import editable from "../../Common/EditableUtility";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 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 readonly html = template;
   public collection: ViewModels.Collection;
   public node: Trigger;
   public triggerType: ViewModels.Editable<string>;

src/Explorer/Tabs/UserDefinedFunctionTab.ts

@@ -2,16 +2,16 @@ import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
 import * as Constants from "../../Common/Constants";
 import { createUserDefinedFunction } from "../../Common/dataAccess/createUserDefinedFunction";
 import { updateUserDefinedFunction } from "../../Common/dataAccess/updateUserDefinedFunction";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 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 readonly html = template;
   public collection: ViewModels.Collection;
   public node: UserDefinedFunction;
   constructor(options: ViewModels.ScriptTabOption) {