removed the comments

* debug

* added comment

---------

Co-authored-by: Asier Isayas <aisayas@microsoft.com>

.github/PULL_REQUEST_TEMPLATE.md

@@ -1 +1 @@
-[Preview this branch](https://cosmos-explorer-preview.azurewebsites.net/pull/EDIT_THIS_NUMBER_IN_THE_PR_DESCRIPTION?feature.someFeatureFlagYouMightNeed=true)
+[Preview this branch](https://dataexplorer-preview.azurewebsites.net/pull/EDIT_THIS_NUMBER_IN_THE_PR_DESCRIPTION?feature.someFeatureFlagYouMightNeed=true)

.github/workflows/ci.yml

@@ -83,7 +83,7 @@ jobs:
       - run: npm ci
       - run: npm run build:contracts
       - name: Restore Build Cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: .cache
           key: ${{ runner.os }}-build-cache
@@ -92,18 +92,20 @@ jobs:
           NODE_OPTIONS: "--max-old-space-size=4096"
       - run: cp -r ./Contracts ./dist/contracts
       - run: cp -r ./configs ./dist/configs
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: dist
           path: dist/
+      - name: "Az CLI login"
+        uses: azure/login@v1
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.PREVIEW_SUBSCRIPTION_ID }}
       - name: Upload build to preview blob storage
-        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --account-key="${PREVIEW_STORAGE_KEY}" --overwrite true
-        env:
-          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
+        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name ${{ secrets.PREVIEW_STORAGE_ACCOUNT_NAME }} --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --auth-mode login --overwrite true
       - name: Upload preview config to blob storage
-        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}" --overwrite true
-        env:
-          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
+        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name ${{ secrets.PREVIEW_STORAGE_ACCOUNT_NAME }} --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --auth-mode login --overwrite true
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
@@ -113,21 +115,21 @@ jobs:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
       AZURE_DEVOPS_PAT: ${{ secrets.AZURE_DEVOPS_PAT }}
     steps:
-      - uses: nuget/setup-nuget@v1
-        with:
-          nuget-api-key: ${{ secrets.NUGET_API_KEY }}
       - name: Download Dist Folder
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: dist
       - run: cp ./configs/prod.json config.json
-      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
-      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
-      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
-      - uses: actions/upload-artifact@v3
-        name: packages
+      - run: dotnet nuget add source "$NUGET_SOURCE" --name "ADO" --username "jawelton@microsoft.com" --password "$AZURE_DEVOPS_PAT" --store-password-in-clear-text
+      - run: dotnet pack DataExplorer.proj /p:PackageVersion="2.0.0-github-${GITHUB_SHA}"
+      - run: dotnet nuget push "bin/Release/*.nupkg" --skip-duplicate --api-key Az --source="$NUGET_SOURCE"
+      - run: dotnet nuget remove source "ADO"
+      - uses: actions/upload-artifact@v4
+        name: Upload package to Artifacts
         with:
-          path: "*.nupkg"
+          name: prod-package
+          path: "bin/Release/*.nupkg"
+
   nugetmpac:
     name: Publish Nuget MPAC
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
@@ -137,22 +139,21 @@ jobs:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
       AZURE_DEVOPS_PAT: ${{ secrets.AZURE_DEVOPS_PAT }}
     steps:
-      - uses: nuget/setup-nuget@v1
-        with:
-          nuget-api-key: ${{ secrets.NUGET_API_KEY }}
       - name: Download Dist Folder
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: dist
       - run: cp ./configs/mpac.json config.json
       - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.MPAC/g' DataExplorer.nuspec
-      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
-      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
-      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
-      - uses: actions/upload-artifact@v3
-        name: packages
+      - run: dotnet nuget add source "$NUGET_SOURCE" --name "ADO" --username "jawelton@microsoft.com" --password "$AZURE_DEVOPS_PAT" --store-password-in-clear-text
+      - run: dotnet pack DataExplorer.proj /p:PackageVersion="2.0.0-github-${GITHUB_SHA}"
+      - run: dotnet nuget push "bin/Release/*.nupkg" --skip-duplicate --api-key Az --source="$NUGET_SOURCE"
+      - run: dotnet nuget remove source "ADO"
+      - uses: actions/upload-artifact@v4
+        name: Upload package to Artifacts
         with:
-          path: "*.nupkg"
+          name: mpac-package
+          path: "bin/Release/*.nupkg"
 
   playwright-tests:
     name: "Run Playwright Tests (Shard ${{ matrix.shardIndex }} of ${{ matrix.shardTotal }})"
@@ -185,9 +186,9 @@ jobs:
         if: ${{ !cancelled() }}
         uses: actions/upload-artifact@v4
         with:
-            name: blob-report-${{ matrix.shardIndex }}
-            path: blob-report
-            retention-days: 1
+          name: blob-report-${{ matrix.shardIndex }}
+          path: blob-report
+          retention-days: 1
 
   merge-playwright-reports:
     name: "Merge Playwright Reports"
@@ -197,26 +198,26 @@ jobs:
 
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 18
-    - name: Install dependencies
-      run: npm ci
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm ci
 
-    - name: Download blob reports from GitHub Actions Artifacts
-      uses: actions/download-artifact@v4
-      with:
-        path: all-blob-reports
-        pattern: blob-report-*
-        merge-multiple: true
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: all-blob-reports
+          pattern: blob-report-*
+          merge-multiple: true
 
-    - name: Merge into HTML Report
-      run: npx playwright merge-reports --reporter html ./all-blob-reports
+      - name: Merge into HTML Report
+        run: npx playwright merge-reports --reporter html ./all-blob-reports
 
-    - name: Upload HTML report
-      uses: actions/upload-artifact@v4
-      with:
-        name: html-report--attempt-${{ github.run_attempt }}
-        path: playwright-report
-        retention-days: 14
+      - name: Upload HTML report
+        uses: actions/upload-artifact@v4
+        with:
+          name: html-report--attempt-${{ github.run_attempt }}
+          path: playwright-report
+          retention-days: 14

DataExplorer.proj

@@ -0,0 +1,9 @@
+<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <NoBuild>true</NoBuild>
+    <IncludeBuildOutput>false</IncludeBuildOutput>
+    <NuspecFile>DataExplorer.nuspec</NuspecFile>
+    <NuspecProperties>version=$(PackageVersion)</NuspecProperties>
+  </PropertyGroup>
+</Project>

jest.config.js

@@ -174,7 +174,11 @@ module.exports = {
   },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  transformIgnorePatterns: ["/node_modules/(?!@fluentui/react-icons)", "/externals/"],
+  transformIgnorePatterns: [
+    "/node_modules/(?!@fluentui/react-icons|(.*)/dist/browser)/",
+    "/node_modules/plotly.js-cartesian-dist-min",
+    "/externals/",
+  ],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,

less/Common/Constants.less

@@ -61,6 +61,8 @@
 
 @GalleryBackgroundColor: #fdfdfd;
 
+@LinkColor: #2d6da4;
+
 //Icons
 @InfoIconColor: #0072c6;
 @WarningIconColor: #db7500;
@@ -246,6 +248,10 @@
   outline: 1px dashed @FocusColor;
 }
 
+.focusedBorder() {
+  border: 1px dashed @FocusColor;
+}
+
 /************************************************************************************************
                                Common Toggle Switch
 *************************************************************************************************/

less/documentDB.less

