fix regex

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

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

src/Explorer/ContainerCopy/Actions/CopyJobActions.tsx

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

src/Explorer/ContainerCopy/ContainerCopyMessages.ts

@@ -25,22 +25,7 @@ export default {
   subscriptionDropdownPlaceholder: "Select a subscription",
   sourceAccountDropdownLabel: "Account",
   sourceAccountDropdownPlaceholder: "Select an account",
-  migrationTypeOptions: {
-    offline: {
-      title: "Offline mode",
-      description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-      learnMoreText: "Learn more",
-      learnMoreHref: "https://learn.microsoft.com/en-us/azure/cosmos-db/container-copy?tabs=offline-copy",
-    },
-    online: {
-      title: "Online mode",
-      description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-      learnMoreText: "Learn more",
-      learnMoreHref: "https://learn.microsoft.com/en-us/azure/cosmos-db/container-copy?tabs=offline-copy",
-    },
-  },
+  migrationTypeCheckboxLabel: "Copy container in offline mode",
 
   // Select Source and Target Containers Screen
   selectSourceAndTargetContainersDescription:
@@ -188,10 +173,5 @@ export default {
       Skipped: "Cancelled",
       Cancelled: "Cancelled",
     },
-    dialog: {
-      heading: "Confirm Action",
-      confirmButtonText: "OK",
-      cancelButtonText: "Cancel",
-    },
   },
 };

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/display-name */
+import { Checkbox, Stack } from "@fluentui/react";
+import React from "react";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+
+interface MigrationTypeCheckboxProps {
+  checked: boolean;
+  onChange: (_ev?: React.FormEvent, checked?: boolean) => void;
+}
+
+export const MigrationTypeCheckbox: React.FC<MigrationTypeCheckboxProps> = React.memo(({ checked, onChange }) => (
+  <Stack horizontal horizontalAlign="space-between" className="migrationTypeRow">
+    <Checkbox label={ContainerCopyMessages.migrationTypeCheckboxLabel} checked={checked} onChange={onChange} />
+  </Stack>
+));

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

@@ -1,98 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MigrationType Component Rendering should render migration type component with radio buttons 1`] = `
-<div>
-  <div
-    class="ms-Stack migrationTypeContainer css-109"
-    data-testid="migration-type"
-  >
-    <div
-      class="ms-StackItem css-110"
-    >
-      <div
-        class="ms-ChoiceFieldGroup root-111"
-      >
-        <div
-          aria-labelledby="migrationTypeChoiceGroup"
-          role="radiogroup"
-        >
-          <div
-            class="ms-ChoiceFieldGroup-flexContainer flexContainer-112"
-          >
-            <div
-              class="ms-ChoiceField root-113"
-            >
-              <div
-                class="ms-ChoiceField-wrapper"
-              >
-                <input
-                  class="ms-ChoiceField-input input-114"
-                  id="ChoiceGroup0-offline"
-                  name="ChoiceGroup0"
-                  type="radio"
-                />
-                <label
-                  class="ms-ChoiceField-field field-115"
-                  for="ChoiceGroup0-offline"
-                >
-                  <span
-                    class="ms-ChoiceFieldLabel"
-                    id="ChoiceGroupLabel1-offline"
-                  >
-                    Offline mode
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              class="ms-ChoiceField root-113"
-            >
-              <div
-                class="ms-ChoiceField-wrapper"
-              >
-                <input
-                  checked=""
-                  class="ms-ChoiceField-input input-114"
-                  id="ChoiceGroup0-online"
-                  name="ChoiceGroup0"
-                  type="radio"
-                />
-                <label
-                  class="ms-ChoiceField-field is-checked field-120"
-                  for="ChoiceGroup0-online"
-                >
-                  <span
-                    class="ms-ChoiceFieldLabel"
-                    id="ChoiceGroupLabel1-online"
-                  >
-                    Online mode
-                  </span>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ms-StackItem css-123"
-    >
-      <span
-        class="migrationTypeDescription css-124"
-        data-testid="migration-type-description-online"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-         
-        <a
-          class="ms-Link root-125"
-          href="https://learn.microsoft.com/en-us/azure/cosmos-db/container-copy?tabs=offline-copy"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Learn more
-        </a>
-      </span>
-    </div>
-  </div>
-</div>
-`;

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

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

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

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

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

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

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

@@ -21,9 +21,14 @@ exports[`SelectAccount Component Rendering should render correctly with snapshot
     Account Dropdown
   </div>
   <div
