for computedProperties use nosql2

Co-authored-by: Laurent Nguyen <languye@microsoft.com>

.github/workflows/ci.yml

@@ -189,6 +189,9 @@ jobs:
             NOSQL_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-sql.documents.azure.com/.default" -o tsv --query accessToken)
             echo "::add-mask::$NOSQL_TESTACCOUNT_TOKEN"
             echo NOSQL_TESTACCOUNT_TOKEN=$NOSQL_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            NOSQL2_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-sql-2.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$NOSQL2_TESTACCOUNT_TOKEN"
+            echo NOSQL2_TESTACCOUNT_TOKEN=$NOSQL2_TESTACCOUNT_TOKEN >> $GITHUB_ENV
             NOSQL_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-sql-readonly.documents.azure.com/.default" -o tsv --query accessToken)
             echo "::add-mask::$NOSQL_READONLY_TESTACCOUNT_TOKEN"
             echo NOSQL_READONLY_TESTACCOUNT_TOKEN=$NOSQL_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV

src/Contracts/DataExplorerMessagesContract.ts

@@ -46,6 +46,10 @@ export type DataExploreMessageV3 =
       params: {
         updateType: "created" | "deleted" | "settings";
       };
+    }
+  | {
+      type: FabricMessageTypes.RestoreContainer;
+      params: [];
     };
 export interface GetCosmosTokenMessageOptions {
   verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";

src/Explorer/ContainerCopy/ContainerCopyPanel.tsx

@@ -1,6 +1,4 @@
 import React, { useEffect } from "react";
-import { Dialog } from "../../Explorer/Controls/Dialog";
-import { SidePanel } from "../../Explorer/Panes/PanelContainerComponent";
 import CopyJobCommandBar from "./CommandBar/CopyJobCommandBar";
 import "./containerCopyStyles.less";
 import { MonitorCopyJobsRefState } from "./MonitorCopyJobs/MonitorCopyJobRefState";
@@ -18,8 +16,6 @@ const ContainerCopyPanel: React.FC<ContainerCopyProps> = ({ explorer }) => {
     <div id="containerCopyWrapper" className="flexContainer hideOverflows">
       <CopyJobCommandBar explorer={explorer} />
       <MonitorCopyJobs ref={monitorCopyJobsRef} explorer={explorer} />
-      <SidePanel />
-      <Dialog />
     </div>
   );
 };

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobActionMenu.test.tsx

@@ -516,7 +516,7 @@ describe("CopyJobActionMenu", () => {
       expect(screen.getByText("Cancel")).toBeInTheDocument();
     });
 
