test fix

.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
@@ -198,18 +198,18 @@ jobs:
             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
+            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/documentDB.less

@@ -406,7 +406,11 @@ body {
   width: 440px;
   min-height: 565px;
 }
-
+.dataExplorerLoaderforcopyJobs{
+   width: 100%;
+   min-height: 565px;
+   right: 0;
+}
 .dataExplorerTabLoaderContainer {
   left: initial;
   top: initial;

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

src/Common/Pager/Pager.css

@@ -11,3 +11,14 @@
   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>
+        <Text className="themeText">
           Showing {startIndex + 1} - {endIndex} of {totalCount} items
         </Text>
       )}
@@ -82,7 +82,7 @@ const Pager: React.FC<PagerProps> = ({
           disabled={disabled || currentPage === 1}
           styles={iconButtonStyles}
         />
-        <Text>
+        <Text className="themeText">
           Page {currentPage} of {totalPages}
         </Text>
         <IconButton

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

@@ -39,7 +39,7 @@ describe("CopyJobCommandBar", () => {
 
     render(<CopyJobCommandBar explorer={mockExplorer} />);
 
-    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer);
+    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer, false);
     expect(mockGetCommandBarButtons).toHaveBeenCalledTimes(1);
   });
 
@@ -163,7 +163,7 @@ describe("CopyJobCommandBar", () => {
 
     render(<CopyJobCommandBar explorer={mockExplorer} />);
 
-    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer);
+    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer, false);
     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);
+    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer1, false);
 
     rerender(<CopyJobCommandBar explorer={mockExplorer2} />);
 
-    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer2);
+    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer2, false);
     expect(mockGetCommandBarButtons).toHaveBeenCalledTimes(2);
   });
 });

src/Explorer/ContainerCopy/CommandBar/CopyJobCommandBar.tsx

@@ -1,24 +1,28 @@
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
 import React from "react";
-import { StyleConstants } from "../../../Common/StyleConstants";
+import { useThemeStore } from "../../../hooks/useTheme";
 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 backgroundColor = StyleConstants.BaseLight;
-const rootStyle = {
+const CopyJobCommandBar: React.FC<ContainerCopyProps> = ({ explorer }) => {
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
+  const themeTokens = getThemeTokens(isDarkMode);
+  const backgroundColor = themeTokens.colorNeutralBackground1;
+
+  const rootStyle = {
     root: {
       backgroundColor: backgroundColor,
     },
-};
+  };
 
-const CopyJobCommandBar: React.FC<ContainerCopyProps> = ({ explorer }) => {
-  const commandBarItems: CommandButtonComponentProps[] = getCommandBarButtons(explorer);
+  const commandBarItems: CommandButtonComponentProps[] = getCommandBarButtons(explorer, isDarkMode);
   const controlButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(commandBarItems, backgroundColor);
 
   return (
-    <div className="commandBarContainer">
+    <div className="commandBarContainer" style={{ backgroundColor }}>
       <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);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       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);
+      const buttons = getCommandBarButtons(mockExplorer, false);
       const createButton = buttons[0];
 
       expect(createButton).toBeDefined();
@@ -70,7 +70,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should include refresh button", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
       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);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
-      expect(buttons.length).toBe(3);
+      expect(buttons.length).toBe(4);
 
-      const feedbackButton = buttons[2];
+      const feedbackButton = buttons[3];
       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);
+      const buttons = getCommandBarButtonsEmulator(mockExplorer, false);
 
-      expect(buttons.length).toBe(2);
+      expect(buttons.length).toBe(3);
     });
 
     it("should call openCreateCopyJobPanel when create button is clicked", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
       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);
+      const buttons = getCommandBarButtons(mockExplorer, false);
       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);
-      const feedbackButton = buttons[2];
+      const buttons = getCommandBarButtons(mockExplorer, false);
+      const feedbackButton = buttons[3];
 
       feedbackButton.onCommandClick({} as React.SyntheticEvent);
 
@@ -139,7 +139,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should return buttons with correct icon sources", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       expect(buttons[0].iconSrc).toBeDefined();
       expect(buttons[0].iconAlt).toBe("Create Copy Job");
