Merge branch 'master' of https://github.com/Azure/cosmos-explorer into users/aisayas/pbe

.eslintrc.js

@@ -53,9 +53,4 @@ module.exports = {
       },
     ],
   },
-  settings: {
-    react: {
-      version: "detect",
-    },
-  },
 };

.github/workflows/ci.yml

@@ -14,11 +14,11 @@ jobs:
     name: "Log Code Metrics"
     if: github.ref == 'refs/heads/master'
     steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - run: npm ci
       - run: node utils/codeMetrics.js
         env:
@@ -27,11 +27,11 @@ jobs:
     runs-on: ubuntu-latest
     name: "Compile TypeScript"
     steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run compile
       - run: npm run compile:strict
@@ -39,44 +39,44 @@ jobs:
     runs-on: ubuntu-latest
     name: "Check Format"
     steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run format:check
   lint:
     runs-on: ubuntu-latest
     name: "Lint"
     steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run lint
   unittest:
     runs-on: ubuntu-latest
     name: "Unit Tests"
     steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run test
   build:
     runs-on: ubuntu-latest
     name: "Build"
     steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run build:contracts
       - name: Restore Build Cache
@@ -86,10 +86,10 @@ jobs:
           key: ${{ runner.os }}-build-cache
       - run: npm run pack:prod
         env:
-          NODE_OPTIONS: "--max-old-space-size=4096"
+          NODE_OPTIONS: '--max-old-space-size=4096'
       - run: cp -r ./Contracts ./dist/contracts
       - run: cp -r ./configs ./dist/configs
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v2
         with:
           name: dist
           path: dist/
@@ -107,11 +107,11 @@ jobs:
     if: false
     runs-on: windows-latest
     steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - uses: southpolesteve/cosmos-emulator-github-action@v1
       - name: End to End Tests
         run: |
@@ -124,7 +124,7 @@ jobs:
           DATA_EXPLORER_ENDPOINT: "https://localhost:1234/explorer.html?platform=Emulator"
           PLATFORM: "Emulator"
           NODE_TLS_REJECT_UNAUTHORIZED: 0
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: screenshots
@@ -149,11 +149,11 @@ jobs:
           - ./test/sql/resourceToken.spec.ts
           - ./test/tables/container.spec.ts
     steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - run: npm ci
       - run: npm start &
       - run: npm run wait-for-server
@@ -162,7 +162,7 @@ jobs:
           # Run tests up to three times
           for i in $(seq 1 3); do npx jest -c ./jest.config.playwright.js ${{ matrix['test-file'] }} && s=0 && break || s=$? && sleep 1; done; (exit $s)
         shell: bash
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: screenshots
@@ -180,14 +180,14 @@ jobs:
         with:
           nuget-api-key: ${{ secrets.NUGET_API_KEY }}
       - name: Download Dist Folder
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v2
         with:
           name: dist
       - run: cp ./configs/prod.json config.json
       - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
       - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
       - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v2
         name: packages
         with:
           path: "*.nupkg"
@@ -204,7 +204,7 @@ jobs:
         with:
           nuget-api-key: ${{ secrets.NUGET_API_KEY }}
       - name: Download Dist Folder
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v2
         with:
           name: dist
       - run: cp ./configs/mpac.json config.json
@@ -212,7 +212,7 @@ jobs:
       - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
       - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
       - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v2
         name: packages
         with:
           path: "*.nupkg"

.github/workflows/cleanup.yml

@@ -20,9 +20,9 @@ jobs:
       NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 18.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - run: npm ci
       - run: node utils/cleanupDBs.js

package.json

@@ -12,12 +12,12 @@
     "@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.14.3",
+    "@fluentui/react-components": "9.32.1",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
-    "@nteract/commutable": "7.5.1",
+    "@nteract/commutable": "7.4.2",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.0",
     "@nteract/data-explorer": "8.0.3",
@@ -49,9 +49,9 @@
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
     "canvas": "file:./canvas",
-    "clean-webpack-plugin": "4.0.0",
+    "clean-webpack-plugin": "3.0.0",
     "clipboard-copy": "4.0.1",
-    "copy-webpack-plugin": "11.0.0",
+    "copy-webpack-plugin": "9.0.1",
     "crossroads": "0.12.2",
     "css-element-queries": "1.1.1",
     "d3": "6.1.1",
@@ -61,8 +61,8 @@
     "dayjs": "1.8.19",
     "dom-to-image": "2.6.0",
     "dotenv": "8.2.0",
-    "eslint-plugin-jest": "27.4.2",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-jest": "23.13.2",
+    "eslint-plugin-react": "7.20.0",
     "hasher": "1.2.0",
     "html2canvas": "1.0.0-rc.5",
     "i18next": "19.8.4",
@@ -76,9 +76,9 @@
     "jquery-ui-dist": "1.12.1",
     "knockout": "3.5.1",
     "mkdirp": "1.0.4",
-    "monaco-editor": "0.44.0",
+    "monaco-editor": "0.18.1",
     "ms": "2.1.3",
-    "p-retry": "4.6.2",
+    "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
     "post-robot": "10.0.42",
     "q": "1.5.1",
@@ -86,7 +86,7 @@
     "react-animate-height": "2.0.8",
     "react-dnd": "14.0.2",
     "react-dnd-html5-backend": "14.0.0",
-    "react-dom": "16.14.0",
+    "react-dom": "16.13.1",
     "react-hotkeys": "2.0.0",
     "react-i18next": "11.8.5",
     "react-notification-system": "0.2.17",
@@ -94,12 +94,14 @@
     "react-splitter-layout": "4.0.0",
     "react-string-format": "1.0.1",
     "react-youtube": "9.0.1",
+    "redux": "4.0.4",
     "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
+    "rxjs": "6.6.3",
     "sanitize-html": "2.3.3",
-    "styled-components": "5.0.1",
+    "styled-components": "4.3.2",
     "swr": "0.4.0",
-    "terser-webpack-plugin": "5.3.9",
+    "terser-webpack-plugin": "5.1.4",
     "underscore": "1.9.1",
     "utility-types": "3.10.0",
     "zustand": "3.5.0"
@@ -132,59 +134,59 @@
     "@types/styled-components": "5.1.1",
     "@types/underscore": "1.7.36",
     "@types/youtube-player": "5.5.6",
-    "@typescript-eslint/eslint-plugin": "6.7.4",
-    "@typescript-eslint/parser": "6.7.4",
-    "@webpack-cli/serve": "2.0.5",
+    "@typescript-eslint/eslint-plugin": "4.22.0",
+    "@typescript-eslint/parser": "4.22.0",
+    "@webpack-cli/serve": "1.5.2",
     "babel-jest": "24.9.0",
     "babel-loader": "8.1.0",
     "buffer": "5.1.0",
-    "case-sensitive-paths-webpack-plugin": "2.4.0",
+    "case-sensitive-paths-webpack-plugin": "2.3.0",
     "create-file-webpack": "1.0.2",
-    "css-loader": "6.8.1",
+    "css-loader": "1.0.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.5",
     "enzyme-to-json": "3.6.1",
-    "eslint": "8.50.0",
+    "eslint": "7.8.1",
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
-    "eslint-plugin-prefer-arrow": "1.2.3",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-prefer-arrow": "1.2.2",
+    "eslint-plugin-react-hooks": "4.2.0",
     "expect-playwright": "0.3.3",
     "fast-glob": "3.2.5",
+    "file-loader": "2.0.0",
     "fs-extra": "7.0.0",
-    "html-inline-css-webpack-plugin": "1.11.2",
+    "html-inline-css-webpack-plugin": "1.11.0",
     "html-loader": "0.5.5",
     "html-loader-jest": "0.2.1",
-    "html-webpack-plugin": "5.5.3",
+    "html-webpack-plugin": "5.3.2",
     "jest": "26.6.3",
     "jest-canvas-mock": "2.3.1",
     "jest-playwright-preset": "1.5.1",
     "jest-react-hooks-shallow": "1.5.1",
     "jest-trx-results-processor": "0.0.7",
     "less": "3.8.1",
-    "less-loader": "11.1.3",
+    "less-loader": "4.1.0",
     "less-vars-loader": "1.1.0",
     "mini-css-extract-plugin": "2.1.0",
-    "monaco-editor-webpack-plugin": "7.1.0",
+    "monaco-editor-webpack-plugin": "1.7.0",
     "node-fetch": "2.6.1",
     "playwright": "1.13.0",
     "prettier": "3.0.3",
     "process": "0.11.10",
-    "querystring-es3": "0.2.1",
     "raw-loader": "0.5.1",
     "react-dev-utils": "11.0.4",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
     "style-loader": "0.23.0",
     "ts-loader": "9.2.4",
-    "typedoc": "0.21.5",
-    "typescript": "4.3.5",
-    "url-loader": "4.1.1",
+    "typedoc": "0.20.36",
+    "typescript": "4.3.4",
+    "url-loader": "1.1.1",
     "wait-on": "4.0.2",