@@ -1772,9 +1772,9 @@ input::-webkit-calendar-picker-indicator {
 
 .paddingspan4 {
   padding-top: 20px;
-  padding-left: 20px;
   color: white;
-  font-size: 14px;
+  padding-left: 25px;
+  padding-right: 25px;
 }
 
 .closebtnn {
@@ -1830,6 +1830,14 @@ input::-webkit-calendar-picker-indicator::after {
   transform: rotate(90deg);
 }
 
+.customAccordion button:focus {
+  .focus();
+}
+
+.customAccordion {
+  margin-top: 1px;
+}
+
 .datalist-arrow:after:hover {
   content: "\276F";
   position: absolute;
@@ -1906,13 +1914,29 @@ input::-webkit-calendar-picker-indicator::after {
 }
 
 .nav-tabs-margin {
-  height: 32px;
-  background-color: #f2f2f2;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 
   .nav-tabs {
     display: flex;
+    flex-wrap: wrap;
     align-items: flex-end;
     height: 100%;
+    margin-bottom: -0.5px;
+    // border-bottom: 1px solid var(--colorNeutralStroke1);
+
+    li {
+      margin-bottom: 0px;
+      height: 32px;
+
+      &:hover {
+        background-color: var(--colorNeutralBackground1Hover);
+      }
+
+      &:active {
+        background-color: var(--colorNeutralBackground1Pressed);
+      }
+    }
   }
 }
 
@@ -1925,8 +1949,20 @@ 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) !important;
   border-color: transparent;
+  color: var(--colorNeutralForeground1);
+}
+
+.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
+  background-color: var(--colorNeutralBackground1Hover);
+  // border-bottom: 2px solid var(--colorNeutralStroke1);
+}
+
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
+  background-color: var(--colorNeutralBackground1Selected);
+  // border-bottom: 2px solid var(--colorCompoundBrandBackground);
 }
 
 .numbersize {
@@ -2360,7 +2396,9 @@ a:link {
   height: 100%;
   display: flex;
   flex-direction: column;
-  min-width: 0; // This prevents it to grow past the parent's width if its content is too wide
+  min-width: 0;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .tabs {
@@ -2616,9 +2654,10 @@ a:link {
 }
 
 .tabPanesContainer {
-  display: flex;
   flex-grow: 1;
-  overflow: hidden;
+  overflow-y: scroll;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .tabs-container {
@@ -2640,11 +2679,11 @@ 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(--colorNeutralBackground1Selected);
+  border-color: var(--colorNeutralStroke1);
+  // border-bottom-color: var(--colorCompoundBrandBackground);
   border-style: solid;
   border-width: 1px;
   height: @ActiveTabHeight;
@@ -2653,7 +2692,7 @@ a:link {
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
   font-weight: bolder;
-  border-bottom: 2px solid rgba(0, 120, 212, 1);
+  border-bottom: 2px solid var(--colorCompoundBrandBackground);
 }
 
 .nav-tabs > li.active:focus > .tabNavContentContainer {
@@ -2666,7 +2705,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;
@@ -2674,75 +2713,29 @@ 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;
 
-      .statusIconContainer {
-        width: @StatusIconContainerSize;
-        height: @StatusIconContainerSize;
-        margin-left: @SmallSpace;
-        display: inline-flex;
-
-        .errorIconContainer {
-          width: @ErrorIconContainer;
-          height: @ErrorIconContainer;
-          margin-top: 1px;
-
-          .errorIcon {
-            width: @ErrorIconWidth;
-            height: @LoadingErrorIconSize;
-            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;
-          }
-        }
-
-        .errorIconContainer.actionsEnabled {
-          &:hover {
-            .hover();
-          }
-
-          &:focus {
-            .focus();
-          }
-
-          &:active {
-            .active();
-          }
-        }
-
-        .errorIconContainer[tabindex]:active {
-          outline: none;
-        }
-
-        .loadingIcon {
-          width: @LoadingErrorIconSize;
-          height: @LoadingErrorIconSize;
-          margin: 0px 0px @SmallSpace @SmallSpace;
-        }
-      }
-
       .tabNavText {
         margin-left: @SmallSpace;
         margin-right: 2px;
-        color: @BaseDark;
+        color: var(--colorNeutralForeground1);
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
@@ -2753,21 +2746,36 @@ a:link {
     .tabIconSection {
       width: 29px;
       position: relative;
-      padding-top: 2px;
 
       .cancelButton {
         padding: 0px @SmallSpace 0px @SmallSpace;
+        color: var(--colorNeutralForeground1);
+        width: 16px;
+        height: 16px;
+        display: inline-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;
         }
       }
     }
@@ -3121,3 +3129,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

@@ -26,7 +26,6 @@ a:focus {
 
 #divExplorer {
   background-color: #f5f5f5;
-  padding: @FabricBoxMargin;
 }
 
 .resourceTreeAndTabs {
@@ -38,12 +37,40 @@ a:focus {
 }
 
 .tabsManagerContainer {
-  background-color: #ffffff
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .nav-tabs-margin {
   padding-top: 5px;
-  background-color: #ffffff
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+}
+
+.nav-tabs {
+  border-bottom: 1px solid var(--colorNeutralStroke1);
+  color: var(--colorNeutralForeground1);
+}
+
+.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
+  border-bottom: 2px solid var(--colorNeutralStroke1);
+  background-color: var(--colorNeutralBackground1Hover);
+}
+
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
+  border-bottom: 2px solid var(--colorCompoundBrandBackground);
+  background-color: var(--colorNeutralBackground1Selected);
+}
+
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
+  border-bottom: 0px none transparent;
+  color: var(--colorNeutralForeground1);
+}
+
+.tabPanesContainer {
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .commandBarContainer {
@@ -68,25 +95,12 @@ a:focus {
   }
 }
 
-
-.nav-tabs>li>.tabNavContentContainer>.tab_Content:hover {
-  border-bottom: 2px solid #e0e0e0;
-}
-
-.nav-tabs>li.active>.tabNavContentContainer>.tab_Content,
-.nav-tabs>li.active>.tabNavContentContainer>.tab_Content:hover {
-  border-bottom: 2px solid @FabricAccentMedium;
-}
-
-.nav-tabs>li.active>.tabNavContentContainer>.tab_Content>.contentWrapper>.tabNavText {
-  border-bottom: 0px none transparent;
-}
-
 .tabNavContentContainer {
   padding: @SmallSpace 0px @SmallSpace 0px;
+  color: var(--colorNeutralForeground1);
 
   &:hover {
-    background-color: transparent;
+    background-color: var(--colorNeutralBackground1Hover);
     border-color: transparent;
   }
 
@@ -95,34 +109,35 @@ a:focus {
     margin: 0px @SmallSpace 0px @SmallSpace;
     width: calc(@TabsWidth - (@SmallSpace * 2));
     padding-bottom: @SmallSpace;
+    color: var(--colorNeutralForeground1);
 
     .contentWrapper {
-        .statusIconContainer {
-          margin-left: 0px;
-        }
+      .statusIconContainer {
+        margin-left: 0px;
       }
+    }
 
     .tabIconSection {
       .cancelButton {
         padding: 0px 0px 0px @SmallSpace;
+        color: var(--colorNeutralForeground1);
 
         &:hover {
-          background-color: transparent;
+          background-color: var(--colorNeutralBackground1Hover);
         }
 
         &:focus {
-          background-color: transparent;
+          background-color: var(--colorNeutralBackground1Pressed);
         }
 
         &:active {
-          background-color: transparent;
+          background-color: var(--colorNeutralBackground1Pressed);
         }
       }
     }
   }
 }
 
-
 .resourceTree {
   padding: 12px;
 }
@@ -159,24 +174,21 @@ a:focus {
     }
 
     .selected {
-      &>.treeNodeHeader {
+      & > .treeNodeHeader {
         background-color: @FabricAccentExtra;
       }
     }
   }
 }
 
-
 .dataExplorerErrorConsoleContainer {
-  border-radius:  0px 0px @FabricBoxBorderRadius @FabricBoxBorderRadius;
+  border-radius: 0px 0px @FabricBoxBorderRadius @FabricBoxBorderRadius;
   box-shadow: @FabricBoxBorderShadow;
   margin-top: 0px;
   width: auto;
   align-self: auto;
 }
 
-
-
 .filterbtnstyle {
   background: #fff;
   color: #000;
@@ -202,12 +214,10 @@ a:focus {
   border: solid 1px #d1d1d1;
 }
 
-
 .gridRowSelected .tabdocumentsGridElement:hover {
   background-color: @FabricAccentLight !important;
 }
 
-
 .refreshcol {
   filter: brightness(0) saturate(100%);
 }
@@ -218,4 +228,4 @@ a:focus {
 
 .fileImportImg img {
   filter: brightness(0) saturate(100%);
-}
+}

less/forms.less

@@ -1,211 +1,227 @@
 @import "./Common/Constants";
 
 .dirty {
-    border: 1px solid #9b4f96;
+  border: 1px solid #9b4f96;
 }
 
 .dirty:focus {
-    outline: 1px solid #9b4f96;
+  outline: 1px solid #9b4f96;
 }
 
 .tabForm {
-    padding: 12px 20px 20px 20px;
-    margin-left: 3px;
+  padding: 12px 20px 20px 20px;
+  margin-left: 3px;
 }
 
 .storedTabForm {
-    padding-top: @LargeSpace;
+  padding-top: @LargeSpace;
 }
 
 .scaleSettingScrollable {
-    overflow-y: auto;
-    overflow-x: hidden;
-    height:100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
 }
 
 .disableFocusDefaults[tabindex] {
-    &:focus {
-        outline: none;
-    }
+  &:focus {
+    outline: none;
+  }
 
-    &:active {
-        outline: none;
-    }
+  &:active {
+    outline: none;
+  }
 }
 
 .indexingPolicyEditor {
-    width: 100%;
-    height: calc(~"100vh - 400px");
+  width: 100%;
+  height: calc(~"100vh - 400px");
 }
 
 .scaleDivison {
-    padding: @MediumSpace 0px @DefaultSpace 0px;
+  padding: @MediumSpace 0px @DefaultSpace 0px;
 }
 
 .scaleSettingTitle {
-    font-size: 14px;
-    cursor: pointer;
+  font-size: 14px;
+  cursor: pointer;
 }
 
 .autoScaleThroughputTitle {
-    margin-bottom: @SmallSpace;
+  margin-bottom: @SmallSpace;
 }
 
 .autoScaleDescription {
-    margin-top: 6px;
-    margin-bottom: @SmallSpace;
+  margin-top: 6px;
+  margin-bottom: @SmallSpace;
 }
 
 .ssExpandCollapseIcon {
-    width: 10px;
-    height: 10px;
+  width: 10px;
+  height: 10px;
 }
 
 .ssCollapseIcon {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 
 .ssTextAllignment {
-    padding-left: 19px;
+  padding-left: 19px;
 }
 
 .throughputStorageBlock {
-    border-top: 1px solid #bbb;
-    border-bottom: 1px solid #bbb;
-    background-color: #ccc;
-    padding-left: 10px;
-    width: 315px;
+  border-top: 1px solid #bbb;
+  border-bottom: 1px solid #bbb;
+  background-color: #ccc;
+  padding-left: 10px;
+  width: 315px;
 }
 
 .storageCapacityTitle {
-    padding: @LargeSpace 0px;
-
+  padding: @LargeSpace 0px;
 }
 .throughputStorageValue {
-    font-size: 12px;
+  font-size: 12px;
 }
 
-.estimatedCost, .largePartitionKeyEnabled {
-    padding: @SmallSpace 0px @LargeSpace;
+.estimatedCost,
+.largePartitionKeyEnabled {
+  padding: @SmallSpace 0px @LargeSpace;
 }
 
 .storagePadding {
-    padding-top: 6px;
-    padding-bottom: 14px;
+  padding-top: 6px;
+  padding-bottom: 14px;
 }
 
 .dirtyTextbox {
-    width: 176px;
-    margin-top: 7px;
-    padding-left: 5px;
+  width: 176px;
+  margin-top: 7px;
+  padding-left: 5px;
 }
 
 .formTitleFirst {
-    padding: @DefaultSpace (2 * @MediumSpace);
+  padding: @DefaultSpace (2 * @MediumSpace);
 }
 
 .formTitleTextbox {
-    padding: 0px 0px @DefaultSpace (2 * @MediumSpace);
+  padding: 0px 0px @DefaultSpace (2 * @MediumSpace);
 }
 
 .formTree {
-    border: 1px solid #969696;
-    color: #393939;
-    padding: 0px 12px 1px 8px;
+  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 {
-    padding-left: 8px;
-    color: @BaseDark;
-    border: 1px solid #969696;
-    min-width: @ScaleFormWidth;
+  padding-left: 8px;
+  color: @BaseDark;
+  border: 1px solid #969696;
+  min-width: @ScaleFormWidth;
 
-    &:hover {
-        background-color: #e6f8fe;
-    }    
+  &:hover {
+    background-color: #e6f8fe;
+  }
 }
 
 .formTitle {
-    margin-top: 16px;
-    margin-bottom: 4px; 
+  margin-top: 16px;
+  margin-bottom: 4px;
 }
 
-
 .spUdfTriggerHeader {
-    padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace); 
+  padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace);
 }
 
 .storedUdfTriggerEditor {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .unselectedRadio {
-    background-color: white;
-    border-color: #EEE!important;
-    color: black!important;
+  background-color: white;
+  border-color: #eee !important;
+  color: black !important;
 }
 
 .disabledRadio {
-    background-color: #A19F9D;
-    border-color: #EEE!important;
-    color: white!important;
+  background-color: #a19f9d;
+  border-color: #eee !important;
+  color: white !important;
 }
 
 .selectedRadio {
-    background-color: @AccentMediumHigh;
-    border-color: #EEE!important;
-    color: white!important;
-    cursor: pointer;
+  background-color: @AccentMediumHigh;
+  border-color: #eee !important;
+  color: white !important;
+  cursor: pointer;
 }
 
 .selectedRadio:hover {
-    background-color: @AccentMediumHigh;
-    border-color: #EEE!important;
-    color: white!important;
-    cursor: pointer;
+  background-color: @AccentMediumHigh;
+  border-color: #eee !important;
+  color: white !important;
+  cursor: pointer;
 }
 
 .selectedRadio:active {
-    background-color: #0072c6;
-    border-color: #EEE!important;
-    color: white!important;
-    cursor: pointer;
-    border: 1px solid #0072c6;
+  background-color: #0072c6;
+  border-color: #eee !important;
+  color: white !important;
+  cursor: pointer;
+  border: 1px solid #0072c6;
 }
 
 .selectedRadio.dirty {
-    background-color: #9b4f96;
+  background-color: #9b4f96;
 }
 
 .tabs {
-    margin: 0;
+  margin: 0;
 }
 
 .formReadOnly {
-    background-color: #ddd;
-    border: 1px solid #969696;
-    min-width: 184px;
-    padding-left: 8px;
+  background-color: #ddd;
+  border: 1px solid #969696;
+  min-width: 184px;
+  padding-left: 8px;
 }
 
 .migration:disabled {
-    background-color: #ccc;
+  background-color: #ccc;
 }
 
 .trigger-field {
-    width: 40%;
-    margin-top: 10px
+  width: 40%;
+  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/tree.less

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

package.json

@@ -5,10 +5,9 @@
   "main": "index.js",
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "4.0.1-beta.3",
+    "@azure/cosmos": "4.2.0-beta.1",
     "@azure/cosmos-language-service": "0.0.5",
-    "@azure/identity": "1.5.2",
-    "@azure/ms-rest-nodeauth": "3.1.1",
+    "@azure/identity": "4.5.0",
     "@azure/msal-browser": "2.14.2",
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
@@ -82,7 +81,7 @@
     "mkdirp": "1.0.4",
     "monaco-editor": "0.44.0",
     "ms": "2.1.3",
-    "p-retry": "4.6.2",
+    "p-retry": "6.2.1",
     "patch-package": "8.0.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
     "post-robot": "10.0.42",
@@ -117,7 +116,7 @@
     "@babel/preset-env": "7.24.7",
     "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
-    "@playwright/test": "1.44.0",
+    "@playwright/test": "1.49.1",
     "@testing-library/react": "11.2.3",
     "@types/applicationinsights-js": "1.0.7",
     "@types/codemirror": "0.0.56",
@@ -170,10 +169,10 @@
     "jest": "29.7.0",
     "jest-canvas-mock": "2.5.2",
     "jest-circus": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "jest-html-loader": "1.0.0",
     "jest-react-hooks-shallow": "1.5.1",
     "jest-trx-results-processor": "3.0.2",
-    "jest-environment-jsdom": "29.7.0",
     "less": "3.8.1",
     "less-loader": "11.1.3",
     "less-vars-loader": "1.1.0",
@@ -247,4 +246,4 @@
     "printWidth": 120,
     "endOfLine": "auto"
   }
-}
+}

preview/.azure/config

@@ -1,7 +1,7 @@
 [defaults]
-group = stfaul
-sku = P1v2
-appserviceplan = stfaul_asp_Linux_centralus_0
-location = centralus
-web = cosmos-explorer-preview
+group = dataexplorer-preview
+sku = P1V2
+appserviceplan = dataexplorer-preview
+location = westus2
+web = dataexplorer-preview
 

preview/README.md

@@ -4,8 +4,8 @@ Cosmos Explorer Preview makes it possible to try a working version of any commit
 
 Initial support is for Hosted (Connection string only) or the Azure Portal. Examples:
 
-Connection string URLs: https://cosmos-explorer-preview.azurewebsites.net/commit/COMMIT_SHA/hostedExplorer.html
-Portal URLs: https://ms.portal.azure.com/?dataExplorerSource=https://cosmos-explorer-preview.azurewebsites.net/commit/COMMIT_SHA/explorer.html#home
+Connection string URLs: https://dataexplorer-preview.azurewebsites.net/commit/COMMIT_SHA/hostedExplorer.html
+Portal URLs: https://ms.portal.azure.com/?dataExplorerSource=https://dataexplorer-preview.azurewebsites.net/commit/COMMIT_SHA/explorer.html#home
 
 In both cases replace `COMMIT_SHA` with the commit you want to view. It must have already completed its build on GitHub Actions.
 

preview/config.json

@@ -1,4 +1,4 @@
 {
   "PROXY_PATH": "/proxy",
-  "msalRedirectURI": "https://cosmos-explorer-preview.azurewebsites.net/"
+  "msalRedirectURI": "https://dataexplorer-preview.azurewebsites.net/"
 }

preview/index.js

@@ -3,8 +3,15 @@ const { createProxyMiddleware } = require("http-proxy-middleware");
 const port = process.env.PORT || 3000;
 const fetch = require("node-fetch");
 
-const api = createProxyMiddleware("/api", {
-  target: "https://cdb-ms-mpac-pbe.cosmos.azure.com",
+const backendEndpoint = "https://cdb-ms-mpac-pbe.cosmos.azure.com";
+const previewSiteEndpoint = "https://dataexplorer-preview.azurewebsites.net";
+const previewStorageWebsiteEndpoint = "https://dataexplorerpreview.z5.web.core.windows.net/";
+const githubApiUrl = "https://api.github.com/repos/Azure/cosmos-explorer";
+const githubPullRequestUrl = "https://github.com/Azure/cosmos-explorer/pull";
+const azurePortalMpacEndpoint = "https://ms.portal.azure.com/";
+
+const api = createProxyMiddleware({
+  target: backendEndpoint,
   changeOrigin: true,
   logLevel: "debug",
   bypass: (req, res) => {
@@ -15,8 +22,8 @@ const api = createProxyMiddleware("/api", {
   },
 });
 
-const proxy = createProxyMiddleware("/proxy", {
-  target: "https://cdb-ms-mpac-pbe.cosmos.azure.com",
+const proxy = createProxyMiddleware({
+  target: backendEndpoint,
   changeOrigin: true,
   secure: false,
   logLevel: "debug",
@@ -27,35 +34,38 @@ const proxy = createProxyMiddleware("/proxy", {
   },
 });
 
-const commit = createProxyMiddleware("/commit", {
-  target: "https://cosmosexplorerpreview.blob.core.windows.net",
+const commit = createProxyMiddleware({
+  target: previewStorageWebsiteEndpoint,
   changeOrigin: true,
   secure: false,
   logLevel: "debug",
-  pathRewrite: { "^/commit": "$web/" },
+  pathRewrite: { "^/commit": "/" },
 });
 
 const app = express();
 
-app.use(api);
-app.use(proxy);
-app.use(commit);
+app.use("/api", api);
+app.use("/proxy", proxy);
+app.use("/commit", commit);
 app.get("/pull/:pr(\\d+)", (req, res) => {
   const pr = req.params.pr;
+  if (!/^\d+$/.test(pr)) {
+    return res.status(400).send("Invalid pull request number");
+  }
   const [, query] = req.originalUrl.split("?");
   const search = new URLSearchParams(query);
 
-  fetch("https://api.github.com/repos/Azure/cosmos-explorer/pulls/" + pr)
+  fetch(`${githubApiUrl}/pulls/${pr}`)
     .then((response) => response.json())
     .then(({ head: { ref, sha } }) => {
-      const prUrl = new URL("https://github.com/Azure/cosmos-explorer/pull/" + pr);
+      const prUrl = new URL(`${githubPullRequestUrl}/${pr}`);
       prUrl.hash = ref;
       search.set("feature.pr", prUrl.href);
 
-      const explorer = new URL("https://cosmos-explorer-preview.azurewebsites.net/commit/" + sha + "/explorer.html");
+      const explorer = new URL(`${previewSiteEndpoint}/commit/${sha}/explorer.html`);
       explorer.search = search.toString();
 
-      const portal = new URL("https://ms.portal.azure.com/");
+      const portal = new URL(azurePortalMpacEndpoint);
       portal.searchParams.set("dataExplorerSource", explorer.href);
 
       return res.redirect(portal.href);
@@ -63,12 +73,10 @@ app.get("/pull/:pr(\\d+)", (req, res) => {
     .catch(() => res.sendStatus(500));
 });
 app.get("/", (req, res) => {
-  fetch("https://api.github.com/repos/Azure/cosmos-explorer/branches/master")
+  fetch(`${githubApiUrl}/branches/master`)
     .then((response) => response.json())
     .then(({ commit: { sha } }) => {
-      const explorer = new URL(
-        "https://cosmos-explorer-preview.azurewebsites.net/commit/" + sha + "/hostedExplorer.html"
-      );
+      const explorer = new URL(`${previewSiteEndpoint}/commit/${sha}/hostedExplorer.html`);
       return res.redirect(explorer.href);
     })
     .catch(() => res.sendStatus(500));

preview/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "deploy": "az webapp up --name \"cosmos-explorer-preview\" --subscription \"cosmosdb-portalteam-generaltest-msft\" --resource-group \"stfaul\"",
+    "deploy": "az webapp up --name \"dataexplorer-preview\" --subscription \"cosmosdb-portalteam-runners\" --resource-group \"dataexplorer-preview\" --runtime \"NODE:18-lts\" --sku P1V2",
     "start": "node index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -12,7 +12,8 @@
   "author": "Microsoft Corporation",
   "dependencies": {
     "express": "^4.17.1",
-    "http-proxy-middleware": "^1.1.0",
+    "http-proxy-middleware": "^3.0.3",
+    "node": "^18.20.6",
     "node-fetch": "^2.6.1"
   }
-}
+}

src/Common/Constants.ts

@@ -89,6 +89,7 @@ export class CapabilityNames {
   public static readonly EnableMongo: string = "EnableMongo";
   public static readonly EnableServerless: string = "EnableServerless";
   public static readonly EnableNoSQLVectorSearch: string = "EnableNoSQLVectorSearch";
+  public static readonly EnableNoSQLFullTextSearch: string = "EnableNoSQLFullTextSearch";
 }
 
 export enum CapacityMode {
@@ -96,6 +97,12 @@ export enum CapacityMode {
   Serverless = "Serverless",
 }
 
+export enum WorkloadType {
+  Learning = "Learning",
+  DevelopmentTesting = "Development/Testing",
+  Production = "Production",
+  None = "None",
+}
 // flight names returned from the portal are always lowercase
 export class Flights {
   public static readonly SettingsV2 = "settingsv2";
@@ -118,6 +125,7 @@ export class AfecFeatures {
 
 export class TagNames {
   public static defaultExperience: string = "defaultExperience";
+  public static WorkloadType: string = "hidden-workload-type";
 }
 
 export class MongoDBAccounts {
@@ -148,7 +156,7 @@ export class PortalBackendEndpoints {
 }
 
 export class MongoProxyEndpoints {
-  public static readonly Local: string = "https://localhost:7238";
+  public static readonly Development: string = "https://localhost:7238";
   public static readonly Mpac: string = "https://cdb-ms-mpac-mp.cosmos.azure.com";
   public static readonly Prod: string = "https://cdb-ms-prod-mp.cosmos.azure.com";
   public static readonly Fairfax: string = "https://cdb-ff-prod-mp.cosmos.azure.us";
@@ -517,6 +525,15 @@ export class PriorityLevel {
   public static readonly Default = "low";
 }
 
+export class ariaLabelForLearnMoreLink {
+  public static readonly AnalyticalStore = "Learn more about analytical store.";
+  public static readonly AzureSynapseLink = "Learn more about Azure Synapse Link.";
+}
+
+export class FeedbackLabels {
+  public static readonly provideFeedback: string = "Provide feedback";
+}
+
 export const QueryCopilotSampleDatabaseId = "CopilotSampleDB";
 export const QueryCopilotSampleContainerId = "SampleContainer";
 

src/Common/CosmosClient.ts

@@ -1,14 +1,15 @@
 import * as Cosmos from "@azure/cosmos";
 import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizationTokenUsingResourceTokens";
+import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
 import { AuthorizationToken } from "Contracts/FabricMessageTypes";
-import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
+import { checkDatabaseResourceTokensValidity, isFabricMirroredKey } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
 import { AuthType } from "../AuthType";
-import { BackendApi, PriorityLevel } from "../Common/Constants";
+import { PriorityLevel } from "../Common/Constants";
 import * as Logger from "../Common/Logger";
 import { Platform, configContext } from "../ConfigContext";
-import { userContext } from "../UserContext";
+import { FabricArtifactInfo, updateUserContext, userContext } from "../UserContext";
+import { isDataplaneRbacSupported } from "../Utils/APITypeUtils";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
@@ -19,7 +20,7 @@ const _global = typeof self === "undefined" ? window : self;
 export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
 
-  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && userContext.apiType === "SQL";
+  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && isDataplaneRbacSupported(userContext.apiType);
   if (userContext.features.enableAadDataPlane || dataPlaneRBACOptionEnabled) {
     Logger.logInfo(
       `AAD Data Plane Feature flag set to ${userContext.features.enableAadDataPlane} for account with disable local auth ${userContext.databaseAccount.properties.disableLocalAuth} `,
@@ -42,7 +43,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
     return decodeURIComponent(headers.authorization);
   }
 
-  if (configContext.platform === Platform.Fabric) {
+  if (isFabricMirroredKey()) {
     switch (requestInfo.resourceType) {
       case Cosmos.ResourceType.conflicts:
       case Cosmos.ResourceType.container:
@@ -54,8 +55,13 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
         // User resource tokens
         // TODO userContext.fabricContext.databaseConnectionInfo can be undefined
         headers[HttpHeaders.msDate] = new Date().toUTCString();
-        const resourceTokens = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
-        checkDatabaseResourceTokensValidity(userContext.fabricContext.databaseConnectionInfo.resourceTokensTimestamp);
+        const resourceTokens = (
+          userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]
+        ).resourceTokenInfo.resourceTokens;
+        checkDatabaseResourceTokensValidity(
+          (userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY])
+            .resourceTokenInfo.resourceTokensTimestamp,
+        );
         return getAuthorizationTokenUsingResourceTokens(resourceTokens, requestInfo.path, requestInfo.resourceId);
 
       case Cosmos.ResourceType.none:
@@ -66,7 +72,9 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
         // For now, these operations aren't used, so fetching the authorization token is commented out.
         // This provider must return a real token to pass validation by the client, so we return the cached resource token
         // (which is a valid token, but won't work for these operations).
-        const resourceTokens2 = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
+        const resourceTokens2 = (
+          userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]
+        ).resourceTokenInfo.resourceTokens;
         return getAuthorizationTokenUsingResourceTokens(resourceTokens2, requestInfo.path, requestInfo.resourceId);
 
       /* ************** TODO: Uncomment this code if we need to support these operations **************
@@ -125,10 +133,6 @@ export async function getTokenFromAuthService(
   resourceType: string,
   resourceId?: string,
 ): Promise<AuthorizationToken> {
-  if (!useNewPortalBackendEndpoint(BackendApi.RuntimeProxy)) {
-    return getTokenFromAuthService_ToBeDeprecated(verb, resourceType, resourceId);
-  }
-
   try {
     const host: string = configContext.PORTAL_BACKEND_ENDPOINT;
     const response: Response = await _global.fetch(host + "/api/connectionstring/runtimeproxy/authorizationtokens", {
@@ -151,34 +155,6 @@ export async function getTokenFromAuthService(
   }
 }
 
-export async function getTokenFromAuthService_ToBeDeprecated(
-  verb: string,
-  resourceType: string,
-  resourceId?: string,
-): Promise<AuthorizationToken> {
-  try {
-    const host = configContext.BACKEND_ENDPOINT;
-    const response = await _global.fetch(host + "/api/guest/runtimeproxy/authorizationTokens", {
-      method: "POST",
-      headers: {
-        "content-type": "application/json",
-        "x-ms-encrypted-auth-token": userContext.accessToken,
-      },
-      body: JSON.stringify({
-        verb,
-        resourceType,
-        resourceId,
-      }),
-    });
-    //TODO I am not sure why we have to parse the JSON again here. fetch should do it for us when we call .json()
-    const result = JSON.parse(await response.json());
-    return result;
-  } catch (error) {
-    logConsoleError(`Failed to get authorization headers for ${resourceType}: ${getErrorMessage(error)}`);
-    return Promise.reject(error);
-  }
-}
-
 // The Capability is a bitmap, which cosmosdb backend decodes as per the below enum
 enum SDKSupportedCapabilities {
   None = 0,
@@ -189,13 +165,24 @@ let _client: Cosmos.CosmosClient;
 
 export function client(): Cosmos.CosmosClient {
   if (_client) {
-    if (!userContext.hasDataPlaneRbacSettingChanged) {
+    if (!userContext.refreshCosmosClient) {
       return _client;
     }
+    _client.dispose();
+    _client = null;
   }
+
+  if (userContext.refreshCosmosClient) {
+    updateUserContext({
+      refreshCosmosClient: false,
+    });
+  }
+
   let _defaultHeaders: Cosmos.CosmosHeaders = {};
+
   _defaultHeaders["x-ms-cosmos-sdk-supportedcapabilities"] =
     SDKSupportedCapabilities.None | SDKSupportedCapabilities.PartitionMerge;
+  _defaultHeaders["x-ms-cosmos-throughput-bucket"] = 1;
 
   if (
     userContext.authType === AuthType.ConnectionString ||

src/Common/DatabaseAccountUtility.test.ts

@@ -0,0 +1,34 @@
+import { WorkloadType } from "Common/Constants";
+import { getWorkloadType } from "Common/DatabaseAccountUtility";
+import { DatabaseAccount, Tags } from "Contracts/DataModels";
+import { updateUserContext } from "UserContext";
+
+describe("Database Account Utility", () => {
+  describe("Workload Type", () => {
+    beforeEach(() => {
+      updateUserContext({
+        databaseAccount: {
+          tags: {} as Tags,
+        } as DatabaseAccount,
+      });
+    });
+
+    it("Workload Type should return Learning", () => {
+      updateUserContext({
+        databaseAccount: {
+          tags: {
+            "hidden-workload-type": WorkloadType.Learning,
+          } as Tags,
+        } as DatabaseAccount,
+      });
+
+      const workloadType: WorkloadType = getWorkloadType();
+      expect(workloadType).toBe(WorkloadType.Learning);
+    });
+
+    it("Workload Type should return None", () => {
+      const workloadType: WorkloadType = getWorkloadType();
+      expect(workloadType).toBe(WorkloadType.None);
+    });
+  });
+});

src/Common/DatabaseAccountUtility.ts

@@ -1,3 +1,5 @@
+import { TagNames, WorkloadType } from "Common/Constants";
+import { Tags } from "Contracts/DataModels";
 import { userContext } from "../UserContext";
 
 function isVirtualNetworkFilterEnabled() {
@@ -15,3 +17,12 @@ function isPrivateEndpointConnectionsEnabled() {
 export function isPublicInternetAccessAllowed(): boolean {
   return !isVirtualNetworkFilterEnabled() && !isIpRulesEnabled() && !isPrivateEndpointConnectionsEnabled();
 }
+
+export function getWorkloadType(): WorkloadType {
+  const tags: Tags = userContext?.databaseAccount?.tags;
+  const workloadType: WorkloadType = tags && (tags[TagNames.WorkloadType] as WorkloadType);
+  if (!workloadType) {
+    return WorkloadType.None;
+  }
+  return workloadType;
+}

src/Common/MongoProxyClient.test.ts

@@ -4,16 +4,8 @@ import { configContext, resetConfigContext, updateConfigContext } from "../Confi
 import { DatabaseAccount } from "../Contracts/DataModels";
 import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
-import { extractFeatures } from "../Platform/Hosted/extractFeatures";
 import { updateUserContext } from "../UserContext";
-import {
-  deleteDocument,
-  getEndpoint,
-  getFeatureEndpointOrDefault,
-  queryDocuments,
-  readDocument,
-  updateDocument,
-} from "./MongoProxyClient";
+import { deleteDocuments, getEndpoint, queryDocuments, readDocument, updateDocument } from "./MongoProxyClient";
 
 const databaseId = "testDB";
 
@@ -196,20 +188,8 @@ describe("MongoProxyClient", () => {
         expect.any(Object),
       );
     });
-
-    it("builds the correct proxy URL in development", () => {
-      updateConfigContext({
-        MONGO_BACKEND_ENDPOINT: "https://localhost:1234",
-        globallyEnabledMongoAPIs: [],
-      });
-      updateDocument(databaseId, collection, documentId, "{}");
-      expect(window.fetch).toHaveBeenCalledWith(
-        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
-        expect.any(Object),
-      );
-    });
   });
-  describe("deleteDocument", () => {
+  describe("deleteDocuments", () => {
     beforeEach(() => {
       resetConfigContext();
       updateUserContext({
@@ -226,9 +206,9 @@ describe("MongoProxyClient", () => {
     });
 
     it("builds the correct URL", () => {
-      deleteDocument(databaseId, collection, documentId);
+      deleteDocuments(databaseId, collection, [documentId]);
       expect(window.fetch).toHaveBeenCalledWith(
-        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer/bulkdelete`,
         expect.any(Object),
       );
     });
@@ -238,9 +218,9 @@ describe("MongoProxyClient", () => {
         MONGO_PROXY_ENDPOINT: "https://localhost:1234",
         globallyEnabledMongoAPIs: [],
       });
-      deleteDocument(databaseId, collection, documentId);
+      deleteDocuments(databaseId, collection, [documentId]);
       expect(window.fetch).toHaveBeenCalledWith(
-        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer/bulkdelete`,
         expect.any(Object),
       );
     });
@@ -275,33 +255,4 @@ describe("MongoProxyClient", () => {
       expect(endpoint).toEqual(`${configContext.MONGO_PROXY_ENDPOINT}/api/connectionstring/mongo/explorer`);
     });
   });
-
-  describe("getFeatureEndpointOrDefault", () => {
-    beforeEach(() => {
-      resetConfigContext();
-      updateConfigContext({
-        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
-        globallyEnabledMongoAPIs: [],
-      });
-      const params = new URLSearchParams({
-        "feature.mongoProxyEndpoint": MongoProxyEndpoints.Prod,
-        "feature.mongoProxyAPIs": "readDocument|createDocument",
-      });
-      const features = extractFeatures(params);
-      updateUserContext({
-        authType: AuthType.AAD,
-        features: features,
-      });
-    });
-
-    it("returns a local endpoint", () => {
-      const endpoint = getFeatureEndpointOrDefault("readDocument");
-      expect(endpoint).toEqual(`${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`);
-    });
-
-    it("returns a production endpoint", () => {
-      const endpoint = getFeatureEndpointOrDefault("DeleteDocument");
-      expect(endpoint).toEqual(`${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`);
-    });
-  });
 });

src/Common/MongoProxyClient.ts

@@ -1,20 +1,13 @@
 import { Constants as CosmosSDKConstants } from "@azure/cosmos";
-import {
-  allowedMongoProxyEndpoints_ToBeDeprecated,
-  defaultAllowedMongoProxyEndpoints,
-  validateEndpoint,
-} from "Utils/EndpointUtils";
-import queryString from "querystring";
 import { AuthType } from "../AuthType";
 import { configContext } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
-import { hasFlag } from "../Platform/Hosted/extractFeatures";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
-import { ApiType, ContentType, HttpHeaders, HttpStatusCodes, MongoProxyApi, MongoProxyEndpoints } from "./Constants";
+import { ApiType, ContentType, HttpHeaders, HttpStatusCodes } from "./Constants";
 import { MinimalQueryIterator } from "./IteratorUtilities";
 import { sendMessage } from "./MessageHandler";
 
@@ -67,10 +60,6 @@ export function queryDocuments(
   query: string,
   continuationToken?: string,
 ): Promise<QueryResponse> {
-  if (!useMongoProxyEndpoint(MongoProxyApi.ResourceList) || !useMongoProxyEndpoint(MongoProxyApi.QueryDocuments)) {
-    return queryDocuments_ToBeDeprecated(databaseId, collection, isResourceList, query, continuationToken);
-  }
-
   const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const params = {
@@ -89,7 +78,7 @@ export function queryDocuments(
     query,
   };
 
-  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.ResourceList) || "";
+  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT) || "";
 
   const headers = {
     ...defaultHeaders,
@@ -127,76 +116,11 @@ export function queryDocuments(
     });
 }
 
-function queryDocuments_ToBeDeprecated(
-  databaseId: string,
-  collection: Collection,
-  isResourceList: boolean,
-  query: string,
-  continuationToken?: string,
-): Promise<QueryResponse> {
-  const { databaseAccount } = userContext;
-  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
-  const params = {
-    db: databaseId,
-    coll: collection.id(),
-    resourceUrl: `${resourceEndpoint}dbs/${databaseId}/colls/${collection.id()}/docs/`,
-    rid: collection.rid,
-    rtype: "docs",
-    sid: userContext.subscriptionId,
-    rg: userContext.resourceGroup,
-    dba: databaseAccount.name,
-    pk:
-      collection && collection.partitionKey && !collection.partitionKey.systemKey
-        ? collection.partitionKeyProperties?.[0]
-        : "",
-  };
-
-  const endpoint = getFeatureEndpointOrDefault("resourcelist") || "";
-
-  const headers = {
-    ...defaultHeaders,
-    ...authHeaders(),
-    [CosmosSDKConstants.HttpHeaders.IsQuery]: "true",
-    [CosmosSDKConstants.HttpHeaders.PopulateQueryMetrics]: "true",
-    [CosmosSDKConstants.HttpHeaders.EnableScanInQuery]: "true",
-    [CosmosSDKConstants.HttpHeaders.EnableCrossPartitionQuery]: "true",
-    [CosmosSDKConstants.HttpHeaders.ParallelizeCrossPartitionQuery]: "true",
-    [HttpHeaders.contentType]: "application/query+json",
-  };
-
-  if (continuationToken) {
-    headers[CosmosSDKConstants.HttpHeaders.Continuation] = continuationToken;
-  }
-
-  const path = isResourceList ? "/resourcelist" : "";
-
-  return window
-    .fetch(`${endpoint}${path}?${queryString.stringify(params)}`, {
-      method: "POST",
-      body: JSON.stringify({ query }),
-      headers,
-    })
-    .then(async (response) => {
-      if (response.ok) {
-        return {
-          continuationToken: response.headers.get(CosmosSDKConstants.HttpHeaders.Continuation),
-          documents: (await response.json()).Documents as DataModels.DocumentId[],
-          headers: response.headers,
-        };
-      }
-      await errorHandling(response, "querying documents", params);
-      return undefined;
-    });
-}
-
 export function readDocument(
   databaseId: string,
   collection: Collection,
   documentId: DocumentId,
 ): Promise<DataModels.DocumentId> {
-  if (!useMongoProxyEndpoint(MongoProxyApi.ReadDocument)) {
-    return readDocument_ToBeDeprecated(databaseId, collection, documentId);
-  }
   const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const idComponents = documentId.self.split("/");
@@ -217,7 +141,7 @@ export function readDocument(
         : "",
   };
 
-  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.ReadDocument);
+  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
 
   return window
     .fetch(endpoint, {
@@ -237,61 +161,12 @@ export function readDocument(
     });
 }
 
-export function readDocument_ToBeDeprecated(
-  databaseId: string,
-  collection: Collection,
-  documentId: DocumentId,
-): Promise<DataModels.DocumentId> {
-  const { databaseAccount } = userContext;
-  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
-  const idComponents = documentId.self.split("/");
-  const path = idComponents.slice(0, 4).join("/");
-  const rid = encodeURIComponent(idComponents[5]);
-  const params = {
-    db: databaseId,
-    coll: collection.id(),
-    resourceUrl: `${resourceEndpoint}${path}/${rid}`,
-    rid,
-    rtype: "docs",
-    sid: userContext.subscriptionId,
-    rg: userContext.resourceGroup,
-    dba: databaseAccount.name,
-    pk:
-      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
-        ? documentId.partitionKeyProperties?.[0]
-        : "",
-  };
-
-  const endpoint = getFeatureEndpointOrDefault("readDocument");
-
-  return window
-    .fetch(`${endpoint}?${queryString.stringify(params)}`, {
-      method: "GET",
-      headers: {
-        ...defaultHeaders,
-        ...authHeaders(),
-        [CosmosSDKConstants.HttpHeaders.PartitionKey]: encodeURIComponent(
-          JSON.stringify(documentId.partitionKeyHeader()),
-        ),
-      },
-    })
-    .then(async (response) => {
-      if (response.ok) {
-        return response.json();
-      }
-      return await errorHandling(response, "reading document", params);
-    });
-}
-
 export function createDocument(
   databaseId: string,
   collection: Collection,
   partitionKeyProperty: string,
   documentContent: unknown,
 ): Promise<DataModels.DocumentId> {
-  if (!useMongoProxyEndpoint(MongoProxyApi.CreateDocument)) {
-    return createDocument_ToBeDeprecated(databaseId, collection, partitionKeyProperty, documentContent);
-  }
   const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const params = {
@@ -308,7 +183,7 @@ export function createDocument(
     documentContent: JSON.stringify(documentContent),
   };
 
-  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.CreateDocument);
+  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
 
   return window
     .fetch(`${endpoint}/createDocument`, {
@@ -328,54 +203,12 @@ export function createDocument(
     });
 }
 
-export function createDocument_ToBeDeprecated(
-  databaseId: string,
-  collection: Collection,
-  partitionKeyProperty: string,
-  documentContent: unknown,
-): Promise<DataModels.DocumentId> {
-  const { databaseAccount } = userContext;
-  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
-  const params = {
-    db: databaseId,
-    coll: collection.id(),
-    resourceUrl: `${resourceEndpoint}dbs/${databaseId}/colls/${collection.id()}/docs/`,
-    rid: collection.rid,
-    rtype: "docs",
-    sid: userContext.subscriptionId,
-    rg: userContext.resourceGroup,
-    dba: databaseAccount.name,
-    pk: collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : "",
-  };
-
-  const endpoint = getFeatureEndpointOrDefault("createDocument");
-
-  return window
-    .fetch(`${endpoint}/resourcelist?${queryString.stringify(params)}`, {
-      method: "POST",
-      body: JSON.stringify(documentContent),
-      headers: {
-        ...defaultHeaders,
-        ...authHeaders(),
-      },
-    })
-    .then(async (response) => {
-      if (response.ok) {
-        return response.json();
-      }
-      return await errorHandling(response, "creating document", params);
-    });
-}
-
 export function updateDocument(
   databaseId: string,
   collection: Collection,
   documentId: DocumentId,
   documentContent: string,
 ): Promise<DataModels.DocumentId> {
-  if (!useMongoProxyEndpoint(MongoProxyApi.UpdateDocument)) {
-    return updateDocument_ToBeDeprecated(databaseId, collection, documentId, documentContent);
-  }
   const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const idComponents = documentId.self.split("/");
@@ -396,7 +229,7 @@ export function updateDocument(
         : "",
     documentContent,
   };
-  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.UpdateDocument);
+  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
 
   return window
     .fetch(endpoint, {
@@ -417,139 +250,6 @@ export function updateDocument(
     });
 }
 
-export function updateDocument_ToBeDeprecated(
-  databaseId: string,
-  collection: Collection,
-  documentId: DocumentId,
-  documentContent: string,
-): Promise<DataModels.DocumentId> {
-  const { databaseAccount } = userContext;
-  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
-  const idComponents = documentId.self.split("/");
-  const path = idComponents.slice(0, 5).join("/");
-  const rid = encodeURIComponent(idComponents[5]);
-  const params = {
-    db: databaseId,
-    coll: collection.id(),
-    resourceUrl: `${resourceEndpoint}${path}/${rid}`,
-    rid,
-    rtype: "docs",
-    sid: userContext.subscriptionId,
-    rg: userContext.resourceGroup,
-    dba: databaseAccount.name,
-    pk:
-      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
-        ? documentId.partitionKeyProperties?.[0]
-        : "",
-  };
-  const endpoint = getFeatureEndpointOrDefault("updateDocument");
-
-  return window
-    .fetch(`${endpoint}?${queryString.stringify(params)}`, {
-      method: "PUT",
-      body: documentContent,
-      headers: {
-        ...defaultHeaders,
-        ...authHeaders(),
-        [HttpHeaders.contentType]: ContentType.applicationJson,
-        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
-      },
-    })
-    .then(async (response) => {
-      if (response.ok) {
-        return response.json();
-      }
-      return await errorHandling(response, "updating document", params);
-    });
-}
-
-export function deleteDocument(databaseId: string, collection: Collection, documentId: DocumentId): Promise<void> {
-  if (!useMongoProxyEndpoint(MongoProxyApi.DeleteDocument)) {
-    return deleteDocument_ToBeDeprecated(databaseId, collection, documentId);
-  }
-  const { databaseAccount } = userContext;
-  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
-  const idComponents = documentId.self.split("/");
-  const path = idComponents.slice(0, 5).join("/");
-  const rid = encodeURIComponent(idComponents[5]);
-  const params = {
-    databaseID: databaseId,
-    collectionID: collection.id(),
-    resourceUrl: `${resourceEndpoint}${path}/${rid}`,
-    resourceID: rid,
-    resourceType: "docs",
-    subscriptionID: userContext.subscriptionId,
-    resourceGroup: userContext.resourceGroup,
-    databaseAccountName: databaseAccount.name,
-    partitionKey:
-      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
-        ? documentId.partitionKeyProperties?.[0]
-        : "",
-  };
-  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.DeleteDocument);
-
-  return window
-    .fetch(endpoint, {
-      method: "DELETE",
-      body: JSON.stringify(params),
-      headers: {
-        ...defaultHeaders,
-        ...authHeaders(),
-        [HttpHeaders.contentType]: ContentType.applicationJson,
-      },
-    })
-    .then(async (response) => {
-      if (response.ok) {
-        return undefined;
-      }
-      return await errorHandling(response, "deleting document", params);
-    });
-}
-
-export function deleteDocument_ToBeDeprecated(
-  databaseId: string,
-  collection: Collection,
-  documentId: DocumentId,
-): Promise<void> {
-  const { databaseAccount } = userContext;
-  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
-  const idComponents = documentId.self.split("/");
-  const path = idComponents.slice(0, 5).join("/");
-  const rid = encodeURIComponent(idComponents[5]);
-  const params = {
-    db: databaseId,
-    coll: collection.id(),
-    resourceUrl: `${resourceEndpoint}${path}/${rid}`,
-    rid,
-    rtype: "docs",
-    sid: userContext.subscriptionId,
-    rg: userContext.resourceGroup,
-    dba: databaseAccount.name,
-    pk:
-      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
-        ? documentId.partitionKeyProperties?.[0]
-        : "",
-  };
-  const endpoint = getFeatureEndpointOrDefault("deleteDocument");
-
-  return window
-    .fetch(`${endpoint}?${queryString.stringify(params)}`, {
-      method: "DELETE",
-      headers: {
-        ...defaultHeaders,
-        ...authHeaders(),
-        [HttpHeaders.contentType]: ContentType.applicationJson,
-        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
-      },
-    })
-    .then(async (response) => {
-      if (response.ok) {
-        return undefined;
-      }
-      return await errorHandling(response, "deleting document", params);
-    });
-}
-
 export function deleteDocuments(
   databaseId: string,
   collection: Collection,
@@ -575,7 +275,7 @@ export function deleteDocuments(
     resourceGroup: userContext.resourceGroup,
     databaseAccountName: databaseAccount.name,
   };
-  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.BulkDelete);
+  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
 
   return window
     .fetch(`${endpoint}/bulkdelete`, {
@@ -599,9 +299,6 @@ export function deleteDocuments(
 export function createMongoCollectionWithProxy(
   params: DataModels.CreateCollectionParams,
 ): Promise<DataModels.Collection> {
-  if (!useMongoProxyEndpoint(MongoProxyApi.CreateCollectionWithProxy)) {
-    return createMongoCollectionWithProxy_ToBeDeprecated(params);
-  }
   const { databaseAccount } = userContext;
   const shardKey: string = params.partitionKey?.paths[0];
 
@@ -622,7 +319,7 @@ export function createMongoCollectionWithProxy(
     isSharded: !!shardKey,
   };
 
-  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.CreateCollectionWithProxy);
+  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
 
   return window
     .fetch(`${endpoint}/createCollection`, {
@@ -642,70 +339,6 @@ export function createMongoCollectionWithProxy(
     });
 }
 
-export function createMongoCollectionWithProxy_ToBeDeprecated(
-  params: DataModels.CreateCollectionParams,
-): Promise<DataModels.Collection> {
-  const { databaseAccount } = userContext;
-  const shardKey: string = params.partitionKey?.paths[0];
-  const mongoParams: DataModels.MongoParameters = {
-    resourceUrl: databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint,
-    db: params.databaseId,
-    coll: params.collectionId,
-    pk: shardKey,
-    offerThroughput: params.autoPilotMaxThroughput || params.offerThroughput,
-    cd: params.createNewDatabase,
-    st: params.databaseLevelThroughput,
-    is: !!shardKey,
-    rid: "",
-    rtype: "colls",
-    sid: userContext.subscriptionId,
-    rg: userContext.resourceGroup,
-    dba: databaseAccount.name,
-    isAutoPilot: !!params.autoPilotMaxThroughput,
-  };
-
-  const endpoint = getFeatureEndpointOrDefault("createCollectionWithProxy");
-
-  return window
-    .fetch(
-      `${endpoint}/createCollection?${queryString.stringify(
-        mongoParams as unknown as queryString.ParsedUrlQueryInput,
-      )}`,
-      {
-        method: "POST",
-        headers: {
-          ...defaultHeaders,
-          ...authHeaders(),
-          [HttpHeaders.contentType]: "application/json",
-        },
-      },
-    )
-    .then(async (response) => {
-      if (response.ok) {
-        return response.json();
-      }
-      return await errorHandling(response, "creating collection", mongoParams);
-    });
-}
-export function getFeatureEndpointOrDefault(feature: string): string {
-  let endpoint;
-  if (useMongoProxyEndpoint(feature)) {
-    endpoint = configContext.MONGO_PROXY_ENDPOINT;
-  } else {
-    const allowedMongoProxyEndpoints = configContext.allowedMongoProxyEndpoints || [
-      ...defaultAllowedMongoProxyEndpoints,
-      ...allowedMongoProxyEndpoints_ToBeDeprecated,
-    ];
-    endpoint =
-      hasFlag(userContext.features.mongoProxyAPIs, feature) &&
-      validateEndpoint(userContext.features.mongoProxyEndpoint, allowedMongoProxyEndpoints)
-        ? userContext.features.mongoProxyEndpoint
-        : configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT;
-  }
-
-  return getEndpoint(endpoint);
-}
-
 export function getEndpoint(endpoint: string): string {
   let url = endpoint + "/api/mongo/explorer";
 
@@ -719,84 +352,6 @@ export function getEndpoint(endpoint: string): string {
   return url;
 }
 
-export function useMongoProxyEndpoint(mongoProxyApi: string): boolean {
-  const mongoProxyEnvironmentMap: { [key: string]: string[] } = {
-    [MongoProxyApi.ResourceList]: [
-      MongoProxyEndpoints.Local,
-      MongoProxyEndpoints.Mpac,
-      MongoProxyEndpoints.Prod,
-      MongoProxyEndpoints.Fairfax,
-      MongoProxyEndpoints.Mooncake,
-    ],
-    [MongoProxyApi.QueryDocuments]: [
-      MongoProxyEndpoints.Local,
-      MongoProxyEndpoints.Mpac,
-      MongoProxyEndpoints.Prod,
-      MongoProxyEndpoints.Fairfax,
-      MongoProxyEndpoints.Mooncake,
-    ],
-    [MongoProxyApi.CreateDocument]: [
-      MongoProxyEndpoints.Local,
-      MongoProxyEndpoints.Mpac,
-      MongoProxyEndpoints.Prod,
-      MongoProxyEndpoints.Fairfax,
-      MongoProxyEndpoints.Mooncake,
-    ],
-    [MongoProxyApi.ReadDocument]: [
-      MongoProxyEndpoints.Local,
-      MongoProxyEndpoints.Mpac,
-      MongoProxyEndpoints.Prod,
-      MongoProxyEndpoints.Fairfax,
-      MongoProxyEndpoints.Mooncake,
-    ],
-    [MongoProxyApi.UpdateDocument]: [
-      MongoProxyEndpoints.Local,
-      MongoProxyEndpoints.Mpac,
-      MongoProxyEndpoints.Prod,
-      MongoProxyEndpoints.Fairfax,
-      MongoProxyEndpoints.Mooncake,
-    ],
-    [MongoProxyApi.DeleteDocument]: [
-      MongoProxyEndpoints.Local,
-      MongoProxyEndpoints.Mpac,
-      MongoProxyEndpoints.Prod,
-      MongoProxyEndpoints.Fairfax,
-      MongoProxyEndpoints.Mooncake,
-    ],
-    [MongoProxyApi.CreateCollectionWithProxy]: [
-      MongoProxyEndpoints.Local,
-      MongoProxyEndpoints.Mpac,
-      MongoProxyEndpoints.Prod,
-      MongoProxyEndpoints.Fairfax,
-      MongoProxyEndpoints.Mooncake,
-    ],
-    [MongoProxyApi.LegacyMongoShell]: [
-      MongoProxyEndpoints.Local,
-      MongoProxyEndpoints.Mpac,
-      MongoProxyEndpoints.Prod,
-      MongoProxyEndpoints.Fairfax,
-      MongoProxyEndpoints.Mooncake,
-    ],
-    [MongoProxyApi.BulkDelete]: [
-      MongoProxyEndpoints.Local,
-      MongoProxyEndpoints.Mpac,
-      MongoProxyEndpoints.Prod,
-      MongoProxyEndpoints.Fairfax,
-      MongoProxyEndpoints.Mooncake,
-    ],
-  };
-
-  if (!mongoProxyEnvironmentMap[mongoProxyApi] || !configContext.MONGO_PROXY_ENDPOINT) {
-    return false;
-  }
-
-  if (configContext.globallyEnabledMongoAPIs.includes(mongoProxyApi)) {
-    return true;
-  }
-
-  return mongoProxyEnvironmentMap[mongoProxyApi].includes(configContext.MONGO_PROXY_ENDPOINT);
-}
-
 export class ThrottlingError extends Error {
   constructor(message: string) {
     super(message);

src/Common/QueryError.test.ts

@@ -36,7 +36,7 @@ describe("QueryError.tryParse", () => {
       code: "BadRequest",
       message: "Your query is bad, and you should feel bad",
     };
-    const message = JSON.stringify(innerError);
+    const message = `Message: ${JSON.stringify(innerError)}\r\nActivity ID: 42`;
     const outerError = {
       code: "BadRequest",
       message,
@@ -48,7 +48,7 @@ describe("QueryError.tryParse", () => {
     ]);
   });
 
-  // Imitate the value coming from the backend, which has the syntax errors serialized as JSON in the message.
+  // Imitate the value coming from the backend, which has the syntax errors serialized as JSON in the message, along with a prefix and activity id.
   it("handles single-nested error", () => {
     const errors = [
       {
@@ -69,7 +69,7 @@ describe("QueryError.tryParse", () => {
       message: "Your query is bad, and you should feel bad",
       errors,
     };
-    const message = JSON.stringify(innerError);
+    const message = `Message: ${JSON.stringify(innerError)}\r\nActivity ID: 42`;
     const outerError = {
       code: "BadRequest",
       message,
@@ -91,4 +91,23 @@ describe("QueryError.tryParse", () => {
       ),
     ]);
   });
+
+  // Imitate another value we've gotten from the backend, which has a doubly-nested JSON payload.
+  it("handles double-nested error", () => {
+    const outerError = {
+      code: "BadRequest",
+      message:
+        '{"code":"BadRequest","message":"{\\"errors\\":[{\\"severity\\":\\"Error\\",\\"location\\":{\\"start\\":7,\\"end\\":18},\\"code\\":\\"SC2005\\",\\"message\\":\\"\'nonexistent\' is not a recognized built-in function name.\\"}]}\\r\\nActivityId: aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa, Windows/10.0.20348 cosmos-netstandard-sdk/3.18.0"}',
+    };
+
+    const result = QueryError.tryParse(outerError, testErrorLocationResolver);
+    expect(result).toEqual([
+      new QueryError(
+        "'nonexistent' is not a recognized built-in function name.",
+        QueryErrorSeverity.Error,
+        "SC2005",
+        new QueryErrorLocation({ offset: 7, lineNumber: 7, column: 7 }, { offset: 18, lineNumber: 18, column: 18 }),
+      ),
+    ]);
+  });
 });

src/Common/QueryError.ts

@@ -214,16 +214,28 @@ export default class QueryError {
       return null;
     }
 
-    // Assign to a new variable because of a TypeScript flow typing quirk, see below.
-    if (message.startsWith("Message: ")) {
-      // Reassigning this to 'error' restores the original type of 'error', which is 'unknown'.
-      // So we use a separate variable to avoid this.
-      message = message.substring("Message: ".length);
+    // Some newer backends produce a message that contains a doubly-nested JSON payload.
+    // In this case, the message we get is a fully-complete JSON object we can parse.
+    // So let's try that first
+    if (message.startsWith("{") && message.endsWith("}")) {
+      let outer: unknown = undefined;
+      try {
+        outer = JSON.parse(message);
+        if (typeof outer === "object" && "message" in outer && typeof outer.message === "string") {
+          message = outer.message;
+        }
+      } catch (e) {
+        // Just continue if the parsing fails. We'll use the fallback logic below.
+      }
     }
 
     const lines = message.split("\n");
     message = lines[0].trim();
 
+    if (message.startsWith("Message: ")) {
+      message = message.substring("Message: ".length);
+    }
+
     let parsed: unknown;
     try {
       parsed = JSON.parse(message);

src/Common/StyleConstants.ts

@@ -1,10 +1,10 @@
-import { Platform, configContext } from "../ConfigContext";
+import { isFabric } from "Platform/Fabric/FabricUtil";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
 
 export function updateStyles(): void {
-  if (configContext.platform === Platform.Fabric) {
+  if (isFabric()) {
     StyleConstants.AccentMediumHigh = StyleConstants.FabricAccentMediumHigh;
     StyleConstants.AccentMedium = StyleConstants.FabricAccentMedium;
     StyleConstants.AccentLight = StyleConstants.FabricAccentLight;

src/Common/dataAccess/createCollection.ts

@@ -1,4 +1,5 @@
 import { ContainerRequest, ContainerResponse, DatabaseRequest, DatabaseResponse, RequestOptions } from "@azure/cosmos";
+import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { useDatabases } from "../../Explorer/useDatabases";
@@ -24,7 +25,7 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
   );
   try {
     let collection: DataModels.Collection;
-    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
+    if (!isFabricNative() && userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       if (params.createNewDatabase) {
         const createDatabaseParams: DataModels.CreateDatabaseParams = {
           autoPilotMaxThroughput: params.autoPilotMaxThroughput,
@@ -99,6 +100,9 @@ const createSqlContainer = async (params: DataModels.CreateCollectionParams): Pr
   if (params.vectorEmbeddingPolicy) {
     resource.vectorEmbeddingPolicy = params.vectorEmbeddingPolicy;
   }
+  if (params.fullTextPolicy) {
+    resource.fullTextPolicy = params.fullTextPolicy;
+  }
 
   const rpPayload: ARMTypes.SqlDatabaseCreateUpdateParameters = {
     properties: {
@@ -270,6 +274,7 @@ const createCollectionWithSDK = async (params: DataModels.CreateCollectionParams
     uniqueKeyPolicy: params.uniqueKeyPolicy || undefined,
     analyticalStorageTtl: params.analyticalStorageTtl,
     vectorEmbeddingPolicy: params.vectorEmbeddingPolicy,
+    fullTextPolicy: params.fullTextPolicy,
   } as ContainerRequest; // TODO: remove cast when https://github.com/Azure/azure-cosmos-js/issues/423 is fixed
   const collectionOptions: RequestOptions = {};
   const createDatabaseBody: DatabaseRequest = { id: params.databaseId };

src/Common/dataAccess/deleteCollection.ts

@@ -1,3 +1,4 @@
+import { isFabric } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
 import { deleteCassandraTable } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
@@ -12,7 +13,7 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function deleteCollection(databaseId: string, collectionId: string): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting container ${collectionId}`);
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations && !isFabric()) {
       await deleteCollectionWithARM(databaseId, collectionId);
     } else {
       await client().database(databaseId).container(collectionId).delete();

src/Common/dataAccess/readCollectionOffer.ts

@@ -105,6 +105,8 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
         ? parseInt(resource.softAllowedMaximumThroughput)
         : resource.softAllowedMaximumThroughput;
 
+    const throughputBuckets = resource?.throughputBuckets;
+
     if (autoscaleSettings) {
       return {
         id: offerId,
@@ -114,6 +116,7 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
         offerReplacePending: resource.offerReplacePending === "true",
         instantMaximumThroughput,
         softAllowedMaximumThroughput,
+        throughputBuckets,
       };
     }
 
@@ -125,6 +128,7 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
       offerReplacePending: resource.offerReplacePending === "true",
       instantMaximumThroughput,
       softAllowedMaximumThroughput,
+      throughputBuckets,
     };
   }
 

src/Common/dataAccess/readCollections.ts

@@ -1,9 +1,10 @@
 import { ContainerResponse } from "@azure/cosmos";
 import { Queries } from "Common/Constants";
-import { Platform, configContext } from "ConfigContext";
+import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
+import { isFabric, isFabricMirroredKey } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
-import { userContext } from "../../UserContext";
+import { FabricArtifactInfo, userContext } from "../../UserContext";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { listCassandraTables } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { listGremlinGraphs } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
@@ -16,15 +17,13 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
   const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
 
-  if (
-    configContext.platform === Platform.Fabric &&
-    userContext.fabricContext &&
-    userContext.fabricContext.databaseConnectionInfo.databaseId === databaseId
-  ) {
+  if (isFabricMirroredKey() && userContext.fabricContext?.databaseName === databaseId) {
     const collections: DataModels.Collection[] = [];
     const promises: Promise<ContainerResponse>[] = [];
 
-    for (const collectionResourceId in userContext.fabricContext.databaseConnectionInfo.resourceTokens) {
+    for (const collectionResourceId in (
+      userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]
+    ).resourceTokenInfo.resourceTokens) {
       // Dictionary key looks like this: dbs/SampleDB/colls/Container
       const resourceIdObj = collectionResourceId.split("/");
       const tokenDatabaseId = resourceIdObj[1];
@@ -56,7 +55,8 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.features.enableSDKoperations &&
-      userContext.apiType !== "Tables"
+      userContext.apiType !== "Tables" &&
+      !isFabric()
     ) {
       return await readCollectionsWithARM(databaseId);
     }

src/Common/dataAccess/readDatabaseOffer.ts

@@ -1,4 +1,4 @@
-import { Platform, configContext } from "ConfigContext";
+import { isFabric, isFabricMirroredKey, isFabricNative } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import { Offer, ReadDatabaseOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
@@ -11,8 +11,9 @@ import { handleError } from "../ErrorHandlingUtils";
 import { readOfferWithSDK } from "./readOfferWithSDK";
 
 export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promise<Offer> => {
-  if (configContext.platform === Platform.Fabric) {
-    // TODO This works, but is very slow, because it requests the token, so we skip for now
+  if (isFabricMirroredKey() || isFabricNative()) {
+    // For Fabric Mirroring, it is slow, because it requests the token and we don't need it.
+    // For Fabric Native, it is not supported.
     console.error("Skiping readDatabaseOffer for Fabric");
     return undefined;
   }
@@ -23,7 +24,8 @@ export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promis
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.features.enableSDKoperations &&
-      userContext.apiType !== "Tables"
+      userContext.apiType !== "Tables" &&
+      !isFabric()
     ) {
       return await readDatabaseOfferWithARM(params.databaseId);
     }

src/Common/dataAccess/readDatabases.ts

@@ -1,7 +1,8 @@
-import { Platform, configContext } from "ConfigContext";
+import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
+import { isFabric, isFabricMirroredKey, isFabricNative } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
-import { userContext } from "../../UserContext";
+import { FabricArtifactInfo, userContext } from "../../UserContext";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { listCassandraKeyspaces } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { listGremlinDatabases } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
@@ -14,8 +15,13 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
   let databases: DataModels.Database[];
   const clearMessage = logConsoleProgress(`Querying databases`);
 
-  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.databaseConnectionInfo.resourceTokens) {
-    const tokensData = userContext.fabricContext.databaseConnectionInfo;
+  if (
+    isFabricMirroredKey() &&
+    (userContext.fabricContext?.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]).resourceTokenInfo
+      .resourceTokens
+  ) {
+    const tokensData = (userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY])
+      .resourceTokenInfo;
 
     const databaseIdsSet = new Set<string>(); // databaseId
 
@@ -46,13 +52,28 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
       }));
     clearMessage();
     return databases;
+  } else if (isFabricNative() && userContext.fabricContext?.databaseName) {
+    const databaseId = userContext.fabricContext.databaseName;
+    databases = [
+      {
+        _rid: "",
+        _self: "",
+        _etag: "",
+        _ts: 0,
+        id: databaseId,
+        collections: [],
+      },
+    ];
+    clearMessage();
+    return databases;
   }
 
   try {
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.features.enableSDKoperations &&
-      userContext.apiType !== "Tables"
+      userContext.apiType !== "Tables" &&
+      !isFabric()
     ) {
       databases = await readDatabasesWithARM();
     } else {

src/Common/dataAccess/updateCollection.ts

@@ -1,4 +1,5 @@
 import { ContainerDefinition, RequestOptions } from "@azure/cosmos";
+import { isFabric } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import { Collection } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
@@ -36,7 +37,8 @@ export async function updateCollection(
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.features.enableSDKoperations &&
-      userContext.apiType !== "Tables"
+      userContext.apiType !== "Tables" &&
+      !isFabric()
     ) {
       collection = await updateCollectionWithARM(databaseId, collectionId, newCollection);
     } else {

src/Common/dataAccess/updateOffer.ts

@@ -1,6 +1,7 @@
 import { OfferDefinition, RequestOptions } from "@azure/cosmos";
+import { isFabric } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
-import { Offer, SDKOfferDefinition, UpdateOfferParams } from "../../Contracts/DataModels";
+import { Offer, SDKOfferDefinition, ThroughputBucket, UpdateOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
 import {
   migrateCassandraKeyspaceToAutoscale,
@@ -56,7 +57,7 @@ export const updateOffer = async (params: UpdateOfferParams): Promise<Offer> =>
   const clearMessage = logConsoleProgress(`Updating offer for ${offerResourceText}`);
 
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations && !isFabric()) {
       if (params.collectionId) {
         updatedOffer = await updateCollectionOfferWithARM(params);
       } else if (userContext.apiType === "Tables") {
@@ -359,6 +360,13 @@ const createUpdateOfferBody = (params: UpdateOfferParams): ThroughputSettingsUpd
     body.properties.resource.throughput = params.manualThroughput;
   }
 
+  if (params.throughputBuckets) {
+    const throughputBuckets = params.throughputBuckets.filter(
+      (bucket: ThroughputBucket) => bucket.maxThroughputPercentage !== 100,
+    );
+    body.properties.resource.throughputBuckets = throughputBuckets;
+  }
+
   return body;
 };
 

src/ConfigContext.ts

@@ -12,7 +12,6 @@ import {
   allowedGraphEndpoints,
   allowedHostedExplorerEndpoints,
   allowedJunoOrigins,
-  allowedMongoBackendEndpoints,
   allowedMsalRedirectEndpoints,
   defaultAllowedArmEndpoints,
   defaultAllowedBackendEndpoints,
@@ -50,10 +49,8 @@ export interface ConfigContext {
   CATALOG_API_KEY: string;
   ARCADIA_ENDPOINT: string;
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: string;
-  BACKEND_ENDPOINT?: string;
   PORTAL_BACKEND_ENDPOINT: string;
   NEW_BACKEND_APIS?: BackendApi[];
-  MONGO_BACKEND_ENDPOINT?: string;
   MONGO_PROXY_ENDPOINT: string;
   CASSANDRA_PROXY_ENDPOINT: string;
   NEW_CASSANDRA_APIS?: string[];
@@ -91,7 +88,7 @@ let configContext: Readonly<ConfigContext> = {
     `^https:\\/\\/.*\\.analysis-df\\.net$`,
     `^https:\\/\\/.*\\.analysis-df\\.windows\\.net$`,
     `^https:\\/\\/.*\\.azure-test\\.net$`,
-    `^https:\\/\\/cosmos-explorer-preview\\.azurewebsites\\.net$`,
+    `^https:\\/\\/dataexplorer-preview\\.azurewebsites\\.net$`,
   ], // Webpack injects this at build time
   gitSha: process.env.GIT_SHA,
   hostedExplorerURL: "https://cosmos.azure.com/",
@@ -109,7 +106,6 @@ let configContext: Readonly<ConfigContext> = {
   GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1189306
   GITHUB_TEST_ENV_CLIENT_ID: "b63fc8cbf87fd3c6e2eb", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1777772
   JUNO_ENDPOINT: JunoEndpoints.Prod,
-  BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
   PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Prod,
   MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
   CASSANDRA_PROXY_ENDPOINT: CassandraProxyEndpoints.Prod,
@@ -152,15 +148,6 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     delete newContext.ARCADIA_ENDPOINT;
   }
 
-  if (
-    !validateEndpoint(
-      newContext.BACKEND_ENDPOINT,
-      configContext.allowedBackendEndpoints || defaultAllowedBackendEndpoints,
-    )
-  ) {
-    delete newContext.BACKEND_ENDPOINT;
-  }
-
   if (
     !validateEndpoint(
       newContext.MONGO_PROXY_ENDPOINT,
@@ -170,10 +157,6 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     delete newContext.MONGO_PROXY_ENDPOINT;
   }
 
-  if (!validateEndpoint(newContext.MONGO_BACKEND_ENDPOINT, allowedMongoBackendEndpoints)) {
-    delete newContext.MONGO_BACKEND_ENDPOINT;
-  }
-
   if (
     !validateEndpoint(
       newContext.CASSANDRA_PROXY_ENDPOINT,

src/Contracts/ActionContracts.ts

@@ -9,6 +9,7 @@ export enum TabKind {
   Graph,
   SQLQuery,
   ScaleSettings,
+  MongoQuery,
 }
 
 /**
@@ -51,6 +52,8 @@ export interface OpenCollectionTab extends OpenTab {
  */
 export interface OpenQueryTab extends OpenCollectionTab {
   query: QueryInfo;
+  splitterDirection?: "vertical" | "horizontal";
+  queryViewSizePercent?: number;
 }
 
 /**

src/Contracts/DataModels.ts

@@ -6,6 +6,7 @@ export interface ArmEntity {
   location: string;
   type: string;
   kind: string;
+  tags?: Tags;
 }
 
 export interface DatabaseAccount extends ArmEntity {
@@ -159,6 +160,7 @@ export interface Collection extends Resource {
   analyticalStorageTtl?: number;
   geospatialConfig?: GeospatialConfig;
   vectorEmbeddingPolicy?: VectorEmbeddingPolicy;
+  fullTextPolicy?: FullTextPolicy;
   schema?: ISchema;
   requestSchema?: () => void;
   computedProperties?: ComputedProperties;
@@ -199,11 +201,19 @@ export interface IndexingPolicy {
   compositeIndexes?: any[];
   spatialIndexes?: any[];
   vectorIndexes?: VectorIndex[];
+  fullTextIndexes?: FullTextIndex[];
 }
 
 export interface VectorIndex {
   path: string;
   type: "flat" | "diskANN" | "quantizedFlat";
+  diskANNShardKey?: string;
+  indexingSearchListSize?: number;
+  quantizationByteSize?: number;
+}
+
+export interface FullTextIndex {
+  path: string;
 }
 
 export interface ComputedProperty {
@@ -265,6 +275,12 @@ export interface Offer {
   offerReplacePending: boolean;
   instantMaximumThroughput?: number;
   softAllowedMaximumThroughput?: number;
+  throughputBuckets?: ThroughputBucket[];
+}
+
+export interface ThroughputBucket {
+  id: number;
+  maxThroughputPercentage: number;
 }
 
 export interface SDKOfferDefinition extends Resource {
@@ -342,6 +358,7 @@ export interface CreateCollectionParams {
   uniqueKeyPolicy?: UniqueKeyPolicy;
   createMongoWildcardIndex?: boolean;
   vectorEmbeddingPolicy?: VectorEmbeddingPolicy;
+  fullTextPolicy?: FullTextPolicy;
 }
 
 export interface VectorEmbeddingPolicy {
@@ -355,6 +372,16 @@ export interface VectorEmbedding {
   path: string;
 }
 
+export interface FullTextPolicy {
+  defaultLanguage: string;
+  fullTextPaths: FullTextPath[];
+}
+
+export interface FullTextPath {
+  path: string;
+  language: string;
+}
+
 export interface ReadDatabaseOfferParams {
   databaseId: string;
   databaseResourceId?: string;
@@ -376,6 +403,7 @@ export interface UpdateOfferParams {
   collectionId?: string;
   migrateToAutoPilot?: boolean;
   migrateToManual?: boolean;
+  throughputBuckets?: ThroughputBucket[];
 }
 
 export interface Notification {
@@ -643,3 +671,5 @@ export interface FeatureRegistration {
     state: string;
   };
 }
+
+export type Tags = { [key: string]: string };

src/Contracts/FabricMessageTypes.ts

@@ -4,6 +4,7 @@
 export enum FabricMessageTypes {
   GetAuthorizationToken = "GetAuthorizationToken",
   GetAllResourceTokens = "GetAllResourceTokens",
+  GetAccessToken = "GetAccessToken",
   Ready = "Ready",
 }
 

src/Contracts/FabricMessagesContract.ts

@@ -1,47 +1,9 @@
-import { AuthorizationToken } from "Contracts/FabricMessageTypes";
+import { AuthorizationToken } from "./FabricMessageTypes";
 
 // This is the version of these messages
-export const FABRIC_RPC_VERSION = "2";
+export const FABRIC_RPC_VERSION = "FabricMessageV3";
 
 // Fabric to Data Explorer
-
-// TODO Deprecated. Remove this section once DE is updated
-export type FabricMessageV1 =
-  | {
-      type: "newContainer";
-      databaseName: string;
-    }
-  | {
-      type: "initialize";
-      message: {
-        endpoint: string | undefined;
-        databaseId: string | undefined;
-        resourceTokens: unknown | undefined;
-        resourceTokensTimestamp: number | undefined;
-        error: string | undefined;
-      };
-    }
-  | {
-      type: "authorizationToken";
-      message: {
-        id: string;
-        error: string | undefined;
-        data: AuthorizationToken | undefined;
-      };
-    }
-  | {
-      type: "allResourceTokens";
-      message: {
-        id: string;
-        error: string | undefined;
-        endpoint: string | undefined;
-        databaseId: string | undefined;
-        resourceTokens: unknown | undefined;
-        resourceTokensTimestamp: number | undefined;
-      };
-    };
-// -----------------------------
-
 export type FabricMessageV2 =
   | {
       type: "newContainer";
@@ -69,7 +31,7 @@ export type FabricMessageV2 =
       message: {
         id: string;
         error: string | undefined;
-        data: FabricDatabaseConnectionInfo | undefined;
+        data: ResourceTokenInfo | undefined;
       };
     }
   | {
@@ -79,17 +41,81 @@ export type FabricMessageV2 =
       };
     };
 
-export type CosmosDBTokenResponse = {
-  token: string;
-  date: string;
-};
+export type FabricMessageV3 =
+  | {
+      type: "newContainer";
+      databaseName: string;
+    }
+  | {
+      type: "initialize";
+      version: string;
+      id: string;
+      message: InitializeMessageV3<CosmosDbArtifactType>;
+    }
+  | {
+      type: "authorizationToken";
+      message: {
+        id: string;
+        error: string | undefined;
+        data: AuthorizationToken | undefined;
+      };
+    }
+  | {
+      type: "allResourceTokens_v2";
+      message: {
+        id: string;
+        error: string | undefined;
+        data: ResourceTokenInfo | undefined;
+      };
+    }
+  | {
+      type: "explorerVisible";
+      message: {
+        visible: boolean;
+      };
+    }
+  | {
+      type: "accessToken";
+      message: {
+        id: string;
+        error: string | undefined;
+        data: { accessToken: string };
+      };
+    };
 
-export type CosmosDBConnectionInfoResponse = {
+export enum CosmosDbArtifactType {
+  MIRRORED_KEY = "MIRRORED_KEY",
+  MIRRORED_AAD = "MIRRORED_AAD",
+  NATIVE = "NATIVE",
+}
+export interface ArtifactConnectionInfo {
+  [CosmosDbArtifactType.MIRRORED_KEY]: { connectionId: string };
+  [CosmosDbArtifactType.MIRRORED_AAD]: AccessTokenConnectionInfo;
+  [CosmosDbArtifactType.NATIVE]: AccessTokenConnectionInfo;
+}
+
+export interface AccessTokenConnectionInfo {
+  accessToken: string;
+  databaseName: string;
+  accountEndpoint: string;
+}
+
+export interface InitializeMessageV3<T extends CosmosDbArtifactType> {
+  connectionId: string;
+  isVisible: boolean;
+  isReadOnly: boolean;
+  artifactType: T;
+  artifactConnectionInfo: ArtifactConnectionInfo[T];
+}
+export interface CosmosDBConnectionInfoResponse {
   endpoint: string;
   databaseId: string;
-  resourceTokens: { [resourceId: string]: string };
-};
+  resourceTokens: Record<string, string> | undefined;
+  accessToken: string | undefined;
+  isReadOnly: boolean;
+  credentialType: "Key" | "OAuth2" | undefined;
+}
 
-export interface FabricDatabaseConnectionInfo extends CosmosDBConnectionInfoResponse {
+export interface ResourceTokenInfo extends CosmosDBConnectionInfoResponse {
   resourceTokensTimestamp: number;
 }

src/Contracts/MessageTypes.ts

@@ -41,7 +41,7 @@ export enum MessageTypes {
   OpenPostgreSQLPasswordReset,
   OpenPostgresNetworkingBlade,
   OpenCosmosDBNetworkingBlade,
-  DisplayNPSSurvey,
+  DisplayNPSSurvey, // unused
   OpenVCoreMongoNetworkingBlade,
   OpenVCoreMongoConnectionStringsBlade,
   GetAuthorizationToken, // unused. Can be removed if the portal uses the same list of enums.

src/Contracts/ViewModels.ts

@@ -5,7 +5,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";
@@ -115,7 +115,13 @@ export interface CollectionBase extends TreeNode {
   isSampleCollection?: boolean;
 
   onDocumentDBDocumentsClick(): void;
-  onNewQueryClick(source: any, event?: MouseEvent, queryText?: string): void;
+  onNewQueryClick(
+    source: any,
+    event?: MouseEvent,
+    queryText?: string,
+    splitterDirection?: "horizontal" | "vertical",
+    queryViewSizePercent?: number,
+  ): void;
   expandCollection(): void;
   collapseCollection(): void;
   getDatabase(): Database;
@@ -126,6 +132,8 @@ export interface Collection extends CollectionBase {
   analyticalStorageTtl: ko.Observable<number>;
   schema?: DataModels.ISchema;
   requestSchema?: () => void;
+  vectorEmbeddingPolicy: ko.Observable<DataModels.VectorEmbeddingPolicy>;
+  fullTextPolicy: ko.Observable<DataModels.FullTextPolicy>;
   indexingPolicy: ko.Observable<DataModels.IndexingPolicy>;
   uniqueKeyPolicy: DataModels.UniqueKeyPolicy;
   usageSizeInKB: ko.Observable<number>;
@@ -149,7 +157,13 @@ export interface Collection extends CollectionBase {
   onSettingsClick: () => Promise<void>;
 
   onNewGraphClick(): void;
-  onNewMongoQueryClick(source: any, event?: MouseEvent, queryText?: string): void;
+  onNewMongoQueryClick(
+    source: any,
+    event?: MouseEvent,
+    queryText?: string,
+    splitterDirection?: "horizontal" | "vertical",
+    queryViewSizePercent?: number,
+  ): void;
   onNewMongoShellClick(): void;
   onNewStoredProcedureClick(source: Collection, event?: MouseEvent): void;
   onNewUserDefinedFunctionClick(source: Collection, event?: MouseEvent): void;
@@ -309,6 +323,8 @@ export interface QueryTabOptions extends TabOptions {
   partitionKey?: DataModels.PartitionKey;
   queryText?: string;
   resourceTokenPartitionKey?: string;
+  splitterDirection?: "horizontal" | "vertical";
+  queryViewSizePercent?: number;
 }
 
 export interface ScriptTabOption extends TabOptions {
@@ -390,7 +406,6 @@ export interface DataExplorerInputsFrame {
   csmEndpoint?: string;
   dnsSuffix?: string;
   serverId?: string;
-  extensionEndpoint?: string;
   portalBackendEndpoint?: string;
   mongoProxyEndpoint?: string;
   cassandraProxyEndpoint?: string;
@@ -447,3 +462,6 @@ export interface DropdownOption<T> {
   value: T;
   disable?: boolean;
 }
+
+// Remove the duplicate Explorer interface and export the type
+export type { Explorer };

src/Explorer/ContextMenuButtonFactory.tsx

@@ -1,5 +1,7 @@
+import { configContext, Platform } from "ConfigContext";
 import { TreeNodeMenuItem } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
 import { useDatabases } from "Explorer/useDatabases";
+import { isFabric, isFabricNative } from "Platform/Fabric/FabricUtil";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
@@ -19,7 +21,6 @@ import * as ViewModels from "../Contracts/ViewModels";
 import { userContext } from "../UserContext";
 import { getCollectionName, getDatabaseName } from "../Utils/APITypeUtils";
 import { useSidePanel } from "../hooks/useSidePanel";
-import { Platform, configContext } from "./../ConfigContext";
 import Explorer from "./Explorer";
 import { useNotebook } from "./Notebook/useNotebook";
 import { DeleteCollectionConfirmationPane } from "./Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane";
@@ -41,7 +42,7 @@ export interface DatabaseContextMenuButtonParams {
  * New resource tree (in ReactJS)
  */
 export const createDatabaseContextMenu = (container: Explorer, databaseId: string): TreeNodeMenuItem[] => {
-  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly) {
+  if (isFabric() && userContext.fabricContext?.isReadOnly) {
     return undefined;
   }
 
@@ -53,7 +54,7 @@ export const createDatabaseContextMenu = (container: Explorer, databaseId: strin
     },
   ];
 
-  if (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations) {
+  if (!isFabricNative() && (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations)) {
     items.push({
       iconSrc: DeleteDatabaseIcon,
       onClick: (lastFocusedElement?: React.RefObject<HTMLElement>) => {
@@ -145,7 +146,7 @@ export const createCollectionContextMenuButton = (
     });
   }
 
-  if (configContext.platform !== Platform.Fabric) {
+  if (!isFabric() || (isFabric() && !userContext.fabricContext?.isReadOnly)) {
     items.push({
       iconSrc: DeleteCollectionIcon,
       onClick: (lastFocusedElement?: React.RefObject<HTMLElement>) => {

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -1,4 +1,4 @@
-import { DirectionalHint, Icon, Label, Stack, TooltipHost } from "@fluentui/react";
+import { DirectionalHint, Icon, IconButton, Label, Stack, TooltipHost } from "@fluentui/react";
 import * as React from "react";
 import { NormalizedEventKey } from "../../../Common/Constants";
 import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
@@ -9,6 +9,9 @@ export interface CollapsibleSectionProps {
   onExpand?: () => void;
   children: JSX.Element;
   tooltipContent?: string | JSX.Element | JSX.Element[];
+  showDelete?: boolean;
+  onDelete?: () => void;
+  disabled?: boolean;
 }
 
 export interface CollapsibleSectionState {
@@ -69,6 +72,20 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
               <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
             </TooltipHost>
           )}
+          {this.props.showDelete && (
+            <Stack.Item style={{ marginLeft: "auto" }}>
+              <IconButton
+                disabled={this.props.disabled}
+                id={`delete-${this.props.title.split(" ").join("-")}`}
+                iconProps={{ iconName: "Delete" }}
+                style={{ height: 27, marginRight: "20px" }}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  this.props.onDelete();
+                }}
+              />
+            </Stack.Item>
+          )}
         </Stack>
         {this.state.isExpanded && this.props.children}
       </>

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -1,4 +1,5 @@
 import { Spinner, SpinnerSize } from "@fluentui/react";
+import { monacoTheme } from "hooks/useTheme";
 import * as React from "react";
 import { loadMonaco, monaco } from "../../LazyMonaco";
 // import "./EditorReact.less";
@@ -211,7 +212,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.test.tsx

@@ -0,0 +1,6 @@
+import "@testing-library/jest-dom";
+
+describe("AddFullTextPolicyForm", () => {
+  //CTODO: add tests
+  it.skip("should render correctly", () => {});
+});

src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.tsx

@@ -0,0 +1,239 @@
+import {
+  DefaultButton,
+  Dropdown,
+  IDropdownOption,
+  IStyleFunctionOrObject,
+  ITextFieldStyleProps,
+  ITextFieldStyles,
+  Label,
+  Stack,
+  TextField,
+} from "@fluentui/react";
+import { FullTextIndex, FullTextPath, FullTextPolicy } from "Contracts/DataModels";
+import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
+import * as React from "react";
+
+export interface FullTextPoliciesComponentProps {
+  fullTextPolicy: FullTextPolicy;
+  onFullTextPathChange: (
+    fullTextPolicy: FullTextPolicy,
+    fullTextIndexes: FullTextIndex[],
+    validationPassed: boolean,
+  ) => void;
+  discardChanges?: boolean;
+  onChangesDiscarded?: () => void;
+}
+
+export interface FullTextPolicyData {
+  path: string;
+  language: string;
+  pathError: string;
+}
+
+const labelStyles = {
+  root: {
+    fontSize: 12,
+  },
+};
+
+const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
+  fieldGroup: {
+    height: 27,
+  },
+  field: {
+    fontSize: 12,
+    padding: "0 8px",
+  },
+};
+
+const dropdownStyles = {
+  title: {
+    height: 27,
+    lineHeight: "24px",
+    fontSize: 12,
+  },
+  dropdown: {
+    height: 27,
+    lineHeight: "24px",
+  },
+  dropdownItem: {
+    fontSize: 12,
+  },
+};
+
+export const FullTextPoliciesComponent: React.FunctionComponent<FullTextPoliciesComponentProps> = ({
+  fullTextPolicy,
+  onFullTextPathChange,
+  discardChanges,
+  onChangesDiscarded,
+}): JSX.Element => {
+  const getFullTextPathError = (path: string, index?: number): string => {
+    let error = "";
+    if (!path) {
+      error = "Full text path should not be empty";
+    }
+    if (
+      index >= 0 &&
+      fullTextPathData?.find(
+        (fullTextPath: FullTextPolicyData, dataIndex: number) => dataIndex !== index && fullTextPath.path === path,
+      )
+    ) {
+      error = "Full text path is already defined";
+    }
+    return error;
+  };
+
+  const initializeData = (fullTextPolicy: FullTextPolicy): FullTextPolicyData[] => {
+    if (!fullTextPolicy) {
+      fullTextPolicy = { defaultLanguage: getFullTextLanguageOptions()[0].key as never, fullTextPaths: [] };
+    }
+    return fullTextPolicy.fullTextPaths.map((fullTextPath: FullTextPath) => ({
+      ...fullTextPath,
+      pathError: getFullTextPathError(fullTextPath.path),
+    }));
+  };
+
+  const [fullTextPathData, setFullTextPathData] = React.useState<FullTextPolicyData[]>(initializeData(fullTextPolicy));
+  const [defaultLanguage, setDefaultLanguage] = React.useState<string>(
+    fullTextPolicy ? fullTextPolicy.defaultLanguage : (getFullTextLanguageOptions()[0].key as never),
+  );
+
+  React.useEffect(() => {
+    propagateData();
+  }, [fullTextPathData, defaultLanguage]);
+
+  React.useEffect(() => {
+    if (discardChanges) {
+      setFullTextPathData(initializeData(fullTextPolicy));
+      setDefaultLanguage(fullTextPolicy.defaultLanguage);
+      onChangesDiscarded();
+    }
+  }, [discardChanges]);
+
+  const propagateData = () => {
+    const newFullTextPolicy: FullTextPolicy = {
+      defaultLanguage: defaultLanguage,
+      fullTextPaths: fullTextPathData.map((policy: FullTextPolicyData) => ({
+        path: policy.path,
+        language: policy.language,
+      })),
+    };
+    const fullTextIndexes: FullTextIndex[] = fullTextPathData.map((policy) => ({
+      path: policy.path,
+    }));
+    const validationPassed = fullTextPathData.every((policy: FullTextPolicyData) => policy.pathError === "");
+    onFullTextPathChange(newFullTextPolicy, fullTextIndexes, validationPassed);
+  };
+
+  const onFullTextPathValueChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value.trim();
+    const fullTextPaths = [...fullTextPathData];
+    if (!fullTextPaths[index]?.path && !value.startsWith("/")) {
+      fullTextPaths[index].path = "/" + value;
+    } else {
+      fullTextPaths[index].path = value;
+    }
+    fullTextPaths[index].pathError = getFullTextPathError(value, index);
+    setFullTextPathData(fullTextPaths);
+  };
+
+  const onFullTextPathPolicyChange = (index: number, option: IDropdownOption): void => {
+    const policies = [...fullTextPathData];
+    policies[index].language = option.key as never;
+    setFullTextPathData(policies);
+  };
+
+  const onAdd = () => {
+    setFullTextPathData([
+      ...fullTextPathData,
+      {
+        path: "",
+        language: defaultLanguage,
+        pathError: getFullTextPathError(""),
+      },
+    ]);
+  };
+
+  const onDelete = (index: number) => {
+    const policies = fullTextPathData.filter((_uniqueKey, j) => index !== j);
+    setFullTextPathData(policies);
+  };
+
+  return (
+    <Stack tokens={{ childrenGap: 4 }}>
+      <Stack style={{ marginBottom: 10 }}>
+        <Label styles={labelStyles}>Default language</Label>
+        <Dropdown
+          required={true}
+          styles={dropdownStyles}
+          options={getFullTextLanguageOptions()}
+          selectedKey={defaultLanguage}
+          onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+            setDefaultLanguage(option.key as never)
+          }
+        ></Dropdown>
+      </Stack>
+      {fullTextPathData &&
+        fullTextPathData.length > 0 &&
+        fullTextPathData.map((fullTextPolicy: FullTextPolicyData, index: number) => (
+          <CollapsibleSectionComponent
+            key={index}
+            isExpandedByDefault={true}
+            title={`Full text path ${index + 1}`}
+            showDelete={true}
+            onDelete={() => onDelete(index)}
+          >
+            <Stack horizontal tokens={{ childrenGap: 4 }}>
+              <Stack
+                styles={{
+                  root: {
+                    margin: "0 0 6px 20px !important",
+                    paddingLeft: 20,
+                    width: "80%",
+                    borderLeft: "1px solid",
+                  },
+                }}
+              >
+                <Stack>
+                  <Label styles={labelStyles}>Path</Label>
+                  <TextField
+                    id={`full-text-policy-path-${index + 1}`}
+                    required={true}
+                    placeholder="/fullTextPath1"
+                    styles={textFieldStyles}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onFullTextPathValueChange(index, event)}
+                    value={fullTextPolicy.path || ""}
+                    errorMessage={fullTextPolicy.pathError}
+                  />
+                </Stack>
+                <Stack>
+                  <Label styles={labelStyles}>Language</Label>
+                  <Dropdown
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getFullTextLanguageOptions()}
+                    selectedKey={fullTextPolicy.language}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onFullTextPathPolicyChange(index, option)
+                    }
+                  ></Dropdown>
+                </Stack>
+              </Stack>
+            </Stack>
+          </CollapsibleSectionComponent>
+        ))}
+      <DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}>
+        Add full text path
+      </DefaultButton>
+    </Stack>
+  );
+};
+
+export const getFullTextLanguageOptions = (): IDropdownOption[] => {
+  return [
+    {
+      key: "en-US",
+      text: "English (US)",
+    },
+  ];
+};

src/Explorer/Controls/InputDataList/InputDataList.tsx

@@ -0,0 +1,314 @@
+// This component is used to create a dropdown list of options for the user to select from.
+// The options are displayed in a dropdown list when the user clicks on the input field.
+// The user can then select an option from the list. The selected option is then displayed in the input field.
+
+import { getTheme } from "@fluentui/react";
+import {
+  Button,
+  Divider,
+  Input,
+  Link,
+  makeStyles,
+  Popover,
+  PopoverProps,
+  PopoverSurface,
+  PositioningImperativeRef,
+} from "@fluentui/react-components";
+import { ArrowDownRegular, DismissRegular } from "@fluentui/react-icons";
+import { NormalizedEventKey } from "Common/Constants";
+import { tokens } from "Explorer/Theme/ThemeUtil";
+import React, { FC, useEffect, useRef } from "react";
+
+const useStyles = makeStyles({
+  container: {
+    padding: 0,
+  },
+  input: {
+    flexGrow: 1,
+    paddingRight: 0,
+    outline: "none",
+    "& input:focus": {
+      outline: "none", // Undo body :focus dashed outline
+    },
+  },
+  inputButton: {
+    border: 0,
+  },
+  dropdownHeader: {
+    width: "100%",
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: 600,
+    padding: `${tokens.spacingVerticalM} 0 0 ${tokens.spacingVerticalM}`,
+  },
+  dropdownStack: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalS,
+    marginTop: tokens.spacingVerticalS,
+    marginBottom: "1px",
+  },
+  dropdownOption: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: 400,
+    justifyContent: "left",
+    padding: `${tokens.spacingHorizontalXS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalXS} ${tokens.spacingHorizontalL}`,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    border: 0,
+    ":hover": {
+      outline: `1px dashed ${tokens.colorNeutralForeground1Hover}`,
+      backgroundColor: tokens.colorNeutralBackground2Hover,
+      color: tokens.colorNeutralForeground1,
+    },
+  },
+  bottomSection: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: 400,
+    padding: `${tokens.spacingHorizontalXS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalXS} ${tokens.spacingHorizontalL}`,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+  },
+});
+
+export interface InputDatalistDropdownOptionSection {
+  label: string;
+  options: string[];
+}
+
+export interface InputDataListProps {
+  dropdownOptions: InputDatalistDropdownOptionSection[];
+  placeholder?: string;
+  title?: string;
+  value: string;
+  onChange: (value: string) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  autofocus?: boolean; // true: acquire focus on first render
+  bottomLink?: {
+    text: string;
+    url: string;
+  };
+}
+
+export const InputDataList: FC<InputDataListProps> = ({
+  dropdownOptions,
+  placeholder,
+  title,
+  value,
+  onChange,
+  onKeyDown,
+  autofocus,
+  bottomLink,
+}) => {
+  const styles = useStyles();
+  const [showDropdown, setShowDropdown] = React.useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const positioningRef = React.useRef<PositioningImperativeRef>(null);
+  const [isInputFocused, setIsInputFocused] = React.useState(autofocus);
+  const [autofocusFirstDropdownItem, setAutofocusFirstDropdownItem] = React.useState(false);
+
+  const theme = getTheme();
+  const itemRefs = useRef([]);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      positioningRef.current?.setTarget(inputRef.current);
+    }
+  }, [inputRef, positioningRef]);
+
+  useEffect(() => {
+    if (isInputFocused) {
+      inputRef.current?.focus();
+    }
+  }, [isInputFocused]);
+
+  useEffect(() => {
+    if (autofocusFirstDropdownItem && showDropdown) {
+      // Autofocus on first item if input isn't focused
+      itemRefs.current[0]?.focus();
+      setAutofocusFirstDropdownItem(false);
+    }
+  }, [autofocusFirstDropdownItem, showDropdown]);
+
+  const handleOpenChange: PopoverProps["onOpenChange"] = (e, data) => {
+    if (isInputFocused && !data.open) {
+      // Don't close if input is focused and we're opening the dropdown (which will steal the focus)
+      return;
+    }
+
+    setShowDropdown(data.open || false);
+    if (data.open) {
+      setIsInputFocused(true);
+    }
+  };
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === NormalizedEventKey.Escape) {
+      setShowDropdown(false);
+    } else if (e.key === NormalizedEventKey.DownArrow) {
+      setShowDropdown(true);
+      setAutofocusFirstDropdownItem(true);
+    }
+    onKeyDown(e);
+  };
+
+  const handleDownDropdownItemKeyDown = (
+    e: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>,
+    index: number,
+  ) => {
+    if (e.key === NormalizedEventKey.Enter) {
+      e.currentTarget.click();
+    } else if (e.key === NormalizedEventKey.Escape) {
+      setShowDropdown(false);
+      inputRef.current?.focus();
+    } else if (e.key === NormalizedEventKey.DownArrow) {
+      if (index + 1 < itemRefs.current.length) {
+        itemRefs.current[index + 1].focus();
+      } else {
+        setIsInputFocused(true);
+      }
+    } else if (e.key === NormalizedEventKey.UpArrow) {
+      if (index - 1 >= 0) {
+        itemRefs.current[index - 1].focus();
+      } else {
+        // Last item, focus back to input
+        setIsInputFocused(true);
+      }
+    }
+  };
+
+  // Flatten dropdownOptions to better manage refs and focus
+  let flatIndex = 0;
+  const indexMap = new Map<string, number>();
+  for (let sectionIndex = 0; sectionIndex < dropdownOptions.length; sectionIndex++) {
+    const section = dropdownOptions[sectionIndex];
+    for (let optionIndex = 0; optionIndex < section.options.length; optionIndex++) {
+      indexMap.set(`${sectionIndex}-${optionIndex}`, flatIndex);
+      flatIndex++;
+    }
+  }
+
+  return (
+    <>
+      <Input
+        id="filterInput"
+        ref={inputRef}
+        type="text"
+        size="small"
+        autoComplete="off"
+        className={`filterInput ${styles.input}`}
+        title={title}
+        placeholder={placeholder}
+        value={value}
+        autoFocus
+        onKeyDown={handleInputKeyDown}
+        onChange={(e) => {
+          const newValue = e.target.value;
+          // Don't show dropdown if there is already a value in the input field (when user is typing)
+          setShowDropdown(!(newValue.length > 0));
+          onChange(newValue);
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        onFocus={() => {
+          // Don't show dropdown if there is already a value in the input field
+          // or isInputFocused is undefined which means component is mounting
+          setShowDropdown(!(value.length > 0) && isInputFocused !== undefined);
+
+          setIsInputFocused(true);
+        }}
+        onBlur={() => {
+          setIsInputFocused(false);
+        }}
+        contentAfter={
+          value.length > 0 ? (
+            <Button
+              aria-label="Clear filter"
+              className={styles.inputButton}
+              size="small"
+              icon={<DismissRegular />}
+              onClick={() => {
+                onChange("");
+                setIsInputFocused(true);
+              }}
+            />
+          ) : (
+            <Button
+              aria-label="Open dropdown"
+              className={styles.inputButton}
+              size="small"
+              icon={<ArrowDownRegular />}
+              onClick={() => {
+                setShowDropdown(true);
+                setAutofocusFirstDropdownItem(true);
+              }}
+            />
+          )
+        }
+      />
+      <Popover
+        inline
+        unstable_disableAutoFocus
+        // trapFocus
+        open={showDropdown}
+        onOpenChange={handleOpenChange}
+        positioning={{ positioningRef, position: "below", align: "start", offset: 4 }}
+      >
+        <PopoverSurface className={styles.container}>
+          {dropdownOptions.map((section, sectionIndex) => (
+            <div key={section.label}>
+              <div className={styles.dropdownHeader} style={{ color: theme.palette.themePrimary }}>
+                {section.label}
+              </div>
+              <div className={styles.dropdownStack}>
+                {section.options.map((option, index) => (
+                  <Button
+                    key={option}
+                    ref={(el) => (itemRefs.current[indexMap.get(`${sectionIndex}-${index}`)] = el)}
+                    appearance="transparent"
+                    shape="square"
+                    className={styles.dropdownOption}
+                    onClick={() => {
+                      onChange(option);
+                      setShowDropdown(false);
+                      setIsInputFocused(true);
+                    }}
+                    onBlur={() =>
+                      !bottomLink &&
+                      sectionIndex === dropdownOptions.length - 1 &&
+                      index === section.options.length - 1 &&
+                      setShowDropdown(false)
+                    }
+                    onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) =>
+                      handleDownDropdownItemKeyDown(e, indexMap.get(`${sectionIndex}-${index}`))
+                    }
+                  >
+                    {option}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          ))}
+          {bottomLink && (
+            <>
+              <Divider />
+              <div className={styles.bottomSection}>
+                <Link
+                  ref={(el) => (itemRefs.current[flatIndex] = el)}
+                  href={bottomLink.url}
+                  target="_blank"
+                  onBlur={() => setShowDropdown(false)}
+                  onKeyDown={(e: React.KeyboardEvent<HTMLAnchorElement>) => handleDownDropdownItemKeyDown(e, flatIndex)}
+                >
+                  {bottomLink.text}
+                </Link>
+              </div>
+            </>
+          )}
+        </PopoverSurface>
+      </Popover>
+    </>
+  );
+};

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.test.tsx

@@ -1,5 +1,10 @@
+import { IndexingPolicy } from "@azure/cosmos";
+import { act } from "@testing-library/react";
+import { AuthType } from "AuthType";
 import { shallow } from "enzyme";
+import { useIndexingPolicyStore } from "Explorer/Tabs/QueryTab/ResultsView";
 import ko from "knockout";
+import { Features } from "Platform/Hosted/extractFeatures";
 import React from "react";
 import { updateCollection } from "../../../Common/dataAccess/updateCollection";
 import { updateOffer } from "../../../Common/dataAccess/updateOffer";
@@ -247,4 +252,86 @@ describe("SettingsComponent", () => {
     expect(conflictResolutionPolicy.mode).toEqual(DataModels.ConflictResolutionMode.Custom);
     expect(conflictResolutionPolicy.conflictResolutionProcedure).toEqual(expectSprocPath);
   });
+
+  it("should save throughput bucket changes when Save button is clicked", async () => {
+    updateUserContext({
+      apiType: "SQL",
+      features: { enableThroughputBuckets: true } as Features,
+      authType: AuthType.AAD,
+    });
+
+    const wrapper = shallow(<SettingsComponent {...baseProps} />);
+
+    const settingsComponentInstance = wrapper.instance() as SettingsComponent;
+    const isEnabled = settingsComponentInstance["throughputBucketsEnabled"];
+    expect(isEnabled).toBe(true);
+
+    wrapper.setState({
+      isThroughputBucketsSaveable: true,
+      throughputBuckets: [
+        { id: 1, maxThroughputPercentage: 70 },
+        { id: 2, maxThroughputPercentage: 60 },
+      ],
+    });
+
+    await settingsComponentInstance.onSaveClick();
+
+    expect(updateOffer).toHaveBeenCalledWith({
+      databaseId: collection.databaseId,
+      collectionId: collection.id(),
+      currentOffer: expect.any(Object),
+      autopilotThroughput: collection.offer().autoscaleMaxThroughput,
+      manualThroughput: collection.offer().manualThroughput,
+      throughputBuckets: [
+        { id: 1, maxThroughputPercentage: 70 },
+        { id: 2, maxThroughputPercentage: 60 },
+      ],
+    });
+
+    expect(wrapper.state("isThroughputBucketsSaveable")).toBe(false);
+  });
+});
+
+describe("SettingsComponent - indexing policy subscription", () => {
+  const baseProps: SettingsComponentProps = {
+    settingsTab: new CollectionSettingsTabV2({
+      collection: collection,
+      tabKind: ViewModels.CollectionTabKind.CollectionSettingsV2,
+      title: "Scale & Settings",
+      tabPath: "",
+      node: undefined,
+    }),
+  };
+
+  it("subscribes to the correct container's indexing policy and updates state on change", async () => {
+    const containerId = collection.id();
+    const mockIndexingPolicy: IndexingPolicy = {
+      automatic: false,
+      indexingMode: "lazy",
+      includedPaths: [{ path: "/foo/*" }],
+      excludedPaths: [{ path: "/bar/*" }],
+      compositeIndexes: [],
+      spatialIndexes: [],
+      vectorIndexes: [],
+      fullTextIndexes: [],
+    };
+
+    const wrapper = shallow(<SettingsComponent {...baseProps} />);
+    const instance = wrapper.instance() as SettingsComponent;
+
+    await act(async () => {
+      useIndexingPolicyStore.setState({
+        indexingPolicies: {
+          [containerId]: mockIndexingPolicy,
+        },
+      });
+    });
+
+    wrapper.update();
+
+    expect(wrapper.state("indexingPolicyContent")).toEqual(mockIndexingPolicy);
+    expect(wrapper.state("indexingPolicyContentBaseline")).toEqual(mockIndexingPolicy);
+    // @ts-expect-error: rawDataModel is intentionally accessed for test validation
+    expect(instance.collection.rawDataModel.indexingPolicy).toEqual(mockIndexingPolicy);
+  });
 });

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,14 +1,19 @@
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
+import { IPivotItemProps, IPivotProps, Pivot, PivotItem, Stack, getTheme } from "@fluentui/react";
 import {
   ComputedPropertiesComponent,
   ComputedPropertiesComponentProps,
 } from "Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent";
 import {
-  ContainerVectorPolicyComponent,
-  ContainerVectorPolicyComponentProps,
-} from "Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent";
+  ContainerPolicyComponent,
+  ContainerPolicyComponentProps,
+} from "Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent";
+import {
+  ThroughputBucketsComponent,
+  ThroughputBucketsComponentProps,
+} from "Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent";
+import { useIndexingPolicyStore } from "Explorer/Tabs/QueryTab/ResultsView";
 import { useDatabases } from "Explorer/useDatabases";
-import { isVectorSearchEnabled } from "Utils/CapabilityUtils";
+import { isFullTextSearchEnabled, isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { isRunningOnPublicCloud } from "Utils/CloudUtils";
 import * as React from "react";
 import DiscardIcon from "../../../../images/discard.svg";
@@ -61,7 +66,6 @@ import {
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
 } from "./SettingsUtils";
-
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
   content: JSX.Element;
@@ -86,6 +90,8 @@ export interface SettingsComponentState {
   wasAutopilotOriginallySet: boolean;
   isScaleSaveable: boolean;
   isScaleDiscardable: boolean;
+  throughputBuckets: DataModels.ThroughputBucket[];
+  throughputBucketsBaseline: DataModels.ThroughputBucket[];
   throughputError: string;
 
   timeToLive: TtlType;
@@ -104,6 +110,14 @@ export interface SettingsComponentState {
   changeFeedPolicyBaseline: ChangeFeedPolicyState;
   isSubSettingsSaveable: boolean;
   isSubSettingsDiscardable: boolean;
+  isThroughputBucketsSaveable: boolean;
+
+  vectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy;
+  vectorEmbeddingPolicyBaseline: DataModels.VectorEmbeddingPolicy;
+  fullTextPolicy: DataModels.FullTextPolicy;
+  fullTextPolicyBaseline: DataModels.FullTextPolicy;
+  shouldDiscardContainerPolicies: boolean;
+  isContainerPolicyDirty: boolean;
 
   indexingPolicyContent: DataModels.IndexingPolicy;
   indexingPolicyContentBaseline: DataModels.IndexingPolicy;
@@ -149,9 +163,11 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private shouldShowIndexingPolicyEditor: boolean;
   private shouldShowPartitionKeyEditor: boolean;
   private isVectorSearchEnabled: boolean;
+  private isFullTextSearchEnabled: boolean;
   private totalThroughputUsed: number;
+  private throughputBucketsEnabled: boolean;
   public mongoDBCollectionResource: MongoDBCollectionResource;
-
+  private unsubscribe: () => void;
   constructor(props: SettingsComponentProps) {
     super(props);
 
@@ -164,8 +180,13 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.shouldShowIndexingPolicyEditor = userContext.apiType !== "Cassandra" && userContext.apiType !== "Mongo";
       this.shouldShowPartitionKeyEditor = userContext.apiType === "SQL" && isRunningOnPublicCloud();
       this.isVectorSearchEnabled = isVectorSearchEnabled() && !hasDatabaseSharedThroughput(this.collection);
+      this.isFullTextSearchEnabled = isFullTextSearchEnabled() && !hasDatabaseSharedThroughput(this.collection);
 
       this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
+      this.throughputBucketsEnabled =
+        userContext.apiType === "SQL" &&
+        userContext.features.enableThroughputBuckets &&
+        userContext.authType === AuthType.AAD;
 
       // Mongo container with system partition key still treat as "Fixed"
       this.isFixedContainer =
@@ -184,6 +205,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       wasAutopilotOriginallySet: false,
       isScaleSaveable: false,
       isScaleDiscardable: false,
+      throughputBuckets: undefined,
+      throughputBucketsBaseline: undefined,
       throughputError: undefined,
 
       timeToLive: undefined,
@@ -202,6 +225,14 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       changeFeedPolicyBaseline: undefined,
       isSubSettingsSaveable: false,
       isSubSettingsDiscardable: false,
+      isThroughputBucketsSaveable: false,
+
+      vectorEmbeddingPolicy: undefined,
+      vectorEmbeddingPolicyBaseline: undefined,
+      fullTextPolicy: undefined,
+      fullTextPolicyBaseline: undefined,
+      shouldDiscardContainerPolicies: false,
+      isContainerPolicyDirty: false,
 
       indexingPolicyContent: undefined,
       indexingPolicyContentBaseline: undefined,
@@ -267,8 +298,19 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     if (this.props.settingsTab.isActive()) {
       useCommandBar.getState().setContextButtons(this.getTabsButtons());
     }
+    this.unsubscribe = useIndexingPolicyStore.subscribe(
+      () => {
+        this.refreshCollectionData();
+      },
+      (state) => state.indexingPolicies[this.collection.id()],
+    );
+    this.refreshCollectionData();
+  }
+  componentWillUnmount(): void {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
   }
-
   componentDidUpdate(): void {
     if (this.props.settingsTab.isActive()) {
       useCommandBar.getState().setContextButtons(this.getTabsButtons());
@@ -307,10 +349,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     return (
       this.state.isScaleSaveable ||
       this.state.isSubSettingsSaveable ||
+      this.state.isContainerPolicyDirty ||
       this.state.isIndexingPolicyDirty ||
       this.state.isConflictResolutionDirty ||
       this.state.isComputedPropertiesDirty ||
-      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicySaveable)
+      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicySaveable) ||
+      this.state.isThroughputBucketsSaveable
     );
   };
 
@@ -318,10 +362,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     return (
       this.state.isScaleDiscardable ||
       this.state.isSubSettingsDiscardable ||
+      this.state.isContainerPolicyDirty ||
       this.state.isIndexingPolicyDirty ||
       this.state.isConflictResolutionDirty ||
       this.state.isComputedPropertiesDirty ||
-      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicyDiscardable)
+      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicyDiscardable) ||
+      this.state.isThroughputBucketsSaveable
     );
   };
 
@@ -401,10 +447,14 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
     this.setState({
       throughput: this.state.throughputBaseline,
+      throughputBuckets: this.state.throughputBucketsBaseline,
+      throughputBucketsBaseline: this.state.throughputBucketsBaseline,
       timeToLive: this.state.timeToLiveBaseline,
       timeToLiveSeconds: this.state.timeToLiveSecondsBaseline,
       displayedTtlSeconds: this.state.displayedTtlSecondsBaseline,
       geospatialConfigType: this.state.geospatialConfigTypeBaseline,
+      vectorEmbeddingPolicy: this.state.vectorEmbeddingPolicyBaseline,
+      fullTextPolicy: this.state.fullTextPolicyBaseline,
       indexingPolicyContent: this.state.indexingPolicyContentBaseline,
       indexesToAdd: [],
       indexesToDrop: [],
@@ -416,11 +466,14 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       changeFeedPolicy: this.state.changeFeedPolicyBaseline,
       autoPilotThroughput: this.state.autoPilotThroughputBaseline,
       isAutoPilotSelected: this.state.wasAutopilotOriginallySet,
+      shouldDiscardContainerPolicies: true,
       shouldDiscardIndexingPolicy: true,
       isScaleSaveable: false,
       isScaleDiscardable: false,
       isSubSettingsSaveable: false,
+      isThroughputBucketsSaveable: false,
       isSubSettingsDiscardable: false,
+      isContainerPolicyDirty: false,
       isIndexingPolicyDirty: false,
       isMongoIndexingPolicySaveable: false,
       isMongoIndexingPolicyDiscardable: false,
@@ -448,9 +501,21 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private onScaleDiscardableChange = (isScaleDiscardable: boolean): void =>
     this.setState({ isScaleDiscardable: isScaleDiscardable });
 
+  private onVectorEmbeddingPolicyChange = (newVectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy): void =>
+    this.setState({ vectorEmbeddingPolicy: newVectorEmbeddingPolicy });
+
+  private onFullTextPolicyChange = (newFullTextPolicy: DataModels.FullTextPolicy): void =>
+    this.setState({ fullTextPolicy: newFullTextPolicy });
+
   private onIndexingPolicyContentChange = (newIndexingPolicy: DataModels.IndexingPolicy): void =>
     this.setState({ indexingPolicyContent: newIndexingPolicy });
 
+  private onThroughputBucketsSaveableChange = (isSaveable: boolean): void => {
+    this.setState({ isThroughputBucketsSaveable: isSaveable });
+  };
+
+  private resetShouldDiscardContainerPolicies = (): void => this.setState({ shouldDiscardContainerPolicies: false });
+
   private resetShouldDiscardIndexingPolicy = (): void => this.setState({ shouldDiscardIndexingPolicy: false });
 
   private logIndexingPolicySuccessMessage = (): void => {
@@ -538,6 +603,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private onSubSettingsDiscardableChange = (isSubSettingsDiscardable: boolean): void =>
     this.setState({ isSubSettingsDiscardable: isSubSettingsDiscardable });
 
+  private onVectorEmbeddingPolicyDirtyChange = (isVectorEmbeddingPolicyDirty: boolean): void =>
+    this.setState({ isContainerPolicyDirty: isVectorEmbeddingPolicyDirty });
+
+  private onFullTextPolicyDirtyChange = (isFullTextPolicyDirty: boolean): void =>
+    this.setState({ isContainerPolicyDirty: isFullTextPolicyDirty });
+
   private onIndexingPolicyDirtyChange = (isIndexingPolicyDirty: boolean): void =>
     this.setState({ isIndexingPolicyDirty: isIndexingPolicyDirty });
 
@@ -691,6 +762,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     const changeFeedPolicy = this.collection.rawDataModel?.changeFeedPolicy
       ? ChangeFeedPolicyState.On
       : ChangeFeedPolicyState.Off;
+    const vectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy =
+      this.collection.vectorEmbeddingPolicy && this.collection.vectorEmbeddingPolicy();
+    const fullTextPolicy: DataModels.FullTextPolicy =
+      this.collection.fullTextPolicy && this.collection.fullTextPolicy();
     const indexingPolicyContent = this.collection.indexingPolicy();
     const conflictResolutionPolicy: DataModels.ConflictResolutionPolicy =
       this.collection.conflictResolutionPolicy && this.collection.conflictResolutionPolicy();
@@ -708,10 +783,13 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         { name: "name_of_property", query: "query_to_compute_property" },
       ] as DataModels.ComputedProperties;
     }
+    const throughputBuckets = this.offer?.throughputBuckets;
 
     return {
       throughput: offerThroughput,
       throughputBaseline: offerThroughput,
+      throughputBuckets,
+      throughputBucketsBaseline: throughputBuckets,
       changeFeedPolicy: changeFeedPolicy,
       changeFeedPolicyBaseline: changeFeedPolicy,
       timeToLive: timeToLive,
@@ -724,6 +802,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       analyticalStorageTtlSelectionBaseline: analyticalStorageTtlSelection,
       analyticalStorageTtlSeconds: analyticalStorageTtlSeconds,
       analyticalStorageTtlSecondsBaseline: analyticalStorageTtlSeconds,
+      vectorEmbeddingPolicy: vectorEmbeddingPolicy,
+      vectorEmbeddingPolicyBaseline: vectorEmbeddingPolicy,
+      fullTextPolicy: fullTextPolicy,
+      fullTextPolicyBaseline: fullTextPolicy,
       indexingPolicyContent: indexingPolicyContent,
       indexingPolicyContentBaseline: indexingPolicyContent,
       conflictResolutionPolicyMode: conflictResolutionPolicyMode,
@@ -795,6 +877,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     this.setState({ throughput: newThroughput, throughputError });
   };
 
+  private onThroughputBucketChange = (throughputBuckets: DataModels.ThroughputBucket[]): void => {
+    this.setState({ throughputBuckets });
+  };
+
   private onAutoPilotSelected = (isAutoPilotSelected: boolean): void =>
     this.setState({ isAutoPilotSelected: isAutoPilotSelected });
 
@@ -848,12 +934,34 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       startKey,
     );
   };
+  private refreshCollectionData = async (): Promise<void> => {
+    const containerId = this.collection.id();
+    const latestIndexingPolicy = useIndexingPolicyStore.getState().indexingPolicies[containerId];
+    const rawPolicy = latestIndexingPolicy ?? this.collection.indexingPolicy();
+
+    const latestCollection: DataModels.IndexingPolicy = {
+      automatic: rawPolicy?.automatic ?? true,
+      indexingMode: rawPolicy?.indexingMode ?? "consistent",
+      includedPaths: rawPolicy?.includedPaths ?? [],
+      excludedPaths: rawPolicy?.excludedPaths ?? [],
+      compositeIndexes: rawPolicy?.compositeIndexes ?? [],
+      spatialIndexes: rawPolicy?.spatialIndexes ?? [],
+      vectorIndexes: rawPolicy?.vectorIndexes ?? [],
+      fullTextIndexes: rawPolicy?.fullTextIndexes ?? [],
+    };
+
+    this.collection.rawDataModel.indexingPolicy = latestCollection;
+    this.setState({
+      indexingPolicyContent: latestCollection,
+      indexingPolicyContentBaseline: latestCollection,
+    });
+  };
 
   private saveCollectionSettings = async (startKey: number): Promise<void> => {
     const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
-
     if (
       this.state.isSubSettingsSaveable ||
+      this.state.isContainerPolicyDirty ||
       this.state.isIndexingPolicyDirty ||
       this.state.isConflictResolutionDirty ||
       this.state.isComputedPropertiesDirty
@@ -875,6 +983,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       const wasIndexingPolicyModified = this.state.isIndexingPolicyDirty;
       newCollection.defaultTtl = defaultTtl;
 
+      newCollection.vectorEmbeddingPolicy = this.state.vectorEmbeddingPolicy;
+
+      newCollection.fullTextPolicy = this.state.fullTextPolicy;
+
       newCollection.indexingPolicy = this.state.indexingPolicyContent;
 
       newCollection.changeFeedPolicy =
@@ -913,6 +1025,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.collection.changeFeedPolicy(updatedCollection.changeFeedPolicy);
       this.collection.geospatialConfig(updatedCollection.geospatialConfig);
       this.collection.computedProperties(updatedCollection.computedProperties);
+      this.collection.vectorEmbeddingPolicy(updatedCollection.vectorEmbeddingPolicy);
+      this.collection.fullTextPolicy(updatedCollection.fullTextPolicy);
 
       if (wasIndexingPolicyModified) {
         await this.refreshIndexTransformationProgress();
@@ -921,6 +1035,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.setState({
         isSubSettingsSaveable: false,
         isSubSettingsDiscardable: false,
+        isContainerPolicyDirty: false,
         isIndexingPolicyDirty: false,
         isConflictResolutionDirty: false,
         isComputedPropertiesDirty: false,
@@ -977,6 +1092,24 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       }
     }
 
+    if (this.throughputBucketsEnabled && this.state.isThroughputBucketsSaveable) {
+      const updatedOffer: DataModels.Offer = await updateOffer({
+        databaseId: this.collection.databaseId,
+        collectionId: this.collection.id(),
+        currentOffer: this.collection.offer(),
+        autopilotThroughput: this.collection.offer().autoscaleMaxThroughput
+          ? this.collection.offer().autoscaleMaxThroughput
+          : undefined,
+        manualThroughput: this.collection.offer().manualThroughput
+          ? this.collection.offer().manualThroughput
+          : undefined,
+        throughputBuckets: this.state.throughputBuckets,
+      });
+      this.collection.offer(updatedOffer);
+      this.offer = updatedOffer;
+      this.setState({ isThroughputBucketsSaveable: false });
+    }
+
     if (this.state.isScaleSaveable) {
       const updateOfferParams: DataModels.UpdateOfferParams = {
         databaseId: this.collection.databaseId,
@@ -1035,6 +1168,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   };
 
   public render(): JSX.Element {
+    const theme = getTheme();
     const scaleComponentProps: ScaleComponentProps = {
       collection: this.collection,
       database: this.database,
@@ -1052,7 +1186,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onScaleDiscardableChange: this.onScaleDiscardableChange,
       throughputError: this.state.throughputError,
     };
-
     if (!this.isCollectionSettingsTab) {
       return (
         <div className="settingsV2MainContainer">
@@ -1091,6 +1224,21 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onSubSettingsDiscardableChange: this.onSubSettingsDiscardableChange,
     };
 
+    const containerPolicyComponentProps: ContainerPolicyComponentProps = {
+      vectorEmbeddingPolicy: this.state.vectorEmbeddingPolicy,
+      vectorEmbeddingPolicyBaseline: this.state.vectorEmbeddingPolicyBaseline,
+      onVectorEmbeddingPolicyChange: this.onVectorEmbeddingPolicyChange,
+      onVectorEmbeddingPolicyDirtyChange: this.onVectorEmbeddingPolicyDirtyChange,
+      isVectorSearchEnabled: this.isVectorSearchEnabled,
+      fullTextPolicy: this.state.fullTextPolicy,
+      fullTextPolicyBaseline: this.state.fullTextPolicyBaseline,
+      onFullTextPolicyChange: this.onFullTextPolicyChange,
+      onFullTextPolicyDirtyChange: this.onFullTextPolicyDirtyChange,
+      isFullTextSearchEnabled: this.isFullTextSearchEnabled,
+      shouldDiscardContainerPolicies: this.state.shouldDiscardContainerPolicies,
+      resetShouldDiscardContainerPolicyChange: this.resetShouldDiscardContainerPolicies,
+    };
+
     const indexingPolicyComponentProps: IndexingPolicyComponentProps = {
       shouldDiscardIndexingPolicy: this.state.shouldDiscardIndexingPolicy,
       resetShouldDiscardIndexingPolicy: this.resetShouldDiscardIndexingPolicy,
@@ -1142,16 +1290,19 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onConflictResolutionDirtyChange: this.onConflictResolutionDirtyChange,
     };
 
+    const throughputBucketsComponentProps: ThroughputBucketsComponentProps = {
+      currentBuckets: this.state.throughputBuckets,
+      throughputBucketsBaseline: this.state.throughputBucketsBaseline,
+      onBucketsChange: this.onThroughputBucketChange,
+      onSaveableChange: this.onThroughputBucketsSaveableChange,
+    };
+
     const partitionKeyComponentProps: PartitionKeyComponentProps = {
       database: useDatabases.getState().findDatabaseWithId(this.collection.databaseId),
       collection: this.collection,
       explorer: this.props.settingsTab.getContainer(),
     };
 
-    const containerVectorPolicyProps: ContainerVectorPolicyComponentProps = {
-      vectorEmbeddingPolicy: this.collection.rawDataModel?.vectorEmbeddingPolicy,
-    };
-
     const tabs: SettingsV2TabInfo[] = [];
     if (!hasDatabaseSharedThroughput(this.collection) && this.offer) {
       tabs.push({
@@ -1165,10 +1316,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       content: <SubSettingsComponent {...subSettingsComponentProps} />,
     });
 
-    if (this.isVectorSearchEnabled) {
+    if (this.isVectorSearchEnabled || this.isFullTextSearchEnabled) {
       tabs.push({
         tab: SettingsV2TabTypes.ContainerVectorPolicyTab,
-        content: <ContainerVectorPolicyComponent {...containerVectorPolicyProps} />,
+        content: <ContainerPolicyComponent {...containerPolicyComponentProps} />,
       });
     }
 
@@ -1208,33 +1359,113 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       });
     }
 
+    if (this.throughputBucketsEnabled) {
+      tabs.push({
+        tab: SettingsV2TabTypes.ThroughputBucketsTab,
+        content: <ThroughputBucketsComponent {...throughputBucketsComponentProps} />,
+      });
+    }
+
     const pivotProps: IPivotProps = {
       onLinkClick: this.onPivotChange,
       selectedKey: SettingsV2TabTypes[this.state.selectedTab],
     };
 
-    const pivotItems = tabs.map((tab) => {
-      const pivotItemProps: IPivotItemProps = {
-        itemKey: SettingsV2TabTypes[tab.tab],
-        style: { marginTop: 20 },
-        headerText: getTabTitle(tab.tab),
-      };
-
-      return (
-        <PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
-          {tab.content}
-        </PivotItem>
-      );
-    });
+    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 (
-      <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),
+              };
+
+              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";
 
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "var(--colorNeutralForeground1)" } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
   label: {
@@ -166,7 +166,7 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
 };
 
 export const messageBarStyles: Partial<IMessageBarStyles> = {
-  root: { marginTop: "5px", backgroundColor: "white" },
+  root: { marginTop: "5px", backgroundColor: "var(--colorNeutralBackground1)" },
   text: { fontSize: 14 },
 };
 
@@ -214,9 +214,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>}
@@ -230,7 +232,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>
@@ -272,7 +274,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.
@@ -290,7 +292,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>
@@ -326,7 +328,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>
@@ -507,11 +509,25 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
     height: 25,
     width: 300,
     borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
+    backgroundColor: "var(--colorNeutralBackground3)",
     selectors: {
       ":disabled": {
-        backgroundColor: StyleConstants.BaseMedium,
+        backgroundColor: "var(--colorNeutralBackground1)",
         borderColor: StyleConstants.BaseMediumHigh,
       },
+      "input:disabled": {
+        backgroundColor: "var(--colorNeutralBackground3)",
+      },
+    },
+    field: {
+      color: "var(--colorNeutralForeground1)",
+    },
+  },
+  subComponentStyles: {
+    label: {
+      root: {
+        color: "var(--colorNeutralForeground1)",
+      },
     },
   },
 });
@@ -521,6 +537,9 @@ export const getChoiceGroupStyles = (
   baseline: isDirtyTypes,
   isHorizontal?: boolean,
 ): Partial<IChoiceGroupStyles> => ({
+  label: {
+    color: "var(--colorNeutralForeground1)",
+  },
   flexContainer: [
     {
       selectors: {
@@ -535,6 +554,7 @@ export const getChoiceGroupStyles = (
           fontSize: 14,
           fontFamily: StyleConstants.DataExplorerFont,
           padding: "2px 5px",
+          color: "var(--colorNeutralForeground1)",
         },
       },
       display: isHorizontal ? "inline-flex" : "default",

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

@@ -3,9 +3,9 @@ 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 } from "hooks/useTheme";
 import * as monaco from "monaco-editor";
 import * as React from "react";
-
 export interface ComputedPropertiesComponentProps {
   computedPropertiesContent: DataModels.ComputedProperties;
   computedPropertiesContentBaseline: DataModels.ComputedProperties;
@@ -86,6 +86,7 @@ export class ComputedPropertiesComponent extends React.Component<
       value: value,
       language: "json",
       ariaLabel: "Computed properties",
+      theme:monacoTheme,
     });
     if (this.computedPropertiesEditor) {
       const computedPropertiesEditorModel = this.computedPropertiesEditor.getModel();

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

@@ -0,0 +1,6 @@
+import "@testing-library/jest-dom";
+
+describe("ContainerPolicyComponent", () => {
+  //CTODO: add tests
+  it.skip("should render correctly", () => {});
+});

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

@@ -0,0 +1,163 @@
+import { DefaultButton, Pivot, PivotItem, Stack } from "@fluentui/react";
+import { FullTextPolicy, VectorEmbedding, VectorEmbeddingPolicy } from "Contracts/DataModels";
+import {
+  FullTextPoliciesComponent,
+  getFullTextLanguageOptions,
+} from "Explorer/Controls/FullTextSeach/FullTextPoliciesComponent";
+import { titleAndInputStackProps } from "Explorer/Controls/Settings/SettingsRenderUtils";
+import { ContainerPolicyTabTypes, isDirty } from "Explorer/Controls/Settings/SettingsUtils";
+import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
+import React from "react";
+
+export interface ContainerPolicyComponentProps {
+  vectorEmbeddingPolicy: VectorEmbeddingPolicy;
+  vectorEmbeddingPolicyBaseline: VectorEmbeddingPolicy;
+  onVectorEmbeddingPolicyChange: (newVectorEmbeddingPolicy: VectorEmbeddingPolicy) => void;
+  onVectorEmbeddingPolicyDirtyChange: (isVectorEmbeddingPolicyDirty: boolean) => void;
+  isVectorSearchEnabled: boolean;
+  fullTextPolicy: FullTextPolicy;
+  fullTextPolicyBaseline: FullTextPolicy;
+  onFullTextPolicyChange: (newFullTextPolicy: FullTextPolicy) => void;
+  onFullTextPolicyDirtyChange: (isFullTextPolicyDirty: boolean) => void;
+  isFullTextSearchEnabled: boolean;
+  shouldDiscardContainerPolicies: boolean;
+  resetShouldDiscardContainerPolicyChange: () => void;
+}
+
+export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> = ({
+  vectorEmbeddingPolicy,
+  vectorEmbeddingPolicyBaseline,
+  onVectorEmbeddingPolicyChange,
+  onVectorEmbeddingPolicyDirtyChange,
+  isVectorSearchEnabled,
+  fullTextPolicy,
+  fullTextPolicyBaseline,
+  onFullTextPolicyChange,
+  onFullTextPolicyDirtyChange,
+  isFullTextSearchEnabled,
+  shouldDiscardContainerPolicies,
+  resetShouldDiscardContainerPolicyChange,
+}) => {
+  const [selectedTab, setSelectedTab] = React.useState<ContainerPolicyTabTypes>(
+    ContainerPolicyTabTypes.VectorPolicyTab,
+  );
+  const [vectorEmbeddings, setVectorEmbeddings] = React.useState<VectorEmbedding[]>();
+  const [vectorEmbeddingsBaseline, setVectorEmbeddingsBaseline] = React.useState<VectorEmbedding[]>();
+  const [discardVectorChanges, setDiscardVectorChanges] = React.useState<boolean>(false);
+  const [fullTextSearchPolicy, setFullTextSearchPolicy] = React.useState<FullTextPolicy>();
+  const [fullTextSearchPolicyBaseline, setFullTextSearchPolicyBaseline] = React.useState<FullTextPolicy>();
+  const [discardFullTextChanges, setDiscardFullTextChanges] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    setVectorEmbeddings(vectorEmbeddingPolicy?.vectorEmbeddings);
+    setVectorEmbeddingsBaseline(vectorEmbeddingPolicyBaseline?.vectorEmbeddings);
+  }, [vectorEmbeddingPolicy]);
+
+  React.useEffect(() => {
+    setFullTextSearchPolicy(fullTextPolicy);
+    setFullTextSearchPolicyBaseline(fullTextPolicyBaseline);
+  }, [fullTextPolicy, fullTextPolicyBaseline]);
+
+  React.useEffect(() => {
+    if (shouldDiscardContainerPolicies) {
+      setVectorEmbeddings(vectorEmbeddingPolicyBaseline?.vectorEmbeddings);
+      setDiscardVectorChanges(true);
+      setFullTextSearchPolicy(fullTextPolicyBaseline);
+      setDiscardFullTextChanges(true);
+      resetShouldDiscardContainerPolicyChange();
+    }
+  });
+
+  const checkAndSendVectorEmbeddingPoliciesToSettings = (newVectorEmbeddings: VectorEmbedding[]): void => {
+    if (isDirty(newVectorEmbeddings, vectorEmbeddingsBaseline)) {
+      onVectorEmbeddingPolicyDirtyChange(true);
+      onVectorEmbeddingPolicyChange({ vectorEmbeddings: newVectorEmbeddings });
+    } else {
+      resetShouldDiscardContainerPolicyChange();
+    }
+  };
+
+  const checkAndSendFullTextPolicyToSettings = (newFullTextPolicy: FullTextPolicy): void => {
+    if (isDirty(newFullTextPolicy, fullTextSearchPolicyBaseline)) {
+      onFullTextPolicyDirtyChange(true);
+      onFullTextPolicyChange(newFullTextPolicy);
+    } else {
+      resetShouldDiscardContainerPolicyChange();
+    }
+  };
+
+  const onVectorChangesDiscarded = (): void => {
+    setDiscardVectorChanges(false);
+  };
+
+  const onFullTextChangesDiscarded = (): void => {
+    setDiscardFullTextChanges(false);
+  };
+
+  const onPivotChange = (item: PivotItem): void => {
+    const selectedTab = ContainerPolicyTabTypes[item.props.itemKey as keyof typeof ContainerPolicyTabTypes];
+    setSelectedTab(selectedTab);
+  };
+
+  return (
+    <div>
+      <Pivot onLinkClick={onPivotChange} selectedKey={ContainerPolicyTabTypes[selectedTab]}>
+        {isVectorSearchEnabled && (
+          <PivotItem
+            itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.VectorPolicyTab]}
+            style={{ marginTop: 20 }}
+            headerText="Vector Policy"
+          >
+            <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
+              {vectorEmbeddings && (
+                <VectorEmbeddingPoliciesComponent
+                  disabled={true}
+                  vectorEmbeddings={vectorEmbeddings}
+                  vectorIndexes={undefined}
+                  onVectorEmbeddingChange={(vectorEmbeddings: VectorEmbedding[]) =>
+                    checkAndSendVectorEmbeddingPoliciesToSettings(vectorEmbeddings)
+                  }
+                  discardChanges={discardVectorChanges}
+                  onChangesDiscarded={onVectorChangesDiscarded}
+                />
+              )}
+            </Stack>
+          </PivotItem>
+        )}
+        {isFullTextSearchEnabled && (
+          <PivotItem
+            itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.FullTextPolicyTab]}
+            style={{ marginTop: 20 }}
+            headerText="Full Text Policy"
+          >
+            <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
+              {fullTextSearchPolicy ? (
+                <FullTextPoliciesComponent
+                  fullTextPolicy={fullTextSearchPolicy}
+                  onFullTextPathChange={(newFullTextPolicy: FullTextPolicy) =>
+                    checkAndSendFullTextPolicyToSettings(newFullTextPolicy)
+                  }
+                  discardChanges={discardFullTextChanges}
+                  onChangesDiscarded={onFullTextChangesDiscarded}
+                />
+              ) : (
+                <DefaultButton
+                  id={"create-full-text-policy"}
+                  styles={{ root: { fontSize: 12 } }}
+                  onClick={() => {
+                    checkAndSendFullTextPolicyToSettings({
+                      defaultLanguage: getFullTextLanguageOptions()[0].key as never,
+                      fullTextPaths: [],
+                    });
+                  }}
+                >
+                  Create new full text search policy
+                </DefaultButton>
+              )}
+            </Stack>
+          </PivotItem>
+        )}
+      </Pivot>
+    </div>
+  );
+};

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

@@ -1,30 +0,0 @@
-import { Stack } from "@fluentui/react";
-import { VectorEmbeddingPolicy } from "Contracts/DataModels";
-import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
-import { titleAndInputStackProps } from "Explorer/Controls/Settings/SettingsRenderUtils";
-import React from "react";
-
-export interface ContainerVectorPolicyComponentProps {
-  vectorEmbeddingPolicy: VectorEmbeddingPolicy;
-}
-
-export const ContainerVectorPolicyComponent: React.FC<ContainerVectorPolicyComponentProps> = ({
-  vectorEmbeddingPolicy,
-}) => {
-  return (
-    <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative" } }}>
-      <EditorReact
-        language={"json"}
-        content={JSON.stringify(vectorEmbeddingPolicy || {}, null, 4)}
-        isReadOnly={true}
-        wordWrap={"on"}
-        ariaLabel={"Container vector policy"}
-        lineNumbers={"on"}
-        scrollBeyondLastLine={false}
-        className={"settingsV2Editor"}
-        spinnerClassName={"settingsV2EditorSpinner"}
-        fontSize={14}
-      />
-    </Stack>
-  );
-};

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

@@ -1,4 +1,5 @@
 import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import { monacoTheme } 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;
@@ -87,20 +87,71 @@ 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();
-    this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
-      value: value,
-      language: "json",
-      readOnly: isIndexTransforming(this.props.indexTransformationProgress),
-      ariaLabel: "Indexing Policy",
-    });
-    if (this.indexingPolicyEditor) {
-      const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
-      indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
-      this.props.logIndexingPolicySuccessMessage();
+    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) {
+        const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
+        indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
+        this.props.logIndexingPolicySuccessMessage();
+      }
     }
   }
+//   private async createIndexingPolicyEditor(): Promise<void> {
+//   const isDarkMode = true;
+//   const monacoThemeName = "fluent-theme";
+
+//   if (!this.indexingPolicyDiv.current) return;
+
+//   const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
+//   const monaco = await loadMonaco();
+
+//   // Safely get Fluent UI theme colors
+//   const bodyStyles = getComputedStyle(document.body);
+//   const backgroundColor = bodyStyles.getPropertyValue("--colorNeutralBackground1").trim() || "#1b1a19";
+//   const foregroundColor = bodyStyles.getPropertyValue("--colorNeutralForeground1").trim() || "#ffffff";
+
+//   // Define Monaco theme using Fluent UI colors
+//   monaco.editor.defineTheme(monacoThemeName, {
+//     base: isDarkMode ? "vs-dark" : "vs",
+//     inherit: true,
+//     rules: [],
+//     colors: {
+//       "editor.background": backgroundColor,
+//       "editor.foreground": foregroundColor,
+//       "editorCursor.foreground": "#ffcc00",
+//       "editorLineNumber.foreground": "#aaaaaa",
+//       "editor.selectionBackground": "#666666",
+//       "editor.lineHighlightBackground": "#333333"
+//     }
+//   });
+
+//   // Create the editor with the custom theme
+//   this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
+//     value,
+//     language: "json",
+//     readOnly: isIndexTransforming(this.props.indexTransformationProgress),
+//     ariaLabel: "Indexing Policy",
+//     theme: monacoThemeName
+//   });
+
+//   if (this.indexingPolicyEditor) {
+//     const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
+//     indexingPolicyEditorModel?.onDidChangeContent(this.onEditorContentChange.bind(this));
+//     this.props.logIndexingPolicySuccessMessage();
+//   }
+// }
+
 
   private onEditorContentChange = (): void => {
     const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
@@ -120,11 +171,6 @@ export class IndexingPolicyComponent extends React.Component<
           indexTransformationProgress={this.props.indexTransformationProgress}
           refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
         />
-        {this.props.isVectorSearchEnabled && (
-          <MessageBar messageBarType={MessageBarType.severeWarning}>
-            Container vector policies and vector indexes are not modifiable after container creation
-          </MessageBar>
-        )}
         {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
           <MessageBar messageBarType={MessageBarType.warning}>{unsavedEditorWarningMessage("indexPolicy")}</MessageBar>
         )}

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx

@@ -1,10 +1,10 @@
-import * as React from "react";
 import { MessageBar, MessageBarType } from "@fluentui/react";
+import * as React from "react";
+import { handleError } from "../../../../../Common/ErrorHandlingUtils";
 import {
   mongoIndexTransformationRefreshingMessage,
   renderMongoIndexTransformationRefreshMessage,
 } from "../../SettingsRenderUtils";
-import { handleError } from "../../../../../Common/ErrorHandlingUtils";
 import { isIndexTransforming } from "../../SettingsUtils";
 
 export interface IndexingPolicyRefreshComponentProps {

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

@@ -14,6 +14,7 @@ import * as ViewModels from "../../../../Contracts/ViewModels";
 
 import { handleError } from "Common/ErrorHandlingUtils";
 import { cancelDataTransferJob, pollDataTransferJob } from "Common/dataAccess/dataTransfers";
+import { Platform, configContext } from "ConfigContext";
 import Explorer from "Explorer/Explorer";
 import { ChangePartitionKeyPane } from "Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane";
 import {
@@ -55,13 +56,15 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
   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;
@@ -157,8 +160,8 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
             <Text styles={textSubHeadingStyle}>Partitioning</Text>
           </Stack>
           <Stack tokens={{ childrenGap: 5 }}>
-            <Text>{partitionKeyValue}</Text>
-            <Text>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
+            <Text styles={textSubHeadingStyle1}>{partitionKeyValue}</Text>
+            <Text styles={textSubHeadingStyle1}>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
           </Stack>
         </Stack>
       </Stack>
@@ -173,16 +176,18 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
           Learn more
         </Link>
       </MessageBar>
-      <Text>
+      <Text styles={textSubHeadingStyle1}>
         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>
-      <PrimaryButton
-        styles={{ root: { width: "fit-content" } }}
-        text="Change"
-        onClick={startPartitionkeyChangeWorkflow}
-        disabled={isCurrentJobInProgress(portalDataTransferJob)}
-      />
+      {configContext.platform !== Platform.Emulator && (
+        <PrimaryButton
+          styles={{ root: { width: "fit-content" } }}
+          text="Change"
+          onClick={startPartitionkeyChangeWorkflow}
+          disabled={isCurrentJobInProgress(portalDataTransferJob)}
+        />
+      )}
       {portalDataTransferJob && (
         <Stack>
           <Text styles={textHeadingStyle}>{partitionKeyName} change job</Text>

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

@@ -1,4 +1,4 @@
-import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react";
+import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField, getTheme, mergeStyleSets } from "@fluentui/react";
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import { userContext } from "../../../../UserContext";
@@ -25,6 +25,13 @@ import {
 } from "../SettingsUtils";
 import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 
+const theme = getTheme();
+
+const classNames = mergeStyleSets({
+  hintText: {
+    color: 'var(--colorNeutralForeground1)', // theme-aware
+  },
+});
 export interface SubSettingsComponentProps {
   collection: ViewModels.Collection;
   timeToLive: TtlType;
@@ -181,7 +188,19 @@ 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: theme.semanticColors.bodyText,
+          },
+          icon: {
+            color: theme.semanticColors.bodyText,
+          },
+        }}
       >
         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">
@@ -191,7 +210,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
       </MessageBar>
     ) : (
       <Stack {...titleAndInputStackProps}>
-        <ChoiceGroup
+        <ChoiceGroup  
           id="timeToLive"
           label="Time to Live"
           selectedKey={this.props.timeToLive}
@@ -323,14 +342,14 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
       )}
 
       {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>Non-hierarchically partitioned container.</Text>
+          <Text className={classNames.hintText}>Hierarchically partitioned container.</Text>
+      ) : (
+        <Text className={classNames.hintText}>Non-hierarchically partitioned container.</Text>
         ))}
     </Stack>
   );

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

@@ -0,0 +1,177 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { ThroughputBucketsComponent } from "./ThroughputBucketsComponent";
+
+describe("ThroughputBucketsComponent", () => {
+  const mockOnBucketsChange = jest.fn();
+  const mockOnSaveableChange = jest.fn();
+
+  const defaultProps = {
+    currentBuckets: [
+      { id: 1, maxThroughputPercentage: 50 },
+      { id: 2, maxThroughputPercentage: 60 },
+    ],
+    throughputBucketsBaseline: [
+      { id: 1, maxThroughputPercentage: 40 },
+      { id: 2, maxThroughputPercentage: 50 },
+    ],
+    onBucketsChange: mockOnBucketsChange,
+    onSaveableChange: mockOnSaveableChange,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders the correct number of buckets", () => {
+    render(<ThroughputBucketsComponent {...defaultProps} />);
+    expect(screen.getAllByText(/Group \d+/)).toHaveLength(5);
+  });
+
+  it("renders buckets in the correct order even if input is unordered", () => {
+    const unorderedBuckets = [
+      { id: 2, maxThroughputPercentage: 60 },
+      { id: 1, maxThroughputPercentage: 50 },
+    ];
+    render(<ThroughputBucketsComponent {...defaultProps} currentBuckets={unorderedBuckets} />);
+
+    const bucketLabels = screen.getAllByText(/Group \d+/).map((el) => el.textContent);
+    expect(bucketLabels).toEqual(["Group 1 (Data Explorer Query Bucket)", "Group 2", "Group 3", "Group 4", "Group 5"]);
+  });
+
+  it("renders all provided buckets even if they exceed the max default bucket count", () => {
+    const oversizedBuckets = [
+      { id: 1, maxThroughputPercentage: 50 },
+      { id: 2, maxThroughputPercentage: 60 },
+      { id: 3, maxThroughputPercentage: 70 },
+      { id: 4, maxThroughputPercentage: 80 },
+      { id: 5, maxThroughputPercentage: 90 },
+      { id: 6, maxThroughputPercentage: 100 },
+      { id: 7, maxThroughputPercentage: 40 },
+    ];
+
+    render(<ThroughputBucketsComponent {...defaultProps} currentBuckets={oversizedBuckets} />);
+
+    expect(screen.getAllByText(/Group \d+/)).toHaveLength(7);
+
+    expect(screen.getByDisplayValue("50")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("60")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("70")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("80")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("90")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("100")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("40")).toBeInTheDocument();
+  });
+
+  it("calls onBucketsChange when a bucket value changes", () => {
+    render(<ThroughputBucketsComponent {...defaultProps} />);
+    const input = screen.getByDisplayValue("50");
+    fireEvent.change(input, { target: { value: "70" } });
+
+    expect(mockOnBucketsChange).toHaveBeenCalledWith([
+      { id: 1, maxThroughputPercentage: 70 },
+      { id: 2, maxThroughputPercentage: 60 },
+      { id: 3, maxThroughputPercentage: 100 },
+      { id: 4, maxThroughputPercentage: 100 },
+      { id: 5, maxThroughputPercentage: 100 },
+    ]);
+  });
+
+  it("triggers onSaveableChange when values change", () => {
+    render(<ThroughputBucketsComponent {...defaultProps} />);
+    const input = screen.getByDisplayValue("50");
+    fireEvent.change(input, { target: { value: "80" } });
+
+    expect(mockOnSaveableChange).toHaveBeenCalledWith(true);
+  });
+
+  it("updates state consistently after multiple changes to different buckets", () => {
+    render(<ThroughputBucketsComponent {...defaultProps} />);
+
+    const input1 = screen.getByDisplayValue("50");
+    fireEvent.change(input1, { target: { value: "70" } });
+
+    const input2 = screen.getByDisplayValue("60");
+    fireEvent.change(input2, { target: { value: "80" } });
+
+    expect(mockOnBucketsChange).toHaveBeenCalledWith([
+      { id: 1, maxThroughputPercentage: 70 },
+      { id: 2, maxThroughputPercentage: 80 },
+      { id: 3, maxThroughputPercentage: 100 },
+      { id: 4, maxThroughputPercentage: 100 },
+      { id: 5, maxThroughputPercentage: 100 },
+    ]);
+  });
+
+  it("resets to baseline when currentBuckets are reset", () => {
+    const { rerender } = render(<ThroughputBucketsComponent {...defaultProps} />);
+    const input1 = screen.getByDisplayValue("50");
+    fireEvent.change(input1, { target: { value: "70" } });
+
+    rerender(<ThroughputBucketsComponent {...defaultProps} currentBuckets={defaultProps.throughputBucketsBaseline} />);
+
+    expect(screen.getByDisplayValue("40")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("50")).toBeInTheDocument();
+  });
+
+  it("does not call onBucketsChange when value remains unchanged", () => {
+    render(<ThroughputBucketsComponent {...defaultProps} />);
+    const input = screen.getByDisplayValue("50");
+    fireEvent.change(input, { target: { value: "50" } });
+
+    expect(mockOnBucketsChange).not.toHaveBeenCalled();
+  });
+
+  it("disables input and slider when maxThroughputPercentage is 100", () => {
+    render(
+      <ThroughputBucketsComponent
+        {...defaultProps}
+        currentBuckets={[
+          { id: 1, maxThroughputPercentage: 100 },
+          { id: 2, maxThroughputPercentage: 50 },
+        ]}
+      />,
+    );
+
+    const disabledInputs = screen.getAllByDisplayValue("100");
+    expect(disabledInputs.length).toBeGreaterThan(0);
+    expect(disabledInputs[0]).toBeDisabled();
+
+    const sliders = screen.getAllByRole("slider");
+    expect(sliders.length).toBeGreaterThan(0);
+    expect(sliders[0]).toHaveAttribute("aria-disabled", "true");
+    expect(sliders[1]).toHaveAttribute("aria-disabled", "false");
+  });
+
+  it("toggles bucket value between 50 and 100 with switch", () => {
+    render(<ThroughputBucketsComponent {...defaultProps} />);
+    const toggles = screen.getAllByRole("switch");
+
+    fireEvent.click(toggles[0]);
+
+    expect(mockOnBucketsChange).toHaveBeenCalledWith([
+      { id: 1, maxThroughputPercentage: 100 },
+      { id: 2, maxThroughputPercentage: 60 },
+      { id: 3, maxThroughputPercentage: 100 },
+      { id: 4, maxThroughputPercentage: 100 },
+      { id: 5, maxThroughputPercentage: 100 },
+    ]);
+
+    fireEvent.click(toggles[0]);
+
+    expect(mockOnBucketsChange).toHaveBeenCalledWith([
+      { id: 1, maxThroughputPercentage: 50 },
+      { id: 2, maxThroughputPercentage: 60 },
+      { id: 3, maxThroughputPercentage: 100 },
+      { id: 4, maxThroughputPercentage: 100 },
+      { id: 5, maxThroughputPercentage: 100 },
+    ]);
+  });
+
+  it("ensures default buckets are used when no buckets are provided", () => {
+    render(<ThroughputBucketsComponent {...defaultProps} currentBuckets={[]} />);
+    expect(screen.getAllByText(/Group \d+/)).toHaveLength(5);
+    expect(screen.getAllByDisplayValue("100")).toHaveLength(5);
+  });
+});

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

@@ -0,0 +1,105 @@
+import { Label, Slider, Stack, TextField, Toggle } from "@fluentui/react";
+import { ThroughputBucket } from "Contracts/DataModels";
+import React, { FC, useEffect, useState } from "react";
+import { isDirty } from "../../SettingsUtils";
+
+const MAX_BUCKET_SIZES = 5;
+
+const DEFAULT_BUCKETS = Array.from({ length: MAX_BUCKET_SIZES }, (_, i) => ({
+  id: i + 1,
+  maxThroughputPercentage: 100,
+}));
+
+export interface ThroughputBucketsComponentProps {
+  currentBuckets: ThroughputBucket[];
+  throughputBucketsBaseline: ThroughputBucket[];
+  onBucketsChange: (updatedBuckets: ThroughputBucket[]) => void;
+  onSaveableChange: (isSaveable: boolean) => void;
+}
+
+export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = ({
+  currentBuckets,
+  throughputBucketsBaseline,
+  onBucketsChange,
+  onSaveableChange,
+}) => {
+  const getThroughputBuckets = (buckets: ThroughputBucket[]): ThroughputBucket[] => {
+    if (!buckets || buckets.length === 0) {
+      return DEFAULT_BUCKETS;
+    }
+    const maxBuckets = Math.max(DEFAULT_BUCKETS.length, buckets.length);
+    const adjustedDefaultBuckets = Array.from({ length: maxBuckets }, (_, i) => ({
+      id: i + 1,
+      maxThroughputPercentage: 100,
+    }));
+
+    return adjustedDefaultBuckets.map(
+      (defaultBucket) => buckets?.find((bucket) => bucket.id === defaultBucket.id) || defaultBucket,
+    );
+  };
+
+  const [throughputBuckets, setThroughputBuckets] = useState<ThroughputBucket[]>(getThroughputBuckets(currentBuckets));
+
+  useEffect(() => {
+    setThroughputBuckets(getThroughputBuckets(currentBuckets));
+    onSaveableChange(false);
+  }, [currentBuckets]);
+
+  useEffect(() => {
+    const isChanged = isDirty(throughputBuckets, getThroughputBuckets(throughputBucketsBaseline));
+    onSaveableChange(isChanged);
+  }, [throughputBuckets]);
+
+  const handleBucketChange = (id: number, newValue: number) => {
+    const updatedBuckets = throughputBuckets.map((bucket) =>
+      bucket.id === id ? { ...bucket, maxThroughputPercentage: newValue } : bucket,
+    );
+    setThroughputBuckets(updatedBuckets);
+    const settingsChanged = isDirty(updatedBuckets, throughputBuckets);
+    settingsChanged && onBucketsChange(updatedBuckets);
+  };
+
+  const onToggle = (id: number, checked: boolean) => {
+    handleBucketChange(id, checked ? 50 : 100);
+  };
+
+  return (
+    <Stack tokens={{ childrenGap: "m" }} styles={{ root: { width: "70%", maxWidth: 700 } }}>
+      <Label>Throughput Buckets</Label>
+      <Stack>
+        {throughputBuckets?.map((bucket) => (
+          <Stack key={bucket.id} horizontal tokens={{ childrenGap: 8 }} verticalAlign="center">
+            <Slider
+              min={1}
+              max={100}
+              step={1}
+              value={bucket.maxThroughputPercentage}
+              onChange={(newValue) => handleBucketChange(bucket.id, newValue)}
+              showValue={false}
+              label={`Group ${bucket.id}${bucket.id === 1 ? " (Data Explorer Query Bucket)" : ""}`}
+              styles={{ root: { flex: 2, maxWidth: 400 } }}
+              disabled={bucket.maxThroughputPercentage === 100}
+            />
+            <TextField
+              value={bucket.maxThroughputPercentage.toString()}
+              onChange={(event, newValue) => handleBucketChange(bucket.id, parseInt(newValue || "0", 10))}
+              type="number"
+              suffix="%"
+              styles={{
+                fieldGroup: { width: 80 },
+              }}
+              disabled={bucket.maxThroughputPercentage === 100}
+            />
+            <Toggle
+              onText="Active"
+              offText="Inactive"
+              checked={bucket.maxThroughputPercentage !== 100}
+              onChange={(event, checked) => onToggle(bucket.id, checked)}
+              styles={{ root: { marginBottom: 0 }, text: { fontSize: 12 } }}
+            ></Toggle>
+          </Stack>
+        ))}
+      </Stack>
+    </Stack>
+  );
+};

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

@@ -17,14 +17,13 @@ import {
 } from "@fluentui/react";
 import React from "react";
 import * as DataModels from "../../../../../Contracts/DataModels";
-import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
 import * as SharedConstants from "../../../../../Shared/Constants";
 import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../../../../UserContext";
 import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
 import { autoPilotThroughput1K } from "../../../../../Utils/AutoPilotUtils";
-import { calculateEstimateNumber, usageInGB } from "../../../../../Utils/PricingUtils";
+import { calculateEstimateNumber } from "../../../../../Utils/PricingUtils";
 import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
 import {
   PriceBreakdown,
@@ -236,12 +235,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       );
       return (
         <div>
-          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
+          <Text style={{ fontWeight: 600 , color: 'var(--colorNeutralForeground1)' }}>Updated cost per month</Text>
           <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
-            <Text style={{ width: "50%" }}>
+            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)' }}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)} min
             </Text>
-            <Text style={{ width: "50%" }}>
+            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)'}}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)} max
             </Text>
           </Stack>
