Initial commit

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -14,7 +14,8 @@ import * as Entities from "../../Tables/Entities";
 import { CassandraAPIDataClient, CassandraTableKey, TableDataClient } from "../../Tables/TableDataClient";
 import * as TableEntityProcessor from "../../Tables/TableEntityProcessor";
 import * as Utilities from "../../Tables/Utilities";
-import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab";
+// import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import { PanelContainerComponent } from "../PanelContainerComponent";
 import {
   attributeNameLabel,
@@ -38,7 +39,8 @@ import {
 
 interface AddTableEntityPanelProps {
   tableDataClient: TableDataClient;
-  queryTablesTab: QueryTablesTab;
+  queryTablesTab: NewQueryTablesTab;
+  // queryTablesTab: QueryTablesTab;
   tableEntityListViewModel: TableEntityListViewModel;
   cassandraApiClient: CassandraAPIDataClient;
 }

src/Explorer/Panes/Tables/EditTableEntityPanel.tsx

@@ -13,7 +13,8 @@ import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListView
 import * as Entities from "../../Tables/Entities";
 import { CassandraAPIDataClient, TableDataClient } from "../../Tables/TableDataClient";
 import * as TableEntityProcessor from "../../Tables/TableEntityProcessor";
-import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab";
+// import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import { PanelContainerComponent } from "../PanelContainerComponent";
 import {
   attributeNameLabel,
@@ -35,7 +36,8 @@ import {
 
 interface EditTableEntityPanelProps {
   tableDataClient: TableDataClient;
-  queryTablesTab: QueryTablesTab;
+  queryTablesTab: NewQueryTablesTab;
+  // queryTablesTab: QueryTablesTab;
   tableEntityListViewModel: TableEntityListViewModel;
   cassandraApiClient: CassandraAPIDataClient;
 }

src/Explorer/Tables/DataTable/DataTableViewModel.ts

@@ -1,14 +1,14 @@
+import { ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import * as ko from "knockout";
 import * as _ from "underscore";
-
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-import CacheBase from "./CacheBase";
 import * as CommonConstants from "../../../Common/Constants";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+// import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab";
 import * as Constants from "../Constants";
 import * as Entities from "../Entities";
-import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import CacheBase from "./CacheBase";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { QueryIterator, ItemDefinition, Resource } from "@azure/cosmos";
 
 // This is the format of the data we will have to pass to Datatable render callback,
 // and property names are defined by Datatable as well.
@@ -49,7 +49,8 @@ abstract class DataTableViewModel {
 
   private dataTableOperationManager: IDataTableOperation;
 
-  public queryTablesTab: QueryTablesTab;
+  // public queryTablesTab: QueryTablesTab;
+  public queryTablesTab: NewQueryTablesTab;
 
   constructor() {
     this.items([]);

src/Explorer/Tables/DataTable/TableEntityListViewModel.ts

@@ -6,7 +6,8 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../../UserContext";
-import QueryTablesTab from "../../Tabs/QueryTablesTab";
+// import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab";
 import * as Constants from "../Constants";
 import { getQuotedCqlIdentifier } from "../CqlUtilities";
 import * as Entities from "../Entities";
@@ -101,7 +102,9 @@ export default class TableEntityListViewModel extends DataTableViewModel {
   public useSetting: boolean = true;
 
   //public tableExplorerContext: TableExplorerContext;
-  public notifyColumnChanges: (enablePrompt: boolean, queryTablesTab: QueryTablesTab) => void;
+  public notifyColumnChanges: (enablePrompt: boolean, queryTablesTab: NewQueryTablesTab) => void;
+  // public notifyColumnChanges: (enablePrompt: boolean, queryTablesTab: QueryTablesTab) => void;
+
   public tablePageStartIndex: number;
   public tableQuery: Entities.ITableQuery = {};
   public cqlQuery: ko.Observable<string>;
@@ -112,7 +115,8 @@ export default class TableEntityListViewModel extends DataTableViewModel {
   public queryErrorMessage: ko.Observable<string>;
   public id: string;
 
-  constructor(tableCommands: TableCommands, queryTablesTab: QueryTablesTab) {
+  // constructor(tableCommands: TableCommands, queryTablesTab: QueryTablesTab) {
+  constructor(tableCommands: TableCommands, queryTablesTab: NewQueryTablesTab) {
     super();
     this.cache = new TableEntityCache();
     this.queryErrorMessage = ko.observable<string>();

src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx

@@ -5,7 +5,7 @@ import { KeyCodes } from "../../../Common/Constants";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import { userContext } from "../../../UserContext";
 import { TableQuerySelectPanel } from "../../Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel";
-import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab";
 import { getQuotedCqlIdentifier } from "../CqlUtilities";
 import * as DataTableUtilities from "../DataTable/DataTableUtilities";
 import TableEntityListViewModel from "../DataTable/TableEntityListViewModel";
@@ -39,14 +39,16 @@ export default class QueryViewModel {
 
   public columnOptions: ko.ObservableArray<string>;
 
-  public queryTablesTab: QueryTablesTab;
+  public queryTablesTab: NewQueryTablesTab;
+  // public queryTablesTab: QueryTablesTab;
   public id: string;
   private _tableEntityListViewModel: TableEntityListViewModel;
 
-  constructor(queryTablesTab: QueryTablesTab) {
+  // constructor(queryTablesTab: QueryTablesTab) {
+  constructor(queryTablesTab: NewQueryTablesTab) {
     this.queryTablesTab = queryTablesTab;
     this.id = `queryViewModel${this.queryTablesTab.tabId}`;
-    this._tableEntityListViewModel = queryTablesTab.tableEntityListViewModel();
+    this._tableEntityListViewModel = queryTablesTab.tableEntityListViewModel;
 
     this.queryTextIsReadOnly = ko.computed<boolean>(() => {
       return userContext.apiType !== "Cassandra";

src/Explorer/Tabs/QueryTablesTab/QueryTablesTab.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import Explorer from "../../Explorer";
+import TableCommands from "../../Tables/DataTable/TableCommands";
+import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel";
+import TabsBase from "../TabsBase";
+import QueryTablesTabComponent, { IQueryTablesTabComponentProps } from "./QueryTablesTabComponent";
+
+interface QueryTablesTabProps {
+  container: Explorer;
+}
+
+class NewQueryTablesTab extends TabsBase {
+  public iQueryTablesTabCompProps: IQueryTablesTabComponentProps;
+  public collection: ViewModels.Collection;
+  public tableEntityListViewModel: TableEntityListViewModel;
+  public tableCommands: TableCommands;
+
+  constructor(options: ViewModels.TabOptions, props: QueryTablesTabProps) {
+    super(options);
+    this.tableCommands = new TableCommands(props.container);
+    this.tableEntityListViewModel = new TableEntityListViewModel(this.tableCommands, this);
+    this.iQueryTablesTabCompProps = {
+      tabKind: options.tabKind,
+      title: options.title,
+      tabPath: options.tabPath,
+      collection: options.collection,
+      node: options.node,
+      onLoadStartKey: options.onLoadStartKey,
+      container: props.container,
+      tabsBaseInstance: this,
+      queryTablesTab: this,
+    };
+    console.log("🚀 ~ file: QueryTablesTab.tsx ~ line 13 ~ NewQueryTablesTab ~ constructor ~ props", props);
+  }
+  public render(): JSX.Element {
+    return <QueryTablesTabComponent {...this.iQueryTablesTabCompProps} />;
+  }
+}
+
+export default NewQueryTablesTab;

src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx

@@ -0,0 +1,429 @@
+import React, { Component } from "react";
+import QueryInformation from "../../../../images//QueryBuilder/QueryInformation_16x.png";
+import AddProperty from "../../../../images/Add-property.svg";
+import AddEntityIcon from "../../../../images/AddEntity.svg";
+import AndOr from "../../../../images/And-Or.svg";
+import DeleteEntitiesIcon from "../../../../images/DeleteEntities.svg";
+import EditEntityIcon from "../../../../images/Edit-entity.svg";
+import ErrorRed from "../../../../images/error_red.svg";
+import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg";
+import QueryBuilderIcon from "../../../../images/Query-Builder.svg";
+import QueryTextIcon from "../../../../images/Query-Text.svg";
+import StatusWraning from "../../../../images/QueryBuilder/StatusWarning_16x.png";
+import TriangleDown from "../../../../images/Triangle-down.svg";
+import TriangleRight from "../../../../images/Triangle-right.svg";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { useSidePanel } from "../../../hooks/useSidePanel";
+import { userContext } from "../../../UserContext";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import Explorer from "../../Explorer";
+import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter";
+import { AddTableEntityPanel } from "../../Panes/Tables/AddTableEntityPanel";
+import { EditTableEntityPanel } from "../../Panes/Tables/EditTableEntityPanel";
+import TableCommands from "../../Tables/DataTable/TableCommands";
+import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel";
+import QueryViewModel from "../../Tables/QueryBuilder/QueryViewModel";
+import { CassandraAPIDataClient, TableDataClient } from "../../Tables/TableDataClient";
+import TabsBase from "../TabsBase";
+import NewQueryTablesTab from "./QueryTablesTab";
+export interface Button {
+  visible: boolean;
+  enabled: boolean;
+  isSelected?: boolean;
+}
+
+export interface IQueryTablesTabComponentProps {
+  tabKind: ViewModels.CollectionTabKind;
+  title: string;
+  tabPath: string;
+  collection: ViewModels.CollectionBase;
+  node: ViewModels.TreeNode;
+  onLoadStartKey: number;
+  container: Explorer;
+  tabsBaseInstance: TabsBase;
+  queryTablesTab: NewQueryTablesTab;
+}
+
+interface IQueryTablesTabComponentStates {
+  tableEntityListViewModel: TableEntityListViewModel;
+  queryViewModel: QueryViewModel;
+  queryText: string;
+  selectedQueryText: string;
+  executeQueryButton: Button;
+  queryBuilderButton: Button;
+  queryTextButton: Button;
+  addEntityButton: Button;
+  editEntityButton: Button;
+  deleteEntityButton: Button;
+}
+
+class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, IQueryTablesTabComponentStates> {
+  // public readonly html = template;
+  public collection: ViewModels.Collection;
+  // public tableEntityListViewModel = ko.observable<TableEntityListViewModel>();
+  // public queryViewModel = ko.observable<QueryViewModel>();
+  public tableCommands: TableCommands;
+  public tableDataClient: TableDataClient;
+
+  //   public queryText = ko.observable("PartitionKey eq 'partitionKey1'"); // Start out with an example they can modify
+  //   public selectedQueryText = ko.observable("").extend({ notify: "always" });
+
+  public executeQueryButton: ViewModels.Button;
+  public addEntityButton: ViewModels.Button;
+  public editEntityButton: ViewModels.Button;
+  public deleteEntityButton: ViewModels.Button;
+  public queryBuilderButton: ViewModels.Button;
+  public queryTextButton: ViewModels.Button;
+  public container: Explorer;
+  constructor(props: IQueryTablesTabComponentProps) {
+    super(props);
+    this.container = props.collection && props.collection.container;
+    this.tableCommands = new TableCommands(this.container);
+    this.tableDataClient = this.container.tableDataClient;
+
+    this.state = {
+      tableEntityListViewModel: new TableEntityListViewModel(this.tableCommands, props.queryTablesTab),
+      // tableEntityListViewModel.queryTablesTab : this.props.queryTablesTab
+      queryViewModel: new QueryViewModel(this.props.queryTablesTab),
+      queryText: "PartitionKey eq 'partionKey1'",
+      selectedQueryText: "",
+      executeQueryButton: {
+        enabled: true,
+        visible: true,
+        isSelected: false,
+      },
+      queryBuilderButton: {
+        enabled: true,
+        visible: true,
+        isSelected: false,
+      },
+      queryTextButton: {
+        enabled: true,
+        visible: true,
+        isSelected: false,
+      },
+      addEntityButton: {
+        enabled: true,
+        visible: true,
+        isSelected: false,
+      },
+      editEntityButton: {
+        enabled: true,
+        visible: true,
+        isSelected: false,
+      },
+      deleteEntityButton: {
+        enabled: true,
+        visible: true,
+        isSelected: false,
+      },
+    };
+    // console.log(
+    //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 24 ~ QueryTablesTabComponent ~ constructor ~ props",
+    //   props
+    // );
+    useCommandBar.getState().setContextButtons(this.getTabsButtons());
+
+    this.buildCommandBarOptions();
+  }
+
+  public onAddEntityClick = (): void => {
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Add Table Entity",
+        <AddTableEntityPanel
+          tableDataClient={this.tableDataClient}
+          queryTablesTab={this.props.queryTablesTab}
+          tableEntityListViewModel={this.state.tableEntityListViewModel}
+          cassandraApiClient={new CassandraAPIDataClient()}
+        />
+      );
+  };
+
+  public onEditEntityClick = (): void => {
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Edit Table Entity",
+        <EditTableEntityPanel
+          tableDataClient={this.tableDataClient}
+          queryTablesTab={this.props.queryTablesTab}
+          tableEntityListViewModel={this.state.tableEntityListViewModel}
+          cassandraApiClient={new CassandraAPIDataClient()}
+        />
+      );
+  };
+
+  public onDeleteEntityClick = (): void => {
+    this.tableCommands.deleteEntitiesCommand(this.state.tableEntityListViewModel);
+  };
+
+  protected getTabsButtons(): CommandButtonComponentProps[] {
+    const buttons: CommandButtonComponentProps[] = [];
+    if (this.state.queryBuilderButton.visible) {
+      const label = userContext.apiType === "Cassandra" ? "CQL Query Builder" : "Query Builder";
+      buttons.push({
+        iconSrc: QueryBuilderIcon,
+        iconAlt: label,
+        onCommandClick: () => this.state.queryViewModel.selectHelper(),
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.state.queryBuilderButton.enabled,
+        isSelected: this.state.queryBuilderButton.isSelected,
+      });
+    }
+
+    if (this.state.queryTextButton.visible) {
+      const label = userContext.apiType === "Cassandra" ? "CQL Query Text" : "Query Text";
+      buttons.push({
+        iconSrc: QueryTextIcon,
+        iconAlt: label,
+        onCommandClick: () => this.state.queryViewModel.selectEditor(),
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.state.queryTextButton.enabled,
+        isSelected: this.state.queryTextButton.isSelected,
+      });
+    }
+
+    if (this.state.executeQueryButton.visible) {
+      const label = "Run Query";
+      buttons.push({
+        iconSrc: ExecuteQueryIcon,
+        iconAlt: label,
+        onCommandClick: () => this.state.queryViewModel.runQuery(),
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.state.executeQueryButton.enabled,
+      });
+    }
+
+    if (this.state.addEntityButton.visible) {
+      const label = userContext.apiType === "Cassandra" ? "Add Row" : "Add Entity";
+      buttons.push({
+        iconSrc: AddEntityIcon,
+        iconAlt: label,
+        onCommandClick: this.onAddEntityClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: true,
+        disabled: !this.state.addEntityButton.enabled,
+      });
+    }
+
+    if (this.state.editEntityButton.visible) {
+      const label = userContext.apiType === "Cassandra" ? "Edit Row" : "Edit Entity";
+      buttons.push({
+        iconSrc: EditEntityIcon,
+        iconAlt: label,
+        onCommandClick: this.onEditEntityClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: true,
+        disabled: !this.state.editEntityButton.enabled,
+      });
+    }
+
+    if (this.state.deleteEntityButton.visible) {
+      const label = userContext.apiType === "Cassandra" ? "Delete Rows" : "Delete Entities";
+      buttons.push({
+        iconSrc: DeleteEntitiesIcon,
+        iconAlt: label,
+        onCommandClick: this.onDeleteEntityClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: true,
+        disabled: !this.state.deleteEntityButton.enabled,
+      });
+    }
+    return buttons;
+  }
+
+  protected buildCommandBarOptions(): void {
+    this.props.tabsBaseInstance.updateNavbarWithTabsButtons();
+  }
+
+  render(): JSX.Element {
+    useCommandBar.getState().setContextButtons(this.getTabsButtons());
+
+    return (
+      <div className="tab-pane tableContainer" data-bind="attr:{id: tabId}" role="tabpanel">
+        <div className="query-builder">
+          <div className="error-bar">
+            <div className="error-message" aria-label="Error Message">
+              <span>
+                <img className="entity-error-Img" src={ErrorRed} />
+              </span>
+              <span className="error-text" role="alert"></span>
+            </div>
+          </div>
+          <div className="query-editor-panel">
+            <div>
+              <textarea
+                className="query-editor-text"
+                data-bind="textInput: queryText,
+                css: { 'query-editor-text-invalid': hasQueryError },
+                readOnly: true"
+                name="query-editor"
+                rows="5"
+                cols="100"
+              ></textarea>
+            </div>
+          </div>
+          <div style={{ paddingLeft: "13px" }}>
+            <div className="clause-table">
+              <div className="scroll-box scrollable" id="scroll">
+                <table className="clause-table">
+                  <thead>
+                    <tr className="clause-table-row">
+                      <th className="clause-table-cell header-background action-header">
+                        <span></span>
+                      </th>
+                      <th className="clause-table-cell header-background group-control-header">
+                        <button type="button">
+                          <img className="and-or-svg" src={AndOr} alt="Group selected clauses" />
+                        </button>
+                      </th>
+                      <th className="clause-table-cell header-background"></th>
+                      <th className="clause-table-cell header-background and-or-header">
+                        <span></span>
+                      </th>
+                      <th className="clause-table-cell header-background field-header">
+                        <span></span>
+                      </th>
+                      <th className="clause-table-cell header-background type-header">
+                        <span></span>
+                      </th>
+                      <th className="clause-table-cell header-background operator-header">
+                        <span></span>
+                      </th>
+                      <th className="clause-table-cell header-background value-header">
+                        <span></span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody></tbody>
+                </table>
+              </div>
+              <div
+                className="addClause"
+                role="button"
+                // data-bind="click: addNewClause, event: { keydown: onAddNewClauseKeyDown }, attr: { title: addNewClauseLine }"
+                tabIndex={0}
+              >
+                <div className="addClause-heading">
+                  <span className="clause-table addClause-title">
+                    <img
+                      className="addclauseProperty-Img"
+                      style={{ marginBottom: "5px" }}
+                      src={AddProperty}
+                      alt="Add new clause"
+                    />
+                    <span
+                      style={{ marginLeft: "5px" }}
+                      // data-bind="text: addNewClauseLine"
+                    ></span>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="advanced-options-panel">
+            <div className="advanced-heading">
+              <span
+                className="advanced-title"
+                role="button"
+                // data-bind="click:toggleAdvancedOptions, event: { keydown: ontoggleAdvancedOptionsKeyDown }, attr:{ 'aria-expanded': isExpanded() ? 'true' : 'false' }"
+                tabIndex={0}
+              >
+                <div
+                  className="themed-images"
+                  //   type="text/html"
+                  id="ExpandChevronRight"
+                  //   data-bind="hasFocus: focusExpandIcon"
+                >
+                  <img
+                    className="imgiconwidth expand-triangle expand-triangle-right"
+                    src={TriangleRight}
+                    alt="toggle"
+                  />
+                </div>
+                <div
+                  className="themed-images"
+                  // type="text/html"
+                  id="ExpandChevronDown"
+                >
+                  <img className="imgiconwidth expand-triangle" src={TriangleDown} alt="toggle" />
+                </div>
+                <span>Advanced Options</span>
+              </span>
+            </div>
+            <div
+              className="advanced-options"
+              // data-bind="visible: isExpanded"
+            >
+              <div className="top">
+                <span>Show top results:</span>
+                <input
+                  className="top-input"
+                  type="number"
+                  //   data-bind="hasFocus: focusTopResult, textInput: topValue, attr: { title: topValueLimitMessage }"
+                  role="textbox"
+                  aria-label="Show top results"
+                />
+                <div
+                  role="alert"
+                  aria-atomic="true"
+                  className="inline-div"
+                  // data-bind="visible: isExceedingLimit"
+                >
+                  <img className="advanced-options-icon" src={StatusWraning} />
+                  <span data-bind="text: topValueLimitMessage"></span>
+                </div>
+              </div>
+              <div className="select">
+                <span> Select fields for query: </span>
+                <div
+                // data-bind="visible: isSelected"
+                >
+                  <img className="advanced-options-icon" src={QueryInformation} />
+                  <span
+                    className="select-options-text"
+                    //   data-bind="text: selectMessage"
+                  />
+                </div>
+                <a
+                  className="select-options-link"
+                  //   data-bind="click: selectQueryOptions, event: { keydown: onselectQueryOptionsKeyDown }"
+                  tabIndex={0}
+                  role="link"
+                >
+                  <span>Choose Columns... </span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="tablesQueryTab tableContainer"
+          //   data-bind="with: tableEntityListViewModel, attr: {
+          //                                         id: tableEntityListViewModel.id
+          //                                     }"
+        >
+          <table
+            id="storageTable"
+            className="storage azure-table show-gridlines"
+            tabIndex={0}
+            // data-bind="tableSource: items, tableSelection: selected"
+          ></table>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default QueryTablesTabComponent;

src/Explorer/Tree/Collection.ts

@@ -32,7 +32,8 @@ import MongoDocumentsTab from "../Tabs/MongoDocumentsTab";
 import { NewMongoQueryTab } from "../Tabs/MongoQueryTab/MongoQueryTab";
 import { NewMongoShellTab } from "../Tabs/MongoShellTab/MongoShellTab";
 import { NewQueryTab } from "../Tabs/QueryTab/QueryTab";
-import QueryTablesTab from "../Tabs/QueryTablesTab";
+// import QueryTablesTab from "../Tabs/QueryTablesTab";
+import NewQueryTablesTab from "../Tabs/QueryTablesTab/QueryTablesTab";
 import { CollectionSettingsTabV2 } from "../Tabs/SettingsTabV2";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
@@ -391,13 +392,13 @@ export default class Collection implements ViewModels.Collection {
       });
     }
 
-    const queryTablesTabs: QueryTablesTab[] = useTabs
+    const queryTablesTabs: NewQueryTablesTab[] = useTabs
       .getState()
       .getTabs(
         ViewModels.CollectionTabKind.QueryTables,
         (tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
-      ) as QueryTablesTab[];
+      ) as NewQueryTablesTab[];
-    let queryTablesTab: QueryTablesTab = queryTablesTabs && queryTablesTabs[0];
+    let queryTablesTab: NewQueryTablesTab = queryTablesTabs && queryTablesTabs[0];
 
     if (queryTablesTab) {
       useTabs.getState().activateTab(queryTablesTab);
@@ -415,14 +416,57 @@ export default class Collection implements ViewModels.Collection {
         tabTitle: title,
       });
 
-      queryTablesTab = new QueryTablesTab({
+      queryTablesTab = new NewQueryTablesTab(
+        {
           tabKind: ViewModels.CollectionTabKind.QueryTables,
           title: title,
           tabPath: "",
           collection: this,
           node: this,
           onLoadStartKey: startKey,
-      });
+        },
+        {
+          container: this.container,
+        }
+      );
+
+      // const queryTablesTabs: QueryTablesTab[] = useTabs
+      //   .getState()
+      //   .getTabs(
+      //     ViewModels.CollectionTabKind.QueryTables,
+      //     (tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
+      //   ) as QueryTablesTab[];
+      // let queryTablesTab: QueryTablesTab = queryTablesTabs && queryTablesTabs[0];
+
+      // if (queryTablesTab) {
+      //   useTabs.getState().activateTab(queryTablesTab);
+      // } else {
+      //   this.documentIds([]);
+      //   let title = `Entities`;
+      //   if (userContext.apiType === "Cassandra") {
+      //     title = `Rows`;
+      //   }
+      //   const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
+      //     databaseName: this.databaseId,
+      //     collectionName: this.id(),
+
+      //     dataExplorerArea: Constants.Areas.Tab,
+      //     tabTitle: title,
+      //   });
+
+      //   queryTablesTab = new QueryTablesTab(
+      //     {
+      //       tabKind: ViewModels.CollectionTabKind.QueryTables,
+      //       title: title,
+      //       tabPath: "",
+      //       collection: this,
+      //       node: this,
+      //       onLoadStartKey: startKey,
+      //     },
+      //     {
+      //       container: this.container,
+      //     }
+      //   );
 
       useTabs.getState().activateNewTab(queryTablesTab);
     }