fix tab wrapping with a lil' css tweak (#2013)

* Replaced monaco editor on Container Vector Policy tab with controls same as on create container ux

* Adds vector embedding policy to container management. Adds FullTextSearch to both add container and container management.

* Fixing unit tests and formatting issues

* More fixes

* Updating full text controls based on feedback

* Minor updates

* Editing test to fix compile issue

* Minor fix

* Adding paths for jest to ignore transform due to recent changes in upstream dependencies

* Adding mock to temporarily get unit tests to pass

* Hiding FTS feature behind the new EnableNoSQLFullTextSearch capability

.devcontainer/Dockerfile

@@ -0,0 +1,16 @@
+FROM mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm
+
+# Install pre-reqs for gyp, and 'canvas' npm module
+RUN apt-get update && \
+    apt-get install -y \
+        make \
+        gcc \
+        g++ \
+        python3-minimal \
+        libcairo2-dev \
+        libpango1.0-dev \
+        && \
+    rm -rf /var/lib/apt/lists/*
+
+# Install node-gyp to build native modules
+RUN npm install -g node-gyp

.devcontainer/devcontainer.json

@@ -0,0 +1,32 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
+{
+	"name": "Azure Cosmos DB Explorer",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"build": {
+		"dockerfile": "Dockerfile"
+	},
+	"onCreateCommand": ".devcontainer/oncreate",
+	"features": {
+		"ghcr.io/devcontainers/features/azure-cli:1": {
+			"version": "latest"
+		},
+		"ghcr.io/devcontainers/features/github-cli:1": {
+			"installDirectlyFromGitHubRelease": true,
+			"version": "latest"
+		},
+		"ghcr.io/devcontainers/features/sshd:1": {
+			"version": "latest"
+		}
+	}
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+	// Configure tool-specific properties.
+	// "customizations": {},
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.devcontainer/oncreate

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+# Install packages once, to prime the node_modules directory.
+npm ci

.npmrc

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

README.md

@@ -18,7 +18,7 @@ Run `npm start` to start the development server and automatically rebuild on cha
 ### Hosted Development (https://cosmos.azure.com)
 
 - Visit: `https://localhost:1234/hostedExplorer.html`
-- The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.
+- The default webpack dev server configuration will proxy requests to the production portal backend: `https://cdb-ms-mpac-pbe.cosmos.azure.com`. This will allow you to use production connection strings on your local machine.
 
 ### Emulator Development
 

canvas/README.md

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

canvas/index.js

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

canvas/package.json

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

docs/index.html

@@ -82,7 +82,7 @@
 				</a>
 				<ul>
 					<li>Visit: <code>https://localhost:1234/hostedExplorer.html</code></li>
-					<li>The default webpack dev server configuration will proxy requests to the production portal backend: <code>https://main.documentdb.ext.azure.com</code>. This will allow you to use production connection strings on your local machine.</li>
+					<li>The default webpack dev server configuration will proxy requests to the production portal backend: <code>https://cdb-ms-mpac-pbe.cosmos.azure.com</code>. This will allow you to use production connection strings on your local machine.</li>
 				</ul>
 				<a href="#emulator-development" id="emulator-development" style="color: inherit; text-decoration: none;">
 					<h3>Emulator Development</h3>

jest.config.js

@@ -80,6 +80,7 @@ module.exports = {
     "d3-quadtree": "<rootDir>/node_modules/d3-quadtree/dist/d3-quadtree.min.js",
     "d3-scale-chromatic": "<rootDir>/node_modules/d3-scale-chromatic/dist/d3-scale-chromatic.min.js",
     "d3-zoom": "<rootDir>/node_modules/d3-zoom/dist/d3-zoom.min.js",
+    uuid: require.resolve("uuid"), // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
@@ -133,7 +134,7 @@ module.exports = {
   snapshotSerializers: ["enzyme-to-json/serializer"],
 
   // The test environment that will be used for testing
-  // testEnvironment: "jest-environment-jsdom",
+  testEnvironment: "jsdom",
   modulePaths: ["node_modules", "<rootDir>/src"],
 
   // Options that will be passed to the testEnvironment
@@ -157,7 +158,7 @@ module.exports = {
   // testResultsProcessor: "./trxProcessor.js",
 
   // This option allows use of a custom test runner
-  // testRunner: "jasmine2",
+  testRunner: "jest-circus/runner",
 
   // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
   // testURL: "http://localhost",
@@ -167,13 +168,17 @@ module.exports = {
 
   // A map from regular expressions to paths to transformers
   transform: {
-    "^.+\\.html?$": "html-loader-jest",
+    "^.+\\.html?$": "jest-html-loader",
     "^.+\\.[t|j]sx?$": "babel-jest",
-    "^.+\\.svg$": "<rootDir>/svgTransform.js",
+    "^.+\\.svg$": "<rootDir>/jest/svgTransform.js",
   },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  transformIgnorePatterns: ["/node_modules/", "/externals/"],
+  transformIgnorePatterns: [
+    "/node_modules/(?!@fluentui/react-icons|(.*)/dist/browser)/",
+    "/node_modules/plotly.js-cartesian-dist-min",
+    "/externals/",
+  ],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,
@@ -186,4 +191,7 @@ module.exports = {
 
   // Whether to use watchman for file crawling
   // watchman: true,
+
+  // TODO: toMatchInlineSnapshot() does not work with prettier 3. Remove when fixed: https://github.com/jestjs/jest/issues/14305
+  prettierPath: null,
 };

less/Common/Constants.less

@@ -168,7 +168,7 @@
 
 @FabricBoxBorderRadius: 8px;
 @FabricBoxBorderShadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
-@FabricBoxMargin: 4px 3px 4px 3px;
+@FabricBoxMargin: 4px 8px 4px 8px;
 
 @FabricAccentMediumHigh: #0c695a;
 @FabricAccentMedium: #117865;

less/documentDB.less

@@ -1906,8 +1906,21 @@ input::-webkit-calendar-picker-indicator::after {
 }
 
 .nav-tabs-margin {
-  padding-top: 8px;
   background-color: #f2f2f2;
+
+  .nav-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    height: 100%;
+    margin-bottom: -0.5px;
+
+    li {
+      // Override the bootstrap defaults here to align with our layout constants.
+      margin-bottom: 0px;
+      height: 32px;
+    }
+  }
 }
 
 .navTabHeight {
@@ -2074,14 +2087,6 @@ a:link {
   display: inline;
 }
 
-.resourceTreeAndTabs {
-  display: flex;
-  flex: 1 1 auto;
-  overflow-x: clip;
-  overflow-y: auto;
-  height: 100%;
-}
-
 .collectiontitle {
   font-size: 14px;
   text-transform: uppercase;
@@ -2325,11 +2330,6 @@ td a:hover {
   outline: 1px dotted;
 }
 
-#content.active .tabdocuments .scrollable {
-  height: 100%;
-  overflow-y: auto;
-}
-
 .table-fixed thead {
   width: 97%;
   padding-left: 18px;
@@ -2365,10 +2365,9 @@ a:link {
 
 .tabsManagerContainer {
   height: 100%;
-  flex-grow: 1;
   display: flex;
   flex-direction: column;
-  min-height: 300px;
+  min-width: 0; // This prevents it to grow past the parent's width if its content is too wide
 }
 
 .tabs {
@@ -2579,18 +2578,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;
@@ -2637,7 +2624,7 @@ a:link {
 
 .tabPanesContainer {
   display: flex;
-  height: 100%;
+  flex-grow: 1;
   overflow: hidden;
 }
 
@@ -3137,3 +3124,7 @@ a:link {
   background: white;
   height: 100%;
 }
+
+.sidebarContainer {
+  height: 100%;
+}

less/documentDBFabric.less

@@ -20,6 +20,10 @@ a:focus {
   text-decoration: underline;
 }
 
+.splashLoaderContainer {
+  background-color: #f5f5f5;
+}
+
 #divExplorer {
   background-color: #f5f5f5;
 }
@@ -27,26 +31,24 @@ a:focus {
 .resourceTreeAndTabs {
   border-radius: 0px;
   box-shadow: @FabricBoxBorderShadow;
-  margin: @FabricBoxMargin;
   margin-top: 0px;
   margin-bottom: 0px;
   background-color: #ffffff;
 }
 
 .tabsManagerContainer {
-  background-color: #ffffff
+  background-color: #ffffff;
 }
 
 .nav-tabs-margin {
-  padding-top: 8px;
-  background-color: #ffffff
+  padding-top: 5px;
+  background-color: #ffffff;
 }
 
 .commandBarContainer {
   background-color: #ffffff;
   border-radius: @FabricBoxBorderRadius @FabricBoxBorderRadius 0px 0px;
   box-shadow: @FabricBoxBorderShadow;
-  margin: @FabricBoxMargin;
   margin-top: 0px;
   margin-bottom: 0px;
   padding-top: 2px;
@@ -65,17 +67,16 @@ a:focus {
   }
 }
 
-
-.nav-tabs>li>.tabNavContentContainer>.tab_Content:hover {
+.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
   border-bottom: 2px solid #e0e0e0;
 }
 
-.nav-tabs>li.active>.tabNavContentContainer>.tab_Content,
-.nav-tabs>li.active>.tabNavContentContainer>.tab_Content:hover {
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
   border-bottom: 2px solid @FabricAccentMedium;
 }
 
-.nav-tabs>li.active>.tabNavContentContainer>.tab_Content>.contentWrapper>.tabNavText {
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
   border-bottom: 0px none transparent;
 }
 
@@ -94,10 +95,10 @@ a:focus {
     padding-bottom: @SmallSpace;
 
     .contentWrapper {
-        .statusIconContainer {
-          margin-left: 0px;
-        }
+      .statusIconContainer {
+        margin-left: 0px;
       }
+    }
 
     .tabIconSection {
       .cancelButton {
@@ -119,7 +120,6 @@ a:focus {
   }
 }
 
-
 .resourceTree {
   padding: 12px;
 }
@@ -156,25 +156,21 @@ a:focus {
     }
 
     .selected {
-      &>.treeNodeHeader {
+      & > .treeNodeHeader {
         background-color: @FabricAccentExtra;
       }
     }
   }
 }
 
-
 .dataExplorerErrorConsoleContainer {
-  border-radius:  0px 0px @FabricBoxBorderRadius @FabricBoxBorderRadius;
+  border-radius: 0px 0px @FabricBoxBorderRadius @FabricBoxBorderRadius;
   box-shadow: @FabricBoxBorderShadow;
-  margin: @FabricBoxMargin;
   margin-top: 0px;
   width: auto;
   align-self: auto;
 }
 
-
-
 .filterbtnstyle {
   background: #fff;
   color: #000;
@@ -200,12 +196,10 @@ a:focus {
   border: solid 1px #d1d1d1;
 }
 
-
 .gridRowSelected .tabdocumentsGridElement:hover {
   background-color: @FabricAccentLight !important;
 }
 
-
 .refreshcol {
   filter: brightness(0) saturate(100%);
 }
@@ -216,4 +210,4 @@ a:focus {
 
 .fileImportImg img {
   filter: brightness(0) saturate(100%);
-}
+}

less/resourceTree.less

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

package.json

@@ -5,21 +5,21 @@
   "main": "index.js",
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "4.0.1-beta.3",
+    "@azure/cosmos": "4.2.0-beta.1",
     "@azure/cosmos-language-service": "0.0.5",
     "@azure/identity": "1.5.2",
     "@azure/ms-rest-nodeauth": "3.1.1",
     "@azure/msal-browser": "2.14.2",
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
-    "@fluentui/react": "8.112.1",
-    "@fluentui/react-components": "9.34.0",
+    "@fluentui/react": "8.119.0",
+    "@fluentui/react-components": "9.54.2",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
     "@nteract/commutable": "7.5.1",
     "@nteract/connected-components": "6.8.2",
-    "@nteract/core": "15.1.0",
+    "@nteract/core": "15.1.9",
     "@nteract/data-explorer": "8.0.3",
     "@nteract/directory-listing": "2.0.6",
     "@nteract/dropdown-menu": "1.0.1",
@@ -42,15 +42,15 @@
     "@nteract/transform-vega": "7.0.6",
     "@octokit/rest": "17.9.2",
     "@phosphor/widgets": "1.9.3",
-    "@testing-library/jest-dom": "5.11.9",
+    "@testing-library/jest-dom": "6.4.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",
+    "allotment": "1.20.2",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
-    "canvas": "file:./canvas",
+    "canvas": "2.11.2",
     "clean-webpack-plugin": "4.0.0",
     "clipboard-copy": "4.0.1",
     "copy-webpack-plugin": "11.0.0",
@@ -67,7 +67,7 @@
     "eslint-plugin-react": "7.33.2",
     "hasher": "1.2.0",
     "html2canvas": "1.0.0-rc.5",
-    "i18next": "19.8.4",
+    "i18next": "23.11.5",
     "i18next-browser-languagedetector": "6.0.1",
     "i18next-http-backend": "1.0.23",
     "iframe-resizer-react": "1.1.0",
@@ -93,13 +93,13 @@
     "react-dnd-html5-backend": "14.0.0",
     "react-dom": "16.14.0",
     "react-hotkeys": "2.0.0",
-    "react-i18next": "11.8.5",
+    "react-i18next": "14.1.2",
     "react-notification-system": "0.2.17",
     "react-redux": "7.1.3",
     "react-splitter-layout": "4.0.0",
     "react-string-format": "1.0.1",
-    "react-youtube": "9.0.1",
     "react-window": "1.8.10",
+    "react-youtube": "9.0.1",
     "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
     "sanitize-html": "2.3.3",
@@ -113,10 +113,10 @@
     "zustand": "3.5.0"
   },
   "devDependencies": {
-    "@babel/core": "7.9.0",
-    "@babel/preset-env": "7.9.0",
-    "@babel/preset-react": "7.9.4",
-    "@babel/preset-typescript": "7.9.0",
+    "@babel/core": "7.24.7",
+    "@babel/preset-env": "7.24.7",
+    "@babel/preset-react": "7.24.7",
+    "@babel/preset-typescript": "7.24.7",
     "@playwright/test": "1.44.0",
     "@testing-library/react": "11.2.3",
     "@types/applicationinsights-js": "1.0.7",
@@ -129,13 +129,13 @@
     "@types/enzyme": "3.10.12",
     "@types/enzyme-adapter-react-16": "1.0.9",
     "@types/hasher": "0.0.31",
-    "@types/jest": "26.0.20",
+    "@types/jest": "29.5.12",
     "@types/jquery": "3.5.29",
     "@types/node": "12.11.1",
     "@types/post-robot": "10.0.1",
     "@types/q": "1.5.1",
-    "@types/react": "17.0.3",
-    "@types/react-dom": "17.0.3",
+    "@types/react": "17.0.44",
+    "@types/react-dom": "17.0.15",
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.7",
     "@types/react-splitter-layout": "3.0.1",
@@ -148,7 +148,7 @@
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
     "@webpack-cli/serve": "2.0.5",
-    "babel-jest": "24.9.0",
+    "babel-jest": "29.7.0",
     "babel-loader": "8.1.0",
     "buffer": "5.1.0",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
@@ -165,13 +165,15 @@
     "fast-glob": "3.2.5",
     "fs-extra": "7.0.0",
     "html-inline-css-webpack-plugin": "1.11.2",
-    "html-loader": "0.5.5",
-    "html-loader-jest": "0.2.1",
+    "html-loader": "5.0.0",
     "html-webpack-plugin": "5.5.3",
-    "jest": "26.6.3",
-    "jest-canvas-mock": "2.3.1",
+    "jest": "29.7.0",
+    "jest-canvas-mock": "2.5.2",
+    "jest-circus": "29.7.0",
+    "jest-html-loader": "1.0.0",
     "jest-react-hooks-shallow": "1.5.1",
-    "jest-trx-results-processor": "0.0.7",
+    "jest-trx-results-processor": "3.0.2",
+    "jest-environment-jsdom": "29.7.0",
     "less": "3.8.1",
     "less-loader": "11.1.3",
     "less-vars-loader": "1.1.0",
@@ -187,8 +189,8 @@
     "sinon": "3.2.1",
     "style-loader": "0.23.0",
     "ts-loader": "9.2.4",
-    "typedoc": "0.22.15",
-    "typescript": "4.3.5",
+    "typedoc": "0.26.2",
+    "typescript": "4.9.5",
     "url-loader": "4.1.1",
     "wait-on": "4.0.2",
     "webpack": "5.88.2",

patches/@phosphor+virtualdom+1.2.0.patch

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

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,51 +1,58 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: 'test',
+  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',
+  reporter: process.env.CI ? "blob" : "html",
   timeout: 10 * 60 * 1000,
   use: {
-    actionTimeout: 5 * 60 * 1000,
-    trace: 'off',
-    video: 'off',
-    screenshot: 'on',
-    testIdAttribute: 'data-test',
+    trace: "off",
+    video: "off",
+    screenshot: "on",
+    testIdAttribute: "data-test",
     contextOptions: {
       ignoreHTTPSErrors: true,
     },
   },
 
   expect: {
-    timeout: 5 * 60 * 1000,
+    // Many of our expectations take a little longer than the default 5 seconds.
+    timeout: 15 * 1000,
   },
 
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
     },
-
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
     },
-
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+    /* Test against branded browsers. */
+    {
+      name: "Google Chrome",
+      use: { ...devices["Desktop Chrome"], channel: "chrome" }, // or 'chrome-beta'
+    },
+    {
+      name: "Microsoft Edge",
+      use: { ...devices["Desktop Edge"], channel: "msedge" }, // or 'msedge-dev'
     },
   ],
 
   webServer: {
-    command: 'npm run start',
-    url: 'https://127.0.0.1:1234/_ready',
+    command: "npm run start",
+    url: "https://127.0.0.1:1234/_ready",
     timeout: 120 * 1000,
     ignoreHTTPSErrors: true,
     reuseExistingServer: !process.env.CI,

preview/index.js

@@ -4,7 +4,7 @@ const port = process.env.PORT || 3000;
 const fetch = require("node-fetch");
 
 const api = createProxyMiddleware("/api", {
-  target: "https://main.documentdb.ext.azure.com",
+  target: "https://cdb-ms-mpac-pbe.cosmos.azure.com",
   changeOrigin: true,
   logLevel: "debug",
   bypass: (req, res) => {
@@ -16,7 +16,7 @@ const api = createProxyMiddleware("/api", {
 });
 
 const proxy = createProxyMiddleware("/proxy", {
-  target: "https://main.documentdb.ext.azure.com",
+  target: "https://cdb-ms-mpac-pbe.cosmos.azure.com",
   changeOrigin: true,
   secure: false,
   logLevel: "debug",

src/Common/CollapsedResourceTree.tsx

@@ -1,55 +0,0 @@
-import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
-import arrowLeftImg from "../../images/imgarrowlefticon.svg";
-import { getApiShortDisplayName } from "../Utils/APITypeUtils";
-import { NormalizedEventKey } from "./Constants";
-
-export interface CollapsedResourceTreeProps {
-  toggleLeftPaneExpanded: () => void;
-  isLeftPaneExpanded: boolean;
-}
-
-export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps> = ({
-  toggleLeftPaneExpanded,
-  isLeftPaneExpanded,
-}: CollapsedResourceTreeProps): JSX.Element => {
-  const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
-
-  useEffect(() => {
-    if (focusButton.current) {
-      focusButton.current.focus();
-    }
-  });
-
-  const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
-    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
-      toggleLeftPaneExpanded();
-      event.stopPropagation();
-    }
-  };
-
-  return (
-    <div id="mini" className={!isLeftPaneExpanded ? "mini toggle-mini" : "hiddenMain"}>
-      <div className="main-nav nav">
-        <ul className="nav">
-          <li
-            className="resourceTreeCollapse"
-            id="collapseToggleLeftPaneButton"
-            role="button"
-            tabIndex={0}
-            aria-label={getApiShortDisplayName() + `Expand tree`}
-            onClick={toggleLeftPaneExpanded}
-            onKeyPress={onKeyPressToggleLeftPaneExpanded}
-            ref={focusButton}
-          >
-            <span className="leftarrowCollapsed">
-              <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
-            </span>
-            <span className="collectionCollapsed">
-              <span>{getApiShortDisplayName()}</span>
-            </span>
-          </li>
-        </ul>
-      </div>
-    </div>
-  );
-};

src/Common/Constants.ts

@@ -89,6 +89,7 @@ export class CapabilityNames {
   public static readonly EnableMongo: string = "EnableMongo";
   public static readonly EnableServerless: string = "EnableServerless";
   public static readonly EnableNoSQLVectorSearch: string = "EnableNoSQLVectorSearch";
+  public static readonly EnableNoSQLFullTextSearch: string = "EnableNoSQLFullTextSearch";
 }
 
 export enum CapacityMode {
@@ -134,6 +135,9 @@ export class BackendApi {
   public static readonly GenerateToken: string = "GenerateToken";
   public static readonly PortalSettings: string = "PortalSettings";
   public static readonly AccountRestrictions: string = "AccountRestrictions";
+  public static readonly RuntimeProxy: string = "RuntimeProxy";
+  public static readonly DisallowedLocations: string = "DisallowedLocations";
+  public static readonly SampleData: string = "SampleData";
 }
 
 export class PortalBackendEndpoints {
@@ -152,6 +156,18 @@ export class MongoProxyEndpoints {
   public static readonly Mooncake: string = "https://cdb-mc-prod-mp.cosmos.azure.cn";
 }
 
+export class MongoProxyApi {
+  public static readonly ResourceList: string = "ResourceList";
+  public static readonly QueryDocuments: string = "QueryDocuments";
+  public static readonly CreateDocument: string = "CreateDocument";
+  public static readonly ReadDocument: string = "ReadDocument";
+  public static readonly UpdateDocument: string = "UpdateDocument";
+  public static readonly DeleteDocument: string = "DeleteDocument";
+  public static readonly CreateCollectionWithProxy: string = "CreateCollectionWithProxy";
+  public static readonly LegacyMongoShell: string = "LegacyMongoShell";
+  public static readonly BulkDelete: string = "BulkDelete";
+}
+
 export class CassandraProxyEndpoints {
   public static readonly Development: string = "https://localhost:7240";
   public static readonly Mpac: string = "https://cdb-ms-mpac-cp.cosmos.azure.com";
@@ -183,6 +199,12 @@ export class CassandraProxyAPIs {
   public static readonly connectionStringSchemaApi: string = "api/connectionstring/cassandra/schema";
 }
 
+export class AadEndpoints {
+  public static readonly Prod: string = "https://login.microsoftonline.com/";
+  public static readonly Fairfax: string = "https://login.microsoftonline.us/";
+  public static readonly Mooncake: string = "https://login.partner.microsoftonline.cn/";
+}
+
 export class Queries {
   public static CustomPageOption: string = "custom";
   public static UnlimitedPageOption: string = "unlimited";
@@ -284,6 +306,7 @@ export class HttpStatusCodes {
   public static readonly Accepted: number = 202;
   public static readonly NoContent: number = 204;
   public static readonly NotModified: number = 304;
+  public static readonly BadRequest: number = 400;
   public static readonly Unauthorized: number = 401;
   public static readonly Forbidden: number = 403;
   public static readonly NotFound: number = 404;
@@ -495,7 +518,7 @@ export class PriorityLevel {
   public static readonly Default = "low";
 }
 
-export const QueryCopilotSampleDatabaseId = "CopilotSampleDb";
+export const QueryCopilotSampleDatabaseId = "CopilotSampleDB";
 export const QueryCopilotSampleContainerId = "SampleContainer";
 
 export const QueryCopilotSampleContainerSchema = {

src/Common/CosmosClient.test.ts

@@ -1,34 +1,7 @@
-import { ResourceType } from "@azure/cosmos";
-import { Platform, resetConfigContext, updateConfigContext } from "../ConfigContext";
+import { PortalBackendEndpoints } from "Common/Constants";
+import { configContext, Platform, resetConfigContext, updateConfigContext } from "../ConfigContext";
 import { updateUserContext } from "../UserContext";
-import { endpoint, getTokenFromAuthService, requestPlugin, tokenProvider } from "./CosmosClient";
-
-describe("tokenProvider", () => {
-  const options = {
-    verb: "GET" as any,
-    path: "/",
-    resourceId: "",
-    resourceType: "dbs" as ResourceType,
-    headers: {},
-    getAuthorizationTokenUsingMasterKey: () => "",
-  };
-
-  beforeEach(() => {
-    updateConfigContext({
-      BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
-    });
-    window.fetch = jest.fn().mockImplementation(() => {
-      return {
-        json: () => "{}",
-        headers: new Map(),
-      };
-    });
-  });
-
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-});
+import { endpoint, getTokenFromAuthService, requestPlugin } from "./CosmosClient";
 
 describe("getTokenFromAuthService", () => {
   beforeEach(() => {
@@ -48,22 +21,22 @@ describe("getTokenFromAuthService", () => {
 
   it("builds the correct URL in production", () => {
     updateConfigContext({
-      BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
+      PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Prod,
     });
     getTokenFromAuthService("GET", "dbs", "foo");
     expect(window.fetch).toHaveBeenCalledWith(
-      "https://main.documentdb.ext.azure.com/api/guest/runtimeproxy/authorizationTokens",
+      `${configContext.PORTAL_BACKEND_ENDPOINT}/api/connectionstring/runtimeproxy/authorizationtokens`,
       expect.any(Object),
     );
   });
 
   it("builds the correct URL in dev", () => {
     updateConfigContext({
-      BACKEND_ENDPOINT: "https://localhost:1234",
+      PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Development,
     });
     getTokenFromAuthService("GET", "dbs", "foo");
     expect(window.fetch).toHaveBeenCalledWith(
-      "https://localhost:1234/api/guest/runtimeproxy/authorizationTokens",
+      `${configContext.PORTAL_BACKEND_ENDPOINT}/api/connectionstring/runtimeproxy/authorizationtokens`,
       expect.any(Object),
     );
   });
@@ -106,7 +79,7 @@ describe("requestPlugin", () => {
       const next = jest.fn();
       updateConfigContext({
         platform: Platform.Hosted,
-        BACKEND_ENDPOINT: "https://localhost:1234",
+        PORTAL_BACKEND_ENDPOINT: "https://localhost:1234",
         PROXY_PATH: "/proxy",
       });
       const headers = {};

src/Common/CosmosClient.ts

@@ -3,32 +3,31 @@ import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizatio
 import { AuthorizationToken } from "Contracts/FabricMessageTypes";
 import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
+import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
 import { AuthType } from "../AuthType";
-import { PriorityLevel } from "../Common/Constants";
+import { BackendApi, PriorityLevel } from "../Common/Constants";
+import * as Logger from "../Common/Logger";
 import { Platform, configContext } from "../ConfigContext";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
 import { getErrorMessage } from "./ErrorHandlingUtils";
-import * as Logger from "../Common/Logger";
 
 const _global = typeof self === "undefined" ? window : self;
 
 export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
 
-  const aadDataPlaneFeatureEnabled =
-    userContext.features.enableAadDataPlane && userContext.databaseAccount.properties.disableLocalAuth;
   const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && userContext.apiType === "SQL";
-  if (aadDataPlaneFeatureEnabled || (!userContext.features.enableAadDataPlane && dataPlaneRBACOptionEnabled)) {
+  if (userContext.features.enableAadDataPlane || dataPlaneRBACOptionEnabled) {
     Logger.logInfo(
       `AAD Data Plane Feature flag set to ${userContext.features.enableAadDataPlane} for account with disable local auth ${userContext.databaseAccount.properties.disableLocalAuth} `,
       "Explorer/tokenProvider",
     );
     if (!userContext.aadToken) {
       logConsoleError(
-        `AAD token does not exist. Please use "Login for Entra ID" prior to performing Entra ID RBAC operations`,
+        `AAD token does not exist. Please use the "Login for Entra ID" button in the Toolbar prior to performing Entra ID RBAC operations`,
       );
       return null;
     }
@@ -125,6 +124,37 @@ export async function getTokenFromAuthService(
   verb: string,
   resourceType: string,
   resourceId?: string,
+): Promise<AuthorizationToken> {
+  if (!useNewPortalBackendEndpoint(BackendApi.RuntimeProxy)) {
+    return getTokenFromAuthService_ToBeDeprecated(verb, resourceType, resourceId);
+  }
+
+  try {
+    const host: string = configContext.PORTAL_BACKEND_ENDPOINT;
+    const response: Response = await _global.fetch(host + "/api/connectionstring/runtimeproxy/authorizationtokens", {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        "x-ms-encrypted-auth-token": userContext.accessToken,
+      },
+      body: JSON.stringify({
+        verb,
+        resourceType,
+        resourceId,
+      }),
+    });
+    const result: AuthorizationToken = await response.json();
+    return result;
+  } catch (error) {
+    logConsoleError(`Failed to get authorization headers for ${resourceType}: ${getErrorMessage(error)}`);
+    return Promise.reject(error);
+  }
+}
+
+export async function getTokenFromAuthService_ToBeDeprecated(
+  verb: string,
+  resourceType: string,
+  resourceId?: string,
 ): Promise<AuthorizationToken> {
   try {
     const host = configContext.BACKEND_ENDPOINT;

src/Common/DatabaseUtility.ts

@@ -0,0 +1,3 @@
+export function getNewDatabaseSharedThroughputDefault(): boolean {
+  return false;
+}

src/Common/EntityValue.tsx

@@ -10,6 +10,7 @@ export interface TableEntityProps {
   isEntityValueDisable?: boolean;
   entityTimeValue: string;
   entityValueType: string;
+  entityProperty: string;
   onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
   onSelectDate: (date: Date | null | undefined) => void;
   onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
@@ -26,6 +27,7 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
   onSelectDate,
   isEntityValueDisable,
   onEntityTimeValueChange,
+  entityProperty,
 }: TableEntityProps): JSX.Element => {
   if (isEntityTypeDate) {
     return (
@@ -51,15 +53,20 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
   }
 
   return (
-    <TextField
-      label={entityValueLabel && entityValueLabel}
-      className="addEntityTextField"
-      disabled={isEntityValueDisable}
-      type={entityValueType}
-      placeholder={entityValuePlaceholder}
-      value={typeof entityValue === "string" ? entityValue : ""}
-      onChange={onEntityValueChange}
-      ariaLabel={attributeValueLabel}
-    />
+    <>
+      <span id={entityProperty} className="screenReaderOnly">
+        Edit Property {entityProperty} {attributeValueLabel}
+      </span>
+      <TextField
+        label={entityValueLabel && entityValueLabel}
+        className="addEntityTextField"
+        disabled={isEntityValueDisable}
+        type={entityValueType}
+        placeholder={entityValuePlaceholder}
+        value={typeof entityValue === "string" ? entityValue : ""}
+        onChange={onEntityValueChange}
+        aria-labelledby={entityProperty}
+      />
+    </>
   );
 };

src/Common/EnvironmentUtility.test.ts

@@ -1,3 +1,5 @@
+import { PortalBackendEndpoints } from "Common/Constants";
+import { updateConfigContext } from "ConfigContext";
 import * as EnvironmentUtility from "./EnvironmentUtility";
 
 describe("Environment Utility Test", () => {
@@ -11,4 +13,18 @@ describe("Environment Utility Test", () => {
     const expectedResult = "test/";
     expect(EnvironmentUtility.normalizeArmEndpoint(uri)).toEqual(expectedResult);
   });
+
+  it("Detect environment is Mpac", () => {
+    updateConfigContext({
+      PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Mpac,
+    });
+    expect(EnvironmentUtility.getEnvironment()).toBe(EnvironmentUtility.Environment.Mpac);
+  });
+
+  it("Detect environment is Development", () => {
+    updateConfigContext({
+      PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Development,
+    });
+    expect(EnvironmentUtility.getEnvironment()).toBe(EnvironmentUtility.Environment.Development);
+  });
 });

src/Common/EnvironmentUtility.ts

@@ -1,6 +1,29 @@
+import { PortalBackendEndpoints } from "Common/Constants";
+import { configContext } from "ConfigContext";
+
 export function normalizeArmEndpoint(uri: string): string {
   if (uri && uri.slice(-1) !== "/") {
     return `${uri}/`;
   }
   return uri;
 }
+
+export enum Environment {
+  Development = "Development",
+  Mpac = "MPAC",
+  Prod = "Prod",
+  Fairfax = "Fairfax",
+  Mooncake = "Mooncake",
+}
+
+export const getEnvironment = (): Environment => {
+  const environmentMap: { [key: string]: Environment } = {
+    [PortalBackendEndpoints.Development]: Environment.Development,
+    [PortalBackendEndpoints.Mpac]: Environment.Mpac,
+    [PortalBackendEndpoints.Prod]: Environment.Prod,
+    [PortalBackendEndpoints.Fairfax]: Environment.Fairfax,
+    [PortalBackendEndpoints.Mooncake]: Environment.Mooncake,
+  };
+
+  return environmentMap[configContext.PORTAL_BACKEND_ENDPOINT];
+};

src/Common/ErrorHandlingUtils.ts

@@ -53,7 +53,8 @@ const replaceKnownError = (errorMessage: string): string => {
     return "Partition key paths must contain only valid characters and not contain a trailing slash or wildcard character.";
   } else if (
     errorMessage?.indexOf("The user aborted a request") >= 0 ||
-    errorMessage?.indexOf("The operation was aborted") >= 0
+    errorMessage?.indexOf("The operation was aborted") >= 0 ||
+    errorMessage === "signal is aborted without reason"
   ) {
     return "User aborted query.";
   }

src/Common/MongoProxyClient.test.ts

@@ -1,5 +1,6 @@
+import { MongoProxyEndpoints } from "Common/Constants";
 import { AuthType } from "../AuthType";
-import { resetConfigContext, updateConfigContext } from "../ConfigContext";
+import { configContext, resetConfigContext, updateConfigContext } from "../ConfigContext";
 import { DatabaseAccount } from "../Contracts/DataModels";
 import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
@@ -71,7 +72,8 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
+        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
+        globallyEnabledMongoAPIs: [],
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -82,16 +84,19 @@ describe("MongoProxyClient", () => {
     it("builds the correct URL", () => {
       queryDocuments(databaseId, collection, true, "{}");
       expect(window.fetch).toHaveBeenCalledWith(
-        "https://main.documentdb.ext.azure.com/api/mongo/explorer/resourcelist?db=testDB&coll=testCollection&resourceUrl=bardbs%2FtestDB%2Fcolls%2FtestCollection%2Fdocs%2F&rid=testCollectionrid&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer/resourcelist`,
         expect.any(Object),
       );
     });
 
     it("builds the correct proxy URL in development", () => {
-      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
+      updateConfigContext({
+        MONGO_PROXY_ENDPOINT: "https://localhost:1234",
+        globallyEnabledMongoAPIs: [],
+      });
       queryDocuments(databaseId, collection, true, "{}");
       expect(window.fetch).toHaveBeenCalledWith(
-        "https://localhost:1234/api/mongo/explorer/resourcelist?db=testDB&coll=testCollection&resourceUrl=bardbs%2FtestDB%2Fcolls%2FtestCollection%2Fdocs%2F&rid=testCollectionrid&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer/resourcelist`,
         expect.any(Object),
       );
     });
@@ -103,7 +108,8 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
+        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
+        globallyEnabledMongoAPIs: [],
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -114,16 +120,19 @@ describe("MongoProxyClient", () => {
     it("builds the correct URL", () => {
       readDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
-        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
         expect.any(Object),
       );
     });
 
     it("builds the correct proxy URL in development", () => {
-      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
+      updateConfigContext({
+        MONGO_PROXY_ENDPOINT: "https://localhost:1234",
+        globallyEnabledMongoAPIs: [],
+      });
       readDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
-        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
         expect.any(Object),
       );
     });
@@ -135,7 +144,8 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
+        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
+        globallyEnabledMongoAPIs: [],
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -146,16 +156,19 @@ describe("MongoProxyClient", () => {
     it("builds the correct URL", () => {
       readDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
-        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
         expect.any(Object),
       );
     });
 
     it("builds the correct proxy URL in development", () => {
-      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
+      updateConfigContext({
+        MONGO_PROXY_ENDPOINT: "https://localhost:1234",
+        globallyEnabledMongoAPIs: [],
+      });
       readDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
-        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
         expect.any(Object),
       );
     });
@@ -167,7 +180,8 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
+        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
+        globallyEnabledMongoAPIs: [],
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -178,16 +192,19 @@ describe("MongoProxyClient", () => {
     it("builds the correct URL", () => {
       updateDocument(databaseId, collection, documentId, "{}");
       expect(window.fetch).toHaveBeenCalledWith(
-        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
         expect.any(Object),
       );
     });
 
     it("builds the correct proxy URL in development", () => {
-      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
+      updateConfigContext({
+        MONGO_BACKEND_ENDPOINT: "https://localhost:1234",
+        globallyEnabledMongoAPIs: [],
+      });
       updateDocument(databaseId, collection, documentId, "{}");
       expect(window.fetch).toHaveBeenCalledWith(
-        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
         expect.any(Object),
       );
     });
@@ -199,7 +216,8 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
+        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
+        globallyEnabledMongoAPIs: [],
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -210,16 +228,19 @@ describe("MongoProxyClient", () => {
     it("builds the correct URL", () => {
       deleteDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
-        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
         expect.any(Object),
       );
     });
 
     it("builds the correct proxy URL in development", () => {
-      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
+      updateConfigContext({
+        MONGO_PROXY_ENDPOINT: "https://localhost:1234",
+        globallyEnabledMongoAPIs: [],
+      });
       deleteDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
-        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
         expect.any(Object),
       );
     });
@@ -231,13 +252,14 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
+        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
+        globallyEnabledMongoAPIs: [],
       });
     });
 
     it("returns a production endpoint", () => {
-      const endpoint = getEndpoint("https://main.documentdb.ext.azure.com");
-      expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/mongo/explorer");
+      const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+      expect(endpoint).toEqual(`${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`);
     });
 
     it("returns a development endpoint", () => {
@@ -249,18 +271,20 @@ describe("MongoProxyClient", () => {
       updateUserContext({
         authType: AuthType.EncryptedToken,
       });
-      const endpoint = getEndpoint("https://main.documentdb.ext.azure.com");
-      expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/guest/mongo/explorer");
+      const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+      expect(endpoint).toEqual(`${configContext.MONGO_PROXY_ENDPOINT}/api/connectionstring/mongo/explorer`);
     });
   });
+
   describe("getFeatureEndpointOrDefault", () => {
     beforeEach(() => {
       resetConfigContext();
       updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
+        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
+        globallyEnabledMongoAPIs: [],
       });
       const params = new URLSearchParams({
-        "feature.mongoProxyEndpoint": "https://localhost:12901",
+        "feature.mongoProxyEndpoint": MongoProxyEndpoints.Prod,
         "feature.mongoProxyAPIs": "readDocument|createDocument",
       });
       const features = extractFeatures(params);
@@ -272,12 +296,12 @@ describe("MongoProxyClient", () => {
 
     it("returns a local endpoint", () => {
       const endpoint = getFeatureEndpointOrDefault("readDocument");
-      expect(endpoint).toEqual("https://localhost:12901/api/mongo/explorer");
+      expect(endpoint).toEqual(`${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`);
     });
 
     it("returns a production endpoint", () => {
-      const endpoint = getFeatureEndpointOrDefault("deleteDocument");
-      expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/mongo/explorer");
+      const endpoint = getFeatureEndpointOrDefault("DeleteDocument");
+      expect(endpoint).toEqual(`${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`);
     });
   });
 });

src/Common/MongoProxyClient.ts

@@ -1,7 +1,7 @@
 import { Constants as CosmosSDKConstants } from "@azure/cosmos";
 import {
-  allowedMongoProxyEndpoints,
   allowedMongoProxyEndpoints_ToBeDeprecated,
+  defaultAllowedMongoProxyEndpoints,
   validateEndpoint,
 } from "Utils/EndpointUtils";
 import queryString from "querystring";
@@ -14,7 +14,7 @@ import DocumentId from "../Explorer/Tree/DocumentId";
 import { hasFlag } from "../Platform/Hosted/extractFeatures";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
-import { ApiType, ContentType, HttpHeaders, HttpStatusCodes, MongoProxyEndpoints } from "./Constants";
+import { ApiType, ContentType, HttpHeaders, HttpStatusCodes, MongoProxyApi, MongoProxyEndpoints } from "./Constants";
 import { MinimalQueryIterator } from "./IteratorUtilities";
 import { sendMessage } from "./MessageHandler";
 
@@ -67,7 +67,7 @@ export function queryDocuments(
   query: string,
   continuationToken?: string,
 ): Promise<QueryResponse> {
-  if (!useMongoProxyEndpoint("resourcelist") || !useMongoProxyEndpoint("queryDocuments")) {
+  if (!useMongoProxyEndpoint(MongoProxyApi.ResourceList) || !useMongoProxyEndpoint(MongoProxyApi.QueryDocuments)) {
     return queryDocuments_ToBeDeprecated(databaseId, collection, isResourceList, query, continuationToken);
   }
 
@@ -89,7 +89,7 @@ export function queryDocuments(
     query,
   };
 
-  const endpoint = getFeatureEndpointOrDefault("resourcelist") || "";
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.ResourceList) || "";
 
   const headers = {
     ...defaultHeaders,
@@ -194,7 +194,7 @@ export function readDocument(
   collection: Collection,
   documentId: DocumentId,
 ): Promise<DataModels.DocumentId> {
-  if (!useMongoProxyEndpoint("readDocument")) {
+  if (!useMongoProxyEndpoint(MongoProxyApi.ReadDocument)) {
     return readDocument_ToBeDeprecated(databaseId, collection, documentId);
   }
   const { databaseAccount } = userContext;
@@ -217,7 +217,7 @@ export function readDocument(
         : "",
   };
 
-  const endpoint = getFeatureEndpointOrDefault("readDocument");
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.ReadDocument);
 
   return window
     .fetch(endpoint, {
@@ -289,7 +289,7 @@ export function createDocument(
   partitionKeyProperty: string,
   documentContent: unknown,
 ): Promise<DataModels.DocumentId> {
-  if (!useMongoProxyEndpoint("createDocument")) {
+  if (!useMongoProxyEndpoint(MongoProxyApi.CreateDocument)) {
     return createDocument_ToBeDeprecated(databaseId, collection, partitionKeyProperty, documentContent);
   }
   const { databaseAccount } = userContext;
@@ -308,7 +308,7 @@ export function createDocument(
     documentContent: JSON.stringify(documentContent),
   };
 
-  const endpoint = getFeatureEndpointOrDefault("createDocument");
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.CreateDocument);
 
   return window
     .fetch(`${endpoint}/createDocument`, {
@@ -373,7 +373,7 @@ export function updateDocument(
   documentId: DocumentId,
   documentContent: string,
 ): Promise<DataModels.DocumentId> {
-  if (!useMongoProxyEndpoint("updateDocument")) {
+  if (!useMongoProxyEndpoint(MongoProxyApi.UpdateDocument)) {
     return updateDocument_ToBeDeprecated(databaseId, collection, documentId, documentContent);
   }
   const { databaseAccount } = userContext;
@@ -396,7 +396,7 @@ export function updateDocument(
         : "",
     documentContent,
   };
-  const endpoint = getFeatureEndpointOrDefault("updateDocument");
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.UpdateDocument);
 
   return window
     .fetch(endpoint, {
@@ -464,7 +464,7 @@ export function updateDocument_ToBeDeprecated(
 }
 
 export function deleteDocument(databaseId: string, collection: Collection, documentId: DocumentId): Promise<void> {
-  if (!useMongoProxyEndpoint("deleteDocument")) {
+  if (!useMongoProxyEndpoint(MongoProxyApi.DeleteDocument)) {
     return deleteDocument_ToBeDeprecated(databaseId, collection, documentId);
   }
   const { databaseAccount } = userContext;
@@ -486,7 +486,7 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
         ? documentId.partitionKeyProperties?.[0]
         : "",
   };
-  const endpoint = getFeatureEndpointOrDefault("deleteDocument");
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.DeleteDocument);
 
   return window
     .fetch(endpoint, {
@@ -550,10 +550,56 @@ export function deleteDocument_ToBeDeprecated(
     });
 }
 
+export function deleteDocuments(
+  databaseId: string,
+  collection: Collection,
+  documentIds: DocumentId[],
+): Promise<{
+  deletedCount: number;
+  isAcknowledged: boolean;
+}> {
+  const { databaseAccount } = userContext;
+  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
+
+  const rids: string[] = documentIds.map((documentId) => {
+    const idComponents = documentId.self.split("/");
+    return idComponents[5];
+  });
+
+  const params = {
+    databaseID: databaseId,
+    collectionID: collection.id(),
+    resourceUrl: `${resourceEndpoint}`,
+    resourceIDs: rids,
+    subscriptionID: userContext.subscriptionId,
+    resourceGroup: userContext.resourceGroup,
+    databaseAccountName: databaseAccount.name,
+  };
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.BulkDelete);
+
+  return window
+    .fetch(`${endpoint}/bulkdelete`, {
+      method: "DELETE",
+      body: JSON.stringify(params),
+      headers: {
+        ...defaultHeaders,
+        ...authHeaders(),
+        [HttpHeaders.contentType]: ContentType.applicationJson,
+      },
+    })
+    .then(async (response) => {
+      if (response.ok) {
+        const result = await response.json();
+        return result;
+      }
+      return await errorHandling(response, "deleting documents", params);
+    });
+}
+
 export function createMongoCollectionWithProxy(
   params: DataModels.CreateCollectionParams,
 ): Promise<DataModels.Collection> {
-  if (!useMongoProxyEndpoint("createCollectionWithProxy")) {
+  if (!useMongoProxyEndpoint(MongoProxyApi.CreateCollectionWithProxy)) {
     return createMongoCollectionWithProxy_ToBeDeprecated(params);
   }
   const { databaseAccount } = userContext;
@@ -576,7 +622,7 @@ export function createMongoCollectionWithProxy(
     isSharded: !!shardKey,
   };
 
-  const endpoint = getFeatureEndpointOrDefault("createCollectionWithProxy");
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.CreateCollectionWithProxy);
 
   return window
     .fetch(`${endpoint}/createCollection`, {
@@ -646,12 +692,13 @@ export function getFeatureEndpointOrDefault(feature: string): string {
   if (useMongoProxyEndpoint(feature)) {
     endpoint = configContext.MONGO_PROXY_ENDPOINT;
   } else {
+    const allowedMongoProxyEndpoints = configContext.allowedMongoProxyEndpoints || [
+      ...defaultAllowedMongoProxyEndpoints,
+      ...allowedMongoProxyEndpoints_ToBeDeprecated,
+    ];
     endpoint =
       hasFlag(userContext.features.mongoProxyAPIs, feature) &&
-      validateEndpoint(userContext.features.mongoProxyEndpoint, [
-        ...allowedMongoProxyEndpoints,
-        ...allowedMongoProxyEndpoints_ToBeDeprecated,
-      ])
+      validateEndpoint(userContext.features.mongoProxyEndpoint, allowedMongoProxyEndpoints)
         ? userContext.features.mongoProxyEndpoint
         : configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT;
   }
@@ -672,26 +719,88 @@ 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;
+export function useMongoProxyEndpoint(mongoProxyApi: string): boolean {
+  const mongoProxyEnvironmentMap: { [key: string]: string[] } = {
+    [MongoProxyApi.ResourceList]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.QueryDocuments]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.CreateDocument]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.ReadDocument]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.UpdateDocument]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.DeleteDocument]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.CreateCollectionWithProxy]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.LegacyMongoShell]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.BulkDelete]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+  };
+
+  if (!mongoProxyEnvironmentMap[mongoProxyApi] || !configContext.MONGO_PROXY_ENDPOINT) {
+    return false;
   }
 
-  return (
-    canAccessMongoProxy &&
-    configContext.NEW_MONGO_APIS?.includes(api) &&
-    activeMongoProxyEndpoints.includes(configContext.MONGO_PROXY_ENDPOINT)
-  );
+  if (configContext.globallyEnabledMongoAPIs.includes(mongoProxyApi)) {
+    return true;
+  }
+
+  return mongoProxyEnvironmentMap[mongoProxyApi].includes(configContext.MONGO_PROXY_ENDPOINT);
+}
+
+export class ThrottlingError extends Error {
+  constructor(message: string) {
+    super(message);
+  }
 }
 
 // TODO: This function throws most of the time except on Forbidden which is a bit strange
@@ -703,6 +812,14 @@ async function errorHandling(response: Response, action: string, params: unknown
   if (response.status === HttpStatusCodes.Forbidden) {
     sendMessage({ type: MessageTypes.ForbiddenError, reason: errorMessage });
     return;
+  } else if (
+    response.status === HttpStatusCodes.BadRequest &&
+    errorMessage.includes("Error=16500") &&
+    errorMessage.includes("RetryAfterMs=")
+  ) {
+    // If throttling is happening, Cosmos DB will return a 400 with a body of:
+    // A write operation resulted in an error. Error=16500, RetryAfterMs=4, Details='Batch write error.
+    throw new ThrottlingError(errorMessage);
   }
   throw new Error(errorMessage);
 }

src/Common/PortalNotifications.ts

@@ -1,39 +0,0 @@
-import { configContext, Platform } from "../ConfigContext";
-import * as DataModels from "../Contracts/DataModels";
-import * as ViewModels from "../Contracts/ViewModels";
-import { userContext } from "../UserContext";
-import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
-
-const notificationsPath = () => {
-  switch (configContext.platform) {
-    case Platform.Hosted:
-      return "/api/guest/notifications";
-    case Platform.Portal:
-      return "/api/notifications";
-    default:
-      throw new Error(`Unknown platform: ${configContext.platform}`);
-  }
-};
-
-export const fetchPortalNotifications = async (): Promise<DataModels.Notification[]> => {
-  if (configContext.platform === Platform.Emulator || configContext.platform === Platform.Hosted) {
-    return [];
-  }
-
-  const { databaseAccount, resourceGroup, subscriptionId } = userContext;
-  const url = `${configContext.BACKEND_ENDPOINT}${notificationsPath()}?accountName=${
-    databaseAccount.name
-  }&subscriptionId=${subscriptionId}&resourceGroup=${resourceGroup}`;
-  const authorizationHeader: ViewModels.AuthorizationTokenHeaderMetadata = getAuthorizationHeader();
-  const headers = { [authorizationHeader.header]: authorizationHeader.token };
-
-  const response = await window.fetch(url, {
-    headers,
-  });
-
-  if (!response.ok) {
-    throw new Error(await response.text());
-  }
-
-  return (await response.json()) as DataModels.Notification[];
-};

src/Common/QueryError.test.ts

@@ -0,0 +1,113 @@
+import QueryError, { QueryErrorLocation, QueryErrorSeverity } from "Common/QueryError";
+
+describe("QueryError.tryParse", () => {
+  const testErrorLocationResolver = ({ start, end }: { start: number; end: number }) =>
+    new QueryErrorLocation(
+      { offset: start, lineNumber: start, column: start },
+      { offset: end, lineNumber: end, column: end },
+    );
+
+  it("handles a string error", () => {
+    const error = "error";
+    const result = QueryError.tryParse(error, testErrorLocationResolver);
+    expect(result).toEqual([new QueryError("error", QueryErrorSeverity.Error)]);
+  });
+
+  it("handles an error object", () => {
+    const error = {
+      message: "error",
+      severity: "Warning",
+      location: { start: 0, end: 1 },
+      code: "code",
+    };
+    const result = QueryError.tryParse(error, testErrorLocationResolver);
+    expect(result).toEqual([
+      new QueryError(
+        "error",
+        QueryErrorSeverity.Warning,
+        "code",
+        new QueryErrorLocation({ offset: 0, lineNumber: 0, column: 0 }, { offset: 1, lineNumber: 1, column: 1 }),
+      ),
+    ]);
+  });
+
+  it("handles a JSON message without syntax errors", () => {
+    const innerError = {
+      code: "BadRequest",
+      message: "Your query is bad, and you should feel bad",
+    };
+    const message = `Message: ${JSON.stringify(innerError)}\r\nActivity ID: 42`;
+    const outerError = {
+      code: "BadRequest",
+      message,
+    };
+
+    const result = QueryError.tryParse(outerError, testErrorLocationResolver);
+    expect(result).toEqual([
+      new QueryError("Your query is bad, and you should feel bad", QueryErrorSeverity.Error, "BadRequest"),
+    ]);
+  });
+
+  // Imitate the value coming from the backend, which has the syntax errors serialized as JSON in the message, along with a prefix and activity id.
+  it("handles single-nested error", () => {
+    const errors = [
+      {
+        message: "error1",
+        severity: "Warning",
+        location: { start: 0, end: 1 },
+        code: "code1",
+      },
+      {
+        message: "error2",
+        severity: "Error",
+        location: { start: 2, end: 3 },
+        code: "code2",
+      },
+    ];
+    const innerError = {
+      code: "BadRequest",
+      message: "Your query is bad, and you should feel bad",
+      errors,
+    };
+    const message = `Message: ${JSON.stringify(innerError)}\r\nActivity ID: 42`;
+    const outerError = {
+      code: "BadRequest",
+      message,
+    };
+
+    const result = QueryError.tryParse(outerError, testErrorLocationResolver);
+    expect(result).toEqual([
+      new QueryError(
+        "error1",
+        QueryErrorSeverity.Warning,
+        "code1",
+        new QueryErrorLocation({ offset: 0, lineNumber: 0, column: 0 }, { offset: 1, lineNumber: 1, column: 1 }),
+      ),
+      new QueryError(
+        "error2",
+        QueryErrorSeverity.Error,
+        "code2",
+        new QueryErrorLocation({ offset: 2, lineNumber: 2, column: 2 }, { offset: 3, lineNumber: 3, column: 3 }),
+      ),
+    ]);
+  });
+
+  // Imitate another value we've gotten from the backend, which has a doubly-nested JSON payload.
+  it("handles double-nested error", () => {
+    const outerError = {
+      code: "BadRequest",
+      message:
+        '{"code":"BadRequest","message":"{\\"errors\\":[{\\"severity\\":\\"Error\\",\\"location\\":{\\"start\\":7,\\"end\\":18},\\"code\\":\\"SC2005\\",\\"message\\":\\"\'nonexistent\' is not a recognized built-in function name.\\"}]}\\r\\nActivityId: aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa, Windows/10.0.20348 cosmos-netstandard-sdk/3.18.0"}',
+    };
+
+    const result = QueryError.tryParse(outerError, testErrorLocationResolver);
+    expect(result).toEqual([
+      new QueryError(
+        "'nonexistent' is not a recognized built-in function name.",
+        QueryErrorSeverity.Error,
+        "SC2005",
+        new QueryErrorLocation({ offset: 7, lineNumber: 7, column: 7 }, { offset: 18, lineNumber: 18, column: 18 }),
+      ),
+    ]);
+  });
+});

src/Common/QueryError.ts

@@ -0,0 +1,259 @@
+import { monaco } from "Explorer/LazyMonaco";
+import { getRUThreshold, ruThresholdEnabled } from "Shared/StorageUtility";
+
+export enum QueryErrorSeverity {
+  Error = "Error",
+  Warning = "Warning",
+}
+
+export class QueryErrorLocation {
+  constructor(
+    public start: ErrorPosition,
+    public end: ErrorPosition,
+  ) {}
+}
+
+export class ErrorPosition {
+  constructor(
+    public offset: number,
+    public lineNumber?: number,
+    public column?: number,
+  ) {}
+}
+
+// Maps severities to numbers for sorting.
+const severityMap: Record<QueryErrorSeverity, number> = {
+  Error: 1,
+  Warning: 0,
+};
+
+export function compareSeverity(left: QueryErrorSeverity, right: QueryErrorSeverity): number {
+  return severityMap[left] - severityMap[right];
+}
+
+export function createMonacoErrorLocationResolver(
+  editor: monaco.editor.IStandaloneCodeEditor,
+  selection?: monaco.Selection,
+): (location: { start: number; end: number }) => QueryErrorLocation {
+  return ({ start, end }) => {
+    // Start and end are absolute offsets (character index) in the document.
+    // But we need line numbers and columns for the monaco editor.
+    // To get those, we use the editor's model to convert the offsets to positions.
+    const model = editor.getModel();
+    if (!model) {
+      return new QueryErrorLocation(new ErrorPosition(start), new ErrorPosition(end));
+    }
+
+    // If the error was found in a selection, adjust the start and end positions to be relative to the document.
+    if (selection) {
+      // Get the character index of the start of the selection.
+      const selectionStartOffset = model.getOffsetAt(selection.getStartPosition());
+
+      // Adjust the start and end positions to be relative to the document.
+      start = selectionStartOffset + start;
+      end = selectionStartOffset + end;
+
+      // Now, when we resolve the positions, they will be relative to the document and appear in the correct location.
+    }
+
+    const startPos = model.getPositionAt(start);
+    const endPos = model.getPositionAt(end);
+    return new QueryErrorLocation(
+      new ErrorPosition(start, startPos.lineNumber, startPos.column),
+      new ErrorPosition(end, endPos.lineNumber, endPos.column),
+    );
+  };
+}
+
+export const createMonacoMarkersForQueryErrors = (errors: QueryError[]) => {
+  if (!errors) {
+    return [];
+  }
+
+  return errors
+    .map((error): monaco.editor.IMarkerData => {
+      // Validate that we have what we need to make a marker
+      if (
+        error.location === undefined ||
+        error.location.start === undefined ||
+        error.location.end === undefined ||
+        error.location.start.lineNumber === undefined ||
+        error.location.end.lineNumber === undefined ||
+        error.location.start.column === undefined ||
+        error.location.end.column === undefined
+      ) {
+        return null;
+      }
+
+      return {
+        message: error.message,
+        severity: error.getMonacoSeverity(),
+        startLineNumber: error.location.start.lineNumber,
+        startColumn: error.location.start.column,
+        endLineNumber: error.location.end.lineNumber,
+        endColumn: error.location.end.column,
+      };
+    })
+    .filter((marker) => !!marker);
+};
+
+export interface ErrorEnrichment {
+  title?: string;
+  message: string;
+  learnMoreUrl?: string;
+}
+
+const REPLACEMENT_MESSAGES: Record<string, (original: string) => string> = {
+  OPERATION_RU_LIMIT_EXCEEDED: (original) => {
+    if (ruThresholdEnabled()) {
+      const threshold = getRUThreshold();
+      return `Query exceeded the Request Unit (RU) limit of ${threshold} RUs. You can change this limit in Data Explorer settings.`;
+    }
+    return original;
+  },
+};
+
+const HELP_LINKS: Record<string, string> = {
+  OPERATION_RU_LIMIT_EXCEEDED:
+    "https://learn.microsoft.com/en-us/azure/cosmos-db/data-explorer#configure-request-unit-threshold",
+};
+
+export default class QueryError {
+  message: string;
+  helpLink?: string;
+
+  constructor(
+    message: string,
+    public severity: QueryErrorSeverity,
+    public code?: string,
+    public location?: QueryErrorLocation,
+    helpLink?: string,
+  ) {
+    // Automatically replace the message with a more Data Explorer-specific message if we have for this error code.
+    this.message = REPLACEMENT_MESSAGES[code] ? REPLACEMENT_MESSAGES[code](message) : message;
+
+    // Automatically set the help link if we have one for this error code.
+    this.helpLink = helpLink ?? HELP_LINKS[code];
+  }
+
+  getMonacoSeverity(): monaco.MarkerSeverity {
+    // It's very difficult to use the monaco.MarkerSeverity enum from here, so we'll just use the numbers directly.
+    // See: https://microsoft.github.io/monaco-editor/typedoc/enums/MarkerSeverity.html
+    switch (this.severity) {
+      case QueryErrorSeverity.Error:
+        return 8;
+      case QueryErrorSeverity.Warning:
+        return 4;
+      default:
+        return 2; // Info
+    }
+  }
+
+  /** Attempts to parse a query error from a string or object.
+   *
+   * @param error The error to parse.
+   * @returns An array of query errors if the error could be parsed, or null otherwise.
+   */
+  static tryParse(
+    error: unknown,
+    locationResolver?: (location: { start: number; end: number }) => QueryErrorLocation,
+  ): QueryError[] {
+    locationResolver =
+      locationResolver ||
+      (({ start, end }) => new QueryErrorLocation(new ErrorPosition(start), new ErrorPosition(end)));
+    const errors = QueryError.tryParseObject(error, locationResolver);
+    if (errors !== null) {
+      return errors;
+    }
+
+    const errorMessage = error as string;
+
+    // Map some well known messages to richer errors
+    const knownError = knownErrors[errorMessage];
+    if (knownError) {
+      return [knownError];
+    } else {
+      return [new QueryError(errorMessage, QueryErrorSeverity.Error)];
+    }
+  }
+
+  static read(
+    error: unknown,
+    locationResolver: (location: { start: number; end: number }) => QueryErrorLocation,
+  ): QueryError | null {
+    if (typeof error !== "object" || error === null) {
+      return null;
+    }
+
+    const message = "message" in error && typeof error.message === "string" ? error.message : undefined;
+    if (!message) {
+      return null; // Invalid error (no message).
+    }
+
+    const severity =
+      "severity" in error && typeof error.severity === "string"
+        ? (error.severity as QueryErrorSeverity)
+        : QueryErrorSeverity.Error;
+    const location =
+      "location" in error && typeof error.location === "object"
+        ? locationResolver(error.location as { start: number; end: number })
+        : undefined;
+    const code = "code" in error && typeof error.code === "string" ? error.code : undefined;
+    return new QueryError(message, severity, code, location);
+  }
+
+  private static tryParseObject(
+    error: unknown,
+    locationResolver: (location: { start: number; end: number }) => QueryErrorLocation,
+  ): QueryError[] | null {
+    let message: string | undefined;
+    if (typeof error === "object" && "message" in error && typeof error.message === "string") {
+      message = error.message;
+    } else {
+      // Unsupported error format.
+      return null;
+    }
+
+    // Some newer backends produce a message that contains a doubly-nested JSON payload.
+    // In this case, the message we get is a fully-complete JSON object we can parse.
+    // So let's try that first
+    if (message.startsWith("{") && message.endsWith("}")) {
+      let outer: unknown = undefined;
+      try {
+        outer = JSON.parse(message);
+        if (typeof outer === "object" && "message" in outer && typeof outer.message === "string") {
+          message = outer.message;
+        }
+      } catch (e) {
+        // Just continue if the parsing fails. We'll use the fallback logic below.
+      }
+    }
+
+    const lines = message.split("\n");
+    message = lines[0].trim();
+
+    if (message.startsWith("Message: ")) {
+      message = message.substring("Message: ".length);
+    }
+
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(message);
+    } catch (e) {
+      // The message doesn't contain a nested error.
+      return [QueryError.read(error, locationResolver)];
+    }
+
+    if (typeof parsed === "object") {
+      if ("errors" in parsed && Array.isArray(parsed.errors)) {
+        return parsed.errors.map((e) => QueryError.read(e, locationResolver)).filter((e) => e !== null);
+      }
+      return [QueryError.read(parsed, locationResolver)];
+    }
+    return null;
+  }
+}
+
+const knownErrors: Record<string, QueryError> = {
+  "User aborted query.": new QueryError("User aborted query.", QueryErrorSeverity.Warning),
+};

src/Common/ResourceTreeContainer.tsx

@@ -1,82 +0,0 @@
-import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
-import arrowLeftImg from "../../images/imgarrowlefticon.svg";
-import refreshImg from "../../images/refresh-cosmos.svg";
-import Explorer from "../Explorer/Explorer";
-import { ResourceTree } from "../Explorer/Tree/ResourceTree";
-import { userContext } from "../UserContext";
-import { getApiShortDisplayName } from "../Utils/APITypeUtils";
-import { NormalizedEventKey } from "./Constants";
-
-export interface ResourceTreeContainerProps {
-  toggleLeftPaneExpanded: () => void;
-  isLeftPaneExpanded: boolean;
-  container: Explorer;
-}
-
-export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps> = ({
-  toggleLeftPaneExpanded,
-  isLeftPaneExpanded,
-  container,
-}: ResourceTreeContainerProps): JSX.Element => {
-  const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
-
-  useEffect(() => {
-    if (isLeftPaneExpanded) {
-      if (focusButton.current) {
-        focusButton.current.focus();
-      }
-    }
-  });
-
-  const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
-    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
-      toggleLeftPaneExpanded();
-      event.stopPropagation();
-    }
-  };
-  return (
-    <div id="main" className={isLeftPaneExpanded ? "main" : "hiddenMain"}>
-      {/* Collections Window - - Start */}
-      <div id="mainslide" className="flexContainer">
-        {/* Collections Window Title/Command Bar - Start */}
-        <div className="collectiontitle">
-          <div className="coltitle">
-            <span className="titlepadcol">{getApiShortDisplayName()}</span>
-            <div className="float-right">
-              <span
-                className="padimgcolrefresh"
-                data-test="refreshTree"
-                role="button"
-                data-bind="click: onRefreshResourcesClick, clickBubble: false, event: { keypress: onRefreshDatabasesKeyPress }"
-                tabIndex={0}
-                aria-label={getApiShortDisplayName() + `Refresh tree`}
-                title="Refresh tree"
-              >
-                <img className="refreshcol" src={refreshImg} alt="Refresh Tree" />
-              </span>
-              <span
-                className="padimgcolrefresh1"
-                id="expandToggleLeftPaneButton"
-                role="button"
-                onClick={toggleLeftPaneExpanded}
-                onKeyPress={onKeyPressToggleLeftPaneExpanded}
-                tabIndex={0}
-                aria-label={getApiShortDisplayName() + `Collapse Tree`}
-                title="Collapse Tree"
-                ref={focusButton}
-              >
-                <img className="refreshcol1" src={arrowLeftImg} alt="Hide" />
-              </span>
-            </div>
-          </div>
-        </div>
-        {userContext.features.enableKoResourceTree ? (
-          <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
-        ) : (
-          <ResourceTree container={container} />
-        )}
-      </div>
-      {/*  Collections Window - End */}
-    </div>
-  );
-};

src/Common/TableEntity.tsx

@@ -135,6 +135,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           onEntityValueChange={onEntityValueChange}
           onSelectDate={onSelectDate}
           onEntityTimeValueChange={onEntityTimeValueChange}
+          entityProperty={entityProperty}
         />
         {!isEntityValueDisable && (
           <TooltipHost content="Edit property" id="editTooltip">

src/Common/Tooltip/InfoTooltip.tsx

@@ -3,11 +3,12 @@ import * as React from "react";
 
 export interface TooltipProps {
   children: string;
+  className?: string;
 }
 
-export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children }: TooltipProps) => {
+export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children, className }: TooltipProps) => {
   return (
-    <span>
+    <span className={className}>
       <TooltipHost content={children}>
         <Icon iconName="Info" ariaLabel={children} className="panelInfoIcon" tabIndex={0} />
       </TooltipHost>

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

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

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

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

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

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

src/Common/dataAccess/createCollection.ts

@@ -99,6 +99,9 @@ const createSqlContainer = async (params: DataModels.CreateCollectionParams): Pr
   if (params.vectorEmbeddingPolicy) {
     resource.vectorEmbeddingPolicy = params.vectorEmbeddingPolicy;
   }
+  if (params.fullTextPolicy) {
+    resource.fullTextPolicy = params.fullTextPolicy;
+  }
 
   const rpPayload: ARMTypes.SqlDatabaseCreateUpdateParameters = {
     properties: {
@@ -269,6 +272,8 @@ const createCollectionWithSDK = async (params: DataModels.CreateCollectionParams
     indexingPolicy: params.indexingPolicy || undefined,
     uniqueKeyPolicy: params.uniqueKeyPolicy || undefined,
     analyticalStorageTtl: params.analyticalStorageTtl,
+    vectorEmbeddingPolicy: params.vectorEmbeddingPolicy,
+    fullTextPolicy: params.fullTextPolicy,
   } as ContainerRequest; // TODO: remove cast when https://github.com/Azure/azure-cosmos-js/issues/423 is fixed
   const collectionOptions: RequestOptions = {};
   const createDatabaseBody: DatabaseRequest = { id: params.databaseId };

src/Common/dataAccess/createDatabase.ts

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

src/Common/dataAccess/deleteDocument.ts

@@ -26,14 +26,23 @@ export const deleteDocument = async (collection: CollectionBase, documentId: Doc
   }
 };
 
+export interface IBulkDeleteResult {
+  documentId: DocumentId;
+  requestCharge: number;
+  statusCode: number;
+  retryAfterMilliseconds?: number;
+}
+
 /**
  * Bulk delete documents
  * @param collection
  * @param documentId
- * @returns array of ids that were successfully deleted
+ * @returns array of results and status codes
  */
-export const deleteDocuments = async (collection: CollectionBase, documentIds: DocumentId[]): Promise<DocumentId[]> => {
-  const nbDocuments = documentIds.length;
+export const deleteDocuments = async (
+  collection: CollectionBase,
+  documentIds: DocumentId[],
+): Promise<IBulkDeleteResult[]> => {
   const clearMessage = logConsoleProgress(`Deleting ${documentIds.length} ${getEntityName(true)}`);
   try {
     const v2Container = await client().database(collection.databaseId).container(collection.id());
@@ -56,18 +65,17 @@ export const deleteDocuments = async (collection: CollectionBase, documentIds: D
         operationType: BulkOperationType.Delete,
       }));
 
-      const promise = v2Container.items.bulk(operations).then((bulkResult) => {
-        return documentIdsChunk.filter((_, index) => bulkResult[index].statusCode === 204);
+      const promise = v2Container.items.bulk(operations).then((bulkResults) => {
+        return bulkResults.map((bulkResult, index) => {
+          const documentId = documentIdsChunk[index];
+          return { ...bulkResult, documentId };
+        });
       });
       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(

src/ConfigContext.ts

@@ -8,16 +8,16 @@ import {
 import {
   allowedAadEndpoints,
   allowedArcadiaEndpoints,
-  allowedCassandraProxyEndpoints,
   allowedEmulatorEndpoints,
   allowedGraphEndpoints,
   allowedHostedExplorerEndpoints,
   allowedJunoOrigins,
   allowedMongoBackendEndpoints,
-  allowedMongoProxyEndpoints,
   allowedMsalRedirectEndpoints,
   defaultAllowedArmEndpoints,
   defaultAllowedBackendEndpoints,
+  defaultAllowedCassandraProxyEndpoints,
+  defaultAllowedMongoProxyEndpoints,
   validateEndpoint,
 } from "Utils/EndpointUtils";
 
@@ -32,6 +32,8 @@ export interface ConfigContext {
   platform: Platform;
   allowedArmEndpoints: ReadonlyArray<string>;
   allowedBackendEndpoints: ReadonlyArray<string>;
+  allowedCassandraProxyEndpoints: ReadonlyArray<string>;
+  allowedMongoProxyEndpoints: ReadonlyArray<string>;
   allowedParentFrameOrigins: ReadonlyArray<string>;
   gitSha?: string;
   proxyPath?: string;
@@ -49,14 +51,11 @@ export interface ConfigContext {
   ARCADIA_ENDPOINT: string;
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: string;
   BACKEND_ENDPOINT?: string;
-  PORTAL_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;
-  NEW_MONGO_APIS?: string[];
-  CASSANDRA_PROXY_ENDPOINT?: string;
-  CASSANDRA_PROXY_OUTBOUND_IPS_ALLOWLISTED: boolean;
+  MONGO_PROXY_ENDPOINT: string;
+  CASSANDRA_PROXY_ENDPOINT: string;
   NEW_CASSANDRA_APIS?: string[];
   PROXY_PATH?: string;
   JUNO_ENDPOINT: string;
@@ -68,6 +67,8 @@ export interface ConfigContext {
   hostedExplorerURL: string;
   armAPIVersion?: string;
   msalRedirectURI?: string;
+  globallyEnabledCassandraAPIs?: string[];
+  globallyEnabledMongoAPIs?: string[];
 }
 
 // Default configuration
@@ -75,9 +76,12 @@ let configContext: Readonly<ConfigContext> = {
   platform: Platform.Portal,
   allowedArmEndpoints: defaultAllowedArmEndpoints,
   allowedBackendEndpoints: defaultAllowedBackendEndpoints,
+  allowedCassandraProxyEndpoints: defaultAllowedCassandraProxyEndpoints,
+  allowedMongoProxyEndpoints: defaultAllowedMongoProxyEndpoints,
   allowedParentFrameOrigins: [
     `^https:\\/\\/cosmos\\.azure\\.(com|cn|us)$`,
     `^https:\\/\\/[\\.\\w]*portal\\.azure\\.(com|cn|us)$`,
+    `^https:\\/\\/cdb-(ms|ff|mc)-prod-pbe\\.cosmos\\.azure\\.(com|us|cn)$`,
     `^https:\\/\\/[\\.\\w]*portal\\.microsoftazure\\.de$`,
     `^https:\\/\\/[\\.\\w]*ext\\.azure\\.(com|cn|us)$`,
     `^https:\\/\\/[\\.\\w]*\\.ext\\.microsoftazure\\.de$`,
@@ -87,7 +91,7 @@ let configContext: Readonly<ConfigContext> = {
     `^https:\\/\\/.*\\.analysis-df\\.net$`,
     `^https:\\/\\/.*\\.analysis-df\\.windows\\.net$`,
     `^https:\\/\\/.*\\.azure-test\\.net$`,
-    `^https:\\/\\/cosmos-explorer-preview\\.azurewebsites\\.net`,
+    `^https:\\/\\/cosmos-explorer-preview\\.azurewebsites\\.net$`,
   ], // Webpack injects this at build time
   gitSha: process.env.GIT_SHA,
   hostedExplorerURL: "https://cosmos.azure.com/",
@@ -108,22 +112,12 @@ let configContext: Readonly<ConfigContext> = {
   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"],
-  CASSANDRA_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,
   isTerminalEnabled: false,
   isPhoenixEnabled: false,
+  globallyEnabledCassandraAPIs: [],
+  globallyEnabledMongoAPIs: [],
 };
 
 export function resetConfigContext(): void {
@@ -167,7 +161,12 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     delete newContext.BACKEND_ENDPOINT;
   }
 
-  if (!validateEndpoint(newContext.MONGO_PROXY_ENDPOINT, allowedMongoProxyEndpoints)) {
+  if (
+    !validateEndpoint(
+      newContext.MONGO_PROXY_ENDPOINT,
+      configContext.allowedMongoProxyEndpoints || defaultAllowedMongoProxyEndpoints,
+    )
+  ) {
     delete newContext.MONGO_PROXY_ENDPOINT;
   }
 
@@ -175,7 +174,12 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     delete newContext.MONGO_BACKEND_ENDPOINT;
   }
 
-  if (!validateEndpoint(newContext.CASSANDRA_PROXY_ENDPOINT, allowedCassandraProxyEndpoints)) {
+  if (
+    !validateEndpoint(
+      newContext.CASSANDRA_PROXY_ENDPOINT,
+      configContext.allowedCassandraProxyEndpoints || defaultAllowedCassandraProxyEndpoints,
+    )
+  ) {
     delete newContext.CASSANDRA_PROXY_ENDPOINT;
   }
 

src/Contracts/DataModels.ts

@@ -159,6 +159,7 @@ export interface Collection extends Resource {
   analyticalStorageTtl?: number;
   geospatialConfig?: GeospatialConfig;
   vectorEmbeddingPolicy?: VectorEmbeddingPolicy;
+  fullTextPolicy?: FullTextPolicy;
   schema?: ISchema;
   requestSchema?: () => void;
   computedProperties?: ComputedProperties;
@@ -199,11 +200,19 @@ export interface IndexingPolicy {
   compositeIndexes?: any[];
   spatialIndexes?: any[];
   vectorIndexes?: VectorIndex[];
+  fullTextIndexes?: FullTextIndex[];
 }
 
 export interface VectorIndex {
   path: string;
   type: "flat" | "diskANN" | "quantizedFlat";
+  diskANNShardKey?: string;
+  indexingSearchListSize?: number;
+  quantizationByteSize?: number;
+}
+
+export interface FullTextIndex {
+  path: string;
 }
 
 export interface ComputedProperty {
@@ -342,6 +351,7 @@ export interface CreateCollectionParams {
   uniqueKeyPolicy?: UniqueKeyPolicy;
   createMongoWildcardIndex?: boolean;
   vectorEmbeddingPolicy?: VectorEmbeddingPolicy;
+  fullTextPolicy?: FullTextPolicy;
 }
 
 export interface VectorEmbeddingPolicy {
@@ -355,6 +365,16 @@ export interface VectorEmbedding {
   path: string;
 }
 
+export interface FullTextPolicy {
+  defaultLanguage: string;
+  fullTextPaths: FullTextPath[];
+}
+
+export interface FullTextPath {
+  path: string;
+  language: string;
+}
+
 export interface ReadDatabaseOfferParams {
   databaseId: string;
   databaseResourceId?: string;

src/Contracts/ViewModels.ts

@@ -98,7 +98,6 @@ export interface Database extends TreeNode {
   openAddCollection(database: Database, event: MouseEvent): void;
   onSettingsClick: () => void;
   loadOffer(): Promise<void>;
-  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
 }
 
 export interface CollectionBase extends TreeNode {
@@ -127,6 +126,8 @@ export interface Collection extends CollectionBase {
   analyticalStorageTtl: ko.Observable<number>;
   schema?: DataModels.ISchema;
   requestSchema?: () => void;
+  vectorEmbeddingPolicy: ko.Observable<DataModels.VectorEmbeddingPolicy>;
+  fullTextPolicy: ko.Observable<DataModels.FullTextPolicy>;
   indexingPolicy: ko.Observable<DataModels.IndexingPolicy>;
   uniqueKeyPolicy: DataModels.UniqueKeyPolicy;
   usageSizeInKB: ko.Observable<number>;
@@ -191,8 +192,6 @@ export interface Collection extends CollectionBase {
   onDragOver(source: Collection, event: { originalEvent: DragEvent }): void;
   onDrop(source: Collection, event: { originalEvent: DragEvent }): void;
   uploadFiles(fileList: FileList): Promise<{ data: UploadDetailsRecord[] }>;
-
-  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
 }
 
 /**
@@ -385,6 +384,8 @@ export interface DataExplorerInputsFrame {
   databaseAccount: any;
   subscriptionId?: string;
   resourceGroup?: string;
+  tenantId?: string;
+  userName?: string;
   masterKey?: string;
   hasWriteAccess?: boolean;
   authorizationToken?: string;

src/Controls/Heatmap/Heatmap.test.ts

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

src/Controls/Heatmap/Heatmap.ts

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

src/Explorer/ContextMenuButtonFactory.tsx

@@ -41,6 +41,10 @@ export interface DatabaseContextMenuButtonParams {
  * New resource tree (in ReactJS)
  */
 export const createDatabaseContextMenu = (container: Explorer, databaseId: string): TreeNodeMenuItem[] => {
+  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly) {
+    return undefined;
+  }
+
   const items: TreeNodeMenuItem[] = [
     {
       iconSrc: AddCollectionIcon,
@@ -52,13 +56,15 @@ export const createDatabaseContextMenu = (container: Explorer, databaseId: strin
   if (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations) {
     items.push({
       iconSrc: DeleteDatabaseIcon,
-      onClick: () =>
-        useSidePanel
-          .getState()
-          .openSidePanel(
-            "Delete " + getDatabaseName(),
-            <DeleteDatabaseConfirmationPanel refreshDatabases={() => container.refreshAllDatabases()} />,
-          ),
+      onClick: (lastFocusedElement?: React.RefObject<HTMLElement>) => {
+        (useSidePanel.getState().getRef = lastFocusedElement),
+          useSidePanel
+            .getState()
+            .openSidePanel(
+              "Delete " + getDatabaseName(),
+              <DeleteDatabaseConfirmationPanel refreshDatabases={() => container.refreshAllDatabases()} />,
+            );
+      },
       label: `Delete ${getDatabaseName()}`,
       styleClass: "deleteDatabaseMenuItem",
     });
@@ -100,6 +106,16 @@ export const createCollectionContextMenuButton = (
     });
   }
 
+  if (useNotebook.getState().isShellEnabled && userContext.apiType === "Cassandra") {
+    items.push({
+      iconSrc: HostedTerminalIcon,
+      onClick: () => {
+        container.openNotebookTerminal(ViewModels.TerminalKind.Cassandra);
+      },
+      label: "Open Cassandra Shell",
+    });
+  }
+
   if (
     configContext.platform !== Platform.Fabric &&
     (userContext.apiType === "SQL" || userContext.apiType === "Gremlin")
@@ -132,14 +148,15 @@ export const createCollectionContextMenuButton = (
   if (configContext.platform !== Platform.Fabric) {
     items.push({
       iconSrc: DeleteCollectionIcon,
-      onClick: () => {
+      onClick: (lastFocusedElement?: React.RefObject<HTMLElement>) => {
         useSelectedNode.getState().setSelectedNode(selectedCollection);
-        useSidePanel
-          .getState()
-          .openSidePanel(
-            "Delete " + getCollectionName(),
-            <DeleteCollectionConfirmationPane refreshDatabases={() => container.refreshAllDatabases()} />,
-          );
+        (useSidePanel.getState().getRef = lastFocusedElement),
+          useSidePanel
+            .getState()
+            .openSidePanel(
+              "Delete " + getCollectionName(),
+              <DeleteCollectionConfirmationPane refreshDatabases={() => container.refreshAllDatabases()} />,
+            );
       },
       label: `Delete ${getCollectionName()}`,
       styleClass: "deleteCollectionMenuItem",

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -1,4 +1,4 @@
-import { DirectionalHint, Icon, Label, Stack, TooltipHost } from "@fluentui/react";
+import { DirectionalHint, Icon, IconButton, Label, Stack, TooltipHost } from "@fluentui/react";
 import * as React from "react";
 import { NormalizedEventKey } from "../../../Common/Constants";
 import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
@@ -9,6 +9,9 @@ export interface CollapsibleSectionProps {
   onExpand?: () => void;
   children: JSX.Element;
   tooltipContent?: string | JSX.Element | JSX.Element[];
+  showDelete?: boolean;
+  onDelete?: () => void;
+  disabled?: boolean;
 }
 
 export interface CollapsibleSectionState {
@@ -69,6 +72,20 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
               <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
             </TooltipHost>
           )}
+          {this.props.showDelete && (
+            <Stack.Item style={{ marginLeft: "auto" }}>
+              <IconButton
+                disabled={this.props.disabled}
+                id={`delete-${this.props.title.split(" ").join("-")}`}
+                iconProps={{ iconName: "Delete" }}
+                style={{ height: 27, marginRight: "20px" }}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  this.props.onDelete();
+                }}
+              />
+            </Stack.Item>
+          )}
         </Stack>
         {this.state.isExpanded && this.props.children}
       </>

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

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

src/Explorer/Controls/Dialog.tsx

@@ -35,7 +35,7 @@ export interface DialogState {
     textFieldProps?: TextFieldProps,
     primaryButtonDisabled?: boolean,
   ) => void;
-  showOkModalDialog: (title: string, subText: string) => void;
+  showOkModalDialog: (title: string, subText: string, linkProps?: LinkProps) => void;
 }
 
 export const useDialog: UseStore<DialogState> = create((set, get) => ({
@@ -83,7 +83,7 @@ export const useDialog: UseStore<DialogState> = create((set, get) => ({
       textFieldProps,
       primaryButtonDisabled,
     }),
-  showOkModalDialog: (title: string, subText: string): void =>
+  showOkModalDialog: (title: string, subText: string, linkProps?: LinkProps): void =>
     get().openDialog({
       isModal: true,
       title,
@@ -94,6 +94,7 @@ export const useDialog: UseStore<DialogState> = create((set, get) => ({
         get().closeDialog();
       },
       onSecondaryButtonClick: undefined,
+      linkProps,
     }),
 }));
 

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -3,6 +3,37 @@ import * as React from "react";
 import { loadMonaco, monaco } from "../../LazyMonaco";
 // import "./EditorReact.less";
 
+// In development, add a function to window to allow us to get the editor instance for a given element
+if (process.env.NODE_ENV === "development") {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const win = window as any;
+  win._monaco_getEditorForElement =
+    win._monaco_getEditorForElement ||
+    ((element: HTMLElement) => {
+      const editorId = element.dataset["monacoEditorId"];
+      if (!editorId || !win.__monaco_editors || typeof win.__monaco_editors !== "object") {
+        return null;
+      }
+      return win.__monaco_editors[editorId];
+    });
+
+  win._monaco_getEditorContentForElement =
+    win._monaco_getEditorContentForElement ||
+    ((element: HTMLElement) => {
+      const editor = win._monaco_getEditorForElement(element);
+      return editor ? editor.getValue() : null;
+    });
+
+  win._monaco_setEditorContentForElement =
+    win._monaco_setEditorContentForElement ||
+    ((element: HTMLElement, text: string) => {
+      const editor = win._monaco_getEditorForElement(element);
+      if (editor) {
+        editor.setValue(text);
+      }
+    });
+}
+
 interface EditorReactStates {
   showEditor: boolean;
 }
@@ -11,7 +42,7 @@ export interface EditorReactProps {
   content: string;
   isReadOnly: boolean;
   ariaLabel: string; // Sets what will be read to the user to define the control
-  onContentSelected?: (selectedContent: string) => void; // Called when text is selected
+  onContentSelected?: (selectedContent: string, selection: monaco.Selection) => void; // Called when text is selected
   onContentChanged?: (newContent: string) => void; // Called when text is changed
   theme?: string; // Monaco editor theme
   wordWrap?: monaco.editor.IEditorOptions["wordWrap"];
@@ -24,12 +55,34 @@ export interface EditorReactProps {
   monacoContainerStyles?: React.CSSProperties;
   className?: string;
   spinnerClassName?: string;
+
+  modelMarkers?: monaco.editor.IMarkerData[];
+  enableWordWrapContextMenuItem?: boolean; // Enable/Disable "Word Wrap" context menu item
+  onWordWrapChanged?: (wordWrap: "on" | "off") => void; // Called when word wrap is changed
 }
 
 export class EditorReact extends React.Component<EditorReactProps, EditorReactStates> {
+  private static readonly VIEWING_OPTIONS_GROUP_ID = "viewingoptions"; // Group ID for the context menu group
   private rootNode: HTMLElement;
-  private editor: monaco.editor.IStandaloneCodeEditor;
+  public editor: monaco.editor.IStandaloneCodeEditor;
   private selectionListener: monaco.IDisposable;
+  monacoApi: {
+    default: typeof monaco;
+    Emitter: typeof monaco.Emitter;
+    MarkerTag: typeof monaco.MarkerTag;
+    MarkerSeverity: typeof monaco.MarkerSeverity;
+    CancellationTokenSource: typeof monaco.CancellationTokenSource;
+    Uri: typeof monaco.Uri;
+    KeyCode: typeof monaco.KeyCode;
+    KeyMod: typeof monaco.KeyMod;
+    Position: typeof monaco.Position;
+    Range: typeof monaco.Range;
+    Selection: typeof monaco.Selection;
+    SelectionDirection: typeof monaco.SelectionDirection;
+    Token: typeof monaco.Token;
+    editor: typeof monaco.editor;
+    languages: typeof monaco.languages;
+  };
 
   public constructor(props: EditorReactProps) {
     super(props);
@@ -58,7 +111,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
     if (this.props.content !== existingContent) {
       if (this.props.isReadOnly) {
-        this.editor.setValue(this.props.content);
+        this.editor.setValue(this.props.content || ""); // Monaco throws an error if you set the value to undefined.
       } else {
         this.editor.pushUndoStop();
         this.editor.executeEdits("", [
@@ -69,6 +122,8 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
         ]);
       }
     }
+
+    this.monacoApi.editor.setModelMarkers(this.editor.getModel(), "owner", this.props.modelMarkers || []);
   }
 
   public componentWillUnmount(): void {
@@ -82,6 +137,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
           <Spinner size={SpinnerSize.large} className={this.props.spinnerClassName || "spinner"} />
         )}
         <div
+          data-test="EditorReact/Host/Unloaded"
           className={this.props.className || "jsonEditor"}
           style={this.props.monacoContainerStyles}
           ref={(elt: HTMLElement) => this.setRef(elt)}
@@ -92,6 +148,18 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
   protected configureEditor(editor: monaco.editor.IStandaloneCodeEditor) {
     this.editor = editor;
+    this.rootNode.dataset["test"] = "EditorReact/Host/Loaded";
+
+    // In development, we want to be able to access the editor instance from the console
+    if (process.env.NODE_ENV === "development") {
+      this.rootNode.dataset["monacoEditorId"] = this.editor.getId();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const win = window as any;
+
+      win["__monaco_editors"] = win["__monaco_editors"] || {};
+      win["__monaco_editors"][this.editor.getId()] = this.editor;
+    }
+
     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),
@@ -109,10 +177,27 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
       this.selectionListener = this.editor.onDidChangeCursorSelection(
         (event: monaco.editor.ICursorSelectionChangedEvent) => {
           const selectedContent: string = this.editor.getModel().getValueInRange(event.selection);
-          this.props.onContentSelected(selectedContent);
+          this.props.onContentSelected(selectedContent, event.selection);
         },
       );
     }
+
+    if (this.props.enableWordWrapContextMenuItem) {
+      editor.addAction({
+        // An unique identifier of the contributed action.
+        id: "wordwrap",
+        label: "Toggle Word Wrap",
+        contextMenuGroupId: EditorReact.VIEWING_OPTIONS_GROUP_ID,
+        contextMenuOrder: 1,
+        // Method that will be executed when the action is triggered.
+        // @param editor The editor instance is passed in as a convenience
+        run: (ed) => {
+          const newOption = ed.getOption(this.monacoApi.editor.EditorOption.wordWrap) === "on" ? "off" : "on";
+          ed.updateOptions({ wordWrap: newOption });
+          this.props.onWordWrapChanged(newOption);
+        },
+      });
+    }
   }
 
   /**
@@ -133,12 +218,14 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
       lineDecorationsWidth: this.props.lineDecorationsWidth,
       minimap: this.props.minimap,
       scrollBeyondLastLine: this.props.scrollBeyondLastLine,
+      fixedOverflowWidgets: true,
     };
 
     this.rootNode.innerHTML = "";
-    const monaco = await loadMonaco();
+    this.monacoApi = await loadMonaco();
+
     try {
-      createCallback(monaco?.editor?.create(this.rootNode, options));
+      createCallback(this.monacoApi.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);

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

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

src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.test.tsx

@@ -0,0 +1,6 @@
+import "@testing-library/jest-dom";
+
+describe("AddFullTextPolicyForm", () => {
+  //CTODO: add tests
+  it.skip("should render correctly", () => {});
+});

src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.tsx

@@ -0,0 +1,239 @@
+import {
+  DefaultButton,
+  Dropdown,
+  IDropdownOption,
+  IStyleFunctionOrObject,
+  ITextFieldStyleProps,
+  ITextFieldStyles,
+  Label,
+  Stack,
+  TextField,
+} from "@fluentui/react";
+import { FullTextIndex, FullTextPath, FullTextPolicy } from "Contracts/DataModels";
+import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
+import * as React from "react";
+
+export interface FullTextPoliciesComponentProps {
+  fullTextPolicy: FullTextPolicy;
+  onFullTextPathChange: (
+    fullTextPolicy: FullTextPolicy,
+    fullTextIndexes: FullTextIndex[],
+    validationPassed: boolean,
+  ) => void;
+  discardChanges?: boolean;
+  onChangesDiscarded?: () => void;
+}
+
+export interface FullTextPolicyData {
+  path: string;
+  language: string;
+  pathError: string;
+}
+
+const labelStyles = {
+  root: {
+    fontSize: 12,
+  },
+};
+
+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 FullTextPoliciesComponent: React.FunctionComponent<FullTextPoliciesComponentProps> = ({
+  fullTextPolicy,
+  onFullTextPathChange,
+  discardChanges,
+  onChangesDiscarded,
+}): JSX.Element => {
+  const getFullTextPathError = (path: string, index?: number): string => {
+    let error = "";
+    if (!path) {
+      error = "Full text path should not be empty";
+    }
+    if (
+      index >= 0 &&
+      fullTextPathData?.find(
+        (fullTextPath: FullTextPolicyData, dataIndex: number) => dataIndex !== index && fullTextPath.path === path,
+      )
+    ) {
+      error = "Full text path is already defined";
+    }
+    return error;
+  };
+
+  const initializeData = (fullTextPolicy: FullTextPolicy): FullTextPolicyData[] => {
+    if (!fullTextPolicy) {
+      fullTextPolicy = { defaultLanguage: getFullTextLanguageOptions()[0].key as never, fullTextPaths: [] };
+    }
+    return fullTextPolicy.fullTextPaths.map((fullTextPath: FullTextPath) => ({
+      ...fullTextPath,
+      pathError: getFullTextPathError(fullTextPath.path),
+    }));
+  };
+
+  const [fullTextPathData, setFullTextPathData] = React.useState<FullTextPolicyData[]>(initializeData(fullTextPolicy));
+  const [defaultLanguage, setDefaultLanguage] = React.useState<string>(
+    fullTextPolicy ? fullTextPolicy.defaultLanguage : (getFullTextLanguageOptions()[0].key as never),
+  );
+
+  React.useEffect(() => {
+    propagateData();
+  }, [fullTextPathData, defaultLanguage]);
+
+  React.useEffect(() => {
+    if (discardChanges) {
+      setFullTextPathData(initializeData(fullTextPolicy));
+      setDefaultLanguage(fullTextPolicy.defaultLanguage);
+      onChangesDiscarded();
+    }
+  }, [discardChanges]);
+
+  const propagateData = () => {
+    const newFullTextPolicy: FullTextPolicy = {
+      defaultLanguage: defaultLanguage,
+      fullTextPaths: fullTextPathData.map((policy: FullTextPolicyData) => ({
+        path: policy.path,
+        language: policy.language,
+      })),
+    };
+    const fullTextIndexes: FullTextIndex[] = fullTextPathData.map((policy) => ({
+      path: policy.path,
+    }));
+    const validationPassed = fullTextPathData.every((policy: FullTextPolicyData) => policy.pathError === "");
+    onFullTextPathChange(newFullTextPolicy, fullTextIndexes, validationPassed);
+  };
+
+  const onFullTextPathValueChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value.trim();
+    const fullTextPaths = [...fullTextPathData];
+    if (!fullTextPaths[index]?.path && !value.startsWith("/")) {
+      fullTextPaths[index].path = "/" + value;
+    } else {
+      fullTextPaths[index].path = value;
+    }
+    fullTextPaths[index].pathError = getFullTextPathError(value, index);
+    setFullTextPathData(fullTextPaths);
+  };
+
+  const onFullTextPathPolicyChange = (index: number, option: IDropdownOption): void => {
+    const policies = [...fullTextPathData];
+    policies[index].language = option.key as never;
+    setFullTextPathData(policies);
+  };
+
+  const onAdd = () => {
+    setFullTextPathData([
+      ...fullTextPathData,
+      {
+        path: "",
+        language: defaultLanguage,
+        pathError: getFullTextPathError(""),
+      },
+    ]);
+  };
+
+  const onDelete = (index: number) => {
+    const policies = fullTextPathData.filter((_uniqueKey, j) => index !== j);
+    setFullTextPathData(policies);
+  };
+
+  return (
+    <Stack tokens={{ childrenGap: 4 }}>
+      <Stack style={{ marginBottom: 10 }}>
+        <Label styles={labelStyles}>Default language</Label>
+        <Dropdown
+          required={true}
+          styles={dropdownStyles}
+          options={getFullTextLanguageOptions()}
+          selectedKey={defaultLanguage}
+          onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+            setDefaultLanguage(option.key as never)
+          }
+        ></Dropdown>
+      </Stack>
+      {fullTextPathData &&
+        fullTextPathData.length > 0 &&
+        fullTextPathData.map((fullTextPolicy: FullTextPolicyData, index: number) => (
+          <CollapsibleSectionComponent
+            key={index}
+            isExpandedByDefault={true}
+            title={`Full text path ${index + 1}`}
+            showDelete={true}
+            onDelete={() => onDelete(index)}
+          >
+            <Stack horizontal tokens={{ childrenGap: 4 }}>
+              <Stack
+                styles={{
+                  root: {
+                    margin: "0 0 6px 20px !important",
+                    paddingLeft: 20,
+                    width: "80%",
+                    borderLeft: "1px solid",
+                  },
+                }}
+              >
+                <Stack>
+                  <Label styles={labelStyles}>Path</Label>
+                  <TextField
+                    id={`full-text-policy-path-${index + 1}`}
+                    required={true}
+                    placeholder="/fullTextPath1"
+                    styles={textFieldStyles}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onFullTextPathValueChange(index, event)}
+                    value={fullTextPolicy.path || ""}
+                    errorMessage={fullTextPolicy.pathError}
+                  />
+                </Stack>
+                <Stack>
+                  <Label styles={labelStyles}>Language</Label>
+                  <Dropdown
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getFullTextLanguageOptions()}
+                    selectedKey={fullTextPolicy.language}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onFullTextPathPolicyChange(index, option)
+                    }
+                  ></Dropdown>
+                </Stack>
+              </Stack>
+            </Stack>
+          </CollapsibleSectionComponent>
+        ))}
+      <DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}>
+        Add full text path
+      </DefaultButton>
+    </Stack>
+  );
+};
+
+export const getFullTextLanguageOptions = (): IDropdownOption[] => {
+  return [
+    {
+      key: "en-US",
+      text: "English (US)",
+    },
+  ];
+};

src/Explorer/Controls/IndeterminateProgressBar.tsx

@@ -0,0 +1,37 @@
+import { ProgressBar, makeStyles } from "@fluentui/react-components";
+import React from "react";
+
+const useStyles = makeStyles({
+  indeterminateProgressBarRoot: {
+    "@media screen and (prefers-reduced-motion: reduce)": {
+      animationIterationCount: "infinite",
+      animationDuration: "3s",
+      animationName: {
+        "0%": {
+          opacity: ".2", // matches indeterminate bar width
+        },
+        "50%": {
+          opacity: "1",
+        },
+        "100%": {
+          opacity: ".2",
+        },
+      },
+    },
+  },
+  indeterminateProgressBarBar: {
+    "@media screen and (prefers-reduced-motion: reduce)": {
+      maxWidth: "100%",
+    },
+  },
+});
+
+export const IndeterminateProgressBar: React.FC = () => {
+  const styles = useStyles();
+  return (
+    <ProgressBar
+      bar={{ className: styles.indeterminateProgressBarBar }}
+      className={styles.indeterminateProgressBarRoot}
+    />
+  );
+};

src/Explorer/Controls/MessageBanner.tsx

@@ -0,0 +1,68 @@
+import { Button, MessageBar, MessageBarActions, MessageBarBody } from "@fluentui/react-components";
+import { DismissRegular } from "@fluentui/react-icons";
+import React, { useState } from "react";
+
+export enum MessageBannerState {
+  /** The banner should be visible if the triggering conditions are met. */
+  Allowed = "allowed",
+
+  /** The banner has been dismissed by the user and will not be shown until the component is recreated, even if the visibility condition is true. */
+  Dismissed = "dismissed",
+
+  /** The banner has been supressed by the user and will not be shown at all, even if the visibility condition is true. */
+  Suppressed = "suppressed",
+}
+
+export type MessageBannerProps = {
+  /** A CSS class for the root MessageBar component */
+  className: string;
+
+  /** A unique ID for the message that will be used to store it's dismiss/suppress state across sessions. */
+  messageId: string;
+
+  /** The current visibility state for the banner IGNORING the user's dimiss/suppress preference
+   *
+   * If this value is true but the user has dismissed the banner, the banner will NOT be shown.
+   */
+  visible: boolean;
+};
+
+/** A component that shows a message banner which can be dismissed by the user.
+ *
+ * In the future, this can also support persisting the dismissed state in local storage without requiring changes to all the components that use it.
+ *
+ * A message banner can be in three "states":
+ * - Allowed: The banner should be visible if the triggering conditions are met.
+ * - Dismissed: The banner has been dismissed by the user and will not be shown until the component is recreated, even if the visibility condition is true.
+ * - Suppressed: The banner has been supressed by the user and will not be shown at all, even if the visibility condition is true.
+ *
+ * The "Dismissed" state represents the user clicking the "x" in the banner to dismiss it.
+ * The "Suppressed" state represents the user clicking "Don't show this again".
+ */
+export const MessageBanner: React.FC<MessageBannerProps> = ({ visible, className, children }) => {
+  const [state, setState] = useState<MessageBannerState>(MessageBannerState.Allowed);
+
+  if (state !== MessageBannerState.Allowed) {
+    return null;
+  }
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <MessageBar className={className}>
+      <MessageBarBody>{children}</MessageBarBody>
+      <MessageBarActions
+        containerAction={
+          <Button
+            aria-label="dismiss"
+            appearance="transparent"
+            icon={<DismissRegular />}
+            onClick={() => setState(MessageBannerState.Dismissed)}
+          />
+        }
+      ></MessageBarActions>
+    </MessageBar>
+  );
+};

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

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

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

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

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

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

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

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

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

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

src/Explorer/Controls/ProgressModalDialog.tsx

@@ -0,0 +1,79 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  DialogTrigger,
+  Field,
+  ProgressBar,
+} from "@fluentui/react-components";
+import * as React from "react";
+
+interface ProgressModalDialogProps {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  maxValue: number;
+  value: number;
+  dismissText: string;
+  onDismiss: () => void;
+  onCancel?: () => void;
+  /* mode drives the state of the action buttons
+   * inProgress: Show cancel button
+   * completed: Show close button
+   * aborting: Show cancel button, but disabled
+   * aborted: Show close button
+   */
+  mode?: "inProgress" | "completed" | "aborting" | "aborted";
+}
+
+/**
+ * React component that renders a modal dialog with a progress bar.
+ */
+export const ProgressModalDialog: React.FC<ProgressModalDialogProps> = ({
+  isOpen,
+  title,
+  message,
+  maxValue,
+  value,
+  dismissText,
+  onCancel,
+  onDismiss,
+  children,
+  mode = "completed",
+}) => (
+  <Dialog
+    open={isOpen}
+    onOpenChange={(event, data) => {
+      if (!data.open) {
+        onDismiss();
+      }
+    }}
+  >
+    <DialogSurface>
+      <DialogBody>
+        <DialogTitle>{title}</DialogTitle>
+        <DialogContent>
+          <Field validationMessage={message} validationState="none">
+            <ProgressBar max={maxValue} value={value} />
+          </Field>
+          {children}
+        </DialogContent>
+        <DialogActions>
+          {mode === "inProgress" || mode === "aborting" ? (
+            <Button appearance="secondary" onClick={onCancel} disabled={mode === "aborting"}>
+              {dismissText}
+            </Button>
+          ) : (
+            <DialogTrigger disableButtonEnhancement>
+              <Button appearance="primary">Close</Button>
+            </DialogTrigger>
+          )}
+        </DialogActions>
+      </DialogBody>
+    </DialogSurface>
+  </Dialog>
+);

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

@@ -134,7 +134,6 @@ describe("SettingsComponent", () => {
       readSettings: undefined,
       onSettingsClick: undefined,
       loadOffer: undefined,
-      getPendingThroughputSplitNotification: undefined,
     } as ViewModels.Database;
     newCollection.getDatabase = () => newDatabase;
     newCollection.offer = ko.observable(undefined);

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -4,11 +4,11 @@ import {
   ComputedPropertiesComponentProps,
 } from "Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent";
 import {
-  ContainerVectorPolicyComponent,
-  ContainerVectorPolicyComponentProps,
-} from "Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent";
+  ContainerPolicyComponent,
+  ContainerPolicyComponentProps,
+} from "Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent";
 import { useDatabases } from "Explorer/useDatabases";
-import { isVectorSearchEnabled } from "Utils/CapabilityUtils";
+import { isFullTextSearchEnabled, isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { isRunningOnPublicCloud } from "Utils/CloudUtils";
 import * as React from "react";
 import DiscardIcon from "../../../../images/discard.svg";
@@ -105,6 +105,13 @@ export interface SettingsComponentState {
   isSubSettingsSaveable: boolean;
   isSubSettingsDiscardable: boolean;
 
+  vectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy;
+  vectorEmbeddingPolicyBaseline: DataModels.VectorEmbeddingPolicy;
+  fullTextPolicy: DataModels.FullTextPolicy;
+  fullTextPolicyBaseline: DataModels.FullTextPolicy;
+  shouldDiscardContainerPolicies: boolean;
+  isContainerPolicyDirty: boolean;
+
   indexingPolicyContent: DataModels.IndexingPolicy;
   indexingPolicyContentBaseline: DataModels.IndexingPolicy;
   shouldDiscardIndexingPolicy: boolean;
@@ -130,7 +137,6 @@ export interface SettingsComponentState {
   conflictResolutionPolicyProcedureBaseline: string;
   isConflictResolutionDirty: boolean;
 
-  initialNotification: DataModels.Notification;
   selectedTab: SettingsV2TabTypes;
 }
 
@@ -150,6 +156,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private shouldShowIndexingPolicyEditor: boolean;
   private shouldShowPartitionKeyEditor: boolean;
   private isVectorSearchEnabled: boolean;
+  private isFullTextSearchEnabled: boolean;
   private totalThroughputUsed: number;
   public mongoDBCollectionResource: MongoDBCollectionResource;
 
@@ -165,6 +172,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.shouldShowIndexingPolicyEditor = userContext.apiType !== "Cassandra" && userContext.apiType !== "Mongo";
       this.shouldShowPartitionKeyEditor = userContext.apiType === "SQL" && isRunningOnPublicCloud();
       this.isVectorSearchEnabled = isVectorSearchEnabled() && !hasDatabaseSharedThroughput(this.collection);
+      this.isFullTextSearchEnabled = isFullTextSearchEnabled() && !hasDatabaseSharedThroughput(this.collection);
 
       this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
 
@@ -204,6 +212,13 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       isSubSettingsSaveable: false,
       isSubSettingsDiscardable: false,
 
+      vectorEmbeddingPolicy: undefined,
+      vectorEmbeddingPolicyBaseline: undefined,
+      fullTextPolicy: undefined,
+      fullTextPolicyBaseline: undefined,
+      shouldDiscardContainerPolicies: false,
+      isContainerPolicyDirty: false,
+
       indexingPolicyContent: undefined,
       indexingPolicyContentBaseline: undefined,
       shouldDiscardIndexingPolicy: false,
@@ -229,7 +244,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       conflictResolutionPolicyProcedureBaseline: undefined,
       isConflictResolutionDirty: false,
 
-      initialNotification: undefined,
       selectedTab: SettingsV2TabTypes.ScaleTab,
     };
 
@@ -309,6 +323,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     return (
       this.state.isScaleSaveable ||
       this.state.isSubSettingsSaveable ||
+      this.state.isContainerPolicyDirty ||
       this.state.isIndexingPolicyDirty ||
       this.state.isConflictResolutionDirty ||
       this.state.isComputedPropertiesDirty ||
@@ -320,6 +335,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     return (
       this.state.isScaleDiscardable ||
       this.state.isSubSettingsDiscardable ||
+      this.state.isContainerPolicyDirty ||
       this.state.isIndexingPolicyDirty ||
       this.state.isConflictResolutionDirty ||
       this.state.isComputedPropertiesDirty ||
@@ -407,6 +423,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       timeToLiveSeconds: this.state.timeToLiveSecondsBaseline,
       displayedTtlSeconds: this.state.displayedTtlSecondsBaseline,
       geospatialConfigType: this.state.geospatialConfigTypeBaseline,
+      vectorEmbeddingPolicy: this.state.vectorEmbeddingPolicyBaseline,
+      fullTextPolicy: this.state.fullTextPolicyBaseline,
       indexingPolicyContent: this.state.indexingPolicyContentBaseline,
       indexesToAdd: [],
       indexesToDrop: [],
@@ -418,11 +436,13 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       changeFeedPolicy: this.state.changeFeedPolicyBaseline,
       autoPilotThroughput: this.state.autoPilotThroughputBaseline,
       isAutoPilotSelected: this.state.wasAutopilotOriginallySet,
+      shouldDiscardContainerPolicies: true,
       shouldDiscardIndexingPolicy: true,
       isScaleSaveable: false,
       isScaleDiscardable: false,
       isSubSettingsSaveable: false,
       isSubSettingsDiscardable: false,
+      isContainerPolicyDirty: false,
       isIndexingPolicyDirty: false,
       isMongoIndexingPolicySaveable: false,
       isMongoIndexingPolicyDiscardable: false,
@@ -450,9 +470,17 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private onScaleDiscardableChange = (isScaleDiscardable: boolean): void =>
     this.setState({ isScaleDiscardable: isScaleDiscardable });
 
+  private onVectorEmbeddingPolicyChange = (newVectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy): void =>
+    this.setState({ vectorEmbeddingPolicy: newVectorEmbeddingPolicy });
+
+  private onFullTextPolicyChange = (newFullTextPolicy: DataModels.FullTextPolicy): void =>
+    this.setState({ fullTextPolicy: newFullTextPolicy });
+
   private onIndexingPolicyContentChange = (newIndexingPolicy: DataModels.IndexingPolicy): void =>
     this.setState({ indexingPolicyContent: newIndexingPolicy });
 
+  private resetShouldDiscardContainerPolicies = (): void => this.setState({ shouldDiscardContainerPolicies: false });
+
   private resetShouldDiscardIndexingPolicy = (): void => this.setState({ shouldDiscardIndexingPolicy: false });
 
   private logIndexingPolicySuccessMessage = (): void => {
@@ -540,6 +568,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private onSubSettingsDiscardableChange = (isSubSettingsDiscardable: boolean): void =>
     this.setState({ isSubSettingsDiscardable: isSubSettingsDiscardable });
 
+  private onVectorEmbeddingPolicyDirtyChange = (isVectorEmbeddingPolicyDirty: boolean): void =>
+    this.setState({ isContainerPolicyDirty: isVectorEmbeddingPolicyDirty });
+
+  private onFullTextPolicyDirtyChange = (isFullTextPolicyDirty: boolean): void =>
+    this.setState({ isContainerPolicyDirty: isFullTextPolicyDirty });
+
   private onIndexingPolicyDirtyChange = (isIndexingPolicyDirty: boolean): void =>
     this.setState({ isIndexingPolicyDirty: isIndexingPolicyDirty });
 
@@ -693,6 +727,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     const changeFeedPolicy = this.collection.rawDataModel?.changeFeedPolicy
       ? ChangeFeedPolicyState.On
       : ChangeFeedPolicyState.Off;
+    const vectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy =
+      this.collection.vectorEmbeddingPolicy && this.collection.vectorEmbeddingPolicy();
+    const fullTextPolicy: DataModels.FullTextPolicy =
+      this.collection.fullTextPolicy && this.collection.fullTextPolicy();
     const indexingPolicyContent = this.collection.indexingPolicy();
     const conflictResolutionPolicy: DataModels.ConflictResolutionPolicy =
       this.collection.conflictResolutionPolicy && this.collection.conflictResolutionPolicy();
@@ -726,6 +764,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       analyticalStorageTtlSelectionBaseline: analyticalStorageTtlSelection,
       analyticalStorageTtlSeconds: analyticalStorageTtlSeconds,
       analyticalStorageTtlSecondsBaseline: analyticalStorageTtlSeconds,
+      vectorEmbeddingPolicy: vectorEmbeddingPolicy,
+      vectorEmbeddingPolicyBaseline: vectorEmbeddingPolicy,
+      fullTextPolicy: fullTextPolicy,
+      fullTextPolicyBaseline: fullTextPolicy,
       indexingPolicyContent: indexingPolicyContent,
       indexingPolicyContentBaseline: indexingPolicyContent,
       conflictResolutionPolicyMode: conflictResolutionPolicyMode,
@@ -856,6 +898,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
     if (
       this.state.isSubSettingsSaveable ||
+      this.state.isContainerPolicyDirty ||
       this.state.isIndexingPolicyDirty ||
       this.state.isConflictResolutionDirty ||
       this.state.isComputedPropertiesDirty
@@ -877,6 +920,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       const wasIndexingPolicyModified = this.state.isIndexingPolicyDirty;
       newCollection.defaultTtl = defaultTtl;
 
+      newCollection.vectorEmbeddingPolicy = this.state.vectorEmbeddingPolicy;
+
+      newCollection.fullTextPolicy = this.state.fullTextPolicy;
+
       newCollection.indexingPolicy = this.state.indexingPolicyContent;
 
       newCollection.changeFeedPolicy =
@@ -915,6 +962,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.collection.changeFeedPolicy(updatedCollection.changeFeedPolicy);
       this.collection.geospatialConfig(updatedCollection.geospatialConfig);
       this.collection.computedProperties(updatedCollection.computedProperties);
+      this.collection.vectorEmbeddingPolicy(updatedCollection.vectorEmbeddingPolicy);
+      this.collection.fullTextPolicy(updatedCollection.fullTextPolicy);
 
       if (wasIndexingPolicyModified) {
         await this.refreshIndexTransformationProgress();
@@ -923,6 +972,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.setState({
         isSubSettingsSaveable: false,
         isSubSettingsDiscardable: false,
+        isContainerPolicyDirty: false,
         isIndexingPolicyDirty: false,
         isConflictResolutionDirty: false,
         isComputedPropertiesDirty: false,
@@ -1052,7 +1102,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onMaxAutoPilotThroughputChange: this.onMaxAutoPilotThroughputChange,
       onScaleSaveableChange: this.onScaleSaveableChange,
       onScaleDiscardableChange: this.onScaleDiscardableChange,
-      initialNotification: this.props.settingsTab.pendingNotification(),
       throughputError: this.state.throughputError,
     };
 
@@ -1094,6 +1143,21 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onSubSettingsDiscardableChange: this.onSubSettingsDiscardableChange,
     };
 
+    const containerPolicyComponentProps: ContainerPolicyComponentProps = {
+      vectorEmbeddingPolicy: this.state.vectorEmbeddingPolicy,
+      vectorEmbeddingPolicyBaseline: this.state.vectorEmbeddingPolicyBaseline,
+      onVectorEmbeddingPolicyChange: this.onVectorEmbeddingPolicyChange,
+      onVectorEmbeddingPolicyDirtyChange: this.onVectorEmbeddingPolicyDirtyChange,
+      isVectorSearchEnabled: this.isVectorSearchEnabled,
+      fullTextPolicy: this.state.fullTextPolicy,
+      fullTextPolicyBaseline: this.state.fullTextPolicyBaseline,
+      onFullTextPolicyChange: this.onFullTextPolicyChange,
+      onFullTextPolicyDirtyChange: this.onFullTextPolicyDirtyChange,
+      isFullTextSearchEnabled: this.isFullTextSearchEnabled,
+      shouldDiscardContainerPolicies: this.state.shouldDiscardContainerPolicies,
+      resetShouldDiscardContainerPolicyChange: this.resetShouldDiscardContainerPolicies,
+    };
+
     const indexingPolicyComponentProps: IndexingPolicyComponentProps = {
       shouldDiscardIndexingPolicy: this.state.shouldDiscardIndexingPolicy,
       resetShouldDiscardIndexingPolicy: this.resetShouldDiscardIndexingPolicy,
@@ -1151,10 +1215,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,10 +1228,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       content: <SubSettingsComponent {...subSettingsComponentProps} />,
     });
 
-    if (this.isVectorSearchEnabled) {
+    if (this.isVectorSearchEnabled || this.isFullTextSearchEnabled) {
       tabs.push({
         tab: SettingsV2TabTypes.ContainerVectorPolicyTab,
-        content: <ContainerVectorPolicyComponent {...containerVectorPolicyProps} />,
+        content: <ContainerPolicyComponent {...containerPolicyComponentProps} />,
       });
     }
 

src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.text.tsx

@@ -0,0 +1,6 @@
+import "@testing-library/jest-dom";
+
+describe("ContainerPolicyComponent", () => {
+  //CTODO: add tests
+  it.skip("should render correctly", () => {});
+});

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

@@ -0,0 +1,163 @@
+import { DefaultButton, Pivot, PivotItem, Stack } from "@fluentui/react";
+import { FullTextPolicy, VectorEmbedding, VectorEmbeddingPolicy } from "Contracts/DataModels";
+import {
+  FullTextPoliciesComponent,
+  getFullTextLanguageOptions,
+} from "Explorer/Controls/FullTextSeach/FullTextPoliciesComponent";
+import { titleAndInputStackProps } from "Explorer/Controls/Settings/SettingsRenderUtils";
+import { ContainerPolicyTabTypes, isDirty } from "Explorer/Controls/Settings/SettingsUtils";
+import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
+import React from "react";
+
+export interface ContainerPolicyComponentProps {
+  vectorEmbeddingPolicy: VectorEmbeddingPolicy;
+  vectorEmbeddingPolicyBaseline: VectorEmbeddingPolicy;
+  onVectorEmbeddingPolicyChange: (newVectorEmbeddingPolicy: VectorEmbeddingPolicy) => void;
+  onVectorEmbeddingPolicyDirtyChange: (isVectorEmbeddingPolicyDirty: boolean) => void;
+  isVectorSearchEnabled: boolean;
+  fullTextPolicy: FullTextPolicy;
+  fullTextPolicyBaseline: FullTextPolicy;
+  onFullTextPolicyChange: (newFullTextPolicy: FullTextPolicy) => void;
+  onFullTextPolicyDirtyChange: (isFullTextPolicyDirty: boolean) => void;
+  isFullTextSearchEnabled: boolean;
+  shouldDiscardContainerPolicies: boolean;
+  resetShouldDiscardContainerPolicyChange: () => void;
+}
+
+export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> = ({
+  vectorEmbeddingPolicy,
+  vectorEmbeddingPolicyBaseline,
+  onVectorEmbeddingPolicyChange,
+  onVectorEmbeddingPolicyDirtyChange,
+  isVectorSearchEnabled,
+  fullTextPolicy,
+  fullTextPolicyBaseline,
+  onFullTextPolicyChange,
+  onFullTextPolicyDirtyChange,
+  isFullTextSearchEnabled,
+  shouldDiscardContainerPolicies,
+  resetShouldDiscardContainerPolicyChange,
+}) => {
+  const [selectedTab, setSelectedTab] = React.useState<ContainerPolicyTabTypes>(
+    ContainerPolicyTabTypes.VectorPolicyTab,
+  );
+  const [vectorEmbeddings, setVectorEmbeddings] = React.useState<VectorEmbedding[]>();
+  const [vectorEmbeddingsBaseline, setVectorEmbeddingsBaseline] = React.useState<VectorEmbedding[]>();
+  const [discardVectorChanges, setDiscardVectorChanges] = React.useState<boolean>(false);
+  const [fullTextSearchPolicy, setFullTextSearchPolicy] = React.useState<FullTextPolicy>();
+  const [fullTextSearchPolicyBaseline, setFullTextSearchPolicyBaseline] = React.useState<FullTextPolicy>();
+  const [discardFullTextChanges, setDiscardFullTextChanges] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    setVectorEmbeddings(vectorEmbeddingPolicy?.vectorEmbeddings);
+    setVectorEmbeddingsBaseline(vectorEmbeddingPolicyBaseline?.vectorEmbeddings);
+  }, [vectorEmbeddingPolicy]);
+
+  React.useEffect(() => {
+    setFullTextSearchPolicy(fullTextPolicy);
+    setFullTextSearchPolicyBaseline(fullTextPolicyBaseline);
+  }, [fullTextPolicy, fullTextPolicyBaseline]);
+
+  React.useEffect(() => {
+    if (shouldDiscardContainerPolicies) {
+      setVectorEmbeddings(vectorEmbeddingPolicyBaseline?.vectorEmbeddings);
+      setDiscardVectorChanges(true);
+      setFullTextSearchPolicy(fullTextPolicyBaseline);
+      setDiscardFullTextChanges(true);
+      resetShouldDiscardContainerPolicyChange();
+    }
+  });
+
+  const checkAndSendVectorEmbeddingPoliciesToSettings = (newVectorEmbeddings: VectorEmbedding[]): void => {
+    if (isDirty(newVectorEmbeddings, vectorEmbeddingsBaseline)) {
+      onVectorEmbeddingPolicyDirtyChange(true);
+      onVectorEmbeddingPolicyChange({ vectorEmbeddings: newVectorEmbeddings });
+    } else {
+      resetShouldDiscardContainerPolicyChange();
+    }
+  };
+
+  const checkAndSendFullTextPolicyToSettings = (newFullTextPolicy: FullTextPolicy): void => {
+    if (isDirty(newFullTextPolicy, fullTextSearchPolicyBaseline)) {
+      onFullTextPolicyDirtyChange(true);
+      onFullTextPolicyChange(newFullTextPolicy);
+    } else {
+      resetShouldDiscardContainerPolicyChange();
+    }
+  };
+
+  const onVectorChangesDiscarded = (): void => {
+    setDiscardVectorChanges(false);
+  };
+
+  const onFullTextChangesDiscarded = (): void => {
+    setDiscardFullTextChanges(false);
+  };
+
+  const onPivotChange = (item: PivotItem): void => {
+    const selectedTab = ContainerPolicyTabTypes[item.props.itemKey as keyof typeof ContainerPolicyTabTypes];
+    setSelectedTab(selectedTab);
+  };
+
+  return (
+    <div>
+      <Pivot onLinkClick={onPivotChange} selectedKey={ContainerPolicyTabTypes[selectedTab]}>
+        {isVectorSearchEnabled && (
+          <PivotItem
+            itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.VectorPolicyTab]}
+            style={{ marginTop: 20 }}
+            headerText="Vector Policy"
+          >
+            <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
+              {vectorEmbeddings && (
+                <VectorEmbeddingPoliciesComponent
+                  disabled={true}
+                  vectorEmbeddings={vectorEmbeddings}
+                  vectorIndexes={undefined}
+                  onVectorEmbeddingChange={(vectorEmbeddings: VectorEmbedding[]) =>
+                    checkAndSendVectorEmbeddingPoliciesToSettings(vectorEmbeddings)
+                  }
+                  discardChanges={discardVectorChanges}
+                  onChangesDiscarded={onVectorChangesDiscarded}
+                />
+              )}
+            </Stack>
+          </PivotItem>
+        )}
+        {isFullTextSearchEnabled && (
+          <PivotItem
+            itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.FullTextPolicyTab]}
+            style={{ marginTop: 20 }}
+            headerText="Full Text Policy"
+          >
+            <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
+              {fullTextSearchPolicy ? (
+                <FullTextPoliciesComponent
+                  fullTextPolicy={fullTextSearchPolicy}
+                  onFullTextPathChange={(newFullTextPolicy: FullTextPolicy) =>
+                    checkAndSendFullTextPolicyToSettings(newFullTextPolicy)
+                  }
+                  discardChanges={discardFullTextChanges}
+                  onChangesDiscarded={onFullTextChangesDiscarded}
+                />
+              ) : (
+                <DefaultButton
+                  id={"create-full-text-policy"}
+                  styles={{ root: { fontSize: 12 } }}
+                  onClick={() => {
+                    checkAndSendFullTextPolicyToSettings({
+                      defaultLanguage: getFullTextLanguageOptions()[0].key as never,
+                      fullTextPaths: [],
+                    });
+                  }}
+                >
+                  Create new full text search policy
+                </DefaultButton>
+              )}
+            </Stack>
+          </PivotItem>
+        )}
+      </Pivot>
+    </div>
+  );
+};

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

@@ -120,11 +120,6 @@ 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>
         )}

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

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

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

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

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

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

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

@@ -1,18 +1,10 @@
-import { shallow } from "enzyme";
-import ko from "knockout";
-import React from "react";
 import * as Constants from "../../../../Common/Constants";
-import * as DataModels from "../../../../Contracts/DataModels";
 import { updateUserContext } from "../../../../UserContext";
 import Explorer from "../../../Explorer";
-import { throughputUnit } from "../SettingsRenderUtils";
 import { collection } from "../TestUtils";
 import { ScaleComponent, ScaleComponentProps } from "./ScaleComponent";
-import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
 
 describe("ScaleComponent", () => {
-  const targetThroughput = 6000;
-
   const baseProps: ScaleComponentProps = {
     collection: collection,
     database: undefined,
@@ -36,39 +28,8 @@ describe("ScaleComponent", () => {
     onScaleDiscardableChange: () => {
       return;
     },
-    initialNotification: {
-      description: `Throughput update for ${targetThroughput} ${throughputUnit}`,
-    } as DataModels.Notification,
   };
 
-  it("renders with correct initial notification", () => {
-    let wrapper = shallow(<ScaleComponent {...baseProps} />);
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.exists(ThroughputInputAutoPilotV3Component)).toEqual(true);
-    expect(wrapper.exists("#throughputApplyLongDelayMessage")).toEqual(true);
-    expect(wrapper.exists("#throughputApplyShortDelayMessage")).toEqual(false);
-    expect(wrapper.find("#throughputApplyLongDelayMessage").html()).toContain(targetThroughput);
-
-    const newCollection = { ...collection };
-    const maxThroughput = 5000;
-    newCollection.offer = ko.observable({
-      manualThroughput: undefined,
-      autoscaleMaxThroughput: maxThroughput,
-      minimumThroughput: 400,
-      id: "offer",
-      offerReplacePending: true,
-    });
-    const newProps = {
-      ...baseProps,
-      initialNotification: undefined as DataModels.Notification,
-      collection: newCollection,
-    };
-    wrapper = shallow(<ScaleComponent {...newProps} />);
-    expect(wrapper.exists("#throughputApplyShortDelayMessage")).toEqual(true);
-    expect(wrapper.exists("#throughputApplyLongDelayMessage")).toEqual(false);
-    expect(wrapper.find("#throughputApplyShortDelayMessage").html()).toContain(maxThroughput);
-  });
-
   it("autoScale disabled", () => {
     const scaleComponent = new ScaleComponent(baseProps);
     expect(scaleComponent.isAutoScaleEnabled()).toEqual(false);

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

@@ -10,7 +10,6 @@ import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
 import { isRunningOnNationalCloud } from "../../../../Utils/CloudUtils";
 import {
   getTextFieldStyles,
-  getThroughputApplyLongDelayMessage,
   getThroughputApplyShortDelayMessage,
   subComponentStackProps,
   throughputUnit,
@@ -34,7 +33,6 @@ export interface ScaleComponentProps {
   onMaxAutoPilotThroughputChange: (newThroughput: number) => void;
   onScaleSaveableChange: (isScaleSaveable: boolean) => void;
   onScaleDiscardableChange: (isScaleDiscardable: boolean) => void;
-  initialNotification: DataModels.Notification;
   throughputError?: string;
 }
 
@@ -102,10 +100,6 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   };
 
   public getInitialNotificationElement = (): JSX.Element => {
-    if (this.props.initialNotification) {
-      return this.getLongDelayMessage();
-    }
-
     if (this.offer?.offerReplacePending) {
       const throughput = this.offer.manualThroughput || this.offer.autoscaleMaxThroughput;
       return getThroughputApplyShortDelayMessage(
@@ -120,26 +114,6 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
     return undefined;
   };
 
-  public getLongDelayMessage = (): JSX.Element => {
-    const matches: string[] = this.props.initialNotification?.description.match(
-      `Throughput update for (.*) ${throughputUnit}`,
-    );
-
-    const throughput = this.props.throughputBaseline;
-    const targetThroughput: number = matches.length > 1 && Number(matches[1]);
-    if (targetThroughput) {
-      return getThroughputApplyLongDelayMessage(
-        this.props.wasAutopilotOriginallySet,
-        throughput,
-        throughputUnit,
-        this.databaseId,
-        this.collectionId,
-        targetThroughput,
-      );
-    }
-    return <></>;
-  };
-
   private getThroughputInputComponent = (): JSX.Element => (
     <ThroughputInputAutoPilotV3Component
       databaseAccount={userContext?.databaseAccount}

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

@@ -3,14 +3,14 @@
 exports[`ComputedPropertiesComponent renders 1`] = `
 <Stack
   tokens={
-    Object {
+    {
       "childrenGap": 5,
     }
   }
 >
   <Text
     style={
-      Object {
+      {
         "marginBottom": "10px",
         "marginLeft": "30px",
       }

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

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

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

@@ -3,7 +3,7 @@
 exports[`IndexingPolicyComponent renders 1`] = `
 <Stack
   tokens={
-    Object {
+    {
       "childrenGap": 5,
     }
   }

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

@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ScaleComponent renders with correct initial notification 1`] = `
-<Stack
-  tokens={
-    Object {
-      "childrenGap": 20,
-    }
-  }
->
-  <StyledMessageBar
-    messageBarType={5}
-  >
-    <Text
-      id="throughputApplyLongDelayMessage"
-      styles={
-        Object {
-          "root": Object {
-            "color": "windowtext",
-            "fontSize": 14,
-          },
-        }
-      }
-    >
-      A request to increase the throughput is currently in progress. This operation will take 1-3 business days to complete. View the latest status in Notifications.
-      <br />
-      Database: test, Container: test 
-      , Current autoscale throughput: 100 - 1000 RU/s, Target autoscale throughput: 600 - 6000 RU/s
-    </Text>
-  </StyledMessageBar>
-  <Stack
-    tokens={
-      Object {
-        "childrenGap": 20,
-      }
-    }
-  >
-    <ThroughputInputAutoPilotV3Component
-      canExceedMaximumValue={true}
-      collectionName="test"
-      databaseName="test"
-      isAutoPilotSelected={false}
-      isEmulator={false}
-      isEnabled={true}
-      isFixed={false}
-      label="Throughput (6,000 - unlimited RU/s)"
-      maxAutoPilotThroughput={4000}
-      maxAutoPilotThroughputBaseline={4000}
-      maximum={1000000}
-      minimum={6000}
-      onAutoPilotSelected={[Function]}
-      onMaxAutoPilotThroughputChange={[Function]}
-      onScaleDiscardableChange={[Function]}
-      onScaleSaveableChange={[Function]}
-      onThroughputChange={[Function]}
-      spendAckChecked={false}
-      throughput={1000}
-      throughputBaseline={1000}
-      usageSizeInKB={100}
-      wasAutopilotOriginallySet={true}
-    />
-  </Stack>
-</Stack>
-`;

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

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

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

@@ -44,7 +44,6 @@ describe("SettingsUtils", () => {
         readSettings: undefined,
         onSettingsClick: undefined,
         loadOffer: undefined,
-        getPendingThroughputSplitNotification: undefined,
       } as ViewModels.Database;
     };
     newCollection.offer(undefined);

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -4,7 +4,14 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import { MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 
 const zeroValue = 0;
-export type isDirtyTypes = boolean | string | number | DataModels.IndexingPolicy | DataModels.ComputedProperties;
+export type isDirtyTypes =
+  | boolean
+  | string
+  | number
+  | DataModels.IndexingPolicy
+  | DataModels.ComputedProperties
+  | DataModels.VectorEmbedding[]
+  | DataModels.FullTextPolicy;
 export const TtlOff = "off";
 export const TtlOn = "on";
 export const TtlOnNoDefault = "on-nodefault";
@@ -50,6 +57,11 @@ export enum SettingsV2TabTypes {
   ContainerVectorPolicyTab,
 }
 
+export enum ContainerPolicyTabTypes {
+  VectorPolicyTab,
+  FullTextPolicyTab,
+}
+
 export interface IsComponentDirtyResult {
   isSaveable: boolean;
   isDiscardable: boolean;
@@ -154,7 +166,7 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
     case SettingsV2TabTypes.ComputedPropertiesTab:
       return "Computed Properties";
     case SettingsV2TabTypes.ContainerVectorPolicyTab:
-      return "Container Vector Policy (preview)";
+      return "Container Policies";
     default:
       throw new Error(`Unknown tab ${tab}`);
   }

src/Explorer/Controls/Settings/TestUtils.tsx

@@ -46,6 +46,8 @@ export const collection = {
       query: "query",
     },
   ]),
+  vectorEmbeddingPolicy: ko.observable<DataModels.VectorEmbeddingPolicy>({} as DataModels.VectorEmbeddingPolicy),
+  fullTextPolicy: ko.observable<DataModels.FullTextPolicy>({} as DataModels.FullTextPolicy),
   readSettings: () => {
     return;
   },

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

@@ -16,14 +16,14 @@ exports[`SettingsComponent renders 1`] = `
         itemKey="ScaleTab"
         key="ScaleTab"
         style={
-          Object {
+          {
             "marginTop": 20,
           }
         }
       >
         <ScaleComponent
           collection={
-            Object {
+            {
               "analyticalStorageTtl": [Function],
               "changeFeedPolicy": [Function],
               "computedProperties": [Function],
@@ -36,7 +36,7 @@ exports[`SettingsComponent renders 1`] = `
                 "onRefreshResourcesClick": [Function],
                 "phoenixClient": PhoenixClient {
                   "armResourceId": undefined,
-                  "retryOptions": Object {
+                  "retryOptions": {
                     "maxTimeout": 5000,
                     "minTimeout": 5000,
                     "retries": 3,
@@ -55,22 +55,24 @@ exports[`SettingsComponent renders 1`] = `
               },
               "databaseId": "test",
               "defaultTtl": [Function],
+              "fullTextPolicy": [Function],
               "geospatialConfig": [Function],
               "getDatabase": [Function],
               "id": [Function],
               "indexingPolicy": [Function],
               "offer": [Function],
-              "partitionKey": Object {
+              "partitionKey": {
                 "kind": "hash",
-                "paths": Array [],
+                "paths": [],
                 "version": 2,
               },
-              "partitionKeyProperties": Array [
+              "partitionKeyProperties": [
                 "partitionKey",
               ],
               "readSettings": [Function],
-              "uniqueKeyPolicy": Object {},
+              "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
+              "vectorEmbeddingPolicy": [Function],
             }
           }
           isAutoPilotSelected={false}
@@ -90,7 +92,7 @@ exports[`SettingsComponent renders 1`] = `
         itemKey="SubSettingsTab"
         key="SubSettingsTab"
         style={
-          Object {
+          {
             "marginTop": 20,
           }
         }
@@ -100,7 +102,7 @@ exports[`SettingsComponent renders 1`] = `
           changeFeedPolicyBaseline="Off"
           changeFeedPolicyVisible={false}
           collection={
-            Object {
+            {
               "analyticalStorageTtl": [Function],
               "changeFeedPolicy": [Function],
               "computedProperties": [Function],
@@ -113,7 +115,7 @@ exports[`SettingsComponent renders 1`] = `
                 "onRefreshResourcesClick": [Function],
                 "phoenixClient": PhoenixClient {
                   "armResourceId": undefined,
-                  "retryOptions": Object {
+                  "retryOptions": {
                     "maxTimeout": 5000,
                     "minTimeout": 5000,
                     "retries": 3,
@@ -132,22 +134,24 @@ exports[`SettingsComponent renders 1`] = `
               },
               "databaseId": "test",
               "defaultTtl": [Function],
+              "fullTextPolicy": [Function],
               "geospatialConfig": [Function],
               "getDatabase": [Function],
               "id": [Function],
               "indexingPolicy": [Function],
               "offer": [Function],
-              "partitionKey": Object {
+              "partitionKey": {
                 "kind": "hash",
-                "paths": Array [],
+                "paths": [],
                 "version": 2,
               },
-              "partitionKeyProperties": Array [
+              "partitionKeyProperties": [
                 "partitionKey",
               ],
               "readSettings": [Function],
-              "uniqueKeyPolicy": Object {},
+              "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
+              "vectorEmbeddingPolicy": [Function],
             }
           }
           displayedTtlSeconds="5"
@@ -174,25 +178,25 @@ exports[`SettingsComponent renders 1`] = `
         itemKey="IndexingPolicyTab"
         key="IndexingPolicyTab"
         style={
-          Object {
+          {
             "marginTop": 20,
           }
         }
       >
         <IndexingPolicyComponent
           indexingPolicyContent={
-            Object {
+            {
               "automatic": true,
-              "excludedPaths": Array [],
-              "includedPaths": Array [],
+              "excludedPaths": [],
+              "includedPaths": [],
               "indexingMode": "consistent",
             }
           }
           indexingPolicyContentBaseline={
-            Object {
+            {
               "automatic": true,
-              "excludedPaths": Array [],
-              "includedPaths": Array [],
+              "excludedPaths": [],
+              "includedPaths": [],
               "indexingMode": "consistent",
             }
           }
@@ -210,14 +214,14 @@ exports[`SettingsComponent renders 1`] = `
         itemKey="PartitionKeyTab"
         key="PartitionKeyTab"
         style={
-          Object {
+          {
             "marginTop": 20,
           }
         }
       >
         <PartitionKeyComponent
           collection={
-            Object {
+            {
               "analyticalStorageTtl": [Function],
               "changeFeedPolicy": [Function],
               "computedProperties": [Function],
@@ -230,7 +234,7 @@ exports[`SettingsComponent renders 1`] = `
                 "onRefreshResourcesClick": [Function],
                 "phoenixClient": PhoenixClient {
                   "armResourceId": undefined,
-                  "retryOptions": Object {
+                  "retryOptions": {
                     "maxTimeout": 5000,
                     "minTimeout": 5000,
                     "retries": 3,
@@ -249,22 +253,24 @@ exports[`SettingsComponent renders 1`] = `
               },
               "databaseId": "test",
               "defaultTtl": [Function],
+              "fullTextPolicy": [Function],
               "geospatialConfig": [Function],
               "getDatabase": [Function],
               "id": [Function],
               "indexingPolicy": [Function],
               "offer": [Function],
-              "partitionKey": Object {
+              "partitionKey": {
                 "kind": "hash",
-                "paths": Array [],
+                "paths": [],
                 "version": 2,
               },
-              "partitionKeyProperties": Array [
+              "partitionKeyProperties": [
                 "partitionKey",
               ],
               "readSettings": [Function],
-              "uniqueKeyPolicy": Object {},
+              "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
+              "vectorEmbeddingPolicy": [Function],
             }
           }
           explorer={
@@ -276,7 +282,7 @@ exports[`SettingsComponent renders 1`] = `
               "onRefreshResourcesClick": [Function],
               "phoenixClient": PhoenixClient {
                 "armResourceId": undefined,
-                "retryOptions": Object {
+                "retryOptions": {
                   "maxTimeout": 5000,
                   "minTimeout": 5000,
                   "retries": 3,
@@ -301,23 +307,23 @@ exports[`SettingsComponent renders 1`] = `
         itemKey="ComputedPropertiesTab"
         key="ComputedPropertiesTab"
         style={
-          Object {
+          {
             "marginTop": 20,
           }
         }
       >
         <ComputedPropertiesComponent
           computedPropertiesContent={
-            Array [
-              Object {
+            [
+              {
                 "name": "queryName",
                 "query": "query",
               },
             ]
           }
           computedPropertiesContentBaseline={
-            Array [
-              Object {
+            [
+              {
                 "name": "queryName",
                 "query": "query",
               },

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

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

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

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

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

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

src/Explorer/Controls/Tabs/TabComponent.less

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

src/Explorer/Controls/Tabs/TabComponent.tsx

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

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

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

src/Explorer/Controls/TreeComponent/Styles.ts

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

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

@@ -1,4 +1,4 @@
-import { TreeItem, TreeItemLayout, tokens } from "@fluentui/react-components";
+import { TreeItem, TreeItemLayout } from "@fluentui/react-components";
 import PromiseSource from "Utils/PromiseSource";
 import { mount, shallow } from "enzyme";
 import React from "react";
@@ -9,7 +9,7 @@ function generateTestNode(id: string, additionalProps?: Partial<TreeNode>): Tree
   const node: TreeNode = {
     id,
     label: `${id}Label`,
-    className: `${id}Class`,
+    className: "nodeIcon",
     iconSrc: `${id}Icon`,
     onClick: jest.fn().mockName(`${id}Click`),
     ...additionalProps,
@@ -20,7 +20,7 @@ function generateTestNode(id: string, additionalProps?: Partial<TreeNode>): Tree
 describe("TreeNodeComponent", () => {
   it("renders a single node", () => {
     const node = generateTestNode("root");
-    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
     expect(component).toMatchSnapshot();
 
     // The "click" handler is actually attached to onOpenChange, with a type of "Click".
@@ -45,7 +45,7 @@ describe("TreeNodeComponent", () => {
         },
       ],
     });
-    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
     expect(component).toMatchSnapshot();
   });
 
@@ -54,7 +54,7 @@ describe("TreeNodeComponent", () => {
     const node = generateTestNode("root", {
       onExpanded: () => loading.promise,
     });
-    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
 
     act(() => {
       component
@@ -72,10 +72,7 @@ describe("TreeNodeComponent", () => {
     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,
-    );
+    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
     expect(component).toMatchSnapshot();
   });
 
@@ -89,10 +86,7 @@ describe("TreeNodeComponent", () => {
         generateTestNode("child2"),
       ],
     });
-    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
-    expect(component.find(TreeItemLayout).props().style?.backgroundColor).toStrictEqual(
-      tokens.colorNeutralBackground1Selected,
-    );
+    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
     expect(component).toMatchSnapshot();
   });
 
@@ -111,7 +105,7 @@ describe("TreeNodeComponent", () => {
         generateTestNode("child2"),
       ],
     });
-    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
     expect(component.find(TreeItemLayout).props().style?.backgroundColor).toBeUndefined();
     expect(component).toMatchSnapshot();
   });
@@ -120,7 +114,7 @@ describe("TreeNodeComponent", () => {
     const node = generateTestNode("root", {
       iconSrc: "the-icon.svg",
     });
-    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
     expect(component).toMatchSnapshot();
   });
 
@@ -134,7 +128,7 @@ describe("TreeNodeComponent", () => {
         generateTestNode("child2"),
       ],
     });
-    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
     expect(component).toMatchSnapshot();
   });
 
@@ -148,7 +142,7 @@ describe("TreeNodeComponent", () => {
         generateTestNode("child2"),
       ],
     });
-    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
     expect(component).toMatchSnapshot();
   });
 
@@ -175,7 +169,7 @@ describe("TreeNodeComponent", () => {
         }),
       ],
     });
-    const component = mount(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    const component = mount(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
 
     // Find and expand the child3Expanding node
     const expandingChild = component.find(TreeItem).filterWhere((n) => n.props().value === "root/child3ExpandingLabel");

src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx

@@ -11,17 +11,19 @@ import {
   Tree,
   TreeItem,
   TreeItemLayout,
+  TreeItemValue,
   TreeOpenChangeData,
   TreeOpenChangeEvent,
+  mergeClasses,
 } from "@fluentui/react-components";
-import { MoreHorizontal20Regular } from "@fluentui/react-icons";
-import { tokens } from "@fluentui/react-theme";
+import { ChevronDown20Regular, ChevronRight20Regular, MoreHorizontal20Regular } from "@fluentui/react-icons";
+import { TreeStyleName, useTreeStyles } from "Explorer/Controls/TreeComponent/Styles";
 import * as React from "react";
 import { useCallback } from "react";
 
 export interface TreeNodeMenuItem {
   label: string;
-  onClick: () => void;
+  onClick: (value?: React.RefObject<HTMLElement>) => void;
   iconSrc?: string;
   isDisabled?: boolean;
   styleClass?: string;
@@ -32,15 +34,14 @@ export interface TreeNode {
   id?: string;
   children?: TreeNode[];
   contextMenu?: TreeNodeMenuItem[];
-  iconSrc?: string;
+  iconSrc?: string | JSX.Element;
   isExpanded?: boolean;
-  className?: string;
+  className?: TreeStyleName;
   isAlphaSorted?: boolean;
   // data?: any; // Piece of data corresponding to this node
   timestamp?: number;
   isLeavesParentsSeparate?: boolean; // Display parents together first, then leaves
   isLoading?: boolean;
-  isScrollable?: boolean;
   isSelected?: () => boolean;
   onClick?: () => void; // Only if a leaf, other click will expand/collapse
   onExpanded?: () => Promise<void>;
@@ -52,6 +53,7 @@ export interface TreeNodeComponentProps {
   node: TreeNode;
   className?: string;
   treeNodeId: string;
+  openItems: TreeItemValue[];
 }
 
 /** Function that returns true if any descendant (at any depth) of this node is selected. */
@@ -66,13 +68,14 @@ function isAnyDescendantSelected(node: TreeNode): boolean {
   );
 }
 
-const getTreeIcon = (iconSrc: string): JSX.Element => <img src={iconSrc} alt="" style={{ width: 16, height: 16 }} />;
-
 export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
   node,
   treeNodeId,
+  openItems,
 }: TreeNodeComponentProps): JSX.Element => {
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
+  const contextMenuRef = React.useRef<HTMLButtonElement>(null);
+  const treeStyles = useTreeStyles();
 
   const getSortedChildren = (treeNode: TreeNode): TreeNode[] => {
     if (!treeNode || !treeNode.children) {
@@ -139,51 +142,80 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
       data-test={`TreeNode/ContextMenuItem:${menuItem.label}`}
       disabled={menuItem.isDisabled}
       key={menuItem.label}
-      onClick={menuItem.onClick}
+      onClick={() => menuItem.onClick(contextMenuRef)}
     >
       {menuItem.label}
     </MenuItem>
   ));
 
+  // We use the expandIcon slot to hold the node icon too.
+  // We only show a node icon for leaf nodes, even if a branch node has an iconSrc.
+  const treeIcon =
+    node.iconSrc === undefined ? undefined : typeof node.iconSrc === "string" ? (
+      <img src={node.iconSrc} className={treeStyles.nodeIcon} alt="" />
+    ) : (
+      node.iconSrc
+    );
+
+  const expandIcon = isLoading ? (
+    <Spinner size="extra-tiny" />
+  ) : !isBranch ? undefined : openItems.includes(treeNodeId) ? (
+    <ChevronDown20Regular data-test="TreeNode/CollapseIcon" />
+  ) : (
+    <ChevronRight20Regular data-text="TreeNode/ExpandIcon" />
+  );
+
   const treeItem = (
     <TreeItem
       data-test={`TreeNodeContainer:${treeNodeId}`}
       value={treeNodeId}
       itemType={isBranch ? "branch" : "leaf"}
       onOpenChange={onOpenChange}
+      className={treeStyles.treeItem}
     >
       <TreeItemLayout
-        className={node.className}
+        className={mergeClasses(
+          treeStyles.treeItemLayout,
+          shouldShowAsSelected && treeStyles.selectedItem,
+          node.className && treeStyles[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>
-          )
+          contextMenuItems.length > 0 && {
+            className: treeStyles.actionsButtonContainer,
+            children: (
+              <Menu onOpenChange={onMenuOpenChange}>
+                <MenuTrigger disableButtonEnhancement>
+                  <Button
+                    aria-label="More options"
+                    className={mergeClasses(treeStyles.actionsButton, shouldShowAsSelected && treeStyles.selectedItem)}
+                    data-test="TreeNode/ContextMenuTrigger"
+                    appearance="subtle"
+                    ref={contextMenuRef}
+                    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,
-        }}
+        iconBefore={treeIcon}
+        expandIcon={expandIcon}
       >
-        {node.label}
+        <span className={treeStyles.nodeLabel}>{node.label}</span>
       </TreeItemLayout>
       {!node.isLoading && node.children?.length > 0 && (
-        <Tree style={{ overflow: node.isScrollable ? "auto" : undefined }}>
+        <Tree data-test={`Tree:${treeNodeId}`} className={treeStyles.tree}>
           {getSortedChildren(node).map((childNode: TreeNode) => (
-            <TreeNodeComponent key={childNode.label} node={childNode} treeNodeId={`${treeNodeId}/${childNode.label}`} />
+            <TreeNodeComponent
+              openItems={openItems}
+              key={childNode.label}
+              node={childNode}
+              treeNodeId={`${treeNodeId}/${childNode.label}`}
+            />
           ))}
         </Tree>
       )}

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

@@ -8,20 +8,20 @@ exports[`LegacyTreeComponent renders a simple tree 1`] = `
   <LegacyTreeNodeComponent
     generation={0}
     node={
-      Object {
-        "children": Array [
-          Object {
-            "children": Array [
-              Object {
+      {
+        "children": [
+          {
+            "children": [
+              {
                 "label": "ZgrandChild11",
               },
-              Object {
+              {
                 "label": "AgrandChild12",
               },
             ],
             "label": "Bchild1",
           },
-          Object {
+          {
             "label": "2child2",
           },
         ],
@@ -45,7 +45,7 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
     className="treeNodeHeader "
     data-test="Tree/TreeNode/Header:label"
     style={
-      Object {
+      {
         "paddingLeft": 9,
       }
     }
@@ -56,7 +56,7 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
       className="expandCollapseIcon"
       onKeyPress={[Function]}
       role="button"
-      src={Object {}}
+      src={{}}
       tabIndex={0}
     />
     <span
@@ -78,7 +78,7 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
   <AnimateHeight
     animateOpacity={false}
     animationStateClasses={
-      Object {
+      {
         "animating": "rah-animating",
         "animatingDown": "rah-animating--down",
         "animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -96,7 +96,7 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
     duration={200}
     easing="ease"
     height={0}
-    style={Object {}}
+    style={{}}
   >
     <div
       className="nodeChildren"
@@ -107,12 +107,12 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
         generation={3}
         key="Bchild1-3-undefined"
         node={
-          Object {
-            "children": Array [
-              Object {
+          {
+            "children": [
+              {
                 "label": "ZgrandChild11",
               },
-              Object {
+              {
                 "label": "AgrandChild12",
               },
             ],
@@ -125,7 +125,7 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
         generation={3}
         key="2child2-3-undefined"
         node={
-          Object {
+          {
             "label": "2child2",
           }
         }
@@ -149,7 +149,7 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
     className="treeNodeHeader "
     data-test="Tree/TreeNode/Header:label"
     style={
-      Object {
+      {
         "paddingLeft": 23,
       }
     }
@@ -160,7 +160,7 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
       className="expandCollapseIcon"
       onKeyPress={[Function]}
       role="button"
-      src={Object {}}
+      src={{}}
       tabIndex={0}
     />
     <span
@@ -177,10 +177,10 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
         ariaLabel="More options"
         className="treeMenuEllipsis"
         menuIconProps={
-          Object {
+          {
             "iconName": "More",
-            "styles": Object {
-              "root": Object {
+            "styles": {
+              "root": {
                 "fontSize": "18px",
                 "fontWeight": "bold",
               },
@@ -188,13 +188,13 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
           }
         }
         menuProps={
-          Object {
+          {
             "contextualMenuItemAs": [Function],
             "coverTarget": true,
             "directionalHint": 3,
             "isBeakVisible": false,
-            "items": Array [
-              Object {
+            "items": [
+              {
                 "className": undefined,
                 "disabled": true,
                 "key": "menuLabel",
@@ -209,8 +209,8 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
         }
         name="More"
         styles={
-          Object {
-            "rootFocused": Object {
+          {
+            "rootFocused": {
               "outline": "1px dashed undefined",
             },
           }
@@ -231,7 +231,7 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
   <AnimateHeight
     animateOpacity={false}
     animationStateClasses={
-      Object {
+      {
         "animating": "rah-animating",
         "animatingDown": "rah-animating--down",
         "animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -249,7 +249,7 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
     duration={200}
     easing="ease"
     height="auto"
-    style={Object {}}
+    style={{}}
   >
     <div
       className="nodeChildren"
@@ -260,7 +260,7 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
         generation={13}
         key="2child2-13-undefined"
         node={
-          Object {
+          {
             "label": "2child2",
           }
         }
@@ -270,12 +270,12 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
         generation={13}
         key="Bchild1-13-undefined"
         node={
-          Object {
-            "children": Array [
-              Object {
+          {
+            "children": [
+              {
                 "label": "ZgrandChild11",
               },
-              Object {
+              {
                 "label": "AgrandChild12",
               },
             ],
@@ -301,7 +301,7 @@ exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
     className="treeNodeHeader "
     data-test="Tree/TreeNode/Header:label"
     style={
-      Object {
+      {
         "paddingLeft": 9,
       }
     }
@@ -312,7 +312,7 @@ exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
       className="expandCollapseIcon"
       onKeyPress={[Function]}
       role="button"
-      src={Object {}}
+      src={{}}
       tabIndex={0}
     />
     <span
@@ -334,7 +334,7 @@ exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
   <AnimateHeight
     animateOpacity={false}
     animationStateClasses={
-      Object {
+      {
         "animating": "rah-animating",
         "animatingDown": "rah-animating--down",
         "animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -352,7 +352,7 @@ exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
     duration={200}
     easing="ease"
     height="auto"
-    style={Object {}}
+    style={{}}
   >
     <div
       className="nodeChildren"
@@ -376,7 +376,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
     className="treeNodeHeader "
     data-test="Tree/TreeNode/Header:label"
     style={
-      Object {
+      {
         "paddingLeft": 23,
       }
     }
@@ -387,7 +387,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
       className="expandCollapseIcon"
       onKeyPress={[Function]}
       role="button"
-      src={Object {}}
+      src={{}}
       tabIndex={0}
     />
     <span
@@ -404,10 +404,10 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
         ariaLabel="More options"
         className="treeMenuEllipsis"
         menuIconProps={
-          Object {
+          {
             "iconName": "More",
-            "styles": Object {
-              "root": Object {
+            "styles": {
+              "root": {
                 "fontSize": "18px",
                 "fontWeight": "bold",
               },
@@ -415,20 +415,20 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
           }
         }
         menuProps={
-          Object {
+          {
             "contextualMenuItemAs": [Function],
             "coverTarget": true,
             "directionalHint": 3,
             "isBeakVisible": false,
-            "items": Array [],
+            "items": [],
             "onMenuDismissed": [Function],
             "onMenuOpened": [Function],
           }
         }
         name="More"
         styles={
-          Object {
-            "rootFocused": Object {
+          {
+            "rootFocused": {
               "outline": "1px dashed undefined",
             },
           }
@@ -449,7 +449,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
   <AnimateHeight
     animateOpacity={false}
     animationStateClasses={
-      Object {
+      {
         "animating": "rah-animating",
         "animatingDown": "rah-animating--down",
         "animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -467,7 +467,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
     duration={200}
     easing="ease"
     height="auto"
-    style={Object {}}
+    style={{}}
   >
     <div
       className="nodeChildren"
@@ -478,12 +478,12 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
         generation={13}
         key="bchild-13-undefined"
         node={
-          Object {
-            "children": Array [
-              Object {
+          {
+            "children": [
+              {
                 "label": "ZgrandChild11",
               },
-              Object {
+              {
                 "label": "AgrandChild12",
               },
             ],
@@ -496,12 +496,12 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
         generation={13}
         key="dchild-13-undefined"
         node={
-          Object {
-            "children": Array [
-              Object {
+          {
+            "children": [
+              {
                 "label": "ZgrandChild11",
               },
-              Object {
+              {
                 "label": "AgrandChild12",
               },
             ],
@@ -514,7 +514,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
         generation={13}
         key="aChild-13-undefined"
         node={
-          Object {
+          {
             "label": "aChild",
           }
         }
@@ -524,7 +524,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
         generation={13}
         key="cchild-13-undefined"
         node={
-          Object {
+          {
             "label": "cchild",
           }
         }
@@ -547,7 +547,7 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
     className="treeNodeHeader "
     data-test="Tree/TreeNode/Header:label"
     style={
-      Object {
+      {
         "paddingLeft": 9,
       }
     }
@@ -558,7 +558,7 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
       className="expandCollapseIcon"
       onKeyPress={[Function]}
       role="button"
-      src={Object {}}
+      src={{}}
       tabIndex={0}
     />
     <span
@@ -580,7 +580,7 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
   <AnimateHeight
     animateOpacity={false}
     animationStateClasses={
-      Object {
+      {
         "animating": "rah-animating",
         "animatingDown": "rah-animating--down",
         "animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -598,7 +598,7 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
     duration={200}
     easing="ease"
     height="auto"
-    style={Object {}}
+    style={{}}
   >
     <div
       className="nodeChildren"
@@ -609,12 +609,12 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
         generation={3}
         key="Bchild1-3-undefined"
         node={
-          Object {
-            "children": Array [
-              Object {
+          {
+            "children": [
+              {
                 "label": "ZgrandChild11",
               },
-              Object {
+              {
                 "label": "AgrandChild12",
               },
             ],
@@ -627,7 +627,7 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
         generation={3}
         key="2child2-3-undefined"
         node={
-          Object {
+          {
             "label": "2child2",
           }
         }

src/Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent.test.tsx

@@ -1,8 +1,8 @@
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { RenderResult, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
 import React from "react";
-import { AddVectorEmbeddingPolicyForm } from "./AddVectorEmbeddingPolicyForm";
+import { VectorEmbeddingPoliciesComponent } from "./VectorEmbeddingPoliciesComponent";
 
 const mockVectorEmbedding: VectorEmbedding[] = [
   { path: "/vector1", dataType: "float32", distanceFunction: "euclidean", dimensions: 0 },
@@ -17,9 +17,9 @@ describe("AddVectorEmbeddingPolicyForm", () => {
 
   beforeEach(() => {
     component = render(
-      <AddVectorEmbeddingPolicyForm
-        vectorEmbedding={mockVectorEmbedding}
-        vectorIndex={mockVectorIndex}
+      <VectorEmbeddingPoliciesComponent
+        vectorEmbeddings={mockVectorEmbedding}
+        vectorIndexes={mockVectorIndex}
         onVectorEmbeddingChange={mockOnVectorEmbeddingChange}
       />,
     );
@@ -36,7 +36,7 @@ describe("AddVectorEmbeddingPolicyForm", () => {
   });
 
   test("calls onDelete when delete button is clicked", async () => {
-    const deleteButton = component.container.querySelector("#delete-vector-policy-1");
+    const deleteButton = component.container.querySelector("#delete-Vector-embedding-1");
     fireEvent.click(deleteButton);
     expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
     expect(screen.queryByText("Vector embedding 1")).toBeNull();
@@ -49,21 +49,19 @@ describe("AddVectorEmbeddingPolicyForm", () => {
 
   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(), {
+    await waitFor(() => expect(screen.getByText("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(),
+        expect(screen.getByText("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(), {
+    await waitFor(() => expect(screen.queryByText("Path should not be empty")).toBeNull(), {
       timeout: 1500,
     });
     await waitFor(

src/Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent.tsx

@@ -0,0 +1,470 @@
+import {
+  DefaultButton,
+  Dropdown,
+  IDropdownOption,
+  IStyleFunctionOrObject,
+  ITextFieldStyleProps,
+  ITextFieldStyles,
+  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/Controls/VectorSearch/VectorSearchUtils";
+import React, { FunctionComponent, useState } from "react";
+
+export interface IVectorEmbeddingPoliciesComponentProps {
+  vectorEmbeddings: VectorEmbedding[];
+  onVectorEmbeddingChange: (
+    vectorEmbeddings: VectorEmbedding[],
+    vectorIndexingPolicies: VectorIndex[],
+    validationPassed: boolean,
+  ) => void;
+  vectorIndexes?: VectorIndex[];
+  discardChanges?: boolean;
+  onChangesDiscarded?: () => void;
+  disabled?: boolean;
+}
+
+export interface VectorEmbeddingPolicyData {
+  path: string;
+  dataType: VectorEmbedding["dataType"];
+  distanceFunction: VectorEmbedding["distanceFunction"];
+  dimensions: number;
+  indexType: VectorIndex["type"] | "none";
+  pathError: string;
+  dimensionsError: string;
+  diskANNShardKey?: string;
+  diskANNShardKeyError?: string;
+  indexingSearchListSize?: number;
+  indexingSearchListSizeError?: string;
+  quantizationByteSize?: number;
+  quantizationByteSizeError?: string;
+}
+
+type VectorEmbeddingPolicyProperty = "dataType" | "distanceFunction" | "indexType";
+
+const labelStyles = {
+  root: {
+    fontSize: 12,
+  },
+};
+
+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 VectorEmbeddingPoliciesComponent: FunctionComponent<IVectorEmbeddingPoliciesComponentProps> = ({
+  vectorEmbeddings,
+  vectorIndexes,
+  onVectorEmbeddingChange,
+  discardChanges,
+  onChangesDiscarded,
+  disabled,
+}): JSX.Element => {
+  const onVectorEmbeddingPathError = (path: string, index?: number): string => {
+    let error = "";
+    if (!path) {
+      error = "Path should not be empty";
+    }
+    if (
+      index >= 0 &&
+      vectorEmbeddingPolicyData?.find(
+        (vectorEmbedding: VectorEmbeddingPolicyData, dataIndex: number) =>
+          dataIndex !== index && vectorEmbedding.path === path,
+      )
+    ) {
+      error = "Path is already defined";
+    }
+    return error;
+  };
+
+  const onVectorEmbeddingDimensionError = (dimension: number, indexType: VectorIndex["type"] | "none"): string => {
+    let error = "";
+    if (dimension <= 0 || dimension > 4096) {
+      error = "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 onQuantizationByteSizeError = (size: number): string => {
+    let error = "";
+    if (size < 1 || size > 512) {
+      error = "Quantization byte size must be greater than 0 and less than or equal to 512";
+    }
+    return error;
+  };
+
+  const onIndexingSearchListSizeError = (size: number): string => {
+    let error = "";
+    if (size < 25 || size > 500) {
+      error = "Indexing search list size must be greater than or equal to 25 and less than or equal to 500";
+    }
+    return error;
+  };
+
+  //TODO: no restrictions yet due to this field being removed for now.
+  // Uncomment and replace with validation code when field is reinstated
+  // const onDiskANNShardKeyError = (shardKey: string): string => {
+  //   return "";
+  // };
+
+  const initializeData = (vectorEmbeddings: VectorEmbedding[], vectorIndexes: VectorIndex[]) => {
+    const mergedData: VectorEmbeddingPolicyData[] = [];
+    vectorEmbeddings.forEach((embedding) => {
+      const matchingIndex = displayIndexes ? vectorIndexes.find((index) => index.path === embedding.path) : undefined;
+      mergedData.push({
+        ...embedding,
+        indexType: matchingIndex?.type || "none",
+        indexingSearchListSize: matchingIndex?.indexingSearchListSize || undefined,
+        quantizationByteSize: matchingIndex?.quantizationByteSize || undefined,
+        pathError: onVectorEmbeddingPathError(embedding.path),
+        dimensionsError: onVectorEmbeddingDimensionError(embedding.dimensions, matchingIndex?.type || "none"),
+      });
+    });
+    return mergedData;
+  };
+
+  const [displayIndexes] = useState<boolean>(!!vectorIndexes);
+  const [vectorEmbeddingPolicyData, setVectorEmbeddingPolicyData] = useState<VectorEmbeddingPolicyData[]>(
+    initializeData(vectorEmbeddings, vectorIndexes),
+  );
+
+  React.useEffect(() => {
+    propagateData();
+  }, [vectorEmbeddingPolicyData]);
+
+  React.useEffect(() => {
+    if (discardChanges) {
+      setVectorEmbeddingPolicyData(initializeData(vectorEmbeddings, vectorIndexes));
+      onChangesDiscarded();
+    }
+  }, [discardChanges]);
+
+  const propagateData = () => {
+    const vectorEmbeddings: VectorEmbedding[] = vectorEmbeddingPolicyData.map((policy: VectorEmbeddingPolicyData) => ({
+      path: policy.path,
+      dataType: policy.dataType,
+      dimensions: policy.dimensions,
+      distanceFunction: policy.distanceFunction,
+    }));
+    const vectorIndexes: VectorIndex[] = vectorEmbeddingPolicyData
+      .filter((policy: VectorEmbeddingPolicyData) => policy.indexType !== "none")
+      .map(
+        (policy) =>
+          ({
+            path: policy.path,
+            type: policy.indexType,
+            indexingSearchListSize: policy.indexingSearchListSize,
+            quantizationByteSize: policy.quantizationByteSize,
+          }) as VectorIndex,
+      );
+    const validationPassed = vectorEmbeddingPolicyData.every(
+      (policy: VectorEmbeddingPolicyData) => policy.pathError === "" && policy.dimensionsError === "",
+    );
+    onVectorEmbeddingChange(vectorEmbeddings, vectorIndexes, 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;
+    if (vectorEmbedding.indexType === "diskANN") {
+      vectorEmbedding.indexingSearchListSize = 100;
+    } else {
+      vectorEmbedding.indexingSearchListSize = undefined;
+    }
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onQuantizationByteSizeChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value.trim()) || 0;
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    vectorEmbeddings[index].quantizationByteSize = value;
+    vectorEmbeddings[index].quantizationByteSizeError = onQuantizationByteSizeError(value);
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onIndexingSearchListSizeChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value.trim()) || 0;
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    vectorEmbeddings[index].indexingSearchListSize = value;
+    vectorEmbeddings[index].indexingSearchListSizeError = onIndexingSearchListSizeError(value);
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  // TODO: uncomment after Ignite
+  // DiskANNShardKey was removed for Ignite due to backend problems. Leaving this here as it will be reinstated immediately after Ignite
+  // const onDiskANNShardKeyChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+  //   const value = event.target.value.trim();
+  //   const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+  //   if (!vectorEmbeddings[index]?.diskANNShardKey && !value.startsWith("/")) {
+  //     vectorEmbeddings[index].diskANNShardKey = "/" + value;
+  //   } else {
+  //     vectorEmbeddings[index].diskANNShardKey = value;
+  //   }
+  //   const error = onDiskANNShardKeyError(value);
+  //   vectorEmbeddings[index].diskANNShardKeyError = 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 &&
+        vectorEmbeddingPolicyData.length > 0 &&
+        vectorEmbeddingPolicyData.map((vectorEmbeddingPolicy: VectorEmbeddingPolicyData, index: number) => (
+          <CollapsibleSectionComponent
+            disabled={disabled}
+            key={index}
+            isExpandedByDefault={true}
+            title={`Vector embedding ${index + 1}`}
+            showDelete={true}
+            onDelete={() => onDelete(index)}
+          >
+            <Stack horizontal tokens={{ childrenGap: 4 }}>
+              <Stack
+                styles={{
+                  root: {
+                    margin: "0 0 6px 20px !important",
+                    paddingLeft: 20,
+                    width: "80%",
+                    borderLeft: "1px solid",
+                  },
+                }}
+              >
+                <Stack>
+                  <Label disabled={disabled} styles={labelStyles}>
+                    Path
+                  </Label>
+                  <TextField
+                    disabled={disabled}
+                    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 disabled={disabled} styles={labelStyles}>
+                    Data type
+                  </Label>
+                  <Dropdown
+                    disabled={disabled}
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getDataTypeOptions()}
+                    selectedKey={vectorEmbeddingPolicy.dataType}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onVectorEmbeddingPolicyChange(index, option, "dataType")
+                    }
+                  ></Dropdown>
+                </Stack>
+                <Stack>
+                  <Label disabled={disabled} styles={labelStyles}>
+                    Distance function
+                  </Label>
+                  <Dropdown
+                    disabled={disabled}
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getDistanceFunctionOptions()}
+                    selectedKey={vectorEmbeddingPolicy.distanceFunction}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onVectorEmbeddingPolicyChange(index, option, "distanceFunction")
+                    }
+                  ></Dropdown>
+                </Stack>
+                <Stack>
+                  <Label disabled={disabled} styles={labelStyles}>
+                    Dimensions
+                  </Label>
+                  <TextField
+                    disabled={disabled}
+                    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>
+                {displayIndexes && (
+                  <Stack>
+                    <Label disabled={disabled} styles={labelStyles}>
+                      Index type
+                    </Label>
+                    <Dropdown
+                      disabled={disabled}
+                      required={true}
+                      styles={dropdownStyles}
+                      options={getIndexTypeOptions()}
+                      selectedKey={vectorEmbeddingPolicy.indexType}
+                      onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                        onVectorEmbeddingIndexTypeChange(index, option)
+                      }
+                    ></Dropdown>
+                    <Stack style={{ marginLeft: "10px" }}>
+                      <Label
+                        disabled={
+                          disabled ||
+                          (vectorEmbeddingPolicy.indexType !== "quantizedFlat" &&
+                            vectorEmbeddingPolicy.indexType !== "diskANN")
+                        }
+                        styles={labelStyles}
+                      >
+                        Quantization byte size
+                      </Label>
+                      <TextField
+                        disabled={
+                          disabled ||
+                          (vectorEmbeddingPolicy.indexType !== "quantizedFlat" &&
+                            vectorEmbeddingPolicy.indexType !== "diskANN")
+                        }
+                        id={`vector-policy-quantizationByteSize-${index + 1}`}
+                        styles={textFieldStyles}
+                        value={String(vectorEmbeddingPolicy.quantizationByteSize || "")}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                          onQuantizationByteSizeChange(index, event)
+                        }
+                      />
+                    </Stack>
+                    <Stack style={{ marginLeft: "10px" }}>
+                      <Label disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"} styles={labelStyles}>
+                        Indexing search list size
+                      </Label>
+                      <TextField
+                        disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"}
+                        id={`vector-policy-indexingSearchListSize-${index + 1}`}
+                        styles={textFieldStyles}
+                        value={String(vectorEmbeddingPolicy.indexingSearchListSize || "")}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                          onIndexingSearchListSizeChange(index, event)
+                        }
+                      />
+                    </Stack>
+                    {/*TODO: uncomment after Ignite */}
+                    {/* DiskANNShardKey was removed for Ignite due to backend problems. Leaving this here as it will be reinstated immediately after Ignite
+                    <Stack
+                      style={{ marginLeft: "10px" }}
+                    >
+                      <Label
+                        disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"}
+                        styles={labelStyles}
+                      >DiskANN shard key</Label>
+                      <TextField
+                        disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"}
+                        id={`vector-policy-diskANNShardKey-${index + 1}`}
+                        styles={textFieldStyles}
+                        value={String(vectorEmbeddingPolicy.diskANNShardKey || "")}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                          onDiskANNShardKeyChange(index, event)
+                        }
+                      />
+                    </Stack>
+                    */}
+                  </Stack>
+                )}
+              </Stack>
+            </Stack>
+          </CollapsibleSectionComponent>
+        ))}
+      <DefaultButton
+        disabled={disabled}
+        id={`add-vector-policy`}
+        styles={{ root: { maxWidth: 170, fontSize: 12 } }}
+        onClick={onAdd}
+      >
+        Add vector embedding
+      </DefaultButton>
+    </Stack>
+  );
+};