@@ -254,12 +253,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       return (
         <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
           {newThroughput && newThroughputCostElement()}
-          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
-          <Stack horizontal style={{ marginTop: 5 }}>
-            <Text style={{ width: "50%" }}>
+          <Text style={{ fontWeight: 600, color: 'var(--colorNeutralForeground1)' }}>Current cost per month</Text>
+          <Stack horizontal style={{ marginTop: 5, color: 'var(--colorNeutralForeground1)' }}>
+            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)' }}>
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)} min
             </Text>
-            <Text style={{ width: "50%" }}>
+            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)' }}>
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)} max
             </Text>
           </Stack>
@@ -269,7 +268,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
 
     return getEstimatedSpendingElement(costElement(), newThroughput ?? throughput, numberOfRegions, prices, true);
   };
-
+  settingsAndScaleStyle = {
+    root: {  width: "33%", 
+      color: 'var(--colorNeutralForeground1)' },
+  };
   private getEstimatedManualSpendElement = (
     throughput: number,
     serverId: string,
@@ -289,36 +291,36 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       );
       return (
         <div>
-          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
+          <Text style={{ fontWeight: 600, color: 'var(--colorNeutralForeground1)' }}>Updated cost per month</Text>
           <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}/hr
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}/day
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}/mo
             </Text>
           </Stack>
         </div>
       );
     };
