fixed ui for jobList

* add two new fabric sample datasets.

* Update Fabric Home with two sample datasets. One regular and one for vector search.

* Update specs for sample data container

* Add telemetry instead of console log

* Add sampleDataFile to telemetry when importing sample data

---------

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

.eslintignore

@@ -143,6 +143,4 @@ src/Explorer/Tree/ResourceTreeAdapter.tsx
 __mocks__/monaco-editor.ts
 src/Explorer/Tree/ResourceTree.tsx
 src/Utils/EndpointUtils.ts
-src/Utils/PriorityBasedExecutionUtils.ts
-
-utils/local-proxy/**
+src/Utils/PriorityBasedExecutionUtils.ts

.github/workflows/ci.yml

@@ -198,6 +198,18 @@ jobs:
             GREMLIN_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-gremlin.documents.azure.com/.default" -o tsv --query accessToken)
             echo "::add-mask::$GREMLIN_TESTACCOUNT_TOKEN"
             echo GREMLIN_TESTACCOUNT_TOKEN=$GREMLIN_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
+            echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
+            echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
+            echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
+            echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
       - name: Run test shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}
         run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers=3
       - name: Upload blob report to GitHub Actions Artifacts

.vscode/settings.json

@@ -24,5 +24,14 @@
     "source.organizeImports": "explicit"
   },
   "typescript.preferences.importModuleSpecifier": "non-relative",
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  }
 }

configs/emulator-http.json

@@ -1,3 +0,0 @@
-{
-    "EMULATOR_ENDPOINT": "http://localhost:8081"
-}

images/AzureOpenAi.svg

@@ -0,0 +1 @@
+<svg id="uuid-adbdae8e-5a41-46d1-8c18-aa73cdbfee32" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="m0,2.7v12.6c0,1.491,1.209,2.7,2.7,2.7h12.6c1.491,0,2.7-1.209,2.7-2.7V2.7c0-1.491-1.209-2.7-2.7-2.7H2.7C1.209,0,0,1.209,0,2.7ZM10.8,0v3.6c0,3.976,3.224,7.2,7.2,7.2h-3.6c-3.976,0-7.199,3.222-7.2,7.198v-3.598c0-3.976-3.224-7.2-7.2-7.2h3.6c3.976,0,7.2-3.224,7.2-7.2Z" fill="#000000" stroke-width="0" /></svg>

images/ContainerCopy/copy-jobs.svg

@@ -0,0 +1,17 @@
+<svg width="96" height="104" viewBox="0 0 96 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.2" d="M80.5008 81.2203L41.2637 58.2012L35.7705 61.9941L74.6152 84.6208L80.5008 81.2203Z" fill="#AAAAAA"/>
+<path opacity="0.2" d="M60.2283 92.5992L20.9912 69.5801L15.498 73.373L54.3428 95.9997L60.2283 92.5992Z" fill="#AAAAAA"/>
+<path d="M63.7596 30.9969L74.8768 37.4057L74.746 82.1359L35.7705 59.7708L35.9013 3.00781L63.7596 19.095V30.9969Z" fill="#C9C9C9"/>
+<path d="M35.9014 3.00818L41.0022 0L68.8605 16.0872L63.7597 19.0954L35.9014 3.00818Z" fill="#AAAAAA"/>
+<path d="M74.8769 37.4067L79.9777 34.5293L79.8469 79.2596L74.7461 82.2677L74.8769 37.4067Z" fill="#AAAAAA"/>
+<path d="M43.4872 42.245L54.6043 48.6537L54.4735 93.384L15.498 71.0188L15.6288 14.2559L43.4872 30.3431V42.245Z" fill="#F4F4F4"/>
+<path d="M15.6289 14.2562L20.7297 11.248L48.5881 27.3352L43.4872 30.3434L15.6289 14.2562Z" fill="#DCDCDC"/>
+<path d="M54.6044 48.6547L59.7052 45.7773L59.5745 90.5076L54.4736 93.5158L54.6044 48.6547Z" fill="#DCDCDC"/>
+<path d="M63.7598 19.0961L68.8606 16.0879L79.9778 34.5293L74.8769 37.4067L63.7598 19.0961Z" fill="#C9C9C9"/>
+<path d="M63.7598 19.0957L74.8769 37.4063L63.7598 30.9976V19.0957Z" fill="#DCDCDC"/>
+<path d="M43.4873 30.3441L48.5881 27.3359L59.7053 45.7774L54.6045 48.6548L43.4873 30.3441Z" fill="#F4F4F4"/>
+<path d="M43.4873 30.3438L54.6045 48.6544L43.4873 42.2457V30.3438Z" fill="#C9C9C9"/>
+<path d="M46.8751 52.4595V55.9693L23.2275 42.1367V38.627L46.8751 52.4595Z" fill="#C9C9C9"/>
+<path d="M46.8751 59.0658V62.5756L23.2275 48.6914V45.1816L46.8751 59.0658Z" fill="#C9C9C9"/>
+<path d="M46.8751 65.3621V68.8719L23.2275 54.9877V51.6328L46.8751 65.3621Z" fill="#C9C9C9"/>
+</svg>

images/github-black-and-white.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C8.73438 0 9.44271 0.0960961 10.125 0.288288C10.8073 0.48048 11.4427 0.758091 12.0312 1.12112C12.6198 1.48415 13.1589 1.91124 13.6484 2.4024C14.138 2.89356 14.5573 3.44611 14.9062 4.06006C15.2552 4.67401 15.5234 5.32799 15.7109 6.02202C15.8984 6.71605 15.9948 7.44211 16 8.2002C16 9.08108 15.8698 9.92993 15.6094 10.7467C15.349 11.5636 14.9766 12.3136 14.4922 12.997C14.0078 13.6803 13.4323 14.2783 12.7656 14.7908C12.099 15.3033 11.3542 15.701 10.5312 15.984C10.5156 15.9893 10.4922 15.992 10.4609 15.992C10.4297 15.992 10.4062 15.9947 10.3906 16C10.2656 16 10.1667 15.9626 10.0938 15.8879C10.0208 15.8131 9.98438 15.7144 9.98438 15.5916V14.4705C9.98438 14.1021 9.98698 13.7257 9.99219 13.3413C9.99219 13.0691 9.95312 12.7941 9.875 12.5165C9.79688 12.2389 9.65625 12.0067 9.45312 11.8198C10.0573 11.7504 10.5859 11.625 11.0391 11.4434C11.4922 11.2619 11.8724 11.0057 12.1797 10.6747C12.487 10.3437 12.7161 9.94328 12.8672 9.47347C13.0182 9.00367 13.0964 8.43777 13.1016 7.77578C13.1016 7.35936 13.0339 6.96697 12.8984 6.5986C12.763 6.23023 12.5573 5.88856 12.2812 5.57357C12.3385 5.42409 12.3802 5.26927 12.4062 5.10911C12.4323 4.94895 12.4453 4.78879 12.4453 4.62863C12.4453 4.42042 12.4245 4.21488 12.3828 4.01201C12.3411 3.80914 12.2812 3.60627 12.2031 3.4034C12.1771 3.39273 12.1484 3.38739 12.1172 3.38739C12.0859 3.38739 12.0573 3.38739 12.0312 3.38739C11.8646 3.38739 11.6901 3.41408 11.5078 3.46747C11.3255 3.52085 11.1458 3.59026 10.9688 3.67568C10.7917 3.76109 10.6172 3.85452 10.4453 3.95596C10.2734 4.05739 10.125 4.15349 10 4.24424C9.34896 4.05739 8.68229 3.96396 8 3.96396C7.31771 3.96396 6.65104 4.05739 6 4.24424C5.86979 4.15349 5.72135 4.05739 5.55469 3.95596C5.38802 3.85452 5.21615 3.76376 5.03906 3.68368C4.86198 3.6036 4.67969 3.5342 4.49219 3.47548C4.30469 3.41675 4.13021 3.38739 3.96875 3.38739H3.88281C3.85156 3.38739 3.82292 3.39273 3.79688 3.4034C3.72396 3.60093 3.66667 3.80113 3.625 4.004C3.58333 4.20687 3.5599 4.41508 3.55469 4.62863C3.55469 4.78879 3.56771 4.94895 3.59375 5.10911C3.61979 5.26927 3.66146 5.42409 3.71875 5.57357C3.44271 5.88322 3.23698 6.22222 3.10156 6.59059C2.96615 6.95896 2.89844 7.35402 2.89844 7.77578C2.89844 8.42709 2.97396 8.99032 3.125 9.46547C3.27604 9.94061 3.50521 10.341 3.8125 10.6667C4.11979 10.9923 4.5 11.2513 4.95312 11.4434C5.40625 11.6356 5.9349 11.7638 6.53906 11.8278C6.38802 11.9666 6.27344 12.1321 6.19531 12.3243C6.11719 12.5165 6.0625 12.7167 6.03125 12.9249C5.89062 12.9943 5.74219 13.0477 5.58594 13.0851C5.42969 13.1225 5.27344 13.1411 5.11719 13.1411C4.78385 13.1411 4.50781 13.0611 4.28906 12.9009C4.07031 12.7407 3.875 12.5219 3.70312 12.2442C3.64062 12.1428 3.5651 12.0414 3.47656 11.9399C3.38802 11.8385 3.29167 11.7477 3.1875 11.6677C3.08333 11.5876 2.97135 11.5235 2.85156 11.4755C2.73177 11.4274 2.60677 11.4007 2.47656 11.3954H2.38281C2.34115 11.3954 2.30208 11.4034 2.26562 11.4194C2.22917 11.4354 2.19271 11.4515 2.15625 11.4675C2.11979 11.4835 2.10417 11.5102 2.10938 11.5475C2.10938 11.6116 2.14583 11.673 2.21875 11.7317C2.29167 11.7905 2.35156 11.8385 2.39844 11.8759L2.42188 11.8919C2.53646 11.9826 2.63542 12.0681 2.71875 12.1481C2.80208 12.2282 2.88021 12.3163 2.95312 12.4124C3.02604 12.5085 3.08594 12.6099 3.13281 12.7167C3.17969 12.8235 3.23958 12.9489 3.3125 13.0931C3.48958 13.5095 3.73698 13.8111 4.05469 13.998C4.3724 14.1849 4.75521 14.2809 5.20312 14.2863C5.33854 14.2863 5.47396 14.2783 5.60938 14.2623C5.74479 14.2462 5.88021 14.2222 6.01562 14.1902V15.5836C6.01562 15.7117 5.97917 15.8131 5.90625 15.8879C5.83333 15.9626 5.73177 16 5.60156 16H5.53906C5.51302 16 5.48958 15.9947 5.46875 15.984C4.65104 15.7117 3.90625 15.3193 3.23438 14.8068C2.5625 14.2943 1.98698 13.6937 1.50781 13.005C1.02865 12.3163 0.658854 11.5636 0.398438 10.7467C0.138021 9.92993 0.00520833 9.08108 0 8.2002C0 7.44745 0.09375 6.72139 0.28125 6.02202C0.46875 5.32266 0.739583 4.67134 1.09375 4.06807C1.44792 3.4648 1.86458 2.91225 2.34375 2.41041C2.82292 1.90858 3.36198 1.47881 3.96094 1.12112C4.5599 0.76343 5.19792 0.488488 5.875 0.296296C6.55208 0.104104 7.26042 0.00533867 8 0Z" fill="#000000"/>
+</svg>

package-lock.json

@@ -205,58 +205,6 @@
         "webpack-dev-server": "4.15.2"
       }
     },
-    "canvas": {
-      "version": "1.0.0",
-      "extraneous": true,
-      "license": "ISC"
-    },
-    "local_dependencies/@azure/cosmos": {
-      "version": "4.0.1-beta.3",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "@azure/abort-controller": "^1.0.0",
-        "@azure/core-auth": "^1.3.0",
-        "@azure/core-rest-pipeline": "^1.2.0",
-        "@azure/core-tracing": "^1.0.0",
-        "debug": "^4.1.1",
-        "fast-json-stable-stringify": "^2.1.0",
-        "jsbi": "^3.1.3",
-        "node-abort-controller": "^3.0.0",
-        "priorityqueuejs": "^2.0.0",
-        "semaphore": "^1.0.5",
-        "tslib": "^2.2.0",
-        "universal-user-agent": "^6.0.0",
-        "uuid": "^8.3.0"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "local_dependencies/cosmos": {
-      "name": "@azure/cosmos",
-      "version": "4.0.1-beta.3",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "@azure/abort-controller": "^1.0.0",
-        "@azure/core-auth": "^1.3.0",
-        "@azure/core-rest-pipeline": "^1.2.0",
-        "@azure/core-tracing": "^1.0.0",
-        "debug": "^4.1.1",
-        "fast-json-stable-stringify": "^2.1.0",
-        "jsbi": "^3.1.3",
-        "node-abort-controller": "^3.0.0",
-        "priorityqueuejs": "^2.0.0",
-        "semaphore": "^1.0.5",
-        "tslib": "^2.2.0",
-        "universal-user-agent": "^6.0.0",
-        "uuid": "^8.3.0"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
     "node_modules/@aashutoshrathi/word-wrap": {
       "version": "1.2.6",
       "license": "MIT",
@@ -443,15 +391,9 @@
       "license": "0BSD"
     },
     "node_modules/@azure/cosmos": {
-<<<<<<< HEAD
-      "version": "4.2.0-beta.1",
-      "resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-4.2.0-beta.1.tgz",
-      "integrity": "sha512-mREONehm1DxjEKXGaNU6Wmpf9Ckb9IrhKFXhDFVs45pxmoEb3y2s/Ub0owuFmqlphpcS1zgtYQn5exn+lwnJuQ==",
-=======
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-4.5.0.tgz",
       "integrity": "sha512-JsTh4twb6FcwP7rJwxQiNZQ/LGtuF6gmciaxY9Rnp6/A325Lhsw/SH4R2ArpT0yCvozbZpweIwdPfUkXVBtp5w==",
->>>>>>> master
       "license": "MIT",
       "dependencies": {
         "@azure/abort-controller": "^2.1.2",
@@ -499,12 +441,7 @@
     "node_modules/@azure/cosmos/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-<<<<<<< HEAD
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
-=======
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
->>>>>>> master
     },
     "node_modules/@azure/identity": {
       "version": "4.5.0",
@@ -7956,7 +7893,7 @@
       }
     },
     "node_modules/@nteract/data-explorer/node_modules/cross-spawn": {
-      "version": "7.0.5",
+      "version": "6.0.5",
       "license": "MIT",
       "dependencies": {
         "nice-try": "^1.0.4",
@@ -8080,7 +8017,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "cross-spawn": "^7.0.5",
+        "cross-spawn": "^6.0.0",
         "get-stream": "^4.0.0",
         "is-stream": "^1.1.0",
         "npm-run-path": "^2.0.0",
@@ -16508,7 +16445,7 @@
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.5",
+      "version": "7.0.3",
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -18422,7 +18359,7 @@
         "@nodelib/fs.walk": "^1.2.8",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.5",
+        "cross-spawn": "^7.0.2",
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
@@ -19009,7 +18946,7 @@
       "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
       "devOptional": true,
       "dependencies": {
-        "cross-spawn": "^7.0.5",
+        "cross-spawn": "^7.0.3",
         "get-stream": "^6.0.0",
         "human-signals": "^2.1.0",
         "is-stream": "^2.0.0",
@@ -19274,7 +19211,7 @@
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.12",
+        "path-to-regexp": "0.1.7",
         "proxy-addr": "~2.0.7",
         "qs": "6.11.0",
         "range-parser": "~1.2.1",
@@ -19310,7 +19247,7 @@
       "license": "MIT"
     },
     "node_modules/express/node_modules/path-to-regexp": {
-      "version": "0.1.12",
+      "version": "0.1.7",
       "dev": true,
       "license": "MIT"
     },
@@ -30598,7 +30535,7 @@
         "@yarnpkg/lockfile": "^1.1.0",
         "chalk": "^4.1.2",
         "ci-info": "^3.7.0",
-        "cross-spawn": "^7.0.5",
+        "cross-spawn": "^7.0.3",
         "find-yarn-workspace-root": "^2.0.0",
         "fs-extra": "^9.0.0",
         "json-stable-stringify": "^1.0.2",
@@ -31576,7 +31513,7 @@
         "address": "^1.1.2",
         "browserslist": "^4.18.1",
         "chalk": "^4.1.2",
-        "cross-spawn": "^7.0.5",
+        "cross-spawn": "^7.0.3",
         "detect-port-alt": "^1.1.6",
         "escape-string-regexp": "^4.0.0",
         "filesize": "^8.0.6",
@@ -33032,7 +32969,7 @@
       }
     },
     "node_modules/sane/node_modules/cross-spawn": {
-      "version": "7.0.5",
+      "version": "6.0.5",
       "license": "MIT",
       "dependencies": {
         "nice-try": "^1.0.4",
@@ -33049,7 +32986,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "cross-spawn": "^7.0.5",
+        "cross-spawn": "^6.0.0",
         "get-stream": "^4.0.0",
         "is-stream": "^1.1.0",
         "npm-run-path": "^2.0.0",
@@ -36018,7 +35955,7 @@
         "@webpack-cli/serve": "^2.0.5",
         "colorette": "^2.0.14",
         "commander": "^10.0.1",
-        "cross-spawn": "^7.0.5",
+        "cross-spawn": "^7.0.3",
         "envinfo": "^7.7.3",
         "fastest-levenshtein": "^1.0.12",
         "import-local": "^3.0.2",
@@ -36543,7 +36480,7 @@
       }
     },
     "node_modules/windows-release/node_modules/cross-spawn": {
-      "version": "7.0.5",
+      "version": "6.0.5",
       "license": "MIT",
       "dependencies": {
         "nice-try": "^1.0.4",
@@ -36560,7 +36497,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "cross-spawn": "^7.0.5",
+        "cross-spawn": "^6.0.0",
         "get-stream": "^4.0.0",
         "is-stream": "^1.1.0",
         "npm-run-path": "^2.0.0",

package.json

@@ -206,11 +206,9 @@
     "build:dataExplorer:ci": "npm run build:ci",
     "build": "npm run format:check && npm run lint && npm run compile && npm run compile:strict && npm run pack:prod && npm run copyToConsumers",
     "build:ci": "npm run format:check && npm run lint && npm run compile && npm run compile:strict && npm run pack:fast",
-    "build:proxy": "npm run compile && npm run compile:strict && npm run pack:prod && npm run copyToProxy",
     "pack:prod": "webpack  --mode production",
     "pack:fast": "webpack  --mode development --progress",
     "copyToConsumers": "node copyToConsumers",
-    "copyToProxy": "rm -rf ./utils/local-proxy/dist && cp -r ./dist ./utils/local-proxy",
     "test": "rimraf coverage && jest",
     "test:debug": "jest --runInBand",
     "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",

preview/.azure/config

@@ -1,6 +1,6 @@
 [defaults]
 group = dataexplorer-preview
-sku = P1V2
+sku = P1v2
 appserviceplan = dataexplorer-preview
 location = westus2
 web = dataexplorer-preview

preview/package.json

@@ -4,16 +4,18 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "deploy": "az webapp up --name \"dataexplorer-preview\" --subscription \"cosmosdb-portalteam-runners\" --resource-group \"dataexplorer-preview\" --runtime \"NODE:18-lts\" --sku P1V2",
+    "deploy": "az webapp up --name \"dataexplorer-preview\" --subscription \"cosmosdb-portalteam-runners\" --resource-group \"dataexplorer-preview\" --runtime \"NODE:20-lts\" --sku P1V2",
     "start": "node index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "Microsoft Corporation",
   "dependencies": {
-    "express": "^4.17.1",
+    "body-parser": "^1.20.3",
+    "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.3",
-    "node": "^18.20.6",
-    "node-fetch": "^2.6.1"
+    "node": "^20.19.5",
+    "node-fetch": "^2.6.1",
+    "path-to-regexp": "^0.1.12"
   }
 }

src/Common/Constants.ts

@@ -138,6 +138,14 @@ export enum MongoBackendEndpointType {
   remote,
 }
 
+export class AadScopeEndpoints {
+  public static readonly Development: string = "https://cosmos.azure.com";
+  public static readonly MPAC: string = "https://cosmos.azure.com";
+  public static readonly Prod: string = "https://cosmos.azure.com";
+  public static readonly Fairfax: string = "https://cosmos.azure.us";
+  public static readonly Mooncake: string = "https://cosmos.azure.cn";
+}
+
 export class PortalBackendEndpoints {
   public static readonly Development: string = "https://localhost:7235";
   public static readonly Mpac: string = "https://cdb-ms-mpac-pbe.cosmos.azure.com";
@@ -255,6 +263,7 @@ export class HttpHeaders {
   public static activityId: string = "x-ms-activity-id";
   public static apiType: string = "x-ms-cosmos-apitype";
   public static authorization: string = "authorization";
+  public static entraIdToken: string = "x-ms-entraid-token";
   public static collectionIndexTransformationProgress: string =
     "x-ms-documentdb-collection-index-transformation-progress";
   public static continuation: string = "x-ms-continuation";
@@ -765,3 +774,10 @@ export const ShortenedQueryCopilotSampleContainerSchema = {
 
   userPrompt: "find all products",
 };
+
+export enum MongoGuidRepresentation {
+  Standard = "Standard",
+  CSharpLegacy = "CSharpLegacy",
+  JavaLegacy = "JavaLegacy",
+  PythonLegacy = "PythonLegacy",
+}

src/Common/DatabaseAccountUtility.ts

@@ -1,7 +1,7 @@
 import { TagNames, WorkloadType } from "Common/Constants";
 import { Tags } from "Contracts/DataModels";
 import { isFabric } from "Platform/Fabric/FabricUtil";
-import { userContext } from "../UserContext";
+import { ApiType, userContext } from "../UserContext";
 
 function isVirtualNetworkFilterEnabled() {
   return userContext.databaseAccount?.properties?.isVirtualNetworkFilterEnabled;
@@ -33,3 +33,33 @@ export function isGlobalSecondaryIndexEnabled(): boolean {
     !isFabric() && userContext.apiType === "SQL" && userContext.databaseAccount?.properties?.enableMaterializedViews
   );
 }
+
+export const getDatabaseEndpoint = (apiType: ApiType): string => {
+  switch (apiType) {
+    case "Mongo":
+      return "mongodbDatabases";
+    case "Cassandra":
+      return "cassandraKeyspaces";
+    case "Gremlin":
+      return "gremlinDatabases";
+    case "Tables":
+      return "tables";
+    default:
+    case "SQL":
+      return "sqlDatabases";
+  }
+};
+
+export const getCollectionEndpoint = (apiType: ApiType): string => {
+  switch (apiType) {
+    case "Mongo":
+      return "collections";
+    case "Cassandra":
+      return "tables";
+    case "Gremlin":
+      return "graphs";
+    default:
+    case "SQL":
+      return "containers";
+  }
+};

src/Common/EnvironmentUtility.test.ts

@@ -28,3 +28,39 @@ describe("Environment Utility Test", () => {
     expect(EnvironmentUtility.getEnvironment()).toBe(EnvironmentUtility.Environment.Development);
   });
 });
+describe("normalizeArmEndpoint", () => {
+  it("should append '/' if not present", () => {
+    expect(EnvironmentUtility.normalizeArmEndpoint("https://example.com")).toBe("https://example.com/");
+  });
+
+  it("should return the same uri if '/' is present at the end", () => {
+    expect(EnvironmentUtility.normalizeArmEndpoint("https://example.com/")).toBe("https://example.com/");
+  });
+
+  it("should handle empty string", () => {
+    expect(EnvironmentUtility.normalizeArmEndpoint("")).toBe("");
+  });
+});
+
+describe("getEnvironment", () => {
+  it("should return Prod environment", () => {
+    updateConfigContext({
+      PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Prod,
+    });
+    expect(EnvironmentUtility.getEnvironment()).toBe(EnvironmentUtility.Environment.Prod);
+  });
+
+  it("should return Fairfax environment", () => {
+    updateConfigContext({
+      PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Fairfax,
+    });
+    expect(EnvironmentUtility.getEnvironment()).toBe(EnvironmentUtility.Environment.Fairfax);
+  });
+
+  it("should return Mooncake environment", () => {
+    updateConfigContext({
+      PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Mooncake,
+    });
+    expect(EnvironmentUtility.getEnvironment()).toBe(EnvironmentUtility.Environment.Mooncake);
+  });
+});

src/Common/EnvironmentUtility.ts

@@ -1,4 +1,5 @@
-import { PortalBackendEndpoints } from "Common/Constants";
+import { AadScopeEndpoints, PortalBackendEndpoints } from "Common/Constants";
+import * as Logger from "Common/Logger";
 import { configContext } from "ConfigContext";
 
 export function normalizeArmEndpoint(uri: string): string {
@@ -27,3 +28,17 @@ export const getEnvironment = (): Environment => {
 
   return environmentMap[configContext.PORTAL_BACKEND_ENDPOINT];
 };
+
+export const getEnvironmentScopeEndpoint = (): string => {
+  const environment = getEnvironment();
+  const endpoint = AadScopeEndpoints[environment];
+  if (!endpoint) {
+    throw new Error("Cannot determine AAD scope endpoint");
+  }
+  const hrefEndpoint = new URL(endpoint).href.replace(/\/+$/, "/.default");
+  Logger.logInfo(
+    `Using AAD scope endpoint: ${hrefEndpoint}, Environment: ${environment}`,
+    "EnvironmentUtility/getEnvironmentScopeEndpoint",
+  );
+  return hrefEndpoint;
+};

src/Common/MongoProxyClient.ts

@@ -1,4 +1,5 @@
 import { Constants as CosmosSDKConstants } from "@azure/cosmos";
+import { getMongoGuidRepresentation } from "Shared/StorageUtility";
 import { AuthType } from "../AuthType";
 import { configContext } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
@@ -6,6 +7,7 @@ import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
 import { userContext } from "../UserContext";
+import { isDataplaneRbacEnabledForProxyApi } from "../Utils/AuthorizationUtils";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import { ApiType, ContentType, HttpHeaders, HttpStatusCodes } from "./Constants";
 import { MinimalQueryIterator } from "./IteratorUtilities";
@@ -21,7 +23,13 @@ function authHeaders() {
   if (userContext.authType === AuthType.EncryptedToken) {
     return { [HttpHeaders.guestAccessToken]: userContext.accessToken };
   } else {
-    return { [HttpHeaders.authorization]: userContext.authorizationToken };
+    const headers: { [key: string]: string } = {
+      [HttpHeaders.authorization]: userContext.authorizationToken,
+    };
+    if (isDataplaneRbacEnabledForProxyApi(userContext)) {
+      headers[HttpHeaders.entraIdToken] = userContext.aadToken;
+    }
+    return headers;
   }
 }
 
@@ -139,6 +147,9 @@ export function readDocument(
       documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
         ? documentId.partitionKeyProperties?.[0]
         : "",
+    clientSettings: {
+      guidRepresentation: getMongoGuidRepresentation(),
+    },
   };
 
   const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
@@ -181,6 +192,9 @@ export function createDocument(
     partitionKey:
       collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : "",
     documentContent: JSON.stringify(documentContent),
+    clientSettings: {
+      guidRepresentation: getMongoGuidRepresentation(),
+    },
   };
 
   const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
@@ -228,6 +242,9 @@ export function updateDocument(
         ? documentId.partitionKeyProperties?.[0]
         : "",
     documentContent,
+    clientSettings: {
+      guidRepresentation: getMongoGuidRepresentation(),
+    },
   };
   const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
 
@@ -274,6 +291,9 @@ export function deleteDocuments(
     subscriptionID: userContext.subscriptionId,
     resourceGroup: userContext.resourceGroup,
     databaseAccountName: databaseAccount.name,
+    clientSettings: {
+      guidRepresentation: getMongoGuidRepresentation(),
+    },
   };
   const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
 

src/Common/ShimmerTree/index.tsx

@@ -0,0 +1,40 @@
+import { Shimmer, ShimmerElementType, Stack } from "@fluentui/react";
+import * as React from "react";
+
+export interface IndentLevel {
+  level: number;
+  width?: string;
+}
+interface ShimmerTreeProps {
+  indentLevels: IndentLevel[];
+  style?: React.CSSProperties;
+}
+
+const ShimmerTree = ({ indentLevels, style = {} }: ShimmerTreeProps) => {
+  /**
+   * indentLevels - Array of indent levels for shimmer tree
+   * 0 - Root
+   * 1 - Level 1
+   * 2 - Level 2
+   * 3 - Level 3
+   * n - Level n
+   * */
+  const renderShimmers = (indent: IndentLevel) => (
+    <Shimmer
+      key={Math.random()}
+      shimmerElements={[
+        { type: ShimmerElementType.gap, width: `${indent.level * 20}px` }, // Indent for hierarchy
+        { type: ShimmerElementType.line, height: 16, width: indent.width || "100%" },
+      ]}
+      style={{ marginBottom: 8 }}
+    />
+  );
+
+  return (
+    <Stack tokens={{ childrenGap: 8 }} style={{ width: "50%", ...style }} data-testid="shimmer-stack">
+      {indentLevels.map((indentLevel: IndentLevel) => renderShimmers(indentLevel))}
+    </Stack>
+  );
+};
+
+export default ShimmerTree;