-    data-testid="migration-type"
+    data-testid="migration-type-checkbox"
   >
-    Migration Type
+    <input
+      aria-label="Migration Type Checkbox"
+      data-testid="migration-checkbox-input"
+      type="checkbox"
+    />
+    Copy container in offline mode
   </div>
 </div>
 `;

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

@@ -5,20 +5,6 @@ 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: {
@@ -32,11 +18,6 @@ jest.mock("../../ContainerCopyMessages", () => ({
         cancel: "Cancel",
         complete: "Complete",
       },
-      dialog: {
-        heading: "Confirm Action",
-        confirmButtonText: "OK",
-        cancelButtonText: "Cancel",
-      },
     },
   },
 }));
@@ -69,9 +50,6 @@ describe("CopyJobActionMenu", () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
-    mockShowOkCancelModalDialog.mockClear();
-    mockCloseDialog.mockClear();
-    mockOpenDialog.mockClear();
   });
 
   describe("Component Rendering", () => {
@@ -288,29 +266,7 @@ describe("CopyJobActionMenu", () => {
       expect(mockHandleClick).toHaveBeenCalledWith(job, CopyJobActions.pause, expect.any(Function));
     });
 
-    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,
-        "OK",
-        expect.any(Function),
-        "Cancel",
-        null,
-        expect.any(Object), // dialogBody content
-      );
-    });
-
-    it("should call handleClick when dialog is confirmed for cancel action", () => {
+    it("should call handleClick when cancel action is clicked", () => {
       const job = createMockJob({ Status: CopyJobStatusType.InProgress });
 
       render(<CopyJobActionMenu job={job} handleClick={mockHandleClick} />);
@@ -321,9 +277,6 @@ 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));
     });
 
@@ -341,33 +294,7 @@ describe("CopyJobActionMenu", () => {
       expect(mockHandleClick).toHaveBeenCalledWith(job, CopyJobActions.resume, expect.any(Function));
     });
 
-    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,
-        "OK",
-        expect.any(Function),
-        "Cancel",
-        null,
-        expect.any(Object), // dialogBody content
-      );
-    });
-
-    it("should call handleClick when dialog is confirmed for complete action", () => {
+    it("should call handleClick when complete action is clicked", () => {
       const job = createMockJob({
         Status: CopyJobStatusType.InProgress,
         Mode: CopyJobMigrationType.Online,
@@ -381,87 +308,10 @@ 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,
-        "OK",
-        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,
-        "OK",
-        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;
@@ -489,13 +339,8 @@ describe("CopyJobActionMenu", () => {
       const pauseButton = screen.getByText("Pause");
       fireEvent.click(pauseButton);
       fireEvent.click(actionButton);
-
-      const pauseButtonAfterClick = screen.getByText("Pause").closest("button");
+      const pauseButtonAfterClick = screen.getByText("Pause");
       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", () => {
@@ -515,6 +360,22 @@ 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,
@@ -601,7 +462,6 @@ 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();
@@ -748,129 +608,4 @@ 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
-        "OK", // okLabel
-        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,6 +1,5 @@
-import { DirectionalHint, IconButton, IContextualMenuProps, Stack } from "@fluentui/react";
+import { IconButton, IContextualMenuProps } 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";
@@ -10,35 +9,6 @@ interface CopyJobActionMenuProps {
   handleClick: HandleJobActionClickType;
 }
 
-const dialogBody = {
-  [CopyJobActions.cancel]: (jobName: string) => (
-    <Stack tokens={{ childrenGap: 10 }}>
-      <Stack.Item>
-        You are about to cancel <b>{jobName}</b>:
-      </Stack.Item>
-      <Stack.Item>
-        Cancelling this job will stop it immediately. Any running or pending steps will not be completed.
-      </Stack.Item>
-      <Stack.Item>
-        <b>This action cannot be undone. Do you want to continue?</b>
-      </Stack.Item>
-    </Stack>
-  ),
-  [CopyJobActions.complete]: (jobName: string) => (
-    <Stack tokens={{ childrenGap: 10 }}>
-      <Stack.Item>
-        You are about to complete <b>{jobName}</b>:
-      </Stack.Item>
-      <Stack.Item>
-        Completing this job will stop the continuous data synchronization between the source and destination containers.
-      </Stack.Item>
-      <Stack.Item>
-        <b>This action cannot be undone. Do you want to continue?</b>
-      </Stack.Item>
-    </Stack>
-  ),
-};
-
 const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick }) => {
   const [updatingJobAction, setUpdatingJobAction] = React.useState<{ jobName: string; action: string } | null>(null);
   if (
@@ -52,22 +22,9 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
     return null;
   }
 
-  const showActionConfirmationDialog = (job: CopyJobType, action: CopyJobActions): void => {
-    useDialog
-      .getState()
-      .showOkCancelModalDialog(
-        ContainerCopyMessages.MonitorJobs.dialog.heading,
-        null,
-        ContainerCopyMessages.MonitorJobs.dialog.confirmButtonText,
-        () => handleClick(job, action, setUpdatingJobAction),
-        ContainerCopyMessages.MonitorJobs.dialog.cancelButtonText,
-        null,
-        action in dialogBody ? dialogBody[action as keyof typeof dialogBody](job.Name) : null,
-      );
-  };
-
   const getMenuItems = (): IContextualMenuProps["items"] => {
     const isThisJobUpdating = updatingJobAction?.jobName === job.Name;
+    const updatingAction = updatingJobAction?.action;
 
     const baseItems = [
       {
@@ -75,21 +32,21 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
         text: ContainerCopyMessages.MonitorJobs.Actions.pause,
         iconProps: { iconName: "Pause" },
         onClick: () => handleClick(job, CopyJobActions.pause, setUpdatingJobAction),
-        disabled: isThisJobUpdating,
+        disabled: isThisJobUpdating && updatingAction === CopyJobActions.pause,
       },
       {
         key: CopyJobActions.cancel,
         text: ContainerCopyMessages.MonitorJobs.Actions.cancel,
         iconProps: { iconName: "Cancel" },
-        onClick: () => showActionConfirmationDialog(job, CopyJobActions.cancel),
-        disabled: isThisJobUpdating,
+        onClick: () => handleClick(job, CopyJobActions.cancel, setUpdatingJobAction),
+        disabled: isThisJobUpdating && updatingAction === CopyJobActions.cancel,
       },
       {
         key: CopyJobActions.resume,
         text: ContainerCopyMessages.MonitorJobs.Actions.resume,
         iconProps: { iconName: "Play" },
         onClick: () => handleClick(job, CopyJobActions.resume, setUpdatingJobAction),
-        disabled: isThisJobUpdating,
+        disabled: isThisJobUpdating && updatingAction === CopyJobActions.resume,
       },
     ];
 
@@ -110,8 +67,8 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
           key: CopyJobActions.complete,
           text: ContainerCopyMessages.MonitorJobs.Actions.complete,
           iconProps: { iconName: "CheckMark" },
-          onClick: () => showActionConfirmationDialog(job, CopyJobActions.complete),
-          disabled: isThisJobUpdating,
+          onClick: () => handleClick(job, CopyJobActions.complete, setUpdatingJobAction),
+          disabled: isThisJobUpdating && updatingAction === CopyJobActions.complete,
         });
       }
       return filteredItems;
@@ -128,8 +85,8 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
     <IconButton
       role="button"
       iconProps={{ iconName: "More", styles: { root: { fontSize: "20px", fontWeight: "bold" } } }}
-      menuProps={{ items: getMenuItems(), directionalHint: DirectionalHint.leftTopEdge, directionalHintFixed: false }}
-      menuIconProps={{ iconName: "", className: "hidden" }}
+      menuProps={{ items: getMenuItems() }}
+      menuIconProps={{ iconName: "" }}
       ariaLabel={ContainerCopyMessages.MonitorJobs.Columns.actions}
       title={ContainerCopyMessages.MonitorJobs.Columns.actions}
     />

src/Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobs.tsx

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

src/Explorer/ContainerCopy/containerCopyStyles.less

@@ -121,9 +121,6 @@
         &:hover {
           background-color: @BaseMediumLow;
         }
-        .ms-DetailsHeader-cellTitle {
-          padding-left: 20px;
-        }
       }
     }
 

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

@@ -155,7 +155,12 @@ export class ComputedPropertiesComponent extends React.Component<
           </Link>
           &#160; about how to define computed properties and how to use them.
         </Text>
-        <div className="settingsV2Editor" tabIndex={0} ref={this.computedPropertiesDiv}></div>
+        <div
+          className="settingsV2Editor"
+          tabIndex={0}
+          ref={this.computedPropertiesDiv}
+          data-test="computed-properties-editor"
+        ></div>
       </Stack>
     );
   }

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

@@ -302,8 +302,8 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   );
 
   private geoSpatialConfigTypeChoiceGroupOptions: IChoiceGroupOption[] = [
-    { key: GeospatialConfigType.Geography, text: "Geography" },
-    { key: GeospatialConfigType.Geometry, text: "Geometry" },
+    { key: GeospatialConfigType.Geography, text: "Geography", ariaLabel: "geography-option" },
+    { key: GeospatialConfigType.Geometry, text: "Geometry", ariaLabel: "geometry-option" },
   ];
 
   private getGeoSpatialComponent = (): JSX.Element => (

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

@@ -31,6 +31,7 @@ exports[`ComputedPropertiesComponent renders 1`] = `
   </Text>
   <div
     className="settingsV2Editor"
