used setText instead of keyboardinput wait

Co-authored-by: nishthaAhujaa <nishtha17354@iiittd.ac.in>

.github/workflows/ci.yml

@@ -164,8 +164,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
-        shardTotal: [20]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
+        shardTotal: [16]
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js 18.x
@@ -192,29 +192,24 @@ jobs:
             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
-            NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-sql-containercopyonly.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN"
-            echo NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN=$NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
             TABLE_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-tables.documents.azure.com/.default" -o tsv --query accessToken)
             echo "::add-mask::$TABLE_TESTACCOUNT_TOKEN"
             echo TABLE_TESTACCOUNT_TOKEN=$TABLE_TESTACCOUNT_TOKEN >> $GITHUB_ENV
             GREMLIN_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-gremlin.documents.azure.com/.default" -o tsv --query accessToken)
             echo "::add-mask::$GREMLIN_TESTACCOUNT_TOKEN"
             echo GREMLIN_TESTACCOUNT_TOKEN=$GREMLIN_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            # CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
-            # echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
-            # echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            # MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
-            # echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
-            # echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            # MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
-            # echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
-            # echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            # MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
-            # echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
-            # echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-      - name: List test files for shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}
-        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --list
+            CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
+            echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
+            echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
+            echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
+            echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
       - name: Run test shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}
         run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers=3
       - name: Upload blob report to GitHub Actions Artifacts

.github/workflows/cleanup.yml

@@ -6,8 +6,8 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
   schedule:
-    # Once every two hours
-    - cron: "0 */2 * * *"
+    # Once every hour
+    - cron: "0 15 * * *"
 
 permissions:
   id-token: write

less/Common/Constants.less

@@ -128,7 +128,7 @@
 @provisionDatabaseThroughputInfo: 200px;
 
 //tabs container
-@ActiveTabHeight: 32px;
+@ActiveTabHeight: 31px;
 @ActiveTabWidth: 141px;
 @TabsHeight: 30px;
 @TabsWidth: 140px;

less/documentDB.less

@@ -406,11 +406,7 @@ body {
   width: 440px;
   min-height: 565px;
 }