-
+ 
     const costElement = (): JSX.Element => {
       const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, false);
       return (
         <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
           {newThroughput && newThroughputCostElement()}
-          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
+          <Text style={{ fontWeight: 600 , color: 'var(--colorNeutralForeground1)'}}>Current cost per month</Text>
           <Stack horizontal style={{ marginTop: 5 }}>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}/hr
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}/day
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}/mo
             </Text>
           </Stack>
@@ -366,29 +368,6 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     });
   };
 
-  private minRUperGBSurvey = (): JSX.Element => {
-    const href = `https://ncv.microsoft.com/vRBTO37jmO?ctx={"AzureSubscriptionId":"${userContext.subscriptionId}","CosmosDBAccountName":"${userContext.databaseAccount?.name}"}`;
-    const oneTBinKB = 1000000000;
-    const minRUperGB = 10;
-    const featureFlagEnabled = userContext.features.showMinRUSurvey;
-    const collectionIsEligible =
-      userContext.subscriptionType !== SubscriptionType.Internal &&
-      this.props.usageSizeInKB > oneTBinKB &&
-      this.props.minimum >= usageInGB(this.props.usageSizeInKB) * minRUperGB;
-    if (featureFlagEnabled || collectionIsEligible) {
-      return (
-        <Text>
-          Need to scale below {this.props.minimum} RU/s? Reach out by filling{" "}
-          <a target="_blank" rel="noreferrer" href={href}>
-            this questionnaire
-          </a>
-          .
-        </Text>
-      );
-    }
-    return undefined;
-  };
-
   private renderThroughputModeChoices = (): JSX.Element => {
     const labelId = "settingsV2RadioButtonLabelId";
     return (
@@ -426,8 +405,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     const capacity: string = this.props.isFixed ? "Fixed" : "Unlimited";
     return (
       <Stack {...titleAndInputStackProps}>
-        <Label>Storage capacity</Label>
-        <Text>{capacity}</Text>
+        <Label style={{ color: 'var(--colorNeutralForeground1)'}}>Storage capacity</Label>
+        <Text  style={{ color: 'var(--colorNeutralForeground1)'}}>{capacity}</Text>
       </Stack>
     );
   };
@@ -632,7 +611,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
             </Stack>
           )}
           {this.props.isAutoPilotSelected ? (
-            <Text style={{ marginTop: "40px" }}>
+            <Text style={{ marginTop: "40px" , color: 'var(--colorNeutralForeground1)'}}>
               Based on usage, your {this.props.collectionName ? "container" : "database"} throughput will scale from{" "}
               <b>
                 {AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)} RU/s (10% of max RU/s) -{" "}
@@ -654,14 +633,13 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
             </>
           )}
           {!this.overrideWithProvisionedThroughputSettings() && (
-            <Text>
+            <Text style={{ color: 'var(--colorNeutralForeground1)'}}>
               Estimate your required RU/s with
               <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
                 {` capacity calculator`} <FontIcon iconName="NavigateExternalInline" />
               </Link>
             </Text>
           )}
