From b1aeab6b841defa09d42701d4c749784c7c2b617 Mon Sep 17 00:00:00 2001 From: Jordi Bunster Date: Mon, 22 Mar 2021 10:13:44 -0700 Subject: [PATCH] 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 | 3 +- less/documentDB.less | 2 +- src/Explorer/ComponentRegisterer.ts | 60 ++++--- src/Explorer/Tabs/ConflictsTab.ts | 2 + src/Explorer/Tabs/DatabaseSettingsTab.ts | 2 + src/Explorer/Tabs/DocumentsTab.ts | 2 + src/Explorer/Tabs/GalleryTab.tsx | 2 + src/Explorer/Tabs/GraphTab.ts | 2 + src/Explorer/Tabs/MongoDocumentsTab.ts | 2 + src/Explorer/Tabs/MongoQueryTab.ts | 2 + src/Explorer/Tabs/MongoShellTab.ts | 2 + src/Explorer/Tabs/NotebookV2Tab.ts | 2 + src/Explorer/Tabs/NotebookViewerTab.tsx | 2 + src/Explorer/Tabs/QueryTab.ts | 2 + src/Explorer/Tabs/QueryTablesTab.ts | 2 + src/Explorer/Tabs/SettingsTabV2.tsx | 3 + src/Explorer/Tabs/StoredProcedureTab.ts | 2 + src/Explorer/Tabs/TabComponents.ts | 186 -------------------- src/Explorer/Tabs/TabsBase.ts | 1 + src/Explorer/Tabs/TabsManager.html | 78 +------- src/Explorer/Tabs/TabsManager.ts | 12 -- src/Explorer/Tabs/TerminalTab.tsx | 2 + src/Explorer/Tabs/TriggerTab.ts | 2 + src/Explorer/Tabs/UserDefinedFunctionTab.ts | 2 + src/Main.tsx | 5 +- tsconfig.strict.json | 1 - 26 files changed, 83 insertions(+), 300 deletions(-) delete mode 100644 src/Explorer/Tabs/TabComponents.ts diff --git a/jest.config.js b/jest.config.js index ee381c3cc..ca967e8b5 100644 --- a/jest.config.js +++ b/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)$": "/mockModule", + "^.*[.](svg|png|gif|less|css)$": "/mockModule", + "@nteract/stateful-components/(.*)$": "/mockModule", "worker-loader": "/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", diff --git a/less/documentDB.less b/less/documentDB.less index 72ed44c00..97a7be384 100644 --- a/less/documentDB.less +++ b/less/documentDB.less @@ -718,7 +718,7 @@ execute-sproc-params-pane { } } -stored-procedure-tab { +.stored-procedure-tab { @ToggleHeight: 30px; @ToggleWidth: 180px; diff --git a/src/Explorer/ComponentRegisterer.ts b/src/Explorer/ComponentRegisterer.ts index b02c485e8..67c2777fa 100644 --- a/src/Explorer/ComponentRegisterer.ts +++ b/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()); diff --git a/src/Explorer/Tabs/ConflictsTab.ts b/src/Explorer/Tabs/ConflictsTab.ts index e7606ad91..a74b8e6d6 100644 --- a/src/Explorer/Tabs/ConflictsTab.ts +++ b/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; public selectedConflictContent: ViewModels.Editable; public selectedConflictCurrent: ViewModels.Editable; diff --git a/src/Explorer/Tabs/DatabaseSettingsTab.ts b/src/Explorer/Tabs/DatabaseSettingsTab.ts index 5cff0f36f..02f65c6e1 100644 --- a/src/Explorer/Tabs/DatabaseSettingsTab.ts +++ b/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; public throughput: ViewModels.Editable; diff --git a/src/Explorer/Tabs/DocumentsTab.ts b/src/Explorer/Tabs/DocumentsTab.ts index 530df00a7..e741bb514 100644 --- a/src/Explorer/Tabs/DocumentsTab.ts +++ b/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; public selectedDocumentContent: ViewModels.Editable; public initialDocumentContent: ko.Observable; diff --git a/src/Explorer/Tabs/GalleryTab.tsx b/src/Explorer/Tabs/GalleryTab.tsx index 5f80ba97a..927e8ba1c 100644 --- a/src/Explorer/Tabs/GalleryTab.tsx +++ b/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; diff --git a/src/Explorer/Tabs/GraphTab.ts b/src/Explorer/Tabs/GraphTab.ts index ba1e2f5ad..5dffc6bfa 100644 --- a/src/Explorer/Tabs/GraphTab.ts +++ b/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"; diff --git a/src/Explorer/Tabs/MongoDocumentsTab.ts b/src/Explorer/Tabs/MongoDocumentsTab.ts index 61fce5059..e72f0c2e3 100644 --- a/src/Explorer/Tabs/MongoDocumentsTab.ts +++ b/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; diff --git a/src/Explorer/Tabs/MongoQueryTab.ts b/src/Explorer/Tabs/MongoQueryTab.ts index 53ba3271e..fcf029759 100644 --- a/src/Explorer/Tabs/MongoQueryTab.ts +++ b/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) { diff --git a/src/Explorer/Tabs/MongoShellTab.ts b/src/Explorer/Tabs/MongoShellTab.ts index c78d7561a..ec39df574 100644 --- a/src/Explorer/Tabs/MongoShellTab.ts +++ b/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; private _container: Explorer; private _runtimeEndpoint: string; diff --git a/src/Explorer/Tabs/NotebookV2Tab.ts b/src/Explorer/Tabs/NotebookV2Tab.ts index 02dd85d9f..b07b10a40 100644 --- a/src/Explorer/Tabs/NotebookV2Tab.ts +++ b/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; diff --git a/src/Explorer/Tabs/NotebookViewerTab.tsx b/src/Explorer/Tabs/NotebookViewerTab.tsx index 7a8999298..5161231c8 100644 --- a/src/Explorer/Tabs/NotebookViewerTab.tsx +++ b/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; diff --git a/src/Explorer/Tabs/QueryTab.ts b/src/Explorer/Tabs/QueryTab.ts index d038f2a10..089eaf959 100644 --- a/src/Explorer/Tabs/QueryTab.ts +++ b/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; diff --git a/src/Explorer/Tabs/QueryTablesTab.ts b/src/Explorer/Tabs/QueryTablesTab.ts index ae71b9fc1..651ad0937 100644 --- a/src/Explorer/Tabs/QueryTablesTab.ts +++ b/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(); public queryViewModel = ko.observable(); diff --git a/src/Explorer/Tabs/SettingsTabV2.tsx b/src/Explorer/Tabs/SettingsTabV2.tsx index 9868a0ad5..973cc9f31 100644 --- a/src/Explorer/Tabs/SettingsTabV2.tsx +++ b/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; private notification: DataModels.Notification; diff --git a/src/Explorer/Tabs/StoredProcedureTab.ts b/src/Explorer/Tabs/StoredProcedureTab.ts index c46b83f45..cf99243e9 100644 --- a/src/Explorer/Tabs/StoredProcedureTab.ts +++ b/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; diff --git a/src/Explorer/Tabs/TabComponents.ts b/src/Explorer/Tabs/TabComponents.ts deleted file mode 100644 index 5c10289dd..000000000 --- a/src/Explorer/Tabs/TabComponents.ts +++ /dev/null @@ -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, - }; - } -} diff --git a/src/Explorer/Tabs/TabsBase.ts b/src/Explorer/Tabs/TabsBase.ts index fe2fa8edf..23dbde0a4 100644 --- a/src/Explorer/Tabs/TabsBase.ts +++ b/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; diff --git a/src/Explorer/Tabs/TabsManager.html b/src/Explorer/Tabs/TabsManager.html index e94fb390b..deb01358d 100644 --- a/src/Explorer/Tabs/TabsManager.html +++ b/src/Explorer/Tabs/TabsManager.html @@ -76,79 +76,11 @@
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +
+
diff --git a/src/Explorer/Tabs/TabsManager.ts b/src/Explorer/Tabs/TabsManager.ts index 5765e44c1..d2d24ebbd 100644 --- a/src/Explorer/Tabs/TabsManager.ts +++ b/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, - }; -} diff --git a/src/Explorer/Tabs/TerminalTab.tsx b/src/Explorer/Tabs/TerminalTab.tsx index 7f648959e..3f19dcc4e 100644 --- a/src/Explorer/Tabs/TerminalTab.tsx +++ b/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; diff --git a/src/Explorer/Tabs/TriggerTab.ts b/src/Explorer/Tabs/TriggerTab.ts index ff4281665..bf68c7bb8 100644 --- a/src/Explorer/Tabs/TriggerTab.ts +++ b/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; diff --git a/src/Explorer/Tabs/UserDefinedFunctionTab.ts b/src/Explorer/Tabs/UserDefinedFunctionTab.ts index 424f0422c..a150df2a8 100644 --- a/src/Explorer/Tabs/UserDefinedFunctionTab.ts +++ b/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) { diff --git a/src/Main.tsx b/src/Main.tsx index b427c9e09..863efc532 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -216,10 +216,7 @@ const App: React.FunctionComponent = () => {
-
+
{/* Collections Tree and Tabs - End */}