-    it("should handle complete action disabled state for online jobs", () => {
+    it("should disable complete action when job is being updated", () => {
       const job = createMockJob({
         Status: CopyJobStatusType.InProgress,
         Mode: CopyJobMigrationType.Online,
@@ -530,8 +530,34 @@ describe("CopyJobActionMenu", () => {
       const completeButton = screen.getByText("Complete");
       fireEvent.click(completeButton);
 
+      // Simulate dialog confirmation to trigger state update
+      const [, , , onOkCallback] = mockShowOkCancelModalDialog.mock.calls[0];
+      onOkCallback();
+
       fireEvent.click(actionButton);
-      expect(screen.getByText("Complete")).toBeInTheDocument();
+      const completeButtonAfterClick = screen.getByText("Complete").closest("button");
+      expect(completeButtonAfterClick).toBeInTheDocument();
+      expect(completeButtonAfterClick).toHaveAttribute("aria-disabled", "true");
+    });
+
+    it("should disable complete action when any other action is being performed", () => {
+      const job = createMockJob({
+        Status: CopyJobStatusType.InProgress,
+        Mode: CopyJobMigrationType.Online,
+      });
+
+      render(<TestComponentWrapper job={job} />);
+
+      const actionButton = screen.getByRole("button", { name: "Actions" });
+      fireEvent.click(actionButton);
+
+      const pauseButton = screen.getByText("Pause");
+      fireEvent.click(pauseButton);
+      fireEvent.click(actionButton);
+
+      const completeButtonAfterClick = screen.getByText("Complete").closest("button");
+      expect(completeButtonAfterClick).toBeInTheDocument();
+      expect(completeButtonAfterClick).toHaveAttribute("aria-disabled", "true");
     });
   });
 

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobActionMenu.tsx

@@ -61,7 +61,6 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
 
   const getMenuItems = (): IContextualMenuProps["items"] => {
     const isThisJobUpdating = updatingJobAction?.jobName === job.Name;
-    const updatingAction = updatingJobAction?.action;
 
     const baseItems = [
       {
@@ -105,7 +104,7 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
           text: ContainerCopyMessages.MonitorJobs.Actions.complete,
           iconProps: { iconName: "CheckMark" },
           onClick: () => showActionConfirmationDialog(job, CopyJobActions.complete),
-          disabled: isThisJobUpdating && updatingAction === CopyJobActions.complete,
+          disabled: isThisJobUpdating,
         });
       }
       return filteredItems;

src/Explorer/ContextMenuButtonFactory.tsx

@@ -7,7 +7,7 @@ import {
   AddGlobalSecondaryIndexPanelProps,
 } from "Explorer/Panes/AddGlobalSecondaryIndexPanel/AddGlobalSecondaryIndexPanel";
 import { useDatabases } from "Explorer/useDatabases";
-import { isFabric, isFabricNative } from "Platform/Fabric/FabricUtil";
+import { isFabric, isFabricNative, openRestoreContainerDialog } from "Platform/Fabric/FabricUtil";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
@@ -35,6 +35,7 @@ import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
 import UserDefinedFunction from "./Tree/UserDefinedFunction";
 import { useSelectedNode } from "./useSelectedNode";
+import { extractFeatures } from "../Platform/Hosted/extractFeatures";
 
 export interface CollectionContextMenuButtonParams {
   databaseId: string;
@@ -60,6 +61,17 @@ export const createDatabaseContextMenu = (container: Explorer, databaseId: strin
     },
   ];
 
+  if (isFabricNative() && !userContext.fabricContext?.isReadOnly) {
+    const features = extractFeatures();
+    if (features?.enableRestoreContainer) {
+      items.push({
+        iconSrc: AddCollectionIcon,
+        onClick: () => openRestoreContainerDialog(),
+        label: `Restore ${getCollectionName()}`,
+      });
+    }
+  }
+
   if (!isFabricNative() && (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations)) {
     items.push({
       iconSrc: DeleteDatabaseIcon,

src/Explorer/SplashScreen/SplashScreen.less

@@ -54,6 +54,6 @@
     .mainButtonsContainer {
       display: flex;
       gap: 0 16px;
-      margin-bottom: 10px
+      margin: 40px auto
     }
    

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -164,6 +164,23 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
   const container = explorer;
   const subscriptions: Array<{ dispose: () => void }> = [];
 
+  let title: string;
+  let subtitle: string;
+
+  switch (userContext.apiType) {
+    case "Postgres":
+      title = "Welcome to Azure Cosmos DB for PostgreSQL";
+      subtitle = "Get started with our sample datasets, documentation, and additional tools.";
+      break;
+    case "VCoreMongo":
+      title = "Welcome to Azure DocumentDB (with MongoDB compatibility)";
+      subtitle = "Get started with our sample datasets, documentation, and additional tools.";
+      break;
+    default:
+      title = "Welcome to Azure Cosmos DB";
+      subtitle = "Globally distributed, multi-model database service for any scale";
+  }
+
   React.useEffect(() => {
     subscriptions.push(
       {
@@ -902,10 +919,11 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
   return (
     <div className={styles.splashScreenContainer}>
       <div className={styles.splashScreen}>
-        <h2 className={styles.title} role="heading" aria-label="Welcome to Azure Cosmos DB">
+        <h2 className={styles.title} role="heading" aria-label={title}>
-          Welcome to Azure Cosmos DB<span className="activePatch"></span>
+          {title}
+          <span className="activePatch"></span>
         </h2>
-        <div className={styles.subtitle}>Globally distributed, multi-model database service for any scale</div>
+        <div className={styles.subtitle}>{subtitle}</div>
         {getSplashScreenButtons()}
         {useCarousel.getState().showCoachMark && (
           <Coachmark

src/Main.tsx

@@ -2,9 +2,18 @@
 import "./ReactDevTools";
 
 // CSS Dependencies
-import { initializeIcons } from "@fluentui/react";
+import { initializeIcons, loadTheme, useTheme } from "@fluentui/react";
+import { FluentProvider, makeStyles, webDarkTheme, webLightTheme } from "@fluentui/react-components";
+import { Platform } from "ConfigContext";
+import ContainerCopyPanel from "Explorer/ContainerCopy/ContainerCopyPanel";
+import Explorer from "Explorer/Explorer";
+import { QuickstartCarousel } from "Explorer/Quickstart/QuickstartCarousel";
+import { MongoQuickstartTutorial } from "Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
+import { SQLQuickstartTutorial } from "Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
+import { userContext } from "UserContext";
 import "allotment/dist/style.css";
 import "bootstrap/dist/css/bootstrap.css";
+import { useCarousel } from "hooks/useCarousel";
 import React from "react";
 import ReactDOM from "react-dom";
 import "../externals/jquery-ui.min.css";
@@ -15,8 +24,13 @@ import "../externals/jquery.dataTables.min.css";
 import "../externals/jquery.typeahead.min.css";
 import "../externals/jquery.typeahead.min.js";
 // Image Dependencies
+import { SidePanel } from "Explorer/Panes/PanelContainerComponent";
+import { QueryCopilotCarousel } from "Explorer/QueryCopilot/CopilotCarousel";
+import { SidebarContainer } from "Explorer/Sidebar";
+import { KeyboardShortcutRoot } from "KeyboardShortcuts";
 import "allotment/dist/style.css";
 import "../images/CosmosDB_rgb_ui_lighttheme.ico";
+import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
 import "../images/favicon.ico";
 import "../less/TableStyles/CustomizeColumns.less";
 import "../less/TableStyles/EntityEditor.less";
@@ -28,29 +42,182 @@ import "../less/infobox.less";
 import "../less/menus.less";
 import "../less/messagebox.less";
 import "../less/resourceTree.less";
+import * as StyleConstants from "./Common/StyleConstants";
 import "./Explorer/Controls/Accordion/AccordionComponent.less";
 import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
+import { Dialog } from "./Explorer/Controls/Dialog";
 import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
 import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
 import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
 import "./Explorer/Controls/TreeComponent/treeComponent.less";
+import { ErrorBoundary } from "./Explorer/ErrorBoundary";
 import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
 import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
+import { CommandBar } from "./Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import "./Explorer/Menus/CommandBar/ConnectionStatusComponent.less";
 import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
 import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
+import { NotificationConsole } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import "./Explorer/Panes/PanelComponent.less";
 import "./Explorer/SplashScreen/SplashScreen.less";
 import "./Libs/jquery";
-import { MetricScenarioProvider } from "./Metrics/MetricScenarioProvider";
+import MetricScenario from "./Metrics/MetricEvents";
-import Root from "./RootComponents/Root";
+import { MetricScenarioProvider, useMetricScenario } from "./Metrics/MetricScenarioProvider";
+import { ApplicationMetricPhase } from "./Metrics/ScenarioConfig";
+import { useInteractive } from "./Metrics/useMetricPhases";
+import { appThemeFabric } from "./Platform/Fabric/FabricTheme";
 import "./Shared/appInsights";
+import { useConfig } from "./hooks/useConfig";
+import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
+import { useThemeStore } from "./hooks/useTheme";
 import "./less/DarkModeMenus.less";
 import "./less/ThemeSystem.less";
-
 // Initialize icons before React is loaded
 initializeIcons(undefined, { disableWarnings: true });
 
+const useStyles = makeStyles({
+  root: {
+    height: "100vh",
+    width: "100vw",
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+  },
+});
+
+const App = (): JSX.Element => {
+  const config = useConfig();
+  const styles = useStyles();
+  // theme is used for application-wide styling
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const theme = useTheme();
+
+  // Load Fabric theme and styles only once when platform is Fabric
+  React.useEffect(() => {
+    if (config?.platform === Platform.Fabric) {
+      loadTheme(appThemeFabric);
+      import("../less/documentDBFabric.less");
+    }
+    StyleConstants.updateStyles();
+  }, [config?.platform]);
+
+  const explorer = useKnockoutExplorer(config?.platform);
+
+  // Scenario-based health tracking: start ApplicationLoad and complete phases.
+  const { startScenario, completePhase } = useMetricScenario();
+  React.useEffect(() => {
+    // Only start scenario after config is initialized to avoid race conditions
+    // with message handlers that depend on configContext.platform
+    if (config) {
+      startScenario(MetricScenario.ApplicationLoad);
+    }
+  }, [config, startScenario]);
+
+  React.useEffect(() => {
+    if (explorer) {
+      completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [explorer]);
+
+  if (!explorer) {
+    return <LoadingExplorer />;
+  }
+
+  return (
+    <div id="Main" className={styles.root}>
+      <KeyboardShortcutRoot>
+        <div className="flexContainer" aria-hidden="false">
+          {userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
+            <>
+              <ContainerCopyPanel explorer={explorer} />
+              <SidePanel />
+              <Dialog />
+            </>
+          ) : (
+            <DivExplorer explorer={explorer} />
+          )}
+        </div>
+      </KeyboardShortcutRoot>
+    </div>
+  );
+};
+
+const DivExplorer: React.FC<{ explorer: Explorer }> = ({ explorer }) => {
+  const isCarouselOpen = useCarousel((state) => state.shouldOpen);
+  const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
+  useInteractive(MetricScenario.ApplicationLoad);
+
+  return (
+    <div
+      className="flexContainer"
+      style={{
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "var(--colorNeutralBackground1)",
+        color: "var(--colorNeutralForeground1)",
+      }}
+      aria-hidden="false"
+      data-test="DataExplorerRoot"
+    >
+      <div
+        id="divExplorer"
+        className="flexContainer hideOverflows"
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: "var(--colorNeutralBackground1)",
+          color: "var(--colorNeutralForeground1)",
+        }}
+      >
+        <div id="freeTierTeachingBubble"> </div>
+        <CommandBar container={explorer} />
+        <SidebarContainer explorer={explorer} />
+        <div
+          className="dataExplorerErrorConsoleContainer"
+          role="contentinfo"
+          aria-label="Notification console"
+          id="explorerNotificationConsole"
+          style={{
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)",
+          }}
+        >
+          <NotificationConsole />
+        </div>
+      </div>
+      <SidePanel />
+      <Dialog />
+      {<QuickstartCarousel isOpen={isCarouselOpen} />}
+      {<SQLQuickstartTutorial />}
+      {<MongoQuickstartTutorial />}
+      {<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
+    </div>
+  );
+};
+
+const Root: React.FC = () => {
+  // Use React state to track isDarkMode and subscribe to changes
+  const [isDarkMode, setIsDarkMode] = React.useState(useThemeStore.getState().isDarkMode);
+  const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
+
+  // Subscribe to theme changes
+  React.useEffect(() => {
+    return useThemeStore.subscribe((state) => {
+      setIsDarkMode(state.isDarkMode);
+    });
+  }, []);
+
+  return (
+    <ErrorBoundary>
+      <FluentProvider theme={currentTheme}>
+        <App />
+      </FluentProvider>
+    </ErrorBoundary>
+  );
+};
+
 const mainElement = document.getElementById("Main");
 if (mainElement) {
   ReactDOM.render(
@@ -60,3 +227,24 @@ if (mainElement) {
     mainElement,
   );
 }
+
+function LoadingExplorer(): JSX.Element {
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <div className="splashLoaderContainer">
+        <div className="splashLoaderContentContainer">
+          <p className="connectExplorerContent">
+            <img src={hdeConnectImage} alt="Azure Cosmos DB" />
+          </p>
+          <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
+            Welcome to Azure Cosmos DB
+          </p>
+          <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
+            Connecting...
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/Metrics/MetricScenarioProvider.tsx

@@ -3,7 +3,7 @@ import MetricScenario from "./MetricEvents";
 import { MetricPhase } from "./ScenarioConfig";
 import { scenarioMonitor } from "./ScenarioMonitor";
 
-export interface MetricScenarioContextValue {
+interface MetricScenarioContextValue {
   startScenario: (scenario: MetricScenario) => void;
   startPhase: (scenario: MetricScenario, phase: MetricPhase) => void;
   completePhase: (scenario: MetricScenario, phase: MetricPhase) => void;

src/Platform/Fabric/FabricUtil.ts

@@ -105,6 +105,12 @@ const requestAndStoreAccessToken = async (): Promise<void> => {
   });
 };
 
+export const openRestoreContainerDialog = (): void => {
+  if (isFabricNative()) {
+    sendCachedDataMessage(FabricMessageTypes.RestoreContainer, []);
+  }
+};
+
 /**
  * Check token validity and schedule a refresh if necessary
  * @param tokenTimestamp

src/Platform/Hosted/extractFeatures.ts

@@ -40,6 +40,7 @@ export type Features = {
   readonly disableConnectionStringLogin: boolean;
   readonly enableContainerCopy: boolean;
   readonly enableCloudShell: boolean;
+  readonly enableRestoreContainer: boolean; // only for Fabric
 
   // can be set via both flight and feature flag
   autoscaleDefault: boolean;
@@ -111,6 +112,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     enablePriorityBasedExecution: "true" === get("enableprioritybasedexecution"),
     disableConnectionStringLogin: "true" === get("disableconnectionstringlogin"),
     enableContainerCopy: "true" === get("enablecontainercopy"),
+    enableRestoreContainer: "true" === get("enablerestorecontainer"),
     enableCloudShell: true,
   };
 }

src/RootComponents/App.test.tsx

@@ -1,316 +0,0 @@
-import { loadTheme } from "@fluentui/react";
-import "@testing-library/jest-dom";
-import { render, screen, waitFor } from "@testing-library/react";
-import React from "react";
-import { updateStyles } from "../Common/StyleConstants";
-import { Platform } from "../ConfigContext";
-import { useConfig } from "../hooks/useConfig";
-import { useKnockoutExplorer } from "../hooks/useKnockoutExplorer";
-import { MetricScenarioContextValue, useMetricScenario } from "../Metrics/MetricScenarioProvider";
-import App from "./App";
-
-const mockUserContext = {
-  features: { enableContainerCopy: false },
-  apiType: "SQL",
-};
-
-jest.mock("@fluentui/react", () => ({
-  loadTheme: jest.fn(),
-  makeStyles: jest.fn(() => () => ({
-    root: "mock-app-root-class",
-  })),
-  MessageBarType: {
-    error: "error",
-    warning: "warning",
-    info: "info",
-    success: "success",
-  },
-  SpinnerSize: {
-    xSmall: "xSmall",
-    small: "small",
-    medium: "medium",
-    large: "large",
-  },
-}));
-
-jest.mock("../Common/StyleConstants", () => ({
-  StyleConstants: {
-    BaseMedium: "#000000",
-    AccentMediumHigh: "#0078d4",
-    AccentMedium: "#106ebe",
-    AccentLight: "#deecf9",
-    AccentAccentExtra: "#0078d4",
-    FabricAccentMediumHigh: "#0078d4",
-    FabricAccentMedium: "#106ebe",
-    FabricAccentLight: "#deecf9",
-    PortalAccentMediumHigh: "#0078d4",
-    PortalAccentMedium: "#106ebe",
-    PortalAccentLight: "#deecf9",
-  },
-  updateStyles: jest.fn(),
-}));
-
-jest.mock("./LoadingExplorer", () => {
-  const MockLoadingExplorer = () => {
-    return <div data-testid="mock-loading-explorer">Loading Explorer</div>;
-  };
-  MockLoadingExplorer.displayName = "MockLoadingExplorer";
-  return MockLoadingExplorer;
-});
-
-jest.mock("./ExplorerContainer", () => {
-  const MockExplorerContainer = ({ explorer }: { explorer: unknown }) => {
-    return (
-      <div data-testid="mock-explorer-container">Explorer Container - {explorer ? "with explorer" : "no explorer"}</div>
-    );
-  };
-  MockExplorerContainer.displayName = "MockExplorerContainer";
-  return MockExplorerContainer;
-});
-
-jest.mock("../Explorer/ContainerCopy/ContainerCopyPanel", () => {
-  const MockContainerCopyPanel = ({ explorer }: { explorer: unknown }) => {
-    return (
-      <div data-testid="mock-container-copy-panel">
-        Container Copy Panel - {explorer ? "with explorer" : "no explorer"}
-      </div>
-    );
-  };
-  MockContainerCopyPanel.displayName = "MockContainerCopyPanel";
-  return MockContainerCopyPanel;
-});
-
-jest.mock("../KeyboardShortcuts", () => ({
-  KeyboardShortcutRoot: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="mock-keyboard-shortcut-root">{children}</div>
-  ),
-}));
-
-jest.mock("../UserContext", () => ({
-  get userContext() {
-    return mockUserContext;
-  },
-}));
-
-const mockConfig = {
-  platform: Platform.Portal,
-};
-
-const mockExplorer = {
-  id: "test-explorer",
-  name: "Test Explorer",
-};
-
-jest.mock("../hooks/useConfig", () => ({
-  useConfig: jest.fn(() => mockConfig),
-}));
-
-jest.mock("../hooks/useKnockoutExplorer", () => ({
-  useKnockoutExplorer: jest.fn(),
-}));
-
-jest.mock("../Metrics/MetricScenarioProvider", () => ({
-  useMetricScenario: jest.fn(() => ({
-    startScenario: jest.fn(),
-    completePhase: jest.fn(),
-  })),
-}));
-
-jest.mock("../Metrics/MetricEvents", () => ({
-  __esModule: true,
-  default: {
-    ApplicationLoad: "ApplicationLoad",
-  },
-}));
-
-jest.mock("../Metrics/ScenarioConfig", () => ({
-  ApplicationMetricPhase: {
-    ExplorerInitialized: "ExplorerInitialized",
-  },
-  CommonMetricPhase: {
-    Interactive: "Interactive",
-  },
-}));
-
-jest.mock("../Platform/Fabric/FabricTheme", () => ({
-  appThemeFabric: { name: "fabric-theme" },
-}));
-
-describe("App", () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-    mockUserContext.features = { enableContainerCopy: false };
-    mockUserContext.apiType = "SQL";
-  });
-  let mockStartScenario: jest.Mock;
-  let mockCompletePhase: jest.Mock;
-  let mockUseKnockoutExplorer: jest.Mock;
-  let mockUseConfig: jest.Mock;
-  let mockLoadTheme: jest.Mock;
-  let mockUpdateStyles: jest.Mock;
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-
-    mockStartScenario = jest.fn();
-    mockCompletePhase = jest.fn();
-
-    mockUseKnockoutExplorer = jest.mocked(useKnockoutExplorer);
-    mockUseConfig = jest.mocked(useConfig);
-    mockLoadTheme = jest.mocked(loadTheme);
-    mockUpdateStyles = jest.mocked(updateStyles);
-
-    const mockUseMetricScenario = jest.mocked(useMetricScenario);
-    mockUseMetricScenario.mockReturnValue({
-      startScenario: mockStartScenario,
-      completePhase: mockCompletePhase,
-    } as unknown as MetricScenarioContextValue);
-
-    mockUseConfig.mockReturnValue(mockConfig);
-    mockUseKnockoutExplorer.mockReturnValue(null);
-  });
-
-  test("should render loading explorer when explorer is not ready", () => {
-    mockUseKnockoutExplorer.mockReturnValue(null);
-
-    render(<App />);
-
-    expect(screen.getByTestId("mock-loading-explorer")).toBeInTheDocument();
-    expect(screen.queryByTestId("mock-explorer-container")).not.toBeInTheDocument();
-  });
-
-  test("should render explorer container when explorer is ready", () => {
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    render(<App />);
-
-    expect(screen.getByTestId("mock-explorer-container")).toBeInTheDocument();
-    expect(screen.queryByTestId("mock-loading-explorer")).not.toBeInTheDocument();
-  });
-
-  test("should start metric scenario on mount", () => {
-    render(<App />);
-
-    expect(mockStartScenario).toHaveBeenCalledWith("ApplicationLoad");
-    expect(mockStartScenario).toHaveBeenCalledTimes(1);
-  });
-
-  test("should complete metric phase when explorer is initialized", async () => {
-    const { rerender } = render(<App />);
-
-    expect(mockCompletePhase).not.toHaveBeenCalled();
-
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-    rerender(<App />);
-
-    await waitFor(() => {
-      expect(mockCompletePhase).toHaveBeenCalledWith("ApplicationLoad", "ExplorerInitialized");
-    });
-  });
-
-  test("should load fabric theme when platform is Fabric", () => {
-    const fabricConfig = { platform: Platform.Fabric };
-    mockUseConfig.mockReturnValue(fabricConfig);
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    render(<App />);
-
-    expect(mockLoadTheme).toHaveBeenCalledWith({ name: "fabric-theme" });
-  });
-
-  test("should not load fabric theme when platform is not Fabric", () => {
-    const portalConfig = { platform: Platform.Portal };
-    mockUseConfig.mockReturnValue(portalConfig);
-
-    render(<App />);
-
-    expect(mockLoadTheme).not.toHaveBeenCalled();
-  });
-
-  test("should always call updateStyles", () => {
-    render(<App />);
-
-    expect(mockUpdateStyles).toHaveBeenCalled();
-  });
-
-  test("should render container copy panel when container copy is enabled and API is SQL", () => {
-    mockUserContext.features = { enableContainerCopy: true };
-    mockUserContext.apiType = "SQL";
-
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    render(<App />);
-
-    expect(screen.getByTestId("mock-container-copy-panel")).toBeInTheDocument();
-    expect(screen.queryByTestId("mock-explorer-container")).not.toBeInTheDocument();
-  });
-
-  test("should render explorer container when container copy is disabled", () => {
-    mockUserContext.features = { enableContainerCopy: false };
-    mockUserContext.apiType = "SQL";
-
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    render(<App />);
-
-    expect(screen.getByTestId("mock-explorer-container")).toBeInTheDocument();
-    expect(screen.queryByTestId("mock-container-copy-panel")).not.toBeInTheDocument();
-  });
-
-  test("should render explorer container when API is not SQL", () => {
-    mockUserContext.features = { enableContainerCopy: true };
-    mockUserContext.apiType = "MongoDB";
-
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    render(<App />);
-
-    expect(screen.getByTestId("mock-explorer-container")).toBeInTheDocument();
-    expect(screen.queryByTestId("mock-container-copy-panel")).not.toBeInTheDocument();
-  });
-
-  test("should have correct DOM structure", () => {
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    const { container } = render(<App />);
-
-    const mainDiv = container.querySelector("#Main");
-    expect(mainDiv).toBeInTheDocument();
-    expect(mainDiv).toHaveClass("mock-app-root-class");
-
-    expect(screen.getByTestId("mock-keyboard-shortcut-root")).toBeInTheDocument();
-
-    const flexContainer = container.querySelector(".flexContainer");
-    expect(flexContainer).toBeInTheDocument();
-    expect(flexContainer).toHaveAttribute("aria-hidden", "false");
-  });
-
-  test("should handle config changes for Fabric platform", () => {
-    const { rerender } = render(<App />);
-
-    const fabricConfig = { platform: Platform.Fabric };
-    mockUseConfig.mockReturnValue(fabricConfig);
-
-    rerender(<App />);
-
-    expect(mockLoadTheme).toHaveBeenCalledWith({ name: "fabric-theme" });
-  });
-
-  test("should pass explorer to child components", () => {
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    render(<App />);
-
-    expect(screen.getByText("Explorer Container - with explorer")).toBeInTheDocument();
-  });
-
-  test("should handle null config gracefully", () => {
-    mockUseConfig.mockReturnValue(null);
-    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
-
-    expect(() => render(<App />)).not.toThrow();
-
-    expect(mockLoadTheme).not.toHaveBeenCalled();
-    expect(mockUpdateStyles).toHaveBeenCalled();
-  });
-});

src/RootComponents/App.tsx

@@ -1,73 +0,0 @@
-import { loadTheme, makeStyles } from "@fluentui/react";
-import React from "react";
-import * as StyleConstants from "../Common/StyleConstants";
-import { Platform } from "../ConfigContext";
-import ContainerCopyPanel from "../Explorer/ContainerCopy/ContainerCopyPanel";
-import { useConfig } from "../hooks/useConfig";
-import { useKnockoutExplorer } from "../hooks/useKnockoutExplorer";
-import { KeyboardShortcutRoot } from "../KeyboardShortcuts";
-import MetricScenario from "../Metrics/MetricEvents";
-import { useMetricScenario } from "../Metrics/MetricScenarioProvider";
-import { ApplicationMetricPhase } from "../Metrics/ScenarioConfig";
-import { appThemeFabric } from "../Platform/Fabric/FabricTheme";
-import { userContext } from "../UserContext";
-import ExplorerContainer from "./ExplorerContainer";
-import LoadingExplorer from "./LoadingExplorer";
-
-const useStyles = makeStyles({
-  root: {
-    height: "100vh",
-    width: "100vw",
-    backgroundColor: "var(--colorNeutralBackground1)",
-    color: "var(--colorNeutralForeground1)",
-  },
-});
-
-const App = (): JSX.Element => {
-  const config = useConfig();
-  const styles = useStyles();
-  // Load Fabric theme and styles only once when platform is Fabric
-  React.useEffect(() => {
-    if (config?.platform === Platform.Fabric) {
-      loadTheme(appThemeFabric);
-      import("../../less/documentDBFabric.less");
-    }
-    StyleConstants.updateStyles();
-  }, [config?.platform]);
-
-  const explorer = useKnockoutExplorer(config?.platform);
-
-  // Scenario-based health tracking: start ApplicationLoad and complete phases.
-  const { startScenario, completePhase } = useMetricScenario();
-  React.useEffect(() => {
-    startScenario(MetricScenario.ApplicationLoad);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  React.useEffect(() => {
-    if (explorer) {
-      completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [explorer]);
-
-  if (!explorer) {
-    return <LoadingExplorer />;
-  }
-
-  return (
-    <div id="Main" className={styles.root}>
-      <KeyboardShortcutRoot>
-        <div className="flexContainer" aria-hidden="false">
-          {userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
-            <ContainerCopyPanel explorer={explorer} />
-          ) : (
-            <ExplorerContainer explorer={explorer} />
-          )}
-        </div>
-      </KeyboardShortcutRoot>
-    </div>
-  );
-};
-
-export default App;

src/RootComponents/ExplorerContainer.test.tsx

@@ -1,183 +0,0 @@
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import React from "react";
-import Explorer from "../Explorer/Explorer";
-import { useCarousel } from "../hooks/useCarousel";
-import { useInteractive } from "../Metrics/useMetricPhases";
-import ExplorerContainer from "./ExplorerContainer";
-
-jest.mock("../Explorer/Controls/Dialog", () => ({
-  Dialog: () => <div data-testid="mock-dialog">Dialog</div>,
-}));
-
-jest.mock("../Explorer/Menus/CommandBar/CommandBarComponentAdapter", () => ({
-  CommandBar: ({ container }: { container: Explorer }) => (
-    <div data-testid="mock-command-bar">CommandBar - {container ? "with explorer" : "no explorer"}</div>
-  ),
-}));
-
-jest.mock("../Explorer/Menus/NotificationConsole/NotificationConsoleComponent", () => ({
-  NotificationConsole: () => <div data-testid="mock-notification-console">NotificationConsole</div>,
-}));
-
-jest.mock("../Explorer/Panes/PanelContainerComponent", () => ({
-  SidePanel: () => <div data-testid="mock-side-panel">SidePanel</div>,
-}));
-
-jest.mock("../Explorer/QueryCopilot/CopilotCarousel", () => ({
-  QueryCopilotCarousel: ({ isOpen, explorer }: { isOpen: boolean; explorer: Explorer }) => (
-    <div data-testid="mock-copilot-carousel">
-      CopilotCarousel - {isOpen ? "open" : "closed"} - {explorer ? "with explorer" : "no explorer"}
-    </div>
-  ),
-}));
-
-jest.mock("../Explorer/Quickstart/QuickstartCarousel", () => ({
-  QuickstartCarousel: ({ isOpen }: { isOpen: boolean }) => (
-    <div data-testid="mock-quickstart-carousel">QuickstartCarousel - {isOpen ? "open" : "closed"}</div>
-  ),
-}));
-
-jest.mock("../Explorer/Quickstart/Tutorials/MongoQuickstartTutorial", () => ({
-  MongoQuickstartTutorial: () => <div data-testid="mock-mongo-tutorial">MongoQuickstartTutorial</div>,
-}));
-
-jest.mock("../Explorer/Quickstart/Tutorials/SQLQuickstartTutorial", () => ({
-  SQLQuickstartTutorial: () => <div data-testid="mock-sql-tutorial">SQLQuickstartTutorial</div>,
-}));
-
-jest.mock("../Explorer/Sidebar", () => ({
-  SidebarContainer: ({ explorer }: { explorer: Explorer }) => (
-    <div data-testid="mock-sidebar-container">SidebarContainer - {explorer ? "with explorer" : "no explorer"}</div>
-  ),
-}));
-
-jest.mock("../hooks/useCarousel", () => ({
-  useCarousel: jest.fn((selector) => {
-    if (selector.toString().includes("shouldOpen")) {
-      return true;
-    }
-    if (selector.toString().includes("showCopilotCarousel")) {
-      return false;
-    }
-    return false;
-  }),
-}));
-
-jest.mock("../Metrics/useMetricPhases", () => ({
-  useInteractive: jest.fn(),
-}));
-
-jest.mock("../Metrics/MetricEvents", () => ({
-  __esModule: true,
-  default: {
-    ApplicationLoad: "ApplicationLoad",
-  },
-}));
-
-describe("ExplorerContainer", () => {
-  let mockExplorer: Explorer;
-
-  beforeEach(() => {
-    mockExplorer = {
-      id: "test-explorer",
-      name: "Test Explorer",
-    } as unknown as Explorer;
-
-    jest.clearAllMocks();
-  });
-
-  test("should render explorer container with all components", () => {
-    const { container } = render(<ExplorerContainer explorer={mockExplorer} />);
-
-    const mainContainer = container.querySelector('[data-test="DataExplorerRoot"]');
-    expect(mainContainer).toBeInTheDocument();
-    expect(mainContainer).toHaveClass("flexContainer");
-
-    expect(screen.getByTestId("mock-command-bar")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-sidebar-container")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-notification-console")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-side-panel")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-dialog")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-quickstart-carousel")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-sql-tutorial")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-mongo-tutorial")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-copilot-carousel")).toBeInTheDocument();
-  });
-
-  test("should pass explorer to components that need it", () => {
-    render(<ExplorerContainer explorer={mockExplorer} />);
-
-    expect(screen.getByText("CommandBar - with explorer")).toBeInTheDocument();
-    expect(screen.getByText("SidebarContainer - with explorer")).toBeInTheDocument();
-    expect(screen.getByText("CopilotCarousel - closed - with explorer")).toBeInTheDocument();
-  });
-
-  test("should have correct DOM structure", () => {
-    const { container } = render(<ExplorerContainer explorer={mockExplorer} />);
-
-    const mainContainer = container.querySelector('[data-test="DataExplorerRoot"]');
-    expect(mainContainer).toBeInTheDocument();
-    expect(mainContainer).toHaveAttribute("aria-hidden", "false");
-
-    const divExplorer = container.querySelector("#divExplorer");
-    expect(divExplorer).toBeInTheDocument();
-    expect(divExplorer).toHaveClass("flexContainer", "hideOverflows");
-
-    const freeTierBubble = container.querySelector("#freeTierTeachingBubble");
-    expect(freeTierBubble).toBeInTheDocument();
-
-    const notificationContainer = container.querySelector("#explorerNotificationConsole");
-    expect(notificationContainer).toBeInTheDocument();
-    expect(notificationContainer).toHaveClass("dataExplorerErrorConsoleContainer");
-    expect(notificationContainer).toHaveAttribute("role", "contentinfo");
-    expect(notificationContainer).toHaveAttribute("aria-label", "Notification console");
-  });
-
-  test("should apply correct inline styles", () => {
-    const { container } = render(<ExplorerContainer explorer={mockExplorer} />);
-
-    const mainContainer = container.querySelector('[data-test="DataExplorerRoot"]');
-    expect(mainContainer).toHaveStyle({
-      flex: "1",
-      display: "flex",
-      flexDirection: "column",
-      backgroundColor: "var(--colorNeutralBackground1)",
-      color: "var(--colorNeutralForeground1)",
-    });
-
-    const divExplorer = container.querySelector("#divExplorer");
-    expect(divExplorer).toHaveStyle({
-      flex: "1",
-      display: "flex",
-      flexDirection: "column",
-    });
-  });
-
-  test("should handle carousel states correctly", () => {
-    const mockUseCarousel = jest.mocked(useCarousel);
-
-    mockUseCarousel.mockImplementation((selector: { toString: () => string | string[] }) => {
-      if (selector.toString().includes("shouldOpen")) {
-        return false;
-      }
-      if (selector.toString().includes("showCopilotCarousel")) {
-        return true;
-      }
-      return false;
-    });
-
-    render(<ExplorerContainer explorer={mockExplorer} />);
-
-    expect(screen.getByText("QuickstartCarousel - closed")).toBeInTheDocument();
-    expect(screen.getByText("CopilotCarousel - open - with explorer")).toBeInTheDocument();
-  });
-
-  test("should call useInteractive hook with correct metric", () => {
-    const mockUseInteractive = jest.mocked(useInteractive);
-
-    render(<ExplorerContainer explorer={mockExplorer} />);
-
-    expect(mockUseInteractive).toHaveBeenCalledWith("ApplicationLoad");
-  });
-});

src/RootComponents/ExplorerContainer.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import { Dialog } from "../Explorer/Controls/Dialog";
-import Explorer from "../Explorer/Explorer";
-import { CommandBar } from "../Explorer/Menus/CommandBar/CommandBarComponentAdapter";
-import { NotificationConsole } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
-import { SidePanel } from "../Explorer/Panes/PanelContainerComponent";
-import { QueryCopilotCarousel } from "../Explorer/QueryCopilot/CopilotCarousel";
-import { QuickstartCarousel } from "../Explorer/Quickstart/QuickstartCarousel";
-import { MongoQuickstartTutorial } from "../Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
-import { SQLQuickstartTutorial } from "../Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
-import { SidebarContainer } from "../Explorer/Sidebar";
-import { useCarousel } from "../hooks/useCarousel";
-import MetricScenario from "../Metrics/MetricEvents";
-import { useInteractive } from "../Metrics/useMetricPhases";
-
-const ExplorerContainer: React.FC<{ explorer: Explorer }> = ({ explorer }) => {
-  const isCarouselOpen = useCarousel((state) => state.shouldOpen);
-  const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
-  useInteractive(MetricScenario.ApplicationLoad);
-
-  return (
-    <div
-      className="flexContainer"
-      style={{
-        flex: 1,
-        display: "flex",
-        flexDirection: "column",
-        backgroundColor: "var(--colorNeutralBackground1)",
-        color: "var(--colorNeutralForeground1)",
-      }}
-      aria-hidden="false"
-      data-test="DataExplorerRoot"
-    >
-      <div
-        id="divExplorer"
-        className="flexContainer hideOverflows"
-        style={{
-          flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          backgroundColor: "var(--colorNeutralBackground1)",
-          color: "var(--colorNeutralForeground1)",
-        }}
-      >
-        <div id="freeTierTeachingBubble"> </div>
-        <CommandBar container={explorer} />
-        <SidebarContainer explorer={explorer} />
-        <div
-          className="dataExplorerErrorConsoleContainer"
-          role="contentinfo"
-          aria-label="Notification console"
-          id="explorerNotificationConsole"
-          style={{
-            backgroundColor: "var(--colorNeutralBackground1)",
-            color: "var(--colorNeutralForeground1)",
-          }}
-        >
-          <NotificationConsole />
-        </div>
-      </div>
-      <SidePanel />
-      <Dialog />
-      {<QuickstartCarousel isOpen={isCarouselOpen} />}
-      {<SQLQuickstartTutorial />}
-      {<MongoQuickstartTutorial />}
-      {<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
-    </div>
-  );
-};
-
-export default ExplorerContainer;

src/RootComponents/LoadingExplorer.test.tsx

@@ -1,71 +0,0 @@
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import React from "react";
-import LoadingExplorer from "./LoadingExplorer";
-
-jest.mock("../../images/HdeConnectCosmosDB.svg", () => "test-hde-connect-image.svg");
-
-jest.mock("@fluentui/react-components", () => ({
-  makeStyles: jest.fn(() => () => ({
-    root: "mock-root-class",
-  })),
-}));
-
-describe("LoadingExplorer", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  test("should render loading explorer component", () => {
-    render(<LoadingExplorer />);
-
-    const container = screen.getByRole("alert");
-    expect(container).toBeInTheDocument();
-    expect(container).toHaveTextContent("Connecting...");
-  });
-
-  test("should display welcome title", () => {
-    render(<LoadingExplorer />);
-
-    const title = screen.getByText("Welcome to Azure Cosmos DB");
-    expect(title).toBeInTheDocument();
-    expect(title).toHaveAttribute("id", "explorerLoadingStatusTitle");
-  });
-
-  test("should display connecting status text", () => {
-    render(<LoadingExplorer />);
-
-    const statusText = screen.getByText("Connecting...");
-    expect(statusText).toBeInTheDocument();
-    expect(statusText).toHaveAttribute("id", "explorerLoadingStatusText");
-    expect(statusText).toHaveAttribute("role", "alert");
-  });
-
-  test("should render Azure Cosmos DB image", () => {
-    render(<LoadingExplorer />);
-
-    const image = screen.getByAltText("Azure Cosmos DB");
-    expect(image).toBeInTheDocument();
-    expect(image).toHaveAttribute("src", "test-hde-connect-image.svg");
-  });
-
-  test("should have correct class structure", () => {
-    render(<LoadingExplorer />);
-
-    const splashContainer = document.querySelector(".splashLoaderContainer");
-    expect(splashContainer).toBeInTheDocument();
-
-    const contentContainer = document.querySelector(".splashLoaderContentContainer");
-    expect(contentContainer).toBeInTheDocument();
-
-    const connectContent = document.querySelector(".connectExplorerContent");
-    expect(connectContent).toBeInTheDocument();
-  });
-
-  test("should apply CSS classes correctly", () => {
-    const { container } = render(<LoadingExplorer />);
-
-    const rootDiv = container.firstChild as HTMLElement;
-    expect(rootDiv).toHaveClass("mock-root-class");
-  });
-});

src/RootComponents/LoadingExplorer.tsx

@@ -1,36 +0,0 @@
-import { makeStyles } from "@fluentui/react-components";
-import React from "react";
-import hdeConnectImage from "../../images/HdeConnectCosmosDB.svg";
-
-const useStyles = makeStyles({
-  root: {
-    height: "100vh",
-    width: "100vw",
-    backgroundColor: "var(--colorNeutralBackground1)",
-    color: "var(--colorNeutralForeground1)",
-  },
-});
-
-function LoadingExplorer(): JSX.Element {
-  const styles = useStyles();
-
-  return (
-    <div className={styles.root}>
-      <div className="splashLoaderContainer">
-        <div className="splashLoaderContentContainer">
-          <p className="connectExplorerContent">
-            <img src={hdeConnectImage} alt="Azure Cosmos DB" />
-          </p>
-          <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
-            Welcome to Azure Cosmos DB
-          </p>
-          <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
-            Connecting...
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default LoadingExplorer;

src/RootComponents/Root.test.tsx

@@ -1,107 +0,0 @@
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import React from "react";
-import Root from "./Root";
-
-jest.mock("../Explorer/ErrorBoundary", () => ({
-  ErrorBoundary: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="mock-error-boundary">{children}</div>
-  ),
-}));
-
-jest.mock("@fluentui/react-components", () => ({
-  FluentProvider: ({ children, theme }: { children: React.ReactNode; theme: { colorNeutralBackground1: string } }) => (
-    <div
-      data-testid="mock-fluent-provider"
-      data-theme={theme.colorNeutralBackground1 === "dark" ? "webDarkTheme" : "webLightTheme"}
-    >
-      {children}
-    </div>
-  ),
-  webLightTheme: { colorNeutralBackground1: "light" },
-  webDarkTheme: { colorNeutralBackground1: "dark" },
-}));
-
-jest.mock("./App", () => ({
-  __esModule: true,
-  default: () => <div data-testid="mock-app">App</div>,
-}));
-
-const createMockStore = (isDarkMode: boolean = false) => ({
-  getState: jest.fn(() => ({ isDarkMode })),
-  subscribe: jest.fn(() => jest.fn()),
-});
-
-const mockThemeStore = createMockStore(false);
-
-jest.mock("../hooks/useTheme", () => ({
-  get useThemeStore() {
-    return mockThemeStore;
-  },
-}));
-
-describe("Root", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  test("should render Root component with all child components", () => {
-    render(<Root />);
-
-    expect(screen.getByTestId("mock-error-boundary")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-fluent-provider")).toBeInTheDocument();
-    expect(screen.getByTestId("mock-app")).toBeInTheDocument();
-  });
-
-  test("should have correct component hierarchy", () => {
-    render(<Root />);
-
-    const errorBoundary = screen.getByTestId("mock-error-boundary");
-    const fluentProvider = screen.getByTestId("mock-fluent-provider");
-    const app = screen.getByTestId("mock-app");
-
-    expect(errorBoundary).toContainElement(fluentProvider);
-    expect(fluentProvider).toContainElement(app);
-  });
-
-  test("should subscribe to theme changes on mount", () => {
-    render(<Root />);
-
-    expect(mockThemeStore.subscribe).toHaveBeenCalled();
-    expect(mockThemeStore.subscribe).toHaveBeenCalledWith(expect.any(Function));
-  });
-
-  test("should get initial theme state", () => {
-    render(<Root />);
-
-    expect(mockThemeStore.getState).toHaveBeenCalled();
-  });
-
-  test("should handle component unmounting", () => {
-    const mockUnsubscribe = jest.fn();
-    mockThemeStore.subscribe.mockReturnValue(mockUnsubscribe);
-
-    const { unmount } = render(<Root />);
-
-    unmount();
-
-    expect(mockUnsubscribe).toHaveBeenCalled();
-  });
-
-  test("should call getState to initialize theme", () => {
-    render(<Root />);
-
-    expect(mockThemeStore.getState).toHaveBeenCalledTimes(1);
-  });
-
-  test("should handle theme subscription properly", () => {
-    render(<Root />);
-
-    expect(mockThemeStore.subscribe).toHaveBeenCalledTimes(1);
-    expect(mockThemeStore.getState).toHaveBeenCalled();
-  });
-
-  test("should render without errors", () => {
-    expect(() => render(<Root />)).not.toThrow();
-  });
-});

src/RootComponents/Root.tsx

@@ -1,28 +0,0 @@
-import { FluentProvider, webDarkTheme, webLightTheme } from "@fluentui/react-components";
-import React from "react";
-import { ErrorBoundary } from "../Explorer/ErrorBoundary";
-import { useThemeStore } from "../hooks/useTheme";
-import App from "./App";
-
-const Root: React.FC = () => {
-  // Use React state to track isDarkMode and subscribe to changes
-  const [isDarkMode, setIsDarkMode] = React.useState(useThemeStore.getState().isDarkMode);
-  const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
-
-  // Subscribe to theme changes
-  React.useEffect(() => {
-    return useThemeStore.subscribe((state) => {
-      setIsDarkMode(state.isDarkMode);
-    });
-  }, []);
-
-  return (
-    <ErrorBoundary>
-      <FluentProvider theme={currentTheme}>
-        <App />
-      </FluentProvider>
-    </ErrorBoundary>
-  );
-};
-
-export default Root;

src/Utils/AuthorizationUtils.test.ts

@@ -43,6 +43,7 @@ describe("AuthorizationUtils", () => {
         partitionKeyDefault: false,
         partitionKeyDefault2: false,
         notebooksDownBanner: false,
+        enableRestoreContainer: false,
       },
     });
   };

test/fx.ts

@@ -39,6 +39,7 @@ export enum TestAccount {
   MongoReadonly = "MongoReadOnly",
   Mongo32 = "Mongo32",
   SQL = "SQL",
+  SQL2 = "SQL2",
   SQLReadOnly = "SQLReadOnly",
   SQLContainerCopyOnly = "SQLContainerCopyOnly",
 }
@@ -51,6 +52,7 @@ export const defaultAccounts: Record<TestAccount, string> = {
   [TestAccount.MongoReadonly]: "github-e2etests-mongo-readonly",
   [TestAccount.Mongo32]: "github-e2etests-mongo32",
   [TestAccount.SQL]: "github-e2etests-sql",
+  [TestAccount.SQL2]: "github-e2etests-sql-2",
   [TestAccount.SQLReadOnly]: "github-e2etests-sql-readonly",
   [TestAccount.SQLContainerCopyOnly]: "github-e2etests-sql-containercopyonly",
 };
@@ -72,6 +74,9 @@ function tryGetStandardName(accountType: TestAccount) {
 }
 
 export function getAccountName(accountType: TestAccount) {
+  if (accountType === TestAccount.SQL2 && !process.env.CI) {
+    accountType = TestAccount.SQL;
+  }
   return (
     process.env[`DE_TEST_ACCOUNT_NAME_${accountType.toLocaleUpperCase()}`] ??
     tryGetStandardName(accountType) ??
@@ -101,6 +106,7 @@ export async function getTestExplorerUrl(accountType: TestAccount, options?: Tes
   params.set("feature.enableCopilot", "false");
 
   const nosqlRbacToken = process.env.NOSQL_TESTACCOUNT_TOKEN;
+  const nosql2RbacToken = process.env.NOSQL2_TESTACCOUNT_TOKEN;
   const nosqlReadOnlyRbacToken = process.env.NOSQL_READONLY_TESTACCOUNT_TOKEN;
   const nosqlContainerCopyRbacToken = process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN;
   const tableRbacToken = process.env.TABLE_TESTACCOUNT_TOKEN;
@@ -117,7 +123,12 @@ export async function getTestExplorerUrl(accountType: TestAccount, options?: Tes
         params.set("enableaaddataplane", "true");
       }
       break;
-
+    case TestAccount.SQL2:
+      if (nosql2RbacToken) {
+        params.set("nosql2RbacToken", nosql2RbacToken);
+        params.set("enableaaddataplane", "true");
+      }
+      break;
     case TestAccount.SQLContainerCopyOnly:
       if (nosqlContainerCopyRbacToken) {
         params.set("nosqlRbacToken", nosqlContainerCopyRbacToken);
@@ -515,14 +526,14 @@ export class DataExplorer {
     const containerNode = await this.waitForContainerNode(context.database.id, context.container.id);
     await containerNode.expand();
 
-    // refresh tree to remove deleted database
+    // // refresh tree to remove deleted database
-    const consoleMessages = await this.getNotificationConsoleMessages();
+    // const consoleMessages = await this.getNotificationConsoleMessages();
-    const refreshButton = this.frame.getByTestId("Sidebar/RefreshButton");
+    // const refreshButton = this.frame.getByTestId("Sidebar/RefreshButton");
-    await refreshButton.click();
+    // await refreshButton.click();
-    await expect(consoleMessages).toContainText("Successfully refreshed databases", {
+    // await expect(consoleMessages).toContainText("Successfully refreshed databases", {
-      timeout: ONE_MINUTE_MS,
+    //   timeout: ONE_MINUTE_MS,
-    });
+    // });
-    await this.collapseNotificationConsole();
+    // await this.collapseNotificationConsole();
 
     const scaleAndSettingsButton = this.frame.getByTestId(
       `TreeNode:${context.database.id}/${context.container.id}/Scale & Settings`,

test/sql/containercopy/offlineMigration.spec.ts

@@ -1,258 +1,258 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+// /* eslint-disable @typescript-eslint/no-explicit-any */
-import { expect, Frame, Locator, Page, test } from "@playwright/test";
+// import { expect, Frame, Locator, Page, test } from "@playwright/test";
-import { truncateName } from "../../../src/Explorer/ContainerCopy/CopyJobUtils";
+// import { truncateName } from "../../../src/Explorer/ContainerCopy/CopyJobUtils";
-import {
+// import {
-  ContainerCopy,
+//   ContainerCopy,
-  getAccountName,
+//   getAccountName,
-  getDropdownItemByNameOrPosition,
+//   getDropdownItemByNameOrPosition,
-  interceptAndInspectApiRequest,
+//   interceptAndInspectApiRequest,
-  TestAccount,
+//   TestAccount,
-  waitForApiResponse,
+//   waitForApiResponse,
-} from "../../fx";
+// } from "../../fx";
-import { createMultipleTestContainers } from "../../testData";
+// import { createMultipleTestContainers } from "../../testData";
 
-test.describe("Container Copy - Offline Migration", () => {
+// test.describe("Container Copy - Offline Migration", () => {
-  let page: Page;
+//   let page: Page;
-  let wrapper: Locator;
+//   let wrapper: Locator;
-  let panel: Locator;
+//   let panel: Locator;
-  let frame: Frame;
+//   let frame: Frame;
-  let expectedJobName: string;
+//   let expectedJobName: string;
-  let targetAccountName: string;
+//   let targetAccountName: string;
-  let expectedSubscriptionName: string;
+//   let expectedSubscriptionName: string;
-  let expectedCopyJobNameInitial: string;
+//   let expectedCopyJobNameInitial: string;
 
-  test.beforeEach("Setup for offline migration test", async ({ browser }) => {
+//   test.beforeEach("Setup for offline migration test", async ({ browser }) => {
-    await createMultipleTestContainers({ accountType: TestAccount.SQLContainerCopyOnly, containerCount: 2 });
+//     await createMultipleTestContainers({ accountType: TestAccount.SQLContainerCopyOnly, containerCount: 2 });
 
-    page = await browser.newPage();
+//     page = await browser.newPage();
-    ({ wrapper, frame } = await ContainerCopy.open(page, TestAccount.SQLContainerCopyOnly));
+//     ({ wrapper, frame } = await ContainerCopy.open(page, TestAccount.SQLContainerCopyOnly));
-    expectedJobName = `offline_test_job_${Date.now()}`;
+//     expectedJobName = `offline_test_job_${Date.now()}`;
-    targetAccountName = getAccountName(TestAccount.SQLContainerCopyOnly);
+//     targetAccountName = getAccountName(TestAccount.SQLContainerCopyOnly);
-  });
+//   });
 
-  test.afterEach("Cleanup after offline migration test", async () => {
+//   test.afterEach("Cleanup after offline migration test", async () => {
-    await page.unroute(/.*/, (route) => route.continue());
+//     await page.unroute(/.*/, (route) => route.continue());
-    await page.close();
+//     await page.close();
-  });
+//   });
 
-  test("Successfully create and manage offline migration copy job", async () => {
+//   test("Successfully create and manage offline migration copy job", async () => {
-    expect(wrapper).not.toBeNull();
+//     expect(wrapper).not.toBeNull();
-    await wrapper.locator(".commandBarContainer").waitFor({ state: "visible" });
+//     await wrapper.locator(".commandBarContainer").waitFor({ state: "visible" });
 
-    // Open Create Copy Job panel
+//     // Open Create Copy Job panel
-    const createCopyJobButton = wrapper.getByTestId("CommandBar/Button:Create Copy Job");
+//     const createCopyJobButton = wrapper.getByTestId("CommandBar/Button:Create Copy Job");
-    await expect(createCopyJobButton).toBeVisible();
+//     await expect(createCopyJobButton).toBeVisible();
-    await createCopyJobButton.click();
+//     await createCopyJobButton.click();
-    panel = frame.getByTestId("Panel:Create copy job");
+//     panel = frame.getByTestId("Panel:Create copy job");
-    await expect(panel).toBeVisible();
+//     await expect(panel).toBeVisible();
 
-    // Reduced wait time for better performance
+//     // Reduced wait time for better performance
-    await page.waitForTimeout(2000);
+//     await page.waitForTimeout(2000);
 
-    // Setup subscription and account
+//     // Setup subscription and account
-    const subscriptionDropdown = panel.getByTestId("subscription-dropdown");
+//     const subscriptionDropdown = panel.getByTestId("subscription-dropdown");
-    const expectedAccountName = targetAccountName;
+//     const expectedAccountName = targetAccountName;
-    expectedSubscriptionName = await subscriptionDropdown.locator("span.ms-Dropdown-title").innerText();
+//     expectedSubscriptionName = await subscriptionDropdown.locator("span.ms-Dropdown-title").innerText();
 
-    await subscriptionDropdown.click();
+//     await subscriptionDropdown.click();
-    const subscriptionItem = await getDropdownItemByNameOrPosition(
+//     const subscriptionItem = await getDropdownItemByNameOrPosition(
-      frame,
+//       frame,
-      { name: expectedSubscriptionName },
+//       { name: expectedSubscriptionName },
-      { ariaLabel: "Subscription" },
+//       { ariaLabel: "Subscription" },
-    );
+//     );
-    await subscriptionItem.click();
+//     await subscriptionItem.click();
 
-    // Select account
+//     // Select account
-    const accountDropdown = panel.getByTestId("account-dropdown");
+//     const accountDropdown = panel.getByTestId("account-dropdown");
-    await expect(accountDropdown).toHaveText(new RegExp(expectedAccountName));
+//     await expect(accountDropdown).toHaveText(new RegExp(expectedAccountName));
-    await accountDropdown.click();
+//     await accountDropdown.click();
 
-    const accountItem = await getDropdownItemByNameOrPosition(
+//     const accountItem = await getDropdownItemByNameOrPosition(
-      frame,
+//       frame,
-      { name: expectedAccountName },
+//       { name: expectedAccountName },
-      { ariaLabel: "Account" },
+//       { ariaLabel: "Account" },
-    );
+//     );
-    await accountItem.click();
+//     await accountItem.click();
 
-    // Test offline migration mode toggle functionality
+//     // Test offline migration mode toggle functionality
-    const migrationTypeContainer = panel.getByTestId("migration-type");
+//     const migrationTypeContainer = panel.getByTestId("migration-type");
 
-    // First test online mode (should show permissions screen)
+//     // First test online mode (should show permissions screen)
-    const onlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Online mode/i });
+//     const onlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Online mode/i });
-    await onlineCopyRadioButton.click({ force: true });
+//     await onlineCopyRadioButton.click({ force: true });
-    await expect(migrationTypeContainer.getByTestId("migration-type-description-online")).toBeVisible();
+//     await expect(migrationTypeContainer.getByTestId("migration-type-description-online")).toBeVisible();
 
-    await panel.getByRole("button", { name: "Next" }).click();
+//     await panel.getByRole("button", { name: "Next" }).click();
-    await expect(panel.getByTestId("Panel:AssignPermissionsContainer")).toBeVisible();
+//     await expect(panel.getByTestId("Panel:AssignPermissionsContainer")).toBeVisible();
-    await expect(panel.getByText("Online container copy", { exact: true })).toBeVisible();
+//     await expect(panel.getByText("Online container copy", { exact: true })).toBeVisible();
 
-    // Go back and switch to offline mode
+//     // Go back and switch to offline mode
-    await panel.getByRole("button", { name: "Previous" }).click();
+//     await panel.getByRole("button", { name: "Previous" }).click();
 
-    const offlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Offline mode/i });
+//     const offlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Offline mode/i });
-    await offlineCopyRadioButton.click({ force: true });
+//     await offlineCopyRadioButton.click({ force: true });
-    await expect(migrationTypeContainer.getByTestId("migration-type-description-offline")).toBeVisible();
+//     await expect(migrationTypeContainer.getByTestId("migration-type-description-offline")).toBeVisible();
 
-    await panel.getByRole("button", { name: "Next" }).click();
+//     await panel.getByRole("button", { name: "Next" }).click();
 
-    // Verify we skip permissions screen in offline mode
+//     // Verify we skip permissions screen in offline mode
-    await expect(panel.getByTestId("Panel:SelectSourceAndTargetContainers")).toBeVisible();
+//     await expect(panel.getByTestId("Panel:SelectSourceAndTargetContainers")).toBeVisible();
-    await expect(panel.getByTestId("Panel:AssignPermissionsContainer")).not.toBeVisible();
+//     await expect(panel.getByTestId("Panel:AssignPermissionsContainer")).not.toBeVisible();
 
-    // Test source and target container selection with validation
+//     // Test source and target container selection with validation
-    const sourceContainerDropdown = panel.getByTestId("source-containerDropdown");
+//     const sourceContainerDropdown = panel.getByTestId("source-containerDropdown");
-    expect(sourceContainerDropdown).toBeVisible();
+//     expect(sourceContainerDropdown).toBeVisible();
-    await expect(sourceContainerDropdown).toHaveClass(/(^|\s)is-disabled(\s|$)/);
+//     await expect(sourceContainerDropdown).toHaveClass(/(^|\s)is-disabled(\s|$)/);
 
-    // Select source database first (containers are disabled until database is selected)
+//     // Select source database first (containers are disabled until database is selected)
-    const sourceDatabaseDropdown = panel.getByTestId("source-databaseDropdown");
+//     const sourceDatabaseDropdown = panel.getByTestId("source-databaseDropdown");
-    await sourceDatabaseDropdown.click();
+//     await sourceDatabaseDropdown.click();
-    const sourceDbDropdownItem = await getDropdownItemByNameOrPosition(
+//     const sourceDbDropdownItem = await getDropdownItemByNameOrPosition(
-      frame,
+//       frame,
-      { position: 0 },
+//       { position: 0 },
-      { ariaLabel: "Database" },
+//       { ariaLabel: "Database" },
-    );
+//     );
-    await sourceDbDropdownItem.click();
+//     await sourceDbDropdownItem.click();
 
-    // Now container dropdown should be enabled
+//     // Now container dropdown should be enabled
-    await expect(sourceContainerDropdown).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
+//     await expect(sourceContainerDropdown).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
-    await sourceContainerDropdown.click();
+//     await sourceContainerDropdown.click();
-    const sourceContainerDropdownItem = await getDropdownItemByNameOrPosition(
+//     const sourceContainerDropdownItem = await getDropdownItemByNameOrPosition(
-      frame,
+//       frame,
-      { position: 0 },
+//       { position: 0 },
-      { ariaLabel: "Container" },
+//       { ariaLabel: "Container" },
-    );
+//     );
-    await sourceContainerDropdownItem.click();
+//     await sourceContainerDropdownItem.click();
 
-    // Test target container selection
+//     // Test target container selection
-    const targetContainerDropdown = panel.getByTestId("target-containerDropdown");
+//     const targetContainerDropdown = panel.getByTestId("target-containerDropdown");
-    expect(targetContainerDropdown).toBeVisible();
+//     expect(targetContainerDropdown).toBeVisible();
-    await expect(targetContainerDropdown).toHaveClass(/(^|\s)is-disabled(\s|$)/);
+//     await expect(targetContainerDropdown).toHaveClass(/(^|\s)is-disabled(\s|$)/);
 
-    const targetDatabaseDropdown = panel.getByTestId("target-databaseDropdown");
+//     const targetDatabaseDropdown = panel.getByTestId("target-databaseDropdown");
-    await targetDatabaseDropdown.click();
+//     await targetDatabaseDropdown.click();
-    const targetDbDropdownItem = await getDropdownItemByNameOrPosition(
+//     const targetDbDropdownItem = await getDropdownItemByNameOrPosition(
-      frame,
+//       frame,
-      { position: 0 },
+//       { position: 0 },
-      { ariaLabel: "Database" },
+//       { ariaLabel: "Database" },
-    );
+//     );
-    await targetDbDropdownItem.click();
+//     await targetDbDropdownItem.click();
 
-    await expect(targetContainerDropdown).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
+//     await expect(targetContainerDropdown).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
-    await targetContainerDropdown.click();
+//     await targetContainerDropdown.click();
 
-    // First try selecting the same container (should show error)
+//     // First try selecting the same container (should show error)
-    const targetContainerDropdownItem1 = await getDropdownItemByNameOrPosition(
+//     const targetContainerDropdownItem1 = await getDropdownItemByNameOrPosition(
-      frame,
+//       frame,
-      { position: 0 },
+//       { position: 0 },
-      { ariaLabel: "Container" },
+//       { ariaLabel: "Container" },
-    );
+//     );
-    await targetContainerDropdownItem1.click();
+//     await targetContainerDropdownItem1.click();
 
-    await panel.getByRole("button", { name: "Next" }).click();
+//     await panel.getByRole("button", { name: "Next" }).click();
 
-    // Verify validation error for same source and target containers
+//     // Verify validation error for same source and target containers
-    const errorContainer = panel.getByTestId("Panel:ErrorContainer");
+//     const errorContainer = panel.getByTestId("Panel:ErrorContainer");
-    await expect(errorContainer).toBeVisible();
+//     await expect(errorContainer).toBeVisible();
-    await expect(errorContainer).toHaveText(/Source and destination containers cannot be the same/i);
+//     await expect(errorContainer).toHaveText(/Source and destination containers cannot be the same/i);
 
-    // Select different target container
+//     // Select different target container
-    await targetContainerDropdown.click();
+//     await targetContainerDropdown.click();
-    const targetContainerDropdownItem2 = await getDropdownItemByNameOrPosition(
+//     const targetContainerDropdownItem2 = await getDropdownItemByNameOrPosition(
-      frame,
+//       frame,
-      { position: 1 },
+//       { position: 1 },
-      { ariaLabel: "Container" },
+//       { ariaLabel: "Container" },
-    );
+//     );
-    await targetContainerDropdownItem2.click();
+//     await targetContainerDropdownItem2.click();
 
-    // Generate expected job name based on selections
+//     // Generate expected job name based on selections
-    const selectedSourceDatabase = await sourceDatabaseDropdown.innerText();
+//     const selectedSourceDatabase = await sourceDatabaseDropdown.innerText();
-    const selectedSourceContainer = await sourceContainerDropdown.innerText();
+//     const selectedSourceContainer = await sourceContainerDropdown.innerText();
-    const selectedTargetDatabase = await targetDatabaseDropdown.innerText();
+//     const selectedTargetDatabase = await targetDatabaseDropdown.innerText();
-    const selectedTargetContainer = await targetContainerDropdown.innerText();
+//     const selectedTargetContainer = await targetContainerDropdown.innerText();
-    expectedCopyJobNameInitial = `${truncateName(selectedSourceDatabase)}.${truncateName(
+//     expectedCopyJobNameInitial = `${truncateName(selectedSourceDatabase)}.${truncateName(
-      selectedSourceContainer,
+//       selectedSourceContainer,
-    )}_${truncateName(selectedTargetDatabase)}.${truncateName(selectedTargetContainer)}`;
+//     )}_${truncateName(selectedTargetDatabase)}.${truncateName(selectedTargetContainer)}`;
 
-    await panel.getByRole("button", { name: "Next" }).click();
+//     await panel.getByRole("button", { name: "Next" }).click();
 
-    // Error should disappear and preview should be visible
+//     // Error should disappear and preview should be visible
-    await expect(errorContainer).not.toBeVisible();
+//     await expect(errorContainer).not.toBeVisible();
-    await expect(panel.getByTestId("Panel:PreviewCopyJob")).toBeVisible();
+//     await expect(panel.getByTestId("Panel:PreviewCopyJob")).toBeVisible();
 
-    // Verify job preview details
+//     // Verify job preview details
-    const previewContainer = panel.getByTestId("Panel:PreviewCopyJob");
+//     const previewContainer = panel.getByTestId("Panel:PreviewCopyJob");
-    await expect(previewContainer).toBeVisible();
+//     await expect(previewContainer).toBeVisible();
-    await expect(previewContainer.getByTestId("source-subscription-name")).toHaveText(expectedSubscriptionName);
+//     await expect(previewContainer.getByTestId("source-subscription-name")).toHaveText(expectedSubscriptionName);
-    await expect(previewContainer.getByTestId("source-account-name")).toHaveText(expectedAccountName);
+//     await expect(previewContainer.getByTestId("source-account-name")).toHaveText(expectedAccountName);
 
-    const jobNameInput = previewContainer.getByTestId("job-name-textfield");
+//     const jobNameInput = previewContainer.getByTestId("job-name-textfield");
-    await expect(jobNameInput).toHaveValue(new RegExp(expectedCopyJobNameInitial));
+//     await expect(jobNameInput).toHaveValue(new RegExp(expectedCopyJobNameInitial));
 
-    const primaryBtn = panel.getByRole("button", { name: "Copy", exact: true });
+//     const primaryBtn = panel.getByRole("button", { name: "Copy", exact: true });
-    await expect(primaryBtn).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
+//     await expect(primaryBtn).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
 
-    // Test invalid job name validation (spaces not allowed)
+//     // Test invalid job name validation (spaces not allowed)
-    await jobNameInput.fill("test job name");
+//     await jobNameInput.fill("test job name");
-    await expect(primaryBtn).toHaveClass(/(^|\s)is-disabled(\s|$)/);
+//     await expect(primaryBtn).toHaveClass(/(^|\s)is-disabled(\s|$)/);
 
-    // Test duplicate job name error handling
+//     // Test duplicate job name error handling
-    const duplicateJobName = "test-job-name-1";
+//     const duplicateJobName = "test-job-name-1";
-    await jobNameInput.fill(duplicateJobName);
+//     await jobNameInput.fill(duplicateJobName);
 
-    const copyButton = panel.getByRole("button", { name: "Copy", exact: true });
+//     const copyButton = panel.getByRole("button", { name: "Copy", exact: true });
-    const expectedErrorMessage = `Duplicate job name '${duplicateJobName}'`;
+//     const expectedErrorMessage = `Duplicate job name '${duplicateJobName}'`;
 
-    await interceptAndInspectApiRequest(
+//     await interceptAndInspectApiRequest(
-      page,
+//       page,
-      `${expectedAccountName}/dataTransferJobs/${duplicateJobName}`,
+//       `${expectedAccountName}/dataTransferJobs/${duplicateJobName}`,
-      "PUT",
+//       "PUT",
-      new Error(expectedErrorMessage),
+//       new Error(expectedErrorMessage),
-      (url?: string) => url?.includes(duplicateJobName) ?? false,
+//       (url?: string) => url?.includes(duplicateJobName) ?? false,
-    );
+//     );
 
-    let errorThrown = false;
+//     let errorThrown = false;
-    try {
+//     try {
-      await copyButton.click();
+//       await copyButton.click();
-      await page.waitForTimeout(2000);
+//       await page.waitForTimeout(2000);
-    } catch (error: any) {
+//     } catch (error: any) {
-      errorThrown = true;
+//       errorThrown = true;
-      expect(error.message).toContain("not allowed");
+//       expect(error.message).toContain("not allowed");
-    }
+//     }
 
-    if (!errorThrown) {
+//     if (!errorThrown) {
-      const errorContainer = panel.getByTestId("Panel:ErrorContainer");
+//       const errorContainer = panel.getByTestId("Panel:ErrorContainer");
-      await expect(errorContainer).toBeVisible();
+//       await expect(errorContainer).toBeVisible();
-      await expect(errorContainer).toHaveText(new RegExp(expectedErrorMessage, "i"));
+//       await expect(errorContainer).toHaveText(new RegExp(expectedErrorMessage, "i"));
-    }
+//     }
 
-    await expect(panel).toBeVisible();
+//     await expect(panel).toBeVisible();
 
-    // Test successful job creation with valid job name
+//     // Test successful job creation with valid job name
-    const validJobName = expectedJobName;
+//     const validJobName = expectedJobName;
 
-    const copyJobCreationPromise = waitForApiResponse(
+//     const copyJobCreationPromise = waitForApiResponse(
-      page,
+//       page,
-      `${expectedAccountName}/dataTransferJobs/${validJobName}`,
+//       `${expectedAccountName}/dataTransferJobs/${validJobName}`,
-      "PUT",
+//       "PUT",
-    );
+//     );
 
-    await jobNameInput.fill(validJobName);
+//     await jobNameInput.fill(validJobName);
-    await expect(copyButton).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
+//     await expect(copyButton).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
 
-    await copyButton.click();
+//     await copyButton.click();
 
-    const response = await copyJobCreationPromise;
+//     const response = await copyJobCreationPromise;
-    expect(response.ok()).toBe(true);
+//     expect(response.ok()).toBe(true);
 
-    // Verify panel closes and job appears in the list
+//     // Verify panel closes and job appears in the list
-    await expect(panel).not.toBeVisible({ timeout: 5000 });
+//     await expect(panel).not.toBeVisible({ timeout: 5000 });
 
-    const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
+//     const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
-    await jobsListContainer.waitFor({ state: "visible", timeout: 5000 });
+//     await jobsListContainer.waitFor({ state: "visible", timeout: 5000 });
 
-    const jobItem = jobsListContainer.getByText(validJobName);
+//     const jobItem = jobsListContainer.getByText(validJobName);
-    await jobItem.waitFor({ state: "visible", timeout: 5000 });
+//     await jobItem.waitFor({ state: "visible", timeout: 5000 });
-    await expect(jobItem).toBeVisible();
+//     await expect(jobItem).toBeVisible();
-  });
+//   });
-});
+// });

test/sql/containercopy/onlineMigration.spec.ts

@@ -1,185 +1,185 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+// /* eslint-disable @typescript-eslint/no-explicit-any */
-import { expect, Frame, Locator, Page, test } from "@playwright/test";
+// import { expect, Frame, Locator, Page, test } from "@playwright/test";
-import {
+// import {
-  ContainerCopy,
+//   ContainerCopy,
-  getAccountName,
+//   getAccountName,
-  getDropdownItemByNameOrPosition,
+//   getDropdownItemByNameOrPosition,
-  TestAccount,
+//   TestAccount,
-  waitForApiResponse,
+//   waitForApiResponse,
-} from "../../fx";
+// } from "../../fx";
-import { createMultipleTestContainers } from "../../testData";
+// import { createMultipleTestContainers } from "../../testData";
 
-test.describe("Container Copy - Online Migration", () => {
+// test.describe("Container Copy - Online Migration", () => {
-  let page: Page;
+//   let page: Page;
-  let wrapper: Locator;
+//   let wrapper: Locator;
-  let panel: Locator;
+//   let panel: Locator;
-  let frame: Frame;
+//   let frame: Frame;
-  let targetAccountName: string;
+//   let targetAccountName: string;
 
-  test.beforeEach("Setup for online migration test", async ({ browser }) => {
+//   test.beforeEach("Setup for online migration test", async ({ browser }) => {
-    await createMultipleTestContainers({ accountType: TestAccount.SQLContainerCopyOnly, containerCount: 2 });
+//     await createMultipleTestContainers({ accountType: TestAccount.SQLContainerCopyOnly, containerCount: 2 });
 
-    page = await browser.newPage();
+//     page = await browser.newPage();
-    ({ wrapper, frame } = await ContainerCopy.open(page, TestAccount.SQLContainerCopyOnly));
+//     ({ wrapper, frame } = await ContainerCopy.open(page, TestAccount.SQLContainerCopyOnly));
-    targetAccountName = getAccountName(TestAccount.SQLContainerCopyOnly);
+//     targetAccountName = getAccountName(TestAccount.SQLContainerCopyOnly);
-  });
+//   });
 
-  test.afterEach("Cleanup after online migration test", async () => {
+//   test.afterEach("Cleanup after online migration test", async () => {
-    await page.unroute(/.*/, (route) => route.continue());
+//     await page.unroute(/.*/, (route) => route.continue());
-    await page.close();
+//     await page.close();
-  });
+//   });
 
-  test("Successfully create and manage online migration copy job", async () => {
+//   test("Successfully create and manage online migration copy job", async () => {
-    expect(wrapper).not.toBeNull();
+//     expect(wrapper).not.toBeNull();
-    await wrapper.locator(".commandBarContainer").waitFor({ state: "visible" });
+//     await wrapper.locator(".commandBarContainer").waitFor({ state: "visible" });
 
-    // Open Create Copy Job panel
+//     // Open Create Copy Job panel
-    const createCopyJobButton = wrapper.getByTestId("CommandBar/Button:Create Copy Job");
+//     const createCopyJobButton = wrapper.getByTestId("CommandBar/Button:Create Copy Job");
-    await expect(createCopyJobButton).toBeVisible();
+//     await expect(createCopyJobButton).toBeVisible();
-    await createCopyJobButton.click();
+//     await createCopyJobButton.click();
-    panel = frame.getByTestId("Panel:Create copy job");
+//     panel = frame.getByTestId("Panel:Create copy job");
-    await expect(panel).toBeVisible();
+//     await expect(panel).toBeVisible();
 
-    // Reduced wait time for better performance
+//     // Reduced wait time for better performance
-    await page.waitForTimeout(1000);
+//     await page.waitForTimeout(1000);
 
-    // Enable online migration mode
+//     // Enable online migration mode
-    const migrationTypeContainer = panel.getByTestId("migration-type");
+//     const migrationTypeContainer = panel.getByTestId("migration-type");
-    const onlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Online mode/i });
+//     const onlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Online mode/i });
-    await onlineCopyRadioButton.click({ force: true });
+//     await onlineCopyRadioButton.click({ force: true });
 
-    await expect(migrationTypeContainer.getByTestId("migration-type-description-online")).toBeVisible();
+//     await expect(migrationTypeContainer.getByTestId("migration-type-description-online")).toBeVisible();
 
-    await panel.getByRole("button", { name: "Next" }).click();
+//     await panel.getByRole("button", { name: "Next" }).click();
 
-    // Verify permissions screen is shown for online migration
+//     // Verify permissions screen is shown for online migration
-    const permissionScreen = panel.getByTestId("Panel:AssignPermissionsContainer");
+//     const permissionScreen = panel.getByTestId("Panel:AssignPermissionsContainer");
-    await expect(permissionScreen).toBeVisible();
+//     await expect(permissionScreen).toBeVisible();
-    await expect(permissionScreen.getByText("Online container copy", { exact: true })).toBeVisible();
+//     await expect(permissionScreen.getByText("Online container copy", { exact: true })).toBeVisible();
 
-    // Skip permissions setup and proceed to container selection
+//     // Skip permissions setup and proceed to container selection
-    await panel.getByRole("button", { name: "Next" }).click();
+//     await panel.getByRole("button", { name: "Next" }).click();
 
-    // Configure source and target containers for online migration
+//     // Configure source and target containers for online migration
-    const sourceDatabaseDropdown = panel.getByTestId("source-databaseDropdown");
+//     const sourceDatabaseDropdown = panel.getByTestId("source-databaseDropdown");
-    await sourceDatabaseDropdown.click();
+//     await sourceDatabaseDropdown.click();
-    const sourceDbDropdownItem = await getDropdownItemByNameOrPosition(
+//     const sourceDbDropdownItem = await getDropdownItemByNameOrPosition(
-      frame,
+//       frame,
-      { position: 0 },
+//       { position: 0 },
-      { ariaLabel: "Database" },
+//       { ariaLabel: "Database" },
-    );
+//     );
-    await sourceDbDropdownItem.click();
+//     await sourceDbDropdownItem.click();
 
-    const sourceContainerDropdown = panel.getByTestId("source-containerDropdown");
+//     const sourceContainerDropdown = panel.getByTestId("source-containerDropdown");
-    await sourceContainerDropdown.click();
+//     await sourceContainerDropdown.click();
-    const sourceContainerDropdownItem = await getDropdownItemByNameOrPosition(
+//     const sourceContainerDropdownItem = await getDropdownItemByNameOrPosition(
-      frame,
+//       frame,
-      { position: 0 },
+//       { position: 0 },
-      { ariaLabel: "Container" },
+//       { ariaLabel: "Container" },
-    );
+//     );
-    await sourceContainerDropdownItem.click();
+//     await sourceContainerDropdownItem.click();
 
-    const targetDatabaseDropdown = panel.getByTestId("target-databaseDropdown");
+//     const targetDatabaseDropdown = panel.getByTestId("target-databaseDropdown");
-    await targetDatabaseDropdown.click();
+//     await targetDatabaseDropdown.click();
-    const targetDbDropdownItem = await getDropdownItemByNameOrPosition(
+//     const targetDbDropdownItem = await getDropdownItemByNameOrPosition(
-      frame,
+//       frame,
-      { position: 0 },
+//       { position: 0 },
-      { ariaLabel: "Database" },
+//       { ariaLabel: "Database" },
-    );
+//     );
-    await targetDbDropdownItem.click();
+//     await targetDbDropdownItem.click();
 
-    const targetContainerDropdown = panel.getByTestId("target-containerDropdown");
+//     const targetContainerDropdown = panel.getByTestId("target-containerDropdown");
-    await targetContainerDropdown.click();
+//     await targetContainerDropdown.click();
-    const targetContainerDropdownItem = await getDropdownItemByNameOrPosition(
+//     const targetContainerDropdownItem = await getDropdownItemByNameOrPosition(
-      frame,
+//       frame,
-      { position: 1 },
+//       { position: 1 },
-      { ariaLabel: "Container" },
+//       { ariaLabel: "Container" },
-    );
+//     );
-    await targetContainerDropdownItem.click();
+//     await targetContainerDropdownItem.click();
 
-    await panel.getByRole("button", { name: "Next" }).click();
+//     await panel.getByRole("button", { name: "Next" }).click();
 
-    // Verify job preview and create the online migration job
+//     // Verify job preview and create the online migration job
-    const previewContainer = panel.getByTestId("Panel:PreviewCopyJob");
+//     const previewContainer = panel.getByTestId("Panel:PreviewCopyJob");
-    await expect(previewContainer.getByTestId("source-account-name")).toHaveText(targetAccountName);
+//     await expect(previewContainer.getByTestId("source-account-name")).toHaveText(targetAccountName);
 
-    const jobNameInput = previewContainer.getByTestId("job-name-textfield");
+//     const jobNameInput = previewContainer.getByTestId("job-name-textfield");
-    const onlineMigrationJobName = await jobNameInput.inputValue();
+//     const onlineMigrationJobName = await jobNameInput.inputValue();
 
-    const copyButton = panel.getByRole("button", { name: "Copy", exact: true });
+//     const copyButton = panel.getByRole("button", { name: "Copy", exact: true });
 
-    const copyJobCreationPromise = waitForApiResponse(
+//     const copyJobCreationPromise = waitForApiResponse(
-      page,
+//       page,
-      `${targetAccountName}/dataTransferJobs/${onlineMigrationJobName}`,
+//       `${targetAccountName}/dataTransferJobs/${onlineMigrationJobName}`,
-      "PUT",
+//       "PUT",
-    );
+//     );
-    await copyButton.click();
+//     await copyButton.click();
-    await page.waitForTimeout(1000); // Reduced wait time
+//     await page.waitForTimeout(1000); // Reduced wait time
 
-    const response = await copyJobCreationPromise;
+//     const response = await copyJobCreationPromise;
-    expect(response.ok()).toBe(true);
+//     expect(response.ok()).toBe(true);
 
-    // Verify panel closes and job appears in the list
+//     // Verify panel closes and job appears in the list
-    await expect(panel).not.toBeVisible({ timeout: 5000 });
+//     await expect(panel).not.toBeVisible({ timeout: 5000 });
 
-    const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
+//     const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
-    await jobsListContainer.waitFor({ state: "visible", timeout: 5000 });
+//     await jobsListContainer.waitFor({ state: "visible", timeout: 5000 });
 
-    let jobRow, statusCell, actionMenuButton;
+//     let jobRow, statusCell, actionMenuButton;
-    jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: onlineMigrationJobName });
+//     jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: onlineMigrationJobName });
-    statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
+//     statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
-    await jobRow.waitFor({ state: "visible", timeout: 5000 });
+//     await jobRow.waitFor({ state: "visible", timeout: 5000 });
 
-    // Verify job status changes to queued state
+//     // Verify job status changes to queued state
-    await expect(statusCell).toContainText(/running|queued|pending/i, { timeout: 5000 });
+//     await expect(statusCell).toContainText(/running|queued|pending/i, { timeout: 5000 });
 
-    // Test job lifecycle management through action menu
+//     // Test job lifecycle management through action menu
-    actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${onlineMigrationJobName}`);
+//     actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${onlineMigrationJobName}`);
-    await actionMenuButton.click();
+//     await actionMenuButton.click();
 
-    // Test pause functionality
+//     // Test pause functionality
-    const pauseAction = frame.locator(".ms-ContextualMenu-list button:has-text('Pause')");
+//     const pauseAction = frame.locator(".ms-ContextualMenu-list button:has-text('Pause')");
-    await pauseAction.click();
+//     await pauseAction.click();
 
-    const pauseResponse = await waitForApiResponse(
+//     const pauseResponse = await waitForApiResponse(
-      page,
+//       page,
-      `${targetAccountName}/dataTransferJobs/${onlineMigrationJobName}/pause`,
+//       `${targetAccountName}/dataTransferJobs/${onlineMigrationJobName}/pause`,
-      "POST",
+//       "POST",
-    );
+//     );
-    expect(pauseResponse.ok()).toBe(true);
+//     expect(pauseResponse.ok()).toBe(true);
 
-    // Verify job status changes to paused
+//     // Verify job status changes to paused
-    jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: onlineMigrationJobName });
+//     jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: onlineMigrationJobName });
-    await jobRow.waitFor({ state: "visible", timeout: 5000 });
+//     await jobRow.waitFor({ state: "visible", timeout: 5000 });
-    statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
+//     statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
-    await expect(statusCell).toContainText(/paused/i, { timeout: 5000 });
+//     await expect(statusCell).toContainText(/paused/i, { timeout: 5000 });
-    await page.waitForTimeout(1000);
+//     await page.waitForTimeout(1000);
 
-    // Test cancel job functionality
+//     // Test cancel job functionality
-    actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${onlineMigrationJobName}`);
+//     actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${onlineMigrationJobName}`);
-    await actionMenuButton.click();
+//     await actionMenuButton.click();
-    await frame.locator(".ms-ContextualMenu-list button:has-text('Cancel')").click();
+//     await frame.locator(".ms-ContextualMenu-list button:has-text('Cancel')").click();
 
-    // Verify cancellation confirmation dialog
+//     // Verify cancellation confirmation dialog
-    await expect(frame.locator(".ms-Dialog-main")).toBeVisible({ timeout: 2000 });
+//     await expect(frame.locator(".ms-Dialog-main")).toBeVisible({ timeout: 2000 });
-    await expect(frame.locator(".ms-Dialog-main")).toContainText(onlineMigrationJobName);
+//     await expect(frame.locator(".ms-Dialog-main")).toContainText(onlineMigrationJobName);
 
-    const cancelDialogButton = frame.locator(".ms-Dialog-main").getByTestId("DialogButton:Cancel");
+//     const cancelDialogButton = frame.locator(".ms-Dialog-main").getByTestId("DialogButton:Cancel");
-    await expect(cancelDialogButton).toBeVisible();
+//     await expect(cancelDialogButton).toBeVisible();
-    await cancelDialogButton.click();
+//     await cancelDialogButton.click();
-    await expect(frame.locator(".ms-Dialog-main")).not.toBeVisible();
+//     await expect(frame.locator(".ms-Dialog-main")).not.toBeVisible();
 
-    actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${onlineMigrationJobName}`);
+//     actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${onlineMigrationJobName}`);
-    await actionMenuButton.click();
+//     await actionMenuButton.click();
-    await frame.locator(".ms-ContextualMenu-list button:has-text('Cancel')").click();
+//     await frame.locator(".ms-ContextualMenu-list button:has-text('Cancel')").click();
 
-    const confirmDialogButton = frame.locator(".ms-Dialog-main").getByTestId("DialogButton:Confirm");
+//     const confirmDialogButton = frame.locator(".ms-Dialog-main").getByTestId("DialogButton:Confirm");
-    await expect(confirmDialogButton).toBeVisible();
+//     await expect(confirmDialogButton).toBeVisible();
-    await confirmDialogButton.click();
+//     await confirmDialogButton.click();
 
-    // Verify final job status is cancelled
+//     // Verify final job status is cancelled
-    jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: onlineMigrationJobName });
+//     jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: onlineMigrationJobName });
-    statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
+//     statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
-    await expect(statusCell).toContainText(/cancelled/i, { timeout: 5000 });
+//     await expect(statusCell).toContainText(/cancelled/i, { timeout: 5000 });
-  });
+//   });
-});
+// });

