Container Copy Job implementation for SQL accounts (#2241)

* Initial dev for container copy * remove padding from label * Added Copy Job prerequisites screen * Added hooks to evaluate reader role access * added copyjob pre-requsite screen along with it's validations * Added monitor copy job list screen * added copy job list refresh and reset functionality * remove arm token dependency * fetch account details from account id instead of context * Fix lint & typescript checks * show copyjob screen from portal navigation * adding copy job details screen * remove duplicate code & show sql accounts only * ui fixes for list job page * pending icon * copy job details screen ui * reset .vscode/settings.json * Fixed existing UTs * disabling action buttons until it's in progress * fixed formatting * Adding loader on submit button and show job creation errors in the panel itself * updating disabling action menu item logic * added custom pager * fix lint and ts errors * updating file names and removing comments * remove comments * modularize the arom common code * Adding content and removing tooltip * updating job details screen * updating online copy enabled screen * Adding below changes - Don't show permission screen for same account in offline mode - Don't show identity permissions for same account in online mode - Show error message if selected containers are identical - Update abort signal messages * added feedback code from explorer * Add tooltips and long polling - Added tooltips to permission sections - Implemented long polling for PITR and online copy enabled sections - Long polling automatically stops after 15 minutes - After polling ends, a refresh button will be displayed --------- Co-authored-by: nishthaAhujaa <nishtha17354@iiittd.ac.in>
2025-12-31 06:41:35 +00:00 · 2025-11-05 22:54:00 +05:30
parent 3718f5a16a
commit 2417da152d
78 changed files with 4152 additions and 36 deletions
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AddManagedIdentity.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AddManagedIdentity.tsx
@@ -0,0 +1,56 @@
+import { Link, Stack, Text, Toggle } from "@fluentui/react";
+import React from "react";
+import { updateSystemIdentity } from "../../../../../Utils/arm/identityUtils";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import InfoTooltip from "../Components/InfoTooltip";
+import PopoverMessage from "../Components/PopoverContainer";
+import useManagedIdentity from "./hooks/useManagedIdentity";
+import { PermissionSectionConfig } from "./hooks/usePermissionsSection";
+import useToggle from "./hooks/useToggle";
+
+const managedIdentityTooltip = (
+  <Text>
+    {ContainerCopyMessages.addManagedIdentity.tooltip.content} &nbsp;
+    <Link href={ContainerCopyMessages.addManagedIdentity.tooltip.href} target="_blank" rel="noopener noreferrer">
+      {ContainerCopyMessages.addManagedIdentity.tooltip.hrefText}
+    </Link>
+  </Text>
+);
+type AddManagedIdentityProps = Partial<PermissionSectionConfig>;
+
+const AddManagedIdentity: React.FC<AddManagedIdentityProps> = () => {
+  const { copyJobState } = useCopyJobContext();
+  const [systemAssigned, onToggle] = useToggle(false);
+  const { loading, handleAddSystemIdentity } = useManagedIdentity(updateSystemIdentity);
+
+  return (
+    <Stack className="addManagedIdentityContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
+      <Text>
+        {ContainerCopyMessages.addManagedIdentity.description}&ensp;
+        <Link href={ContainerCopyMessages.addManagedIdentity.descriptionHref} target="_blank" rel="noopener noreferrer">
+          {ContainerCopyMessages.addManagedIdentity.descriptionHrefText}
+        </Link>{" "}
+        &nbsp;
+        <InfoTooltip content={managedIdentityTooltip} />
+      </Text>
+      <Toggle
+        checked={systemAssigned}
+        onText={ContainerCopyMessages.toggleBtn.onText}
+        offText={ContainerCopyMessages.toggleBtn.offText}
+        onChange={onToggle}
+      />
+      <PopoverMessage
+        isLoading={loading}
+        visible={systemAssigned}
+        title={ContainerCopyMessages.addManagedIdentity.enablementTitle}
+        onCancel={() => onToggle(null, false)}
+        onPrimary={handleAddSystemIdentity}
+      >
+        {ContainerCopyMessages.addManagedIdentity.enablementDescription(copyJobState.target?.account?.name)}
+      </PopoverMessage>
+    </Stack>
+  );
+};
+
+export default AddManagedIdentity;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AddReadPermissionToDefaultIdentity.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AddReadPermissionToDefaultIdentity.tsx
@@ -0,0 +1,87 @@
+import { Link, Stack, Text, Toggle } from "@fluentui/react";
+import React, { useCallback } from "react";
+import { assignRole } from "../../../../../Utils/arm/RbacUtils";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { getAccountDetailsFromResourceId } from "../../../CopyJobUtils";
+import InfoTooltip from "../Components/InfoTooltip";
+import PopoverMessage from "../Components/PopoverContainer";
+import { PermissionSectionConfig } from "./hooks/usePermissionsSection";
+import useToggle from "./hooks/useToggle";
+
+const TooltipContent = (
+  <Text>
+    {ContainerCopyMessages.readPermissionAssigned.tooltip.content} &nbsp;
+    <Link href={ContainerCopyMessages.readPermissionAssigned.tooltip.href} target="_blank" rel="noopener noreferrer">
+      {ContainerCopyMessages.readPermissionAssigned.tooltip.hrefText}
+    </Link>
+  </Text>
+);
+type AddReadPermissionToDefaultIdentityProps = Partial<PermissionSectionConfig>;
+
+const AddReadPermissionToDefaultIdentity: React.FC<AddReadPermissionToDefaultIdentityProps> = () => {
+  const [loading, setLoading] = React.useState(false);
+  const { copyJobState, setCopyJobState } = useCopyJobContext();
+  const [readPermissionAssigned, onToggle] = useToggle(false);
+
+  const handleAddReadPermission = useCallback(async () => {
+    const { source, target } = copyJobState;
+    const selectedSourceAccount = source?.account;
+    try {
+      const {
+        subscriptionId: sourceSubscriptionId,
+        resourceGroup: sourceResourceGroup,
+        accountName: sourceAccountName,
+      } = getAccountDetailsFromResourceId(selectedSourceAccount?.id);
+
+      setLoading(true);
+      const assignedRole = await assignRole(
+        sourceSubscriptionId,
+        sourceResourceGroup,
+        sourceAccountName,
+        target?.account?.identity?.principalId ?? "",
+      );
+      if (assignedRole) {
+        setCopyJobState((prevState) => ({
+          ...prevState,
+          sourceReadAccessFromTarget: true,
+        }));
+      }
+    } catch (error) {
+      console.error("Error assigning read permission to default identity:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [copyJobState, setCopyJobState]);
+
+  return (
+    <Stack className="defaultManagedIdentityContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
+      <Text className="toggle-label">
+        {ContainerCopyMessages.readPermissionAssigned.description}&ensp;
+        <InfoTooltip content={TooltipContent} />
+      </Text>
+      <Toggle
+        checked={readPermissionAssigned}
+        onText={ContainerCopyMessages.toggleBtn.onText}
+        offText={ContainerCopyMessages.toggleBtn.offText}
+        onChange={onToggle}
+        inlineLabel
+        styles={{
+          root: { marginTop: 8, marginBottom: 12 },
+          label: { display: "none" },
+        }}
+      />
+      <PopoverMessage
+        isLoading={loading}
+        visible={readPermissionAssigned}
+        title={ContainerCopyMessages.readPermissionAssigned.popoverTitle}
+        onCancel={() => onToggle(null, false)}
+        onPrimary={handleAddReadPermission}
+      >
+        {ContainerCopyMessages.readPermissionAssigned.popoverDescription}
+      </PopoverMessage>
+    </Stack>
+  );
+};
+
+export default AddReadPermissionToDefaultIdentity;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AssignPermissions.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AssignPermissions.tsx
@@ -0,0 +1,66 @@
+import { Image, Stack, Text } from "@fluentui/react";
+import { Accordion, AccordionHeader, AccordionItem, AccordionPanel } from "@fluentui/react-components";
+import React, { useEffect } from "react";
+import CheckmarkIcon from "../../../../../../images/successfulPopup.svg";
+import WarningIcon from "../../../../../../images/warning.svg";
+import ShimmerTree, { IndentLevel } from "../../../../../Common/ShimmerTree/ShimmerTree";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { CopyJobMigrationType } from "../../../Enums/CopyJobEnums";
+import usePermissionSections, { PermissionSectionConfig } from "./hooks/usePermissionsSection";
+
+const PermissionSection: React.FC<PermissionSectionConfig> = ({ id, title, Component, completed, disabled }) => (
+  <AccordionItem key={id} value={id} disabled={disabled}>
+    <AccordionHeader className="accordionHeader">
+      <Text className="accordionHeaderText" variant="medium">
+        {title}
+      </Text>
+      <Image
+        className="statusIcon"
+        src={completed ? CheckmarkIcon : WarningIcon}
+        alt={completed ? "Checkmark icon" : "Warning icon"}
+        width={completed ? 20 : 24}
+        height={completed ? 20 : 24}
+      />
+    </AccordionHeader>
+    <AccordionPanel aria-disabled={disabled} className="accordionPanel">
+      <Component />
+    </AccordionPanel>
+  </AccordionItem>
+);
+
+const AssignPermissions = () => {
+  const { copyJobState } = useCopyJobContext();
+  const permissionSections = usePermissionSections(copyJobState);
+  const [openItems, setOpenItems] = React.useState<string[]>([]);
+
+  const indentLevels = React.useMemo<IndentLevel[]>(
+    () => Array(copyJobState.migrationType === CopyJobMigrationType.Online ? 5 : 3).fill({ level: 0, width: "100%" }),
+    [],
+  );
+
+  useEffect(() => {
+    const firstIncompleteSection = permissionSections.find((section) => !section.completed);
+    const nextOpenItems = firstIncompleteSection ? [firstIncompleteSection.id] : [];
+    if (JSON.stringify(openItems) !== JSON.stringify(nextOpenItems)) {
+      setOpenItems(nextOpenItems);
+    }
+  }, [permissionSections]);
+
+  return (
+    <Stack className="assignPermissionsContainer" tokens={{ childrenGap: 15 }}>
+      <span>{ContainerCopyMessages.assignPermissions.description}</span>
+      {permissionSections?.length === 0 ? (
+        <ShimmerTree indentLevels={indentLevels} style={{ width: "100%" }} />
+      ) : (
+        <Accordion className="permissionsAccordion" collapsible openItems={openItems}>
+          {permissionSections.map((section) => (
+            <PermissionSection key={section.id} {...section} />
+          ))}
+        </Accordion>
+      )}
+    </Stack>
+  );
+};
+
+export default AssignPermissions;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/DefaultManagedIdentity.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/DefaultManagedIdentity.tsx
@@ -0,0 +1,57 @@
+import { Link, Stack, Text, Toggle } from "@fluentui/react";
+import React from "react";
+import { updateDefaultIdentity } from "../../../../../Utils/arm/identityUtils";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import InfoTooltip from "../Components/InfoTooltip";
+import PopoverMessage from "../Components/PopoverContainer";
+import useManagedIdentity from "./hooks/useManagedIdentity";
+import { PermissionSectionConfig } from "./hooks/usePermissionsSection";
+import useToggle from "./hooks/useToggle";
+
+const managedIdentityTooltip = (
+  <Text>
+    {ContainerCopyMessages.defaultManagedIdentity.tooltip.content} &nbsp;
+    <Link href={ContainerCopyMessages.defaultManagedIdentity.tooltip.href} target="_blank" rel="noopener noreferrer">
+      {ContainerCopyMessages.defaultManagedIdentity.tooltip.hrefText}
+    </Link>
+  </Text>
+);
+type AddManagedIdentityProps = Partial<PermissionSectionConfig>;
+
+const DefaultManagedIdentity: React.FC<AddManagedIdentityProps> = () => {
+  const { copyJobState } = useCopyJobContext();
+  const [defaultSystemAssigned, onToggle] = useToggle(false);
+  const { loading, handleAddSystemIdentity } = useManagedIdentity(updateDefaultIdentity);
+
+  return (
+    <Stack className="defaultManagedIdentityContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
+      <div className="toggle-label">
+        {ContainerCopyMessages.defaultManagedIdentity.description(copyJobState?.target?.account.name)} &nbsp;
+        <InfoTooltip content={managedIdentityTooltip} />
+      </div>
+      <Toggle
+        checked={defaultSystemAssigned}
+        onText={ContainerCopyMessages.toggleBtn.onText}
+        offText={ContainerCopyMessages.toggleBtn.offText}
+        onChange={onToggle}
+        inlineLabel
+        styles={{
+          root: { marginTop: 8, marginBottom: 12 },
+          label: { display: "none" },
+        }}
+      />
+      <PopoverMessage
+        isLoading={loading}
+        visible={defaultSystemAssigned}
+        title={ContainerCopyMessages.defaultManagedIdentity.popoverTitle}
+        onCancel={() => onToggle(null, false)}
+        onPrimary={handleAddSystemIdentity}
+      >
+        {ContainerCopyMessages.defaultManagedIdentity.popoverDescription(copyJobState?.target?.account.name)}
+      </PopoverMessage>
+    </Stack>
+  );
+};
+
+export default DefaultManagedIdentity;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/OnlineCopyEnabled.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/OnlineCopyEnabled.tsx
@@ -0,0 +1,131 @@
+import { Link, PrimaryButton, Stack } from "@fluentui/react";
+import { DatabaseAccount } from "Contracts/DataModels";
+import React from "react";
+import { fetchDatabaseAccount } from "Utils/arm/databaseAccountUtils";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { getAccountDetailsFromResourceId } from "../../../CopyJobUtils";
+import { AccountValidatorFn } from "../../../Types/CopyJobTypes";
+
+const validatorFn: AccountValidatorFn = (prev: DatabaseAccount, next: DatabaseAccount) => {
+  const prevCapabilities = prev?.properties?.capabilities ?? [];
+  const nextCapabilities = next?.properties?.capabilities ?? [];
+
+  return JSON.stringify(prevCapabilities) !== JSON.stringify(nextCapabilities);
+};
+
+const OnlineCopyEnabled: React.FC = () => {
+  const [loading, setLoading] = React.useState(false);
+  const [showRefreshButton, setShowRefreshButton] = React.useState(false);
+  const intervalRef = React.useRef<NodeJS.Timeout | null>(null);
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+  const { copyJobState: { source } = {}, setCopyJobState } = useCopyJobContext();
+  const selectedSourceAccount = source?.account;
+  const {
+    subscriptionId: sourceSubscriptionId,
+    resourceGroup: sourceResourceGroup,
+    accountName: sourceAccountName,
+  } = getAccountDetailsFromResourceId(selectedSourceAccount?.id);
+
+  const handleFetchAccount = async () => {
+    try {
+      const account = await fetchDatabaseAccount(sourceSubscriptionId, sourceResourceGroup, sourceAccountName);
+      if (account && validatorFn(selectedSourceAccount, account)) {
+        setCopyJobState((prevState) => ({
+          ...prevState,
+          source: { ...prevState.source, account: account },
+        }));
+        setLoading(false);
+      }
+    } catch (error) {
+      console.error("Error fetching source account after enabling online copy:", error);
+      setLoading(false);
+    }
+  };
+
+  const clearIntervalAndShowRefresh = () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    setShowRefreshButton(true);
+  };
+
+  const handleRefresh = () => {
+    setLoading(true);
+    handleFetchAccount();
+  };
+
+  React.useEffect(() => {
+    intervalRef.current = setInterval(() => {
+      handleFetchAccount();
+    }, 30 * 1000);
+
+    timeoutRef.current = setTimeout(
+      () => {
+        clearIntervalAndShowRefresh();
+      },
+      15 * 60 * 1000,
+    );
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <Stack className="onlineCopyContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
+      <Stack.Item className="info-message">
+        {ContainerCopyMessages.onlineCopyEnabled.description(source?.account?.name || "")}&ensp;
+        <Link href={ContainerCopyMessages.onlineCopyEnabled.href} target="_blank" rel="noopener noreferrer">
+          {ContainerCopyMessages.onlineCopyEnabled.hrefText}
+        </Link>
+      </Stack.Item>
+      <Stack.Item>
+        <pre style={{ backgroundColor: "#f5f5f5", padding: "10px", borderRadius: "4px", overflow: "auto" }}>
+          <code>
+            {`# Set shell variables
+$resourceGroupName = <azure_resource_group>
+$accountName = <azure_cosmos_db_account_name>
+$EnableOnlineContainerCopy = "EnableOnlineContainerCopy"
+
+# List down existing capabilities of your account
+$cosmosdb = az cosmosdb show --resource-group $resourceGroupName --name $accountName
+
+$capabilities = (($cosmosdb | ConvertFrom-Json).capabilities)
+
+# Append EnableOnlineContainerCopy capability in the list of capabilities
+$capabilitiesToAdd = @()
+foreach ($item in $capabilities) {
+  $capabilitiesToAdd += $item.name
+}
+$capabilitiesToAdd += $EnableOnlineContainerCopy
+
+# Update Cosmos DB account
+az cosmosdb update --capabilities $capabilitiesToAdd -n $accountName -g $resourceGroupName`}
+          </code>
+        </pre>
+      </Stack.Item>
+      {showRefreshButton && (
+        <Stack.Item>
+          <PrimaryButton
+            className="fullWidth"
+            text={ContainerCopyMessages.refreshButtonLabel}
+            iconProps={{ iconName: "Refresh" }}
+            onClick={handleRefresh}
+            disabled={loading}
+          />
+        </Stack.Item>
+      )}
+    </Stack>
+  );
+};
+
+export default OnlineCopyEnabled;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/PointInTimeRestore.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/PointInTimeRestore.tsx
@@ -0,0 +1,135 @@
+import { Link, PrimaryButton, Stack, Text } from "@fluentui/react";
+import { DatabaseAccount } from "Contracts/DataModels";
+import React, { useEffect, useRef, useState } from "react";
+import { fetchDatabaseAccount } from "Utils/arm/databaseAccountUtils";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { buildResourceLink, getAccountDetailsFromResourceId } from "../../../CopyJobUtils";
+import { AccountValidatorFn } from "../../../Types/CopyJobTypes";
+import InfoTooltip from "../Components/InfoTooltip";
+
+const tooltipContent = (
+  <Text>
+    {ContainerCopyMessages.pointInTimeRestore.tooltip.content} &nbsp;
+    <Link href={ContainerCopyMessages.pointInTimeRestore.tooltip.href} target="_blank" rel="noopener noreferrer">
+      {ContainerCopyMessages.pointInTimeRestore.tooltip.hrefText}
+    </Link>
+  </Text>
+);
+
+const validatorFn: AccountValidatorFn = (prev: DatabaseAccount, next: DatabaseAccount) => {
+  const prevBackupPolicy = prev?.properties?.backupPolicy?.type ?? "";
+  const nextBackupPolicy = next?.properties?.backupPolicy?.type ?? "";
+
+  return prevBackupPolicy !== nextBackupPolicy;
+};
+
+const PointInTimeRestore: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+  const [showRefreshButton, setShowRefreshButton] = useState(false);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const { copyJobState: { source } = {}, setCopyJobState } = useCopyJobContext();
+  const sourceAccountLink = buildResourceLink(source?.account);
+  const featureUrl = `${sourceAccountLink}/backupRestore`;
+  const selectedSourceAccount = source?.account;
+  const {
+    subscriptionId: sourceSubscriptionId,
+    resourceGroup: sourceResourceGroup,
+    accountName: sourceAccountName,
+  } = getAccountDetailsFromResourceId(selectedSourceAccount?.id);
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, []);
+
+  const handleFetchAccount = async () => {
+    try {
+      const account = await fetchDatabaseAccount(sourceSubscriptionId, sourceResourceGroup, sourceAccountName);
+      if (account && validatorFn(selectedSourceAccount, account)) {
+        setCopyJobState((prevState) => ({
+          ...prevState,
+          source: { ...prevState.source, account: account },
+        }));
+        setLoading(false);
+      }
+    } catch (error) {
+      console.error("Error fetching source account after Point-in-Time Restore:", error);
+      setLoading(false);
+    }
+  };
+
+  const clearIntervalAndShowRefresh = () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    setLoading(false);
+    setShowRefreshButton(true);
+  };
+
+  const handleRefresh = () => {
+    setLoading(true);
+    handleFetchAccount();
+  };
+
+  const openWindowAndMonitor = () => {
+    setLoading(true);
+    setShowRefreshButton(false);
+    window.open(featureUrl, "_blank");
+
+    intervalRef.current = setInterval(() => {
+      handleFetchAccount();
+    }, 30 * 1000);
+
+    timeoutRef.current = setTimeout(
+      () => {
+        clearIntervalAndShowRefresh();
+      },
+      15 * 60 * 1000,
+    );
+  };
+
+  return (
+    <Stack className="pointInTimeRestoreContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
+      <Stack.Item className="toggle-label">
+        {ContainerCopyMessages.pointInTimeRestore.description(source.account?.name ?? "")}
+        {tooltipContent && (
+          <>
+            {" "}
+            <InfoTooltip content={tooltipContent} />
+          </>
+        )}
+      </Stack.Item>
+      <Stack.Item>
+        {showRefreshButton ? (
+          <PrimaryButton
+            className="fullWidth"
+            text={ContainerCopyMessages.refreshButtonLabel}
+            iconProps={{ iconName: "Refresh" }}
+            onClick={handleRefresh}
+          />
+        ) : (
+          <PrimaryButton
+            className="fullWidth"
+            text={loading ? "" : ContainerCopyMessages.pointInTimeRestore.buttonText}
+            {...(loading ? { iconProps: { iconName: "SyncStatusSolid" } } : {})}
+            disabled={loading}
+            onClick={openWindowAndMonitor}
+          />
+        )}
+      </Stack.Item>
+    </Stack>
+  );
+};
+
+export default PointInTimeRestore;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/hooks/useManagedIdentity.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/hooks/useManagedIdentity.tsx
@@ -0,0 +1,52 @@
+import { DatabaseAccount } from "Contracts/DataModels";
+import { useCallback, useState } from "react";
+import { useCopyJobContext } from "../../../../Context/CopyJobContext";
+import { getAccountDetailsFromResourceId } from "../../../../CopyJobUtils";
+
+interface UseManagedIdentityUpdaterParams {
+  updateIdentityFn: (
+    subscriptionId: string,
+    resourceGroup?: string,
+    accountName?: string,
+  ) => Promise<DatabaseAccount | undefined>;
+}
+
+interface UseManagedIdentityUpdaterReturn {
+  loading: boolean;
+  handleAddSystemIdentity: () => Promise<void>;
+}
+
+const useManagedIdentity = (
+  updateIdentityFn: UseManagedIdentityUpdaterParams["updateIdentityFn"],
+): UseManagedIdentityUpdaterReturn => {
+  const { copyJobState, setCopyJobState } = useCopyJobContext();
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const handleAddSystemIdentity = useCallback(async (): Promise<void> => {
+    try {
+      setLoading(true);
+      const selectedTargetAccount = copyJobState?.target?.account;
+      const {
+        subscriptionId: targetSubscriptionId,
+        resourceGroup: targetResourceGroup,
+        accountName: targetAccountName,
+      } = getAccountDetailsFromResourceId(selectedTargetAccount?.id);
+
+      const updatedAccount = await updateIdentityFn(targetSubscriptionId, targetResourceGroup, targetAccountName);
+      if (updatedAccount) {
+        setCopyJobState((prevState) => ({
+          ...prevState,
+          target: { ...prevState.target, account: updatedAccount },
+        }));
+      }
+    } catch (error) {
+      console.error("Error enabling system-assigned managed identity:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [copyJobState, updateIdentityFn, setCopyJobState]);
+
+  return { loading, handleAddSystemIdentity };
+};
+
+export default useManagedIdentity;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/hooks/usePermissionsSection.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/hooks/usePermissionsSection.tsx
@@ -0,0 +1,206 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { CapabilityNames } from "../../../../../../Common/Constants";
+import { fetchRoleAssignments, fetchRoleDefinitions, RoleDefinitionType } from "../../../../../../Utils/arm/RbacUtils";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+import { getAccountDetailsFromResourceId } from "../../../../CopyJobUtils";
+import {
+  BackupPolicyType,
+  CopyJobMigrationType,
+  DefaultIdentityType,
+  IdentityType,
+} from "../../../../Enums/CopyJobEnums";
+import { CopyJobContextState } from "../../../../Types/CopyJobTypes";
+import { useCopyJobPrerequisitesCache } from "../../../Utils/useCopyJobPrerequisitesCache";
+import AddManagedIdentity from "../AddManagedIdentity";
+import AddReadPermissionToDefaultIdentity from "../AddReadPermissionToDefaultIdentity";
+import DefaultManagedIdentity from "../DefaultManagedIdentity";
+import OnlineCopyEnabled from "../OnlineCopyEnabled";
+import PointInTimeRestore from "../PointInTimeRestore";
+
+export interface PermissionSectionConfig {
+  id: string;
+  title: string;
+  Component: React.ComponentType;
+  disabled: boolean;
+  completed?: boolean;
+  validate?: (state: CopyJobContextState) => boolean | Promise<boolean>;
+}
+
+export const SECTION_IDS = {
+  addManagedIdentity: "addManagedIdentity",
+  defaultManagedIdentity: "defaultManagedIdentity",
+  readPermissionAssigned: "readPermissionAssigned",
+  pointInTimeRestore: "pointInTimeRestore",
+  onlineCopyEnabled: "onlineCopyEnabled",
+} as const;
+
+const PERMISSION_SECTIONS_CONFIG: PermissionSectionConfig[] = [
+  {
+    id: SECTION_IDS.addManagedIdentity,
+    title: ContainerCopyMessages.addManagedIdentity.title,
+    Component: AddManagedIdentity,
+    disabled: true,
+    validate: (state: CopyJobContextState) => {
+      const targetAccountIdentityType = (state?.target?.account?.identity?.type ?? "").toLowerCase();
+      return (
+        targetAccountIdentityType === IdentityType.SystemAssigned ||
+        targetAccountIdentityType === IdentityType.UserAssigned
+      );
+    },
+  },
+  {
+    id: SECTION_IDS.defaultManagedIdentity,
+    title: ContainerCopyMessages.defaultManagedIdentity.title,
+    Component: DefaultManagedIdentity,
+    disabled: true,
+    validate: (state: CopyJobContextState) => {
+      const targetAccountDefaultIdentity = (state?.target?.account?.properties?.defaultIdentity ?? "").toLowerCase();
+      return targetAccountDefaultIdentity === DefaultIdentityType.SystemAssignedIdentity;
+    },
+  },
+  {
+    id: SECTION_IDS.readPermissionAssigned,
+    title: ContainerCopyMessages.readPermissionAssigned.title,
+    Component: AddReadPermissionToDefaultIdentity,
+    disabled: true,
+    validate: async (state: CopyJobContextState) => {
+      const principalId = state?.target?.account?.identity?.principalId;
+      const selectedSourceAccount = state?.source?.account;
+      const {
+        subscriptionId: sourceSubscriptionId,
+        resourceGroup: sourceResourceGroup,
+        accountName: sourceAccountName,
+      } = getAccountDetailsFromResourceId(selectedSourceAccount?.id);
+
+      const rolesAssigned = await fetchRoleAssignments(
+        sourceSubscriptionId,
+        sourceResourceGroup,
+        sourceAccountName,
+        principalId,
+      );
+
+      const roleDefinitions = await fetchRoleDefinitions(rolesAssigned ?? []);
+      return checkTargetHasReaderRoleOnSource(roleDefinitions ?? []);
+    },
+  },
+];
+
+const PERMISSION_SECTIONS_FOR_ONLINE_JOBS: PermissionSectionConfig[] = [
+  {
+    id: SECTION_IDS.pointInTimeRestore,
+    title: ContainerCopyMessages.pointInTimeRestore.title,
+    Component: PointInTimeRestore,
+    disabled: true,
+    validate: (state: CopyJobContextState) => {
+      const sourceAccountBackupPolicy = state?.source?.account?.properties?.backupPolicy?.type ?? "";
+      return sourceAccountBackupPolicy === BackupPolicyType.Continuous;
+    },
+  },
+  {
+    id: SECTION_IDS.onlineCopyEnabled,
+    title: ContainerCopyMessages.onlineCopyEnabled.title,
+    Component: OnlineCopyEnabled,
+    disabled: true,
+    validate: (state: CopyJobContextState) => {
+      const accountCapabilities = state?.source?.account?.properties?.capabilities ?? [];
+      const onlineCopyCapability = accountCapabilities.find(
+        (capability) => capability.name === CapabilityNames.EnableOnlineCopyFeature,
+      );
+      return !!onlineCopyCapability;
+    },
+  },
+];
+
+/**
+ * Checks if the user has the Reader role based on role definitions.
+ */
+export function checkTargetHasReaderRoleOnSource(roleDefinitions: RoleDefinitionType[]): boolean {
+  return roleDefinitions?.some(
+    (role) =>
+      role.name === "00000000-0000-0000-0000-000000000001" ||
+      role.permissions.some(
+        (permission) =>
+          permission.dataActions.includes("Microsoft.DocumentDB/databaseAccounts/readMetadata") &&
+          permission.dataActions.includes("Microsoft.DocumentDB/databaseAccounts/sqlDatabases/containers/items/read"),
+      ),
+  );
+}
+
+/**
+ * Returns the permission sections configuration for the Assign Permissions screen.
+ * Memoizes derived values for performance and decouples logic for testability.
+ */
+const usePermissionSections = (state: CopyJobContextState): PermissionSectionConfig[] => {
+  const sourceAccountId = state?.source?.account?.id || "";
+  const targetAccountId = state?.target?.account?.id || "";
+
+  const { validationCache, setValidationCache } = useCopyJobPrerequisitesCache();
+  const [permissionSections, setPermissionSections] = useState<PermissionSectionConfig[] | null>(null);
+  const isValidatingRef = useRef(false);
+
+  const sectionToValidate = useMemo(() => {
+    const baseSections = sourceAccountId === targetAccountId ? [] : [...PERMISSION_SECTIONS_CONFIG];
+    if (state.migrationType === CopyJobMigrationType.Online) {
+      return [...baseSections, ...PERMISSION_SECTIONS_FOR_ONLINE_JOBS];
+    }
+    return baseSections;
+  }, [sourceAccountId, targetAccountId, state.migrationType]);
+
+  const memoizedValidationCache = useMemo(() => {
+    if (state.migrationType === CopyJobMigrationType.Offline) {
+      validationCache.delete(SECTION_IDS.pointInTimeRestore);
+      validationCache.delete(SECTION_IDS.onlineCopyEnabled);
+    }
+    return validationCache;
+  }, [state.migrationType]);
+
+  useEffect(() => {
+    const validateSections = async () => {
+      if (isValidatingRef.current) {
+        return;
+      }
+
+      isValidatingRef.current = true;
+      const result: PermissionSectionConfig[] = [];
+      const newValidationCache = new Map(memoizedValidationCache);
+
+      for (let i = 0; i < sectionToValidate.length; i++) {
+        const section = sectionToValidate[i];
+
+        if (newValidationCache.has(section.id) && newValidationCache.get(section.id) === true) {
+          result.push({ ...section, completed: true });
+          continue;
+        }
+        if (section.validate) {
+          const isValid = await section.validate(state);
+          newValidationCache.set(section.id, isValid);
+          result.push({ ...section, completed: isValid });
+
+          if (!isValid) {
+            for (let j = i + 1; j < sectionToValidate.length; j++) {
+              result.push({ ...sectionToValidate[j], completed: false });
+            }
+            break;
+          }
+        } else {
+          newValidationCache.set(section.id, false);
+          result.push({ ...section, completed: false });
+        }
+      }
+
+      setValidationCache(newValidationCache);
+      setPermissionSections(result);
+      isValidatingRef.current = false;
+    };
+
+    validateSections();
+
+    return () => {
+      isValidatingRef.current = false;
+    };
+  }, [state, sectionToValidate]);
+
+  return permissionSections ?? [];
+};
+
+export default usePermissionSections;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/hooks/useToggle.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/hooks/useToggle.tsx
@@ -0,0 +1,11 @@
+import { useCallback, useState } from "react";
+
+const useToggle = (initialState = false) => {
+  const [state, setState] = useState<boolean>(initialState);
+  const onToggle = useCallback((_, checked?: boolean) => {
+    setState(checked);
+  }, []);
+  return [state, onToggle] as const;
+};
+
+export default useToggle;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/FieldRow.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/FieldRow.tsx
@@ -0,0 +1,25 @@
+import { Stack } from "@fluentui/react";
+import React from "react";
+
+interface FieldRowProps {
+  label?: string;
+  children: React.ReactNode;
+  labelClassName?: string;
+}
+
+const FieldRow: React.FC<FieldRowProps> = ({ label = "", children, labelClassName = "" }) => {
+  return (
+    <Stack horizontal horizontalAlign="space-between" className="flex-row">
+      {label && (
+        <Stack.Item align="center" className="flex-fixed-width">
+          <label className={`field-label ${labelClassName}`}>{label}: </label>
+        </Stack.Item>
+      )}
+      <Stack.Item align="center" className="flex-grow-col">
+        {children}
+      </Stack.Item>
+    </Stack>
+  );
+};
+
+export default FieldRow;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/InfoTooltip.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/InfoTooltip.tsx
@@ -0,0 +1,17 @@
+import { Image, ITooltipHostStyles, TooltipHost } from "@fluentui/react";
+import React from "react";
+import InfoIcon from "../../../../../../images/Info.svg";
+
+const InfoTooltip: React.FC<{ content?: string | JSX.Element }> = ({ content }) => {
+  if (!content) {
+    return null;
+  }
+  const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block" } };
+  return (
+    <TooltipHost content={content} calloutProps={{ gapSpace: 0 }} styles={hostStyles}>
+      <Image src={InfoIcon} alt="Information" width={14} height={14} />
+    </TooltipHost>
+  );
+};
+
+export default React.memo(InfoTooltip);
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/NavigationControls.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/NavigationControls.tsx
@@ -0,0 +1,28 @@
+import { DefaultButton, PrimaryButton, Stack } from "@fluentui/react";
+import React from "react";
+
+type NavigationControlsProps = {
+  primaryBtnText: string;
+  onPrimary: () => void;
+  onPrevious: () => void;
+  onCancel: () => void;
+  isPrimaryDisabled: boolean;
+  isPreviousDisabled: boolean;
+};
+
+const NavigationControls: React.FC<NavigationControlsProps> = ({
+  primaryBtnText,
+  onPrimary,
+  onPrevious,
+  onCancel,
+  isPrimaryDisabled,
+  isPreviousDisabled,
+}) => (
+  <Stack horizontal tokens={{ childrenGap: 20 }}>
+    <PrimaryButton text={primaryBtnText} onClick={onPrimary} allowDisabledFocus disabled={isPrimaryDisabled} />
+    <DefaultButton text="Previous" onClick={onPrevious} allowDisabledFocus disabled={isPreviousDisabled} />
+    <DefaultButton text="Cancel" onClick={onCancel} />
+  </Stack>
+);
+
+export default React.memo(NavigationControls);
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/PopoverContainer.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/PopoverContainer.tsx
@@ -0,0 +1,67 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/display-name */
+import { DefaultButton, PrimaryButton, Stack, Text } from "@fluentui/react";
+import React from "react";
+
+interface PopoverContainerProps {
+  isLoading?: boolean;
+  title?: string;
+  children?: React.ReactNode;
+  onPrimary: () => void;
+  onCancel: () => void;
+}
+
+const PopoverContainer: React.FC<PopoverContainerProps> = React.memo(
+  ({ isLoading = false, title, children, onPrimary, onCancel }) => {
+    return (
+      <Stack
+        className={`popover-container foreground ${isLoading ? "loading" : ""}`}
+        tokens={{ childrenGap: 20 }}
+        style={{ maxWidth: 450 }}
+      >
+        <Text variant="mediumPlus" style={{ fontWeight: 600 }}>
+          {title}
+        </Text>
+        <Text>{children}</Text>
+        <Stack horizontal tokens={{ childrenGap: 20 }}>
+          <PrimaryButton
+            text={isLoading ? "" : "Yes"}
+            {...(isLoading ? { iconProps: { iconName: "SyncStatusSolid" } } : {})}
+            onClick={onPrimary}
+            disabled={isLoading}
+          />
+          <DefaultButton text="No" onClick={onCancel} disabled={isLoading} />
+        </Stack>
+      </Stack>
+    );
+  },
+);
+
+interface PopoverMessageProps {
+  isLoading?: boolean;
+  visible: boolean;
+  title: string;
+  onCancel: () => void;
+  onPrimary: () => void;
+  children: React.ReactNode;
+}
+
+const PopoverMessage: React.FC<PopoverMessageProps> = ({
+  isLoading = false,
+  visible,
+  title,
+  onCancel,
+  onPrimary,
+  children,
+}) => {
+  if (!visible) {
+    return null;
+  }
+  return (
+    <PopoverContainer title={title} onCancel={onCancel} onPrimary={onPrimary} isLoading={isLoading}>
+      {children}
+    </PopoverContainer>
+  );
+};
+
+export default PopoverMessage;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateCopyJobScreens.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateCopyJobScreens.tsx
@@ -0,0 +1,51 @@
+import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import React from "react";
+import { useCopyJobNavigation } from "../Utils/useCopyJobNavigation";
+import NavigationControls from "./Components/NavigationControls";
+
+const CreateCopyJobScreens: React.FC = () => {
+  const {
+    currentScreen,
+    isPrimaryDisabled,
+    isPreviousDisabled,
+    handlePrimary,
+    handlePrevious,
+    handleCancel,
+    primaryBtnText,
+    error,
+    setError,
+  } = useCopyJobNavigation();
+
+  return (
+    <Stack verticalAlign="space-between" className="createCopyJobScreensContainer">
+      <Stack.Item className="createCopyJobScreensContent">
+        {error && (
+          <MessageBar
+            className="createCopyJobErrorMessageBar"
+            messageBarType={MessageBarType.blocked}
+            isMultiline={false}
+            onDismiss={() => setError(null)}
+            dismissButtonAriaLabel="Close"
+            truncated={true}
+            overflowButtonAriaLabel="See more"
+          >
+            {error}
+          </MessageBar>
+        )}
+        {currentScreen?.component}
+      </Stack.Item>
+      <Stack.Item className="createCopyJobScreensFooter">
+        <NavigationControls
+          primaryBtnText={primaryBtnText}
+          onPrimary={handlePrimary}
+          onPrevious={handlePrevious}
+          onCancel={handleCancel}
+          isPrimaryDisabled={isPrimaryDisabled}
+          isPreviousDisabled={isPreviousDisabled}
+        />
+      </Stack.Item>
+    </Stack>
+  );
+};
+
+export default CreateCopyJobScreens;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateCopyJobScreensProvider.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateCopyJobScreensProvider.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import CopyJobContextProvider from "../../Context/CopyJobContext";
+import CreateCopyJobScreens from "./CreateCopyJobScreens";
+
+const CreateCopyJobScreensProvider = () => {
+  return (
+    <CopyJobContextProvider>
+      <CreateCopyJobScreens />
+    </CopyJobContextProvider>
+  );
+};
+
+export default CreateCopyJobScreensProvider;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/PreviewCopyJob/PreviewCopyJob.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/PreviewCopyJob/PreviewCopyJob.tsx
@@ -0,0 +1,52 @@
+import { DetailsList, DetailsListLayoutMode, Stack, Text, TextField } from "@fluentui/react";
+import FieldRow from "Explorer/ContainerCopy/CreateCopyJob/Screens/Components/FieldRow";
+import React from "react";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { getPreviewCopyJobDetailsListColumns } from "./Utils/PreviewCopyJobUtils";
+
+const PreviewCopyJob: React.FC = () => {
+  const { copyJobState, setCopyJobState } = useCopyJobContext();
+
+  const selectedDatabaseAndContainers = [
+    {
+      sourceDatabaseName: copyJobState.source?.databaseId,
+      sourceContainerName: copyJobState.source?.containerId,
+      targetDatabaseName: copyJobState.target?.databaseId,
+      targetContainerName: copyJobState.target?.containerId,
+    },
+  ];
+  const jobName = copyJobState.jobName;
+
+  const onJobNameChange = (_ev?: React.FormEvent, newValue?: string) => {
+    setCopyJobState((prevState) => ({
+      ...prevState,
+      jobName: newValue || "",
+    }));
+  };
+  return (
+    <Stack tokens={{ childrenGap: 20 }} className="previewCopyJobContainer">
+      <FieldRow label={ContainerCopyMessages.jobNameLabel}>
+        <TextField value={jobName} onChange={onJobNameChange} />
+      </FieldRow>
+      <Stack>
+        <Text className="bold">{ContainerCopyMessages.sourceSubscriptionLabel}</Text>
+        <Text>{copyJobState.source?.subscription?.displayName}</Text>
+      </Stack>
+      <Stack>
+        <Text className="bold">{ContainerCopyMessages.sourceAccountLabel}</Text>
+        <Text>{copyJobState.source?.account?.name}</Text>
+      </Stack>
+      <Stack>
+        <DetailsList
+          items={selectedDatabaseAndContainers}
+          layoutMode={DetailsListLayoutMode.justified}
+          checkboxVisibility={2}
+          columns={getPreviewCopyJobDetailsListColumns()}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default PreviewCopyJob;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/PreviewCopyJob/Utils/PreviewCopyJobUtils.ts
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/PreviewCopyJob/Utils/PreviewCopyJobUtils.ts
@@ -0,0 +1,43 @@
+import { IColumn } from "@fluentui/react";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+
+const commonProps = {
+  minWidth: 130,
+  maxWidth: 140,
+  styles: {
+    root: {
+      whiteSpace: "normal",
+      lineHeight: "1.2",
+      wordBreak: "break-word",
+    },
+  },
+};
+
+export const getPreviewCopyJobDetailsListColumns = (): IColumn[] => {
+  return [
+    {
+      key: "sourcedbname",
+      name: ContainerCopyMessages.sourceDatabaseLabel,
+      fieldName: "sourceDatabaseName",
+      ...commonProps,
+    },
+    {
+      key: "sourcecolname",
+      name: ContainerCopyMessages.sourceContainerLabel,
+      fieldName: "sourceContainerName",
+      ...commonProps,
+    },
+    {
+      key: "targetdbname",
+      name: ContainerCopyMessages.targetDatabaseLabel,
+      fieldName: "targetDatabaseName",
+      ...commonProps,
+    },
+    {
+      key: "targetcolname",
+      name: ContainerCopyMessages.targetContainerLabel,
+      fieldName: "targetContainerName",
+      ...commonProps,
+    },
+  ];
+};
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/AccountDropdown.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/AccountDropdown.tsx
@@ -0,0 +1,30 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/display-name */
+import { Dropdown } from "@fluentui/react";
+import React from "react";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+import { DropdownOptionType } from "../../../../Types/CopyJobTypes";
+import FieldRow from "../../Components/FieldRow";
+
+interface AccountDropdownProps {
+  options: DropdownOptionType[];
+  selectedKey?: string;
+  disabled: boolean;
+  onChange: (_ev?: React.FormEvent, option?: DropdownOptionType) => void;
+}
+
+export const AccountDropdown: React.FC<AccountDropdownProps> = React.memo(
+  ({ options, selectedKey, disabled, onChange }) => (
+    <FieldRow label={ContainerCopyMessages.sourceAccountDropdownLabel}>
+      <Dropdown
+        placeholder={ContainerCopyMessages.sourceAccountDropdownPlaceholder}
+        ariaLabel={ContainerCopyMessages.sourceAccountDropdownLabel}
+        options={options}
+        disabled={disabled}
+        required
+        selectedKey={selectedKey}
+        onChange={onChange}
+      />
+    </FieldRow>
+  ),
+);
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/MigrationTypeCheckbox.tsx
+++ b/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>
+));
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/SubscriptionDropdown.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/SubscriptionDropdown.tsx
@@ -0,0 +1,28 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/display-name */
+import { Dropdown } from "@fluentui/react";
+import React from "react";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+import { DropdownOptionType } from "../../../../Types/CopyJobTypes";
+import FieldRow from "../../Components/FieldRow";
+
+interface SubscriptionDropdownProps {
+  options: DropdownOptionType[];
+  selectedKey?: string;
+  onChange: (_ev?: React.FormEvent, option?: DropdownOptionType) => void;
+}
+
+export const SubscriptionDropdown: React.FC<SubscriptionDropdownProps> = React.memo(
+  ({ options, selectedKey, onChange }) => (
+    <FieldRow label={ContainerCopyMessages.subscriptionDropdownLabel}>
+      <Dropdown
+        placeholder={ContainerCopyMessages.subscriptionDropdownPlaceholder}
+        ariaLabel={ContainerCopyMessages.subscriptionDropdownLabel}
+        options={options}
+        required
+        selectedKey={selectedKey}
+        onChange={onChange}
+      />
+    </FieldRow>
+  ),
+);
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/SelectAccount.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/SelectAccount.tsx
@@ -0,0 +1,51 @@
+/* eslint-disable react/display-name */
+import { Stack } from "@fluentui/react";
+import React from "react";
+import { apiType } from "UserContext";
+import { DatabaseAccount, Subscription } from "../../../../../Contracts/DataModels";
+import { useDatabaseAccounts } from "../../../../../hooks/useDatabaseAccounts";
+import { useSubscriptions } from "../../../../../hooks/useSubscriptions";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { CopyJobMigrationType } from "../../../Enums/CopyJobEnums";
+import { AccountDropdown } from "./Components/AccountDropdown";
+import { MigrationTypeCheckbox } from "./Components/MigrationTypeCheckbox";
+import { SubscriptionDropdown } from "./Components/SubscriptionDropdown";
+import { useDropdownOptions, useEventHandlers } from "./Utils/selectAccountUtils";
+
+const SelectAccount = React.memo(() => {
+  const { copyJobState, setCopyJobState } = useCopyJobContext();
+  const selectedSubscriptionId = copyJobState?.source?.subscription?.subscriptionId;
+
+  const subscriptions: Subscription[] = useSubscriptions();
+  const allAccounts: DatabaseAccount[] = useDatabaseAccounts(selectedSubscriptionId);
+  const sqlApiOnlyAccounts: DatabaseAccount[] = allAccounts?.filter((account) => apiType(account) === "SQL");
+
+  const { subscriptionOptions, accountOptions } = useDropdownOptions(subscriptions, sqlApiOnlyAccounts);
+  const { handleSelectSourceAccount, handleMigrationTypeChange } = useEventHandlers(setCopyJobState);
+
+  const migrationTypeChecked = copyJobState?.migrationType === CopyJobMigrationType.Offline;
+
+  return (
+    <Stack className="selectAccountContainer" tokens={{ childrenGap: 15 }}>
+      <span>{ContainerCopyMessages.selectAccountDescription}</span>
+
+      <SubscriptionDropdown
+        options={subscriptionOptions}
+        selectedKey={selectedSubscriptionId}
+        onChange={(_ev, option) => handleSelectSourceAccount("subscription", option?.data)}
+      />
+
+      <AccountDropdown
+        options={accountOptions}
+        selectedKey={copyJobState?.source?.account?.id}
+        disabled={!selectedSubscriptionId}
+        onChange={(_ev, option) => handleSelectSourceAccount("account", option?.data)}
+      />
+
+      <MigrationTypeCheckbox checked={migrationTypeChecked} onChange={handleMigrationTypeChange} />
+    </Stack>
+  );
+});
+
+export default SelectAccount;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Utils/selectAccountUtils.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Utils/selectAccountUtils.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+import { DatabaseAccount, Subscription } from "../../../../../../Contracts/DataModels";
+import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
+import { CopyJobContextProviderType, CopyJobContextState, DropdownOptionType } from "../../../../Types/CopyJobTypes";
+
+export function useDropdownOptions(
+  subscriptions: Subscription[],
+  accounts: DatabaseAccount[],
+): {
+  subscriptionOptions: DropdownOptionType[];
+  accountOptions: DropdownOptionType[];
+} {
+  const subscriptionOptions = React.useMemo(
+    () =>
+      subscriptions?.map((sub) => ({
+        key: sub.subscriptionId,
+        text: sub.displayName,
+        data: sub,
+      })) || [],
+    [subscriptions],
+  );
+
+  const accountOptions = React.useMemo(
+    () =>
+      accounts?.map((account) => ({
+        key: account.id,
+        text: account.name,
+        data: account,
+      })) || [],
+    [accounts],
+  );
+
+  return { subscriptionOptions, accountOptions };
+}
+
+type setCopyJobStateType = CopyJobContextProviderType["setCopyJobState"];
+
+export function useEventHandlers(setCopyJobState: setCopyJobStateType) {
+  const handleSelectSourceAccount = React.useCallback(
+    (type: "subscription" | "account", data: (Subscription & DatabaseAccount) | undefined) => {
+      setCopyJobState((prevState: CopyJobContextState) => {
+        if (type === "subscription") {
+          return {
+            ...prevState,
+            source: {
+              ...prevState.source,
+              subscription: data || null,
+              account: null,
+            },
+          };
+        }
+        if (type === "account") {
+          return {
+            ...prevState,
+            source: {
+              ...prevState.source,
+              account: data || null,
+            },
+          };
+        }
+        return prevState;
+      });
+    },
+    [setCopyJobState],
+  );
+
+  const handleMigrationTypeChange = React.useCallback(
+    (_ev?: React.FormEvent<HTMLElement>, checked?: boolean) => {
+      setCopyJobState((prevState: CopyJobContextState) => ({
+        ...prevState,
+        migrationType: checked ? CopyJobMigrationType.Offline : CopyJobMigrationType.Online,
+      }));
+    },
+    [setCopyJobState],
+  );
+
+  return { handleSelectSourceAccount, handleMigrationTypeChange };
+}
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/Events/DropDownChangeHandler.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/Events/DropDownChangeHandler.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { CopyJobContextState, DropdownOptionType } from "../../../../Types/CopyJobTypes";
+
+export function dropDownChangeHandler(setCopyJobState: React.Dispatch<React.SetStateAction<CopyJobContextState>>) {
+  return (type: "sourceDatabase" | "sourceContainer" | "targetDatabase" | "targetContainer") =>
+    (_evnt: React.FormEvent, option: DropdownOptionType) => {
+      const value = option.key;
+      setCopyJobState((prevState) => {
+        switch (type) {
+          case "sourceDatabase":
+            return {
+              ...prevState,
+              source: { ...prevState.source, databaseId: value, containerId: undefined },
+            };
+          case "sourceContainer":
+            return {
+              ...prevState,
+              source: { ...prevState.source, containerId: value },
+            };
+          case "targetDatabase":
+            return {
+              ...prevState,
+              target: { ...prevState.target, databaseId: value, containerId: undefined },
+            };
+          case "targetContainer":
+            return {
+              ...prevState,
+              target: { ...prevState.target, containerId: value },
+            };
+          default:
+            return prevState;
+        }
+      });
+    };
+}
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/SelectSourceAndTargetContainers.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/SelectSourceAndTargetContainers.tsx
@@ -0,0 +1,70 @@
+import { Stack } from "@fluentui/react";
+import { DatabaseModel } from "Contracts/DataModels";
+import React from "react";
+import { useDatabases } from "../../../../../hooks/useDatabases";
+import { useDataContainers } from "../../../../../hooks/useDataContainers";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { DatabaseContainerSection } from "./components/DatabaseContainerSection";
+import { dropDownChangeHandler } from "./Events/DropDownChangeHandler";
+import { useMemoizedSourceAndTargetData } from "./memoizedData";
+
+const SelectSourceAndTargetContainers = () => {
+  const { copyJobState, setCopyJobState } = useCopyJobContext();
+  const { source, target, sourceDbParams, sourceContainerParams, targetDbParams, targetContainerParams } =
+    useMemoizedSourceAndTargetData(copyJobState);
+
+  const sourceDatabases = useDatabases(...sourceDbParams) || [];
+  const sourceContainers = useDataContainers(...sourceContainerParams) || [];
+  const targetDatabases = useDatabases(...targetDbParams) || [];
+  const targetContainers = useDataContainers(...targetContainerParams) || [];
+
+  const sourceDatabaseOptions = React.useMemo(
+    () => sourceDatabases.map((db: DatabaseModel) => ({ key: db.name, text: db.name, data: db })),
+    [sourceDatabases],
+  );
+  const sourceContainerOptions = React.useMemo(
+    () => sourceContainers.map((c: DatabaseModel) => ({ key: c.name, text: c.name, data: c })),
+    [sourceContainers],
+  );
+  const targetDatabaseOptions = React.useMemo(
+    () => targetDatabases.map((db: DatabaseModel) => ({ key: db.name, text: db.name, data: db })),
+    [targetDatabases],
+  );
+  const targetContainerOptions = React.useMemo(
+    () => targetContainers.map((c: DatabaseModel) => ({ key: c.name, text: c.name, data: c })),
+    [targetContainers],
+  );
+
+  const onDropdownChange = React.useCallback(dropDownChangeHandler(setCopyJobState), [setCopyJobState]);
+
+  return (
+    <Stack className="selectSourceAndTargetContainers" tokens={{ childrenGap: 25 }}>
+      <span>{ContainerCopyMessages.selectSourceAndTargetContainersDescription}</span>
+      <DatabaseContainerSection
+        heading={ContainerCopyMessages.sourceContainerSubHeading}
+        databaseOptions={sourceDatabaseOptions}
+        selectedDatabase={source?.databaseId}
+        databaseDisabled={false}
+        databaseOnChange={onDropdownChange("sourceDatabase")}
+        containerOptions={sourceContainerOptions}
+        selectedContainer={source?.containerId}
+        containerDisabled={!source?.databaseId}
+        containerOnChange={onDropdownChange("sourceContainer")}
+      />
+      <DatabaseContainerSection
+        heading={ContainerCopyMessages.targetContainerSubHeading}
+        databaseOptions={targetDatabaseOptions}
+        selectedDatabase={target?.databaseId}
+        databaseDisabled={false}
+        databaseOnChange={onDropdownChange("targetDatabase")}
+        containerOptions={targetContainerOptions}
+        selectedContainer={target?.containerId}
+        containerDisabled={!target?.databaseId}
+        containerOnChange={onDropdownChange("targetContainer")}
+      />
+    </Stack>
+  );
+};
+
+export default SelectSourceAndTargetContainers;
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/components/DatabaseContainerSection.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/components/DatabaseContainerSection.tsx
@@ -0,0 +1,43 @@
+import { Dropdown, Stack } from "@fluentui/react";
+import React from "react";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+import { DatabaseContainerSectionProps } from "../../../../Types/CopyJobTypes";
+import FieldRow from "../../Components/FieldRow";
+
+export const DatabaseContainerSection = ({
+  heading,
+  databaseOptions,
+  selectedDatabase,
+  databaseDisabled,
+  databaseOnChange,
+  containerOptions,
+  selectedContainer,
+  containerDisabled,
+  containerOnChange,
+}: DatabaseContainerSectionProps) => (
+  <Stack tokens={{ childrenGap: 15 }} className="databaseContainerSection">
+    <label className="subHeading">{heading}</label>
+    <FieldRow label={ContainerCopyMessages.databaseDropdownLabel}>
+      <Dropdown
+        placeholder={ContainerCopyMessages.databaseDropdownPlaceholder}
+        ariaLabel={ContainerCopyMessages.databaseDropdownLabel}
+        options={databaseOptions}
+        required
+        disabled={!!databaseDisabled}
+        selectedKey={selectedDatabase}
+        onChange={databaseOnChange}
+      />
+    </FieldRow>
+    <FieldRow label={ContainerCopyMessages.containerDropdownLabel}>
+      <Dropdown
+        placeholder={ContainerCopyMessages.containerDropdownPlaceholder}
+        ariaLabel={ContainerCopyMessages.containerDropdownLabel}
+        options={containerOptions}
+        required
+        disabled={!!containerDisabled}
+        selectedKey={selectedContainer}
+        onChange={containerOnChange}
+      />
+    </FieldRow>
+  </Stack>
+);
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/memoizedData.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/memoizedData.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { getAccountDetailsFromResourceId } from "../../../CopyJobUtils";
+import { CopyJobContextState, DatabaseParams, DataContainerParams } from "../../../Types/CopyJobTypes";
+
+export function useMemoizedSourceAndTargetData(copyJobState: CopyJobContextState) {
+  const { source, target } = copyJobState ?? {};
+  const selectedSourceAccount = source?.account;
+  const selectedTargetAccount = target?.account;
+  const {
+    subscriptionId: sourceSubscriptionId,
+    resourceGroup: sourceResourceGroup,
+    accountName: sourceAccountName,
+  } = getAccountDetailsFromResourceId(selectedSourceAccount?.id);
+  const {
+    subscriptionId: targetSubscriptionId,
+    resourceGroup: targetResourceGroup,
+    accountName: targetAccountName,
+  } = getAccountDetailsFromResourceId(selectedTargetAccount?.id);
+
+  const sourceDbParams = React.useMemo(
+    () => [sourceSubscriptionId, sourceResourceGroup, sourceAccountName, "SQL"] as DatabaseParams,
+    [sourceSubscriptionId, sourceResourceGroup, sourceAccountName],
+  );
+
+  const sourceContainerParams = React.useMemo(
+    () =>
+      [sourceSubscriptionId, sourceResourceGroup, sourceAccountName, source?.databaseId, "SQL"] as DataContainerParams,
+    [sourceSubscriptionId, sourceResourceGroup, sourceAccountName, source?.databaseId],
+  );
+
+  const targetDbParams = React.useMemo(
+    () => [targetSubscriptionId, targetResourceGroup, targetAccountName, "SQL"] as DatabaseParams,
+    [targetSubscriptionId, targetResourceGroup, targetAccountName],
+  );
+
+  const targetContainerParams = React.useMemo(
+    () =>
+      [targetSubscriptionId, targetResourceGroup, targetAccountName, target?.databaseId, "SQL"] as DataContainerParams,
+    [targetSubscriptionId, targetResourceGroup, targetAccountName, target?.databaseId],
+  );
+
+  return { source, target, sourceDbParams, sourceContainerParams, targetDbParams, targetContainerParams };
+}
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Utils/useCopyJobNavigation.ts
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Utils/useCopyJobNavigation.ts
@@ -0,0 +1,152 @@
+import { useCallback, useMemo, useReducer, useState } from "react";
+import { useSidePanel } from "../../../../hooks/useSidePanel";
+import { submitCreateCopyJob } from "../../Actions/CopyJobActions";
+import { useCopyJobContext } from "../../Context/CopyJobContext";
+import { CopyJobMigrationType } from "../../Enums/CopyJobEnums";
+import { useCopyJobPrerequisitesCache } from "./useCopyJobPrerequisitesCache";
+import { SCREEN_KEYS, useCreateCopyJobScreensList } from "./useCreateCopyJobScreensList";
+
+type NavigationState = {
+  screenHistory: string[];
+};
+
+type Action = { type: "NEXT"; nextScreen: string } | { type: "PREVIOUS" } | { type: "RESET" };
+
+function navigationReducer(state: NavigationState, action: Action): NavigationState {
+  switch (action.type) {
+    case "NEXT":
+      return {
+        screenHistory: [...state.screenHistory, action.nextScreen],
+      };
+    case "PREVIOUS":
+      return {
+        screenHistory: state.screenHistory.length > 1 ? state.screenHistory.slice(0, -1) : state.screenHistory,
+      };
+    case "RESET":
+      return {
+        screenHistory: [SCREEN_KEYS.SelectAccount],
+      };
+    default:
+      return state;
+  }
+}
+
+export function useCopyJobNavigation() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { copyJobState, resetCopyJobState } = useCopyJobContext();
+  const screens = useCreateCopyJobScreensList();
+  const { validationCache: cache } = useCopyJobPrerequisitesCache();
+  const [state, dispatch] = useReducer(navigationReducer, { screenHistory: [SCREEN_KEYS.SelectAccount] });
+
+  const currentScreenKey = state.screenHistory[state.screenHistory.length - 1];
+  const currentScreen = screens.find((screen) => screen.key === currentScreenKey);
+
+  const isPrimaryDisabled = useMemo(() => {
+    if (isLoading) {
+      return true;
+    }
+    const context = currentScreenKey === SCREEN_KEYS.AssignPermissions ? cache : copyJobState;
+    return !currentScreen?.validations.every((v) => v.validate(context));
+  }, [currentScreen.key, copyJobState, cache, isLoading]);
+
+  const primaryBtnText = useMemo(() => {
+    if (currentScreenKey === SCREEN_KEYS.PreviewCopyJob) {
+      return "Copy";
+    }
+    return "Next";
+  }, [currentScreenKey]);
+
+  const isPreviousDisabled = state.screenHistory.length <= 1;
+
+  const handleCancel = useCallback(() => {
+    dispatch({ type: "RESET" });
+    resetCopyJobState();
+    useSidePanel.getState().closeSidePanel();
+  }, []);
+
+  const getContainerIdentifiers = (container: typeof copyJobState.source | typeof copyJobState.target) => ({
+    accountId: container?.account?.id || "",
+    databaseId: container?.databaseId || "",
+    containerId: container?.containerId || "",
+  });
+
+  const isSameAccount = (
+    sourceIds: ReturnType<typeof getContainerIdentifiers>,
+    targetIds: ReturnType<typeof getContainerIdentifiers>,
+  ) => sourceIds.accountId === targetIds.accountId;
+
+  const areContainersIdentical = () => {
+    const { source, target } = copyJobState;
+    const sourceIds = getContainerIdentifiers(source);
+    const targetIds = getContainerIdentifiers(target);
+
+    return (
+      isSameAccount(sourceIds, targetIds) &&
+      sourceIds.databaseId === targetIds.databaseId &&
+      sourceIds.containerId === targetIds.containerId
+    );
+  };
+
+  const shouldNotShowPermissionScreen = () => {
+    const { source, target, migrationType } = copyJobState;
+    return (
+      migrationType === CopyJobMigrationType.Offline &&
+      isSameAccount(getContainerIdentifiers(source), getContainerIdentifiers(target))
+    );
+  };
+
+  const handleCopyJobSubmission = async () => {
+    try {
+      setIsLoading(true);
+      await submitCreateCopyJob(copyJobState, handleCancel);
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error
+          ? error.message || "Failed to create copy job. Please try again later."
+          : "Failed to create copy job. Please try again later.";
+      setError(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handlePrimary = useCallback(() => {
+    if (currentScreenKey === SCREEN_KEYS.SelectSourceAndTargetContainers && areContainersIdentical()) {
+      setError("Source and destination containers cannot be the same. Please select different containers to proceed.");
+      return;
+    }
+
+    setError(null);
+    const transitions = {
+      [SCREEN_KEYS.SelectAccount]: shouldNotShowPermissionScreen()
+        ? SCREEN_KEYS.SelectSourceAndTargetContainers
+        : SCREEN_KEYS.AssignPermissions,
+      [SCREEN_KEYS.AssignPermissions]: SCREEN_KEYS.SelectSourceAndTargetContainers,
+      [SCREEN_KEYS.SelectSourceAndTargetContainers]: SCREEN_KEYS.PreviewCopyJob,
+    };
+
+    const nextScreen = transitions[currentScreenKey];
+    if (nextScreen) {
+      dispatch({ type: "NEXT", nextScreen });
+    } else if (currentScreenKey === SCREEN_KEYS.PreviewCopyJob) {
+      handleCopyJobSubmission();
+    }
+  }, [currentScreenKey, copyJobState, areContainersIdentical, handleCopyJobSubmission]);
+
+  const handlePrevious = useCallback(() => {
+    dispatch({ type: "PREVIOUS" });
+  }, []);
+
+  return {
+    currentScreen,
+    isPrimaryDisabled,
+    isPreviousDisabled,
+    handlePrimary,
+    handlePrevious,
+    handleCancel,
+    primaryBtnText,
+    error,
+    setError,
+  };
+}
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Utils/useCopyJobPrerequisitesCache.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Utils/useCopyJobPrerequisitesCache.tsx
@@ -0,0 +1,11 @@
+import create from "zustand";
+
+interface CopyJobPrerequisitesCacheState {
+  validationCache: Map<string, boolean>;
+  setValidationCache: (cache: Map<string, boolean>) => void;
+}
+
+export const useCopyJobPrerequisitesCache = create<CopyJobPrerequisitesCacheState>((set) => ({
+  validationCache: new Map<string, boolean>(),
+  setValidationCache: (cache) => set({ validationCache: cache }),
+}));
--- a/src/Explorer/ContainerCopy/CreateCopyJob/Utils/useCreateCopyJobScreensList.tsx
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Utils/useCreateCopyJobScreensList.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import { CopyJobContextState } from "../../Types/CopyJobTypes";
+import AssignPermissions from "../Screens/AssignPermissions/AssignPermissions";
+import PreviewCopyJob from "../Screens/PreviewCopyJob/PreviewCopyJob";
+import SelectAccount from "../Screens/SelectAccount/SelectAccount";
+import SelectSourceAndTargetContainers from "../Screens/SelectSourceAndTargetContainers/SelectSourceAndTargetContainers";
+
+const SCREEN_KEYS = {
+  SelectAccount: "SelectAccount",
+  SelectSourceAndTargetContainers: "SelectSourceAndTargetContainers",
+  PreviewCopyJob: "PreviewCopyJob",
+  AssignPermissions: "AssignPermissions",
+};
+
+type Validation = {
+  validate: (state: CopyJobContextState | Map<string, boolean>) => boolean;
+  message: string;
+};
+
+type Screen = {
+  key: string;
+  component: React.ReactElement;
+  validations: Validation[];
+};
+
+function useCreateCopyJobScreensList() {
+  return React.useMemo<Screen[]>(
+    () => [
+      {
+        key: SCREEN_KEYS.SelectAccount,
+        component: <SelectAccount />,
+        validations: [
+          {
+            validate: (state: CopyJobContextState) => !!state?.source?.subscription && !!state?.source?.account,
+            message: "Please select a subscription and account to proceed",
+          },
+        ],
+      },
+      {
+        key: SCREEN_KEYS.SelectSourceAndTargetContainers,
+        component: <SelectSourceAndTargetContainers />,
+        validations: [
+          {
+            validate: (state: CopyJobContextState) =>
+              !!state?.source?.databaseId &&
+              !!state?.source?.containerId &&
+              !!state?.target?.databaseId &&
+              !!state?.target?.containerId,
+            message: "Please select source and target containers to proceed",
+          },
+        ],
+      },
+      {
+        key: SCREEN_KEYS.PreviewCopyJob,
+        component: <PreviewCopyJob />,
+        validations: [
+          {
+            validate: (state: CopyJobContextState) =>
+              !!(typeof state?.jobName === "string" && state?.jobName && /^[a-zA-Z0-9-.]+$/.test(state?.jobName)),
+            message: "Please enter a job name to proceed",
+          },
+        ],
+      },
+      {
+        key: SCREEN_KEYS.AssignPermissions,
+        component: <AssignPermissions />,
+        validations: [
+          {
+            validate: (cache: Map<string, boolean>) => {
+              const cacheValuesIterator = Array.from(cache.values());
+              if (cacheValuesIterator.length === 0) {
+                return false;
+              }
+
+              const allValid = cacheValuesIterator.every((isValid: boolean) => isValid);
+              return allValid;
+            },
+            message: "Please ensure all previous steps are valid to proceed",
+          },
+        ],
+      },
+    ],
+    [],
+  );
+}
+
+export { SCREEN_KEYS, useCreateCopyJobScreensList };