fix copilot insertion so it doesn't wipe existing query text

.editorconfig

@@ -1,10 +0,0 @@
-# NOTE: Prettier reads EditorConfig settings, so be careful adjusting settings here and assuming they'll only affect your editor ;).
-
-# top-most EditorConfig file
-root = true
-
-[*.yml]
-indent_size = 2
-
-[*.{js,jsx,ts,tsx}]
-indent_size = 2

.eslintignore

@@ -1,5 +1,3 @@
-playwright.config.ts
-
 **/node_modules/
 src/**/__mocks__/**/*
 dist/
@@ -91,7 +89,10 @@ src/Explorer/Tables/TableEntityProcessor.ts
 src/Explorer/Tables/Utilities.ts
 src/Explorer/Tabs/ConflictsTab.ts
 src/Explorer/Tabs/DatabaseSettingsTab.ts
+src/Explorer/Tabs/DocumentsTab.test.ts
+src/Explorer/Tabs/DocumentsTab.ts
 src/Explorer/Tabs/GraphTab.ts
+src/Explorer/Tabs/MongoDocumentsTab.ts
 src/Explorer/Tabs/NotebookV2Tab.ts
 src/Explorer/Tabs/ScriptTabBase.ts
 src/Explorer/Tabs/TabComponents.ts
@@ -127,7 +128,7 @@ src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
 src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
 src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
 src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
-src/Explorer/Controls/TreeComponent/LegacyTreeComponent.tsx
+src/Explorer/Controls/TreeComponent/TreeComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.tsx

.github/workflows/ci.yml

@@ -104,6 +104,79 @@ jobs:
         run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}" --overwrite true
         env:
           PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
+  endtoendemulator:
+    name: "End To End Emulator Tests"
+    # Temporarily disabled. This test needs to be rewritten in playwright
+    if: false
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+      - uses: southpolesteve/cosmos-emulator-github-action@v1
+      - name: End to End Tests
+        run: |
+          npm ci
+          npm start &
+          npm run wait-for-server
+          npx jest -c ./jest.config.e2e.js --detectOpenHandles test/sql/container.spec.ts
+        shell: bash
+        env:
+          DATA_EXPLORER_ENDPOINT: "https://localhost:1234/explorer.html?platform=Emulator"
+          PLATFORM: "Emulator"
+          NODE_TLS_REJECT_UNAUTHORIZED: 0
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: screenshots
+          path: failed-*
+  endtoend:
+    name: "E2E"
+    runs-on: ubuntu-latest
+    env:
+      NODE_TLS_REJECT_UNAUTHORIZED: 0
+      AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+    strategy:
+      fail-fast: false
+      matrix:
+        test-file:
+          - ./test/cassandra/container.spec.ts
+          - ./test/graph/container.spec.ts
+          - ./test/sql/container.spec.ts
+          - ./test/mongo/container.spec.ts
+          - ./test/mongo/container32.spec.ts
+          - ./test/selfServe/selfServeExample.spec.ts
+          - ./test/sql/resourceToken.spec.ts
+          - ./test/tables/container.spec.ts
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: "Az CLI login"
+        uses: azure/login@v1
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+      - run: npm ci
+      - run: npm start &
+      - run: npm run wait-for-server
+      - name: ${{ matrix['test-file'] }}
+        run: |
+          # Run tests up to three times
+          for i in $(seq 1 3); do npx jest -c ./jest.config.playwright.js ${{ matrix['test-file'] }} && s=0 && break || s=$? && sleep 1; done; (exit $s)
+        shell: bash
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: screenshots
+          path: screenshots/
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
@@ -153,70 +226,3 @@ jobs:
         name: packages
         with:
           path: "*.nupkg"
-
-  playwright-tests:
-    name: "Run Playwright Tests (Shard ${{ matrix.shardIndex }} of ${{ matrix.shardTotal }})"
-    runs-on: ubuntu-latest
-    env:
-      NODE_TLS_REJECT_UNAUTHORIZED: 0
-      AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
-    strategy:
-      fail-fast: false
-      matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
-        shardTotal: [8]
-    steps:
-      - uses: actions/checkout@v4
-      - name: "Az CLI login"
-        uses: azure/login@v1
-        with:
-          client-id: ${{ secrets.AZURE_CLIENT_ID }}
-          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
-          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18.x
-      - run: npm ci
-      - run: npx playwright install --with-deps
-      - name: Run test shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}
-        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
-      - name: Upload blob report to GitHub Actions Artifacts
-        if: ${{ !cancelled() }}
-        uses: actions/upload-artifact@v4
-        with:
-            name: blob-report-${{ matrix.shardIndex }}
-            path: blob-report
-            retention-days: 1
-
-  merge-playwright-reports:
-    name: "Merge Playwright Reports"
-    # Merge reports after playwright-tests, even if some shards have failed
-    if: ${{ !cancelled() }}
-    needs: [playwright-tests]
-
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 18
-    - name: Install dependencies
-      run: npm ci
-
-    - name: Download blob reports from GitHub Actions Artifacts
-      uses: actions/download-artifact@v4
-      with:
-        path: all-blob-reports
-        pattern: blob-report-*
-        merge-multiple: true
-
-    - name: Merge into HTML Report
-      run: npx playwright merge-reports --reporter html ./all-blob-reports
-
-    - name: Upload HTML report
-      uses: actions/upload-artifact@v4
-      with:
-        name: html-report--attempt-${{ github.run_attempt }}
-        path: playwright-report
-        retention-days: 14

.gitignore

@@ -16,8 +16,4 @@ Contracts/*
 .env
 failure.png
 screenshots/*
-GettingStarted-ignore*.ipynb
+GettingStarted-ignore*.ipynb
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/

.npmrc

@@ -1,4 +1 @@
-save-exact=true
+save-exact=true
-
-# Ignore peer dependency conflicts
-force=true # TODO: Remove this when we update to React 17 or higher!

canvas/README.md

@@ -0,0 +1,7 @@
+# Why?
+
+This adds a mock module for `canvas`. Nteract has a ignored require and undeclared dependency on this module. `cavnas` is a server side node module and is not used in browser side code for nteract.
+
+Installing it locally (`npm install canvas`) will resolve the problem, but it is a native module so it is flaky depending on the system, node version, processor arch, etc. This module provides a simpler, more robust solution.
+
+Remove this workaround if [this bug](https://github.com/nteract/any-vega/issues/2) ever gets resolved 

canvas/index.js

@@ -0,0 +1 @@
+module.exports = {}

canvas/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "canvas",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

images/EntraID.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="uuid-f8d4d392-7c12-4bd9-baff-66fbf7814b91" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-  <path d="m3.802,14.032c.388.242,1.033.511,1.715.511.621,0,1.198-.18,1.676-.487,0,0,.001,0,.002-.001l1.805-1.128v4.073c-.286,0-.574-.078-.824-.234l-4.374-2.734Z" fill="#225086"/>
-  <path d="m7.853,1.507L.353,9.967c-.579.654-.428,1.642.323,2.111,0,0,2.776,1.735,3.126,1.954.388.242,1.033.511,1.715.511.621,0,1.198-.18,1.676-.487,0,0,.001,0,.002-.001l1.805-1.128-4.364-2.728,4.365-4.924V1s0,0,0,0c-.424,0-.847.169-1.147.507Z" fill="#6df"/>
-  <polygon points="4.636 10.199 4.688 10.231 9 12.927 9.001 12.927 9.001 12.927 9.001 5.276 9 5.275 4.636 10.199" fill="#cbf8ff"/>
-  <path d="m17.324,12.078c.751-.469.902-1.457.323-2.111l-4.921-5.551c-.397-.185-.842-.291-1.313-.291-.925,0-1.752.399-2.302,1.026l-.109.123h0s4.364,4.924,4.364,4.924h0s0,0,0,0l-4.365,2.728v4.073c.287,0,.573-.078.823-.234l7.5-4.688Z" fill="#074793"/>
-  <path d="m9.001,1v4.275s.109-.123.109-.123c.55-.627,1.377-1.026,2.302-1.026.472,0,.916.107,1.313.291l-2.579-2.909c-.299-.338-.723-.507-1.146-.507Z" fill="#0294e4"/>
-  <polygon points="13.365 10.199 13.365 10.199 13.365 10.199 9.001 5.276 9.001 12.926 13.365 10.199" fill="#96bcc2"/>
-</svg>

jest-playwright.config.js

@@ -0,0 +1,13 @@
+const isCI = require("is-ci");
+
+module.exports = {
+  exitOnPageError: false,
+  launchOptions: {
+    headless: isCI,
+    slowMo: 10,
+    timeout: 60000,
+  },
+  contextOptions: {
+    ignoreHTTPSErrors: true,
+  },
+};

jest.config.js

@@ -31,7 +31,7 @@ module.exports = {
   coveragePathIgnorePatterns: ["/node_modules/"],
 
   // A list of reporter names that Jest uses when writing coverage reports
-  coverageReporters: ["json", "text", "cobertura", "lcov"],
+  coverageReporters: ["json", "text", "cobertura"],
 
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
@@ -76,11 +76,6 @@ module.exports = {
     "^dnd-core$": "dnd-core/dist/cjs",
     "^react-dnd$": "react-dnd/dist/cjs",
     "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs",
-    "d3-force": "<rootDir>/node_modules/d3-force/dist/d3-force.min.js",
-    "d3-quadtree": "<rootDir>/node_modules/d3-quadtree/dist/d3-quadtree.min.js",
-    "d3-scale-chromatic": "<rootDir>/node_modules/d3-scale-chromatic/dist/d3-scale-chromatic.min.js",
-    "d3-zoom": "<rootDir>/node_modules/d3-zoom/dist/d3-zoom.min.js",
-    uuid: require.resolve("uuid"), // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
@@ -134,7 +129,8 @@ module.exports = {
   snapshotSerializers: ["enzyme-to-json/serializer"],
 
   // The test environment that will be used for testing
-  testEnvironment: "jsdom",
+  // testEnvironment: "jest-environment-jsdom",
+
   modulePaths: ["node_modules", "<rootDir>/src"],
 
   // Options that will be passed to the testEnvironment
@@ -158,7 +154,7 @@ module.exports = {
   // testResultsProcessor: "./trxProcessor.js",
 
   // This option allows use of a custom test runner
-  testRunner: "jest-circus/runner",
+  // testRunner: "jasmine2",
 
   // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
   // testURL: "http://localhost",
@@ -168,9 +164,9 @@ module.exports = {
 
   // A map from regular expressions to paths to transformers
   transform: {
-    "^.+\\.html?$": "jest-html-loader",
+    "^.+\\.html?$": "html-loader-jest",
     "^.+\\.[t|j]sx?$": "babel-jest",
-    "^.+\\.svg$": "<rootDir>/jest/svgTransform.js",
+    "^.+\\.svg$": "<rootDir>/svgTransform.js",
   },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
@@ -187,7 +183,4 @@ module.exports = {
 
   // Whether to use watchman for file crawling
   // watchman: true,
-
-  // TODO: toMatchInlineSnapshot() does not work with prettier 3. Remove when fixed: https://github.com/jestjs/jest/issues/14305
-  prettierPath: null,
 };

jest.config.playwright.js

@@ -0,0 +1,7 @@
+module.exports = {
+  preset: "jest-playwright-preset",
+  testMatch: ["<rootDir>/test/**/*.spec.[jt]s?(x)"],
+  setupFiles: ["dotenv/config"],
+  testEnvironment: "./test/playwrightEnv.js",
+  setupFilesAfterEnv: ["expect-playwright"],
+};

less/Common/Constants.less

@@ -130,7 +130,6 @@
 @ActiveTabWidth: 141px;
 @TabsHeight: 30px;
 @TabsWidth: 140px;
-@ContentWrapper: 111px;
 @StatusIconContainerSize: 18px;
 @LoadingErrorIconSize: 14px;
 @ErrorIconContainer: 16px;
@@ -168,7 +167,7 @@
 
 @FabricBoxBorderRadius: 8px;
 @FabricBoxBorderShadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
-@FabricBoxMargin: 4px 8px 4px 8px;
+@FabricBoxMargin: 4px 3px 4px 3px;
 
 @FabricAccentMediumHigh: #0c695a;
 @FabricAccentMedium: #117865;
@@ -336,11 +335,4 @@
   width: 0;
   height: 0;
   border-color: @InfoPointerColor transparent;
-}
-/*********************************************************************************************************
-                           Screen Reader Only
-**********************************************************************************************************/
-.screenReaderOnly {
-  position: absolute;
-  left: -9999px;
 }

less/documentDB.less

@@ -1906,7 +1906,7 @@ input::-webkit-calendar-picker-indicator::after {
 }
 
 .nav-tabs-margin {
-  padding-top: 5px;
+  padding-top: 8px;
   background-color: #f2f2f2;
 }
 
@@ -2074,6 +2074,14 @@ a:link {
   display: inline;
 }
 