-    "webpack": "5.88.2",
-    "webpack-bundle-analyzer": "4.9.1",
-    "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.1"
+    "webpack": "5.47.0",
+    "webpack-bundle-analyzer": "4.4.2",
+    "webpack-cli": "4.7.2",
+    "webpack-dev-server": "3.11.2"
   },
   "scripts": {
     "start": "webpack serve --mode development",

src/Common/Constants.ts

@@ -145,9 +145,6 @@ export class Queries {
   public static QueryEditorMinHeightRatio: number = 0.1;
   public static QueryEditorMaxHeightRatio: number = 0.4;
   public static readonly DefaultMaxDegreeOfParallelism = 6;
-  public static readonly DefaultRetryAttempts = 9;
-  public static readonly DefaultRetryIntervalInMs = 0;
-  public static readonly DefaultMaxWaitTimeInSeconds = 30;
 }
 
 export class SavedQueries {
@@ -174,7 +171,6 @@ export class Areas {
   public static Tab: string = "Tab";
   public static ShareDialog: string = "Share Access Dialog";
   public static Notebook: string = "Notebook";
-  public static Copilot: string = "Copilot";
 }
 
 export class HttpHeaders {
@@ -431,12 +427,6 @@ export class JunoEndpoints {
   public static readonly Stage = "https://tools-staging.cosmos.azure.com";
 }
 
-export class PriorityLevel {
-  public static readonly High = "high";
-  public static readonly Low = "low";
-  public static readonly Default = "low";
-}
-
 export const QueryCopilotSampleDatabaseId = "CopilotSampleDb";
 export const QueryCopilotSampleContainerId = "SampleContainer";
 

src/Common/CosmosClient.ts

@@ -1,11 +1,6 @@
 import * as Cosmos from "@azure/cosmos";
 import { sendCachedDataMessage } from "Common/MessageHandler";
-import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizationTokenUsingResourceTokens";
 import { AuthorizationToken, MessageTypes } from "Contracts/MessageTypes";
-import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { AuthType } from "../AuthType";
-import { PriorityLevel } from "../Common/Constants";
 import { Platform, configContext } from "../ConfigContext";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
@@ -31,33 +26,12 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   }
 
   if (configContext.platform === Platform.Fabric) {
-    switch (requestInfo.resourceType) {
-      case Cosmos.ResourceType.conflicts:
-      case Cosmos.ResourceType.container:
-      case Cosmos.ResourceType.sproc:
-      case Cosmos.ResourceType.udf:
-      case Cosmos.ResourceType.trigger:
-      case Cosmos.ResourceType.item:
-      case Cosmos.ResourceType.pkranges:
-        // User resource tokens
-        headers[HttpHeaders.msDate] = new Date().toUTCString();
-        const resourceTokens = userContext.fabricDatabaseConnectionInfo.resourceTokens;
-        checkDatabaseResourceTokensValidity(userContext.fabricDatabaseConnectionInfo.resourceTokensTimestamp);
-        return getAuthorizationTokenUsingResourceTokens(resourceTokens, requestInfo.path, requestInfo.resourceId);
-
-      case Cosmos.ResourceType.none:
-      case Cosmos.ResourceType.database:
-      case Cosmos.ResourceType.offer:
-      case Cosmos.ResourceType.user:
-      case Cosmos.ResourceType.permission:
-        // User master tokens
-        const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(MessageTypes.GetAuthorizationToken, [
-          requestInfo,
-        ]);
-        console.log("Response from Fabric: ", authorizationToken);
-        headers[HttpHeaders.msDate] = authorizationToken.XDate;
-        return decodeURIComponent(authorizationToken.PrimaryReadWriteToken);
-    }
+    const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(MessageTypes.GetAuthorizationToken, [
+      requestInfo,
+    ]);
+    console.log("Response from Fabric: ", authorizationToken);
+    headers[HttpHeaders.msDate] = authorizationToken.XDate;
+    return authorizationToken.PrimaryReadWriteToken;
   }
 
   if (userContext.masterKey) {
@@ -133,31 +107,15 @@ export function client(): Cosmos.CosmosClient {
   _defaultHeaders["x-ms-cosmos-sdk-supportedcapabilities"] =
     SDKSupportedCapabilities.None | SDKSupportedCapabilities.PartitionMerge;
 
-  if (
-    userContext.authType === AuthType.ConnectionString ||
-    userContext.authType === AuthType.EncryptedToken ||
-    userContext.authType === AuthType.ResourceToken
-  ) {
-    // Default to low priority. Needed for non-AAD-auth scenarios
-    // where we cannot use RP API, and thus, cannot detect whether priority
-    // based execution is enabled.
-    // The header will be ignored if priority based execution is disabled on the account.
-    _defaultHeaders["x-ms-cosmos-priority-level"] = PriorityLevel.Default;
-  }
-
   const options: Cosmos.CosmosClientOptions = {
     endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
     key: userContext.masterKey,
     tokenProvider,
+    connectionPolicy: {
+      enableEndpointDiscovery: false,
+    },
     userAgentSuffix: "Azure Portal",
     defaultHeaders: _defaultHeaders,
-    connectionPolicy: {
-      retryOptions: {
-        maxRetryAttemptCount: LocalStorageUtility.getEntryNumber(StorageKey.RetryAttempts),
-        fixedRetryIntervalInMilliseconds: LocalStorageUtility.getEntryNumber(StorageKey.RetryInterval),
-        maxWaitTimeInSeconds: LocalStorageUtility.getEntryNumber(StorageKey.MaxWaitTimeInSeconds),
-      },
-    },
   };
 
   if (configContext.PROXY_PATH !== undefined) {

src/Common/Logger.test.ts

@@ -1,5 +1,7 @@
 jest.mock("./MessageHandler");
+import { LogEntryLevel } from "../Contracts/Diagnostics";
 import * as Logger from "./Logger";
+import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { sendMessage } from "./MessageHandler";
 
 describe("Logger", () => {
@@ -9,16 +11,16 @@ describe("Logger", () => {
 
   it("should log info messages", () => {
     Logger.logInfo("Test info", "DocDB");
-    expect(sendMessage).toHaveBeenCalled();
+    expect(sendMessage).toBeCalled();
   });
 
   it("should log error messages", () => {
     Logger.logError("Test error", "DocDB");
-    expect(sendMessage).toHaveBeenCalled();
+    expect(sendMessage).toBeCalled();
   });
 
   it("should log warnings", () => {
     Logger.logWarning("Test warning", "DocDB");
-    expect(sendMessage).toHaveBeenCalled();
+    expect(sendMessage).toBeCalled();
   });
 });

src/Common/QueriesClient.ts

@@ -1,4 +1,3 @@
-import { isServerlessAccount } from "Utils/CapabilityUtils";
 import * as _ from "underscore";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
@@ -9,11 +8,12 @@ import { useDatabases } from "../Explorer/useDatabases";
 import { userContext } from "../UserContext";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
-import { handleError } from "./ErrorHandlingUtils";
 import { createCollection } from "./dataAccess/createCollection";
 import { createDocument } from "./dataAccess/createDocument";
 import { deleteDocument } from "./dataAccess/deleteDocument";
 import { queryDocuments } from "./dataAccess/queryDocuments";
+import { handleError } from "./ErrorHandlingUtils";
+import { isServerlessAccount } from "Utils/CapabilityUtils";
 
 export class QueriesClient {
   private static readonly PartitionKey: DataModels.PartitionKey = {

src/Common/TableEntity.tsx

@@ -146,7 +146,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
                 onClick={onEditEntity}
                 tabIndex={0}
                 onKeyPress={handleKeyPress}
-                role="button"
               />
             </div>
           </TooltipHost>
@@ -161,7 +160,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
               onClick={onDeleteEntity}
               tabIndex={0}
               onKeyPress={handleKeyPressdelete}
-              role="button"
             />
           </TooltipHost>
         )}

src/Common/dataAccess/queryDocuments.test.ts

@@ -1,5 +1,5 @@
-import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
 import { getCommonQueryOptions } from "./queryDocuments";
+import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
 
 describe("getCommonQueryOptions", () => {
   it("builds the correct default options objects", () => {

src/Common/dataAccess/queryDocuments.ts

@@ -26,5 +26,6 @@ export const getCommonQueryOptions = (options: FeedOptions): FeedOptions => {
     (storedItemPerPageSetting !== undefined && storedItemPerPageSetting) ||
     Queries.itemsPerPage;
   options.maxDegreeOfParallelism = LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism);
+
   return options;
 };

src/Common/dataAccess/readCollections.ts

@@ -1,57 +1,18 @@
-import { ContainerResponse } from "@azure/cosmos";
 import { Queries } from "Common/Constants";
-import { Platform, configContext } from "ConfigContext";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { listCassandraTables } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { listGremlinGraphs } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { listMongoDBCollections } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { listSqlContainers } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { listTables } from "../../Utils/arm/generatedClients/cosmos/tableResources";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
   const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
-
-  if (
-    configContext.platform === Platform.Fabric &&
-    userContext.fabricDatabaseConnectionInfo &&
-    userContext.fabricDatabaseConnectionInfo.databaseId === databaseId
-  ) {
-    const collections: DataModels.Collection[] = [];
-    const promises: Promise<ContainerResponse>[] = [];
-
-    for (const collectionResourceId in userContext.fabricDatabaseConnectionInfo.resourceTokens) {
-      // Dictionary key looks like this: dbs/SampleDB/colls/Container
-      const resourceIdObj = collectionResourceId.split("/");
-      const tokenDatabaseId = resourceIdObj[1];
-      const tokenCollectionId = resourceIdObj[3];
-
-      if (tokenDatabaseId === databaseId) {
-        promises.push(client().database(databaseId).container(tokenCollectionId).read());
-      }
-    }
-
-    try {
-      const responses = await Promise.all(promises);
-      responses.forEach((response) => {
-        collections.push(response.resource as DataModels.Collection);
-      });
-
-      // Sort collections by id before returning
-      collections.sort((a, b) => a.id.localeCompare(b.id));
-      return collections;
-    } catch (error) {
-      handleError(error, "ReadCollections", `Error while querying containers for database ${databaseId}`);
-      throw error;
-    } finally {
-      clearMessage();
-    }
-  }
-
   try {
     if (
       userContext.authType === AuthType.AAD &&

src/Common/dataAccess/readDatabaseOffer.ts

@@ -1,22 +1,15 @@
-import { Platform, configContext } from "ConfigContext";
 import { AuthType } from "../../AuthType";
 import { Offer, ReadDatabaseOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { getCassandraKeyspaceThroughput } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { getGremlinDatabaseThroughput } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { getMongoDBDatabaseThroughput } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { getSqlDatabaseThroughput } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { handleError } from "../ErrorHandlingUtils";
 import { readOfferWithSDK } from "./readOfferWithSDK";
 
 export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promise<Offer> => {
-  if (configContext.platform === Platform.Fabric) {
-    // TODO This works, but is very slow, because it requests the token, so we skip for now
-    console.error("Skiping readDatabaseOffer for Fabric");
-    return undefined;
-  }
-
   const clearMessage = logConsoleProgress(`Querying offer for database ${params.databaseId}`);
 
   try {

src/Common/dataAccess/readDatabases.ts

@@ -1,53 +1,17 @@
-import { Platform, configContext } from "ConfigContext";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { listCassandraKeyspaces } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { listGremlinDatabases } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { listMongoDBDatabases } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { listSqlDatabases } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function readDatabases(): Promise<DataModels.Database[]> {
   let databases: DataModels.Database[];
   const clearMessage = logConsoleProgress(`Querying databases`);
-
-  if (configContext.platform === Platform.Fabric && userContext.fabricDatabaseConnectionInfo?.resourceTokens) {
-    const tokensData = userContext.fabricDatabaseConnectionInfo;
-
-    const databaseIdsSet = new Set<string>(); // databaseId
-
-    for (const collectionResourceId in tokensData.resourceTokens) {
-      // Dictionary key looks like this: dbs/SampleDB/colls/Container
-      const resourceIdObj = collectionResourceId.split("/");
-
-      if (resourceIdObj.length !== 4) {
-        handleError(`Resource key not recognized: ${resourceIdObj}`, "ReadDatabases", `Error while querying databases`);
-        clearMessage();
-        return [];
-      }
-
-      const databaseId = resourceIdObj[1];
-
-      databaseIdsSet.add(databaseId);
-    }
-
-    const databases: DataModels.Database[] = Array.from(databaseIdsSet.values())
-      .sort((a, b) => a.localeCompare(b))
-      .map((databaseId) => ({
-        _rid: "",
-        _self: "",
-        _etag: "",
-        _ts: 0,
-        id: databaseId,
-        collections: [],
-      }));
-    clearMessage();
-    return databases;
-  }
-
   try {
     if (
       userContext.authType === AuthType.AAD &&

src/Common/getAuthorizationTokenUsingResourceTokens.ts

@@ -1,66 +0,0 @@
-export function getAuthorizationTokenUsingResourceTokens(
-  resourceTokens: { [resourceId: string]: string },
-  path: string,
-  resourceId: string,
-): string {
-  // console.log(`getting token for path: "${path}" and resourceId: "${resourceId}"`);
-
-  if (resourceTokens && Object.keys(resourceTokens).length > 0) {
-    // For database account access(through getDatabaseAccount API), path and resourceId are "",
-    // so in this case we return the first token to be used for creating the auth header as the
-    // service will accept any token in this case
-    if (!path && !resourceId) {
-      return resourceTokens[Object.keys(resourceTokens)[0]];
-    }
-
-    // If we have exact resource token for the path use it
-    if (resourceId && resourceTokens[resourceId]) {
-      return resourceTokens[resourceId];
-    }
-
-    // minimum valid path /dbs
-    if (!path || path.length < 4) {
-      console.error(
-        `Unable to get authotization token for Path:"${path}" and resourcerId:"${resourceId}". Invalid path.`,
-      );
-      return null;
-    }
-
-    path = trimSlashFromLeftAndRight(path);
-    const pathSegments = (path && path.split("/")) || [];
-
-    // Item path
-    if (pathSegments.length === 6) {
-      // Look for a container token matching the item path
-      const containerPath = pathSegments.slice(0, 4).map(decodeURIComponent).join("/");
-      if (resourceTokens[containerPath]) {
-        return resourceTokens[containerPath];
-      }
-    }
-
-    // This is legacy behavior that lets someone use a resource token pointing ONLY at an ID
-    // It was used when _rid was exposed by the SDK, but now that we are using user provided ids it is not needed
-    // However removing it now would be a breaking change
-    // if it's an incomplete path like /dbs/db1/colls/, start from the parent resource
-    let index = pathSegments.length % 2 === 0 ? pathSegments.length - 1 : pathSegments.length - 2;
-    for (; index > 0; index -= 2) {
-      const id = decodeURI(pathSegments[index]);
-      if (resourceTokens[id]) {
-        return resourceTokens[id];
-      }
-    }
-  }
-
-  console.error(`Unable to get authotization token for Path:"${path}" and resourcerId:"${resourceId}"`);
-  return null;
-}
-
-const trimLeftSlashes = new RegExp("^[/]+");
-const trimRightSlashes = new RegExp("[/]+$");
-function trimSlashFromLeftAndRight(inputString: string): string {
-  if (typeof inputString !== "string") {
-    throw new Error("invalid input: input is not string");
-  }
-
-  return inputString.replace(trimLeftSlashes, "").replace(trimRightSlashes, "");
-}

src/ConfigContext.ts

@@ -1,4 +1,3 @@
-import { JunoEndpoints } from "Common/Constants";
 import {
   allowedAadEndpoints,
   allowedArcadiaEndpoints,
@@ -65,8 +64,6 @@ let configContext: Readonly<ConfigContext> = {
     `^https:\\/\\/.*\\.fabric\\.microsoft\\.com$`,
     `^https:\\/\\/.*\\.powerbi\\.com$`,
     `^https:\\/\\/.*\\.analysis-df\\.net$`,
-    `^https:\\/\\/.*\\.analysis-df\\.windows\\.net$`,
-    `^https:\\/\\/.*\\.azure-test\\.net$`,
   ], // Webpack injects this at build time
   gitSha: process.env.GIT_SHA,
   hostedExplorerURL: "https://cosmos.azure.com/",
@@ -80,7 +77,7 @@ let configContext: Readonly<ConfigContext> = {
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: "dev.azuresynapse.net",
   GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1189306
   GITHUB_TEST_ENV_CLIENT_ID: "b63fc8cbf87fd3c6e2eb", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1777772
-  JUNO_ENDPOINT: JunoEndpoints.Prod,
+  JUNO_ENDPOINT: "https://tools.cosmos.azure.com",
   BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
   isTerminalEnabled: false,
   isPhoenixEnabled: false,

src/Contracts/AzureResourceGraph.ts

@@ -1,13 +0,0 @@
-export interface QueryRequestOptions {
-  $skipToken?: string;
-  $top?: number;
-  subscriptions: string[];
-}
-
-export interface QueryResponse {
-  $skipToken: string;
-  count: number;
-  data: any;
-  resultTruncated: boolean;
-  totalRecords: number;
-}

src/Contracts/DataModels.ts

@@ -88,13 +88,13 @@ export interface GenerateTokenResponse {
 }
 
 export interface Subscription {
-  uniqueDisplayName?: string;
+  uniqueDisplayName: string;
   displayName: string;
   subscriptionId: string;
-  tenantId?: string;
+  tenantId: string;
   state: string;
-  subscriptionPolicies?: SubscriptionPolicies;
-  authorizationSource?: string;
+  subscriptionPolicies: SubscriptionPolicies;
+  authorizationSource: string;
 }
 
 export interface SubscriptionPolicies {
@@ -457,11 +457,8 @@ export interface ContainerInfo {
 }
 
 export interface IProvisionData {
-  cosmosEndpoint?: string;
+  cosmosEndpoint: string;
   poolId: string;
-  databaseId?: string;
-  containerId?: string;
-  mode?: string;
 }
 
 export interface IContainerData {
@@ -604,14 +601,3 @@ export enum PhoenixErrorType {
   PhoenixFlightFallback = "PhoenixFlightFallback",
   UserMissingPermissionsError = "UserMissingPermissionsError",
 }
-
-export interface CopilotEnabledConfiguration {
-  isEnabled: boolean;
-}
-
-export interface FeatureRegistration {
-  name: string;
-  properties: {
-    state: string;
-  };
-}

src/Contracts/FabricContract.ts

@@ -9,12 +9,14 @@ export type FabricMessage =
       type: "initialize";
       message: {
         endpoint: string | undefined;
-        databaseId: string | undefined;
-        resourceTokens: unknown | undefined;
-        resourceTokensTimestamp: number | undefined;
         error: string | undefined;
       };
     }
+  | {
+      type: "openTab";
+      databaseName: string;
+      collectionName: string | undefined;
+    }
   | {
       type: "authorizationToken";
       message: {
@@ -22,15 +24,6 @@ export type FabricMessage =
         error: string | undefined;
         data: AuthorizationToken | undefined;
       };
-    }
-  | {
-      type: "allResourceTokens";
-      message: {
-        endpoint: string | undefined;
-        databaseId: string | undefined;
-        resourceTokens: unknown | undefined;
-        resourceTokensTimestamp: number | undefined;
-      };
     };
 
 export type DataExploreMessage =
@@ -47,9 +40,6 @@ export type DataExploreMessage =
       type: MessageTypes.GetAuthorizationToken;
       id: string;
       params: GetCosmosTokenMessageOptions[];
-    }
-  | {
-      type: MessageTypes.GetAllResourceTokens;
     };
 
 export type GetCosmosTokenMessageOptions = {
@@ -65,13 +55,4 @@ export type CosmosDBTokenResponse = {
 
 export type CosmosDBConnectionInfoResponse = {
   endpoint: string;
-  databaseId: string;
-  resourceTokens: unknown;
 };
-
-export interface FabricDatabaseConnectionInfo {
-  endpoint: string;
-  databaseId: string;
-  resourceTokens: { [resourceId: string]: string };
-  resourceTokensTimestamp: number;
-}

src/Contracts/MessageTypes.ts

@@ -40,7 +40,6 @@ export enum MessageTypes {
 
   // Data Explorer -> Fabric communication
   GetAuthorizationToken,
-  GetAllResourceTokens,
 }
 
 export interface AuthorizationToken {

src/Controls/Heatmap/Heatmap.test.ts

@@ -109,7 +109,6 @@ describe("iframe rendering when there is no data", () => {
           theme: 4,
         },
       },
-      origin: "http://localhost",
     };
 
     const divElement = `<div id="${Heatmap.elementId}"></div>`;
@@ -130,7 +129,6 @@ describe("iframe rendering when there is no data", () => {
           theme: 2,
         },
       },
-      origin: "http://localhost",
     };
 
     const divElement = `<div id="${Heatmap.elementId}"></div>`;

src/Definitions/less.d.ts

@@ -1,4 +0,0 @@
-declare module "*.less" {
-  const value: string;
-  export default value;
-}

src/Explorer/ContextMenuButtonFactory.tsx

@@ -129,22 +129,20 @@ export const createCollectionContextMenuButton = (
     });
   }
 
-  if (configContext.platform !== Platform.Fabric) {
-    items.push({
-      iconSrc: DeleteCollectionIcon,
-      onClick: () => {
-        useSelectedNode.getState().setSelectedNode(selectedCollection);
-        useSidePanel
-          .getState()
-          .openSidePanel(
-            "Delete " + getCollectionName(),
-            <DeleteCollectionConfirmationPane refreshDatabases={() => container.refreshAllDatabases()} />,
-          );
-      },
-      label: `Delete ${getCollectionName()}`,
-      styleClass: "deleteCollectionMenuItem",
-    });
-  }
+  items.push({
+    iconSrc: DeleteCollectionIcon,
+    onClick: () => {
+      useSelectedNode.getState().setSelectedNode(selectedCollection);
+      useSidePanel
+        .getState()
+        .openSidePanel(
+          "Delete " + getCollectionName(),
+          <DeleteCollectionConfirmationPane refreshDatabases={() => container.refreshAllDatabases()} />,
+        );
+    },
+    label: `Delete ${getCollectionName()}`,
+    styleClass: "deleteCollectionMenuItem",
+  });
 
   return items;
 };

src/Explorer/Controls/Accordion/AccordionComponent.tsx

@@ -27,7 +27,6 @@ export interface AccordionItemComponentProps {
   isExpanded?: boolean;
   containerStyles?: React.CSSProperties;
   styles?: React.CSSProperties;
-  children: JSX.Element;
 }
 
 interface AccordionItemComponentState {

src/Explorer/Controls/CollapsiblePanel/CollapsiblePanel.tsx

@@ -16,7 +16,6 @@ export interface CollapsiblePanelProps {
   isCollapsed: boolean;
   onCollapsedChanged: (newValue: boolean) => void;
   collapseToLeft?: boolean;
-  children: JSX.Element | JSX.Element[];
 }
 
 export class CollapsiblePanel extends React.Component<CollapsiblePanelProps> {

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

@@ -7,7 +7,6 @@ describe("CollapsibleSectionComponent", () => {
     const props: CollapsibleSectionProps = {
       title: "Sample title",
       isExpandedByDefault: true,
-      children: <></>,
     };
 
     const wrapper = shallow(<CollapsibleSectionComponent {...props} />);

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -7,7 +7,6 @@ export interface CollapsibleSectionProps {
   title: string;
   isExpandedByDefault: boolean;
   onExpand?: () => void;
-  children: JSX.Element;
 }
 
 export interface CollapsibleSectionState {

src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts

@@ -99,7 +99,7 @@ export class DiffEditorViewModel {
   ) {
     this.editorContainer = document.getElementById(this.getEditorId());
     this.editorContainer.innerHTML = "";
-    const options: monaco.editor.IStandaloneDiffEditorConstructionOptions = {
+    const options: monaco.editor.IDiffEditorConstructionOptions = {
       lineNumbers: this.params.lineNumbers || "off",
       fontSize: 12,
       ariaLabel: this.params.ariaLabel,

src/Explorer/Controls/Editor/EditorComponent.ts

@@ -52,11 +52,7 @@ class EditorViewModel extends JsonEditorViewModel {
     if (EditorViewModel.providerRegistered.indexOf("sql") < 0) {
       const { SqlCompletionItemProvider } = await import("@azure/cosmos-language-service");
       const monaco = await loadMonaco();
-      monaco.languages.registerCompletionItemProvider(
-        "sql",
-        // TODO cosmos-language-service could be outdated
-        new SqlCompletionItemProvider() as unknown as monaco.languages.CompletionItemProvider,
-      );
+      monaco.languages.registerCompletionItemProvider("sql", new SqlCompletionItemProvider());
       EditorViewModel.providerRegistered.push("sql");
     }
   }

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -48,7 +48,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
   public componentDidUpdate(previous: EditorReactProps) {
     if (this.props.content !== previous.content) {
-      this.editor?.setValue(this.props.content);
+      this.editor.setValue(this.props.content);
     }
   }
 
@@ -93,7 +93,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
    * Create the monaco editor and attach to DOM
    */
   private async createEditor(createCallback: (e: monaco.editor.IStandaloneCodeEditor) => void) {
-    const options: monaco.editor.IStandaloneEditorConstructionOptions = {
+    const options: monaco.editor.IEditorConstructionOptions = {
       language: this.props.language,
       value: this.props.content,
       readOnly: this.props.isReadOnly,
@@ -111,7 +111,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
     this.rootNode.innerHTML = "";
     const monaco = await loadMonaco();
-    createCallback(monaco?.editor?.create(this.rootNode, options));
+    createCallback(monaco.editor.create(this.rootNode, options));
 
     if (this.rootNode.innerHTML) {
       this.setState({

src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts

@@ -90,7 +90,7 @@ export class JsonEditorViewModel extends WaitsForTemplateViewModel {
   protected async createEditor(content: string, createCallback: (e: monaco.editor.IStandaloneCodeEditor) => void) {
     this.registerCompletionItemProvider();
     this.editorContainer = document.getElementById(this.getEditorId());
-    const options: monaco.editor.IStandaloneEditorConstructionOptions = {
+    const options: monaco.editor.IEditorConstructionOptions = {
       value: content,
       language: this.getEditorLanguage(),
       readOnly: this.params.isReadOnly,

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

@@ -29,6 +29,6 @@ describe("CodeOfConduct", () => {
     const wrapper = shallow(<CodeOfConduct {...codeOfConductProps} />);
     wrapper.find(".genericPaneSubmitBtn").first().simulate("click");
     await Promise.resolve();
-    expect(codeOfConductProps.onAcceptCodeOfConduct).toHaveBeenCalled();
+    expect(codeOfConductProps.onAcceptCodeOfConduct).toBeCalled();
   });
 });

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

@@ -9,7 +9,7 @@ import { updateUserContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
 import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
 import { SettingsComponent, SettingsComponentProps, SettingsComponentState } from "./SettingsComponent";
-import { TtlType, isDirty } from "./SettingsUtils";
+import { isDirty, TtlType } from "./SettingsUtils";
 import { collection } from "./TestUtils";
 jest.mock("../../../Common/dataAccess/getIndexTransformationProgress", () => ({
   getIndexTransformationProgress: jest.fn().mockReturnValue(undefined),
@@ -190,8 +190,8 @@ describe("SettingsComponent", () => {
       id: "id",
     };
     await settingsComponentInstance.onSaveClick();
-    expect(updateCollection).toHaveBeenCalled();
-    expect(updateOffer).toHaveBeenCalled();
+    expect(updateCollection).toBeCalled();
+    expect(updateOffer).toBeCalled();
   });
 
   it("revert resets state values", async () => {

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

@@ -1,8 +1,8 @@
 import { shallow } from "enzyme";
 import React from "react";
-import { renderToString } from "react-dom/server";
 import { MongoIndexTypes, MongoNotificationMessage, MongoNotificationType } from "../../SettingsUtils";
 import { MongoIndexingPolicyComponent, MongoIndexingPolicyComponentProps } from "./MongoIndexingPolicyComponent";
+import { renderToString } from "react-dom/server";
 
 describe("MongoIndexingPolicyComponent", () => {
   const baseProps: MongoIndexingPolicyComponentProps = {
@@ -84,7 +84,7 @@ describe("MongoIndexingPolicyComponent", () => {
     ];
 
     test.each(cases)(
-      "mongo indexing policy saveable and discardable",
+      "",
       (
         notification: MongoNotificationMessage,
         indexToDropIsPresent: boolean,
@@ -111,10 +111,8 @@ describe("MongoIndexingPolicyComponent", () => {
         );
         if (mongoWarningNotificationMessage) {
           const elementAsString = renderToString(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage());
-          // eslint-disable-next-line jest/no-conditional-expect
           expect(elementAsString).toContain(mongoWarningNotificationMessage);
         } else {
-          // eslint-disable-next-line jest/no-conditional-expect
           expect(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage()).toBeUndefined();
         }
       },

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

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

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

@@ -18,17 +18,17 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       horizontal={true}
     >
       <div
-        className="ms-Stack css-109"
+        className="ms-Stack css-53"
       >
         <span
           className="mandatoryStar"
-          key=".0:$.$.0"
+          key=".0:$.0"
         >
           * 
         </span>
         <Text
           aria-label="Throughput header"
-          key=".0:$.$.1"
+          key=".0:$.1"
           style={
             Object {
               "fontWeight": 600,
@@ -39,7 +39,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
         >
           <span
             aria-label="Throughput header"
-            className="css-110"
+            className="css-54"
             style={
               Object {
                 "fontWeight": 600,
@@ -51,7 +51,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           </span>
         </Text>
         <InfoTooltip
-          key=".0:$.$.2"
+          key=".0:$.2"
         >
           <span>
             <StyledTooltipHostBase
@@ -336,13 +336,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                 }
               >
                 <div
-                  className="ms-TooltipHost root-111"
+                  className="ms-TooltipHost root-55"
                   onBlurCapture={[Function]}
                   onFocusCapture={[Function]}
                   onKeyDown={[Function]}
                   onMouseEnter={[Function]}
                   onMouseLeave={[Function]}
-                  role="none"
                 >
                   <StyledIconBase
                     ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
@@ -632,7 +631,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     >
                       <i
                         aria-label="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
-                        className="panelInfoIcon root-114"
+                        className="panelInfoIcon root-57"
                         data-icon-name="Info"
                         role="img"
                         tabIndex={0}
@@ -641,24 +640,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       </i>
                     </IconBase>
                   </StyledIconBase>
-                  <div
-                    hidden={true}
-                    id="tooltip0"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
-                  >
-                    Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage.
-                  </div>
                 </div>
               </TooltipHostBase>
             </StyledTooltipHostBase>
@@ -671,10 +652,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       verticalAlign="center"
     >
       <div
-        className="ms-Stack css-115"
+        className="ms-Stack css-58"
       >
         <div
-          key=".0:$.$.0"
+          key=".0:$.0"
           role="radiogroup"
         >
           <input
@@ -718,16 +699,16 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       className="throughputInputSpacing"
     >
       <div
-        className="ms-Stack throughputInputSpacing css-116"
+        className="ms-Stack throughputInputSpacing css-59"
       >
         <Text
           aria-label="capacity calculator of azure cosmos db"
-          key=".0:$.$.0"
+          key=".0:$.0"
           variant="small"
         >
           <span
             aria-label="capacity calculator of azure cosmos db"
-            className="css-110"
+            className="css-54"
           >
             Estimate your required RU/s with
              
@@ -1017,7 +998,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
               >
                 <a
                   aria-label="capacity calculator of azure cosmos db"
-                  className="ms-Link root-117"
+                  className="ms-Link root-60"
                   href="https://cosmos.azure.com/capacitycalculator/"
                   onClick={[Function]}
                   target="_blank"
@@ -1031,14 +1012,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
         </Text>
         <Stack
           horizontal={true}
-          key=".0:$.$.1"
+          key=".0:$.1"
         >
           <div
-            className="ms-Stack css-109"
+            className="ms-Stack css-53"
           >
             <Text
               aria-label="maxRUDescription"
-              key=".0:$.$.0"
+              key=".0:$.0"
               style={
                 Object {
                   "fontWeight": 600,
@@ -1049,7 +1030,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             >
               <span
                 aria-label="maxRUDescription"
-                className="css-110"
+                className="css-54"
                 style={
                   Object {
                     "fontWeight": 600,
@@ -1062,7 +1043,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
               </span>
             </Text>
             <InfoTooltip
-              key=".0:$.$.1"
+              key=".0:$.1"
             >
               <span>
                 <StyledTooltipHostBase
@@ -1347,13 +1328,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     }
                   >
                     <div
-                      className="ms-TooltipHost root-111"
+                      className="ms-TooltipHost root-55"
                       onBlurCapture={[Function]}
                       onFocusCapture={[Function]}
                       onKeyDown={[Function]}
                       onMouseEnter={[Function]}
                       onMouseLeave={[Function]}
-                      role="none"
                     >
                       <StyledIconBase
                         ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
@@ -1643,7 +1623,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         >
                           <i
                             aria-label="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
-                            className="panelInfoIcon root-114"
+                            className="panelInfoIcon root-57"
                             data-icon-name="Info"
                             role="img"
                             tabIndex={0}
@@ -1652,24 +1632,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                           </i>
                         </IconBase>
                       </StyledIconBase>
-                      <div
-                        hidden={true}
-                        id="tooltip1"
-                        style={
-                          Object {
-                            "border": 0,
-                            "height": 1,
-                            "margin": -1,
-                            "overflow": "hidden",
-                            "padding": 0,
-                            "position": "absolute",
-                            "whiteSpace": "nowrap",
-                            "width": 1,
-                          }
-                        }
-                      >
-                        Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage.
-                      </div>
                     </div>
                   </TooltipHostBase>
                 </StyledTooltipHostBase>
@@ -1681,7 +1643,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           ariaLabel="Container max RU/s"
           errorMessage=""
           id="autoscaleRUValueField"
-          key=".0:$.$.2"
+          key=".0:$.2"
           max="9007199254740991"
           min={1000}
           onChange={[Function]}
@@ -1991,18 +1953,18 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             value="4000"
           >
             <div
-              className="ms-TextField is-required root-119"
+              className="ms-TextField is-required root-62"
             >
               <div
                 className="ms-TextField-wrapper"
               >
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-120"
+                  className="ms-TextField-fieldGroup fieldGroup-63"
                 >
                   <input
                     aria-invalid={false}
                     aria-label="Container max RU/s"
-                    className="ms-TextField-field field-121"
+                    className="ms-TextField-field field-64"
                     id="autoscaleRUValueField"
                     max="9007199254740991"
                     min={1000}
@@ -2021,11 +1983,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           </TextFieldBase>
         </StyledTextFieldBase>
         <Text
-          key=".0:$.$.3"
+          key=".0:$.3"
           variant="small"
         >
           <span
-            className="css-110"
+            className="css-54"
           >
             Your 
             container

src/Explorer/Controls/TreeComponent/treeComponent.less

@@ -59,10 +59,6 @@
       }
     }
 
-    [data-test="Gallery"]{
-      outline-offset: -1px;
-    }
-
     .selected {
       & > .treeNodeHeader {
         background-color: @AccentExtra;

src/Explorer/Explorer.tsx

@@ -3,9 +3,7 @@ import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
 import { sendMessage } from "Common/MessageHandler";
 import { Platform, configContext } from "ConfigContext";
 import { MessageTypes } from "Contracts/ExplorerContracts";
-import { getCopilotEnabled } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { IGalleryItem } from "Juno/JunoClient";
-import { requestDatabaseResourceTokens } from "Platform/Fabric/FabricUtil";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointValidation";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as ko from "knockout";
@@ -93,7 +91,7 @@ export default class Explorer {
   };
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
-  public phoenixClient: PhoenixClient;
+  private phoenixClient: PhoenixClient;
   constructor() {
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
@@ -275,7 +273,6 @@ export default class Explorer {
 
     const NINETY_DAYS_IN_MS = 7776000000;
     const ONE_DAY_IN_MS = 86400000;
-    const THREE_DAYS_IN_MS = 259200000;
     const isAccountNewerThanNinetyDays = isAccountNewerThanThresholdInMs(
       userContext.databaseAccount?.systemData?.createdAt || "",
       NINETY_DAYS_IN_MS,
@@ -295,32 +292,32 @@ export default class Explorer {
       }
     }
 
-    // Try Cosmos DB subscription - survey shown to 100% of users at day 1 in Data Explorer.
+    // Try Cosmos DB subscription - survey shown to random 25% of users at day 1 in Data Explorer.
     if (userContext.isTryCosmosDBSubscription) {
-      if (isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", ONE_DAY_IN_MS)) {
-        this.sendNPSMessage();
+      if (
+        isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", ONE_DAY_IN_MS) &&
+        this.getRandomInt(100) < 25
+      ) {
+        sendMessage({ type: MessageTypes.DisplayNPSSurvey });
+        localStorage.setItem("lastSubmitted", Date.now().toString());
       }
     } else {
-      // An existing account is older than 3 days but less than 90 days old. For existing account show to 100% of users in Data Explorer.
-      if (
-        !isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", THREE_DAYS_IN_MS) &&
-        isAccountNewerThanNinetyDays
-      ) {
-        this.sendNPSMessage();
+      // An existing account is lesser than 90 days old. For existing account show to random 10 % of users in Data Explorer.
+      if (isAccountNewerThanNinetyDays) {
+        if (this.getRandomInt(100) < 10) {
+          sendMessage({ type: MessageTypes.DisplayNPSSurvey });
+          localStorage.setItem("lastSubmitted", Date.now().toString());
+        }
       } else {
-        // An existing account is greater than 90 days. For existing account show to random 33% of users in Data Explorer.
-        if (this.getRandomInt(100) < 33) {
-          this.sendNPSMessage();
+        // An existing account is greater than 90 days. For existing account show to random 25 % of users in Data Explorer.
+        if (this.getRandomInt(100) < 25) {
+          sendMessage({ type: MessageTypes.DisplayNPSSurvey });
+          localStorage.setItem("lastSubmitted", Date.now().toString());
         }
       }
     }
   }
 
-  private sendNPSMessage() {
-    sendMessage({ type: MessageTypes.DisplayNPSSurvey });
-    localStorage.setItem("lastSubmitted", Date.now().toString());
-  }
-
   public async refreshDatabaseForResourceToken(): Promise<void> {
     const databaseId = userContext.parsedResourceToken?.databaseId;
     const collectionId = userContext.parsedResourceToken?.collectionId;
@@ -382,13 +379,6 @@ export default class Explorer {
   };
 
   public onRefreshResourcesClick = (): void => {
-    if (configContext.platform === Platform.Fabric) {
-      // Requesting the tokens will trigger a refresh of the databases
-      // TODO: Once the id is returned from Fabric, we can await this call and then refresh the databases here
-      requestDatabaseResourceTokens();
-      return;
-    }
-
     userContext.authType === AuthType.ResourceToken
       ? this.refreshDatabaseForResourceToken()
       : this.refreshAllDatabases();
@@ -413,7 +403,7 @@ export default class Explorer {
     this._isInitializingNotebooks = false;
   }
 
-  public async allocateContainer(poolId: PoolIdType, mode?: string): Promise<void> {
+  public async allocateContainer(poolId: PoolIdType): Promise<void> {
     const shouldUseNotebookStates = poolId === PoolIdType.DefaultPoolId ? true : false;
     const notebookServerInfo = shouldUseNotebookStates
       ? useNotebook.getState().notebookServerInfo
@@ -427,6 +417,10 @@ export default class Explorer {
       (notebookServerInfo === undefined ||
         (notebookServerInfo && notebookServerInfo.notebookServerEndpoint === undefined))
     ) {
+      const provisionData: IProvisionData = {
+        cosmosEndpoint: userContext?.databaseAccount?.properties?.documentEndpoint,
+        poolId: shouldUseNotebookStates ? undefined : poolId,
+      };
       const connectionStatus: ContainerConnectionInfo = {
         status: ConnectionStatusType.Connecting,
       };
@@ -434,26 +428,14 @@ export default class Explorer {
       shouldUseNotebookStates && useNotebook.getState().setConnectionInfo(connectionStatus);
 
       let connectionInfo;
-      let provisionData: IProvisionData;
       try {
         TelemetryProcessor.traceStart(Action.PhoenixConnection, {
           dataExplorerArea: Areas.Notebook,
         });
-        if (shouldUseNotebookStates) {
-          useNotebook.getState().setIsAllocating(true);
-          provisionData = {
-            cosmosEndpoint: userContext?.databaseAccount?.properties?.documentEndpoint,
-            poolId: undefined,
-          };
-        } else {
-          useQueryCopilot.getState().setIsAllocatingContainer(true);
-          provisionData = {
-            poolId: poolId,
-            databaseId: useTabs.getState().activeTab.collection.databaseId,
-            containerId: useTabs.getState().activeTab.collection.id(),
-            mode: mode,
-          };
-        }
+        shouldUseNotebookStates
+          ? useNotebook.getState().setIsAllocating(true)
+          : useQueryCopilot.getState().setIsAllocatingContainer(true);
+
         connectionInfo = await this.phoenixClient.allocateContainer(provisionData);
         if (!connectionInfo?.data?.phoenixServiceUrl) {
           throw new Error(`PhoenixServiceUrl is invalid!`);
@@ -469,21 +451,19 @@ export default class Explorer {
           error: getErrorMessage(error),
           errorStack: getErrorStack(error),
         });
-        if (shouldUseNotebookStates) {
-          connectionStatus.status = ConnectionStatusType.Failed;
-          shouldUseNotebookStates
-            ? useNotebook.getState().resetContainerConnection(connectionStatus)
-            : useQueryCopilot.getState().resetContainerConnection();
-          if (error?.status === HttpStatusCodes.Forbidden && error.message) {
-            useDialog.getState().showOkModalDialog("Connection Failed", `${error.message}`);
-          } else {
-            useDialog
-              .getState()
-              .showOkModalDialog(
-                "Connection Failed",
-                "We are unable to connect to the temporary workspace. Please try again in a few minutes. If the error persists, file a support ticket.",
-              );
-          }
+        connectionStatus.status = ConnectionStatusType.Failed;
+        shouldUseNotebookStates
+          ? useNotebook.getState().resetContainerConnection(connectionStatus)
+          : useQueryCopilot.getState().resetContainerConnection();
+        if (error?.status === HttpStatusCodes.Forbidden && error.message) {
+          useDialog.getState().showOkModalDialog("Connection Failed", `${error.message}`);
+        } else {
+          useDialog
+            .getState()
+            .showOkModalDialog(
+              "Connection Failed",
+              "We are unable to connect to the temporary workspace. Please try again in a few minutes. If the error persists, file a support ticket.",
+            );
         }
         throw error;
       } finally {
@@ -497,11 +477,11 @@ export default class Explorer {
     }
   }
 
-  public async setNotebookInfo(
+  private async setNotebookInfo(
     shouldUseNotebookStates: boolean,
     connectionInfo: IResponse<IPhoenixServiceInfo>,
     connectionStatus: DataModels.ContainerConnectionInfo,
-  ): Promise<void> {
+  ) {
     const containerData = {
       forwardingId: connectionInfo.data.forwardingId,
       dbAccountName: userContext.databaseAccount.name,
@@ -522,7 +502,6 @@ export default class Explorer {
     shouldUseNotebookStates
       ? useNotebook.getState().setNotebookServerInfo(noteBookServerInfo)
       : useQueryCopilot.getState().setNotebookServerInfo(noteBookServerInfo);
-
     shouldUseNotebookStates &&
       this.notebookManager?.notebookClient
         .getMemoryUsage()
@@ -710,9 +689,9 @@ export default class Explorer {
   private _initSettings() {
     if (!ExplorerSettings.hasSettingsDefined()) {
       ExplorerSettings.createDefaultSettings();
-    } else {
-      ExplorerSettings.ensurePriorityLevel();
     }
+
+    ExplorerSettings.ensurePriorityLevel();
   }
 
   public uploadFile(
@@ -1385,15 +1364,6 @@ export default class Explorer {
     await this.refreshSampleData();
   }
 
-  public async configureCopilot(): Promise<void> {
-    if (userContext.apiType !== "SQL" || !userContext.subscriptionId) {
-      return;
-    }
-    const copilotEnabled = await getCopilotEnabled();
-    useQueryCopilot.getState().setCopilotEnabled(copilotEnabled);
-    useQueryCopilot.getState().setCopilotUserDBEnabled(copilotEnabled);
-  }
-
   public async refreshSampleData(): Promise<void> {
     if (!userContext.sampleDataConnectionInfo) {
       return;

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

@@ -367,7 +367,7 @@ describe("GraphExplorer", () => {
       });
 
       it("should submit g.V() as docdb query with proper parameters", () => {
-        expect(queryDocuments).toHaveBeenCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, {
+        expect(queryDocuments).toBeCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, {
           maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
           enableCrossPartitionQuery: true,
         });
@@ -404,7 +404,7 @@ describe("GraphExplorer", () => {
       });
 
       it("should submit g.V() as docdb query with proper parameters", () => {
-        expect(queryDocuments).toHaveBeenCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, {
+        expect(queryDocuments).toBeCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, {
           maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
           enableCrossPartitionQuery: true,
         });

src/Explorer/Graph/GraphStyleComponent/GraphStyleComponent.test.tsx

@@ -43,7 +43,7 @@ describe("Graph Style Component", () => {
     expect(asFragment).toMatchSnapshot();
   });
 
-  it("should render node properties dropdown list", () => {
+  it("should render node properties dropdown list ", () => {
     const dropDownList = screen.getByText("Show vertex (node) as");
     expect(dropDownList).toBeDefined();
   });

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

@@ -345,7 +345,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
   describe("Open Postgres and vCore Mongo buttons", () => {
     const openPostgresShellButtonLabel = "Open PSQL shell";
-    const openVCoreMongoShellButtonLabel = "Open MongoDB (vCore) shell";
+    const openVCoreMongoShellButtonLabel = "Open MongoDB (vcore) shell";
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,3 +1,6 @@
+import { Action } from "Shared/Telemetry/TelemetryConstants";
+import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
+import { ReactTabKind, useTabs } from "hooks/useTabs";
 import * as React from "react";
 import AddCollectionIcon from "../../../../images/AddCollection.svg";
 import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
@@ -47,36 +50,31 @@ export function createStaticCommandBarButtons(
     return createStaticCommandBarButtonsForResourceToken(container, selectedNodeState);
   }
 
+  const newCollectionBtn = createNewCollectionGroup(container);
   const buttons: CommandButtonComponentProps[] = [];
 
-  // Avoid starting with a divider
-  const addDivider = () => {
-    if (buttons.length > 0) {
+  buttons.push(newCollectionBtn);
+  if (
+    configContext.platform !== Platform.Fabric &&
+    userContext.apiType !== "Tables" &&
+    userContext.apiType !== "Cassandra"
+  ) {
+    const addSynapseLink = createOpenSynapseLinkDialogButton(container);
+
+    if (addSynapseLink) {
       buttons.push(createDivider());
-    }
-  };
-
-  if (configContext.platform !== Platform.Fabric) {
-    const newCollectionBtn = createNewCollectionGroup(container);
-    buttons.push(newCollectionBtn);
-    if (userContext.apiType !== "Tables" && userContext.apiType !== "Cassandra") {
-      const addSynapseLink = createOpenSynapseLinkDialogButton(container);
-
-      if (addSynapseLink) {
-        addDivider();
-        buttons.push(addSynapseLink);
-      }
-    }
-
-    if (userContext.apiType !== "Tables") {
-      newCollectionBtn.children = [createNewCollectionGroup(container)];
-      const newDatabaseBtn = createNewDatabase(container);
-      newCollectionBtn.children.push(newDatabaseBtn);
+      buttons.push(addSynapseLink);
     }
   }
 
+  if (userContext.apiType !== "Tables" && configContext.platform !== Platform.Fabric) {
+    newCollectionBtn.children = [createNewCollectionGroup(container)];
+    const newDatabaseBtn = createNewDatabase(container);
+    newCollectionBtn.children.push(newDatabaseBtn);
+  }
+
   if (useNotebook.getState().isNotebookEnabled) {
-    addDivider();
+    buttons.push(createDivider());
     const notebookButtons: CommandButtonComponentProps[] = [];
 
     const newNotebookButton = createNewNotebookButton(container);
@@ -130,7 +128,7 @@ export function createStaticCommandBarButtons(
     const isQuerySupported = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
 
     if (isQuerySupported) {
-      addDivider();
+      buttons.push(createDivider());
       const newSqlQueryBtn = createNewSQLQueryButton(selectedNodeState);
       buttons.push(newSqlQueryBtn);
     }
@@ -334,8 +332,13 @@ function createNewSQLQueryButton(selectedNodeState: SelectedNodeState): CommandB
       iconSrc: AddSqlQueryIcon,
       iconAlt: label,
       onCommandClick: () => {
-        const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
-        selectedCollection && selectedCollection.onNewQueryClick(selectedCollection);
+        if (useSelectedNode.getState().isQueryCopilotCollectionSelected()) {
+          useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot);
+          traceOpen(Action.OpenQueryCopilotFromNewQuery, { apiType: userContext.apiType });
+        } else {
+          const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
+          selectedCollection && selectedCollection.onNewQueryClick(selectedCollection);
+        }
       },
       commandButtonLabel: label,
       ariaLabel: label,
@@ -515,7 +518,7 @@ function createOpenTerminalButtonByKind(
       case ViewModels.TerminalKind.Postgres:
         return "PSQL";
       case ViewModels.TerminalKind.VCoreMongo:
-        return "MongoDB (vCore)";
+        return "MongoDB (vcore)";
       default:
         return "";
     }

src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx

@@ -35,7 +35,7 @@ describe("CommandBarUtil tests", () => {
 
     // Click gets called
     converted.onClick();
-    expect(btn.onCommandClick).toHaveBeenCalled();
+    expect(btn.onCommandClick).toBeCalled();
   });
 
   it("should convert NavbarButtonConfig to split button", () => {

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -6,7 +6,6 @@ import {
   IDropdownOption,
   IDropdownStyles,
 } from "@fluentui/react";
-import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as React from "react";
 import _ from "underscore";
 import ChevronDownIcon from "../../../../images/Chevron_down.svg";
@@ -58,11 +57,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
         },
         onClick: (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => {
           btn.onCommandClick(ev);
-          let copilotEnabled = false;
-          if (useQueryCopilot.getState().copilotEnabled && useQueryCopilot.getState().copilotUserDBEnabled) {
-            copilotEnabled = useQueryCopilot.getState().copilotEnabledforExecution;
-          }
-          TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label, copilotEnabled });
+          TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label });
         },
         key: `${btn.commandButtonLabel}${index}`,
         text: label,

src/Explorer/Notebook/NotebookComponent/epics.test.ts

@@ -1,14 +1,14 @@
-import { makeNotebookRecord } from "@nteract/commutable";
-import { actions, state } from "@nteract/core";
 import * as Immutable from "immutable";
 import { StateObservable } from "redux-observable";
 import { Subject, of } from "rxjs";
 import { toArray } from "rxjs/operators";
+import { makeNotebookRecord } from "@nteract/commutable";
+import { actions, state, epics } from "@nteract/core";
 import * as sinon from "sinon";
 
-import { NotebookUtil } from "../NotebookUtil";
-import { launchWebSocketKernelEpic } from "./epics";
 import { CdbAppState, makeCdbRecord } from "./types";
+import { launchWebSocketKernelEpic } from "./epics";
+import { NotebookUtil } from "../NotebookUtil";
 
 import { sessions } from "rx-jupyter";
 
@@ -117,7 +117,7 @@ describe("launchWebSocketKernelEpic", () => {
   const kernelRef = "fake";
 
   it("launches remote kernels", async () => {
-    const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+    const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
     const cwd = "/";
     const kernelId = "123";
@@ -183,7 +183,7 @@ describe("launchWebSocketKernelEpic", () => {
   });
 
   it("launches any kernel with no kernelspecs in the state", async () => {
-    const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+    const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
     const cwd = "/";
     const kernelId = "123";
@@ -236,7 +236,7 @@ describe("launchWebSocketKernelEpic", () => {
   });
 
   it("launches no kernel if no kernel is specified and state has no kernelspecs", async () => {
-    const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+    const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
     const cwd = "/";
     const kernelId = "123";
@@ -289,7 +289,7 @@ describe("launchWebSocketKernelEpic", () => {
   });
 
   it("emits an error if backend returns an error", async () => {
-    const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+    const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
     const cwd = "/";
     const action$ = of(
@@ -388,7 +388,7 @@ describe("launchWebSocketKernelEpic", () => {
     });
 
     it("launches supported kernel in kernelspecs", async () => {
-      const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+      const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
       const action$ = of(
         actions.launchKernelByName({
@@ -409,7 +409,7 @@ describe("launchWebSocketKernelEpic", () => {
     });
 
     it("launches undefined kernel uses default kernel from kernelspecs", async () => {
-      const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+      const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
       const action$ = of(
         actions.launchKernelByName({
@@ -431,7 +431,7 @@ describe("launchWebSocketKernelEpic", () => {
     });
 
     it("launches unsupported kernel uses default kernel from kernelspecs", async () => {
-      const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+      const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
       const action$ = of(
         actions.launchKernelByName({
@@ -453,7 +453,7 @@ describe("launchWebSocketKernelEpic", () => {
     });
 
     it("launches unsupported kernel uses kernelspecs with similar name", async () => {
-      const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+      const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
       const action$ = of(
         actions.launchKernelByName({

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -69,8 +69,8 @@ const addInitialCodeCellEpic = (
   state$: StateObservable<AppState>,
 ): Observable<{} | actions.CreateCellBelow> => {
   return action$.pipe(
-    ofType(actions.FETCH_CONTENT_FULFILLED) as any,
-    mergeMap((action: any) => {
+    ofType(actions.FETCH_CONTENT_FULFILLED),
+    mergeMap((action) => {
       const state = state$.value;
       const contentRef = action.payload.contentRef;
       const model = selectors.model(state, { contentRef });
@@ -116,7 +116,7 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
  */
 export const acquireKernelInfoEpic = (action$: Observable<actions.NewKernelAction>) => {
   return action$.pipe(
-    ofType(actions.LAUNCH_KERNEL_SUCCESSFUL) as any,
+    ofType(actions.LAUNCH_KERNEL_SUCCESSFUL),
     switchMap((action: actions.NewKernelAction) => {
       const {
         payload: {
@@ -271,9 +271,9 @@ export const launchWebSocketKernelEpic = (
   state$: StateObservable<CdbAppState>,
 ) => {
   return action$.pipe(
-    ofType(actions.LAUNCH_KERNEL_BY_NAME) as any,
+    ofType(actions.LAUNCH_KERNEL_BY_NAME),
     // Only accept jupyter servers for the host with this epic
-    filter(() => selectors.isCurrentHostJupyter(state$.value as never)),
+    filter(() => selectors.isCurrentHostJupyter(state$.value)),
     switchMap((action: actions.LaunchKernelByNameAction) => {
       const state = state$.value;
       const host = selectors.currentHost(state);
@@ -382,7 +382,7 @@ export const restartWebSocketKernelEpic = (
   state$: StateObservable<AppState>,
 ) =>
   action$.pipe(
-    ofType(actions.RESTART_KERNEL) as any,
+    ofType(actions.RESTART_KERNEL),
     concatMap((action: actions.RestartKernel) => {
       const state = state$.value;
 
@@ -449,7 +449,7 @@ export const restartWebSocketKernelEpic = (
       });
 
       const awaitKernelReady = action$.pipe(
-        ofType(actions.LAUNCH_KERNEL_SUCCESSFUL) as any,
+        ofType(actions.LAUNCH_KERNEL_SUCCESSFUL),
         filter((action: actions.NewKernelAction | actions.RestartKernel) => action.payload.kernelRef === newKernelRef),
         take(1),
         timeout(60000), // If kernel doesn't come up within this interval we will abort follow-on actions.
@@ -492,9 +492,9 @@ const changeWebSocketKernelEpic = (
   state$: StateObservable<AppState>,
 ) => {
   return action$.pipe(
-    ofType(actions.CHANGE_KERNEL_BY_NAME) as any,
+    ofType(actions.CHANGE_KERNEL_BY_NAME),
     // Only accept jupyter servers for the host with this epic
-    filter(() => selectors.isCurrentHostJupyter(state$.value as never)),
+    filter(() => selectors.isCurrentHostJupyter(state$.value)),
     switchMap((action: actions.ChangeKernelByName) => {
       const {
         payload: { contentRef, oldKernelRef, kernelSpecName },
@@ -574,8 +574,8 @@ const focusInitialCodeCellEpic = (
   state$: StateObservable<AppState>,
 ): Observable<{} | actions.FocusCell> => {
   return action$.pipe(
-    ofType(actions.CREATE_CELL_APPEND) as any,
-    mergeMap((action: any) => {
+    ofType(actions.CREATE_CELL_APPEND),
+    mergeMap((action) => {
       const state = state$.value;
       const contentRef = action.payload.contentRef;
       const model = selectors.model(state, { contentRef });
@@ -616,8 +616,8 @@ const notificationsToUserEpic = (action$: Observable<any>, state$: StateObservab
       actions.SAVE_FULFILLED,
       actions.SAVE_FAILED,
       actions.FETCH_CONTENT_FAILED,
-    ) as any,
-    mergeMap((action: any) => {
+    ),
+    mergeMap((action) => {
       switch (action.type) {
         case actions.RESTART_KERNEL_SUCCESSFUL: {
           const title = "Kernel restart";
@@ -662,8 +662,8 @@ const handleKernelConnectionLostEpic = (
   state$: StateObservable<CdbAppState>,
 ): Observable<CdbActions.UpdateKernelRestartDelayAction | actions.RestartKernel | {}> => {
   return action$.pipe(
-    ofType(actions.UPDATE_DISPLAY_FAILED) as any,
-    mergeMap((action: any) => {
+    ofType(actions.UPDATE_DISPLAY_FAILED),
+    mergeMap((action) => {
       const state = state$.value;
 
       const msg = "Notebook was disconnected from kernel";
@@ -721,8 +721,8 @@ export const cleanKernelOnConnectionLostEpic = (
   state$: StateObservable<AppState>,
 ): Observable<actions.KillKernelSuccessful> => {
   return action$.pipe(
-    ofType(actions.UPDATE_DISPLAY_FAILED) as any,
-    switchMap((action: any) => {
+    ofType(actions.UPDATE_DISPLAY_FAILED),
+    switchMap((action) => {
       const contentRef = action.payload.contentRef;
       const kernelRef = selectors.kernelRefByContentRef(state$.value, { contentRef });
       return of(
@@ -744,8 +744,8 @@ const executeFocusedCellAndFocusNextEpic = (
   state$: StateObservable<AppState>,
 ): Observable<{} | actions.FocusNextCellEditor> => {
   return action$.pipe(
-    ofType(CdbActions.EXECUTE_FOCUSED_CELL_AND_FOCUS_NEXT) as any,
-    mergeMap((action: any) => {
+    ofType(CdbActions.EXECUTE_FOCUSED_CELL_AND_FOCUS_NEXT),
+    mergeMap((action) => {
       const contentRef = action.payload.contentRef;
       return concat(
         of(actions.executeFocusedCell({ contentRef })),
@@ -765,8 +765,8 @@ const closeUnsupportedMimetypesEpic = (
   state$: StateObservable<AppState>,
 ): Observable<{}> => {
   return action$.pipe(
-    ofType(actions.FETCH_CONTENT_FULFILLED) as any,
-    mergeMap((action: any) => {
+    ofType(actions.FETCH_CONTENT_FULFILLED),
+    mergeMap((action) => {
       const mimetype = action.payload.model.mimetype;
       if (!TextFile.handles(mimetype)) {
         const filepath = action.payload.filepath;
@@ -796,8 +796,8 @@ const closeContentFailedToFetchEpic = (
   state$: StateObservable<AppState>,
 ): Observable<{}> => {
   return action$.pipe(
-    ofType(actions.FETCH_CONTENT_FAILED) as any,
-    mergeMap((action: any) => {
+    ofType(actions.FETCH_CONTENT_FAILED),
+    mergeMap((action) => {
       const filepath = action.payload.filepath;
       // Close tab and show error message
       useTabs
@@ -818,7 +818,7 @@ const traceNotebookTelemetryEpic = (
   state$: StateObservable<CdbAppState>,
 ): Observable<{}> => {
   return action$.pipe(
-    ofType(cdbActions.TRACE_NOTEBOOK_TELEMETRY) as any,
+    ofType(cdbActions.TRACE_NOTEBOOK_TELEMETRY),
     mergeMap((action: cdbActions.TraceNotebookTelemetryAction) => {
       const state = state$.value;
 
@@ -844,7 +844,7 @@ const traceNotebookInfoEpic = (
   state$: StateObservable<AppState>,
 ): Observable<{} | cdbActions.TraceNotebookTelemetryAction> => {
   return action$.pipe(
-    ofType(actions.FETCH_CONTENT_FULFILLED) as any,
+    ofType(actions.FETCH_CONTENT_FULFILLED),
     mergeMap((action: { payload: any }) => {
       const state = state$.value;
       const contentRef = action.payload.contentRef;
@@ -897,7 +897,7 @@ const traceNotebookKernelEpic = (
   state$: StateObservable<AppState>,
 ): Observable<cdbActions.TraceNotebookTelemetryAction> => {
   return action$.pipe(
-    ofType(actions.LAUNCH_KERNEL_SUCCESSFUL) as any,
+    ofType(actions.LAUNCH_KERNEL_SUCCESSFUL),
     mergeMap((action: { payload: any; type: string }) => {
       return of(
         cdbActions.traceNotebookTelemetry({
@@ -917,8 +917,8 @@ const resetCellStatusOnExecuteCanceledEpic = (
   state$: StateObservable<AppState>,
 ): Observable<actions.UpdateCellStatus> => {
   return action$.pipe(
-    ofType(actions.EXECUTE_CANCELED) as any,
-    mergeMap((action: any) => {
+    ofType(actions.EXECUTE_CANCELED),
+    mergeMap((action) => {
       const contentRef = action.payload.contentRef;
       const model = state$.value.core.entities.contents.byRef.get(contentRef).model;
       let busyCellIds: string[] = [];
@@ -960,8 +960,8 @@ export function autoSaveCurrentContentEpic(
   state$: StateObservable<AppState>,
 ): Observable<actions.Save> {
   return state$.pipe(
-    map((state) => autoSaveInterval(state)) as any,
-    switchMap((time) => interval(time as number)) as any,
+    map((state) => autoSaveInterval(state)),
+    switchMap((time) => interval(time)),
     mergeMap(() => {
       const state = state$.value;
       return from(
@@ -976,7 +976,7 @@ export function autoSaveCurrentContentEpic(
           )
           .keys(),
       );
-    }) as any,
+    }),
     filter((contentRef: ContentRef) => {
       const model = selectors.model(state$.value, { contentRef });
       const content = selectors.content(state$.value, { contentRef });
@@ -985,12 +985,12 @@ export function autoSaveCurrentContentEpic(
         model.type === "notebook" &&
         NotebookUtil.getContentProviderType(content.filepath) !== NotebookContentProviderType.JupyterContentProviderType
       ) {
-        return selectors.notebook.isDirty(model as never);
+        return selectors.notebook.isDirty(model);
       }
       return false;
-    }) as any,
-    map((contentRef: ContentRef) => actions.save({ contentRef })) as any,
-  ) as any;
+    }),
+    map((contentRef: ContentRef) => actions.save({ contentRef })),
+  );
 }
 
 export const allEpics = [

src/Explorer/Notebook/NotebookComponent/store.ts

@@ -34,11 +34,11 @@ export default function configureStore(
 
   const protect = (epic: Epic) => {
     return (action$: Observable<any>, state$: any, dependencies: any) =>
-      epic(action$ as any, state$, dependencies).pipe(
+      epic(action$, state$, dependencies).pipe(
         catchError((error, caught) => {
           traceFailure("Epic failure", error);
           return caught;
-        }) as any,
+        }),
       );
   };
 
@@ -52,7 +52,7 @@ export default function configureStore(
   };
 
   const protectEpics = (epics: Epic[]): Epic[] => {
-    return epics.map((epic) => protect(epic)) as any;
+    return epics.map((epic) => protect(epic));
   };
 
   const filteredCoreEpics = getCoreEpics(autoStartKernelOnNotebookOpen);
@@ -64,7 +64,7 @@ export default function configureStore(
       core: coreReducer as any,
       cdb: cdbReducer,
     },
-    epics: protectEpics([...filteredCoreEpics, ...allEpics] as any),
+    epics: protectEpics([...filteredCoreEpics, ...allEpics]),
     epicDependencies: { contentProvider },
     epicMiddleware: customMiddlewares.concat(catchErrorMiddleware),
     enhancer: composeEnhancers,
@@ -106,5 +106,5 @@ export const getCoreEpics = (autoStartKernelOnNotebookOpen: boolean): Epic[] =>
     filteredCoreEpics.push(coreEpics.launchKernelWhenNotebookSetEpic);
   }
 
-  return filteredCoreEpics as any;
+  return filteredCoreEpics;
 };

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -1431,6 +1431,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       this.setState({ isExecuting: false });
       TelemetryProcessor.traceSuccess(Action.CreateCollection, telemetryData, startKey);
       useSidePanel.getState().closeSidePanel();
+      // open NPS Survey Dialog once the collection is created
+      this.props.explorer.openNPSSurveyDialog();
     } catch (error) {
       const errorMessage: string = getErrorMessage(error);
       this.setState({ isExecuting: false, errorMessage, showErrorDetails: true });

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

@@ -23,7 +23,7 @@ describe("Cassandra add collection pane test", () => {
     expect(screen.getByRole("combobox", { name: "Choose existing keyspace id" })).toBeDefined();
   });
 
-  it("enter Keyspace name", () => {
+  it("enter Keyspace name ", () => {
     fireEvent.change(screen.getByRole("textbox", { name: "Keyspace id" }), { target: { value: "table1" } });
     expect(screen.getByText("CREATE TABLE table1.")).toBeDefined();
   });

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx

@@ -314,7 +314,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
         </Stack>
 
         {!isServerlessAccount() && isKeyspaceShared && !keyspaceCreateNew && (
-          <Stack horizontal verticalAlign="center">
+          <Stack>
             <input
               type="checkbox"
               id="tableSharedThroughput"

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -35,11 +35,10 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
 
   const collectionName = getCollectionName().toLocaleLowerCase();
   const paneTitle = "Delete " + collectionName;
-
   const onSubmit = async (): Promise<void> => {
     const collection = useSelectedNode.getState().findSelectedCollection();
     if (!collection || inputCollectionName !== collection.id()) {
-      const errorMessage = "Input id " + inputCollectionName + " does not match the selected " + collection.id();
+      const errorMessage = "Input " + collectionName + " id does not match the selected " + collectionName;
       setFormError(errorMessage);
       NotificationConsoleUtils.logConsoleError(
         `Error while deleting ${collectionName} ${collection.id()}: ${errorMessage}`,

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

@@ -32,7 +32,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               variant="small"
             >
               <span
-                className="css-109"
+                className="css-53"
               >
                 Confirm by typing the 
                 container
@@ -340,19 +340,19 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                 value=""
               >
                 <div
-                  className="ms-TextField is-required root-111"
+                  className="ms-TextField is-required root-55"
                 >
                   <div
                     className="ms-TextField-wrapper"
                   >
                     <div
-                      className="ms-TextField-fieldGroup fieldGroup-112"
+                      className="ms-TextField-fieldGroup fieldGroup-56"
                     >
                       <input
                         aria-invalid={false}
                         aria-label="Confirm by typing the container id"
                         autoFocus={true}
-                        className="ms-TextField-field field-113"
+                        className="ms-TextField-field field-57"
                         id="confirmCollectionId"
                         onBlur={[Function]}
                         onChange={[Function]}
@@ -1259,7 +1259,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         "iconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -1285,7 +1285,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         "menuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -1297,16 +1297,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -1337,7 +1335,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "display": "inline-block",
                             "padding": "0 16px",
                             "selectors": Object {
-                              ":active > span": Object {
+                              ":active > *": Object {
                                 "left": 0,
                                 "position": "relative",
                                 "top": 0,
@@ -1364,7 +1362,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "MsHighContrastAdjust": "none",
                                 "backgroundColor": "WindowText",
                                 "borderColor": "WindowText",
@@ -1389,16 +1387,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -1432,7 +1428,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "backgroundColor": "#f3f2f1",
                             "color": "#d2d0ce",
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "borderColor": "GrayText",
                                 "color": "GrayText",
@@ -1449,7 +1445,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "border": "1px solid #106ebe",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "Highlight",
                               "borderColor": "Highlight",
                               "color": "Window",
@@ -1461,7 +1457,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "border": "1px solid #005a9e",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "WindowText",
                               "borderColor": "WindowText",
@@ -1477,13 +1473,12 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "overflow": "hidden",
                           "padding": 0,
                           "position": "absolute",
-                          "whiteSpace": "nowrap",
                           "width": 1,
                         },
                         "splitButtonContainer": Array [
                           Object {
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "border": "none",
                               },
                             },
@@ -1494,16 +1489,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid #ffffff",
-                                "borderRadius": undefined,
                                 "bottom": 3,
                                 "content": "\\"\\"",
                                 "left": 3,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": "none",
                                 "position": "absolute",
                                 "right": 3,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "none",
                                     "bottom": -2,
                                     "left": -2,
@@ -1526,21 +1519,13 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                                 "borderBottomRightRadius": "0",
                                 "borderRight": "none",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                               },
                               ".ms-Button--primary": Object {
                                 "border": "none",
                                 "borderBottomRightRadius": "0",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                                 "selectors": Object {
-                                  ":active": Object {
-                                    "border": "none",
-                                  },
-                                  ":hover": Object {
-                                    "border": "none",
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "MsHighContrastAdjust": "none",
                                     "backgroundColor": "Window",
                                     "border": "1px solid WindowText",
@@ -1553,7 +1538,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                               ".ms-Button--primary + .ms-Button": Object {
                                 "border": "none",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "1px solid WindowText",
                                     "borderLeftWidth": "0",
                                   },
@@ -1566,7 +1551,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -1580,7 +1565,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -1594,7 +1579,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "border": "none",
                           "outline": "none",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "Window",
                               "borderColor": "GrayText",
@@ -1610,7 +1595,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Highlight",
                                   "color": "Window",
                                 },
@@ -1619,7 +1604,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             ".ms-Button.is-disabled": Object {
                               "color": "#a19f9d",
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Window",
                                   "borderColor": "GrayText",
                                   "color": "GrayText",
@@ -1635,7 +1620,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                               },
                             },
@@ -1647,7 +1632,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "WindowText",
                               },
                             },
@@ -1660,7 +1645,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "position": "absolute",
                           "right": 31,
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "GrayText",
                             },
                           },
@@ -1682,18 +1667,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                               ":hover": Object {
                                 "backgroundColor": "#106ebe",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "Highlight",
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
-                                "backgroundColor": "Canvas",
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
                               },
                             },
                           },
                           Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               ".ms-Button-menuIcon": Object {
                                 "color": "WindowText",
                               },
@@ -1743,7 +1728,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "selectors": Object {
                               ".ms-Button--primary": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "backgroundColor": "Window",
                                     "borderColor": "GrayText",
                                     "color": "GrayText",
@@ -1752,7 +1737,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                               },
                               ".ms-Button-menuIcon": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "GrayText",
                                   },
                                 },
@@ -1760,7 +1745,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                               ":hover": Object {
                                 "cursor": "default",
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "border": "1px solid GrayText",
                                 "color": "GrayText",
@@ -1782,16 +1767,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "selectors": Object {
                             ".ms-Fabric--isFocusVisible &:focus:after": Object {
                               "border": "1px solid #ffffff",
-                              "borderRadius": undefined,
                               "bottom": 3,
                               "content": "\\"\\"",
                               "left": 3,
                               "outline": "1px solid #605e5c",
-                              "pointerEvents": undefined,
                               "position": "absolute",
                               "right": 3,
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "border": "none",
                                   "bottom": -2,
                                   "left": -2,
@@ -1813,7 +1796,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         "splitButtonMenuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -2103,7 +2086,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   >
                     <button
                       aria-label="OK"
-                      className="ms-Button ms-Button--primary root-122"
+                      className="ms-Button ms-Button--primary root-66"
                       data-is-focusable={true}
                       id="sidePanelOkButton"
                       onClick={[Function]}
@@ -2115,16 +2098,16 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       type="submit"
                     >
                       <span
-                        className="ms-Button-flexContainer flexContainer-123"
+                        className="ms-Button-flexContainer flexContainer-67"
                         data-automationid="splitbuttonprimary"
                       >
                         <span
-                          className="ms-Button-textContainer textContainer-124"
+                          className="ms-Button-textContainer textContainer-68"
                         >
                           <span
-                            className="ms-Button-label label-126"
-                            id="id__5"
-                            key="id__5"
+                            className="ms-Button-label label-70"
+                            id="id__3"
+                            key="id__3"
                           >
                             OK
                           </span>

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

@@ -306,7 +306,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
               }
             >
               <label
-                className="ms-Label root-109"
+                className="ms-Label root-53"
               >
                 Partition key value
               </label>
@@ -316,11 +316,11 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
             horizontal={true}
           >
             <div
-              className="ms-Stack css-110"
+              className="ms-Stack css-54"
             >
               <Dropdown
                 defaultSelectedKey="string"
-                key=".0:$.$.0"
+                key=".0:$.0"
                 label="Key"
                 onChange={[Function]}
                 options={
@@ -661,7 +661,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         },
                       ]
                     }
-                    responsiveMode={0}
+                    responsiveMode={3}
                     styles={[Function]}
                     tabIndex={0}
                     theme={
@@ -1225,7 +1225,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           }
                         >
                           <label
-                            className="ms-Label ms-Dropdown-label root-129"
+                            className="ms-Label ms-Dropdown-label root-71"
                             id="Dropdown0-label"
                           >
                             Key
@@ -1236,7 +1236,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         aria-expanded="false"
                         aria-haspopup="listbox"
                         aria-labelledby="Dropdown0-label Dropdown0-option"
-                        className="ms-Dropdown dropdown-111"
+                        className="ms-Dropdown dropdown-55"
                         data-is-focusable={true}
                         data-ktp-target={true}
                         id="Dropdown0"
@@ -1251,23 +1251,25 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         tabIndex={0}
                       >
                         <span
+                          aria-atomic={true}
                           aria-invalid={false}
-                          className="ms-Dropdown-title title-156"
+                          aria-live="polite"
+                          className="ms-Dropdown-title title-97"
                           id="Dropdown0-option"
                         >
                           String
                         </span>
                         <span
-                          className="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+                          className="ms-Dropdown-caretDownWrapper caretDownWrapper-57"
                         >
                           <StyledIconBase
                             aria-hidden={true}
-                            className="ms-Dropdown-caretDown caretDown-114"
+                            className="ms-Dropdown-caretDown caretDown-58"
                             iconName="ChevronDown"
                           >
                             <IconBase
                               aria-hidden={true}
-                              className="ms-Dropdown-caretDown caretDown-114"
+                              className="ms-Dropdown-caretDown caretDown-58"
                               iconName="ChevronDown"
                               styles={[Function]}
                               theme={
@@ -1546,7 +1548,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             >
                               <i
                                 aria-hidden={true}
-                                className="ms-Dropdown-caretDown caretDown-132"
+                                className="ms-Dropdown-caretDown caretDown-73"
                                 data-icon-name="ChevronDown"
                               >
                                 
@@ -1561,7 +1563,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
               </Dropdown>
               <StyledTextFieldBase
                 id="confirmCollectionId"
-                key=".0:$.$.1"
+                key=".0:$.1"
                 label="Value"
                 onChange={[Function]}
                 tabIndex={0}
@@ -1850,7 +1852,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   validateOnLoad={true}
                 >
                   <div
-                    className="ms-TextField root-134"
+                    className="ms-TextField root-75"
                   >
                     <div
                       className="ms-TextField-wrapper"
@@ -2139,7 +2141,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           }
                         >
                           <label
-                            className="ms-Label root-109"
+                            className="ms-Label root-53"
                             htmlFor="confirmCollectionId"
                             id="TextFieldLabel3"
                           >
@@ -2148,12 +2150,12 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         </LabelBase>
                       </StyledLabelBase>
                       <div
-                        className="ms-TextField-fieldGroup fieldGroup-135"
+                        className="ms-TextField-fieldGroup fieldGroup-76"
                       >
                         <input
                           aria-invalid={false}
                           aria-labelledby="TextFieldLabel3"
-                          className="ms-TextField-field field-136"
+                          className="ms-TextField-field field-77"
                           id="confirmCollectionId"
                           onBlur={[Function]}
                           onChange={[Function]}
@@ -2462,7 +2464,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
               }
             >
               <label
-                className="ms-Label root-109"
+                className="ms-Label root-53"
               >
                 Enter input parameters (if any)
               </label>
@@ -2472,11 +2474,11 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
             horizontal={true}
           >
             <div
-              className="ms-Stack css-110"
+              className="ms-Stack css-54"
             >
               <Dropdown
                 defaultSelectedKey="string"
-                key=".0:$.$.0"
+                key=".0:$.0"
                 label="Key"
                 onChange={[Function]}
                 options={
@@ -2817,7 +2819,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         },
                       ]
                     }
-                    responsiveMode={0}
+                    responsiveMode={3}
                     styles={[Function]}
                     tabIndex={0}
                     theme={
@@ -3099,12 +3101,12 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     >
                       <StyledLabelBase
                         className="ms-Dropdown-label"
-                        id="Dropdown6-label"
+                        id="Dropdown4-label"
                         styles={[Function]}
                       >
                         <LabelBase
                           className="ms-Dropdown-label"
-                          id="Dropdown6-label"
+                          id="Dropdown4-label"
                           styles={[Function]}
                           theme={
                             Object {
@@ -3381,8 +3383,8 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           }
                         >
                           <label
-                            className="ms-Label ms-Dropdown-label root-129"
-                            id="Dropdown6-label"
+                            className="ms-Label ms-Dropdown-label root-71"
+                            id="Dropdown4-label"
                           >
                             Key
                           </label>
@@ -3391,11 +3393,11 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       <div
                         aria-expanded="false"
                         aria-haspopup="listbox"
-                        aria-labelledby="Dropdown6-label Dropdown6-option"
-                        className="ms-Dropdown dropdown-111"
+                        aria-labelledby="Dropdown4-label Dropdown4-option"
+                        className="ms-Dropdown dropdown-55"
                         data-is-focusable={true}
                         data-ktp-target={true}
-                        id="Dropdown6"
+                        id="Dropdown4"
                         onBlur={[Function]}
                         onChange={[Function]}
                         onClick={[Function]}
@@ -3407,23 +3409,25 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         tabIndex={0}
                       >
                         <span
+                          aria-atomic={true}
                           aria-invalid={false}
-                          className="ms-Dropdown-title title-156"
-                          id="Dropdown6-option"
+                          aria-live="polite"
+                          className="ms-Dropdown-title title-97"
+                          id="Dropdown4-option"
                         >
                           String
                         </span>
                         <span
-                          className="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+                          className="ms-Dropdown-caretDownWrapper caretDownWrapper-57"
                         >
                           <StyledIconBase
                             aria-hidden={true}
-                            className="ms-Dropdown-caretDown caretDown-114"
+                            className="ms-Dropdown-caretDown caretDown-58"
                             iconName="ChevronDown"
                           >
                             <IconBase
                               aria-hidden={true}
-                              className="ms-Dropdown-caretDown caretDown-114"
+                              className="ms-Dropdown-caretDown caretDown-58"
                               iconName="ChevronDown"
                               styles={[Function]}
                               theme={
@@ -3702,7 +3706,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             >
                               <i
                                 aria-hidden={true}
-                                className="ms-Dropdown-caretDown caretDown-132"
+                                className="ms-Dropdown-caretDown caretDown-73"
                                 data-icon-name="ChevronDown"
                               >
                                 
@@ -3718,7 +3722,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
               <StyledTextFieldBase
                 defaultValue=""
                 id="confirmCollectionId"
-                key=".0:$.$.1"
+                key=".0:$.1"
                 label="Param"
                 onChange={[Function]}
                 tabIndex={0}
@@ -4008,19 +4012,19 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   validateOnLoad={true}
                 >
                   <div
-                    className="ms-TextField root-134"
+                    className="ms-TextField root-75"
                   >
                     <div
                       className="ms-TextField-wrapper"
                     >
                       <StyledLabelBase
                         htmlFor="confirmCollectionId"
-                        id="TextFieldLabel9"
+                        id="TextFieldLabel7"
                         styles={[Function]}
                       >
                         <LabelBase
                           htmlFor="confirmCollectionId"
-                          id="TextFieldLabel9"
+                          id="TextFieldLabel7"
                           styles={[Function]}
                           theme={
                             Object {
@@ -4297,21 +4301,21 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           }
                         >
                           <label
-                            className="ms-Label root-109"
+                            className="ms-Label root-53"
                             htmlFor="confirmCollectionId"
-                            id="TextFieldLabel9"
+                            id="TextFieldLabel7"
                           >
                             Param
                           </label>
                         </LabelBase>
                       </StyledLabelBase>
                       <div
-                        className="ms-TextField-fieldGroup fieldGroup-135"
+                        className="ms-TextField-fieldGroup fieldGroup-76"
                       >
                         <input
                           aria-invalid={false}
-                          aria-labelledby="TextFieldLabel9"
-                          className="ms-TextField-field field-136"
+                          aria-labelledby="TextFieldLabel7"
+                          className="ms-TextField-field field-77"
                           id="confirmCollectionId"
                           onBlur={[Function]}
                           onChange={[Function]}
@@ -4327,7 +4331,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                 </TextFieldBase>
               </StyledTextFieldBase>
               <div
-                key=".0:$.$.2/.$.$.0"
                 tabIndex={0}
               >
                 <StyledImageBase
@@ -4625,7 +4628,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     width={20}
                   >
                     <div
-                      className="ms-Image addRemoveIconLabel root-145"
+                      className="ms-Image addRemoveIconLabel root-86"
                       style={
                         Object {
                           "height": 30,
@@ -4635,7 +4638,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     >
                       <img
                         alt="Delete param"
-                        className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-146"
+                        className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87"
                         id="deleteparam"
                         key="fabricImage[object Object]"
                         onClick={[Function]}
@@ -4649,7 +4652,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                 </StyledImageBase>
               </div>
               <div
-                key=".0:$.$.2/.$.$.1"
                 tabIndex={0}
               >
                 <StyledImageBase
@@ -4947,7 +4949,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     width={20}
                   >
                     <div
-                      className="ms-Image addRemoveIconLabel root-145"
+                      className="ms-Image addRemoveIconLabel root-86"
                       style={
                         Object {
                           "height": 30,
@@ -4957,7 +4959,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     >
                       <img
                         alt="Add param"
-                        className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-146"
+                        className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87"
                         id="addparam"
                         key="fabricImage[object Object]"
                         onClick={[Function]}
@@ -4979,14 +4981,14 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
           tabIndex={0}
         >
           <div
-            className="ms-Stack css-110"
+            className="ms-Stack css-54"
             onClick={[Function]}
             tabIndex={0}
           >
             <StyledImageBase
               alt="Add param"
               height={30}
-              key=".0:$.$.0"
+              key=".0:$.0"
               src={Object {}}
               width={20}
             >
@@ -5271,7 +5273,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                 width={20}
               >
                 <div
-                  className="ms-Image root-145"
+                  className="ms-Image root-86"
                   style={
                     Object {
                       "height": 30,
@@ -5281,7 +5283,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                 >
                   <img
                     alt="Add param"
-                    className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-146"
+                    className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87"
                     key="fabricImage[object Object]"
                     onError={[Function]}
                     onLoad={[Function]}
@@ -5292,10 +5294,10 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
             </StyledImageBase>
             <Text
               className="addNewParamStyle"
-              key=".0:$.$.1"
+              key=".0:$.1"
             >
               <span
-                className="addNewParamStyle css-147"
+                className="addNewParamStyle css-88"
               >
                 Add New Param
               </span>
@@ -6192,7 +6194,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         "iconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -6218,7 +6220,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         "menuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -6230,16 +6232,14 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -6270,7 +6270,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "display": "inline-block",
                             "padding": "0 16px",
                             "selectors": Object {
-                              ":active > span": Object {
+                              ":active > *": Object {
                                 "left": 0,
                                 "position": "relative",
                                 "top": 0,
@@ -6297,7 +6297,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "MsHighContrastAdjust": "none",
                                 "backgroundColor": "WindowText",
                                 "borderColor": "WindowText",
@@ -6322,16 +6322,14 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -6365,7 +6363,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "backgroundColor": "#f3f2f1",
                             "color": "#d2d0ce",
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "borderColor": "GrayText",
                                 "color": "GrayText",
@@ -6382,7 +6380,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "border": "1px solid #106ebe",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "Highlight",
                               "borderColor": "Highlight",
                               "color": "Window",
@@ -6394,7 +6392,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "border": "1px solid #005a9e",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "WindowText",
                               "borderColor": "WindowText",
@@ -6410,13 +6408,12 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "overflow": "hidden",
                           "padding": 0,
                           "position": "absolute",
-                          "whiteSpace": "nowrap",
                           "width": 1,
                         },
                         "splitButtonContainer": Array [
                           Object {
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "border": "none",
                               },
                             },
@@ -6427,16 +6424,14 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid #ffffff",
-                                "borderRadius": undefined,
                                 "bottom": 3,
                                 "content": "\\"\\"",
                                 "left": 3,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": "none",
                                 "position": "absolute",
                                 "right": 3,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "none",
                                     "bottom": -2,
                                     "left": -2,
@@ -6459,21 +6454,13 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                                 "borderBottomRightRadius": "0",
                                 "borderRight": "none",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                               },
                               ".ms-Button--primary": Object {
                                 "border": "none",
                                 "borderBottomRightRadius": "0",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                                 "selectors": Object {
-                                  ":active": Object {
-                                    "border": "none",
-                                  },
-                                  ":hover": Object {
-                                    "border": "none",
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "MsHighContrastAdjust": "none",
                                     "backgroundColor": "Window",
                                     "border": "1px solid WindowText",
@@ -6486,7 +6473,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                               ".ms-Button--primary + .ms-Button": Object {
                                 "border": "none",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "1px solid WindowText",
                                     "borderLeftWidth": "0",
                                   },
@@ -6499,7 +6486,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -6513,7 +6500,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -6527,7 +6514,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "border": "none",
                           "outline": "none",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "Window",
                               "borderColor": "GrayText",
@@ -6543,7 +6530,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Highlight",
                                   "color": "Window",
                                 },
@@ -6552,7 +6539,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             ".ms-Button.is-disabled": Object {
                               "color": "#a19f9d",
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Window",
                                   "borderColor": "GrayText",
                                   "color": "GrayText",
@@ -6568,7 +6555,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                               },
                             },
@@ -6580,7 +6567,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "WindowText",
                               },
                             },
@@ -6593,7 +6580,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "position": "absolute",
                           "right": 31,
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "GrayText",
                             },
                           },
@@ -6615,18 +6602,18 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                               ":hover": Object {
                                 "backgroundColor": "#106ebe",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "Highlight",
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
-                                "backgroundColor": "Canvas",
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
                               },
                             },
                           },
                           Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               ".ms-Button-menuIcon": Object {
                                 "color": "WindowText",
                               },
@@ -6676,7 +6663,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Button--primary": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "backgroundColor": "Window",
                                     "borderColor": "GrayText",
                                     "color": "GrayText",
@@ -6685,7 +6672,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                               },
                               ".ms-Button-menuIcon": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "GrayText",
                                   },
                                 },
@@ -6693,7 +6680,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                               ":hover": Object {
                                 "cursor": "default",
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "border": "1px solid GrayText",
                                 "color": "GrayText",
@@ -6715,16 +6702,14 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Fabric--isFocusVisible &:focus:after": Object {
                               "border": "1px solid #ffffff",
-                              "borderRadius": undefined,
                               "bottom": 3,
                               "content": "\\"\\"",
                               "left": 3,
                               "outline": "1px solid #605e5c",
-                              "pointerEvents": undefined,
                               "position": "absolute",
                               "right": 3,
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "border": "none",
                                   "bottom": -2,
                                   "left": -2,
@@ -6746,7 +6731,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         "splitButtonMenuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -7036,7 +7021,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   >
                     <button
                       aria-label="Execute"
-                      className="ms-Button ms-Button--primary root-148"
+                      className="ms-Button ms-Button--primary root-89"
                       data-is-focusable={true}
                       id="sidePanelOkButton"
                       onClick={[Function]}
@@ -7048,16 +7033,16 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       type="submit"
                     >
                       <span
-                        className="ms-Button-flexContainer flexContainer-149"
+                        className="ms-Button-flexContainer flexContainer-90"
                         data-automationid="splitbuttonprimary"
                       >
                         <span
-                          className="ms-Button-textContainer textContainer-150"
+                          className="ms-Button-textContainer textContainer-91"
                         >
                           <span
-                            className="ms-Button-label label-152"
-                            id="id__12"
-                            key="id__12"
+                            className="ms-Button-label label-93"
+                            id="id__8"
+                            key="id__8"
                           >
                             Execute
                           </span>

src/Explorer/Panes/PanelComponent.less

@@ -112,9 +112,8 @@
   margin-top: 28px;
   margin-left: 4px !important;
 }
-.addRemoveIcon [alt="editEntity"]:focus,
-.addRemoveIconLabel [alt="editEntity"]:focus {
-  border: 1px dashed #605e5c;
+.addRemoveIcon [alt="editEntity"]:focus,.addRemoveIconLabel [alt="editEntity"]:focus{
+  border:1px dashed #605E5C
 }
 .addNewParamStyle {
   margin-top: 5px;
@@ -154,9 +153,6 @@
 .backImageIcon {
   margin-top: 8px;
 }
-[alt="back"]:focus {
-  border: 1px solid #605e5c;
-}
 .addEntityDatePicker {
   max-width: 145px;
 }

src/Explorer/Panes/PanelContainerComponent.tsx

@@ -76,44 +76,7 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
     );
   }
 
-  public isFocusable(element: HTMLElement) {
-    return (
-      element.tabIndex >= 0 ||
-      (element instanceof HTMLAnchorElement && element.href) ||
-      (element instanceof HTMLAreaElement && element.href) ||
-      (element instanceof HTMLInputElement && !element.disabled) ||
-      (element instanceof HTMLSelectElement && !element.disabled) ||
-      (element instanceof HTMLTextAreaElement && !element.disabled) ||
-      (element instanceof HTMLButtonElement && !element.disabled)
-    );
-  }
-  private findFocusableParent = (element: HTMLElement) => {
-    while (element) {
-      if (this.isFocusable(element)) {
-        return element;
-      }
-      element = element.parentNode as HTMLElement;
-    }
-    return null;
-  };
-
   private onDissmiss = (ev?: KeyboardEvent | React.SyntheticEvent<HTMLElement>): void => {
-    const elementIdToFocus = sessionStorage.getItem("focusedElementId") || null;
-    if (elementIdToFocus) {
-      const targetElement = document.getElementById(elementIdToFocus);
-
-      if (targetElement) {
-        const focusableParent = this.findFocusableParent(targetElement);
-        if (focusableParent) {
-          setTimeout(() => {
-            if (focusableParent) {
-              focusableParent.focus();
-            }
-          }, 100);
-          sessionStorage.removeItem("focusedElementId");
-        }
-      }
-    }
     if (ev && (ev.target as HTMLElement).id === "notificationConsoleHeader") {
       ev.preventDefault();
     } else {

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -32,8 +32,14 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
   return (
     <Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
       {icon}
-      <span className="panelWarningErrorDetailsLinkContainer" role="alert" aria-live="assertive">
-        <Text aria-label={message} className="panelWarningErrorMessage" variant="small">
+      <span className="panelWarningErrorDetailsLinkContainer">
+        <Text
+          role="alert"
+          aria-live="assertive"
+          aria-label={message}
+          className="panelWarningErrorMessage"
+          variant="small"
+        >
           {message}
           {link && linkText && (
             <Link target="_blank" href={link}>

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

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import { ReactWrapper, mount } from "enzyme";
+import { mount, ReactWrapper } from "enzyme";
 import React from "react";
 import { RightPaneForm } from "./RightPaneForm";
 
@@ -34,6 +34,6 @@ describe("Right Pane Form", () => {
   it("should render error in header", () => {
     render(<RightPaneForm {...props} formError="file already Exist" />);
     expect(screen.getByLabelText("error")).toBeDefined();
-    expect(screen.getByRole("alert").innerHTML).toContain("file already Exist");
+    expect(screen.getByRole("alert").innerHTML).toEqual("file already Exist");
   });
 });

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

@@ -901,7 +901,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                       "iconDisabled": Object {
                         "color": "#a19f9d",
                         "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                             "color": "GrayText",
                           },
                         },
@@ -927,7 +927,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                       "menuIconDisabled": Object {
                         "color": "#a19f9d",
                         "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                             "color": "GrayText",
                           },
                         },
@@ -939,16 +939,14 @@ exports[`Right Pane Form should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Fabric--isFocusVisible &:focus:after": Object {
                               "border": "1px solid transparent",
-                              "borderRadius": undefined,
                               "bottom": 2,
                               "content": "\\"\\"",
                               "left": 2,
                               "outline": "1px solid #605e5c",
-                              "pointerEvents": undefined,
                               "position": "absolute",
                               "right": 2,
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "bottom": -2,
                                   "left": -2,
                                   "outlineColor": "ButtonText",
@@ -979,7 +977,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                           "display": "inline-block",
                           "padding": "0 16px",
                           "selectors": Object {
-                            ":active > span": Object {
+                            ":active > *": Object {
                               "left": 0,
                               "position": "relative",
                               "top": 0,
@@ -1006,7 +1004,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                                 },
                               },
                             },
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "WindowText",
                               "borderColor": "WindowText",
@@ -1031,16 +1029,14 @@ exports[`Right Pane Form should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Fabric--isFocusVisible &:focus:after": Object {
                               "border": "1px solid transparent",
-                              "borderRadius": undefined,
                               "bottom": 2,
                               "content": "\\"\\"",
                               "left": 2,
                               "outline": "1px solid #605e5c",
-                              "pointerEvents": undefined,
                               "position": "absolute",
                               "right": 2,
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "bottom": -2,
                                   "left": -2,
                                   "outlineColor": "ButtonText",
@@ -1074,7 +1070,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                           "backgroundColor": "#f3f2f1",
                           "color": "#d2d0ce",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "Window",
                               "borderColor": "GrayText",
                               "color": "GrayText",
@@ -1091,7 +1087,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                         "border": "1px solid #106ebe",
                         "color": "#ffffff",
                         "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                             "backgroundColor": "Highlight",
                             "borderColor": "Highlight",
                             "color": "Window",
@@ -1103,7 +1099,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                         "border": "1px solid #005a9e",
                         "color": "#ffffff",
                         "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                             "MsHighContrastAdjust": "none",
                             "backgroundColor": "WindowText",
                             "borderColor": "WindowText",
@@ -1119,13 +1115,12 @@ exports[`Right Pane Form should render Default properly 1`] = `
                         "overflow": "hidden",
                         "padding": 0,
                         "position": "absolute",
-                        "whiteSpace": "nowrap",
                         "width": 1,
                       },
                       "splitButtonContainer": Array [
                         Object {
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "border": "none",
                             },
                           },
@@ -1136,16 +1131,14 @@ exports[`Right Pane Form should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Fabric--isFocusVisible &:focus:after": Object {
                               "border": "1px solid #ffffff",
-                              "borderRadius": undefined,
                               "bottom": 3,
                               "content": "\\"\\"",
                               "left": 3,
                               "outline": "1px solid #605e5c",
-                              "pointerEvents": "none",
                               "position": "absolute",
                               "right": 3,
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "border": "none",
                                   "bottom": -2,
                                   "left": -2,
@@ -1168,21 +1161,13 @@ exports[`Right Pane Form should render Default properly 1`] = `
                               "borderBottomRightRadius": "0",
                               "borderRight": "none",
                               "borderTopRightRadius": "0",
-                              "flexGrow": "1",
                             },
                             ".ms-Button--primary": Object {
                               "border": "none",
                               "borderBottomRightRadius": "0",
                               "borderTopRightRadius": "0",
-                              "flexGrow": "1",
                               "selectors": Object {
-                                ":active": Object {
-                                  "border": "none",
-                                },
-                                ":hover": Object {
-                                  "border": "none",
-                                },
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "Window",
                                   "border": "1px solid WindowText",
@@ -1195,7 +1180,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                             ".ms-Button--primary + .ms-Button": Object {
                               "border": "none",
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "border": "1px solid WindowText",
                                   "borderLeftWidth": "0",
                                 },
@@ -1208,7 +1193,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                         "selectors": Object {
                           ".ms-Button--primary": Object {
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "MsHighContrastAdjust": "none",
                                 "backgroundColor": "WindowText",
                                 "color": "Window",
@@ -1222,7 +1207,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                         "selectors": Object {
                           ".ms-Button--primary": Object {
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "MsHighContrastAdjust": "none",
                                 "backgroundColor": "WindowText",
                                 "color": "Window",
@@ -1236,7 +1221,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                         "border": "none",
                         "outline": "none",
                         "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                             "MsHighContrastAdjust": "none",
                             "backgroundColor": "Window",
                             "borderColor": "GrayText",
@@ -1252,7 +1237,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                         "selectors": Object {
                           ".ms-Button--primary": Object {
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Highlight",
                                 "color": "Window",
                               },
@@ -1261,7 +1246,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                           ".ms-Button.is-disabled": Object {
                             "color": "#a19f9d",
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "borderColor": "GrayText",
                                 "color": "GrayText",
@@ -1277,7 +1262,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                           "position": "absolute",
                           "right": 31,
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "Window",
                             },
                           },
@@ -1289,7 +1274,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                           "position": "absolute",
                           "right": 31,
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "WindowText",
                             },
                           },
@@ -1302,7 +1287,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                         "position": "absolute",
                         "right": 31,
                         "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                             "backgroundColor": "GrayText",
                           },
                         },
@@ -1324,18 +1309,18 @@ exports[`Right Pane Form should render Default properly 1`] = `
                             ":hover": Object {
                               "backgroundColor": "#106ebe",
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "color": "Highlight",
                                 },
                               },
                             },
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
-                              "backgroundColor": "Canvas",
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "backgroundColor": "WindowText",
                             },
                           },
                         },
                         Object {
-                          "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                             ".ms-Button-menuIcon": Object {
                               "color": "WindowText",
                             },
@@ -1385,7 +1370,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Window",
                                   "borderColor": "GrayText",
                                   "color": "GrayText",
@@ -1394,7 +1379,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                             },
                             ".ms-Button-menuIcon": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "color": "GrayText",
                                 },
                               },
@@ -1402,7 +1387,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                             ":hover": Object {
                               "cursor": "default",
                             },
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "Window",
                               "border": "1px solid GrayText",
                               "color": "GrayText",
@@ -1424,16 +1409,14 @@ exports[`Right Pane Form should render Default properly 1`] = `
                         "selectors": Object {
                           ".ms-Fabric--isFocusVisible &:focus:after": Object {
                             "border": "1px solid #ffffff",
-                            "borderRadius": undefined,
                             "bottom": 3,
                             "content": "\\"\\"",
                             "left": 3,
                             "outline": "1px solid #605e5c",
-                            "pointerEvents": undefined,
                             "position": "absolute",
                             "right": 3,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "border": "none",
                                 "bottom": -2,
                                 "left": -2,
@@ -1455,7 +1438,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                       "splitButtonMenuIconDisabled": Object {
                         "color": "#a19f9d",
                         "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                             "color": "GrayText",
                           },
                         },
@@ -1745,7 +1728,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                 >
                   <button
                     aria-label="Load"
-                    className="ms-Button ms-Button--primary root-109"
+                    className="ms-Button ms-Button--primary root-53"
                     data-is-focusable={true}
                     id="sidePanelOkButton"
                     onClick={[Function]}
@@ -1757,14 +1740,14 @@ exports[`Right Pane Form should render Default properly 1`] = `
                     type="submit"
                   >
                     <span
-                      className="ms-Button-flexContainer flexContainer-110"
+                      className="ms-Button-flexContainer flexContainer-54"
                       data-automationid="splitbuttonprimary"
                     >
                       <span
-                        className="ms-Button-textContainer textContainer-111"
+                        className="ms-Button-textContainer textContainer-55"
                       >
                         <span
-                          className="ms-Button-label label-113"
+                          className="ms-Button-label label-57"
                           id="id__0"
                           key="id__0"
                         >

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -1,3 +1,4 @@
+import { PriorityLevel } from "@azure/cosmos";
 import {
   Checkbox,
   ChoiceGroup,
@@ -53,30 +54,15 @@ export const SettingsPane: FunctionComponent = () => {
       ? LocalStorageUtility.getEntryString(StorageKey.IsGraphAutoVizDisabled)
       : "false",
   );
-  const [retryAttempts, setRetryAttempts] = useState<number>(
-    LocalStorageUtility.hasItem(StorageKey.RetryAttempts)
-      ? LocalStorageUtility.getEntryNumber(StorageKey.RetryAttempts)
-      : Constants.Queries.DefaultRetryAttempts,
-  );
-  const [retryInterval, setRetryInterval] = useState<number>(
-    LocalStorageUtility.hasItem(StorageKey.RetryInterval)
-      ? LocalStorageUtility.getEntryNumber(StorageKey.RetryInterval)
-      : Constants.Queries.DefaultRetryIntervalInMs,
-  );
-  const [MaxWaitTimeInSeconds, setMaxWaitTimeInSeconds] = useState<number>(
-    LocalStorageUtility.hasItem(StorageKey.MaxWaitTimeInSeconds)
-      ? LocalStorageUtility.getEntryNumber(StorageKey.MaxWaitTimeInSeconds)
-      : Constants.Queries.DefaultMaxWaitTimeInSeconds,
-  );
   const [maxDegreeOfParallelism, setMaxDegreeOfParallelism] = useState<number>(
     LocalStorageUtility.hasItem(StorageKey.MaxDegreeOfParellism)
       ? LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism)
       : Constants.Queries.DefaultMaxDegreeOfParallelism,
   );
-  const [priorityLevel, setPriorityLevel] = useState<string>(
+  const [priorityLevel, setPriorityLevel] = useState<PriorityLevel>(
     LocalStorageUtility.hasItem(StorageKey.PriorityLevel)
-      ? LocalStorageUtility.getEntryString(StorageKey.PriorityLevel)
-      : Constants.PriorityLevel.Default,
+      ? (LocalStorageUtility.getEntryString(StorageKey.PriorityLevel) as PriorityLevel)
+      : PriorityLevel.Low,
   );
   const explorerVersion = configContext.gitSha;
   const shouldShowQueryPageOptions = userContext.apiType === "SQL";
@@ -93,13 +79,10 @@ export const SettingsPane: FunctionComponent = () => {
     );
     LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
     LocalStorageUtility.setEntryBoolean(StorageKey.QueryTimeoutEnabled, queryTimeoutEnabled);
-    LocalStorageUtility.setEntryNumber(StorageKey.RetryAttempts, retryAttempts);
-    LocalStorageUtility.setEntryNumber(StorageKey.RetryInterval, retryInterval);
-    LocalStorageUtility.setEntryNumber(StorageKey.MaxWaitTimeInSeconds, MaxWaitTimeInSeconds);
     LocalStorageUtility.setEntryString(StorageKey.ContainerPaginationEnabled, containerPaginationEnabled.toString());
     LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, crossPartitionQueryEnabled.toString());
     LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);
-    LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, priorityLevel.toString());
+    LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, priorityLevel);
 
     if (shouldShowGraphAutoVizOption) {
       LocalStorageUtility.setEntryBoolean(
@@ -167,15 +150,15 @@ export const SettingsPane: FunctionComponent = () => {
   ];
 
   const priorityLevelOptionList: IChoiceGroupOption[] = [
-    { key: Constants.PriorityLevel.Low, text: "Low" },
-    { key: Constants.PriorityLevel.High, text: "High" },
+    { key: PriorityLevel.Low, text: "Low" },
+    { key: PriorityLevel.High, text: "High" },
   ];
 
   const handleOnPriorityLevelOptionChange = (
     ev: React.FormEvent<HTMLInputElement>,
     option: IChoiceGroupOption,
   ): void => {
-    setPriorityLevel(option.key);
+    setPriorityLevel(option.key as PriorityLevel);
   };
 
   const handleOnPageOptionChange = (ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void => {
@@ -197,27 +180,6 @@ export const SettingsPane: FunctionComponent = () => {
     }
   };
 
-  const handleOnQueryRetryAttemptsSpinButtonChange = (ev: React.MouseEvent<HTMLElement>, newValue?: string): void => {
-    const retryAttempts = Number(newValue);
-    if (!isNaN(retryAttempts)) {
-      setRetryAttempts(retryAttempts);
-    }
-  };
-
-  const handleOnRetryIntervalSpinButtonChange = (ev: React.MouseEvent<HTMLElement>, newValue?: string): void => {
-    const retryInterval = Number(newValue);
-    if (!isNaN(retryInterval)) {
-      setRetryInterval(retryInterval);
-    }
-  };
-
-  const handleOnMaxWaitTimeSpinButtonChange = (ev: React.MouseEvent<HTMLElement>, newValue?: string): void => {
-    const MaxWaitTimeInSeconds = Number(newValue);
-    if (!isNaN(MaxWaitTimeInSeconds)) {
-      setMaxWaitTimeInSeconds(MaxWaitTimeInSeconds);
-    }
-  };
-
   const choiceButtonStyles = {
     root: {
       clear: "both",
@@ -362,77 +324,6 @@ export const SettingsPane: FunctionComponent = () => {
             </div>
           </div>
         )}
-        <div className="settingsSection">
-          <div className="settingsSectionPart">
-            <div className="settingsSectionLabel">
-              Retry Settings
-              <InfoTooltip>Retry policy associated with throttled requests during CosmosDB queries.</InfoTooltip>
-            </div>
-            <div>
-              <legend id="queryRetryAttemptsLabel" className="settingsSectionLabel legendLabel">
-                Max retry attempts
-              </legend>
-              <InfoTooltip>Max number of retries to be performed for a request. Default value 9.</InfoTooltip>
-            </div>
-            <SpinButton
-              labelPosition={Position.top}
-              min={1}
-              step={1}
-              value={"" + retryAttempts}
-              onChange={handleOnQueryRetryAttemptsSpinButtonChange}
-              incrementButtonAriaLabel="Increase value by 1"
-              decrementButtonAriaLabel="Decrease value by 1"
-              onIncrement={(newValue) => setRetryAttempts(parseInt(newValue) + 1 || retryAttempts)}
-              onDecrement={(newValue) => setRetryAttempts(parseInt(newValue) - 1 || retryAttempts)}
-              onValidate={(newValue) => setRetryAttempts(parseInt(newValue) || retryAttempts)}
-              styles={queryTimeoutSpinButtonStyles}
-            />
-            <div>
-              <legend id="queryRetryAttemptsLabel" className="settingsSectionLabel legendLabel">
-                Fixed retry interval (ms)
-              </legend>
-              <InfoTooltip>
-                Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as part
-                of the response. Default value is 0 milliseconds.
-              </InfoTooltip>
-            </div>
-            <SpinButton
-              labelPosition={Position.top}
-              min={1000}
-              step={1000}
-              value={"" + retryInterval}
-              onChange={handleOnRetryIntervalSpinButtonChange}
-              incrementButtonAriaLabel="Increase value by 1000"
-              decrementButtonAriaLabel="Decrease value by 1000"
-              onIncrement={(newValue) => setRetryInterval(parseInt(newValue) + 1000 || retryInterval)}
-              onDecrement={(newValue) => setRetryInterval(parseInt(newValue) - 1000 || retryInterval)}
-              onValidate={(newValue) => setRetryInterval(parseInt(newValue) || retryInterval)}
-              styles={queryTimeoutSpinButtonStyles}
-            />
-            <div>
-              <legend id="queryRetryAttemptsLabel" className="settingsSectionLabel legendLabel">
-                Max wait time (s)
-              </legend>
-              <InfoTooltip>
-                Max wait time in seconds to wait for a request while the retries are happening. Default value 30
-                seconds.
-              </InfoTooltip>
-            </div>
-            <SpinButton
-              labelPosition={Position.top}
-              min={1}
-              step={1}
-              value={"" + MaxWaitTimeInSeconds}
-              onChange={handleOnMaxWaitTimeSpinButtonChange}
-              incrementButtonAriaLabel="Increase value by 1"
-              decrementButtonAriaLabel="Decrease value by 1"
-              onIncrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)}
-              onDecrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)}
-              onValidate={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) || MaxWaitTimeInSeconds)}
-              styles={queryTimeoutSpinButtonStyles}
-            />
-          </div>
-        </div>
         <div className="settingsSection">
           <div className="settingsSectionPart">
             <div className="settingsSectionLabel">
@@ -511,8 +402,7 @@ export const SettingsPane: FunctionComponent = () => {
                 </legend>
                 <InfoTooltip>
                   Sets the priority level for data-plane requests from Data Explorer when using Priority-Based
-                  Execution. If &quot;None&quot; is selected, Data Explorer will not specify priority level, and the
-                  server-side default priority level will be used.
+                  Execution.
                 </InfoTooltip>
                 <ChoiceGroup
                   ariaLabelledBy="priorityLevel"

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

@@ -137,139 +137,6 @@ exports[`Settings Pane should render Default properly 1`] = `
         </div>
       </div>
     </div>
-    <div
-      className="settingsSection"
-    >
-      <div
-        className="settingsSectionPart"
-      >
-        <div
-          className="settingsSectionLabel"
-        >
-          Retry Settings
-          <InfoTooltip>
-            Retry policy associated with throttled requests during CosmosDB queries.
-          </InfoTooltip>
-        </div>
-        <div>
-          <legend
-            className="settingsSectionLabel legendLabel"
-            id="queryRetryAttemptsLabel"
-          >
-            Max retry attempts
-          </legend>
-          <InfoTooltip>
-            Max number of retries to be performed for a request. Default value 9.
-          </InfoTooltip>
-        </div>
-        <StyledSpinButton
-          decrementButtonAriaLabel="Decrease value by 1"
-          incrementButtonAriaLabel="Increase value by 1"
-          labelPosition={0}
-          min={1}
-          onChange={[Function]}
-          onDecrement={[Function]}
-          onIncrement={[Function]}
-          onValidate={[Function]}
-          step={1}
-          styles={
-            Object {
-              "arrowButtonsContainer": Object {},
-              "icon": Object {},
-              "input": Object {},
-              "label": Object {
-                "fontSize": 12,
-                "fontWeight": 400,
-              },
-              "labelWrapper": Object {},
-              "root": Object {
-                "paddingBottom": 10,
-              },
-              "spinButtonWrapper": Object {},
-            }
-          }
-          value="9"
-        />
-        <div>
-          <legend
-            className="settingsSectionLabel legendLabel"
-            id="queryRetryAttemptsLabel"
-          >
-            Fixed retry interval (ms)
-          </legend>
-          <InfoTooltip>
-            Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as part of the response. Default value is 0 milliseconds.
-          </InfoTooltip>
-        </div>
-        <StyledSpinButton
-          decrementButtonAriaLabel="Decrease value by 1000"
-          incrementButtonAriaLabel="Increase value by 1000"
-          labelPosition={0}
-          min={1000}
-          onChange={[Function]}
-          onDecrement={[Function]}
-          onIncrement={[Function]}
-          onValidate={[Function]}
-          step={1000}
-          styles={
-            Object {
-              "arrowButtonsContainer": Object {},
-              "icon": Object {},
-              "input": Object {},
-              "label": Object {
-                "fontSize": 12,
-                "fontWeight": 400,
-              },
-              "labelWrapper": Object {},
-              "root": Object {
-                "paddingBottom": 10,
-              },
-              "spinButtonWrapper": Object {},
-            }
-          }
-          value="0"
-        />
-        <div>
-          <legend
-            className="settingsSectionLabel legendLabel"
-            id="queryRetryAttemptsLabel"
-          >
-            Max wait time (s)
-          </legend>
-          <InfoTooltip>
-            Max wait time in seconds to wait for a request while the retries are happening. Default value 30 seconds.
-          </InfoTooltip>
-        </div>
-        <StyledSpinButton
-          decrementButtonAriaLabel="Decrease value by 1"
-          incrementButtonAriaLabel="Increase value by 1"
-          labelPosition={0}
-          min={1}
-          onChange={[Function]}
-          onDecrement={[Function]}
-          onIncrement={[Function]}
-          onValidate={[Function]}
-          step={1}
-          styles={
-            Object {
-              "arrowButtonsContainer": Object {},
-              "icon": Object {},
-              "input": Object {},
-              "label": Object {
-                "fontSize": 12,
-                "fontWeight": 400,
-              },
-              "labelWrapper": Object {},
-              "root": Object {
-                "paddingBottom": 10,
-              },
-              "spinButtonWrapper": Object {},
-            }
-          }
-          value="30"
-        />
-      </div>
-    </div>
     <div
       className="settingsSection"
     >
@@ -384,139 +251,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
   <div
     className="paneMainContent"
   >
-    <div
-      className="settingsSection"
-    >
-      <div
-        className="settingsSectionPart"
-      >
-        <div
-          className="settingsSectionLabel"
-        >
-          Retry Settings
-          <InfoTooltip>
-            Retry policy associated with throttled requests during CosmosDB queries.
-          </InfoTooltip>
-        </div>
-        <div>
-          <legend
-            className="settingsSectionLabel legendLabel"
-            id="queryRetryAttemptsLabel"
-          >
-            Max retry attempts
-          </legend>
-          <InfoTooltip>
-            Max number of retries to be performed for a request. Default value 9.
-          </InfoTooltip>
-        </div>
-        <StyledSpinButton
-          decrementButtonAriaLabel="Decrease value by 1"
-          incrementButtonAriaLabel="Increase value by 1"
-          labelPosition={0}
-          min={1}
-          onChange={[Function]}
-          onDecrement={[Function]}
-          onIncrement={[Function]}
-          onValidate={[Function]}
-          step={1}
-          styles={
-            Object {
-              "arrowButtonsContainer": Object {},
-              "icon": Object {},
-              "input": Object {},
-              "label": Object {
-                "fontSize": 12,
-                "fontWeight": 400,
-              },
-              "labelWrapper": Object {},
-              "root": Object {
-                "paddingBottom": 10,
-              },
-              "spinButtonWrapper": Object {},
-            }
-          }
-          value="9"
-        />
-        <div>
-          <legend
-            className="settingsSectionLabel legendLabel"
-            id="queryRetryAttemptsLabel"
-          >
-            Fixed retry interval (ms)
-          </legend>
-          <InfoTooltip>
-            Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as part of the response. Default value is 0 milliseconds.
-          </InfoTooltip>
-        </div>
-        <StyledSpinButton
-          decrementButtonAriaLabel="Decrease value by 1000"
-          incrementButtonAriaLabel="Increase value by 1000"
-          labelPosition={0}
-          min={1000}
-          onChange={[Function]}
-          onDecrement={[Function]}
-          onIncrement={[Function]}
-          onValidate={[Function]}
-          step={1000}
-          styles={
-            Object {
-              "arrowButtonsContainer": Object {},
-              "icon": Object {},
-              "input": Object {},
-              "label": Object {
-                "fontSize": 12,
-                "fontWeight": 400,
-              },
-              "labelWrapper": Object {},
-              "root": Object {
-                "paddingBottom": 10,
-              },
-              "spinButtonWrapper": Object {},
-            }
-          }
-          value="0"
-        />
-        <div>
-          <legend
-            className="settingsSectionLabel legendLabel"
-            id="queryRetryAttemptsLabel"
-          >
-            Max wait time (s)
-          </legend>
-          <InfoTooltip>
-            Max wait time in seconds to wait for a request while the retries are happening. Default value 30 seconds.
-          </InfoTooltip>
-        </div>
-        <StyledSpinButton
-          decrementButtonAriaLabel="Decrease value by 1"
-          incrementButtonAriaLabel="Increase value by 1"
-          labelPosition={0}
-          min={1}
-          onChange={[Function]}
-          onDecrement={[Function]}
-          onIncrement={[Function]}
-          onValidate={[Function]}
-          step={1}
-          styles={
-            Object {
-              "arrowButtonsContainer": Object {},
-              "icon": Object {},
-              "input": Object {},
-              "label": Object {
-                "fontSize": 12,
-                "fontWeight": 400,
-              },
-              "labelWrapper": Object {},
-              "root": Object {
-                "paddingBottom": 10,
-              },
-              "spinButtonWrapper": Object {},
-            }
-          }
-          value="30"
-        />
-      </div>
-    </div>
     <div
       className="settingsSection"
     >

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

@@ -357,7 +357,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
             value=""
           >
             <div
-              className="ms-TextField is-required root-110"
+              className="ms-TextField is-required root-54"
             >
               <div
                 className="ms-TextField-wrapper"
@@ -648,7 +648,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                     }
                   >
                     <label
-                      className="ms-Label root-121"
+                      className="ms-Label root-65"
                       htmlFor="TextField0"
                       id="TextFieldLabel2"
                     >
@@ -657,13 +657,13 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                   </LabelBase>
                 </StyledLabelBase>
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-111"
+                  className="ms-TextField-fieldGroup fieldGroup-55"
                 >
                   <input
                     aria-invalid={false}
                     aria-labelledby="TextFieldLabel2"
                     autoFocus={true}
-                    className="ms-TextField-field field-112"
+                    className="ms-TextField-field field-56"
                     id="TextField0"
                     name="collectionIdConfirmation"
                     onBlur={[Function]}
@@ -1569,7 +1569,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                         "iconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -1595,7 +1595,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                         "menuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -1607,16 +1607,14 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -1647,7 +1645,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                             "display": "inline-block",
                             "padding": "0 16px",
                             "selectors": Object {
-                              ":active > span": Object {
+                              ":active > *": Object {
                                 "left": 0,
                                 "position": "relative",
                                 "top": 0,
@@ -1674,7 +1672,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "MsHighContrastAdjust": "none",
                                 "backgroundColor": "WindowText",
                                 "borderColor": "WindowText",
@@ -1699,16 +1697,14 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -1742,7 +1738,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                             "backgroundColor": "#f3f2f1",
                             "color": "#d2d0ce",
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "borderColor": "GrayText",
                                 "color": "GrayText",
@@ -1759,7 +1755,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                           "border": "1px solid #106ebe",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "Highlight",
                               "borderColor": "Highlight",
                               "color": "Window",
@@ -1771,7 +1767,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                           "border": "1px solid #005a9e",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "WindowText",
                               "borderColor": "WindowText",
@@ -1787,13 +1783,12 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                           "overflow": "hidden",
                           "padding": 0,
                           "position": "absolute",
-                          "whiteSpace": "nowrap",
                           "width": 1,
                         },
                         "splitButtonContainer": Array [
                           Object {
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "border": "none",
                               },
                             },
@@ -1804,16 +1799,14 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid #ffffff",
-                                "borderRadius": undefined,
                                 "bottom": 3,
                                 "content": "\\"\\"",
                                 "left": 3,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": "none",
                                 "position": "absolute",
                                 "right": 3,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "none",
                                     "bottom": -2,
                                     "left": -2,
@@ -1836,21 +1829,13 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                                 "borderBottomRightRadius": "0",
                                 "borderRight": "none",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                               },
                               ".ms-Button--primary": Object {
                                 "border": "none",
                                 "borderBottomRightRadius": "0",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                                 "selectors": Object {
-                                  ":active": Object {
-                                    "border": "none",
-                                  },
-                                  ":hover": Object {
-                                    "border": "none",
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "MsHighContrastAdjust": "none",
                                     "backgroundColor": "Window",
                                     "border": "1px solid WindowText",
@@ -1863,7 +1848,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                               ".ms-Button--primary + .ms-Button": Object {
                                 "border": "none",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "1px solid WindowText",
                                     "borderLeftWidth": "0",
                                   },
@@ -1876,7 +1861,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -1890,7 +1875,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -1904,7 +1889,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                           "border": "none",
                           "outline": "none",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "Window",
                               "borderColor": "GrayText",
@@ -1920,7 +1905,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Highlight",
                                   "color": "Window",
                                 },
@@ -1929,7 +1914,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                             ".ms-Button.is-disabled": Object {
                               "color": "#a19f9d",
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Window",
                                   "borderColor": "GrayText",
                                   "color": "GrayText",
@@ -1945,7 +1930,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                               },
                             },
@@ -1957,7 +1942,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "WindowText",
                               },
                             },
@@ -1970,7 +1955,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                           "position": "absolute",
                           "right": 31,
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "GrayText",
                             },
                           },
@@ -1992,18 +1977,18 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                               ":hover": Object {
                                 "backgroundColor": "#106ebe",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "Highlight",
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
-                                "backgroundColor": "Canvas",
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
                               },
                             },
                           },
                           Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               ".ms-Button-menuIcon": Object {
                                 "color": "WindowText",
                               },
@@ -2053,7 +2038,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                             "selectors": Object {
                               ".ms-Button--primary": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "backgroundColor": "Window",
                                     "borderColor": "GrayText",
                                     "color": "GrayText",
@@ -2062,7 +2047,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                               },
                               ".ms-Button-menuIcon": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "GrayText",
                                   },
                                 },
@@ -2070,7 +2055,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                               ":hover": Object {
                                 "cursor": "default",
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "border": "1px solid GrayText",
                                 "color": "GrayText",
@@ -2092,16 +2077,14 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                           "selectors": Object {
                             ".ms-Fabric--isFocusVisible &:focus:after": Object {
                               "border": "1px solid #ffffff",
-                              "borderRadius": undefined,
                               "bottom": 3,
                               "content": "\\"\\"",
                               "left": 3,
                               "outline": "1px solid #605e5c",
-                              "pointerEvents": undefined,
                               "position": "absolute",
                               "right": 3,
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "border": "none",
                                   "bottom": -2,
                                   "left": -2,
@@ -2123,7 +2106,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                         "splitButtonMenuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -2413,7 +2396,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                   >
                     <button
                       aria-label="Create"
-                      className="ms-Button ms-Button--primary root-122"
+                      className="ms-Button ms-Button--primary root-66"
                       data-is-focusable={true}
                       id="sidePanelOkButton"
                       onClick={[Function]}
@@ -2425,16 +2408,16 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                       type="submit"
                     >
                       <span
-                        className="ms-Button-flexContainer flexContainer-123"
+                        className="ms-Button-flexContainer flexContainer-67"
                         data-automationid="splitbuttonprimary"
                       >
                         <span
-                          className="ms-Button-textContainer textContainer-124"
+                          className="ms-Button-textContainer textContainer-68"
                         >
                           <span
-                            className="ms-Button-label label-126"
-                            id="id__5"
-                            key="id__5"
+                            className="ms-Button-label label-70"
+                            id="id__3"
+                            key="id__3"
                           >
                             Create
                           </span>

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -213,24 +213,12 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
     setSelectedRow(rowEndex);
     setIsEntityValuePanelTrue();
   };
-  const handlePress = (event: React.KeyboardEvent<HTMLElement>): void => {
-    if (event.key === "Enter" || event.key === "Space") {
-      setIsEntityValuePanelFalse();
-    }
-  };
 
   if (isEntityValuePanelOpen) {
     return (
       <Stack style={{ padding: "20px 34px" }}>
         <Stack horizontal {...columnProps}>
-          <Image
-            {...backImageProps}
-            src={RevertBackIcon}
-            alt="back"
-            tabIndex={0}
-            onClick={setIsEntityValuePanelFalse}
-            onKeyPress={handlePress}
-          />
+          <Image {...backImageProps} src={RevertBackIcon} alt="back" onClick={() => setIsEntityValuePanelFalse()} />
           <Label>{entityAttributeProperty}</Label>
         </Stack>
         <TextField

src/Explorer/Panes/Tables/EditTableEntityPanel.tsx

@@ -390,9 +390,6 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
           </Stack>
         )}
       </div>
-      <div className="panelNullWarning" style={{ padding: "20px", color: "red" }}>
-        Warning: Null fields will not be displayed for editing.
-      </div>
     </RightPaneForm>
   );
 };

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

@@ -29,6 +29,7 @@ describe("Table query select Panel", () => {
   it("Should checked availableCheckbox by default", () => {
     const wrapper = mount(<TableQuerySelectPanel {...props} />);
     expect(wrapper.find("#availableCheckbox").first().props()).toEqual({
+      ariaPositionInSet: 0,
       id: "availableCheckbox",
       label: "Available Columns",
       checked: true,

src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.tsx

@@ -1,7 +1,7 @@
 import { Checkbox, Text } from "@fluentui/react";
 import React, { FunctionComponent, useEffect, useState } from "react";
-import { userContext } from "../../../../UserContext";
 import { useSidePanel } from "../../../../hooks/useSidePanel";
+import { userContext } from "../../../../UserContext";
 import * as Constants from "../../../Tables/Constants";
 import QueryViewModel from "../../../Tables/QueryBuilder/QueryViewModel";
 import { RightPaneForm, RightPaneFormProps } from "../../RightPaneForm/RightPaneForm";
@@ -128,8 +128,9 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
               label="Available Columns"
               checked={isAvailableColumnChecked}
               onChange={availableColumnsCheckboxClick}
+              ariaPositionInSet={0}
             />
-            {columnOptions.map((column) => {
+            {columnOptions.map((column, index) => {
               return (
                 <Checkbox
                   label={column.columnName}
@@ -137,6 +138,7 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
                   key={column.columnName}
                   checked={column.selected}
                   disabled={!column.editable}
+                  ariaPositionInSet={index + 1}
                 />
               );
             })}

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

@@ -28,7 +28,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
         >
           <Text>
             <span
-              className="css-109"
+              className="css-53"
             >
               Select the columns that you want to query.
             </span>
@@ -37,12 +37,14 @@ exports[`Table query select Panel should render Default properly 1`] = `
             className="column-select-view"
           >
             <StyledCheckboxBase
+              ariaPositionInSet={0}
               checked={true}
               id="availableCheckbox"
               label="Available Columns"
               onChange={[Function]}
             >
               <CheckboxBase
+                ariaPositionInSet={0}
                 checked={true}
                 id="availableCheckbox"
                 label="Available Columns"
@@ -323,30 +325,33 @@ exports[`Table query select Panel should render Default properly 1`] = `
                 }
               >
                 <div
-                  className="ms-Checkbox is-checked is-enabled root-110"
+                  className="ms-Checkbox is-checked is-enabled root-54"
                 >
                   <input
+                    aria-checked="true"
+                    aria-label="Available Columns"
+                    aria-posinset={0}
                     checked={true}
-                    className="input-111"
+                    className="input-55"
                     data-ktp-execute-target={true}
                     id="availableCheckbox"
                     onChange={[Function]}
                     type="checkbox"
                   />
                   <label
-                    className="ms-Checkbox-label label-112"
+                    className="ms-Checkbox-label label-56"
                     htmlFor="availableCheckbox"
                   >
                     <div
-                      className="ms-Checkbox-checkbox checkbox-113"
+                      className="ms-Checkbox-checkbox checkbox-57"
                       data-ktp-target={true}
                     >
                       <StyledIconBase
-                        className="ms-Checkbox-checkmark checkmark-114"
+                        className="ms-Checkbox-checkmark checkmark-58"
                         iconName="CheckMark"
                       >
                         <IconBase
-                          className="ms-Checkbox-checkmark checkmark-114"
+                          className="ms-Checkbox-checkmark checkmark-58"
                           iconName="CheckMark"
                           styles={[Function]}
                           theme={
@@ -625,7 +630,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                         >
                           <i
                             aria-hidden={true}
-                            className="ms-Checkbox-checkmark checkmark-118"
+                            className="ms-Checkbox-checkmark checkmark-61"
                             data-icon-name="CheckMark"
                           >
                             
@@ -634,7 +639,8 @@ exports[`Table query select Panel should render Default properly 1`] = `
                       </StyledIconBase>
                     </div>
                     <span
-                      className="ms-Checkbox-text text-115"
+                      aria-hidden="true"
+                      className="ms-Checkbox-text text-59"
                     >
                       Available Columns
                     </span>
@@ -643,6 +649,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
               </CheckboxBase>
             </StyledCheckboxBase>
             <StyledCheckboxBase
+              ariaPositionInSet={1}
               checked={true}
               disabled={false}
               key=""
@@ -650,6 +657,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
               onChange={[Function]}
             >
               <CheckboxBase
+                ariaPositionInSet={1}
                 checked={true}
                 disabled={false}
                 label=""
@@ -930,12 +938,15 @@ exports[`Table query select Panel should render Default properly 1`] = `
                 }
               >
                 <div
-                  className="ms-Checkbox is-checked is-enabled root-110"
+                  className="ms-Checkbox is-checked is-enabled root-54"
                 >
                   <input
+                    aria-checked="true"
                     aria-disabled={false}
+                    aria-label=""
+                    aria-posinset={1}
                     checked={true}
-                    className="input-111"
+                    className="input-55"
                     data-ktp-execute-target={true}
                     disabled={false}
                     id="checkbox-0"
@@ -943,19 +954,19 @@ exports[`Table query select Panel should render Default properly 1`] = `
                     type="checkbox"
                   />
                   <label
-                    className="ms-Checkbox-label label-112"
+                    className="ms-Checkbox-label label-56"
                     htmlFor="checkbox-0"
                   >
                     <div
-                      className="ms-Checkbox-checkbox checkbox-113"
+                      className="ms-Checkbox-checkbox checkbox-57"
                       data-ktp-target={true}
                     >
                       <StyledIconBase
-                        className="ms-Checkbox-checkmark checkmark-114"
+                        className="ms-Checkbox-checkmark checkmark-58"
                         iconName="CheckMark"
                       >
                         <IconBase
-                          className="ms-Checkbox-checkmark checkmark-114"
+                          className="ms-Checkbox-checkmark checkmark-58"
                           iconName="CheckMark"
                           styles={[Function]}
                           theme={
@@ -1234,7 +1245,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                         >
                           <i
                             aria-hidden={true}
-                            className="ms-Checkbox-checkmark checkmark-118"
+                            className="ms-Checkbox-checkmark checkmark-61"
                             data-icon-name="CheckMark"
                           >
                             
@@ -2138,7 +2149,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                         "iconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -2164,7 +2175,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                         "menuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -2176,16 +2187,14 @@ exports[`Table query select Panel should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -2216,7 +2225,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                             "display": "inline-block",
                             "padding": "0 16px",
                             "selectors": Object {
-                              ":active > span": Object {
+                              ":active > *": Object {
                                 "left": 0,
                                 "position": "relative",
                                 "top": 0,
@@ -2243,7 +2252,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "MsHighContrastAdjust": "none",
                                 "backgroundColor": "WindowText",
                                 "borderColor": "WindowText",
@@ -2268,16 +2277,14 @@ exports[`Table query select Panel should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -2311,7 +2318,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                             "backgroundColor": "#f3f2f1",
                             "color": "#d2d0ce",
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "borderColor": "GrayText",
                                 "color": "GrayText",
@@ -2328,7 +2335,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                           "border": "1px solid #106ebe",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "Highlight",
                               "borderColor": "Highlight",
                               "color": "Window",
@@ -2340,7 +2347,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                           "border": "1px solid #005a9e",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "WindowText",
                               "borderColor": "WindowText",
@@ -2356,13 +2363,12 @@ exports[`Table query select Panel should render Default properly 1`] = `
                           "overflow": "hidden",
                           "padding": 0,
                           "position": "absolute",
-                          "whiteSpace": "nowrap",
                           "width": 1,
                         },
                         "splitButtonContainer": Array [
                           Object {
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "border": "none",
                               },
                             },
@@ -2373,16 +2379,14 @@ exports[`Table query select Panel should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid #ffffff",
-                                "borderRadius": undefined,
                                 "bottom": 3,
                                 "content": "\\"\\"",
                                 "left": 3,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": "none",
                                 "position": "absolute",
                                 "right": 3,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "none",
                                     "bottom": -2,
                                     "left": -2,
@@ -2405,21 +2409,13 @@ exports[`Table query select Panel should render Default properly 1`] = `
                                 "borderBottomRightRadius": "0",
                                 "borderRight": "none",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                               },
                               ".ms-Button--primary": Object {
                                 "border": "none",
                                 "borderBottomRightRadius": "0",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                                 "selectors": Object {
-                                  ":active": Object {
-                                    "border": "none",
-                                  },
-                                  ":hover": Object {
-                                    "border": "none",
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "MsHighContrastAdjust": "none",
                                     "backgroundColor": "Window",
                                     "border": "1px solid WindowText",
@@ -2432,7 +2428,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                               ".ms-Button--primary + .ms-Button": Object {
                                 "border": "none",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "1px solid WindowText",
                                     "borderLeftWidth": "0",
                                   },
@@ -2445,7 +2441,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -2459,7 +2455,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -2473,7 +2469,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                           "border": "none",
                           "outline": "none",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "Window",
                               "borderColor": "GrayText",
@@ -2489,7 +2485,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Highlight",
                                   "color": "Window",
                                 },
@@ -2498,7 +2494,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                             ".ms-Button.is-disabled": Object {
                               "color": "#a19f9d",
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Window",
                                   "borderColor": "GrayText",
                                   "color": "GrayText",
@@ -2514,7 +2510,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                               },
                             },
@@ -2526,7 +2522,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "WindowText",
                               },
                             },
@@ -2539,7 +2535,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                           "position": "absolute",
                           "right": 31,
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "GrayText",
                             },
                           },
@@ -2561,18 +2557,18 @@ exports[`Table query select Panel should render Default properly 1`] = `
                               ":hover": Object {
                                 "backgroundColor": "#106ebe",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "Highlight",
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
-                                "backgroundColor": "Canvas",
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
                               },
                             },
                           },
                           Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               ".ms-Button-menuIcon": Object {
                                 "color": "WindowText",
                               },
@@ -2622,7 +2618,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Button--primary": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "backgroundColor": "Window",
                                     "borderColor": "GrayText",
                                     "color": "GrayText",
@@ -2631,7 +2627,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                               },
                               ".ms-Button-menuIcon": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "GrayText",
                                   },
                                 },
@@ -2639,7 +2635,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                               ":hover": Object {
                                 "cursor": "default",
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "border": "1px solid GrayText",
                                 "color": "GrayText",
@@ -2661,16 +2657,14 @@ exports[`Table query select Panel should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Fabric--isFocusVisible &:focus:after": Object {
                               "border": "1px solid #ffffff",
-                              "borderRadius": undefined,
                               "bottom": 3,
                               "content": "\\"\\"",
                               "left": 3,
                               "outline": "1px solid #605e5c",
-                              "pointerEvents": undefined,
                               "position": "absolute",
                               "right": 3,
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "border": "none",
                                   "bottom": -2,
                                   "left": -2,
@@ -2692,7 +2686,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                         "splitButtonMenuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -2982,7 +2976,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                   >
                     <button
                       aria-label="OK"
-                      className="ms-Button ms-Button--primary root-125"
+                      className="ms-Button ms-Button--primary root-68"
                       data-is-focusable={true}
                       id="sidePanelOkButton"
                       onClick={[Function]}
@@ -2994,14 +2988,14 @@ exports[`Table query select Panel should render Default properly 1`] = `
                       type="submit"
                     >
                       <span
-                        className="ms-Button-flexContainer flexContainer-126"
+                        className="ms-Button-flexContainer flexContainer-69"
                         data-automationid="splitbuttonprimary"
                       >
                         <span
-                          className="ms-Button-textContainer textContainer-127"
+                          className="ms-Button-textContainer textContainer-70"
                         >
                           <span
-                            className="ms-Button-label label-129"
+                            className="ms-Button-label label-72"
                             id="id__1"
                             key="id__1"
                           >

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

@@ -35,7 +35,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
         >
           <div
             aria-label="Add Property"
-            className="ms-Stack addButtonEntiy css-109"
+            className="ms-Stack addButtonEntiy css-53"
             onClick={[Function]}
             onKeyPress={[Function]}
             tabIndex={0}
@@ -43,7 +43,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
             <StyledImageBase
               alt="Add Property"
               height={30}
-              key=".0:$.$.0"
+              key=".0:$.0"
               src={Object {}}
               width={16}
             >
@@ -328,7 +328,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                 width={16}
               >
                 <div
-                  className="ms-Image root-110"
+                  className="ms-Image root-54"
                   style={
                     Object {
                       "height": 30,
@@ -338,7 +338,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                 >
                   <img
                     alt="Add Property"
-                    className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-111"
+                    className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-55"
                     key="fabricImage[object Object]"
                     onError={[Function]}
                     onLoad={[Function]}
@@ -349,10 +349,10 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
             </StyledImageBase>
             <Text
               className="addNewParamStyle"
-              key=".0:$.$.1"
+              key=".0:$.1"
             >
               <span
-                className="addNewParamStyle css-112"
+                className="addNewParamStyle css-56"
               >
                 Add Property
               </span>
@@ -1249,7 +1249,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                         "iconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -1275,7 +1275,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                         "menuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -1287,16 +1287,14 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -1327,7 +1325,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                             "display": "inline-block",
                             "padding": "0 16px",
                             "selectors": Object {
-                              ":active > span": Object {
+                              ":active > *": Object {
                                 "left": 0,
                                 "position": "relative",
                                 "top": 0,
@@ -1354,7 +1352,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "MsHighContrastAdjust": "none",
                                 "backgroundColor": "WindowText",
                                 "borderColor": "WindowText",
@@ -1379,16 +1377,14 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -1422,7 +1418,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                             "backgroundColor": "#f3f2f1",
                             "color": "#d2d0ce",
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "borderColor": "GrayText",
                                 "color": "GrayText",
@@ -1439,7 +1435,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                           "border": "1px solid #106ebe",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "Highlight",
                               "borderColor": "Highlight",
                               "color": "Window",
@@ -1451,7 +1447,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                           "border": "1px solid #005a9e",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "WindowText",
                               "borderColor": "WindowText",
@@ -1467,13 +1463,12 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                           "overflow": "hidden",
                           "padding": 0,
                           "position": "absolute",
-                          "whiteSpace": "nowrap",
                           "width": 1,
                         },
                         "splitButtonContainer": Array [
                           Object {
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "border": "none",
                               },
                             },
@@ -1484,16 +1479,14 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid #ffffff",
-                                "borderRadius": undefined,
                                 "bottom": 3,
                                 "content": "\\"\\"",
                                 "left": 3,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": "none",
                                 "position": "absolute",
                                 "right": 3,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "none",
                                     "bottom": -2,
                                     "left": -2,
@@ -1516,21 +1509,13 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                                 "borderBottomRightRadius": "0",
                                 "borderRight": "none",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                               },
                               ".ms-Button--primary": Object {
                                 "border": "none",
                                 "borderBottomRightRadius": "0",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                                 "selectors": Object {
-                                  ":active": Object {
-                                    "border": "none",
-                                  },
-                                  ":hover": Object {
-                                    "border": "none",
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "MsHighContrastAdjust": "none",
                                     "backgroundColor": "Window",
                                     "border": "1px solid WindowText",
@@ -1543,7 +1528,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                               ".ms-Button--primary + .ms-Button": Object {
                                 "border": "none",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "1px solid WindowText",
                                     "borderLeftWidth": "0",
                                   },
@@ -1556,7 +1541,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -1570,7 +1555,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -1584,7 +1569,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                           "border": "none",
                           "outline": "none",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "Window",
                               "borderColor": "GrayText",
@@ -1600,7 +1585,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Highlight",
                                   "color": "Window",
                                 },
@@ -1609,7 +1594,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                             ".ms-Button.is-disabled": Object {
                               "color": "#a19f9d",
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Window",
                                   "borderColor": "GrayText",
                                   "color": "GrayText",
@@ -1625,7 +1610,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                               },
                             },
@@ -1637,7 +1622,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "WindowText",
                               },
                             },
@@ -1650,7 +1635,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                           "position": "absolute",
                           "right": 31,
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "GrayText",
                             },
                           },
@@ -1672,18 +1657,18 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                               ":hover": Object {
                                 "backgroundColor": "#106ebe",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "Highlight",
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
-                                "backgroundColor": "Canvas",
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
                               },
                             },
                           },
                           Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               ".ms-Button-menuIcon": Object {
                                 "color": "WindowText",
                               },
@@ -1733,7 +1718,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Button--primary": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "backgroundColor": "Window",
                                     "borderColor": "GrayText",
                                     "color": "GrayText",
@@ -1742,7 +1727,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                               },
                               ".ms-Button-menuIcon": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "GrayText",
                                   },
                                 },
@@ -1750,7 +1735,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                               ":hover": Object {
                                 "cursor": "default",
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "border": "1px solid GrayText",
                                 "color": "GrayText",
@@ -1772,16 +1757,14 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Fabric--isFocusVisible &:focus:after": Object {
                               "border": "1px solid #ffffff",
-                              "borderRadius": undefined,
                               "bottom": 3,
                               "content": "\\"\\"",
                               "left": 3,
                               "outline": "1px solid #605e5c",
-                              "pointerEvents": undefined,
                               "position": "absolute",
                               "right": 3,
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "border": "none",
                                   "bottom": -2,
                                   "left": -2,
@@ -1803,7 +1786,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                         "splitButtonMenuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -2093,7 +2076,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                   >
                     <button
                       aria-label="Add Entity"
-                      className="ms-Button ms-Button--primary root-113"
+                      className="ms-Button ms-Button--primary root-57"
                       data-is-focusable={true}
                       id="sidePanelOkButton"
                       onClick={[Function]}
@@ -2105,14 +2088,14 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                       type="submit"
                     >
                       <span
-                        className="ms-Button-flexContainer flexContainer-114"
+                        className="ms-Button-flexContainer flexContainer-58"
                         data-automationid="splitbuttonprimary"
                       >
                         <span
-                          className="ms-Button-textContainer textContainer-115"
+                          className="ms-Button-textContainer textContainer-59"
                         >
                           <span
-                            className="ms-Button-label label-117"
+                            className="ms-Button-label label-61"
                             id="id__0"
                             key="id__0"
                           >

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

@@ -32,13 +32,13 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
           onClick={[Function]}
         >
           <div
-            className="ms-Stack addButtonEntiy css-109"
+            className="ms-Stack addButtonEntiy css-53"
             onClick={[Function]}
           >
             <StyledImageBase
               alt="Add Entity"
               height={30}
-              key=".0:$.$.0"
+              key=".0:$.0"
               src={Object {}}
               width={16}
             >
@@ -323,7 +323,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                 width={16}
               >
                 <div
-                  className="ms-Image root-110"
+                  className="ms-Image root-54"
                   style={
                     Object {
                       "height": 30,
@@ -333,7 +333,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                 >
                   <img
                     alt="Add Entity"
-                    className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-111"
+                    className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-55"
                     key="fabricImage[object Object]"
                     onError={[Function]}
                     onLoad={[Function]}
@@ -344,10 +344,10 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
             </StyledImageBase>
             <Text
               className="addNewParamStyle"
-              key=".0:$.$.1"
+              key=".0:$.1"
             >
               <span
-                className="addNewParamStyle css-112"
+                className="addNewParamStyle css-56"
               >
                 Add Property
               </span>
@@ -355,17 +355,6 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
           </div>
         </Stack>
       </div>
-      <div
-        className="panelNullWarning"
-        style={
-          Object {
-            "color": "red",
-            "padding": "20px",
-          }
-        }
-      >
-        Warning: Null fields will not be displayed for editing.
-      </div>
       <PanelFooterComponent
         buttonLabel="Update"
         isButtonDisabled={false}
@@ -1255,7 +1244,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                         "iconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -1281,7 +1270,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                         "menuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -1293,16 +1282,14 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -1333,7 +1320,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                             "display": "inline-block",
                             "padding": "0 16px",
                             "selectors": Object {
-                              ":active > span": Object {
+                              ":active > *": Object {
                                 "left": 0,
                                 "position": "relative",
                                 "top": 0,
@@ -1360,7 +1347,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "MsHighContrastAdjust": "none",
                                 "backgroundColor": "WindowText",
                                 "borderColor": "WindowText",
@@ -1385,16 +1372,14 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -1428,7 +1413,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                             "backgroundColor": "#f3f2f1",
                             "color": "#d2d0ce",
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "borderColor": "GrayText",
                                 "color": "GrayText",
@@ -1445,7 +1430,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                           "border": "1px solid #106ebe",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "Highlight",
                               "borderColor": "Highlight",
                               "color": "Window",
@@ -1457,7 +1442,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                           "border": "1px solid #005a9e",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "WindowText",
                               "borderColor": "WindowText",
@@ -1473,13 +1458,12 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                           "overflow": "hidden",
                           "padding": 0,
                           "position": "absolute",
-                          "whiteSpace": "nowrap",
                           "width": 1,
                         },
                         "splitButtonContainer": Array [
                           Object {
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "border": "none",
                               },
                             },
@@ -1490,16 +1474,14 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid #ffffff",
-                                "borderRadius": undefined,
                                 "bottom": 3,
                                 "content": "\\"\\"",
                                 "left": 3,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": "none",
                                 "position": "absolute",
                                 "right": 3,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "none",
                                     "bottom": -2,
                                     "left": -2,
@@ -1522,21 +1504,13 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                                 "borderBottomRightRadius": "0",
                                 "borderRight": "none",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                               },
                               ".ms-Button--primary": Object {
                                 "border": "none",
                                 "borderBottomRightRadius": "0",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                                 "selectors": Object {
-                                  ":active": Object {
-                                    "border": "none",
-                                  },
-                                  ":hover": Object {
-                                    "border": "none",
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "MsHighContrastAdjust": "none",
                                     "backgroundColor": "Window",
                                     "border": "1px solid WindowText",
@@ -1549,7 +1523,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                               ".ms-Button--primary + .ms-Button": Object {
                                 "border": "none",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "1px solid WindowText",
                                     "borderLeftWidth": "0",
                                   },
@@ -1562,7 +1536,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -1576,7 +1550,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -1590,7 +1564,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                           "border": "none",
                           "outline": "none",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "Window",
                               "borderColor": "GrayText",
@@ -1606,7 +1580,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Highlight",
                                   "color": "Window",
                                 },
@@ -1615,7 +1589,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                             ".ms-Button.is-disabled": Object {
                               "color": "#a19f9d",
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Window",
                                   "borderColor": "GrayText",
                                   "color": "GrayText",
@@ -1631,7 +1605,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                               },
                             },
@@ -1643,7 +1617,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "WindowText",
                               },
                             },
@@ -1656,7 +1630,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                           "position": "absolute",
                           "right": 31,
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "GrayText",
                             },
                           },
@@ -1678,18 +1652,18 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                               ":hover": Object {
                                 "backgroundColor": "#106ebe",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "Highlight",
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
-                                "backgroundColor": "Canvas",
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
                               },
                             },
                           },
                           Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               ".ms-Button-menuIcon": Object {
                                 "color": "WindowText",
                               },
@@ -1739,7 +1713,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Button--primary": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "backgroundColor": "Window",
                                     "borderColor": "GrayText",
                                     "color": "GrayText",
@@ -1748,7 +1722,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                               },
                               ".ms-Button-menuIcon": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "GrayText",
                                   },
                                 },
@@ -1756,7 +1730,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                               ":hover": Object {
                                 "cursor": "default",
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "border": "1px solid GrayText",
                                 "color": "GrayText",
@@ -1778,16 +1752,14 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Fabric--isFocusVisible &:focus:after": Object {
                               "border": "1px solid #ffffff",
-                              "borderRadius": undefined,
                               "bottom": 3,
                               "content": "\\"\\"",
                               "left": 3,
                               "outline": "1px solid #605e5c",
-                              "pointerEvents": undefined,
                               "position": "absolute",
                               "right": 3,
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "border": "none",
                                   "bottom": -2,
                                   "left": -2,
@@ -1809,7 +1781,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                         "splitButtonMenuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -2099,7 +2071,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                   >
                     <button
                       aria-label="Update"
-                      className="ms-Button ms-Button--primary root-113"
+                      className="ms-Button ms-Button--primary root-57"
                       data-is-focusable={true}
                       id="sidePanelOkButton"
                       onClick={[Function]}
@@ -2111,14 +2083,14 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                       type="submit"
                     >
                       <span
-                        className="ms-Button-flexContainer flexContainer-114"
+                        className="ms-Button-flexContainer flexContainer-58"
                         data-automationid="splitbuttonprimary"
                       >
                         <span
-                          className="ms-Button-textContainer textContainer-115"
+                          className="ms-Button-textContainer textContainer-59"
                         >
                           <span
-                            className="ms-Button-label label-117"
+                            className="ms-Button-label label-61"
                             id="id__0"
                             key="id__0"
                           >

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

@@ -25,13 +25,13 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
           verticalAlign="center"
         >
           <div
-            className="ms-Stack panelInfoErrorContainer css-109"
+            className="ms-Stack panelInfoErrorContainer css-53"
           >
             <StyledIconBase
               aria-label="warning"
               className="panelWarningIcon"
               iconName="WarningSolid"
-              key=".0:$.$.0"
+              key=".0:$.0"
             >
               <IconBase
                 aria-label="warning"
@@ -314,7 +314,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
               >
                 <i
                   aria-label="warning"
-                  className="panelWarningIcon root-112"
+                  className="panelWarningIcon root-55"
                   data-icon-name="WarningSolid"
                   role="img"
                 >
@@ -323,19 +323,21 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
               </IconBase>
             </StyledIconBase>
             <span
-              aria-live="assertive"
               className="panelWarningErrorDetailsLinkContainer"
-              key=".0:$.$.1"
-              role="alert"
+              key=".0:$.1"
             >
               <Text
                 aria-label="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources."
+                aria-live="assertive"
                 className="panelWarningErrorMessage"
+                role="alert"
                 variant="small"
               >
                 <span
                   aria-label="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources."
-                  className="panelWarningErrorMessage css-113"
+                  aria-live="assertive"
+                  className="panelWarningErrorMessage css-56"
+                  role="alert"
                 >
                   Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
                 </span>
@@ -359,7 +361,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             variant="small"
           >
             <span
-              className="css-113"
+              className="css-56"
             >
               Confirm by typing the database id
             </span>
@@ -663,19 +665,19 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
               validateOnLoad={true}
             >
               <div
-                className="ms-TextField is-required root-115"
+                className="ms-TextField is-required root-58"
               >
                 <div
                   className="ms-TextField-wrapper"
                 >
                   <div
-                    className="ms-TextField-fieldGroup fieldGroup-116"
+                    className="ms-TextField-fieldGroup fieldGroup-59"
                   >
                     <input
                       aria-invalid={false}
                       aria-label="Confirm by typing the database id"
                       autoFocus={true}
-                      className="ms-TextField-field field-117"
+                      className="ms-TextField-field field-60"
                       id="confirmDatabaseId"
                       onBlur={[Function]}
                       onChange={[Function]}
@@ -699,7 +701,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             variant="small"
           >
             <span
-              className="css-126"
+              className="css-69"
             >
               Help us improve Azure Cosmos DB!
             </span>
@@ -709,7 +711,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             variant="small"
           >
             <span
-              className="css-126"
+              className="css-69"
             >
               What is the reason why you are deleting this database?
             </span>
@@ -1013,18 +1015,18 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
               validateOnLoad={true}
             >
               <div
-                className="ms-TextField ms-TextField--multiline root-115"
+                className="ms-TextField ms-TextField--multiline root-58"
               >
                 <div
                   className="ms-TextField-wrapper"
                 >
                   <div
-                    className="ms-TextField-fieldGroup fieldGroup-127"
+                    className="ms-TextField-fieldGroup fieldGroup-70"
                   >
                     <textarea
                       aria-invalid={false}
                       aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
-                      className="ms-TextField-field field-128"
+                      className="ms-TextField-field field-71"
                       id="deleteDatabaseFeedbackInput"
                       onBlur={[Function]}
                       onChange={[Function]}
@@ -1929,7 +1931,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                         "iconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -1955,7 +1957,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                         "menuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -1967,16 +1969,14 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -2007,7 +2007,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                             "display": "inline-block",
                             "padding": "0 16px",
                             "selectors": Object {
-                              ":active > span": Object {
+                              ":active > *": Object {
                                 "left": 0,
                                 "position": "relative",
                                 "top": 0,
@@ -2034,7 +2034,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "MsHighContrastAdjust": "none",
                                 "backgroundColor": "WindowText",
                                 "borderColor": "WindowText",
@@ -2059,16 +2059,14 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -2102,7 +2100,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                             "backgroundColor": "#f3f2f1",
                             "color": "#d2d0ce",
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "borderColor": "GrayText",
                                 "color": "GrayText",
@@ -2119,7 +2117,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                           "border": "1px solid #106ebe",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "Highlight",
                               "borderColor": "Highlight",
                               "color": "Window",
@@ -2131,7 +2129,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                           "border": "1px solid #005a9e",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "WindowText",
                               "borderColor": "WindowText",
@@ -2147,13 +2145,12 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                           "overflow": "hidden",
                           "padding": 0,
                           "position": "absolute",
-                          "whiteSpace": "nowrap",
                           "width": 1,
                         },
                         "splitButtonContainer": Array [
                           Object {
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "border": "none",
                               },
                             },
@@ -2164,16 +2161,14 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid #ffffff",
-                                "borderRadius": undefined,
                                 "bottom": 3,
                                 "content": "\\"\\"",
                                 "left": 3,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": "none",
                                 "position": "absolute",
                                 "right": 3,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "none",
                                     "bottom": -2,
                                     "left": -2,
@@ -2196,21 +2191,13 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                                 "borderBottomRightRadius": "0",
                                 "borderRight": "none",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                               },
                               ".ms-Button--primary": Object {
                                 "border": "none",
                                 "borderBottomRightRadius": "0",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                                 "selectors": Object {
-                                  ":active": Object {
-                                    "border": "none",
-                                  },
-                                  ":hover": Object {
-                                    "border": "none",
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "MsHighContrastAdjust": "none",
                                     "backgroundColor": "Window",
                                     "border": "1px solid WindowText",
@@ -2223,7 +2210,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                               ".ms-Button--primary + .ms-Button": Object {
                                 "border": "none",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "1px solid WindowText",
                                     "borderLeftWidth": "0",
                                   },
@@ -2236,7 +2223,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -2250,7 +2237,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -2264,7 +2251,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                           "border": "none",
                           "outline": "none",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "Window",
                               "borderColor": "GrayText",
@@ -2280,7 +2267,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Highlight",
                                   "color": "Window",
                                 },
@@ -2289,7 +2276,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                             ".ms-Button.is-disabled": Object {
                               "color": "#a19f9d",
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Window",
                                   "borderColor": "GrayText",
                                   "color": "GrayText",
@@ -2305,7 +2292,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                               },
                             },
@@ -2317,7 +2304,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "WindowText",
                               },
                             },
@@ -2330,7 +2317,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                           "position": "absolute",
                           "right": 31,
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "GrayText",
                             },
                           },
@@ -2352,18 +2339,18 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                               ":hover": Object {
                                 "backgroundColor": "#106ebe",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "Highlight",
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
-                                "backgroundColor": "Canvas",
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
                               },
                             },
                           },
                           Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               ".ms-Button-menuIcon": Object {
                                 "color": "WindowText",
                               },
@@ -2413,7 +2400,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                             "selectors": Object {
                               ".ms-Button--primary": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "backgroundColor": "Window",
                                     "borderColor": "GrayText",
                                     "color": "GrayText",
@@ -2422,7 +2409,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                               },
                               ".ms-Button-menuIcon": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "GrayText",
                                   },
                                 },
@@ -2430,7 +2417,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                               ":hover": Object {
                                 "cursor": "default",
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "border": "1px solid GrayText",
                                 "color": "GrayText",
@@ -2452,16 +2439,14 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                           "selectors": Object {
                             ".ms-Fabric--isFocusVisible &:focus:after": Object {
                               "border": "1px solid #ffffff",
-                              "borderRadius": undefined,
                               "bottom": 3,
                               "content": "\\"\\"",
                               "left": 3,
                               "outline": "1px solid #605e5c",
-                              "pointerEvents": undefined,
                               "position": "absolute",
                               "right": 3,
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "border": "none",
                                   "bottom": -2,
                                   "left": -2,
@@ -2483,7 +2468,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                         "splitButtonMenuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -2773,7 +2758,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                   >
                     <button
                       aria-label="OK"
-                      className="ms-Button ms-Button--primary root-130"
+                      className="ms-Button ms-Button--primary root-73"
                       data-is-focusable={true}
                       id="sidePanelOkButton"
                       onClick={[Function]}
@@ -2785,16 +2770,16 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                       type="submit"
                     >
                       <span
-                        className="ms-Button-flexContainer flexContainer-131"
+                        className="ms-Button-flexContainer flexContainer-74"
                         data-automationid="splitbuttonprimary"
                       >
                         <span
-                          className="ms-Button-textContainer textContainer-132"
+                          className="ms-Button-textContainer textContainer-75"
                         >
                           <span
-                            className="ms-Button-label label-134"
-                            id="id__10"
-                            key="id__10"
+                            className="ms-Button-label label-77"
+                            id="id__6"
+                            key="id__6"
                           >
                             OK
                           </span>

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

@@ -1,10 +1,10 @@
-import { Checkbox, DefaultButton, IconButton, PrimaryButton, TextField } from "@fluentui/react";
+import { Checkbox, ChoiceGroup, DefaultButton, IconButton, PrimaryButton, TextField } from "@fluentui/react";
 import Explorer from "Explorer/Explorer";
 import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal";
-import { useCopilotStore } from "Explorer/QueryCopilot/QueryCopilotContext";
 import { SubmitFeedback } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { getUserEmail } from "Utils/UserUtils";
 import { shallow } from "enzyme";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
 import React from "react";
 
 jest.mock("Utils/UserUtils");
@@ -13,49 +13,21 @@ jest.mock("Utils/UserUtils");
 jest.mock("Explorer/QueryCopilot/Shared/QueryCopilotClient");
 SubmitFeedback as jest.Mock;
 
-jest.mock("Explorer/QueryCopilot/QueryCopilotContext");
-const mockUseCopilotStore = useCopilotStore as jest.Mock;
-const mockReturnValue = {
-  generatedQuery: "test query",
-  userPrompt: "test prompt",
-  likeQuery: false,
-  showFeedbackModal: false,
-  closeFeedbackModal: jest.fn,
-  setHideFeedbackModalForLikedQueries: jest.fn,
-};
-
 describe("Query Copilot Feedback Modal snapshot test", () => {
   beforeEach(() => {
-    mockUseCopilotStore.mockReturnValue(mockReturnValue);
     jest.clearAllMocks();
   });
   it("shoud render and match snapshot", () => {
-    mockUseCopilotStore.mockReturnValue({
-      ...mockReturnValue,
-      showFeedbackModal: true,
-    });
-    const wrapper = shallow(
-      <QueryCopilotFeedbackModal
-        explorer={new Explorer()}
-        databaseId="CopilotUserDb"
-        containerId="CopilotUserContainer"
-        mode="User"
-      />,
-    );
+    useQueryCopilot.getState().openFeedbackModal("test query", false, "test prompt");
+
+    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
 
     expect(wrapper.props().isOpen).toBeTruthy();
     expect(wrapper).toMatchSnapshot();
   });
 
   it("should close on cancel click", () => {
-    const wrapper = shallow(
-      <QueryCopilotFeedbackModal
-        explorer={new Explorer()}
-        databaseId="CopilotUserDb"
-        containerId="CopilotUserContainer"
-        mode="User"
-      />,
-    );
+    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
 
     const cancelButton = wrapper.find(IconButton);
     cancelButton.simulate("click");
@@ -66,14 +38,7 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
   });
 
   it("should get user unput", () => {
-    const wrapper = shallow(
-      <QueryCopilotFeedbackModal
-        explorer={new Explorer()}
-        databaseId="CopilotUserDb"
-        containerId="CopilotUserContainer"
-        mode="User"
-      />,
-    );
+    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
     const testUserInput = "test user input";
 
     const userInput = wrapper.find(TextField).first();
@@ -83,15 +48,30 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it("should record user contact choice no", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
+    const contactAllowed = wrapper.find(ChoiceGroup);
+
+    contactAllowed.simulate("change", {}, { key: "no" });
+
+    expect(getUserEmail).toHaveBeenCalledTimes(3);
+    expect(wrapper.find(ChoiceGroup).props().selectedKey).toEqual("no");
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should record user contact choice yes", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
+    const contactAllowed = wrapper.find(ChoiceGroup);
+
+    contactAllowed.simulate("change", {}, { key: "yes" });
+
+    expect(getUserEmail).toHaveBeenCalledTimes(4);
+    expect(wrapper.find(ChoiceGroup).props().selectedKey).toEqual("yes");
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it("should not render dont show again button", () => {
-    const wrapper = shallow(
-      <QueryCopilotFeedbackModal
-        explorer={new Explorer()}
-        databaseId="CopilotUserDb"
-        containerId="CopilotUserContainer"
-        mode="User"
-      />,
-    );
+    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
 
     const dontShowAgain = wrapper.find(Checkbox);
 
@@ -99,20 +79,9 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it("should render dont show again button and check it", () => {
-    mockUseCopilotStore.mockReturnValue({
-      ...mockReturnValue,
-      showFeedbackModal: true,
-      likeQuery: true,
-    });
-    const wrapper = shallow(
-      <QueryCopilotFeedbackModal
-        explorer={new Explorer()}
-        databaseId="CopilotUserDb"
-        containerId="CopilotUserContainer"
-        mode="User"
-      />,
-    );
+  it("should render dont show again button and check it ", () => {
+    useQueryCopilot.getState().openFeedbackModal("test query", true, "test prompt");
+    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
 
     const dontShowAgain = wrapper.find(Checkbox);
     dontShowAgain.simulate("change", {}, true);
@@ -123,14 +92,7 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
   });
 
   it("should cancel submission", () => {
-    const wrapper = shallow(
-      <QueryCopilotFeedbackModal
-        explorer={new Explorer()}
-        databaseId="CopilotUserDb"
-        containerId="CopilotUserContainer"
-        mode="User"
-      />,
-    );
+    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
 
     const cancelButton = wrapper.find(DefaultButton);
     cancelButton.simulate("click");
@@ -142,14 +104,7 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
 
   it("should not submit submission if required description field is null", () => {
     const explorer = new Explorer();
-    const wrapper = shallow(
-      <QueryCopilotFeedbackModal
-        explorer={explorer}
-        databaseId="CopilotUserDb"
-        containerId="CopilotUserContainer"
-        mode="User"
-      />,
-    );
+    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={explorer} />);
 
     const submitButton = wrapper.find(PrimaryButton);
     submitButton.simulate("click");
@@ -159,15 +114,9 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
   });
 
   it("should submit submission", () => {
+    useQueryCopilot.getState().openFeedbackModal("test query", false, "test prompt");
     const explorer = new Explorer();
-    const wrapper = shallow(
-      <QueryCopilotFeedbackModal
-        explorer={explorer}
-        databaseId="CopilotUserDb"
-        containerId="CopilotUserContainer"
-        mode="User"
-      />,
-    );
+    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={explorer} />);
 
     const submitButton = wrapper.find("form");
     submitButton.simulate("submit");
@@ -175,14 +124,12 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
 
     expect(SubmitFeedback).toHaveBeenCalledTimes(1);
     expect(SubmitFeedback).toHaveBeenCalledWith({
-      containerId: "CopilotUserContainer",
-      databaseId: "CopilotUserDb",
-      mode: "User",
       params: {
         likeQuery: false,
         generatedQuery: "test query",
         userPrompt: "test prompt",
         description: "",
+        contact: getUserEmail(),
       },
       explorer: explorer,
     });

src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.tsx

@@ -1,5 +1,6 @@
 import {
   Checkbox,
+  ChoiceGroup,
   DefaultButton,
   IconButton,
   Link,
@@ -10,21 +11,12 @@ import {
   TextField,
 } from "@fluentui/react";
 import Explorer from "Explorer/Explorer";
-import { useCopilotStore } from "Explorer/QueryCopilot/QueryCopilotContext";
 import { SubmitFeedback } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
 import React from "react";
+import { getUserEmail } from "../../../Utils/UserUtils";
 
-export const QueryCopilotFeedbackModal = ({
-  explorer,
-  databaseId,
-  containerId,
-  mode,
-}: {
-  explorer: Explorer;
-  databaseId: string;
-  containerId: string;
-  mode: string;
-}): JSX.Element => {
+export const QueryCopilotFeedbackModal = ({ explorer }: { explorer: Explorer }): JSX.Element => {
   const {
     generatedQuery,
     userPrompt,
@@ -32,19 +24,18 @@ export const QueryCopilotFeedbackModal = ({
     showFeedbackModal,
     closeFeedbackModal,
     setHideFeedbackModalForLikedQueries,
-  } = useCopilotStore();
+  } = useQueryCopilot();
+  const [isContactAllowed, setIsContactAllowed] = React.useState<boolean>(false);
   const [description, setDescription] = React.useState<string>("");
   const [doNotShowAgainChecked, setDoNotShowAgainChecked] = React.useState<boolean>(false);
+  const [contact, setContact] = React.useState<string>(getUserEmail());
 
   const handleSubmit = () => {
     closeFeedbackModal();
     setHideFeedbackModalForLikedQueries(doNotShowAgainChecked);
     SubmitFeedback({
-      params: { generatedQuery, likeQuery, description, userPrompt },
-      explorer,
-      databaseId,
-      containerId,
-      mode: mode,
+      params: { generatedQuery, likeQuery, description, userPrompt, contact },
+      explorer: explorer,
     });
   };
 
@@ -73,6 +64,30 @@ export const QueryCopilotFeedbackModal = ({
             defaultValue={generatedQuery}
             readOnly
           />
+          <ChoiceGroup
+            styles={{
+              root: {
+                marginBottom: 14,
+              },
+              flexContainer: {
+                selectors: {
+                  ".ms-ChoiceField-field::before": { marginTop: 4 },
+                  ".ms-ChoiceField-field::after": { marginTop: 4 },
+                  ".ms-ChoiceFieldLabel": { paddingLeft: 6 },
+                },
+              },
+            }}
+            label="May we contact you about your feedback?"
+            options={[
+              { key: "yes", text: "Yes, you may contact me." },
+              { key: "no", text: "No, do not contact me." },
+            ]}
+            selectedKey={isContactAllowed ? "yes" : "no"}
+            onChange={(_, option) => {
+              setIsContactAllowed(option.key === "yes");
+              setContact(option.key === "yes" ? getUserEmail() : "");
+            }}
+          ></ChoiceGroup>
           <Text style={{ fontSize: 12, marginBottom: 14 }}>
             By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the{" "}
             {

src/Explorer/QueryCopilot/Modal/WelcomeModal.css

@@ -1,6 +1,7 @@
 .modalContentPadding {
   padding-top: 15px;
   width: 513px;
+  height: 638px;
 }
 
 .exitPadding {
@@ -38,7 +39,7 @@
 }
 
 .buttonPadding {
-  padding: 15px 0px 15px 0px;
+  padding: 15px 0px 0px 0px;
 }
 
 .tryButton {

src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx

@@ -1,6 +1,7 @@
 import { IconButton, Image, Link, Modal, PrimaryButton, Stack, StackItem, Text } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
 import React from "react";
+import Database from "../../../../images/CopilotDatabase.svg";
 import Flash from "../../../../images/CopilotFlash.svg";
 import Thumb from "../../../../images/CopilotThumb.svg";
 import CoplilotWelcomeIllustration from "../../../../images/CopliotWelcomeIllustration.svg";
@@ -22,10 +23,8 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
         onDismiss={hideModal}
         isBlocking={false}
         styles={{
-          main: {
-            maxHeight: 600,
-            borderRadius: 10,
-            overflow: "hidden",
+          scrollableContent: {
+            minHeight: 680,
           },
         }}
       >
@@ -37,6 +36,9 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
               </Stack.Item>
             </Stack>
             <Stack horizontal grow={1} horizontalAlign="end" verticalAlign="start" className="exitPadding">
+              <Stack.Item className="previewMargin">
+                <Text className="preview">Preview</Text>
+              </Stack.Item>
               <Stack.Item>
                 <IconButton
                   onClick={hideModal}
@@ -50,7 +52,7 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
           </Stack>
           <Stack horizontalAlign="center">
             <Stack.Item align="center" style={{ textAlign: "center" }}>
-              <Text className="title bold">Welcome to Microsoft Copilot for Azure in Cosmos DB</Text>
+              <Text className="title bold">Welcome to Copilot in Azure Cosmos DB (Private Preview)</Text>
             </Stack.Item>
             <Stack.Item align="center" className="text">
               <Stack horizontal>
@@ -67,7 +69,7 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
               <Text>
                 Ask Copilot to generate a query by describing the query in your words.
                 <br />
-                <Link target="_blank" href="https://aka.ms/MicrosoftCopilotForAzureInCDBHowTo">
+                <Link target="_blank" href="https://aka.ms/cdb-copilot-learn-more">
                   Learn more
                 </Link>
               </Text>
@@ -85,11 +87,31 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
                 </StackItem>
               </Stack>
               <Text>
-                AI-generated content can have mistakes. Make sure it is accurate and appropriate before executing the
-                query.
+                AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
                 <br />
                 <Link target="_blank" href="https://aka.ms/cdb-copilot-preview-terms">
-                  Read our preview terms here
+                  Read preview terms
+                </Link>
+              </Text>
+            </Stack.Item>
+            <Stack.Item align="center" className="text">
+              <Stack horizontal>
+                <StackItem align="start" className="imageTextPadding">
+                  <Image src={Database} />
+                </StackItem>
+                <StackItem align="start">
+                  <Text className="bold">
+                    Query Copilot works on a sample database.
+                    <br />
+                  </Text>
+                </StackItem>
+              </Stack>
+              <Text>
+                While in Private Preview, Query Copilot is setup to work on sample database we have configured for you
+                at no cost.
+                <br />
+                <Link target="_blank" href="https://aka.ms/cdb-copilot-learn-more">
+                  Learn more
                 </Link>
               </Text>
             </Stack.Item>

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

@@ -76,6 +76,43 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
           }
         }
       />
+      <StyledChoiceGroup
+        label="May we contact you about your feedback?"
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "key": "yes",
+              "text": "Yes, you may contact me.",
+            },
+            Object {
+              "key": "no",
+              "text": "No, do not contact me.",
+            },
+          ]
+        }
+        selectedKey="no"
+        styles={
+          Object {
+            "flexContainer": Object {
+              "selectors": Object {
+                ".ms-ChoiceField-field::after": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceField-field::before": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceFieldLabel": Object {
+                  "paddingLeft": 6,
+                },
+              },
+            },
+            "root": Object {
+              "marginBottom": 14,
+            },
+          }
+        }
+      />
       <Text
         style={
           Object {
@@ -198,6 +235,43 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
           }
         }
       />
+      <StyledChoiceGroup
+        label="May we contact you about your feedback?"
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "key": "yes",
+              "text": "Yes, you may contact me.",
+            },
+            Object {
+              "key": "no",
+              "text": "No, do not contact me.",
+            },
+          ]
+        }
+        selectedKey="no"
+        styles={
+          Object {
+            "flexContainer": Object {
+              "selectors": Object {
+                ".ms-ChoiceField-field::after": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceField-field::before": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceFieldLabel": Object {
+                  "paddingLeft": 6,
+                },
+              },
+            },
+            "root": Object {
+              "marginBottom": 14,
+            },
+          }
+        }
+      />
       <Text
         style={
           Object {
@@ -217,6 +291,21 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
          
         for more information.
       </Text>
+      <StyledCheckboxBase
+        checked={false}
+        label="Don't show me this next time"
+        onChange={[Function]}
+        styles={
+          Object {
+            "label": Object {
+              "paddingLeft": 0,
+            },
+            "root": Object {
+              "marginBottom": 14,
+            },
+          }
+        }
+      />
       <Stack
         horizontal={true}
         horizontalAlign="end"
@@ -320,6 +409,43 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
           }
         }
       />
+      <StyledChoiceGroup
+        label="May we contact you about your feedback?"
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "key": "yes",
+              "text": "Yes, you may contact me.",
+            },
+            Object {
+              "key": "no",
+              "text": "No, do not contact me.",
+            },
+          ]
+        }
+        selectedKey="no"
+        styles={
+          Object {
+            "flexContainer": Object {
+              "selectors": Object {
+                ".ms-ChoiceField-field::after": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceField-field::before": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceFieldLabel": Object {
+                  "paddingLeft": 6,
+                },
+              },
+            },
+            "root": Object {
+              "marginBottom": 14,
+            },
+          }
+        }
+      />
       <Text
         style={
           Object {
@@ -442,6 +568,43 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
           }
         }
       />
+      <StyledChoiceGroup
+        label="May we contact you about your feedback?"
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "key": "yes",
+              "text": "Yes, you may contact me.",
+            },
+            Object {
+              "key": "no",
+              "text": "No, do not contact me.",
+            },
+          ]
+        }
+        selectedKey="no"
+        styles={
+          Object {
+            "flexContainer": Object {
+              "selectors": Object {
+                ".ms-ChoiceField-field::after": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceField-field::before": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceFieldLabel": Object {
+                  "paddingLeft": 6,
+                },
+              },
+            },
+            "root": Object {
+              "marginBottom": 14,
+            },
+          }
+        }
+      />
       <Text
         style={
           Object {
@@ -564,6 +727,43 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
           }
         }
       />
+      <StyledChoiceGroup
+        label="May we contact you about your feedback?"
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "key": "yes",
+              "text": "Yes, you may contact me.",
+            },
+            Object {
+              "key": "no",
+              "text": "No, do not contact me.",
+            },
+          ]
+        }
+        selectedKey="no"
+        styles={
+          Object {
+            "flexContainer": Object {
+              "selectors": Object {
+                ".ms-ChoiceField-field::after": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceField-field::before": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceFieldLabel": Object {
+                  "paddingLeft": 6,
+                },
+              },
+            },
+            "root": Object {
+              "marginBottom": 14,
+            },
+          }
+        }
+      />
       <Text
         style={
           Object {
@@ -610,7 +810,325 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
 </Modal>
 `;
 
-exports[`Query Copilot Feedback Modal snapshot test should render dont show again button and check it 1`] = `
+exports[`Query Copilot Feedback Modal snapshot test should record user contact choice no 1`] = `
+<Modal
+  isOpen={false}
+>
+  <form
+    onSubmit={[Function]}
+  >
+    <Stack
+      style={
+        Object {
+          "padding": 24,
+        }
+      }
+    >
+      <Stack
+        horizontal={true}
+        horizontalAlign="space-between"
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 20,
+              "fontWeight": 600,
+              "marginBottom": 20,
+            }
+          }
+        >
+          Send feedback to Microsoft
+        </Text>
+        <CustomizedIconButton
+          iconProps={
+            Object {
+              "iconName": "Cancel",
+            }
+          }
+          onClick={[Function]}
+        />
+      </Stack>
+      <Text
+        style={
+          Object {
+            "fontSize": 14,
+            "marginBottom": 14,
+          }
+        }
+      >
+        Your feedback will help improve the experience.
+      </Text>
+      <StyledTextFieldBase
+        label="Description"
+        multiline={true}
+        onChange={[Function]}
+        placeholder="Provide more details"
+        required={true}
+        rows={3}
+        styles={
+          Object {
+            "root": Object {
+              "marginBottom": 14,
+            },
+          }
+        }
+        value=""
+      />
+      <StyledTextFieldBase
+        defaultValue="test query"
+        label="Query generated"
+        readOnly={true}
+        styles={
+          Object {
+            "root": Object {
+              "marginBottom": 14,
+            },
+          }
+        }
+      />
+      <StyledChoiceGroup
+        label="May we contact you about your feedback?"
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "key": "yes",
+              "text": "Yes, you may contact me.",
+            },
+            Object {
+              "key": "no",
+              "text": "No, do not contact me.",
+            },
+          ]
+        }
+        selectedKey="no"
+        styles={
+          Object {
+            "flexContainer": Object {
+              "selectors": Object {
+                ".ms-ChoiceField-field::after": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceField-field::before": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceFieldLabel": Object {
+                  "paddingLeft": 6,
+                },
+              },
+            },
+            "root": Object {
+              "marginBottom": 14,
+            },
+          }
+        }
+      />
+      <Text
+        style={
+          Object {
+            "fontSize": 12,
+            "marginBottom": 14,
+          }
+        }
+      >
+        By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
+         
+        <StyledLinkBase
+          href="https://privacy.microsoft.com/privacystatement"
+          target="_blank"
+        >
+          Privacy statement
+        </StyledLinkBase>
+         
+        for more information.
+      </Text>
+      <Stack
+        horizontal={true}
+        horizontalAlign="end"
+      >
+        <CustomizedPrimaryButton
+          styles={
+            Object {
+              "root": Object {
+                "marginRight": 8,
+              },
+            }
+          }
+          type="submit"
+        >
+          Submit
+        </CustomizedPrimaryButton>
+        <CustomizedDefaultButton
+          onClick={[Function]}
+        >
+          Cancel
+        </CustomizedDefaultButton>
+      </Stack>
+    </Stack>
+  </form>
+</Modal>
+`;
+
+exports[`Query Copilot Feedback Modal snapshot test should record user contact choice yes 1`] = `
+<Modal
+  isOpen={false}
+>
+  <form
+    onSubmit={[Function]}
+  >
+    <Stack
+      style={
+        Object {
+          "padding": 24,
+        }
+      }
+    >
+      <Stack
+        horizontal={true}
+        horizontalAlign="space-between"
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 20,
+              "fontWeight": 600,
+              "marginBottom": 20,
+            }
+          }
+        >
+          Send feedback to Microsoft
+        </Text>
+        <CustomizedIconButton
+          iconProps={
+            Object {
+              "iconName": "Cancel",
+            }
+          }
+          onClick={[Function]}
+        />
+      </Stack>
+      <Text
+        style={
+          Object {
+            "fontSize": 14,
+            "marginBottom": 14,
+          }
+        }
+      >
+        Your feedback will help improve the experience.
+      </Text>
+      <StyledTextFieldBase
+        label="Description"
+        multiline={true}
+        onChange={[Function]}
+        placeholder="Provide more details"
+        required={true}
+        rows={3}
+        styles={
+          Object {
+            "root": Object {
+              "marginBottom": 14,
+            },
+          }
+        }
+        value=""
+      />
+      <StyledTextFieldBase
+        defaultValue="test query"
+        label="Query generated"
+        readOnly={true}
+        styles={
+          Object {
+            "root": Object {
+              "marginBottom": 14,
+            },
+          }
+        }
+      />
+      <StyledChoiceGroup
+        label="May we contact you about your feedback?"
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "key": "yes",
+              "text": "Yes, you may contact me.",
+            },
+            Object {
+              "key": "no",
+              "text": "No, do not contact me.",
+            },
+          ]
+        }
+        selectedKey="yes"
+        styles={
+          Object {
+            "flexContainer": Object {
+              "selectors": Object {
+                ".ms-ChoiceField-field::after": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceField-field::before": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceFieldLabel": Object {
+                  "paddingLeft": 6,
+                },
+              },
+            },
+            "root": Object {
+              "marginBottom": 14,
+            },
+          }
+        }
+      />
+      <Text
+        style={
+          Object {
+            "fontSize": 12,
+            "marginBottom": 14,
+          }
+        }
+      >
+        By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
+         
+        <StyledLinkBase
+          href="https://privacy.microsoft.com/privacystatement"
+          target="_blank"
+        >
+          Privacy statement
+        </StyledLinkBase>
+         
+        for more information.
+      </Text>
+      <Stack
+        horizontal={true}
+        horizontalAlign="end"
+      >
+        <CustomizedPrimaryButton
+          styles={
+            Object {
+              "root": Object {
+                "marginRight": 8,
+              },
+            }
+          }
+          type="submit"
+        >
+          Submit
+        </CustomizedPrimaryButton>
+        <CustomizedDefaultButton
+          onClick={[Function]}
+        >
+          Cancel
+        </CustomizedDefaultButton>
+      </Stack>
+    </Stack>
+  </form>
+</Modal>
+`;
+
+exports[`Query Copilot Feedback Modal snapshot test should render dont show again button and check it  1`] = `
 <Modal
   isOpen={true}
 >
@@ -686,6 +1204,43 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
           }
         }
       />
+      <StyledChoiceGroup
+        label="May we contact you about your feedback?"
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "key": "yes",
+              "text": "Yes, you may contact me.",
+            },
+            Object {
+              "key": "no",
+              "text": "No, do not contact me.",
+            },
+          ]
+        }
+        selectedKey="no"
+        styles={
+          Object {
+            "flexContainer": Object {
+              "selectors": Object {
+                ".ms-ChoiceField-field::after": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceField-field::before": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceFieldLabel": Object {
+                  "paddingLeft": 6,
+                },
+              },
+            },
+            "root": Object {
+              "marginBottom": 14,
+            },
+          }
+        }
+      />
       <Text
         style={
           Object {
@@ -823,6 +1378,43 @@ exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`]
           }
         }
       />
+      <StyledChoiceGroup
+        label="May we contact you about your feedback?"
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "key": "yes",
+              "text": "Yes, you may contact me.",
+            },
+            Object {
+              "key": "no",
+              "text": "No, do not contact me.",
+            },
+          ]
+        }
+        selectedKey="no"
+        styles={
+          Object {
+            "flexContainer": Object {
+              "selectors": Object {
+                ".ms-ChoiceField-field::after": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceField-field::before": Object {
+                  "marginTop": 4,
+                },
+                ".ms-ChoiceFieldLabel": Object {
+                  "paddingLeft": 6,
+                },
+              },
+            },
+            "root": Object {
+              "marginBottom": 14,
+            },
+          }
+        }
+      />
       <Text
         style={
           Object {

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

@@ -8,10 +8,8 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
     onDismiss={[Function]}
     styles={
       Object {
-        "main": Object {
-          "borderRadius": 10,
-          "maxHeight": 600,
-          "overflow": "hidden",
+        "scrollableContent": Object {
+          "minHeight": 680,
         },
       }
     }
@@ -40,6 +38,15 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
           horizontalAlign="end"
           verticalAlign="start"
         >
+          <StackItem
+            className="previewMargin"
+          >
+            <Text
+              className="preview"
+            >
+              Preview
+            </Text>
+          </StackItem>
           <StackItem>
             <CustomizedIconButton
               ariaLabel="Exit"
@@ -69,7 +76,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
           <Text
             className="title bold"
           >
-            Welcome to Microsoft Copilot for Azure in Cosmos DB
+            Welcome to Copilot in Azure Cosmos DB (Private Preview)
           </Text>
         </StackItem>
         <StackItem
@@ -102,7 +109,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
             Ask Copilot to generate a query by describing the query in your words.
             <br />
             <StyledLinkBase
-              href="https://aka.ms/MicrosoftCopilotForAzureInCDBHowTo"
+              href="https://aka.ms/cdb-copilot-learn-more"
               target="_blank"
             >
               Learn more
@@ -136,13 +143,50 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
             </StackItem>
           </Stack>
           <Text>
-            AI-generated content can have mistakes. Make sure it is accurate and appropriate before executing the query.
+            AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
             <br />
             <StyledLinkBase
               href="https://aka.ms/cdb-copilot-preview-terms"
               target="_blank"
             >
-              Read our preview terms here
+              Read preview terms
+            </StyledLinkBase>
+          </Text>
+        </StackItem>
+        <StackItem
+          align="center"
+          className="text"
+        >
+          <Stack
+            horizontal={true}
+          >
+            <StackItem
+              align="start"
+              className="imageTextPadding"
+            >
+              <Image
+                src={Object {}}
+              />
+            </StackItem>
+            <StackItem
+              align="start"
+            >
+              <Text
+                className="bold"
+              >
+                Query Copilot works on a sample database.
+                <br />
+              </Text>
+            </StackItem>
+          </Stack>
+          <Text>
+            While in Private Preview, Query Copilot is setup to work on sample database we have configured for you at no cost.
+            <br />
+            <StyledLinkBase
+              href="https://aka.ms/cdb-copilot-learn-more"
+              target="_blank"
+            >
+              Learn more
             </StyledLinkBase>
           </Text>
         </StackItem>

src/Explorer/QueryCopilot/QueryCopilotContext.tsx

@@ -1,135 +0,0 @@
-import { MinimalQueryIterator } from "Common/IteratorUtilities";
-import { QueryResults } from "Contracts/ViewModels";
-import { CopilotMessage } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
-import { guid } from "Explorer/Tables/Utilities";
-import { QueryCopilotState } from "hooks/useQueryCopilot";
-
-import React, { createContext, useContext, useState } from "react";
-import create from "zustand";
-const context = createContext(null);
-const useCopilotStore = (): Partial<QueryCopilotState> => useContext(context);
-
-const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {
-  const [useStore] = useState(() =>
-    create((set, get) => ({
-      generatedQuery: "",
-      likeQuery: false,
-      userPrompt: "",
-      showFeedbackModal: false,
-      hideFeedbackModalForLikedQueries: false,
-      correlationId: "",
-      query: "SELECT * FROM c",
-      selectedQuery: "",
-      isGeneratingQuery: false,
-      isGeneratingExplanation: false,
-      isExecuting: false,
-      dislikeQuery: undefined,
-      showCallout: false,
-      showSamplePrompts: false,
-      queryIterator: undefined,
-      queryResults: undefined,
-      errorMessage: "",
-      isSamplePromptsOpen: false,
-      showDeletePopup: false,
-      showFeedbackBar: false,
-      showCopyPopup: false,
-      showErrorMessageBar: false,
-      showInvalidQueryMessageBar: false,
-      generatedQueryComments: "",
-      wasCopilotUsed: false,
-      showWelcomeSidebar: true,
-      showCopilotSidebar: false,
-      chatMessages: [],
-      shouldIncludeInMessages: true,
-      showExplanationBubble: false,
-      isAllocatingContainer: false,
-
-      openFeedbackModal: (generatedQuery: string, likeQuery: boolean, userPrompt: string) =>
-        set({ generatedQuery, likeQuery, userPrompt, showFeedbackModal: true }),
-      closeFeedbackModal: () => set({ showFeedbackModal: false }),
-      setHideFeedbackModalForLikedQueries: (hideFeedbackModalForLikedQueries: boolean) =>
-        set({ hideFeedbackModalForLikedQueries }),
-      refreshCorrelationId: () => set({ correlationId: guid() }),
-      setUserPrompt: (userPrompt: string) => set({ userPrompt }),
-      setQuery: (query: string) => set({ query }),
-      setGeneratedQuery: (generatedQuery: string) => set({ generatedQuery }),
-      setSelectedQuery: (selectedQuery: string) => set({ selectedQuery }),
-      setIsGeneratingQuery: (isGeneratingQuery: boolean) => set({ isGeneratingQuery }),
-      setIsGeneratingExplanation: (isGeneratingExplanation: boolean) => set({ isGeneratingExplanation }),
-      setIsExecuting: (isExecuting: boolean) => set({ isExecuting }),
-      setLikeQuery: (likeQuery: boolean) => set({ likeQuery }),
-      setDislikeQuery: (dislikeQuery: boolean | undefined) => set({ dislikeQuery }),
-      setShowCallout: (showCallout: boolean) => set({ showCallout }),
-      setShowSamplePrompts: (showSamplePrompts: boolean) => set({ showSamplePrompts }),
-      setQueryIterator: (queryIterator: MinimalQueryIterator | undefined) => set({ queryIterator }),
-      setQueryResults: (queryResults: QueryResults | undefined) => set({ queryResults }),
-      setErrorMessage: (errorMessage: string) => set({ errorMessage }),
-      setIsSamplePromptsOpen: (isSamplePromptsOpen: boolean) => set({ isSamplePromptsOpen }),
-      setShowDeletePopup: (showDeletePopup: boolean) => set({ showDeletePopup }),
-      setShowFeedbackBar: (showFeedbackBar: boolean) => set({ showFeedbackBar }),
-      setshowCopyPopup: (showCopyPopup: boolean) => set({ showCopyPopup }),
-      setShowErrorMessageBar: (showErrorMessageBar: boolean) => set({ showErrorMessageBar }),
-      setShowInvalidQueryMessageBar: (showInvalidQueryMessageBar: boolean) => set({ showInvalidQueryMessageBar }),
-      setGeneratedQueryComments: (generatedQueryComments: string) => set({ generatedQueryComments }),
-      setWasCopilotUsed: (wasCopilotUsed: boolean) => set({ wasCopilotUsed }),
-      setShowWelcomeSidebar: (showWelcomeSidebar: boolean) => set({ showWelcomeSidebar }),
-      setShowCopilotSidebar: (showCopilotSidebar: boolean) => set({ showCopilotSidebar }),
-      setChatMessages: (chatMessages: CopilotMessage[]) => set({ chatMessages }),
-      setShouldIncludeInMessages: (shouldIncludeInMessages: boolean) => set({ shouldIncludeInMessages }),
-      setShowExplanationBubble: (showExplanationBubble: boolean) => set({ showExplanationBubble }),
-
-      getState: () => {
-        return get();
-      },
-
-      resetQueryCopilotStates: () => {
-        set((state) => ({
-          ...state,
-          generatedQuery: "",
-          likeQuery: false,
-          userPrompt: "",
-          showFeedbackModal: false,
-          hideFeedbackModalForLikedQueries: false,
-          correlationId: "",
-          query: "SELECT * FROM c",
-          selectedQuery: "",
-          isGeneratingQuery: false,
-          isGeneratingExplanation: false,
-          isExecuting: false,
-          dislikeQuery: undefined,
-          showCallout: false,
-          showSamplePrompts: false,
-          queryIterator: undefined,
-          queryResults: undefined,
-          errorMessage: "",
-          isSamplePromptsOpen: false,
-          showDeletePopup: false,
-          showFeedbackBar: false,
-          showCopyPopup: false,
-          showErrorMessageBar: false,
-          showInvalidQueryMessageBar: false,
-          generatedQueryComments: "",
-          wasCopilotUsed: false,
-          showCopilotSidebar: false,
-          chatMessages: [],
-          shouldIncludeInMessages: true,
-          showExplanationBubble: false,
-          notebookServerInfo: {
-            notebookServerEndpoint: undefined,
-            authToken: undefined,
-            forwardingId: undefined,
-          },
-          containerStatus: {
-            status: undefined,
-            durationLeftInMinutes: undefined,
-            phoenixServerInfo: undefined,
-          },
-          isAllocatingContainer: false,
-        }));
-      },
-    })),
-  );
-  return <context.Provider value={useStore()}>{children}</context.Provider>;
-};
-
-export { CopilotProvider, useCopilotStore };

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable no-console */
 import {
   Callout,
   CommandBarButton,
@@ -19,21 +17,20 @@ import {
   TextField,
 } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
-import { HttpStatusCodes } from "Common/Constants";
+import {
+  ContainerStatusType,
+  PoolIdType,
+  QueryCopilotSampleContainerSchema,
+  ShortenedQueryCopilotSampleContainerSchema,
+} from "Common/Constants";
 import { handleError } from "Common/ErrorHandlingUtils";
 import { createUri } from "Common/UrlUtility";
 import { WelcomeModal } from "Explorer/QueryCopilot/Modal/WelcomeModal";
 import { CopyPopup } from "Explorer/QueryCopilot/Popup/CopyPopup";
 import { DeletePopup } from "Explorer/QueryCopilot/Popup/DeletePopup";
-import {
-  SuggestedPrompt,
-  getSampleDatabaseSuggestedPrompts,
-  getSuggestedPrompts,
-} from "Explorer/QueryCopilot/QueryCopilotUtilities";
-import { SubmitFeedback, allocatePhoenixContainer } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
+import { SubmitFeedback } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { GenerateSQLQueryResponse, QueryCopilotProps } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
 import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/Shared/SamplePrompts/SamplePrompts";
-import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { userContext } from "UserContext";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import React, { useRef, useState } from "react";
@@ -41,40 +38,29 @@ import HintIcon from "../../../images/Hint.svg";
 import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
 import RecentIcon from "../../../images/Recent.svg";
 import errorIcon from "../../../images/close-black.svg";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { useTabs } from "../../hooks/useTabs";
-import { useCopilotStore } from "../QueryCopilot/QueryCopilotContext";
-import { useSelectedNode } from "../useSelectedNode";
 
 type QueryCopilotPromptProps = QueryCopilotProps & {
-  databaseId: string;
-  containerId: string;
   toggleCopilot: (toggle: boolean) => void;
 };
 
+interface SuggestedPrompt {
+  id: number;
+  text: string;
+}
+
 const promptStyles: IButtonStyles = {
   root: { border: 0, selectors: { ":hover": { outline: "1px dashed #605e5c" } } },
-  label: {
-    fontWeight: 400,
-    textAlign: "left",
-    paddingLeft: 8,
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-  },
-  textContainer: { overflow: "hidden" },
+  label: { fontWeight: 400, textAlign: "left", paddingLeft: 8 },
 };
 
 export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
   explorer,
   toggleCopilot,
-  databaseId,
-  containerId,
 }: QueryCopilotPromptProps): JSX.Element => {
   const [copilotTeachingBubbleVisible, { toggle: toggleCopilotTeachingBubbleVisible }] = useBoolean(false);
   const inputEdited = useRef(false);
   const {
-    openFeedbackModal,
     hideFeedbackModalForLikedQueries,
     userPrompt,
     setUserPrompt,
@@ -107,8 +93,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     setGeneratedQueryComments,
     setQueryResults,
     setErrorMessage,
-    errorMessage,
-  } = useCopilotStore();
+  } = useQueryCopilot();
 
   const sampleProps: SamplePromptsProps = {
     isSamplePromptsOpen: isSamplePromptsOpen,
@@ -133,13 +118,14 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     }, 6000);
   };
 
-  const isSampleCopilotActive = useSelectedNode.getState().isQueryCopilotCollectionSelected();
   const cachedHistoriesString = localStorage.getItem(`${userContext.databaseAccount?.id}-queryCopilotHistories`);
   const cachedHistories = cachedHistoriesString?.split("|");
   const [histories, setHistories] = useState<string[]>(cachedHistories || []);
-  const suggestedPrompts: SuggestedPrompt[] = isSampleCopilotActive
-    ? getSampleDatabaseSuggestedPrompts()
-    : getSuggestedPrompts();
+  const suggestedPrompts: SuggestedPrompt[] = [
+    { id: 1, text: 'Show all products that have the word "ultra" in the name or description' },
+    { id: 2, text: "What are all of the possible categories for the products, and their counts?" },
+    { id: 3, text: 'Show me all products that have been reviewed by someone with a username that contains "bob"' },
+  ];
   const [filteredHistories, setFilteredHistories] = useState<string[]>(histories);
   const [filteredSuggestedPrompts, setFilteredSuggestedPrompts] = useState<SuggestedPrompt[]>(suggestedPrompts);
 
@@ -190,24 +176,28 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
       setShowDeletePopup(false);
       useTabs.getState().setIsTabExecuting(true);
       useTabs.getState().setIsQueryErrorThrown(false);
-      const mode: string = isSampleCopilotActive ? "Sample" : "User";
-
-      await allocatePhoenixContainer({ explorer, databaseId, containerId, mode });
-
+      if (
+        useQueryCopilot.getState().containerStatus.status !== ContainerStatusType.Active &&
+        !userContext.features.disableCopilotPhoenixGateaway
+      ) {
+        await explorer.allocateContainer(PoolIdType.QueryCopilot);
+      }
       const payload = {
+        containerSchema: userContext.features.enableCopilotFullSchema
+          ? QueryCopilotSampleContainerSchema
+          : ShortenedQueryCopilotSampleContainerSchema,
         userPrompt: userPrompt,
       };
       useQueryCopilot.getState().refreshCorrelationId();
       const serverInfo = useQueryCopilot.getState().notebookServerInfo;
       const queryUri = userContext.features.disableCopilotPhoenixGateaway
         ? createUri("https://copilotorchestrater.azurewebsites.net/", "generateSQLQuery")
-        : createUri(serverInfo.notebookServerEndpoint, "public/generateSQLQuery");
+        : createUri(serverInfo.notebookServerEndpoint, "generateSQLQuery");
       const response = await fetch(queryUri, {
         method: "POST",
         headers: {
           "content-type": "application/json",
           "x-ms-correlationid": useQueryCopilot.getState().correlationId,
-          Authorization: `token ${useQueryCopilot.getState().notebookServerInfo.authToken}`,
         },
         body: JSON.stringify(payload),
       });
@@ -225,40 +215,13 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           setGeneratedQueryComments(generateSQLQueryResponse.explanation);
           setShowFeedbackBar(true);
           resetQueryResults();
-          TelemetryProcessor.traceSuccess(Action.QueryGenerationFromCopilotPrompt, {
-            databaseName: databaseId,
-            collectionId: containerId,
-            copilotLatency:
-              Date.parse(generateSQLQueryResponse?.generateEnd) - Date.parse(generateSQLQueryResponse?.generateStart),
-            responseCode: response.status,
-          });
         } else {
           setShowInvalidQueryMessageBar(true);
-          TelemetryProcessor.traceFailure(Action.QueryGenerationFromCopilotPrompt, {
-            databaseName: databaseId,
-            collectionId: containerId,
-            responseCode: response.status,
-          });
         }
-      } else if (response?.status === HttpStatusCodes.TooManyRequests) {
-        handleError(JSON.stringify(generateSQLQueryResponse), "copilotTooManyRequestError");
-        useTabs.getState().setIsQueryErrorThrown(true);
-        setShowErrorMessageBar(true);
-        setErrorMessage("Ratelimit exceeded 5 per 1 minute. Please try again after sometime");
-        TelemetryProcessor.traceFailure(Action.QueryGenerationFromCopilotPrompt, {
-          databaseName: databaseId,
-          collectionId: containerId,
-          responseCode: response.status,
-        });
       } else {
         handleError(JSON.stringify(generateSQLQueryResponse), "copilotInternalServerError");
         useTabs.getState().setIsQueryErrorThrown(true);
         setShowErrorMessageBar(true);
-        TelemetryProcessor.traceFailure(Action.QueryGenerationFromCopilotPrompt, {
-          databaseName: databaseId,
-          collectionId: containerId,
-          responseCode: response.status,
-        });
       }
     } catch (error) {
       handleError(error, "executeNaturalLanguageQuery");
@@ -347,7 +310,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           styles={{ root: { width: "95%" }, fieldGroup: { borderRadius: 6 } }}
           disabled={isGeneratingQuery}
           autoComplete="off"
-          placeholder="Ask a question in natural language and we’ll generate the query for you."
         />
         {copilotTeachingBubbleVisible && (
           <TeachingBubble
@@ -381,7 +343,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
         {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
         {showSamplePrompts && (
           <Callout
-            styles={{ root: { minWidth: 400, maxWidth: "70vw" } }}
+            styles={{ root: { minWidth: 400 } }}
             target="#naturalLanguageInput"
             isBeakVisible={false}
             onDismiss={() => setShowSamplePrompts(false)}
@@ -413,7 +375,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                         setShowSamplePrompts(false);
                         inputEdited.current = true;
                       }}
-                      onRenderIcon={() => <Image src={RecentIcon} styles={{ root: { overflow: "unset" } }} />}
+                      onRenderIcon={() => <Image src={RecentIcon} />}
                       styles={promptStyles}
                     >
                       {history}
@@ -489,7 +451,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           </Link>
           {showErrorMessageBar && (
             <MessageBar messageBarType={MessageBarType.error}>
-              {errorMessage ? errorMessage : "We ran into an error and were not able to execute query."}
+              We ran into an error and were not able to execute query.
             </MessageBar>
           )}
           {showInvalidQueryMessageBar && (
@@ -527,10 +489,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                     description: "",
                     userPrompt: userPrompt,
                   },
-                  explorer,
-                  databaseId,
-                  containerId,
-                  mode: isSampleCopilotActive ? "Sample" : "User",
+                  explorer: explorer,
                 });
               }}
               directionalHint={DirectionalHint.topCenter}
@@ -540,7 +499,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 <Link
                   onClick={() => {
                     setShowCallout(false);
-                    openFeedbackModal(generatedQuery, true, userPrompt);
+                    useQueryCopilot.getState().openFeedbackModal(generatedQuery, true, userPrompt);
                   }}
                 >
                   more feedback?
@@ -565,7 +524,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
             iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
             onClick={() => {
               if (!dislikeQuery) {
-                openFeedbackModal(generatedQuery, false, userPrompt);
+                useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userPrompt);
                 setLikeQuery(false);
               }
               setDislikeQuery(!dislikeQuery);

src/Explorer/QueryCopilot/QueryCopilotTab.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-console */
 import { Stack } from "@fluentui/react";
-import { QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
 import { CommandButtonComponentProps } from "Explorer/Controls/CommandButton/CommandButtonComponent";
 import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
@@ -12,7 +11,6 @@ import { QueryCopilotResults } from "Explorer/QueryCopilot/Shared/QueryCopilotRe
 import { userContext } from "UserContext";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { useSidePanel } from "hooks/useSidePanel";
-import { ReactTabKind, TabsState, useTabs } from "hooks/useTabs";
 import React, { useState } from "react";
 import SplitterLayout from "react-splitter-layout";
 import QueryCommandIcon from "../../../images/CopilotCommand.svg";
@@ -30,14 +28,13 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
     ? StringUtility.toBoolean(cachedCopilotToggleStatus)
     : true;
   const [copilotActive, setCopilotActive] = useState<boolean>(copilotInitialActive);
-  const [tabActive, setTabActive] = useState<boolean>(true);
 
   const getCommandbarButtons = (): CommandButtonComponentProps[] => {
     const executeQueryBtnLabel = selectedQuery ? "Execute Selection" : "Execute Query";
     const executeQueryBtn = {
       iconSrc: ExecuteQueryIcon,
       iconAlt: executeQueryBtnLabel,
-      onCommandClick: () => OnExecuteQueryClick(useQueryCopilot),
+      onCommandClick: () => OnExecuteQueryClick(),
       commandButtonLabel: executeQueryBtnLabel,
       ariaLabel: executeQueryBtnLabel,
       hasPopup: false,
@@ -76,13 +73,10 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
 
   React.useEffect(() => {
     return () => {
-      useTabs.subscribe((state: TabsState) => {
-        if (state.activeReactTab === ReactTabKind.QueryCopilot) {
-          setTabActive(true);
-        } else {
-          setTabActive(false);
-        }
-      });
+      const commandbarButtons = getCommandbarButtons();
+      commandbarButtons.pop();
+      commandbarButtons.map((props: CommandButtonComponentProps) => (props.disabled = true));
+      useCommandBar.getState().setContextButtons(commandbarButtons);
     };
   }, []);
 
@@ -94,13 +88,8 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
   return (
     <Stack className="tab-pane" style={{ width: "100%" }}>
       <div style={isGeneratingQuery ? { height: "100%" } : { overflowY: "auto", height: "100%" }}>
-        {tabActive && copilotActive && (
-          <QueryCopilotPromptbar
-            explorer={explorer}
-            toggleCopilot={toggleCopilot}
-            databaseId={QueryCopilotSampleDatabaseId}
-            containerId={QueryCopilotSampleContainerId}
-          ></QueryCopilotPromptbar>
+        {copilotActive && (
+          <QueryCopilotPromptbar explorer={explorer} toggleCopilot={toggleCopilot}></QueryCopilotPromptbar>
         )}
         <Stack className="tabPaneContentContainer">
           <SplitterLayout percentage={true} vertical={true} primaryIndex={0} primaryMinSize={30} secondaryMinSize={70}>

src/Explorer/QueryCopilot/QueryCopilotUtilities.ts

@@ -7,11 +7,6 @@ import { getCommonQueryOptions } from "Common/dataAccess/queryDocuments";
 import DocumentId from "Explorer/Tree/DocumentId";
 import { logConsoleProgress } from "Utils/NotificationConsoleUtils";
 
-export interface SuggestedPrompt {
-  id: number;
-  text: string;
-}
-
 export const querySampleDocuments = (query: string, options: FeedOptions): QueryIterator<ItemDefinition & Resource> => {
   options = getCommonQueryOptions(options);
   return sampleDataClient()
@@ -38,19 +33,3 @@ export const readSampleDocument = async (documentId: DocumentId): Promise<Item>
     clearMessage();
   }
 };
-
-export const getSampleDatabaseSuggestedPrompts = (): SuggestedPrompt[] => {
-  return [
-    { id: 1, text: 'Show all products that have the word "ultra" in the name or description' },
-    { id: 2, text: "What are all of the possible categories for the products, and their counts?" },
-    { id: 3, text: 'Show me all products that have been reviewed by someone with a username that contains "bob"' },
-  ];
-};
-
-export const getSuggestedPrompts = (): SuggestedPrompt[] => {
-  return [
-    { id: 1, text: "Show the first 10 items" },
-    { id: 2, text: 'Count all the items in my data as "numItems"' },
-    { id: 3, text: "Find the oldest item added to my collection" },
-  ];
-};

src/Explorer/QueryCopilot/Shared/QueryCopilotClient.test.ts

@@ -1,3 +1,4 @@
+import { QueryCopilotSampleContainerSchema, ShortenedQueryCopilotSampleContainerSchema } from "Common/Constants";
 import { handleError } from "Common/ErrorHandlingUtils";
 import { createUri } from "Common/UrlUtility";
 import Explorer from "Explorer/Explorer";
@@ -36,6 +37,9 @@ describe("Query Copilot Client", () => {
       userPrompt: "UserPrompt",
       description: "Description",
       contact: "Contact",
+      containerSchema: userContext.features.enableCopilotFullSchema
+        ? QueryCopilotSampleContainerSchema
+        : ShortenedQueryCopilotSampleContainerSchema,
     };
 
     const mockStore = useQueryCopilot.getState();
@@ -48,16 +52,13 @@ describe("Query Copilot Client", () => {
 
     const feedbackUri = userContext.features.disableCopilotPhoenixGateaway
       ? createUri("https://copilotorchestrater.azurewebsites.net/", "feedback")
-      : createUri(useQueryCopilot.getState().notebookServerInfo.notebookServerEndpoint, "public/feedback");
+      : createUri(useQueryCopilot.getState().notebookServerInfo.notebookServerEndpoint, "feedback");
 
     it("should call fetch with the payload with like", async () => {
       const mockFetch = jest.fn().mockResolvedValueOnce({});
 
       globalThis.fetch = mockFetch;
       await SubmitFeedback({
-        databaseId: "test",
-        containerId: "test",
-        mode: "User",
         params: {
           likeQuery: true,
           generatedQuery: "GeneratedQuery",
@@ -90,9 +91,6 @@ describe("Query Copilot Client", () => {
       globalThis.fetch = mockFetch;
 
       await SubmitFeedback({
-        databaseId: "test",
-        containerId: "test",
-        mode: "User",
         params: {
           likeQuery: false,
           generatedQuery: "GeneratedQuery",
@@ -110,7 +108,6 @@ describe("Query Copilot Client", () => {
           headers: {
             "content-type": "application/json",
             "x-ms-correlationid": "mocked-correlation-id",
-            Authorization: "token mocked-token",
           },
         }),
       );
@@ -123,9 +120,6 @@ describe("Query Copilot Client", () => {
       globalThis.fetch = jest.fn().mockRejectedValueOnce(new Error("Mock error"));
 
       await SubmitFeedback({
-        databaseId: "test",
-        containerId: "test",
-        mode: "User",
         params: {
           likeQuery: true,
           generatedQuery: "GeneratedQuery",
@@ -135,7 +129,6 @@ describe("Query Copilot Client", () => {
         },
         explorer: new Explorer(),
       }).catch((error) => {
-        // eslint-disable-next-line jest/no-conditional-expect
         expect(error.message).toEqual("Mock error");
       });
 

src/Explorer/QueryCopilot/Shared/QueryCopilotClient.ts

@@ -1,165 +1,28 @@
 import { FeedOptions } from "@azure/cosmos";
 import {
-  Areas,
-  ConnectionStatusType,
   ContainerStatusType,
-  HttpStatusCodes,
   PoolIdType,
   QueryCopilotSampleContainerId,
   QueryCopilotSampleContainerSchema,
   ShortenedQueryCopilotSampleContainerSchema,
 } from "Common/Constants";
-import { getErrorMessage, getErrorStack, handleError } from "Common/ErrorHandlingUtils";
+import { getErrorMessage, handleError } from "Common/ErrorHandlingUtils";
 import { shouldEnableCrossPartitionKey } from "Common/HeadersUtility";
 import { MinimalQueryIterator } from "Common/IteratorUtilities";
 import { createUri } from "Common/UrlUtility";
 import { queryDocumentsPage } from "Common/dataAccess/queryDocumentsPage";
-import { configContext } from "ConfigContext";
-import { ContainerConnectionInfo, CopilotEnabledConfiguration, IProvisionData } from "Contracts/DataModels";
-import { AuthorizationTokenHeaderMetadata, QueryResults } from "Contracts/ViewModels";
-import { useDialog } from "Explorer/Controls/Dialog";
+import { QueryResults } from "Contracts/ViewModels";
 import Explorer from "Explorer/Explorer";
 import { querySampleDocuments } from "Explorer/QueryCopilot/QueryCopilotUtilities";
 import { FeedbackParams, GenerateSQLQueryResponse } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceFailure, traceStart, traceSuccess } from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
-import { getAuthorizationHeader } from "Utils/AuthorizationUtils";
 import { queryPagesUntilContentPresent } from "Utils/QueryUtils";
-import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { useTabs } from "hooks/useTabs";
 import * as StringUtility from "../../../Shared/StringUtility";
 
-async function fetchWithTimeout(
-  url: string,
-  headers: {
-    [x: string]: string;
-  },
-) {
-  const timeout = 10000;
-  const options = { timeout };
-
-  const controller = new AbortController();
-  const id = setTimeout(() => controller.abort(), timeout);
-
-  const response = await window.fetch(url, {
-    headers,
-    ...options,
-    signal: controller.signal,
-  });
-  clearTimeout(id);
-
-  return response;
-}
-
-export const getCopilotEnabled = async (): Promise<boolean> => {
-  const url = `${configContext.BACKEND_ENDPOINT}/api/portalsettings/querycopilot`;
-  const authorizationHeader: AuthorizationTokenHeaderMetadata = getAuthorizationHeader();
-  const headers = { [authorizationHeader.header]: authorizationHeader.token };
-
-  let response;
-
-  try {
-    response = await fetchWithTimeout(url, headers);
-  } catch (error) {
-    return false;
-  }
-
-  if (!response?.ok) {
-    return false;
-  }
-
-  const copilotPortalConfiguration = (await response?.json()) as CopilotEnabledConfiguration;
-  return copilotPortalConfiguration?.isEnabled;
-};
-
-export const allocatePhoenixContainer = async ({
-  explorer,
-  databaseId,
-  containerId,
-  mode,
-}: {
-  explorer: Explorer;
-  databaseId: string;
-  containerId: string;
-  mode: string;
-}): Promise<void> => {
-  try {
-    if (
-      useQueryCopilot.getState().containerStatus.status !== ContainerStatusType.Active &&
-      !userContext.features.disableCopilotPhoenixGateaway
-    ) {
-      await explorer.allocateContainer(PoolIdType.QueryCopilot, mode);
-    } else {
-      const currentAllocatedSchemaInfo = useQueryCopilot.getState().schemaAllocationInfo;
-      if (
-        currentAllocatedSchemaInfo.databaseId !== databaseId ||
-        currentAllocatedSchemaInfo.containerId !== containerId
-      ) {
-        await resetPhoenixContainerSchema({ explorer, databaseId, containerId, mode });
-      }
-    }
-    useQueryCopilot.getState().setSchemaAllocationInfo({
-      databaseId,
-      containerId,
-    });
-  } catch (error) {
-    traceFailure(Action.PhoenixConnection, {
-      dataExplorerArea: Areas.Copilot,
-      status: error.status,
-      error: getErrorMessage(error),
-      errorStack: getErrorStack(error),
-    });
-    useQueryCopilot.getState().resetContainerConnection();
-    if (error?.status === HttpStatusCodes.Forbidden && error.message) {
-      useDialog.getState().showOkModalDialog("Connection Failed", `${error.message}`);
-    } else {
-      useDialog
-        .getState()
-        .showOkModalDialog(
-          "Connection Failed",
-          "We are unable to connect to the temporary workspace. Please try again in a few minutes. If the error persists, file a support ticket.",
-        );
-    }
-  } finally {
-    useTabs.getState().setIsTabExecuting(false);
-  }
-};
-
-export const resetPhoenixContainerSchema = async ({
-  explorer,
-  databaseId,
-  containerId,
-  mode,
-}: {
-  explorer: Explorer;
-  databaseId: string;
-  containerId: string;
-  mode: string;
-}): Promise<void> => {
-  try {
-    const provisionData: IProvisionData = {
-      poolId: PoolIdType.QueryCopilot,
-      databaseId: databaseId,
-      containerId: containerId,
-      mode: mode,
-    };
-    const connectionInfo = await explorer.phoenixClient.allocateContainer(provisionData);
-    const connectionStatus: ContainerConnectionInfo = {
-      status: ConnectionStatusType.Connecting,
-    };
-    await explorer.setNotebookInfo(false, connectionInfo, connectionStatus);
-  } catch (error) {
-    traceFailure(Action.PhoenixConnection, {
-      dataExplorerArea: Areas.Copilot,
-      status: error.status,
-      error: getErrorMessage(error),
-      errorStack: getErrorStack(error),
-    });
-    throw error;
-  }
-};
-
 export const SendQueryRequest = async ({
   userPrompt,
   explorer,
@@ -188,7 +51,7 @@ export const SendQueryRequest = async ({
 
       const queryUri = userContext.features.disableCopilotPhoenixGateaway
         ? createUri("https://copilotorchestrater.azurewebsites.net/", "generateSQLQuery")
-        : createUri(serverInfo.notebookServerEndpoint, "public/generateSQLQuery");
+        : createUri(serverInfo.notebookServerEndpoint, "generateSQLQuery");
 
       const payload = {
         containerSchema: userContext.features.enableCopilotFullSchema
@@ -243,19 +106,16 @@ export const SendQueryRequest = async ({
 export const SubmitFeedback = async ({
   params,
   explorer,
-  databaseId,
-  containerId,
-  mode,
 }: {
   params: FeedbackParams;
   explorer: Explorer;
-  databaseId: string;
-  containerId: string;
-  mode: string;
 }): Promise<void> => {
   try {
     const { likeQuery, generatedQuery, userPrompt, description, contact } = params;
     const payload = {
+      containerSchema: userContext.features.enableCopilotFullSchema
+        ? QueryCopilotSampleContainerSchema
+        : ShortenedQueryCopilotSampleContainerSchema,
       like: likeQuery ? "like" : "dislike",
       generatedSql: generatedQuery,
       userPrompt,
@@ -266,18 +126,17 @@ export const SubmitFeedback = async ({
       useQueryCopilot.getState().containerStatus.status !== ContainerStatusType.Active &&
       !userContext.features.disableCopilotPhoenixGateaway
     ) {
-      await allocatePhoenixContainer({ explorer, databaseId, containerId, mode });
+      await explorer.allocateContainer(PoolIdType.QueryCopilot);
     }
     const serverInfo = useQueryCopilot.getState().notebookServerInfo;
     const feedbackUri = userContext.features.disableCopilotPhoenixGateaway
       ? createUri("https://copilotorchestrater.azurewebsites.net/", "feedback")
-      : createUri(serverInfo.notebookServerEndpoint, "public/feedback");
+      : createUri(serverInfo.notebookServerEndpoint, "feedback");
     await fetch(feedbackUri, {
       method: "POST",
       headers: {
         "content-type": "application/json",
         "x-ms-correlationid": useQueryCopilot.getState().correlationId,
-        Authorization: `token ${useQueryCopilot.getState().notebookServerInfo.authToken}`,
       },
       body: JSON.stringify(payload),
     });
@@ -286,7 +145,7 @@ export const SubmitFeedback = async ({
   }
 };
 
-export const OnExecuteQueryClick = async (useQueryCopilot: Partial<QueryCopilotState>): Promise<void> => {
+export const OnExecuteQueryClick = async (): Promise<void> => {
   traceStart(Action.ExecuteQueryGeneratedFromQueryCopilot, {
     correlationId: useQueryCopilot.getState().correlationId,
     userPrompt: useQueryCopilot.getState().userPrompt,
@@ -301,14 +160,13 @@ export const OnExecuteQueryClick = async (useQueryCopilot: Partial<QueryCopilotS
   useQueryCopilot.getState().setQueryIterator(queryIterator);
 
   setTimeout(async () => {
-    await QueryDocumentsPerPage(0, queryIterator, useQueryCopilot);
+    await QueryDocumentsPerPage(0, queryIterator);
   }, 100);
 };
 
 export const QueryDocumentsPerPage = async (
   firstItemIndex: number,
   queryIterator: MinimalQueryIterator,
-  useQueryCopilot: Partial<QueryCopilotState>,
 ): Promise<void> => {
   try {
     useQueryCopilot.getState().setIsExecuting(true);

src/Explorer/QueryCopilot/Shared/QueryCopilotInterfaces.ts

@@ -32,8 +32,3 @@ export interface FeedbackParams {
 export interface QueryCopilotProps {
   explorer: Explorer;
 }
-
-export interface CopilotSchemaAllocationInfo {
-  databaseId: string;
-  containerId: string;
-}

src/Explorer/QueryCopilot/Shared/QueryCopilotResults.tsx

@@ -12,7 +12,7 @@ export const QueryCopilotResults: React.FC = (): JSX.Element => {
       queryResults={useQueryCopilot.getState().queryResults}
       isExecuting={useQueryCopilot.getState().isExecuting}
       executeQueryDocumentsPage={(firstItemIndex: number) =>
-        QueryDocumentsPerPage(firstItemIndex, useQueryCopilot.getState().queryIterator, useQueryCopilot)
+        QueryDocumentsPerPage(firstItemIndex, useQueryCopilot.getState().queryIterator)
       }
     />
   );

src/Explorer/QueryCopilot/V2/Bubbles/Welcome/WelcomeBubble.test.tsx

@@ -6,7 +6,7 @@ const mockedDate = new Date(2023, 7, 15);
 jest.spyOn(global, "Date").mockImplementation(() => mockedDate as unknown as string);
 
 describe("Welcome Bubble snapshot test", () => {
-  it("should render", () => {
+  it("should render ", () => {
     const wrapper = shallow(<WelcomeBubble />);
     expect(wrapper).toMatchSnapshot();
   });

src/Explorer/QueryCopilot/V2/Bubbles/Welcome/__snapshots__/WelcomeBubble.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Welcome Bubble snapshot test should render 1`] = `
+exports[`Welcome Bubble snapshot test should render  1`] = `
 <Stack>
   <Stack
     horizontalAlign="center"

src/Explorer/QueryCopilot/V2/Header/Header.test.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { Header } from "./Header";
 
 describe("Header snapshot test", () => {
-  it("should close on button click", () => {
+  it("should close on button click ", () => {
     const wrapper = shallow(<Header />);
 
     const iconButton = wrapper.find(IconButton).first();

src/Explorer/QueryCopilot/V2/Header/__snapshots__/Header.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Header snapshot test should close on button click 1`] = `
+exports[`Header snapshot test should close on button click  1`] = `
 <Stack
   horizontal={true}
   style={

src/Explorer/QueryCopilot/V2/Modal/WelcomeSidebarModal.test.tsx

@@ -6,7 +6,7 @@ import React from "react";
 import { WelcomeSidebarModal } from "./WelcomeSidebarModal";
 
 describe("Welcome Sidebar Modal snapshot test", () => {
-  it("should close on button click", () => {
+  it("should close on button click ", () => {
     withHooks(() => {
       const wrapper = shallow(<WelcomeSidebarModal />);
       const spy = jest.spyOn(localStorage, "setItem");

src/Explorer/QueryCopilot/V2/Modal/__snapshots__/WelcomeSidebarModal.test.tsx.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Welcome Sidebar Modal snapshot test should close on button click 1`] = `""`;
+exports[`Welcome Sidebar Modal snapshot test should close on button click  1`] = `""`;
 
 exports[`Welcome Sidebar Modal snapshot test should not reneder with local  storage key 1`] = `""`;

src/Explorer/QueryCopilot/V2/Sidebar/QueryCopilotSidebar.test.tsx

@@ -14,7 +14,7 @@ describe("Query Copilot Sidebar snapshot test", () => {
     useQueryCopilot.setState(initialState, true);
   });
 
-  it("should render and set copilot used flag", () => {
+  it("should render and set copilot used flag ", () => {
     withHooks(() => {
       useQueryCopilot.getState().setShowCopilotSidebar(true);
       const wrapper = shallow(<QueryCopilotSidebar explorer={new Explorer()} />);
@@ -24,7 +24,7 @@ describe("Query Copilot Sidebar snapshot test", () => {
     });
   });
 
-  it("should render and not set copilot used flag", () => {
+  it("should render and not set copilot used flag ", () => {
     withHooks(() => {
       const wrapper = shallow(<QueryCopilotSidebar explorer={new Explorer()} />);
 

src/Explorer/QueryCopilot/V2/Sidebar/__snapshots__/QueryCopilotSidebar.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Query Copilot Sidebar snapshot test should render and not set copilot used flag 1`] = `
+exports[`Query Copilot Sidebar snapshot test should render and not set copilot used flag  1`] = `
 <Stack
   style={
     Object {
@@ -15,7 +15,7 @@ exports[`Query Copilot Sidebar snapshot test should render and not set copilot u
 </Stack>
 `;
 
-exports[`Query Copilot Sidebar snapshot test should render and set copilot used flag 1`] = `
+exports[`Query Copilot Sidebar snapshot test should render and set copilot used flag  1`] = `
 <Stack
   style={
     Object {

src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap

@@ -18,8 +18,6 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
     }
   >
     <QueryCopilotPromptbar
-      containerId="SampleContainer"
-      databaseId="CopilotSampleDb"
       explorer={
         Explorer {
           "_isInitializingNotebooks": false,

src/Explorer/Quickstart/VCoreMongoQuickstartCommands.ts

@@ -1,6 +1,5 @@
 export const newDbAndCollectionCommand = `use quickstartDB
-db.createCollection('sampleCollection')
-`;
+db.createCollection('sampleCollection')`;
 
 export const newDbAndCollectionCommandForDisplay = `use quickstartDB // Create new database named 'quickstartDB' or switch to it if it already exists
 
@@ -17,25 +16,19 @@ export const loadDataCommand = `db.sampleCollection.insertMany([
     {title: "War and Peace", author: "Leo Tolstoy", pages: 1392},
     {title: "The Odyssey", author: "Homer", pages: 374},
     {title: "Ulysses", author: "James Joyce", pages: 730}
-  ])
-`;
+  ])`;
 
-export const findOrwellCommand = `db.sampleCollection.find({author: "George Orwell"})
-`;
+export const queriesCommand = `db.sampleCollection.find({author: "George Orwell"})
 
-export const findOrwellCommandForDisplay = `// Query to find all books written by "George Orwell"
-db.sampleCollection.find({author: "George Orwell"})`;
-
-export const findByPagesCommand = `db.sampleCollection.find({pages: {$gt: 500}})
-`;
-
-export const findByPagesCommandForDisplay = `// Query to find all books with more than 500 pages
 db.sampleCollection.find({pages: {$gt: 500}})
-`;
 
-export const findAndSortCommand = `db.sampleCollection.find({}).sort({pages: 1})
-`;
+db.sampleCollection.find({}).sort({pages: 1})`;
 
-export const findAndSortCommandForDisplay = `// Query to find all books and sort them by the number of pages in ascending order
-db.sampleCollection.find({}).sort({pages: 1})
-`;
+export const queriesCommandForDisplay = `// Query to find all books written by "George Orwell"
+db.sampleCollection.find({author: "George Orwell"})
+
+// Query to find all books with more than 500 pages
+db.sampleCollection.find({pages: {$gt: 500}})
+
+// Query to find all books and sort them by the number of pages in ascending order
+db.sampleCollection.find({}).sort({pages: 1})`;

src/Explorer/Quickstart/VCoreMongoQuickstartGuide.tsx

@@ -9,17 +9,15 @@ import {
   Text,
   TextField,
 } from "@fluentui/react";
+import { sendMessage } from "Common/MessageHandler";
+import { MessageTypes } from "Contracts/ExplorerContracts";
 import { customPivotHeaderRenderer } from "Explorer/Quickstart/Shared/QuickstartRenderUtilities";
 import {
-  findAndSortCommand,
-  findAndSortCommandForDisplay,
-  findByPagesCommand,
-  findByPagesCommandForDisplay,
-  findOrwellCommand,
-  findOrwellCommandForDisplay,
   loadDataCommand,
   newDbAndCollectionCommand,
   newDbAndCollectionCommandForDisplay,
+  queriesCommand,
+  queriesCommandForDisplay,
 } from "Explorer/Quickstart/VCoreMongoQuickstartCommands";
 import { useTerminal } from "hooks/useTerminal";
 import React, { useState } from "react";
@@ -65,16 +63,28 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
             >
               <Stack style={{ marginTop: 20 }}>
                 <Text>
-                  This tutorial guides you to create and query distributed tables using a sample dataset.
+                  A hosted mongosh (mongo shell) is provided for this quick start. You are automatically logged in to
+                  mongosh, allowing you to interact with your database directly.
                   <br />
                   <br />
-                  To start, input the admin password you used during the cluster creation process into the MongoDB vCore
-                  terminal.
+                  When not in the quick start guide, connecting to Azure Cosmos DB for MongoDB vCore is straightforward
+                  using your connection string.
                   <br />
                   <br />
+                  <Link
+                    aria-label="View connection string"
+                    href=""
+                    onClick={() => sendMessage({ type: MessageTypes.OpenVCoreMongoConnectionStringsBlade })}
+                  >
+                    View connection string
+                  </Link>
                   <br />
-                  Note: If you navigate out of the Quick start blade &#40;MongoDB vCore Shell&#41;, the session will be
-                  closed and all ongoing commands might be interrupted.
+                  <br />
+                  This string contains placeholders for &lt;user&gt; and &lt;password&gt;. Replace them with your chosen
+                  username and password to establish a secure connection to your cluster. Depending on your environment,
+                  you may need to adjust firewall rules or configure private endpoints in the &lsquo;Networking&rsquo;
+                  tab of your database settings, or modify your own network&apos;s firewall settings, to successfully
+                  connect.
                 </Text>
               </Stack>
             </PivotItem>
@@ -93,7 +103,6 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
                   documents are similar to the columns in a relational database table. One key advantage of MongoDB is
                   that these documents within a collection can have different fields.
                   <br />
-                  <br />
                   You&apos;re now going to create a new database and a collection within that database using the Mongo
                   shell. In MongoDB, creating a database or a collection is implicit. This means that databases and
                   collections are created when you first reference them in a command, so no explicit creation command is
@@ -144,14 +153,14 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
                   with data. In MongoDB, data is stored as documents, which are structured as field and value pairs.
                   <br />
                   <br />
-                  We&apos;ll add 10 documents representing books, each with a title, author, and number of pages, to
-                  your sampleCollection in the quickstartDB database.
+                  Let&apos;s populate your sampleCollection with data. We&apos;ll add 10 documents representing books,
+                  each with a title, author, and number of pages, to your sampleCollection in the quickstartDB database.
                 </Text>
                 <DefaultButton
                   style={{ marginTop: 16, width: 200 }}
                   onClick={() => useTerminal.getState().sendMessage(loadDataCommand)}
                 >
-                  Load data
+                  Create distributed table
                 </DefaultButton>
                 <Stack horizontal style={{ marginTop: 16 }}>
                   <TextField
@@ -188,23 +197,23 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
             >
               <Stack style={{ marginTop: 20 }}>
                 <Text>
-                  Once you&apos;ve inserted data into your sampleCollection, you can retrieve it using queries. MongoDB
+                  Once you’ve inserted data into your sampleCollection, you can retrieve it using queries. MongoDB
                   queries can be as simple or as complex as you need them to be, allowing you to filter, sort, and limit
                   results.
                 </Text>
                 <DefaultButton
                   style={{ marginTop: 16, width: 110 }}
-                  onClick={() => useTerminal.getState().sendMessage(findOrwellCommand)}
+                  onClick={() => useTerminal.getState().sendMessage(queriesCommand)}
                 >
-                  Try query
+                  Load data
                 </DefaultButton>
                 <Stack horizontal style={{ marginTop: 16 }}>
                   <TextField
-                    id="findOrwellCommand"
+                    id="queriesCommand"
                     multiline
-                    rows={2}
+                    rows={5}
                     readOnly
-                    defaultValue={findOrwellCommandForDisplay}
+                    defaultValue={queriesCommandForDisplay}
                     styles={{
                       root: { width: "90%" },
                       field: {
@@ -218,71 +227,13 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
                     iconProps={{
                       iconName: "Copy",
                     }}
-                    onClick={() => onCopyBtnClicked("#findOrwellCommand")}
-                  />
-                </Stack>
-                <DefaultButton
-                  style={{ marginTop: 32, width: 110 }}
-                  onClick={() => useTerminal.getState().sendMessage(findByPagesCommand)}
-                >
-                  Try query
-                </DefaultButton>
-                <Stack horizontal style={{ marginTop: 16 }}>
-                  <TextField
-                    id="findByPagesCommand"
-                    multiline
-                    rows={2}
-                    readOnly
-                    defaultValue={findByPagesCommandForDisplay}
-                    styles={{
-                      root: { width: "90%" },
-                      field: {
-                        backgroundColor: "#EEEEEE",
-                        fontFamily:
-                          "Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
-                      },
-                    }}
-                  />
-                  <IconButton
-                    iconProps={{
-                      iconName: "Copy",
-                    }}
-                    onClick={() => onCopyBtnClicked("#findByPagesCommand")}
-                  />
-                </Stack>
-                <DefaultButton
-                  style={{ marginTop: 32, width: 110 }}
-                  onClick={() => useTerminal.getState().sendMessage(findAndSortCommand)}
-                >
-                  Try query
-                </DefaultButton>
-                <Stack horizontal style={{ marginTop: 16 }}>
-                  <TextField
-                    id="findAndSortCommand"
-                    multiline
-                    rows={2}
-                    readOnly
-                    defaultValue={findAndSortCommandForDisplay}
-                    styles={{
-                      root: { width: "90%" },
-                      field: {
-                        backgroundColor: "#EEEEEE",
-                        fontFamily:
-                          "Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
-                      },
-                    }}
-                  />
-                  <IconButton
-                    iconProps={{
-                      iconName: "Copy",
-                    }}
-                    onClick={() => onCopyBtnClicked("#findAndSortCommand")}
+                    onClick={() => onCopyBtnClicked("#queriesCommand")}
                   />
                 </Stack>
               </Stack>
             </PivotItem>
             <PivotItem
-              headerText="Next steps"
+              headerText="Integrations"
               onRenderItemLink={(props, defaultRenderer) =>
                 customPivotHeaderRenderer(props, defaultRenderer, currentStep, 4)
               }
@@ -291,18 +242,46 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
             >
               <Stack>
                 <Text>
-                  <b>Migrate existing data</b>
-                  <br />
-                  <br />
-                  Modernize your data seamlessly from an existing MongoDB cluster, whether it&apos;s on-premises or
-                  hosted in the cloud, to Azure Cosmos DB for MongoDB vCore.&nbsp;
-                  <Link
-                    target="_blank"
-                    href="https://learn.microsoft.com/azure/cosmos-db/mongodb/vcore/migration-options"
-                  >
-                    Learn more
-                  </Link>
+                  Cosmos DB for MongoDB vCore seamlessly integrates with Azure services. These integrations enable
+                  Cosmos DB for MongoDB and its partner products to directly interoperate, ensuring a smooth and unified
+                  experience, that just works.
                 </Text>
+                <Stack horizontal>
+                  <Stack style={{ marginTop: 20, marginRight: 20 }}>
+                    <Text>
+                      <b>First party integrations</b>
+                      <br />
+                      <br />
+                      <b>Azure Monitor</b>
+                      <br />
+                      Azure monitor provides comprehensive monitoring and diagnostics for Cosmos DB for Mongo DB. Learn
+                      more
+                      <br />
+                      <br />
+                      <b>Azure Networking</b>
+                      <br />
+                      Azure Networking seamlessly integrates with Azure Cosmos DB for Mongo DB for fast and secure data
+                      access. Learn more
+                      <br />
+                      <br />
+                      <b>PowerShell/CLI/ARM</b>
+                      <br />
+                      PowerShell/CLI/ARM seamlessly integrates with Azure Cosmos DB for Mongo DB for efficient
+                      management and automation. Learn more
+                    </Text>
+                  </Stack>
+                  <Stack style={{ marginTop: 20, marginLeft: 20 }}>
+                    <Text>
+                      <b>Application platforms integrations</b>
+                      <br />
+                      <br />
+                      <b>Vercel</b>
+                      <br />
+                      Vercel is a cloud platform for hosting static front ends and serverless functions, with instant
+                      deployments, automated scaling, and Next.js integration. Learn more
+                    </Text>
+                  </Stack>
+                </Stack>
               </Stack>
             </PivotItem>
           </Pivot>