-          {this.minRUperGBSurvey()}
           {this.props.spendAckVisible && (
             <Checkbox
               id="spendAckCheckBox"

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

@@ -1,5 +1,5 @@
+import { DirectionalHint, IIconStyles, Icon, Stack, Text, TooltipHost } from "@fluentui/react";
 import * as React from "react";
-import { Stack, Text, IIconStyles, Icon, TooltipHost, DirectionalHint } from "@fluentui/react";
 import { toolTipLabelStackTokens } from "../SettingsRenderUtils";
 
 export interface ToolTipLabelComponentProps {
@@ -14,7 +14,7 @@ export class ToolTipLabelComponent extends React.Component<ToolTipLabelComponent
     return (
       <>
         <Stack horizontal verticalAlign="center" tokens={toolTipLabelStackTokens}>
-          {this.props.label && <Text style={{ fontWeight: 600 }}>{this.props.label}</Text>}
+          {this.props.label && <Text style={{ fontWeight: 600 , color: 'var(--colorNeutralForeground1)'}}>{this.props.label}</Text>}
           {this.props.toolTipElement && (
             <TooltipHost
               content={this.props.toolTipElement}

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -4,7 +4,15 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import { MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 
 const zeroValue = 0;
-export type isDirtyTypes = boolean | string | number | DataModels.IndexingPolicy | DataModels.ComputedProperties;
+export type isDirtyTypes =
+  | boolean
+  | string
+  | number
+  | DataModels.IndexingPolicy
+  | DataModels.ComputedProperties
+  | DataModels.VectorEmbedding[]
+  | DataModels.FullTextPolicy
+  | DataModels.ThroughputBucket[];
 export const TtlOff = "off";
 export const TtlOn = "on";
 export const TtlOnNoDefault = "on-nodefault";
@@ -48,6 +56,12 @@ export enum SettingsV2TabTypes {
   PartitionKeyTab,
   ComputedPropertiesTab,
   ContainerVectorPolicyTab,
+  ThroughputBucketsTab,
+}
+
+export enum ContainerPolicyTabTypes {
+  VectorPolicyTab,
+  FullTextPolicyTab,
 }
 
 export interface IsComponentDirtyResult {
@@ -154,7 +168,9 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
     case SettingsV2TabTypes.ComputedPropertiesTab:
       return "Computed Properties";
     case SettingsV2TabTypes.ContainerVectorPolicyTab:
-      return "Container Vector Policy (preview)";
+      return "Container Policies";
+    case SettingsV2TabTypes.ThroughputBucketsTab:
+      return "Throughput Buckets";
     default:
       throw new Error(`Unknown tab ${tab}`);
   }

src/Explorer/Controls/Settings/TestUtils.tsx

@@ -46,6 +46,8 @@ export const collection = {
       query: "query",
     },
   ]),
+  vectorEmbeddingPolicy: ko.observable<DataModels.VectorEmbeddingPolicy>({} as DataModels.VectorEmbeddingPolicy),
+  fullTextPolicy: ko.observable<DataModels.FullTextPolicy>({} as DataModels.FullTextPolicy),
   readSettings: () => {
     return;
   },

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -55,6 +55,7 @@ exports[`SettingsComponent renders 1`] = `
               },
               "databaseId": "test",
               "defaultTtl": [Function],
+              "fullTextPolicy": [Function],
               "geospatialConfig": [Function],
               "getDatabase": [Function],
               "id": [Function],
@@ -68,9 +69,31 @@ exports[`SettingsComponent renders 1`] = `
               "partitionKeyProperties": [
                 "partitionKey",
               ],
+              "rawDataModel": {
+                "indexingPolicy": {
+                  "automatic": true,
+                  "compositeIndexes": [],
+                  "excludedPaths": [],
+                  "fullTextIndexes": [],
+                  "includedPaths": [],
+                  "indexingMode": "consistent",
+                  "spatialIndexes": [],
+                  "vectorIndexes": [],
+                },
+                "uniqueKeyPolicy": {
+                  "uniqueKeys": [
+                    {
+                      "paths": [
+                        "/id",
+                      ],
+                    },
+                  ],
+                },
+              },
               "readSettings": [Function],
               "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
+              "vectorEmbeddingPolicy": [Function],
             }
           }
           isAutoPilotSelected={false}
@@ -132,6 +155,7 @@ exports[`SettingsComponent renders 1`] = `
               },
               "databaseId": "test",
               "defaultTtl": [Function],
+              "fullTextPolicy": [Function],
               "geospatialConfig": [Function],
               "getDatabase": [Function],
               "id": [Function],
@@ -145,9 +169,31 @@ exports[`SettingsComponent renders 1`] = `
               "partitionKeyProperties": [
                 "partitionKey",
               ],
+              "rawDataModel": {
+                "indexingPolicy": {
+                  "automatic": true,
+                  "compositeIndexes": [],
+                  "excludedPaths": [],
+                  "fullTextIndexes": [],
+                  "includedPaths": [],
+                  "indexingMode": "consistent",
+                  "spatialIndexes": [],
+                  "vectorIndexes": [],
+                },
+                "uniqueKeyPolicy": {
+                  "uniqueKeys": [
+                    {
+                      "paths": [
+                        "/id",
+                      ],
+                    },
+                  ],
+                },
+              },
               "readSettings": [Function],
               "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
+              "vectorEmbeddingPolicy": [Function],
             }
           }
           displayedTtlSeconds="5"
@@ -183,17 +229,25 @@ exports[`SettingsComponent renders 1`] = `
           indexingPolicyContent={
             {
               "automatic": true,
+              "compositeIndexes": [],
               "excludedPaths": [],
+              "fullTextIndexes": [],
               "includedPaths": [],
               "indexingMode": "consistent",
+              "spatialIndexes": [],
+              "vectorIndexes": [],
             }
           }
           indexingPolicyContentBaseline={
             {
               "automatic": true,
+              "compositeIndexes": [],
               "excludedPaths": [],
+              "fullTextIndexes": [],
               "includedPaths": [],
               "indexingMode": "consistent",
+              "spatialIndexes": [],
+              "vectorIndexes": [],
             }
           }
           isVectorSearchEnabled={false}
@@ -249,6 +303,7 @@ exports[`SettingsComponent renders 1`] = `
               },
               "databaseId": "test",
               "defaultTtl": [Function],
+              "fullTextPolicy": [Function],
               "geospatialConfig": [Function],
               "getDatabase": [Function],
               "id": [Function],
@@ -262,9 +317,31 @@ exports[`SettingsComponent renders 1`] = `
               "partitionKeyProperties": [
                 "partitionKey",
               ],
+              "rawDataModel": {
+                "indexingPolicy": {
+                  "automatic": true,
+                  "compositeIndexes": [],
+                  "excludedPaths": [],
+                  "fullTextIndexes": [],
+                  "includedPaths": [],
+                  "indexingMode": "consistent",
+                  "spatialIndexes": [],
+                  "vectorIndexes": [],
+                },
+                "uniqueKeyPolicy": {
+                  "uniqueKeys": [
+                    {
+                      "paths": [
+                        "/id",
+                      ],
+                    },
+                  ],
+                },
+              },
               "readSettings": [Function],
               "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
+              "vectorEmbeddingPolicy": [Function],
             }
           }
           explorer={
@@ -330,6 +407,121 @@ exports[`SettingsComponent renders 1`] = `
           shouldDiscardComputedProperties={false}
         />
       </PivotItem>
+      <PivotItem
+        headerText="Global Secondary Index (Preview)"
+        itemKey="GlobalSecondaryIndexTab"
+        key="GlobalSecondaryIndexTab"
+        style={
+          {
+            "marginTop": 20,
+          }
+        }
+      >
+        <GlobalSecondaryIndexComponent
+          collection={
+            {
+              "analyticalStorageTtl": [Function],
+              "changeFeedPolicy": [Function],
+              "computedProperties": [Function],
+              "conflictResolutionPolicy": [Function],
+              "container": Explorer {
+                "_isInitializingNotebooks": false,
+                "isFixedCollectionWithSharedThroughputSupported": [Function],
+                "isTabsContentExpanded": [Function],
+                "onRefreshDatabasesKeyPress": [Function],
+                "onRefreshResourcesClick": [Function],
+                "phoenixClient": PhoenixClient {
+                  "armResourceId": undefined,
+                  "retryOptions": {
+                    "maxTimeout": 5000,
+                    "minTimeout": 5000,
+                    "retries": 3,
+                  },
+                },
+                "provideFeedbackEmail": [Function],
+                "queriesClient": QueriesClient {
+                  "container": [Circular],
+                },
+                "refreshNotebookList": [Function],
+                "resourceTree": ResourceTreeAdapter {
+                  "container": [Circular],
+                  "copyNotebook": [Function],
+                  "parameters": [Function],
+                },
+              },
+              "databaseId": "test",
+              "defaultTtl": [Function],
+              "fullTextPolicy": [Function],
+              "geospatialConfig": [Function],
+              "getDatabase": [Function],
+              "id": [Function],
+              "indexingPolicy": [Function],
+              "materializedViewDefinition": [Function],
+              "materializedViews": [Function],
+              "offer": [Function],
+              "partitionKey": {
+                "kind": "hash",
+                "paths": [],
+                "version": 2,
+              },
+              "partitionKeyProperties": [
+                "partitionKey",
+              ],
+              "rawDataModel": {
+                "indexingPolicy": {
+                  "automatic": true,
+                  "compositeIndexes": [],
+                  "excludedPaths": [],
+                  "fullTextIndexes": [],
+                  "includedPaths": [],
+                  "indexingMode": "consistent",
+                  "spatialIndexes": [],
+                  "vectorIndexes": [],
+                },
+                "uniqueKeyPolicy": {
+                  "uniqueKeys": [
+                    {
+                      "paths": [
+                        "/id",
+                      ],
+                    },
+                  ],
+                },
+              },
+              "readSettings": [Function],
+              "usageSizeInKB": [Function],
+              "vectorEmbeddingPolicy": [Function],
+            }
+          }
+          explorer={
+            Explorer {
+              "_isInitializingNotebooks": false,
+              "isFixedCollectionWithSharedThroughputSupported": [Function],
+              "isTabsContentExpanded": [Function],
+              "onRefreshDatabasesKeyPress": [Function],
+              "onRefreshResourcesClick": [Function],
+              "phoenixClient": PhoenixClient {
+                "armResourceId": undefined,
+                "retryOptions": {
+                  "maxTimeout": 5000,
+                  "minTimeout": 5000,
+                  "retries": 3,
+                },
+              },
+              "provideFeedbackEmail": [Function],
+              "queriesClient": QueriesClient {
+                "container": [Circular],
+              },
+              "refreshNotebookList": [Function],
+              "resourceTree": ResourceTreeAdapter {
+                "container": [Circular],
+                "copyNotebook": [Function],
+                "parameters": [Function],
+              },
+            }
+          }
+        />
+      </PivotItem>
     </StyledPivot>
   </div>
 </div>

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -1,4 +1,5 @@
 import { Checkbox, DirectionalHint, Link, Stack, Text, TextField, TooltipHost } from "@fluentui/react";
+import { getWorkloadType } from "Common/DatabaseAccountUtility";
 import { useDatabases } from "Explorer/useDatabases";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import * as Constants from "../../../Common/Constants";
