Initial plan

.github/workflows/ci.yml

@@ -201,18 +201,18 @@ jobs:
             GREMLIN_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-gremlin.documents.azure.com/.default" -o tsv --query accessToken)
             echo "::add-mask::$GREMLIN_TESTACCOUNT_TOKEN"
             echo GREMLIN_TESTACCOUNT_TOKEN=$GREMLIN_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            # CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
-            # echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
-            # echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            # MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
-            # echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
-            # echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            # MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
-            # echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
-            # echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            # MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
-            # echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
-            # echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
+            echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
+            echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
+            echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
+            echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
       - name: List test files for shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}
         run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --list
       - name: Run test shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}

src/Explorer/ContainerCopy/ContainerCopyMessages.ts

@@ -184,5 +184,10 @@ export default {
       Skipped: "Cancelled",
       Cancelled: "Cancelled",
     },
+    dialog: {
+      heading: "",
+      confirmButtonText: "Confirm",
+      cancelButtonText: "Cancel",
+    },
   },
 };

src/Explorer/ContainerCopy/ContainerCopyPanel.tsx

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

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

@@ -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,6 +45,20 @@ 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;
@@ -32,21 +69,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,7 +104,7 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
           key: CopyJobActions.complete,
           text: ContainerCopyMessages.MonitorJobs.Actions.complete,
           iconProps: { iconName: "CheckMark" },
-          onClick: () => handleClick(job, CopyJobActions.complete, setUpdatingJobAction),
+          onClick: () => showActionConfirmationDialog(job, CopyJobActions.complete),
           disabled: isThisJobUpdating && updatingAction === CopyJobActions.complete,
         });
       }
@@ -86,8 +123,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/Main.tsx

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

src/Metrics/MetricScenarioProvider.tsx

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

src/RootComponents/App.test.tsx

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

src/RootComponents/App.tsx

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

src/RootComponents/ExplorerContainer.test.tsx

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

src/RootComponents/ExplorerContainer.tsx

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

src/RootComponents/LoadingExplorer.test.tsx

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

src/RootComponents/LoadingExplorer.tsx

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

src/RootComponents/Root.test.tsx

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

src/RootComponents/Root.tsx

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

test/sql/containercopy.spec.ts

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

test/sql/containercopy/offlineMigration.spec.ts

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

test/sql/containercopy/onlineMigration.spec.ts

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

test/sql/containercopy/permissionsScreen.spec.ts

@@ -0,0 +1,270 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { expect, Frame, Locator, Page, test } from "@playwright/test";
+import { set } from "lodash";
+import { ContainerCopy, getAccountName, TestAccount } from "../../fx";
+
+const VISIBLE_TIMEOUT_MS = 30 * 1000;
+
+test.describe("Container Copy - Permission Screen Verification", () => {
+  let page: Page;
+  let wrapper: Locator;
+  let panel: Locator;
+  let frame: Frame;
+  let targetAccountName: string;
+  let expectedSourceAccountName: string;
+
+  test.beforeEach("Setup for each test", async ({ browser }) => {
+    page = await browser.newPage();
+    ({ wrapper, frame } = await ContainerCopy.open(page, TestAccount.SQLContainerCopyOnly));
+    targetAccountName = getAccountName(TestAccount.SQLContainerCopyOnly);
+  });
+
+  test.afterEach("Cleanup after each test", async () => {
+    await page.unroute(/.*/, (route) => route.continue());
+    await page.close();
+  });
+
+  test("Verify online container copy permissions panel functionality", async () => {
+    expect(wrapper).not.toBeNull();
+
+    // Verify all command bar buttons are visible
+    await wrapper.locator(".commandBarContainer").waitFor({ state: "visible", timeout: VISIBLE_TIMEOUT_MS });
+
+    const createCopyJobButton = wrapper.getByTestId("CommandBar/Button:Create Copy Job");
+    await expect(createCopyJobButton).toBeVisible();
+    await expect(wrapper.getByTestId("CommandBar/Button:Refresh")).toBeVisible();
+    await expect(wrapper.getByTestId("CommandBar/Button:Feedback")).toBeVisible();
+
+    // Open the Create Copy Job panel
+    await createCopyJobButton.click();
+    panel = frame.getByTestId("Panel:Create copy job");
+    await expect(panel).toBeVisible();
+    await expect(panel.getByRole("heading", { name: "Create copy job" })).toBeVisible();
+
+    // Select a different account for cross-account testing
+    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");
+    }
+
+    // Enable online migration mode
+    const migrationTypeContainer = panel.getByTestId("migration-type");
+    const onlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Online mode/i });
+    await onlineCopyRadioButton.click({ force: true });
+    await expect(migrationTypeContainer.getByTestId("migration-type-description-online")).toBeVisible();
+
+    await panel.getByRole("button", { name: "Next" }).click();
+
+    // Verify Assign Permissions panel for online copy
+    const permissionScreen = panel.getByTestId("Panel:AssignPermissionsContainer");
+    await expect(permissionScreen).toBeVisible();
+    await expect(permissionScreen.getByText("Online container copy", { exact: true })).toBeVisible();
+    await expect(permissionScreen.getByText("Cross-account container copy", { exact: true })).toBeVisible();
+
+    // Setup API mocking for the source account
+    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();
+      }
+    });
+
+    // Verify Point-in-Time Restore functionality
+    const expandedOnlineAccordionHeader = permissionScreen
+      .getByTestId("permission-group-container-onlineConfigs")
+      .locator("button[aria-expanded='true']");
+    await expect(expandedOnlineAccordionHeader).toBeVisible();
+
+    const accordionItem = expandedOnlineAccordionHeader
+      .locator("xpath=ancestor::*[contains(@class, 'fui-AccordionItem') or contains(@data-test, 'accordion-item')]")
+      .first();
+
+    const accordionPanel = accordionItem
+      .locator("[role='tabpanel'], .fui-AccordionPanel, [data-test*='panel']")
+      .first();
+
+    // Install clock mock and test PITR functionality
+    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();
+
+    // Verify new page opens with correct URL pattern
+    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
+    await page.clock.fastForward(11 * 60 * 1000);
+
+    await expect(refreshBtn).toBeVisible({ timeout: 5000 });
+    await expect(pitrBtn).not.toBeVisible();
+
+    // Setup additional API mocks for role assignments and permissions
+    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") {
+        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();
+      }
+    });
+
+    // Verify cross-account permissions functionality
+    const expandedCrossAccordionHeader = permissionScreen
+      .getByTestId("permission-group-container-crossAccountConfigs")
+      .locator("button[aria-expanded='true']");
+    await expect(expandedCrossAccordionHeader).toBeVisible();
+
+    const crossAccordionItem = expandedCrossAccordionHeader
+      .locator("xpath=ancestor::*[contains(@class, 'fui-AccordionItem') or contains(@data-test, 'accordion-item')]")
+      .first();
+
+    const crossAccordionPanel = crossAccordionItem
+      .locator("[role='tabpanel'], .fui-AccordionPanel, [data-test*='panel']")
+      .first();
+
+    const toggleButton = crossAccordionPanel.getByTestId("btn-toggle");
+    await expect(toggleButton).toBeVisible();
+    await toggleButton.click();
+
+    // Verify popover functionality
+    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();
+
+    // Verify loading states
+    await expect(loadingOverlay).toBeVisible();
+    await expect(loadingOverlay).toBeHidden({ timeout: 10 * 1000 });
+    await expect(popover).toBeHidden({ timeout: 10 * 1000 });
+
+    // Cancel the panel to clean up
+    await panel.getByRole("button", { name: "Cancel" }).click();
+  });
+});