+.resourceTreeAndTabs {
+  display: flex;
+  flex: 1 1 auto;
+  overflow-x: clip;
+  overflow-y: auto;
+  height: 100%;
+}
+
 .collectiontitle {
   font-size: 14px;
   text-transform: uppercase;
@@ -2256,33 +2264,33 @@ a:link {
   width: 82px;
 }
 
-// .tabdocuments .scrollable {
+.tabdocuments .scrollable {
-//   height: 100%;
+  height: 100%;
-//   overflow-y: auto;
+  overflow-y: auto;
-//   overflow-x: hidden;
+  overflow-x: hidden;
-//   padding-left: 5px;
+  padding-left: 5px;
-//   padding-right: 5px;
+  padding-right: 5px;
-//   width: 100%;
+  width: 100%;
-// }
+}
 
-// .tabdocuments > .tabdocumentsGridElement {
+.tabdocuments > .tabdocumentsGridElement {
-//   width: 50%;
+  width: 50%;
-// }
+}
 
-// .tabdocuments > .evenlySpacedHeader {
+.tabdocuments > .evenlySpacedHeader {
-//   width: 30%;
+  width: 30%;
-// }
+}
 
-// .tabdocuments.scrollable:focus,
+.tabdocuments.scrollable:focus,
-// .tabdocuments.scrollable:active {
+.tabdocuments.scrollable:active {
-//   outline: 1px dotted;
+  outline: 1px dotted;
-// }
+}
 
-// .tabdocuments .scrollable table td {
+.tabdocuments .scrollable table td {
-//   white-space: nowrap;
+  white-space: nowrap;
-//   overflow: hidden;
+  overflow: hidden;
-//   text-overflow: ellipsis;
+  text-overflow: ellipsis;
-// }
+}
 
 .mongoDocumentEditor .monaco-editor.vs .redsquiggly {
   display: none !important;
@@ -2308,15 +2316,21 @@ td a:hover {
 }
 
 .loadMore {
-  display: block;
   width: 100%;
-  text-align: center;
+  padding-left: 30%;
+  padding-top: 2px;
+  cursor: pointer;
 }
 
 .loadMore > a:focus {
   outline: 1px dotted;
 }
 
+#content.active .tabdocuments .scrollable {
+  height: 100%;
+  overflow-y: auto;
+}
+
 .table-fixed thead {
   width: 97%;
   padding-left: 18px;
@@ -2352,9 +2366,10 @@ a:link {
 
 .tabsManagerContainer {
   height: 100%;
-  display: grid;
+  flex-grow: 1;
-  grid-template-rows: 36px 36px 1fr;
+  overflow: hidden;
-  min-width: 0; // This prevents it to grow past the parent's width if its content is too wide
+  min-height: 300px;
+  overflow-y: scroll;
 }
 
 .tabs {
@@ -2543,12 +2558,10 @@ a:link {
 }
 
 .filterdivs {
-  margin: 10px 0px;
+  padding-top: 15px;
+  height: 45px;
+  margin-bottom: 8px;
   white-space: nowrap;
-  input {
-    line-height: 14px; // To correct vertical position of the down arrow of the input
-    outline: none; // Remove the dotted border on focus, because fluent has its own focus style (underlined)
-  }
 }
 
 .editFilterContainer {
@@ -2610,7 +2623,6 @@ a:link {
 }
 
 .tabPanesContainer {
-  grid-row: span 2; // Fill the remaining space
   display: flex;
   height: 100%;
   overflow: hidden;
@@ -2646,7 +2658,7 @@ a:link {
   width: @ActiveTabWidth;
 }
 
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .tabNavText {
   font-weight: bolder;
   border-bottom: 2px solid rgba(0, 120, 212, 1);
 }
@@ -2682,71 +2694,67 @@ a:link {
     width: @TabsWidth;
     border-right: @ButtonBorderWidth solid @BaseMedium;
     white-space: nowrap;
-    .contentWrapper {
-      .flex-display();
-      width: @ContentWrapper;
 
-      .statusIconContainer {
+    .statusIconContainer {
-        width: @StatusIconContainerSize;
+      width: @StatusIconContainerSize;
-        height: @StatusIconContainerSize;
+      height: @StatusIconContainerSize;
-        margin-left: @SmallSpace;
+      margin-left: @SmallSpace;
-        display: inline-flex;
+      display: inline-flex;
 
-        .errorIconContainer {
+      .errorIconContainer {
-          width: @ErrorIconContainer;
+        width: @ErrorIconContainer;
-          height: @ErrorIconContainer;
+        height: @ErrorIconContainer;
-          margin-top: 1px;
+        margin-top: 1px;
 
-          .errorIcon {
+        .errorIcon {
-            width: @ErrorIconWidth;
+          width: @ErrorIconWidth;
-            height: @LoadingErrorIconSize;
-            background-image: url(../images/error_no_outline.svg);
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: 3px;
-            display: block;
-            margin: 1px 0px 0px 6px;
-          }
-        }
-
-        .errorIconContainer.actionsEnabled {
-          &:hover {
-            .hover();
-          }
-
-          &:focus {
-            .focus();
-          }
-
-          &:active {
-            .active();
-          }
-        }
-
-        .errorIconContainer[tabindex]:active {
-          outline: none;
-        }
-
-        .loadingIcon {
-          width: @LoadingErrorIconSize;
           height: @LoadingErrorIconSize;
-          margin: 0px 0px @SmallSpace @SmallSpace;
+          background-image: url(../images/error_no_outline.svg);
+          background-repeat: no-repeat;
+          background-position: center;
+          background-size: 3px;
+          display: block;
+          margin: 1px 0px 0px 6px;
         }
       }
 
-      .tabNavText {
+      .errorIconContainer.actionsEnabled {
-        margin-left: @SmallSpace;
+        &:hover {
-        margin-right: 2px;
+          .hover();
-        color: @BaseDark;
+        }
-        text-overflow: ellipsis;
+
-        overflow: hidden;
+        &:focus {
-        white-space: nowrap;
+          .focus();
-        flex-grow: 1;
+        }
+
+        &:active {
+          .active();
+        }
+      }
+
+      .errorIconContainer[tabindex]:active {
+        outline: none;
+      }
+
+      .loadingIcon {
+        width: @LoadingErrorIconSize;
+        height: @LoadingErrorIconSize;
+        margin: 0px 0px @SmallSpace @SmallSpace;
       }
     }
 
+    .tabNavText {
+      margin-left: @SmallSpace;
+      margin-right: 2px;
+      color: @BaseDark;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      flex-grow: 1;
+    }
+
     .tabIconSection {
-      width: 29px;
+      width: 30px;
       position: relative;
       padding-top: 2px;
 

less/documentDBFabric.less

@@ -38,7 +38,7 @@ a:focus {
 }
 
 .nav-tabs-margin {
-  padding-top: 5px;
+  padding-top: 8px;
   background-color: #ffffff
 }
 
@@ -75,7 +75,7 @@ a:focus {
   border-bottom: 2px solid @FabricAccentMedium;
 }
 
-.nav-tabs>li.active>.tabNavContentContainer>.tab_Content>.contentWrapper>.tabNavText {
+.nav-tabs>li.active>.tabNavContentContainer>.tab_Content>.tabNavText {
   border-bottom: 0px none transparent;
 }
 
@@ -93,11 +93,9 @@ a:focus {
     width: calc(@TabsWidth - (@SmallSpace * 2));
     padding-bottom: @SmallSpace;
 
-    .contentWrapper {
+    .statusIconContainer {
-        .statusIconContainer {
+      margin-left: 0px;
-          margin-left: 0px;
+    }
-        }
-      }
 
     .tabIconSection {
       .cancelButton {

less/resourceTree.less

@@ -3,6 +3,19 @@
 .dataResourceTree {
   margin-left: @MediumSpace;
   overflow: auto;
+
+  .databaseHeader {
+    padding: 1px;
+    font-size: 14px;
+  }
+
+  .collectionHeader {
+    font-size: 12px;
+  }
+
+  .loadMoreHeader {
+    color: RGB(5, 99, 193);
+  }
 }
 
 .notebookResourceTree {

package.json

@@ -5,21 +5,21 @@
   "main": "index.js",
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "4.0.1-beta.3",
+    "@azure/cosmos": "4.0.1-beta.2",
     "@azure/cosmos-language-service": "0.0.5",
-    "@azure/identity": "1.5.2",
+    "@azure/identity": "1.2.1",
-    "@azure/ms-rest-nodeauth": "3.1.1",
+    "@azure/ms-rest-nodeauth": "3.0.7",
     "@azure/msal-browser": "2.14.2",
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
-    "@fluentui/react": "8.119.0",
+    "@fluentui/react": "8.112.1",
-    "@fluentui/react-components": "9.54.2",
+    "@fluentui/react-components": "9.34.0",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
     "@nteract/commutable": "7.5.1",
     "@nteract/connected-components": "6.8.2",
-    "@nteract/core": "15.1.9",
+    "@nteract/core": "15.1.0",
     "@nteract/data-explorer": "8.0.3",
     "@nteract/directory-listing": "2.0.6",
     "@nteract/dropdown-menu": "1.0.1",
@@ -42,21 +42,19 @@
     "@nteract/transform-vega": "7.0.6",
     "@octokit/rest": "17.9.2",
     "@phosphor/widgets": "1.9.3",
-    "@testing-library/jest-dom": "6.4.6",
+    "@testing-library/jest-dom": "5.11.9",
     "@types/lodash": "4.14.171",
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
-    "@xmldom/xmldom": "0.7.13",
-    "allotment": "1.20.2",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
-    "canvas": "2.11.2",
+    "canvas": "file:./canvas",
     "clean-webpack-plugin": "4.0.0",
     "clipboard-copy": "4.0.1",
     "copy-webpack-plugin": "11.0.0",
     "crossroads": "0.12.2",
     "css-element-queries": "1.1.1",
-    "d3": "7.8.5",
+    "d3": "6.1.1",
     "datatables.net-colreorder-dt": "1.7.0",
     "datatables.net-dt": "1.13.8",
     "date-fns": "1.29.0",
@@ -67,18 +65,16 @@
     "eslint-plugin-react": "7.33.2",
     "hasher": "1.2.0",
     "html2canvas": "1.0.0-rc.5",
-    "i18next": "23.11.5",
+    "i18next": "19.8.4",
     "i18next-browser-languagedetector": "6.0.1",
     "i18next-http-backend": "1.0.23",
     "iframe-resizer-react": "1.1.0",
-    "immer": "9.0.6",
     "immutable": "4.0.0-rc.12",
     "is-ci": "2.0.0",
     "jquery": "3.7.1",
     "jquery-typeahead": "2.11.1",
     "jquery-ui-dist": "1.13.2",
     "knockout": "3.5.1",
-    "loader-utils": "2.0.3",
     "mkdirp": "1.0.4",
     "monaco-editor": "0.44.0",
     "ms": "2.1.3",
@@ -93,31 +89,27 @@
     "react-dnd-html5-backend": "14.0.0",
     "react-dom": "16.14.0",
     "react-hotkeys": "2.0.0",
-    "react-i18next": "14.1.2",
+    "react-i18next": "11.8.5",
     "react-notification-system": "0.2.17",
     "react-redux": "7.1.3",
     "react-splitter-layout": "4.0.0",
     "react-string-format": "1.0.1",
-    "react-window": "1.8.10",
     "react-youtube": "9.0.1",
     "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
     "sanitize-html": "2.3.3",
-    "shell-quote": "1.7.3",
     "styled-components": "5.0.1",
     "swr": "0.4.0",
     "terser-webpack-plugin": "5.3.9",
-    "tinykeys": "2.1.0",
+    "underscore": "1.9.1",
-    "underscore": "1.12.1",
     "utility-types": "3.10.0",
     "zustand": "3.5.0"
   },
   "devDependencies": {
-    "@babel/core": "7.24.7",
+    "@babel/core": "7.9.0",
-    "@babel/preset-env": "7.24.7",
+    "@babel/preset-env": "7.9.0",
-    "@babel/preset-react": "7.24.7",
+    "@babel/preset-react": "7.9.4",
-    "@babel/preset-typescript": "7.24.7",
+    "@babel/preset-typescript": "7.9.0",
-    "@playwright/test": "1.44.0",
     "@testing-library/react": "11.2.3",
     "@types/applicationinsights-js": "1.0.7",
     "@types/codemirror": "0.0.56",
@@ -126,20 +118,19 @@
     "@types/datatables.net": "1.10.28",
     "@types/datatables.net-colreorder": "1.4.5",
     "@types/dom-to-image": "2.6.2",
-    "@types/enzyme": "3.10.12",
+    "@types/enzyme": "3.10.7",
-    "@types/enzyme-adapter-react-16": "1.0.9",
+    "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/hasher": "0.0.31",
-    "@types/jest": "29.5.12",
+    "@types/jest": "26.0.20",
     "@types/jquery": "3.5.29",
     "@types/node": "12.11.1",
     "@types/post-robot": "10.0.1",
     "@types/q": "1.5.1",
-    "@types/react": "17.0.44",
+    "@types/react": "17.0.3",
-    "@types/react-dom": "17.0.15",
+    "@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/react-window": "1.8.8",
     "@types/sanitize-html": "1.27.2",
     "@types/sinon": "2.3.3",
     "@types/styled-components": "5.1.1",
@@ -148,55 +139,56 @@
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
     "@webpack-cli/serve": "2.0.5",
-    "babel-jest": "29.7.0",
+    "babel-jest": "24.9.0",
     "babel-loader": "8.1.0",
     "buffer": "5.1.0",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "create-file-webpack": "1.0.2",
     "css-loader": "6.8.1",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.8",
+    "enzyme-adapter-react-16": "1.15.5",
-    "enzyme-to-json": "3.6.2",
+    "enzyme-to-json": "3.6.1",
     "eslint": "8.50.0",
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "eslint-plugin-react-hooks": "4.6.0",
+    "expect-playwright": "0.3.3",
     "fast-glob": "3.2.5",
     "fs-extra": "7.0.0",
     "html-inline-css-webpack-plugin": "1.11.2",
-    "html-loader": "5.0.0",
+    "html-loader": "0.5.5",
+    "html-loader-jest": "0.2.1",
     "html-webpack-plugin": "5.5.3",
-    "jest": "29.7.0",
+    "jest": "26.6.3",
-    "jest-canvas-mock": "2.5.2",
+    "jest-canvas-mock": "2.3.1",
-    "jest-circus": "29.7.0",
+    "jest-playwright-preset": "1.5.1",
-    "jest-html-loader": "1.0.0",
     "jest-react-hooks-shallow": "1.5.1",
-    "jest-trx-results-processor": "3.0.2",
+    "jest-trx-results-processor": "0.0.7",
-    "jest-environment-jsdom": "29.7.0",
     "less": "3.8.1",
     "less-loader": "11.1.3",
     "less-vars-loader": "1.1.0",
     "mini-css-extract-plugin": "2.1.0",
     "monaco-editor-webpack-plugin": "7.1.0",
-    "node-fetch": "2.6.7",
+    "node-fetch": "2.6.1",
+    "playwright": "1.13.0",
     "prettier": "3.0.3",
     "process": "0.11.10",
     "querystring-es3": "0.2.1",
     "raw-loader": "0.5.1",
-    "react-dev-utils": "12.0.1",
+    "react-dev-utils": "11.0.4",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
     "style-loader": "0.23.0",
     "ts-loader": "9.2.4",
-    "typedoc": "0.26.2",
+    "typedoc": "0.21.5",
-    "typescript": "4.9.5",
+    "typescript": "4.3.5",
     "url-loader": "4.1.1",
     "wait-on": "4.0.2",
     "webpack": "5.88.2",
     "webpack-bundle-analyzer": "4.9.1",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.2"
+    "webpack-dev-server": "4.15.1"
   },
   "scripts": {
     "postinstall": "patch-package",
@@ -211,7 +203,6 @@
     "test": "rimraf coverage && jest",
     "test:debug": "jest --runInBand",
     "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",
-    "test:file": "jest --coverage=false",
     "watch": "npm run start",
     "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
     "build:ase": "gulp build:ase",
@@ -247,4 +238,4 @@
     "printWidth": 120,
     "endOfLine": "auto"
   }
-}
+}

patches/@phosphor+virtualdom+1.2.0.patch

@@ -1,13 +0,0 @@
-diff --git a/node_modules/@phosphor/virtualdom/lib/index.d.ts b/node_modules/@phosphor/virtualdom/lib/index.d.ts
-index 95682b9..73e2daa 100644
---- a/node_modules/@phosphor/virtualdom/lib/index.d.ts
-+++ b/node_modules/@phosphor/virtualdom/lib/index.d.ts
-@@ -58,7 +58,7 @@ export declare type ElementEventMap = {
-     ondrop: DragEvent;
-     ondurationchange: Event;
-     onemptied: Event;
--    onended: MediaStreamErrorEvent;
-+    onended: ErrorEvent;
-     onerror: ErrorEvent;
-     onfocus: FocusEvent;
-     oninput: Event;

playwright.config.ts

@@ -1,60 +0,0 @@
-import { defineConfig, devices } from "@playwright/test";
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig({
-  testDir: "test",
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 3 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  reporter: process.env.CI ? "blob" : "html",
-  timeout: 10 * 60 * 1000,
-  use: {
-    actionTimeout: 5 * 60 * 1000,
-    trace: "off",
-    video: "off",
-    screenshot: "on",
-    testIdAttribute: "data-test",
-    contextOptions: {
-      ignoreHTTPSErrors: true,
-    },
-  },
-
-  expect: {
-    timeout: 5 * 60 * 1000,
-  },
-
-  projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-    },
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
-    },
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
-    },
-    /* Test against branded browsers. */
-    {
-      name: "Google Chrome",
-      use: { ...devices["Desktop Chrome"], channel: "chrome" }, // or 'chrome-beta'
-    },
-    {
-      name: "Microsoft Edge",
-      use: { ...devices["Desktop Edge"], channel: "msedge" }, // or 'msedge-dev'
-    },
-  ],
-
-  webServer: {
-    command: "npm run start",
-    url: "https://127.0.0.1:1234/_ready",
-    timeout: 120 * 1000,
-    ignoreHTTPSErrors: true,
-    reuseExistingServer: !process.env.CI,
-  },
-});

src/Common/CollapsedResourceTree.tsx

@@ -0,0 +1,55 @@
+import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
+import arrowLeftImg from "../../images/imgarrowlefticon.svg";
+import { getApiShortDisplayName } from "../Utils/APITypeUtils";
+import { NormalizedEventKey } from "./Constants";
+
+export interface CollapsedResourceTreeProps {
+  toggleLeftPaneExpanded: () => void;
+  isLeftPaneExpanded: boolean;
+}
+
+export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps> = ({
+  toggleLeftPaneExpanded,
+  isLeftPaneExpanded,
+}: CollapsedResourceTreeProps): JSX.Element => {
+  const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
+
+  useEffect(() => {
+    if (focusButton.current) {
+      focusButton.current.focus();
+    }
+  });
+
+  const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
+    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
+      toggleLeftPaneExpanded();
+      event.stopPropagation();
+    }
+  };
+
+  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={getApiShortDisplayName() + `Expand tree`}
+            onClick={toggleLeftPaneExpanded}
+            onKeyPress={onKeyPressToggleLeftPaneExpanded}
+            ref={focusButton}
+          >
+            <span className="leftarrowCollapsed">
+              <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
+            </span>
+            <span className="collectionCollapsed">
+              <span>{getApiShortDisplayName()}</span>
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};

src/Common/Constants.ts

@@ -88,12 +88,6 @@ export class CapabilityNames {
   public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
   public static readonly EnableMongo: string = "EnableMongo";
   public static readonly EnableServerless: string = "EnableServerless";
-  public static readonly EnableNoSQLVectorSearch: string = "EnableNoSQLVectorSearch";
-}
-
-export enum CapacityMode {
-  Provisioned = "Provisioned",
-  Serverless = "Serverless",
 }
 
 // flight names returned from the portal are always lowercase
@@ -133,7 +127,6 @@ export enum MongoBackendEndpointType {
 export class BackendApi {
   public static readonly GenerateToken: string = "GenerateToken";
   public static readonly PortalSettings: string = "PortalSettings";
-  public static readonly AccountRestrictions: string = "AccountRestrictions";
 }
 
 export class PortalBackendEndpoints {
@@ -145,7 +138,7 @@ export class PortalBackendEndpoints {
 }
 
 export class MongoProxyEndpoints {
-  public static readonly Local: string = "https://localhost:7238";
+  public static readonly Development: string = "https://localhost:7238";
   public static readonly Mpac: string = "https://cdb-ms-mpac-mp.cosmos.azure.com";
   public static readonly Prod: string = "https://cdb-ms-prod-mp.cosmos.azure.com";
   public static readonly Fairfax: string = "https://cdb-ff-prod-mp.cosmos.azure.us";
@@ -197,12 +190,6 @@ export class Queries {
   public static readonly DefaultMaxWaitTimeInSeconds = 30;
 }
 
-export class RBACOptions {
-  public static setAutomaticRBACOption: string = "Automatic";
-  public static setTrueRBACOption: string = "True";
-  public static setFalseRBACOption: string = "False";
-}
-
 export class SavedQueries {
   public static readonly CollectionName: string = "___Query";
   public static readonly DatabaseName: string = "___Cosmos";
@@ -262,7 +249,6 @@ export class HttpHeaders {
   public static partitionKey: string = "x-ms-documentdb-partitionkey";
   public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
   public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
-  public static xAPIKey: string = "X-API-Key";
 }
 
 export class ContentType {

src/Common/CosmosClient.test.ts

@@ -1,6 +1,47 @@
+import { ResourceType } from "@azure/cosmos";
 import { Platform, resetConfigContext, updateConfigContext } from "../ConfigContext";
 import { updateUserContext } from "../UserContext";
-import { endpoint, getTokenFromAuthService, requestPlugin } from "./CosmosClient";
+import { endpoint, getTokenFromAuthService, requestPlugin, tokenProvider } from "./CosmosClient";
+
+describe("tokenProvider", () => {
+  const options = {
+    verb: "GET" as any,
+    path: "/",
+    resourceId: "",
+    resourceType: "dbs" as ResourceType,
+    headers: {},
+    getAuthorizationTokenUsingMasterKey: () => "",
+  };
+
+  beforeEach(() => {
+    updateConfigContext({
+      BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
+    });
+    window.fetch = jest.fn().mockImplementation(() => {
+      return {
+        json: () => "{}",
+        headers: new Map(),
+      };
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("calls the auth token service if no master key is set", async () => {
+    await tokenProvider(options);
+    expect((window.fetch as any).mock.calls.length).toBe(1);
+  });
+
+  it("does not call the auth service if a master key is set", async () => {
+    updateUserContext({
+      masterKey: "foo",
+    });
+    await tokenProvider(options);
+    expect((window.fetch as any).mock.calls.length).toBe(0);
+  });
+});
 
 describe("getTokenFromAuthService", () => {
   beforeEach(() => {

src/Common/CosmosClient.ts

@@ -1,6 +1,6 @@
 import * as Cosmos from "@azure/cosmos";
 import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizationTokenUsingResourceTokens";
-import { AuthorizationToken } from "Contracts/FabricMessageTypes";
+import { AuthorizationToken } from "Contracts/MessageTypes";
 import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { AuthType } from "../AuthType";
@@ -11,25 +11,13 @@ import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
 import { getErrorMessage } from "./ErrorHandlingUtils";
-import * as Logger from "../Common/Logger";
 
 const _global = typeof self === "undefined" ? window : self;
 
 export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
 
-  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && userContext.apiType === "SQL";
+  if (userContext.features.enableAadDataPlane && userContext.aadToken) {
-  if (userContext.features.enableAadDataPlane || dataPlaneRBACOptionEnabled) {
-    Logger.logInfo(
-      `AAD Data Plane Feature flag set to ${userContext.features.enableAadDataPlane} for account with disable local auth ${userContext.databaseAccount.properties.disableLocalAuth} `,
-      "Explorer/tokenProvider",
-    );
-    if (!userContext.aadToken) {
-      logConsoleError(
-        `AAD token does not exist. Please click on "Login for Entra ID" button prior to performing Entra ID RBAC operations`,
-      );
-      return null;
-    }
     const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
     const authorizationToken = `${AUTH_PREFIX}${userContext.aadToken}`;
     return authorizationToken;
@@ -71,7 +59,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
       /* ************** TODO: Uncomment this code if we need to support these operations **************
       // User master tokens
       const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(
-        FabricMessageTypes.GetAuthorizationToken,
+        MessageTypes.GetAuthorizationToken,
         [requestInfo],
         userContext.fabricContext.connectionId,
       );
@@ -83,15 +71,8 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   }
 
   if (userContext.masterKey) {
-    Logger.logInfo(`Master Key exists`, "Explorer/tokenProvider");
     // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
-    await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(
+    await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
-      verb,
-      resourceId,
-      resourceType,
-      headers,
-      userContext.masterKey,
-    );
     return decodeURIComponent(headers.authorization);
   }
 
@@ -156,11 +137,8 @@ enum SDKSupportedCapabilities {
 let _client: Cosmos.CosmosClient;
 
 export function client(): Cosmos.CosmosClient {
-  if (_client) {
+  if (_client) return _client;
-    if (!userContext.hasDataPlaneRbacSettingChanged) {
+
-      return _client;
-    }
-  }
   let _defaultHeaders: Cosmos.CosmosHeaders = {};
   _defaultHeaders["x-ms-cosmos-sdk-supportedcapabilities"] =
     SDKSupportedCapabilities.None | SDKSupportedCapabilities.PartitionMerge;
@@ -179,7 +157,7 @@ export function client(): Cosmos.CosmosClient {
 
   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
-    key: userContext.dataPlaneRbacEnabled ? "" : userContext.masterKey,
+    key: userContext.masterKey,
     tokenProvider,
     userAgentSuffix: "Azure Portal",
     defaultHeaders: _defaultHeaders,

src/Common/DocumentUtility.ts

@@ -1,9 +1,9 @@
 import { userContext } from "../UserContext";
 
-export const getEntityName = (multiple?: boolean): string => {
+export const getEntityName = (): string => {
   if (userContext.apiType === "Mongo") {
-    return multiple ? "documents" : "document";
+    return "document";
   }
 
-  return multiple ? "items" : "item";
+  return "item";
 };

src/Common/MessageHandler.ts

@@ -1,7 +1,5 @@
-import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
 import Q from "q";
 import * as _ from "underscore";
-import * as Logger from "../Common/Logger";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { getDataExplorerWindow } from "../Utils/WindowUtils";
 import * as Constants from "./Constants";
@@ -38,7 +36,7 @@ export function handleCachedDataMessage(message: any): void {
  * @returns
  */
 export function sendCachedDataMessage<TResponseDataModel>(
-  messageType: MessageTypes | FabricMessageTypes,
+  messageType: MessageTypes,
   params: Object[],
   scope?: string,
   timeoutInMs?: number,
@@ -70,7 +68,6 @@ export function sendMessage(data: any): void {
 }
 
 export function sendReadyMessage(): void {
-  console.log("SENDING READY MESSAGE");
   _sendMessage({
     signature: "pcIframe",
     kind: "ready",
@@ -98,18 +95,10 @@ const _sendMessage = (message: any): void => {
     const portalChildWindow = getDataExplorerWindow(window) || window;
     if (portalChildWindow === window) {
       // Current window is a child of portal, send message to portal window
-      if (portalChildWindow.document.referrer) {
+      portalChildWindow.parent.postMessage(message, portalChildWindow.document.referrer || "*");
-        portalChildWindow.parent.postMessage(message, portalChildWindow.document.referrer);
-      } else {
-        Logger.logError("Iframe failed to send message to portal", "MessageHandler");
-      }
     } else {
       // Current window is not a child of portal, send message to the child window instead (which is data explorer)
-      if (portalChildWindow.location.origin) {
+      portalChildWindow.postMessage(message, portalChildWindow.location.origin || "*");
-        portalChildWindow.postMessage(message, portalChildWindow.location.origin);
-      } else {
-        Logger.logError("Iframe failed to send message to data explorer", "MessageHandler");
-      }
     }
   }
 };

src/Common/MongoProxyClient.ts

@@ -672,28 +672,6 @@ export function getEndpoint(endpoint: string): string {
   return url;
 }
 
-export function useMongoProxyEndpoint(api: string): boolean {
-  const activeMongoProxyEndpoints: string[] = [
-    MongoProxyEndpoints.Local,
-    MongoProxyEndpoints.Mpac,
-    MongoProxyEndpoints.Prod,
-    MongoProxyEndpoints.Fairfax,
-  ];
-  let canAccessMongoProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
-  if (
-    configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Local &&
-    userContext.databaseAccount.properties.ipRules?.length > 0
-  ) {
-    canAccessMongoProxy = canAccessMongoProxy && configContext.MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED;
-  }
-
-  return (
-    canAccessMongoProxy &&
-    configContext.NEW_MONGO_APIS?.includes(api) &&
-    activeMongoProxyEndpoints.includes(configContext.MONGO_PROXY_ENDPOINT)
-  );
-}
-
 // TODO: This function throws most of the time except on Forbidden which is a bit strange
 // It causes problems for TypeScript understanding the types
 async function errorHandling(response: Response, action: string, params: unknown): Promise<void> {
@@ -710,3 +688,24 @@ async function errorHandling(response: Response, action: string, params: unknown
 export function getARMCreateCollectionEndpoint(params: DataModels.MongoParameters): string {
   return `subscriptions/${params.sid}/resourceGroups/${params.rg}/providers/Microsoft.DocumentDB/databaseAccounts/${userContext.databaseAccount.name}/mongodbDatabases/${params.db}/collections/${params.coll}`;
 }
+
+function useMongoProxyEndpoint(api: string): boolean {
+  const activeMongoProxyEndpoints: string[] = [
+    MongoProxyEndpoints.Development,
+    MongoProxyEndpoints.Mpac,
+    MongoProxyEndpoints.Prod,
+  ];
+  let canAccessMongoProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
+  if (
+    configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Development &&
+    userContext.databaseAccount.properties.ipRules?.length > 0
+  ) {
+    canAccessMongoProxy = canAccessMongoProxy && configContext.MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED;
+  }
+
+  return (
+    canAccessMongoProxy &&
+    configContext.NEW_MONGO_APIS?.includes(api) &&
+    activeMongoProxyEndpoints.includes(configContext.MONGO_PROXY_ENDPOINT)
+  );
+}

src/Common/QueriesClient.ts

@@ -3,7 +3,8 @@ import * as _ from "underscore";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import Explorer from "../Explorer/Explorer";
-import DocumentId, { IDocumentIdContainer } from "../Explorer/Tree/DocumentId";
+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";
@@ -161,10 +162,10 @@ export class QueriesClient {
       {
         partitionKey: QueriesClient.PartitionKey,
         partitionKeyProperties: ["id"],
-      } as IDocumentIdContainer,
+      } as DocumentsTab,
       query,
       [query.queryName],
-    );
+    ); // TODO: Remove DocumentId's dependency on DocumentsTab
     const options: any = { partitionKey: query.resourceId };
     return deleteDocument(queriesCollection, documentId)
       .then(

src/Common/ResourceTreeContainer.tsx

@@ -0,0 +1,90 @@
+import { ResourceTree } from "Explorer/Tree/ResourceTree";
+import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
+import arrowLeftImg from "../../images/imgarrowlefticon.svg";
+import refreshImg from "../../images/refresh-cosmos.svg";
+import { AuthType } from "../AuthType";
+import Explorer from "../Explorer/Explorer";
+import { ResourceTokenTree } from "../Explorer/Tree/ResourceTokenTree";
+import { ResourceTree2 } from "../Explorer/Tree2/ResourceTree";
+import { userContext } from "../UserContext";
+import { getApiShortDisplayName } from "../Utils/APITypeUtils";
+import { Platform, configContext } from "./../ConfigContext";
+import { NormalizedEventKey } from "./Constants";
+
+export interface ResourceTreeContainerProps {
+  toggleLeftPaneExpanded: () => void;
+  isLeftPaneExpanded: boolean;
+  container: Explorer;
+}
+
+export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps> = ({
+  toggleLeftPaneExpanded,
+  isLeftPaneExpanded,
+  container,
+}: ResourceTreeContainerProps): JSX.Element => {
+  const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
+
+  useEffect(() => {
+    if (isLeftPaneExpanded) {
+      if (focusButton.current) {
+        focusButton.current.focus();
+      }
+    }
+  });
+
+  const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
+    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
+      toggleLeftPaneExpanded();
+      event.stopPropagation();
+    }
+  };
+  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">{getApiShortDisplayName()}</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={getApiShortDisplayName() + `Refresh tree`}
+                title="Refresh tree"
+              >
+                <img className="refreshcol" src={refreshImg} alt="Refresh Tree" />
+              </span>
+              <span
+                className="padimgcolrefresh1"
+                id="expandToggleLeftPaneButton"
+                role="button"
+                onClick={toggleLeftPaneExpanded}
+                onKeyPress={onKeyPressToggleLeftPaneExpanded}
+                tabIndex={0}
+                aria-label={getApiShortDisplayName() + `Collapse Tree`}
+                title="Collapse Tree"
+                ref={focusButton}
+              >
+                <img className="refreshcol1" src={arrowLeftImg} alt="Hide" />
+              </span>
+            </div>
+          </div>
+        </div>
+        {userContext.authType === AuthType.ResourceToken ? (
+          <ResourceTokenTree />
+        ) : userContext.features.enableKoResourceTree ? (
+          <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
+        ) : configContext.platform === Platform.Fabric ? (
+          <ResourceTree2 container={container} />
+        ) : (
+          <ResourceTree container={container} />
+        )}
+      </div>
+      {/*  Collections Window - End */}
+    </div>
+  );
+};

src/Common/TableEntity.tsx

@@ -142,7 +142,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
               <Image
                 {...imageProps}
                 src={EditIcon}
-                alt={`Edit ${entityProperty} entity`}
+                alt="editEntity"
                 onClick={onEditEntity}
                 tabIndex={0}
                 onKeyPress={handleKeyPress}
@@ -156,7 +156,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
             <Image
               {...imageProps}
               src={DeleteIcon}
-              alt={`Delete ${entityProperty} entity`}
+              alt="delete entity"
               id="deleteEntity"
               onClick={onDeleteEntity}
               tabIndex={0}

src/Common/__snapshots__/CosmosClient.test.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`requestPlugin Emulator builds a url for emulator proxy via webpack 1`] = `
-{
+Object {
   "endpoint": "http://localhost/proxy",
-  "headers": {
+  "headers": Object {
     "x-ms-proxy-target": "http://localhost",
   },
   "path": "/dbs/foo",
@@ -11,9 +11,9 @@ exports[`requestPlugin Emulator builds a url for emulator proxy via webpack 1`]
 `;
 
 exports[`requestPlugin Hosted builds a proxy URL in development 1`] = `
-{
+Object {
   "endpoint": "http://localhost/proxy",
-  "headers": {
+  "headers": Object {
     "x-ms-proxy-target": "baz",
   },
   "path": "/dbs/foo",

src/Common/__snapshots__/IteratorUtilities.test.ts.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`nextPage returns results for the next page 1`] = `
-{
+Object {
   "activityId": "foo",
-  "documents": [],
+  "documents": Array [],
   "firstItemIndex": 11,
   "hasMoreResults": false,
-  "headers": {},
+  "headers": Object {},
   "itemCount": 0,
   "lastItemIndex": 10,
   "requestCharge": 1,

src/Common/dataAccess/__snapshots__/queryDocuments.test.ts.snap

@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`getCommonQueryOptions builds the correct default options objects 1`] = `
-{
+Object {
-  "disableNonStreamingOrderByQuery": true,
   "enableScanInQuery": true,
   "forceQueryPlan": true,
   "maxDegreeOfParallelism": 0,
@@ -12,8 +11,7 @@ exports[`getCommonQueryOptions builds the correct default options objects 1`] =
 `;
 
 exports[`getCommonQueryOptions reads from localStorage 1`] = `
-{
+Object {
-  "disableNonStreamingOrderByQuery": true,
   "enableScanInQuery": true,
   "forceQueryPlan": true,
   "maxDegreeOfParallelism": 17,

src/Common/dataAccess/createCollection.ts

@@ -6,13 +6,13 @@ import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstan
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { getCollectionName } from "../../Utils/APITypeUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { createUpdateCassandraTable } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { createUpdateGremlinGraph } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { createUpdateMongoDBCollection } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { createUpdateSqlContainer } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { createUpdateTable } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import * as ARMTypes from "../../Utils/arm/generatedClients/cosmos/types";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 import { createMongoCollectionWithProxy } from "../MongoProxyClient";
@@ -96,9 +96,6 @@ const createSqlContainer = async (params: DataModels.CreateCollectionParams): Pr
   if (params.uniqueKeyPolicy) {
     resource.uniqueKeyPolicy = params.uniqueKeyPolicy;
   }
-  if (params.vectorEmbeddingPolicy) {
-    resource.vectorEmbeddingPolicy = params.vectorEmbeddingPolicy;
-  }
 
   const rpPayload: ARMTypes.SqlDatabaseCreateUpdateParameters = {
     properties: {
@@ -269,7 +266,6 @@ const createCollectionWithSDK = async (params: DataModels.CreateCollectionParams
     indexingPolicy: params.indexingPolicy || undefined,
     uniqueKeyPolicy: params.uniqueKeyPolicy || undefined,
     analyticalStorageTtl: params.analyticalStorageTtl,
-    vectorEmbeddingPolicy: params.vectorEmbeddingPolicy,
   } as ContainerRequest; // TODO: remove cast when https://github.com/Azure/azure-cosmos-js/issues/423 is fixed
   const collectionOptions: RequestOptions = {};
   const createDatabaseBody: DatabaseRequest = { id: params.databaseId };

src/Common/dataAccess/createDatabase.ts

@@ -4,7 +4,6 @@ import * as DataModels from "../../Contracts/DataModels";
 import { useDatabases } from "../../Explorer/useDatabases";
 import { userContext } from "../../UserContext";
 import { getDatabaseName } from "../../Utils/APITypeUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { createUpdateCassandraKeyspace } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { createUpdateGremlinDatabase } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { createUpdateMongoDBDatabase } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
@@ -16,6 +15,7 @@ import {
   MongoDBDatabaseCreateUpdateParameters,
   SqlDatabaseCreateUpdateParameters,
 } from "../../Utils/arm/generatedClients/cosmos/types";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
@@ -152,18 +152,8 @@ async function createDatabaseWithSDK(params: DataModels.CreateDatabaseParams): P
       createBody.throughput = params.offerThroughput;
     }
   }
-  let response: DatabaseResponse;
+
-  try {
+  const response: DatabaseResponse = await client().databases.create(createBody);
-    response = await client().databases.create(createBody);
-  } catch (error) {
-    if (error.message.includes("Shared throughput database creation is not supported for serverless accounts")) {
-      createBody.maxThroughput = undefined;
-      createBody.throughput = undefined;
-      response = await client().databases.create(createBody);
-    } else {
-      throw error;
-    }
-  }
   return response.resource;
 }
 

src/Common/dataAccess/deleteDocument.ts

@@ -1,4 +1,3 @@
-import { BulkOperationType, OperationInput } from "@azure/cosmos";
 import { CollectionBase } from "../../Contracts/ViewModels";
 import DocumentId from "../../Explorer/Tree/DocumentId";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
@@ -25,58 +24,3 @@ export const deleteDocument = async (collection: CollectionBase, documentId: Doc
     clearMessage();
   }
 };
-
-/**
- * Bulk delete documents
- * @param collection
- * @param documentId
- * @returns array of ids that were successfully deleted
- */
-export const deleteDocuments = async (collection: CollectionBase, documentIds: DocumentId[]): Promise<DocumentId[]> => {
-  const nbDocuments = documentIds.length;
-  const clearMessage = logConsoleProgress(`Deleting ${documentIds.length} ${getEntityName(true)}`);
-  try {
-    const v2Container = await client().database(collection.databaseId).container(collection.id());
-
-    // Bulk can only delete 100 documents at a time
-    const BULK_DELETE_LIMIT = 100;
-    const promiseArray = [];
-
-    while (documentIds.length > 0) {
-      const documentIdsChunk = documentIds.splice(0, BULK_DELETE_LIMIT);
-      const operations: OperationInput[] = documentIdsChunk.map((documentId) => ({
-        id: documentId.id(),
-        // bulk delete: if not partition key is specified, do not pass empty array, but undefined
-        partitionKey:
-          documentId.partitionKeyValue &&
-          Array.isArray(documentId.partitionKeyValue) &&
-          documentId.partitionKeyValue.length === 0
-            ? undefined
-            : documentId.partitionKeyValue,
-        operationType: BulkOperationType.Delete,
-      }));
-
-      const promise = v2Container.items.bulk(operations).then((bulkResult) => {
-        return documentIdsChunk.filter((_, index) => bulkResult[index].statusCode === 204);
-      });
-      promiseArray.push(promise);
-    }
-
-    const allResult = await Promise.all(promiseArray);
-    const flatAllResult = Array.prototype.concat.apply([], allResult);
-    logConsoleInfo(
-      `Successfully deleted ${getEntityName(flatAllResult.length > 1)}: ${flatAllResult.length} out of ${nbDocuments}`,
-    );
-    // TODO: handle case result.length != nbDocuments
-    return flatAllResult;
-  } catch (error) {
-    handleError(
-      error,
-      "DeleteDocuments",
-      `Error while deleting ${documentIds.length} ${getEntityName(documentIds.length > 1)}`,
-    );
-    throw error;
-  } finally {
-    clearMessage();
-  }
-};

src/Common/dataAccess/queryDocuments.ts

@@ -1,5 +1,4 @@
 import { FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import { isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
 import { Queries } from "../Constants";
 import { client } from "../CosmosClient";
@@ -27,6 +26,5 @@ export const getCommonQueryOptions = (options: FeedOptions): FeedOptions => {
     (storedItemPerPageSetting !== undefined && storedItemPerPageSetting) ||
     Queries.itemsPerPage;
   options.maxDegreeOfParallelism = LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism);
-  options.disableNonStreamingOrderByQuery = !isVectorSearchEnabled();
   return options;
 };

src/Common/dataAccess/readCollection.ts

@@ -2,6 +2,7 @@ import { CosmosClient } from "@azure/cosmos";
 import { sampleDataClient } from "Common/SampleDataClient";
 import { userContext } from "UserContext";
 import * as DataModels from "../../Contracts/DataModels";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
@@ -30,6 +31,7 @@ export async function readCollectionInternal(
   collectionId: string,
 ): Promise<DataModels.Collection> {
   let collection: DataModels.Collection;
+  const clearMessage = logConsoleProgress(`Querying container ${collectionId}`);
   try {
     const response = await cosmosClient.database(databaseId).container(collectionId).read();
     collection = response.resource as DataModels.Collection;
@@ -37,5 +39,6 @@ export async function readCollectionInternal(
     handleError(error, "ReadCollection", `Error while querying container ${collectionId}`);
     throw error;
   }
+  clearMessage();
   return collection;
 }

src/ConfigContext.ts

@@ -42,10 +42,6 @@ export interface ConfigContext {
   ARM_API_VERSION: string;
   GRAPH_ENDPOINT: string;
   GRAPH_API_VERSION: string;
-  // This is the endpoint to get offering Ids to be used to fetch prices. Refer to this doc: https://learn.microsoft.com/en-us/rest/api/marketplacecatalog/dataplane/skus/list?view=rest-marketplacecatalog-dataplane-2023-05-01-preview&tabs=HTTP
-  CATALOG_ENDPOINT: string;
-  CATALOG_API_VERSION: string;
-  CATALOG_API_KEY: string;
   ARCADIA_ENDPOINT: string;
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: string;
   BACKEND_ENDPOINT?: string;
@@ -87,7 +83,6 @@ let configContext: Readonly<ConfigContext> = {
     `^https:\\/\\/.*\\.analysis-df\\.net$`,
     `^https:\\/\\/.*\\.analysis-df\\.windows\\.net$`,
     `^https:\\/\\/.*\\.azure-test\\.net$`,
-    `^https:\\/\\/cosmos-explorer-preview\\.azurewebsites\\.net`,
   ], // Webpack injects this at build time
   gitSha: process.env.GIT_SHA,
   hostedExplorerURL: "https://cosmos.azure.com/",
@@ -97,9 +92,6 @@ let configContext: Readonly<ConfigContext> = {
   ARM_API_VERSION: "2016-06-01",
   GRAPH_ENDPOINT: "https://graph.microsoft.com",
   GRAPH_API_VERSION: "1.6",
-  CATALOG_ENDPOINT: "https://catalogapi.azure.com/",
-  CATALOG_API_VERSION: "2023-05-01-preview",
-  CATALOG_API_KEY: "",
   ARCADIA_ENDPOINT: "https://workspaceartifacts.projectarcadia.net",
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: "dev.azuresynapse.net",
   GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1189306
@@ -109,14 +101,13 @@ let configContext: Readonly<ConfigContext> = {
   PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Prod,
   MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
   NEW_MONGO_APIS: [
-    // "resourcelist",
+    "resourcelist",
-    // "queryDocuments",
+    "queryDocuments",
-    // "createDocument",
+    "createDocument",
-    // "readDocument",
+    "readDocument",
-    // "updateDocument",
+    "updateDocument",
-    // "deleteDocument",
+    "deleteDocument",
-    // "createCollectionWithProxy",
+    "createCollectionWithProxy",
-    // "legacyMongoShell",
   ],
   MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,
   CASSANDRA_PROXY_ENDPOINT: CassandraProxyEndpoints.Prod,
@@ -199,9 +190,6 @@ if (process.env.NODE_ENV === "development") {
   updateConfigContext({
     PROXY_PATH: "/proxy",
     EMULATOR_ENDPOINT: "https://localhost:8081",
-    PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Mpac,
-    MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Mpac,
-    CASSANDRA_PROXY_ENDPOINT: CassandraProxyEndpoints.Mpac,
   });
 }
 

src/Contracts/AzureResourceGraph.ts

@@ -1,8 +1,7 @@
 export interface QueryRequestOptions {
   $skipToken?: string;
   $top?: number;
-  $allowPartialScopes: boolean;
+  subscriptions: string[];
-  subscriptions?: string[];
 }
 
 export interface QueryResponse {

src/Contracts/DataExplorerMessagesContract.ts

@@ -1,22 +1,37 @@
-import { FabricMessageTypes } from "./FabricMessageTypes";
+import { MessageTypes } from "./MessageTypes";
 
 // This is the current version of these messages
-export const DATA_EXPLORER_RPC_VERSION = "3";
+export const DATA_EXPLORER_RPC_VERSION = "2";
 
 // Data Explorer to Fabric
-export type DataExploreMessageV3 =
+
+// TODO Remove when upgrading to Fabric v2
+export type DataExploreMessageV1 =
+  | "ready"
   | {
-      type: FabricMessageTypes.Ready;
+      type: MessageTypes.GetAuthorizationToken;
-      id: string;
-      params: [string]; // version
-    }
-  | {
-      type: FabricMessageTypes.GetAuthorizationToken;
       id: string;
       params: GetCosmosTokenMessageOptions[];
     }
   | {
-      type: FabricMessageTypes.GetAllResourceTokens;
+      type: MessageTypes.GetAllResourceTokens;
+      id: string;
+    };
+// -----------------------------
+
+export type DataExploreMessageV2 =
+  | {
+      type: MessageTypes.Ready;
+      id: string;
+      params: [string]; // version
+    }
+  | {
+      type: MessageTypes.GetAuthorizationToken;
+      id: string;
+      params: GetCosmosTokenMessageOptions[];
+    }
+  | {
+      type: MessageTypes.GetAllResourceTokens;
       id: string;
     };
 

src/Contracts/DataModels.ts

@@ -1,4 +1,4 @@
-import { CapacityMode, ConnectionStatusType, ContainerStatusType } from "../Common/Constants";
+import { ConnectionStatusType, ContainerStatusType } from "../Common/Constants";
 
 export interface ArmEntity {
   id: string;
@@ -35,7 +35,6 @@ export interface DatabaseAccountExtendedProperties {
   ipRules?: IpRule[];
   privateEndpointConnections?: unknown[];
   capacity?: { totalThroughputLimit: number };
-  capacityMode?: CapacityMode;
   locations?: DatabaseAccountResponseLocation[];
   postgresqlEndpoint?: string;
   publicNetworkAccess?: string;
@@ -158,7 +157,6 @@ export interface Collection extends Resource {
   changeFeedPolicy?: ChangeFeedPolicy;
   analyticalStorageTtl?: number;
   geospatialConfig?: GeospatialConfig;
-  vectorEmbeddingPolicy?: VectorEmbeddingPolicy;
   schema?: ISchema;
   requestSchema?: () => void;
   computedProperties?: ComputedProperties;
@@ -196,14 +194,8 @@ export interface IndexingPolicy {
   indexingMode: "consistent" | "lazy" | "none";
   includedPaths: any;
   excludedPaths: any;
-  compositeIndexes?: any[];
+  compositeIndexes?: any;
-  spatialIndexes?: any[];
+  spatialIndexes?: any;
-  vectorIndexes?: VectorIndex[];
-}
-
-export interface VectorIndex {
-  path: string;
-  type: "flat" | "diskANN" | "quantizedFlat";
 }
 
 export interface ComputedProperty {
@@ -341,18 +333,6 @@ export interface CreateCollectionParams {
   partitionKey?: PartitionKey;
   uniqueKeyPolicy?: UniqueKeyPolicy;
   createMongoWildcardIndex?: boolean;
-  vectorEmbeddingPolicy?: VectorEmbeddingPolicy;
-}
-
-export interface VectorEmbeddingPolicy {
-  vectorEmbeddings: VectorEmbedding[];
-}
-
-export interface VectorEmbedding {
-  dataType: "float16" | "float32" | "uint8" | "int8";
-  dimensions: number;
-  distanceFunction: "euclidean" | "cosine" | "dotproduct";
-  path: string;
 }
 
 export interface ReadDatabaseOfferParams {

src/Contracts/FabricMessageTypes.ts

@@ -1,13 +0,0 @@
-/**
- * Data Explorer -> Fabric communication.
- */
-export enum FabricMessageTypes {
-  GetAuthorizationToken = "GetAuthorizationToken",
-  GetAllResourceTokens = "GetAllResourceTokens",
-  Ready = "Ready",
-}
-
-export interface AuthorizationToken {
-  XDate: string;
-  PrimaryReadWriteToken: string;
-}

src/Contracts/FabricMessagesContract.ts

@@ -1,4 +1,4 @@
-import { AuthorizationToken } from "Contracts/FabricMessageTypes";
+import { AuthorizationToken } from "./MessageTypes";
 
 // This is the version of these messages
 export const FABRIC_RPC_VERSION = "2";

src/Contracts/MessageTypes.ts

@@ -1,13 +1,12 @@
 /**
  * Messaging types used with Data Explorer <-> Portal communication,
- * Hosted <-> Explorer communication
+ * Hosted <-> Explorer communication and Data Explorer -> Fabric communication.
  *
  * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  * WARNING: !!!!!!! YOU CAN ONLY ADD NEW TYPES TO THE END OF THIS ENUM !!!!!!!
  * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  *
  * Enum are integers, so inserting or deleting a type will break the communication.
- *
  */
 export enum MessageTypes {
   TelemetryInfo,
@@ -44,9 +43,14 @@ export enum MessageTypes {
   DisplayNPSSurvey,
   OpenVCoreMongoNetworkingBlade,
   OpenVCoreMongoConnectionStringsBlade,
-  GetAuthorizationToken, // unused. Can be removed if the portal uses the same list of enums.
+  GetAuthorizationToken, // Data Explorer -> Fabric
-  GetAllResourceTokens, // unused. Can be removed if the portal uses the same list of enums.
+  GetAllResourceTokens, // Data Explorer -> Fabric
-  Ready, // unused. Can be removed if the portal uses the same list of enums.
+  Ready, // Data Explorer -> Fabric
   OpenCESCVAFeedbackBlade,
   ActivateTab,
 }
+
+export interface AuthorizationToken {
+  XDate: string;
+  PrimaryReadWriteToken: string;
+}

src/Contracts/ViewModels.ts

@@ -176,11 +176,6 @@ export interface Collection extends CollectionBase {
   loadTriggers(): Promise<any>;
   loadOffer(): Promise<void>;
 
-  showStoredProcedures: ko.Observable<boolean>;
-  showTriggers: ko.Observable<boolean>;
-  showUserDefinedFunctions: ko.Observable<boolean>;
-  showConflicts: ko.Observable<boolean>;
-
   createStoredProcedureNode(data: StoredProcedureDefinition & Resource): StoredProcedure;
   createUserDefinedFunctionNode(data: UserDefinedFunctionDefinition & Resource): UserDefinedFunction;
   createTriggerNode(data: TriggerDefinition | SqlTriggerResource): Trigger;
@@ -329,9 +324,9 @@ export enum DocumentExplorerState {
   noDocumentSelected,
   newDocumentValid,
   newDocumentInvalid,
-  existingDocumentNoEdits,
+  exisitingDocumentNoEdits,
-  existingDocumentDirtyValid,
+  exisitingDocumentDirtyValid,
-  existingDocumentDirtyInvalid,
+  exisitingDocumentDirtyInvalid,
 }
 
 export enum IndexingPolicyEditorState {
@@ -344,9 +339,9 @@ export enum IndexingPolicyEditorState {
 export enum ScriptEditorState {
   newInvalid,
   newValid,
-  existingNoEdits,
+  exisitingNoEdits,
-  existingDirtyValid,
+  exisitingDirtyValid,
-  existingDirtyInvalid,
+  exisitingDirtyInvalid,
 }
 
 export enum CollectionTabKind {
@@ -425,7 +420,6 @@ export interface SelfServeFrameInputs {
   authorizationToken: string;
   csmEndpoint: string;
   flights?: readonly string[];
-  catalogAPIKey: string;
 }
 
 export class MonacoEditorSettings {

src/Controls/Heatmap/Heatmap.test.ts

@@ -36,21 +36,21 @@ describe("The Heatmap Control", () => {
     });
 
     it("should call _getChartSettings when drawHeatmap is invoked", () => {
-      const _getChartSettings = jest.spyOn(heatmap, "_getChartSettings");
+      const _getChartSettings = spyOn<any>(heatmap, "_getChartSettings");
       heatmap.drawHeatmap();
-      expect(_getChartSettings).toHaveBeenCalled();
+      expect(_getChartSettings.calls.any()).toBe(true);
     });
 
     it("should call _getLayoutSettings when drawHeatmap is invoked", () => {
-      const _getLayoutSettings = jest.spyOn(heatmap, "_getLayoutSettings");
+      const _getLayoutSettings = spyOn<any>(heatmap, "_getLayoutSettings");
       heatmap.drawHeatmap();
-      expect(_getLayoutSettings).toHaveBeenCalled();
+      expect(_getLayoutSettings.calls.any()).toBe(true);
     });
 
     it("should call _getChartDisplaySettings when drawHeatmap is invoked", () => {
-      const _getChartDisplaySettings = jest.spyOn(heatmap, "_getChartDisplaySettings");
+      const _getChartDisplaySettings = spyOn<any>(heatmap, "_getChartDisplaySettings");
       heatmap.drawHeatmap();
-      expect(_getChartDisplaySettings).toHaveBeenCalled();
+      expect(_getChartDisplaySettings.calls.any()).toBe(true);
     });
 
     it("drawHeatmap should render a Heatmap inside the div element", () => {

src/Controls/Heatmap/Heatmap.ts

@@ -96,8 +96,7 @@ export class Heatmap {
     return output;
   }
 
-  // public for testing purposes
+  private _getChartSettings(): ChartSettings[] {
-  public _getChartSettings(): ChartSettings[] {
     return [
       {
         z: this._chartData.dataPoints,
@@ -132,8 +131,7 @@ export class Heatmap {
     ];
   }
 
-  // public for testing purposes
+  private _getLayoutSettings(): LayoutSettings {
-  public _getLayoutSettings(): LayoutSettings {
     return {
       margin: {
         l: 40,
@@ -179,8 +177,7 @@ export class Heatmap {
     };
   }
 
-  // public for testing purposes
+  private _getChartDisplaySettings(): DisplaySettings {
-  public _getChartDisplaySettings(): DisplaySettings {
     return {
       /* heatmap can be fully responsive however the min-height needed in that case is greater than the iframe portal height, hence explicit width + height have been set in _getLayoutSettings
       responsive: true,*/

src/Explorer/ContextMenuButtonFactory.tsx

@@ -1,4 +1,3 @@
-import { TreeNodeMenuItem } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
 import { useDatabases } from "Explorer/useDatabases";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
@@ -20,6 +19,7 @@ import { userContext } from "../UserContext";
 import { getCollectionName, getDatabaseName } from "../Utils/APITypeUtils";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { Platform, configContext } from "./../ConfigContext";
+import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
 import Explorer from "./Explorer";
 import { useNotebook } from "./Notebook/useNotebook";
 import { DeleteCollectionConfirmationPane } from "./Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane";
@@ -100,16 +100,6 @@ export const createCollectionContextMenuButton = (
     });
   }
 
-  if (useNotebook.getState().isShellEnabled && userContext.apiType === "Cassandra") {
-    items.push({
-      iconSrc: HostedTerminalIcon,
-      onClick: () => {
-        container.openNotebookTerminal(ViewModels.TerminalKind.Cassandra);
-      },
-      label: "Open Cassandra Shell",
-    });
-  }
-
   if (
     configContext.platform !== Platform.Fabric &&
     (userContext.apiType === "SQL" || userContext.apiType === "Gremlin")

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -1,4 +1,4 @@
-import { DirectionalHint, Icon, Label, Stack, TooltipHost } from "@fluentui/react";
+import { Icon, Label, Stack } from "@fluentui/react";
 import * as React from "react";
 import { NormalizedEventKey } from "../../../Common/Constants";
 import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
@@ -8,7 +8,6 @@ export interface CollapsibleSectionProps {
   isExpandedByDefault: boolean;
   onExpand?: () => void;
   children: JSX.Element;
-  tooltipContent?: string | JSX.Element | JSX.Element[];
 }
 
 export interface CollapsibleSectionState {
@@ -27,8 +26,8 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
     this.setState({ isExpanded: !this.state.isExpanded });
   };
 
-  public componentDidUpdate(_prevProps: CollapsibleSectionProps, prevState: CollapsibleSectionState): void {
+  public componentDidUpdate(): void {
-    if (!prevState.isExpanded && this.state.isExpanded && this.props.onExpand) {
+    if (this.state.isExpanded && this.props.onExpand) {
       this.props.onExpand();
     }
   }
@@ -44,7 +43,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
     return (
       <>
         <Stack
-          className={"collapsibleSection"}
+          className="collapsibleSection"
           horizontal
           verticalAlign="center"
           tokens={accordionStackTokens}
@@ -56,19 +55,6 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
         >
           <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
           <Label>{this.props.title}</Label>
-          {this.props.tooltipContent && (
-            <TooltipHost
-              directionalHint={DirectionalHint.bottomLeftEdge}
-              content={this.props.tooltipContent}
-              styles={{
-                root: {
-                  marginLeft: "0 !important",
-                },
-              }}
-            >
-              <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
-            </TooltipHost>
-          )}
         </Stack>
         {this.state.isExpanded && this.props.children}
       </>

src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`CollapsibleSectionComponent renders 1`] = `
     role="button"
     tabIndex={0}
     tokens={
-      {
+      Object {
         "childrenGap": 10,
       }
     }

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -1,7 +1,6 @@
 /**
  * React component for Command button component.
  */
-import { KeyboardAction } from "KeyboardShortcuts";
 import * as React from "react";
 import CollapseChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
 import { KeyCodes } from "../../../Common/Constants";
@@ -31,7 +30,7 @@ export interface CommandButtonComponentProps {
   /**
    * Click handler for command button click
    */
-  onCommandClick?: (e: React.SyntheticEvent | KeyboardEvent) => void;
+  onCommandClick: (e: React.SyntheticEvent) => void;
 
   /**
    * Label for the button
@@ -108,17 +107,10 @@ export interface CommandButtonComponentProps {
    * Vertical bar to divide buttons
    */
   isDivider?: boolean;
-
   /**
    * Aria-label for the button
    */
   ariaLabel: string;
-
-  /**
-   * If specified, a keyboard action that should trigger this button's onCommandClick handler when activated.
-   * If not specified, the button will not be triggerable by keyboard shortcuts.
-   */
-  keyboardAction?: KeyboardAction;
 }
 
 export class CommandButtonComponent extends React.Component<CommandButtonComponentProps> {

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -20,23 +20,14 @@ export interface EditorReactProps {
   lineDecorationsWidth?: monaco.editor.IEditorOptions["lineDecorationsWidth"];
   minimap?: monaco.editor.IEditorOptions["minimap"];
   scrollBeyondLastLine?: monaco.editor.IEditorOptions["scrollBeyondLastLine"];
-  fontSize?: monaco.editor.IEditorOptions["fontSize"];
   monacoContainerStyles?: React.CSSProperties;
-  className?: string;
-  spinnerClassName?: string;
-
-  enableWordWrapContextMenuItem?: boolean; // Enable/Disable "Word Wrap" context menu item
-  onWordWrapChanged?: (wordWrap: "on" | "off") => void; // Called when word wrap is changed
 }
 
 export class EditorReact extends React.Component<EditorReactProps, EditorReactStates> {
-  private static readonly VIEWING_OPTIONS_GROUP_ID = "viewingoptions"; // Group ID for the context menu group
   private rootNode: HTMLElement;
   private editor: monaco.editor.IStandaloneCodeEditor;
   private selectionListener: monaco.IDisposable;
 
-  private monacoEditorOptionsWordWrap: monaco.editor.EditorOption;
-
   public constructor(props: EditorReactProps) {
     super(props);
     this.state = {
@@ -84,11 +75,9 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
   public render(): JSX.Element {
     return (
       <React.Fragment>
-        {!this.state.showEditor && (
+        {!this.state.showEditor && <Spinner size={SpinnerSize.large} className="spinner" />}
-          <Spinner size={SpinnerSize.large} className={this.props.spinnerClassName || "spinner"} />
-        )}
         <div
-          className={this.props.className || "jsonEditor"}
+          className="jsonEditor"
           style={this.props.monacoContainerStyles}
           ref={(elt: HTMLElement) => this.setRef(elt)}
         />
@@ -119,23 +108,6 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
         },
       );
     }
-
-    if (this.props.enableWordWrapContextMenuItem) {
-      editor.addAction({
-        // An unique identifier of the contributed action.
-        id: "wordwrap",
-        label: "Toggle Word Wrap",
-        contextMenuGroupId: EditorReact.VIEWING_OPTIONS_GROUP_ID,
-        contextMenuOrder: 1,
-        // Method that will be executed when the action is triggered.
-        // @param editor The editor instance is passed in as a convenience
-        run: (ed) => {
-          const newOption = ed.getOption(this.monacoEditorOptionsWordWrap) === "on" ? "off" : "on";
-          ed.updateOptions({ wordWrap: newOption });
-          this.props.onWordWrapChanged(newOption);
-        },
-      });
-    }
   }
 
   /**
@@ -147,7 +119,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
       value: this.props.content,
       readOnly: this.props.isReadOnly,
       ariaLabel: this.props.ariaLabel,
-      fontSize: this.props.fontSize || 12,
+      fontSize: 12,
       automaticLayout: true,
       theme: this.props.theme,
       wordWrap: this.props.wordWrap || "off",
@@ -159,18 +131,8 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
     };
 
     this.rootNode.innerHTML = "";
-    const lazymonaco = await loadMonaco();
+    const monaco = await loadMonaco();
-
+    createCallback(monaco?.editor?.create(this.rootNode, options));
-    // We can only get this constant after loading monaco lazily
-    this.monacoEditorOptionsWordWrap = lazymonaco.editor.EditorOption.wordWrap;
-
-    try {
-      createCallback(lazymonaco?.editor?.create(this.rootNode, options));
-    } catch (error) {
-      // This could happen if the parent node suddenly disappears during create()
-      console.error("Unable to create EditorReact", error);
-      return;
-    }
 
     if (this.rootNode.innerHTML) {
       this.setState({

src/Explorer/Controls/FeaturePanel/__snapshots__/FeaturePanelComponent.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`Feature panel renders all flags 1`] = `
   <Stack
     className="options"
     tokens={
-      {
+      Object {
         "childrenGap": 10,
       }
     }
@@ -27,7 +27,7 @@ exports[`Feature panel renders all flags 1`] = `
       horizontal={true}
       horizontalAlign="space-between"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -52,7 +52,7 @@ exports[`Feature panel renders all flags 1`] = `
       horizontal={true}
       horizontalAlign="start"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -61,16 +61,16 @@ exports[`Feature panel renders all flags 1`] = `
         label="Base Url"
         onChange={[Function]}
         options={
-          [
+          Array [
-            {
+            Object {
               "key": "https://localhost:1234/explorer.html",
               "text": "localhost:1234",
             },
-            {
+            Object {
               "key": "https://cosmos.azure.com/explorer.html",
               "text": "cosmos.azure.com",
             },
-            {
+            Object {
               "key": "https://portal.azure.com",
               "text": "portal",
             },
@@ -78,8 +78,8 @@ exports[`Feature panel renders all flags 1`] = `
         }
         selectedKey="https://localhost:1234/explorer.html"
         styles={
-          {
+          Object {
-            "dropdown": {
+            "dropdown": Object {
               "width": 200,
             },
           }
@@ -89,20 +89,20 @@ exports[`Feature panel renders all flags 1`] = `
         label="Platform"
         onChange={[Function]}
         options={
-          [
+          Array [
-            {
+            Object {
               "key": "Hosted",
               "text": "Hosted",
             },
-            {
+            Object {
               "key": "Portal",
               "text": "Portal",
             },
-            {
+            Object {
               "key": "Emulator",
               "text": "Emulator",
             },
-            {
+            Object {
               "key": "",
               "text": "None",
             },
@@ -110,8 +110,8 @@ exports[`Feature panel renders all flags 1`] = `
         }
         selectedKey="Hosted"
         styles={
-          {
+          Object {
-            "dropdown": {
+            "dropdown": Object {
               "width": 200,
             },
           }
@@ -208,7 +208,7 @@ exports[`Feature panel renders all flags 1`] = `
     <Stack
       horizontal={true}
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -222,8 +222,8 @@ exports[`Feature panel renders all flags 1`] = `
           onChange={[Function]}
           placeholder="https://notebookserver"
           styles={
-            {
+            Object {
-              "fieldGroup": {
+              "fieldGroup": Object {
                 "width": 300,
               },
             }
@@ -235,8 +235,8 @@ exports[`Feature panel renders all flags 1`] = `
           onChange={[Function]}
           placeholder=""
           styles={
-            {
+            Object {
-              "fieldGroup": {
+              "fieldGroup": Object {
                 "width": 300,
               },
             }
@@ -248,8 +248,8 @@ exports[`Feature panel renders all flags 1`] = `
           onChange={[Function]}
           placeholder=""
           styles={
-            {
+            Object {
-              "fieldGroup": {
+              "fieldGroup": Object {
                 "width": 300,
               },
             }
@@ -265,8 +265,8 @@ exports[`Feature panel renders all flags 1`] = `
           onChange={[Function]}
           placeholder=""
           styles={
-            {
+            Object {
-              "fieldGroup": {
+              "fieldGroup": Object {
                 "width": 300,
               },
             }
@@ -279,8 +279,8 @@ exports[`Feature panel renders all flags 1`] = `
           onChange={[Function]}
           placeholder="https://localhost:1234/explorer.html"
           styles={
-            {
+            Object {
-              "fieldGroup": {
+              "fieldGroup": Object {
                 "width": 300,
               },
             }
@@ -292,8 +292,8 @@ exports[`Feature panel renders all flags 1`] = `
           onChange={[Function]}
           placeholder=""
           styles={
-            {
+            Object {
-              "fieldGroup": {
+              "fieldGroup": Object {
                 "width": 300,
               },
             }

src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap

@@ -4,8 +4,8 @@ exports[`GalleryCardComponent renders 1`] = `
 <StyledDocumentCardBase
   aria-label="name"
   styles={
-    {
+    Object {
-      "root": {
+      "root": Object {
         "display": "inline-block",
         "marginRight": 20,
         "width": 256,
@@ -16,8 +16,8 @@ exports[`GalleryCardComponent renders 1`] = `
   <StyledDocumentCardActivityBase
     activity="Invalid Date"
     people={
-      [
+      Array [
-        {
+        Object {
           "name": "author",
           "profileImageSrc": false,
         },
@@ -26,8 +26,8 @@ exports[`GalleryCardComponent renders 1`] = `
   />
   <StyledDocumentCardPreviewBase
     previewImages={
-      [
+      Array [
-        {
+        Object {
           "height": 144,
           "imageFit": 2,
           "previewImageSrc": "thumbnailUrl",
@@ -40,8 +40,8 @@ exports[`GalleryCardComponent renders 1`] = `
     <Text
       nowrap={true}
       styles={
-        {
+        Object {
-          "root": {
+          "root": Object {
             "height": 18,
             "padding": "2px 16px",
           },
@@ -69,15 +69,15 @@ exports[`GalleryCardComponent renders 1`] = `
     />
     <span
       style={
-        {
+        Object {
           "padding": "8px 16px",
         }
       }
     >
       <Text
         styles={
-          {
+          Object {
-            "root": {
+            "root": Object {
               "color": "#605E5C",
               "paddingRight": 8,
             },
@@ -88,8 +88,8 @@ exports[`GalleryCardComponent renders 1`] = `
         <Icon
           iconName="RedEye"
           styles={
-            {
+            Object {
-              "root": {
+              "root": Object {
                 "verticalAlign": "middle",
               },
             }
@@ -100,8 +100,8 @@ exports[`GalleryCardComponent renders 1`] = `
       </Text>
       <Text
         styles={
-          {
+          Object {
-            "root": {
+            "root": Object {
               "color": "#605E5C",
               "paddingRight": 8,
             },
@@ -112,8 +112,8 @@ exports[`GalleryCardComponent renders 1`] = `
         <Icon
           iconName="Download"
           styles={
-            {
+            Object {
-              "root": {
+              "root": Object {
                 "verticalAlign": "middle",
               },
             }
@@ -124,8 +124,8 @@ exports[`GalleryCardComponent renders 1`] = `
       </Text>
       <Text
         styles={
-          {
+          Object {
-            "root": {
+            "root": Object {
               "color": "#605E5C",
               "paddingRight": 8,
             },
@@ -136,8 +136,8 @@ exports[`GalleryCardComponent renders 1`] = `
         <Icon
           iconName="Heart"
           styles={
-            {
+            Object {
-              "root": {
+              "root": Object {
                 "verticalAlign": "middle",
               },
             }
@@ -151,8 +151,8 @@ exports[`GalleryCardComponent renders 1`] = `
   <StyledDocumentCardDetailsBase>
     <Separator
       styles={
-        {
+        Object {
-          "root": {
+          "root": Object {
             "height": 1,
             "padding": 0,
           },
@@ -161,22 +161,22 @@ exports[`GalleryCardComponent renders 1`] = `
     />
     <span
       style={
-        {
+        Object {
           "padding": "0px 16px",
         }
       }
     >
       <StyledTooltipHostBase
         calloutProps={
-          {
+          Object {
             "gapSpace": 0,
           }
         }
         content="Favorite"
         id="TooltipHost-IconButton-Heart"
         styles={
-          {
+          Object {
-            "root": {
+            "root": Object {
               "display": "inline-block",
               "float": "left",
             },
@@ -186,7 +186,7 @@ exports[`GalleryCardComponent renders 1`] = `
         <CustomizedIconButton
           ariaLabel="Favorite"
           iconProps={
-            {
+            Object {
               "iconName": "Heart",
             }
           }
@@ -196,15 +196,15 @@ exports[`GalleryCardComponent renders 1`] = `
       </StyledTooltipHostBase>
       <StyledTooltipHostBase
         calloutProps={
-          {
+          Object {
             "gapSpace": 0,
           }
         }
         content="Download"
         id="TooltipHost-IconButton-Download"
         styles={
-          {
+          Object {
-            "root": {
+            "root": Object {
               "display": "inline-block",
               "float": "left",
             },
@@ -214,7 +214,7 @@ exports[`GalleryCardComponent renders 1`] = `
         <CustomizedIconButton
           ariaLabel="Download"
           iconProps={
-            {
+            Object {
               "iconName": "Download",
             }
           }
@@ -224,15 +224,15 @@ exports[`GalleryCardComponent renders 1`] = `
       </StyledTooltipHostBase>
       <StyledTooltipHostBase
         calloutProps={
-          {
+          Object {
             "gapSpace": 0,
           }
         }
         content="Remove"
         id="TooltipHost-IconButton-Delete"
         styles={
-          {
+          Object {
-            "root": {
+            "root": Object {
               "display": "inline-block",
               "float": "right",
             },
@@ -242,7 +242,7 @@ exports[`GalleryCardComponent renders 1`] = `
         <CustomizedIconButton
           ariaLabel="Remove"
           iconProps={
-            {
+            Object {
               "iconName": "Delete",
             }
           }

src/Explorer/Controls/NotebookGallery/CodeOfConduct/__snapshots__/CodeOfConduct.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CodeOfConduct renders 1`] = `
 <Stack
   tokens={
-    {
+    Object {
       "childrenGap": 20,
     }
   }
@@ -11,7 +11,7 @@ exports[`CodeOfConduct renders 1`] = `
   <StackItem>
     <Text
       style={
-        {
+        Object {
           "fontSize": "20px",
           "fontWeight": 500,
         }
@@ -41,12 +41,12 @@ exports[`CodeOfConduct renders 1`] = `
       label="I have read and accept the code of conduct."
       onChange={[Function]}
       styles={
-        {
+        Object {
-          "label": {
+          "label": Object {
             "margin": 0,
             "padding": "2 0 2 0",
           },
-          "text": {
+          "text": Object {
             "fontSize": 12,
           },
         }

src/Explorer/Controls/NotebookGallery/InfoComponent/__snapshots__/InfoComponent.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`InfoComponent renders 1`] = `
 <StyledHoverCardBase
   instantOpenOnClick={true}
   plainCardProps={
-    {
+    Object {
       "onRenderPlainCard": [Function],
     }
   }
@@ -18,8 +18,8 @@ exports[`InfoComponent renders 1`] = `
       className="infoIconMain"
       iconName="Help"
       styles={
-        {
+        Object {
-          "root": {
+          "root": Object {
             "verticalAlign": "middle",
           },
         }

src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap

@@ -13,14 +13,14 @@ exports[`GalleryViewerComponent renders 1`] = `
       itemKey="OfficialSamples"
       key="OfficialSamples"
       style={
-        {
+        Object {
           "marginTop": 20,
         }
       }
     >
       <Stack
         tokens={
-          {
+          Object {
             "childrenGap": 10,
           }
         }
@@ -28,7 +28,7 @@ exports[`GalleryViewerComponent renders 1`] = `
         <Stack
           horizontal={true}
           tokens={
-            {
+            Object {
               "childrenGap": 20,
               "padding": 10,
             }
@@ -50,8 +50,8 @@ exports[`GalleryViewerComponent renders 1`] = `
           </StackItem>
           <StackItem
             styles={
-              {
+              Object {
-                "root": {
+                "root": Object {
                   "minWidth": 200,
                 },
               }
@@ -60,20 +60,20 @@ exports[`GalleryViewerComponent renders 1`] = `
             <Dropdown
               onChange={[Function]}
               options={
-                [
+                Array [
-                  {
+                  Object {
                     "key": 0,
                     "text": "Most viewed",
                   },
-                  {
+                  Object {
                     "key": 1,
                     "text": "Most downloaded",
                   },
-                  {
+                  Object {
                     "key": 3,
                     "text": "Most recent",
                   },
-                  {
+                  Object {
                     "key": 2,
                     "text": "Most favorited",
                   },

src/Explorer/Controls/NotebookViewer/__snapshots__/NotebookMetadataComponent.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`NotebookMetadataComponent renders liked notebook 1`] = `
 <Stack
   tokens={
-    {
+    Object {
       "childrenGap": 10,
     }
   }
@@ -11,7 +11,7 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
   <Stack
     horizontal={true}
     tokens={
-      {
+      Object {
         "childrenGap": 30,
       }
     }
@@ -29,7 +29,7 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
       <Text>
         <CustomizedIconButton
           iconProps={
-            {
+            Object {
               "iconName": "HeartFill",
             }
           }
@@ -53,7 +53,7 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
   <Stack
     horizontal={true}
     tokens={
-      {
+      Object {
         "childrenGap": 10,
       }
     }
@@ -96,8 +96,8 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
   </Text>
   <Text
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "fontWeight": 600,
         },
       }
@@ -115,7 +115,7 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
 exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
 <Stack
   tokens={
-    {
+    Object {
       "childrenGap": 10,
     }
   }
@@ -123,7 +123,7 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
   <Stack
     horizontal={true}
     tokens={
-      {
+      Object {
         "childrenGap": 30,
       }
     }
@@ -141,7 +141,7 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
       <Text>
         <CustomizedIconButton
           iconProps={
-            {
+            Object {
               "iconName": "Heart",
             }
           }
@@ -165,7 +165,7 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
   <Stack
     horizontal={true}
     tokens={
-      {
+      Object {
         "childrenGap": 10,
       }
     }
@@ -208,8 +208,8 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
   </Text>
   <Text
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "fontWeight": 600,
         },
       }

src/Explorer/Controls/Settings/SettingsComponent.less

@@ -7,14 +7,14 @@
 }
 
 .settingsV2ToolTip {
-  padding: 10px;
+    padding: 10px;
-  font: 12px @DataExplorerFont;
+    font: 12px @DataExplorerFont;
-  max-width: 300px;
+    max-width: 300px;
 }
 
 .autoPilotSelector span {
-  height: 25px;
+    height: 25px;
-  font: 14px @DataExplorerFont;
+    font: 14px @DataExplorerFont;
 }
 
 .settingsV2TabsContainer {
@@ -25,14 +25,7 @@
   font-family: @DataExplorerFont;
 }
 
-.settingsV2Editor {
+.settingsV2IndexingPolicyEditor {
   width: 100%;
   height: 60vh;
-}
+}
-
-.settingsV2EditorSpinner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -3,12 +3,7 @@ import {
   ComputedPropertiesComponent,
   ComputedPropertiesComponentProps,
 } from "Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent";
-import {
-  ContainerVectorPolicyComponent,
-  ContainerVectorPolicyComponentProps,
-} from "Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent";
 import { useDatabases } from "Explorer/useDatabases";
-import { isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { isRunningOnPublicCloud } from "Utils/CloudUtils";
 import * as React from "react";
 import DiscardIcon from "../../../../images/discard.svg";
@@ -149,7 +144,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private shouldShowComputedPropertiesEditor: boolean;
   private shouldShowIndexingPolicyEditor: boolean;
   private shouldShowPartitionKeyEditor: boolean;
-  private isVectorSearchEnabled: boolean;
   private totalThroughputUsed: number;
   public mongoDBCollectionResource: MongoDBCollectionResource;
 
@@ -164,7 +158,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.shouldShowComputedPropertiesEditor = userContext.apiType === "SQL";
       this.shouldShowIndexingPolicyEditor = userContext.apiType !== "Cassandra" && userContext.apiType !== "Mongo";
       this.shouldShowPartitionKeyEditor = userContext.apiType === "SQL" && isRunningOnPublicCloud();
-      this.isVectorSearchEnabled = isVectorSearchEnabled() && !hasDatabaseSharedThroughput(this.collection);
 
       this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
 
@@ -1104,7 +1097,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       indexTransformationProgress: this.state.indexTransformationProgress,
       refreshIndexTransformationProgress: this.refreshIndexTransformationProgress,
       onIndexingPolicyDirtyChange: this.onIndexingPolicyDirtyChange,
-      isVectorSearchEnabled: this.isVectorSearchEnabled,
     };
 
     const mongoIndexingPolicyComponentProps: MongoIndexingPolicyComponentProps = {
@@ -1151,10 +1143,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       explorer: this.props.settingsTab.getContainer(),
     };
 
-    const containerVectorPolicyProps: ContainerVectorPolicyComponentProps = {
-      vectorEmbeddingPolicy: this.collection.rawDataModel?.vectorEmbeddingPolicy,
-    };
-
     const tabs: SettingsV2TabInfo[] = [];
     if (!hasDatabaseSharedThroughput(this.collection) && this.offer) {
       tabs.push({
@@ -1168,13 +1156,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       content: <SubSettingsComponent {...subSettingsComponentProps} />,
     });
 
-    if (this.isVectorSearchEnabled) {
-      tabs.push({
-        tab: SettingsV2TabTypes.ContainerVectorPolicyTab,
-        content: <ContainerVectorPolicyComponent {...containerVectorPolicyProps} />,
-      });
-    }
-
     if (this.shouldShowIndexingPolicyEditor) {
       tabs.push({
         tab: SettingsV2TabTypes.IndexingPolicyTab,

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

@@ -121,7 +121,7 @@ export class ComputedPropertiesComponent extends React.Component<
           </Link>
           &#160; about how to define computed properties and how to use them.
         </Text>
-        <div className="settingsV2Editor" tabIndex={0} ref={this.computedPropertiesDiv}></div>
+        <div className="settingsV2IndexingPolicyEditor" tabIndex={0} ref={this.computedPropertiesDiv}></div>
       </Stack>
     );
   }

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

@@ -1,30 +0,0 @@
-import { Stack } from "@fluentui/react";
-import { VectorEmbeddingPolicy } from "Contracts/DataModels";
-import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
-import { titleAndInputStackProps } from "Explorer/Controls/Settings/SettingsRenderUtils";
-import React from "react";
-
-export interface ContainerVectorPolicyComponentProps {
-  vectorEmbeddingPolicy: VectorEmbeddingPolicy;
-}
-
-export const ContainerVectorPolicyComponent: React.FC<ContainerVectorPolicyComponentProps> = ({
-  vectorEmbeddingPolicy,
-}) => {
-  return (
-    <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative" } }}>
-      <EditorReact
-        language={"json"}
-        content={JSON.stringify(vectorEmbeddingPolicy || {}, null, 4)}
-        isReadOnly={true}
-        wordWrap={"on"}
-        ariaLabel={"Container vector policy"}
-        lineNumbers={"on"}
-        scrollBeyondLastLine={false}
-        className={"settingsV2Editor"}
-        spinnerClassName={"settingsV2EditorSpinner"}
-        fontSize={14}
-      />
-    </Stack>
-  );
-};

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

@@ -16,7 +16,6 @@ export interface IndexingPolicyComponentProps {
   logIndexingPolicySuccessMessage: () => void;
   indexTransformationProgress: number;
   refreshIndexTransformationProgress: () => Promise<void>;
-  isVectorSearchEnabled?: boolean;
   onIndexingPolicyDirtyChange: (isIndexingPolicyDirty: boolean) => void;
 }
 
@@ -120,15 +119,10 @@ export class IndexingPolicyComponent extends React.Component<
           indexTransformationProgress={this.props.indexTransformationProgress}
           refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
         />
-        {this.props.isVectorSearchEnabled && (
-          <MessageBar messageBarType={MessageBarType.severeWarning}>
-            Container vector policies and vector indexes are not modifiable after container creation
-          </MessageBar>
-        )}
         {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
           <MessageBar messageBarType={MessageBarType.warning}>{unsavedEditorWarningMessage("indexPolicy")}</MessageBar>
         )}
-        <div className="settingsV2Editor" tabIndex={0} ref={this.indexingPolicyDiv}></div>
+        <div className="settingsV2IndexingPolicyEditor" tabIndex={0} ref={this.indexingPolicyDiv}></div>
       </Stack>
     );
   }

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap

@@ -6,8 +6,8 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
 >
   <Text
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "color": "windowtext",
           "fontSize": 14,
         },

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`AddMongoIndexComponent renders 1`] = `
 <Stack
   tokens={
-    {
+    Object {
       "childrenGap": 5,
     }
   }
@@ -11,7 +11,7 @@ exports[`AddMongoIndexComponent renders 1`] = `
   <Stack
     horizontal={true}
     tokens={
-      {
+      Object {
         "childrenGap": 20,
       }
     }
@@ -21,8 +21,8 @@ exports[`AddMongoIndexComponent renders 1`] = `
       componentRef={[Function]}
       onChange={[Function]}
       styles={
-        {
+        Object {
-          "root": {
+          "root": Object {
             "paddingLeft": 10,
             "width": 210,
           },
@@ -34,12 +34,12 @@ exports[`AddMongoIndexComponent renders 1`] = `
       ariaLabel="Index Type 1"
       onChange={[Function]}
       options={
-        [
+        Array [
-          {
+          Object {
             "key": "Single",
             "text": "Single Field",
           },
-          {
+          Object {
             "key": "Wildcard",
             "text": "Wildcard",
           },
@@ -48,8 +48,8 @@ exports[`AddMongoIndexComponent renders 1`] = `
       placeholder="Select an index type"
       selectedKey="Single"
       styles={
-        {
+        Object {
-          "dropdown": {
+          "dropdown": Object {
             "paddingleft": 10,
             "width": 202,
           },
@@ -60,7 +60,7 @@ exports[`AddMongoIndexComponent renders 1`] = `
       ariaLabel="Undo Button 1"
       disabled={false}
       iconProps={
-        {
+        Object {
           "iconName": "Undo",
         }
       }
@@ -70,8 +70,8 @@ exports[`AddMongoIndexComponent renders 1`] = `
   <StyledMessageBar
     messageBarType={1}
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "marginLeft": 10,
         },
       }

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`MongoIndexingPolicyComponent error shown for collection with compound i
 exports[`MongoIndexingPolicyComponent renders 1`] = `
 <Stack
   tokens={
-    {
+    Object {
       "childrenGap": 20,
     }
   }
@@ -29,14 +29,14 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
   </Text>
   <Stack
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "width": 600,
         },
       }
     }
     tokens={
-      {
+      Object {
         "childrenGap": 5,
       }
     }
@@ -47,8 +47,8 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
     >
       <StyledWithViewportComponent
         columns={
-          [
+          Array [
-            {
+            Object {
               "fieldName": "definition",
               "isResizable": true,
               "key": "definition",
@@ -56,7 +56,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
               "minWidth": 100,
               "name": "Definition",
             },
-            {
+            Object {
               "fieldName": "type",
               "isResizable": true,
               "key": "type",
@@ -64,7 +64,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
               "minWidth": 100,
               "name": "Type",
             },
-            {
+            Object {
               "fieldName": "actionButton",
               "isResizable": true,
               "key": "actionButton",
@@ -75,15 +75,15 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
           ]
         }
         disableSelectionZone={true}
-        items={[]}
+        items={Array []}
         layoutMode={1}
         onRenderRow={[Function]}
         selectionMode={0}
         styles={
-          {
+          Object {
-            "root": {
+            "root": Object {
-              "selectors": {
+              "selectors": Object {
-                ".ms-FocusZone": {
+                ".ms-FocusZone": Object {
                   "paddingTop": 0,
                 },
               },
@@ -93,14 +93,14 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
       />
       <Stack
         styles={
-          {
+          Object {
-            "root": {
+            "root": Object {
               "width": 600,
             },
           }
         }
         tokens={
-          {
+          Object {
             "childrenGap": 10,
           }
         }
@@ -117,11 +117,11 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
   </Stack>
   <Separator
     styles={
-      {
+      Object {
-        "root": [
+        "root": Array [
-          {
+          Object {
-            "selectors": {
+            "selectors": Object {
-              "::before": {
+              "::before": Object {
                 "background": undefined,
               },
             },
@@ -132,8 +132,8 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
   />
   <Stack
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "width": 600,
         },
       }

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

@@ -47,7 +47,7 @@ describe("ScaleComponent", () => {
     expect(wrapper.exists(ThroughputInputAutoPilotV3Component)).toEqual(true);
     expect(wrapper.exists("#throughputApplyLongDelayMessage")).toEqual(true);
     expect(wrapper.exists("#throughputApplyShortDelayMessage")).toEqual(false);
-    expect(wrapper.find("#throughputApplyLongDelayMessage").html()).toContain(`${targetThroughput}`);
+    expect(wrapper.find("#throughputApplyLongDelayMessage").html()).toContain(targetThroughput);
 
     const newCollection = { ...collection };
     const maxThroughput = 5000;
@@ -66,7 +66,7 @@ describe("ScaleComponent", () => {
     wrapper = shallow(<ScaleComponent {...newProps} />);
     expect(wrapper.exists("#throughputApplyShortDelayMessage")).toEqual(true);
     expect(wrapper.exists("#throughputApplyLongDelayMessage")).toEqual(false);
-    expect(wrapper.find("#throughputApplyShortDelayMessage").html()).toContain(`${maxThroughput}`);
+    expect(wrapper.find("#throughputApplyShortDelayMessage").html()).toContain(maxThroughput);
   });
 
   it("autoScale disabled", () => {

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap

@@ -3,14 +3,14 @@
 exports[`ComputedPropertiesComponent renders 1`] = `
 <Stack
   tokens={
-    {
+    Object {
       "childrenGap": 5,
     }
   }
 >
   <Text
     style={
-      {
+      Object {
         "marginBottom": "10px",
         "marginLeft": "30px",
       }
@@ -29,7 +29,7 @@ exports[`ComputedPropertiesComponent renders 1`] = `
       about how to define computed properties and how to use them.
   </Text>
   <div
-    className="settingsV2Editor"
+    className="settingsV2IndexingPolicyEditor"
     tabIndex={0}
   />
 </Stack>

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

@@ -3,7 +3,7 @@
 exports[`ConflictResolutionComponent Path text field displayed 1`] = `
 <Stack
   tokens={
-    {
+    Object {
       "childrenGap": 20,
     }
   }
@@ -12,12 +12,12 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
     label="Mode"
     onChange={[Function]}
     options={
-      [
+      Array [
-        {
+        Object {
           "key": "LastWriterWins",
           "text": "Last Write Wins (default)",
         },
-        {
+        Object {
           "key": "Custom",
           "text": "Merge Procedure (custom)",
         },
@@ -25,19 +25,19 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
     }
     selectedKey="LastWriterWins"
     styles={
-      {
+      Object {
-        "flexContainer": [
+        "flexContainer": Array [
-          {
+          Object {
             "columnGap": "default",
             "display": "default",
-            "selectors": {
+            "selectors": Object {
-              ".ms-ChoiceField-field.is-checked::after": {
+              ".ms-ChoiceField-field.is-checked::after": Object {
                 "borderColor": undefined,
               },
-              ".ms-ChoiceField-field.is-checked::before": {
+              ".ms-ChoiceField-field.is-checked::before": Object {
                 "borderColor": undefined,
               },
-              ".ms-ChoiceField-wrapper label": {
+              ".ms-ChoiceField-wrapper label": Object {
                 "fontFamily": undefined,
                 "fontSize": 14,
                 "padding": "2px 5px",
@@ -55,12 +55,12 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
     onChange={[Function]}
     onRenderLabel={[Function]}
     styles={
-      {
+      Object {
-        "fieldGroup": {
+        "fieldGroup": Object {
           "borderColor": "",
           "height": 25,
-          "selectors": {
+          "selectors": Object {
-            ":disabled": {
+            ":disabled": Object {
               "backgroundColor": undefined,
               "borderColor": undefined,
             },
@@ -77,7 +77,7 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
 exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
 <Stack
   tokens={
-    {
+    Object {
       "childrenGap": 20,
     }
   }
@@ -86,12 +86,12 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
     label="Mode"
     onChange={[Function]}
     options={
-      [
+      Array [
-        {
+        Object {
           "key": "LastWriterWins",
           "text": "Last Write Wins (default)",
         },
-        {
+        Object {
           "key": "Custom",
           "text": "Merge Procedure (custom)",
         },
@@ -99,19 +99,19 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
     }
     selectedKey="Custom"
     styles={
-      {
+      Object {
-        "flexContainer": [
+        "flexContainer": Array [
-          {
+          Object {
             "columnGap": "default",
             "display": "default",
-            "selectors": {
+            "selectors": Object {
-              ".ms-ChoiceField-field.is-checked::after": {
+              ".ms-ChoiceField-field.is-checked::after": Object {
                 "borderColor": "",
               },
-              ".ms-ChoiceField-field.is-checked::before": {
+              ".ms-ChoiceField-field.is-checked::before": Object {
                 "borderColor": "",
               },
-              ".ms-ChoiceField-wrapper label": {
+              ".ms-ChoiceField-wrapper label": Object {
                 "fontFamily": undefined,
                 "fontSize": 14,
                 "padding": "2px 5px",
@@ -129,12 +129,12 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
     onChange={[Function]}
     onRenderLabel={[Function]}
     styles={
-      {
+      Object {
-        "fieldGroup": {
+        "fieldGroup": Object {
           "borderColor": "",
           "height": 25,
-          "selectors": {
+          "selectors": Object {
-            ":disabled": {
+            ":disabled": Object {
               "backgroundColor": undefined,
               "borderColor": undefined,
             },

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`IndexingPolicyComponent renders 1`] = `
 <Stack
   tokens={
-    {
+    Object {
       "childrenGap": 5,
     }
   }
@@ -12,7 +12,7 @@ exports[`IndexingPolicyComponent renders 1`] = `
     refreshIndexTransformationProgress={[Function]}
   />
   <div
-    className="settingsV2Editor"
+    className="settingsV2IndexingPolicyEditor"
     tabIndex={0}
   />
 </Stack>

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

@@ -3,7 +3,7 @@
 exports[`ScaleComponent renders with correct initial notification 1`] = `
 <Stack
   tokens={
-    {
+    Object {
       "childrenGap": 20,
     }
   }
@@ -14,8 +14,8 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
     <Text
       id="throughputApplyLongDelayMessage"
       styles={
-        {
+        Object {
-          "root": {
+          "root": Object {
             "color": "windowtext",
             "fontSize": 14,
           },
@@ -30,7 +30,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
   </StyledMessageBar>
   <Stack
     tokens={
-      {
+      Object {
         "childrenGap": 20,
       }
     }

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
   <Stack
     horizontal={true}
     tokens={
-      {
+      Object {
         "childrenGap": 6,
       }
     }
@@ -13,7 +13,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
   >
     <Text
       style={
-        {
+        Object {
           "fontWeight": 600,
         }
       }
@@ -22,7 +22,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
     </Text>
     <StyledTooltipHostBase
       calloutProps={
-        {
+        Object {
           "gapSpace": 0,
         }
       }
@@ -33,8 +33,8 @@ exports[`ToolTipLabelComponent renders 1`] = `
       }
       directionalHint={12}
       styles={
-        {
+        Object {
-          "root": {
+          "root": Object {
             "display": "inline-block",
             "float": "right",
           },
@@ -45,8 +45,8 @@ exports[`ToolTipLabelComponent renders 1`] = `
         ariaLabel="Info"
         iconName="Info"
         styles={
-          {
+          Object {
-            "root": {
+            "root": Object {
               "marginBottom": -3,
             },
           }

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -47,7 +47,6 @@ export enum SettingsV2TabTypes {
   IndexingPolicyTab,
   PartitionKeyTab,
   ComputedPropertiesTab,
-  ContainerVectorPolicyTab,
 }
 
 export interface IsComponentDirtyResult {
@@ -152,9 +151,7 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
     case SettingsV2TabTypes.PartitionKeyTab:
       return "Partition Keys (preview)";
     case SettingsV2TabTypes.ComputedPropertiesTab:
-      return "Computed Properties";
+      return "Computed Properties (preview)";
-    case SettingsV2TabTypes.ContainerVectorPolicyTab:
-      return "Container Vector Policy (preview)";
     default:
       throw new Error(`Unknown tab ${tab}`);
   }

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

@@ -16,27 +16,28 @@ exports[`SettingsComponent renders 1`] = `
         itemKey="ScaleTab"
         key="ScaleTab"
         style={
-          {
+          Object {
             "marginTop": 20,
           }
         }
       >
         <ScaleComponent
           collection={
-            {
+            Object {
               "analyticalStorageTtl": [Function],
               "changeFeedPolicy": [Function],
               "computedProperties": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
                 "_isInitializingNotebooks": false,
+                "_resetNotebookWorkspace": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
                 "phoenixClient": PhoenixClient {
                   "armResourceId": undefined,
-                  "retryOptions": {
+                  "retryOptions": Object {
                     "maxTimeout": 5000,
                     "minTimeout": 5000,
                     "retries": 3,
@@ -60,16 +61,16 @@ exports[`SettingsComponent renders 1`] = `
               "id": [Function],
               "indexingPolicy": [Function],
               "offer": [Function],
-              "partitionKey": {
+              "partitionKey": Object {
                 "kind": "hash",
-                "paths": [],
+                "paths": Array [],
                 "version": 2,
               },
-              "partitionKeyProperties": [
+              "partitionKeyProperties": Array [
                 "partitionKey",
               ],
               "readSettings": [Function],
-              "uniqueKeyPolicy": {},
+              "uniqueKeyPolicy": Object {},
               "usageSizeInKB": [Function],
             }
           }
@@ -90,7 +91,7 @@ exports[`SettingsComponent renders 1`] = `
         itemKey="SubSettingsTab"
         key="SubSettingsTab"
         style={
-          {
+          Object {
             "marginTop": 20,
           }
         }
@@ -100,20 +101,21 @@ exports[`SettingsComponent renders 1`] = `
           changeFeedPolicyBaseline="Off"
           changeFeedPolicyVisible={false}
           collection={
-            {
+            Object {
               "analyticalStorageTtl": [Function],
               "changeFeedPolicy": [Function],
               "computedProperties": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
                 "_isInitializingNotebooks": false,
+                "_resetNotebookWorkspace": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
                 "phoenixClient": PhoenixClient {
                   "armResourceId": undefined,
-                  "retryOptions": {
+                  "retryOptions": Object {
                     "maxTimeout": 5000,
                     "minTimeout": 5000,
                     "retries": 3,
@@ -137,16 +139,16 @@ exports[`SettingsComponent renders 1`] = `
               "id": [Function],
               "indexingPolicy": [Function],
               "offer": [Function],
-              "partitionKey": {
+              "partitionKey": Object {
                 "kind": "hash",
-                "paths": [],
+                "paths": Array [],
                 "version": 2,
               },
-              "partitionKeyProperties": [
+              "partitionKeyProperties": Array [
                 "partitionKey",
               ],
               "readSettings": [Function],
-              "uniqueKeyPolicy": {},
+              "uniqueKeyPolicy": Object {},
               "usageSizeInKB": [Function],
             }
           }
@@ -174,29 +176,28 @@ exports[`SettingsComponent renders 1`] = `
         itemKey="IndexingPolicyTab"
         key="IndexingPolicyTab"
         style={
-          {
+          Object {
             "marginTop": 20,
           }
         }
       >
         <IndexingPolicyComponent
           indexingPolicyContent={
-            {
+            Object {
               "automatic": true,
-              "excludedPaths": [],
+              "excludedPaths": Array [],
-              "includedPaths": [],
+              "includedPaths": Array [],
               "indexingMode": "consistent",
             }
           }
           indexingPolicyContentBaseline={
-            {
+            Object {
               "automatic": true,
-              "excludedPaths": [],
+              "excludedPaths": Array [],
-              "includedPaths": [],
+              "includedPaths": Array [],
               "indexingMode": "consistent",
             }
           }
-          isVectorSearchEnabled={false}
           logIndexingPolicySuccessMessage={[Function]}
           onIndexingPolicyContentChange={[Function]}
           onIndexingPolicyDirtyChange={[Function]}
@@ -210,27 +211,28 @@ exports[`SettingsComponent renders 1`] = `
         itemKey="PartitionKeyTab"
         key="PartitionKeyTab"
         style={
-          {
+          Object {
             "marginTop": 20,
           }
         }
       >
         <PartitionKeyComponent
           collection={
-            {
+            Object {
               "analyticalStorageTtl": [Function],
               "changeFeedPolicy": [Function],
               "computedProperties": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
                 "_isInitializingNotebooks": false,
+                "_resetNotebookWorkspace": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
                 "phoenixClient": PhoenixClient {
                   "armResourceId": undefined,
-                  "retryOptions": {
+                  "retryOptions": Object {
                     "maxTimeout": 5000,
                     "minTimeout": 5000,
                     "retries": 3,
@@ -254,29 +256,30 @@ exports[`SettingsComponent renders 1`] = `
               "id": [Function],
               "indexingPolicy": [Function],
               "offer": [Function],
-              "partitionKey": {
+              "partitionKey": Object {
                 "kind": "hash",
-                "paths": [],
+                "paths": Array [],
                 "version": 2,
               },
-              "partitionKeyProperties": [
+              "partitionKeyProperties": Array [
                 "partitionKey",
               ],
               "readSettings": [Function],
-              "uniqueKeyPolicy": {},
+              "uniqueKeyPolicy": Object {},
               "usageSizeInKB": [Function],
             }
           }
           explorer={
             Explorer {
               "_isInitializingNotebooks": false,
+              "_resetNotebookWorkspace": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
               "isTabsContentExpanded": [Function],
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
               "phoenixClient": PhoenixClient {
                 "armResourceId": undefined,
-                "retryOptions": {
+                "retryOptions": Object {
                   "maxTimeout": 5000,
                   "minTimeout": 5000,
                   "retries": 3,
@@ -297,27 +300,27 @@ exports[`SettingsComponent renders 1`] = `
         />
       </PivotItem>
       <PivotItem
-        headerText="Computed Properties"
+        headerText="Computed Properties (preview)"
         itemKey="ComputedPropertiesTab"
         key="ComputedPropertiesTab"
         style={
-          {
+          Object {
             "marginTop": 20,
           }
         }
       >
         <ComputedPropertiesComponent
           computedPropertiesContent={
-            [
+            Array [
-              {
+              Object {
                 "name": "queryName",
                 "query": "query",
               },
             ]
           }
           computedPropertiesContentBaseline={
-            [
+            Array [
-              {
+              Object {
                 "name": "queryName",
                 "query": "query",
               },

src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`SettingsUtils functions render 1`] = `
   <Stack>
     <Text
       style={
-        {
+        Object {
           "fontWeight": 600,
         }
       }
@@ -14,7 +14,7 @@ exports[`SettingsUtils functions render 1`] = `
     </Text>
     <Text
       style={
-        {
+        Object {
           "fontWeight": 600,
           "marginTop": 15,
         }
@@ -25,7 +25,7 @@ exports[`SettingsUtils functions render 1`] = `
     <Stack
       id="throughputSpendElement"
       style={
-        {
+        Object {
           "marginTop": 5,
         }
       }
@@ -49,7 +49,7 @@ exports[`SettingsUtils functions render 1`] = `
     </Stack>
     <Text
       style={
-        {
+        Object {
           "marginTop": 15,
         }
       }
@@ -63,8 +63,8 @@ exports[`SettingsUtils functions render 1`] = `
   <Text
     id="manualToAutoscaleDisclaimerElement"
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "color": "windowtext",
           "fontSize": 14,
         },
@@ -81,8 +81,8 @@ exports[`SettingsUtils functions render 1`] = `
   </Text>
   <Text
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "color": "windowtext",
           "fontSize": 14,
         },
@@ -102,8 +102,8 @@ exports[`SettingsUtils functions render 1`] = `
   <Text
     id="updateThroughputDelayedApplyWarningMessage"
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "color": "windowtext",
           "fontSize": 14,
         },
@@ -114,8 +114,8 @@ exports[`SettingsUtils functions render 1`] = `
   </Text>
   <Text
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "color": "windowtext",
           "fontSize": 14,
         },
@@ -134,8 +134,8 @@ exports[`SettingsUtils functions render 1`] = `
   <Text
     id="throughputApplyShortDelayMessage"
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "color": "windowtext",
           "fontSize": 14,
         },
@@ -150,8 +150,8 @@ exports[`SettingsUtils functions render 1`] = `
   <Text
     id="throughputApplyLongDelayMessage"
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "color": "windowtext",
           "fontSize": 14,
         },
@@ -165,8 +165,8 @@ exports[`SettingsUtils functions render 1`] = `
   </Text>
   <Text
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "color": "windowtext",
           "fontSize": 14,
         },
@@ -179,8 +179,8 @@ exports[`SettingsUtils functions render 1`] = `
   </Text>
   <Text
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "color": "windowtext",
           "fontSize": 14,
         },
@@ -191,8 +191,8 @@ exports[`SettingsUtils functions render 1`] = `
   </Text>
   <Text
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "color": "windowtext",
           "fontSize": 14,
         },
@@ -211,8 +211,8 @@ exports[`SettingsUtils functions render 1`] = `
   </Text>
   <Text
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "color": "windowtext",
           "fontSize": 14,
         },
@@ -247,15 +247,15 @@ exports[`SettingsUtils functions render 1`] = `
   <Stack
     horizontal={true}
     tokens={
-      {
+      Object {
         "childrenGap": 5,
       }
     }
   >
     <Text
       styles={
-        {
+        Object {
-          "root": {
+          "root": Object {
             "color": "windowtext",
             "fontSize": 14,
           },
@@ -270,8 +270,8 @@ exports[`SettingsUtils functions render 1`] = `
   </Stack>
   <Text
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "color": "windowtext",
           "fontSize": 14,
         },
@@ -287,8 +287,8 @@ exports[`SettingsUtils functions render 1`] = `
   </Text>
   <Text
     styles={
-      {
+      Object {
-        "root": {
+        "root": Object {
           "color": "windowtext",
           "fontSize": 14,
         },

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -14,6 +14,7 @@ import {
   TextField,
   Toggle,
 } from "@fluentui/react";
+import { TFunction } from "i18next";
 import * as React from "react";
 import {
   ChoiceItem,
@@ -99,7 +100,7 @@ export interface SmartUiComponentProps {
   onInputChange: (input: AnyDisplay, newValue: InputType) => void;
   onError: (hasError: boolean) => void;
   disabled: boolean;
-  getTranslation: (messageKey: string, namespace?: string) => string;
+  getTranslation: TFunction;
 }
 
 interface SmartUiComponentState {

src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
 <Stack
   className="widgetRendererContainer"
   tokens={
-    {
+    Object {
       "childrenGap": 10,
     }
   }
@@ -16,7 +16,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     <Stack
       className="widgetRendererContainer"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -28,7 +28,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
               aria-labelledby="description-label"
               id="description-text-display"
               style={
-                {
+                Object {
                   "whiteSpace": "pre-line",
                 }
               }
@@ -53,7 +53,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     <Stack
       className="widgetRendererContainer"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -70,14 +70,14 @@ exports[`SmartUiComponent disable all inputs 1`] = `
             </StyledLabelBase>
             <Stack
               styles={
-                {
+                Object {
-                  "root": {
+                  "root": Object {
                     "width": 400,
                   },
                 }
               }
               tokens={
-                {
+                Object {
                   "childrenGap": 2,
                 }
               }
@@ -107,7 +107,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     <Stack
       className="widgetRendererContainer"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -133,11 +133,11 @@ exports[`SmartUiComponent disable all inputs 1`] = `
                 onChange={[Function]}
                 step={10}
                 styles={
-                  {
+                  Object {
-                    "root": {
+                    "root": Object {
                       "width": 400,
                     },
-                    "valueLabel": {
+                    "valueLabel": Object {
                       "color": "#393939",
                       "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
                       "fontSize": 12,
@@ -157,7 +157,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     <Stack
       className="widgetRendererContainer"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -178,7 +178,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     <Stack
       className="widgetRendererContainer"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -199,8 +199,8 @@ exports[`SmartUiComponent disable all inputs 1`] = `
               id="containerId-textField-input"
               onChange={[Function]}
               styles={
-                {
+                Object {
-                  "root": {
+                  "root": Object {
                     "width": 400,
                   },
                 }
@@ -219,7 +219,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     <Stack
       className="widgetRendererContainer"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -243,8 +243,8 @@ exports[`SmartUiComponent disable all inputs 1`] = `
               onChange={[Function]}
               onText="Enabled"
               styles={
-                {
+                Object {
-                  "root": {
+                  "root": Object {
                     "width": 400,
                   },
                 }
@@ -261,7 +261,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     <Stack
       className="widgetRendererContainer"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -282,16 +282,16 @@ exports[`SmartUiComponent disable all inputs 1`] = `
               id="database-dropdown-input"
               onChange={[Function]}
               options={
-                [
+                Array [
-                  {
+                  Object {
                     "key": "db1",
                     "text": "Database 1",
                   },
-                  {
+                  Object {
                     "key": "db2",
                     "text": "Database 2",
                   },
-                  {
+                  Object {
                     "key": "db3",
                     "text": "Database 3",
                   },
@@ -299,13 +299,13 @@ exports[`SmartUiComponent disable all inputs 1`] = `
               }
               selectedKey="db2"
               styles={
-                {
+                Object {
-                  "dropdown": {
+                  "dropdown": Object {
                     "color": "#393939",
                     "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
                     "fontSize": 12,
                   },
-                  "root": {
+                  "root": Object {
                     "width": 400,
                   },
                 }
@@ -323,7 +323,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
 <Stack
   className="widgetRendererContainer"
   tokens={
-    {
+    Object {
       "childrenGap": 10,
     }
   }
@@ -335,7 +335,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     <Stack
       className="widgetRendererContainer"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -347,7 +347,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
               aria-labelledby="description-label"
               id="description-text-display"
               style={
-                {
+                Object {
                   "whiteSpace": "pre-line",
                 }
               }
@@ -372,7 +372,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     <Stack
       className="widgetRendererContainer"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -389,14 +389,14 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
             </StyledLabelBase>
             <Stack
               styles={
-                {
+                Object {
-                  "root": {
+                  "root": Object {
                     "width": 400,
                   },
                 }
               }
               tokens={
-                {
+                Object {
                   "childrenGap": 2,
                 }
               }
@@ -425,7 +425,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     <Stack
       className="widgetRendererContainer"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -450,11 +450,11 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
                 onChange={[Function]}
                 step={10}
                 styles={
-                  {
+                  Object {
-                    "root": {
+                    "root": Object {
                       "width": 400,
                     },
-                    "valueLabel": {
+                    "valueLabel": Object {
                       "color": "#393939",
                       "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
                       "fontSize": 12,
@@ -474,7 +474,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     <Stack
       className="widgetRendererContainer"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -495,7 +495,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     <Stack
       className="widgetRendererContainer"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -515,8 +515,8 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
               id="containerId-textField-input"
               onChange={[Function]}
               styles={
-                {
+                Object {
-                  "root": {
+                  "root": Object {
                     "width": 400,
                   },
                 }
@@ -535,7 +535,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     <Stack
       className="widgetRendererContainer"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -558,8 +558,8 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
               onChange={[Function]}
               onText="Enabled"
               styles={
-                {
+                Object {
-                  "root": {
+                  "root": Object {
                     "width": 400,
                   },
                 }
@@ -576,7 +576,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     <Stack
       className="widgetRendererContainer"
       tokens={
-        {
+        Object {
           "childrenGap": 10,
         }
       }
@@ -596,16 +596,16 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
               id="database-dropdown-input"
               onChange={[Function]}
               options={
-                [
+                Array [
-                  {
+                  Object {
                     "key": "db1",
                     "text": "Database 1",
                   },
-                  {
+                  Object {
                     "key": "db2",
                     "text": "Database 2",
                   },
-                  {
+                  Object {
                     "key": "db3",
                     "text": "Database 3",
                   },
@@ -613,13 +613,13 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
               }
               selectedKey="db2"
               styles={
-                {
+                Object {
-                  "dropdown": {
+                  "dropdown": Object {
                     "color": "#393939",
                     "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
                     "fontSize": 12,
                   },
-                  "root": {
+                  "root": Object {
                     "width": 400,
                   },
                 }

src/Explorer/Controls/Tabs/TabComponent.less

@@ -1,16 +1,28 @@
 @import "../../../../less/Common/Constants";
 
 .tabComponentContainer {
-  height: 100%;
+    height: 100%;
-  .flex-display();
+    .flex-display();
-  .flex-direction();
+    .flex-direction();
 
-  .tabSwitch {
+    .tabSwitch {
-    margin-left: @LargeSpace;
+        margin-left: @LargeSpace;
-    margin-bottom: 20px;
+        margin-bottom: 20px;
 
-    .tab {
+        .tab {
-      margin-right: @MediumSpace;
+            margin-right: @MediumSpace;
-    }
+        }
-  }
+
+        .toggleSwitch {
+            .toggleSwitch();
+        }
+
+        .selectedToggle {
+            .selectedToggle();
+        }
+
+        .unselectedToggle {
+            .unselectedToggle();
+        }
+      }
 }

src/Explorer/Controls/Tabs/TabComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Pivot, PivotItem } from "@fluentui/react";
+import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
 import "./TabComponent.less";
 
 export interface TabContent {
@@ -35,36 +35,58 @@ export class TabComponent extends React.Component<TabComponentProps> {
   }
 
   private setActiveTab(index: number): void {
+    this.setState({ activeTabIndex: index });
     this.props.onTabIndexChange(index);
   }
 
+  private renderTabTitles(): JSX.Element[] {
+    return this.props.tabs.map((tab: Tab, index: number) => {
+      if (!tab.isVisible()) {
+        return <React.Fragment key={index} />;
+      }
+
+      let className = "toggleSwitch";
+      let ariaselected;
+      if (index === this.props.currentTabIndex) {
+        className += " selectedToggle";
+        ariaselected = true;
+      } else {
+        className += " unselectedToggle";
+        ariaselected = false;
+      }
+
+      return (
+        <div className="tab" key={index}>
+          <AccessibleElement
+            as="span"
+            className={className}
+            role="tab"
+            onActivated={() => this.setActiveTab(index)}
+            aria-label={`Select tab: ${tab.title}`}
+            aria-selected={ariaselected}
+          >
+            {tab.title}
+          </AccessibleElement>
+        </div>
+      );
+    });
+  }
+
   public render(): JSX.Element {
-    const { tabs, currentTabIndex, hideHeader } = this.props;
+    const currentTabContent = this.props.tabs[this.props.currentTabIndex].content;
-    const currentTabContent = tabs[currentTabIndex].content;
     let className = "tabComponentContent";
     if (currentTabContent.className) {
       className += ` ${currentTabContent.className}`;
     }
+
     return (
       <div className="tabComponentContainer">
-        <div className="tabs tabSwitch">
+        {!this.props.hideHeader && (
-          {!hideHeader && (
+          <div className="tabs tabSwitch" role="tablist">
-            <Pivot
+            {this.renderTabTitles()}
-              aria-label="Tab navigation"
+          </div>
-              selectedKey={currentTabIndex.toString()}
+        )}
-              linkSize="normal"
+        <div className={className}>{currentTabContent.render()}</div>
-              onLinkClick={(item) => this.setActiveTab(parseInt(item?.props.itemKey || ""))}
-            >
-              {tabs.map((tab: Tab, index: number) => {
-                if (!tab.isVisible()) {
-                  return null; // Skip rendering invisible tabs
-                }
-                return <PivotItem key={index} headerText={tab.title} itemKey={index.toString()} />;
-              })}
-            </Pivot>
-          )}
-        </div>
-        <div className={className}>{tabs[currentTabIndex].content.render()}</div>
       </div>
     );
   }

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

@@ -20,10 +20,6 @@
   outline-offset: 2px;
 }
 
-.outlineNone{
-  outline: none !important;
-}
-
 .copyQuery:focus::after,
 .deleteQuery:focus::after {
   outline: none !important;

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -223,7 +223,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           <Text variant="small" aria-label="capacity calculator of azure cosmos db">
             Estimate your required RU/s with{" "}
             <Link
-              className="underlinedLink outlineNone"
               target="_blank"
               href="https://cosmos.azure.com/capacitycalculator/"
               aria-label="capacity calculator of azure cosmos db"
@@ -272,12 +271,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
         <Stack className="throughputInputSpacing">
           <Text variant="small" aria-label="ruDescription">
             Estimate your required RU/s with&nbsp;
-            <Link
+            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="Capacity calculator">
-              className="underlinedLink"
-              target="_blank"
-              href="https://cosmos.azure.com/capacitycalculator/"
-              aria-label="Capacity calculator"
-            >
               capacity calculator
             </Link>
             .

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

@@ -30,7 +30,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           aria-label="Throughput header"
           key=".0:$.$.1"
           style={
-            {
+            Object {
               "fontWeight": 600,
               "lineHeight": "20px",
             }
@@ -41,7 +41,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             aria-label="Throughput header"
             className="css-110"
             style={
-              {
+              Object {
                 "fontWeight": 600,
                 "lineHeight": "20px",
               }
@@ -62,9 +62,9 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                 delay={1}
                 styles={[Function]}
                 theme={
-                  {
+                  Object {
                     "disableGlobalClassNames": false,
-                    "effects": {
+                    "effects": Object {
                       "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
                       "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
                       "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
@@ -73,92 +73,92 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       "roundedCorner4": "4px",
                       "roundedCorner6": "6px",
                     },
-                    "fonts": {
+                    "fonts": Object {
-                      "large": {
+                      "large": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "18px",
                         "fontWeight": 400,
                       },
-                      "medium": {
+                      "medium": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "14px",
                         "fontWeight": 400,
                       },
-                      "mediumPlus": {
+                      "mediumPlus": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "16px",
                         "fontWeight": 400,
                       },
-                      "mega": {
+                      "mega": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "68px",
                         "fontWeight": 600,
                       },
-                      "small": {
+                      "small": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "12px",
                         "fontWeight": 400,
                       },
-                      "smallPlus": {
+                      "smallPlus": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "12px",
                         "fontWeight": 400,
                       },
-                      "superLarge": {
+                      "superLarge": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "42px",
                         "fontWeight": 600,
                       },
-                      "tiny": {
+                      "tiny": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "10px",
                         "fontWeight": 400,
                       },
-                      "xLarge": {
+                      "xLarge": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "20px",
                         "fontWeight": 600,
                       },
-                      "xLargePlus": {
+                      "xLargePlus": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "24px",
                         "fontWeight": 600,
                       },
-                      "xSmall": {
+                      "xSmall": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "10px",
                         "fontWeight": 400,
                       },
-                      "xxLarge": {
+                      "xxLarge": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "28px",
                         "fontWeight": 600,
                       },
-                      "xxLargePlus": {
+                      "xxLargePlus": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
@@ -167,7 +167,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       },
                     },
                     "isInverted": false,
-                    "palette": {
+                    "palette": Object {
                       "accent": "#0078d4",
                       "black": "#000000",
                       "blackTranslucent40": "rgba(0,0,0,.4)",
@@ -220,7 +220,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       "yellowLight": "#fff100",
                     },
                     "rtl": undefined,
-                    "semanticColors": {
+                    "semanticColors": Object {
                       "accentButtonBackground": "#0078d4",
                       "accentButtonText": "#ffffff",
                       "actionLink": "#323130",
@@ -325,7 +325,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       "warningIcon": "#797775",
                       "warningText": "#323130",
                     },
-                    "spacing": {
+                    "spacing": Object {
                       "l1": "20px",
                       "l2": "32px",
                       "m": "16px",
@@ -357,9 +357,9 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       styles={[Function]}
                       tabIndex={0}
                       theme={
-                        {
+                        Object {
                           "disableGlobalClassNames": false,
-                          "effects": {
+                          "effects": Object {
                             "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
                             "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
                             "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
@@ -368,92 +368,92 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                             "roundedCorner4": "4px",
                             "roundedCorner6": "6px",
                           },
-                          "fonts": {
+                          "fonts": Object {
-                            "large": {
+                            "large": Object {
                               "MozOsxFontSmoothing": "grayscale",
                               "WebkitFontSmoothing": "antialiased",
                               "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                               "fontSize": "18px",
                               "fontWeight": 400,
                             },
-                            "medium": {
+                            "medium": Object {
                               "MozOsxFontSmoothing": "grayscale",
                               "WebkitFontSmoothing": "antialiased",
                               "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                               "fontSize": "14px",
                               "fontWeight": 400,
                             },
-                            "mediumPlus": {
+                            "mediumPlus": Object {
                               "MozOsxFontSmoothing": "grayscale",
                               "WebkitFontSmoothing": "antialiased",
                               "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                               "fontSize": "16px",
                               "fontWeight": 400,
                             },
-                            "mega": {
+                            "mega": Object {
                               "MozOsxFontSmoothing": "grayscale",
                               "WebkitFontSmoothing": "antialiased",
                               "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                               "fontSize": "68px",
                               "fontWeight": 600,
                             },
-                            "small": {
+                            "small": Object {
                               "MozOsxFontSmoothing": "grayscale",
                               "WebkitFontSmoothing": "antialiased",
                               "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                               "fontSize": "12px",
                               "fontWeight": 400,
                             },
-                            "smallPlus": {
+                            "smallPlus": Object {
                               "MozOsxFontSmoothing": "grayscale",
                               "WebkitFontSmoothing": "antialiased",
                               "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                               "fontSize": "12px",
                               "fontWeight": 400,
                             },
-                            "superLarge": {
+                            "superLarge": Object {
                               "MozOsxFontSmoothing": "grayscale",
                               "WebkitFontSmoothing": "antialiased",
                               "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                               "fontSize": "42px",
                               "fontWeight": 600,
                             },
-                            "tiny": {
+                            "tiny": Object {
                               "MozOsxFontSmoothing": "grayscale",
                               "WebkitFontSmoothing": "antialiased",
                               "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                               "fontSize": "10px",
                               "fontWeight": 400,
                             },
-                            "xLarge": {
+                            "xLarge": Object {
                               "MozOsxFontSmoothing": "grayscale",
                               "WebkitFontSmoothing": "antialiased",
                               "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                               "fontSize": "20px",
                               "fontWeight": 600,
                             },
-                            "xLargePlus": {
+                            "xLargePlus": Object {
                               "MozOsxFontSmoothing": "grayscale",
                               "WebkitFontSmoothing": "antialiased",
                               "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                               "fontSize": "24px",
                               "fontWeight": 600,
                             },
-                            "xSmall": {
+                            "xSmall": Object {
                               "MozOsxFontSmoothing": "grayscale",
                               "WebkitFontSmoothing": "antialiased",
                               "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                               "fontSize": "10px",
                               "fontWeight": 400,
                             },
-                            "xxLarge": {
+                            "xxLarge": Object {
                               "MozOsxFontSmoothing": "grayscale",
                               "WebkitFontSmoothing": "antialiased",
                               "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                               "fontSize": "28px",
                               "fontWeight": 600,
                             },
-                            "xxLargePlus": {
+                            "xxLargePlus": Object {
                               "MozOsxFontSmoothing": "grayscale",
                               "WebkitFontSmoothing": "antialiased",
                               "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
@@ -462,7 +462,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                             },
                           },
                           "isInverted": false,
-                          "palette": {
+                          "palette": Object {
                             "accent": "#0078d4",
                             "black": "#000000",
                             "blackTranslucent40": "rgba(0,0,0,.4)",
@@ -515,7 +515,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                             "yellowLight": "#fff100",
                           },
                           "rtl": undefined,
-                          "semanticColors": {
+                          "semanticColors": Object {
                             "accentButtonBackground": "#0078d4",
                             "accentButtonText": "#ffffff",
                             "actionLink": "#323130",
@@ -620,7 +620,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                             "warningIcon": "#797775",
                             "warningText": "#323130",
                           },
-                          "spacing": {
+                          "spacing": Object {
                             "l1": "20px",
                             "l2": "32px",
                             "m": "16px",
@@ -645,7 +645,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     hidden={true}
                     id="tooltip0"
                     style={
-                      {
+                      Object {
                         "border": 0,
                         "height": 1,
                         "margin": -1,
@@ -733,20 +733,18 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
              
             <StyledLinkBase
               aria-label="capacity calculator of azure cosmos db"
-              className="underlinedLink outlineNone"
               href="https://cosmos.azure.com/capacitycalculator/"
               target="_blank"
             >
               <LinkBase
                 aria-label="capacity calculator of azure cosmos db"
-                className="underlinedLink outlineNone"
                 href="https://cosmos.azure.com/capacitycalculator/"
                 styles={[Function]}
                 target="_blank"
                 theme={
-                  {
+                  Object {
                     "disableGlobalClassNames": false,
-                    "effects": {
+                    "effects": Object {
                       "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
                       "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
                       "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
@@ -755,92 +753,92 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       "roundedCorner4": "4px",
                       "roundedCorner6": "6px",
                     },
-                    "fonts": {
+                    "fonts": Object {
-                      "large": {
+                      "large": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "18px",
                         "fontWeight": 400,
                       },
-                      "medium": {
+                      "medium": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "14px",
                         "fontWeight": 400,
                       },
-                      "mediumPlus": {
+                      "mediumPlus": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "16px",
                         "fontWeight": 400,
                       },
-                      "mega": {
+                      "mega": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "68px",
                         "fontWeight": 600,
                       },
-                      "small": {
+                      "small": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "12px",
                         "fontWeight": 400,
                       },
-                      "smallPlus": {
+                      "smallPlus": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "12px",
                         "fontWeight": 400,
                       },
-                      "superLarge": {
+                      "superLarge": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "42px",
                         "fontWeight": 600,
                       },
-                      "tiny": {
+                      "tiny": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "10px",
                         "fontWeight": 400,
                       },
-                      "xLarge": {
+                      "xLarge": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "20px",
                         "fontWeight": 600,
                       },
-                      "xLargePlus": {
+                      "xLargePlus": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "24px",
                         "fontWeight": 600,
                       },
-                      "xSmall": {
+                      "xSmall": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "10px",
                         "fontWeight": 400,
                       },
-                      "xxLarge": {
+                      "xxLarge": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                         "fontSize": "28px",
                         "fontWeight": 600,
                       },
-                      "xxLargePlus": {
+                      "xxLargePlus": Object {
                         "MozOsxFontSmoothing": "grayscale",
                         "WebkitFontSmoothing": "antialiased",
                         "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
@@ -849,7 +847,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       },
                     },
                     "isInverted": false,
-                    "palette": {
+                    "palette": Object {
                       "accent": "#0078d4",
                       "black": "#000000",
                       "blackTranslucent40": "rgba(0,0,0,.4)",
@@ -902,7 +900,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       "yellowLight": "#fff100",
                     },
                     "rtl": undefined,
-                    "semanticColors": {
+                    "semanticColors": Object {
                       "accentButtonBackground": "#0078d4",
                       "accentButtonText": "#ffffff",
                       "actionLink": "#323130",
@@ -1007,7 +1005,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       "warningIcon": "#797775",
                       "warningText": "#323130",
                     },
-                    "spacing": {
+                    "spacing": Object {
                       "l1": "20px",
                       "l2": "32px",
                       "m": "16px",
@@ -1019,7 +1017,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
               >
                 <a
                   aria-label="capacity calculator of azure cosmos db"
-                  className="ms-Link underlinedLink outlineNone root-117"
+                  className="ms-Link root-117"
                   href="https://cosmos.azure.com/capacitycalculator/"
                   onClick={[Function]}
                   target="_blank"
@@ -1042,7 +1040,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
               aria-label="maxRUDescription"
               key=".0:$.$.0"
               style={
-                {
+                Object {
                   "fontWeight": 600,
                   "lineHeight": "20px",
                 }
@@ -1053,7 +1051,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                 aria-label="maxRUDescription"
                 className="css-110"
                 style={
-                  {
+                  Object {
                     "fontWeight": 600,
                     "lineHeight": "20px",
                   }
@@ -1075,9 +1073,9 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     delay={1}
                     styles={[Function]}
                     theme={
-                      {
+                      Object {
                         "disableGlobalClassNames": false,
-                        "effects": {
+                        "effects": Object {
                           "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
                           "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
                           "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
@@ -1086,92 +1084,92 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                           "roundedCorner4": "4px",
                           "roundedCorner6": "6px",
                         },
-                        "fonts": {
+                        "fonts": Object {
-                          "large": {
+                          "large": Object {
                             "MozOsxFontSmoothing": "grayscale",
                             "WebkitFontSmoothing": "antialiased",
                             "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                             "fontSize": "18px",
                             "fontWeight": 400,
                           },
-                          "medium": {
+                          "medium": Object {
                             "MozOsxFontSmoothing": "grayscale",
                             "WebkitFontSmoothing": "antialiased",
                             "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                             "fontSize": "14px",
                             "fontWeight": 400,
                           },
-                          "mediumPlus": {
+                          "mediumPlus": Object {
                             "MozOsxFontSmoothing": "grayscale",
                             "WebkitFontSmoothing": "antialiased",
                             "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                             "fontSize": "16px",
                             "fontWeight": 400,
                           },
-                          "mega": {
+                          "mega": Object {
                             "MozOsxFontSmoothing": "grayscale",
                             "WebkitFontSmoothing": "antialiased",
                             "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                             "fontSize": "68px",
                             "fontWeight": 600,
                           },
-                          "small": {
+                          "small": Object {
                             "MozOsxFontSmoothing": "grayscale",
                             "WebkitFontSmoothing": "antialiased",
                             "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                             "fontSize": "12px",
                             "fontWeight": 400,
                           },
-                          "smallPlus": {
+                          "smallPlus": Object {
                             "MozOsxFontSmoothing": "grayscale",
                             "WebkitFontSmoothing": "antialiased",
                             "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                             "fontSize": "12px",
                             "fontWeight": 400,
                           },
-                          "superLarge": {
+                          "superLarge": Object {
                             "MozOsxFontSmoothing": "grayscale",
                             "WebkitFontSmoothing": "antialiased",
                             "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                             "fontSize": "42px",
                             "fontWeight": 600,
                           },
-                          "tiny": {
+                          "tiny": Object {
                             "MozOsxFontSmoothing": "grayscale",
                             "WebkitFontSmoothing": "antialiased",
                             "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                             "fontSize": "10px",
                             "fontWeight": 400,
                           },
-                          "xLarge": {
+                          "xLarge": Object {
                             "MozOsxFontSmoothing": "grayscale",
                             "WebkitFontSmoothing": "antialiased",
                             "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                             "fontSize": "20px",
                             "fontWeight": 600,
                           },
-                          "xLargePlus": {
+                          "xLargePlus": Object {
                             "MozOsxFontSmoothing": "grayscale",
                             "WebkitFontSmoothing": "antialiased",
                             "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                             "fontSize": "24px",
                             "fontWeight": 600,
                           },
-                          "xSmall": {
+                          "xSmall": Object {
                             "MozOsxFontSmoothing": "grayscale",
                             "WebkitFontSmoothing": "antialiased",
                             "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                             "fontSize": "10px",
                             "fontWeight": 400,
                           },
-                          "xxLarge": {
+                          "xxLarge": Object {
                             "MozOsxFontSmoothing": "grayscale",
                             "WebkitFontSmoothing": "antialiased",
                             "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                             "fontSize": "28px",
                             "fontWeight": 600,
                           },
-                          "xxLargePlus": {
+                          "xxLargePlus": Object {
                             "MozOsxFontSmoothing": "grayscale",
                             "WebkitFontSmoothing": "antialiased",
                             "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
@@ -1180,7 +1178,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                           },
                         },
                         "isInverted": false,
-                        "palette": {
+                        "palette": Object {
                           "accent": "#0078d4",
                           "black": "#000000",
                           "blackTranslucent40": "rgba(0,0,0,.4)",
@@ -1233,7 +1231,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                           "yellowLight": "#fff100",
                         },
                         "rtl": undefined,
-                        "semanticColors": {
+                        "semanticColors": Object {
                           "accentButtonBackground": "#0078d4",
                           "accentButtonText": "#ffffff",
                           "actionLink": "#323130",
@@ -1338,7 +1336,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                           "warningIcon": "#797775",
                           "warningText": "#323130",
                         },
-                        "spacing": {
+                        "spacing": Object {
                           "l1": "20px",
                           "l2": "32px",
                           "m": "16px",
@@ -1370,9 +1368,9 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                           styles={[Function]}
                           tabIndex={0}
                           theme={
-                            {
+                            Object {
                               "disableGlobalClassNames": false,
-                              "effects": {
+                              "effects": Object {
                                 "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
                                 "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
                                 "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
@@ -1381,92 +1379,92 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                                 "roundedCorner4": "4px",
                                 "roundedCorner6": "6px",
                               },
-                              "fonts": {
+                              "fonts": Object {
-                                "large": {
+                                "large": Object {
                                   "MozOsxFontSmoothing": "grayscale",
                                   "WebkitFontSmoothing": "antialiased",
                                   "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                                   "fontSize": "18px",
                                   "fontWeight": 400,
                                 },
-                                "medium": {
+                                "medium": Object {
                                   "MozOsxFontSmoothing": "grayscale",
                                   "WebkitFontSmoothing": "antialiased",
                                   "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                                   "fontSize": "14px",
                                   "fontWeight": 400,
                                 },
-                                "mediumPlus": {
+                                "mediumPlus": Object {
                                   "MozOsxFontSmoothing": "grayscale",
                                   "WebkitFontSmoothing": "antialiased",
                                   "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                                   "fontSize": "16px",
                                   "fontWeight": 400,
                                 },
-                                "mega": {
+                                "mega": Object {
                                   "MozOsxFontSmoothing": "grayscale",
                                   "WebkitFontSmoothing": "antialiased",
                                   "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                                   "fontSize": "68px",
                                   "fontWeight": 600,
                                 },
-                                "small": {
+                                "small": Object {
                                   "MozOsxFontSmoothing": "grayscale",
                                   "WebkitFontSmoothing": "antialiased",
                                   "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                                   "fontSize": "12px",
                                   "fontWeight": 400,
                                 },
-                                "smallPlus": {
+                                "smallPlus": Object {
                                   "MozOsxFontSmoothing": "grayscale",
                                   "WebkitFontSmoothing": "antialiased",
                                   "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                                   "fontSize": "12px",
                                   "fontWeight": 400,
                                 },
-                                "superLarge": {
+                                "superLarge": Object {
                                   "MozOsxFontSmoothing": "grayscale",
                                   "WebkitFontSmoothing": "antialiased",
                                   "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                                   "fontSize": "42px",
                                   "fontWeight": 600,
                                 },
-                                "tiny": {
+                                "tiny": Object {
                                   "MozOsxFontSmoothing": "grayscale",
                                   "WebkitFontSmoothing": "antialiased",
                                   "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                                   "fontSize": "10px",
                                   "fontWeight": 400,
                                 },
-                                "xLarge": {
+                                "xLarge": Object {
                                   "MozOsxFontSmoothing": "grayscale",
                                   "WebkitFontSmoothing": "antialiased",
                                   "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                                   "fontSize": "20px",
                                   "fontWeight": 600,
                                 },
-                                "xLargePlus": {
+                                "xLargePlus": Object {
                                   "MozOsxFontSmoothing": "grayscale",
                                   "WebkitFontSmoothing": "antialiased",
                                   "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                                   "fontSize": "24px",
                                   "fontWeight": 600,
                                 },
-                                "xSmall": {
+                                "xSmall": Object {
                                   "MozOsxFontSmoothing": "grayscale",
                                   "WebkitFontSmoothing": "antialiased",
                                   "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                                   "fontSize": "10px",
                                   "fontWeight": 400,
                                 },
-                                "xxLarge": {
+                                "xxLarge": Object {
                                   "MozOsxFontSmoothing": "grayscale",
                                   "WebkitFontSmoothing": "antialiased",
                                   "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                                   "fontSize": "28px",
                                   "fontWeight": 600,
                                 },
-                                "xxLargePlus": {
+                                "xxLargePlus": Object {
                                   "MozOsxFontSmoothing": "grayscale",
                                   "WebkitFontSmoothing": "antialiased",
                                   "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
@@ -1475,7 +1473,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                                 },
                               },
                               "isInverted": false,
-                              "palette": {
+                              "palette": Object {
                                 "accent": "#0078d4",
                                 "black": "#000000",
                                 "blackTranslucent40": "rgba(0,0,0,.4)",
@@ -1528,7 +1526,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                                 "yellowLight": "#fff100",
                               },
                               "rtl": undefined,
-                              "semanticColors": {
+                              "semanticColors": Object {
                                 "accentButtonBackground": "#0078d4",
                                 "accentButtonText": "#ffffff",
                                 "actionLink": "#323130",
@@ -1633,7 +1631,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                                 "warningIcon": "#797775",
                                 "warningText": "#323130",
                               },
-                              "spacing": {
+                              "spacing": Object {
                                 "l1": "20px",
                                 "l2": "32px",
                                 "m": "16px",
@@ -1658,7 +1656,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         hidden={true}
                         id="tooltip1"
                         style={
-                          {
+                          Object {
                             "border": 0,
                             "height": 1,
                             "margin": -1,
@@ -1690,11 +1688,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           required={true}
           step={1000}
           styles={
-            {
+            Object {
-              "field": {
+              "field": Object {
                 "fontSize": 12,
               },
-              "fieldGroup": {
+              "fieldGroup": Object {
                 "height": 27,
                 "width": 300,
               },
@@ -1716,9 +1714,9 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             step={1000}
             styles={[Function]}
             theme={
-              {
+              Object {
                 "disableGlobalClassNames": false,
-                "effects": {
+                "effects": Object {
                   "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
                   "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
                   "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
@@ -1727,92 +1725,92 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                   "roundedCorner4": "4px",
                   "roundedCorner6": "6px",
                 },
-                "fonts": {
+                "fonts": Object {
-                  "large": {
+                  "large": Object {
                     "MozOsxFontSmoothing": "grayscale",
                     "WebkitFontSmoothing": "antialiased",
                     "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                     "fontSize": "18px",
                     "fontWeight": 400,
                   },
-                  "medium": {
+                  "medium": Object {
                     "MozOsxFontSmoothing": "grayscale",
                     "WebkitFontSmoothing": "antialiased",
                     "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                     "fontSize": "14px",
                     "fontWeight": 400,
                   },
-                  "mediumPlus": {
+                  "mediumPlus": Object {
                     "MozOsxFontSmoothing": "grayscale",
                     "WebkitFontSmoothing": "antialiased",
                     "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                     "fontSize": "16px",
                     "fontWeight": 400,
                   },
-                  "mega": {
+                  "mega": Object {
                     "MozOsxFontSmoothing": "grayscale",
                     "WebkitFontSmoothing": "antialiased",
                     "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                     "fontSize": "68px",
                     "fontWeight": 600,
                   },
-                  "small": {
+                  "small": Object {
                     "MozOsxFontSmoothing": "grayscale",
                     "WebkitFontSmoothing": "antialiased",
                     "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                     "fontSize": "12px",
                     "fontWeight": 400,
                   },
-                  "smallPlus": {
+                  "smallPlus": Object {
                     "MozOsxFontSmoothing": "grayscale",
                     "WebkitFontSmoothing": "antialiased",
                     "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                     "fontSize": "12px",
                     "fontWeight": 400,
                   },
-                  "superLarge": {
+                  "superLarge": Object {
                     "MozOsxFontSmoothing": "grayscale",
                     "WebkitFontSmoothing": "antialiased",
                     "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                     "fontSize": "42px",
                     "fontWeight": 600,
                   },
-                  "tiny": {
+                  "tiny": Object {
                     "MozOsxFontSmoothing": "grayscale",
                     "WebkitFontSmoothing": "antialiased",
                     "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                     "fontSize": "10px",
                     "fontWeight": 400,
                   },
-                  "xLarge": {
+                  "xLarge": Object {
                     "MozOsxFontSmoothing": "grayscale",
                     "WebkitFontSmoothing": "antialiased",
                     "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                     "fontSize": "20px",
                     "fontWeight": 600,
                   },
-                  "xLargePlus": {
+                  "xLargePlus": Object {
                     "MozOsxFontSmoothing": "grayscale",
                     "WebkitFontSmoothing": "antialiased",
                     "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                     "fontSize": "24px",
                     "fontWeight": 600,
                   },
-                  "xSmall": {
+                  "xSmall": Object {
                     "MozOsxFontSmoothing": "grayscale",
                     "WebkitFontSmoothing": "antialiased",
                     "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                     "fontSize": "10px",
                     "fontWeight": 400,
                   },
-                  "xxLarge": {
+                  "xxLarge": Object {
                     "MozOsxFontSmoothing": "grayscale",
                     "WebkitFontSmoothing": "antialiased",
                     "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
                     "fontSize": "28px",
                     "fontWeight": 600,
                   },
-                  "xxLargePlus": {
+                  "xxLargePlus": Object {
                     "MozOsxFontSmoothing": "grayscale",
                     "WebkitFontSmoothing": "antialiased",
                     "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
@@ -1821,7 +1819,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                   },
                 },
                 "isInverted": false,
-                "palette": {
+                "palette": Object {
                   "accent": "#0078d4",
                   "black": "#000000",
                   "blackTranslucent40": "rgba(0,0,0,.4)",
@@ -1874,7 +1872,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                   "yellowLight": "#fff100",
                 },
                 "rtl": undefined,
-                "semanticColors": {
+                "semanticColors": Object {
                   "accentButtonBackground": "#0078d4",
                   "accentButtonText": "#ffffff",
                   "actionLink": "#323130",
@@ -1979,7 +1977,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                   "warningIcon": "#797775",
                   "warningText": "#323130",
                 },
-                "spacing": {
+                "spacing": Object {
                   "l1": "20px",
                   "l2": "32px",
                   "m": "16px",

src/Explorer/Controls/TreeComponent/Styles.ts

@@ -1,65 +0,0 @@
-import { makeStyles, shorthands, treeItemLevelToken } from "@fluentui/react-components";
-import { cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
-
-export type TreeStyleName = keyof ReturnType<typeof useTreeStyles>;
-
-const treeIconWidth = "--cosmos-Tree--iconWidth" as const;
-const leafNodeSpacing = "--cosmos-Tree--leafNodeSpacing" as const;
-const actionButtonBackground = "--cosmos-Tree--actionButtonBackground" as const;
-
-export const useTreeStyles = makeStyles({
-  treeContainer: {
-    height: "100%",
-    ...shorthands.overflow("auto"),
-  },
-  tree: {
-    width: "fit-content",
-    minWidth: "100%",
-    rowGap: "0px",
-    paddingTop: "0px",
-    [treeIconWidth]: "20px",
-    [leafNodeSpacing]: "24px",
-  },
-  nodeIcon: {
-    width: `var(${treeIconWidth})`,
-    height: `var(${treeIconWidth})`,
-  },
-  treeItem: {},
-  nodeLabel: {},
-  treeItemLayout: {
-    fontSize: tokens.fontSizeBase300,
-    height: tokens.layoutRowHeight,
-    ...cosmosShorthands.borderBottom(),
-    paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,
-
-    // Some sneaky CSS variables stuff to change the background color of the action button on hover.
-    [actionButtonBackground]: tokens.colorNeutralBackground1,
-    "&:hover": {
-      [actionButtonBackground]: tokens.colorNeutralBackground1Hover,
-    },
-  },
-  actionsButtonContainer: {
-    position: "sticky",
-    right: 0,
-  },
-  actionsButton: {
-    backgroundColor: `var(${actionButtonBackground})`,
-  },
-  treeItemLayoutNoIcon: {
-    // Pad the text out by the level, the width of the icon, AND the usual spacing between the icon and the level.
-    // It would be nice to see if we can use Grid layout or something here, but that would require overriding a lot of the existing Tree component behavior.
-    paddingLeft: `calc((var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL}) + var(${leafNodeSpacing}))`,
-  },
-  selectedItem: {
-    backgroundColor: tokens.colorNeutralBackground1Selected,
-  },
-  databaseNode: {
-    fontWeight: tokens.fontWeightSemibold,
-  },
-  collectionNode: {
-    fontWeight: tokens.fontWeightSemibold,
-  },
-  loadMoreNode: {
-    color: tokens.colorBrandForegroundLink,
-  },
-});

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

@@ -1,48 +1,48 @@
-import { shallow } from "enzyme";
 import React from "react";
-import { LegacyTreeComponent, LegacyTreeNode, LegacyTreeNodeComponent } from "./LegacyTreeComponent";
+import { shallow } from "enzyme";
+import { TreeComponent, TreeNode, TreeNodeComponent } from "./TreeComponent";
 
-const buildChildren = (): LegacyTreeNode[] => {
+const buildChildren = (): TreeNode[] => {
-  const grandChild11: LegacyTreeNode = {
+  const grandChild11: TreeNode = {
     label: "ZgrandChild11",
   };
-  const grandChild12: LegacyTreeNode = {
+  const grandChild12: TreeNode = {
     label: "AgrandChild12",
   };
-  const child1: LegacyTreeNode = {
+  const child1: TreeNode = {
     label: "Bchild1",
     children: [grandChild11, grandChild12],
   };
 
-  const child2: LegacyTreeNode = {
+  const child2: TreeNode = {
     label: "2child2",
   };
 
   return [child1, child2];
 };
 
-const buildChildren2 = (): LegacyTreeNode[] => {
+const buildChildren2 = (): TreeNode[] => {
-  const grandChild11: LegacyTreeNode = {
+  const grandChild11: TreeNode = {
     label: "ZgrandChild11",
   };
-  const grandChild12: LegacyTreeNode = {
+  const grandChild12: TreeNode = {
     label: "AgrandChild12",
   };
 
-  const child1: LegacyTreeNode = {
+  const child1: TreeNode = {
     label: "aChild",
   };
 
-  const child2: LegacyTreeNode = {
+  const child2: TreeNode = {
     label: "bchild",
     children: [grandChild11, grandChild12],
   };
 
-  const child3: LegacyTreeNode = {
+  const child3: TreeNode = {
     label: "cchild",
   };
 
-  const child4: LegacyTreeNode = {
+  const child4: TreeNode = {
     label: "dchild",
     children: [grandChild11, grandChild12],
   };
@@ -50,7 +50,7 @@ const buildChildren2 = (): LegacyTreeNode[] => {
   return [child1, child2, child3, child4];
 };
 
-describe("LegacyTreeComponent", () => {
+describe("TreeComponent", () => {
   it("renders a simple tree", () => {
     const root = {
       label: "root",
@@ -62,14 +62,14 @@ describe("LegacyTreeComponent", () => {
       className: "tree",
     };
 
-    const wrapper = shallow(<LegacyTreeComponent {...props} />);
+    const wrapper = shallow(<TreeComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 });
 
-describe("LegacyTreeNodeComponent", () => {
+describe("TreeNodeComponent", () => {
   it("renders a simple node (sorted children, expanded)", () => {
-    const node: LegacyTreeNode = {
+    const node: TreeNode = {
       label: "label",
       id: "id",
       children: buildChildren(),
@@ -98,12 +98,12 @@ describe("LegacyTreeNodeComponent", () => {
       generation: 12,
       paddingLeft: 23,
     };
-    const wrapper = shallow(<LegacyTreeNodeComponent {...props} />);
+    const wrapper = shallow(<TreeNodeComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 
   it("renders unsorted children by default", () => {
-    const node: LegacyTreeNode = {
+    const node: TreeNode = {
       label: "label",
       children: buildChildren(),
       isExpanded: true,
@@ -113,12 +113,12 @@ describe("LegacyTreeNodeComponent", () => {
       generation: 2,
       paddingLeft: 9,
     };
-    const wrapper = shallow(<LegacyTreeNodeComponent {...props} />);
+    const wrapper = shallow(<TreeNodeComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 
   it("does not render children by default", () => {
-    const node: LegacyTreeNode = {
+    const node: TreeNode = {
       label: "label",
       children: buildChildren(),
       isAlphaSorted: false,
@@ -128,12 +128,12 @@ describe("LegacyTreeNodeComponent", () => {
       generation: 2,
       paddingLeft: 9,
     };
-    const wrapper = shallow(<LegacyTreeNodeComponent {...props} />);
+    const wrapper = shallow(<TreeNodeComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 
   it("renders sorted children, expanded, leaves and parents separated", () => {
-    const node: LegacyTreeNode = {
+    const node: TreeNode = {
       label: "label",
       id: "id",
       children: buildChildren2(),
@@ -156,12 +156,12 @@ describe("LegacyTreeNodeComponent", () => {
       generation: 12,
       paddingLeft: 23,
     };
-    const wrapper = shallow(<LegacyTreeNodeComponent {...props} />);
+    const wrapper = shallow(<TreeNodeComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 
   it("renders loading icon", () => {
-    const node: LegacyTreeNode = {
+    const node: TreeNode = {
       label: "label",
       children: [],
       isExpanded: true,
@@ -172,7 +172,7 @@ describe("LegacyTreeNodeComponent", () => {
       generation: 2,
       paddingLeft: 9,
     };
-    const wrapper = shallow(<LegacyTreeNodeComponent {...props} />);
+    const wrapper = shallow(<TreeNodeComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 });

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -12,7 +12,6 @@ import {
   IContextualMenuItemProps,
   IContextualMenuProps,
 } from "@fluentui/react";
-import { TreeNodeMenuItem } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";
 import LoadingIndicator_3Squares from "../../../../images/LoadingIndicator_3Squares.gif";
@@ -23,10 +22,18 @@ import { StyleConstants } from "../../../Common/StyleConstants";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 
-export interface LegacyTreeNode {
+export interface TreeNodeMenuItem {
+  label: string;
+  onClick: () => void;
+  iconSrc?: string;
+  isDisabled?: boolean;
+  styleClass?: string;
+}
+
+export interface TreeNode {
   label: string;
   id?: string;
-  children?: LegacyTreeNode[];
+  children?: TreeNode[];
   contextMenu?: TreeNodeMenuItem[];
   iconSrc?: string;
   isExpanded?: boolean;
@@ -43,37 +50,34 @@ export interface LegacyTreeNode {
   onContextMenuOpen?: () => void;
 }
 
-export interface LegacyTreeComponentProps {
+export interface TreeComponentProps {
-  rootNode: LegacyTreeNode;
+  rootNode: TreeNode;
   style?: any;
   className?: string;
 }
 
-export class LegacyTreeComponent extends React.Component<LegacyTreeComponentProps> {
+export class TreeComponent extends React.Component<TreeComponentProps> {
   public render(): JSX.Element {
     return (
       <div style={this.props.style} className={`treeComponent ${this.props.className}`} role="tree">
-        <LegacyTreeNodeComponent paddingLeft={0} node={this.props.rootNode} generation={0} />
+        <TreeNodeComponent paddingLeft={0} node={this.props.rootNode} generation={0} />
       </div>
     );
   }
 }
 
 /* Tree node is a react component */
-interface LegacyTreeNodeComponentProps {
+interface TreeNodeComponentProps {
-  node: LegacyTreeNode;
+  node: TreeNode;
   generation: number;
   paddingLeft: number;
 }
 
-interface LegacyTreeNodeComponentState {
+interface TreeNodeComponentState {
   isExpanded: boolean;
   isMenuShowing: boolean;
 }
-export class LegacyTreeNodeComponent extends React.Component<
+export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, TreeNodeComponentState> {
-  LegacyTreeNodeComponentProps,
-  LegacyTreeNodeComponentState
-> {
   private static readonly paddingPerGenerationPx = 16;
   private static readonly iconOffset = 22;
   private static readonly transitionDurationMS = 200;
@@ -81,7 +85,7 @@ export class LegacyTreeNodeComponent extends React.Component<
   private contextMenuRef = React.createRef<HTMLDivElement>();
   private isExpanded: boolean;
 
-  constructor(props: LegacyTreeNodeComponentProps) {
+  constructor(props: TreeNodeComponentProps) {
     super(props);
     this.isExpanded = props.node.isExpanded;
     this.state = {
@@ -90,13 +94,13 @@ export class LegacyTreeNodeComponent extends React.Component<
     };
   }
 
-  componentDidUpdate(prevProps: LegacyTreeNodeComponentProps, prevState: LegacyTreeNodeComponentState) {
+  componentDidUpdate(prevProps: TreeNodeComponentProps, prevState: TreeNodeComponentState) {
     // Only call when expand has actually changed
     if (this.state.isExpanded !== prevState.isExpanded) {
       if (this.state.isExpanded) {
-        this.props.node.onExpanded && setTimeout(this.props.node.onExpanded, LegacyTreeNodeComponent.callbackDelayMS);
+        this.props.node.onExpanded && setTimeout(this.props.node.onExpanded, TreeNodeComponent.callbackDelayMS);
       } else {
-        this.props.node.onCollapsed && setTimeout(this.props.node.onCollapsed, LegacyTreeNodeComponent.callbackDelayMS);
+        this.props.node.onCollapsed && setTimeout(this.props.node.onCollapsed, TreeNodeComponent.callbackDelayMS);
       }
     }
     if (this.props.node.isExpanded !== this.isExpanded) {
@@ -111,18 +115,18 @@ export class LegacyTreeNodeComponent extends React.Component<
     return this.renderNode(this.props.node, this.props.generation);
   }
 
-  private static getSortedChildren(treeNode: LegacyTreeNode): LegacyTreeNode[] {
+  private static getSortedChildren(treeNode: TreeNode): TreeNode[] {
     if (!treeNode || !treeNode.children) {
       return undefined;
     }
 
-    const compareFct = (a: LegacyTreeNode, b: LegacyTreeNode) => a.label.localeCompare(b.label);
+    const compareFct = (a: TreeNode, b: TreeNode) => a.label.localeCompare(b.label);
 
     let unsortedChildren;
     if (treeNode.isLeavesParentsSeparate) {
       // Separate parents and leave
-      const parents: LegacyTreeNode[] = treeNode.children.filter((node) => node.children);
+      const parents: TreeNode[] = treeNode.children.filter((node) => node.children);
-      const leaves: LegacyTreeNode[] = treeNode.children.filter((node) => !node.children);
+      const leaves: TreeNode[] = treeNode.children.filter((node) => !node.children);
 
       if (treeNode.isAlphaSorted) {
         parents.sort(compareFct);
@@ -137,18 +141,18 @@ export class LegacyTreeNodeComponent extends React.Component<
     return unsortedChildren;
   }
 
-  private static isNodeHeaderBlank(node: LegacyTreeNode): boolean {
+  private static isNodeHeaderBlank(node: TreeNode): boolean {
     return (node.label === undefined || node.label === null) && !node.contextMenu;
   }
 
-  private renderNode(node: LegacyTreeNode, generation: number): JSX.Element {
+  private renderNode(node: TreeNode, generation: number): JSX.Element {
-    const paddingLeft = generation * LegacyTreeNodeComponent.paddingPerGenerationPx;
+    let paddingLeft = generation * TreeNodeComponent.paddingPerGenerationPx;
     let additionalOffsetPx = 15;
 
     if (node.children) {
-      const childrenWithSubChildren = node.children.filter((child: LegacyTreeNode) => !!child.children);
+      const childrenWithSubChildren = node.children.filter((child: TreeNode) => !!child.children);
       if (childrenWithSubChildren.length > 0) {
-        additionalOffsetPx = LegacyTreeNodeComponent.iconOffset;
+        additionalOffsetPx = TreeNodeComponent.iconOffset;
       }
     }
 
@@ -156,17 +160,16 @@ export class LegacyTreeNodeComponent extends React.Component<
     const showSelected =
       this.props.node.isSelected &&
       this.props.node.isSelected() &&
-      !LegacyTreeNodeComponent.isAnyDescendantSelected(this.props.node);
+      !TreeNodeComponent.isAnyDescendantSelected(this.props.node);
 
     const headerStyle: React.CSSProperties = { paddingLeft: this.props.paddingLeft };
-    if (LegacyTreeNodeComponent.isNodeHeaderBlank(node)) {
+    if (TreeNodeComponent.isNodeHeaderBlank(node)) {
       headerStyle.height = 0;
       headerStyle.padding = 0;
     }
 
     return (
       <div
-        data-test={`Tree/TreeNode:${node.label}`}
         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)}
@@ -175,9 +178,9 @@ export class LegacyTreeNodeComponent extends React.Component<
       >
         <div
           className={`treeNodeHeader ${this.state.isMenuShowing ? "showingMenu" : ""}`}
-          data-test={`Tree/TreeNode/Header:${node.label}`}
           style={headerStyle}
           tabIndex={node.children ? -1 : 0}
+          data-test={node.label}
         >
           {this.renderCollapseExpandIcon(node)}
           {node.iconSrc && <img className="nodeIcon" src={node.iconSrc} alt="" />}
@@ -192,13 +195,10 @@ export class LegacyTreeNodeComponent extends React.Component<
           <img className="loadingIcon" src={LoadingIndicator_3Squares} hidden={!this.props.node.isLoading} />
         </div>
         {node.children && (
-          <AnimateHeight
+          <AnimateHeight duration={TreeNodeComponent.transitionDurationMS} height={this.state.isExpanded ? "auto" : 0}>
-            duration={LegacyTreeNodeComponent.transitionDurationMS}
-            height={this.state.isExpanded ? "auto" : 0}
-          >
             <div className="nodeChildren" data-test={node.label} role="group">
-              {LegacyTreeNodeComponent.getSortedChildren(node).map((childNode: LegacyTreeNode) => (
+              {TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => (
-                <LegacyTreeNodeComponent
+                <TreeNodeComponent
                   key={`${childNode.label}-${generation + 1}-${childNode.timestamp}`}
                   node={childNode}
                   generation={generation + 1}
@@ -216,14 +216,12 @@ export class LegacyTreeNodeComponent extends React.Component<
    * Recursive: is the node or any descendant selected
    * @param node
    */
-  private static isAnyDescendantSelected(node: LegacyTreeNode): boolean {
+  private static isAnyDescendantSelected(node: TreeNode): boolean {
     return (
       node.children &&
       node.children.reduce(
-        (previous: boolean, child: LegacyTreeNode) =>
+        (previous: boolean, child: TreeNode) =>
-          previous ||
+          previous || (child.isSelected && child.isSelected()) || TreeNodeComponent.isAnyDescendantSelected(child),
-          (child.isSelected && child.isSelected()) ||
-          LegacyTreeNodeComponent.isAnyDescendantSelected(child),
         false,
       )
     );
@@ -234,10 +232,10 @@ export class LegacyTreeNodeComponent extends React.Component<
   }
 
   private onRightClick = (): void => {
-    this.contextMenuRef.current.firstChild.dispatchEvent(LegacyTreeNodeComponent.createClickEvent());
+    this.contextMenuRef.current.firstChild.dispatchEvent(TreeNodeComponent.createClickEvent());
   };
 
-  private renderContextMenuButton(node: LegacyTreeNode): JSX.Element {
+  private renderContextMenuButton(node: TreeNode): JSX.Element {
     const menuItemLabel = "More";
     const buttonStyles: Partial<IButtonStyles> = {
       rootFocused: { outline: `1px dashed ${StyleConstants.FocusColor}` },
@@ -265,9 +263,9 @@ export class LegacyTreeNodeComponent extends React.Component<
             onMenuDismissed: (contextualMenu?: IContextualMenuProps) => this.setState({ isMenuShowing: false }),
             contextualMenuItemAs: (props: IContextualMenuItemProps) => (
               <div
-                data-test={`Tree/TreeNode/MenuItem:${props.item.text}`}
+                data-test={`treeComponentMenuItemContainer`}
                 className="treeComponentMenuItemContainer"
-                onContextMenu={(e) => e.target.dispatchEvent(LegacyTreeNodeComponent.createClickEvent())}
+                onContextMenu={(e) => e.target.dispatchEvent(TreeNodeComponent.createClickEvent())}
               >
                 {props.item.onRenderIcon()}
                 <span
@@ -299,7 +297,7 @@ export class LegacyTreeNodeComponent extends React.Component<
     );
   }
 
-  private renderCollapseExpandIcon(node: LegacyTreeNode): JSX.Element {
+  private renderCollapseExpandIcon(node: TreeNode): JSX.Element {
     if (!node.children || !node.label) {
       return <></>;
     }
@@ -316,12 +314,12 @@ export class LegacyTreeNodeComponent extends React.Component<
     );
   }
 
-  private onNodeClick = (event: React.MouseEvent<HTMLDivElement>, node: LegacyTreeNode): void => {
+  private onNodeClick = (event: React.MouseEvent<HTMLDivElement>, node: TreeNode): void => {
     event.stopPropagation();
     if (node.children) {
       const isExpanded = !this.state.isExpanded;
       // Prevent collapsing if node header is blank
-      if (!(LegacyTreeNodeComponent.isNodeHeaderBlank(node) && !isExpanded)) {
+      if (!(TreeNodeComponent.isNodeHeaderBlank(node) && !isExpanded)) {
         this.setState({ isExpanded });
       }
     }
@@ -329,14 +327,14 @@ export class LegacyTreeNodeComponent extends React.Component<
     this.props.node.onClick && this.props.node.onClick(this.state.isExpanded);
   };
 
-  private onNodeKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, node: LegacyTreeNode): void => {
+  private onNodeKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, node: TreeNode): void => {
     if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
       event.stopPropagation();
       this.props.node.onClick && this.props.node.onClick(this.state.isExpanded);
     }
   };
 
-  private onCollapseExpandIconKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, node: LegacyTreeNode): void => {
+  private onCollapseExpandIconKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, node: TreeNode): void => {
     if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
       event.stopPropagation();
       if (node.children) {

src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx

@@ -1,188 +0,0 @@
-import { TreeItem, TreeItemLayout } from "@fluentui/react-components";
-import PromiseSource from "Utils/PromiseSource";
-import { mount, shallow } from "enzyme";
-import React from "react";
-import { act } from "react-dom/test-utils";
-import { TreeNode, TreeNodeComponent } from "./TreeNodeComponent";
-
-function generateTestNode(id: string, additionalProps?: Partial<TreeNode>): TreeNode {
-  const node: TreeNode = {
-    id,
-    label: `${id}Label`,
-    className: "nodeIcon",
-    iconSrc: `${id}Icon`,
-    onClick: jest.fn().mockName(`${id}Click`),
-    ...additionalProps,
-  };
-  return node;
-}
-
-describe("TreeNodeComponent", () => {
-  it("renders a single node", () => {
-    const node = generateTestNode("root");
-    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
-    expect(component).toMatchSnapshot();
-
-    // The "click" handler is actually attached to onOpenChange, with a type of "Click".
-    component
-      .find(TreeItem)
-      .props()
-      .onOpenChange(null!, { open: true, value: "borp", target: null!, event: null!, type: "Click" });
-    expect(node.onClick).toHaveBeenCalled();
-  });
-
-  it("renders a node with a menu", () => {
-    const node = generateTestNode("root", {
-      contextMenu: [
-        {
-          label: "enabledItem",
-          onClick: jest.fn().mockName("enabledItemClick"),
-        },
-        {
-          label: "disabledItem",
-          onClick: jest.fn().mockName("disabledItemClick"),
-          isDisabled: true,
-        },
-      ],
-    });
-    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
-    expect(component).toMatchSnapshot();
-  });
-
-  it("renders a loading spinner if the node is loading", async () => {
-    const loading = new PromiseSource();
-    const node = generateTestNode("root", {
-      onExpanded: () => loading.promise,
-    });
-    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
-
-    act(() => {
-      component
-        .find(TreeItem)
-        .props()
-        .onOpenChange(null!, { open: true, value: "borp", target: null!, event: null!, type: "ExpandIconClick" });
-    });
-
-    expect(component).toMatchSnapshot("loading");
-    await loading.resolveAndWait();
-    expect(component).toMatchSnapshot("loaded");
-  });
-
-  it("renders single selected leaf node as selected", () => {
-    const node = generateTestNode("root", {
-      isSelected: () => true,
-    });
-    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
-    expect(component).toMatchSnapshot();
-  });
-
-  it("renders selected parent node as selected if no descendant nodes are selected", () => {
-    const node = generateTestNode("root", {
-      isSelected: () => true,
-      children: [
-        generateTestNode("child1", {
-          children: [generateTestNode("grandchild1"), generateTestNode("grandchild2")],
-        }),
-        generateTestNode("child2"),
-      ],
-    });
-    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
-    expect(component).toMatchSnapshot();
-  });
-
-  it("renders selected parent node as unselected if any descendant node is selected", () => {
-    const node = generateTestNode("root", {
-      isSelected: () => true,
-      children: [
-        generateTestNode("child1", {
-          children: [
-            generateTestNode("grandchild1", {
-              isSelected: () => true,
-            }),
-            generateTestNode("grandchild2"),
-          ],
-        }),
-        generateTestNode("child2"),
-      ],
-    });
-    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
-    expect(component.find(TreeItemLayout).props().style?.backgroundColor).toBeUndefined();
-    expect(component).toMatchSnapshot();
-  });
-
-  it("renders an icon if the node has one", () => {
-    const node = generateTestNode("root", {
-      iconSrc: "the-icon.svg",
-    });
-    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
-    expect(component).toMatchSnapshot();
-  });
-
-  it("renders a node as expandable if it has empty, but defined, children array", () => {
-    const node = generateTestNode("root", {
-      isLoading: true,
-      children: [
-        generateTestNode("child1", {
-          children: [],
-        }),
-        generateTestNode("child2"),
-      ],
-    });
-    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
-    expect(component).toMatchSnapshot();
-  });
-
-  it("does not render children if the node is loading", () => {
-    const node = generateTestNode("root", {
-      isLoading: true,
-      children: [
-        generateTestNode("child1", {
-          children: [generateTestNode("grandchild1"), generateTestNode("grandchild2")],
-        }),
-        generateTestNode("child2"),
-      ],
-    });
-    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
-    expect(component).toMatchSnapshot();
-  });
-
-  it("fully renders a tree", () => {
-    const child3Loading = new PromiseSource();
-    const node = generateTestNode("root", {
-      isSelected: () => true,
-      children: [
-        generateTestNode("child1", {
-          children: [
-            generateTestNode("grandchild1", {
-              iconSrc: "grandchild1Icon.svg",
-              isSelected: () => true,
-            }),
-            generateTestNode("grandchild2"),
-          ],
-        }),
-        generateTestNode("child2Loading", {
-          isLoading: true,
-          children: [generateTestNode("grandchild3NotRendered")],
-        }),
-        generateTestNode("child3Expanding", {
-          onExpanded: () => child3Loading.promise,
-        }),
-      ],
-    });
-    const component = mount(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
-
-    // Find and expand the child3Expanding node
-    const expandingChild = component.find(TreeItem).filterWhere((n) => n.props().value === "root/child3ExpandingLabel");
-    act(() => {
-      expandingChild.props().onOpenChange(null!, {
-        open: true,
-        value: "root/child3ExpandingLabel",
-        target: null!,
-        event: null!,
-        type: "Click",
-      });
-    });
-
-    expect(component).toMatchSnapshot();
-  });
-});

src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx

@@ -1,236 +0,0 @@
-import {
-  Button,
-  Menu,
-  MenuItem,
-  MenuList,
-  MenuOpenChangeData,
-  MenuOpenEvent,
-  MenuPopover,
-  MenuTrigger,
-  Spinner,
-  Tree,
-  TreeItem,
-  TreeItemLayout,
-  TreeItemValue,
-  TreeOpenChangeData,
-  TreeOpenChangeEvent,
-  mergeClasses,
-} from "@fluentui/react-components";
-import { ChevronDown20Regular, ChevronRight20Regular, MoreHorizontal20Regular } from "@fluentui/react-icons";
-import { TreeStyleName, useTreeStyles } from "Explorer/Controls/TreeComponent/Styles";
-import * as React from "react";
-import { useCallback } from "react";
-
-export interface TreeNodeMenuItem {
-  label: string;
-  onClick: () => void;
-  iconSrc?: string;
-  isDisabled?: boolean;
-  styleClass?: string;
-}
-
-export interface TreeNode {
-  label: string;
-  id?: string;
-  children?: TreeNode[];
-  contextMenu?: TreeNodeMenuItem[];
-  iconSrc?: string | JSX.Element;
-  isExpanded?: boolean;
-  className?: TreeStyleName;
-  isAlphaSorted?: boolean;
-  // data?: any; // Piece of data corresponding to this node
-  timestamp?: number;
-  isLeavesParentsSeparate?: boolean; // Display parents together first, then leaves
-  isLoading?: boolean;
-  isSelected?: () => boolean;
-  onClick?: () => void; // Only if a leaf, other click will expand/collapse
-  onExpanded?: () => Promise<void>;
-  onCollapsed?: () => void;
-  onContextMenuOpen?: () => void;
-}
-
-export interface TreeNodeComponentProps {
-  node: TreeNode;
-  className?: string;
-  treeNodeId: string;
-  openItems: TreeItemValue[];
-}
-
-/** Function that returns true if any descendant (at any depth) of this node is selected. */
-function isAnyDescendantSelected(node: TreeNode): boolean {
-  return (
-    node.children &&
-    node.children.reduce(
-      (previous: boolean, child: TreeNode) =>
-        previous || (child.isSelected && child.isSelected()) || isAnyDescendantSelected(child),
-      false,
-    )
-  );
-}
-
-export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
-  node,
-  treeNodeId,
-  openItems,
-}: TreeNodeComponentProps): JSX.Element => {
-  const [isLoading, setIsLoading] = React.useState<boolean>(false);
-  const treeStyles = useTreeStyles();
-
-  const getSortedChildren = (treeNode: TreeNode): TreeNode[] => {
-    if (!treeNode || !treeNode.children) {
-      return undefined;
-    }
-
-    const compareFct = (a: TreeNode, b: TreeNode) => a.label.localeCompare(b.label);
-
-    let unsortedChildren;
-    if (treeNode.isLeavesParentsSeparate) {
-      // Separate parents and leave
-      const parents: TreeNode[] = treeNode.children.filter((node) => node.children);
-      const leaves: TreeNode[] = treeNode.children.filter((node) => !node.children);
-
-      if (treeNode.isAlphaSorted) {
-        parents.sort(compareFct);
-        leaves.sort(compareFct);
-      }
-
-      unsortedChildren = parents.concat(leaves);
-    } else {
-      unsortedChildren = treeNode.isAlphaSorted ? treeNode.children.sort(compareFct) : treeNode.children;
-    }
-
-    return unsortedChildren;
-  };
-
-  // A branch node is any node with a defined children array, even if the array is empty.
-  const isBranch = !!node.children;
-
-  const onOpenChange = useCallback(
-    (_: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
-      if (data.type === "Click" && !isBranch && node.onClick) {
-        node.onClick();
-      }
-      if (!node.isExpanded && data.open && node.onExpanded) {
-        // Catch the transition non-expanded to expanded
-        setIsLoading(true);
-        node.onExpanded?.().then(() => setIsLoading(false));
-      } else if (node.isExpanded && !data.open && node.onCollapsed) {
-        // Catch the transition expanded to non-expanded
-        node.onCollapsed?.();
-      }
-    },
-    [isBranch, node, setIsLoading],
-  );
-
-  const onMenuOpenChange = useCallback(
-    (e: MenuOpenEvent, data: MenuOpenChangeData) => {
-      if (data.open) {
-        node.onContextMenuOpen?.();
-      }
-    },
-    [node],
-  );
-
-  // We show a node as selected if it is selected AND no descendant is selected.
-  // We want to show only the deepest selected node as selected.
-  const isCurrentNodeSelected = node.isSelected && node.isSelected();
-  const shouldShowAsSelected = isCurrentNodeSelected && !isAnyDescendantSelected(node);
-
-  const contextMenuItems = (node.contextMenu ?? []).map((menuItem) => (
-    <MenuItem
-      data-test={`TreeNode/ContextMenuItem:${menuItem.label}`}
-      disabled={menuItem.isDisabled}
-      key={menuItem.label}
-      onClick={menuItem.onClick}
-    >
-      {menuItem.label}
-    </MenuItem>
-  ));
-
-  // We use the expandIcon slot to hold the node icon too.
-  // We only show a node icon for leaf nodes, even if a branch node has an iconSrc.
-  const expandIcon = isLoading ? (
-    <Spinner size="extra-tiny" />
-  ) : !isBranch ? (
-    typeof node.iconSrc === "string" ? (
-      <img src={node.iconSrc} className={treeStyles.nodeIcon} alt="" />
-    ) : (
-      node.iconSrc
-    )
-  ) : openItems.includes(treeNodeId) ? (
-    <ChevronDown20Regular />
-  ) : (
-    <ChevronRight20Regular />
-  );
-
-  const treeItem = (
-    <TreeItem
-      data-test={`TreeNodeContainer:${treeNodeId}`}
-      value={treeNodeId}
-      itemType={isBranch ? "branch" : "leaf"}
-      onOpenChange={onOpenChange}
-      className={treeStyles.treeItem}
-    >
-      <TreeItemLayout
-        className={mergeClasses(
-          treeStyles.treeItemLayout,
-          expandIcon ? undefined : treeStyles.treeItemLayoutNoIcon,
-          shouldShowAsSelected && treeStyles.selectedItem,
-          node.className && treeStyles[node.className],
-        )}
-        data-test={`TreeNode:${treeNodeId}`}
-        actions={
-          contextMenuItems.length > 0 && {
-            className: treeStyles.actionsButtonContainer,
-            children: (
-              <Menu onOpenChange={onMenuOpenChange}>
-                <MenuTrigger disableButtonEnhancement>
-                  <Button
-                    aria-label="More options"
-                    className={mergeClasses(treeStyles.actionsButton, shouldShowAsSelected && treeStyles.selectedItem)}
-                    data-test="TreeNode/ContextMenuTrigger"
-                    appearance="subtle"
-                    icon={<MoreHorizontal20Regular />}
-                  />
-                </MenuTrigger>
-                <MenuPopover data-test={`TreeNode/ContextMenu:${treeNodeId}`}>
-                  <MenuList>{contextMenuItems}</MenuList>
-                </MenuPopover>
-              </Menu>
-            ),
-          }
-        }
-        expandIcon={expandIcon}
-      >
-        <span className={treeStyles.nodeLabel}>{node.label}</span>
-      </TreeItemLayout>
-      {!node.isLoading && node.children?.length > 0 && (
-        <Tree className={treeStyles.tree}>
-          {getSortedChildren(node).map((childNode: TreeNode) => (
-            <TreeNodeComponent
-              openItems={openItems}
-              key={childNode.label}
-              node={childNode}
-              treeNodeId={`${treeNodeId}/${childNode.label}`}
-            />
-          ))}
-        </Tree>
-      )}
-    </TreeItem>
-  );
-
-  if (contextMenuItems.length === 0) {
-    return treeItem;
-  }
-
-  // For accessibility, it's highly recommended that any 'actions' also be available in the context menu.
-  // See https://react.fluentui.dev/?path=/docs/components-tree--default#actions
-  return (
-    <Menu positioning="below-end" openOnContext onOpenChange={onMenuOpenChange}>
-      <MenuTrigger disableButtonEnhancement>{treeItem}</MenuTrigger>
-      <MenuPopover>
-        <MenuList>{contextMenuItems}</MenuList>
-      </MenuPopover>
-    </Menu>
-  );
-};

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

@@ -1,27 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LegacyTreeComponent renders a simple tree 1`] = `
+exports[`TreeComponent renders a simple tree 1`] = `
 <div
   className="treeComponent tree"
   role="tree"
 >
-  <LegacyTreeNodeComponent
+  <TreeNodeComponent
     generation={0}
     node={
-      {
+      Object {
-        "children": [
+        "children": Array [
-          {
+          Object {
-            "children": [
+            "children": Array [
-              {
+              Object {
                 "label": "ZgrandChild11",
               },
-              {
+              Object {
                 "label": "AgrandChild12",
               },
             ],
             "label": "Bchild1",
           },
-          {
+          Object {
             "label": "2child2",
           },
         ],
@@ -33,19 +33,18 @@ exports[`LegacyTreeComponent renders a simple tree 1`] = `
 </div>
 `;
 
-exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
+exports[`TreeNodeComponent does not render children by default 1`] = `
 <div
   className=" main2 nodeItem "
-  data-test="Tree/TreeNode:label"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="treeitem"
 >
   <div
     className="treeNodeHeader "
-    data-test="Tree/TreeNode/Header:label"
+    data-test="label"
     style={
-      {
+      Object {
         "paddingLeft": 9,
       }
     }
@@ -56,7 +55,7 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
       className="expandCollapseIcon"
       onKeyPress={[Function]}
       role="button"
-      src={{}}
+      src={Object {}}
       tabIndex={0}
     />
     <span
@@ -78,7 +77,7 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
   <AnimateHeight
     animateOpacity={false}
     animationStateClasses={
-      {
+      Object {
         "animating": "rah-animating",
         "animatingDown": "rah-animating--down",
         "animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -96,23 +95,23 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
     duration={200}
     easing="ease"
     height={0}
-    style={{}}
+    style={Object {}}
   >
     <div
       className="nodeChildren"
       data-test="label"
       role="group"
     >
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={3}
         key="Bchild1-3-undefined"
         node={
-          {
+          Object {
-            "children": [
+            "children": Array [
-              {
+              Object {
                 "label": "ZgrandChild11",
               },
-              {
+              Object {
                 "label": "AgrandChild12",
               },
             ],
@@ -121,11 +120,11 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
         }
         paddingLeft={32}
       />
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={3}
         key="2child2-3-undefined"
         node={
-          {
+          Object {
             "label": "2child2",
           }
         }
@@ -136,10 +135,9 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
 </div>
 `;
 
-exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expanded) 1`] = `
+exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`] = `
 <div
   className="nodeClassname main12 nodeItem "
-  data-test="Tree/TreeNode:label"
   id="id"
   onClick={[Function]}
   onKeyPress={[Function]}
@@ -147,9 +145,9 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
 >
   <div
     className="treeNodeHeader "
-    data-test="Tree/TreeNode/Header:label"
+    data-test="label"
     style={
-      {
+      Object {
         "paddingLeft": 23,
       }
     }
@@ -160,7 +158,7 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
       className="expandCollapseIcon"
       onKeyPress={[Function]}
       role="button"
-      src={{}}
+      src={Object {}}
       tabIndex={0}
     />
     <span
@@ -177,10 +175,10 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
         ariaLabel="More options"
         className="treeMenuEllipsis"
         menuIconProps={
-          {
+          Object {
             "iconName": "More",
-            "styles": {
+            "styles": Object {
-              "root": {
+              "root": Object {
                 "fontSize": "18px",
                 "fontWeight": "bold",
               },
@@ -188,13 +186,13 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
           }
         }
         menuProps={
-          {
+          Object {
             "contextualMenuItemAs": [Function],
             "coverTarget": true,
             "directionalHint": 3,
             "isBeakVisible": false,
-            "items": [
+            "items": Array [
-              {
+              Object {
                 "className": undefined,
                 "disabled": true,
                 "key": "menuLabel",
@@ -209,8 +207,8 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
         }
         name="More"
         styles={
-          {
+          Object {
-            "rootFocused": {
+            "rootFocused": Object {
               "outline": "1px dashed undefined",
             },
           }
@@ -231,7 +229,7 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
   <AnimateHeight
     animateOpacity={false}
     animationStateClasses={
-      {
+      Object {
         "animating": "rah-animating",
         "animatingDown": "rah-animating--down",
         "animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -249,33 +247,33 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
     duration={200}
     easing="ease"
     height="auto"
-    style={{}}
+    style={Object {}}
   >
     <div
       className="nodeChildren"
       data-test="label"
       role="group"
     >
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={13}
         key="2child2-13-undefined"
         node={
-          {
+          Object {
             "label": "2child2",
           }
         }
         paddingLeft={214}
       />
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={13}
         key="Bchild1-13-undefined"
         node={
-          {
+          Object {
-            "children": [
+            "children": Array [
-              {
+              Object {
                 "label": "ZgrandChild11",
               },
-              {
+              Object {
                 "label": "AgrandChild12",
               },
             ],
@@ -289,19 +287,18 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
 </div>
 `;
 
-exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
+exports[`TreeNodeComponent renders loading icon 1`] = `
 <div
   className=" main2 nodeItem "
-  data-test="Tree/TreeNode:label"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="treeitem"
 >
   <div
     className="treeNodeHeader "
-    data-test="Tree/TreeNode/Header:label"
+    data-test="label"
     style={
-      {
+      Object {
         "paddingLeft": 9,
       }
     }
@@ -312,7 +309,7 @@ exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
       className="expandCollapseIcon"
       onKeyPress={[Function]}
       role="button"
-      src={{}}
+      src={Object {}}
       tabIndex={0}
     />
     <span
@@ -334,7 +331,7 @@ exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
   <AnimateHeight
     animateOpacity={false}
     animationStateClasses={
-      {
+      Object {
         "animating": "rah-animating",
         "animatingDown": "rah-animating--down",
         "animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -352,7 +349,7 @@ exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
     duration={200}
     easing="ease"
     height="auto"
-    style={{}}
+    style={Object {}}
   >
     <div
       className="nodeChildren"
@@ -363,10 +360,9 @@ exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
 </div>
 `;
 
-exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and parents separated 1`] = `
+exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents separated 1`] = `
 <div
   className="nodeClassname main12 nodeItem "
-  data-test="Tree/TreeNode:label"
   id="id"
   onClick={[Function]}
   onKeyPress={[Function]}
@@ -374,9 +370,9 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
 >
   <div
     className="treeNodeHeader "
-    data-test="Tree/TreeNode/Header:label"
+    data-test="label"
     style={
-      {
+      Object {
         "paddingLeft": 23,
       }
     }
@@ -387,7 +383,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
       className="expandCollapseIcon"
       onKeyPress={[Function]}
       role="button"
-      src={{}}
+      src={Object {}}
       tabIndex={0}
     />
     <span
@@ -404,10 +400,10 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
         ariaLabel="More options"
         className="treeMenuEllipsis"
         menuIconProps={
-          {
+          Object {
             "iconName": "More",
-            "styles": {
+            "styles": Object {
-              "root": {
+              "root": Object {
                 "fontSize": "18px",
                 "fontWeight": "bold",
               },
@@ -415,20 +411,20 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
           }
         }
         menuProps={
-          {
+          Object {
             "contextualMenuItemAs": [Function],
             "coverTarget": true,
             "directionalHint": 3,
             "isBeakVisible": false,
-            "items": [],
+            "items": Array [],
             "onMenuDismissed": [Function],
             "onMenuOpened": [Function],
           }
         }
         name="More"
         styles={
-          {
+          Object {
-            "rootFocused": {
+            "rootFocused": Object {
               "outline": "1px dashed undefined",
             },
           }
@@ -449,7 +445,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
   <AnimateHeight
     animateOpacity={false}
     animationStateClasses={
-      {
+      Object {
         "animating": "rah-animating",
         "animatingDown": "rah-animating--down",
         "animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -467,23 +463,23 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
     duration={200}
     easing="ease"
     height="auto"
-    style={{}}
+    style={Object {}}
   >
     <div
       className="nodeChildren"
       data-test="label"
       role="group"
     >
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={13}
         key="bchild-13-undefined"
         node={
-          {
+          Object {
-            "children": [
+            "children": Array [
-              {
+              Object {
                 "label": "ZgrandChild11",
               },
-              {
+              Object {
                 "label": "AgrandChild12",
               },
             ],
@@ -492,16 +488,16 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
         }
         paddingLeft={192}
       />
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={13}
         key="dchild-13-undefined"
         node={
-          {
+          Object {
-            "children": [
+            "children": Array [
-              {
+              Object {
                 "label": "ZgrandChild11",
               },
-              {
+              Object {
                 "label": "AgrandChild12",
               },
             ],
@@ -510,21 +506,21 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
         }
         paddingLeft={192}
       />
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={13}
         key="aChild-13-undefined"
         node={
-          {
+          Object {
             "label": "aChild",
           }
         }
         paddingLeft={214}
       />
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={13}
         key="cchild-13-undefined"
         node={
-          {
+          Object {
             "label": "cchild",
           }
         }
@@ -535,19 +531,18 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
 </div>
 `;
 
-exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
+exports[`TreeNodeComponent renders unsorted children by default 1`] = `
 <div
   className=" main2 nodeItem "
-  data-test="Tree/TreeNode:label"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="treeitem"
 >
   <div
     className="treeNodeHeader "
-    data-test="Tree/TreeNode/Header:label"
+    data-test="label"
     style={
-      {
+      Object {
         "paddingLeft": 9,
       }
     }
@@ -558,7 +553,7 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
       className="expandCollapseIcon"
       onKeyPress={[Function]}
       role="button"
-      src={{}}
+      src={Object {}}
       tabIndex={0}
     />
     <span
@@ -580,7 +575,7 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
   <AnimateHeight
     animateOpacity={false}
     animationStateClasses={
-      {
+      Object {
         "animating": "rah-animating",
         "animatingDown": "rah-animating--down",
         "animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -598,23 +593,23 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
     duration={200}
     easing="ease"
     height="auto"
-    style={{}}
+    style={Object {}}
   >
     <div
       className="nodeChildren"
       data-test="label"
       role="group"
     >
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={3}
         key="Bchild1-3-undefined"
         node={
-          {
+          Object {
-            "children": [
+            "children": Array [
-              {
+              Object {
                 "label": "ZgrandChild11",
               },
-              {
+              Object {
                 "label": "AgrandChild12",
               },
             ],
@@ -623,11 +618,11 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
         }
         paddingLeft={32}
       />
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={3}
         key="2child2-3-undefined"
         node={
-          {
+          Object {
             "label": "2child2",
           }
         }

src/Explorer/Controls/TreeComponent2/TreeNode2Component.tsx

@@ -0,0 +1,147 @@
+import {
+  Button,
+  Menu,
+  MenuItem,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+  Spinner,
+  Tree,
+  TreeItem,
+  TreeItemLayout,
+  TreeOpenChangeData,
+  TreeOpenChangeEvent,
+} from "@fluentui/react-components";
+import { MoreHorizontal20Regular } from "@fluentui/react-icons";
+import { tokens } from "@fluentui/react-theme";
+import * as React from "react";
+
+export interface TreeNode2MenuItem {
+  label: string;
+  onClick: () => void;
+  iconSrc?: string;
+  isDisabled?: boolean;
+  styleClass?: string;
+}
+
+export interface TreeNode2 {
+  label: string;
+  id?: string;
+  children?: TreeNode2[];
+  contextMenu?: TreeNode2MenuItem[];
+  iconSrc?: string;
+  isExpanded?: boolean;
+  className?: string;
+  isAlphaSorted?: boolean;
+  // data?: any; // Piece of data corresponding to this node
+  timestamp?: number;
+  isLeavesParentsSeparate?: boolean; // Display parents together first, then leaves
+  isLoading?: boolean;
+  isScrollable?: boolean;
+  isSelected?: () => boolean;
+  onClick?: () => void; // Only if a leaf, other click will expand/collapse
+  onExpanded?: () => Promise<void>;
+  onCollapsed?: () => void;
+  onContextMenuOpen?: () => void;
+}
+
+export interface TreeNode2ComponentProps {
+  node: TreeNode2;
+  className?: string;
+  treeNodeId: string;
+}
+
+const getTreeIcon = (iconSrc: string): JSX.Element => <img src={iconSrc} alt="" style={{ width: 20, height: 20 }} />;
+
+export const TreeNode2Component: React.FC<TreeNode2ComponentProps> = ({
+  node,
+  treeNodeId,
+}: TreeNode2ComponentProps): JSX.Element => {
+  const [isLoading, setIsLoading] = React.useState<boolean>(false);
+
+  const getSortedChildren = (treeNode: TreeNode2): TreeNode2[] => {
+    if (!treeNode || !treeNode.children) {
+      return undefined;
+    }
+
+    const compareFct = (a: TreeNode2, b: TreeNode2) => a.label.localeCompare(b.label);
+
+    let unsortedChildren;
+    if (treeNode.isLeavesParentsSeparate) {
+      // Separate parents and leave
+      const parents: TreeNode2[] = treeNode.children.filter((node) => node.children);
+      const leaves: TreeNode2[] = treeNode.children.filter((node) => !node.children);
+
+      if (treeNode.isAlphaSorted) {
+        parents.sort(compareFct);
+        leaves.sort(compareFct);
+      }
+
+      unsortedChildren = parents.concat(leaves);
+    } else {
+      unsortedChildren = treeNode.isAlphaSorted ? treeNode.children.sort(compareFct) : treeNode.children;
+    }
+
+    return unsortedChildren;
+  };
+
+  const onOpenChange = (_: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
+    if (!node.isExpanded && data.open && node.onExpanded) {
+      // Catch the transition non-expanded to expanded
+      setIsLoading(true);
+      node.onExpanded?.().then(() => setIsLoading(false));
+    } else if (node.isExpanded && !data.open && node.onCollapsed) {
+      // Catch the transition expanded to non-expanded
+      node.onCollapsed?.();
+    }
+  };
+
+  return (
+    <TreeItem
+      value={treeNodeId}
+      itemType={node.children !== undefined ? "branch" : "leaf"}
+      style={{ height: "100%" }}
+      onOpenChange={onOpenChange}
+    >
+      <TreeItemLayout
+        className={node.className}
+        actions={
+          node.contextMenu && (
+            <Menu>
+              <MenuTrigger disableButtonEnhancement>
+                <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
+              </MenuTrigger>
+              <MenuPopover>
+                <MenuList>
+                  {node.contextMenu.map((menuItem) => (
+                    <MenuItem disabled={menuItem.isDisabled} key={menuItem.label} onClick={menuItem.onClick}>
+                      {menuItem.label}
+                    </MenuItem>
+                  ))}
+                </MenuList>
+              </MenuPopover>
+            </Menu>
+          )
+        }
+        expandIcon={isLoading ? <Spinner size="extra-tiny" /> : undefined}
+        iconBefore={node.iconSrc && getTreeIcon(node.iconSrc)}
+        style={{
+          backgroundColor: node.isSelected && node.isSelected() ? tokens.colorNeutralBackground1Selected : undefined,
+        }}
+      >
+        <span onClick={() => node.onClick?.()}>{node.label}</span>
+      </TreeItemLayout>
+      {!node.isLoading && node.children?.length > 0 && (
+        <Tree style={{ overflow: node.isScrollable ? "auto" : undefined }}>
+          {getSortedChildren(node).map((childNode: TreeNode2) => (
+            <TreeNode2Component
+              key={childNode.label}
+              node={childNode}
+              treeNodeId={`${treeNodeId}/${childNode.label}`}
+            />
+          ))}
+        </Tree>
+      )}
+    </TreeItem>
+  );
+};

src/Explorer/Explorer.tsx

@@ -1,17 +1,13 @@
-import * as msal from "@azure/msal-browser";
 import { Link } from "@fluentui/react/lib/Link";
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
 import { sendMessage } from "Common/MessageHandler";
 import { Platform, configContext } from "ConfigContext";
 import { MessageTypes } from "Contracts/ExplorerContracts";
-import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { IGalleryItem } from "Juno/JunoClient";
 import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { acquireTokenWithMsal, getMsalInstance } from "Utils/AuthorizationUtils";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointUtils";
-import { update } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as ko from "knockout";
 import React from "react";
@@ -34,13 +30,15 @@ import { PhoenixClient } from "../Phoenix/PhoenixClient";
 import * as ExplorerSettings from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
-import { isAccountNewerThanThresholdInMs, updateUserContext, userContext } from "../UserContext";
+import { isAccountNewerThanThresholdInMs, userContext } from "../UserContext";
 import { getCollectionName, getUploadName } from "../Utils/APITypeUtils";
 import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
 import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
+import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
+import { listByDatabaseAccount } from "../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { useTabs } from "../hooks/useTabs";
 import "./ComponentRegisterer";
@@ -58,6 +56,7 @@ import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import { CassandraAddCollectionPane } from "./Panes/CassandraAddCollectionPane/CassandraAddCollectionPane";
 import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane";
 import { StringInputPane } from "./Panes/StringInputPane/StringInputPane";
+import { UploadFilePane } from "./Panes/UploadFilePane/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane/UploadItemsPane";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
 import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
@@ -139,6 +138,14 @@ export default class Explorer {
 
     this.isTabsContentExpanded = ko.observable(false);
 
+    document.addEventListener(
+      "contextmenu",
+      (e) => {
+        e.preventDefault();
+      },
+      false,
+    );
+
     $(() => {
       $(document.body).click(() => $(".commandDropdownContainer").hide());
     });
@@ -254,48 +261,12 @@ export default class Explorer {
     };
     useDialog.getState().openDialog(addSynapseLinkDialogProps);
     TelemetryProcessor.traceStart(Action.EnableAzureSynapseLink);
-  }
 
-  public async openLoginForEntraIDPopUp(): Promise<void> {
+    // TODO: return result
-    if (userContext.databaseAccount.properties?.documentEndpoint) {
-      const hrefEndpoint = new URL(userContext.databaseAccount.properties.documentEndpoint).href.replace(
-        /\/$/,
-        "/.default",
-      );
-      const msalInstance = await getMsalInstance();
-
-      try {
-        const response = await msalInstance.loginPopup({
-          redirectUri: configContext.msalRedirectURI,
-          scopes: [],
-        });
-        localStorage.setItem("cachedTenantId", response.tenantId);
-        const cachedAccount = msalInstance.getAllAccounts()?.[0];
-        msalInstance.setActiveAccount(cachedAccount);
-        const aadToken = await acquireTokenWithMsal(msalInstance, {
-          forceRefresh: true,
-          scopes: [hrefEndpoint],
-          authority: `${configContext.AAD_ENDPOINT}${localStorage.getItem("cachedTenantId")}`,
-        });
-        updateUserContext({ aadToken: aadToken });
-        useDataPlaneRbac.setState({ aadTokenUpdated: true });
-      } catch (error) {
-        if (error instanceof msal.AuthError && error.errorCode === msal.BrowserAuthErrorMessage.popUpWindowError.code) {
-          logConsoleError(
-            "We were unable to establish authorization for this account, due to pop-ups being disabled in the browser.\nPlease enable pop-ups for this site and try again",
-          );
-        } else {
-          const errorJson = JSON.stringify(error);
-          logConsoleError(
-            `Failed to perform authorization for this account, due to the following error: \n${errorJson}`,
-          );
-        }
-      }
-    }
   }
 
   public openNPSSurveyDialog(): void {
-    if (!Platform.Portal || !["Postgres", "SQL", "Mongo"].includes(userContext.apiType)) {
+    if (!Platform.Portal) {
       return;
     }
 
@@ -393,16 +364,16 @@ export default class Explorer {
     return true;
   };
 
-  public onRefreshResourcesClick = async (): Promise<void> => {
+  public onRefreshResourcesClick = (): void => {
     if (configContext.platform === Platform.Fabric) {
       scheduleRefreshDatabaseResourceToken(true).then(() => this.refreshAllDatabases());
       return;
     }
 
-    await (userContext.authType === AuthType.ResourceToken
+    userContext.authType === AuthType.ResourceToken
       ? this.refreshDatabaseForResourceToken()
-      : this.refreshAllDatabases());
+      : this.refreshAllDatabases();
-    await this.refreshNotebookList();
+    this.refreshNotebookList();
   };
 
   // Facade
@@ -539,6 +510,104 @@ export default class Explorer {
         .then((memoryUsageInfo) => useNotebook.getState().setMemoryUsageInfo(memoryUsageInfo));
   }
 
+  public resetNotebookWorkspace(): void {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookClient) {
+      handleError(
+        "Attempt to reset notebook workspace, but notebook is not enabled",
+        "Explorer/resetNotebookWorkspace",
+      );
+      return;
+    }
+    const dialogContent = useNotebook.getState().isPhoenixNotebooks
+      ? "Notebooks saved in the temporary workspace will be deleted. Do you want to proceed?"
+      : "This lets you keep your notebook files and the workspace will be restored to default. Proceed anyway?";
+
+    const resetConfirmationDialogProps: DialogProps = {
+      isModal: true,
+      title: "Reset Workspace",
+      subText: dialogContent,
+      primaryButtonText: "OK",
+      secondaryButtonText: "Cancel",
+      onPrimaryButtonClick: this._resetNotebookWorkspace,
+      onSecondaryButtonClick: () => useDialog.getState().closeDialog(),
+    };
+    useDialog.getState().openDialog(resetConfirmationDialogProps);
+  }
+
+  private async _containsDefaultNotebookWorkspace(databaseAccount: DataModels.DatabaseAccount): Promise<boolean> {
+    if (!databaseAccount) {
+      return false;
+    }
+    try {
+      const { value: workspaces } = await listByDatabaseAccount(
+        userContext.subscriptionId,
+        userContext.resourceGroup,
+        userContext.databaseAccount.name,
+      );
+      return workspaces && workspaces.length > 0 && workspaces.some((workspace) => workspace.name === "default");
+    } catch (error) {
+      Logger.logError(getErrorMessage(error), "Explorer/_containsDefaultNotebookWorkspace");
+      return false;
+    }
+  }
+
+  private _resetNotebookWorkspace = async () => {
+    useDialog.getState().closeDialog();
+    const clearInProgressMessage = logConsoleProgress("Resetting notebook workspace");
+    let connectionStatus: ContainerConnectionInfo;
+    try {
+      const notebookServerInfo = useNotebook.getState().notebookServerInfo;
+      if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
+        const error = "No server endpoint detected";
+        Logger.logError(error, "NotebookContainerClient/resetWorkspace");
+        logConsoleError(error);
+        return;
+      }
+      TelemetryProcessor.traceStart(Action.PhoenixResetWorkspace, {
+        dataExplorerArea: Areas.Notebook,
+      });
+      if (useNotebook.getState().isPhoenixNotebooks) {
+        useTabs.getState().closeAllNotebookTabs(true);
+        connectionStatus = {
+          status: ConnectionStatusType.Connecting,
+        };
+        useNotebook.getState().setConnectionInfo(connectionStatus);
+      }
+      const connectionInfo = await this.notebookManager?.notebookClient.resetWorkspace();
+      if (connectionInfo?.status !== HttpStatusCodes.OK) {
+        throw new Error(`Reset Workspace: Received status code- ${connectionInfo?.status}`);
+      }
+      if (!connectionInfo?.data?.phoenixServiceUrl) {
+        throw new Error(`Reset Workspace: PhoenixServiceUrl is invalid!`);
+      }
+      if (useNotebook.getState().isPhoenixNotebooks) {
+        await this.setNotebookInfo(true, connectionInfo, connectionStatus);
+        useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
+      }
+      logConsoleInfo("Successfully reset notebook workspace");
+      TelemetryProcessor.traceSuccess(Action.PhoenixResetWorkspace, {
+        dataExplorerArea: Areas.Notebook,
+      });
+    } catch (error) {
+      logConsoleError(`Failed to reset notebook workspace: ${error}`);
+      TelemetryProcessor.traceFailure(Action.PhoenixResetWorkspace, {
+        dataExplorerArea: Areas.Notebook,
+        error: getErrorMessage(error),
+        errorStack: getErrorStack(error),
+      });
+      if (useNotebook.getState().isPhoenixNotebooks) {
+        connectionStatus = {
+          status: ConnectionStatusType.Failed,
+        };
+        useNotebook.getState().resetContainerConnection(connectionStatus);
+        useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
+      }
+      throw error;
+    } finally {
+      clearInProgressMessage();
+    }
+  };
+
   private getDeltaDatabases(
     updatedDatabaseList: DataModels.Database[],
     databases: ViewModels.Database[],
@@ -941,6 +1010,92 @@ export default class Explorer {
     );
   }
 
+  /**
+   * This creates a new notebook file, then opens the notebook
+   */
+  public async onNewNotebookClicked(parent?: NotebookContentItem, isGithubTree?: boolean): Promise<void> {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      const error = "Attempt to create new notebook, but notebook is not enabled";
+      handleError(error, "Explorer/onNewNotebookClicked");
+      throw new Error(error);
+    }
+    if (useNotebook.getState().isPhoenixNotebooks) {
+      if (isGithubTree) {
+        await this.allocateContainer(PoolIdType.DefaultPoolId);
+        parent = parent || this.resourceTree.myNotebooksContentRoot;
+        this.createNewNoteBook(parent, isGithubTree);
+      } else {
+        useDialog.getState().showOkCancelModalDialog(
+          Notebook.newNotebookModalTitle,
+          undefined,
+          "Create",
+          async () => {
+            await this.allocateContainer(PoolIdType.DefaultPoolId);
+            parent = parent || this.resourceTree.myNotebooksContentRoot;
+            this.createNewNoteBook(parent, isGithubTree);
+          },
+          "Cancel",
+          undefined,
+          this.getNewNoteWarningText(),
+        );
+      }
+    } else {
+      parent = parent || this.resourceTree.myNotebooksContentRoot;
+      this.createNewNoteBook(parent, isGithubTree);
+    }
+  }
+
+  private getNewNoteWarningText(): JSX.Element {
+    return (
+      <>
+        <p>{Notebook.newNotebookModalContent1}</p>
+        <br />
+        <p>
+          {Notebook.newNotebookModalContent2}
+          <Link href={Notebook.cosmosNotebookHomePageUrl} target="_blank">
+            {Notebook.learnMore}
+          </Link>
+        </p>
+      </>
+    );
+  }
+
+  private createNewNoteBook(parent?: NotebookContentItem, isGithubTree?: boolean): void {
+    const clearInProgressMessage = logConsoleProgress(`Creating new notebook in ${parent.path}`);
+    const startKey: number = TelemetryProcessor.traceStart(Action.CreateNewNotebook, {
+      dataExplorerArea: Constants.Areas.Notebook,
+    });
+
+    this.notebookManager?.notebookContentClient
+      .createNewNotebookFile(parent, isGithubTree)
+      .then((newFile: NotebookContentItem) => {
+        logConsoleInfo(`Successfully created: ${newFile.name}`);
+        TelemetryProcessor.traceSuccess(
+          Action.CreateNewNotebook,
+          {
+            dataExplorerArea: Constants.Areas.Notebook,
+          },
+          startKey,
+        );
+        return this.openNotebook(newFile);
+      })
+      .then(() => this.resourceTree.triggerRender())
+      .catch((error) => {
+        const errorMessage = `Failed to create a new notebook: ${getErrorMessage(error)}`;
+        logConsoleError(errorMessage);
+        TelemetryProcessor.traceFailure(
+          Action.CreateNewNotebook,
+          {
+            dataExplorerArea: Constants.Areas.Notebook,
+            error: errorMessage,
+            errorStack: getErrorStack(error),
+          },
+          startKey,
+        );
+      })
+      .finally(clearInProgressMessage);
+  }
+
   // TODO: Delete this function when ResourceTreeAdapter is removed.
   public async refreshContentItem(item: NotebookContentItem): Promise<void> {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
@@ -975,6 +1130,10 @@ export default class Explorer {
     let title: string;
 
     switch (kind) {
+      case ViewModels.TerminalKind.Default:
+        title = "Terminal";
+        break;
+
       case ViewModels.TerminalKind.Mongo:
         title = "Mongo Shell";
         break;
@@ -1128,6 +1287,36 @@ export default class Explorer {
       .openSidePanel("Input parameters", <ExecuteSprocParamsPane storedProcedure={storedProcedure} />);
   }
 
+  public openUploadFilePanel(parent?: NotebookContentItem): void {
+    if (useNotebook.getState().isPhoenixNotebooks) {
+      useDialog.getState().showOkCancelModalDialog(
+        Notebook.newNotebookUploadModalTitle,
+        undefined,
+        "Upload",
+        async () => {
+          await this.allocateContainer(PoolIdType.DefaultPoolId);
+          parent = parent || this.resourceTree.myNotebooksContentRoot;
+          this.uploadFilePanel(parent);
+        },
+        "Cancel",
+        undefined,
+        this.getNewNoteWarningText(),
+      );
+    } else {
+      parent = parent || this.resourceTree.myNotebooksContentRoot;
+      this.uploadFilePanel(parent);
+    }
+  }
+
+  private uploadFilePanel(parent?: NotebookContentItem): void {
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Upload file to notebook server",
+        <UploadFilePane uploadFile={(name: string, content: string) => this.uploadFile(name, content, parent)} />,
+      );
+  }
+
   public getDownloadModalConent(fileName: string): JSX.Element {
     if (useNotebook.getState().isPhoenixNotebooks) {
       return (
@@ -1196,25 +1385,21 @@ export default class Explorer {
   }
 
   public async refreshSampleData(): Promise<void> {
-    try {
+    if (!userContext.sampleDataConnectionInfo) {
-      if (!userContext.sampleDataConnectionInfo) {
-        return;
-      }
-      const collection: DataModels.Collection = await readSampleCollection();
-      if (!collection) {
-        return;
-      }
-
-      const databaseId = userContext.sampleDataConnectionInfo?.databaseId;
-      if (!databaseId) {
-        return;
-      }
-
-      const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection, true);
-      useDatabases.setState({ sampleDataResourceTokenCollection });
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "Explorer");
       return;
     }
+
+    const collection: DataModels.Collection = await readSampleCollection();
+    if (!collection) {
+      return;
+    }
+
+    const databaseId = userContext.sampleDataConnectionInfo?.databaseId;
+    if (!databaseId) {
+      return;
+    }
+
+    const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection, true);
+    useDatabases.setState({ sampleDataResourceTokenCollection });
   }
 }

src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts

@@ -737,17 +737,17 @@ export class D3ForceGraph implements GraphRenderer {
       .on("dblclick", function (this: Element, _: MouseEvent, d: D3Node) {
         // https://stackoverflow.com/a/41945742 ('this' implicitly has type 'any' because it does not have a type annotation)
         // this is the <g> element
-        self.onNodeClicked(this.parentNode as BaseType, d);
+        self.onNodeClicked(this.parentNode, d);
       })
       .on("click", function (this: Element, _: MouseEvent, d: D3Node) {
         // this is the <g> element
-        self.onNodeClicked(this.parentNode as BaseType, d);
+        self.onNodeClicked(this.parentNode, d);
       })
       .on("keypress", function (this: Element, event: KeyboardEvent, d: D3Node) {
         if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
           event.stopPropagation();
           // this is the <g> element
-          self.onNodeClicked(this.parentNode as BaseType, d);
+          self.onNodeClicked(this.parentNode, d);
         }
       });
     var nodeSize = this.igraphConfig.nodeSize;

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

@@ -1,4 +1,4 @@
-import { GraphData, GremlinEdge, GremlinVertex } from "./GraphData";
+import { GraphData, GremlinVertex, GremlinEdge } from "./GraphData";
 
 describe("Graph Data", () => {
   it("should set only one node as root", () => {
@@ -54,12 +54,12 @@ describe("Graph Data", () => {
     // in edge
     graphData.removeEdge("e1", false);
     expect(graphData.edges.length).toBe(1);
-    expect(graphData).not.toContainEqual({ id: "e1" });
+    expect(graphData).not.toContain(jasmine.objectContaining({ id: "e1" }));
 
     // out edge
     graphData.removeEdge("e2", false);
     expect(graphData.edges.length).toBe(0);
-    expect(graphData).not.toContainEqual({ id: "e2" });
+    expect(graphData).not.toContain(jasmine.objectContaining({ id: "e2" }));
   });
 
   it("should get string node property", () => {

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

@@ -342,7 +342,7 @@ describe("GraphExplorer", () => {
     });
 
     describe("Load Graph button", () => {
-      beforeEach((done) => {
+      beforeEach(async (done) => {
         const backendResponses: BackendResponses = {};
         backendResponses["g.V()"] = backendResponses["g.V('1')"] = {
           response: [{ id: "1", type: "vertex" }],
@@ -632,15 +632,24 @@ describe("GraphExplorer", () => {
 
       it("should display RU consumption", () => {
         // Find link for query stats
-        const queryStatsTab = wrapper.find(`button[name="${GraphExplorer.QUERY_STATS_BUTTON_LABEL}"]`);
+        const links = wrapper.find(".toggleSwitch");
-        queryStatsTab.simulate("click");
-        const values = wrapper.find(".queryMetricsSummary td");
         let isRUDisplayed = false;
-        values.forEach((value) => {
+        for (let i = 0; i < links.length; i++) {
-          if (Number(value.text()) === gVRU) {
+          const link = links.at(i);
-            isRUDisplayed = true;
+          if (link.text() === GraphExplorer.QUERY_STATS_BUTTON_LABEL) {
+            link.simulate("click");
+
+            const values = wrapper.find(".queryMetricsSummary td");
+            for (let j = 0; j < values.length; j++) {
+              if (Number(values.at(j).text()) === gVRU) {
+                isRUDisplayed = true;
+                break;
+              }
+            }
+            break;
           }
-        });
+        }
+
         expect(isRUDisplayed).toBe(true);
       });
     });

src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts

@@ -162,7 +162,7 @@ export const addRootChildToGraph = (
  * @param value
  */
 export const escapeDoubleQuotes = (value: string): string => {
-  return value === undefined ? value : value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+  return value === undefined ? value : value.replace(/"/g, '\\"');
 };
 
 /**
@@ -186,5 +186,5 @@ export const getQuotedPropValue = (ip: ViewModels.InputPropertyValue): string =>
  * @param value
  */
 export const escapeSingleQuotes = (value: string): string => {
-  return value === undefined ? value : value.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+  return value === undefined ? value : value.replace(/'/g, "\\'");
 };

src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx

@@ -348,9 +348,8 @@ export class NodePropertiesComponent extends React.Component<
           as="span"
           onActivated={this.setIsDeleteConfirm.bind(this, true)}
           aria-label="Delete this vertex"
-          role="button"
         >
-          <img src={DeleteIcon} alt="Delete" aria-label="hidden" />
+          <img src={DeleteIcon} alt="Delete" />
         </AccessibleElement>
       );
     } else {
@@ -406,9 +405,8 @@ export class NodePropertiesComponent extends React.Component<
               as="span"
               aria-label="Edit properties"
               onActivated={expandClickHandler}
-              role="button"
             >
-              <img src={EditIcon} alt="Edit" aria-label="hidden" />
+              <img src={EditIcon} alt="Edit" />
             </AccessibleElement>
           )}
 

src/Explorer/Graph/GraphExplorerComponent/__snapshots__/EditorNodePropertiesComponent.test.tsx.snap

@@ -128,7 +128,7 @@ exports[`<EditorNodePropertiesComponent /> renders component 1`] = `
         >
           <img
             alt="Delete"
-            src={{}}
+            src={Object {}}
           />
         </AccessibleElement>
       </td>
@@ -185,7 +185,7 @@ exports[`<EditorNodePropertiesComponent /> renders component 1`] = `
         >
           <img
             alt="Delete"
-            src={{}}
+            src={Object {}}
           />
         </AccessibleElement>
       </td>
@@ -203,7 +203,7 @@ exports[`<EditorNodePropertiesComponent /> renders component 1`] = `
         >
           <img
             alt="Add"
-            src={{}}
+            src={Object {}}
           />
            Add Property
         </AccessibleElement>
@@ -317,7 +317,7 @@ exports[`<EditorNodePropertiesComponent /> renders proper unicode 1`] = `
         >
           <img
             alt="Delete"
-            src={{}}
+            src={Object {}}
           />
         </AccessibleElement>
       </td>
@@ -379,7 +379,7 @@ exports[`<EditorNodePropertiesComponent /> renders proper unicode 1`] = `
         >
           <img
             alt="Delete"
-            src={{}}
+            src={Object {}}
           />
         </AccessibleElement>
       </td>
@@ -397,7 +397,7 @@ exports[`<EditorNodePropertiesComponent /> renders proper unicode 1`] = `
         >
           <img
             alt="Add"
-            src={{}}
+            src={Object {}}
           />
            Add Property
         </AccessibleElement>