Fix P2 bgs

.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

less/documentDB.less

@@ -2897,21 +2897,9 @@ a:link {
     padding-left: 8px;
   }
 
-  .settingsSectionInlineCheckbox {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 5px;
-  }
-
   .settingsSectionLabel {
     margin-bottom: @DefaultSpace;
     margin-right: 5px;
-
-    .panelInfoIcon {
-      margin-left: 5px;
-    }
   }
 
   .pageOptionsPart {

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,20 +49,20 @@
     "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",
-    "datatables.net-colreorder-dt": "1.7.0",
-    "datatables.net-dt": "1.13.8",
+    "datatables.net-colreorder-dt": "1.5.1",
+    "datatables.net-dt": "1.10.19",
     "date-fns": "1.29.0",
     "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",
@@ -71,15 +71,14 @@
     "iframe-resizer-react": "1.1.0",
     "immutable": "4.0.0-rc.12",
     "is-ci": "2.0.0",
-    "jquery": "3.7.1",
-    "jquery-typeahead": "2.11.1",
-    "jquery-ui-dist": "1.13.2",
+    "jquery": "3.5.1",
+    "jquery-typeahead": "2.10.6",
+    "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",
-    "patch-package": "8.0.0",
-    "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",
@@ -87,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",
@@ -95,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"
@@ -115,14 +116,11 @@
     "@types/codemirror": "0.0.56",
     "@types/crossroads": "0.0.30",
     "@types/d3": "5.9.2",
-    "@types/datatables.net": "1.10.28",
-    "@types/datatables.net-colreorder": "1.4.5",
     "@types/dom-to-image": "2.6.2",
     "@types/enzyme": "3.10.7",
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/hasher": "0.0.31",
     "@types/jest": "26.0.20",
-    "@types/jquery": "3.5.29",
     "@types/node": "12.11.1",
     "@types/post-robot": "10.0.1",
     "@types/q": "1.5.1",
@@ -136,62 +134,61 @@
     "@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": {
-    "postinstall": "patch-package",
     "start": "webpack serve --mode development",
     "dev": "echo \"WARNING: npm run dev has been deprecated\" && npm run build",
     "build:dataExplorer:ci": "npm run build:ci",
@@ -238,4 +235,4 @@
     "printWidth": 120,
     "endOfLine": "auto"
   }
-}
+}

patches/datatables.net-colreorder+1.7.0.patch

@@ -1,22 +0,0 @@
-diff --git a/node_modules/datatables.net-colreorder/types/types.d.ts b/node_modules/datatables.net-colreorder/types/types.d.ts
-index e5dc283..1930c2b 100644
---- a/node_modules/datatables.net-colreorder/types/types.d.ts
-+++ b/node_modules/datatables.net-colreorder/types/types.d.ts
-@@ -7,7 +7,7 @@
- 
- /// <reference types="jquery" />
- 
--import DataTables, {Api} from 'datatables.net';
-+import DataTables, { Api } from 'datatables.net';
- 
- export default DataTables;
- 
-@@ -40,6 +40,8 @@ declare module 'datatables.net' {
- 			/**
- 			 * Create a new ColReorder instance for the target DataTable
- 			 */
-+      // Ignore this error: error TS7013: Construct signature, which lacks return-type annotation, implicitly has an 'any' return type.
-+      // @ts-ignore
- 			new (dt: Api<any>, settings: boolean | ConfigColReorder);
- 
- 			/**

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 {

src/Common/CosmosClient.ts

@@ -3,7 +3,6 @@ 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";
@@ -151,13 +150,6 @@ export function client(): Cosmos.CosmosClient {
     tokenProvider,
     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/ConfigContext.ts

@@ -66,7 +66,6 @@ let configContext: Readonly<ConfigContext> = {
     `^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/",

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/jquery-typescript.d.ts

@@ -5,7 +5,7 @@
  * https://github.com/running-coder/jquery-typeahead/issues/156
  * TODO: Replace this minimum definition by the official one when it comes out.
  */
-/// <reference types="jquery" />
+/// <reference path="jquery.d.ts" />
 
 interface JQueryTypeaheadParam {
   input: string;

src/Definitions/jquery-ui.d.ts

@@ -3,7 +3,7 @@
 // Definitions by: Boris Yankov <https://github.com/borisyankov/>, John Reilly <https://github.com/johnnyreilly>
 // Definitions: https://github.com/borisyankov/DefinitelyTyped
 
-/// <reference types="jquery"/>
+/// <reference path="jquery.d.ts"/>
 
 declare namespace JQueryUI {
   // Accordion //////////////////////////////////////////////////

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

@@ -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,

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.test.tsx

@@ -23,12 +23,12 @@ describe("ThroughputInput Pane", () => {
   });
 
   it("should switch mode properly", () => {
-    wrapper.find('[id="Manual-input"]').simulate("change");
+    wrapper.find('[aria-label="Manual database throughput"]').simulate("change");
     expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe(
       "Container throughput (400 - unlimited RU/s)",
     );
 
-    wrapper.find('[id="Autoscale-input"]').simulate("change");
+    wrapper.find('[aria-label="Autoscale database throughput"]').simulate("change");
     expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe("Container throughput (autoscale)");
   });
 });

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -189,7 +189,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           <input
             id="Autoscale-input"
             className="throughputInputRadioBtn"
-            aria-label={`${getThroughputLabelText()} Autoscale`}
+            aria-label="Autoscale database throughput"
             aria-required={true}
             checked={isAutoscaleSelected}
             type="radio"
@@ -204,7 +204,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           <input
             id="Manual-input"
             className="throughputInputRadioBtn"
-            aria-label={`${getThroughputLabelText()} Manual`}
+            aria-label="Manual database throughput"
             checked={!isAutoscaleSelected}
             type="radio"
             aria-required={true}
@@ -271,17 +271,11 @@ 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>
             .
           </Text>
-          <Stack horizontal>
-            <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} aria-label="maxRUDescription">
-              {isDatabase ? "Database" : getCollectionName()} Required RU/s
-            </Text>
-            <InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>
-          </Stack>
 
           <TooltipHost
             directionalHint={DirectionalHint.topLeftEdge}
@@ -302,7 +296,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
               min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
               max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
               value={throughput.toString()}
-              ariaLabel={`${isDatabase ? "Database" : getCollectionName()} Required RU/s`}
+              aria-label="Max request units per second"
               required={true}
               errorMessage={throughputError}
             />

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,14 +652,14 @@ 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
-            aria-label="Container throughput (autoscale) Autoscale"
+            aria-label="Autoscale database throughput"
             aria-required={true}
             checked={true}
             className="throughputInputRadioBtn"
@@ -695,7 +676,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             Autoscale
           </label>
           <input
-            aria-label="Container throughput (autoscale) Manual"
+            aria-label="Manual database throughput"
             aria-required={true}
             checked={false}
             className="throughputInputRadioBtn"
@@ -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

@@ -6,7 +6,6 @@ import { MessageTypes } from "Contracts/ExplorerContracts";
 import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { IGalleryItem } from "Juno/JunoClient";
 import { requestDatabaseResourceTokens } from "Platform/Fabric/FabricUtil";
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointValidation";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as ko from "knockout";
@@ -1396,12 +1395,9 @@ export default class Explorer {
       copilotEnabledPromise,
       copilotUserDBEnabledPromise,
     ]);
