clean up tests

Co-authored-by: Laurent Nguyen <languye@microsoft.com>

package-lock.json

@@ -10,7 +10,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@azure/arm-cosmosdb": "9.1.0",
-        "@azure/cosmos": "4.5.0",
+        "@azure/cosmos": "4.7.0",
         "@azure/cosmos-language-service": "0.0.5",
         "@azure/identity": "4.5.0",
         "@azure/msal-browser": "2.14.2",
@@ -116,6 +116,7 @@
         "tinykeys": "2.1.0",
         "underscore": "1.12.1",
         "utility-types": "3.10.0",
+        "uuid": "9.0.0",
         "zustand": "3.5.0"
       },
       "devDependencies": {
@@ -391,9 +392,9 @@
       "license": "0BSD"
     },
     "node_modules/@azure/cosmos": {
-      "version": "4.5.0",
+      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-4.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-4.7.0.tgz",
-      "integrity": "sha512-JsTh4twb6FcwP7rJwxQiNZQ/LGtuF6gmciaxY9Rnp6/A325Lhsw/SH4R2ArpT0yCvozbZpweIwdPfUkXVBtp5w==",
+      "integrity": "sha512-a8OV7E41u/ZDaaaDAFdqTTiJ7c82jZc/+ot3XzNCIIilR25NBB+1ixzWQOAgP8SHRUIKfaUl6wAPdTuiG9I66A==",
       "license": "MIT",
       "dependencies": {
         "@azure/abort-controller": "^2.1.2",
@@ -626,6 +627,14 @@
         }
       }
     },
+    "node_modules/@azure/ms-rest-js/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@azure/ms-rest-js/node_modules/xml2js": {
       "version": "0.5.0",
       "license": "MIT",
@@ -685,6 +694,14 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/@azure/msal-node/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
@@ -7595,6 +7612,14 @@
         "uuid": "^8.0.0"
       }
     },
+    "node_modules/@nteract/commutable/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@nteract/connected-components": {
       "version": "6.8.2",
       "license": "BSD-3-Clause",
@@ -9125,6 +9150,14 @@
         "uuid": "^8.0.0"
       }
     },
+    "node_modules/@nteract/fixtures/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@nteract/iron-icons": {
       "version": "1.0.0",
       "license": "BSD-3-Clause",
@@ -9282,6 +9315,14 @@
         "uuid": "^8.0.0"
       }
     },
+    "node_modules/@nteract/messaging/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@nteract/monaco-editor": {
       "version": "3.2.2",
       "license": "BSD-3-Clause",
@@ -9397,6 +9438,14 @@
       "version": "0.18.1",
       "license": "MIT"
     },
+    "node_modules/@nteract/monaco-editor/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@nteract/mythic-configuration": {
       "version": "1.0.12",
       "license": "BSD-3-Clause",
@@ -9665,6 +9714,14 @@
         "uuid": "^8.0.0"
       }
     },
+    "node_modules/@nteract/reducers/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@nteract/selectors": {
       "version": "3.2.0",
       "license": "BSD-3-Clause",
@@ -9888,6 +9945,14 @@
         "uuid": "^8.0.0"
       }
     },
+    "node_modules/@nteract/types/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@octokit/auth-token": {
       "version": "4.0.0",
       "license": "MIT",
@@ -26419,6 +26484,15 @@
         "xmlbuilder": "^15.1.0"
       }
     },
+    "node_modules/jest-trx-results-processor/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/jest-util": {
       "version": "24.9.0",
       "license": "MIT",
@@ -33753,6 +33827,15 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sockjs/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "license": "BSD-3-Clause",
@@ -35619,8 +35702,9 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
+      "version": "9.0.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
       "bin": {
         "uuid": "dist/bin/uuid"
       }

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "4.5.0",
+    "@azure/cosmos": "4.7.0",
     "@azure/cosmos-language-service": "0.0.5",
     "@azure/identity": "4.5.0",
     "@azure/msal-browser": "2.14.2",
@@ -46,8 +46,8 @@
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
     "@xmldom/xmldom": "0.7.13",
-    "@xterm/xterm": "5.5.0",
     "@xterm/addon-fit": "0.10.0",
+    "@xterm/xterm": "5.5.0",
     "allotment": "1.20.2",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
@@ -111,6 +111,7 @@
     "tinykeys": "2.1.0",
     "underscore": "1.12.1",
     "utility-types": "3.10.0",
+    "uuid": "9.0.0",
     "zustand": "3.5.0"
   },
   "devDependencies": {

src/Common/Constants.ts

@@ -297,6 +297,7 @@ export class HttpHeaders {
   public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
   public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
   public static xAPIKey: string = "X-API-Key";
+  public static sessionId: string = "x-ms-client-session-id";
 }
 
 export class ContentType {
@@ -530,11 +531,6 @@ export class PriorityLevel {
   public static readonly Default = "low";
 }
 
-export class ariaLabelForLearnMoreLink {
-  public static readonly AnalyticalStore = "Learn more about analytical store.";
-  public static readonly AzureSynapseLink = "Learn more about Azure Synapse Link.";
-}
-
 export class GlobalSecondaryIndexLabels {
   public static readonly NewGlobalSecondaryIndex: string = "New Global Secondary Index";
 }

src/Common/DatabaseAccountUtility.ts

@@ -44,8 +44,8 @@ export const getDatabaseEndpoint = (apiType: ApiType): string => {
       return "gremlinDatabases";
     case "Tables":
       return "tables";
-    default:
     case "SQL":
+    default:
       return "sqlDatabases";
   }
 };
@@ -58,8 +58,8 @@ export const getCollectionEndpoint = (apiType: ApiType): string => {
       return "tables";
     case "Gremlin":
       return "graphs";
-    default:
     case "SQL":
+    default:
       return "containers";
   }
 };

src/Common/LoadingOverlay.tsx

@@ -0,0 +1,31 @@
+import { Overlay, Spinner, SpinnerSize } from "@fluentui/react";
+import React from "react";
+
+interface LoadingOverlayProps {
+  isLoading: boolean;
+  label: string;
+}
+
+const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ isLoading, label }) => {
+  if (!isLoading) {
+    return null;
+  }
+
+  return (
+    <Overlay
+      styles={{
+        root: {
+          backgroundColor: "rgba(255,255,255,0.9)",
+          zIndex: 9999,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        },
+      }}
+    >
+      <Spinner size={SpinnerSize.large} label={label} styles={{ label: { fontWeight: 600 } }} />
+    </Overlay>
+  );
+};
+
+export default LoadingOverlay;

src/Common/MongoProxyClient.ts