src/Common/dataAccess/createCollection.ts

@@ -1,4 +1,6 @@
 import { ContainerRequest, ContainerResponse, DatabaseRequest, DatabaseResponse, RequestOptions } from "@azure/cosmos";
+import { sendMessage } from "Common/MessageHandler";
+import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
 import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
@@ -43,6 +45,14 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
     }
 
     logConsoleInfo(`Successfully created container ${params.collectionId}`);
+
+    if (isFabricNative()) {
+      sendMessage({
+        type: FabricMessageTypes.ContainerUpdated,
+        params: { updateType: "created" },
+      });
+    }
+
     return collection;
   } catch (error) {
     handleError(error, "CreateCollection", `Error while creating container ${params.collectionId}`);

src/Common/dataAccess/deleteCollection.ts

@@ -1,3 +1,5 @@
+import { sendMessage } from "Common/MessageHandler";
+import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
 import { isFabric } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
@@ -19,6 +21,11 @@ export async function deleteCollection(databaseId: string, collectionId: string)
       await client().database(databaseId).container(collectionId).delete();
     }
     logConsoleInfo(`Successfully deleted container ${collectionId}`);
+
+    sendMessage({
+      type: FabricMessageTypes.ContainerUpdated,
+      params: { updateType: "deleted" },
+    });
   } catch (error) {
     handleError(error, "DeleteCollection", `Error while deleting container ${collectionId}`);
     throw error;

src/ConfigContext.ts

@@ -19,7 +19,6 @@ export enum Platform {
   Hosted = "Hosted",
   Emulator = "Emulator",
   Fabric = "Fabric",
-  VNextEmulator = "VNextEmulator",
 }
 
 export interface ConfigContext {
@@ -111,11 +110,30 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     return;
   }
 
-  if (!validateEndpoint(newContext.AAD_ENDPOINT, configContext.allowedAadEndpoints || defaultAllowedAadEndpoints)) {
+  if (newContext.allowedAadEndpoints) {
+    Object.assign(configContext, { allowedAadEndpoints: newContext.allowedAadEndpoints });
+  }
+  if (newContext.allowedArmEndpoints) {
+    Object.assign(configContext, { allowedArmEndpoints: newContext.allowedArmEndpoints });
+  }
+  if (newContext.allowedGraphEndpoints) {
+    Object.assign(configContext, { allowedGraphEndpoints: newContext.allowedGraphEndpoints });
+  }
+  if (newContext.allowedBackendEndpoints) {
+    Object.assign(configContext, { allowedBackendEndpoints: newContext.allowedBackendEndpoints });
+  }
+  if (newContext.allowedMongoProxyEndpoints) {
+    Object.assign(configContext, { allowedMongoProxyEndpoints: newContext.allowedMongoProxyEndpoints });
+  }
+  if (newContext.allowedCassandraProxyEndpoints) {
+    Object.assign(configContext, { allowedCassandraProxyEndpoints: newContext.allowedCassandraProxyEndpoints });
+  }
+
+  if (!validateEndpoint(newContext.AAD_ENDPOINT, configContext.allowedAadEndpoints)) {
     delete newContext.AAD_ENDPOINT;
   }
 
-  if (!validateEndpoint(newContext.ARM_ENDPOINT, configContext.allowedArmEndpoints || defaultAllowedArmEndpoints)) {
+  if (!validateEndpoint(newContext.ARM_ENDPOINT, configContext.allowedArmEndpoints)) {
     delete newContext.ARM_ENDPOINT;
   }
 
@@ -123,9 +141,7 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     delete newContext.EMULATOR_ENDPOINT;
   }
 
-  if (
-    !validateEndpoint(newContext.GRAPH_ENDPOINT, configContext.allowedGraphEndpoints || defaultAllowedGraphEndpoints)
-  ) {
+  if (!validateEndpoint(newContext.GRAPH_ENDPOINT, configContext.allowedGraphEndpoints)) {
     delete newContext.GRAPH_ENDPOINT;
   }
 
@@ -133,30 +149,15 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     delete newContext.ARCADIA_ENDPOINT;
   }
 
-  if (
-    !validateEndpoint(
-      newContext.PORTAL_BACKEND_ENDPOINT,
-      configContext.allowedBackendEndpoints || defaultAllowedBackendEndpoints,
-    )
-  ) {
+  if (!validateEndpoint(newContext.PORTAL_BACKEND_ENDPOINT, configContext.allowedBackendEndpoints)) {
     delete newContext.PORTAL_BACKEND_ENDPOINT;
   }
 
-  if (
-    !validateEndpoint(
-      newContext.MONGO_PROXY_ENDPOINT,
-      configContext.allowedMongoProxyEndpoints || defaultAllowedMongoProxyEndpoints,
-    )
-  ) {
+  if (!validateEndpoint(newContext.MONGO_PROXY_ENDPOINT, configContext.allowedMongoProxyEndpoints)) {
     delete newContext.MONGO_PROXY_ENDPOINT;
   }
 
-  if (
-    !validateEndpoint(
-      newContext.CASSANDRA_PROXY_ENDPOINT,
-      configContext.allowedCassandraProxyEndpoints || defaultAllowedCassandraProxyEndpoints,
-    )
-  ) {
+  if (!validateEndpoint(newContext.CASSANDRA_PROXY_ENDPOINT, configContext.allowedCassandraProxyEndpoints)) {
     delete newContext.CASSANDRA_PROXY_ENDPOINT;
   }
 
@@ -226,7 +227,6 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
         case Platform.Fabric:
         case Platform.Hosted:
         case Platform.Emulator:
-        case Platform.VNextEmulator:
           updateConfigContext({ platform });
       }
     }

src/Contracts/DataExplorerMessagesContract.ts

@@ -1,4 +1,5 @@
 import { FabricMessageTypes } from "./FabricMessageTypes";
+import { MessageTypes } from "./MessageTypes";
 
 // This is the current version of these messages
 export const DATA_EXPLORER_RPC_VERSION = "3";
@@ -19,9 +20,32 @@ export type DataExploreMessageV3 =
       type: FabricMessageTypes.GetAllResourceTokens;
       id: string;
     }
+  | {
+      type: FabricMessageTypes.GetAccessToken;
+      id: string;
+    }
+  | {
+      type: MessageTypes.TelemetryInfo;
+      data: {
+        action: string;
+        actionModifier: string;
+        data: unknown;
+        timestamp: number;
+      };
+    }
   | {
       type: FabricMessageTypes.OpenSettings;
-      settingsId: string;
+      params: [{ settingsId?: "About" | "Connection" }];
+    }
+  | {
+      type: FabricMessageTypes.RestoreContainer;
+      params: [];
+    }
+  | {
+      type: FabricMessageTypes.ContainerUpdated;
+      params: {
+        updateType: "created" | "deleted" | "settings";
+      };
     };
 export interface GetCosmosTokenMessageOptions {
   verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";

src/Contracts/DataModels.ts

@@ -10,15 +10,42 @@ export interface ArmEntity {
   resourceGroup?: string;
 }
 
+export interface DatabaseAccountUserAssignedIdentity {
+  [key: string]: {
+    principalId: string;
+    clientId: string;
+  };
+}
+
+export interface DatabaseAccountIdentity {
+  type: string;
+  principalId?: string;
+  tenantId?: string;
+  userAssignedIdentities?: DatabaseAccountUserAssignedIdentity;
+}
+
 export interface DatabaseAccount extends ArmEntity {
   properties: DatabaseAccountExtendedProperties;
   systemData?: DatabaseAccountSystemData;
+  identity?: DatabaseAccountIdentity | null;
 }
 
 export interface DatabaseAccountSystemData {
   createdAt: string;
 }
 
+export interface DatabaseAccountBackupPolicy {
+  type: string;
+  /* periodicModeProperties?: {
+    backupIntervalInMinutes: number;
+    backupRetentionIntervalInHours: number;
+    backupStorageRedundancy: string;
+  };
+  continuousModeProperties?: {
+    tier: string;
+  }; */
+}
+
 export interface DatabaseAccountExtendedProperties {
   documentEndpoint?: string;
   disableLocalAuth?: boolean;
@@ -29,6 +56,8 @@ export interface DatabaseAccountExtendedProperties {
   capabilities?: Capability[];
   enableMultipleWriteLocations?: boolean;
   mongoEndpoint?: string;
+  backupPolicy?: DatabaseAccountBackupPolicy;
+  defaultIdentity?: string;
   readLocations?: DatabaseAccountResponseLocation[];
   writeLocations?: DatabaseAccountResponseLocation[];
   enableFreeTier?: boolean;
@@ -101,6 +130,24 @@ export interface Subscription {
   authorizationSource?: string;
 }
 
+export interface DatabaseModel extends ArmEntity {
+  properties: DatabaseGetProperties;
+}
+
+export interface DatabaseGetProperties {
+  resource: DatabaseResource & ExtendedResourceProperties;
+}
+export interface DatabaseResource {
+  id: string;
+}
+
+export interface ExtendedResourceProperties {
+  readonly _rid?: string;
+  readonly _self?: string;
+  readonly _ts?: number;
+  readonly _etag?: string;
+}
+
 export interface SubscriptionPolicies {
   locationPlacementId: string;
   quotaId: string;

src/Contracts/FabricMessageTypes.ts

@@ -7,6 +7,8 @@ export enum FabricMessageTypes {
   GetAccessToken = "GetAccessToken",
   Ready = "Ready",
   OpenSettings = "OpenSettings",
+  RestoreContainer = "RestoreContainer",
+  ContainerUpdated = "ContainerUpdated",
 }
 
 export interface AuthorizationToken {

src/Contracts/ViewModels.ts

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

src/Explorer/ContainerCopy/Actions/CopyJobActions.tsx

@@ -0,0 +1,186 @@
+import React from "react";
+import { userContext } from "UserContext";
+import { useSidePanel } from "../../../hooks/useSidePanel";
+import {
+  cancel,
+  complete,
+  create,
+  listByDatabaseAccount,
+  pause,
+  resume,
+} from "../../../Utils/arm/generatedClients/dataTransferService/dataTransferJobs";
+import {
+  CreateJobRequest,
+  DataTransferJobGetResults,
+} from "../../../Utils/arm/generatedClients/dataTransferService/types";
+import ContainerCopyMessages from "../ContainerCopyMessages";
+import {
+  convertTime,
+  convertToCamelCase,
+  COSMOS_SQL_COMPONENT,
+  extractErrorMessage,
+  formatUTCDateTime,
+  getAccountDetailsFromResourceId,
+} from "../CopyJobUtils";
+import CreateCopyJobScreensProvider from "../CreateCopyJob/Screens/CreateCopyJobScreensProvider";
+import { CopyJobActions, CopyJobStatusType } from "../Enums";
+import { MonitorCopyJobsRefState } from "../MonitorCopyJobs/MonitorCopyJobRefState";
+import { CopyJobContextState, CopyJobError, CopyJobErrorType, CopyJobType } from "../Types";
+
+export const openCreateCopyJobPanel = () => {
+  const sidePanelState = useSidePanel.getState();
+  sidePanelState.setPanelHasConsole(false);
+  sidePanelState.openSidePanel(
+    ContainerCopyMessages.createCopyJobPanelTitle,
+    <CreateCopyJobScreensProvider />,
+    "650px",
+  );
+};
+
+let copyJobsAbortController: AbortController | null = null;
+
+export const getCopyJobs = async (): Promise<CopyJobType[]> => {
+  // Abort previous request if still in-flight
+  if (copyJobsAbortController) {
+    copyJobsAbortController.abort();
+  }
+  copyJobsAbortController = new AbortController();
+  try {
+    const { subscriptionId, resourceGroup, accountName } = getAccountDetailsFromResourceId(
+      userContext.databaseAccount?.id || "",
+    );
+    const response = await listByDatabaseAccount(
+      subscriptionId,
+      resourceGroup,
+      accountName,
+      copyJobsAbortController.signal,
+    );
+
+    const jobs = response.value || [];
+    if (!Array.isArray(jobs)) {
+      throw new Error("Invalid migration job status response: Expected an array of jobs.");
+    }
+    copyJobsAbortController = null;
+
+    /* added a lower bound to "0" and upper bound to "100" */
+    const calculateCompletionPercentage = (processed: number, total: number): number => {
+      if (
+        typeof processed !== "number" ||
+        typeof total !== "number" ||
+        !isFinite(processed) ||
+        !isFinite(total) ||
+        total <= 0
+      ) {
+        return 0;
+      }
+
+      const percentage = Math.round((processed / total) * 100);
+      return Math.max(0, Math.min(100, percentage));
+    };
+
+    const formattedJobs: CopyJobType[] = jobs
+      .filter(
+        (job: DataTransferJobGetResults) =>
+          job.properties?.source?.component === COSMOS_SQL_COMPONENT &&
+          job.properties?.destination?.component === COSMOS_SQL_COMPONENT,
+      )
+      .sort(
+        (current: DataTransferJobGetResults, next: DataTransferJobGetResults) =>
+          new Date(next.properties.lastUpdatedUtcTime).getTime() -
+          new Date(current.properties.lastUpdatedUtcTime).getTime(),
+      )
+      .map((job: DataTransferJobGetResults, index: number) => {
+        const dateTimeObj = formatUTCDateTime(job.properties.lastUpdatedUtcTime);
+
+        return {
+          ID: (index + 1).toString(),
+          Mode: job.properties.mode,
+          Name: job.properties.jobName,
+          Status: convertToCamelCase(job.properties.status) as CopyJobType["Status"],
+          CompletionPercentage: calculateCompletionPercentage(job.properties.processedCount, job.properties.totalCount),
+          Duration: convertTime(job.properties.duration),
+          LastUpdatedTime: dateTimeObj.formattedDateTime,
+          timestamp: dateTimeObj.timestamp,
+          Error: job.properties.error ? extractErrorMessage(job.properties.error as unknown as CopyJobErrorType) : null,
+        } as CopyJobType;
+      });
+    return formattedJobs;
+  } catch (error) {
+    const errorContent = JSON.stringify(error.content || error);
+    console.error(`Error fetching copy jobs: ${errorContent}`);
+    throw error;
+  }
+};
+
+export const submitCreateCopyJob = async (state: CopyJobContextState, onSuccess: () => void) => {
+  try {
+    const { source, target, migrationType, jobName } = state;
+    const { subscriptionId, resourceGroup, accountName } = getAccountDetailsFromResourceId(
+      userContext.databaseAccount?.id || "",
+    );
+    const body = {
+      properties: {
+        source: {
+          component: "CosmosDBSql",
+          remoteAccountName: source?.account?.name,
+          databaseName: source?.databaseId,
+          containerName: source?.containerId,
+        },
+        destination: {
+          component: "CosmosDBSql",
+          databaseName: target?.databaseId,
+          containerName: target?.containerId,
+        },
+        mode: migrationType,
+      },
+    } as unknown as CreateJobRequest;
+
+    const response = await create(subscriptionId, resourceGroup, accountName, jobName, body);
+    MonitorCopyJobsRefState.getState().ref?.refreshJobList();
+    onSuccess();
+    return response;
+  } catch (error) {
+    console.error("Error submitting create copy job:", error);
+    throw error;
+  }
+};
+
+export const updateCopyJobStatus = async (job: CopyJobType, action: string): Promise<DataTransferJobGetResults> => {
+  try {
+    let updateFn = null;
+    switch (action.toLowerCase()) {
+      case CopyJobActions.pause:
+        updateFn = pause;
+        break;
+      case CopyJobActions.resume:
+        updateFn = resume;
+        break;
+      case CopyJobActions.cancel:
+        updateFn = cancel;
+        break;
+      case CopyJobActions.complete:
+        updateFn = complete;
+        break;
+      default:
+        throw new Error(`Unsupported action: ${action}`);
+    }
+    const { subscriptionId, resourceGroup, accountName } = getAccountDetailsFromResourceId(
+      userContext.databaseAccount?.id || "",
+    );
+    const response = await updateFn?.(subscriptionId, resourceGroup, accountName, job.Name);
+
+    return response;
+  } catch (error) {
+    const errorMessage = JSON.stringify((error as CopyJobError).message || error.content || error);
+
+    const statusList = [CopyJobStatusType.Running, CopyJobStatusType.InProgress, CopyJobStatusType.Partitioning];
+    const pattern = new RegExp(`'(${statusList.join("|")})'`, "g");
+    const normalizedErrorMessage = errorMessage.replace(
+      pattern,
+      `'${ContainerCopyMessages.MonitorJobs.Status.InProgress}'`,
+    );
+
+    console.error(`Error updating copy job status: ${normalizedErrorMessage}`);
+    throw error;
+  }
+};

src/Explorer/ContainerCopy/CommandBar/CopyJobCommandBar.tsx

@@ -0,0 +1,31 @@
+import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
+import React from "react";
+import { StyleConstants } from "../../../Common/StyleConstants";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import * as CommandBarUtil from "../../Menus/CommandBar/CommandBarUtil";
+import { ContainerCopyProps } from "../Types";
+import { getCommandBarButtons } from "./Utils";
+
+const backgroundColor = StyleConstants.BaseLight;
+const rootStyle = {
+  root: {
+    backgroundColor: backgroundColor,
+  },
+};
+
+const CopyJobCommandBar: React.FC<ContainerCopyProps> = ({ container }) => {
+  const commandBarItems: CommandButtonComponentProps[] = getCommandBarButtons(container);
+  const controlButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(commandBarItems, backgroundColor);
+
+  return (
+    <div className="commandBarContainer">
+      <FluentCommandBar
+        ariaLabel="Use left and right arrow keys to navigate between commands"
+        styles={rootStyle}
+        items={controlButtons}
+      />
+    </div>
+  );
+};
+
+export default CopyJobCommandBar;

src/Explorer/ContainerCopy/CommandBar/Utils.ts

@@ -0,0 +1,58 @@
+import AddIcon from "../../../../images/Add.svg";
+import FeedbackIcon from "../../../../images/Feedback-Command.svg";
+import RefreshIcon from "../../../../images/refresh-cosmos.svg";
+import { configContext, Platform } from "../../../ConfigContext";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import Explorer from "../../Explorer";
+import * as Actions from "../Actions/CopyJobActions";
+import ContainerCopyMessages from "../ContainerCopyMessages";
+import { MonitorCopyJobsRefState } from "../MonitorCopyJobs/MonitorCopyJobRefState";
+import { CopyJobCommandBarBtnType } from "../Types";
+
+function getCopyJobBtns(): CopyJobCommandBarBtnType[] {
+  const monitorCopyJobsRef = MonitorCopyJobsRefState((state) => state.ref);
+  const buttons: CopyJobCommandBarBtnType[] = [
+    {
+      key: "createCopyJob",
+      iconSrc: AddIcon,
+      label: ContainerCopyMessages.createCopyJobButtonLabel,
+      ariaLabel: ContainerCopyMessages.createCopyJobButtonAriaLabel,
+      onClick: Actions.openCreateCopyJobPanel,
+    },
+    {
+      key: "refresh",
+      iconSrc: RefreshIcon,
+      label: ContainerCopyMessages.refreshButtonLabel,
+      ariaLabel: ContainerCopyMessages.refreshButtonAriaLabel,
+      onClick: () => monitorCopyJobsRef?.refreshJobList(),
+    },
+  ];
+  if (configContext.platform === Platform.Portal) {
+    buttons.push({
+      key: "feedback",
+      iconSrc: FeedbackIcon,
+      label: ContainerCopyMessages.feedbackButtonLabel,
+      ariaLabel: ContainerCopyMessages.feedbackButtonAriaLabel,
+      onClick: () => {},
+    });
+  }
+  return buttons;
+}
+
+function btnMapper(config: CopyJobCommandBarBtnType): CommandButtonComponentProps {
+  return {
+    iconSrc: config.iconSrc,
+    iconAlt: config.label,
+    onCommandClick: config.onClick,
+    commandButtonLabel: undefined as string | undefined,
+    ariaLabel: config.ariaLabel,
+    tooltipText: config.label,
+    hasPopup: false,
+    disabled: config.disabled ?? false,
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function getCommandBarButtons(_container: Explorer): CommandButtonComponentProps[] {
+  return getCopyJobBtns().map(btnMapper);
+}

src/Explorer/ContainerCopy/ContainerCopyMessages.ts

@@ -0,0 +1,132 @@
+export default {
+  // Copy Job Command Bar
+  feedbackButtonLabel: "Feedback",
+  feedbackButtonAriaLabel: "Provide feedback on copy jobs",
+  refreshButtonLabel: "Refresh",
+  refreshButtonAriaLabel: "Refresh copy jobs",
+  createCopyJobButtonLabel: "Create Copy Job",
+  createCopyJobButtonAriaLabel: "Create a new container copy job",
+
+  // No Copy Jobs Found
+  noCopyJobsTitle: "No copy jobs to show",
+  createCopyJobButtonText: "Create a container copy job",
+
+  // Create Copy Job Panel
+  createCopyJobPanelTitle: "Copy container",
+
+  // Select Account Screen
+  selectAccountDescription: "Please select a source account from which to copy.",
+  subscriptionDropdownLabel: "Subscription",
+  subscriptionDropdownPlaceholder: "Select a subscription",
+  sourceAccountDropdownLabel: "Account",
+  sourceAccountDropdownPlaceholder: "Select an account",
+  migrationTypeCheckboxLabel: "Copy container in offline mode",
+
+  // Select Source and Target Containers Screen
+  selectSourceAndTargetContainersDescription:
+    "Please select a source container and a destination container to copy to.",
+  sourceContainerSubHeading: "Source container",
+  targetContainerSubHeading: "Destination container",
+  databaseDropdownLabel: "Database",
+  databaseDropdownPlaceholder: "Select a database",
+  containerDropdownLabel: "Container",
+  containerDropdownPlaceholder: "Select a container",
+
+  // Preview and Create Screen
+  jobNameLabel: "Job name",
+  sourceSubscriptionLabel: "Source subscription",
+  sourceAccountLabel: "Source account",
+  sourceDatabaseLabel: "Source database",
+  sourceContainerLabel: "Source container",
+  targetDatabaseLabel: "Destination database",
+  targetContainerLabel: "Destination container",
+
+  // Assign Permissions Screen
+  assignPermissions: {
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+  },
+  toggleBtn: {
+    onText: "On",
+    offText: "Off",
+  },
+  addManagedIdentity: {
+    title: "System assigned managed identity enabled",
+    description:
+      "Enable a system assigned managed identity for the destination account to allow the copy job to access it.",
+    toggleLabel: "System assigned managed identity",
+    managedIdentityTooltip:
+      "A system assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. You can grant permissions to the managed identity by using Azure role-based access control (Azure RBAC). The managed identity is authenticated with Microsoft Entra ID, so you don't have to store any credentials in code.",
+    userAssignedIdentityTooltip: "You can select an existing user assigned identity or create a new one.",
+    userAssignedIdentityLabel: "You may also select a user assigned managed identity.",
+    createUserAssignedIdentityLink: "Create User Assigned Managed Identity",
+    enablementTitle: "Enable system assigned managed identity",
+    enablementDescription: (identityName: string) =>
+      identityName
+        ? `'${identityName}' will be registered with Microsoft Entra ID. Once it is registered, '${identityName}' can be granted permissions to access resources protected by Microsoft Entra ID. Do you want to enable the system assigned managed identity for '${identityName}'?`
+        : "",
+  },
+  defaultManagedIdentity: {
+    title: "System assigned managed identity enabled as default",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    tooltip:
+      "A system assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. You can grant permissions to the managed identity by using Azure role-based access control (Azure RBAC). The managed identity is authenticated with Microsoft Entra ID, so you don't have to store any credentials in code.",
+    popoverTitle: "System assigned managed identity set as default",
+    popoverDescription:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.",
+  },
+  readPermissionAssigned: {
+    title: "Read permission assigned to default identity",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    tooltip:
+      "A system assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. You can grant permissions to the managed identity by using Azure role-based access control (Azure RBAC). The managed identity is authenticated with Microsoft Entra ID, so you don't have to store any credentials in code.",
+    popoverTitle: "Read permission assigned to default identity",
+    popoverDescription:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.",
+  },
+  pointInTimeRestore: {
+    title: "Point In Time Restore enabled",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    buttonText: "Enable Point In Time Restore",
+  },
+  onlineCopyEnabled: {
+    title: "Online copy enabled",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    buttonText: "Enable Online Copy",
+  },
+  MonitorJobs: {
+    Columns: {
+      lastUpdatedTime: "Date & time",
+      name: "Job name",
+      status: "Status",
+      completionPercentage: "Completion %",
+      duration: "Duration",
+      error: "Error message",
+      mode: "Mode",
+      actions: "Actions",
+    },
+    Actions: {
+      pause: "Pause",
+      resume: "Resume",
+      cancel: "Cancel",
+      complete: "Complete",
+      viewDetails: "View Details",
+    },
+    Status: {
+      Pending: "Pending",
+      InProgress: "In Progress",
+      Running: "In Progress",
+      Partitioning: "In Progress",
+      Paused: "Paused",
+      Completed: "Completed",
+      Failed: "Failed",
+      Faulted: "Failed",
+      Skipped: "Cancelled",
+      Cancelled: "Cancelled",
+    },
+  },
+};

src/Explorer/ContainerCopy/Context/CopyJobContext.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { userContext } from "UserContext";
+import { CopyJobMigrationType } from "../Enums";
+import { CopyJobContextProviderType, CopyJobContextState, CopyJobFlowType } from "../Types";
+
+export const CopyJobContext = React.createContext<CopyJobContextProviderType>(null);
+export const useCopyJobContext = (): CopyJobContextProviderType => {
+  const context = React.useContext(CopyJobContext);
+  if (!context) {
+    throw new Error("useCopyJobContext must be used within a CopyJobContextProvider");
+  }
+  return context;
+};
+
+interface CopyJobContextProviderProps {
+  children: React.ReactNode;
+}
+
+const getInitialCopyJobState = (): CopyJobContextState => {
+  return {
+    jobName: "",
+    migrationType: CopyJobMigrationType.Offline,
+    source: {
+      subscription: null,
+      account: null,
+      databaseId: "",
+      containerId: "",
+    },
+    target: {
+      subscriptionId: userContext.subscriptionId || "",
+      account: userContext.databaseAccount || null,
+      databaseId: "",
+      containerId: "",
+    },
+    sourceReadAccessFromTarget: false,
+  };
+};
+
+const CopyJobContextProvider: React.FC<CopyJobContextProviderProps> = (props) => {
+  const [copyJobState, setCopyJobState] = React.useState<CopyJobContextState>(getInitialCopyJobState());
+  const [flow, setFlow] = React.useState<CopyJobFlowType | null>(null);
+
+  const resetCopyJobState = () => {
+    setCopyJobState(getInitialCopyJobState());
+  };
+
+  return (
+    <CopyJobContext.Provider value={{ copyJobState, setCopyJobState, flow, setFlow, resetCopyJobState }}>
+      {props.children}
+    </CopyJobContext.Provider>
+  );
+};
+
+export default CopyJobContextProvider;

src/Explorer/ContainerCopy/CopyJobUtils.ts

@@ -0,0 +1,116 @@
+import { DatabaseAccount } from "Contracts/DataModels";
+import { CopyJobErrorType } from "./Types";
+
+const azurePortalMpacEndpoint = "https://ms.portal.azure.com/";
+
+export const buildResourceLink = (resource: DatabaseAccount): string => {
+  const resourceId = resource.id;
+  let parentOrigin = window.location.ancestorOrigins?.[0] ?? window.location.origin;
+
+  if (/\/\/localhost:/.test(parentOrigin)) {
+    parentOrigin = azurePortalMpacEndpoint;
+  } else if (/\/\/cosmos\.azure/.test(parentOrigin)) {
+    parentOrigin = parentOrigin.replace("cosmos.azure", "portal.azure");
+  }
+
+  parentOrigin = parentOrigin.replace(/\/$/, "");
+
+  return `${parentOrigin}/#resource${resourceId}`;
+};
+
+export const COSMOS_SQL_COMPONENT = "CosmosDBSql";
+
+export const COPY_JOB_API_VERSION = "2025-05-01-preview";
+
+export function buildDataTransferJobPath({
+  subscriptionId,
+  resourceGroup,
+  accountName,
+  jobName,
+  action,
+}: {
+  subscriptionId: string;
+  resourceGroup: string;
+  accountName: string;
+  jobName?: string;
+  action?: string;
+}) {
+  let path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/dataTransferJobs`;
+  if (jobName) {
+    path += `/${jobName}`;
+  }
+  if (action) {
+    path += `/${action}`;
+  }
+  return path;
+}
+
+export function convertTime(timeStr: string): string | null {
+  const timeParts = timeStr.split(":").map(Number);
+
+  if (timeParts.length !== 3 || timeParts.some(isNaN)) {
+    return null; // Return null for invalid format
+  }
+  const formatPart = (value: number, unit: string) => {
+    if (unit === "seconds") {
+      value = Math.round(value);
+    }
+    return value > 0 ? `${value.toString().padStart(2, "0")} ${unit}` : "";
+  };
+
+  const [hours, minutes, seconds] = timeParts;
+  const formattedTimeParts = [
+    formatPart(hours, "hours"),
+    formatPart(minutes, "minutes"),
+    formatPart(seconds, "seconds"),
+  ]
+    .filter(Boolean)
+    .join(", ");
+
+  return formattedTimeParts || "0 seconds"; // Return "0 seconds" if all parts are zero
+}
+
+export function formatUTCDateTime(utcStr: string): { formattedDateTime: string; timestamp: number } | null {
+  const date = new Date(utcStr);
+  if (isNaN(date.getTime())) {
+    return null;
+  }
+
+  return {
+    formattedDateTime: new Intl.DateTimeFormat("en-US", {
+      dateStyle: "short",
+      timeStyle: "medium",
+      timeZone: "UTC",
+    }).format(date),
+    timestamp: date.getTime(),
+  };
+}
+
+export function convertToCamelCase(str: string): string {
+  const formattedStr = str
+    .split(/\s+/)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join("");
+  return formattedStr;
+}
+
+export function extractErrorMessage(error: CopyJobErrorType): CopyJobErrorType {
+  return {
+    ...error,
+    message: error.message.split("\r\n\r\n")[0],
+  };
+}
+
+export function getAccountDetailsFromResourceId(accountId: string | undefined) {
+  if (!accountId) {
+    return null;
+  }
+  const pattern = new RegExp(
+    "/subscriptions/([^/]+)/resourceGroups/([^/]+)/providers/Microsoft\\.DocumentDB/databaseAccounts/([^/]+)",
+    "i",
+  );
+  const matches = accountId.match(pattern);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, subscriptionId, resourceGroup, accountName] = matches || [];
+  return { subscriptionId, resourceGroup, accountName };
+}

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

@@ -0,0 +1,67 @@
+import { Link, Stack, Text, Toggle } from "@fluentui/react";
+import React, { useMemo } from "react";
+import { updateSystemIdentity } from "../../../../../Utils/arm/identityUtils";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { buildResourceLink } from "../../../CopyJobUtils";
+import InfoTooltip from "../Components/InfoTooltip";
+import PopoverMessage from "../Components/PopoverContainer";
+import useManagedIdentity from "./hooks/useManagedIdentity";
+import { PermissionSectionConfig } from "./hooks/usePermissionsSection";
+import useToggle from "./hooks/useToggle";
+
+const managedIdentityTooltip = ContainerCopyMessages.addManagedIdentity.managedIdentityTooltip;
+const userAssignedTooltip = ContainerCopyMessages.addManagedIdentity.userAssignedIdentityTooltip;
+
+const textStyle = { display: "flex", alignItems: "center" };
+
+type AddManagedIdentityProps = Partial<PermissionSectionConfig>;
+
+const AddManagedIdentity: React.FC<AddManagedIdentityProps> = () => {
+  const { copyJobState } = useCopyJobContext();
+  const [systemAssigned, onToggle] = useToggle(false);
+  const { loading, handleAddSystemIdentity } = useManagedIdentity(updateSystemIdentity);
+
+  const manageIdentityLink = useMemo(() => {
+    const { target } = copyJobState;
+    const resourceUri = buildResourceLink(target.account);
+    return target?.account?.id ? `${resourceUri}/ManagedIdentitiesBlade` : "#";
+  }, [copyJobState]);
+
+  return (
+    <Stack className="addManagedIdentityContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
+      <Toggle
+        label={
+          <Text className="toggle-label" style={textStyle}>
+            {ContainerCopyMessages.addManagedIdentity.toggleLabel}&nbsp;
+            <InfoTooltip content={managedIdentityTooltip} />
+          </Text>
+        }
+        checked={systemAssigned}
+        onText={ContainerCopyMessages.toggleBtn.onText}
+        offText={ContainerCopyMessages.toggleBtn.offText}
+        onChange={onToggle}
+      />
+      <Text className="user-assigned-label" style={textStyle}>
+        {ContainerCopyMessages.addManagedIdentity.userAssignedIdentityLabel}&nbsp;
+        <InfoTooltip content={userAssignedTooltip} />
+      </Text>
+      <div style={{ marginTop: 8 }}>
+        <Link href={manageIdentityLink} target="_blank" rel="noopener noreferrer">
+          {ContainerCopyMessages.addManagedIdentity.createUserAssignedIdentityLink}
+        </Link>
+      </div>
+      <PopoverMessage
+        isLoading={loading}
+        visible={systemAssigned}
+        title={ContainerCopyMessages.addManagedIdentity.enablementTitle}
+        onCancel={() => onToggle(null, false)}
+        onPrimary={handleAddSystemIdentity}
+      >
+        {ContainerCopyMessages.addManagedIdentity.enablementDescription(copyJobState.target?.account?.name)}
+      </PopoverMessage>
+    </Stack>
+  );
+};
+
+export default AddManagedIdentity;

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

@@ -0,0 +1,80 @@
+import { Stack, Toggle } from "@fluentui/react";
+import React, { useCallback } from "react";
+import { assignRole } from "../../../../../Utils/arm/RbacUtils";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { getAccountDetailsFromResourceId } from "../../../CopyJobUtils";
+import InfoTooltip from "../Components/InfoTooltip";
+import PopoverMessage from "../Components/PopoverContainer";
+import { PermissionSectionConfig } from "./hooks/usePermissionsSection";
+import useToggle from "./hooks/useToggle";
+
+const TooltipContent = ContainerCopyMessages.readPermissionAssigned.tooltip;
+type AddManagedIdentityProps = Partial<PermissionSectionConfig>;
+
+const AddReadPermissionToDefaultIdentity: React.FC<AddManagedIdentityProps> = () => {
+  const [loading, setLoading] = React.useState(false);
+  const { copyJobState, setCopyJobState } = useCopyJobContext();
+  const [readPermissionAssigned, onToggle] = useToggle(false);
+
+  const handleAddReadPermission = useCallback(async () => {
+    const { source, target } = copyJobState;
+    const selectedSourceAccount = source?.account;
+    try {
+      const {
+        subscriptionId: sourceSubscriptionId,
+        resourceGroup: sourceResourceGroup,
+        accountName: sourceAccountName,
+      } = getAccountDetailsFromResourceId(selectedSourceAccount?.id);
+
+      setLoading(true);
+      const assignedRole = await assignRole(
+        sourceSubscriptionId,
+        sourceResourceGroup,
+        sourceAccountName,
+        target?.account?.identity?.principalId ?? "",
+      );
+      if (assignedRole) {
+        setCopyJobState((prevState) => ({
+          ...prevState,
+          sourceReadAccessFromTarget: true,
+        }));
+      }
+    } catch (error) {
+      console.error("Error assigning read permission to default identity:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [copyJobState, setCopyJobState]);
+
+  return (
+    <Stack className="defaultManagedIdentityContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
+      <div className="toggle-label">
+        {ContainerCopyMessages.readPermissionAssigned.description} &nbsp;
+        <InfoTooltip content={TooltipContent} />
+      </div>
+      <Toggle
+        checked={readPermissionAssigned}
+        onText={ContainerCopyMessages.toggleBtn.onText}
+        offText={ContainerCopyMessages.toggleBtn.offText}
+        onChange={onToggle}
+        inlineLabel
+        styles={{
+          root: { marginTop: 8, marginBottom: 12 },
+          label: { display: "none" },
+        }}
+      />
+      <PopoverMessage
+        isLoading={loading}
+        visible={readPermissionAssigned}
+        title={ContainerCopyMessages.readPermissionAssigned.popoverTitle}
+        onCancel={() => onToggle(null, false)}
+        onPrimary={handleAddReadPermission}
+      >
+        {ContainerCopyMessages.readPermissionAssigned.popoverDescription}
+      </PopoverMessage>
+    </Stack>
+  );
+};
+
+export default AddReadPermissionToDefaultIdentity;

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

@@ -0,0 +1,48 @@
+import { Stack, Toggle } from "@fluentui/react";
+import React from "react";
+import { updateDefaultIdentity } from "../../../../../Utils/arm/identityUtils";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import InfoTooltip from "../Components/InfoTooltip";
+import PopoverMessage from "../Components/PopoverContainer";
+import useManagedIdentity from "./hooks/useManagedIdentity";
+import { PermissionSectionConfig } from "./hooks/usePermissionsSection";
+import useToggle from "./hooks/useToggle";
+
+const managedIdentityTooltip = ContainerCopyMessages.defaultManagedIdentity.tooltip;
+type AddManagedIdentityProps = Partial<PermissionSectionConfig>;
+
+const DefaultManagedIdentity: React.FC<AddManagedIdentityProps> = () => {
+  const [defaultSystemAssigned, onToggle] = useToggle(false);
+  const { loading, handleAddSystemIdentity } = useManagedIdentity(updateDefaultIdentity);
+
+  return (
+    <Stack className="defaultManagedIdentityContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
+      <div className="toggle-label">
+        {ContainerCopyMessages.defaultManagedIdentity.description} &nbsp;
+        <InfoTooltip content={managedIdentityTooltip} />
+      </div>
+      <Toggle
+        checked={defaultSystemAssigned}
+        onText={ContainerCopyMessages.toggleBtn.onText}
+        offText={ContainerCopyMessages.toggleBtn.offText}
+        onChange={onToggle}
+        inlineLabel
+        styles={{
+          root: { marginTop: 8, marginBottom: 12 },
+          label: { display: "none" },
+        }}
+      />
+      <PopoverMessage
+        isLoading={loading}
+        visible={defaultSystemAssigned}
+        title={ContainerCopyMessages.defaultManagedIdentity.popoverTitle}
+        onCancel={() => onToggle(null, false)}
+        onPrimary={handleAddSystemIdentity}
+      >
+        {ContainerCopyMessages.defaultManagedIdentity.popoverDescription}
+      </PopoverMessage>
+    </Stack>
+  );
+};
+
+export default DefaultManagedIdentity;

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

@@ -0,0 +1,28 @@
+import { PrimaryButton, Stack } from "@fluentui/react";
+import React from "react";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { buildResourceLink } from "../../../CopyJobUtils";
+import { PermissionSectionConfig } from "./hooks/usePermissionsSection";
+import useWindowOpenMonitor from "./hooks/useWindowOpenMonitor";
+
+type AddManagedIdentityProps = Partial<PermissionSectionConfig>;
+const OnlineCopyEnabled: React.FC<AddManagedIdentityProps> = () => {
+  const { copyJobState: { source } = {} } = useCopyJobContext();
+  const sourceAccountLink = buildResourceLink(source?.account);
+  const onlineCopyUrl = `${sourceAccountLink}/Features`;
+  const onWindowClosed = () => {
+    // eslint-disable-next-line no-console
+    console.log("Online copy window closed");
+  };
+  const openWindowAndMonitor = useWindowOpenMonitor(onlineCopyUrl, onWindowClosed);
+
+  return (
+    <Stack className="onlineCopyContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
+      <div className="toggle-label">{ContainerCopyMessages.onlineCopyEnabled.description}</div>
+      <PrimaryButton text={ContainerCopyMessages.onlineCopyEnabled.buttonText} onClick={openWindowAndMonitor} />
+    </Stack>
+  );
+};
+
+export default OnlineCopyEnabled;

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

@@ -0,0 +1,55 @@
+import { PrimaryButton, Stack } from "@fluentui/react";
+import React, { useCallback, useState } from "react";
+import { fetchDatabaseAccount } from "Utils/arm/databaseAccountUtils";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { buildResourceLink, getAccountDetailsFromResourceId } from "../../../CopyJobUtils";
+import { PermissionSectionConfig } from "./hooks/usePermissionsSection";
+import useWindowOpenMonitor from "./hooks/useWindowOpenMonitor";
+
+type AddManagedIdentityProps = Partial<PermissionSectionConfig>;
+const PointInTimeRestore: React.FC<AddManagedIdentityProps> = () => {
+  const [loading, setLoading] = useState<boolean>(false);
+  const { copyJobState: { source } = {}, setCopyJobState } = useCopyJobContext();
+  const sourceAccountLink = buildResourceLink(source?.account);
+  const pitrUrl = `${sourceAccountLink}/backupRestore`;
+
+  const onWindowClosed = useCallback(async () => {
+    try {
+      const selectedSourceAccount = source?.account;
+      const {
+        subscriptionId: sourceSubscriptionId,
+        resourceGroup: sourceResourceGroup,
+        accountName: sourceAccountName,
+      } = getAccountDetailsFromResourceId(selectedSourceAccount?.id);
+
+      setLoading(true);
+      const account = await fetchDatabaseAccount(sourceSubscriptionId, sourceResourceGroup, sourceAccountName);
+      if (account) {
+        setCopyJobState((prevState) => ({
+          ...prevState,
+          source: { ...prevState.source, account: account },
+        }));
+      }
+    } catch (error) {
+      console.error("Error fetching database account after PITR window closed:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const openWindowAndMonitor = useWindowOpenMonitor(pitrUrl, onWindowClosed);
+
+  return (
+    <Stack className="pointInTimeRestoreContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
+      <div className="toggle-label">{ContainerCopyMessages.pointInTimeRestore.description}</div>
+      <PrimaryButton
+        text={loading ? "" : ContainerCopyMessages.pointInTimeRestore.buttonText}
+        {...(loading ? { iconProps: { iconName: "SyncStatusSolid" } } : {})}
+        disabled={loading}
+        onClick={openWindowAndMonitor}
+      />
+    </Stack>
+  );
+};
+
+export default PointInTimeRestore;

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

@@ -0,0 +1,52 @@
+import { DatabaseAccount } from "Contracts/DataModels";
+import { useCallback, useState } from "react";
+import { useCopyJobContext } from "../../../../Context/CopyJobContext";
+import { getAccountDetailsFromResourceId } from "../../../../CopyJobUtils";
+
+interface UseManagedIdentityUpdaterParams {
+  updateIdentityFn: (
+    subscriptionId: string,
+    resourceGroup?: string,
+    accountName?: string,
+  ) => Promise<DatabaseAccount | undefined>;
+}
+
+interface UseManagedIdentityUpdaterReturn {
+  loading: boolean;
+  handleAddSystemIdentity: () => Promise<void>;
+}
+
+const useManagedIdentity = (
+  updateIdentityFn: UseManagedIdentityUpdaterParams["updateIdentityFn"],
+): UseManagedIdentityUpdaterReturn => {
+  const { copyJobState, setCopyJobState } = useCopyJobContext();
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const handleAddSystemIdentity = useCallback(async (): Promise<void> => {
+    try {
+      setLoading(true);
+      const selectedTargetAccount = copyJobState?.target?.account;
+      const {
+        subscriptionId: targetSubscriptionId,
+        resourceGroup: targetResourceGroup,
+        accountName: targetAccountName,
+      } = getAccountDetailsFromResourceId(selectedTargetAccount?.id);
+
+      const updatedAccount = await updateIdentityFn(targetSubscriptionId, targetResourceGroup, targetAccountName);
+      if (updatedAccount) {
+        setCopyJobState((prevState) => ({
+          ...prevState,
+          target: { ...prevState.target, account: updatedAccount },
+        }));
+      }
+    } catch (error) {
+      console.error("Error enabling system-assigned managed identity:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [copyJobState, updateIdentityFn, setCopyJobState]);
+
+  return { loading, handleAddSystemIdentity };
+};
+
+export default useManagedIdentity;

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

@@ -0,0 +1,198 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { fetchRoleAssignments, fetchRoleDefinitions, RoleDefinitionType } from "../../../../../../Utils/arm/RbacUtils";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+import { getAccountDetailsFromResourceId } from "../../../../CopyJobUtils";
+import { BackupPolicyType, CopyJobMigrationType, DefaultIdentityType, IdentityType } from "../../../../Enums";
+import { CopyJobContextState } from "../../../../Types";
+import { useCopyJobPrerequisitesCache } from "../../../Utils/useCopyJobPrerequisitesCache";
+import AddManagedIdentity from "../AddManagedIdentity";
+import AddReadPermissionToDefaultIdentity from "../AddReadPermissionToDefaultIdentity";
+import DefaultManagedIdentity from "../DefaultManagedIdentity";
+import OnlineCopyEnabled from "../OnlineCopyEnabled";
+import PointInTimeRestore from "../PointInTimeRestore";
+
+export interface PermissionSectionConfig {
+  id: string;
+  title: string;
+  Component: React.ComponentType;
+  disabled: boolean;
+  completed?: boolean;
+  validate?: (state: CopyJobContextState) => boolean | Promise<boolean>;
+}
+
+// Section IDs for maintainability
+export const SECTION_IDS = {
+  addManagedIdentity: "addManagedIdentity",
+  defaultManagedIdentity: "defaultManagedIdentity",
+  readPermissionAssigned: "readPermissionAssigned",
+  pointInTimeRestore: "pointInTimeRestore",
+  onlineCopyEnabled: "onlineCopyEnabled",
+} as const;
+
+const PERMISSION_SECTIONS_CONFIG: PermissionSectionConfig[] = [
+  {
+    id: SECTION_IDS.addManagedIdentity,
+    title: ContainerCopyMessages.addManagedIdentity.title,
+    Component: AddManagedIdentity,
+    disabled: true,
+    validate: (state: CopyJobContextState) => {
+      const targetAccountIdentityType = (state?.target?.account?.identity?.type ?? "").toLowerCase();
+      return (
+        targetAccountIdentityType === IdentityType.SystemAssigned ||
+        targetAccountIdentityType === IdentityType.UserAssigned
+      );
+    },
+  },
+  {
+    id: SECTION_IDS.defaultManagedIdentity,
+    title: ContainerCopyMessages.defaultManagedIdentity.title,
+    Component: DefaultManagedIdentity,
+    disabled: true,
+    validate: (state: CopyJobContextState) => {
+      const targetAccountDefaultIdentity = (state?.target?.account?.properties?.defaultIdentity ?? "").toLowerCase();
+      return targetAccountDefaultIdentity === DefaultIdentityType.SystemAssignedIdentity;
+    },
+  },
+  {
+    id: SECTION_IDS.readPermissionAssigned,
+    title: ContainerCopyMessages.readPermissionAssigned.title,
+    Component: AddReadPermissionToDefaultIdentity,
+    disabled: true,
+    validate: async (state: CopyJobContextState) => {
+      const principalId = state?.target?.account?.identity?.principalId;
+      const selectedSourceAccount = state?.source?.account;
+      const {
+        subscriptionId: sourceSubscriptionId,
+        resourceGroup: sourceResourceGroup,
+        accountName: sourceAccountName,
+      } = getAccountDetailsFromResourceId(selectedSourceAccount?.id);
+
+      const rolesAssigned = await fetchRoleAssignments(
+        sourceSubscriptionId,
+        sourceResourceGroup,
+        sourceAccountName,
+        principalId,
+      );
+
+      const roleDefinitions = await fetchRoleDefinitions(rolesAssigned ?? []);
+      return checkTargetHasReaderRoleOnSource(roleDefinitions ?? []);
+    },
+  },
+];
+
+const PERMISSION_SECTIONS_FOR_ONLINE_JOBS: PermissionSectionConfig[] = [
+  {
+    id: SECTION_IDS.pointInTimeRestore,
+    title: ContainerCopyMessages.pointInTimeRestore.title,
+    Component: PointInTimeRestore,
+    disabled: true,
+    validate: (state: CopyJobContextState) => {
+      const sourceAccountBackupPolicy = state?.source?.account?.properties?.backupPolicy?.type ?? "";
+      return sourceAccountBackupPolicy === BackupPolicyType.Continuous;
+    },
+  },
+  {
+    id: SECTION_IDS.onlineCopyEnabled,
+    title: ContainerCopyMessages.onlineCopyEnabled.title,
+    Component: OnlineCopyEnabled,
+    disabled: true,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    validate: (_state: CopyJobContextState) => {
+      return false;
+    },
+  },
+];
+
+/**
+ * Checks if the user has the Reader role based on role definitions.
+ */
+export function checkTargetHasReaderRoleOnSource(roleDefinitions: RoleDefinitionType[]): boolean {
+  return roleDefinitions?.some(
+    (role) =>
+      role.name === "00000000-0000-0000-0000-000000000001" ||
+      role.permissions.some(
+        (permission) =>
+          permission.dataActions.includes("Microsoft.DocumentDB/databaseAccounts/readMetadata") &&
+          permission.dataActions.includes("Microsoft.DocumentDB/databaseAccounts/sqlDatabases/containers/items/read"),
+      ),
+  );
+}
+
+/**
+ * Returns the permission sections configuration for the Assign Permissions screen.
+ * Memoizes derived values for performance and decouples logic for testability.
+ */
+const usePermissionSections = (state: CopyJobContextState): PermissionSectionConfig[] => {
+  const { validationCache, setValidationCache } = useCopyJobPrerequisitesCache();
+  const [permissionSections, setPermissionSections] = useState<PermissionSectionConfig[] | null>(null);
+  const isValidatingRef = useRef(false);
+
+  const sectionToValidate = useMemo(() => {
+    const baseSections = [...PERMISSION_SECTIONS_CONFIG];
+    if (state.migrationType === CopyJobMigrationType.Online) {
+      return [...baseSections, ...PERMISSION_SECTIONS_FOR_ONLINE_JOBS];
+    }
+    return baseSections;
+  }, [state.migrationType]);
+
+  const memoizedValidationCache = useMemo(() => {
+    if (state.migrationType === CopyJobMigrationType.Offline) {
+      validationCache.delete(SECTION_IDS.pointInTimeRestore);
+      validationCache.delete(SECTION_IDS.onlineCopyEnabled);
+    }
+    return validationCache;
+  }, [state.migrationType]);
+
+  useEffect(() => {
+    const validateSections = async () => {
+      if (isValidatingRef.current) {
+        return;
+      }
+
+      isValidatingRef.current = true;
+      const result: PermissionSectionConfig[] = [];
+      const newValidationCache = new Map(memoizedValidationCache);
+
+      for (let i = 0; i < sectionToValidate.length; i++) {
+        const section = sectionToValidate[i];
+
+        // Check if this section was already validated and passed
+        if (newValidationCache.has(section.id) && newValidationCache.get(section.id) === true) {
+          result.push({ ...section, completed: true });
+          continue;
+        }
+        // We've reached the first non-cached section - validate it
+        if (section.validate) {
+          const isValid = await section.validate(state);
+          newValidationCache.set(section.id, isValid);
+          result.push({ ...section, completed: isValid });
+          // Stop validation if current section failed
+          if (!isValid) {
+            for (let j = i + 1; j < sectionToValidate.length; j++) {
+              result.push({ ...sectionToValidate[j], completed: false });
+            }
+            break;
+          }
+        } else {
+          // Section has no validate method
+          newValidationCache.set(section.id, false);
+          result.push({ ...section, completed: false });
+        }
+      }
+
+      setValidationCache(newValidationCache);
+      setPermissionSections(result);
+      isValidatingRef.current = false;
+    };
+
+    validateSections();
+
+    return () => {
+      isValidatingRef.current = false;
+    };
+  }, [state, sectionToValidate]);
+
+  return permissionSections ?? [];
+};
+
+export default usePermissionSections;

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

@@ -0,0 +1,11 @@
+import { useCallback, useState } from "react";
+
+const useToggle = (initialState = false) => {
+  const [state, setState] = useState<boolean>(initialState);
+  const onToggle = useCallback((_, checked?: boolean) => {
+    setState(!!checked);
+  }, []);
+  return [state, onToggle] as const;
+};
+
+export default useToggle;

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

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from "react";
+
+const useWindowOpenMonitor = (url: string, onClose?: () => void, intervalMs = 500) => {
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const openWindowAndMonitor = () => {
+    const newWindow = window.open(url, "_blank");
+    intervalRef.current = setInterval(() => {
+      if (newWindow?.closed) {
+        clearInterval(intervalRef.current!);
+        intervalRef.current = null;
+        if (onClose) {
+          onClose();
+        }
+      }
+    }, intervalMs);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, []);
+
+  return openWindowAndMonitor;
+};
+
+export default useWindowOpenMonitor;

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

@@ -0,0 +1,66 @@
+import { Image, Stack, Text } from "@fluentui/react";
+import { Accordion, AccordionHeader, AccordionItem, AccordionPanel } from "@fluentui/react-components";
+import React, { useEffect } from "react";
+import CheckmarkIcon from "../../../../../../images/successfulPopup.svg";
+import WarningIcon from "../../../../../../images/warning.svg";
+import ShimmerTree, { IndentLevel } from "../../../../../Common/ShimmerTree";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { CopyJobMigrationType } from "../../../Enums";
+import usePermissionSections, { PermissionSectionConfig } from "./hooks/usePermissionsSection";
+
+const PermissionSection: React.FC<PermissionSectionConfig> = ({ id, title, Component, completed, disabled }) => (
+  <AccordionItem key={id} value={id} disabled={disabled}>
+    <AccordionHeader className="accordionHeader">
+      <Text className="accordionHeaderText" variant="medium">
+        {title}
+      </Text>
+      <Image
+        className="statusIcon"
+        src={completed ? CheckmarkIcon : WarningIcon}
+        alt={completed ? "Checkmark icon" : "Warning icon"}
+        width={completed ? 20 : 24}
+        height={completed ? 20 : 24}
+      />
+    </AccordionHeader>
+    <AccordionPanel aria-disabled={disabled} className="accordionPanel">
+      <Component />
+    </AccordionPanel>
+  </AccordionItem>
+);
+
+const AssignPermissions = () => {
+  const { copyJobState } = useCopyJobContext();
+  const permissionSections = usePermissionSections(copyJobState);
+  const [openItems, setOpenItems] = React.useState<string[]>([]);
+
+  const indentLevels = React.useMemo<IndentLevel[]>(
+    () => Array(copyJobState.migrationType === CopyJobMigrationType.Online ? 5 : 3).fill({ level: 0, width: "100%" }),
+    [],
+  );
+
+  useEffect(() => {
+    const firstIncompleteSection = permissionSections.find((section) => !section.completed);
+    const nextOpenItems = firstIncompleteSection ? [firstIncompleteSection.id] : [];
+    if (JSON.stringify(openItems) !== JSON.stringify(nextOpenItems)) {
+      setOpenItems(nextOpenItems);
+    }
+  }, [permissionSections]);
+
+  return (
+    <Stack className="assignPermissionsContainer" tokens={{ childrenGap: 15 }}>
+      <span>{ContainerCopyMessages.assignPermissions.description}</span>
+      {permissionSections?.length === 0 ? (
+        <ShimmerTree indentLevels={indentLevels} style={{ width: "100%" }} />
+      ) : (
+        <Accordion className="permissionsAccordion" collapsible openItems={openItems}>
+          {permissionSections.map((section) => (
+            <PermissionSection key={section.id} {...section} />
+          ))}
+        </Accordion>
+      )}
+    </Stack>
+  );
+};
+
+export default AssignPermissions;

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

@@ -0,0 +1,25 @@
+import { Stack } from "@fluentui/react";
+import React from "react";
+
+interface FieldRowProps {
+  label?: string;
+  children: React.ReactNode;
+  labelClassName?: string;
+}
+
+const FieldRow: React.FC<FieldRowProps> = ({ label = "", children, labelClassName = "" }) => {
+  return (
+    <Stack horizontal horizontalAlign="space-between" className="flex-row">
+      {label && (
+        <Stack.Item align="center" className="flex-fixed-width">
+          <label className={`field-label ${labelClassName}`}>{label}: </label>
+        </Stack.Item>
+      )}
+      <Stack.Item align="center" className="flex-grow-col">
+        {children}
+      </Stack.Item>
+    </Stack>
+  );
+};
+
+export default FieldRow;

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

@@ -0,0 +1,17 @@
+import { Image, ITooltipHostStyles, TooltipHost } from "@fluentui/react";
+import React from "react";
+import InfoIcon from "../../../../../../images/Info.svg";
+
+const InfoTooltip: React.FC<{ content?: string }> = ({ content }) => {
+  if (!content) {
+    return null;
+  }
+  const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block" } };
+  return (
+    <TooltipHost content={content} calloutProps={{ gapSpace: 0 }} styles={hostStyles}>
+      <Image src={InfoIcon} alt="Information" width={14} height={14} />
+    </TooltipHost>
+  );
+};
+
+export default React.memo(InfoTooltip);

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

@@ -0,0 +1,28 @@
+import { DefaultButton, PrimaryButton, Stack } from "@fluentui/react";
+import React from "react";
+
+type NavigationControlsProps = {
+  primaryBtnText: string;
+  onPrimary: () => void;
+  onPrevious: () => void;
+  onCancel: () => void;
+  isPrimaryDisabled: boolean;
+  isPreviousDisabled: boolean;
+};
+
+const NavigationControls: React.FC<NavigationControlsProps> = ({
+  primaryBtnText,
+  onPrimary,
+  onPrevious,
+  onCancel,
+  isPrimaryDisabled,
+  isPreviousDisabled,
+}) => (
+  <Stack horizontal tokens={{ childrenGap: 20 }}>
+    <PrimaryButton text={primaryBtnText} onClick={onPrimary} allowDisabledFocus disabled={isPrimaryDisabled} />
+    <DefaultButton text="Previous" onClick={onPrevious} allowDisabledFocus disabled={isPreviousDisabled} />
+    <DefaultButton text="Cancel" onClick={onCancel} />
+  </Stack>
+);
+
+export default React.memo(NavigationControls);

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

@@ -0,0 +1,67 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/display-name */
+import { DefaultButton, PrimaryButton, Stack, Text } from "@fluentui/react";
+import React from "react";
+
+interface PopoverContainerProps {
+  isLoading?: boolean;
+  title?: string;
+  children?: React.ReactNode;
+  onPrimary: () => void;
+  onCancel: () => void;
+}
+
+const PopoverContainer: React.FC<PopoverContainerProps> = React.memo(
+  ({ isLoading = false, title, children, onPrimary, onCancel }) => {
+    return (
+      <Stack
+        className={`popover-container foreground ${isLoading ? "loading" : ""}`}
+        tokens={{ childrenGap: 20 }}
+        style={{ maxWidth: 450 }}
+      >
+        <Text variant="mediumPlus" style={{ fontWeight: 600 }}>
+          {title}
+        </Text>
+        <Text>{children}</Text>
+        <Stack horizontal tokens={{ childrenGap: 20 }}>
+          <PrimaryButton
+            text={isLoading ? "" : "Yes"}
+            {...(isLoading ? { iconProps: { iconName: "SyncStatusSolid" } } : {})}
+            onClick={onPrimary}
+            disabled={isLoading}
+          />
+          <DefaultButton text="No" onClick={onCancel} disabled={isLoading} />
+        </Stack>
+      </Stack>
+    );
+  },
+);
+
+interface PopoverMessageProps {
+  isLoading?: boolean;
+  visible: boolean;
+  title: string;
+  onCancel: () => void;
+  onPrimary: () => void;
+  children: React.ReactNode;
+}
+
+const PopoverMessage: React.FC<PopoverMessageProps> = ({
+  isLoading = false,
+  visible,
+  title,
+  onCancel,
+  onPrimary,
+  children,
+}) => {
+  if (!visible) {
+    return null;
+  }
+  return (
+    <PopoverContainer title={title} onCancel={onCancel} onPrimary={onPrimary} isLoading={isLoading}>
+      {children}
+    </PopoverContainer>
+  );
+};
+
+export default PopoverMessage;

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

@@ -0,0 +1,34 @@
+import { Stack } from "@fluentui/react";
+import React from "react";
+import { useCopyJobNavigation } from "../Utils/useCopyJobNavigation";
+import NavigationControls from "./Components/NavigationControls";
+
+const CreateCopyJobScreens: React.FC = () => {
+  const {
+    currentScreen,
+    isPrimaryDisabled,
+    isPreviousDisabled,
+    handlePrimary,
+    handlePrevious,
+    handleCancel,
+    primaryBtnText,
+  } = useCopyJobNavigation();
+
+  return (
+    <Stack verticalAlign="space-between" className="createCopyJobScreensContainer">
+      <Stack.Item className="createCopyJobScreensContent">{currentScreen?.component}</Stack.Item>
+      <Stack.Item className="createCopyJobScreensFooter">
+        <NavigationControls
+          primaryBtnText={primaryBtnText}
+          onPrimary={handlePrimary}
+          onPrevious={handlePrevious}
+          onCancel={handleCancel}
+          isPrimaryDisabled={isPrimaryDisabled}
+          isPreviousDisabled={isPreviousDisabled}
+        />
+      </Stack.Item>
+    </Stack>
+  );
+};
+
+export default CreateCopyJobScreens;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import CopyJobContextProvider from "../../Context/CopyJobContext";
+import CreateCopyJobScreens from "./CreateCopyJobScreens";
+
+const CreateCopyJobScreensProvider = () => {
+  return (
+    <CopyJobContextProvider>
+      <CreateCopyJobScreens />
+    </CopyJobContextProvider>
+  );
+};
+
+export default CreateCopyJobScreensProvider;

src/Explorer/ContainerCopy/CreateCopyJob/Screens/PreviewCopyJob/Utils/PreviewCopyJobUtils.ts

@@ -0,0 +1,43 @@
+import { IColumn } from "@fluentui/react";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+
+const commonProps = {
+  minWidth: 130,
+  maxWidth: 140,
+  styles: {
+    root: {
+      whiteSpace: "normal",
+      lineHeight: "1.2",
+      wordBreak: "break-word",
+    },
+  },
+};
+
+export const getPreviewCopyJobDetailsListColumns = (): IColumn[] => {
+  return [
+    {
+      key: "sourcedbname",
+      name: ContainerCopyMessages.sourceDatabaseLabel,
+      fieldName: "sourceDatabaseName",
+      ...commonProps,
+    },
+    {
+      key: "sourcecolname",
+      name: ContainerCopyMessages.sourceContainerLabel,
+      fieldName: "sourceContainerName",
+      ...commonProps,
+    },
+    {
+      key: "targetdbname",
+      name: ContainerCopyMessages.targetDatabaseLabel,
+      fieldName: "targetDatabaseName",
+      ...commonProps,
+    },
+    {
+      key: "targetcolname",
+      name: ContainerCopyMessages.targetContainerLabel,
+      fieldName: "targetContainerName",
+      ...commonProps,
+    },
+  ];
+};

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

@@ -0,0 +1,52 @@
+import { DetailsList, DetailsListLayoutMode, Stack, Text, TextField } from "@fluentui/react";
+import FieldRow from "Explorer/ContainerCopy/CreateCopyJob/Screens/Components/FieldRow";
+import React from "react";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { getPreviewCopyJobDetailsListColumns } from "./Utils/PreviewCopyJobUtils";
+
+const PreviewCopyJob: React.FC = () => {
+  const { copyJobState, setCopyJobState } = useCopyJobContext();
+
+  const selectedDatabaseAndContainers = [
+    {
+      sourceDatabaseName: copyJobState.source?.databaseId,
+      sourceContainerName: copyJobState.source?.containerId,
+      targetDatabaseName: copyJobState.target?.databaseId,
+      targetContainerName: copyJobState.target?.containerId,
+    },
+  ];
+  const jobName = copyJobState.jobName;
+
+  const onJobNameChange = (_ev?: React.FormEvent, newValue?: string) => {
+    setCopyJobState((prevState) => ({
+      ...prevState,
+      jobName: newValue || "",
+    }));
+  };
+  return (
+    <Stack tokens={{ childrenGap: 20 }} className="previewCopyJobContainer">
+      <FieldRow label={ContainerCopyMessages.jobNameLabel}>
+        <TextField value={jobName} onChange={onJobNameChange} />
+      </FieldRow>
+      <Stack>
+        <Text className="bold">{ContainerCopyMessages.sourceSubscriptionLabel}</Text>
+        <Text>{copyJobState.source?.subscription?.displayName}</Text>
+      </Stack>
+      <Stack>
+        <Text className="bold">{ContainerCopyMessages.sourceAccountLabel}</Text>
+        <Text>{copyJobState.source?.account?.name}</Text>
+      </Stack>
+      <Stack>
+        <DetailsList
+          items={selectedDatabaseAndContainers}
+          layoutMode={DetailsListLayoutMode.justified}
+          checkboxVisibility={2}
+          columns={getPreviewCopyJobDetailsListColumns()}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default PreviewCopyJob;

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

@@ -0,0 +1,30 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/display-name */
+import { Dropdown } from "@fluentui/react";
+import React from "react";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+import { DropdownOptionType } from "../../../../Types";
+import FieldRow from "../../Components/FieldRow";
+
+interface AccountDropdownProps {
+  options: DropdownOptionType[];
+  selectedKey?: string;
+  disabled: boolean;
+  onChange: (_ev?: React.FormEvent, option?: DropdownOptionType) => void;
+}
+
+export const AccountDropdown: React.FC<AccountDropdownProps> = React.memo(
+  ({ options, selectedKey, disabled, onChange }) => (
+    <FieldRow label={ContainerCopyMessages.sourceAccountDropdownLabel}>
+      <Dropdown
+        placeholder={ContainerCopyMessages.sourceAccountDropdownPlaceholder}
+        ariaLabel={ContainerCopyMessages.sourceAccountDropdownLabel}
+        options={options}
+        disabled={disabled}
+        required
+        selectedKey={selectedKey}
+        onChange={onChange}
+      />
+    </FieldRow>
+  ),
+);

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

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

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

@@ -0,0 +1,28 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/display-name */
+import { Dropdown } from "@fluentui/react";
+import React from "react";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+import { DropdownOptionType } from "../../../../Types";
+import FieldRow from "../../Components/FieldRow";
+
+interface SubscriptionDropdownProps {
+  options: DropdownOptionType[];
+  selectedKey?: string;
+  onChange: (_ev?: React.FormEvent, option?: DropdownOptionType) => void;
+}
+
+export const SubscriptionDropdown: React.FC<SubscriptionDropdownProps> = React.memo(
+  ({ options, selectedKey, onChange }) => (
+    <FieldRow label={ContainerCopyMessages.subscriptionDropdownLabel}>
+      <Dropdown
+        placeholder={ContainerCopyMessages.subscriptionDropdownPlaceholder}
+        ariaLabel={ContainerCopyMessages.subscriptionDropdownLabel}
+        options={options}
+        required
+        selectedKey={selectedKey}
+        onChange={onChange}
+      />
+    </FieldRow>
+  ),
+);

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

@@ -0,0 +1,78 @@
+import React from "react";
+import { DatabaseAccount, Subscription } from "../../../../../../Contracts/DataModels";
+import { CopyJobMigrationType } from "../../../../Enums";
+import { CopyJobContextProviderType, CopyJobContextState, DropdownOptionType } from "../../../../Types";
+
+export function useDropdownOptions(
+  subscriptions: Subscription[],
+  accounts: DatabaseAccount[],
+): {
+  subscriptionOptions: DropdownOptionType[];
+  accountOptions: DropdownOptionType[];
+} {
+  const subscriptionOptions = React.useMemo(
+    () =>
+      subscriptions?.map((sub) => ({
+        key: sub.subscriptionId,
+        text: sub.displayName,
+        data: sub,
+      })) || [],
+    [subscriptions],
+  );
+
+  const accountOptions = React.useMemo(
+    () =>
+      accounts?.map((account) => ({
+        key: account.id,
+        text: account.name,
+        data: account,
+      })) || [],
+    [accounts],
+  );
+
+  return { subscriptionOptions, accountOptions };
+}
+
+type setCopyJobStateType = CopyJobContextProviderType["setCopyJobState"];
+
+export function useEventHandlers(setCopyJobState: setCopyJobStateType) {
+  const handleSelectSourceAccount = React.useCallback(
+    (type: "subscription" | "account", data: (Subscription & DatabaseAccount) | undefined) => {
+      setCopyJobState((prevState: CopyJobContextState) => {
+        if (type === "subscription") {
+          return {
+            ...prevState,
+            source: {
+              ...prevState.source,
+              subscription: data || null,
+              account: null, // reset on subscription change
+            },
+          };
+        }
+        if (type === "account") {
+          return {
+            ...prevState,
+            source: {
+              ...prevState.source,
+              account: data || null,
+            },
+          };
+        }
+        return prevState;
+      });
+    },
+    [setCopyJobState],
+  );
+
+  const handleMigrationTypeChange = React.useCallback(
+    (_ev?: React.FormEvent<HTMLElement>, checked?: boolean) => {
+      setCopyJobState((prevState: CopyJobContextState) => ({
+        ...prevState,
+        migrationType: checked ? CopyJobMigrationType.Offline : CopyJobMigrationType.Online,
+      }));
+    },
+    [setCopyJobState],
+  );
+
+  return { handleSelectSourceAccount, handleMigrationTypeChange };
+}

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

@@ -0,0 +1,52 @@
+/* eslint-disable react/display-name */
+import { Stack } from "@fluentui/react";
+import React from "react";
+import { DatabaseAccount, Subscription } from "../../../../../Contracts/DataModels";
+import { useDatabaseAccounts } from "../../../../../hooks/useDatabaseAccounts";
+import { useSubscriptions } from "../../../../../hooks/useSubscriptions";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { CopyJobMigrationType } from "../../../Enums";
+import { AccountDropdown } from "./Components/AccountDropdown";
+import { MigrationTypeCheckbox } from "./Components/MigrationTypeCheckbox";
+import { SubscriptionDropdown } from "./Components/SubscriptionDropdown";
+import { useDropdownOptions, useEventHandlers } from "./Utils/selectAccountUtils";
+
+const SelectAccount = React.memo(() => {
+  const { copyJobState, setCopyJobState } = useCopyJobContext();
+  const selectedSubscriptionId = copyJobState?.source?.subscription?.subscriptionId;
+
+  const subscriptions: Subscription[] = useSubscriptions();
+  const allAccounts: DatabaseAccount[] = useDatabaseAccounts(selectedSubscriptionId);
+  const sqlApiOnlyAccounts: DatabaseAccount[] = allAccounts?.filter(
+    (account) => account.type === "SQL" || account.kind === "GlobalDocumentDB",
+  );
+
+  const { subscriptionOptions, accountOptions } = useDropdownOptions(subscriptions, sqlApiOnlyAccounts);
+  const { handleSelectSourceAccount, handleMigrationTypeChange } = useEventHandlers(setCopyJobState);
+
+  const migrationTypeChecked = copyJobState?.migrationType === CopyJobMigrationType.Offline;
+
+  return (
+    <Stack className="selectAccountContainer" tokens={{ childrenGap: 15 }}>
+      <span>{ContainerCopyMessages.selectAccountDescription}</span>
+
+      <SubscriptionDropdown
+        options={subscriptionOptions}
+        selectedKey={selectedSubscriptionId}
+        onChange={(_ev, option) => handleSelectSourceAccount("subscription", option?.data)}
+      />
+
+      <AccountDropdown
+        options={accountOptions}
+        selectedKey={copyJobState?.source?.account?.id}
+        disabled={!selectedSubscriptionId}
+        onChange={(_ev, option) => handleSelectSourceAccount("account", option?.data)}
+      />
+
+      <MigrationTypeCheckbox checked={migrationTypeChecked} onChange={handleMigrationTypeChange} />
+    </Stack>
+  );
+});
+
+export default SelectAccount;

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { CopyJobContextState, DropdownOptionType } from "../../../../Types";
+
+export function dropDownChangeHandler(setCopyJobState: React.Dispatch<React.SetStateAction<CopyJobContextState>>) {
+  return (type: "sourceDatabase" | "sourceContainer" | "targetDatabase" | "targetContainer") =>
+    (_evnt: React.FormEvent, option: DropdownOptionType) => {
+      const value = option.key;
+      setCopyJobState((prevState) => {
+        switch (type) {
+          case "sourceDatabase":
+            return {
+              ...prevState,
+              source: { ...prevState.source, databaseId: value, containerId: undefined },
+            };
+          case "sourceContainer":
+            return {
+              ...prevState,
+              source: { ...prevState.source, containerId: value },
+            };
+          case "targetDatabase":
+            return {
+              ...prevState,
+              target: { ...prevState.target, databaseId: value, containerId: undefined },
+            };
+          case "targetContainer":
+            return {
+              ...prevState,
+              target: { ...prevState.target, containerId: value },
+            };
+          default:
+            return prevState;
+        }
+      });
+    };
+}

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

@@ -0,0 +1,43 @@
+import { Dropdown, Stack } from "@fluentui/react";
+import React from "react";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+import { DatabaseContainerSectionProps } from "../../../../Types";
+import FieldRow from "../../Components/FieldRow";
+
+export const DatabaseContainerSection = ({
+  heading,
+  databaseOptions,
+  selectedDatabase,
+  databaseDisabled,
+  databaseOnChange,
+  containerOptions,
+  selectedContainer,
+  containerDisabled,
+  containerOnChange,
+}: DatabaseContainerSectionProps) => (
+  <Stack tokens={{ childrenGap: 15 }} className="databaseContainerSection">
+    <label className="subHeading">{heading}</label>
+    <FieldRow label={ContainerCopyMessages.databaseDropdownLabel}>
+      <Dropdown
+        placeholder={ContainerCopyMessages.databaseDropdownPlaceholder}
+        ariaLabel={ContainerCopyMessages.databaseDropdownLabel}
+        options={databaseOptions}
+        required
+        disabled={!!databaseDisabled}
+        selectedKey={selectedDatabase}
+        onChange={databaseOnChange}
+      />
+    </FieldRow>
+    <FieldRow label={ContainerCopyMessages.containerDropdownLabel}>
+      <Dropdown
+        placeholder={ContainerCopyMessages.containerDropdownPlaceholder}
+        ariaLabel={ContainerCopyMessages.containerDropdownLabel}
+        options={containerOptions}
+        required
+        disabled={!!containerDisabled}
+        selectedKey={selectedContainer}
+        onChange={containerOnChange}
+      />
+    </FieldRow>
+  </Stack>
+);

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

@@ -0,0 +1,72 @@
+import { Stack } from "@fluentui/react";
+import { DatabaseModel } from "Contracts/DataModels";
+import React from "react";
+import { useDatabases } from "../../../../../hooks/useDatabases";
+import { useDataContainers } from "../../../../../hooks/useDataContainers";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { DatabaseContainerSection } from "./components/DatabaseContainerSection";
+import { dropDownChangeHandler } from "./Events/DropDownChangeHandler";
+import { useMemoizedSourceAndTargetData } from "./memoizedData";
+
+const SelectSourceAndTargetContainers = () => {
+  const { copyJobState, setCopyJobState } = useCopyJobContext();
+  const { source, target, sourceDbParams, sourceContainerParams, targetDbParams, targetContainerParams } =
+    useMemoizedSourceAndTargetData(copyJobState);
+
+  // Custom hooks
+  const sourceDatabases = useDatabases(...sourceDbParams) || [];
+  const sourceContainers = useDataContainers(...sourceContainerParams) || [];
+  const targetDatabases = useDatabases(...targetDbParams) || [];
+  const targetContainers = useDataContainers(...targetContainerParams) || [];
+
+  // Memoize option objects for dropdowns
+  const sourceDatabaseOptions = React.useMemo(
+    () => sourceDatabases.map((db: DatabaseModel) => ({ key: db.name, text: db.name, data: db })),
+    [sourceDatabases],
+  );
+  const sourceContainerOptions = React.useMemo(
+    () => sourceContainers.map((c: DatabaseModel) => ({ key: c.name, text: c.name, data: c })),
+    [sourceContainers],
+  );
+  const targetDatabaseOptions = React.useMemo(
+    () => targetDatabases.map((db: DatabaseModel) => ({ key: db.name, text: db.name, data: db })),
+    [targetDatabases],
+  );
+  const targetContainerOptions = React.useMemo(
+    () => targetContainers.map((c: DatabaseModel) => ({ key: c.name, text: c.name, data: c })),
+    [targetContainers],
+  );
+
+  const onDropdownChange = React.useCallback(dropDownChangeHandler(setCopyJobState), [setCopyJobState]);
+
+  return (
+    <Stack className="selectSourceAndTargetContainers" tokens={{ childrenGap: 25 }}>
+      <span>{ContainerCopyMessages.selectSourceAndTargetContainersDescription}</span>
+      <DatabaseContainerSection
+        heading={ContainerCopyMessages.sourceContainerSubHeading}
+        databaseOptions={sourceDatabaseOptions}
+        selectedDatabase={source?.databaseId}
+        databaseDisabled={false}
+        databaseOnChange={onDropdownChange("sourceDatabase")}
+        containerOptions={sourceContainerOptions}
+        selectedContainer={source?.containerId}
+        containerDisabled={!source?.databaseId}
+        containerOnChange={onDropdownChange("sourceContainer")}
+      />
+      <DatabaseContainerSection
+        heading={ContainerCopyMessages.targetContainerSubHeading}
+        databaseOptions={targetDatabaseOptions}
+        selectedDatabase={target?.databaseId}
+        databaseDisabled={false}
+        databaseOnChange={onDropdownChange("targetDatabase")}
+        containerOptions={targetContainerOptions}
+        selectedContainer={target?.containerId}
+        containerDisabled={!target?.databaseId}
+        containerOnChange={onDropdownChange("targetContainer")}
+      />
+    </Stack>
+  );
+};
+
+export default SelectSourceAndTargetContainers;

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

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

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

@@ -0,0 +1,89 @@
+import { useCallback, useMemo, useReducer } from "react";
+import { useSidePanel } from "../../../../hooks/useSidePanel";
+import { submitCreateCopyJob } from "../../Actions/CopyJobActions";
+import { useCopyJobContext } from "../../Context/CopyJobContext";
+import { useCopyJobPrerequisitesCache } from "./useCopyJobPrerequisitesCache";
+import { SCREEN_KEYS, useCreateCopyJobScreensList } from "./useCreateCopyJobScreensList";
+
+type NavigationState = {
+  screenHistory: string[];
+};
+
+type Action = { type: "NEXT"; nextScreen: string } | { type: "PREVIOUS" } | { type: "RESET" };
+
+function navigationReducer(state: NavigationState, action: Action): NavigationState {
+  switch (action.type) {
+    case "NEXT":
+      return {
+        screenHistory: [...state.screenHistory, action.nextScreen],
+      };
+    case "PREVIOUS":
+      return {
+        screenHistory: state.screenHistory.length > 1 ? state.screenHistory.slice(0, -1) : state.screenHistory,
+      };
+    case "RESET":
+      return {
+        screenHistory: [SCREEN_KEYS.SelectAccount],
+      };
+    default:
+      return state;
+  }
+}
+
+export function useCopyJobNavigation() {
+  const { copyJobState, resetCopyJobState } = useCopyJobContext();
+  const screens = useCreateCopyJobScreensList();
+  const { validationCache: cache } = useCopyJobPrerequisitesCache();
+  const [state, dispatch] = useReducer(navigationReducer, { screenHistory: [SCREEN_KEYS.SelectAccount] });
+
+  const currentScreenKey = state.screenHistory[state.screenHistory.length - 1];
+  const currentScreen = screens.find((screen) => screen.key === currentScreenKey);
+
+  const isPrimaryDisabled = useMemo(() => {
+    const context = currentScreenKey === SCREEN_KEYS.AssignPermissions ? cache : copyJobState;
+    return !currentScreen?.validations.every((v) => v.validate(context));
+  }, [currentScreen.key, copyJobState, cache]);
+  const primaryBtnText = useMemo(() => {
+    if (currentScreenKey === SCREEN_KEYS.PreviewCopyJob) {
+      return "Copy";
+    }
+    return "Next";
+  }, [currentScreenKey]);
+
+  const isPreviousDisabled = state.screenHistory.length <= 1;
+
+  const handleCancel = useCallback(() => {
+    dispatch({ type: "RESET" });
+    resetCopyJobState();
+    useSidePanel.getState().closeSidePanel();
+  }, []);
+
+  const handlePrimary = useCallback(() => {
+    const transitions = {
+      [SCREEN_KEYS.SelectAccount]: SCREEN_KEYS.AssignPermissions,
+      [SCREEN_KEYS.AssignPermissions]: SCREEN_KEYS.SelectSourceAndTargetContainers,
+      [SCREEN_KEYS.SelectSourceAndTargetContainers]: SCREEN_KEYS.PreviewCopyJob,
+    };
+
+    const nextScreen = transitions[currentScreenKey];
+    if (nextScreen) {
+      dispatch({ type: "NEXT", nextScreen });
+    } else if (currentScreenKey === SCREEN_KEYS.PreviewCopyJob) {
+      submitCreateCopyJob(copyJobState, handleCancel);
+    }
+  }, [currentScreenKey, copyJobState]);
+
+  const handlePrevious = useCallback(() => {
+    dispatch({ type: "PREVIOUS" });
+  }, []);
+
+  return {
+    currentScreen,
+    isPrimaryDisabled,
+    isPreviousDisabled,
+    handlePrimary,
+    handlePrevious,
+    handleCancel,
+    primaryBtnText,
+  };
+}

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

@@ -0,0 +1,11 @@
+import create from "zustand";
+
+interface CopyJobPrerequisitesCacheState {
+  validationCache: Map<string, boolean>;
+  setValidationCache: (cache: Map<string, boolean>) => void;
+}
+
+export const useCopyJobPrerequisitesCache = create<CopyJobPrerequisitesCacheState>((set) => ({
+  validationCache: new Map<string, boolean>(),
+  setValidationCache: (cache) => set({ validationCache: cache }),
+}));

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

@@ -0,0 +1,87 @@
+import React from "react";
+import { CopyJobContextState } from "../../Types";
+import AssignPermissions from "../Screens/AssignPermissions";
+import PreviewCopyJob from "../Screens/PreviewCopyJob";
+import SelectAccount from "../Screens/SelectAccount";
+import SelectSourceAndTargetContainers from "../Screens/SelectSourceAndTargetContainers";
+
+const SCREEN_KEYS = {
+  SelectAccount: "SelectAccount",
+  SelectSourceAndTargetContainers: "SelectSourceAndTargetContainers",
+  PreviewCopyJob: "PreviewCopyJob",
+  AssignPermissions: "AssignPermissions",
+};
+
+type Validation = {
+  validate: (state: CopyJobContextState | Map<string, boolean>) => boolean;
+  message: string;
+};
+
+type Screen = {
+  key: string;
+  component: React.ReactElement;
+  validations: Validation[];
+};
+
+function useCreateCopyJobScreensList() {
+  return React.useMemo<Screen[]>(
+    () => [
+      {
+        key: SCREEN_KEYS.SelectAccount,
+        component: <SelectAccount />,
+        validations: [
+          {
+            validate: (state: CopyJobContextState) => !!state?.source?.subscription && !!state?.source?.account,
+            message: "Please select a subscription and account to proceed",
+          },
+        ],
+      },
+      {
+        key: SCREEN_KEYS.SelectSourceAndTargetContainers,
+        component: <SelectSourceAndTargetContainers />,
+        validations: [
+          {
+            validate: (state: CopyJobContextState) =>
+              !!state?.source?.databaseId &&
+              !!state?.source?.containerId &&
+              !!state?.target?.databaseId &&
+              !!state?.target?.containerId,
+            message: "Please select source and target containers to proceed",
+          },
+        ],
+      },
+      {
+        key: SCREEN_KEYS.PreviewCopyJob,
+        component: <PreviewCopyJob />,
+        validations: [
+          {
+            validate: (state: CopyJobContextState) =>
+              !!(typeof state?.jobName === "string" && state?.jobName && /^[a-zA-Z0-9-.]+$/.test(state?.jobName)),
+            message: "Please enter a job name to proceed",
+          },
+        ],
+      },
+      {
+        key: SCREEN_KEYS.AssignPermissions,
+        component: <AssignPermissions />,
+        validations: [
+          {
+            validate: (cache: Map<string, boolean>) => {
+              const cacheValuesIterator = Array.from(cache.values());
+              if (cacheValuesIterator.length === 0) {
+                return false;
+              }
+
+              const allValid = cacheValuesIterator.every((isValid: boolean) => isValid);
+              return allValid;
+            },
+            message: "Please ensure all previous steps are valid to proceed",
+          },
+        ],
+      },
+    ],
+    [],
+  );
+}
+
+export { SCREEN_KEYS, useCreateCopyJobScreensList };

src/Explorer/ContainerCopy/Enums/index.ts

@@ -0,0 +1,40 @@
+export enum CopyJobMigrationType {
+  Offline = "offline",
+  Online = "online",
+}
+
+// all checks will happen
+export enum IdentityType {
+  SystemAssigned = "systemassigned", // "SystemAssigned"
+  UserAssigned = "userassigned", // "UserAssigned"
+  None = "none", // "None"
+}
+
+export enum DefaultIdentityType {
+  SystemAssignedIdentity = "systemassignedidentity", // "SystemAssignedIdentity"
+}
+
+export enum BackupPolicyType {
+  Continuous = "Continuous",
+  Periodic = "Periodic",
+}
+
+export enum CopyJobStatusType {
+  Pending = "Pending",
+  InProgress = "InProgress",
+  Running = "Running",
+  Partitioning = "Partitioning",
+  Paused = "Paused",
+  Skipped = "Skipped",
+  Completed = "Completed",
+  Cancelled = "Cancelled",
+  Failed = "Failed",
+  Faulted = "Faulted",
+}
+
+export enum CopyJobActions {
+  pause = "pause",
+  resume = "resume",
+  cancel = "cancel",
+  complete = "complete",
+}

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

@@ -0,0 +1,81 @@
+import { IconButton, IContextualMenuProps } from "@fluentui/react";
+import React from "react";
+import ContainerCopyMessages from "../../ContainerCopyMessages";
+import { CopyJobActions, CopyJobMigrationType, CopyJobStatusType } from "../../Enums";
+import { CopyJobType } from "../../Types";
+
+interface CopyJobActionMenuProps {
+  job: CopyJobType;
+  handleClick: (job: CopyJobType, action: string) => void;
+}
+
+const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick }) => {
+  if ([CopyJobStatusType.Completed, CopyJobStatusType.Cancelled].includes(job.Status)) {
+    return null;
+  }
+
+  const getMenuItems = (): IContextualMenuProps["items"] => {
+    const baseItems = [
+      {
+        key: CopyJobActions.pause,
+        text: ContainerCopyMessages.MonitorJobs.Actions.pause,
+        iconProps: { iconName: "Pause" },
+        onClick: () => handleClick(job, CopyJobActions.pause),
+      },
+      {
+        key: CopyJobActions.cancel,
+        text: ContainerCopyMessages.MonitorJobs.Actions.cancel,
+        iconProps: { iconName: "Cancel" },
+        onClick: () => handleClick(job, CopyJobActions.cancel),
+      },
+      {
+        key: CopyJobActions.resume,
+        text: ContainerCopyMessages.MonitorJobs.Actions.resume,
+        iconProps: { iconName: "Play" },
+        onClick: () => handleClick(job, CopyJobActions.resume),
+      },
+    ];
+
+    if (CopyJobStatusType.Paused === job.Status) {
+      return baseItems.filter((item) => item.key !== CopyJobActions.pause);
+    }
+
+    if (CopyJobStatusType.Pending === job.Status) {
+      return baseItems.filter((item) => item.key !== CopyJobActions.resume);
+    }
+
+    if (
+      [CopyJobStatusType.InProgress, CopyJobStatusType.Running, CopyJobStatusType.Partitioning].includes(job.Status)
+    ) {
+      const filteredItems = baseItems.filter((item) => item.key !== CopyJobActions.resume);
+      if (job.Mode === CopyJobMigrationType.Online) {
+        filteredItems.push({
+          key: CopyJobActions.complete,
+          text: ContainerCopyMessages.MonitorJobs.Actions.complete,
+          iconProps: { iconName: "CheckMark" },
+          onClick: () => handleClick(job, CopyJobActions.complete),
+        });
+      }
+      return filteredItems;
+    }
+
+    if ([CopyJobStatusType.Failed, CopyJobStatusType.Faulted, CopyJobStatusType.Skipped].includes(job.Status)) {
+      return baseItems.filter((item) => item.key === CopyJobActions.resume);
+    }
+
+    return baseItems;
+  };
+
+  return (
+    <IconButton
+      role="button"
+      iconProps={{ iconName: "More", styles: { root: { fontSize: "20px", fontWeight: "bold" } } }}
+      menuProps={{ items: getMenuItems() }}
+      menuIconProps={{ iconName: "" }}
+      ariaLabel={ContainerCopyMessages.MonitorJobs.Columns.actions}
+      title={ContainerCopyMessages.MonitorJobs.Columns.actions}
+    />
+  );
+};
+
+export default CopyJobActionMenu;

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

@@ -0,0 +1,79 @@
+import { IColumn } from "@fluentui/react";
+import React from "react";
+import ContainerCopyMessages from "../../ContainerCopyMessages";
+import { CopyJobType } from "../../Types";
+import CopyJobActionMenu from "./CopyJobActionMenu";
+import CopyJobStatusWithIcon from "./CopyJobStatusWithIcon";
+
+export const getColumns = (
+  handleSort: (columnKey: string) => void,
+  handleActionClick: (job: CopyJobType, action: string) => void,
+  sortedColumnKey: string | undefined,
+  isSortedDescending: boolean,
+): IColumn[] => [
+    {
+      key: "LastUpdatedTime",
+      name: ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime,
+      fieldName: "LastUpdatedTime",
+      minWidth: 140,
+      maxWidth: 300,
+      isResizable: true,
+      isSorted: sortedColumnKey === "timestamp",
+      isSortedDescending: isSortedDescending,
+      onColumnClick: () => handleSort("timestamp"),
+    },
+    {
+      key: "Name",
+      name: ContainerCopyMessages.MonitorJobs.Columns.name,
+      fieldName: "Name",
+      minWidth: 140,
+      maxWidth: 300,
+      isResizable: true,
+      isSorted: sortedColumnKey === "Name",
+      isSortedDescending: isSortedDescending,
+      onColumnClick: () => handleSort("Name"),
+    },
+    {
+      key: "Mode",
+      name: ContainerCopyMessages.MonitorJobs.Columns.mode,
+      fieldName: "Mode",
+      minWidth: 90,
+      maxWidth: 200,
+      isResizable: true,
+      isSorted: sortedColumnKey === "Mode",
+      isSortedDescending: isSortedDescending,
+      onColumnClick: () => handleSort("Mode"),
+    },
+    {
+      key: "CompletionPercentage",
+      name: ContainerCopyMessages.MonitorJobs.Columns.completionPercentage,
+      fieldName: "CompletionPercentage",
+      minWidth: 110,
+      maxWidth: 200,
+      isResizable: true,
+      isSorted: sortedColumnKey === "CompletionPercentage",
+      isSortedDescending: isSortedDescending,
+      onRender: (job: CopyJobType) => `${job.CompletionPercentage}%`,
+      onColumnClick: () => handleSort("CompletionPercentage"),
+    },
+    {
+      key: "CopyJobStatus",
+      name: ContainerCopyMessages.MonitorJobs.Columns.status,
+      fieldName: "Status",
+      minWidth: 130,
+      maxWidth: 200,
+      isResizable: true,
+      isSorted: sortedColumnKey === "Status",
+      isSortedDescending: isSortedDescending,
+      onRender: (job: CopyJobType) => <CopyJobStatusWithIcon status={job.Status} />,
+      onColumnClick: () => handleSort("Status"),
+    },
+    {
+      key: "Actions",
+      name: "",
+      minWidth: 80,
+      maxWidth: 200,
+      isResizable: true,
+      onRender: (job: CopyJobType) => <CopyJobActionMenu job={job} handleClick={handleActionClick} />,
+    },
+  ];

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

@@ -0,0 +1,54 @@
+import { FontIcon, getTheme, mergeStyles, mergeStyleSets, Stack, Text } from "@fluentui/react";
+import React from "react";
+import ContainerCopyMessages from "../../ContainerCopyMessages";
+import { CopyJobStatusType } from "../../Enums";
+
+const theme = getTheme();
+
+const iconClass = mergeStyles({
+  fontSize: "16px",
+  marginRight: "8px",
+});
+
+const classNames = mergeStyleSets({
+  [CopyJobStatusType.Pending]: [{ color: theme.semanticColors.bodySubtext }, iconClass],
+  [CopyJobStatusType.InProgress]: [{ color: theme.palette.themePrimary }, iconClass],
+  [CopyJobStatusType.Running]: [{ color: theme.palette.themePrimary }, iconClass],
+  [CopyJobStatusType.Partitioning]: [{ color: theme.palette.themePrimary }, iconClass],
+  [CopyJobStatusType.Paused]: [{ color: theme.palette.themePrimary }, iconClass],
+  [CopyJobStatusType.Skipped]: [{ color: theme.semanticColors.bodySubtext }, iconClass],
+  [CopyJobStatusType.Cancelled]: [{ color: theme.semanticColors.bodySubtext }, iconClass],
+  [CopyJobStatusType.Failed]: [{ color: theme.semanticColors.errorIcon }, iconClass],
+  [CopyJobStatusType.Faulted]: [{ color: theme.semanticColors.errorIcon }, iconClass],
+  [CopyJobStatusType.Completed]: [{ color: theme.semanticColors.successIcon }, iconClass],
+  unknown: [{ color: theme.semanticColors.bodySubtext }, iconClass],
+});
+
+const iconMap: Record<CopyJobStatusType, string> = {
+  [CopyJobStatusType.Pending]: "StatusCircleRing",
+  [CopyJobStatusType.InProgress]: "ProgressRingDots",
+  [CopyJobStatusType.Running]: "ProgressRingDots",
+  [CopyJobStatusType.Partitioning]: "ProgressRingDots",
+  [CopyJobStatusType.Paused]: "CirclePause",
+  [CopyJobStatusType.Skipped]: "StatusCircleBlock2",
+  [CopyJobStatusType.Cancelled]: "StatusErrorFull",
+  [CopyJobStatusType.Failed]: "StatusErrorFull",
+  [CopyJobStatusType.Faulted]: "StatusErrorFull",
+  [CopyJobStatusType.Completed]: "CompletedSolid",
+};
+
+const CopyJobStatusWithIcon: React.FC<{ status: CopyJobStatusType }> = ({ status }) => {
+  const statusText = ContainerCopyMessages.MonitorJobs.Status[status] || "Unknown";
+  return (
+    <Stack horizontal verticalAlign="center">
+      <FontIcon
+        aria-label={status}
+        iconName={iconMap[status] || "UnknownSolid"}
+        className={classNames[status] || classNames.unknown}
+      />
+      <Text>{statusText}</Text>
+    </Stack>
+  );
+};
+
+export default CopyJobStatusWithIcon;

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

@@ -0,0 +1,22 @@
+import { ActionButton, Image } from "@fluentui/react";
+import React, { useCallback } from "react";
+import CopyJobIcon from "../../../../../images/ContainerCopy/copy-jobs.svg";
+import * as Actions from "../../Actions/CopyJobActions";
+import ContainerCopyMessages from "../../ContainerCopyMessages";
+
+interface CopyJobsNotFoundProps {}
+
+const CopyJobsNotFound: React.FC<CopyJobsNotFoundProps> = () => {
+  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}>
+        {ContainerCopyMessages.createCopyJobButtonText}
+      </ActionButton>
+    </div>
+  );
+};
+
+export default CopyJobsNotFound;

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

@@ -0,0 +1,103 @@
+/*  eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  ConstrainMode,
+  DetailsListLayoutMode,
+  DetailsRow,
+  IColumn,
+  ScrollablePane,
+  ScrollbarVisibility,
+  ShimmeredDetailsList,
+  Stack,
+  Sticky,
+  StickyPositionType,
+} from "@fluentui/react";
+import React, { useEffect } from "react";
+import { CopyJobType } from "../../Types";
+import { getColumns } from "./CopyJobColumns";
+
+interface CopyJobsListProps {
+  jobs: CopyJobType[];
+  handleActionClick: (job: CopyJobType, action: string) => void;
+  pageSize?: number;
+}
+
+const styles = {
+  container: { height: "calc(100vh - 15em)" } as React.CSSProperties,
+  stackItem: { position: "relative", marginBottom: "20px" } as React.CSSProperties,
+};
+
+const PAGE_SIZE = 100; // Number of items per page
+
+const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pageSize = PAGE_SIZE }) => {
+  const [startIndex] = React.useState(0);
+  const [sortedJobs, setSortedJobs] = React.useState<CopyJobType[]>(jobs);
+  const [sortedColumnKey, setSortedColumnKey] = React.useState<string | undefined>(undefined);
+  const [isSortedDescending, setIsSortedDescending] = React.useState<boolean>(false);
+
+  useEffect(() => {
+    setSortedJobs(jobs);
+  }, [jobs]);
+
+  const handleSort = (columnKey: string) => {
+    const isDescending = sortedColumnKey === columnKey ? !isSortedDescending : false;
+    const sorted = [...sortedJobs].sort((current: any, next: any) => {
+      if (current[columnKey] < next[columnKey]) {
+        return isDescending ? 1 : -1;
+      }
+      if (current[columnKey] > next[columnKey]) {
+        return isDescending ? -1 : 1;
+      }
+      return 0;
+    });
+    setSortedJobs(sorted);
+    setSortedColumnKey(columnKey);
+    setIsSortedDescending(isDescending);
+  };
+
+  const columns: IColumn[] = React.useMemo(
+    () => getColumns(handleSort, handleActionClick, sortedColumnKey, isSortedDescending),
+    [handleSort, handleActionClick, sortedColumnKey, isSortedDescending],
+  );
+
+  const _handleRowClick = React.useCallback((job: CopyJobType) => {
+    // eslint-disable-next-line no-console
+    console.log("Row clicked:", job);
+  }, []);
+
+  const _onRenderRow = React.useCallback((props: any) => {
+    return (
+      <div onClick={_handleRowClick.bind(null, props.item)}>
+        <DetailsRow {...props} styles={{ root: { cursor: "pointer" } }} />
+      </div>
+    );
+  }, []);
+
+  // const totalCount = jobs.length;
+
+  return (
+    <div style={styles.container}>
+      <Stack verticalFill={true}>
+        <Stack.Item verticalFill={true} grow={1} shrink={1} style={styles.stackItem}>
+          <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
+            <ShimmeredDetailsList
+              onRenderRow={_onRenderRow}
+              checkboxVisibility={2}
+              columns={columns}
+              items={sortedJobs.slice(startIndex, startIndex + pageSize)}
+              enableShimmer={false}
+              constrainMode={ConstrainMode.unconstrained}
+              layoutMode={DetailsListLayoutMode.justified}
+              onRenderDetailsHeader={(props, defaultRender) => (
+                <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
+                  {defaultRender({ ...props })}
+                </Sticky>
+              )}
+            />
+          </ScrollablePane>
+        </Stack.Item>
+      </Stack>
+    </div>
+  );
+};
+
+export default CopyJobsList;

src/Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobRefState.tsx

@@ -0,0 +1,12 @@
+import create from "zustand";
+import { MonitorCopyJobsRef } from "./MonitorCopyJobs";
+
+type MonitorCopyJobsRefStateType = {
+  ref: MonitorCopyJobsRef;
+  setRef: (ref: MonitorCopyJobsRef) => void;
+};
+
+export const MonitorCopyJobsRefState = create<MonitorCopyJobsRefStateType>((set) => ({
+  ref: null,
+  setRef: (ref) => set({ ref: ref }),
+}));

src/Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobs.tsx

@@ -0,0 +1,118 @@
+/* eslint-disable react/display-name */
+import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import ShimmerTree, { IndentLevel } from "Common/ShimmerTree";
+import React, { forwardRef, useEffect, useImperativeHandle } from "react";
+import { getCopyJobs, updateCopyJobStatus } from "../Actions/CopyJobActions";
+import { convertToCamelCase } from "../CopyJobUtils";
+import { CopyJobStatusType } from "../Enums";
+import CopyJobsNotFound from "../MonitorCopyJobs/Components/CopyJobs.NotFound";
+import { CopyJobType } from "../Types";
+import CopyJobsList from "./Components/CopyJobsList";
+
+const FETCH_INTERVAL_MS = 30 * 1000; // Interval time in milliseconds (30 seconds)
+
+interface MonitorCopyJobsProps {}
+
+export interface MonitorCopyJobsRef {
+  refreshJobList: () => void;
+}
+
+const MonitorCopyJobs = forwardRef<MonitorCopyJobsRef, MonitorCopyJobsProps>((_props, ref) => {
+  const [loading, setLoading] = React.useState(true); // Start with loading as true
+  const [error, setError] = React.useState<string | null>(null);
+  const [jobs, setJobs] = React.useState<CopyJobType[]>([]);
+  const isUpdatingRef = React.useRef(false); // Use ref to track updating state
+  const isFirstFetchRef = React.useRef(true); // Use ref to track the first fetch
+
+  const indentLevels = React.useMemo<IndentLevel[]>(() => Array(7).fill({ level: 0, width: "100%" }), []);
+
+  const fetchJobs = React.useCallback(async () => {
+    if (isUpdatingRef.current) {
+      return;
+    } // Skip if an update is in progress
+    try {
+      if (isFirstFetchRef.current) {
+        setLoading(true);
+      } // Show loading spinner only for the first fetch
+      setError(null);
+
+      const response = await getCopyJobs();
+      setJobs((prevJobs) => {
+        // Only update jobs if they are different
+        const isSame = JSON.stringify(prevJobs) === JSON.stringify(response);
+        return isSame ? prevJobs : response;
+      });
+    } catch (error) {
+      setError(error.message || "Failed to load copy jobs. Please try again later.");
+    } finally {
+      if (isFirstFetchRef.current) {
+        setLoading(false); // Hide loading spinner after the first fetch
+        isFirstFetchRef.current = false; // Mark the first fetch as complete
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchJobs();
+    const intervalId = setInterval(fetchJobs, FETCH_INTERVAL_MS);
+
+    return () => clearInterval(intervalId);
+  }, [fetchJobs]);
+
+  useImperativeHandle(ref, () => ({
+    refreshJobList: () => {
+      if (isUpdatingRef.current) {
+        setError("Please wait for the current update to complete before refreshing.");
+        return;
+      }
+      fetchJobs();
+    },
+  }));
+
+  const handleActionClick = React.useCallback(async (job: CopyJobType, action: string) => {
+    try {
+      isUpdatingRef.current = true; // Mark as updating
+      const updatedCopyJob = await updateCopyJobStatus(job, action);
+      if (updatedCopyJob) {
+        setJobs((prevJobs) =>
+          prevJobs.map((prevJob) =>
+            prevJob.Name === updatedCopyJob.properties.jobName
+              ? {
+                  ...prevJob,
+                  Status: convertToCamelCase(updatedCopyJob.properties.status) as CopyJobStatusType,
+                }
+              : prevJob,
+          ),
+        );
+      }
+    } catch (error) {
+      setError(error.message || "Failed to update copy job status. Please try again later.");
+    } finally {
+      isUpdatingRef.current = false; // Mark as not updating
+    }
+  }, []);
+
+  const memoizedJobsList = React.useMemo(() => {
+    if (loading) {
+      return null;
+    }
+    if (jobs.length > 0) {
+      return <CopyJobsList jobs={jobs} handleActionClick={handleActionClick} />;
+    }
+    return <CopyJobsNotFound />;
+  }, [jobs, loading, handleActionClick]);
+
+  return (
+    <Stack className="monitorCopyJobs flexContainer">
+      {loading && <ShimmerTree indentLevels={indentLevels} style={{ width: "100%", padding: "1rem 2.5rem" }} />}
+      {error && (
+        <MessageBar messageBarType={MessageBarType.error} isMultiline={false} onDismiss={() => setError(null)}>
+          {error}
+        </MessageBar>
+      )}
+      {memoizedJobsList}
+    </Stack>
+  );
+});
+
+export default MonitorCopyJobs;

src/Explorer/ContainerCopy/Types/index.ts

@@ -0,0 +1,132 @@
+import { DatabaseAccount, Subscription } from "Contracts/DataModels";
+import React from "react";
+import { ApiType } from "UserContext";
+import Explorer from "../../Explorer";
+import { CopyJobMigrationType, CopyJobStatusType } from "../Enums";
+
+export interface ContainerCopyProps {
+  container: Explorer;
+}
+
+export type CopyJobCommandBarBtnType = {
+  key: string;
+  iconSrc: string;
+  label: string;
+  ariaLabel: string;
+  disabled?: boolean;
+  onClick: () => void;
+};
+
+export type CopyJobTabForwardRefHandle = {
+  validate: (state: CopyJobContextState) => boolean;
+};
+
+export type DropdownOptionType = {
+  key: string;
+  text: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data: any;
+};
+
+export type DatabaseParams = [string | undefined, string | undefined, string | undefined, ApiType];
+export type DataContainerParams = [
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  ApiType,
+];
+
+export interface DatabaseContainerSectionProps {
+  heading: string;
+  databaseOptions: DropdownOptionType[];
+  selectedDatabase: string;
+  databaseDisabled?: boolean;
+  databaseOnChange: (ev: React.FormEvent<HTMLDivElement>, option: DropdownOptionType) => void;
+  containerOptions: DropdownOptionType[];
+  selectedContainer: string;
+  containerDisabled?: boolean;
+  containerOnChange: (ev: React.FormEvent<HTMLDivElement>, option: DropdownOptionType) => void;
+}
+
+export interface CopyJobContextState {
+  jobName: string;
+  migrationType: CopyJobMigrationType;
+  sourceReadAccessFromTarget?: boolean;
+  // source details
+  source: {
+    subscription: Subscription;
+    account: DatabaseAccount;
+    databaseId: string;
+    containerId: string;
+  };
+  // target details
+  target: {
+    subscriptionId: string;
+    account: DatabaseAccount;
+    databaseId: string;
+    containerId: string;
+  };
+}
+
+export interface CopyJobFlowType {
+  currentScreen: string;
+}
+
+export interface CopyJobContextProviderType {
+  flow: CopyJobFlowType;
+  setFlow: React.Dispatch<React.SetStateAction<CopyJobFlowType>>;
+  copyJobState: CopyJobContextState | null;
+  setCopyJobState: React.Dispatch<React.SetStateAction<CopyJobContextState>>;
+  resetCopyJobState: () => void;
+}
+
+export type CopyJobType = {
+  ID: string;
+  Mode: string;
+  Name: string;
+  Status: CopyJobStatusType;
+  CompletionPercentage: number;
+  Duration: string;
+  LastUpdatedTime: string;
+  timestamp: number;
+  Error?: CopyJobErrorType;
+};
+
+export interface CopyJobErrorType {
+  message: string;
+  code: string;
+}
+
+export interface CopyJobError {
+  message: string;
+  navigateToStep?: number;
+}
+
+export type DataTransferJobType = {
+  id: string;
+  type: string;
+  properties: {
+    jobName: string;
+    status: string;
+    lastUpdatedUtcTime: string;
+    processedCount: number;
+    totalCount: number;
+    mode: string;
+    duration: string;
+    source: {
+      databaseName: string;
+      collectionName: string;
+      component: string;
+    };
+    destination: {
+      databaseName: string;
+      collectionName: string;
+      component: string;
+    };
+    error: {
+      message: string;
+      code: string;
+    };
+  };
+};

src/Explorer/ContainerCopy/containerCopyStyles.less

@@ -0,0 +1,128 @@
+@import "../../../less/Common/Constants.less";
+
+#containerCopyWrapper {
+  .centerContent {
+    justify-content: center;
+    align-items: center;
+  }
+  .notFoundContainer {
+    .noCopyJobsMessage {
+      font-weight: 600;
+      margin: 0 auto;
+      color: @FocusColor;
+    }
+    button.createCopyJobButton {
+      color: @LinkColor;
+    }
+  }
+}
+.createCopyJobScreensContainer {
+  height: 100%;
+  padding: 1em 1.5em;
+  .bold {
+    font-weight: 600;
+  }
+  label {
+    padding: 0;
+  }
+  .flex-row {
+    display: flex;
+    flex-direction: row;
+    label.field-label {
+      font-weight: 600;
+    }
+    .flex-fixed-width {
+      flex: 0 0 auto;
+      width: 150px;
+    }
+    .flex-grow-col {
+      flex: 1 1 auto;
+    }
+  }
+  .databaseContainerSection {
+    label.subHeading {
+      font: inherit;
+      padding: unset;
+      font-weight: 600;
+    }
+  }
+
+  .accordionHeader {
+    button {
+      display: flex;
+      align-items: center;
+      .accordionHeaderText {
+        margin-left: 5px;
+        font-weight: 600;
+      }
+      .statusIcon {
+        margin-left: auto;
+      }
+    }
+  }
+  .popover-container {
+    button[disabled] {
+      cursor: not-allowed;
+      opacity: 0.8;
+    }
+  }
+  .foreground {
+    z-index: 10;
+    background-color: white;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transform: translate(0%, -9%);
+    position: absolute;
+  }
+}
+
+.monitorCopyJobs {
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+
+  .ms-DetailsList {
+    width: 100%;
+
+    .ms-DetailsHeader {
+      .ms-DetailsHeader-cell {
+        padding: @DefaultSpace 20px;
+        font-weight: 600;
+        font-size: @DefaultFontSize;
+        color: @BaseHigh;
+        background-color: @BaseLow;
+        border-bottom: @ButtonBorderWidth solid @BaseMedium;
+
+        &:hover {
+          background-color: @BaseMediumLow;
+        }
+      }
+    }
+
+    .ms-DetailsRow {
+      border-bottom: @ButtonBorderWidth solid @BaseMedium;
+
+      &:hover {
+        background-color: @BaseMediumLow;
+      }
+
+      .ms-DetailsRow-cell {
+        padding: @MediumSpace 20px;
+        font-size: @DefaultFontSize;
+        color: @BaseHigh;
+        min-height: 48px;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  button[role="button"] {
+    &.ms-Button--icon {
+      i.ms-Icon {
+        font-size: @LargeSpace;
+      }
+    }
+  }
+}

src/Explorer/ContainerCopy/index.tsx

@@ -0,0 +1,23 @@
+import { MonitorCopyJobsRefState } from "Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobRefState";
+import React, { useEffect } from "react";
+import CopyJobCommandBar from "./CommandBar/CopyJobCommandBar";
+import "./containerCopyStyles.less";
+import MonitorCopyJobs, { MonitorCopyJobsRef } from "./MonitorCopyJobs/MonitorCopyJobs";
+import { ContainerCopyProps } from "./Types";
+
+const ContainerCopyPanel: React.FC<ContainerCopyProps> = ({ container }) => {
+  const monitorCopyJobsRef = React.useRef<MonitorCopyJobsRef>();
+  useEffect(() => {
+    if (monitorCopyJobsRef.current) {
+      MonitorCopyJobsRefState.getState().setRef(monitorCopyJobsRef.current);
+    }
+  }, [monitorCopyJobsRef.current]);
+  return (
+    <div id="containerCopyWrapper" className="flexContainer hideOverflows">
+      <CopyJobCommandBar container={container} />
+      <MonitorCopyJobs ref={monitorCopyJobsRef} />
+    </div>
+  );
+};
+
+export default ContainerCopyPanel;

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,4 +1,6 @@
 import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
+import { sendMessage } from "Common/MessageHandler";
+import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
 import {
   ComputedPropertiesComponent,
   ComputedPropertiesComponentProps,
@@ -15,7 +17,6 @@ import { useDatabases } from "Explorer/useDatabases";
 import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import { isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { isRunningOnPublicCloud } from "Utils/CloudUtils";
-import { isFeatureSupported, PlatformFeature } from "Utils/PlatformFeatureUtils";
 import * as React from "react";
 import DiscardIcon from "../../../../images/discard.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";
@@ -61,15 +62,15 @@ import {
   AddMongoIndexProps,
   ChangeFeedPolicyState,
   GeospatialConfigType,
+  MongoIndexTypes,
+  SettingsV2TabTypes,
+  TtlType,
   getMongoNotification,
   getTabTitle,
   hasDatabaseSharedThroughput,
   isDirty,
-  MongoIndexTypes,
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
-  SettingsV2TabTypes,
-  TtlType,
 } from "./SettingsUtils";
 
 interface SettingsV2TabInfo {
@@ -277,14 +278,14 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     this.saveSettingsButton = {
       isEnabled: this.isSaveSettingsButtonEnabled,
       isVisible: () => {
-        return isFeatureSupported(PlatformFeature.UpdateCollection);
+        return true;
       },
     };
 
     this.discardSettingsChangesButton = {
       isEnabled: this.isDiscardSettingsButtonEnabled,
       isVisible: () => {
-        return isFeatureSupported(PlatformFeature.UpdateCollection);
+        return true;
       },
     };
 
@@ -432,6 +433,15 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       );
     } finally {
       this.props.settingsTab.isExecuting(false);
+
+      // Send message to Fabric no matter success or failure.
+      // In case of failure, saveCollectionSettings might have partially succeeded and Fabric needs to refresh
+      if (isFabricNative() && this.isCollectionSettingsTab) {
+        sendMessage({
+          type: FabricMessageTypes.ContainerUpdated,
+          params: { updateType: "settings" },
+        });
+      }
     }
   };
 

src/Explorer/Explorer.tsx

@@ -3,7 +3,7 @@ import { Link } from "@fluentui/react/lib/Link";
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
 import { Environment, getEnvironment } from "Common/EnvironmentUtility";
 import { sendMessage } from "Common/MessageHandler";
-import { configContext, Platform } from "ConfigContext";
+import { Platform, configContext } from "ConfigContext";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
@@ -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 { isFeatureSupported, PlatformFeature } from "Utils/PlatformFeatureUtils";
 import { update } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as ko from "knockout";
@@ -1188,7 +1187,6 @@ export default class Explorer {
 
     // TODO: remove reference to isNotebookEnabled and isNotebooksEnabledForAccount
     const isNotebookEnabled =
-      isFeatureSupported(PlatformFeature.Notebooks) &&
       configContext.platform !== Platform.Fabric &&
       (userContext.features.notebooksDownBanner ||
         useNotebook.getState().isPhoenixNotebooks ||
@@ -1196,11 +1194,7 @@ export default class Explorer {
     useNotebook.getState().setIsNotebookEnabled(isNotebookEnabled);
     useNotebook
       .getState()
-      .setIsShellEnabled(
-        isFeatureSupported(PlatformFeature.CloudShell) &&
-          useNotebook.getState().isPhoenixFeatures &&
-          isPublicInternetAccessAllowed(),
-      );
+      .setIsShellEnabled(useNotebook.getState().isPhoenixFeatures && isPublicInternetAccessAllowed());
 
     TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
       isNotebookEnabled,
@@ -1221,7 +1215,6 @@ export default class Explorer {
 
   public async configureCopilot(): Promise<void> {
     if (
-      !isFeatureSupported(PlatformFeature.Copilot) ||
       userContext.apiType !== "SQL" ||
       !userContext.subscriptionId ||
       ![Environment.Development, Environment.Mpac, Environment.Prod].includes(getEnvironment())

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -5,6 +5,7 @@
  */
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
+import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 import { KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
 import { isFabric } from "Platform/Fabric/FabricUtil";
 import { userContext } from "UserContext";
@@ -30,7 +31,7 @@ export interface CommandBarStore {
 }
 
 export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
-  contextButtons: [],
+  contextButtons: [] as CommandButtonComponentProps[],
   setContextButtons: (contextButtons: CommandButtonComponentProps[]) => set((state) => ({ ...state, contextButtons })),
   isHidden: false,
   setIsHidden: (isHidden: boolean) => set((state) => ({ ...state, isHidden })),
@@ -43,6 +44,15 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const backgroundColor = StyleConstants.BaseLight;
   const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR);
 
+  // Subscribe to the store changes that affect button creation
+  const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
+  const aadTokenUpdated = useDataPlaneRbac((state) => state.aadTokenUpdated);
+
+  // Memoize the expensive button creation
+  const staticButtons = React.useMemo(() => {
+    return CommandBarComponentButtonFactory.createStaticCommandBarButtons(container, selectedNodeState);
+  }, [container, selectedNodeState, dataPlaneRbacEnabled, aadTokenUpdated]);
+
   if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
     const buttons =
       userContext.apiType === "Postgres"
@@ -62,7 +72,6 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
     );
   }
 
-  const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(container, selectedNodeState);
   const contextButtons = (buttons || []).concat(
     CommandBarComponentButtonFactory.createContextCommandBarButtons(container, selectedNodeState),
   );

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,8 +1,6 @@
 import { KeyboardAction } from "KeyboardShortcuts";
 import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
-import { areAdvancedScriptsSupported, isFeatureSupported, PlatformFeature } from "Utils/PlatformFeatureUtils";
 import * as React from "react";
-import { useEffect, useState } from "react";
 import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
 import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
 import AddTriggerIcon from "../../../../images/AddTrigger.svg";
@@ -18,7 +16,7 @@ import SynapseIcon from "../../../../images/synapse-link.svg";
 import VSCodeIcon from "../../../../images/vscode.svg";
 import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
-import { configContext, Platform } from "../../../ConfigContext";
+import { Platform, configContext } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { userContext } from "../../../UserContext";
 import { isRunningOnNationalCloud } from "../../../Utils/CloudUtils";
@@ -64,22 +62,12 @@ export function createStaticCommandBarButtons(
     }
     if (userContext.apiType !== "Gremlin") {
       const addVsCode = createOpenVsCodeDialogButton(container);
-      if (addVsCode) {
-        buttons.push(addVsCode);
-      }
+      buttons.push(addVsCode);
     }
   }
 
   if (isDataplaneRbacSupported(userContext.apiType)) {
-    const [loginButtonProps, setLoginButtonProps] = useState<CommandButtonComponentProps | undefined>(undefined);
-    const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
-    const aadTokenUpdated = useDataPlaneRbac((state) => state.aadTokenUpdated);
-
-    useEffect(() => {
-      const buttonProps = createLoginForEntraIDButton(container);
-      setLoginButtonProps(buttonProps);
-    }, [dataPlaneRbacEnabled, aadTokenUpdated, container]);
-
+    const loginButtonProps = createLoginForEntraIDButton(container);
     if (loginButtonProps) {
       addDivider();
       buttons.push(loginButtonProps);
@@ -245,17 +233,11 @@ export function createDivider(): CommandButtonComponentProps {
 
 function areScriptsSupported(): boolean {
   return (
-    areAdvancedScriptsSupported() &&
-    configContext.platform !== Platform.Fabric &&
-    (userContext.apiType === "SQL" || userContext.apiType === "Gremlin")
+    configContext.platform !== Platform.Fabric && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin")
   );
 }
 
 function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonComponentProps {
-  if (!isFeatureSupported(PlatformFeature.SynapseLink)) {
-    return undefined;
-  }
-
   if (configContext.platform === Platform.Emulator) {
     return undefined;
   }
@@ -283,10 +265,6 @@ function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonCo
 }
 
 function createOpenVsCodeDialogButton(container: Explorer): CommandButtonComponentProps {
-  if (!isFeatureSupported(PlatformFeature.VSCodeIntegration)) {
-    return undefined;
-  }
-
   const label = "Visual Studio Code";
   return {
     iconSrc: VSCodeIcon,

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx

@@ -42,7 +42,7 @@ import {
 } from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
-import { isFabricNative } from "Platform/Fabric/FabricUtil";
+import { DEFAULT_FABRIC_NATIVE_CONTAINER_THROUGHPUT, isFabricNative } from "Platform/Fabric/FabricUtil";
 import React from "react";
 import { CollectionCreation } from "Shared/Constants";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
@@ -50,10 +50,8 @@ import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { getCollectionName } from "Utils/APITypeUtils";
 import { isCapabilityEnabled, isServerlessAccount, isVectorSearchEnabled } from "Utils/CapabilityUtils";
-import { isFeatureSupported, PlatformFeature } from "Utils/PlatformFeatureUtils";
 import { getUpsellMessage } from "Utils/PricingUtils";
 import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import { CollapsibleSectionComponent } from "../../Controls/CollapsiblePanel/CollapsibleSectionComponent";
 import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
 import { ContainerSampleGenerator } from "../../DataSamples/ContainerSampleGenerator";
@@ -1161,15 +1159,11 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   }
 
   private shouldShowVectorSearchParameters() {
-    return (
-      isFeatureSupported(PlatformFeature.VectorSearch) &&
-      isVectorSearchEnabled() &&
-      (isServerlessAccount() || this.shouldShowCollectionThroughputInput())
-    );
+    return isVectorSearchEnabled() && (isServerlessAccount() || this.shouldShowCollectionThroughputInput());
   }
 
   private shouldShowFullTextSearchParameters() {
-    return isFeatureSupported(PlatformFeature.FullTextSearch) && !isFabricNative() && this.showFullTextSearch;
+    return !isFabricNative() && this.showFullTextSearch;
   }
 
   private parseUniqueKeys(): DataModels.UniqueKeyPolicy {
@@ -1360,8 +1354,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
     // Throughput
     if (isFabricNative()) {
-      // Fabric Native accounts are always autoscale and have a fixed throughput of 5K
-      autoPilotMaxThroughput = AutoPilotUtils.autoPilotThroughput5K;
+      autoPilotMaxThroughput = DEFAULT_FABRIC_NATIVE_CONTAINER_THROUGHPUT;
       offerThroughput = undefined;
     } else if (databaseLevelThroughput) {
       if (this.state.createNewDatabase) {

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility.tsx

@@ -6,7 +6,6 @@ import { getFullTextLanguageOptions } from "Explorer/Controls/FullTextSeach/Full
 import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import React from "react";
 import { userContext } from "UserContext";
-import { isFeatureSupported, PlatformFeature } from "Utils/PlatformFeatureUtils";
 
 export function getPartitionKeyTooltipText(): string {
   if (userContext.apiType === "Mongo") {
@@ -86,11 +85,7 @@ export function UniqueKeysHeader(): JSX.Element {
 }
 
 export function shouldShowAnalyticalStoreOptions(): boolean {
-  if (
-    !isFeatureSupported(PlatformFeature.AnalyticalStore) ||
-    isFabricNative() ||
-    configContext.platform === Platform.Emulator
-  ) {
+  if (isFabricNative() || configContext.platform === Platform.Emulator) {
     return false;
   }
 

src/Explorer/Panes/PanelContainerComponent.tsx

@@ -8,6 +8,7 @@ export interface PanelContainerProps {
   panelContent?: JSX.Element;
   isConsoleExpanded: boolean;
   isOpen: boolean;
+  hasConsole?: boolean;
   isConsoleAnimationFinished?: boolean;
   panelWidth?: string;
   onRenderNavigationContent?: IRenderFunction<IPanelProps>;
@@ -86,6 +87,9 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
   };
 
   private getPanelHeight = (): string => {
+    if (!this.props.hasConsole) {
+      return window.innerHeight + "px";
+    }
     const notificationConsole = document.getElementById("explorerNotificationConsole");
     if (notificationConsole) {
       return window.innerHeight - notificationConsole.clientHeight + "px";
@@ -102,9 +106,10 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
 export const SidePanel: React.FC = () => {
   const isConsoleExpanded = useNotificationConsole((state) => state.isExpanded);
   const isConsoleAnimationFinished = useNotificationConsole((state) => state.consoleAnimationFinished);
-  const { isOpen, panelContent, panelWidth, headerText } = useSidePanel((state) => {
+  const { isOpen, hasConsole, panelContent, panelWidth, headerText } = useSidePanel((state) => {
     return {
       isOpen: state.isOpen,
+      hasConsole: state.hasConsole,
       panelContent: state.panelContent,
       headerText: state.headerText,
       panelWidth: state.panelWidth,
@@ -114,6 +119,7 @@ export const SidePanel: React.FC = () => {
   // This component only exists so we can use hooks and pass them down to a non-functional component
   return (
     <PanelContainerComponent
+      hasConsole={hasConsole}
       isOpen={isOpen}
       panelContent={panelContent}
       headerText={headerText}

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -199,6 +199,12 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     LocalStorageUtility.getEntryString(StorageKey.CopilotSampleDBEnabled) === "true",
   );
 
+  const [mongoGuidRepresentation, setMongoGuidRepresentation] = useState<Constants.MongoGuidRepresentation>(
+    LocalStorageUtility.hasItem(StorageKey.MongoGuidRepresentation)
+      ? (LocalStorageUtility.getEntryString(StorageKey.MongoGuidRepresentation) as Constants.MongoGuidRepresentation)
+      : Constants.MongoGuidRepresentation.CSharpLegacy,
+  );
+
   const styles = useStyles();
 
   const explorerVersion = configContext.gitSha;
@@ -261,6 +267,8 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     useDatabases.getState().sampleDataResourceTokenCollection &&
     !isEmulator;
 
+  const shouldShowMongoGuidRepresentationOption = userContext.apiType === "Mongo";
+
   const handlerOnSubmit = async () => {
     setIsExecuting(true);
 
@@ -412,6 +420,10 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       );
     }
 
+    if (shouldShowMongoGuidRepresentationOption) {
+      LocalStorageUtility.setEntryString(StorageKey.MongoGuidRepresentation, mongoGuidRepresentation);
+    }
+
     setIsExecuting(false);
     logConsoleInfo(
       `Updated items per page setting to ${LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage)}`,
@@ -433,6 +445,14 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       );
     }
 
+    if (shouldShowMongoGuidRepresentationOption) {
+      logConsoleInfo(
+        `Updated Mongo Guid Representation to ${LocalStorageUtility.getEntryString(
+          StorageKey.MongoGuidRepresentation,
+        )}`,
+      );
+    }
+
     refreshExplorer && (await explorer.refreshExplorer());
     closeSidePanel();
   };
@@ -477,6 +497,13 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     { key: SplitterDirection.Horizontal, text: "Horizontal" },
   ];
 
+  const mongoGuidRepresentationDropdownOptions: IDropdownOption[] = [
+    { key: Constants.MongoGuidRepresentation.CSharpLegacy, text: Constants.MongoGuidRepresentation.CSharpLegacy },
+    { key: Constants.MongoGuidRepresentation.JavaLegacy, text: Constants.MongoGuidRepresentation.JavaLegacy },
+    { key: Constants.MongoGuidRepresentation.PythonLegacy, text: Constants.MongoGuidRepresentation.PythonLegacy },
+    { key: Constants.MongoGuidRepresentation.Standard, text: Constants.MongoGuidRepresentation.Standard },
+  ];
+
   const handleOnPriorityLevelOptionChange = (
     ev: React.FormEvent<HTMLInputElement>,
     option: IChoiceGroupOption,
@@ -559,6 +586,13 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     setRefreshExplorer(false);
   };
 
+  const handleOnMongoGuidRepresentationOptionChange = (
+    ev: React.FormEvent<HTMLInputElement>,
+    option: IDropdownOption,
+  ): void => {
+    setMongoGuidRepresentation(option.key as Constants.MongoGuidRepresentation);
+  };
+
   const choiceButtonStyles = {
     root: {
       clear: "both",
@@ -1065,15 +1099,15 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                   <div className={styles.settingsSectionContainer}>
                     <div className={styles.settingsSectionDescription}>
                       This is a sample database and collection with synthetic product data you can use to explore using
-                      NoSQL queries and Query Advisor. This will appear as another database in the Data Explorer UI, and
-                      is created by, and maintained by Microsoft at no cost to you.
+                      NoSQL queries. This will appear as another database in the Data Explorer UI, and is created by,
+                      and maintained by Microsoft at no cost to you.
                     </div>
                     <Checkbox
                       styles={{
                         label: { padding: 0 },
                       }}
                       className="padding"
-                      ariaLabel="Enable sample db for Query Advisor"
+                      ariaLabel="Enable sample db for query exploration"
                       checked={copilotSampleDBEnabled}
                       onChange={handleSampleDatabaseChange}
                       label="Enable sample database"
@@ -1082,6 +1116,27 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                 </AccordionPanel>
               </AccordionItem>
             )}
+            {shouldShowMongoGuidRepresentationOption && (
+              <AccordionItem value="14">
+                <AccordionHeader>
+                  <div className={styles.header}>Guid Representation</div>
+                </AccordionHeader>
+                <AccordionPanel>
+                  <div className={styles.settingsSectionContainer}>
+                    <div className={styles.settingsSectionDescription}>
+                      GuidRepresentation in MongoDB refers to how Globally Unique Identifiers (GUIDs) are serialized and
+                      deserialized when stored in BSON documents. This will apply to all document operations.
+                    </div>
+                    <Dropdown
+                      aria-labelledby="mongoGuidRepresentation"
+                      selectedKey={mongoGuidRepresentation}
+                      options={mongoGuidRepresentationDropdownOptions}
+                      onChange={handleOnMongoGuidRepresentationOptionChange}
+                    />
+                  </div>
+                </AccordionPanel>
+              </AccordionItem>
+            )}
           </Accordion>
         )}
 

src/Explorer/QueryCopilot/QueryCopilotTab.tsx

@@ -1,11 +1,9 @@
 /* eslint-disable no-console */
 import { Stack } from "@fluentui/react";
-import { QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
 import { CommandButtonComponentProps } from "Explorer/Controls/CommandButton/CommandButtonComponent";
 import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import { SaveQueryPane } from "Explorer/Panes/SaveQueryPane/SaveQueryPane";
-import { QueryCopilotPromptbar } from "Explorer/QueryCopilot/QueryCopilotPromptbar";
 import { readCopilotToggleStatus, saveCopilotToggleStatus } from "Explorer/QueryCopilot/QueryCopilotUtilities";
 import { OnExecuteQueryClick } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { QueryCopilotProps } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
@@ -13,7 +11,6 @@ import { QueryCopilotResults } from "Explorer/QueryCopilot/Shared/QueryCopilotRe
 import { userContext } from "UserContext";
 import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
 import { useSidePanel } from "hooks/useSidePanel";
-import { ReactTabKind, TabsState, useTabs } from "hooks/useTabs";
 import React, { useState } from "react";
 import SplitterLayout from "react-splitter-layout";
 import QueryCommandIcon from "../../../images/CopilotCommand.svg";
@@ -26,7 +23,8 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
   const [copilotActive, setCopilotActive] = useState<boolean>(() =>
     readCopilotToggleStatus(userContext.databaseAccount),
   );
-  const [tabActive, setTabActive] = useState<boolean>(true);
+  //TODO: Uncomment this useState when query copilot is reinstated in DE
+  // const [tabActive, setTabActive] = useState<boolean>(true);
 
   const getCommandbarButtons = (): CommandButtonComponentProps[] => {
     const executeQueryBtnLabel = selectedQuery ? "Execute Selection" : "Execute Query";
@@ -70,17 +68,18 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
     useCommandBar.getState().setContextButtons(getCommandbarButtons());
   }, [query, selectedQuery, copilotActive]);
 
-  React.useEffect(() => {
-    return () => {
-      useTabs.subscribe((state: TabsState) => {
-        if (state.activeReactTab === ReactTabKind.QueryCopilot) {
-          setTabActive(true);
-        } else {
-          setTabActive(false);
-        }
-      });
-    };
-  }, []);
+  //TODO: Uncomment this effect when query copilot is reinstated in DE
+  // React.useEffect(() => {
+  //   return () => {
+  //     useTabs.subscribe((state: TabsState) => {
+  //       if (state.activeReactTab === ReactTabKind.QueryCopilot) {
+  //         setTabActive(true);
+  //       } else {
+  //         setTabActive(false);
+  //       }
+  //     });
+  //   };
+  // }, []);
 
   const toggleCopilot = (toggle: boolean) => {
     setCopilotActive(toggle);
@@ -90,6 +89,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
   return (
     <Stack className="tab-pane" style={{ width: "100%" }}>
       <div style={isGeneratingQuery ? { height: "100%" } : { overflowY: "auto", height: "100%" }}>
+        {/*TODO: Uncomment this section when query copilot is reinstated in DE
         {tabActive && copilotActive && (
           <QueryCopilotPromptbar
             explorer={explorer}
@@ -97,7 +97,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
             databaseId={QueryCopilotSampleDatabaseId}
             containerId={QueryCopilotSampleContainerId}
           ></QueryCopilotPromptbar>
-        )}
+        )} */}
         <Stack className="tabPaneContentContainer">
           <SplitterLayout percentage={true} vertical={true} primaryIndex={0} primaryMinSize={30} secondaryMinSize={70}>
             <EditorReact

src/Explorer/SplashScreen/FabricHome.tsx

@@ -1,14 +1,17 @@
 /**
  * Accordion top class
  */
-import { makeStyles, tokens } from "@fluentui/react-components";
-import { DocumentAddRegular, LinkMultipleRegular } from "@fluentui/react-icons";
-import { SampleDataImportDialog } from "Explorer/SplashScreen/SampleDataImportDialog";
+import { Link, makeStyles, tokens } from "@fluentui/react-components";
+import { DocumentAddRegular, LinkMultipleRegular, OpenRegular } from "@fluentui/react-icons";
+import { SampleDataConfiguration, SampleDataImportDialog } from "Explorer/SplashScreen/SampleDataImportDialog";
+import { SampleDataFile } from "Explorer/SplashScreen/SampleUtil";
 import { CosmosFluentProvider } from "Explorer/Theme/ThemeUtil";
 import { isFabricNative, isFabricNativeReadOnly } from "Platform/Fabric/FabricUtil";
 import * as React from "react";
 import { userContext } from "UserContext";
+import AzureOpenAiIcon from "../../../images/AzureOpenAi.svg";
 import CosmosDbBlackIcon from "../../../images/CosmosDB_black.svg";
+import GithubIcon from "../../../images/github-black-and-white.svg";
 import Explorer from "../Explorer";
 
 export interface SplashScreenProps {
@@ -26,11 +29,11 @@ const useStyles = makeStyles({
     fontWeight: "bold",
   },
   buttonsContainer: {
-    width: "584px",
+    width: "760px",
     margin: "auto",
     display: "grid",
     padding: "16px",
-    gridTemplateColumns: "repeat(3, 1fr)",
+    gridTemplateColumns: "repeat(4, 1fr)",
     gap: "10px",
     gridAutoRows: "minmax(184px, auto)",
   },
@@ -53,6 +56,15 @@ const useStyles = makeStyles({
     },
   },
   three: {
+    gridColumn: "4",
+    gridRow: "1",
+    "& img": {
+      width: "32px",
+      height: "32px",
+      margin: "auto",
+    },
+  },
+  four: {
     gridColumn: "3",
     gridRow: "2",
     "& svg": {
@@ -61,6 +73,15 @@ const useStyles = makeStyles({
       margin: "auto",
     },
   },
+  five: {
+    gridColumn: "4",
+    gridRow: "2",
+    "& img": {
+      width: "32px",
+      height: "32px",
+      margin: "auto",
+    },
+  },
   single: {
     gridColumn: "1 / 4",
     gridRow: "1 / 3",
@@ -119,7 +140,7 @@ const FabricHomeScreenButton: React.FC<FabricHomeScreenButtonProps & { className
 }) => {
   const styles = useStyles();
   return (
-    <div role="button" className={`${styles.buttonContainer} ${className}`} onClick={onClick}>
+    <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>{title}</div>
@@ -132,6 +153,8 @@ const FabricHomeScreenButton: React.FC<FabricHomeScreenButtonProps & { className
 export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScreenProps) => {
   const styles = useStyles();
   const [openSampleDataImportDialog, setOpenSampleDataImportDialog] = React.useState(false);
+  const [selectedSampleDataConfiguration, setSelectedSampleDataConfiguration] =
+    React.useState<SampleDataConfiguration>(undefined);
 
   const getSplashScreenButtons = (): JSX.Element => {
     const buttons: FabricHomeScreenButtonProps[] = [
@@ -145,10 +168,30 @@ export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScree
         },
       },
       {
-        title: "Sample data",
-        description: "Automatically load sample data in your database",
-        icon: <img src={CosmosDbBlackIcon} />,
-        onClick: () => setOpenSampleDataImportDialog(true),
+        title: "Sample Data",
+        description: "Load sample data in your database",
+        icon: <img src={CosmosDbBlackIcon} alt={"Azure Cosmos DB icon"} aria-hidden="true" />,
+        onClick: () => {
+          setSelectedSampleDataConfiguration({
+            databaseName: userContext.fabricContext?.databaseName,
+            newContainerName: "SampleData",
+            sampleDataFile: SampleDataFile.FABRIC_SAMPLE_DATA,
+          });
+          setOpenSampleDataImportDialog(true);
+        },
+      },
+      {
+        title: "Sample Vector Data",
+        description: "Load sample vector data in your database",
+        icon: <img src={AzureOpenAiIcon} alt={"Azure Open AI icon"} aria-hidden="true" />,
+        onClick: () => {
+          setSelectedSampleDataConfiguration({
+            databaseName: userContext.fabricContext?.databaseName,
+            newContainerName: "SampleVectorData",
+            sampleDataFile: SampleDataFile.FABRIC_SAMPLE_VECTOR_DATA,
+          });
+          setOpenSampleDataImportDialog(true);
+        },
       },
       {
         title: "App development",
@@ -156,17 +199,25 @@ export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScree
         icon: <LinkMultipleRegular />,
         onClick: () => window.open("https://aka.ms/cosmosdbfabricsdk", "_blank"),
       },
+      {
+        title: "Sample Gallery",
+        description: "Get real-world end-to-end samples",
+        icon: <img src={GithubIcon} alt={"GitHub icon"} aria-hidden="true" />,
+        onClick: () => window.open("https://azurecosmosdb.github.io/gallery/?tags=example&tags=analytics", "_blank"),
+      },
     ];
 
     return isFabricNativeReadOnly() ? (
       <div className={styles.buttonsContainer}>
-        <FabricHomeScreenButton className={styles.single} {...buttons[2]} />
+        <FabricHomeScreenButton className={styles.single} {...buttons[3]} />
       </div>
     ) : (
       <div className={styles.buttonsContainer}>
         <FabricHomeScreenButton className={styles.one} {...buttons[0]} />
         <FabricHomeScreenButton className={styles.two} {...buttons[1]} />
         <FabricHomeScreenButton className={styles.three} {...buttons[2]} />
+        <FabricHomeScreenButton className={styles.four} {...buttons[3]} />
+        <FabricHomeScreenButton className={styles.five} {...buttons[4]} />
       </div>
     );
   };
@@ -179,18 +230,20 @@ export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScree
           open={openSampleDataImportDialog}
           setOpen={setOpenSampleDataImportDialog}
           explorer={props.explorer}
-          databaseName={userContext.fabricContext?.databaseName}
+          sampleDataConfiguration={selectedSampleDataConfiguration}
         />
-        <div className={styles.title} role="heading" aria-label={title}>
+        <div className={styles.title} role="heading" aria-label={title} aria-level={1}>
           {title}
         </div>
         {getSplashScreenButtons()}
-        {/* <div className={styles.footer}>
-          Need help?{" "}
-          <Link href="https://aka.ms/cosmosdbfabricdocs" target="_blank">
-            Learn more <img src={LinkIcon} alt="Learn more" />
-          </Link>
-        </div> */}
+        {
+          <div className={styles.footer}>
+            Need help?{" "}
+            <Link href="https://learn.microsoft.com/fabric/database/cosmos-db/overview" target="_blank">
+              Learn more <OpenRegular />
+            </Link>
+          </div>
+        }
       </CosmosFluentProvider>
     </>
   );

src/Explorer/SplashScreen/SampleDataImportDialog.tsx

@@ -11,12 +11,10 @@ import {
   tokens,
 } from "@fluentui/react-components";
 import Explorer from "Explorer/Explorer";
-import { checkContainerExists, createContainer, importData } from "Explorer/SplashScreen/SampleUtil";
+import { checkContainerExists, createContainer, importData, SampleDataFile } from "Explorer/SplashScreen/SampleUtil";
 import React, { useEffect, useState } from "react";
 import * as ViewModels from "../../Contracts/ViewModels";
 
-const SAMPLE_DATA_CONTAINER_NAME = "SampleData";
-
 const useStyles = makeStyles({
   dialogContent: {
     alignItems: "center",
@@ -24,6 +22,12 @@ const useStyles = makeStyles({
   },
 });
 
+export interface SampleDataConfiguration {
+  databaseName: string;
+  newContainerName: string;
+  sampleDataFile: SampleDataFile;
+}
+
 /**
  * This dialog:
  * - creates a container
@@ -35,11 +39,11 @@ export const SampleDataImportDialog: React.FC<{
   open: boolean;
   setOpen: (open: boolean) => void;
   explorer: Explorer;
-  databaseName: string;
+  sampleDataConfiguration: SampleDataConfiguration | undefined;
 }> = (props) => {
   const [status, setStatus] = useState<"idle" | "creating" | "importing" | "completed" | "error">("idle");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const containerName = SAMPLE_DATA_CONTAINER_NAME;
+  const containerName = props.sampleDataConfiguration?.newContainerName;
   const [collection, setCollection] = useState<ViewModels.Collection>(undefined);
   const styles = useStyles();
 
@@ -53,7 +57,7 @@ export const SampleDataImportDialog: React.FC<{
 
   const handleStartImport = async (): Promise<void> => {
     setStatus("creating");
-    const databaseName = props.databaseName;
+    const databaseName = props.sampleDataConfiguration.databaseName;
     if (checkContainerExists(databaseName, containerName)) {
       const msg = `The container "${containerName}" in database "${databaseName}" already exists. Please delete it and retry.`;
       setStatus("error");
@@ -63,7 +67,12 @@ export const SampleDataImportDialog: React.FC<{
 
     let collection;
     try {
-      collection = await createContainer(databaseName, containerName, props.explorer);
+      collection = await createContainer(
+        databaseName,
+        containerName,
+        props.explorer,
+        props.sampleDataConfiguration.sampleDataFile,
+      );
     } catch (error) {
       setStatus("error");
       setErrorMessage(`Failed to create container: ${error instanceof Error ? error.message : String(error)}`);
@@ -72,7 +81,7 @@ export const SampleDataImportDialog: React.FC<{
 
     try {
       setStatus("importing");
-      await importData(collection);
+      await importData(props.sampleDataConfiguration.sampleDataFile, collection);
       setCollection(collection);
       setStatus("completed");
     } catch (error) {

src/Explorer/SplashScreen/SampleUtil.ts

@@ -1,9 +1,13 @@
+import { JSONObject } from "@azure/cosmos";
 import { BackendDefaults } from "Common/Constants";
 import { createCollection } from "Common/dataAccess/createCollection";
 import Explorer from "Explorer/Explorer";
 import { useDatabases } from "Explorer/useDatabases";
+import { DEFAULT_FABRIC_NATIVE_CONTAINER_THROUGHPUT, isFabricNative } from "Platform/Fabric/FabricUtil";
+import { Action, ActionModifiers } from "Shared/Telemetry/TelemetryConstants";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 
 /**
  * Public for unit tests
@@ -26,12 +30,20 @@ const hasContainer = (
 export const checkContainerExists = (databaseName: string, containerName: string) =>
   hasContainer(databaseName, containerName, useDatabases.getState().databases);
 
+export enum SampleDataFile {
+  COPILOT = "Copilot",
+  FABRIC_SAMPLE_DATA = "FabricSampleData",
+  FABRIC_SAMPLE_VECTOR_DATA = "FabricSampleVectorData",
+}
+
 export const createContainer = async (
   databaseName: string,
   containerName: string,
   explorer: Explorer,
+  sampleDataFile: SampleDataFile,
 ): Promise<ViewModels.Collection> => {
   const createRequest: DataModels.CreateCollectionParams = {
+    autoPilotMaxThroughput: isFabricNative() ? DEFAULT_FABRIC_NATIVE_CONTAINER_THROUGHPUT : undefined,
     createNewDatabase: false,
     collectionId: containerName,
     databaseId: databaseName,
@@ -41,6 +53,44 @@ export const createContainer = async (
       kind: "Hash",
       version: BackendDefaults.partitionKeyVersion,
     },
+    vectorEmbeddingPolicy:
+      sampleDataFile === SampleDataFile.FABRIC_SAMPLE_VECTOR_DATA
+        ? {
+            vectorEmbeddings: [
+              {
+                path: "/descriptionVector",
+                dataType: "float32",
+                distanceFunction: "cosine",
+                dimensions: 512,
+              },
+            ],
+          }
+        : undefined,
+    indexingPolicy:
+      sampleDataFile === SampleDataFile.FABRIC_SAMPLE_VECTOR_DATA
+        ? {
+            automatic: true,
+            indexingMode: "consistent",
+            includedPaths: [
+              {
+                path: "/*",
+              },
+            ],
+            excludedPaths: [
+              {
+                path: '/"_etag"/?',
+              },
+            ],
+            fullTextIndexes: [],
+            vectorIndexes: [
+              {
+                path: "/descriptionVector",
+                type: "quantizedFlat",
+                quantizationByteSize: 64,
+              },
+            ],
+          }
+        : undefined,
   };
   await createCollection(createRequest);
   await explorer.refreshAllDatabases();
@@ -55,10 +105,39 @@ export const createContainer = async (
 
 const SAMPLE_DATA_PARTITION_KEY = "category"; // This pkey is specifically set for queryCopilotSampleData.json below
 
-export const importData = async (collection: ViewModels.Collection): Promise<void> => {
-  // TODO: keep same chunk as ContainerSampleGenerator
-  const dataFileContent = await import(
-    /* webpackChunkName: "queryCopilotSampleData" */ "../../../sampleData/queryCopilotSampleData.json"
-  );
-  await collection.bulkInsertDocuments(dataFileContent.data);
+export const importData = async (sampleDataFile: SampleDataFile, collection: ViewModels.Collection): Promise<void> => {
+  let documents: JSONObject[] = undefined;
+  switch (sampleDataFile) {
+    case SampleDataFile.COPILOT:
+      documents = (
+        await import(/* webpackChunkName: "queryCopilotSampleData" */ "../../../sampleData/queryCopilotSampleData.json")
+      ).data;
+      break;
+    case SampleDataFile.FABRIC_SAMPLE_DATA:
+      documents = (await import(/* webpackChunkName: "fabricSampleData" */ "../../../sampleData/fabricSampleData.json"))
+        .default;
+      break;
+    case SampleDataFile.FABRIC_SAMPLE_VECTOR_DATA:
+      documents = (
+        await import(
+          /* webpackChunkName: "fabricSampleDataVectors" */ "../../../sampleData/fabricSampleDataVectors.json"
+        )
+      ).default;
+      break;
+    default:
+      throw new Error(`Unknown sample data file: ${sampleDataFile}`);
+  }
+  if (!documents) {
+    throw new Error(`Failed to load sample data file: ${sampleDataFile}`);
+  }
+
+  // Time it
+  const start = performance.now();
+  await collection.bulkInsertDocuments(documents);
+  const end = performance.now();
+  TelemetryProcessor.trace(Action.ImportSampleData, ActionModifiers.Success, {
+    documentsCount: documents.length,
+    durationMs: end - start,
+    sampleDataFile,
+  });
 };

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -24,6 +24,7 @@ import { ReactTabKind, useTabs } from "hooks/useTabs";
 import * as React from "react";
 import ConnectIcon from "../../../images/Connect_color.svg";
 import ContainersIcon from "../../../images/Containers.svg";
+import CosmosDBIcon from "../../../images/CosmosDB-logo.svg";
 import LinkIcon from "../../../images/Link_blue.svg";
 import PowerShellIcon from "../../../images/PowerShell.svg";
 import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
@@ -120,11 +121,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
   };
 
   private getSplashScreenButtons = (): JSX.Element => {
-    if (
-      userContext.apiType === "SQL" &&
-      useQueryCopilot.getState().copilotEnabled &&
-      useDatabases.getState().sampleDataResourceTokenCollection
-    ) {
+    if (userContext.apiType === "SQL") {
       return (
         <Stack
           className="splashStackContainer"
@@ -152,25 +149,18 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
             />
           </Stack>
           <Stack className="splashStackRow" horizontal>
-            {useQueryCopilot.getState().copilotEnabled && (
-              <SplashScreenButton
-                imgSrc={CopilotIcon}
-                title={"Query faster with Query Advisor"}
-                description={
-                  "Query Advisor is your AI buddy that helps you write Azure Cosmos DB queries like a pro. Try it using our sample data set now!"
-                }
-                onClick={() => {
-                  const copilotVersion = userContext.features.copilotVersion;
-                  if (copilotVersion === "v1.0") {
-                    useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot);
-                  } else if (copilotVersion === "v2.0") {
-                    const sampleCollection = useDatabases.getState().sampleDataResourceTokenCollection;
-                    sampleCollection.onNewQueryClick(sampleCollection, undefined);
-                  }
-                  traceOpen(Action.OpenQueryCopilotFromSplashScreen, { apiType: userContext.apiType });
-                }}
-              />
-            )}
+            <SplashScreenButton
+              imgSrc={CosmosDBIcon}
+              imgSize={35}
+              title={"Azure Cosmos DB Samples Gallery"}
+              description={
+                "Discover samples that showcase scalable, intelligent app patterns. Try one now to see how fast you can go from concept to code with Cosmos DB"
+              }
+              onClick={() => {
+                window.open("https://azurecosmosdb.github.io/gallery/?tags=example", "_blank");
+                traceOpen(Action.LearningResourcesClicked, { apiType: userContext.apiType });
+              }}
+            />
             <SplashScreenButton
               imgSrc={ConnectIcon}
               title={"Connect"}
@@ -212,6 +202,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               sample data, query.
             </TeachingBubble>
           )}
+        {/*TODO: convert below to use SplashScreenButton */}
         {mainItems.map((item) => (
           <Stack
             id={`mainButton-${item.id}`}
@@ -477,6 +468,34 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     };
   }
 
+  //TODO: Re-enable lint rule when query copilot is reinstated in DE
+  /* eslint-disable-next-line no-unused-vars */
+  private getQueryCopilotCard = (): JSX.Element => {
+    return (
+      <>
+        {useQueryCopilot.getState().copilotEnabled && (
+          <SplashScreenButton
+            imgSrc={CopilotIcon}
+            title={"Query faster with Query Advisor"}
+            description={
+              "Query Advisor is your AI buddy that helps you write Azure Cosmos DB queries like a pro. Try it using our sample data set now!"
+            }
+            onClick={() => {
+              const copilotVersion = userContext.features.copilotVersion;
+              if (copilotVersion === "v1.0") {
+                useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot);
+              } else if (copilotVersion === "v2.0") {
+                const sampleCollection = useDatabases.getState().sampleDataResourceTokenCollection;
+                sampleCollection.onNewQueryClick(sampleCollection, undefined);
+              }
+              traceOpen(Action.OpenQueryCopilotFromSplashScreen, { apiType: userContext.apiType });
+            }}
+          />
+        )}
+      </>
+    );
+  };
+
   private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
     return {
       iconSrc: CollectionIcon,

src/Explorer/SplashScreen/SplashScreenButton.tsx

@@ -7,6 +7,7 @@ interface SplashScreenButtonProps {
   title: string;
   description: string;
   onClick: () => void;
+  imgSize?: number;
 }
 
 export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
@@ -14,6 +15,7 @@ export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
   title,
   description,
   onClick,
+  imgSize,
 }: SplashScreenButtonProps): JSX.Element => {
   return (
     <Stack
@@ -39,7 +41,7 @@ export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
       role="button"
     >
       <div>
-        <img src={imgSrc} alt={title} aria-hidden="true" />
+        <img src={imgSrc} alt={title} aria-hidden="true" {...(imgSize ? { height: imgSize, width: imgSize } : {})} />
       </div>
       <Stack style={{ marginLeft: 16 }}>
         <Text style={{ fontSize: 18, fontWeight: 600 }}>{title}</Text>

src/Explorer/Tables/TableDataClient.ts

@@ -13,7 +13,7 @@ import { updateDocument } from "../../Common/dataAccess/updateDocument";
 import { configContext } from "../../ConfigContext";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { userContext } from "../../UserContext";
-import { getAuthorizationHeader } from "../../Utils/AuthorizationUtils";
+import { getAuthorizationHeader, isDataplaneRbacEnabledForProxyApi } from "../../Utils/AuthorizationUtils";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
@@ -551,6 +551,10 @@ export class CassandraAPIDataClient extends TableDataClient {
     const authorizationHeaderMetadata: ViewModels.AuthorizationTokenHeaderMetadata = getAuthorizationHeader();
     xhr.setRequestHeader(authorizationHeaderMetadata.header, authorizationHeaderMetadata.token);
 
+    if (isDataplaneRbacEnabledForProxyApi(userContext)) {
+      xhr.setRequestHeader(Constants.HttpHeaders.entraIdToken, userContext.aadToken);
+    }
+
     return true;
   };
 

src/Explorer/Tabs/CloudShellTab/CloudShellTerminalCore.tsx

@@ -22,6 +22,7 @@ import { formatErrorMessage, formatInfoMessage, formatWarningMessage } from "./U
 
 // Constants
 const DEFAULT_CLOUDSHELL_REGION = "westus";
+const DEFAULT_FAIRFAX_CLOUDSHELL_REGION = "usgovvirginia";
 const POLLING_INTERVAL_MS = 2000;
 const MAX_RETRY_COUNT = 10;
 const MAX_PING_COUNT = 120 * 60; // 120 minutes (60 seconds/minute)
@@ -153,7 +154,9 @@ export const ensureCloudShellProviderRegistered = async (): Promise<void> => {
  * Determines the appropriate CloudShell region
  */
 export const determineCloudShellRegion = (): string => {
-  return getNormalizedRegion(userContext.databaseAccount?.location, DEFAULT_CLOUDSHELL_REGION);
+  const defaultRegion =
+    userContext.portalEnv === "fairfax" ? DEFAULT_FAIRFAX_CLOUDSHELL_REGION : DEFAULT_CLOUDSHELL_REGION;
+  return getNormalizedRegion(userContext.databaseAccount?.location, defaultRegion);
 };
 
 /**

src/Explorer/Tabs/CloudShellTab/ShellTypes/AbstractShellHandler.tsx

@@ -14,12 +14,17 @@ export const DISABLE_HISTORY = `set +o history`;
  * Used when shell initialization or connection fails.
  */
 export const EXIT_COMMAND = ` printf "\\033[1;31mSession ended. Please close this tab and initiate a new shell session if needed.\\033[0m\\n" && disown -a && exit`;
+/**
+ * Command that displays error message with MongoDB networking guidance and exits the shell session.
+ * Used when MongoDB shell connection fails due to networking issues.
+ */
+export const EXIT_COMMAND_MONGO = ` printf "\\033[1;31mSession ended. Please close this tab and initiate a new shell session if needed.\\033[0m\\n" && printf "\\033[1;36mPlease use the 'Add Azure Cloud Shell IPs' button in the Networking blade to allow Cloud Shell access, if not already configured.\\033[0m\\n" && disown -a && exit`;
 
 /**
  * This command runs mongosh in no-database and quiet mode,
  * and evaluates the `disableTelemetry()` function to turn off telemetry collection.
  */
-export const DISABLE_TELEMETRY_COMMAND = `mongosh --nodb --quiet --eval "disableTelemetry()"`;
+export const DISABLE_TELEMETRY_COMMAND = `mongosh --nodb --quiet --eval 'disableTelemetry()'`;
 
 /**
  * Abstract class that defines the interface for shell-specific handlers
@@ -40,6 +45,14 @@ export abstract class AbstractShellHandler {
   abstract getTerminalSuppressedData(): string[];
   updateTerminalData?(data: string): string;
 
+  /**
+   * Gets the exit command to use when connection fails.
+   * Can be overridden by subclasses to provide custom exit commands.
+   */
+  protected getExitCommand(): string {
+    return EXIT_COMMAND;
+  }
+
   /**
    * Constructs the complete initialization command sequence for the shell.
    *
@@ -64,7 +77,7 @@ export abstract class AbstractShellHandler {
       START_MARKER,
       DISABLE_HISTORY,
       ...setupCommands,
-      `{ ${connectionCommand}; } || true;${EXIT_COMMAND}`,
+      `{ ${connectionCommand}; } || true;${this.getExitCommand()}`,
     ];
 
     return allCommands.join("\n").concat("\n");
@@ -84,7 +97,7 @@ export abstract class AbstractShellHandler {
    * is not already present in the environment.
    */
   protected mongoShellSetupCommands(): string[] {
-    const PACKAGE_VERSION: string = "2.5.5";
+    const PACKAGE_VERSION: string = "2.5.6";
     return [
       "if ! command -v mongosh &> /dev/null; then echo '⚠️ mongosh not found. Installing...'; fi",
       `if ! command -v mongosh &> /dev/null; then curl -LO https://downloads.mongodb.com/compass/mongosh-${PACKAGE_VERSION}-linux-x64.tgz; fi`,

src/Explorer/Tabs/CloudShellTab/ShellTypes/MongoShellHandler.test.tsx

@@ -18,6 +18,12 @@ interface DatabaseAccount {
 
 interface UserContextType {
   databaseAccount: DatabaseAccount;
+  features: {
+    enableAadDataPlane: boolean;
+  };
+  apiType: string;
+  dataPlaneRbacEnabled: boolean;
+  aadToken?: string;
 }
 
 // Mock dependencies
@@ -29,10 +35,13 @@ jest.mock("../../../../UserContext", () => ({
         mongoEndpoint: "https://test-mongo.documents.azure.com:443/",
       },
     },
+    features: { enableAadDataPlane: false },
+    apiType: "Mongo",
   },
 }));
 
 jest.mock("../Utils/CommonUtils", () => ({
+  ...jest.requireActual("../Utils/CommonUtils"),
   getHostFromUrl: jest.fn().mockReturnValue("test-mongo.documents.azure.com"),
 }));
 
@@ -69,7 +78,7 @@ describe("MongoShellHandler", () => {
 
       expect(Array.isArray(commands)).toBe(true);
       expect(commands.length).toBe(7);
-      expect(commands[1]).toContain("mongosh-2.5.5-linux-x64.tgz");
+      expect(commands[1]).toContain("mongosh-2.5.6-linux-x64.tgz");
     });
   });
 
@@ -87,11 +96,12 @@ describe("MongoShellHandler", () => {
         kind: "test-kind",
         properties: { mongoEndpoint: "https://test-mongo.documents.azure.com:443/" },
       };
+      (userContext as UserContextType).dataPlaneRbacEnabled = false;
 
       const command = mongoShellHandler.getConnectionCommand();
 
       expect(command).toBe(
-        'mongosh --nodb --quiet --eval "disableTelemetry()" && mongosh mongodb://test-mongo.documents.azure.com:10255?appName=CosmosExplorerTerminal --username test-account --password test-key --tls --tlsAllowInvalidCertificates',
+        "mongosh --nodb --quiet --eval 'disableTelemetry()'; mongosh mongodb://test-mongo.documents.azure.com:10255?appName=CosmosExplorerTerminal --username test-account --password test-key --tls --tlsAllowInvalidCertificates",
       );
       expect(CommonUtils.getHostFromUrl).toHaveBeenCalledWith("https://test-mongo.documents.azure.com:443/");
 
@@ -114,17 +124,55 @@ describe("MongoShellHandler", () => {
       };
 
       const command = mongoShellHandler.getConnectionCommand();
-
       expect(command).toBe("echo 'Database name not found.'");
 
       // Restore original
       (userContext as UserContextType).databaseAccount = originalDatabaseAccount;
     });
+
+    it("should return echo if endpoint is missing", () => {
+      const testKey = "test-key";
+      (userContext as UserContextType).databaseAccount = {
+        id: "test-id",
+        name: "", // Empty name to simulate missing name
+        location: "test-location",
+        type: "test-type",
+        kind: "test-kind",
+        properties: { mongoEndpoint: "" },
+      };
+      const mongoShellHandler = new MongoShellHandler(testKey);
+      const command = mongoShellHandler.getConnectionCommand();
+      expect(command).toBe("echo 'MongoDB endpoint not found.'");
+    });
+
+    it("should use _getAadConnectionCommand when _isEntraIdEnabled is true", () => {
+      const testKey = "aad-key";
+      (userContext as UserContextType).databaseAccount = {
+        id: "test-id",
+        name: "test-account",
+        location: "test-location",
+        type: "test-type",
+        kind: "test-kind",
+        properties: { mongoEndpoint: "https://test-mongo.documents.azure.com:443/" },
+      };
+      (userContext as UserContextType).dataPlaneRbacEnabled = true;
+
+      const mongoShellHandler = new MongoShellHandler(testKey);
+
+      const command = mongoShellHandler.getConnectionCommand();
+      expect(command).toContain(
+        "mongosh 'mongodb://test-account:aad-key@test-account.mongo.cosmos.azure.com:10255/?ssl=true&replicaSet=globaldb&authMechanism=PLAIN&retryWrites=false' --tls --tlsAllowInvalidCertificates",
+      );
+      expect(command.startsWith("mongosh --nodb")).toBeTruthy();
+    });
   });
 
   describe("getTerminalSuppressedData", () => {
     it("should return the correct warning message", () => {
-      expect(mongoShellHandler.getTerminalSuppressedData()).toEqual(["Warning: Non-Genuine MongoDB Detected"]);
+      expect(mongoShellHandler.getTerminalSuppressedData()).toEqual([
+        "Warning: Non-Genuine MongoDB Detected",
+        "Telemetry is now disabled.",
+      ]);
     });
   });
 });

src/Explorer/Tabs/CloudShellTab/ShellTypes/MongoShellHandler.tsx

@@ -1,16 +1,29 @@
 import { userContext } from "../../../../UserContext";
-import { getHostFromUrl } from "../Utils/CommonUtils";
-import { AbstractShellHandler, DISABLE_TELEMETRY_COMMAND } from "./AbstractShellHandler";
+import { isDataplaneRbacEnabledForProxyApi } from "../../../../Utils/AuthorizationUtils";
+import { filterAndCleanTerminalOutput, getHostFromUrl, getMongoShellRemoveInfoText } from "../Utils/CommonUtils";
+import { AbstractShellHandler, DISABLE_TELEMETRY_COMMAND, EXIT_COMMAND_MONGO } from "./AbstractShellHandler";
 
 export class MongoShellHandler extends AbstractShellHandler {
   private _key: string;
   private _endpoint: string | undefined;
+  private _removeInfoText: string[] = getMongoShellRemoveInfoText();
+  private _isEntraIdEnabled: boolean = isDataplaneRbacEnabledForProxyApi(userContext);
   constructor(private key: string) {
     super();
     this._key = key;
     this._endpoint = userContext?.databaseAccount?.properties?.mongoEndpoint;
   }
 
+  private _getKeyConnectionCommand(dbName: string): string {
+    return `mongosh mongodb://${getHostFromUrl(this._endpoint)}:10255?appName=${
+      this.APP_NAME
+    } --username ${dbName} --password ${this._key} --tls --tlsAllowInvalidCertificates`;
+  }
+
+  private _getAadConnectionCommand(dbName: string): string {
+    return `mongosh 'mongodb://${dbName}:${this._key}@${dbName}.mongo.cosmos.azure.com:10255/?ssl=true&replicaSet=globaldb&authMechanism=PLAIN&retryWrites=false' --tls --tlsAllowInvalidCertificates`;
+  }
+
   public getShellName(): string {
     return "MongoDB";
   }
@@ -28,22 +41,22 @@ export class MongoShellHandler extends AbstractShellHandler {
     if (!dbName) {
       return "echo 'Database name not found.'";
     }
-    return (
-      DISABLE_TELEMETRY_COMMAND +
-      " && " +
-      "mongosh mongodb://" +
-      getHostFromUrl(this._endpoint) +
-      ":10255?appName=" +
-      this.APP_NAME +
-      " --username " +
-      dbName +
-      " --password " +
-      this._key +
-      " --tls --tlsAllowInvalidCertificates"
-    );
+    const connectionCommand = this._isEntraIdEnabled
+      ? this._getAadConnectionCommand(dbName)
+      : this._getKeyConnectionCommand(dbName);
+    const fullCommand = `${DISABLE_TELEMETRY_COMMAND}; ${connectionCommand}`;
+    return fullCommand;
   }
 
   public getTerminalSuppressedData(): string[] {
-    return ["Warning: Non-Genuine MongoDB Detected"];
+    return ["Warning: Non-Genuine MongoDB Detected", "Telemetry is now disabled."];
+  }
+
+  protected getExitCommand(): string {
+    return EXIT_COMMAND_MONGO;
+  }
+
+  updateTerminalData(data: string): string {
+    return filterAndCleanTerminalOutput(data, this._removeInfoText);
   }
 }

src/Explorer/Tabs/CloudShellTab/ShellTypes/ShellTypeFactory.test.tsx

@@ -7,12 +7,24 @@ import { PostgresShellHandler } from "./PostgresShellHandler";
 import { getHandler, getKey } from "./ShellTypeFactory";
 import { VCoreMongoShellHandler } from "./VCoreMongoShellHandler";
 
+interface UserContextType {
+  databaseAccount: { name: string };
+  subscriptionId: string;
+  resourceGroup: string;
+  features: { enableAadDataPlane: boolean };
+  dataPlaneRbacEnabled: boolean;
+  aadToken?: string;
+  apiType?: string;
+}
+
 // Mock dependencies
 jest.mock("../../../../UserContext", () => ({
   userContext: {
     databaseAccount: { name: "testDbName" },
     subscriptionId: "testSubId",
     resourceGroup: "testResourceGroup",
+    features: { enableAadDataPlane: false },
+    dataPlaneRbacEnabled: false,
   },
 }));
 
@@ -109,5 +121,33 @@ describe("ShellTypeHandlerFactory", () => {
       expect(key).toBe(mockKey);
       expect(listKeys).toHaveBeenCalledWith("testSubId", "testResourceGroup", "testDbName");
     });
+
+    it("should return MongoShellHandler with primaryMasterKey for TerminalKind.Mongo when RBAC is disabled", async () => {
+      (listKeys as jest.Mock).mockResolvedValue({ primaryMasterKey: "primaryKey123" });
+      (userContext as UserContextType).features.enableAadDataPlane = false;
+      (userContext as UserContextType).dataPlaneRbacEnabled = false;
+      const handler = await getHandler(TerminalKind.Mongo);
+      expect(handler).toBeInstanceOf(MongoShellHandler);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      expect(handler.key).toBe("primaryKey123");
+    });
+
+    it("should return MongoShellHandler with aadToken for TerminalKind.Mongo when RBAC is enabled", async () => {
+      (userContext as UserContextType).aadToken = "aadToken123";
+      (userContext as UserContextType).features.enableAadDataPlane = true;
+      (userContext as UserContextType).dataPlaneRbacEnabled = true;
+      (userContext as UserContextType).apiType = "Mongo";
+      const handler = await getHandler(TerminalKind.Mongo);
+      expect(handler).toBeInstanceOf(MongoShellHandler);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      expect(handler.key).toBe("aadToken123");
+    });
+    it("should throw error for unsupported shell type", async () => {
+      await expect(getHandler("UnknownShell" as unknown as TerminalKind)).rejects.toThrow(
+        "Unsupported shell type: UnknownShell",
+      );
+    });
   });
 });