+    data-test="computed-properties-editor"
     tabIndex={0}
   />
 </Stack>

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

@@ -167,10 +167,12 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
     options={
       [
         {
+          "ariaLabel": "geography-option",
           "key": "Geography",
           "text": "Geography",
         },
         {
+          "ariaLabel": "geometry-option",
           "key": "Geometry",
           "text": "Geometry",
         },
@@ -652,10 +654,12 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
     options={
       [
         {
+          "ariaLabel": "geography-option",
           "key": "Geography",
           "text": "Geography",
         },
         {
+          "ariaLabel": "geometry-option",
           "key": "Geometry",
           "text": "Geometry",
         },
@@ -1224,10 +1228,12 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
     options={
       [
         {
+          "ariaLabel": "geography-option",
           "key": "Geography",
           "text": "Geography",
         },
         {
+          "ariaLabel": "geometry-option",
           "key": "Geometry",
           "text": "Geometry",
         },
@@ -1760,10 +1766,12 @@ exports[`SubSettingsComponent renders 1`] = `
     options={
       [
         {
+          "ariaLabel": "geography-option",
           "key": "Geography",
           "text": "Geography",
         },
         {
+          "ariaLabel": "geometry-option",
           "key": "Geometry",
           "text": "Geometry",
         },
@@ -2330,10 +2338,12 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
     options={
       [
         {
+          "ariaLabel": "geography-option",
           "key": "Geography",
           "text": "Geography",
         },
         {
+          "ariaLabel": "geometry-option",
           "key": "Geometry",
           "text": "Geometry",
         },

src/Explorer/Panes/PanelContainerComponent.test.tsx

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

src/Explorer/Panes/PanelContainerComponent.tsx

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

src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx

@@ -205,7 +205,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ onUpl
           tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON documents. The combined size of all files in an individual upload operation must be less than 2 MB. You can perform multiple upload operations for larger data sets."
         />
         {uploadFileData?.length > 0 && (
-          <div className="fileUploadSummaryContainer">
+          <div className="fileUploadSummaryContainer" data-test="file-upload-status">
             <b style={{ color: "var(--colorNeutralForeground1)" }}>File upload status</b>
             <DetailsList
               items={uploadFileData}

src/hooks/useSidePanel.ts

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

test/fx.ts

@@ -326,6 +326,7 @@ type PanelOpenOptions = {
 export enum CommandBarButton {
   Save = "Save",
   ExecuteQuery = "Execute Query",
+  UploadItem = "Upload Item",
 }
 
 /** Helper class that provides locator methods for DataExplorer components, on top of a Frame */

test/sql/document.spec.ts

@@ -1,7 +1,17 @@
 import { expect, test } from "@playwright/test";
 
-import { DataExplorer, DocumentsTab, TestAccount } from "../fx";
-import { retry, setPartitionKeys } from "../testData";
+import { existsSync, unlinkSync, writeFileSync } from "fs";
+import path from "path";
+import { CommandBarButton, DataExplorer, DocumentsTab, ONE_MINUTE_MS, TestAccount } from "../fx";
+import {
+  createTestSQLContainer,
+  itemsPerPartition,
+  partitionCount,
+  retry,
+  setPartitionKeys,
+  TestContainerContext,
+  TestData,
+} from "../testData";
 import { documentTestCases } from "./testCases";
 
 let explorer: DataExplorer = null!;
@@ -95,3 +105,108 @@ for (const { name, databaseId, containerId, documents } of documentTestCases) {
     }
   });
 }
+
+test.describe.serial("Upload Item", () => {
+  let context: TestContainerContext = null!;
+  const uploadDocumentFilePath: string = path.join(__dirname, "uploadDocument.json");
+
+  test.beforeEach("Create Test Database and Open documents tab", async ({ page }) => {
+    context = await createTestSQLContainer();
+    explorer = await DataExplorer.open(page, TestAccount.SQL);
+
+    const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
+    await containerNode.expand();
+
+    const containerMenuNode = await explorer.waitForContainerItemsNode(context.database.id, context.container.id);
+    await containerMenuNode.element.click();
+  });
+
+  test.afterEach("Delete Test Database and uploadDocument.json", async () => {
+    if (existsSync(uploadDocumentFilePath)) {
+      unlinkSync(uploadDocumentFilePath);
+    }
+    await context?.dispose();
+  });
+
+  test("upload document", async () => {
+    // Create file to upload
+    const TestDataJsonString: string = JSON.stringify(TestData, null, 2);
+    writeFileSync(uploadDocumentFilePath, TestDataJsonString);
+
+    const uploadItemCommandBar = explorer.commandBarButton(CommandBarButton.UploadItem);
+    await uploadItemCommandBar.click();
+
+    // Select file to upload
+    await explorer.frame.setInputFiles("#importFileInput", uploadDocumentFilePath);
+
+    const uploadButton = explorer.frame.getByTestId("Panel/OkButton");
+    await uploadButton.click();
+
+    // Verify upload success message
+    const fileUploadStatusExpected: string = `${partitionCount * itemsPerPartition} created, 0 throttled, 0 errors`;
+    const fileUploadStatus = explorer.frame.getByTestId("file-upload-status");
+    await expect(fileUploadStatus).toContainText(fileUploadStatusExpected, {
+      timeout: ONE_MINUTE_MS,
+    });
+  });
+
+  test("upload same document twice", async () => {
+    // Create file to upload
+    const TestDataJsonString: string = JSON.stringify(TestData, null, 2);
+    writeFileSync(uploadDocumentFilePath, TestDataJsonString);
+
+    const uploadItemCommandBar = explorer.commandBarButton(CommandBarButton.UploadItem);
+    await uploadItemCommandBar.click();
+
+    // Select file to upload
+    await explorer.frame.setInputFiles("#importFileInput", uploadDocumentFilePath);
+
+    const uploadButton = explorer.frame.getByTestId("Panel/OkButton");
+    await uploadButton.click();
+
+    // Verify upload success message
+    const fileUploadStatusExpected: string = `${partitionCount * itemsPerPartition} created, 0 throttled, 0 errors`;
+    const fileUploadStatus = explorer.frame.getByTestId("file-upload-status");
+    await expect(fileUploadStatus).toContainText(fileUploadStatusExpected, {
+      timeout: ONE_MINUTE_MS,
+    });
+
+    // Select file to upload again
+    await explorer.frame.setInputFiles("#importFileInput", uploadDocumentFilePath);
+    await uploadButton.click();
+
+    // Verify upload failure message
+    const errorIcon = explorer.frame.getByRole("img", { name: "error" });
+    await expect(errorIcon).toBeVisible({ timeout: ONE_MINUTE_MS });
+    await expect(fileUploadStatus).toContainText(
+      `0 created, 0 throttled, ${partitionCount * itemsPerPartition} errors`,
+      {
+        timeout: ONE_MINUTE_MS,
+      },
+    );
+  });
+
+  test("upload invalid json", async () => {
+    // Create file to upload
+    let TestDataJsonString: string = JSON.stringify(TestData, null, 2);
+    // Remove the first '[' so that it becomes invalid json
+    TestDataJsonString = TestDataJsonString.substring(1);
+    writeFileSync(uploadDocumentFilePath, TestDataJsonString);
+
+    const uploadItemCommandBar = explorer.commandBarButton(CommandBarButton.UploadItem);
+    await uploadItemCommandBar.click();
+
+    // Select file to upload
+    await explorer.frame.setInputFiles("#importFileInput", uploadDocumentFilePath);
+
+    const uploadButton = explorer.frame.getByTestId("Panel/OkButton");
+    await uploadButton.click();
+
+    // Verify upload failure message
+    const fileUploadStatusExpected: string = "Unexpected non-whitespace character after JSON";
+    const fileUploadErrorList = explorer.frame.getByLabel("error list");
+    await expect(fileUploadErrorList).toContainText(fileUploadStatusExpected, {
+      timeout: ONE_MINUTE_MS,
+    });
+  });
+});

test/sql/scaleAndSettings/computedProperties.spec.ts

@@ -0,0 +1,103 @@
+import { expect, test } from "@playwright/test";
+import * as DataModels from "../../../src/Contracts/DataModels";
+import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
+import { createTestSQLContainer, TestContainerContext } from "../../testData";
+
+test.describe("Computed Properties", () => {
+  let context: TestContainerContext = null!;
+  let explorer: DataExplorer = null!;
+
+  test.beforeAll("Create Test Database", async () => {
+    context = await createTestSQLContainer(true);
+  });
+
+  test.beforeEach("Open Settings tab under Scale & Settings", async ({ page }) => {
+    explorer = await DataExplorer.open(page, TestAccount.SQL);
+    const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
+    await containerNode.expand();
+
+    // Click Scale & Settings and open Settings tab
+    await explorer.openScaleAndSettings(context);
+    const computedPropertiesTab = explorer.frame.getByTestId("settings-tab-header/ComputedPropertiesTab");
+    await computedPropertiesTab.click();
+  });
+
+  test.afterAll("Delete Test Database", async () => {
+    await context?.dispose();
+  });
+
+  test("Add valid computed property", async ({ page }) => {
+    await clearComputedPropertiesTextBoxContent({ page });
+
+    // Create computed property
+    const computedProperties: DataModels.ComputedProperties = [
+      {
+        name: "cp_lowerName",
+        query: "SELECT VALUE LOWER(c.name) FROM c",
+      },
+    ];
+    const computedPropertiesString: string = JSON.stringify(computedProperties);
+    await page.keyboard.type(computedPropertiesString);
+
+    // Save changes
+    const saveButton = explorer.commandBarButton(CommandBarButton.Save);
+    await expect(saveButton).toBeEnabled();
+    await saveButton.click();
+    await expect(explorer.getConsoleMessage()).toContainText(`Successfully updated container ${context.container.id}`, {
+      timeout: ONE_MINUTE_MS,
+    });
+  });
+
+  test("Add computed property with invalid query", async ({ page }) => {
+    await clearComputedPropertiesTextBoxContent({ page });
+
+    // Create computed property with no VALUE keyword in query
+    const computedProperties: DataModels.ComputedProperties = [
+      {
+        name: "cp_lowerName",
+        query: "SELECT LOWER(c.name) FROM c",
+      },
+    ];
+    const computedPropertiesString: string = JSON.stringify(computedProperties);
+    await page.keyboard.type(computedPropertiesString);
+
+    // Save changes
+    const saveButton = explorer.commandBarButton(CommandBarButton.Save);
+    await expect(saveButton).toBeEnabled();
+    await saveButton.click();
+    await expect(explorer.getConsoleMessage()).toContainText(`Failed to update container ${context.container.id}`, {
+      timeout: ONE_MINUTE_MS,
+    });
+  });
+
+  test("Add computed property with invalid json", async ({ page }) => {
+    await clearComputedPropertiesTextBoxContent({ page });
+
+    // Create computed property with no VALUE keyword in query
+    const computedProperties: DataModels.ComputedProperties = [
+      {
+        name: "cp_lowerName",
+        query: "SELECT LOWER(c.name) FROM c",
+      },
+    ];
+    const computedPropertiesString: string = JSON.stringify(computedProperties);
+    await page.keyboard.type(computedPropertiesString + "]");
+
+    // Save button should remain disabled due to invalid json
+    const saveButton = explorer.commandBarButton(CommandBarButton.Save);
+    await expect(saveButton).toBeDisabled();
+  });
+
+  const clearComputedPropertiesTextBoxContent = async ({ page }): Promise<void> => {
+    // Get computed properties text box
+    const computedPropertiesTextBox = explorer.frame.getByRole("textbox", { name: "Computed properties" });
+    await computedPropertiesTextBox.waitFor();
+    const computedPropertiesEditor = explorer.frame.getByTestId("computed-properties-editor");
+    await computedPropertiesEditor.click();
+
+    // Clear existing content
+    const isMac: boolean = process.platform === "darwin";
+    await page.keyboard.press(isMac ? "Meta+A" : "Control+A");
+    await page.keyboard.press("Backspace");
+  };
+});

test/sql/scaleAndSettings/settings.spec.ts

@@ -15,7 +15,7 @@ test.describe("Settings under Scale & Settings", () => {
     const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
     await containerNode.expand();
 
-    // Click Scale & Settings and open Scale tab
+    // Click Scale & Settings and open Settings tab
     await explorer.openScaleAndSettings(context);
     const settingsTab = explorer.frame.getByTestId("settings-tab-header/SubSettingsTab");
     await settingsTab.click();
@@ -25,46 +25,86 @@ test.describe("Settings under Scale & Settings", () => {
     await context?.dispose();
   });
 
-  test("Update TTL to On (no default)", async () => {
-    const ttlOnNoDefaultRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-no-default-option" });
-    await ttlOnNoDefaultRadioButton.click();
+  test.describe("Set TTL", () => {
+    test("Update TTL to On (no default)", async () => {
+      const ttlOnNoDefaultRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-no-default-option" });
+      await ttlOnNoDefaultRadioButton.click();
 
-    await explorer.commandBarButton(CommandBarButton.Save).click();
-    await expect(explorer.getConsoleMessage()).toContainText(`Successfully updated container ${context.container.id}`, {
-      timeout: ONE_MINUTE_MS,
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+      await expect(explorer.getConsoleMessage()).toContainText(
+        `Successfully updated container ${context.container.id}`,
+        {
+          timeout: ONE_MINUTE_MS,
+        },
+      );
+    });
+
+    test("Update TTL to On (with user entry)", async () => {
+      const ttlOnRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-option" });
+      await ttlOnRadioButton.click();
+
+      // Enter TTL seconds
+      const ttlInput = explorer.frame.getByTestId("ttl-input");
+      await ttlInput.fill("30000");
+
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+      await expect(explorer.getConsoleMessage()).toContainText(
+        `Successfully updated container ${context.container.id}`,
+        {
+          timeout: ONE_MINUTE_MS,
+        },
+      );
+    });
+
+    test("Update TTL to Off", async () => {
+      // By default TTL is set to off so we need to first set it to On
+      const ttlOnNoDefaultRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-no-default-option" });
+      await ttlOnNoDefaultRadioButton.click();
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+      await expect(explorer.getConsoleMessage()).toContainText(
+        `Successfully updated container ${context.container.id}`,
+        {
+          timeout: ONE_MINUTE_MS,
+        },
+      );
+
+      // Set it to Off
+      const ttlOffRadioButton = explorer.frame.getByRole("radio", { name: "ttl-off-option" });
+      await ttlOffRadioButton.click();
+
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+      await expect(explorer.getConsoleMessage()).toContainText(
+        `Successfully updated container ${context.container.id}`,
+        {
+          timeout: ONE_MINUTE_MS,
+        },
+      );
     });
   });
 
-  test("Update TTL to On (with user entry)", async () => {
-    const ttlOnRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-option" });
-    await ttlOnRadioButton.click();
+  test.describe("Set Geospatial Config", () => {
+    test("Set Geospatial Config to Geometry then Geography", async () => {
+      const geometryRadioButton = explorer.frame.getByRole("radio", { name: "geometry-option" });
+      await geometryRadioButton.click();
 
-    // Enter TTL seconds
-    const ttlInput = explorer.frame.getByTestId("ttl-input");
-    await ttlInput.fill("30000");
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+      await expect(explorer.getConsoleMessage()).toContainText(
+        `Successfully updated container ${context.container.id}`,
+        {
+          timeout: ONE_MINUTE_MS,
+        },
+      );
 
-    await explorer.commandBarButton(CommandBarButton.Save).click();
-    await expect(explorer.getConsoleMessage()).toContainText(`Successfully updated container ${context.container.id}`, {
-      timeout: ONE_MINUTE_MS,
-    });
-  });
+      const geographyRadioButton = explorer.frame.getByRole("radio", { name: "geography-option" });
+      await geographyRadioButton.click();
 
-  test("Update TTL to Off", async () => {
-    // By default TTL is set to off so we need to first set it to On
-    const ttlOnNoDefaultRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-no-default-option" });
-    await ttlOnNoDefaultRadioButton.click();
-    await explorer.commandBarButton(CommandBarButton.Save).click();
-    await expect(explorer.getConsoleMessage()).toContainText(`Successfully updated container ${context.container.id}`, {
-      timeout: ONE_MINUTE_MS,
-    });
-
-    // Set it to Off
-    const ttlOffRadioButton = explorer.frame.getByRole("radio", { name: "ttl-off-option" });
-    await ttlOffRadioButton.click();
-
-    await explorer.commandBarButton(CommandBarButton.Save).click();
-    await expect(explorer.getConsoleMessage()).toContainText(`Successfully updated container ${context.container.id}`, {
-      timeout: ONE_MINUTE_MS,
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+      await expect(explorer.getConsoleMessage()).toContainText(
+        `Successfully updated container ${context.container.id}`,
+        {
+          timeout: ONE_MINUTE_MS,
+        },
+      );
     });
   });
 });

test/testData.ts

@@ -37,27 +37,35 @@ export interface PartitionKey {
   value: string | null;
 }
 
-const partitionCount = 4;
+export const partitionCount = 4;
 
 // If we increase this number, we need to split bulk creates into multiple batches.
 // Bulk operations are limited to 100 items per partition.
-const itemsPerPartition = 100;
+export const itemsPerPartition = 100;
 
 function createTestItems(): TestItem[] {
   const items: TestItem[] = [];
   for (let i = 0; i < partitionCount; i++) {
     for (let j = 0; j < itemsPerPartition; j++) {
-      const id = crypto.randomBytes(32).toString("base64");
+      const id = createSafeRandomString(32);
       items.push({
         id,
         partitionKey: `partition_${i}`,
-        randomData: crypto.randomBytes(32).toString("base64"),
+        randomData: createSafeRandomString(32),
       });
     }
   }
   return items;
 }
 
+// Document IDs cannot contain '/', '\', or '#'
+function createSafeRandomString(byteLength: number): string {
+  return crypto
+    .randomBytes(byteLength)
+    .toString("base64")
+    .replace(/[/\\#]/g, "_");
+}
+
 export const TestData: TestItem[] = createTestItems();
 
 export class TestContainerContext {