@@ -148,7 +148,10 @@ describe("CommandBar Utils", () => {
       expect(buttons[1].iconAlt).toBe("Refresh");
 
       expect(buttons[2].iconSrc).toBeDefined();
-      expect(buttons[2].iconAlt).toBe("Feedback");
+      expect(buttons[2].iconAlt).toBe("Dark Theme");
+
+      expect(buttons[3].iconSrc).toBeDefined();
+      expect(buttons[3].iconAlt).toBe("Feedback");
     });
 
     it("should handle null MonitorCopyJobsRefState ref gracefully", () => {
@@ -157,14 +160,14 @@ describe("CommandBar Utils", () => {
         return selector(state);
       });
 
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
       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);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button) => {
         expect(button.hasPopup).toBe(false);
@@ -172,7 +175,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should set commandButtonLabel to undefined for all buttons", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button) => {
         expect(button.commandButtonLabel).toBeUndefined();
@@ -180,7 +183,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should respect disabled state when provided", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button) => {
         expect(button.disabled).toBe(false);
@@ -188,7 +191,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should return CommandButtonComponentProps with all required properties", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button: CommandButtonComponentProps) => {
         expect(button).toHaveProperty("iconSrc");
@@ -202,18 +205,19 @@ describe("CommandBar Utils", () => {
       });
     });
 
