fixes for lint and compilation errors

Update PanelContainerComponent.tsx
2026-01-07 19:46:53 +00:00 · 2024-01-02 23:05:06 +05:30 · 2024-01-02 23:00:35 +05:30 · 2024-01-02 22:52:22 +05:30 · 2024-01-02 22:34:56 +05:30
53 changed files with 5166 additions and 951 deletions
--- a/less/Common/Constants.less
+++ b/less/Common/Constants.less
@@ -147,7 +147,6 @@

 // CommandBar
@CommandBarButtonHeight: 40px;
-@FabricCommandBarButtonHeight: 34px;

 /**********************************************************************************
                              Portal Consts
@@ -165,7 +164,7 @@
@FabricFont: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;

@FabricBoxBorderRadius: 8px;
-@FabricBoxBorderShadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
+@FabricBoxBorderShadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
@FabricBoxMargin: 4px 3px 4px 3px;

@FabricAccentMediumHigh: #0c695a;
--- a/less/documentDB.less
+++ b/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 {
--- a/less/documentDBFabric.less
+++ b/less/documentDBFabric.less
@@ -47,15 +47,11 @@ a:focus {
  border-radius: @FabricBoxBorderRadius;
  box-shadow: @FabricBoxBorderShadow;
  margin: @FabricBoxMargin;
-  margin-top: 0px;
  padding-top: 2px;
-  padding: 0px;
-  height: 40px;
 }

 .dividerContainer {
  padding: @SmallSpace 0px @SmallSpace 0px;
-  height: @FabricCommandBarButtonHeight;
  .flex-display();

  span {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -55,8 +55,8 @@
    "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",
@@ -71,14 +71,13 @@
    "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",
    "ms": "2.1.3",
-    "patch-package": "8.0.0",
    "p-retry": "4.6.2",
    "plotly.js-cartesian-dist-min": "1.52.3",
    "post-robot": "10.0.42",
@@ -115,14 +114,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",
@@ -191,7 +187,6 @@
    "webpack-dev-server": "4.15.1"
  },
  "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 +233,4 @@
    "printWidth": 120,
    "endOfLine": "auto"
  }
-}
+}
--- a/patches/datatables.net-colreorder+1.7.0.patch
+++ b/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);
- 
- 			/**
--- a/src/Common/CosmosClient.ts
+++ b/src/Common/CosmosClient.ts
@@ -40,10 +40,9 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
      case Cosmos.ResourceType.item:
      case Cosmos.ResourceType.pkranges:
        // User resource tokens
-        // TODO userContext.fabricContext.databaseConnectionInfo can be undefined
        headers[HttpHeaders.msDate] = new Date().toUTCString();
-        const resourceTokens = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
-        checkDatabaseResourceTokensValidity(userContext.fabricContext.databaseConnectionInfo.resourceTokensTimestamp);
+        const resourceTokens = userContext.fabricDatabaseConnectionInfo.resourceTokens;
+        checkDatabaseResourceTokensValidity(userContext.fabricDatabaseConnectionInfo.resourceTokensTimestamp);
        return getAuthorizationTokenUsingResourceTokens(resourceTokens, requestInfo.path, requestInfo.resourceId);

      case Cosmos.ResourceType.none:
@@ -52,11 +51,9 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
      case Cosmos.ResourceType.user:
      case Cosmos.ResourceType.permission:
        // User master tokens
-        const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(
-          MessageTypes.GetAuthorizationToken,
-          [requestInfo],
-          userContext.fabricContext.connectionId,
-        );
+        const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(MessageTypes.GetAuthorizationToken, [
+          requestInfo,
+        ]);
        console.log("Response from Fabric: ", authorizationToken);
        headers[HttpHeaders.msDate] = authorizationToken.XDate;
        return decodeURIComponent(authorizationToken.PrimaryReadWriteToken);
--- a/src/Common/MessageHandler.ts
+++ b/src/Common/MessageHandler.ts
@@ -27,24 +27,15 @@ export function handleCachedDataMessage(message: any): void {
  runGarbageCollector();
 }

-/**
- *
- * @param messageType
- * @param params
- * @param scope Use this string to identify request Useful to distinguish response from different senders
- * @param timeoutInMs
- * @returns
- */
 export function sendCachedDataMessage<TResponseDataModel>(
  messageType: MessageTypes,
  params: Object[],
-  scope?: string,
  timeoutInMs?: number,
 ): Q.Promise<TResponseDataModel> {
  let cachedDataPromise: CachedDataPromise<TResponseDataModel> = {
    deferred: Q.defer<TResponseDataModel>(),
    startTime: new Date(),
-    id: _.uniqueId(scope),
+    id: _.uniqueId(),
  };
  RequestMap[cachedDataPromise.id] = cachedDataPromise;
  sendMessage({ type: messageType, params: params, id: cachedDataPromise.id });
@@ -56,10 +47,6 @@ export function sendCachedDataMessage<TResponseDataModel>(
  );
 }

