test commit

.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

@@ -8,9 +8,6 @@ on:
   pull_request:
     branches:
       - master
-permissions:
-  id-token: write
-  contents: read
 jobs:
   codemetrics:
     runs-on: ubuntu-latest
@@ -104,6 +101,72 @@ 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
+      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
+    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/notebooks/upload.spec.ts // TEMP disabled since notebooks service is off
+          - ./test/sql/resourceToken.spec.ts
+          - ./test/tables/container.spec.ts
+    steps:
+      - uses: actions/checkout@v4
+      - 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 +216,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

.github/workflows/cleanup.yml

@@ -9,10 +9,6 @@ on:
     # Once every hour
     - cron: "0 15 * * *"
 
-permissions:
-  id-token: write
-  contents: read
-
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
   # This workflow contains a single job called "build"
@@ -20,17 +16,10 @@ jobs:
     name: "Cleanup Test Database Accounts"
     runs-on: ubuntu-latest
     env:
-      AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
+      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
     steps:
       - uses: actions/checkout@v2
-
-      - 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@v1
         with:

.gitignore

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

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,10 +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",
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
@@ -134,6 +130,7 @@ module.exports = {
 
   // The test environment that will be used for testing
   // testEnvironment: "jest-environment-jsdom",
+
   modulePaths: ["node_modules", "<rootDir>/src"],
 
   // Options that will be passed to the testEnvironment

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;
@@ -336,11 +335,4 @@
   width: 0;
   height: 0;
   border-color: @InfoPointerColor transparent;
-}
-/*********************************************************************************************************
-                           Screen Reader Only
-**********************************************************************************************************/
-.screenReaderOnly {
-  position: absolute;
-  left: -9999px;
 }

less/documentDB.less

@@ -2264,49 +2264,38 @@ a:link {
   width: 82px;
 }
 
-// .tabdocuments .scrollable {
-//   height: 100%;
-//   overflow-y: auto;
-//   overflow-x: hidden;
-//   padding-left: 5px;
-//   padding-right: 5px;
-//   width: 100%;
-// }
+.tabdocuments .scrollable {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-left: 5px;
+  padding-right: 5px;
+  width: 100%;
+}
 
-// .tabdocuments > .tabdocumentsGridElement {
-//   width: 50%;
-// }
+.tabdocuments > .tabdocumentsGridElement {
+  width: 50%;
+}
 
-// .tabdocuments > .evenlySpacedHeader {
-//   width: 30%;
-// }
+.tabdocuments > .evenlySpacedHeader {
+  width: 30%;
+}
 
-// .tabdocuments.scrollable:focus,
-// .tabdocuments.scrollable:active {
-//   outline: 1px dotted;
-// }
+.tabdocuments.scrollable:focus,
+.tabdocuments.scrollable:active {
+  outline: 1px dotted;
+}
 
