Remove redundant snapshot.

jest.config.js

@@ -174,7 +174,7 @@ module.exports = {
   },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  transformIgnorePatterns: ["/node_modules/(?!@fluentui/react-icons)", "/externals/"],
+  transformIgnorePatterns: ["/node_modules/", "/externals/"],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,

less/documentDBFabric.less

@@ -31,7 +31,6 @@ a:focus {
   margin-top: 0px;
   margin-bottom: 0px;
   background-color: #ffffff;
-  width: auto; // Override width: 100% coming from Allotment
 }
 
 .tabsManagerContainer {

playwright.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
   reporter: process.env.CI ? "blob" : "html",
   timeout: 10 * 60 * 1000,
   use: {
+    actionTimeout: 5 * 60 * 1000,
     trace: "off",
     video: "off",
     screenshot: "on",
@@ -22,8 +23,7 @@ export default defineConfig({
   },
 
   expect: {
-    // Many of our expectations take a little longer than the default 5 seconds.
-    timeout: 15 * 1000,
+    timeout: 5 * 60 * 1000,
   },
 
   projects: [

src/Common/Constants.ts

@@ -134,8 +134,6 @@ export class BackendApi {
   public static readonly GenerateToken: string = "GenerateToken";
   public static readonly PortalSettings: string = "PortalSettings";
   public static readonly AccountRestrictions: string = "AccountRestrictions";
-  public static readonly RuntimeProxy: string = "RuntimeProxy";
-  public static readonly DisallowedLocations: string = "DisallowedLocations";
 }
 
 export class PortalBackendEndpoints {
@@ -185,12 +183,6 @@ export class CassandraProxyAPIs {
   public static readonly connectionStringSchemaApi: string = "api/connectionstring/cassandra/schema";
 }
 
-export class AadEndpoints {
-  public static readonly Prod: string = "https://login.microsoftonline.com/";
-  public static readonly Fairfax: string = "https://login.microsoftonline.us/";
-  public static readonly Mooncake: string = "https://login.partner.microsoftonline.cn/";
-}
-
 export class Queries {
   public static CustomPageOption: string = "custom";
   public static UnlimitedPageOption: string = "unlimited";

src/Common/CosmosClient.ts

@@ -3,16 +3,15 @@ import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizatio
 import { AuthorizationToken } from "Contracts/FabricMessageTypes";
 import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
 import { AuthType } from "../AuthType";
-import { BackendApi, PriorityLevel } from "../Common/Constants";
-import * as Logger from "../Common/Logger";
+import { PriorityLevel } from "../Common/Constants";
 import { Platform, configContext } from "../ConfigContext";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
 import { getErrorMessage } from "./ErrorHandlingUtils";
+import * as Logger from "../Common/Logger";
 
 const _global = typeof self === "undefined" ? window : self;
 
@@ -124,37 +123,6 @@ export async function getTokenFromAuthService(
   verb: string,
   resourceType: string,
   resourceId?: string,
-): Promise<AuthorizationToken> {
-  if (!useNewPortalBackendEndpoint(BackendApi.RuntimeProxy)) {
-    return getTokenFromAuthService_ToBeDeprecated(verb, resourceType, resourceId);
-  }
-
-  try {
-    const host: string = configContext.PORTAL_BACKEND_ENDPOINT;
-    const response: Response = await _global.fetch(host + "/api/connectionstring/runtimeproxy/authorizationtokens", {
-      method: "POST",
-      headers: {
-        "content-type": "application/json",
-        "x-ms-encrypted-auth-token": userContext.accessToken,
-      },
-      body: JSON.stringify({
-        verb,
-        resourceType,
-        resourceId,
-      }),
-    });
-    const result: AuthorizationToken = await response.json();
-    return result;
-  } catch (error) {
-    logConsoleError(`Failed to get authorization headers for ${resourceType}: ${getErrorMessage(error)}`);
-    return Promise.reject(error);
-  }
-}
-
-export async function getTokenFromAuthService_ToBeDeprecated(
-  verb: string,
-  resourceType: string,
-  resourceId?: string,
 ): Promise<AuthorizationToken> {
   try {
     const host = configContext.BACKEND_ENDPOINT;

src/Common/ErrorHandlingUtils.ts

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

src/Common/MongoProxyClient.ts

@@ -550,49 +550,6 @@ export function deleteDocument_ToBeDeprecated(
     });
 }
 
-export function deleteDocuments(
-  databaseId: string,
-  collection: Collection,
-  documentIds: DocumentId[],
-): Promise<{
-  deletedCount: number;
-  isAcknowledged: boolean;
-}> {
-  const { databaseAccount } = userContext;
-  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
-
-  const rids = documentIds.map((documentId) => documentId.id());
-
-  const params = {
-    databaseID: databaseId,
-    collectionID: collection.id(),
-    resourceUrl: `${resourceEndpoint}`,
-    resourceIDs: rids,
-    subscriptionID: userContext.subscriptionId,
-    resourceGroup: userContext.resourceGroup,
-    databaseAccountName: databaseAccount.name,
-  };
-  const endpoint = getFeatureEndpointOrDefault("bulkdelete");
-
-  return window
-    .fetch(`${endpoint}/bulkdelete`, {
-      method: "DELETE",
-      body: JSON.stringify(params),
-      headers: {
-        ...defaultHeaders,
-        ...authHeaders(),
-        [HttpHeaders.contentType]: ContentType.applicationJson,
-      },
-    })
-    .then(async (response) => {
-      if (response.ok) {
-        const result = await response.json();
-        return result;
-      }
-      return await errorHandling(response, "deleting documents", params);
-    });
-}
-
 export function createMongoCollectionWithProxy(
   params: DataModels.CreateCollectionParams,
 ): Promise<DataModels.Collection> {
@@ -720,8 +677,7 @@ export function useMongoProxyEndpoint(api: string): boolean {
     MongoProxyEndpoints.Local,
     MongoProxyEndpoints.Mpac,
     MongoProxyEndpoints.Prod,
-    MongoProxyEndpoints.Fairfax,
-    MongoProxyEndpoints.Mooncake,
+    // MongoProxyEndpoints.Fairfax,
   ];
   let canAccessMongoProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
   if (

src/Common/PortalNotifications.ts

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

src/Common/QueryError.ts

@@ -1,212 +0,0 @@
-import { getErrorMessage } from "Common/ErrorHandlingUtils";
-import { monaco } from "Explorer/LazyMonaco";
-
-export enum QueryErrorSeverity {
-  Error = "Error",
-  Warning = "Warning",
-}
-
-export class QueryErrorLocation {
-  constructor(
-    public start: ErrorPosition,
-    public end: ErrorPosition,
-  ) {}
-}
-
-export class ErrorPosition {
-  constructor(
-    public offset: number,
-    public lineNumber?: number,
-    public column?: number,
-  ) {}
-}
-
-// Maps severities to numbers for sorting.
-const severityMap: Record<QueryErrorSeverity, number> = {
-  Error: 1,
-  Warning: 0,
-};
-
-export function compareSeverity(left: QueryErrorSeverity, right: QueryErrorSeverity): number {
-  return severityMap[left] - severityMap[right];
-}
-
-export function createMonacoErrorLocationResolver(
-  editor: monaco.editor.IStandaloneCodeEditor,
-  selection?: monaco.Selection,
-): (location: { start: number; end: number }) => QueryErrorLocation {
-  return ({ start, end }) => {
-    // Start and end are absolute offsets (character index) in the document.
-    // But we need line numbers and columns for the monaco editor.
-    // To get those, we use the editor's model to convert the offsets to positions.
-    const model = editor.getModel();
-    if (!model) {
-      return new QueryErrorLocation(new ErrorPosition(start), new ErrorPosition(end));
-    }
-
-    // If the error was found in a selection, adjust the start and end positions to be relative to the document.
-    if (selection) {
-      // Get the character index of the start of the selection.
-      const selectionStartOffset = model.getOffsetAt(selection.getStartPosition());
-
-      // Adjust the start and end positions to be relative to the document.
-      start = selectionStartOffset + start;
-      end = selectionStartOffset + end;
-
-      // Now, when we resolve the positions, they will be relative to the document and appear in the correct location.
-    }
-
-    const startPos = model.getPositionAt(start);
-    const endPos = model.getPositionAt(end);
-    return new QueryErrorLocation(
-      new ErrorPosition(start, startPos.lineNumber, startPos.column),
-      new ErrorPosition(end, endPos.lineNumber, endPos.column),
-    );
-  };
-}
-
-export const createMonacoMarkersForQueryErrors = (errors: QueryError[]) => {
-  if (!errors) {
-    return [];
-  }
-
-  return errors
-    .map((error): monaco.editor.IMarkerData => {
-      // Validate that we have what we need to make a marker
-      if (
-        error.location === undefined ||
-        error.location.start === undefined ||
-        error.location.end === undefined ||
-        error.location.start.lineNumber === undefined ||
-        error.location.end.lineNumber === undefined ||
-        error.location.start.column === undefined ||
-        error.location.end.column === undefined
-      ) {
-        return null;
-      }
-
-      return {
-        message: error.message,
-        severity: error.getMonacoSeverity(),
-        startLineNumber: error.location.start.lineNumber,
-        startColumn: error.location.start.column,
-        endLineNumber: error.location.end.lineNumber,
-        endColumn: error.location.end.column,
-      };
-    })
-    .filter((marker) => !!marker);
-};
-
-export default class QueryError {
-  constructor(
-    public message: string,
-    public severity: QueryErrorSeverity,
-    public code?: string,
-    public location?: QueryErrorLocation,
-  ) {}
-
-  getMonacoSeverity(): monaco.MarkerSeverity {
-    // It's very difficult to use the monaco.MarkerSeverity enum from here, so we'll just use the numbers directly.
-    // See: https://microsoft.github.io/monaco-editor/typedoc/enums/MarkerSeverity.html
-    switch (this.severity) {
-      case QueryErrorSeverity.Error:
-        return 8;
-      case QueryErrorSeverity.Warning:
-        return 4;
-      default:
-        return 2; // Info
-    }
-  }
-
-  /** Attempts to parse a query error from a string or object.
-   *
-   * @param error The error to parse.
-   * @returns An array of query errors if the error could be parsed, or null otherwise.
-   */
-  static tryParse(
-    error: unknown,
-    locationResolver?: (location: { start: number; end: number }) => QueryErrorLocation,
-  ): QueryError[] {
-    locationResolver =
-      locationResolver ||
-      (({ start, end }) => new QueryErrorLocation(new ErrorPosition(start), new ErrorPosition(end)));
-    const errors = QueryError.tryParseObject(error, locationResolver);
-    if (errors !== null) {
-      return errors;
-    }
-
-    const errorMessage = getErrorMessage(error as string | Error);
-
-    // Map some well known messages to richer errors
-    const knownError = knownErrors[errorMessage];
-    if (knownError) {
-      return [knownError];
-    } else {
-      return [new QueryError(errorMessage, QueryErrorSeverity.Error)];
-    }
-  }
-
-  static read(
-    error: unknown,
-    locationResolver: (location: { start: number; end: number }) => QueryErrorLocation,
-  ): QueryError | null {
-    if (typeof error !== "object" || error === null) {
-      return null;
-    }
-
-    const message = "message" in error && typeof error.message === "string" ? error.message : undefined;
-    if (!message) {
-      return null; // Invalid error (no message).
-    }
-
-    const severity =
-      "severity" in error && typeof error.severity === "string" ? (error.severity as QueryErrorSeverity) : undefined;
-    const location =
-      "location" in error && typeof error.location === "object"
-        ? locationResolver(error.location as { start: number; end: number })
-        : undefined;
-    const code = "code" in error && typeof error.code === "string" ? error.code : undefined;
-    return new QueryError(message, severity, code, location);
-  }
-
-  private static tryParseObject(
-    error: unknown,
-    locationResolver: (location: { start: number; end: number }) => QueryErrorLocation,
-  ): QueryError[] | null {
-    if (typeof error === "object" && "message" in error) {
-      error = error.message;
-    }
-
-    if (typeof error !== "string") {
-      return null;
-    }
-
-    // Assign to a new variable because of a TypeScript flow typing quirk, see below.
-    let message = error;
-    if (message.startsWith("Message: ")) {
-      // Reassigning this to 'error' restores the original type of 'error', which is 'unknown'.
-      // So we use a separate variable to avoid this.
-      message = message.substring("Message: ".length);
-    }
-
-    const lines = message.split("\n");
-    message = lines[0].trim();
-
-    let parsed: unknown;
-    try {
-      parsed = JSON.parse(message);
-    } catch (e) {
-      // Not a query error.
-      return null;
-    }
-
-    if (typeof parsed === "object" && "errors" in parsed && Array.isArray(parsed.errors)) {
-      return parsed.errors.map((e) => QueryError.read(e, locationResolver)).filter((e) => e !== null);
-    }
-    return null;
-  }
-}
-
-const knownErrors: Record<string, QueryError> = {
-  "User aborted query.": new QueryError("User aborted query.", QueryErrorSeverity.Warning),
-};

src/ConfigContext.ts

@@ -117,7 +117,6 @@ let configContext: Readonly<ConfigContext> = {
     "deleteDocument",
     "createCollectionWithProxy",
     "legacyMongoShell",
-    "bulkdelete",
   ],
   MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,
   CASSANDRA_PROXY_ENDPOINT: CassandraProxyEndpoints.Prod,

src/Contracts/ViewModels.ts

@@ -98,7 +98,6 @@ export interface Database extends TreeNode {
   openAddCollection(database: Database, event: MouseEvent): void;
   onSettingsClick: () => void;
   loadOffer(): Promise<void>;
-  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
 }
 
 export interface CollectionBase extends TreeNode {
@@ -191,8 +190,6 @@ export interface Collection extends CollectionBase {
   onDragOver(source: Collection, event: { originalEvent: DragEvent }): void;
   onDrop(source: Collection, event: { originalEvent: DragEvent }): void;
   uploadFiles(fileList: FileList): Promise<{ data: UploadDetailsRecord[] }>;
-
-  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
 }
 
 /**

src/Explorer/ContextMenuButtonFactory.tsx

@@ -41,10 +41,6 @@ export interface DatabaseContextMenuButtonParams {
  * New resource tree (in ReactJS)
  */
 export const createDatabaseContextMenu = (container: Explorer, databaseId: string): TreeNodeMenuItem[] => {
-  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly) {
-    return undefined;
-  }
-
   const items: TreeNodeMenuItem[] = [
     {
       iconSrc: AddCollectionIcon,

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -3,37 +3,6 @@ import * as React from "react";
 import { loadMonaco, monaco } from "../../LazyMonaco";
 // import "./EditorReact.less";
 
-// In development, add a function to window to allow us to get the editor instance for a given element
-if (process.env.NODE_ENV === "development") {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const win = window as any;
-  win._monaco_getEditorForElement =
-    win._monaco_getEditorForElement ||
-    ((element: HTMLElement) => {
-      const editorId = element.dataset["monacoEditorId"];
-      if (!editorId || !win.__monaco_editors || typeof win.__monaco_editors !== "object") {
-        return null;
-      }
-      return win.__monaco_editors[editorId];
-    });
-
-  win._monaco_getEditorContentForElement =
-    win._monaco_getEditorContentForElement ||
-    ((element: HTMLElement) => {
-      const editor = win._monaco_getEditorForElement(element);
-      return editor ? editor.getValue() : null;
-    });
-
-  win._monaco_setEditorContentForElement =
-    win._monaco_setEditorContentForElement ||
-    ((element: HTMLElement, text: string) => {
-      const editor = win._monaco_getEditorForElement(element);
-      if (editor) {
-        editor.setValue(text);
-      }
-    });
-}
-
 interface EditorReactStates {
   showEditor: boolean;
 }
@@ -42,7 +11,7 @@ export interface EditorReactProps {
   content: string;
   isReadOnly: boolean;
   ariaLabel: string; // Sets what will be read to the user to define the control
-  onContentSelected?: (selectedContent: string, selection: monaco.Selection) => void; // Called when text is selected
+  onContentSelected?: (selectedContent: string) => void; // Called when text is selected
   onContentChanged?: (newContent: string) => void; // Called when text is changed
   theme?: string; // Monaco editor theme
   wordWrap?: monaco.editor.IEditorOptions["wordWrap"];
@@ -56,7 +25,6 @@ export interface EditorReactProps {
   className?: string;
   spinnerClassName?: string;
 
-  modelMarkers?: monaco.editor.IMarkerData[];
   enableWordWrapContextMenuItem?: boolean; // Enable/Disable "Word Wrap" context menu item
   onWordWrapChanged?: (wordWrap: "on" | "off") => void; // Called when word wrap is changed
 }
@@ -64,25 +32,10 @@ export interface EditorReactProps {
 export class EditorReact extends React.Component<EditorReactProps, EditorReactStates> {
   private static readonly VIEWING_OPTIONS_GROUP_ID = "viewingoptions"; // Group ID for the context menu group
   private rootNode: HTMLElement;
-  public editor: monaco.editor.IStandaloneCodeEditor;
+  private editor: monaco.editor.IStandaloneCodeEditor;
   private selectionListener: monaco.IDisposable;
-  monacoApi: {
-    default: typeof monaco;
-    Emitter: typeof monaco.Emitter;
-    MarkerTag: typeof monaco.MarkerTag;
-    MarkerSeverity: typeof monaco.MarkerSeverity;
-    CancellationTokenSource: typeof monaco.CancellationTokenSource;
-    Uri: typeof monaco.Uri;
-    KeyCode: typeof monaco.KeyCode;
-    KeyMod: typeof monaco.KeyMod;
-    Position: typeof monaco.Position;
-    Range: typeof monaco.Range;
-    Selection: typeof monaco.Selection;
-    SelectionDirection: typeof monaco.SelectionDirection;
-    Token: typeof monaco.Token;
-    editor: typeof monaco.editor;
-    languages: typeof monaco.languages;
-  };
+
+  private monacoEditorOptionsWordWrap: monaco.editor.EditorOption;
 
   public constructor(props: EditorReactProps) {
     super(props);
@@ -111,7 +64,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
     if (this.props.content !== existingContent) {
       if (this.props.isReadOnly) {
-        this.editor.setValue(this.props.content || ""); // Monaco throws an error if you set the value to undefined.
+        this.editor.setValue(this.props.content);
       } else {
         this.editor.pushUndoStop();
         this.editor.executeEdits("", [
@@ -122,8 +75,6 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
         ]);
       }
     }
-
-    this.monacoApi.editor.setModelMarkers(this.editor.getModel(), "owner", this.props.modelMarkers || []);
   }
 
   public componentWillUnmount(): void {
@@ -137,7 +88,6 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
           <Spinner size={SpinnerSize.large} className={this.props.spinnerClassName || "spinner"} />
         )}
         <div
-          data-test="EditorReact/Host/Unloaded"
           className={this.props.className || "jsonEditor"}
           style={this.props.monacoContainerStyles}
           ref={(elt: HTMLElement) => this.setRef(elt)}
@@ -148,18 +98,6 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
   protected configureEditor(editor: monaco.editor.IStandaloneCodeEditor) {
     this.editor = editor;
-    this.rootNode.dataset["test"] = "EditorReact/Host/Loaded";
-
-    // In development, we want to be able to access the editor instance from the console
-    if (process.env.NODE_ENV === "development") {
-      this.rootNode.dataset["monacoEditorId"] = this.editor.getId();
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const win = window as any;
-
-      win["__monaco_editors"] = win["__monaco_editors"] || {};
-      win["__monaco_editors"][this.editor.getId()] = this.editor;
-    }
-
     if (!this.props.isReadOnly && this.props.onContentChanged) {
       // Hooking the model's onDidChangeContent event because of some event ordering issues.
       // If a single user input causes BOTH the editor content to change AND the cursor selection to change (which is likely),
@@ -177,7 +115,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
       this.selectionListener = this.editor.onDidChangeCursorSelection(
         (event: monaco.editor.ICursorSelectionChangedEvent) => {
           const selectedContent: string = this.editor.getModel().getValueInRange(event.selection);
-          this.props.onContentSelected(selectedContent, event.selection);
+          this.props.onContentSelected(selectedContent);
         },
       );
     }
@@ -192,7 +130,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
         // Method that will be executed when the action is triggered.
         // @param editor The editor instance is passed in as a convenience
         run: (ed) => {
-          const newOption = ed.getOption(this.monacoApi.editor.EditorOption.wordWrap) === "on" ? "off" : "on";
+          const newOption = ed.getOption(this.monacoEditorOptionsWordWrap) === "on" ? "off" : "on";
           ed.updateOptions({ wordWrap: newOption });
           this.props.onWordWrapChanged(newOption);
         },
@@ -218,14 +156,16 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
       lineDecorationsWidth: this.props.lineDecorationsWidth,
       minimap: this.props.minimap,
       scrollBeyondLastLine: this.props.scrollBeyondLastLine,
-      fixedOverflowWidgets: true,
     };
 
     this.rootNode.innerHTML = "";
-    this.monacoApi = await loadMonaco();
+    const lazymonaco = await loadMonaco();
+
+    // We can only get this constant after loading monaco lazily
+    this.monacoEditorOptionsWordWrap = lazymonaco.editor.EditorOption.wordWrap;
 
     try {
-      createCallback(this.monacoApi.editor.create(this.rootNode, options));
+      createCallback(lazymonaco?.editor?.create(this.rootNode, options));
     } catch (error) {
       // This could happen if the parent node suddenly disappears during create()
       console.error("Unable to create EditorReact", error);

src/Explorer/Controls/IndeterminateProgressBar.tsx

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

src/Explorer/Controls/MessageBanner.tsx

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

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -130,7 +130,6 @@ export interface SettingsComponentState {
   conflictResolutionPolicyProcedureBaseline: string;
   isConflictResolutionDirty: boolean;
 
-  initialNotification: DataModels.Notification;
   selectedTab: SettingsV2TabTypes;
 }
 
@@ -229,7 +228,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       conflictResolutionPolicyProcedureBaseline: undefined,
       isConflictResolutionDirty: false,
 
-      initialNotification: undefined,
       selectedTab: SettingsV2TabTypes.ScaleTab,
     };
 
@@ -1052,7 +1050,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onMaxAutoPilotThroughputChange: this.onMaxAutoPilotThroughputChange,
       onScaleSaveableChange: this.onScaleSaveableChange,
       onScaleDiscardableChange: this.onScaleDiscardableChange,
-      initialNotification: this.props.settingsTab.pendingNotification(),
       throughputError: this.state.throughputError,
     };
 

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

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

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

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

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

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

src/Explorer/Controls/TreeComponent/Styles.ts

@@ -25,9 +25,7 @@ export const useTreeStyles = makeStyles({
     height: `var(${treeIconWidth})`,
   },
   treeItem: {},
-  nodeLabel: {
-    whiteSpace: "nowrap", // Don't wrap text, there will be a scrollbar.
-  },
+  nodeLabel: {},
   treeItemLayout: {
     fontSize: tokens.fontSizeBase300,
     height: tokens.layoutRowHeight,

src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx

@@ -158,9 +158,9 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
       node.iconSrc
     )
   ) : openItems.includes(treeNodeId) ? (
-    <ChevronDown20Regular data-test="TreeNode/CollapseIcon" />
+    <ChevronDown20Regular />
   ) : (
-    <ChevronRight20Regular data-text="TreeNode/ExpandIcon" />
+    <ChevronRight20Regular />
   );
 
   const treeItem = (
@@ -205,7 +205,7 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
         <span className={treeStyles.nodeLabel}>{node.label}</span>
       </TreeItemLayout>
       {!node.isLoading && node.children?.length > 0 && (
-        <Tree data-test={`Tree:${treeNodeId}`} className={treeStyles.tree}>
+        <Tree className={treeStyles.tree}>
           {getSortedChildren(node).map((childNode: TreeNode) => (
             <TreeNodeComponent
               openItems={openItems}

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

@@ -12,14 +12,10 @@ exports[`TreeNodeComponent does not render children if the node is loading 1`] =
     actions={false}
     className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
-    expandIcon={
-      <ChevronRight20Regular
-        data-text="TreeNode/ExpandIcon"
-      />
-    }
+    expandIcon={<ChevronRight20Regular />}
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
@@ -137,7 +133,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                 <svg
                   aria-hidden="true"
                   class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                  data-text="TreeNode/ExpandIcon"
                   fill="currentColor"
                   height="20"
                   viewBox="0 0 20 20"
@@ -166,7 +161,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                   <svg
                     aria-hidden="true"
                     class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                    data-text="TreeNode/ExpandIcon"
                     fill="currentColor"
                     height="20"
                     viewBox="0 0 20 20"
@@ -183,7 +177,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                   class="fui-TreeItemLayout__main rklbe47"
                 >
                   <span
-                    class="___1h29e9h_0000000 fz5stix"
+                    class=""
                   >
                     rootLabel
                   </span>
@@ -218,7 +212,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     <svg
                       aria-hidden="true"
                       class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                      data-text="TreeNode/ExpandIcon"
                       fill="currentColor"
                       height="20"
                       viewBox="0 0 20 20"
@@ -235,7 +228,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     class="fui-TreeItemLayout__main rklbe47"
                   >
                     <span
-                      class="___1h29e9h_0000000 fz5stix"
+                      class=""
                     >
                       rootLabel
                     </span>
@@ -243,7 +236,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                 </div>
                 <div
                   class="fui-Tree rnv2ez3 ___jy13a00_lpffjy0 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
-                  data-test="Tree:root"
                   role="tree"
                 >
                   <div
@@ -266,7 +258,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                         <svg
                           aria-hidden="true"
                           class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                          data-text="TreeNode/ExpandIcon"
                           fill="currentColor"
                           height="20"
                           viewBox="0 0 20 20"
@@ -283,7 +274,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                         class="fui-TreeItemLayout__main rklbe47"
                       >
                         <span
-                          class="___1h29e9h_0000000 fz5stix"
+                          class=""
                         >
                           child1Label
                         </span>
@@ -310,7 +301,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                         <svg
                           aria-hidden="true"
                           class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                          data-text="TreeNode/ExpandIcon"
                           fill="currentColor"
                           height="20"
                           viewBox="0 0 20 20"
@@ -327,7 +317,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                         class="fui-TreeItemLayout__main rklbe47"
                       >
                         <span
-                          class="___1h29e9h_0000000 fz5stix"
+                          class=""
                         >
                           child2LoadingLabel
                         </span>
@@ -367,7 +357,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                         class="fui-TreeItemLayout__main rklbe47"
                       >
                         <span
-                          class="___1h29e9h_0000000 fz5stix"
+                          class=""
                         >
                           child3ExpandingLabel
                         </span>
@@ -385,11 +375,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
           actions={false}
           className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
           data-test="TreeNode:root"
-          expandIcon={
-            <ChevronRight20Regular
-              data-text="TreeNode/ExpandIcon"
-            />
-          }
+          expandIcon={<ChevronRight20Regular />}
         >
           <div
             className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
@@ -399,13 +385,10 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
               aria-hidden={true}
               className="fui-TreeItemLayout__expandIcon rh4pu5o"
             >
-              <ChevronRight20Regular
-                data-text="TreeNode/ExpandIcon"
-              >
+              <ChevronRight20Regular>
                 <svg
                   aria-hidden={true}
                   className="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                  data-text="TreeNode/ExpandIcon"
                   fill="currentColor"
                   height="20"
                   viewBox="0 0 20 20"
@@ -423,7 +406,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
               className="fui-TreeItemLayout__main rklbe47"
             >
               <span
-                className="___1h29e9h_0000000 fz5stix"
+                className=""
               >
                 rootLabel
               </span>
@@ -432,7 +415,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
         </TreeItemLayout>
         <Tree
           className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
-          data-test="Tree:root"
         >
           <TreeProvider
             value={
@@ -500,7 +482,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
             >
               <div
                 className="fui-Tree rnv2ez3 ___jy13a00_lpffjy0 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
-                data-test="Tree:root"
                 role="tree"
               >
                 <TreeNodeComponent
@@ -568,7 +549,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 <svg
                                   aria-hidden="true"
                                   class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                  data-text="TreeNode/ExpandIcon"
                                   fill="currentColor"
                                   height="20"
                                   viewBox="0 0 20 20"
@@ -597,7 +577,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                   <svg
                                     aria-hidden="true"
                                     class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                    data-text="TreeNode/ExpandIcon"
                                     fill="currentColor"
                                     height="20"
                                     viewBox="0 0 20 20"
@@ -614,7 +593,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                   class="fui-TreeItemLayout__main rklbe47"
                                 >
                                   <span
-                                    class="___1h29e9h_0000000 fz5stix"
+                                    class=""
                                   >
                                     child1Label
                                   </span>
@@ -649,7 +628,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                     <svg
                                       aria-hidden="true"
                                       class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                      data-text="TreeNode/ExpandIcon"
                                       fill="currentColor"
                                       height="20"
                                       viewBox="0 0 20 20"
@@ -666,7 +644,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                     class="fui-TreeItemLayout__main rklbe47"
                                   >
                                     <span
-                                      class="___1h29e9h_0000000 fz5stix"
+                                      class=""
                                     >
                                       child1Label
                                     </span>
@@ -682,11 +660,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                           actions={false}
                           className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
                           data-test="TreeNode:root/child1Label"
-                          expandIcon={
-                            <ChevronRight20Regular
-                              data-text="TreeNode/ExpandIcon"
-                            />
-                          }
+                          expandIcon={<ChevronRight20Regular />}
                         >
                           <div
                             className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
@@ -696,13 +670,10 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                               aria-hidden={true}
                               className="fui-TreeItemLayout__expandIcon rh4pu5o"
                             >
-                              <ChevronRight20Regular
-                                data-text="TreeNode/ExpandIcon"
-                              >
+                              <ChevronRight20Regular>
                                 <svg
                                   aria-hidden={true}
                                   className="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                  data-text="TreeNode/ExpandIcon"
                                   fill="currentColor"
                                   height="20"
                                   viewBox="0 0 20 20"
@@ -720,7 +691,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                               className="fui-TreeItemLayout__main rklbe47"
                             >
                               <span
-                                className="___1h29e9h_0000000 fz5stix"
+                                className=""
                               >
                                 child1Label
                               </span>
@@ -729,7 +700,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                         </TreeItemLayout>
                         <Tree
                           className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
-                          data-test="Tree:root/child1Label"
                         >
                           <TreeProvider
                             value={
@@ -802,7 +772,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 <svg
                                   aria-hidden="true"
                                   class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                  data-text="TreeNode/ExpandIcon"
                                   fill="currentColor"
                                   height="20"
                                   viewBox="0 0 20 20"
@@ -831,7 +800,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                   <svg
                                     aria-hidden="true"
                                     class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                    data-text="TreeNode/ExpandIcon"
                                     fill="currentColor"
                                     height="20"
                                     viewBox="0 0 20 20"
@@ -848,7 +816,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                   class="fui-TreeItemLayout__main rklbe47"
                                 >
                                   <span
-                                    class="___1h29e9h_0000000 fz5stix"
+                                    class=""
                                   >
                                     child2LoadingLabel
                                   </span>
@@ -883,7 +851,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                     <svg
                                       aria-hidden="true"
                                       class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                      data-text="TreeNode/ExpandIcon"
                                       fill="currentColor"
                                       height="20"
                                       viewBox="0 0 20 20"
@@ -900,7 +867,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                     class="fui-TreeItemLayout__main rklbe47"
                                   >
                                     <span
-                                      class="___1h29e9h_0000000 fz5stix"
+                                      class=""
                                     >
                                       child2LoadingLabel
                                     </span>
@@ -916,11 +883,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                           actions={false}
                           className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
                           data-test="TreeNode:root/child2LoadingLabel"
-                          expandIcon={
-                            <ChevronRight20Regular
-                              data-text="TreeNode/ExpandIcon"
-                            />
-                          }
+                          expandIcon={<ChevronRight20Regular />}
                         >
                           <div
                             className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
@@ -930,13 +893,10 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                               aria-hidden={true}
                               className="fui-TreeItemLayout__expandIcon rh4pu5o"
                             >
-                              <ChevronRight20Regular
-                                data-text="TreeNode/ExpandIcon"
-                              >
+                              <ChevronRight20Regular>
                                 <svg
                                   aria-hidden={true}
                                   className="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                  data-text="TreeNode/ExpandIcon"
                                   fill="currentColor"
                                   height="20"
                                   viewBox="0 0 20 20"
@@ -954,7 +914,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                               className="fui-TreeItemLayout__main rklbe47"
                             >
                               <span
-                                className="___1h29e9h_0000000 fz5stix"
+                                className=""
                               >
                                 child2LoadingLabel
                               </span>
@@ -1063,7 +1023,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                   class="fui-TreeItemLayout__main rklbe47"
                                 >
                                   <span
-                                    class="___1h29e9h_0000000 fz5stix"
+                                    class=""
                                   >
                                     child3ExpandingLabel
                                   </span>
@@ -1111,7 +1071,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                     class="fui-TreeItemLayout__main rklbe47"
                                   >
                                     <span
-                                      class="___1h29e9h_0000000 fz5stix"
+                                      class=""
                                     >
                                       child3ExpandingLabel
                                     </span>
@@ -1153,7 +1113,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                               className="fui-TreeItemLayout__main rklbe47"
                             >
                               <span
-                                className="___1h29e9h_0000000 fz5stix"
+                                className=""
                               >
                                 child3ExpandingLabel
                               </span>
@@ -1195,7 +1155,7 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
     }
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
@@ -1222,7 +1182,7 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
     }
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
@@ -1242,14 +1202,10 @@ exports[`TreeNodeComponent renders a node as expandable if it has empty, but def
     actions={false}
     className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
-    expandIcon={
-      <ChevronRight20Regular
-        data-text="TreeNode/ExpandIcon"
-      />
-    }
+    expandIcon={<ChevronRight20Regular />}
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
@@ -1324,7 +1280,7 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
         }
       >
         <span
-          className="___1h29e9h_0000000 fz5stix"
+          className=""
         >
           rootLabel
         </span>
@@ -1374,7 +1330,7 @@ exports[`TreeNodeComponent renders a single node 1`] = `
     }
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
@@ -1403,7 +1359,7 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
     }
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
@@ -1423,21 +1379,16 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
     actions={false}
     className="___kqkdor0_ihxn0o0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
     data-test="TreeNode:root"
-    expandIcon={
-      <ChevronRight20Regular
-        data-text="TreeNode/ExpandIcon"
-      />
-    }
+    expandIcon={<ChevronRight20Regular />}
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
   </TreeItemLayout>
   <Tree
     className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
-    data-test="Tree:root"
   >
     <TreeNodeComponent
       key="child1Label"
@@ -1499,21 +1450,16 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
     actions={false}
     className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
-    expandIcon={
-      <ChevronRight20Regular
-        data-text="TreeNode/ExpandIcon"
-      />
-    }
+    expandIcon={<ChevronRight20Regular />}
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
   </TreeItemLayout>
   <Tree
     className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
-    data-test="Tree:root"
   >
     <TreeNodeComponent
       key="child1Label"
@@ -1585,7 +1531,7 @@ exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
     }
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -167,18 +167,22 @@ export function createContextCommandBarButtons(
 }
 
 export function createControlCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
-  const buttons: CommandButtonComponentProps[] = [
-    {
-      iconSrc: SettingsIcon,
-      iconAlt: "Settings",
-      onCommandClick: () => useSidePanel.getState().openSidePanel("Settings", <SettingsPane explorer={container} />),
-      commandButtonLabel: undefined,
-      ariaLabel: "Settings",
-      tooltipText: "Settings",
-      hasPopup: true,
-      disabled: false,
-    },
-  ];
+  const buttons: CommandButtonComponentProps[] =
+    configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly
+      ? []
+      : [
+          {
+            iconSrc: SettingsIcon,
+            iconAlt: "Settings",
+            onCommandClick: () =>
+              useSidePanel.getState().openSidePanel("Settings", <SettingsPane explorer={container} />),
+            commandButtonLabel: undefined,
+            ariaLabel: "Settings",
+            tooltipText: "Settings",
+            hasPopup: true,
+            disabled: false,
+          },
+        ];
 
   const showOpenFullScreen =
     configContext.platform === Platform.Portal && !isRunningOnNationalCloud() && userContext.apiType !== "Gremlin";

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -131,7 +131,6 @@ export class NotificationConsoleComponent extends React.Component<
           </div>
           <div
             className="expandCollapseButton"
-            data-test="NotificationConsole/ExpandCollapseButton"
             role="button"
             tabIndex={0}
             aria-label={"console button" + (this.props.isConsoleExpanded ? " expanded" : " collapsed")}
@@ -148,7 +147,7 @@ export class NotificationConsoleComponent extends React.Component<
           height={this.props.isConsoleExpanded ? "auto" : 0}
           onAnimationEnd={this.onConsoleWasExpanded}
         >
-          <div data-test="NotificationConsole/Contents" className="notificationConsoleContents">
+          <div className="notificationConsoleContents">
             <div className="notificationConsoleControls">
               <Dropdown
                 label="Filter:"

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -74,7 +74,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
       aria-expanded={true}
       aria-label="console button collapsed"
       className="expandCollapseButton"
-      data-test="NotificationConsole/ExpandCollapseButton"
       role="button"
       tabIndex={0}
     >
@@ -110,7 +109,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
   >
     <div
       className="notificationConsoleContents"
-      data-test="NotificationConsole/Contents"
     >
       <div
         className="notificationConsoleControls"
@@ -247,7 +245,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
       aria-expanded={true}
       aria-label="console button collapsed"
       className="expandCollapseButton"
-      data-test="NotificationConsole/ExpandCollapseButton"
       role="button"
       tabIndex={0}
     >
@@ -283,7 +280,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
   >
     <div
       className="notificationConsoleContents"
-      data-test="NotificationConsole/Contents"
     >
       <div
         className="notificationConsoleControls"

src/Explorer/Notebook/useNotebook.ts

@@ -1,6 +1,5 @@
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
 import { PhoenixClient } from "Phoenix/PhoenixClient";
-import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
 import { cloneDeep } from "lodash";
 import create, { UseStore } from "zustand";
 import { AuthType } from "../../AuthType";
@@ -128,9 +127,7 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
       userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo"
         ? databaseAccount?.location
         : databaseAccount?.properties?.writeLocations?.[0]?.locationName.toLowerCase();
-    const disallowedLocationsUri: string = useNewPortalBackendEndpoint(Constants.BackendApi.DisallowedLocations)
-      ? `${configContext.PORTAL_BACKEND_ENDPOINT}/api/disallowedlocations`
-      : `${configContext.BACKEND_ENDPOINT}/api/disallowedLocations`;
+    const disallowedLocationsUri = `${configContext.BACKEND_ENDPOINT}/api/disallowedLocations`;
     const authorizationHeader = getAuthorizationHeader();
     try {
       const response = await fetch(disallowedLocationsUri, {

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -1,7 +1,6 @@
 import {
   Checkbox,
   ChoiceGroup,
-  DefaultButton,
   IChoiceGroupOption,
   ISpinButtonStyles,
   IToggleStyles,
@@ -13,15 +12,11 @@ import {
   Toggle,
   TooltipHost,
 } from "@fluentui/react";
-import { makeStyles } from "@fluentui/react-components";
-import { AuthType } from "AuthType";
 import * as Constants from "Common/Constants";
 import { SplitterDirection } from "Common/Splitter";
 import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
 import { Platform, configContext } from "ConfigContext";
-import { useDialog } from "Explorer/Controls/Dialog";
 import { useDatabases } from "Explorer/useDatabases";
-import { deleteAllStates } from "Shared/AppStatePersistenceUtility";
 import {
   DefaultRUThreshold,
   LocalStorageUtility,
@@ -34,13 +29,14 @@ import * as StringUtility from "Shared/StringUtility";
 import { updateUserContext, userContext } from "UserContext";
 import { logConsoleError, logConsoleInfo } from "Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "Utils/PriorityBasedExecutionUtils";
-import { getReadOnlyKeys, listKeys } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { useSidePanel } from "hooks/useSidePanel";
 import React, { FunctionComponent, useState } from "react";
-import create, { UseStore } from "zustand";
 import Explorer from "../../Explorer";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
+import { AuthType } from "AuthType";
+import create, { UseStore } from "zustand";
+import { getReadOnlyKeys, listKeys } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
 
 export interface DataPlaneRbacState {
   dataPlaneRbacEnabled: boolean;
@@ -54,13 +50,6 @@ export interface DataPlaneRbacState {
 
 type DataPlaneRbacStore = UseStore<Partial<DataPlaneRbacState>>;
 
-const useStyles = makeStyles({
-  bulletList: {
-    listStyleType: "disc",
-    paddingLeft: "20px",
-  },
-});
-
 export const useDataPlaneRbac: DataPlaneRbacStore = create(() => ({
   dataPlaneRbacEnabled: false,
 }));
@@ -144,9 +133,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const [copilotSampleDBEnabled, setCopilotSampleDBEnabled] = useState<boolean>(
     LocalStorageUtility.getEntryString(StorageKey.CopilotSampleDBEnabled) === "true",
   );
-
-  const styles = useStyles();
-
   const explorerVersion = configContext.gitSha;
   const shouldShowQueryPageOptions = userContext.apiType === "SQL";
   const shouldShowGraphAutoVizOption = userContext.apiType === "Gremlin";
@@ -167,45 +153,43 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
 
     LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
 
-    if (configContext.platform !== Platform.Fabric) {
-      LocalStorageUtility.setEntryString(StorageKey.DataPlaneRbacEnabled, enableDataPlaneRBACOption);
-      if (
-        enableDataPlaneRBACOption === Constants.RBACOptions.setTrueRBACOption ||
-        (enableDataPlaneRBACOption === Constants.RBACOptions.setAutomaticRBACOption &&
-          userContext.databaseAccount.properties.disableLocalAuth)
-      ) {
-        updateUserContext({
-          dataPlaneRbacEnabled: true,
-          hasDataPlaneRbacSettingChanged: true,
-        });
-        useDataPlaneRbac.setState({ dataPlaneRbacEnabled: true });
-      } else {
-        updateUserContext({
-          dataPlaneRbacEnabled: false,
-          hasDataPlaneRbacSettingChanged: true,
-        });
-        const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
-        if (!userContext.features.enableAadDataPlane && !userContext.masterKey) {
-          let keys;
-          try {
-            keys = await listKeys(subscriptionId, resourceGroup, account.name);
+    LocalStorageUtility.setEntryString(StorageKey.DataPlaneRbacEnabled, enableDataPlaneRBACOption);
+    if (
+      enableDataPlaneRBACOption === Constants.RBACOptions.setTrueRBACOption ||
+      (enableDataPlaneRBACOption === Constants.RBACOptions.setAutomaticRBACOption &&
+        userContext.databaseAccount.properties.disableLocalAuth)
+    ) {
+      updateUserContext({
+        dataPlaneRbacEnabled: true,
+        hasDataPlaneRbacSettingChanged: true,
+      });
+      useDataPlaneRbac.setState({ dataPlaneRbacEnabled: true });
+    } else {
+      updateUserContext({
+        dataPlaneRbacEnabled: false,
+        hasDataPlaneRbacSettingChanged: true,
+      });
+      const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
+      if (!userContext.features.enableAadDataPlane && !userContext.masterKey) {
+        let keys;
+        try {
+          keys = await listKeys(subscriptionId, resourceGroup, account.name);
+          updateUserContext({
+            masterKey: keys.primaryMasterKey,
+          });
+        } catch (error) {
+          // if listKeys fail because of permissions issue, then make call to get ReadOnlyKeys
+          if (error.code === "AuthorizationFailed") {
+            keys = await getReadOnlyKeys(subscriptionId, resourceGroup, account.name);
             updateUserContext({
-              masterKey: keys.primaryMasterKey,
+              masterKey: keys.primaryReadonlyMasterKey,
             });
-          } catch (error) {
-            // if listKeys fail because of permissions issue, then make call to get ReadOnlyKeys
-            if (error.code === "AuthorizationFailed") {
-              keys = await getReadOnlyKeys(subscriptionId, resourceGroup, account.name);
-              updateUserContext({
-                masterKey: keys.primaryReadonlyMasterKey,
-              });
-            } else {
-              logConsoleError(`Error occurred fetching keys for the account." ${error.message}`);
-              throw error;
-            }
+          } else {
+            logConsoleError(`Error occurred fetching keys for the account." ${error.message}`);
+            throw error;
           }
-          useDataPlaneRbac.setState({ dataPlaneRbacEnabled: false });
         }
+        useDataPlaneRbac.setState({ dataPlaneRbacEnabled: false });
       }
     }
 
@@ -492,57 +476,55 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
             </div>
           </div>
         )}
-        {userContext.apiType === "SQL" &&
-          userContext.authType === AuthType.AAD &&
-          configContext.platform !== Platform.Fabric && (
-            <>
-              <div className="settingsSection">
-                <div className="settingsSectionPart">
-                  <fieldset>
-                    <legend id="enableDataPlaneRBACOptions" className="settingsSectionLabel legendLabel">
-                      Enable Entra ID RBAC
-                    </legend>
-                    <TooltipHost
-                      content={
-                        <>
-                          Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable
-                          Entra ID RBAC.
-                          <a
-                            href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            {" "}
-                            Learn more{" "}
-                          </a>
-                        </>
-                      }
+        {userContext.apiType === "SQL" && userContext.authType === AuthType.AAD && (
+          <>
+            <div className="settingsSection">
+              <div className="settingsSectionPart">
+                <fieldset>
+                  <legend id="enableDataPlaneRBACOptions" className="settingsSectionLabel legendLabel">
+                    Enable Entra ID RBAC
+                  </legend>
+                  <TooltipHost
+                    content={
+                      <>
+                        Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra
+                        ID RBAC.
+                        <a
+                          href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          {" "}
+                          Learn more{" "}
+                        </a>
+                      </>
+                    }
+                  >
+                    <Icon iconName="Info" ariaLabel="Info tooltip" className="panelInfoIcon" tabIndex={0} />
+                  </TooltipHost>
+                  {showDataPlaneRBACWarning && configContext.platform === Platform.Portal && (
+                    <MessageBar
+                      messageBarType={MessageBarType.warning}
+                      isMultiline={true}
+                      onDismiss={() => setShowDataPlaneRBACWarning(false)}
+                      dismissButtonAriaLabel="Close"
                     >
-                      <Icon iconName="Info" ariaLabel="Info tooltip" className="panelInfoIcon" tabIndex={0} />
-                    </TooltipHost>
-                    {showDataPlaneRBACWarning && configContext.platform === Platform.Portal && (
-                      <MessageBar
-                        messageBarType={MessageBarType.warning}
-                        isMultiline={true}
-                        onDismiss={() => setShowDataPlaneRBACWarning(false)}
-                        dismissButtonAriaLabel="Close"
-                      >
-                        Please click on &quot;Login for Entra ID RBAC&quot; button prior to performing Entra ID RBAC
-                        operations
-                      </MessageBar>
-                    )}
-                    <ChoiceGroup
-                      ariaLabelledBy="enableDataPlaneRBACOptions"
-                      options={dataPlaneRBACOptionsList}
-                      styles={choiceButtonStyles}
-                      selectedKey={enableDataPlaneRBACOption}
-                      onChange={handleOnDataPlaneRBACOptionChange}
-                    />
-                  </fieldset>
-                </div>
+                      Please click on &quot;Login for Entra ID RBAC&quot; button prior to performing Entra ID RBAC
+                      operations
+                    </MessageBar>
+                  )}
+                  <ChoiceGroup
+                    ariaLabelledBy="enableDataPlaneRBACOptions"
+                    options={dataPlaneRBACOptionsList}
+                    styles={choiceButtonStyles}
+                    selectedKey={enableDataPlaneRBACOption}
+                    onChange={handleOnDataPlaneRBACOptionChange}
+                  />
+                </fieldset>
               </div>
-            </>
-          )}
+            </div>
+          </>
+        )}
         {userContext.apiType === "SQL" && (
           <>
             <div className="settingsSection">
@@ -848,34 +830,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
             </div>
           </div>
         )}
-        <div className="settingsSection">
-          <div className="settingsSectionPart">
-            <DefaultButton
-              onClick={() => {
-                useDialog.getState().showOkCancelModalDialog(
-                  "Clear History",
-                  undefined,
-                  "Are you sure you want to proceed?",
-                  () => deleteAllStates(),
-                  "Cancel",
-                  undefined,
-                  <>
-                    <span>
-                      This action will clear the all customizations for this account in this browser, including:
-                    </span>
-                    <ul className={styles.bulletList}>
-                      <li>Reset your customized tab layout, including the splitter positions</li>
-                      <li>Erase your table column preferences, including any custom columns</li>
-                      <li>Clear your filter history</li>
-                    </ul>
-                  </>,
-                );
-              }}
-            >
-              Clear History
-            </DefaultButton>
-          </div>
-        </div>
         <div className="settingsSection">
           <div className="settingsSectionPart">
             <div className="settingsSectionLabel">Explorer Version</div>

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

@@ -238,7 +238,7 @@ exports[`Settings Pane should render Default properly 1`] = `
                 },
               ]
             }
-            selectedKey="horizontal"
+            selectedKey="vertical"
             styles={
               {
                 "flexContainer": [
@@ -485,19 +485,6 @@ exports[`Settings Pane should render Default properly 1`] = `
         />
       </div>
     </div>
-    <div
-      className="settingsSection"
-    >
-      <div
-        className="settingsSectionPart"
-      >
-        <CustomizedDefaultButton
-          onClick={[Function]}
-        >
-          Clear History
-        </CustomizedDefaultButton>
-      </div>
-    </div>
     <div
       className="settingsSection"
     >
@@ -721,19 +708,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
         />
       </div>
     </div>
-    <div
-      className="settingsSection"
-    >
-      <div
-        className="settingsSectionPart"
-      >
-        <CustomizedDefaultButton
-          onClick={[Function]}
-        >
-          Clear History
-        </CustomizedDefaultButton>
-      </div>
-    </div>
     <div
       className="settingsSection"
     >

src/Explorer/QueryCopilot/QueryCopilotContext.tsx

@@ -1,5 +1,4 @@
 import { MinimalQueryIterator } from "Common/IteratorUtilities";
-import QueryError from "Common/QueryError";
 import { QueryResults } from "Contracts/ViewModels";
 import { CopilotMessage } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
 import { guid } from "Explorer/Tables/Utilities";
@@ -29,7 +28,7 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
       showSamplePrompts: false,
       queryIterator: undefined,
       queryResults: undefined,
-      errors: [],
+      errorMessage: "",
       isSamplePromptsOpen: false,
       showPromptTeachingBubble: true,
       showDeletePopup: false,
@@ -65,7 +64,7 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
       setShowSamplePrompts: (showSamplePrompts: boolean) => set({ showSamplePrompts }),
       setQueryIterator: (queryIterator: MinimalQueryIterator | undefined) => set({ queryIterator }),
       setQueryResults: (queryResults: QueryResults | undefined) => set({ queryResults }),
-      setErrors: (errors: QueryError[]) => set({ errors }),
+      setErrorMessage: (errorMessage: string) => set({ errorMessage }),
       setIsSamplePromptsOpen: (isSamplePromptsOpen: boolean) => set({ isSamplePromptsOpen }),
       setShowPromptTeachingBubble: (showPromptTeachingBubble: boolean) => set({ showPromptTeachingBubble }),
       setShowDeletePopup: (showDeletePopup: boolean) => set({ showDeletePopup }),

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -18,9 +18,8 @@ import {
   Text,
   TextField,
 } from "@fluentui/react";
-import { HttpStatusCodes, NormalizedEventKey } from "Common/Constants";
+import { HttpStatusCodes } from "Common/Constants";
 import { handleError } from "Common/ErrorHandlingUtils";
-import QueryError, { QueryErrorSeverity } from "Common/QueryError";
 import { createUri } from "Common/UrlUtility";
 import { CopyPopup } from "Explorer/QueryCopilot/Popup/CopyPopup";
 import { DeletePopup } from "Explorer/QueryCopilot/Popup/DeletePopup";
@@ -35,7 +34,7 @@ import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/Shared/
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { userContext } from "UserContext";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
-import React, { useMemo, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import HintIcon from "../../../images/Hint.svg";
 import RecentIcon from "../../../images/Recent.svg";
 import errorIcon from "../../../images/close-black.svg";
@@ -71,8 +70,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
 }: QueryCopilotPromptProps): JSX.Element => {
   const [copilotTeachingBubbleVisible, setCopilotTeachingBubbleVisible] = useState<boolean>(false);
   const inputEdited = useRef(false);
-  const itemRefs = useRef([]);
-  const searchInputRef = useRef(null);
   const {
     openFeedbackModal,
     hideFeedbackModalForLikedQueries,
@@ -108,10 +105,10 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     setShowErrorMessageBar,
     setGeneratedQueryComments,
     setQueryResults,
-    setErrors,
-    errors,
+    setErrorMessage,
+    errorMessage,
   } = useCopilotStore();
-  const [focusedIndex, setFocusedIndex] = useState(-1);
+
   const sampleProps: SamplePromptsProps = {
     isSamplePromptsOpen: isSamplePromptsOpen,
     setIsSamplePromptsOpen: setIsSamplePromptsOpen,
@@ -144,7 +141,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     : getSuggestedPrompts();
   const [filteredHistories, setFilteredHistories] = useState<string[]>(histories);
   const [filteredSuggestedPrompts, setFilteredSuggestedPrompts] = useState<SuggestedPrompt[]>(suggestedPrompts);
-  const { UpArrow, DownArrow, Enter } = NormalizedEventKey;
 
   const handleUserPromptChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     inputEdited.current = true;
@@ -183,7 +179,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
 
   const resetQueryResults = (): void => {
     setQueryResults(null);
-    setErrors([]);
+    setErrorMessage("");
   };
 
   const generateSQLQuery = async (): Promise<void> => {
@@ -247,12 +243,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
         handleError(JSON.stringify(generateSQLQueryResponse), "copilotTooManyRequestError");
         useTabs.getState().setIsQueryErrorThrown(true);
         setShowErrorMessageBar(true);
-        setErrors([
-          new QueryError(
-            "Ratelimit exceeded 5 per 1 minute. Please try again after sometime",
-            QueryErrorSeverity.Error,
-          ),
-        ]);
+        setErrorMessage("Ratelimit exceeded 5 per 1 minute. Please try again after sometime");
         TelemetryProcessor.traceFailure(Action.QueryGenerationFromCopilotPrompt, {
           databaseName: databaseId,
           collectionId: containerId,
@@ -310,38 +301,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
       return "Content is updated";
     }
   };
-  const openSamplePrompts = () => {
-    inputEdited.current = true;
-    setShowSamplePrompts(true);
-  };
-  const totalSuggestions = useMemo(
-    () => [...filteredSuggestedPrompts, ...filteredHistories],
-    [filteredSuggestedPrompts, filteredHistories],
-  );
 
-  const handleKeyDownForInput = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === DownArrow) {
-      setFocusedIndex(0);
-      itemRefs.current[0]?.current?.focus();
-    } else if (event.key === Enter && userPrompt) {
-      inputEdited.current = true;
-      startGenerateQueryProcess();
-    }
-  };
-
-  const handleKeyDownForItem = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === UpArrow && focusedIndex > 0) {
-      itemRefs.current[focusedIndex - 1].current?.focus();
-      setFocusedIndex((prevIndex) => prevIndex - 1);
-    } else if (event.key === DownArrow && focusedIndex < totalSuggestions.length - 1) {
-      itemRefs.current[focusedIndex + 1].current?.focus();
-      setFocusedIndex((prevIndex) => prevIndex + 1);
-    }
-  };
-
-  React.useEffect(() => {
-    itemRefs.current = totalSuggestions.map(() => React.createRef());
-  }, [totalSuggestions]);
   React.useEffect(() => {
     useTabs.getState().setIsQueryErrorThrown(false);
   }, []);
@@ -371,14 +331,23 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
               id="naturalLanguageInput"
               value={userPrompt}
               onChange={handleUserPromptChange}
-              onClick={openSamplePrompts}
-              onFocus={() => setShowSamplePrompts(true)}
-              elementRef={searchInputRef}
-              onKeyDown={handleKeyDownForInput}
+              onClick={() => {
+                inputEdited.current = true;
+                setShowSamplePrompts(true);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && userPrompt) {
+                  inputEdited.current = true;
+                  startGenerateQueryProcess();
+                }
+              }}
               style={{ lineHeight: 30 }}
               styles={{
                 root: { width: "100%" },
-                suffix: { background: "none", padding: 0 },
+                suffix: {
+                  background: "none",
+                  padding: 0,
+                },
                 fieldGroup: {
                   borderRadius: 4,
                   borderColor: "#D1D1D1",
@@ -391,8 +360,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 },
               }}
               disabled={isGeneratingQuery}
-              autoComplete="list"
-              aria-expanded={showSamplePrompts}
+              autoComplete="off"
               placeholder="Ask a question in natural language and we’ll generate the query for you."
               aria-labelledby="copilot-textfield-label"
               onRenderSuffix={() => {
@@ -464,8 +432,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                             setShowSamplePrompts(false);
                             inputEdited.current = true;
                           }}
-                          elementRef={itemRefs.current[i]}
-                          onKeyDown={handleKeyDownForItem}
                           onRenderIcon={() => <Image src={RecentIcon} styles={{ root: { overflow: "unset" } }} />}
                           styles={promptStyles}
                         >
@@ -488,16 +454,14 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       >
                         Suggested Prompts
                       </Text>
-                      {filteredSuggestedPrompts.map((prompt, index) => (
+                      {filteredSuggestedPrompts.map((prompt) => (
                         <DefaultButton
                           key={prompt.id}
-                          elementRef={itemRefs.current[filteredHistories.length + index]}
                           onClick={() => {
                             setUserPrompt(prompt.text);
                             setShowSamplePrompts(false);
                             inputEdited.current = true;
                           }}
-                          onKeyDown={handleKeyDownForItem}
                           onRenderIcon={() => <Image src={HintIcon} />}
                           styles={promptStyles}
                         >
@@ -550,9 +514,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                   </Link>
                   {showErrorMessageBar && (
                     <MessageBar messageBarType={MessageBarType.error}>
-                      {errors.length > 0
-                        ? errors[0].message
-                        : "We ran into an error and were not able to execute query."}
+                      {errorMessage ? errorMessage : "We ran into an error and were not able to execute query."}
                     </MessageBar>
                   )}
                   {showInvalidQueryMessageBar && (

src/Explorer/QueryCopilot/Shared/QueryCopilotClient.ts

@@ -13,7 +13,6 @@ import {
 import { getErrorMessage, getErrorStack, handleError } from "Common/ErrorHandlingUtils";
 import { shouldEnableCrossPartitionKey } from "Common/HeadersUtility";
 import { MinimalQueryIterator } from "Common/IteratorUtilities";
-import QueryError from "Common/QueryError";
 import { createUri } from "Common/UrlUtility";
 import { queryDocumentsPage } from "Common/dataAccess/queryDocumentsPage";
 import { configContext } from "ConfigContext";
@@ -355,7 +354,7 @@ export const QueryDocumentsPerPage = async (
     );
 
     useQueryCopilot.getState().setQueryResults(queryResults);
-    useQueryCopilot.getState().setErrors([]);
+    useQueryCopilot.getState().setErrorMessage("");
     useQueryCopilot.getState().setShowErrorMessageBar(false);
     traceSuccess(Action.ExecuteQueryGeneratedFromQueryCopilot, {
       correlationId: useQueryCopilot.getState().correlationId,
@@ -367,13 +366,12 @@ export const QueryDocumentsPerPage = async (
     const errorMessage = getErrorMessage(error);
     traceFailure(Action.ExecuteQueryGeneratedFromQueryCopilot, {
       correlationId: useQueryCopilot.getState().correlationId,
-      errorMessage,
+      errorMessage: errorMessage,
     });
     handleError(errorMessage, "executeQueryCopilotTab");
     useTabs.getState().setIsQueryErrorThrown(true);
     if (isCopilotActive) {
-      const queryErrors = QueryError.tryParse(error);
-      useQueryCopilot.getState().setErrors(queryErrors);
+      useQueryCopilot.getState().setErrorMessage(errorMessage);
       useQueryCopilot.getState().setShowErrorMessageBar(true);
     }
   } finally {

src/Explorer/QueryCopilot/Shared/QueryCopilotResults.tsx

@@ -8,7 +8,7 @@ export const QueryCopilotResults: React.FC = (): JSX.Element => {
     <QueryResultSection
       isMongoDB={false}
       queryEditorContent={useQueryCopilot.getState().selectedQuery || useQueryCopilot.getState().query}
-      errors={useQueryCopilot.getState().errors}
+      error={useQueryCopilot.getState().errorMessage}
       queryResults={useQueryCopilot.getState().queryResults}
       isExecuting={useQueryCopilot.getState().isExecuting}
       executeQueryDocumentsPage={(firstItemIndex: number) =>

src/Explorer/Sidebar.tsx

@@ -1,7 +1,6 @@
 import {
   Button,
   Menu,
-  MenuButton,
   MenuButtonProps,
   MenuItem,
   MenuList,
@@ -61,7 +60,6 @@ const useSidebarStyles = makeStyles({
     alignItems: "center",
     justifyItems: "center",
     width: "100%",
-    containerType: "size", // Use this container for "@container" queries below this.
     ...cosmosShorthands.borderBottom(),
   },
   loadingProgressBar: {
@@ -85,18 +83,6 @@ const useSidebarStyles = makeStyles({
       },
     },
   },
-  globalCommandsMenuButton: {
-    display: "initial",
-    "@container (min-width: 250px)": {
-      display: "none",
-    },
-  },
-  globalCommandsSplitButton: {
-    display: "none",
-    "@container (min-width: 250px)": {
-      display: "flex",
-    },
-  },
 });
 
 interface GlobalCommandsProps {
@@ -185,19 +171,13 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
         <Menu positioning="below-end">
           <MenuTrigger disableButtonEnhancement>
             {(triggerProps: MenuButtonProps) => (
-              <>
-                <SplitButton
-                  menuButton={{ ...triggerProps, "aria-label": "More commands" }}
-                  primaryActionButton={{ onClick: onPrimaryActionClick }}
-                  className={styles.globalCommandsSplitButton}
-                  icon={primaryAction.icon}
-                >
-                  {primaryAction.label}
-                </SplitButton>
-                <MenuButton {...triggerProps} icon={primaryAction.icon} className={styles.globalCommandsMenuButton}>
-                  New...
-                </MenuButton>
-              </>
+              <SplitButton
+                menuButton={{ ...triggerProps, "aria-label": "More commands" }}
+                primaryActionButton={{ onClick: onPrimaryActionClick }}
+                icon={primaryAction.icon}
+              >
+                {primaryAction.label}
+              </SplitButton>
             )}
           </MenuTrigger>
           <MenuPopover>
@@ -219,7 +199,7 @@ interface SidebarProps {
   explorer: Explorer;
 }
 
-const CollapseThreshold = 140;
+const CollapseThreshold = 50;
 
 export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
   const styles = useSidebarStyles();
@@ -294,7 +274,6 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
                     <div className={styles.floatingControls}>
                       <button
                         type="button"
-                        data-test="Sidebar/RefreshButton"
                         className={styles.floatingControlButton}
                         disabled={loading}
                         title="Refresh"
@@ -334,7 +313,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
           </CosmosFluentProvider>
         </Allotment.Pane>
       )}
-      <Allotment.Pane minSize={200}>
+      <Allotment.Pane minSize={800}>
         <Tabs explorer={explorer} />
       </Allotment.Pane>
     </Allotment>

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts

@@ -1,100 +0,0 @@
-// Definitions of State data
-
-import { deleteState, loadState, saveState, saveStateDebounced } from "Shared/AppStatePersistenceUtility";
-import { userContext } from "UserContext";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-
-const componentName = "DocumentsTab";
-export enum SubComponentName {
-  ColumnSizes = "ColumnSizes",
-  FilterHistory = "FilterHistory",
-  MainTabDivider = "MainTabDivider",
-}
-
-export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
-export type WidthDefinition = { widthPx: number };
-export type TabDivider = { leftPaneWidthPercent: number };
-
-/**
- *
- * @param subComponentName
- * @param collection
- * @param defaultValue Will be returned if persisted state is not found
- * @returns
- */
-export const readSubComponentState = <T>(
-  subComponentName: SubComponentName,
-  collection: ViewModels.CollectionBase,
-  defaultValue: T,
-): T => {
-  const globalAccountName = userContext.databaseAccount?.name;
-  if (!globalAccountName) {
-    const message = "Database account name not found in userContext";
-    console.error(message);
-    TelemetryProcessor.traceFailure(Action.ReadPersistedTabState, { message, componentName });
-    return defaultValue;
-  }
-
-  const state = loadState({
-    componentName: componentName,
-    subComponentName,
-    globalAccountName,
-    databaseName: collection.databaseId,
-    containerName: collection.id(),
-  }) as T;
-
-  return state || defaultValue;
-};
-
-/**
- *
- * @param subComponentName
- * @param collection
- * @param state State to save
- * @param debounce true for high-frequency calls (e.g mouse drag events)
- */
-export const saveSubComponentState = <T>(
-  subComponentName: SubComponentName,
-  collection: ViewModels.CollectionBase,
-  state: T,
-  debounce?: boolean,
-): void => {
-  const globalAccountName = userContext.databaseAccount?.name;
-  if (!globalAccountName) {
-    const message = "Database account name not found in userContext";
-    console.error(message);
-    TelemetryProcessor.traceFailure(Action.SavePersistedTabState, { message, componentName });
-    return;
-  }
-
-  (debounce ? saveStateDebounced : saveState)(
-    {
-      componentName: componentName,
-      subComponentName,
-      globalAccountName,
-      databaseName: collection.databaseId,
-      containerName: collection.id(),
-    },
-    state,
-  );
-};
-
-export const deleteSubComponentState = (subComponentName: SubComponentName, collection: ViewModels.CollectionBase) => {
-  const globalAccountName = userContext.databaseAccount?.name;
-  if (!globalAccountName) {
-    const message = "Database account name not found in userContext";
-    console.error(message);
-    TelemetryProcessor.traceFailure(Action.DeletePersistedTabState, { message, componentName });
-    return;
-  }
-
-  deleteState({
-    componentName: componentName,
-    subComponentName,
-    globalAccountName,
-    databaseName: collection.databaseId,
-    containerName: collection.id(),
-  });
-};

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx

@@ -13,7 +13,6 @@ import {
   SAVE_BUTTON_ID,
   UPDATE_BUTTON_ID,
   UPLOAD_BUTTON_ID,
-  addStringsNoDuplicate,
   buildQuery,
   getDiscardExistingDocumentChangesButtonState,
   getDiscardNewDocumentChangesButtonState,
@@ -340,10 +339,7 @@ describe("Documents tab (noSql API)", () => {
     const createMockProps = (): IDocumentsTabComponentProps => ({
       isPreferredApiMongoDB: false,
       documentIds: [],
-      collection: {
-        id: ko.observable<string>("collectionId"),
-        databaseId: "databaseId",
-      } as ViewModels.CollectionBase,
+      collection: undefined,
       partitionKey: { kind: "Hash", paths: ["/foo"], version: 2 },
       onLoadStartKey: 0,
       tabTitle: "",
@@ -384,7 +380,7 @@ describe("Documents tab (noSql API)", () => {
         .findWhere((node) => node.text() === "Edit Filter")
         .at(0)
         .simulate("click");
-      expect(wrapper.find("Input.filterInput").exists()).toBeTruthy();
+      expect(wrapper.find("#filterInput").exists()).toBeTruthy();
     });
   });
 
@@ -478,13 +474,3 @@ describe("Documents tab (noSql API)", () => {
     });
   });
 });
-
-describe("Documents tab", () => {
-  it("should add strings to array without duplicate", () => {
-    const array1 = ["a", "b", "c"];
-    const array2 = ["b", "c", "d"];
-
-    const array3 = addStringsNoDuplicate(array1, array2);
-    expect(array3).toEqual(["a", "b", "c", "d"]);
-  });
-});

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -20,12 +20,6 @@ import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
 import Explorer from "Explorer/Explorer";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
-import {
-  SubComponentName,
-  TabDivider,
-  readSubComponentState,
-  saveSubComponentState,
-} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
 import { CosmosFluentProvider, LayoutConstants, cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
@@ -48,7 +42,6 @@ import * as Logger from "../../../Common/Logger";
 import * as MongoProxyClient from "../../../Common/MongoProxyClient";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { CollectionBase } from "../../../Contracts/ViewModels";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as QueryUtils from "../../../Utils/QueryUtils";
 import { extractPartitionKeyValues } from "../../../Utils/QueryUtils";
@@ -57,8 +50,6 @@ import ObjectId from "../../Tree/ObjectId";
 import TabsBase from "../TabsBase";
 import { DocumentsTableComponent, DocumentsTableComponentItem } from "./DocumentsTableComponent";
 
-const MAX_FILTER_HISTORY_COUNT = 100; // Datalist will become scrollable, so we can afford to keep more items than fit on the screen
-
 const loadMoreHeight = LayoutConstants.rowHeight;
 export const useDocumentsTabStyles = makeStyles({
   container: {
@@ -482,24 +473,6 @@ export const buildQuery = (
   return QueryUtils.buildDocumentsQuery(filter, partitionKeyProperties, partitionKey);
 };
 
-/**
- * Export to expose to unit tests
- *
- * Add array2 to array1 without duplicates
- * @param array1
- * @param array2
- * @return array1 with array2 added without duplicates
- */
-export const addStringsNoDuplicate = (array1: string[], array2: string[]): string[] => {
-  const result = [...array1];
-  array2.forEach((item) => {
-    if (!result.includes(item)) {
-      result.push(item);
-    }
-  });
-  return result;
-};
-
 // Export to expose to unit tests
 export interface IDocumentsTabComponentProps {
   isPreferredApiMongoDB: boolean;
@@ -514,11 +487,6 @@ export interface IDocumentsTabComponentProps {
   isTabActive: boolean;
 }
 
-const getUniqueId = (collection: ViewModels.CollectionBase): string => `${collection.databaseId}-${collection.id()}`;
-
-const defaultSqlFilters = ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC'];
-const defaultMongoFilters = ['{"id":"foo"}', "{ qty: { $gte: 20 } }"];
-
 // Export to expose to unit tests
 export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabComponentProps> = ({
   isPreferredApiMongoDB,
@@ -566,13 +534,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     ViewModels.DocumentExplorerState.noDocumentSelected,
   );
 
-  // State
-  const [tabStateData, setTabStateData] = useState<TabDivider>(() =>
-    readSubComponentState(SubComponentName.MainTabDivider, _collection, {
-      leftPaneWidthPercent: 35,
-    }),
-  );
-
   const isQueryCopilotSampleContainer =
     _collection?.isSampleCollection &&
     _collection?.databaseId === QueryCopilotSampleDatabaseId &&
@@ -581,11 +542,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   // For Mongo only
   const [continuationToken, setContinuationToken] = useState<string>(undefined);
 
-  // User's filter history
-  const [lastFilterContents, setLastFilterContents] = useState<string[]>(() =>
-    readSubComponentState(SubComponentName.FilterHistory, _collection, []),
-  );
-
   const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
 
   useEffect(() => {
@@ -611,6 +567,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     }
   }, [documentIds, clickedRowIndex, editorState]);
 
+  let lastFilterContents = ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC'];
+
   const applyFilterButton = {
     enabled: true,
     visible: true,
@@ -925,7 +883,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   /**
    * Implementation using bulk delete NoSQL API
    */
-  const _deleteDocuments = useCallback(
+  let _deleteDocuments = useCallback(
     async (toDeleteDocumentIds: DocumentId[]): Promise<DocumentId[]> => {
       onExecutionErrorChange(false);
       const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDocuments, {
@@ -936,29 +894,11 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
       // TODO: Once JS SDK Bug fix for bulk deleting legacy containers (whose systemKey==1) is released:
       // Remove the check for systemKey, remove call to deleteNoSqlDocument(). deleteNoSqlDocuments() should always be called.
-      const _deleteNoSqlDocuments = async (
-        collection: CollectionBase,
-        toDeleteDocumentIds: DocumentId[],
-      ): Promise<DocumentId[]> => {
-        return partitionKey.systemKey
-          ? deleteNoSqlDocument(collection, toDeleteDocumentIds[0]).then(() => [toDeleteDocumentIds[0]])
-          : deleteNoSqlDocuments(collection, toDeleteDocumentIds);
-      };
-
-      const deletePromise = !isPreferredApiMongoDB
-        ? _deleteNoSqlDocuments(_collection, toDeleteDocumentIds)
-        : MongoProxyClient.deleteDocuments(
-            _collection.databaseId,
-            _collection as ViewModels.Collection,
-            toDeleteDocumentIds,
-          ).then(({ deletedCount, isAcknowledged }) => {
-            if (deletedCount === toDeleteDocumentIds.length && isAcknowledged) {
-              return toDeleteDocumentIds;
-            }
-            throw new Error(`Delete failed with deletedCount: ${deletedCount} and isAcknowledged: ${isAcknowledged}`);
-          });
-
-      return deletePromise
+      return (
+        partitionKey.systemKey
+          ? deleteNoSqlDocument(_collection, toDeleteDocumentIds[0]).then(() => [toDeleteDocumentIds[0]])
+          : deleteNoSqlDocuments(_collection, toDeleteDocumentIds)
+      )
         .then(
           (deletedIds) => {
             TelemetryProcessor.traceSuccess(
@@ -989,7 +929,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
         )
         .finally(() => setIsExecuting(false));
     },
-    [_collection, isPreferredApiMongoDB, onExecutionErrorChange, tabTitle],
+    [_collection, onExecutionErrorChange, tabTitle],
   );
 
   const deleteDocuments = useCallback(
@@ -1014,7 +954,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
           (error: Error) =>
             useDialog
               .getState()
-              .showOkModalDialog("Delete documents", `Deleting document(s) failed (${error.message})`),
+              .showOkModalDialog("Delete documents", `Document(s) deleted failed (${JSON.stringify(error)})`),
         )
         .finally(() => setIsExecuting(false));
     },
@@ -1280,7 +1220,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
   const onFilterKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
     if (e.key === "Enter") {
-      onApplyFilterClick();
+      refreshDocumentsGrid(true);
 
       // Suppress the default behavior of the key
       e.preventDefault();
@@ -1483,6 +1423,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
       return partitionKey;
     };
 
+    lastFilterContents = ['{"id":"foo"}', "{ qty: { $gte: 20 } }"];
     partitionKeyProperties = partitionKeyProperties?.map((partitionKeyProperty, i) => {
       if (partitionKeyProperty && ~partitionKeyProperty.indexOf(`"`)) {
         partitionKeyProperty = partitionKeyProperty.replace(/["]+/g, "");
@@ -1497,6 +1438,62 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
       return partitionKeyProperty;
     });
 
+    /**
+     * Mongo implementation
+     * TODO: update proxy to use mongo driver deleteMany
+     */
+    _deleteDocuments = (toDeleteDocumentIds: DocumentId[]): Promise<DocumentId[]> => {
+      const promises = toDeleteDocumentIds.map((documentId) => _deleteDocument(documentId));
+      return Promise.all(promises);
+    };
+
+    const __deleteDocument = async (documentId: DocumentId): Promise<DocumentId> => {
+      await MongoProxyClient.deleteDocument(_collection.databaseId, _collection as ViewModels.Collection, documentId);
+      return documentId;
+    };
+
+    const _deleteDocument = useCallback(
+      (documentId: DocumentId): Promise<DocumentId> => {
+        onExecutionErrorChange(false);
+        const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDocument, {
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle,
+        });
+        setIsExecuting(true);
+        return __deleteDocument(documentId)
+          .then(
+            (deletedDocumentId) => {
+              TelemetryProcessor.traceSuccess(
+                Action.DeleteDocument,
+                {
+                  dataExplorerArea: Constants.Areas.Tab,
+                  tabTitle,
+                },
+                startKey,
+              );
+              return deletedDocumentId;
+            },
+            (error) => {
+              onExecutionErrorChange(true);
+              console.error(error);
+              TelemetryProcessor.traceFailure(
+                Action.DeleteDocument,
+                {
+                  dataExplorerArea: Constants.Areas.Tab,
+                  tabTitle,
+                  error: getErrorMessage(error),
+                  errorStack: getErrorStack(error),
+                },
+                startKey,
+              );
+              return undefined;
+            },
+          )
+          .finally(() => setIsExecuting(false));
+      },
+      [__deleteDocument, onExecutionErrorChange, tabTitle],
+    );
+
     onSaveNewDocumentClick = useCallback((): Promise<unknown> => {
       const documentContent = JSON.parse(selectedDocumentContent);
       const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
@@ -1703,24 +1700,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   }
   // ***************** Mongo ***************************
 
-  const onApplyFilterClick = (): void => {
-    refreshDocumentsGrid(true);
-
-    // Remove duplicates, but keep order
-    if (lastFilterContents.includes(filterContent)) {
-      lastFilterContents.splice(lastFilterContents.indexOf(filterContent), 1);
-    }
-
-    // Save filter content to local storage
-    lastFilterContents.unshift(filterContent);
-
-    // Keep the list size under MAX_FILTER_HISTORY_COUNT. Drop last element if needed.
-    const limitedLastFilterContents = lastFilterContents.slice(0, MAX_FILTER_HISTORY_COUNT);
-
-    setLastFilterContents(limitedLastFilterContents);
-    saveSubComponentState(SubComponentName.FilterHistory, _collection, lastFilterContents);
-  };
-
   const refreshDocumentsGrid = useCallback(
     (applyFilterButtonPressed: boolean): void => {
       // clear documents grid
@@ -1779,11 +1758,12 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
               <div className={styles.filterRow}>
                 {!isPreferredApiMongoDB && <span> SELECT * FROM c </span>}
                 <Input
+                  id="filterInput"
                   ref={filterInput}
                   type="text"
                   size="small"
-                  list={`filtersList-${getUniqueId(_collection)}`}
-                  className={`filterInput ${styles.filterInput}`}
+                  list="filtersList"
+                  className={styles.filterInput}
                   title="Type a query predicate or choose one from the list."
                   placeholder={
                     isPreferredApiMongoDB
@@ -1797,11 +1777,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                   onBlur={() => setIsFilterFocused(false)}
                 />
 
-                <datalist id={`filtersList-${getUniqueId(_collection)}`}>
-                  {addStringsNoDuplicate(
-                    lastFilterContents,
-                    isPreferredApiMongoDB ? defaultMongoFilters : defaultSqlFilters,
-                  ).map((filter) => (
+                <datalist id="filtersList">
+                  {lastFilterContents.map((filter) => (
                     <option key={filter} value={filter} />
                   ))}
                 </datalist>
@@ -1809,7 +1786,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                 <Button
                   appearance="primary"
                   size="small"
-                  onClick={onApplyFilterClick}
+                  onClick={() => refreshDocumentsGrid(true)}
                   disabled={!applyFilterButton.enabled}
                   aria-label="Apply filter"
                   tabIndex={0}
@@ -1840,16 +1817,11 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
             )}
           </>
         )}
+
         {/* <Split> doesn't like to be a flex child */}
         <div style={{ overflow: "hidden", height: "100%" }}>
-          <Allotment
-            onDragEnd={(sizes: number[]) => {
-              tabStateData.leftPaneWidthPercent = (100 * sizes[0]) / (sizes[0] + sizes[1]);
-              saveSubComponentState(SubComponentName.MainTabDivider, _collection, tabStateData);
-              setTabStateData(tabStateData);
-            }}
-          >
-            <Allotment.Pane preferredSize={`${tabStateData.leftPaneWidthPercent}%`} minSize={55}>
+          <Allotment>
+            <Allotment.Pane preferredSize="35%" minSize={175}>
               <div style={{ height: "100%", width: "100%", overflow: "hidden" }} ref={tableContainerRef}>
                 <div className={styles.floatingControlsContainer}>
                   <div className={styles.floatingControls}>
@@ -1878,7 +1850,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                       (partitionKey.systemKey && !isPreferredApiMongoDB) ||
                       (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly)
                     }
-                    collection={_collection}
                   />
                 </div>
                 {tableItems.length > 0 && (
@@ -1894,7 +1865,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                 )}
               </div>
             </Allotment.Pane>
-            <Allotment.Pane minSize={30}>
+            <Allotment.Pane preferredSize="65%" minSize={300}>
               <div style={{ height: "100%", width: "100%" }}>
                 {isTabActive && selectedDocumentContent && selectedRows.size <= 1 && (
                   <EditorReact

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2Mongo.test.tsx

@@ -1,4 +1,4 @@
-import { deleteDocuments } from "Common/MongoProxyClient";
+import { deleteDocument } from "Common/MongoProxyClient";
 import { Platform, updateConfigContext } from "ConfigContext";
 import { EditorReactProps } from "Explorer/Controls/Editor/EditorReact";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
@@ -49,7 +49,7 @@ jest.mock("Common/MongoProxyClient", () => ({
       id: "id1",
     }),
   ),
-  deleteDocuments: jest.fn(() => Promise.resolve()),
+  deleteDocument: jest.fn(() => Promise.resolve()),
 }));
 
 jest.mock("Explorer/Controls/Editor/EditorReact", () => ({
@@ -179,8 +179,8 @@ describe("Documents tab (Mongo API)", () => {
     });
 
     it("clicking Delete Document asks for confirmation", () => {
-      const mockDeleteDocuments = deleteDocuments as jest.Mock;
-      mockDeleteDocuments.mockClear();
+      const mockDeleteDocument = deleteDocument as jest.Mock;
+      mockDeleteDocument.mockClear();
 
       act(() => {
         useCommandBar
@@ -189,7 +189,7 @@ describe("Documents tab (Mongo API)", () => {
           .onCommandClick(undefined);
       });
 
-      expect(mockDeleteDocuments).toHaveBeenCalled();
+      expect(mockDeleteDocument).toHaveBeenCalled();
     });
   });
 });

src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx

@@ -1,7 +1,6 @@
 import { TableRowId } from "@fluentui/react-components";
 import { mount } from "enzyme";
 import React from "react";
-import * as ViewModels from "../../../Contracts/ViewModels";
 import { DocumentsTableComponent, IDocumentsTableComponentProps } from "./DocumentsTableComponent";
 
 const PARTITION_KEY_HEADER = "partitionKey";
@@ -26,10 +25,6 @@ describe("DocumentsTableComponent", () => {
       partitionKeyHeaders: [PARTITION_KEY_HEADER],
     },
     isSelectionDisabled: false,
-    collection: {
-      databaseId: "db",
-      id: ((): string => "coll") as ko.Observable<string>,
-    } as ViewModels.CollectionBase,
   });
 
   it("should render documents and partition keys in header", () => {

src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx

@@ -1,5 +1,4 @@
 import {
-  createTableColumn,
   Menu,
   MenuItem,
   MenuList,
@@ -17,25 +16,19 @@ import {
   TableRow,
   TableRowId,
   TableSelectionCell,
+  createTableColumn,
   useArrowNavigationGroup,
   useTableColumnSizing_unstable,
   useTableFeatures,
   useTableSelection,
 } from "@fluentui/react-components";
 import { NormalizedEventKey } from "Common/Constants";
-import {
-  ColumnSizesMap,
-  readSubComponentState,
-  saveSubComponentState,
-  SubComponentName,
-} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
 import { INITIAL_SELECTED_ROW_INDEX, useDocumentsTabStyles } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
 import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
 import { LayoutConstants } from "Explorer/Theme/ThemeUtil";
 import { isEnvironmentCtrlPressed, isEnvironmentShiftPressed } from "Utils/KeyboardUtils";
 import React, { useCallback, useMemo } from "react";
 import { FixedSizeList as List, ListChildComponentProps } from "react-window";
-import * as ViewModels from "../../../Contracts/ViewModels";
 
 export type DocumentsTableComponentItem = {
   id: string;
@@ -54,7 +47,6 @@ export interface IDocumentsTableComponentProps {
   columnHeaders: ColumnHeaders;
   style?: React.CSSProperties;
   isSelectionDisabled?: boolean;
-  collection: ViewModels.CollectionBase;
 }
 
 interface TableRowData extends RowStateBase<DocumentsTableComponentItem> {
@@ -67,10 +59,6 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps {
   data: TableRowData[];
 }
 
-const defaultSize = {
-  idealWidth: 200,
-  minWidth: 50,
-};
 export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
   items,
   onSelectedRowsChange,
@@ -79,53 +67,32 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   size,
   columnHeaders,
   isSelectionDisabled,
-  collection,
 }: IDocumentsTableComponentProps) => {
-  const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() => {
-    const columnIds = ["id"].concat(columnHeaders.partitionKeyHeaders);
-    const columnSizesMap: ColumnSizesMap = readSubComponentState(SubComponentName.ColumnSizes, collection, {});
-    const columnSizesPx: TableColumnSizingOptions = {};
-    columnIds.forEach((columnId) => {
-      if (
-        !columnSizesMap ||
-        !columnSizesMap[columnId] ||
-        columnSizesMap[columnId].widthPx === undefined ||
-        isNaN(columnSizesMap[columnId].widthPx)
-      ) {
-        columnSizesPx[columnId] = defaultSize;
-      } else {
-        columnSizesPx[columnId] = {
-          idealWidth: columnSizesMap[columnId].widthPx,
-          minWidth: 50,
-        };
-      }
-    });
-    return columnSizesPx;
-  });
-
   const styles = useDocumentsTabStyles();
 
-  const onColumnResize = React.useCallback((_, { columnId, width }: { columnId: string; width: number }) => {
-    setColumnSizingOptions((state) => {
-      const newSizingOptions = {
-        ...state,
-        [columnId]: {
-          ...state[columnId],
-          idealWidth: width,
-        },
-      };
+  const initialSizingOptions: TableColumnSizingOptions = {
+    id: {
+      idealWidth: 280,
+      minWidth: 50,
+    },
+  };
+  columnHeaders.partitionKeyHeaders.forEach((pkHeader) => {
+    initialSizingOptions[pkHeader] = {
+      idealWidth: 200,
+      minWidth: 50,
+    };
+  });
 
-      const persistentSizes = Object.keys(newSizingOptions).reduce((acc, key) => {
-        acc[key] = {
-          widthPx: newSizingOptions[key].idealWidth,
-        };
-        return acc;
-      }, {} as ColumnSizesMap);
+  const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(initialSizingOptions);
 
-      saveSubComponentState(SubComponentName.ColumnSizes, collection, persistentSizes, true);
-
-      return newSizingOptions;
-    });
+  const onColumnResize = React.useCallback((_, { columnId, width }) => {
+    setColumnSizingOptions((state) => ({
+      ...state,
+      [columnId]: {
+        ...state[columnId],
+        idealWidth: width,
+      },
+    }));
   }, []);
 
   // Columns must be a static object and cannot change on re-renders otherwise React will complain about too many refreshes

src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap

@@ -38,11 +38,9 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
         }
       }
     >
-      <Allotment
-        onDragEnd={[Function]}
-      >
+      <Allotment>
         <Allotment.Pane
-          minSize={55}
+          minSize={175}
           preferredSize="35%"
         >
           <div
@@ -79,12 +77,6 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
               className="___9o87uj0_0000000 ffefeo0"
             >
               <DocumentsTableComponent
-                collection={
-                  {
-                    "databaseId": "databaseId",
-                    "id": [Function],
-                  }
-                }
                 columnHeaders={
                   {
                     "idHeader": "id",
@@ -105,7 +97,8 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
           </div>
         </Allotment.Pane>
         <Allotment.Pane
-          minSize={30}
+          minSize={300}
+          preferredSize="65%"
         >
           <div
             style={

src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap

@@ -2,12 +2,6 @@
 
 exports[`DocumentsTableComponent should not render selection column when isSelectionDisabled is true 1`] = `
 <DocumentsTableComponent
-  collection={
-    {
-      "databaseId": "db",
-      "id": [Function],
-    }
-  }
   columnHeaders={
     {
       "idHeader": "id",
@@ -1001,12 +995,6 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
 
 exports[`DocumentsTableComponent should render documents and partition keys in header 1`] = `
 <DocumentsTableComponent
-  collection={
-    {
-      "databaseId": "db",
-      "id": [Function],
-    }
-  }
   columnHeaders={
     {
       "idHeader": "id",

src/Explorer/Tabs/MongoQueryTab/MongoQueryTab.tsx

@@ -3,7 +3,7 @@ import MongoUtility from "../../../Common/MongoUtility";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import Explorer from "../../Explorer";
 import { NewQueryTab } from "../QueryTab/QueryTab";
-import { IQueryTabComponentProps, ITabAccessor, QueryTabComponent } from "../QueryTab/QueryTabComponent";
+import QueryTabComponent, { IQueryTabComponentProps, ITabAccessor } from "../QueryTab/QueryTabComponent";
 
 export interface IMongoQueryTabProps {
   container: Explorer;

src/Explorer/Tabs/QueryTab/ErrorList.tsx

@@ -1,124 +0,0 @@
-import {
-  Button,
-  DataGrid,
-  DataGridBody,
-  DataGridCell,
-  DataGridHeader,
-  DataGridHeaderCell,
-  DataGridRow,
-  TableCellLayout,
-  TableColumnDefinition,
-  TableColumnSizingOptions,
-  createTableColumn,
-  tokens,
-} from "@fluentui/react-components";
-import { ErrorCircleFilled, MoreHorizontalRegular, WarningFilled } from "@fluentui/react-icons";
-import QueryError, { QueryErrorSeverity, compareSeverity } from "Common/QueryError";
-import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
-import { useNotificationConsole } from "hooks/useNotificationConsole";
-import React from "react";
-
-const severityIcons = {
-  [QueryErrorSeverity.Error]: <ErrorCircleFilled color={tokens.colorPaletteRedBackground3} />,
-  [QueryErrorSeverity.Warning]: <WarningFilled color={tokens.colorPaletteYellowForeground1} />,
-};
-
-export const ErrorList: React.FC<{ errors: QueryError[] }> = ({ errors }) => {
-  const styles = useQueryTabStyles();
-  const onErrorDetailsClick = (): boolean => {
-    useNotificationConsole.getState().expandConsole();
-    return false;
-  };
-
-  const columns: TableColumnDefinition<QueryError>[] = [
-    createTableColumn<QueryError>({
-      columnId: "code",
-      compare: (item1, item2) => item1.code.localeCompare(item2.code),
-      renderHeaderCell: () => null,
-      renderCell: (item) => item.code,
-    }),
-    createTableColumn<QueryError>({
-      columnId: "severity",
-      compare: (item1, item2) => compareSeverity(item1.severity, item2.severity),
-      renderHeaderCell: () => null,
-      renderCell: (item) => <TableCellLayout media={severityIcons[item.severity]}>{item.severity}</TableCellLayout>,
-    }),
-    createTableColumn<QueryError>({
-      columnId: "location",
-      compare: (item1, item2) => item1.location?.start?.offset - item2.location?.start?.offset,
-      renderHeaderCell: () => "Location",
-      renderCell: (item) =>
-        item.location
-          ? item.location.start.lineNumber
-            ? `Line ${item.location.start.lineNumber}`
-            : "<unknown>"
-          : "<no location>",
-    }),
-    createTableColumn<QueryError>({
-      columnId: "message",
-      compare: (item1, item2) => item1.message.localeCompare(item2.message),
-      renderHeaderCell: () => "Message",
-      renderCell: (item) => (
-        <div className={styles.errorListMessageCell}>
-          <div className={styles.errorListMessage}>{item.message}</div>
-          <div>
-            <Button
-              aria-label="Details"
-              appearance="subtle"
-              icon={<MoreHorizontalRegular />}
-              onClick={onErrorDetailsClick}
-            />
-          </div>
-        </div>
-      ),
-    }),
-  ];
-
-  const columnSizingOptions: TableColumnSizingOptions = {
-    code: {
-      minWidth: 75,
-      idealWidth: 75,
-      defaultWidth: 75,
-    },
-    severity: {
-      minWidth: 100,
-      idealWidth: 100,
-      defaultWidth: 100,
-    },
-    location: {
-      minWidth: 100,
-      idealWidth: 100,
-      defaultWidth: 100,
-    },
-    message: {
-      minWidth: 500,
-    },
-  };
-
-  return (
-    <DataGrid
-      data-test="QueryTab/ResultsPane/ErrorList"
-      items={errors}
-      columns={columns}
-      sortable
-      resizableColumns
-      columnSizingOptions={columnSizingOptions}
-      focusMode="composite"
-    >
-      <DataGridHeader>
-        <DataGridRow>
-          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
-        </DataGridRow>
-      </DataGridHeader>
-      <DataGridBody<QueryError>>
-        {({ item, rowId }) => (
-          <DataGridRow<QueryError> key={rowId} data-test={`Row:${rowId}`}>
-            {({ columnId, renderCell }) => (
-              <DataGridCell data-test={`Row:${rowId}/Column:${columnId}`}>{renderCell(item)}</DataGridCell>
-            )}
-          </DataGridRow>
-        )}
-      </DataGridBody>
-    </DataGrid>
-  );
-};

src/Explorer/Tabs/QueryTab/QueryResultSection.tsx

@@ -1,93 +1,544 @@
-import { Link } from "@fluentui/react-components";
-import QueryError from "Common/QueryError";
-import { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar";
-import { MessageBanner } from "Explorer/Controls/MessageBanner";
-import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
+import {
+  DetailsList,
+  DetailsListLayoutMode,
+  IColumn,
+  Icon,
+  IconButton,
+  Link,
+  Pivot,
+  PivotItem,
+  SelectionMode,
+  Stack,
+  Text,
+  TooltipHost,
+} from "@fluentui/react";
+import { HttpHeaders, NormalizedEventKey } from "Common/Constants";
+import MongoUtility from "Common/MongoUtility";
+import { QueryMetrics } from "Contracts/DataModels";
+import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
+import { IDocument } from "Explorer/Tabs/QueryTab/QueryTabComponent";
+import { userContext } from "UserContext";
+import copy from "clipboard-copy";
+import { useNotificationConsole } from "hooks/useNotificationConsole";
 import React from "react";
+import CopilotCopy from "../../../../images/CopilotCopy.svg";
+import DownloadQueryMetrics from "../../../../images/DownloadQuery.svg";
+import QueryEditorNext from "../../../../images/Query-Editor-Next.svg";
 import RunQuery from "../../../../images/RunQuery.png";
+import InfoColor from "../../../../images/info_color.svg";
 import { QueryResults } from "../../../Contracts/ViewModels";
-import { ErrorList } from "./ErrorList";
-import { ResultsView } from "./ResultsView";
 
-export interface ResultsViewProps {
+interface QueryResultProps {
   isMongoDB: boolean;
+  queryEditorContent: string;
+  error: string;
+  isExecuting: boolean;
   queryResults: QueryResults;
   executeQueryDocumentsPage: (firstItemIndex: number) => Promise<void>;
 }
 
-interface QueryResultProps extends ResultsViewProps {
-  queryEditorContent: string;
-  errors: QueryError[];
-  isExecuting: boolean;
-}
-
-const ExecuteQueryCallToAction: React.FC = () => {
-  const styles = useQueryTabStyles();
-  return (
-    <div data-test="QueryTab/ResultsPane/ExecuteCTA" className={styles.executeCallToAction}>
-      <div>
-        <p>
-          <img src={RunQuery} aria-hidden="true" />
-        </p>
-        <p>Execute a query to see the results</p>
-      </div>
-    </div>
-  );
-};
-
 export const QueryResultSection: React.FC<QueryResultProps> = ({
   isMongoDB,
   queryEditorContent,
-  errors,
+  error,
   queryResults,
-  executeQueryDocumentsPage,
   isExecuting,
+  executeQueryDocumentsPage,
 }: QueryResultProps): JSX.Element => {
-  const styles = useQueryTabStyles();
+  const queryMetrics = React.useRef(queryResults?.headers?.[HttpHeaders.queryMetrics]);
+
+  React.useEffect(() => {
+    const latestQueryMetrics = queryResults?.headers?.[HttpHeaders.queryMetrics];
+    if (latestQueryMetrics && Object.keys(latestQueryMetrics).length > 0) {
+      queryMetrics.current = latestQueryMetrics;
+    }
+  }, [queryResults]);
+
+  const onRender = (item: IDocument): JSX.Element => (
+    <>
+      <Text style={{ paddingLeft: 10, margin: 0 }}>{`${item.metric}`}</Text>
+    </>
+  );
+  const columns: IColumn[] = [
+    {
+      key: "column1",
+      name: "Description",
+      iconName: "Info",
+      isIconOnly: true,
+      minWidth: 10,
+      maxWidth: 12,
+      iconClassName: "iconheadercell",
+      data: String,
+      fieldName: "",
+      onRender: (item: IDocument) => {
+        if (item.toolTip !== "") {
+          return (
+            <>
+              <TooltipHost content={`${item.toolTip}`}>
+                <Link style={{ color: "#323130" }}>
+                  <Icon iconName="Info" ariaLabel={`${item.toolTip}`} className="panelInfoIcon" tabIndex={0} />
+                </Link>
+              </TooltipHost>
+            </>
+          );
+        } else {
+          return undefined;
+        }
+      },
+    },
+    {
+      key: "column2",
+      name: "METRIC",
+      minWidth: 200,
+      data: String,
+      fieldName: "metric",
+      onRender,
+    },
+    {
+      key: "column3",
+      name: "VALUE",
+      minWidth: 200,
+      data: String,
+      fieldName: "value",
+    },
+  ];
   const maybeSubQuery = queryEditorContent && /.*\(.*SELECT.*\)/i.test(queryEditorContent);
+  const queryResultsString = queryResults
+    ? isMongoDB
+      ? MongoUtility.tojson(queryResults.documents, undefined, false)
+      : JSON.stringify(queryResults.documents, undefined, 4)
+    : "";
+
+  const onErrorDetailsClick = (): boolean => {
+    useNotificationConsole.getState().expandConsole();
+
+    return false;
+  };
+
+  const onErrorDetailsKeyPress = (event: React.KeyboardEvent<HTMLAnchorElement>): boolean => {
+    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
+      onErrorDetailsClick();
+      return false;
+    }
+
+    return true;
+  };
+
+  const onDownloadQueryMetricsCsvClick = (): boolean => {
+    downloadQueryMetricsCsvData();
+    return false;
+  };
+
+  const onDownloadQueryMetricsCsvKeyPress = (event: React.KeyboardEvent<HTMLAnchorElement>): boolean => {
+    if (event.key === NormalizedEventKey.Space || NormalizedEventKey.Enter) {
+      downloadQueryMetricsCsvData();
+      return false;
+    }
+
+    return true;
+  };
+
+  const downloadQueryMetricsCsvData = (): void => {
+    const csvData: string = generateQueryMetricsCsvData();
+    if (!csvData) {
+      return;
+    }
+
+    if (navigator.msSaveBlob) {
+      // for IE and Edge
+      navigator.msSaveBlob(
+        new Blob([csvData], { type: "data:text/csv;charset=utf-8" }),
+        "PerPartitionQueryMetrics.csv",
+      );
+    } else {
+      const downloadLink: HTMLAnchorElement = document.createElement("a");
+      downloadLink.href = "data:text/csv;charset=utf-8," + encodeURI(csvData);
+      downloadLink.target = "_self";
+      downloadLink.download = "QueryMetricsPerPartition.csv";
+
+      // for some reason, FF displays the download prompt only when
+      // the link is added to the dom so we add and remove it
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      downloadLink.remove();
+    }
+  };
+
+  const getAggregatedQueryMetrics = (): QueryMetrics => {
+    const aggregatedQueryMetrics = {
+      documentLoadTime: 0,
+      documentWriteTime: 0,
+      indexHitDocumentCount: 0,
+      outputDocumentCount: 0,
+      outputDocumentSize: 0,
+      indexLookupTime: 0,
+      retrievedDocumentCount: 0,
+      retrievedDocumentSize: 0,
+      vmExecutionTime: 0,
+      runtimeExecutionTimes: {
+        queryEngineExecutionTime: 0,
+        systemFunctionExecutionTime: 0,
+        userDefinedFunctionExecutionTime: 0,
+      },
+      totalQueryExecutionTime: 0,
+    } as QueryMetrics;
+
+    if (queryMetrics.current) {
+      Object.keys(queryMetrics.current).forEach((partitionKeyRangeId) => {
+        const queryMetricsPerPartition = queryMetrics.current[partitionKeyRangeId];
+        if (!queryMetricsPerPartition) {
+          return;
+        }
+        aggregatedQueryMetrics.documentLoadTime += queryMetricsPerPartition.documentLoadTime?.totalMilliseconds() || 0;
+        aggregatedQueryMetrics.documentWriteTime +=
+          queryMetricsPerPartition.documentWriteTime?.totalMilliseconds() || 0;
+        aggregatedQueryMetrics.indexHitDocumentCount += queryMetricsPerPartition.indexHitDocumentCount || 0;
+        aggregatedQueryMetrics.outputDocumentCount += queryMetricsPerPartition.outputDocumentCount || 0;
+        aggregatedQueryMetrics.outputDocumentSize += queryMetricsPerPartition.outputDocumentSize || 0;
+        aggregatedQueryMetrics.indexLookupTime += queryMetricsPerPartition.indexLookupTime?.totalMilliseconds() || 0;
+        aggregatedQueryMetrics.retrievedDocumentCount += queryMetricsPerPartition.retrievedDocumentCount || 0;
+        aggregatedQueryMetrics.retrievedDocumentSize += queryMetricsPerPartition.retrievedDocumentSize || 0;
+        aggregatedQueryMetrics.vmExecutionTime += queryMetricsPerPartition.vmExecutionTime?.totalMilliseconds() || 0;
+        aggregatedQueryMetrics.totalQueryExecutionTime +=
+          queryMetricsPerPartition.totalQueryExecutionTime?.totalMilliseconds() || 0;
+        aggregatedQueryMetrics.runtimeExecutionTimes.queryEngineExecutionTime +=
+          queryMetricsPerPartition.runtimeExecutionTimes?.queryEngineExecutionTime?.totalMilliseconds() || 0;
+        aggregatedQueryMetrics.runtimeExecutionTimes.systemFunctionExecutionTime +=
+          queryMetricsPerPartition.runtimeExecutionTimes?.systemFunctionExecutionTime?.totalMilliseconds() || 0;
+        aggregatedQueryMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime +=
+          queryMetricsPerPartition.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.totalMilliseconds() || 0;
+      });
+    }
+
+    return aggregatedQueryMetrics;
+  };
+
+  const generateQueryMetricsCsvData = (): string => {
+    if (queryMetrics.current) {
+      let csvData =
+        [
+          "Partition key range id",
+          "Retrieved document count",
+          "Retrieved document size (in bytes)",
+          "Output document count",
+          "Output document size (in bytes)",
+          "Index hit document count",
+          "Index lookup time (ms)",
+          "Document load time (ms)",
+          "Query engine execution time (ms)",
+          "System function execution time (ms)",
+          "User defined function execution time (ms)",
+          "Document write time (ms)",
+        ].join(",") + "\n";
+
+      Object.keys(queryMetrics.current).forEach((partitionKeyRangeId) => {
+        const queryMetricsPerPartition = queryMetrics.current[partitionKeyRangeId];
+        csvData +=
+          [
+            partitionKeyRangeId,
+            queryMetricsPerPartition.retrievedDocumentCount,
+            queryMetricsPerPartition.retrievedDocumentSize,
+            queryMetricsPerPartition.outputDocumentCount,
+            queryMetricsPerPartition.outputDocumentSize,
+            queryMetricsPerPartition.indexHitDocumentCount,
+            queryMetricsPerPartition.indexLookupTime?.totalMilliseconds(),
+            queryMetricsPerPartition.documentLoadTime?.totalMilliseconds(),
+            queryMetricsPerPartition.runtimeExecutionTimes?.queryEngineExecutionTime?.totalMilliseconds(),
+            queryMetricsPerPartition.runtimeExecutionTimes?.systemFunctionExecutionTime?.totalMilliseconds(),
+            queryMetricsPerPartition.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.totalMilliseconds(),
+            queryMetricsPerPartition.documentWriteTime?.totalMilliseconds(),
+          ].join(",") + "\n";
+      });
+
+      return csvData;
+    }
+
+    return undefined;
+  };
+
+  const onFetchNextPageClick = async (): Promise<void> => {
+    const { firstItemIndex, itemCount } = queryResults;
+    await executeQueryDocumentsPage(firstItemIndex + itemCount - 1);
+  };
+
+  const generateQueryStatsItems = (): IDocument[] => {
+    const items: IDocument[] = [
+      {
+        metric: "Request Charge",
+        value: `${queryResults.requestCharge} RUs`,
+        toolTip: "Request Charge",
+      },
+      {
+        metric: "Showing Results",
+        value: queryResults.itemCount > 0 ? `${queryResults.firstItemIndex} - ${queryResults.lastItemIndex}` : `0 - 0`,
+        toolTip: "Showing Results",
+      },
+    ];
+
+    if (userContext.apiType === "SQL") {
+      const aggregatedQueryMetrics = getAggregatedQueryMetrics();
+      items.push(
+        {
+          metric: "Retrieved document count",
+          value: aggregatedQueryMetrics.retrievedDocumentCount?.toString() || "",
+          toolTip: "Total number of retrieved documents",
+        },
+        {
+          metric: "Retrieved document size",
+          value: `${aggregatedQueryMetrics.retrievedDocumentSize?.toString() || 0} bytes`,
+          toolTip: "Total size of retrieved documents in bytes",
+        },
+        {
+          metric: "Output document count",
+          value: aggregatedQueryMetrics.outputDocumentCount?.toString() || "",
+          toolTip: "Number of output documents",
+        },
+        {
+          metric: "Output document size",
+          value: `${aggregatedQueryMetrics.outputDocumentSize?.toString() || 0} bytes`,
+          toolTip: "Total size of output documents in bytes",
+        },
+        {
+          metric: "Index hit document count",
+          value: aggregatedQueryMetrics.indexHitDocumentCount?.toString() || "",
+          toolTip: "Total number of documents matched by the filter",
+        },
+        {
+          metric: "Index lookup time",
+          value: `${aggregatedQueryMetrics.indexLookupTime?.toString() || 0} ms`,
+          toolTip: "Time spent in physical index layer",
+        },
+        {
+          metric: "Document load time",
+          value: `${aggregatedQueryMetrics.documentLoadTime?.toString() || 0} ms`,
+          toolTip: "Time spent in loading documents",
+        },
+        {
+          metric: "Query engine execution time",
+          value: `${aggregatedQueryMetrics.runtimeExecutionTimes?.queryEngineExecutionTime?.toString() || 0} ms`,
+          toolTip:
+            "Time spent by the query engine to execute the query expression (excludes other execution times like load documents or write results)",
+        },
+        {
+          metric: "System function execution time",
+          value: `${aggregatedQueryMetrics.runtimeExecutionTimes?.systemFunctionExecutionTime?.toString() || 0} ms`,
+          toolTip: "Total time spent executing system (built-in) functions",
+        },
+        {
+          metric: "User defined function execution time",
+          value: `${
+            aggregatedQueryMetrics.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.toString() || 0
+          } ms`,
+          toolTip: "Total time spent executing user-defined functions",
+        },
+        {
+          metric: "Document write time",
+          value: `${aggregatedQueryMetrics.documentWriteTime.toString() || 0} ms`,
+          toolTip: "Time spent to write query result set to response buffer",
+        },
+      );
+    }
+
+    if (queryResults.roundTrips) {
+      items.push({
+        metric: "Round Trips",
+        value: queryResults.roundTrips?.toString(),
+        toolTip: "Number of round trips",
+      });
+    }
+
+    if (queryResults.activityId) {
+      items.push({
+        metric: "Activity id",
+        value: queryResults.activityId,
+        toolTip: "",
+      });
+    }
+
+    return items;
+  };
+
+  const onClickCopyResults = (): void => {
+    copy(queryResultsString);
+  };
 
   return (
-    <div data-test="QueryTab/ResultsPane" className={styles.queryResultsPanel}>
-      {isExecuting && <IndeterminateProgressBar />}
-      <MessageBanner
-        messageId="QueryEditor.EmptyMongoQuery"
-        visible={isMongoDB && queryEditorContent.length === 0}
-        className={styles.queryResultsMessage}
-      >
-        Start by writing a Mongo query, for example: <strong>{"{'id':'foo'}"}</strong> or{" "}
-        <strong>
-          {"{ "}
-          {" }"}
-        </strong>{" "}
-        to get all the documents.
-      </MessageBanner>
-      {/* {maybeSubQuery && ( */}
-      <MessageBanner
-        messageId="QueryEditor.SubQueryWarning"
-        visible={maybeSubQuery}
-        className={styles.queryResultsMessage}
-      >
-        We detected you may be using a subquery. To learn more about subqueries effectively,{" "}
-        <Link
-          href="https://learn.microsoft.com/azure/cosmos-db/nosql/query/subquery"
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          visit the documentation
-        </Link>
-      </MessageBanner>
-      {/* <!-- Query Results & Errors Content Container - Start--> */}
-      {errors.length > 0 ? (
-        <ErrorList errors={errors} />
-      ) : queryResults ? (
-        <ResultsView
-          queryResults={queryResults}
-          executeQueryDocumentsPage={executeQueryDocumentsPage}
-          isMongoDB={isMongoDB}
-        />
-      ) : (
-        <ExecuteQueryCallToAction />
+    <Stack style={{ height: "100%" }}>
+      {isMongoDB && queryEditorContent.length === 0 && (
+        <div className="mongoQueryHelper">
+          Start by writing a Mongo query, for example: <strong>{"{'id':'foo'}"}</strong> or{" "}
+          <strong>
+            {"{ "}
+            {" }"}
+          </strong>{" "}
+          to get all the documents.
+        </div>
       )}
-    </div>
+      {maybeSubQuery && (
+        <div className="warningErrorContainer" aria-live="assertive">
+          <div className="warningErrorContent">
+            <span>
+              <img className="paneErrorIcon" src={InfoColor} alt="Error" />
+            </span>
+            <span className="warningErrorDetailsLinkContainer">
+              We detected you may be using a subquery. To learn more about subqueries effectively,{" "}
+              <a
+                href="https://learn.microsoft.com/azure/cosmos-db/nosql/query/subquery"
+                target="_blank"
+                rel="noreferrer"
+              >
+                visit the documentation
+              </a>
+            </span>
+          </div>
+        </div>
+      )}
+      {/* <!-- Query Errors Tab - Start--> */}
+      {error && (
+        <div className="active queryErrorsHeaderContainer">
+          <span className="queryErrors" data-toggle="tab">
+            Errors
+          </span>
+        </div>
+      )}
+      {/* <!-- Query Errors Tab - End --> */}
+      {/* <!-- Query Results & Errors Content Container - Start--> */}
+      <div className="queryResultErrorContentContainer">
+        {!queryResults && !error && !isExecuting && (
+          <div className="queryEditorWatermark">
+            <p>
+              <img src={RunQuery} alt="Execute Query Watermark" />
+            </p>
+            <p className="queryEditorWatermarkText">Execute a query to see the results</p>
+          </div>
+        )}
+        {(queryResults || !!error) && (
+          <div className="queryResultsErrorsContent">
+            {!error && (
+              <Pivot aria-label="Successful execution" style={{ height: "100%" }}>
+                <PivotItem
+                  headerText="Results"
+                  headerButtonProps={{
+                    "data-order": 1,
+                    "data-title": "Results",
+                  }}
+                  style={{ height: "100%" }}
+                >
+                  <div className="result-metadata">
+                    <span>
+                      <span>
+                        {queryResults.itemCount > 0
+                          ? `${queryResults.firstItemIndex} - ${queryResults.lastItemIndex}`
+                          : `0 - 0`}
+                      </span>
+                    </span>
+                    {queryResults.hasMoreResults && (
+                      <>
+                        <span className="queryResultDivider">|</span>
+                        <span className="queryResultNextEnable">
+                          <a onClick={() => onFetchNextPageClick()}>
+                            <span>Load more</span>
+                            <img className="queryResultnextImg" src={QueryEditorNext} alt="Fetch next page" />
+                          </a>
+                        </span>
+                      </>
+                    )}
+                    <IconButton
+                      style={{
+                        height: "100%",
+                        verticalAlign: "middle",
+                        float: "right",
+                      }}
+                      iconProps={{ imageProps: { src: CopilotCopy } }}
+                      title="Copy to Clipboard"
+                      ariaLabel="Copy"
+                      onClick={onClickCopyResults}
+                    />
+                  </div>
+                  {queryResults && queryResultsString?.length > 0 && !error && (
+                    <div
+                      style={{
+                        paddingBottom: "100px",
+                        height: "100%",
+                      }}
+                    >
+                      <EditorReact
+                        language={"json"}
+                        content={queryResultsString}
+                        isReadOnly={true}
+                        ariaLabel={"Query results"}
+                      />
+                    </div>
+                  )}
+                </PivotItem>
+                <PivotItem
+                  headerText="Query Stats"
+                  headerButtonProps={{
+                    "data-order": 2,
+                    "data-title": "Query Stats",
+                  }}
+                  style={{ height: "100%", overflowY: "scroll" }}
+                >
+                  {queryResults && !error && (
+                    <div className="queryMetricsSummaryContainer">
+                      <div className="queryMetricsSummary">
+                        <h3>Query Statistics</h3>
+                        <DetailsList
+                          items={generateQueryStatsItems()}
+                          columns={columns}
+                          selectionMode={SelectionMode.none}
+                          layoutMode={DetailsListLayoutMode.justified}
+                          compact={true}
+                        />
+                      </div>
+                      {userContext.apiType === "SQL" && (
+                        <div className="downloadMetricsLinkContainer">
+                          <a
+                            id="downloadMetricsLink"
+                            role="button"
+                            tabIndex={0}
+                            onClick={() => onDownloadQueryMetricsCsvClick()}
+                            onKeyPress={(event: React.KeyboardEvent<HTMLAnchorElement>) =>
+                              onDownloadQueryMetricsCsvKeyPress(event)
+                            }
+                          >
+                            <img
+                              className="downloadCsvImg"
+                              src={DownloadQueryMetrics}
+                              alt="download query metrics csv"
+                            />
+                            <span>Per-partition query metrics (CSV)</span>
+                          </a>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </PivotItem>
+              </Pivot>
+            )}
+            {/* <!-- Query Errors Content - Start--> */}
+            {!!error && (
+              <div className="tab-pane active">
+                <div className="errorContent">
+                  <span className="errorMessage">{error}</span>
+                  <span className="errorDetailsLink">
+                    <a
+                      onClick={() => onErrorDetailsClick()}
+                      onKeyPress={(event: React.KeyboardEvent<HTMLAnchorElement>) => onErrorDetailsKeyPress(event)}
+                      id="error-display"
+                      tabIndex={0}
+                      aria-label="Error details link"
+                    >
+                      More details
+                    </a>
+                  </span>
+                </div>
+              </div>
+            )}
+            {/* <!-- Query Errors Content - End--> */}
+          </div>
+        )}
+      </div>
+    </Stack>
   );
 };

src/Explorer/Tabs/QueryTab/QueryTab.tsx

@@ -7,11 +7,10 @@ import * as DataModels from "../../../Contracts/DataModels";
 import type { QueryTabOptions } from "../../../Contracts/ViewModels";
 import { useTabs } from "../../../hooks/useTabs";
 import Explorer from "../../Explorer";
-import {
+import QueryTabComponent, {
   IQueryTabComponentProps,
   ITabAccessor,
-  QueryTabComponent,
-  QueryTabCopilotComponent,
+  QueryTabFunctionComponent,
 } from "../../Tabs/QueryTab/QueryTabComponent";
 import TabsBase from "../TabsBase";
 
@@ -50,7 +49,7 @@ export class NewQueryTab extends TabsBase {
   public render(): JSX.Element {
     return userContext.apiType === "SQL" ? (
       <CopilotProvider>
-        <QueryTabCopilotComponent {...this.iQueryTabComponentProps} />
+        <QueryTabFunctionComponent {...this.iQueryTabComponentProps} />
       </CopilotProvider>
     ) : (
       <QueryTabComponent {...this.iQueryTabComponentProps} />

src/Explorer/Tabs/QueryTab/QueryTabComponent.test.tsx

@@ -2,10 +2,9 @@ import { fireEvent, render } from "@testing-library/react";
 import { CollectionTabKind } from "Contracts/ViewModels";
 import { CopilotProvider } from "Explorer/QueryCopilot/QueryCopilotContext";
 import { QueryCopilotPromptbar } from "Explorer/QueryCopilot/QueryCopilotPromptbar";
-import {
+import QueryTabComponent, {
   IQueryTabComponentProps,
-  QueryTabComponent,
-  QueryTabCopilotComponent,
+  QueryTabFunctionComponent,
 } from "Explorer/Tabs/QueryTab/QueryTabComponent";
 import TabsBase from "Explorer/Tabs/TabsBase";
 import { updateUserContext, userContext } from "UserContext";
@@ -43,7 +42,7 @@ describe("QueryTabComponent", () => {
 
     const { container } = render(<QueryTabComponent {...propsMock} />);
 
-    const launchCopilotButton = container.querySelector('[data-test="QueryTab/ResultsPane/ExecuteCTA"]');
+    const launchCopilotButton = container.querySelector(".queryEditorWatermarkText");
     fireEvent.keyDown(launchCopilotButton, { key: "c", altKey: true });
 
     expect(mockStore.setShowCopilotSidebar).toHaveBeenCalledWith(true);
@@ -71,7 +70,7 @@ describe("QueryTabComponent", () => {
 
     const container = mount(
       <CopilotProvider>
-        <QueryTabCopilotComponent {...propsMock} />
+        <QueryTabFunctionComponent {...propsMock} />
       </CopilotProvider>,
     );
     expect(container.find(QueryCopilotPromptbar).exists()).toBe(true);

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -1,19 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-console */
 import { FeedOptions, QueryOperationOptions } from "@azure/cosmos";
-import QueryError, { createMonacoErrorLocationResolver, createMonacoMarkersForQueryErrors } from "Common/QueryError";
 import { SplitterDirection } from "Common/Splitter";
 import { Platform, configContext } from "ConfigContext";
 import { useDialog } from "Explorer/Controls/Dialog";
-import { monaco } from "Explorer/LazyMonaco";
 import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal";
 import { useCopilotStore } from "Explorer/QueryCopilot/QueryCopilotContext";
 import { QueryCopilotPromptbar } from "Explorer/QueryCopilot/QueryCopilotPromptbar";
 import { OnExecuteQueryClick, QueryDocumentsPerPage } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { QueryCopilotSidebar } from "Explorer/QueryCopilot/V2/Sidebar/QueryCopilotSidebar";
 import { QueryResultSection } from "Explorer/Tabs/QueryTab/QueryResultSection";
-import { QueryTabStyles, useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
-import { CosmosFluentProvider } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { KeyboardAction } from "KeyboardShortcuts";
 import { QueryConstants } from "Shared/Constants";
@@ -25,10 +21,10 @@ import {
   ruThresholdEnabled,
 } from "Shared/StorageUtility";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
-import { Allotment } from "allotment";
 import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
 import { TabsState, useTabs } from "hooks/useTabs";
-import React, { Fragment, createRef } from "react";
+import React, { Fragment } from "react";
+import SplitterLayout from "react-splitter-layout";
 import "react-splitter-layout/lib/index.css";
 import { format } from "react-string-format";
 import QueryCommandIcon from "../../../../images/CopilotCommand.svg";
@@ -39,6 +35,7 @@ import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg";
 import CheckIcon from "../../../../images/check-1.svg";
 import SaveQueryIcon from "../../../../images/save-cosmos.svg";
 import { NormalizedEventKey } from "../../../Common/Constants";
+import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
 import * as HeadersUtility from "../../../Common/HeadersUtility";
 import { MinimalQueryIterator } from "../../../Common/IteratorUtilities";
 import { queryIterator } from "../../../Common/MongoProxyClient";
@@ -105,9 +102,8 @@ interface IQueryTabStates {
   toggleState: ToggleState;
   sqlQueryEditorContent: string;
   selectedContent: string;
-  selection?: monaco.Selection;
-  executedSelection?: monaco.Selection; // We need to capture the selection that was used when executing, in case the user changes their section while the query is executing.
   queryResults: ViewModels.QueryResults;
+  error: string;
   isExecutionError: boolean;
   isExecuting: boolean;
   showCopilotSidebar: boolean;
@@ -116,12 +112,9 @@ interface IQueryTabStates {
   copilotActive: boolean;
   currentTabActive: boolean;
   queryResultsView: SplitterDirection;
-  errors?: QueryError[];
-  modelMarkers?: monaco.editor.IMarkerData[];
 }
 
-export const QueryTabCopilotComponent = (props: IQueryTabComponentProps): any => {
-  const styles = useQueryTabStyles();
+export const QueryTabFunctionComponent = (props: IQueryTabComponentProps): any => {
   const copilotStore = useCopilotStore();
   const isSampleCopilotActive = useSelectedNode.getState().isQueryCopilotCollectionSelected();
   const queryTabProps = {
@@ -132,20 +125,10 @@ export const QueryTabCopilotComponent = (props: IQueryTabComponentProps): any =>
     isSampleCopilotActive: isSampleCopilotActive,
     copilotStore: copilotStore,
   };
-  return <QueryTabComponentImpl styles={styles} {...queryTabProps}></QueryTabComponentImpl>;
+  return <QueryTabComponent {...queryTabProps}></QueryTabComponent>;
 };
 
-export const QueryTabComponent = (props: IQueryTabComponentProps): any => {
-  const styles = useQueryTabStyles();
-  return <QueryTabComponentImpl styles={styles} {...props}></QueryTabComponentImpl>;
-};
-
-type QueryTabComponentImplProps = IQueryTabComponentProps & {
-  styles: QueryTabStyles;
-};
-
-// Inner (legacy) class component. We only use this component via one of the two functional components above (since we need to use the `useQueryTabStyles` hook).
-class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps, IQueryTabStates> {
+export default class QueryTabComponent extends React.Component<IQueryTabComponentProps, IQueryTabStates> {
   public queryEditorId: string;
   public executeQueryButton: Button;
   public saveQueryButton: Button;
@@ -156,19 +139,16 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
   public isCopilotTabActive: boolean;
   private _iterator: MinimalQueryIterator;
   private queryAbortController: AbortController;
-  queryEditor: React.RefObject<EditorReact>;
 
-  constructor(props: QueryTabComponentImplProps) {
+  constructor(props: IQueryTabComponentProps) {
     super(props);
 
-    this.queryEditor = createRef<EditorReact>();
-
     this.state = {
       toggleState: ToggleState.Result,
       sqlQueryEditorContent: props.isPreferredApiMongoDB ? "{}" : props.queryText || "SELECT * FROM c",
       selectedContent: "",
       queryResults: undefined,
-      errors: [],
+      error: "",
       isExecutionError: this.props.isExecutionError,
       isExecuting: false,
       showCopilotSidebar: useQueryCopilot.getState().showCopilotSidebar,
@@ -241,10 +221,9 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
 
   public onExecuteQueryClick = async (): Promise<void> => {
     this._iterator = undefined;
-
     setTimeout(async () => {
       await this._executeQueryDocumentsPage(0);
-    }, 100); // TODO: Revert this
+    }, 100);
     if (this.state.copilotActive) {
       const query = this.state.sqlQueryEditorContent.split("\r\n")?.pop();
       const isqueryEdited = this.props.copilotStore.generatedQuery && this.props.copilotStore.generatedQuery !== query;
@@ -323,22 +302,23 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
   }
 
   private async _executeQueryDocumentsPage(firstItemIndex: number): Promise<void> {
-    // Capture the query content and the selection being executed (if any).
-    const query = this.state.selectedContent || this.state.sqlQueryEditorContent;
-    const selection = this.state.selection;
-    this.setState({
-      // Track the executed selection so that we can evaluate error positions relative to it, even if the user changes their current selection.
-      executedSelection: selection,
-    });
-
     this.queryAbortController = new AbortController();
     if (this._iterator === undefined) {
       this._iterator = this.props.isPreferredApiMongoDB
-        ? queryIterator(this.props.collection.databaseId, this.props.viewModelcollection, query)
-        : queryDocuments(this.props.collection.databaseId, this.props.collection.id(), query, {
-            enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey(),
-            abortSignal: this.queryAbortController.signal,
-          } as unknown as FeedOptions);
+        ? queryIterator(
+            this.props.collection.databaseId,
+            this.props.viewModelcollection,
+            this.state.selectedContent || this.state.sqlQueryEditorContent,
+          )
+        : queryDocuments(
+            this.props.collection.databaseId,
+            this.props.collection.id(),
+            this.state.selectedContent || this.state.sqlQueryEditorContent,
+            {
+              enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey(),
+              abortSignal: this.queryAbortController.signal,
+            } as unknown as FeedOptions,
+          );
     }
 
     await this._queryDocumentsPage(firstItemIndex);
@@ -403,22 +383,18 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
         firstItemIndex,
         queryDocuments,
       );
-      this.setState({ queryResults, errors: [] });
+      this.setState({ queryResults, error: "" });
     } catch (error) {
       this.props.tabsBaseInstance.isExecutionError(true);
       this.setState({
         isExecutionError: true,
       });
-
-      // Try to parse this as a query error
-      const queryErrors = QueryError.tryParse(
-        error,
-        createMonacoErrorLocationResolver(this.queryEditor.current.editor, this.state.executedSelection),
-      );
+      const errorMessage = getErrorMessage(error);
       this.setState({
-        errors: queryErrors,
-        modelMarkers: createMonacoMarkersForQueryErrors(queryErrors),
+        error: errorMessage,
       });
+
+      document.getElementById("error-display").focus();
     } finally {
       this.props.tabsBaseInstance.isExecuting(false);
       this.setState({
@@ -608,9 +584,6 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
     this.setState({
       sqlQueryEditorContent: newContent,
       queryCopilotGeneratedQuery: "",
-
-      // Clear the markers when the user edits the document.
-      modelMarkers: [],
     });
     if (this.isPreferredApiMongoDB) {
       if (newContent.length > 0) {
@@ -631,16 +604,14 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
     useCommandBar.getState().setContextButtons(this.getTabsButtons());
   }
 
-  public onSelectedContent(selectedContent: string, selection: monaco.Selection): void {
+  public onSelectedContent(selectedContent: string): void {
     if (selectedContent.trim().length > 0) {
       this.setState({
         selectedContent,
-        selection,
       });
     } else {
       this.setState({
         selectedContent: "",
-        selection: undefined,
       });
     }
 
@@ -697,10 +668,9 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
   }
 
   private getEditorAndQueryResult(): JSX.Element {
-    const vertical = this.state.queryResultsView === SplitterDirection.Horizontal;
     return (
       <Fragment>
-        <CosmosFluentProvider id={this.props.tabId} className={this.props.styles.queryTab} role="tabpanel">
+        <div className="tab-pane" id={this.props.tabId} role="tabpanel">
           {this.props.copilotEnabled && this.state.currentTabActive && this.state.copilotActive && (
             <QueryCopilotPromptbar
               explorer={this.props.collection.container}
@@ -709,33 +679,40 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
               containerId={this.props.collection.id()}
             ></QueryCopilotPromptbar>
           )}
-          {/* Set 'key' to the value of vertical to force re-rendering when vertical changes, to work around https://github.com/johnwalley/allotment/issues/457 */}
-          <Allotment key={vertical.toString()} vertical={vertical}>
-            <Allotment.Pane data-test="QueryTab/EditorPane">
-              <EditorReact
-                ref={this.queryEditor}
-                className={this.props.styles.queryEditor}
-                language={"sql"}
-                content={this.getEditorContent()}
-                modelMarkers={this.state.modelMarkers}
-                isReadOnly={false}
-                wordWrap={"on"}
-                ariaLabel={"Editing Query"}
-                lineNumbers={"on"}
-                onContentChanged={(newContent: string) => this.onChangeContent(newContent)}
-                onContentSelected={(selectedContent: string, selection: monaco.Selection) =>
-                  this.onSelectedContent(selectedContent, selection)
-                }
-              />
-            </Allotment.Pane>
-            <Allotment.Pane>
+          <div className="tabPaneContentContainer">
+            <SplitterLayout
+              primaryIndex={0}
+              primaryMinSize={20}
+              secondaryMinSize={20}
+              // Percentage is a bit better when the splitter flips from vertical to horizontal.
+              percentage={true}
+              // NOTE: It is intentional that this looks reversed!
+              // The 'vertical' property refers to the stacking of the panes so is the opposite of the orientation of the splitter itself
+              // (vertically stacked => horizontal splitter)
+              // Our setting refers to the orientation of the splitter, so we need to reverse it here.
+              vertical={this.state.queryResultsView === SplitterDirection.Horizontal}
+            >
+              <Fragment>
+                <div className="queryEditor" style={{ height: "100%" }}>
+                  <EditorReact
+                    language={"sql"}
+                    content={this.getEditorContent()}
+                    isReadOnly={false}
+                    wordWrap={"on"}
+                    ariaLabel={"Editing Query"}
+                    lineNumbers={"on"}
+                    onContentChanged={(newContent: string) => this.onChangeContent(newContent)}
+                    onContentSelected={(selectedContent: string) => this.onSelectedContent(selectedContent)}
+                  />
+                </div>
+              </Fragment>
               {this.props.isSampleCopilotActive ? (
                 <QueryResultSection
                   isMongoDB={this.props.isPreferredApiMongoDB}
                   queryEditorContent={this.state.sqlQueryEditorContent}
-                  errors={this.props.copilotStore?.errors}
-                  isExecuting={this.props.copilotStore?.isExecuting}
+                  error={this.props.copilotStore?.errorMessage}
                   queryResults={this.props.copilotStore?.queryResults}
+                  isExecuting={this.props.copilotStore?.isExecuting}
                   executeQueryDocumentsPage={(firstItemIndex: number) =>
                     QueryDocumentsPerPage(
                       firstItemIndex,
@@ -748,17 +725,17 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
                 <QueryResultSection
                   isMongoDB={this.props.isPreferredApiMongoDB}
                   queryEditorContent={this.state.sqlQueryEditorContent}
-                  errors={this.state.errors}
-                  isExecuting={this.state.isExecuting}
+                  error={this.state.error}
                   queryResults={this.state.queryResults}
+                  isExecuting={this.state.isExecuting}
                   executeQueryDocumentsPage={(firstItemIndex: number) =>
                     this._executeQueryDocumentsPage(firstItemIndex)
                   }
                 />
               )}
-            </Allotment.Pane>
-          </Allotment>
-        </CosmosFluentProvider>
+            </SplitterLayout>
+          </div>
+        </div>
         {this.props.copilotEnabled && this.props.copilotStore?.showFeedbackModal && (
           <QueryCopilotFeedbackModal
             explorer={this.props.collection.container}
@@ -774,7 +751,7 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
   render(): JSX.Element {
     const shouldScaleElements = this.state.showCopilotSidebar && this.isCopilotTabActive;
     return (
-      <div data-test="QueryTab" style={{ display: "flex", flexDirection: "row", height: "100%" }}>
+      <div style={{ display: "flex", flexDirection: "row", height: "100%" }}>
         <div style={{ width: shouldScaleElements ? "70%" : "100%", height: "100%" }}>
           {this.getEditorAndQueryResult()}
         </div>

src/Explorer/Tabs/QueryTab/ResultsView.tsx

@@ -1,396 +0,0 @@
-import {
-  Button,
-  DataGrid,
-  DataGridBody,
-  DataGridCell,
-  DataGridHeader,
-  DataGridHeaderCell,
-  DataGridRow,
-  SelectTabData,
-  SelectTabEvent,
-  Tab,
-  TabList,
-  TableColumnDefinition,
-  createTableColumn,
-} from "@fluentui/react-components";
-import { ArrowDownloadRegular, CopyRegular } from "@fluentui/react-icons";
-import { HttpHeaders } from "Common/Constants";
-import MongoUtility from "Common/MongoUtility";
-import { QueryMetrics } from "Contracts/DataModels";
-import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
-import { IDocument } from "Explorer/Tabs/QueryTab/QueryTabComponent";
-import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
-import { userContext } from "UserContext";
-import copy from "clipboard-copy";
-import React, { useCallback, useState } from "react";
-import { ResultsViewProps } from "./QueryResultSection";
-
-enum ResultsTabs {
-  Results = "results",
-  QueryStats = "queryStats",
-}
-
-const ResultsTab: React.FC<ResultsViewProps> = ({ queryResults, isMongoDB, executeQueryDocumentsPage }) => {
-  const styles = useQueryTabStyles();
-  const queryResultsString = queryResults
-    ? isMongoDB
-      ? MongoUtility.tojson(queryResults.documents, undefined, false)
-      : JSON.stringify(queryResults.documents, undefined, 4)
-    : "";
-
-  const onClickCopyResults = (): void => {
-    copy(queryResultsString);
-  };
-
-  const onFetchNextPageClick = async (): Promise<void> => {
-    const { firstItemIndex, itemCount } = queryResults;
-    await executeQueryDocumentsPage(firstItemIndex + itemCount - 1);
-  };
-
-  return (
-    <>
-      <div className={styles.queryResultsBar}>
-        <div>
-          {queryResults.itemCount > 0 ? `${queryResults.firstItemIndex} - ${queryResults.lastItemIndex}` : `0 - 0`}
-        </div>
-        {queryResults.hasMoreResults && (
-          <a href="#" onClick={() => onFetchNextPageClick()}>
-            Load more
-          </a>
-        )}
-        <div className={styles.flexGrowSpacer} />
-        <Button
-          size="small"
-          appearance="transparent"
-          icon={<CopyRegular />}
-          title="Copy to Clipboard"
-          aria-label="Copy"
-          onClick={onClickCopyResults}
-        />
-      </div>
-      <div className={styles.queryResultsViewer}>
-        <EditorReact language={"json"} content={queryResultsString} isReadOnly={true} ariaLabel={"Query results"} />
-      </div>
-    </>
-  );
-};
-
-const QueryStatsTab: React.FC<Pick<ResultsViewProps, "queryResults">> = ({ queryResults }) => {
-  const styles = useQueryTabStyles();
-  const queryMetrics = React.useRef(queryResults?.headers?.[HttpHeaders.queryMetrics]);
-  React.useEffect(() => {
-    const latestQueryMetrics = queryResults?.headers?.[HttpHeaders.queryMetrics];
-    if (latestQueryMetrics && Object.keys(latestQueryMetrics).length > 0) {
-      queryMetrics.current = latestQueryMetrics;
-    }
-  }, [queryResults]);
-
-  const getAggregatedQueryMetrics = (): QueryMetrics => {
-    const aggregatedQueryMetrics = {
-      documentLoadTime: 0,
-      documentWriteTime: 0,
-      indexHitDocumentCount: 0,
-      outputDocumentCount: 0,
-      outputDocumentSize: 0,
-      indexLookupTime: 0,
-      retrievedDocumentCount: 0,
-      retrievedDocumentSize: 0,
-      vmExecutionTime: 0,
-      runtimeExecutionTimes: {
-        queryEngineExecutionTime: 0,
-        systemFunctionExecutionTime: 0,
-        userDefinedFunctionExecutionTime: 0,
-      },
-      totalQueryExecutionTime: 0,
-    } as QueryMetrics;
-
-    if (queryMetrics.current) {
-      Object.keys(queryMetrics.current).forEach((partitionKeyRangeId) => {
-        const queryMetricsPerPartition = queryMetrics.current[partitionKeyRangeId];
-        if (!queryMetricsPerPartition) {
-          return;
-        }
-        aggregatedQueryMetrics.documentLoadTime += queryMetricsPerPartition.documentLoadTime?.totalMilliseconds() || 0;
-        aggregatedQueryMetrics.documentWriteTime +=
-          queryMetricsPerPartition.documentWriteTime?.totalMilliseconds() || 0;
-        aggregatedQueryMetrics.indexHitDocumentCount += queryMetricsPerPartition.indexHitDocumentCount || 0;
-        aggregatedQueryMetrics.outputDocumentCount += queryMetricsPerPartition.outputDocumentCount || 0;
-        aggregatedQueryMetrics.outputDocumentSize += queryMetricsPerPartition.outputDocumentSize || 0;
-        aggregatedQueryMetrics.indexLookupTime += queryMetricsPerPartition.indexLookupTime?.totalMilliseconds() || 0;
-        aggregatedQueryMetrics.retrievedDocumentCount += queryMetricsPerPartition.retrievedDocumentCount || 0;
-        aggregatedQueryMetrics.retrievedDocumentSize += queryMetricsPerPartition.retrievedDocumentSize || 0;
-        aggregatedQueryMetrics.vmExecutionTime += queryMetricsPerPartition.vmExecutionTime?.totalMilliseconds() || 0;
-        aggregatedQueryMetrics.totalQueryExecutionTime +=
-          queryMetricsPerPartition.totalQueryExecutionTime?.totalMilliseconds() || 0;
-        aggregatedQueryMetrics.runtimeExecutionTimes.queryEngineExecutionTime +=
-          queryMetricsPerPartition.runtimeExecutionTimes?.queryEngineExecutionTime?.totalMilliseconds() || 0;
-        aggregatedQueryMetrics.runtimeExecutionTimes.systemFunctionExecutionTime +=
-          queryMetricsPerPartition.runtimeExecutionTimes?.systemFunctionExecutionTime?.totalMilliseconds() || 0;
-        aggregatedQueryMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime +=
-          queryMetricsPerPartition.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.totalMilliseconds() || 0;
-      });
-    }
-
-    return aggregatedQueryMetrics;
-  };
-
-  const columns: TableColumnDefinition<IDocument>[] = [
-    createTableColumn<IDocument>({
-      columnId: "metric",
-      renderHeaderCell: () => "Metric",
-      renderCell: (item) => item.metric,
-    }),
-    createTableColumn<IDocument>({
-      columnId: "value",
-      renderHeaderCell: () => "Value",
-      renderCell: (item) => item.value,
-    }),
-  ];
-
-  const generateQueryStatsItems = (): IDocument[] => {
-    const items: IDocument[] = [
-      {
-        metric: "Request Charge",
-        value: `${queryResults.requestCharge} RUs`,
-        toolTip: "Request Charge",
-      },
-      {
-        metric: "Showing Results",
-        value: queryResults.itemCount > 0 ? `${queryResults.firstItemIndex} - ${queryResults.lastItemIndex}` : `0 - 0`,
-        toolTip: "Showing Results",
-      },
-    ];
-
-    if (userContext.apiType === "SQL") {
-      const aggregatedQueryMetrics = getAggregatedQueryMetrics();
-      items.push(
-        {
-          metric: "Retrieved document count",
-          value: aggregatedQueryMetrics.retrievedDocumentCount?.toString() || "",
-          toolTip: "Total number of retrieved documents",
-        },
-        {
-          metric: "Retrieved document size",
-          value: `${aggregatedQueryMetrics.retrievedDocumentSize?.toString() || 0} bytes`,
-          toolTip: "Total size of retrieved documents in bytes",
-        },
-        {
-          metric: "Output document count",
-          value: aggregatedQueryMetrics.outputDocumentCount?.toString() || "",
-          toolTip: "Number of output documents",
-        },
-        {
-          metric: "Output document size",
-          value: `${aggregatedQueryMetrics.outputDocumentSize?.toString() || 0} bytes`,
-          toolTip: "Total size of output documents in bytes",
-        },
-        {
-          metric: "Index hit document count",
-          value: aggregatedQueryMetrics.indexHitDocumentCount?.toString() || "",
-          toolTip: "Total number of documents matched by the filter",
-        },
-        {
-          metric: "Index lookup time",
-          value: `${aggregatedQueryMetrics.indexLookupTime?.toString() || 0} ms`,
-          toolTip: "Time spent in physical index layer",
-        },
-        {
-          metric: "Document load time",
-          value: `${aggregatedQueryMetrics.documentLoadTime?.toString() || 0} ms`,
-          toolTip: "Time spent in loading documents",
-        },
-        {
-          metric: "Query engine execution time",
-          value: `${aggregatedQueryMetrics.runtimeExecutionTimes?.queryEngineExecutionTime?.toString() || 0} ms`,
-          toolTip:
-            "Time spent by the query engine to execute the query expression (excludes other execution times like load documents or write results)",
-        },
-        {
-          metric: "System function execution time",
-          value: `${aggregatedQueryMetrics.runtimeExecutionTimes?.systemFunctionExecutionTime?.toString() || 0} ms`,
-          toolTip: "Total time spent executing system (built-in) functions",
-        },
-        {
-          metric: "User defined function execution time",
-          value: `${
-            aggregatedQueryMetrics.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.toString() || 0
-          } ms`,
-          toolTip: "Total time spent executing user-defined functions",
-        },
-        {
-          metric: "Document write time",
-          value: `${aggregatedQueryMetrics.documentWriteTime.toString() || 0} ms`,
-          toolTip: "Time spent to write query result set to response buffer",
-        },
-      );
-    }
-
-    if (queryResults.roundTrips) {
-      items.push({
-        metric: "Round Trips",
-        value: queryResults.roundTrips?.toString(),
-        toolTip: "Number of round trips",
-      });
-    }
-
-    if (queryResults.activityId) {
-      items.push({
-        metric: "Activity id",
-        value: queryResults.activityId,
-        toolTip: "",
-      });
-    }
-
-    return items;
-  };
-
-  const generateQueryMetricsCsvData = (): string => {
-    if (queryMetrics.current) {
-      let csvData =
-        [
-          "Partition key range id",
-          "Retrieved document count",
-          "Retrieved document size (in bytes)",
-          "Output document count",
-          "Output document size (in bytes)",
-          "Index hit document count",
-          "Index lookup time (ms)",
-          "Document load time (ms)",
-          "Query engine execution time (ms)",
-          "System function execution time (ms)",
-          "User defined function execution time (ms)",
-          "Document write time (ms)",
-        ].join(",") + "\n";
-
-      Object.keys(queryMetrics.current).forEach((partitionKeyRangeId) => {
-        const queryMetricsPerPartition = queryMetrics.current[partitionKeyRangeId];
-        csvData +=
-          [
-            partitionKeyRangeId,
-            queryMetricsPerPartition.retrievedDocumentCount,
-            queryMetricsPerPartition.retrievedDocumentSize,
-            queryMetricsPerPartition.outputDocumentCount,
-            queryMetricsPerPartition.outputDocumentSize,
-            queryMetricsPerPartition.indexHitDocumentCount,
-            queryMetricsPerPartition.indexLookupTime?.totalMilliseconds(),
-            queryMetricsPerPartition.documentLoadTime?.totalMilliseconds(),
-            queryMetricsPerPartition.runtimeExecutionTimes?.queryEngineExecutionTime?.totalMilliseconds(),
-            queryMetricsPerPartition.runtimeExecutionTimes?.systemFunctionExecutionTime?.totalMilliseconds(),
-            queryMetricsPerPartition.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.totalMilliseconds(),
-            queryMetricsPerPartition.documentWriteTime?.totalMilliseconds(),
-          ].join(",") + "\n";
-      });
-
-      return csvData;
-    }
-
-    return undefined;
-  };
-
-  const downloadQueryMetricsCsvData = (): void => {
-    const csvData: string = generateQueryMetricsCsvData();
-    if (!csvData) {
-      return;
-    }
-
-    if (navigator.msSaveBlob) {
-      // for IE and Edge
-      navigator.msSaveBlob(
-        new Blob([csvData], { type: "data:text/csv;charset=utf-8" }),
-        "PerPartitionQueryMetrics.csv",
-      );
-    } else {
-      const downloadLink: HTMLAnchorElement = document.createElement("a");
-      downloadLink.href = "data:text/csv;charset=utf-8," + encodeURI(csvData);
-      downloadLink.target = "_self";
-      downloadLink.download = "QueryMetricsPerPartition.csv";
-
-      // for some reason, FF displays the download prompt only when
-      // the link is added to the dom so we add and remove it
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      downloadLink.remove();
-    }
-  };
-
-  const onDownloadQueryMetricsCsvClick = (): boolean => {
-    downloadQueryMetricsCsvData();
-    return false;
-  };
-
-  return (
-    <div className={styles.metricsGridContainer}>
-      <DataGrid
-        data-test="QueryTab/ResultsPane/ResultsView/QueryStatsList"
-        className={styles.queryStatsGrid}
-        items={generateQueryStatsItems()}
-        columns={columns}
-        sortable
-        getRowId={(item) => item.metric}
-        focusMode="composite"
-      >
-        <DataGridHeader>
-          <DataGridRow>
-            {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
-          </DataGridRow>
-        </DataGridHeader>
-        <DataGridBody<IDocument>>
-          {({ item, rowId }) => (
-            <DataGridRow<IDocument> key={rowId} data-test={`Row:${rowId}`}>
-              {({ columnId, renderCell }) => (
-                <DataGridCell data-test={`Row:${rowId}/Column:${columnId}`}>{renderCell(item)}</DataGridCell>
-              )}
-            </DataGridRow>
-          )}
-        </DataGridBody>
-      </DataGrid>
-      <div className={styles.metricsGridButtons}>
-        {userContext.apiType === "SQL" && (
-          <Button appearance="subtle" onClick={() => onDownloadQueryMetricsCsvClick()} icon={<ArrowDownloadRegular />}>
-            Per-partition query metrics (CSV)
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResults, executeQueryDocumentsPage }) => {
-  const styles = useQueryTabStyles();
-  const [activeTab, setActiveTab] = useState<ResultsTabs>(ResultsTabs.Results);
-
-  const onTabSelect = useCallback((event: SelectTabEvent, data: SelectTabData) => {
-    setActiveTab(data.value as ResultsTabs);
-  }, []);
-
-  return (
-    <div data-test="QueryTab/ResultsPane/ResultsView" className={styles.queryResultsTabPanel}>
-      <TabList selectedValue={activeTab} onTabSelect={onTabSelect}>
-        <Tab
-          data-test="QueryTab/ResultsPane/ResultsView/ResultsTab"
-          id={ResultsTabs.Results}
-          value={ResultsTabs.Results}
-        >
-          Results
-        </Tab>
-        <Tab
-          data-test="QueryTab/ResultsPane/ResultsView/QueryStatsTab"
-          id={ResultsTabs.QueryStats}
-          value={ResultsTabs.QueryStats}
-        >
-          Query Stats
-        </Tab>
-      </TabList>
-      <div className={styles.queryResultsTabContentContainer}>
-        {activeTab === ResultsTabs.Results && (
-          <ResultsTab
-            queryResults={queryResults}
-            isMongoDB={isMongoDB}
-            executeQueryDocumentsPage={executeQueryDocumentsPage}
-          />
-        )}
-        {activeTab === ResultsTabs.QueryStats && <QueryStatsTab queryResults={queryResults} />}
-      </div>
-    </div>
-  );
-};

src/Explorer/Tabs/QueryTab/Styles.ts

@@ -1,84 +0,0 @@
-import { makeStyles, shorthands } from "@fluentui/react-components";
-import { cosmosShorthands } from "Explorer/Theme/ThemeUtil";
-
-export type QueryTabStyles = ReturnType<typeof useQueryTabStyles>;
-export const useQueryTabStyles = makeStyles({
-  queryTab: {
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-  },
-  queryEditor: {
-    ...shorthands.border("none"),
-    paddingTop: "4px",
-    height: "100%",
-    width: "100%",
-  },
-  executeCallToAction: {
-    height: "100%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    textAlign: "center",
-  },
-  queryResultsPanel: {
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-  },
-  queryResultsMessage: {
-    ...shorthands.margin("5px"),
-  },
-  queryResultsBody: {
-    flexGrow: 1,
-    justifySelf: "stretch",
-  },
-  queryResultsTabPanel: {
-    height: "100%",
-    display: "flex",
-    rowGap: "12px",
-    flexDirection: "column",
-  },
-  queryResultsTabContentContainer: {
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    paddingLeft: "12px",
-    paddingRight: "12px",
-    overflow: "auto",
-  },
-  queryResultsViewer: {
-    flexGrow: 1,
-  },
-  queryResultsBar: {
-    display: "flex",
-    flexDirection: "row",
-    columnGap: "4px",
-    paddingBottom: "4px",
-  },
-  flexGrowSpacer: {
-    flexGrow: 1,
-  },
-  queryStatsGrid: {
-    flexGrow: 1,
-    overflow: "auto",
-  },
-  metricsGridContainer: {
-    display: "flex",
-    flexDirection: "column",
-    paddingBottom: "6px",
-    maxHeight: "100%",
-  },
-  metricsGridButtons: {
-    ...cosmosShorthands.borderTop(),
-  },
-  errorListMessageCell: {
-    display: "flex",
-    flexDirection: "row",
-    width: "100%",
-    alignItems: "center",
-  },
-  errorListMessage: {
-    flexGrow: 1,
-  },
-});

src/Explorer/Tabs/Tabs.tsx

@@ -299,15 +299,11 @@ function TabPane({ tab, active }: { tab: Tab; active: boolean }) {
 
   if (tab) {
     if ("render" in tab) {
-      return (
-        <div data-test={`Tab:${tab.tabId}`} {...attrs}>
-          {tab.render()}
-        </div>
-      );
+      return <div {...attrs}>{tab.render()}</div>;
     }
   }
 
-  return <div data-test={`Tab:${tab.tabId}`} {...attrs} ref={ref} data-bind="html:html" />;
+  return <div {...attrs} ref={ref} data-bind="html:html" />;
 }
 
 const onKeyPressReactTab = (e: KeyboardEvent, tabKind: ReactTabKind): void => {

src/Explorer/Tabs/TabsBase.ts

@@ -2,7 +2,6 @@ import { KeyboardActionGroup, clearKeyboardActionGroup } from "KeyboardShortcuts
 import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
 import * as ThemeUtility from "../../Common/ThemeUtility";
-import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
@@ -28,7 +27,6 @@ export default class TabsBase extends WaitsForTemplateViewModel {
   public tabPath: ko.Observable<string>;
   public isExecutionError = ko.observable(false);
   public isExecuting = ko.observable(false);
-  public pendingNotification?: ko.Observable<DataModels.Notification>;
   protected _theme: string;
   public onLoadStartKey: number;
 
@@ -45,7 +43,6 @@ export default class TabsBase extends WaitsForTemplateViewModel {
     this.tabPath =
       this.collection &&
       ko.observable<string>(`${this.collection.databaseId}>${this.collection.id()}>${options.title}`);
-    this.pendingNotification = ko.observable<DataModels.Notification>(undefined);
     this.onLoadStartKey = options.onLoadStartKey;
     this.closeTabButton = {
       enabled: ko.computed<boolean>(() => {

src/Explorer/Theme/ThemeUtil.tsx

@@ -1,8 +1,6 @@
 import {
   BrandVariants,
-  ComponentProps,
   FluentProvider,
-  FluentProviderSlots,
   Theme,
   createLightTheme,
   makeStyles,
@@ -12,19 +10,16 @@ import {
   webLightTheme,
 } from "@fluentui/react-components";
 import { Platform, configContext } from "ConfigContext";
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { appThemeFabricTealBrandRamp } from "../../Platform/Fabric/FabricTheme";
 
 export const LayoutConstants = {
   rowHeight: 36,
 };
 
-// Our CosmosFluentProvider has the same props as a FluentProvider.
-export type CosmosFluentProviderProps = Omit<ComponentProps<FluentProviderSlots, "root">, "dir">;
-
-// PropsWithChildren<{
-//   className?: string;
-// }>;
+export type CosmosFluentProviderProps = PropsWithChildren<{
+  className?: string;
+}>;
 
 const useDefaultRootStyles = makeStyles({
   fluentProvider: {
@@ -37,37 +32,15 @@ const useDefaultRootStyles = makeStyles({
   },
 });
 
-const FluentProviderContext = React.createContext({
-  isInFluentProvider: false,
-});
-
-export const CosmosFluentProvider: React.FC<CosmosFluentProviderProps> = ({ children, className, ...props }) => {
-  // We use a React context to ensure that nested CosmosFluentProviders don't create nested FluentProviders.
-  // This helps during the transition from Fluent UI 8 to Fluent UI 9.
-  // As we convert components to Fluent UI 9, if we end up with nested FluentProviders, the inner FluentProvider will be a no-op.
-  const { isInFluentProvider } = React.useContext(FluentProviderContext);
+export const CosmosFluentProvider: React.FC<CosmosFluentProviderProps> = ({ children, className }) => {
   const styles = useDefaultRootStyles();
-
-  if (isInFluentProvider) {
-    // We're already in a fluent context, don't create another.
-    console.warn("Nested CosmosFluentProvider detected. This is likely a bug.");
-    return (
-      <div className={className} {...props}>
-        {children}
-      </div>
-    );
-  }
-
   return (
-    <FluentProviderContext.Provider value={{ isInFluentProvider: true }}>
-      <FluentProvider
-        theme={getPlatformTheme(configContext.platform)}
-        className={mergeClasses(styles.fluentProvider, className)}
-        {...props}
-      >
-        {children}
-      </FluentProvider>
-    </FluentProviderContext.Provider>
+    <FluentProvider
+      theme={getPlatformTheme(configContext.platform)}
+      className={mergeClasses(styles.fluentProvider, className)}
+    >
+      {children}
+    </FluentProvider>
   );
 };
 

src/Explorer/Tree/Collection.ts

@@ -5,8 +5,6 @@ import * as ko from "knockout";
 import * as _ from "underscore";
 import * as Constants from "../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import * as Logger from "../../Common/Logger";
-import { fetchPortalNotifications } from "../../Common/PortalNotifications";
 import { bulkCreateDocument } from "../../Common/dataAccess/bulkCreateDocument";
 import { createDocument } from "../../Common/dataAccess/createDocument";
 import { getCollectionUsageSizeInKB } from "../../Common/dataAccess/getCollectionDataUsageSize";
@@ -1020,41 +1018,6 @@ export default class Collection implements ViewModels.Collection {
     this.uploadFiles(event.originalEvent.dataTransfer.files);
   }
 
-  public async getPendingThroughputSplitNotification(): Promise<DataModels.Notification> {
-    if (!this.container) {
-      return undefined;
-    }
-
-    try {
-      const notifications: DataModels.Notification[] = await fetchPortalNotifications();
-      if (!notifications || notifications.length === 0) {
-        return undefined;
-      }
-
-      return _.find(notifications, (notification: DataModels.Notification) => {
-        const throughputUpdateRegExp: RegExp = new RegExp("Throughput update (.*) in progress");
-        return (
-          notification.kind === "message" &&
-          notification.collectionName === this.id() &&
-          notification.description &&
-          throughputUpdateRegExp.test(notification.description)
-        );
-      });
-    } catch (error) {
-      Logger.logError(
-        JSON.stringify({
-          error: getErrorMessage(error),
-          accountName: userContext?.databaseAccount,
-          databaseName: this.databaseId,
-          collectionName: this.id(),
-        }),
-        "Settings tree node",
-      );
-
-      return undefined;
-    }
-  }
-
   public async uploadFiles(files: FileList): Promise<{ data: UploadDetailsRecord[] }> {
     const data = await Promise.all(Array.from(files).map((file) => this.uploadFile(file)));
 

src/Explorer/Tree/Database.tsx

@@ -4,8 +4,6 @@ import * as _ from "underscore";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import * as Logger from "../../Common/Logger";
-import { fetchPortalNotifications } from "../../Common/PortalNotifications";
 import { readCollections, readCollectionsWithPagination } from "../../Common/dataAccess/readCollections";
 import { readDatabaseOffer } from "../../Common/dataAccess/readDatabaseOffer";
 import * as DataModels from "../../Contracts/DataModels";
@@ -76,7 +74,6 @@ export default class Database implements ViewModels.Database {
       await useDatabases.getState().loadAllOffers();
     }
 
-    const pendingNotificationsPromise: Promise<DataModels.Notification> = this.getPendingThroughputSplitNotification();
     const tabKind = ViewModels.CollectionTabKind.DatabaseSettingsV2;
     const matchingTabs = useTabs.getState().getTabs(tabKind, (tab) => tab.node?.id() === this.id());
     let settingsTab = matchingTabs?.[0] as DatabaseSettingsTabV2;
@@ -87,53 +84,39 @@ export default class Database implements ViewModels.Database {
         dataExplorerArea: Constants.Areas.Tab,
         tabTitle: "Scale",
       });
-      pendingNotificationsPromise.then(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (data: any) => {
-          const pendingNotification: DataModels.Notification = data?.[0];
-          const tabOptions: ViewModels.TabOptions = {
-            tabKind,
-            title: "Scale",
-            tabPath: "",
-            node: this,
-            rid: this.rid,
-            database: this,
-            onLoadStartKey: startKey,
-          };
-          settingsTab = new DatabaseSettingsTabV2(tabOptions);
-          settingsTab.pendingNotification(pendingNotification);
-          useTabs.getState().activateNewTab(settingsTab);
-        },
-        (error) => {
-          const errorMessage = getErrorMessage(error);
-          TelemetryProcessor.traceFailure(
-            Action.Tab,
-            {
-              databaseName: this.id(),
-              collectionName: this.id(),
 
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: "Scale",
-              error: errorMessage,
-              errorStack: getErrorStack(error),
-            },
-            startKey,
-          );
-          logConsoleError(`Error while fetching database settings for database ${this.id()}: ${errorMessage}`);
-          throw error;
-        },
-      );
+      try {
+        const tabOptions: ViewModels.TabOptions = {
+          tabKind,
+          title: "Scale",
+          tabPath: "",
+          node: this,
+          rid: this.rid,
+          database: this,
+          onLoadStartKey: startKey,
+        };
+        settingsTab = new DatabaseSettingsTabV2(tabOptions);
+        useTabs.getState().activateNewTab(settingsTab);
+      } catch (error) {
+        const errorMessage = getErrorMessage(error);
+        TelemetryProcessor.traceFailure(
+          Action.Tab,
+          {
+            databaseName: this.id(),
+            collectionName: this.id(),
+
+            dataExplorerArea: Constants.Areas.Tab,
+            tabTitle: "Scale",
+            error: errorMessage,
+            errorStack: getErrorStack(error),
+          },
+          startKey,
+        );
+        logConsoleError(`Error while fetching database settings for database ${this.id()}: ${errorMessage}`);
+        throw error;
+      }
     } else {
-      pendingNotificationsPromise.then(
-        (pendingNotification: DataModels.Notification) => {
-          settingsTab.pendingNotification(pendingNotification);
-          useTabs.getState().activateTab(settingsTab);
-        },
-        () => {
-          settingsTab.pendingNotification(undefined);
-          useTabs.getState().activateTab(settingsTab);
-        },
-      );
+      useTabs.getState().activateTab(settingsTab);
     }
   };
 
@@ -260,42 +243,6 @@ export default class Database implements ViewModels.Database {
     }
   }
 
-  public async getPendingThroughputSplitNotification(): Promise<DataModels.Notification> {
-    if (!this.container) {
-      return undefined;
-    }
-
-    try {
-      const notifications: DataModels.Notification[] = await fetchPortalNotifications();
-      if (!notifications || notifications.length === 0) {
-        return undefined;
-      }
-
-      return _.find(notifications, (notification: DataModels.Notification) => {
-        const throughputUpdateRegExp = new RegExp("Throughput update (.*) in progress");
-        return (
-          notification.kind === "message" &&
-          !notification.collectionName &&
-          notification.databaseName === this.id() &&
-          notification.description &&
-          throughputUpdateRegExp.test(notification.description)
-        );
-      });
-    } catch (error) {
-      Logger.logError(
-        JSON.stringify({
-          error: getErrorMessage(error),
-          accountName: userContext?.databaseAccount,
-          databaseName: this.id(),
-          collectionName: this.id(),
-        }),
-        "Settings tree node",
-      );
-
-      return undefined;
-    }
-  }
-
   private getDeltaCollections(updatedCollectionsList: DataModels.Collection[]): {
     toAdd: DataModels.Collection[];
     toDelete: Collection[];

src/Main.tsx

@@ -6,7 +6,6 @@ import { initializeIcons, loadTheme } from "@fluentui/react";
 import { QuickstartCarousel } from "Explorer/Quickstart/QuickstartCarousel";
 import { MongoQuickstartTutorial } from "Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
 import { SQLQuickstartTutorial } from "Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
-import "allotment/dist/style.css";
 import "bootstrap/dist/css/bootstrap.css";
 import { useCarousel } from "hooks/useCarousel";
 import React from "react";

src/Platform/Hosted/Components/ConnectExplorer.tsx

@@ -52,7 +52,7 @@ export const isAccountRestrictedForConnectionStringLogin = async (connectionStri
   const headers = new Headers();
   headers.append(HttpHeaders.connectionString, connectionString);
 
-  const backendEndpoint: string = useNewPortalBackendEndpoint(BackendApi.AccountRestrictions)
+  const backendEndpoint: string = useNewPortalBackendEndpoint(BackendApi.PortalSettings)
     ? configContext.PORTAL_BACKEND_ENDPOINT
     : configContext.BACKEND_ENDPOINT;
 

src/Shared/AppStatePersistenceUtility.test.ts

@@ -1,170 +0,0 @@
-import { createKeyFromPath, deleteState, loadState, MAX_ENTRY_NB, saveState } from "Shared/AppStatePersistenceUtility";
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-
-jest.mock("Shared/StorageUtility", () => ({
-  LocalStorageUtility: {
-    getEntryObject: jest.fn(),
-    setEntryObject: jest.fn(),
-  },
-  StorageKey: {
-    AppState: "AppState",
-  },
-}));
-
-describe("AppStatePersistenceUtility", () => {
-  const storePath = {
-    componentName: "a",
-    subComponentName: "b",
-    globalAccountName: "c",
-    databaseName: "d",
-    containerName: "e",
-  };
-  const key = createKeyFromPath(storePath);
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  beforeEach(() => {
-    (LocalStorageUtility.getEntryObject as jest.Mock).mockReturnValue({
-      key0: {
-        schemaVersion: 1,
-        timestamp: 0,
-        data: {},
-      },
-    });
-  });
-
-  describe("saveState()", () => {
-    const testState = { aa: 1, bb: "2", cc: [3, 4] };
-
-    it("should save state", () => {
-      saveState(storePath, testState);
-      expect(LocalStorageUtility.setEntryObject).toHaveBeenCalledTimes(1);
-      expect(LocalStorageUtility.setEntryObject).toHaveBeenCalledWith(StorageKey.AppState, expect.any(Object));
-
-      const passedState = (LocalStorageUtility.setEntryObject as jest.Mock).mock.calls[0][1];
-      expect(passedState[key].data).toHaveProperty("aa", 1);
-    });
-
-    it("should save state with timestamp", () => {
-      saveState(storePath, testState);
-      const passedState = (LocalStorageUtility.setEntryObject as jest.Mock).mock.calls[0][1];
-      expect(passedState[key]).toHaveProperty("timestamp");
-      expect(passedState[key].timestamp).toBeGreaterThan(0);
-    });
-
-    it("should add state to existing state", () => {
-      (LocalStorageUtility.getEntryObject as jest.Mock).mockReturnValue({
-        key0: {
-          schemaVersion: 1,
-          timestamp: 0,
-          data: { dd: 5 },
-        },
-      });
-
-      saveState(storePath, testState);
-      const passedState = (LocalStorageUtility.setEntryObject as jest.Mock).mock.calls[0][1];
-      expect(passedState["key0"].data).toHaveProperty("dd", 5);
-    });
-
-    it("should remove the oldest entry when the number of entries exceeds the limit", () => {
-      // Fill up storage with MAX entries
-      const currentAppState = {};
-      for (let i = 0; i < MAX_ENTRY_NB; i++) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (currentAppState as any)[`key${i}`] = {
-          schemaVersion: 1,
-          timestamp: i,
-          data: {},
-        };
-      }
-      (LocalStorageUtility.getEntryObject as jest.Mock).mockReturnValue(currentAppState);
-
-      saveState(storePath, testState);
-
-      // Verify that the new entry is saved
-      const passedState = (LocalStorageUtility.setEntryObject as jest.Mock).mock.calls[0][1];
-      expect(passedState[key].data).toHaveProperty("aa", 1);
-
-      // Verify that the oldest entry is removed (smallest timestamp)
-      const passedAppState = (LocalStorageUtility.setEntryObject as jest.Mock).mock.calls[0][1];
-      expect(Object.keys(passedAppState).length).toBe(MAX_ENTRY_NB);
-      expect(passedAppState).not.toHaveProperty("key0");
-    });
-
-    it("should not remove the oldest entry when the number of entries does not exceed the limit", () => {
-      (LocalStorageUtility.getEntryObject as jest.Mock).mockReturnValue({
-        key0: {
-          schemaVersion: 1,
-          timestamp: 0,
-          data: {},
-        },
-        key1: {
-          schemaVersion: 1,
-          timestamp: 1,
-          data: {},
-        },
-      });
-      saveState(storePath, testState);
-      const passedAppState = (LocalStorageUtility.setEntryObject as jest.Mock).mock.calls[0][1];
-      expect(Object.keys(passedAppState).length).toBe(3);
-    });
-  });
-
-  describe("loadState()", () => {
-    it("should load state", () => {
-      const data = { aa: 1, bb: "2", cc: [3, 4] };
-      const testState = {
-        [key]: {
-          schemaVersion: 1,
-          timestamp: 0,
-          data,
-        },
-      };
-      (LocalStorageUtility.getEntryObject as jest.Mock).mockReturnValue(testState);
-      const state = loadState(storePath);
-      expect(state).toEqual(data);
-    });
-
-    it("should return undefined if the state is not found", () => {
-      (LocalStorageUtility.getEntryObject as jest.Mock).mockReturnValue(null);
-      const state = loadState(storePath);
-      expect(state).toBeUndefined();
-    });
-  });
-
-  describe("deleteState()", () => {
-    it("should delete state", () => {
-      const key = createKeyFromPath(storePath);
-      (LocalStorageUtility.getEntryObject as jest.Mock).mockReturnValue({
-        [key]: {
-          schemaVersion: 1,
-          timestamp: 0,
-          data: {},
-        },
-        otherKey: {
-          schemaVersion: 2,
-          timestamp: 0,
-          data: {},
-        },
-      });
-
-      deleteState(storePath);
-      expect(LocalStorageUtility.setEntryObject).toHaveBeenCalledTimes(1);
-      const passedAppState = (LocalStorageUtility.setEntryObject as jest.Mock).mock.calls[0][1];
-      expect(passedAppState).not.toHaveProperty(key);
-      expect(passedAppState).toHaveProperty("otherKey");
-    });
-  });
-  describe("createKeyFromPath()", () => {
-    it("should create path that contains all components", () => {
-      const key = createKeyFromPath(storePath);
-      expect(key).toContain(storePath.componentName);
-      expect(key).toContain(storePath.subComponentName);
-      expect(key).toContain(storePath.globalAccountName);
-      expect(key).toContain(storePath.databaseName);
-      expect(key).toContain(storePath.containerName);
-    });
-  });
-});

src/Shared/AppStatePersistenceUtility.ts

@@ -1,109 +0,0 @@
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-
-// The component name whose state is being saved. Component name must not include special characters.
-export type ComponentName = "DocumentsTab";
-
-const SCHEMA_VERSION = 1;
-
-// Export for testing purposes
-export const MAX_ENTRY_NB = 100_000; // Limit number of entries to 100k
-
-export interface StateData {
-  schemaVersion: number;
-  timestamp: number;
-  data: unknown;
-}
-
-type StorePath = {
-  componentName: string;
-  subComponentName?: string;
-  globalAccountName?: string;
-  databaseName?: string;
-  containerName?: string;
-};
-
-// Load and save state data
-export const loadState = (path: StorePath): unknown => {
-  const appState =
-    LocalStorageUtility.getEntryObject<ApplicationState>(StorageKey.AppState) || ({} as ApplicationState);
-  const key = createKeyFromPath(path);
-  return appState[key]?.data;
-};
-export const saveState = (path: StorePath, state: unknown): void => {
-  // Retrieve state object
-  const appState =
-    LocalStorageUtility.getEntryObject<ApplicationState>(StorageKey.AppState) || ({} as ApplicationState);
-  const key = createKeyFromPath(path);
-  appState[key] = {
-    schemaVersion: SCHEMA_VERSION,
-    timestamp: Date.now(),
-    data: state,
-  };
-
-  if (Object.keys(appState).length > MAX_ENTRY_NB) {
-    // Remove the oldest entry
-    const oldestKey = Object.keys(appState).reduce((oldest, current) =>
-      appState[current].timestamp < appState[oldest].timestamp ? current : oldest,
-    );
-    delete appState[oldestKey];
-  }
-
-  LocalStorageUtility.setEntryObject(StorageKey.AppState, appState);
-};
-
-export const deleteState = (path: StorePath): void => {
-  // Retrieve state object
-  const appState =
-    LocalStorageUtility.getEntryObject<ApplicationState>(StorageKey.AppState) || ({} as ApplicationState);
-  const key = createKeyFromPath(path);
-  delete appState[key];
-  LocalStorageUtility.setEntryObject(StorageKey.AppState, appState);
-};
-
-// This is for high-frequency state changes
-let timeoutId: NodeJS.Timeout | undefined;
-export const saveStateDebounced = (path: StorePath, state: unknown, debounceDelayMs = 1000): void => {
-  if (timeoutId) {
-    clearTimeout(timeoutId);
-  }
-  timeoutId = setTimeout(() => saveState(path, state), debounceDelayMs);
-};
-
-interface ApplicationState {
-  [statePath: string]: StateData;
-}
-
-const orderedPathSegments: (keyof StorePath)[] = [
-  "subComponentName",
-  "globalAccountName",
-  "databaseName",
-  "containerName",
-];
-
-/**
- * /componentName/subComponentName/globalAccountName/databaseName/containerName/
- * Any of the path segments can be "" except componentName
- * Export for testing purposes
- * @param path
- */
-export const createKeyFromPath = (path: StorePath): string => {
-  if (path.componentName.includes("/")) {
-    throw new Error(`Invalid component name: ${path.componentName}`);
-  }
-  let key = `/${path.componentName}`; // ComponentName is always there
-  orderedPathSegments.forEach((segment) => {
-    const segmentValue = path[segment as keyof StorePath];
-    if (segmentValue.includes("/")) {
-      throw new Error(`Invalid setting path segment: ${segment}`);
-    }
-    key += `/${segmentValue !== undefined ? segmentValue : ""}`;
-  });
-  return key;
-};
-
-/**
- * Remove the entire app state key from local storage
- */
-export const deleteAllStates = (): void => {
-  LocalStorageUtility.removeEntry(StorageKey.AppState);
-};

src/Shared/LocalStorageUtility.ts

@@ -20,14 +20,3 @@ export const setEntryNumber = (key: StorageKey, value: number): void =>
 
 export const setEntryBoolean = (key: StorageKey, value: boolean): void =>
   localStorage.setItem(StorageKey[key], value.toString());
-
-export const setEntryObject = (key: StorageKey, value: unknown): void => {
-  localStorage.setItem(StorageKey[key], JSON.stringify(value));
-};
-export const getEntryObject = <T>(key: StorageKey): T | null => {
-  const item = localStorage.getItem(StorageKey[key]);
-  if (item) {
-    return JSON.parse(item) as T;
-  }
-  return null;
-};

src/Shared/StorageUtility.ts

@@ -30,7 +30,6 @@ export enum StorageKey {
   VisitedAccounts,
   PriorityLevel,
   DefaultQueryResultsView,
-  AppState,
 }
 
 export const hasRUThresholdBeenConfigured = (): boolean => {
@@ -57,10 +56,10 @@ export const getRUThreshold = (): number => {
 
 export const getDefaultQueryResultsView = (): SplitterDirection => {
   const defaultQueryResultsViewRaw = LocalStorageUtility.getEntryString(StorageKey.DefaultQueryResultsView);
-  if (defaultQueryResultsViewRaw === SplitterDirection.Vertical) {
-    return SplitterDirection.Vertical;
+  if (defaultQueryResultsViewRaw === SplitterDirection.Horizontal) {
+    return SplitterDirection.Horizontal;
   }
-  return SplitterDirection.Horizontal;
+  return SplitterDirection.Vertical;
 };
 
 export const DefaultRUThreshold = 5000;

src/Shared/Telemetry/TelemetryConstants.ts

@@ -139,9 +139,6 @@ export enum Action {
   QueryEdited,
   ExecuteQueryGeneratedFromQueryCopilot,
   DeleteDocuments,
-  ReadPersistedTabState,
-  SavePersistedTabState,
-  DeletePersistedTabState,
 }
 
 export const ActionModifiers = {

src/Utils/EndpointUtils.ts

@@ -52,11 +52,7 @@ export const defaultAllowedArmEndpoints: ReadonlyArray<string> = [
   "https://management.chinacloudapi.cn",
 ];
 
-export const allowedAadEndpoints: ReadonlyArray<string> = [
-  "https://login.microsoftonline.com/",
-  "https://login.microsoftonline.us/",
-  "https://login.partner.microsoftonline.cn/",
-];
+export const allowedAadEndpoints: ReadonlyArray<string> = ["https://login.microsoftonline.com/"];
 
 export const defaultAllowedBackendEndpoints: ReadonlyArray<string> = [
   "https://main.documentdb.ext.azure.com",
@@ -78,13 +74,6 @@ export const PortalBackendIPs: { [key: string]: string[] } = {
   //usnat: ["7.28.202.68"],
 };
 
-export const PortalBackendOutboundIPs: { [key: string]: string[] } = {
-  [PortalBackendEndpoints.Mpac]: ["13.91.105.215", "4.210.172.107"],
-  [PortalBackendEndpoints.Prod]: ["13.88.56.148", "40.91.218.243"],
-  [PortalBackendEndpoints.Fairfax]: ["52.247.163.6", "52.244.134.181"],
-  [PortalBackendEndpoints.Mooncake]: ["163.228.137.6", "143.64.170.142"],
-};
-
 export const MongoProxyOutboundIPs: { [key: string]: string[] } = {
   [MongoProxyEndpoints.Mpac]: ["20.245.81.54", "40.118.23.126"],
   [MongoProxyEndpoints.Prod]: ["40.80.152.199", "13.95.130.121"],
@@ -175,23 +164,7 @@ export function useNewPortalBackendEndpoint(backendApi: string): boolean {
       PortalBackendEndpoints.Mpac,
       PortalBackendEndpoints.Prod,
     ],
-    [BackendApi.AccountRestrictions]: [
-      PortalBackendEndpoints.Development,
-      PortalBackendEndpoints.Mpac,
-      PortalBackendEndpoints.Prod,
-    ],
-    [BackendApi.RuntimeProxy]: [
-      PortalBackendEndpoints.Development,
-      PortalBackendEndpoints.Mpac,
-      PortalBackendEndpoints.Prod,
-    ],
-    [BackendApi.DisallowedLocations]: [
-      PortalBackendEndpoints.Development,
-      PortalBackendEndpoints.Mpac,
-      PortalBackendEndpoints.Prod,
-      PortalBackendEndpoints.Fairfax,
-      PortalBackendEndpoints.Mooncake,
-    ],
+    [BackendApi.AccountRestrictions]: [PortalBackendEndpoints.Development, PortalBackendEndpoints.Mpac],
   };
 
   if (!newBackendApiEnvironmentMap[backendApi] || !configContext.PORTAL_BACKEND_ENDPOINT) {

src/Utils/NetworkUtility.test.ts

@@ -1,15 +1,20 @@
-import { MongoProxyEndpoints, PortalBackendEndpoints } from "Common/Constants";
 import { resetConfigContext, updateConfigContext } from "ConfigContext";
 import { DatabaseAccount, IpRule } from "Contracts/DataModels";
 import { updateUserContext } from "UserContext";
-import { MongoProxyOutboundIPs, PortalBackendIPs, PortalBackendOutboundIPs } from "Utils/EndpointUtils";
+import { PortalBackendIPs } from "Utils/EndpointUtils";
 import { getNetworkSettingsWarningMessage } from "./NetworkUtility";
 
 describe("NetworkUtility tests", () => {
   describe("getNetworkSettingsWarningMessage", () => {
-    const legacyBackendEndpoint: string = "https://main.documentdb.ext.azure.com";
     const publicAccessMessagePart = "Please enable public access to proceed";
     const accessMessagePart = "Please allow access from Azure Portal to proceed";
+    // validEnpoints are a subset of those from Utils/EndpointValidation/PortalBackendIPs
+    const validEndpoints = [
+      "https://main.documentdb.ext.azure.com",
+      "https://main.documentdb.ext.azure.cn",
+      "https://main.documentdb.ext.azure.us",
+    ];
+
     let warningMessageResult: string;
     const warningMessageFunc = (msg: string) => (warningMessageResult = msg);
 
@@ -47,59 +52,52 @@ describe("NetworkUtility tests", () => {
       expect(warningMessageResult).toContain(publicAccessMessagePart);
     });
 
-    it(`should return no message when the appropriate ip rules are added to mongo/cassandra account per endpoint`, async () => {
-      const portalBackendOutboundIPsWithLegacyIPs: string[] = [
-        ...PortalBackendOutboundIPs[PortalBackendEndpoints.Mpac],
-        ...PortalBackendOutboundIPs[PortalBackendEndpoints.Prod],
-        ...MongoProxyOutboundIPs[MongoProxyEndpoints.Mpac],
-        ...MongoProxyOutboundIPs[MongoProxyEndpoints.Prod],
-        ...PortalBackendIPs["https://main.documentdb.ext.azure.com"],
-      ];
-      updateUserContext({
-        databaseAccount: {
-          kind: "MongoDB",
-          properties: {
-            ipRules: portalBackendOutboundIPsWithLegacyIPs.map((ip: string) => ({ ipAddressOrRange: ip }) as IpRule),
-            publicNetworkAccess: "Enabled",
-          },
-        } as DatabaseAccount,
+    it(`should return no message when the appropriate ip rules are added to mongo/cassandra account per endpoint`, () => {
+      validEndpoints.forEach(async (endpoint) => {
+        updateUserContext({
+          databaseAccount: {
+            kind: "MongoDB",
+            properties: {
+              ipRules: PortalBackendIPs[endpoint].map((ip: string) => ({ ipAddressOrRange: ip }) as IpRule),
+              publicNetworkAccess: "Enabled",
+            },
+          } as DatabaseAccount,
+        });
+
+        updateConfigContext({
+          BACKEND_ENDPOINT: endpoint,
+        });
+
+        let asyncWarningMessageResult: string;
+        const asyncWarningMessageFunc = (msg: string) => (asyncWarningMessageResult = msg);
+
+        await getNetworkSettingsWarningMessage(asyncWarningMessageFunc);
+        expect(asyncWarningMessageResult).toBeUndefined();
       });
-
-      updateConfigContext({
-        BACKEND_ENDPOINT: legacyBackendEndpoint,
-        PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Mpac,
-        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Mpac,
-      });
-
-      let asyncWarningMessageResult: string;
-      const asyncWarningMessageFunc = (msg: string) => (asyncWarningMessageResult = msg);
-
-      await getNetworkSettingsWarningMessage(asyncWarningMessageFunc);
-      expect(asyncWarningMessageResult).toBeUndefined();
     });
 
-    it("should return accessMessage when incorrent ip rule is added to mongo/cassandra account per endpoint", async () => {
-      updateUserContext({
-        databaseAccount: {
-          kind: "MongoDB",
-          properties: {
-            ipRules: [{ ipAddressOrRange: "1.1.1.1" }],
-            publicNetworkAccess: "Enabled",
-          },
-        } as DatabaseAccount,
+    it("should return accessMessage when incorrent ip rule is added to mongo/cassandra account per endpoint", () => {
+      validEndpoints.forEach(async (endpoint) => {
+        updateUserContext({
+          databaseAccount: {
+            kind: "MongoDB",
+            properties: {
+              ipRules: [{ ipAddressOrRange: "1.1.1.1" }],
+              publicNetworkAccess: "Enabled",
+            },
+          } as DatabaseAccount,
+        });
+
+        updateConfigContext({
+          BACKEND_ENDPOINT: endpoint,
+        });
+
+        let asyncWarningMessageResult: string;
+        const asyncWarningMessageFunc = (msg: string) => (asyncWarningMessageResult = msg);
+
+        await getNetworkSettingsWarningMessage(asyncWarningMessageFunc);
+        expect(asyncWarningMessageResult).toContain(accessMessagePart);
       });
-
-      updateConfigContext({
-        BACKEND_ENDPOINT: legacyBackendEndpoint,
-        PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Mpac,
-        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Mpac,
-      });
-
-      let asyncWarningMessageResult: string;
-      const asyncWarningMessageFunc = (msg: string) => (asyncWarningMessageResult = msg);
-
-      await getNetworkSettingsWarningMessage(asyncWarningMessageFunc);
-      expect(asyncWarningMessageResult).toContain(accessMessagePart);
     });
 
     // Postgres and vcore mongo account checks basically pass through to CheckFirewallRules so those

src/Utils/NetworkUtility.ts

@@ -1,13 +1,7 @@
-import { CassandraProxyEndpoints, MongoProxyEndpoints, PortalBackendEndpoints } from "Common/Constants";
 import { configContext } from "ConfigContext";
 import { checkFirewallRules } from "Explorer/Tabs/Shared/CheckFirewallRules";
 import { userContext } from "UserContext";
-import {
-  CassandraProxyOutboundIPs,
-  MongoProxyOutboundIPs,
-  PortalBackendIPs,
-  PortalBackendOutboundIPs,
-} from "Utils/EndpointUtils";
+import { PortalBackendIPs } from "Utils/EndpointUtils";
 
 export const getNetworkSettingsWarningMessage = async (
   setStateFunc: (warningMessage: string) => void,
@@ -51,53 +45,18 @@ export const getNetworkSettingsWarningMessage = async (
     const ipRules = accountProperties.ipRules;
     // public network access is NOT set to "All networks"
     if (ipRules?.length > 0) {
-      const isProdOrMpacPortalBackendEndpoint: boolean = [
-        PortalBackendEndpoints.Mpac,
-        PortalBackendEndpoints.Prod,
-      ].includes(configContext.PORTAL_BACKEND_ENDPOINT);
-      const portalBackendOutboundIPs: string[] = isProdOrMpacPortalBackendEndpoint
-        ? [
-            ...PortalBackendOutboundIPs[PortalBackendEndpoints.Mpac],
-            ...PortalBackendOutboundIPs[PortalBackendEndpoints.Prod],
-          ]
-        : PortalBackendOutboundIPs[configContext.PORTAL_BACKEND_ENDPOINT];
-      let portalIPs: string[] = [...portalBackendOutboundIPs, ...PortalBackendIPs[configContext.BACKEND_ENDPOINT]];
+      if (userContext.apiType === "Cassandra" || userContext.apiType === "Mongo") {
+        const portalIPs = PortalBackendIPs[configContext.BACKEND_ENDPOINT];
+        let numberOfMatches = 0;
+        ipRules.forEach((ipRule) => {
+          if (portalIPs.indexOf(ipRule.ipAddressOrRange) !== -1) {
+            numberOfMatches++;
+          }
+        });
 
-      if (userContext.apiType === "Mongo") {
-        const isProdOrMpacMongoProxyEndpoint: boolean = [MongoProxyEndpoints.Mpac, MongoProxyEndpoints.Prod].includes(
-          configContext.MONGO_PROXY_ENDPOINT,
-        );
-
-        const mongoProxyOutboundIPs: string[] = isProdOrMpacMongoProxyEndpoint
-          ? [...MongoProxyOutboundIPs[MongoProxyEndpoints.Mpac], ...MongoProxyOutboundIPs[MongoProxyEndpoints.Prod]]
-          : MongoProxyOutboundIPs[configContext.MONGO_PROXY_ENDPOINT];
-
-        portalIPs = [...portalIPs, ...mongoProxyOutboundIPs];
-      } else if (userContext.apiType === "Cassandra") {
-        const isProdOrMpacCassandraProxyEndpoint: boolean = [
-          CassandraProxyEndpoints.Mpac,
-          CassandraProxyEndpoints.Prod,
-        ].includes(configContext.CASSANDRA_PROXY_ENDPOINT);
-
-        const cassandraProxyOutboundIPs: string[] = isProdOrMpacCassandraProxyEndpoint
-          ? [
-              ...CassandraProxyOutboundIPs[CassandraProxyEndpoints.Mpac],
-              ...CassandraProxyOutboundIPs[CassandraProxyEndpoints.Prod],
-            ]
-          : CassandraProxyOutboundIPs[configContext.CASSANDRA_PROXY_ENDPOINT];
-
-        portalIPs = [...portalIPs, ...cassandraProxyOutboundIPs];
-      }
-
-      let numberOfMatches = 0;
-      ipRules.forEach((ipRule) => {
-        if (portalIPs.indexOf(ipRule.ipAddressOrRange) !== -1) {
-          numberOfMatches++;
+        if (numberOfMatches !== portalIPs.length) {
+          setStateFunc(accessMessage);
         }
-      });
-
-      if (numberOfMatches !== portalIPs.length) {
-        setStateFunc(accessMessage);
       }
     }
   }

src/Utils/QueryUtils.test.ts

@@ -147,33 +147,5 @@ describe("Query Utils", () => {
       expect(expectedPartitionKeyValues).toContain(documentContent["Type"]);
       expect(expectedPartitionKeyValues).toContain(documentContent["Status"]);
     });
-
-    it("should extract three partition key values even if one is empty", () => {
-      const multiPartitionKeyDefinition: PartitionKeyDefinition = {
-        kind: PartitionKeyKind.MultiHash,
-        paths: ["/Country", "/Region", "/Category"],
-      };
-      const expectedPartitionKeyValues: string[] = ["United States", "US-Washington", ""];
-      const partitioinKeyValues: PartitionKey[] = extractPartitionKeyValues(
-        documentContent,
-        multiPartitionKeyDefinition,
-      );
-      expect(partitioinKeyValues.length).toBe(3);
-      expect(expectedPartitionKeyValues).toContain(documentContent["Country"]);
-      expect(expectedPartitionKeyValues).toContain(documentContent["Region"]);
-      expect(expectedPartitionKeyValues).toContain(documentContent["Category"]);
-    });
-
-    it("should extract no partition key values in the case nested partition key", () => {
-      const singlePartitionKeyDefinition: PartitionKeyDefinition = {
-        kind: PartitionKeyKind.Hash,
-        paths: ["/Location.type"],
-      };
-      const partitionKeyValues: PartitionKey[] = extractPartitionKeyValues(
-        documentContent,
-        singlePartitionKeyDefinition,
-      );
-      expect(partitionKeyValues.length).toBe(0);
-    });
   });
 });

src/Utils/QueryUtils.ts

@@ -96,7 +96,7 @@ export const extractPartitionKeyValues = (
   const partitionKeyValues: PartitionKey[] = [];
   partitionKeyDefinition.paths.forEach((partitionKeyPath: string) => {
     const partitionKeyPathWithoutSlash: string = partitionKeyPath.substring(1);
-    if (documentContent[partitionKeyPathWithoutSlash] !== undefined) {
+    if (documentContent[partitionKeyPathWithoutSlash]) {
       partitionKeyValues.push(documentContent[partitionKeyPathWithoutSlash]);
     }
   });

src/hooks/useKnockoutExplorer.ts

@@ -619,31 +619,6 @@ function shouldForwardMessage(message: PortalMessage, messageOrigin: string) {
   return messageOrigin === window.document.location.origin && message.type === MessageTypes.TelemetryInfo;
 }
 
-function updateAADEndpoints(portalEnv: PortalEnv) {
-  switch (portalEnv) {
-    case "prod1":
-    case "prod":
-      updateConfigContext({
-        AAD_ENDPOINT: Constants.AadEndpoints.Prod,
-      });
-      break;
-    case "fairfax":
-      updateConfigContext({
-        AAD_ENDPOINT: Constants.AadEndpoints.Fairfax,
-      });
-      break;
-    case "mooncake":
-      updateConfigContext({
-        AAD_ENDPOINT: Constants.AadEndpoints.Mooncake,
-      });
-      break;
-
-    default:
-      console.warn(`Unknown portal environment: ${portalEnv}`);
-      break;
-  }
-}
-
 function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
   if (
     configContext.BACKEND_ENDPOINT &&
@@ -664,8 +639,6 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
     PORTAL_BACKEND_ENDPOINT: inputs.portalBackendEndpoint,
   });
 
-  updateAADEndpoints(inputs.serverId as PortalEnv);
-
   updateUserContext({
     authorizationToken,
     databaseAccount,

src/hooks/usePortalAccessToken.tsx

@@ -1,34 +1,14 @@
 import { useEffect, useState } from "react";
-import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
-import { ApiEndpoints, BackendApi, HttpHeaders } from "../Common/Constants";
+import { ApiEndpoints } from "../Common/Constants";
 import { configContext } from "../ConfigContext";
 import { AccessInputMetadata } from "../Contracts/DataModels";
 
 const url = `${configContext.BACKEND_ENDPOINT}${ApiEndpoints.guestRuntimeProxy}/accessinputmetadata?_=1609359229955`;
 
 export async function fetchAccessData(portalToken: string): Promise<AccessInputMetadata> {
-  if (!useNewPortalBackendEndpoint(BackendApi.RuntimeProxy)) {
-    return fetchAccessData_ToBeDeprecated(portalToken);
-  }
-
   const headers = new Headers();
   // Portal encrypted token API quirk: The token header must be URL encoded
-  headers.append(HttpHeaders.guestAccessToken, encodeURIComponent(portalToken));
-  const url: string = `${configContext.PORTAL_BACKEND_ENDPOINT}/api/connectionstring/runtimeproxy/accessinputmetadata`;
-  const options = {
-    method: "GET",
-    headers: headers,
-  };
-
-  return fetch(url, options)
-    .then((response) => response.json())
-    .catch((error) => console.error(error));
-}
-
-export async function fetchAccessData_ToBeDeprecated(portalToken: string): Promise<AccessInputMetadata> {
-  const headers = new Headers();
-  // Portal encrypted token API quirk: The token header must be URL encoded
-  headers.append(HttpHeaders.guestAccessToken, encodeURIComponent(portalToken));
+  headers.append("x-ms-encrypted-auth-token", encodeURIComponent(portalToken));
 
   const options = {
     method: "GET",

src/hooks/useQueryCopilot.ts

@@ -1,5 +1,4 @@
 import { MinimalQueryIterator } from "Common/IteratorUtilities";
-import QueryError from "Common/QueryError";
 import { QueryResults } from "Contracts/ViewModels";
 import { CopilotMessage, CopilotSchemaAllocationInfo } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
 import { guid } from "Explorer/Tables/Utilities";
@@ -28,7 +27,7 @@ export interface QueryCopilotState {
   showSamplePrompts: boolean;
   queryIterator: MinimalQueryIterator | undefined;
   queryResults: QueryResults | undefined;
-  errors: QueryError[];
+  errorMessage: string;
   isSamplePromptsOpen: boolean;
   showPromptTeachingBubble: boolean;
   showDeletePopup: boolean;
@@ -71,7 +70,7 @@ export interface QueryCopilotState {
   setShowSamplePrompts: (showSamplePrompts: boolean) => void;
   setQueryIterator: (queryIterator: MinimalQueryIterator | undefined) => void;
   setQueryResults: (queryResults: QueryResults | undefined) => void;
-  setErrors: (errors: QueryError[]) => void;
+  setErrorMessage: (errorMessage: string) => void;
   setIsSamplePromptsOpen: (isSamplePromptsOpen: boolean) => void;
   setShowPromptTeachingBubble: (showPromptTeachingBubble: boolean) => void;
   setShowDeletePopup: (showDeletePopup: boolean) => void;
@@ -118,7 +117,7 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
   showSamplePrompts: false,
   queryIterator: undefined,
   queryResults: undefined,
-  errors: [],
+  errorMessage: "",
   isSamplePromptsOpen: false,
   showDeletePopup: false,
   showFeedbackBar: false,
@@ -171,7 +170,7 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
   setShowSamplePrompts: (showSamplePrompts: boolean) => set({ showSamplePrompts }),
   setQueryIterator: (queryIterator: MinimalQueryIterator | undefined) => set({ queryIterator }),
   setQueryResults: (queryResults: QueryResults | undefined) => set({ queryResults }),
-  setErrors: (errors: QueryError[]) => set({ errors }),
+  setErrorMessage: (errorMessage: string) => set({ errorMessage }),
   setIsSamplePromptsOpen: (isSamplePromptsOpen: boolean) => set({ isSamplePromptsOpen }),
   setShowDeletePopup: (showDeletePopup: boolean) => set({ showDeletePopup }),
   setShowFeedbackBar: (showFeedbackBar: boolean) => set({ showFeedbackBar }),
@@ -226,7 +225,7 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
       showSamplePrompts: false,
       queryIterator: undefined,
       queryResults: undefined,
-      errors: [],
+      errorMessage: "",
       isSamplePromptsOpen: false,
       showDeletePopup: false,
       showFeedbackBar: false,

test/README.md

@@ -98,7 +98,7 @@ If you used all the standard deployment scripts and naming scheme, you can set t
 If Azure Powershell's current subscription is not the one you want to use for testing, you can set the subscription using the following command:
 
 ```powershell
-.\test\scripts\set-test-accounts.ps1 -Subscription "My Subscription"
+.\test\scripts\set-test-subscription.ps1 -Subscription "My Subscription"
 ```
 
 That script will confirm the resource group exists and then set the necessary environment variables:
@@ -151,42 +151,3 @@ npx playwright test --ui
 The UI allows you to select a specific test to run and to see the results of the test in the browser.
 
 See the [Playwright docs](https://playwright.dev/docs/running-tests) for more information on running tests.
-
-## Clean-up
-
-Tests should clean-up after themselves if they succeed (and sometimes even when they fail).
-However, this is not guaranteed, and you may find that you have resources left over from failed tests.
-Any resource (database, container, etc.) prefixed with `t_` is a test resource and can be safely deleted if you aren't currently running tests.
-The `test/scripts/clean-test-accounts.ps1` script will attempt to clean all the test resources.
-
-```powershell
-.\test\scripts\clean-test-accounts.ps1 -Subscription "My Subscription"
-```
-
-That script will confirm the resource group exists and then prompt you to confirm the deletion of the resources:
-
-```
-Found a resource with the default resource prefix (ashleyst-e2e-). Configuring that prefix for E2E testing.
-Cleaning E2E Testing Resources
-  Subscription: cosmosdb-portalteam-generaltest-msft (b9c77f10-b438-4c32-9819-eef8a654e478)
-  Resource Group: ashleyst-e2e-testing
-  Resource Prefix: ashleyst-e2e-
-
-All databases with the prefix 't_' will be deleted.
-Are you sure you want to delete these resources? (y/n): y
-    Cleaning Mongo Account: ashleyst-e2e-mongo
-    Cleaning Gremlin Account: ashleyst-e2e-gremlin
-    Cleaning Table Account: ashleyst-e2e-tables
-    Cleaning Cassandra Account: ashleyst-e2e-cassandra
-      Cleaning Keyspace: t_db90_1722888413729
-      Cleaning Keyspace: t_db76_1722882571248
-      Cleaning Keyspace: t_db3a_1722882413947
-      Cleaning Keyspace: t_db4d_1722882342943
-      Cleaning Keyspace: t_db64_1722888944788
-      Cleaning Keyspace: t_db90_1722882507916
-      Cleaning Keyspace: t_dbf5_1722888997915
-      Cleaning Keyspace: t_db7e_1722882689913
-    Cleaning SQL Account: ashleyst-e2e-sql
-      Cleaning Database: t_db32_1722890547089
-    Cleaning Mongo Account: ashleyst-e2e-mongo32
-```

test/cassandra/container.spec.ts

@@ -1,50 +1,39 @@
 import { expect, test } from "@playwright/test";
 
-import { DataExplorer, TestAccount, generateUniqueName } from "../fx";
+import { DataExplorer, TestAccount, generateDatabaseNameWithTimestamp, generateUniqueName } from "../fx";
 
 test("Cassandra keyspace and table CRUD", async ({ page }) => {
-  const keyspaceId = generateUniqueName("db");
-  const tableId = "testtable"; // A unique table name isn't needed because the keyspace is unique
+  const keyspaceId = generateDatabaseNameWithTimestamp();
+  const tableId = generateUniqueName("table");
 
   const explorer = await DataExplorer.open(page, TestAccount.Cassandra);
 
   await explorer.globalCommandButton("New Table").click();
-  await explorer.whilePanelOpen(
-    "Add Table",
-    async (panel, okButton) => {
-      await panel.getByPlaceholder("Type a new keyspace id").fill(keyspaceId);
-      await panel.getByPlaceholder("Enter table Id").fill(tableId);
-      await panel.getByLabel("Table max RU/s").fill("1000");
-      await okButton.click();
-    },
-    { closeTimeout: 5 * 60 * 1000 },
-  );
+  await explorer.whilePanelOpen("Add Table", async (panel, okButton) => {
+    await panel.getByPlaceholder("Type a new keyspace id").fill(keyspaceId);
+    await panel.getByPlaceholder("Enter table Id").fill(tableId);
+    await panel.getByLabel("Table max RU/s").fill("1000");
+    await okButton.click();
+  });
 
-  const keyspaceNode = await explorer.waitForNode(keyspaceId);
-  const tableNode = await explorer.waitForContainerNode(keyspaceId, tableId);
+  const keyspaceNode = explorer.treeNode(keyspaceId);
+  await keyspaceNode.expand();
+  const tableNode = explorer.treeNode(`${keyspaceId}/${tableId}`);
 
   await tableNode.openContextMenu();
   await tableNode.contextMenuItem("Delete Table").click();
-  await explorer.whilePanelOpen(
-    "Delete Table",
-    async (panel, okButton) => {
-      await panel.getByRole("textbox", { name: "Confirm by typing the table id" }).fill(tableId);
-      await okButton.click();
-    },
-    { closeTimeout: 5 * 60 * 1000 },
-  );
+  await explorer.whilePanelOpen("Delete Table", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Confirm by typing the table id" }).fill(tableId);
+    await okButton.click();
+  });
   await expect(tableNode.element).not.toBeAttached();
 
   await keyspaceNode.openContextMenu();
   await keyspaceNode.contextMenuItem("Delete Keyspace").click();
-  await explorer.whilePanelOpen(
-    "Delete Keyspace",
-    async (panel, okButton) => {
-      await panel.getByRole("textbox", { name: "Confirm by typing the Keyspace id" }).fill(keyspaceId);
-      await okButton.click();
-    },
-    { closeTimeout: 5 * 60 * 1000 },
-  );
+  await explorer.whilePanelOpen("Delete Keyspace", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Confirm by typing the Keyspace id" }).fill(keyspaceId);
+    await okButton.click();
+  });
 
   await expect(keyspaceNode.element).not.toBeAttached();
 });

test/fx.ts

@@ -2,22 +2,13 @@ import { AzureCliCredentials } from "@azure/ms-rest-nodeauth";
 import { expect, Frame, Locator, Page } from "@playwright/test";
 import crypto from "crypto";
 
-const RETRY_COUNT = 3;
-
-export interface TestNameOptions {
-  length?: number;
-  timestampped?: boolean;
-  prefixed?: boolean;
+export function generateUniqueName(baseName = "", length = 4): string {
+  return `${baseName}${crypto.randomBytes(length).toString("hex")}`;
 }
 
-export function generateUniqueName(baseName, options?: TestNameOptions): string {
-  const length = options?.length ?? 1;
-  const timestamp = options?.timestampped === undefined ? true : options.timestampped;
-  const prefixed = options?.prefixed === undefined ? true : options.prefixed;
-
-  const prefix = prefixed ? "t_" : "";
-  const suffix = timestamp ? `_${Date.now()}` : "";
-  return `${prefix}${baseName}${crypto.randomBytes(length).toString("hex")}${suffix}`;
+export function generateDatabaseNameWithTimestamp(baseName = "db", length = 1): string {
+  // We use '_' as the separator because it's supported across all the API types.
+  return `${baseName}${crypto.randomBytes(length).toString("hex")}_${Date.now()}`;
 }
 
 export async function getAzureCLICredentials(): Promise<AzureCliCredentials> {
@@ -106,132 +97,25 @@ class TreeNode {
   }
 
   async expand(): Promise<void> {
+    // Sometimes, the expand button doesn't load at all, because the node didn't have children when it was initially loaded.
+    // Still, clicking the node will trigger loading and expansion. So if the node isn't expanded, we click it.
+
+    // The "aria-expanded" attribute is applied to the TreeItem. But we have the TreeItemLayout selected because the TreeItem contains the child tree as well.
+    // So, we need to find the TreeItem that contains this TreeItemLayout.
     const treeNodeContainer = this.frame.getByTestId(`TreeNodeContainer:${this.id}`);
-    const tree = this.frame.getByTestId(`Tree:${this.id}`);
 
-    // eslint-disable-next-line prefer-arrow/prefer-arrow-functions
-    const expandNode = async () => {
-      if ((await treeNodeContainer.getAttribute("aria-expanded")) !== "true") {
-        // Click the node, to trigger loading and expansion
-        await this.element.click();
-      }
-
-      // Try three times to wait for the node to expand.
-      for (let i = 0; i < RETRY_COUNT; i++) {
-        try {
-          await tree.waitFor({ state: "visible" });
-          // The tree has expanded, let's get out of here
-          return true;
-        } catch {
-          // Just try again
-          if ((await treeNodeContainer.getAttribute("aria-expanded")) !== "true") {
-            // We might have collapsed the node, try expanding it again, then retry.
-            await this.element.click();
-          }
-        }
-      }
-      return false;
-    };
-
-    if (await expandNode()) {
-      return;
+    if ((await treeNodeContainer.getAttribute("aria-expanded")) !== "true") {
+      // Click the node, to trigger loading and expansion
+      await this.element.click();
     }
-
-    // The tree never expanded. OR, it may have expanded in between when we found the "ExpandIcon" and when we clicked it (it's happened before)
-    // So, let's try one more time to expand it.
-    if (!(await expandNode())) {
-      // The tree never expanded. This is a problem.
-      throw new Error(`Node ${this.id} did not expand after clicking it.`);
-    }
-
-    // We did it. It took a lot of weird messing around, but we expanded a tree node... I hope.
+    await expect(treeNodeContainer).toHaveAttribute("aria-expanded", "true");
   }
 }
 
-export class Editor {
-  constructor(
-    public frame: Frame,
-    public locator: Locator,
-  ) {}
-
-  text(): Promise<string | null> {
-    return this.locator.evaluate((e) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const win = e.ownerDocument.defaultView as any;
-      if (win._monaco_getEditorContentForElement) {
-        return win._monaco_getEditorContentForElement(e);
-      }
-      return null;
-    });
-  }
-
-  async setText(text: string): Promise<void> {
-    // We trust that Monaco can handle the keyboard, and it's _extremely_ flaky to try and enter text using browser commands.
-    // So we use a hook we installed in 'window' to set the content of the editor.
-
-    // NOTE: This function is serialized and sent to the browser for execution
-    // So you can't use any variables from the outer scope, but we can send a string (via the second argument to evaluate)
-    await this.locator.evaluate((e, content) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const win = e.ownerDocument.defaultView as any;
-      if (win._monaco_setEditorContentForElement) {
-        win._monaco_setEditorContentForElement(e, content);
-      }
-    }, text);
-
-    expect(await this.text()).toEqual(text);
-  }
-}
-
-export class QueryTab {
-  resultsPane: Locator;
-  resultsView: Locator;
-  executeCTA: Locator;
-  errorList: Locator;
-  queryStatsList: Locator;
-  resultsEditor: Editor;
-  resultsTab: Locator;
-  queryStatsTab: Locator;
-  constructor(
-    public frame: Frame,
-    public tabId: string,
-    public tab: Locator,
-    public locator: Locator,
-  ) {
-    this.resultsPane = locator.getByTestId("QueryTab/ResultsPane");
-    this.resultsView = locator.getByTestId("QueryTab/ResultsPane/ResultsView");
-    this.executeCTA = locator.getByTestId("QueryTab/ResultsPane/ExecuteCTA");
-    this.errorList = locator.getByTestId("QueryTab/ResultsPane/ErrorList");
-    this.resultsEditor = new Editor(this.frame, this.resultsView.getByTestId("EditorReact/Host/Loaded"));
-    this.queryStatsList = locator.getByTestId("QueryTab/ResultsPane/ResultsView/QueryStatsList");
-    this.resultsTab = this.resultsView.getByTestId("QueryTab/ResultsPane/ResultsView/ResultsTab");
-    this.queryStatsTab = this.resultsView.getByTestId("QueryTab/ResultsPane/ResultsView/QueryStatsTab");
-  }
-
-  editor(): Editor {
-    const locator = this.locator.getByTestId("EditorReact/Host/Loaded");
-    return new Editor(this.frame, locator);
-  }
-}
-
-type PanelOpenOptions = {
-  closeTimeout?: number;
-};
-
 /** Helper class that provides locator methods for DataExplorer components, on top of a Frame */
 export class DataExplorer {
   constructor(public frame: Frame) {}
 
-  tab(tabId: string): Locator {
-    return this.frame.getByTestId(`Tab:${tabId}`);
-  }
-
-  queryTab(tabId: string): QueryTab {
-    const tab = this.tab(tabId);
-    const queryTab = tab.getByTestId("QueryTab");
-    return new QueryTab(this.frame, tabId, tab, queryTab);
-  }
-
   /** Select the primary global command button.
    *
    * There's only a single "primary" button, but we still require you to pass the label to confirm you're selecting the right button.
@@ -250,68 +134,18 @@ export class DataExplorer {
     return this.frame.getByTestId(`Panel:${title}`);
   }
 
-  async waitForNode(treeNodeId: string): Promise<TreeNode> {
-    const node = this.treeNode(treeNodeId);
-
-    // Is the node already visible?
-    if (await node.element.isVisible()) {
-      return node;
-    }
-
-    // No, try refreshing the tree
-    const refreshButton = this.frame.getByTestId("Sidebar/RefreshButton");
-    await refreshButton.click();
-
-    // Try a few times to find the node
-    for (let i = 0; i < RETRY_COUNT; i++) {
-      try {
-        await node.element.waitFor();
-        return node;
-      } catch {
-        // Just try again
-      }
-    }
-
-    // We tried 3 times, but the node never appeared
-    throw new Error(`Node ${treeNodeId} not found and did not appear after refreshing.`);
-  }
-
-  async waitForContainerNode(databaseId: string, containerId: string): Promise<TreeNode> {
-    const databaseNode = await this.waitForNode(databaseId);
-
-    // The container node may be auto-expanded. Wait 5s for that to happen
-    try {
-      const containerNode = this.treeNode(`${databaseId}/${containerId}`);
-      await containerNode.element.waitFor({ state: "visible", timeout: 5 * 1000 });
-      return containerNode;
-    } catch {
-      // It didn't auto-expand, that's fine, we'll expand it ourselves
-    }
-
-    // Ok, expand the database node.
-    await databaseNode.expand();
-
-    return await this.waitForNode(`${databaseId}/${containerId}`);
-  }
-
   /** Select the tree node with the specified id */
   treeNode(id: string): TreeNode {
     return new TreeNode(this.frame.getByTestId(`TreeNode:${id}`), this.frame, id);
   }
 
   /** Waits for the panel with the specified title to be open, then runs the provided callback. After the callback completes, waits for the panel to close. */
-  async whilePanelOpen(
-    title: string,
-    action: (panel: Locator, okButton: Locator) => Promise<void>,
-    options?: PanelOpenOptions,
-  ): Promise<void> {
-    options ||= {};
-
+  async whilePanelOpen(title: string, action: (panel: Locator, okButton: Locator) => Promise<void>): Promise<void> {
     const panel = this.panel(title);
     await panel.waitFor();
     const okButton = panel.getByTestId("Panel/OkButton");
     await action(panel, okButton);
-    await panel.waitFor({ state: "detached", timeout: options.closeTimeout });
+    await panel.waitFor({ state: "detached" });
   }
 
   /** Waits for the Data Explorer app to load */

test/gremlin/container.spec.ts

@@ -1,52 +1,41 @@
 import { expect, test } from "@playwright/test";
 
-import { DataExplorer, TestAccount, generateUniqueName } from "../fx";
+import { DataExplorer, TestAccount, generateDatabaseNameWithTimestamp, generateUniqueName } from "../fx";
 
 test("Gremlin graph CRUD", async ({ page }) => {
-  const databaseId = generateUniqueName("db");
-  const graphId = "testgraph"; // A unique graph name isn't needed because the database is unique
+  const databaseId = generateDatabaseNameWithTimestamp();
+  const graphId = generateUniqueName("graph");
 
   const explorer = await DataExplorer.open(page, TestAccount.Gremlin);
 
   // Create new database and graph
   await explorer.globalCommandButton("New Graph").click();
-  await explorer.whilePanelOpen(
-    "New Graph",
-    async (panel, okButton) => {
-      await panel.getByPlaceholder("Type a new database id").fill(databaseId);
-      await panel.getByRole("textbox", { name: "Graph id, Example Graph1" }).fill(graphId);
-      await panel.getByRole("textbox", { name: "Partition key" }).fill("/pk");
-      await panel.getByLabel("Database max RU/s").fill("1000");
-      await okButton.click();
-    },
-    { closeTimeout: 5 * 60 * 1000 },
-  );
+  await explorer.whilePanelOpen("New Graph", async (panel, okButton) => {
+    await panel.getByPlaceholder("Type a new database id").fill(databaseId);
+    await panel.getByRole("textbox", { name: "Graph id, Example Graph1" }).fill(graphId);
+    await panel.getByRole("textbox", { name: "Partition key" }).fill("/pk");
+    await panel.getByLabel("Database max RU/s").fill("1000");
+    await okButton.click();
+  });
 
-  const databaseNode = await explorer.waitForNode(databaseId);
-  const graphNode = await explorer.waitForContainerNode(databaseId, graphId);
+  const databaseNode = explorer.treeNode(databaseId);
+  await databaseNode.expand();
+  const graphNode = explorer.treeNode(`${databaseId}/${graphId}`);
 
   await graphNode.openContextMenu();
   await graphNode.contextMenuItem("Delete Graph").click();
-  await explorer.whilePanelOpen(
-    "Delete Graph",
-    async (panel, okButton) => {
-      await panel.getByRole("textbox", { name: "Confirm by typing the graph id" }).fill(graphId);
-      await okButton.click();
-    },
-    { closeTimeout: 5 * 60 * 1000 },
-  );
+  await explorer.whilePanelOpen("Delete Graph", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Confirm by typing the graph id" }).fill(graphId);
+    await okButton.click();
+  });
   await expect(graphNode.element).not.toBeAttached();
 
   await databaseNode.openContextMenu();
   await databaseNode.contextMenuItem("Delete Database").click();
-  await explorer.whilePanelOpen(
-    "Delete Database",
-    async (panel, okButton) => {
-      await panel.getByRole("textbox", { name: "Confirm by typing the Database id" }).fill(databaseId);
-      await okButton.click();
-    },
-    { closeTimeout: 5 * 60 * 1000 },
-  );
+  await explorer.whilePanelOpen("Delete Database", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Confirm by typing the Database id" }).fill(databaseId);
+    await okButton.click();
+  });
 
   await expect(databaseNode.element).not.toBeAttached();
 });

test/mongo/container.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test";
 
-import { DataExplorer, TestAccount, generateUniqueName } from "../fx";
+import { DataExplorer, TestAccount, generateDatabaseNameWithTimestamp, generateUniqueName } from "../fx";
 
 (
   [
@@ -9,49 +9,38 @@ import { DataExplorer, TestAccount, generateUniqueName } from "../fx";
   ] as [string, TestAccount][]
 ).forEach(([apiVersionDescription, accountType]) => {
   test(`Mongo CRUD using ${apiVersionDescription}`, async ({ page }) => {
-    const databaseId = generateUniqueName("db");
-    const collectionId = "testcollection"; // A unique collection name isn't needed because the database is unique
+    const databaseId = generateDatabaseNameWithTimestamp();
+    const collectionId = generateUniqueName("collection");
 
     const explorer = await DataExplorer.open(page, accountType);
 
     await explorer.globalCommandButton("New Collection").click();
-    await explorer.whilePanelOpen(
-      "New Collection",
-      async (panel, okButton) => {
-        await panel.getByPlaceholder("Type a new database id").fill(databaseId);
-        await panel.getByRole("textbox", { name: "Collection id, Example Collection1" }).fill(collectionId);
-        await panel.getByRole("textbox", { name: "Shard key" }).fill("pk");
-        await panel.getByLabel("Database max RU/s").fill("1000");
-        await okButton.click();
-      },
-      { closeTimeout: 5 * 60 * 1000 },
-    );
+    await explorer.whilePanelOpen("New Collection", async (panel, okButton) => {
+      await panel.getByPlaceholder("Type a new database id").fill(databaseId);
+      await panel.getByRole("textbox", { name: "Collection id, Example Collection1" }).fill(collectionId);
+      await panel.getByRole("textbox", { name: "Shard key" }).fill("pk");
+      await panel.getByLabel("Database max RU/s").fill("1000");
+      await okButton.click();
+    });
 
-    const databaseNode = await explorer.waitForNode(databaseId);
-    const collectionNode = await explorer.waitForContainerNode(databaseId, collectionId);
+    const databaseNode = explorer.treeNode(databaseId);
+    await databaseNode.expand();
+    const collectionNode = explorer.treeNode(`${databaseId}/${collectionId}`);
 
     await collectionNode.openContextMenu();
     await collectionNode.contextMenuItem("Delete Collection").click();
-    await explorer.whilePanelOpen(
-      "Delete Collection",
-      async (panel, okButton) => {
-        await panel.getByRole("textbox", { name: "Confirm by typing the collection id" }).fill(collectionId);
-        await okButton.click();
-      },
-      { closeTimeout: 5 * 60 * 1000 },
-    );
+    await explorer.whilePanelOpen("Delete Collection", async (panel, okButton) => {
+      await panel.getByRole("textbox", { name: "Confirm by typing the collection id" }).fill(collectionId);
+      await okButton.click();
+    });
     await expect(collectionNode.element).not.toBeAttached();
 
     await databaseNode.openContextMenu();
     await databaseNode.contextMenuItem("Delete Database").click();
-    await explorer.whilePanelOpen(
-      "Delete Database",
-      async (panel, okButton) => {
-        await panel.getByRole("textbox", { name: "Confirm by typing the Database id" }).fill(databaseId);
-        await okButton.click();
-      },
-      { closeTimeout: 5 * 60 * 1000 },
-    );
+    await explorer.whilePanelOpen("Delete Database", async (panel, okButton) => {
+      await panel.getByRole("textbox", { name: "Confirm by typing the Database id" }).fill(databaseId);
+      await okButton.click();
+    });
 
     await expect(databaseNode.element).not.toBeAttached();
   });

test/scripts/clean-test-accounts.ps1

@@ -1,107 +0,0 @@
-param(
-    [Parameter(Mandatory=$false)][string]$ResourceGroup,
-    [Parameter(Mandatory=$false)][string]$Subscription,
-    [Parameter(Mandatory=$false)][string]$ResourcePrefix,
-    [Parameter(Mandatory=$false)][string]$DatabasePrefix = "t_"
-)
-
-Import-Module "Az.Accounts" -Scope Local
-Import-Module "Az.Resources" -Scope Local
-
-if (-not $Subscription) {
-    # Show the user the currently-selected subscription and ask if that's what they want to use
-    $currentSubscription = Get-AzContext | Select-Object -ExpandProperty Subscription
-    Write-Host "The currently-selected subscription is $($currentSubscription.Name) ($($currentSubscription.Id))."
-    $useCurrentSubscription = Read-Host "Do you want to use this subscription? (y/n)"
-    if ($useCurrentSubscription -eq "n") {
-        throw "Either specify a subscription using '-Subscription' or select a subscription using 'Select-AzSubscription' before running this script."
-    }
-    $Subscription = $currentSubscription.Id
-}
-
-$AzSubscription = (Get-AzSubscription -SubscriptionId $Subscription -ErrorAction SilentlyContinue | Select-Object -First 1) ?? (Get-AzSubscription -SubscriptionName $Subscription -ErrorAction SilentlyContinue | Select-Object -First 1)
-if (-not $AzSubscription) {
-    throw "The subscription '$Subscription' could not be found."
-}
-
-Set-AzContext $AzSubscription.Id | Out-Null
-
-if (-not $ResourceGroup) {
-    # Check for the default resource group name
-    $DefaultResourceGroupName = $env:USERNAME + "-e2e-testing"
-    if (Get-AzResourceGroup -Name $DefaultResourceGroupName -ErrorAction SilentlyContinue) {
-        $ResourceGroup = $DefaultResourceGroupName
-    } else {
-        $ResourceGroup = Read-Host "Specify the name of the resource group to find the resources in."
-    }
-}
-
-$AzResourceGroup = Get-AzResourceGroup -Name $ResourceGroup -ErrorAction SilentlyContinue
-if (-not $AzResourceGroup) {
-    throw "The resource group '$ResourceGroup' could not be found. You have to create the resource group manually before running this script."
-}
-
-if (-not $ResourcePrefix) {
-    $defaultResourcePrefix = $env:USERNAME + "-e2e-"
-    
-    # Check for one of the default resources
-    $defaultResource = Get-AzResource -ResourceGroupName $AzResourceGroup.ResourceGroupName -ResourceName "$($defaultResourcePrefix)cassandra" -ResourceType "Microsoft.DocumentDB/databaseAccounts" -ErrorAction SilentlyContinue
-    if ($defaultResource) {
-        Write-Host "Found a resource with the default resource prefix ($defaultResourcePrefix). Configuring that prefix for E2E testing."
-        $ResourcePrefix = $defaultResourcePrefix
-    } else {
-        $ResourcePrefix = Read-Host "Specify the resource prefix used in the resource names."
-    }
-}
-
-Write-Host "Cleaning E2E Testing Resources"
-Write-Host "  Subscription: $($AzSubscription.Name) ($($AzSubscription.Id))"
-Write-Host "  Resource Group: $($AzResourceGroup.ResourceGroupName)"
-Write-Host "  Resource Prefix: $ResourcePrefix"
-Write-Host
-Write-Host "All databases with the prefix '$DatabasePrefix' will be deleted."
-
-# Confirm the deletion
-$confirm = Read-Host "Are you sure you want to delete these resources? (y/n)"
-if ($confirm -ne "y") {
-    Write-Host "Aborting."
-    exit
-}
-
-Get-AzResource -ResourceGroupName $AzResourceGroup.ResourceGroupName -ResourceType "Microsoft.DocumentDB/databaseAccounts" -ErrorAction SilentlyContinue | ForEach-Object {
-    $account = Get-AzCosmosDBAccount -ResourceGroupName $AzResourceGroup.ResourceGroupName -Name $_.Name -ErrorAction SilentlyContinue
-    if (-not $account) {
-        return
-    }
-    if ($account.Kind -eq "MongoDB") {
-        Write-Host "    Cleaning Mongo Account: $($_.Name)"
-        Get-AzCosmosDBMongoDBDatabase -AccountName $account.Name -ResourceGroupName $AzResourceGroup.ResourceGroupName | Where-Object { $_.Name -like "$DatabasePrefix*" } | ForEach-Object {
-            Write-Host "      Cleaning Database: $($_.Name)"
-            Remove-AzCosmosDBMongoDBDatabase -AccountName $account.Name -ResourceGroupName $AzResourceGroup.ResourceGroupName -Name $_.Name
-        }
-    } elseif ($account.Capabilities | Where-Object { $_.Name -eq "EnableCassandra" }) {
-        Write-Host "    Cleaning Cassandra Account: $($_.Name)"
-        Get-AzCosmosDBCassandraKeyspace -AccountName $account.Name -ResourceGroupName $AzResourceGroup.ResourceGroupName | Where-Object { $_.Name -like "$DatabasePrefix*" } | ForEach-Object {
-            Write-Host "      Cleaning Keyspace: $($_.Name)"
-            Remove-AzCosmosDBCassandraKeyspace -AccountName $account.Name -ResourceGroupName $AzResourceGroup.ResourceGroupName -Name $_.Name
-        }
-    } elseif ($account.Capabilities | Where-Object { $_.Name -eq "EnableGremlin" }) {
-        Write-Host "    Cleaning Gremlin Account: $($_.Name)"
-        Get-AzCosmosDBGremlinDatabase -AccountName $account.Name -ResourceGroupName $AzResourceGroup.ResourceGroupName | Where-Object { $_.Name -like "$DatabasePrefix*" } | ForEach-Object {
-            Write-Host "      Cleaning Database: $($_.Name)"
-            Remove-AzCosmosDBGremlinDatabase -AccountName $account.Name -ResourceGroupName $AzResourceGroup.ResourceGroupName -Name $_.Name
-        }
-    } elseif ($account.Capabilities | Where-Object { $_.Name -eq "EnableTable" }) {
-        Write-Host "    Cleaning Table Account: $($_.Name)"
-        Get-AzCosmosDBTable -AccountName $account.Name -ResourceGroupName $AzResourceGroup.ResourceGroupName | Where-Object { $_.Name -like "$DatabasePrefix*" } | ForEach-Object {
-            Write-Host "      Cleaning Table: $($_.Name)"
-            Remove-AzCosmosDBTable -AccountName $account.Name -ResourceGroupName $AzResourceGroup.ResourceGroupName -Name $_.Name
-        }
-    } else {
-        Write-Host "    Cleaning SQL Account: $($_.Name)"
-        Get-AzCosmosDBSqlDatabase -AccountName $account.Name -ResourceGroupName $AzResourceGroup.ResourceGroupName | Where-Object { $_.Name -like "$DatabasePrefix*" } | ForEach-Object {
-            Write-Host "      Cleaning Database: $($_.Name)"
-            Remove-AzCosmosDBSqlDatabase -AccountName $account.Name -ResourceGroupName $AzResourceGroup.ResourceGroupName -Name $_.Name
-        }
-    }
-}

test/sql/container.spec.ts

@@ -1,51 +1,40 @@
 import { expect, test } from "@playwright/test";
 
-import { DataExplorer, TestAccount, generateUniqueName } from "../fx";
+import { DataExplorer, TestAccount, generateDatabaseNameWithTimestamp, generateUniqueName } from "../fx";
 
 test("SQL database and container CRUD", async ({ page }) => {
-  const databaseId = generateUniqueName("db");
-  const containerId = "testcontainer"; // A unique container name isn't needed because the database is unique
+  const databaseId = generateDatabaseNameWithTimestamp();
+  const containerId = generateUniqueName("container");
 
   const explorer = await DataExplorer.open(page, TestAccount.SQL);
 
   await explorer.globalCommandButton("New Container").click();
-  await explorer.whilePanelOpen(
-    "New Container",
-    async (panel, okButton) => {
-      await panel.getByPlaceholder("Type a new database id").fill(databaseId);
-      await panel.getByRole("textbox", { name: "Container id, Example Container1" }).fill(containerId);
-      await panel.getByRole("textbox", { name: "Partition key" }).fill("/pk");
-      await panel.getByLabel("Database max RU/s").fill("1000");
-      await okButton.click();
-    },
-    { closeTimeout: 5 * 60 * 1000 },
-  );
+  await explorer.whilePanelOpen("New Container", async (panel, okButton) => {
+    await panel.getByPlaceholder("Type a new database id").fill(databaseId);
+    await panel.getByRole("textbox", { name: "Container id, Example Container1" }).fill(containerId);
+    await panel.getByRole("textbox", { name: "Partition key" }).fill("/pk");
+    await panel.getByLabel("Database max RU/s").fill("1000");
+    await okButton.click();
+  });
 
-  const databaseNode = await explorer.waitForNode(databaseId);
-  const containerNode = await explorer.waitForContainerNode(databaseId, containerId);
+  const databaseNode = explorer.treeNode(databaseId);
+  await databaseNode.expand();
+  const containerNode = explorer.treeNode(`${databaseId}/${containerId}`);
 
   await containerNode.openContextMenu();
   await containerNode.contextMenuItem("Delete Container").click();
-  await explorer.whilePanelOpen(
-    "Delete Container",
-    async (panel, okButton) => {
-      await panel.getByRole("textbox", { name: "Confirm by typing the container id" }).fill(containerId);
-      await okButton.click();
-    },
-    { closeTimeout: 5 * 60 * 1000 },
-  );
+  await explorer.whilePanelOpen("Delete Container", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Confirm by typing the container id" }).fill(containerId);
+    await okButton.click();
+  });
   await expect(containerNode.element).not.toBeAttached();
 
   await databaseNode.openContextMenu();
   await databaseNode.contextMenuItem("Delete Database").click();
-  await explorer.whilePanelOpen(
-    "Delete Database",
-    async (panel, okButton) => {
-      await panel.getByRole("textbox", { name: "Confirm by typing the database id" }).fill(databaseId);
-      await okButton.click();
-    },
-    { closeTimeout: 5 * 60 * 1000 },
-  );
+  await explorer.whilePanelOpen("Delete Database", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Confirm by typing the database id" }).fill(databaseId);
+    await okButton.click();
+  });
 
   await expect(databaseNode.element).not.toBeAttached();
 });

test/sql/query.spec.ts

@@ -1,93 +0,0 @@
-import { expect, test } from "@playwright/test";
-
-import { DataExplorer, Editor, QueryTab, TestAccount } from "../fx";
-import { TestContainerContext, TestItem, createTestSQLContainer } from "../testData";
-
-let context: TestContainerContext = null!;
-let explorer: DataExplorer = null!;
-let queryTab: QueryTab = null!;
-let queryEditor: Editor = null!;
-
-test.beforeAll("Create Test Database", async () => {
-  context = await createTestSQLContainer(true);
-});
-
-test.beforeEach("Open new query tab", async ({ page }) => {
-  // Open a query tab
-  explorer = await DataExplorer.open(page, TestAccount.SQL);
-
-  // Container nodes should be visible. The explorer auto-expands database nodes when they are first loaded.
-  const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
-  await containerNode.openContextMenu();
-  await containerNode.contextMenuItem("New SQL Query").click();
-
-  // Wait for the editor to load
-  queryTab = explorer.queryTab("tab0");
-  queryEditor = queryTab.editor();
-  await queryEditor.locator.waitFor({ timeout: 30 * 1000 });
-  await queryTab.executeCTA.waitFor();
-  await explorer.frame.getByTestId("NotificationConsole/ExpandCollapseButton").click();
-  await explorer.frame.getByTestId("NotificationConsole/Contents").waitFor();
-});
-
-test.afterAll("Delete Test Database", async () => {
-  await context?.dispose();
-});
-
-test("Query results", async () => {
-  // Run the query and verify the results
-  await queryEditor.locator.click();
-  const executeQueryButton = explorer.commandBarButton("Execute Query");
-  await executeQueryButton.click();
-  await expect(queryTab.resultsEditor.locator).toBeAttached({ timeout: 60 * 1000 });
-
-  // Read the results
-  const resultText = await queryTab.resultsEditor.text();
-  expect(resultText).not.toBeNull();
-  const resultData: TestItem[] = JSON.parse(resultText!);
-
-  // Pick 3 random documents and assert them
-  const randomDocs = [0, 1, 2].map(() => resultData[Math.floor(Math.random() * resultData.length)]);
-  randomDocs.forEach((doc) => {
-    const matchingDoc = context?.testData.get(doc.id);
-    expect(matchingDoc).not.toBeNull();
-    expect(doc.randomData).toEqual(matchingDoc?.randomData);
-    expect(doc.partitionKey).toEqual(matchingDoc?.partitionKey);
-  });
-});
-
-test("Query stats", async () => {
-  // Run the query and verify the results
-  await queryEditor.locator.click();
-  const executeQueryButton = explorer.commandBarButton("Execute Query");
-  await executeQueryButton.click();
-  await expect(queryTab.resultsEditor.locator).toBeAttached({ timeout: 60 * 1000 });
-
-  // Open the query stats tab and validate some data there
-  queryTab.queryStatsTab.click();
-  await expect(queryTab.queryStatsList).toBeAttached();
-  const showingResultsCell = queryTab.queryStatsList.getByTestId("Row:Showing Results/Column:value");
-  await expect(showingResultsCell).toContainText(/\d+ - \d+/);
-});
-
-test("Query errors", async () => {
-  test.skip(true, "Disabled due to an issue with error reporting in the backend.");
-
-  await queryEditor.locator.click();
-  await queryEditor.setText("SELECT\n  glarb(c.id),\n  blarg(c.id)\nFROM c");
-
-  // Run the query and verify the results
-  const executeQueryButton = explorer.commandBarButton("Execute Query");
-  await executeQueryButton.click();
-
-  await expect(queryTab.errorList).toBeAttached({ timeout: 60 * 1000 });
-
-  // Validating the squiggles requires a lot of digging through the Monaco model, OR a screenshot comparison.
-  // The screenshot ended up being fairly flaky, and a pain to maintain, so I decided not to include validation for the squiggles.
-
-  // Validate the errors are in the list
-  await expect(queryTab.errorList.getByTestId("Row:0/Column:code")).toHaveText("SC2005");
-  await expect(queryTab.errorList.getByTestId("Row:0/Column:location")).toHaveText("Line 2");
-  await expect(queryTab.errorList.getByTestId("Row:1/Column:code")).toHaveText("SC2005");
-  await expect(queryTab.errorList.getByTestId("Row:1/Column:location")).toHaveText("Line 3");
-});

test/sql/resourceToken.spec.ts

@@ -19,7 +19,7 @@ test("SQL account using Resource token", async ({ page }) => {
   const account = await armClient.databaseAccounts.get(resourceGroupName, accountName);
   const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, accountName);
   const dbId = generateUniqueName("db");
-  const collectionId = "testcollection";
+  const collectionId = generateUniqueName("col");
   const client = new CosmosClient({
     endpoint: account.documentEndpoint!,
     key: keys.primaryMasterKey,

test/tables/container.spec.ts

@@ -3,33 +3,29 @@ import { expect, test } from "@playwright/test";
 import { DataExplorer, TestAccount, generateUniqueName } from "../fx";
 
 test("Tables CRUD", async ({ page }) => {
-  const tableId = generateUniqueName("table"); // A unique table name IS needed because the database is shared when using Table Storage.
+  const tableId = generateUniqueName("table");
 
   const explorer = await DataExplorer.open(page, TestAccount.Tables);
 
   await explorer.globalCommandButton("New Table").click();
-  await explorer.whilePanelOpen(
-    "New Table",
-    async (panel, okButton) => {
-      await panel.getByRole("textbox", { name: "Table id, Example Table1" }).fill(tableId);
-      await panel.getByLabel("Table Max RU/s").fill("1000");
-      await okButton.click();
-    },
-    { closeTimeout: 5 * 60 * 1000 },
-  );
+  await explorer.whilePanelOpen("New Table", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Table id, Example Table1" }).fill(tableId);
+    await panel.getByLabel("Table Max RU/s").fill("1000");
+    await okButton.click();
+  });
 
-  const tableNode = await explorer.waitForContainerNode("TablesDB", tableId);
+  const databaseNode = explorer.treeNode("TablesDB");
+  await databaseNode.expand();
+
+  const tableNode = explorer.treeNode(`TablesDB/${tableId}`);
+  await expect(tableNode.element).toBeAttached();
 
   await tableNode.openContextMenu();
   await tableNode.contextMenuItem("Delete Table").click();
-  await explorer.whilePanelOpen(
-    "Delete Table",
-    async (panel, okButton) => {
-      await panel.getByRole("textbox", { name: "Confirm by typing the table id" }).fill(tableId);
-      await okButton.click();
-    },
-    { closeTimeout: 5 * 60 * 1000 },
-  );
+  await explorer.whilePanelOpen("Delete Table", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Confirm by typing the table id" }).fill(tableId);
+    await okButton.click();
+  });
 
   await expect(tableNode.element).not.toBeAttached();
 });

test/testData.ts

@@ -1,95 +0,0 @@
-import { CosmosDBManagementClient } from "@azure/arm-cosmosdb";
-import { BulkOperationType, Container, CosmosClient, Database, JSONObject } from "@azure/cosmos";
-import crypto from "crypto";
-import {
-  TestAccount,
-  generateUniqueName,
-  getAccountName,
-  getAzureCLICredentials,
-  resourceGroupName,
-  subscriptionId,
-} from "./fx";
-
-export interface TestItem {
-  id: string;
-  partitionKey: string;
-  randomData: string;
-}
-
-const partitionCount = 4;
-
-// If we increase this number, we need to split bulk creates into multiple batches.
-// Bulk operations are limited to 100 items per partition.
-const itemsPerPartition = 100;
-
-function createTestItems(): TestItem[] {
-  const items: TestItem[] = [];
-  for (let i = 0; i < partitionCount; i++) {
-    for (let j = 0; j < itemsPerPartition; j++) {
-      const id = crypto.randomBytes(32).toString("base64");
-      items.push({
-        id,
-        partitionKey: `partition_${i}`,
-        randomData: crypto.randomBytes(32).toString("base64"),
-      });
-    }
-  }
-  return items;
-}
-
-export const TestData: TestItem[] = createTestItems();
-
-export class TestContainerContext {
-  constructor(
-    public armClient: CosmosDBManagementClient,
-    public client: CosmosClient,
-    public database: Database,
-    public container: Container,
-    public testData: Map<string, TestItem>,
-  ) {}
-
-  async dispose() {
-    await this.database.delete();
-  }
-}
-
-export async function createTestSQLContainer(includeTestData?: boolean) {
-  const databaseId = generateUniqueName("db");
-  const containerId = "testcontainer"; // A unique container name isn't needed because the database is unique
-  const credentials = await getAzureCLICredentials();
-  const armClient = new CosmosDBManagementClient(credentials, subscriptionId);
-  const accountName = getAccountName(TestAccount.SQL);
-  const account = await armClient.databaseAccounts.get(resourceGroupName, accountName);
-  const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, accountName);
-  const client = new CosmosClient({
-    endpoint: account.documentEndpoint!,
-    key: keys.primaryMasterKey,
-  });
-  const { database } = await client.databases.createIfNotExists({ id: databaseId });
-  try {
-    const { container } = await database.containers.createIfNotExists({
-      id: containerId,
-      partitionKey: "/partitionKey",
-    });
-    if (includeTestData) {
-      const batchCount = TestData.length / 100;
-      for (let i = 0; i < batchCount; i++) {
-        const batchItems = TestData.slice(i * 100, i * 100 + 100);
-        await container.items.bulk(
-          batchItems.map((item) => ({
-            operationType: BulkOperationType.Create,
-            resourceBody: item as unknown as JSONObject,
-          })),
-        );
-      }
-    }
-
-    const testDataMap = new Map<string, TestItem>();
-    TestData.forEach((item) => testDataMap.set(item.id, item));
-
-    return new TestContainerContext(armClient, client, database, container, testDataMap);
-  } catch (e) {
-    await database.delete();
-    throw e;
-  }
-}