Add test infrastructure and data-test attributes for Container Copy e2e tests (#2280)

* Add test infrastructure and data-test attributes for Container Copy e2e testing

* fix container copy FTs

.github/workflows/ci.yml

@@ -164,8 +164,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
-        shardTotal: [16]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+        shardTotal: [20]
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js 18.x
@@ -192,24 +192,29 @@ jobs:
             NOSQL_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-sql-readonly.documents.azure.com/.default" -o tsv --query accessToken)
             echo "::add-mask::$NOSQL_READONLY_TESTACCOUNT_TOKEN"
             echo NOSQL_READONLY_TESTACCOUNT_TOKEN=$NOSQL_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-sql-containercopyonly.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN"
+            echo NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN=$NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
             TABLE_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-tables.documents.azure.com/.default" -o tsv --query accessToken)
             echo "::add-mask::$TABLE_TESTACCOUNT_TOKEN"
             echo TABLE_TESTACCOUNT_TOKEN=$TABLE_TESTACCOUNT_TOKEN >> $GITHUB_ENV
             GREMLIN_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-gremlin.documents.azure.com/.default" -o tsv --query accessToken)
             echo "::add-mask::$GREMLIN_TESTACCOUNT_TOKEN"
             echo GREMLIN_TESTACCOUNT_TOKEN=$GREMLIN_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
-            echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
-            echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
-            echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
-            echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
+            # echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
+            # echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
+            # echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
+            # echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
+            # echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
+            # echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
+            # echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
+            # echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+      - name: List test files for shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}
+        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --list
       - name: Run test shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}
         run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers=3
       - name: Upload blob report to GitHub Actions Artifacts

.github/workflows/cleanup.yml

@@ -6,8 +6,8 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
   schedule:
-    # Once every hour
-    - cron: "0 15 * * *"
+    # Once every two hours
+    - cron: "0 */2 * * *"
 
 permissions:
   id-token: write

DataExplorer.nuspec

@@ -19,6 +19,6 @@
     </frameworkAssemblies>
   </metadata>
   <files>
-    <file src="**\*" target="content"/>
+    <file src="**\*" exclude="obj\**\*" target="content"/>
   </files>
 </package>

images/DocumentIcon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <path d="M4 4c0-1.1.9-2 2-2h3.59c.4 0 .78.16 1.06.44l3.91 3.91c.28.28.44.67.44 1.06V14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 9 6.5V3H6Zm4 .2v3.3c0 .28.22.5.5.5h3.3L10 3.2ZM17 9a1 1 0 0 0-1-1v6a3 3 0 0 1-3 3H6a1 1 0 0 0 1 1h6.06A3.94 3.94 0 0 0 17 14.06V9Z" />
+</svg>

images/MoonIcon.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="M7.85032 3.0153C10.4276 3.21621 12.4563 5.37119 12.4563 8C12.4563 10.7614 10.2177 13 7.45629 13C5.70158 13 4.15722 12.0961 3.26465 10.7271C4.66791 10.3479 6.58077 9.42526 7.42438 7.17555C7.97709 5.70162 8.00857 4.23763 7.85032 3.0153ZM13.4563 8C13.4563 4.68629 10.77 2 7.45629 2C7.38577 2 7.31552 2.00122 7.24555 2.00364C7.09984 2.00867 6.96358 2.07706 6.87247 2.19089C6.78136 2.30471 6.74447 2.45263 6.77147 2.59591C7.00024 3.81021 7.05064 5.32413 6.48805 6.82444C5.68804 8.95787 3.68609 9.66359 2.41062 9.89533C2.25698 9.92325 2.1252 10.0213 2.05438 10.1605C1.98356 10.2997 1.98182 10.4639 2.04969 10.6046C3.01873 12.6128 5.07502 14 7.45629 14C10.77 14 13.4563 11.3137 13.4563 8Z" fill="#0078d4" />
+</svg>

images/SunIcon.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 1.33C8.276 1.33 8.5 1.554 8.5 1.83V2.83C8.5 3.106 8.276 3.33 8 3.33C7.724 3.33 7.5 3.106 7.5 2.83V1.83C7.5 1.554 7.724 1.33 8 1.33ZM8 11.33C9.841 11.33 11.33 9.841 11.33 8C11.33 6.159 9.841 4.67 8 4.67C6.159 4.67 4.67 6.159 4.67 8C4.67 9.841 6.159 11.33 8 11.33ZM8 10.33C6.711 10.33 5.67 9.289 5.67 8C5.67 6.711 6.711 5.67 8 5.67C9.289 5.67 10.33 6.711 10.33 8C10.33 9.289 9.289 10.33 8 10.33ZM14.17 8.5C14.446 8.5 14.67 8.276 14.67 8C14.67 7.724 14.446 7.5 14.17 7.5H13.17C12.894 7.5 12.67 7.724 12.67 8C12.67 8.276 12.894 8.5 13.17 8.5H14.17ZM8 12.67C8.276 12.67 8.5 12.894 8.5 13.17V14.17C8.5 14.446 8.276 14.67 8 14.67C7.724 14.67 7.5 14.446 7.5 14.17V13.17C7.5 12.894 7.724 12.67 8 12.67ZM2.83 8.5C3.106 8.5 3.33 8.276 3.33 8C3.33 7.724 3.106 7.5 2.83 7.5H1.83C1.554 7.5 1.33 7.724 1.33 8C1.33 8.276 1.554 8.5 1.83 8.5H2.83ZM2.813 2.813C3.009 2.617 3.325 2.617 3.521 2.813L4.521 3.813C4.717 4.009 4.717 4.325 4.521 4.521C4.325 4.717 4.009 4.717 3.813 4.521L2.813 3.521C2.617 3.325 2.617 3.009 2.813 2.813ZM3.521 13.187C3.325 13.383 3.009 13.383 2.813 13.187C2.617 12.991 2.617 12.675 2.813 12.479L3.813 11.479C4.009 11.283 4.325 11.283 4.521 11.479C4.717 11.675 4.717 11.991 4.521 12.187L3.521 13.187ZM13.187 2.813C12.991 2.617 12.675 2.617 12.479 2.813L11.479 3.813C11.283 4.009 11.283 4.325 11.479 4.521C11.675 4.717 11.991 4.717 12.187 4.521L13.187 3.521C13.383 3.325 13.383 3.009 13.187 2.813ZM12.479 13.187C12.675 13.383 12.991 13.383 13.187 13.187C13.383 12.991 13.383 12.675 13.187 12.479L12.187 11.479C11.991 11.283 11.675 11.283 11.479 11.479C11.283 11.675 11.283 11.991 11.479 12.187L12.479 13.187Z" fill="#0078d4" />
+</svg>

images/moon-blue.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 7.5C4 5.567 5.567 4 7.5 4C8.5 4 9.4 4.4 10 5.1C9.5 4.8 8.9 4.6 8.3 4.6C6.8 4.6 5.6 5.8 5.6 7.3C5.6 8.8 6.8 10 8.3 10C8.9 10 9.5 9.8 10 9.5C9.4 10.2 8.5 10.6 7.5 10.6C5.567 10.6 4 9.033 4 7.1V7.5Z" fill="#0078D4"/>
+</svg>

images/sun-blue.svg

@@ -0,0 +1,11 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 2C6 1.44772 6.44772 1 7 1C7.55228 1 8 1.44772 8 2C8 2.55228 7.55228 3 7 3C6.44772 3 6 2.55228 6 2Z" fill="#0078D4"/>
+<path d="M6 13C6 12.4477 6.44772 12 7 12C7.55228 12 8 12.4477 8 13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13Z" fill="#0078D4"/>
+<path d="M1 7C1 6.44772 1.44772 6 2 6C2.55228 6 3 6.44772 3 7C3 7.55228 2.55228 8 2 8C1.44772 8 1 7.55228 1 7Z" fill="#0078D4"/>
+<path d="M12 7C12 6.44772 12.4477 6 13 6C13.5523 6 14 6.44772 14 7C14 7.55228 13.5523 8 13 8C12.4477 8 12 7.55228 12 7Z" fill="#0078D4"/>
+<path d="M2.63604 3.63604C3.02656 3.24551 3.65973 3.24551 4.05025 3.63604C4.44078 4.02656 4.44078 4.65973 4.05025 5.05025C3.65973 5.44078 3.02656 5.44078 2.63604 5.05025C2.24551 4.65973 2.24551 4.02656 2.63604 3.63604Z" fill="#0078D4"/>
+<path d="M10.9497 9.94975C11.3403 9.55922 11.9734 9.55922 12.364 9.94975C12.7545 10.3403 12.7545 10.9734 12.364 11.364C11.9734 11.7545 11.3403 11.7545 10.9497 11.364C10.5592 10.9734 10.5592 10.3403 10.9497 9.94975Z" fill="#0078D4"/>
+<path d="M10.9497 5.05025C10.5592 4.65973 10.5592 4.02656 10.9497 3.63604C11.3403 3.24551 11.9734 3.24551 12.364 3.63604C12.7545 4.02656 12.7545 4.65973 12.364 5.05025C11.9734 5.44078 11.3403 5.44078 10.9497 5.05025Z" fill="#0078D4"/>
+<path d="M2.63604 11.364C2.24551 10.9734 2.24551 10.3403 2.63604 9.94975C3.02656 9.55922 3.65973 9.55922 4.05025 9.94975C4.44078 10.3403 4.44078 10.9734 4.05025 11.364C3.65973 11.7545 3.02656 11.7545 2.63604 11.364Z" fill="#0078D4"/>
+<circle cx="7.5" cy="7.5" r="2.5" fill="#0078D4"/>
+</svg>

less/Common/Constants.less

@@ -128,7 +128,7 @@
 @provisionDatabaseThroughputInfo: 200px;
 
 //tabs container
-@ActiveTabHeight: 31px;
+@ActiveTabHeight: 32px;
 @ActiveTabWidth: 141px;
 @TabsHeight: 30px;
 @TabsWidth: 140px;