-    const copilotSampleDBEnabled = LocalStorageUtility.getEntryString(StorageKey.CopilotSampleDBEnabled) === "true";
-    useQueryCopilot.getState().setCopilotEnabled(copilotEnabled && copilotUserDBEnabled);
+    useQueryCopilot.getState().setCopilotEnabled(copilotEnabled);
     useQueryCopilot.getState().setCopilotUserDBEnabled(copilotUserDBEnabled);
-    useQueryCopilot
-      .getState()
-      .setCopilotSampleDBEnabled(copilotEnabled && copilotUserDBEnabled && copilotSampleDBEnabled);
+    useQueryCopilot.getState().setShowWelcomeModal(window.localStorage.getItem("hideWelcomeModal") !== "true");
   }
 
   public async refreshSampleData(): Promise<void> {

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/GraphExplorerComponent/GraphExplorer.tsx

@@ -1163,12 +1163,15 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       )}"`,
     ).then(
       (documents: DataModels.DocumentId[]) => {
-        $.each(documents, (index: number, doc: any) => {
-          newIconsMap[doc["_graph_icon_property_value"]] = {
-            data: doc["icon"],
-            format: doc["format"],
-          };
-        });
+        $.each(
+          documents,
+          (index: number, doc: { _graph_icon_property_value: string; icon: string; format: string }) => {
+            newIconsMap[doc["_graph_icon_property_value"]] = {
+              data: doc["icon"],
+              format: doc["format"],
+            };
+          },
+        );
 
         // Update graph configuration
         this.setState({

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.tsx

@@ -200,7 +200,7 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
     {
       iconSrc: SettingsIcon,
       iconAlt: "Settings",
-      onCommandClick: () => useSidePanel.getState().openSidePanel("Settings", <SettingsPane explorer={container} />),
+      onCommandClick: () => useSidePanel.getState().openSidePanel("Settings", <SettingsPane />),
       commandButtonLabel: undefined,
       ariaLabel: "Settings",
       tooltipText: "Settings",

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/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/OpenActions/OpenActions.tsx

@@ -154,7 +154,7 @@ function openPane(action: ActionContracts.OpenPane, explorer: Explorer) {
     action.paneKind === ActionContracts.PaneKind.GlobalSettings ||
     action.paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.GlobalSettings]
   ) {
-    useSidePanel.getState().openSidePanel("Settings", <SettingsPane explorer={explorer} />);
+    useSidePanel.getState().openSidePanel("Settings", <SettingsPane />);
   }
 }
 

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

@@ -29,7 +29,7 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
     };
   }
 
-  componentDidMount(): void {
+  omponentDidMount(): void {
     window.addEventListener("resize", () => this.setState({ height: this.getPanelHeight() }));
   }
 
@@ -62,12 +62,12 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
         customWidth={this.props.panelWidth ? this.props.panelWidth : "440px"}
         headerClassName="panelHeader"
         onRenderNavigationContent={this.props.onRenderNavigationContent}
-        isFooterAtBottom={true}
         styles={{
           navigation: { borderBottom: "1px solid #cccccc" },
-          content: { padding: 0 },
+          content: { padding: 0, height: "100%" },
+          scrollableContent: { height: "100%" },
           header: { padding: "0 0 8px 34px" },
-          commands: { marginTop: 8, paddingTop: 0 },
+          commands: { marginTop: 8 },
         }}
         style={{ height: this.state.height }}
       >

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.test.tsx

@@ -6,7 +6,7 @@ import { SettingsPane } from "./SettingsPane";
 
 describe("Settings Pane", () => {
   it("should render Default properly", () => {
-    const wrapper = shallow(<SettingsPane explorer={null} />);
+    const wrapper = shallow(<SettingsPane />);
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -18,7 +18,7 @@ describe("Settings Pane", () => {
         },
       } as DatabaseAccount,
     });
-    const wrapper = shallow(<SettingsPane explorer={null} />);
+    const wrapper = shallow(<SettingsPane />);
     expect(wrapper).toMatchSnapshot();
   });
 });

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -16,20 +16,13 @@ import * as StringUtility from "Shared/StringUtility";
 import { userContext } from "UserContext";
 import { logConsoleInfo } from "Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "Utils/PriorityBasedExecutionUtils";
-import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { useSidePanel } from "hooks/useSidePanel";
 import React, { FunctionComponent, useState } from "react";
-import Explorer from "../../Explorer";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
-export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
-  explorer,
-}: {
-  explorer: Explorer;
-}): JSX.Element => {
+export const SettingsPane: FunctionComponent = () => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
-  const [refreshExplorer, setRefreshExplorer] = useState<boolean>(false);
   const [pageOption, setPageOption] = useState<string>(
     LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage) === Constants.Queries.unlimitedItemsPerPage
       ? Constants.Queries.UnlimitedPageOption
@@ -60,21 +53,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       ? 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)
@@ -85,17 +63,13 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       ? LocalStorageUtility.getEntryString(StorageKey.PriorityLevel)
       : Constants.PriorityLevel.Default,
   );
-  const [copilotSampleDBEnabled, setCopilotSampleDBEnabled] = useState<boolean>(
-    LocalStorageUtility.getEntryString(StorageKey.CopilotSampleDBEnabled) === "true",
-  );
   const explorerVersion = configContext.gitSha;
   const shouldShowQueryPageOptions = userContext.apiType === "SQL";
   const shouldShowGraphAutoVizOption = userContext.apiType === "Gremlin";
   const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin";
   const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
   const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled();
-  const shouldShowCopilotSampleDBOption = userContext.apiType === "SQL" && useQueryCopilot.getState().copilotEnabled;
-  const handlerOnSubmit = async () => {
+  const handlerOnSubmit = () => {
     setIsExecuting(true);
 
     LocalStorageUtility.setEntryNumber(
@@ -104,14 +78,10 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     );
     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.CopilotSampleDBEnabled, copilotSampleDBEnabled.toString());
 
     if (shouldShowGraphAutoVizOption) {
       LocalStorageUtility.setEntryBoolean(
@@ -151,7 +121,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     logConsoleInfo(
       `Updated query setting to ${LocalStorageUtility.getEntryString(StorageKey.SetPartitionKeyUndefined)}`,
     );
-    refreshExplorer && (await explorer.refreshExplorer());
     closeSidePanel();
   };
 
@@ -210,33 +179,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     }
   };
 
-  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 handleSampleDatabaseChange = async (ev: React.MouseEvent<HTMLElement>, checked?: boolean): Promise<void> => {
-    setCopilotSampleDBEnabled(checked);
-    useQueryCopilot.getState().setCopilotSampleDBEnabled(checked);
-    setRefreshExplorer(false);
-  };
-
   const choiceButtonStyles = {
     root: {
       clear: "both",
@@ -383,77 +325,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
         )}
         <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 settingsSectionInlineCheckbox">
             <div className="settingsSectionLabel">
               Enable container pagination
               <InfoTooltip>
@@ -473,7 +344,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
         </div>
         {shouldShowCrossPartitionOption && (
           <div className="settingsSection">
-            <div className="settingsSectionPart settingsSectionInlineCheckbox">
+            <div className="settingsSectionPart">
               <div className="settingsSectionLabel">
                 Enable cross-partition query
                 <InfoTooltip>
@@ -564,30 +435,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
             </div>
           </div>
         )}
