split service changes

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>

.eslintignore

@@ -44,7 +44,6 @@ src/Definitions/png.d.ts
 src/Definitions/svg.d.ts
 src/Explorer/ComponentRegisterer.test.ts
 src/Explorer/ComponentRegisterer.ts
-src/Explorer/ContextMenuButtonFactory.ts
 src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts
 src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts
 src/Explorer/Controls/DynamicList/DynamicList.test.ts
@@ -105,15 +104,10 @@ src/Explorer/Notebook/NotebookContainerClient.ts
 src/Explorer/Notebook/NotebookContentClient.ts
 src/Explorer/Notebook/NotebookContentItem.ts
 src/Explorer/Notebook/NotebookUtil.ts
-src/Explorer/OpenActions.test.ts
-src/Explorer/OpenActions.ts
 src/Explorer/OpenActionsStubs.ts
 src/Explorer/Panes/AddDatabasePane.ts
 src/Explorer/Panes/AddDatabasePane.test.ts
 src/Explorer/Panes/BrowseQueriesPane.ts
-src/Explorer/Panes/ContextualPaneBase.ts
-# src/Explorer/Panes/GraphStylingPane.ts
-# src/Explorer/Panes/NewVertexPane.ts
 src/Explorer/Panes/RenewAdHocAccessPane.ts
 src/Explorer/Panes/SetupNotebooksPane.ts
 src/Explorer/Panes/SwitchDirectoryPane.ts
@@ -138,7 +132,6 @@ src/Explorer/Tables/QueryBuilder/ClauseGroupViewModel.ts
 src/Explorer/Tables/QueryBuilder/CustomTimestampHelper.ts
 src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
 src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts
-src/Explorer/Tables/QueryBuilder/QueryViewModel.ts
 src/Explorer/Tables/TableDataClient.ts
 src/Explorer/Tables/TableEntityProcessor.ts
 src/Explorer/Tables/Utilities.ts
@@ -148,14 +141,11 @@ src/Explorer/Tabs/DocumentsTab.test.ts
 src/Explorer/Tabs/DocumentsTab.ts
 src/Explorer/Tabs/GraphTab.ts
 src/Explorer/Tabs/MongoDocumentsTab.ts
-src/Explorer/Tabs/MongoQueryTab.ts
-src/Explorer/Tabs/MongoShellTab.ts
+# src/Explorer/Tabs/MongoQueryTab.ts
+# src/Explorer/Tabs/MongoShellTab.ts
 src/Explorer/Tabs/NotebookV2Tab.ts
-src/Explorer/Tabs/QueryTab.test.ts
-src/Explorer/Tabs/QueryTab.ts
-src/Explorer/Tabs/QueryTablesTab.ts
 src/Explorer/Tabs/ScriptTabBase.ts
-src/Explorer/Tabs/StoredProcedureTab.ts
+# src/Explorer/Tabs/StoredProcedureTab.ts
 src/Explorer/Tabs/TabComponents.ts
 src/Explorer/Tabs/TabsBase.ts
 src/Explorer/Tabs/TriggerTab.ts
@@ -208,9 +198,6 @@ src/ResourceProvider/IResourceProviderClient.test.ts
 src/ResourceProvider/IResourceProviderClient.ts
 src/ResourceProvider/ResourceProviderClient.ts
 src/ResourceProvider/ResourceProviderClientFactory.ts
-src/RouteHandlers/RouteHandler.ts
-src/RouteHandlers/TabRouteHandler.test.ts
-src/RouteHandlers/TabRouteHandler.ts
 src/Shared/Constants.ts
 src/Shared/DefaultExperienceUtility.test.ts
 src/Shared/DefaultExperienceUtility.ts
@@ -266,7 +253,6 @@ src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
-src/Explorer/Graph/GraphExplorerComponent/GraphExplorerAdapter.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx

.github/workflows/ci.yml

@@ -92,11 +92,11 @@ jobs:
           name: dist
           path: dist/
       - name: Upload build to preview blob storage
-        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --destination-path "${{github.event.pull_request.head.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
+        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
         env:
           PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
       - name: Upload preview config to blob storage
-        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --name "${{github.event.pull_request.head.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
+        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
         env:
           PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
   endtoendemulator:

.github/workflows/cleanup.yml

@@ -7,7 +7,7 @@ on:
   workflow_dispatch:
   schedule:
     # Once every hour
-    - cron: "0 * * * *"
+    - cron: "0 15 * * *"
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:

less/documentDB.less

@@ -724,45 +724,24 @@ execute-sproc-params-pane {
 
   .results-container,
   .errors-container {
-    padding: @MediumSpace 0px 0px @MediumSpace;
     height: 100%;
     .flex-display();
     .flex-direction();
     overflow: hidden;
 
-    .toggles {
-      height: @ToggleHeight;
-      width: @ToggleWidth;
-      margin-left: @MediumSpace;
-
-      &:focus {
-        .focus();
-      }
-
-      .tab {
-        margin-right: @MediumSpace;
-      }
-
-      .toggleSwitch {
-        .toggleSwitch();
-      }
-
-      .selectedToggle {
-        .selectedToggle();
-      }
-
-      .unselectedToggle {
-        .unselectedToggle();
-      }
-    }
-
     .enterInputParameters {
       padding: @LargeSpace @MediumSpace;
     }
+
+    div[role="tabpanel"] {
+      height: 100%;
+      padding-bottom: 50px;
+    }
   }
 
   .errors-container {
     padding-left: (2 * @MediumSpace);
+    padding: @MediumSpace 0px 0px @MediumSpace;
     .errors-header {
       font-weight: 700;
       font-size: @DefaultFontSize;
@@ -3085,3 +3064,14 @@ settings-pane {
     padding-left: @SmallSpace;
   }
 }
+.hiddenMain {
+  display: none;
+  height: 0px;
+}
+.spinner {
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+  background: white;
+  height: 100%;
+}

less/forms.less

@@ -200,4 +200,12 @@
 
 .migration:disabled {
     background-color: #ccc;
+}
+
+.trigger-field {
+    width: 40%;
+    margin-top: 10px
+}
+.trigger-form {
+    padding: 10px 30px 10px 30px;
 }

less/tree.less

@@ -3,6 +3,7 @@
 
 .resourceTree {
     height: 100%;
+    width: 20%;
     flex: 0 0 auto;
     .main {
         height: 100%;

package-lock.json

@@ -3709,14 +3709,84 @@
       }
     },
     "@nteract/editor": {
-      "version": "10.1.2",
-      "resolved": "https://registry.npmjs.org/@nteract/editor/-/editor-10.1.2.tgz",
-      "integrity": "sha512-Wtj0kJUSoBZsWUh82JGt6miqYS0jt0k+3SD3cnW9socayxp2KB0Qbqhh2NtrF9ysxVHWnQT8iUarJjpGIdNyng==",
+      "version": "10.1.12",
+      "resolved": "https://registry.npmjs.org/@nteract/editor/-/editor-10.1.12.tgz",
+      "integrity": "sha512-bsUrCctukjWdpKNWQOQmhfxMCQ/SBVIO6+RkazI4y4dVeeP3KMP8nxfhzIbzTMNSkyynps/deZFjpDWqRhG+Dg==",
       "requires": {
-        "@nteract/messaging": "^7.0.10",
-        "@nteract/outputs": "^3.0.9",
-        "codemirror": "5.57.0",
+        "@nteract/messaging": "^7.0.19",
+        "@nteract/outputs": "^3.0.11",
+        "codemirror": "5.61.1",
         "rxjs": "^6.3.3"
+      },
+      "dependencies": {
+        "@nteract/commutable": {
+          "version": "7.4.5",
+          "resolved": "https://registry.npmjs.org/@nteract/commutable/-/commutable-7.4.5.tgz",
+          "integrity": "sha512-RYqyMvkFt/04GQ9T+hGYgr9/LEy0dAYJ2QKn930TFX004KjfBT6Tt8VSLFyHWkXqPwyJ0jKMCJwqLcGOI/atqg==",
+          "requires": {
+            "immutable": "^4.0.0-rc.12",
+            "uuid": "^8.0.0"
+          }
+        },
+        "@nteract/messaging": {
+          "version": "7.0.19",
+          "resolved": "https://registry.npmjs.org/@nteract/messaging/-/messaging-7.0.19.tgz",
+          "integrity": "sha512-gRPMxJr741/BshrfCcPSbm5iVyRU2TKmAv9jeQzk0MZEGy+Y1A0REO+eptkt4Ma0OXlvDxON6JEDauk8+2xt4w==",
+          "requires": {
+            "@nteract/types": "^7.1.9",
+            "@types/uuid": "^8.0.0",
+            "lodash.clonedeep": "^4.5.0",
+            "rxjs": "^6.6.0",
+            "uuid": "^8.0.0"
+          }
+        },
+        "@nteract/outputs": {
+          "version": "3.0.11",
+          "resolved": "https://registry.npmjs.org/@nteract/outputs/-/outputs-3.0.11.tgz",
+          "integrity": "sha512-LeT9ViBf+fTPSubZ9dMe7128kg0rl1jIG54V0n2GiU5RuYnUz21FU0IOaLMPUfFMO1VyVEOW5jDc3PAQx5/Kwg==",
+          "requires": {
+            "@nteract/markdown": "^4.5.2",
+            "@nteract/mathjax": "^4.0.11",
+            "ansi-to-react": "^6.0.5",
+            "react-json-tree": "^0.12.1"
+          }
+        },
+        "@nteract/types": {
+          "version": "7.1.9",
+          "resolved": "https://registry.npmjs.org/@nteract/types/-/types-7.1.9.tgz",
+          "integrity": "sha512-a7lGMWdjfz2QGlZbAiFHifU9Nhk9ntwg/iKUTMIMRPY1Wfs5UreHSMt+vZ8OY5HGjxicfHozBatGDKXeKXFHMQ==",
+          "requires": {
+            "@nteract/commutable": "^7.4.5",
+            "immutable": "^4.0.0-rc.12",
+            "rxjs": "^6.6.0",
+            "uuid": "^8.0.0"
+          }
+        },
+        "react-base16-styling": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.7.0.tgz",
+          "integrity": "sha512-lTa/VSFdU6BOAj+FryOe7OTZ0OBP8GXPOnCS0QnZi7G3zhssWgIgwl0eUL77onXx/WqKPFndB3ZeC77QC/l4Dw==",
+          "requires": {
+            "base16": "^1.0.0",
+            "lodash.curry": "^4.1.1",
+            "lodash.flow": "^3.5.0",
+            "pure-color": "^1.3.0"
+          }
+        },
+        "react-json-tree": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.12.1.tgz",
+          "integrity": "sha512-j6fkRY7ha9XMv1HPVakRCsvyFwHGR5AZuwO8naBBeZXnZbbLor5tpcUxS/8XD01+D1v7ZN5p+7LU+9V1uyASiQ==",
+          "requires": {
+            "prop-types": "^15.7.2",
+            "react-base16-styling": "^0.7.0"
+          }
+        },
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+        }
       }
     },
     "@nteract/epics": {
@@ -5650,6 +5720,15 @@
         "redux": "^4.0.0"
       }
     },
+    "@types/react-splitter-layout": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react-splitter-layout/-/react-splitter-layout-3.0.1.tgz",
+      "integrity": "sha512-NsKq32LdG11G/Uj+xo2QmC9S8YSe8JRtxkBhsBE7ODFs0zcnzNEqFAQirP0H7rPe2WFGiu+d/44xbHsew7QAJw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-table": {
       "version": "6.8.7",
       "resolved": "https://registry.npmjs.org/@types/react-table/-/react-table-6.8.7.tgz",
@@ -8058,9 +8137,9 @@
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
     "codemirror": {
-      "version": "5.57.0",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.57.0.tgz",
-      "integrity": "sha512-WGc6UL7Hqt+8a6ZAsj/f1ApQl3NPvHY/UQSzG6fB6l4BjExgVdhFaxd7mRTw1UCiYe/6q86zHP+kfvBQcZGvUg=="
+      "version": "5.61.1",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.61.1.tgz",
+      "integrity": "sha512-+D1NZjAucuzE93vJGbAaXzvoBHwp9nJZWWWF9utjv25+5AZUiah6CIlfb4ikG4MoDsFsCG8niiJH5++OO2LgIQ=="
     },
     "collapse-white-space": {
       "version": "1.0.6",
@@ -17690,12 +17769,6 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
-        "lodash": {
-          "version": "4.17.21",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-          "dev": true
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -18499,9 +18572,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash-es": {
       "version": "4.17.20",
@@ -18728,9 +18801,9 @@
       "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg=="
     },
     "marked": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.3.tgz",
-      "integrity": "sha512-5otztIIcJfPc2qGTN8cVtOJEjNJZ0jwa46INMagrYfk0EvqtRuEHLsEe0LrFS0/q+ZRKT0+kXK7P2T1AN5lWRA==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.6.tgz",
+      "integrity": "sha512-S2mYj0FzTQa0dLddssqwRVW4EOJOVJ355Xm2Vcbm+LU7GQRGWvwbO5K87OaPSOux2AwTSgtPPaXmc8sDPrhn2A==",
       "dev": true
     },
     "martinez-polygon-clipping": {
@@ -21635,6 +21708,11 @@
         "react-is": "^16.9.0"
       }
     },
+    "react-splitter-layout": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/react-splitter-layout/-/react-splitter-layout-4.0.0.tgz",
+      "integrity": "sha512-SLqOjBOxRuizWUa83w6q5/u9cDWa9/yj9Iko9V9JFN8x+cqIXiDlUFWSx+icz3IIgvsN/oRIw3za5/32RjIwrA=="
+    },
     "react-syntax-highlighter": {
       "version": "12.2.1",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz",
@@ -24367,12 +24445,6 @@
             "universalify": "^2.0.0"
           }
         },
-        "lodash": {
-          "version": "4.17.21",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-          "dev": true
-        },
         "universalify": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -24388,9 +24460,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz",
-      "integrity": "sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==",
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.4.tgz",
+      "integrity": "sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==",
       "dev": true
     },
     "typestyle": {

package.json

@@ -22,7 +22,7 @@
     "@nteract/data-explorer": "8.0.3",
     "@nteract/directory-listing": "2.0.6",
     "@nteract/dropdown-menu": "1.0.1",
-    "@nteract/editor": "10.1.2",
+    "@nteract/editor": "10.1.12",
     "@nteract/fixtures": "2.3.0",
     "@nteract/iron-icons": "1.0.0",
     "@nteract/jupyter-widgets": "2.0.0",
@@ -89,6 +89,7 @@
     "react-i18next": "11.8.5",
     "react-notification-system": "0.2.17",
     "react-redux": "7.1.3",
+    "react-splitter-layout": "4.0.0",
     "redux": "4.0.4",
     "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
@@ -123,6 +124,7 @@
     "@types/react-dom": "17.0.3",
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.7",
+    "@types/react-splitter-layout": "3.0.1",
     "@types/sanitize-html": "1.27.2",
     "@types/sinon": "2.3.3",
     "@types/styled-components": "5.1.1",
@@ -172,7 +174,7 @@
     "tslint": "5.11.0",
     "tslint-microsoft-contrib": "6.0.0",
     "typedoc": "0.20.36",
-    "typescript": "4.2.4",
+    "typescript": "4.3.4",
     "url-loader": "1.1.1",
     "wait-on": "4.0.2",
     "webpack": "4.46.0",

preview/config.json

@@ -1,3 +1,4 @@
 {
-  "PROXY_PATH": "/proxy"
+  "PROXY_PATH": "/proxy",
+  "msalRedirectURI": "https://cosmos-explorer-preview.azurewebsites.net/"
 }

preview/index.js

@@ -62,6 +62,17 @@ app.get("/pull/:pr(\\d+)", (req, res) => {
     })
     .catch(() => res.sendStatus(500));
 });
+app.get("/", (req, res) => {
+  fetch("https://api.github.com/repos/Azure/cosmos-explorer/branches/master")
+    .then((response) => response.json())
+    .then(({ commit: { sha } }) => {
+      const explorer = new URL(
+        "https://cosmos-explorer-preview.azurewebsites.net/commit/" + sha + "/hostedExplorer.html"
+      );
+      return res.redirect(explorer.href);
+    })
+    .catch(() => res.sendStatus(500));
+});
 
 app.listen(port, () => {
   console.log(`Example app listening on port: ${port}`);

src/Common/CollapsedResourceTree.tsx

@@ -0,0 +1,36 @@
+import React, { FunctionComponent } from "react";
+import arrowLeftImg from "../../images/imgarrowlefticon.svg";
+import { userContext } from "../UserContext";
+
+export interface CollapsedResourceTreeProps {
+  toggleLeftPaneExpanded: () => void;
+  isLeftPaneExpanded: boolean;
+}
+
+export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps> = ({
+  toggleLeftPaneExpanded,
+  isLeftPaneExpanded,
+}: CollapsedResourceTreeProps): JSX.Element => {
+  return (
+    <div id="mini" className={!isLeftPaneExpanded ? "mini toggle-mini" : "hiddenMain"}>
+      <div className="main-nav nav">
+        <ul className="nav">
+          <li
+            className="resourceTreeCollapse"
+            id="collapseToggleLeftPaneButton"
+            role="button"
+            tabIndex={0}
+            aria-label="Expand Tree"
+          >
+            <span className="leftarrowCollapsed" onClick={toggleLeftPaneExpanded}>
+              <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
+            </span>
+            <span className="collectionCollapsed" onClick={toggleLeftPaneExpanded}>
+              <span>{userContext.apiType} API</span>
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};

src/Common/Constants.ts

@@ -158,16 +158,6 @@ export class DocumentsGridMetrics {
   public static DocumentEditorMaxWidthRatio: number = 0.4;
 }
 
-export class ExplorerMetrics {
-  public static SplitterMinWidth: number = 240;
-  public static SplitterMaxWidth: number = 400;
-  public static CollapsedResourceTreeWidth: number = 36;
-}
-
-export class SplitterMetrics {
-  public static CollapsedPositionLeft: number = ExplorerMetrics.CollapsedResourceTreeWidth;
-}
-
 export class Areas {
   public static ResourceTree: string = "Resource Tree";
   public static ContextualPane: string = "Contextual Pane";

src/Common/CosmosClient.ts

@@ -83,7 +83,7 @@ export function client(): Cosmos.CosmosClient {
   if (_client) return _client;
   const options: Cosmos.CosmosClientOptions = {
     endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
-    ...(!userContext.features.enableAadDataPlane && { key: userContext.masterKey }),
+    key: userContext.masterKey,
     tokenProvider,
     connectionPolicy: {
       enableEndpointDiscovery: false,

src/Common/DatabaseAccountUtility.ts

@@ -0,0 +1,17 @@
+import { userContext } from "../UserContext";
+
+function isVirtualNetworkFilterEnabled() {
+  return userContext.databaseAccount?.properties?.isVirtualNetworkFilterEnabled;
+}
+
+function isIpRulesEnabled() {
+  return userContext.databaseAccount?.properties?.ipRules?.length > 0;
+}
+
+function isPrivateEndpointConnectionsEnabled() {
+  return userContext.databaseAccount?.properties?.privateEndpointConnections?.length > 0;
+}
+
+export function isPublicInternetAccessAllowed(): boolean {
+  return !isVirtualNetworkFilterEnabled() && !isIpRulesEnabled() && !isPrivateEndpointConnectionsEnabled();
+}

src/Common/MongoProxyClient.test.ts

@@ -5,7 +5,6 @@ import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
 import { updateUserContext } from "../UserContext";
 import { deleteDocument, getEndpoint, queryDocuments, readDocument, updateDocument } from "./MongoProxyClient";
-jest.mock("../ResourceProvider/ResourceProviderClient.ts");
 
 const databaseId = "testDB";
 

src/Common/MongoProxyClient.ts

@@ -111,7 +111,7 @@ export function queryDocuments(
           headers: response.headers,
         };
       }
-      errorHandling(response, "querying documents", params);
+      await errorHandling(response, "querying documents", params);
       return undefined;
     });
 }
@@ -153,11 +153,11 @@ export function readDocument(
         ),
       },
     })
-    .then((response) => {
+    .then(async (response) => {
       if (response.ok) {
         return response.json();
       }
-      return errorHandling(response, "reading document", params);
+      return await errorHandling(response, "reading document", params);
     });
 }
 
@@ -192,11 +192,11 @@ export function createDocument(
         ...authHeaders(),
       },
     })
-    .then((response) => {
+    .then(async (response) => {
       if (response.ok) {
         return response.json();
       }
-      return errorHandling(response, "creating document", params);
+      return await errorHandling(response, "creating document", params);
     });
 }
 
@@ -238,11 +238,11 @@ export function updateDocument(
         [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
       },
     })
-    .then((response) => {
+    .then(async (response) => {
       if (response.ok) {
         return response.json();
       }
-      return errorHandling(response, "updating document", params);
+      return await errorHandling(response, "updating document", params);
     });
 }
 
@@ -278,11 +278,11 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
         [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
       },
     })
-    .then((response) => {
+    .then(async (response) => {
       if (response.ok) {
         return undefined;
       }
-      return errorHandling(response, "deleting document", params);
+      return await errorHandling(response, "deleting document", params);
     });
 }
 
@@ -325,11 +325,11 @@ export function createMongoCollectionWithProxy(
         },
       }
     )