-    it("should maintain button order: create, refresh, feedback", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+    it("should maintain button order: create, refresh, themeToggle, feedback", () => {
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       expect(buttons[0].tooltipText).toBe("Create Copy Job");
       expect(buttons[1].tooltipText).toBe("Refresh");
-      expect(buttons[2].tooltipText).toBe("Feedback");
+      expect(buttons[2].tooltipText).toBe("Dark Theme");
+      expect(buttons[3].tooltipText).toBe("Feedback");
     });
   });
 
   describe("Button click handlers", () => {
     it("should execute click handlers without errors", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button) => {
         expect(() => button.onCommandClick({} as React.SyntheticEvent)).not.toThrow();
@@ -221,7 +225,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should call correct action for each button", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons[0].onCommandClick({} as React.SyntheticEvent);
       expect(Actions.openCreateCopyJobPanel).toHaveBeenCalledWith(mockExplorer);
@@ -229,14 +233,14 @@ describe("CommandBar Utils", () => {
       buttons[1].onCommandClick({} as React.SyntheticEvent);
       expect(mockRefreshJobList).toHaveBeenCalled();
 
-      buttons[2].onCommandClick({} as React.SyntheticEvent);
+      buttons[3].onCommandClick({} as React.SyntheticEvent);
       expect(mockOpenContainerCopyFeedbackBlade).toHaveBeenCalled();
     });
   });
 
   describe("Accessibility", () => {
     it("should have aria labels for all buttons", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button) => {
         expect(button.ariaLabel).toBeDefined();
@@ -246,7 +250,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should have tooltip text for all buttons", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button) => {
         expect(button.tooltipText).toBeDefined();
@@ -256,7 +260,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should have icon alt text for all buttons", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button) => {
         expect(button.iconAlt).toBeDefined();

src/Explorer/ContainerCopy/CommandBar/Utils.ts

@@ -1,7 +1,10 @@
 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";
@@ -9,7 +12,7 @@ import ContainerCopyMessages from "../ContainerCopyMessages";
 import { MonitorCopyJobsRefState } from "../MonitorCopyJobs/MonitorCopyJobRefState";
 import { CopyJobCommandBarBtnType } from "../Types/CopyJobTypes";
 
-function getCopyJobBtns(explorer: Explorer): CopyJobCommandBarBtnType[] {
+function getCopyJobBtns(explorer: Explorer, isDarkMode: boolean): CopyJobCommandBarBtnType[] {
   const monitorCopyJobsRef = MonitorCopyJobsRefState((state) => state.ref);
   const buttons: CopyJobCommandBarBtnType[] = [
     {
@@ -26,7 +29,15 @@ function getCopyJobBtns(explorer: Explorer): CopyJobCommandBarBtnType[] {
       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",
@@ -54,6 +65,6 @@ function btnMapper(config: CopyJobCommandBarBtnType): CommandButtonComponentProp
   };
 }
 
-export function getCommandBarButtons(explorer: Explorer): CommandButtonComponentProps[] {
-  return getCopyJobBtns(explorer).map(btnMapper);
+export function getCommandBarButtons(explorer: Explorer, isDarkMode: boolean): CommandButtonComponentProps[] {
+  return getCopyJobBtns(explorer, isDarkMode).map(btnMapper);
 }

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

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

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

@@ -13,7 +13,12 @@ import useToggle from "./hooks/useToggle";
 const TooltipContent = (
   <Text>
     {ContainerCopyMessages.readPermissionAssigned.tooltip.content} &nbsp;
-    <Link href={ContainerCopyMessages.readPermissionAssigned.tooltip.href} target="_blank" rel="noopener noreferrer">
+    <Link
+      style={{ color: "var(--colorBrandForeground1)" }}
+      href={ContainerCopyMessages.readPermissionAssigned.tooltip.href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {ContainerCopyMessages.readPermissionAssigned.tooltip.hrefText}
     </Link>
   </Text>

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

@@ -48,8 +48,8 @@ const PermissionGroup: React.FC<PermissionGroupConfig> = ({ id, title, descripti
       tokens={{ childrenGap: 15 }}
       styles={{
         root: {
-          background: "#fafafa",
-          border: "1px solid #e1e1e1",
+          background: "var(--colorNeutralBackground2)",
+          border: "1px solid var(--colorNeutralStroke1)",
           borderRadius: 8,
           padding: 16,
           boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
@@ -57,11 +57,11 @@ const PermissionGroup: React.FC<PermissionGroupConfig> = ({ id, title, descripti
       }}
     >
       <Stack tokens={{ childrenGap: 5 }}>
-        <Text variant="medium" style={{ fontWeight: 600 }}>
+        <Text variant="medium" style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>
           {title}
         </Text>
         {description && (
-          <Text variant="small" styles={{ root: { color: "#605E5C" } }}>
+          <Text variant="small" styles={{ root: { color: "var(--colorNeutralForeground2)" } }}>
             {description}
           </Text>
         )}
@@ -105,7 +105,7 @@ const AssignPermissions = () => {
       className="assignPermissionsContainer"
       tokens={{ childrenGap: 20 }}
     >
-      <Text variant="medium">
+      <Text variant="medium" style={{ color: "var(--colorNeutralForeground1)" }}>
         {isSameAccount && copyJobState.migrationType === CopyJobMigrationType.Online
           ? ContainerCopyMessages.assignPermissions.intraAccountOnlineDescription(
               copyJobState?.source?.account?.name || "",

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

@@ -12,7 +12,12 @@ import useToggle from "./hooks/useToggle";
 const managedIdentityTooltip = (
   <Text>
     {ContainerCopyMessages.defaultManagedIdentity.tooltip.content} &nbsp;
-    <Link href={ContainerCopyMessages.defaultManagedIdentity.tooltip.href} target="_blank" rel="noopener noreferrer">
+    <Link
+      style={{ color: "var(--colorBrandForeground1)" }}
+      href={ContainerCopyMessages.defaultManagedIdentity.tooltip.href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {ContainerCopyMessages.defaultManagedIdentity.tooltip.hrefText}
     </Link>
   </Text>

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

@@ -13,7 +13,12 @@ import InfoTooltip from "../Components/InfoTooltip";
 const tooltipContent = (
   <Text>
     {ContainerCopyMessages.pointInTimeRestore.tooltip.content} &nbsp;
-    <Link href={ContainerCopyMessages.pointInTimeRestore.tooltip.href} target="_blank" rel="noopener noreferrer">
+    <Link
+      style={{ color: "var(--colorBrandForeground1)" }}
+      href={ContainerCopyMessages.pointInTimeRestore.tooltip.href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {ContainerCopyMessages.pointInTimeRestore.tooltip.hrefText}
     </Link>
   </Text>

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="css-110"
+    class="themeText 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.
      
@@ -93,7 +93,7 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
   class="ms-Stack addManagedIdentityContainer css-109"
 >
   <span
-    class="css-110"
+    class="themeText 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.
      
@@ -196,13 +196,13 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
       </div>
     </div>
     <span
-      class="css-124"
+      class="themeText css-124"
       style="font-weight: 600;"
     >
       Enable system assigned managed identity
     </span>
     <span
-      class="css-110"
+      class="themeText css-110"
     >
       Enable system-assigned managed identity on the test-target-account. To confirm, click the "Yes" button.
     </span>
@@ -265,7 +265,7 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
   class="ms-Stack addManagedIdentityContainer css-109"
 >
   <span
-    class="css-110"
+    class="themeText 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.
      
@@ -351,13 +351,13 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
     style="max-width: 450px;"
   >
     <span
-      class="css-124"
+      class="themeText css-124"
       style="font-weight: 600;"
     >
       Enable system assigned managed identity
     </span>
     <span
-      class="css-110"
+      class="themeText css-110"
     >
       Enable system-assigned managed identity on the test-target-account. To confirm, click the "Yes" button.
     </span>

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

@@ -23,10 +23,10 @@ const PopoverContainer: React.FC<PopoverContainerProps> = React.memo(
         style={{ maxWidth: 450 }}
       >
         <LoadingOverlay isLoading={isLoading} label={ContainerCopyMessages.popoverOverlaySpinnerLabel} />
-        <Text variant="mediumPlus" style={{ fontWeight: 600 }}>
+        <Text variant="mediumPlus" className="themeText" style={{ fontWeight: 600 }}>
           {title}
         </Text>
-        <Text>{children}</Text>
+        <Text className="themeText">{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

@@ -8,11 +8,11 @@ exports[`PopoverMessage Component Edge Cases should handle empty string title 1`
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     />
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         Test content
@@ -76,7 +76,7 @@ exports[`PopoverMessage Component Edge Cases should handle null children 1`] = `
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Test Title
@@ -139,7 +139,7 @@ exports[`PopoverMessage Component Edge Cases should handle undefined children 1`
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Test Title
@@ -202,13 +202,13 @@ exports[`PopoverMessage Component Edge Cases should handle very long title 1`] =
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText 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="css-111"
+      class="themeText css-111"
     >
       <div>
         Test content
@@ -274,13 +274,13 @@ exports[`PopoverMessage Component Rendering should render correctly when visible
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Test Title
     </span>
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         Test content
@@ -344,13 +344,13 @@ exports[`PopoverMessage Component Rendering should render correctly with differe
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Test Title
     </span>
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         <p>
@@ -419,13 +419,13 @@ exports[`PopoverMessage Component Rendering should render correctly with differe
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Custom Title
     </span>
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         Test content
@@ -493,13 +493,13 @@ exports[`PopoverMessage Component Rendering should render correctly with loading
       data-testid="loading-overlay"
     />
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Test Title
     </span>
     <span
-      class="css-111"
+      class="themeText 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>{ContainerCopyMessages.createNewContainerSubHeading}</Text>
+        <Text className="themeText">{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="css-111"
+        class="themeText 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="css-111"
+        class="themeText 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="css-111"
+        class="themeText 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="css-111"
+        class="themeText css-111"
       >
         Select the properties for your container.
       </span>

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

@@ -36,12 +36,16 @@ const PreviewCopyJob: React.FC = () => {
         <TextField data-test="job-name-textfield" value={jobName} onChange={onJobNameChange} />
       </FieldRow>
       <Stack>
-        <Text className="bold">{ContainerCopyMessages.sourceSubscriptionLabel}</Text>
-        <Text data-test="source-subscription-name">{copyJobState.source?.subscription?.displayName}</Text>
+        <Text className="bold themeText">{ContainerCopyMessages.sourceSubscriptionLabel}</Text>
+        <Text data-test="source-subscription-name" className="themeText">
+          {copyJobState.source?.subscription?.displayName}
+        </Text>
       </Stack>
       <Stack>
-        <Text className="bold">{ContainerCopyMessages.sourceAccountLabel}</Text>
-        <Text data-test="source-account-name">{copyJobState.source?.account?.name}</Text>
+        <Text className="bold themeText">{ContainerCopyMessages.sourceAccountLabel}</Text>
+        <Text data-test="source-account-name" className="themeText">
+          {copyJobState.source?.account?.name}
+        </Text>
       </Stack>
       <Stack>
         <DetailsList

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

@@ -47,12 +47,12 @@ exports[`PreviewCopyJob should handle special characters in database and contain
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-subscription-name"
     >
       Test Subscription
@@ -62,12 +62,12 @@ exports[`PreviewCopyJob should handle special characters in database and contain
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-account-name"
     >
       test-account
@@ -369,12 +369,12 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-subscription-name"
     >
       Test Subscription
@@ -384,12 +384,12 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-account-name"
     >
       test-account
@@ -691,12 +691,12 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-subscription-name"
     >
       Test Subscription
@@ -706,12 +706,12 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-account-name"
     >
       test-account
@@ -1013,12 +1013,12 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-subscription-name"
     >
       This is a very long subscription name that might cause display issues if not handled properly
@@ -1028,12 +1028,12 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-account-name"
     >
       this-is-a-very-long-database-account-name-that-might-cause-display-issues
@@ -1335,12 +1335,12 @@ exports[`PreviewCopyJob should render with missing source account information 1`
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-subscription-name"
     >
       Test Subscription
@@ -1350,7 +1350,7 @@ exports[`PreviewCopyJob should render with missing source account information 1`
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
@@ -1651,7 +1651,7 @@ exports[`PreviewCopyJob should render with missing source subscription informati
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
@@ -1660,12 +1660,12 @@ exports[`PreviewCopyJob should render with missing source subscription informati
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-account-name"
     >
       test-account
@@ -1967,12 +1967,12 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-subscription-name"
     >
       Test Subscription
@@ -1982,12 +1982,12 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-account-name"
     >
       test-account
@@ -2289,12 +2289,12 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-subscription-name"
     >
       Test Subscription
@@ -2304,12 +2304,12 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-account-name"
     >
       test-account
@@ -2611,12 +2611,12 @@ exports[`PreviewCopyJob should render with undefined database and container name
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-subscription-name"
     >
       Test Subscription
@@ -2626,12 +2626,12 @@ exports[`PreviewCopyJob should render with undefined database and container name
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
       data-test="source-account-name"
     >
       test-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, Stack } from "@fluentui/react";
+import { Checkbox, ICheckboxStyles, Stack } from "@fluentui/react";
 import React from "react";
 import ContainerCopyMessages from "../../../../ContainerCopyMessages";
 
@@ -9,8 +9,25 @@ interface MigrationTypeCheckboxProps {
   onChange: (_ev?: React.FormEvent, checked?: boolean) => void;
 }
 
-export const MigrationTypeCheckbox: React.FC<MigrationTypeCheckboxProps> = React.memo(({ checked, onChange }) => (
+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} />
+      <Checkbox
+        label={ContainerCopyMessages.migrationTypeCheckboxLabel}
+        checked={checked}
+        onChange={onChange}
+        styles={checkboxStyles}
+      />
     </Stack>
-));
+  );
+});

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>{ContainerCopyMessages.selectAccountDescription}</Text>
+      <Text className="themeText">{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="css-110"
+    class="themeText css-110"
   >
     Please select a source account from which to copy.
   </span>

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

@@ -52,7 +52,7 @@ const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourc
       className="selectSourceAndTargetContainers"
       tokens={{ childrenGap: 25 }}
     >
-      <span>{ContainerCopyMessages.selectSourceAndTargetContainersDescription}</span>
+      <span className="themeText">{ContainerCopyMessages.selectSourceAndTargetContainersDescription}</span>
       <DatabaseContainerSection
         heading={ContainerCopyMessages.sourceContainerSubHeading}
         databaseOptions={sourceDatabaseOptions}

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

@@ -44,7 +44,11 @@ export const DatabaseContainerSection = ({
           data-test={`${sectionType}-containerDropdown`}
         />
         {handleOnDemandCreateContainer && (
-          <ActionButton className="create-container-link-btn" onClick={() => handleOnDemandCreateContainer()}>
+          <ActionButton
+            className="create-container-link-btn"
+            style={{ color: "var(--colorBrandForeground1)" }}
+            onClick={() => handleOnDemandCreateContainer()}
+          >
             {ContainerCopyMessages.createContainerButtonLabel}
           </ActionButton>
         )}

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

@@ -1,5 +1,6 @@
 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";
@@ -63,6 +64,19 @@ 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",
@@ -77,10 +91,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" style={sectionCss.headingText}>
+          <Text className="bold themeText" style={sectionCss.headingText}>
             {ContainerCopyMessages.errorTitle}
           </Text>
-          <Text as="pre" style={{ whiteSpace: "pre-wrap" }}>
+          <Text as="pre" style={errorMessageStyle}>
             {job.Error.message}
           </Text>
         </Stack.Item>
@@ -88,16 +102,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">{ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime}</Text>
-            <Text>{job.LastUpdatedTime}</Text>
+            <Text className="bold themeText">{ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime}</Text>
+            <Text className="themeText">{job.LastUpdatedTime}</Text>
           </Stack.Item>
           <Stack.Item style={sectionCss.verticalAlign}>
-            <Text className="bold">{ContainerCopyMessages.sourceAccountLabel}</Text>
-            <Text>{job.Source?.remoteAccountName}</Text>
+            <Text className="bold themeText">{ContainerCopyMessages.sourceAccountLabel}</Text>
+            <Text className="themeText">{job.Source?.remoteAccountName}</Text>
           </Stack.Item>
           <Stack.Item style={sectionCss.verticalAlign}>
-            <Text className="bold">{ContainerCopyMessages.MonitorJobs.Columns.mode}</Text>
-            <Text>{job.Mode}</Text>
+            <Text className="bold themeText">{ContainerCopyMessages.MonitorJobs.Columns.mode}</Text>
+            <Text className="themeText">{job.Mode}</Text>
           </Stack.Item>
         </Stack>
       </Stack.Item>

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

@@ -1,30 +1,14 @@
-import { FontIcon, getTheme, mergeStyles, mergeStyleSets, Spinner, SpinnerSize, Stack, Text } from "@fluentui/react";
+import { FontIcon, mergeStyles, 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",
@@ -35,6 +19,17 @@ 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;
 }
@@ -47,19 +42,17 @@ 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={classNames[status] || classNames.unknown}
-        />
+        <FontIcon aria-label={status} iconName={iconMap[status] || "UnknownSolid"} className={iconStyle} />
       )}
-      <Text>{statusText}</Text>
+      <Text className="themeText">{statusText}</Text>
     </Stack>
   );
 });

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

@@ -15,6 +15,8 @@ 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";
@@ -26,13 +28,15 @@ interface CopyJobsListProps {
 }
 
 const styles = {
-  container: { height: "calc(100vh - 25em)" } as React.CSSProperties,
+  container: { height: "100%" } 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);
@@ -88,11 +92,28 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
               enableShimmer={false}
               constrainMode={ConstrainMode.unconstrained}
               layoutMode={DetailsListLayoutMode.justified}
-              onRenderDetailsHeader={(props, defaultRender) => (
-                <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
-                  {defaultRender({ ...props })}
+              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>
                   </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="css-112"
+    class="themeText css-112"
   >
     Running
   </span>
@@ -33,7 +33,7 @@ exports[`CopyJobStatusWithIcon Spinner Status Types renders Partitioning with sp
     />
   </div>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Running
   </span>
@@ -53,7 +53,7 @@ exports[`CopyJobStatusWithIcon Spinner Status Types renders Running with spinner
     />
   </div>
   <span
-    class="css-112"
+    class="themeText 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-style-Cancelled"
+    class="ms-Icon root-105 css-118 mocked-styles"
     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="css-112"
+    class="themeText 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-style-Completed"
+    class="ms-Icon root-105 css-120 mocked-styles"
     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="css-112"
+    class="themeText 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-style-Failed"
+    class="ms-Icon root-105 css-118 mocked-styles"
     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="css-112"
+    class="themeText 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-style-Faulted"
+    class="ms-Icon root-105 css-118 mocked-styles"
     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="css-112"
+    class="themeText 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-style-Paused"
+    class="ms-Icon root-105 css-114 mocked-styles"
     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="css-112"
+    class="themeText 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-style-Pending"
+    class="ms-Icon root-105 css-111 mocked-styles"
     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="css-112"
+    class="themeText 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-style-Skipped"
+    class="ms-Icon root-105 css-116 mocked-styles"
     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="css-112"
+    class="themeText css-112"
   >
     Cancelled
   </span>

src/Explorer/ContainerCopy/containerCopyStyles.less

@@ -1,6 +1,30 @@
 @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;
@@ -9,21 +33,31 @@
     .noCopyJobsMessage {
       font-weight: 600;
       margin: 0 auto;
-      color: @FocusColor;
+      color: var(--colorNeutralForeground2);
     }
     button.createCopyJobButton {
-      color: @LinkColor;
+      color: var(--colorBrandForeground1);
     }
   }
 }
 .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;
   }
@@ -71,7 +105,7 @@
   }
   .foreground {
     z-index: 10;
-    background-color: #f9f9f9;
+    background-color: var(--colorNeutralBackground2);
     padding: 20px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     transform: translate(0%, -9%);
@@ -80,14 +114,40 @@
   .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: @LinkColor;
+    color: var(--colorBrandForeground1);
 
     &:focus {
       outline: none;
     }
+
   }
 
   /* Create collection panel */
@@ -105,7 +165,6 @@
   width: 100%;
   max-width: 100%;
   margin: 0 auto;
-
   .ms-DetailsList {
     width: 100%;
 
@@ -114,33 +173,33 @@
         padding: @DefaultSpace 20px;
         font-weight: 600;
         font-size: @DefaultFontSize;
-        color: @BaseHigh;
-        background-color: @BaseLow;
-        border-bottom: @ButtonBorderWidth solid @BaseMedium;
+        color: var(--colorNeutralForeground1);
+        background-color: var(--colorNeutralBackground2);
+        border-bottom: @ButtonBorderWidth solid var(--colorNeutralStroke1);
 
         &:hover {
-          background-color: @BaseMediumLow;
+          background-color: var(--colorNeutralBackground3);
         }
       }
     }
 
     .ms-DetailsRow {
-      border-bottom: @ButtonBorderWidth solid @BaseMedium;
+      border-bottom: @ButtonBorderWidth solid var(--colorNeutralStroke1);
 
       &:hover {
-        background-color: @BaseMediumLow;
+        background-color: var(--colorNeutralBackground2);
       }
 
       .ms-DetailsRow-cell {
         padding: @MediumSpace 20px;
         font-size: @DefaultFontSize;
-        color: @BaseHigh;
+        color: var(--colorNeutralForeground1);
         min-height: 48px;
         display: flex;
         align-items: center;
 
         .jobNameLink {
-          color: @LinkColor;
+          color: var(--colorBrandForeground1);
           text-overflow: ellipsis;
           white-space: nowrap;
           overflow: hidden;
@@ -168,7 +227,7 @@
     }
     .ms-DetailsRow-cell {
       font-size: @DefaultFontSize;
-      color: @BaseHigh;
+      color: var(--colorNeutralForeground1);
     }
   }
 }

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

@@ -103,7 +103,10 @@ 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 } }}
+              styles={{
+                root: { marginBottom: 0 },
+                text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
+              }}
             ></Toggle>
           </Stack>
         ))}

src/Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent.tsx

@@ -53,6 +53,7 @@ type VectorEmbeddingPolicyProperty = "dataType" | "distanceFunction" | "indexTyp
 const labelStyles = {
   root: {
     fontSize: 12,
+    color: "var(--colorNeutralForeground1)",
   },
 };
 
@@ -63,6 +64,8 @@ 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">
+                  <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
                     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,6 +475,11 @@ 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/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 dataExplorerPaneLoaderContainer">
+  <div id="loadingScreen" className="dataExplorerLoaderContainer dataExplorerLoaderforcopyJobs">
     <img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
   </div>
 );

src/less/DarkModeMenus.less

@@ -316,11 +316,6 @@ 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);
@@ -438,7 +433,6 @@ body.isDarkMode {
 
   button {
     &:not(.ms-Button):not(.ms-IconButton) {
-      background-color: var(--colorNeutralBackground1);
       color: var(--colorNeutralForeground1);
       
       &:hover {

src/less/ThemeSystem.less

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

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

@@ -352,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 */
@@ -460,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`,
     );
@@ -476,35 +466,10 @@ 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) {

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/query.spec.ts

@@ -30,12 +30,9 @@ test.beforeEach("Open new query tab", async ({ page }) => {
   await explorer.frame.getByTestId("NotificationConsole/Contents").waitFor();
 });
 
-// Delete database only if not running in CI
-if (!process.env.CI) {
-  test.afterAll("Delete Test Database", async () => {
+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,100 +1,98 @@
-// import { expect, test } from "@playwright/test";
-// import { DataExplorer, TestAccount } from "../../fx";
-// import { createTestSQLContainer, TestContainerContext } from "../../testData";
+import { expect, Page, test } from "@playwright/test";
+import { DataExplorer, 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.describe("Change Partition Key", () => {
+  let pageInstance: Page;
+  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.beforeAll("Create Test Database", async () => {
+    context = await createTestSQLContainer();
+  });
 
-//   test.beforeEach("Open container settings", async ({ page }) => {
-//     explorer = await DataExplorer.open(page, TestAccount.SQL);
+  test.beforeEach("Open container settings", async ({ page }) => {
+    pageInstance = 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();
-//   });
+    // Click Scale & Settings and open Partition Key tab
+    await explorer.openScaleAndSettings(context);
+    const PartitionKeyTab = explorer.frame.getByTestId("settings-tab-header/PartitionKeyTab");
+    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.afterAll("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();
+  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();
+    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();
+    // 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();
+    // 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);
+    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 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();
+    changePkPanel.getByTestId("new-container-sub-partition-key-input-0").fill("/customerId");
 
-//     await changePkPanel.getByTestId("Panel/OkButton").click();
+    await changePkPanel.getByTestId("Panel/OkButton").click();
 
-//     await expect(changePkPanel).not.toBeVisible({ timeout: 5 * 60 * 1000 });
+    await pageInstance.waitForLoadState("networkidle");
+    await expect(changePkPanel).not.toBeVisible({ timeout: 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");
+    // 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 jobRow = explorer.frame.locator(".ms-ProgressIndicator-itemDescription");
+    await expect(jobRow.getByText("Completed")).toBeVisible({ timeout: 30 * 1000 });
 
-//     const newContainerNode = await explorer.waitForContainerNode(context.database.id, newContainerId);
-//     expect(newContainerNode).not.toBeNull();
+    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();
+    // 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 explorer.getDropdownItemByName(newContainerId, "Existing Containers");
-//     await containerDropdownItem.click();
+    const containerDropdownItem = await explorer.getDropdownItemByName(newContainerId, "Existing Containers");
+    await containerDropdownItem.click();
 
-//     await changePkPanel.getByTestId("Panel/OkButton").click();
-//     await explorer.frame.getByRole("button", { name: "Cancel" }).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 });
-//   });
-// });
+    // 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({ includeTestData: 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",
+    );
   });
+
+  // Helper methods
+  const getThroughputInput = (type: "manual" | "autopilot"): Locator => {
+    return explorer.frame.getByTestId(`${type}-throughput-input`);
+  };
+
+  const getThroughputInputErrorMessage = (type: "manual" | "autopilot"): Locator => {
+    return explorer.frame.getByTestId(`${type}-throughput-input-error`);
+  };
+
+  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,
+      },
+    );
+  };
 });
-
-const delayedApplyWarning = (explorer: DataExplorer): Locator =>
-  explorer.frame.locator("#updateThroughputDelayedApplyWarningMessage");
-
-const getThroughputInput = (explorer: DataExplorer, type: "manual" | "autopilot"): Locator =>
-  explorer.frame.getByTestId(`${type}-throughput-input`);
-
-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();
-  }
-}

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({ includeTestData: 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) => {

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()