-        {shouldShowCopilotSampleDBOption && (
-          <div className="settingsSection">
-            <div className="settingsSectionPart settingsSectionInlineCheckbox">
-              <div className="settingsSectionLabel">
-                Enable sample database
-                <InfoTooltip>
-                  This is a sample database and collection with synthetic product data you can use to explore using
-                  NoSQL queries and Copilot. This will appear as another database in the Data Explorer UI, and is
-                  created by, and maintained by Microsoft at no cost to you.
-                </InfoTooltip>
-              </div>
-
-              <Checkbox
-                styles={{
-                  label: { padding: 0 },
-                }}
-                className="padding"
-                ariaLabel="Enable sample db for Copilot"
-                checked={copilotSampleDBEnabled}
-                onChange={handleSampleDatabaseChange}
-              />
-            </div>
-          </div>
-        )}
         <div className="settingsSection">
           <div className="settingsSectionPart">
             <div className="settingsSectionLabel">Explorer Version</div>

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

@@ -142,139 +142,6 @@ exports[`Settings Pane should render Default properly 1`] = `
     >
       <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"
-    >
-      <div
-        className="settingsSectionPart settingsSectionInlineCheckbox"
       >
         <div
           className="settingsSectionLabel"
@@ -303,7 +170,7 @@ exports[`Settings Pane should render Default properly 1`] = `
       className="settingsSection"
     >
       <div
-        className="settingsSectionPart settingsSectionInlineCheckbox"
+        className="settingsSectionPart"
       >
         <div
           className="settingsSectionLabel"
@@ -389,139 +256,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
     >
       <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"
-    >
-      <div
-        className="settingsSectionPart settingsSectionInlineCheckbox"
       >
         <div
           className="settingsSectionLabel"

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/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>
@@ -1255,7 +1255,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 +1281,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 +1293,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 +1331,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 +1358,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 +1383,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 +1424,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 +1441,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 +1453,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 +1469,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 +1485,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 +1515,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 +1534,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 +1547,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 +1561,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 +1575,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 +1591,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 +1600,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 +1616,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 +1628,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 +1641,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 +1663,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 +1724,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 +1733,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 +1741,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 +1763,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 +1792,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 +2082,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 +2094,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__/AddCollectionPanel.test.tsx.snap

@@ -336,7 +336,8 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           directionalHint={4}
         >
           <Icon