-.dataExplorerLoaderforcopyJobs{
-   width: 100%;
-   min-height: 565px;
-   right: 0;
-}
+
 .dataExplorerTabLoaderContainer {
   left: initial;
   top: initial;
@@ -2647,7 +2643,7 @@ a:link {
 
 .tabPanesContainer {
   flex-grow: 1;
-  overflow: hidden;
+  overflow-y: scroll;
   background-color: var(--colorNeutralBackground1);
   color: var(--colorNeutralForeground1);
 }
@@ -2655,7 +2651,6 @@ a:link {
 .tabs-container {
   height: 100%;
   width: 100%;
-  overflow-y: auto;
 }
 
 .paddingspan4 {
@@ -2682,7 +2677,7 @@ a:link {
   width: @ActiveTabWidth;
 }
 
-.nav-tabs > li.active .contentWrapper .tabNavText  {
+.nav-tabs > li.active .contentWrapper {
   border-bottom: 2px solid var(--colorCompoundBrandBackground);
 }
 

less/documentDBFabric.less

@@ -7,7 +7,6 @@ html {
 body {
   font-family: @FabricFont;
   background-color: #f5f5f5;
-  --colorCompoundBrandBackground: @FabricAccentMedium;
 }
 
 a {
@@ -42,7 +41,7 @@ a:focus {
 }
 
 .nav-tabs-margin {
-  padding-top: 0px;
+  padding-top: 5px;
   background-color: #ffffff;
 }
 
@@ -69,20 +68,17 @@ a:focus {
 }
 
 .nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: none;
+  border-bottom: 2px solid #e0e0e0;
 }
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: none;
+  border-bottom: 2px solid @FabricAccentMedium;
 }
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
   border-bottom: 0px none transparent;
 }
-.nav-tabs > li.active .contentWrapper .tabNavText  {
-  border-bottom: 2px solid @FabricAccentMedium;
-}
 
 .tabNavContentContainer {
   padding: @SmallSpace 0px @SmallSpace 0px;
@@ -218,7 +214,6 @@ a:focus {
 
 .tabPanesContainer {
   overflow: auto !important;
-  display: flex;
 }
 
 .tabs-container {

package-lock.json

@@ -116,8 +116,8 @@
         "tinykeys": "2.1.0",
         "underscore": "1.12.1",
         "utility-types": "3.10.0",
-        "uuid": "9.0.0",
         "web-vitals": "4.2.4",
+        "uuid": "9.0.0",
         "zustand": "3.5.0"
       },
       "devDependencies": {

playwright.config.ts

@@ -11,8 +11,8 @@ export default defineConfig({
   reporter: process.env.CI ? "blob" : "html",
   timeout: 10 * 60 * 1000,
   use: {
-    trace: "retain-on-failure",
-    video: "retain-on-failure",
+    trace: "off",
+    video: "off",
     screenshot: "on",
     testIdAttribute: "data-test",
     contextOptions: {

src/Common/LoadingOverlay.tsx

@@ -1,5 +1,4 @@
 import { Overlay, Spinner, SpinnerSize } from "@fluentui/react";
-import { useThemeStore } from "hooks/useTheme";
 import React from "react";
 
 interface LoadingOverlayProps {
@@ -8,17 +7,15 @@ interface LoadingOverlayProps {
 }
 
 const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ isLoading, label }) => {
-  const isDarkMode = useThemeStore((state) => state.isDarkMode);
   if (!isLoading) {
     return null;
   }
 
   return (
     <Overlay
-      data-test="loading-overlay"
       styles={{
         root: {
-          backgroundColor: isDarkMode ? "rgba(32, 31, 30, 0.9)" : "rgba(255,255,255,0.9)",
+          backgroundColor: "rgba(255,255,255,0.9)",
           zIndex: 9999,
           display: "flex",
           alignItems: "center",
@@ -26,11 +23,7 @@ const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ isLoading, label }) =>
         },
       }}
     >
-      <Spinner
-        size={SpinnerSize.large}
-        label={label}
-        styles={{ label: { fontWeight: 600, color: isDarkMode ? "#ffffff" : "#323130" } }}
-      />
+      <Spinner size={SpinnerSize.large} label={label} styles={{ label: { fontWeight: 600 } }} />
     </Overlay>
   );
 };

src/Common/Pager/Pager.css

@@ -11,14 +11,3 @@
   gap: 8px;
   align-items: center;
 }
-
-/* Override dark mode inherit for pagination icons */
-body.isDarkMode .pager-container .ms-Button .ms-Button-icon,
-body.isDarkMode .pager-container .ms-Button i {
-  color: var(--colorBrandForeground1);
-}
-
-body.isDarkMode .pager-container .ms-Button:disabled .ms-Button-icon,
-body.isDarkMode .pager-container .ms-Button:disabled i {
-  color: var(--colorNeutralForegroundDisabled);
-}

src/Common/Pager/index.tsx

@@ -59,7 +59,7 @@ const Pager: React.FC<PagerProps> = ({
   return (
     <div className={className || "pager-container"}>
       {showItemCount && (
-        <Text className="themeText">
+        <Text>
           Showing {startIndex + 1} - {endIndex} of {totalCount} items
         </Text>
       )}
@@ -82,7 +82,7 @@ const Pager: React.FC<PagerProps> = ({
           disabled={disabled || currentPage === 1}
           styles={iconButtonStyles}
         />
-        <Text className="themeText">
+        <Text>
           Page {currentPage} of {totalPages}
         </Text>
         <IconButton

src/Common/__snapshots__/LoadingOverlay.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`LoadingOverlay should handle long labels properly 1`] = `
 <div
   class="ms-Overlay root-109"
-  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"
@@ -23,7 +22,6 @@ exports[`LoadingOverlay should handle long labels properly 1`] = `
 exports[`LoadingOverlay should render loading overlay when isLoading is true 1`] = `
 <div
   class="ms-Overlay root-109"
-  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"
@@ -43,7 +41,6 @@ exports[`LoadingOverlay should render loading overlay when isLoading is true 1`]
 exports[`LoadingOverlay should render loading overlay with custom label 1`] = `
 <div
   class="ms-Overlay root-109"
-  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"
@@ -63,7 +60,6 @@ exports[`LoadingOverlay should render loading overlay with custom label 1`] = `
 exports[`LoadingOverlay should render loading overlay with empty label 1`] = `
 <div
   class="ms-Overlay root-109"
-  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"

src/Common/dataAccess/dataTransfers.ts

@@ -1,4 +1,3 @@
-import { configContext } from "ConfigContext";
 import { ApiType, userContext } from "UserContext";
 import * as NotificationConsoleUtils from "Utils/NotificationConsoleUtils";
 import {
@@ -15,12 +14,9 @@ import {
   DataTransferJobFeedResults,
   DataTransferJobGetResults,
 } from "Utils/arm/generatedClients/dataTransferService/types";
-import { armRequest } from "Utils/arm/request";
 import { addToPolling, removeFromPolling, updateDataTransferJob, useDataTransferJobs } from "hooks/useDataTransferJobs";
 import promiseRetry, { AbortError, FailedAttemptError } from "p-retry";
 
-export const DATA_TRANSFER_JOB_API_VERSION = "2025-05-01-preview";
-
 export interface DataTransferParams {
   jobName: string;
   apiType: ApiType;
@@ -37,34 +33,26 @@ export const getDataTransferJobs = async (
   subscriptionId: string,
   resourceGroup: string,
   accountName: string,
-  signal?: AbortSignal,
 ): Promise<DataTransferJobGetResults[]> => {
   let dataTransferJobs: DataTransferJobGetResults[] = [];
   let dataTransferFeeds: DataTransferJobFeedResults = await listByDatabaseAccount(
     subscriptionId,
     resourceGroup,
     accountName,
-    signal,
   );
   dataTransferJobs = [...dataTransferJobs, ...(dataTransferFeeds?.value || [])];
   while (dataTransferFeeds?.nextLink) {
-    /**
-     * The `nextLink` URL returned by the Cosmos DB SQL API pointed to an incorrect endpoint, causing timeouts.
-     * (i.e: https://cdbmgmtprodby.documents.azure.com:450/subscriptions/{subId}/resourceGroups/{rg}/providers/Microsoft.DocumentDB/databaseAccounts/{account}/sql/dataTransferJobs?$top=100&$skiptoken=...)
-     * We manipulate the URL by parsing it to extract the path and query parameters,
-     * then construct the correct URL for the Azure Resource Manager (ARM) API.
-     * This ensures that the request is made to the correct base URL (`configContext.ARM_ENDPOINT`),
-     * which is required for ARM operations.
-     */
-    const parsedUrl = new URL(dataTransferFeeds.nextLink);
-    const nextUrlPath = parsedUrl.pathname + parsedUrl.search;
-    dataTransferFeeds = await armRequest({
-      host: configContext.ARM_ENDPOINT,
-      path: nextUrlPath,
-      method: "GET",
-      apiVersion: DATA_TRANSFER_JOB_API_VERSION,
+    const nextResponse = await window.fetch(dataTransferFeeds.nextLink, {
+      headers: {
+        Authorization: userContext.authorizationToken,
+      },
     });
-    dataTransferJobs.push(...(dataTransferFeeds?.value || []));
+    if (nextResponse.ok) {
+      dataTransferFeeds = await nextResponse.json();
+      dataTransferJobs = [...dataTransferJobs, ...(dataTransferFeeds?.value || [])];
+    } else {
+      break;
+    }
   }
   return dataTransferJobs;
 };

src/Explorer/ContainerCopy/Actions/CopyJobActions.test.tsx

@@ -1,6 +1,5 @@
 import "@testing-library/jest-dom";
 import Explorer from "Explorer/Explorer";
-import { getDataTransferJobs } from "../../../Common/dataAccess/dataTransfers";
 import * as Logger from "../../../Common/Logger";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import * as dataTransferService from "../../../Utils/arm/generatedClients/dataTransferService/dataTransferJobs";
@@ -31,7 +30,6 @@ jest.mock("../../../Common/Logger");
 jest.mock("../../../Utils/arm/generatedClients/dataTransferService/dataTransferJobs");
 jest.mock("../MonitorCopyJobs/MonitorCopyJobRefState");
 jest.mock("../CopyJobUtils");
-jest.mock("../../../Common/dataAccess/dataTransfers");
 
 describe("CopyJobActions", () => {
   beforeEach(() => {
@@ -156,7 +154,8 @@ describe("CopyJobActions", () => {
     });
 
     it("should fetch and format copy jobs successfully", async () => {
-      const mockResponse = [
+      const mockResponse = {
+        value: [
           {
             properties: {
               jobName: "job-1",
@@ -178,9 +177,10 @@ describe("CopyJobActions", () => {
               },
             },
           },
-      ];
+        ],
+      };
 
-      (getDataTransferJobs as jest.Mock).mockResolvedValue(mockResponse);
+      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue(mockResponse);
       (CopyJobUtils.formatUTCDateTime as jest.Mock).mockReturnValue({
         formattedDateTime: "1/1/2025, 10:00:00 AM",
         timestamp: 1704106800000,
@@ -201,7 +201,8 @@ describe("CopyJobActions", () => {
     });
 
     it("should filter jobs by CosmosDBSql component", async () => {
-      const mockResponse = [
+      const mockResponse = {
+        value: [
           {
             properties: {
               jobName: "sql-job",
@@ -228,9 +229,10 @@ describe("CopyJobActions", () => {
               destination: { component: "CosmosDBSql", databaseName: "db2", containerName: "c2" },
             },
           },
-      ];
+        ],
+      };
 
-      (getDataTransferJobs as jest.Mock).mockResolvedValue(mockResponse);
+      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue(mockResponse);
       (CopyJobUtils.formatUTCDateTime as jest.Mock).mockReturnValue({
         formattedDateTime: "1/1/2025, 10:00:00 AM",
         timestamp: 1704106800000,
@@ -245,7 +247,8 @@ describe("CopyJobActions", () => {
     });
 
     it("should sort jobs by last updated time (newest first)", async () => {
-      const mockResponse = [
+      const mockResponse = {
+        value: [
           {
             properties: {
               jobName: "older-job",
@@ -272,9 +275,10 @@ describe("CopyJobActions", () => {
               destination: { component: "CosmosDBSql", databaseName: "db4", containerName: "c4" },
             },
           },
-      ];
+        ],
+      };
 
-      (getDataTransferJobs as jest.Mock).mockResolvedValue(mockResponse);
+      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue(mockResponse);
       (CopyJobUtils.formatUTCDateTime as jest.Mock).mockReturnValue({
         formattedDateTime: "1/1/2025, 10:00:00 AM",
         timestamp: 1704106800000,
@@ -289,7 +293,8 @@ describe("CopyJobActions", () => {
     });
 
     it("should calculate completion percentage correctly", async () => {
-      const mockResponse = [
+      const mockResponse = {
+        value: [
           {
             properties: {
               jobName: "job-1",
@@ -303,9 +308,10 @@ describe("CopyJobActions", () => {
               destination: { component: "CosmosDBSql", databaseName: "db2", containerName: "c2" },
             },
           },
-      ];
+        ],
+      };
 
-      (getDataTransferJobs as jest.Mock).mockResolvedValue(mockResponse);
+      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue(mockResponse);
       (CopyJobUtils.formatUTCDateTime as jest.Mock).mockReturnValue({
         formattedDateTime: "1/1/2025, 10:00:00 AM",
         timestamp: 1704106800000,
@@ -319,7 +325,8 @@ describe("CopyJobActions", () => {
     });
 
     it("should handle zero total count gracefully", async () => {
-      const mockResponse = [
+      const mockResponse = {
+        value: [
           {
             properties: {
               jobName: "job-1",
@@ -333,9 +340,10 @@ describe("CopyJobActions", () => {
               destination: { component: "CosmosDBSql", databaseName: "db2", containerName: "c2" },
             },
           },
-      ];
+        ],
+      };
 
-      (getDataTransferJobs as jest.Mock).mockResolvedValue(mockResponse);
+      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue(mockResponse);
       (CopyJobUtils.formatUTCDateTime as jest.Mock).mockReturnValue({
         formattedDateTime: "1/1/2025, 10:00:00 AM",
         timestamp: 1704106800000,
@@ -353,7 +361,8 @@ describe("CopyJobActions", () => {
         message: "Error message line 1\r\n\r\nError message line 2",
         code: "ErrorCode123",
       };
-      const mockResponse = [
+      const mockResponse = {
+        value: [
           {
             properties: {
               jobName: "failed-job",
@@ -368,9 +377,10 @@ describe("CopyJobActions", () => {
               error: mockError,
             },
           },
-      ];
+        ],
+      };
 
-      (getDataTransferJobs as jest.Mock).mockResolvedValue(mockResponse);
+      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue(mockResponse);
       (CopyJobUtils.formatUTCDateTime as jest.Mock).mockReturnValue({
         formattedDateTime: "1/1/2025, 10:00:00 AM",
         timestamp: 1704106800000,
@@ -398,7 +408,7 @@ describe("CopyJobActions", () => {
       };
       (global as any).AbortController = jest.fn(() => mockAbortController);
 
-      (getDataTransferJobs as jest.Mock).mockResolvedValue([]);
+      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue({ value: [] });
 
       getCopyJobs();
       expect(mockAbortController.abort).not.toHaveBeenCalled();
@@ -408,7 +418,9 @@ describe("CopyJobActions", () => {
     });
 
     it("should throw error for invalid response format", async () => {
-      (getDataTransferJobs as jest.Mock).mockResolvedValue("not-an-array");
+      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue({
+        value: "not-an-array",
+      });
 
       await expect(getCopyJobs()).rejects.toThrow("Invalid migration job status response: Expected an array of jobs.");
     });
@@ -418,7 +430,7 @@ describe("CopyJobActions", () => {
         message: "Aborted",
         content: JSON.stringify({ message: "signal is aborted without reason" }),
       };
-      (getDataTransferJobs as jest.Mock).mockRejectedValue(abortError);
+      (dataTransferService.listByDatabaseAccount as jest.Mock).mockRejectedValue(abortError);
 
       await expect(getCopyJobs()).rejects.toMatchObject({
         message: expect.stringContaining("Previous copy job request was cancelled."),
@@ -427,7 +439,7 @@ describe("CopyJobActions", () => {
 
     it("should handle generic errors", async () => {
       const genericError = new Error("Network error");
-      (getDataTransferJobs as jest.Mock).mockRejectedValue(genericError);
+      (dataTransferService.listByDatabaseAccount as jest.Mock).mockRejectedValue(genericError);
 
       await expect(getCopyJobs()).rejects.toThrow("Network error");
     });

src/Explorer/ContainerCopy/Actions/CopyJobActions.tsx

@@ -1,13 +1,13 @@
 import Explorer from "Explorer/Explorer";
 import React from "react";
 import { userContext } from "UserContext";
-import { getDataTransferJobs } from "../../../Common/dataAccess/dataTransfers";
 import { logError } from "../../../Common/Logger";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import {
   cancel,
   complete,
   create,
+  listByDatabaseAccount,
   pause,
   resume,
 } from "../../../Utils/arm/generatedClients/dataTransferService/dataTransferJobs";
@@ -63,8 +63,14 @@ export const getCopyJobs = async (): Promise<CopyJobType[]> => {
     const { subscriptionId, resourceGroup, accountName } = getAccountDetailsFromResourceId(
       userContext.databaseAccount?.id || "",
     );
-    const jobs = await getDataTransferJobs(subscriptionId, resourceGroup, accountName, copyJobsAbortController.signal);
+    const response = await listByDatabaseAccount(
+      subscriptionId,
+      resourceGroup,
+      accountName,
+      copyJobsAbortController.signal,
+    );
 
+    const jobs = response.value || [];
     if (!Array.isArray(jobs)) {
       throw new Error("Invalid migration job status response: Expected an array of jobs.");
     }

src/Explorer/ContainerCopy/CommandBar/CopyJobCommandBar.test.tsx

@@ -39,7 +39,7 @@ describe("CopyJobCommandBar", () => {
 
     render(<CopyJobCommandBar explorer={mockExplorer} />);
 
-    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer, false);
+    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer);
     expect(mockGetCommandBarButtons).toHaveBeenCalledTimes(1);
   });
 
@@ -163,7 +163,7 @@ describe("CopyJobCommandBar", () => {
 
     render(<CopyJobCommandBar explorer={mockExplorer} />);
 
-    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer, false);
+    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer);
     expect(mockConvertButton.mock.calls[0][0]).toEqual(mockCommandButtonProps);
   });
 
@@ -175,11 +175,11 @@ describe("CopyJobCommandBar", () => {
     mockConvertButton.mockReturnValue([]);
 
     const { rerender } = render(<CopyJobCommandBar explorer={mockExplorer1} />);
-    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer1, false);
+    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer1);
 
     rerender(<CopyJobCommandBar explorer={mockExplorer2} />);
 
-    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer2, false);
+    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer2);
     expect(mockGetCommandBarButtons).toHaveBeenCalledTimes(2);
   });
 });

src/Explorer/ContainerCopy/CommandBar/CopyJobCommandBar.tsx

@@ -1,28 +1,24 @@
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
 import React from "react";
-import { useThemeStore } from "../../../hooks/useTheme";
+import { StyleConstants } from "../../../Common/StyleConstants";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import * as CommandBarUtil from "../../Menus/CommandBar/CommandBarUtil";
-import { getThemeTokens } from "../../Theme/ThemeUtil";
 import { ContainerCopyProps } from "../Types/CopyJobTypes";
 import { getCommandBarButtons } from "./Utils";
 
-const CopyJobCommandBar: React.FC<ContainerCopyProps> = ({ explorer }) => {
-  const isDarkMode = useThemeStore((state) => state.isDarkMode);
-  const themeTokens = getThemeTokens(isDarkMode);
-  const backgroundColor = themeTokens.colorNeutralBackground1;
-
+const backgroundColor = StyleConstants.BaseLight;
 const rootStyle = {
   root: {
     backgroundColor: backgroundColor,
   },
 };
 
-  const commandBarItems: CommandButtonComponentProps[] = getCommandBarButtons(explorer, isDarkMode);
+const CopyJobCommandBar: React.FC<ContainerCopyProps> = ({ explorer }) => {
+  const commandBarItems: CommandButtonComponentProps[] = getCommandBarButtons(explorer);
   const controlButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(commandBarItems, backgroundColor);
 
   return (
-    <div className="commandBarContainer" style={{ backgroundColor }}>
+    <div className="commandBarContainer">
       <FluentCommandBar
         ariaLabel="Use left and right arrow keys to navigate between commands"
         styles={rootStyle}

src/Explorer/ContainerCopy/CommandBar/Utils.test.ts

@@ -50,7 +50,7 @@ describe("CommandBar Utils", () => {
 
   describe("getCommandBarButtons", () => {
     it("should return an array of command button props", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
 
       expect(buttons).toBeDefined();
       expect(Array.isArray(buttons)).toBe(true);
@@ -58,7 +58,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should include create copy job button", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
       const createButton = buttons[0];
 
       expect(createButton).toBeDefined();
@@ -70,7 +70,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should include refresh button", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
       const refreshButton = buttons[1];
 
       expect(refreshButton).toBeDefined();
@@ -80,11 +80,11 @@ describe("CommandBar Utils", () => {
     });
 
     it("should include feedback button when platform is Portal", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
 
-      expect(buttons.length).toBe(4);
+      expect(buttons.length).toBe(3);
 
-      const feedbackButton = buttons[3];
+      const feedbackButton = buttons[2];
       expect(feedbackButton).toBeDefined();
       expect(feedbackButton.ariaLabel).toBe("Provide feedback on copy jobs");
       expect(feedbackButton.tooltipText).toBe("Feedback");
@@ -105,13 +105,13 @@ describe("CommandBar Utils", () => {
       }));
 
       const { getCommandBarButtons: getCommandBarButtonsEmulator } = await import("./Utils");
-      const buttons = getCommandBarButtonsEmulator(mockExplorer, false);
+      const buttons = getCommandBarButtonsEmulator(mockExplorer);
 
-      expect(buttons.length).toBe(3);
+      expect(buttons.length).toBe(2);
     });
 
     it("should call openCreateCopyJobPanel when create button is clicked", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
       const createButton = buttons[0];
 
       createButton.onCommandClick({} as React.SyntheticEvent);
@@ -121,7 +121,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should call refreshJobList when refresh button is clicked", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
       const refreshButton = buttons[1];
 
       refreshButton.onCommandClick({} as React.SyntheticEvent);
@@ -130,8 +130,8 @@ describe("CommandBar Utils", () => {
     });
 
     it("should call openContainerCopyFeedbackBlade when feedback button is clicked", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
-      const feedbackButton = buttons[3];
+      const buttons = getCommandBarButtons(mockExplorer);
+      const feedbackButton = buttons[2];
 
       feedbackButton.onCommandClick({} as React.SyntheticEvent);
 
@@ -139,7 +139,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should return buttons with correct icon sources", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
 
       expect(buttons[0].iconSrc).toBeDefined();
       expect(buttons[0].iconAlt).toBe("Create Copy Job");
@@ -148,10 +148,7 @@ describe("CommandBar Utils", () => {
       expect(buttons[1].iconAlt).toBe("Refresh");
 
       expect(buttons[2].iconSrc).toBeDefined();
-      expect(buttons[2].iconAlt).toBe("Dark Theme");
-
-      expect(buttons[3].iconSrc).toBeDefined();
-      expect(buttons[3].iconAlt).toBe("Feedback");
+      expect(buttons[2].iconAlt).toBe("Feedback");
     });
 
     it("should handle null MonitorCopyJobsRefState ref gracefully", () => {
@@ -160,14 +157,14 @@ describe("CommandBar Utils", () => {
         return selector(state);
       });
 
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
       const refreshButton = buttons[1];
 
       expect(() => refreshButton.onCommandClick({} as React.SyntheticEvent)).not.toThrow();
     });
 
     it("should set hasPopup to false for all buttons", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
 
       buttons.forEach((button) => {
         expect(button.hasPopup).toBe(false);
@@ -175,7 +172,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should set commandButtonLabel to undefined for all buttons", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
 
       buttons.forEach((button) => {
         expect(button.commandButtonLabel).toBeUndefined();
@@ -183,7 +180,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should respect disabled state when provided", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
 
       buttons.forEach((button) => {
         expect(button.disabled).toBe(false);
@@ -191,7 +188,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should return CommandButtonComponentProps with all required properties", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
 
       buttons.forEach((button: CommandButtonComponentProps) => {
         expect(button).toHaveProperty("iconSrc");
@@ -205,19 +202,18 @@ describe("CommandBar Utils", () => {
       });
     });
 
-    it("should maintain button order: create, refresh, themeToggle, feedback", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+    it("should maintain button order: create, refresh, feedback", () => {
+      const buttons = getCommandBarButtons(mockExplorer);
 
       expect(buttons[0].tooltipText).toBe("Create Copy Job");
       expect(buttons[1].tooltipText).toBe("Refresh");
-      expect(buttons[2].tooltipText).toBe("Dark Theme");
-      expect(buttons[3].tooltipText).toBe("Feedback");
+      expect(buttons[2].tooltipText).toBe("Feedback");
     });
   });
 
   describe("Button click handlers", () => {
     it("should execute click handlers without errors", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
 
       buttons.forEach((button) => {
         expect(() => button.onCommandClick({} as React.SyntheticEvent)).not.toThrow();
@@ -225,7 +221,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should call correct action for each button", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
 
       buttons[0].onCommandClick({} as React.SyntheticEvent);
       expect(Actions.openCreateCopyJobPanel).toHaveBeenCalledWith(mockExplorer);
@@ -233,14 +229,14 @@ describe("CommandBar Utils", () => {
       buttons[1].onCommandClick({} as React.SyntheticEvent);
       expect(mockRefreshJobList).toHaveBeenCalled();
 
-      buttons[3].onCommandClick({} as React.SyntheticEvent);
+      buttons[2].onCommandClick({} as React.SyntheticEvent);
       expect(mockOpenContainerCopyFeedbackBlade).toHaveBeenCalled();
     });
   });
 
   describe("Accessibility", () => {
     it("should have aria labels for all buttons", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
 
       buttons.forEach((button) => {
         expect(button.ariaLabel).toBeDefined();
@@ -250,7 +246,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should have tooltip text for all buttons", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
 
       buttons.forEach((button) => {
         expect(button.tooltipText).toBeDefined();
@@ -260,7 +256,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should have icon alt text for all buttons", () => {
-      const buttons = getCommandBarButtons(mockExplorer, false);
+      const buttons = getCommandBarButtons(mockExplorer);
 
       buttons.forEach((button) => {
         expect(button.iconAlt).toBeDefined();

src/Explorer/ContainerCopy/CommandBar/Utils.ts

@@ -1,10 +1,7 @@
 import AddIcon from "../../../../images/Add.svg";
 import FeedbackIcon from "../../../../images/Feedback-Command.svg";
-import MoonIcon from "../../../../images/MoonIcon.svg";
 import RefreshIcon from "../../../../images/refresh-cosmos.svg";
-import SunIcon from "../../../../images/SunIcon.svg";
 import { configContext, Platform } from "../../../ConfigContext";
-import { useThemeStore } from "../../../hooks/useTheme";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import * as Actions from "../Actions/CopyJobActions";
@@ -12,7 +9,7 @@ import ContainerCopyMessages from "../ContainerCopyMessages";
 import { MonitorCopyJobsRefState } from "../MonitorCopyJobs/MonitorCopyJobRefState";
 import { CopyJobCommandBarBtnType } from "../Types/CopyJobTypes";
 
-function getCopyJobBtns(explorer: Explorer, isDarkMode: boolean): CopyJobCommandBarBtnType[] {
+function getCopyJobBtns(explorer: Explorer): CopyJobCommandBarBtnType[] {
   const monitorCopyJobsRef = MonitorCopyJobsRefState((state) => state.ref);
   const buttons: CopyJobCommandBarBtnType[] = [
     {
@@ -29,15 +26,7 @@ function getCopyJobBtns(explorer: Explorer, isDarkMode: boolean): CopyJobCommand
       ariaLabel: ContainerCopyMessages.refreshButtonAriaLabel,
       onClick: () => monitorCopyJobsRef?.refreshJobList(),
     },
-    {
-      key: "themeToggle",
-      iconSrc: isDarkMode ? SunIcon : MoonIcon,
-      label: isDarkMode ? "Light Theme" : "Dark Theme",
-      ariaLabel: isDarkMode ? "Switch to Light Theme" : "Switch to Dark Theme",
-      onClick: () => useThemeStore.getState().toggleTheme(),
-    },
   ];
-
   if (configContext.platform === Platform.Portal) {
     buttons.push({
       key: "feedback",
@@ -65,6 +54,6 @@ function btnMapper(config: CopyJobCommandBarBtnType): CommandButtonComponentProp
   };
 }
 
-export function getCommandBarButtons(explorer: Explorer, isDarkMode: boolean): CommandButtonComponentProps[] {
-  return getCopyJobBtns(explorer, isDarkMode).map(btnMapper);
+export function getCommandBarButtons(explorer: Explorer): CommandButtonComponentProps[] {
+  return getCopyJobBtns(explorer).map(btnMapper);
 }

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AddManagedIdentity.tsx

@@ -12,12 +12,7 @@ import useToggle from "./hooks/useToggle";
 const managedIdentityTooltip = (
   <Text>
     {ContainerCopyMessages.addManagedIdentity.tooltip.content} &nbsp;
-    <Link
-      style={{ color: "var(--colorBrandForeground1)" }}
-      href={ContainerCopyMessages.addManagedIdentity.tooltip.href}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
+    <Link href={ContainerCopyMessages.addManagedIdentity.tooltip.href} target="_blank" rel="noopener noreferrer">
       {ContainerCopyMessages.addManagedIdentity.tooltip.hrefText}
     </Link>
   </Text>
@@ -31,7 +26,7 @@ const AddManagedIdentity: React.FC<AddManagedIdentityProps> = () => {
 
   return (
     <Stack className="addManagedIdentityContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
-      <Text className="themeText">
+      <Text>
         {ContainerCopyMessages.addManagedIdentity.description}&ensp;
         <Link href={ContainerCopyMessages.addManagedIdentity.descriptionHref} target="_blank" rel="noopener noreferrer">
           {ContainerCopyMessages.addManagedIdentity.descriptionHrefText}
@@ -40,7 +35,6 @@ const AddManagedIdentity: React.FC<AddManagedIdentityProps> = () => {
         <InfoTooltip content={managedIdentityTooltip} />
       </Text>
       <Toggle
-        data-test="btn-toggle"
         checked={systemAssigned}
         onText={ContainerCopyMessages.toggleBtn.onText}
         offText={ContainerCopyMessages.toggleBtn.offText}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AddReadPermissionToDefaultIdentity.tsx

@@ -13,12 +13,7 @@ import useToggle from "./hooks/useToggle";
 const TooltipContent = (
   <Text>
     {ContainerCopyMessages.readPermissionAssigned.tooltip.content} &nbsp;
-    <Link
-      style={{ color: "var(--colorBrandForeground1)" }}
-      href={ContainerCopyMessages.readPermissionAssigned.tooltip.href}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
+    <Link href={ContainerCopyMessages.readPermissionAssigned.tooltip.href} target="_blank" rel="noopener noreferrer">
       {ContainerCopyMessages.readPermissionAssigned.tooltip.hrefText}
     </Link>
   </Text>
@@ -70,7 +65,6 @@ const AddReadPermissionToDefaultIdentity: React.FC<AddReadPermissionToDefaultIde
         <InfoTooltip content={TooltipContent} />
       </Text>
       <Toggle
-        data-test="btn-toggle"
         checked={readPermissionAssigned}
         onText={ContainerCopyMessages.toggleBtn.onText}
         offText={ContainerCopyMessages.toggleBtn.offText}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AssignPermissions.tsx

@@ -12,7 +12,7 @@ import { useCopyJobPrerequisitesCache } from "../../Utils/useCopyJobPrerequisite
 import usePermissionSections, { PermissionGroupConfig, PermissionSectionConfig } from "./hooks/usePermissionsSection";
 
 const PermissionSection: React.FC<PermissionSectionConfig> = ({ id, title, Component, completed, disabled }) => (
-  <AccordionItem key={id} value={id} disabled={disabled} data-test="accordion-item">
+  <AccordionItem key={id} value={id} disabled={disabled}>
     <AccordionHeader className="accordionHeader">
       <Text className="accordionHeaderText" variant="medium">
         {title}
@@ -25,13 +25,13 @@ const PermissionSection: React.FC<PermissionSectionConfig> = ({ id, title, Compo
         height={completed ? 20 : 24}
       />
     </AccordionHeader>
-    <AccordionPanel aria-disabled={disabled} className="accordionPanel" data-test="accordion-panel">
+    <AccordionPanel aria-disabled={disabled} className="accordionPanel">
       <Component />
     </AccordionPanel>
   </AccordionItem>
 );
 
-const PermissionGroup: React.FC<PermissionGroupConfig> = ({ id, title, description, sections }) => {
+const PermissionGroup: React.FC<PermissionGroupConfig> = ({ title, description, sections }) => {
   const [openItems, setOpenItems] = React.useState<string[]>([]);
 
   useEffect(() => {
@@ -44,12 +44,11 @@ const PermissionGroup: React.FC<PermissionGroupConfig> = ({ id, title, descripti
 
   return (
     <Stack
-      data-test={`permission-group-container-${id}`}
       tokens={{ childrenGap: 15 }}
       styles={{
         root: {
-          background: "var(--colorNeutralBackground2)",
-          border: "1px solid var(--colorNeutralStroke1)",
+          background: "#fafafa",
+          border: "1px solid #e1e1e1",
           borderRadius: 8,
           padding: 16,
           boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
@@ -57,11 +56,11 @@ const PermissionGroup: React.FC<PermissionGroupConfig> = ({ id, title, descripti
       }}
     >
       <Stack tokens={{ childrenGap: 5 }}>
-        <Text variant="medium" style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>
+        <Text variant="medium" style={{ fontWeight: 600 }}>
           {title}
         </Text>
         {description && (
-          <Text variant="small" styles={{ root: { color: "var(--colorNeutralForeground2)" } }}>
+          <Text variant="small" styles={{ root: { color: "#605E5C" } }}>
             {description}
           </Text>
         )}
@@ -100,12 +99,8 @@ const AssignPermissions = () => {
   }, []);
 
   return (
-    <Stack
-      data-test="Panel:AssignPermissionsContainer"
-      className="assignPermissionsContainer"
-      tokens={{ childrenGap: 20 }}
-    >
-      <Text variant="medium" style={{ color: "var(--colorNeutralForeground1)" }}>
+    <Stack className="assignPermissionsContainer" tokens={{ childrenGap: 20 }}>
+      <Text variant="medium">
         {isSameAccount && copyJobState.migrationType === CopyJobMigrationType.Online
           ? ContainerCopyMessages.assignPermissions.intraAccountOnlineDescription(
               copyJobState?.source?.account?.name || "",

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/DefaultManagedIdentity.tsx

@@ -12,12 +12,7 @@ import useToggle from "./hooks/useToggle";
 const managedIdentityTooltip = (
   <Text>
     {ContainerCopyMessages.defaultManagedIdentity.tooltip.content} &nbsp;
-    <Link
-      style={{ color: "var(--colorBrandForeground1)" }}
-      href={ContainerCopyMessages.defaultManagedIdentity.tooltip.href}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
+    <Link href={ContainerCopyMessages.defaultManagedIdentity.tooltip.href} target="_blank" rel="noopener noreferrer">
       {ContainerCopyMessages.defaultManagedIdentity.tooltip.hrefText}
     </Link>
   </Text>
@@ -36,7 +31,6 @@ const DefaultManagedIdentity: React.FC<AddManagedIdentityProps> = () => {
         <InfoTooltip content={managedIdentityTooltip} />
       </div>
       <Toggle
-        data-test="btn-toggle"
         checked={defaultSystemAssigned}
         onText={ContainerCopyMessages.toggleBtn.onText}
         offText={ContainerCopyMessages.toggleBtn.offText}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/PointInTimeRestore.tsx

@@ -13,12 +13,7 @@ import InfoTooltip from "../Components/InfoTooltip";
 const tooltipContent = (
   <Text>
     {ContainerCopyMessages.pointInTimeRestore.tooltip.content} &nbsp;
-    <Link
-      style={{ color: "var(--colorBrandForeground1)" }}
-      href={ContainerCopyMessages.pointInTimeRestore.tooltip.href}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
+    <Link href={ContainerCopyMessages.pointInTimeRestore.tooltip.href} target="_blank" rel="noopener noreferrer">
       {ContainerCopyMessages.pointInTimeRestore.tooltip.hrefText}
     </Link>
   </Text>
@@ -132,7 +127,6 @@ const PointInTimeRestore: React.FC = () => {
       <Stack.Item>
         {showRefreshButton ? (
           <PrimaryButton
-            data-test="pointInTimeRestore:RefreshBtn"
             className="fullWidth"
             text={ContainerCopyMessages.refreshButtonLabel}
             iconProps={{ iconName: "Refresh" }}
@@ -140,7 +134,6 @@ const PointInTimeRestore: React.FC = () => {
           />
         ) : (
           <PrimaryButton
-            data-test="pointInTimeRestore:PrimaryBtn"
             className="fullWidth"
             text={loading ? "" : ContainerCopyMessages.pointInTimeRestore.buttonText}
             {...(loading ? { iconProps: { iconName: "SyncStatusSolid" } } : {})}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AddManagedIdentity.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`AddManagedIdentity Snapshot Tests renders initial state correctly 1`] =
   class="ms-Stack addManagedIdentityContainer css-109"
 >
   <span
-    class="themeText css-110"
+    class="css-110"
   >
     A system-assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. Once enabled, you can grant permissions to the managed identity by using Azure role-based access control (Azure RBAC). The managed identity is authenticated with Microsoft Entra ID, so you don’t have to store any credentials in code.
      
@@ -67,7 +67,6 @@ exports[`AddManagedIdentity Snapshot Tests renders initial state correctly 1`] =
         class="ms-Toggle-background pill-117"
         data-is-focusable="true"
         data-ktp-target="true"
-        data-test="btn-toggle"
         id="Toggle1"
         role="switch"
         type="button"
@@ -93,7 +92,7 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
   class="ms-Stack addManagedIdentityContainer css-109"
 >
   <span
-    class="themeText css-110"
+    class="css-110"
   >
     A system-assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. Once enabled, you can grant permissions to the managed identity by using Azure role-based access control (Azure RBAC). The managed identity is authenticated with Microsoft Entra ID, so you don’t have to store any credentials in code.
      
@@ -155,7 +154,6 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
         class="ms-Toggle-background pill-121"
         data-is-focusable="true"
         data-ktp-target="true"
-        data-test="btn-toggle"
         id="Toggle11"
         role="switch"
         type="button"
@@ -175,12 +173,10 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
   </div>
   <div
     class="ms-Stack popover-container foreground loading css-123"
-    data-test="popover-container"
     style="max-width: 450px;"
   >
     <div
       class="ms-Overlay root-135"
-      data-test="loading-overlay"
     >
       <div
         class="ms-Spinner root-137"
@@ -196,13 +192,13 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
       </div>
     </div>
     <span
-      class="themeText css-124"
+      class="css-124"
       style="font-weight: 600;"
     >
       Enable system assigned managed identity
     </span>
     <span
-      class="themeText css-110"
+      class="css-110"
     >
       Enable system-assigned managed identity on the test-target-account. To confirm, click the "Yes" button.
     </span>
@@ -265,7 +261,7 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
   class="ms-Stack addManagedIdentityContainer css-109"
 >
   <span
-    class="themeText css-110"
+    class="css-110"
   >
     A system-assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. Once enabled, you can grant permissions to the managed identity by using Azure role-based access control (Azure RBAC). The managed identity is authenticated with Microsoft Entra ID, so you don’t have to store any credentials in code.
      
@@ -327,7 +323,6 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
         class="ms-Toggle-background pill-121"
         data-is-focusable="true"
         data-ktp-target="true"
-        data-test="btn-toggle"
         id="Toggle3"
         role="switch"
         type="button"
@@ -347,17 +342,16 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
   </div>
   <div
     class="ms-Stack popover-container foreground css-123"
-    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="themeText css-124"
+      class="css-124"
       style="font-weight: 600;"
     >
       Enable system assigned managed identity
     </span>
     <span
-      class="themeText css-110"
+      class="css-110"
     >
       Enable system-assigned managed identity on the test-target-account. To confirm, click the "Yes" button.
     </span>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AddReadPermissionToDefaultIdentity.test.tsx.snap

@@ -41,7 +41,6 @@ exports[`AddReadPermissionToDefaultIdentity Component Edge Cases should handle m
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
-          data-test="btn-toggle"
           id="Toggle17"
           role="switch"
           type="button"
@@ -104,7 +103,6 @@ exports[`AddReadPermissionToDefaultIdentity Component Edge Cases should handle m
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
-          data-test="btn-toggle"
           id="Toggle16"
           role="switch"
           type="button"
@@ -167,7 +165,6 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
-          data-test="btn-toggle"
           id="Toggle3"
           role="switch"
           type="button"
@@ -230,7 +227,6 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-119"
           data-is-focusable="true"
           data-ktp-target="true"
-          data-test="btn-toggle"
           id="Toggle1"
           role="switch"
           type="button"
@@ -318,7 +314,6 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
-          data-test="btn-toggle"
           id="Toggle0"
           role="switch"
           type="button"
@@ -381,7 +376,6 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
-          data-test="btn-toggle"
           id="Toggle2"
           role="switch"
           type="button"

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AssignPermissions.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
-    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -16,7 +15,6 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
     >
       <div
         class="ms-Stack css-112"
-        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -38,7 +36,6 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
         >
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -88,7 +85,6 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
           </div>
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -138,7 +134,6 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
-              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -147,7 +142,6 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
           </div>
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -207,7 +201,6 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
-    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -219,7 +212,6 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
     >
       <div
         class="ms-Stack css-112"
-        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -241,7 +233,6 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
         >
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -291,7 +282,6 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -341,7 +331,6 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
-              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -350,7 +339,6 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -410,7 +398,6 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
-    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -422,7 +409,6 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
     >
       <div
         class="ms-Stack css-112"
-        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -444,7 +430,6 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
         >
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -494,7 +479,6 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -544,7 +528,6 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
-              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -553,7 +536,6 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -613,7 +595,6 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
-    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -625,7 +606,6 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
     >
       <div
         class="ms-Stack css-112"
-        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -647,7 +627,6 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
         >
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -697,7 +676,6 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
           </div>
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -747,7 +725,6 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
-              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -756,7 +733,6 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
           </div>
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -816,7 +792,6 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
-    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -828,7 +803,6 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
     >
       <div
         class="ms-Stack css-112"
-        data-test="permission-group-container-crossAccountConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -850,7 +824,6 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
         >
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -902,7 +875,6 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
       </div>
       <div
         class="ms-Stack css-112"
-        data-test="permission-group-container-onlineConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -924,7 +896,6 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
         >
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -974,7 +945,6 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
-              data-test="accordion-panel"
             >
               <div
                 data-testid="online-copy-enabled"
@@ -994,7 +964,6 @@ exports[`AssignPermissions Component Permission Groups should render online migr
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
-    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -1006,7 +975,6 @@ exports[`AssignPermissions Component Permission Groups should render online migr
     >
       <div
         class="ms-Stack css-112"
-        data-test="permission-group-container-onlineConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -1028,7 +996,6 @@ exports[`AssignPermissions Component Permission Groups should render online migr
         >
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1078,7 +1045,6 @@ exports[`AssignPermissions Component Permission Groups should render online migr
           </div>
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1128,7 +1094,6 @@ exports[`AssignPermissions Component Permission Groups should render online migr
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
-              data-test="accordion-panel"
             >
               <div
                 data-testid="online-copy-enabled"
@@ -1148,7 +1113,6 @@ exports[`AssignPermissions Component Permission Groups should render permission
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
-    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -1160,7 +1124,6 @@ exports[`AssignPermissions Component Permission Groups should render permission
     >
       <div
         class="ms-Stack css-112"
-        data-test="permission-group-container-crossAccountConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -1182,7 +1145,6 @@ exports[`AssignPermissions Component Permission Groups should render permission
         >
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1232,7 +1194,6 @@ exports[`AssignPermissions Component Permission Groups should render permission
           </div>
           <div
             class="fui-AccordionItem"
-            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1282,7 +1243,6 @@ exports[`AssignPermissions Component Permission Groups should render permission
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
-              data-test="accordion-panel"
             >
               <div
                 data-testid="add-read-permission"
@@ -1302,7 +1262,6 @@ exports[`AssignPermissions Component Rendering should render without crashing wi
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
-    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -1324,7 +1283,6 @@ exports[`AssignPermissions Component Rendering should render without crashing wi
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
-    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/DefaultManagedIdentity.test.tsx.snap

@@ -41,7 +41,6 @@ exports[`DefaultManagedIdentity Edge Cases should handle missing account name gr
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
-          data-test="btn-toggle"
           id="Toggle14"
           role="switch"
           type="button"
@@ -104,7 +103,6 @@ exports[`DefaultManagedIdentity Edge Cases should handle null account 1`] = `
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
-          data-test="btn-toggle"
           id="Toggle15"
           role="switch"
           type="button"
@@ -167,7 +165,6 @@ exports[`DefaultManagedIdentity Loading States should render loading state snaps
           class="ms-Toggle-background pill-119"
           data-is-focusable="true"
           data-ktp-target="true"
-          data-test="btn-toggle"
           id="Toggle10"
           role="switch"
           type="button"
@@ -259,7 +256,6 @@ exports[`DefaultManagedIdentity Rendering should render correctly with default s
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
-          data-test="btn-toggle"
           id="Toggle0"
           role="switch"
           type="button"
@@ -322,7 +318,6 @@ exports[`DefaultManagedIdentity Toggle Interactions should render toggle with ch
           class="ms-Toggle-background pill-119"
           data-is-focusable="true"
           data-ktp-target="true"
-          data-test="btn-toggle"
           id="Toggle7"
           role="switch"
           type="button"

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/PointInTimeRestore.test.tsx.snap

@@ -56,7 +56,6 @@ exports[`PointInTimeRestore Initial Render should render correctly with default
       <button
         class="ms-Button ms-Button--primary fullWidth root-115"
         data-is-focusable="true"
-        data-test="pointInTimeRestore:PrimaryBtn"
         type="button"
       >
         <span
@@ -132,7 +131,6 @@ exports[`PointInTimeRestore Initial Render should render with empty account name
       <button
         class="ms-Button ms-Button--primary fullWidth root-115"
         data-is-focusable="true"
-        data-test="pointInTimeRestore:PrimaryBtn"
         type="button"
       >
         <span
@@ -163,7 +161,6 @@ exports[`PointInTimeRestore Snapshots should match snapshot in loading state 1`]
   >
     <div
       class="ms-Overlay root-123"
-      data-test="loading-overlay"
     >
       <div
         class="ms-Spinner root-125"
@@ -226,7 +223,6 @@ exports[`PointInTimeRestore Snapshots should match snapshot in loading state 1`]
         aria-disabled="true"
         class="ms-Button ms-Button--primary is-disabled fullWidth root-128"
         data-is-focusable="false"
-        data-test="pointInTimeRestore:PrimaryBtn"
         disabled=""
         type="button"
       >
@@ -305,7 +301,6 @@ exports[`PointInTimeRestore Snapshots should match snapshot with refresh button
       <button
         class="ms-Button ms-Button--primary fullWidth root-115"
         data-is-focusable="true"
-        data-test="pointInTimeRestore:RefreshBtn"
         type="button"
       >
         <span

src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/NavigationControls.tsx

@@ -19,21 +19,9 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
   isPreviousDisabled,
 }) => (
   <Stack horizontal tokens={{ childrenGap: 20 }}>
-    <PrimaryButton
-      data-test="copy-job-primary"
-      text={primaryBtnText}
-      onClick={onPrimary}
-      allowDisabledFocus
-      disabled={isPrimaryDisabled}
-    />
-    <DefaultButton
-      data-test="copy-job-previous"
-      text="Previous"
-      onClick={onPrevious}
-      allowDisabledFocus
-      disabled={isPreviousDisabled}
-    />
-    <DefaultButton data-test="copy-job-cancel" text="Cancel" onClick={onCancel} />
+    <PrimaryButton text={primaryBtnText} onClick={onPrimary} allowDisabledFocus disabled={isPrimaryDisabled} />
+    <DefaultButton text="Previous" onClick={onPrevious} allowDisabledFocus disabled={isPreviousDisabled} />
+    <DefaultButton text="Cancel" onClick={onCancel} />
   </Stack>
 );
 

src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/PopoverContainer.tsx

@@ -17,16 +17,15 @@ const PopoverContainer: React.FC<PopoverContainerProps> = React.memo(
   ({ isLoading = false, title, children, onPrimary, onCancel }) => {
     return (
       <Stack
-        data-test="popover-container"
         className={`popover-container foreground ${isLoading ? "loading" : ""}`}
         tokens={{ childrenGap: 20 }}
         style={{ maxWidth: 450 }}
       >
         <LoadingOverlay isLoading={isLoading} label={ContainerCopyMessages.popoverOverlaySpinnerLabel} />
-        <Text variant="mediumPlus" className="themeText" style={{ fontWeight: 600 }}>
+        <Text variant="mediumPlus" style={{ fontWeight: 600 }}>
           {title}
         </Text>
-        <Text className="themeText">{children}</Text>
+        <Text>{children}</Text>
         <Stack horizontal tokens={{ childrenGap: 20 }}>
           <PrimaryButton text={"Yes"} onClick={onPrimary} disabled={isLoading} />
           <DefaultButton text="No" onClick={onCancel} disabled={isLoading} />

src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/__snapshots__/PopoverContainer.test.tsx.snap

@@ -4,15 +4,14 @@ exports[`PopoverMessage Component Edge Cases should handle empty string title 1`
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
-    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="themeText css-110"
+      class="css-110"
       style="font-weight: 600;"
     />
     <span
-      class="themeText css-111"
+      class="css-111"
     >
       <div>
         Test content
@@ -72,11 +71,10 @@ exports[`PopoverMessage Component Edge Cases should handle null children 1`] = `
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
-    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="themeText css-110"
+      class="css-110"
       style="font-weight: 600;"
     >
       Test Title
@@ -135,11 +133,10 @@ exports[`PopoverMessage Component Edge Cases should handle undefined children 1`
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
-    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="themeText css-110"
+      class="css-110"
       style="font-weight: 600;"
     >
       Test Title
@@ -198,17 +195,16 @@ exports[`PopoverMessage Component Edge Cases should handle very long title 1`] =
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
-    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="themeText css-110"
+      class="css-110"
       style="font-weight: 600;"
     >
       This is a very long title that might cause layout issues or text wrapping in the popover component
     </span>
     <span
-      class="themeText css-111"
+      class="css-111"
     >
       <div>
         Test content
@@ -270,17 +266,16 @@ exports[`PopoverMessage Component Rendering should render correctly when visible
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
-    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="themeText css-110"
+      class="css-110"
       style="font-weight: 600;"
     >
       Test Title
     </span>
     <span
-      class="themeText css-111"
+      class="css-111"
     >
       <div>
         Test content
@@ -340,17 +335,16 @@ exports[`PopoverMessage Component Rendering should render correctly with differe
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
-    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="themeText css-110"
+      class="css-110"
       style="font-weight: 600;"
     >
       Test Title
     </span>
     <span
-      class="themeText css-111"
+      class="css-111"
     >
       <div>
         <p>
@@ -415,17 +409,16 @@ exports[`PopoverMessage Component Rendering should render correctly with differe
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
-    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="themeText css-110"
+      class="css-110"
       style="font-weight: 600;"
     >
       Custom Title
     </span>
     <span
-      class="themeText css-111"
+      class="css-111"
     >
       <div>
         Test content
@@ -485,7 +478,6 @@ exports[`PopoverMessage Component Rendering should render correctly with loading
 <div>
   <div
     class="ms-Stack popover-container foreground loading css-109"
-    data-test="popover-container"
     style="max-width: 450px;"
   >
     <div
@@ -493,13 +485,13 @@ exports[`PopoverMessage Component Rendering should render correctly with loading
       data-testid="loading-overlay"
     />
     <span
-      class="themeText css-110"
+      class="css-110"
       style="font-weight: 600;"
     >
       Test Title
     </span>
     <span
-      class="themeText css-111"
+      class="css-111"
     >
       <div>
         Test content

src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateContainer/AddCollectionPanelWrapper.tsx

@@ -41,7 +41,7 @@ const AddCollectionPanelWrapper: React.FunctionComponent<AddCollectionPanelWrapp
   return (
     <Stack className="addCollectionPanelWrapper">
       <Stack.Item className="addCollectionPanelHeader">
-        <Text className="themeText">{ContainerCopyMessages.createNewContainerSubHeading}</Text>
+        <Text>{ContainerCopyMessages.createNewContainerSubHeading}</Text>
       </Stack.Item>
       <Stack.Item className="addCollectionPanelBody">
         <AddCollectionPanel explorer={explorer} isCopyJobFlow={true} onSubmitSuccess={handleAddCollectionSuccess} />

src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateContainer/__snapshots__/AddCollectionPanelWrapper.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`AddCollectionPanelWrapper Component Rendering should match snapshot 1`]
       class="ms-StackItem addCollectionPanelHeader css-110"
     >
       <span
-        class="themeText css-111"
+        class="css-111"
       >
         Select the properties for your container.
       </span>
@@ -50,7 +50,7 @@ exports[`AddCollectionPanelWrapper Component Rendering should match snapshot wit
       class="ms-StackItem addCollectionPanelHeader css-110"
     >
       <span
-        class="themeText css-111"
+        class="css-111"
       >
         Select the properties for your container.
       </span>
@@ -91,7 +91,7 @@ exports[`AddCollectionPanelWrapper Component Rendering should match snapshot wit
       class="ms-StackItem addCollectionPanelHeader css-110"
     >
       <span
-        class="themeText css-111"
+        class="css-111"
       >
         Select the properties for your container.
       </span>
@@ -132,7 +132,7 @@ exports[`AddCollectionPanelWrapper Component Rendering should match snapshot wit
       class="ms-StackItem addCollectionPanelHeader css-110"
     >
       <span
-        class="themeText css-111"
+        class="css-111"
       >
         Select the properties for your container.
       </span>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateCopyJobScreens.tsx

@@ -22,7 +22,6 @@ const CreateCopyJobScreens: React.FC = () => {
       <Stack.Item className="createCopyJobScreensContent">
         {contextError && (
           <MessageBar
-            data-test="Panel:ErrorContainer"
             className="createCopyJobErrorMessageBar"
             messageBarType={MessageBarType.blocked}
             isMultiline={false}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/PreviewCopyJob/PreviewCopyJob.tsx

@@ -31,21 +31,17 @@ const PreviewCopyJob: React.FC = () => {
     }));
   };
   return (
-    <Stack tokens={{ childrenGap: 20 }} className="previewCopyJobContainer" data-test="Panel:PreviewCopyJob">
+    <Stack tokens={{ childrenGap: 20 }} className="previewCopyJobContainer">
       <FieldRow label={ContainerCopyMessages.jobNameLabel}>
-        <TextField data-test="job-name-textfield" value={jobName} onChange={onJobNameChange} />
+        <TextField value={jobName} onChange={onJobNameChange} />
       </FieldRow>
       <Stack>
-        <Text className="bold themeText">{ContainerCopyMessages.sourceSubscriptionLabel}</Text>
-        <Text data-test="source-subscription-name" className="themeText">
-          {copyJobState.source?.subscription?.displayName}
-        </Text>
+        <Text className="bold">{ContainerCopyMessages.sourceSubscriptionLabel}</Text>
+        <Text>{copyJobState.source?.subscription?.displayName}</Text>
       </Stack>
       <Stack>
-        <Text className="bold themeText">{ContainerCopyMessages.sourceAccountLabel}</Text>
-        <Text data-test="source-account-name" className="themeText">
-          {copyJobState.source?.account?.name}
-        </Text>
+        <Text className="bold">{ContainerCopyMessages.sourceAccountLabel}</Text>
+        <Text>{copyJobState.source?.account?.name}</Text>
       </Stack>
       <Stack>
         <DetailsList

src/Explorer/ContainerCopy/CreateCopyJob/Screens/PreviewCopyJob/__snapshots__/PreviewCopyJob.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`PreviewCopyJob should handle special characters in database and container names 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
-  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -33,7 +32,6 @@ exports[`PreviewCopyJob should handle special characters in database and contain
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
-              data-test="job-name-textfield"
               id="TextField84"
               type="text"
               value="job-with@special#chars_123"
@@ -47,13 +45,12 @@ exports[`PreviewCopyJob should handle special characters in database and contain
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source subscription
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-subscription-name"
+      class="css-125"
     >
       Test Subscription
     </span>
@@ -62,13 +59,12 @@ exports[`PreviewCopyJob should handle special characters in database and contain
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source account
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-account-name"
+      class="css-125"
     >
       test-account
     </span>
@@ -325,7 +321,6 @@ exports[`PreviewCopyJob should handle special characters in database and contain
 exports[`PreviewCopyJob should render component with cross-subscription setup 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
-  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -355,7 +350,6 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
-              data-test="job-name-textfield"
               id="TextField96"
               type="text"
               value=""
@@ -369,13 +363,12 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source subscription
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-subscription-name"
+      class="css-125"
     >
       Test Subscription
     </span>
@@ -384,13 +377,12 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source account
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-account-name"
+      class="css-125"
     >
       test-account
     </span>
@@ -647,7 +639,6 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
 exports[`PreviewCopyJob should render with default state and empty job name 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
-  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -677,7 +668,6 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
-              data-test="job-name-textfield"
               id="TextField0"
               type="text"
               value=""
@@ -691,13 +681,12 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source subscription
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-subscription-name"
+      class="css-125"
     >
       Test Subscription
     </span>
@@ -706,13 +695,12 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source account
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-account-name"
+      class="css-125"
     >
       test-account
     </span>
@@ -969,7 +957,6 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
 exports[`PreviewCopyJob should render with long subscription and account names 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
-  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -999,7 +986,6 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
-              data-test="job-name-textfield"
               id="TextField60"
               type="text"
               value=""
@@ -1013,13 +999,12 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source subscription
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-subscription-name"
+      class="css-125"
     >
       This is a very long subscription name that might cause display issues if not handled properly
     </span>
@@ -1028,13 +1013,12 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source account
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-account-name"
+      class="css-125"
     >
       this-is-a-very-long-database-account-name-that-might-cause-display-issues
     </span>
@@ -1291,7 +1275,6 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
 exports[`PreviewCopyJob should render with missing source account information 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
-  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -1321,7 +1304,6 @@ exports[`PreviewCopyJob should render with missing source account information 1`
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
-              data-test="job-name-textfield"
               id="TextField36"
               type="text"
               value=""
@@ -1335,13 +1317,12 @@ exports[`PreviewCopyJob should render with missing source account information 1`
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source subscription
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-subscription-name"
+      class="css-125"
     >
       Test Subscription
     </span>
@@ -1350,7 +1331,7 @@ exports[`PreviewCopyJob should render with missing source account information 1`
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source account
     </span>
@@ -1607,7 +1588,6 @@ exports[`PreviewCopyJob should render with missing source account information 1`
 exports[`PreviewCopyJob should render with missing source subscription information 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
-  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -1637,7 +1617,6 @@ exports[`PreviewCopyJob should render with missing source subscription informati
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
-              data-test="job-name-textfield"
               id="TextField24"
               type="text"
               value=""
@@ -1651,7 +1630,7 @@ exports[`PreviewCopyJob should render with missing source subscription informati
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source subscription
     </span>
@@ -1660,13 +1639,12 @@ exports[`PreviewCopyJob should render with missing source subscription informati
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source account
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-account-name"
+      class="css-125"
     >
       test-account
     </span>
@@ -1923,7 +1901,6 @@ exports[`PreviewCopyJob should render with missing source subscription informati
 exports[`PreviewCopyJob should render with online migration type 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
-  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -1953,7 +1930,6 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
-              data-test="job-name-textfield"
               id="TextField72"
               type="text"
               value="online-migration-job"
@@ -1967,13 +1943,12 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source subscription
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-subscription-name"
+      class="css-125"
     >
       Test Subscription
     </span>
@@ -1982,13 +1957,12 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source account
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-account-name"
+      class="css-125"
     >
       test-account
     </span>
@@ -2245,7 +2219,6 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
 exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
-  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -2275,7 +2248,6 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
-              data-test="job-name-textfield"
               id="TextField12"
               type="text"
               value="custom-job-name-123"
@@ -2289,13 +2261,12 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source subscription
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-subscription-name"
+      class="css-125"
     >
       Test Subscription
     </span>
@@ -2304,13 +2275,12 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source account
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-account-name"
+      class="css-125"
     >
       test-account
     </span>
@@ -2567,7 +2537,6 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
 exports[`PreviewCopyJob should render with undefined database and container names 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
-  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -2597,7 +2566,6 @@ exports[`PreviewCopyJob should render with undefined database and container name
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
-              data-test="job-name-textfield"
               id="TextField48"
               type="text"
               value=""
@@ -2611,13 +2579,12 @@ exports[`PreviewCopyJob should render with undefined database and container name
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source subscription
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-subscription-name"
+      class="css-125"
     >
       Test Subscription
     </span>
@@ -2626,13 +2593,12 @@ exports[`PreviewCopyJob should render with undefined database and container name
     class="ms-Stack css-124"
   >
     <span
-      class="bold themeText css-125"
+      class="bold css-125"
     >
       Source account
     </span>
     <span
-      class="themeText css-125"
-      data-test="source-account-name"
+      class="css-125"
     >
       test-account
     </span>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/AccountDropdown.test.tsx

@@ -9,7 +9,7 @@ import ContainerCopyMessages from "../../../../ContainerCopyMessages";
 import { CopyJobContext } from "../../../../Context/CopyJobContext";
 import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
 import { CopyJobContextProviderType, CopyJobContextState } from "../../../../Types/CopyJobTypes";
-import { AccountDropdown, normalizeAccountId } from "./AccountDropdown";
+import { AccountDropdown } from "./AccountDropdown";
 
 jest.mock("../../../../../../hooks/useDatabaseAccounts");
 jest.mock("../../../../../../UserContext", () => ({
@@ -202,16 +202,13 @@ describe("AccountDropdown", () => {
 
       const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
       const newState = stateUpdateFunction(mockCopyJobState);
-      expect(newState.source.account).toEqual({
-        ...mockDatabaseAccount1,
-        id: normalizeAccountId(mockDatabaseAccount1.id),
-      });
+      expect(newState.source.account).toBe(mockDatabaseAccount1);
     });
 
     it("should auto-select predefined account from userContext if available", async () => {
       const userContextAccount = {
         ...mockDatabaseAccount2,
-        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDB/databaseAccounts/account2",
+        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/account2",
       };
 
       (userContext as any).databaseAccount = userContextAccount;
@@ -226,10 +223,7 @@ describe("AccountDropdown", () => {
 
       const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
       const newState = stateUpdateFunction(mockCopyJobState);
-      expect(newState.source.account).toEqual({
-        ...mockDatabaseAccount2,
-        id: normalizeAccountId(mockDatabaseAccount2.id),
-      });
+      expect(newState.source.account).toBe(mockDatabaseAccount2);
     });
 
     it("should keep current account if it exists in the filtered list", async () => {
@@ -254,16 +248,7 @@ describe("AccountDropdown", () => {
 
       const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
       const newState = stateUpdateFunction(contextWithSelectedAccount.copyJobState);
-      expect(newState).toEqual({
-        ...contextWithSelectedAccount.copyJobState,
-        source: {
-          ...contextWithSelectedAccount.copyJobState.source,
-          account: {
-            ...mockDatabaseAccount1,
-            id: normalizeAccountId(mockDatabaseAccount1.id),
-          },
-        },
-      });
+      expect(newState).toBe(contextWithSelectedAccount.copyJobState);
     });
 
     it("should handle account change when user selects different account", async () => {
@@ -287,7 +272,7 @@ describe("AccountDropdown", () => {
     it("should normalize account ID for Portal platform", () => {
       const portalAccount = {
         ...mockDatabaseAccount1,
-        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDB/databaseAccounts/account1",
+        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/account1",
       };
 
       (configContext as any).platform = Platform.Portal;

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/AccountDropdown.tsx

@@ -12,7 +12,7 @@ import FieldRow from "../../Components/FieldRow";
 
 interface AccountDropdownProps {}
 
-export const normalizeAccountId = (id: string = "") => {
+const normalizeAccountId = (id: string) => {
   if (configContext.platform === Platform.Portal) {
     return id.replace("/Microsoft.DocumentDb/", "/Microsoft.DocumentDB/");
   } else if (configContext.platform === Platform.Hosted) {
@@ -27,12 +27,7 @@ export const AccountDropdown: React.FC<AccountDropdownProps> = () => {
 
   const selectedSubscriptionId = copyJobState?.source?.subscription?.subscriptionId;
   const allAccounts: DatabaseAccount[] = useDatabaseAccounts(selectedSubscriptionId);
-  const sqlApiOnlyAccounts = (allAccounts || [])
-    .filter((account) => apiType(account) === "SQL")
-    .map((account) => ({
-      ...account,
-      id: normalizeAccountId(account.id),
-    }));
+  const sqlApiOnlyAccounts: DatabaseAccount[] = (allAccounts || []).filter((account) => apiType(account) === "SQL");
 
   const updateCopyJobState = (newAccount: DatabaseAccount) => {
     setCopyJobState((prevState) => {
@@ -52,7 +47,7 @@ export const AccountDropdown: React.FC<AccountDropdownProps> = () => {
   useEffect(() => {
     if (sqlApiOnlyAccounts && sqlApiOnlyAccounts.length > 0 && selectedSubscriptionId) {
       const currentAccountId = copyJobState?.source?.account?.id;
-      const predefinedAccountId = normalizeAccountId(userContext.databaseAccount?.id);
+      const predefinedAccountId = userContext.databaseAccount?.id;
       const selectedAccountId = currentAccountId || predefinedAccountId;
 
       const targetAccount: DatabaseAccount | null =
@@ -63,7 +58,7 @@ export const AccountDropdown: React.FC<AccountDropdownProps> = () => {
 
   const accountOptions =
     sqlApiOnlyAccounts?.map((account) => ({
-      key: account.id,
+      key: normalizeAccountId(account.id),
       text: account.name,
       data: account,
     })) || [];

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/MigrationTypeCheckbox.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
-import { Checkbox, ICheckboxStyles, Stack } from "@fluentui/react";
+import { Checkbox, Stack } from "@fluentui/react";
 import React from "react";
 import ContainerCopyMessages from "../../../../ContainerCopyMessages";
 
@@ -9,25 +9,8 @@ interface MigrationTypeCheckboxProps {
   onChange: (_ev?: React.FormEvent, checked?: boolean) => void;
 }
 
-const checkboxStyles: ICheckboxStyles = {
-  text: { color: "var(--colorNeutralForeground1)" },
-  checkbox: { borderColor: "var(--colorNeutralStroke1)" },
-  root: {
-    selectors: {
-      ":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
-    },
-  },
-};
-
-export const MigrationTypeCheckbox: React.FC<MigrationTypeCheckboxProps> = React.memo(({ checked, onChange }) => {
-  return (
-    <Stack horizontal horizontalAlign="space-between" className="migrationTypeRow" data-test="migration-type-checkbox">
-      <Checkbox
-        label={ContainerCopyMessages.migrationTypeCheckboxLabel}
-        checked={checked}
-        onChange={onChange}
-        styles={checkboxStyles}
-      />
+export const MigrationTypeCheckbox: React.FC<MigrationTypeCheckboxProps> = React.memo(({ checked, onChange }) => (
+  <Stack horizontal horizontalAlign="space-between" className="migrationTypeRow">
+    <Checkbox label={ContainerCopyMessages.migrationTypeCheckboxLabel} checked={checked} onChange={onChange} />
   </Stack>
-  );
-});
+));

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/__snapshots__/MigrationTypeCheckbox.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`MigrationTypeCheckbox Component Rendering should render in checked state 1`] = `
 <div
   class="ms-Stack migrationTypeRow css-109"
-  data-test="migration-type-checkbox"
 >
   <div
     class="ms-Checkbox is-checked is-enabled root-119"
@@ -44,7 +43,6 @@ exports[`MigrationTypeCheckbox Component Rendering should render in checked stat
 exports[`MigrationTypeCheckbox Component Rendering should render with default props (unchecked state) 1`] = `
 <div
   class="ms-Stack migrationTypeRow css-109"
-  data-test="migration-type-checkbox"
 >
   <div
     class="ms-Checkbox is-enabled root-110"

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/SelectAccount.tsx

@@ -21,7 +21,7 @@ const SelectAccount = React.memo(() => {
 
   return (
     <Stack data-test="Panel:SelectAccountContainer" className="selectAccountContainer" tokens={{ childrenGap: 15 }}>
-      <Text className="themeText">{ContainerCopyMessages.selectAccountDescription}</Text>
+      <Text>{ContainerCopyMessages.selectAccountDescription}</Text>
 
       <SubscriptionDropdown />
 

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/__snapshots__/SelectAccount.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`SelectAccount Component Rendering should render correctly with snapshot
   data-test="Panel:SelectAccountContainer"
 >
   <span
-    class="themeText css-110"
+    class="css-110"
   >
     Please select a source account from which to copy.
   </span>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/SelectSourceAndTargetContainers.tsx

@@ -47,12 +47,8 @@ const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourc
   const onDropdownChange = dropDownChangeHandler(setCopyJobState);
 
   return (
-    <Stack
-      data-test="Panel:SelectSourceAndTargetContainers"
-      className="selectSourceAndTargetContainers"
-      tokens={{ childrenGap: 25 }}
-    >
-      <span className="themeText">{ContainerCopyMessages.selectSourceAndTargetContainersDescription}</span>
+    <Stack className="selectSourceAndTargetContainers" tokens={{ childrenGap: 25 }}>
+      <span>{ContainerCopyMessages.selectSourceAndTargetContainersDescription}</span>
       <DatabaseContainerSection
         heading={ContainerCopyMessages.sourceContainerSubHeading}
         databaseOptions={sourceDatabaseOptions}
@@ -63,7 +59,6 @@ const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourc
         selectedContainer={source?.containerId}
         containerDisabled={!source?.databaseId}
         containerOnChange={onDropdownChange("sourceContainer")}
-        sectionType="source"
       />
       <DatabaseContainerSection
         heading={ContainerCopyMessages.targetContainerSubHeading}
@@ -76,7 +71,6 @@ const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourc
         containerDisabled={!target?.databaseId}
         containerOnChange={onDropdownChange("targetContainer")}
         handleOnDemandCreateContainer={showAddCollectionPanel}
-        sectionType="target"
       />
     </Stack>
   );

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/components/DatabaseContainerSection.test.tsx

@@ -32,7 +32,6 @@ describe("DatabaseContainerSection", () => {
     selectedContainer: "container1",
     containerDisabled: false,
     containerOnChange: mockContainerOnChange,
-    sectionType: "source",
   };
 
   beforeEach(() => {
@@ -293,7 +292,6 @@ describe("DatabaseContainerSection", () => {
         containerOptions: mockContainerOptions,
         selectedContainer: "container1",
         containerOnChange: mockContainerOnChange,
-        sectionType: "source",
       };
 
       render(<DatabaseContainerSection {...minimalProps} />);
@@ -395,7 +393,6 @@ describe("DatabaseContainerSection", () => {
         containerOptions: [{ key: "c1", text: "Container 1", data: { id: "c1" } }],
         selectedContainer: "c1",
         containerOnChange: jest.fn(),
-        sectionType: "source",
       };
 
       const { container } = render(<DatabaseContainerSection {...minimalProps} />);
@@ -414,7 +411,6 @@ describe("DatabaseContainerSection", () => {
         containerDisabled: false,
         containerOnChange: jest.fn(),
         handleOnDemandCreateContainer: jest.fn(),
-        sectionType: "target",
       };
 
       const { container } = render(<DatabaseContainerSection {...fullProps} />);
@@ -432,7 +428,6 @@ describe("DatabaseContainerSection", () => {
         selectedContainer: "container1",
         containerDisabled: true,
         containerOnChange: jest.fn(),
-        sectionType: "target",
       };
 
       const { container } = render(<DatabaseContainerSection {...disabledProps} />);
@@ -448,7 +443,6 @@ describe("DatabaseContainerSection", () => {
         containerOptions: [],
         selectedContainer: "",
         containerOnChange: jest.fn(),
-        sectionType: "target",
       };
 
       const { container } = render(<DatabaseContainerSection {...emptyOptionsProps} />);

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/components/DatabaseContainerSection.tsx

@@ -15,7 +15,6 @@ export const DatabaseContainerSection = ({
   containerDisabled,
   containerOnChange,
   handleOnDemandCreateContainer,
-  sectionType,
 }: DatabaseContainerSectionProps) => (
   <Stack tokens={{ childrenGap: 15 }} className="databaseContainerSection">
     <label className="subHeading">{heading}</label>
@@ -28,7 +27,6 @@ export const DatabaseContainerSection = ({
         disabled={!!databaseDisabled}
         selectedKey={selectedDatabase}
         onChange={databaseOnChange}
-        data-test={`${sectionType}-databaseDropdown`}
       />
     </FieldRow>
     <FieldRow label={ContainerCopyMessages.containerDropdownLabel}>
@@ -41,14 +39,9 @@ export const DatabaseContainerSection = ({
           disabled={!!containerDisabled}
           selectedKey={selectedContainer}
           onChange={containerOnChange}
-          data-test={`${sectionType}-containerDropdown`}
         />
         {handleOnDemandCreateContainer && (
-          <ActionButton
-            className="create-container-link-btn"
-            style={{ color: "var(--colorBrandForeground1)" }}
-            onClick={() => handleOnDemandCreateContainer()}
-          >
+          <ActionButton className="create-container-link-btn" onClick={() => handleOnDemandCreateContainer()}>
             {ContainerCopyMessages.createContainerButtonLabel}
           </ActionButton>
         )}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/components/__snapshots__/DatabaseContainerSection.test.tsx.snap

@@ -37,7 +37,6 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with all pro
           class="ms-Dropdown is-required dropdown-112"
           data-is-focusable="true"
           data-ktp-target="true"
-          data-test="target-databaseDropdown"
           id="Dropdown98"
           role="combobox"
           tabindex="0"
@@ -95,7 +94,6 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with all pro
             class="ms-Dropdown is-required dropdown-112"
             data-is-focusable="true"
             data-ktp-target="true"
-            data-test="target-containerDropdown"
             id="Dropdown99"
             role="combobox"
             tabindex="0"
@@ -184,7 +182,6 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with disable
           class="ms-Dropdown is-disabled is-required dropdown-143"
           data-is-focusable="false"
           data-ktp-target="true"
-          data-test="target-databaseDropdown"
           id="Dropdown103"
           role="combobox"
           tabindex="-1"
@@ -242,7 +239,6 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with disable
             class="ms-Dropdown is-disabled is-required dropdown-143"
             data-is-focusable="false"
             data-ktp-target="true"
-            data-test="target-containerDropdown"
             id="Dropdown104"
             role="combobox"
             tabindex="-1"
@@ -310,7 +306,6 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with empty o
           class="ms-Dropdown is-required dropdown-112"
           data-is-focusable="true"
           data-ktp-target="true"
-          data-test="target-databaseDropdown"
           id="Dropdown105"
           role="combobox"
           tabindex="0"
@@ -368,7 +363,6 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with empty o
             class="ms-Dropdown is-required dropdown-112"
             data-is-focusable="true"
             data-ktp-target="true"
-            data-test="target-containerDropdown"
             id="Dropdown106"
             role="combobox"
             tabindex="0"
@@ -436,7 +430,6 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with minimal
           class="ms-Dropdown is-required dropdown-112"
           data-is-focusable="true"
           data-ktp-target="true"
-          data-test="source-databaseDropdown"
           id="Dropdown96"
           role="combobox"
           tabindex="0"
@@ -494,7 +487,6 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with minimal
             class="ms-Dropdown is-required dropdown-112"
             data-is-focusable="true"
             data-ktp-target="true"
-            data-test="source-containerDropdown"
             id="Dropdown97"
             role="combobox"
             tabindex="0"

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

@@ -83,7 +83,6 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
 
   return (
     <IconButton
-      data-test={`CopyJobActionMenu/Button:${job.Name}`}
       role="button"
       iconProps={{ iconName: "More", styles: { root: { fontSize: "20px", fontWeight: "bold" } } }}
       menuProps={{ items: getMenuItems() }}

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

@@ -1,6 +1,5 @@
 import { DetailsList, DetailsListLayoutMode, IColumn, Stack, Text } from "@fluentui/react";
 import React, { memo } from "react";
-import { useThemeStore } from "../../../../hooks/useTheme";
 import ContainerCopyMessages from "../../ContainerCopyMessages";
 import { CopyJobStatusType } from "../../Enums/CopyJobEnums";
 import { CopyJobType } from "../../Types/CopyJobTypes";
@@ -64,19 +63,6 @@ const getCopyJobDetailsListColumns = (): IColumn[] => {
 };
 
 const CopyJobDetails: React.FC<CopyJobDetailsProps> = ({ job }) => {
-  const isDarkMode = useThemeStore((state) => state.isDarkMode);
-
-  const errorMessageStyle: React.CSSProperties = {
-    whiteSpace: "pre-wrap",
-    ...(isDarkMode && {
-      whiteSpace: "pre-wrap",
-      backgroundColor: "var(--colorNeutralBackground2)",
-      color: "var(--colorNeutralForeground1)",
-      padding: "10px",
-      borderRadius: "4px",
-    }),
-  };
-
   const selectedContainers = [
     {
       sourceContainerName: job?.Source?.containerName || "N/A",
@@ -91,10 +77,10 @@ const CopyJobDetails: React.FC<CopyJobDetailsProps> = ({ job }) => {
     <Stack className="copyJobDetailsContainer" tokens={{ childrenGap: 15 }} data-testid="copy-job-details">
       {job.Error ? (
         <Stack.Item data-testid="error-stack" style={sectionCss.verticalAlign}>
-          <Text className="bold themeText" style={sectionCss.headingText}>
+          <Text className="bold" style={sectionCss.headingText}>
             {ContainerCopyMessages.errorTitle}
           </Text>
-          <Text as="pre" style={errorMessageStyle}>
+          <Text as="pre" style={{ whiteSpace: "pre-wrap" }}>
             {job.Error.message}
           </Text>
         </Stack.Item>
@@ -102,16 +88,16 @@ const CopyJobDetails: React.FC<CopyJobDetailsProps> = ({ job }) => {
       <Stack.Item data-testid="selectedcollection-stack">
         <Stack tokens={{ childrenGap: 15 }}>
           <Stack.Item style={sectionCss.verticalAlign}>
-            <Text className="bold themeText">{ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime}</Text>
-            <Text className="themeText">{job.LastUpdatedTime}</Text>
+            <Text className="bold">{ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime}</Text>
+            <Text>{job.LastUpdatedTime}</Text>
           </Stack.Item>
           <Stack.Item style={sectionCss.verticalAlign}>
-            <Text className="bold themeText">{ContainerCopyMessages.sourceAccountLabel}</Text>
-            <Text className="themeText">{job.Source?.remoteAccountName}</Text>
+            <Text className="bold">{ContainerCopyMessages.sourceAccountLabel}</Text>
+            <Text>{job.Source?.remoteAccountName}</Text>
           </Stack.Item>
           <Stack.Item style={sectionCss.verticalAlign}>
-            <Text className="bold themeText">{ContainerCopyMessages.MonitorJobs.Columns.mode}</Text>
-            <Text className="themeText">{job.Mode}</Text>
+            <Text className="bold">{ContainerCopyMessages.MonitorJobs.Columns.mode}</Text>
+            <Text>{job.Mode}</Text>
           </Stack.Item>
         </Stack>
       </Stack.Item>

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

@@ -1,14 +1,30 @@
-import { FontIcon, mergeStyles, Spinner, SpinnerSize, Stack, Text } from "@fluentui/react";
+import { FontIcon, getTheme, mergeStyles, mergeStyleSets, Spinner, SpinnerSize, Stack, Text } from "@fluentui/react";
 import PropTypes from "prop-types";
 import React from "react";
 import ContainerCopyMessages from "../../ContainerCopyMessages";
 import { CopyJobStatusType } from "../../Enums/CopyJobEnums";
 
+const theme = getTheme();
+
 const iconClass = mergeStyles({
   fontSize: "16px",
   marginRight: "8px",
 });
 
+const classNames = mergeStyleSets({
+  [CopyJobStatusType.Pending]: [{ color: theme.semanticColors.bodySubtext }, iconClass],
+  [CopyJobStatusType.InProgress]: [{ color: theme.palette.themePrimary }, iconClass],
+  [CopyJobStatusType.Running]: [{ color: theme.palette.themePrimary }, iconClass],
+  [CopyJobStatusType.Partitioning]: [{ color: theme.palette.themePrimary }, iconClass],
+  [CopyJobStatusType.Paused]: [{ color: theme.palette.themePrimary }, iconClass],
+  [CopyJobStatusType.Skipped]: [{ color: theme.semanticColors.bodySubtext }, iconClass],
+  [CopyJobStatusType.Cancelled]: [{ color: theme.semanticColors.bodySubtext }, iconClass],
+  [CopyJobStatusType.Failed]: [{ color: theme.semanticColors.errorIcon }, iconClass],
+  [CopyJobStatusType.Faulted]: [{ color: theme.semanticColors.errorIcon }, iconClass],
+  [CopyJobStatusType.Completed]: [{ color: theme.semanticColors.successIcon }, iconClass],
+  unknown: [{ color: theme.semanticColors.bodySubtext }, iconClass],
+});
+
 const iconMap: Partial<Record<CopyJobStatusType, string>> = {
   [CopyJobStatusType.Pending]: "Clock",
   [CopyJobStatusType.Paused]: "CirclePause",
@@ -19,17 +35,6 @@ const iconMap: Partial<Record<CopyJobStatusType, string>> = {
   [CopyJobStatusType.Completed]: "CompletedSolid",
 };
 
-// Icon colors for different statuses
-const statusIconColors: Partial<Record<CopyJobStatusType, string>> = {
-  [CopyJobStatusType.Failed]: "var(--colorPaletteRedForeground1)",
-  [CopyJobStatusType.Faulted]: "var(--colorPaletteRedForeground1)",
-  [CopyJobStatusType.Completed]: "var(--colorSuccessGreen)",
-  [CopyJobStatusType.InProgress]: "var(--colorBrandForeground1)",
-  [CopyJobStatusType.Running]: "var(--colorBrandForeground1)",
-  [CopyJobStatusType.Partitioning]: "var(--colorBrandForeground1)",
-  [CopyJobStatusType.Paused]: "var(--colorBrandForeground1)",
-};
-
 export interface CopyJobStatusWithIconProps {
   status: CopyJobStatusType;
 }
@@ -42,17 +47,19 @@ const CopyJobStatusWithIcon: React.FC<CopyJobStatusWithIconProps> = React.memo((
     CopyJobStatusType.InProgress,
     CopyJobStatusType.Partitioning,
   ].includes(status);
-  const iconColor = statusIconColors[status] || "var(--colorNeutralForeground2)";
-  const iconStyle = mergeStyles(iconClass, { color: iconColor });
 
   return (
     <Stack horizontal verticalAlign="center">
       {isSpinnerStatus ? (
         <Spinner size={SpinnerSize.small} style={{ marginRight: "8px" }} />
       ) : (
-        <FontIcon aria-label={status} iconName={iconMap[status] || "UnknownSolid"} className={iconStyle} />
+        <FontIcon
+          aria-label={status}
+          iconName={iconMap[status] || "UnknownSolid"}
+          className={classNames[status] || classNames.unknown}
+        />
       )}
-      <Text className="themeText">{statusText}</Text>
+      <Text>{statusText}</Text>
     </Stack>
   );
 });

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

@@ -15,8 +15,6 @@ import {
 } from "@fluentui/react";
 import React, { useEffect } from "react";
 import Pager from "../../../../Common/Pager";
-import { useThemeStore } from "../../../../hooks/useTheme";
-import { getThemeTokens } from "../../../Theme/ThemeUtil";
 import { openCopyJobDetailsPanel } from "../../Actions/CopyJobActions";
 import { CopyJobType, HandleJobActionClickType } from "../../Types/CopyJobTypes";
 import { getColumns } from "./CopyJobColumns";
@@ -28,15 +26,13 @@ interface CopyJobsListProps {
 }
 
 const styles = {
-  container: { height: "100%" } as React.CSSProperties,
+  container: { height: "calc(100vh - 25em)" } as React.CSSProperties,
   stackItem: { position: "relative", marginBottom: "20px" } as React.CSSProperties,
 };
 
 const PAGE_SIZE = 10;
 
 const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pageSize = PAGE_SIZE }) => {
-  const isDarkMode = useThemeStore((state) => state.isDarkMode);
-  const themeTokens = getThemeTokens(isDarkMode);
   const [startIndex, setStartIndex] = React.useState(0);
   const [sortedJobs, setSortedJobs] = React.useState<CopyJobType[]>(jobs);
   const [sortedColumnKey, setSortedColumnKey] = React.useState<string | undefined>(undefined);
@@ -84,7 +80,6 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
         <Stack.Item verticalFill={true} grow={1} shrink={1} style={styles.stackItem}>
           <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
             <ShimmeredDetailsList
-              className="CopyJobListContainer"
               onRenderRow={_onRenderRow}
               checkboxVisibility={2}
               columns={columns}
@@ -92,28 +87,11 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
               enableShimmer={false}
               constrainMode={ConstrainMode.unconstrained}
               layoutMode={DetailsListLayoutMode.justified}
-              onRenderDetailsHeader={(props, defaultRender) => {
-                const bgColor = themeTokens.colorNeutralBackground3;
-                const textColor = themeTokens.colorNeutralForeground1;
-                return (
-                  <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced stickyBackgroundColor={bgColor}>
-                    <div style={{ backgroundColor: bgColor }}>
-                      {defaultRender({
-                        ...props,
-                        styles: {
-                          root: {
-                            backgroundColor: bgColor,
-                            selectors: {
-                              ".ms-DetailsHeader-cellTitle": { color: textColor },
-                              ".ms-DetailsHeader-cellName": { color: textColor },
-                            },
-                          },
-                        },
-                      })}
-                    </div>
+              onRenderDetailsHeader={(props, defaultRender) => (
+                <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
+                  {defaultRender({ ...props })}
                 </Sticky>
-                );
-              }}
+              )}
             />
           </ScrollablePane>
         </Stack.Item>

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/__snapshots__/CopyJobStatusWithIcon.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`CopyJobStatusWithIcon Spinner Status Types renders InProgress with spin
     />
   </div>
   <span
-    class="themeText css-112"
+    class="css-112"
   >
     Running
   </span>
@@ -33,7 +33,7 @@ exports[`CopyJobStatusWithIcon Spinner Status Types renders Partitioning with sp
     />
   </div>
   <span
-    class="themeText css-112"
+    class="css-112"
   >
     Running
   </span>
@@ -53,7 +53,7 @@ exports[`CopyJobStatusWithIcon Spinner Status Types renders Running with spinner
     />
   </div>
   <span
-    class="themeText css-112"
+    class="css-112"
   >
     Running
   </span>
@@ -66,7 +66,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Cancelled"
-    class="ms-Icon root-105 css-118 mocked-styles"
+    class="ms-Icon root-105 css-118 mocked-style-Cancelled"
     data-icon-name="StatusErrorFull"
     role="img"
     style="font-family: "FabricMDL2Icons-4";"
@@ -74,7 +74,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="themeText css-112"
+    class="css-112"
   >
     Cancelled
   </span>
@@ -87,7 +87,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Completed"
-    class="ms-Icon root-105 css-120 mocked-styles"
+    class="ms-Icon root-105 css-120 mocked-style-Completed"
     data-icon-name="CompletedSolid"
     role="img"
     style="font-family: "FabricMDL2Icons-5";"
@@ -95,7 +95,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="themeText css-112"
+    class="css-112"
   >
     Completed
   </span>
@@ -108,7 +108,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Failed"
-    class="ms-Icon root-105 css-118 mocked-styles"
+    class="ms-Icon root-105 css-118 mocked-style-Failed"
     data-icon-name="StatusErrorFull"
     role="img"
     style="font-family: "FabricMDL2Icons-4";"
@@ -116,7 +116,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="themeText css-112"
+    class="css-112"
   >
     Failed
   </span>
@@ -129,7 +129,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Faulted"
-    class="ms-Icon root-105 css-118 mocked-styles"
+    class="ms-Icon root-105 css-118 mocked-style-Faulted"
     data-icon-name="StatusErrorFull"
     role="img"
     style="font-family: "FabricMDL2Icons-4";"
@@ -137,7 +137,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="themeText css-112"
+    class="css-112"
   >
     Failed
   </span>
@@ -150,7 +150,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Paused"
-    class="ms-Icon root-105 css-114 mocked-styles"
+    class="ms-Icon root-105 css-114 mocked-style-Paused"
     data-icon-name="CirclePause"
     role="img"
     style="font-family: "FabricMDL2Icons-11";"
@@ -158,7 +158,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="themeText css-112"
+    class="css-112"
   >
     Paused
   </span>
@@ -171,7 +171,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Pending"
-    class="ms-Icon root-105 css-111 mocked-styles"
+    class="ms-Icon root-105 css-111 mocked-style-Pending"
     data-icon-name="Clock"
     role="img"
     style="font-family: "FabricMDL2Icons-2";"
@@ -179,7 +179,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="themeText css-112"
+    class="css-112"
   >
     Queued
   </span>
@@ -192,7 +192,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Skipped"
-    class="ms-Icon root-105 css-116 mocked-styles"
+    class="ms-Icon root-105 css-116 mocked-style-Skipped"
     data-icon-name="StatusCircleBlock2"
     role="img"
     style="font-family: "FabricMDL2Icons-9";"
@@ -200,7 +200,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="themeText css-112"
+    class="css-112"
   >
     Cancelled
   </span>

src/Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobs.tsx

@@ -10,7 +10,7 @@ import CopyJobsNotFound from "../MonitorCopyJobs/Components/CopyJobs.NotFound";
 import { CopyJobType, JobActionUpdatorType } from "../Types/CopyJobTypes";
 import CopyJobsList from "./Components/CopyJobsList";
 
-const FETCH_INTERVAL = 2 * 60 * 1000;
+const FETCH_INTERVAL_MS = 30 * 1000;
 const SHIMMER_INDENT_LEVELS: IndentLevel[] = Array(7).fill({ level: 0, width: "100%" });
 
 interface MonitorCopyJobsProps {
@@ -57,7 +57,7 @@ const MonitorCopyJobs = forwardRef<MonitorCopyJobsRef, MonitorCopyJobsProps>(({
 
   useEffect(() => {
     fetchJobs();
-    const intervalId = setInterval(fetchJobs, FETCH_INTERVAL);
+    const intervalId = setInterval(fetchJobs, FETCH_INTERVAL_MS);
 
     return () => clearInterval(intervalId);
   }, [fetchJobs]);

src/Explorer/ContainerCopy/Types/CopyJobTypes.ts

@@ -49,7 +49,6 @@ export interface DatabaseContainerSectionProps {
   containerDisabled?: boolean;
   containerOnChange: (ev: React.FormEvent<HTMLDivElement>, option: DropdownOptionType) => void;
   handleOnDemandCreateContainer?: () => void;
-  sectionType: "source" | "target";
 }
 
 export interface CopyJobContextState {

src/Explorer/ContainerCopy/containerCopyStyles.less

@@ -1,30 +1,6 @@
 @import "../../../less/Common/Constants.less";
 
-// Common theme-aware classes
-.themeText {
-  color: var(--colorNeutralForeground1);
-}
-
-.themeTextSecondary {
-  color: var(--colorNeutralForeground2);
-}
-
-.themeLinkText {
-  color: var(--colorBrandForeground1);
-}
-
-.themeBackground {
-  background-color: var(--colorNeutralBackground1);
-}
-
-.themeBackgroundSecondary {
-  background-color: var(--colorNeutralBackground2);
-}
-
 #containerCopyWrapper {
-  background-color: var(--colorNeutralBackground1);
-  color: var(--colorNeutralForeground1);
-
   .centerContent {
     justify-content: center;
     align-items: center;
@@ -33,31 +9,21 @@
     .noCopyJobsMessage {
       font-weight: 600;
       margin: 0 auto;
-      color: var(--colorNeutralForeground2);
+      color: @FocusColor;
     }
     button.createCopyJobButton {
-      color: var(--colorBrandForeground1);
+      color: @LinkColor;
     }
   }
 }
 .createCopyJobScreensContainer {
   height: 100%;
   padding: 1em 1.5em;
-  background-color: var(--colorNeutralBackground1);
-  color: var(--colorNeutralForeground1);
 
   .pointInTimeRestoreContainer, .onlineCopyContainer {
     position: relative;
   }
   
-  .toggle-label {
-    color: var(--colorNeutralForeground1);
-  }
-
-  .accordionHeaderText {
-    color: var(--colorNeutralForeground1);
-  }
-  
   label {
     padding: 0;
   }
@@ -105,7 +71,7 @@
   }
   .foreground {
     z-index: 10;
-    background-color: var(--colorNeutralBackground2);
+    background-color: #f9f9f9;
     padding: 20px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     transform: translate(0%, -9%);
@@ -114,40 +80,14 @@
   .createCopyJobErrorMessageBar {
     margin-bottom: 2em;
   }
-  body.isDarkMode & {
-    .ms-TooltipHost .ms-Image {
-      filter: invert(1);
-    }
-
-    .ms-TextField {
-      .ms-TextField-fieldGroup {
-        background-color: var(--colorNeutralBackground1);
-        border-color: var(--colorNeutralStroke1);
-      }
-
-      .ms-TextField-field {
-        color: var(--colorNeutralForeground1);
-        background-color: var(--colorNeutralBackground1);
-
-        &::placeholder {
-          color: var(--colorNeutralForeground4);
-        }
-      }
-
-      .ms-Label {
-        color: var(--colorNeutralForeground1);
-      }
-    }
-  }
   .create-container-link-btn {
     padding: 0;
     height: 25px;
-    color: var(--colorBrandForeground1);
+    color: @LinkColor;
 
     &:focus {
       outline: none;
     }
-
   }
 
   /* Create collection panel */
@@ -165,6 +105,7 @@
   width: 100%;
   max-width: 100%;
   margin: 0 auto;
+
   .ms-DetailsList {
     width: 100%;
 
@@ -173,33 +114,33 @@
         padding: @DefaultSpace 20px;
         font-weight: 600;
         font-size: @DefaultFontSize;
-        color: var(--colorNeutralForeground1);
-        background-color: var(--colorNeutralBackground2);
-        border-bottom: @ButtonBorderWidth solid var(--colorNeutralStroke1);
+        color: @BaseHigh;
+        background-color: @BaseLow;
+        border-bottom: @ButtonBorderWidth solid @BaseMedium;
 
         &:hover {
-          background-color: var(--colorNeutralBackground3);
+          background-color: @BaseMediumLow;
         }
       }
     }
 
     .ms-DetailsRow {
-      border-bottom: @ButtonBorderWidth solid var(--colorNeutralStroke1);
+      border-bottom: @ButtonBorderWidth solid @BaseMedium;
 
       &:hover {
-        background-color: var(--colorNeutralBackground2);
+        background-color: @BaseMediumLow;
       }
 
       .ms-DetailsRow-cell {
         padding: @MediumSpace 20px;
         font-size: @DefaultFontSize;
-        color: var(--colorNeutralForeground1);
+        color: @BaseHigh;
         min-height: 48px;
         display: flex;
         align-items: center;
 
         .jobNameLink {
-          color: var(--colorBrandForeground1);
+          color: @LinkColor;
           text-overflow: ellipsis;
           white-space: nowrap;
           overflow: hidden;
@@ -227,7 +168,7 @@
     }
     .ms-DetailsRow-cell {
       font-size: @DefaultFontSize;
-      color: var(--colorNeutralForeground1);
+      color: @BaseHigh;
     }
   }
 }

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

@@ -1,5 +1,8 @@
+import { IndexingPolicy } from "@azure/cosmos";
+import { act } from "@testing-library/react";
 import { AuthType } from "AuthType";
 import { shallow } from "enzyme";
+import { useIndexingPolicyStore } from "Explorer/Tabs/QueryTab/ResultsView";
 import ko from "knockout";
 import React from "react";
 import { updateCollection } from "../../../Common/dataAccess/updateCollection";
@@ -444,3 +447,49 @@ describe("SettingsComponent", () => {
     expect(settingsComponentInstance.isSaveSettingsButtonEnabled()).toBe(true);
   });
 });
+
+describe("SettingsComponent - indexing policy subscription", () => {
+  const baseProps: SettingsComponentProps = {
+    settingsTab: new CollectionSettingsTabV2({
+      collection: collection,
+      tabKind: ViewModels.CollectionTabKind.CollectionSettingsV2,
+      title: "Scale & Settings",
+      tabPath: "",
+      node: undefined,
+    }),
+  };
+
+  it("subscribes to the correct container's indexing policy and updates state on change", async () => {
+    const containerId = collection.id();
+    const mockIndexingPolicy: IndexingPolicy = {
+      automatic: false,
+      indexingMode: "lazy",
+      includedPaths: [{ path: "/foo/*" }],
+      excludedPaths: [{ path: "/bar/*" }],
+      compositeIndexes: [],
+      spatialIndexes: [],
+      vectorIndexes: [],
+      fullTextIndexes: [],
+    };
+
+    const wrapper = shallow(<SettingsComponent {...baseProps} />);
+    const instance = wrapper.instance() as SettingsComponent;
+
+    await act(async () => {
+      useIndexingPolicyStore.setState({
+        indexingPolicies: {
+          [containerId]: mockIndexingPolicy,
+        },
+      });
+      // Wait for the async refreshCollectionData to complete
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    wrapper.update();
+
+    expect(wrapper.state("indexingPolicyContent")).toEqual(mockIndexingPolicy);
+    expect(wrapper.state("indexingPolicyContentBaseline")).toEqual(mockIndexingPolicy);
+    // @ts-expect-error: rawDataModel is intentionally accessed for test validation
+    expect(instance.collection.rawDataModel.indexingPolicy).toEqual(mockIndexingPolicy);
+  });
+});

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -13,6 +13,7 @@ import {
   ThroughputBucketsComponent,
   ThroughputBucketsComponentProps,
 } from "Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent";
+import { useIndexingPolicyStore } from "Explorer/Tabs/QueryTab/ResultsView";
 import { useDatabases } from "Explorer/useDatabases";
 import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import { isCapabilityEnabled, isVectorSearchEnabled } from "Utils/CapabilityUtils";
@@ -73,7 +74,6 @@ import {
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
 } from "./SettingsUtils";
-
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
   content: JSX.Element;
@@ -182,7 +182,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private totalThroughputUsed: number;
   private throughputBucketsEnabled: boolean;
   public mongoDBCollectionResource: MongoDBCollectionResource;
-
+  private unsubscribe: () => void;
   constructor(props: SettingsComponentProps) {
     super(props);
 
@@ -312,6 +312,13 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     if (this.isCollectionSettingsTab) {
       this.refreshIndexTransformationProgress();
       this.loadMongoIndexes();
+      this.unsubscribe = useIndexingPolicyStore.subscribe(
+        () => {
+          this.refreshCollectionData();
+        },
+        (state) => state.indexingPolicies[this.collection?.id()],
+      );
+      this.refreshCollectionData();
     }
 
     this.setBaseline();
@@ -319,7 +326,11 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       useCommandBar.getState().setContextButtons(this.getTabsButtons());
     }
   }
-
+  componentWillUnmount(): void {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
+  }
   componentDidUpdate(): void {
     if (this.props.settingsTab.isActive()) {
       useCommandBar.getState().setContextButtons(this.getTabsButtons());
@@ -849,7 +860,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         { name: "name_of_property", query: "query_to_compute_property" },
       ] as DataModels.ComputedProperties;
     }
-
     const throughputBuckets = this.offer?.throughputBuckets;
 
     return {
@@ -1009,10 +1019,31 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       startKey,
     );
   };
+  private refreshCollectionData = async (): Promise<void> => {
+    const containerId = this.collection.id();
+    const latestIndexingPolicy = useIndexingPolicyStore.getState().indexingPolicies[containerId];
+    const rawPolicy = latestIndexingPolicy ?? this.collection.indexingPolicy();
+
+    const latestCollection: DataModels.IndexingPolicy = {
+      automatic: rawPolicy?.automatic ?? true,
+      indexingMode: rawPolicy?.indexingMode ?? "consistent",
+      includedPaths: rawPolicy?.includedPaths ?? [],
+      excludedPaths: rawPolicy?.excludedPaths ?? [],
+      compositeIndexes: rawPolicy?.compositeIndexes ?? [],
+      spatialIndexes: rawPolicy?.spatialIndexes ?? [],
+      vectorIndexes: rawPolicy?.vectorIndexes ?? [],
+      fullTextIndexes: rawPolicy?.fullTextIndexes ?? [],
+    };
+
+    this.collection.rawDataModel.indexingPolicy = latestCollection;
+    this.setState({
+      indexingPolicyContent: latestCollection,
+      indexingPolicyContentBaseline: latestCollection,
+    });
+  };
 
   private saveCollectionSettings = async (startKey: number): Promise<void> => {
     const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
-
     if (
       this.state.isSubSettingsSaveable ||
       this.state.isContainerPolicyDirty ||
@@ -1252,7 +1283,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onScaleDiscardableChange: this.onScaleDiscardableChange,
       throughputError: this.state.throughputError,
     };
-
     if (!this.isCollectionSettingsTab) {
       return (
         <div className="settingsV2MainContainer">

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx

@@ -1,10 +1,10 @@
-import * as React from "react";
 import { MessageBar, MessageBarType } from "@fluentui/react";
+import * as React from "react";
+import { handleError } from "../../../../../Common/ErrorHandlingUtils";
 import {
   mongoIndexTransformationRefreshingMessage,
   renderMongoIndexTransformationRefreshMessage,
 } from "../../SettingsRenderUtils";
-import { handleError } from "../../../../../Common/ErrorHandlingUtils";
 import { isIndexTransforming } from "../../SettingsUtils";
 
 export interface IndexingPolicyRefreshComponentProps {

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

@@ -187,7 +187,7 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
             <Text styles={textSubHeadingStyle}>Current {partitionKeyName.toLowerCase()}</Text>
             <Text styles={textSubHeadingStyle}>Partitioning</Text>
           </Stack>
-          <Stack tokens={{ childrenGap: 5 }} data-test="partition-key-values">
+          <Stack tokens={{ childrenGap: 5 }}>
             <Text styles={textSubHeadingStyle1}>{partitionKeyValue}</Text>
             <Text styles={textSubHeadingStyle1}>
               {isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}
@@ -199,7 +199,6 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
       {!isReadOnly && (
         <>
           <MessageBar
-            data-test="partition-key-warning"
             messageBarType={MessageBarType.warning}
             messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
             styles={darkThemeMessageBarStyles}
@@ -221,7 +220,6 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
           </Text>
           {configContext.platform !== Platform.Emulator && (
             <PrimaryButton
-              data-test="change-partition-key-button"
               styles={{ root: { width: "fit-content" } }}
               text="Change"
               onClick={startPartitionkeyChangeWorkflow}

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx

@@ -103,10 +103,7 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
               offText="Inactive"
               checked={bucket.maxThroughputPercentage !== 100}
               onChange={(event, checked) => onToggle(bucket.id, checked)}
-              styles={{
-                root: { marginBottom: 0 },
-                text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
-              }}
+              styles={{ root: { marginBottom: 0 }, text: { fontSize: 12 } }}
             ></Toggle>
           </Stack>
         ))}

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

@@ -78,7 +78,6 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
         </Text>
       </Stack>
       <Stack
-        data-test="partition-key-values"
         tokens={
           {
             "childrenGap": 5,
@@ -109,7 +108,6 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
     </Stack>
   </Stack>
   <StyledMessageBar
-    data-test="partition-key-warning"
     messageBarIconProps={
       {
         "className": "messageBarWarningIcon",
@@ -162,7 +160,6 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
     To change the partition key, a new destination container must be created or an existing destination container selected. Data will then be copied to the destination container.
   </Text>
   <CustomizedPrimaryButton
-    data-test="change-partition-key-button"
     onClick={[Function]}
     styles={
       {
@@ -240,7 +237,6 @@ exports[`PartitionKeyComponent renders read-only component and matches snapshot
         </Text>
       </Stack>
       <Stack
-        data-test="partition-key-values"
         tokens={
           {
             "childrenGap": 5,

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

@@ -153,6 +153,16 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKey",
                 ],
                 "rawDataModel": {
+                  "indexingPolicy": {
+                    "automatic": true,
+                    "compositeIndexes": [],
+                    "excludedPaths": [],
+                    "fullTextIndexes": [],
+                    "includedPaths": [],
+                    "indexingMode": "consistent",
+                    "spatialIndexes": [],
+                    "vectorIndexes": [],
+                  },
                   "uniqueKeyPolicy": {
                     "uniqueKeys": [
                       {
@@ -264,6 +274,16 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKey",
                 ],
                 "rawDataModel": {
+                  "indexingPolicy": {
+                    "automatic": true,
+                    "compositeIndexes": [],
+                    "excludedPaths": [],
+                    "fullTextIndexes": [],
+                    "includedPaths": [],
+                    "indexingMode": "consistent",
+                    "spatialIndexes": [],
+                    "vectorIndexes": [],
+                  },
                   "uniqueKeyPolicy": {
                     "uniqueKeys": [
                       {
@@ -476,6 +496,16 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKey",
                 ],
                 "rawDataModel": {
+                  "indexingPolicy": {
+                    "automatic": true,
+                    "compositeIndexes": [],
+                    "excludedPaths": [],
+                    "fullTextIndexes": [],
+                    "includedPaths": [],
+                    "indexingMode": "consistent",
+                    "spatialIndexes": [],
+                    "vectorIndexes": [],
+                  },
                   "uniqueKeyPolicy": {
                     "uniqueKeys": [
                       {
@@ -653,6 +683,16 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKey",
                 ],
                 "rawDataModel": {
+                  "indexingPolicy": {
+                    "automatic": true,
+                    "compositeIndexes": [],
+                    "excludedPaths": [],
+                    "fullTextIndexes": [],
+                    "includedPaths": [],
+                    "indexingMode": "consistent",
+                    "spatialIndexes": [],
+                    "vectorIndexes": [],
+                  },
                   "uniqueKeyPolicy": {
                     "uniqueKeys": [
                       {

src/Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent.tsx

@@ -53,7 +53,6 @@ type VectorEmbeddingPolicyProperty = "dataType" | "distanceFunction" | "indexTyp
 const labelStyles = {
   root: {
     fontSize: 12,
-    color: "var(--colorNeutralForeground1)",
   },
 };
 
@@ -64,8 +63,6 @@ const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldSt
   field: {
     fontSize: 12,
     padding: "0 8px",
-    backgroundColor: "var(--colorNeutralBackground1)",
-    color: "var(--colorNeutralForeground1)",
   },
 };
 

src/Explorer/Explorer.tsx

@@ -437,14 +437,13 @@ export default class Explorer {
   public onRefreshResourcesClick = async (): Promise<void> => {
     if (isFabricMirroredKey()) {
       scheduleRefreshFabricToken(true).then(() => this.refreshAllDatabases());
-    } else {
+      return;
+    }
+
     await (userContext.authType === AuthType.ResourceToken
       ? this.refreshDatabaseForResourceToken()
       : this.refreshAllDatabases());
     await this.refreshNotebookList();
-    }
-
-    logConsoleInfo("Successfully refreshed databases");
   };
 
   // Facade

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx

@@ -853,7 +853,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
               {!isSynapseLinkEnabled() && (
                 <Stack className="panelGroupSpacing">
-                  <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
+                  <Text variant="small">
                     Azure Synapse Link is required for creating an analytical store{" "}
                     {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account. <br />
                     <Link

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

@@ -475,11 +475,6 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         className="panelGroupSpacing"
       >
         <Text
-          style={
-            {
-              "color": "var(--colorNeutralForeground1)",
-            }
-          }
           variant="small"
         >
           Azure Synapse Link is required for creating an analytical store

src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx

@@ -208,7 +208,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
           </div>
         </Stack>
         {createNewContainer ? (
-          <Stack data-test="create-new-container-form">
+          <Stack>
             <MessageBar>All configurations except for unique keys will be copied from the source container</MessageBar>
             <Stack className="panelGroupSpacing">
               <Stack horizontal>
@@ -230,7 +230,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                 </TooltipHost>
               </Stack>
               <input
-                data-test="new-container-id-input"
                 name="collectionId"
                 id="collectionId"
                 type="text"
@@ -272,7 +271,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
 
               <input
                 type="text"
-                data-test="new-container-partition-key-input"
                 id="addCollection-partitionKeyValue"
                 aria-required
                 required
@@ -306,7 +304,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                       type="text"
                       id="addCollection-partitionKeyValue"
                       key={`addCollection-partitionKeyValue_${index}`}
-                      data-test={`new-container-sub-partition-key-input-${index}`}
                       aria-required
                       required
                       size={40}
@@ -330,8 +327,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                       }}
                     />
                     <IconButton
-                      data-test={`remove-sub-partition-key-button-${index}`}
-                      ariaLabel="Remove hierarchical partition key"
                       iconProps={{ iconName: "Delete" }}
                       style={{ height: 27 }}
                       onClick={() => {
@@ -344,7 +339,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
               })}
               <Stack className="panelGroupSpacing">
                 <DefaultButton
-                  data-test="add-sub-partition-key-button"
                   styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
                   disabled={subPartitionKeys.length >= Constants.BackendDefaults.maxNumMultiHashPartition}
                   onClick={() => setSubPartitionKeys([...subPartitionKeys, ""])}
@@ -352,11 +346,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                   Add hierarchical partition key
                 </DefaultButton>
                 {subPartitionKeys.length > 0 && (
-                  <Text
-                    data-test="hierarchical-partitioning-info-text"
-                    variant="small"
-                    style={{ color: "var(--colorNeutralForeground1)" }}
-                  >
+                  <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
                     <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
                     partition your data with up to three levels of keys for better data distribution. Requires .NET V3,
                     Java V4 SDK, or preview JavaScript V3 SDK.{" "}
@@ -369,7 +359,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
             </Stack>
           </Stack>
         ) : (
-          <Stack data-test="use-existing-container-form">
+          <Stack>
             <Stack horizontal>
               <span className="mandatoryStar">*&nbsp;</span>
               <Text className="panelTextBold" variant="small">
@@ -400,7 +390,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
               }}
               defaultSelectedKey={targetCollectionId}
               responsiveMode={999}
-              ariaLabel="Existing Containers"
             />
           </Stack>
         )}

src/Explorer/Panes/PanelLoadingScreen.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares.gif";
 
 export const PanelLoadingScreen: React.FunctionComponent = () => (
-  <div id="loadingScreen" className="dataExplorerLoaderContainer dataExplorerLoaderforcopyJobs">
+  <div id="loadingScreen" className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer">
     <img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
   </div>
 );

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -61,8 +61,7 @@ const useStyles = makeStyles({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    height: "100%",
-    overflowY: "auto",
+    minHeight: "100vh",
     backgroundColor: "var(--colorNeutralBackground1)",
     color: "var(--colorNeutralForeground1)",
   },
@@ -74,19 +73,20 @@ const useStyles = makeStyles({
   },
   title: {
     fontSize: "48px",
-    fontWeight: "400",
+    fontWeight: "500",
     margin: "16px auto",
     color: "var(--colorNeutralForeground1)",
   },
   subtitle: {
     fontSize: "18px",
+    marginBottom: "40px",
     color: "var(--colorNeutralForeground2)",
   },
   cardContainer: {
     display: "grid",
     gridTemplateColumns: "repeat(2, 1fr)",
     gap: "16px",
-    width: "60%",
+    width: "66%",
     margin: "0 auto",
     backgroundColor: "var(--colorNeutralBackground1)",
     color: "var(--colorNeutralForeground1)",
@@ -100,7 +100,7 @@ const useStyles = makeStyles({
     color: "var(--colorNeutralForeground1)",
     border: "1px solid var(--colorNeutralStroke1)",
     borderRadius: "4px",
-    boxShadow: "rgba(0, 0, 0, 0.25) 0px 4px 4px",
+    boxShadow: "var(--shadow4)",
     cursor: "pointer",
     minHeight: "150px",
     "&:hover": {
@@ -128,10 +128,11 @@ const useStyles = makeStyles({
     textAlign: "left",
   },
   moreStuffContainer: {
-    display: "flex",
-    justifyContent: "space-between",
+    display: "grid",
+    gridTemplateColumns: "repeat(3, 1fr)",
     gap: "32px",
-    width: "90%",
+    width: "66%",
+    margin: "40px auto",
   },
   moreStuffColumn: {
     display: "flex",
@@ -226,7 +227,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
       return (
         <Stack
           className="splashStackContainer"
-          style={{ width: "60%", cursor: "pointer", margin: "40px auto" }}
+          style={{ width: "66%", cursor: "pointer", margin: "40px auto" }}
           tokens={{ childrenGap: 16 }}
         >
           <Stack className="splashStackRow" horizontal>
@@ -902,9 +903,9 @@ 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">
+        <h1 className={styles.title} role="heading" aria-label="Welcome to Azure Cosmos DB">
           Welcome to Azure Cosmos DB<span className="activePatch"></span>
-        </h2>
+        </h1>
         <div className={styles.subtitle}>Globally distributed, multi-model database service for any scale</div>
         {getSplashScreenButtons()}
         {useCarousel.getState().showCoachMark && (

src/Explorer/SplashScreen/SplashScreenButton.tsx

@@ -15,7 +15,7 @@ const useStyles = makeStyles({
   button: {
     border: "1px solid var(--colorNeutralStroke1)",
     boxSizing: "border-box",
-    boxShadow: "rgba(0, 0, 0, 0.25) 0px 4px 4px",
+    boxShadow: "var(--shadow4)",
     borderRadius: "4px",
     padding: "32px 16px",
     backgroundColor: "var(--colorNeutralBackground1)",

src/Explorer/Tabs/QueryTab/IndexAdvisorUtils.tsx

@@ -0,0 +1,107 @@
+import { CircleFilled } from "@fluentui/react-icons";
+import type { IIndexMetric } from "Explorer/Tabs/QueryTab/ResultsView";
+import { useIndexAdvisorStyles } from "Explorer/Tabs/QueryTab/StylesAdvisor";
+import * as React from "react";
+
+// SDK response format
+export interface IndexMetricsResponse {
+  UtilizedIndexes?: {
+    SingleIndexes?: Array<{ IndexSpec: string; IndexImpactScore?: string }>;
+    CompositeIndexes?: Array<{ IndexSpecs: string[]; IndexImpactScore?: string }>;
+  };
+  PotentialIndexes?: {
+    SingleIndexes?: Array<{ IndexSpec: string; IndexImpactScore?: string }>;
+    CompositeIndexes?: Array<{ IndexSpecs: string[]; IndexImpactScore?: string }>;
+  };
+}
+
+export function parseIndexMetrics(indexMetrics: IndexMetricsResponse): {
+  included: IIndexMetric[];
+  notIncluded: IIndexMetric[];
+} {
+  const included: IIndexMetric[] = [];
+  const notIncluded: IIndexMetric[] = [];
+
+  // Process UtilizedIndexes (Included in Current Policy)
+  if (indexMetrics.UtilizedIndexes) {
+    // Single indexes
+    indexMetrics.UtilizedIndexes.SingleIndexes?.forEach((index) => {
+      included.push({
+        index: index.IndexSpec,
+        impact: index.IndexImpactScore || "Utilized",
+        section: "Included",
+        path: index.IndexSpec,
+      });
+    });
+
+    // Composite indexes
+    indexMetrics.UtilizedIndexes.CompositeIndexes?.forEach((index) => {
+      const compositeSpec = index.IndexSpecs.join(", ");
+      included.push({
+        index: compositeSpec,
+        impact: index.IndexImpactScore || "Utilized",
+        section: "Included",
+        composite: index.IndexSpecs.map((spec) => {
+          const [path, order] = spec.trim().split(/\s+/);
+          return {
+            path: path.trim(),
+            order: order?.toLowerCase() === "desc" ? "descending" : "ascending",
+          };
+        }),
+      });
+    });
+  }
+
+  // Process PotentialIndexes (Not Included in Current Policy)
+  if (indexMetrics.PotentialIndexes) {
+    // Single indexes
+    indexMetrics.PotentialIndexes.SingleIndexes?.forEach((index) => {
+      notIncluded.push({
+        index: index.IndexSpec,
+        impact: index.IndexImpactScore || "Unknown",
+        section: "Not Included",
+        path: index.IndexSpec,
+      });
+    });
+
+    // Composite indexes
+    indexMetrics.PotentialIndexes.CompositeIndexes?.forEach((index) => {
+      const compositeSpec = index.IndexSpecs.join(", ");
+      notIncluded.push({
+        index: compositeSpec,
+        impact: index.IndexImpactScore || "Unknown",
+        section: "Not Included",
+        composite: index.IndexSpecs.map((spec) => {
+          const [path, order] = spec.trim().split(/\s+/);
+          return {
+            path: path.trim(),
+            order: order?.toLowerCase() === "desc" ? "descending" : "ascending",
+          };
+        }),
+      });
+    });
+  }
+
+  return { included, notIncluded };
+}
+
+export const renderImpactDots = (impact: string): JSX.Element => {
+  const style = useIndexAdvisorStyles();
+  let count = 0;
+
+  if (impact === "High") {
+    count = 3;
+  } else if (impact === "Medium") {
+    count = 2;
+  } else if (impact === "Low") {
+    count = 1;
+  }
+
+  return (
+    <div className={style.indexAdvisorImpactDots}>
+      {Array.from({ length: count }).map((_, i) => (
+        <CircleFilled key={i} className={style.indexAdvisorImpactDot} />
+      ))}
+    </div>
+  );
+};

src/Explorer/Tabs/QueryTab/QueryResultSection.tsx

@@ -3,18 +3,21 @@ import QueryError from "Common/QueryError";
 import { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar";
 import { MessageBanner } from "Explorer/Controls/MessageBanner";
 import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
+import useZoomLevel from "hooks/useZoomLevel";
 import React from "react";
+import { conditionalClass } from "Utils/StyleUtils";
 import RunQuery from "../../../../images/RunQuery.png";
 import { QueryResults } from "../../../Contracts/ViewModels";
 import { ErrorList } from "./ErrorList";
 import { ResultsView } from "./ResultsView";
-import useZoomLevel from "hooks/useZoomLevel";
-import { conditionalClass } from "Utils/StyleUtils";
 
 export interface ResultsViewProps {
   isMongoDB: boolean;
   queryResults: QueryResults;
   executeQueryDocumentsPage: (firstItemIndex: number) => Promise<void>;
+  queryEditorContent?: string;
+  databaseId?: string;
+  containerId?: string;
 }
 
 interface QueryResultProps extends ResultsViewProps {
@@ -49,6 +52,8 @@ export const QueryResultSection: React.FC<QueryResultProps> = ({
   queryResults,
   executeQueryDocumentsPage,
   isExecuting,
+  databaseId,
+  containerId,
 }: QueryResultProps): JSX.Element => {
   const styles = useQueryTabStyles();
   const maybeSubQuery = queryEditorContent && /.*\(.*SELECT.*\)/i.test(queryEditorContent);
@@ -91,6 +96,9 @@ export const QueryResultSection: React.FC<QueryResultProps> = ({
           queryResults={queryResults}
           executeQueryDocumentsPage={executeQueryDocumentsPage}
           isMongoDB={isMongoDB}
+          queryEditorContent={queryEditorContent}
+          databaseId={databaseId}
+          containerId={containerId}
         />
       ) : (
         <ExecuteQueryCallToAction />

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

@@ -52,8 +52,9 @@ describe("QueryTabComponent", () => {
         copilotVersion: "v3.0",
       },
     });
+
     const propsMock: Readonly<IQueryTabComponentProps> = {
-      collection: { databaseId: "CopilotSampleDB" },
+      collection: { databaseId: "CopilotSampleDB", id: () => "CopilotContainer" },
       onTabAccessor: () => jest.fn(),
       isExecutionError: false,
       tabId: "mockTabId",

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -28,6 +28,7 @@ import { useMonacoTheme } from "hooks/useTheme";
 import React, { Fragment, createRef } from "react";
 import "react-splitter-layout/lib/index.css";
 import { format } from "react-string-format";
+import create from "zustand";
 //TODO: Uncomment next two lines when query copilot is reinstated in DE
 // import QueryCommandIcon from "../../../../images/CopilotCommand.svg";
 // import LaunchCopilot from "../../../../images/CopilotTabIcon.svg";
@@ -57,6 +58,20 @@ import { SaveQueryPane } from "../../Panes/SaveQueryPane/SaveQueryPane";
 import TabsBase from "../TabsBase";
 import "./QueryTabComponent.less";
 
+export interface QueryMetadataStore {
+  userQuery: string;
+  databaseId: string;
+  containerId: string;
+  setMetadata: (query1: string, db: string, container: string) => void;
+}
+
+export const useQueryMetadataStore = create<QueryMetadataStore>((set) => ({
+  userQuery: "",
+  databaseId: "",
+  containerId: "",
+  setMetadata: (query1, db, container) => set({ userQuery: query1, databaseId: db, containerId: container }),
+}));
+
 enum ToggleState {
   Result,
   QueryMetrics,
@@ -264,6 +279,10 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
   }
 
   public onExecuteQueryClick = async (): Promise<void> => {
+    const query1 = this.state.sqlQueryEditorContent;
+    const db = this.props.collection.databaseId;
+    const container = this.props.collection.id();
+    useQueryMetadataStore.getState().setMetadata(query1, db, container);
     this._iterator = undefined;
 
     setTimeout(async () => {
@@ -780,6 +799,8 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
                   errors={this.props.copilotStore?.errors}
                   isExecuting={this.props.copilotStore?.isExecuting}
                   queryResults={this.props.copilotStore?.queryResults}
+                  databaseId={this.props.collection.databaseId}
+                  containerId={this.props.collection.id()}
                   executeQueryDocumentsPage={(firstItemIndex: number) =>
                     QueryDocumentsPerPage(
                       firstItemIndex,
@@ -795,6 +816,8 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
                   errors={this.state.errors}
                   isExecuting={this.state.isExecuting}
                   queryResults={this.state.queryResults}
+                  databaseId={this.props.collection.databaseId}
+                  containerId={this.props.collection.id()}
                   executeQueryDocumentsPage={(firstItemIndex: number) =>
                     this._executeQueryDocumentsPage(firstItemIndex)
                   }

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

@@ -0,0 +1,170 @@
+import "@testing-library/jest-dom";
+import { render, screen, waitFor } from "@testing-library/react";
+import { IndexAdvisorTab } from "Explorer/Tabs/QueryTab/ResultsView";
+import React from "react";
+
+const mockReplace = jest.fn();
+const mockFetchAll = jest.fn();
+const mockRead = jest.fn();
+const mockLogConsoleProgress = jest.fn();
+const mockHandleError = jest.fn();
+
+const indexMetricsResponse = {
+  UtilizedIndexes: {
+    SingleIndexes: [{ IndexSpec: "/foo/?", IndexImpactScore: "High" }],
+    CompositeIndexes: [{ IndexSpecs: ["/baz/? DESC", "/qux/? ASC"], IndexImpactScore: "Low" }],
+  },
+  PotentialIndexes: {
+    SingleIndexes: [{ IndexSpec: "/bar/?", IndexImpactScore: "Medium" }],
+    CompositeIndexes: [] as Array<{ IndexSpecs: string[]; IndexImpactScore?: string }>,
+  },
+};
+
+const mockQueryResults = {
+  documents: [] as unknown[],
+  hasMoreResults: false,
+  itemCount: 0,
+  firstItemIndex: 0,
+  lastItemIndex: 0,
+  requestCharge: 0,
+  activityId: "test-activity-id",
+};
+
+mockRead.mockResolvedValue({
+  resource: {
+    indexingPolicy: {
+      automatic: true,
+      indexingMode: "consistent",
+      includedPaths: [{ path: "/*" }, { path: "/foo/?" }],
+      excludedPaths: [],
+    },
+    partitionKey: "pk",
+  },
+});
+
+mockReplace.mockResolvedValue({
+  resource: {
+    indexingPolicy: {
+      automatic: true,
+      indexingMode: "consistent",
+      includedPaths: [{ path: "/*" }],
+      excludedPaths: [],
+    },
+  },
+});
+
+jest.mock("Common/CosmosClient", () => ({
+  client: () => ({
+    database: () => ({
+      container: () => ({
+        items: {
+          query: () => ({
+            fetchAll: mockFetchAll,
+          }),
+        },
+        read: mockRead,
+        replace: mockReplace,
+      }),
+    }),
+  }),
+}));
+
+jest.mock("./StylesAdvisor", () => ({
+  useIndexAdvisorStyles: () => ({}),
+}));
+
+jest.mock("../../../Utils/NotificationConsoleUtils", () => ({
+  logConsoleProgress: (...args: unknown[]) => {
+    mockLogConsoleProgress(...args);
+    return () => {};
+  },
+}));
+
+jest.mock("../../../Common/ErrorHandlingUtils", () => ({
+  handleError: (...args: unknown[]) => mockHandleError(...args),
+}));
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockFetchAll.mockResolvedValue({ indexMetrics: indexMetricsResponse });
+});
+
+describe("IndexAdvisorTab Basic Tests", () => {
+  test("component renders without crashing", () => {
+    const { container } = render(
+      <IndexAdvisorTab queryEditorContent="SELECT * FROM c" databaseId="db1" containerId="col1" />,
+    );
+    expect(container).toBeTruthy();
+  });
+
+  test("renders component and handles missing parameters", () => {
+    const { container } = render(<IndexAdvisorTab />);
+    expect(container).toBeTruthy();
+    // Should not crash when parameters are missing
+  });
+
+  test("fetches index metrics with query results", async () => {
+    render(
+      <IndexAdvisorTab
+        queryResults={mockQueryResults}
+        queryEditorContent="SELECT * FROM c"
+        databaseId="db1"
+        containerId="col1"
+      />,
+    );
+    await waitFor(() => expect(mockFetchAll).toHaveBeenCalled());
+  });
+
+  test("displays content after loading", async () => {
+    render(
+      <IndexAdvisorTab
+        queryResults={mockQueryResults}
+        queryEditorContent="SELECT * FROM c"
+        databaseId="db1"
+        containerId="col1"
+      />,
+    );
+    // Wait for the component to finish loading
+    await waitFor(() => expect(mockFetchAll).toHaveBeenCalled());
+    // Component should have rendered some content
+    expect(screen.getByText(/Index Advisor/i)).toBeInTheDocument();
+  });
+
+  test("calls log console progress when fetching metrics", async () => {
+    render(
+      <IndexAdvisorTab
+        queryResults={mockQueryResults}
+        queryEditorContent="SELECT * FROM c"
+        databaseId="db1"
+        containerId="col1"
+      />,
+    );
+    await waitFor(() => expect(mockLogConsoleProgress).toHaveBeenCalled());
+  });
+
+  test("handles error when fetch fails", async () => {
+    mockFetchAll.mockRejectedValueOnce(new Error("fetch failed"));
+    render(
+      <IndexAdvisorTab
+        queryResults={mockQueryResults}
+        queryEditorContent="SELECT * FROM c"
+        databaseId="db1"
+        containerId="col1"
+      />,
+    );
+    await waitFor(() => expect(mockHandleError).toHaveBeenCalled(), { timeout: 3000 });
+  });
+
+  test("renders with all required props", () => {
+    const { container } = render(
+      <IndexAdvisorTab
+        queryResults={mockQueryResults}
+        queryEditorContent="SELECT * FROM c"
+        databaseId="testDb"
+        containerId="testContainer"
+      />,
+    );
+    expect(container).toBeTruthy();
+    expect(container.firstChild).toBeTruthy();
+  });
+});

src/Explorer/Tabs/QueryTab/ResultsView.tsx

@@ -1,5 +1,8 @@
+import type { CompositePath, IndexingPolicy } from "@azure/cosmos";
+import { FontIcon } from "@fluentui/react";
 import {
   Button,
+  Checkbox,
   DataGrid,
   DataGridBody,
   DataGridCell,
@@ -8,28 +11,45 @@ import {
   DataGridRow,
   SelectTabData,
   SelectTabEvent,
+  Spinner,
   Tab,
   TabList,
+  Table,
+  TableBody,
+  TableCell,
   TableColumnDefinition,
+  TableHeader,
+  TableRow,
   createTableColumn,
 } from "@fluentui/react-components";
-import { ArrowDownloadRegular, CopyRegular } from "@fluentui/react-icons";
+import { ArrowDownloadRegular, ChevronDown20Regular, ChevronRight20Regular, CopyRegular } from "@fluentui/react-icons";
+import copy from "clipboard-copy";
 import { HttpHeaders } from "Common/Constants";
 import MongoUtility from "Common/MongoUtility";
 import { QueryMetrics } from "Contracts/DataModels";
+import { QueryResults } from "Contracts/ViewModels";
 import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
+import {
+  parseIndexMetrics,
+  renderImpactDots,
+  type IndexMetricsResponse,
+} from "Explorer/Tabs/QueryTab/IndexAdvisorUtils";
 import { IDocument } from "Explorer/Tabs/QueryTab/QueryTabComponent";
 import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
+import React, { useCallback, useEffect, useState } from "react";
 import { userContext } from "UserContext";
-import copy from "clipboard-copy";
-import React, { useCallback, useState } from "react";
+import { logConsoleProgress } from "Utils/NotificationConsoleUtils";
+import create from "zustand";
+import { client } from "../../../Common/CosmosClient";
+import { handleError } from "../../../Common/ErrorHandlingUtils";
+import { sampleDataClient } from "../../../Common/SampleDataClient";
 import { ResultsViewProps } from "./QueryResultSection";
-
+import { useIndexAdvisorStyles } from "./StylesAdvisor";
 enum ResultsTabs {
   Results = "results",
   QueryStats = "queryStats",
+  IndexAdvisor = "indexadv",
 }
-
 const ResultsTab: React.FC<ResultsViewProps> = ({ queryResults, isMongoDB, executeQueryDocumentsPage }) => {
   const styles = useQueryTabStyles();
   /* eslint-disable react/prop-types */
@@ -523,14 +543,331 @@ const QueryStatsTab: React.FC<Pick<ResultsViewProps, "queryResults">> = ({ query
   );
 };
 
-export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResults, executeQueryDocumentsPage }) => {
+export interface IIndexMetric {
+  index: string;
+  impact: string;
+  section: "Included" | "Not Included" | "Header";
+  path?: string;
+  composite?: { path: string; order: string }[];
+}
+export const IndexAdvisorTab: React.FC<{
+  queryResults?: QueryResults;
+  queryEditorContent?: string;
+  databaseId?: string;
+  containerId?: string;
+}> = ({ queryResults, queryEditorContent, databaseId, containerId }) => {
+  const style = useIndexAdvisorStyles();
+
+  const [loading, setLoading] = useState(false);
+  const [indexMetrics, setIndexMetrics] = useState<IndexMetricsResponse | null>(null);
+  const [showIncluded, setShowIncluded] = useState(true);
+  const [showNotIncluded, setShowNotIncluded] = useState(true);
+  const [selectedIndexes, setSelectedIndexes] = useState<IIndexMetric[]>([]);
+  const [selectAll, setSelectAll] = useState(false);
+  const [updateMessageShown, setUpdateMessageShown] = useState(false);
+  const [included, setIncludedIndexes] = useState<IIndexMetric[]>([]);
+  const [notIncluded, setNotIncludedIndexes] = useState<IIndexMetric[]>([]);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [justUpdatedPolicy, setJustUpdatedPolicy] = useState(false);
+  const indexingMetricsDocLink = "https://learn.microsoft.com/azure/cosmos-db/nosql/index-metrics";
+
+  const fetchIndexMetrics = async () => {
+    if (!queryEditorContent || !databaseId || !containerId) {
+      return;
+    }
+
+    setLoading(true);
+    const clearMessage = logConsoleProgress(`Querying items with IndexMetrics in container ${containerId}`);
+    try {
+      const querySpec = {
+        query: queryEditorContent,
+      };
+
+      // Use sampleDataClient for CopilotSampleDB, regular client for other databases
+      const cosmosClient = databaseId === "CopilotSampleDB" ? sampleDataClient() : client();
+
+      const sdkResponse = await cosmosClient
+        .database(databaseId)
+        .container(containerId)
+        .items.query(querySpec, {
+          populateIndexMetrics: true,
+        })
+        .fetchAll();
+
+      const parsedMetrics =
+        typeof sdkResponse.indexMetrics === "string" ? JSON.parse(sdkResponse.indexMetrics) : sdkResponse.indexMetrics;
+
+      setIndexMetrics(parsedMetrics);
+    } catch (error) {
+      handleError(error, "queryItemsWithIndexMetrics", `Error querying items from ${containerId}`);
+    } finally {
+      clearMessage();
+      setLoading(false);
+    }
+  };
+
+  // Fetch index metrics when query results change (i.e., when Execute Query is clicked)
+  useEffect(() => {
+    if (queryEditorContent && databaseId && containerId && queryResults) {
+      fetchIndexMetrics();
+    }
+  }, [queryResults]);
+
+  useEffect(() => {
+    if (!indexMetrics) {
+      return;
+    }
+
+    const { included, notIncluded } = parseIndexMetrics(indexMetrics);
+    setIncludedIndexes(included);
+    setNotIncludedIndexes(notIncluded);
+    if (justUpdatedPolicy) {
+      setJustUpdatedPolicy(false);
+    } else {
+      setUpdateMessageShown(false);
+    }
+  }, [indexMetrics]);
+
+  useEffect(() => {
+    const allSelected =
+      notIncluded.length > 0 && notIncluded.every((item) => selectedIndexes.some((s) => s.index === item.index));
+    setSelectAll(allSelected);
+  }, [selectedIndexes, notIncluded]);
+
+  const handleCheckboxChange = (indexObj: IIndexMetric, checked: boolean) => {
+    if (checked) {
+      setSelectedIndexes((prev) => [...prev, indexObj]);
+    } else {
+      setSelectedIndexes((prev) => prev.filter((item) => item.index !== indexObj.index));
+    }
+  };
+
+  const handleSelectAll = (checked: boolean) => {
+    setSelectAll(checked);
+    setSelectedIndexes(checked ? notIncluded : []);
+  };
+
+  const handleUpdatePolicy = async () => {
+    setIsUpdating(true);
+    try {
+      const containerRef = client().database(databaseId).container(containerId);
+      const { resource: containerDef } = await containerRef.read();
+
+      const newIncludedPaths = selectedIndexes
+        .filter((index) => !index.composite)
+        .map((index) => {
+          return {
+            path: index.path,
+          };
+        });
+
+      const newCompositeIndexes: CompositePath[][] = selectedIndexes
+        .filter((index) => Array.isArray(index.composite))
+        .map(
+          (index) =>
+            (index.composite as { path: string; order: string }[]).map((comp) => ({
+              path: comp.path,
+              order: comp.order === "descending" ? "descending" : "ascending",
+            })) as CompositePath[],
+        );
+
+      const updatedPolicy: IndexingPolicy = {
+        ...containerDef.indexingPolicy,
+        includedPaths: [...(containerDef.indexingPolicy?.includedPaths || []), ...newIncludedPaths],
+        compositeIndexes: [...(containerDef.indexingPolicy?.compositeIndexes || []), ...newCompositeIndexes],
+        automatic: containerDef.indexingPolicy?.automatic ?? true,
+        indexingMode: containerDef.indexingPolicy?.indexingMode ?? "consistent",
+        excludedPaths: containerDef.indexingPolicy?.excludedPaths ?? [],
+      };
+      await containerRef.replace({
+        id: containerId,
+        partitionKey: containerDef.partitionKey,
+        indexingPolicy: updatedPolicy,
+      });
+      useIndexingPolicyStore.getState().setIndexingPolicyFor(containerId, updatedPolicy);
+      const selectedIndexSet = new Set(selectedIndexes.map((s) => s.index));
+      const updatedNotIncluded: typeof notIncluded = [];
+      const newlyIncluded: typeof included = [];
+      for (const item of notIncluded) {
+        if (selectedIndexSet.has(item.index)) {
+          newlyIncluded.push(item);
+        } else {
+          updatedNotIncluded.push(item);
+        }
+      }
+      const newIncluded = [...included, ...newlyIncluded];
+      const newNotIncluded = updatedNotIncluded;
+      setIncludedIndexes(newIncluded);
+      setNotIncludedIndexes(newNotIncluded);
+      setSelectedIndexes([]);
+      setSelectAll(false);
+      setUpdateMessageShown(true);
+      setJustUpdatedPolicy(true);
+    } catch (err) {
+      console.error("Failed to update indexing policy:", err);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const renderRow = (item: IIndexMetric, index: number) => {
+    const isHeader = item.section === "Header";
+    const isNotIncluded = item.section === "Not Included";
+
+    return (
+      <TableRow key={index}>
+        <TableCell colSpan={2}>
+          <div className={style.indexAdvisorGrid}>
+            {isNotIncluded ? (
+              <Checkbox
+                checked={selectedIndexes.some((selected) => selected.index === item.index)}
+                onChange={(_, data) => handleCheckboxChange(item, data.checked === true)}
+              />
+            ) : isHeader && item.index === "Not Included in Current Policy" && notIncluded.length > 0 ? (
+              <Checkbox checked={selectAll} onChange={(_, data) => handleSelectAll(data.checked === true)} />
+            ) : (
+              <div className={style.indexAdvisorCheckboxSpacer}></div>
+            )}
+            {isHeader ? (
+              <span
+                style={{ cursor: "pointer" }}
+                onClick={() => {
+                  if (item.index === "Included in Current Policy") {
+                    setShowIncluded(!showIncluded);
+                  } else if (item.index === "Not Included in Current Policy") {
+                    setShowNotIncluded(!showNotIncluded);
+                  }
+                }}
+              >
+                {item.index === "Included in Current Policy" ? (
+                  showIncluded ? (
+                    <ChevronDown20Regular />
+                  ) : (
+                    <ChevronRight20Regular />
+                  )
+                ) : showNotIncluded ? (
+                  <ChevronDown20Regular />
+                ) : (
+                  <ChevronRight20Regular />
+                )}
+              </span>
+            ) : (
+              <div className={style.indexAdvisorChevronSpacer}></div>
+            )}
+            <div className={isHeader ? style.indexAdvisorRowBold : style.indexAdvisorRowNormal}>{item.index}</div>
+            <div className={isHeader ? style.indexAdvisorRowImpactHeader : style.indexAdvisorRowImpact}>
+              {!isHeader && item.impact}
+            </div>
+            <div>{!isHeader && renderImpactDots(item.impact)}</div>
+          </div>
+        </TableCell>
+      </TableRow>
+    );
+  };
+  const indexMetricItems = React.useMemo(() => {
+    const items: IIndexMetric[] = [];
+    items.push({ index: "Not Included in Current Policy", impact: "", section: "Header" });
+    if (showNotIncluded) {
+      notIncluded.forEach((item) => items.push({ ...item, section: "Not Included" }));
+    }
+    items.push({ index: "Included in Current Policy", impact: "", section: "Header" });
+    if (showIncluded) {
+      included.forEach((item) => items.push({ ...item, section: "Included" }));
+    }
+    return items;
+  }, [included, notIncluded, showIncluded, showNotIncluded]);
+
+  if (loading) {
+    return (
+      <div>
+        <Spinner
+          size="small"
+          style={
+            {
+              "--spinner-size": "16px",
+              "--spinner-thickness": "2px",
+              "--spinner-color": "#0078D4",
+            } as React.CSSProperties
+          }
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className={style.indexAdvisorMessage}>
+        {updateMessageShown ? (
+          <>
+            <span className={style.indexAdvisorSuccessIcon}>
+              <FontIcon iconName="CheckMark" style={{ color: "white", fontSize: 12 }} />
+            </span>
+            <span>
+              Your indexing policy has been updated with the new included paths. You may review the changes in Scale &
+              Settings.
+            </span>
+          </>
+        ) : (
+          <>
+            <span>
+              Index Advisor uses Indexing Metrics to suggest query paths that, when included in your indexing policy,
+              can improve the performance of this query by reducing RU costs and lowering latency.{" "}
+              <a href={indexingMetricsDocLink} target="_blank" rel="noopener noreferrer">
+                Learn more about Indexing Metrics
+              </a>
+              .{" "}
+            </span>
+          </>
+        )}
+      </div>
+      <div className={style.indexAdvisorTitle}>Indexes analysis</div>
+      <Table className={style.indexAdvisorTable}>
+        <TableHeader>
+          <TableRow>
+            <TableCell colSpan={2}>
+              <div className={style.indexAdvisorGrid}>
+                <div className={style.indexAdvisorCheckboxSpacer}></div>
+                <div className={style.indexAdvisorChevronSpacer}></div>
+                <div>Index</div>
+                <div>
+                  <span style={{ whiteSpace: "nowrap" }}>Estimated Impact</span>
+                </div>
+              </div>
+            </TableCell>
+          </TableRow>
+        </TableHeader>
+        <TableBody>{indexMetricItems.map(renderRow)}</TableBody>
+      </Table>
+      {selectedIndexes.length > 0 && (
+        <div className={style.indexAdvisorButtonBar}>
+          {isUpdating ? (
+            <div className={style.indexAdvisorButtonSpinner}>
+              <Spinner size="tiny" />{" "}
+            </div>
+          ) : (
+            <button onClick={handleUpdatePolicy} className={style.indexAdvisorButton}>
+              Update Indexing Policy with selected index(es)
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+export const ResultsView: React.FC<ResultsViewProps> = ({
+  isMongoDB,
+  queryResults,
+  executeQueryDocumentsPage,
+  queryEditorContent,
+  databaseId,
+  containerId,
+}) => {
   const styles = useQueryTabStyles();
   const [activeTab, setActiveTab] = useState<ResultsTabs>(ResultsTabs.Results);
 
   const onTabSelect = useCallback((event: SelectTabEvent, data: SelectTabData) => {
     setActiveTab(data.value as ResultsTabs);
   }, []);
-
   return (
     <div data-test="QueryTab/ResultsPane/ResultsView" className={styles.queryResultsTabPanel}>
       <TabList selectedValue={activeTab} onTabSelect={onTabSelect}>
@@ -548,6 +885,13 @@ export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResult
         >
           Query Stats
         </Tab>
+        <Tab
+          data-test="QueryTab/ResultsPane/ResultsView/IndexAdvisorTab"
+          id={ResultsTabs.IndexAdvisor}
+          value={ResultsTabs.IndexAdvisor}
+        >
+          Index Advisor
+        </Tab>
       </TabList>
       <div className={styles.queryResultsTabContentContainer}>
         {activeTab === ResultsTabs.Results && (
@@ -558,7 +902,30 @@ export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResult
           />
         )}
         {activeTab === ResultsTabs.QueryStats && <QueryStatsTab queryResults={queryResults} />}
+        {activeTab === ResultsTabs.IndexAdvisor && (
+          <IndexAdvisorTab
+            queryResults={queryResults}
+            queryEditorContent={queryEditorContent}
+            databaseId={databaseId}
+            containerId={containerId}
+          />
+        )}
       </div>
     </div>
   );
 };
+export interface IndexingPolicyStore {
+  indexingPolicies: { [containerId: string]: IndexingPolicy };
+  setIndexingPolicyFor: (containerId: string, indexingPolicy: IndexingPolicy) => void;
+}
+
+export const useIndexingPolicyStore = create<IndexingPolicyStore>((set) => ({
+  indexingPolicies: {},
+  setIndexingPolicyFor: (containerId, indexingPolicy) =>
+    set((state) => ({
+      indexingPolicies: {
+        ...state.indexingPolicies,
+        [containerId]: { ...indexingPolicy },
+      },
+    })),
+}));

src/Explorer/Tabs/QueryTab/StylesAdvisor.ts

@@ -0,0 +1,95 @@
+import { makeStyles } from "@fluentui/react-components";
+export type IndexAdvisorStyles = ReturnType<typeof useIndexAdvisorStyles>;
+export const useIndexAdvisorStyles = makeStyles({
+  indexAdvisorMessage: {
+    padding: "1rem",
+    fontSize: "1.2rem",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+  },
+  indexAdvisorSuccessIcon: {
+    width: "18px",
+    height: "18px",
+    borderRadius: "50%",
+    backgroundColor: "#107C10",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  indexAdvisorTitle: {
+    padding: "1rem",
+    fontSize: "1.3rem",
+    fontWeight: "bold",
+  },
+  indexAdvisorTable: {
+    display: "block",
+    alignItems: "center",
+    marginBottom: "7rem",
+  },
+  indexAdvisorGrid: {
+    display: "grid",
+    gridTemplateColumns: "30px 30px 1fr 50px 120px",
+    alignItems: "center",
+    gap: "15px",
+    fontWeight: "bold",
+  },
+  indexAdvisorCheckboxSpacer: {
+    width: "18px",
+    height: "18px",
+  },
+  indexAdvisorChevronSpacer: {
+    width: "24px",
+  },
+  indexAdvisorRowBold: {
+    fontWeight: "bold",
+  },
+  indexAdvisorRowNormal: {
+    fontWeight: "normal",
+  },
+  indexAdvisorRowImpactHeader: {
+    fontSize: 0,
+  },
+  indexAdvisorRowImpact: {
+    fontWeight: "normal",
+  },
+  indexAdvisorImpactDot: {
+    color: "#0078D4",
+    fontSize: "12px",
+    display: "inline-flex",
+  },
+  indexAdvisorImpactDots: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+  },
+  indexAdvisorButtonBar: {
+    padding: "1rem",
+    marginTop: "-7rem",
+    flexWrap: "wrap",
+  },
+  indexAdvisorButtonSpinner: {
+    marginTop: "1rem",
+    minWidth: "320px",
+    minHeight: "40px",
+    display: "flex",
+    alignItems: "left",
+    justifyContent: "left",
+    marginLeft: "10rem",
+  },
+  indexAdvisorButton: {
+    backgroundColor: "#0078D4",
+    color: "white",
+    padding: "8px 16px",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    marginTop: "1rem",
+    fontSize: "1rem",
+    fontWeight: 500,
+    transition: "background 0.2s",
+    ":hover": {
+      backgroundColor: "#005a9e",
+    },
+  },
+});

src/Explorer/Tabs/QueryTab/useQueryMetadataStore.ts

@@ -0,0 +1,15 @@
+import create from "zustand";
+
+interface QueryMetadataStore {
+  userQuery: string;
+  databaseId: string;
+  containerId: string;
+  setMetadata: (query1: string, db: string, container: string) => void;
+}
+
+export const useQueryMetadataStore = create<QueryMetadataStore>((set) => ({
+  userQuery: "",
+  databaseId: "",
+  containerId: "",
+  setMetadata: (query1, db, container) => set({ userQuery: query1, databaseId: db, containerId: container }),
+}));

src/Main.tsx

@@ -125,10 +125,7 @@ const App = (): JSX.Element => {
       <KeyboardShortcutRoot>
         <div className="flexContainer" aria-hidden="false">
           {userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
-            <>
             <ContainerCopyPanel explorer={explorer} />
-              <SidePanel />
-            </>
           ) : (
             <DivExplorer explorer={explorer} />
           )}

src/less/DarkModeMenus.less

@@ -316,6 +316,11 @@ body.isDarkMode {
       background-color: transparent;
     }
     
+    // High specificity override for any nested elements
+    * {
+      color: var(--colorNeutralForeground1);
+    }
+    
     // Ensure links maintain proper colors
     .ms-Link {
       color: var(--colorBrandForeground1);
@@ -433,6 +438,7 @@ body.isDarkMode {
 
   button {
     &:not(.ms-Button):not(.ms-IconButton) {
+      background-color: var(--colorNeutralBackground1);
       color: var(--colorNeutralForeground1);
       
       &:hover {

src/less/ThemeSystem.less

@@ -12,7 +12,6 @@
   --colorCompoundBrandStroke1: @SelectionColor;
   --colorBrandForeground1: @LinkColor;
   --colorPaletteRedForeground1: @ErrorColor;
-  --colorSuccessGreen: #107c10;
   --overlayBackground: rgba(0, 0, 0, 0.4);
   --colorBrandBackground: @SelectionColor;
   --colorBrandBackgroundHover: @AccentMediumHigh;
@@ -33,7 +32,6 @@ body.isDarkMode {
   --colorCompoundBrandStroke1: #4db6e8;
   --colorBrandForeground1: #4db6e8;
   --colorPaletteRedForeground1: #f25d5d;
-  --colorSuccessGreen: #107c10;
   --overlayBackground: rgba(0, 0, 0, 0.4);
   --colorBrandBackground: #0078d4;
   --colorBrandBackgroundHover: #106ebe;

test/README.md

@@ -164,9 +164,6 @@ $ENV:NOSQL_TESTACCOUNT_TOKEN=az account get-access-token --scope "https://<accou
 # NoSQL API (Readonly)
 $ENV:NOSQL_READONLY_TESTACCOUNT_TOKEN=az account get-access-token --scope "https://<account name>.documents.azure.com/.default" -o tsv --query accessToken
 
-# NoSQL API (Container Copy)
-$ENV:NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN=az account get-access-token --scope "https://<account name>.documents.azure.com/.default" -o tsv --query accessToken
-
 # Tables API
 $ENV:TABLE_TESTACCOUNT_TOKEN=az account get-access-token --scope "https://<account name>.documents.azure.com/.default" -o tsv --query accessToken
 

test/cassandra/container.spec.ts

@@ -8,8 +8,7 @@ test("Cassandra keyspace and table CRUD", async ({ page }) => {
 
   const explorer = await DataExplorer.open(page, TestAccount.Cassandra);
 
-  const newTableButton = await explorer.globalCommandButton("New Table");
-  await newTableButton.click();
+  await explorer.globalCommandButton("New Table").click();
   await explorer.whilePanelOpen(
     "Add Table",
     async (panel, okButton) => {

test/fx.ts

@@ -11,7 +11,7 @@ export interface TestNameOptions {
   prefixed?: boolean;
 }
 
-export function generateUniqueName(baseName: string, options?: TestNameOptions): string {
+export function generateUniqueName(baseName, options?: TestNameOptions): string {
   const length = options?.length ?? 1;
   const timestamp = options?.timestampped === undefined ? true : options.timestampped;
   const prefixed = options?.prefixed === undefined ? true : options.prefixed;
@@ -40,7 +40,6 @@ export enum TestAccount {
   Mongo32 = "Mongo32",
   SQL = "SQL",
   SQLReadOnly = "SQLReadOnly",
-  SQLContainerCopyOnly = "SQLContainerCopyOnly",
 }
 
 export const defaultAccounts: Record<TestAccount, string> = {
@@ -52,7 +51,6 @@ export const defaultAccounts: Record<TestAccount, string> = {
   [TestAccount.Mongo32]: "github-e2etests-mongo32",
   [TestAccount.SQL]: "github-e2etests-sql",
   [TestAccount.SQLReadOnly]: "github-e2etests-sql-readonly",
-  [TestAccount.SQLContainerCopyOnly]: "github-e2etests-sql-containercopyonly",
 };
 
 export const resourceGroupName = process.env.DE_TEST_RESOURCE_GROUP ?? "de-e2e-tests";
@@ -79,14 +77,7 @@ export function getAccountName(accountType: TestAccount) {
   );
 }
 
-type TestExplorerUrlOptions = {
-  iframeSrc?: string;
-  enablecontainercopy?: boolean;
-};
-
-export async function getTestExplorerUrl(accountType: TestAccount, options?: TestExplorerUrlOptions): Promise<string> {
-  const { iframeSrc, enablecontainercopy } = options ?? {};
-
+export async function getTestExplorerUrl(accountType: TestAccount, iframeSrc?: string): Promise<string> {
   // We can't retrieve AZ CLI credentials from the browser so we get them here.
   const token = await getAzureCLICredentialsToken();
   const accountName = getAccountName(accountType);
@@ -102,7 +93,6 @@ export async function getTestExplorerUrl(accountType: TestAccount, options?: Tes
 
   const nosqlRbacToken = process.env.NOSQL_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;
   const gremlinRbacToken = process.env.GREMLIN_TESTACCOUNT_TOKEN;
   const cassandraRbacToken = process.env.CASSANDRA_TESTACCOUNT_TOKEN;
@@ -118,16 +108,6 @@ export async function getTestExplorerUrl(accountType: TestAccount, options?: Tes
       }
       break;
 
-    case TestAccount.SQLContainerCopyOnly:
-      if (nosqlContainerCopyRbacToken) {
-        params.set("nosqlRbacToken", nosqlContainerCopyRbacToken);
-        params.set("enableaaddataplane", "true");
-      }
-      if (enablecontainercopy) {
-        params.set("enablecontainercopy", "true");
-      }
-      break;
-
     case TestAccount.SQLReadOnly:
       if (nosqlReadOnlyRbacToken) {
         params.set("nosqlReadOnlyRbacToken", nosqlReadOnlyRbacToken);
@@ -185,39 +165,6 @@ export async function getTestExplorerUrl(accountType: TestAccount, options?: Tes
   return `https://localhost:1234/testExplorer.html?${params.toString()}`;
 }
 
-type DropdownItemExpectations = {
-  ariaLabel?: string;
-  itemCount?: number;
-};
-
-type DropdownItemMatcher = {
-  name?: string;
-  position?: number;
-};
-
-export async function getDropdownItemByNameOrPosition(
-  frame: Frame,
-  matcher?: DropdownItemMatcher,
-  expectedOptions?: DropdownItemExpectations,
-): Promise<Locator> {
-  const dropdownItemsWrapper = frame.locator("div.ms-Dropdown-items");
-  if (expectedOptions?.ariaLabel) {
-    expect(await dropdownItemsWrapper.getAttribute("aria-label")).toEqual(expectedOptions.ariaLabel);
-  }
-  if (expectedOptions?.itemCount) {
-    const items = dropdownItemsWrapper.locator("button.ms-Dropdown-item[role='option']");
-    await expect(items).toHaveCount(expectedOptions.itemCount);
-  }
-  const containerDropdownItems = dropdownItemsWrapper.locator("button.ms-Dropdown-item[role='option']");
-  if (matcher?.name) {
-    return containerDropdownItems.filter({ hasText: matcher.name });
-  } else if (matcher?.position !== undefined) {
-    return containerDropdownItems.nth(matcher.position);
-  }
-  // Return first item if no matcher is provided
-  return containerDropdownItems.first();
-}
-
 /** Helper class that provides locator methods for TreeNode elements, on top of a Locator */
 class TreeNode {
   constructor(
@@ -405,9 +352,8 @@ export class DataExplorer {
    *
    * There's only a single "primary" button, but we still require you to pass the label to confirm you're selecting the right button.
    */
-  async globalCommandButton(label: string): Promise<Locator> {
-    await this.frame.getByTestId("GlobalCommands").click();
-    return this.frame.getByRole("menuitem", { name: label });
+  globalCommandButton(label: string): Locator {
+    return this.frame.getByTestId("GlobalCommands").getByText(label);
   }
 
   /** Select the command bar button with the specified label */
@@ -513,15 +459,6 @@ export class DataExplorer {
     const containerNode = await this.waitForContainerNode(context.database.id, context.container.id);
     await containerNode.expand();
 
-    // refresh tree to remove deleted database
-    const consoleMessages = await this.getNotificationConsoleMessages();
-    const refreshButton = this.frame.getByTestId("Sidebar/RefreshButton");
-    await refreshButton.click();
-    await expect(consoleMessages).toContainText("Successfully refreshed databases", {
-      timeout: ONE_MINUTE_MS,
-    });
-    await this.collapseNotificationConsole();
-
     const scaleAndSettingsButton = this.frame.getByTestId(
       `TreeNode:${context.database.id}/${context.container.id}/Scale & Settings`,
     );
@@ -529,46 +466,12 @@ export class DataExplorer {
   }
 
   /** Gets the console message element */
-  getConsoleHeaderStatus(): Locator {
+  getConsoleMessage(): Locator {
     return this.frame.getByTestId("notification-console/header-status");
   }
 
-  async expandNotificationConsole(): Promise<void> {
-    await this.setNotificationConsoleExpanded(true);
-  }
-
-  async collapseNotificationConsole(): Promise<void> {
-    await this.setNotificationConsoleExpanded(false);
-  }
-
-  async setNotificationConsoleExpanded(expanded: boolean): Promise<void> {
-    const notificationConsoleToggleButton = this.frame.getByTestId("NotificationConsole/ExpandCollapseButton");
-    const alt = await notificationConsoleToggleButton.locator("img").getAttribute("alt");
-
-    // When expanded, the icon says "Collapse icon"
-    if (expanded && alt === "Expand icon") {
-      await notificationConsoleToggleButton.click();
-    } else if (!expanded && alt === "Collapse icon") {
-      await notificationConsoleToggleButton.click();
-    }
-  }
-
-  async getNotificationConsoleMessages(): Promise<Locator> {
-    await this.setNotificationConsoleExpanded(true);
-    return this.frame.getByTestId("NotificationConsole/Contents");
-  }
-
-  async getDropdownItemByName(name: string, ariaLabel?: string): Promise<Locator> {
-    const dropdownItemsWrapper = this.frame.locator("div.ms-Dropdown-items");
-    if (ariaLabel) {
-      expect(await dropdownItemsWrapper.getAttribute("aria-label")).toEqual(ariaLabel);
-    }
-    const containerDropdownItems = dropdownItemsWrapper.locator("button.ms-Dropdown-item[role='option']");
-    return containerDropdownItems.filter({ hasText: name });
-  }
-
   /** Waits for the Data Explorer app to load */
-  static async waitForExplorer(page: Page, options?: TestExplorerUrlOptions): Promise<DataExplorer> {
+  static async waitForExplorer(page: Page) {
     const iframeElement = await page.getByTestId("DataExplorerFrame").elementHandle();
     if (iframeElement === null) {
       throw new Error("Explorer iframe not found");
@@ -580,126 +483,15 @@ export class DataExplorer {
       throw new Error("Explorer frame not found");
     }
 
-    if (!options?.enablecontainercopy) {
     await explorerFrame?.getByTestId("DataExplorerRoot").waitFor();
-    }
 
     return new DataExplorer(explorerFrame);
   }
 
   /** Opens the Data Explorer app using the specified test account (and optionally, the provided IFRAME src url). */
   static async open(page: Page, testAccount: TestAccount, iframeSrc?: string): Promise<DataExplorer> {
-    const url = await getTestExplorerUrl(testAccount, { iframeSrc });
+    const url = await getTestExplorerUrl(testAccount, iframeSrc);
     await page.goto(url);
     return DataExplorer.waitForExplorer(page);
   }
 }
-
-export async function waitForApiResponse(
-  page: Page,
-  urlPattern: string,
-  method?: string,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  payloadValidator?: (payload: any) => boolean,
-) {
-  try {
-    // Check if page is still valid before waiting
-    if (page.isClosed()) {
-      throw new Error(`Page is closed, cannot wait for API response: ${urlPattern}`);
-    }
-
-    return page.waitForResponse(
-      async (response) => {
-        const request = response.request();
-
-        if (!request.url().includes(urlPattern)) {
-          return false;
-        }
-
-        if (method && request.method() !== method) {
-          return false;
-        }
-
-        if (payloadValidator && (request.method() === "POST" || request.method() === "PUT")) {
-          const postData = request.postData();
-          if (postData) {
-            try {
-              const payload = JSON.parse(postData);
-              return payloadValidator(payload);
-            } catch {
-              return false;
-            }
-          }
-        }
-        return true;
-      },
-      { timeout: 60 * 1000 },
-    );
-  } catch (error) {
-    if (error instanceof Error && error.message.includes("Target page, context or browser has been closed")) {
-      console.warn("Page was closed while waiting for API response:", urlPattern);
-      throw new Error(`Page closed while waiting for API response: ${urlPattern}`);
-    }
-    throw error;
-  }
-}
-export async function interceptAndInspectApiRequest(
-  page: Page,
-  urlPattern: string,
-  method: string = "POST",
-  error: Error,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  errorValidator: (url?: string, payload?: any) => boolean,
-): Promise<void> {
-  await page.route(
-    (url) => url.pathname.includes(urlPattern),
-    async (route, request) => {
-      if (request.method() !== method) {
-        await route.continue();
-        return;
-      }
-      const postData = request.postData();
-      if (postData) {
-        try {
-          const payload = JSON.parse(postData);
-          if (errorValidator && errorValidator(request.url(), payload)) {
-            await route.fulfill({
-              status: 409,
-              contentType: "application/json",
-              body: JSON.stringify({
-                code: "Conflict",
-                message: error.message,
-              }),
-            });
-            return;
-          }
-        } catch (err) {
-          if (err instanceof Error && err.message.includes("not allowed")) {
-            throw err;
-          }
-        }
-      }
-
-      await route.continue();
-    },
-  );
-}
-
-export class ContainerCopy {
-  constructor(
-    public frame: Frame,
-    public wrapper: Locator,
-  ) {}
-
-  static async waitForContainerCopy(page: Page): Promise<ContainerCopy> {
-    const explorerFrame = await DataExplorer.waitForExplorer(page, { enablecontainercopy: true });
-    const containerCopyWrapper = explorerFrame.frame.locator("div#containerCopyWrapper");
-    return new ContainerCopy(explorerFrame.frame, containerCopyWrapper);
-  }
-
-  static async open(page: Page, testAccount: TestAccount, iframeSrc?: string): Promise<ContainerCopy> {
-    const url = await getTestExplorerUrl(testAccount, { iframeSrc, enablecontainercopy: true });
-    await page.goto(url);
-    return ContainerCopy.waitForContainerCopy(page);
-  }
-}

test/gremlin/container.spec.ts

@@ -9,8 +9,7 @@ test("Gremlin graph CRUD", async ({ page }) => {
   const explorer = await DataExplorer.open(page, TestAccount.Gremlin);
 
   // Create new database and graph
-  const newGraphButton = await explorer.globalCommandButton("New Graph");
-  await newGraphButton.click();
+  await explorer.globalCommandButton("New Graph").click();
   await explorer.whilePanelOpen(
     "New Graph",
     async (panel, okButton) => {

test/mongo/container.spec.ts

@@ -14,8 +14,7 @@ import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUnique
 
     const explorer = await DataExplorer.open(page, accountType);
 
-    const newCollectionButton = await explorer.globalCommandButton("New Collection");
-    await newCollectionButton.click();
+    await explorer.globalCommandButton("New Collection").click();
     await explorer.whilePanelOpen(
       "New Collection",
       async (panel, okButton) => {

test/sql/container.spec.ts

@@ -8,8 +8,7 @@ test("SQL database and container CRUD", async ({ page }) => {
 
   const explorer = await DataExplorer.open(page, TestAccount.SQL);
 
-  const newContainerButton = await explorer.globalCommandButton("New Container");
-  await newContainerButton.click();
+  await explorer.globalCommandButton("New Container").click();
   await explorer.whilePanelOpen(
     "New Container",
     async (panel, okButton) => {

test/sql/containercopy.spec.ts

@@ -1,493 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { expect, Frame, Locator, Page, test } from "@playwright/test";
-import { set } from "lodash";
-import { truncateName } from "../../src/Explorer/ContainerCopy/CopyJobUtils";
-import {
-  ContainerCopy,
-  getAccountName,
-  getDropdownItemByNameOrPosition,
-  interceptAndInspectApiRequest,
-  TestAccount,
-  waitForApiResponse,
-} from "../fx";
-import { createMultipleTestContainers } from "../testData";
-
-let page: Page;
-let wrapper: Locator = null!;
-let panel: Locator = null!;
-let frame: Frame = null!;
-let expectedCopyJobNameInitial: string = null!;
-let expectedJobName: string = "";
-let targetAccountName: string = "";
-let expectedSourceAccountName: string = "";
-let expectedSubscriptionName: string = "";
-const VISIBLE_TIMEOUT_MS = 30 * 1000;
-
-test.describe.configure({ mode: "serial" });
-
-test.describe("Container Copy", () => {
-  test.beforeAll("Container Copy - Before All", async ({ browser }) => {
-    await createMultipleTestContainers({ accountType: TestAccount.SQLContainerCopyOnly, containerCount: 3 });
-
-    page = await browser.newPage();
-    ({ wrapper, frame } = await ContainerCopy.open(page, TestAccount.SQLContainerCopyOnly));
-    expectedJobName = `test_job_${Date.now()}`;
-    targetAccountName = getAccountName(TestAccount.SQLContainerCopyOnly);
-  });
-
-  test.afterEach("Container Copy - After Each", async () => {
-    await page.unroute(/.*/, (route) => route.continue());
-  });
-
-  test("Loading and verifying the content of the page", async () => {
-    expect(wrapper).not.toBeNull();
-    await expect(wrapper.getByTestId("CommandBar/Button:Create Copy Job")).toBeVisible({ timeout: VISIBLE_TIMEOUT_MS });
-    await expect(wrapper.getByTestId("CommandBar/Button:Refresh")).toBeVisible({ timeout: VISIBLE_TIMEOUT_MS });
-    await expect(wrapper.getByTestId("CommandBar/Button:Feedback")).toBeVisible({ timeout: VISIBLE_TIMEOUT_MS });
-  });
-
-  test("Successfully create a copy job for offline migration", async () => {
-    expect(wrapper).not.toBeNull();
-    // Loading and verifying subscription & account dropdown
-
-    const createCopyJobButton = wrapper.getByTestId("CommandBar/Button:Create Copy Job");
-    await createCopyJobButton.click();
-    panel = frame.getByTestId("Panel:Create copy job");
-    await expect(panel).toBeVisible();
-
-    await page.waitForTimeout(10 * 1000);
-
-    const subscriptionDropdown = panel.getByTestId("subscription-dropdown");
-
-    const expectedAccountName = targetAccountName;
-    expectedSubscriptionName = await subscriptionDropdown.locator("span.ms-Dropdown-title").innerText();
-
-    await subscriptionDropdown.click();
-    const subscriptionItem = await getDropdownItemByNameOrPosition(
-      frame,
-      { name: expectedSubscriptionName },
-      { ariaLabel: "Subscription" },
-    );
-    await subscriptionItem.click();
-
-    // Load account dropdown based on selected subscription
-
-    const accountDropdown = panel.getByTestId("account-dropdown");
-    await expect(accountDropdown).toHaveText(new RegExp(expectedAccountName));
-    await accountDropdown.click();
-
-    const accountItem = await getDropdownItemByNameOrPosition(
-      frame,
-      { name: expectedAccountName },
-      { ariaLabel: "Account" },
-    );
-    await accountItem.click();
-
-    // Verifying online or offline checkbox functionality
-    /**
-     * This test verifies the functionality of the migration type checkbox that toggles between
-     * online and offline container copy modes. It ensures that:
-     * 1. When online mode is selected, the user is directed to a permissions screen
-     * 2. When offline mode is selected, the user bypasses the permissions screen
-     * 3. The UI correctly reflects the selected migration type throughout the workflow
-     */
-    const fluentUiCheckboxContainer = panel.getByTestId("migration-type-checkbox").locator("div.ms-Checkbox");
-    await fluentUiCheckboxContainer.click();
-    await panel.getByRole("button", { name: "Next" }).click();
-    await expect(panel.getByTestId("Panel:AssignPermissionsContainer")).toBeVisible();
-    await expect(panel.getByText("Online container copy", { exact: true })).toBeVisible();
-    await panel.getByRole("button", { name: "Previous" }).click();
-    await fluentUiCheckboxContainer.click();
-    await panel.getByRole("button", { name: "Next" }).click();
-    await expect(panel.getByTestId("Panel:SelectSourceAndTargetContainers")).toBeVisible();
-    await expect(panel.getByTestId("Panel:AssignPermissionsContainer")).not.toBeVisible();
-
-    // Verifying source and target container selection
-
-    const sourceContainerDropdown = panel.getByTestId("source-containerDropdown");
-    expect(sourceContainerDropdown).toBeVisible();
-    await expect(sourceContainerDropdown).toHaveClass(/(^|\s)is-disabled(\s|$)/);
-
-    const sourceDatabaseDropdown = panel.getByTestId("source-databaseDropdown");
-    await sourceDatabaseDropdown.click();
-
-    const sourceDbDropdownItem = await getDropdownItemByNameOrPosition(
-      frame,
-      { position: 0 },
-      { ariaLabel: "Database" },
-    );
-    await sourceDbDropdownItem.click();
-
-    await expect(sourceContainerDropdown).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
-    await sourceContainerDropdown.click();
-    const sourceContainerDropdownItem = await getDropdownItemByNameOrPosition(
-      frame,
-      { position: 0 },
-      { ariaLabel: "Container" },
-    );
-    await sourceContainerDropdownItem.click();
-
-    const targetContainerDropdown = panel.getByTestId("target-containerDropdown");
-    expect(targetContainerDropdown).toBeVisible();
-    await expect(targetContainerDropdown).toHaveClass(/(^|\s)is-disabled(\s|$)/);
-
-    const targetDatabaseDropdown = panel.getByTestId("target-databaseDropdown");
-    await targetDatabaseDropdown.click();
-    const targetDbDropdownItem = await getDropdownItemByNameOrPosition(
-      frame,
-      { position: 0 },
-      { ariaLabel: "Database" },
-    );
-    await targetDbDropdownItem.click();
-
-    await expect(targetContainerDropdown).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
-    await targetContainerDropdown.click();
-    const targetContainerDropdownItem1 = await getDropdownItemByNameOrPosition(
-      frame,
-      { position: 0 },
-      { ariaLabel: "Container" },
-    );
-    await targetContainerDropdownItem1.click();
-
-    await panel.getByRole("button", { name: "Next" }).click();
-
-    const errorContainer = panel.getByTestId("Panel:ErrorContainer");
-    await expect(errorContainer).toBeVisible();
-    await expect(errorContainer).toHaveText(/Source and destination containers cannot be the same/i);
-
-    // Reselect target container to be different from source container
-    await targetContainerDropdown.click();
-    const targetContainerDropdownItem2 = await getDropdownItemByNameOrPosition(
-      frame,
-      { position: 1 },
-      { ariaLabel: "Container" },
-    );
-    await targetContainerDropdownItem2.click();
-
-    const selectedSourceDatabase = await sourceDatabaseDropdown.innerText();
-    const selectedSourceContainer = await sourceContainerDropdown.innerText();
-    const selectedTargetDatabase = await targetDatabaseDropdown.innerText();
-    const selectedTargetContainer = await targetContainerDropdown.innerText();
-    expectedCopyJobNameInitial = `${truncateName(selectedSourceDatabase)}.${truncateName(
-      selectedSourceContainer,
-    )}_${truncateName(selectedTargetDatabase)}.${truncateName(selectedTargetContainer)}`;
-
-    await panel.getByRole("button", { name: "Next" }).click();
-
-    await expect(errorContainer).not.toBeVisible();
-    await expect(panel.getByTestId("Panel:PreviewCopyJob")).toBeVisible();
-
-    // Verifying the preview of the copy job
-    const previewContainer = panel.getByTestId("Panel:PreviewCopyJob");
-    await expect(previewContainer).toBeVisible();
-    await expect(previewContainer.getByTestId("source-subscription-name")).toHaveText(expectedSubscriptionName);
-    await expect(previewContainer.getByTestId("source-account-name")).toHaveText(expectedAccountName);
-    const jobNameInput = previewContainer.getByTestId("job-name-textfield");
-    await expect(jobNameInput).toHaveValue(new RegExp(expectedCopyJobNameInitial));
-    const primaryBtn = panel.getByRole("button", { name: "Copy", exact: true });
-    await expect(primaryBtn).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
-
-    await jobNameInput.fill("test job name");
-    await expect(primaryBtn).toHaveClass(/(^|\s)is-disabled(\s|$)/);
-
-    // Testing API request interception with duplicate job name
-    const duplicateJobName = "test-job-name-1";
-    await jobNameInput.fill(duplicateJobName);
-
-    const copyButton = panel.getByRole("button", { name: "Copy", exact: true });
-    const expectedErrorMessage = `Duplicate job name '${duplicateJobName}'`;
-    await interceptAndInspectApiRequest(
-      page,
-      `${expectedAccountName}/dataTransferJobs/${duplicateJobName}`,
-      "PUT",
-      new Error(expectedErrorMessage),
-      (url?: string) => url?.includes(duplicateJobName) ?? false,
-    );
-
-    let errorThrown = false;
-    try {
-      await copyButton.click();
-      await page.waitForTimeout(2000);
-    } catch (error: any) {
-      errorThrown = true;
-      expect(error.message).toContain("not allowed");
-    }
-    if (!errorThrown) {
-      const errorContainer = panel.getByTestId("Panel:ErrorContainer");
-      await expect(errorContainer).toBeVisible();
-      await expect(errorContainer).toHaveText(new RegExp(expectedErrorMessage, "i"));
-    }
-
-    await expect(panel).toBeVisible();
-
-    // Testing API request success with valid job name and verifying copy job creation
-
-    const validJobName = expectedJobName;
-
-    const copyJobCreationPromise = waitForApiResponse(
-      page,
-      `${expectedAccountName}/dataTransferJobs/${validJobName}`,
-      "PUT",
-    );
-
-    await jobNameInput.fill(validJobName);
-    await expect(copyButton).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
-
-    await copyButton.click();
-
-    const response = await copyJobCreationPromise;
-    expect(response.ok()).toBe(true);
-
-    await expect(panel).not.toBeVisible({ timeout: 10000 });
-
-    const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
-    await jobsListContainer.waitFor({ state: "visible" });
-
-    const jobItem = jobsListContainer.getByText(validJobName);
-    await jobItem.waitFor({ state: "visible" });
-    await expect(jobItem).toBeVisible();
-  });
-
-  test("Verify Online or Offline Container Copy Permissions Panel", async () => {
-    expect(wrapper).not.toBeNull();
-
-    // Opening the Create Copy Job panel again to verify initial state
-    const createCopyJobButton = wrapper.getByTestId("CommandBar/Button:Create Copy Job");
-    await createCopyJobButton.click();
-    panel = frame.getByTestId("Panel:Create copy job");
-    await expect(panel).toBeVisible();
-    await expect(panel.getByRole("heading", { name: "Create copy job" })).toBeVisible();
-
-    // select different account dropdown
-
-    const accountDropdown = panel.getByTestId("account-dropdown");
-    await accountDropdown.click();
-
-    const dropdownItemsWrapper = frame.locator("div.ms-Dropdown-items");
-    expect(await dropdownItemsWrapper.getAttribute("aria-label")).toEqual("Account");
-
-    const allDropdownItems = await dropdownItemsWrapper.locator(`button.ms-Dropdown-item[role='option']`).all();
-
-    const filteredItems = [];
-    for (const item of allDropdownItems) {
-      const testContent = (await item.textContent()) ?? "";
-      if (testContent.trim() !== targetAccountName.trim()) {
-        filteredItems.push(item);
-      }
-    }
-
-    if (filteredItems.length > 0) {
-      const firstDropdownItem = filteredItems[0];
-      expectedSourceAccountName = (await firstDropdownItem.textContent()) ?? "";
-      await firstDropdownItem.click();
-    } else {
-      throw new Error("No dropdown items available after filtering");
-    }
-
-    const fluentUiCheckboxContainer = panel.getByTestId("migration-type-checkbox").locator("div.ms-Checkbox");
-    await fluentUiCheckboxContainer.click();
-
-    await panel.getByRole("button", { name: "Next" }).click();
-
-    // Verifying Assign Permissions panel for online copy
-
-    const permissionScreen = panel.getByTestId("Panel:AssignPermissionsContainer");
-    await expect(permissionScreen).toBeVisible();
-
-    await expect(permissionScreen.getByText("Online container copy", { exact: true })).toBeVisible();
-    await expect(permissionScreen.getByText("Cross-account container copy", { exact: true })).toBeVisible();
-
-    // Verify Point-in-Time Restore timer and refresh button workflow
-
-    await page.route(`**/Microsoft.DocumentDB/databaseAccounts/${expectedSourceAccountName}**`, async (route) => {
-      const mockData = {
-        identity: {
-          type: "SystemAssigned",
-          principalId: "00-11-22-33",
-        },
-        properties: {
-          defaultIdentity: "SystemAssignedIdentity",
-          backupPolicy: {
-            type: "Continuous",
-          },
-          capabilities: [{ name: "EnableOnlineContainerCopy" }],
-        },
-      };
-      if (route.request().method() === "GET") {
-        const response = await route.fetch();
-        const actualData = await response.json();
-        const mergedData = { ...actualData };
-
-        set(mergedData, "identity", mockData.identity);
-        set(mergedData, "properties.defaultIdentity", mockData.properties.defaultIdentity);
-        set(mergedData, "properties.backupPolicy", mockData.properties.backupPolicy);
-        set(mergedData, "properties.capabilities", mockData.properties.capabilities);
-
-        await route.fulfill({
-          status: 200,
-          contentType: "application/json",
-          body: JSON.stringify(mergedData),
-        });
-      } else {
-        await route.continue();
-      }
-    });
-
-    await expect(permissionScreen).toBeVisible();
-
-    const expandedOnlineAccordionHeader = permissionScreen
-      .getByTestId("permission-group-container-onlineConfigs")
-      .locator("button[aria-expanded='true']");
-    await expect(expandedOnlineAccordionHeader).toBeVisible();
-
-    const accordionItem = expandedOnlineAccordionHeader
-      .locator("xpath=ancestor::*[contains(@class, 'fui-AccordionItem') or contains(@data-test, 'accordion-item')]")
-      .first();
-
-    const accordionPanel = accordionItem
-      .locator("[role='tabpanel'], .fui-AccordionPanel, [data-test*='panel']")
-      .first();
-
-    await page.clock.install({ time: new Date("2024-01-01T10:00:00Z") });
-
-    const pitrBtn = accordionPanel.getByTestId("pointInTimeRestore:PrimaryBtn");
-    await expect(pitrBtn).toBeVisible();
-    await pitrBtn.click();
-
-    page.context().on("page", async (newPage) => {
-      const expectedUrlEndPattern = new RegExp(
-        `/providers/Microsoft.(DocumentDB|DocumentDb)/databaseAccounts/${expectedSourceAccountName}/backupRestore`,
-      );
-      expect(newPage.url()).toMatch(expectedUrlEndPattern);
-      await newPage.close();
-    });
-
-    const loadingOverlay = frame.locator("[data-test='loading-overlay']");
-    await expect(loadingOverlay).toBeVisible();
-
-    const refreshBtn = accordionPanel.getByTestId("pointInTimeRestore:RefreshBtn");
-    await expect(refreshBtn).not.toBeVisible();
-
-    // Fast forward time by 11 minutes (11 * 60 * 1000ms = 660000ms)
-    await page.clock.fastForward(11 * 60 * 1000);
-
-    await expect(refreshBtn).toBeVisible();
-    await expect(pitrBtn).not.toBeVisible();
-
-    // Veify Popover & Loading Overlay on permission screen with API mocks and accordion interactions
-
-    await page.route(
-      `**/Microsoft.DocumentDB/databaseAccounts/${expectedSourceAccountName}/sqlRoleAssignments*`,
-      async (route) => {
-        await route.fulfill({
-          status: 200,
-          contentType: "application/json",
-          body: JSON.stringify({
-            value: [
-              {
-                principalId: "00-11-22-33",
-                roleDefinitionId: `Microsoft.DocumentDB/databaseAccounts/${expectedSourceAccountName}/77-88-99`,
-              },
-            ],
-          }),
-        });
-      },
-    );
-
-    await page.route("**/Microsoft.DocumentDB/databaseAccounts/*/77-88-99**", async (route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: "application/json",
-        body: JSON.stringify({
-          value: [
-            {
-              name: "00000000-0000-0000-0000-000000000001",
-            },
-          ],
-        }),
-      });
-    });
-
-    await page.route(`**/Microsoft.DocumentDB/databaseAccounts/${targetAccountName}**`, async (route) => {
-      const mockData = {
-        identity: {
-          type: "SystemAssigned",
-          principalId: "00-11-22-33",
-        },
-        properties: {
-          defaultIdentity: "SystemAssignedIdentity",
-          backupPolicy: {
-            type: "Continuous",
-          },
-          capabilities: [{ name: "EnableOnlineContainerCopy" }],
-        },
-      };
-
-      if (route.request().method() === "PATCH") {
-        await route.fulfill({
-          status: 200,
-          contentType: "application/json",
-          body: JSON.stringify({ status: "Succeeded" }),
-        });
-      } else if (route.request().method() === "GET") {
-        // Get the actual response and merge with mock data
-        const response = await route.fetch();
-        const actualData = await response.json();
-        const mergedData = { ...actualData };
-        set(mergedData, "identity", mockData.identity);
-        set(mergedData, "properties.defaultIdentity", mockData.properties.defaultIdentity);
-        set(mergedData, "properties.backupPolicy", mockData.properties.backupPolicy);
-        set(mergedData, "properties.capabilities", mockData.properties.capabilities);
-
-        await route.fulfill({
-          status: 200,
-          contentType: "application/json",
-          body: JSON.stringify(mergedData),
-        });
-      } else {
-        await route.continue();
-      }
-    });
-
-    await expect(permissionScreen).toBeVisible();
-
-    const expandedCrossAccordionHeader = permissionScreen
-      .getByTestId("permission-group-container-crossAccountConfigs")
-      .locator("button[aria-expanded='true']");
-    await expect(expandedCrossAccordionHeader).toBeVisible();
-
-    const crossAccordionItem = expandedCrossAccordionHeader
-      .locator("xpath=ancestor::*[contains(@class, 'fui-AccordionItem') or contains(@data-test, 'accordion-item')]")
-      .first();
-
-    const crossAccordionPanel = crossAccordionItem
-      .locator("[role='tabpanel'], .fui-AccordionPanel, [data-test*='panel']")
-      .first();
-
-    const toggleButton = crossAccordionPanel.getByTestId("btn-toggle");
-    await expect(toggleButton).toBeVisible();
-    await toggleButton.click();
-
-    const popover = frame.locator("[data-test='popover-container']");
-    await expect(popover).toBeVisible();
-
-    const yesButton = popover.getByRole("button", { name: /Yes/i });
-    const noButton = popover.getByRole("button", { name: /No/i });
-    await expect(yesButton).toBeVisible();
-    await expect(noButton).toBeVisible();
-
-    await yesButton.click();
-
-    await expect(loadingOverlay).toBeVisible();
-
-    await expect(loadingOverlay).toBeHidden({ timeout: 10 * 1000 });
-    await expect(popover).toBeHidden({ timeout: 10 * 1000 });
-
-    await panel.getByRole("button", { name: "Cancel" }).click();
-  });
-
-  test.afterAll("Container Copy - After All", async () => {
-    await page.unroute(/.*/, (route) => route.continue());
-    await page.close();
-  });
-});

test/sql/indexAdvisor.spec.ts

@@ -0,0 +1,145 @@
+import { expect, test, type Page } from "@playwright/test";
+
+import { CommandBarButton, DataExplorer, TestAccount } from "../fx";
+import { createTestSQLContainer, TestContainerContext } from "../testData";
+
+// Test container context for setup and cleanup
+let testContainer: TestContainerContext;
+let DATABASE_ID: string;
+let CONTAINER_ID: string;
+
+// Set up test database and container with data before all tests
+test.beforeAll(async () => {
+  testContainer = await createTestSQLContainer(true);
+  DATABASE_ID = testContainer.database.id;
+  CONTAINER_ID = testContainer.container.id;
+});
+
+// Clean up test database after all tests
+test.afterAll(async () => {
+  if (testContainer) {
+    await testContainer.dispose();
+  }
+});
+
+// Helper function to set up query tab and navigate to Index Advisor
+async function setupIndexAdvisorTab(page: Page, customQuery?: string) {
+  const explorer = await DataExplorer.open(page, TestAccount.SQL);
+  const databaseNode = await explorer.waitForNode(DATABASE_ID);
+  await databaseNode.expand();
+  await page.waitForTimeout(2000);
+
+  const containerNode = await explorer.waitForNode(`${DATABASE_ID}/${CONTAINER_ID}`);
+  await containerNode.openContextMenu();
+  await containerNode.contextMenuItem("New SQL Query").click();
+  await page.waitForTimeout(2000);
+
+  const queryTab = explorer.queryTab("tab0");
+  const queryEditor = queryTab.editor();
+  await queryEditor.locator.waitFor({ timeout: 30 * 1000 });
+  await queryTab.executeCTA.waitFor();
+
+  if (customQuery) {
+    await queryEditor.locator.click();
+    await queryEditor.setText(customQuery);
+  }
+
+  const executeQueryButton = explorer.commandBarButton(CommandBarButton.ExecuteQuery);
+  await executeQueryButton.click();
+  await expect(queryTab.resultsEditor.locator).toBeAttached({ timeout: 60 * 1000 });
+
+  const indexAdvisorTab = queryTab.resultsView.getByTestId("QueryTab/ResultsPane/ResultsView/IndexAdvisorTab");
+  await indexAdvisorTab.click();
+  await page.waitForTimeout(2000);
+
+  return { explorer, queryTab, indexAdvisorTab };
+}
+
+test("Index Advisor tab loads without errors", async ({ page }) => {
+  const { indexAdvisorTab } = await setupIndexAdvisorTab(page);
+  await expect(indexAdvisorTab).toHaveAttribute("aria-selected", "true");
+});
+
+test("Verify UI sections are collapsible", async ({ page }) => {
+  const { explorer } = await setupIndexAdvisorTab(page);
+
+  // Verify both section headers exist
+  const includedHeader = explorer.frame.getByText("Included in Current Policy", { exact: true });
+  const notIncludedHeader = explorer.frame.getByText("Not Included in Current Policy", { exact: true });
+
+  await expect(includedHeader).toBeVisible();
+  await expect(notIncludedHeader).toBeVisible();
+
+  // Test collapsibility by checking if chevron/arrow icon changes state
+  // Both sections should be expandable/collapsible regardless of content
+  await includedHeader.click();
+  await page.waitForTimeout(300);
+  await includedHeader.click();
+  await page.waitForTimeout(300);
+
+  await notIncludedHeader.click();
+  await page.waitForTimeout(300);
+  await notIncludedHeader.click();
+  await page.waitForTimeout(300);
+});
+
+test("Verify SDK response structure - Case 1: Empty response", async ({ page }) => {
+  const { explorer } = await setupIndexAdvisorTab(page);
+
+  // Verify both section headers still exist even with no data
+  await expect(explorer.frame.getByText("Included in Current Policy", { exact: true })).toBeVisible();
+  await expect(explorer.frame.getByText("Not Included in Current Policy", { exact: true })).toBeVisible();
+
+  // Verify table headers
+  const table = explorer.frame.locator("table");
+  await expect(table.getByText("Index", { exact: true })).toBeVisible();
+  await expect(table.getByText("Estimated Impact", { exact: true })).toBeVisible();
+
+  // Verify "Update Indexing Policy" button is NOT visible when there are no potential indexes
+  const updateButton = explorer.frame.getByRole("button", { name: /Update Indexing Policy/i });
+  await expect(updateButton).not.toBeVisible();
+});
+
+test("Verify index suggestions and apply potential index", async ({ page }) => {
+  const customQuery = 'SELECT * FROM c WHERE c.partitionKey = "partition_1" ORDER BY c.randomData';
+  const { explorer } = await setupIndexAdvisorTab(page, customQuery);
+
+  // Wait for Index Advisor to process the query
+  await page.waitForTimeout(2000);
+
+  // Verify "Not Included in Current Policy" section has suggestions
+  const notIncludedHeader = explorer.frame.getByText("Not Included in Current Policy", { exact: true });
+  await expect(notIncludedHeader).toBeVisible();
+
+  // Find the checkbox for the suggested composite index
+  // The composite index should be /partitionKey ASC, /randomData ASC
+  const checkboxes = explorer.frame.locator('input[type="checkbox"]');
+  const checkboxCount = await checkboxes.count();
+
+  // Should have at least one checkbox for the potential index
+  expect(checkboxCount).toBeGreaterThan(0);
+
+  // Select the first checkbox (the high-impact composite index)
+  await checkboxes.first().check();
+  await page.waitForTimeout(500);
+
+  // Verify "Update Indexing Policy" button becomes visible
+  const updateButton = explorer.frame.getByRole("button", { name: /Update Indexing Policy/i });
+  await expect(updateButton).toBeVisible();
+
+  // Click the "Update Indexing Policy" button
+  await updateButton.click();
+  await page.waitForTimeout(1000);
+
+  // Verify success message appears
+  const successMessage = explorer.frame.getByText(/Your indexing policy has been updated with the new included paths/i);
+  await expect(successMessage).toBeVisible();
+
+  // Verify the message mentions reviewing changes in Scale & Settings
+  const reviewMessage = explorer.frame.getByText(/You may review the changes in Scale & Settings/i);
+  await expect(reviewMessage).toBeVisible();
+
+  // Verify the checkmark icon is shown
+  const checkmarkIcon = explorer.frame.locator('[data-icon-name="CheckMark"]');
+  await expect(checkmarkIcon).toBeVisible();
+});

test/sql/query.spec.ts

@@ -9,7 +9,7 @@ let queryTab: QueryTab = null!;
 let queryEditor: Editor = null!;
 
 test.beforeAll("Create Test Database", async () => {
-  context = await createTestSQLContainer({ includeTestData: true });
+  context = await createTestSQLContainer(true);
 });
 
 test.beforeEach("Open new query tab", async ({ page }) => {
@@ -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
-if (!process.env.CI) {
 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

@@ -1,104 +0,0 @@
-// import { expect, test } from "@playwright/test";
-// import { DataExplorer, getDropdownItemByNameOrPosition, TestAccount } from "../../fx";
-// import { createTestSQLContainer, TestContainerContext } from "../../testData";
-
-// test.describe("Change Partition Key", () => {
-//   let context: TestContainerContext = null!;
-//   let explorer: DataExplorer = null!;
-//   const newPartitionKeyPath = "newPartitionKey";
-//   const newContainerId = "testcontainer_1";
-
-//   test.beforeAll("Create Test Database", async () => {
-//     context = await createTestSQLContainer();
-//   });
-
-//   test.beforeEach("Open container settings", async ({ page }) => {
-//     explorer = await DataExplorer.open(page, TestAccount.SQL);
-
-//     // Click Scale & Settings and open Partition Key tab
-//     await explorer.openScaleAndSettings(context);
-//     const PartitionKeyTab = explorer.frame.getByTestId("settings-tab-header/PartitionKeyTab");
-//     await expect(PartitionKeyTab).toBeVisible();
-//     await PartitionKeyTab.click();
-//   });
-
-//   // Delete database only if not running in CI
-//   if (!process.env.CI) {
-//     test.afterEach("Delete Test Database", async () => {
-//       await context?.dispose();
-//     });
-//   }
-
-//   test("Change partition key path", async () => {
-//     await expect(explorer.frame.getByText("/partitionKey")).toBeVisible();
-//     await expect(explorer.frame.getByText("Change partition key")).toBeVisible();
-//     await expect(explorer.frame.getByText(/To safeguard the integrity of/)).toBeVisible();
-//     await expect(explorer.frame.getByText(/To change the partition key/)).toBeVisible();
-
-//     const changePartitionKeyButton = explorer.frame.getByTestId("change-partition-key-button");
-//     expect(changePartitionKeyButton).toBeVisible();
-//     await changePartitionKeyButton.click();
-
-//     // Fill out new partition key form in the panel
-//     const changePkPanel = explorer.frame.getByTestId(`Panel:Change partition key`);
-//     await expect(changePkPanel.getByText(context.database.id)).toBeVisible();
-//     await expect(explorer.frame.getByRole("heading", { name: "Change partition key" })).toBeVisible();
-//     await expect(explorer.frame.getByText(/When changing a container/)).toBeVisible();
-
-//     // Try to switch to new container
-//     await expect(changePkPanel.getByText("New container")).toBeVisible();
-//     await expect(changePkPanel.getByText("Existing container")).toBeVisible();
-//     await expect(changePkPanel.getByTestId("new-container-id-input")).toBeVisible();
-
-//     changePkPanel.getByTestId("new-container-id-input").fill(newContainerId);
-//     await expect(changePkPanel.getByTestId("new-container-partition-key-input")).toBeVisible();
-//     changePkPanel.getByTestId("new-container-partition-key-input").fill(newPartitionKeyPath);
-
-//     await expect(changePkPanel.getByTestId("add-sub-partition-key-button")).toBeVisible();
-//     changePkPanel.getByTestId("add-sub-partition-key-button").click();
-//     await expect(changePkPanel.getByTestId("new-container-sub-partition-key-input-0")).toBeVisible();
-//     await expect(changePkPanel.getByTestId("remove-sub-partition-key-button-0")).toBeVisible();
-//     await expect(changePkPanel.getByTestId("hierarchical-partitioning-info-text")).toBeVisible();
-//     await changePkPanel.getByTestId("remove-sub-partition-key-button-0").click();
-
-//     await changePkPanel.getByTestId("Panel/OkButton").click();
-
-//     await expect(changePkPanel).not.toBeVisible({ timeout: 5 * 60 * 1000 });
-
-//     // Verify partition key change job
-//     const jobText = explorer.frame.getByText(/Partition key change job/);
-//     await expect(jobText).toBeVisible();
-//     await expect(explorer.frame.locator(".ms-ProgressIndicator-itemName")).toContainText("Portal_testcontainer_1");
-
-//     const jobRow = explorer.frame.locator(".ms-ProgressIndicator-itemDescription");
-//     // await expect(jobRow.getByText("Pending")).toBeVisible({ timeout: 30 * 1000 });
-//     await expect(jobRow.getByText("Completed")).toBeVisible({ timeout: 5 * 60 * 1000 });
-
-//     const newContainerNode = await explorer.waitForContainerNode(context.database.id, newContainerId);
-//     expect(newContainerNode).not.toBeNull();
-
-//     // Now try to switch to existing container
-//     await changePartitionKeyButton.click();
-//     await changePkPanel.getByText("Existing container").click();
-//     await changePkPanel.getByLabel("Use existing container").check();
-//     await changePkPanel.getByText("Choose an existing container").click();
-
-// const containerDropdownItem = await getDropdownItemByNameOrPosition(
-//   explorer.frame,
-//   { name: newContainerId },
-//   { ariaLabel: "Existing Containers" },
-// );
-// await containerDropdownItem.click();
-
-//     await changePkPanel.getByTestId("Panel/OkButton").click();
-//     await explorer.frame.getByRole("button", { name: "Cancel" }).click();
-
-//     // Dismiss overlay if it appears
-//     const overlayFrame = explorer.frame.locator("#webpack-dev-server-client-overlay").first();
-//     if (await overlayFrame.count()) {
-//       await overlayFrame.contentFrame().getByLabel("Dismiss").click();
-//     }
-//     const cancelledJobRow = explorer.frame.getByTestId("Tab:tab0");
-//     await expect(cancelledJobRow.getByText("Cancelled")).toBeVisible({ timeout: 30 * 1000 });
-//   });
-// });

test/sql/scaleAndSettings/scale.spec.ts

@@ -1,4 +1,4 @@
-import { Browser, expect, Locator, Page, test } from "@playwright/test";
+import { expect, Locator, test } from "@playwright/test";
 import {
   CommandBarButton,
   DataExplorer,
@@ -9,116 +9,121 @@ import {
 } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 
-interface SetupResult {
-  context: TestContainerContext;
-  page: Page;
-  explorer: DataExplorer;
-}
+test.describe("Autoscale and Manual throughput", () => {
+  let context: TestContainerContext = null!;
+  let explorer: DataExplorer = null!;
 
-test.describe("Autoscale throughput", () => {
-  let setup: SetupResult;
-
-  test.beforeAll(async ({ browser }) => {
-    setup = await openScaleTab(browser);
-
-    // Switch manual -> autoscale once for this suite
-    const autoscaleRadioButton = setup.explorer.frame.getByText("Autoscale", { exact: true });
-    await autoscaleRadioButton.click();
-    await expect(setup.explorer.commandBarButton(CommandBarButton.Save)).toBeEnabled();
-    await setup.explorer.commandBarButton(CommandBarButton.Save).click();
-    await expect(setup.explorer.getConsoleHeaderStatus()).toContainText(
-      `Successfully updated offer for collection ${setup.context.container.id}`,
-      { timeout: 2 * ONE_MINUTE_MS },
-    );
+  test.beforeAll("Create Test Database", async () => {
+    context = await createTestSQLContainer(true);
   });
 
-  test.afterAll(async () => {
-    await cleanup(setup);
+  test.beforeEach("Open container settings", async ({ page }) => {
+    explorer = await DataExplorer.open(page, TestAccount.SQL);
+
+    // Click Scale & Settings and open Scale tab
+    await explorer.openScaleAndSettings(context);
+    const scaleTab = explorer.frame.getByTestId("settings-tab-header/ScaleTab");
+    await scaleTab.click();
+  });
+
+  test.afterAll("Delete Test Database", async () => {
+    await context?.dispose();
   });
 
   test("Update autoscale max throughput", async () => {
-    await getThroughputInput(setup.explorer, "autopilot").fill(TEST_AUTOSCALE_MAX_THROUGHPUT_RU_2K.toString());
-    await setup.explorer.commandBarButton(CommandBarButton.Save).click();
+    // By default the created container has manual throughput (Containers created via JS SDK v4.7.0 cannot be created with autoscale throughput)
+    await switchManualToAutoscaleThroughput();
 
-    await expect(setup.explorer.getConsoleHeaderStatus()).toContainText(
-      `Successfully updated offer for collection ${setup.context.container.id}`,
-      { timeout: 2 * ONE_MINUTE_MS },
+    // Update autoscale max throughput
+    await getThroughputInput("autopilot").fill(TEST_AUTOSCALE_MAX_THROUGHPUT_RU_2K.toString());
+
+    // Save
+    await explorer.commandBarButton(CommandBarButton.Save).click();
+
+    // Read console message
+    await expect(explorer.getConsoleMessage()).toContainText(
+      `Successfully updated offer for collection ${context.container.id}`,
+      {
+        timeout: 2 * ONE_MINUTE_MS,
+      },
     );
   });
 
   test("Update autoscale max throughput passed allowed limit", async () => {
-    const softAllowedMaxThroughputString = await setup.explorer.frame
+    // By default the created container has manual throughput (Containers created via JS SDK v4.7.0 cannot be created with autoscale throughput)
+    await switchManualToAutoscaleThroughput();
+
+    // Get soft allowed max throughput and remove commas
+    const softAllowedMaxThroughputString = await explorer.frame
       .getByTestId("soft-allowed-maximum-throughput")
       .innerText();
     const softAllowedMaxThroughput = Number(softAllowedMaxThroughputString.replace(/,/g, ""));
 
-    await getThroughputInput(setup.explorer, "autopilot").fill((softAllowedMaxThroughput * 10).toString());
-    await expect(setup.explorer.commandBarButton(CommandBarButton.Save)).toBeDisabled();
-    await expect(delayedApplyWarning(setup.explorer)).toBeVisible();
+    // Try to set autoscale max throughput above allowed limit
+    await getThroughputInput("autopilot").fill((softAllowedMaxThroughput * 10).toString());
+    await expect(explorer.commandBarButton(CommandBarButton.Save)).toBeDisabled();
+    await expect(getThroughputInputErrorMessage("autopilot")).toContainText(
+      "This update isn't possible because it would increase the total throughput",
+    );
   });
 
   test("Update autoscale max throughput with invalid increment", async () => {
-    await getThroughputInput(setup.explorer, "autopilot").fill("1100");
-    await expect(setup.explorer.commandBarButton(CommandBarButton.Save)).toBeDisabled();
-    await expect(getThroughputInputErrorMessage(setup.explorer, "autopilot")).toContainText(
+    // By default the created container has manual throughput (Containers created via JS SDK v4.7.0 cannot be created with autoscale throughput)
+    await switchManualToAutoscaleThroughput();
+
+    // Try to set autoscale max throughput with invalid increment
+    await getThroughputInput("autopilot").fill("1100");
+    await expect(explorer.commandBarButton(CommandBarButton.Save)).toBeDisabled();
+    await expect(getThroughputInputErrorMessage("autopilot")).toContainText(
       "Throughput value must be in increments of 1000",
     );
   });
-});
-
-test.describe("Manual throughput", () => {
-  let setup: SetupResult;
-
-  test.beforeAll(async ({ browser }) => {
-    setup = await openScaleTab(browser);
-  });
-
-  test.afterAll(async () => {
-    await cleanup(setup);
-  });
 
   test("Update manual throughput", async () => {
-    await getThroughputInput(setup.explorer, "manual").fill(TEST_MANUAL_THROUGHPUT_RU_2K.toString());
-    await setup.explorer.commandBarButton(CommandBarButton.Save).click();
-    await expect(setup.explorer.getConsoleHeaderStatus()).toContainText(
-      `Successfully updated offer for collection ${setup.context.container.id}`,
-      { timeout: 2 * ONE_MINUTE_MS },
+    await getThroughputInput("manual").fill(TEST_MANUAL_THROUGHPUT_RU_2K.toString());
+    await explorer.commandBarButton(CommandBarButton.Save).click();
+    await expect(explorer.getConsoleMessage()).toContainText(
+      `Successfully updated offer for collection ${context.container.id}`,
+      {
+        timeout: 2 * ONE_MINUTE_MS,
+      },
     );
   });
 
   test("Update manual throughput passed allowed limit", async () => {
-    const softAllowedMaxThroughputString = await setup.explorer.frame
+    // Get soft allowed max throughput and remove commas
+    const softAllowedMaxThroughputString = await explorer.frame
       .getByTestId("soft-allowed-maximum-throughput")
       .innerText();
     const softAllowedMaxThroughput = Number(softAllowedMaxThroughputString.replace(/,/g, ""));
 
-    await getThroughputInput(setup.explorer, "manual").fill((softAllowedMaxThroughput * 10).toString());
-    await expect(delayedApplyWarning(setup.explorer)).toBeVisible();
-  });
+    // Try to set manual throughput above allowed limit
+    await getThroughputInput("manual").fill((softAllowedMaxThroughput * 10).toString());
+    await expect(explorer.commandBarButton(CommandBarButton.Save)).toBeDisabled();
+    await expect(getThroughputInputErrorMessage("manual")).toContainText(
+      "This update isn't possible because it would increase the total throughput",
+    );
   });
 
-const delayedApplyWarning = (explorer: DataExplorer): Locator =>
-  explorer.frame.locator("#updateThroughputDelayedApplyWarningMessage");
+  // Helper methods
+  const getThroughputInput = (type: "manual" | "autopilot"): Locator => {
+    return explorer.frame.getByTestId(`${type}-throughput-input`);
+  };
 
-const getThroughputInput = (explorer: DataExplorer, type: "manual" | "autopilot"): Locator =>
-  explorer.frame.getByTestId(`${type}-throughput-input`);
+  const getThroughputInputErrorMessage = (type: "manual" | "autopilot"): Locator => {
+    return explorer.frame.getByTestId(`${type}-throughput-input-error`);
+  };
 
-const getThroughputInputErrorMessage = (explorer: DataExplorer, type: "manual" | "autopilot"): Locator =>
-  explorer.frame.getByTestId(`${type}-throughput-input-error`);
-
-async function openScaleTab(browser: Browser): Promise<SetupResult> {
-  const context = await createTestSQLContainer();
-  const page = await browser.newPage();
-  const explorer = await DataExplorer.open(page, TestAccount.SQL);
-
-  await explorer.openScaleAndSettings(context);
-  await explorer.frame.getByTestId("settings-tab-header/ScaleTab").click();
-
-  return { context, page, explorer };
-}
-
-async function cleanup({ context }: Partial<SetupResult>) {
-  if (!process.env.CI) {
-    await context?.dispose();
-  }
-}
+  const switchManualToAutoscaleThroughput = async (): Promise<void> => {
+    const autoscaleRadioButton = explorer.frame.getByText("Autoscale", { exact: true });
+    await autoscaleRadioButton.click();
+    await expect(explorer.commandBarButton(CommandBarButton.Save)).toBeEnabled();
+    await explorer.commandBarButton(CommandBarButton.Save).click();
+    await expect(explorer.getConsoleMessage()).toContainText(
+      `Successfully updated offer for collection ${context.container.id}`,
+      {
+        timeout: ONE_MINUTE_MS,
+      },
+    );
+  };
+});

test/sql/scaleAndSettings/settings.spec.ts

@@ -6,10 +6,14 @@ test.describe("Settings under Scale & Settings", () => {
   let context: TestContainerContext = null!;
   let explorer: DataExplorer = null!;
 
-  test.beforeAll("Create Test Database & Open Settings tab", async ({ browser }) => {
-    context = await createTestSQLContainer();
-    const page = await browser.newPage();
+  test.beforeAll("Create Test Database", async () => {
+    context = await createTestSQLContainer(true);
+  });
+
+  test.beforeEach("Open Settings tab under Scale & Settings", async ({ page }) => {
     explorer = await DataExplorer.open(page, TestAccount.SQL);
+    const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
+    await containerNode.expand();
 
     // Click Scale & Settings and open Scale tab
     await explorer.openScaleAndSettings(context);
@@ -17,24 +21,18 @@ test.describe("Settings under Scale & Settings", () => {
     await settingsTab.click();
   });
 
-  // Delete database only if not running in CI
-  if (!process.env.CI) {
   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" });
     await ttlOnNoDefaultRadioButton.click();
 
     await explorer.commandBarButton(CommandBarButton.Save).click();
-    await expect(explorer.getConsoleHeaderStatus()).toContainText(
-      `Successfully updated container ${context.container.id}`,
-      {
-        timeout: 2 * ONE_MINUTE_MS,
-      },
-    );
+    await expect(explorer.getConsoleMessage()).toContainText(`Successfully updated container ${context.container.id}`, {
+      timeout: ONE_MINUTE_MS,
+    });
   });
 
   test("Update TTL to On (with user entry)", async () => {
@@ -46,11 +44,27 @@ test.describe("Settings under Scale & Settings", () => {
     await ttlInput.fill("30000");
 
     await explorer.commandBarButton(CommandBarButton.Save).click();
-    await expect(explorer.getConsoleHeaderStatus()).toContainText(
-      `Successfully updated container ${context.container.id}`,
-      {
-        timeout: 2 * ONE_MINUTE_MS,
-      },
-    );
+    await expect(explorer.getConsoleMessage()).toContainText(`Successfully updated container ${context.container.id}`, {
+      timeout: ONE_MINUTE_MS,
+    });
+  });
+
+  test("Update TTL to Off", async () => {
+    // By default TTL is set to off so we need to first set it to On
+    const ttlOnNoDefaultRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-no-default-option" });
+    await ttlOnNoDefaultRadioButton.click();
+    await explorer.commandBarButton(CommandBarButton.Save).click();
+    await expect(explorer.getConsoleMessage()).toContainText(`Successfully updated container ${context.container.id}`, {
+      timeout: ONE_MINUTE_MS,
+    });
+
+    // Set it to Off
+    const ttlOffRadioButton = explorer.frame.getByRole("radio", { name: "ttl-off-option" });
+    await ttlOffRadioButton.click();
+
+    await explorer.commandBarButton(CommandBarButton.Save).click();
+    await expect(explorer.getConsoleMessage()).toContainText(`Successfully updated container ${context.container.id}`, {
+      timeout: ONE_MINUTE_MS,
+    });
   });
 });

test/tables/container.spec.ts

@@ -7,8 +7,7 @@ test("Tables CRUD", async ({ page }) => {
 
   const explorer = await DataExplorer.open(page, TestAccount.Tables);
 
-  const newTableButton = explorer.frame.getByTestId("GlobalCommands").getByRole("button", { name: "New Table" });
-  await newTableButton.click();
+  await explorer.globalCommandButton("New Table").click();
   await explorer.whilePanelOpen(
     "New Table",
     async (panel, okButton) => {

test/testData.ts

@@ -74,81 +74,8 @@ export class TestContainerContext {
   }
 }
 
-type createTestSqlContainerConfig = {
-  includeTestData?: boolean;
-  partitionKey?: string;
-  databaseName?: string;
-};
-
-type createMultipleTestSqlContainerConfig = {
-  containerCount?: number;
-  partitionKey?: string;
-  databaseName?: string;
-  accountType: TestAccount.SQLContainerCopyOnly | TestAccount.SQL;
-};
-
-export async function createMultipleTestContainers({
-  partitionKey = "/partitionKey",
-  databaseName = "",
-  containerCount = 1,
-  accountType = TestAccount.SQL,
-}: createMultipleTestSqlContainerConfig): Promise<TestContainerContext[]> {
-  const creationPromises: Promise<TestContainerContext>[] = [];
-
-  const databaseId = databaseName ? databaseName : generateUniqueName("db");
-  const credentials = getAzureCLICredentials();
-  const adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
-  const armClient = new CosmosDBManagementClient(adaptedCredentials, subscriptionId);
-  const accountName = getAccountName(accountType);
-  const account = await armClient.databaseAccounts.get(resourceGroupName, accountName);
-
-  const clientOptions: CosmosClientOptions = {
-    endpoint: account.documentEndpoint!,
-  };
-
-  const rbacToken =
-    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=`;
-      const authorizationToken = `${AUTH_PREFIX}${rbacToken}`;
-      return authorizationToken;
-    };
-  } else {
-    const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, accountName);
-    clientOptions.key = keys.primaryMasterKey;
-  }
-
-  const client = new CosmosClient(clientOptions);
-  const { database } = await client.databases.createIfNotExists({ id: databaseId });
-
-  try {
-    for (let i = 0; i < containerCount; i++) {
-      const containerId = `testcontainer_${Date.now()}_${Math.random().toString(36).substring(6)}_${i}`;
-      creationPromises.push(
-        database.containers.createIfNotExists({ id: containerId, partitionKey }).then(({ container }) => {
-          return new TestContainerContext(armClient, client, database, container, new Map<string, TestItem>());
-        }),
-      );
-    }
-    const contexts = await Promise.all(creationPromises);
-    return contexts;
-  } catch (e) {
-    await database.delete();
-    throw e;
-  }
-}
-
-export async function createTestSQLContainer({
-  includeTestData = false,
-  partitionKey = "/partitionKey",
-  databaseName = "",
-}: createTestSqlContainerConfig = {}) {
-  const databaseId = databaseName ? databaseName : generateUniqueName("db");
+export async function createTestSQLContainer(includeTestData?: boolean) {
+  const databaseId = generateUniqueName("db");
   const containerId = "testcontainer"; // A unique container name isn't needed because the database is unique
   const credentials = getAzureCLICredentials();
   const adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
@@ -177,7 +104,7 @@ export async function createTestSQLContainer({
   try {
     const { container } = await database.containers.createIfNotExists({
       id: containerId,
-      partitionKey,
+      partitionKey: "/partitionKey",
     });
     if (includeTestData) {
       const batchCount = TestData.length / 100;

test/testExplorer/TestExplorer.ts

@@ -11,12 +11,8 @@ const accountName = urlSearchParams.get("accountName") || "portal-sql-runner-wes
 const selfServeType = urlSearchParams.get("selfServeType") || "example";
 const iframeSrc = urlSearchParams.get("iframeSrc") || "explorer.html?platform=Portal&disablePortalInitCache";
 const authToken = urlSearchParams.get("token");
-const enablecontainercopy = urlSearchParams.get("enablecontainercopy");
 
-const nosqlRbacToken =
-  urlSearchParams.get("nosqlRbacToken") ||
-  (enablecontainercopy ? process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN : process.env.NOSQL_TESTACCOUNT_TOKEN) ||
-  "";
+const nosqlRbacToken = urlSearchParams.get("nosqlRbacToken") || process.env.NOSQL_TESTACCOUNT_TOKEN || "";
 const nosqlReadOnlyRbacToken =
   urlSearchParams.get("nosqlReadOnlyRbacToken") || process.env.NOSQL_READONLY_TESTACCOUNT_TOKEN || "";
 const tableRbacToken = urlSearchParams.get("tableRbacToken") || process.env.TABLE_TESTACCOUNT_TOKEN || "";
@@ -87,7 +83,6 @@ const initTestExplorer = async (): Promise<void> => {
       authorizationToken: `Bearer ${authToken}`,
       aadToken: rbacToken,
       features: {},
-      containerCopyEnabled: enablecontainercopy === "true",
       hasWriteAccess: true,
       csmEndpoint: "https://management.azure.com",
       dnsSuffix: "documents.azure.com",

utils/cleanupDBs.js

@@ -74,50 +74,17 @@ async function main() {
       }
     } else if (account.kind === "GlobalDocumentDB") {
       const sqlDatabases = await client.sqlResources.listSqlDatabases(resourceGroupName, account.name);
-      const sqlDatabasesToDelete = sqlDatabases.map(async (database) => {
-        await deleteWithRetry(client, database, account.name);
-      });
-      await Promise.all(sqlDatabasesToDelete);
-    }
-  }
-}
-
-// Retry logic for handling throttling
-async function deleteWithRetry(client, database, accountName) {
-  const maxRetries = 5;
-  let attempt = 0;
-  let backoffTime = 1000; // Start with 1 second
-
-  while (attempt < maxRetries) {
-    try {
+      for (const database of sqlDatabases) {
         const timestamp = Number(database.resource._ts) * 1000;
         if (timestamp && timestamp < thirtyMinutesAgo) {
-        await client.sqlResources.deleteSqlDatabase(resourceGroupName, accountName, database.name);
-        console.log(`DELETED: ${accountName} | ${database.name} | Age: ${friendlyTime(Date.now() - timestamp)}`);
+          await client.sqlResources.deleteSqlDatabase(resourceGroupName, account.name, database.name);
+          console.log(`DELETED: ${account.name} | ${database.name} | Age: ${friendlyTime(Date.now() - timestamp)}`);
         } else {
-        console.log(`SKIPPED: ${accountName} | ${database.name} | Age: ${friendlyTime(Date.now() - timestamp)}`);
-      }
-      return;
-    } catch (error) {
-      if (error.statusCode === 429) {
-        // Throttling error (HTTP 429), apply exponential backoff
-        console.log(`Throttling detected, retrying ${database.name}... (Attempt ${attempt + 1})`);
-        await delay(backoffTime);
-        attempt++;
-        backoffTime *= 2; // Exponential backoff
-      } else {
-        // For other errors, log and break
-        console.error(`Error deleting ${database.name}:`, error);
-        break;
+          console.log(`SKIPPED: ${account.name} | ${database.name} | Age: ${friendlyTime(Date.now() - timestamp)}`);
         }
       }
     }
-  console.log(`Failed to delete ${database.name} after ${maxRetries} attempts.`);
   }
-
-// Helper function to delay the retry attempts
-function delay(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
 }
 
 main()