initial commit for querytabv2

src/Common/Constants.ts

@@ -122,6 +122,7 @@ export class Features {
   public static readonly enableTtl = "enablettl";
   public static readonly enableNotebooks = "enablenotebooks";
   public static readonly enableGalleryPublish = "enablegallerypublish";
+  public static readonly enableQueryTabV2 = "enablequerytabv2";
   public static readonly enableCodeOfConduct = "enablecodeofconduct";
   public static readonly enableLinkInjection = "enablelinkinjection";
   public static readonly enableSpark = "enablespark";

src/Contracts/ViewModels.ts

@@ -353,7 +353,8 @@ export enum CollectionTabKind {
   NotebookV2 = 15,
   SparkMasterTab = 16,
   Gallery = 17,
-  NotebookViewer = 18
+  NotebookViewer = 18,
+  QueryV2 = 19
 }
 
 export enum TerminalKind {

src/Explorer/ComponentRegisterer.ts

@@ -35,6 +35,7 @@ ko.components.register("trigger-tab", new TabComponents.TriggerTab());
 ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
 ko.components.register("settings-tab", new TabComponents.SettingsTab());
 ko.components.register("query-tab", new TabComponents.QueryTab());
+ko.components.register("query-tab-v2", new TabComponents.QueryTabV2());
 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());

src/Explorer/Controls/Query/QueryComponent.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import QueryTabV2 from "../../Tabs/QueryTabV2";
+
+export interface QueryComponentProps {
+    queryTab: QueryTabV2
+}
+
+interface QueryComponentState {
+
+}
+
+export class QueryComponent extends React.Component<QueryComponentProps, QueryComponentState> {
+    public render() : JSX.Element {
+        return (
+            <h1>
+                Query tab v2 is here
+            </h1>
+        )
+    }
+}

src/Explorer/Controls/Query/QueryComponentAdapter.tsx

@@ -0,0 +1,21 @@
+import ko from "knockout";
+import * as React from "react";
+import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+import { QueryComponent, QueryComponentProps } from "./QueryComponent";
+
+export class QueryComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<number>;
+
+  constructor(private props: QueryComponentProps) {
+    this.parameters = ko.observable<number>(Date.now());
+    console.log("adapter intiialized")
+  }
+
+  public renderComponent(): JSX.Element {
+    return <QueryComponent {...this.props} />;
+  }
+
+  public triggerRender(): void {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+}

src/Explorer/Explorer.ts

@@ -209,6 +209,7 @@ export default class Explorer {
 
   // features
   public isGalleryPublishEnabled: ko.Computed<boolean>;
+  public isQueryTabV2Enabled: ko.Computed<boolean>;
   public isCodeOfConductEnabled: ko.Computed<boolean>;
   public isLinkInjectionEnabled: ko.Computed<boolean>;
   public isGitHubPaneEnabled: ko.Observable<boolean>;
@@ -414,6 +415,9 @@ export default class Explorer {
     this.isGalleryPublishEnabled = ko.computed<boolean>(() =>
       this.isFeatureEnabled(Constants.Features.enableGalleryPublish)
     );
+    this.isQueryTabV2Enabled = ko.computed<boolean>(() =>
+    this.isFeatureEnabled(Constants.Features.enableQueryTabV2)
+    );
     this.isCodeOfConductEnabled = ko.computed<boolean>(() =>
       this.isFeatureEnabled(Constants.Features.enableCodeOfConduct)
     );

src/Explorer/Tabs/QueryTabV2.html

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

src/Explorer/Tabs/QueryTabV2.tsx

@@ -0,0 +1,17 @@
+import * as ViewModels from "../../Contracts/ViewModels";
+import TabsBase from "./TabsBase";
+import { QueryComponentAdapter } from "../Controls/Query/QueryComponentAdapter"
+import { QueryComponentProps } from "../Controls/Query/QueryComponent";
+
+export default class QueryTabV2 extends TabsBase {
+  public queryComponentAdapter: QueryComponentAdapter;
+
+  constructor(options: ViewModels.QueryTabOptions) {
+    super(options);
+    
+    const props: QueryComponentProps = {
+      queryTab: this
+    };
+    this.queryComponentAdapter = new QueryComponentAdapter(props);
+  }
+}

src/Explorer/Tabs/TabComponents.ts

@@ -17,6 +17,7 @@ import UserDefinedFunctionTabTemplate from "./UserDefinedFunctionTab.html";
 import GalleryTabTemplate from "./GalleryTab.html";
 import NotebookViewerTabTemplate from "./NotebookViewerTab.html";
 import TabsManagerTemplate from "./TabsManager.html";
+import QueryTabV2Template from "./QueryTabV2.html";
 
 export class TabComponent {
   constructor(data: any) {
@@ -123,6 +124,15 @@ export class QueryTab {
   }
 }
 
+export class QueryTabV2 {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: QueryTabV2Template
+    };
+  }
+}
+
 export class QueryTablesTab {
   constructor() {
     return {

src/Explorer/Tabs/TabsManager.html

@@ -141,6 +141,11 @@
       <!-- ko if: $data.tabKind === 18 -->
       <notebook-viewer-tab params="{data: $data}"></notebook-viewer-tab>
       <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 19 -->
+      <query-tab-v2 params="{data: $data}"></query-tab-v2>
+      <!-- /ko -->
+      
     </div>
     <!-- /ko -->
   </div>

src/Explorer/Tree/Collection.ts

@@ -42,6 +42,8 @@ import {
   readOffers
 } from "../../Common/DocumentClientUtilityBase";
 import { userContext } from "../../UserContext";
+import TabsBase from "../Tabs/TabsBase";
+import QueryTabV2 from "../Tabs/QueryTabV2";
 
 export default class Collection implements ViewModels.Collection {
   public nodeKind: string;
@@ -729,8 +731,9 @@ export default class Collection implements ViewModels.Collection {
   }
 
   public onNewQueryClick(source: any, event: MouseEvent, queryText?: string) {
+    const queryTabType = this.container.isQueryTabV2Enabled ? ViewModels.CollectionTabKind.QueryV2 : ViewModels.CollectionTabKind.Query 
     const collection: ViewModels.Collection = source.collection || source;
-    const id = this.container.tabsManager.getTabs(ViewModels.CollectionTabKind.Query).length + 1;
+    const id = this.container.tabsManager.getTabs(queryTabType).length + 1;
     const title = "Query " + id;
     const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
       databaseAccountName: this.container.databaseAccount().name,
@@ -741,8 +744,8 @@ export default class Collection implements ViewModels.Collection {
       tabTitle: title
     });
 
-    const queryTab: QueryTab = new QueryTab({
-      tabKind: ViewModels.CollectionTabKind.Query,
+    const queryTabProps : ViewModels.QueryTabOptions = {
+      tabKind: queryTabType,
       title: title,
       tabPath: "",
       collection: this,
@@ -754,7 +757,9 @@ export default class Collection implements ViewModels.Collection {
       partitionKey: collection.partitionKey,
       onLoadStartKey: startKey,
       onUpdateTabsButtons: this.container.onUpdateTabsButtons
-    });
+    }
+
+    const queryTab = this.container.isQueryTabV2Enabled ? new QueryTab(queryTabProps) : new QueryTabV2(queryTabProps)
 
     this.container.tabsManager.activateNewTab(queryTab);
   }