-    .then((response) => {
+    .then(async (response) => {
       if (response.ok) {
         return response.json();
       }
-      return errorHandling(response, "creating collection", mongoParams);
+      return await errorHandling(response, "creating collection", mongoParams);
     });
 }
 

src/Common/QueriesClient.ts

@@ -1,19 +1,17 @@
-import { ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import * as _ from "underscore";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import Explorer from "../Explorer/Explorer";
 import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
 import DocumentId from "../Explorer/Tree/DocumentId";
+import { useDatabases } from "../Explorer/useDatabases";
 import { userContext } from "../UserContext";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import * as QueryUtils from "../Utils/QueryUtils";
 import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
 import { createCollection } from "./dataAccess/createCollection";
 import { createDocument } from "./dataAccess/createDocument";
 import { deleteDocument } from "./dataAccess/deleteDocument";
 import { queryDocuments } from "./dataAccess/queryDocuments";
-import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";
 import { handleError } from "./ErrorHandlingUtils";
 
 export class QueriesClient {
@@ -100,45 +98,35 @@ export class QueriesClient {
 
     const options: any = { enableCrossPartitionQuery: true };
     const clearMessage = NotificationConsoleUtils.logConsoleProgress("Fetching saved queries");
-    const queryIterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
+    const results = await queryDocuments(
       SavedQueries.DatabaseName,
       SavedQueries.CollectionName,
       this.fetchQueriesQuery(),
       options
-    );
-    const fetchQueries = async (firstItemIndex: number): Promise<ViewModels.QueryResults> =>
-      await queryDocumentsPage(queriesCollection.id(), queryIterator, firstItemIndex);
-    return QueryUtils.queryAllPages(fetchQueries)
-      .then(
-        (results: ViewModels.QueryResults) => {
-          let queries: DataModels.Query[] = _.map(results.documents, (document: DataModels.Query) => {
-            if (!document) {
-              return undefined;
-            }
-            const { id, resourceId, query, queryName } = document;
-            const parsedQuery: DataModels.Query = {
-              resourceId: resourceId,
-              queryName: queryName,
-              query: query,
-              id: id,
-            };
-            try {
-              this.validateQuery(parsedQuery);
-              return parsedQuery;
-            } catch (error) {
-              return undefined;
-            }
-          });
-          queries = _.reject(queries, (parsedQuery: DataModels.Query) => !parsedQuery);
-          NotificationConsoleUtils.logConsoleInfo("Successfully fetched saved queries");
-          return Promise.resolve(queries);
-        },
-        (error: any) => {
-          handleError(error, "getSavedQueries", "Failed to fetch saved queries");
-          return Promise.reject(error);
-        }
-      )
-      .finally(() => clearMessage());
+    ).fetchAll();
+
+    let queries: DataModels.Query[] = _.map(results.resources, (document: DataModels.Query) => {
+      if (!document) {
+        return undefined;
+      }
+      const { id, resourceId, query, queryName } = document;
+      const parsedQuery: DataModels.Query = {
+        resourceId: resourceId,
+        queryName: queryName,
+        query: query,
+        id: id,
+      };
+      try {
+        this.validateQuery(parsedQuery);
+        return parsedQuery;
+      } catch (error) {
+        return undefined;
+      }
+    });
+    queries = _.reject(queries, (parsedQuery: DataModels.Query) => !parsedQuery);
+    NotificationConsoleUtils.logConsoleInfo("Successfully fetched saved queries");
+    clearMessage();
+    return queries;
   }
 
   public async deleteQuery(query: DataModels.Query): Promise<void> {
@@ -189,7 +177,7 @@ export class QueriesClient {
 
   private findQueriesCollection(): ViewModels.Collection {
     const queriesDatabase: ViewModels.Database = _.find(
-      this.container.databases(),
+      useDatabases.getState().databases,
       (database: ViewModels.Database) => database.id() === SavedQueries.DatabaseName
     );
     if (!queriesDatabase) {

src/Common/ResourceTree.tsx

@@ -0,0 +1,59 @@
+import React, { FunctionComponent } from "react";
+import arrowLeftImg from "../../images/imgarrowlefticon.svg";
+import refreshImg from "../../images/refresh-cosmos.svg";
+import { AuthType } from "../AuthType";
+import { userContext } from "../UserContext";
+
+export interface ResourceTreeProps {
+  toggleLeftPaneExpanded: () => void;
+  isLeftPaneExpanded: boolean;
+}
+
+export const ResourceTree: FunctionComponent<ResourceTreeProps> = ({
+  toggleLeftPaneExpanded,
+  isLeftPaneExpanded,
+}: ResourceTreeProps): JSX.Element => {
+  return (
+    <div id="main" className={isLeftPaneExpanded ? "main" : "hiddenMain"}>
+      {/* Collections Window - - Start */}
+      <div id="mainslide" className="flexContainer">
+        {/* Collections Window Title/Command Bar - Start */}
+        <div className="collectiontitle">
+          <div className="coltitle">
+            <span className="titlepadcol">{userContext.apiType} API</span>
+            <div className="float-right">
+              <span
+                className="padimgcolrefresh"
+                data-test="refreshTree"
+                role="button"
+                data-bind="click: onRefreshResourcesClick, clickBubble: false, event: { keypress: onRefreshDatabasesKeyPress }"
+                tabIndex={0}
+                aria-label="Refresh tree"
+                title="Refresh tree"
+              >
+                <img className="refreshcol" src={refreshImg} alt="Refresh Tree" />
+              </span>
+              <span
+                className="padimgcolrefresh1"
+                id="expandToggleLeftPaneButton"
+                role="button"
+                onClick={toggleLeftPaneExpanded}
+                tabIndex={0}
+                aria-label="Collapse Tree"
+                title="Collapse Tree"
+              >
+                <img className="refreshcol1" src={arrowLeftImg} alt="Hide" />
+              </span>
+            </div>
+          </div>
+        </div>
+        {userContext.authType === AuthType.ResourceToken ? (
+          <div style={{ overflowY: "auto" }} data-bind="react:resourceTreeForResourceToken" />
+        ) : (
+          <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
+        )}
+      </div>
+      {/*  Collections Window - End */}
+    </div>
+  );
+};

src/Common/Splitter.ts

@@ -1,7 +1,3 @@
-import * as ko from "knockout";
-
-import { SplitterMetrics } from "./Constants";
-
 export enum SplitterDirection {
   Horizontal = "horizontal",
   Vertical = "vertical",
@@ -28,14 +24,12 @@ export class Splitter {
   public lastX!: number;
   public lastWidth!: number;
 
-  private isCollapsed: ko.Observable<boolean>;
   private bounds: SplitterBounds;
   private direction: SplitterDirection;
 
   constructor(options: SplitterOptions) {
     this.splitterId = options.splitterId;
     this.leftSideId = options.leftId;
-    this.isCollapsed = ko.observable<boolean>(false);
     this.bounds = options.bounds;
     this.direction = options.direction;
     this.initialize();
@@ -83,23 +77,4 @@ export class Splitter {
   };
 
   private onResizeStop: JQueryUI.ResizableEvent = () => $("iframe").css("pointer-events", "auto");
-
-  public collapseLeft() {
-    this.lastX = $(this.splitter).position().left;
-    this.lastWidth = $(this.leftSide).width();
-    $(this.splitter).css("left", SplitterMetrics.CollapsedPositionLeft);
-    $(this.leftSide).css("width", "");
-    $(this.leftSide).resizable("option", "disabled", true).removeClass("ui-resizable-disabled"); // remove class so splitter is visible
-    $(this.splitter).removeClass("ui-resizable-e");
-    this.isCollapsed(true);
-  }
-
-  public expandLeft() {
-    $(this.splitter).addClass("ui-resizable-e");
-    $(this.leftSide).css("width", this.lastWidth);
-    $(this.splitter).css("left", this.lastX);
-    $(this.splitter).css("left", ""); // this ensures the splitter's position is not fixed and enables movement during resizing
-    $(this.leftSide).resizable("enable");
-    this.isCollapsed(false);
-  }
 }

src/ConfigContext.ts

@@ -28,6 +28,7 @@ export interface ConfigContext {
   armAPIVersion?: string;
   allowedJunoOrigins: string[];
   enableSchemaAnalyzer: boolean;
+  msalRedirectURI?: string;
 }
 
 // Default configuration
@@ -119,6 +120,14 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
       const armAPIVersion = params.get("armAPIVersion") || "";
       updateConfigContext({ armAPIVersion });
     }
+    if (params.has("armEndpoint")) {
+      const ARM_ENDPOINT = params.get("armEndpoint") || "";
+      updateConfigContext({ ARM_ENDPOINT });
+    }
+    if (params.has("aadEndpoint")) {
+      const AAD_ENDPOINT = params.get("aadEndpoint") || "";
+      updateConfigContext({ AAD_ENDPOINT });
+    }
     if (params.has("platform")) {
       const platform = params.get("platform");
       switch (platform) {

src/Contracts/DataModels.ts

@@ -22,6 +22,7 @@ export interface DatabaseAccountExtendedProperties {
   enableAnalyticalStorage?: boolean;
   isVirtualNetworkFilterEnabled?: boolean;
   ipRules?: IpRule[];
+  privateEndpointConnections?: unknown[];
 }
 
 export interface DatabaseAccountResponseLocation {
@@ -391,16 +392,6 @@ export interface GeospatialConfig {
   type: string;
 }
 
-export interface GatewayDatabaseAccount {
-  MediaLink: string;
-  DatabasesLink: string;
-  MaxMediaStorageUsageInMB: number;
-  CurrentMediaStorageUsageInMB: number;
-  EnableMultipleWriteLocations?: boolean;
-  WritableLocations: RegionEndpoint[];
-  ReadableLocations: RegionEndpoint[];
-}
-
 export interface RegionEndpoint {
   name: string;
   documentAccountEndpoint: string;
@@ -421,13 +412,6 @@ export interface AccountKeys {
   secondaryReadonlyMasterKey: string;
 }
 
-export interface AfecFeature {
-  id: string;
-  name: string;
-  properties: { state: string };
-  type: string;
-}
-
 export interface OperationStatus {
   status: string;
   id?: string;
@@ -507,91 +491,6 @@ export interface MongoParameters extends RpParameters {
   analyticalStorageTtl?: number;
 }
 
-export interface SparkClusterLibrary {
-  name: string;
-}
-
-export interface Library extends SparkClusterLibrary {
-  properties: {
-    kind: "Jar";
-    source: {
-      kind: "HttpsUri";
-      uri: string;
-      libraryFileName: string;
-    };
-  };
-}
-
-export interface LibraryFeedResponse {
-  value: Library[];
-}
-
-export interface ArmResource {
-  id: string;
-  location: string;
-  name: string;
-  type: string;
-  tags: { [key: string]: string };
-}
-
-export interface ArcadiaWorkspaceIdentity {
-  type: string;
-  principalId: string;
-  tenantId: string;
-}
-
-export interface ArcadiaWorkspaceProperties {
-  managedResourceGroupName: string;
-  provisioningState: string;
-  sqlAdministratorLogin: string;
-  connectivityEndpoints: {
-    artifacts: string;
-    dev: string;
-    spark: string;
-    sql: string;
-    web: string;
-  };
-  defaultDataLakeStorage: {
-    accountUrl: string;
-    filesystem: string;
-  };
-}
-
-export interface ArcadiaWorkspaceFeedResponse {
-  value: ArcadiaWorkspace[];
-}
-
-export interface ArcadiaWorkspace extends ArmResource {
-  identity: ArcadiaWorkspaceIdentity;
-  properties: ArcadiaWorkspaceProperties;
-}
-
-export interface SparkPoolFeedResponse {
-  value: SparkPool[];
-}
-
-export interface SparkPoolProperties {
-  creationDate: string;
-  sparkVersion: string;
-  nodeCount: number;
-  nodeSize: string;
-  nodeSizeFamily: string;
-  provisioningState: string;
-  autoScale: {
-    enabled: boolean;
-    minNodeCount: number;
-    maxNodeCount: number;
-  };
-  autoPause: {
-    enabled: boolean;
-    delayInMinutes: number;
-  };
-}
-
-export interface SparkPool extends ArmResource {
-  properties: SparkPoolProperties;
-}
-
 export interface MemoryUsageInfo {
   freeKB: number;
   totalKB: number;

src/Contracts/ViewModels.ts

@@ -3,11 +3,10 @@ import {
   Resource,
   StoredProcedureDefinition,
   TriggerDefinition,
-  UserDefinedFunctionDefinition,
+  UserDefinedFunctionDefinition
 } from "@azure/cosmos";
-import { CommandButtonComponentProps } from "../Explorer/Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../Explorer/Explorer";
-import { ConsoleData } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
+import { ConsoleData } from "../Explorer/Menus/NotificationConsole/ConsoleData";
 import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
 import ConflictId from "../Explorer/Tree/ConflictId";
 import DocumentId from "../Explorer/Tree/DocumentId";
@@ -15,6 +14,7 @@ import StoredProcedure from "../Explorer/Tree/StoredProcedure";
 import Trigger from "../Explorer/Tree/Trigger";
 import UserDefinedFunction from "../Explorer/Tree/UserDefinedFunction";
 import { SelfServeType } from "../SelfServe/SelfServeUtils";
+import { CollectionCreationDefaults } from "../UserContext";
 import { SqlTriggerResource } from "../Utils/arm/generatedClients/cosmos/types";
 import * as DataModels from "./DataModels";
 import { SubscriptionType } from "./SubscriptionType";
@@ -89,7 +89,6 @@ export interface Database extends TreeNode {
 
   selectedSubnodeKind: ko.Observable<CollectionTabKind>;
 
-  selectDatabase(): void;
   expandDatabase(): Promise<void>;
   collapseDatabase(): void;
 
@@ -275,8 +274,6 @@ export interface TabOptions {
   tabKind: CollectionTabKind;
   title: string;
   tabPath: string;
-  hashLocation: string;
-  onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]) => void;
   isTabsContentExpanded?: ko.Observable<boolean>;
   onLoadStartKey?: number;
 
@@ -287,6 +284,7 @@ export interface TabOptions {
   rid?: string;
   node?: TreeNode;
   theme?: string;
+  index?: number;
 }
 
 export interface DocumentsTabOptions extends TabOptions {
@@ -372,6 +370,7 @@ export enum TerminalKind {
   Default = 0,
   Mongo = 1,
   Cassandra = 2,
+  PostgreSQL = 3
 }
 
 export interface DataExplorerInputsFrame {
@@ -411,25 +410,6 @@ export interface SelfServeFrameInputs {
   flights?: readonly string[];
 }
 
-export interface CollectionCreationDefaults {
-  storage: string;
-  throughput: ThroughputDefaults;
-}
-
-export interface ThroughputDefaults {
-  fixed: number;
-  unlimited:
-    | number
-    | {
-        collectionThreshold: number;
-        lessThanOrEqualToThreshold: number;
-        greatThanThreshold: number;
-      };
-  unlimitedmax: number;
-  unlimitedmin: number;
-  shared: number;
-}
-
 export class MonacoEditorSettings {
   public readonly language: string;
   public readonly readOnly: boolean;

src/Explorer/ComponentRegisterer.test.ts

@@ -1,14 +0,0 @@
-jest.mock("monaco-editor");
-
-import * as ko from "knockout";
-import "./ComponentRegisterer";
-
-describe("Component Registerer", () => {
-  it("should register json-editor component", () => {
-    expect(ko.components.isRegistered("json-editor")).toBe(true);
-  });
-
-  it("should register dynamic-list component", () => {
-    expect(ko.components.isRegistered("dynamic-list")).toBe(true);
-  });
-});

src/Explorer/ComponentRegisterer.ts

@@ -1,12 +1,8 @@
 import * as ko from "knockout";
 import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
-import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
 import { EditorComponent } from "./Controls/Editor/EditorComponent";
 import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
-import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
 
 ko.components.register("editor", new EditorComponent());
 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);

src/Explorer/ContextMenuButtonFactory.ts

@@ -1,172 +0,0 @@
-import AddCollectionIcon from "../../images/AddCollection.svg";
-import AddSqlQueryIcon from "../../images/AddSqlQuery_16x16.svg";
-import AddStoredProcedureIcon from "../../images/AddStoredProcedure.svg";
-import AddTriggerIcon from "../../images/AddTrigger.svg";
-import AddUdfIcon from "../../images/AddUdf.svg";
-import DeleteCollectionIcon from "../../images/DeleteCollection.svg";
-import DeleteDatabaseIcon from "../../images/DeleteDatabase.svg";
-import DeleteSprocIcon from "../../images/DeleteSproc.svg";
-import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
-import DeleteUDFIcon from "../../images/DeleteUDF.svg";
-import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
-import * as ViewModels from "../Contracts/ViewModels";
-import { userContext } from "../UserContext";
-import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
-import Explorer from "./Explorer";
-import StoredProcedure from "./Tree/StoredProcedure";
-import Trigger from "./Tree/Trigger";
-import UserDefinedFunction from "./Tree/UserDefinedFunction";
-
-export interface CollectionContextMenuButtonParams {
-  databaseId: string;
-  collectionId: string;
-}
-
-export interface DatabaseContextMenuButtonParams {
-  databaseId: string;
-}
-/**
- * New resource tree (in ReactJS)
- */
-export class ResourceTreeContextMenuButtonFactory {
-  public static createDatabaseContextMenu(container: Explorer, databaseId: string): TreeNodeMenuItem[] {
-    const items: TreeNodeMenuItem[] = [
-      {
-        iconSrc: AddCollectionIcon,
-        onClick: () => container.onNewCollectionClicked(databaseId),
-        label: container.addCollectionText(),
-      },
-    ];
-
-    if (userContext.apiType !== "Tables") {
-      items.push({
-        iconSrc: DeleteDatabaseIcon,
-        onClick: () => container.openDeleteDatabaseConfirmationPane(),
-        label: container.deleteDatabaseText(),
-        styleClass: "deleteDatabaseMenuItem",
-      });
-    }
-    return items;
-  }
-
-  public static createCollectionContextMenuButton(
-    container: Explorer,
-    selectedCollection: ViewModels.Collection
-  ): TreeNodeMenuItem[] {
-    const items: TreeNodeMenuItem[] = [];
-    if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
-      items.push({
-        iconSrc: AddSqlQueryIcon,
-        onClick: () => selectedCollection && selectedCollection.onNewQueryClick(selectedCollection, null),
-        label: "New SQL Query",
-      });
-    }
-
-    if (userContext.apiType === "Mongo") {
-      items.push({
-        iconSrc: AddSqlQueryIcon,
-        onClick: () => selectedCollection && selectedCollection.onNewMongoQueryClick(selectedCollection, null),
-        label: "New Query",
-      });
-
-      items.push({
-        iconSrc: HostedTerminalIcon,
-        onClick: () => {
-          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          if (container.isShellEnabled()) {
-            container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
-          } else {
-            selectedCollection && selectedCollection.onNewMongoShellClick();
-          }
-        },
-        label: container.isShellEnabled() ? "Open Mongo Shell" : "New Shell",
-      });
-    }
-
-    if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
-      items.push({
-        iconSrc: AddStoredProcedureIcon,
-        onClick: () => {
-          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection, null);
-        },
-        label: "New Stored Procedure",
-      });
-
-      items.push({
-        iconSrc: AddUdfIcon,
-        onClick: () => {
-          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          selectedCollection && selectedCollection.onNewUserDefinedFunctionClick(selectedCollection, null);
-        },
-        label: "New UDF",
-      });
-
-      items.push({
-        iconSrc: AddTriggerIcon,
-        onClick: () => {
-          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          selectedCollection && selectedCollection.onNewTriggerClick(selectedCollection, null);
-        },
-        label: "New Trigger",
-      });
-    }
-
-    items.push({
-      iconSrc: DeleteCollectionIcon,
-      onClick: () => container.openDeleteCollectionConfirmationPane(),
-      label: container.deleteCollectionText(),
-      styleClass: "deleteCollectionMenuItem",
-    });
-
-    return items;
-  }
-
-  public static createStoreProcedureContextMenuItems(
-    container: Explorer,
-    storedProcedure: StoredProcedure
-  ): TreeNodeMenuItem[] {
-    if (userContext.apiType === "Cassandra") {
-      return [];
-    }
-
-    return [
-      {
-        iconSrc: DeleteSprocIcon,
-        onClick: () => storedProcedure.delete(),
-        label: "Delete Store Procedure",
-      },
-    ];
-  }
-
-  public static createTriggerContextMenuItems(container: Explorer, trigger: Trigger): TreeNodeMenuItem[] {
-    if (userContext.apiType === "Cassandra") {
-      return [];
-    }
-
-    return [
-      {
-        iconSrc: DeleteTriggerIcon,
-        onClick: () => trigger.delete(),
-        label: "Delete Trigger",
-      },
-    ];
-  }
-
-  public static createUserDefinedFunctionContextMenuItems(
-    container: Explorer,
-    userDefinedFunction: UserDefinedFunction
-  ): TreeNodeMenuItem[] {
-    if (userContext.apiType === "Cassandra") {
-      return [];
-    }
-
-    return [
-      {
-        iconSrc: DeleteUDFIcon,
-        onClick: () => userDefinedFunction.delete(),
-        label: "Delete User Defined Function",
-      },
-    ];
-  }
-}

src/Explorer/ContextMenuButtonFactory.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+import AddCollectionIcon from "../../images/AddCollection.svg";
+import AddSqlQueryIcon from "../../images/AddSqlQuery_16x16.svg";
+import AddStoredProcedureIcon from "../../images/AddStoredProcedure.svg";
+import AddTriggerIcon from "../../images/AddTrigger.svg";
+import AddUdfIcon from "../../images/AddUdf.svg";
+import DeleteCollectionIcon from "../../images/DeleteCollection.svg";
+import DeleteDatabaseIcon from "../../images/DeleteDatabase.svg";
+import DeleteSprocIcon from "../../images/DeleteSproc.svg";
+import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
+import DeleteUDFIcon from "../../images/DeleteUDF.svg";
+import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
+import * as ViewModels from "../Contracts/ViewModels";
+import { useSidePanel } from "../hooks/useSidePanel";
+import { userContext } from "../UserContext";
+import { getCollectionName, getDatabaseName } from "../Utils/APITypeUtils";
+import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
+import Explorer from "./Explorer";
+import { DeleteCollectionConfirmationPane } from "./Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane";
+import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
+import StoredProcedure from "./Tree/StoredProcedure";
+import Trigger from "./Tree/Trigger";
+import UserDefinedFunction from "./Tree/UserDefinedFunction";
+import { useSelectedNode } from "./useSelectedNode";
+
+export interface CollectionContextMenuButtonParams {
+  databaseId: string;
+  collectionId: string;
+}
+
+export interface DatabaseContextMenuButtonParams {
+  databaseId: string;
+}
+/**
+ * New resource tree (in ReactJS)
+ */
+export const createDatabaseContextMenu = (container: Explorer, databaseId: string): TreeNodeMenuItem[] => {
+  const items: TreeNodeMenuItem[] = [
+    {
+      iconSrc: AddCollectionIcon,
+      onClick: () => container.onNewCollectionClicked(databaseId),
+      label: `New ${getCollectionName()}`,
+    },
+  ];
+
+  if (userContext.apiType !== "Tables") {
+    items.push({
+      iconSrc: DeleteDatabaseIcon,
+      onClick: () =>
+        useSidePanel
+          .getState()
+          .openSidePanel("Delete " + getDatabaseName(), <DeleteDatabaseConfirmationPanel explorer={container} />),
+      label: `Delete ${getDatabaseName()}`,
+      styleClass: "deleteDatabaseMenuItem",
+    });
+  }
+  return items;
+};
+
+export const createCollectionContextMenuButton = (
+  container: Explorer,
+  selectedCollection: ViewModels.Collection
+): TreeNodeMenuItem[] => {
+  const items: TreeNodeMenuItem[] = [];
+  if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
+    items.push({
+      iconSrc: AddSqlQueryIcon,
+      onClick: () => selectedCollection && selectedCollection.onNewQueryClick(selectedCollection, undefined),
+      label: "New SQL Query",
+    });
+  }
+
+  if (userContext.apiType === "Mongo") {
+    items.push({
+      iconSrc: AddSqlQueryIcon,
+      onClick: () => selectedCollection && selectedCollection.onNewMongoQueryClick(selectedCollection, undefined),
+      label: "New Query",
+    });
+
+    items.push({
+      iconSrc: HostedTerminalIcon,
+      onClick: () => {
+        const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
+        if (container.isShellEnabled()) {
+          container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
+        } else {
+          selectedCollection && selectedCollection.onNewMongoShellClick();
+        }
+      },
+      label: container.isShellEnabled() ? "Open Mongo Shell" : "New Shell",
+    });
+  }
+
+  if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
+    items.push({
+      iconSrc: AddStoredProcedureIcon,
+      onClick: () => {
+        const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
+        selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection, undefined);
+      },
+      label: "New Stored Procedure",
+    });
+
+    items.push({
+      iconSrc: AddUdfIcon,
+      onClick: () => {
+        const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
+        selectedCollection && selectedCollection.onNewUserDefinedFunctionClick(selectedCollection, undefined);
+      },
+      label: "New UDF",
+    });
+
+    items.push({
+      iconSrc: AddTriggerIcon,
+      onClick: () => {
+        const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
+        selectedCollection && selectedCollection.onNewTriggerClick(selectedCollection, undefined);
+      },
+      label: "New Trigger",
+    });
+  }
+
+  items.push({
+    iconSrc: DeleteCollectionIcon,
+    onClick: () =>
+      useSidePanel
+        .getState()
+        .openSidePanel("Delete " + getCollectionName(), <DeleteCollectionConfirmationPane explorer={container} />),
+    label: `Delete ${getCollectionName()}`,
+    styleClass: "deleteCollectionMenuItem",
+  });
+
+  return items;
+};
+
+export const createStoreProcedureContextMenuItems = (
+  container: Explorer,
+  storedProcedure: StoredProcedure
+): TreeNodeMenuItem[] => {
+  if (userContext.apiType === "Cassandra") {
+    return [];
+  }
+
+  return [
+    {
+      iconSrc: DeleteSprocIcon,
+      onClick: () => storedProcedure.delete(),
+      label: "Delete Store Procedure",
+    },
+  ];
+};
+
+export const createTriggerContextMenuItems = (container: Explorer, trigger: Trigger): TreeNodeMenuItem[] => {
+  if (userContext.apiType === "Cassandra") {
+    return [];
+  }
+
+  return [
+    {
+      iconSrc: DeleteTriggerIcon,
+      onClick: () => trigger.delete(),
+      label: "Delete Trigger",
+    },
+  ];
+};
+
+export const createUserDefinedFunctionContextMenuItems = (
+  container: Explorer,
+  userDefinedFunction: UserDefinedFunction
+): TreeNodeMenuItem[] => {
+  if (userContext.apiType === "Cassandra") {
+    return [];
+  }
+
+  return [
+    {
+      iconSrc: DeleteUDFIcon,
+      onClick: () => userDefinedFunction.delete(),
+      label: "Delete User Defined Function",
+    },
+  ];
+};

src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx

@@ -1,142 +0,0 @@
-import { DefaultButton, IButtonStyles, IContextualMenuItem, IContextualMenuProps } from "@fluentui/react";
-import * as React from "react";
-import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
-import * as Logger from "../../../Common/Logger";
-import { ArcadiaWorkspace, SparkPool } from "../../../Contracts/DataModels";
-
-export interface ArcadiaMenuPickerProps {
-  selectText?: string;
-  disableSubmenu?: boolean;
-  selectedSparkPool: string;
-  workspaces: ArcadiaWorkspaceItem[];
-  onSparkPoolSelect: (
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    item: IContextualMenuItem
-  ) => boolean | void;
-  onCreateNewWorkspaceClicked: () => boolean | void;
-  onCreateNewSparkPoolClicked: (workspaceResourceId: string) => boolean | void;
-}
-
-interface ArcadiaMenuPickerStates {
-  selectedSparkPool: string;
-}
-
-export interface ArcadiaWorkspaceItem extends ArcadiaWorkspace {
-  sparkPools: SparkPool[];
-}
-
-export class ArcadiaMenuPicker extends React.Component<ArcadiaMenuPickerProps, ArcadiaMenuPickerStates> {
-  constructor(props: ArcadiaMenuPickerProps) {
-    super(props);
-    this.state = {
-      selectedSparkPool: props.selectedSparkPool,
-    };
-  }
-
-  private _onSparkPoolClicked = (
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    item: IContextualMenuItem
-  ): boolean | void => {
-    try {
-      this.props.onSparkPoolSelect(e, item);
-      this.setState({
-        selectedSparkPool: item.text,
-      });
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "ArcadiaMenuPicker/_onSparkPoolClicked");
-      throw error;
-    }
-  };
-
-  private _onCreateNewWorkspaceClicked = (
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    item: IContextualMenuItem
-  ): boolean | void => {
-    this.props.onCreateNewWorkspaceClicked();
-  };
-
-  private _onCreateNewSparkPoolClicked = (
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    item: IContextualMenuItem
-  ): boolean | void => {
-    this.props.onCreateNewSparkPoolClicked(item.key);
-  };
-
-  public render() {
-    const { workspaces } = this.props;
-    let workspaceMenuItems: IContextualMenuItem[] = workspaces.map((workspace) => {
-      let sparkPoolsMenuProps: IContextualMenuProps = {
-        items: workspace.sparkPools.map(
-          (sparkpool): IContextualMenuItem => ({
-            key: sparkpool.id,
-            text: sparkpool.name,
-            onClick: this._onSparkPoolClicked,
-          })
-        ),
-      };
-      if (!sparkPoolsMenuProps.items.length) {
-        sparkPoolsMenuProps.items.push({
-          key: workspace.id,
-          text: "Create new spark pool",
-          onClick: this._onCreateNewSparkPoolClicked,
-        });
-      }
-
-      return {
-        key: workspace.id,
-        text: workspace.name,
-        subMenuProps: this.props.disableSubmenu ? undefined : sparkPoolsMenuProps,
-      };
-    });
-
-    if (!workspaceMenuItems.length) {
-      workspaceMenuItems.push({
-        key: "create_workspace",
-        text: "Create new workspace",
-        onClick: this._onCreateNewWorkspaceClicked,
-      });
-    }
-
-    const dropdownStyle: IButtonStyles = {
-      root: {
-        backgroundColor: "transparent",
-        margin: "auto 5px",
-        padding: "0",
-        border: "0",
-      },
-      rootHovered: {
-        backgroundColor: "transparent",
-      },
-      rootChecked: {
-        backgroundColor: "transparent",
-      },
-      rootFocused: {
-        backgroundColor: "transparent",
-      },
-      rootExpanded: {
-        backgroundColor: "transparent",
-      },
-      flexContainer: {
-        height: "30px",
-        border: "1px solid #a6a6a6",
-        padding: "0 8px",
-      },
-      label: {
-        fontWeight: "400",
-        fontSize: "12px",
-      },
-    };
-
-    return (
-      <DefaultButton
-        text={this.state.selectedSparkPool || this.props.selectText || "Select a Spark pool"}
-        persistMenu={true}
-        className="arcadia-menu-picker"
-        menuProps={{
-          items: workspaceMenuItems,
-        }}
-        styles={dropdownStyle}
-      />
-    );
-  }
-}

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -1,15 +1,12 @@
-import * as StringUtils from "../../../Utils/StringUtils";
-import { KeyCodes } from "../../../Common/Constants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import CollapseChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
-
 /**
  * React component for Command button component.
  */
-
 import * as React from "react";
-import { ArcadiaMenuPickerProps } from "../Arcadia/ArcadiaMenuPicker";
+import CollapseChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
+import { KeyCodes } from "../../../Common/Constants";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as StringUtils from "../../../Utils/StringUtils";
 
 /**
  * Options for this component
@@ -114,15 +111,6 @@ export interface CommandButtonComponentProps {
    * Aria-label for the button
    */
   ariaLabel: string;
-  //TODO: generalize customized command bar
-  /**
-   * If set to true, will render arcadia picker
-   */
-  isArcadiaPicker?: boolean;
-  /**
-   * props to render arcadia picker
-   */
-  arcadiaProps?: ArcadiaMenuPickerProps;
 }
 
 export class CommandButtonComponent extends React.Component<CommandButtonComponentProps> {

src/Explorer/Controls/DynamicList/DynamicList.test.ts

@@ -1,64 +0,0 @@
-import * as ko from "knockout";
-import { DynamicListComponent, DynamicListParams, DynamicListItem } from "./DynamicListComponent";
-
-const $ = (selector: string) => document.querySelector(selector) as HTMLElement;
-
-function buildComponent(buttonOptions: any) {
-  document.body.innerHTML = DynamicListComponent.template as any;
-  const vm = new DynamicListComponent.viewModel(buttonOptions);
-  ko.applyBindings(vm);
-}
-
-describe("Dynamic List Component", () => {
-  const mockPlaceHolder = "Write here";
-  const mockButton = "Add something";
-  const mockValue = "/someText";
-  const mockAriaLabel = "Add ariaLabel";
-  const items: ko.ObservableArray<DynamicListItem> = ko.observableArray<DynamicListItem>();
-
-  function buildListOptions(
-    items: ko.ObservableArray<DynamicListItem>,
-    placeholder?: string,
-    mockButton?: string
-  ): DynamicListParams {
-    return {
-      placeholder: placeholder,
-      listItems: items,
-      buttonText: mockButton,
-      ariaLabel: mockAriaLabel,
-    };
-  }
-
-  afterEach(() => {
-    ko.cleanNode(document);
-  });
-
-  describe("Rendering", () => {
-    it("should display button text", () => {
-      const params = buildListOptions(items, mockPlaceHolder, mockButton);
-      buildComponent(params);
-      expect($(".dynamicListItemAdd").textContent).toContain(mockButton);
-    });
-  });
-
-  describe("Behavior", () => {
-    it("should add items to the list", () => {
-      const params = buildListOptions(items, mockPlaceHolder, mockButton);
-      buildComponent(params);
-      $(".dynamicListItemAdd").click();
-      expect(items().length).toBe(1);
-      const input = document.getElementsByClassName("dynamicListItem").item(0).children[0];
-      input.setAttribute("value", mockValue);
-      input.dispatchEvent(new Event("change"));
-      input.dispatchEvent(new Event("blur"));
-      expect(items()[0].value()).toBe(mockValue);
-    });
-
-    it("should remove items from the list", () => {
-      const params = buildListOptions(items, mockPlaceHolder);
-      buildComponent(params);
-      $(".dynamicListItemDelete").click();
-      expect(items().length).toBe(0);
-    });
-  });
-});

src/Explorer/Controls/DynamicList/DynamicListComponent.less

@@ -1,59 +0,0 @@
-@import "../../../../less/Common/Constants";
-
-.dynamicList {
-    width: 100%;
-
-    .dynamicListContainer {
-        .dynamicListItem {
-            justify-content: space-around;
-            margin-bottom: @MediumSpace;
-
-            input {
-                width: @newCollectionPaneInputWidth;
-                margin: auto;
-                font-size: @mediumFontSize;
-                padding: @SmallSpace @DefaultSpace;
-                color: @BaseDark;
-            }
-
-            .dynamicListItemDelete {
-                padding: @SmallSpace @SmallSpace @DefaultSpace;
-                margin-left: @SmallSpace;
-
-                &:hover {
-                    .hover();
-                }
-
-                &:active {
-                    .active();
-                }
-
-                img {
-                    .dataExplorerIcons();
-                }
-            }
-        }
-    }
-
-    .dynamicListItemNew {
-        margin-top: @LargeSpace;
-
-        .dynamicListItemAdd {
-            padding: @DefaultSpace;
-            cursor: pointer;
-
-            &:hover {
-                .hover();
-            }
-
-            &:active {
-                .active();
-            }
-
-            img {
-                .dataExplorerIcons();
-                margin: 0px @SmallSpace @SmallSpace 0px; 
-            }
-        }
-    }
-}

src/Explorer/Controls/DynamicList/DynamicListComponent.ts

@@ -1,117 +0,0 @@
-/**
- * Dynamic list:
- *
- * Creates a list of dynamic inputs that can be populated and deleted.
- *
- * How to use in your markup:
- * <dynamic-list params="{ listItems: anObservableArrayOfDynamicListItem, placeholder: 'Text to display in placeholder',  ariaLabel: 'Text for aria-label', buttonText: 'Add item' }">
- * </dynamic-list>
- *
- */
-
-import * as ko from "knockout";
-import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
-import { KeyCodes } from "../../../Common/Constants";
-import template from "./dynamic-list.html";
-
-/**
- * Parameters for this component
- */
-export interface DynamicListParams {
-  /**
-   * Observable list of items to update
-   */
-  listItems: ko.ObservableArray<DynamicListItem>;
-
-  /**
-   * Placeholder text to use on inputs
-   */
-  placeholder?: string;
-
-  /**
-   * Text to use as aria-label
-   */
-  ariaLabel: string;
-
-  /**
-   * Text for the button to add items
-   */
-  buttonText?: string;
-
-  /**
-   * Callback triggered when the template is bound to the component (for testing purposes)
-   */
-  onTemplateReady?: () => void;
-}
-
-/**
- * Item in the dynamic list
- */
-export interface DynamicListItem {
-  value: ko.Observable<string>;
-}
-
-export class DynamicListViewModel extends WaitsForTemplateViewModel {
-  public placeholder: string;
-  public ariaLabel: string;
-  public buttonText: string;
-  public newItem: ko.Observable<string>;
-  public isTemplateReady: ko.Observable<boolean>;
-  public listItems: ko.ObservableArray<DynamicListItem>;
-
-  public constructor(options: DynamicListParams) {
-    super();
-    super.onTemplateReady((isTemplateReady: boolean) => {
-      if (isTemplateReady && options.onTemplateReady) {
-        options.onTemplateReady();
-      }
-    });
-
-    const params: DynamicListParams = options;
-    const paramsPlaceholder: string = params.placeholder;
-    const paramsButtonText: string = params.buttonText;
-    this.placeholder = paramsPlaceholder || "Write a value";
-    this.ariaLabel = "Unique keys";
-    this.buttonText = paramsButtonText || "Add item";
-    this.listItems = params.listItems || ko.observableArray<DynamicListItem>();
-    this.newItem = ko.observable("");
-  }
-
-  public removeItem = (data: any, event: MouseEvent | KeyboardEvent): void => {
-    const context = ko.contextFor(event.target as Node);
-    this.listItems.splice(context.$index(), 1);
-    document.getElementById("addUniqueKeyBtn").focus();
-  };
-
-  public onRemoveItemKeyPress = (data: any, event: KeyboardEvent, source: any): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.removeItem(data, event);
-      (document.querySelector(".dynamicListItem:last-of-type input") as HTMLElement).focus();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-
-  public addItem(): void {
-    this.listItems.push({ value: ko.observable("") });
-    (document.querySelector(".dynamicListItem:last-of-type input") as HTMLElement).focus();
-  }
-
-  public onAddItemKeyPress = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.addItem();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-}
-
-/**
- * Helper class for ko component registration
- */
-export const DynamicListComponent = {
-  viewModel: DynamicListViewModel,
-  template,
-};

src/Explorer/Controls/DynamicList/dynamic-list.html

@@ -1,34 +0,0 @@
-<div class="dynamicList" data-bind="setTemplateReady: true">
-  <div class="dynamicListContainer" data-bind="foreach: listItems">
-    <div class="dynamicListItem">
-      <input
-        id="uniqueKeyItems"
-        type="text"
-        autocomplete="off"
-        data-bind="value: value, attr: {placeholder: $parent.placeholder, 'aria-label': $parent.ariaLabel}"
-      />
-      <span
-        class="dynamicListItemDelete"
-        title="Remove item"
-        role="button"
-        aria-label="Remove item"
-        tabindex="0"
-        data-bind="click: $parent.removeItem, event: { keydown: $parent.onRemoveItemKeyPress }"
-      >
-        <img src="/delete.svg" alt="Remove item" />
-      </span>
-    </div>
-  </div>
-  <div class="dynamicListItemNew">
-    <span
-      class="dynamicListItemAdd"
-      id="addUniqueKeyBtn"
-      role="button"
-      aria-label="Add unique key"
-      tabindex="0"
-      data-bind="click: addItem, event: { keydown: onAddItemKeyPress }"
-    >
-      <img src="/Add-property.svg" data-bind="attr: {alt: buttonText}" /> <span data-bind="text: buttonText"></span>
-    </span>
-  </div>
-</div>

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -1,6 +1,11 @@
+import { Spinner, SpinnerSize } from "@fluentui/react";
 import * as React from "react";
 import { loadMonaco, monaco } from "../../LazyMonaco";
+// import "./EditorReact.less";
 
+interface EditorReactStates {
+  showEditor: boolean;
+}
 export interface EditorReactProps {
   language: string;
   content: string;
@@ -12,22 +17,26 @@ export interface EditorReactProps {
   theme?: string; // Monaco editor theme
 }
 
-export class EditorReact extends React.Component<EditorReactProps> {
+export class EditorReact extends React.Component<EditorReactProps, EditorReactStates> {
   private rootNode: HTMLElement;
   private editor: monaco.editor.IStandaloneCodeEditor;
   private selectionListener: monaco.IDisposable;
 
   public constructor(props: EditorReactProps) {
     super(props);
+    this.state = {
+      showEditor: false,
+    };
   }
 
   public componentDidMount(): void {
     this.createEditor(this.configureEditor.bind(this));
   }
 
-  public shouldComponentUpdate(): boolean {
-    // Prevents component re-rendering
-    return false;
+  public componentDidUpdate(previous: EditorReactProps) {
+    if (this.props.content !== previous.content) {
+      this.editor.setValue(this.props.content);
+    }
   }
 
   public componentWillUnmount(): void {
@@ -35,7 +44,12 @@ export class EditorReact extends React.Component<EditorReactProps> {
   }
 
   public render(): JSX.Element {
-    return <div className="jsonEditor" ref={(elt: HTMLElement) => this.setRef(elt)} />;
+    return (
+      <React.Fragment>
+        {!this.state.showEditor && <Spinner size={SpinnerSize.large} className="spinner" />}
+        <div className="jsonEditor" ref={(elt: HTMLElement) => this.setRef(elt)} />
+      </React.Fragment>
+    );
   }
 
   protected configureEditor(editor: monaco.editor.IStandaloneCodeEditor) {
@@ -76,6 +90,12 @@ export class EditorReact extends React.Component<EditorReactProps> {
     this.rootNode.innerHTML = "";
     const monaco = await loadMonaco();
     createCallback(monaco.editor.create(this.rootNode, options));
+
+    if (this.rootNode.innerHTML) {
+      this.setState({
+        showEditor: true,
+      });
+    }
   }
 
   private setRef(element: HTMLElement): void {

src/Explorer/Controls/GitHub/GitHubReposComponentAdapter.tsx

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

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -55,7 +55,7 @@ export class NotebookViewerComponent
       databaseAccountName: undefined,
       defaultExperience: "NotebookViewer",
       isReadOnly: true,
-      cellEditorType: "monaco",
+      cellEditorType: "codemirror",
       autoSaveInterval: 365 * 24 * 3600 * 1000, // There is no way to turn off auto-save, set to 1 year
       contentProvider: contents.JupyterContentProvider, // NotebookViewer only knows how to talk to Jupyter contents API
     });

src/Explorer/Controls/Settings/SettingsComponent.test.tsx

@@ -38,8 +38,6 @@ describe("SettingsComponent", () => {
       title: "Scale & Settings",
       tabPath: "",
       node: undefined,
-      hashLocation: "settings",
-      onUpdateTabsButtons: undefined,
     }),
   };
 
@@ -128,7 +126,6 @@ describe("SettingsComponent", () => {
       isDatabaseExpanded: undefined,
       isDatabaseShared: ko.computed(() => true),
       selectedSubnodeKind: undefined,
-      selectDatabase: undefined,
       expandDatabase: undefined,
       collapseDatabase: undefined,
       loadCollections: undefined,

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -16,8 +16,9 @@ import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/T
 import { userContext } from "../../../UserContext";
 import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import Explorer from "../../Explorer";
+import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter";
 import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
 import "./SettingsComponent.less";
 import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
@@ -109,6 +110,7 @@ export interface SettingsComponentState {
 
   initialNotification: DataModels.Notification;
   selectedTab: SettingsV2TabTypes;
+  offerLoaded: boolean;
 }
 
 export class SettingsComponent extends React.Component<SettingsComponentProps, SettingsComponentState> {
@@ -121,7 +123,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private collection: ViewModels.Collection;
   private database: ViewModels.Database;
   private offer: DataModels.Offer;
-  private container: Explorer;
   private changeFeedPolicyVisible: boolean;
   private isFixedContainer: boolean;
   private shouldShowIndexingPolicyEditor: boolean;
@@ -133,7 +134,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     this.isCollectionSettingsTab = this.props.settingsTab.tabKind === ViewModels.CollectionTabKind.CollectionSettingsV2;
     if (this.isCollectionSettingsTab) {
       this.collection = this.props.settingsTab.collection as ViewModels.Collection;
-      this.container = this.collection?.container;
       this.offer = this.collection?.offer();
       this.isAnalyticalStorageEnabled = !!this.collection?.analyticalStorageTtl();
       this.shouldShowIndexingPolicyEditor = userContext.apiType !== "Cassandra" && userContext.apiType !== "Mongo";
@@ -145,7 +145,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         userContext.apiType === "Mongo" && (!this.collection?.partitionKey || this.collection?.partitionKey.systemKey);
     } else {
       this.database = this.props.settingsTab.database;
-      this.container = this.database?.container;
       this.offer = this.database?.offer();
     }
 
@@ -196,6 +195,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
       initialNotification: undefined,
       selectedTab: SettingsV2TabTypes.ScaleTab,
+      offerLoaded: !!this.offer,
     };
 
     this.saveSettingsButton = {
@@ -217,18 +217,19 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     if (this.isCollectionSettingsTab) {
       this.refreshIndexTransformationProgress();
       this.loadMongoIndexes();
+      this.loadCollectionOffer();
     }
 
     this.setAutoPilotStates();
     this.setBaseline();
     if (this.props.settingsTab.isActive()) {
-      this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
+      useCommandBar.getState().setContextButtons(this.getTabsButtons());
     }
   }
 
   componentDidUpdate(): void {
     if (this.props.settingsTab.isActive()) {
-      this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
+      useCommandBar.getState().setContextButtons(this.getTabsButtons());
     }
   }
 
@@ -293,7 +294,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     this.state.wasAutopilotOriginallySet !== this.state.isAutoPilotSelected;
 
   public shouldShowKeyspaceSharedThroughputMessage = (): boolean =>
-    this.container && userContext.apiType === "Cassandra" && hasDatabaseSharedThroughput(this.collection);
+    userContext.apiType === "Cassandra" && hasDatabaseSharedThroughput(this.collection);
 
   public hasConflictResolution = (): boolean =>
     userContext?.databaseAccount?.properties?.enableMultipleWriteLocations &&
@@ -371,6 +372,34 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     });
   };
 
+  private async loadCollectionOffer() {
+    try {
+      this.props.settingsTab.isExecuting(true);
+      await this.collection.loadOffer();
+      this.props.settingsTab.tabTitle(this.collection.offer() ? "Settings" : "Scale & Settings");
+      this.setState({ offerLoaded: true });
+    } catch (error) {
+      this.props.settingsTab.isExecutionError(true);
+      const errorMessage = getErrorMessage(error);
+      traceFailure(
+        Action.Tab,
+        {
+          databaseName: this.collection.databaseId,
+          collectionName: this.collection.id(),
+
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle: this.props.settingsTab.tabTitle,
+          error: errorMessage,
+          errorStack: getErrorStack(error),
+        },
+        this.props.settingsTab.onLoadStartKey
+      );
+      logConsoleError(`Error while fetching container settings for container ${this.collection.id()}: ${errorMessage}`);
+    } finally {
+      this.props.settingsTab.isExecuting(false);
+    }
+  }
+
   private getMongoIndexesToSave = (): MongoIndex[] => {
     let finalIndexes: MongoIndex[] = [];
     this.state.currentMongoIndexes?.map((mongoIndex: MongoIndex, index: number) => {
@@ -883,7 +912,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     const scaleComponentProps: ScaleComponentProps = {
       collection: this.collection,
       database: this.database,
-      container: this.container,
       isFixedContainer: this.isFixedContainer,
       onThroughputChange: this.onThroughputChange,
       throughput: this.state.throughput,
@@ -909,9 +937,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       );
     }
 
+    if (!this.state.offerLoaded) {
+      return <></>;
+    }
+
     const subSettingsComponentProps: SubSettingsComponentProps = {
       collection: this.collection,
-      container: this.container,
       isAnalyticalStorageEnabled: this.isAnalyticalStorageEnabled,
       changeFeedPolicyVisible: this.changeFeedPolicyVisible,
       timeToLive: this.state.timeToLive,
@@ -964,7 +995,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
     const conflictResolutionPolicyComponentProps: ConflictResolutionComponentProps = {
       collection: this.collection,
-      container: this.container,
       conflictResolutionPolicyMode: this.state.conflictResolutionPolicyMode,
       conflictResolutionPolicyModeBaseline: this.state.conflictResolutionPolicyModeBaseline,
       onConflictResolutionPolicyModeChange: this.onConflictResolutionPolicyModeChange,

src/Explorer/Controls/Settings/SettingsComponentAdapter.tsx

@@ -1,14 +0,0 @@
-import ko from "knockout";
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import { SettingsComponent, SettingsComponentProps } from "./SettingsComponent";
-
-export class SettingsComponentAdapter implements ReactAdapter {
-  public parameters: ko.Computed<boolean>;
-
-  constructor(private props: SettingsComponentProps) {}
-
-  public renderComponent(): JSX.Element {
-    return this.parameters() ? <SettingsComponent {...this.props} /> : <></>;
-  }
-}

src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.test.tsx

@@ -1,13 +1,12 @@
 import { shallow } from "enzyme";
 import React from "react";
-import { ConflictResolutionComponentProps, ConflictResolutionComponent } from "./ConflictResolutionComponent";
-import { container, collection } from "../TestUtils";
 import * as DataModels from "../../../../Contracts/DataModels";
+import { collection } from "../TestUtils";
+import { ConflictResolutionComponent, ConflictResolutionComponentProps } from "./ConflictResolutionComponent";
 
 describe("ConflictResolutionComponent", () => {
   const baseProps: ConflictResolutionComponentProps = {
     collection: collection,
-    container: container,
     conflictResolutionPolicyMode: DataModels.ConflictResolutionMode.Custom,
     conflictResolutionPolicyModeBaseline: DataModels.ConflictResolutionMode.Custom,
     onConflictResolutionPolicyModeChange: () => {

src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx

@@ -1,21 +1,19 @@
+import { ChoiceGroup, IChoiceGroupOption, ITextFieldProps, Stack, TextField } from "@fluentui/react";
 import * as React from "react";
-import * as ViewModels from "../../../../Contracts/ViewModels";
 import * as DataModels from "../../../../Contracts/DataModels";
-import Explorer from "../../../Explorer";
+import * as ViewModels from "../../../../Contracts/ViewModels";
 import {
-  getTextFieldStyles,
-  conflictResolutionLwwTooltip,
   conflictResolutionCustomToolTip,
-  subComponentStackProps,
+  conflictResolutionLwwTooltip,
   getChoiceGroupStyles,
+  getTextFieldStyles,
+  subComponentStackProps,
 } from "../SettingsRenderUtils";
-import { TextField, ITextFieldProps, Stack, IChoiceGroupOption, ChoiceGroup } from "@fluentui/react";
-import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 import { isDirty } from "../SettingsUtils";
+import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 
 export interface ConflictResolutionComponentProps {
   collection: ViewModels.Collection;
-  container: Explorer;
   conflictResolutionPolicyMode: DataModels.ConflictResolutionMode;
   conflictResolutionPolicyModeBaseline: DataModels.ConflictResolutionMode;
   onConflictResolutionPolicyModeChange: (newMode: DataModels.ConflictResolutionMode) => void;

src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx

@@ -7,20 +7,17 @@ import * as SharedConstants from "../../../../Shared/Constants";
 import { updateUserContext } from "../../../../UserContext";
 import Explorer from "../../../Explorer";
 import { throughputUnit } from "../SettingsRenderUtils";
-import { collection, container } from "../TestUtils";
+import { collection } from "../TestUtils";
 import { ScaleComponent, ScaleComponentProps } from "./ScaleComponent";
 import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
 
 describe("ScaleComponent", () => {
   const nonNationalCloudContainer = new Explorer();
-  nonNationalCloudContainer.isRunningOnNationalCloud = () => false;
-
   const targetThroughput = 6000;
 
   const baseProps: ScaleComponentProps = {
     collection: collection,
     database: undefined,
-    container: container,
     isFixedContainer: false,
     onThroughputChange: () => {
       return;
@@ -111,7 +108,7 @@ describe("ScaleComponent", () => {
     let scaleComponent = new ScaleComponent(baseProps);
     expect(scaleComponent.getThroughputTitle()).toEqual("Throughput (6,000 - unlimited RU/s)");
 
-    let newProps = { ...baseProps, container: nonNationalCloudContainer };
+    let newProps = { ...baseProps };
     scaleComponent = new ScaleComponent(newProps);
     expect(scaleComponent.getThroughputTitle()).toEqual("Throughput (6,000 - unlimited RU/s)");
 
@@ -124,7 +121,7 @@ describe("ScaleComponent", () => {
     let scaleComponent = new ScaleComponent(baseProps);
     expect(scaleComponent.canThroughputExceedMaximumValue()).toEqual(true);
 
-    const newProps = { ...baseProps, container: nonNationalCloudContainer };
+    const newProps = { ...baseProps };
     scaleComponent = new ScaleComponent(newProps);
     expect(scaleComponent.canThroughputExceedMaximumValue()).toEqual(true);
   });

src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx

@@ -7,7 +7,7 @@ import * as ViewModels from "../../../../Contracts/ViewModels";
 import * as SharedConstants from "../../../../Shared/Constants";
 import { userContext } from "../../../../UserContext";
 import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
-import Explorer from "../../../Explorer";
+import { isRunningOnNationalCloud } from "../../../../Utils/CloudUtils";
 import {
   getTextFieldStyles,
   getThroughputApplyLongDelayMessage,
@@ -23,7 +23,6 @@ import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents
 export interface ScaleComponentProps {
   collection: ViewModels.Collection;
   database: ViewModels.Database;
-  container: Explorer;
   isFixedContainer: boolean;
   onThroughputChange: (newThroughput: number) => void;
   throughput: number;
@@ -109,11 +108,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   };
 
   public canThroughputExceedMaximumValue = (): boolean => {
-    return (
-      !this.props.isFixedContainer &&
-      configContext.platform === Platform.Portal &&
-      !this.props.container.isRunningOnNationalCloud()
-    );
+    return !this.props.isFixedContainer && configContext.platform === Platform.Portal && !isRunningOnNationalCloud();
   };
 
   public getInitialNotificationElement = (): JSX.Element => {

src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.test.tsx

@@ -4,14 +4,12 @@ import { DatabaseAccount } from "../../../../Contracts/DataModels";
 import { updateUserContext } from "../../../../UserContext";
 import Explorer from "../../../Explorer";
 import { ChangeFeedPolicyState, GeospatialConfigType, TtlOff, TtlOn, TtlOnNoDefault, TtlType } from "../SettingsUtils";
-import { collection, container } from "../TestUtils";
+import { collection } from "../TestUtils";
 import { SubSettingsComponent, SubSettingsComponentProps } from "./SubSettingsComponent";
 
 describe("SubSettingsComponent", () => {
   const baseProps: SubSettingsComponentProps = {
     collection: collection,
-    container: container,
-
     timeToLive: TtlType.On,
     timeToLiveBaseline: TtlType.On,
     onTtlChange: () => {

src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx

@@ -2,7 +2,6 @@ import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text,
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import { userContext } from "../../../../UserContext";
-import Explorer from "../../../Explorer";
 import { Int32 } from "../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
 import {
   changeFeedPolicyToolTip,
@@ -28,8 +27,6 @@ import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 
 export interface SubSettingsComponentProps {
   collection: ViewModels.Collection;
-  container: Explorer;
-
   timeToLive: TtlType;
   timeToLiveBaseline: TtlType;
 

src/Explorer/Controls/Settings/SettingsUtils.test.tsx

@@ -36,7 +36,6 @@ describe("SettingsUtils", () => {
         isDatabaseExpanded: ko.observable(false),
         isDatabaseShared: ko.computed(() => true),
         selectedSubnodeKind: ko.observable(undefined),
-        selectDatabase: undefined,
         expandDatabase: undefined,
         collapseDatabase: undefined,
         loadCollections: undefined,

src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx

@@ -4,7 +4,7 @@ import { ThroughputInput } from "./ThroughputInput";
 const props = {
   isDatabase: false,
   showFreeTierExceedThroughputTooltip: true,
-  isSharded: false,
+  isSharded: true,
   setThroughputValue: () => jest.fn(),
   setIsAutoscale: () => jest.fn(),
   onCostAcknowledgeChange: () => jest.fn(),

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -41,9 +41,16 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
       throughputHeaderText = AutoPilotUtils.getAutoPilotHeaderText().toLocaleLowerCase();
     } else {
       const minRU: string = SharedConstants.CollectionCreation.DefaultCollectionRUs400.toLocaleString();
-      const maxRU: string = userContext.isTryCosmosDBSubscription
-        ? Constants.TryCosmosExperience.maxRU.toLocaleString()
-        : "unlimited";
+
+      let maxRU: string;
+      if (userContext.isTryCosmosDBSubscription) {
+        maxRU = Constants.TryCosmosExperience.maxRU.toLocaleString();
+      } else if (!isSharded) {
+        maxRU = "10000";
+      } else {
+        maxRU = "unlimited";
+      }
+
       throughputHeaderText = `throughput (${minRU} - ${maxRU} RU/s)`;
     }
     return `${isDatabase ? "Database" : getCollectionName()} ${throughputHeaderText}`;

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts

@@ -1,308 +0,0 @@
-import * as ko from "knockout";
-import { KeyCodes } from "../../../Common/Constants";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { FreeTierLimits } from "../../../Shared/Constants";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
-import ThroughputInputComponentAutoscaleV3 from "./ThroughputInputComponentAutoscaleV3.html";
-
-/**
- * Throughput Input:
- *
- * Creates a set of controls to input, sanitize and increase/decrease throughput
- *
- * How to use in your markup:
- * <throughput-input params="{ value: anObservableToHoldTheValue, minimum: anObservableWithMinimum, maximum: anObservableWithMaximum }">
- * </throughput-input>
- *
- */
-
-/**
- * Parameters for this component
- */
-export interface ThroughputInputParams {
-  /**
-   * Callback triggered when the template is bound to the component (for testing purposes)
-   */
-  onTemplateReady?: () => void;
-
-  /**
-   * Observable to bind the Throughput value to
-   */
-  value: ViewModels.Editable<number>;
-
-  /**
-   * Text to use as id for testing
-   */
-  testId: string;
-
-  /**
-   * Text to use as aria-label
-   */
-  ariaLabel?: ko.Observable<string>;
-
-  /**
-   * Minimum value in the range
-   */
-  minimum: ko.Observable<number>;
-
-  /**
-   * Maximum value in the range
-   */
-  maximum: ko.Observable<number>;
-
-  /**
-   * Step value for increase/decrease
-   */
-  step?: number;
-
-  /**
-   * Observable to bind the Throughput enabled status
-   */
-  isEnabled?: ko.Observable<boolean>;
-
-  /**
-   * Should show pricing controls
-   */
-  costsVisible: ko.Observable<boolean>;
-
-  /**
-   * RU price
-   */
-  requestUnitsUsageCost: ko.Computed<string>; // Our code assigns to ko.Computed, but unit test assigns to ko.Observable
-
-  /**
-   * State of the spending acknowledge checkbox
-   */
-  spendAckChecked?: ko.Observable<boolean>;
-
-  /**
-   * id of the spending acknowledge checkbox
-   */
-  spendAckId?: ko.Observable<string>;
-
-  /**
-   * spending acknowledge text
-   */
-  spendAckText?: ko.Observable<string>;
-
-  /**
-   * Show spending acknowledge controls
-   */
-  spendAckVisible?: ko.Observable<boolean>;
-
-  /**
-   * Display * to the left of the label
-   */
-  showAsMandatory: boolean;
-
-  /**
-   * If true, it will display a text to prompt users to use unlimited collections to go beyond max for fixed
-   */
-  isFixed: boolean;
-
-  /**
-   * Label of the provisioned throughut control
-   */
-  label: ko.Observable<string>;
-
-  /**
-   * Text of the info bubble for provisioned throughut control
-   */
-  infoBubbleText?: ko.Observable<string>;
-
-  /**
-   * Computed value that decides if value can exceed maximum allowable value
-   */
-  canExceedMaximumValue?: ko.Computed<boolean>;
-
-  /**
-   * CSS classes to apply on input element
-   */
-  cssClass?: string;
-
-  isAutoPilotSelected: ko.Observable<boolean>;
-  throughputAutoPilotRadioId: string;
-  throughputProvisionedRadioId: string;
-  throughputModeRadioName: string;
-  maxAutoPilotThroughputSet: ViewModels.Editable<number>;
-  autoPilotUsageCost: ko.Computed<string>;
-  overrideWithAutoPilotSettings: ko.Observable<boolean>;
-  overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
-  freeTierExceedThroughputTooltip?: ko.Observable<string>;
-  freeTierExceedThroughputWarning?: ko.Observable<string>;
-}
-
-export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
-  public ariaLabel: ko.Observable<string>;
-  public canExceedMaximumValue: ko.Computed<boolean>;
-  public step: ko.Computed<number>;
-  public testId: string;
-  public value: ViewModels.Editable<number>;
-  public minimum: ko.Observable<number>;
-  public maximum: ko.Observable<number>;
-  public isEnabled: ko.Observable<boolean>;
-  public cssClass: string;
-  public decreaseButtonAriaLabel: string;
-  public increaseButtonAriaLabel: string;
-  public costsVisible: ko.Observable<boolean>;
-  public requestUnitsUsageCost: ko.Computed<string>;
-  public spendAckChecked: ko.Observable<boolean>;
-  public spendAckId: ko.Observable<string>;
-  public spendAckText: ko.Observable<string>;
-  public spendAckVisible: ko.Observable<boolean>;
-  public showAsMandatory: boolean;
-  public infoBubbleText: string | ko.Observable<string>;
-  public label: ko.Observable<string>;
-  public isFixed: boolean;
-  public isAutoPilotSelected: ko.Observable<boolean>;
-  public throughputAutoPilotRadioId: string;
-  public throughputProvisionedRadioId: string;
-  public throughputModeRadioName: string;
-  public maxAutoPilotThroughputSet: ko.Observable<number>;
-  public autoPilotUsageCost: ko.Computed<string>;
-  public minAutoPilotThroughput: ko.Observable<number>;
-  public overrideWithAutoPilotSettings: ko.Observable<boolean>;
-  public overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
-  public isManualThroughputInputFieldRequired: ko.Computed<boolean>;
-  public isAutoscaleThroughputInputFieldRequired: ko.Computed<boolean>;
-  public freeTierExceedThroughputTooltip: ko.Observable<string>;
-  public freeTierExceedThroughputWarning: ko.Observable<string>;
-  public showFreeTierExceedThroughputTooltip: ko.Computed<boolean>;
-  public showFreeTierExceedThroughputWarning: ko.Computed<boolean>;
-
-  public constructor(options: ThroughputInputParams) {
-    super();
-    super.onTemplateReady((isTemplateReady: boolean) => {
-      if (isTemplateReady && options.onTemplateReady) {
-        options.onTemplateReady();
-      }
-    });
-
-    const params: ThroughputInputParams = options;
-    this.testId = params.testId || "ThroughputValue";
-    this.ariaLabel = ko.observable((params.ariaLabel && params.ariaLabel()) || "");
-    this.canExceedMaximumValue = params.canExceedMaximumValue || ko.computed(() => false);
-    this.isEnabled = params.isEnabled || ko.observable(true);
-    this.cssClass = params.cssClass || "textfontclr collid migration";
-    this.minimum = params.minimum;
-    this.maximum = params.maximum;
-    this.value = params.value;
-    this.costsVisible = options.costsVisible;
-    this.requestUnitsUsageCost = options.requestUnitsUsageCost;
-    this.spendAckChecked = options.spendAckChecked || ko.observable<boolean>(false);
-    this.spendAckId = options.spendAckId || ko.observable<string>();
-    this.spendAckText = options.spendAckText || ko.observable<string>();
-    this.spendAckVisible = options.spendAckVisible || ko.observable<boolean>(false);
-    this.showAsMandatory = !!options.showAsMandatory;
-    this.isFixed = !!options.isFixed;
-    this.infoBubbleText = options.infoBubbleText || ko.observable<string>();
-    this.label = options.label || ko.observable<string>();
-    this.isAutoPilotSelected = options.isAutoPilotSelected || ko.observable<boolean>(false);
-    this.isAutoPilotSelected.subscribe((value) => {
-      TelemetryProcessor.trace(Action.ToggleAutoscaleSetting, ActionModifiers.Mark, {
-        changedSelectedValueTo: value ? ActionModifiers.ToggleAutoscaleOn : ActionModifiers.ToggleAutoscaleOff,
-        dataExplorerArea: "Scale Tab V1",
-      });
-    });
-
-    this.throughputAutoPilotRadioId = options.throughputAutoPilotRadioId;
-    this.throughputProvisionedRadioId = options.throughputProvisionedRadioId;
-    this.throughputModeRadioName = options.throughputModeRadioName;
-    this.overrideWithAutoPilotSettings = options.overrideWithAutoPilotSettings || ko.observable<boolean>(false);
-    this.overrideWithProvisionedThroughputSettings =
-      options.overrideWithProvisionedThroughputSettings || ko.observable<boolean>(false);
-
-    this.maxAutoPilotThroughputSet =
-      options.maxAutoPilotThroughputSet || ko.observable<number>(AutoPilotUtils.minAutoPilotThroughput);
-    this.autoPilotUsageCost = options.autoPilotUsageCost;
-    this.minAutoPilotThroughput = ko.observable<number>(AutoPilotUtils.minAutoPilotThroughput);
-
-    this.step = ko.pureComputed(() => {
-      if (this.isAutoPilotSelected()) {
-        return AutoPilotUtils.autoPilotIncrementStep;
-      }
-      return params.step || ThroughputInputViewModel._defaultStep;
-    });
-    this.decreaseButtonAriaLabel = "Decrease throughput by " + this.step().toString();
-    this.increaseButtonAriaLabel = "Increase throughput by " + this.step().toString();
-    this.isManualThroughputInputFieldRequired = ko.pureComputed(() => this.isEnabled() && !this.isAutoPilotSelected());
-    this.isAutoscaleThroughputInputFieldRequired = ko.pureComputed(
-      () => this.isEnabled() && this.isAutoPilotSelected()
-    );
-
-    this.freeTierExceedThroughputTooltip = options.freeTierExceedThroughputTooltip || ko.observable<string>();
-    this.freeTierExceedThroughputWarning = options.freeTierExceedThroughputWarning || ko.observable<string>();
-    this.showFreeTierExceedThroughputTooltip = ko.pureComputed<boolean>(
-      () => !!this.freeTierExceedThroughputTooltip() && this.value() > FreeTierLimits.RU
-    );
-
-    this.showFreeTierExceedThroughputWarning = ko.pureComputed<boolean>(
-      () => !!this.freeTierExceedThroughputWarning() && this.value() > FreeTierLimits.RU
-    );
-  }
-
-  public decreaseThroughput() {
-    let offerThroughput: number = this._getSanitizedValue();
-
-    if (offerThroughput > this.minimum()) {
-      offerThroughput -= this.step();
-      if (offerThroughput < this.minimum()) {
-        offerThroughput = this.minimum();
-      }
-
-      this.value(offerThroughput);
-    }
-  }
-
-  public increaseThroughput() {
-    let offerThroughput: number = this._getSanitizedValue();
-
-    if (offerThroughput < this.maximum() || this.canExceedMaximumValue()) {
-      offerThroughput += this.step();
-      if (offerThroughput > this.maximum() && !this.canExceedMaximumValue()) {
-        offerThroughput = this.maximum();
-      }
-
-      this.value(offerThroughput);
-    }
-  }
-
-  public onIncreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.increaseThroughput();
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  };
-
-  public onDecreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.decreaseThroughput();
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  };
-
-  private _getSanitizedValue(): number {
-    let throughput = this.value();
-
-    if (this.isAutoPilotSelected()) {
-      throughput = this.maxAutoPilotThroughputSet();
-    }
-    return isNaN(throughput) ? 0 : Number(throughput);
-  }
-
-  private static _defaultStep: number = 100;
-}
-
-export const ThroughputInputComponentAutoPilotV3 = {
-  viewModel: ThroughputInputViewModel,
-  template: ThroughputInputComponentAutoscaleV3,
-};

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoscaleV3.html

@@ -1,194 +0,0 @@
-<div>
-  <div>
-    <p class="pkPadding">
-      <!-- ko if: showAsMandatory -->
-      <span class="mandatoryStar">*</span>
-      <!-- /ko -->
-
-      <span data-bind="text: label"></span>
-
-      <!-- ko if: infoBubbleText -->
-      <span class="infoTooltip" role="tooltip" tabindex="0">
-        <img class="infoImg" src="../../../../images/info-bubble.svg" alt="More information" />
-        <span data-bind="text: infoBubbleText" class="tooltiptext throughputRuInfo"></span>
-      </span>
-      <!-- /ko -->
-    </p>
-  </div>
-
-  <!-- ko if: !isFixed -->
-  <div class="throughputModeContainer">
-    <input
-      class="throughputModeRadio"
-      aria-label="Autopilot mode"
-      type="radio"
-      role="radio"
-      tabindex="0"
-      data-bind="
-          checked: isAutoPilotSelected,
-          checkedValue: true,
-          attr: {
-            id: throughputAutoPilotRadioId,
-            name: throughputModeRadioName,
-            'aria-checked': isAutoPilotSelected() ? 'true' : 'false'
-          }"
-    />
-    <span
-      class="throughputModeSpace"
-      data-bind="
-          attr: {
-            for: throughputAutoPilotRadioId
-          }"
-      >Autoscale
-    </span>
-
-    <input
-      class="throughputModeRadio nonFirstRadio"
-      aria-label="Manual mode"
-      type="radio"
-      role="radio"
-      tabindex="0"
-      data-bind="
-          checked: isAutoPilotSelected,
-          checkedValue: false,
-          attr: {
-            id:  throughputProvisionedRadioId,
-            name: throughputModeRadioName,
-            'aria-checked': !isAutoPilotSelected() ? 'true' : 'false'
-          }"
-    />
-    <span
-      class="throughputModeSpace"
-      data-bind="attr: {
-          for: throughputProvisionedRadioId
-        }"
-      >Manual
-    </span>
-  </div>
-  <!-- /ko -->
-
-  <div data-bind="visible: isAutoPilotSelected">
-    <p>
-      <span
-        >Provision maximum RU/s required by this resource. Estimate your required RU/s with
-        <a target="_blank" href="https://cosmos.azure.com/capacitycalculator/">capacity calculator</a>.</span
-      >
-    </p>
-    <p>
-      <span>Max RU/s</span>
-    </p>
-    <div data-bind="setTemplateReady: true">
-      <input
-        data-bind="textInput: overrideWithProvisionedThroughputSettings() ? '' : maxAutoPilotThroughputSet, attr:{
-        disabled: overrideWithProvisionedThroughputSettings(),
-        step: step,
-        'class':'migration collid select-font-size',
-        min: minAutoPilotThroughput,
-        'aria-label': 'Max request units per second',
-        type: isAutoscaleThroughputInputFieldRequired() ? 'number' : 'hidden',
-        css: {
-          dirty: maxAutoPilotThroughputSet.editableIsDirty
-      }
-    }"
-      />
-    </div>
-    <p data-bind="visible: overrideWithProvisionedThroughputSettings && !overrideWithProvisionedThroughputSettings()">
-      <span
-        data-bind="
-              html: autoPilotUsageCost"
-      ></span>
-    </p>
-    <p
-      data-bind="visible: costsVisible && overrideWithProvisionedThroughputSettings && !overrideWithProvisionedThroughputSettings()"
-    >
-      <span data-bind="html: requestUnitsUsageCost"></span>
-    </p>
-
-    <!-- ko if: spendAckVisible -->
-    <p class="pkPadding">
-      <input
-        type="checkbox"
-        aria-label="acknowledge spend throughput"
-        data-bind="
-            attr: {
-              title: spendAckText,
-              id: spendAckId
-            },
-            checked: spendAckChecked"
-      />
-      <span data-bind="text: spendAckText, attr: { for: spendAckId }"></span>
-    </p>
-    <!-- /ko -->
-
-    <!-- ko if: isFixed -->
-    <p>Choose unlimited storage capacity for more than 10,000 RU/s.</p>
-    <!-- /ko -->
-  </div>
-
-  <div data-bind="visible: !isAutoPilotSelected()">
-    <p>
-      <span
-        >Estimate your required throughput with
-        <a target="_blank" href="https://cosmos.azure.com/capacitycalculator/">capacity calculator</a></span
-      >
-    </p>
-
-    <div class="inputTooltip">
-      <span
-        data-bind="text: freeTierExceedThroughputTooltip, visible: showFreeTierExceedThroughputTooltip"
-        class="inputTooltipText"
-      ></span>
-    </div>
-
-    <div data-bind="setTemplateReady: true">
-      <input
-        data-bind="
-            textInput: overrideWithAutoPilotSettings() ? maxAutoPilotThroughputSet : value,
-            css: {
-                dirty: value.editableIsDirty
-            },
-            enable: isEnabled,
-            attr:{
-                type: isManualThroughputInputFieldRequired() ? 'number' : 'hidden',
-                'data-test': testId,
-                'class': cssClass,
-                step: step,
-                min: minimum,
-                max: canExceedMaximumValue() ? null : maximum,
-                'aria-label': ariaLabel,
-                disabled: overrideWithAutoPilotSettings(),
-                required: isManualThroughputInputFieldRequired()
-            }"
-      />
-    </div>
-
-    <div class="freeTierInlineWarning" data-bind="visible: showFreeTierExceedThroughputWarning">
-      <span class="freeTierWarningIcon"><img src="/warning.svg" alt="Warning" /></span>
-      <span class="freeTierWarningMessage" data-bind="text: freeTierExceedThroughputWarning"></span>
-    </div>
-
-    <p data-bind="visible: costsVisible">
-      <span data-bind="html: requestUnitsUsageCost"></span>
-    </p>
-
-    <!-- ko if: spendAckVisible -->
-    <p class="pkPadding">
-      <input
-        type="checkbox"
-        aria-label="acknowledge spend throughput"
-        data-bind="
-        attr: {
-          title: spendAckText,
-          id: spendAckId
-        },
-        checked: spendAckChecked"
-      />
-      <span data-bind="text: spendAckText, attr: { for: spendAckId }"></span>
-    </p>
-    <!-- /ko -->
-
-    <!-- ko if: isFixed -->
-    <p>Choose unlimited storage capacity for more than 10,000 RU/s.</p>
-    <!-- /ko -->
-  </div>
-</div>

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ThroughputInput Pane should render Default properly 1`] = `
 <ThroughputInput
   isDatabase={false}
-  isSharded={false}
+  isSharded={true}
   onCostAcknowledgeChange={[Function]}
   setIsAutoscale={[Function]}
   setThroughputValue={[Function]}

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -58,7 +58,7 @@ export interface TreeComponentProps {
 export class TreeComponent extends React.Component<TreeComponentProps> {
   public render(): JSX.Element {
     return (
-      <div style={this.props.style} className={`treeComponent ${this.props.className}`}>
+      <div style={this.props.style} className={`treeComponent ${this.props.className}`} role="tree">
         <TreeNodeComponent paddingLeft={0} node={this.props.rootNode} generation={0} />
       </div>
     );
@@ -172,6 +172,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
         className={`${this.props.node.className || ""} main${generation} nodeItem ${showSelected ? "selected" : ""}`}
         onClick={(event: React.MouseEvent<HTMLDivElement>) => this.onNodeClick(event, node)}
         onKeyPress={(event: React.KeyboardEvent<HTMLDivElement>) => this.onNodeKeyPress(event, node)}
+        role="treeitem"
       >
         <div
           className={`treeNodeHeader ${this.state.isMenuShowing ? "showingMenu" : ""}`}

src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`TreeComponent renders a simple tree 1`] = `
 <div
   className="treeComponent tree"
+  role="tree"
 >
   <TreeNodeComponent
     generation={0}
@@ -37,6 +38,7 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
   className=" main2 nodeItem "
   onClick={[Function]}
   onKeyPress={[Function]}
+  role="treeitem"
 >
   <div
     className="treeNodeHeader "
@@ -137,6 +139,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
   className="nodeClassname main12 nodeItem "
   onClick={[Function]}
   onKeyPress={[Function]}
+  role="treeitem"
 >
   <div
     className="treeNodeHeader "
@@ -285,6 +288,7 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
   className=" main2 nodeItem "
   onClick={[Function]}
   onKeyPress={[Function]}
+  role="treeitem"
 >
   <div
     className="treeNodeHeader "
@@ -356,6 +360,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
   className="nodeClassname main12 nodeItem "
   onClick={[Function]}
   onKeyPress={[Function]}
+  role="treeitem"
 >
   <div
     className="treeNodeHeader "
@@ -523,6 +528,7 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
   className=" main2 nodeItem "
   onClick={[Function]}
   onKeyPress={[Function]}
+  role="treeitem"
 >
   <div
     className="treeNodeHeader "

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

@@ -2,23 +2,22 @@ jest.mock("../Graph/GraphExplorerComponent/GremlinClient");
 jest.mock("../../Common/dataAccess/createCollection");
 jest.mock("../../Common/dataAccess/createDocument");
 import * as ko from "knockout";
-import Q from "q";
 import { createDocument } from "../../Common/dataAccess/createDocument";
 import { DatabaseAccount } from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { updateUserContext } from "../../UserContext";
 import Explorer from "../Explorer";
+import { useDatabases } from "../useDatabases";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 
 describe("ContainerSampleGenerator", () => {
-  const createExplorerStub = (database: ViewModels.Database): Explorer => {
-    const explorerStub = {} as Explorer;
-    explorerStub.databases = ko.observableArray<ViewModels.Database>([database]);
-    explorerStub.canExceedMaximumValue = ko.computed<boolean>(() => false);
-    explorerStub.findDatabaseWithId = () => database;
-    explorerStub.refreshAllDatabases = () => Q.resolve();
-    return explorerStub;
-  };
+  let explorerStub: Explorer;
+
+  beforeAll(() => {
+    explorerStub = {
+      refreshAllDatabases: () => {},
+    } as Explorer;
+  });
 
   beforeEach(() => {
     (createDocument as jest.Mock).mockResolvedValue(undefined);
@@ -60,8 +59,7 @@ describe("ContainerSampleGenerator", () => {
       loadCollections: () => {},
     } as ViewModels.Database;
     database.findCollectionWithId = () => collection;
-
-    const explorerStub = createExplorerStub(database);
+    useDatabases.getState().addDatabases([database]);
 
     const generator = await ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub);
     generator.setData(sampleData);
@@ -109,8 +107,8 @@ describe("ContainerSampleGenerator", () => {
     } as ViewModels.Database;
     database.findCollectionWithId = () => collection;
     collection.databaseId = database.id();
+    useDatabases.getState().addDatabases([database]);
 
-    const explorerStub = createExplorerStub(database);
     updateUserContext({
       databaseAccount: {
         properties: {
@@ -127,7 +125,6 @@ describe("ContainerSampleGenerator", () => {
 
   it("should not create any sample for Mongo API account", async () => {
     const experience = "Sample generation not supported for this API Mongo";
-    const explorerStub = createExplorerStub(undefined);
     updateUserContext({
       databaseAccount: {
         properties: {
@@ -142,7 +139,6 @@ describe("ContainerSampleGenerator", () => {
 
   it("should not create any sample for Table API account", async () => {
     const experience = "Sample generation not supported for this API Tables";
-    const explorerStub = createExplorerStub(undefined);
     updateUserContext({
       databaseAccount: {
         properties: {
@@ -164,7 +160,6 @@ describe("ContainerSampleGenerator", () => {
         },
       } as DatabaseAccount,
     });
-    const explorerStub = createExplorerStub(undefined);
     // Rejects with error that contains experience
     await expect(ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub)).rejects.toMatch(experience);
   });

src/Explorer/DataSamples/ContainerSampleGenerator.ts

@@ -7,6 +7,7 @@ import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils"
 import GraphTab from ".././Tabs/GraphTab";
 import Explorer from "../Explorer";
 import { GremlinClient } from "../Graph/GraphExplorerComponent/GremlinClient";
+import { useDatabases } from "../useDatabases";
 
 interface SampleDataFile extends DataModels.CreateCollectionParams {
   data: any[];
@@ -59,7 +60,7 @@ export class ContainerSampleGenerator {
 
     await createCollection(createRequest);
     await this.container.refreshAllDatabases();
-    const database = this.container.findDatabaseWithId(this.sampleDataFile.databaseId);
+    const database = useDatabases.getState().findDatabaseWithId(this.sampleDataFile.databaseId);
     if (!database) {
       return undefined;
     }

src/Explorer/DataSamples/DataSamplesUtil.test.ts

@@ -2,6 +2,7 @@ import * as ko from "knockout";
 import * as sinon from "sinon";
 import { Collection, Database } from "../../Contracts/ViewModels";
 import Explorer from "../Explorer";
+import { useDatabases } from "../useDatabases";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 import { DataSamplesUtil } from "./DataSamplesUtil";
 
@@ -16,8 +17,8 @@ describe("DataSampleUtils", () => {
       collections: ko.observableArray<Collection>([collection]),
     } as Database;
     const explorer = {} as Explorer;
-    explorer.databases = ko.observableArray<Database>([database]);
     explorer.showOkModalDialog = () => {};
+    useDatabases.getState().addDatabases([database]);
     const dataSamplesUtil = new DataSamplesUtil(explorer);
 
     const fakeGenerator = sinon.createStubInstance<ContainerSampleGenerator>(ContainerSampleGenerator as any);

src/Explorer/DataSamples/DataSamplesUtil.ts

@@ -2,6 +2,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { userContext } from "../../UserContext";
 import { logConsoleError, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
+import { useDatabases } from "../useDatabases";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 
 export class DataSamplesUtil {
@@ -17,7 +18,7 @@ export class DataSamplesUtil {
 
     const databaseName = generator.getDatabaseId();
     const containerName = generator.getCollectionId();
-    if (this.hasContainer(databaseName, containerName, this.container.databases())) {
+    if (this.hasContainer(databaseName, containerName, useDatabases.getState().databases)) {
       const msg = `The container ${containerName} in database ${databaseName} already exists. Please delete it and retry.`;
       this.container.showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
       logConsoleError(msg);

src/Explorer/Explorer.test.tsx

@@ -1,43 +0,0 @@
-jest.mock("./../Common/dataAccess/deleteDatabase");
-jest.mock("./../Shared/Telemetry/TelemetryProcessor");
-import * as ko from "knockout";
-import { deleteDatabase } from "./../Common/dataAccess/deleteDatabase";
-import * as ViewModels from "./../Contracts/ViewModels";
-import Explorer from "./Explorer";
-
-describe("Explorer.isLastDatabase() and Explorer.isLastNonEmptyDatabase()", () => {
-  let explorer: Explorer;
-  beforeAll(() => {
-    (deleteDatabase as jest.Mock).mockResolvedValue(undefined);
-  });
-
-  beforeEach(() => {
-    explorer = new Explorer();
-  });
-
-  it("should be true if only 1 database", () => {
-    const database = {} as ViewModels.Database;
-    explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-    expect(explorer.isLastDatabase()).toBe(true);
-  });
-
-  it("should be false if only 2 databases", () => {
-    const database = {} as ViewModels.Database;
-    const database2 = {} as ViewModels.Database;
-    explorer.databases = ko.observableArray<ViewModels.Database>([database, database2]);
-    expect(explorer.isLastDatabase()).toBe(false);
-  });
-
-  it("should be false if not last empty database", () => {
-    const database = {} as ViewModels.Database;
-    explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-    expect(explorer.isLastNonEmptyDatabase()).toBe(false);
-  });
-
-  it("should be true if last non empty database", () => {
-    const database = {} as ViewModels.Database;
-    database.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
-    explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-    expect(explorer.isLastNonEmptyDatabase()).toBe(true);
-  });
-});

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx

@@ -10,7 +10,7 @@ import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPag
 import * as DataModels from "../../../Contracts/DataModels";
 import * as StorageUtility from "../../../Shared/StorageUtility";
 import { TabComponent } from "../../Controls/Tabs/TabComponent";
-import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
+import { ConsoleDataType } from "../../Menus/NotificationConsole/ConsoleData";
 import GraphTab from "../../Tabs/GraphTab";
 import * as D3ForceGraph from "./D3ForceGraph";
 import { GraphData } from "./GraphData";

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -18,7 +18,7 @@ import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Ut
 import { EditorReact } from "../../Controls/Editor/EditorReact";
 import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
 import * as TabComponent from "../../Controls/Tabs/TabComponent";
-import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
+import { ConsoleDataType } from "../../Menus/NotificationConsole/ConsoleData";
 import { IGraphConfig } from "../../Tabs/GraphTab";
 import { ArraysByKeyCache } from "./ArraysByKeyCache";
 import * as D3ForceGraph from "./D3ForceGraph";

src/Explorer/Graph/GraphExplorerComponent/GraphExplorerAdapter.tsx

@@ -1,74 +0,0 @@
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { IGraphConfig } from "../../Tabs/GraphTab";
-import { GraphAccessor, GraphExplorer } from "./GraphExplorer";
-interface Parameter {
-  onIsNewVertexDisabledChange: (isEnabled: boolean) => void;
-  onGraphAccessorCreated: (instance: GraphAccessor) => void;
-  onIsFilterQueryLoading: (isFilterQueryLoading: boolean) => void;
-  onIsValidQuery: (isValidQuery: boolean) => void;
-  onIsPropertyEditing: (isEditing: boolean) => void;
-  onIsGraphDisplayed: (isDisplayed: boolean) => void;
-  onResetDefaultGraphConfigValues: () => void;
-
-  collectionPartitionKeyProperty: string;
-  graphBackendEndpoint: string;
-  databaseId: string;
-  collectionId: string;
-  masterKey: string;
-
-  onLoadStartKey: number;
-  onLoadStartKeyChange: (newKey: number) => void;
-  resourceId: string;
-
-  igraphConfigUiData: ViewModels.IGraphConfigUiData;
-  igraphConfig: IGraphConfig;
-  setIConfigUiData?: (data: string[]) => void;
-}
-
-interface IGraphExplorerProps {
-  isChanged: boolean;
-}
-
-interface IGraphExplorerStates {
-  isChangedState: boolean;
-}
-
-export interface GraphExplorerAdapter
-  extends ReactAdapter,
-    React.Component<IGraphExplorerProps, IGraphExplorerStates> {}
-export class GraphExplorerAdapter implements ReactAdapter {
-  public params: Parameter;
-  public parameters = {};
-  public isNewVertexDisabled: boolean;
-
-  public constructor(params: Parameter, props?: IGraphExplorerProps) {
-    this.params = params;
-  }
-
-  public renderComponent(): JSX.Element {
-    return (
-      <GraphExplorer
-        onIsNewVertexDisabledChange={this.params.onIsNewVertexDisabledChange}
-        onGraphAccessorCreated={this.params.onGraphAccessorCreated}
-        onIsFilterQueryLoadingChange={this.params.onIsFilterQueryLoading}
-        onIsValidQueryChange={this.params.onIsValidQuery}
-        onIsPropertyEditing={this.params.onIsPropertyEditing}
-        onIsGraphDisplayed={this.params.onIsGraphDisplayed}
-        onResetDefaultGraphConfigValues={this.params.onResetDefaultGraphConfigValues}
-        collectionPartitionKeyProperty={this.params.collectionPartitionKeyProperty}
-        graphBackendEndpoint={this.params.graphBackendEndpoint}
-        databaseId={this.params.databaseId}
-        collectionId={this.params.collectionId}
-        masterKey={this.params.masterKey}
-        onLoadStartKey={this.params.onLoadStartKey}
-        onLoadStartKeyChange={this.params.onLoadStartKeyChange}
-        resourceId={this.params.resourceId}
-        igraphConfigUiData={this.params.igraphConfigUiData}
-        igraphConfig={this.params.igraphConfig}
-        setIConfigUiData={this.params.setIConfigUiData}
-      />
-    );
-  }
-}

src/Explorer/Graph/GraphExplorerComponent/GraphUtil.test.ts

@@ -1,9 +1,7 @@
-import * as GraphUtil from "./GraphUtil";
-import { GraphData, GremlinVertex, GremlinEdge } from "./GraphData";
 import * as sinon from "sinon";
+import { GraphData, GremlinEdge, GremlinVertex } from "./GraphData";
 import { GraphExplorer } from "./GraphExplorer";
-window.$ = window.jQuery = require("jquery");
-
+import * as GraphUtil from "./GraphUtil";
 const OUT_E_MATCHER = "g\\.V\\(.*\\).outE\\(\\).*\\.as\\('e'\\).inV\\(\\)\\.as\\('v'\\)\\.select\\('e', *'v'\\)";
 const IN_E_MATCHER = "g\\.V\\(.*\\).inE\\(\\).*\\.as\\('e'\\).outV\\(\\)\\.as\\('v'\\)\\.select\\('e', *'v'\\)";
 

src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts

@@ -12,7 +12,7 @@ export interface GremlinSimpleClientParameters {
   password: string;
   successCallback: (result: Result) => void;
   progressCallback: (result: Result) => void;
-  failureCallback: (result: Result | null, error: string) => void;
+  failureCallback: (result: Result, error: string) => void;
   infoCallback: (msg: string) => void;
 }
 
@@ -62,6 +62,7 @@ export class GremlinSimpleClient {
   private static readonly requestChargeHeader = "x-ms-request-charge";
 
   public params: GremlinSimpleClientParameters;
+  private protocols: string | string[];
   private ws: WebSocket;
 
   public requestsToSend: { [requestId: string]: GremlinRequestMessage };
@@ -71,7 +72,6 @@ export class GremlinSimpleClient {
     this.params = params;
     this.pendingRequests = {};
     this.requestsToSend = {};
-    this.ws = GremlinSimpleClient.createWebSocket(this.params.endpoint);
   }
 
   public connect() {
@@ -117,7 +117,7 @@ export class GremlinSimpleClient {
     }
   }
 
-  public decodeMessage(msg: MessageEvent): GremlinResponseMessage | null {
+  public decodeMessage(msg: MessageEvent): GremlinResponseMessage {
     if (msg.data === null) {
       return null;
     }
@@ -280,7 +280,7 @@ export class GremlinSimpleClient {
 
   public static utf8ToB64(utf8Str: string) {
     return btoa(
-      encodeURIComponent(utf8Str).replace(/%([0-9A-F]{2})/g, function (_match, p1) {
+      encodeURIComponent(utf8Str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
         return String.fromCharCode(parseInt(p1, 16));
       })
     );
@@ -305,7 +305,7 @@ export class GremlinSimpleClient {
     return binaryMessage;
   }
 
-  private onOpen(_event: any) {
+  private onOpen(event: any) {
     this.executeRequestsToSend();
   }
 

src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx

@@ -5,21 +5,26 @@
  */
 
 import * as React from "react";
-import { GraphHighlightedNodeData, EditedProperties, EditedEdges, PossibleVertex } from "./GraphExplorer";
-import { CollapsiblePanel } from "../../Controls/CollapsiblePanel/CollapsiblePanel";
-import { ReadOnlyNodePropertiesComponent } from "./ReadOnlyNodePropertiesComponent";
-import { EditorNodePropertiesComponent } from "./EditorNodePropertiesComponent";
-import { ReadOnlyNeighborsComponent } from "./ReadOnlyNeighborsComponent";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { Item } from "../../Controls/InputTypeahead/InputTypeaheadComponent";
-import * as EditorNeighbors from "./EditorNeighborsComponent";
-import EditIcon from "../../../../images/edit.svg";
-import DeleteIcon from "../../../../images/delete.svg";
-import CheckIcon from "../../../../images/check.svg";
 import CancelIcon from "../../../../images/cancel.svg";
-import { GraphExplorer } from "./GraphExplorer";
-import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
+import CheckIcon from "../../../../images/check.svg";
+import DeleteIcon from "../../../../images/delete.svg";
+import EditIcon from "../../../../images/edit.svg";
+import * as ViewModels from "../../../Contracts/ViewModels";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
+import { CollapsiblePanel } from "../../Controls/CollapsiblePanel/CollapsiblePanel";
+import { Item } from "../../Controls/InputTypeahead/InputTypeaheadComponent";
+import { ConsoleDataType } from "../../Menus/NotificationConsole/ConsoleData";
+import * as EditorNeighbors from "./EditorNeighborsComponent";
+import { EditorNodePropertiesComponent } from "./EditorNodePropertiesComponent";
+import {
+  EditedEdges,
+  EditedProperties,
+  GraphExplorer,
+  GraphHighlightedNodeData,
+  PossibleVertex,
+} from "./GraphExplorer";
+import { ReadOnlyNeighborsComponent } from "./ReadOnlyNeighborsComponent";
+import { ReadOnlyNodePropertiesComponent } from "./ReadOnlyNodePropertiesComponent";
 
 export enum Mode {
   READONLY_PROP,

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -3,103 +3,71 @@
  * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
  * and update any knockout observables passed from the parent.
  */
-import { CommandBar, ICommandBarItemProps } from "@fluentui/react";
-import * as ko from "knockout";
+import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
 import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+import create, { UseStore } from "zustand";
 import { StyleConstants } from "../../../Common/Constants";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { userContext } from "../../../UserContext";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
+import { useSelectedNode } from "../../useSelectedNode";
 import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
 import * as CommandBarUtil from "./CommandBarUtil";
 
-export class CommandBarComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<number>;
-  public container: Explorer;
-  private tabsButtons: CommandButtonComponentProps[];
-  private isNotebookTabActive: ko.Computed<boolean>;
-
-  constructor(container: Explorer) {
-    this.container = container;
-    this.tabsButtons = [];
-    this.isNotebookTabActive = ko.computed(
-      () => container.tabsManager.activeTab()?.tabKind === ViewModels.CollectionTabKind.NotebookV2
-    );
-
-    // These are the parameters watched by the react binding that will trigger a renderComponent() if one of the ko mutates
-    const toWatch = [
-      container.deleteCollectionText,
-      container.deleteDatabaseText,
-      container.addCollectionText,
-      container.isDatabaseNodeOrNoneSelected,
-      container.isDatabaseNodeSelected,
-      container.isNoneSelected,
-      container.isResourceTokenCollectionNodeSelected,
-      container.isHostedDataExplorerEnabled,
-      container.isSynapseLinkUpdating,
-      userContext?.databaseAccount,
-      this.isNotebookTabActive,
-      container.isServerlessEnabled,
-    ];
-
-    ko.computed(() => ko.toJSON(toWatch)).subscribe(() => this.triggerRender());
-    this.parameters = ko.observable(Date.now());
-  }
-
-  public onUpdateTabsButtons(buttons: CommandButtonComponentProps[]): void {
-    this.tabsButtons = buttons;
-    this.triggerRender();
-  }
-
-  public renderComponent(): JSX.Element {
-    const backgroundColor = StyleConstants.BaseLight;
-
-    const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(this.container);
-    const contextButtons = (this.tabsButtons || []).concat(
-      CommandBarComponentButtonFactory.createContextCommandBarButtons(this.container)
-    );
-    const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(this.container);
-
-    const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
-    if (this.tabsButtons && this.tabsButtons.length > 0) {
-      uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
-    }
-
-    const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
-
-    if (uiFabricTabsButtons.length > 0) {
-      uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
-    }
-
-    const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
-    uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
-
-    if (this.isNotebookTabActive()) {
-      uiFabricControlButtons.unshift(
-        CommandBarUtil.createMemoryTracker("memoryTracker", this.container.memoryUsageInfo)
-      );
-    }
-
-    return (
-      <React.Fragment>
-        <div className="commandBarContainer">
-          <CommandBar
-            ariaLabel="Use left and right arrow keys to navigate between commands"
-            items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}
-            farItems={uiFabricControlButtons}
-            styles={{
-              root: { backgroundColor: backgroundColor },
-            }}
-            overflowButtonProps={{ ariaLabel: "More commands" }}
-          />
-        </div>
-      </React.Fragment>
-    );
-  }
-
-  private triggerRender() {
-    window.requestAnimationFrame(() => this.parameters(Date.now()));
-  }
+interface Props {
+  container: Explorer;
 }
+
+export interface CommandBarStore {
+  contextButtons: CommandButtonComponentProps[];
+  setContextButtons: (contextButtons: CommandButtonComponentProps[]) => void;
+}
+
+export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
+  contextButtons: [],
+  setContextButtons: (contextButtons: CommandButtonComponentProps[]) => set((state) => ({ ...state, contextButtons })),
+}));
+
+export const CommandBar: React.FC<Props> = ({ container }: Props) => {
+  const selectedNodeState = useSelectedNode();
+  const buttons = useCommandBar((state) => state.contextButtons);
+  const backgroundColor = StyleConstants.BaseLight;
+
+  const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(container, selectedNodeState);
+  const contextButtons = (buttons || []).concat(
+    CommandBarComponentButtonFactory.createContextCommandBarButtons(container, selectedNodeState)
+  );
+  const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(container);
+
+  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
+  if (buttons && buttons.length > 0) {
+    uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
+  }
+
+  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
+
+  if (uiFabricTabsButtons.length > 0) {
+    uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
+  }
+
+  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
+  uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
+
+  if (container.tabsManager.activeTab()?.tabKind === ViewModels.CollectionTabKind.NotebookV2) {
+    uiFabricControlButtons.unshift(CommandBarUtil.createMemoryTracker("memoryTracker", container.memoryUsageInfo));
+  }
+
+  return (
+    <div className="commandBarContainer">
+      <FluentCommandBar
+        ariaLabel="Use left and right arrow keys to navigate between commands"
+        items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}
+        farItems={uiFabricControlButtons}
+        styles={{
+          root: { backgroundColor: backgroundColor },
+        }}
+        overflowButtonProps={{ ariaLabel: "More commands" }}
+      />
+    </div>
+  );
+};

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts

@@ -1,21 +1,25 @@
 import * as ko from "knockout";
 import { AuthType } from "../../../AuthType";
 import { DatabaseAccount } from "../../../Contracts/DataModels";
+import { CollectionBase } from "../../../Contracts/ViewModels";
 import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
 import { updateUserContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
 import NotebookManager from "../../Notebook/NotebookManager";
+import { useSelectedNode } from "../../useSelectedNode";
 import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
 
 describe("CommandBarComponentButtonFactory tests", () => {
   let mockExplorer: Explorer;
 
+  afterEach(() => useSelectedNode.getState().setSelectedNode(undefined));
+
   describe("Enable Azure Synapse Link Button", () => {
     const enableAzureSynapseLinkBtnLabel = "Enable Azure Synapse Link";
+    const selectedNodeState = useSelectedNode.getState();
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {
           properties: {
@@ -23,19 +27,13 @@ describe("CommandBarComponentButtonFactory tests", () => {
           },
         } as DatabaseAccount,
       });
-      mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-
-      mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isNotebookEnabled = ko.observable(false);
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
-      mockExplorer.isRunningOnNationalCloud = () => false;
     });
 
     it("Account is not serverless - button should be visible", () => {
-      mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
-
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const enableAzureSynapseLinkBtn = buttons.find(
         (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel
       );
@@ -43,9 +41,14 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
 
     it("Account is serverless - button should be hidden", () => {
-      mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => true);
-
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableServerless" }],
+          },
+        } as DatabaseAccount,
+      });
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const enableAzureSynapseLinkBtn = buttons.find(
         (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel
       );
@@ -55,11 +58,12 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
   describe("Enable notebook button", () => {
     const enableNotebookBtnLabel = "Enable Notebooks (Preview)";
+    const selectedNodeState = useSelectedNode.getState();
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
+        portalEnv: "prod",
         databaseAccount: {
           properties: {
             capabilities: [{ name: "EnableTable" }],
@@ -67,19 +71,19 @@ describe("CommandBarComponentButtonFactory tests", () => {
         } as DatabaseAccount,
       });
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-      mockExplorer.isSparkEnabled = ko.observable(true);
-      mockExplorer.isSynapseLinkUpdating = ko.observable(false);
+    });
 
-      mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
-      mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
+    afterEach(() => {
+      updateUserContext({
+        portalEnv: "prod",
+      });
     });
 
     it("Notebooks is already enabled - button should be hidden", () => {
       mockExplorer.isNotebookEnabled = ko.observable(true);
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
-      mockExplorer.isRunningOnNationalCloud = ko.observable(false);
 
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
       expect(enableNotebookBtn).toBeUndefined();
     });
@@ -87,9 +91,11 @@ describe("CommandBarComponentButtonFactory tests", () => {
     it("Account is running on one of the national clouds - button should be hidden", () => {
       mockExplorer.isNotebookEnabled = ko.observable(false);
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
-      mockExplorer.isRunningOnNationalCloud = ko.observable(true);
+      updateUserContext({
+        portalEnv: "mooncake",
+      });
 
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
       expect(enableNotebookBtn).toBeUndefined();
     });
@@ -97,9 +103,8 @@ describe("CommandBarComponentButtonFactory tests", () => {
     it("Notebooks is not enabled but is available - button should be shown and enabled", () => {
       mockExplorer.isNotebookEnabled = ko.observable(false);
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
-      mockExplorer.isRunningOnNationalCloud = ko.observable(false);
 
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
       expect(enableNotebookBtn).toBeDefined();
       expect(enableNotebookBtn.disabled).toBe(false);
@@ -109,9 +114,8 @@ describe("CommandBarComponentButtonFactory tests", () => {
     it("Notebooks is not enabled and is unavailable - button should be shown and disabled", () => {
       mockExplorer.isNotebookEnabled = ko.observable(false);
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
-      mockExplorer.isRunningOnNationalCloud = ko.observable(false);
 
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
       expect(enableNotebookBtn).toBeDefined();
       expect(enableNotebookBtn.disabled).toBe(true);
@@ -123,10 +127,10 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
   describe("Open Mongo Shell button", () => {
     const openMongoShellBtnLabel = "Open Mongo Shell";
+    const selectedNodeState = useSelectedNode.getState();
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {
           properties: {
@@ -134,11 +138,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
           },
         } as DatabaseAccount,
       });
-      mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-
-      mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
-      mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
       mockExplorer.isShellEnabled = ko.observable(true);
     });
 
@@ -154,7 +154,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
       });
       mockExplorer.isNotebookEnabled = ko.observable(false);
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
-      mockExplorer.isRunningOnNationalCloud = ko.observable(false);
+
       mockExplorer.isShellEnabled = ko.observable(true);
     });
 
@@ -162,21 +162,23 @@ describe("CommandBarComponentButtonFactory tests", () => {
       updateUserContext({
         apiType: "SQL",
       });
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
       expect(openMongoShellBtn).toBeUndefined();
     });
 
     it("Running on a national cloud - button should be hidden", () => {
-      mockExplorer.isRunningOnNationalCloud = ko.observable(true);
+      updateUserContext({
+        portalEnv: "mooncake",
+      });
 
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
       expect(openMongoShellBtn).toBeUndefined();
     });
 
     it("Notebooks is not enabled and is unavailable - button should be hidden", () => {
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
       expect(openMongoShellBtn).toBeUndefined();
     });
@@ -184,7 +186,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     it("Notebooks is not enabled and is available - button should be hidden", () => {
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
 
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
       expect(openMongoShellBtn).toBeUndefined();
     });
@@ -192,7 +194,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     it("Notebooks is enabled and is unavailable - button should be shown and enabled", () => {
       mockExplorer.isNotebookEnabled = ko.observable(true);
 
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
       expect(openMongoShellBtn).toBeDefined();
       expect(openMongoShellBtn.disabled).toBe(false);
@@ -203,7 +205,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isNotebookEnabled = ko.observable(true);
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
 
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
       expect(openMongoShellBtn).toBeDefined();
       expect(openMongoShellBtn.disabled).toBe(false);
@@ -215,7 +217,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
       mockExplorer.isShellEnabled = ko.observable(false);
 
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
       expect(openMongoShellBtn).toBeUndefined();
     });
@@ -223,10 +225,10 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
   describe("Open Cassandra Shell button", () => {
     const openCassandraShellBtnLabel = "Open Cassandra Shell";
+    const selectedNodeState = useSelectedNode.getState();
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {
           properties: {
@@ -235,10 +237,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
         } as DatabaseAccount,
       });
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-      mockExplorer.isSparkEnabled = ko.observable(true);
-
-      mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
-      mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
     });
 
     beforeEach(() => {
@@ -251,7 +249,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
       });
       mockExplorer.isNotebookEnabled = ko.observable(false);
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
-      mockExplorer.isRunningOnNationalCloud = ko.observable(false);
     });
 
     it("Cassandra Api not available - button should be hidden", () => {
@@ -263,21 +260,23 @@ describe("CommandBarComponentButtonFactory tests", () => {
         } as DatabaseAccount,
       });
       console.log(mockExplorer);
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
       expect(openCassandraShellBtn).toBeUndefined();
     });
 
     it("Running on a national cloud - button should be hidden", () => {
-      mockExplorer.isRunningOnNationalCloud = ko.observable(true);
+      updateUserContext({
+        portalEnv: "mooncake",
+      });
 
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
       expect(openCassandraShellBtn).toBeUndefined();
     });
 
     it("Notebooks is not enabled and is unavailable - button should be shown and disabled", () => {
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
       expect(openCassandraShellBtn).toBeUndefined();
     });
@@ -285,7 +284,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     it("Notebooks is not enabled and is available - button should be shown and enabled", () => {
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
 
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
       expect(openCassandraShellBtn).toBeUndefined();
     });
@@ -293,7 +292,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     it("Notebooks is enabled and is unavailable - button should be shown and enabled", () => {
       mockExplorer.isNotebookEnabled = ko.observable(true);
 
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
       expect(openCassandraShellBtn).toBeDefined();
       expect(openCassandraShellBtn.disabled).toBe(false);
@@ -304,7 +303,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isNotebookEnabled = ko.observable(true);
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
 
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
       expect(openCassandraShellBtn).toBeDefined();
       expect(openCassandraShellBtn.disabled).toBe(false);
@@ -315,10 +314,10 @@ describe("CommandBarComponentButtonFactory tests", () => {
   describe("GitHub buttons", () => {
     const connectToGitHubBtnLabel = "Connect to GitHub";
     const manageGitHubSettingsBtnLabel = "Manage GitHub settings";
+    const selectedNodeState = useSelectedNode.getState();
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {
           properties: {
@@ -328,13 +327,10 @@ describe("CommandBarComponentButtonFactory tests", () => {
       });
 
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-      mockExplorer.isSparkEnabled = ko.observable(true);
-      mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
-      mockExplorer.isRunningOnNationalCloud = ko.observable(false);
+
       mockExplorer.notebookManager = new NotebookManager();
       mockExplorer.notebookManager.gitHubOAuthService = new GitHubOAuthService(undefined);
-      mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
     });
 
     beforeEach(() => {
@@ -348,7 +344,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     it("Notebooks is enabled and GitHubOAuthService is not logged in - connect to github button should be visible", () => {
       mockExplorer.isNotebookEnabled = ko.observable(true);
 
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const connectToGitHubBtn = buttons.find((button) => button.commandButtonLabel === connectToGitHubBtnLabel);
       expect(connectToGitHubBtn).toBeDefined();
     });
@@ -357,7 +353,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isNotebookEnabled = ko.observable(true);
       mockExplorer.notebookManager.gitHubOAuthService.isLoggedIn = jest.fn().mockReturnValue(true);
 
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const manageGitHubSettingsBtn = buttons.find(
         (button) => button.commandButtonLabel === manageGitHubSettingsBtnLabel
       );
@@ -365,7 +361,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
 
     it("Notebooks is not enabled - connect to github and manage github settings buttons should be hidden", () => {
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
 
       const connectToGitHubBtn = buttons.find((button) => button.commandButtonLabel === connectToGitHubBtnLabel);
       expect(connectToGitHubBtn).toBeUndefined();
@@ -378,12 +374,13 @@ describe("CommandBarComponentButtonFactory tests", () => {
   });
 
   describe("Resource token", () => {
+    const mockCollection = { id: ko.observable("test") } as CollectionBase;
+    useSelectedNode.getState().setSelectedNode(mockCollection);
+    const selectedNodeState = useSelectedNode.getState();
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
-      mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
-      mockExplorer.isResourceTokenCollectionNodeSelected = ko.computed(() => true);
-      mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
+      mockExplorer.resourceTokenCollection = ko.observable(mockCollection);
+
       updateUserContext({
         authType: AuthType.ResourceToken,
       });
@@ -395,7 +392,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
           kind: "DocumentDB",
         } as DatabaseAccount,
       });
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       expect(buttons.length).toBe(2);
       expect(buttons[0].commandButtonLabel).toBe("New SQL Query");
       expect(buttons[0].disabled).toBe(false);

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -21,17 +21,26 @@ import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
 import { configContext, Platform } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
+import { useSidePanel } from "../../../hooks/useSidePanel";
 import { userContext } from "../../../UserContext";
-import { getDatabaseName } from "../../../Utils/APITypeUtils";
+import { getCollectionName, getDatabaseName } from "../../../Utils/APITypeUtils";
+import { isServerlessAccount } from "../../../Utils/CapabilityUtils";
+import { isRunningOnNationalCloud } from "../../../Utils/CloudUtils";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { OpenFullScreen } from "../../OpenFullScreen";
+import { LoadQueryPane } from "../../Panes/LoadQueryPane/LoadQueryPane";
+import { SettingsPane } from "../../Panes/SettingsPane/SettingsPane";
+import { SelectedNodeState } from "../../useSelectedNode";
 
 let counter = 0;
 
-export function createStaticCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
+export function createStaticCommandBarButtons(
+  container: Explorer,
+  selectedNodeState: SelectedNodeState
+): CommandButtonComponentProps[] {
   if (userContext.authType === AuthType.ResourceToken) {
-    return createStaticCommandBarButtonsForResourceToken(container);
+    return createStaticCommandBarButtonsForResourceToken(container, selectedNodeState);
   }
 
   const newCollectionBtn = createNewCollectionGroup(container);
@@ -65,35 +74,36 @@ export function createStaticCommandBarButtons(container: Explorer): CommandButto
     buttons.push(createOpenTerminalButton(container));
 
     buttons.push(createNotebookWorkspaceResetButton(container));
-    if (
-      (userContext.apiType === "Mongo" && container.isShellEnabled() && container.isDatabaseNodeOrNoneSelected()) ||
-      userContext.apiType === "Cassandra"
-    ) {
-      buttons.push(createDivider());
-      if (userContext.apiType === "Cassandra") {
-        buttons.push(createOpenCassandraTerminalButton(container));
-      } else {
+
+    buttons.push(createDivider());
+    buttons.push(createOpenPostgreSQLTerminalButton(container));
+
+    if (userContext.apiType === "Mongo" &&
+        container.isShellEnabled() &&
+        selectedNodeState.isDatabaseNodeOrNoneSelected()){
         buttons.push(createOpenMongoTerminalButton(container));
-      }
+    }
+    if (userContext.apiType === "Cassandra") {
+      buttons.push(createOpenCassandraTerminalButton(container));
     }
   } else {
-    if (!container.isRunningOnNationalCloud()) {
+    if (!isRunningOnNationalCloud()) {
       buttons.push(createEnableNotebooksButton(container));
     }
   }
 
-  if (!container.isDatabaseNodeOrNoneSelected()) {
+  if (!selectedNodeState.isDatabaseNodeOrNoneSelected()) {
     const isQuerySupported = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
 
     if (isQuerySupported) {
       buttons.push(createDivider());
-      const newSqlQueryBtn = createNewSQLQueryButton(container);
+      const newSqlQueryBtn = createNewSQLQueryButton(selectedNodeState);
       buttons.push(newSqlQueryBtn);
     }
 
-    if (isQuerySupported && container.selectedNode() && container.findSelectedCollection()) {
+    if (isQuerySupported && selectedNodeState.findSelectedCollection()) {
       const openQueryBtn = createOpenQueryButton(container);
-      openQueryBtn.children = [createOpenQueryButton(container), createOpenQueryFromDiskButton(container)];
+      openQueryBtn.children = [createOpenQueryButton(container), createOpenQueryFromDiskButton()];
       buttons.push(openQueryBtn);
     }
 
@@ -103,16 +113,16 @@ export function createStaticCommandBarButtons(container: Explorer): CommandButto
         iconSrc: AddStoredProcedureIcon,
         iconAlt: label,
         onCommandClick: () => {
-          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+          const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
           selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection);
         },
         commandButtonLabel: label,
         ariaLabel: label,
         hasPopup: true,
-        disabled: container.isDatabaseNodeOrNoneSelected(),
+        disabled: selectedNodeState.isDatabaseNodeOrNoneSelected(),
       };
 
-      newStoredProcedureBtn.children = createScriptCommandButtons(container);
+      newStoredProcedureBtn.children = createScriptCommandButtons(selectedNodeState);
       buttons.push(newStoredProcedureBtn);
     }
   }
@@ -120,16 +130,19 @@ export function createStaticCommandBarButtons(container: Explorer): CommandButto
   return buttons;
 }
 
-export function createContextCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
+export function createContextCommandBarButtons(
+  container: Explorer,
+  selectedNodeState: SelectedNodeState
+): CommandButtonComponentProps[] {
   const buttons: CommandButtonComponentProps[] = [];
 
-  if (!container.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo") {
+  if (!selectedNodeState.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo") {
     const label = container.isShellEnabled() ? "Open Mongo Shell" : "New Shell";
     const newMongoShellBtn: CommandButtonComponentProps = {
       iconSrc: HostedTerminalIcon,
       iconAlt: label,
       onCommandClick: () => {
-        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         if (container.isShellEnabled()) {
           container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
         } else {
@@ -139,7 +152,7 @@ export function createContextCommandBarButtons(container: Explorer): CommandButt
       commandButtonLabel: label,
       ariaLabel: label,
       hasPopup: true,
-      disabled: container.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo",
+      disabled: selectedNodeState.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo",
     };
     buttons.push(newMongoShellBtn);
   }
@@ -152,7 +165,7 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
     {
       iconSrc: SettingsIcon,
       iconAlt: "Settings",
-      onCommandClick: () => container.openSettingPane(),
+      onCommandClick: () => useSidePanel.getState().openSidePanel("Settings", <SettingsPane />),
       commandButtonLabel: undefined,
       ariaLabel: "Settings",
       tooltipText: "Settings",
@@ -161,19 +174,22 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
     },
   ];
 
-  if (container.isHostedDataExplorerEnabled()) {
+  const showOpenFullScreen =
+    configContext.platform === Platform.Portal && !isRunningOnNationalCloud() && userContext.apiType !== "Gremlin";
+
+  if (showOpenFullScreen) {
     const label = "Open Full Screen";
     const fullScreenButton: CommandButtonComponentProps = {
       iconSrc: OpenInTabIcon,
       iconAlt: label,
       onCommandClick: () => {
-        container.openSidePanel("Open Full Screen", <OpenFullScreen />);
+        useSidePanel.getState().openSidePanel("Open Full Screen", <OpenFullScreen />);
       },
       commandButtonLabel: undefined,
       ariaLabel: label,
       tooltipText: label,
       hasPopup: false,
-      disabled: !container.isHostedDataExplorerEnabled(),
+      disabled: !showOpenFullScreen,
       className: "OpenFullScreen",
     };
     buttons.push(fullScreenButton);
@@ -215,7 +231,7 @@ function areScriptsSupported(): boolean {
 }
 
 function createNewCollectionGroup(container: Explorer): CommandButtonComponentProps {
-  const label = container.addCollectionText();
+  const label = `New ${getCollectionName()}`;
   return {
     iconSrc: AddCollectionIcon,
     iconAlt: label,
@@ -232,7 +248,7 @@ function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonCo
     return undefined;
   }
 
-  if (container.isServerlessEnabled()) {
+  if (isServerlessAccount()) {
     return undefined;
   }
 
@@ -271,20 +287,20 @@ function createNewDatabase(container: Explorer): CommandButtonComponentProps {
   };
 }
 
-function createNewSQLQueryButton(container: Explorer): CommandButtonComponentProps {
+function createNewSQLQueryButton(selectedNodeState: SelectedNodeState): CommandButtonComponentProps {
   if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
     const label = "New SQL Query";
     return {
       iconSrc: AddSqlQueryIcon,
       iconAlt: label,
       onCommandClick: () => {
-        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewQueryClick(selectedCollection);
       },
       commandButtonLabel: label,
       ariaLabel: label,
       hasPopup: true,
-      disabled: container.isDatabaseNodeOrNoneSelected(),
+      disabled: selectedNodeState.isDatabaseNodeOrNoneSelected(),
     };
   } else if (userContext.apiType === "Mongo") {
     const label = "New Query";
@@ -292,23 +308,24 @@ function createNewSQLQueryButton(container: Explorer): CommandButtonComponentPro
       iconSrc: AddSqlQueryIcon,
       iconAlt: label,
       onCommandClick: () => {
-        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewMongoQueryClick(selectedCollection);
       },
       commandButtonLabel: label,
       ariaLabel: label,
       hasPopup: true,
-      disabled: container.isDatabaseNodeOrNoneSelected(),
+      disabled: selectedNodeState.isDatabaseNodeOrNoneSelected(),
     };
   }
 
   return undefined;
 }
 
-export function createScriptCommandButtons(container: Explorer): CommandButtonComponentProps[] {
+export function createScriptCommandButtons(selectedNodeState: SelectedNodeState): CommandButtonComponentProps[] {
   const buttons: CommandButtonComponentProps[] = [];
 
-  const shouldEnableScriptsCommands: boolean = !container.isDatabaseNodeOrNoneSelected() && areScriptsSupported();
+  const shouldEnableScriptsCommands: boolean =
+    !selectedNodeState.isDatabaseNodeOrNoneSelected() && areScriptsSupported();
 
   if (shouldEnableScriptsCommands) {
     const label = "New Stored Procedure";
@@ -316,13 +333,13 @@ export function createScriptCommandButtons(container: Explorer): CommandButtonCo
       iconSrc: AddStoredProcedureIcon,
       iconAlt: label,
       onCommandClick: () => {
-        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection);
       },
       commandButtonLabel: label,
       ariaLabel: label,
       hasPopup: true,
-      disabled: container.isDatabaseNodeOrNoneSelected(),
+      disabled: selectedNodeState.isDatabaseNodeOrNoneSelected(),
     };
     buttons.push(newStoredProcedureBtn);
   }
@@ -333,13 +350,13 @@ export function createScriptCommandButtons(container: Explorer): CommandButtonCo
       iconSrc: AddUdfIcon,
       iconAlt: label,
       onCommandClick: () => {
-        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewUserDefinedFunctionClick(selectedCollection);
       },
       commandButtonLabel: label,
       ariaLabel: label,
       hasPopup: true,
-      disabled: container.isDatabaseNodeOrNoneSelected(),
+      disabled: selectedNodeState.isDatabaseNodeOrNoneSelected(),
     };
     buttons.push(newUserDefinedFunctionBtn);
   }
@@ -350,13 +367,13 @@ export function createScriptCommandButtons(container: Explorer): CommandButtonCo
       iconSrc: AddTriggerIcon,
       iconAlt: label,
       onCommandClick: () => {
-        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewTriggerClick(selectedCollection);
       },
       commandButtonLabel: label,
       ariaLabel: label,
       hasPopup: true,
-      disabled: container.isDatabaseNodeOrNoneSelected(),
+      disabled: selectedNodeState.isDatabaseNodeOrNoneSelected(),
     };
     buttons.push(newTriggerBtn);
   }
@@ -403,12 +420,12 @@ function createOpenQueryButton(container: Explorer): CommandButtonComponentProps
   };
 }
 
-function createOpenQueryFromDiskButton(container: Explorer): CommandButtonComponentProps {
+function createOpenQueryFromDiskButton(): CommandButtonComponentProps {
   const label = "Open Query From Disk";
   return {
     iconSrc: OpenQueryFromDiskIcon,
     iconAlt: label,
-    onCommandClick: () => container.openLoadQueryPanel(),
+    onCommandClick: () => useSidePanel.getState().openSidePanel("Load Query", <LoadQueryPane />),
     commandButtonLabel: label,
     ariaLabel: label,
     hasPopup: true,
@@ -450,6 +467,19 @@ function createOpenTerminalButton(container: Explorer): CommandButtonComponentPr
   };
 }
 
+function createOpenPostgreSQLTerminalButton(container: Explorer): CommandButtonComponentProps {
+  const label = "Open PostgreSQL Shell";
+  return {
+    iconSrc: HostedTerminalIcon,
+    iconAlt: label,
+    onCommandClick: () => container.openNotebookTerminal(ViewModels.TerminalKind.PostgreSQL),
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: false,
+    ariaLabel: label,
+  };
+}
+
 function createOpenMongoTerminalButton(container: Explorer): CommandButtonComponentProps {
   const label = "Open Mongo Shell";
   const tooltip =
@@ -529,19 +559,25 @@ function createManageGitHubAccountButton(container: Explorer): CommandButtonComp
   };
 }
 
-function createStaticCommandBarButtonsForResourceToken(container: Explorer): CommandButtonComponentProps[] {
-  const newSqlQueryBtn = createNewSQLQueryButton(container);
+function createStaticCommandBarButtonsForResourceToken(
+  container: Explorer,
+  selectedNodeState: SelectedNodeState
+): CommandButtonComponentProps[] {
+  const newSqlQueryBtn = createNewSQLQueryButton(selectedNodeState);
   const openQueryBtn = createOpenQueryButton(container);
 
-  newSqlQueryBtn.disabled = !container.isResourceTokenCollectionNodeSelected();
+  const isResourceTokenCollectionNodeSelected: boolean =
+    container.resourceTokenCollection() &&
+    container.resourceTokenCollection().id() === selectedNodeState.selectedNode?.id();
+  newSqlQueryBtn.disabled = !isResourceTokenCollectionNodeSelected;
   newSqlQueryBtn.onCommandClick = () => {
     const resourceTokenCollection: ViewModels.CollectionBase = container.resourceTokenCollection();
     resourceTokenCollection && resourceTokenCollection.onNewQueryClick(resourceTokenCollection, undefined);
   };
 
-  openQueryBtn.disabled = !container.isResourceTokenCollectionNodeSelected();
+  openQueryBtn.disabled = !isResourceTokenCollectionNodeSelected;
   if (!openQueryBtn.disabled) {
-    openQueryBtn.children = [createOpenQueryButton(container), createOpenQueryFromDiskButton(container)];
+    openQueryBtn.children = [createOpenQueryButton(container), createOpenQueryFromDiskButton()];
   }
 
   return [newSqlQueryBtn, openQueryBtn];

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -14,7 +14,6 @@ import { StyleConstants } from "../../../Common/Constants";
 import { MemoryUsageInfo } from "../../../Contracts/DataModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { ArcadiaMenuPicker } from "../../Controls/Arcadia/ArcadiaMenuPicker";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import { MemoryTrackerComponent } from "./MemoryTrackerComponent";
 
@@ -168,10 +167,6 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
           };
         }
 
-        if (btn.isArcadiaPicker && btn.arcadiaProps) {
-          result.commandBarButtonAs = () => <ArcadiaMenuPicker {...btn.arcadiaProps} />;
-        }
-
         return result;
       }
     );

src/Explorer/Menus/NavBar/ControlBarComponent.tsx

@@ -1,33 +0,0 @@
-/**
- * React component for control bar
- */
-
-import * as React from "react";
-import {
-  CommandButtonComponent,
-  CommandButtonComponentProps,
-} from "../../Controls/CommandButton/CommandButtonComponent";
-
-export interface ControlBarComponentProps {
-  buttons: CommandButtonComponentProps[];
-}
-
-export class ControlBarComponent extends React.Component<ControlBarComponentProps> {
-  private static renderButtons(commandButtonOptions: CommandButtonComponentProps[]): JSX.Element[] {
-    return commandButtonOptions.map(
-      (btn: CommandButtonComponentProps, index: number): JSX.Element => {
-        // Remove label
-        btn.commandButtonLabel = undefined;
-        return CommandButtonComponent.renderButton(btn, `${index}`);
-      }
-    );
-  }
-
-  public render(): JSX.Element {
-    if (!this.props.buttons || this.props.buttons.length < 1) {
-      return <React.Fragment />;
-    }
-
-    return <React.Fragment>{ControlBarComponent.renderButtons(this.props.buttons)}</React.Fragment>;
-  }
-}

src/Explorer/Menus/NavBar/ControlBarComponentAdapter.tsx

@@ -1,28 +0,0 @@
-/**
- * This adapter is responsible to render the React component
- * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
- * and update any knockout observables passed from the parent.
- */
-
-import * as ko from "knockout";
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import { ControlBarComponent } from "./ControlBarComponent";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-
-export class ControlBarComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<number>;
-
-  constructor(private buttons: ko.ObservableArray<CommandButtonComponentProps>) {
-    this.buttons.subscribe(() => this.forceRender());
-    this.parameters = ko.observable<number>(Date.now());
-  }
-
-  public renderComponent(): JSX.Element {
-    return <ControlBarComponent buttons={this.buttons()} />;
-  }
-
-  public forceRender(): void {
-    window.requestAnimationFrame(() => this.parameters(Date.now()));
-  }
-}

src/Explorer/Menus/NotificationConsole/ConsoleData.tsx

@@ -0,0 +1,16 @@
+/**
+ * Interface for the data/content that will be recorded
+ */
+
+export interface ConsoleData {
+  type: ConsoleDataType;
+  date: string;
+  message: string;
+  id?: string;
+}
+
+export enum ConsoleDataType {
+  Info = 0,
+  Error = 1,
+  InProgress = 2,
+}

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx

@@ -1,10 +1,7 @@
 import { shallow } from "enzyme";
 import React from "react";
-import {
-  ConsoleDataType,
-  NotificationConsoleComponent,
-  NotificationConsoleComponentProps,
-} from "./NotificationConsoleComponent";
+import { ConsoleDataType } from "./ConsoleData";
+import { NotificationConsoleComponent, NotificationConsoleComponentProps } from "./NotificationConsoleComponent";
 
 describe("NotificationConsoleComponent", () => {
   const createBlankProps = (): NotificationConsoleComponentProps => {

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -15,26 +15,9 @@ import LoadingIcon from "../../../../images/loading.svg";
 import ChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
 import ChevronUpIcon from "../../../../images/QueryBuilder/CollapseChevronUp_16x.png";
 import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
+import { useNotificationConsole } from "../../../hooks/useNotificationConsole";
 import { userContext } from "../../../UserContext";
-
-/**
- * Log levels
- */
-export enum ConsoleDataType {
-  Info = 0,
-  Error = 1,
-  InProgress = 2,
-}
-
-/**
- * Interface for the data/content that will be recorded
- */
-export interface ConsoleData {
-  type: ConsoleDataType;
-  date: string;
-  message: string;
-  id?: string;
-}
+import { ConsoleData, ConsoleDataType } from "./ConsoleData";
 
 export interface NotificationConsoleComponentProps {
   isConsoleExpanded: boolean;
@@ -321,3 +304,22 @@ const PrPreview = (props: { pr: string }) => {
     </>
   );
 };
+
+export const NotificationConsole: React.FC = () => {
+  const setIsExpanded = useNotificationConsole((state) => state.setIsExpanded);
+  const isExpanded = useNotificationConsole((state) => state.isExpanded);
+  const consoleData = useNotificationConsole((state) => state.consoleData);
+  const inProgressConsoleDataIdToBeDeleted = useNotificationConsole(
+    (state) => state.inProgressConsoleDataIdToBeDeleted
+  );
+  // TODO Refactor NotificationConsoleComponent into a functional component and remove this wrapper
+  // This component only exists so we can use hooks and pass them down to a non-functional component
+  return (
+    <NotificationConsoleComponent
+      consoleData={consoleData}
+      inProgressConsoleDataIdToBeDeleted={inProgressConsoleDataIdToBeDeleted}
+      isConsoleExpanded={isExpanded}
+      setIsConsoleExpanded={setIsExpanded}
+    />
+  );
+};

src/Explorer/Notebook/NotebookClientV2.ts

@@ -21,7 +21,7 @@ import {
   makeStateRecord,
   makeTransformsRecord,
 } from "@nteract/core";
-import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
+import { configOption, defineConfigOption } from "@nteract/mythic-configuration";
 import { Media } from "@nteract/outputs";
 import TransformVDOM from "@nteract/transform-vdom";
 import * as Immutable from "immutable";
@@ -242,22 +242,27 @@ export class NotebookClientV2 {
     );
 
     // Additional configuration
-    this.store.dispatch(configOption("editorType").action(params.cellEditorType ?? "monaco"));
+    this.store.dispatch(configOption("editorType").action(params.cellEditorType ?? "codemirror"));
     this.store.dispatch(
       configOption("autoSaveInterval").action(params.autoSaveInterval ?? Constants.Notebook.autoSaveIntervalMs)
     );
-    createConfigCollection({
-      key: "monaco",
-    });
-    defineConfigOption({
-      label: "Show Line numbers",
-      key: "monaco.lineNumbers",
-      values: [
-        { label: "Yes", value: true },
-        { label: "No", value: false },
-      ],
-      defaultValue: true,
-    });
+    this.store.dispatch(configOption("codeMirror.lineNumbers").action(true));
+
+    const readOnlyConfigOption = configOption("codeMirror.readOnly");
+    const readOnlyValue = params.isReadOnly ? "nocursor" : undefined;
+    if (!readOnlyConfigOption) {
+      defineConfigOption({
+        label: "Read-only",
+        key: "codeMirror.readOnly",
+        values: [
+          { label: "Read-Only", value: "nocursor" },
+          { label: "Not read-only", value: undefined },
+        ],
+        defaultValue: readOnlyValue,
+      });
+    } else {
+      this.store.dispatch(readOnlyConfigOption.action(readOnlyValue));
+    }
   }
 
   /**

src/Explorer/Notebook/NotebookComponent/NotebookComponent.less

@@ -1,10 +1,10 @@
 .notebookComponentContainer {
-  text-transform:none;
-  line-height:1.28581;
-  letter-spacing:0;
-  font-size:14px;
-  font-weight:400;
-  color:#182026;
+  text-transform: none;
+  line-height: 1.28581;
+  letter-spacing: 0;
+  font-size: 14px;
+  font-weight: 400;
+  color: #182026;
   height: 100%;
 
   .hotKeys {

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -9,7 +9,7 @@ import {
   KernelRef,
   RemoteKernelProps,
   selectors,
-  ServerConfig as JupyterServerConfig,
+  ServerConfig as JupyterServerConfig
 } from "@nteract/core";
 import { Channels, childOf, createMessage, JupyterMessage, message, ofMessageType } from "@nteract/messaging";
 import { RecordOf } from "immutable";
@@ -29,14 +29,13 @@ import {
   switchMap,
   take,
   tap,
-  timeout,
+  timeout
 } from "rxjs/operators";
 import { webSocket } from "rxjs/webSocket";
 import * as Constants from "../../../Common/Constants";
 import { Areas } from "../../../Common/Constants";
 import { Action as TelemetryAction, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { decryptJWTToken } from "../../../Utils/AuthorizationUtils";
 import { logConsoleError, logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
 import * as FileSystemUtil from "../FileSystemUtil";
 import * as cdbActions from "../NotebookComponent/actions";
@@ -105,15 +104,10 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
     params.append("session_id", sessionId);
   }
 
-  const userId = getUserPuid();
-  if (userId) {
-    params.append("user_id", userId);
-  }
-
   const q = params.toString();
   const suffix = q !== "" ? `?${q}` : "";
 
-  const url = (serverConfig.endpoint || "") + `api/kernels/${kernelId}/channels${suffix}`;
+  const url = (serverConfig.endpoint.slice(0, -1) || "") + `api/kernels/${kernelId}/channels${suffix}`;
 
   return url.replace(/^http(s)?/, "ws$1");
 };
@@ -289,7 +283,6 @@ export const launchWebSocketKernelEpic = (
         return EMPTY;
       }
       const serverConfig: NotebookServiceConfig = selectors.serverConfig(host);
-      serverConfig.userPuid = getUserPuid();
 
       const {
         payload: { kernelSpecName, cwd, kernelRef, contentRef },
@@ -766,25 +759,6 @@ const executeFocusedCellAndFocusNextEpic = (
   );
 };
 
-function getUserPuid(): string {
-  const arcadiaToken = window.dataExplorer && window.dataExplorer.arcadiaToken();
-  if (!arcadiaToken) {
-    return undefined;
-  }
-
-  let userPuid;
-  try {
-    const tokenPayload = decryptJWTToken(arcadiaToken);
-    if (tokenPayload && tokenPayload.hasOwnProperty("puid")) {
-      userPuid = tokenPayload.puid;
-    }
-  } catch (error) {
-    // ignore
-  }
-
-  return userPuid;
-}
-
 /**
  * Close tab if mimetype not supported
  * @param action$

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -53,7 +53,7 @@ export class NotebookContainerClient {
 
     const { notebookServerEndpoint, authToken } = this.getNotebookServerConfig();
     try {
-      const response = await fetch(`${notebookServerEndpoint}/api/metrics/memory`, {
+      const response = await fetch(`${notebookServerEndpoint}api/metrics/memory`, {
         method: "GET",
         headers: {
           Authorization: authToken,
@@ -130,19 +130,23 @@ export class NotebookContainerClient {
   }
 
   private async recreateNotebookWorkspaceAsync(): Promise<void> {
-    const explorer = window.dataExplorer;
     const { databaseAccount } = userContext;
     if (!databaseAccount?.id) {
       throw new Error("DataExplorer not initialized");
     }
-
-    const notebookWorkspaceManager = explorer.notebookWorkspaceManager;
+    /*
     try {
-      await notebookWorkspaceManager.deleteNotebookWorkspaceAsync(databaseAccount?.id, "default");
-      await notebookWorkspaceManager.createNotebookWorkspaceAsync(databaseAccount?.id, "default");
+      await destroy(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name, "default");
+      await createOrUpdate(
+        userContext.subscriptionId,
+        userContext.resourceGroup,
+        userContext.databaseAccount.name,
+        "default"
+      );
     } catch (error) {
       Logger.logError(getErrorMessage(error), "NotebookContainerClient/recreateNotebookWorkspaceAsync");
       return Promise.reject(error);
     }
+    */
   }
 }

src/Explorer/Notebook/NotebookContentClient.ts

@@ -12,7 +12,7 @@ export class NotebookContentClient {
     private notebookServerInfo: ko.Observable<DataModels.NotebookWorkspaceConnectionInfo>,
     public notebookBasePath: ko.Observable<string>,
     private contentProvider: IContentProvider
-  ) {}
+  ) { }
 
   /**
    * This updates the item and points all the children's parent to this item
@@ -25,6 +25,9 @@ export class NotebookContentClient {
     });
   }
 
+  private sleep = (milliseconds: number) => {
+    return new Promise(resolve => setTimeout(resolve, milliseconds))
+  }
   /**
    *
    * @param parent parent folder
@@ -35,6 +38,7 @@ export class NotebookContentClient {
     }
 
     const type = "notebook";
+
     return this.contentProvider
       .create<"notebook">(this.getServerConfig(), parent.path, { type })
       .toPromise()

src/Explorer/Notebook/NotebookManager.tsx

@@ -14,13 +14,13 @@ import { MemoryUsageInfo } from "../../Contracts/DataModels";
 import { GitHubClient } from "../../GitHub/GitHubClient";
 import { GitHubContentProvider } from "../../GitHub/GitHubContentProvider";
 import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
+import { useSidePanel } from "../../hooks/useSidePanel";
 import { JunoClient } from "../../Juno/JunoClient";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { getFullName } from "../../Utils/UserUtils";
 import Explorer from "../Explorer";
-import { ContextualPaneBase } from "../Panes/ContextualPaneBase";
 import { CopyNotebookPane } from "../Panes/CopyNotebookPane/CopyNotebookPane";
 import { PublishNotebookPane } from "../Panes/PublishNotebookPane/PublishNotebookPane";
 import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
@@ -56,8 +56,6 @@ export default class NotebookManager {
   public gitHubOAuthService: GitHubOAuthService;
   public gitHubClient: GitHubClient;
 
-  public gitHubReposPane: ContextualPaneBase;
-
   public initialize(params: NotebookManagerOptions): void {
     this.params = params;
     this.junoClient = new JunoClient();
@@ -98,7 +96,7 @@ export default class NotebookManager {
     this.gitHubOAuthService.getTokenObservable().subscribe((token) => {
       this.gitHubClient.setToken(token?.access_token);
       if (this?.gitHubOAuthService.isLoggedIn()) {
-        this.params.container.closeSidePanel();
+        useSidePanel.getState().closeSidePanel();
         this.params.container.openGitHubReposPanel("Manager GitHub settings", this.junoClient);
       }
 
@@ -127,37 +125,37 @@ export default class NotebookManager {
     onTakeSnapshot: (request: SnapshotRequest) => void,
     onClosePanel: () => void
   ): Promise<void> {
-    const explorer = this.params.container;
-    explorer.openSidePanel(
-      "Publish Notebook",
-      <PublishNotebookPane
-        explorer={this.params.container}
-        junoClient={this.junoClient}
-        closePanel={this.params.container.closeSidePanel}
-        openNotificationConsole={this.params.container.expandConsole}
-        name={name}
-        author={getFullName()}
-        notebookContent={content}
-        notebookContentRef={notebookContentRef}
-        onTakeSnapshot={onTakeSnapshot}
-      />,
-      onClosePanel
-    );
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Publish Notebook",
+        <PublishNotebookPane
+          explorer={this.params.container}
+          junoClient={this.junoClient}
+          name={name}
+          author={getFullName()}
+          notebookContent={content}
+          notebookContentRef={notebookContentRef}
+          onTakeSnapshot={onTakeSnapshot}
+        />,
+        onClosePanel
+      );
   }
 
   public openCopyNotebookPane(name: string, content: string): void {
     const { container } = this.params;
-    container.openSidePanel(
-      "Copy Notebook",
-      <CopyNotebookPane
-        container={container}
-        closePanel={container.closeSidePanel}
-        junoClient={this.junoClient}
-        gitHubOAuthService={this.gitHubOAuthService}
-        name={name}
-        content={content}
-      />
-    );
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Copy Notebook",
+        <CopyNotebookPane
+          container={container}
+          junoClient={this.junoClient}
+          gitHubOAuthService={this.gitHubOAuthService}
+          name={name}
+          content={content}
+        />
+      );
   }
 
   // Octokit's error handler uses any

src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.less

@@ -1,56 +1,68 @@
 .NotebookReadOnlyRender {
-    .nteract-cell-container {
-        margin-bottom: 10px;
-    }
+  .nteract-cell-container {
+    margin-bottom: 10px;
+  }
 
-    .nteract-cell {
-        padding: 0.5px;
-        border: 1px solid #ffffff;
-        border-left: 3px solid #ffffff;
-    }
+  .nteract-cell {
+    padding: 0.5px;
+    border: 1px solid #ffffff;
+    border-left: 3px solid #ffffff;
+  }
 
-    .CodeMirror-scroll {
-        background-color: #f5f5f5;
-    }
+  .CodeMirror-scroll {
+    overflow: hidden !important;
+  }
 
-    .CodeMirror-lines {
-        cursor: default;
-    }
+  .CodeMirror-lines {
+    cursor: default;
+  }
 
-    .nteract-cell:hover {
-        border: 1px solid #0078d4;
-        border-left: 3px solid #0078d4;
+  .CodeMirror {
+    height: inherit;
+  }
 
-        .CodeMirror-scroll {
-            background-color: #ffffff;
-        }
+  .CodeMirror-scroll,
+  .CodeMirror-linenumber,
+  .CodeMirror-gutters {
+    background-color: #f5f5f5;
+  }
 
-        .nteract-cell-outputs {
-            border-top: 1px solid #d7d7d7;
-        }
+  .nteract-cell:hover {
+    border: 1px solid #0078d4;
+    border-left: 3px solid #0078d4;
 
-        .nteract-md-cell {
-            background-color: #ffffff;
-        }
+    .CodeMirror-scroll,
+    .CodeMirror-linenumber,
+    .CodeMirror-gutters {
+      background-color: #ffffff;
     }
 
     .nteract-cell-outputs {
-        padding:  10px;
-        border-top: 1px solid #ffffff;
-
-        pre {
-            background-color: #ffffff;
-            border: none;
-            padding: 0px;
-            margin: 0px;
-        }
+      border-top: 1px solid #d7d7d7;
     }
 
     .nteract-md-cell {
-        background-color: #f5f5f5;
+      background-color: #ffffff;
     }
+  }
 
-    .nteract-cell:hover.nteract-md-cell {
-        background-color: #ffffff;
+  .nteract-cell-outputs {
+    padding: 10px;
+    border-top: 1px solid #ffffff;
+
+    pre {
+      background-color: #ffffff;
+      border: none;
+      padding: 0px;
+      margin: 0px;
     }
+  }
+
+  .nteract-md-cell {
+    background-color: #f5f5f5;
+  }
+
+  .nteract-cell:hover.nteract-md-cell {
+    background-color: #ffffff;
+  }
 }

src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx

@@ -1,6 +1,6 @@
 import { actions, ContentRef } from "@nteract/core";
 import { Cells, CodeCell, RawCell } from "@nteract/stateful-components";
-import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
+import CodeMirrorEditor from "@nteract/stateful-components/lib/inputs/connected-editors/codemirror";
 import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
 import Prompt, { PassedPromptProps } from "@nteract/stateful-components/lib/inputs/prompt";
 import * as React from "react";
@@ -67,8 +67,8 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
                     ? () => <SandboxOutputs id={id} contentRef={contentRef} />
                     : undefined,
                   editor: {
-                    monaco: (props: PassedEditorProps) =>
-                      this.props.hideInputs ? <></> : <MonacoEditor readOnly={true} {...props} editorType={"monaco"} />,
+                    codemirror: (props: PassedEditorProps) =>
+                      this.props.hideInputs ? <></> : <CodeMirrorEditor {...props} editorType="codemirror" />,
                   },
                 }}
               </CodeCell>
@@ -84,8 +84,8 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
               <RawCell id={id} contentRef={contentRef} cell_type="raw">
                 {{
                   editor: {
-                    monaco: (props: PassedEditorProps) =>
-                      this.props.hideInputs ? <></> : <MonacoEditor {...props} readOnly={true} editorType={"monaco"} />,
+                    codemirror: (props: PassedEditorProps) =>
+                      this.props.hideInputs ? <></> : <CodeMirrorEditor {...props} editorType="codemirror" />,
                   },
                 }}
               </RawCell>

src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.less

@@ -3,110 +3,122 @@
 @HighlightColor: #0078d4;
 
 .NotebookRendererContainer {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
 }
 
 .NotebookRenderer {
-    overflow: auto;
-    flex-grow: 1;
+  overflow: auto;
+  flex-grow: 1;
 
-    .nteract-cells {
-        padding-top: 0px;
+  .nteract-cells {
+    padding-top: 0px;
+  }
+
+  .nteract-cell-container {
+    margin-bottom: 10px;
+
+    .nteract-cell {
+      padding: 0.5px;
+      border: 1px solid #ffffff;
+      border-left: 3px solid #ffffff;
+
+      .CellContextMenuButton {
+        position: sticky;
+        z-index: 1;
+        top: 0px;
+        right: 0px;
+        margin: 0px 0px 0px -100%;
+        float: right;
+        visibility: hidden;
+      }
     }
 
-    .nteract-cell-container {
-        margin-bottom: 10px;
-
-        .nteract-cell {
-            padding: 0.5px;
-            border: 1px solid #ffffff;
-            border-left: 3px solid #ffffff;
-
-            .CellContextMenuButton {
-                position: sticky;
-                z-index: 1;
-                top: 0px;
-                right: 0px;
-                margin: 0px 0px 0px -100%;
-                float: right;
-                visibility: hidden;
-            }
-        }
-
-        .CodeMirror-scroll, .CodeMirror-linenumber, .CodeMirror-gutters {
-            background-color: #f5f5f5;
-        }
-
-        .nteract-cell:hover {
-            border: 1px solid @HoverColor;
-            border-left: 3px solid @HoverColor;
-
-            .CellContextMenuButton {
-                visibility: visible;
-            }
-        }
+    .CodeMirror-scroll {
+      overflow: hidden !important;
     }
 
-    .nteract-cell-container.selected {
-        .nteract-cell {
-            border: 1px solid @HighlightColor;
-            border-left: 3px solid @HighlightColor;
-        }
+    .CodeMirror-scroll,
+    .CodeMirror-linenumber,
+    .CodeMirror-gutters {
+      background-color: #f5f5f5;
     }
 
-    // White background when hovered or selected
-    .nteract-cell:hover, .nteract-cell-container.selected .nteract-cell {
-        .CodeMirror-scroll, .CodeMirror-linenumber, .CodeMirror-gutters {
-            background-color: #ffffff;
-        }
+    .CodeMirror {
+      height: inherit;
+    }
 
-        .CodeMirror-linenumber {
-            color: #015CDA;
-        }
+    .nteract-cell:hover {
+      border: 1px solid @HoverColor;
+      border-left: 3px solid @HoverColor;
 
-        .nteract-cell-outputs {
-            border-top: 1px solid @HoverColor;
-        }
+      .CellContextMenuButton {
+        visibility: visible;
+      }
+    }
+  }
 
-        .nteract-md-cell {
-            background-color: #ffffff;
-        }
+  .nteract-cell-container.selected {
+    .nteract-cell {
+      border: 1px solid @HighlightColor;
+      border-left: 3px solid @HighlightColor;
+    }
+  }
+
+  // White background when hovered or selected
+  .nteract-cell:hover,
+  .nteract-cell-container.selected .nteract-cell {
+    .CodeMirror-scroll,
+    .CodeMirror-linenumber,
+    .CodeMirror-gutters {
+      background-color: #ffffff;
+    }
+
+    .CodeMirror-linenumber {
+      color: #015cda;
     }
 
     .nteract-cell-outputs {
-        padding:  10px;
-        border-top: 1px solid #ffffff;
-
-        pre {
-            background-color: #ffffff;
-            border: none;
-            padding: 0px;
-            margin: 0px;
-        }
+      border-top: 1px solid @HoverColor;
     }
 
     .nteract-md-cell {
-        background-color: #f5f5f5;
+      background-color: #ffffff;
     }
+  }
 
-    .nteract-cell:hover.nteract-md-cell {
-        background-color: #ffffff;
-    }
+  .nteract-cell-outputs {
+    padding: 10px;
+    border-top: 1px solid #ffffff;
 
-    .nteract-md-cell .ntreact-cell-source {
-        width: 100%;
+    pre {
+      background-color: #ffffff;
+      border: none;
+      padding: 0px;
+      margin: 0px;
     }
+  }
+
+  .nteract-md-cell {
+    background-color: #f5f5f5;
+  }
+
+  .nteract-cell:hover.nteract-md-cell {
+    background-color: #ffffff;
+  }
+
+  .nteract-md-cell .ntreact-cell-source {
+    width: 100%;
+  }
 }
 
-
 // Undo tree.less
 .expanded::before {
-    content: '';
+  content: "";
 }
 
 .monaco-editor .monaco-list .main {
-    background-color: transparent;
-}
+  background-color: transparent;
+}

src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx

@@ -2,7 +2,7 @@ import { CellId } from "@nteract/commutable";
 import { CellType } from "@nteract/commutable/src";
 import { actions, ContentRef, selectors } from "@nteract/core";
 import { Cells, CodeCell, RawCell } from "@nteract/stateful-components";
-import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
+import CodeMirrorEditor from "@nteract/stateful-components/lib/inputs/connected-editors/codemirror";
 import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
 import * as React from "react";
 import { DndProvider } from "react-dnd";
@@ -120,7 +120,9 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
                         <CodeCell id={id} contentRef={contentRef} cell_type="code">
                           {{
                             editor: {
-                              monaco: (props: PassedEditorProps) => <MonacoEditor {...props} editorType={"monaco"} />,
+                              codemirror: (props: PassedEditorProps) => (
+                                <CodeMirrorEditor {...props} editorType="codemirror" />
+                              ),
                             },
                             prompt: ({ id, contentRef }: { id: CellId; contentRef: ContentRef }) => (
                               <Prompt id={id} contentRef={contentRef} isHovered={false}>
@@ -142,7 +144,9 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
                         <MarkdownCell id={id} contentRef={contentRef} cell_type="markdown">
                           {{
                             editor: {
-                              monaco: (props: PassedEditorProps) => <MonacoEditor {...props} editorType={"monaco"} />,
+                              codemirror: (props: PassedEditorProps) => (
+                                <CodeMirrorEditor {...props} editorType="codemirror" />
+                              ),
                             },
                             toolbar: () => <CellToolbar id={id} contentRef={contentRef} />,
                           }}
@@ -157,7 +161,9 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
                         <RawCell id={id} contentRef={contentRef} cell_type="raw">
                           {{
                             editor: {
-                              monaco: (props: PassedEditorProps) => <MonacoEditor {...props} editorType={"monaco"} />,
+                              codemirror: (props: PassedEditorProps) => (
+                                <CodeMirrorEditor {...props} editorType="codemirror" />
+                              ),
                             },
                             toolbar: () => <CellToolbar id={id} contentRef={contentRef} />,
                           }}

src/Explorer/Notebook/notebookClientV2.test.ts

@@ -1,8 +1,8 @@
 jest.mock("./NotebookComponent/store");
 jest.mock("@nteract/core");
+import { defineConfigOption } from "@nteract/mythic-configuration";
 import { NotebookClientV2 } from "./NotebookClientV2";
 import configureStore from "./NotebookComponent/store";
-import { defineConfigOption } from "@nteract/mythic-configuration";
 
 describe("auto start kernel", () => {
   it("configure autoStartKernelOnNotebookOpen properly depending whether notebook is/is not read-only", async () => {
@@ -24,6 +24,12 @@ describe("auto start kernel", () => {
       defaultValue: 1234,
     });
 
+    defineConfigOption({
+      label: "Line numbers",
+      key: "codeMirror.lineNumbers",
+      defaultValue: true,
+    });
+
     [true, false].forEach((isReadOnly) => {
       new NotebookClientV2({
         connectionInfo: {

src/Explorer/OpenActions/OpenActions.test.tsx

@@ -1,7 +1,7 @@
 import * as ko from "knockout";
-import { ActionContracts } from "../Contracts/ExplorerContracts";
-import * as ViewModels from "../Contracts/ViewModels";
-import Explorer from "./Explorer";
+import { ActionContracts } from "../../Contracts/ExplorerContracts";
+import * as ViewModels from "../../Contracts/ViewModels";
+import Explorer from "../Explorer";
 import { handleOpenAction } from "./OpenActions";
 
 describe("OpenActions", () => {
@@ -9,7 +9,6 @@ describe("OpenActions", () => {
     let explorer: Explorer;
     let database: ViewModels.Database;
     let collection: ViewModels.Collection;
-    let databases: ViewModels.Database[];
 
     beforeEach(() => {
       explorer = {} as Explorer;
@@ -19,7 +18,6 @@ describe("OpenActions", () => {
         id: ko.observable("db"),
         collections: ko.observableArray<ViewModels.Collection>([]),
       } as ViewModels.Database;
-      databases = [database];
       collection = {
         id: ko.observable("coll"),
       } as ViewModels.Collection;
@@ -68,7 +66,7 @@ describe("OpenActions", () => {
             paneKind: "AddCollection",
           };
 
-          const actionHandled = handleOpenAction(action, [], explorer);
+          handleOpenAction(action, [], explorer);
           expect(explorer.onNewCollectionClicked).toHaveBeenCalled();
         });
 
@@ -78,7 +76,7 @@ describe("OpenActions", () => {
             paneKind: ActionContracts.PaneKind.AddCollection,
           };
 
-          const actionHandled = handleOpenAction(action, [], explorer);
+          handleOpenAction(action, [], explorer);
           expect(explorer.onNewCollectionClicked).toHaveBeenCalled();
         });
       });

src/Explorer/OpenActions/OpenActions.tsx

@@ -1,39 +1,38 @@
 // TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.
+import React from "react";
+import { ActionContracts } from "../../Contracts/ExplorerContracts";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { useSidePanel } from "../../hooks/useSidePanel";
+import Explorer from "../Explorer";
+import { CassandraAddCollectionPane } from "../Panes/CassandraAddCollectionPane/CassandraAddCollectionPane";
+import { SettingsPane } from "../Panes/SettingsPane/SettingsPane";
+import { CassandraAPIDataClient } from "../Tables/TableDataClient";
 
-import { ActionContracts } from "../Contracts/ExplorerContracts";
-import * as ViewModels from "../Contracts/ViewModels";
-import Explorer from "./Explorer";
-
-export function handleOpenAction(
-  action: ActionContracts.DataExplorerAction,
-  databases: ViewModels.Database[],
-  explorer: Explorer
-): boolean {
-  if (
-    action.actionType === ActionContracts.ActionType.OpenCollectionTab ||
-    (<any>action).actionType === ActionContracts.ActionType[ActionContracts.ActionType.OpenCollectionTab]
-  ) {
-    openCollectionTab(<ActionContracts.OpenCollectionTab>action, databases);
-    return true;
+function generateQueryText(action: ActionContracts.OpenQueryTab, partitionKeyProperty: string): string {
+  if (!action.query) {
+    return "SELECT * FROM c";
+  } else if (action.query.text) {
+    return action.query.text;
+  } else if (!!action.query.partitionKeys && action.query.partitionKeys.length > 0) {
+    let query = "SELECT * FROM c WHERE";
+    for (let i = 0; i < action.query.partitionKeys.length; i++) {
+      const partitionKey = action.query.partitionKeys[i];
+      if (!partitionKey) {
+        // null partition key case
+        query = query.concat(` c.${partitionKeyProperty} = ${action.query.partitionKeys[i]}`);
+      } else if (typeof partitionKey !== "string") {
+        // Undefined partition key case
+        query = query.concat(` NOT IS_DEFINED(c.${partitionKeyProperty})`);
+      } else {
+        query = query.concat(` c.${partitionKeyProperty} = "${action.query.partitionKeys[i]}"`);
+      }
+      if (i !== action.query.partitionKeys.length - 1) {
+        query = query.concat(" OR");
+      }
+    }
+    return query;
   }
-
-  if (
-    action.actionType === ActionContracts.ActionType.OpenPane ||
-    (<any>action).actionType === ActionContracts.ActionType[ActionContracts.ActionType.OpenPane]
-  ) {
-    openPane(<ActionContracts.OpenPane>action, explorer);
-    return true;
-  }
-
-  if (
-    action.actionType === ActionContracts.ActionType.OpenSampleNotebook ||
-    (<any>action).actionType === ActionContracts.ActionType[ActionContracts.ActionType.OpenSampleNotebook]
-  ) {
-    openFile(<ActionContracts.OpenSampleNotebook>action, explorer);
-    return true;
-  }
-
-  return false;
+  return "SELECT * FROM c";
 }
 
 function openCollectionTab(
@@ -65,7 +64,7 @@ function openCollectionTab(
 
         if (
           action.tabKind === ActionContracts.TabKind.SQLDocuments ||
-          (<any>action).tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLDocuments]
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLDocuments]
         ) {
           collection.onDocumentDBDocumentsClick();
           break;
@@ -73,7 +72,7 @@ function openCollectionTab(
 
         if (
           action.tabKind === ActionContracts.TabKind.MongoDocuments ||
-          (<any>action).tabKind === ActionContracts.TabKind[ActionContracts.TabKind.MongoDocuments]
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.MongoDocuments]
         ) {
           collection.onMongoDBDocumentsClick();
           break;
@@ -81,7 +80,7 @@ function openCollectionTab(
 
         if (
           action.tabKind === ActionContracts.TabKind.SchemaAnalyzer ||
-          (<any>action).tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SchemaAnalyzer]
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SchemaAnalyzer]
         ) {
           collection.onSchemaAnalyzerClick();
           break;
@@ -89,7 +88,7 @@ function openCollectionTab(
 
         if (
           action.tabKind === ActionContracts.TabKind.TableEntities ||
-          (<any>action).tabKind === ActionContracts.TabKind[ActionContracts.TabKind.TableEntities]
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.TableEntities]
         ) {
           collection.onTableEntitiesClick();
           break;
@@ -97,7 +96,7 @@ function openCollectionTab(
 
         if (
           action.tabKind === ActionContracts.TabKind.Graph ||
-          (<any>action).tabKind === ActionContracts.TabKind[ActionContracts.TabKind.Graph]
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.Graph]
         ) {
           collection.onGraphDocumentsClick();
           break;
@@ -105,19 +104,19 @@ function openCollectionTab(
 
         if (
           action.tabKind === ActionContracts.TabKind.SQLQuery ||
-          (<any>action).tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLQuery]
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLQuery]
         ) {
           collection.onNewQueryClick(
             collection,
-            null,
-            generateQueryText(<ActionContracts.OpenQueryTab>action, collection.partitionKeyProperty)
+            undefined,
+            generateQueryText(action as ActionContracts.OpenQueryTab, collection.partitionKeyProperty)
           );
           break;
         }
 
         if (
           action.tabKind === ActionContracts.TabKind.ScaleSettings ||
-          (<any>action).tabKind === ActionContracts.TabKind[ActionContracts.TabKind.ScaleSettings]
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.ScaleSettings]
         ) {
           collection.onSettingsClick();
           break;
@@ -138,49 +137,59 @@ function openCollectionTab(
 function openPane(action: ActionContracts.OpenPane, explorer: Explorer) {
   if (
     action.paneKind === ActionContracts.PaneKind.AddCollection ||
-    (<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.AddCollection]
+    action.paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.AddCollection]
   ) {
     explorer.onNewCollectionClicked();
   } else if (
     action.paneKind === ActionContracts.PaneKind.CassandraAddCollection ||
-    (<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.CassandraAddCollection]
+    action.paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.CassandraAddCollection]
   ) {
-    explorer.openCassandraAddCollectionPane();
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Add Table",
+        <CassandraAddCollectionPane explorer={explorer} cassandraApiClient={new CassandraAPIDataClient()} />
+      );
   } else if (
     action.paneKind === ActionContracts.PaneKind.GlobalSettings ||
-    (<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.GlobalSettings]
+    action.paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.GlobalSettings]
   ) {
-    explorer.openSettingPane();
+    useSidePanel.getState().openSidePanel("Settings", <SettingsPane />);
   }
 }
 
+export function handleOpenAction(
+  action: ActionContracts.DataExplorerAction,
+  databases: ViewModels.Database[],
+  explorer: Explorer
+): boolean {
+  if (
+    action.actionType === ActionContracts.ActionType.OpenCollectionTab ||
+    action.actionType === ActionContracts.ActionType[ActionContracts.ActionType.OpenCollectionTab]
+  ) {
+    openCollectionTab(action as ActionContracts.OpenCollectionTab, databases);
+    return true;
+  }
+
+  if (
+    action.actionType === ActionContracts.ActionType.OpenPane ||
+    action.actionType === ActionContracts.ActionType[ActionContracts.ActionType.OpenPane]
+  ) {
+    openPane(action as ActionContracts.OpenPane, explorer);
+    return true;
+  }
+
+  if (
+    action.actionType === ActionContracts.ActionType.OpenSampleNotebook ||
+    action.actionType === ActionContracts.ActionType[ActionContracts.ActionType.OpenSampleNotebook]
+  ) {
+    openFile(action as ActionContracts.OpenSampleNotebook, explorer);
+    return true;
+  }
+
+  return false;
+}
+
 function openFile(action: ActionContracts.OpenSampleNotebook, explorer: Explorer) {
   explorer.handleOpenFileAction(decodeURIComponent(action.path));
 }
-
-function generateQueryText(action: ActionContracts.OpenQueryTab, partitionKeyProperty: string): string {
-  if (!action.query) {
-    return "SELECT * FROM c";
-  } else if (!!action.query.text) {
-    return action.query.text;
-  } else if (!!action.query.partitionKeys && action.query.partitionKeys.length > 0) {
-    let query = "SELECT * FROM c WHERE";
-    for (let i = 0; i < action.query.partitionKeys.length; i++) {
-      let partitionKey = action.query.partitionKeys[i];
-      if (!partitionKey) {
-        // null partition key case
-        query = query.concat(` c.${partitionKeyProperty} = ${action.query.partitionKeys[i]}`);
-      } else if (typeof partitionKey !== "string") {
-        // Undefined partition key case
-        query = query.concat(` NOT IS_DEFINED(c.${partitionKeyProperty})`);
-      } else {
-        query = query.concat(` c.${partitionKeyProperty} = "${action.query.partitionKeys[i]}"`);
-      }
-      if (i !== action.query.partitionKeys.length - 1) {
-        query = query.concat(" OR");
-      }
-    }
-    return query;
-  }
-  return "SELECT * FROM c";
-}

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -20,6 +20,7 @@ import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils"
 import { configContext, Platform } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
 import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import { useSidePanel } from "../../hooks/useSidePanel";
 import { CollectionCreation } from "../../Shared/Constants";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
@@ -30,14 +31,13 @@ import { getUpsellMessage } from "../../Utils/PricingUtils";
 import { CollapsibleSectionComponent } from "../Controls/CollapsiblePanel/CollapsibleSectionComponent";
 import { ThroughputInput } from "../Controls/ThroughputInput/ThroughputInput";
 import Explorer from "../Explorer";
+import { useDatabases } from "../useDatabases";
 import { PanelFooterComponent } from "./PanelFooterComponent";
 import { PanelInfoErrorComponent } from "./PanelInfoErrorComponent";
 import { PanelLoadingScreen } from "./PanelLoadingScreen";
 
 export interface AddCollectionPanelProps {
   explorer: Explorer;
-  closePanel: () => void;
-  openNotificationConsole: () => void;
   databaseId?: string;
 }
 
@@ -126,6 +126,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   }
 
   render(): JSX.Element {
+    const isFirstResourceCreated = useDatabases.getState().isFirstResourceCreated();
+
     return (
       <form className="panelFormWrapper" onSubmit={this.submit.bind(this)}>
         {this.state.errorMessage && (
@@ -133,16 +135,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             message={this.state.errorMessage}
             messageType="error"
             showErrorDetails={this.state.showErrorDetails}
-            openNotificationConsole={this.props.openNotificationConsole}
           />
         )}
 
         {!this.state.errorMessage && this.isFreeTierAccount() && (
           <PanelInfoErrorComponent
-            message={getUpsellMessage(userContext.portalEnv, true, this.props.explorer.isFirstResourceCreated(), true)}
+            message={getUpsellMessage(userContext.portalEnv, true, isFirstResourceCreated, true)}
             messageType="info"
             showErrorDetails={false}
-            openNotificationConsole={this.props.openNotificationConsole}
             link={Constants.Urls.freeTierInformation}
             linkText="Learn more"
           />
@@ -243,9 +243,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
                 {!isServerlessAccount() && this.state.isSharedThroughputChecked && (
                   <ThroughputInput
-                    showFreeTierExceedThroughputTooltip={
-                      this.isFreeTierAccount() && !this.props.explorer.isFirstResourceCreated()
-                    }
+                    showFreeTierExceedThroughputTooltip={this.isFreeTierAccount() && !isFirstResourceCreated}
                     isDatabase={true}
                     isSharded={this.state.isSharded}
                     setThroughputValue={(throughput: number) => (this.newDatabaseThroughput = throughput)}
@@ -472,9 +470,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
           {this.shouldShowCollectionThroughputInput() && (
             <ThroughputInput
-              showFreeTierExceedThroughputTooltip={
-                this.isFreeTierAccount() && !this.props.explorer.isFirstResourceCreated()
-              }
+              showFreeTierExceedThroughputTooltip={this.isFreeTierAccount() && !isFirstResourceCreated}
               isDatabase={false}
               isSharded={this.state.isSharded}
               setThroughputValue={(throughput: number) => (this.collectionThroughput = throughput)}
@@ -683,7 +679,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   }
 
   private getDatabaseOptions(): IDropdownOption[] {
-    return this.props.explorer?.databases()?.map((database) => ({
+    return useDatabases.getState().databases?.map((database) => ({
       key: database.id(),
       text: database.id(),
     }));
@@ -775,9 +771,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       return false;
     }
 
-    const selectedDatabase = this.props.explorer
-      .databases()
-      ?.find((database) => database.id() === this.state.selectedDatabaseId);
+    const selectedDatabase = useDatabases
+      .getState()
+      .databases?.find((database) => database.id() === this.state.selectedDatabaseId);
     return !!selectedDatabase?.offer();
   }
 
@@ -862,8 +858,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       case "SQL":
       case "Mongo":
         return true;
-      case "Cassandra":
-        return this.props.explorer.hasStorageAnalyticsAfecFeature();
       default:
         return false;
     }
@@ -1064,7 +1058,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       this.setState({ isExecuting: false });
       this.props.explorer.refreshAllDatabases();
       TelemetryProcessor.traceSuccess(Action.CreateCollection, telemetryData, startKey);
-      this.props.closePanel();
+      useSidePanel.getState().closeSidePanel();
     } catch (error) {
       const errorMessage: string = getErrorMessage(error);
       this.setState({ isExecuting: false, errorMessage, showErrorDetails: true });

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -6,6 +6,7 @@ import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUti
 import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
 import * as DataModels from "../../../Contracts/DataModels";
 import { SubscriptionType } from "../../../Contracts/SubscriptionType";
+import { useSidePanel } from "../../../hooks/useSidePanel";
 import * as SharedConstants from "../../../Shared/Constants";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
@@ -15,20 +16,19 @@ import { isServerlessAccount } from "../../../Utils/CapabilityUtils";
 import { getUpsellMessage } from "../../../Utils/PricingUtils";
 import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
 import Explorer from "../../Explorer";
+import { useDatabases } from "../../useDatabases";
 import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent";
+import { getTextFieldStyles } from "../PanelStyles";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 export interface AddDatabasePaneProps {
   explorer: Explorer;
-  closePanel: () => void;
-  openNotificationConsole: () => void;
 }
 
 export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
   explorer: container,
-  closePanel,
-  openNotificationConsole,
 }: AddDatabasePaneProps) => {
+  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   let throughput: number;
   let isAutoscaleSelected: boolean;
   let isCostAcknowledged: boolean;
@@ -114,7 +114,7 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
 
   const _onCreateDatabaseSuccess = (offerThroughput: number, startKey: number): void => {
     setIsExecuting(false);
-    closePanel();
+    closeSidePanel();
     container.refreshAllDatabases();
     const addDatabasePaneSuccessMessage = {
       ...addDatabasePaneMessage,
@@ -163,7 +163,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
   );
 
   const props: RightPaneFormProps = {
-    expandConsole: openNotificationConsole,
     formError: formErrors,
     isExecuting,
     submitButtonText: "OK",
@@ -174,19 +173,25 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
     <RightPaneForm {...props}>
       {!formErrors && isFreeTierAccount && (
         <PanelInfoErrorComponent
-          message={getUpsellMessage(userContext.portalEnv, true, container.isFirstResourceCreated(), true)}
+          message={getUpsellMessage(
+            userContext.portalEnv,
+            true,
+            useDatabases.getState().isFirstResourceCreated(),
+            true
+          )}
           messageType="info"
           showErrorDetails={false}
-          openNotificationConsole={openNotificationConsole}
           link={Constants.Urls.freeTierInformation}
           linkText="Learn more"
         />
       )}
       <div className="panelMainContent">
-        <div>
+        <Stack>
           <Stack horizontal>
-            <span className="mandatoryStar">*</span>
-            <Text variant="small">{databaseIdLabel}</Text>
+            <span className="mandatoryStar">*&nbsp;</span>
+            <Text className="panelTextBold" variant="small">
+              {databaseIdLabel}
+            </Text>
             <InfoTooltip>{databaseIdTooltipText}</InfoTooltip>
           </Stack>
 
@@ -203,36 +208,37 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
             value={databaseId}
             onChange={handleonChangeDBId}
             autoFocus
-            style={{ fontSize: 12 }}
-            styles={{ root: { width: 300 } }}
+            styles={getTextFieldStyles()}
           />
 
-          <Stack horizontal>
-            <Checkbox
-              title="Provision shared throughput"
-              styles={{
-                text: { fontSize: 12 },
-                checkbox: { width: 12, height: 12 },
-                label: { padding: 0, alignItems: "center" },
-              }}
-              label="Provision throughput"
-              checked={databaseCreateNewShared}
-              onChange={() => setDatabaseCreateNewShared(!databaseCreateNewShared)}
-            />
-            <InfoTooltip>{databaseLevelThroughputTooltipText}</InfoTooltip>
-          </Stack>
-
-          {!isServerlessAccount() && databaseCreateNewShared && (
-            <ThroughputInput
-              showFreeTierExceedThroughputTooltip={isFreeTierAccount && !container?.isFirstResourceCreated()}
-              isDatabase={true}
-              isSharded={databaseCreateNewShared}
-              setThroughputValue={(newThroughput: number) => (throughput = newThroughput)}
-              setIsAutoscale={(isAutoscale: boolean) => (isAutoscaleSelected = isAutoscale)}
-              onCostAcknowledgeChange={(isAcknowledged: boolean) => (isCostAcknowledged = isAcknowledged)}
-            />
+          {!isServerlessAccount() && (
+            <Stack horizontal>
+              <Checkbox
+                title="Provision shared throughput"
+                styles={{
+                  text: { fontSize: 12 },
+                  checkbox: { width: 12, height: 12 },
+                  label: { padding: 0, alignItems: "center" },
+                }}
+                label="Provision throughput"
+                checked={databaseCreateNewShared}
+                onChange={() => setDatabaseCreateNewShared(!databaseCreateNewShared)}
+              />
+              <InfoTooltip>{databaseLevelThroughputTooltipText}</InfoTooltip>
+            </Stack>
           )}
-        </div>
+        </Stack>
+
+        {!isServerlessAccount() && databaseCreateNewShared && (
+          <ThroughputInput
+            showFreeTierExceedThroughputTooltip={isFreeTierAccount && !useDatabases.getState().isFirstResourceCreated()}
+            isDatabase={true}
+            isSharded={databaseCreateNewShared}
+            setThroughputValue={(newThroughput: number) => (throughput = newThroughput)}
+            setIsAutoscale={(isAutoscale: boolean) => (isAutoscaleSelected = isAutoscale)}
+            onCostAcknowledgeChange={(isAcknowledged: boolean) => (isCostAcknowledged = isAcknowledged)}
+          />
+        )}
       </div>
     </RightPaneForm>
   );

src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap

@@ -2,7 +2,6 @@
 
 exports[`AddDatabasePane Pane should render Default properly 1`] = `
 <RightPaneForm
-  expandConsole={[Function]}
   formError=""
   isExecuting={false}
   onSubmit={[Function]}
@@ -11,16 +10,17 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
   <div
     className="panelMainContent"
   >
-    <div>
+    <Stack>
       <Stack
         horizontal={true}
       >
         <span
           className="mandatoryStar"
         >
-          *
+          * 
         </span>
         <Text
+          className="panelTextBold"
           variant="small"
         >
           Database id
@@ -39,13 +39,16 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
         pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
         placeholder="Type a new database id"
         size={40}
-        style={
-          Object {
-            "fontSize": 12,
-          }
-        }
         styles={
           Object {
+            "field": Object {
+              "fontSize": 12,
+              "selectors": Object {
+                "::placeholder": Object {
+                  "fontSize": 12,
+                },
+              },
+            },
             "root": Object {
               "width": 300,
             },
@@ -83,14 +86,14 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
           Provisioned throughput at the database level will be shared across all collections within the database.
         </InfoTooltip>
       </Stack>
-      <ThroughputInput
-        isDatabase={true}
-        isSharded={true}
-        onCostAcknowledgeChange={[Function]}
-        setIsAutoscale={[Function]}
-        setThroughputValue={[Function]}
-      />
-    </div>
+    </Stack>
+    <ThroughputInput
+      isDatabase={true}
+      isSharded={true}
+      onCostAcknowledgeChange={[Function]}
+      setIsAutoscale={[Function]}
+      setThroughputValue={[Function]}
+    />
   </div>
 </RightPaneForm>
 `;

src/Explorer/Panes/BrowseQueriesPane/BrowseQueriesPane.test.tsx

@@ -1,14 +1,16 @@
 import { mount } from "enzyme";
 import * as ko from "knockout";
 import React from "react";
+import { SavedQueries } from "../../../Common/Constants";
 import { QueriesClient } from "../../../Common/QueriesClient";
 import { Query } from "../../../Contracts/DataModels";
+import { Collection, Database } from "../../../Contracts/ViewModels";
 import Explorer from "../../Explorer";
+import { useDatabases } from "../../useDatabases";
 import { BrowseQueriesPane } from "./BrowseQueriesPane";
 
 describe("Browse queries panel", () => {
   const fakeExplorer = {} as Explorer;
-  fakeExplorer.canSaveQueries = ko.computed<boolean>(() => true);
   const fakeClientQuery = {} as QueriesClient;
   const fakeQueryData = [] as Query[];
   fakeClientQuery.getQueries = async () => fakeQueryData;
@@ -17,6 +19,16 @@ describe("Browse queries panel", () => {
     explorer: fakeExplorer,
     closePanel: (): void => undefined,
   };
+  useDatabases.getState().addDatabases([
+    {
+      id: ko.observable(SavedQueries.DatabaseName),
+      collections: ko.observableArray([
+        {
+          id: ko.observable(SavedQueries.CollectionName),
+        } as Collection,
+      ]),
+    } as Database,
+  ]);
 
   it("Should render Default properly", () => {
     const wrapper = mount(<BrowseQueriesPane {...props} />);

src/Explorer/Panes/BrowseQueriesPane/BrowseQueriesPane.tsx

@@ -3,6 +3,7 @@ import { Areas } from "../../../Common/Constants";
 import { logError } from "../../../Common/Logger";
 import { Query } from "../../../Contracts/DataModels";
 import { Collection } from "../../../Contracts/ViewModels";
+import { useSidePanel } from "../../../hooks/useSidePanel";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import { trace } from "../../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../../UserContext";
@@ -11,19 +12,20 @@ import {
   QueriesGridComponentProps,
 } from "../../Controls/QueriesGridReactComponent/QueriesGridComponent";
 import Explorer from "../../Explorer";
-import QueryTab from "../../Tabs/QueryTab";
+import { NewQueryTab } from "../../Tabs/QueryTab/QueryTab";
+import { useDatabases } from "../../useDatabases";
+import { useSelectedNode } from "../../useSelectedNode";
 
 interface BrowseQueriesPaneProps {
   explorer: Explorer;
-  closePanel: () => void;
 }
 
 export const BrowseQueriesPane: FunctionComponent<BrowseQueriesPaneProps> = ({
   explorer,
-  closePanel,
 }: BrowseQueriesPaneProps): JSX.Element => {
+  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const loadSavedQuery = (savedQuery: Query): void => {
-    const selectedCollection: Collection = explorer && explorer.findSelectedCollection();
+    const selectedCollection: Collection = useSelectedNode.getState().findSelectedCollection();
     if (!selectedCollection) {
       // should never get into this state because this pane is only accessible through the query tab
       logError("No collection was selected", "BrowseQueriesPane.loadSavedQuery");
@@ -31,26 +33,27 @@ export const BrowseQueriesPane: FunctionComponent<BrowseQueriesPaneProps> = ({
     } else if (userContext.apiType === "Mongo") {
       selectedCollection.onNewMongoQueryClick(selectedCollection, undefined);
     } else {
-      selectedCollection.onNewQueryClick(selectedCollection, undefined);
+      selectedCollection.onNewQueryClick(selectedCollection, undefined, savedQuery.query);
     }
-    const queryTab = explorer.tabsManager.activeTab() as QueryTab;
+
+    const queryTab = explorer && (explorer.tabsManager.activeTab() as NewQueryTab);
     queryTab.tabTitle(savedQuery.queryName);
     queryTab.tabPath(`${selectedCollection.databaseId}>${selectedCollection.id()}>${savedQuery.queryName}`);
-    queryTab.initialEditorContent(savedQuery.query);
-    queryTab.sqlQueryEditorContent(savedQuery.query);
+
     trace(Action.LoadSavedQuery, ActionModifiers.Mark, {
       dataExplorerArea: Areas.ContextualPane,
       queryName: savedQuery.queryName,
       paneTitle: "Open Saved Queries",
     });
-    closePanel();
+    closeSidePanel();
   };
+  const isSaveQueryEnabled = useDatabases((state) => state.isSaveQueryEnabled);
 
   const props: QueriesGridComponentProps = {
     queriesClient: explorer.queriesClient,
     onQuerySelect: loadSavedQuery,
     containerVisible: true,
-    saveQueryEnabled: explorer.canSaveQueries(),
+    saveQueryEnabled: isSaveQueryEnabled(),
   };
 
   return (

src/Explorer/Panes/BrowseQueriesPane/__snapshots__/BrowseQueriesPane.test.tsx.snap

@@ -5,7 +5,6 @@ exports[`Browse queries panel Should render Default properly 1`] = `
   closePanel={[Function]}
   explorer={
     Object {
-      "canSaveQueries": [Function],
       "queriesClient": Object {
         "getQueries": [Function],
       },

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.test.tsx

@@ -1,32 +1,30 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import { shallow } from "enzyme";
 import React from "react";
 import Explorer from "../../Explorer";
 import { CassandraAPIDataClient } from "../../Tables/TableDataClient";
 import { CassandraAddCollectionPane } from "./CassandraAddCollectionPane";
-const props = {
-  explorer: new Explorer(),
-  closePanel: (): void => undefined,
-  cassandraApiClient: new CassandraAPIDataClient(),
-};
 
-describe("CassandraAddCollectionPane  Pane", () => {
+describe("Cassandra add collection pane test", () => {
+  const props = {
+    explorer: new Explorer(),
+    closePanel: (): void => undefined,
+    cassandraApiClient: new CassandraAPIDataClient(),
+  };
+
   beforeEach(() => render(<CassandraAddCollectionPane {...props} />));
 
-  it("should render Default properly", () => {
-    const wrapper = shallow(<CassandraAddCollectionPane {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-  it("click on is Create new keyspace", () => {
-    fireEvent.click(screen.getByLabelText("Create new keyspace"));
-    expect(screen.getByLabelText("Provision keyspace throughput")).toBeDefined();
-  });
-  it("click on Use existing", () => {
-    fireEvent.click(screen.getByLabelText("Use existing keyspace"));
+  it("should render default properly", () => {
+    expect(screen.getByRole("radio", { name: "Create new keyspace", checked: true })).toBeDefined();
+    expect(screen.getByRole("checkbox", { name: "Provision shared throughput", checked: false })).toBeDefined();
   });
 
-  it("Enter Keyspace name ", () => {
-    fireEvent.change(screen.getByLabelText("Keyspace id"), { target: { value: "unittest1" } });
-    expect(screen.getByLabelText("CREATE TABLE unittest1.")).toBeDefined();
+  it("click on use existing", () => {
+    fireEvent.click(screen.getByRole("radio", { name: "Use existing keyspace" }));
+    expect(screen.getByRole("combobox", { name: "Choose existing keyspace id" })).toBeDefined();
+  });
+
+  it("enter Keyspace name ", () => {
+    fireEvent.change(screen.getByRole("textbox", { name: "Keyspace id" }), { target: { value: "table1" } });
+    expect(screen.getByText("CREATE TABLE table1.")).toBeDefined();
   });
 });

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx

@@ -1,209 +1,97 @@
-import { Label, Stack, TextField } from "@fluentui/react";
-import React, { FunctionComponent, useEffect, useState } from "react";
-import * as _ from "underscore";
+import { Checkbox, Dropdown, IDropdownOption, Link, Stack, Text, TextField } from "@fluentui/react";
+import React, { FunctionComponent, useState } from "react";
 import * as Constants from "../../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
-import * as DataModels from "../../../Contracts/DataModels";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import * as AddCollectionUtility from "../../../Shared/AddCollectionUtility";
+import { useSidePanel } from "../../../hooks/useSidePanel";
 import * as SharedConstants from "../../../Shared/Constants";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../../UserContext";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import { isServerlessAccount } from "../../../Utils/CapabilityUtils";
 import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
 import Explorer from "../../Explorer";
 import { CassandraAPIDataClient } from "../../Tables/TableDataClient";
+import { useDatabases } from "../../useDatabases";
+import { getTextFieldStyles } from "../PanelStyles";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 export interface CassandraAddCollectionPaneProps {
   explorer: Explorer;
-  closePanel: () => void;
   cassandraApiClient: CassandraAPIDataClient;
 }
 
 export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectionPaneProps> = ({
   explorer: container,
-  closePanel,
   cassandraApiClient,
 }: CassandraAddCollectionPaneProps) => {
-  const throughputDefaults = container.collectionCreationDefaults.throughput;
-  const [createTableQuery, setCreateTableQuery] = useState<string>("CREATE TABLE ");
-  const [keyspaceId, setKeyspaceId] = useState<string>("");
+  let newKeySpaceThroughput: number;
+  let isNewKeySpaceAutoscale: boolean;
+  let tableThroughput: number;
+  let isTableAutoscale: boolean;
+  let isCostAcknowledged: boolean;
+
+  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
+  const [newKeyspaceId, setNewKeyspaceId] = useState<string>("");
+  const [existingKeyspaceId, setExistingKeyspaceId] = useState<string>("");
   const [tableId, setTableId] = useState<string>("");
-  const [throughput, setThroughput] = useState<number>(
-    AddCollectionUtility.getMaxThroughput(container.collectionCreationDefaults, container)
-  );
-
-  const [isAutoPilotSelected, setIsAutoPilotSelected] = useState<boolean>(userContext.features.autoscaleDefault);
-
-  const [isSharedAutoPilotSelected, setIsSharedAutoPilotSelected] = useState<boolean>(
-    userContext.features.autoscaleDefault
-  );
-
   const [userTableQuery, setUserTableQuery] = useState<string>(
     "(userid int, name text, email text, PRIMARY KEY (userid))"
   );
-
-  const [keyspaceHasSharedOffer, setKeyspaceHasSharedOffer] = useState<boolean>(false);
-  const [keyspaceIds, setKeyspaceIds] = useState<string[]>([]);
-  const [keyspaceThroughput, setKeyspaceThroughput] = useState<number>(throughputDefaults.shared);
+  const [isKeyspaceShared, setIsKeyspaceShared] = useState<boolean>(false);
   const [keyspaceCreateNew, setKeyspaceCreateNew] = useState<boolean>(true);
   const [dedicateTableThroughput, setDedicateTableThroughput] = useState<boolean>(false);
-  const [throughputSpendAck, setThroughputSpendAck] = useState<boolean>(false);
-  const [sharedThroughputSpendAck, setSharedThroughputSpendAck] = useState<boolean>(false);
-
-  const { minAutoPilotThroughput: selectedAutoPilotThroughput } = AutoPilotUtils;
-  const { minAutoPilotThroughput: sharedAutoPilotThroughput } = AutoPilotUtils;
-
-  const _getAutoPilot = (): DataModels.AutoPilotCreationSettings => {
-    if (keyspaceCreateNew && keyspaceHasSharedOffer && isSharedAutoPilotSelected && sharedAutoPilotThroughput) {
-      return {
-        maxThroughput: sharedAutoPilotThroughput * 1,
-      };
-    }
-
-    if (selectedAutoPilotThroughput) {
-      return {
-        maxThroughput: selectedAutoPilotThroughput * 1,
-      };
-    }
-
-    return undefined;
-  };
-
-  const isFreeTierAccount: boolean = userContext.databaseAccount?.properties?.enableFreeTier;
-
-  const canConfigureThroughput = !container.isServerlessEnabled();
-
-  const keyspaceOffers = new Map();
   const [isExecuting, setIsExecuting] = useState<boolean>();
-  const [formErrors, setFormErrors] = useState<string>("");
-
-  useEffect(() => {
-    if (keyspaceIds.indexOf(keyspaceId) >= 0) {
-      setKeyspaceHasSharedOffer(keyspaceOffers.has(keyspaceId));
-    }
-    setCreateTableQuery(`CREATE TABLE ${keyspaceId}.`);
-  }, [keyspaceId]);
+  const [formError, setFormError] = useState<string>("");
+  const isFreeTierAccount: boolean = userContext.databaseAccount?.properties?.enableFreeTier;
 
   const addCollectionPaneOpenMessage = {
     collection: {
       id: tableId,
       storage: Constants.BackendDefaults.multiPartitionStorageInGb,
-      offerThroughput: throughput,
+      offerThroughput: newKeySpaceThroughput || tableThroughput,
       partitionKey: "",
-      databaseId: keyspaceId,
+      databaseId: keyspaceCreateNew ? newKeyspaceId : existingKeyspaceId,
     },
     subscriptionType: userContext.subscriptionType,
     subscriptionQuotaId: userContext.quotaId,
     defaultsCheck: {
       storage: "u",
-      throughput,
+      throughput: newKeySpaceThroughput || tableThroughput,
       flight: userContext.addCollectionFlight,
     },
     dataExplorerArea: Constants.Areas.ContextualPane,
   };
 
-  useEffect(() => {
-    if (!container.isServerlessEnabled()) {
-      setIsAutoPilotSelected(userContext.features.autoscaleDefault);
-    }
-
-    TelemetryProcessor.trace(Action.CreateCollection, ActionModifiers.Open, addCollectionPaneOpenMessage);
-  }, []);
-
-  useEffect(() => {
-    if (container) {
-      const newKeyspaceIds: ViewModels.Database[] = container.databases();
-      const cachedKeyspaceIdsList = _.map(newKeyspaceIds, (keyspace: ViewModels.Database) => {
-        if (keyspace && keyspace.offer && !!keyspace.offer()) {
-          keyspaceOffers.set(keyspace.id(), keyspace.offer());
-        }
-        return keyspace.id();
-      });
-      setKeyspaceIds(cachedKeyspaceIdsList);
-    }
-  }, []);
-
-  const _isValid = () => {
-    const sharedAutoscaleThroughput = sharedAutoPilotThroughput * 1;
-    if (
-      isSharedAutoPilotSelected &&
-      sharedAutoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
-      !sharedThroughputSpendAck
-    ) {
-      setFormErrors(`Please acknowledge the estimated monthly spend.`);
-      return false;
-    }
-
-    const dedicatedAutoscaleThroughput = selectedAutoPilotThroughput * 1;
-    if (
-      isAutoPilotSelected &&
-      dedicatedAutoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
-      !throughputSpendAck
-    ) {
-      setFormErrors(`Please acknowledge the estimated monthly spend.`);
-      return false;
-    }
-
-    if ((keyspaceCreateNew && keyspaceHasSharedOffer && isSharedAutoPilotSelected) || isAutoPilotSelected) {
-      const autoPilot = _getAutoPilot();
-      if (
-        !autoPilot ||
-        !autoPilot.maxThroughput ||
-        !AutoPilotUtils.isValidAutoPilotThroughput(autoPilot.maxThroughput)
-      ) {
-        setFormErrors(
-          `Please enter a value greater than ${AutoPilotUtils.minAutoPilotThroughput} for autopilot throughput`
-        );
-        return false;
-      }
-      return true;
-    }
-
-    if (throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && !throughputSpendAck) {
-      setFormErrors(`Please acknowledge the estimated daily spend.`);
-      return false;
-    }
-
-    if (
-      keyspaceHasSharedOffer &&
-      keyspaceCreateNew &&
-      keyspaceThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
-      !sharedThroughputSpendAck
-    ) {
-      setFormErrors("Please acknowledge the estimated daily spend");
-      return false;
-    }
-
-    return true;
-  };
-
   const onSubmit = async () => {
-    if (!_isValid()) {
+    const throughput = keyspaceCreateNew ? newKeySpaceThroughput : tableThroughput;
+    const keyspaceId = keyspaceCreateNew ? newKeyspaceId : existingKeyspaceId;
+
+    if (throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && !isCostAcknowledged) {
+      const errorMessage =
+        isNewKeySpaceAutoscale || isTableAutoscale
+          ? "Please acknowledge the estimated monthly spend."
+          : "Please acknowledge the estimated daily spend.";
+      setFormError(errorMessage);
       return;
     }
+
     setIsExecuting(true);
     const autoPilotCommand = `cosmosdb_autoscale_max_throughput`;
-
-    const toCreateKeyspace: boolean = keyspaceCreateNew;
-    const useAutoPilotForKeyspace: boolean = isSharedAutoPilotSelected && !!sharedAutoPilotThroughput;
     const createKeyspaceQueryPrefix = `CREATE KEYSPACE ${keyspaceId.trim()} WITH REPLICATION = { 'class' : 'SimpleStrategy', 'replication_factor' : 3 }`;
-    const createKeyspaceQuery: string = keyspaceHasSharedOffer
-      ? useAutoPilotForKeyspace
-        ? `${createKeyspaceQueryPrefix} AND ${autoPilotCommand}=${keyspaceThroughput};`
-        : `${createKeyspaceQueryPrefix} AND cosmosdb_provisioned_throughput=${keyspaceThroughput};`
+    const createKeyspaceQuery: string = isKeyspaceShared
+      ? isNewKeySpaceAutoscale
+        ? `${createKeyspaceQueryPrefix} AND ${autoPilotCommand}=${newKeySpaceThroughput};`
+        : `${createKeyspaceQueryPrefix} AND cosmosdb_provisioned_throughput=${newKeySpaceThroughput};`
       : `${createKeyspaceQueryPrefix};`;
     let tableQuery: string;
-    const createTableQueryPrefix = `${createTableQuery}${tableId.trim()} ${userTableQuery}`;
+    const createTableQueryPrefix = `CREATE TABLE ${keyspaceId}.${tableId.trim()} ${userTableQuery}`;
 
-    if (canConfigureThroughput && (dedicateTableThroughput || !keyspaceHasSharedOffer)) {
-      if (isAutoPilotSelected && selectedAutoPilotThroughput) {
-        tableQuery = `${createTableQueryPrefix} WITH ${autoPilotCommand}=${throughput};`;
+    if (tableThroughput) {
+      if (isTableAutoscale) {
+        tableQuery = `${createTableQueryPrefix} WITH ${autoPilotCommand}=${tableThroughput};`;
       } else {
-        tableQuery = `${createTableQueryPrefix} WITH cosmosdb_provisioned_throughput=${throughput};`;
+        tableQuery = `${createTableQueryPrefix} WITH cosmosdb_provisioned_throughput=${tableThroughput};`;
       }
     } else {
       tableQuery = `${createTableQueryPrefix};`;
@@ -215,15 +103,15 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
         ...addCollectionPaneOpenMessage.collection,
         hasDedicatedThroughput: dedicateTableThroughput,
       },
-      keyspaceHasSharedOffer,
-      toCreateKeyspace,
+      isKeyspaceShared,
+      keyspaceCreateNew,
       createKeyspaceQuery,
       createTableQuery: tableQuery,
     };
 
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateCollection, addCollectionPaneStartMessage);
     try {
-      if (toCreateKeyspace) {
+      if (keyspaceCreateNew) {
         await cassandraApiClient.createTableAndKeyspace(
           userContext?.databaseAccount?.properties?.cassandraEndpoint,
           userContext?.databaseAccount?.id,
@@ -241,12 +129,12 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
       }
       container.refreshAllDatabases();
       setIsExecuting(false);
-      closePanel();
+      closeSidePanel();
 
       TelemetryProcessor.traceSuccess(Action.CreateCollection, addCollectionPaneStartMessage, startKey);
     } catch (error) {
       const errorMessage = getErrorMessage(error);
-      setFormErrors(errorMessage);
+      setFormError(errorMessage);
       setIsExecuting(false);
       const addCollectionPaneFailedMessage = {
         ...addCollectionPaneStartMessage,
@@ -256,130 +144,160 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
       TelemetryProcessor.traceFailure(Action.CreateCollection, addCollectionPaneFailedMessage, startKey);
     }
   };
-  const handleOnChangeKeyspaceType = (ev: React.FormEvent<HTMLInputElement>, mode: string): void => {
-    setKeyspaceCreateNew(mode === "Create new");
-  };
 
   const props: RightPaneFormProps = {
-    expandConsole: () => container.expandConsole(),
-    formError: formErrors,
+    formError,
     isExecuting,
-    submitButtonText: "Apply",
+    submitButtonText: "OK",
     onSubmit,
   };
+
   return (
     <RightPaneForm {...props}>
-      <div className="paneMainContent">
-        <div className="seconddivpadding">
-          <p>
-            <Label required>
+      <div className="panelMainContent">
+        <Stack>
+          <Stack horizontal>
+            <span className="mandatoryStar">*&nbsp;</span>
+            <Text className="panelTextBold" variant="small">
               Keyspace name <InfoTooltip>Select an existing keyspace or enter a new keyspace id.</InfoTooltip>
-            </Label>
-          </p>
+            </Text>
+          </Stack>
 
           <Stack horizontal verticalAlign="center">
             <input
-              className="throughputInputRadioBtn"
+              className="panelRadioBtn"
               aria-label="Create new keyspace"
               checked={keyspaceCreateNew}
               type="radio"
               role="radio"
               tabIndex={0}
-              onChange={(e) => handleOnChangeKeyspaceType(e, "Create new")}
+              onChange={() => {
+                setKeyspaceCreateNew(true);
+                setIsKeyspaceShared(false);
+                setExistingKeyspaceId("");
+              }}
             />
-            <span className="throughputInputRadioBtnLabel">Create new</span>
+            <span className="panelRadioBtnLabel">Create new</span>
 
             <input
-              className="throughputInputRadioBtn"
+              className="panelRadioBtn"
               aria-label="Use existing keyspace"
               checked={!keyspaceCreateNew}
               type="radio"
               role="radio"
               tabIndex={0}
-              onChange={(e) => handleOnChangeKeyspaceType(e, "Use existing")}
+              onChange={() => {
+                setKeyspaceCreateNew(false);
+                setIsKeyspaceShared(false);
+              }}
+            />
+            <span className="panelRadioBtnLabel">Use existing</span>
+          </Stack>
+
+          {keyspaceCreateNew && (
+            <Stack className="panelGroupSpacing">
+              <TextField
+                aria-required="true"
+                autoComplete="off"
+                styles={getTextFieldStyles()}
+                pattern="[^/?#\\]*[^/?# \\]"
+                title="May not end with space nor contain characters '\' '/' '#' '?'"
+                placeholder="Type a new keyspace id"
+                size={40}
+                value={newKeyspaceId}
+                onChange={(e, newValue) => setNewKeyspaceId(newValue)}
+                ariaLabel="Keyspace id"
+                autoFocus
+              />
+
+              {!isServerlessAccount() && (
+                <Stack horizontal>
+                  <Checkbox
+                    label="Provision shared throughput"
+                    checked={isKeyspaceShared}
+                    styles={{
+                      text: { fontSize: 12 },
+                      checkbox: { width: 12, height: 12 },
+                      label: { padding: 0, alignItems: "center" },
+                    }}
+                    onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => setIsKeyspaceShared(isChecked)}
+                  />
+                  <InfoTooltip>
+                    Provisioned throughput at the keyspace level will be shared across unlimited number of tables within
+                    the keyspace
+                  </InfoTooltip>
+                </Stack>
+              )}
+            </Stack>
+          )}
+
+          {!keyspaceCreateNew && (
+            <Dropdown
+              ariaLabel="Choose existing keyspace id"
+              styles={{ root: { width: 300 }, title: { fontSize: 12 }, dropdownItem: { fontSize: 12 } }}
+              placeholder="Choose existing keyspace id"
+              defaultSelectedKey={existingKeyspaceId}
+              options={useDatabases.getState().databases?.map((keyspace) => ({
+                key: keyspace.id(),
+                text: keyspace.id(),
+                data: {
+                  isShared: !!keyspace.offer(),
+                },
+              }))}
+              onChange={(event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) => {
+                setExistingKeyspaceId(option.key as string);
+                setIsKeyspaceShared(option.data.isShared);
+              }}
+              responsiveMode={999}
+            />
+          )}
+
+          {!isServerlessAccount() && keyspaceCreateNew && isKeyspaceShared && (
+            <ThroughputInput
+              showFreeTierExceedThroughputTooltip={
+                isFreeTierAccount && !useDatabases.getState().isFirstResourceCreated()
+              }
+              isDatabase
+              isSharded
+              setThroughputValue={(throughput: number) => (newKeySpaceThroughput = throughput)}
+              setIsAutoscale={(isAutoscale: boolean) => (isNewKeySpaceAutoscale = isAutoscale)}
+              onCostAcknowledgeChange={(isAcknowledged: boolean) => (isCostAcknowledged = isAcknowledged)}
+            />
+          )}
+        </Stack>
+
+        <Stack>
+          <Stack horizontal>
+            <span className="mandatoryStar">*&nbsp;</span>
+            <Text className="panelTextBold" variant="small">
+              Enter CQL command to create the table.{" "}
+              <Link href="https://aka.ms/cassandra-create-table" target="_blank">
+                Learn More
+              </Link>
+            </Text>
+          </Stack>
+
+          <Stack horizontal verticalAlign="center">
+            <Text variant="small" style={{ marginRight: 4 }}>
+              {`CREATE TABLE ${keyspaceCreateNew ? newKeyspaceId : existingKeyspaceId}.`}
+            </Text>
+            <TextField
+              underlined
+              styles={getTextFieldStyles({ fontSize: 12, width: 150 })}
+              aria-required="true"
+              ariaLabel="addCollection-tableId"
+              autoComplete="off"
+              pattern="[^/?#\\]*[^/?# \\]"
+              title="May not end with space nor contain characters '\' '/' '#' '?'"
+              placeholder="Enter table Id"
+              size={20}
+              value={tableId}
+              onChange={(e, newValue) => setTableId(newValue)}
             />
-            <span className="throughputInputRadioBtnLabel">Use existing</span>
           </Stack>
 
           <TextField
-            aria-required="true"
-            autoComplete="off"
-            pattern="[^/?#\\]*[^/?# \\]"
-            title="May not end with space nor contain characters '\' '/' '#' '?'"
-            list={keyspaceCreateNew ? "" : "keyspacesList"}
-            placeholder={keyspaceCreateNew ? "Type a new keyspace id" : "Choose existing keyspace id"}
-            size={40}
-            data-test="addCollection-keyspaceId"
-            value={keyspaceId}
-            onChange={(e, newValue) => setKeyspaceId(newValue)}
-            ariaLabel="Keyspace id"
-            autoFocus
-          />
-          <datalist id="keyspacesList">
-            {keyspaceIds?.map((id: string, index: number) => (
-              <option key={index}>{id}</option>
-            ))}
-          </datalist>
-          {canConfigureThroughput && keyspaceCreateNew && (
-            <div className="databaseProvision">
-              <input
-                tabIndex={0}
-                type="checkbox"
-                id="keyspaceSharedThroughput"
-                title="Provision shared throughput"
-                checked={keyspaceHasSharedOffer}
-                onChange={(e) => setKeyspaceHasSharedOffer(e.target.checked)}
-              />
-              <span className="databaseProvisionText" aria-label="Provision keyspace throughput">
-                Provision keyspace throughput
-              </span>
-              <InfoTooltip>
-                Provisioned throughput at the keyspace level will be shared across unlimited number of tables within the
-                keyspace
-              </InfoTooltip>
-            </div>
-          )}
-          {canConfigureThroughput && keyspaceCreateNew && keyspaceHasSharedOffer && (
-            <div>
-              <ThroughputInput
-                showFreeTierExceedThroughputTooltip={isFreeTierAccount && !container.isFirstResourceCreated()}
-                isDatabase
-                isSharded
-                setThroughputValue={(throughput: number) => setKeyspaceThroughput(throughput)}
-                setIsAutoscale={(isAutoscale: boolean) => setIsSharedAutoPilotSelected(isAutoscale)}
-                onCostAcknowledgeChange={(isAcknowledge: boolean) => {
-                  setSharedThroughputSpendAck(isAcknowledge);
-                }}
-              />
-            </div>
-          )}
-        </div>
-        <div className="seconddivpadding">
-          <p>
-            <Label required>
-              Enter CQL command to create the table.
-              <a href="https://aka.ms/cassandra-create-table" target="_blank" rel="noreferrer">
-                Learn More
-              </a>
-            </Label>
-          </p>
-          <div aria-label={createTableQuery} style={{ float: "left", paddingTop: "3px", paddingRight: "3px" }}>
-            {createTableQuery}
-          </div>
-          <TextField
-            aria-required="true"
-            ariaLabel="addCollection-tableId"
-            autoComplete="off"
-            pattern="[^/?#\\]*[^/?# \\]"
-            title="May not end with space nor contain characters '\' '/' '#' '?'"
-            placeholder="Enter tableId"
-            size={20}
-            className="textfontclr"
-            value={tableId}
-            onChange={(e, newValue) => setTableId(newValue)}
-            style={{ marginBottom: "5px" }}
-          />
-          <TextField
+            styles={getTextFieldStyles()}
             multiline
             id="editor-area"
             rows={5}
@@ -387,10 +305,10 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
             value={userTableQuery}
             onChange={(e, newValue) => setUserTableQuery(newValue)}
           />
-        </div>
+        </Stack>
 
-        {canConfigureThroughput && keyspaceHasSharedOffer && !keyspaceCreateNew && (
-          <div className="seconddivpadding">
+        {!isServerlessAccount() && isKeyspaceShared && !keyspaceCreateNew && (
+          <Stack>
             <input
               type="checkbox"
               id="tableSharedThroughput"
@@ -405,21 +323,17 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
               does not count towards the throughput you provisioned for the keyspace. This throughput amount will be
               billed in addition to the throughput amount you provisioned at the keyspace level.
             </InfoTooltip>
-          </div>
+          </Stack>
         )}
-        {canConfigureThroughput && (!keyspaceHasSharedOffer || dedicateTableThroughput) && (
-          <div>
-            <ThroughputInput
-              showFreeTierExceedThroughputTooltip={isFreeTierAccount && !container.isFirstResourceCreated()}
-              isDatabase={false}
-              isSharded={false}
-              setThroughputValue={(throughput: number) => setThroughput(throughput)}
-              setIsAutoscale={(isAutoscale: boolean) => setIsAutoPilotSelected(isAutoscale)}
-              onCostAcknowledgeChange={(isAcknowledge: boolean) => {
-                setThroughputSpendAck(isAcknowledge);
-              }}
-            />
-          </div>
+        {!isServerlessAccount() && (!isKeyspaceShared || dedicateTableThroughput) && (
+          <ThroughputInput
+            showFreeTierExceedThroughputTooltip={isFreeTierAccount && !useDatabases.getState().isFirstResourceCreated()}
+            isDatabase={false}
+            isSharded={false}
+            setThroughputValue={(throughput: number) => (tableThroughput = throughput)}
+            setIsAutoscale={(isAutoscale: boolean) => (isTableAutoscale = isAutoscale)}
+            onCostAcknowledgeChange={(isAcknowledged: boolean) => (isCostAcknowledged = isAcknowledged)}
+          />
         )}
       </div>
     </RightPaneForm>

src/Explorer/Panes/CassandraAddCollectionPane/__snapshots__/CassandraAddCollectionPane.test.tsx.snap

@@ -1,164 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CassandraAddCollectionPane  Pane should render Default properly 1`] = `
-<RightPaneForm
-  expandConsole={[Function]}
-  formError=""
-  onSubmit={[Function]}
-  submitButtonText="Apply"
->
-  <div
-    className="paneMainContent"
-  >
-    <div
-      className="seconddivpadding"
-    >
-      <p>
-        <StyledLabelBase
-          required={true}
-        >
-          Keyspace name 
-          <InfoTooltip>
-            Select an existing keyspace or enter a new keyspace id.
-          </InfoTooltip>
-        </StyledLabelBase>
-      </p>
-      <Stack
-        horizontal={true}
-        verticalAlign="center"
-      >
-        <input
-          aria-label="Create new keyspace"
-          checked={true}
-          className="throughputInputRadioBtn"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="throughputInputRadioBtnLabel"
-        >
-          Create new
-        </span>
-        <input
-          aria-label="Use existing keyspace"
-          checked={false}
-          className="throughputInputRadioBtn"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="throughputInputRadioBtnLabel"
-        >
-          Use existing
-        </span>
-      </Stack>
-      <StyledTextFieldBase
-        aria-required="true"
-        ariaLabel="Keyspace id"
-        autoComplete="off"
-        autoFocus={true}
-        data-test="addCollection-keyspaceId"
-        list=""
-        onChange={[Function]}
-        pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
-        placeholder="Type a new keyspace id"
-        size={40}
-        title="May not end with space nor contain characters '\\\\' '/' '#' '?'"
-        value=""
-      />
-      <datalist
-        id="keyspacesList"
-      />
-      <div
-        className="databaseProvision"
-      >
-        <input
-          checked={false}
-          id="keyspaceSharedThroughput"
-          onChange={[Function]}
-          tabIndex={0}
-          title="Provision shared throughput"
-          type="checkbox"
-        />
-        <span
-          aria-label="Provision keyspace throughput"
-          className="databaseProvisionText"
-        >
-          Provision keyspace throughput
-        </span>
-        <InfoTooltip>
-          Provisioned throughput at the keyspace level will be shared across unlimited number of tables within the keyspace
-        </InfoTooltip>
-      </div>
-    </div>
-    <div
-      className="seconddivpadding"
-    >
-      <p>
-        <StyledLabelBase
-          required={true}
-        >
-          Enter CQL command to create the table.
-          <a
-            href="https://aka.ms/cassandra-create-table"
-            rel="noreferrer"
-            target="_blank"
-          >
-            Learn More
-          </a>
-        </StyledLabelBase>
-      </p>
-      <div
-        aria-label="CREATE TABLE "
-        style={
-          Object {
-            "float": "left",
-            "paddingRight": "3px",
-            "paddingTop": "3px",
-          }
-        }
-      >
-        CREATE TABLE 
-      </div>
-      <StyledTextFieldBase
-        aria-required="true"
-        ariaLabel="addCollection-tableId"
-        autoComplete="off"
-        className="textfontclr"
-        onChange={[Function]}
-        pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
-        placeholder="Enter tableId"
-        size={20}
-        style={
-          Object {
-            "marginBottom": "5px",
-          }
-        }
-        title="May not end with space nor contain characters '\\\\' '/' '#' '?'"
-        value=""
-      />
-      <StyledTextFieldBase
-        aria-label="Table Schema"
-        id="editor-area"
-        multiline={true}
-        onChange={[Function]}
-        rows={5}
-        value="(userid int, name text, email text, PRIMARY KEY (userid))"
-      />
-    </div>
-    <div>
-      <ThroughputInput
-        isDatabase={false}
-        isSharded={false}
-        onCostAcknowledgeChange={[Function]}
-        setIsAutoscale={[Function]}
-        setThroughputValue={[Function]}
-      />
-    </div>
-  </div>
-</RightPaneForm>
-`;

src/Explorer/Panes/ContextualPaneBase.ts

@@ -1,126 +0,0 @@
-import * as ko from "knockout";
-import * as ViewModels from "../../Contracts/ViewModels";
-import * as Constants from "../../Common/Constants";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { KeyCodes } from "../../Common/Constants";
-import { WaitsForTemplateViewModel } from "../WaitsForTemplateViewModel";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import Explorer from "../Explorer";
-
-// TODO: Use specific actions for logging telemetry data
-export abstract class ContextualPaneBase extends WaitsForTemplateViewModel {
-  private initalFocusedElement: HTMLElement | undefined;
-  public id: string;
-  public container: Explorer;
-  public firstFieldHasFocus: ko.Observable<boolean>;
-  public formErrorsDetails: ko.Observable<string>;
-  public formErrors: ko.Observable<string>;
-  public title: ko.Observable<string>;
-  public visible: ko.Observable<boolean>;
-  public isExecuting: ko.Observable<boolean>;
-
-  constructor(options: ViewModels.PaneOptions) {
-    super();
-    this.id = options.id;
-    this.container = options.container;
-    this.visible = options.visible || ko.observable(false);
-    this.firstFieldHasFocus = ko.observable<boolean>(false);
-    this.formErrors = ko.observable<string>();
-    this.title = ko.observable<string>();
-    this.formErrorsDetails = ko.observable<string>();
-    this.isExecuting = ko.observable<boolean>(false);
-  }
-
-  public cancel() {
-    this.close();
-    this.container.isAccountReady() &&
-      TelemetryProcessor.trace(Action.ContextualPane, ActionModifiers.Close, {
-        dataExplorerArea: Constants.Areas.ContextualPane,
-        paneTitle: this.title(),
-      });
-  }
-
-  public close() {
-    this.visible(false);
-    this.isExecuting(false);
-    this.resetData();
-    this.resetFocus();
-  }
-
-  public open() {
-    this.initalFocusedElement = document.activeElement as HTMLElement;
-    this.visible(true);
-    this.firstFieldHasFocus(true);
-    this.resizePane();
-    this.container.isAccountReady() &&
-      TelemetryProcessor.trace(Action.ContextualPane, ActionModifiers.Open, {
-        dataExplorerArea: Constants.Areas.ContextualPane,
-        paneTitle: this.title(),
-      });
-  }
-
-  public resetData() {
-    this.firstFieldHasFocus(false);
-    this.formErrors(null);
-    this.formErrorsDetails(null);
-  }
-
-  public showErrorDetails() {
-    this.container.expandConsole();
-  }
-
-  public submit() {
-    this.close();
-    event.stopPropagation();
-    this.container.isAccountReady() &&
-      TelemetryProcessor.trace(Action.ContextualPane, ActionModifiers.Submit, {
-        dataExplorerArea: Constants.Areas.ContextualPane,
-        paneTitle: this.title(),
-      });
-  }
-
-  public onCloseKeyPress(source: any, event: KeyboardEvent): boolean {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.close();
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  }
-
-  public onPaneKeyDown(source: any, event: KeyboardEvent): boolean {
-    if (event.keyCode === KeyCodes.Escape) {
-      this.close();
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  }
-
-  public onSubmitKeyPress(source: any, event: KeyboardEvent): boolean {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.submit();
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  }
-
-  private resizePane(): void {
-    const paneElement: HTMLElement = document.getElementById(this.id);
-    const notificationConsoleElement: HTMLElement = document.getElementById("explorerNotificationConsole");
-    const newPaneElementHeight = window.innerHeight - $(notificationConsoleElement).height();
-
-    $(paneElement).height(newPaneElementHeight);
-  }
-
-  private resetFocus(): void {
-    if (this.initalFocusedElement) {
-      this.initalFocusedElement.focus();
-      this.initalFocusedElement = undefined;
-    }
-  }
-}

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx

@@ -3,6 +3,7 @@ import React, { FormEvent, FunctionComponent, useEffect, useState } from "react"
 import { HttpStatusCodes } from "../../../Common/Constants";
 import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";
 import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
+import { useSidePanel } from "../../../hooks/useSidePanel";
 import { IPinnedRepo, JunoClient } from "../../../Juno/JunoClient";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
@@ -26,7 +27,6 @@ export interface CopyNotebookPanelProps {
   container: Explorer;
   junoClient: JunoClient;
   gitHubOAuthService: GitHubOAuthService;
-  closePanel: () => void;
 }
 
 export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
@@ -35,8 +35,8 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
   container,
   junoClient,
   gitHubOAuthService,
-  closePanel,
 }: CopyNotebookPanelProps) => {
+  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const [isExecuting, setIsExecuting] = useState<boolean>();
   const [formError, setFormError] = useState<string>("");
   const [pinnedRepos, setPinnedRepos] = useState<IPinnedRepo[]>();
@@ -84,7 +84,7 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
       }
 
       NotificationConsoleUtils.logConsoleInfo(`Successfully copied ${name} to ${destination}`);
-      closePanel();
+      closeSidePanel();
     } catch (error) {
       const errorMessage = getErrorMessage(error);
       setFormError(`Failed to copy ${name} to ${destination}`);
@@ -130,7 +130,6 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
     isExecuting: isExecuting,
     submitButtonText: "OK",
     onSubmit: () => submit(),
-    expandConsole: () => container.expandConsole(),
   };
 
   const copyNotebookPaneProps: CopyNotebookPaneProps = {

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx

@@ -1,54 +1,53 @@
 jest.mock("../../../Common/dataAccess/deleteCollection");
 jest.mock("../../../Shared/Telemetry/TelemetryProcessor");
-import { mount, ReactWrapper, shallow } from "enzyme";
+import { mount, shallow } from "enzyme";
 import * as ko from "knockout";
 import React from "react";
 import { deleteCollection } from "../../../Common/dataAccess/deleteCollection";
 import DeleteFeedback from "../../../Common/DeleteFeedback";
 import { ApiKind, DatabaseAccount } from "../../../Contracts/DataModels";
-import { Collection, Database, TreeNode } from "../../../Contracts/ViewModels";
+import { Collection, Database } from "../../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { updateUserContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
+import { useDatabases } from "../../useDatabases";
+import { useSelectedNode } from "../../useSelectedNode";
 import { DeleteCollectionConfirmationPane } from "./DeleteCollectionConfirmationPane";
 
 describe("Delete Collection Confirmation Pane", () => {
-  describe("Explorer.isLastCollection()", () => {
-    let explorer: Explorer;
-
-    beforeEach(() => {
-      explorer = new Explorer();
-    });
+  describe("useDatabases.isLastCollection()", () => {
+    beforeAll(() => useDatabases.getState().clearDatabases());
+    afterEach(() => useDatabases.getState().clearDatabases());
 
     it("should be true if 1 database and 1 collection", () => {
-      const database = {} as Database;
-      database.collections = ko.observableArray<Collection>([{} as Collection]);
-      explorer.databases = ko.observableArray<Database>([database]);
-      expect(explorer.isLastCollection()).toBe(true);
+      const database = { id: ko.observable("testDB") } as Database;
+      database.collections = ko.observableArray<Collection>([{ id: ko.observable("testCollection") } as Collection]);
+      useDatabases.getState().addDatabases([database]);
+      expect(useDatabases.getState().isLastCollection()).toBe(true);
     });
 
     it("should be false if if 1 database and 2 collection", () => {
-      const database = {} as Database;
-      database.collections = ko.observableArray<Collection>([{} as Collection, {} as Collection]);
-      explorer.databases = ko.observableArray<Database>([database]);
-      expect(explorer.isLastCollection()).toBe(false);
+      const database = { id: ko.observable("testDB") } as Database;
+      database.collections = ko.observableArray<Collection>([
+        { id: ko.observable("coll1") } as Collection,
+        { id: ko.observable("coll2") } as Collection,
+      ]);
+      useDatabases.getState().addDatabases([database]);
+      expect(useDatabases.getState().isLastCollection()).toBe(false);
     });
 
     it("should be false if 2 database and 1 collection each", () => {
-      const database = {} as Database;
-      database.collections = ko.observableArray<Collection>([{} as Collection]);
-      const database2 = {} as Database;
-      database2.collections = ko.observableArray<Collection>([{} as Collection]);
-      explorer.databases = ko.observableArray<Database>([database, database2]);
-      expect(explorer.isLastCollection()).toBe(false);
+      const database = { id: ko.observable("testDB") } as Database;
+      database.collections = ko.observableArray<Collection>([{ id: ko.observable("coll1") } as Collection]);
+      const database2 = { id: ko.observable("testDB2") } as Database;
+      database2.collections = ko.observableArray<Collection>([{ id: ko.observable("coll2") } as Collection]);
+      useDatabases.getState().addDatabases([database, database2]);
+      expect(useDatabases.getState().isLastCollection()).toBe(false);
     });
 
     it("should be false if 0 databases", () => {
-      const database = {} as Database;
-      explorer.databases = ko.observableArray<Database>();
-      database.collections = ko.observableArray<Collection>();
-      expect(explorer.isLastCollection()).toBe(false);
+      expect(useDatabases.getState().isLastCollection()).toBe(false);
     });
   });
 
@@ -56,46 +55,39 @@ describe("Delete Collection Confirmation Pane", () => {
     it("should return true if last collection and database does not have shared throughput else false", () => {
       const fakeExplorer = new Explorer();
       fakeExplorer.refreshAllDatabases = () => undefined;
-      fakeExplorer.isLastCollection = () => true;
-      fakeExplorer.isSelectedDatabaseShared = () => false;
 
-      const props = {
-        explorer: fakeExplorer,
-        closePanel: (): void => undefined,
-        collectionName: "container",
-      };
-      const wrapper = shallow(<DeleteCollectionConfirmationPane {...props} />);
-      expect(wrapper.exists(".deleteCollectionFeedback")).toBe(true);
-
-      props.explorer.isLastCollection = () => true;
-      props.explorer.isSelectedDatabaseShared = () => true;
-      wrapper.setProps(props);
+      const wrapper = shallow(<DeleteCollectionConfirmationPane explorer={fakeExplorer} />);
       expect(wrapper.exists(".deleteCollectionFeedback")).toBe(false);
 
-      props.explorer.isLastCollection = () => false;
-      props.explorer.isSelectedDatabaseShared = () => false;
-      wrapper.setProps(props);
+      const database = { id: ko.observable("testDB") } as Database;
+      database.collections = ko.observableArray<Collection>([{ id: ko.observable("testCollection") } as Collection]);
+      database.nodeKind = "Database";
+      database.isDatabaseShared = ko.computed(() => false);
+      useDatabases.getState().addDatabases([database]);
+      useSelectedNode.getState().setSelectedNode(database);
+      wrapper.setProps({ explorer: fakeExplorer });
+      expect(wrapper.exists(".deleteCollectionFeedback")).toBe(true);
+
+      database.isDatabaseShared = ko.computed(() => true);
+      wrapper.setProps({ explorer: fakeExplorer });
       expect(wrapper.exists(".deleteCollectionFeedback")).toBe(false);
     });
   });
 
   describe("submit()", () => {
-    let wrapper: ReactWrapper;
     const selectedCollectionId = "testCol";
     const databaseId = "testDatabase";
     const fakeExplorer = {} as Explorer;
-    fakeExplorer.findSelectedCollection = () => {
-      return {
-        id: ko.observable<string>(selectedCollectionId),
-        databaseId,
-        rid: "test",
-      } as Collection;
-    };
-    fakeExplorer.selectedCollectionId = ko.computed<string>(() => selectedCollectionId);
-    fakeExplorer.selectedNode = ko.observable<TreeNode>();
     fakeExplorer.refreshAllDatabases = () => undefined;
-    fakeExplorer.isLastCollection = () => true;
-    fakeExplorer.isSelectedDatabaseShared = () => false;
+    const database = { id: ko.observable(databaseId) } as Database;
+    const collection = {
+      id: ko.observable(selectedCollectionId),
+      nodeKind: "Collection",
+      database,
+      databaseId,
+    } as Collection;
+    database.collections = ko.observableArray<Collection>([collection]);
+    database.isDatabaseShared = ko.computed(() => false);
 
     beforeAll(() => {
       updateUserContext({
@@ -113,15 +105,17 @@ describe("Delete Collection Confirmation Pane", () => {
     });
 
     beforeEach(() => {
-      const props = {
-        explorer: fakeExplorer,
-        closePanel: (): void => undefined,
-        collectionName: "container",
-      };
-      wrapper = mount(<DeleteCollectionConfirmationPane {...props} />);
+      useDatabases.getState().addDatabases([database]);
+      useSelectedNode.getState().setSelectedNode(collection);
+    });
+
+    afterEach(() => {
+      useDatabases.getState().clearDatabases();
+      useSelectedNode.getState().setSelectedNode(undefined);
     });
 
     it("should call delete collection", () => {
+      const wrapper = mount(<DeleteCollectionConfirmationPane explorer={fakeExplorer} />);
       expect(wrapper).toMatchSnapshot();
 
       expect(wrapper.exists("#confirmCollectionId")).toBe(true);
@@ -138,6 +132,7 @@ describe("Delete Collection Confirmation Pane", () => {
     });
 
     it("should record feedback", async () => {
+      const wrapper = mount(<DeleteCollectionConfirmationPane explorer={fakeExplorer} />);
       expect(wrapper.exists("#confirmCollectionId")).toBe(true);
       wrapper
         .find("#confirmCollectionId")

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -5,6 +5,7 @@ import { deleteCollection } from "../../../Common/dataAccess/deleteCollection";
 import DeleteFeedback from "../../../Common/DeleteFeedback";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import { Collection } from "../../../Contracts/ViewModels";
+import { useSidePanel } from "../../../hooks/useSidePanel";
 import { DefaultExperienceUtility } from "../../../Shared/DefaultExperienceUtility";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
@@ -12,28 +13,31 @@ import { userContext } from "../../../UserContext";
 import { getCollectionName } from "../../../Utils/APITypeUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
+import { useDatabases } from "../../useDatabases";
+import { useSelectedNode } from "../../useSelectedNode";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
+
 export interface DeleteCollectionConfirmationPaneProps {
   explorer: Explorer;
-  closePanel: () => void;
 }
 
 export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectionConfirmationPaneProps> = ({
   explorer,
-  closePanel,
 }: DeleteCollectionConfirmationPaneProps) => {
+  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const [deleteCollectionFeedback, setDeleteCollectionFeedback] = useState<string>("");
   const [inputCollectionName, setInputCollectionName] = useState<string>("");
   const [formError, setFormError] = useState<string>("");
   const [isExecuting, setIsExecuting] = useState(false);
 
-  const shouldRecordFeedback = (): boolean => {
-    return explorer.isLastCollection() && !explorer.isSelectedDatabaseShared();
-  };
+  const shouldRecordFeedback = (): boolean =>
+    useDatabases.getState().isLastCollection() &&
+    !useSelectedNode.getState().findSelectedDatabase()?.isDatabaseShared();
+
   const collectionName = getCollectionName().toLocaleLowerCase();
   const paneTitle = "Delete " + collectionName;
   const onSubmit = async (): Promise<void> => {
-    const collection = explorer.findSelectedCollection();
+    const collection = useSelectedNode.getState().findSelectedCollection();
     if (!collection || inputCollectionName !== collection.id()) {
       const errorMessage = "Input " + collectionName + " name does not match the selected " + collectionName;
       setFormError(errorMessage);
@@ -58,7 +62,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
       await deleteCollection(collection.databaseId, collection.id());
 
       setIsExecuting(false);
-      explorer.selectedNode(collection.database);
+      useSelectedNode.getState().setSelectedNode(collection.database);
       explorer.tabsManager?.closeTabsByComparator(
         (tab) => tab.node?.id() === collection.id() && (tab.node as Collection).databaseId === collection.databaseId
       );
@@ -79,7 +83,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
         });
       }
 
-      closePanel();
+      closeSidePanel();
     } catch (error) {
       const errorMessage = getErrorMessage(error);
 
@@ -102,7 +106,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
     isExecuting,
     submitButtonText: "OK",
     onSubmit,
-    expandConsole: () => explorer.expandConsole(),
   };
   return (
     <RightPaneForm {...props}>