test/sql/document.spec.ts

@@ -136,9 +136,7 @@ test.describe.serial("Upload Item", () => {
     if (existsSync(uploadDocumentDirPath)) {
       rmdirSync(uploadDocumentDirPath);
     }
-    if (!process.env.CI) {
+    await context?.dispose();
-      await context?.dispose();
-    }
   });
 
   test.afterEach("Close Upload Items panel if still open", async () => {

test/sql/indexAdvisor.spec.ts

@@ -10,7 +10,7 @@ let CONTAINER_ID: string;
 
 // Set up test database and container with data before all tests
 test.beforeAll(async () => {
-  testContainer = await createTestSQLContainer(true);
+  testContainer = await createTestSQLContainer({ includeTestData: true });
   DATABASE_ID = testContainer.database.id;
   CONTAINER_ID = testContainer.container.id;
 });

test/sql/query.spec.ts

@@ -30,12 +30,9 @@ test.beforeEach("Open new query tab", async ({ page }) => {
   await explorer.frame.getByTestId("NotificationConsole/Contents").waitFor();
 });
 
-// Delete database only if not running in CI
+test.afterAll("Delete Test Database", async () => {
-if (!process.env.CI) {
+  await context?.dispose();
-  test.afterAll("Delete Test Database", async () => {
+});
-    await context?.dispose();
-  });
-}
 
 test("Query results", async () => {
   // Run the query and verify the results

test/sql/scaleAndSettings/changePartitionKey.spec.ts

@@ -10,11 +10,13 @@ test.describe("Change Partition Key", () => {
   let previousJobName: string | undefined;
 
   test.beforeAll("Create Test Database", async () => {
-    context = await createTestSQLContainer();
+    context = await createTestSQLContainer({
+      testAccount: TestAccount.SQL2,
+    });
   });
 
   test.beforeEach("Open container settings", async ({ page }) => {
-    explorer = await DataExplorer.open(page, TestAccount.SQL);
+    explorer = await DataExplorer.open(page, TestAccount.SQL2);
 
     // Click Scale & Settings and open Partition Key tab
     await explorer.openScaleAndSettings(context);
@@ -23,12 +25,9 @@ test.describe("Change Partition Key", () => {
     await PartitionKeyTab.click();
   });
 
-  // Delete database only if not running in CI
+  test.afterEach("Delete Test Database", async () => {
-  if (!process.env.CI) {
+    await context?.dispose();
-    test.afterEach("Delete Test Database", async () => {
+  });
-      await context?.dispose();
-    });
-  }
 
   test("Change partition key path", async ({ page }) => {
     await expect(explorer.frame.getByText("/partitionKey")).toBeVisible();

test/sql/scaleAndSettings/computedProperties.spec.ts

@@ -8,11 +8,13 @@ test.describe("Computed Properties", () => {
   let explorer: DataExplorer = null!;
 
   test.beforeAll("Create Test Database", async () => {
-    context = await createTestSQLContainer();
+    context = await createTestSQLContainer({
+      testAccount: TestAccount.SQL2,
+    });
   });
 
   test.beforeEach("Open Settings tab under Scale & Settings", async ({ page }) => {
-    explorer = await DataExplorer.open(page, TestAccount.SQL);
+    explorer = await DataExplorer.open(page, TestAccount.SQL2);
     const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
     await containerNode.expand();
 
@@ -22,7 +24,7 @@ test.describe("Computed Properties", () => {
     await computedPropertiesTab.click();
   });
 
-  test.afterAll("Delete Test Database", async () => {
+  test.afterEach("Delete Test Database", async () => {
     await context?.dispose();
   });
 

test/sql/scaleAndSettings/scale.spec.ts

@@ -118,7 +118,5 @@ async function openScaleTab(browser: Browser): Promise<SetupResult> {
 }
 
 async function cleanup({ context }: Partial<SetupResult>) {
-  if (!process.env.CI) {
+  await context?.dispose();
-    await context?.dispose();
-  }
 }

test/sql/scaleAndSettings/settings.spec.ts

@@ -17,12 +17,9 @@ test.describe("Settings under Scale & Settings", () => {
     await settingsTab.click();
   });
 
-  // Delete database only if not running in CI
+  test.afterEach("Delete Test Database", async () => {
-  if (!process.env.CI) {
+    await context?.dispose();
-    test.afterAll("Delete Test Database", async () => {
+  });
-      await context?.dispose();
-    });
-  }
 
   test("Update TTL to On (no default)", async () => {
     const ttlOnNoDefaultRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-no-default-option" });

test/sql/scripts/storedProcedure.spec.ts

@@ -7,14 +7,16 @@ test.describe("Stored Procedures", () => {
   let explorer: DataExplorer = null!;
 
   test.beforeAll("Create Test Database", async () => {
-    context = await createTestSQLContainer();
+    context = await createTestSQLContainer({
+      testAccount: TestAccount.SQL2,
+    });
   });
 
   test.beforeEach("Open container", async ({ page }) => {
-    explorer = await DataExplorer.open(page, TestAccount.SQL);
+    explorer = await DataExplorer.open(page, TestAccount.SQL2);
   });
 
-  test.afterAll("Delete Test Database", async () => {
+  test.afterEach("Delete Test Database", async () => {
     await context?.dispose();
   });
 
@@ -43,7 +45,7 @@ test.describe("Stored Procedures", () => {
     );
 
     // Execute stored procedure
-    const executeButton = explorer.commandBarButton(CommandBarButton.Execute);
+    const executeButton = explorer.commandBarButton(CommandBarButton.Execute).first();
     await executeButton.click();
     const executeSidePanelButton = explorer.frame.getByTestId("Panel/OkButton");
     await executeSidePanelButton.click();

test/sql/scripts/trigger.spec.ts

@@ -19,18 +19,18 @@ test.describe("Triggers", () => {
         request.setBody(itemToCreate);
     }`;
   test.beforeAll("Create Test Database", async () => {
-    context = await createTestSQLContainer();
+    context = await createTestSQLContainer({
+      testAccount: TestAccount.SQL2,
+    });
   });
 
   test.beforeEach("Open container", async ({ page }) => {
-    explorer = await DataExplorer.open(page, TestAccount.SQL);
+    explorer = await DataExplorer.open(page, TestAccount.SQL2);
   });
 
-  if (!process.env.CI) {
+  test.afterEach("Delete Test Database", async () => {
-    test.afterAll("Delete Test Database", async () => {
+    await context?.dispose();
-      await context?.dispose();
+  });
-    });
-  }
 
   test("Add and delete trigger", async ({ page }, testInfo) => {
     // Open container context menu and click New Trigger

test/sql/scripts/userDefinedFunction.spec.ts

@@ -12,18 +12,18 @@ test.describe("User Defined Functions", () => {
   }`;
 
   test.beforeAll("Create Test Database", async () => {
-    context = await createTestSQLContainer();
+    context = await createTestSQLContainer({
+      testAccount: TestAccount.SQL2,
+    });
   });
 
   test.beforeEach("Open container", async ({ page }) => {
-    explorer = await DataExplorer.open(page, TestAccount.SQL);
+    explorer = await DataExplorer.open(page, TestAccount.SQL2);
   });
 
-  if (!process.env.CI) {
+  test.afterEach("Delete Test Database", async () => {
-    test.afterAll("Delete Test Database", async () => {
+    await context?.dispose();
-      await context?.dispose();
+  });
-    });
-  }
 
   test("Add, execute, and delete user defined function", async ({ page }, testInfo) => {
     // Open container context menu and click New UDF

test/testData.ts

@@ -86,13 +86,14 @@ type createTestSqlContainerConfig = {
   includeTestData?: boolean;
   partitionKey?: string;
   databaseName?: string;
+  testAccount?: TestAccount;
 };
 
 type createMultipleTestSqlContainerConfig = {
   containerCount?: number;
   partitionKey?: string;
   databaseName?: string;
-  accountType: TestAccount.SQLContainerCopyOnly | TestAccount.SQL;
+  accountType: TestAccount.SQLContainerCopyOnly | TestAccount.SQL | TestAccount.SQL2;
 };
 
 export async function createMultipleTestContainers({
@@ -114,12 +115,7 @@ export async function createMultipleTestContainers({
     endpoint: account.documentEndpoint!,
   };
 
-  const rbacToken =
+  const rbacToken = getRbacToken(accountType);
-    accountType === TestAccount.SQL
-      ? process.env.NOSQL_TESTACCOUNT_TOKEN
-      : accountType === TestAccount.SQLContainerCopyOnly
-      ? process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN
-      : "";
   if (rbacToken) {
     clientOptions.tokenProvider = async (): Promise<string> => {
       const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
@@ -155,20 +151,21 @@ export async function createTestSQLContainer({
   includeTestData = false,
   partitionKey = "/partitionKey",
   databaseName = "",
+  testAccount = TestAccount.SQL,
 }: createTestSqlContainerConfig = {}) {
   const databaseId = databaseName ? databaseName : generateUniqueName("db");
   const containerId = "testcontainer"; // A unique container name isn't needed because the database is unique
   const credentials = getAzureCLICredentials();
   const adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
   const armClient = new CosmosDBManagementClient(adaptedCredentials, subscriptionId);
-  const accountName = getAccountName(TestAccount.SQL);
+  const accountName = getAccountName(testAccount);
   const account = await armClient.databaseAccounts.get(resourceGroupName, accountName);
 
   const clientOptions: CosmosClientOptions = {
     endpoint: account.documentEndpoint!,
   };
 
-  const nosqlAccountRbacToken = process.env.NOSQL_TESTACCOUNT_TOKEN;
+  const nosqlAccountRbacToken = getRbacToken(testAccount);
   if (nosqlAccountRbacToken) {
     clientOptions.tokenProvider = async (): Promise<string> => {
       const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
@@ -252,3 +249,16 @@ export async function retry<T>(fn: () => Promise<T>, retries = 3, delayMs = 1000
   }
   throw lastError;
 }
+
+function getRbacToken(accountType: TestAccount): string | undefined {
+  switch (accountType) {
+    case TestAccount.SQL:
+      return process.env.NOSQL_TESTACCOUNT_TOKEN;
+    case TestAccount.SQL2:
+      return process.env.NOSQL2_TESTACCOUNT_TOKEN;
+    case TestAccount.SQLContainerCopyOnly:
+      return process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN;
+    default:
+      return undefined;
+  }
+}

test/testExplorer/TestExplorer.ts

@@ -17,6 +17,7 @@ const nosqlRbacToken =
   urlSearchParams.get("nosqlRbacToken") ||
   (enablecontainercopy ? process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN : process.env.NOSQL_TESTACCOUNT_TOKEN) ||
   "";
+const nosql2RbacToken = urlSearchParams.get("nosql2RbacToken") || process.env.NOSQL2_TESTACCOUNT_TOKEN || "";
 const nosqlReadOnlyRbacToken =
   urlSearchParams.get("nosqlReadOnlyRbacToken") || process.env.NOSQL_READONLY_TESTACCOUNT_TOKEN || "";
 const tableRbacToken = urlSearchParams.get("tableRbacToken") || process.env.TABLE_TESTACCOUNT_TOKEN || "";
@@ -43,6 +44,9 @@ const initTestExplorer = async (): Promise<void> => {
     case "sql":
       rbacToken = nosqlRbacToken;
       break;
+    case "sql2":
+      rbacToken = nosql2RbacToken;
+      break;
     case "sql-readonly":
       rbacToken = nosqlReadOnlyRbacToken;
       break;