@@ -34,10 +35,23 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
   setIsThroughputCapExceeded,
   onCostAcknowledgeChange,
 }: ThroughputInputProps) => {
+  let defaultThroughput: number;
+  const workloadType: Constants.WorkloadType = getWorkloadType();
+
+  if (
+    isFreeTier ||
+    isQuickstart ||
+    [Constants.WorkloadType.Learning, Constants.WorkloadType.DevelopmentTesting].includes(workloadType)
+  ) {
+    defaultThroughput = AutoPilotUtils.autoPilotThroughput1K;
+  } else if (workloadType === Constants.WorkloadType.Production) {
+    defaultThroughput = AutoPilotUtils.autoPilotThroughput10K;
+  } else {
+    defaultThroughput = AutoPilotUtils.autoPilotThroughput4K;
+  }
+
   const [isAutoscaleSelected, setIsAutoScaleSelected] = useState<boolean>(true);
-  const [throughput, setThroughput] = useState<number>(
-    isFreeTier || isQuickstart ? AutoPilotUtils.autoPilotThroughput1K : AutoPilotUtils.autoPilotThroughput4K,
-  );
+  const [throughput, setThroughput] = useState<number>(defaultThroughput);
   const [isCostAcknowledged, setIsCostAcknowledged] = useState<boolean>(false);
   const [throughputError, setThroughputError] = useState<string>("");
   const [totalThroughputUsed, setTotalThroughputUsed] = useState<number>(0);
@@ -47,7 +61,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
   const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
   const numberOfRegions = userContext.databaseAccount?.properties.locations?.length || 1;
-
   useEffect(() => {
     // throughput cap check for the initial state
     let totalThroughput = 0;
@@ -157,9 +170,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
   const handleOnChangeMode = (event: React.ChangeEvent<HTMLInputElement>, mode: string): void => {
     if (mode === "Autoscale") {
-      const defaultThroughput = isFreeTier
-        ? AutoPilotUtils.autoPilotThroughput1K
-        : AutoPilotUtils.autoPilotThroughput4K;
       setThroughput(defaultThroughput);
       setIsAutoScaleSelected(true);
       setThroughputValue(defaultThroughput);

src/Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent.test.tsx

@@ -2,7 +2,7 @@ import "@testing-library/jest-dom";
 import { RenderResult, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
 import React from "react";
-import { AddVectorEmbeddingPolicyForm } from "./AddVectorEmbeddingPolicyForm";
+import { VectorEmbeddingPoliciesComponent } from "./VectorEmbeddingPoliciesComponent";
 
 const mockVectorEmbedding: VectorEmbedding[] = [
   { path: "/vector1", dataType: "float32", distanceFunction: "euclidean", dimensions: 0 },
@@ -17,9 +17,9 @@ describe("AddVectorEmbeddingPolicyForm", () => {
 
   beforeEach(() => {
     component = render(
-      <AddVectorEmbeddingPolicyForm
-        vectorEmbedding={mockVectorEmbedding}
-        vectorIndex={mockVectorIndex}
+      <VectorEmbeddingPoliciesComponent
+        vectorEmbeddings={mockVectorEmbedding}
+        vectorIndexes={mockVectorIndex}
         onVectorEmbeddingChange={mockOnVectorEmbeddingChange}
       />,
     );
@@ -36,7 +36,7 @@ describe("AddVectorEmbeddingPolicyForm", () => {
   });
 
   test("calls onDelete when delete button is clicked", async () => {
-    const deleteButton = component.container.querySelector("#delete-vector-policy-1");
+    const deleteButton = component.container.querySelector("#delete-Vector-embedding-1");
     fireEvent.click(deleteButton);
     expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
     expect(screen.queryByText("Vector embedding 1")).toBeNull();
@@ -49,21 +49,19 @@ describe("AddVectorEmbeddingPolicyForm", () => {
 
   test("validates input correctly", async () => {
     fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "" } });
-    await waitFor(() => expect(screen.getByText("Vector embedding path should not be empty")).toBeInTheDocument(), {
+    await waitFor(() => expect(screen.getByText("Path should not be empty")).toBeInTheDocument(), {
       timeout: 1500,
     });
     await waitFor(
       () =>
-        expect(
-          screen.getByText("Vector embedding dimension must be greater than 0 and less than or equal 4096"),
-        ).toBeInTheDocument(),
+        expect(screen.getByText("Dimension must be greater than 0 and less than or equal 4096")).toBeInTheDocument(),
       {
         timeout: 1500,
       },
     );
     fireEvent.change(component.container.querySelector("#vector-policy-dimension-1"), { target: { value: "4096" } });
     fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "/vector1" } });
-    await waitFor(() => expect(screen.queryByText("Vector embedding path should not be empty")).toBeNull(), {
+    await waitFor(() => expect(screen.queryByText("Path should not be empty")).toBeNull(), {
       timeout: 1500,
     });
     await waitFor(

src/Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent.tsx

@@ -0,0 +1,470 @@
+import {
+  DefaultButton,
+  Dropdown,
+  IDropdownOption,
+  IStyleFunctionOrObject,
+  ITextFieldStyleProps,
+  ITextFieldStyles,
+  Label,
+  Stack,
+  TextField,
+} from "@fluentui/react";
+import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
+import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
+import {
+  getDataTypeOptions,
+  getDistanceFunctionOptions,
+  getIndexTypeOptions,
+} from "Explorer/Controls/VectorSearch/VectorSearchUtils";
+import React, { FunctionComponent, useState } from "react";
+
+export interface IVectorEmbeddingPoliciesComponentProps {
+  vectorEmbeddings: VectorEmbedding[];
+  onVectorEmbeddingChange: (
+    vectorEmbeddings: VectorEmbedding[],
+    vectorIndexingPolicies: VectorIndex[],
+    validationPassed: boolean,
+  ) => void;
+  vectorIndexes?: VectorIndex[];
+  discardChanges?: boolean;
+  onChangesDiscarded?: () => void;
+  disabled?: boolean;
+}
+
+export interface VectorEmbeddingPolicyData {
+  path: string;
+  dataType: VectorEmbedding["dataType"];
+  distanceFunction: VectorEmbedding["distanceFunction"];
+  dimensions: number;
+  indexType: VectorIndex["type"] | "none";
+  pathError: string;
+  dimensionsError: string;
+  diskANNShardKey?: string;
+  diskANNShardKeyError?: string;
+  indexingSearchListSize?: number;
+  indexingSearchListSizeError?: string;
+  quantizationByteSize?: number;
+  quantizationByteSizeError?: string;
+}
+
+type VectorEmbeddingPolicyProperty = "dataType" | "distanceFunction" | "indexType";
+
+const labelStyles = {
+  root: {
+    fontSize: 12,
+  },
+};
+
+const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
+  fieldGroup: {
+    height: 27,
+  },
+  field: {
+    fontSize: 12,
+    padding: "0 8px",
+  },
+};
+
+const dropdownStyles = {
+  title: {
+    height: 27,
+    lineHeight: "24px",
+    fontSize: 12,
+  },
+  dropdown: {
+    height: 27,
+    lineHeight: "24px",
+  },
+  dropdownItem: {
+    fontSize: 12,
+  },
+};
+
+export const VectorEmbeddingPoliciesComponent: FunctionComponent<IVectorEmbeddingPoliciesComponentProps> = ({
+  vectorEmbeddings,
+  vectorIndexes,
+  onVectorEmbeddingChange,
+  discardChanges,
+  onChangesDiscarded,
+  disabled,
+}): JSX.Element => {
+  const onVectorEmbeddingPathError = (path: string, index?: number): string => {
+    let error = "";
+    if (!path) {
+      error = "Path should not be empty";
+    }
+    if (
+      index >= 0 &&
+      vectorEmbeddingPolicyData?.find(
+        (vectorEmbedding: VectorEmbeddingPolicyData, dataIndex: number) =>
+          dataIndex !== index && vectorEmbedding.path === path,
+      )
+    ) {
+      error = "Path is already defined";
+    }
+    return error;
+  };
+
+  const onVectorEmbeddingDimensionError = (dimension: number, indexType: VectorIndex["type"] | "none"): string => {
+    let error = "";
+    if (dimension <= 0 || dimension > 4096) {
+      error = "Dimension must be greater than 0 and less than or equal 4096";
+    }
+    if (indexType === "flat" && dimension > 505) {
+      error = "Maximum allowed dimension for flat index is 505";
+    }
+    return error;
+  };
+
+  const onQuantizationByteSizeError = (size: number): string => {
+    let error = "";
+    if (size < 1 || size > 512) {
+      error = "Quantization byte size must be greater than 0 and less than or equal to 512";
+    }
+    return error;
+  };
+
+  const onIndexingSearchListSizeError = (size: number): string => {
+    let error = "";
+    if (size < 25 || size > 500) {
+      error = "Indexing search list size must be greater than or equal to 25 and less than or equal to 500";
+    }
+    return error;
+  };
+
+  //TODO: no restrictions yet due to this field being removed for now.
+  // Uncomment and replace with validation code when field is reinstated
+  // const onDiskANNShardKeyError = (shardKey: string): string => {
+  //   return "";
+  // };
+
+  const initializeData = (vectorEmbeddings: VectorEmbedding[], vectorIndexes: VectorIndex[]) => {
+    const mergedData: VectorEmbeddingPolicyData[] = [];
+    vectorEmbeddings.forEach((embedding) => {
+      const matchingIndex = displayIndexes ? vectorIndexes.find((index) => index.path === embedding.path) : undefined;
+      mergedData.push({
+        ...embedding,
+        indexType: matchingIndex?.type || "none",
+        indexingSearchListSize: matchingIndex?.indexingSearchListSize || undefined,
+        quantizationByteSize: matchingIndex?.quantizationByteSize || undefined,
+        pathError: onVectorEmbeddingPathError(embedding.path),
+        dimensionsError: onVectorEmbeddingDimensionError(embedding.dimensions, matchingIndex?.type || "none"),
+      });
+    });
+    return mergedData;
+  };
+
+  const [displayIndexes] = useState<boolean>(!!vectorIndexes);
+  const [vectorEmbeddingPolicyData, setVectorEmbeddingPolicyData] = useState<VectorEmbeddingPolicyData[]>(
+    initializeData(vectorEmbeddings, vectorIndexes),
+  );
+
+  React.useEffect(() => {
+    propagateData();
+  }, [vectorEmbeddingPolicyData]);
+
+  React.useEffect(() => {
+    if (discardChanges) {
+      setVectorEmbeddingPolicyData(initializeData(vectorEmbeddings, vectorIndexes));
+      onChangesDiscarded();
+    }
+  }, [discardChanges]);
+
+  const propagateData = () => {
+    const vectorEmbeddings: VectorEmbedding[] = vectorEmbeddingPolicyData.map((policy: VectorEmbeddingPolicyData) => ({
+      path: policy.path,
+      dataType: policy.dataType,
+      dimensions: policy.dimensions,
+      distanceFunction: policy.distanceFunction,
+    }));
+    const vectorIndexes: VectorIndex[] = vectorEmbeddingPolicyData
+      .filter((policy: VectorEmbeddingPolicyData) => policy.indexType !== "none")
+      .map(
+        (policy) =>
+          ({
+            path: policy.path,
+            type: policy.indexType,
+            indexingSearchListSize: policy.indexingSearchListSize,
+            quantizationByteSize: policy.quantizationByteSize,
+          }) as VectorIndex,
+      );
+    const validationPassed = vectorEmbeddingPolicyData.every(
+      (policy: VectorEmbeddingPolicyData) => policy.pathError === "" && policy.dimensionsError === "",
+    );
+    onVectorEmbeddingChange(vectorEmbeddings, vectorIndexes, validationPassed);
+  };
+
+  const onVectorEmbeddingPathChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value.trim();
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    if (!vectorEmbeddings[index]?.path && !value.startsWith("/")) {
+      vectorEmbeddings[index].path = "/" + value;
+    } else {
+      vectorEmbeddings[index].path = value;
+    }
+    const error = onVectorEmbeddingPathError(value, index);
+    vectorEmbeddings[index].pathError = error;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onVectorEmbeddingDimensionsChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value.trim()) || 0;
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    const vectorEmbedding = vectorEmbeddings[index];
+    vectorEmbeddings[index].dimensions = value;
+    const error = onVectorEmbeddingDimensionError(value, vectorEmbedding.indexType);
+    vectorEmbeddings[index].dimensionsError = error;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onVectorEmbeddingIndexTypeChange = (index: number, option: IDropdownOption): void => {
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    const vectorEmbedding = vectorEmbeddings[index];
+    vectorEmbeddings[index].indexType = option.key as never;
+    const error = onVectorEmbeddingDimensionError(vectorEmbedding.dimensions, vectorEmbedding.indexType);
+    vectorEmbeddings[index].dimensionsError = error;
+    if (vectorEmbedding.indexType === "diskANN") {
+      vectorEmbedding.indexingSearchListSize = 100;
+    } else {
+      vectorEmbedding.indexingSearchListSize = undefined;
+    }
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onQuantizationByteSizeChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value.trim()) || 0;
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    vectorEmbeddings[index].quantizationByteSize = value;
+    vectorEmbeddings[index].quantizationByteSizeError = onQuantizationByteSizeError(value);
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onIndexingSearchListSizeChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value.trim()) || 0;
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    vectorEmbeddings[index].indexingSearchListSize = value;
+    vectorEmbeddings[index].indexingSearchListSizeError = onIndexingSearchListSizeError(value);
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  // TODO: uncomment after Ignite
+  // DiskANNShardKey was removed for Ignite due to backend problems. Leaving this here as it will be reinstated immediately after Ignite
+  // const onDiskANNShardKeyChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+  //   const value = event.target.value.trim();
+  //   const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+  //   if (!vectorEmbeddings[index]?.diskANNShardKey && !value.startsWith("/")) {
+  //     vectorEmbeddings[index].diskANNShardKey = "/" + value;
+  //   } else {
+  //     vectorEmbeddings[index].diskANNShardKey = value;
+  //   }
+  //   const error = onDiskANNShardKeyError(value);
+  //   vectorEmbeddings[index].diskANNShardKeyError = error;
+  //   setVectorEmbeddingPolicyData(vectorEmbeddings);
+  // }
+
+  const onVectorEmbeddingPolicyChange = (
+    index: number,
+    option: IDropdownOption,
+    property: VectorEmbeddingPolicyProperty,
+  ): void => {
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    vectorEmbeddings[index][property] = option.key as never;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onAdd = () => {
+    setVectorEmbeddingPolicyData([
+      ...vectorEmbeddingPolicyData,
+      {
+        path: "",
+        dataType: "float32",
+        distanceFunction: "euclidean",
+        dimensions: 0,
+        indexType: "none",
+        pathError: onVectorEmbeddingPathError(""),
+        dimensionsError: onVectorEmbeddingDimensionError(0, "none"),
+      },
+    ]);
+  };
+
+  const onDelete = (index: number) => {
+    const vectorEmbeddings = vectorEmbeddingPolicyData.filter((_uniqueKey, j) => index !== j);
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  return (
+    <Stack tokens={{ childrenGap: 4 }}>
+      {vectorEmbeddingPolicyData &&
+        vectorEmbeddingPolicyData.length > 0 &&
+        vectorEmbeddingPolicyData.map((vectorEmbeddingPolicy: VectorEmbeddingPolicyData, index: number) => (
+          <CollapsibleSectionComponent
+            disabled={disabled}
+            key={index}
+            isExpandedByDefault={true}
+            title={`Vector embedding ${index + 1}`}
+            showDelete={true}
+            onDelete={() => onDelete(index)}
+          >
+            <Stack horizontal tokens={{ childrenGap: 4 }}>
+              <Stack
+                styles={{
+                  root: {
+                    margin: "0 0 6px 20px !important",
+                    paddingLeft: 20,
+                    width: "80%",
+                    borderLeft: "1px solid",
+                  },
+                }}
+              >
+                <Stack>
+                  <Label disabled={disabled} styles={labelStyles}>
+                    Path
+                  </Label>
+                  <TextField
+                    disabled={disabled}
+                    id={`vector-policy-path-${index + 1}`}
+                    required={true}
+                    placeholder="/vector1"
+                    styles={textFieldStyles}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onVectorEmbeddingPathChange(index, event)}
+                    value={vectorEmbeddingPolicy.path || ""}
+                    errorMessage={vectorEmbeddingPolicy.pathError}
+                  />
+                </Stack>
+                <Stack>
+                  <Label disabled={disabled} styles={labelStyles}>
+                    Data type
+                  </Label>
+                  <Dropdown
+                    disabled={disabled}
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getDataTypeOptions()}
+                    selectedKey={vectorEmbeddingPolicy.dataType}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onVectorEmbeddingPolicyChange(index, option, "dataType")
+                    }
+                  ></Dropdown>
+                </Stack>
+                <Stack>
+                  <Label disabled={disabled} styles={labelStyles}>
+                    Distance function
+                  </Label>
+                  <Dropdown
+                    disabled={disabled}
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getDistanceFunctionOptions()}
+                    selectedKey={vectorEmbeddingPolicy.distanceFunction}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onVectorEmbeddingPolicyChange(index, option, "distanceFunction")
+                    }
+                  ></Dropdown>
+                </Stack>
+                <Stack>
+                  <Label disabled={disabled} styles={labelStyles}>
+                    Dimensions
+                  </Label>
+                  <TextField
+                    disabled={disabled}
+                    id={`vector-policy-dimension-${index + 1}`}
+                    required={true}
+                    styles={textFieldStyles}
+                    value={String(vectorEmbeddingPolicy.dimensions || 0)}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                      onVectorEmbeddingDimensionsChange(index, event)
+                    }
+                    errorMessage={vectorEmbeddingPolicy.dimensionsError}
+                  />
+                </Stack>
+                {displayIndexes && (
+                  <Stack>
+                    <Label disabled={disabled} styles={labelStyles}>
+                      Index type
+                    </Label>
+                    <Dropdown
+                      disabled={disabled}
+                      required={true}
+                      styles={dropdownStyles}
+                      options={getIndexTypeOptions()}
+                      selectedKey={vectorEmbeddingPolicy.indexType}
+                      onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                        onVectorEmbeddingIndexTypeChange(index, option)
+                      }
+                    ></Dropdown>
+                    <Stack style={{ marginLeft: "10px" }}>
+                      <Label
+                        disabled={
+                          disabled ||
+                          (vectorEmbeddingPolicy.indexType !== "quantizedFlat" &&
+                            vectorEmbeddingPolicy.indexType !== "diskANN")
+                        }
+                        styles={labelStyles}
+                      >
+                        Quantization byte size
+                      </Label>
+                      <TextField
+                        disabled={
+                          disabled ||
+                          (vectorEmbeddingPolicy.indexType !== "quantizedFlat" &&
+                            vectorEmbeddingPolicy.indexType !== "diskANN")
+                        }
+                        id={`vector-policy-quantizationByteSize-${index + 1}`}
+                        styles={textFieldStyles}
+                        value={String(vectorEmbeddingPolicy.quantizationByteSize || "")}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                          onQuantizationByteSizeChange(index, event)
+                        }
+                      />
+                    </Stack>
+                    <Stack style={{ marginLeft: "10px" }}>
+                      <Label disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"} styles={labelStyles}>
+                        Indexing search list size
+                      </Label>
+                      <TextField
+                        disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"}
+                        id={`vector-policy-indexingSearchListSize-${index + 1}`}
+                        styles={textFieldStyles}
+                        value={String(vectorEmbeddingPolicy.indexingSearchListSize || "")}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                          onIndexingSearchListSizeChange(index, event)
+                        }
+                      />
+                    </Stack>
+                    {/*TODO: uncomment after Ignite */}
+                    {/* DiskANNShardKey was removed for Ignite due to backend problems. Leaving this here as it will be reinstated immediately after Ignite
+                    <Stack
+                      style={{ marginLeft: "10px" }}
+                    >
+                      <Label
+                        disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"}
+                        styles={labelStyles}
+                      >DiskANN shard key</Label>
+                      <TextField
+                        disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"}
+                        id={`vector-policy-diskANNShardKey-${index + 1}`}
+                        styles={textFieldStyles}
+                        value={String(vectorEmbeddingPolicy.diskANNShardKey || "")}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                          onDiskANNShardKeyChange(index, event)
+                        }
+                      />
+                    </Stack>
+                    */}
+                  </Stack>
+                )}
+              </Stack>
+            </Stack>
+          </CollapsibleSectionComponent>
+        ))}
+      <DefaultButton
+        disabled={disabled}
+        id={`add-vector-policy`}
+        styles={{ root: { maxWidth: 170, fontSize: 12 } }}
+        onClick={onAdd}
+      >
+        Add vector embedding
+      </DefaultButton>
+    </Stack>
+  );
+};

src/Explorer/DataExplorer.tsx

@@ -0,0 +1,29 @@
+import { makeStyles } from "@fluentui/react-components";
+import React from "react";
+import type { Explorer } from "../Contracts/ViewModels";
+import { useTheme } from "../hooks/useTheme";
+
+interface DataExplorerProps {
+  dataExplorer: Explorer;
+}
+
+const useStyles = makeStyles({
+  root: {
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+    height: "100%",
+    width: "100%"
+  }
+});
+
+export const DataExplorer: React.FC<DataExplorerProps> = ({ dataExplorer }) => {
+  const { isDarkMode } = useTheme();
+  const styles = useStyles();
+
+
+  return (
+    <div className={`dataExplorerContainer ${styles.root}`}>
+      <div>Data Explorer Content</div>
+    </div>
+  );
+};

src/Explorer/ErrorBoundary.tsx

@@ -0,0 +1,37 @@
+import React, { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: "20px", color: "red" }}>
+          <h2>Something went wrong.</h2>
+          <details style={{ whiteSpace: "pre-wrap" }}>{this.state.error && this.state.error.toString()}</details>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/Explorer/Explorer.tsx

@@ -8,7 +8,7 @@ import { MessageTypes } from "Contracts/ExplorerContracts";
 import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { IGalleryItem } from "Juno/JunoClient";
-import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
+import { isFabricMirrored, isFabricMirroredKey, scheduleRefreshFabricToken } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { acquireMsalTokenForAccount } from "Utils/AuthorizationUtils";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointUtils";
@@ -35,7 +35,7 @@ import { PhoenixClient } from "../Phoenix/PhoenixClient";
 import * as ExplorerSettings from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
-import { isAccountNewerThanThresholdInMs, updateUserContext, userContext } from "../UserContext";
+import { updateUserContext, userContext } from "../UserContext";
 import { getCollectionName, getUploadName } from "../Utils/APITypeUtils";
 import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
@@ -43,7 +43,7 @@ import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import { useSidePanel } from "../hooks/useSidePanel";
-import { useTabs } from "../hooks/useTabs";
+import { ReactTabKind, useTabs } from "../hooks/useTabs";
 import "./ComponentRegisterer";
 import { DialogProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
@@ -187,6 +187,10 @@ export default class Explorer {
       useNotebook.getState().setNotebookBasePath(userContext.features.notebookBasePath);
     }
 
+    if (isFabricMirrored()) {
+      useTabs.getState().closeReactTab(ReactTabKind.Home);
+    }
+
     this.refreshExplorer();
   }
 
@@ -278,37 +282,6 @@ export default class Explorer {
     }
   }
 
-  public openNPSSurveyDialog(): void {
-    if (!Platform.Portal || !["Postgres", "SQL", "Mongo"].includes(userContext.apiType)) {
-      return;
-    }
-
-    const ONE_DAY_IN_MS = 86400000;
-    const SEVEN_DAYS_IN_MS = 604800000;
-
-    // Try Cosmos DB subscription - survey shown to 100% of users at day 1 in Data Explorer.
-    if (userContext.isTryCosmosDBSubscription) {
-      if (isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", ONE_DAY_IN_MS)) {
-        Logger.logInfo(
-          `Sending message to Portal to check if NPS Survey can be displayed in Try Cosmos DB ${userContext.apiType}`,
-          "Explorer/openNPSSurveyDialog",
-        );
-        sendMessage({ type: MessageTypes.DisplayNPSSurvey });
-      }
-    } else {
-      // Show survey when an existing account is older than 7 days
-      if (
-        !isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", SEVEN_DAYS_IN_MS)
-      ) {
-        Logger.logInfo(
-          `Sending message to Portal to check if NPS Survey can be displayed for existing ${userContext.apiType} account older than 7 days`,
-          "Explorer/openNPSSurveyDialog",
-        );
-        sendMessage({ type: MessageTypes.DisplayNPSSurvey });
-      }
-    }
-  }
-
   public async openCESCVAFeedbackBlade(): Promise<void> {
     sendMessage({ type: MessageTypes.OpenCESCVAFeedbackBlade });
     Logger.logInfo(
@@ -378,8 +351,8 @@ export default class Explorer {
   };
 
   public onRefreshResourcesClick = async (): Promise<void> => {
-    if (configContext.platform === Platform.Fabric) {
-      scheduleRefreshDatabaseResourceToken(true).then(() => this.refreshAllDatabases());
+    if (isFabricMirroredKey()) {
+      scheduleRefreshFabricToken(true).then(() => this.refreshAllDatabases());
       return;
     }
 
@@ -1134,7 +1107,7 @@ export default class Explorer {
     if (userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo") {
       userContext.authType === AuthType.ResourceToken
         ? this.refreshDatabaseForResourceToken()
-        : this.refreshAllDatabases();
+        : await this.refreshAllDatabases(); // await: we rely on the databases to be loaded before restoring the tabs further in the flow
     }
     await useNotebook.getState().refreshNotebooksEnabledStateForAccount();
 
@@ -1158,7 +1131,7 @@ export default class Explorer {
       await this.initNotebooks(userContext.databaseAccount);
     }
 
-    await this.refreshSampleData();
+    this.refreshSampleData();
   }
 
   public async configureCopilot(): Promise<void> {
@@ -1183,26 +1156,27 @@ export default class Explorer {
       .setCopilotSampleDBEnabled(copilotEnabled && copilotUserDBEnabled && copilotSampleDBEnabled);
   }
 
-  public async refreshSampleData(): Promise<void> {
-    try {
-      if (!userContext.sampleDataConnectionInfo) {
-        return;
-      }
-      const collection: DataModels.Collection = await readSampleCollection();
-      if (!collection) {
-        return;
-      }
-
-      const databaseId = userContext.sampleDataConnectionInfo?.databaseId;
-      if (!databaseId) {
-        return;
-      }
-
-      const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection, true);
-      useDatabases.setState({ sampleDataResourceTokenCollection });
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "Explorer");
+  public refreshSampleData(): void {
+    if (!userContext.sampleDataConnectionInfo) {
       return;
     }
+
+    const databaseId = userContext.sampleDataConnectionInfo?.databaseId;
+    if (!databaseId) {
+      return;
+    }
+
+    readSampleCollection()
+      .then((collection: DataModels.Collection) => {
+        if (!collection) {
+          return;
+        }
+
+        const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection, true);
+        useDatabases.setState({ sampleDataResourceTokenCollection });
+      })
+      .catch((error) => {
+        Logger.logError(getErrorMessage(error), "Explorer/refreshSampleData");
+      });
   }
 }

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.less

@@ -14,10 +14,6 @@
       .flex-direction(@direction: row);
       padding: 4px 5px;
 
-      label {
-        padding: 0px;
-      }
-
       .valueCol {
         flex-grow: 1;
         padding-right: 5px;
@@ -63,6 +59,10 @@
     height: 100%;
   }
 
+  .customTrashIcon {
+    padding-top: 33px;
+  }
+
   .rightPaneTrashIconImg {
     vertical-align: top;
   }

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

@@ -142,10 +142,11 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 <div className="labelCol">
                   <TextField
                     className="edgeInput"
+                    label={index === 0 && "Key"}
                     type="text"
                     id="propertyKeyNewVertexPane"
                     componentRef={input}
-                    aria-required="true"
+                    required
                     placeholder="Key"
                     autoComplete="off"
                     aria-label={`Enter value for propery ${index + 1}`}
@@ -153,11 +154,11 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                     onChange={(event: React.ChangeEvent<HTMLInputElement>) => onKeyChange(event, index)}
                   />
                 </div>
-                <span className="mandatoryStar">*&nbsp;</span>
 
                 <div className="valueCol">
                   <TextField
                     className="edgeInput"
+                    label={index === 0 && "Value"}
                     type="text"
                     placeholder="Value"
                     autoComplete="off"
@@ -169,6 +170,8 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 <div>
                   <Dropdown
                     role="combobox"
+                    label={index === 0 && "Type"}
+                    ariaLabel="Type"
                     placeholder="Select an option"
                     defaultSelectedKey={data.values[0].type}
                     style={{ width: 100 }}
@@ -181,7 +184,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 </div>
                 <div className="actionCol">
                   <div
-                    className="rightPaneTrashIcon rightPaneBtns"
+                    className={`rightPaneTrashIcon rightPaneBtns ${index === 0 && "customTrashIcon"}`}
                     tabIndex={0}
                     role="button"
                     aria-label={`Delete ${data.key}`}

src/Explorer/Menus/CommandBar/CommandBarComponent.less

@@ -4,11 +4,10 @@
   padding: @SmallSpace 0px @SmallSpace 0px;
   .flex-display();
   span {
-    border-left: @ButtonBorderWidth solid @BaseMediumHigh;
     margin: 0 10px 0 10px;
   }
 }
 
 .commandBarContainer {
-  border-bottom: 1px solid @BaseMedium;
+  border-bottom: 1px solid var(--colorNeutralStroke1);
 }

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -4,14 +4,14 @@
  * and update any knockout observables passed from the parent.
  */
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
+import { makeStyles, useFluent } from "@fluentui/react-components";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
 import { KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
+import { isFabric } from "Platform/Fabric/FabricUtil";
 import { userContext } from "UserContext";
 import * as React from "react";
 import create, { UseStore } from "zustand";
 import { ConnectionStatusType, PoolIdType } from "../../../Common/Constants";
-import { StyleConstants } from "../../../Common/StyleConstants";
-import { Platform, configContext } from "../../../ConfigContext";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { useSelectedNode } from "../../useSelectedNode";
@@ -30,18 +30,26 @@ export interface CommandBarStore {
 }
 
 export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
-  contextButtons: [],
+  contextButtons: [] as CommandButtonComponentProps[],
   setContextButtons: (contextButtons: CommandButtonComponentProps[]) => set((state) => ({ ...state, contextButtons })),
   isHidden: false,
   setIsHidden: (isHidden: boolean) => set((state) => ({ ...state, isHidden })),
 }));
 
+const useStyles = makeStyles({
+  commandBarContainer: {
+    borderBottom: "1px solid var(--colorNeutralStroke1)"
+  }
+});
+
 export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const selectedNodeState = useSelectedNode();
   const buttons = useCommandBar((state) => state.contextButtons);
   const isHidden = useCommandBar((state) => state.isHidden);
-  const backgroundColor = StyleConstants.BaseLight;
+  const { targetDocument } = useFluent();
+  // const isDarkMode = targetDocument?.body.classList.contains("isDarkMode");
   const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR);
+  const styles = useStyles();
 
   if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
     const buttons =
@@ -49,12 +57,15 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
         ? CommandBarComponentButtonFactory.createPostgreButtons(container)
         : CommandBarComponentButtonFactory.createVCoreMongoButtons(container);
     return (
-      <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
+      <div className={styles.commandBarContainer} style={{ display: isHidden ? "none" : "initial" }}>
         <FluentCommandBar
           ariaLabel="Use left and right arrow keys to navigate between commands"
-          items={CommandBarUtil.convertButton(buttons, backgroundColor)}
+          items={CommandBarUtil.convertButton(buttons, "var(--colorNeutralBackground1)")}
           styles={{
-            root: { backgroundColor: backgroundColor },
+            root: { 
+              backgroundColor: "var(--colorNeutralBackground1)",
+              color: "var(--colorNeutralForeground1)"
+            }
           }}
           overflowButtonProps={{ ariaLabel: "More commands" }}
         />
@@ -68,18 +79,18 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   );
   const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(container);
 
-  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
+  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, "var(--colorNeutralBackground1)");
   if (buttons && buttons.length > 0) {
     uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
   }
 
-  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
+  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, "var(--colorNeutralBackground1)");
 
   if (uiFabricTabsButtons.length > 0) {
     uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
   }
 
-  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
+  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, "var(--colorNeutralBackground1)");
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
   const connectionInfo = useNotebook((state) => state.connectionInfo);
@@ -93,26 +104,27 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
     );
   }
 
-  const rootStyle =
-    configContext.platform === Platform.Fabric
-      ? {
-          root: {
-            backgroundColor: "transparent",
-            padding: "2px 8px 0px 8px",
-          },
+  const rootStyle = isFabric()
+    ? {
+        root: {
+          backgroundColor: "var(--colorNeutralBackground1)",
+          padding: "2px 8px 0px 8px",
+          color: "var(--colorNeutralForeground1)"
         }
-      : {
-          root: {
-            backgroundColor: backgroundColor,
-          },
-        };
+      }
+    : {
+        root: {
+          backgroundColor: "var(--colorNeutralBackground1)",
+          color: "var(--colorNeutralForeground1)"
+        }
+      };
 
   const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
   const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);
   setKeyboardHandlers(keyboardHandlers);
 
   return (
-    <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
+    <div className={styles.commandBarContainer} style={{ display: isHidden ? "none" : "initial" }}>
       <FluentCommandBar
         ariaLabel="Use left and right arrow keys to navigate between commands"
         items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}

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

@@ -37,21 +37,25 @@ describe("CommandBarComponentButtonFactory tests", () => {
       expect(enableAzureSynapseLinkBtn).toBeDefined();
     });
 