-            ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
+            ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without
+ impacting the performance of transactional workloads."
             className="panelInfoIcon"
             iconName="Info"
             tabIndex={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"
                 >
@@ -325,7 +325,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             <span
               aria-live="assertive"
               className="panelWarningErrorDetailsLinkContainer"
-              key=".0:$.$.1"
+              key=".0:$.1"
               role="alert"
             >
               <Text
@@ -335,7 +335,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
               >
                 <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"
+                  className="panelWarningErrorMessage css-56"
                 >
                   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 +359,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 +663,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 +699,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 +709,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 +1013,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 +1929,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 +1955,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 +1967,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 +2005,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 +2032,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 +2057,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 +2098,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 +2115,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 +2127,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 +2143,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 +2159,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 +2189,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 +2208,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 +2221,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 +2235,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 +2249,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 +2265,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 +2274,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 +2290,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 +2302,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 +2315,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 +2337,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 +2398,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 +2407,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 +2415,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 +2437,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 +2466,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 +2756,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 +2768,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/Panes/__snapshots__/PanelContainerComponent.test.tsx.snap

@@ -6,7 +6,6 @@ exports[`PaneContainerComponent test should be resize if notification console is
   customWidth="440px"
   headerClassName="panelHeader"
   headerText="test"
-  isFooterAtBottom={true}
   isLightDismiss={true}
   isOpen={true}
   onDismiss={[Function]}
@@ -19,9 +18,9 @@ exports[`PaneContainerComponent test should be resize if notification console is
     Object {
       "commands": Object {
         "marginTop": 8,
-        "paddingTop": 0,
       },
       "content": Object {
+        "height": "100%",
         "padding": 0,
       },
       "header": Object {
@@ -30,6 +29,9 @@ exports[`PaneContainerComponent test should be resize if notification console is
       "navigation": Object {
         "borderBottom": "1px solid #cccccc",
       },
+      "scrollableContent": Object {
+        "height": "100%",
+      },
     }
   }
   type={7}
@@ -46,7 +48,6 @@ exports[`PaneContainerComponent test should render with panel content and header
   customWidth="440px"
   headerClassName="panelHeader"
   headerText="test"
-  isFooterAtBottom={true}
   isLightDismiss={true}
   isOpen={true}
   onDismiss={[Function]}
@@ -59,9 +60,9 @@ exports[`PaneContainerComponent test should render with panel content and header
     Object {
       "commands": Object {
         "marginTop": 8,
-        "paddingTop": 0,
       },
       "content": Object {
+        "height": "100%",
         "padding": 0,
       },
       "header": Object {
@@ -70,6 +71,9 @@ exports[`PaneContainerComponent test should render with panel content and header
       "navigation": Object {
         "borderBottom": "1px solid #cccccc",
       },
+      "scrollableContent": Object {
+        "height": "100%",
+      },
     }
   }
   type={7}

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

@@ -99,7 +99,7 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it("should render dont show again button and check it", () => {
+  it("should render dont show again button and check it ", () => {
     mockUseCopilotStore.mockReturnValue({
       ...mockReturnValue,
       showFeedbackModal: true,

src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx

@@ -1,5 +1,6 @@
 import { IconButton, Image, Link, Modal, PrimaryButton, Stack, StackItem, Text } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
 import React from "react";
 import Flash from "../../../../images/CopilotFlash.svg";
 import Thumb from "../../../../images/CopilotThumb.svg";
@@ -13,7 +14,11 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
     if (visible) {
       window.localStorage.setItem("hideWelcomeModal", "true");
     }
-  });
+  }, []);
+
+  React.useEffect(() => {
+    useQueryCopilot.getState().setShowWelcomeModal(isModalVisible);
+  }, [isModalVisible]);
 
   return (
     <>
@@ -37,6 +42,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 +58,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 Microsoft Copilot for Azure in Cosmos DB (preview)</Text>
             </Stack.Item>
             <Stack.Item align="center" className="text">
               <Stack horizontal>

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

@@ -610,7 +610,7 @@ 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 render dont show again button and check it  1`] = `
 <Modal
   isOpen={true}
 >

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

@@ -40,6 +40,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 +78,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 Microsoft Copilot for Azure in Cosmos DB (preview)
           </Text>
         </StackItem>
         <StackItem

src/Explorer/QueryCopilot/Popup/CopyPopup.tsx

@@ -15,7 +15,6 @@ export const CopyPopup = ({
 
   return showCopyPopup ? (
     <Stack
-      role="status"
       style={{
         position: "fixed",
         width: 345,

src/Explorer/QueryCopilot/Popup/__snapshots__/CopyPopup.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`Copy Popup snapshot test should render when showCopyPopup is false 1`]
 
 exports[`Copy Popup snapshot test should render when showCopyPopup is true 1`] = `
 <Stack
-  role="status"
   style={
     Object {
       "background": "#FFFFFF",

src/Explorer/QueryCopilot/QueryCopilotContext.tsx

@@ -30,7 +30,6 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
       queryResults: undefined,
       errorMessage: "",
       isSamplePromptsOpen: false,
-      showPromptTeachingBubble: true,
       showDeletePopup: false,
       showFeedbackBar: false,
       showCopyPopup: false,
@@ -66,7 +65,6 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
       setQueryResults: (queryResults: QueryResults | undefined) => set({ queryResults }),
       setErrorMessage: (errorMessage: string) => set({ errorMessage }),
       setIsSamplePromptsOpen: (isSamplePromptsOpen: boolean) => set({ isSamplePromptsOpen }),
-      setShowPromptTeachingBubble: (showPromptTeachingBubble: boolean) => set({ showPromptTeachingBubble }),
       setShowDeletePopup: (showDeletePopup: boolean) => set({ showDeletePopup }),
       setShowFeedbackBar: (showFeedbackBar: boolean) => set({ showFeedbackBar }),
       setshowCopyPopup: (showCopyPopup: boolean) => set({ showCopyPopup }),
@@ -105,7 +103,6 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
           queryResults: undefined,
           errorMessage: "",
           isSamplePromptsOpen: false,
-          showPromptTeachingBubble: true,
           showDeletePopup: false,
           showFeedbackBar: false,
           showCopyPopup: false,

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -18,6 +18,7 @@ import {
   Text,
   TextField,
 } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
 import { HttpStatusCodes } from "Common/Constants";
 import { handleError } from "Common/ErrorHandlingUtils";
 import { createUri } from "Common/UrlUtility";
@@ -34,7 +35,7 @@ import { GenerateSQLQueryResponse, QueryCopilotProps } from "Explorer/QueryCopil
 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 { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
 import React, { useRef, useState } from "react";
 import HintIcon from "../../../images/Hint.svg";
 import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
@@ -70,8 +71,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
   databaseId,
   containerId,
 }: QueryCopilotPromptProps): JSX.Element => {
-  const [copilotTeachingBubbleVisible, setCopilotTeachingBubbleVisible] = useState<boolean>(false);
-  const inputEdited = useRef(false);
+  const [copilotTeachingBubbleVisible, { toggle: toggleCopilotTeachingBubbleVisible }] = useBoolean(false);
   const {
     openFeedbackModal,
     hideFeedbackModalForLikedQueries,
@@ -93,8 +93,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     setIsSamplePromptsOpen,
     showSamplePrompts,
     setShowSamplePrompts,
-    showPromptTeachingBubble,
-    setShowPromptTeachingBubble,
     showDeletePopup,
     setShowDeletePopup,
     showFeedbackBar,
@@ -111,6 +109,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     errorMessage,
   } = useCopilotStore();
 
+  const inputEdited = useRef(!!userPrompt);
+
   const sampleProps: SamplePromptsProps = {
     isSamplePromptsOpen: isSamplePromptsOpen,
     setIsSamplePromptsOpen: setIsSamplePromptsOpen,
@@ -273,27 +273,16 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
   };
 
   const showTeachingBubble = (): void => {
-    if (showPromptTeachingBubble && !inputEdited.current) {
+    if (!inputEdited.current) {
       setTimeout(() => {
-        if (!inputEdited.current && !isWelcomModalVisible()) {
-          setCopilotTeachingBubbleVisible(true);
+        if (!useQueryCopilot.getState().showWelcomeModal && !userPrompt && !inputEdited.current) {
+          toggleCopilotTeachingBubbleVisible();
           inputEdited.current = true;
         }
       }, 30000);
-    } else {
-      toggleCopilotTeachingBubbleVisible(false);
     }
   };
 
-  const toggleCopilotTeachingBubbleVisible = (visible: boolean): void => {
-    setCopilotTeachingBubbleVisible(visible);
-    setShowPromptTeachingBubble(visible);
-  };
-
-  const isWelcomModalVisible = (): boolean => {
-    return localStorage.getItem("hideWelcomeModal") !== "true";
-  };
-
   const clearFeedback = () => {
     resetButtonState();
     resetQueryResults();
@@ -311,29 +300,16 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     resetButtonState();
   };
 
-  const getAriaLabel = () => {
-    if (isGeneratingQuery === null) {
-      return " ";
-    } else if (isGeneratingQuery) {
-      return "Content is loading";
-    } else {
-      return "Content is updated";
-    }
-  };
-
   React.useEffect(() => {
     showTeachingBubble();
+    useQueryCopilot.subscribe(showTeachingBubble, (state: QueryCopilotState) => state.showWelcomeModal);
     useTabs.getState().setIsQueryErrorThrown(false);
   }, []);
 
   return (
-    <Stack
-      className="copilot-prompt-pane"
-      styles={{ root: { backgroundColor: "#FAFAFA", padding: "16px 24px 0px" } }}
-      id="copilot-textfield-label"
-    >
+    <Stack className="copilot-prompt-pane" styles={{ root: { backgroundColor: "#FAFAFA", padding: "16px 24px 0px" } }}>
       <Stack horizontal>
-        <Image src={CopilotIcon} style={{ width: 24, height: 24 }} alt="Copilot" role="none" />
+        <Image src={CopilotIcon} style={{ width: 24, height: 24 }} />
         <Text style={{ marginLeft: 8, fontWeight: 600, fontSize: 16 }}>Copilot</Text>
         <IconButton
           iconProps={{ imageProps: { src: errorIcon } }}
@@ -370,15 +346,14 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           disabled={isGeneratingQuery}
           autoComplete="off"
           placeholder="Ask a question in natural language and we’ll generate the query for you."
-          aria-labelledby="copilot-textfield-label"
         />
-        {showPromptTeachingBubble && copilotTeachingBubbleVisible && (
+        {copilotTeachingBubbleVisible && (
           <TeachingBubble
             calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
             target="#naturalLanguageInput"
             hasCloseButton={true}
             closeButtonAriaLabel="Close"
-            onDismiss={() => toggleCopilotTeachingBubbleVisible(false)}
+            onDismiss={toggleCopilotTeachingBubbleVisible}
             hasSmallHeadline={true}
             headline="Write a prompt"
           >
@@ -386,7 +361,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
             <Link
               onClick={() => {
                 setShowSamplePrompts(true);
-                toggleCopilotTeachingBubbleVisible(false);
+                toggleCopilotTeachingBubbleVisible();
               }}
               style={{ color: "white", fontWeight: 600 }}
             >
@@ -400,11 +375,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           disabled={isGeneratingQuery || !userPrompt.trim()}
           style={{ marginLeft: 8 }}
           onClick={() => startGenerateQueryProcess()}
-          aria-label="Send"
         />
-        <div role="alert" aria-label={getAriaLabel()}>
-          {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
-        </div>
+        {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
         {showSamplePrompts && (
           <Callout
             styles={{ root: { minWidth: 400, maxWidth: "70vw" } }}
@@ -510,7 +482,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
       <Stack style={{ margin: "8px 0" }}>
         <Text style={{ fontSize: 12 }}>
           AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
-          <Link href="https://aka.ms/cdb-copilot-preview-terms" target="_blank" style={{ color: "#0072c9" }}>
+          <Link href="https://aka.ms/cdb-copilot-preview-terms" target="_blank">
             Read preview terms
           </Link>
           {showErrorMessageBar && (
@@ -578,7 +550,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
             id="likeBtn"
             style={{ marginLeft: 20 }}
             iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
-            aria-label="Like"
             onClick={() => {
               setShowCallout(!likeQuery);
               setLikeQuery(!likeQuery);
@@ -598,7 +569,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
               setDislikeQuery(!dislikeQuery);
               setShowCallout(false);
             }}
-            aria-label="Dislike"
           />
           <Separator vertical style={{ color: "#EDEBE9" }} />
           <CommandBarButton
@@ -619,7 +589,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           </CommandBarButton>
         </Stack>
       )}
-      <WelcomeModal visible={isWelcomModalVisible()} />
+      <WelcomeModal visible={useQueryCopilot.getState().showWelcomeModal} />
       {isSamplePromptsOpen && <SamplePrompts sampleProps={sampleProps} />}
       {query !== "" && query.trim().length !== 0 && (
         <DeletePopup

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

@@ -135,7 +135,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/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/Footer/__snapshots__/Footer.test.tsx.snap

@@ -49,7 +49,7 @@ exports[`Footer snapshot test should not pass if no text 1`] = `
     />
   </Stack>
   <StyledTextFieldBase
-    disabled={null}
+    disabled={false}
     multiline={true}
     onChange={[Function]}
     onKeyDown={[Function]}
@@ -74,7 +74,7 @@ exports[`Footer snapshot test should not pass if no text 1`] = `
     value=""
   />
   <CustomizedIconButton
-    disabled={null}
+    disabled={false}
     iconProps={
       Object {
         "iconName": "Send",
@@ -134,7 +134,7 @@ exports[`Footer snapshot test should not pass text with non enter key 1`] = `
     />
   </Stack>
   <StyledTextFieldBase
-    disabled={null}
+    disabled={false}
     multiline={true}
     onChange={[Function]}
     onKeyDown={[Function]}
@@ -159,7 +159,7 @@ exports[`Footer snapshot test should not pass text with non enter key 1`] = `
     value=""
   />
   <CustomizedIconButton
-    disabled={null}
+    disabled={false}
     iconProps={
       Object {
         "iconName": "Send",
@@ -219,7 +219,7 @@ exports[`Footer snapshot test should open sample prompts on button click 1`] = `
     />
   </Stack>
   <StyledTextFieldBase
-    disabled={null}
+    disabled={false}
     multiline={true}
     onChange={[Function]}
     onKeyDown={[Function]}
@@ -244,7 +244,7 @@ exports[`Footer snapshot test should open sample prompts on button click 1`] = `
     value=""
   />
   <CustomizedIconButton
-    disabled={null}
+    disabled={false}
     iconProps={
       Object {
         "iconName": "Send",
@@ -304,7 +304,7 @@ exports[`Footer snapshot test should pass text with enter key 1`] = `
     />
   </Stack>
   <StyledTextFieldBase
-    disabled={null}
+    disabled={false}
     multiline={true}
     onChange={[Function]}
     onKeyDown={[Function]}
@@ -329,7 +329,7 @@ exports[`Footer snapshot test should pass text with enter key 1`] = `
     value="test message"
   />
   <CustomizedIconButton
-    disabled={null}
+    disabled={false}
     iconProps={
       Object {
         "iconName": "Send",
@@ -389,7 +389,7 @@ exports[`Footer snapshot test should pass text with icon button 1`] = `
     />
   </Stack>
   <StyledTextFieldBase
-    disabled={null}
+    disabled={false}
     multiline={true}
     onChange={[Function]}
     onKeyDown={[Function]}
@@ -414,7 +414,7 @@ exports[`Footer snapshot test should pass text with icon button 1`] = `
     value="test message"
   />
   <CustomizedIconButton
-    disabled={null}
+    disabled={false}
     iconProps={
       Object {
         "iconName": "Send",
@@ -474,7 +474,7 @@ exports[`Footer snapshot test should update user input 1`] = `
     />
   </Stack>
   <StyledTextFieldBase
-    disabled={null}
+    disabled={false}
     multiline={true}
     onChange={[Function]}
     onKeyDown={[Function]}
@@ -499,7 +499,7 @@ exports[`Footer snapshot test should update user input 1`] = `
     value=""
   />
   <CustomizedIconButton
-    disabled={null}
+    disabled={false}
     iconProps={
       Object {
         "iconName": "Send",

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/SplashScreen/SplashScreen.tsx

@@ -148,25 +148,23 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
             />
           </Stack>
           <Stack horizontal tokens={{ childrenGap: 16 }}>
-            {useQueryCopilot.getState().copilotEnabled && (
-              <SplashScreenButton
-                imgSrc={CopilotIcon}
-                title={"Query faster with Copilot"}
-                description={
-                  "Copilot is your AI buddy that helps you write Azure Cosmos DB queries like a pro. Try it using our sample data set now!"
+            <SplashScreenButton
+              imgSrc={CopilotIcon}
+              title={"Query faster with Copilot"}
+              description={
+                "Copilot is your AI buddy that helps you write Azure Cosmos DB queries like a pro. Try it using our sample data set now!"
+              }
+              onClick={() => {
+                const copilotVersion = userContext.features.copilotVersion;
+                if (copilotVersion === "v1.0") {
+                  useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot);
+                } else if (copilotVersion === "v2.0") {
+                  const sampleCollection = useDatabases.getState().sampleDataResourceTokenCollection;
+                  sampleCollection.onNewQueryClick(sampleCollection, undefined);
                 }
-                onClick={() => {
-                  const copilotVersion = userContext.features.copilotVersion;
-                  if (copilotVersion === "v1.0") {
-                    useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot);
-                  } else if (copilotVersion === "v2.0") {
-                    const sampleCollection = useDatabases.getState().sampleDataResourceTokenCollection;
-                    sampleCollection.onNewQueryClick(sampleCollection, undefined);
-                  }
-                  traceOpen(Action.OpenQueryCopilotFromSplashScreen, { apiType: userContext.apiType });
-                }}
-              />
-            )}
+                traceOpen(Action.OpenQueryCopilotFromSplashScreen, { apiType: userContext.apiType });
+              }}
+            />
             <SplashScreenButton
               imgSrc={ConnectIcon}
               title={"Connect"}

src/Explorer/Tables/DataTable/DataTableBindingManager.ts

@@ -1,8 +1,6 @@
 import * as ko from "knockout";
 import * as _ from "underscore";
 
-import * as DataTable from "datatables.net-dt";
-import loadingIndicator3Squares from "../../../../images/LoadingIndicator_3Squares.gif";
 import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import * as Constants from "../Constants";
 import * as Entities from "../Entities";
@@ -96,7 +94,7 @@ function createDataTable(
     });
   }
 
-  tableEntityListViewModel.table = DataTableBuilder.createDataTable($dataTable, <DataTable.Config>{
+  tableEntityListViewModel.table = DataTableBuilder.createDataTable($dataTable, <DataTables.Settings>{
     // WARNING!!! SECURITY: If you add new columns, make sure you encode them if they are user strings from Azure (see encodeText)
     // so that they don't get interpreted as HTML in our page.
     colReorder: true,
@@ -118,7 +116,7 @@ function createDataTable(
         sPrevious: "<",
         sLast: ">>",
       },
-      sProcessing: `<img style="width: 28px; height: 6px; " src="${loadingIndicator3Squares}">`,
+      sProcessing: '<img style="width: 28px; height: 6px; " src="images/LoadingIndicator_3Squares.gif">',
       oAria: {
         sSortAscending: "",
         sSortDescending: "",
@@ -347,7 +345,7 @@ function updateSelectionStatus(oSettings: any): void {
 // TODO consider centralizing this "post-command" logic into some sort of Command Manager entity.
 // See VSO:166520: "[Storage Explorer] Consider adding a 'command manager' to track command post-effects."
 function updateDataTableFocus(queryTablesTabId: string): void {
-  var $activeElement: JQuery<Element> = $(document.activeElement);
+  var $activeElement: JQuery = $(document.activeElement);
   var isFocusLost: boolean = $activeElement.is("body"); // When focus is lost, "body" becomes the active element.
   var storageExplorerFrameHasFocus: boolean = document.hasFocus();
   var operationManager = tableEntityListViewModelMap[queryTablesTabId].operationManager;

src/Explorer/Tables/DataTable/DataTableBuilder.ts

@@ -1,4 +1,3 @@
-import * as DataTable from "datatables.net-dt";
 import * as Utilities from "../Utilities";
 
 /**
@@ -9,7 +8,7 @@ import * as Utilities from "../Utilities";
  * @param{$dataTableElem} JQuery data table element
  * @param{$settings} Settings to use when creating the data table
  */
-export function createDataTable($dataTableElem: JQuery, settings: any): DataTable.Api<HTMLElement> {
+export function createDataTable($dataTableElem: JQuery, settings: any): DataTables.DataTable {
   return $dataTableElem.DataTable(applyDefaultRendering(settings));
 }
 
@@ -19,14 +18,14 @@ export function createDataTable($dataTableElem: JQuery, settings: any): DataTabl
  * @param{settings} The settings to check
  * @return The given settings with all columns having a rendering function
  */
-function applyDefaultRendering(settings: DataTable.Config): any {
-  var tableColumns: any[] = null;
+function applyDefaultRendering(settings: any): DataTables.SettingsLegacy {
+  var tableColumns: DataTables.ColumnLegacy[] = null;
 
-  if (settings.columns) {
-    tableColumns = settings.columns;
-  } else if (settings.columnDefs) {
+  if (settings.aoColumns) {
+    tableColumns = settings.aoColumns;
+  } else if (settings.aoColumnDefs) {
     // for tables we use aoColumnDefs instead of aoColumns
-    tableColumns = settings.columnDefs;
+    tableColumns = settings.aoColumnDefs;
   }
 
   // either the settings had no columns defined, or they were called

src/Explorer/Tables/DataTable/DataTableOperationManager.ts

@@ -1,11 +1,11 @@
 import ko from "knockout";
 
-import * as Constants from "../Constants";
-import * as Entities from "../Entities";
-import * as Utilities from "../Utilities";
 import * as DataTableOperations from "./DataTableOperations";
+import * as Constants from "../Constants";
 import TableCommands from "./TableCommands";
 import TableEntityListViewModel from "./TableEntityListViewModel";
+import * as Utilities from "../Utilities";
+import * as Entities from "../Entities";
 
 /*
  * Base class for data table row selection.
@@ -13,9 +13,9 @@ import TableEntityListViewModel from "./TableEntityListViewModel";
 export default class DataTableOperationManager {
   private _tableEntityListViewModel: TableEntityListViewModel;
   private _tableCommands: TableCommands;
-  private dataTable: JQuery<Element>;
+  private dataTable: JQuery;
 
-  constructor(table: JQuery<Element>, viewModel: TableEntityListViewModel, tableCommands: TableCommands) {
+  constructor(table: JQuery, viewModel: TableEntityListViewModel, tableCommands: TableCommands) {
     this.dataTable = table;
     this._tableEntityListViewModel = viewModel;
     this._tableCommands = tableCommands;
@@ -25,7 +25,7 @@ export default class DataTableOperationManager {
   }
 
   private click = (event: JQueryEventObject) => {
-    var elem: JQuery<Element> = $(event.currentTarget);
+    var elem: JQuery = $(event.currentTarget);
     this.updateLastSelectedItem(elem, event.shiftKey);
 
     if (Utilities.isEnvironmentCtrlPressed(event)) {
@@ -48,7 +48,7 @@ export default class DataTableOperationManager {
 
     if (isUpArrowKey || isDownArrowKey) {
       var lastSelectedItem: Entities.ITableEntity = this._tableEntityListViewModel.lastSelectedItem;
-      var dataTableRows: JQuery<Element> = $(Constants.htmlSelectors.dataTableAllRowsSelector);
+      var dataTableRows: JQuery = $(Constants.htmlSelectors.dataTableAllRowsSelector);
       var maximumIndex = dataTableRows.length - 1;
 
       // If can't find an index for lastSelectedItem, then either no item is previously selected or it goes across page.
@@ -60,7 +60,7 @@ export default class DataTableOperationManager {
         : -1;
       var nextIndex: number = isUpArrowKey ? lastSelectedItemIndex - 1 : lastSelectedItemIndex + 1;
       var safeIndex: number = Utilities.ensureBetweenBounds(nextIndex, 0, maximumIndex);
-      var selectedRowElement: JQuery<Element> = dataTableRows.eq(safeIndex);
+      var selectedRowElement: JQuery = dataTableRows.eq(safeIndex);
 
       if (selectedRowElement) {
         if (event.shiftKey) {
@@ -143,13 +143,13 @@ export default class DataTableOperationManager {
     return handled;
   }
 
-  private getEntityIdentity($elem: JQuery<Element>): Entities.ITableEntityIdentity {
+  private getEntityIdentity($elem: JQuery): Entities.ITableEntityIdentity {
     return {
       RowKey: $elem.attr(Constants.htmlAttributeNames.dataTableRowKeyAttr),
     };
   }
 
-  private updateLastSelectedItem($elem: JQuery<Element>, isShiftSelect: boolean) {
+  private updateLastSelectedItem($elem: JQuery, isShiftSelect: boolean) {
     var entityIdentity: Entities.ITableEntityIdentity = this.getEntityIdentity($elem);
     var entity = this._tableEntityListViewModel.getItemFromCurrentPage(
       this._tableEntityListViewModel.getTableEntityKeys(entityIdentity.RowKey),
@@ -162,7 +162,7 @@ export default class DataTableOperationManager {
     }
   }
 
-  private applySingleSelection($elem: JQuery<Element>) {
+  private applySingleSelection($elem: JQuery) {
     if ($elem) {
       var entityIdentity: Entities.ITableEntityIdentity = this.getEntityIdentity($elem);
 
@@ -179,7 +179,7 @@ export default class DataTableOperationManager {
     );
   }
 
-  private applyCtrlSelection($elem: JQuery<Element>): void {
+  private applyCtrlSelection($elem: JQuery): void {
     var koSelected: ko.ObservableArray<Entities.ITableEntity> = this._tableEntityListViewModel
       ? this._tableEntityListViewModel.selected
       : null;
@@ -200,7 +200,7 @@ export default class DataTableOperationManager {
     }
   }
 
-  private applyShiftSelection($elem: JQuery<Element>): void {
+  private applyShiftSelection($elem: JQuery): void {
     var anchorItem = this._tableEntityListViewModel.lastSelectedAnchorItem;
 
     // If anchor item doesn't exist, use the first available item of current page instead
@@ -228,7 +228,7 @@ export default class DataTableOperationManager {
     }
   }
 
-  private applyContextMenuSelection($elem: JQuery<Element>) {
+  private applyContextMenuSelection($elem: JQuery) {
     var entityIdentity: Entities.ITableEntityIdentity = this.getEntityIdentity($elem);
 
     if (

src/Explorer/Tables/DataTable/DataTableOperations.ts

@@ -1,4 +1,3 @@
-import * as DataTables from "datatables.net";
 import Q from "q";
 import _ from "underscore";
 import * as QueryBuilderConstants from "../Constants";
@@ -14,7 +13,7 @@ export function getRowSelector(selectorSchema: Entities.IProperty[]): string {
   return QueryBuilderConstants.htmlSelectors.dataTableAllRowsSelector + selector;
 }
 
-export function isRowVisible(dataTableScrollBodyQuery: JQuery<Element>, element: Element): boolean {
+export function isRowVisible(dataTableScrollBodyQuery: JQuery, element: HTMLElement): boolean {
   let isVisible = false;
 
   if (dataTableScrollBodyQuery.length && element) {
@@ -27,18 +26,16 @@ export function isRowVisible(dataTableScrollBodyQuery: JQuery<Element>, element:
   return isVisible;
 }
 
-export function scrollToRowIfNeeded(dataTableRows: JQuery<Element>, currentIndex: number, isScrollUp: boolean): void {
+export function scrollToRowIfNeeded(dataTableRows: JQuery, currentIndex: number, isScrollUp: boolean): void {
   if (dataTableRows.length) {
-    const dataTableScrollBodyQuery: JQuery<Element> = $(
-        QueryBuilderConstants.htmlSelectors.dataTableScrollBodySelector,
-      ),
-      selectedRowElement: Element = dataTableRows.get(currentIndex);
+    const dataTableScrollBodyQuery: JQuery = $(QueryBuilderConstants.htmlSelectors.dataTableScrollBodySelector),
+      selectedRowElement: HTMLElement = dataTableRows.get(currentIndex);
 
     if (dataTableScrollBodyQuery.length && selectedRowElement) {
       const isVisible: boolean = isRowVisible(dataTableScrollBodyQuery, selectedRowElement);
 
       if (!isVisible) {
-        const selectedRowQuery: JQuery<Element> = $(selectedRowElement),
+        const selectedRowQuery: JQuery = $(selectedRowElement),
           scrollPosition: number = dataTableScrollBodyQuery.scrollTop(),
           selectedElementPosition: number = selectedRowQuery.position().top;
         let newScrollPosition = 0;
@@ -57,8 +54,8 @@ export function scrollToRowIfNeeded(dataTableRows: JQuery<Element>, currentIndex
 }
 
 export function scrollToTopIfNeeded(): void {
-  const $dataTableRows: JQuery<Element> = $(QueryBuilderConstants.htmlSelectors.dataTableAllRowsSelector),
-    $dataTableScrollBody: JQuery<Element> = $(QueryBuilderConstants.htmlSelectors.dataTableScrollBodySelector);
+  const $dataTableRows: JQuery = $(QueryBuilderConstants.htmlSelectors.dataTableAllRowsSelector),
+    $dataTableScrollBody: JQuery = $(QueryBuilderConstants.htmlSelectors.dataTableScrollBodySelector);
 
   if ($dataTableRows.length && $dataTableScrollBody.length) {
     $dataTableScrollBody.scrollTop(0);
@@ -74,7 +71,7 @@ export function setPaginationButtonEventHandlers(): void {
     .attr("role", "button");
 }
 
-export function filterColumns(table: DataTables.Api<HTMLElement>, settings: boolean[]): void {
+export function filterColumns(table: DataTables.DataTable, settings: boolean[]): void {
   settings &&
     settings.forEach((value: boolean, index: number) => {
       table.column(index).visible(value, false);
@@ -87,7 +84,7 @@ export function filterColumns(table: DataTables.Api<HTMLElement>, settings: bool
  * If no current order is specified, reorder the columns based on intial order.
  */
 export function reorderColumns(
-  table: DataTables.Api<HTMLElement>,
+  table: DataTables.DataTable,
   targetOrder: number[],
   currentOrder?: number[],
   //eslint-disable-next-line
@@ -111,9 +108,7 @@ export function reorderColumns(
       ? calculateTransformationOrder(currentOrder, targetOrder)
       : targetOrder;
     try {
-      // TODO: This possibly does not work with the new version of datatables.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ($.fn.dataTable as any).ColReorder(table).fnOrder(transformationOrder);
+      $.fn.dataTable.ColReorder(table).fnOrder(transformationOrder);
     } catch (err) {
       return Q.reject(err);
     }
@@ -121,9 +116,9 @@ export function reorderColumns(
   return Q.resolve(null);
 }
 
-// export function resetColumns(table: DataTables.DataTable): void {
-//   $.fn.dataTable.ColReorder(table).fnReset();
-// }
+export function resetColumns(table: DataTables.DataTable): void {
+  $.fn.dataTable.ColReorder(table).fnReset();
+}
 
 /**
  * A table's initial order is described in the form of a natural ascending order.
@@ -138,10 +133,8 @@ export function getInitialOrder(columnsCount: number): number[] {
  * Initial order:  I = [0, 1, 2, 3, 4, 5, 6, 7, 8]   <---->   {prop0, prop1, prop2, prop3, prop4, prop5, prop6, prop7, prop8}
  * Current order:  C = [0, 1, 2, 6, 7, 3, 4, 5, 8]   <---->   {prop0, prop1, prop2, prop6, prop7, prop3, prop4, prop5, prop8}
  */
-export function getCurrentOrder(table: DataTables.Api<HTMLElement>): number[] {
-  // TODO: This possibly does not work with the new version of datatables.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return ($.fn.dataTable as any).ColReorder(table).fnOrder();
+export function getCurrentOrder(table: DataTables.DataTable): number[] {
+  return $.fn.dataTable.ColReorder(table).fnOrder();
 }
 
 /**
@@ -185,8 +178,8 @@ export function calculateTransformationOrder(currentOrder: number[], targetOrder
   return transformationOrder;
 }
 
-export function getDataTableHeaders(table: DataTables.Api<HTMLElement>): string[] {
-  const columns = table.columns();
+export function getDataTableHeaders(table: DataTables.DataTable): string[] {
+  const columns: DataTables.ColumnsMethods = table.columns();
   let headers: string[] = [];
   if (columns) {
     // table.columns() return ColumnsMethods which is an array of arrays

src/Explorer/Tables/DataTable/DataTableViewModel.ts

@@ -1,15 +1,14 @@
 import * as ko from "knockout";
 import * as _ from "underscore";
 
-import { ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import * as DataTables from "datatables.net";
-import * as CommonConstants from "../../../Common/Constants";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import CacheBase from "./CacheBase";
+import * as CommonConstants from "../../../Common/Constants";
 import * as Constants from "../Constants";
 import * as Entities from "../Entities";
-import CacheBase from "./CacheBase";
+import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { QueryIterator, ItemDefinition, Resource } from "@azure/cosmos";
 
 // This is the format of the data we will have to pass to Datatable render callback,
 // and property names are defined by Datatable as well.
@@ -28,7 +27,7 @@ abstract class DataTableViewModel {
   public items = ko.observableArray<Entities.ITableEntity>();
   public selected = ko.observableArray<Entities.ITableEntity>();
 
-  public table: DataTables.Api<HTMLElement>;
+  public table: DataTables.DataTable;
 
   // The anchor item is for shift selection. i.e., select all items between anchor item and a give item.
   public lastSelectedAnchorItem: Entities.ITableEntity;

src/Explorer/Tables/DataTable/TableEntityListViewModel.ts

@@ -1,4 +1,3 @@
-import * as DataTables from "datatables.net";
 import * as ko from "knockout";
 import Q from "q";
 import * as _ from "underscore";
@@ -57,7 +56,7 @@ function _parse(err: any): ErrorDataModel[] {
 
 function _getInnerErrors(message: string): any[] {
   /*
-            The backend error message has an inner-message which is a stringified object.
+            The backend error message has an inner-message which is a stringified object. 
             For SQL errors, the "errors" property is an array of SqlErrorDataModel.
             Example:
                 "Message: {"Errors":["Resource with specified id or name already exists"]}\r\nActivityId: 80005000008d40b6a, Request URI: /apps/19000c000c0a0005/services/mctestdocdbprod-MasterService-0-00066ab9937/partitions/900005f9000e676fb8/replicas/13000000000955p"
@@ -132,7 +131,7 @@ export default class TableEntityListViewModel extends DataTableViewModel {
     return [{ key: Constants.EntityKeyNames.RowKey, value: rowKey }];
   }
 
-  public reloadTable(useSetting: boolean = true, resetHeaders: boolean = true): DataTables.Api<Element> {
+  public reloadTable(useSetting: boolean = true, resetHeaders: boolean = true): DataTables.DataTable {
     this.clearCache();
     this.clearSelection();
     this.isCancelled = false;

src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts

@@ -1,4 +1,3 @@
-import * as DataTable from "datatables.net-dt";
 import * as ko from "knockout";
 import { KeyCodes } from "../../../Common/Constants";
 import { userContext } from "../../../UserContext";
@@ -644,7 +643,7 @@ export default class QueryBuilderViewModel {
     return groupViewModels;
   };
 
-  public runQuery = (): DataTable.Api<Element> => {
+  public runQuery = (): DataTables.DataTable => {
     return this._queryViewModel.runQuery();
   };
 

src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx

@@ -1,10 +1,9 @@
-import * as DataTables from "datatables.net";
 import * as ko from "knockout";
 import React from "react";
 import * as _ from "underscore";
 import { KeyCodes } from "../../../Common/Constants";
-import { userContext } from "../../../UserContext";
 import { useSidePanel } from "../../../hooks/useSidePanel";
+import { userContext } from "../../../UserContext";
 import { TableQuerySelectPanel } from "../../Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel";
 import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import { getQuotedCqlIdentifier } from "../CqlUtilities";
@@ -159,7 +158,7 @@ export default class QueryViewModel {
       notify: "always",
     });
 
-  public runQuery = (): DataTables.Api<Element> => {
+  public runQuery = (): DataTables.DataTable => {
     let filter = this.setFilter();
     if (filter && userContext.apiType !== "Cassandra") {
       filter = filter.replace(/"/g, "'");
@@ -177,7 +176,7 @@ export default class QueryViewModel {
     return this._tableEntityListViewModel.reloadTable(/*useSetting*/ false, /*resetHeaders*/ false);
   };
 
-  public clearQuery = (): DataTables.Api<Element> => {
+  public clearQuery = (): DataTables.DataTable => {
     this.queryText();
     this.topValue();
     this.selectText();

src/Explorer/Tables/TableDataClient.ts

@@ -3,12 +3,12 @@ import * as ko from "knockout";
 import Q from "q";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
-import { handleError } from "../../Common/ErrorHandlingUtils";
-import * as HeadersUtility from "../../Common/HeadersUtility";
 import { createDocument } from "../../Common/dataAccess/createDocument";
 import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
 import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
 import { updateDocument } from "../../Common/dataAccess/updateDocument";
+import { handleError } from "../../Common/ErrorHandlingUtils";
+import * as HeadersUtility from "../../Common/HeadersUtility";
 import { configContext } from "../../ConfigContext";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { userContext } from "../../UserContext";
@@ -281,7 +281,7 @@ export class CassandraAPIDataClient extends TableDataClient {
           query,
           paginationToken,
         },
-        beforeSend: this.setAuthorizationHeader as any,
+        beforeSend: this.setAuthorizationHeader,
         cache: false,
       });
       shouldNotify &&
@@ -423,7 +423,7 @@ export class CassandraAPIDataClient extends TableDataClient {
         keyspaceId: collection.databaseId,
         tableId: collection.id(),
       },
-      beforeSend: this.setAuthorizationHeader as any,
+      beforeSend: this.setAuthorizationHeader,
       cache: false,
     })
       .then(
@@ -463,7 +463,7 @@ export class CassandraAPIDataClient extends TableDataClient {
         keyspaceId: collection.databaseId,
         tableId: collection.id(),
       },
-      beforeSend: this.setAuthorizationHeader as any,
+      beforeSend: this.setAuthorizationHeader,
       cache: false,
     })
       .then(
@@ -496,7 +496,7 @@ export class CassandraAPIDataClient extends TableDataClient {
         resourceId: resourceId,
         query: query,
       },
-      beforeSend: this.setAuthorizationHeader as any,
+      beforeSend: this.setAuthorizationHeader,
       cache: false,
     }).then(
       (data: any) => {

src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts

@@ -47,11 +47,11 @@ describe("getMongoShellUrl", () => {
     queryString = `resourceId=${userContext.databaseAccount.id}&accountName=${userContext.databaseAccount.name}&mongoEndpoint=${userContext.databaseAccount.properties.documentEndpoint}`;
   });
 
-  it("should return /mongoshell/indexv2.html by default", () => {
+  it("should return /mongoshell/indexv2.html by default ", () => {
     expect(getMongoShellUrl()).toBe(`/mongoshell/indexv2.html?${queryString}`);
   });
 
-  it("should return /mongoshell/indexv2.html when portalEnv==localhost", () => {
+  it("should return /mongoshell/indexv2.html when portalEnv==localhost ", () => {
     updateUserContext({
       portalEnv: "localhost",
     });
@@ -149,7 +149,7 @@ describe("getMongoShellUrl", () => {
       expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
     });
 
-    it("configContext.BACKEND_ENDPOINT === '' and configContext.platform === Platform.Hosted, should return /mongoshell/indexv2.html", () => {
+    it("configContext.BACKEND_ENDPOINT === '' and configContext.platform === Platform.Hosted, should return /mongoshell/indexv2.html ", () => {
       resetConfigContext();
       updateConfigContext({
         platform: Platform.Hosted,
@@ -172,7 +172,7 @@ describe("getMongoShellUrl", () => {
 });
 
 describe("getExtensionEndpoint", () => {
-  it("when platform === Platform.Hosted, backendEndpoint is undefined", () => {
+  it("when platform === Platform.Hosted, backendEndpoint is undefined ", () => {
     expect(getExtensionEndpoint(Platform.Hosted, undefined)).toBe("");
   });
 
@@ -184,15 +184,15 @@ describe("getExtensionEndpoint", () => {
     expect(getExtensionEndpoint(Platform.Hosted, null)).toBe("");
   });
 
-  it("when platform === Platform.Hosted, backendEndpoint != ''", () => {
+  it("when platform === Platform.Hosted, backendEndpoint != '' ", () => {
     expect(getExtensionEndpoint(Platform.Hosted, "foo")).toBe("foo");
   });
 
-  it("when platform === Platform.Portal, backendEndpoint is udefined", () => {
+  it("when platform === Platform.Portal, backendEndpoint is udefined ", () => {
     expect(getExtensionEndpoint(Platform.Portal, undefined)).toBe("");
   });
 
-  it("when platform === Platform.Portal, backendEndpoint === ''", () => {
+  it("when platform === Platform.Portal, backendEndpoint === '' ", () => {
     expect(getExtensionEndpoint(Platform.Portal, "")).toBe("");
   });
 
@@ -200,7 +200,7 @@ describe("getExtensionEndpoint", () => {
     expect(getExtensionEndpoint(Platform.Portal, null)).toBe("");
   });
 
-  it("when platform !== Platform.Portal, backendEndpoint != ''", () => {
+  it("when platform !== Platform.Portal, backendEndpoint != '' ", () => {
     expect(getExtensionEndpoint(Platform.Portal, "foo")).toBe("foo");
   });
 });