-// .tabdocuments .scrollable table td {
-//   white-space: nowrap;
-//   overflow: hidden;
-//   text-overflow: ellipsis;
-// }
+.tabdocuments .scrollable table td {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .mongoDocumentEditor .monaco-editor.vs .redsquiggly {
   display: none !important;
 }
 
-.monaco-editor .quick-input-list-label {
-  /* Restore some of Monaco's default styles that are clobbered by our global styles */
-  padding: 0;
-  line-height: 22px;
-}
-
-.monaco-editor .quick-input-list .highlight {
-  /* Padding in highlighted text within the quick input list breaks the flow of the text */
-  padding: 0;
-}
-
 td a {
   color: #393939;
 }
@@ -2316,9 +2305,10 @@ td a:hover {
 }
 
 .loadMore {
-  display: block;
   width: 100%;
-  text-align: center;
+  padding-left: 30%;
+  padding-top: 2px;
+  cursor: pointer;
 }
 
 .loadMore > a:focus {
@@ -2366,9 +2356,9 @@ a:link {
 .tabsManagerContainer {
   height: 100%;
   flex-grow: 1;
-  display: flex;
-  flex-direction: column;
+  overflow: hidden;
   min-height: 300px;
+  overflow-y: scroll;
 }
 
 .tabs {
@@ -2557,12 +2547,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 {
@@ -2579,18 +2567,6 @@ a:link {
   cursor: pointer;
 }
 
-.documentsTab {
-  .documentsTable {
-    .documentsTableCell {
-      border-left: 1px solid @BaseMedium;
-      height: 100%;
-    }
-    .documentsTableHeader {
-      border-bottom: 1px solid @BaseMedium;
-    }
-  }
-}
-
 .querydropdown {
   border: 1px solid @BaseMedium;
   font-style: normal;
@@ -2671,7 +2647,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);
 }
@@ -2707,71 +2683,67 @@ a:link {
     width: @TabsWidth;
     border-right: @ButtonBorderWidth solid @BaseMedium;
     white-space: nowrap;
-    .contentWrapper {
-      .flex-display();
-      width: @ContentWrapper;
 
-      .statusIconContainer {
-        width: @StatusIconContainerSize;
-        height: @StatusIconContainerSize;
-        margin-left: @SmallSpace;
-        display: inline-flex;
+    .statusIconContainer {
+      width: @StatusIconContainerSize;
+      height: @StatusIconContainerSize;
+      margin-left: @SmallSpace;
+      display: inline-flex;
 
-        .errorIconContainer {
-          width: @ErrorIconContainer;
-          height: @ErrorIconContainer;
-          margin-top: 1px;
+      .errorIconContainer {
+        width: @ErrorIconContainer;
+        height: @ErrorIconContainer;
+        margin-top: 1px;
 
-          .errorIcon {
-            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;
+        .errorIcon {
+          width: @ErrorIconWidth;
           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 {
-        margin-left: @SmallSpace;
-        margin-right: 2px;
-        color: @BaseDark;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        flex-grow: 1;
+      .errorIconContainer.actionsEnabled {
+        &:hover {
+          .hover();
+        }
+
+        &:focus {
+          .focus();
+        }
+
+        &: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

@@ -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 {
-          margin-left: 0px;
-        }
-      }
+    .statusIconContainer {
+      margin-left: 0px;
+    }
 
     .tabIconSection {
       .cancelButton {

package.json

@@ -5,10 +5,10 @@
   "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/ms-rest-nodeauth": "3.1.1",
+    "@azure/identity": "1.2.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",
@@ -46,8 +46,6 @@
     "@types/lodash": "4.14.171",
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
-    "@uiw/react-split": "5.9.3",
-    "@xmldom/xmldom": "0.7.13",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
     "canvas": "file:./canvas",
@@ -56,7 +54,7 @@
     "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",
@@ -71,14 +69,12 @@
     "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",
@@ -99,16 +95,13 @@
     "react-splitter-layout": "4.0.0",
     "react-string-format": "1.0.1",
     "react-youtube": "9.0.1",
-    "react-window": "1.8.10",
     "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.12.1",
+    "underscore": "1.9.1",
     "utility-types": "3.10.0",
     "zustand": "3.5.0"
   },
@@ -117,7 +110,6 @@
     "@babel/preset-env": "7.9.0",
     "@babel/preset-react": "7.9.4",
     "@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,8 +118,8 @@
     "@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-adapter-react-16": "1.0.9",
+    "@types/enzyme": "3.10.7",
+    "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/hasher": "0.0.31",
     "@types/jest": "26.0.20",
     "@types/jquery": "3.5.29",
@@ -139,7 +131,6 @@
     "@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",
@@ -155,13 +146,14 @@
     "create-file-webpack": "1.0.2",
     "css-loader": "6.8.1",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.8",
-    "enzyme-to-json": "3.6.2",
+    "enzyme-adapter-react-16": "1.15.5",
+    "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",
@@ -170,6 +162,7 @@
     "html-webpack-plugin": "5.5.3",
     "jest": "26.6.3",
     "jest-canvas-mock": "2.3.1",
+    "jest-playwright-preset": "1.5.1",
     "jest-react-hooks-shallow": "1.5.1",
     "jest-trx-results-processor": "0.0.7",
     "less": "3.8.1",
@@ -177,24 +170,25 @@
     "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.22.15",
+    "typedoc": "0.21.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",
@@ -209,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",

patches/@uiw+react-split+5.9.3.patch

@@ -1,11 +0,0 @@
-diff --git a/node_modules/@uiw/react-split/cjs/index.d.ts b/node_modules/@uiw/react-split/cjs/index.d.ts
-index 644bcc3..f794760 100644
---- a/node_modules/@uiw/react-split/cjs/index.d.ts
-+++ b/node_modules/@uiw/react-split/cjs/index.d.ts
-@@ -56,5 +56,5 @@ export default class Split extends React.Component<SplitProps, SplitState> {
-     onMouseDown(paneNumber: number, env: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
-     onDragging(env: Event): void;
-     onDragEnd(): void;
--    render(): import("react/jsx-runtime").JSX.Element;
-+    render(): JSX.Element;
- }

playwright.config.ts

@@ -1,53 +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'] },
-    },
-  ],
-
-  webServer: {
-    command: 'npm run start',
-    url: 'https://127.0.0.1:1234/_ready',
-    timeout: 120 * 1000,
-    ignoreHTTPSErrors: true,
-    reuseExistingServer: !process.env.CI,
-  },
-});

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
@@ -130,36 +124,6 @@ export enum MongoBackendEndpointType {
   remote,
 }
 
-export class BackendApi {
-  public static readonly GenerateToken: string = "GenerateToken";
-  public static readonly PortalSettings: string = "PortalSettings";
-  public static readonly AccountRestrictions: string = "AccountRestrictions";
-}
-
-export class PortalBackendEndpoints {
-  public static readonly Development: string = "https://localhost:7235";
-  public static readonly Mpac: string = "https://cdb-ms-mpac-pbe.cosmos.azure.com";
-  public static readonly Prod: string = "https://cdb-ms-prod-pbe.cosmos.azure.com";
-  public static readonly Fairfax: string = "https://cdb-ff-prod-pbe.cosmos.azure.us";
-  public static readonly Mooncake: string = "https://cdb-mc-prod-pbe.cosmos.azure.cn";
-}
-
-export class MongoProxyEndpoints {
-  public static readonly Local: 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";
-  public static readonly Mooncake: string = "https://cdb-mc-prod-mp.cosmos.azure.cn";
-}
-
-export class CassandraProxyEndpoints {
-  public static readonly Development: string = "https://localhost:7240";
-  public static readonly Mpac: string = "https://cdb-ms-mpac-cp.cosmos.azure.com";
-  public static readonly Prod: string = "https://cdb-ms-prod-cp.cosmos.azure.com";
-  public static readonly Fairfax: string = "https://cdb-ff-prod-cp.cosmos.azure.us";
-  public static readonly Mooncake: string = "https://cdb-mc-prod-cp.cosmos.azure.cn";
-}
-
 //TODO: Remove this when new backend is migrated over
 export class CassandraBackend {
   public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
@@ -175,7 +139,7 @@ export class CassandraBackend {
 export class CassandraProxyAPIs {
   public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
   public static readonly connectionStringCreateOrDeleteApi: string = "api/connectionstring/cassandra/createordelete";
-  public static readonly queryApi: string = "api/cassandra";
+  public static readonly queryApi: string = "api/cassandra/postquery";
   public static readonly connectionStringQueryApi: string = "api/connectionstring/cassandra";
   public static readonly keysApi: string = "api/cassandra/keys";
   public static readonly connectionStringKeysApi: string = "api/connectionstring/cassandra/keys";
@@ -186,9 +150,6 @@ export class CassandraProxyAPIs {
 export class Queries {
   public static CustomPageOption: string = "custom";
   public static UnlimitedPageOption: string = "unlimited";
-  public static setAutomaticRBACOption: string = "Automatic";
-  public static setTrueRBACOption: string = "True";
-  public static setFalseRBACOption: string = "False";
   public static itemsPerPage: number = 100;
   public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
   public static containersPerPage: number = 50;
@@ -200,12 +161,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";
@@ -265,7 +220,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 {
@@ -492,6 +446,22 @@ export class JunoEndpoints {
   public static readonly Stage = "https://tools-staging.cosmos.azure.com";
 }
 
+export class MongoProxyEndpoints {
+  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";
+  public static readonly Mooncake: string = "https://cdb-mc-prod-mp.cosmos.azure.cn";
+}
+
+export class CassandraProxyEndpoints {
+  public static readonly Development: string = "https://localhost:7240";
+  public static readonly Mpac: string = "https://cdb-ms-mpac-cp.cosmos.azure.com";
+  public static readonly Prod: string = "https://cdb-ms-prod-cp.cosmos.azure.com";
+  public static readonly Fairfax: string = "https://cdb-ff-prod-cp.cosmos.azure.us";
+  public static readonly Mooncake: string = "https://cdb-mc-prod-cp.cosmos.azure.cn";
+}
+
 export class PriorityLevel {
   public static readonly High = "high";
   public static readonly Low = "low";

src/Common/CosmosClient.test.ts

@@ -28,6 +28,19 @@ describe("tokenProvider", () => {
   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", () => {

src/Common/CosmosClient.ts

@@ -1,14 +1,13 @@
 import * as Cosmos from "@azure/cosmos";
+import { sendCachedDataMessage } from "Common/MessageHandler";
 import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizationTokenUsingResourceTokens";
-import { AuthorizationToken } from "Contracts/FabricMessageTypes";
+import { AuthorizationToken, MessageTypes } from "Contracts/MessageTypes";
 import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { listKeys } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
-import { DatabaseAccountListKeysResult } from "Utils/arm/generatedClients/cosmos/types";
 import { AuthType } from "../AuthType";
 import { PriorityLevel } from "../Common/Constants";
 import { Platform, configContext } from "../ConfigContext";
-import { updateUserContext, userContext } from "../UserContext";
+import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
@@ -19,30 +18,12 @@ const _global = typeof self === "undefined" ? window : self;
 export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
 
-  const aadDataPlaneFeatureEnabled =
-    userContext.features.enableAadDataPlane && userContext.databaseAccount.properties.disableLocalAuth;
-  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && userContext.apiType === "SQL";
-  if (aadDataPlaneFeatureEnabled || (!userContext.features.enableAadDataPlane && dataPlaneRBACOptionEnabled)) {
-    if (!userContext.aadToken) {
-      logConsoleError(
-        `AAD token does not exist. Please use "Login for Entra ID" prior to performing Entra ID RBAC operations`,
-      );
-      return null;
-    }
+  if (userContext.features.enableAadDataPlane && userContext.aadToken) {
     const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
     const authorizationToken = `${AUTH_PREFIX}${userContext.aadToken}`;
-    console.log(`Returning Auth token`);
     return authorizationToken;
   }
 
-  if ((userContext.dataPlaneRbacEnabled) && userContext.authorizationToken) {
-    console.log(` Getting Portal Auth token `)
-    const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
-    const authorizationToken = `${AUTH_PREFIX}${userContext.authorizationToken}`;
-    console.log(`Returning Portal Auth token`);
-    return authorizationToken;
-  }
-  
   if (configContext.platform === Platform.Emulator) {
     // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
     await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
@@ -70,58 +51,22 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
       case Cosmos.ResourceType.offer:
       case Cosmos.ResourceType.user:
       case Cosmos.ResourceType.permission:
-        // For now, these operations aren't used, so fetching the authorization token is commented out.
-        // This provider must return a real token to pass validation by the client, so we return the cached resource token
-        // (which is a valid token, but won't work for these operations).
-        const resourceTokens2 = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
-        return getAuthorizationTokenUsingResourceTokens(resourceTokens2, requestInfo.path, requestInfo.resourceId);
-
-      /* ************** TODO: Uncomment this code if we need to support these operations **************
-      // User master tokens
-      const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(
-        FabricMessageTypes.GetAuthorizationToken,
-        [requestInfo],
-        userContext.fabricContext.connectionId,
-      );
-      console.log("Response from Fabric: ", authorizationToken);
-      headers[HttpHeaders.msDate] = authorizationToken.XDate;
-      return decodeURIComponent(authorizationToken.PrimaryReadWriteToken);
-       ***********************************************************************************************/
+        // User master tokens
+        const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(
+          MessageTypes.GetAuthorizationToken,
+          [requestInfo],
+          userContext.fabricContext.connectionId,
+        );
+        console.log("Response from Fabric: ", authorizationToken);
+        headers[HttpHeaders.msDate] = authorizationToken.XDate;
+        return decodeURIComponent(authorizationToken.PrimaryReadWriteToken);
     }
   }
 
-  let retryAttempts: number = 50;
-  while (retryAttempts > 0 && userContext.listKeysFetchInProgress) {
-    retryAttempts--;
-    await sleep(100);
-  }
-
   if (userContext.masterKey) {
     // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
-    await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(
-      verb,
-      resourceId,
-      resourceType,
-      headers,
-      userContext.masterKey,
-    );
+    await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
     return decodeURIComponent(headers.authorization);
-  } else if (userContext.dataPlaneRbacEnabled == false) {
-    const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
-    const keys: DatabaseAccountListKeysResult = await listKeys(subscriptionId, resourceGroup, account.name);
-
-    if (keys.primaryMasterKey) {
-      updateUserContext({ masterKey: keys.primaryMasterKey });
-      // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
-      await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(
-        verb,
-        resourceId,
-        resourceType,
-        headers,
-        keys.primaryMasterKey,
-      );
-      return decodeURIComponent(headers.authorization);
-    }
   }
 
   if (userContext.resourceToken) {
@@ -133,10 +78,6 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   return decodeURIComponent(result.PrimaryReadWriteToken);
 };
 
-function sleep(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
 export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, diagnosticNode, next) => {
   requestContext.endpoint = new URL(configContext.PROXY_PATH, window.location.href).href;
   requestContext.headers["x-ms-proxy-target"] = endpoint();
@@ -209,6 +150,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.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,
@@ -97,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);
-      } else {
-        Logger.logError("Iframe failed to send message to portal", "MessageHandler");
-      }
+      portalChildWindow.parent.postMessage(message, portalChildWindow.document.referrer || "*");
     } 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);
-      } else {
-        Logger.logError("Iframe failed to send message to data explorer", "MessageHandler");
-      }
+      portalChildWindow.postMessage(message, portalChildWindow.location.origin || "*");
     }
   }
 };

src/Common/MongoProxyClient.ts

@@ -67,7 +67,7 @@ export function queryDocuments(
   query: string,
   continuationToken?: string,
 ): Promise<QueryResponse> {
-  if (!useMongoProxyEndpoint("resourcelist") || !useMongoProxyEndpoint("queryDocuments")) {
+  if (!useMongoProxyEndpoint("resourcelist")) {
     return queryDocuments_ToBeDeprecated(databaseId, collection, isResourceList, query, continuationToken);
   }
 
@@ -106,7 +106,7 @@ export function queryDocuments(
     headers[CosmosSDKConstants.HttpHeaders.Continuation] = continuationToken;
   }
 
-  const path = isResourceList ? "/resourcelist" : "/queryDocuments";
+  const path = isResourceList ? "/resourcelist" : "";
 
   return window
     .fetch(`${endpoint}${path}`, {
@@ -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> {
@@ -711,3 +689,15 @@ export function getARMCreateCollectionEndpoint(params: DataModels.MongoParameter
   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 {
+  let canAccessMongoProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
+  if (userContext.databaseAccount.properties.ipRules?.length > 0) {
+    canAccessMongoProxy = canAccessMongoProxy && configContext.MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED;
+  }
+
+  return (
+    canAccessMongoProxy &&
+    configContext.NEW_MONGO_APIS?.includes(api) &&
+    [MongoProxyEndpoints.Development, MongoProxyEndpoints.Mpac].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

@@ -1,10 +1,14 @@
+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 { ResourceTree } from "../Explorer/Tree/ResourceTree";
+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 {
@@ -70,8 +74,12 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
             </div>
           </div>
         </div>
-        {userContext.features.enableKoResourceTree ? (
+        {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} />
         )}

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/dataAccess/__snapshots__/queryDocuments.test.ts.snap

@@ -2,7 +2,6 @@
 
 exports[`getCommonQueryOptions builds the correct default options objects 1`] = `
 Object {
-  "disableNonStreamingOrderByQuery": true,
   "enableScanInQuery": true,
   "forceQueryPlan": true,
   "maxDegreeOfParallelism": 0,
@@ -13,7 +12,6 @@ Object {
 
 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: {

src/Common/dataAccess/dataTransfers.ts

@@ -122,21 +122,14 @@ const pollDataTransferJobOperation = async (
 
   updateDataTransferJob(body);
 
-  if (status === "Cancelled") {
-    removeFromPolling(jobName);
-    clearMessage && clearMessage();
-    const cancelMessage = `Data transfer job ${jobName} cancelled`;
-    NotificationConsoleUtils.logConsoleError(cancelMessage);
-    throw new AbortError(cancelMessage);
-  }
-  if (status === "Failed" || status === "Faulted") {
+  if (status === "Cancelled" || status === "Failed" || status === "Faulted") {
     removeFromPolling(jobName);
     const errorMessage = body?.properties?.error
       ? JSON.stringify(body?.properties?.error)
       : "Operation could not be completed";
     const error = new Error(errorMessage);
     clearMessage && clearMessage();
-    NotificationConsoleUtils.logConsoleError(`Data transfer job ${jobName} failed: ${errorMessage}`);
+    NotificationConsoleUtils.logConsoleError(`Data transfer job ${jobName} Failed`);
     throw new AbortError(error);
   }
   if (status === "Completed") {

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

@@ -1,10 +1,4 @@
-import {
-  BackendApi,
-  CassandraProxyEndpoints,
-  JunoEndpoints,
-  MongoProxyEndpoints,
-  PortalBackendEndpoints,
-} from "Common/Constants";
+import { CassandraProxyEndpoints, JunoEndpoints, MongoProxyEndpoints } from "Common/Constants";
 import {
   allowedAadEndpoints,
   allowedArcadiaEndpoints,
@@ -42,15 +36,9 @@ 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;
-  PORTAL_BACKEND_ENDPOINT?: string;
-  NEW_BACKEND_APIS?: BackendApi[];
   MONGO_BACKEND_ENDPOINT?: string;
   MONGO_PROXY_ENDPOINT?: string;
   MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED?: boolean;
@@ -87,7 +75,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,30 +84,29 @@ 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
   GITHUB_TEST_ENV_CLIENT_ID: "b63fc8cbf87fd3c6e2eb", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1777772
   JUNO_ENDPOINT: JunoEndpoints.Prod,
   BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
-  PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Prod,
   MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
   NEW_MONGO_APIS: [
     // "resourcelist",
-    // "queryDocuments",
     // "createDocument",
     // "readDocument",
     // "updateDocument",
     // "deleteDocument",
     // "createCollectionWithProxy",
-    // "legacyMongoShell",
   ],
   MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,
   CASSANDRA_PROXY_ENDPOINT: CassandraProxyEndpoints.Prod,
-  NEW_CASSANDRA_APIS: ["postQuery", "createOrDelete", "getKeys", "getSchema"],
+  NEW_CASSANDRA_APIS: [
+    // "postQuery",
+    // "createOrDelete",
+    // "getKeys",
+    // "getSchema",
+  ],
   CASSANDRA_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,
   isTerminalEnabled: false,
   isPhoenixEnabled: false,
@@ -199,9 +185,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/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;
-      id: string;
-      params: [string]; // version
-    }
-  | {
-      type: FabricMessageTypes.GetAuthorizationToken;
+      type: MessageTypes.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[];
-  spatialIndexes?: any[];
-  vectorIndexes?: VectorIndex[];
-}
-
-export interface VectorIndex {
-  path: string;
-  type: "flat" | "diskANN" | "quantizedFlat";
+  compositeIndexes?: any;
+  spatialIndexes?: any;
 }
 
 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";
@@ -53,7 +53,6 @@ export type FabricMessageV2 =
       id: string;
       message: {
         connectionId: string;
-        isVisible: boolean;
       };
     }
   | {
@@ -73,7 +72,7 @@ export type FabricMessageV2 =
       };
     }
   | {
-      type: "explorerVisible";
+      type: "setToolbarStatus";
       message: {
         visible: boolean;
       };

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,13 @@ export enum MessageTypes {
   DisplayNPSSurvey,
   OpenVCoreMongoNetworkingBlade,
   OpenVCoreMongoConnectionStringsBlade,
-  GetAuthorizationToken, // unused. Can be removed if the portal uses the same list of enums.
-  GetAllResourceTokens, // unused. Can be removed if the portal uses the same list of enums.
-  Ready, // unused. Can be removed if the portal uses the same list of enums.
+  GetAuthorizationToken, // Data Explorer -> Fabric
+  GetAllResourceTokens, // Data Explorer -> Fabric
+  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,
-  existingDocumentDirtyValid,
-  existingDocumentDirtyInvalid,
+  exisitingDocumentNoEdits,
+  exisitingDocumentDirtyValid,
+  exisitingDocumentDirtyInvalid,
 }
 
 export enum IndexingPolicyEditorState {
@@ -344,9 +339,9 @@ export enum IndexingPolicyEditorState {
 export enum ScriptEditorState {
   newInvalid,
   newValid,
-  existingNoEdits,
-  existingDirtyValid,
-  existingDirtyInvalid,
+  exisitingNoEdits,
+  exisitingDirtyValid,
+  exisitingDirtyInvalid,
 }
 
 export enum CollectionTabKind {
@@ -392,7 +387,6 @@ export interface DataExplorerInputsFrame {
   dnsSuffix?: string;
   serverId?: string;
   extensionEndpoint?: string;
-  portalBackendEndpoint?: string;
   mongoProxyEndpoint?: string;
   cassandraProxyEndpoint?: string;
   subscriptionType?: SubscriptionType;
@@ -425,7 +419,6 @@ export interface SelfServeFrameInputs {
   authorizationToken: string;
   csmEndpoint: string;
   flights?: readonly string[];
-  catalogAPIKey: string;
 }
 
 export class MonacoEditorSettings {

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";

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 {
-    if (!prevState.isExpanded && this.state.isExpanded && this.props.onExpand) {
+  public componentDidUpdate(): void {
+    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/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,10 +20,7 @@ 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;
 }
 
 export class EditorReact extends React.Component<EditorReactProps, EditorReactStates> {
@@ -49,25 +46,9 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
     }, 100);
   }
 
-  public componentDidUpdate() {
-    if (!this.editor) {
-      return;
-    }
-
-    const existingContent = this.editor.getModel().getValue();
-
-    if (this.props.content !== existingContent) {
-      if (this.props.isReadOnly) {
-        this.editor.setValue(this.props.content);
-      } else {
-        this.editor.pushUndoStop();
-        this.editor.executeEdits("", [
-          {
-            range: this.editor.getModel().getFullModelRange(),
-            text: this.props.content,
-          },
-        ]);
-      }
+  public componentDidUpdate(previous: EditorReactProps) {
+    if (this.props.content !== previous.content) {
+      this.editor?.setValue(this.props.content);
     }
   }
 
@@ -78,11 +59,9 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
   public render(): JSX.Element {
     return (
       <React.Fragment>
-        {!this.state.showEditor && (
-          <Spinner size={SpinnerSize.large} className={this.props.spinnerClassName || "spinner"} />
-        )}
+        {!this.state.showEditor && <Spinner size={SpinnerSize.large} className="spinner" />}
         <div
-          className={this.props.className || "jsonEditor"}
+          className="jsonEditor"
           style={this.props.monacoContainerStyles}
           ref={(elt: HTMLElement) => this.setRef(elt)}
         />
@@ -92,14 +71,9 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
   protected configureEditor(editor: monaco.editor.IStandaloneCodeEditor) {
     this.editor = editor;
+    const queryEditorModel = this.editor.getModel();
     if (!this.props.isReadOnly && this.props.onContentChanged) {
-      // Hooking the model's onDidChangeContent event because of some event ordering issues.
-      // If a single user input causes BOTH the editor content to change AND the cursor selection to change (which is likely),
-      // then there are some inconsistencies as to which event fires first.
-      // But the editor.onDidChangeModelContent event seems to always fire before the cursor selection event.
-      // (This is NOT true for the model's onDidChangeContent event, which sometimes fires after the cursor selection event.)
-      // If the cursor selection event fires first, then the calling component may re-render the component with old content, so we want to ensure the model content changed event always fires first.
-      this.editor.onDidChangeModelContent(() => {
+      queryEditorModel.onDidChangeContent(() => {
         const queryEditorModel = this.editor.getModel();
         this.props.onContentChanged(queryEditorModel.getValue());
       });
@@ -124,7 +98,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",
@@ -137,13 +111,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
     this.rootNode.innerHTML = "";
     const monaco = await loadMonaco();
-    try {
-      createCallback(monaco?.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;
-    }
+    createCallback(monaco?.editor?.create(this.rootNode, options));
 
     if (this.rootNode.innerHTML) {
       this.setState({

src/Explorer/Controls/Settings/SettingsComponent.less

@@ -7,14 +7,14 @@
 }
 
 .settingsV2ToolTip {
-  padding: 10px;
-  font: 12px @DataExplorerFont;
-  max-width: 300px;
+    padding: 10px;
+    font: 12px @DataExplorerFont;
+    max-width: 300px;
 }
 
 .autoPilotSelector span {
-  height: 25px;
-  font: 14px @DataExplorerFont;
+    height: 25px;
+    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/PartitionKeyComponent.tsx

@@ -136,15 +136,15 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
   };
 
   const getPercentageComplete = () => {
-    const jobStatus = portalDataTransferJob?.properties?.status;
-    const isCompleted = jobStatus === "Completed";
-    if (isCompleted) {
-      return 1;
-    }
     const processedCount = portalDataTransferJob?.properties?.processedCount;
     const totalCount = portalDataTransferJob?.properties?.totalCount;
-    const isJobInProgress = isCurrentJobInProgress(portalDataTransferJob);
-    return isJobInProgress ? (totalCount > 0 ? processedCount / totalCount : null) : 0;
+    const jobStatus = portalDataTransferJob?.properties?.status;
+    const isCancelled = jobStatus === "Cancelled";
+    const isCompleted = jobStatus === "Completed";
+    if (totalCount <= 0 && !isCompleted) {
+      return isCancelled ? 0 : null;
+    }
+    return isCompleted ? 1 : processedCount / totalCount;
   };
 
   return (

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

@@ -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__/IndexingPolicyComponent.test.tsx.snap

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

src/Explorer/Controls/Settings/SettingsUtils.tsx

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

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

@@ -30,6 +30,7 @@ exports[`SettingsComponent renders 1`] = `
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
                 "_isInitializingNotebooks": false,
+                "_resetNotebookWorkspace": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
@@ -107,6 +108,7 @@ exports[`SettingsComponent renders 1`] = `
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
                 "_isInitializingNotebooks": false,
+                "_resetNotebookWorkspace": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
@@ -196,7 +198,6 @@ exports[`SettingsComponent renders 1`] = `
               "indexingMode": "consistent",
             }
           }
-          isVectorSearchEnabled={false}
           logIndexingPolicySuccessMessage={[Function]}
           onIndexingPolicyContentChange={[Function]}
           onIndexingPolicyDirtyChange={[Function]}
@@ -206,7 +207,7 @@ exports[`SettingsComponent renders 1`] = `
         />
       </PivotItem>
       <PivotItem
-        headerText="Partition Keys (preview)"
+        headerText="Partition Keys"
         itemKey="PartitionKeyTab"
         key="PartitionKeyTab"
         style={
@@ -224,6 +225,7 @@ exports[`SettingsComponent renders 1`] = `
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
                 "_isInitializingNotebooks": false,
+                "_resetNotebookWorkspace": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
@@ -270,6 +272,7 @@ exports[`SettingsComponent renders 1`] = `
           explorer={
             Explorer {
               "_isInitializingNotebooks": false,
+              "_resetNotebookWorkspace": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
               "isTabsContentExpanded": [Function],
               "onRefreshDatabasesKeyPress": [Function],
@@ -297,7 +300,7 @@ exports[`SettingsComponent renders 1`] = `
         />
       </PivotItem>
       <PivotItem
-        headerText="Computed Properties"
+        headerText="Computed Properties (preview)"
         itemKey="ComputedPropertiesTab"
         key="ComputedPropertiesTab"
         style={

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
-              className="underlinedLink"
-              target="_blank"
-              href="https://cosmos.azure.com/capacitycalculator/"
-              aria-label="Capacity calculator"
-            >
+            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="Capacity calculator">
               capacity calculator
             </Link>
             .

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

@@ -733,13 +733,11 @@ 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"
@@ -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"

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 grandChild11: LegacyTreeNode = {
+const buildChildren = (): TreeNode[] => {
+  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 grandChild11: LegacyTreeNode = {
+const buildChildren2 = (): TreeNode[] => {
+  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 {
-  rootNode: LegacyTreeNode;
+export interface TreeComponentProps {
+  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 {
-  node: LegacyTreeNode;
+interface TreeNodeComponentProps {
+  node: TreeNode;
   generation: number;
   paddingLeft: number;
 }
 
-interface LegacyTreeNodeComponentState {
+interface TreeNodeComponentState {
   isExpanded: boolean;
   isMenuShowing: boolean;
 }
-export class LegacyTreeNodeComponent extends React.Component<
-  LegacyTreeNodeComponentProps,
-  LegacyTreeNodeComponentState
-> {
+export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, TreeNodeComponentState> {
   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 leaves: LegacyTreeNode[] = treeNode.children.filter((node) => !node.children);
+      const parents: TreeNode[] = 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 {
-    const paddingLeft = generation * LegacyTreeNodeComponent.paddingPerGenerationPx;
+  private renderNode(node: TreeNode, generation: number): JSX.Element {
+    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
-            duration={LegacyTreeNodeComponent.transitionDurationMS}
-            height={this.state.isExpanded ? "auto" : 0}
-          >
+          <AnimateHeight duration={TreeNodeComponent.transitionDurationMS} height={this.state.isExpanded ? "auto" : 0}>
             <div className="nodeChildren" data-test={node.label} role="group">
-              {LegacyTreeNodeComponent.getSortedChildren(node).map((childNode: LegacyTreeNode) => (
-                <LegacyTreeNodeComponent
+              {TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => (
+                <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 ||
-          (child.isSelected && child.isSelected()) ||
-          LegacyTreeNodeComponent.isAnyDescendantSelected(child),
+        (previous: boolean, child: TreeNode) =>
+          previous || (child.isSelected && child.isSelected()) || TreeNodeComponent.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,194 +0,0 @@
-import { TreeItem, TreeItemLayout, tokens } 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: `${id}Class`,
-    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 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 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 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 node={node} treeNodeId={node.id} />);
-    expect(component.find(TreeItemLayout).props().style?.backgroundColor).toStrictEqual(
-      tokens.colorNeutralBackground1Selected,
-    );
-    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 node={node} treeNodeId={node.id} />);
-    expect(component.find(TreeItemLayout).props().style?.backgroundColor).toStrictEqual(
-      tokens.colorNeutralBackground1Selected,
-    );
-    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 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 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 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 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 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,207 +0,0 @@
-import {
-  Button,
-  Menu,
-  MenuItem,
-  MenuList,
-  MenuOpenChangeData,
-  MenuOpenEvent,
-  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";
-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;
-  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 TreeNodeComponentProps {
-  node: TreeNode;
-  className?: string;
-  treeNodeId: string;
-}
-
-/** 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,
-    )
-  );
-}
-
-const getTreeIcon = (iconSrc: string): JSX.Element => <img src={iconSrc} alt="" style={{ width: 16, height: 16 }} />;
-
-export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
-  node,
-  treeNodeId,
-}: TreeNodeComponentProps): JSX.Element => {
-  const [isLoading, setIsLoading] = React.useState<boolean>(false);
-
-  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>
-  ));
-
-  const treeItem = (
-    <TreeItem
-      data-test={`TreeNodeContainer:${treeNodeId}`}
-      value={treeNodeId}
-      itemType={isBranch ? "branch" : "leaf"}
-      onOpenChange={onOpenChange}
-    >
-      <TreeItemLayout
-        className={node.className}
-        data-test={`TreeNode:${treeNodeId}`}
-        actions={
-          contextMenuItems.length > 0 && (
-            <Menu onOpenChange={onMenuOpenChange}>
-              <MenuTrigger disableButtonEnhancement>
-                <Button
-                  aria-label="More options"
-                  data-test="TreeNode/ContextMenuTrigger"
-                  appearance="subtle"
-                  icon={<MoreHorizontal20Regular />}
-                />
-              </MenuTrigger>
-              <MenuPopover data-test={`TreeNode/ContextMenu:${treeNodeId}`}>
-                <MenuList>{contextMenuItems}</MenuList>
-              </MenuPopover>
-            </Menu>
-          )
-        }
-        expandIcon={isLoading ? <Spinner size="extra-tiny" /> : undefined}
-        iconBefore={node.iconSrc && getTreeIcon(node.iconSrc)}
-        style={{
-          backgroundColor: shouldShowAsSelected ? tokens.colorNeutralBackground1Selected : undefined,
-        }}
-      >
-        {node.label}
-      </TreeItemLayout>
-      {!node.isLoading && node.children?.length > 0 && (
-        <Tree style={{ overflow: node.isScrollable ? "auto" : undefined }}>
-          {getSortedChildren(node).map((childNode: TreeNode) => (
-            <TreeNodeComponent 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,11 +1,11 @@
 // 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 {
@@ -33,17 +33,16 @@ 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,
@@ -103,7 +102,7 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
       data-test="label"
       role="group"
     >
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={3}
         key="Bchild1-3-undefined"
         node={
@@ -121,7 +120,7 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
         }
         paddingLeft={32}
       />
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={3}
         key="2child2-3-undefined"
         node={
@@ -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,7 +145,7 @@ 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,
@@ -256,7 +254,7 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
       data-test="label"
       role="group"
     >
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={13}
         key="2child2-13-undefined"
         node={
@@ -266,7 +264,7 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
         }
         paddingLeft={214}
       />
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={13}
         key="Bchild1-13-undefined"
         node={
@@ -289,17 +287,16 @@ 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,
@@ -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,7 +370,7 @@ 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,
@@ -474,7 +470,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
       data-test="label"
       role="group"
     >
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={13}
         key="bchild-13-undefined"
         node={
@@ -492,7 +488,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
         }
         paddingLeft={192}
       />
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={13}
         key="dchild-13-undefined"
         node={
@@ -510,7 +506,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
         }
         paddingLeft={192}
       />
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={13}
         key="aChild-13-undefined"
         node={
@@ -520,7 +516,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
         }
         paddingLeft={214}
       />
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={13}
         key="cchild-13-undefined"
         node={
@@ -535,17 +531,16 @@ 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,
@@ -605,7 +600,7 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
       data-test="label"
       role="group"
     >
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={3}
         key="Bchild1-3-undefined"
         node={
@@ -623,7 +618,7 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
         }
         paddingLeft={32}
       />
-      <LegacyTreeNodeComponent
+      <TreeNodeComponent
         generation={3}
         key="2child2-3-undefined"
         node={

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

@@ -7,13 +7,11 @@ import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCop
 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 { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as ko from "knockout";
 import React from "react";
 import _ from "underscore";
-import * as msal from "@azure/msal-browser";
 import shallow from "zustand/shallow";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
@@ -32,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";
@@ -56,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";
@@ -67,8 +68,6 @@ import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
 import StoredProcedure from "./Tree/StoredProcedure";
 import { useDatabases } from "./useDatabases";
 import { useSelectedNode } from "./useSelectedNode";
-import { update } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
-import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 
 BindingHandlersRegisterer.registerBindingHandlers();
 
@@ -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,44 +261,8 @@ export default class Explorer {
     };
     useDialog.getState().openDialog(addSynapseLinkDialogProps);
     TelemetryProcessor.traceStart(Action.EnableAzureSynapseLink);
-  }
 
-  public async openLoginForEntraIDPopUp(): Promise<void> {
-    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}`,
-          );
-        }
-      }
-    }
+    // TODO: return result
   }
 
   public openNPSSurveyDialog(): void {
@@ -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) {
-        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");
+    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 });
   }
 }

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

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

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

@@ -184,18 +184,12 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                     className="rightPaneTrashIcon rightPaneBtns"
                     tabIndex={0}
                     role="button"
-                    aria-label={`Delete ${data.key}`}
                     onClick={(event: React.MouseEvent<HTMLDivElement>) => removeNewVertexProperty(event, index)}
                     onKeyPress={(event: React.KeyboardEvent<HTMLDivElement>) =>
                       removeNewVertexPropertyKeyPress(event, index)
                     }
                   >
-                    <img
-                      aria-label="hidden"
-                      className="refreshcol rightPaneTrashIconImg"
-                      src={DeleteIcon}
-                      alt="Remove property"
-                    />
+                    <img className="refreshcol rightPaneTrashIconImg" src={DeleteIcon} alt="Remove property" />
                   </div>
                 </div>
               </div>

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -5,7 +5,6 @@
  */
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
-import { KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
 import { userContext } from "UserContext";
 import * as React from "react";
 import create, { UseStore } from "zustand";
@@ -41,7 +40,6 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const buttons = useCommandBar((state) => state.contextButtons);
   const isHidden = useCommandBar((state) => state.isHidden);
   const backgroundColor = StyleConstants.BaseLight;
-  const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR);
 
   if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
     const buttons =
@@ -107,10 +105,6 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
           },
         };
 
-  const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
-  const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);
-  setKeyboardHandlers(keyboardHandlers);
-
   return (
     <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
       <FluentCommandBar

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

@@ -2,8 +2,10 @@ import * as ko from "knockout";
 import { AuthType } from "../../../AuthType";
 import { DatabaseAccount } from "../../../Contracts/DataModels";
 import { CollectionBase } from "../../../Contracts/ViewModels";
+import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
 import { updateUserContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
+import NotebookManager from "../../Notebook/NotebookManager";
 import { useNotebook } from "../../Notebook/useNotebook";
 import { useDatabases } from "../../useDatabases";
 import { useSelectedNode } from "../../useSelectedNode";
@@ -70,6 +72,181 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
   });
 
+  describe("Enable notebook button", () => {
+    const enableNotebookBtnLabel = "Enable Notebooks (Preview)";
+    const selectedNodeState = useSelectedNode.getState();
+
+    beforeAll(() => {
+      mockExplorer = {} as Explorer;
+      updateUserContext({
+        portalEnv: "prod",
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableTable" }],
+          },
+        } as DatabaseAccount,
+      });
+    });
+
+    afterEach(() => {
+      updateUserContext({
+        portalEnv: "prod",
+      });
+      useNotebook.getState().setIsNotebookEnabled(false);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(false);
+    });
+
+    it("Notebooks is already enabled - button should be hidden", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
+      expect(enableNotebookBtn).toBeUndefined();
+    });
+
+    it("Account is running on one of the national clouds - button should be hidden", () => {
+      updateUserContext({
+        portalEnv: "mooncake",
+      });
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
+      expect(enableNotebookBtn).toBeUndefined();
+    });
+
+    it("Notebooks is not enabled but is available - button should be shown and enabled", () => {
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
+
+      //TODO: modify once notebooks are available
+      expect(enableNotebookBtn).toBeUndefined();
+      //expect(enableNotebookBtn).toBeDefined();
+      //expect(enableNotebookBtn.disabled).toBe(false);
+      //expect(enableNotebookBtn.tooltipText).toBe("");
+    });
+
+    it("Notebooks is not enabled and is unavailable - button should be shown and disabled", () => {
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
+
+      //TODO: modify once notebooks are available
+      expect(enableNotebookBtn).toBeUndefined();
+      //expect(enableNotebookBtn).toBeDefined();
+      //expect(enableNotebookBtn.disabled).toBe(true);
+      //expect(enableNotebookBtn.tooltipText).toBe(
+      //  "Notebooks are not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks."
+      //);
+    });
+  });
+
+  describe("Open Mongo shell button", () => {
+    const openMongoShellBtnLabel = "Open Mongo shell";
+    const selectedNodeState = useSelectedNode.getState();
+
+    beforeAll(() => {
+      mockExplorer = {} as Explorer;
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableTable" }],
+          },
+        } as DatabaseAccount,
+      });
+    });
+
+    afterAll(() => {
+      updateUserContext({
+        apiType: "SQL",
+      });
+      useNotebook.getState().setIsShellEnabled(false);
+    });
+
+    beforeEach(() => {
+      updateUserContext({
+        apiType: "Mongo",
+      });
+      useNotebook.getState().setIsShellEnabled(true);
+    });
+
+    afterEach(() => {
+      useNotebook.getState().setIsNotebookEnabled(false);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(false);
+    });
+
+    it("Mongo Api not available - button should be hidden", () => {
+      updateUserContext({
+        apiType: "SQL",
+      });
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeUndefined();
+    });
+
+    it("Running on a national cloud - button should be hidden", () => {
+      updateUserContext({
+        portalEnv: "mooncake",
+      });
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeUndefined();
+    });
+
+    it("Notebooks is not enabled and is unavailable - button should be hidden", () => {
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeUndefined();
+    });
+
+    it("Notebooks is not enabled and is available - button should be hidden", () => {
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeUndefined();
+    });
+
+    it("Notebooks is enabled and is unavailable - button should be shown and enabled", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeDefined();
+
+      //TODO: modify once notebooks are available
+      expect(openMongoShellBtn.disabled).toBe(true);
+      //expect(openMongoShellBtn.disabled).toBe(false);
+      //expect(openMongoShellBtn.tooltipText).toBe("");
+    });
+
+    it("Notebooks is enabled and is available - button should be shown and enabled", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeDefined();
+
+      //TODO: modify once notebooks are available
+      expect(openMongoShellBtn.disabled).toBe(true);
+      //expect(openMongoShellBtn.disabled).toBe(false);
+      //expect(openMongoShellBtn.tooltipText).toBe("");
+    });
+
+    it("Notebooks is enabled and is available, terminal is unavailable due to ipRules - button should be hidden", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
+      useNotebook.getState().setIsShellEnabled(false);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeUndefined();
+    });
+  });
+
   describe("Open Cassandra shell button", () => {
     const openCassandraShellBtnLabel = "Open Cassandra shell";
     const selectedNodeState = useSelectedNode.getState();
@@ -128,6 +305,42 @@ describe("CommandBarComponentButtonFactory tests", () => {
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
       expect(openCassandraShellBtn).toBeUndefined();
     });
+
+    it("Notebooks is not enabled and is available - button should be shown and enabled", () => {
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
+      expect(openCassandraShellBtn).toBeUndefined();
+    });
+
+    it("Notebooks is enabled and is unavailable - button should be shown and enabled", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
+
+      expect(openCassandraShellBtn).toBeDefined();
+
+      //TODO: modify once notebooks are available
+      expect(openCassandraShellBtn.disabled).toBe(true);
+      //expect(openCassandraShellBtn.disabled).toBe(false);
+      //expect(openCassandraShellBtn.tooltipText).toBe("");
+    });
+
+    it("Notebooks is enabled and is available - button should be shown and enabled", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
+      expect(openCassandraShellBtn).toBeDefined();
+
+      //TODO: modify once notebooks are available
+      expect(openCassandraShellBtn.disabled).toBe(true);
+      //expect(openCassandraShellBtn.disabled).toBe(false);
+      //expect(openCassandraShellBtn.tooltipText).toBe("");
+    });
   });
 
   describe("Open Postgres and vCore Mongo buttons", () => {
@@ -155,6 +368,62 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
   });
 
+  describe("GitHub buttons", () => {
+    const connectToGitHubBtnLabel = "Connect to GitHub";
+    const manageGitHubSettingsBtnLabel = "Manage GitHub settings";
+    const selectedNodeState = useSelectedNode.getState();
+
+    beforeAll(() => {
+      mockExplorer = {} as Explorer;
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableTable" }],
+          },
+        } as DatabaseAccount,
+      });
+
+      mockExplorer.notebookManager = new NotebookManager();
+      mockExplorer.notebookManager.gitHubOAuthService = new GitHubOAuthService(undefined);
+    });
+
+    afterEach(() => {
+      jest.resetAllMocks();
+      useNotebook.getState().setIsNotebookEnabled(false);
+    });
+
+    it("Notebooks is enabled and GitHubOAuthService is not logged in - connect to github button should be visible", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const connectToGitHubBtn = buttons.find((button) => button.commandButtonLabel === connectToGitHubBtnLabel);
+      expect(connectToGitHubBtn).toBeDefined();
+    });
+
+    it("Notebooks is enabled and GitHubOAuthService is logged in - manage github settings button should be visible", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+      mockExplorer.notebookManager.gitHubOAuthService.isLoggedIn = jest.fn().mockReturnValue(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const manageGitHubSettingsBtn = buttons.find(
+        (button) => button.commandButtonLabel === manageGitHubSettingsBtnLabel,
+      );
+      expect(manageGitHubSettingsBtn).toBeDefined();
+    });
+
+    it("Notebooks is not enabled - connect to github and manage github settings buttons should be hidden", () => {
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+
+      const connectToGitHubBtn = buttons.find((button) => button.commandButtonLabel === connectToGitHubBtnLabel);
+      expect(connectToGitHubBtn).toBeUndefined();
+
+      const manageGitHubSettingsBtn = buttons.find(
+        (button) => button.commandButtonLabel === manageGitHubSettingsBtnLabel,
+      );
+      expect(manageGitHubSettingsBtn).toBeUndefined();
+    });
+  });
+
   describe("Resource token", () => {
     const mockCollection = { id: ko.observable("test") } as CollectionBase;
     useSelectedNode.getState().setSelectedNode(mockCollection);

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,4 +1,3 @@
-import { KeyboardAction } from "KeyboardShortcuts";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import * as React from "react";
 import AddCollectionIcon from "../../../../images/AddCollection.svg";
@@ -8,18 +7,22 @@ import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
 import AddTriggerIcon from "../../../../images/AddTrigger.svg";
 import AddUdfIcon from "../../../../images/AddUdf.svg";
 import BrowseQueriesIcon from "../../../../images/BrowseQuery.svg";
+import CosmosTerminalIcon from "../../../../images/Cosmos-Terminal.svg";
 import FeedbackIcon from "../../../../images/Feedback-Command.svg";
 import HomeIcon from "../../../../images/Home_16.svg";
 import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
 import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
+import GitHubIcon from "../../../../images/github.svg";
+import NewNotebookIcon from "../../../../images/notebook/Notebook-new.svg";
+import ResetWorkspaceIcon from "../../../../images/notebook/Notebook-reset-workspace.svg";
 import OpenInTabIcon from "../../../../images/open-in-tab.svg";
 import SettingsIcon from "../../../../images/settings_15x15.svg";
 import SynapseIcon from "../../../../images/synapse-link.svg";
-import EntraIDIcon from "../../../../images/EntraID.svg";
 import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
 import { Platform, configContext } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
+import { JunoClient } from "../../../Juno/JunoClient";
 import { userContext } from "../../../UserContext";
 import { getCollectionName, getDatabaseName } from "../../../Utils/APITypeUtils";
 import { isRunningOnNationalCloud } from "../../../Utils/CloudUtils";
@@ -30,11 +33,11 @@ import { useNotebook } from "../../Notebook/useNotebook";
 import { OpenFullScreen } from "../../OpenFullScreen";
 import { AddDatabasePanel } from "../../Panes/AddDatabasePanel/AddDatabasePanel";
 import { BrowseQueriesPane } from "../../Panes/BrowseQueriesPane/BrowseQueriesPane";
+import { GitHubReposPanel } from "../../Panes/GitHubReposPanel/GitHubReposPanel";
 import { LoadQueryPane } from "../../Panes/LoadQueryPane/LoadQueryPane";
-import { SettingsPane, useDataPlaneRbac } from "../../Panes/SettingsPane/SettingsPane";
+import { SettingsPane } from "../../Panes/SettingsPane/SettingsPane";
 import { useDatabases } from "../../useDatabases";
 import { SelectedNodeState, useSelectedNode } from "../../useSelectedNode";
-import { useEffect, useState } from "react";
 
 let counter = 0;
 
@@ -55,12 +58,11 @@ export function createStaticCommandBarButtons(
     }
   };
 
-  if (configContext.platform !== Platform.Fabric) {
-    const homeBtn = createHomeButton();
-    buttons.push(homeBtn);
+  const homeBtn = createHomeButton();
+  buttons.push(homeBtn);
 
+  if (configContext.platform !== Platform.Fabric) {
     const newCollectionBtn = createNewCollectionGroup(container);
-    newCollectionBtn.keyboardAction = KeyboardAction.NEW_COLLECTION; // Just for the root button, not the child version we create below.
     buttons.push(newCollectionBtn);
     if (userContext.apiType !== "Tables" && userContext.apiType !== "Cassandra") {
       const addSynapseLink = createOpenSynapseLinkDialogButton(container);
@@ -71,22 +73,6 @@ export function createStaticCommandBarButtons(
       }
     }
 
-    if (userContext.apiType === "SQL") {
-      const [loginButtonProps, setLoginButtonProps] = useState<CommandButtonComponentProps | undefined>(undefined);
-      const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
-      const aadTokenUpdated = useDataPlaneRbac((state) => state.aadTokenUpdated);
-
-      useEffect(() => {
-        const buttonProps = createLoginForEntraIDButton(container);
-        setLoginButtonProps(buttonProps);
-      }, [dataPlaneRbacEnabled, aadTokenUpdated, container]);
-
-      if (loginButtonProps) {
-        addDivider();
-        buttons.push(loginButtonProps);
-      }
-    }
-
     if (userContext.apiType !== "Tables") {
       newCollectionBtn.children = [createNewCollectionGroup(container)];
       const newDatabaseBtn = createNewDatabase(container);
@@ -94,6 +80,57 @@ export function createStaticCommandBarButtons(
     }
   }
 
+  if (useNotebook.getState().isNotebookEnabled) {
+    addDivider();
+    const notebookButtons: CommandButtonComponentProps[] = [];
+
+    const newNotebookButton = createNewNotebookButton(container);
+    newNotebookButton.children = [createNewNotebookButton(container), createuploadNotebookButton(container)];
+    notebookButtons.push(newNotebookButton);
+
+    if (container.notebookManager?.gitHubOAuthService) {
+      notebookButtons.push(createManageGitHubAccountButton(container));
+    }
+    if (useNotebook.getState().isPhoenixFeatures && configContext.isTerminalEnabled) {
+      notebookButtons.push(createOpenTerminalButton(container));
+    }
+    if (useNotebook.getState().isPhoenixNotebooks && selectedNodeState.isConnectedToContainer()) {
+      notebookButtons.push(createNotebookWorkspaceResetButton(container));
+    }
+    if (
+      (userContext.apiType === "Mongo" &&
+        useNotebook.getState().isShellEnabled &&
+        selectedNodeState.isDatabaseNodeOrNoneSelected()) ||
+      userContext.apiType === "Cassandra"
+    ) {
+      notebookButtons.push(createDivider());
+      if (userContext.apiType === "Cassandra") {
+        notebookButtons.push(createOpenTerminalButtonByKind(container, ViewModels.TerminalKind.Cassandra));
+      } else {
+        notebookButtons.push(createOpenTerminalButtonByKind(container, ViewModels.TerminalKind.Mongo));
+      }
+    }
+
+    notebookButtons.forEach((btn) => {
+      if (btn.commandButtonLabel.indexOf("Cassandra") !== -1) {
+        if (!useNotebook.getState().isPhoenixFeatures) {
+          applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.cassandraShellTemporarilyDownMsg);
+        }
+      } else if (btn.commandButtonLabel.indexOf("Mongo") !== -1) {
+        if (!useNotebook.getState().isPhoenixFeatures) {
+          applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.mongoShellTemporarilyDownMsg);
+        }
+      } else if (btn.commandButtonLabel.indexOf("Open Terminal") !== -1) {
+        if (!useNotebook.getState().isPhoenixFeatures) {
+          applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.temporarilyDownMsg);
+        }
+      } else if (!useNotebook.getState().isPhoenixNotebooks) {
+        applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.temporarilyDownMsg);
+      }
+      buttons.push(btn);
+    });
+  }
+
   if (!selectedNodeState.isDatabaseNodeOrNoneSelected()) {
     const isQuerySupported = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
 
@@ -114,7 +151,6 @@ export function createStaticCommandBarButtons(
       const newStoredProcedureBtn: CommandButtonComponentProps = {
         iconSrc: AddStoredProcedureIcon,
         iconAlt: label,
-        keyboardAction: KeyboardAction.NEW_SPROC,
         onCommandClick: () => {
           const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
           selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection);
@@ -204,7 +240,7 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
     buttons.push(fullScreenButton);
   }
 
-  if (configContext.platform === Platform.Portal) {
+  if (configContext.platform !== Platform.Emulator) {
     const label = "Feedback";
     const feedbackButtonOptions: CommandButtonComponentProps = {
       iconSrc: FeedbackIcon,
@@ -293,37 +329,11 @@ function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonCo
   };
 }
 
-function createLoginForEntraIDButton(container: Explorer): CommandButtonComponentProps {
-  if (configContext.platform !== Platform.Portal) {
-    return undefined;
-  }
-
-  const handleCommandClick = async () => {
-    await container.openLoginForEntraIDPopUp();
-    useDataPlaneRbac.setState({ dataPlaneRbacEnabled: true });
-  };
-
-  if (!userContext.dataPlaneRbacEnabled || userContext.aadToken) {
-    return undefined;
-  }
-
-  const label = "Login for Entra ID RBAC";
-  return {
-    iconSrc: EntraIDIcon,
-    iconAlt: label,
-    onCommandClick: handleCommandClick,
-    commandButtonLabel: label,
-    hasPopup: true,
-    ariaLabel: label,
-  };
-}
-
 function createNewDatabase(container: Explorer): CommandButtonComponentProps {
   const label = "New " + getDatabaseName();
   return {
     iconSrc: AddDatabaseIcon,
     iconAlt: label,
-    keyboardAction: KeyboardAction.NEW_DATABASE,
     onCommandClick: async () => {
       const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
       if (throughputCap && throughputCap !== -1) {
@@ -344,7 +354,6 @@ function createNewSQLQueryButton(selectedNodeState: SelectedNodeState): CommandB
       id: "newQueryBtn",
       iconSrc: AddSqlQueryIcon,
       iconAlt: label,
-      keyboardAction: KeyboardAction.NEW_QUERY,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewQueryClick(selectedCollection);
@@ -360,7 +369,6 @@ function createNewSQLQueryButton(selectedNodeState: SelectedNodeState): CommandB
       id: "newQueryBtn",
       iconSrc: AddSqlQueryIcon,
       iconAlt: label,
-      keyboardAction: KeyboardAction.NEW_QUERY,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewMongoQueryClick(selectedCollection);
@@ -386,7 +394,6 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
     const newStoredProcedureBtn: CommandButtonComponentProps = {
       iconSrc: AddStoredProcedureIcon,
       iconAlt: label,
-      keyboardAction: KeyboardAction.NEW_SPROC,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection);
@@ -406,7 +413,6 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
     const newUserDefinedFunctionBtn: CommandButtonComponentProps = {
       iconSrc: AddUdfIcon,
       iconAlt: label,
-      keyboardAction: KeyboardAction.NEW_UDF,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewUserDefinedFunctionClick(selectedCollection);
@@ -426,7 +432,6 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
     const newTriggerBtn: CommandButtonComponentProps = {
       iconSrc: AddTriggerIcon,
       iconAlt: label,
-      keyboardAction: KeyboardAction.NEW_TRIGGER,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewTriggerClick(selectedCollection);
@@ -444,12 +449,45 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
   return buttons;
 }
 
+function applyNotebooksTemporarilyDownStyle(buttonProps: CommandButtonComponentProps, tooltip: string): void {
+  if (!buttonProps.isDivider) {
+    buttonProps.disabled = true;
+    buttonProps.tooltipText = tooltip;
+  }
+}
+
+function createNewNotebookButton(container: Explorer): CommandButtonComponentProps {
+  const label = "New Notebook";
+  return {
+    id: "newNotebookBtn",
+    iconSrc: NewNotebookIcon,
+    iconAlt: label,
+    onCommandClick: () => container.onNewNotebookClicked(),
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+    ariaLabel: label,
+  };
+}
+
+function createuploadNotebookButton(container: Explorer): CommandButtonComponentProps {
+  const label = "Upload to Notebook Server";
+  return {
+    iconSrc: NewNotebookIcon,
+    iconAlt: label,
+    onCommandClick: () => container.openUploadFilePanel(),
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+    ariaLabel: label,
+  };
+}
+
 function createOpenQueryButton(container: Explorer): CommandButtonComponentProps {
   const label = "Open Query";
   return {
     iconSrc: BrowseQueriesIcon,
     iconAlt: label,
-    keyboardAction: KeyboardAction.OPEN_QUERY,
     onCommandClick: () =>
       useSidePanel.getState().openSidePanel("Open Saved Queries", <BrowseQueriesPane explorer={container} />),
     commandButtonLabel: label,
@@ -464,7 +502,6 @@ function createOpenQueryFromDiskButton(): CommandButtonComponentProps {
   return {
     iconSrc: OpenQueryFromDiskIcon,
     iconAlt: label,
-    keyboardAction: KeyboardAction.OPEN_QUERY_FROM_DISK,
     onCommandClick: () => useSidePanel.getState().openSidePanel("Load Query", <LoadQueryPane />),
     commandButtonLabel: label,
     ariaLabel: label,
@@ -473,6 +510,19 @@ function createOpenQueryFromDiskButton(): CommandButtonComponentProps {
   };
 }
 
+function createOpenTerminalButton(container: Explorer): CommandButtonComponentProps {
+  const label = "Open Terminal";
+  return {
+    iconSrc: CosmosTerminalIcon,
+    iconAlt: label,
+    onCommandClick: () => container.openNotebookTerminal(ViewModels.TerminalKind.Default),
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+    ariaLabel: label,
+  };
+}
+
 function createOpenTerminalButtonByKind(
   container: Explorer,
   terminalKind: ViewModels.TerminalKind,
@@ -512,6 +562,45 @@ function createOpenTerminalButtonByKind(
   };
 }
 
+function createNotebookWorkspaceResetButton(container: Explorer): CommandButtonComponentProps {
+  const label = "Reset Workspace";
+  return {
+    iconSrc: ResetWorkspaceIcon,
+    iconAlt: label,
+    onCommandClick: () => container.resetNotebookWorkspace(),
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+    ariaLabel: label,
+  };
+}
+
+function createManageGitHubAccountButton(container: Explorer): CommandButtonComponentProps {
+  const connectedToGitHub: boolean = container.notebookManager?.gitHubOAuthService.isLoggedIn();
+  const label = connectedToGitHub ? "Manage GitHub settings" : "Connect to GitHub";
+  const junoClient = new JunoClient();
+  return {
+    iconSrc: GitHubIcon,
+    iconAlt: label,
+    onCommandClick: () => {
+      useSidePanel
+        .getState()
+        .openSidePanel(
+          label,
+          <GitHubReposPanel
+            explorer={container}
+            gitHubClientProp={container.notebookManager.gitHubClient}
+            junoClientProp={junoClient}
+          />,
+        );
+    },
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+    ariaLabel: label,
+  };
+}
+
 function createStaticCommandBarButtonsForResourceToken(
   container: Explorer,
   selectedNodeState: SelectedNodeState,

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -7,7 +7,6 @@ import {
   IDropdownStyles,
 } from "@fluentui/react";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
-import { KeyboardHandlerMap } from "KeyboardShortcuts";
 import * as React from "react";
 import _ from "underscore";
 import ChevronDownIcon from "../../../../images/Chevron_down.svg";
@@ -60,23 +59,21 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
           imageProps: btn.iconSrc ? { src: btn.iconSrc, alt: btn.iconAlt } : undefined,
           iconName: btn.iconName,
         },
-        onClick: btn.onCommandClick
-          ? (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => {
-              btn.onCommandClick(ev);
-              let copilotEnabled = false;
-              if (useQueryCopilot.getState().copilotEnabled && useQueryCopilot.getState().copilotUserDBEnabled) {
-                copilotEnabled = useQueryCopilot.getState().copilotEnabledforExecution;
-              }
-              TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label, copilotEnabled });
-            }
-          : undefined,
+        onClick: (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => {
+          btn.onCommandClick(ev);
+          let copilotEnabled = false;
+          if (useQueryCopilot.getState().copilotEnabled && useQueryCopilot.getState().copilotUserDBEnabled) {
+            copilotEnabled = useQueryCopilot.getState().copilotEnabledforExecution;
+          }
+          TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label, copilotEnabled });
+        },
         key: `${btn.commandButtonLabel}${index}`,
         text: label,
+        "data-test": label,
         title: btn.tooltipText,
         name: label,
         disabled: btn.disabled,
         ariaLabel: btn.ariaLabel,
-        "data-test": `CommandBar/Button:${label}`,
         buttonStyles: {
           root: {
             backgroundColor: backgroundColor,
@@ -236,28 +233,3 @@ export const createConnectionStatus = (container: Explorer, poolId: PoolIdType,
     onRender: () => <ConnectionStatus container={container} poolId={poolId} />,
   };
 };
-
-export function createKeyboardHandlers(allButtons: CommandButtonComponentProps[]): KeyboardHandlerMap {
-  const handlers: KeyboardHandlerMap = {};
-
-  function createHandlers(buttons: CommandButtonComponentProps[]) {
-    buttons.forEach((button) => {
-      if (!button.disabled && button.keyboardAction) {
-        handlers[button.keyboardAction] = (e) => {
-          button.onCommandClick(e);
-
-          // If the handler is bound, it means the button is visible and enabled, so we should prevent the default action
-          return true;
-        };
-      }
-
-      if (button.children && button.children.length > 0) {
-        createHandlers(button.children);
-      }
-    });
-  }
-
-  createHandlers(allButtons);
-
-  return handlers;
-}

src/Explorer/OpenActions/OpenActions.tsx

@@ -1,5 +1,4 @@
 // TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.
-import { useDatabases } from "Explorer/useDatabases";
 import React from "react";
 import { ActionContracts } from "../../Contracts/ExplorerContracts";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -41,112 +40,97 @@ function openCollectionTab(
   databases: ViewModels.Database[],
   initialDatabaseIndex = 0,
 ) {
-  //if databases are not yet loaded, wait until loaded
-  if (!databases || databases.length === 0) {
-    const databaseActionHandler = (databases: ViewModels.Database[]) => {
-      databasesUnsubscription();
-      openCollectionTab(action, databases, 0);
-      return;
-    };
-    const databasesUnsubscription = useDatabases.subscribe(databaseActionHandler, (state) => state.databases);
-  } else {
-    for (let i = initialDatabaseIndex; i < databases.length; i++) {
-      const database: ViewModels.Database = databases[i];
-      if (!!action.databaseResourceId && database.id() !== action.databaseResourceId) {
-        continue;
-      }
-
-      //expand database first if not expanded to load the collections
-      if (!database.isDatabaseExpanded?.()) {
-        database.expandDatabase?.();
-      }
-
-      const collectionActionHandler = (collections: ViewModels.Collection[]) => {
-        if (!action.collectionResourceId && collections.length === 0) {
-          subscription.dispose();
-          openCollectionTab(action, databases, ++i);
-          return;
-        }
-
-        for (let j = 0; j < collections.length; j++) {
-          const collection: ViewModels.Collection = collections[j];
-          if (!!action.collectionResourceId && collection.id() !== action.collectionResourceId) {
-            continue;
-          }
-
-          // select the collection
-          collection.expandCollection();
-
-          if (
-            action.tabKind === ActionContracts.TabKind.SQLDocuments ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLDocuments]
-          ) {
-            collection.onDocumentDBDocumentsClick();
-            break;
-          }
-
-          if (
-            action.tabKind === ActionContracts.TabKind.MongoDocuments ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.MongoDocuments]
-          ) {
-            collection.onMongoDBDocumentsClick();
-            break;
-          }
-
-          if (
-            action.tabKind === ActionContracts.TabKind.SchemaAnalyzer ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SchemaAnalyzer]
-          ) {
-            collection.onSchemaAnalyzerClick();
-            break;
-          }
-
-          if (
-            action.tabKind === ActionContracts.TabKind.TableEntities ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.TableEntities]
-          ) {
-            collection.onTableEntitiesClick();
-            break;
-          }
-
-          if (
-            action.tabKind === ActionContracts.TabKind.Graph ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.Graph]
-          ) {
-            collection.onGraphDocumentsClick();
-            break;
-          }
-
-          if (
-            action.tabKind === ActionContracts.TabKind.SQLQuery ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLQuery]
-          ) {
-            collection.onNewQueryClick(
-              collection,
-              undefined,
-              generateQueryText(action as ActionContracts.OpenQueryTab, collection.partitionKeyProperties),
-            );
-            break;
-          }
-
-          if (
-            action.tabKind === ActionContracts.TabKind.ScaleSettings ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.ScaleSettings]
-          ) {
-            collection.onSettingsClick();
-            break;
-          }
-        }
-        subscription.dispose();
-      };
-
-      const subscription = database.collections.subscribe((collections) => collectionActionHandler(collections));
-      if (database.collections && database.collections() && database.collections().length) {
-        collectionActionHandler(database.collections());
-      }
-
-      break;
+  for (let i = initialDatabaseIndex; i < databases.length; i++) {
+    const database: ViewModels.Database = databases[i];
+    if (!!action.databaseResourceId && database.id() !== action.databaseResourceId) {
+      continue;
     }
+
+    const collectionActionHandler = (collections: ViewModels.Collection[]) => {
+      if (!action.collectionResourceId && collections.length === 0) {
+        subscription.dispose();
+        openCollectionTab(action, databases, ++i);
+        return;
+      }
+
+      for (let j = 0; j < collections.length; j++) {
+        const collection: ViewModels.Collection = collections[j];
+        if (!!action.collectionResourceId && collection.id() !== action.collectionResourceId) {
+          continue;
+        }
+
+        // select the collection
+        collection.expandCollection();
+
+        if (
+          action.tabKind === ActionContracts.TabKind.SQLDocuments ||
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLDocuments]
+        ) {
+          collection.onDocumentDBDocumentsClick();
+          break;
+        }
+
+        if (
+          action.tabKind === ActionContracts.TabKind.MongoDocuments ||
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.MongoDocuments]
+        ) {
+          collection.onMongoDBDocumentsClick();
+          break;
+        }
+
+        if (
+          action.tabKind === ActionContracts.TabKind.SchemaAnalyzer ||
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SchemaAnalyzer]
+        ) {
+          collection.onSchemaAnalyzerClick();
+          break;
+        }
+
+        if (
+          action.tabKind === ActionContracts.TabKind.TableEntities ||
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.TableEntities]
+        ) {
+          collection.onTableEntitiesClick();
+          break;
+        }
+
+        if (
+          action.tabKind === ActionContracts.TabKind.Graph ||
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.Graph]
+        ) {
+          collection.onGraphDocumentsClick();
+          break;
+        }
+
+        if (
+          action.tabKind === ActionContracts.TabKind.SQLQuery ||
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLQuery]
+        ) {
+          collection.onNewQueryClick(
+            collection,
+            undefined,
+            generateQueryText(action as ActionContracts.OpenQueryTab, collection.partitionKeyProperties),
+          );
+          break;
+        }
+
+        if (
+          action.tabKind === ActionContracts.TabKind.ScaleSettings ||
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.ScaleSettings]
+        ) {
+          collection.onSettingsClick();
+          break;
+        }
+      }
+      subscription.dispose();
+    };
+
+    const subscription = database.collections.subscribe((collections) => collectionActionHandler(collections));
+    if (database.collections && database.collections() && database.collections().length) {
+      collectionActionHandler(database.collections());
+    }
+
+    break;
   }
 }
 

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -21,7 +21,6 @@ import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import { configContext, Platform } from "ConfigContext";
 import * as DataModels from "Contracts/DataModels";
 import { SubscriptionType } from "Contracts/SubscriptionType";
-import { AddVectorEmbeddingPolicyForm } from "Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import React from "react";
@@ -30,7 +29,7 @@ import { Action } from "Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { getCollectionName } from "Utils/APITypeUtils";
-import { isCapabilityEnabled, isServerlessAccount, isVectorSearchEnabled } from "Utils/CapabilityUtils";
+import { isCapabilityEnabled, isServerlessAccount } from "Utils/CapabilityUtils";
 import { getUpsellMessage } from "Utils/PricingUtils";
 import { CollapsibleSectionComponent } from "../Controls/CollapsiblePanel/CollapsibleSectionComponent";
 import { ThroughputInput } from "../Controls/ThroughputInput/ThroughputInput";
@@ -82,10 +81,6 @@ export const AllPropertiesIndexed: DataModels.IndexingPolicy = {
   excludedPaths: [],
 };
 
-export const DefaultVectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy = {
-  vectorEmbeddings: [],
-};
-
 export interface AddCollectionPanelState {
   createNewDatabase: boolean;
   newDatabaseId: string;
@@ -106,9 +101,6 @@ export interface AddCollectionPanelState {
   isExecuting: boolean;
   isThroughputCapExceeded: boolean;
   teachingBubbleStep: number;
-  vectorIndexingPolicy: DataModels.VectorIndex[];
-  vectorEmbeddingPolicy: DataModels.VectorEmbedding[];
-  vectorPolicyValidated: boolean;
 }
 
 export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
@@ -144,9 +136,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       isExecuting: false,
       isThroughputCapExceeded: false,
       teachingBubbleStep: 0,
-      vectorEmbeddingPolicy: [],
-      vectorIndexingPolicy: [],
-      vectorPolicyValidated: true,
     };
   }
 
@@ -156,17 +145,11 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     }
   }
 
-  componentDidUpdate(_prevProps: AddCollectionPanelProps, prevState: AddCollectionPanelState): void {
-    if (this.state.errorMessage && this.state.errorMessage !== prevState.errorMessage) {
-      this.scrollToSection("panelContainer");
-    }
-  }
-
   render(): JSX.Element {
     const isFirstResourceCreated = useDatabases.getState().isFirstResourceCreated();
 
     return (
-      <form className="panelFormWrapper" onSubmit={this.submit.bind(this)} id="panelContainer">
+      <form className="panelFormWrapper" onSubmit={this.submit.bind(this)}>
         {this.state.errorMessage && (
           <PanelInfoErrorComponent
             message={this.state.errorMessage}
@@ -399,7 +382,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             )}
             {!this.state.createNewDatabase && (
               <Dropdown
-                ariaLabel="Choose an existing database"
                 styles={{ title: { height: 27, lineHeight: 27 }, dropdownItem: { fontSize: 12 } }}
                 style={{ width: 300, fontSize: 12 }}
                 placeholder="Choose an existing database"
@@ -576,7 +558,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 </TooltipHost>
               </Stack>
 
-              <Text variant="small">{this.getPartitionKeySubtext()}</Text>
+              <Text variant="small" aria-label="pkDescription">
+                {this.getPartitionKeySubtext()}
+              </Text>
 
               <input
                 type="text"
@@ -816,7 +800,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     iconName="Info"
                     className="panelInfoIcon"
                     tabIndex={0}
-                    ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
+                    ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without
+        impacting the performance of transactional workloads."
                   />
                 </TooltipHost>
               </Stack>
@@ -878,44 +863,17 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               )}
             </Stack>
           )}
-          {this.shouldShowVectorSearchParameters() && (
-            <Stack>
-              <CollapsibleSectionComponent
-                title="Container Vector Policy"
-                isExpandedByDefault={false}
-                onExpand={() => {
-                  this.scrollToSection("collapsibleVectorPolicySectionContent");
-                }}
-                tooltipContent={this.getContainerVectorPolicyTooltipContent()}
-              >
-                <Stack id="collapsibleVectorPolicySectionContent" styles={{ root: { position: "relative" } }}>
-                  <Stack styles={{ root: { paddingLeft: 40 } }}>
-                    <AddVectorEmbeddingPolicyForm
-                      vectorEmbedding={this.state.vectorEmbeddingPolicy}
-                      vectorIndex={this.state.vectorIndexingPolicy}
-                      onVectorEmbeddingChange={(
-                        vectorEmbeddingPolicy: DataModels.VectorEmbedding[],
-                        vectorIndexingPolicy: DataModels.VectorIndex[],
-                        vectorPolicyValidated: boolean,
-                      ) => {
-                        this.setState({ vectorEmbeddingPolicy, vectorIndexingPolicy, vectorPolicyValidated });
-                      }}
-                    />
-                  </Stack>
-                </Stack>
-              </CollapsibleSectionComponent>
-            </Stack>
-          )}
+
           {userContext.apiType !== "Tables" && (
             <CollapsibleSectionComponent
               title="Advanced"
               isExpandedByDefault={false}
               onExpand={() => {
                 TelemetryProcessor.traceOpen(Action.ExpandAddCollectionPaneAdvancedSection);
-                this.scrollToSection("collapsibleAdvancedSectionContent");
+                this.scrollToAdvancedSection();
               }}
             >
-              <Stack className="panelGroupSpacing" id="collapsibleAdvancedSectionContent">
+              <Stack className="panelGroupSpacing" id="collapsibleSectionContent">
                 {isCapabilityEnabled("EnableMongo") && !isCapabilityEnabled("EnableMongo16MBDocumentSupport") && (
                   <Stack className="panelGroupSpacing">
                     <Stack horizontal>
@@ -966,9 +924,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       }
                     />
                     <Text variant="small">
-                      <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the
-                      created container will use a legacy partitioning scheme that supports partition key values of size
-                      only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}
+                      <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> To ensure compatibility with
+                      older SDKs, the created container will use a legacy partitioning scheme that supports partition
+                      key values of size only up to 101 bytes. If this is enabled, you will not be able to use
+                      hierarchical partition keys.{" "}
                       <Link href="https://aka.ms/cosmos-large-pk" target="_blank">
                         Learn more
                       </Link>
@@ -1111,18 +1070,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     }
   }
 
-  private setVectorEmbeddingPolicy(vectorEmbeddingPolicy: DataModels.VectorEmbedding[]): void {
-    this.setState({
-      vectorEmbeddingPolicy,
-    });
-  }
-
-  private setVectorIndexingPolicy(vectorIndexingPolicy: DataModels.VectorIndex[]): void {
-    this.setState({
-      vectorIndexingPolicy,
-    });
-  }
-
   private isSelectedDatabaseSharedThroughput(): boolean {
     if (!this.state.selectedDatabaseId) {
       return false;
@@ -1203,18 +1150,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     );
   }
 
-  private getContainerVectorPolicyTooltipContent(): JSX.Element {
-    return (
-      <Text variant="small">
-        Describe any properties in your data that contain vectors, so that they can be made available for similarity
-        queries.{" "}
-        <Link target="_blank" href="https://aka.ms/CosmosDBVectorSetup">
-          Learn more
-        </Link>
-      </Text>
-    );
-  }
-
   private shouldShowCollectionThroughputInput(): boolean {
     if (isServerlessAccount()) {
       return false;
@@ -1274,10 +1209,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     );
   }
 
-  private shouldShowVectorSearchParameters() {
-    return isVectorSearchEnabled() && (isServerlessAccount() || this.shouldShowCollectionThroughputInput());
-  }
-
   private parseUniqueKeys(): DataModels.UniqueKeyPolicy {
     if (this.state.uniqueKeys?.length === 0) {
       return undefined;
@@ -1334,11 +1265,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       return false;
     }
 
-    if (this.shouldShowVectorSearchParameters() && !this.state.vectorPolicyValidated) {
-      this.setState({ errorMessage: "Please fix errors in container vector policy" });
-      return false;
-    }
-
     return true;
   }
 
@@ -1361,8 +1287,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     return Constants.AnalyticalStorageTtl.Disabled;
   }
 
-  private scrollToSection(id: string): void {
-    document.getElementById(id)?.scrollIntoView();
+  private scrollToAdvancedSection(): void {
+    document.getElementById("collapsibleSectionContent")?.scrollIntoView();
   }
 
   private getSampleDBName(): string {
@@ -1418,15 +1344,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       ? AllPropertiesIndexed
       : SharedDatabaseDefault;
 
-    let vectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy;
-
-    if (this.shouldShowVectorSearchParameters()) {
-      indexingPolicy.vectorIndexes = this.state.vectorIndexingPolicy;
-      vectorEmbeddingPolicy = {
-        vectorEmbeddings: this.state.vectorEmbeddingPolicy,
-      };
-    }
-
     const telemetryData = {
       database: {
         id: databaseId,
@@ -1485,7 +1402,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       partitionKey,
       uniqueKeyPolicy,
       createMongoWildcardIndex: this.state.createMongoWildCardIndex,
-      vectorEmbeddingPolicy,
     };
 
     this.setState({ isExecuting: true });

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx

@@ -202,8 +202,8 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
                 required={true}
                 autoComplete="off"
                 styles={getTextFieldStyles()}
-                pattern="[^/?#\\-]*[^/?#- \\]"
-                title="May not end with space nor contain characters '\' '/' '#' '?' '-'"
+                pattern="[^/?#\\]*[^/?# \\]"
+                title="May not end with space nor contain characters '\' '/' '#' '?'"
                 placeholder="Type a new keyspace id"
                 size={40}
                 value={newKeyspaceId}
@@ -275,7 +275,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
             <span className="mandatoryStar">*&nbsp;</span>
             <Text className="panelTextBold" variant="small">
               Enter CQL command to create the table.{" "}
-              <Link className="underlinedLink" href="https://aka.ms/cassandra-create-table" target="_blank">
+              <Link href="https://aka.ms/cassandra-create-table" target="_blank">
                 Learn More
               </Link>
             </Text>
@@ -292,8 +292,8 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
               required={true}
               ariaLabel="addCollection-table Id Create table"
               autoComplete="off"
-              pattern="[^/?#\\-]*[^/?#- \\]"
-              title="May not end with space nor contain characters '\' '/' '#' '?' '-'"
+              pattern="[^/?#\\]*[^/?# \\]"
+              title="May not end with space nor contain characters '\' '/' '#' '?'"
               placeholder="Enter table Id"
               size={20}
               value={tableId}

src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx

@@ -6,7 +6,6 @@ import {
   Icon,
   IconButton,
   Link,
-  MessageBar,
   Stack,
   Text,
   TooltipHost,
@@ -208,7 +207,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
         </Stack>
         {createNewContainer ? (
           <Stack>
-            <MessageBar>All configurations except for unique keys will be copied from the source container</MessageBar>
             <Stack className="panelGroupSpacing">
               <Stack horizontal>
                 <span className="mandatoryStar">*&nbsp;</span>
@@ -264,7 +262,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                 </TooltipHost>
               </Stack>
 
-              <Text variant="small">
+              <Text variant="small" aria-label="pkDescription">
                 {getPartitionKeySubtext(userContext.features.partitionKeyDefault, userContext.apiType)}
               </Text>
 

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

@@ -379,7 +379,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
         >
           <CustomizedPrimaryButton
             ariaLabel="OK"
-            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="OK"
@@ -387,7 +386,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
           >
             <PrimaryButton
               ariaLabel="OK"
-              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               text="OK"
@@ -668,7 +666,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             >
               <CustomizedDefaultButton
                 ariaLabel="OK"
-                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -951,7 +948,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               >
                 <DefaultButton
                   ariaLabel="OK"
-                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -1235,7 +1231,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   <BaseButton
                     ariaLabel="OK"
                     baseClassName="ms-Button"
-                    data-test="Panel/OkButton"
                     disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
@@ -2110,7 +2105,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       aria-label="OK"
                       className="ms-Button ms-Button--primary root-122"
                       data-is-focusable={true}
-                      data-test="Panel/OkButton"
                       id="sidePanelOkButton"
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -2146,11 +2140,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
         </div>
       </PanelFooterComponent>
     </form>
-    <span
-      className="screenReaderOnly"
-      id="screenReaderStatus"
-      role="status"
-    />
   </RightPaneForm>
 </DeleteCollectionConfirmationPane>
 `;

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -9,7 +9,6 @@ import { DefaultExperienceUtility } from "Shared/DefaultExperienceUtility";
 import { Action, ActionModifiers } from "Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
-import { getDatabaseName } from "Utils/APITypeUtils";
 import { logConsoleError } from "Utils/NotificationConsoleUtils";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTabs } from "hooks/useTabs";
@@ -38,11 +37,11 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
   const submit = async (): Promise<void> => {
     if (selectedDatabase?.id() && databaseInput !== selectedDatabase.id()) {
       setFormError(
-        `Input ${getDatabaseName()} name "${databaseInput}" does not match the selected ${getDatabaseName()} "${selectedDatabase.id()}"`,
+        `Input database name "${databaseInput}" does not match the selected database "${selectedDatabase.id()}"`,
       );
-      logConsoleError(`Error while deleting ${getDatabaseName()} ${selectedDatabase && selectedDatabase.id()}`);
+      logConsoleError(`Error while deleting collection ${selectedDatabase && selectedDatabase.id()}`);
       logConsoleError(
-        `Input ${getDatabaseName()} name "${databaseInput}" does not match the selected ${getDatabaseName()} "${selectedDatabase.id()}"`,
+        `Input database name "${databaseInput}" does not match the selected database "${selectedDatabase.id()}"`,
       );
       return;
     }
@@ -124,18 +123,17 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
     message:
       "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
   };
-  const confirmDatabase = `Confirm by typing the ${getDatabaseName()} id`;
-  const reasonInfo = `Help us improve Azure Cosmos DB! What is the reason why you are deleting this ${getDatabaseName()}?`;
+  const confirmDatabase = "Confirm by typing the database id";
+  const reasonInfo = "Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?";
   return (
     <RightPaneForm {...props}>
       {!formError && <PanelInfoErrorComponent {...errorProps} />}
       <div className="panelMainContent">
         <div className="confirmDeleteInput">
           <span className="mandatoryStar">* </span>
-          <Text variant="small">Confirm by typing the {getDatabaseName()} id</Text>
+          <Text variant="small">Confirm by typing the database id</Text>
           <TextField
             id="confirmDatabaseId"
-            data-test="Input:confirmDatabaseId"
             autoFocus
             styles={{ fieldGroup: { width: 300 } }}
             onChange={(event, newInput?: string) => {
@@ -151,7 +149,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
               Help us improve Azure Cosmos DB!
             </Text>
             <Text variant="small" block>
-              What is the reason why you are deleting this {getDatabaseName()}?
+              What is the reason why you are deleting this database?
             </Text>
             <TextField
               id="deleteDatabaseFeedbackInput"

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

@@ -5312,7 +5312,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
         >
           <CustomizedPrimaryButton
             ariaLabel="Execute"
-            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="Execute"
@@ -5320,7 +5319,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
           >
             <PrimaryButton
               ariaLabel="Execute"
-              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               text="Execute"
@@ -5601,7 +5599,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="Execute"
-                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -5884,7 +5881,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="Execute"
-                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -6168,7 +6164,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   <BaseButton
                     ariaLabel="Execute"
                     baseClassName="ms-Button"
-                    data-test="Panel/OkButton"
                     disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
@@ -7043,7 +7038,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       aria-label="Execute"
                       className="ms-Button ms-Button--primary root-148"
                       data-is-focusable={true}
-                      data-test="Panel/OkButton"
                       id="sidePanelOkButton"
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -7079,11 +7073,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
-    <span
-      className="screenReaderOnly"
-      id="screenReaderStatus"
-      role="status"
-    />
   </RightPaneForm>
 </ExecuteSprocParamsPane>
 `;

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

@@ -18,6 +18,7 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
         Object {
           "container": Explorer {
             "_isInitializingNotebooks": false,
+            "_resetNotebookWorkspace": [Function],
             "isFixedCollectionWithSharedThroughputSupported": [Function],
             "isTabsContentExpanded": [Function],
             "onRefreshDatabasesKeyPress": [Function],

src/Explorer/Panes/PanelComponent.less

@@ -48,13 +48,6 @@
       font-size: @mediumFontSize;
       padding: 0 @LargeSpace 0 @SmallSpace;
     }
-
-    .panelSectionSpinner {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
   }
 }
 

src/Explorer/Panes/PanelContainerComponent.tsx

@@ -53,7 +53,6 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
 
     return (
       <Panel
-        data-test={`Panel:${this.props.headerText}`}
         headerText={this.props.headerText}
         isOpen={this.props.isOpen}
         onDismiss={this.onDissmiss}

src/Explorer/Panes/PanelFooterComponent.tsx

@@ -16,7 +16,6 @@ export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = (
     <PrimaryButton
       type="submit"
       id="sidePanelOkButton"
-      data-test="Panel/OkButton"
       text={buttonLabel}
       ariaLabel={buttonLabel}
       disabled={!!isButtonDisabled}

src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx

@@ -2,7 +2,6 @@ import React, { CSSProperties, FunctionComponent, ReactNode } from "react";
 import { PanelFooterComponent } from "../PanelFooterComponent";
 import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent";
 import { PanelLoadingScreen } from "../PanelLoadingScreen";
-import { labelToLoadingItemName } from "Explorer/Tables/Constants";
 
 export interface RightPaneFormProps {
   formError: string;
@@ -28,10 +27,6 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
   const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     onSubmit();
-    const screenReaderStatusElement = document.getElementById("screenReaderStatus");
-    if (screenReaderStatusElement) {
-      screenReaderStatusElement.innerHTML = labelToLoadingItemName[submitButtonText] || "Loading";
-    }
   };
 
   return (
@@ -47,7 +42,6 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
           />
         )}
       </form>
-      <span role="status" className="screenReaderOnly" id="screenReaderStatus"></span>
       {isExecuting && <PanelLoadingScreen />}
     </>
   );

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

@@ -21,7 +21,6 @@ exports[`Right Pane Form should render Default properly 1`] = `
       >
         <CustomizedPrimaryButton
           ariaLabel="Load"
-          data-test="Panel/OkButton"
           disabled={false}
           id="sidePanelOkButton"
           text="Load"
@@ -29,7 +28,6 @@ exports[`Right Pane Form should render Default properly 1`] = `
         >
           <PrimaryButton
             ariaLabel="Load"
-            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="Load"
@@ -310,7 +308,6 @@ exports[`Right Pane Form should render Default properly 1`] = `
           >
             <CustomizedDefaultButton
               ariaLabel="Load"
-              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               onRenderDescription={[Function]}
@@ -593,7 +590,6 @@ exports[`Right Pane Form should render Default properly 1`] = `
             >
               <DefaultButton
                 ariaLabel="Load"
-                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -877,7 +873,6 @@ exports[`Right Pane Form should render Default properly 1`] = `
                 <BaseButton
                   ariaLabel="Load"
                   baseClassName="ms-Button"
-                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -1752,7 +1747,6 @@ exports[`Right Pane Form should render Default properly 1`] = `
                     aria-label="Load"
                     className="ms-Button ms-Button--primary root-109"
                     data-is-focusable={true}
-                    data-test="Panel/OkButton"
                     id="sidePanelOkButton"
                     onClick={[Function]}
                     onKeyDown={[Function]}
@@ -1788,10 +1782,5 @@ exports[`Right Pane Form should render Default properly 1`] = `
       </div>
     </PanelFooterComponent>
   </form>
-  <span
-    className="screenReaderOnly"
-    id="screenReaderStatus"
-    role="status"
-  />
 </RightPaneForm>
 `;

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -4,29 +4,22 @@ import {
   IChoiceGroupOption,
   ISpinButtonStyles,
   IToggleStyles,
-  Icon,
-  MessageBar,
-  MessageBarType,
   Position,
   SpinButton,
   Toggle,
-  TooltipHost,
 } from "@fluentui/react";
 import * as Constants from "Common/Constants";
-import { SplitterDirection } from "Common/Splitter";
 import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
-import { Platform, configContext } from "ConfigContext";
-import { useDatabases } from "Explorer/useDatabases";
+import { configContext } from "ConfigContext";
 import {
   DefaultRUThreshold,
   LocalStorageUtility,
   StorageKey,
-  getDefaultQueryResultsView,
   getRUThreshold,
   ruThresholdEnabled as isRUThresholdEnabled,
 } from "Shared/StorageUtility";
 import * as StringUtility from "Shared/StringUtility";
-import { updateUserContext, userContext } from "UserContext";
+import { userContext } from "UserContext";
 import { logConsoleInfo } from "Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "Utils/PriorityBasedExecutionUtils";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
@@ -34,24 +27,6 @@ import { useSidePanel } from "hooks/useSidePanel";
 import React, { FunctionComponent, useState } from "react";
 import Explorer from "../../Explorer";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
-import { AuthType } from "AuthType";
-import create, { UseStore } from "zustand";
-
-export interface DataPlaneRbacState {
-  dataPlaneRbacEnabled: boolean;
-  aadTokenUpdated: boolean;
-
-  getState?: () => DataPlaneRbacState;
-
-  setDataPlaneRbacEnabled: (dataPlaneRbacEnabled: boolean) => void;
-  setAadDataPlaneUpdated: (aadTokenUpdated: boolean) => void;
-}
-
-type DataPlaneRbacStore = UseStore<Partial<DataPlaneRbacState>>;
-
-export const useDataPlaneRbac: DataPlaneRbacStore = create(() => ({
-  dataPlaneRbacEnabled: false,
-}));
 
 export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   explorer,
@@ -66,23 +41,12 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       ? Constants.Queries.UnlimitedPageOption
       : Constants.Queries.CustomPageOption,
   );
-
-  const [enableDataPlaneRBACOption, setEnableDataPlaneRBACOption] = useState<string>(
-    LocalStorageUtility.hasItem(StorageKey.DataPlaneRbacEnabled)
-      ? LocalStorageUtility.getEntryString(StorageKey.DataPlaneRbacEnabled)
-      : Constants.RBACOptions.setAutomaticRBACOption,
-  );
-  const [showDataPlaneRBACWarning, setShowDataPlaneRBACWarning] = useState<boolean>(false);
-
   const [ruThresholdEnabled, setRUThresholdEnabled] = useState<boolean>(isRUThresholdEnabled());
   const [ruThreshold, setRUThreshold] = useState<number>(getRUThreshold());
   const [queryTimeoutEnabled, setQueryTimeoutEnabled] = useState<boolean>(
     LocalStorageUtility.getEntryBoolean(StorageKey.QueryTimeoutEnabled),
   );
   const [queryTimeout, setQueryTimeout] = useState<number>(LocalStorageUtility.getEntryNumber(StorageKey.QueryTimeout));
-  const [defaultQueryResultsView, setDefaultQueryResultsView] = useState<SplitterDirection>(
-    getDefaultQueryResultsView(),
-  );
   const [automaticallyCancelQueryAfterTimeout, setAutomaticallyCancelQueryAfterTimeout] = useState<boolean>(
     LocalStorageUtility.getEntryBoolean(StorageKey.AutomaticallyCancelQueryAfterTimeout),
   );
@@ -138,10 +102,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin";
   const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
   const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled();
-  const shouldShowCopilotSampleDBOption =
-    userContext.apiType === "SQL" &&
-    useQueryCopilot.getState().copilotEnabled &&
-    useDatabases.getState().sampleDataResourceTokenCollection;
+  const shouldShowCopilotSampleDBOption = userContext.apiType === "SQL" && useQueryCopilot.getState().copilotEnabled;
   const handlerOnSubmit = async () => {
     setIsExecuting(true);
 
@@ -149,26 +110,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       StorageKey.ActualItemPerPage,
       isCustomPageOptionSelected() ? customItemPerPage : Constants.Queries.unlimitedItemsPerPage,
     );
-
     LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
-
-    LocalStorageUtility.setEntryString(StorageKey.DataPlaneRbacEnabled, enableDataPlaneRBACOption);
-    if (
-      enableDataPlaneRBACOption === Constants.RBACOptions.setTrueRBACOption ||
-      (enableDataPlaneRBACOption === Constants.RBACOptions.setAutomaticRBACOption &&
-        userContext.databaseAccount.properties.disableLocalAuth)
-    ) {
-      updateUserContext({
-        dataPlaneRbacEnabled: true,
-      });
-      useDataPlaneRbac.setState({ dataPlaneRbacEnabled: true });
-    } else {
-      updateUserContext({
-        dataPlaneRbacEnabled: false,
-      });
-      useDataPlaneRbac.setState({ dataPlaneRbacEnabled: false });
-    }
-
     LocalStorageUtility.setEntryBoolean(StorageKey.RUThresholdEnabled, ruThresholdEnabled);
     LocalStorageUtility.setEntryBoolean(StorageKey.QueryTimeoutEnabled, queryTimeoutEnabled);
     LocalStorageUtility.setEntryNumber(StorageKey.RetryAttempts, retryAttempts);
@@ -179,7 +121,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);
     LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, priorityLevel.toString());
     LocalStorageUtility.setEntryString(StorageKey.CopilotSampleDBEnabled, copilotSampleDBEnabled.toString());
-    LocalStorageUtility.setEntryString(StorageKey.DefaultQueryResultsView, defaultQueryResultsView);
 
     if (shouldShowGraphAutoVizOption) {
       LocalStorageUtility.setEntryBoolean(
@@ -256,17 +197,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     { key: Constants.PriorityLevel.High, text: "High" },
   ];
 
-  const dataPlaneRBACOptionsList: IChoiceGroupOption[] = [
-    { key: Constants.RBACOptions.setAutomaticRBACOption, text: "Automatic" },
-    { key: Constants.RBACOptions.setTrueRBACOption, text: "True" },
-    { key: Constants.RBACOptions.setFalseRBACOption, text: "False" },
-  ];
-
-  const defaultQueryResultsViewOptionList: IChoiceGroupOption[] = [
-    { key: SplitterDirection.Vertical, text: "Vertical" },
-    { key: SplitterDirection.Horizontal, text: "Horizontal" },
-  ];
-
   const handleOnPriorityLevelOptionChange = (
     ev: React.FormEvent<HTMLInputElement>,
     option: IChoiceGroupOption,
@@ -278,20 +208,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     setPageOption(option.key);
   };
 
-  const handleOnDataPlaneRBACOptionChange = (
-    ev: React.FormEvent<HTMLInputElement>,
-    option: IChoiceGroupOption,
-  ): void => {
-    setEnableDataPlaneRBACOption(option.key);
-
-    const shouldShowWarning =
-      (option.key === Constants.RBACOptions.setTrueRBACOption ||
-        (option.key === Constants.RBACOptions.setAutomaticRBACOption &&
-          userContext.databaseAccount.properties.disableLocalAuth === true)) &&
-      !useDataPlaneRbac.getState().aadTokenUpdated;
-    setShowDataPlaneRBACWarning(shouldShowWarning);
-  };
-
   const handleOnRUThresholdToggleChange = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
     setRUThresholdEnabled(checked);
   };
@@ -318,13 +234,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     }
   };
 
-  const handleOnDefaultQueryResultsViewChange = (
-    ev: React.MouseEvent<HTMLElement>,
-    option: IChoiceGroupOption,
-  ): void => {
-    setDefaultQueryResultsView(option.key as SplitterDirection);
-  };
-
   const handleOnQueryRetryAttemptsSpinButtonChange = (ev: React.MouseEvent<HTMLElement>, newValue?: string): void => {
     const retryAttempts = Number(newValue);
     if (!isNaN(retryAttempts)) {
@@ -452,54 +361,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
             </div>
           </div>
         )}
-        {userContext.apiType === "SQL" && userContext.authType === AuthType.AAD && (
-          <>
-            <div className="settingsSection">
-              <div className="settingsSectionPart">
-                <fieldset>
-                  <legend id="enableDataPlaneRBACOptions" className="settingsSectionLabel legendLabel">
-                    Enable Entra ID RBAC
-                  </legend>
-                  <TooltipHost
-                    content={
-                      <>
-                        Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra
-                        ID RBAC.
-                        <a
-                          href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          {" "}
-                          Learn more{" "}
-                        </a>
-                      </>
-                    }
-                  >
-                    <Icon iconName="Info" ariaLabel="Info tooltip" className="panelInfoIcon" tabIndex={0} />
-                  </TooltipHost>
-                  {showDataPlaneRBACWarning && configContext.platform === Platform.Portal && (
-                    <MessageBar
-                      messageBarType={MessageBarType.warning}
-                      isMultiline={true}
-                      onDismiss={() => setShowDataPlaneRBACWarning(false)}
-                      dismissButtonAriaLabel="Close"
-                    >
-                      Please click on &quot;Login for Entra ID RBAC&quot; prior to performing Entra ID RBAC operations
-                    </MessageBar>
-                  )}
-                  <ChoiceGroup
-                    ariaLabelledBy="enableDataPlaneRBACOptions"
-                    options={dataPlaneRBACOptionsList}
-                    styles={choiceButtonStyles}
-                    selectedKey={enableDataPlaneRBACOption}
-                    onChange={handleOnDataPlaneRBACOptionChange}
-                  />
-                </fieldset>
-              </div>
-            </div>
-          </>
-        )}
         {userContext.apiType === "SQL" && (
           <>
             <div className="settingsSection">
@@ -577,25 +438,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                 )}
               </div>
             </div>
-            <div className="settingsSection">
-              <div className="settingsSectionPart">
-                <div>
-                  <legend id="defaultQueryResultsView" className="settingsSectionLabel legendLabel">
-                    Default Query Results View
-                  </legend>
-                  <InfoTooltip>Select the default view to use when displaying query results.</InfoTooltip>
-                </div>
-                <div>
-                  <ChoiceGroup
-                    ariaLabelledBy="defaultQueryResultsView"
-                    selectedKey={defaultQueryResultsView}
-                    options={defaultQueryResultsViewOptionList}
-                    styles={choiceButtonStyles}
-                    onChange={handleOnDefaultQueryResultsViewChange}
-                  />
-                </div>
-              </div>
-            </div>
           </>
         )}
         <div className="settingsSection">
@@ -788,7 +630,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                 Enable sample database
                 <InfoTooltip>
                   This is a sample database and collection with synthetic product data you can use to explore using
-                  NoSQL queries and Query Advisor. This will appear as another database in the Data Explorer UI, and is
+                  NoSQL queries and Copilot. This will appear as another database in the Data Explorer UI, and is
                   created by, and maintained by Microsoft at no cost to you.
                 </InfoTooltip>
               </div>
@@ -798,7 +640,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                   label: { padding: 0 },
                 }}
                 className="padding"
-                ariaLabel="Enable sample db for Query Advisor"
+                ariaLabel="Enable sample db for Copilot"
                 checked={copilotSampleDBEnabled}
                 onChange={handleSampleDatabaseChange}
               />

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

@@ -205,67 +205,6 @@ exports[`Settings Pane should render Default properly 1`] = `
         </div>
       </div>
     </div>
-    <div
-      className="settingsSection"
-    >
-      <div
-        className="settingsSectionPart"
-      >
-        <div>
-          <legend
-            className="settingsSectionLabel legendLabel"
-            id="defaultQueryResultsView"
-          >
-            Default Query Results View
-          </legend>
-          <InfoTooltip>
-            Select the default view to use when displaying query results.
-          </InfoTooltip>
-        </div>
-        <div>
-          <StyledChoiceGroup
-            ariaLabelledBy="defaultQueryResultsView"
-            onChange={[Function]}
-            options={
-              Array [
-                Object {
-                  "key": "vertical",
-                  "text": "Vertical",
-                },
-                Object {
-                  "key": "horizontal",
-                  "text": "Horizontal",
-                },
-              ]
-            }
-            selectedKey="vertical"
-            styles={
-              Object {
-                "flexContainer": Array [
-                  Object {
-                    "selectors": Object {
-                      ".ms-ChoiceField": Object {
-                        "marginTop": 0,
-                      },
-                      ".ms-ChoiceField-wrapper label": Object {
-                        "fontSize": 12,
-                        "paddingTop": 0,
-                      },
-                      ".ms-ChoiceFieldGroup root-133": Object {
-                        "clear": "both",
-                      },
-                    },
-                  },
-                ],
-                "root": Object {
-                  "clear": "both",
-                },
-              }
-            }
-          />
-        </div>
-      </div>
-    </div>
     <div
       className="settingsSection"
     >

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

@@ -8,6 +8,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
   explorer={
     Explorer {
       "_isInitializingNotebooks": false,
+      "_resetNotebookWorkspace": [Function],
       "isFixedCollectionWithSharedThroughputSupported": [Function],
       "isTabsContentExpanded": [Function],
       "onRefreshDatabasesKeyPress": [Function],
@@ -688,7 +689,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
         >
           <CustomizedPrimaryButton
             ariaLabel="Create"
-            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="Create"
@@ -696,7 +696,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
           >
             <PrimaryButton
               ariaLabel="Create"
-              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               text="Create"
@@ -977,7 +976,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="Create"
-                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -1260,7 +1258,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="Create"
-                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -1544,7 +1541,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                   <BaseButton
                     ariaLabel="Create"
                     baseClassName="ms-Button"
-                    data-test="Panel/OkButton"
                     disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
@@ -2419,7 +2415,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                       aria-label="Create"
                       className="ms-Button ms-Button--primary root-122"
                       data-is-focusable={true}
-                      data-test="Panel/OkButton"
                       id="sidePanelOkButton"
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -2455,11 +2450,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
-    <span
-      className="screenReaderOnly"
-      id="screenReaderStatus"
-      role="status"
-    />
   </RightPaneForm>
 </StringInputPane>
 `;

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -124,8 +124,8 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
 
     setIsExecuting(true);
     const entity: Entities.ITableEntity = entityFromAttributes(entities);
+    const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity);
     try {
-      const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity);
       await tableEntityListViewModel.addEntityToCache(newEntity);
       if (!tryInsertNewHeaders(tableEntityListViewModel, newEntity)) {
         tableEntityListViewModel.redrawTableThrottled();
@@ -261,7 +261,6 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
         <TextField
           multiline
           rows={5}
-          ariaLabel={entityAttributeProperty}
           value={entityAttributeValue}
           onChange={(event, newInput?: string) => {
             entityChange(newInput, selectedRow, "value");

src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap

@@ -1258,7 +1258,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
         >
           <CustomizedPrimaryButton
             ariaLabel="OK"
-            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="OK"
@@ -1266,7 +1265,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
           >
             <PrimaryButton
               ariaLabel="OK"
-              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               text="OK"
@@ -1547,7 +1545,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="OK"
-                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -1830,7 +1827,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="OK"
-                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -2114,7 +2110,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
                   <BaseButton
                     ariaLabel="OK"
                     baseClassName="ms-Button"
-                    data-test="Panel/OkButton"
                     disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
@@ -2989,7 +2984,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
                       aria-label="OK"
                       className="ms-Button ms-Button--primary root-125"
                       data-is-focusable={true}
-                      data-test="Panel/OkButton"
                       id="sidePanelOkButton"
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -3025,11 +3019,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
-    <span
-      className="screenReaderOnly"
-      id="screenReaderStatus"
-      role="status"
-    />
   </RightPaneForm>
 </TableQuerySelectPanel>
 `;

src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap

@@ -369,7 +369,6 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
         >
           <CustomizedPrimaryButton
             ariaLabel="Add Entity"
-            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="Add Entity"
@@ -377,7 +376,6 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
           >
             <PrimaryButton
               ariaLabel="Add Entity"
-              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               text="Add Entity"
@@ -658,7 +656,6 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="Add Entity"
-                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -941,7 +938,6 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="Add Entity"
-                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -1225,7 +1221,6 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                   <BaseButton
                     ariaLabel="Add Entity"
                     baseClassName="ms-Button"
-                    data-test="Panel/OkButton"
                     disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
@@ -2100,7 +2095,6 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                       aria-label="Add Entity"
                       className="ms-Button ms-Button--primary root-113"
                       data-is-focusable={true}
-                      data-test="Panel/OkButton"
                       id="sidePanelOkButton"
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -2136,11 +2130,6 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
-    <span
-      className="screenReaderOnly"
-      id="screenReaderStatus"
-      role="status"
-    />
   </RightPaneForm>
 </AddTableEntityPanel>
 `;

src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap

@@ -375,7 +375,6 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
         >
           <CustomizedPrimaryButton
             ariaLabel="Update"
-            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="Update"
@@ -383,7 +382,6 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
           >
             <PrimaryButton
               ariaLabel="Update"
-              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               text="Update"
@@ -664,7 +662,6 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="Update"
-                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -947,7 +944,6 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="Update"
-                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -1231,7 +1227,6 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                   <BaseButton
                     ariaLabel="Update"
                     baseClassName="ms-Button"
-                    data-test="Panel/OkButton"
                     disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
@@ -2106,7 +2101,6 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                       aria-label="Update"
                       className="ms-Button ms-Button--primary root-113"
                       data-is-focusable={true}
-                      data-test="Panel/OkButton"
                       id="sidePanelOkButton"
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -2142,11 +2136,6 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
-    <span
-      className="screenReaderOnly"
-      id="screenReaderStatus"
-      role="status"
-    />
   </RightPaneForm>
 </EditTableEntityPanel>
 `;

src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx

@@ -0,0 +1,91 @@
+import { Upload } from "Common/Upload/Upload";
+import { useSidePanel } from "hooks/useSidePanel";
+import React, { ChangeEvent, FunctionComponent, useState } from "react";
+import { logConsoleError, logConsoleInfo, logConsoleProgress } from "Utils/NotificationConsoleUtils";
+import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
+
+export interface UploadFilePanelProps {
+  uploadFile: (name: string, content: string) => Promise<NotebookContentItem>;
+}
+
+export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({ uploadFile }: UploadFilePanelProps) => {
+  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
+  const extensions: string = undefined; //ex. ".ipynb"
+  const errorMessage = "Could not upload file";
+  const inProgressMessage = "Uploading file to notebook server";
+  const successMessage = "Successfully uploaded file to notebook server";
+
+  const [files, setFiles] = useState<FileList>();
+  const [formErrors, setFormErrors] = useState<string>("");
+  const [isExecuting, setIsExecuting] = useState<boolean>(false);
+
+  const submit = () => {
+    setFormErrors("");
+    if (!files || files.length === 0) {
+      setFormErrors("No file specified. Please input a file.");
+      logConsoleError(`${errorMessage} -- No file specified. Please input a file.`);
+      return;
+    }
+
+    const file: File = files.item(0);
+
+    const clearMessage = logConsoleProgress(`${inProgressMessage}: ${file.name}`);
+
+    setIsExecuting(true);
+
+    onSubmit(files.item(0))
+      .then(
+        () => {
+          logConsoleInfo(`${successMessage} ${file.name}`);
+          closeSidePanel();
+        },
+        (error: string) => {
+          setFormErrors(errorMessage);
+          logConsoleError(`${errorMessage} ${file.name}: ${error}`);
+        },
+      )
+      .finally(() => {
+        setIsExecuting(false);
+        clearMessage();
+      });
+  };
+
+  const updateSelectedFiles = (event: ChangeEvent<HTMLInputElement>): void => {
+    setFiles(event.target.files);
+  };
+
+  const onSubmit = async (file: File): Promise<NotebookContentItem> => {
+    const readFileAsText = (inputFile: File): Promise<string> => {
+      const reader = new FileReader();
+      return new Promise((resolve, reject) => {
+        reader.onerror = () => {
+          reader.abort();
+          reject(`Problem parsing file: ${inputFile}`);
+        };
+        reader.onload = () => {
+          resolve(reader.result as string);
+        };
+        reader.readAsText(inputFile);
+      });
+    };
+
+    const fileContent = await readFileAsText(file);
+    return uploadFile(file.name, fileContent);
+  };
+
+  const props: RightPaneFormProps = {
+    formError: formErrors,
+    isExecuting: isExecuting,
+    submitButtonText: "Upload",
+    onSubmit: submit,
+  };
+
+  return (
+    <RightPaneForm {...props}>
+      <div className="paneMainContent">
+        <Upload label="Select file to upload" accept={extensions} onUpload={updateSelectedFiles} />
+      </div>
+    </RightPaneForm>
+  );
+};

src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.test.tsx

@@ -1,84 +0,0 @@
-import "@testing-library/jest-dom/extend-expect";
-import { RenderResult, fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
-import React from "react";
-import { AddVectorEmbeddingPolicyForm } from "./AddVectorEmbeddingPolicyForm";
-
-const mockVectorEmbedding: VectorEmbedding[] = [
-  { path: "/vector1", dataType: "float32", distanceFunction: "euclidean", dimensions: 0 },
-];
-
-const mockVectorIndex: VectorIndex[] = [{ path: "/vector1", type: "flat" }];
-
-const mockOnVectorEmbeddingChange = jest.fn();
-
-describe("AddVectorEmbeddingPolicyForm", () => {
-  let component: RenderResult;
-
-  beforeEach(() => {
-    component = render(
-      <AddVectorEmbeddingPolicyForm
-        vectorEmbedding={mockVectorEmbedding}
-        vectorIndex={mockVectorIndex}
-        onVectorEmbeddingChange={mockOnVectorEmbeddingChange}
-      />,
-    );
-  });
-
-  test("renders correctly", () => {
-    expect(screen.getByText("Vector embedding 1")).toBeInTheDocument();
-    expect(screen.getByPlaceholderText("/vector1")).toBeInTheDocument();
-  });
-
-  test("calls onVectorEmbeddingChange on adding a new vector embedding", () => {
-    fireEvent.click(screen.getByText("Add vector embedding"));
-    expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
-  });
-
-  test("calls onDelete when delete button is clicked", async () => {
-    const deleteButton = component.container.querySelector("#delete-vector-policy-1");
-    fireEvent.click(deleteButton);
-    expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
-    expect(screen.queryByText("Vector embedding 1")).toBeNull();
-  });
-
-  test("calls onVectorEmbeddingPathChange on input change", () => {
-    fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "/newPath" } });
-    expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
-  });
-
-  test("validates input correctly", async () => {
-    fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "" } });
-    await waitFor(() => expect(screen.getByText("Vector embedding path should not be empty")).toBeInTheDocument(), {
-      timeout: 1500,
-    });
-    await waitFor(
-      () =>
-        expect(
-          screen.getByText("Vector embedding dimension must be greater than 0 and less than or equal 4096"),
-        ).toBeInTheDocument(),
-      {
-        timeout: 1500,
-      },
-    );
-    fireEvent.change(component.container.querySelector("#vector-policy-dimension-1"), { target: { value: "4096" } });
-    fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "/vector1" } });
-    await waitFor(() => expect(screen.queryByText("Vector embedding path should not be empty")).toBeNull(), {
-      timeout: 1500,
-    });
-    await waitFor(
-      () => expect(screen.queryByText("Maximum allowed dimension for flat index is 505")).toBeInTheDocument(),
-      {
-        timeout: 1500,
-      },
-    );
-  });
-
-  test("duplicate vector path is not allowed", async () => {
-    fireEvent.click(screen.getByText("Add vector embedding"));
-    fireEvent.change(component.container.querySelector("#vector-policy-path-2"), { target: { value: "/vector1" } });
-    await waitFor(() => expect(screen.queryByText("Vector embedding path is already defined")).toBeNull(), {
-      timeout: 1500,
-    });
-  });
-});

src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.tsx

@@ -1,300 +0,0 @@
-import {
-  DefaultButton,
-  Dropdown,
-  IDropdownOption,
-  IStyleFunctionOrObject,
-  ITextFieldStyleProps,
-  ITextFieldStyles,
-  IconButton,
-  Label,
-  Stack,
-  TextField,
-} from "@fluentui/react";
-import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
-import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
-import {
-  getDataTypeOptions,
-  getDistanceFunctionOptions,
-  getIndexTypeOptions,
-} from "Explorer/Panes/VectorSearchPanel/VectorSearchUtils";
-import React, { FunctionComponent, useState } from "react";
-
-export interface IAddVectorEmbeddingPolicyFormProps {
-  vectorEmbedding: VectorEmbedding[];
-  vectorIndex: VectorIndex[];
-  onVectorEmbeddingChange: (
-    vectorEmbeddings: VectorEmbedding[],
-    vectorIndexingPolicies: VectorIndex[],
-    validationPassed: boolean,
-  ) => void;
-}
-
-export interface VectorEmbeddingPolicyData {
-  path: string;
-  dataType: VectorEmbedding["dataType"];
-  distanceFunction: VectorEmbedding["distanceFunction"];
-  dimensions: number;
-  indexType: VectorIndex["type"] | "none";
-  pathError: string;
-  dimensionsError: string;
-}
-
-type VectorEmbeddingPolicyProperty = "dataType" | "distanceFunction" | "indexType";
-
-const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
-  fieldGroup: {
-    height: 27,
-  },
-  field: {
-    fontSize: 12,
-    padding: "0 8px",
-  },
-};
-
-const dropdownStyles = {
-  title: {
-    height: 27,
-    lineHeight: "24px",
-    fontSize: 12,
-  },
-  dropdown: {
-    height: 27,
-    lineHeight: "24px",
-  },
-  dropdownItem: {
-    fontSize: 12,
-  },
-};
-
-export const AddVectorEmbeddingPolicyForm: FunctionComponent<IAddVectorEmbeddingPolicyFormProps> = ({
-  vectorEmbedding,
-  vectorIndex,
-  onVectorEmbeddingChange,
-}): JSX.Element => {
-  const onVectorEmbeddingPathError = (path: string, index?: number): string => {
-    let error = "";
-    if (!path) {
-      error = "Vector embedding path should not be empty";
-    }
-    if (
-      index >= 0 &&
-      vectorEmbeddingPolicyData?.find(
-        (vectorEmbedding: VectorEmbeddingPolicyData, dataIndex: number) =>
-          dataIndex !== index && vectorEmbedding.path === path,
-      )
-    ) {
-      error = "Vector embedding path is already defined";
-    }
-    return error;
-  };
-
-  const onVectorEmbeddingDimensionError = (dimension: number, indexType: VectorIndex["type"] | "none"): string => {
-    let error = "";
-    if (dimension <= 0 || dimension > 4096) {
-      error = "Vector embedding dimension must be greater than 0 and less than or equal 4096";
-    }
-    if (indexType === "flat" && dimension > 505) {
-      error = "Maximum allowed dimension for flat index is 505";
-    }
-    return error;
-  };
-
-  const initializeData = (vectorEmbedding: VectorEmbedding[], vectorIndex: VectorIndex[]) => {
-    const mergedData: VectorEmbeddingPolicyData[] = [];
-    vectorEmbedding.forEach((embedding) => {
-      const matchingIndex = vectorIndex.find((index) => index.path === embedding.path);
-      mergedData.push({
-        ...embedding,
-        indexType: matchingIndex?.type || "none",
-        pathError: onVectorEmbeddingPathError(embedding.path),
-        dimensionsError: onVectorEmbeddingDimensionError(embedding.dimensions, matchingIndex?.type || "none"),
-      });
-    });
-    return mergedData;
-  };
-
-  const [vectorEmbeddingPolicyData, setVectorEmbeddingPolicyData] = useState<VectorEmbeddingPolicyData[]>(
-    initializeData(vectorEmbedding, vectorIndex),
-  );
-
-  React.useEffect(() => {
-    propagateData();
-  }, [vectorEmbeddingPolicyData]);
-
-  const propagateData = () => {
-    const vectorEmbeddings: VectorEmbedding[] = vectorEmbeddingPolicyData.map((policy: VectorEmbeddingPolicyData) => ({
-      dataType: policy.dataType,
-      dimensions: policy.dimensions,
-      distanceFunction: policy.distanceFunction,
-      path: policy.path,
-    }));
-    const vectorIndexingPolicies: VectorIndex[] = vectorEmbeddingPolicyData
-      .filter((policy: VectorEmbeddingPolicyData) => policy.indexType !== "none")
-      .map(
-        (policy) =>
-          ({
-            path: policy.path,
-            type: policy.indexType,
-          }) as VectorIndex,
-      );
-    const validationPassed = vectorEmbeddingPolicyData.every(
-      (policy: VectorEmbeddingPolicyData) => policy.pathError === "" && policy.dimensionsError === "",
-    );
-    onVectorEmbeddingChange(vectorEmbeddings, vectorIndexingPolicies, validationPassed);
-  };
-
-  const onVectorEmbeddingPathChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value.trim();
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    if (!vectorEmbeddings[index]?.path && !value.startsWith("/")) {
-      vectorEmbeddings[index].path = "/" + value;
-    } else {
-      vectorEmbeddings[index].path = value;
-    }
-    const error = onVectorEmbeddingPathError(value, index);
-    vectorEmbeddings[index].pathError = error;
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onVectorEmbeddingDimensionsChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(event.target.value.trim()) || 0;
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    const vectorEmbedding = vectorEmbeddings[index];
-    vectorEmbeddings[index].dimensions = value;
-    const error = onVectorEmbeddingDimensionError(value, vectorEmbedding.indexType);
-    vectorEmbeddings[index].dimensionsError = error;
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onVectorEmbeddingIndexTypeChange = (index: number, option: IDropdownOption): void => {
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    const vectorEmbedding = vectorEmbeddings[index];
-    vectorEmbeddings[index].indexType = option.key as never;
-    const error = onVectorEmbeddingDimensionError(vectorEmbedding.dimensions, vectorEmbedding.indexType);
-    vectorEmbeddings[index].dimensionsError = error;
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onVectorEmbeddingPolicyChange = (
-    index: number,
-    option: IDropdownOption,
-    property: VectorEmbeddingPolicyProperty,
-  ): void => {
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    vectorEmbeddings[index][property] = option.key as never;
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onAdd = () => {
-    setVectorEmbeddingPolicyData([
-      ...vectorEmbeddingPolicyData,
-      {
-        path: "",
-        dataType: "float32",
-        distanceFunction: "euclidean",
-        dimensions: 0,
-        indexType: "none",
-        pathError: onVectorEmbeddingPathError(""),
-        dimensionsError: onVectorEmbeddingDimensionError(0, "none"),
-      },
-    ]);
-  };
-
-  const onDelete = (index: number) => {
-    const vectorEmbeddings = vectorEmbeddingPolicyData.filter((_uniqueKey, j) => index !== j);
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  return (
-    <Stack tokens={{ childrenGap: 4 }}>
-      {vectorEmbeddingPolicyData.length > 0 &&
-        vectorEmbeddingPolicyData.map((vectorEmbeddingPolicy: VectorEmbeddingPolicyData, index: number) => (
-          <CollapsibleSectionComponent key={index} isExpandedByDefault={true} title={`Vector embedding ${index + 1}`}>
-            <Stack horizontal tokens={{ childrenGap: 4 }}>
-              <Stack
-                styles={{
-                  root: {
-                    margin: "0 0 6px 20px !important",
-                    paddingLeft: 20,
-                    width: "80%",
-                    borderLeft: "1px solid",
-                  },
-                }}
-              >
-                <Stack>
-                  <Label styles={{ root: { fontSize: 12 } }}>Path</Label>
-                  <TextField
-                    id={`vector-policy-path-${index + 1}`}
-                    required={true}
-                    placeholder="/vector1"
-                    styles={textFieldStyles}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onVectorEmbeddingPathChange(index, event)}
-                    value={vectorEmbeddingPolicy.path || ""}
-                    errorMessage={vectorEmbeddingPolicy.pathError}
-                  />
-                </Stack>
-                <Stack>
-                  <Label styles={{ root: { fontSize: 12 } }}>Data type</Label>
-                  <Dropdown
-                    required={true}
-                    styles={dropdownStyles}
-                    options={getDataTypeOptions()}
-                    selectedKey={vectorEmbeddingPolicy.dataType}
-                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
-                      onVectorEmbeddingPolicyChange(index, option, "dataType")
-                    }
-                  ></Dropdown>
-                </Stack>
-                <Stack>
-                  <Label styles={{ root: { fontSize: 12 } }}>Distance function</Label>
-                  <Dropdown
-                    required={true}
-                    styles={dropdownStyles}
-                    options={getDistanceFunctionOptions()}
-                    selectedKey={vectorEmbeddingPolicy.distanceFunction}
-                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
-                      onVectorEmbeddingPolicyChange(index, option, "distanceFunction")
-                    }
-                  ></Dropdown>
-                </Stack>
-                <Stack>
-                  <Label styles={{ root: { fontSize: 12 } }}>Dimensions</Label>
-                  <TextField
-                    id={`vector-policy-dimension-${index + 1}`}
-                    required={true}
-                    styles={textFieldStyles}
-                    value={String(vectorEmbeddingPolicy.dimensions || 0)}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                      onVectorEmbeddingDimensionsChange(index, event)
-                    }
-                    errorMessage={vectorEmbeddingPolicy.dimensionsError}
-                  />
-                </Stack>
-                <Stack>
-                  <Label styles={{ root: { fontSize: 12 } }}>Index type</Label>
-                  <Dropdown
-                    required={true}
-                    styles={dropdownStyles}
-                    options={getIndexTypeOptions()}
-                    selectedKey={vectorEmbeddingPolicy.indexType}
-                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
-                      onVectorEmbeddingIndexTypeChange(index, option)
-                    }
-                  ></Dropdown>
-                </Stack>
-              </Stack>
-              <IconButton
-                id={`delete-vector-policy-${index + 1}`}
-                iconProps={{ iconName: "Delete" }}
-                style={{ height: 27, margin: "auto" }}
-                onClick={() => onDelete(index)}
-              />
-            </Stack>
-          </CollapsibleSectionComponent>
-        ))}
-      <DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}>
-        Add vector embedding
-      </DefaultButton>
-    </Stack>
-  );
-};

src/Explorer/Panes/VectorSearchPanel/VectorSearchUtils.ts

@@ -1,16 +0,0 @@
-import { IDropdownOption } from "@fluentui/react";
-
-const dataTypes = ["float32", "uint8", "int8"];
-const distanceFunctions = ["euclidean", "cosine", "dotproduct"];
-const indexTypes = ["none", "flat", "diskANN", "quantizedFlat"];
-
-export const getDataTypeOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(dataTypes);
-export const getDistanceFunctionOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(distanceFunctions);
-export const getIndexTypeOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(indexTypes);
-
-function createDropdownOptionsFromLiterals<T extends string>(literals: T[]): IDropdownOption[] {
-  return literals.map((value) => ({
-    key: value,
-    text: value,
-  }));
-}

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

@@ -3,7 +3,6 @@
 exports[`AddCollectionPanel should render Default properly 1`] = `
 <form
   className="panelFormWrapper"
-  id="panelContainer"
   onSubmit={[Function]}
 >
   <div
@@ -223,6 +222,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         </StyledTooltipHostBase>
       </Stack>
       <Text
+        aria-label="pkDescription"
         variant="small"
       />
       <input
@@ -433,7 +433,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
     >
       <Stack
         className="panelGroupSpacing"
-        id="collapsibleAdvancedSectionContent"
+        id="collapsibleSectionContent"
       >
         <Stack
           className="panelGroupSpacing"
@@ -466,6 +466,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
             <Icon
               className="removeIcon"
               iconName="InfoSolid"
+              tabIndex={0}
             />
              To ensure compatibility with older SDKs, the created container will use a legacy partitioning scheme that supports partition key values of size only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.
              
@@ -485,4 +486,4 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
     isButtonDisabled={false}
   />
 </form>
-`;
+`;

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

@@ -361,15 +361,12 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             <span
               className="css-113"
             >
-              Confirm by typing the 
-              Database
-               id
+              Confirm by typing the database id
             </span>
           </Text>
           <StyledTextFieldBase
-            ariaLabel="Confirm by typing the Database id"
+            ariaLabel="Confirm by typing the database id"
             autoFocus={true}
-            data-test="Input:confirmDatabaseId"
             id="confirmDatabaseId"
             onChange={[Function]}
             required={true}
@@ -382,9 +379,8 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             }
           >
             <TextFieldBase
-              ariaLabel="Confirm by typing the Database id"
+              ariaLabel="Confirm by typing the database id"
               autoFocus={true}
-              data-test="Input:confirmDatabaseId"
               deferredValidationTime={200}
               id="confirmDatabaseId"
               onChange={[Function]}
@@ -677,10 +673,9 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                   >
                     <input
                       aria-invalid={false}
-                      aria-label="Confirm by typing the Database id"
+                      aria-label="Confirm by typing the database id"
                       autoFocus={true}
                       className="ms-TextField-field field-117"
-                      data-test="Input:confirmDatabaseId"
                       id="confirmDatabaseId"
                       onBlur={[Function]}
                       onChange={[Function]}
@@ -716,13 +711,11 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             <span
               className="css-126"
             >
-              What is the reason why you are deleting this 
-              Database
-              ?
+              What is the reason why you are deleting this database?
             </span>
           </Text>
           <StyledTextFieldBase
-            ariaLabel="Help us improve Azure Cosmos DB! What is the reason why you are deleting this Database?"
+            ariaLabel="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
             id="deleteDatabaseFeedbackInput"
             multiline={true}
             onChange={[Function]}
@@ -736,7 +729,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             }
           >
             <TextFieldBase
-              ariaLabel="Help us improve Azure Cosmos DB! What is the reason why you are deleting this Database?"
+              ariaLabel="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
               deferredValidationTime={200}
               id="deleteDatabaseFeedbackInput"
               multiline={true}
@@ -1030,7 +1023,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                   >
                     <textarea
                       aria-invalid={false}
-                      aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this Database?"
+                      aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
                       className="ms-TextField-field field-128"
                       id="deleteDatabaseFeedbackInput"
                       onBlur={[Function]}
@@ -1056,7 +1049,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
         >
           <CustomizedPrimaryButton
             ariaLabel="OK"
-            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="OK"
@@ -1064,7 +1056,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
           >
             <PrimaryButton
               ariaLabel="OK"
-              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               text="OK"
@@ -1345,7 +1336,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="OK"
-                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -1628,7 +1618,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
               >
                 <DefaultButton
                   ariaLabel="OK"
-                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -1912,7 +1901,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                   <BaseButton
                     ariaLabel="OK"
                     baseClassName="ms-Button"
-                    data-test="Panel/OkButton"
                     disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
@@ -2787,7 +2775,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                       aria-label="OK"
                       className="ms-Button ms-Button--primary root-130"
                       data-is-focusable={true}
-                      data-test="Panel/OkButton"
                       id="sidePanelOkButton"
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -2823,11 +2810,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
-    <span
-      className="screenReaderOnly"
-      id="screenReaderStatus"
-      role="status"
-    />
   </RightPaneForm>
 </DeleteDatabaseConfirmationPanel>
 `;

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

@@ -4,7 +4,6 @@ exports[`PaneContainerComponent test should be resize if notification console is
 <StyledPanelBase
   closeButtonAriaLabel="Close test"
   customWidth="440px"
-  data-test="Panel:test"
   headerClassName="panelHeader"
   headerText="test"
   isFooterAtBottom={true}
@@ -45,7 +44,6 @@ exports[`PaneContainerComponent test should render with panel content and header
 <StyledPanelBase
   closeButtonAriaLabel="Close test"
   customWidth="440px"
-  data-test="Panel:test"
   headerClassName="panelHeader"
   headerText="test"
   isFooterAtBottom={true}

src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.tsx

@@ -49,7 +49,7 @@ export const QueryCopilotFeedbackModal = ({
   };
 
   return (
-    <Modal isOpen={showFeedbackModal} styles={{ main: { borderRadius: 8, maxWidth: 600 } }}>
+    <Modal isOpen={showFeedbackModal}>
       <form onSubmit={handleSubmit}>
         <Stack style={{ padding: 24 }}>
           <Stack horizontal horizontalAlign="space-between">
@@ -68,14 +68,9 @@ export const QueryCopilotFeedbackModal = ({
             rows={3}
           />
           <TextField
-            styles={{
-              root: { marginBottom: 14 },
-              fieldGroup: { backgroundColor: "#F3F2F1", borderRadius: 4, borderColor: "#D1D1D1" },
-            }}
+            styles={{ root: { marginBottom: 14 } }}
             label="Query generated"
             defaultValue={generatedQuery}
-            multiline
-            rows={3}
             readOnly
           />
           <Text style={{ fontSize: 12, marginBottom: 14 }}>

src/Explorer/QueryCopilot/Modal/__snapshots__/QueryCopilotFeedbackModal.test.tsx.snap

@@ -3,14 +3,6 @@
 exports[`Query Copilot Feedback Modal snapshot test shoud render and match snapshot 1`] = `
 <Modal
   isOpen={true}
-  styles={
-    Object {
-      "main": Object {
-        "borderRadius": 8,
-        "maxWidth": 600,
-      },
-    }
-  }
 >
   <form
     onSubmit={[Function]}
@@ -75,16 +67,9 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
       <StyledTextFieldBase
         defaultValue="test query"
         label="Query generated"
-        multiline={true}
         readOnly={true}
-        rows={3}
         styles={
           Object {
-            "fieldGroup": Object {
-              "backgroundColor": "#F3F2F1",
-              "borderColor": "#D1D1D1",
-              "borderRadius": 4,
-            },
             "root": Object {
               "marginBottom": 14,
             },
@@ -140,14 +125,6 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
 exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`] = `
 <Modal
   isOpen={false}
-  styles={
-    Object {
-      "main": Object {
-        "borderRadius": 8,
-        "maxWidth": 600,
-      },
-    }
-  }
 >
   <form
     onSubmit={[Function]}
@@ -212,16 +189,9 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
       <StyledTextFieldBase
         defaultValue="test query"
         label="Query generated"
-        multiline={true}
         readOnly={true}
-        rows={3}
         styles={
           Object {
-            "fieldGroup": Object {
-              "backgroundColor": "#F3F2F1",
-              "borderColor": "#D1D1D1",
-              "borderRadius": 4,
-            },
             "root": Object {
               "marginBottom": 14,
             },
@@ -277,14 +247,6 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
 exports[`Query Copilot Feedback Modal snapshot test should close on cancel click 1`] = `
 <Modal
   isOpen={false}
-  styles={
-    Object {
-      "main": Object {
-        "borderRadius": 8,
-        "maxWidth": 600,
-      },
-    }
-  }
 >
   <form
     onSubmit={[Function]}
@@ -349,16 +311,9 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
       <StyledTextFieldBase
         defaultValue="test query"
         label="Query generated"
-        multiline={true}
         readOnly={true}
-        rows={3}
         styles={
           Object {
-            "fieldGroup": Object {
-              "backgroundColor": "#F3F2F1",
-              "borderColor": "#D1D1D1",
-              "borderRadius": 4,
-            },
             "root": Object {
               "marginBottom": 14,
             },
@@ -414,14 +369,6 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
 exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] = `
 <Modal
   isOpen={false}
-  styles={
-    Object {
-      "main": Object {
-        "borderRadius": 8,
-        "maxWidth": 600,
-      },
-    }
-  }
 >
   <form
     onSubmit={[Function]}
@@ -486,16 +433,9 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
       <StyledTextFieldBase
         defaultValue="test query"
         label="Query generated"
-        multiline={true}
         readOnly={true}
-        rows={3}
         styles={
           Object {
-            "fieldGroup": Object {
-              "backgroundColor": "#F3F2F1",
-              "borderColor": "#D1D1D1",
-              "borderRadius": 4,
-            },
             "root": Object {
               "marginBottom": 14,
             },
@@ -551,14 +491,6 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
 exports[`Query Copilot Feedback Modal snapshot test should not render dont show again button 1`] = `
 <Modal
   isOpen={false}
-  styles={
-    Object {
-      "main": Object {
-        "borderRadius": 8,
-        "maxWidth": 600,
-      },
-    }
-  }
 >
   <form
     onSubmit={[Function]}
@@ -623,16 +555,9 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
       <StyledTextFieldBase
         defaultValue="test query"
         label="Query generated"
-        multiline={true}
         readOnly={true}
-        rows={3}
         styles={
           Object {
-            "fieldGroup": Object {
-              "backgroundColor": "#F3F2F1",
-              "borderColor": "#D1D1D1",
-              "borderRadius": 4,
-            },
             "root": Object {
               "marginBottom": 14,
             },
@@ -688,14 +613,6 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
 exports[`Query Copilot Feedback Modal snapshot test should render dont show again button and check it 1`] = `
 <Modal
   isOpen={true}
-  styles={
-    Object {
-      "main": Object {
-        "borderRadius": 8,
-        "maxWidth": 600,
-      },
-    }
-  }
 >
   <form
     onSubmit={[Function]}
@@ -760,16 +677,9 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
       <StyledTextFieldBase
         defaultValue="test query"
         label="Query generated"
-        multiline={true}
         readOnly={true}
-        rows={3}
         styles={
           Object {
-            "fieldGroup": Object {
-              "backgroundColor": "#F3F2F1",
-              "borderColor": "#D1D1D1",
-              "borderRadius": 4,
-            },
             "root": Object {
               "marginBottom": 14,
             },
@@ -840,14 +750,6 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
 exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`] = `
 <Modal
   isOpen={false}
-  styles={
-    Object {
-      "main": Object {
-        "borderRadius": 8,
-        "maxWidth": 600,
-      },
-    }
-  }
 >
   <form
     onSubmit={[Function]}
@@ -912,16 +814,9 @@ exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`]
       <StyledTextFieldBase
         defaultValue="test query"
         label="Query generated"
-        multiline={true}
         readOnly={true}
-        rows={3}
         styles={
           Object {
-            "fieldGroup": Object {
-              "backgroundColor": "#F3F2F1",
-              "borderColor": "#D1D1D1",
-              "borderRadius": 4,
-            },
             "root": Object {
               "marginBottom": 14,
             },

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -11,8 +11,8 @@ import {
   Link,
   MessageBar,
   MessageBarType,
-  ProgressIndicator,
   Separator,
+  Spinner,
   Stack,
   TeachingBubble,
   Text,
@@ -36,6 +36,7 @@ import { userContext } from "UserContext";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import React, { useRef, useState } from "react";
 import HintIcon from "../../../images/Hint.svg";
+import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
 import RecentIcon from "../../../images/Recent.svg";
 import errorIcon from "../../../images/close-black.svg";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
@@ -214,12 +215,12 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
       const generateSQLQueryResponse: GenerateSQLQueryResponse = await response?.json();
       if (response.ok) {
         if (generateSQLQueryResponse?.sql !== "N/A") {
-          const queryExplanation = `-- **Explanation of query:** ${
-            generateSQLQueryResponse.explanation ? generateSQLQueryResponse.explanation : "N/A"
-          }\r\n`;
-          const currentGeneratedQuery = queryExplanation + generateSQLQueryResponse.sql;
-          const lastQuery = generatedQuery && query ? `${query}\r\n` : "";
-          setQuery(`${lastQuery}${currentGeneratedQuery}`);
+          let query = `-- **Prompt:** ${userPrompt}\r\n`;
+          if (generateSQLQueryResponse.explanation) {
+            query += `-- **Explanation of query:** ${generateSQLQueryResponse.explanation}\r\n`;
+          }
+          query += generateSQLQueryResponse.sql;
+          setQuery(query);
           setGeneratedQuery(generateSQLQueryResponse.sql);
           setGeneratedQueryComments(generateSQLQueryResponse.explanation);
           setShowFeedbackBar(true);
@@ -296,9 +297,9 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     if (isGeneratingQuery === null) {
       return " ";
     } else if (isGeneratingQuery) {
-      return "Content is loading";
+      return "Content is loading!";
     } else {
-      return "Content is updated";
+      return "Content is updated!";
     }
   };
 
@@ -309,393 +310,12 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
   return (
     <Stack
       className="copilot-prompt-pane"
-      styles={{ root: { backgroundColor: "#FAFAFA", padding: "8px" } }}
+      styles={{ root: { backgroundColor: "#FAFAFA", padding: "16px 24px 0px" } }}
       id="copilot-textfield-label"
     >
-      <Stack
-        horizontal
-        styles={{
-          root: {
-            width: "100%",
-            borderWidth: 1,
-            borderStyle: "solid",
-            borderColor: "#D1D1D1",
-            borderRadius: 8,
-            boxShadow: "0px 4px 8px 0px #00000024",
-          },
-        }}
-      >
-        <Stack style={{ width: "100%" }}>
-          <Stack horizontal verticalAlign="center" style={{ padding: "8px 8px 0px 8px" }}>
-            <TextField
-              id="naturalLanguageInput"
-              value={userPrompt}
-              onChange={handleUserPromptChange}
-              onClick={() => {
-                inputEdited.current = true;
-                setShowSamplePrompts(true);
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && userPrompt) {
-                  inputEdited.current = true;
-                  startGenerateQueryProcess();
-                }
-              }}
-              style={{ lineHeight: 30 }}
-              styles={{
-                root: { width: "100%" },
-                suffix: {
-                  background: "none",
-                  padding: 0,
-                },
-                fieldGroup: {
-                  borderRadius: 4,
-                  borderColor: "#D1D1D1",
-                  "::after": {
-                    border: "inherit",
-                    borderWidth: 2,
-                    borderBottomColor: "#464FEB",
-                    borderRadius: 4,
-                  },
-                },
-              }}
-              disabled={isGeneratingQuery}
-              autoComplete="off"
-              placeholder="Ask a question in natural language and we’ll generate the query for you."
-              aria-labelledby="copilot-textfield-label"
-              onRenderSuffix={() => {
-                return (
-                  <IconButton
-                    iconProps={{ iconName: "Send" }}
-                    disabled={isGeneratingQuery || !userPrompt.trim()}
-                    style={{ background: "none" }}
-                    onClick={() => startGenerateQueryProcess()}
-                    aria-label="Send"
-                  />
-                );
-              }}
-            />
-            {showPromptTeachingBubble && copilotTeachingBubbleVisible && (
-              <TeachingBubble
-                calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
-                target="#naturalLanguageInput"
-                hasCloseButton={true}
-                closeButtonAriaLabel="Close"
-                onDismiss={() => toggleCopilotTeachingBubbleVisible(false)}
-                hasSmallHeadline={true}
-                headline="Write a prompt"
-              >
-                Write a prompt here and Query Advisor will generate the query for you. You can also choose from our{" "}
-                <Link
-                  onClick={() => {
-                    setShowSamplePrompts(true);
-                    toggleCopilotTeachingBubbleVisible(false);
-                  }}
-                  style={{ color: "white", fontWeight: 600 }}
-                >
-                  sample prompts
-                </Link>{" "}
-                or write your own query
-              </TeachingBubble>
-            )}
-            {showSamplePrompts && (
-              <Callout
-                styles={{ root: { minWidth: 400, maxWidth: "70vw" } }}
-                target="#naturalLanguageInput"
-                isBeakVisible={false}
-                onDismiss={() => setShowSamplePrompts(false)}
-                directionalHintFixed={true}
-                directionalHint={DirectionalHint.bottomLeftEdge}
-                alignTargetEdge={true}
-                gapSpace={4}
-              >
-                <Stack>
-                  {filteredHistories?.length > 0 && (
-                    <Stack>
-                      <Text
-                        style={{
-                          width: "100%",
-                          fontSize: 14,
-                          fontWeight: 600,
-                          color: "#0078D4",
-                          marginLeft: 16,
-                          padding: "4px 0",
-                        }}
-                      >
-                        Recent
-                      </Text>
-                      {filteredHistories.map((history, i) => (
-                        <DefaultButton
-                          key={i}
-                          onClick={() => {
-                            setUserPrompt(history);
-                            setShowSamplePrompts(false);
-                            inputEdited.current = true;
-                          }}
-                          onRenderIcon={() => <Image src={RecentIcon} styles={{ root: { overflow: "unset" } }} />}
-                          styles={promptStyles}
-                        >
-                          {history}
-                        </DefaultButton>
-                      ))}
-                    </Stack>
-                  )}
-                  {filteredSuggestedPrompts?.length > 0 && (
-                    <Stack>
-                      <Text
-                        style={{
-                          width: "100%",
-                          fontSize: 14,
-                          fontWeight: 600,
-                          color: "#0078D4",
-                          marginLeft: 16,
-                          padding: "4px 0",
-                        }}
-                      >
-                        Suggested Prompts
-                      </Text>
-                      {filteredSuggestedPrompts.map((prompt) => (
-                        <DefaultButton
-                          key={prompt.id}
-                          onClick={() => {
-                            setUserPrompt(prompt.text);
-                            setShowSamplePrompts(false);
-                            inputEdited.current = true;
-                          }}
-                          onRenderIcon={() => <Image src={HintIcon} />}
-                          styles={promptStyles}
-                        >
-                          {prompt.text}
-                        </DefaultButton>
-                      ))}
-                    </Stack>
-                  )}
-                  {(filteredHistories?.length > 0 || filteredSuggestedPrompts?.length > 0) && (
-                    <Stack>
-                      <Separator
-                        styles={{
-                          root: {
-                            selectors: { "::before": { background: "#E1DFDD" } },
-                            padding: 0,
-                          },
-                        }}
-                      />
-                      <Text
-                        style={{
-                          width: "100%",
-                          fontSize: 14,
-                          marginLeft: 16,
-                          padding: "4px 0",
-                        }}
-                      >
-                        Learn about{" "}
-                        <Link target="_blank" href="https://aka.ms/cdb-copilot-writing">
-                          writing effective prompts
-                        </Link>
-                      </Text>
-                    </Stack>
-                  )}
-                </Stack>
-              </Callout>
-            )}
-          </Stack>
-          {!isGeneratingQuery && (
-            <Stack style={{ padding: 8 }}>
-              {!showFeedbackBar && (
-                <Text style={{ fontSize: 12 }}>
-                  AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
-                  <Link
-                    href="https://aka.ms/cdb-copilot-preview-terms"
-                    target="_blank"
-                    style={{ color: "#0072D4" }}
-                    className="underlinedLink"
-                  >
-                    Read preview terms
-                  </Link>
-                  {showErrorMessageBar && (
-                    <MessageBar messageBarType={MessageBarType.error}>
-                      {errorMessage ? errorMessage : "We ran into an error and were not able to execute query."}
-                    </MessageBar>
-                  )}
-                  {showInvalidQueryMessageBar && (
-                    <MessageBar
-                      messageBarType={MessageBarType.info}
-                      styles={{ root: { backgroundColor: "#F0F6FF" }, icon: { color: "#015CDA" } }}
-                    >
-                      We were unable to generate a query based upon the prompt provided. Please modify the prompt and
-                      try again. For examples of how to write a good prompt, please read
-                      <Link href="https://aka.ms/cdb-copilot-writing" target="_blank">
-                        this article.
-                      </Link>{" "}
-                      Our content guidelines can be found
-                      <Link href="https://aka.ms/cdb-query-copilot" target="_blank">
-                        here.
-                      </Link>
-                    </MessageBar>
-                  )}
-                </Text>
-              )}
-              {showFeedbackBar && (
-                <Stack horizontal verticalAlign="center" style={{ maxHeight: 20 }}>
-                  {userContext.feedbackPolicies?.policyAllowFeedback && (
-                    <Stack horizontal verticalAlign="center">
-                      <Text style={{ fontSize: 12 }}>Provide feedback</Text>
-                      {showCallout && !hideFeedbackModalForLikedQueries && (
-                        <Callout
-                          role="status"
-                          style={{ padding: "6px 12px" }}
-                          styles={{
-                            root: {
-                              borderRadius: 8,
-                            },
-                            beakCurtain: {
-                              borderRadius: 8,
-                            },
-                            calloutMain: {
-                              borderRadius: 8,
-                            },
-                          }}
-                          target="#likeBtn"
-                          onDismiss={() => {
-                            setShowCallout(false);
-                            SubmitFeedback({
-                              params: {
-                                generatedQuery: generatedQuery,
-                                likeQuery: likeQuery,
-                                description: "",
-                                userPrompt: userPrompt,
-                              },
-                              explorer,
-                              databaseId,
-                              containerId,
-                              mode: isSampleCopilotActive ? "Sample" : "User",
-                            });
-                          }}
-                          directionalHint={DirectionalHint.topCenter}
-                        >
-                          <Text>
-                            Thank you. Need to give{" "}
-                            <Link
-                              onClick={() => {
-                                setShowCallout(false);
-                                openFeedbackModal(generatedQuery, true, userPrompt);
-                              }}
-                            >
-                              more feedback?
-                            </Link>
-                          </Text>
-                        </Callout>
-                      )}
-                      <IconButton
-                        id="likeBtn"
-                        style={{ marginLeft: 10 }}
-                        aria-label="Like"
-                        role="toggle"
-                        iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
-                        onClick={() => {
-                          setShowCallout(!likeQuery);
-                          setLikeQuery(!likeQuery);
-                          if (likeQuery === true) {
-                            document.getElementById("likeStatus").innerHTML = "Unpressed";
-                          }
-                          if (likeQuery === false) {
-                            document.getElementById("likeStatus").innerHTML = "Liked";
-                          }
-                          if (dislikeQuery) {
-                            setDislikeQuery(!dislikeQuery);
-                          }
-                        }}
-                      />
-                      <IconButton
-                        style={{ margin: "0 4px" }}
-                        role="toggle"
-                        aria-label="Dislike"
-                        iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
-                        onClick={() => {
-                          let toggleStatusValue = "Unpressed";
-                          if (!dislikeQuery) {
-                            openFeedbackModal(generatedQuery, false, userPrompt);
-                            setLikeQuery(false);
-                            toggleStatusValue = "Disliked";
-                          }
-                          setDislikeQuery(!dislikeQuery);
-                          setShowCallout(false);
-                          document.getElementById("likeStatus").innerHTML = toggleStatusValue;
-                        }}
-                      />
-                      <span role="status" style={{ position: "absolute", left: "-9999px" }} id="likeStatus"></span>
-                      <Separator
-                        vertical
-                        styles={{
-                          root: {
-                            "::after": {
-                              backgroundColor: "#767676",
-                            },
-                          },
-                        }}
-                      />
-                    </Stack>
-                  )}
-                  <CommandBarButton
-                    className="copyQuery"
-                    onClick={copyGeneratedCode}
-                    iconProps={{ iconName: "Copy" }}
-                    style={{ fontSize: 12, transition: "background-color 0.3s ease", height: "100%" }}
-                    styles={{
-                      root: {
-                        backgroundColor: "inherit",
-                      },
-                    }}
-                  >
-                    Copy code
-                  </CommandBarButton>
-                  <CommandBarButton
-                    className="deleteQuery"
-                    onClick={() => {
-                      setShowDeletePopup(true);
-                    }}
-                    iconProps={{ iconName: "Delete" }}
-                    style={{ fontSize: 12, transition: "background-color 0.3s ease", height: "100%" }}
-                    styles={{
-                      root: {
-                        backgroundColor: "inherit",
-                      },
-                    }}
-                  >
-                    Clear editor
-                  </CommandBarButton>
-                </Stack>
-              )}
-            </Stack>
-          )}
-          {isGeneratingQuery && (
-            <ProgressIndicator
-              label="Thinking..."
-              ariaLabel={getAriaLabel()}
-              barHeight={4}
-              styles={{
-                root: {
-                  fontSize: 12,
-                  width: "100%",
-                  bottom: 0,
-                },
-                itemName: {
-                  padding: "0px 8px",
-                },
-                itemProgress: {
-                  borderBottomLeftRadius: 8,
-                  borderBottomRightRadius: 8,
-                  padding: 0,
-                },
-                progressBar: {
-                  backgroundImage:
-                    "linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(24, 90, 189) 35%, rgb(71, 207, 250) 70%, rgb(180, 124, 248) 92%, rgba(0, 0, 0, 0))",
-                  animationDuration: "5s",
-                },
-              }}
-            />
-          )}
-        </Stack>
+      <Stack horizontal>
+        <Image src={CopilotIcon} style={{ width: 24, height: 24 }} alt="Copilot" role="none" />
+        <Text style={{ marginLeft: 8, fontWeight: 600, fontSize: 16 }}>Copilot</Text>
         <IconButton
           iconProps={{ imageProps: { src: errorIcon } }}
           onClick={() => {
@@ -703,10 +323,307 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
             clearFeedback();
             resetMessageStates();
           }}
+          styles={{
+            root: {
+              marginLeft: "auto !important",
+            },
+          }}
           ariaLabel="Close"
           title="Close copilot"
         />
       </Stack>
+      <Stack horizontal verticalAlign="center">
+        <TextField
+          id="naturalLanguageInput"
+          value={userPrompt}
+          onChange={handleUserPromptChange}
+          onClick={() => {
+            inputEdited.current = true;
+            setShowSamplePrompts(true);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && userPrompt) {
+              inputEdited.current = true;
+              startGenerateQueryProcess();
+            }
+          }}
+          style={{ lineHeight: 30 }}
+          styles={{ root: { width: "95%" }, fieldGroup: { borderRadius: 6 } }}
+          disabled={isGeneratingQuery}
+          autoComplete="off"
+          placeholder="Ask a question in natural language and we’ll generate the query for you."
+          aria-labelledby="copilot-textfield-label"
+        />
+        {showPromptTeachingBubble && copilotTeachingBubbleVisible && (
+          <TeachingBubble
+            calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
+            target="#naturalLanguageInput"
+            hasCloseButton={true}
+            closeButtonAriaLabel="Close"
+            onDismiss={() => toggleCopilotTeachingBubbleVisible(false)}
+            hasSmallHeadline={true}
+            headline="Write a prompt"
+          >
+            Write a prompt here and Copilot will generate the query for you. You can also choose from our{" "}
+            <Link
+              onClick={() => {
+                setShowSamplePrompts(true);
+                toggleCopilotTeachingBubbleVisible(false);
+              }}
+              style={{ color: "white", fontWeight: 600 }}
+            >
+              sample prompts
+            </Link>{" "}
+            or write your own query
+          </TeachingBubble>
+        )}
+        <IconButton
+          iconProps={{ iconName: "Send" }}
+          disabled={isGeneratingQuery || !userPrompt.trim()}
+          style={{ marginLeft: 8 }}
+          onClick={() => startGenerateQueryProcess()}
+          aria-label="Send"
+        />
+        <div role="alert" aria-label={getAriaLabel()}>
+          {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
+        </div>
+        {showSamplePrompts && (
+          <Callout
+            styles={{ root: { minWidth: 400, maxWidth: "70vw" } }}
+            target="#naturalLanguageInput"
+            isBeakVisible={false}
+            onDismiss={() => setShowSamplePrompts(false)}
+            directionalHintFixed={true}
+            directionalHint={DirectionalHint.bottomLeftEdge}
+            alignTargetEdge={true}
+            gapSpace={4}
+          >
+            <Stack>
+              {filteredHistories?.length > 0 && (
+                <Stack>
+                  <Text
+                    style={{
+                      width: "100%",
+                      fontSize: 14,
+                      fontWeight: 600,
+                      color: "#0078D4",
+                      marginLeft: 16,
+                      padding: "4px 0",
+                    }}
+                  >
+                    Recent
+                  </Text>
+                  {filteredHistories.map((history, i) => (
+                    <DefaultButton
+                      key={i}
+                      onClick={() => {
+                        setUserPrompt(history);
+                        setShowSamplePrompts(false);
+                        inputEdited.current = true;
+                      }}
+                      onRenderIcon={() => <Image src={RecentIcon} styles={{ root: { overflow: "unset" } }} />}
+                      styles={promptStyles}
+                    >
+                      {history}
+                    </DefaultButton>
+                  ))}
+                </Stack>
+              )}
+              {filteredSuggestedPrompts?.length > 0 && (
+                <Stack>
+                  <Text
+                    style={{
+                      width: "100%",
+                      fontSize: 14,
+                      fontWeight: 600,
+                      color: "#0078D4",
+                      marginLeft: 16,
+                      padding: "4px 0",
+                    }}
+                  >
+                    Suggested Prompts
+                  </Text>
+                  {filteredSuggestedPrompts.map((prompt) => (
+                    <DefaultButton
+                      key={prompt.id}
+                      onClick={() => {
+                        setUserPrompt(prompt.text);
+                        setShowSamplePrompts(false);
+                        inputEdited.current = true;
+                      }}
+                      onRenderIcon={() => <Image src={HintIcon} />}
+                      styles={promptStyles}
+                    >
+                      {prompt.text}
+                    </DefaultButton>
+                  ))}
+                </Stack>
+              )}
+              {(filteredHistories?.length > 0 || filteredSuggestedPrompts?.length > 0) && (
+                <Stack>
+                  <Separator
+                    styles={{
+                      root: {
+                        selectors: { "::before": { background: "#E1DFDD" } },
+                        padding: 0,
+                      },
+                    }}
+                  />
+                  <Text
+                    style={{
+                      width: "100%",
+                      fontSize: 14,
+                      marginLeft: 16,
+                      padding: "4px 0",
+                    }}
+                  >
+                    Learn about{" "}
+                    <Link target="_blank" href="https://aka.ms/cdb-copilot-writing">
+                      writing effective prompts
+                    </Link>
+                  </Text>
+                </Stack>
+              )}
+            </Stack>
+          </Callout>
+        )}
+      </Stack>
+
+      <Stack style={{ margin: "8px 0" }}>
+        <Text style={{ fontSize: 12 }}>
+          AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
+          <Link href="https://aka.ms/cdb-copilot-preview-terms" target="_blank" style={{ color: "#0072D4" }}>
+            Read preview terms
+          </Link>
+          {showErrorMessageBar && (
+            <MessageBar messageBarType={MessageBarType.error}>
+              {errorMessage ? errorMessage : "We ran into an error and were not able to execute query."}
+            </MessageBar>
+          )}
+          {showInvalidQueryMessageBar && (
+            <MessageBar
+              messageBarType={MessageBarType.info}
+              styles={{ root: { backgroundColor: "#F0F6FF" }, icon: { color: "#015CDA" } }}
+            >
+              We were unable to generate a query based upon the prompt provided. Please modify the prompt and try again.
+              For examples of how to write a good prompt, please read
+              <Link href="https://aka.ms/cdb-copilot-writing" target="_blank">
+                this article.
+              </Link>{" "}
+              Our content guidelines can be found
+              <Link href="https://aka.ms/cdb-query-copilot" target="_blank">
+                here.
+              </Link>
+            </MessageBar>
+          )}
+        </Text>
+      </Stack>
+
+      {showFeedbackBar && (
+        <Stack
+          style={{ backgroundColor: "#FFF8F0", padding: "2px 8px", minHeight: 32 }}
+          horizontal
+          verticalAlign="center"
+        >
+          {userContext.feedbackPolicies?.policyAllowFeedback && (
+            <Stack horizontal verticalAlign="center">
+              <Text style={{ fontWeight: 600, fontSize: 12 }}>Provide feedback on the query generated</Text>
+              {showCallout && !hideFeedbackModalForLikedQueries && (
+                <Callout
+                  role="status"
+                  style={{ padding: 8 }}
+                  target="#likeBtn"
+                  onDismiss={() => {
+                    setShowCallout(false);
+                    SubmitFeedback({
+                      params: {
+                        generatedQuery: generatedQuery,
+                        likeQuery: likeQuery,
+                        description: "",
+                        userPrompt: userPrompt,
+                      },
+                      explorer,
+                      databaseId,
+                      containerId,
+                      mode: isSampleCopilotActive ? "Sample" : "User",
+                    });
+                  }}
+                  directionalHint={DirectionalHint.topCenter}
+                >
+                  <Text>
+                    Thank you. Need to give{" "}
+                    <Link
+                      onClick={() => {
+                        setShowCallout(false);
+                        openFeedbackModal(generatedQuery, true, userPrompt);
+                      }}
+                    >
+                      more feedback?
+                    </Link>
+                  </Text>
+                </Callout>
+              )}
+              <IconButton
+                id="likeBtn"
+                style={{ marginLeft: 20 }}
+                aria-label="Like"
+                role="toggle"
+                iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
+                onClick={() => {
+                  setShowCallout(!likeQuery);
+                  setLikeQuery(!likeQuery);
+                  if (likeQuery === true) {
+                    document.getElementById("likeStatus").innerHTML = "Unpressed";
+                  }
+                  if (likeQuery === false) {
+                    document.getElementById("likeStatus").innerHTML = "Liked";
+                  }
+                  if (dislikeQuery) {
+                    setDislikeQuery(!dislikeQuery);
+                  }
+                }}
+              />
+              <IconButton
+                style={{ margin: "0 10px" }}
+                role="toggle"
+                aria-label="Dislike"
+                iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
+                onClick={() => {
+                  let toggleStatusValue = "Unpressed";
+                  if (!dislikeQuery) {
+                    openFeedbackModal(generatedQuery, false, userPrompt);
+                    setLikeQuery(false);
+                    toggleStatusValue = "Disliked";
+                  }
+                  setDislikeQuery(!dislikeQuery);
+                  setShowCallout(false);
+                  document.getElementById("likeStatus").innerHTML = toggleStatusValue;
+                }}
+              />
+              <span role="status" style={{ position: "absolute", left: "-9999px" }} id="likeStatus"></span>
+              <Separator vertical style={{ color: "#EDEBE9" }} />
+            </Stack>
+          )}
+          <CommandBarButton
+            className="copyQuery"
+            onClick={copyGeneratedCode}
+            iconProps={{ iconName: "Copy" }}
+            style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
+          >
+            Copy query
+          </CommandBarButton>
+          <CommandBarButton
+            className="deleteQuery"
+            onClick={() => {
+              setShowDeletePopup(true);
+            }}
+            iconProps={{ iconName: "Delete" }}
+            style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
+          >
+            Delete query
+          </CommandBarButton>
+        </Stack>
+      )}
       {isSamplePromptsOpen && <SamplePrompts sampleProps={sampleProps} />}
       {query !== "" && query.trim().length !== 0 && (
         <DeletePopup