-    it("Button should not be visible for Tables API", () => {
-      updateUserContext({
-        databaseAccount: {
-          properties: {
-            capabilities: [{ name: "EnableTable" }],
-          },
-        } as DatabaseAccount,
-      });
-
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
-      const enableAzureSynapseLinkBtn = buttons.find(
-        (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel,
-      );
-      expect(enableAzureSynapseLinkBtn).toBeUndefined();
-    });
+    // TODO: Now that Tables API supports dataplane RBAC, calling createStaticCommandBarButtons will enable the
+    //       Entra ID Login button, which causes this test to fail due to "Invalid hook call.". This seems to be
+    //       unsupported in jest and needs to be tested with react-hooks-testing-library.
+    //
+    // it("Button should not be visible for Tables API", () => {
+    //   updateUserContext({
+    //     databaseAccount: {
+    //       properties: {
+    //         capabilities: [{ name: "EnableTable" }],
+    //       },
+    //     } as DatabaseAccount,
+    //   });
+    //
+    //   const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+    //  const enableAzureSynapseLinkBtn = buttons.find(
+    //    (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel,
+    //  );
+    //  expect(enableAzureSynapseLinkBtn).toBeUndefined();
+    //});
 
     it("Button should not be visible for Cassandra API", () => {
       updateUserContext({

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,4 +1,5 @@
 import { KeyboardAction } from "KeyboardShortcuts";
+import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
@@ -61,7 +62,7 @@ export function createStaticCommandBarButtons(
     }
   }
 
-  if (userContext.apiType === "SQL") {
+  if (isDataplaneRbacSupported(userContext.apiType)) {
     const [loginButtonProps, setLoginButtonProps] = useState<CommandButtonComponentProps | undefined>(undefined);
     const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
     const aadTokenUpdated = useDataPlaneRbac((state) => state.aadTokenUpdated);

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -1,10 +1,10 @@
 import {
-  Dropdown,
-  ICommandBarItemProps,
-  IComponentAsProps,
-  IconType,
-  IDropdownOption,
-  IDropdownStyles,
+    Dropdown,
+    ICommandBarItemProps,
+    IComponentAsProps,
+    IconType,
+    IDropdownOption,
+    IDropdownStyles,
 } from "@fluentui/react";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { KeyboardHandlerMap } from "KeyboardShortcuts";
@@ -53,7 +53,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
       const result: ICommandBarItemProps = {
         iconProps: {
           style: {
-            width: StyleConstants.CommandBarIconWidth, // 16
+            width: StyleConstants.CommandBarIconWidth,
             alignSelf: btn.iconName ? "baseline" : undefined,
             filter: getFilter(btn.disabled),
           },
@@ -79,7 +79,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
         "data-test": `CommandBar/Button:${label}`,
         buttonStyles: {
           root: {
-            backgroundColor: backgroundColor,
+            backgroundColor: "var(--colorNeutralBackground1)",
             height: buttonHeightPx,
             paddingRight: 0,
             paddingLeft: 0,
@@ -87,15 +87,29 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
             minWidth: 24,
             marginLeft: isSplit ? 0 : 5,
             marginRight: isSplit ? 0 : 5,
+            color: "var(--colorNeutralForeground1)",
+            selectors: {
+              "&:hover": {
+                backgroundColor: "var(--colorNeutralBackground1Hover)",
+                color: "var(--colorNeutralForeground1)"
+              },
+              "&:active": {
+                backgroundColor: "var(--colorNeutralBackground1Pressed)",
+                color: "var(--colorNeutralForeground1)"
+              }
+            }
           },
           rootDisabled: {
-            backgroundColor: backgroundColor,
+            backgroundColor: "var(--colorNeutralBackground1)",
             pointerEvents: "auto",
+            color: "var(--colorNeutralForegroundDisabled)"
           },
           splitButtonMenuButton: {
-            backgroundColor: backgroundColor,
+            backgroundColor: "var(--colorNeutralBackground1)",
             selectors: {
-              ":hover": { backgroundColor: hoverColor },
+              ":hover": { 
+                backgroundColor: "var(--colorNeutralBackground1Hover)"
+              },
             },
             width: 16,
           },
@@ -104,13 +118,22 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
               configContext.platform == Platform.Fabric
                 ? StyleConstants.DefaultFontSize
                 : StyleConstants.mediumFontSize,
+            color: "var(--colorNeutralForeground1)"
+          },
+          rootHovered: { 
+            backgroundColor: "var(--colorNeutralBackground1Hover)",
+            color: "var(--colorNeutralForeground1)"
+          },
+          rootPressed: { 
+            backgroundColor: "var(--colorNeutralBackground1Pressed)",
+            color: "var(--colorNeutralForeground1)"
           },
-          rootHovered: { backgroundColor: hoverColor },
-          rootPressed: { backgroundColor: hoverColor },
           splitButtonMenuButtonExpanded: {
-            backgroundColor: StyleConstants.AccentExtra,
+            backgroundColor: "var(--colorNeutralBackground1Pressed)",
             selectors: {
-              ":hover": { backgroundColor: hoverColor },
+              ":hover": { 
+                backgroundColor: "var(--colorNeutralBackground1Hover)"
+              },
             },
           },
           splitButtonDivider: {
@@ -119,6 +142,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
           icon: {
             paddingLeft: 0,
             paddingRight: 0,
+            color: "var(--colorNeutralForeground1)"
           },
           splitButtonContainer: {
             marginLeft: 5,

src/Explorer/Menus/NotificationConsole/NotificationConsole.less

@@ -36,6 +36,10 @@
         &:active {
                 background-color:@NotificationHigh;
         }
+        
+        &:focus {
+            .focusedBorder();
+        }
 
         .statusBar {
             .dataTypeIcons {

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -81,10 +81,6 @@ export class NotificationConsoleComponent extends React.Component<
     }
   }
 
-  public setElememntRef = (element: HTMLElement): void => {
-    this.consoleHeaderElement = element;
-  };
-
   public render(): JSX.Element {
     const numInProgress = this.state.allConsoleData.filter(
       (data: ConsoleData) => data.type === ConsoleDataType.InProgress,
@@ -101,7 +97,9 @@ export class NotificationConsoleComponent extends React.Component<
         <div
           className="notificationConsoleHeader"
           id="notificationConsoleHeader"
-          ref={this.setElememntRef}
+          role="button"
+          aria-label="Console"
+          aria-expanded={this.props.isConsoleExpanded}
           onClick={() => this.expandCollapseConsole()}
           onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
           tabIndex={0}
@@ -109,15 +107,15 @@ export class NotificationConsoleComponent extends React.Component<
           <div className="statusBar">
             <span className="dataTypeIcons">
               <span className="notificationConsoleHeaderIconWithData">
-                <img src={LoadingIcon} alt="in progress items" />
+                <img src={LoadingIcon} alt="In progress items" />
                 <span className="numInProgress">{numInProgress}</span>
               </span>
               <span className="notificationConsoleHeaderIconWithData">
-                <img src={ErrorBlackIcon} alt="error items" />
+                <img src={ErrorBlackIcon} alt="Error items" />
                 <span className="numErroredItems">{numErroredItems}</span>
               </span>
               <span className="notificationConsoleHeaderIconWithData">
-                <img src={infoBubbleIcon} alt="info items" />
+                <img src={infoBubbleIcon} alt="Info items" />
                 <span className="numInfoItems">{numInfoItems}</span>
               </span>
             </span>
@@ -129,17 +127,10 @@ export class NotificationConsoleComponent extends React.Component<
               </span>
             </span>
           </div>
-          <div
-            className="expandCollapseButton"
-            data-test="NotificationConsole/ExpandCollapseButton"
-            role="button"
-            tabIndex={0}
-            aria-label={"console button" + (this.props.isConsoleExpanded ? " expanded" : " collapsed")}
-            aria-expanded={!this.props.isConsoleExpanded}
-          >
+          <div className="expandCollapseButton" data-test="NotificationConsole/ExpandCollapseButton">
             <img
               src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon}
-              alt={this.props.isConsoleExpanded ? "ChevronDownIcon" : "ChevronUpIcon"}
+              alt={this.props.isConsoleExpanded ? "Collapse icon" : "Expand icon"}
             />
           </div>
         </div>
@@ -259,9 +250,6 @@ export class NotificationConsoleComponent extends React.Component<
   }
 
   private onConsoleWasExpanded = (): void => {
-    if (this.props.isConsoleExpanded && this.consoleHeaderElement) {
-      this.consoleHeaderElement.focus();
-    }
     useNotificationConsole.getState().setConsoleAnimationFinished(true);
   };
 

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -5,10 +5,13 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
   className="notificationConsoleContainer"
 >
   <div
+    aria-expanded={false}
+    aria-label="Console"
     className="notificationConsoleHeader"
     id="notificationConsoleHeader"
     onClick={[Function]}
     onKeyDown={[Function]}
+    role="button"
     tabIndex={0}
   >
     <div
@@ -21,7 +24,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="in progress items"
+            alt="In progress items"
             src={{}}
           />
           <span
@@ -34,7 +37,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="error items"
+            alt="Error items"
             src={{}}
           />
           <span
@@ -47,7 +50,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="info items"
+            alt="Info items"
             src={{}}
           />
           <span
@@ -71,15 +74,11 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
       </span>
     </div>
     <div
-      aria-expanded={true}
-      aria-label="console button collapsed"
       className="expandCollapseButton"
       data-test="NotificationConsole/ExpandCollapseButton"
-      role="button"
-      tabIndex={0}
     >
       <img
-        alt="ChevronUpIcon"
+        alt="Expand icon"
         src=""
       />
     </div>
@@ -176,10 +175,13 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
   className="notificationConsoleContainer"
 >
   <div
+    aria-expanded={false}
+    aria-label="Console"
     className="notificationConsoleHeader"
     id="notificationConsoleHeader"
     onClick={[Function]}
     onKeyDown={[Function]}
+    role="button"
     tabIndex={0}
   >
     <div
@@ -192,7 +194,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="in progress items"
+            alt="In progress items"
             src={{}}
           />
           <span
@@ -205,7 +207,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="error items"
+            alt="Error items"
             src={{}}
           />
           <span
@@ -218,7 +220,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="info items"
+            alt="Info items"
             src={{}}
           />
           <span
@@ -244,15 +246,11 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
       </span>
     </div>
     <div
-      aria-expanded={true}
-      aria-label="console button collapsed"
       className="expandCollapseButton"
       data-test="NotificationConsole/ExpandCollapseButton"
-      role="button"
-      tabIndex={0}
     >
       <img
-        alt="ChevronUpIcon"
+        alt="Expand icon"
         src=""
       />
     </div>

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -2,7 +2,7 @@
  * Notebook container related stuff
  */
 import { useDialog } from "Explorer/Controls/Dialog";
-import promiseRetry, { AbortError } from "p-retry";
+import promiseRetry, { AbortError, Options } from "p-retry";
 import { PhoenixClient } from "Phoenix/PhoenixClient";
 import * as Constants from "../../Common/Constants";
 import { ConnectionStatusType, HttpHeaders, HttpStatusCodes, Notebook, PoolIdType } from "../../Common/Constants";
@@ -19,7 +19,7 @@ export class NotebookContainerClient {
   private clearReconnectionAttemptMessage? = () => {};
   private isResettingWorkspace: boolean;
   private phoenixClient: PhoenixClient;
-  private retryOptions: promiseRetry.Options;
+  private retryOptions: Options;
   private scheduleTimerId: NodeJS.Timeout;
 
   constructor(private onConnectionLost: () => void) {

src/Explorer/Notebook/useNotebook.ts

@@ -1,6 +1,5 @@
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
 import { PhoenixClient } from "Phoenix/PhoenixClient";
-import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
 import { cloneDeep } from "lodash";
 import create, { UseStore } from "zustand";
 import { AuthType } from "../../AuthType";
@@ -128,9 +127,7 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
       userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo"
         ? databaseAccount?.location
         : databaseAccount?.properties?.writeLocations?.[0]?.locationName.toLowerCase();
-    const disallowedLocationsUri: string = useNewPortalBackendEndpoint(Constants.BackendApi.DisallowedLocations)
-      ? `${configContext.PORTAL_BACKEND_ENDPOINT}/api/disallowedlocations`
-      : `${configContext.BACKEND_ENDPOINT}/api/disallowedLocations`;
+    const disallowedLocationsUri: string = `${configContext.PORTAL_BACKEND_ENDPOINT}/api/disallowedlocations`;
     const authorizationHeader = getAuthorizationHeader();
     try {
       const response = await fetch(disallowedLocationsUri, {

src/Explorer/OpenActions/OpenActions.tsx

@@ -1,5 +1,6 @@
 // TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.
 import { useDatabases } from "Explorer/useDatabases";
+import { isFabricMirrored } from "Platform/Fabric/FabricUtil";
 import React from "react";
 import { ActionContracts } from "../../Contracts/ExplorerContracts";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -56,6 +57,19 @@ function openCollectionTab(
         continue;
       }
 
+      if (
+        isFabricMirrored() &&
+        !(
+          // whitelist the tab kinds that are allowed to be opened in Fabric mirrored
+          (
+            action.tabKind === ActionContracts.TabKind.SQLDocuments ||
+            action.tabKind === ActionContracts.TabKind.SQLQuery
+          )
+        )
+      ) {
+        continue;
+      }
+
       //expand database first if not expanded to load the collections
       if (!database.isDatabaseExpanded?.()) {
         database.expandDatabase?.();
@@ -121,10 +135,28 @@ function openCollectionTab(
             action.tabKind === ActionContracts.TabKind.SQLQuery ||
             action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLQuery]
           ) {
+            const openQueryTabAction = action as ActionContracts.OpenQueryTab;
             collection.onNewQueryClick(
               collection,
               undefined,
-              generateQueryText(action as ActionContracts.OpenQueryTab, collection.partitionKeyProperties),
+              generateQueryText(openQueryTabAction, collection.partitionKeyProperties),
+              openQueryTabAction.splitterDirection,
+              openQueryTabAction.queryViewSizePercent,
+            );
+            break;
+          }
+
+          if (
+            action.tabKind === ActionContracts.TabKind.MongoQuery ||
+            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.MongoQuery]
+          ) {
+            const openQueryTabAction = action as ActionContracts.OpenQueryTab;
+            collection.onNewMongoQueryClick(
+              collection,
+              undefined,
+              generateQueryText(openQueryTabAction, collection.partitionKeyProperties),
+              openQueryTabAction.splitterDirection,
+              openQueryTabAction.queryViewSizePercent,
             );
             break;
           }

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -21,17 +21,28 @@ import { getNewDatabaseSharedThroughputDefault } from "Common/DatabaseUtility";
 import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import { configContext, Platform } from "ConfigContext";
 import * as DataModels from "Contracts/DataModels";
-import { AddVectorEmbeddingPolicyForm } from "Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm";
+import {
+  FullTextPoliciesComponent,
+  getFullTextLanguageOptions,
+} from "Explorer/Controls/FullTextSeach/FullTextPoliciesComponent";
+import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
+import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import React from "react";
 import { CollectionCreation } from "Shared/Constants";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { getCollectionName } from "Utils/APITypeUtils";
-import { isCapabilityEnabled, isServerlessAccount, isVectorSearchEnabled } from "Utils/CapabilityUtils";
+import {
+  isCapabilityEnabled,
+  isFullTextSearchEnabled,
+  isServerlessAccount,
+  isVectorSearchEnabled,
+} from "Utils/CapabilityUtils";
 import { getUpsellMessage } from "Utils/PricingUtils";
+import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import { CollapsibleSectionComponent } from "../Controls/CollapsiblePanel/CollapsibleSectionComponent";
 import { ThroughputInput } from "../Controls/ThroughputInput/ThroughputInput";
 import "../Controls/ThroughputInput/ThroughputInput.less";
@@ -109,6 +120,9 @@ export interface AddCollectionPanelState {
   vectorIndexingPolicy: DataModels.VectorIndex[];
   vectorEmbeddingPolicy: DataModels.VectorEmbedding[];
   vectorPolicyValidated: boolean;
+  fullTextPolicy: DataModels.FullTextPolicy;
+  fullTextIndexes: DataModels.FullTextIndex[];
+  fullTextPolicyValidated: boolean;
 }
 
 export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
@@ -147,6 +161,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       vectorEmbeddingPolicy: [],
       vectorIndexingPolicy: [],
       vectorPolicyValidated: true,
+      fullTextPolicy: { defaultLanguage: getFullTextLanguageOptions()[0].key as never, fullTextPaths: [] },
+      fullTextIndexes: [],
+      fullTextPolicyValidated: true,
     };
   }
 
@@ -269,150 +286,152 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
         )}
 
         <div className="panelMainContent">
-          <Stack hidden={userContext.apiType === "Tables"}>
-            <Stack horizontal>
-              <span className="mandatoryStar">*&nbsp;</span>
-              <Text className="panelTextBold" variant="small">
-                Database {userContext.apiType === "Mongo" ? "name" : "id"}
-              </Text>
-              <TooltipHost
-                directionalHint={DirectionalHint.bottomLeftEdge}
-                content={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
-                  true,
-                ).toLocaleLowerCase()}.`}
-              >
-                <Icon
-                  iconName="Info"
-                  className="panelInfoIcon"
-                  tabIndex={0}
-                  ariaLabel={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
+          {!(isFabricNative() && this.props.databaseId !== undefined) && (
+            <Stack hidden={userContext.apiType === "Tables"}>
+              <Stack horizontal>
+                <span className="mandatoryStar">*&nbsp;</span>
+                <Text className="panelTextBold" variant="small">
+                  Database {userContext.apiType === "Mongo" ? "name" : "id"}
+                </Text>
+                <TooltipHost
+                  directionalHint={DirectionalHint.bottomLeftEdge}
+                  content={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
                     true,
                   ).toLocaleLowerCase()}.`}
-                />
-              </TooltipHost>
-            </Stack>
-
-            {configContext.platform !== Platform.Fabric && (
-              <Stack horizontal verticalAlign="center">
-                <div role="radiogroup">
-                  <input
-                    className="panelRadioBtn"
-                    checked={this.state.createNewDatabase}
-                    aria-label="Create new database"
-                    aria-checked={this.state.createNewDatabase}
-                    name="databaseType"
-                    type="radio"
-                    role="radio"
-                    id="databaseCreateNew"
+                >
+                  <Icon
+                    iconName="Info"
+                    className="panelInfoIcon"
                     tabIndex={0}
-                    onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
+                    ariaLabel={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
+                      true,
+                    ).toLocaleLowerCase()}.`}
                   />
-                  <span className="panelRadioBtnLabel">Create new</span>
-
-                  <input
-                    className="panelRadioBtn"
-                    checked={!this.state.createNewDatabase}
-                    aria-label="Use existing database"
-                    aria-checked={!this.state.createNewDatabase}
-                    name="databaseType"
-                    type="radio"
-                    role="radio"
-                    tabIndex={0}
-                    onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
-                  />
-                  <span className="panelRadioBtnLabel">Use existing</span>
-                </div>
+                </TooltipHost>
               </Stack>
-            )}
 
-            {this.state.createNewDatabase && (
-              <Stack className="panelGroupSpacing">
-                <input
-                  name="newDatabaseId"
-                  id="newDatabaseId"
-                  aria-required
-                  required
-                  type="text"
-                  autoComplete="off"
-                  pattern="[^/?#\\]*[^/?# \\]"
-                  title="May not end with space nor contain characters '\' '/' '#' '?'"
-                  placeholder="Type a new database id"
-                  size={40}
-                  className="panelTextField"
-                  aria-label="New database id, Type a new database id"
-                  autoFocus
-                  tabIndex={0}
-                  value={this.state.newDatabaseId}
-                  onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                    this.setState({ newDatabaseId: event.target.value })
-                  }
-                />
-
-                {!isServerlessAccount() && (
-                  <Stack horizontal>
-                    <Checkbox
-                      label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`}
-                      checked={this.state.isSharedThroughputChecked}
-                      styles={{
-                        text: { fontSize: 12 },
-                        checkbox: { width: 12, height: 12 },
-                        label: { padding: 0, alignItems: "center" },
-                      }}
-                      onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
-                        this.setState({ isSharedThroughputChecked: isChecked })
-                      }
+              {configContext.platform !== Platform.Fabric && (
+                <Stack horizontal verticalAlign="center">
+                  <div role="radiogroup">
+                    <input
+                      className="panelRadioBtn"
+                      checked={this.state.createNewDatabase}
+                      aria-label="Create new database"
+                      aria-checked={this.state.createNewDatabase}
+                      name="databaseType"
+                      type="radio"
+                      role="radio"
+                      id="databaseCreateNew"
+                      tabIndex={0}
+                      onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
                     />
-                    <TooltipHost
-                      directionalHint={DirectionalHint.bottomLeftEdge}
-                      content={`Throughput configured at the database level will be shared across all ${getCollectionName(
-                        true,
-                      ).toLocaleLowerCase()} within the database.`}
-                    >
-                      <Icon
-                        iconName="Info"
-                        className="panelInfoIcon"
-                        tabIndex={0}
-                        ariaLabel={`Throughput configured at the database level will be shared across all ${getCollectionName(
+                    <span className="panelRadioBtnLabel">Create new</span>
+
+                    <input
+                      className="panelRadioBtn"
+                      checked={!this.state.createNewDatabase}
+                      aria-label="Use existing database"
+                      aria-checked={!this.state.createNewDatabase}
+                      name="databaseType"
+                      type="radio"
+                      role="radio"
+                      tabIndex={0}
+                      onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
+                    />
+                    <span className="panelRadioBtnLabel">Use existing</span>
+                  </div>
+                </Stack>
+              )}
+
+              {this.state.createNewDatabase && (
+                <Stack className="panelGroupSpacing">
+                  <input
+                    name="newDatabaseId"
+                    id="newDatabaseId"
+                    aria-required
+                    required
+                    type="text"
+                    autoComplete="off"
+                    pattern={ValidCosmosDbIdInputPattern.source}
+                    title={ValidCosmosDbIdDescription}
+                    placeholder="Type a new database id"
+                    size={40}
+                    className="panelTextField"
+                    aria-label="New database id, Type a new database id"
+                    autoFocus
+                    tabIndex={0}
+                    value={this.state.newDatabaseId}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                      this.setState({ newDatabaseId: event.target.value })
+                    }
+                  />
+
+                  {!isServerlessAccount() && (
+                    <Stack horizontal>
+                      <Checkbox
+                        label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`}
+                        checked={this.state.isSharedThroughputChecked}
+                        styles={{
+                          text: { fontSize: 12 },
+                          checkbox: { width: 12, height: 12 },
+                          label: { padding: 0, alignItems: "center" },
+                        }}
+                        onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                          this.setState({ isSharedThroughputChecked: isChecked })
+                        }
+                      />
+                      <TooltipHost
+                        directionalHint={DirectionalHint.bottomLeftEdge}
+                        content={`Throughput configured at the database level will be shared across all ${getCollectionName(
                           true,
                         ).toLocaleLowerCase()} within the database.`}
-                      />
-                    </TooltipHost>
-                  </Stack>
-                )}
+                      >
+                        <Icon
+                          iconName="Info"
+                          className="panelInfoIcon"
+                          tabIndex={0}
+                          ariaLabel={`Throughput configured at the database level will be shared across all ${getCollectionName(
+                            true,
+                          ).toLocaleLowerCase()} within the database.`}
+                        />
+                      </TooltipHost>
+                    </Stack>
+                  )}
 
-                {!isServerlessAccount() && this.state.isSharedThroughputChecked && (
-                  <ThroughputInput
-                    showFreeTierExceedThroughputTooltip={this.isFreeTierAccount() && !isFirstResourceCreated}
-                    isDatabase={true}
-                    isSharded={this.state.isSharded}
-                    isFreeTier={this.isFreeTierAccount()}
-                    isQuickstart={this.props.isQuickstart}
-                    setThroughputValue={(throughput: number) => (this.newDatabaseThroughput = throughput)}
-                    setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
-                    setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
-                      this.setState({ isThroughputCapExceeded })
-                    }
-                    onCostAcknowledgeChange={(isAcknowledge: boolean) => (this.isCostAcknowledged = isAcknowledge)}
-                  />
-                )}
-              </Stack>
-            )}
-            {!this.state.createNewDatabase && (
-              <Dropdown
-                ariaLabel="Choose an existing database"
-                styles={{ title: { height: 27, lineHeight: 27 }, dropdownItem: { fontSize: 12 } }}
-                style={{ width: 300, fontSize: 12 }}
-                placeholder="Choose an existing database"
-                options={this.getDatabaseOptions()}
-                onChange={(event: React.FormEvent<HTMLDivElement>, database: IDropdownOption) =>
-                  this.setState({ selectedDatabaseId: database.key as string })
-                }
-                defaultSelectedKey={this.props.databaseId}
-                responsiveMode={999}
-              />
-            )}
-            <Separator className="panelSeparator" />
-          </Stack>
+                  {!isServerlessAccount() && this.state.isSharedThroughputChecked && (
+                    <ThroughputInput
+                      showFreeTierExceedThroughputTooltip={this.isFreeTierAccount() && !isFirstResourceCreated}
+                      isDatabase={true}
+                      isSharded={this.state.isSharded}
+                      isFreeTier={this.isFreeTierAccount()}
+                      isQuickstart={this.props.isQuickstart}
+                      setThroughputValue={(throughput: number) => (this.newDatabaseThroughput = throughput)}
+                      setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
+                      setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
+                        this.setState({ isThroughputCapExceeded })
+                      }
+                      onCostAcknowledgeChange={(isAcknowledge: boolean) => (this.isCostAcknowledged = isAcknowledge)}
+                    />
+                  )}
+                </Stack>
+              )}
+              {!this.state.createNewDatabase && (
+                <Dropdown
+                  ariaLabel="Choose an existing database"
+                  styles={{ title: { height: 27, lineHeight: 27 }, dropdownItem: { fontSize: 12 } }}
+                  style={{ width: 300, fontSize: 12 }}
+                  placeholder="Choose an existing database"
+                  options={this.getDatabaseOptions()}
+                  onChange={(event: React.FormEvent<HTMLDivElement>, database: IDropdownOption) =>
+                    this.setState({ selectedDatabaseId: database.key as string })
+                  }
+                  defaultSelectedKey={this.props.databaseId}
+                  responsiveMode={999}
+                />
+              )}
+              <Separator className="panelSeparator" />
+            </Stack>
+          )}
 
           <Stack>
             <Stack horizontal>
@@ -441,8 +460,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               aria-required
               required
               autoComplete="off"
-              pattern="[^/?#\\]*[^/?# \\]"
-              title="May not end with space nor contain characters '\' '/' '#' '?'"
+              pattern={ValidCosmosDbIdInputPattern.source}
+              title={ValidCosmosDbIdDescription}
               placeholder={`e.g., ${getCollectionName()}1`}
               size={40}
               className="panelTextField"
@@ -651,7 +670,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     </Stack>
                   );
                 })}