-/**
- *
- * @param data Overwrite the data property of the message
- */
 export function sendMessage(data: any): void {
  _sendMessage({
    signature: "pcIframe",
--- a/src/Common/dataAccess/readCollections.ts
+++ b/src/Common/dataAccess/readCollections.ts
@@ -18,13 +18,13 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co

  if (
    configContext.platform === Platform.Fabric &&
-    userContext.fabricContext &&
-    userContext.fabricContext.databaseConnectionInfo.databaseId === databaseId
+    userContext.fabricDatabaseConnectionInfo &&
+    userContext.fabricDatabaseConnectionInfo.databaseId === databaseId
  ) {
    const collections: DataModels.Collection[] = [];
    const promises: Promise<ContainerResponse>[] = [];

-    for (const collectionResourceId in userContext.fabricContext.databaseConnectionInfo.resourceTokens) {
+    for (const collectionResourceId in userContext.fabricDatabaseConnectionInfo.resourceTokens) {
      // Dictionary key looks like this: dbs/SampleDB/colls/Container
      const resourceIdObj = collectionResourceId.split("/");
      const tokenDatabaseId = resourceIdObj[1];
--- a/src/Common/dataAccess/readDatabases.ts
+++ b/src/Common/dataAccess/readDatabases.ts
@@ -14,8 +14,8 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
  let databases: DataModels.Database[];
  const clearMessage = logConsoleProgress(`Querying databases`);

-  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.databaseConnectionInfo.resourceTokens) {
-    const tokensData = userContext.fabricContext.databaseConnectionInfo;
+  if (configContext.platform === Platform.Fabric && userContext.fabricDatabaseConnectionInfo?.resourceTokens) {
+    const tokensData = userContext.fabricDatabaseConnectionInfo;

    const databaseIdsSet = new Set<string>(); // databaseId

--- a/src/Contracts/DataExplorerMessagesContract.ts
+++ b/src/Contracts/DataExplorerMessagesContract.ts
@@ -1,42 +0,0 @@
-import { MessageTypes } from "./MessageTypes";
-
-// This is the current version of these messages
-export const DATA_EXPLORER_RPC_VERSION = "2";
-
-// Data Explorer to Fabric
-
-// TODO Remove when upgrading to Fabric v2
-export type DataExploreMessageV1 =
-  | "ready"
-  | {
-      type: MessageTypes.GetAuthorizationToken;
-      id: string;
-      params: GetCosmosTokenMessageOptions[];
-    }
-  | {
-      type: MessageTypes.GetAllResourceTokens;
-      id: string;
-    };
-// -----------------------------
-
-export type DataExploreMessageV2 =
-  | {
-      type: MessageTypes.Ready;
-      id: string;
-      params: [string]; // version
-    }
-  | {
-      type: MessageTypes.GetAuthorizationToken;
-      id: string;
-      params: GetCosmosTokenMessageOptions[];
-    }
-  | {
-      type: MessageTypes.GetAllResourceTokens;
-      id: string;
-    };
-
-export type GetCosmosTokenMessageOptions = {
-  verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";
-  resourceType: "" | "dbs" | "colls" | "docs" | "sprocs" | "pkranges";
-  resourceId: string;
-};
--- a/src/Contracts/FabricMessagesContract.ts
+++ b/src/Contracts/FabricMessagesContract.ts
@@ -1,12 +1,6 @@
-import { AuthorizationToken } from "./MessageTypes";
+import { AuthorizationToken, MessageTypes } from "./MessageTypes";

-// This is the version of these messages
-export const FABRIC_RPC_VERSION = "2";
-
-// Fabric to Data Explorer
-
-// TODO Deprecated. Remove this section once DE is updated
-export type FabricMessageV1 =
+export type FabricMessage =
  | {
      type: "newContainer";
      databaseName: string;
@@ -32,52 +26,38 @@ export type FabricMessageV1 =
  | {
      type: "allResourceTokens";
      message: {
-        id: string;
-        error: string | undefined;
        endpoint: string | undefined;
        databaseId: string | undefined;
        resourceTokens: unknown | undefined;
        resourceTokensTimestamp: number | undefined;
      };
    };
-// -----------------------------

-export type FabricMessageV2 =
+export type DataExploreMessage =
+  | "ready"
  | {
-      type: "newContainer";
-      databaseName: string;
+      type: MessageTypes.TelemetryInfo;
+      data: {
+        action: "LoadDatabases";
+        actionModifier: "success" | "start";
+        defaultExperience: "SQL";
+      };
    }
  | {
-      type: "initialize";
-      version: string;
+      type: MessageTypes.GetAuthorizationToken;
      id: string;
-      message: {
-        connectionId: string;
-      };
+      params: GetCosmosTokenMessageOptions[];
    }
  | {
-      type: "authorizationToken";
-      message: {
-        id: string;
-        error: string | undefined;
-        data: AuthorizationToken | undefined;
-      };
-    }
-  | {
-      type: "allResourceTokens_v2";
-      message: {
-        id: string;
-        error: string | undefined;
-        data: FabricDatabaseConnectionInfo | undefined;
-      };
-    }
-  | {
-      type: "setToolbarStatus";
-      message: {
-        visible: boolean;
-      };
+      type: MessageTypes.GetAllResourceTokens;
    };

+export type GetCosmosTokenMessageOptions = {
+  verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";
+  resourceType: "" | "dbs" | "colls" | "docs" | "sprocs" | "pkranges";
+  resourceId: string;
+};
+
 export type CosmosDBTokenResponse = {
  token: string;
  date: string;
@@ -86,9 +66,12 @@ export type CosmosDBTokenResponse = {
 export type CosmosDBConnectionInfoResponse = {
  endpoint: string;
  databaseId: string;
-  resourceTokens: { [resourceId: string]: string };
+  resourceTokens: unknown;
 };

-export interface FabricDatabaseConnectionInfo extends CosmosDBConnectionInfoResponse {
+export interface FabricDatabaseConnectionInfo {
+  endpoint: string;
+  databaseId: string;
+  resourceTokens: { [resourceId: string]: string };
  resourceTokensTimestamp: number;
 }
--- a/src/Contracts/MessageTypes.ts
+++ b/src/Contracts/MessageTypes.ts
@@ -1,12 +1,6 @@
 /**
 * Messaging types used with Data Explorer <-> Portal communication,
 * Hosted <-> Explorer communication and Data Explorer -> Fabric communication.
- *
- * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
- * WARNING: !!!!!!! YOU CAN ONLY ADD NEW TYPES TO THE END OF THIS ENUM !!!!!!!
- * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
- *
- * Enum are integers, so inserting or deleting a type will break the communication.
 */
 export enum MessageTypes {
  TelemetryInfo,
@@ -43,9 +37,10 @@ export enum MessageTypes {
  DisplayNPSSurvey,
  OpenVCoreMongoNetworkingBlade,
  OpenVCoreMongoConnectionStringsBlade,
-  GetAuthorizationToken, // Data Explorer -> Fabric
-  GetAllResourceTokens, // Data Explorer -> Fabric
-  Ready, // Data Explorer -> Fabric
+
+  // Data Explorer -> Fabric communication
+  GetAuthorizationToken,
+  GetAllResourceTokens,
 }

 export interface AuthorizationToken {
--- a/src/Definitions/datatables.d.ts
+++ b/src/Definitions/datatables.d.ts
--- a/src/Definitions/jquery-typescript.d.ts
+++ b/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;
--- a/src/Definitions/jquery-ui.d.ts
+++ b/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 //////////////////////////////////////////////////
--- a/src/Definitions/jquery.d.ts
+++ b/src/Definitions/jquery.d.ts
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx
+++ b/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)");
  });
 });
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/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}
@@ -276,12 +276,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
            </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}
            />
--- a/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
@@ -678,7 +678,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
          role="radiogroup"
        >
          <input
-            aria-label="Container throughput (autoscale) Autoscale"
+            aria-label="Autoscale database throughput"
            aria-required={true}
            checked={true}
            className="throughputInputRadioBtn"
@@ -695,7 +695,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"
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -3,10 +3,9 @@ import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
 import { sendMessage } from "Common/MessageHandler";
 import { Platform, configContext } from "ConfigContext";
 import { MessageTypes } from "Contracts/ExplorerContracts";
-import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
+import { getCopilotEnabled } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { IGalleryItem } from "Juno/JunoClient";
-import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
+import { requestDatabaseResourceTokens } from "Platform/Fabric/FabricUtil";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointValidation";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as ko from "knockout";
@@ -277,32 +276,21 @@ export default class Explorer {
    const NINETY_DAYS_IN_MS = 7776000000;
    const ONE_DAY_IN_MS = 86400000;
    const THREE_DAYS_IN_MS = 259200000;
+    const isAccountNewerThanNinetyDays = isAccountNewerThanThresholdInMs(
+      userContext.databaseAccount?.systemData?.createdAt || "",
+      NINETY_DAYS_IN_MS,
+    );
    const lastSubmitted: string = localStorage.getItem("lastSubmitted");
-    Logger.logInfo(`NPS Survey last shown date: ${lastSubmitted}`, "Explorer/openNPSSurveyDialog");

    if (lastSubmitted !== null) {
-      Logger.logInfo(`NPS Survey last shown is not empty ${lastSubmitted}`, "Explorer/openNPSSurveyDialog");
-
      let lastSubmittedDate: number = parseInt(lastSubmitted);
-      Logger.logInfo(`NPS Survey last shown is parsed ${lastSubmittedDate.toString()}`, "Explorer/openNPSSurveyDialog");
-
      if (isNaN(lastSubmittedDate)) {
-        Logger.logInfo(
-          `NPS Survey last shown is not a number ${lastSubmittedDate.toString()}`,
-          "Explorer/openNPSSurveyDialog",
-        );
        lastSubmittedDate = 0;
      }

      const nowMs: number = Date.now();
-      Logger.logInfo(`NPS Survey current date ${nowMs.toString()}`, "Explorer/openNPSSurveyDialog");
-
      const millisecsSinceLastSubmitted = nowMs - lastSubmittedDate;
      if (millisecsSinceLastSubmitted < NINETY_DAYS_IN_MS) {
-        Logger.logInfo(
-          `NPS Survey last shown is less than ninety days ${millisecsSinceLastSubmitted.toString()}`,
-          "Explorer/openNPSSurveyDialog",
-        );
        return;
      }
    }
@@ -310,32 +298,26 @@ export default class Explorer {
    // Try Cosmos DB subscription - survey shown to 100% of users at day 1 in Data Explorer.
    if (userContext.isTryCosmosDBSubscription) {
      if (isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", ONE_DAY_IN_MS)) {
-        Logger.logInfo(
-          `Displaying NPS Survey for Try Cosmos DB ${userContext.apiType}`,
-          "Explorer/openNPSSurveyDialog",
-        );
        this.sendNPSMessage();
      }
    } else {
-      // Show survey when an existing account is older than 3 days
+      // An existing account is older than 3 days but less than 90 days old. For existing account show to 100% of users in Data Explorer.
      if (
-        !isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", THREE_DAYS_IN_MS)
+        !isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", THREE_DAYS_IN_MS) &&
+        isAccountNewerThanNinetyDays
      ) {
-        Logger.logInfo(
-          `Displaying NPS Survey for users with existing ${userContext.apiType} account older than 3 days`,
-          "Explorer/openNPSSurveyDialog",
-        );
        this.sendNPSMessage();
+      } else {
+        // An existing account is greater than 90 days. For existing account show to random 33% of users in Data Explorer.
+        if (this.getRandomInt(100) < 33) {
+          this.sendNPSMessage();
+        }
      }
    }
  }

  private sendNPSMessage() {
    sendMessage({ type: MessageTypes.DisplayNPSSurvey });
-    Logger.logInfo(
-      `NPS Survey logging current date when survey is shown ${Date.now().toString()}`,
-      "Explorer/openNPSSurveyDialog",
-    );
    localStorage.setItem("lastSubmitted", Date.now().toString());
  }

@@ -401,7 +383,9 @@ export default class Explorer {

  public onRefreshResourcesClick = (): void => {
    if (configContext.platform === Platform.Fabric) {
-      scheduleRefreshDatabaseResourceToken(true).then(() => this.refreshAllDatabases());
+      // Requesting the tokens will trigger a refresh of the databases
+      // TODO: Once the id is returned from Fabric, we can await this call and then refresh the databases here
+      requestDatabaseResourceTokens();
      return;
    }

@@ -1405,18 +1389,9 @@ export default class Explorer {
    if (userContext.apiType !== "SQL" || !userContext.subscriptionId) {
      return;
    }
-    const copilotEnabledPromise = getCopilotEnabled();
-    const copilotUserDBEnabledPromise = isCopilotFeatureRegistered(userContext.subscriptionId);
-    const [copilotEnabled, copilotUserDBEnabled] = await Promise.all([
-      copilotEnabledPromise,
-      copilotUserDBEnabledPromise,
-    ]);
-    const copilotSampleDBEnabled = LocalStorageUtility.getEntryString(StorageKey.CopilotSampleDBEnabled) === "true";
-    useQueryCopilot.getState().setCopilotEnabled(copilotEnabled && copilotUserDBEnabled);
-    useQueryCopilot.getState().setCopilotUserDBEnabled(copilotUserDBEnabled);
-    useQueryCopilot
-      .getState()
-      .setCopilotSampleDBEnabled(copilotEnabled && copilotUserDBEnabled && copilotSampleDBEnabled);
+    const copilotEnabled = await getCopilotEnabled();
+    useQueryCopilot.getState().setCopilotEnabled(copilotEnabled);
+    useQueryCopilot.getState().setCopilotUserDBEnabled(copilotEnabled);
  }

  public async refreshSampleData(): Promise<void> {
--- a/src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
+++ b/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({
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
@@ -24,21 +24,16 @@ interface Props {
 export interface CommandBarStore {
  contextButtons: CommandButtonComponentProps[];
  setContextButtons: (contextButtons: CommandButtonComponentProps[]) => void;
-  isHidden: boolean;
-  setIsHidden: (isHidden: boolean) => void;
 }

 export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
  contextButtons: [],
  setContextButtons: (contextButtons: CommandButtonComponentProps[]) => set((state) => ({ ...state, contextButtons })),
-  isHidden: false,
-  setIsHidden: (isHidden: boolean) => set((state) => ({ ...state, isHidden })),
 }));

 export const CommandBar: React.FC<Props> = ({ container }: Props) => {
  const selectedNodeState = useSelectedNode();
  const buttons = useCommandBar((state) => state.contextButtons);
-  const isHidden = useCommandBar((state) => state.isHidden);
  const backgroundColor = StyleConstants.BaseLight;

  if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
@@ -47,7 +42,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
        ? CommandBarComponentButtonFactory.createPostgreButtons(container)
        : CommandBarComponentButtonFactory.createVCoreMongoButtons(container);
    return (
-      <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
+      <div className="commandBarContainer">
        <FluentCommandBar
          ariaLabel="Use left and right arrow keys to navigate between commands"
          items={CommandBarUtil.convertButton(buttons, backgroundColor)}
@@ -96,7 +91,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
      ? {
          root: {
            backgroundColor: "transparent",
-            padding: "2px 8px 0px 8px",
+            padding: "0px 14px 0px 14px",
          },
        }
      : {
@@ -106,7 +101,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
        };

  return (
-    <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
+    <div className="commandBarContainer">
      <FluentCommandBar
        ariaLabel="Use left and right arrow keys to navigate between commands"
        items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/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",
--- a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
@@ -25,10 +25,7 @@ import { MemoryTracker } from "./MemoryTrackerComponent";
 * @param btns
 */
 export const convertButton = (btns: CommandButtonComponentProps[], backgroundColor: string): ICommandBarItemProps[] => {
-  const buttonHeightPx =
-    configContext.platform == Platform.Fabric
-      ? StyleConstants.FabricCommandBarButtonHeight
-      : StyleConstants.CommandBarButtonHeight;
+  const buttonHeightPx = StyleConstants.CommandBarButtonHeight;

  const hoverColor =
    configContext.platform == Platform.Fabric ? StyleConstants.FabricAccentLight : StyleConstants.AccentLight;
@@ -115,7 +112,6 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
          splitButtonContainer: {
            marginLeft: 5,
            marginRight: 5,
-            height: buttonHeightPx,
          },
        },
        className: btn.className,
--- a/src/Explorer/OpenActions/OpenActions.tsx
+++ b/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 />);
  }
 }

--- a/src/Explorer/Panes/PanelContainerComponent.tsx
+++ b/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 }}
      >
@@ -76,7 +76,44 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
    );
  }

+  public isFocusable(element: HTMLElement) {
+    return (
+      element.tabIndex >= 0 ||
+      (element instanceof HTMLAnchorElement && element.href) ||
+      (element instanceof HTMLAreaElement && element.href) ||
+      (element instanceof HTMLInputElement && !element.disabled) ||
+      (element instanceof HTMLSelectElement && !element.disabled) ||
+      (element instanceof HTMLTextAreaElement && !element.disabled) ||
+      (element instanceof HTMLButtonElement && !element.disabled)
+    );
+  }
+  private findFocusableParent = (element: HTMLElement) => {
+    while (element) {
+      if (this.isFocusable(element)) {
+        return element;
+      }
+      element = element.parentNode as HTMLElement;
+    }
+    return null;
+  };
+
  private onDissmiss = (ev?: KeyboardEvent | React.SyntheticEvent<HTMLElement>): void => {
+    const elementIdToFocus = sessionStorage.getItem("focusedElementId") || null;
+    if (elementIdToFocus) {
+      const targetElement = document.getElementById(elementIdToFocus);
+
+      if (targetElement) {
+        const focusableParent = this.findFocusableParent(targetElement);
+        if (focusableParent) {
+          setTimeout(() => {
+            if (focusableParent) {
+              focusableParent.focus();
+            }
+          }, 100);
+          sessionStorage.removeItem("focusedElementId");
+        }
+      }
+    }
    if (ev && (ev.target as HTMLElement).id === "notificationConsoleHeader") {
      ev.preventDefault();
    } else {
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.test.tsx
+++ b/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();
  });
 });
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/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
@@ -85,17 +78,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(
@@ -111,7 +100,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
    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 +139,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
    logConsoleInfo(
      `Updated query setting to ${LocalStorageUtility.getEntryString(StorageKey.SetPartitionKeyUndefined)}`,
    );
-    refreshExplorer && (await explorer.refreshExplorer());
    closeSidePanel();
  };

@@ -231,12 +218,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
    }
  };

-  const handleSampleDatabaseChange = async (ev: React.MouseEvent<HTMLElement>, checked?: boolean): Promise<void> => {
-    setCopilotSampleDBEnabled(checked);
-    useQueryCopilot.getState().setCopilotSampleDBEnabled(checked);
-    setRefreshExplorer(!refreshExplorer);
-  };
-
  const choiceButtonStyles = {
    root: {
      clear: "both",
@@ -453,7 +434,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
          </div>
        </div>
        <div className="settingsSection">
-          <div className="settingsSectionPart settingsSectionInlineCheckbox">
+          <div className="settingsSectionPart">
            <div className="settingsSectionLabel">
              Enable container pagination
              <InfoTooltip>
@@ -473,7 +454,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 +545,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>
--- a/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
@@ -274,7 +274,7 @@ exports[`Settings Pane should render Default properly 1`] = `
      className="settingsSection"
    >
      <div
-        className="settingsSectionPart settingsSectionInlineCheckbox"
+        className="settingsSectionPart"
      >
        <div
          className="settingsSectionLabel"
@@ -303,7 +303,7 @@ exports[`Settings Pane should render Default properly 1`] = `
      className="settingsSection"
    >
      <div
-        className="settingsSectionPart settingsSectionInlineCheckbox"
+        className="settingsSectionPart"
      >
        <div
          className="settingsSectionLabel"
@@ -521,7 +521,7 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
      className="settingsSection"
    >
      <div
-        className="settingsSectionPart settingsSectionInlineCheckbox"
+        className="settingsSectionPart"
      >
        <div
          className="settingsSectionLabel"
--- a/src/Explorer/Panes/snapshots/PanelContainerComponent.test.tsx.snap
+++ b/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}
--- a/src/Explorer/QueryCopilot/Popup/CopyPopup.tsx
+++ b/src/Explorer/QueryCopilot/Popup/CopyPopup.tsx
@@ -15,7 +15,6 @@ export const CopyPopup = ({

  return showCopyPopup ? (
    <Stack
-      role="status"
      style={{
        position: "fixed",
        width: 345,
--- a/src/Explorer/QueryCopilot/Popup/snapshots/CopyPopup.test.tsx.snap
+++ b/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",
--- a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
@@ -303,29 +303,15 @@ 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();
    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 } }}
@@ -362,7 +348,6 @@ 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"
        />
        {copilotTeachingBubbleVisible && (
          <TeachingBubble
@@ -392,11 +377,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" } }}
@@ -502,7 +484,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 && (
@@ -570,7 +552,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);
@@ -590,7 +571,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
              setDislikeQuery(!dislikeQuery);
              setShowCallout(false);
            }}
-            aria-label="Dislike"
          />
          <Separator vertical style={{ color: "#EDEBE9" }} />
          <CommandBarButton
--- a/src/Explorer/QueryCopilot/Shared/QueryCopilotClient.ts
+++ b/src/Explorer/QueryCopilot/Shared/QueryCopilotClient.ts
@@ -15,12 +15,7 @@ import { MinimalQueryIterator } from "Common/IteratorUtilities";
 import { createUri } from "Common/UrlUtility";
 import { queryDocumentsPage } from "Common/dataAccess/queryDocumentsPage";
 import { configContext } from "ConfigContext";
-import {
-  ContainerConnectionInfo,
-  CopilotEnabledConfiguration,
-  FeatureRegistration,
-  IProvisionData,
-} from "Contracts/DataModels";
+import { ContainerConnectionInfo, CopilotEnabledConfiguration, IProvisionData } from "Contracts/DataModels";
 import { AuthorizationTokenHeaderMetadata, QueryResults } from "Contracts/ViewModels";
 import { useDialog } from "Explorer/Controls/Dialog";
 import Explorer from "Explorer/Explorer";
@@ -57,28 +52,6 @@ async function fetchWithTimeout(
  return response;
 }

-export const isCopilotFeatureRegistered = async (subscriptionId: string): Promise<boolean> => {
-  const api_version = "2021-07-01";
-  const url = `${configContext.ARM_ENDPOINT}/subscriptions/${subscriptionId}/providers/Microsoft.Features/featureProviders/Microsoft.DocumentDB/subscriptionFeatureRegistrations/MicrosoftCopilotForAzureInCDB?api-version=${api_version}`;
-  const authorizationHeader: AuthorizationTokenHeaderMetadata = getAuthorizationHeader();
-  const headers = { [authorizationHeader.header]: authorizationHeader.token };
-
-  let response;
-
-  try {
-    response = await fetchWithTimeout(url, headers);
-  } catch (error) {
-    return false;
-  }
-
-  if (!response?.ok) {
-    return false;
-  }
-
-  const featureRegistration = (await response?.json()) as FeatureRegistration;
-  return featureRegistration?.properties?.state === "Registered";
-};
-
 export const getCopilotEnabled = async (): Promise<boolean> => {
  const url = `${configContext.BACKEND_ENDPOINT}/api/portalsettings/querycopilot`;
  const authorizationHeader: AuthorizationTokenHeaderMetadata = getAuthorizationHeader();
--- a/src/Explorer/QueryCopilot/V2/Footer/snapshots/Footer.test.tsx.snap
+++ b/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",
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/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 && useQueryCopilot.getState().copilotSampleDBEnabled && (
-              <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"}
--- a/src/Explorer/Tables/DataTable/DataTableBindingManager.ts
+++ b/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;
--- a/src/Explorer/Tables/DataTable/DataTableBuilder.ts
+++ b/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
--- a/src/Explorer/Tables/DataTable/DataTableOperationManager.ts
+++ b/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 (
--- a/src/Explorer/Tables/DataTable/DataTableOperations.ts
+++ b/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
--- a/src/Explorer/Tables/DataTable/DataTableViewModel.ts
+++ b/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;
--- a/src/Explorer/Tables/DataTable/TableEntityListViewModel.ts
+++ b/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;
--- a/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
+++ b/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();
  };

--- a/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx
+++ b/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();
--- a/src/Explorer/Tables/TableDataClient.ts
+++ b/src/Explorer/Tables/TableDataClient.ts
@@ -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) => {
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -224,6 +224,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
  };

  public onSaveQueryClick = (): void => {
+    sessionStorage.setItem("focusedElementId", "savequery");
    useSidePanel.getState().openSidePanel("Save Query", <SaveQueryPane explorer={this.props.collection.container} />);
  };

@@ -394,6 +395,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
      const label = "Save Query";
      buttons.push({
        iconSrc: SaveQueryIcon,
+        id: "savequery",
        iconAlt: label,
        onCommandClick: this.onSaveQueryClick,
        commandButtonLabel: label,
@@ -444,7 +446,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
          this._toggleCopilot(!this.state.copilotActive);
        },
        commandButtonLabel: this.state.copilotActive ? "Disable Copilot" : "Enable Copilot",
-        ariaLabel: this.state.copilotActive ? "Disable Copilot" : "Enable Copilot",
+        ariaLabel: "Copilot",
        hasPopup: false,
      };
      buttons.push(toggleCopilotButton);
--- a/src/Explorer/Tree/ResourceTree.tsx
+++ b/src/Explorer/Tree/ResourceTree.tsx
@@ -769,10 +769,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc

  const dataRootNode = buildDataTree();
  const isSampleDataEnabled =
-    useQueryCopilot().copilotEnabled &&
-    useQueryCopilot().copilotSampleDBEnabled &&
-    userContext.sampleDataConnectionInfo &&
-    userContext.apiType === "SQL";
+    useQueryCopilot().copilotEnabled && userContext.sampleDataConnectionInfo && userContext.apiType === "SQL";
  const sampleDataResourceTokenCollection = useDatabases((state) => state.sampleDataResourceTokenCollection);

  return (
--- a/src/Platform/Fabric/FabricUtil.ts
+++ b/src/Platform/Fabric/FabricUtil.ts
@@ -1,44 +1,33 @@
 import { sendCachedDataMessage } from "Common/MessageHandler";
-import { FabricDatabaseConnectionInfo } from "Contracts/FabricMessagesContract";
+import { FabricDatabaseConnectionInfo } from "Contracts/FabricContract";
 import { MessageTypes } from "Contracts/MessageTypes";
-import { updateUserContext, userContext } from "UserContext";
-import { logConsoleError } from "Utils/NotificationConsoleUtils";
+import Explorer from "Explorer/Explorer";
+import { updateUserContext } from "UserContext";

 const TOKEN_VALIDITY_MS = (3600 - 600) * 1000; // 1 hour minus 10 minutes to be safe
-const DEBOUNCE_DELAY_MS = 1000 * 20; // 20 second
 let timeoutId: NodeJS.Timeout;

-// Prevents multiple parallel requests during DEBOUNCE_DELAY_MS
-let lastRequestTimestamp: number = undefined;
+// Prevents multiple parallel requests
+let isRequestPending = false;

-const requestDatabaseResourceTokens = async (): Promise<void> => {
-  if (lastRequestTimestamp !== undefined && lastRequestTimestamp + DEBOUNCE_DELAY_MS > Date.now()) {
+export const requestDatabaseResourceTokens = (): void => {
+  if (isRequestPending) {
    return;
  }

-  lastRequestTimestamp = Date.now();
-  try {
-    const fabricDatabaseConnectionInfo = await sendCachedDataMessage<FabricDatabaseConnectionInfo>(
-      MessageTypes.GetAllResourceTokens,
-      [],
-      userContext.fabricContext.connectionId,
-    );
+  // TODO Make Fabric return the message id so we can handle this promise
+  isRequestPending = true;
+  sendCachedDataMessage<FabricDatabaseConnectionInfo>(MessageTypes.GetAllResourceTokens, []);
+};

-    if (!userContext.databaseAccount.properties.documentEndpoint) {
-      userContext.databaseAccount.properties.documentEndpoint = fabricDatabaseConnectionInfo.endpoint;
-    }
-
-    updateUserContext({
-      fabricContext: { ...userContext.fabricContext, databaseConnectionInfo: fabricDatabaseConnectionInfo },
-      databaseAccount: { ...userContext.databaseAccount },
-    });
-    scheduleRefreshDatabaseResourceToken();
-  } catch (error) {
-    logConsoleError(error);
-    throw error;
-  } finally {
-    lastRequestTimestamp = undefined;
-  }
+export const handleRequestDatabaseResourceTokensResponse = (
+  explorer: Explorer,
+  fabricDatabaseConnectionInfo: FabricDatabaseConnectionInfo,
+): void => {
+  isRequestPending = false;
+  updateUserContext({ fabricDatabaseConnectionInfo });
+  scheduleRefreshDatabaseResourceToken();
+  explorer.refreshAllDatabases();
 };

 /**
@@ -46,24 +35,19 @@ const requestDatabaseResourceTokens = async (): Promise<void> => {
 * @param tokenTimestamp
 * @returns
 */
-export const scheduleRefreshDatabaseResourceToken = (refreshNow?: boolean): Promise<void> => {
-  return new Promise((resolve) => {
-    if (timeoutId !== undefined) {
-      clearTimeout(timeoutId);
-      timeoutId = undefined;
-    }
+export const scheduleRefreshDatabaseResourceToken = (): void => {
+  if (timeoutId !== undefined) {
+    clearTimeout(timeoutId);
+    timeoutId = undefined;
+  }

-    timeoutId = setTimeout(
-      () => {
-        requestDatabaseResourceTokens().then(resolve);
-      },
-      refreshNow ? 0 : TOKEN_VALIDITY_MS,
-    );
-  });
+  timeoutId = setTimeout(() => {
+    requestDatabaseResourceTokens();
+  }, TOKEN_VALIDITY_MS);
 };

 export const checkDatabaseResourceTokensValidity = (tokenTimestamp: number): void => {
  if (tokenTimestamp + TOKEN_VALIDITY_MS < Date.now()) {
-    scheduleRefreshDatabaseResourceToken(true);
+    requestDatabaseResourceTokens();
  }
 };
--- a/src/Shared/StorageUtility.ts
+++ b/src/Shared/StorageUtility.ts
@@ -11,7 +11,6 @@ export enum StorageKey {
  MaxWaitTimeInSeconds,
  AutomaticallyCancelQueryAfterTimeout,
  ContainerPaginationEnabled,
-  CopilotSampleDBEnabled,
  CustomItemPerPage,
  DatabaseAccountId,
  EncryptedKeyToken,
--- a/src/UserContext.ts
+++ b/src/UserContext.ts
@@ -1,4 +1,4 @@
-import { FabricDatabaseConnectionInfo } from "Contracts/FabricMessagesContract";
+import { FabricDatabaseConnectionInfo } from "Contracts/FabricContract";
 import { ParsedResourceTokenConnectionString } from "Platform/Hosted/Helpers/ResourceTokenUtils";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
@@ -47,13 +47,8 @@ export interface VCoreMongoConnectionParams {
  connectionString: string;
 }

-interface FabricContext {
-  connectionId: string;
-  databaseConnectionInfo: FabricDatabaseConnectionInfo | undefined;
-}
-
 interface UserContext {
-  readonly fabricContext?: FabricContext;
+  readonly fabricDatabaseConnectionInfo?: FabricDatabaseConnectionInfo;
  readonly authType?: AuthType;
  readonly masterKey?: string;
  readonly subscriptionId?: string;
--- a/src/hooks/useKnockoutExplorer.ts
+++ b/src/hooks/useKnockoutExplorer.ts
@@ -1,10 +1,11 @@
 import { createUri } from "Common/UrlUtility";
-import { DATA_EXPLORER_RPC_VERSION } from "Contracts/DataExplorerMessagesContract";
-import { FABRIC_RPC_VERSION, FabricMessageV2 } from "Contracts/FabricMessagesContract";
+import { FabricDatabaseConnectionInfo, FabricMessage } from "Contracts/FabricContract";
 import Explorer from "Explorer/Explorer";
-import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import { useSelectedNode } from "Explorer/useSelectedNode";
-import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
+import {
+  handleRequestDatabaseResourceTokensResponse,
+  scheduleRefreshDatabaseResourceToken,
+} from "Platform/Fabric/FabricUtil";
 import { getNetworkSettingsWarningMessage } from "Utils/NetworkUtility";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
@@ -87,9 +88,6 @@ export function useKnockoutExplorer(platform: Platform): Explorer {
 }

 async function configureFabric(): Promise<Explorer> {
-  // These are the versions of Fabric that Data Explorer supports.
-  const SUPPORTED_FABRIC_VERSIONS = [FABRIC_RPC_VERSION];
-
  let explorer: Explorer;
  return new Promise<Explorer>((resolve) => {
    window.addEventListener(
@@ -103,37 +101,38 @@ async function configureFabric(): Promise<Explorer> {
          return;
        }

-        const data: FabricMessageV2 = event.data?.data;
+        const data: FabricMessage = event.data?.data;
        if (!data) {
          return;
        }

        switch (data.type) {
          case "initialize": {
-            const fabricVersion = data.version;
-            if (!SUPPORTED_FABRIC_VERSIONS.includes(fabricVersion)) {
-              // TODO Surface error to user
-              console.error(`Unsupported Fabric version: ${fabricVersion}`);
-              return;
-            }
-
-            explorer = createExplorerFabric(data.message);
-            await scheduleRefreshDatabaseResourceToken(true);
+            const fabricDatabaseConnectionInfo: FabricDatabaseConnectionInfo = {
+              endpoint: data.message.endpoint,
+              databaseId: data.message.databaseId,
+              resourceTokens: data.message.resourceTokens as { [resourceId: string]: string },
+              resourceTokensTimestamp: data.message.resourceTokensTimestamp,
+            };
+            explorer = await createExplorerFabric(fabricDatabaseConnectionInfo);
            resolve(explorer);
-            await explorer.refreshAllDatabases();
-            openFirstContainer(explorer, userContext.fabricContext.databaseConnectionInfo.databaseId);
+
+            explorer.refreshAllDatabases().then(() => {
+              openFirstContainer(explorer, fabricDatabaseConnectionInfo.databaseId);
+            });
+            scheduleRefreshDatabaseResourceToken();
            break;
          }
          case "newContainer":
            explorer.onNewCollectionClicked();
            break;
-          case "authorizationToken":
-          case "allResourceTokens_v2": {
+          case "authorizationToken": {
            handleCachedDataMessage(data);
            break;
          }
-          case "setToolbarStatus": {
-            useCommandBar.getState().setIsHidden(data.message.visible === false);
+          case "allResourceTokens": {
+            // TODO call handleCachedDataMessage when Fabric echoes message id back
+            handleRequestDatabaseResourceTokensResponse(explorer, data.message as FabricDatabaseConnectionInfo);
            break;
          }
          default:
@@ -144,11 +143,7 @@ async function configureFabric(): Promise<Explorer> {
      false,
    );

-    sendMessage({
-      type: MessageTypes.Ready,
-      id: "ready",
-      params: [DATA_EXPLORER_RPC_VERSION],
-    });
+    sendReadyMessage();
  });
 }

@@ -324,12 +319,9 @@ function configureHostedWithResourceToken(config: ResourceToken): Explorer {
  return explorer;
 }

-function createExplorerFabric(params: { connectionId: string }): Explorer {
+function createExplorerFabric(fabricDatabaseConnectionInfo: FabricDatabaseConnectionInfo): Explorer {
  updateUserContext({
-    fabricContext: {
-      connectionId: params.connectionId,
-      databaseConnectionInfo: undefined,
-    },
+    fabricDatabaseConnectionInfo,
    authType: AuthType.ConnectionString,
    databaseAccount: {
      id: "",
@@ -338,7 +330,7 @@ function createExplorerFabric(params: { connectionId: string }): Explorer {
      name: "Mounted",
      kind: AccountKind.Default,
      properties: {
-        documentEndpoint: undefined,
+        documentEndpoint: fabricDatabaseConnectionInfo.endpoint,
      },
    },
  });
--- a/src/hooks/useQueryCopilot.ts
+++ b/src/hooks/useQueryCopilot.ts
@@ -10,7 +10,6 @@ import { ContainerInfo } from "../Contracts/DataModels";
 export interface QueryCopilotState {
  copilotEnabled: boolean;
  copilotUserDBEnabled: boolean;
-  copilotSampleDBEnabled: boolean;
  generatedQuery: string;
  likeQuery: boolean;
  userPrompt: string;
@@ -51,7 +50,6 @@ export interface QueryCopilotState {

  setCopilotEnabled: (copilotEnabled: boolean) => void;
  setCopilotUserDBEnabled: (copilotUserDBEnabled: boolean) => void;
-  setCopilotSampleDBEnabled: (copilotSampleDBEnabled: boolean) => void;
  openFeedbackModal: (generatedQuery: string, likeQuery: boolean, userPrompt: string) => void;
  closeFeedbackModal: () => void;
  setHideFeedbackModalForLikedQueries: (hideFeedbackModalForLikedQueries: boolean) => void;
@@ -98,7 +96,6 @@ type QueryCopilotStore = UseStore<QueryCopilotState>;
 export const useQueryCopilot: QueryCopilotStore = create((set) => ({
  copilotEnabled: false,
  copilotUserDBEnabled: false,
-  copilotSampleDBEnabled: false,
  generatedQuery: "",
  likeQuery: false,
  userPrompt: "",
@@ -107,7 +104,7 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
  correlationId: "",
  query: "SELECT * FROM c",
  selectedQuery: "",
-  isGeneratingQuery: null,
+  isGeneratingQuery: false,
  isGeneratingExplanation: false,
  isExecuting: false,
  dislikeQuery: undefined,
@@ -148,7 +145,6 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({

  setCopilotEnabled: (copilotEnabled: boolean) => set({ copilotEnabled }),
  setCopilotUserDBEnabled: (copilotUserDBEnabled: boolean) => set({ copilotUserDBEnabled }),
-  setCopilotSampleDBEnabled: (copilotSampleDBEnabled: boolean) => set({ copilotSampleDBEnabled }),
  openFeedbackModal: (generatedQuery: string, likeQuery: boolean, userPrompt: string) =>
    set({ generatedQuery, likeQuery, userPrompt, showFeedbackModal: true }),
  closeFeedbackModal: () => set({ showFeedbackModal: false }),
Author	SHA1	Message	Date
Sampath	b38f558248	fixes for lint and compilation errors	2024-01-02 23:05:06 +05:30
Sampath	3c9325ecbc	fixes for lint and compilation errors	2024-01-02 23:00:35 +05:30
MokireddySampath	309fcd112e	Update PanelContainerComponent.tsx	2024-01-02 22:52:22 +05:30
Sampath	eba617f53f	focus management has been done for the save query and close button of dialog	2024-01-02 22:34:56 +05:30