src/Explorer/Tabs/CloudShellTab/ShellTypes/ShellTypeFactory.tsx

@@ -1,6 +1,7 @@
 import { TerminalKind } from "../../../../Contracts/ViewModels";
 import { userContext } from "../../../../UserContext";
 import { listKeys } from "../../../../Utils/arm/generatedClients/cosmos/databaseAccounts";
+import { isDataplaneRbacEnabledForProxyApi } from "../../../../Utils/AuthorizationUtils";
 import { AbstractShellHandler } from "./AbstractShellHandler";
 import { CassandraShellHandler } from "./CassandraShellHandler";
 import { MongoShellHandler } from "./MongoShellHandler";
@@ -30,6 +31,9 @@ export async function getKey(): Promise<string> {
   if (!dbName) {
     return "";
   }
+  if (isDataplaneRbacEnabledForProxyApi(userContext)) {
+    return userContext.aadToken || "";
+  }
 
   const keys = await listKeys(userContext.subscriptionId, userContext.resourceGroup, dbName);
   return keys?.primaryMasterKey || "";

src/Explorer/Tabs/CloudShellTab/ShellTypes/VCoreMongoShellHandler.test.tsx

@@ -45,7 +45,7 @@ describe("VCoreMongoShellHandler", () => {
 
       expect(Array.isArray(commands)).toBe(true);
       expect(commands.length).toBe(7);
-      expect(commands[1]).toContain("mongosh-2.5.5-linux-x64.tgz");
+      expect(commands[1]).toContain("mongosh-2.5.6-linux-x64.tgz");
       expect(commands[0]).toContain("mongosh not found");
     });
 

src/Explorer/Tabs/CloudShellTab/ShellTypes/VCoreMongoShellHandler.tsx

@@ -1,13 +1,10 @@
 import { userContext } from "../../../../UserContext";
-import { AbstractShellHandler, DISABLE_TELEMETRY_COMMAND } from "./AbstractShellHandler";
+import { filterAndCleanTerminalOutput, getMongoShellRemoveInfoText } from "../Utils/CommonUtils";
+import { AbstractShellHandler, DISABLE_TELEMETRY_COMMAND, EXIT_COMMAND_MONGO } from "./AbstractShellHandler";
 
 export class VCoreMongoShellHandler extends AbstractShellHandler {
   private _endpoint: string | undefined;
-  private _textFilterRules: string[] = [
-    "For mongosh info see: https://www.mongodb.com/docs/mongodb-shell/",
-    "disableTelemetry() command",
-    "https://www.mongodb.com/legal/privacy-policy",
-  ];
+  private _removeInfoText: string[] = getMongoShellRemoveInfoText();
 
   constructor() {
     super();
@@ -38,12 +35,14 @@ export class VCoreMongoShellHandler extends AbstractShellHandler {
     return ["Warning: Non-Genuine MongoDB Detected", "Telemetry is now disabled."];
   }
 
-  updateTerminalData(content: string): string {
-    const updatedContent = content
-      .split("\n")
-      .filter((line) => !this._textFilterRules.some((part) => line.includes(part)))
-      .filter((line, idx, arr) => (arr.length > 3 && idx <= arr.length - 3 ? !["", "\r"].includes(line) : true)) // Filter out empty lines and carriage returns, but keep the last 3 lines if they exist
-      .join("\n");
-    return updatedContent;
+  /**
+   * Override getExitCommand to include MongoDB networking guidance
+   */
+  protected getExitCommand(): string {
+    return EXIT_COMMAND_MONGO;
+  }
+
+  updateTerminalData(data: string): string {
+    return filterAndCleanTerminalOutput(data, this._removeInfoText);
   }
 }

src/Explorer/Tabs/CloudShellTab/Utils/AttachAddOn.tsx

@@ -92,6 +92,18 @@ export class AttachAddon implements ITerminalAddon {
    * @param {Terminal} terminal - The XTerm terminal instance
    */
   public addMessageListener(terminal: Terminal): void {
+    let messageBuffer = "";
+    let bufferTimeout: NodeJS.Timeout | null = null;
+    const BUFFER_TIMEOUT = 50; // ms - short timeout for prompt detection
+
+    const processBuffer = () => {
+      if (messageBuffer.length > 0) {
+        this.handleCompleteTerminalData(terminal, messageBuffer);
+        messageBuffer = "";
+      }
+      bufferTimeout = null;
+    };
+
     this._disposables.push(
       addSocketListener(this._socket, "message", (ev) => {
         let data: ArrayBuffer | string = ev.data;
@@ -103,53 +115,136 @@ export class AttachAddon implements ITerminalAddon {
           data = enc.decode(ev.data as ArrayBuffer);
         }
 
-        // for example of json object look in TerminalHelper in the socket.onMessage
-        if (data.includes(startStatusJson) && data.includes(endStatusJson)) {
-          // process as one line
-          const statusData = data.split(startStatusJson)[1].split(endStatusJson)[0];
-          data = data.replace(statusData, "");
-          data = data.replace(startStatusJson, "");
-          data = data.replace(endStatusJson, "");
-        } else if (data.includes(startStatusJson)) {
-          // check for start
-          const partialStatusData = data.split(startStatusJson)[1];
-          this._socketData += partialStatusData;
-          data = data.replace(partialStatusData, "");
-          data = data.replace(startStatusJson, "");
-        } else if (data.includes(endStatusJson)) {
-          // check for end and process the command
-          const partialStatusData = data.split(endStatusJson)[0];
-          this._socketData += partialStatusData;
-          data = data.replace(partialStatusData, "");
-          data = data.replace(endStatusJson, "");
-          this._socketData = "";
-        } else if (this._socketData.length > 0) {
-          // check if the line is all data then just concatenate
-          this._socketData += data;
-          data = "";
-        }
+        // Handle status messages
+        let processedStatusData = data;
 
-        if (this._allowTerminalWrite && data.includes(this._startMarker)) {
-          this._allowTerminalWrite = false;
-          terminal.write(`Preparing ${this._shellHandler.getShellName()} environment...\r\n`);
-        }
-
-        if (this._allowTerminalWrite) {
-          const updatedData = this._shellHandler?.updateTerminalData(data) ?? data;
-          const suppressedData = this._shellHandler?.getTerminalSuppressedData();
-
-          const shouldNotWrite = suppressedData.filter(Boolean).some((item) => updatedData.includes(item));
-
-          if (!shouldNotWrite) {
-            terminal.write(updatedData);
+        // Process status messages with delimiters
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+          const startIndex = processedStatusData.indexOf(startStatusJson);
+          if (startIndex === -1) {
+            break;
           }
+
+          const afterStart = processedStatusData.substring(startIndex + startStatusJson.length);
+          const endIndex = afterStart.indexOf(endStatusJson);
+
+          if (endIndex === -1) {
+            // Incomplete status message
+            this._socketData += processedStatusData.substring(startIndex);
+            processedStatusData = processedStatusData.substring(0, startIndex);
+            break;
+          }
+
+          // Remove processed status message
+          processedStatusData =
+            processedStatusData.substring(0, startIndex) + afterStart.substring(endIndex + endStatusJson.length);
         }
 
-        if (data.includes(this._shellHandler.getConnectionCommand())) {
-          this._allowTerminalWrite = true;
+        // Add to message buffer
+        messageBuffer += processedStatusData;
+
+        // Clear existing timeout
+        if (bufferTimeout) {
+          clearTimeout(bufferTimeout);
+          bufferTimeout = null;
+        }
+
+        // Check if this looks like a complete message/command
+        const isComplete = this.isMessageComplete(messageBuffer, processedStatusData);
+
+        if (isComplete) {
+          // Message marked as complete, processing immediately
+          processBuffer();
+        } else {
+          // Set timeout to process buffer after delay
+          bufferTimeout = setTimeout(processBuffer, BUFFER_TIMEOUT);
         }
       }),
     );
+
+    // Clean up timeout on dispose
+    this._disposables.push({
+      dispose: () => {
+        if (bufferTimeout) {
+          clearTimeout(bufferTimeout);
+        }
+      },
+    });
+  }
+
+  private isMessageComplete(fullBuffer: string, currentChunk: string): boolean {
+    // Immediate completion indicators
+    const immediateCompletionPatterns = [
+      /\n$/, // Ends with newline
+      /\r$/, // Ends with carriage return
+      /\r\n$/, // Ends with CRLF
+      /; \} \|\| true;$/, // Your command pattern
+      /disown -a && exit$/, // Exit commands
+      /printf.*?\\033\[0m\\n"$/, // Your printf pattern
+    ];
+
+    // Check current chunk for immediate completion
+    for (const pattern of immediateCompletionPatterns) {
+      if (pattern.test(currentChunk)) {
+        return true;
+      }
+    }
+
+    // ANSI sequence detection - these might be complete prompts
+    const ansiPromptPatterns = [
+      /\[\d+G\[0J.*>\s*\[\d+G$/, // Your specific pattern: [1G[0J...> [26G
+      /\[\d+;\d+H/, // Cursor position sequences
+      /\]\s*\[\d+G$/, // Ends with cursor positioning
+      />\s*\[\d+G$/, // Prompt followed by cursor position
+    ];
+
+    // Check if buffer ends with what looks like a complete prompt
+    for (const pattern of ansiPromptPatterns) {
+      if (pattern.test(fullBuffer)) {
+        return true;
+      }
+    }
+
+    // Check for MongoDB shell prompts specifically
+    const mongoPromptPatterns = [
+      /globaldb \[primary\] \w+>\s*\[\d+G$/, // MongoDB replica set prompt
+      />\s*\[\d+G$/, // General prompt with cursor positioning
+      /\w+>\s*$/, // Simple shell prompt
+    ];
+
+    for (const pattern of mongoPromptPatterns) {
+      if (pattern.test(fullBuffer)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  private handleCompleteTerminalData(terminal: Terminal, data: string): void {
+    if (this._allowTerminalWrite && data.includes(this._startMarker)) {
+      this._allowTerminalWrite = false;
+      terminal.write(`Preparing ${this._shellHandler.getShellName()} environment...\r\n`);
+    }
+
+    if (this._allowTerminalWrite) {
+      const updatedData =
+        typeof this._shellHandler?.updateTerminalData === "function"
+          ? this._shellHandler.updateTerminalData(data)
+          : data;
+
+      const suppressedData = this._shellHandler?.getTerminalSuppressedData();
+      const shouldNotWrite = suppressedData.filter(Boolean).some((item) => updatedData.includes(item));
+
+      if (!shouldNotWrite) {
+        terminal.write(updatedData);
+      }
+    }
+
+    if (data.includes(this._shellHandler.getConnectionCommand())) {
+      this._allowTerminalWrite = true;
+    }
   }
 
   public dispose(): void {

src/Explorer/Tabs/CloudShellTab/Utils/CommonUtils.tsx

@@ -50,3 +50,34 @@ export const getShellNameForDisplay = (terminalKind: TerminalKind): string => {
       return "";
   }
 };
+
+/**
+ * Get MongoDB shell information text that should be removed from terminal output
+ */
+export const getMongoShellRemoveInfoText = (): string[] => {
+  return [
+    "For mongosh info see: https://www.mongodb.com/docs/mongodb-shell/",
+    "disableTelemetry() command",
+    "https://www.mongodb.com/legal/privacy-policy",
+  ];
+};
+
+export const filterAndCleanTerminalOutput = (data: string, removeInfoText: string[]): string => {
+  if (!data || removeInfoText.length === 0) {
+    return data;
+  }
+
+  const lines = data.split("\n");
+  const filteredLines: string[] = [];
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const shouldRemove = removeInfoText.some((text) => line.includes(text));
+
+    if (!shouldRemove) {
+      filteredLines.push(line);
+    }
+  }
+
+  return filteredLines.join("\n").replace(/((\r\n)|\n|\r){2,}/g, "\r\n");
+};

src/Explorer/Tabs/CloudShellTab/Utils/RegionUtils.tsx

@@ -7,7 +7,8 @@ const validCloudShellRegions = new Set([
   "westeurope",
   "centralindia",
   "southeastasia",
-  "westcentralus",
+  "usgovvirginia",
+  "usgovarizona",
 ]);
 
 /**
@@ -39,7 +40,6 @@ export const getNormalizedRegion = (region: string, defaultCloudshellRegion: str
   }
 
   const regionMap: Record<string, string> = {
-    centralus: "westcentralus",
     eastus2: "eastus",
   };