-              {userContext.apiType === "SQL" && (
+              {!isFabricNative() && userContext.apiType === "SQL" && (
                 <Stack className="panelGroupSpacing">
                   <DefaultButton
                     styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
@@ -732,7 +751,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             />
           )}
 
-          {userContext.apiType === "SQL" && (
+          {!isFabricNative() && userContext.apiType === "SQL" && (
             <Stack>
               <Stack horizontal>
                 <Text className="panelTextBold" variant="small">
@@ -804,22 +823,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
           {this.shouldShowAnalyticalStoreOptions() && (
             <Stack className="panelGroupSpacing">
-              <Stack horizontal>
-                <Text className="panelTextBold" variant="small">
-                  Analytical store
-                </Text>
-                <TooltipHost
-                  directionalHint={DirectionalHint.bottomLeftEdge}
-                  content={this.getAnalyticalStorageTooltipContent()}
-                >
-                  <Icon
-                    iconName="Info"
-                    className="panelInfoIcon"
-                    tabIndex={0}
-                    ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
-                  />
-                </TooltipHost>
-              </Stack>
+              <Text className="panelTextBold" variant="small">
+                {this.getAnalyticalStorageContent()}
+              </Text>
 
               <Stack horizontal verticalAlign="center">
                 <div role="radiogroup">
@@ -863,6 +869,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     <Link
                       href="https://aka.ms/cosmosdb-synapselink"
                       target="_blank"
+                      aria-label={Constants.ariaLabelForLearnMoreLink.AzureSynapseLink}
                       className="capacitycalculator-link"
                     >
                       Learn more
@@ -890,9 +897,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               >
                 <Stack id="collapsibleVectorPolicySectionContent" styles={{ root: { position: "relative" } }}>
                   <Stack styles={{ root: { paddingLeft: 40 } }}>
-                    <AddVectorEmbeddingPolicyForm
-                      vectorEmbedding={this.state.vectorEmbeddingPolicy}
-                      vectorIndex={this.state.vectorIndexingPolicy}
+                    <VectorEmbeddingPoliciesComponent
+                      vectorEmbeddings={this.state.vectorEmbeddingPolicy}
+                      vectorIndexes={this.state.vectorIndexingPolicy}
                       onVectorEmbeddingChange={(
                         vectorEmbeddingPolicy: DataModels.VectorEmbedding[],
                         vectorIndexingPolicy: DataModels.VectorIndex[],
@@ -906,7 +913,35 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               </CollapsibleSectionComponent>
             </Stack>
           )}
-          {userContext.apiType !== "Tables" && (
+          {this.shouldShowFullTextSearchParameters() && (
+            <Stack>
+              <CollapsibleSectionComponent
+                title="Container Full Text Search Policy"
+                isExpandedByDefault={false}
+                onExpand={() => {
+                  this.scrollToSection("collapsibleFullTextPolicySectionContent");
+                }}
+                //TODO: uncomment when learn more text becomes available
+                // tooltipContent={this.getContainerFullTextPolicyTooltipContent()}
+              >
+                <Stack id="collapsibleFullTextPolicySectionContent" styles={{ root: { position: "relative" } }}>
+                  <Stack styles={{ root: { paddingLeft: 40 } }}>
+                    <FullTextPoliciesComponent
+                      fullTextPolicy={this.state.fullTextPolicy}
+                      onFullTextPathChange={(
+                        fullTextPolicy: DataModels.FullTextPolicy,
+                        fullTextIndexes: DataModels.FullTextIndex[],
+                        fullTextPolicyValidated: boolean,
+                      ) => {
+                        this.setState({ fullTextPolicy, fullTextIndexes, fullTextPolicyValidated });
+                      }}
+                    />
+                  </Stack>
+                </Stack>
+              </CollapsibleSectionComponent>
+            </Stack>
+          )}
+          {!isFabricNative() && userContext.apiType !== "Tables" && (
             <CollapsibleSectionComponent
               title="Advanced"
               isExpandedByDefault={false}
@@ -1187,12 +1222,16 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     return "";
   }
 
-  private getAnalyticalStorageTooltipContent(): JSX.Element {
+  private getAnalyticalStorageContent(): JSX.Element {
     return (
       <Text variant="small">
         Enable analytical store capability to perform near real-time analytics on your operational data, without
         impacting the performance of transactional workloads.{" "}
-        <Link target="_blank" href="https://aka.ms/analytical-store-overview">
+        <Link
+          aria-label={Constants.ariaLabelForLearnMoreLink.AnalyticalStore}
+          target="_blank"
+          href="https://aka.ms/analytical-store-overview"
+        >
           Learn more
         </Link>
       </Text>
@@ -1211,8 +1250,21 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     );
   }
 
+  //TODO: uncomment when learn more text becomes available
+  // private getContainerFullTextPolicyTooltipContent(): JSX.Element {
+  //   return (
+  //     <Text variant="small">
+  //       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+  //       magna aliqua.{" "}
+  //       <Link target="_blank" href="https://aka.ms/CosmosFullTextSearch">
+  //         Learn more
+  //       </Link>
+  //     </Text>
+  //   );
+  // }
+
   private shouldShowCollectionThroughputInput(): boolean {
-    if (isServerlessAccount()) {
+    if (isFabricNative() || isServerlessAccount()) {
       return false;
     }
 
@@ -1238,7 +1290,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   }
 
   private shouldShowAnalyticalStoreOptions(): boolean {
-    if (configContext.platform === Platform.Emulator) {
+    if (isFabricNative() || configContext.platform === Platform.Emulator) {
       return false;
     }
 
@@ -1274,6 +1326,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     return isVectorSearchEnabled() && (isServerlessAccount() || this.shouldShowCollectionThroughputInput());
   }
 
+  private shouldShowFullTextSearchParameters() {
+    return isFullTextSearchEnabled() && (isServerlessAccount() || this.shouldShowCollectionThroughputInput());
+  }
+
   private parseUniqueKeys(): DataModels.UniqueKeyPolicy {
     if (this.state.uniqueKeys?.length === 0) {
       return undefined;
@@ -1330,9 +1386,16 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       return false;
     }
 
-    if (this.shouldShowVectorSearchParameters() && !this.state.vectorPolicyValidated) {
-      this.setState({ errorMessage: "Please fix errors in container vector policy" });
-      return false;
+    if (this.shouldShowVectorSearchParameters()) {
+      if (!this.state.vectorPolicyValidated) {
+        this.setState({ errorMessage: "Please fix errors in container vector policy" });
+        return false;
+      }
+
+      if (!this.state.fullTextPolicyValidated) {
+        this.setState({ errorMessage: "Please fix errors in container full text search polilcy" });
+        return false;
+      }
     }
 
     return true;
@@ -1423,6 +1486,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       };
     }
 
+    if (this.shouldShowFullTextSearchParameters()) {
+      indexingPolicy.fullTextIndexes = this.state.fullTextIndexes;
+    }
+
     const telemetryData = {
       database: {
         id: databaseId,
@@ -1482,6 +1549,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       uniqueKeyPolicy,
       createMongoWildcardIndex: this.state.createMongoWildCardIndex,
       vectorEmbeddingPolicy,
+      fullTextPolicy: this.state.fullTextPolicy,
     };
 
     this.setState({ isExecuting: true });

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -1,5 +1,6 @@
 import { Checkbox, Stack, Text, TextField } from "@fluentui/react";
 import { getNewDatabaseSharedThroughputDefault } from "Common/DatabaseUtility";
+import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import * as Constants from "../../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
@@ -204,8 +205,8 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
             type="text"
             aria-required="true"
             autoComplete="off"
-            pattern="[^/?#\\]*[^/?# \\]"
-            title="May not end with space nor contain characters '\' '/' '#' '?'"
+            pattern={ValidCosmosDbIdInputPattern.source}
+            title={ValidCosmosDbIdDescription}
             size={40}
             aria-label={databaseIdLabel}
             placeholder={databaseIdPlaceHolder}

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

@@ -39,7 +39,7 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
         data-lpignore={true}
         id="database-id"
         onChange={[Function]}
-        pattern="[^/?#\\\\]*[^/?# \\\\]"
+        pattern="[^\\/?#\\\\]*[^\\/?# \\\\]"
         placeholder="Type a new database id"
         size={40}
         styles={

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx

@@ -7,6 +7,7 @@ import { Action } from "Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { isServerlessAccount } from "Utils/CapabilityUtils";
+import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import { useSidePanel } from "hooks/useSidePanel";
 import React, { FunctionComponent, useState } from "react";
 import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
@@ -202,8 +203,8 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
                 required={true}
                 autoComplete="off"
                 styles={getTextFieldStyles()}
-                pattern="[^/?#\\-]*[^/?#- \\]"
-                title="May not end with space nor contain characters '\' '/' '#' '?' '-'"
+                pattern={ValidCosmosDbIdInputPattern.source}
+                title={ValidCosmosDbIdDescription}
                 placeholder="Type a new keyspace id"
                 size={40}
                 value={newKeyspaceId}
@@ -292,8 +293,8 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
               required={true}
               ariaLabel="addCollection-table Id Create table"
               autoComplete="off"
-              pattern="[^/?#\\-]*[^/?#- \\]"
-              title="May not end with space nor contain characters '\' '/' '#' '?' '-'"
+              pattern={ValidCosmosDbIdInputPattern.source}
+              title={ValidCosmosDbIdDescription}
               placeholder="Enter table Id"
               size={20}
               value={tableId}

src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx

@@ -28,6 +28,7 @@ import { RightPaneForm } from "Explorer/Panes/RightPaneForm/RightPaneForm";
 import { useDatabases } from "Explorer/useDatabases";
 import { userContext } from "UserContext";
 import { getCollectionName } from "Utils/APITypeUtils";
+import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import { useSidePanel } from "hooks/useSidePanel";
 import * as React from "react";
 
@@ -235,8 +236,8 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                 aria-required
                 required
                 autoComplete="off"
-                pattern="[^/?#\\]*[^/?# \\]"
-                title="May not end with space nor contain characters '\' '/' '#' '?'"
+                pattern={ValidCosmosDbIdInputPattern.source}
+                title={ValidCosmosDbIdDescription}
                 placeholder={`e.g., ${getCollectionName()}1`}
                 size={40}
                 className="panelTextField"

src/Explorer/Panes/PanelComponent.less

@@ -94,6 +94,7 @@
     padding-left: @MediumSpace;
 
     .paneErrorLink {
+      color: @LinkColor;
       cursor: pointer;
       font-size: @mediumFontSize;
     }

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -32,6 +32,7 @@ import {
 } from "Shared/StorageUtility";
 import * as StringUtility from "Shared/StringUtility";
 import { updateUserContext, userContext } from "UserContext";
+import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
 import { acquireMsalTokenForAccount } from "Utils/AuthorizationUtils";
 import { logConsoleError, logConsoleInfo } from "Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "Utils/PriorityBasedExecutionUtils";
@@ -174,15 +175,26 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const styles = useStyles();
 
   const explorerVersion = configContext.gitSha;
+  const isEmulator = configContext.platform === Platform.Emulator;
   const shouldShowQueryPageOptions = userContext.apiType === "SQL";
-  const shouldShowGraphAutoVizOption = userContext.apiType === "Gremlin";
-  const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin";
-  const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
-  const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled();
+  const showRetrySettings =
+    (userContext.apiType === "SQL" || userContext.apiType === "Tables" || userContext.apiType === "Gremlin") &&
+    !isEmulator;
+  const shouldShowGraphAutoVizOption = userContext.apiType === "Gremlin" && !isEmulator;
+  const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin" && !isEmulator;
+  const shouldShowParallelismOption = userContext.apiType !== "Gremlin" && !isEmulator;
+  const showEnableEntraIdRbac =
+    isDataplaneRbacSupported(userContext.apiType) &&
+    userContext.authType === AuthType.AAD &&
+    configContext.platform !== Platform.Fabric &&
+    !isEmulator;
+  const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled() && !isEmulator;
   const shouldShowCopilotSampleDBOption =
     userContext.apiType === "SQL" &&
     useQueryCopilot.getState().copilotEnabled &&
-    useDatabases.getState().sampleDataResourceTokenCollection;
+    useDatabases.getState().sampleDataResourceTokenCollection &&
+    !isEmulator;
+
   const handlerOnSubmit = async () => {
     setIsExecuting(true);
 
@@ -193,6 +205,17 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
 
     LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
 
+    if (
+      enableDataPlaneRBACOption !== LocalStorageUtility.getEntryString(StorageKey.DataPlaneRbacEnabled) ||
+      retryAttempts !== LocalStorageUtility.getEntryNumber(StorageKey.RetryAttempts) ||
+      retryInterval !== LocalStorageUtility.getEntryNumber(StorageKey.RetryInterval) ||
+      MaxWaitTimeInSeconds !== LocalStorageUtility.getEntryNumber(StorageKey.MaxWaitTimeInSeconds)
+    ) {
+      updateUserContext({
+        refreshCosmosClient: true,
+      });
+    }
+
     if (configContext.platform !== Platform.Fabric) {
       LocalStorageUtility.setEntryString(StorageKey.DataPlaneRbacEnabled, enableDataPlaneRBACOption);
       if (
@@ -202,7 +225,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       ) {
         updateUserContext({
           dataPlaneRbacEnabled: true,
-          hasDataPlaneRbacSettingChanged: true,
         });
         useDataPlaneRbac.setState({ dataPlaneRbacEnabled: true });
         try {
@@ -226,7 +248,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       } else {
         updateUserContext({
           dataPlaneRbacEnabled: false,
-          hasDataPlaneRbacSettingChanged: true,
         });
         const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
         if (!userContext.features.enableAadDataPlane && !userContext.masterKey) {
@@ -482,7 +503,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   return (
     <RightPaneForm {...genericPaneProps}>
       <div className={`paneMainContent ${styles.container}`}>
-        <Accordion className={styles.firstItem}>
+        <Accordion className={`customAccordion ${styles.firstItem}`}>
           {shouldShowQueryPageOptions && (
             <AccordionItem value="1">
               <AccordionHeader>
@@ -532,40 +553,37 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionPanel>
             </AccordionItem>
           )}
-          {userContext.apiType === "SQL" &&
-            userContext.authType === AuthType.AAD &&
-            configContext.platform !== Platform.Fabric && (
-              <AccordionItem value="2">
-                <AccordionHeader>
-                  <div className={styles.header}>Enable Entra ID RBAC</div>
-                </AccordionHeader>
-                <AccordionPanel>
-                  <div className={styles.settingsSectionContainer}>
-                    <div className={styles.settingsSectionDescription}>
-                      Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra
-                      ID RBAC.
-                      <a
-                        href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        {" "}
-                        Learn more{" "}
-                      </a>
-                    </div>
-                    <ChoiceGroup
-                      ariaLabelledBy="enableDataPlaneRBACOptions"
-                      options={dataPlaneRBACOptionsList}
-                      styles={choiceButtonStyles}
-                      selectedKey={enableDataPlaneRBACOption}
-                      onChange={handleOnDataPlaneRBACOptionChange}
-                    />
+          {showEnableEntraIdRbac && (
+            <AccordionItem value="2">
+              <AccordionHeader>
+                <div className={styles.header}>Enable Entra ID RBAC</div>
+              </AccordionHeader>
+              <AccordionPanel>
+                <div className={styles.settingsSectionContainer}>
+                  <div className={styles.settingsSectionDescription}>
+                    Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra ID
+                    RBAC.
+                    <a
+                      href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {" "}
+                      Learn more{" "}
+                    </a>
                   </div>
-                </AccordionPanel>
-              </AccordionItem>
-            )}
-
-          {userContext.apiType === "SQL" && (
+                  <ChoiceGroup
+                    ariaLabelledBy="enableDataPlaneRBACOptions"
+                    options={dataPlaneRBACOptionsList}
+                    styles={choiceButtonStyles}
+                    selectedKey={enableDataPlaneRBACOption}
+                    onChange={handleOnDataPlaneRBACOptionChange}
+                  />
+                </div>
+              </AccordionPanel>
+            </AccordionItem>
+          )}
+          {userContext.apiType === "SQL" && !isEmulator && (
             <>
               <AccordionItem value="3">
                 <AccordionHeader>
@@ -663,102 +681,103 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionItem>
             </>
           )}
-
-          <AccordionItem value="6">
-            <AccordionHeader>
-              <div className={styles.header}>Retry Settings</div>
-            </AccordionHeader>
-            <AccordionPanel>
-              <div className={styles.settingsSectionContainer}>
-                <div className={styles.settingsSectionDescription}>
-                  Retry policy associated with throttled requests during CosmosDB queries.
+          {showRetrySettings && (
+            <AccordionItem value="6">
+              <AccordionHeader>
+                <div className={styles.header}>Retry Settings</div>
+              </AccordionHeader>
+              <AccordionPanel>
+                <div className={styles.settingsSectionContainer}>
+                  <div className={styles.settingsSectionDescription}>
+                    Retry policy associated with throttled requests during CosmosDB queries.
+                  </div>
+                  <div>
+                    <span className={styles.subHeader}>Max retry attempts</span>
+                    <InfoTooltip className={styles.headerIcon}>
+                      Max number of retries to be performed for a request. Default value 9.
+                    </InfoTooltip>
+                  </div>
+                  <SpinButton
+                    labelPosition={Position.top}
+                    min={1}
+                    step={1}
+                    value={"" + retryAttempts}
+                    onChange={handleOnQueryRetryAttemptsSpinButtonChange}
+                    incrementButtonAriaLabel="Increase value by 1"
+                    decrementButtonAriaLabel="Decrease value by 1"
+                    onIncrement={(newValue) => setRetryAttempts(parseInt(newValue) + 1 || retryAttempts)}
+                    onDecrement={(newValue) => setRetryAttempts(parseInt(newValue) - 1 || retryAttempts)}
+                    onValidate={(newValue) => setRetryAttempts(parseInt(newValue) || retryAttempts)}
+                    styles={spinButtonStyles}
+                  />
+                  <div>
+                    <span className={styles.subHeader}>Fixed retry interval (ms)</span>
+                    <InfoTooltip className={styles.headerIcon}>
+                      Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned
+                      as part of the response. Default value is 0 milliseconds.
+                    </InfoTooltip>
+                  </div>
+                  <SpinButton
+                    labelPosition={Position.top}
+                    min={1000}
+                    step={1000}
+                    value={"" + retryInterval}
+                    onChange={handleOnRetryIntervalSpinButtonChange}
+                    incrementButtonAriaLabel="Increase value by 1000"
+                    decrementButtonAriaLabel="Decrease value by 1000"
+                    onIncrement={(newValue) => setRetryInterval(parseInt(newValue) + 1000 || retryInterval)}
+                    onDecrement={(newValue) => setRetryInterval(parseInt(newValue) - 1000 || retryInterval)}
+                    onValidate={(newValue) => setRetryInterval(parseInt(newValue) || retryInterval)}
+                    styles={spinButtonStyles}
+                  />
+                  <div>
+                    <span className={styles.subHeader}>Max wait time (s)</span>
+                    <InfoTooltip className={styles.headerIcon}>
+                      Max wait time in seconds to wait for a request while the retries are happening. Default value 30
+                      seconds.
+                    </InfoTooltip>
+                  </div>
+                  <SpinButton
+                    labelPosition={Position.top}
+                    min={1}
+                    step={1}
+                    value={"" + MaxWaitTimeInSeconds}
+                    onChange={handleOnMaxWaitTimeSpinButtonChange}
+                    incrementButtonAriaLabel="Increase value by 1"
+                    decrementButtonAriaLabel="Decrease value by 1"
+                    onIncrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)}
+                    onDecrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)}
+                    onValidate={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) || MaxWaitTimeInSeconds)}
+                    styles={spinButtonStyles}
+                  />
                 </div>
-                <div>
-                  <span className={styles.subHeader}>Max retry attempts</span>
-                  <InfoTooltip className={styles.headerIcon}>
-                    Max number of retries to be performed for a request. Default value 9.
-                  </InfoTooltip>
+              </AccordionPanel>
+            </AccordionItem>
+          )}
+          {!isEmulator && (
+            <AccordionItem value="7">
+              <AccordionHeader>
+                <div className={styles.header}>Enable container pagination</div>
+              </AccordionHeader>
+              <AccordionPanel>
+                <div className={styles.settingsSectionContainer}>
+                  <div className={styles.settingsSectionDescription}>
+                    Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
+                  </div>
+                  <Checkbox
+                    styles={{
+                      label: { padding: 0 },
+                    }}
+                    className="padding"
+                    ariaLabel="Enable container pagination"
+                    checked={containerPaginationEnabled}
+                    onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
+                    label="Enable container pagination"
+                  />
                 </div>
-                <SpinButton
-                  labelPosition={Position.top}
-                  min={1}
-                  step={1}
-                  value={"" + retryAttempts}
-                  onChange={handleOnQueryRetryAttemptsSpinButtonChange}
-                  incrementButtonAriaLabel="Increase value by 1"
-                  decrementButtonAriaLabel="Decrease value by 1"
-                  onIncrement={(newValue) => setRetryAttempts(parseInt(newValue) + 1 || retryAttempts)}
-                  onDecrement={(newValue) => setRetryAttempts(parseInt(newValue) - 1 || retryAttempts)}
-                  onValidate={(newValue) => setRetryAttempts(parseInt(newValue) || retryAttempts)}
-                  styles={spinButtonStyles}
-                />
-                <div>
-                  <span className={styles.subHeader}>Fixed retry interval (ms)</span>
-                  <InfoTooltip className={styles.headerIcon}>
-                    Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as
-                    part of the response. Default value is 0 milliseconds.
-                  </InfoTooltip>
-                </div>
-                <SpinButton
-                  labelPosition={Position.top}
-                  min={1000}
-                  step={1000}
-                  value={"" + retryInterval}
-                  onChange={handleOnRetryIntervalSpinButtonChange}
-                  incrementButtonAriaLabel="Increase value by 1000"
-                  decrementButtonAriaLabel="Decrease value by 1000"
-                  onIncrement={(newValue) => setRetryInterval(parseInt(newValue) + 1000 || retryInterval)}
-                  onDecrement={(newValue) => setRetryInterval(parseInt(newValue) - 1000 || retryInterval)}
-                  onValidate={(newValue) => setRetryInterval(parseInt(newValue) || retryInterval)}
-                  styles={spinButtonStyles}
-                />
-                <div>
-                  <span className={styles.subHeader}>Max wait time (s)</span>
-                  <InfoTooltip className={styles.headerIcon}>
-                    Max wait time in seconds to wait for a request while the retries are happening. Default value 30
-                    seconds.
-                  </InfoTooltip>
-                </div>
-                <SpinButton
-                  labelPosition={Position.top}
-                  min={1}
-                  step={1}
-                  value={"" + MaxWaitTimeInSeconds}
-                  onChange={handleOnMaxWaitTimeSpinButtonChange}
-                  incrementButtonAriaLabel="Increase value by 1"
-                  decrementButtonAriaLabel="Decrease value by 1"
-                  onIncrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)}
-                  onDecrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)}
-                  onValidate={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) || MaxWaitTimeInSeconds)}
-                  styles={spinButtonStyles}
-                />
-              </div>
-            </AccordionPanel>
-          </AccordionItem>
-
-          <AccordionItem value="7">
-            <AccordionHeader>
-              <div className={styles.header}>Enable container pagination</div>
-            </AccordionHeader>
-            <AccordionPanel>
-              <div className={styles.settingsSectionContainer}>
-                <div className={styles.settingsSectionDescription}>
-                  Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
-                </div>
-                <Checkbox
-                  styles={{
-                    label: { padding: 0 },
-                  }}
-                  className="padding"
-                  ariaLabel="Enable container pagination"
-                  checked={containerPaginationEnabled}
-                  onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
-                  label="Enable container pagination"
-                />
-              </div>
-            </AccordionPanel>
-          </AccordionItem>
-
+              </AccordionPanel>
+            </AccordionItem>
+          )}
           {shouldShowCrossPartitionOption && (
             <AccordionItem value="8">
               <AccordionHeader>
@@ -784,7 +803,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionPanel>
             </AccordionItem>
           )}
-
           {shouldShowParallelismOption && (
             <AccordionItem value="9">
               <AccordionHeader>
@@ -818,7 +836,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionPanel>
             </AccordionItem>
           )}
-
           {shouldShowPriorityLevelOption && (
             <AccordionItem value="10">
               <AccordionHeader>
@@ -842,7 +859,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionPanel>
             </AccordionItem>
           )}
-
           {shouldShowGraphAutoVizOption && (
             <AccordionItem value="11">
               <AccordionHeader>
@@ -864,7 +880,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionPanel>
             </AccordionItem>
           )}
-
           {shouldShowCopilotSampleDBOption && (
             <AccordionItem value="12">
               <AccordionHeader>

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

@@ -11,7 +11,7 @@ exports[`Settings Pane should render Default properly 1`] = `
     className="paneMainContent ___133e6fg_0000000 f22iagw f1vx9l62 f1l02sjl"
   >
     <Accordion
-      className="___1uf6361_0000000 fz7g6wx"
+      className="customAccordion ___1uf6361_0000000 fz7g6wx"
     >
       <AccordionItem
         value="1"
@@ -572,7 +572,7 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
     className="paneMainContent ___133e6fg_0000000 f22iagw f1vx9l62 f1l02sjl"
   >
     <Accordion
-      className="___1uf6361_0000000 fz7g6wx"
+      className="customAccordion ___1uf6361_0000000 fz7g6wx"
     >
       <AccordionItem
         value="6"

src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.tsx

@@ -1,300 +0,0 @@
-import {
-  DefaultButton,
-  Dropdown,
-  IDropdownOption,
-  IStyleFunctionOrObject,
-  ITextFieldStyleProps,
-  ITextFieldStyles,
-  IconButton,
-  Label,
-  Stack,
-  TextField,
-} from "@fluentui/react";
-import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
-import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
-import {
-  getDataTypeOptions,
-  getDistanceFunctionOptions,
-  getIndexTypeOptions,
-} from "Explorer/Panes/VectorSearchPanel/VectorSearchUtils";
-import React, { FunctionComponent, useState } from "react";
-
-export interface IAddVectorEmbeddingPolicyFormProps {
-  vectorEmbedding: VectorEmbedding[];
-  vectorIndex: VectorIndex[];
-  onVectorEmbeddingChange: (
-    vectorEmbeddings: VectorEmbedding[],
-    vectorIndexingPolicies: VectorIndex[],
-    validationPassed: boolean,
-  ) => void;
-}
-
-export interface VectorEmbeddingPolicyData {
-  path: string;
-  dataType: VectorEmbedding["dataType"];
-  distanceFunction: VectorEmbedding["distanceFunction"];
-  dimensions: number;
-  indexType: VectorIndex["type"] | "none";
-  pathError: string;
-  dimensionsError: string;
-}
-
-type VectorEmbeddingPolicyProperty = "dataType" | "distanceFunction" | "indexType";
-
-const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
-  fieldGroup: {
-    height: 27,
-  },
-  field: {
-    fontSize: 12,
-    padding: "0 8px",
-  },
-};
-
-const dropdownStyles = {
-  title: {
-    height: 27,
-    lineHeight: "24px",
-    fontSize: 12,
-  },
-  dropdown: {
-    height: 27,
-    lineHeight: "24px",
-  },
-  dropdownItem: {
-    fontSize: 12,
-  },
-};
-
-export const AddVectorEmbeddingPolicyForm: FunctionComponent<IAddVectorEmbeddingPolicyFormProps> = ({
-  vectorEmbedding,
-  vectorIndex,
-  onVectorEmbeddingChange,
-}): JSX.Element => {
-  const onVectorEmbeddingPathError = (path: string, index?: number): string => {
-    let error = "";
-    if (!path) {
-      error = "Vector embedding path should not be empty";
-    }
-    if (
-      index >= 0 &&
-      vectorEmbeddingPolicyData?.find(
-        (vectorEmbedding: VectorEmbeddingPolicyData, dataIndex: number) =>
-          dataIndex !== index && vectorEmbedding.path === path,
-      )
-    ) {
-      error = "Vector embedding path is already defined";
-    }
-    return error;
-  };
-
-  const onVectorEmbeddingDimensionError = (dimension: number, indexType: VectorIndex["type"] | "none"): string => {
-    let error = "";
-    if (dimension <= 0 || dimension > 4096) {
-      error = "Vector embedding dimension must be greater than 0 and less than or equal 4096";
-    }
-    if (indexType === "flat" && dimension > 505) {
-      error = "Maximum allowed dimension for flat index is 505";
-    }
-    return error;
-  };
-
-  const initializeData = (vectorEmbedding: VectorEmbedding[], vectorIndex: VectorIndex[]) => {
-    const mergedData: VectorEmbeddingPolicyData[] = [];
-    vectorEmbedding.forEach((embedding) => {
-      const matchingIndex = vectorIndex.find((index) => index.path === embedding.path);
-      mergedData.push({
-        ...embedding,
-        indexType: matchingIndex?.type || "none",
-        pathError: onVectorEmbeddingPathError(embedding.path),
-        dimensionsError: onVectorEmbeddingDimensionError(embedding.dimensions, matchingIndex?.type || "none"),
-      });
-    });
-    return mergedData;
-  };
-
-  const [vectorEmbeddingPolicyData, setVectorEmbeddingPolicyData] = useState<VectorEmbeddingPolicyData[]>(
-    initializeData(vectorEmbedding, vectorIndex),
-  );
-
-  React.useEffect(() => {
-    propagateData();
-  }, [vectorEmbeddingPolicyData]);
-
-  const propagateData = () => {
-    const vectorEmbeddings: VectorEmbedding[] = vectorEmbeddingPolicyData.map((policy: VectorEmbeddingPolicyData) => ({
-      dataType: policy.dataType,
-      dimensions: policy.dimensions,
-      distanceFunction: policy.distanceFunction,
-      path: policy.path,
-    }));
-    const vectorIndexingPolicies: VectorIndex[] = vectorEmbeddingPolicyData
-      .filter((policy: VectorEmbeddingPolicyData) => policy.indexType !== "none")
-      .map(
-        (policy) =>
-          ({
-            path: policy.path,
-            type: policy.indexType,
-          }) as VectorIndex,
-      );
-    const validationPassed = vectorEmbeddingPolicyData.every(
-      (policy: VectorEmbeddingPolicyData) => policy.pathError === "" && policy.dimensionsError === "",
-    );
-    onVectorEmbeddingChange(vectorEmbeddings, vectorIndexingPolicies, validationPassed);
-  };
-
-  const onVectorEmbeddingPathChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value.trim();
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    if (!vectorEmbeddings[index]?.path && !value.startsWith("/")) {
-      vectorEmbeddings[index].path = "/" + value;
-    } else {
-      vectorEmbeddings[index].path = value;
-    }
-    const error = onVectorEmbeddingPathError(value, index);
-    vectorEmbeddings[index].pathError = error;
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onVectorEmbeddingDimensionsChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(event.target.value.trim()) || 0;
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    const vectorEmbedding = vectorEmbeddings[index];
-    vectorEmbeddings[index].dimensions = value;
-    const error = onVectorEmbeddingDimensionError(value, vectorEmbedding.indexType);
-    vectorEmbeddings[index].dimensionsError = error;
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onVectorEmbeddingIndexTypeChange = (index: number, option: IDropdownOption): void => {
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    const vectorEmbedding = vectorEmbeddings[index];
-    vectorEmbeddings[index].indexType = option.key as never;
-    const error = onVectorEmbeddingDimensionError(vectorEmbedding.dimensions, vectorEmbedding.indexType);
-    vectorEmbeddings[index].dimensionsError = error;
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onVectorEmbeddingPolicyChange = (
-    index: number,
-    option: IDropdownOption,
-    property: VectorEmbeddingPolicyProperty,
-  ): void => {
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    vectorEmbeddings[index][property] = option.key as never;
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onAdd = () => {
-    setVectorEmbeddingPolicyData([
-      ...vectorEmbeddingPolicyData,
-      {
-        path: "",
-        dataType: "float32",
-        distanceFunction: "euclidean",
-        dimensions: 0,
-        indexType: "none",
-        pathError: onVectorEmbeddingPathError(""),
-        dimensionsError: onVectorEmbeddingDimensionError(0, "none"),
-      },
-    ]);
-  };
-
-  const onDelete = (index: number) => {
-    const vectorEmbeddings = vectorEmbeddingPolicyData.filter((_uniqueKey, j) => index !== j);
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  return (
-    <Stack tokens={{ childrenGap: 4 }}>
-      {vectorEmbeddingPolicyData.length > 0 &&
-        vectorEmbeddingPolicyData.map((vectorEmbeddingPolicy: VectorEmbeddingPolicyData, index: number) => (
-          <CollapsibleSectionComponent key={index} isExpandedByDefault={true} title={`Vector embedding ${index + 1}`}>
-            <Stack horizontal tokens={{ childrenGap: 4 }}>
-              <Stack
-                styles={{
-                  root: {
-                    margin: "0 0 6px 20px !important",
-                    paddingLeft: 20,
-                    width: "80%",
-                    borderLeft: "1px solid",
-                  },
-                }}
-              >
-                <Stack>
-                  <Label styles={{ root: { fontSize: 12 } }}>Path</Label>
-                  <TextField
-                    id={`vector-policy-path-${index + 1}`}
-                    required={true}
-                    placeholder="/vector1"
-                    styles={textFieldStyles}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onVectorEmbeddingPathChange(index, event)}
-                    value={vectorEmbeddingPolicy.path || ""}
-                    errorMessage={vectorEmbeddingPolicy.pathError}
-                  />
-                </Stack>
-                <Stack>
-                  <Label styles={{ root: { fontSize: 12 } }}>Data type</Label>
-                  <Dropdown
-                    required={true}
-                    styles={dropdownStyles}
-                    options={getDataTypeOptions()}
-                    selectedKey={vectorEmbeddingPolicy.dataType}
-                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
-                      onVectorEmbeddingPolicyChange(index, option, "dataType")
-                    }
-                  ></Dropdown>
-                </Stack>
-                <Stack>
-                  <Label styles={{ root: { fontSize: 12 } }}>Distance function</Label>
-                  <Dropdown
-                    required={true}
-                    styles={dropdownStyles}
-                    options={getDistanceFunctionOptions()}
-                    selectedKey={vectorEmbeddingPolicy.distanceFunction}
-                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
-                      onVectorEmbeddingPolicyChange(index, option, "distanceFunction")
-                    }
-                  ></Dropdown>
-                </Stack>
-                <Stack>
-                  <Label styles={{ root: { fontSize: 12 } }}>Dimensions</Label>
-                  <TextField
-                    id={`vector-policy-dimension-${index + 1}`}
-                    required={true}
-                    styles={textFieldStyles}
-                    value={String(vectorEmbeddingPolicy.dimensions || 0)}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                      onVectorEmbeddingDimensionsChange(index, event)
-                    }
-                    errorMessage={vectorEmbeddingPolicy.dimensionsError}
-                  />
-                </Stack>
-                <Stack>
-                  <Label styles={{ root: { fontSize: 12 } }}>Index type</Label>
-                  <Dropdown
-                    required={true}
-                    styles={dropdownStyles}
-                    options={getIndexTypeOptions()}
-                    selectedKey={vectorEmbeddingPolicy.indexType}
-                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
-                      onVectorEmbeddingIndexTypeChange(index, option)
-                    }
-                  ></Dropdown>
-                </Stack>
-              </Stack>
-              <IconButton
-                id={`delete-vector-policy-${index + 1}`}
-                iconProps={{ iconName: "Delete" }}
-                style={{ height: 27, margin: "auto" }}
-                onClick={() => onDelete(index)}
-              />
-            </Stack>
-          </CollapsibleSectionComponent>
-        ))}
-      <DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}>
-        Add vector embedding
-      </DefaultButton>
-    </Stack>
-  );
-};

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

@@ -93,7 +93,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           id="newDatabaseId"
           name="newDatabaseId"
           onChange={[Function]}
-          pattern="[^/?#\\\\]*[^/?# \\\\]"
+          pattern="[^\\/?#\\\\]*[^\\/?# \\\\]"
           placeholder="Type a new database id"
           required={true}
           size={40}
@@ -178,7 +178,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         id="collectionId"
         name="collectionId"
         onChange={[Function]}
-        pattern="[^/?#\\\\]*[^/?# \\\\]"
+        pattern="[^\\/?#\\\\]*[^\\/?# \\\\]"
         placeholder="e.g., Container1"
         required={true}
         size={40}
@@ -309,40 +309,24 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
     <Stack
       className="panelGroupSpacing"
     >
-      <Stack
-        horizontal={true}
+      <Text
+        className="panelTextBold"
+        variant="small"
       >
         <Text
-          className="panelTextBold"
           variant="small"
         >
-          Analytical store
+          Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads.
+           
+          <StyledLinkBase
+            aria-label="Learn more about analytical store."
+            href="https://aka.ms/analytical-store-overview"
+            target="_blank"
+          >
+            Learn more
+          </StyledLinkBase>
         </Text>
-        <StyledTooltipHostBase
-          content={
-            <Text
-              variant="small"
-            >
-              Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads.
-               
-              <StyledLinkBase
-                href="https://aka.ms/analytical-store-overview"
-                target="_blank"
-              >
-                Learn more
-              </StyledLinkBase>
-            </Text>
-          }
-          directionalHint={4}
-        >
-          <Icon
-            ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
-            className="panelInfoIcon"
-            iconName="Info"
-            tabIndex={0}
-          />
-        </StyledTooltipHostBase>
-      </Stack>
+      </Text>
       <Stack
         horizontal={true}
         verticalAlign="center"
@@ -400,6 +384,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           . Enable Synapse Link for this Cosmos DB account.
            
           <StyledLinkBase
+            aria-label="Learn more about Azure Synapse Link."
             className="capacitycalculator-link"
             href="https://aka.ms/cosmosdb-synapselink"
             target="_blank"

src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.tsx

@@ -79,9 +79,13 @@ export const QueryCopilotFeedbackModal = ({
             readOnly
           />
           <Text style={{ fontSize: 12, marginBottom: 14 }}>
-            By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the{" "}
+            Microsoft will process the feedback you submit pursuant to your organization’s instructions in order to
+            improve your and your organization’s experience with this product. If you have any questions about the use
+            of feedback data, please contact your tenant administrator. Processing of feedback data is governed by the
+            Microsoft Products and Services Data Protection Addendum between your organization and Microsoft, and the
+            feedback you submit is considered Personal Data under that addendum. Please see the{" "}
             {
-              <Link href="https://privacy.microsoft.com/privacystatement" target="_blank">
+              <Link href="https://go.microsoft.com/fwlink/?LinkId=521839" target="_blank">
                 Privacy statement
               </Link>
             }{" "}

src/Explorer/QueryCopilot/Modal/__snapshots__/QueryCopilotFeedbackModal.test.tsx.snap

@@ -99,10 +99,10 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
           }
         }
       >
-        By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
+        Microsoft will process the feedback you submit pursuant to your organization’s instructions in order to improve your and your organization’s experience with this product. If you have any questions about the use of feedback data, please contact your tenant administrator. Processing of feedback data is governed by the Microsoft Products and Services Data Protection Addendum between your organization and Microsoft, and the feedback you submit is considered Personal Data under that addendum. Please see the
          
         <StyledLinkBase
-          href="https://privacy.microsoft.com/privacystatement"
+          href="https://go.microsoft.com/fwlink/?LinkId=521839"
           target="_blank"
         >
           Privacy statement
@@ -236,10 +236,10 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
           }
         }
       >
-        By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
+        Microsoft will process the feedback you submit pursuant to your organization’s instructions in order to improve your and your organization’s experience with this product. If you have any questions about the use of feedback data, please contact your tenant administrator. Processing of feedback data is governed by the Microsoft Products and Services Data Protection Addendum between your organization and Microsoft, and the feedback you submit is considered Personal Data under that addendum. Please see the
          
         <StyledLinkBase
-          href="https://privacy.microsoft.com/privacystatement"
+          href="https://go.microsoft.com/fwlink/?LinkId=521839"
           target="_blank"
         >
           Privacy statement
@@ -373,10 +373,10 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
           }
         }
       >
-        By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
+        Microsoft will process the feedback you submit pursuant to your organization’s instructions in order to improve your and your organization’s experience with this product. If you have any questions about the use of feedback data, please contact your tenant administrator. Processing of feedback data is governed by the Microsoft Products and Services Data Protection Addendum between your organization and Microsoft, and the feedback you submit is considered Personal Data under that addendum. Please see the
          
         <StyledLinkBase
-          href="https://privacy.microsoft.com/privacystatement"
+          href="https://go.microsoft.com/fwlink/?LinkId=521839"
           target="_blank"
         >
           Privacy statement
@@ -510,10 +510,10 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
           }
         }
       >
-        By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
+        Microsoft will process the feedback you submit pursuant to your organization’s instructions in order to improve your and your organization’s experience with this product. If you have any questions about the use of feedback data, please contact your tenant administrator. Processing of feedback data is governed by the Microsoft Products and Services Data Protection Addendum between your organization and Microsoft, and the feedback you submit is considered Personal Data under that addendum. Please see the
          
         <StyledLinkBase
-          href="https://privacy.microsoft.com/privacystatement"
+          href="https://go.microsoft.com/fwlink/?LinkId=521839"
           target="_blank"
         >
           Privacy statement
@@ -647,10 +647,10 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
           }
         }
       >
-        By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
+        Microsoft will process the feedback you submit pursuant to your organization’s instructions in order to improve your and your organization’s experience with this product. If you have any questions about the use of feedback data, please contact your tenant administrator. Processing of feedback data is governed by the Microsoft Products and Services Data Protection Addendum between your organization and Microsoft, and the feedback you submit is considered Personal Data under that addendum. Please see the
          
         <StyledLinkBase
-          href="https://privacy.microsoft.com/privacystatement"
+          href="https://go.microsoft.com/fwlink/?LinkId=521839"
           target="_blank"
         >
           Privacy statement
@@ -784,10 +784,10 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
           }
         }
       >
-        By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
+        Microsoft will process the feedback you submit pursuant to your organization’s instructions in order to improve your and your organization’s experience with this product. If you have any questions about the use of feedback data, please contact your tenant administrator. Processing of feedback data is governed by the Microsoft Products and Services Data Protection Addendum between your organization and Microsoft, and the feedback you submit is considered Personal Data under that addendum. Please see the
          
         <StyledLinkBase
-          href="https://privacy.microsoft.com/privacystatement"
+          href="https://go.microsoft.com/fwlink/?LinkId=521839"
           target="_blank"
         >
           Privacy statement
@@ -936,10 +936,10 @@ exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`]
           }
         }
       >
-        By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
+        Microsoft will process the feedback you submit pursuant to your organization’s instructions in order to improve your and your organization’s experience with this product. If you have any questions about the use of feedback data, please contact your tenant administrator. Processing of feedback data is governed by the Microsoft Products and Services Data Protection Addendum between your organization and Microsoft, and the feedback you submit is considered Personal Data under that addendum. Please see the
          
         <StyledLinkBase
-          href="https://privacy.microsoft.com/privacystatement"
+          href="https://go.microsoft.com/fwlink/?LinkId=521839"
           target="_blank"
         >
           Privacy statement

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -18,7 +18,7 @@ import {
   Text,
   TextField,
 } from "@fluentui/react";
-import { HttpStatusCodes, NormalizedEventKey } from "Common/Constants";
+import { FeedbackLabels, HttpStatusCodes, NormalizedEventKey } from "Common/Constants";
 import { handleError } from "Common/ErrorHandlingUtils";
 import QueryError, { QueryErrorSeverity } from "Common/QueryError";
 import { createUri } from "Common/UrlUtility";
@@ -75,6 +75,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
   const inputEdited = useRef(false);
   const itemRefs = useRef([]);
   const searchInputRef = useRef(null);
+  const copyQueryRef = useRef(null);
   const {
     openFeedbackModal,
     hideFeedbackModalForLikedQueries,
@@ -132,6 +133,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     document.body.removeChild(queryElement);
 
     setshowCopyPopup(true);
+    copyQueryRef.current.focus();
     setTimeout(() => {
       setshowCopyPopup(false);
     }, 6000);
@@ -305,7 +307,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     if (isGeneratingQuery === null) {
       return " ";
     } else if (isGeneratingQuery) {
-      return "Content is loading";
+      return "Thinking";
     } else {
       return "Content is updated";
     }
@@ -391,8 +393,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 },
               }}
               disabled={isGeneratingQuery}
-              autoComplete="list"
-              aria-expanded={showSamplePrompts}
+              autoComplete="off"
               placeholder="Ask a question in natural language and we’ll generate the query for you."
               aria-labelledby="copilot-textfield-label"
               onRenderSuffix={() => {
@@ -400,6 +401,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                   <IconButton
                     iconProps={{ iconName: "Send" }}
                     disabled={isGeneratingQuery || !userPrompt.trim()}
+                    allowDisabledFocus={true}
                     style={{ background: "none" }}
                     onClick={() => startGenerateQueryProcess()}
                     aria-label="Send"
@@ -577,7 +579,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 <Stack horizontal verticalAlign="center" style={{ maxHeight: 20 }}>
                   {userContext.feedbackPolicies?.policyAllowFeedback && (
                     <Stack horizontal verticalAlign="center">
-                      <Text style={{ fontSize: 12 }}>Provide feedback</Text>
+                      <Text style={{ fontSize: 12 }}>{FeedbackLabels.provideFeedback}</Text>
                       {showCallout && !hideFeedbackModalForLikedQueries && (
                         <Callout
                           role="status"
@@ -627,8 +629,9 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       <IconButton
                         id="likeBtn"
                         style={{ marginLeft: 10 }}
-                        aria-label="Like"
-                        role="toggle"
+                        aria-label={FeedbackLabels.provideFeedback}
+                        role="button"
+                        title="Like"
                         iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
                         onClick={() => {
                           setShowCallout(!likeQuery);
@@ -646,8 +649,9 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       />
                       <IconButton
                         style={{ margin: "0 4px" }}
-                        role="toggle"
-                        aria-label="Dislike"
+                        role="button"
+                        aria-label={FeedbackLabels.provideFeedback}
+                        title="Dislike"
                         iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
                         onClick={() => {
                           let toggleStatusValue = "Unpressed";
@@ -676,6 +680,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                   )}
                   <CommandBarButton
                     className="copyQuery"
+                    elementRef={copyQueryRef}
                     onClick={copyGeneratedCode}
                     iconProps={{ iconName: "Copy" }}
                     style={{ fontSize: 12, transition: "background-color 0.3s ease", height: "100%" }}
@@ -706,6 +711,9 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
               )}
             </Stack>
           )}
+          {(showFeedbackBar || isGeneratingQuery) && (
+            <span role="alert" className="screenReaderOnly" aria-label={getAriaLabel()} />
+          )}
           {isGeneratingQuery && (
             <ProgressIndicator
               label="Thinking..."

src/Explorer/QueryCopilot/Shared/QueryCopilotClient.ts

@@ -1,7 +1,6 @@
 import { FeedOptions } from "@azure/cosmos";
 import {
   Areas,
-  BackendApi,
   ConnectionStatusType,
   ContainerStatusType,
   HttpStatusCodes,
@@ -32,7 +31,6 @@ import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceFailure, traceStart, traceSuccess } from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { getAuthorizationHeader } from "Utils/AuthorizationUtils";
-import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
 import { queryPagesUntilContentPresent } from "Utils/QueryUtils";
 import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
 import { useTabs } from "hooks/useTabs";
@@ -82,9 +80,7 @@ export const isCopilotFeatureRegistered = async (subscriptionId: string): Promis
 };
 
 export const getCopilotEnabled = async (): Promise<boolean> => {
-  const backendEndpoint: string = useNewPortalBackendEndpoint(BackendApi.PortalSettings)
-    ? configContext.PORTAL_BACKEND_ENDPOINT
-    : configContext.BACKEND_ENDPOINT;
+  const backendEndpoint: string = configContext.PORTAL_BACKEND_ENDPOINT;
 
   const url = `${backendEndpoint}/api/portalsettings/querycopilot`;
   const authorizationHeader: AuthorizationTokenHeaderMetadata = getAuthorizationHeader();