@@ -237,11 +237,11 @@
 *********************************************************************************************/
 
 .hover() {
-  background-color: @AccentLight;
+  background-color: var(--colorNeutralBackground1Hover);
 }
 
 .active() {
-  background-color: @AccentExtra;
+  background-color: var(--colorNeutralBackground1Hover);
 }
 
 .focus() {

less/documentDB.less

@@ -406,7 +406,11 @@ body {
   width: 440px;
   min-height: 565px;
 }
-
+.dataExplorerLoaderforcopyJobs{
+   width: 100%;
+   min-height: 565px;
+   right: 0;
+}
 .dataExplorerTabLoaderContainer {
   left: initial;
   top: initial;
@@ -1740,7 +1744,7 @@ input::-webkit-calendar-picker-indicator {
   flex: 1;
   padding-left: 34px;
   padding-right: 34px;
-  color: @BaseDark;
+  color: var(--colorNeutralForeground1);
   overflow-y: auto;
   overflow-x: auto;
   margin: (2 * @MediumSpace) 0px;
@@ -1749,7 +1753,6 @@ input::-webkit-calendar-picker-indicator {
 .contextual-pane .panelMainContent {
   padding-left: 34px;
   padding-right: 34px;
-  color: @BaseDark;
   margin: (2 * @MediumSpace) 0px;
 }
 
@@ -1914,7 +1917,8 @@ input::-webkit-calendar-picker-indicator::after {
 }
 
 .nav-tabs-margin {
-  background-color: #f2f2f2;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 
   .nav-tabs {
     display: flex;
@@ -1922,11 +1926,19 @@ input::-webkit-calendar-picker-indicator::after {
     align-items: flex-end;
     height: 100%;
     margin-bottom: -0.5px;
+    background-color: var(--colorNeutralBackground1Selected);
 
     li {
-      // Override the bootstrap defaults here to align with our layout constants.
       margin-bottom: 0px;
       height: 32px;
+
+      &:hover {
+        background-color: var(--colorNeutralBackground1Hover);
+      }
+
+      &:active {
+        background-color: var(--colorNeutralBackground1Pressed);
+      }
     }
   }
 }
@@ -1940,8 +1952,9 @@ input::-webkit-calendar-picker-indicator::after {
 .nav.nav-tabs.qslevel > li > a:hover {
   border: none;
   border-radius: 0;
-  background-color: transparent !important;
+  background-color: var(--colorNeutralBackground1Selected);
   border-color: transparent;
+  color: var(--colorNeutralForeground1);
 }
 
 .numbersize {
@@ -2376,6 +2389,8 @@ a:link {
   display: flex;
   flex-direction: column;
   min-width: 0; // This prevents it to grow past the parent's width if its content is too wide
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .tabs {
@@ -2631,14 +2646,16 @@ a:link {
 }
 
 .tabPanesContainer {
-  display: flex;
   flex-grow: 1;
   overflow: hidden;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .tabs-container {
   height: 100%;
   width: 100%;
+  overflow-y: auto;
 }
 
 .paddingspan4 {
@@ -2655,24 +2672,18 @@ a:link {
 .nav-tabs > li.active > .tabNavContentContainer,
 .nav-tabs > li.active > .tabNavContentContainer:focus,
 .nav-tabs > li.active > .tabNavContentContainer:hover {
-  color: #555;
+  color: var(--colorNeutralForeground1);
   cursor: default;
-  background-color: @BaseLight;
-  border-color: @BaseMedium;
-  border-bottom-color: @BaseLight;
+  background-color: var(--colorNeutralBackground1);
+  border-color: var(--colorNeutralStroke1);
   border-style: solid;
   border-width: 1px;
   height: @ActiveTabHeight;
   width: @ActiveTabWidth;
 }
 
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
-  font-weight: bolder;
-  border-bottom: 2px solid rgba(0, 120, 212, 1);
-}
-
-.nav-tabs > li.active:focus > .tabNavContentContainer {
-  .focus();
+.nav-tabs > li.active .contentWrapper .tabNavText  {
+  border-bottom: 2px solid var(--colorCompoundBrandBackground);
 }
 
 .tabNavContentContainer {
@@ -2681,7 +2692,7 @@ a:link {
   justify-content: space-between;
   border-radius: 2px 2px 0 0;
   padding: @DefaultSpace 0px @SmallSpace 0px;
-  color: @BaseHigh;
+  color: var(--colorNeutralForeground1);
   width: @TabsWidth;
   text-align: center;
   position: relative;
@@ -2689,19 +2700,21 @@ a:link {
 
   &:hover {
     text-decoration: none;
-    background-color: @BaseMediumLow;
-    border-color: @BaseMediumLow;
+    background-color: var(--colorNeutralBackground1Hover);
+    border-color: transparent;
   }
 
   &:active {
-    background-color: @BaseMediumLow;
+    background-color: var(--colorNeutralBackground1Pressed);
   }
 
   .tab_Content {
     .flex-display();
     width: @TabsWidth;
-    border-right: @ButtonBorderWidth solid @BaseMedium;
+    border-right: @ButtonBorderWidth solid var(--colorNeutralStroke1);
     white-space: nowrap;
+    color: var(--colorNeutralForeground1);
+
     .contentWrapper {
       .flex-display();
       width: @ContentWrapper;
@@ -2723,9 +2736,8 @@ a:link {
             background-image: url(../images/error_no_outline.svg);
             background-repeat: no-repeat;
             background-position: center;
-            background-size: 3px;
             display: block;
-            margin: 1px 0px 0px 6px;
+            margin: 4px 0px 0px 6px;
           }
         }
 
@@ -2750,39 +2762,60 @@ a:link {
         .loadingIcon {
           width: @LoadingErrorIconSize;
           height: @LoadingErrorIconSize;
-          margin: 0px 0px @SmallSpace @SmallSpace;
+          margin-top: 1px;
+        }
+
+        .warningIconContainer {
+          width: @ErrorIconContainer;
+          height: @ErrorIconContainer;
+          margin-top: 1px;
         }
       }
 
       .tabNavText {
         margin-left: @SmallSpace;
         margin-right: 2px;
-        color: @BaseDark;
+        color: var(--colorNeutralForeground1);
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
         flex-grow: 1;
+        font-size: 12px;
       }
     }
 
     .tabIconSection {
-      width: 29px;
       position: relative;
-      padding-top: 2px;
 
       .cancelButton {
         padding: 0px @SmallSpace 0px @SmallSpace;
+        color: var(--colorNeutralForeground1);
+        width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
 
         &:hover {
-          .hover();
+          background-color: var(--colorNeutralBackground1Hover);
+          color: var(--colorNeutralForeground1);
         }
 
         &:focus {
-          .focus();
+          background-color: var(--colorNeutralBackground1Pressed);
+          color: var(--colorNeutralForeground1);
         }
 
         &:active {
-          .active();
+          background-color: var(--colorNeutralBackground1Pressed);
+          color: var(--colorNeutralForeground1);
+        }
+
+        &::before {
+          content: "×";
+          font-size: 16px;
+          line-height: 1;
         }
       }
     }
@@ -3137,3 +3170,12 @@ a:link {
 .sidebarContainer {
   height: 100%;
 }
+
+.close-Icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}

less/documentDBFabric.less

@@ -7,6 +7,7 @@ html {
 body {
   font-family: @FabricFont;
   background-color: #f5f5f5;
+  --colorCompoundBrandBackground: @FabricAccentMedium;
 }
 
 a {
@@ -41,7 +42,7 @@ a:focus {
 }
 
 .nav-tabs-margin {
-  padding-top: 5px;
+  padding-top: 0px;
   background-color: #ffffff;
 }
 
@@ -68,17 +69,20 @@ a:focus {
 }
 
 .nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: 2px solid #e0e0e0;
+  border-bottom: none;
 }
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: 2px solid @FabricAccentMedium;
+  border-bottom: none;
 }
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
   border-bottom: 0px none transparent;
 }
+.nav-tabs > li.active .contentWrapper .tabNavText  {
+  border-bottom: 2px solid @FabricAccentMedium;
+}
 
 .tabNavContentContainer {
   padding: @SmallSpace 0px @SmallSpace 0px;
@@ -214,6 +218,7 @@ a:focus {
 
 .tabPanesContainer {
   overflow: auto !important;
+  display: flex;
 }
 
 .tabs-container {

less/forms.less

@@ -79,13 +79,13 @@
 
 .storageCapacityTitle {
   padding: @LargeSpace 0px;
-
 }
 .throughputStorageValue {
   font-size: 12px;
 }
 
-.estimatedCost, .largePartitionKeyEnabled {
+.estimatedCost,
+.largePartitionKeyEnabled {
   padding: @SmallSpace 0px @LargeSpace;
 }
 
@@ -109,18 +109,25 @@
 }
 
 .formTree {
-    border: 1px solid #969696;
-    color: #393939;
+  border: 1px solid var(--colorNeutralStroke1);
+  color: var(--colorNeutralForeground1);
+  background-color: var(--colorNeutralBackground1);
   padding: 0px 12px 1px 8px;
 }
 
 .formTree:hover {
-    border: 1px solid #969696;
-    background-color: #e6f8fe;
+  border: 1px solid var(--colorNeutralStroke1Hover);
+  background-color: var(--colorNeutralBackground1Hover);
+}
+
+.formTree::placeholder {
+  color: var(--colorNeutralForeground2);
+  opacity: 1;
 }
 
 .formTree:active {
-    border: 1px solid #1ebbee;
+  border: 1px solid var(--colorNeutralStroke1Pressed);
+  background-color: var(--colorNeutralBackground1Pressed);
 }
 
 .scaleForm {
@@ -139,7 +146,6 @@
   margin-bottom: 4px;
 }
 
-
 .spUdfTriggerHeader {
   padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace);
 }
@@ -151,33 +157,33 @@
 
 .unselectedRadio {
   background-color: white;
-    border-color: #EEE!important;
+  border-color: #eee !important;
   color: black !important;
 }
 
 .disabledRadio {
-    background-color: #A19F9D;
-    border-color: #EEE!important;
+  background-color: #a19f9d;
+  border-color: #eee !important;
   color: white !important;
 }
 
 .selectedRadio {
   background-color: @AccentMediumHigh;
-    border-color: #EEE!important;
+  border-color: #eee !important;
   color: white !important;
   cursor: pointer;
 }
 
 .selectedRadio:hover {
   background-color: @AccentMediumHigh;
-    border-color: #EEE!important;
+  border-color: #eee !important;
   color: white !important;
   cursor: pointer;
 }
 
 .selectedRadio:active {
   background-color: #0072c6;
-    border-color: #EEE!important;
+  border-color: #eee !important;
   color: white !important;
   cursor: pointer;
   border: 1px solid #0072c6;
@@ -204,8 +210,18 @@
 
 .trigger-field {
   width: 40%;
-    margin-top: 10px
+  margin-top: 10px;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
+
+.trigger-field input::placeholder {
+  color: var(--colorNeutralForeground3);
+  opacity: 1;
+}
+
 .trigger-form {
-    padding: 10px 30px 10px 30px;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+  padding: 10px 30px;
 }

less/hostedexplorer.less

@@ -255,7 +255,7 @@ body {
                 flex: 1;
                 padding-left: 34px;
                 padding-right: 34px;
-                color: @BaseDark;
+                color: var(--colorNeutralForeground1);
                 overflow-y: auto;
                 overflow-x: hidden;
                 margin: (2 * @MediumSpace) 0px;

less/tree.less

@@ -1,270 +0,0 @@
-@import "./Common/Constants";
-
-.resourceTree {
-  height: 100%;
-  flex: 0 0 auto;
-  .main {
-    height: 100%;
-  }
-}
-
-.resourceTreeScroll {
-  height: 100%;
-  display: flex;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-right: 10px;
-}
-
-.userSelectNone {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-
-.treeHovermargin {
-  margin-left: 16px;
-}
-
-.highlight {
-  padding: @SmallSpace 2px;
-  outline: 0;
-
-  &:hover {
-    .hover();
-  }
-
-  &:active {
-    .active();
-  }
-
-  &:focus {
-    .focus();
-  }
-}
-
-.contextmenushowing {
-  background-color: #eee;
-}
-
-.collectionstree {
-  width: 100%;
-  margin-top: @DefaultSpace;
-
-  .databaseList {
-    list-style-type: none;
-    padding-left: 0px;
-
-    .collectionList {
-      padding-left: (2 * @MediumSpace);
-    }
-
-    .collectionChildList {
-      padding-left: @LargeSpace;
-    }
-
-    .databaseDocuments {
-      padding-left: (5 * @MediumSpace);
-    }
-  }
-}
-
-.pointerCursor {
-  cursor: pointer;
-}
-
-.menuEllipsis {
-  padding-right: 6px;
-  font-weight: bold;
-  font-size: 18px;
-  position: relative;
-  top: -5px;
-  left: 0px;
-  float: right;
-  display: none;
-  padding-left: 6px !important;
-  line-height: @TreeLineHeight;
-}
-
-.databaseMenu {
-  .flex-display();
-}
-
-.databaseMenu:hover .menuEllipsis,
-.databaseMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.databaseCollChildTextOverflow {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  flex: 1;
-}
-
-.collectionMenu {
-  .flex-display();
-}
-
-.collectionMenu:hover .menuEllipsis,
-.collectionMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.documentsMenu:hover .menuEllipsis,
-.documentsMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.treeChildMenu {
-  display: flex;
-}
-
-.storedProcedureMenu:hover .menuEllipsis,
-.storedProcedureMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.childMenu {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-left: (6 * @MediumSpace);
-  width: 100%;
-}
-
-.storedChildMenu:hover .menuEllipsis,
-.storedChildMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.contextmenu6 {
-  top: -29px;
-}
-
-.userDefinedMenu:hover .contextmenu6 {
-  display: block;
-}
-
-.userDefinedchildMenu:hover .menuEllipsis,
-.userDefinedchildMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.triggersMenu:hover .menuEllipsis,
-.triggersMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.triggersChildMenu:hover .menuEllipsis,
-.triggersChildMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.databaseId {
-  font-size: 14px;
-}
-
-.storedUdfTriggerMenu {
-  padding-left: 0px;
-}
-
-.collectionstree img {
-  width: 16px;
-  height: 16px;
-  vertical-align: text-top;
-}
-
-img.collectionsTreeCollapseExpand {
-  width: 10px;
-  height: 10px;
-  vertical-align: middle;
-  margin-bottom: 5px;
-}
-
-.collapsed::before {
-  content: "\23F5";
-  margin-left: 0px;
-  font-size: 15px;
-}
-
-.expanded::before {
-  content: "\23F7";
-  margin-left: 0px;
-  font-size: 15px;
-}
-
-.collectionMenuChildren {
-  padding-left: 42px;
-}
-
-.main-nav {
-  width: 100vh;
-  height: 40px;
-  background: white;
-  transform-origin: left top;
-  -webkit-transform-origin: left top;
-  -ms-transform-origin: left top;
-  transform: rotate(-90deg) translateX(-100%);
-  -webkit-transform: rotate(-90deg) translateX(-100%);
-  -ms-transform: rotate(-90deg) translateX(-100%);
-  border-bottom: 1px solid #ccc;
-}
-
-.main-nav-img {
-  width: 16px;
-  height: 16px;
-  margin: -32px 0 0 0;
-  transform: rotate(-90deg) translateX(-100%);
-  -webkit-transform: rotate(-90deg) translateX(-100%);
-  -ms-transform: rotate(-90deg) translateX(-100%);
-}
-
-.main-nav-img.main-nav-sub-img {
-  width: 16px;
-  height: 16px;
-  margin: 0px 0px 0 0;
-  transform: rotate(180deg) translateX(0%);
-  -webkit-transform: rotate(180deg) translateX(0%);
-  -ms-transform: rotate(180deg) translateX(0%);
-  position: absolute;
-  right: -8px;
-  top: 16px;
-}
-
-ul.nav {
-  margin: 0 auto;
-  margin-top: 0px;
-  margin-left: 0px;
-}
-
-.mini ul.nav li {
-  float: right;
-  line-height: 25px;
-  height: auto;
-  margin-top: 3px;
-}
-
-.spancolchildstyle {
-  padding: 4px;
-}
-
-.contextmenubutton {
-  float: right;
-  display: none;
-}
-
-.highlight:hover > .contextmenubutton {
-  display: unset;
-}
-
-.highlight:hover > .contextmenubutton::after {
-  content: "\2026";
-  font-size: 12px;
-}
-
-.showEllipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}

package-lock.json

@@ -117,6 +117,7 @@
         "underscore": "1.12.1",
         "utility-types": "3.10.0",
         "uuid": "9.0.0",
+        "web-vitals": "4.2.4",
         "zustand": "3.5.0"
       },
       "devDependencies": {
@@ -35930,6 +35931,11 @@
         "defaults": "^1.0.3"
       }
     },
+    "node_modules/web-vitals": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
+      "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw=="
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "license": "BSD-2-Clause"

package.json

@@ -111,6 +111,7 @@
     "tinykeys": "2.1.0",
     "underscore": "1.12.1",
     "utility-types": "3.10.0",
+    "web-vitals": "4.2.4",
     "uuid": "9.0.0",
     "zustand": "3.5.0"
   },

playwright.config.ts

@@ -11,8 +11,8 @@ export default defineConfig({
   reporter: process.env.CI ? "blob" : "html",
   timeout: 10 * 60 * 1000,
   use: {
-    trace: "off",
-    video: "off",
+    trace: "retain-on-failure",
+    video: "retain-on-failure",
     screenshot: "on",
     testIdAttribute: "data-test",
     contextOptions: {

src/Common/LoadingOverlay.tsx

@@ -1,4 +1,5 @@
 import { Overlay, Spinner, SpinnerSize } from "@fluentui/react";
+import { useThemeStore } from "hooks/useTheme";
 import React from "react";
 
 interface LoadingOverlayProps {
@@ -7,15 +8,17 @@ interface LoadingOverlayProps {
 }
 
 const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ isLoading, label }) => {
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
   if (!isLoading) {
     return null;
   }
 
   return (
     <Overlay
+      data-test="loading-overlay"
       styles={{
         root: {
-          backgroundColor: "rgba(255,255,255,0.9)",
+          backgroundColor: isDarkMode ? "rgba(32, 31, 30, 0.9)" : "rgba(255,255,255,0.9)",
           zIndex: 9999,
           display: "flex",
           alignItems: "center",
@@ -23,7 +26,11 @@ const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ isLoading, label }) =>
         },
       }}
     >
-      <Spinner size={SpinnerSize.large} label={label} styles={{ label: { fontWeight: 600 } }} />
+      <Spinner
+        size={SpinnerSize.large}
+        label={label}
+        styles={{ label: { fontWeight: 600, color: isDarkMode ? "#ffffff" : "#323130" } }}
+      />
     </Overlay>
   );
 };

src/Common/Pager/Pager.css

@@ -11,3 +11,14 @@
   gap: 8px;
   align-items: center;
 }
+
+/* Override dark mode inherit for pagination icons */
+body.isDarkMode .pager-container .ms-Button .ms-Button-icon,
+body.isDarkMode .pager-container .ms-Button i {
+  color: var(--colorBrandForeground1);
+}
+
+body.isDarkMode .pager-container .ms-Button:disabled .ms-Button-icon,
+body.isDarkMode .pager-container .ms-Button:disabled i {
+  color: var(--colorNeutralForegroundDisabled);
+}

src/Common/Pager/index.tsx

@@ -59,7 +59,7 @@ const Pager: React.FC<PagerProps> = ({
   return (
     <div className={className || "pager-container"}>
       {showItemCount && (
-        <Text>
+        <Text className="themeText">
           Showing {startIndex + 1} - {endIndex} of {totalCount} items
         </Text>
       )}
@@ -82,7 +82,7 @@ const Pager: React.FC<PagerProps> = ({
           disabled={disabled || currentPage === 1}
           styles={iconButtonStyles}
         />
-        <Text>
+        <Text className="themeText">
           Page {currentPage} of {totalPages}
         </Text>
         <IconButton

src/Common/Upload/Upload.tsx

@@ -50,10 +50,33 @@ export const Upload: FunctionComponent<UploadProps> = ({
   const title = label + " to upload";
   return (
     <div>
-      <span className="renewUploadItemsHeader">{label}</span>
+      <span className="renewUploadItemsHeader" style={{ color: "var(--colorNeutralForeground1)" }}>
+        {label}
+      </span>
       {tooltip && <InfoTooltip>{tooltip}</InfoTooltip>}
       <Stack horizontal>
-        <TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />
+        <TextField
+          styles={{
+            fieldGroup: {
+              width: 300,
+              backgroundColor: "var(--colorNeutralBackground3)",
+              borderColor: "var(--colorNeutralStroke1)",
+            },
+            field: {
+              backgroundColor: "var(--colorNeutralBackground3)",
+              color: "var(--colorNeutralForeground1)",
+            },
+            subComponentStyles: {
+              label: {
+                root: {
+                  color: "var(--colorNeutralForeground1)",
+                },
+              },
+            },
+          }}
+          readOnly
+          value={selectedFilesTitle.toString()}
+        />
         <input
           type="file"
           id="importFileInput"

src/Common/__snapshots__/LoadingOverlay.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`LoadingOverlay should handle long labels properly 1`] = `
 <div
   class="ms-Overlay root-109"
+  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"
@@ -22,6 +23,7 @@ exports[`LoadingOverlay should handle long labels properly 1`] = `
 exports[`LoadingOverlay should render loading overlay when isLoading is true 1`] = `
 <div
   class="ms-Overlay root-109"
+  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"
@@ -41,6 +43,7 @@ exports[`LoadingOverlay should render loading overlay when isLoading is true 1`]
 exports[`LoadingOverlay should render loading overlay with custom label 1`] = `
 <div
   class="ms-Overlay root-109"
+  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"
@@ -60,6 +63,7 @@ exports[`LoadingOverlay should render loading overlay with custom label 1`] = `
 exports[`LoadingOverlay should render loading overlay with empty label 1`] = `
 <div
   class="ms-Overlay root-109"
+  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"

src/Common/dataAccess/dataTransfers.ts

@@ -1,3 +1,4 @@
+import { configContext } from "ConfigContext";
 import { ApiType, userContext } from "UserContext";
 import * as NotificationConsoleUtils from "Utils/NotificationConsoleUtils";
 import {
@@ -14,9 +15,12 @@ import {
   DataTransferJobFeedResults,
   DataTransferJobGetResults,
 } from "Utils/arm/generatedClients/dataTransferService/types";
+import { armRequest } from "Utils/arm/request";
 import { addToPolling, removeFromPolling, updateDataTransferJob, useDataTransferJobs } from "hooks/useDataTransferJobs";
 import promiseRetry, { AbortError, FailedAttemptError } from "p-retry";
 
+export const DATA_TRANSFER_JOB_API_VERSION = "2025-05-01-preview";
+
 export interface DataTransferParams {
   jobName: string;
   apiType: ApiType;
@@ -33,26 +37,34 @@ export const getDataTransferJobs = async (
   subscriptionId: string,
   resourceGroup: string,
   accountName: string,
+  signal?: AbortSignal,
 ): Promise<DataTransferJobGetResults[]> => {
   let dataTransferJobs: DataTransferJobGetResults[] = [];
   let dataTransferFeeds: DataTransferJobFeedResults = await listByDatabaseAccount(
     subscriptionId,
     resourceGroup,
     accountName,
+    signal,
   );
   dataTransferJobs = [...dataTransferJobs, ...(dataTransferFeeds?.value || [])];
   while (dataTransferFeeds?.nextLink) {
-    const nextResponse = await window.fetch(dataTransferFeeds.nextLink, {
-      headers: {
-        Authorization: userContext.authorizationToken,
-      },
+    /**
+     * The `nextLink` URL returned by the Cosmos DB SQL API pointed to an incorrect endpoint, causing timeouts.
+     * (i.e: https://cdbmgmtprodby.documents.azure.com:450/subscriptions/{subId}/resourceGroups/{rg}/providers/Microsoft.DocumentDB/databaseAccounts/{account}/sql/dataTransferJobs?$top=100&$skiptoken=...)
+     * We manipulate the URL by parsing it to extract the path and query parameters,
+     * then construct the correct URL for the Azure Resource Manager (ARM) API.
+     * This ensures that the request is made to the correct base URL (`configContext.ARM_ENDPOINT`),
+     * which is required for ARM operations.
+     */
+    const parsedUrl = new URL(dataTransferFeeds.nextLink);
+    const nextUrlPath = parsedUrl.pathname + parsedUrl.search;
+    dataTransferFeeds = await armRequest({
+      host: configContext.ARM_ENDPOINT,
+      path: nextUrlPath,
+      method: "GET",
+      apiVersion: DATA_TRANSFER_JOB_API_VERSION,
     });
-    if (nextResponse.ok) {
-      dataTransferFeeds = await nextResponse.json();
-      dataTransferJobs = [...dataTransferJobs, ...(dataTransferFeeds?.value || [])];
-    } else {
-      break;
-    }
+    dataTransferJobs.push(...(dataTransferFeeds?.value || []));
   }
   return dataTransferJobs;
 };

src/Contracts/MessageTypes.ts

@@ -50,4 +50,5 @@ export enum MessageTypes {
   OpenCESCVAFeedbackBlade,
   ActivateTab,
   OpenContainerCopyFeedbackBlade,
+  UpdateTheme,
 }

src/Contracts/ViewModels.ts

@@ -7,7 +7,7 @@ import {
   TriggerDefinition,
   UserDefinedFunctionDefinition,
 } from "@azure/cosmos";
-import Explorer from "../Explorer/Explorer";
+import type Explorer from "../Explorer/Explorer";
 import { ConsoleData } from "../Explorer/Menus/NotificationConsole/ConsoleData";
 import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
 import ConflictId from "../Explorer/Tree/ConflictId";
@@ -447,6 +447,9 @@ export interface DataExplorerInputsFrame {
   aadToken?: string;
   containerCopyEnabled?: boolean;
   sessionId?: string;
+  theme?: {
+    mode: number;
+  };
 }
 
 export interface SelfServeFrameInputs {
@@ -480,3 +483,6 @@ export interface DropdownOption<T> {
   value: T;
   disable?: boolean;
 }
+
+// Remove the duplicate Explorer interface and export the type
+export type { Explorer };

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

@@ -1,5 +1,6 @@
 import "@testing-library/jest-dom";
 import Explorer from "Explorer/Explorer";
+import { getDataTransferJobs } from "../../../Common/dataAccess/dataTransfers";
 import * as Logger from "../../../Common/Logger";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import * as dataTransferService from "../../../Utils/arm/generatedClients/dataTransferService/dataTransferJobs";
@@ -30,6 +31,7 @@ jest.mock("../../../Common/Logger");
 jest.mock("../../../Utils/arm/generatedClients/dataTransferService/dataTransferJobs");
 jest.mock("../MonitorCopyJobs/MonitorCopyJobRefState");
 jest.mock("../CopyJobUtils");
+jest.mock("../../../Common/dataAccess/dataTransfers");
 
 describe("CopyJobActions", () => {
   beforeEach(() => {
@@ -154,8 +156,7 @@ describe("CopyJobActions", () => {
     });
 
     it("should fetch and format copy jobs successfully", async () => {
-      const mockResponse = {
-        value: [
+      const mockResponse = [
         {
           properties: {
             jobName: "job-1",
@@ -177,10 +178,9 @@ describe("CopyJobActions", () => {
             },
           },
         },
-        ],
-      };
+      ];
 
-      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue(mockResponse);
+      (getDataTransferJobs as jest.Mock).mockResolvedValue(mockResponse);
       (CopyJobUtils.formatUTCDateTime as jest.Mock).mockReturnValue({
         formattedDateTime: "1/1/2025, 10:00:00 AM",
         timestamp: 1704106800000,
@@ -201,8 +201,7 @@ describe("CopyJobActions", () => {
     });
 
     it("should filter jobs by CosmosDBSql component", async () => {
-      const mockResponse = {
-        value: [
+      const mockResponse = [
         {
           properties: {
             jobName: "sql-job",
@@ -229,10 +228,9 @@ describe("CopyJobActions", () => {
             destination: { component: "CosmosDBSql", databaseName: "db2", containerName: "c2" },
           },
         },
-        ],
-      };
+      ];
 
-      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue(mockResponse);
+      (getDataTransferJobs as jest.Mock).mockResolvedValue(mockResponse);
       (CopyJobUtils.formatUTCDateTime as jest.Mock).mockReturnValue({
         formattedDateTime: "1/1/2025, 10:00:00 AM",
         timestamp: 1704106800000,
@@ -247,8 +245,7 @@ describe("CopyJobActions", () => {
     });
 
     it("should sort jobs by last updated time (newest first)", async () => {
-      const mockResponse = {
-        value: [
+      const mockResponse = [
         {
           properties: {
             jobName: "older-job",
@@ -275,10 +272,9 @@ describe("CopyJobActions", () => {
             destination: { component: "CosmosDBSql", databaseName: "db4", containerName: "c4" },
           },
         },
-        ],
-      };
+      ];
 
-      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue(mockResponse);
+      (getDataTransferJobs as jest.Mock).mockResolvedValue(mockResponse);
       (CopyJobUtils.formatUTCDateTime as jest.Mock).mockReturnValue({
         formattedDateTime: "1/1/2025, 10:00:00 AM",
         timestamp: 1704106800000,
@@ -293,8 +289,7 @@ describe("CopyJobActions", () => {
     });
 
     it("should calculate completion percentage correctly", async () => {
-      const mockResponse = {
-        value: [
+      const mockResponse = [
         {
           properties: {
             jobName: "job-1",
@@ -308,10 +303,9 @@ describe("CopyJobActions", () => {
             destination: { component: "CosmosDBSql", databaseName: "db2", containerName: "c2" },
           },
         },
-        ],
-      };
+      ];
 
-      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue(mockResponse);
+      (getDataTransferJobs as jest.Mock).mockResolvedValue(mockResponse);
       (CopyJobUtils.formatUTCDateTime as jest.Mock).mockReturnValue({
         formattedDateTime: "1/1/2025, 10:00:00 AM",
         timestamp: 1704106800000,
@@ -325,8 +319,7 @@ describe("CopyJobActions", () => {
     });
 
     it("should handle zero total count gracefully", async () => {
-      const mockResponse = {
-        value: [
+      const mockResponse = [
         {
           properties: {
             jobName: "job-1",
@@ -340,10 +333,9 @@ describe("CopyJobActions", () => {
             destination: { component: "CosmosDBSql", databaseName: "db2", containerName: "c2" },
           },
         },
-        ],
-      };
+      ];
 
-      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue(mockResponse);
+      (getDataTransferJobs as jest.Mock).mockResolvedValue(mockResponse);
       (CopyJobUtils.formatUTCDateTime as jest.Mock).mockReturnValue({
         formattedDateTime: "1/1/2025, 10:00:00 AM",
         timestamp: 1704106800000,
@@ -361,8 +353,7 @@ describe("CopyJobActions", () => {
         message: "Error message line 1\r\n\r\nError message line 2",
         code: "ErrorCode123",
       };
-      const mockResponse = {
-        value: [
+      const mockResponse = [
         {
           properties: {
             jobName: "failed-job",
@@ -377,10 +368,9 @@ describe("CopyJobActions", () => {
             error: mockError,
           },
         },
-        ],
-      };
+      ];
 
-      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue(mockResponse);
+      (getDataTransferJobs as jest.Mock).mockResolvedValue(mockResponse);
       (CopyJobUtils.formatUTCDateTime as jest.Mock).mockReturnValue({
         formattedDateTime: "1/1/2025, 10:00:00 AM",
         timestamp: 1704106800000,
@@ -408,7 +398,7 @@ describe("CopyJobActions", () => {
       };
       (global as any).AbortController = jest.fn(() => mockAbortController);
 
-      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue({ value: [] });
+      (getDataTransferJobs as jest.Mock).mockResolvedValue([]);
 
       getCopyJobs();
       expect(mockAbortController.abort).not.toHaveBeenCalled();
@@ -418,9 +408,7 @@ describe("CopyJobActions", () => {
     });
 
     it("should throw error for invalid response format", async () => {
-      (dataTransferService.listByDatabaseAccount as jest.Mock).mockResolvedValue({
-        value: "not-an-array",
-      });
+      (getDataTransferJobs as jest.Mock).mockResolvedValue("not-an-array");
 
       await expect(getCopyJobs()).rejects.toThrow("Invalid migration job status response: Expected an array of jobs.");
     });
@@ -430,16 +418,16 @@ describe("CopyJobActions", () => {
         message: "Aborted",
         content: JSON.stringify({ message: "signal is aborted without reason" }),
       };
-      (dataTransferService.listByDatabaseAccount as jest.Mock).mockRejectedValue(abortError);
+      (getDataTransferJobs as jest.Mock).mockRejectedValue(abortError);
 
       await expect(getCopyJobs()).rejects.toMatchObject({
-        message: expect.stringContaining("Please wait for the current fetch request to complete"),
+        message: expect.stringContaining("Previous copy job request was cancelled."),
       });
     });
 
     it("should handle generic errors", async () => {
       const genericError = new Error("Network error");
-      (dataTransferService.listByDatabaseAccount as jest.Mock).mockRejectedValue(genericError);
+      (getDataTransferJobs as jest.Mock).mockRejectedValue(genericError);
 
       await expect(getCopyJobs()).rejects.toThrow("Network error");
     });

src/Explorer/ContainerCopy/Actions/CopyJobActions.tsx

@@ -1,13 +1,13 @@
 import Explorer from "Explorer/Explorer";
 import React from "react";
 import { userContext } from "UserContext";
+import { getDataTransferJobs } from "../../../Common/dataAccess/dataTransfers";
 import { logError } from "../../../Common/Logger";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import {
   cancel,
   complete,
   create,
-  listByDatabaseAccount,
   pause,
   resume,
 } from "../../../Utils/arm/generatedClients/dataTransferService/dataTransferJobs";
@@ -63,14 +63,8 @@ export const getCopyJobs = async (): Promise<CopyJobType[]> => {
     const { subscriptionId, resourceGroup, accountName } = getAccountDetailsFromResourceId(
       userContext.databaseAccount?.id || "",
     );
-    const response = await listByDatabaseAccount(
-      subscriptionId,
-      resourceGroup,
-      accountName,
-      copyJobsAbortController.signal,
-    );
+    const jobs = await getDataTransferJobs(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.");
     }
@@ -124,8 +118,7 @@ export const getCopyJobs = async (): Promise<CopyJobType[]> => {
     const errorContent = JSON.stringify(error.content || error.message || error);
     if (errorContent.includes("signal is aborted without reason")) {
       throw {
-        message:
-          "Please wait for the current fetch request to complete. The previous copy job fetch request was aborted.",
+        message: "Previous copy job request was cancelled.",
       };
     } else {
       throw error;

src/Explorer/ContainerCopy/CommandBar/CopyJobCommandBar.test.tsx

@@ -39,7 +39,7 @@ describe("CopyJobCommandBar", () => {
 
     render(<CopyJobCommandBar explorer={mockExplorer} />);
 
-    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer);
+    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer, false);
     expect(mockGetCommandBarButtons).toHaveBeenCalledTimes(1);
   });
 
@@ -163,7 +163,7 @@ describe("CopyJobCommandBar", () => {
 
     render(<CopyJobCommandBar explorer={mockExplorer} />);
 
-    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer);
+    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer, false);
     expect(mockConvertButton.mock.calls[0][0]).toEqual(mockCommandButtonProps);
   });
 
@@ -175,11 +175,11 @@ describe("CopyJobCommandBar", () => {
     mockConvertButton.mockReturnValue([]);
 
     const { rerender } = render(<CopyJobCommandBar explorer={mockExplorer1} />);
-    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer1);
+    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer1, false);
 
     rerender(<CopyJobCommandBar explorer={mockExplorer2} />);
 
-    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer2);
+    expect(mockGetCommandBarButtons).toHaveBeenCalledWith(mockExplorer2, false);
     expect(mockGetCommandBarButtons).toHaveBeenCalledTimes(2);
   });
 });

src/Explorer/ContainerCopy/CommandBar/CopyJobCommandBar.tsx

@@ -1,24 +1,28 @@
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
 import React from "react";
-import { StyleConstants } from "../../../Common/StyleConstants";
+import { useThemeStore } from "../../../hooks/useTheme";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import * as CommandBarUtil from "../../Menus/CommandBar/CommandBarUtil";
+import { getThemeTokens } from "../../Theme/ThemeUtil";
 import { ContainerCopyProps } from "../Types/CopyJobTypes";
 import { getCommandBarButtons } from "./Utils";
 
-const backgroundColor = StyleConstants.BaseLight;
+const CopyJobCommandBar: React.FC<ContainerCopyProps> = ({ explorer }) => {
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
+  const themeTokens = getThemeTokens(isDarkMode);
+  const backgroundColor = themeTokens.colorNeutralBackground1;
+
   const rootStyle = {
     root: {
       backgroundColor: backgroundColor,
     },
   };
 
-const CopyJobCommandBar: React.FC<ContainerCopyProps> = ({ explorer }) => {
-  const commandBarItems: CommandButtonComponentProps[] = getCommandBarButtons(explorer);
+  const commandBarItems: CommandButtonComponentProps[] = getCommandBarButtons(explorer, isDarkMode);
   const controlButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(commandBarItems, backgroundColor);
 
   return (
-    <div className="commandBarContainer">
+    <div className="commandBarContainer" style={{ backgroundColor }}>
       <FluentCommandBar
         ariaLabel="Use left and right arrow keys to navigate between commands"
         styles={rootStyle}

src/Explorer/ContainerCopy/CommandBar/Utils.test.ts

@@ -50,7 +50,7 @@ describe("CommandBar Utils", () => {
 
   describe("getCommandBarButtons", () => {
     it("should return an array of command button props", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       expect(buttons).toBeDefined();
       expect(Array.isArray(buttons)).toBe(true);
@@ -58,7 +58,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should include create copy job button", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
       const createButton = buttons[0];
 
       expect(createButton).toBeDefined();
@@ -70,7 +70,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should include refresh button", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
       const refreshButton = buttons[1];
 
       expect(refreshButton).toBeDefined();
@@ -80,11 +80,11 @@ describe("CommandBar Utils", () => {
     });
 
     it("should include feedback button when platform is Portal", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
-      expect(buttons.length).toBe(3);
+      expect(buttons.length).toBe(4);
 
-      const feedbackButton = buttons[2];
+      const feedbackButton = buttons[3];
       expect(feedbackButton).toBeDefined();
       expect(feedbackButton.ariaLabel).toBe("Provide feedback on copy jobs");
       expect(feedbackButton.tooltipText).toBe("Feedback");
@@ -105,13 +105,13 @@ describe("CommandBar Utils", () => {
       }));
 
       const { getCommandBarButtons: getCommandBarButtonsEmulator } = await import("./Utils");
-      const buttons = getCommandBarButtonsEmulator(mockExplorer);
+      const buttons = getCommandBarButtonsEmulator(mockExplorer, false);
 
-      expect(buttons.length).toBe(2);
+      expect(buttons.length).toBe(3);
     });
 
     it("should call openCreateCopyJobPanel when create button is clicked", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
       const createButton = buttons[0];
 
       createButton.onCommandClick({} as React.SyntheticEvent);
@@ -121,7 +121,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should call refreshJobList when refresh button is clicked", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
       const refreshButton = buttons[1];
 
       refreshButton.onCommandClick({} as React.SyntheticEvent);
@@ -130,8 +130,8 @@ describe("CommandBar Utils", () => {
     });
 
     it("should call openContainerCopyFeedbackBlade when feedback button is clicked", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
-      const feedbackButton = buttons[2];
+      const buttons = getCommandBarButtons(mockExplorer, false);
+      const feedbackButton = buttons[3];
 
       feedbackButton.onCommandClick({} as React.SyntheticEvent);
 
@@ -139,7 +139,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should return buttons with correct icon sources", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       expect(buttons[0].iconSrc).toBeDefined();
       expect(buttons[0].iconAlt).toBe("Create Copy Job");
@@ -148,7 +148,10 @@ describe("CommandBar Utils", () => {
       expect(buttons[1].iconAlt).toBe("Refresh");
 
       expect(buttons[2].iconSrc).toBeDefined();
-      expect(buttons[2].iconAlt).toBe("Feedback");
+      expect(buttons[2].iconAlt).toBe("Dark Theme");
+
+      expect(buttons[3].iconSrc).toBeDefined();
+      expect(buttons[3].iconAlt).toBe("Feedback");
     });
 
     it("should handle null MonitorCopyJobsRefState ref gracefully", () => {
@@ -157,14 +160,14 @@ describe("CommandBar Utils", () => {
         return selector(state);
       });
 
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
       const refreshButton = buttons[1];
 
       expect(() => refreshButton.onCommandClick({} as React.SyntheticEvent)).not.toThrow();
     });
 
     it("should set hasPopup to false for all buttons", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button) => {
         expect(button.hasPopup).toBe(false);
@@ -172,7 +175,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should set commandButtonLabel to undefined for all buttons", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button) => {
         expect(button.commandButtonLabel).toBeUndefined();
@@ -180,7 +183,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should respect disabled state when provided", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button) => {
         expect(button.disabled).toBe(false);
@@ -188,7 +191,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should return CommandButtonComponentProps with all required properties", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button: CommandButtonComponentProps) => {
         expect(button).toHaveProperty("iconSrc");
@@ -202,18 +205,19 @@ describe("CommandBar Utils", () => {
       });
     });
 
-    it("should maintain button order: create, refresh, feedback", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+    it("should maintain button order: create, refresh, themeToggle, feedback", () => {
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       expect(buttons[0].tooltipText).toBe("Create Copy Job");
       expect(buttons[1].tooltipText).toBe("Refresh");
-      expect(buttons[2].tooltipText).toBe("Feedback");
+      expect(buttons[2].tooltipText).toBe("Dark Theme");
+      expect(buttons[3].tooltipText).toBe("Feedback");
     });
   });
 
   describe("Button click handlers", () => {
     it("should execute click handlers without errors", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button) => {
         expect(() => button.onCommandClick({} as React.SyntheticEvent)).not.toThrow();
@@ -221,7 +225,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should call correct action for each button", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons[0].onCommandClick({} as React.SyntheticEvent);
       expect(Actions.openCreateCopyJobPanel).toHaveBeenCalledWith(mockExplorer);
@@ -229,14 +233,14 @@ describe("CommandBar Utils", () => {
       buttons[1].onCommandClick({} as React.SyntheticEvent);
       expect(mockRefreshJobList).toHaveBeenCalled();
 
-      buttons[2].onCommandClick({} as React.SyntheticEvent);
+      buttons[3].onCommandClick({} as React.SyntheticEvent);
       expect(mockOpenContainerCopyFeedbackBlade).toHaveBeenCalled();
     });
   });
 
   describe("Accessibility", () => {
     it("should have aria labels for all buttons", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button) => {
         expect(button.ariaLabel).toBeDefined();
@@ -246,7 +250,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should have tooltip text for all buttons", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button) => {
         expect(button.tooltipText).toBeDefined();
@@ -256,7 +260,7 @@ describe("CommandBar Utils", () => {
     });
 
     it("should have icon alt text for all buttons", () => {
-      const buttons = getCommandBarButtons(mockExplorer);
+      const buttons = getCommandBarButtons(mockExplorer, false);
 
       buttons.forEach((button) => {
         expect(button.iconAlt).toBeDefined();

src/Explorer/ContainerCopy/CommandBar/Utils.ts

@@ -1,7 +1,10 @@
 import AddIcon from "../../../../images/Add.svg";
 import FeedbackIcon from "../../../../images/Feedback-Command.svg";
+import MoonIcon from "../../../../images/MoonIcon.svg";
 import RefreshIcon from "../../../../images/refresh-cosmos.svg";
+import SunIcon from "../../../../images/SunIcon.svg";
 import { configContext, Platform } from "../../../ConfigContext";
+import { useThemeStore } from "../../../hooks/useTheme";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import * as Actions from "../Actions/CopyJobActions";
@@ -9,7 +12,7 @@ import ContainerCopyMessages from "../ContainerCopyMessages";
 import { MonitorCopyJobsRefState } from "../MonitorCopyJobs/MonitorCopyJobRefState";
 import { CopyJobCommandBarBtnType } from "../Types/CopyJobTypes";
 
-function getCopyJobBtns(explorer: Explorer): CopyJobCommandBarBtnType[] {
+function getCopyJobBtns(explorer: Explorer, isDarkMode: boolean): CopyJobCommandBarBtnType[] {
   const monitorCopyJobsRef = MonitorCopyJobsRefState((state) => state.ref);
   const buttons: CopyJobCommandBarBtnType[] = [
     {
@@ -26,7 +29,15 @@ function getCopyJobBtns(explorer: Explorer): CopyJobCommandBarBtnType[] {
       ariaLabel: ContainerCopyMessages.refreshButtonAriaLabel,
       onClick: () => monitorCopyJobsRef?.refreshJobList(),
     },
+    {
+      key: "themeToggle",
+      iconSrc: isDarkMode ? SunIcon : MoonIcon,
+      label: isDarkMode ? "Light Theme" : "Dark Theme",
+      ariaLabel: isDarkMode ? "Switch to Light Theme" : "Switch to Dark Theme",
+      onClick: () => useThemeStore.getState().toggleTheme(),
+    },
   ];
+
   if (configContext.platform === Platform.Portal) {
     buttons.push({
       key: "feedback",
@@ -54,6 +65,6 @@ function btnMapper(config: CopyJobCommandBarBtnType): CommandButtonComponentProp
   };
 }
 
-export function getCommandBarButtons(explorer: Explorer): CommandButtonComponentProps[] {
-  return getCopyJobBtns(explorer).map(btnMapper);
+export function getCommandBarButtons(explorer: Explorer, isDarkMode: boolean): CommandButtonComponentProps[] {
+  return getCopyJobBtns(explorer, isDarkMode).map(btnMapper);
 }

src/Explorer/ContainerCopy/ContainerCopyMessages.ts

@@ -162,10 +162,10 @@ export default {
       viewDetails: "View Details",
     },
     Status: {
-      Pending: "Pending",
-      InProgress: "In Progress",
-      Running: "In Progress",
-      Partitioning: "In Progress",
+      Pending: "Queued",
+      InProgress: "Running",
+      Running: "Running",
+      Partitioning: "Running",
       Paused: "Paused",
       Completed: "Completed",
       Failed: "Failed",

src/Explorer/ContainerCopy/Context/CopyJobContext.test.tsx

@@ -59,15 +59,8 @@ describe("CopyJobContext", () => {
         jobName: "",
         migrationType: CopyJobMigrationType.Offline,
         source: {
-          subscription: {
-            subscriptionId: "test-subscription-id",
-          },
-          account: {
-            id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDB/databaseAccounts/test-account",
-            name: "test-account",
-            location: "East US",
-            kind: "GlobalDocumentDB",
-          },
+          subscription: null,
+          account: null,
           databaseId: "",
           containerId: "",
         },
@@ -605,8 +598,8 @@ describe("CopyJobContext", () => {
         </CopyJobContextProvider>,
       );
 
-      expect(contextValue.copyJobState.source.subscription.subscriptionId).toBe("test-subscription-id");
-      expect(contextValue.copyJobState.source.account.name).toBe("test-account");
+      expect(contextValue.copyJobState.source?.subscription?.subscriptionId).toBeUndefined();
+      expect(contextValue.copyJobState.source?.account?.name).toBeUndefined();
     });
 
     it("should initialize target with userContext values", () => {

src/Explorer/ContainerCopy/Context/CopyJobContext.tsx

@@ -1,5 +1,4 @@
 import Explorer from "Explorer/Explorer";
-import { Subscription } from "Contracts/DataModels";
 import React from "react";
 import { userContext } from "UserContext";
 import { CopyJobMigrationType } from "../Enums/CopyJobEnums";
@@ -24,10 +23,8 @@ const getInitialCopyJobState = (): CopyJobContextState => {
     jobName: "",
     migrationType: CopyJobMigrationType.Offline,
     source: {
-      subscription: {
-        subscriptionId: userContext.subscriptionId || "",
-      } as Subscription,
-      account: userContext.databaseAccount || null,
+      subscription: null,
+      account: null,
       databaseId: "",
       containerId: "",
     },

src/Explorer/ContainerCopy/CopyJobUtils.ts

@@ -147,7 +147,7 @@ export function isEqual(prevJobs: CopyJobType[], newJobs: CopyJobType[]): boolea
 }
 
 const truncateLength = 5;
-const truncateName = (name: string, length: number = truncateLength): string => {
+export const truncateName = (name: string, length: number = truncateLength): string => {
   return name.length <= length ? name : name.slice(0, length);
 };
 

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

@@ -12,7 +12,12 @@ import useToggle from "./hooks/useToggle";
 const managedIdentityTooltip = (
   <Text>
     {ContainerCopyMessages.addManagedIdentity.tooltip.content} &nbsp;
-    <Link href={ContainerCopyMessages.addManagedIdentity.tooltip.href} target="_blank" rel="noopener noreferrer">
+    <Link
+      style={{ color: "var(--colorBrandForeground1)" }}
+      href={ContainerCopyMessages.addManagedIdentity.tooltip.href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {ContainerCopyMessages.addManagedIdentity.tooltip.hrefText}
     </Link>
   </Text>
@@ -26,7 +31,7 @@ const AddManagedIdentity: React.FC<AddManagedIdentityProps> = () => {
 
   return (
     <Stack className="addManagedIdentityContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
-      <Text>
+      <Text className="themeText">
         {ContainerCopyMessages.addManagedIdentity.description}&ensp;
         <Link href={ContainerCopyMessages.addManagedIdentity.descriptionHref} target="_blank" rel="noopener noreferrer">
           {ContainerCopyMessages.addManagedIdentity.descriptionHrefText}
@@ -35,6 +40,7 @@ const AddManagedIdentity: React.FC<AddManagedIdentityProps> = () => {
         <InfoTooltip content={managedIdentityTooltip} />
       </Text>
       <Toggle
+        data-test="btn-toggle"
         checked={systemAssigned}
         onText={ContainerCopyMessages.toggleBtn.onText}
         offText={ContainerCopyMessages.toggleBtn.offText}

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

@@ -13,7 +13,12 @@ import useToggle from "./hooks/useToggle";
 const TooltipContent = (
   <Text>
     {ContainerCopyMessages.readPermissionAssigned.tooltip.content} &nbsp;
-    <Link href={ContainerCopyMessages.readPermissionAssigned.tooltip.href} target="_blank" rel="noopener noreferrer">
+    <Link
+      style={{ color: "var(--colorBrandForeground1)" }}
+      href={ContainerCopyMessages.readPermissionAssigned.tooltip.href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {ContainerCopyMessages.readPermissionAssigned.tooltip.hrefText}
     </Link>
   </Text>
@@ -65,6 +70,7 @@ const AddReadPermissionToDefaultIdentity: React.FC<AddReadPermissionToDefaultIde
         <InfoTooltip content={TooltipContent} />
       </Text>
       <Toggle
+        data-test="btn-toggle"
         checked={readPermissionAssigned}
         onText={ContainerCopyMessages.toggleBtn.onText}
         offText={ContainerCopyMessages.toggleBtn.offText}

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

@@ -12,7 +12,7 @@ import { useCopyJobPrerequisitesCache } from "../../Utils/useCopyJobPrerequisite
 import usePermissionSections, { PermissionGroupConfig, PermissionSectionConfig } from "./hooks/usePermissionsSection";
 
 const PermissionSection: React.FC<PermissionSectionConfig> = ({ id, title, Component, completed, disabled }) => (
-  <AccordionItem key={id} value={id} disabled={disabled}>
+  <AccordionItem key={id} value={id} disabled={disabled} data-test="accordion-item">
     <AccordionHeader className="accordionHeader">
       <Text className="accordionHeaderText" variant="medium">
         {title}
@@ -25,13 +25,13 @@ const PermissionSection: React.FC<PermissionSectionConfig> = ({ id, title, Compo
         height={completed ? 20 : 24}
       />
     </AccordionHeader>
-    <AccordionPanel aria-disabled={disabled} className="accordionPanel">
+    <AccordionPanel aria-disabled={disabled} className="accordionPanel" data-test="accordion-panel">
       <Component />
     </AccordionPanel>
   </AccordionItem>
 );
 
-const PermissionGroup: React.FC<PermissionGroupConfig> = ({ title, description, sections }) => {
+const PermissionGroup: React.FC<PermissionGroupConfig> = ({ id, title, description, sections }) => {
   const [openItems, setOpenItems] = React.useState<string[]>([]);
 
   useEffect(() => {
@@ -44,11 +44,12 @@ const PermissionGroup: React.FC<PermissionGroupConfig> = ({ title, description,
 
   return (
     <Stack
+      data-test={`permission-group-container-${id}`}
       tokens={{ childrenGap: 15 }}
       styles={{
         root: {
-          background: "#fafafa",
-          border: "1px solid #e1e1e1",
+          background: "var(--colorNeutralBackground2)",
+          border: "1px solid var(--colorNeutralStroke1)",
           borderRadius: 8,
           padding: 16,
           boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
@@ -56,11 +57,11 @@ const PermissionGroup: React.FC<PermissionGroupConfig> = ({ title, description,
       }}
     >
       <Stack tokens={{ childrenGap: 5 }}>
-        <Text variant="medium" style={{ fontWeight: 600 }}>
+        <Text variant="medium" style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>
           {title}
         </Text>
         {description && (
-          <Text variant="small" styles={{ root: { color: "#605E5C" } }}>
+          <Text variant="small" styles={{ root: { color: "var(--colorNeutralForeground2)" } }}>
             {description}
           </Text>
         )}
@@ -99,8 +100,12 @@ const AssignPermissions = () => {
   }, []);
 
   return (
-    <Stack className="assignPermissionsContainer" tokens={{ childrenGap: 20 }}>
-      <Text variant="medium">
+    <Stack
+      data-test="Panel:AssignPermissionsContainer"
+      className="assignPermissionsContainer"
+      tokens={{ childrenGap: 20 }}
+    >
+      <Text variant="medium" style={{ color: "var(--colorNeutralForeground1)" }}>
         {isSameAccount && copyJobState.migrationType === CopyJobMigrationType.Online
           ? ContainerCopyMessages.assignPermissions.intraAccountOnlineDescription(
               copyJobState?.source?.account?.name || "",

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

@@ -12,7 +12,12 @@ import useToggle from "./hooks/useToggle";
 const managedIdentityTooltip = (
   <Text>
     {ContainerCopyMessages.defaultManagedIdentity.tooltip.content} &nbsp;
-    <Link href={ContainerCopyMessages.defaultManagedIdentity.tooltip.href} target="_blank" rel="noopener noreferrer">
+    <Link
+      style={{ color: "var(--colorBrandForeground1)" }}
+      href={ContainerCopyMessages.defaultManagedIdentity.tooltip.href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {ContainerCopyMessages.defaultManagedIdentity.tooltip.hrefText}
     </Link>
   </Text>
@@ -31,6 +36,7 @@ const DefaultManagedIdentity: React.FC<AddManagedIdentityProps> = () => {
         <InfoTooltip content={managedIdentityTooltip} />
       </div>
       <Toggle
+        data-test="btn-toggle"
         checked={defaultSystemAssigned}
         onText={ContainerCopyMessages.toggleBtn.onText}
         offText={ContainerCopyMessages.toggleBtn.offText}

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

@@ -13,7 +13,12 @@ import InfoTooltip from "../Components/InfoTooltip";
 const tooltipContent = (
   <Text>
     {ContainerCopyMessages.pointInTimeRestore.tooltip.content} &nbsp;
-    <Link href={ContainerCopyMessages.pointInTimeRestore.tooltip.href} target="_blank" rel="noopener noreferrer">
+    <Link
+      style={{ color: "var(--colorBrandForeground1)" }}
+      href={ContainerCopyMessages.pointInTimeRestore.tooltip.href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {ContainerCopyMessages.pointInTimeRestore.tooltip.hrefText}
     </Link>
   </Text>
@@ -127,6 +132,7 @@ const PointInTimeRestore: React.FC = () => {
       <Stack.Item>
         {showRefreshButton ? (
           <PrimaryButton
+            data-test="pointInTimeRestore:RefreshBtn"
             className="fullWidth"
             text={ContainerCopyMessages.refreshButtonLabel}
             iconProps={{ iconName: "Refresh" }}
@@ -134,6 +140,7 @@ const PointInTimeRestore: React.FC = () => {
           />
         ) : (
           <PrimaryButton
+            data-test="pointInTimeRestore:PrimaryBtn"
             className="fullWidth"
             text={loading ? "" : ContainerCopyMessages.pointInTimeRestore.buttonText}
             {...(loading ? { iconProps: { iconName: "SyncStatusSolid" } } : {})}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AddManagedIdentity.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`AddManagedIdentity Snapshot Tests renders initial state correctly 1`] =
   class="ms-Stack addManagedIdentityContainer css-109"
 >
   <span
-    class="css-110"
+    class="themeText css-110"
   >
     A system-assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. Once enabled, 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.
      
@@ -67,6 +67,7 @@ exports[`AddManagedIdentity Snapshot Tests renders initial state correctly 1`] =
         class="ms-Toggle-background pill-117"
         data-is-focusable="true"
         data-ktp-target="true"
+        data-test="btn-toggle"
         id="Toggle1"
         role="switch"
         type="button"
@@ -92,7 +93,7 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
   class="ms-Stack addManagedIdentityContainer css-109"
 >
   <span
-    class="css-110"
+    class="themeText css-110"
   >
     A system-assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. Once enabled, 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.
      
@@ -154,6 +155,7 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
         class="ms-Toggle-background pill-121"
         data-is-focusable="true"
         data-ktp-target="true"
+        data-test="btn-toggle"
         id="Toggle11"
         role="switch"
         type="button"
@@ -173,10 +175,12 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
   </div>
   <div
     class="ms-Stack popover-container foreground loading css-123"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <div
       class="ms-Overlay root-135"
+      data-test="loading-overlay"
     >
       <div
         class="ms-Spinner root-137"
@@ -192,13 +196,13 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
       </div>
     </div>
     <span
-      class="css-124"
+      class="themeText css-124"
       style="font-weight: 600;"
     >
       Enable system assigned managed identity
     </span>
     <span
-      class="css-110"
+      class="themeText css-110"
     >
       Enable system-assigned managed identity on the test-target-account. To confirm, click the "Yes" button.
     </span>
@@ -261,7 +265,7 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
   class="ms-Stack addManagedIdentityContainer css-109"
 >
   <span
-    class="css-110"
+    class="themeText css-110"
   >
     A system-assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. Once enabled, 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.
      
@@ -323,6 +327,7 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
         class="ms-Toggle-background pill-121"
         data-is-focusable="true"
         data-ktp-target="true"
+        data-test="btn-toggle"
         id="Toggle3"
         role="switch"
         type="button"
@@ -342,16 +347,17 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
   </div>
   <div
     class="ms-Stack popover-container foreground css-123"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="css-124"
+      class="themeText css-124"
       style="font-weight: 600;"
     >
       Enable system assigned managed identity
     </span>
     <span
-      class="css-110"
+      class="themeText css-110"
     >
       Enable system-assigned managed identity on the test-target-account. To confirm, click the "Yes" button.
     </span>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AddReadPermissionToDefaultIdentity.test.tsx.snap

@@ -41,6 +41,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Edge Cases should handle m
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle17"
           role="switch"
           type="button"
@@ -103,6 +104,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Edge Cases should handle m
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle16"
           role="switch"
           type="button"
@@ -165,6 +167,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle3"
           role="switch"
           type="button"
@@ -227,6 +230,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-119"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle1"
           role="switch"
           type="button"
@@ -314,6 +318,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle0"
           role="switch"
           type="button"
@@ -376,6 +381,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle2"
           role="switch"
           type="button"

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

@@ -4,6 +4,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -15,6 +16,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -36,6 +38,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -85,6 +88,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -134,6 +138,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -142,6 +147,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -201,6 +207,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -212,6 +219,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -233,6 +241,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -282,6 +291,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -331,6 +341,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -339,6 +350,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -398,6 +410,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -409,6 +422,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -430,6 +444,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -479,6 +494,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -528,6 +544,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -536,6 +553,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -595,6 +613,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -606,6 +625,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -627,6 +647,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -676,6 +697,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -725,6 +747,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -733,6 +756,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -792,6 +816,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -803,6 +828,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-crossAccountConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -824,6 +850,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -875,6 +902,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
       </div>
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-onlineConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -896,6 +924,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -945,6 +974,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div
                 data-testid="online-copy-enabled"
@@ -964,6 +994,7 @@ exports[`AssignPermissions Component Permission Groups should render online migr
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -975,6 +1006,7 @@ exports[`AssignPermissions Component Permission Groups should render online migr
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-onlineConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -996,6 +1028,7 @@ exports[`AssignPermissions Component Permission Groups should render online migr
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1045,6 +1078,7 @@ exports[`AssignPermissions Component Permission Groups should render online migr
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1094,6 +1128,7 @@ exports[`AssignPermissions Component Permission Groups should render online migr
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div
                 data-testid="online-copy-enabled"
@@ -1113,6 +1148,7 @@ exports[`AssignPermissions Component Permission Groups should render permission
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -1124,6 +1160,7 @@ exports[`AssignPermissions Component Permission Groups should render permission
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-crossAccountConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -1145,6 +1182,7 @@ exports[`AssignPermissions Component Permission Groups should render permission
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1194,6 +1232,7 @@ exports[`AssignPermissions Component Permission Groups should render permission
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1243,6 +1282,7 @@ exports[`AssignPermissions Component Permission Groups should render permission
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div
                 data-testid="add-read-permission"
@@ -1262,6 +1302,7 @@ exports[`AssignPermissions Component Rendering should render without crashing wi
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -1283,6 +1324,7 @@ exports[`AssignPermissions Component Rendering should render without crashing wi
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/DefaultManagedIdentity.test.tsx.snap

@@ -41,6 +41,7 @@ exports[`DefaultManagedIdentity Edge Cases should handle missing account name gr
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle14"
           role="switch"
           type="button"
@@ -103,6 +104,7 @@ exports[`DefaultManagedIdentity Edge Cases should handle null account 1`] = `
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle15"
           role="switch"
           type="button"
@@ -165,6 +167,7 @@ exports[`DefaultManagedIdentity Loading States should render loading state snaps
           class="ms-Toggle-background pill-119"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle10"
           role="switch"
           type="button"
@@ -256,6 +259,7 @@ exports[`DefaultManagedIdentity Rendering should render correctly with default s
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle0"
           role="switch"
           type="button"
@@ -318,6 +322,7 @@ exports[`DefaultManagedIdentity Toggle Interactions should render toggle with ch
           class="ms-Toggle-background pill-119"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle7"
           role="switch"
           type="button"

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/PointInTimeRestore.test.tsx.snap

@@ -56,6 +56,7 @@ exports[`PointInTimeRestore Initial Render should render correctly with default
       <button
         class="ms-Button ms-Button--primary fullWidth root-115"
         data-is-focusable="true"
+        data-test="pointInTimeRestore:PrimaryBtn"
         type="button"
       >
         <span
@@ -131,6 +132,7 @@ exports[`PointInTimeRestore Initial Render should render with empty account name
       <button
         class="ms-Button ms-Button--primary fullWidth root-115"
         data-is-focusable="true"
+        data-test="pointInTimeRestore:PrimaryBtn"
         type="button"
       >
         <span
@@ -161,6 +163,7 @@ exports[`PointInTimeRestore Snapshots should match snapshot in loading state 1`]
   >
     <div
       class="ms-Overlay root-123"
+      data-test="loading-overlay"
     >
       <div
         class="ms-Spinner root-125"
@@ -223,6 +226,7 @@ exports[`PointInTimeRestore Snapshots should match snapshot in loading state 1`]
         aria-disabled="true"
         class="ms-Button ms-Button--primary is-disabled fullWidth root-128"
         data-is-focusable="false"
+        data-test="pointInTimeRestore:PrimaryBtn"
         disabled=""
         type="button"
       >
@@ -301,6 +305,7 @@ exports[`PointInTimeRestore Snapshots should match snapshot with refresh button
       <button
         class="ms-Button ms-Button--primary fullWidth root-115"
         data-is-focusable="true"
+        data-test="pointInTimeRestore:RefreshBtn"
         type="button"
       >
         <span

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

@@ -19,9 +19,21 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
   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} />
+    <PrimaryButton
+      data-test="copy-job-primary"
+      text={primaryBtnText}
+      onClick={onPrimary}
+      allowDisabledFocus
+      disabled={isPrimaryDisabled}
+    />
+    <DefaultButton
+      data-test="copy-job-previous"
+      text="Previous"
+      onClick={onPrevious}
+      allowDisabledFocus
+      disabled={isPreviousDisabled}
+    />
+    <DefaultButton data-test="copy-job-cancel" text="Cancel" onClick={onCancel} />
   </Stack>
 );
 

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

@@ -17,15 +17,16 @@ const PopoverContainer: React.FC<PopoverContainerProps> = React.memo(
   ({ isLoading = false, title, children, onPrimary, onCancel }) => {
     return (
       <Stack
+        data-test="popover-container"
         className={`popover-container foreground ${isLoading ? "loading" : ""}`}
         tokens={{ childrenGap: 20 }}
         style={{ maxWidth: 450 }}
       >
         <LoadingOverlay isLoading={isLoading} label={ContainerCopyMessages.popoverOverlaySpinnerLabel} />
-        <Text variant="mediumPlus" style={{ fontWeight: 600 }}>
+        <Text variant="mediumPlus" className="themeText" style={{ fontWeight: 600 }}>
           {title}
         </Text>
-        <Text>{children}</Text>
+        <Text className="themeText">{children}</Text>
         <Stack horizontal tokens={{ childrenGap: 20 }}>
           <PrimaryButton text={"Yes"} onClick={onPrimary} disabled={isLoading} />
           <DefaultButton text="No" onClick={onCancel} disabled={isLoading} />

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

@@ -4,14 +4,15 @@ exports[`PopoverMessage Component Edge Cases should handle empty string title 1`
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     />
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         Test content
@@ -71,10 +72,11 @@ exports[`PopoverMessage Component Edge Cases should handle null children 1`] = `
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Test Title
@@ -133,10 +135,11 @@ exports[`PopoverMessage Component Edge Cases should handle undefined children 1`
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Test Title
@@ -195,16 +198,17 @@ exports[`PopoverMessage Component Edge Cases should handle very long title 1`] =
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       This is a very long title that might cause layout issues or text wrapping in the popover component
     </span>
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         Test content
@@ -266,16 +270,17 @@ exports[`PopoverMessage Component Rendering should render correctly when visible
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Test Title
     </span>
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         Test content
@@ -335,16 +340,17 @@ exports[`PopoverMessage Component Rendering should render correctly with differe
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Test Title
     </span>
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         <p>
@@ -409,16 +415,17 @@ exports[`PopoverMessage Component Rendering should render correctly with differe
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Custom Title
     </span>
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         Test content
@@ -478,6 +485,7 @@ exports[`PopoverMessage Component Rendering should render correctly with loading
 <div>
   <div
     class="ms-Stack popover-container foreground loading css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <div
@@ -485,13 +493,13 @@ exports[`PopoverMessage Component Rendering should render correctly with loading
       data-testid="loading-overlay"
     />
     <span
-      class="css-110"
+      class="themeText css-110"
       style="font-weight: 600;"
     >
       Test Title
     </span>
     <span
-      class="css-111"
+      class="themeText css-111"
     >
       <div>
         Test content

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

@@ -41,7 +41,7 @@ const AddCollectionPanelWrapper: React.FunctionComponent<AddCollectionPanelWrapp
   return (
     <Stack className="addCollectionPanelWrapper">
       <Stack.Item className="addCollectionPanelHeader">
-        <Text>{ContainerCopyMessages.createNewContainerSubHeading}</Text>
+        <Text className="themeText">{ContainerCopyMessages.createNewContainerSubHeading}</Text>
       </Stack.Item>
       <Stack.Item className="addCollectionPanelBody">
         <AddCollectionPanel explorer={explorer} isCopyJobFlow={true} onSubmitSuccess={handleAddCollectionSuccess} />

src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateContainer/__snapshots__/AddCollectionPanelWrapper.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`AddCollectionPanelWrapper Component Rendering should match snapshot 1`]
       class="ms-StackItem addCollectionPanelHeader css-110"
     >
       <span
-        class="css-111"
+        class="themeText css-111"
       >
         Select the properties for your container.
       </span>
@@ -50,7 +50,7 @@ exports[`AddCollectionPanelWrapper Component Rendering should match snapshot wit
       class="ms-StackItem addCollectionPanelHeader css-110"
     >
       <span
-        class="css-111"
+        class="themeText css-111"
       >
         Select the properties for your container.
       </span>
@@ -91,7 +91,7 @@ exports[`AddCollectionPanelWrapper Component Rendering should match snapshot wit
       class="ms-StackItem addCollectionPanelHeader css-110"
     >
       <span
-        class="css-111"
+        class="themeText css-111"
       >
         Select the properties for your container.
       </span>
@@ -132,7 +132,7 @@ exports[`AddCollectionPanelWrapper Component Rendering should match snapshot wit
       class="ms-StackItem addCollectionPanelHeader css-110"
     >
       <span
-        class="css-111"
+        class="themeText css-111"
       >
         Select the properties for your container.
       </span>

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

@@ -22,6 +22,7 @@ const CreateCopyJobScreens: React.FC = () => {
       <Stack.Item className="createCopyJobScreensContent">
         {contextError && (
           <MessageBar
+            data-test="Panel:ErrorContainer"
             className="createCopyJobErrorMessageBar"
             messageBarType={MessageBarType.blocked}
             isMultiline={false}

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

@@ -31,17 +31,21 @@ const PreviewCopyJob: React.FC = () => {
     }));
   };
   return (
-    <Stack tokens={{ childrenGap: 20 }} className="previewCopyJobContainer">
+    <Stack tokens={{ childrenGap: 20 }} className="previewCopyJobContainer" data-test="Panel:PreviewCopyJob">
       <FieldRow label={ContainerCopyMessages.jobNameLabel}>
-        <TextField value={jobName} onChange={onJobNameChange} />
+        <TextField data-test="job-name-textfield" value={jobName} onChange={onJobNameChange} />
       </FieldRow>
       <Stack>
-        <Text className="bold">{ContainerCopyMessages.sourceSubscriptionLabel}</Text>
-        <Text>{copyJobState.source?.subscription?.displayName}</Text>
+        <Text className="bold themeText">{ContainerCopyMessages.sourceSubscriptionLabel}</Text>
+        <Text data-test="source-subscription-name" className="themeText">
+          {copyJobState.source?.subscription?.displayName}
+        </Text>
       </Stack>
       <Stack>
-        <Text className="bold">{ContainerCopyMessages.sourceAccountLabel}</Text>
-        <Text>{copyJobState.source?.account?.name}</Text>
+        <Text className="bold themeText">{ContainerCopyMessages.sourceAccountLabel}</Text>
+        <Text data-test="source-account-name" className="themeText">
+          {copyJobState.source?.account?.name}
+        </Text>
       </Stack>
       <Stack>
         <DetailsList

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

@@ -3,6 +3,7 @@
 exports[`PreviewCopyJob should handle special characters in database and container names 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -32,6 +33,7 @@ exports[`PreviewCopyJob should handle special characters in database and contain
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField84"
               type="text"
               value="job-with@special#chars_123"
@@ -45,12 +47,13 @@ exports[`PreviewCopyJob should handle special characters in database and contain
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -59,12 +62,13 @@ exports[`PreviewCopyJob should handle special characters in database and contain
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -321,6 +325,7 @@ exports[`PreviewCopyJob should handle special characters in database and contain
 exports[`PreviewCopyJob should render component with cross-subscription setup 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -350,6 +355,7 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField96"
               type="text"
               value=""
@@ -363,12 +369,13 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -377,12 +384,13 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -639,6 +647,7 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
 exports[`PreviewCopyJob should render with default state and empty job name 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -668,6 +677,7 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField0"
               type="text"
               value=""
@@ -681,12 +691,13 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -695,12 +706,13 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -957,6 +969,7 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
 exports[`PreviewCopyJob should render with long subscription and account names 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -986,6 +999,7 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField60"
               type="text"
               value=""
@@ -999,12 +1013,13 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-subscription-name"
     >
       This is a very long subscription name that might cause display issues if not handled properly
     </span>
@@ -1013,12 +1028,13 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-account-name"
     >
       this-is-a-very-long-database-account-name-that-might-cause-display-issues
     </span>
@@ -1275,6 +1291,7 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
 exports[`PreviewCopyJob should render with missing source account information 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -1304,6 +1321,7 @@ exports[`PreviewCopyJob should render with missing source account information 1`
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField36"
               type="text"
               value=""
@@ -1317,12 +1335,13 @@ exports[`PreviewCopyJob should render with missing source account information 1`
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -1331,7 +1350,7 @@ exports[`PreviewCopyJob should render with missing source account information 1`
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
@@ -1588,6 +1607,7 @@ exports[`PreviewCopyJob should render with missing source account information 1`
 exports[`PreviewCopyJob should render with missing source subscription information 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -1617,6 +1637,7 @@ exports[`PreviewCopyJob should render with missing source subscription informati
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField24"
               type="text"
               value=""
@@ -1630,7 +1651,7 @@ exports[`PreviewCopyJob should render with missing source subscription informati
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
@@ -1639,12 +1660,13 @@ exports[`PreviewCopyJob should render with missing source subscription informati
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -1901,6 +1923,7 @@ exports[`PreviewCopyJob should render with missing source subscription informati
 exports[`PreviewCopyJob should render with online migration type 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -1930,6 +1953,7 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField72"
               type="text"
               value="online-migration-job"
@@ -1943,12 +1967,13 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -1957,12 +1982,13 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -2219,6 +2245,7 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
 exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -2248,6 +2275,7 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField12"
               type="text"
               value="custom-job-name-123"
@@ -2261,12 +2289,13 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -2275,12 +2304,13 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -2537,6 +2567,7 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
 exports[`PreviewCopyJob should render with undefined database and container names 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -2566,6 +2597,7 @@ exports[`PreviewCopyJob should render with undefined database and container name
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField48"
               type="text"
               value=""
@@ -2579,12 +2611,13 @@ exports[`PreviewCopyJob should render with undefined database and container name
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source subscription
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -2593,12 +2626,13 @@ exports[`PreviewCopyJob should render with undefined database and container name
     class="ms-Stack css-124"
   >
     <span
-      class="bold css-125"
+      class="bold themeText css-125"
     >
       Source account
     </span>
     <span
-      class="css-125"
+      class="themeText css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>

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

@@ -1,219 +1,424 @@
 import "@testing-library/jest-dom";
-import { render } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import React from "react";
-import { DropdownOptionType } from "../../../../Types/CopyJobTypes";
-import { AccountDropdown } from "./AccountDropdown";
+import { configContext, Platform } from "../../../../../../ConfigContext";
+import { DatabaseAccount } from "../../../../../../Contracts/DataModels";
+import * as useDatabaseAccountsHook from "../../../../../../hooks/useDatabaseAccounts";
+import { apiType, userContext } from "../../../../../../UserContext";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+import { CopyJobContext } from "../../../../Context/CopyJobContext";
+import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
+import { CopyJobContextProviderType, CopyJobContextState } from "../../../../Types/CopyJobTypes";
+import { AccountDropdown, normalizeAccountId } from "./AccountDropdown";
+
+jest.mock("../../../../../../hooks/useDatabaseAccounts");
+jest.mock("../../../../../../UserContext", () => ({
+  userContext: {
+    databaseAccount: null as DatabaseAccount | null,
+  },
+  apiType: jest.fn(),
+}));
+jest.mock("../../../../../../ConfigContext", () => ({
+  configContext: {
+    platform: "Portal",
+  },
+  Platform: {
+    Portal: "Portal",
+    Hosted: "Hosted",
+  },
+}));
+
+const mockUseDatabaseAccounts = useDatabaseAccountsHook.useDatabaseAccounts as jest.MockedFunction<
+  typeof useDatabaseAccountsHook.useDatabaseAccounts
+>;
 
 describe("AccountDropdown", () => {
-  const mockOnChange = jest.fn();
+  const mockSetCopyJobState = jest.fn();
+  const mockCopyJobState = {
+    jobName: "",
+    migrationType: CopyJobMigrationType.Offline,
+    source: {
+      subscription: {
+        subscriptionId: "test-subscription-id",
+        displayName: "Test Subscription",
+      },
+      account: null,
+      databaseId: "",
+      containerId: "",
+    },
+    target: {
+      subscriptionId: "",
+      account: null,
+      databaseId: "",
+      containerId: "",
+    },
+    sourceReadAccessFromTarget: false,
+  } as CopyJobContextState;
 
-  const mockAccountOptions: DropdownOptionType[] = [
-    {
-      key: "account-1",
-      text: "Development Account",
-      data: {
-        id: "account-1",
-        name: "Development Account",
+  const mockCopyJobContextValue = {
+    copyJobState: mockCopyJobState,
+    setCopyJobState: mockSetCopyJobState,
+    flow: null,
+    setFlow: jest.fn(),
+    contextError: null,
+    setContextError: jest.fn(),
+    resetCopyJobState: jest.fn(),
+  } as CopyJobContextProviderType;
+
+  const mockDatabaseAccount1: DatabaseAccount = {
+    id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/account1",
+    name: "test-account-1",
+    kind: "GlobalDocumentDB",
     location: "East US",
-        resourceGroup: "dev-rg",
-        kind: "GlobalDocumentDB",
+    type: "Microsoft.DocumentDB/databaseAccounts",
+    tags: {},
     properties: {
-          documentEndpoint: "https://dev-account.documents.azure.com:443/",
-          provisioningState: "Succeeded",
-          consistencyPolicy: {
-            defaultConsistencyLevel: "Session",
+      documentEndpoint: "https://account1.documents.azure.com:443/",
+      capabilities: [],
+      enableMultipleWriteLocations: false,
     },
-        },
-      },
-    },
-    {
-      key: "account-2",
-      text: "Production Account",
-      data: {
-        id: "account-2",
-        name: "Production Account",
-        location: "West US 2",
-        resourceGroup: "prod-rg",
+  };
+
+  const mockDatabaseAccount2: DatabaseAccount = {
+    id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/account2",
+    name: "test-account-2",
     kind: "GlobalDocumentDB",
+    location: "West US",
+    type: "Microsoft.DocumentDB/databaseAccounts",
+    tags: {},
     properties: {
-          documentEndpoint: "https://prod-account.documents.azure.com:443/",
-          provisioningState: "Succeeded",
-          consistencyPolicy: {
-            defaultConsistencyLevel: "Strong",
+      documentEndpoint: "https://account2.documents.azure.com:443/",
+      capabilities: [],
+      enableMultipleWriteLocations: false,
     },
-        },
-      },
-    },
-    {
-      key: "account-3",
-      text: "Testing Account",
-      data: {
-        id: "account-3",
-        name: "Testing Account",
+  };
+
+  const mockNonSqlAccount: DatabaseAccount = {
+    id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/mongo-account",
+    name: "mongo-account",
+    kind: "MongoDB",
     location: "Central US",
-        resourceGroup: "test-rg",
-        kind: "GlobalDocumentDB",
+    type: "Microsoft.DocumentDB/databaseAccounts",
+    tags: {},
     properties: {
-          documentEndpoint: "https://test-account.documents.azure.com:443/",
-          provisioningState: "Succeeded",
-          consistencyPolicy: {
-            defaultConsistencyLevel: "Eventual",
+      documentEndpoint: "https://mongo-account.documents.azure.com:443/",
+      capabilities: [],
+      enableMultipleWriteLocations: false,
     },
-        },
-      },
-    },
-  ];
+  };
+
+  const renderWithContext = (contextValue = mockCopyJobContextValue) => {
+    return render(
+      <CopyJobContext.Provider value={contextValue}>
+        <AccountDropdown />
+      </CopyJobContext.Provider>,
+    );
+  };
 
   beforeEach(() => {
     jest.clearAllMocks();
+    (apiType as jest.MockedFunction<any>).mockImplementation((account: DatabaseAccount) => {
+      return account.kind === "MongoDB" ? "MongoDB" : "SQL";
+    });
   });
 
-  describe("Snapshot Testing", () => {
-    it("matches snapshot with all account options", () => {
-      const { container } = render(
-        <AccountDropdown options={mockAccountOptions} disabled={false} onChange={mockOnChange} />,
+  describe("Rendering", () => {
+    it("should render dropdown with correct label and placeholder", () => {
+      mockUseDatabaseAccounts.mockReturnValue([]);
+
+      renderWithContext();
+
+      expect(
+        screen.getByText(`${ContainerCopyMessages.sourceAccountDropdownLabel}:`, { exact: true }),
+      ).toBeInTheDocument();
+      expect(screen.getByRole("combobox")).toHaveAttribute(
+        "aria-label",
+        ContainerCopyMessages.sourceAccountDropdownLabel,
       );
-
-      expect(container.firstChild).toMatchSnapshot();
     });
 
-    it("matches snapshot with selected account", () => {
-      const { container } = render(
-        <AccountDropdown
-          options={mockAccountOptions}
-          selectedKey="account-2"
-          disabled={false}
-          onChange={mockOnChange}
-        />,
-      );
+    it("should render disabled dropdown when no subscription is selected", () => {
+      mockUseDatabaseAccounts.mockReturnValue([]);
+      const contextWithoutSubscription = {
+        ...mockCopyJobContextValue,
+        copyJobState: {
+          ...mockCopyJobState,
+          source: {
+            ...mockCopyJobState.source,
+            subscription: null,
+          },
+        } as CopyJobContextState,
+      };
 
-      expect(container.firstChild).toMatchSnapshot();
+      renderWithContext(contextWithoutSubscription);
+
+      const dropdown = screen.getByRole("combobox");
+      expect(dropdown).toHaveAttribute("aria-disabled", "true");
     });
 
-    it("matches snapshot with disabled dropdown", () => {
-      const { container } = render(
-        <AccountDropdown
-          options={mockAccountOptions}
-          selectedKey="account-1"
-          disabled={true}
-          onChange={mockOnChange}
-        />,
-      );
+    it("should render disabled dropdown when no accounts are available", () => {
+      mockUseDatabaseAccounts.mockReturnValue([]);
 
-      expect(container.firstChild).toMatchSnapshot();
+      renderWithContext();
+
+      const dropdown = screen.getByRole("combobox");
+      expect(dropdown).toHaveAttribute("aria-disabled", "true");
     });
 
-    it("matches snapshot with empty options", () => {
-      const { container } = render(<AccountDropdown options={[]} disabled={false} onChange={mockOnChange} />);
+    it("should render enabled dropdown when accounts are available", () => {
+      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1, mockDatabaseAccount2]);
 
-      expect(container.firstChild).toMatchSnapshot();
+      renderWithContext();
+
+      const dropdown = screen.getByRole("combobox");
+      expect(dropdown).toHaveAttribute("aria-disabled", "false");
+    });
   });
 
-    it("matches snapshot with single option", () => {
-      const { container } = render(
-        <AccountDropdown
-          options={[mockAccountOptions[0]]}
-          selectedKey="account-1"
-          disabled={false}
-          onChange={mockOnChange}
-        />,
-      );
+  describe("Account filtering", () => {
+    it("should filter accounts to only show SQL API accounts", () => {
+      const allAccounts = [mockDatabaseAccount1, mockDatabaseAccount2, mockNonSqlAccount];
+      mockUseDatabaseAccounts.mockReturnValue(allAccounts);
 
-      expect(container.firstChild).toMatchSnapshot();
+      renderWithContext();
+
+      expect(mockUseDatabaseAccounts).toHaveBeenCalledWith("test-subscription-id");
+
+      expect(apiType as jest.MockedFunction<any>).toHaveBeenCalledWith(mockDatabaseAccount1);
+      expect(apiType as jest.MockedFunction<any>).toHaveBeenCalledWith(mockDatabaseAccount2);
+      expect(apiType as jest.MockedFunction<any>).toHaveBeenCalledWith(mockNonSqlAccount);
+    });
   });
 
-    it("matches snapshot with special characters in options", () => {
-      const specialOptions = [
-        {
-          key: "special",
-          text: 'Account with & <special> "characters"',
-          data: {
-            id: "special",
-            name: 'Account with & <special> "characters"',
-            location: "East US",
+  describe("Account selection", () => {
+    it("should auto-select the first SQL account when no account is currently selected", async () => {
+      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1, mockDatabaseAccount2]);
+
+      renderWithContext();
+
+      await waitFor(() => {
+        expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
+      });
+
+      const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
+      const newState = stateUpdateFunction(mockCopyJobState);
+      expect(newState.source.account).toEqual({
+        ...mockDatabaseAccount1,
+        id: normalizeAccountId(mockDatabaseAccount1.id),
+      });
+    });
+
+    it("should auto-select predefined account from userContext if available", async () => {
+      const userContextAccount = {
+        ...mockDatabaseAccount2,
+        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDB/databaseAccounts/account2",
+      };
+
+      (userContext as any).databaseAccount = userContextAccount;
+
+      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1, mockDatabaseAccount2]);
+
+      renderWithContext();
+
+      await waitFor(() => {
+        expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
+      });
+
+      const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
+      const newState = stateUpdateFunction(mockCopyJobState);
+      expect(newState.source.account).toEqual({
+        ...mockDatabaseAccount2,
+        id: normalizeAccountId(mockDatabaseAccount2.id),
+      });
+    });
+
+    it("should keep current account if it exists in the filtered list", async () => {
+      const contextWithSelectedAccount = {
+        ...mockCopyJobContextValue,
+        copyJobState: {
+          ...mockCopyJobState,
+          source: {
+            ...mockCopyJobState.source,
+            account: mockDatabaseAccount1,
           },
         },
-      ];
+      };
 
-      const { container } = render(
-        <AccountDropdown options={specialOptions} disabled={false} onChange={mockOnChange} />,
-      );
+      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1, mockDatabaseAccount2]);
 
-      expect(container.firstChild).toMatchSnapshot();
+      renderWithContext(contextWithSelectedAccount);
+
+      await waitFor(() => {
+        expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
       });
 
-    it("matches snapshot with long account name", () => {
-      const longNameOption = [
-        {
-          key: "long",
-          text: "This is an extremely long account name that tests how the component handles text overflow and layout constraints in the dropdown",
-          data: {
-            id: "long",
-            name: "This is an extremely long account name that tests how the component handles text overflow and layout constraints in the dropdown",
-            location: "North Central US",
+      const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
+      const newState = stateUpdateFunction(contextWithSelectedAccount.copyJobState);
+      expect(newState).toEqual({
+        ...contextWithSelectedAccount.copyJobState,
+        source: {
+          ...contextWithSelectedAccount.copyJobState.source,
+          account: {
+            ...mockDatabaseAccount1,
+            id: normalizeAccountId(mockDatabaseAccount1.id),
           },
         },
-      ];
-
-      const { container } = render(
-        <AccountDropdown options={longNameOption} selectedKey="long" disabled={false} onChange={mockOnChange} />,
-      );
-
-      expect(container.firstChild).toMatchSnapshot();
+      });
     });
 
-    it("matches snapshot with disabled state and no selection", () => {
-      const { container } = render(
-        <AccountDropdown options={mockAccountOptions} disabled={true} onChange={mockOnChange} />,
-      );
+    it("should handle account change when user selects different account", async () => {
+      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1, mockDatabaseAccount2]);
 
-      expect(container.firstChild).toMatchSnapshot();
+      renderWithContext();
+
+      const dropdown = screen.getByRole("combobox");
+      fireEvent.click(dropdown);
+
+      await waitFor(() => {
+        const option = screen.getByText("test-account-2");
+        fireEvent.click(option);
       });
 
-    it("matches snapshot with multiple account types", () => {
-      const mixedAccountOptions = [
-        {
-          key: "sql-account",
-          text: "SQL API Account",
-          data: {
-            id: "sql-account",
-            name: "SQL API Account",
-            kind: "GlobalDocumentDB",
-            location: "East US",
-          },
-        },
-        {
-          key: "mongo-account",
-          text: "MongoDB Account",
-          data: {
-            id: "mongo-account",
-            name: "MongoDB Account",
-            kind: "MongoDB",
-            location: "West US",
-          },
-        },
-        {
-          key: "cassandra-account",
-          text: "Cassandra Account",
-          data: {
-            id: "cassandra-account",
-            name: "Cassandra Account",
-            kind: "Cassandra",
-            location: "Central US",
-          },
-        },
-      ];
+      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
+    });
+  });
 
-      const { container } = render(
-        <AccountDropdown
-          options={mixedAccountOptions}
-          selectedKey="mongo-account"
-          disabled={false}
-          onChange={mockOnChange}
-        />,
-      );
+  describe("ID normalization", () => {
+    it("should normalize account ID for Portal platform", () => {
+      const portalAccount = {
+        ...mockDatabaseAccount1,
+        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDB/databaseAccounts/account1",
+      };
 
-      expect(container.firstChild).toMatchSnapshot();
+      (configContext as any).platform = Platform.Portal;
+      mockUseDatabaseAccounts.mockReturnValue([portalAccount]);
+
+      const contextWithSelectedAccount = {
+        ...mockCopyJobContextValue,
+        copyJobState: {
+          ...mockCopyJobState,
+          source: {
+            ...mockCopyJobState.source,
+            account: portalAccount,
+          },
+        },
+      };
+
+      renderWithContext(contextWithSelectedAccount);
+
+      const dropdown = screen.getByRole("combobox");
+      expect(dropdown).toMatchSnapshot();
+    });
+
+    it("should normalize account ID for Hosted platform", () => {
+      const hostedAccount = {
+        ...mockDatabaseAccount1,
+        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDB/databaseAccounts/account1",
+      };
+
+      (configContext as any).platform = Platform.Hosted;
+      mockUseDatabaseAccounts.mockReturnValue([hostedAccount]);
+
+      const contextWithSelectedAccount = {
+        ...mockCopyJobContextValue,
+        copyJobState: {
+          ...mockCopyJobState,
+          source: {
+            ...mockCopyJobState.source,
+            account: hostedAccount,
+          },
+        },
+      };
+
+      renderWithContext(contextWithSelectedAccount);
+
+      const dropdown = screen.getByRole("combobox");
+      expect(dropdown).toBeInTheDocument();
+    });
+  });
+
+  describe("Edge cases", () => {
+    it("should handle empty account list gracefully", () => {
+      mockUseDatabaseAccounts.mockReturnValue([]);
+
+      renderWithContext();
+
+      const dropdown = screen.getByRole("combobox");
+      expect(dropdown).toHaveAttribute("aria-disabled", "true");
+    });
+
+    it("should handle null account list gracefully", () => {
+      mockUseDatabaseAccounts.mockReturnValue(null as any);
+
+      renderWithContext();
+
+      const dropdown = screen.getByRole("combobox");
+      expect(dropdown).toHaveAttribute("aria-disabled", "true");
+    });
+
+    it("should handle undefined subscription ID", () => {
+      const contextWithoutSubscription = {
+        ...mockCopyJobContextValue,
+        copyJobState: {
+          ...mockCopyJobState,
+          source: {
+            ...mockCopyJobState.source,
+            subscription: null,
+          },
+        } as CopyJobContextState,
+      };
+
+      mockUseDatabaseAccounts.mockReturnValue([]);
+
+      renderWithContext(contextWithoutSubscription);
+
+      expect(mockUseDatabaseAccounts).toHaveBeenCalledWith(undefined);
+    });
+
+    it("should not update state if account is already selected and the same", async () => {
+      const selectedAccount = mockDatabaseAccount1;
+      const contextWithSelectedAccount = {
+        ...mockCopyJobContextValue,
+        copyJobState: {
+          ...mockCopyJobState,
+          source: {
+            ...mockCopyJobState.source,
+            account: selectedAccount,
+          },
+        },
+      };
+
+      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1, mockDatabaseAccount2]);
+
+      renderWithContext(contextWithSelectedAccount);
+
+      await waitFor(() => {
+        expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
+      });
+
+      const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
+      const newState = stateUpdateFunction(contextWithSelectedAccount.copyJobState);
+      expect(newState).toBe(contextWithSelectedAccount.copyJobState);
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("should have proper aria-label", () => {
+      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1]);
+
+      renderWithContext();
+
+      const dropdown = screen.getByRole("combobox");
+      expect(dropdown).toHaveAttribute("aria-label", ContainerCopyMessages.sourceAccountDropdownLabel);
+    });
+
+    it("should have required attribute", () => {
+      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1]);
+
+      renderWithContext();
+
+      const dropdown = screen.getByRole("combobox");
+      expect(dropdown).toHaveAttribute("aria-required", "true");
     });
   });
 });

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

@@ -1,31 +1,96 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
 import { Dropdown } from "@fluentui/react";
-import React from "react";
+import { configContext, Platform } from "ConfigContext";
+import React, { useEffect } from "react";
+import { DatabaseAccount } from "../../../../../../Contracts/DataModels";
+import { useDatabaseAccounts } from "../../../../../../hooks/useDatabaseAccounts";
+import { apiType, userContext } from "../../../../../../UserContext";
 import ContainerCopyMessages from "../../../../ContainerCopyMessages";
-import { DropdownOptionType } from "../../../../Types/CopyJobTypes";
+import { useCopyJobContext } from "../../../../Context/CopyJobContext";
 import FieldRow from "../../Components/FieldRow";
 
-interface AccountDropdownProps {
-  options: DropdownOptionType[];
-  selectedKey?: string;
-  disabled: boolean;
-  onChange: (_ev?: React.FormEvent, option?: DropdownOptionType) => void;
-}
+interface AccountDropdownProps {}
 
-export const AccountDropdown: React.FC<AccountDropdownProps> = React.memo(
-  ({ options, selectedKey, disabled, onChange }) => (
+export const normalizeAccountId = (id: string = "") => {
+  if (configContext.platform === Platform.Portal) {
+    return id.replace("/Microsoft.DocumentDb/", "/Microsoft.DocumentDB/");
+  } else if (configContext.platform === Platform.Hosted) {
+    return id.replace("/Microsoft.DocumentDB/", "/Microsoft.DocumentDb/");
+  } else {
+    return id;
+  }
+};
+
+export const AccountDropdown: React.FC<AccountDropdownProps> = () => {
+  const { copyJobState, setCopyJobState } = useCopyJobContext();
+
+  const selectedSubscriptionId = copyJobState?.source?.subscription?.subscriptionId;
+  const allAccounts: DatabaseAccount[] = useDatabaseAccounts(selectedSubscriptionId);
+  const sqlApiOnlyAccounts = (allAccounts || [])
+    .filter((account) => apiType(account) === "SQL")
+    .map((account) => ({
+      ...account,
+      id: normalizeAccountId(account.id),
+    }));
+
+  const updateCopyJobState = (newAccount: DatabaseAccount) => {
+    setCopyJobState((prevState) => {
+      if (prevState.source?.account?.id !== newAccount.id) {
+        return {
+          ...prevState,
+          source: {
+            ...prevState.source,
+            account: newAccount,
+          },
+        };
+      }
+      return prevState;
+    });
+  };
+
+  useEffect(() => {
+    if (sqlApiOnlyAccounts && sqlApiOnlyAccounts.length > 0 && selectedSubscriptionId) {
+      const currentAccountId = copyJobState?.source?.account?.id;
+      const predefinedAccountId = normalizeAccountId(userContext.databaseAccount?.id);
+      const selectedAccountId = currentAccountId || predefinedAccountId;
+
+      const targetAccount: DatabaseAccount | null =
+        sqlApiOnlyAccounts.find((account) => account.id === selectedAccountId) || null;
+      updateCopyJobState(targetAccount || sqlApiOnlyAccounts[0]);
+    }
+  }, [sqlApiOnlyAccounts?.length, selectedSubscriptionId]);
+
+  const accountOptions =
+    sqlApiOnlyAccounts?.map((account) => ({
+      key: account.id,
+      text: account.name,
+      data: account,
+    })) || [];
+
+  const handleAccountChange = (_ev?: React.FormEvent, option?: (typeof accountOptions)[0]) => {
+    const selectedAccount = option?.data as DatabaseAccount;
+
+    if (selectedAccount) {
+      updateCopyJobState(selectedAccount);
+    }
+  };
+
+  const isAccountDropdownDisabled = !selectedSubscriptionId || accountOptions.length === 0;
+  const selectedAccountId = normalizeAccountId(copyJobState?.source?.account?.id ?? "");
+
+  return (
     <FieldRow label={ContainerCopyMessages.sourceAccountDropdownLabel}>
       <Dropdown
         placeholder={ContainerCopyMessages.sourceAccountDropdownPlaceholder}
         ariaLabel={ContainerCopyMessages.sourceAccountDropdownLabel}
-        options={options}
-        disabled={disabled}
+        options={accountOptions}
+        disabled={isAccountDropdownDisabled}
         required
-        selectedKey={selectedKey}
-        onChange={onChange}
+        selectedKey={selectedAccountId}
+        onChange={handleAccountChange}
+        data-test="account-dropdown"
       />
     </FieldRow>
-  ),
-  (prev, next) => prev.options.length === next.options.length && prev.selectedKey === next.selectedKey,
   );
+};

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
-import { Checkbox, Stack } from "@fluentui/react";
+import { Checkbox, ICheckboxStyles, Stack } from "@fluentui/react";
 import React from "react";
 import ContainerCopyMessages from "../../../../ContainerCopyMessages";
 
@@ -9,8 +9,25 @@ interface MigrationTypeCheckboxProps {
   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} />
+const checkboxStyles: ICheckboxStyles = {
+  text: { color: "var(--colorNeutralForeground1)" },
+  checkbox: { borderColor: "var(--colorNeutralStroke1)" },
+  root: {
+    selectors: {
+      ":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
+    },
+  },
+};
+
+export const MigrationTypeCheckbox: React.FC<MigrationTypeCheckboxProps> = React.memo(({ checked, onChange }) => {
+  return (
+    <Stack horizontal horizontalAlign="space-between" className="migrationTypeRow" data-test="migration-type-checkbox">
+      <Checkbox
+        label={ContainerCopyMessages.migrationTypeCheckboxLabel}
+        checked={checked}
+        onChange={onChange}
+        styles={checkboxStyles}
+      />
     </Stack>
-));
+  );
+});

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

@@ -1,118 +1,295 @@
 import "@testing-library/jest-dom";
-import { render } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import React from "react";
-import { DropdownOptionType } from "../../../../Types/CopyJobTypes";
+import { Subscription } from "../../../../../../Contracts/DataModels";
+import Explorer from "../../../../../Explorer";
+import CopyJobContextProvider from "../../../../Context/CopyJobContext";
 import { SubscriptionDropdown } from "./SubscriptionDropdown";
 
-describe("SubscriptionDropdown", () => {
-  const mockOnChange = jest.fn();
+jest.mock("../../../../../../hooks/useSubscriptions");
+jest.mock("../../../../../../UserContext");
+jest.mock("../../../../ContainerCopyMessages");
 
-  const mockSubscriptionOptions: DropdownOptionType[] = [
+const mockUseSubscriptions = jest.requireMock("../../../../../../hooks/useSubscriptions").useSubscriptions;
+const mockUserContext = jest.requireMock("../../../../../../UserContext").userContext;
+const mockContainerCopyMessages = jest.requireMock("../../../../ContainerCopyMessages").default;
+
+mockContainerCopyMessages.subscriptionDropdownLabel = "Subscription";
+mockContainerCopyMessages.subscriptionDropdownPlaceholder = "Select a subscription";
+
+describe("SubscriptionDropdown", () => {
+  let mockExplorer: Explorer;
+  const mockSubscriptions: Subscription[] = [
     {
-      key: "sub-1",
-      text: "Development Subscription",
-      data: {
       subscriptionId: "sub-1",
-        displayName: "Development Subscription",
-        authorizationSource: "RoleBased",
-        subscriptionPolicies: {
-          quotaId: "quota-1",
-          spendingLimit: "Off",
-          locationPlacementId: "loc-1",
-        },
-      },
+      displayName: "Subscription One",
+      state: "Enabled",
+      tenantId: "tenant-1",
     },
     {
-      key: "sub-2",
-      text: "Production Subscription",
-      data: {
       subscriptionId: "sub-2",
-        displayName: "Production Subscription",
-        authorizationSource: "RoleBased",
-        subscriptionPolicies: {
-          quotaId: "quota-2",
-          spendingLimit: "On",
-          locationPlacementId: "loc-2",
-        },
-      },
+      displayName: "Subscription Two",
+      state: "Enabled",
+      tenantId: "tenant-1",
     },
     {
-      key: "sub-3",
-      text: "Testing Subscription",
-      data: {
       subscriptionId: "sub-3",
-        displayName: "Testing Subscription",
-        authorizationSource: "Legacy",
-        subscriptionPolicies: {
-          quotaId: "quota-3",
-          spendingLimit: "Off",
-          locationPlacementId: "loc-3",
-        },
-      },
+      displayName: "Another Subscription",
+      state: "Enabled",
+      tenantId: "tenant-1",
     },
   ];
 
+  const renderWithProvider = (children: React.ReactNode) => {
+    return render(<CopyJobContextProvider explorer={mockExplorer}>{children}</CopyJobContextProvider>);
+  };
+
   beforeEach(() => {
     jest.clearAllMocks();
+    mockExplorer = {} as Explorer;
+
+    mockUseSubscriptions.mockReturnValue(mockSubscriptions);
+    mockUserContext.subscriptionId = "sub-1";
   });
 
-  describe("Snapshot Testing", () => {
-    it("matches snapshot with all subscription options", () => {
-      const { container } = render(<SubscriptionDropdown options={mockSubscriptionOptions} onChange={mockOnChange} />);
+  describe("Rendering", () => {
+    it("should render subscription dropdown with correct attributes", () => {
+      renderWithProvider(<SubscriptionDropdown />);
 
-      expect(container.firstChild).toMatchSnapshot();
+      const dropdown = screen.getByRole("combobox");
+      expect(dropdown).toBeInTheDocument();
+      expect(dropdown).toHaveAttribute("aria-label", "Subscription");
+      expect(dropdown).toHaveAttribute("data-test", "subscription-dropdown");
+      expect(dropdown).toBeRequired();
     });
 
-    it("matches snapshot with selected subscription", () => {
-      const { container } = render(
-        <SubscriptionDropdown options={mockSubscriptionOptions} selectedKey="sub-2" onChange={mockOnChange} />,
+    it("should render field label correctly", () => {
+      renderWithProvider(<SubscriptionDropdown />);
+
+      expect(screen.getByText("Subscription:")).toBeInTheDocument();
+    });
+
+    it("should show placeholder when no subscription is selected", async () => {
+      mockUserContext.subscriptionId = "";
+      mockUseSubscriptions.mockReturnValue([]);
+
+      renderWithProvider(<SubscriptionDropdown />);
+
+      await waitFor(() => {
+        const dropdown = screen.getByRole("combobox");
+        expect(dropdown).toHaveTextContent("Select a subscription");
+      });
+    });
+  });
+
+  describe("Subscription Options", () => {
+    it("should populate dropdown with available subscriptions", async () => {
+      renderWithProvider(<SubscriptionDropdown />);
+
+      const dropdown = screen.getByRole("combobox");
+      fireEvent.click(dropdown);
+
+      await waitFor(() => {
+        expect(screen.getByText("Subscription One", { selector: ".ms-Dropdown-optionText" })).toBeInTheDocument();
+        expect(screen.getByText("Subscription Two", { selector: ".ms-Dropdown-optionText" })).toBeInTheDocument();
+        expect(screen.getByText("Another Subscription", { selector: ".ms-Dropdown-optionText" })).toBeInTheDocument();
+      });
+    });
+
+    it("should handle empty subscriptions list", () => {
+      mockUseSubscriptions.mockReturnValue([]);
+
+      renderWithProvider(<SubscriptionDropdown />);
+
+      const dropdown = screen.getByRole("combobox");
+      expect(dropdown).toBeInTheDocument();
+      expect(dropdown).toHaveTextContent("Select a subscription");
+    });
+
+    it("should handle undefined subscriptions", () => {
+      mockUseSubscriptions.mockReturnValue(undefined);
+
+      renderWithProvider(<SubscriptionDropdown />);
+
+      const dropdown = screen.getByRole("combobox");
+      expect(dropdown).toBeInTheDocument();
+      expect(dropdown).toHaveTextContent("Select a subscription");
+    });
+  });
+
+  describe("Selection Logic", () => {
+    it("should auto-select subscription based on userContext.subscriptionId on mount", async () => {
+      mockUserContext.subscriptionId = "sub-2";
+
+      renderWithProvider(<SubscriptionDropdown />);
+
+      await waitFor(() => {
+        const dropdown = screen.getByRole("combobox");
+        expect(dropdown).toHaveTextContent("Subscription Two");
+      });
+    });
+
+    it("should maintain current selection when subscriptions list updates with same subscription", async () => {
+      renderWithProvider(<SubscriptionDropdown />);
+
+      await waitFor(() => {
+        const dropdown = screen.getByRole("combobox");
+        expect(dropdown).toHaveTextContent("Subscription One");
+      });
+
+      act(() => {
+        mockUseSubscriptions.mockReturnValue([...mockSubscriptions]);
+      });
+
+      await waitFor(() => {
+        const dropdown = screen.getByRole("combobox");
+        expect(dropdown).toHaveTextContent("Subscription One");
+      });
+    });
+
+    it("should prioritize current copyJobState subscription over userContext subscription", async () => {
+      mockUserContext.subscriptionId = "sub-2";
+
+      const { rerender } = renderWithProvider(<SubscriptionDropdown />);
+
+      await waitFor(() => {
+        const dropdown = screen.getByRole("combobox");
+        expect(dropdown).toHaveTextContent("Subscription Two");
+      });
+
+      const dropdown = screen.getByRole("combobox");
+      fireEvent.click(dropdown);
+
+      await waitFor(() => {
+        const option = screen.getByText("Another Subscription");
+        fireEvent.click(option);
+      });
+
+      rerender(
+        <CopyJobContextProvider explorer={mockExplorer}>
+          <SubscriptionDropdown />
+        </CopyJobContextProvider>,
       );
 
-      expect(container.firstChild).toMatchSnapshot();
+      await waitFor(() => {
+        const dropdown = screen.getByRole("combobox");
+        expect(dropdown).toHaveTextContent("Another Subscription");
+      });
     });
 
-    it("matches snapshot with empty options", () => {
-      const { container } = render(<SubscriptionDropdown options={[]} onChange={mockOnChange} />);
+    it("should handle subscription selection change", async () => {
+      renderWithProvider(<SubscriptionDropdown />);
 
-      expect(container.firstChild).toMatchSnapshot();
+      const dropdown = screen.getByRole("combobox");
+      fireEvent.click(dropdown);
+
+      await waitFor(() => {
+        const option = screen.getByText("Subscription Two");
+        fireEvent.click(option);
       });
 
-    it("matches snapshot with single option", () => {
-      const { container } = render(
-        <SubscriptionDropdown options={[mockSubscriptionOptions[0]]} selectedKey="sub-1" onChange={mockOnChange} />,
-      );
-
-      expect(container.firstChild).toMatchSnapshot();
+      await waitFor(() => {
+        expect(dropdown).toHaveTextContent("Subscription Two");
+      });
     });
 
-    it("matches snapshot with special characters in options", () => {
-      const specialOptions = [
-        {
-          key: "special",
-          text: 'Subscription with & <special> "characters"',
-          data: { subscriptionId: "special" },
-        },
-      ];
+    it("should not auto-select if target subscription not found in list", async () => {
+      mockUserContext.subscriptionId = "non-existent-sub";
 
-      const { container } = render(<SubscriptionDropdown options={specialOptions} onChange={mockOnChange} />);
+      renderWithProvider(<SubscriptionDropdown />);
 
-      expect(container.firstChild).toMatchSnapshot();
-    });
-
-    it("matches snapshot with long subscription name", () => {
-      const longNameOption = [
-        {
-          key: "long",
-          text: "This is an extremely long subscription name that tests how the component handles text overflow and layout constraints",
-          data: { subscriptionId: "long" },
-        },
-      ];
-
-      const { container } = render(
-        <SubscriptionDropdown options={longNameOption} selectedKey="long" onChange={mockOnChange} />,
-      );
-
-      expect(container.firstChild).toMatchSnapshot();
+      await waitFor(() => {
+        const dropdown = screen.getByRole("combobox");
+        expect(dropdown).toHaveTextContent("Select a subscription");
+      });
+    });
+  });
+
+  describe("Context State Management", () => {
+    it("should update copyJobState when subscription is selected", async () => {
+      renderWithProvider(<SubscriptionDropdown />);
+
+      const dropdown = screen.getByRole("combobox");
+      fireEvent.click(dropdown);
+
+      await waitFor(() => {
+        const option = screen.getByText("Subscription Two");
+        fireEvent.click(option);
+      });
+      await waitFor(() => {
+        expect(dropdown).toHaveTextContent("Subscription Two");
+      });
+    });
+
+    it("should reset account when subscription changes", async () => {
+      renderWithProvider(<SubscriptionDropdown />);
+
+      await waitFor(() => {
+        const dropdown = screen.getByRole("combobox");
+        expect(dropdown).toHaveTextContent("Subscription One");
+      });
+      const dropdown = screen.getByRole("combobox");
+      fireEvent.click(dropdown);
+
+      await waitFor(() => {
+        const option = screen.getByText("Subscription Two");
+        fireEvent.click(option);
+      });
+
+      await waitFor(() => {
+        expect(dropdown).toHaveTextContent("Subscription Two");
+      });
+    });
+
+    it("should not update state if same subscription is selected", async () => {
+      renderWithProvider(<SubscriptionDropdown />);
+
+      await waitFor(() => {
+        const dropdown = screen.getByRole("combobox");
+        expect(dropdown).toHaveTextContent("Subscription One");
+      });
+
+      const dropdown = screen.getByRole("combobox");
+      fireEvent.click(dropdown);
+
+      await waitFor(() => {
+        const option = screen.getByText("Subscription One", { selector: ".ms-Dropdown-optionText" });
+        fireEvent.click(option);
+      });
+
+      await waitFor(() => {
+        expect(dropdown).toHaveTextContent("Subscription One");
+      });
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle subscription change event with option missing data", async () => {
+      renderWithProvider(<SubscriptionDropdown />);
+
+      const dropdown = screen.getByRole("combobox");
+      fireEvent.click(dropdown);
+      expect(dropdown).toBeInTheDocument();
+    });
+
+    it("should handle subscriptions loading state", () => {
+      mockUseSubscriptions.mockReturnValue(undefined);
+
+      renderWithProvider(<SubscriptionDropdown />);
+
+      const dropdown = screen.getByRole("combobox");
+      expect(dropdown).toBeInTheDocument();
+      expect(dropdown).toHaveTextContent("Select a subscription");
+    });
+
+    it("should work when both userContext.subscriptionId and copyJobState subscription are null", () => {
+      mockUserContext.subscriptionId = "";
+
+      renderWithProvider(<SubscriptionDropdown />);
+
+      const dropdown = screen.getByRole("combobox");
+      expect(dropdown).toBeInTheDocument();
+      expect(dropdown).toHaveTextContent("Select a subscription");
     });
   });
 });

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

@@ -1,29 +1,79 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
 import { Dropdown } from "@fluentui/react";
-import React from "react";
+import React, { useEffect } from "react";
+import { Subscription } from "../../../../../../Contracts/DataModels";
+import { useSubscriptions } from "../../../../../../hooks/useSubscriptions";
+import { userContext } from "../../../../../../UserContext";
 import ContainerCopyMessages from "../../../../ContainerCopyMessages";
-import { DropdownOptionType } from "../../../../Types/CopyJobTypes";
+import { useCopyJobContext } from "../../../../Context/CopyJobContext";
 import FieldRow from "../../Components/FieldRow";
 
-interface SubscriptionDropdownProps {
-  options: DropdownOptionType[];
-  selectedKey?: string;
-  onChange: (_ev?: React.FormEvent, option?: DropdownOptionType) => void;
-}
+interface SubscriptionDropdownProps {}
 
-export const SubscriptionDropdown: React.FC<SubscriptionDropdownProps> = React.memo(
-  ({ options, selectedKey, onChange }) => (
+export const SubscriptionDropdown: React.FC<SubscriptionDropdownProps> = React.memo(() => {
+  const { copyJobState, setCopyJobState } = useCopyJobContext();
+  const subscriptions: Subscription[] = useSubscriptions();
+
+  const updateCopyJobState = (newSubscription: Subscription) => {
+    setCopyJobState((prevState) => {
+      if (prevState.source?.subscription?.subscriptionId !== newSubscription.subscriptionId) {
+        return {
+          ...prevState,
+          source: {
+            ...prevState.source,
+            subscription: newSubscription,
+            account: null,
+          },
+        };
+      }
+      return prevState;
+    });
+  };
+
+  useEffect(() => {
+    if (subscriptions && subscriptions.length > 0) {
+      const currentSubscriptionId = copyJobState?.source?.subscription?.subscriptionId;
+      const predefinedSubscriptionId = userContext.subscriptionId;
+      const selectedSubscriptionId = currentSubscriptionId || predefinedSubscriptionId;
+
+      const targetSubscription: Subscription | null =
+        subscriptions.find((sub) => sub.subscriptionId === selectedSubscriptionId) || null;
+
+      if (targetSubscription) {
+        updateCopyJobState(targetSubscription);
+      }
+    }
+  }, [subscriptions?.length]);
+
+  const subscriptionOptions =
+    subscriptions?.map((sub) => ({
+      key: sub.subscriptionId,
+      text: sub.displayName,
+      data: sub,
+    })) || [];
+
+  const handleSubscriptionChange = (_ev?: React.FormEvent, option?: (typeof subscriptionOptions)[0]) => {
+    const selectedSubscription = option?.data as Subscription;
+
+    if (selectedSubscription) {
+      updateCopyJobState(selectedSubscription);
+    }
+  };
+
+  const selectedSubscriptionId = copyJobState?.source?.subscription?.subscriptionId;
+
+  return (
     <FieldRow label={ContainerCopyMessages.subscriptionDropdownLabel}>
       <Dropdown
         placeholder={ContainerCopyMessages.subscriptionDropdownPlaceholder}
         ariaLabel={ContainerCopyMessages.subscriptionDropdownLabel}
-        options={options}
+        data-test="subscription-dropdown"
+        options={subscriptionOptions}
         required
-        selectedKey={selectedKey}
-        onChange={onChange}
+        selectedKey={selectedSubscriptionId}
+        onChange={handleSubscriptionChange}
       />
     </FieldRow>
-  ),
-  (prev, next) => prev.options.length === next.options.length && prev.selectedKey === next.selectedKey,
   );
+});

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

@@ -1,514 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AccountDropdown Snapshot Testing matches snapshot with all account options 1`] = `
-<div
-  class="ms-Stack flex-row css-109"
->
-  <div
-    class="ms-StackItem flex-fixed-width css-110"
-  >
-    <label
-      class="field-label "
-    >
-      Account
-      : 
-    </label>
-  </div>
-  <div
-    class="ms-StackItem flex-grow-col css-110"
-  >
-    <div
-      class="ms-Dropdown-container"
-    >
+exports[`AccountDropdown ID normalization should normalize account ID for Portal platform 1`] = `
 <div
   aria-disabled="false"
   aria-expanded="false"
   aria-haspopup="listbox"
   aria-label="Account"
   aria-required="true"
-        class="ms-Dropdown is-required dropdown-111"
+  class="ms-Dropdown is-required dropdown-132"
   data-is-focusable="true"
   data-ktp-target="true"
-        id="Dropdown0"
+  data-test="account-dropdown"
+  id="Dropdown21"
   role="combobox"
   tabindex="0"
 >
   <span
     aria-invalid="false"
-          class="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder title-112"
-          id="Dropdown0-option"
+    class="ms-Dropdown-title title-137"
+    id="Dropdown21-option"
   >
-          Select an account
+    test-account-1
   </span>
   <span
-          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+    class="ms-Dropdown-caretDownWrapper caretDownWrapper-134"
   >
     <i
       aria-hidden="true"
-            class="ms-Dropdown-caretDown caretDown-131"
+      class="ms-Dropdown-caretDown caretDown-136"
       data-icon-name="ChevronDown"
     >
       
     </i>
   </span>
 </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`AccountDropdown Snapshot Testing matches snapshot with disabled dropdown 1`] = `
-<div
-  class="ms-Stack flex-row css-109"
->
-  <div
-    class="ms-StackItem flex-fixed-width css-110"
-  >
-    <label
-      class="field-label "
-    >
-      Account
-      : 
-    </label>
-  </div>
-  <div
-    class="ms-StackItem flex-grow-col css-110"
-  >
-    <div
-      class="ms-Dropdown-container"
-    >
-      <div
-        aria-disabled="true"
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Account"
-        aria-required="true"
-        class="ms-Dropdown is-disabled is-required dropdown-133"
-        data-is-focusable="false"
-        data-ktp-target="true"
-        id="Dropdown2"
-        role="combobox"
-        tabindex="-1"
-      >
-        <span
-          aria-invalid="false"
-          class="ms-Dropdown-title title-138"
-          id="Dropdown2-option"
-        >
-          Development Account
-        </span>
-        <span
-          class="ms-Dropdown-caretDownWrapper caretDownWrapper-135"
-        >
-          <i
-            aria-hidden="true"
-            class="ms-Dropdown-caretDown caretDown-137"
-            data-icon-name="ChevronDown"
-          >
-            
-          </i>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`AccountDropdown Snapshot Testing matches snapshot with disabled state and no selection 1`] = `
-<div
-  class="ms-Stack flex-row css-109"
->
-  <div
-    class="ms-StackItem flex-fixed-width css-110"
-  >
-    <label
-      class="field-label "
-    >
-      Account
-      : 
-    </label>
-  </div>
-  <div
-    class="ms-StackItem flex-grow-col css-110"
-  >
-    <div
-      class="ms-Dropdown-container"
-    >
-      <div
-        aria-disabled="true"
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Account"
-        aria-required="true"
-        class="ms-Dropdown is-disabled is-required dropdown-133"
-        data-is-focusable="false"
-        data-ktp-target="true"
-        id="Dropdown7"
-        role="combobox"
-        tabindex="-1"
-      >
-        <span
-          aria-invalid="false"
-          class="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder title-134"
-          id="Dropdown7-option"
-        >
-          Select an account
-        </span>
-        <span
-          class="ms-Dropdown-caretDownWrapper caretDownWrapper-135"
-        >
-          <i
-            aria-hidden="true"
-            class="ms-Dropdown-caretDown caretDown-137"
-            data-icon-name="ChevronDown"
-          >
-            
-          </i>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`AccountDropdown Snapshot Testing matches snapshot with empty options 1`] = `
-<div
-  class="ms-Stack flex-row css-109"
->
-  <div
-    class="ms-StackItem flex-fixed-width css-110"
-  >
-    <label
-      class="field-label "
-    >
-      Account
-      : 
-    </label>
-  </div>
-  <div
-    class="ms-StackItem flex-grow-col css-110"
-  >
-    <div
-      class="ms-Dropdown-container"
-    >
-      <div
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Account"
-        aria-required="true"
-        class="ms-Dropdown is-required dropdown-111"
-        data-is-focusable="true"
-        data-ktp-target="true"
-        id="Dropdown3"
-        role="combobox"
-        tabindex="0"
-      >
-        <span
-          aria-invalid="false"
-          class="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder title-112"
-          id="Dropdown3-option"
-        >
-          Select an account
-        </span>
-        <span
-          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
-        >
-          <i
-            aria-hidden="true"
-            class="ms-Dropdown-caretDown caretDown-131"
-            data-icon-name="ChevronDown"
-          >
-            
-          </i>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`AccountDropdown Snapshot Testing matches snapshot with long account name 1`] = `
-<div
-  class="ms-Stack flex-row css-109"
->
-  <div
-    class="ms-StackItem flex-fixed-width css-110"
-  >
-    <label
-      class="field-label "
-    >
-      Account
-      : 
-    </label>
-  </div>
-  <div
-    class="ms-StackItem flex-grow-col css-110"
-  >
-    <div
-      class="ms-Dropdown-container"
-    >
-      <div
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Account"
-        aria-required="true"
-        class="ms-Dropdown is-required dropdown-111"
-        data-is-focusable="true"
-        data-ktp-target="true"
-        id="Dropdown6"
-        role="combobox"
-        tabindex="0"
-      >
-        <span
-          aria-invalid="false"
-          class="ms-Dropdown-title title-132"
-          id="Dropdown6-option"
-        >
-          This is an extremely long account name that tests how the component handles text overflow and layout constraints in the dropdown
-        </span>
-        <span
-          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
-        >
-          <i
-            aria-hidden="true"
-            class="ms-Dropdown-caretDown caretDown-131"
-            data-icon-name="ChevronDown"
-          >
-            
-          </i>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`AccountDropdown Snapshot Testing matches snapshot with multiple account types 1`] = `
-<div
-  class="ms-Stack flex-row css-109"
->
-  <div
-    class="ms-StackItem flex-fixed-width css-110"
-  >
-    <label
-      class="field-label "
-    >
-      Account
-      : 
-    </label>
-  </div>
-  <div
-    class="ms-StackItem flex-grow-col css-110"
-  >
-    <div
-      class="ms-Dropdown-container"
-    >
-      <div
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Account"
-        aria-required="true"
-        class="ms-Dropdown is-required dropdown-111"
-        data-is-focusable="true"
-        data-ktp-target="true"
-        id="Dropdown8"
-        role="combobox"
-        tabindex="0"
-      >
-        <span
-          aria-invalid="false"
-          class="ms-Dropdown-title title-132"
-          id="Dropdown8-option"
-        >
-          MongoDB Account
-        </span>
-        <span
-          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
-        >
-          <i
-            aria-hidden="true"
-            class="ms-Dropdown-caretDown caretDown-131"
-            data-icon-name="ChevronDown"
-          >
-            
-          </i>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`AccountDropdown Snapshot Testing matches snapshot with selected account 1`] = `
-<div
-  class="ms-Stack flex-row css-109"
->
-  <div
-    class="ms-StackItem flex-fixed-width css-110"
-  >
-    <label
-      class="field-label "
-    >
-      Account
-      : 
-    </label>
-  </div>
-  <div
-    class="ms-StackItem flex-grow-col css-110"
-  >
-    <div
-      class="ms-Dropdown-container"
-    >
-      <div
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Account"
-        aria-required="true"
-        class="ms-Dropdown is-required dropdown-111"
-        data-is-focusable="true"
-        data-ktp-target="true"
-        id="Dropdown1"
-        role="combobox"
-        tabindex="0"
-      >
-        <span
-          aria-invalid="false"
-          class="ms-Dropdown-title title-132"
-          id="Dropdown1-option"
-        >
-          Production Account
-        </span>
-        <span
-          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
-        >
-          <i
-            aria-hidden="true"
-            class="ms-Dropdown-caretDown caretDown-131"
-            data-icon-name="ChevronDown"
-          >
-            
-          </i>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`AccountDropdown Snapshot Testing matches snapshot with single option 1`] = `
-<div
-  class="ms-Stack flex-row css-109"
->
-  <div
-    class="ms-StackItem flex-fixed-width css-110"
-  >
-    <label
-      class="field-label "
-    >
-      Account
-      : 
-    </label>
-  </div>
-  <div
-    class="ms-StackItem flex-grow-col css-110"
-  >
-    <div
-      class="ms-Dropdown-container"
-    >
-      <div
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Account"
-        aria-required="true"
-        class="ms-Dropdown is-required dropdown-111"
-        data-is-focusable="true"
-        data-ktp-target="true"
-        id="Dropdown4"
-        role="combobox"
-        tabindex="0"
-      >
-        <span
-          aria-invalid="false"
-          class="ms-Dropdown-title title-132"
-          id="Dropdown4-option"
-        >
-          Development Account
-        </span>
-        <span
-          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
-        >
-          <i
-            aria-hidden="true"
-            class="ms-Dropdown-caretDown caretDown-131"
-            data-icon-name="ChevronDown"
-          >
-            
-          </i>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`AccountDropdown Snapshot Testing matches snapshot with special characters in options 1`] = `
-<div
-  class="ms-Stack flex-row css-109"
->
-  <div
-    class="ms-StackItem flex-fixed-width css-110"
-  >
-    <label
-      class="field-label "
-    >
-      Account
-      : 
-    </label>
-  </div>
-  <div
-    class="ms-StackItem flex-grow-col css-110"
-  >
-    <div
-      class="ms-Dropdown-container"
-    >
-      <div
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Account"
-        aria-required="true"
-        class="ms-Dropdown is-required dropdown-111"
-        data-is-focusable="true"
-        data-ktp-target="true"
-        id="Dropdown5"
-        role="combobox"
-        tabindex="0"
-      >
-        <span
-          aria-invalid="false"
-          class="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder title-112"
-          id="Dropdown5-option"
-        >
-          Select an account
-        </span>
-        <span
-          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
-        >
-          <i
-            aria-hidden="true"
-            class="ms-Dropdown-caretDown caretDown-131"
-            data-icon-name="ChevronDown"
-          >
-            
-          </i>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
 `;

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

@@ -3,6 +3,7 @@
 exports[`MigrationTypeCheckbox Component Rendering should render in checked state 1`] = `
 <div
   class="ms-Stack migrationTypeRow css-109"
+  data-test="migration-type-checkbox"
 >
   <div
     class="ms-Checkbox is-checked is-enabled root-119"
@@ -43,6 +44,7 @@ exports[`MigrationTypeCheckbox Component Rendering should render in checked stat
 exports[`MigrationTypeCheckbox Component Rendering should render with default props (unchecked state) 1`] = `
 <div
   class="ms-Stack migrationTypeRow css-109"
+  data-test="migration-type-checkbox"
 >
   <div
     class="ms-Checkbox is-enabled root-110"

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

@@ -1,337 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SubscriptionDropdown Snapshot Testing matches snapshot with all subscription options 1`] = `
-<div
-  class="ms-Stack flex-row css-109"
->
-  <div
-    class="ms-StackItem flex-fixed-width css-110"
-  >
-    <label
-      class="field-label "
-    >
-      Subscription
-      : 
-    </label>
-  </div>
-  <div
-    class="ms-StackItem flex-grow-col css-110"
-  >
-    <div
-      class="ms-Dropdown-container"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Subscription"
-        aria-required="true"
-        class="ms-Dropdown is-required dropdown-111"
-        data-is-focusable="true"
-        data-ktp-target="true"
-        id="Dropdown0"
-        role="combobox"
-        tabindex="0"
-      >
-        <span
-          aria-invalid="false"
-          class="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder title-112"
-          id="Dropdown0-option"
-        >
-          Select a subscription
-        </span>
-        <span
-          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
-        >
-          <i
-            aria-hidden="true"
-            class="ms-Dropdown-caretDown caretDown-131"
-            data-icon-name="ChevronDown"
-          >
-            
-          </i>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SubscriptionDropdown Snapshot Testing matches snapshot with empty options 1`] = `
-<div
-  class="ms-Stack flex-row css-109"
->
-  <div
-    class="ms-StackItem flex-fixed-width css-110"
-  >
-    <label
-      class="field-label "
-    >
-      Subscription
-      : 
-    </label>
-  </div>
-  <div
-    class="ms-StackItem flex-grow-col css-110"
-  >
-    <div
-      class="ms-Dropdown-container"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Subscription"
-        aria-required="true"
-        class="ms-Dropdown is-required dropdown-111"
-        data-is-focusable="true"
-        data-ktp-target="true"
-        id="Dropdown2"
-        role="combobox"
-        tabindex="0"
-      >
-        <span
-          aria-invalid="false"
-          class="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder title-112"
-          id="Dropdown2-option"
-        >
-          Select a subscription
-        </span>
-        <span
-          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
-        >
-          <i
-            aria-hidden="true"
-            class="ms-Dropdown-caretDown caretDown-131"
-            data-icon-name="ChevronDown"
-          >
-            
-          </i>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SubscriptionDropdown Snapshot Testing matches snapshot with long subscription name 1`] = `
-<div
-  class="ms-Stack flex-row css-109"
->
-  <div
-    class="ms-StackItem flex-fixed-width css-110"
-  >
-    <label
-      class="field-label "
-    >
-      Subscription
-      : 
-    </label>
-  </div>
-  <div
-    class="ms-StackItem flex-grow-col css-110"
-  >
-    <div
-      class="ms-Dropdown-container"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Subscription"
-        aria-required="true"
-        class="ms-Dropdown is-required dropdown-111"
-        data-is-focusable="true"
-        data-ktp-target="true"
-        id="Dropdown5"
-        role="combobox"
-        tabindex="0"
-      >
-        <span
-          aria-invalid="false"
-          class="ms-Dropdown-title title-132"
-          id="Dropdown5-option"
-        >
-          This is an extremely long subscription name that tests how the component handles text overflow and layout constraints
-        </span>
-        <span
-          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
-        >
-          <i
-            aria-hidden="true"
-            class="ms-Dropdown-caretDown caretDown-131"
-            data-icon-name="ChevronDown"
-          >
-            
-          </i>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SubscriptionDropdown Snapshot Testing matches snapshot with selected subscription 1`] = `
-<div
-  class="ms-Stack flex-row css-109"
->
-  <div
-    class="ms-StackItem flex-fixed-width css-110"
-  >
-    <label
-      class="field-label "
-    >
-      Subscription
-      : 
-    </label>
-  </div>
-  <div
-    class="ms-StackItem flex-grow-col css-110"
-  >
-    <div
-      class="ms-Dropdown-container"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Subscription"
-        aria-required="true"
-        class="ms-Dropdown is-required dropdown-111"
-        data-is-focusable="true"
-        data-ktp-target="true"
-        id="Dropdown1"
-        role="combobox"
-        tabindex="0"
-      >
-        <span
-          aria-invalid="false"
-          class="ms-Dropdown-title title-132"
-          id="Dropdown1-option"
-        >
-          Production Subscription
-        </span>
-        <span
-          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
-        >
-          <i
-            aria-hidden="true"
-            class="ms-Dropdown-caretDown caretDown-131"
-            data-icon-name="ChevronDown"
-          >
-            
-          </i>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SubscriptionDropdown Snapshot Testing matches snapshot with single option 1`] = `
-<div
-  class="ms-Stack flex-row css-109"
->
-  <div
-    class="ms-StackItem flex-fixed-width css-110"
-  >
-    <label
-      class="field-label "
-    >
-      Subscription
-      : 
-    </label>
-  </div>
-  <div
-    class="ms-StackItem flex-grow-col css-110"
-  >
-    <div
-      class="ms-Dropdown-container"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Subscription"
-        aria-required="true"
-        class="ms-Dropdown is-required dropdown-111"
-        data-is-focusable="true"
-        data-ktp-target="true"
-        id="Dropdown3"
-        role="combobox"
-        tabindex="0"
-      >
-        <span
-          aria-invalid="false"
-          class="ms-Dropdown-title title-132"
-          id="Dropdown3-option"
-        >
-          Development Subscription
-        </span>
-        <span
-          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
-        >
-          <i
-            aria-hidden="true"
-            class="ms-Dropdown-caretDown caretDown-131"
-            data-icon-name="ChevronDown"
-          >
-            
-          </i>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SubscriptionDropdown Snapshot Testing matches snapshot with special characters in options 1`] = `
-<div
-  class="ms-Stack flex-row css-109"
->
-  <div
-    class="ms-StackItem flex-fixed-width css-110"
-  >
-    <label
-      class="field-label "
-    >
-      Subscription
-      : 
-    </label>
-  </div>
-  <div
-    class="ms-StackItem flex-grow-col css-110"
-  >
-    <div
-      class="ms-Dropdown-container"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Subscription"
-        aria-required="true"
-        class="ms-Dropdown is-required dropdown-111"
-        data-is-focusable="true"
-        data-ktp-target="true"
-        id="Dropdown4"
-        role="combobox"
-        tabindex="0"
-      >
-        <span
-          aria-invalid="false"
-          class="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder title-112"
-          id="Dropdown4-option"
-        >
-          Select a subscription
-        </span>
-        <span
-          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
-        >
-          <i
-            aria-hidden="true"
-            class="ms-Dropdown-caretDown caretDown-131"
-            data-icon-name="ChevronDown"
-          >
-            
-          </i>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;

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

@@ -1,480 +1,170 @@
 import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
-import { apiType } from "UserContext";
-import { DatabaseAccount, Subscription } from "../../../../../Contracts/DataModels";
-import { useDatabaseAccounts } from "../../../../../hooks/useDatabaseAccounts";
-import { useSubscriptions } from "../../../../../hooks/useSubscriptions";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
 import { CopyJobMigrationType } from "../../../Enums/CopyJobEnums";
-import { CopyJobContextProviderType, CopyJobContextState } from "../../../Types/CopyJobTypes";
+import { CopyJobContextProviderType } from "../../../Types/CopyJobTypes";
 import SelectAccount from "./SelectAccount";
 
-jest.mock("UserContext", () => ({
-  apiType: jest.fn(),
-}));
-
-jest.mock("../../../../../hooks/useDatabaseAccounts");
-jest.mock("../../../../../hooks/useSubscriptions");
 jest.mock("../../../Context/CopyJobContext", () => ({
-  useCopyJobContext: () => mockContextValue,
-}));
-
-jest.mock("./Utils/selectAccountUtils", () => ({
-  useDropdownOptions: jest.fn(),
-  useEventHandlers: jest.fn(),
+  useCopyJobContext: jest.fn(),
 }));
 
 jest.mock("./Components/SubscriptionDropdown", () => ({
-  SubscriptionDropdown: jest.fn(({ options, selectedKey, onChange, ...props }) => (
-    <div data-testid="subscription-dropdown" data-selected={selectedKey} {...props}>
-      {options?.map((option: any) => (
-        <div
-          key={option.key}
-          data-testid={`subscription-option-${option.key}`}
-          onClick={() => onChange?.(undefined, option)}
-        >
-          {option.text}
-        </div>
-      ))}
-    </div>
-  )),
+  SubscriptionDropdown: jest.fn(() => <div data-testid="subscription-dropdown">Subscription Dropdown</div>),
 }));
 
 jest.mock("./Components/AccountDropdown", () => ({
-  AccountDropdown: jest.fn(({ options, selectedKey, disabled, onChange, ...props }) => (
-    <div data-testid="account-dropdown" data-selected={selectedKey} data-disabled={disabled} {...props}>
-      {options?.map((option: any) => (
-        <div
-          key={option.key}
-          data-testid={`account-option-${option.key}`}
-          onClick={() => onChange?.(undefined, option)}
-        >
-          {option.text}
-        </div>
-      ))}
-    </div>
-  )),
+  AccountDropdown: jest.fn(() => <div data-testid="account-dropdown">Account Dropdown</div>),
 }));
 
 jest.mock("./Components/MigrationTypeCheckbox", () => ({
-  MigrationTypeCheckbox: jest.fn(({ checked, onChange, ...props }) => (
-    <div data-testid="migration-type-checkbox" data-checked={checked} {...props}>
+  MigrationTypeCheckbox: jest.fn(({ checked, onChange }: { checked: boolean; onChange: () => void }) => (
+    <div data-testid="migration-type-checkbox">
       <input
         type="checkbox"
         checked={checked}
-        onChange={(e) => onChange?.(e, e.target.checked)}
+        onChange={onChange}
         data-testid="migration-checkbox-input"
+        aria-label="Migration Type Checkbox"
       />
+      Copy container in offline mode
     </div>
   )),
 }));
 
-jest.mock("../../../ContainerCopyMessages", () => ({
-  selectAccountDescription: "Select your source account and subscription",
-}));
+describe("SelectAccount", () => {
+  const mockSetCopyJobState = jest.fn();
 
-const mockUseDatabaseAccounts = useDatabaseAccounts as jest.MockedFunction<typeof useDatabaseAccounts>;
-const mockUseSubscriptions = useSubscriptions as jest.MockedFunction<typeof useSubscriptions>;
-const mockApiType = apiType as jest.MockedFunction<typeof apiType>;
-
-import { useDropdownOptions, useEventHandlers } from "./Utils/selectAccountUtils";
-const mockUseDropdownOptions = useDropdownOptions as jest.MockedFunction<typeof useDropdownOptions>;
-const mockUseEventHandlers = useEventHandlers as jest.MockedFunction<typeof useEventHandlers>;
-
-const mockSubscriptions = [
-  {
-    subscriptionId: "sub-1",
-    displayName: "Test Subscription 1",
-    authorizationSource: "RoleBased",
-    subscriptionPolicies: {
-      quotaId: "quota-1",
-      spendingLimit: "Off",
-      locationPlacementId: "loc-1",
-    },
-  },
-  {
-    subscriptionId: "sub-2",
-    displayName: "Test Subscription 2",
-    authorizationSource: "RoleBased",
-    subscriptionPolicies: {
-      quotaId: "quota-2",
-      spendingLimit: "On",
-      locationPlacementId: "loc-2",
-    },
-  },
-] as Subscription[];
-
-const mockAccounts = [
-  {
-    id: "/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1",
-    name: "test-cosmos-account-1",
-    location: "East US",
-    kind: "GlobalDocumentDB",
-    properties: {
-      documentEndpoint: "https://account-1.documents.azure.com/",
-      capabilities: [],
-      enableFreeTier: false,
-    },
-  },
-  {
-    id: "/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-2",
-    name: "test-cosmos-account-2",
-    location: "West US",
-    kind: "MongoDB",
-    properties: {
-      documentEndpoint: "https://account-2.documents.azure.com/",
-      capabilities: [],
-    },
-  },
-] as DatabaseAccount[];
-
-const mockDropdownOptions = {
-  subscriptionOptions: [
-    { key: "sub-1", text: "Test Subscription 1", data: mockSubscriptions[0] },
-    { key: "sub-2", text: "Test Subscription 2", data: mockSubscriptions[1] },
-  ],
-  accountOptions: [{ key: mockAccounts[0].id, text: mockAccounts[0].name, data: mockAccounts[0] }],
-};
-
-const mockEventHandlers = {
-  handleSelectSourceAccount: jest.fn(),
-  handleMigrationTypeChange: jest.fn(),
-};
-
-let mockContextValue = {
+  const defaultContextValue: CopyJobContextProviderType = {
     copyJobState: {
       jobName: "",
-    migrationType: CopyJobMigrationType.Offline,
+      migrationType: CopyJobMigrationType.Online,
       source: {
-      subscription: null,
-      account: null,
+        subscription: null as any,
+        account: null as any,
         databaseId: "",
         containerId: "",
       },
       target: {
         subscriptionId: "",
-      account: null,
+        account: null as any,
         databaseId: "",
         containerId: "",
       },
       sourceReadAccessFromTarget: false,
-  } as CopyJobContextState,
-  setCopyJobState: jest.fn(),
-  flow: null,
+    },
+    setCopyJobState: mockSetCopyJobState,
+    flow: { currentScreen: "selectAccount" },
     setFlow: jest.fn(),
     contextError: null,
     setContextError: jest.fn(),
-  resetCopyJobState: jest.fn(),
     explorer: {} as any,
-} as CopyJobContextProviderType;
+    resetCopyJobState: jest.fn(),
+  };
 
-describe("SelectAccount Component", () => {
   beforeEach(() => {
     jest.clearAllMocks();
-
-    mockContextValue = {
-      copyJobState: {
-        jobName: "",
-        migrationType: CopyJobMigrationType.Offline,
-        source: {
-          subscription: null,
-          account: null,
-          databaseId: "",
-          containerId: "",
-        },
-        target: {
-          subscriptionId: "",
-          account: null,
-          databaseId: "",
-          containerId: "",
-        },
-        sourceReadAccessFromTarget: false,
-      } as CopyJobContextState,
-      setCopyJobState: jest.fn(),
-      flow: null,
-      setFlow: jest.fn(),
-      contextError: null,
-      setContextError: jest.fn(),
-      resetCopyJobState: jest.fn(),
-      explorer: {} as any,
-    };
-
-    mockUseSubscriptions.mockReturnValue(mockSubscriptions);
-    mockUseDatabaseAccounts.mockReturnValue(mockAccounts);
-    mockApiType.mockReturnValue("SQL");
-    mockUseDropdownOptions.mockReturnValue(mockDropdownOptions);
-    mockUseEventHandlers.mockReturnValue(mockEventHandlers);
+    (useCopyJobContext as jest.Mock).mockReturnValue(defaultContextValue);
   });
 
-  describe("Rendering", () => {
-    it("should render component with default state", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Component Rendering", () => {
+    it("should render the component with all required elements", () => {
       const { container } = render(<SelectAccount />);
 
-      expect(screen.getByText("Select your source account and subscription")).toBeInTheDocument();
+      expect(container.firstChild).toHaveAttribute("data-test", "Panel:SelectAccountContainer");
+      expect(container.firstChild).toHaveClass("selectAccountContainer");
+
+      expect(screen.getByText(/Please select a source account from which to copy/i)).toBeInTheDocument();
+
       expect(screen.getByTestId("subscription-dropdown")).toBeInTheDocument();
       expect(screen.getByTestId("account-dropdown")).toBeInTheDocument();
       expect(screen.getByTestId("migration-type-checkbox")).toBeInTheDocument();
-      expect(container).toMatchSnapshot();
     });
 
-    it("should render with selected subscription", () => {
-      mockContextValue.copyJobState.source.subscription = mockSubscriptions[0];
-
+    it("should render correctly with snapshot", () => {
       const { container } = render(<SelectAccount />);
-
-      expect(screen.getByTestId("subscription-dropdown")).toHaveAttribute("data-selected", "sub-1");
-      expect(container).toMatchSnapshot();
-    });
-
-    it("should render with selected account", () => {
-      mockContextValue.copyJobState.source.subscription = mockSubscriptions[0];
-      mockContextValue.copyJobState.source.account = mockAccounts[0];
-
-      const { container } = render(<SelectAccount />);
-
-      expect(screen.getByTestId("account-dropdown")).toHaveAttribute("data-selected", mockAccounts[0].id);
-      expect(container).toMatchSnapshot();
-    });
-
-    it("should render with offline migration type checked", () => {
-      mockContextValue.copyJobState.migrationType = CopyJobMigrationType.Offline;
-
-      const { container } = render(<SelectAccount />);
-
-      expect(screen.getByTestId("migration-type-checkbox")).toHaveAttribute("data-checked", "true");
-      expect(container).toMatchSnapshot();
-    });
-
-    it("should render with online migration type unchecked", () => {
-      mockContextValue.copyJobState.migrationType = CopyJobMigrationType.Online;
-
-      const { container } = render(<SelectAccount />);
-
-      expect(screen.getByTestId("migration-type-checkbox")).toHaveAttribute("data-checked", "false");
-      expect(container).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
   });
 
-  describe("Hook Integration", () => {
-    it("should call useSubscriptions hook", () => {
-      render(<SelectAccount />);
-      expect(mockUseSubscriptions).toHaveBeenCalledTimes(1);
+  describe("Migration Type Functionality", () => {
+    it("should display migration type checkbox as unchecked when migrationType is Online", () => {
+      (useCopyJobContext as jest.Mock).mockReturnValue({
+        ...defaultContextValue,
+        copyJobState: {
+          ...defaultContextValue.copyJobState,
+          migrationType: CopyJobMigrationType.Online,
+        },
       });
 
-    it("should call useDatabaseAccounts with selected subscription ID", () => {
-      mockContextValue.copyJobState.source.subscription = mockSubscriptions[0];
-      render(<SelectAccount />);
-
-      expect(mockUseDatabaseAccounts).toHaveBeenCalledWith("sub-1");
-    });
-
-    it("should call useDatabaseAccounts with undefined when no subscription selected", () => {
-      render(<SelectAccount />);
-      expect(mockUseDatabaseAccounts).toHaveBeenCalledWith(undefined);
-    });
-
-    it("should filter accounts to SQL API only", () => {
-      mockApiType.mockReturnValueOnce("SQL").mockReturnValueOnce("Mongo");
-      render(<SelectAccount />);
-
-      expect(mockApiType).toHaveBeenCalledTimes(2);
-      expect(mockApiType).toHaveBeenCalledWith(mockAccounts[0]);
-      expect(mockApiType).toHaveBeenCalledWith(mockAccounts[1]);
-    });
-
-    it("should call useDropdownOptions with correct parameters", () => {
-      const sqlOnlyAccounts = [mockAccounts[0]]; // Only SQL account
-      mockApiType.mockImplementation((account) => (account === mockAccounts[0] ? "SQL" : "Mongo"));
-
       render(<SelectAccount />);
 
-      expect(mockUseDropdownOptions).toHaveBeenCalledWith(mockSubscriptions, sqlOnlyAccounts);
+      const checkbox = screen.getByTestId("migration-checkbox-input");
+      expect(checkbox).not.toBeChecked();
     });
 
-    it("should call useEventHandlers with setCopyJobState", () => {
-      render(<SelectAccount />);
-      expect(mockUseEventHandlers).toHaveBeenCalledWith(mockContextValue.setCopyJobState);
-    });
+    it("should display migration type checkbox as checked when migrationType is Offline", () => {
+      (useCopyJobContext as jest.Mock).mockReturnValue({
+        ...defaultContextValue,
+        copyJobState: {
+          ...defaultContextValue.copyJobState,
+          migrationType: CopyJobMigrationType.Offline,
+        },
       });
 
-  describe("Event Handling", () => {
-    it("should handle subscription selection", () => {
       render(<SelectAccount />);
 
-      const subscriptionOption = screen.getByTestId("subscription-option-sub-1");
-      fireEvent.click(subscriptionOption);
-
-      expect(mockEventHandlers.handleSelectSourceAccount).toHaveBeenCalledWith("subscription", mockSubscriptions[0]);
+      const checkbox = screen.getByTestId("migration-checkbox-input");
+      expect(checkbox).toBeChecked();
     });
 
-    it("should handle account selection", () => {
-      render(<SelectAccount />);
-
-      const accountOption = screen.getByTestId(`account-option-${mockAccounts[0].id}`);
-      fireEvent.click(accountOption);
-
-      expect(mockEventHandlers.handleSelectSourceAccount).toHaveBeenCalledWith("account", mockAccounts[0]);
+    it("should call setCopyJobState with Online migration type when checkbox is unchecked", () => {
+      (useCopyJobContext as jest.Mock).mockReturnValue({
+        ...defaultContextValue,
+        copyJobState: {
+          ...defaultContextValue.copyJobState,
+          migrationType: CopyJobMigrationType.Offline,
+        },
       });
 
-    it("should handle migration type change", () => {
       render(<SelectAccount />);
+
       const checkbox = screen.getByTestId("migration-checkbox-input");
       fireEvent.click(checkbox);
 
-      expect(mockEventHandlers.handleMigrationTypeChange).toHaveBeenCalledWith(expect.any(Object), false);
-    });
-  });
+      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
 
-  describe("Dropdown States", () => {
-    it("should disable account dropdown when no subscription is selected", () => {
-      render(<SelectAccount />);
+      const updateFunction = mockSetCopyJobState.mock.calls[0][0];
+      const previousState = {
+        ...defaultContextValue.copyJobState,
+        migrationType: CopyJobMigrationType.Offline,
+      };
+      const result = updateFunction(previousState);
 
-      expect(screen.getByTestId("account-dropdown")).toHaveAttribute("data-disabled", "true");
-    });
-
-    it("should enable account dropdown when subscription is selected", () => {
-      mockContextValue.copyJobState.source.subscription = mockSubscriptions[0];
-
-      render(<SelectAccount />);
-
-      expect(screen.getByTestId("account-dropdown")).toHaveAttribute("data-disabled", "false");
-    });
-  });
-
-  describe("Component Props", () => {
-    it("should pass correct props to SubscriptionDropdown", () => {
-      render(<SelectAccount />);
-
-      const dropdown = screen.getByTestId("subscription-dropdown");
-      expect(dropdown).not.toHaveAttribute("data-selected");
-    });
-
-    it("should pass selected subscription ID to SubscriptionDropdown", () => {
-      mockContextValue.copyJobState.source.subscription = mockSubscriptions[0];
-
-      render(<SelectAccount />);
-
-      const dropdown = screen.getByTestId("subscription-dropdown");
-      expect(dropdown).toHaveAttribute("data-selected", "sub-1");
-    });
-
-    it("should pass correct props to AccountDropdown", () => {
-      render(<SelectAccount />);
-
-      const dropdown = screen.getByTestId("account-dropdown");
-      expect(dropdown).not.toHaveAttribute("data-selected");
-      expect(dropdown).toHaveAttribute("data-disabled", "true");
-    });
-
-    it("should pass selected account ID to AccountDropdown", () => {
-      mockContextValue.copyJobState.source.account = mockAccounts[0];
-
-      render(<SelectAccount />);
-
-      const dropdown = screen.getByTestId("account-dropdown");
-      expect(dropdown).toHaveAttribute("data-selected", mockAccounts[0].id);
-    });
-
-    it("should pass correct checked state to MigrationTypeCheckbox", () => {
-      mockContextValue.copyJobState.migrationType = CopyJobMigrationType.Offline;
-
-      render(<SelectAccount />);
-
-      const checkbox = screen.getByTestId("migration-type-checkbox");
-      expect(checkbox).toHaveAttribute("data-checked", "true");
-    });
-  });
-
-  describe("Edge Cases", () => {
-    it("should handle empty subscriptions array", () => {
-      mockUseSubscriptions.mockReturnValue([]);
-      mockUseDropdownOptions.mockReturnValue({
-        subscriptionOptions: [],
-        accountOptions: [],
-      });
-
-      const { container } = render(<SelectAccount />);
-      expect(container).toMatchSnapshot();
-    });
-
-    it("should handle empty accounts array", () => {
-      mockUseDatabaseAccounts.mockReturnValue([]);
-      mockUseDropdownOptions.mockReturnValue({
-        subscriptionOptions: mockDropdownOptions.subscriptionOptions,
-        accountOptions: [],
-      });
-
-      const { container } = render(<SelectAccount />);
-      expect(container).toMatchSnapshot();
-    });
-
-    it("should handle null subscription in context", () => {
-      mockContextValue.copyJobState.source.subscription = null;
-
-      const { container } = render(<SelectAccount />);
-      expect(container).toMatchSnapshot();
-    });
-
-    it("should handle null account in context", () => {
-      mockContextValue.copyJobState.source.account = null;
-
-      const { container } = render(<SelectAccount />);
-      expect(container).toMatchSnapshot();
-    });
-
-    it("should handle undefined subscriptions from hook", () => {
-      mockUseSubscriptions.mockReturnValue(undefined as any);
-      mockUseDropdownOptions.mockReturnValue({
-        subscriptionOptions: [],
-        accountOptions: [],
-      });
-
-      const { container } = render(<SelectAccount />);
-      expect(container).toMatchSnapshot();
-    });
-
-    it("should handle undefined accounts from hook", () => {
-      mockUseDatabaseAccounts.mockReturnValue(undefined as any);
-      mockUseDropdownOptions.mockReturnValue({
-        subscriptionOptions: mockDropdownOptions.subscriptionOptions,
-        accountOptions: [],
-      });
-
-      const { container } = render(<SelectAccount />);
-      expect(container).toMatchSnapshot();
-    });
-
-    it("should filter out non-SQL accounts correctly", () => {
-      const mixedAccounts = [
-        { ...mockAccounts[0], kind: "GlobalDocumentDB" },
-        { ...mockAccounts[1], kind: "MongoDB" },
-      ];
-
-      mockUseDatabaseAccounts.mockReturnValue(mixedAccounts);
-      mockApiType.mockImplementation((account) => (account.kind === "GlobalDocumentDB" ? "SQL" : "Mongo"));
-
-      render(<SelectAccount />);
-      expect(mockApiType).toHaveBeenCalledTimes(2);
-
-      const sqlOnlyAccounts = mixedAccounts.filter((account) => apiType(account) === "SQL");
-      expect(mockUseDropdownOptions).toHaveBeenCalledWith(mockSubscriptions, sqlOnlyAccounts);
-    });
-  });
-
-  describe("Complete Workflow", () => {
-    it("should render complete workflow with all selections", () => {
-      mockContextValue.copyJobState.source.subscription = mockSubscriptions[0];
-      mockContextValue.copyJobState.source.account = mockAccounts[0];
-      mockContextValue.copyJobState.migrationType = CopyJobMigrationType.Online;
-
-      const { container } = render(<SelectAccount />);
-
-      expect(screen.getByTestId("subscription-dropdown")).toHaveAttribute("data-selected", "sub-1");
-      expect(screen.getByTestId("account-dropdown")).toHaveAttribute("data-selected", mockAccounts[0].id);
-      expect(screen.getByTestId("account-dropdown")).toHaveAttribute("data-disabled", "false");
-      expect(screen.getByTestId("migration-type-checkbox")).toHaveAttribute("data-checked", "false");
-
-      expect(container).toMatchSnapshot();
+      expect(result).toEqual({
+        ...previousState,
+        migrationType: CopyJobMigrationType.Online,
+      });
+    });
+  });
+
+  describe("Performance and Optimization", () => {
+    it("should maintain referential equality of handler functions between renders", async () => {
+      const { rerender } = render(<SelectAccount />);
+
+      const migrationCheckbox = (await import("./Components/MigrationTypeCheckbox")).MigrationTypeCheckbox as jest.Mock;
+      const firstRenderHandler = migrationCheckbox.mock.calls[migrationCheckbox.mock.calls.length - 1][0].onChange;
+
+      rerender(<SelectAccount />);
+
+      const secondRenderHandler = migrationCheckbox.mock.calls[migrationCheckbox.mock.calls.length - 1][0].onChange;
+
+      expect(firstRenderHandler).toBe(secondRenderHandler);
     });
   });
 });

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

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

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

@@ -1,526 +0,0 @@
-import "@testing-library/jest-dom";
-import { fireEvent, render } from "@testing-library/react";
-import React from "react";
-import { noop } from "underscore";
-import { DatabaseAccount, Subscription } from "../../../../../../Contracts/DataModels";
-import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
-import { CopyJobContextState } from "../../../../Types/CopyJobTypes";
-import { useDropdownOptions, useEventHandlers } from "./selectAccountUtils";
-
-jest.mock("../../../Utils/useCopyJobPrerequisitesCache", () => ({
-  useCopyJobPrerequisitesCache: jest.fn(() => ({
-    setValidationCache: jest.fn(),
-  })),
-}));
-
-const mockSubscriptions: Subscription[] = [
-  {
-    subscriptionId: "sub-1",
-    displayName: "Test Subscription 1",
-    state: "Enabled",
-    subscriptionPolicies: {
-      locationPlacementId: "test",
-      quotaId: "test",
-      spendingLimit: "Off",
-    },
-  },
-  {
-    subscriptionId: "sub-2",
-    displayName: "Test Subscription 2",
-    state: "Enabled",
-    subscriptionPolicies: {
-      locationPlacementId: "test",
-      quotaId: "test",
-      spendingLimit: "Off",
-    },
-  },
-];
-
-const mockAccounts: DatabaseAccount[] = [
-  {
-    id: "account-1",
-    name: "Test Account 1",
-    location: "East US",
-    type: "Microsoft.DocumentDB/databaseAccounts",
-    kind: "GlobalDocumentDB",
-    properties: {
-      documentEndpoint: "https://test1.documents.azure.com:443/",
-      gremlinEndpoint: "https://test1.gremlin.cosmosdb.azure.com:443/",
-      tableEndpoint: "https://test1.table.cosmosdb.azure.com:443/",
-      cassandraEndpoint: "https://test1.cassandra.cosmosdb.azure.com:443/",
-      capabilities: [],
-      writeLocations: [],
-      readLocations: [],
-      locations: [],
-      ipRules: [],
-      enableMultipleWriteLocations: false,
-      isVirtualNetworkFilterEnabled: false,
-      enableFreeTier: false,
-      enableAnalyticalStorage: false,
-      publicNetworkAccess: "Enabled",
-      defaultIdentity: "",
-      disableLocalAuth: false,
-    },
-  },
-  {
-    id: "account-2",
-    name: "Test Account 2",
-    location: "West US",
-    type: "Microsoft.DocumentDB/databaseAccounts",
-    kind: "GlobalDocumentDB",
-    properties: {
-      documentEndpoint: "https://test2.documents.azure.com:443/",
-      gremlinEndpoint: "https://test2.gremlin.cosmosdb.azure.com:443/",
-      tableEndpoint: "https://test2.table.cosmosdb.azure.com:443/",
-      cassandraEndpoint: "https://test2.cassandra.cosmosdb.azure.com:443/",
-      capabilities: [],
-      writeLocations: [],
-      readLocations: [],
-      locations: [],
-      enableMultipleWriteLocations: false,
-      isVirtualNetworkFilterEnabled: false,
-      enableFreeTier: false,
-      enableAnalyticalStorage: false,
-      publicNetworkAccess: "Enabled",
-      defaultIdentity: "",
-      disableLocalAuth: false,
-    },
-  },
-];
-
-const DropdownOptionsTestComponent: React.FC<{
-  subscriptions: Subscription[];
-  accounts: DatabaseAccount[];
-  onResult?: (result: { subscriptionOptions: any[]; accountOptions: any[] }) => void;
-}> = ({ subscriptions, accounts, onResult }) => {
-  const result = useDropdownOptions(subscriptions, accounts);
-
-  React.useEffect(() => {
-    if (onResult) {
-      onResult(result);
-    }
-  }, [result, onResult]);
-
-  return (
-    <div>
-      <div data-testid="subscription-options-count">{result.subscriptionOptions.length}</div>
-      <div data-testid="account-options-count">{result.accountOptions.length}</div>
-    </div>
-  );
-};
-
-const EventHandlersTestComponent: React.FC<{
-  setCopyJobState: jest.Mock;
-  onResult?: (result: any) => void;
-}> = ({ setCopyJobState, onResult }) => {
-  const result = useEventHandlers(setCopyJobState);
-
-  React.useEffect(() => {
-    if (onResult) {
-      onResult(result);
-    }
-  }, [result, onResult]);
-
-  return (
-    <div>
-      <button
-        data-testid="select-subscription-button"
-        onClick={() => result.handleSelectSourceAccount("subscription", mockSubscriptions[0] as any)}
-      >
-        Select Subscription
-      </button>
-      <button
-        data-testid="select-account-button"
-        onClick={() => result.handleSelectSourceAccount("account", mockAccounts[0] as any)}
-      >
-        Select Account
-      </button>
-      <button data-testid="migration-type-button" onClick={(e) => result.handleMigrationTypeChange(e, true)}>
-        Change Migration Type
-      </button>
-    </div>
-  );
-};
-
-describe("selectAccountUtils", () => {
-  describe("useDropdownOptions", () => {
-    it("should return empty arrays when subscriptions and accounts are undefined", () => {
-      let capturedResult: any;
-
-      render(
-        <DropdownOptionsTestComponent
-          subscriptions={undefined as any}
-          accounts={undefined as any}
-          onResult={(result) => {
-            capturedResult = result;
-          }}
-        />,
-      );
-
-      expect(capturedResult).toEqual({
-        subscriptionOptions: [],
-        accountOptions: [],
-      });
-    });
-
-    it("should return empty arrays when subscriptions and accounts are empty arrays", () => {
-      let capturedResult: any;
-
-      render(
-        <DropdownOptionsTestComponent
-          subscriptions={[]}
-          accounts={[]}
-          onResult={(result) => {
-            capturedResult = result;
-          }}
-        />,
-      );
-
-      expect(capturedResult).toEqual({
-        subscriptionOptions: [],
-        accountOptions: [],
-      });
-    });
-
-    it("should transform subscriptions into dropdown options correctly", () => {
-      let capturedResult: any;
-
-      render(
-        <DropdownOptionsTestComponent
-          subscriptions={mockSubscriptions}
-          accounts={[]}
-          onResult={(result) => {
-            capturedResult = result;
-          }}
-        />,
-      );
-
-      expect(capturedResult.subscriptionOptions).toHaveLength(2);
-      expect(capturedResult.subscriptionOptions[0]).toEqual({
-        key: "sub-1",
-        text: "Test Subscription 1",
-        data: mockSubscriptions[0],
-      });
-      expect(capturedResult.subscriptionOptions[1]).toEqual({
-        key: "sub-2",
-        text: "Test Subscription 2",
-        data: mockSubscriptions[1],
-      });
-    });
-
-    it("should transform accounts into dropdown options correctly", () => {
-      let capturedResult: any;
-
-      render(
-        <DropdownOptionsTestComponent
-          subscriptions={[]}
-          accounts={mockAccounts}
-          onResult={(result) => {
-            capturedResult = result;
-          }}
-        />,
-      );
-
-      expect(capturedResult.accountOptions).toHaveLength(2);
-      expect(capturedResult.accountOptions[0]).toEqual({
-        key: "account-1",
-        text: "Test Account 1",
-        data: mockAccounts[0],
-      });
-      expect(capturedResult.accountOptions[1]).toEqual({
-        key: "account-2",
-        text: "Test Account 2",
-        data: mockAccounts[1],
-      });
-    });
-
-    it("should handle both subscriptions and accounts correctly", () => {
-      let capturedResult: any;
-
-      render(
-        <DropdownOptionsTestComponent
-          subscriptions={mockSubscriptions}
-          accounts={mockAccounts}
-          onResult={(result) => {
-            capturedResult = result;
-          }}
-        />,
-      );
-
-      expect(capturedResult.subscriptionOptions).toHaveLength(2);
-      expect(capturedResult.accountOptions).toHaveLength(2);
-    });
-  });
-
-  describe("useEventHandlers", () => {
-    let mockSetCopyJobState: jest.Mock;
-    let mockSetValidationCache: jest.Mock;
-
-    beforeEach(async () => {
-      mockSetCopyJobState = jest.fn();
-      mockSetValidationCache = jest.fn();
-
-      const { useCopyJobPrerequisitesCache } = await import("../../../Utils/useCopyJobPrerequisitesCache");
-      (useCopyJobPrerequisitesCache as unknown as jest.Mock).mockReturnValue({
-        setValidationCache: mockSetValidationCache,
-      });
-    });
-
-    afterEach(() => {
-      jest.clearAllMocks();
-    });
-
-    it("should handle subscription selection correctly", () => {
-      const { getByTestId } = render(
-        <EventHandlersTestComponent setCopyJobState={mockSetCopyJobState} onResult={noop} />,
-      );
-
-      fireEvent.click(getByTestId("select-subscription-button"));
-
-      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
-      expect(mockSetValidationCache).toHaveBeenCalledWith(new Map<string, boolean>());
-
-      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
-      const mockPrevState: CopyJobContextState = {
-        source: {
-          subscription: null,
-          account: { id: "existing-account" } as any,
-        },
-        migrationType: CopyJobMigrationType.Online,
-      } as any;
-
-      const newState = stateUpdater(mockPrevState);
-      expect(newState).toEqual({
-        source: {
-          subscription: mockSubscriptions[0],
-          account: null,
-        },
-        migrationType: CopyJobMigrationType.Online,
-      });
-    });
-
-    it("should handle account selection correctly", () => {
-      const { getByTestId } = render(
-        <EventHandlersTestComponent setCopyJobState={mockSetCopyJobState} onResult={noop} />,
-      );
-
-      fireEvent.click(getByTestId("select-account-button"));
-
-      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
-      expect(mockSetValidationCache).toHaveBeenCalledWith(new Map<string, boolean>());
-
-      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
-      const mockPrevState: CopyJobContextState = {
-        source: {
-          subscription: { subscriptionId: "existing-sub" } as any,
-          account: null,
-        },
-        migrationType: CopyJobMigrationType.Online,
-      } as any;
-
-      const newState = stateUpdater(mockPrevState);
-      expect(newState).toEqual({
-        source: {
-          subscription: { subscriptionId: "existing-sub" },
-          account: mockAccounts[0],
-        },
-        migrationType: CopyJobMigrationType.Online,
-      });
-    });
-
-    it("should handle subscription selection with undefined data", () => {
-      let capturedHandlers: any;
-
-      render(
-        <EventHandlersTestComponent
-          setCopyJobState={mockSetCopyJobState}
-          onResult={(result) => {
-            capturedHandlers = result;
-          }}
-        />,
-      );
-
-      capturedHandlers.handleSelectSourceAccount("subscription", undefined);
-
-      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
-
-      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
-      const mockPrevState: CopyJobContextState = {
-        source: {
-          subscription: { subscriptionId: "existing-sub" } as any,
-          account: { id: "existing-account" } as any,
-        },
-        migrationType: CopyJobMigrationType.Online,
-      } as any;
-
-      const newState = stateUpdater(mockPrevState);
-      expect(newState).toEqual({
-        source: {
-          subscription: null,
-          account: null,
-        },
-        migrationType: CopyJobMigrationType.Online,
-      });
-    });
-
-    it("should handle account selection with undefined data", () => {
-      let capturedHandlers: any;
-
-      render(
-        <EventHandlersTestComponent
-          setCopyJobState={mockSetCopyJobState}
-          onResult={(result) => {
-            capturedHandlers = result;
-          }}
-        />,
-      );
-
-      capturedHandlers.handleSelectSourceAccount("account", undefined);
-
-      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
-
-      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
-      const mockPrevState: CopyJobContextState = {
-        source: {
-          subscription: { subscriptionId: "existing-sub" } as any,
-          account: { id: "existing-account" } as any,
-        },
-        migrationType: CopyJobMigrationType.Online,
-      } as any;
-
-      const newState = stateUpdater(mockPrevState);
-      expect(newState).toEqual({
-        source: {
-          subscription: { subscriptionId: "existing-sub" },
-          account: null,
-        },
-        migrationType: CopyJobMigrationType.Online,
-      });
-    });
-
-    it("should handle migration type change to offline", () => {
-      const { getByTestId } = render(<EventHandlersTestComponent setCopyJobState={mockSetCopyJobState} />);
-
-      fireEvent.click(getByTestId("migration-type-button"));
-
-      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
-      expect(mockSetValidationCache).toHaveBeenCalledWith(new Map<string, boolean>());
-
-      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
-      const mockPrevState: CopyJobContextState = {
-        source: {
-          subscription: null,
-          account: null,
-        },
-        migrationType: CopyJobMigrationType.Online,
-      } as any;
-
-      const newState = stateUpdater(mockPrevState);
-      expect(newState).toEqual({
-        source: {
-          subscription: null,
-          account: null,
-        },
-        migrationType: CopyJobMigrationType.Offline,
-      });
-    });
-
-    it("should handle migration type change to online when checked is false", () => {
-      let capturedHandlers: any;
-
-      render(
-        <EventHandlersTestComponent
-          setCopyJobState={mockSetCopyJobState}
-          onResult={(result) => {
-            capturedHandlers = result;
-          }}
-        />,
-      );
-
-      capturedHandlers.handleMigrationTypeChange(undefined, false);
-
-      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
-
-      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
-      const mockPrevState: CopyJobContextState = {
-        source: {
-          subscription: null,
-          account: null,
-        },
-        migrationType: CopyJobMigrationType.Offline,
-      } as any;
-
-      const newState = stateUpdater(mockPrevState);
-      expect(newState).toEqual({
-        source: {
-          subscription: null,
-          account: null,
-        },
-        migrationType: CopyJobMigrationType.Online,
-      });
-    });
-
-    it("should preserve other state properties when updating", () => {
-      let capturedHandlers: any;
-
-      render(
-        <EventHandlersTestComponent
-          setCopyJobState={mockSetCopyJobState}
-          onResult={(result) => {
-            capturedHandlers = result;
-          }}
-        />,
-      );
-
-      capturedHandlers.handleSelectSourceAccount("subscription", mockSubscriptions[0] as Subscription);
-
-      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
-      const mockPrevState = {
-        jobName: "Test Job",
-        source: {
-          subscription: null,
-          account: null,
-          databaseId: "test-database-id",
-          containerId: "test-container-id",
-        },
-        migrationType: CopyJobMigrationType.Online,
-        target: {
-          account: { id: "dest-account" } as DatabaseAccount,
-          databaseId: "test-database-id",
-          containerId: "test-container-id",
-          subscriptionId: "dest-sub-id",
-        },
-      } as CopyJobContextState;
-
-      const newState = stateUpdater(mockPrevState);
-      expect(newState.target).toEqual(mockPrevState.target);
-    });
-
-    it("should return the same state for unknown selection type", () => {
-      let capturedHandlers: any;
-
-      render(
-        <EventHandlersTestComponent
-          setCopyJobState={mockSetCopyJobState}
-          onResult={(result) => {
-            capturedHandlers = result;
-          }}
-        />,
-      );
-
-      capturedHandlers.handleSelectSourceAccount("unknown" as any, mockSubscriptions[0] as any);
-
-      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
-      const mockPrevState: CopyJobContextState = {
-        source: {
-          subscription: { subscriptionId: "existing-sub" } as any,
-          account: { id: "existing-account" } as any,
-        },
-        migrationType: CopyJobMigrationType.Online,
-      } as any;
-
-      const newState = stateUpdater(mockPrevState);
-      expect(newState).toEqual(mockPrevState);
-    });
-  });
-});

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

@@ -1,80 +0,0 @@
-import React from "react";
-import { DatabaseAccount, Subscription } from "../../../../../../Contracts/DataModels";
-import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
-import { CopyJobContextProviderType, CopyJobContextState, DropdownOptionType } from "../../../../Types/CopyJobTypes";
-import { useCopyJobPrerequisitesCache } from "../../../Utils/useCopyJobPrerequisitesCache";
-
-export function useDropdownOptions(
-  subscriptions: Subscription[],
-  accounts: DatabaseAccount[],
-): {
-  subscriptionOptions: DropdownOptionType[];
-  accountOptions: DropdownOptionType[];
-} {
-  const subscriptionOptions =
-    subscriptions?.map((sub) => ({
-      key: sub.subscriptionId,
-      text: sub.displayName,
-      data: sub,
-    })) || [];
-
-  const normalizeAccountId = (id: string) => {
-    if (!id) {
-      return id;
-    }
-    return id.replace(/\/Microsoft\.DocumentDb\//i, "/Microsoft.DocumentDB/");
-  };
-
-  const accountOptions =
-    accounts?.map((account) => ({
-      key: normalizeAccountId(account.id),
-      text: account.name,
-      data: account,
-    })) || [];
-
-  return { subscriptionOptions, accountOptions };
-}
-
-type setCopyJobStateType = CopyJobContextProviderType["setCopyJobState"];
-
-export function useEventHandlers(setCopyJobState: setCopyJobStateType) {
-  const { setValidationCache } = useCopyJobPrerequisitesCache();
-  const handleSelectSourceAccount = (
-    type: "subscription" | "account",
-    data: (Subscription & DatabaseAccount) | undefined,
-  ) => {
-    setCopyJobState((prevState: CopyJobContextState) => {
-      if (type === "subscription") {
-        return {
-          ...prevState,
-          source: {
-            ...prevState.source,
-            subscription: data || null,
-            account: null,
-          },
-        };
-      }
-      if (type === "account") {
-        return {
-          ...prevState,
-          source: {
-            ...prevState.source,
-            account: data || null,
-          },
-        };
-      }
-      return prevState;
-    });
-    setValidationCache(new Map<string, boolean>());
-  };
-
-  const handleMigrationTypeChange = React.useCallback((_ev?: React.FormEvent<HTMLElement>, checked?: boolean) => {
-    setCopyJobState((prevState: CopyJobContextState) => ({
-      ...prevState,
-      migrationType: checked ? CopyJobMigrationType.Offline : CopyJobMigrationType.Online,
-    }));
-    setValidationCache(new Map<string, boolean>());
-  }, []);
-
-  return { handleSelectSourceAccount, handleMigrationTypeChange };
-}

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

@@ -1,510 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SelectAccount Component Complete Workflow should render complete workflow with all selections 1`] = `
-<div>
+exports[`SelectAccount Component Rendering should render correctly with snapshot 1`] = `
 <div
   class="ms-Stack selectAccountContainer css-109"
+  data-test="Panel:SelectAccountContainer"
 >
-    <span>
-      Select your source account and subscription
-    </span>
-    <div
-      data-selected="sub-1"
-      data-testid="subscription-dropdown"
+  <span
+    class="themeText css-110"
   >
-      <div
-        data-testid="subscription-option-sub-1"
-      >
-        Test Subscription 1
-      </div>
-      <div
-        data-testid="subscription-option-sub-2"
-      >
-        Test Subscription 2
-      </div>
-    </div>
-    <div
-      data-disabled="false"
-      data-selected="/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
-      data-testid="account-dropdown"
-    >
-      <div
-        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
-      >
-        test-cosmos-account-1
-      </div>
-    </div>
-    <div
-      data-checked="false"
-      data-testid="migration-type-checkbox"
-    >
-      <input
-        data-testid="migration-checkbox-input"
-        type="checkbox"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SelectAccount Component Edge Cases should handle empty accounts array 1`] = `
-<div>
-  <div
-    class="ms-Stack selectAccountContainer css-109"
-  >
-    <span>
-      Select your source account and subscription
+    Please select a source account from which to copy.
   </span>
   <div
     data-testid="subscription-dropdown"
   >
-      <div
-        data-testid="subscription-option-sub-1"
-      >
-        Test Subscription 1
+    Subscription Dropdown
   </div>
   <div
-        data-testid="subscription-option-sub-2"
-      >
-        Test Subscription 2
-      </div>
-    </div>
-    <div
-      data-disabled="true"
     data-testid="account-dropdown"
-    />
+  >
+    Account Dropdown
+  </div>
   <div
-      data-checked="true"
     data-testid="migration-type-checkbox"
   >
     <input
-        checked=""
+      aria-label="Migration Type Checkbox"
       data-testid="migration-checkbox-input"
       type="checkbox"
     />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SelectAccount Component Edge Cases should handle empty subscriptions array 1`] = `
-<div>
-  <div
-    class="ms-Stack selectAccountContainer css-109"
-  >
-    <span>
-      Select your source account and subscription
-    </span>
-    <div
-      data-testid="subscription-dropdown"
-    />
-    <div
-      data-disabled="true"
-      data-testid="account-dropdown"
-    />
-    <div
-      data-checked="true"
-      data-testid="migration-type-checkbox"
-    >
-      <input
-        checked=""
-        data-testid="migration-checkbox-input"
-        type="checkbox"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SelectAccount Component Edge Cases should handle null account in context 1`] = `
-<div>
-  <div
-    class="ms-Stack selectAccountContainer css-109"
-  >
-    <span>
-      Select your source account and subscription
-    </span>
-    <div
-      data-testid="subscription-dropdown"
-    >
-      <div
-        data-testid="subscription-option-sub-1"
-      >
-        Test Subscription 1
-      </div>
-      <div
-        data-testid="subscription-option-sub-2"
-      >
-        Test Subscription 2
-      </div>
-    </div>
-    <div
-      data-disabled="true"
-      data-testid="account-dropdown"
-    >
-      <div
-        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
-      >
-        test-cosmos-account-1
-      </div>
-    </div>
-    <div
-      data-checked="true"
-      data-testid="migration-type-checkbox"
-    >
-      <input
-        checked=""
-        data-testid="migration-checkbox-input"
-        type="checkbox"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SelectAccount Component Edge Cases should handle null subscription in context 1`] = `
-<div>
-  <div
-    class="ms-Stack selectAccountContainer css-109"
-  >
-    <span>
-      Select your source account and subscription
-    </span>
-    <div
-      data-testid="subscription-dropdown"
-    >
-      <div
-        data-testid="subscription-option-sub-1"
-      >
-        Test Subscription 1
-      </div>
-      <div
-        data-testid="subscription-option-sub-2"
-      >
-        Test Subscription 2
-      </div>
-    </div>
-    <div
-      data-disabled="true"
-      data-testid="account-dropdown"
-    >
-      <div
-        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
-      >
-        test-cosmos-account-1
-      </div>
-    </div>
-    <div
-      data-checked="true"
-      data-testid="migration-type-checkbox"
-    >
-      <input
-        checked=""
-        data-testid="migration-checkbox-input"
-        type="checkbox"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SelectAccount Component Edge Cases should handle undefined accounts from hook 1`] = `
-<div>
-  <div
-    class="ms-Stack selectAccountContainer css-109"
-  >
-    <span>
-      Select your source account and subscription
-    </span>
-    <div
-      data-testid="subscription-dropdown"
-    >
-      <div
-        data-testid="subscription-option-sub-1"
-      >
-        Test Subscription 1
-      </div>
-      <div
-        data-testid="subscription-option-sub-2"
-      >
-        Test Subscription 2
-      </div>
-    </div>
-    <div
-      data-disabled="true"
-      data-testid="account-dropdown"
-    />
-    <div
-      data-checked="true"
-      data-testid="migration-type-checkbox"
-    >
-      <input
-        checked=""
-        data-testid="migration-checkbox-input"
-        type="checkbox"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SelectAccount Component Edge Cases should handle undefined subscriptions from hook 1`] = `
-<div>
-  <div
-    class="ms-Stack selectAccountContainer css-109"
-  >
-    <span>
-      Select your source account and subscription
-    </span>
-    <div
-      data-testid="subscription-dropdown"
-    />
-    <div
-      data-disabled="true"
-      data-testid="account-dropdown"
-    />
-    <div
-      data-checked="true"
-      data-testid="migration-type-checkbox"
-    >
-      <input
-        checked=""
-        data-testid="migration-checkbox-input"
-        type="checkbox"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SelectAccount Component Rendering should render component with default state 1`] = `
-<div>
-  <div
-    class="ms-Stack selectAccountContainer css-109"
-  >
-    <span>
-      Select your source account and subscription
-    </span>
-    <div
-      data-testid="subscription-dropdown"
-    >
-      <div
-        data-testid="subscription-option-sub-1"
-      >
-        Test Subscription 1
-      </div>
-      <div
-        data-testid="subscription-option-sub-2"
-      >
-        Test Subscription 2
-      </div>
-    </div>
-    <div
-      data-disabled="true"
-      data-testid="account-dropdown"
-    >
-      <div
-        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
-      >
-        test-cosmos-account-1
-      </div>
-    </div>
-    <div
-      data-checked="true"
-      data-testid="migration-type-checkbox"
-    >
-      <input
-        checked=""
-        data-testid="migration-checkbox-input"
-        type="checkbox"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SelectAccount Component Rendering should render with offline migration type checked 1`] = `
-<div>
-  <div
-    class="ms-Stack selectAccountContainer css-109"
-  >
-    <span>
-      Select your source account and subscription
-    </span>
-    <div
-      data-testid="subscription-dropdown"
-    >
-      <div
-        data-testid="subscription-option-sub-1"
-      >
-        Test Subscription 1
-      </div>
-      <div
-        data-testid="subscription-option-sub-2"
-      >
-        Test Subscription 2
-      </div>
-    </div>
-    <div
-      data-disabled="true"
-      data-testid="account-dropdown"
-    >
-      <div
-        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
-      >
-        test-cosmos-account-1
-      </div>
-    </div>
-    <div
-      data-checked="true"
-      data-testid="migration-type-checkbox"
-    >
-      <input
-        checked=""
-        data-testid="migration-checkbox-input"
-        type="checkbox"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SelectAccount Component Rendering should render with online migration type unchecked 1`] = `
-<div>
-  <div
-    class="ms-Stack selectAccountContainer css-109"
-  >
-    <span>
-      Select your source account and subscription
-    </span>
-    <div
-      data-testid="subscription-dropdown"
-    >
-      <div
-        data-testid="subscription-option-sub-1"
-      >
-        Test Subscription 1
-      </div>
-      <div
-        data-testid="subscription-option-sub-2"
-      >
-        Test Subscription 2
-      </div>
-    </div>
-    <div
-      data-disabled="true"
-      data-testid="account-dropdown"
-    >
-      <div
-        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
-      >
-        test-cosmos-account-1
-      </div>
-    </div>
-    <div
-      data-checked="false"
-      data-testid="migration-type-checkbox"
-    >
-      <input
-        data-testid="migration-checkbox-input"
-        type="checkbox"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SelectAccount Component Rendering should render with selected account 1`] = `
-<div>
-  <div
-    class="ms-Stack selectAccountContainer css-109"
-  >
-    <span>
-      Select your source account and subscription
-    </span>
-    <div
-      data-selected="sub-1"
-      data-testid="subscription-dropdown"
-    >
-      <div
-        data-testid="subscription-option-sub-1"
-      >
-        Test Subscription 1
-      </div>
-      <div
-        data-testid="subscription-option-sub-2"
-      >
-        Test Subscription 2
-      </div>
-    </div>
-    <div
-      data-disabled="false"
-      data-selected="/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
-      data-testid="account-dropdown"
-    >
-      <div
-        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
-      >
-        test-cosmos-account-1
-      </div>
-    </div>
-    <div
-      data-checked="true"
-      data-testid="migration-type-checkbox"
-    >
-      <input
-        checked=""
-        data-testid="migration-checkbox-input"
-        type="checkbox"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SelectAccount Component Rendering should render with selected subscription 1`] = `
-<div>
-  <div
-    class="ms-Stack selectAccountContainer css-109"
-  >
-    <span>
-      Select your source account and subscription
-    </span>
-    <div
-      data-selected="sub-1"
-      data-testid="subscription-dropdown"
-    >
-      <div
-        data-testid="subscription-option-sub-1"
-      >
-        Test Subscription 1
-      </div>
-      <div
-        data-testid="subscription-option-sub-2"
-      >
-        Test Subscription 2
-      </div>
-    </div>
-    <div
-      data-disabled="false"
-      data-testid="account-dropdown"
-    >
-      <div
-        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
-      >
-        test-cosmos-account-1
-      </div>
-    </div>
-    <div
-      data-checked="true"
-      data-testid="migration-type-checkbox"
-    >
-      <input
-        checked=""
-        data-testid="migration-checkbox-input"
-        type="checkbox"
-      />
-    </div>
+    Copy container in offline mode
   </div>
 </div>
 `;

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

@@ -47,8 +47,12 @@ const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourc
   const onDropdownChange = dropDownChangeHandler(setCopyJobState);
 
   return (
-    <Stack className="selectSourceAndTargetContainers" tokens={{ childrenGap: 25 }}>
-      <span>{ContainerCopyMessages.selectSourceAndTargetContainersDescription}</span>
+    <Stack
+      data-test="Panel:SelectSourceAndTargetContainers"
+      className="selectSourceAndTargetContainers"
+      tokens={{ childrenGap: 25 }}
+    >
+      <span className="themeText">{ContainerCopyMessages.selectSourceAndTargetContainersDescription}</span>
       <DatabaseContainerSection
         heading={ContainerCopyMessages.sourceContainerSubHeading}
         databaseOptions={sourceDatabaseOptions}
@@ -59,6 +63,7 @@ const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourc
         selectedContainer={source?.containerId}
         containerDisabled={!source?.databaseId}
         containerOnChange={onDropdownChange("sourceContainer")}
+        sectionType="source"
       />
       <DatabaseContainerSection
         heading={ContainerCopyMessages.targetContainerSubHeading}
@@ -71,6 +76,7 @@ const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourc
         containerDisabled={!target?.databaseId}
         containerOnChange={onDropdownChange("targetContainer")}
         handleOnDemandCreateContainer={showAddCollectionPanel}
+        sectionType="target"
       />
     </Stack>
   );

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

@@ -32,6 +32,7 @@ describe("DatabaseContainerSection", () => {
     selectedContainer: "container1",
     containerDisabled: false,
     containerOnChange: mockContainerOnChange,
+    sectionType: "source",
   };
 
   beforeEach(() => {
@@ -292,6 +293,7 @@ describe("DatabaseContainerSection", () => {
         containerOptions: mockContainerOptions,
         selectedContainer: "container1",
         containerOnChange: mockContainerOnChange,
+        sectionType: "source",
       };
 
       render(<DatabaseContainerSection {...minimalProps} />);
@@ -393,6 +395,7 @@ describe("DatabaseContainerSection", () => {
         containerOptions: [{ key: "c1", text: "Container 1", data: { id: "c1" } }],
         selectedContainer: "c1",
         containerOnChange: jest.fn(),
+        sectionType: "source",
       };
 
       const { container } = render(<DatabaseContainerSection {...minimalProps} />);
@@ -411,6 +414,7 @@ describe("DatabaseContainerSection", () => {
         containerDisabled: false,
         containerOnChange: jest.fn(),
         handleOnDemandCreateContainer: jest.fn(),
+        sectionType: "target",
       };
 
       const { container } = render(<DatabaseContainerSection {...fullProps} />);
@@ -428,6 +432,7 @@ describe("DatabaseContainerSection", () => {
         selectedContainer: "container1",
         containerDisabled: true,
         containerOnChange: jest.fn(),
+        sectionType: "target",
       };
 
       const { container } = render(<DatabaseContainerSection {...disabledProps} />);
@@ -443,6 +448,7 @@ describe("DatabaseContainerSection", () => {
         containerOptions: [],
         selectedContainer: "",
         containerOnChange: jest.fn(),
+        sectionType: "target",
       };
 
       const { container } = render(<DatabaseContainerSection {...emptyOptionsProps} />);

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

@@ -15,6 +15,7 @@ export const DatabaseContainerSection = ({
   containerDisabled,
   containerOnChange,
   handleOnDemandCreateContainer,
+  sectionType,
 }: DatabaseContainerSectionProps) => (
   <Stack tokens={{ childrenGap: 15 }} className="databaseContainerSection">
     <label className="subHeading">{heading}</label>
@@ -27,6 +28,7 @@ export const DatabaseContainerSection = ({
         disabled={!!databaseDisabled}
         selectedKey={selectedDatabase}
         onChange={databaseOnChange}
+        data-test={`${sectionType}-databaseDropdown`}
       />
     </FieldRow>
     <FieldRow label={ContainerCopyMessages.containerDropdownLabel}>
@@ -39,9 +41,14 @@ export const DatabaseContainerSection = ({
           disabled={!!containerDisabled}
           selectedKey={selectedContainer}
           onChange={containerOnChange}
+          data-test={`${sectionType}-containerDropdown`}
         />
         {handleOnDemandCreateContainer && (
-          <ActionButton className="create-container-link-btn" onClick={() => handleOnDemandCreateContainer()}>
+          <ActionButton
+            className="create-container-link-btn"
+            style={{ color: "var(--colorBrandForeground1)" }}
+            onClick={() => handleOnDemandCreateContainer()}
+          >
             {ContainerCopyMessages.createContainerButtonLabel}
           </ActionButton>
         )}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/components/__snapshots__/DatabaseContainerSection.test.tsx.snap

@@ -37,6 +37,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with all pro
           class="ms-Dropdown is-required dropdown-112"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="target-databaseDropdown"
           id="Dropdown98"
           role="combobox"
           tabindex="0"
@@ -94,6 +95,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with all pro
             class="ms-Dropdown is-required dropdown-112"
             data-is-focusable="true"
             data-ktp-target="true"
+            data-test="target-containerDropdown"
             id="Dropdown99"
             role="combobox"
             tabindex="0"
@@ -182,6 +184,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with disable
           class="ms-Dropdown is-disabled is-required dropdown-143"
           data-is-focusable="false"
           data-ktp-target="true"
+          data-test="target-databaseDropdown"
           id="Dropdown103"
           role="combobox"
           tabindex="-1"
@@ -239,6 +242,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with disable
             class="ms-Dropdown is-disabled is-required dropdown-143"
             data-is-focusable="false"
             data-ktp-target="true"
+            data-test="target-containerDropdown"
             id="Dropdown104"
             role="combobox"
             tabindex="-1"
@@ -306,6 +310,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with empty o
           class="ms-Dropdown is-required dropdown-112"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="target-databaseDropdown"
           id="Dropdown105"
           role="combobox"
           tabindex="0"
@@ -363,6 +368,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with empty o
             class="ms-Dropdown is-required dropdown-112"
             data-is-focusable="true"
             data-ktp-target="true"
+            data-test="target-containerDropdown"
             id="Dropdown106"
             role="combobox"
             tabindex="0"
@@ -430,6 +436,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with minimal
           class="ms-Dropdown is-required dropdown-112"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="source-databaseDropdown"
           id="Dropdown96"
           role="combobox"
           tabindex="0"
@@ -487,6 +494,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with minimal
             class="ms-Dropdown is-required dropdown-112"
             data-is-focusable="true"
             data-ktp-target="true"
+            data-test="source-containerDropdown"
             id="Dropdown97"
             role="combobox"
             tabindex="0"

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

@@ -39,6 +39,7 @@ export function useCopyJobNavigation() {
   const [state, dispatch] = useReducer(navigationReducer, { screenHistory: [SCREEN_KEYS.SelectAccount] });
 
   const handlePrevious = useCallback(() => {
+    setContextError(null);
     dispatch({ type: "PREVIOUS" });
   }, [dispatch]);
 

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

@@ -83,6 +83,7 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
 
   return (
     <IconButton
+      data-test={`CopyJobActionMenu/Button:${job.Name}`}
       role="button"
       iconProps={{ iconName: "More", styles: { root: { fontSize: "20px", fontWeight: "bold" } } }}
       menuProps={{ items: getMenuItems() }}

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

@@ -1,5 +1,6 @@
 import { DetailsList, DetailsListLayoutMode, IColumn, Stack, Text } from "@fluentui/react";
 import React, { memo } from "react";
+import { useThemeStore } from "../../../../hooks/useTheme";
 import ContainerCopyMessages from "../../ContainerCopyMessages";
 import { CopyJobStatusType } from "../../Enums/CopyJobEnums";
 import { CopyJobType } from "../../Types/CopyJobTypes";
@@ -63,6 +64,19 @@ const getCopyJobDetailsListColumns = (): IColumn[] => {
 };
 
 const CopyJobDetails: React.FC<CopyJobDetailsProps> = ({ job }) => {
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
+
+  const errorMessageStyle: React.CSSProperties = {
+    whiteSpace: "pre-wrap",
+    ...(isDarkMode && {
+      whiteSpace: "pre-wrap",
+      backgroundColor: "var(--colorNeutralBackground2)",
+      color: "var(--colorNeutralForeground1)",
+      padding: "10px",
+      borderRadius: "4px",
+    }),
+  };
+
   const selectedContainers = [
     {
       sourceContainerName: job?.Source?.containerName || "N/A",
@@ -77,10 +91,10 @@ const CopyJobDetails: React.FC<CopyJobDetailsProps> = ({ job }) => {
     <Stack className="copyJobDetailsContainer" tokens={{ childrenGap: 15 }} data-testid="copy-job-details">
       {job.Error ? (
         <Stack.Item data-testid="error-stack" style={sectionCss.verticalAlign}>
-          <Text className="bold" style={sectionCss.headingText}>
+          <Text className="bold themeText" style={sectionCss.headingText}>
             {ContainerCopyMessages.errorTitle}
           </Text>
-          <Text as="pre" style={{ whiteSpace: "pre-wrap" }}>
+          <Text as="pre" style={errorMessageStyle}>
             {job.Error.message}
           </Text>
         </Stack.Item>
@@ -88,16 +102,16 @@ const CopyJobDetails: React.FC<CopyJobDetailsProps> = ({ job }) => {
       <Stack.Item data-testid="selectedcollection-stack">
         <Stack tokens={{ childrenGap: 15 }}>
           <Stack.Item style={sectionCss.verticalAlign}>
-            <Text className="bold">{ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime}</Text>
-            <Text>{job.LastUpdatedTime}</Text>
+            <Text className="bold themeText">{ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime}</Text>
+            <Text className="themeText">{job.LastUpdatedTime}</Text>
           </Stack.Item>
           <Stack.Item style={sectionCss.verticalAlign}>
-            <Text className="bold">{ContainerCopyMessages.sourceAccountLabel}</Text>
-            <Text>{job.Source?.remoteAccountName}</Text>
+            <Text className="bold themeText">{ContainerCopyMessages.sourceAccountLabel}</Text>
+            <Text className="themeText">{job.Source?.remoteAccountName}</Text>
           </Stack.Item>
           <Stack.Item style={sectionCss.verticalAlign}>
-            <Text className="bold">{ContainerCopyMessages.MonitorJobs.Columns.mode}</Text>
-            <Text>{job.Mode}</Text>
+            <Text className="bold themeText">{ContainerCopyMessages.MonitorJobs.Columns.mode}</Text>
+            <Text className="themeText">{job.Mode}</Text>
           </Stack.Item>
         </Stack>
       </Stack.Item>

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

@@ -52,7 +52,7 @@ describe("CopyJobStatusWithIcon", () => {
 
       const spinner = container.querySelector('[class*="ms-Spinner"]');
       expect(spinner).toBeInTheDocument();
-      expect(container).toHaveTextContent("In Progress");
+      expect(container).toHaveTextContent("Running");
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -83,18 +83,18 @@ describe("CopyJobStatusWithIcon", () => {
     it("provides meaningful text content for screen readers", () => {
       const { container } = render(<CopyJobStatusWithIcon status={CopyJobStatusType.InProgress} />);
 
-      expect(container).toHaveTextContent("In Progress");
+      expect(container).toHaveTextContent("Running");
     });
   });
 
   describe("Icon and Status Mapping", () => {
     it("renders correct status text based on mapping", () => {
       const statusMappings = [
-        { status: CopyJobStatusType.Pending, expectedText: "Pending" },
+        { status: CopyJobStatusType.Pending, expectedText: "Queued" },
         { status: CopyJobStatusType.Paused, expectedText: "Paused" },
         { status: CopyJobStatusType.Failed, expectedText: "Failed" },
         { status: CopyJobStatusType.Completed, expectedText: "Completed" },
-        { status: CopyJobStatusType.Running, expectedText: "In Progress" },
+        { status: CopyJobStatusType.Running, expectedText: "Running" },
       ];
 
       statusMappings.forEach(({ status, expectedText }) => {

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

@@ -1,30 +1,14 @@
-import { FontIcon, getTheme, mergeStyles, mergeStyleSets, Spinner, SpinnerSize, Stack, Text } from "@fluentui/react";
+import { FontIcon, mergeStyles, Spinner, SpinnerSize, Stack, Text } from "@fluentui/react";
 import PropTypes from "prop-types";
 import React from "react";
 import ContainerCopyMessages from "../../ContainerCopyMessages";
 import { CopyJobStatusType } from "../../Enums/CopyJobEnums";
 
-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: Partial<Record<CopyJobStatusType, string>> = {
   [CopyJobStatusType.Pending]: "Clock",
   [CopyJobStatusType.Paused]: "CirclePause",
@@ -35,6 +19,17 @@ const iconMap: Partial<Record<CopyJobStatusType, string>> = {
   [CopyJobStatusType.Completed]: "CompletedSolid",
 };
 
+// Icon colors for different statuses
+const statusIconColors: Partial<Record<CopyJobStatusType, string>> = {
+  [CopyJobStatusType.Failed]: "var(--colorPaletteRedForeground1)",
+  [CopyJobStatusType.Faulted]: "var(--colorPaletteRedForeground1)",
+  [CopyJobStatusType.Completed]: "var(--colorSuccessGreen)",
+  [CopyJobStatusType.InProgress]: "var(--colorBrandForeground1)",
+  [CopyJobStatusType.Running]: "var(--colorBrandForeground1)",
+  [CopyJobStatusType.Partitioning]: "var(--colorBrandForeground1)",
+  [CopyJobStatusType.Paused]: "var(--colorBrandForeground1)",
+};
+
 export interface CopyJobStatusWithIconProps {
   status: CopyJobStatusType;
 }
@@ -47,19 +42,17 @@ const CopyJobStatusWithIcon: React.FC<CopyJobStatusWithIconProps> = React.memo((
     CopyJobStatusType.InProgress,
     CopyJobStatusType.Partitioning,
   ].includes(status);
+  const iconColor = statusIconColors[status] || "var(--colorNeutralForeground2)";
+  const iconStyle = mergeStyles(iconClass, { color: iconColor });
 
   return (
     <Stack horizontal verticalAlign="center">
       {isSpinnerStatus ? (
         <Spinner size={SpinnerSize.small} style={{ marginRight: "8px" }} />
       ) : (
-        <FontIcon
-          aria-label={status}
-          iconName={iconMap[status] || "UnknownSolid"}
-          className={classNames[status] || classNames.unknown}
-        />
+        <FontIcon aria-label={status} iconName={iconMap[status] || "UnknownSolid"} className={iconStyle} />
       )}
-      <Text>{statusText}</Text>
+      <Text className="themeText">{statusText}</Text>
     </Stack>
   );
 });

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

@@ -15,6 +15,8 @@ import {
 } from "@fluentui/react";
 import React, { useEffect } from "react";
 import Pager from "../../../../Common/Pager";
+import { useThemeStore } from "../../../../hooks/useTheme";
+import { getThemeTokens } from "../../../Theme/ThemeUtil";
 import { openCopyJobDetailsPanel } from "../../Actions/CopyJobActions";
 import { CopyJobType, HandleJobActionClickType } from "../../Types/CopyJobTypes";
 import { getColumns } from "./CopyJobColumns";
@@ -26,13 +28,15 @@ interface CopyJobsListProps {
 }
 
 const styles = {
-  container: { height: "calc(100vh - 25em)" } as React.CSSProperties,
+  container: { height: "100%" } as React.CSSProperties,
   stackItem: { position: "relative", marginBottom: "20px" } as React.CSSProperties,
 };
 
 const PAGE_SIZE = 10;
 
 const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pageSize = PAGE_SIZE }) => {
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
+  const themeTokens = getThemeTokens(isDarkMode);
   const [startIndex, setStartIndex] = React.useState(0);
   const [sortedJobs, setSortedJobs] = React.useState<CopyJobType[]>(jobs);
   const [sortedColumnKey, setSortedColumnKey] = React.useState<string | undefined>(undefined);
@@ -80,6 +84,7 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
         <Stack.Item verticalFill={true} grow={1} shrink={1} style={styles.stackItem}>
           <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
             <ShimmeredDetailsList
+              className="CopyJobListContainer"
               onRenderRow={_onRenderRow}
               checkboxVisibility={2}
               columns={columns}
@@ -87,11 +92,28 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
               enableShimmer={false}
               constrainMode={ConstrainMode.unconstrained}
               layoutMode={DetailsListLayoutMode.justified}
-              onRenderDetailsHeader={(props, defaultRender) => (
-                <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
-                  {defaultRender({ ...props })}
+              onRenderDetailsHeader={(props, defaultRender) => {
+                const bgColor = themeTokens.colorNeutralBackground3;
+                const textColor = themeTokens.colorNeutralForeground1;
+                return (
+                  <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced stickyBackgroundColor={bgColor}>
+                    <div style={{ backgroundColor: bgColor }}>
+                      {defaultRender({
+                        ...props,
+                        styles: {
+                          root: {
+                            backgroundColor: bgColor,
+                            selectors: {
+                              ".ms-DetailsHeader-cellTitle": { color: textColor },
+                              ".ms-DetailsHeader-cellName": { color: textColor },
+                            },
+                          },
+                        },
+                      })}
+                    </div>
                   </Sticky>
-              )}
+                );
+              }}
             />
           </ScrollablePane>
         </Stack.Item>

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/__snapshots__/CopyJobStatusWithIcon.test.tsx.snap

@@ -13,9 +13,9 @@ exports[`CopyJobStatusWithIcon Spinner Status Types renders InProgress with spin
     />
   </div>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
-    In Progress
+    Running
   </span>
 </div>
 `;
@@ -33,9 +33,9 @@ exports[`CopyJobStatusWithIcon Spinner Status Types renders Partitioning with sp
     />
   </div>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
-    In Progress
+    Running
   </span>
 </div>
 `;
@@ -53,9 +53,9 @@ exports[`CopyJobStatusWithIcon Spinner Status Types renders Running with spinner
     />
   </div>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
-    In Progress
+    Running
   </span>
 </div>
 `;
@@ -66,7 +66,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Cancelled"
-    class="ms-Icon root-105 css-118 mocked-style-Cancelled"
+    class="ms-Icon root-105 css-118 mocked-styles"
     data-icon-name="StatusErrorFull"
     role="img"
     style="font-family: "FabricMDL2Icons-4";"
@@ -74,7 +74,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Cancelled
   </span>
@@ -87,7 +87,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Completed"
-    class="ms-Icon root-105 css-120 mocked-style-Completed"
+    class="ms-Icon root-105 css-120 mocked-styles"
     data-icon-name="CompletedSolid"
     role="img"
     style="font-family: "FabricMDL2Icons-5";"
@@ -95,7 +95,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Completed
   </span>
@@ -108,7 +108,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Failed"
-    class="ms-Icon root-105 css-118 mocked-style-Failed"
+    class="ms-Icon root-105 css-118 mocked-styles"
     data-icon-name="StatusErrorFull"
     role="img"
     style="font-family: "FabricMDL2Icons-4";"
@@ -116,7 +116,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Failed
   </span>
@@ -129,7 +129,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Faulted"
-    class="ms-Icon root-105 css-118 mocked-style-Faulted"
+    class="ms-Icon root-105 css-118 mocked-styles"
     data-icon-name="StatusErrorFull"
     role="img"
     style="font-family: "FabricMDL2Icons-4";"
@@ -137,7 +137,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Failed
   </span>
@@ -150,7 +150,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Paused"
-    class="ms-Icon root-105 css-114 mocked-style-Paused"
+    class="ms-Icon root-105 css-114 mocked-styles"
     data-icon-name="CirclePause"
     role="img"
     style="font-family: "FabricMDL2Icons-11";"
@@ -158,7 +158,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Paused
   </span>
@@ -171,7 +171,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Pending"
-    class="ms-Icon root-105 css-111 mocked-style-Pending"
+    class="ms-Icon root-105 css-111 mocked-styles"
     data-icon-name="Clock"
     role="img"
     style="font-family: "FabricMDL2Icons-2";"
@@ -179,9 +179,9 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
-    Pending
+    Queued
   </span>
 </div>
 `;
@@ -192,7 +192,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
 >
   <i
     aria-label="Skipped"
-    class="ms-Icon root-105 css-116 mocked-style-Skipped"
+    class="ms-Icon root-105 css-116 mocked-styles"
     data-icon-name="StatusCircleBlock2"
     role="img"
     style="font-family: "FabricMDL2Icons-9";"
@@ -200,7 +200,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
     
   </i>
   <span
-    class="css-112"
+    class="themeText css-112"
   >
     Cancelled
   </span>

src/Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobs.tsx

@@ -10,7 +10,7 @@ import CopyJobsNotFound from "../MonitorCopyJobs/Components/CopyJobs.NotFound";
 import { CopyJobType, JobActionUpdatorType } from "../Types/CopyJobTypes";
 import CopyJobsList from "./Components/CopyJobsList";
 
-const FETCH_INTERVAL_MS = 30 * 1000;
+const FETCH_INTERVAL = 2 * 60 * 1000;
 const SHIMMER_INDENT_LEVELS: IndentLevel[] = Array(7).fill({ level: 0, width: "100%" });
 
 interface MonitorCopyJobsProps {
@@ -44,7 +44,9 @@ const MonitorCopyJobs = forwardRef<MonitorCopyJobsRef, MonitorCopyJobsProps>(({
         return isEqual(prevJobs, normalizedResponse) ? prevJobs : normalizedResponse;
       });
     } catch (error) {
+      if (error.message !== "Previous copy job request was cancelled.") {
         setError(error.message || "Failed to load copy jobs. Please try again later.");
+      }
     } finally {
       if (isFirstFetchRef.current) {
         setLoading(false);
@@ -55,7 +57,7 @@ const MonitorCopyJobs = forwardRef<MonitorCopyJobsRef, MonitorCopyJobsProps>(({
 
   useEffect(() => {
     fetchJobs();
-    const intervalId = setInterval(fetchJobs, FETCH_INTERVAL_MS);
+    const intervalId = setInterval(fetchJobs, FETCH_INTERVAL);
 
     return () => clearInterval(intervalId);
   }, [fetchJobs]);

src/Explorer/ContainerCopy/Types/CopyJobTypes.ts

@@ -49,6 +49,7 @@ export interface DatabaseContainerSectionProps {
   containerDisabled?: boolean;
   containerOnChange: (ev: React.FormEvent<HTMLDivElement>, option: DropdownOptionType) => void;
   handleOnDemandCreateContainer?: () => void;
+  sectionType: "source" | "target";
 }
 
 export interface CopyJobContextState {
@@ -56,14 +57,14 @@ export interface CopyJobContextState {
   migrationType: CopyJobMigrationType;
   sourceReadAccessFromTarget?: boolean;
   source: {
-    subscription: Subscription;
-    account: DatabaseAccount;
+    subscription: Subscription | null;
+    account: DatabaseAccount | null;
     databaseId: string;
     containerId: string;
   };
   target: {
     subscriptionId: string;
-    account: DatabaseAccount;
+    account: DatabaseAccount | null;
     databaseId: string;
     containerId: string;
   };

src/Explorer/ContainerCopy/containerCopyStyles.less

@@ -1,6 +1,30 @@
 @import "../../../less/Common/Constants.less";
 
+// Common theme-aware classes
+.themeText {
+  color: var(--colorNeutralForeground1);
+}
+
+.themeTextSecondary {
+  color: var(--colorNeutralForeground2);
+}
+
+.themeLinkText {
+  color: var(--colorBrandForeground1);
+}
+
+.themeBackground {
+  background-color: var(--colorNeutralBackground1);
+}
+
+.themeBackgroundSecondary {
+  background-color: var(--colorNeutralBackground2);
+}
+
 #containerCopyWrapper {
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+
   .centerContent {
     justify-content: center;
     align-items: center;
@@ -9,21 +33,31 @@
     .noCopyJobsMessage {
       font-weight: 600;
       margin: 0 auto;
-      color: @FocusColor;
+      color: var(--colorNeutralForeground2);
     }
     button.createCopyJobButton {
-      color: @LinkColor;
+      color: var(--colorBrandForeground1);
     }
   }
 }
 .createCopyJobScreensContainer {
   height: 100%;
   padding: 1em 1.5em;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 
   .pointInTimeRestoreContainer, .onlineCopyContainer {
     position: relative;
   }
 
+  .toggle-label {
+    color: var(--colorNeutralForeground1);
+  }
+
+  .accordionHeaderText {
+    color: var(--colorNeutralForeground1);
+  }
+  
   label {
     padding: 0;
   }
@@ -71,7 +105,7 @@
   }
   .foreground {
     z-index: 10;
-    background-color: #f9f9f9;
+    background-color: var(--colorNeutralBackground2);
     padding: 20px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     transform: translate(0%, -9%);
@@ -80,14 +114,40 @@
   .createCopyJobErrorMessageBar {
     margin-bottom: 2em;
   }
+  body.isDarkMode & {
+    .ms-TooltipHost .ms-Image {
+      filter: invert(1);
+    }
+
+    .ms-TextField {
+      .ms-TextField-fieldGroup {
+        background-color: var(--colorNeutralBackground1);
+        border-color: var(--colorNeutralStroke1);
+      }
+
+      .ms-TextField-field {
+        color: var(--colorNeutralForeground1);
+        background-color: var(--colorNeutralBackground1);
+
+        &::placeholder {
+          color: var(--colorNeutralForeground4);
+        }
+      }
+
+      .ms-Label {
+        color: var(--colorNeutralForeground1);
+      }
+    }
+  }
   .create-container-link-btn {
     padding: 0;
     height: 25px;
-    color: @LinkColor;
+    color: var(--colorBrandForeground1);
 
     &:focus {
       outline: none;
     }
+
   }
 
   /* Create collection panel */
@@ -105,7 +165,6 @@
   width: 100%;
   max-width: 100%;
   margin: 0 auto;
-
   .ms-DetailsList {
     width: 100%;
 
@@ -114,33 +173,33 @@
         padding: @DefaultSpace 20px;
         font-weight: 600;
         font-size: @DefaultFontSize;
-        color: @BaseHigh;
-        background-color: @BaseLow;
-        border-bottom: @ButtonBorderWidth solid @BaseMedium;
+        color: var(--colorNeutralForeground1);
+        background-color: var(--colorNeutralBackground2);
+        border-bottom: @ButtonBorderWidth solid var(--colorNeutralStroke1);
 
         &:hover {
-          background-color: @BaseMediumLow;
+          background-color: var(--colorNeutralBackground3);
         }
       }
     }
 
     .ms-DetailsRow {
-      border-bottom: @ButtonBorderWidth solid @BaseMedium;
+      border-bottom: @ButtonBorderWidth solid var(--colorNeutralStroke1);
 
       &:hover {
-        background-color: @BaseMediumLow;
+        background-color: var(--colorNeutralBackground2);
       }
 
       .ms-DetailsRow-cell {
         padding: @MediumSpace 20px;
         font-size: @DefaultFontSize;
-        color: @BaseHigh;
+        color: var(--colorNeutralForeground1);
         min-height: 48px;
         display: flex;
         align-items: center;
 
         .jobNameLink {
-          color: @LinkColor;
+          color: var(--colorBrandForeground1);
           text-overflow: ellipsis;
           white-space: nowrap;
           overflow: hidden;
@@ -168,7 +227,7 @@
     }
     .ms-DetailsRow-cell {
       font-size: @DefaultFontSize;
-      color: @BaseHigh;
+      color: var(--colorNeutralForeground1);
     }
   }
 }

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -58,7 +58,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
           aria-expanded={this.state.isExpanded}
         >
           <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
-          <Label>{this.props.title}</Label>
+          <Label styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>{this.props.title}</Label>
           {this.props.tooltipContent && (
             <TooltipHost
               directionalHint={DirectionalHint.bottomLeftEdge}
@@ -79,6 +79,14 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
                 id={`delete-${this.props.title.split(" ").join("-")}`}
                 iconProps={{ iconName: "Delete" }}
                 style={{ height: 27, marginRight: "20px" }}
+                styles={{
+                  rootHovered: {
+                    backgroundColor: "transparent",
+                  },
+                  rootPressed: {
+                    backgroundColor: "transparent",
+                  },
+                }}
                 onClick={(event) => {
                   event.stopPropagation();
                   this.props.onDelete();

src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap

@@ -20,7 +20,15 @@ exports[`CollapsibleSectionComponent renders 1`] = `
     <Icon
       iconName="ChevronDown"
     />
-    <StyledLabelBase>
+    <StyledLabelBase
+      styles={
+        {
+          "root": {
+            "color": "var(--colorNeutralForeground1)",
+          },
+        }
+      }
+    >
       Sample title
     </StyledLabelBase>
   </Stack>

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -58,6 +58,26 @@ export interface CommandButtonComponentProps {
    */
   tooltipText?: string;
 
+  /**
+   * Custom styles to apply to the button using Fluent UI theme tokens
+   */
+  styles?: {
+    root?: {
+      backgroundColor?: string;
+      color?: string;
+      selectors?: {
+        ":hover"?: {
+          backgroundColor?: string;
+          color?: string;
+        };
+        ":active"?: {
+          backgroundColor?: string;
+          color?: string;
+        };
+      };
+    };
+  };
+
   /**
    * tabindex for the command button
    */
@@ -250,6 +270,8 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
       contentClassName += " hasHiddenItems";
     }
 
+    const style = this.props.styles?.root || {};
+
     return (
       <div className="commandButtonReact">
         <span
@@ -262,6 +284,7 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
           aria-disabled={this.props.disabled}
           aria-haspopup={this.props.hasPopup}
           aria-label={this.props.ariaLabel}
+          style={style}
           onClick={(e: React.MouseEvent<HTMLSpanElement>) => this.commandClickCallback(e)}
         >
           <div className={contentClassName}>

src/Explorer/Controls/Dialog.tsx

@@ -179,8 +179,18 @@ export const Dialog: FC = () => {
       title,
       subText,
       styles: {
-        title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT },
-        subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE },
+        title: {
+          fontSize: DIALOG_TITLE_FONT_SIZE,
+          fontWeight: DIALOG_TITLE_FONT_WEIGHT,
+        },
+        subText: {
+          fontSize: DIALOG_SUBTEXT_FONT_SIZE,
+          color: "var(--colorNeutralForeground2)",
+        },
+        content: {
+          backgroundColor: "var(--colorNeutralBackground1)",
+          color: "var(--colorNeutralForeground1)",
+        },
       },
       showCloseButton: showCloseButton || false,
       onDismiss,
@@ -188,18 +198,60 @@ export const Dialog: FC = () => {
     modalProps: { isBlocking: isModal, isDarkOverlay: false },
     minWidth: DIALOG_MIN_WIDTH,
     maxWidth: DIALOG_MAX_WIDTH,
+    styles: {
+      main: {
+        backgroundColor: "var(--colorNeutralBackground1)",
+        selectors: {
+          ".ms-Dialog-title": { color: "var(--colorNeutralForeground1)" },
+        },
+      },
+    },
   };
 
   const primaryButtonProps: IButtonProps = {
     text: primaryButtonText,
     disabled: primaryButtonDisabled || false,
     onClick: onPrimaryButtonClick,
+    styles: {
+      root: {
+        backgroundColor: "var(--colorBrandBackground)",
+        color: "var(--colorNeutralForegroundOnBrand)",
+        selectors: {
+          ":hover": {
+            backgroundColor: "var(--colorBrandBackgroundHover)",
+            color: "var(--colorNeutralForegroundOnBrand)",
+          },
+          ":active": {
+            backgroundColor: "var(--colorBrandBackgroundPressed)",
+            color: "var(--colorNeutralForegroundOnBrand)",
+          },
+        },
+      },
+    },
   };
   const secondaryButtonProps: IButtonProps =
     secondaryButtonText && onSecondaryButtonClick
       ? {
           text: secondaryButtonText,
           onClick: onSecondaryButtonClick,
+          styles: {
+            root: {
+              backgroundColor: "var(--colorNeutralBackground2)",
+              color: "var(--colorNeutralForeground1)",
+              borderColor: "var(--colorNeutralStroke1)",
+              selectors: {
+                ":hover": {
+                  backgroundColor: "var(--colorNeutralBackground3)",
+                  color: "var(--colorNeutralForeground1)",
+                },
+                ":active": {
+                  backgroundColor: "var(--colorNeutralBackground3)",
+                  color: "var(--colorNeutralForeground1)",
+                  borderColor: "var(--colorCompoundBrandStroke1)",
+                },
+              },
+            },
+          },
         }
       : undefined;
   return visible ? (

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -1,4 +1,5 @@
 import { Spinner, SpinnerSize } from "@fluentui/react";
+import { monacoTheme, useThemeStore } from "hooks/useTheme";
 import * as React from "react";
 import { loadMonaco, monaco } from "../../LazyMonaco";
 // import "./EditorReact.less";
@@ -66,6 +67,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
   private rootNode: HTMLElement;
   public editor: monaco.editor.IStandaloneCodeEditor;
   private selectionListener: monaco.IDisposable;
+  private themeUnsubscribe: () => void;
   monacoApi: {
     default: typeof monaco;
     Emitter: typeof monaco.Emitter;
@@ -94,6 +96,13 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
   public componentDidMount(): void {
     this.createEditor(this.configureEditor.bind(this));
 
+    this.themeUnsubscribe = useThemeStore.subscribe((state) => {
+      if (this.editor) {
+        const newTheme = state.isDarkMode ? "vs-dark" : "vs";
+        this.monacoApi?.editor.setTheme(newTheme);
+      }
+    });
+
     setTimeout(() => {
       const suggestionWidget = this.editor?.getDomNode()?.querySelector(".suggest-widget") as HTMLElement;
       if (suggestionWidget) {
@@ -128,6 +137,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
   public componentWillUnmount(): void {
     this.selectionListener && this.selectionListener.dispose();
+    this.themeUnsubscribe && this.themeUnsubscribe();
   }
 
   public render(): JSX.Element {
@@ -211,7 +221,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
       ariaLabel: this.props.ariaLabel,
       fontSize: this.props.fontSize || 12,
       automaticLayout: true,
-      theme: this.props.theme,
+      theme: monacoTheme(),
       wordWrap: this.props.wordWrap || "off",
       lineNumbers: this.props.lineNumbers || "off",
       lineNumbersMinChars: this.props.lineNumbersMinChars,

src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.tsx

@@ -2,6 +2,7 @@ import {
   DefaultButton,
   Dropdown,
   IDropdownOption,
+  IDropdownStyles,
   IStyleFunctionOrObject,
   ITextFieldStyleProps,
   ITextFieldStyles,
@@ -35,31 +36,167 @@ export interface FullTextPolicyData {
 const labelStyles = {
   root: {
     fontSize: 12,
+    color: "var(--colorNeutralForeground1)",
   },
 };
 
 const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
   fieldGroup: {
     height: 27,
+    backgroundColor: "var(--colorNeutralBackground2)",
+    borderColor: "var(--colorNeutralStroke1)",
   },
   field: {
     fontSize: 12,
     padding: "0 8px",
+    color: "var(--colorNeutralForeground1)",
+    backgroundColor: "var(--colorNeutralBackground2)",
+  },
+  root: {
+    selectors: {
+      input: {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "input:hover": {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        borderColor: "var(--colorNeutralStroke1)",
+      },
+      "input:focus": {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        borderColor: "var(--colorBrandBackground)",
+      },
+    },
   },
 };
 
-const dropdownStyles = {
-  title: {
-    height: 27,
-    lineHeight: "24px",
-    fontSize: 12,
+const dropdownStyles: Partial<IDropdownStyles> = {
+  root: {
+    width: "40%",
+    marginTop: "10px",
+    selectors: {
+      "&:hover .ms-Dropdown-title": {
+        color: "var(--colorNeutralForeground1)",
+        backgroundColor: "var(--colorNeutralBackground2)",
+        borderColor: "var(--colorNeutralStroke1)",
+      },
+      "&:hover span.ms-Dropdown-title": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:focus .ms-Dropdown-title": {
+        color: "var(--colorNeutralForeground1)",
+        backgroundColor: "var(--colorNeutralBackground2)",
+      },
+      "&:focus span.ms-Dropdown-title": {
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
+  label: {
+    color: "var(--colorNeutralForeground1)",
   },
   dropdown: {
-    height: 27,
-    lineHeight: "24px",
+    backgroundColor: "var(--colorNeutralBackground2)",
+    borderColor: "var(--colorNeutralStroke1)",
+    color: "var(--colorNeutralForeground1)",
+  },
+  title: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+    color: "var(--colorNeutralForeground1)",
+    borderColor: "var(--colorNeutralStroke1)",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:focus": {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:hover .ms-Dropdown-titleText": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:focus .ms-Dropdown-titleText": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      "& .ms-Dropdown-titleText": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&.ms-Dropdown-title--hasPlaceholder": {
+        color: "var(--colorNeutralForeground2)",
+      },
+    },
+  },
+  errorMessage: {
+    color: "var(--colorNeutralForeground1)",
+  },
+  caretDown: {
+    color: "var(--colorNeutralForeground1)",
+  },
+  callout: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+    border: "1px solid var(--colorNeutralStroke1)",
+  },
+  dropdownItems: {
+    backgroundColor: "var(--colorNeutralBackground2)",
   },
   dropdownItem: {
-    fontSize: 12,
+    backgroundColor: "transparent",
+    color: "var(--colorNeutralForeground1)",
+    minHeight: "36px",
+    lineHeight: "36px",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:hover .ms-Dropdown-optionText": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:focus": {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:active": {
+        backgroundColor: "rgba(255, 255, 255, 0.15)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "& .ms-Dropdown-optionText": {
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
+  dropdownItemSelected: {
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
+    color: "var(--colorNeutralForeground1)",
+    minHeight: "36px",
+    lineHeight: "36px",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:hover .ms-Dropdown-optionText": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:focus": {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:active": {
+        backgroundColor: "rgba(255, 255, 255, 0.15)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "& .ms-Dropdown-optionText": {
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
+  dropdownOptionText: {
+    color: "var(--colorNeutralForeground1)",
+  },
+  dropdownItemHeader: {
+    color: "var(--colorNeutralForeground1)",
   },
 };
 
@@ -226,7 +363,32 @@ export const FullTextPoliciesComponent: React.FunctionComponent<FullTextPolicies
             </Stack>
           </CollapsibleSectionComponent>
         ))}
-      <DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}>
+      <DefaultButton
+        id={`add-vector-policy`}
+        styles={{
+          root: {
+            maxWidth: 170,
+            fontSize: 12,
+            color: "var(--colorNeutralForeground1)",
+            backgroundColor: "transparent",
+            borderColor: "var(--colorNeutralStroke1)",
+          },
+          rootHovered: {
+            color: "var(--colorNeutralForeground1)",
+            backgroundColor: "transparent",
+            borderColor: "var(--colorNeutralForeground1)",
+          },
+          rootPressed: {
+            color: "var(--colorNeutralForeground1)",
+            backgroundColor: "transparent",
+            borderColor: "var(--colorNeutralForeground1)",
+          },
+          rootDisabled: {
+            backgroundColor: "transparent",
+          },
+        }}
+        onClick={onAdd}
+      >
         Add full text path
       </DefaultButton>
     </Stack>

src/Explorer/Controls/Settings/SettingsComponent.less

@@ -4,6 +4,8 @@
   height: 100%;
   overflow-y: auto;
   width: 100%;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .settingsV2ToolTip {
@@ -23,6 +25,8 @@
   overflow-y: auto;
   width: 100%;
   font-family: @DataExplorerFont;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .settingsV2Editor {

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,4 +1,4 @@
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
+import { IPivotItemProps, IPivotProps, Pivot, PivotItem, Stack } from "@fluentui/react";
 import { sendMessage } from "Common/MessageHandler";
 import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
 import {
@@ -1477,28 +1477,111 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       selectedKey: SettingsV2TabTypes[this.state.selectedTab],
     };
 
-    const pivotItems = tabs.map((tab) => {
-      const pivotItemProps: IPivotItemProps = {
-        itemKey: SettingsV2TabTypes[tab.tab],
-        style: { marginTop: 20 },
-        headerText: getTabTitle(tab.tab),
+    const pivotStyles = {
+      root: {
+        backgroundColor: "var(--colorNeutralBackground1)",
+        color: "var(--colorNeutralForeground1)",
+        selectors: {
+          "& .ms-Pivot-link": {
+            color: "var(--colorNeutralForeground1)",
+          },
+          "& .ms-Pivot-link.is-selected::before": {
+            backgroundColor: "var(--colorCompoundBrandBackground)",
+          },
+        },
+      },
+      link: {
+        backgroundColor: "var(--colorNeutralBackground1)",
+        color: "var(--colorNeutralForeground1)",
+        selectors: {
+          "&:hover": {
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)",
+          },
+          "&:active": {
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)",
+          },
+          '&[aria-selected="true"]': {
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)",
+            selectors: {
+              "&:hover": {
+                backgroundColor: "var(--colorNeutralBackground1)",
+                color: "var(--colorNeutralForeground1)",
+              },
+              "&:active": {
+                backgroundColor: "var(--colorNeutralBackground1)",
+                color: "var(--colorNeutralForeground1)",
+              },
+            },
+          },
+        },
+      },
+
+      itemContainer: {
+        // padding: '20px 24px',
+        backgroundColor: "var(--colorNeutralBackground1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+    };
+
+    const contentStyles = {
+      root: {
+        backgroundColor: "var(--colorNeutralBackground1)",
+        color: "var(--colorNeutralForeground1)",
+        // padding: '20px 24px'
+      },
     };
 
     return (
-        <PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
-          {tab.content}
-        </PivotItem>
-      );
-    });
-
-    return (
-      <div className="settingsV2MainContainer">
+      <div
+        className="settingsV2MainContainer"
+        style={
+          {
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)",
+            position: "relative",
+          } as React.CSSProperties
+        }
+      >
         {this.shouldShowKeyspaceSharedThroughputMessage() && (
           <div>This table shared throughput is configured at the keyspace</div>
         )}
 
-        <div className="settingsV2TabsContainer">
-          <Pivot {...pivotProps}>{pivotItems}</Pivot>
+        <div
+          className="settingsV2TabsContainer"
+          style={
+            {
+              backgroundColor: "var(--colorNeutralBackground1)",
+              color: "var(--colorNeutralForeground1)",
+              position: "relative",
+              padding: "20px 24px",
+            } as React.CSSProperties
+          }
+        >
+          <Pivot {...pivotProps} styles={pivotStyles}>
+            {tabs.map((tab) => {
+              const pivotItemProps: IPivotItemProps = {
+                itemKey: SettingsV2TabTypes[tab.tab],
+                style: {
+                  marginTop: 20,
+                  backgroundColor: "var(--colorNeutralBackground1)",
+                  color: "var(--colorNeutralForeground1)",
+                },
+                headerText: getTabTitle(tab.tab),
+                headerButtonProps: {
+                  "data-test": `settings-tab-header/${SettingsV2TabTypes[tab.tab]}`,
+                },
+              };
+
+              return (
+                <PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
+                  <Stack styles={contentStyles}>{tab.content}</Stack>
+                </PivotItem>
+              );
+            })}
+          </Pivot>
         </div>
       </div>
     );

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -63,7 +63,7 @@ export interface PriceBreakdown {
 
 export type editorType = "indexPolicy" | "computedProperties" | "dataMasking";
 
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "var(--colorNeutralForeground1)" } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
   label: {
@@ -119,15 +119,89 @@ export const addMongoIndexSubElementsTokens: IStackTokens = {
 
 export const mediumWidthStackStyles: IStackStyles = { root: { width: 600 } };
 
-export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = { root: { paddingLeft: 10, width: 210 } };
+export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = {
+  root: { paddingLeft: 10, width: 210 },
+  fieldGroup: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+    borderColor: "var(--colorNeutralStroke1)",
+  },
+  field: {
+    color: "var(--colorNeutralForeground1)",
+    backgroundColor: "var(--colorNeutralBackground2)",
+  },
+};
 
-export const shortWidthDropDownStyles: Partial<IDropdownStyles> = { dropdown: { paddingleft: 10, width: 202 } };
+export const shortWidthDropDownStyles: Partial<IDropdownStyles> = {
+  dropdown: { paddingLeft: 10, width: 202 },
+  title: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+    color: "var(--colorNeutralForeground1)",
+    borderColor: "var(--colorNeutralStroke1)",
+  },
+  caretDown: {
+    color: "var(--colorNeutralForeground1)",
+  },
+  callout: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+    border: "1px solid var(--colorNeutralStroke1)",
+  },
+  dropdownItems: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+  },
+  dropdownItem: {
+    backgroundColor: "transparent",
+    color: "var(--colorNeutralForeground1)",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:focus": {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
+  dropdownItemSelected: {
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
+    color: "var(--colorNeutralForeground1)",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
+  dropdownOptionText: {
+    color: "var(--colorNeutralForeground1)",
+  },
+};
 
 export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
   root: {
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
     selectors: {
       ":hover": {
-        background: "transparent",
+        backgroundColor: "var(--colorNeutralBackground1Hover)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      ":hover .ms-DetailsRow-cell": {
+        backgroundColor: "var(--colorNeutralBackground1Hover)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&.ms-DetailsRow": {
+        backgroundColor: "var(--colorNeutralBackground1)",
+      },
+    },
+  },
+  cell: {
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+    selectors: {
+      ":hover": {
+        backgroundColor: "var(--colorNeutralBackground1Hover)",
+        color: "var(--colorNeutralForeground1)",
       },
     },
   },
@@ -135,9 +209,11 @@ export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
 
 export const transparentDetailsHeaderStyle: Partial<IDetailsColumnStyles> = {
   root: {
+    color: "var(--colorNeutralForeground1)",
     selectors: {
       ":hover": {
-        background: "transparent",
+        background: "var(--colorNeutralBackground1Hover)",
+        color: "var(--colorNeutralForeground1)",
       },
     },
   },
@@ -149,6 +225,35 @@ export const customDetailsListStyles: Partial<IDetailsListStyles> = {
       ".ms-FocusZone": {
         paddingTop: 0,
       },
+      ".ms-DetailsHeader": {
+        backgroundColor: "var(--colorNeutralBackground1)",
+      },
+      ".ms-DetailsHeader-cell": {
+        color: "var(--colorNeutralForeground1)",
+        backgroundColor: "var(--colorNeutralBackground1)",
+        selectors: {
+          ":hover": {
+            backgroundColor: "var(--colorNeutralBackground1Hover)",
+            color: "var(--colorNeutralForeground1)",
+          },
+        },
+      },
+      ".ms-DetailsHeader-cellTitle": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-DetailsRow": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-DetailsRow-cell": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      // Tooltip styling for cells
+      ".ms-TooltipHost": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-DetailsRow-cell .ms-TooltipHost": {
+        color: "var(--colorNeutralForeground1)",
+      },
     },
   },
 };
@@ -166,7 +271,18 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
 };
 
 export const messageBarStyles: Partial<IMessageBarStyles> = {
-  root: { marginTop: "5px", backgroundColor: "white" },
+  root: {
+    marginTop: "5px",
+    backgroundColor: "var(--colorNeutralBackground1)",
+    selectors: {
+      "&.ms-MessageBar--severeWarning": {
+        backgroundColor: "var(--colorNeutralBackground4)",
+      },
+      "&.ms-MessageBar--warning": {
+        backgroundColor: "var(--colorNeutralBackground3)",
+      },
+    },
+  },
   text: { fontSize: 14 },
 };
 
@@ -222,9 +338,11 @@ export const getEstimatedSpendingElement = (
   const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
   return (
     <Stack>
-      <Text style={{ fontWeight: 600 }}>Cost estimate*</Text>
+      <Text style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>Cost estimate*</Text>
       {costElement}
-      <Text style={{ fontWeight: 600, marginTop: 15 }}>How we calculate this</Text>
+      <Text style={{ fontWeight: 600, marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
+        How we calculate this
+      </Text>
       <Stack id="throughputSpendElement" style={{ marginTop: 5 }}>
         <span>
           {numberOfRegions} region{numberOfRegions > 1 && <span>s</span>}
@@ -238,7 +356,7 @@ export const getEstimatedSpendingElement = (
           {priceBreakdown.pricePerRu}/RU
         </span>
       </Stack>
-      <Text style={{ marginTop: 15 }}>
+      <Text style={{ marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
         <em>*{estimatedCostDisclaimer}</em>
       </Text>
     </Stack>
@@ -285,7 +403,7 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
 
 export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => {
   return (
-    <Text styles={infoAndToolTipTextStyle} id="updateThroughputDelayedApplyWarningMessage">
+    <Text id="updateThroughputDelayedApplyWarningMessage">
       Scaling up will take 4-6 hours as it exceeds what Azure Cosmos DB can instantly support currently based on your
       number of physical partitions. You can increase your throughput to {instantMaximumThroughput} instantly or proceed
       with this value and wait until the scale-up is completed.
@@ -303,7 +421,7 @@ export const getUpdateThroughputBeyondSupportLimitMessage = (
         Your request to increase throughput exceeds the pre-allocated capacity which may take longer than expected.
         There are three options you can choose from to proceed:
       </Text>
-      <ol style={{ fontSize: 14, color: "windowtext", marginTop: "5px" }}>
+      <ol style={{ fontSize: 14, color: "var(--colorNeutralForeground1)", marginTop: "5px" }}>
         <li>You can instantly scale up to {instantMaximumThroughput} RU/s.</li>
         {instantMaximumThroughput < maximumThroughput && (
           <li>You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.</li>
@@ -339,7 +457,7 @@ export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Ele
 };
 
 export const saveThroughputWarningMessage: JSX.Element = (
-  <Text styles={infoAndToolTipTextStyle}>
+  <Text>
     Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
     before saving your changes
   </Text>
@@ -459,9 +577,13 @@ export const changeFeedPolicyToolTip: JSX.Element = (
 );
 
 export const mongoIndexingPolicyDisclaimer: JSX.Element = (
-  <Text>
+  <Text style={{ color: "var(--colorNeutralForeground1)" }}>
     For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
-    <Link href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types" target="_blank">
+    <Link
+      href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types"
+      target="_blank"
+      style={{ color: "var(--colorBrandForeground1)" }}
+    >
       {` Compound indexes `}
     </Link>
     are only used for sorting query results. If you need to add a compound index, you can create one using the Mongo
@@ -470,7 +592,7 @@ export const mongoIndexingPolicyDisclaimer: JSX.Element = (
 );
 
 export const mongoCompoundIndexNotSupportedMessage: JSX.Element = (
-  <Text>
+  <Text style={{ color: "var(--colorNeutralForeground1)" }}>
     Collections with compound indexes are not yet supported in the indexing editor. To modify indexing policy for this
     collection, use the Mongo Shell.
   </Text>
@@ -519,14 +641,50 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
   fieldGroup: {
     height: 25,
     width: 300,
-    borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
+    backgroundColor: "var(--colorNeutralBackground2)",
+    borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "var(--colorNeutralStroke1)",
     selectors: {
       ":disabled": {
-        backgroundColor: StyleConstants.BaseMedium,
-        borderColor: StyleConstants.BaseMediumHigh,
+        backgroundColor: "var(--colorNeutralBackground2)",
+        borderColor: "var(--colorNeutralStroke1)",
+        color: "var(--colorNeutralForeground2)",
+      },
+      input: {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "input:disabled": {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        color: "var(--colorNeutralForeground2)",
+      },
+      "input#autopilotInput": {
+        backgroundColor: "var(--colorNeutralBackground4)",
+        color: "var(--colorNeutralForeground1)",
       },
     },
   },
+  field: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+    color: "var(--colorNeutralForeground1)",
+    selectors: {
+      ":disabled": {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        color: "var(--colorNeutralForeground2)",
+      },
+    },
+  },
+  subComponentStyles: {
+    label: {
+      root: {
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
+  suffix: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+    color: "var(--colorNeutralForeground1)",
+    border: "1px solid var(--colorNeutralStroke1)",
+  },
 });
 
 export const getChoiceGroupStyles = (
@@ -534,6 +692,28 @@ export const getChoiceGroupStyles = (
   baseline: isDirtyTypes,
   isHorizontal?: boolean,
 ): Partial<IChoiceGroupStyles> => ({
+  label: {
+    color: "var(--colorNeutralForeground1)",
+  },
+  root: {
+    selectors: {
+      ".ms-ChoiceFieldLabel": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-ChoiceField-innerField": {
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
   flexContainer: [
     {
       selectors: {
@@ -548,6 +728,16 @@ export const getChoiceGroupStyles = (
           fontSize: 14,
           fontFamily: StyleConstants.DataExplorerFont,
           padding: "2px 5px",
+          color: "var(--colorNeutralForeground1)",
+        },
+        ".ms-ChoiceFieldLabel": {
+          color: "var(--colorNeutralForeground1)",
+        },
+        ".ms-ChoiceFieldLabel:hover": {
+          color: "var(--colorNeutralForeground1)",
+        },
+        ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+          color: "var(--colorNeutralForeground1)",
         },
       },
       display: isHorizontal ? "inline-flex" : "default",

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

@@ -1,11 +1,11 @@
-import { FontIcon, Link, MessageBar, MessageBarType, Stack, Text } from "@fluentui/react";
+import { FontIcon, IMessageBarStyles, Link, MessageBar, MessageBarType, Stack, Text } from "@fluentui/react";
 import * as DataModels from "Contracts/DataModels";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "Explorer/Controls/Settings/SettingsRenderUtils";
 import { isDirty } from "Explorer/Controls/Settings/SettingsUtils";
 import { loadMonaco } from "Explorer/LazyMonaco";
+import { monacoTheme, useThemeStore } from "hooks/useTheme";
 import * as monaco from "monaco-editor";
 import * as React from "react";
-
 export interface ComputedPropertiesComponentProps {
   computedPropertiesContent: DataModels.ComputedProperties;
   computedPropertiesContentBaseline: DataModels.ComputedProperties;
@@ -27,6 +27,24 @@ export class ComputedPropertiesComponent extends React.Component<
   private shouldCheckComponentIsDirty = true;
   private computedPropertiesDiv = React.createRef<HTMLDivElement>();
   private computedPropertiesEditor: monaco.editor.IStandaloneCodeEditor;
+  private themeUnsubscribe: () => void;
+
+  private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
+    root: {
+      selectors: {
+        "&.ms-MessageBar--warning": {
+          backgroundColor: "var(--colorStatusWarningBackground1)",
+          border: "1px solid var(--colorStatusWarningBorder1)",
+        },
+        ".ms-MessageBar-icon": {
+          color: "var(--colorNeutralForeground1)",
+        },
+        ".ms-MessageBar-text": {
+          color: "var(--colorNeutralForeground1)",
+        },
+      },
+    },
+  };
 
   constructor(props: ComputedPropertiesComponentProps) {
     super(props);
@@ -48,6 +66,10 @@ export class ComputedPropertiesComponent extends React.Component<
     this.onComponentUpdate();
   }
 
+  componentWillUnmount(): void {
+    this.themeUnsubscribe && this.themeUnsubscribe();
+  }
+
   public resetComputedPropertiesEditor = (): void => {
     if (!this.computedPropertiesEditor) {
       this.createComputedPropertiesEditor();
@@ -86,8 +108,16 @@ export class ComputedPropertiesComponent extends React.Component<
       value: value,
       language: "json",
       ariaLabel: "Computed properties",
+      theme: monacoTheme(),
     });
     if (this.computedPropertiesEditor) {
+      // Subscribe to theme changes
+      this.themeUnsubscribe = useThemeStore.subscribe(() => {
+        if (this.computedPropertiesEditor) {
+          monaco.editor.setTheme(monacoTheme());
+        }
+      });
+
       const computedPropertiesEditorModel = this.computedPropertiesEditor.getModel();
       computedPropertiesEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
       this.props.logComputedPropertiesSuccessMessage();
@@ -111,11 +141,15 @@ export class ComputedPropertiesComponent extends React.Component<
     return (
       <Stack {...titleAndInputStackProps}>
         {isDirty(this.props.computedPropertiesContent, this.props.computedPropertiesContentBaseline) && (
-          <MessageBar messageBarType={MessageBarType.warning}>
+          <MessageBar
+            messageBarType={MessageBarType.warning}
+            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+            styles={this.darkThemeMessageBarStyles}
+          >
             {unsavedEditorWarningMessage("computedProperties")}
           </MessageBar>
         )}
-        <Text style={{ marginLeft: "30px", marginBottom: "10px" }}>
+        <Text style={{ marginLeft: "30px", marginBottom: "10px", color: "var(--colorNeutralForeground1)" }}>
           <Link target="_blank" href="https://aka.ms/computed-properties-preview/">
             {"Learn more"} <FontIcon iconName="NavigateExternalInline" />
           </Link>

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

@@ -6,7 +6,6 @@ import {
   conflictResolutionCustomToolTip,
   conflictResolutionLwwTooltip,
   getChoiceGroupStyles,
-  getTextFieldStyles,
   subComponentStackProps,
 } from "../SettingsRenderUtils";
 import { isDirty } from "../SettingsUtils";
@@ -106,10 +105,46 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
       id="conflictResolutionLwwTextField"
       label={"Conflict Resolver Property"}
       onRenderLabel={this.onRenderLwwComponentTextField}
-      styles={getTextFieldStyles(
-        this.props.conflictResolutionPolicyPath,
-        this.props.conflictResolutionPolicyPathBaseline,
-      )}
+      styles={{
+        fieldGroup: {
+          height: 25,
+          width: 300,
+          backgroundColor: "var(--colorNeutralBackground2)",
+          borderColor: "var(--colorNeutralStroke1)",
+          selectors: {
+            ":disabled": {
+              backgroundColor: "var(--colorNeutralBackground2)",
+              borderColor: "var(--colorNeutralStroke1)",
+              color: "var(--colorNeutralForeground2)",
+            },
+            input: {
+              backgroundColor: "var(--colorNeutralBackground2)",
+              color: "var(--colorNeutralForeground1)",
+            },
+            "input:disabled": {
+              backgroundColor: "var(--colorNeutralBackground2)",
+              color: "var(--colorNeutralForeground2)",
+            },
+          },
+        },
+        field: {
+          backgroundColor: "var(--colorNeutralBackground2)",
+          color: "var(--colorNeutralForeground1)",
+          selectors: {
+            ":disabled": {
+              backgroundColor: "var(--colorNeutralBackground2)",
+              color: "var(--colorNeutralForeground2)",
+            },
+          },
+        },
+        subComponentStyles: {
+          label: {
+            root: {
+              color: "var(--colorNeutralForeground1)",
+            },
+          },
+        },
+      }}
       value={this.props.conflictResolutionPolicyPath}
       onChange={this.onConflictResolutionPolicyPathChange}
     />
@@ -119,19 +154,57 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
     <ToolTipLabelComponent label={props.label} toolTipElement={conflictResolutionCustomToolTip} />
   );
 
-  private getConflictResolutionCustomComponent = (): JSX.Element => (
+  private getConflictResolutionCustomComponent = (): JSX.Element => {
+    return (
       <TextField
         id="conflictResolutionCustomTextField"
         label="Stored procedure"
         onRenderLabel={this.onRenderCustomComponentTextField}
-      styles={getTextFieldStyles(
-        this.props.conflictResolutionPolicyProcedure,
-        this.props.conflictResolutionPolicyProcedureBaseline,
-      )}
+        styles={{
+          fieldGroup: {
+            height: 25,
+            width: 300,
+            backgroundColor: "var(--colorNeutralBackground2)",
+            borderColor: "var(--colorNeutralStroke1)",
+            selectors: {
+              ":disabled": {
+                backgroundColor: "var(--colorNeutralBackground2)",
+                borderColor: "var(--colorNeutralStroke1)",
+                color: "var(--colorNeutralForeground2)",
+              },
+              input: {
+                backgroundColor: "var(--colorNeutralBackground2)",
+                color: "var(--colorNeutralForeground1)",
+              },
+              "input:disabled": {
+                backgroundColor: "var(--colorNeutralBackground2)",
+                color: "var(--colorNeutralForeground2)",
+              },
+            },
+          },
+          field: {
+            backgroundColor: "var(--colorNeutralBackground2)",
+            color: "var(--colorNeutralForeground1)",
+            selectors: {
+              ":disabled": {
+                backgroundColor: "var(--colorNeutralBackground2)",
+                color: "var(--colorNeutralForeground2)",
+              },
+            },
+          },
+          subComponentStyles: {
+            label: {
+              root: {
+                color: "var(--colorNeutralForeground1)",
+              },
+            },
+          },
+        }}
         value={this.props.conflictResolutionPolicyProcedure}
         onChange={this.onConflictResolutionPolicyProcedureChange}
       />
     );
+  };
 
   public render(): JSX.Element {
     return (

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

@@ -102,11 +102,57 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
 
   return (
     <div>
-      <Pivot onLinkClick={onPivotChange} selectedKey={ContainerPolicyTabTypes[selectedTab]}>
+      <Pivot
+        onLinkClick={onPivotChange}
+        selectedKey={ContainerPolicyTabTypes[selectedTab]}
+        styles={{
+          root: {
+            color: "var(--colorNeutralForeground1)",
+          },
+          link: {
+            color: "var(--colorNeutralForeground1)",
+            backgroundColor: "transparent",
+            selectors: {
+              ":hover": {
+                color: "var(--colorNeutralForeground1)",
+                backgroundColor: "transparent",
+              },
+              ":active": {
+                color: "var(--colorNeutralForeground1)",
+                backgroundColor: "transparent",
+              },
+            },
+          },
+          linkIsSelected: {
+            color: "var(--colorNeutralForeground1)",
+            backgroundColor: "transparent",
+            selectors: {
+              ":before": {
+                color: "var(--colorNeutralForeground1)",
+                backgroundColor: "var(--colorBrandForeground1)",
+              },
+              ":hover": {
+                color: "var(--colorNeutralForeground1)",
+                backgroundColor: "transparent",
+              },
+              ":active": {
+                color: "var(--colorNeutralForeground1)",
+                backgroundColor: "transparent",
+              },
+            },
+          },
+          linkContent: {
+            color: "inherit",
+          },
+          text: {
+            color: "inherit",
+          },
+        }}
+      >
         {isVectorSearchEnabled && (
           <PivotItem
             itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.VectorPolicyTab]}
-            style={{ marginTop: 20 }}
+            style={{ marginTop: 20, color: "var(--colorNeutralForeground1)" }}
             headerText="Vector Policy"
           >
             <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
@@ -128,7 +174,7 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
         {isFullTextSearchEnabled && (
           <PivotItem
             itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.FullTextPolicyTab]}
-            style={{ marginTop: 20 }}
+            style={{ marginTop: 20, color: "var(--colorNeutralForeground1)" }}
             headerText="Full Text Policy"
           >
             <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
@@ -144,7 +190,27 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
               ) : (
                 <DefaultButton
                   id={"create-full-text-policy"}
-                  styles={{ root: { fontSize: 12 } }}
+                  styles={{
+                    root: {
+                      fontSize: 12,
+                      color: "var(--colorNeutralForeground1)",
+                      backgroundColor: "transparent",
+                      borderColor: "var(--colorNeutralForeground1)",
+                    },
+                    rootHovered: {
+                      color: "var(--colorNeutralForeground1)",
+                      backgroundColor: "transparent",
+                      borderColor: "var(--colorNeutralForeground1)",
+                    },
+                    rootPressed: {
+                      color: "var(--colorNeutralForeground1)",
+                      backgroundColor: "transparent",
+                      borderColor: "var(--colorNeutralForeground1)",
+                    },
+                    rootDisabled: {
+                      backgroundColor: "transparent",
+                    },
+                  }}
                   onClick={() => {
                     checkAndSendFullTextPolicyToSettings({
                       defaultLanguage: getFullTextLanguageOptions()[0].key as never,

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

@@ -1,4 +1,5 @@
-import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import { IMessageBarStyles, MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import { monacoTheme, useThemeStore } from "hooks/useTheme";
 import * as monaco from "monaco-editor";
 import * as React from "react";
 import * as DataModels from "../../../../Contracts/DataModels";
@@ -6,7 +7,6 @@ import { loadMonaco } from "../../../LazyMonaco";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "../SettingsRenderUtils";
 import { isDirty, isIndexTransforming } from "../SettingsUtils";
 import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
-
 export interface IndexingPolicyComponentProps {
   shouldDiscardIndexingPolicy: boolean;
   resetShouldDiscardIndexingPolicy: () => void;
@@ -31,6 +31,24 @@ export class IndexingPolicyComponent extends React.Component<
   private shouldCheckComponentIsDirty = true;
   private indexingPolicyDiv = React.createRef<HTMLDivElement>();
   private indexingPolicyEditor: monaco.editor.IStandaloneCodeEditor;
+  private themeUnsubscribe: () => void;
+
+  private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
+    root: {
+      selectors: {
+        "&.ms-MessageBar--warning": {
+          backgroundColor: "var(--colorStatusWarningBackground1)",
+          border: "1px solid var(--colorStatusWarningBorder1)",
+        },
+        ".ms-MessageBar-icon": {
+          color: "var(--colorNeutralForeground1)",
+        },
+        ".ms-MessageBar-text": {
+          color: "var(--colorNeutralForeground1)",
+        },
+      },
+    },
+  };
 
   constructor(props: IndexingPolicyComponentProps) {
     super(props);
@@ -52,6 +70,10 @@ export class IndexingPolicyComponent extends React.Component<
     this.onComponentUpdate();
   }
 
+  componentWillUnmount(): void {
+    this.themeUnsubscribe && this.themeUnsubscribe();
+  }
+
   public resetIndexingPolicyEditor = (): void => {
     if (!this.indexingPolicyEditor) {
       this.createIndexingPolicyEditor();
@@ -87,20 +109,32 @@ export class IndexingPolicyComponent extends React.Component<
   };
 
   private async createIndexingPolicyEditor(): Promise<void> {
+    if (!this.indexingPolicyDiv.current) {
+      return;
+    }
     const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
     const monaco = await loadMonaco();
+    if (this.indexingPolicyDiv.current) {
       this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
         value: value,
         language: "json",
         readOnly: isIndexTransforming(this.props.indexTransformationProgress),
         ariaLabel: "Indexing Policy",
+        theme: monacoTheme(),
       });
       if (this.indexingPolicyEditor) {
+        this.themeUnsubscribe = useThemeStore.subscribe(() => {
+          if (this.indexingPolicyEditor) {
+            monaco.editor.setTheme(monacoTheme());
+          }
+        });
+
         const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
         indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
         this.props.logIndexingPolicySuccessMessage();
       }
     }
+  }
 
   private onEditorContentChange = (): void => {
     const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
@@ -121,7 +155,13 @@ export class IndexingPolicyComponent extends React.Component<
           refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
         />
         {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
-          <MessageBar messageBarType={MessageBarType.warning}>{unsavedEditorWarningMessage("indexPolicy")}</MessageBar>
+          <MessageBar
+            messageBarType={MessageBarType.warning}
+            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+            styles={this.darkThemeMessageBarStyles}
+          >
+            {unsavedEditorWarningMessage("indexPolicy")}
+          </MessageBar>
         )}
         <div className="settingsV2Editor" tabIndex={0} ref={this.indexingPolicyDiv}></div>
       </Stack>

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
     styles={
       {
         "root": {
-          "color": "windowtext",
+          "color": "var(--colorNeutralForeground1)",
           "fontSize": 14,
         },
       }

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx

@@ -3,6 +3,7 @@ import {
   DetailsListLayoutMode,
   IColumn,
   IconButton,
+  IMessageBarStyles,
   MessageBar,
   MessageBarType,
   SelectionMode,
@@ -30,12 +31,12 @@ import {
 } from "../../SettingsRenderUtils";
 import {
   AddMongoIndexProps,
-  MongoIndexIdField,
-  MongoIndexTypes,
-  MongoNotificationType,
   getMongoIndexType,
   getMongoIndexTypeText,
   isIndexTransforming,
+  MongoIndexIdField,
+  MongoIndexTypes,
+  MongoNotificationType,
 } from "../../SettingsUtils";
 import { IndexingPolicyRefreshComponent } from "../IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
 import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
@@ -63,6 +64,24 @@ interface MongoIndexDisplayProps {
 export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingPolicyComponentProps> {
   private shouldCheckComponentIsDirty = true;
   private addMongoIndexComponentRefs: React.RefObject<AddMongoIndexComponent>[] = [];
+
+  private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
+    root: {
+      selectors: {
+        "&.ms-MessageBar--warning": {
+          backgroundColor: "var(--colorStatusWarningBackground1)",
+          border: "1px solid var(--colorStatusWarningBorder1)",
+        },
+        ".ms-MessageBar-icon": {
+          color: "var(--colorNeutralForeground1)",
+        },
+        ".ms-MessageBar-text": {
+          color: "var(--colorNeutralForeground1)",
+        },
+      },
+    },
+  };
+
   private initialIndexesColumns: IColumn[] = [
     { key: "definition", name: "Definition", fieldName: "definition", minWidth: 100, maxWidth: 200, isResizable: true },
     { key: "type", name: "Type", fieldName: "type", minWidth: 100, maxWidth: 200, isResizable: true },
@@ -171,8 +190,8 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
     let mongoIndexDisplayProps: MongoIndexDisplayProps;
     if (type) {
       mongoIndexDisplayProps = {
-        definition: <Text>{definition}</Text>,
-        type: <Text>{getMongoIndexTypeText(type)}</Text>,
+        definition: <Text style={{ color: "var(--colorNeutralForeground1)" }}>{definition}</Text>,
+        type: <Text style={{ color: "var(--colorNeutralForeground1)" }}>{getMongoIndexTypeText(type)}</Text>,
         actionButton: definition === MongoIndexIdField ? <></> : this.getActionButton(arrayPosition, isCurrentIndex),
       };
     }
@@ -306,7 +325,15 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
           indexTransformationProgress={this.props.indexTransformationProgress}
           refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
         />
-        {warningMessage && <MessageBar messageBarType={MessageBarType.warning}>{warningMessage}</MessageBar>}
+        {warningMessage && (
+          <MessageBar
+            messageBarType={MessageBarType.warning}
+            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+            styles={this.darkThemeMessageBarStyles}
+          >
+            {warningMessage}
+          </MessageBar>
+        )}
       </>
     );
   };

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap

@@ -22,6 +22,14 @@ exports[`AddMongoIndexComponent renders 1`] = `
       onChange={[Function]}
       styles={
         {
+          "field": {
+            "backgroundColor": "var(--colorNeutralBackground2)",
+            "color": "var(--colorNeutralForeground1)",
+          },
+          "fieldGroup": {
+            "backgroundColor": "var(--colorNeutralBackground2)",
+            "borderColor": "var(--colorNeutralStroke1)",
+          },
           "root": {
             "paddingLeft": 10,
             "width": 210,
@@ -49,10 +57,52 @@ exports[`AddMongoIndexComponent renders 1`] = `
       selectedKey="Single"
       styles={
         {
+          "callout": {
+            "backgroundColor": "var(--colorNeutralBackground2)",
+            "border": "1px solid var(--colorNeutralStroke1)",
+          },
+          "caretDown": {
+            "color": "var(--colorNeutralForeground1)",
+          },
           "dropdown": {
-            "paddingleft": 10,
+            "paddingLeft": 10,
             "width": 202,
           },
+          "dropdownItem": {
+            "backgroundColor": "transparent",
+            "color": "var(--colorNeutralForeground1)",
+            "selectors": {
+              "&:focus": {
+                "backgroundColor": "rgba(255, 255, 255, 0.1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "&:hover": {
+                "backgroundColor": "rgba(255, 255, 255, 0.1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+            },
+          },
+          "dropdownItemSelected": {
+            "backgroundColor": "rgba(255, 255, 255, 0.08)",
+            "color": "var(--colorNeutralForeground1)",
+            "selectors": {
+              "&:hover": {
+                "backgroundColor": "rgba(255, 255, 255, 0.1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+            },
+          },
+          "dropdownItems": {
+            "backgroundColor": "var(--colorNeutralBackground2)",
+          },
+          "dropdownOptionText": {
+            "color": "var(--colorNeutralForeground1)",
+          },
+          "title": {
+            "backgroundColor": "var(--colorNeutralBackground2)",
+            "borderColor": "var(--colorNeutralStroke1)",
+            "color": "var(--colorNeutralForeground1)",
+          },
         }
       }
     />

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap

@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MongoIndexingPolicyComponent error shown for collection with compound indexes 1`] = `
-<Text>
+<Text
+  style={
+    {
+      "color": "var(--colorNeutralForeground1)",
+    }
+  }
+>
   Collections with compound indexes are not yet supported in the indexing editor. To modify indexing policy for this collection, use the Mongo Shell.
 </Text>
 `;
@@ -17,10 +23,21 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
   <IndexingPolicyRefreshComponent
     refreshIndexTransformationProgress={[Function]}
   />
-  <Text>
+  <Text
+    style={
+      {
+        "color": "var(--colorNeutralForeground1)",
+      }
+    }
+  >
     For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
     <StyledLinkBase
       href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types"
+      style={
+        {
+          "color": "var(--colorBrandForeground1)",
+        }
+      }
       target="_blank"
     >
        Compound indexes 
@@ -83,9 +100,37 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
           {
             "root": {
               "selectors": {
+                ".ms-DetailsHeader": {
+                  "backgroundColor": "var(--colorNeutralBackground1)",
+                },
+                ".ms-DetailsHeader-cell": {
+                  "backgroundColor": "var(--colorNeutralBackground1)",
+                  "color": "var(--colorNeutralForeground1)",
+                  "selectors": {
+                    ":hover": {
+                      "backgroundColor": "var(--colorNeutralBackground1Hover)",
+                      "color": "var(--colorNeutralForeground1)",
+                    },
+                  },
+                },
+                ".ms-DetailsHeader-cellTitle": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
+                ".ms-DetailsRow": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
+                ".ms-DetailsRow-cell": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
+                ".ms-DetailsRow-cell .ms-TooltipHost": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
                 ".ms-FocusZone": {
                   "paddingTop": 0,
                 },
+                ".ms-TooltipHost": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
               },
             },
           }

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

@@ -1,6 +1,7 @@
 import {
   DefaultButton,
   FontWeights,
+  IMessageBarStyles,
   Link,
   MessageBar,
   MessageBarType,
@@ -32,6 +33,23 @@ export interface PartitionKeyComponentProps {
   isReadOnly?: boolean; // true: cannot change partition key
 }
 
+const darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
+  root: {
+    selectors: {
+      "&.ms-MessageBar--warning": {
+        backgroundColor: "var(--colorStatusWarningBackground1)",
+        border: "1px solid var(--colorStatusWarningBorder1)",
+      },
+      ".ms-MessageBar-icon": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-MessageBar-text": {
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
+};
+
 export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
   database,
   collection,
@@ -66,13 +84,15 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
   const partitionKeyValue = getPartitionKeyValue();
 
   const textHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold, fontSize: 16 },
+    root: { fontWeight: FontWeights.semibold, fontSize: 16, color: "var(--colorNeutralForeground1)" },
   };
 
   const textSubHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold },
+    root: { fontWeight: FontWeights.semibold, color: "var(--colorNeutralForeground1)" },
+  };
+  const textSubHeadingStyle1 = {
+    root: { color: "var(--colorNeutralForeground1)" },
   };
-
   const startPollingforUpdate = (currentJob: DataTransferJobGetResults) => {
     if (isCurrentJobInProgress(currentJob)) {
       const jobName = currentJob?.properties?.jobName;
@@ -167,32 +187,41 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
             <Text styles={textSubHeadingStyle}>Current {partitionKeyName.toLowerCase()}</Text>
             <Text styles={textSubHeadingStyle}>Partitioning</Text>
           </Stack>
-          <Stack tokens={{ childrenGap: 5 }}>
-            <Text>{partitionKeyValue}</Text>
-            <Text>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
+          <Stack tokens={{ childrenGap: 5 }} data-test="partition-key-values">
+            <Text styles={textSubHeadingStyle1}>{partitionKeyValue}</Text>
+            <Text styles={textSubHeadingStyle1}>
+              {isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}
+            </Text>
           </Stack>
         </Stack>
       </Stack>
 
       {!isReadOnly && (
         <>
-          <MessageBar messageBarType={MessageBarType.warning}>
+          <MessageBar
+            data-test="partition-key-warning"
+            messageBarType={MessageBarType.warning}
+            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+            styles={darkThemeMessageBarStyles}
+          >
             To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to
             the source container for the entire duration of the partition key change process.
             <Link
               href="https://learn.microsoft.com/azure/cosmos-db/container-copy#how-does-container-copy-work"
               target="_blank"
               underline
+              style={{ color: "var(--colorBrandForeground1)" }}
             >
               Learn more
             </Link>
           </MessageBar>
-          <Text>
+          <Text styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>
             To change the partition key, a new destination container must be created or an existing destination
             container selected. Data will then be copied to the destination container.
           </Text>
           {configContext.platform !== Platform.Emulator && (
             <PrimaryButton
+              data-test="change-partition-key-button"
               styles={{ root: { width: "fit-content" } }}
               text="Change"
               onClick={startPartitionkeyChangeWorkflow}

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

@@ -1,4 +1,15 @@
-import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react";
+import {
+  ChoiceGroup,
+  IChoiceGroupOption,
+  Label,
+  Link,
+  MessageBar,
+  Stack,
+  Text,
+  TextField,
+  TooltipHost,
+  mergeStyleSets,
+} from "@fluentui/react";
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import { userContext } from "../../../../UserContext";
@@ -25,6 +36,11 @@ import {
 } from "../SettingsUtils";
 import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 
+const classNames = mergeStyleSets({
+  hintText: {
+    color: "var(--colorNeutralForeground1)", // theme-aware
+  },
+});
 export interface SubSettingsComponentProps {
   collection: ViewModels.Collection;
   timeToLive: TtlType;
@@ -127,9 +143,9 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   };
 
   private ttlChoiceGroupOptions: IChoiceGroupOption[] = [
-    { key: TtlType.Off, text: "Off" },
-    { key: TtlType.OnNoDefault, text: "On (no default)" },
-    { key: TtlType.On, text: "On" },
+    { key: TtlType.Off, text: "Off", ariaLabel: "ttl-off-option" },
+    { key: TtlType.OnNoDefault, text: "On (no default)", ariaLabel: "ttl-on-no-default-option" },
+    { key: TtlType.On, text: "On", ariaLabel: "ttl-on-option" },
   ];
 
   public getTtlValue = (value: string): TtlType => {
@@ -185,13 +201,31 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
     userContext.apiType === "Mongo" ? (
       <MessageBar
         messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-        styles={{ text: { fontSize: 14 } }}
+        styles={{
+          root: {
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)",
+          },
+          text: {
+            fontSize: 14,
+            color: "var(--colorNeutralForeground1)",
+          },
+          icon: {
+            color: "var(--colorNeutralForeground1)",
+          },
+        }}
+      >
+        <Text style={{ color: "var(--colorNeutralForeground1)" }}>
+          To enable time-to-live (TTL) for your collection/documents,{" "}
+          <Link
+            href="https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb-time-to-live"
+            target="_blank"
+            style={{ color: "var(--colorBrandForeground1)" }}
           >
-        To enable time-to-live (TTL) for your collection/documents,
-        <Link href="https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb-time-to-live" target="_blank">
             create a TTL index
           </Link>
           .
+        </Text>
       </MessageBar>
     ) : (
       <Stack {...titleAndInputStackProps}>
@@ -223,6 +257,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
             onChange={this.onTimeToLiveSecondsChange}
             suffix="second(s)"
             ariaLabel={`Time to live in seconds`}
+            data-test="ttl-input"
           />
         )}
       </Stack>
@@ -318,23 +353,34 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   private getPartitionKeyComponent = (): JSX.Element => (
     <Stack {...titleAndInputStackProps}>
       {this.getPartitionKeyVisible() && (
+        <TooltipHost
+          content={`This ${this.partitionKeyName.toLowerCase()} is used to distribute data across multiple partitions for scalability. The value "${
+            this.partitionKeyValue
+          }" determines how documents are partitioned.`}
+          styles={{
+            root: {
+              display: "block",
+            },
+          }}
+        >
           <TextField
             label={this.partitionKeyName}
             disabled
             styles={getTextFieldStyles(undefined, undefined)}
             defaultValue={this.partitionKeyValue}
           />
+        </TooltipHost>
       )}
 
       {userContext.apiType === "SQL" && this.isLargePartitionKeyEnabled() && (
-        <Text>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
+        <Text className={classNames.hintText}>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
       )}
 
       {userContext.apiType === "SQL" &&
         (this.isHierarchicalPartitionedContainer() ? (
-          <Text>Hierarchically partitioned container.</Text>
+          <Text className={classNames.hintText}>Hierarchically partitioned container.</Text>
         ) : (
-          <Text>Non-hierarchically partitioned container.</Text>
+          <Text className={classNames.hintText}>Non-hierarchically partitioned container.</Text>
         ))}
     </Stack>
   );

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx

@@ -65,7 +65,7 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
 
   return (
     <Stack tokens={{ childrenGap: "m" }} styles={{ root: { width: "70%", maxWidth: 700 } }}>
-      <Label>Throughput Buckets</Label>
+      <Label styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>Throughput Buckets</Label>
       <Stack>
         {throughputBuckets?.map((bucket) => (
           <Stack key={bucket.id} horizontal tokens={{ childrenGap: 8 }} verticalAlign="center">
@@ -77,7 +77,15 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
               onChange={(newValue) => handleBucketChange(bucket.id, newValue)}
               showValue={false}
               label={`Bucket ${bucket.id}${bucket.id === 1 ? " (Data Explorer Query Bucket)" : ""}`}
-              styles={{ root: { flex: 2, maxWidth: 400 } }}
+              styles={{
+                root: { flex: 2, maxWidth: 400 },
+                titleLabel: {
+                  color:
+                    bucket.maxThroughputPercentage === 100
+                      ? "var(--colorNeutralForeground4)"
+                      : "var(--colorNeutralForeground1)",
+                },
+              }}
               disabled={bucket.maxThroughputPercentage === 100}
             />
             <TextField
@@ -95,7 +103,10 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
               offText="Inactive"
               checked={bucket.maxThroughputPercentage !== 100}
               onChange={(event, checked) => onToggle(bucket.id, checked)}
-              styles={{ root: { marginBottom: 0 }, text: { fontSize: 12 } }}
+              styles={{
+                root: { marginBottom: 0 },
+                text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
+              }}
             ></Toggle>
           </Stack>
         ))}