update FTs for Migration type radio button and action confirmation dialog

commit 8c67026760
Author: Bikram Choudhury <bchoudhury@microsoft.com>
Date:   Tue Dec 30 18:26:10 2025 +0530

    Refactor dropdown utilities and fix test helper functions

commit fda6b59bc1
Author: Bikram Choudhury <bchoudhury@microsoft.com>
Date:   Sun Dec 28 14:32:11 2025 +0530

    Make DataExplorerRoot as an optional check

commit 2ce91f1ef8
Author: Bikram Choudhury <bchoudhury@microsoft.com>
Date:   Sat Dec 13 18:16:53 2025 +0530

    Add test infrastructure and data-test attributes for Container Copy e2e testing

.github/workflows/ci.yml

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

less/documentDB.less

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

src/Common/LoadingOverlay.tsx

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

src/Common/Pager/Pager.css

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

src/Common/Pager/index.tsx

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

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

@@ -41,8 +41,10 @@ describe("CopyJobActions", () => {
       const mockExplorer = {} as Explorer;
       const mockSetPanelHasConsole = jest.fn();
       const mockOpenSidePanel = jest.fn();
+      const mockSetLightDismiss = jest.fn();
 
       (useSidePanel.getState as jest.Mock).mockReturnValue({
+        setLightDismiss: mockSetLightDismiss,
         setPanelHasConsole: mockSetPanelHasConsole,
         openSidePanel: mockOpenSidePanel,
       });
@@ -50,6 +52,7 @@ describe("CopyJobActions", () => {
       openCreateCopyJobPanel(mockExplorer);
 
       expect(mockSetPanelHasConsole).toHaveBeenCalledWith(false);
+      expect(mockSetLightDismiss).toHaveBeenCalledWith(false);
       expect(mockOpenSidePanel).toHaveBeenCalledWith(expect.any(String), expect.any(Object), "650px");
     });
 
@@ -59,6 +62,7 @@ describe("CopyJobActions", () => {
 
       (useSidePanel.getState as jest.Mock).mockReturnValue({
         setPanelHasConsole: jest.fn(),
+        setLightDismiss: jest.fn(),
         openSidePanel: mockOpenSidePanel,
       });
 
@@ -94,9 +98,11 @@ describe("CopyJobActions", () => {
       };
 
       const mockSetPanelHasConsole = jest.fn();
+      const mockSetLightDismiss = jest.fn();
       const mockOpenSidePanel = jest.fn();
 
       (useSidePanel.getState as jest.Mock).mockReturnValue({
+        setLightDismiss: mockSetLightDismiss,
         setPanelHasConsole: mockSetPanelHasConsole,
         openSidePanel: mockOpenSidePanel,
       });
@@ -104,6 +110,7 @@ describe("CopyJobActions", () => {
       openCopyJobDetailsPanel(mockJob);
 
       expect(mockSetPanelHasConsole).toHaveBeenCalledWith(false);
+      expect(mockSetLightDismiss).toHaveBeenCalledWith(true);
       expect(mockOpenSidePanel).toHaveBeenCalledWith(expect.stringContaining("test-job"), expect.any(Object), "650px");
     });
 
@@ -133,6 +140,7 @@ describe("CopyJobActions", () => {
 
       (useSidePanel.getState as jest.Mock).mockReturnValue({
         setPanelHasConsole: jest.fn(),
+        setLightDismiss: jest.fn(),
         openSidePanel: mockOpenSidePanel,
       });
 

src/Explorer/ContainerCopy/Actions/CopyJobActions.tsx

@@ -34,6 +34,7 @@ import { CopyJobContextState, CopyJobError, CopyJobErrorType, CopyJobType } from
 export const openCreateCopyJobPanel = (explorer: Explorer) => {
   const sidePanelState = useSidePanel.getState();
   sidePanelState.setPanelHasConsole(false);
+  sidePanelState.setLightDismiss(false);
   sidePanelState.openSidePanel(
     ContainerCopyMessages.createCopyJobPanelTitle,
     <CreateCopyJobScreensProvider explorer={explorer} />,
@@ -44,6 +45,7 @@ export const openCreateCopyJobPanel = (explorer: Explorer) => {
 export const openCopyJobDetailsPanel = (job: CopyJobType) => {
   const sidePanelState = useSidePanel.getState();
   sidePanelState.setPanelHasConsole(false);
+  sidePanelState.setLightDismiss(true);
   sidePanelState.openSidePanel(
     ContainerCopyMessages.copyJobDetailsPanelTitle(job.Name),
     <CopyJobDetails job={job} />,

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

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

src/Explorer/ContainerCopy/CommandBar/CopyJobCommandBar.tsx

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

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

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

src/Explorer/ContainerCopy/CommandBar/Utils.ts

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

src/Explorer/ContainerCopy/ContainerCopyMessages.ts

@@ -25,7 +25,18 @@ export default {
   subscriptionDropdownPlaceholder: "Select a subscription",
   sourceAccountDropdownLabel: "Account",
   sourceAccountDropdownPlaceholder: "Select an account",
-  migrationTypeCheckboxLabel: "Copy container in offline mode",
+  migrationTypeOptions: {
+    offline: {
+      title: "Offline mode",
+      description:
+        "Offline container copy jobs let you copy data from a source container to a destination Cosmos DB container for supported APIs. To ensure data integrity between the source and destination, we recommend stopping updates on the source container before creating the copy job. Learn more about [offline copy jobs](https://learn.microsoft.com/azure/cosmos-db/how-to-container-copy?tabs=offline-copy&pivots=api-nosql).",
+    },
+    online: {
+      title: "Online mode",
+      description:
+        "Online container copy jobs let you copy data from a source container to a destination Cosmos DB NoSQL API container using the [All Versions and Delete](https://learn.microsoft.com/azure/cosmos-db/change-feed-modes?tabs=all-versions-and-deletes#all-versions-and-deletes-change-feed-mode-preview) change feed. This allows updates to continue on the source while data is copied. A brief downtime is required at the end to safely switch over client applications to the destination container. Learn more about [online copy jobs](https://learn.microsoft.com/azure/cosmos-db/container-copy?tabs=online-copy&pivots=api-nosql#getting-started).",
+    },
+  },
 
   // Select Source and Target Containers Screen
   selectSourceAndTargetContainersDescription:
@@ -173,5 +184,10 @@ export default {
       Skipped: "Cancelled",
       Cancelled: "Cancelled",
     },
+    dialog: {
+      heading: "",
+      confirmButtonText: "Confirm",
+      cancelButtonText: "Cancel",
+    },
   },
 };

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

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

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

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

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

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

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

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

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

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

@@ -5,7 +5,7 @@ exports[`AddManagedIdentity Snapshot Tests renders initial state correctly 1`] =
   class="ms-Stack addManagedIdentityContainer css-109"
 >
   <span
-    class="themeText css-110"
+    class="css-110"
   >
     A system-assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. Once enabled, you can grant permissions to the managed identity by using Azure role-based access control (Azure RBAC). The managed identity is authenticated with Microsoft Entra ID, so you don’t have to store any credentials in code.
      
@@ -93,7 +93,7 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
   class="ms-Stack addManagedIdentityContainer css-109"
 >
   <span
-    class="themeText css-110"
+    class="css-110"
   >
     A system-assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. Once enabled, you can grant permissions to the managed identity by using Azure role-based access control (Azure RBAC). The managed identity is authenticated with Microsoft Entra ID, so you don’t have to store any credentials in code.
      
@@ -196,13 +196,13 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
       </div>
     </div>
     <span
-      class="themeText css-124"
+      class="css-124"
       style="font-weight: 600;"
     >
       Enable system assigned managed identity
     </span>
     <span
-      class="themeText css-110"
+      class="css-110"
     >
       Enable system-assigned managed identity on the test-target-account. To confirm, click the "Yes" button.
     </span>
@@ -265,7 +265,7 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
   class="ms-Stack addManagedIdentityContainer css-109"
 >
   <span
-    class="themeText css-110"
+    class="css-110"
   >
     A system-assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. Once enabled, you can grant permissions to the managed identity by using Azure role-based access control (Azure RBAC). The managed identity is authenticated with Microsoft Entra ID, so you don’t have to store any credentials in code.
      
@@ -351,13 +351,13 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
     style="max-width: 450px;"
   >
     <span
-      class="themeText css-124"
+      class="css-124"
       style="font-weight: 600;"
     >
       Enable system assigned managed identity
     </span>
     <span
-      class="themeText css-110"
+      class="css-110"
     >
       Enable system-assigned managed identity on the test-target-account. To confirm, click the "Yes" button.
     </span>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/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" className="themeText" style={{ fontWeight: 600 }}>
+        <Text variant="mediumPlus" style={{ fontWeight: 600 }}>
           {title}
         </Text>
-        <Text className="themeText">{children}</Text>
+        <Text>{children}</Text>
         <Stack horizontal tokens={{ childrenGap: 20 }}>
           <PrimaryButton text={"Yes"} onClick={onPrimary} disabled={isLoading} />
           <DefaultButton text="No" onClick={onCancel} disabled={isLoading} />

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

@@ -8,11 +8,11 @@ exports[`PopoverMessage Component Edge Cases should handle empty string title 1`
     style="max-width: 450px;"
   >
     <span
-      class="themeText css-110"
+      class="css-110"
       style="font-weight: 600;"
     />
     <span
-      class="themeText css-111"
+      class="css-111"
     >
       <div>
         Test content
@@ -76,7 +76,7 @@ exports[`PopoverMessage Component Edge Cases should handle null children 1`] = `
     style="max-width: 450px;"
   >
     <span
-      class="themeText css-110"
+      class="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="themeText css-110"
+      class="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="themeText css-110"
+      class="css-110"
       style="font-weight: 600;"
     >
       This is a very long title that might cause layout issues or text wrapping in the popover component
     </span>
     <span
-      class="themeText css-111"
+      class="css-111"
     >
       <div>
         Test content
@@ -274,13 +274,13 @@ exports[`PopoverMessage Component Rendering should render correctly when visible
     style="max-width: 450px;"
   >
     <span
-      class="themeText css-110"
+      class="css-110"
       style="font-weight: 600;"
     >
       Test Title
     </span>
     <span
-      class="themeText css-111"
+      class="css-111"
     >
       <div>
         Test content
@@ -344,13 +344,13 @@ exports[`PopoverMessage Component Rendering should render correctly with differe
     style="max-width: 450px;"
   >
     <span
-      class="themeText css-110"
+      class="css-110"
       style="font-weight: 600;"
     >
       Test Title
     </span>
     <span
-      class="themeText css-111"
+      class="css-111"
     >
       <div>
         <p>
@@ -419,13 +419,13 @@ exports[`PopoverMessage Component Rendering should render correctly with differe
     style="max-width: 450px;"
   >
     <span
-      class="themeText css-110"
+      class="css-110"
       style="font-weight: 600;"
     >
       Custom Title
     </span>
     <span
-      class="themeText css-111"
+      class="css-111"
     >
       <div>
         Test content
@@ -493,13 +493,13 @@ exports[`PopoverMessage Component Rendering should render correctly with loading
       data-testid="loading-overlay"
     />
     <span
-      class="themeText css-110"
+      class="css-110"
       style="font-weight: 600;"
     >
       Test Title
     </span>
     <span
-      class="themeText css-111"
+      class="css-111"
     >
       <div>
         Test content

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

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

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

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

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

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

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

@@ -54,7 +54,6 @@ export const AccountDropdown: React.FC<AccountDropdownProps> = () => {
       const currentAccountId = copyJobState?.source?.account?.id;
       const predefinedAccountId = normalizeAccountId(userContext.databaseAccount?.id);
       const selectedAccountId = currentAccountId || predefinedAccountId;
-
       const targetAccount: DatabaseAccount | null =
         sqlApiOnlyAccounts.find((account) => account.id === selectedAccountId) || null;
       updateCopyJobState(targetAccount || sqlApiOnlyAccounts[0]);

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

@@ -0,0 +1,241 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../../Context/CopyJobContext";
+import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
+import { MigrationType } from "./MigrationType";
+
+jest.mock("../../../../Context/CopyJobContext", () => ({
+  useCopyJobContext: jest.fn(),
+}));
+
+describe("MigrationType", () => {
+  const mockSetCopyJobState = jest.fn();
+
+  const defaultContextValue = {
+    copyJobState: {
+      jobName: "",
+      migrationType: CopyJobMigrationType.Online,
+      source: {
+        subscription: null as any,
+        account: null as any,
+        databaseId: "",
+        containerId: "",
+      },
+      target: {
+        subscriptionId: "",
+        account: null as any,
+        databaseId: "",
+        containerId: "",
+      },
+      sourceReadAccessFromTarget: false,
+    },
+    setCopyJobState: mockSetCopyJobState,
+    flow: { currentScreen: "selectAccount" },
+    setFlow: jest.fn(),
+    contextError: "",
+    setContextError: jest.fn(),
+    explorer: {} as any,
+    resetCopyJobState: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useCopyJobContext as jest.Mock).mockReturnValue(defaultContextValue);
+  });
+
+  describe("Component Rendering", () => {
+    it("should render migration type component with radio buttons", () => {
+      const { container } = render(<MigrationType />);
+
+      expect(container.querySelector("[data-test='migration-type']")).toBeInTheDocument();
+      expect(screen.getByRole("radiogroup")).toBeInTheDocument();
+
+      const offlineRadio = screen.getByRole("radio", {
+        name: ContainerCopyMessages.migrationTypeOptions.offline.title,
+      });
+      const onlineRadio = screen.getByRole("radio", { name: ContainerCopyMessages.migrationTypeOptions.online.title });
+
+      expect(offlineRadio).toBeInTheDocument();
+      expect(onlineRadio).toBeInTheDocument();
+      expect(container).toMatchSnapshot();
+    });
+
+    it("should render with online mode selected by default", () => {
+      render(<MigrationType />);
+
+      const onlineRadio = screen.getByRole("radio", { name: ContainerCopyMessages.migrationTypeOptions.online.title });
+      const offlineRadio = screen.getByRole("radio", {
+        name: ContainerCopyMessages.migrationTypeOptions.offline.title,
+      });
+
+      expect(onlineRadio).toBeChecked();
+      expect(offlineRadio).not.toBeChecked();
+    });
+
+    it("should render with offline mode selected when state is offline", () => {
+      (useCopyJobContext as jest.Mock).mockReturnValue({
+        ...defaultContextValue,
+        copyJobState: {
+          ...defaultContextValue.copyJobState,
+          migrationType: CopyJobMigrationType.Offline,
+        },
+      });
+
+      render(<MigrationType />);
+
+      const offlineRadio = screen.getByRole("radio", {
+        name: ContainerCopyMessages.migrationTypeOptions.offline.title,
+      });
+      const onlineRadio = screen.getByRole("radio", { name: ContainerCopyMessages.migrationTypeOptions.online.title });
+
+      expect(offlineRadio).toBeChecked();
+      expect(onlineRadio).not.toBeChecked();
+    });
+  });
+
+  describe("Descriptions and Learn More Links", () => {
+    it("should render online description and learn more link when online is selected", () => {
+      render(<MigrationType />);
+
+      expect(screen.getByTestId("migration-type-description-online")).toBeInTheDocument();
+
+      const learnMoreLink = screen.getByRole("link", {
+        name: "online copy jobs",
+      });
+      expect(learnMoreLink).toBeInTheDocument();
+      expect(learnMoreLink).toHaveAttribute(
+        "href",
+        "https://learn.microsoft.com/azure/cosmos-db/container-copy?tabs=online-copy&pivots=api-nosql#getting-started",
+      );
+      expect(learnMoreLink).toHaveAttribute("target", "_blank");
+    });
+
+    it("should render offline description and learn more link when offline is selected", () => {
+      (useCopyJobContext as jest.Mock).mockReturnValue({
+        ...defaultContextValue,
+        copyJobState: {
+          ...defaultContextValue.copyJobState,
+          migrationType: CopyJobMigrationType.Offline,
+        },
+      });
+
+      render(<MigrationType />);
+
+      expect(screen.getByTestId("migration-type-description-offline")).toBeInTheDocument();
+
+      const learnMoreLink = screen.getByRole("link", {
+        name: "offline copy jobs",
+      });
+      expect(learnMoreLink).toBeInTheDocument();
+      expect(learnMoreLink).toHaveAttribute(
+        "href",
+        "https://learn.microsoft.com/azure/cosmos-db/how-to-container-copy?tabs=offline-copy&pivots=api-nosql",
+      );
+    });
+  });
+
+  describe("User Interactions", () => {
+    it("should call setCopyJobState when offline radio button is clicked", () => {
+      render(<MigrationType />);
+
+      const offlineRadio = screen.getByRole("radio", {
+        name: ContainerCopyMessages.migrationTypeOptions.offline.title,
+      });
+      fireEvent.click(offlineRadio);
+
+      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
+
+      const updateFunction = mockSetCopyJobState.mock.calls[0][0];
+      const result = updateFunction(defaultContextValue.copyJobState);
+
+      expect(result).toEqual({
+        ...defaultContextValue.copyJobState,
+        migrationType: CopyJobMigrationType.Offline,
+      });
+    });
+
+    it("should call setCopyJobState when online radio button is clicked", () => {
+      (useCopyJobContext as jest.Mock).mockReturnValue({
+        ...defaultContextValue,
+        copyJobState: {
+          ...defaultContextValue.copyJobState,
+          migrationType: CopyJobMigrationType.Offline,
+        },
+      });
+
+      render(<MigrationType />);
+
+      const onlineRadio = screen.getByRole("radio", { name: ContainerCopyMessages.migrationTypeOptions.online.title });
+      fireEvent.click(onlineRadio);
+
+      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
+
+      const updateFunction = mockSetCopyJobState.mock.calls[0][0];
+      const result = updateFunction({
+        ...defaultContextValue.copyJobState,
+        migrationType: CopyJobMigrationType.Offline,
+      });
+
+      expect(result).toEqual({
+        ...defaultContextValue.copyJobState,
+        migrationType: CopyJobMigrationType.Online,
+      });
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("should have proper ARIA attributes", () => {
+      render(<MigrationType />);
+
+      const choiceGroup = screen.getByRole("radiogroup");
+      expect(choiceGroup).toBeInTheDocument();
+      expect(choiceGroup).toHaveAttribute("aria-labelledby", "migrationTypeChoiceGroup");
+    });
+
+    it("should have proper radio button labels", () => {
+      render(<MigrationType />);
+
+      expect(
+        screen.getByRole("radio", { name: ContainerCopyMessages.migrationTypeOptions.offline.title }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("radio", { name: ContainerCopyMessages.migrationTypeOptions.online.title }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle undefined migration type gracefully", () => {
+      (useCopyJobContext as jest.Mock).mockReturnValue({
+        ...defaultContextValue,
+        copyJobState: {
+          ...defaultContextValue.copyJobState,
+          migrationType: undefined,
+        },
+      });
+
+      const { container } = render(<MigrationType />);
+
+      expect(container.querySelector("[data-test='migration-type']")).toBeInTheDocument();
+      expect(
+        screen.getByRole("radio", { name: ContainerCopyMessages.migrationTypeOptions.offline.title }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("radio", { name: ContainerCopyMessages.migrationTypeOptions.online.title }),
+      ).toBeInTheDocument();
+    });
+
+    it("should handle null copyJobState gracefully", () => {
+      (useCopyJobContext as jest.Mock).mockReturnValue({
+        ...defaultContextValue,
+        copyJobState: null,
+      });
+
+      const { container } = render(<MigrationType />);
+
+      expect(container.querySelector("[data-test='migration-type']")).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,63 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/display-name */
+import { ChoiceGroup, IChoiceGroupOption, Stack, Text } from "@fluentui/react";
+import MarkdownRender from "@nteract/markdown";
+import { useCopyJobContext } from "Explorer/ContainerCopy/Context/CopyJobContext";
+import React from "react";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
+
+interface MigrationTypeProps {}
+const options: IChoiceGroupOption[] = [
+  {
+    key: CopyJobMigrationType.Offline,
+    text: ContainerCopyMessages.migrationTypeOptions.offline.title,
+    styles: { root: { width: "33%" } },
+  },
+  {
+    key: CopyJobMigrationType.Online,
+    text: ContainerCopyMessages.migrationTypeOptions.online.title,
+    styles: { root: { width: "33%" } },
+  },
+];
+
+export const MigrationType: React.FC<MigrationTypeProps> = React.memo(() => {
+  const { copyJobState, setCopyJobState } = useCopyJobContext();
+  const handleChange = (_ev?: React.FormEvent, option?: IChoiceGroupOption) => {
+    if (option) {
+      setCopyJobState((prevState) => ({
+        ...prevState,
+        migrationType: option.key as CopyJobMigrationType,
+      }));
+    }
+  };
+
+  const selectedKey = copyJobState?.migrationType ?? "";
+  const selectedKeyLowercase = selectedKey.toLowerCase() as keyof typeof ContainerCopyMessages.migrationTypeOptions;
+  const selectedKeyContent = ContainerCopyMessages.migrationTypeOptions[selectedKeyLowercase];
+
+  return (
+    <Stack data-test="migration-type" className="migrationTypeContainer">
+      <Stack.Item>
+        <ChoiceGroup
+          selectedKey={selectedKey}
+          options={options}
+          onChange={handleChange}
+          ariaLabelledBy="migrationTypeChoiceGroup"
+          styles={{ flexContainer: { display: "flex" } }}
+        />
+      </Stack.Item>
+      {selectedKeyContent && (
+        <Stack.Item styles={{ root: { marginTop: 10 } }}>
+          <Text
+            variant="small"
+            className="migrationTypeDescription"
+            data-testid={`migration-type-description-${selectedKeyLowercase}`}
+          >
+            <MarkdownRender source={selectedKeyContent.description} linkTarget="_blank" />
+          </Text>
+        </Stack.Item>
+      )}
+    </Stack>
+  );
+});

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

@@ -1,72 +0,0 @@
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import React from "react";
-import { MigrationTypeCheckbox } from "./MigrationTypeCheckbox";
-
-describe("MigrationTypeCheckbox", () => {
-  const mockOnChange = jest.fn();
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe("Component Rendering", () => {
-    it("should render with default props (unchecked state)", () => {
-      const { container } = render(<MigrationTypeCheckbox checked={false} onChange={mockOnChange} />);
-
-      expect(container.firstChild).toMatchSnapshot();
-    });
-
-    it("should render in checked state", () => {
-      const { container } = render(<MigrationTypeCheckbox checked={true} onChange={mockOnChange} />);
-
-      expect(container.firstChild).toMatchSnapshot();
-    });
-
-    it("should display the correct label text", () => {
-      render(<MigrationTypeCheckbox checked={false} onChange={mockOnChange} />);
-
-      const checkbox = screen.getByRole("checkbox");
-      expect(checkbox).toBeInTheDocument();
-
-      const label = screen.getByText("Copy container in offline mode");
-      expect(label).toBeInTheDocument();
-    });
-
-    it("should have correct accessibility attributes when checked", () => {
-      render(<MigrationTypeCheckbox checked={true} onChange={mockOnChange} />);
-
-      const checkbox = screen.getByRole("checkbox");
-      expect(checkbox).toBeChecked();
-      expect(checkbox).toHaveAttribute("checked");
-    });
-  });
-
-  describe("FluentUI Integration", () => {
-    it("should render FluentUI Checkbox component correctly", () => {
-      render(<MigrationTypeCheckbox checked={false} onChange={mockOnChange} />);
-
-      const checkbox = screen.getByRole("checkbox");
-      expect(checkbox).toBeInTheDocument();
-      expect(checkbox).toHaveAttribute("type", "checkbox");
-    });
-
-    it("should render FluentUI Stack component correctly", () => {
-      render(<MigrationTypeCheckbox checked={false} onChange={mockOnChange} />);
-
-      const stackContainer = document.querySelector(".migrationTypeRow");
-      expect(stackContainer).toBeInTheDocument();
-    });
-
-    it("should apply FluentUI Stack horizontal alignment correctly", () => {
-      const { container } = render(<MigrationTypeCheckbox checked={false} onChange={mockOnChange} />);
-
-      const stackContainer = container.querySelector(".migrationTypeRow");
-      expect(stackContainer).toBeInTheDocument();
-    });
-  });
-});

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

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

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

@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MigrationType Component Rendering should render migration type component with radio buttons 1`] = `
+<div>
+  <div
+    class="ms-Stack migrationTypeContainer css-109"
+    data-test="migration-type"
+  >
+    <div
+      class="ms-StackItem css-110"
+    >
+      <div
+        class="ms-ChoiceFieldGroup root-111"
+      >
+        <div
+          aria-labelledby="migrationTypeChoiceGroup"
+          role="radiogroup"
+        >
+          <div
+            class="ms-ChoiceFieldGroup-flexContainer flexContainer-112"
+          >
+            <div
+              class="ms-ChoiceField root-113"
+            >
+              <div
+                class="ms-ChoiceField-wrapper"
+              >
+                <input
+                  class="ms-ChoiceField-input input-114"
+                  id="ChoiceGroup0-offline"
+                  name="ChoiceGroup0"
+                  type="radio"
+                />
+                <label
+                  class="ms-ChoiceField-field field-115"
+                  for="ChoiceGroup0-offline"
+                >
+                  <span
+                    class="ms-ChoiceFieldLabel"
+                    id="ChoiceGroupLabel1-offline"
+                  >
+                    Offline mode
+                  </span>
+                </label>
+              </div>
+            </div>
+            <div
+              class="ms-ChoiceField root-113"
+            >
+              <div
+                class="ms-ChoiceField-wrapper"
+              >
+                <input
+                  checked=""
+                  class="ms-ChoiceField-input input-114"
+                  id="ChoiceGroup0-online"
+                  name="ChoiceGroup0"
+                  type="radio"
+                />
+                <label
+                  class="ms-ChoiceField-field is-checked field-120"
+                  for="ChoiceGroup0-online"
+                >
+                  <span
+                    class="ms-ChoiceFieldLabel"
+                    id="ChoiceGroupLabel1-online"
+                  >
+                    Online mode
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ms-StackItem css-123"
+    >
+      <span
+        class="migrationTypeDescription css-124"
+        data-testid="migration-type-description-online"
+      >
+        <div
+          class="markdown-body "
+        >
+          <p>
+            Online container copy jobs let you copy data from a source container to a destination Cosmos DB NoSQL API container using the 
+            <a
+              href="https://learn.microsoft.com/azure/cosmos-db/change-feed-modes?tabs=all-versions-and-deletes#all-versions-and-deletes-change-feed-mode-preview"
+              target="_blank"
+            >
+              All Versions and Delete
+            </a>
+             change feed. This allows updates to continue on the source while data is copied. A brief downtime is required at the end to safely switch over client applications to the destination container. Learn more about 
+            <a
+              href="https://learn.microsoft.com/azure/cosmos-db/container-copy?tabs=online-copy&pivots=api-nosql#getting-started"
+              target="_blank"
+            >
+              online copy jobs
+            </a>
+            .
+          </p>
+        </div>
+      </span>
+    </div>
+  </div>
+</div>
+`;

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

@@ -1,82 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MigrationTypeCheckbox Component Rendering should render in checked state 1`] = `
-<div
-  class="ms-Stack migrationTypeRow css-109"
-  data-test="migration-type-checkbox"
->
-  <div
-    class="ms-Checkbox is-checked is-enabled root-119"
-  >
-    <input
-      checked=""
-      class="input-111"
-      data-ktp-execute-target="true"
-      id="checkbox-1"
-      type="checkbox"
-    />
-    <label
-      class="ms-Checkbox-label label-112"
-      for="checkbox-1"
-    >
-      <div
-        class="ms-Checkbox-checkbox checkbox-120"
-        data-ktp-target="true"
-      >
-        <i
-          aria-hidden="true"
-          class="ms-Checkbox-checkmark checkmark-122"
-          data-icon-name="CheckMark"
-        >
-          
-        </i>
-      </div>
-      <span
-        class="ms-Checkbox-text text-115"
-      >
-        Copy container in offline mode
-      </span>
-    </label>
-  </div>
-</div>
-`;
-
-exports[`MigrationTypeCheckbox Component Rendering should render with default props (unchecked state) 1`] = `
-<div
-  class="ms-Stack migrationTypeRow css-109"
-  data-test="migration-type-checkbox"
->
-  <div
-    class="ms-Checkbox is-enabled root-110"
-  >
-    <input
-      class="input-111"
-      data-ktp-execute-target="true"
-      id="checkbox-0"
-      type="checkbox"
-    />
-    <label
-      class="ms-Checkbox-label label-112"
-      for="checkbox-0"
-    >
-      <div
-        class="ms-Checkbox-checkbox checkbox-113"
-        data-ktp-target="true"
-      >
-        <i
-          aria-hidden="true"
-          class="ms-Checkbox-checkmark checkmark-118"
-          data-icon-name="CheckMark"
-        >
-          
-        </i>
-      </div>
-      <span
-        class="ms-Checkbox-text text-115"
-      >
-        Copy container in offline mode
-      </span>
-    </label>
-  </div>
-</div>
-`;

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

@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import React from "react";
 import { useCopyJobContext } from "../../../Context/CopyJobContext";
 import { CopyJobMigrationType } from "../../../Enums/CopyJobEnums";
@@ -18,19 +18,8 @@ jest.mock("./Components/AccountDropdown", () => ({
   AccountDropdown: jest.fn(() => <div data-testid="account-dropdown">Account Dropdown</div>),
 }));
 
-jest.mock("./Components/MigrationTypeCheckbox", () => ({
-  MigrationTypeCheckbox: jest.fn(({ checked, onChange }: { checked: boolean; onChange: () => void }) => (
-    <div data-testid="migration-type-checkbox">
-      <input
-        type="checkbox"
-        checked={checked}
-        onChange={onChange}
-        data-testid="migration-checkbox-input"
-        aria-label="Migration Type Checkbox"
-      />
-      Copy container in offline mode
-    </div>
-  )),
+jest.mock("./Components/MigrationType", () => ({
+  MigrationType: jest.fn(() => <div data-testid="migration-type">Migration Type</div>),
 }));
 
 describe("SelectAccount", () => {
@@ -83,7 +72,7 @@ describe("SelectAccount", () => {
 
       expect(screen.getByTestId("subscription-dropdown")).toBeInTheDocument();
       expect(screen.getByTestId("account-dropdown")).toBeInTheDocument();
-      expect(screen.getByTestId("migration-type-checkbox")).toBeInTheDocument();
+      expect(screen.getByTestId("migration-type")).toBeInTheDocument();
     });
 
     it("should render correctly with snapshot", () => {
@@ -93,78 +82,20 @@ describe("SelectAccount", () => {
   });
 
   describe("Migration Type Functionality", () => {
-    it("should display migration type checkbox as unchecked when migrationType is Online", () => {
-      (useCopyJobContext as jest.Mock).mockReturnValue({
-        ...defaultContextValue,
-        copyJobState: {
-          ...defaultContextValue.copyJobState,
-          migrationType: CopyJobMigrationType.Online,
-        },
-      });
-
+    it("should render migration type component", () => {
       render(<SelectAccount />);
 
-      const checkbox = screen.getByTestId("migration-checkbox-input");
-      expect(checkbox).not.toBeChecked();
-    });
-
-    it("should display migration type checkbox as checked when migrationType is Offline", () => {
-      (useCopyJobContext as jest.Mock).mockReturnValue({
-        ...defaultContextValue,
-        copyJobState: {
-          ...defaultContextValue.copyJobState,
-          migrationType: CopyJobMigrationType.Offline,
-        },
-      });
-
-      render(<SelectAccount />);
-
-      const checkbox = screen.getByTestId("migration-checkbox-input");
-      expect(checkbox).toBeChecked();
-    });
-
-    it("should call setCopyJobState with Online migration type when checkbox is unchecked", () => {
-      (useCopyJobContext as jest.Mock).mockReturnValue({
-        ...defaultContextValue,
-        copyJobState: {
-          ...defaultContextValue.copyJobState,
-          migrationType: CopyJobMigrationType.Offline,
-        },
-      });
-
-      render(<SelectAccount />);
-
-      const checkbox = screen.getByTestId("migration-checkbox-input");
-      fireEvent.click(checkbox);
-
-      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
-
-      const updateFunction = mockSetCopyJobState.mock.calls[0][0];
-      const previousState = {
-        ...defaultContextValue.copyJobState,
-        migrationType: CopyJobMigrationType.Offline,
-      };
-      const result = updateFunction(previousState);
-
-      expect(result).toEqual({
-        ...previousState,
-        migrationType: CopyJobMigrationType.Online,
-      });
+      const migrationTypeComponent = screen.getByTestId("migration-type");
+      expect(migrationTypeComponent).toBeInTheDocument();
     });
   });
 
   describe("Performance and Optimization", () => {
-    it("should maintain referential equality of handler functions between renders", async () => {
+    it("should render without performance issues", () => {
       const { rerender } = render(<SelectAccount />);
-
-      const migrationCheckbox = (await import("./Components/MigrationTypeCheckbox")).MigrationTypeCheckbox as jest.Mock;
-      const firstRenderHandler = migrationCheckbox.mock.calls[migrationCheckbox.mock.calls.length - 1][0].onChange;
-
       rerender(<SelectAccount />);
 
-      const secondRenderHandler = migrationCheckbox.mock.calls[migrationCheckbox.mock.calls.length - 1][0].onChange;
-
-      expect(firstRenderHandler).toBe(secondRenderHandler);
+      expect(screen.getByTestId("migration-type")).toBeInTheDocument();
     });
   });
 });

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

@@ -1,33 +1,20 @@
 import { Stack, Text } from "@fluentui/react";
 import React from "react";
 import ContainerCopyMessages from "../../../ContainerCopyMessages";
-import { useCopyJobContext } from "../../../Context/CopyJobContext";
-import { CopyJobMigrationType } from "../../../Enums/CopyJobEnums";
 import { AccountDropdown } from "./Components/AccountDropdown";
-import { MigrationTypeCheckbox } from "./Components/MigrationTypeCheckbox";
+import { MigrationType } from "./Components/MigrationType";
 import { SubscriptionDropdown } from "./Components/SubscriptionDropdown";
 
 const SelectAccount = React.memo(() => {
-  const { copyJobState, setCopyJobState } = useCopyJobContext();
-
-  const handleMigrationTypeChange = (_ev?: React.FormEvent<HTMLElement>, checked?: boolean) => {
-    setCopyJobState((prevState) => ({
-      ...prevState,
-      migrationType: checked ? CopyJobMigrationType.Offline : CopyJobMigrationType.Online,
-    }));
-  };
-
-  const migrationTypeChecked = copyJobState?.migrationType === CopyJobMigrationType.Offline;
-
   return (
     <Stack data-test="Panel:SelectAccountContainer" className="selectAccountContainer" tokens={{ childrenGap: 15 }}>
-      <Text className="themeText">{ContainerCopyMessages.selectAccountDescription}</Text>
+      <Text>{ContainerCopyMessages.selectAccountDescription}</Text>
 
       <SubscriptionDropdown />
 
       <AccountDropdown />
 
-      <MigrationTypeCheckbox checked={migrationTypeChecked} onChange={handleMigrationTypeChange} />
+      <MigrationType />
     </Stack>
   );
 });

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

@@ -6,7 +6,7 @@ exports[`SelectAccount Component Rendering should render correctly with snapshot
   data-test="Panel:SelectAccountContainer"
 >
   <span
-    class="themeText css-110"
+    class="css-110"
   >
     Please select a source account from which to copy.
   </span>
@@ -21,14 +21,9 @@ exports[`SelectAccount Component Rendering should render correctly with snapshot
     Account Dropdown
   </div>
   <div
-    data-testid="migration-type-checkbox"
+    data-testid="migration-type"
   >
-    <input
-      aria-label="Migration Type Checkbox"
-      data-testid="migration-checkbox-input"
-      type="checkbox"
-    />
-    Copy container in offline mode
+    Migration Type
   </div>
 </div>
 `;

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

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

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

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

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

@@ -1,3 +1,4 @@
+/* eslint-disable jest/no-conditional-expect */
 import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
@@ -5,6 +6,20 @@ import { CopyJobActions, CopyJobMigrationType, CopyJobStatusType } from "../../E
 import { CopyJobType, HandleJobActionClickType } from "../../Types/CopyJobTypes";
 import CopyJobActionMenu from "./CopyJobActionMenu";
 
+const mockShowOkCancelModalDialog = jest.fn();
+const mockCloseDialog = jest.fn();
+const mockOpenDialog = jest.fn();
+
+jest.mock("../../../Controls/Dialog", () => ({
+  useDialog: {
+    getState: () => ({
+      showOkCancelModalDialog: mockShowOkCancelModalDialog,
+      closeDialog: mockCloseDialog,
+      openDialog: mockOpenDialog,
+    }),
+  },
+}));
+
 jest.mock("../../ContainerCopyMessages", () => ({
   __esModule: true,
   default: {
@@ -18,6 +33,11 @@ jest.mock("../../ContainerCopyMessages", () => ({
         cancel: "Cancel",
         complete: "Complete",
       },
+      dialog: {
+        heading: "Confirm Action",
+        confirmButtonText: "Confirm",
+        cancelButtonText: "Cancel",
+      },
     },
   },
 }));
@@ -50,6 +70,9 @@ describe("CopyJobActionMenu", () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    mockShowOkCancelModalDialog.mockClear();
+    mockCloseDialog.mockClear();
+    mockOpenDialog.mockClear();
   });
 
   describe("Component Rendering", () => {
@@ -266,7 +289,29 @@ describe("CopyJobActionMenu", () => {
       expect(mockHandleClick).toHaveBeenCalledWith(job, CopyJobActions.pause, expect.any(Function));
     });
 
-    it("should call handleClick when cancel action is clicked", () => {
+    it("should show confirmation dialog when cancel action is clicked", () => {
+      const job = createMockJob({ Name: "Test Job", Status: CopyJobStatusType.InProgress });
+
+      render(<CopyJobActionMenu job={job} handleClick={mockHandleClick} />);
+
+      const actionButton = screen.getByRole("button", { name: "Actions" });
+      fireEvent.click(actionButton);
+
+      const cancelButton = screen.getByText("Cancel");
+      fireEvent.click(cancelButton);
+
+      expect(mockShowOkCancelModalDialog).toHaveBeenCalledWith(
+        "Confirm Action",
+        null,
+        "Confirm",
+        expect.any(Function),
+        "Cancel",
+        null,
+        expect.any(Object), // dialogBody content
+      );
+    });
+
+    it("should call handleClick when dialog is confirmed for cancel action", () => {
       const job = createMockJob({ Status: CopyJobStatusType.InProgress });
 
       render(<CopyJobActionMenu job={job} handleClick={mockHandleClick} />);
@@ -277,6 +322,9 @@ describe("CopyJobActionMenu", () => {
       const cancelButton = screen.getByText("Cancel");
       fireEvent.click(cancelButton);
 
+      const [, , , onOkCallback] = mockShowOkCancelModalDialog.mock.calls[0];
+      onOkCallback();
+
       expect(mockHandleClick).toHaveBeenCalledWith(job, CopyJobActions.cancel, expect.any(Function));
     });
 
@@ -294,7 +342,33 @@ describe("CopyJobActionMenu", () => {
       expect(mockHandleClick).toHaveBeenCalledWith(job, CopyJobActions.resume, expect.any(Function));
     });
 
-    it("should call handleClick when complete action is clicked", () => {
+    it("should show confirmation dialog when complete action is clicked", () => {
+      const job = createMockJob({
+        Name: "Test Online Job",
+        Status: CopyJobStatusType.InProgress,
+        Mode: CopyJobMigrationType.Online,
+      });
+
+      render(<CopyJobActionMenu job={job} handleClick={mockHandleClick} />);
+
+      const actionButton = screen.getByRole("button", { name: "Actions" });
+      fireEvent.click(actionButton);
+
+      const completeButton = screen.getByText("Complete");
+      fireEvent.click(completeButton);
+
+      expect(mockShowOkCancelModalDialog).toHaveBeenCalledWith(
+        "Confirm Action",
+        null,
+        "Confirm",
+        expect.any(Function),
+        "Cancel",
+        null,
+        expect.any(Object), // dialogBody content
+      );
+    });
+
+    it("should call handleClick when dialog is confirmed for complete action", () => {
       const job = createMockJob({
         Status: CopyJobStatusType.InProgress,
         Mode: CopyJobMigrationType.Online,
@@ -308,10 +382,87 @@ describe("CopyJobActionMenu", () => {
       const completeButton = screen.getByText("Complete");
       fireEvent.click(completeButton);
 
+      const [, , , onOkCallback] = mockShowOkCancelModalDialog.mock.calls[0];
+      onOkCallback();
+
       expect(mockHandleClick).toHaveBeenCalledWith(job, CopyJobActions.complete, expect.any(Function));
     });
   });
 
+  describe("Dialog Body Content", () => {
+    it("should pass correct dialog body content for cancel action", () => {
+      const job = createMockJob({ Name: "MyTestJob", Status: CopyJobStatusType.InProgress });
+
+      render(<CopyJobActionMenu job={job} handleClick={mockHandleClick} />);
+
+      const actionButton = screen.getByRole("button", { name: "Actions" });
+      fireEvent.click(actionButton);
+
+      const cancelButton = screen.getByText("Cancel");
+      fireEvent.click(cancelButton);
+
+      expect(mockShowOkCancelModalDialog).toHaveBeenCalledWith(
+        "Confirm Action",
+        null,
+        "Confirm",
+        expect.any(Function),
+        "Cancel",
+        null,
+        expect.objectContaining({
+          props: expect.objectContaining({
+            tokens: expect.any(Object),
+            children: expect.any(Array),
+          }),
+        }),
+      );
+    });
+
+    it("should pass correct dialog body content for complete action", () => {
+      const job = createMockJob({
+        Name: "OnlineTestJob",
+        Status: CopyJobStatusType.InProgress,
+        Mode: CopyJobMigrationType.Online,
+      });
+
+      render(<CopyJobActionMenu job={job} handleClick={mockHandleClick} />);
+
+      const actionButton = screen.getByRole("button", { name: "Actions" });
+      fireEvent.click(actionButton);
+
+      const completeButton = screen.getByText("Complete");
+      fireEvent.click(completeButton);
+
+      expect(mockShowOkCancelModalDialog).toHaveBeenCalledWith(
+        "Confirm Action",
+        null,
+        "Confirm",
+        expect.any(Function),
+        "Cancel",
+        null,
+        expect.objectContaining({
+          props: expect.objectContaining({
+            tokens: expect.any(Object),
+            children: expect.any(Array),
+          }),
+        }),
+      );
+    });
+
+    it("should not show dialog body for actions without confirmation", () => {
+      const job = createMockJob({ Status: CopyJobStatusType.InProgress });
+
+      render(<CopyJobActionMenu job={job} handleClick={mockHandleClick} />);
+
+      const actionButton = screen.getByRole("button", { name: "Actions" });
+      fireEvent.click(actionButton);
+
+      const pauseButton = screen.getByText("Pause");
+      fireEvent.click(pauseButton);
+
+      expect(mockShowOkCancelModalDialog).not.toHaveBeenCalled();
+    });
+  });
+
   describe("Disabled States During Updates", () => {
     const TestComponentWrapper: React.FC<{
       job: CopyJobType;
@@ -339,8 +490,13 @@ describe("CopyJobActionMenu", () => {
       const pauseButton = screen.getByText("Pause");
       fireEvent.click(pauseButton);
       fireEvent.click(actionButton);
-      const pauseButtonAfterClick = screen.getByText("Pause");
+
+      const pauseButtonAfterClick = screen.getByText("Pause").closest("button");
       expect(pauseButtonAfterClick).toBeInTheDocument();
+      expect(pauseButtonAfterClick).toHaveAttribute("aria-disabled", "true");
+
+      const cancelButtonAfterClick = screen.getByText("Cancel").closest("button");
+      expect(cancelButtonAfterClick).toHaveAttribute("aria-disabled", "true");
     });
 
     it("should not disable actions for different jobs when one is updating", () => {
@@ -360,22 +516,6 @@ describe("CopyJobActionMenu", () => {
       expect(screen.getByText("Cancel")).toBeInTheDocument();
     });
 
-    it("should properly handle multiple action types being disabled for the same job", () => {
-      const job = createMockJob({ Status: CopyJobStatusType.InProgress });
-      render(<TestComponentWrapper job={job} />);
-      const actionButton = screen.getByRole("button", { name: "Actions" });
-
-      fireEvent.click(actionButton);
-      fireEvent.click(screen.getByText("Pause"));
-
-      fireEvent.click(actionButton);
-      fireEvent.click(screen.getByText("Cancel"));
-
-      fireEvent.click(actionButton);
-      expect(screen.getByText("Pause")).toBeInTheDocument();
-      expect(screen.getByText("Cancel")).toBeInTheDocument();
-    });
-
     it("should handle complete action disabled state for online jobs", () => {
       const job = createMockJob({
         Status: CopyJobStatusType.InProgress,
@@ -462,6 +602,7 @@ describe("CopyJobActionMenu", () => {
 
       expect(actionButton).toHaveAttribute("aria-label", "Actions");
       expect(actionButton).toHaveAttribute("title", "Actions");
+      expect(actionButton).toHaveAttribute("role", "button");
 
       const moreIcon = actionButton.querySelector('[data-icon-name="More"]');
       expect(moreIcon || actionButton).toBeInTheDocument();
@@ -608,4 +749,129 @@ describe("CopyJobActionMenu", () => {
       }).not.toThrow();
     });
   });
+
+  describe("Complete Coverage Tests", () => {
+    it("should handle all possible dialog scenarios", () => {
+      const dialogTests = [
+        { action: CopyJobActions.cancel, status: CopyJobStatusType.InProgress, shouldShowDialog: true },
+        {
+          action: CopyJobActions.complete,
+          status: CopyJobStatusType.InProgress,
+          mode: CopyJobMigrationType.Online,
+          shouldShowDialog: true,
+        },
+        { action: CopyJobActions.pause, status: CopyJobStatusType.InProgress, shouldShowDialog: false },
+        { action: CopyJobActions.resume, status: CopyJobStatusType.Paused, shouldShowDialog: false },
+      ];
+
+      dialogTests.forEach(({ action, status, mode = CopyJobMigrationType.Offline, shouldShowDialog }, index) => {
+        jest.clearAllMocks();
+
+        const job = createMockJob({ Status: status, Mode: mode, Name: `DialogTestJob${index}` });
+        const { unmount } = render(<CopyJobActionMenu job={job} handleClick={mockHandleClick} />);
+
+        const actionButton = screen.getByRole("button", { name: "Actions" });
+        fireEvent.click(actionButton);
+
+        const actionText = action.charAt(0).toUpperCase() + action.slice(1);
+        if (screen.queryByText(actionText)) {
+          fireEvent.click(screen.getByText(actionText));
+
+          if (shouldShowDialog) {
+            expect(mockShowOkCancelModalDialog).toHaveBeenCalled();
+          } else {
+            expect(mockShowOkCancelModalDialog).not.toHaveBeenCalled();
+            expect(mockHandleClick).toHaveBeenCalled();
+          }
+        }
+
+        unmount();
+      });
+    });
+
+    it("should verify component handles state updates correctly", () => {
+      const job = createMockJob({ Status: CopyJobStatusType.InProgress });
+      const stateUpdater = jest.fn();
+
+      const testHandleClick: HandleJobActionClickType = (job, action, setUpdatingJobAction) => {
+        setUpdatingJobAction({ jobName: job.Name, action });
+        stateUpdater(job.Name, action);
+      };
+
+      render(<CopyJobActionMenu job={job} handleClick={testHandleClick} />);
+
+      const actionButton = screen.getByRole("button", { name: "Actions" });
+      fireEvent.click(actionButton);
+
+      const pauseButton = screen.getByText("Pause");
+      fireEvent.click(pauseButton);
+
+      expect(stateUpdater).toHaveBeenCalledWith(job.Name, CopyJobActions.pause);
+    });
+  });
+
+  describe("Full Integration Coverage", () => {
+    it("should test complete workflow for cancel action with dialog", () => {
+      const job = createMockJob({ Name: "Integration Test Job", Status: CopyJobStatusType.InProgress });
+      render(<CopyJobActionMenu job={job} handleClick={mockHandleClick} />);
+
+      const actionButton = screen.getByRole("button", { name: "Actions" });
+      expect(actionButton).toHaveAttribute("data-test", "CopyJobActionMenu/Button:Integration Test Job");
+      fireEvent.click(actionButton);
+
+      const cancelButton = screen.getByText("Cancel");
+      fireEvent.click(cancelButton);
+
+      expect(mockShowOkCancelModalDialog).toHaveBeenCalledWith(
+        "Confirm Action", // title
+        null, // subText
+        "Confirm", // confirmLabel
+        expect.any(Function), // onOk
+        "Cancel", // cancelLabel
+        null, // onCancel
+        expect.any(Object), // contentHtml (dialogBody)
+      );
+
+      const onOkCallback = mockShowOkCancelModalDialog.mock.calls[0][3];
+      onOkCallback();
+
+      expect(mockHandleClick).toHaveBeenCalledWith(job, CopyJobActions.cancel, expect.any(Function));
+    });
+
+    it("should test complete workflow for complete action with dialog", () => {
+      const job = createMockJob({
+        Name: "Online Integration Job",
+        Status: CopyJobStatusType.Running,
+        Mode: CopyJobMigrationType.Online,
+      });
+
+      render(<CopyJobActionMenu job={job} handleClick={mockHandleClick} />);
+
+      const actionButton = screen.getByRole("button", { name: "Actions" });
+      fireEvent.click(actionButton);
+
+      const completeButton = screen.getByText("Complete");
+      fireEvent.click(completeButton);
+
+      expect(mockShowOkCancelModalDialog).toHaveBeenCalled();
+
+      const dialogContent = mockShowOkCancelModalDialog.mock.calls[0][6];
+      expect(dialogContent).toBeTruthy();
+
+      const onOkCallback = mockShowOkCancelModalDialog.mock.calls[0][3];
+      onOkCallback();
+
+      expect(mockHandleClick).toHaveBeenCalledWith(job, CopyJobActions.complete, expect.any(Function));
+    });
+
+    it("should maintain proper component lifecycle", () => {
+      const job = createMockJob({ Status: CopyJobStatusType.InProgress });
+      const { rerender, unmount } = render(<CopyJobActionMenu job={job} handleClick={mockHandleClick} />);
+
+      rerender(<CopyJobActionMenu job={job} handleClick={mockHandleClick} />);
+      expect(screen.getByRole("button", { name: "Actions" })).toBeInTheDocument();
+
+      expect(() => unmount()).not.toThrow();
+    });
+  });
 });

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

@@ -1,5 +1,6 @@
-import { IconButton, IContextualMenuProps } from "@fluentui/react";
+import { DirectionalHint, IconButton, IContextualMenuProps, Stack } from "@fluentui/react";
 import React from "react";
+import { useDialog } from "../../../Controls/Dialog";
 import ContainerCopyMessages from "../../ContainerCopyMessages";
 import { CopyJobActions, CopyJobMigrationType, CopyJobStatusType } from "../../Enums/CopyJobEnums";
 import { CopyJobType, HandleJobActionClickType } from "../../Types/CopyJobTypes";
@@ -9,6 +10,28 @@ interface CopyJobActionMenuProps {
   handleClick: HandleJobActionClickType;
 }
 
+const dialogBody = {
+  [CopyJobActions.cancel]: (jobName: string) => (
+    <Stack tokens={{ childrenGap: 10 }}>
+      <Stack.Item>
+        You are about to cancel <b>{jobName}</b> copy job.
+      </Stack.Item>
+      <Stack.Item>Cancelling will stop the job immediately.</Stack.Item>
+    </Stack>
+  ),
+  [CopyJobActions.complete]: (jobName: string) => (
+    <Stack tokens={{ childrenGap: 10 }}>
+      <Stack.Item>
+        You are about to complete <b>{jobName}</b> copy job.
+      </Stack.Item>
+      <Stack.Item>
+        Once completed, continuous data copy will stop after any pending documents are processed. To maintain data
+        integrity, we recommend stopping updates to the source container before completing the job.
+      </Stack.Item>
+    </Stack>
+  ),
+};
+
 const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick }) => {
   const [updatingJobAction, setUpdatingJobAction] = React.useState<{ jobName: string; action: string } | null>(null);
   if (
@@ -22,9 +45,22 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
     return null;
   }
 
+  const showActionConfirmationDialog = (job: CopyJobType, action: CopyJobActions): void => {
+    useDialog
+      .getState()
+      .showOkCancelModalDialog(
+        ContainerCopyMessages.MonitorJobs.dialog.heading,
+        null,
+        ContainerCopyMessages.MonitorJobs.dialog.confirmButtonText,
+        () => handleClick(job, action, setUpdatingJobAction),
+        ContainerCopyMessages.MonitorJobs.dialog.cancelButtonText,
+        null,
+        action in dialogBody ? dialogBody[action as keyof typeof dialogBody](job.Name) : null,
+      );
+  };
+
   const getMenuItems = (): IContextualMenuProps["items"] => {
     const isThisJobUpdating = updatingJobAction?.jobName === job.Name;
-    const updatingAction = updatingJobAction?.action;
 
     const baseItems = [
       {
@@ -32,21 +68,21 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
         text: ContainerCopyMessages.MonitorJobs.Actions.pause,
         iconProps: { iconName: "Pause" },
         onClick: () => handleClick(job, CopyJobActions.pause, setUpdatingJobAction),
-        disabled: isThisJobUpdating && updatingAction === CopyJobActions.pause,
+        disabled: isThisJobUpdating,
       },
       {
         key: CopyJobActions.cancel,
         text: ContainerCopyMessages.MonitorJobs.Actions.cancel,
         iconProps: { iconName: "Cancel" },
-        onClick: () => handleClick(job, CopyJobActions.cancel, setUpdatingJobAction),
-        disabled: isThisJobUpdating && updatingAction === CopyJobActions.cancel,
+        onClick: () => showActionConfirmationDialog(job, CopyJobActions.cancel),
+        disabled: isThisJobUpdating,
       },
       {
         key: CopyJobActions.resume,
         text: ContainerCopyMessages.MonitorJobs.Actions.resume,
         iconProps: { iconName: "Play" },
         onClick: () => handleClick(job, CopyJobActions.resume, setUpdatingJobAction),
-        disabled: isThisJobUpdating && updatingAction === CopyJobActions.resume,
+        disabled: isThisJobUpdating,
       },
     ];
 
@@ -67,8 +103,8 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
           key: CopyJobActions.complete,
           text: ContainerCopyMessages.MonitorJobs.Actions.complete,
           iconProps: { iconName: "CheckMark" },
-          onClick: () => handleClick(job, CopyJobActions.complete, setUpdatingJobAction),
-          disabled: isThisJobUpdating && updatingAction === CopyJobActions.complete,
+          onClick: () => showActionConfirmationDialog(job, CopyJobActions.complete),
+          disabled: isThisJobUpdating,
         });
       }
       return filteredItems;
@@ -86,8 +122,8 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
       data-test={`CopyJobActionMenu/Button:${job.Name}`}
       role="button"
       iconProps={{ iconName: "More", styles: { root: { fontSize: "20px", fontWeight: "bold" } } }}
-      menuProps={{ items: getMenuItems() }}
-      menuIconProps={{ iconName: "" }}
+      menuProps={{ items: getMenuItems(), directionalHint: DirectionalHint.leftTopEdge, directionalHintFixed: false }}
+      menuIconProps={{ iconName: "", className: "hidden" }}
       ariaLabel={ContainerCopyMessages.MonitorJobs.Columns.actions}
       title={ContainerCopyMessages.MonitorJobs.Columns.actions}
     />

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

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

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

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

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

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

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

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

src/Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobs.tsx

@@ -10,7 +10,7 @@ import CopyJobsNotFound from "../MonitorCopyJobs/Components/CopyJobs.NotFound";
 import { CopyJobType, JobActionUpdatorType } from "../Types/CopyJobTypes";
 import CopyJobsList from "./Components/CopyJobsList";
 
-const FETCH_INTERVAL_MS = 30 * 1000;
+const FETCH_INTERVAL_MS = 60 * 1000;
 const SHIMMER_INDENT_LEVELS: IndentLevel[] = Array(7).fill({ level: 0, width: "100%" });
 
 interface MonitorCopyJobsProps {

src/Explorer/ContainerCopy/containerCopyStyles.less

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

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

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

src/Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent.tsx

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

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx

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

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

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

src/Explorer/Panes/PanelContainerComponent.test.tsx

@@ -8,6 +8,7 @@ describe("PaneContainerComponent test", () => {
       headerText: "test",
       panelContent: <div></div>,
       isOpen: true,
+      isLightDismiss: true,
       hasConsole: false,
       isConsoleExpanded: false,
     };
@@ -20,6 +21,7 @@ describe("PaneContainerComponent test", () => {
       headerText: "test",
       panelContent: <div></div>,
       isOpen: true,
+      isLightDismiss: true,
       hasConsole: true,
       isConsoleExpanded: false,
     };
@@ -32,6 +34,7 @@ describe("PaneContainerComponent test", () => {
       headerText: "test",
       panelContent: undefined,
       isOpen: true,
+      isLightDismiss: true,
       hasConsole: true,
       isConsoleExpanded: false,
     };
@@ -44,6 +47,7 @@ describe("PaneContainerComponent test", () => {
       headerText: "test",
       panelContent: <div></div>,
       isOpen: true,
+      isLightDismiss: true,
       hasConsole: true,
       isConsoleExpanded: true,
     };

src/Explorer/Panes/PanelContainerComponent.tsx

@@ -9,6 +9,7 @@ export interface PanelContainerProps {
   isConsoleExpanded: boolean;
   isOpen: boolean;
   hasConsole: boolean;
+  isLightDismiss: boolean;
   isConsoleAnimationFinished?: boolean;
   panelWidth?: string;
   onRenderNavigationContent?: IRenderFunction<IPanelProps>;
@@ -58,7 +59,7 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
         headerText={this.props.headerText}
         isOpen={this.props.isOpen}
         onDismiss={this.onDissmiss}
-        isLightDismiss
+        isLightDismiss={this.props.isLightDismiss}
         type={PanelType.custom}
         closeButtonAriaLabel={`Close ${this.props.headerText}`}
         customWidth={this.props.panelWidth ? this.props.panelWidth : "440px"}
@@ -140,10 +141,11 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
 export const SidePanel: React.FC = () => {
   const isConsoleExpanded = useNotificationConsole((state) => state.isExpanded);
   const isConsoleAnimationFinished = useNotificationConsole((state) => state.consoleAnimationFinished);
-  const { isOpen, hasConsole, panelContent, panelWidth, headerText } = useSidePanel((state) => {
+  const { isOpen, hasConsole, isLightDismiss, panelContent, panelWidth, headerText } = useSidePanel((state) => {
     return {
       isOpen: state.isOpen,
       hasConsole: state.hasConsole,
+      isLightDismiss: state.isLightDismiss,
       panelContent: state.panelContent,
       headerText: state.headerText,
       panelWidth: state.panelWidth,
@@ -154,6 +156,7 @@ export const SidePanel: React.FC = () => {
   return (
     <PanelContainerComponent
       hasConsole={hasConsole}
+      isLightDismiss={isLightDismiss}
       isOpen={isOpen}
       panelContent={panelContent}
       headerText={headerText}

src/Explorer/Panes/PanelLoadingScreen.tsx

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

src/Main.tsx

@@ -128,6 +128,7 @@ const App = (): JSX.Element => {
             <>
               <ContainerCopyPanel explorer={explorer} />
               <SidePanel />
+              <Dialog />
             </>
           ) : (
             <DivExplorer explorer={explorer} />

src/hooks/useSidePanel.ts

@@ -4,20 +4,24 @@ export interface SidePanelState {
   isOpen: boolean;
   panelWidth: string;
   hasConsole: boolean;
+  isLightDismiss: boolean;
   panelContent?: JSX.Element;
   headerText?: string;
   setHeaderText: (headerText: string) => void;
   openSidePanel: (headerText: string, panelContent: JSX.Element, panelWidth?: string, onClose?: () => void) => void;
   closeSidePanel: () => void;
   setPanelHasConsole: (hasConsole: boolean) => void;
+  setLightDismiss: (isLightDismiss: boolean) => void;
   getRef?: React.RefObject<HTMLElement>; // Optional ref for focusing the last element.
 }
 export const useSidePanel: UseStore<SidePanelState> = create((set) => ({
   isOpen: false,
   panelWidth: "440px",
   hasConsole: true,
+  isLightDismiss: true,
   setHeaderText: (headerText: string) => set((state) => ({ ...state, headerText })),
   setPanelHasConsole: (hasConsole: boolean) => set((state) => ({ ...state, hasConsole })),
+  setLightDismiss: (isLightDismiss: boolean) => set((state) => ({ ...state, isLightDismiss })),
   openSidePanel: (headerText, panelContent, panelWidth = "440px") =>
     set((state) => ({ ...state, headerText, panelContent, panelWidth, isOpen: true })),
   closeSidePanel: () => {

src/less/DarkModeMenus.less

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

src/less/ThemeSystem.less

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

test/README.md

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

test/fx.ts

@@ -11,7 +11,7 @@ export interface TestNameOptions {
   prefixed?: boolean;
 }
 
-export function generateUniqueName(baseName, options?: TestNameOptions): string {
+export function generateUniqueName(baseName: string, options?: TestNameOptions): string {
   const length = options?.length ?? 1;
   const timestamp = options?.timestampped === undefined ? true : options.timestampped;
   const prefixed = options?.prefixed === undefined ? true : options.prefixed;
@@ -40,6 +40,7 @@ export enum TestAccount {
   Mongo32 = "Mongo32",
   SQL = "SQL",
   SQLReadOnly = "SQLReadOnly",
+  SQLContainerCopyOnly = "SQLContainerCopyOnly",
 }
 
 export const defaultAccounts: Record<TestAccount, string> = {
@@ -51,6 +52,7 @@ export const defaultAccounts: Record<TestAccount, string> = {
   [TestAccount.Mongo32]: "github-e2etests-mongo32",
   [TestAccount.SQL]: "github-e2etests-sql",
   [TestAccount.SQLReadOnly]: "github-e2etests-sql-readonly",
+  [TestAccount.SQLContainerCopyOnly]: "github-e2etests-sql-containercopyonly",
 };
 
 export const resourceGroupName = process.env.DE_TEST_RESOURCE_GROUP ?? "de-e2e-tests";
@@ -77,7 +79,14 @@ export function getAccountName(accountType: TestAccount) {
   );
 }
 
-export async function getTestExplorerUrl(accountType: TestAccount, iframeSrc?: string): Promise<string> {
+type TestExplorerUrlOptions = {
+  iframeSrc?: string;
+  enablecontainercopy?: boolean;
+};
+
+export async function getTestExplorerUrl(accountType: TestAccount, options?: TestExplorerUrlOptions): Promise<string> {
+  const { iframeSrc, enablecontainercopy } = options ?? {};
+
   // We can't retrieve AZ CLI credentials from the browser so we get them here.
   const token = await getAzureCLICredentialsToken();
   const accountName = getAccountName(accountType);
@@ -93,6 +102,7 @@ export async function getTestExplorerUrl(accountType: TestAccount, iframeSrc?: s
 
   const nosqlRbacToken = process.env.NOSQL_TESTACCOUNT_TOKEN;
   const nosqlReadOnlyRbacToken = process.env.NOSQL_READONLY_TESTACCOUNT_TOKEN;
+  const nosqlContainerCopyRbacToken = process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN;
   const tableRbacToken = process.env.TABLE_TESTACCOUNT_TOKEN;
   const gremlinRbacToken = process.env.GREMLIN_TESTACCOUNT_TOKEN;
   const cassandraRbacToken = process.env.CASSANDRA_TESTACCOUNT_TOKEN;
@@ -108,6 +118,16 @@ export async function getTestExplorerUrl(accountType: TestAccount, iframeSrc?: s
       }
       break;
 
+    case TestAccount.SQLContainerCopyOnly:
+      if (nosqlContainerCopyRbacToken) {
+        params.set("nosqlRbacToken", nosqlContainerCopyRbacToken);
+        params.set("enableaaddataplane", "true");
+      }
+      if (enablecontainercopy) {
+        params.set("enablecontainercopy", "true");
+      }
+      break;
+
     case TestAccount.SQLReadOnly:
       if (nosqlReadOnlyRbacToken) {
         params.set("nosqlReadOnlyRbacToken", nosqlReadOnlyRbacToken);
@@ -165,6 +185,39 @@ export async function getTestExplorerUrl(accountType: TestAccount, iframeSrc?: s
   return `https://localhost:1234/testExplorer.html?${params.toString()}`;
 }
 
+type DropdownItemExpectations = {
+  ariaLabel?: string;
+  itemCount?: number;
+};
+
+type DropdownItemMatcher = {
+  name?: string;
+  position?: number;
+};
+
+export async function getDropdownItemByNameOrPosition(
+  frame: Frame,
+  matcher?: DropdownItemMatcher,
+  expectedOptions?: DropdownItemExpectations,
+): Promise<Locator> {
+  const dropdownItemsWrapper = frame.locator("div.ms-Dropdown-items");
+  if (expectedOptions?.ariaLabel) {
+    expect(await dropdownItemsWrapper.getAttribute("aria-label")).toEqual(expectedOptions.ariaLabel);
+  }
+  if (expectedOptions?.itemCount) {
+    const items = dropdownItemsWrapper.locator("button.ms-Dropdown-item[role='option']");
+    await expect(items).toHaveCount(expectedOptions.itemCount);
+  }
+  const containerDropdownItems = dropdownItemsWrapper.locator("button.ms-Dropdown-item[role='option']");
+  if (matcher?.name) {
+    return containerDropdownItems.filter({ hasText: matcher.name });
+  } else if (matcher?.position !== undefined) {
+    return containerDropdownItems.nth(matcher.position);
+  }
+  // Return first item if no matcher is provided
+  return containerDropdownItems.first();
+}
+
 /** Helper class that provides locator methods for TreeNode elements, on top of a Locator */
 class TreeNode {
   constructor(
@@ -470,17 +523,8 @@ export class DataExplorer {
     return this.frame.getByTestId("notification-console/header-status");
   }
 
-  async getDropdownItemByName(name: string, ariaLabel?: string): Promise<Locator> {
-    const dropdownItemsWrapper = this.frame.locator("div.ms-Dropdown-items");
-    if (ariaLabel) {
-      expect(await dropdownItemsWrapper.getAttribute("aria-label")).toEqual(ariaLabel);
-    }
-    const containerDropdownItems = dropdownItemsWrapper.locator("button.ms-Dropdown-item[role='option']");
-    return containerDropdownItems.filter({ hasText: name });
-  }
-
   /** Waits for the Data Explorer app to load */
-  static async waitForExplorer(page: Page) {
+  static async waitForExplorer(page: Page, options?: TestExplorerUrlOptions): Promise<DataExplorer> {
     const iframeElement = await page.getByTestId("DataExplorerFrame").elementHandle();
     if (iframeElement === null) {
       throw new Error("Explorer iframe not found");
@@ -492,15 +536,110 @@ export class DataExplorer {
       throw new Error("Explorer frame not found");
     }
 
-    await explorerFrame?.getByTestId("DataExplorerRoot").waitFor();
+    if (!options?.enablecontainercopy) {
+      await explorerFrame?.getByTestId("DataExplorerRoot").waitFor();
+    }
 
     return new DataExplorer(explorerFrame);
   }
 
   /** Opens the Data Explorer app using the specified test account (and optionally, the provided IFRAME src url). */
   static async open(page: Page, testAccount: TestAccount, iframeSrc?: string): Promise<DataExplorer> {
-    const url = await getTestExplorerUrl(testAccount, iframeSrc);
+    const url = await getTestExplorerUrl(testAccount, { iframeSrc });
     await page.goto(url);
     return DataExplorer.waitForExplorer(page);
   }
 }
+
+export async function waitForApiResponse(
+  page: Page,
+  urlPattern: string,
+  method?: string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  payloadValidator?: (payload: any) => boolean,
+) {
+  return page.waitForResponse(async (response) => {
+    const request = response.request();
+
+    if (!request.url().includes(urlPattern)) {
+      return false;
+    }
+
+    if (method && request.method() !== method) {
+      return false;
+    }
+
+    if (payloadValidator && (request.method() === "POST" || request.method() === "PUT")) {
+      const postData = request.postData();
+      if (postData) {
+        try {
+          const payload = JSON.parse(postData);
+          return payloadValidator(payload);
+        } catch {
+          return false;
+        }
+      }
+    }
+    return true;
+  });
+}
+export async function interceptAndInspectApiRequest(
+  page: Page,
+  urlPattern: string,
+  method: string = "POST",
+  error: Error,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  errorValidator: (url?: string, payload?: any) => boolean,
+): Promise<void> {
+  await page.route(
+    (url) => url.pathname.includes(urlPattern),
+    async (route, request) => {
+      if (request.method() !== method) {
+        await route.continue();
+        return;
+      }
+      const postData = request.postData();
+      if (postData) {
+        try {
+          const payload = JSON.parse(postData);
+          if (errorValidator && errorValidator(request.url(), payload)) {
+            await route.fulfill({
+              status: 409,
+              contentType: "application/json",
+              body: JSON.stringify({
+                code: "Conflict",
+                message: error.message,
+              }),
+            });
+            return;
+          }
+        } catch (err) {
+          if (err instanceof Error && err.message.includes("not allowed")) {
+            throw err;
+          }
+        }
+      }
+
+      await route.continue();
+    },
+  );
+}
+
+export class ContainerCopy {
+  constructor(
+    public frame: Frame,
+    public wrapper: Locator,
+  ) {}
+
+  static async waitForContainerCopy(page: Page): Promise<ContainerCopy> {
+    const explorerFrame = await DataExplorer.waitForExplorer(page, { enablecontainercopy: true });
+    const containerCopyWrapper = explorerFrame.frame.locator("div#containerCopyWrapper");
+    return new ContainerCopy(explorerFrame.frame, containerCopyWrapper);
+  }
+
+  static async open(page: Page, testAccount: TestAccount, iframeSrc?: string): Promise<ContainerCopy> {
+    const url = await getTestExplorerUrl(testAccount, { iframeSrc, enablecontainercopy: true });
+    await page.goto(url);
+    return ContainerCopy.waitForContainerCopy(page);
+  }
+}

test/sql/containercopy.spec.ts

@@ -0,0 +1,697 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { expect, Frame, Locator, Page, test } from "@playwright/test";
+import { set } from "lodash";
+import { DatabaseAccount, Subscription } from "../../src/Contracts/DataModels";
+import { truncateName } from "../../src/Explorer/ContainerCopy/CopyJobUtils";
+import {
+  ContainerCopy,
+  getAccountName,
+  getDropdownItemByNameOrPosition,
+  interceptAndInspectApiRequest,
+  TestAccount,
+  waitForApiResponse,
+} from "../fx";
+
+test.describe.configure({ mode: "serial" });
+let page: Page;
+let wrapper: Locator = null!;
+let panel: Locator = null!;
+let frame: Frame = null!;
+let expectedCopyJobNameInitial: string = null!;
+let expectedSourceSubscription: any = null!;
+let expectedSourceAccount: DatabaseAccount = null!;
+let expectedJobName: string = "";
+let targetAccountName: string = "";
+let expectedSourceAccountName: string = "";
+
+test.beforeAll("Container Copy - Before All", async ({ browser }) => {
+  page = await browser.newPage();
+  ({ wrapper, frame } = await ContainerCopy.open(page, TestAccount.SQLContainerCopyOnly));
+  expectedJobName = `test_job_${Date.now()}`;
+  targetAccountName = getAccountName(TestAccount.SQLContainerCopyOnly);
+});
+
+test.afterEach("Container Copy - After Each", async () => {
+  await page.unroute(/.*/, (route) => route.continue());
+});
+
+test("Loading and verifying the content of the page", async () => {
+  expect(wrapper).not.toBeNull();
+  await expect(wrapper.getByTestId("CommandBar/Button:Create Copy Job")).toBeVisible();
+  await expect(wrapper.getByTestId("CommandBar/Button:Refresh")).toBeVisible();
+  await expect(wrapper.getByTestId("CommandBar/Button:Feedback")).toBeVisible();
+});
+
+test("Opening the Create Copy Job panel", async () => {
+  const createCopyJobButton = wrapper.getByTestId("CommandBar/Button:Create Copy Job");
+  await createCopyJobButton.click();
+  panel = frame.getByTestId("Panel:Create copy job");
+  await expect(panel).toBeVisible();
+  await expect(panel.getByRole("heading", { name: "Create copy job" })).toBeVisible();
+});
+
+test("select different account dropdown and choose online copy radio button", async () => {
+  const accountDropdown = panel.getByTestId("account-dropdown");
+  await accountDropdown.click();
+
+  const dropdownItemsWrapper = frame.locator("div.ms-Dropdown-items");
+  expect(await dropdownItemsWrapper.getAttribute("aria-label")).toEqual("Account");
+
+  const allDropdownItems = await dropdownItemsWrapper.locator(`button.ms-Dropdown-item[role='option']`).all();
+
+  const filteredItems = [];
+  for (const item of allDropdownItems) {
+    const testContent = (await item.textContent()) ?? "";
+    if (testContent.trim() !== targetAccountName.trim()) {
+      filteredItems.push(item);
+    }
+  }
+
+  if (filteredItems.length > 0) {
+    const firstDropdownItem = filteredItems[0];
+    expectedSourceAccountName = (await firstDropdownItem.textContent()) ?? "";
+    await firstDropdownItem.click();
+  } else {
+    throw new Error("No dropdown items available after filtering");
+  }
+
+  const migrationTypeContainer = panel.getByTestId("migration-type");
+  const onlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Online mode/i });
+  await onlineCopyRadioButton.click();
+
+  await panel.getByRole("button", { name: "Next" }).click();
+});
+
+test("Verifying Assign Permissions panel for online copy", async () => {
+  const permissionScreen = panel.getByTestId("Panel:AssignPermissionsContainer");
+  await expect(permissionScreen).toBeVisible();
+
+  await expect(permissionScreen.getByText("Online container copy", { exact: true })).toBeVisible();
+  await expect(permissionScreen.getByText("Cross-account container copy", { exact: true })).toBeVisible();
+});
+
+test("Verify Point-in-Time Restore timer and refresh button workflow", async () => {
+  await page.route(`**/Microsoft.DocumentDB/databaseAccounts/${expectedSourceAccountName}**`, async (route) => {
+    const mockData = {
+      identity: {
+        type: "SystemAssigned",
+        principalId: "00-11-22-33",
+      },
+      properties: {
+        defaultIdentity: "SystemAssignedIdentity",
+        backupPolicy: {
+          type: "Continuous",
+        },
+        capabilities: [{ name: "EnableOnlineContainerCopy" }],
+      },
+    };
+    if (route.request().method() === "GET") {
+      const response = await route.fetch();
+      const actualData = await response.json();
+      const mergedData = { ...actualData };
+
+      set(mergedData, "identity", mockData.identity);
+      set(mergedData, "properties.defaultIdentity", mockData.properties.defaultIdentity);
+      set(mergedData, "properties.backupPolicy", mockData.properties.backupPolicy);
+      set(mergedData, "properties.capabilities", mockData.properties.capabilities);
+
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify(mergedData),
+      });
+    } else {
+      await route.continue();
+    }
+  });
+
+  const permissionScreen = panel.getByTestId("Panel:AssignPermissionsContainer");
+  await expect(permissionScreen).toBeVisible();
+
+  const expandedAccordionHeader = permissionScreen
+    .getByTestId("permission-group-container-onlineConfigs")
+    .locator("button[aria-expanded='true']");
+  await expect(expandedAccordionHeader).toBeVisible();
+
+  const accordionItem = expandedAccordionHeader
+    .locator("xpath=ancestor::*[contains(@class, 'fui-AccordionItem') or contains(@data-test, 'accordion-item')]")
+    .first();
+
+  const accordionPanel = accordionItem.locator("[role='tabpanel'], .fui-AccordionPanel, [data-test*='panel']").first();
+
+  await page.clock.install({ time: new Date("2024-01-01T10:00:00Z") });
+
+  const pitrBtn = accordionPanel.getByTestId("pointInTimeRestore:PrimaryBtn");
+  await expect(pitrBtn).toBeVisible();
+  await pitrBtn.click();
+
+  page.context().on("page", async (newPage) => {
+    const expectedUrlEndPattern = new RegExp(
+      `/providers/Microsoft.(DocumentDB|DocumentDb)/databaseAccounts/${expectedSourceAccountName}/backupRestore`,
+    );
+    expect(newPage.url()).toMatch(expectedUrlEndPattern);
+    await newPage.close();
+  });
+
+  const loadingOverlay = frame.locator("[data-test='loading-overlay']");
+  await expect(loadingOverlay).toBeVisible();
+
+  const refreshBtn = accordionPanel.getByTestId("pointInTimeRestore:RefreshBtn");
+  await expect(refreshBtn).not.toBeVisible();
+
+  // Fast forward time by 11 minutes (11 * 60 * 1000ms = 660000ms)
+  await page.clock.fastForward(11 * 60 * 1000);
+
+  await expect(refreshBtn).toBeVisible();
+  await expect(pitrBtn).not.toBeVisible();
+
+  await refreshBtn.click();
+  await expect(loadingOverlay).toBeVisible();
+
+  await expect(loadingOverlay).toBeHidden({ timeout: 10 * 1000 });
+});
+
+test("Veify Popover & Loading Overlay on permission screen with API mocks and accordion interactions", async () => {
+  await page.route(
+    `**/Microsoft.DocumentDB/databaseAccounts/${expectedSourceAccountName}/sqlRoleAssignments*`,
+    async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          value: [
+            {
+              principalId: "00-11-22-33",
+              roleDefinitionId: `Microsoft.DocumentDB/databaseAccounts/${expectedSourceAccountName}/77-88-99`,
+            },
+          ],
+        }),
+      });
+    },
+  );
+
+  await page.route("**/Microsoft.DocumentDB/databaseAccounts/*/77-88-99**", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        value: [
+          {
+            name: "00000000-0000-0000-0000-000000000001",
+          },
+        ],
+      }),
+    });
+  });
+
+  await page.route(`**/Microsoft.DocumentDB/databaseAccounts/${targetAccountName}**`, async (route) => {
+    const mockData = {
+      identity: {
+        type: "SystemAssigned",
+        principalId: "00-11-22-33",
+      },
+      properties: {
+        defaultIdentity: "SystemAssignedIdentity",
+        backupPolicy: {
+          type: "Continuous",
+        },
+        capabilities: [{ name: "EnableOnlineContainerCopy" }],
+      },
+    };
+
+    if (route.request().method() === "PATCH") {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({ status: "Succeeded" }),
+      });
+    } else if (route.request().method() === "GET") {
+      // Get the actual response and merge with mock data
+      const response = await route.fetch();
+      const actualData = await response.json();
+      const mergedData = { ...actualData };
+      set(mergedData, "identity", mockData.identity);
+      set(mergedData, "properties.defaultIdentity", mockData.properties.defaultIdentity);
+      set(mergedData, "properties.backupPolicy", mockData.properties.backupPolicy);
+      set(mergedData, "properties.capabilities", mockData.properties.capabilities);
+
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify(mergedData),
+      });
+    } else {
+      await route.continue();
+    }
+  });
+
+  const permissionScreen = panel.getByTestId("Panel:AssignPermissionsContainer");
+  await expect(permissionScreen).toBeVisible();
+
+  const expandedAccordionHeader = permissionScreen
+    .getByTestId("permission-group-container-crossAccountConfigs")
+    .locator("button[aria-expanded='true']");
+  await expect(expandedAccordionHeader).toBeVisible();
+
+  const accordionItem = expandedAccordionHeader
+    .locator("xpath=ancestor::*[contains(@class, 'fui-AccordionItem') or contains(@data-test, 'accordion-item')]")
+    .first();
+
+  const accordionPanel = accordionItem.locator("[role='tabpanel'], .fui-AccordionPanel, [data-test*='panel']").first();
+
+  const toggleButton = accordionPanel.getByTestId("btn-toggle");
+  await expect(toggleButton).toBeVisible();
+  await toggleButton.click();
+
+  const popover = frame.locator("[data-test='popover-container']");
+  await expect(popover).toBeVisible();
+
+  const yesButton = popover.getByRole("button", { name: /Yes/i });
+  const noButton = popover.getByRole("button", { name: /No/i });
+  await expect(yesButton).toBeVisible();
+  await expect(noButton).toBeVisible();
+
+  await yesButton.click();
+
+  const loadingOverlay = frame.locator("[data-test='loading-overlay']");
+  await expect(loadingOverlay).toBeVisible();
+
+  await expect(loadingOverlay).toBeHidden({ timeout: 10 * 1000 });
+  await expect(popover).toBeHidden({ timeout: 10 * 1000 });
+
+  await panel.getByRole("button", { name: "Cancel" }).click();
+});
+
+test("Loading and verifying subscription & account dropdown", async () => {
+  const createCopyJobButton = wrapper.getByTestId("CommandBar/Button:Create Copy Job");
+  await createCopyJobButton.click();
+  panel = frame.getByTestId("Panel:Create copy job");
+  await expect(panel).toBeVisible();
+
+  const subscriptionPromise = waitForApiResponse(page, "/Microsoft.ResourceGraph/resources", "POST", (payload: any) => {
+    return (
+      payload.query.includes("resources | where type == 'microsoft.documentdb/databaseaccounts'") &&
+      payload.query.includes("| where type == 'microsoft.resources/subscriptions'")
+    );
+  });
+
+  const accountPromise = waitForApiResponse(page, "/Microsoft.ResourceGraph/resources", "POST", (payload: any) => {
+    return payload.query.includes("resources | where type =~ 'microsoft.documentdb/databaseaccounts'");
+  });
+
+  const subscriptionResponse = await subscriptionPromise;
+  const data = await subscriptionResponse.json();
+  expect(subscriptionResponse.ok()).toBe(true);
+
+  const accountResponse = await accountPromise;
+  const accountData = await accountResponse.json();
+  expect(accountResponse.ok()).toBe(true);
+
+  const selectedSubscription = data.data.find(
+    (item: Subscription) => item.subscriptionId === process.env.DE_TEST_SUBSCRIPTION_ID,
+  );
+
+  const subscriptionDropdown = panel.getByTestId("subscription-dropdown");
+  await expect(subscriptionDropdown).toHaveText(new RegExp(selectedSubscription.subscriptionName));
+  await subscriptionDropdown.click();
+
+  const subscriptionItem = await getDropdownItemByNameOrPosition(
+    frame,
+    { name: selectedSubscription.subscriptionName },
+    { ariaLabel: "Subscription", itemCount: data.count },
+  );
+  await subscriptionItem.click();
+
+  const expectedAccountName = getAccountName(TestAccount.SQLContainerCopyOnly);
+  const selectedAccount = accountData.data.find((item: DatabaseAccount) => item.name === expectedAccountName);
+
+  const accountDropdown = panel.getByTestId("account-dropdown");
+  await expect(accountDropdown).toHaveText(new RegExp(expectedAccountName));
+  await accountDropdown.click();
+
+  const accountItem = await getDropdownItemByNameOrPosition(
+    frame,
+    { name: expectedAccountName },
+    { ariaLabel: "Account" },
+  );
+  await accountItem.click();
+
+  expectedSourceSubscription = selectedSubscription;
+  expectedSourceAccount = selectedAccount;
+});
+
+test("Verifying online or offline content", async () => {
+  /**
+   * This test verifies the functionality of the migration type radio that toggles between
+   * online and offline container copy modes. It ensures that:
+   * 1. When online mode is selected, the user is directed to a permissions screen
+   * 2. When offline mode is selected, the user bypasses the permissions screen
+   * 3. The UI correctly reflects the selected migration type throughout the workflow
+   */
+  const migrationTypeContainer = panel.getByTestId("migration-type");
+  const onlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Online mode/i });
+  await onlineCopyRadioButton.click();
+
+  await panel.getByRole("button", { name: "Next" }).click();
+
+  await expect(panel.getByTestId("Panel:AssignPermissionsContainer")).toBeVisible();
+  await expect(panel.getByText("Online container copy", { exact: true })).toBeVisible();
+  await panel.getByRole("button", { name: "Previous" }).click();
+
+  const offlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Offline mode/i });
+  await offlineCopyRadioButton.click();
+  await panel.getByRole("button", { name: "Next" }).click();
+
+  await expect(panel.getByTestId("Panel:SelectSourceAndTargetContainers")).toBeVisible();
+  await expect(panel.getByTestId("Panel:AssignPermissionsContainer")).not.toBeVisible();
+});
+
+test("Verifying source and target container selection", async () => {
+  const sourceContainerDropdown = panel.getByTestId("source-containerDropdown");
+  expect(sourceContainerDropdown).toBeVisible();
+  await expect(sourceContainerDropdown).toHaveClass(/(^|\s)is-disabled(\s|$)/);
+
+  const sourceDatabaseDropdown = panel.getByTestId("source-databaseDropdown");
+  await sourceDatabaseDropdown.click();
+
+  const sourceDbDropdownItem = await getDropdownItemByNameOrPosition(frame, { position: 0 }, { ariaLabel: "Database" });
+  await sourceDbDropdownItem.click();
+
+  await expect(sourceContainerDropdown).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
+  await sourceContainerDropdown.click();
+  const sourceContainerDropdownItem = await getDropdownItemByNameOrPosition(
+    frame,
+    { position: 0 },
+    { ariaLabel: "Container" },
+  );
+  await sourceContainerDropdownItem.click();
+
+  const targetContainerDropdown = panel.getByTestId("target-containerDropdown");
+  expect(targetContainerDropdown).toBeVisible();
+  await expect(targetContainerDropdown).toHaveClass(/(^|\s)is-disabled(\s|$)/);
+
+  const targetDatabaseDropdown = panel.getByTestId("target-databaseDropdown");
+  await targetDatabaseDropdown.click();
+  const targetDbDropdownItem = await getDropdownItemByNameOrPosition(frame, { position: 0 }, { ariaLabel: "Database" });
+  await targetDbDropdownItem.click();
+
+  await expect(targetContainerDropdown).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
+  await targetContainerDropdown.click();
+  const targetContainerDropdownItem1 = await getDropdownItemByNameOrPosition(
+    frame,
+    { position: 0 },
+    { ariaLabel: "Container" },
+  );
+  await targetContainerDropdownItem1.click();
+
+  await panel.getByRole("button", { name: "Next" }).click();
+
+  const errorContainer = panel.getByTestId("Panel:ErrorContainer");
+  await expect(errorContainer).toBeVisible();
+  await expect(errorContainer).toHaveText(/Source and destination containers cannot be the same/i);
+
+  // Reselect target container to be different from source container
+  await targetContainerDropdown.click();
+  const targetContainerDropdownItem2 = await getDropdownItemByNameOrPosition(
+    frame,
+    { position: 1 },
+    { ariaLabel: "Container" },
+  );
+  await targetContainerDropdownItem2.click();
+
+  const selectedSourceDatabase = await sourceDatabaseDropdown.innerText();
+  const selectedSourceContainer = await sourceContainerDropdown.innerText();
+  const selectedTargetDatabase = await targetDatabaseDropdown.innerText();
+  const selectedTargetContainer = await targetContainerDropdown.innerText();
+  expectedCopyJobNameInitial = `${truncateName(selectedSourceDatabase)}.${truncateName(
+    selectedSourceContainer,
+  )}_${truncateName(selectedTargetDatabase)}.${truncateName(selectedTargetContainer)}`;
+
+  await panel.getByRole("button", { name: "Next" }).click();
+
+  await expect(errorContainer).not.toBeVisible();
+  await expect(panel.getByTestId("Panel:PreviewCopyJob")).toBeVisible();
+});
+
+test("Verifying the preview of the copy job", async () => {
+  const previewContainer = panel.getByTestId("Panel:PreviewCopyJob");
+  await expect(previewContainer).toBeVisible();
+  await expect(previewContainer.getByTestId("source-subscription-name")).toHaveText(
+    expectedSourceSubscription.subscriptionName,
+  );
+  await expect(previewContainer.getByTestId("source-account-name")).toHaveText(expectedSourceAccount.name);
+  const jobNameInput = previewContainer.getByTestId("job-name-textfield");
+  await expect(jobNameInput).toHaveValue(new RegExp(expectedCopyJobNameInitial));
+  const primaryBtn = panel.getByRole("button", { name: "Copy", exact: true });
+  await expect(primaryBtn).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
+
+  await jobNameInput.fill("test job name");
+  await expect(primaryBtn).toHaveClass(/(^|\s)is-disabled(\s|$)/);
+});
+
+test("Testing API request interception with duplicate job name", async () => {
+  const previewContainer = panel.getByTestId("Panel:PreviewCopyJob");
+  const jobNameInput = previewContainer.getByTestId("job-name-textfield");
+  const duplicateJobName = "test-job-name-1";
+  await jobNameInput.fill(duplicateJobName);
+
+  const copyButton = panel.getByRole("button", { name: "Copy", exact: true });
+  const expectedErrorMessage = `Duplicate job name '${duplicateJobName}'`;
+  await interceptAndInspectApiRequest(
+    page,
+    `${expectedSourceAccount.name}/dataTransferJobs/${duplicateJobName}`,
+    "PUT",
+    new Error(expectedErrorMessage),
+    (url?: string) => url?.includes(duplicateJobName) ?? false,
+  );
+
+  let errorThrown = false;
+  try {
+    await copyButton.click();
+    await page.waitForTimeout(2000);
+  } catch (error: any) {
+    errorThrown = true;
+    expect(error.message).toContain("not allowed");
+  }
+  if (!errorThrown) {
+    const errorContainer = panel.getByTestId("Panel:ErrorContainer");
+    await expect(errorContainer).toBeVisible();
+    await expect(errorContainer).toHaveText(new RegExp(expectedErrorMessage, "i"));
+  }
+
+  await expect(panel).toBeVisible();
+});
+
+test("Testing API request success with valid job name and verifying copy job creation", async () => {
+  const previewContainer = panel.getByTestId("Panel:PreviewCopyJob");
+  const jobNameInput = previewContainer.getByTestId("job-name-textfield");
+  const copyButton = panel.getByRole("button", { name: "Copy", exact: true });
+
+  const validJobName = expectedJobName;
+
+  const copyJobCreationPromise = waitForApiResponse(
+    page,
+    `${expectedSourceAccount.name}/dataTransferJobs/${validJobName}`,
+    "PUT",
+  );
+
+  await jobNameInput.fill(validJobName);
+  await expect(copyButton).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
+
+  await copyButton.click();
+
+  const response = await copyJobCreationPromise;
+  expect(response.ok()).toBe(true);
+
+  await expect(panel).not.toBeVisible({ timeout: 10000 });
+
+  const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
+  await jobsListContainer.waitFor({ state: "visible" });
+
+  const jobItem = jobsListContainer.getByText(validJobName);
+  await jobItem.waitFor({ state: "visible" });
+  await expect(jobItem).toBeVisible();
+});
+
+test.skip("Pause a running copy job", async () => {
+  const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
+  await jobsListContainer.waitFor({ state: "visible" });
+
+  const firstJobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: expectedJobName });
+  await firstJobRow.waitFor({ state: "visible" });
+
+  const actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${expectedJobName}`);
+  await actionMenuButton.waitFor({ state: "visible" });
+  await actionMenuButton.click();
+
+  const pauseAction = frame.locator(".ms-ContextualMenu-list button:has-text('Pause')");
+  await pauseAction.waitFor({ state: "visible" });
+  await pauseAction.click();
+
+  const updatedJobRow = jobsListContainer.locator(".ms-DetailsRow").filter({ hasText: expectedJobName });
+  const statusCell = updatedJobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
+  await expect(statusCell).toContainText(/paused/i, { timeout: 10000 });
+});
+
+test.skip("Resume a paused copy job", async () => {
+  const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
+  await jobsListContainer.waitFor({ state: "visible" });
+
+  const pausedJobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: expectedJobName });
+  await pausedJobRow.waitFor({ state: "visible" });
+
+  const statusCell = pausedJobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
+  await expect(statusCell).toContainText(/paused/i);
+
+  const actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${expectedJobName}`);
+  await actionMenuButton.waitFor({ state: "visible" });
+  await actionMenuButton.click();
+
+  const resumeAction = frame.locator(".ms-ContextualMenu-list button:has-text('Resume')");
+  await resumeAction.waitFor({ state: "visible" });
+  await resumeAction.click();
+
+  await expect(statusCell).toContainText(/running|queued/i);
+});
+
+test("Cancel a copy job", async () => {
+  // Create a new job specifically for cancellation testing
+  const cancelJobName = `cancel_test_job_${Date.now()}`;
+
+  // Navigate to create job panel
+  const createCopyJobButton = wrapper.getByTestId("CommandBar/Button:Create Copy Job");
+  await createCopyJobButton.click();
+  panel = frame.getByTestId("Panel:Create copy job");
+
+  // Skip to container selection (offline mode for faster creation)
+  await panel.getByRole("button", { name: "Next" }).click();
+
+  // Select source containers quickly
+  const sourceDatabaseDropdown = panel.getByTestId("source-databaseDropdown");
+  await sourceDatabaseDropdown.click();
+  const sourceDatabaseDropdownItem = await getDropdownItemByNameOrPosition(
+    frame,
+    { position: 0 },
+    { ariaLabel: "Database" },
+  );
+  await sourceDatabaseDropdownItem.click();
+
+  const sourceContainerDropdown = panel.getByTestId("source-containerDropdown");
+  await sourceContainerDropdown.click();
+  const sourceContainerDropdownItem = await getDropdownItemByNameOrPosition(
+    frame,
+    { position: 0 },
+    { ariaLabel: "Container" },
+  );
+  await sourceContainerDropdownItem.click();
+
+  // Select target containers
+  const targetDatabaseDropdown = panel.getByTestId("target-databaseDropdown");
+  await targetDatabaseDropdown.click();
+  const targetDatabaseDropdownItem = await getDropdownItemByNameOrPosition(
+    frame,
+    { position: 0 },
+    { ariaLabel: "Database" },
+  );
+  await targetDatabaseDropdownItem.click();
+
+  const targetContainerDropdown = panel.getByTestId("target-containerDropdown");
+  await targetContainerDropdown.click();
+  const targetContainerDropdownItem = await getDropdownItemByNameOrPosition(
+    frame,
+    { position: 1 },
+    { ariaLabel: "Container" },
+  );
+  await targetContainerDropdownItem.click();
+
+  await panel.getByRole("button", { name: "Next" }).click();
+
+  // Set job name and create
+  const jobNameInput = panel.getByTestId("job-name-textfield");
+  await jobNameInput.fill(cancelJobName);
+
+  const copyButton = panel.getByRole("button", { name: "Copy", exact: true });
+
+  // Create job and immediately start polling for it
+  await copyButton.click();
+
+  // Wait for panel to close and job list to refresh
+  await expect(panel).not.toBeVisible({ timeout: 10000 });
+
+  const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
+  await jobsListContainer.waitFor({ state: "visible" });
+
+  // Rapid polling to catch the job in running state
+  let attempts = 0;
+  const maxAttempts = 50; // Try for ~5 seconds
+  let jobCancelled = false;
+
+  while (attempts < maxAttempts && !jobCancelled) {
+    try {
+      // Look for the job row
+      const jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: cancelJobName });
+
+      if (await jobRow.isVisible({ timeout: 100 })) {
+        const statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
+        const statusText = await statusCell.textContent({ timeout: 100 });
+
+        // If job is still running/queued, try to cancel it
+        if (statusText && /running|queued|pending/i.test(statusText)) {
+          const actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${cancelJobName}`);
+          await actionMenuButton.click({ timeout: 1000 });
+
+          const cancelAction = frame.locator(".ms-ContextualMenu-list button:has-text('Cancel')");
+          if (await cancelAction.isVisible({ timeout: 1000 })) {
+            await cancelAction.click();
+            await expect(frame.locator(".ms-Dialog-main")).toBeVisible({ timeout: 1000 });
+            await expect(frame.locator(".ms-Dialog-main")).toContainText(cancelJobName);
+
+            // Click cancel button on dialog to close it first
+            const cancelDialogButton = frame.locator(".ms-Dialog-main").getByTestId("DialogButton:Cancel");
+            await expect(cancelDialogButton).toBeVisible();
+            await cancelDialogButton.click();
+
+            // Click confirm button
+            await actionMenuButton.click({ timeout: 1000 });
+            await cancelAction.click();
+            const confirmDialogButton = frame.locator(".ms-Dialog-main").getByTestId("DialogButton:Confirm");
+            await confirmDialogButton.click();
+
+            // Verify cancellation
+            await expect(statusCell).toContainText(/cancelled|canceled|failed/i, { timeout: 5000 });
+            jobCancelled = true;
+            break;
+          }
+        } else if (statusText && /completed|succeeded|finished/i.test(statusText)) {
+          // Job completed too fast, skip the test
+          // console.log(`Job ${cancelJobName} completed too quickly to test cancellation`);
+          test.skip(true, "Job completed too quickly for cancellation test");
+          return;
+        }
+      }
+
+      // Refresh the job list
+      const refreshButton = wrapper.getByTestId("CommandBar/Button:Refresh");
+      if (await refreshButton.isVisible({ timeout: 100 })) {
+        await refreshButton.click();
+        await page.waitForTimeout(100); // Small delay between attempts
+      }
+    } catch (error) {
+      // Continue trying if there's any error
+    }
+
+    attempts++;
+  }
+
+  if (!jobCancelled) {
+    // If we couldn't cancel in time, at least verify the job was created
+    const jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: cancelJobName });
+    await expect(jobRow).toBeVisible({ timeout: 5000 });
+    test.skip(true, "Could not catch job in running state for cancellation test");
+  }
+});
+
+test.afterAll("Container Copy - After All", async () => {
+  await page.unroute(/.*/, (route) => route.continue());
+  await page.close();
+});

test/sql/scaleAndSettings/changePartitionKey.spec.ts

@@ -1,5 +1,5 @@
 import { expect, Page, test } from "@playwright/test";
-import { DataExplorer, TestAccount } from "../../fx";
+import { DataExplorer, getDropdownItemByNameOrPosition, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 
 test.describe("Change Partition Key", () => {
@@ -81,7 +81,11 @@ test.describe("Change Partition Key", () => {
     await changePkPanel.getByLabel("Use existing container").check();
     await changePkPanel.getByText("Choose an existing container").click();
 
-    const containerDropdownItem = await explorer.getDropdownItemByName(newContainerId, "Existing Containers");
+    const containerDropdownItem = await getDropdownItemByNameOrPosition(
+      explorer.frame,
+      { name: newContainerId },
+      { ariaLabel: "Existing Containers" },
+    );
     await containerDropdownItem.click();
 
     await changePkPanel.getByTestId("Panel/OkButton").click();

test/testExplorer/TestExplorer.ts

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