@@ -17,6 +17,7 @@ const defaultHeaders = {
   [HttpHeaders.apiType]: ApiType.MongoDB.toString(),
   [CosmosSDKConstants.HttpHeaders.MaxEntityCount]: "100",
   [CosmosSDKConstants.HttpHeaders.Version]: "2017-11-15",
+  [HttpHeaders.sessionId]: userContext.sessionId,
 };
 
 function authHeaders() {

src/Common/dataAccess/createCollection.ts

@@ -95,9 +95,6 @@ const createSqlContainer = async (params: DataModels.CreateCollectionParams): Pr
   const resource: ARMTypes.SqlContainerResource = {
     id: params.collectionId,
   };
-  if (params.analyticalStorageTtl) {
-    resource.analyticalStorageTtl = params.analyticalStorageTtl;
-  }
   if (params.indexingPolicy) {
     resource.indexingPolicy = params.indexingPolicy;
   }
@@ -138,9 +135,6 @@ const createMongoCollection = async (params: DataModels.CreateCollectionParams):
   const resource: ARMTypes.MongoDBCollectionResource = {
     id: params.collectionId,
   };
-  if (params.analyticalStorageTtl) {
-    resource.analyticalStorageTtl = params.analyticalStorageTtl;
-  }
   if (params.partitionKey) {
     const partitionKeyPath: string = params.partitionKey.paths[0];
     resource.shardKey = { [partitionKeyPath]: "Hash" };
@@ -179,9 +173,6 @@ const createCassandraTable = async (params: DataModels.CreateCollectionParams):
   const resource: ARMTypes.CassandraTableResource = {
     id: params.collectionId,
   };
-  if (params.analyticalStorageTtl) {
-    resource.analyticalStorageTtl = params.analyticalStorageTtl;
-  }
 
   const rpPayload: ARMTypes.CassandraTableCreateUpdateParameters = {
     properties: {
@@ -282,7 +273,6 @@ const createCollectionWithSDK = async (params: DataModels.CreateCollectionParams
     partitionKey: params.partitionKey || undefined,
     indexingPolicy: params.indexingPolicy || undefined,
     uniqueKeyPolicy: params.uniqueKeyPolicy || undefined,
-    analyticalStorageTtl: params.analyticalStorageTtl,
     vectorEmbeddingPolicy: params.vectorEmbeddingPolicy,
     fullTextPolicy: params.fullTextPolicy,
   } as ContainerRequest; // TODO: remove cast when https://github.com/Azure/azure-cosmos-js/issues/423 is fixed

src/Common/dataAccess/createMaterializedView.ts

@@ -23,9 +23,6 @@ export const createGlobalSecondaryIndex = async (params: CreateGlobalSecondaryIn
   if (params.materializedViewDefinition) {
     resource.materializedViewDefinition = params.materializedViewDefinition;
   }
-  if (params.analyticalStorageTtl) {
-    resource.analyticalStorageTtl = params.analyticalStorageTtl;
-  }
   if (params.indexingPolicy) {
     resource.indexingPolicy = params.indexingPolicy;
   }

src/Common/dataAccess/readCollectionOffer.ts

@@ -12,13 +12,13 @@ import { handleError } from "../ErrorHandlingUtils";
 import { readOfferWithSDK } from "./readOfferWithSDK";
 
 export const readCollectionOffer = async (params: ReadCollectionOfferParams): Promise<Offer> => {
-  const clearMessage = logConsoleProgress(`Querying offer for collection ${params.collectionId}`);
-
   if (isFabric()) {
     // Not exposing offers in Fabric
     return undefined;
   }
 
+  const clearMessage = logConsoleProgress(`Querying offer for collection ${params.collectionId}`);
+
   try {
     if (
       userContext.authType === AuthType.AAD &&

src/Contracts/DataModels.ts

@@ -36,14 +36,6 @@ export interface DatabaseAccountSystemData {
 
 export interface DatabaseAccountBackupPolicy {
   type: string;
-  /* periodicModeProperties?: {
-    backupIntervalInMinutes: number;
-    backupRetentionIntervalInHours: number;
-    backupStorageRedundancy: string;
-  };
-  continuousModeProperties?: {
-    tier: string;
-  }; */
 }
 
 export interface DatabaseAccountExtendedProperties {
@@ -73,6 +65,7 @@ export interface DatabaseAccountExtendedProperties {
   publicNetworkAccess?: string;
   enablePriorityBasedExecution?: boolean;
   vcoreMongoEndpoint?: string;
+  enableAllVersionsAndDeletesChangeFeed?: boolean;
 }
 
 export interface DatabaseAccountResponseLocation {
@@ -423,7 +416,6 @@ export interface CreateCollectionParamsBase {
   databaseId: string;
   databaseLevelThroughput: boolean;
   offerThroughput?: number;
-  analyticalStorageTtl?: number;
   autoPilotMaxThroughput?: number;
   indexingPolicy?: IndexingPolicy;
   partitionKey?: PartitionKey;

src/Contracts/ViewModels.ts

@@ -446,6 +446,7 @@ export interface DataExplorerInputsFrame {
   feedbackPolicies?: any;
   aadToken?: string;
   containerCopyEnabled?: boolean;
+  sessionId?: string;
 }
 
 export interface SelfServeFrameInputs {

src/Explorer/ContainerCopy/Actions/CopyJobActions.tsx

@@ -1,3 +1,4 @@
+import Explorer from "Explorer/Explorer";
 import React from "react";
 import { userContext } from "UserContext";
 import { logError } from "../../../Common/Logger";
@@ -22,6 +23,7 @@ import {
   extractErrorMessage,
   formatUTCDateTime,
   getAccountDetailsFromResourceId,
+  isIntraAccountCopy,
 } from "../CopyJobUtils";
 import CreateCopyJobScreensProvider from "../CreateCopyJob/Screens/CreateCopyJobScreensProvider";
 import { CopyJobActions, CopyJobStatusType } from "../Enums/CopyJobEnums";
@@ -29,12 +31,12 @@ import CopyJobDetails from "../MonitorCopyJobs/Components/CopyJobDetails";
 import { MonitorCopyJobsRefState } from "../MonitorCopyJobs/MonitorCopyJobRefState";
 import { CopyJobContextState, CopyJobError, CopyJobErrorType, CopyJobType } from "../Types/CopyJobTypes";
 
-export const openCreateCopyJobPanel = () => {
+export const openCreateCopyJobPanel = (explorer: Explorer) => {
   const sidePanelState = useSidePanel.getState();
   sidePanelState.setPanelHasConsole(false);
   sidePanelState.openSidePanel(
     ContainerCopyMessages.createCopyJobPanelTitle,
-    <CreateCopyJobScreensProvider />,
+    <CreateCopyJobScreensProvider explorer={explorer} />,
     "650px",
   );
 };
@@ -74,7 +76,6 @@ export const getCopyJobs = async (): Promise<CopyJobType[]> => {
     }
     copyJobsAbortController = null;
 
-    /* added a lower bound to "0" and upper bound to "100" */
     const calculateCompletionPercentage = (processed: number, total: number): number => {
       if (
         typeof processed !== "number" ||
@@ -138,11 +139,12 @@ export const submitCreateCopyJob = async (state: CopyJobContextState, onSuccess:
     const { subscriptionId, resourceGroup, accountName } = getAccountDetailsFromResourceId(
       userContext.databaseAccount?.id || "",
     );
+    const isSameAccount = isIntraAccountCopy(source?.account?.id, target?.account?.id);
     const body = {
       properties: {
         source: {
           component: "CosmosDBSql",
-          remoteAccountName: source?.account?.name,
+          ...(isSameAccount ? {} : { remoteAccountName: source?.account?.name }),
           databaseName: source?.databaseId,
           containerName: source?.containerId,
         },

src/Explorer/ContainerCopy/CommandBar/CopyJobCommandBar.tsx

@@ -13,8 +13,8 @@ const rootStyle = {
   },
 };
 
-const CopyJobCommandBar: React.FC<ContainerCopyProps> = ({ container }) => {
+const CopyJobCommandBar: React.FC<ContainerCopyProps> = ({ explorer }) => {
-  const commandBarItems: CommandButtonComponentProps[] = getCommandBarButtons(container);
+  const commandBarItems: CommandButtonComponentProps[] = getCommandBarButtons(explorer);
   const controlButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(commandBarItems, backgroundColor);
 
   return (

src/Explorer/ContainerCopy/CommandBar/Utils.ts

@@ -9,7 +9,7 @@ import ContainerCopyMessages from "../ContainerCopyMessages";
 import { MonitorCopyJobsRefState } from "../MonitorCopyJobs/MonitorCopyJobRefState";
 import { CopyJobCommandBarBtnType } from "../Types/CopyJobTypes";
 
-function getCopyJobBtns(container: Explorer): CopyJobCommandBarBtnType[] {
+function getCopyJobBtns(explorer: Explorer): CopyJobCommandBarBtnType[] {
   const monitorCopyJobsRef = MonitorCopyJobsRefState((state) => state.ref);
   const buttons: CopyJobCommandBarBtnType[] = [
     {
@@ -17,7 +17,7 @@ function getCopyJobBtns(container: Explorer): CopyJobCommandBarBtnType[] {
       iconSrc: AddIcon,
       label: ContainerCopyMessages.createCopyJobButtonLabel,
       ariaLabel: ContainerCopyMessages.createCopyJobButtonAriaLabel,
-      onClick: Actions.openCreateCopyJobPanel,
+      onClick: Actions.openCreateCopyJobPanel.bind(null, explorer),
     },
     {
       key: "refresh",
@@ -34,7 +34,7 @@ function getCopyJobBtns(container: Explorer): CopyJobCommandBarBtnType[] {
       label: ContainerCopyMessages.feedbackButtonLabel,
       ariaLabel: ContainerCopyMessages.feedbackButtonAriaLabel,
       onClick: () => {
-        container.openContainerCopyFeedbackBlade();
+        explorer.openContainerCopyFeedbackBlade();
       },
     });
   }
@@ -54,6 +54,6 @@ function btnMapper(config: CopyJobCommandBarBtnType): CommandButtonComponentProp
   };
 }
 
-export function getCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
+export function getCommandBarButtons(explorer: Explorer): CommandButtonComponentProps[] {
-  return getCopyJobBtns(container).map(btnMapper);
+  return getCopyJobBtns(explorer).map(btnMapper);
 }

src/Explorer/ContainerCopy/ContainerCopyMessages.ts

@@ -36,6 +36,9 @@ export default {
   databaseDropdownPlaceholder: "Select a database",
   containerDropdownLabel: "Container",
   containerDropdownPlaceholder: "Select a container",
+  createNewContainerSubHeading: "Select the properties for your container.",
+  createContainerButtonLabel: "Create a new container",
+  createContainerHeading: "Create new container",
 
   // Preview and Create Screen
   jobNameLabel: "Job name",
@@ -52,11 +55,22 @@ export default {
       "To copy data from the source to the destination container, ensure that the managed identity of the destination account has read access to the source account by completing the following steps.",
     intraAccountOnlineDescription: (accountName: string) =>
       `Follow the steps below to enable online copy on your "${accountName}" account.`,
+    crossAccountConfiguration: {
+      title: "Cross-account container copy",
+      description: (sourceAccount: string, destinationAccount: string) =>
+        `Please follow the instruction below to grant requisite permissions to copy data from "${sourceAccount}" to "${destinationAccount}".`,
+    },
+    onlineConfiguration: {
+      title: "Online container copy",
+      description: (accountName: string) =>
+        `Please follow the instructions below to enable online copy on your "${accountName}" account.`,
+    },
   },
   toggleBtn: {
     onText: "On",
     offText: "Off",
   },
+  popoverOverlaySpinnerLabel: "Please wait while we process your request...",
   addManagedIdentity: {
     title: "System-assigned managed identity enabled.",
     description:
@@ -117,10 +131,17 @@ export default {
   },
   onlineCopyEnabled: {
     title: "Online copy enabled",
-    description: (accountName: string) => `Enable Online copy on "${accountName}".`,
+    description: (accountName: string) =>
+      `Enable online container copy by clicking the button below on your "${accountName}" account.`,
     hrefText: "Learn more about online copy jobs",
     href: "https://learn.microsoft.com/en-us/azure/cosmos-db/container-copy?tabs=online-copy&pivots=api-nosql#enable-online-copy",
     buttonText: "Enable Online Copy",
+    validateAllVersionsAndDeletesChangeFeedSpinnerLabel:
+      "Validating All versions and deletes change feed mode (preview)...",
+    enablingAllVersionsAndDeletesChangeFeedSpinnerLabel:
+      "Enabling All versions and deletes change feed mode (preview)...",
+    enablingOnlineCopySpinnerLabel: (accountName: string) =>
+      `Enabling online copy on your "${accountName}" account ...`,
   },
   MonitorJobs: {
     Columns: {

src/Explorer/ContainerCopy/ContainerCopyPanel.tsx

@@ -5,7 +5,7 @@ import { MonitorCopyJobsRefState } from "./MonitorCopyJobs/MonitorCopyJobRefStat
 import MonitorCopyJobs, { MonitorCopyJobsRef } from "./MonitorCopyJobs/MonitorCopyJobs";
 import { ContainerCopyProps } from "./Types/CopyJobTypes";
 
-const ContainerCopyPanel: React.FC<ContainerCopyProps> = ({ container }) => {
+const ContainerCopyPanel: React.FC<ContainerCopyProps> = ({ explorer }) => {
   const monitorCopyJobsRef = React.useRef<MonitorCopyJobsRef>();
   useEffect(() => {
     if (monitorCopyJobsRef.current) {
@@ -14,8 +14,8 @@ const ContainerCopyPanel: React.FC<ContainerCopyProps> = ({ container }) => {
   }, [monitorCopyJobsRef.current]);
   return (
     <div id="containerCopyWrapper" className="flexContainer hideOverflows">
-      <CopyJobCommandBar container={container} />
+      <CopyJobCommandBar explorer={explorer} />
-      <MonitorCopyJobs ref={monitorCopyJobsRef} />
+      <MonitorCopyJobs ref={monitorCopyJobsRef} explorer={explorer} />
     </div>
   );
 };

src/Explorer/ContainerCopy/Context/CopyJobContext.tsx

@@ -1,3 +1,5 @@
+import Explorer from "Explorer/Explorer";
+import { Subscription } from "Contracts/DataModels";
 import React from "react";
 import { userContext } from "UserContext";
 import { CopyJobMigrationType } from "../Enums/CopyJobEnums";
@@ -14,6 +16,7 @@ export const useCopyJobContext = (): CopyJobContextProviderType => {
 
 interface CopyJobContextProviderProps {
   children: React.ReactNode;
+  explorer: Explorer;
 }
 
 const getInitialCopyJobState = (): CopyJobContextState => {
@@ -21,8 +24,10 @@ const getInitialCopyJobState = (): CopyJobContextState => {
     jobName: "",
     migrationType: CopyJobMigrationType.Offline,
     source: {
-      subscription: null,
+      subscription: {
-      account: null,
+        subscriptionId: userContext.subscriptionId || "",
+      } as Subscription,
+      account: userContext.databaseAccount || null,
       databaseId: "",
       containerId: "",
     },
@@ -53,6 +58,7 @@ const CopyJobContextProvider: React.FC<CopyJobContextProviderProps> = (props) =>
     flow,
     setFlow,
     resetCopyJobState,
+    explorer: props.explorer,
   };
 
   return <CopyJobContext.Provider value={contextValue}>{props.children}</CopyJobContext.Provider>;

src/Explorer/ContainerCopy/CopyJobUtils.ts

@@ -1,5 +1,5 @@
 import { DatabaseAccount } from "Contracts/DataModels";
-import { CopyJobErrorType } from "./Types/CopyJobTypes";
+import { CopyJobContextState, CopyJobErrorType, CopyJobType } from "./Types/CopyJobTypes";
 
 const azurePortalMpacEndpoint = "https://ms.portal.azure.com/";
 
@@ -115,6 +115,14 @@ export function getAccountDetailsFromResourceId(accountId: string | undefined) {
   return { subscriptionId, resourceGroup, accountName };
 }
 
+export function getContainerIdentifiers(container: CopyJobContextState["source"] | CopyJobContextState["target"]) {
+  return {
+    accountId: container?.account?.id || "",
+    databaseId: container?.databaseId || "",
+    containerId: container?.containerId || "",
+  };
+}
+
 export function isIntraAccountCopy(sourceAccountId: string | undefined, targetAccountId: string | undefined): boolean {
   const sourceAccountDetails = getAccountDetailsFromResourceId(sourceAccountId);
   const targetAccountDetails = getAccountDetailsFromResourceId(targetAccountId);
@@ -124,3 +132,40 @@ export function isIntraAccountCopy(sourceAccountId: string | undefined, targetAc
     sourceAccountDetails?.accountName === targetAccountDetails?.accountName
   );
 }
+
+export function isEqual(prevJobs: CopyJobType[], newJobs: CopyJobType[]): boolean {
+  if (prevJobs.length !== newJobs.length) {
+    return false;
+  }
+  return prevJobs.every((prevJob: CopyJobType) => {
+    const newJob = newJobs.find((job) => job.Name === prevJob.Name);
+    if (!newJob) {
+      return false;
+    }
+    return prevJob.Status === newJob.Status;
+  });
+}
+
+const truncateLength = 5;
+const truncateName = (name: string, length: number = truncateLength): string => {
+  return name.length <= length ? name : name.slice(0, length);
+};
+
+export function getDefaultJobName(
+  selectedDatabaseAndContainers: {
+    sourceDatabaseName?: string;
+    sourceContainerName?: string;
+    targetDatabaseName?: string;
+    targetContainerName?: string;
+  }[],
+): string {
+  if (selectedDatabaseAndContainers.length === 1) {
+    const { sourceDatabaseName, sourceContainerName, targetDatabaseName, targetContainerName } =
+      selectedDatabaseAndContainers[0];
+    const timestamp = new Date().getTime().toString();
+    const sourcePart = `${truncateName(sourceDatabaseName)}.${truncateName(sourceContainerName)}`;
+    const targetPart = `${truncateName(targetDatabaseName)}.${truncateName(targetContainerName)}`;
+    return `${sourcePart}_${targetPart}_${timestamp}`;
+  }
+  return "";
+}

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

@@ -1,5 +1,5 @@
 import { Link, Stack, Text, Toggle } from "@fluentui/react";
-import React, { useCallback } from "react";
+import React from "react";
 import { logError } from "../../../../../Common/Logger";
 import { assignRole } from "../../../../../Utils/arm/RbacUtils";
 import ContainerCopyMessages from "../../../ContainerCopyMessages";
@@ -25,7 +25,7 @@ const AddReadPermissionToDefaultIdentity: React.FC<AddReadPermissionToDefaultIde
   const { copyJobState, setCopyJobState, setContextError } = useCopyJobContext();
   const [readPermissionAssigned, onToggle] = useToggle(false);
 
-  const handleAddReadPermission = useCallback(async () => {
+  const handleAddReadPermission = async () => {
     const { source, target } = copyJobState;
     const selectedSourceAccount = source?.account;
     try {
@@ -56,7 +56,7 @@ const AddReadPermissionToDefaultIdentity: React.FC<AddReadPermissionToDefaultIde
     } finally {
       setLoading(false);
     }
-  }, [copyJobState, setCopyJobState, setContextError]);
+  };
 
   return (
     <Stack className="defaultManagedIdentityContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>

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

@@ -8,7 +8,8 @@ import ContainerCopyMessages from "../../../ContainerCopyMessages";
 import { useCopyJobContext } from "../../../Context/CopyJobContext";
 import { isIntraAccountCopy } from "../../../CopyJobUtils";
 import { CopyJobMigrationType } from "../../../Enums/CopyJobEnums";
-import usePermissionSections, { PermissionSectionConfig } from "./hooks/usePermissionsSection";
+import { useCopyJobPrerequisitesCache } from "../../Utils/useCopyJobPrerequisitesCache";
+import usePermissionSections, { PermissionGroupConfig, PermissionSectionConfig } from "./hooks/usePermissionsSection";
 
 const PermissionSection: React.FC<PermissionSectionConfig> = ({ id, title, Component, completed, disabled }) => (
   <AccordionItem key={id} value={id} disabled={disabled}>
@@ -30,43 +31,91 @@ const PermissionSection: React.FC<PermissionSectionConfig> = ({ id, title, Compo
   </AccordionItem>
 );
 
-const AssignPermissions = () => {
+const PermissionGroup: React.FC<PermissionGroupConfig> = ({ title, description, sections }) => {
-  const { copyJobState } = useCopyJobContext();
-  const permissionSections = usePermissionSections(copyJobState);
   const [openItems, setOpenItems] = React.useState<string[]>([]);
 
+  useEffect(() => {
+    const firstIncompleteSection = sections.find((section) => !section.completed);
+    const nextOpenItems = firstIncompleteSection ? [firstIncompleteSection.id] : [];
+    if (JSON.stringify(openItems) !== JSON.stringify(nextOpenItems)) {
+      setOpenItems(nextOpenItems);
+    }
+  }, [sections]);
+
+  return (
+    <Stack
+      tokens={{ childrenGap: 15 }}
+      styles={{
+        root: {
+          background: "#fafafa",
+          border: "1px solid #e1e1e1",
+          borderRadius: 8,
+          padding: 16,
+          boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+        },
+      }}
+    >
+      <Stack tokens={{ childrenGap: 5 }}>
+        <Text variant="medium" style={{ fontWeight: 600 }}>
+          {title}
+        </Text>
+        {description && (
+          <Text variant="small" styles={{ root: { color: "#605E5C" } }}>
+            {description}
+          </Text>
+        )}
+      </Stack>
+
+      <Accordion className="permissionsAccordion" collapsible openItems={openItems}>
+        {sections.map((section) => (
+          <PermissionSection key={section.id} {...section} />
+        ))}
+      </Accordion>
+    </Stack>
+  );
+};
+
+const AssignPermissions = () => {
+  const { setValidationCache } = useCopyJobPrerequisitesCache();
+  const { copyJobState } = useCopyJobContext();
+  const permissionGroups = usePermissionSections(copyJobState);
+
+  const totalSectionsCount = React.useMemo(
+    () => permissionGroups.reduce((total, group) => total + group.sections.length, 0),
+    [permissionGroups],
+  );
+
   const indentLevels = React.useMemo<IndentLevel[]>(
     () => Array(copyJobState.migrationType === CopyJobMigrationType.Online ? 5 : 3).fill({ level: 0, width: "100%" }),
-    [],
+    [copyJobState.migrationType],
   );
 
   const isSameAccount = isIntraAccountCopy(copyJobState?.source?.account?.id, copyJobState?.target?.account?.id);
 
   useEffect(() => {
-    const firstIncompleteSection = permissionSections.find((section) => !section.completed);
+    return () => {
-    const nextOpenItems = firstIncompleteSection ? [firstIncompleteSection.id] : [];
+      setValidationCache(new Map<string, boolean>());
-    if (JSON.stringify(openItems) !== JSON.stringify(nextOpenItems)) {
+    };
-      setOpenItems(nextOpenItems);
+  }, []);
-    }
-  }, [permissionSections]);
 
   return (
-    <Stack className="assignPermissionsContainer" tokens={{ childrenGap: 15 }}>
+    <Stack className="assignPermissionsContainer" tokens={{ childrenGap: 20 }}>
-      <span>
+      <Text variant="medium">
         {isSameAccount && copyJobState.migrationType === CopyJobMigrationType.Online
           ? ContainerCopyMessages.assignPermissions.intraAccountOnlineDescription(
               copyJobState?.source?.account?.name || "",
             )
           : ContainerCopyMessages.assignPermissions.crossAccountDescription}
-      </span>
+      </Text>
-      {permissionSections?.length === 0 ? (
+
+      {totalSectionsCount === 0 ? (
         <ShimmerTree indentLevels={indentLevels} style={{ width: "100%" }} />
       ) : (
-        <Accordion className="permissionsAccordion" collapsible openItems={openItems}>
+        <Stack tokens={{ childrenGap: 25 }}>
-          {permissionSections.map((section) => (
+          {permissionGroups.map((group) => (
-            <PermissionSection key={section.id} {...section} />
+            <PermissionGroup key={group.id} {...group} />
           ))}
-        </Accordion>
+        </Stack>
       )}
     </Stack>
   );

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

@@ -1,8 +1,9 @@
 import { Link, PrimaryButton, Stack } from "@fluentui/react";
-import { CapabilityNames } from "Common/Constants";
 import { DatabaseAccount } from "Contracts/DataModels";
 import React from "react";
 import { fetchDatabaseAccount } from "Utils/arm/databaseAccountUtils";
+import { CapabilityNames } from "../../../../../Common/Constants";
+import LoadingOverlay from "../../../../../Common/LoadingOverlay";
 import { logError } from "../../../../../Common/Logger";
 import { update as updateDatabaseAccount } from "../../../../../Utils/arm/generatedClients/cosmos/databaseAccounts";
 import ContainerCopyMessages from "../../../ContainerCopyMessages";
@@ -19,6 +20,7 @@ const validatorFn: AccountValidatorFn = (prev: DatabaseAccount, next: DatabaseAc
 
 const OnlineCopyEnabled: React.FC = () => {
   const [loading, setLoading] = React.useState(false);
+  const [loaderMessage, setLoaderMessage] = React.useState("");
   const [showRefreshButton, setShowRefreshButton] = React.useState(false);
   const intervalRef = React.useRef<NodeJS.Timeout | null>(null);
   const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
@@ -74,6 +76,21 @@ const OnlineCopyEnabled: React.FC = () => {
     setShowRefreshButton(false);
 
     try {
+      setLoaderMessage(ContainerCopyMessages.onlineCopyEnabled.validateAllVersionsAndDeletesChangeFeedSpinnerLabel);
+      const sourAccountBeforeUpdate = await fetchDatabaseAccount(
+        sourceSubscriptionId,
+        sourceResourceGroup,
+        sourceAccountName,
+      );
+      if (!sourAccountBeforeUpdate?.properties.enableAllVersionsAndDeletesChangeFeed) {
+        setLoaderMessage(ContainerCopyMessages.onlineCopyEnabled.enablingAllVersionsAndDeletesChangeFeedSpinnerLabel);
+        await updateDatabaseAccount(sourceSubscriptionId, sourceResourceGroup, sourceAccountName, {
+          properties: {
+            enableAllVersionsAndDeletesChangeFeed: true,
+          },
+        });
+      }
+      setLoaderMessage(ContainerCopyMessages.onlineCopyEnabled.enablingOnlineCopySpinnerLabel(sourceAccountName));
       await updateDatabaseAccount(sourceSubscriptionId, sourceResourceGroup, sourceAccountName, {
         properties: {
           enableAllVersionsAndDeletesChangeFeed: true,
@@ -119,6 +136,7 @@ const OnlineCopyEnabled: React.FC = () => {
 
   return (
     <Stack className="onlineCopyContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
+      <LoadingOverlay isLoading={loading} label={loaderMessage} />
       <Stack.Item className="info-message">
         {ContainerCopyMessages.onlineCopyEnabled.description(source?.account?.name || "")}&ensp;
         <Link href={ContainerCopyMessages.onlineCopyEnabled.href} target="_blank" rel="noopener noreferrer">

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

@@ -2,6 +2,7 @@ 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 LoadingOverlay from "../../../../../Common/LoadingOverlay";
 import { logError } from "../../../../../Common/Logger";
 import ContainerCopyMessages from "../../../ContainerCopyMessages";
 import { useCopyJobContext } from "../../../Context/CopyJobContext";
@@ -84,9 +85,10 @@ const PointInTimeRestore: React.FC = () => {
     setShowRefreshButton(true);
   };
 
-  const handleRefresh = () => {
+  const handleRefresh = async () => {
     setLoading(true);
-    handleFetchAccount();
+    await handleFetchAccount();
+    setLoading(false);
   };
 
   const openWindowAndMonitor = () => {
@@ -108,6 +110,7 @@ const PointInTimeRestore: React.FC = () => {
 
   return (
     <Stack className="pointInTimeRestoreContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
+      <LoadingOverlay isLoading={loading} label={ContainerCopyMessages.popoverOverlaySpinnerLabel} />
       <Stack.Item className="toggle-label">
         {ContainerCopyMessages.pointInTimeRestore.description(source.account?.name ?? "")}
         {tooltipContent && (

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

@@ -44,10 +44,9 @@ const useManagedIdentity = (
       const errorMessage = error.message || "Error enabling system-assigned managed identity. Please try again later.";
       logError(errorMessage, "CopyJob/useManagedIdentity.handleAddSystemIdentity");
       setContextError(errorMessage);
-    } finally {
       setLoading(false);
     }
-  }, [copyJobState, updateIdentityFn, setCopyJobState]);
+  }, [copyJobState?.target?.account?.id, updateIdentityFn, setCopyJobState]);
 
   return { loading, handleAddSystemIdentity };
 };

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

@@ -2,7 +2,7 @@ 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, isIntraAccountCopy } from "../../../../CopyJobUtils";
+import { getAccountDetailsFromResourceId, getContainerIdentifiers, isIntraAccountCopy } from "../../../../CopyJobUtils";
 import {
   BackupPolicyType,
   CopyJobMigrationType,
@@ -26,6 +26,13 @@ export interface PermissionSectionConfig {
   validate?: (state: CopyJobContextState) => boolean | Promise<boolean>;
 }
 
+export interface PermissionGroupConfig {
+  id: string;
+  title: string;
+  description: string;
+  sections: PermissionSectionConfig[];
+}
+
 export const SECTION_IDS = {
   addManagedIdentity: "addManagedIdentity",
   defaultManagedIdentity: "defaultManagedIdentity",
@@ -127,26 +134,86 @@ export function checkTargetHasReaderRoleOnSource(roleDefinitions: RoleDefinition
 }
 
 /**
- * Returns the permission sections configuration for the Assign Permissions screen.
+ * Validates sections within a group sequentially.
- * Memoizes derived values for performance and decouples logic for testability.
  */
-const usePermissionSections = (state: CopyJobContextState): PermissionSectionConfig[] => {
+const validateSectionsInGroup = async (
-  const sourceAccountId = state?.source?.account?.id || "";
+  sections: PermissionSectionConfig[],
-  const targetAccountId = state?.target?.account?.id || "";
+  state: CopyJobContextState,
+  validationCache: Map<string, boolean>,
+): Promise<PermissionSectionConfig[]> => {
+  const result: PermissionSectionConfig[] = [];
+
+  for (let i = 0; i < sections.length; i++) {
+    const section = sections[i];
+
+    if (validationCache.has(section.id) && validationCache.get(section.id) === true) {
+      result.push({ ...section, completed: true });
+      continue;
+    }
+
+    if (section.validate) {
+      const isValid = await section.validate(state);
+      validationCache.set(section.id, isValid);
+      result.push({ ...section, completed: isValid });
+
+      if (!isValid) {
+        // Mark remaining sections in this group as incomplete
+        for (let j = i + 1; j < sections.length; j++) {
+          result.push({ ...sections[j], completed: false });
+        }
+        break;
+      }
+    } else {
+      validationCache.set(section.id, false);
+      result.push({ ...section, completed: false });
+    }
+  }
+
+  return result;
+};
+
+/**
+ * Returns the permission groups configuration for the Assign Permissions screen.
+ * Groups validate independently but sections within each group validate sequentially.
+ */
+const usePermissionSections = (state: CopyJobContextState): PermissionGroupConfig[] => {
+  const sourceAccount = getContainerIdentifiers(state.source);
+  const targetAccount = getContainerIdentifiers(state.target);
 
   const { validationCache, setValidationCache } = useCopyJobPrerequisitesCache();
-  const [permissionSections, setPermissionSections] = useState<PermissionSectionConfig[] | null>(null);
+  const [permissionGroups, setPermissionGroups] = useState<PermissionGroupConfig[] | null>(null);
   const isValidatingRef = useRef(false);
 
-  const sectionToValidate = useMemo(() => {
+  const groupsToValidate = useMemo(() => {
-    const isSameAccount = isIntraAccountCopy(sourceAccountId, targetAccountId);
+    const isSameAccount = isIntraAccountCopy(sourceAccount.accountId, targetAccount.accountId);
+    const crossAccountSections = isSameAccount ? [] : [...PERMISSION_SECTIONS_CONFIG];
+    const groups: PermissionGroupConfig[] = [];
+    const sourceAccountName = state.source?.account?.name || "";
+    const targetAccountName = state.target?.account?.name || "";
 
-    const baseSections = isSameAccount ? [] : [...PERMISSION_SECTIONS_CONFIG];
+    if (crossAccountSections.length > 0) {
-    if (state.migrationType === CopyJobMigrationType.Online) {
+      groups.push({
-      return [...baseSections, ...PERMISSION_SECTIONS_FOR_ONLINE_JOBS];
+        id: "crossAccountConfigs",
+        title: ContainerCopyMessages.assignPermissions.crossAccountConfiguration.title,
+        description: ContainerCopyMessages.assignPermissions.crossAccountConfiguration.description(
+          sourceAccountName,
+          targetAccountName,
+        ),
+        sections: crossAccountSections,
+      });
     }
-    return baseSections;
+
-  }, [sourceAccountId, targetAccountId, state.migrationType]);
+    if (state.migrationType === CopyJobMigrationType.Online) {
+      groups.push({
+        id: "onlineConfigs",
+        title: ContainerCopyMessages.assignPermissions.onlineConfiguration.title,
+        description: ContainerCopyMessages.assignPermissions.onlineConfiguration.description(sourceAccountName),
+        sections: [...PERMISSION_SECTIONS_FOR_ONLINE_JOBS],
+      });
+    }
+
+    return groups;
+  }, [sourceAccount.accountId, targetAccount.accountId, state.migrationType]);
 
   const memoizedValidationCache = useMemo(() => {
     if (state.migrationType === CopyJobMigrationType.Offline) {
@@ -157,52 +224,39 @@ const usePermissionSections = (state: CopyJobContextState): PermissionSectionCon
   }, [state.migrationType]);
 
   useEffect(() => {
-    const validateSections = async () => {
+    const validateGroups = async () => {
       if (isValidatingRef.current) {
         return;
       }
 
       isValidatingRef.current = true;
-      const result: PermissionSectionConfig[] = [];
       const newValidationCache = new Map(memoizedValidationCache);
 
-      for (let i = 0; i < sectionToValidate.length; i++) {
+      // Validate all groups independently (in parallel)
-        const section = sectionToValidate[i];
+      const validatedGroups = await Promise.all(
+        groupsToValidate.map(async (group) => {
+          const validatedSections = await validateSectionsInGroup(group.sections, state, newValidationCache);
 
-        if (newValidationCache.has(section.id) && newValidationCache.get(section.id) === true) {
+          return {
-          result.push({ ...section, completed: true });
+            ...group,
-          continue;
+            sections: validatedSections,
-        }
+          };
-        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);
+      setPermissionGroups(validatedGroups);
       isValidatingRef.current = false;
     };
 
-    validateSections();
+    validateGroups();
 
     return () => {
       isValidatingRef.current = false;
     };
-  }, [state, sectionToValidate]);
+  }, [state, groupsToValidate]);
 
-  return permissionSections ?? [];
+  return permissionGroups ?? [];
 };
 
 export default usePermissionSections;

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

@@ -2,6 +2,8 @@
 /* eslint-disable react/display-name */
 import { DefaultButton, PrimaryButton, Stack, Text } from "@fluentui/react";
 import React from "react";
+import LoadingOverlay from "../../../../../Common/LoadingOverlay";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
 
 interface PopoverContainerProps {
   isLoading?: boolean;
@@ -19,17 +21,13 @@ const PopoverContainer: React.FC<PopoverContainerProps> = React.memo(
         tokens={{ childrenGap: 20 }}
         style={{ maxWidth: 450 }}
       >
+        <LoadingOverlay isLoading={isLoading} label={ContainerCopyMessages.popoverOverlaySpinnerLabel} />
         <Text variant="mediumPlus" style={{ fontWeight: 600 }}>
           {title}
         </Text>
         <Text>{children}</Text>
         <Stack horizontal tokens={{ childrenGap: 20 }}>
-          <PrimaryButton
+          <PrimaryButton text={"Yes"} onClick={onPrimary} disabled={isLoading} />
-            text={isLoading ? "" : "Yes"}
-            {...(isLoading ? { iconProps: { iconName: "SyncStatusSolid" } } : {})}
-            onClick={onPrimary}
-            disabled={isLoading}
-          />
           <DefaultButton text="No" onClick={onCancel} disabled={isLoading} />
         </Stack>
       </Stack>

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

@@ -0,0 +1,53 @@
+import { Stack, Text } from "@fluentui/react";
+import Explorer from "Explorer/Explorer";
+import { useSidePanel } from "hooks/useSidePanel";
+import { produce } from "immer";
+import React, { useCallback, useEffect } from "react";
+import { AddCollectionPanel } from "../../../../Panes/AddCollectionPanel/AddCollectionPanel";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+
+type AddCollectionPanelWrapperProps = {
+  explorer?: Explorer;
+  goBack?: () => void;
+};
+
+const AddCollectionPanelWrapper: React.FunctionComponent<AddCollectionPanelWrapperProps> = ({ explorer, goBack }) => {
+  const { setCopyJobState } = useCopyJobContext();
+
+  useEffect(() => {
+    const sidePanelStore = useSidePanel.getState();
+    if (sidePanelStore.headerText !== ContainerCopyMessages.createContainerHeading) {
+      sidePanelStore.setHeaderText(ContainerCopyMessages.createContainerHeading);
+    }
+    return () => {
+      sidePanelStore.setHeaderText(ContainerCopyMessages.createCopyJobPanelTitle);
+    };
+  }, []);
+
+  const handleAddCollectionSuccess = useCallback(
+    (collectionData: { databaseId: string; collectionId: string }) => {
+      setCopyJobState(
+        produce((state) => {
+          state.target.databaseId = collectionData.databaseId;
+          state.target.containerId = collectionData.collectionId;
+        }),
+      );
+      goBack?.();
+    },
+    [goBack],
+  );
+
+  return (
+    <Stack className="addCollectionPanelWrapper">
+      <Stack.Item className="addCollectionPanelHeader">
+        <Text>{ContainerCopyMessages.createNewContainerSubHeading}</Text>
+      </Stack.Item>
+      <Stack.Item className="addCollectionPanelBody">
+        <AddCollectionPanel explorer={explorer} isCopyJobFlow={true} onSubmitSuccess={handleAddCollectionSuccess} />
+      </Stack.Item>
+    </Stack>
+  );
+};
+
+export default AddCollectionPanelWrapper;

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

@@ -13,6 +13,7 @@ const CreateCopyJobScreens: React.FC = () => {
     handlePrevious,
     handleCancel,
     primaryBtnText,
+    showAddCollectionPanel,
   } = useCopyJobNavigation();
   const { contextError, setContextError } = useCopyJobContext();
 
@@ -32,7 +33,7 @@ const CreateCopyJobScreens: React.FC = () => {
             {contextError}
           </MessageBar>
         )}
-        {currentScreen?.component}
+        {React.cloneElement(currentScreen?.component as React.ReactElement, { showAddCollectionPanel })}
       </Stack.Item>
       <Stack.Item className="createCopyJobScreensFooter">
         <NavigationControls

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

@@ -1,10 +1,11 @@
+import Explorer from "Explorer/Explorer";
 import React from "react";
 import CopyJobContextProvider from "../../Context/CopyJobContext";
 import CreateCopyJobScreens from "./CreateCopyJobScreens";
 
-const CreateCopyJobScreensProvider = () => {
+const CreateCopyJobScreensProvider = ({ explorer }: { explorer: Explorer }) => {
   return (
-    <CopyJobContextProvider>
+    <CopyJobContextProvider explorer={explorer}>
       <CreateCopyJobScreens />
     </CopyJobContextProvider>
   );

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

@@ -1,8 +1,9 @@
 import { DetailsList, DetailsListLayoutMode, Stack, Text, TextField } from "@fluentui/react";
-import FieldRow from "Explorer/ContainerCopy/CreateCopyJob/Screens/Components/FieldRow";
+import React, { useEffect } from "react";
-import React from "react";
 import ContainerCopyMessages from "../../../ContainerCopyMessages";
 import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { getDefaultJobName } from "../../../CopyJobUtils";
+import FieldRow from "../Components/FieldRow";
 import { getPreviewCopyJobDetailsListColumns } from "./Utils/PreviewCopyJobUtils";
 
 const PreviewCopyJob: React.FC = () => {
@@ -16,6 +17,11 @@ const PreviewCopyJob: React.FC = () => {
       targetContainerName: copyJobState.target?.containerId,
     },
   ];
+
+  useEffect(() => {
+    onJobNameChange(undefined, getDefaultJobName(selectedDatabaseAndContainers));
+  }, []);
+
   const jobName = copyJobState.jobName;
 
   const onJobNameChange = (_ev?: React.FormEvent, newValue?: string) => {

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

@@ -27,4 +27,5 @@ export const AccountDropdown: React.FC<AccountDropdownProps> = React.memo(
       />
     </FieldRow>
   ),
+  (prev, next) => prev.options.length === next.options.length && prev.selectedKey === next.selectedKey,
 );

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

@@ -25,4 +25,5 @@ export const SubscriptionDropdown: React.FC<SubscriptionDropdownProps> = React.m
       />
     </FieldRow>
   ),
+  (prev, next) => prev.options.length === next.options.length && prev.selectedKey === next.selectedKey,
 );

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

@@ -16,6 +16,7 @@ import { useDropdownOptions, useEventHandlers } from "./Utils/selectAccountUtils
 const SelectAccount = React.memo(() => {
   const { copyJobState, setCopyJobState } = useCopyJobContext();
   const selectedSubscriptionId = copyJobState?.source?.subscription?.subscriptionId;
+  const selectedSourceAccountId = copyJobState?.source?.account?.id;
 
   const subscriptions: Subscription[] = useSubscriptions();
   const allAccounts: DatabaseAccount[] = useDatabaseAccounts(selectedSubscriptionId);
@@ -38,7 +39,7 @@ const SelectAccount = React.memo(() => {
 
       <AccountDropdown
         options={accountOptions}
-        selectedKey={copyJobState?.source?.account?.id}
+        selectedKey={selectedSourceAccountId}
         disabled={!selectedSubscriptionId}
         onChange={(_ev, option) => handleSelectSourceAccount("account", option?.data)}
       />

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

@@ -11,25 +11,19 @@ export function useDropdownOptions(
   subscriptionOptions: DropdownOptionType[];
   accountOptions: DropdownOptionType[];
 } {
-  const subscriptionOptions = React.useMemo(
+  const subscriptionOptions =
-    () =>
+    subscriptions?.map((sub) => ({
-      subscriptions?.map((sub) => ({
+      key: sub.subscriptionId,
-        key: sub.subscriptionId,
+      text: sub.displayName,
-        text: sub.displayName,
+      data: sub,
-        data: sub,
+    })) || [];
-      })) || [],
-    [subscriptions],
-  );
 
-  const accountOptions = React.useMemo(
+  const accountOptions =
-    () =>
+    accounts?.map((account) => ({
-      accounts?.map((account) => ({
+      key: account.id,
-        key: account.id,
+      text: account.name,
-        text: account.name,
+      data: account,
-        data: account,
+    })) || [];
-      })) || [],
-    [accounts],
-  );
 
   return { subscriptionOptions, accountOptions };
 }
@@ -38,45 +32,42 @@ type setCopyJobStateType = CopyJobContextProviderType["setCopyJobState"];
 
 export function useEventHandlers(setCopyJobState: setCopyJobStateType) {
   const { setValidationCache } = useCopyJobPrerequisitesCache();
-  const handleSelectSourceAccount = React.useCallback(
+  const handleSelectSourceAccount = (
-    (type: "subscription" | "account", data: (Subscription & DatabaseAccount) | undefined) => {
+    type: "subscription" | "account",
-      setCopyJobState((prevState: CopyJobContextState) => {
+    data: (Subscription & DatabaseAccount) | undefined,
-        if (type === "subscription") {
+  ) => {
-          return {
+    setCopyJobState((prevState: CopyJobContextState) => {
-            ...prevState,
+      if (type === "subscription") {
-            source: {
+        return {
-              ...prevState.source,
+          ...prevState,
-              subscription: data || null,
+          source: {
-              account: null,
+            ...prevState.source,
-            },
+            subscription: data || null,
-          };
+            account: null,
-        }
+          },
-        if (type === "account") {
+        };
-          return {
+      }
-            ...prevState,
+      if (type === "account") {
-            source: {
+        return {
-              ...prevState.source,
+          ...prevState,
-              account: data || null,
+          source: {
-            },
+            ...prevState.source,
-          };
+            account: data || null,
-        }
+          },
-        return prevState;
+        };
-      });
+      }
-      setValidationCache(new Map<string, boolean>());
+      return prevState;
-    },
+    });
-    [setCopyJobState, setValidationCache],
+    setValidationCache(new Map<string, boolean>());
-  );
+  };
 
-  const handleMigrationTypeChange = React.useCallback(
+  const handleMigrationTypeChange = React.useCallback((_ev?: React.FormEvent<HTMLElement>, checked?: boolean) => {
-    (_ev?: React.FormEvent<HTMLElement>, checked?: boolean) => {
+    setCopyJobState((prevState: CopyJobContextState) => ({
-      setCopyJobState((prevState: CopyJobContextState) => ({
+      ...prevState,
-        ...prevState,
+      migrationType: checked ? CopyJobMigrationType.Offline : CopyJobMigrationType.Online,
-        migrationType: checked ? CopyJobMigrationType.Offline : CopyJobMigrationType.Online,
+    }));
-      }));
+    setValidationCache(new Map<string, boolean>());
-      setValidationCache(new Map<string, boolean>());
+  }, []);
-    },
-    [setCopyJobState, setValidationCache],
-  );
 
   return { handleSelectSourceAccount, handleMigrationTypeChange };
 }

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

@@ -7,36 +7,44 @@ import ContainerCopyMessages from "../../../ContainerCopyMessages";
 import { useCopyJobContext } from "../../../Context/CopyJobContext";
 import { DatabaseContainerSection } from "./components/DatabaseContainerSection";
 import { dropDownChangeHandler } from "./Events/DropDownChangeHandler";
-import { useMemoizedSourceAndTargetData } from "./memoizedData";
+import { useSourceAndTargetData } from "./memoizedData";
 
-const SelectSourceAndTargetContainers = () => {
+type SelectSourceAndTargetContainers = {
+  showAddCollectionPanel?: () => void;
+};
+
+const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourceAndTargetContainers) => {
   const { copyJobState, setCopyJobState } = useCopyJobContext();
   const { source, target, sourceDbParams, sourceContainerParams, targetDbParams, targetContainerParams } =
-    useMemoizedSourceAndTargetData(copyJobState);
+    useSourceAndTargetData(copyJobState);
 
-  const sourceDatabases = useDatabases(...sourceDbParams) || [];
+  if (!source) {
-  const sourceContainers = useDataContainers(...sourceContainerParams) || [];
+    return null;
-  const targetDatabases = useDatabases(...targetDbParams) || [];
+  }
-  const targetContainers = useDataContainers(...targetContainerParams) || [];
+
+  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?.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?.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?.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?.map((c: DatabaseModel) => ({ key: c.name, text: c.name, data: c })) || [],
     [targetContainers],
   );
 
-  const onDropdownChange = React.useCallback(dropDownChangeHandler(setCopyJobState), [setCopyJobState]);
+  const onDropdownChange = dropDownChangeHandler(setCopyJobState);
 
   return (
     <Stack className="selectSourceAndTargetContainers" tokens={{ childrenGap: 25 }}>
@@ -62,6 +70,7 @@ const SelectSourceAndTargetContainers = () => {
         selectedContainer={target?.containerId}
         containerDisabled={!target?.databaseId}
         containerOnChange={onDropdownChange("targetContainer")}
+        handleOnDemandCreateContainer={showAddCollectionPanel}
       />
     </Stack>
   );

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

@@ -1,4 +1,4 @@
-import { Dropdown, Stack } from "@fluentui/react";
+import { ActionButton, Dropdown, Stack } from "@fluentui/react";
 import React from "react";
 import ContainerCopyMessages from "../../../../ContainerCopyMessages";
 import { DatabaseContainerSectionProps } from "../../../../Types/CopyJobTypes";
@@ -14,6 +14,7 @@ export const DatabaseContainerSection = ({
   selectedContainer,
   containerDisabled,
   containerOnChange,
+  handleOnDemandCreateContainer,
 }: DatabaseContainerSectionProps) => (
   <Stack tokens={{ childrenGap: 15 }} className="databaseContainerSection">
     <label className="subHeading">{heading}</label>
@@ -29,15 +30,22 @@ export const DatabaseContainerSection = ({
       />
     </FieldRow>
     <FieldRow label={ContainerCopyMessages.containerDropdownLabel}>
-      <Dropdown
+      <Stack>
-        placeholder={ContainerCopyMessages.containerDropdownPlaceholder}
+        <Dropdown
-        ariaLabel={ContainerCopyMessages.containerDropdownLabel}
+          placeholder={ContainerCopyMessages.containerDropdownPlaceholder}
-        options={containerOptions}
+          ariaLabel={ContainerCopyMessages.containerDropdownLabel}
-        required
+          options={containerOptions}
-        disabled={!!containerDisabled}
+          required
-        selectedKey={selectedContainer}
+          disabled={!!containerDisabled}
-        onChange={containerOnChange}
+          selectedKey={selectedContainer}
-      />
+          onChange={containerOnChange}
+        />
+        {handleOnDemandCreateContainer && (
+          <ActionButton className="create-container-link-btn" onClick={() => handleOnDemandCreateContainer()}>
+            {ContainerCopyMessages.createContainerButtonLabel}
+          </ActionButton>
+        )}
+      </Stack>
     </FieldRow>
   </Stack>
 );

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

@@ -1,8 +1,7 @@
-import React from "react";
 import { getAccountDetailsFromResourceId } from "../../../CopyJobUtils";
 import { CopyJobContextState, DatabaseParams, DataContainerParams } from "../../../Types/CopyJobTypes";
 
-export function useMemoizedSourceAndTargetData(copyJobState: CopyJobContextState) {
+export function useSourceAndTargetData(copyJobState: CopyJobContextState) {
   const { source, target } = copyJobState ?? {};
   const selectedSourceAccount = source?.account;
   const selectedTargetAccount = target?.account;
@@ -17,27 +16,22 @@ export function useMemoizedSourceAndTargetData(copyJobState: CopyJobContextState
     accountName: targetAccountName,
   } = getAccountDetailsFromResourceId(selectedTargetAccount?.id);
 
-  const sourceDbParams = React.useMemo(
+  const sourceDbParams = [sourceSubscriptionId, sourceResourceGroup, sourceAccountName, "SQL"] as DatabaseParams;
-    () => [sourceSubscriptionId, sourceResourceGroup, sourceAccountName, "SQL"] as DatabaseParams,
+  const sourceContainerParams = [
-    [sourceSubscriptionId, sourceResourceGroup, sourceAccountName],
+    sourceSubscriptionId,
-  );
+    sourceResourceGroup,
-
+    sourceAccountName,
-  const sourceContainerParams = React.useMemo(
+    source?.databaseId,
-    () =>
+    "SQL",
-      [sourceSubscriptionId, sourceResourceGroup, sourceAccountName, source?.databaseId, "SQL"] as DataContainerParams,
+  ] as DataContainerParams;
-    [sourceSubscriptionId, sourceResourceGroup, sourceAccountName, source?.databaseId],
+  const targetDbParams = [targetSubscriptionId, targetResourceGroup, targetAccountName, "SQL"] as DatabaseParams;
-  );
+  const targetContainerParams = [
-
+    targetSubscriptionId,
-  const targetDbParams = React.useMemo(
+    targetResourceGroup,
-    () => [targetSubscriptionId, targetResourceGroup, targetAccountName, "SQL"] as DatabaseParams,
+    targetAccountName,
-    [targetSubscriptionId, targetResourceGroup, targetAccountName],
+    target?.databaseId,
-  );
+    "SQL",
-
+  ] as DataContainerParams;
-  const targetContainerParams = React.useMemo(
-    () =>
-      [targetSubscriptionId, targetResourceGroup, targetAccountName, target?.databaseId, "SQL"] as DataContainerParams,
-    [targetSubscriptionId, targetResourceGroup, targetAccountName, target?.databaseId],
-  );
 
   return { source, target, sourceDbParams, sourceContainerParams, targetDbParams, targetContainerParams };
 }

src/Explorer/ContainerCopy/CreateCopyJob/Utils/useCopyJobNavigation.ts

@@ -2,7 +2,7 @@ import { useCallback, useMemo, useReducer, useState } from "react";
 import { useSidePanel } from "../../../../hooks/useSidePanel";
 import { submitCreateCopyJob } from "../../Actions/CopyJobActions";
 import { useCopyJobContext } from "../../Context/CopyJobContext";
-import { isIntraAccountCopy } from "../../CopyJobUtils";
+import { getContainerIdentifiers, isIntraAccountCopy } from "../../CopyJobUtils";
 import { CopyJobMigrationType } from "../../Enums/CopyJobEnums";
 import { useCopyJobPrerequisitesCache } from "./useCopyJobPrerequisitesCache";
 import { SCREEN_KEYS, useCreateCopyJobScreensList } from "./useCreateCopyJobScreensList";
@@ -35,10 +35,14 @@ function navigationReducer(state: NavigationState, action: Action): NavigationSt
 export function useCopyJobNavigation() {
   const [isLoading, setIsLoading] = useState(false);
   const { copyJobState, resetCopyJobState, setContextError } = useCopyJobContext();
-  const screens = useCreateCopyJobScreensList();
   const { validationCache: cache } = useCopyJobPrerequisitesCache();
   const [state, dispatch] = useReducer(navigationReducer, { screenHistory: [SCREEN_KEYS.SelectAccount] });
 
+  const handlePrevious = useCallback(() => {
+    dispatch({ type: "PREVIOUS" });
+  }, [dispatch]);
+
+  const screens = useCreateCopyJobScreensList(handlePrevious);
   const currentScreenKey = state.screenHistory[state.screenHistory.length - 1];
   const currentScreen = screens.find((screen) => screen.key === currentScreenKey);
 
@@ -51,7 +55,9 @@ export function useCopyJobNavigation() {
   }, [currentScreen.key, copyJobState, cache, isLoading]);
 
   const primaryBtnText = useMemo(() => {
-    if (currentScreenKey === SCREEN_KEYS.PreviewCopyJob) {
+    if (currentScreenKey === SCREEN_KEYS.CreateCollection) {
+      return "Create";
+    } else if (currentScreenKey === SCREEN_KEYS.PreviewCopyJob) {
       return "Copy";
     }
     return "Next";
@@ -65,12 +71,6 @@ export function useCopyJobNavigation() {
     useSidePanel.getState().closeSidePanel();
   }, []);
 
-  const getContainerIdentifiers = (container: typeof copyJobState.source | typeof copyJobState.target) => ({
-    accountId: container?.account?.id || "",
-    databaseId: container?.databaseId || "",
-    containerId: container?.containerId || "",
-  });
-
   const areContainersIdentical = () => {
     const { source, target } = copyJobState;
     const sourceIds = getContainerIdentifiers(source);
@@ -107,7 +107,26 @@ export function useCopyJobNavigation() {
     }
   };
 
+  const handleAddCollectionPanelSubmit = () => {
+    const form = document.getElementById("panelContainer") as HTMLFormElement;
+    if (form) {
+      const submitEvent = new Event("submit", {
+        bubbles: true,
+        cancelable: true,
+      });
+      form.dispatchEvent(submitEvent);
+    }
+  };
+
+  const showAddCollectionPanel = useCallback(() => {
+    dispatch({ type: "NEXT", nextScreen: SCREEN_KEYS.CreateCollection });
+  }, [dispatch]);
+
   const handlePrimary = useCallback(() => {
+    if (currentScreenKey === SCREEN_KEYS.CreateCollection) {
+      handleAddCollectionPanelSubmit();
+      return;
+    }
     if (currentScreenKey === SCREEN_KEYS.SelectSourceAndTargetContainers && areContainersIdentical()) {
       setContextError(
         "Source and destination containers cannot be the same. Please select different containers to proceed.",
@@ -132,10 +151,6 @@ export function useCopyJobNavigation() {
     }
   }, [currentScreenKey, copyJobState, areContainersIdentical, handleCopyJobSubmission]);
 
-  const handlePrevious = useCallback(() => {
-    dispatch({ type: "PREVIOUS" });
-  }, []);
-
   return {
     currentScreen,
     isPrimaryDisabled,
@@ -143,6 +158,7 @@ export function useCopyJobNavigation() {
     handlePrimary,
     handlePrevious,
     handleCancel,
+    showAddCollectionPanel,
     primaryBtnText,
   };
 }

src/Explorer/ContainerCopy/CreateCopyJob/Utils/useCreateCopyJobScreensList.tsx

@@ -1,11 +1,14 @@
 import React from "react";
+import { useCopyJobContext } from "../../Context/CopyJobContext";
 import { CopyJobContextState } from "../../Types/CopyJobTypes";
 import AssignPermissions from "../Screens/AssignPermissions/AssignPermissions";
+import AddCollectionPanelWrapper from "../Screens/CreateContainer/AddCollectionPanelWrapper";
 import PreviewCopyJob from "../Screens/PreviewCopyJob/PreviewCopyJob";
 import SelectAccount from "../Screens/SelectAccount/SelectAccount";
 import SelectSourceAndTargetContainers from "../Screens/SelectSourceAndTargetContainers/SelectSourceAndTargetContainers";
 
 const SCREEN_KEYS = {
+  CreateCollection: "CreateCollection",
   SelectAccount: "SelectAccount",
   SelectSourceAndTargetContainers: "SelectSourceAndTargetContainers",
   PreviewCopyJob: "PreviewCopyJob",
@@ -23,7 +26,9 @@ type Screen = {
   validations: Validation[];
 };
 
-function useCreateCopyJobScreensList() {
+function useCreateCopyJobScreensList(goBack: () => void): Screen[] {
+  const { explorer } = useCopyJobContext();
+
   return React.useMemo<Screen[]>(
     () => [
       {
@@ -50,13 +55,18 @@ function useCreateCopyJobScreensList() {
           },
         ],
       },
+      {
+        key: SCREEN_KEYS.CreateCollection,
+        component: <AddCollectionPanelWrapper explorer={explorer} goBack={goBack} />,
+        validations: [],
+      },
       {
         key: SCREEN_KEYS.PreviewCopyJob,
         component: <PreviewCopyJob />,
         validations: [
           {
             validate: (state: CopyJobContextState) =>
-              !!(typeof state?.jobName === "string" && state?.jobName && /^[a-zA-Z0-9-.]+$/.test(state?.jobName)),
+              !!(typeof state?.jobName === "string" && state?.jobName && /^[a-zA-Z0-9-._]+$/.test(state?.jobName)),
             message: "Please enter a job name to proceed",
           },
         ],
@@ -80,7 +90,7 @@ function useCreateCopyJobScreensList() {
         ],
       },
     ],
-    [],
+    [explorer],
   );
 }
 

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

@@ -1,4 +1,5 @@
 import { FontIcon, getTheme, mergeStyles, mergeStyleSets, Spinner, SpinnerSize, Stack, Text } from "@fluentui/react";
+import PropTypes from "prop-types";
 import React from "react";
 import ContainerCopyMessages from "../../ContainerCopyMessages";
 import { CopyJobStatusType } from "../../Enums/CopyJobEnums";
@@ -34,7 +35,11 @@ const iconMap: Partial<Record<CopyJobStatusType, string>> = {
   [CopyJobStatusType.Completed]: "CompletedSolid",
 };
 
-const CopyJobStatusWithIcon: React.FC<{ status: CopyJobStatusType }> = ({ status }) => {
+export interface CopyJobStatusWithIconProps {
+  status: CopyJobStatusType;
+}
+
+const CopyJobStatusWithIcon: React.FC<CopyJobStatusWithIconProps> = React.memo(({ status }) => {
   const statusText = ContainerCopyMessages.MonitorJobs.Status[status] || "Unknown";
 
   const isSpinnerStatus = [
@@ -57,6 +62,11 @@ const CopyJobStatusWithIcon: React.FC<{ status: CopyJobStatusType }> = ({ status
       <Text>{statusText}</Text>
     </Stack>
   );
+});
+
+CopyJobStatusWithIcon.displayName = "CopyJobStatusWithIcon";
+CopyJobStatusWithIcon.propTypes = {
+  status: PropTypes.oneOf(Object.values(CopyJobStatusType)).isRequired,
 };
 
 export default CopyJobStatusWithIcon;

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobs.NotFound.tsx

@@ -1,22 +1,28 @@
 import { ActionButton, Image } from "@fluentui/react";
-import React, { useCallback } from "react";
+import Explorer from "Explorer/Explorer";
+import React from "react";
 import CopyJobIcon from "../../../../../images/ContainerCopy/copy-jobs.svg";
 import * as Actions from "../../Actions/CopyJobActions";
 import ContainerCopyMessages from "../../ContainerCopyMessages";
 
-interface CopyJobsNotFoundProps {}
+interface CopyJobsNotFoundProps {
+  explorer: Explorer;
+}
 
-const CopyJobsNotFound: React.FC<CopyJobsNotFoundProps> = () => {
+const CopyJobsNotFound: React.FC<CopyJobsNotFoundProps> = ({ explorer }) => {
-  const handleCreateCopyJob = useCallback(Actions.openCreateCopyJobPanel, []);
   return (
     <div className="notFoundContainer flexContainer centerContent">
       <Image src={CopyJobIcon} alt={ContainerCopyMessages.noCopyJobsTitle} width={100} height={100} />
       <h4 className="noCopyJobsMessage">{ContainerCopyMessages.noCopyJobsTitle}</h4>
-      <ActionButton allowDisabledFocus className="createCopyJobButton" onClick={handleCreateCopyJob}>
+      <ActionButton
+        allowDisabledFocus
+        className="createCopyJobButton"
+        onClick={Actions.openCreateCopyJobPanel.bind(null, explorer)}
+      >
         {ContainerCopyMessages.createCopyJobButtonText}
       </ActionButton>
     </div>
   );
 };
 
-export default CopyJobsNotFound;
+export default React.memo(CopyJobsNotFound);

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

@@ -1,9 +1,11 @@
 /*  eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react/prop-types */
 import {
   ConstrainMode,
   DetailsListLayoutMode,
   DetailsRow,
   IColumn,
+  IDetailsRowProps,
   ScrollablePane,
   ScrollbarVisibility,
   ShimmeredDetailsList,
@@ -58,22 +60,19 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
     setStartIndex(0);
   };
 
-  const columns: IColumn[] = React.useMemo(
+  const columns: IColumn[] = getColumns(handleSort, handleActionClick, sortedColumnKey, isSortedDescending);
-    () => getColumns(handleSort, handleActionClick, sortedColumnKey, isSortedDescending),
-    [handleSort, handleActionClick, sortedColumnKey, isSortedDescending],
-  );
 
-  const _handleRowClick = React.useCallback((job: CopyJobType) => {
+  const _handleRowClick = (job: CopyJobType) => {
     openCopyJobDetailsPanel(job);
-  }, []);
+  };
 
-  const _onRenderRow = React.useCallback((props: any) => {
+  const _onRenderRow = (props: IDetailsRowProps) => {
     return (
       <div onClick={_handleRowClick.bind(null, props.item)}>
         <DetailsRow {...props} styles={{ root: { cursor: "pointer" } }} />
       </div>
     );
-  }, []);
+  };
 
   return (
     <div style={styles.container}>

src/Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobs.tsx

@@ -1,31 +1,33 @@
 /* eslint-disable react/display-name */
 import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
 import ShimmerTree, { IndentLevel } from "Common/ShimmerTree/ShimmerTree";
+import Explorer from "Explorer/Explorer";
 import React, { forwardRef, useEffect, useImperativeHandle } from "react";
 import { getCopyJobs, updateCopyJobStatus } from "../Actions/CopyJobActions";
-import { convertToCamelCase } from "../CopyJobUtils";
+import { convertToCamelCase, isEqual } from "../CopyJobUtils";
 import { CopyJobStatusType } from "../Enums/CopyJobEnums";
 import CopyJobsNotFound from "../MonitorCopyJobs/Components/CopyJobs.NotFound";
 import { CopyJobType, JobActionUpdatorType } from "../Types/CopyJobTypes";
 import CopyJobsList from "./Components/CopyJobsList";
 
 const FETCH_INTERVAL_MS = 30 * 1000;
+const SHIMMER_INDENT_LEVELS: IndentLevel[] = Array(7).fill({ level: 0, width: "100%" });
 
-interface MonitorCopyJobsProps {}
+interface MonitorCopyJobsProps {
+  explorer: Explorer;
+}
 
 export interface MonitorCopyJobsRef {
   refreshJobList: () => void;
 }
 
-const MonitorCopyJobs = forwardRef<MonitorCopyJobsRef, MonitorCopyJobsProps>((_props, ref) => {
+const MonitorCopyJobs = forwardRef<MonitorCopyJobsRef, MonitorCopyJobsProps>(({ explorer }, ref) => {
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
   const [jobs, setJobs] = React.useState<CopyJobType[]>([]);
   const isUpdatingRef = React.useRef(false);
   const isFirstFetchRef = React.useRef(true);
 
-  const indentLevels = React.useMemo<IndentLevel[]>(() => Array(7).fill({ level: 0, width: "100%" }), []);
-
   const fetchJobs = React.useCallback(async () => {
     if (isUpdatingRef.current) {
       return;
@@ -38,8 +40,7 @@ const MonitorCopyJobs = forwardRef<MonitorCopyJobsRef, MonitorCopyJobsProps>((_p
 
       const response = await getCopyJobs();
       setJobs((prevJobs) => {
-        const isSame = JSON.stringify(prevJobs) === JSON.stringify(response);
+        return isEqual(prevJobs, response) ? prevJobs : response;
-        return isSame ? prevJobs : response;
       });
     } catch (error) {
       setError(error.message || "Failed to load copy jobs. Please try again later.");
@@ -96,25 +97,27 @@ const MonitorCopyJobs = forwardRef<MonitorCopyJobsRef, MonitorCopyJobsProps>((_p
     [],
   );
 
-  const memoizedJobsList = React.useMemo(() => {
+  const renderJobsList = () => {
     if (loading) {
       return null;
     }
     if (jobs.length > 0) {
       return <CopyJobsList jobs={jobs} handleActionClick={handleActionClick} />;
     }
-    return <CopyJobsNotFound />;
+    return <CopyJobsNotFound explorer={explorer} />;
-  }, [jobs, loading, handleActionClick]);
+  };
 
   return (
     <Stack className="monitorCopyJobs flexContainer">
-      {loading && <ShimmerTree indentLevels={indentLevels} style={{ width: "100%", padding: "1rem 2.5rem" }} />}
+      {loading && (
+        <ShimmerTree indentLevels={SHIMMER_INDENT_LEVELS} style={{ width: "100%", padding: "1rem 2.5rem" }} />
+      )}
       {error && (
         <MessageBar messageBarType={MessageBarType.error} isMultiline={false} onDismiss={() => setError(null)}>
           {error}
         </MessageBar>
       )}
-      {memoizedJobsList}
+      {renderJobsList()}
     </Stack>
   );
 });

src/Explorer/ContainerCopy/Types/CopyJobTypes.ts

@@ -6,7 +6,7 @@ import Explorer from "../../Explorer";
 import { CopyJobMigrationType, CopyJobStatusType } from "../Enums/CopyJobEnums";
 
 export interface ContainerCopyProps {
-  container: Explorer;
+  explorer: Explorer;
 }
 
 export type CopyJobCommandBarBtnType = {
@@ -48,6 +48,7 @@ export interface DatabaseContainerSectionProps {
   selectedContainer: string;
   containerDisabled?: boolean;
   containerOnChange: (ev: React.FormEvent<HTMLDivElement>, option: DropdownOptionType) => void;
+  handleOnDemandCreateContainer?: () => void;
 }
 
 export interface CopyJobContextState {
@@ -80,6 +81,7 @@ export interface CopyJobContextProviderType {
   copyJobState: CopyJobContextState | null;
   setCopyJobState: React.Dispatch<React.SetStateAction<CopyJobContextState>>;
   resetCopyJobState: () => void;
+  explorer?: Explorer;
 }
 
 export type CopyJobType = {

src/Explorer/ContainerCopy/containerCopyStyles.less

@@ -19,6 +19,10 @@
 .createCopyJobScreensContainer {
   height: 100%;
   padding: 1em 1.5em;
+
+  .pointInTimeRestoreContainer, .onlineCopyContainer {
+    position: relative;
+  }
   
   label {
     padding: 0;
@@ -59,6 +63,7 @@
     }
   }
   .popover-container {
+    border-radius: 6px;
     button[disabled] {
       cursor: not-allowed;
       opacity: 0.8;
@@ -66,7 +71,7 @@
   }
   .foreground {
     z-index: 10;
-    background-color: white;
+    background-color: #f9f9f9;
     padding: 20px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     transform: translate(0%, -9%);
@@ -75,6 +80,24 @@
   .createCopyJobErrorMessageBar {
     margin-bottom: 2em;
   }
+  .create-container-link-btn {
+    padding: 0;
+    height: 25px;
+    color: @LinkColor;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  /* Create collection panel */
+  .panelFormWrapper .panelMainContent {
+    padding: 0;
+  }
+
+  .createCopyJobScreensFooter {
+    margin-top: 50px;
+  }
 }
 
 .monitorCopyJobs {
@@ -118,8 +141,9 @@
 
         .jobNameLink {
           color: @LinkColor;
-          text-decoration: underline;
+          text-overflow: ellipsis;
-          cursor: pointer;
+          white-space: nowrap;
+          overflow: hidden;
         }
       }
     }

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -286,6 +286,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
               </Stack>
               <TextField
                 id="autoscaleRUValueField"
+                data-test="autoscaleRUInput"
                 type="number"
                 styles={{
                   fieldGroup: { width: 100, height: 27, flexShrink: 0 },

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -2144,6 +2144,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                 </Stack>
                 <StyledTextFieldBase
                   ariaLabel="Container max RU/s"
+                  data-test="autoscaleRUInput"
                   errorMessage=""
                   id="autoscaleRUValueField"
                   key=".0:$.$.1"
@@ -2170,6 +2171,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                 >
                   <TextFieldBase
                     ariaLabel="Container max RU/s"
+                    data-test="autoscaleRUInput"
                     deferredValidationTime={200}
                     errorMessage=""
                     id="autoscaleRUValueField"
@@ -2470,6 +2472,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                             aria-invalid={false}
                             aria-label="Container max RU/s"
                             className="ms-TextField-field field-124"
+                            data-test="autoscaleRUInput"
                             id="autoscaleRUValueField"
                             max="9007199254740991"
                             min={1000}

src/Explorer/Explorer.tsx

@@ -18,7 +18,6 @@ import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { acquireMsalTokenForAccount } from "Utils/AuthorizationUtils";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointUtils";
 import { featureRegistered } from "Utils/FeatureRegistrationUtils";
-import { update } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as ko from "knockout";
 import React from "react";
@@ -48,7 +47,7 @@ import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
 import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
+import { logConsoleError, logConsoleInfo } from "../Utils/NotificationConsoleUtils";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { ReactTabKind, useTabs } from "../hooks/useTabs";
 import "./ComponentRegisterer";
@@ -218,56 +217,6 @@ export default class Explorer {
     this.refreshNotebookList();
   }
 
-  public openEnableSynapseLinkDialog(): void {
-    const addSynapseLinkDialogProps: DialogProps = {
-      linkProps: {
-        linkText: "Learn more",
-        linkUrl: "https://aka.ms/cosmosdb-synapselink",
-      },
-      isModal: true,
-      title: `Enable Azure Synapse Link on your Cosmos DB account`,
-      subText: `Enable Azure Synapse Link to perform near real time analytical analytics on this account, without impacting the performance of your transactional workloads.
-      Azure Synapse Link brings together Cosmos Db Analytical Store and Synapse Analytics`,
-      primaryButtonText: "Enable Azure Synapse Link",
-      secondaryButtonText: "Cancel",
-
-      onPrimaryButtonClick: async () => {
-        const startTime = TelemetryProcessor.traceStart(Action.EnableAzureSynapseLink);
-        const clearInProgressMessage = logConsoleProgress(
-          "Enabling Azure Synapse Link for this account. This may take a few minutes before you can enable analytical store for this account.",
-        );
-        useNotebook.getState().setIsSynapseLinkUpdating(true);
-        useDialog.getState().closeDialog();
-
-        try {
-          await update(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name, {
-            properties: {
-              enableAnalyticalStorage: true,
-            },
-          });
-
-          clearInProgressMessage();
-          logConsoleInfo("Enabled Azure Synapse Link for this account");
-          TelemetryProcessor.traceSuccess(Action.EnableAzureSynapseLink, {}, startTime);
-          userContext.databaseAccount.properties.enableAnalyticalStorage = true;
-        } catch (error) {
-          clearInProgressMessage();
-          logConsoleError(`Enabling Azure Synapse Link for this account failed. ${getErrorMessage(error)}`);
-          TelemetryProcessor.traceFailure(Action.EnableAzureSynapseLink, {}, startTime);
-        } finally {
-          useNotebook.getState().setIsSynapseLinkUpdating(false);
-        }
-      },
-
-      onSecondaryButtonClick: () => {
-        useDialog.getState().closeDialog();
-        TelemetryProcessor.traceCancel(Action.EnableAzureSynapseLink);
-      },
-    };
-    useDialog.getState().openDialog(addSynapseLinkDialogProps);
-    TelemetryProcessor.traceStart(Action.EnableAzureSynapseLink);
-  }
-
   public async openLoginForEntraIDPopUp(): Promise<void> {
     if (userContext.databaseAccount.properties?.documentEndpoint) {
       try {

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts

@@ -14,66 +14,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
   afterEach(() => useSelectedNode.getState().setSelectedNode(undefined));
 
-  describe("Enable Azure Synapse Link Button", () => {
-    const enableAzureSynapseLinkBtnLabel = "Enable Azure Synapse Link";
-    const selectedNodeState = useSelectedNode.getState();
-
-    beforeAll(() => {
-      mockExplorer = {} as Explorer;
-      updateUserContext({
-        databaseAccount: {
-          properties: {
-            capabilities: [{ name: "EnableMongo" }],
-          },
-        } as DatabaseAccount,
-      });
-    });
-
-    it("Button should be visible", () => {
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
-      const enableAzureSynapseLinkBtn = buttons.find(
-        (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel,
-      );
-      expect(enableAzureSynapseLinkBtn).toBeDefined();
-    });
-
-    // TODO: Now that Tables API supports dataplane RBAC, calling createStaticCommandBarButtons will enable the
-    //       Entra ID Login button, which causes this test to fail due to "Invalid hook call.". This seems to be
-    //       unsupported in jest and needs to be tested with react-hooks-testing-library.
-    //
-    // it("Button should not be visible for Tables API", () => {
-    //   updateUserContext({
-    //     databaseAccount: {
-    //       properties: {
-    //         capabilities: [{ name: "EnableTable" }],
-    //       },
-    //     } as DatabaseAccount,
-    //   });
-    //
-    //   const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
-    //  const enableAzureSynapseLinkBtn = buttons.find(
-    //    (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel,
-    //  );
-    //  expect(enableAzureSynapseLinkBtn).toBeUndefined();
-    //});
-
-    it("Button should not be visible for Cassandra API", () => {
-      updateUserContext({
-        databaseAccount: {
-          properties: {
-            capabilities: [{ name: "EnableCassandra" }],
-          },
-        } as DatabaseAccount,
-      });
-
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
-      const enableAzureSynapseLinkBtn = buttons.find(
-        (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel,
-      );
-      expect(enableAzureSynapseLinkBtn).toBeUndefined();
-    });
-  });
-
   describe("Open Cassandra shell button", () => {
     const openCassandraShellBtnLabel = "Open Cassandra shell";
     const selectedNodeState = useSelectedNode.getState();

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -12,10 +12,8 @@ import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
 import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
 import OpenInTabIcon from "../../../../images/open-in-tab.svg";
 import SettingsIcon from "../../../../images/settings_15x15.svg";
-import SynapseIcon from "../../../../images/synapse-link.svg";
 import VSCodeIcon from "../../../../images/vscode.svg";
 import { AuthType } from "../../../AuthType";
-import * as Constants from "../../../Common/Constants";
 import { Platform, configContext } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { userContext } from "../../../UserContext";
@@ -55,11 +53,6 @@ export function createStaticCommandBarButtons(
     userContext.apiType !== "Tables" &&
     userContext.apiType !== "Cassandra"
   ) {
-    const addSynapseLink = createOpenSynapseLinkDialogButton(container);
-    if (addSynapseLink) {
-      addDivider();
-      buttons.push(addSynapseLink);
-    }
     if (userContext.apiType !== "Gremlin") {
       const addVsCode = createOpenVsCodeDialogButton(container);
       buttons.push(addVsCode);
@@ -237,33 +230,6 @@ function areScriptsSupported(): boolean {
   );
 }
 
-function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonComponentProps {
-  if (configContext.platform === Platform.Emulator) {
-    return undefined;
-  }
-
-  if (userContext?.databaseAccount?.properties?.enableAnalyticalStorage) {
-    return undefined;
-  }
-
-  const capabilities = userContext?.databaseAccount?.properties?.capabilities || [];
-  if (capabilities.some((capability) => capability.name === Constants.CapabilityNames.EnableStorageAnalytics)) {
-    return undefined;
-  }
-
-  const label = "Enable Azure Synapse Link";
-  return {
-    iconSrc: SynapseIcon,
-    iconAlt: label,
-    onCommandClick: () => container.openEnableSynapseLinkDialog(),
-    commandButtonLabel: label,
-    hasPopup: false,
-    disabled:
-      useSelectedNode.getState().isQueryCopilotCollectionSelected() || useNotebook.getState().isSynapseLinkUpdating,
-    ariaLabel: label,
-  };
-}
-
 function createOpenVsCodeDialogButton(container: Explorer): CommandButtonComponentProps {
   const label = "Visual Studio Code";
   return {

src/Explorer/Notebook/useNotebook.ts

@@ -25,7 +25,6 @@ interface NotebookState {
   isNotebooksEnabledForAccount: boolean;
   notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo;
   sparkClusterConnectionInfo: DataModels.SparkClusterConnectionInfo;
-  isSynapseLinkUpdating: boolean;
   memoryUsageInfo: DataModels.MemoryUsageInfo;
   isShellEnabled: boolean;
   notebookBasePath: string;
@@ -44,7 +43,6 @@ interface NotebookState {
   setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => void;
   setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) => void;
   setSparkClusterConnectionInfo: (sparkClusterConnectionInfo: DataModels.SparkClusterConnectionInfo) => void;
-  setIsSynapseLinkUpdating: (isSynapseLinkUpdating: boolean) => void;
   setMemoryUsageInfo: (memoryUsageInfo: DataModels.MemoryUsageInfo) => void;
   setIsShellEnabled: (isShellEnabled: boolean) => void;
   setNotebookBasePath: (notebookBasePath: string) => void;
@@ -79,7 +77,6 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
     password: undefined,
     endpoints: [],
   },
-  isSynapseLinkUpdating: false,
   memoryUsageInfo: undefined,
   isShellEnabled: false,
   notebookBasePath: Constants.Notebook.defaultBasePath,
@@ -106,7 +103,6 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
     set({ notebookServerInfo }),
   setSparkClusterConnectionInfo: (sparkClusterConnectionInfo: DataModels.SparkClusterConnectionInfo) =>
     set({ sparkClusterConnectionInfo }),
-  setIsSynapseLinkUpdating: (isSynapseLinkUpdating: boolean) => set({ isSynapseLinkUpdating }),
   setMemoryUsageInfo: (memoryUsageInfo: DataModels.MemoryUsageInfo) => set({ memoryUsageInfo }),
   setIsShellEnabled: (isShellEnabled: boolean) => set({ isShellEnabled }),
   setNotebookBasePath: (notebookBasePath: string) => set({ notebookBasePath }),

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx

@@ -25,7 +25,6 @@ import { FullTextPoliciesComponent } from "Explorer/Controls/FullTextSeach/FullT
 import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
 import {
   AllPropertiesIndexed,
-  AnalyticalStoreHeader,
   ContainerVectorPolicyTooltipContent,
   FullTextPolicyDefault,
   getPartitionKey,
@@ -33,11 +32,9 @@ import {
   getPartitionKeyPlaceHolder,
   getPartitionKeyTooltipText,
   isFreeTierAccount,
-  isSynapseLinkEnabled,
   parseUniqueKeys,
   scrollToSection,
   SharedDatabaseDefault,
-  shouldShowAnalyticalStoreOptions,
   UniqueKeysHeader,
 } from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
 import { useSidePanel } from "hooks/useSidePanel";
@@ -65,6 +62,8 @@ export interface AddCollectionPanelProps {
   explorer: Explorer;
   databaseId?: string;
   isQuickstart?: boolean;
+  isCopyJobFlow?: boolean;
+  onSubmitSuccess?: (collectionData: { databaseId: string; collectionId: string }) => void;
 }
 
 export const DefaultVectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy = {
@@ -84,7 +83,6 @@ export interface AddCollectionPanelState {
   enableDedicatedThroughput: boolean;
   createMongoWildCardIndex: boolean;
   useHashV1: boolean;
-  enableAnalyticalStore: boolean;
   uniqueKeys: string[];
   errorMessage: string;
   showErrorDetails: boolean;
@@ -126,7 +124,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       createMongoWildCardIndex:
         isCapabilityEnabled("EnableMongo") && !isCapabilityEnabled("EnableMongo16MBDocumentSupport"),
       useHashV1: false,
-      enableAnalyticalStore: false,
       uniqueKeys: [],
       errorMessage: "",
       showErrorDetails: false,
@@ -779,70 +776,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             <Separator className="panelSeparator" style={{ marginTop: -15, marginBottom: -4 }} />
           )}
 
-          {shouldShowAnalyticalStoreOptions() && (
-            <Stack className="panelGroupSpacing" style={{ marginTop: -4 }}>
-              <Text className="panelTextBold" variant="small">
-                {AnalyticalStoreHeader()}
-              </Text>
-
-              <Stack horizontal verticalAlign="center">
-                <div role="radiogroup">
-                  <input
-                    className="panelRadioBtn"
-                    checked={this.state.enableAnalyticalStore}
-                    disabled={!isSynapseLinkEnabled()}
-                    aria-label="Enable analytical store"
-                    aria-checked={this.state.enableAnalyticalStore}
-                    name="analyticalStore"
-                    type="radio"
-                    role="radio"
-                    id="enableAnalyticalStoreBtn"
-                    tabIndex={0}
-                    onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
-                  />
-                  <span className="panelRadioBtnLabel">On</span>
-
-                  <input
-                    className="panelRadioBtn"
-                    checked={!this.state.enableAnalyticalStore}
-                    disabled={!isSynapseLinkEnabled()}
-                    aria-label="Disable analytical store"
-                    aria-checked={!this.state.enableAnalyticalStore}
-                    name="analyticalStore"
-                    type="radio"
-                    role="radio"
-                    id="disableAnalyticalStoreBtn"
-                    tabIndex={0}
-                    onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
-                  />
-                  <span className="panelRadioBtnLabel">Off</span>
-                </div>
-              </Stack>
-
-              {!isSynapseLinkEnabled() && (
-                <Stack className="panelGroupSpacing">
-                  <Text variant="small">
-                    Azure Synapse Link is required for creating an analytical store{" "}
-                    {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account. <br />
-                    <Link
-                      href="https://aka.ms/cosmosdb-synapselink"
-                      target="_blank"
-                      aria-label={Constants.ariaLabelForLearnMoreLink.AzureSynapseLink}
-                      className="capacitycalculator-link"
-                    >
-                      Learn more
-                    </Link>
-                  </Text>
-                  <DefaultButton
-                    text="Enable"
-                    onClick={() => this.props.explorer.openEnableSynapseLinkDialog()}
-                    style={{ height: 27, width: 80 }}
-                    styles={{ label: { fontSize: 12 } }}
-                  />
-                </Stack>
-              )}
-            </Stack>
-          )}
           {this.shouldShowVectorSearchParameters() && (
             <Stack>
               <CollapsibleSectionComponent
@@ -975,7 +908,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
           )}
         </div>
 
-        <PanelFooterComponent buttonLabel="OK" isButtonDisabled={this.state.isThroughputCapExceeded} />
+        {!this.props.isCopyJobFlow && (
+          <PanelFooterComponent buttonLabel="OK" isButtonDisabled={this.state.isThroughputCapExceeded} />
+        )}
 
         {this.state.isExecuting && (
           <div>
@@ -1049,22 +984,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     }
   }
 
-  private onEnableAnalyticalStoreRadioBtnChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    if (event.target.checked && !this.state.enableAnalyticalStore) {
-      this.setState({
-        enableAnalyticalStore: true,
-      });
-    }
-  }
-
-  private onDisableAnalyticalStoreRadioBtnChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    if (event.target.checked && this.state.enableAnalyticalStore) {
-      this.setState({
-        enableAnalyticalStore: false,
-      });
-    }
-  }
-
   private onTurnOnIndexing(event: React.ChangeEvent<HTMLInputElement>): void {
     if (event.target.checked && !this.state.enableIndexing) {
       this.setState({
@@ -1239,25 +1158,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     return true;
   }
 
-  private getAnalyticalStorageTtl(): number {
-    if (!isSynapseLinkEnabled()) {
-      return undefined;
-    }
-
-    if (!shouldShowAnalyticalStoreOptions()) {
-      return undefined;
-    }
-
-    if (this.state.enableAnalyticalStore) {
-      // TODO: always default to 90 days once the backend hotfix is deployed
-      return userContext.features.ttl90Days
-        ? Constants.AnalyticalStorageTtl.Days90
-        : Constants.AnalyticalStorageTtl.Infinite;
-    }
-
-    return Constants.AnalyticalStorageTtl.Disabled;
-  }
-
   private getSampleDBName(): string {
     const existingSampleDBs = useDatabases
       .getState()
@@ -1381,7 +1281,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       databaseLevelThroughput,
       offerThroughput,
       autoPilotMaxThroughput,
-      analyticalStorageTtl: this.getAnalyticalStorageTtl(),
       indexingPolicy,
       partitionKey,
       uniqueKeyPolicy,
@@ -1415,8 +1314,13 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
         }
       }
       this.setState({ isExecuting: false });
-      TelemetryProcessor.traceSuccess(Action.CreateCollection, telemetryData, startKey);
+
-      useSidePanel.getState().closeSidePanel();
+      if (this.props.isCopyJobFlow && this.props.onSubmitSuccess) {
+        this.props.onSubmitSuccess({ databaseId, collectionId });
+      } else {
+        TelemetryProcessor.traceSuccess(Action.CreateCollection, telemetryData, startKey);
+        useSidePanel.getState().closeSidePanel();
+      }
     } catch (error) {
       const errorMessage: string = getErrorMessage(error);
       this.setState({ isExecuting: false, errorMessage, showErrorDetails: true });

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility.tsx

@@ -1,9 +1,6 @@
 import { DirectionalHint, Icon, Link, Stack, Text, TooltipHost } from "@fluentui/react";
-import * as Constants from "Common/Constants";
-import { configContext, Platform } from "ConfigContext";
 import * as DataModels from "Contracts/DataModels";
 import { getFullTextLanguageOptions } from "Explorer/Controls/FullTextSeach/FullTextPoliciesComponent";
-import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import React from "react";
 import { userContext } from "UserContext";
 
@@ -84,70 +81,6 @@ export function UniqueKeysHeader(): JSX.Element {
   );
 }
 
-export function shouldShowAnalyticalStoreOptions(): boolean {
-  if (isFabricNative() || configContext.platform === Platform.Emulator) {
-    return false;
-  }
-
-  switch (userContext.apiType) {
-    case "SQL":
-    case "Mongo":
-      return true;
-    default:
-      return false;
-  }
-}
-
-export function AnalyticalStoreHeader(): JSX.Element {
-  const tooltipContent =
-    "Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads.";
-  return (
-    <Stack horizontal style={{ marginBottom: -2 }}>
-      <Text className="panelTextBold" variant="small">
-        Analytical Store
-      </Text>
-      <TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={tooltipContent}>
-        <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} ariaLabel={tooltipContent} />
-      </TooltipHost>
-    </Stack>
-  );
-}
-
-export function AnalyticalStorageContent(): JSX.Element {
-  return (
-    <Text variant="small">
-      Enable analytical store capability to perform near real-time analytics on your operational data, without impacting
-      the performance of transactional workloads.{" "}
-      <Link
-        aria-label={Constants.ariaLabelForLearnMoreLink.AnalyticalStore}
-        target="_blank"
-        href="https://aka.ms/analytical-store-overview"
-      >
-        Learn more
-      </Link>
-    </Text>
-  );
-}
-
-export function isSynapseLinkEnabled(): boolean {
-  if (!userContext.databaseAccount) {
-    return false;
-  }
-
-  const { properties } = userContext.databaseAccount;
-  if (!properties) {
-    return false;
-  }
-
-  if (properties.enableAnalyticalStorage) {
-    return true;
-  }
-
-  return properties.capabilities?.some(
-    (capability) => capability.name === Constants.CapabilityNames.EnableStorageAnalytics,
-  );
-}
-
 export function scrollToSection(id: string): void {
   document.getElementById(id)?.scrollIntoView();
 }

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

@@ -367,129 +367,6 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         }
       }
     />
-    <Stack
-      className="panelGroupSpacing"
-      style={
-        {
-          "marginTop": -4,
-        }
-      }
-    >
-      <Text
-        className="panelTextBold"
-        variant="small"
-      >
-        <Stack
-          horizontal={true}
-          style={
-            {
-              "marginBottom": -2,
-            }
-          }
-        >
-          <Text
-            className="panelTextBold"
-            variant="small"
-          >
-            Analytical Store
-          </Text>
-          <StyledTooltipHostBase
-            content="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
-            directionalHint={4}
-          >
-            <Icon
-              ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
-              className="panelInfoIcon"
-              iconName="Info"
-              tabIndex={0}
-            />
-          </StyledTooltipHostBase>
-        </Stack>
-      </Text>
-      <Stack
-        horizontal={true}
-        verticalAlign="center"
-      >
-        <div
-          role="radiogroup"
-        >
-          <input
-            aria-checked={false}
-            aria-label="Enable analytical store"
-            checked={false}
-            className="panelRadioBtn"
-            disabled={true}
-            id="enableAnalyticalStoreBtn"
-            name="analyticalStore"
-            onChange={[Function]}
-            role="radio"
-            tabIndex={0}
-            type="radio"
-          />
-          <span
-            className="panelRadioBtnLabel"
-          >
-            On
-          </span>
-          <input
-            aria-checked={true}
-            aria-label="Disable analytical store"
-            checked={true}
-            className="panelRadioBtn"
-            disabled={true}
-            id="disableAnalyticalStoreBtn"
-            name="analyticalStore"
-            onChange={[Function]}
-            role="radio"
-            tabIndex={0}
-            type="radio"
-          />
-          <span
-            className="panelRadioBtnLabel"
-          >
-            Off
-          </span>
-        </div>
-      </Stack>
-      <Stack
-        className="panelGroupSpacing"
-      >
-        <Text
-          variant="small"
-        >
-          Azure Synapse Link is required for creating an analytical store
-           
-          container
-          . Enable Synapse Link for this Cosmos DB account. 
-          <br />
-          <StyledLinkBase
-            aria-label="Learn more about Azure Synapse Link."
-            className="capacitycalculator-link"
-            href="https://aka.ms/cosmosdb-synapselink"
-            target="_blank"
-          >
-            Learn more
-          </StyledLinkBase>
-        </Text>
-        <CustomizedDefaultButton
-          onClick={[Function]}
-          style={
-            {
-              "height": 27,
-              "width": 80,
-            }
-          }
-          styles={
-            {
-              "label": {
-                "fontSize": 12,
-              },
-            }
-          }
-          text="Enable"
-        />
-      </Stack>
-    </Stack>
     <Stack>
       <CollapsibleSectionComponent
         isExpandedByDefault={false}

src/Explorer/Panes/AddGlobalSecondaryIndexPanel/AddGlobalSecondaryIndexPanel.tsx

@@ -21,16 +21,13 @@ import {
   AllPropertiesIndexed,
   FullTextPolicyDefault,
   getPartitionKey,
-  isSynapseLinkEnabled,
   scrollToSection,
-  shouldShowAnalyticalStoreOptions,
 } from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
 import {
   chooseSourceContainerStyle,
   chooseSourceContainerStyles,
 } from "Explorer/Panes/AddGlobalSecondaryIndexPanel/AddGlobalSecondaryIndexPanelStyles";
 import { AdvancedComponent } from "Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AdvancedComponent";
-import { AnalyticalStoreComponent } from "Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AnalyticalStoreComponent";
 import { FullTextSearchComponent } from "Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/FullTextSearchComponent";
 import { PartitionKeyComponent } from "Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/PartitionKeyComponent";
 import { ThroughputComponent } from "Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/ThroughputComponent";
@@ -64,7 +61,6 @@ export const AddGlobalSecondaryIndexPanel = (props: AddGlobalSecondaryIndexPanel
   const [useHashV1, setUseHashV1] = useState<boolean>();
   const [enableDedicatedThroughput, setEnabledDedicatedThroughput] = useState<boolean>();
   const [isThroughputCapExceeded, setIsThroughputCapExceeded] = useState<boolean>();
-  const [enableAnalyticalStore, setEnableAnalyticalStore] = useState<boolean>();
   const [vectorEmbeddingPolicy, setVectorEmbeddingPolicy] = useState<VectorEmbedding[]>([]);
   const [vectorIndexingPolicy, setVectorIndexingPolicy] = useState<VectorIndex[]>([]);
   const [vectorPolicyValidated, setVectorPolicyValidated] = useState<boolean>(true);
@@ -142,25 +138,6 @@ export const AddGlobalSecondaryIndexPanel = (props: AddGlobalSecondaryIndexPanel
     return isVectorSearchEnabled() && (isServerlessAccount() || showCollectionThroughputInput());
   };
 
-  const getAnalyticalStorageTtl = (): number => {
-    if (!isSynapseLinkEnabled()) {
-      return undefined;
-    }
-
-    if (!shouldShowAnalyticalStoreOptions()) {
-      return undefined;
-    }
-
-    if (enableAnalyticalStore) {
-      // TODO: always default to 90 days once the backend hotfix is deployed
-      return userContext.features.ttl90Days
-        ? Constants.AnalyticalStorageTtl.Days90
-        : Constants.AnalyticalStorageTtl.Infinite;
-    }
-
-    return Constants.AnalyticalStorageTtl.Disabled;
-  };
-
   const validateInputs = (): boolean => {
     if (!selectedSourceContainer) {
       setErrorMessage("Please select a source container");
@@ -257,7 +234,6 @@ export const AddGlobalSecondaryIndexPanel = (props: AddGlobalSecondaryIndexPanel
       ...(!databaseLevelThroughput && {
         autoPilotMaxThroughput: globalSecondaryIndexThroughput,
       }),
-      analyticalStorageTtl: getAnalyticalStorageTtl(),
       indexingPolicy: indexingPolicy,
       partitionKey: partitionKeyPaths,
       vectorEmbeddingPolicy: vectorEmbeddingPolicyFinal,
@@ -369,9 +345,7 @@ export const AddGlobalSecondaryIndexPanel = (props: AddGlobalSecondaryIndexPanel
               isCostAknowledgedOnChange,
             }}
           />
-          {shouldShowAnalyticalStoreOptions() && (
+
-            <AnalyticalStoreComponent {...{ explorer, enableAnalyticalStore, setEnableAnalyticalStore }} />
-          )}
           {showVectorSearchParameters() && (
             <VectorSearchComponent
               {...{

src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AnalyticalStoreComponent.tsx

@@ -1,99 +0,0 @@
-import { DefaultButton, Link, Stack, Text } from "@fluentui/react";
-import * as Constants from "Common/Constants";
-import Explorer from "Explorer/Explorer";
-import {
-  AnalyticalStorageContent,
-  isSynapseLinkEnabled,
-} from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
-import React from "react";
-import { getCollectionName } from "Utils/APITypeUtils";
-
-export interface AnalyticalStoreComponentProps {
-  explorer: Explorer;
-  enableAnalyticalStore: boolean;
-  setEnableAnalyticalStore: React.Dispatch<React.SetStateAction<boolean>>;
-}
-export const AnalyticalStoreComponent = (props: AnalyticalStoreComponentProps): JSX.Element => {
-  const { explorer, enableAnalyticalStore, setEnableAnalyticalStore } = props;
-
-  const onEnableAnalyticalStoreRadioButtonChange = (checked: boolean): void => {
-    if (checked && !enableAnalyticalStore) {
-      setEnableAnalyticalStore(true);
-    }
-  };
-
-  const onDisableAnalyticalStoreRadioButtonnChange = (checked: boolean): void => {
-    if (checked && enableAnalyticalStore) {
-      setEnableAnalyticalStore(false);
-    }
-  };
-
-  return (
-    <Stack className="panelGroupSpacing">
-      <Text className="panelTextBold" variant="small">
-        {AnalyticalStorageContent()}
-      </Text>
-
-      <Stack horizontal verticalAlign="center">
-        <div role="radiogroup">
-          <input
-            className="panelRadioBtn"
-            checked={enableAnalyticalStore}
-            disabled={!isSynapseLinkEnabled()}
-            aria-label="Enable analytical store"
-            aria-checked={enableAnalyticalStore}
-            name="analyticalStore"
-            type="radio"
-            role="radio"
-            id="enableAnalyticalStoreBtn"
-            tabIndex={0}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              onEnableAnalyticalStoreRadioButtonChange(event.target.checked);
-            }}
-          />
-          <span className="panelRadioBtnLabel">On</span>
-
-          <input
-            className="panelRadioBtn"
-            checked={!enableAnalyticalStore}
-            disabled={!isSynapseLinkEnabled()}
-            aria-label="Disable analytical store"
-            aria-checked={!enableAnalyticalStore}
-            name="analyticalStore"
-            type="radio"
-            role="radio"
-            id="disableAnalyticalStoreBtn"
-            tabIndex={0}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              onDisableAnalyticalStoreRadioButtonnChange(event.target.checked);
-            }}
-          />
-          <span className="panelRadioBtnLabel">Off</span>
-        </div>
-      </Stack>
-
-      {!isSynapseLinkEnabled() && (
-        <Stack className="panelGroupSpacing">
-          <Text variant="small">
-            Azure Synapse Link is required for creating an analytical store {getCollectionName().toLocaleLowerCase()}.
-            Enable Synapse Link for this Cosmos DB account.{" "}
-            <Link
-              href="https://aka.ms/cosmosdb-synapselink"
-              target="_blank"
-              aria-label={Constants.ariaLabelForLearnMoreLink.AzureSynapseLink}
-              className="capacitycalculator-link"
-            >
-              Learn more
-            </Link>
-          </Text>
-          <DefaultButton
-            text="Enable"
-            onClick={() => explorer.openEnableSynapseLinkDialog()}
-            style={{ height: 27, width: 80 }}
-            styles={{ label: { fontSize: 12 } }}
-          />
-        </Stack>
-      )}
-    </Stack>
-  );
-};

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

@@ -142,36 +142,6 @@ exports[`AddGlobalSecondaryIndexPanel render default panel 1`] = `
         setIsThroughputCapExceeded={[Function]}
         showCollectionThroughputInput={[Function]}
       />
-      <AnalyticalStoreComponent
-        explorer={
-          Explorer {
-            "_isInitializingNotebooks": false,
-            "isFixedCollectionWithSharedThroughputSupported": [Function],
-            "isTabsContentExpanded": [Function],
-            "onRefreshDatabasesKeyPress": [Function],
-            "onRefreshResourcesClick": [Function],
-            "phoenixClient": PhoenixClient {
-              "armResourceId": undefined,
-              "retryOptions": {
-                "maxTimeout": 5000,
-                "minTimeout": 5000,
-                "retries": 3,
-              },
-            },
-            "provideFeedbackEmail": [Function],
-            "queriesClient": QueriesClient {
-              "container": [Circular],
-            },
-            "refreshNotebookList": [Function],
-            "resourceTree": ResourceTreeAdapter {
-              "container": [Circular],
-              "copyNotebook": [Function],
-              "parameters": [Function],
-            },
-          }
-        }
-        setEnableAnalyticalStore={[Function]}
-      />
       <FullTextSearchComponent
         fullTextPolicy={
           {

src/Explorer/Panes/SettingsPane/SettingsPane.test.tsx

@@ -5,6 +5,12 @@ import { updateUserContext } from "../../../UserContext";
 import { SettingsPane } from "./SettingsPane";
 
 describe("Settings Pane", () => {
+  beforeEach(() => {
+    updateUserContext({
+      sessionId: "1234-5678",
+    });
+  });
+
   it("should render Default properly", () => {
     const wrapper = shallow(<SettingsPane explorer={null} />);
     expect(wrapper).toMatchSnapshot();

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -212,6 +212,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const styles = useStyles();
 
   const explorerVersion = configContext.gitSha;
+  const sessionId: string = userContext.sessionId;
   const isEmulator = configContext.platform === Platform.Emulator;
   const shouldShowQueryPageOptions = userContext.apiType === "SQL";
   const showRetrySettings =
@@ -1227,6 +1228,12 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
             <div>{explorerVersion}</div>
           </div>
         </div>
+        <div className="settingsSection">
+          <div className="settingsSectionPart">
+            <div className="settingsSectionLabel">Session ID</div>
+            <div>{sessionId}</div>
+          </div>
+        </div>
       </div>
     </RightPaneForm>
   );

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

@@ -649,6 +649,22 @@ exports[`Settings Pane should render Default properly 1`] = `
         <div />
       </div>
     </div>
+    <div
+      className="settingsSection"
+    >
+      <div
+        className="settingsSectionPart"
+      >
+        <div
+          className="settingsSectionLabel"
+        >
+          Session ID
+        </div>
+        <div>
+          1234-5678
+        </div>
+      </div>
+    </div>
   </div>
 </RightPaneForm>
 `;
@@ -958,6 +974,22 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
         <div />
       </div>
     </div>
+    <div
+      className="settingsSection"
+    >
+      <div
+        className="settingsSectionPart"
+      >
+        <div
+          className="settingsSectionLabel"
+        >
+          Session ID
+        </div>
+        <div>
+          1234-5678
+        </div>
+      </div>
+    </div>
   </div>
 </RightPaneForm>
 `;

src/Explorer/SplashScreen/FabricHome.tsx

@@ -142,7 +142,7 @@ const FabricHomeScreenButton: React.FC<FabricHomeScreenButtonProps & { className
   return (
     <div role="button" className={`${styles.buttonContainer} ${className}`} onClick={onClick} tabIndex={0}>
       <div className={styles.buttonUpperPart}>{icon}</div>
-      <div aria-label={title} className={styles.buttonLowerPart}>
+      <div aria-label={`${title} ${description}`} className={styles.buttonLowerPart}>
         <div>{title}</div>
         <div>{description}</div>
       </div>

src/Explorer/Tables/TableDataClient.ts

@@ -286,7 +286,7 @@ export class CassandraAPIDataClient extends TableDataClient {
           query,
           paginationToken,
         }),
-        beforeSend: this.setAuthorizationHeader as any,
+        beforeSend: this.setCommonHeaders as any,
         cache: false,
       });
       shouldNotify &&
@@ -440,7 +440,7 @@ export class CassandraAPIDataClient extends TableDataClient {
         keyspaceId: collection.databaseId,
         tableId: collection.id(),
       }),
-      beforeSend: this.setAuthorizationHeader as any,
+      beforeSend: this.setCommonHeaders as any,
       cache: false,
     })
       .then(
@@ -482,7 +482,7 @@ export class CassandraAPIDataClient extends TableDataClient {
         keyspaceId: collection.databaseId,
         tableId: collection.id(),
       }),
-      beforeSend: this.setAuthorizationHeader as any,
+      beforeSend: this.setCommonHeaders as any,
       cache: false,
     })
       .then(
@@ -518,7 +518,7 @@ export class CassandraAPIDataClient extends TableDataClient {
         resourceId: resourceId,
         query: query,
       }),
-      beforeSend: this.setAuthorizationHeader as any,
+      beforeSend: this.setCommonHeaders as any,
       cache: false,
     }).then(
       (data: any) => {
@@ -547,7 +547,7 @@ export class CassandraAPIDataClient extends TableDataClient {
     return cassandraEndpoint;
   }
 
-  private setAuthorizationHeader: (xhr: XMLHttpRequest) => boolean = (xhr: XMLHttpRequest): boolean => {
+  private setCommonHeaders: (xhr: XMLHttpRequest) => boolean = (xhr: XMLHttpRequest): boolean => {
     const authorizationHeaderMetadata: ViewModels.AuthorizationTokenHeaderMetadata = getAuthorizationHeader();
     xhr.setRequestHeader(authorizationHeaderMetadata.header, authorizationHeaderMetadata.token);
 
@@ -555,6 +555,7 @@ export class CassandraAPIDataClient extends TableDataClient {
       xhr.setRequestHeader(Constants.HttpHeaders.entraIdToken, userContext.aadToken);
     }
 
+    xhr.setRequestHeader(Constants.HttpHeaders.sessionId, userContext.sessionId);
     return true;
   };
 

src/Explorer/Tabs/TabsBase.ts

@@ -1,5 +1,6 @@
 import { OpenTab } from "Contracts/ActionContracts";
 import { KeyboardActionGroup, clearKeyboardActionGroup } from "KeyboardShortcuts";
+import { substringUtf } from "Utils/StringUtils";
 import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
 import * as ThemeUtility from "../../Common/ThemeUtility";
@@ -154,13 +155,13 @@ export default class TabsBase extends WaitsForTemplateViewModel {
     const db = this.database?.id();
     if (coll) {
       if (coll.length > 8) {
-        return coll.slice(0, 5) + "…" + options.title;
+        return substringUtf(coll, 0, 5) + "…" + options.title;
       } else {
         return coll + "." + options.title;
       }
     } else if (db) {
       if (db.length > 8) {
-        return db.slice(0, 5) + "…" + options.title;
+        return substringUtf(db, 0, 5) + "…" + options.title;
       } else {
         return db + "." + options.title;
       }

src/Main.tsx

@@ -87,7 +87,7 @@ const App: React.FunctionComponent = () => {
     <KeyboardShortcutRoot>
       <div className="flexContainer" aria-hidden="false" data-test="DataExplorerRoot">
         {userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
-          <ContainerCopyPanel container={explorer} />
+          <ContainerCopyPanel explorer={explorer} />
         ) : (
           <DivExplorer explorer={explorer} />
         )}

src/Shared/Telemetry/TelemetryConstants.ts

@@ -60,7 +60,6 @@ export enum Action {
   LibraryManage,
   ClusterLibraryManage,
   ModifyOptionForThroughputWithSharedDatabase,
-  EnableAzureSynapseLink,
   CreateNewNotebook,
   OpenSampleNotebook,
   ExecuteCell,

src/UserContext.ts

@@ -4,6 +4,7 @@ import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
 import { useCarousel } from "hooks/useCarousel";
 import { usePostgres } from "hooks/usePostgres";
+import { v4 as uuidv4 } from "uuid";
 import { AuthType } from "./AuthType";
 import { DatabaseAccount } from "./Contracts/DataModels";
 import { SubscriptionType } from "./Contracts/SubscriptionType";
@@ -118,6 +119,7 @@ export interface UserContext {
   readonly dataPlaneRbacEnabled?: boolean;
   readonly refreshCosmosClient?: boolean;
   throughputBucketsEnabled?: boolean;
+  readonly sessionId: string;
 }
 
 export type ApiType = "SQL" | "Mongo" | "Gremlin" | "Tables" | "Cassandra" | "Postgres" | "VCoreMongo";
@@ -135,6 +137,7 @@ const userContext: UserContext = {
   features,
   subscriptionType: CollectionCreation.DefaultSubscriptionType,
   collectionCreationDefaults: CollectionCreationDefaults,
+  sessionId: uuidv4(), // Default sessionId - will be overwritten if provided by host
 };
 
 export function isAccountNewerThanThresholdInMs(createdAt: string, threshold: number) {

src/Utils/StringUtils.test.ts

@@ -26,5 +26,22 @@ describe("StringUtils", () => {
       const transformedString: string | undefined = StringUtils.stripSpacesFromString("");
       expect(transformedString).toBe("");
     });
+
+    it("should return the right number of characters regardless of bytes used per character", () => {
+      // Tried to use a sample of characters across the range for each of the individual byte lengths
+      const ascii = "!,n~!,n~!,n~";
+      const twoByteCharacters = "Āā߿܀Āā߿܀Āā߿܀";
+      const threeByteCharacters = "ࠀ倀ꀀࠀ倀ꀀࠀ倀ꀀ";
+      const fourByteCharacters = "𐀀𐔀𐨀𐿶𐀀𐔀𐨀𐿶𐀀𐔀𐨀𐿶";
+      // Used a random character generator for each of the different byte-lengths of characters for the mixed tests
+      const mixedByteSizes = "Yח䙶𫶾eԚ疿𱺿]߉ꗫ𢆤*ɉ貸𪡑";
+
+      expect(StringUtils.substringUtf(ascii, 0, 5)).toBe("!,n~!");
+      expect(StringUtils.substringUtf(twoByteCharacters, 0, 5)).toBe("Āā߿܀Ā");
+      expect(StringUtils.substringUtf(threeByteCharacters, 0, 5)).toBe("ࠀ倀ꀀࠀ");
+      expect(StringUtils.substringUtf(fourByteCharacters, 0, 5)).toBe("𐀀𐔀𐨀𐿶𐀀");
+      expect(StringUtils.substringUtf(mixedByteSizes, 0, 5)).toBe("Yח䙶𫶾e");
+      expect(StringUtils.substringUtf(mixedByteSizes, 4, 4)).toBe("eԚ疿𱺿");
+    });
   });
 });

src/Utils/StringUtils.ts

@@ -17,3 +17,58 @@ export function endsWith(stringToTest: string, suffix: string): boolean {
 export function startsWith(stringToTest: string, prefix: string): boolean {
   return stringToTest.indexOf(prefix) === 0;
 }
+
+/**
+ * Returns the input number of characters from a desired string but takes into account characters encoded with different byte sizes.
+ * @param text The text from which to return the subset
+ * @param startChar The starting character from @param text (zero-based)
+ * @param numChars The number of characters to return starting from @param startChar
+ * @returns The resulting slice of characters
+ */
+export const substringUtf = (text: string, startChar: number, numChars: number) => {
+  const encoded = new TextEncoder().encode(text);
+
+  let currentChar = 0;
+  let currentByte = 0;
+  let startByte = 0;
+  for (; currentChar < startChar + numChars; ) {
+    if (currentChar === startChar) {
+      startByte = currentByte;
+    }
+
+    /*
+    Unicode is utf encoded using 1, 2, 3, or 4 bytes
+    In a byte array, we know how many bytes the character is encoded based on the first byte because it
+    was developed such that the first byte's range never occurs in any other byte. Subsequent bytes are
+    always within 128 and 191. So in binary it breaks down like this:
+    1 byte:  0xxxxxxx
+    2 bytes: 110xxxxx 10xxxxxx
+    3 bytes: 1110xxxx 10xxxxxx 10xxxxxx
+    4 bytes: 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
+    */
+    switch (true) {
+      // The originall ASCII set is between 0 (00000000) and 127 (01111111) and those only take up one byte
+      case encoded[currentByte] >= 0 && encoded[currentByte] <= 127:
+        currentByte++;
+        break;
+      // But if the first byte is within 192 (11000000) and 223 (11011111) then we know the character is two bytes:
+      case encoded[currentByte] >= 192 && encoded[currentByte] <= 223:
+        currentByte = currentByte + 2;
+        break;
+      // If the first byte is anything within 224 (11100000) and 239 (11101111) then the character is three bytes
+      case encoded[currentByte] >= 224 && encoded[currentByte] <= 239:
+        currentByte = currentByte + 3;
+        break;
+      // If the first byte is anything within 240 (11110000) and 247 (11110111) then the character is four bytes
+      case encoded[currentByte] >= 240 && encoded[currentByte] <= 247:
+        currentByte = currentByte + 4;
+        break;
+      // Anything past is an error for now
+      default:
+        throw new Error("Unrecognized character");
+    }
+    currentChar++;
+  }
+
+  return new TextDecoder().decode(encoded.slice(startByte, currentByte));
+};

src/Utils/arm/databaseAccountUtils.ts

@@ -2,7 +2,7 @@ import { DatabaseAccount } from "Contracts/DataModels";
 import { userContext } from "UserContext";
 import { buildArmUrl } from "Utils/arm/armUtils";
 
-const apiVersion = "2025-04-15";
+const apiVersion = "2025-05-01-preview";
 export type FetchAccountDetailsParams = {
   subscriptionId: string;
   resourceGroupName: string;

src/hooks/useKnockoutExplorer.ts

@@ -85,6 +85,7 @@ export function useKnockoutExplorer(platform: Platform): Explorer {
           userContext.features.phoenixNotebooks = true;
           userContext.features.phoenixFeatures = true;
         }
+
         let explorer: Explorer;
         if (platform === Platform.Hosted) {
           explorer = await configureHosted();
@@ -927,6 +928,7 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
     collectionCreationDefaults: inputs.defaultCollectionThroughput,
     isTryCosmosDBSubscription: inputs.isTryCosmosDBSubscription,
     feedbackPolicies: inputs.feedbackPolicies,
+    ...(inputs.sessionId && { sessionId: inputs.sessionId }), // Remove conditional once Portal sends sessionId
   });
 
   if (inputs.isPostgresAccount) {

src/hooks/useSidePanel.ts

@@ -6,6 +6,7 @@ export interface SidePanelState {
   hasConsole: 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;
@@ -15,6 +16,7 @@ export const useSidePanel: UseStore<SidePanelState> = create((set) => ({
   isOpen: false,
   panelWidth: "440px",
   hasConsole: true,
+  setHeaderText: (headerText: string) => set((state) => ({ ...state, headerText })),
   setPanelHasConsole: (hasConsole: boolean) => set((state) => ({ ...state, hasConsole })),
   openSidePanel: (headerText, panelContent, panelWidth = "440px") =>
     set((state) => ({ ...state, headerText, panelContent, panelWidth, isOpen: true })),

test/cassandra/container.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test";
 
-import { DataExplorer, TestAccount, generateUniqueName } from "../fx";
+import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
 
 test("Cassandra keyspace and table CRUD", async ({ page }) => {
   const keyspaceId = generateUniqueName("db");
@@ -14,6 +14,7 @@ test("Cassandra keyspace and table CRUD", async ({ page }) => {
     async (panel, okButton) => {
       await panel.getByPlaceholder("Type a new keyspace id").fill(keyspaceId);
       await panel.getByPlaceholder("Enter table Id").fill(tableId);
+      await panel.getByTestId("autoscaleRUInput").fill(TEST_AUTOSCALE_THROUGHPUT_RU.toString());
       await okButton.click();
     },
     { closeTimeout: 5 * 60 * 1000 },

test/fx.ts

@@ -54,6 +54,7 @@ export const defaultAccounts: Record<TestAccount, string> = {
 
 export const resourceGroupName = process.env.DE_TEST_RESOURCE_GROUP ?? "de-e2e-tests";
 export const subscriptionId = process.env.DE_TEST_SUBSCRIPTION_ID ?? "69e02f2d-f059-4409-9eac-97e8a276ae2c";
+export const TEST_AUTOSCALE_THROUGHPUT_RU = 1000;
 
 function tryGetStandardName(accountType: TestAccount) {
   if (process.env.DE_TEST_ACCOUNT_PREFIX) {

test/gremlin/container.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test";
 
-import { DataExplorer, TestAccount, generateUniqueName } from "../fx";
+import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
 
 test("Gremlin graph CRUD", async ({ page }) => {
   const databaseId = generateUniqueName("db");
@@ -16,6 +16,7 @@ test("Gremlin graph CRUD", async ({ page }) => {
       await panel.getByPlaceholder("Type a new database id").fill(databaseId);
       await panel.getByRole("textbox", { name: "Graph id, Example Graph1" }).fill(graphId);
       await panel.getByRole("textbox", { name: "Partition key" }).fill("/pk");
+      await panel.getByTestId("autoscaleRUInput").fill(TEST_AUTOSCALE_THROUGHPUT_RU.toString());
       await okButton.click();
     },
     { closeTimeout: 5 * 60 * 1000 },

test/mongo/container.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test";
 
-import { DataExplorer, TestAccount, generateUniqueName } from "../fx";
+import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
 
 (
   [
@@ -21,6 +21,7 @@ import { DataExplorer, TestAccount, generateUniqueName } from "../fx";
         await panel.getByPlaceholder("Type a new database id").fill(databaseId);
         await panel.getByRole("textbox", { name: "Collection id, Example Collection1" }).fill(collectionId);
         await panel.getByRole("textbox", { name: "Shard key" }).fill("pk");
+        await panel.getByTestId("autoscaleRUInput").fill(TEST_AUTOSCALE_THROUGHPUT_RU.toString());
         await okButton.click();
       },
       { closeTimeout: 5 * 60 * 1000 },

test/sql/container.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test";
 
-import { DataExplorer, TestAccount, generateUniqueName } from "../fx";
+import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
 
 test("SQL database and container CRUD", async ({ page }) => {
   const databaseId = generateUniqueName("db");
@@ -15,6 +15,7 @@ test("SQL database and container CRUD", async ({ page }) => {
       await panel.getByPlaceholder("Type a new database id").fill(databaseId);
       await panel.getByRole("textbox", { name: "Container id, Example Container1" }).fill(containerId);
       await panel.getByRole("textbox", { name: "Partition key" }).fill("/pk");
+      await panel.getByTestId("autoscaleRUInput").fill(TEST_AUTOSCALE_THROUGHPUT_RU.toString());
       await okButton.click();
     },
     { closeTimeout: 5 * 60 * 1000 },

test/tables/container.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test";
 
-import { DataExplorer, TestAccount, generateUniqueName } from "../fx";
+import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
 
 test("Tables CRUD", async ({ page }) => {
   const tableId = generateUniqueName("table"); // A unique table name IS needed because the database is shared when using Table Storage.
@@ -12,7 +12,7 @@ test("Tables CRUD", async ({ page }) => {
     "New Table",
     async (panel, okButton) => {
       await panel.getByRole("textbox", { name: "Table id, Example Table1" }).fill(tableId);
-      await panel.getByLabel("Table Max RU/s").fill("1000");
+      await panel.getByTestId("autoscaleRUInput").fill(TEST_AUTOSCALE_THROUGHPUT_RU.toString());
       await okButton.click();
     },
     { closeTimeout: 5 * 60 * 1000 },

utils/cleanupDBs.js

@@ -28,7 +28,7 @@ async function main() {
       const mongoDatabases = await client.mongoDBResources.listMongoDBDatabases(resourceGroupName, account.name);
       for (const database of mongoDatabases) {
         // Unfortunately Mongo does not provide a timestamp in ARM. There is no way to tell how old the DB is other thn encoding it in the ID :(
-        const timestamp = Number(database.name.split("-")[1]);
+        const timestamp = Number(database.name.split("_").pop());
         if (timestamp && timestamp < thirtyMinutesAgo) {
           await client.mongoDBResources.deleteMongoDBDatabase(resourceGroupName, account.name, database.name);
           console.log(`DELETED: ${account.name} | ${database.name} | Age: ${friendlyTime(Date.now() - timestamp)}`);