Add changes for ARM/AAD Token renewal

.github/PULL_REQUEST_TEMPLATE.md

@@ -1 +1 @@
-[Preview this branch](https://dataexplorer-preview.azurewebsites.net/pull/EDIT_THIS_NUMBER_IN_THE_PR_DESCRIPTION?feature.someFeatureFlagYouMightNeed=true)
+[Preview this branch](https://cosmos-explorer-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@v4
+        uses: actions/cache@v2
         with:
           path: .cache
           key: ${{ runner.os }}-build-cache
@@ -96,16 +96,14 @@ jobs:
         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 ${{ secrets.PREVIEW_STORAGE_ACCOUNT_NAME }} --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --auth-mode login --overwrite true
+        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 }}
       - name: Upload preview config to blob storage
-        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
+        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 }}
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
@@ -115,21 +113,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@v4
         with:
           name: dist
       - run: cp ./configs/prod.json config.json
-      - run: dotnet nuget add source "$NUGET_SOURCE" --name "ADO" --username "jawelton@microsoft.com" --password "$AZURE_DEVOPS_PAT" --store-password-in-clear-text
+      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
-      - run: dotnet pack DataExplorer.proj /p:PackageVersion="2.0.0-github-${GITHUB_SHA}"
+      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
-      - run: dotnet nuget push "bin/Release/*.nupkg" --skip-duplicate --api-key Az --source="$NUGET_SOURCE"
+      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
-      - run: dotnet nuget remove source "ADO"
       - uses: actions/upload-artifact@v4
-        name: Upload package to Artifacts
+        name: packages
         with:
-          name: prod-package
+          path: "*.nupkg"
-          path: "bin/Release/*.nupkg"
-
   nugetmpac:
     name: Publish Nuget MPAC
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
@@ -139,21 +137,22 @@ 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@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: dotnet nuget add source "$NUGET_SOURCE" --name "ADO" --username "jawelton@microsoft.com" --password "$AZURE_DEVOPS_PAT" --store-password-in-clear-text
+      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
-      - run: dotnet pack DataExplorer.proj /p:PackageVersion="2.0.0-github-${GITHUB_SHA}"
+      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
-      - run: dotnet nuget push "bin/Release/*.nupkg" --skip-duplicate --api-key Az --source="$NUGET_SOURCE"
+      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
-      - run: dotnet nuget remove source "ADO"
       - uses: actions/upload-artifact@v4
-        name: Upload package to Artifacts
+        name: packages
         with:
-          name: mpac-package
+          path: "*.nupkg"
-          path: "bin/Release/*.nupkg"
 
   playwright-tests:
     name: "Run Playwright Tests (Shard ${{ matrix.shardIndex }} of ${{ matrix.shardTotal }})"
@@ -186,9 +185,9 @@ jobs:
         if: ${{ !cancelled() }}
         uses: actions/upload-artifact@v4
         with:
-          name: blob-report-${{ matrix.shardIndex }}
+            name: blob-report-${{ matrix.shardIndex }}
-          path: blob-report
+            path: blob-report
-          retention-days: 1
+            retention-days: 1
 
   merge-playwright-reports:
     name: "Merge Playwright Reports"
@@ -198,26 +197,26 @@ jobs:
 
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+    - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v4
-        with:
+      with:
-          node-version: 18
+        node-version: 18
-      - name: Install dependencies
+    - name: Install dependencies
-        run: npm ci
+      run: npm ci
 
-      - name: Download blob reports from GitHub Actions Artifacts
+    - name: Download blob reports from GitHub Actions Artifacts
-        uses: actions/download-artifact@v4
+      uses: actions/download-artifact@v4
-        with:
+      with:
-          path: all-blob-reports
+        path: all-blob-reports
-          pattern: blob-report-*
+        pattern: blob-report-*
-          merge-multiple: true
+        merge-multiple: true
 
-      - name: Merge into HTML Report
+    - name: Merge into HTML Report
-        run: npx playwright merge-reports --reporter html ./all-blob-reports
+      run: npx playwright merge-reports --reporter html ./all-blob-reports
 
-      - name: Upload HTML report
+    - name: Upload HTML report
-        uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v4
-        with:
+      with:
-          name: html-report--attempt-${{ github.run_attempt }}
+        name: html-report--attempt-${{ github.run_attempt }}
-          path: playwright-report
+        path: playwright-report
-          retention-days: 14
+        retention-days: 14

DataExplorer.proj

@@ -1,9 +0,0 @@
-<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>

less/Common/Constants.less

@@ -61,8 +61,6 @@
 
 @GalleryBackgroundColor: #fdfdfd;
 
-@LinkColor: #2d6da4;
-
 //Icons
 @InfoIconColor: #0072c6;
 @WarningIconColor: #db7500;
@@ -248,10 +246,6 @@
   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;
-  padding-left: 25px;
+  font-size: 14px;
-  padding-right: 25px;
 }
 
 .closebtnn {
@@ -1830,14 +1830,6 @@ 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;
@@ -1914,29 +1906,13 @@ input::-webkit-calendar-picker-indicator::after {
 }
 
 .nav-tabs-margin {
-  background-color: var(--colorNeutralBackground1);
+  height: 32px;
-  color: var(--colorNeutralForeground1);
+  background-color: #f2f2f2;
 
   .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);
-      }
-    }
   }
 }
 
@@ -1949,20 +1925,8 @@ input::-webkit-calendar-picker-indicator::after {
 .nav.nav-tabs.qslevel > li > a:hover {
   border: none;
   border-radius: 0;
-  background-color: var(--colorNeutralBackground1Selected) !important;
+  background-color: transparent !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 {
@@ -2396,9 +2360,7 @@ a:link {
   height: 100%;
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  min-width: 0; // This prevents it to grow past the parent's width if its content is too wide
-  background-color: var(--colorNeutralBackground1);
-  color: var(--colorNeutralForeground1);
 }
 
 .tabs {
@@ -2654,10 +2616,9 @@ a:link {
 }
 
 .tabPanesContainer {
+  display: flex;
   flex-grow: 1;
-  overflow-y: scroll;
+  overflow: hidden;
-  background-color: var(--colorNeutralBackground1);
-  color: var(--colorNeutralForeground1);
 }
 
 .tabs-container {
@@ -2679,11 +2640,11 @@ a:link {
 .nav-tabs > li.active > .tabNavContentContainer,
 .nav-tabs > li.active > .tabNavContentContainer:focus,
 .nav-tabs > li.active > .tabNavContentContainer:hover {
-  color: var(--colorNeutralForeground1);
+  color: #555;
   cursor: default;
-  background-color: var(--colorNeutralBackground1Selected);
+  background-color: @BaseLight;
-  border-color: var(--colorNeutralStroke1);
+  border-color: @BaseMedium;
-  // border-bottom-color: var(--colorCompoundBrandBackground);
+  border-bottom-color: @BaseLight;
   border-style: solid;
   border-width: 1px;
   height: @ActiveTabHeight;
@@ -2692,7 +2653,7 @@ a:link {
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
   font-weight: bolder;
-  border-bottom: 2px solid var(--colorCompoundBrandBackground);
+  border-bottom: 2px solid rgba(0, 120, 212, 1);
 }
 
 .nav-tabs > li.active:focus > .tabNavContentContainer {
@@ -2705,7 +2666,7 @@ a:link {
   justify-content: space-between;
   border-radius: 2px 2px 0 0;
   padding: @DefaultSpace 0px @SmallSpace 0px;
-  color: var(--colorNeutralForeground1);
+  color: @BaseHigh;
   width: @TabsWidth;
   text-align: center;
   position: relative;
@@ -2713,29 +2674,75 @@ a:link {
 
   &:hover {
     text-decoration: none;
-    background-color: var(--colorNeutralBackground1Hover);
+    background-color: @BaseMediumLow;
-    border-color: transparent;
+    border-color: @BaseMediumLow;
   }
 
   &:active {
-    background-color: var(--colorNeutralBackground1Pressed);
+    background-color: @BaseMediumLow;
   }
 
   .tab_Content {
     .flex-display();
     width: @TabsWidth;
-    border-right: @ButtonBorderWidth solid var(--colorNeutralStroke1);
+    border-right: @ButtonBorderWidth solid @BaseMedium;
     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: var(--colorNeutralForeground1);
+        color: @BaseDark;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
@@ -2746,36 +2753,21 @@ 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 {
-          background-color: var(--colorNeutralBackground1Hover);
+          .hover();
-          color: var(--colorNeutralForeground1);
         }
 
         &:focus {
-          background-color: var(--colorNeutralBackground1Pressed);
+          .focus();
-          color: var(--colorNeutralForeground1);
         }
 
         &:active {
-          background-color: var(--colorNeutralBackground1Pressed);
+          .active();
-          color: var(--colorNeutralForeground1);
-        }
-
-        &::before {
-          content: "×";
-          font-size: 16px;
-          line-height: 1;
         }
       }
     }
@@ -3129,12 +3121,3 @@ 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

@@ -37,40 +37,12 @@ a:focus {
 }
 
 .tabsManagerContainer {
-  background-color: var(--colorNeutralBackground1);
+  background-color: #ffffff;
-  color: var(--colorNeutralForeground1);
 }
 
 .nav-tabs-margin {
   padding-top: 5px;
-  background-color: var(--colorNeutralBackground1);
+  background-color: #ffffff;
-  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 {
@@ -95,12 +67,24 @@ 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: var(--colorNeutralBackground1Hover);
+    background-color: transparent;
     border-color: transparent;
   }
 
@@ -109,7 +93,6 @@ a:focus {
     margin: 0px @SmallSpace 0px @SmallSpace;
     width: calc(@TabsWidth - (@SmallSpace * 2));
     padding-bottom: @SmallSpace;
-    color: var(--colorNeutralForeground1);
 
     .contentWrapper {
       .statusIconContainer {
@@ -120,18 +103,17 @@ a:focus {
     .tabIconSection {
       .cancelButton {
         padding: 0px 0px 0px @SmallSpace;
-        color: var(--colorNeutralForeground1);
 
         &:hover {
-          background-color: var(--colorNeutralBackground1Hover);
+          background-color: transparent;
         }
 
         &:focus {
-          background-color: var(--colorNeutralBackground1Pressed);
+          background-color: transparent;
         }
 
         &:active {
-          background-color: var(--colorNeutralBackground1Pressed);
+          background-color: transparent;
         }
       }
     }

less/forms.less

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

less/tree.less

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

package.json

@@ -7,7 +7,8 @@
     "@azure/arm-cosmosdb": "9.1.0",
     "@azure/cosmos": "4.2.0-beta.1",
     "@azure/cosmos-language-service": "0.0.5",
-    "@azure/identity": "4.5.0",
+    "@azure/identity": "1.5.2",
+    "@azure/ms-rest-nodeauth": "3.1.1",
     "@azure/msal-browser": "2.14.2",
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
@@ -81,7 +82,7 @@
     "mkdirp": "1.0.4",
     "monaco-editor": "0.44.0",
     "ms": "2.1.3",
-    "p-retry": "6.2.1",
+    "p-retry": "4.6.2",
     "patch-package": "8.0.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
     "post-robot": "10.0.42",
@@ -116,7 +117,7 @@
     "@babel/preset-env": "7.24.7",
     "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
-    "@playwright/test": "1.49.1",
+    "@playwright/test": "1.44.0",
     "@testing-library/react": "11.2.3",
     "@types/applicationinsights-js": "1.0.7",
     "@types/codemirror": "0.0.56",
@@ -169,10 +170,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",

preview/.azure/config

@@ -1,7 +1,7 @@
 [defaults]
-group = dataexplorer-preview
+group = stfaul
-sku = P1V2
+sku = P1v2
-appserviceplan = dataexplorer-preview
+appserviceplan = stfaul_asp_Linux_centralus_0
-location = westus2
+location = centralus
-web = dataexplorer-preview
+web = cosmos-explorer-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://dataexplorer-preview.azurewebsites.net/commit/COMMIT_SHA/hostedExplorer.html
+Connection string URLs: https://cosmos-explorer-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
+Portal URLs: https://ms.portal.azure.com/?dataExplorerSource=https://cosmos-explorer-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://dataexplorer-preview.azurewebsites.net/"
+  "msalRedirectURI": "https://cosmos-explorer-preview.azurewebsites.net/"
 }

preview/index.js

@@ -3,15 +3,8 @@ const { createProxyMiddleware } = require("http-proxy-middleware");
 const port = process.env.PORT || 3000;
 const fetch = require("node-fetch");
 
-const backendEndpoint = "https://cdb-ms-mpac-pbe.cosmos.azure.com";
+const api = createProxyMiddleware("/api", {
-const previewSiteEndpoint = "https://dataexplorer-preview.azurewebsites.net";
+  target: "https://cdb-ms-mpac-pbe.cosmos.azure.com",
-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) => {
@@ -22,8 +15,8 @@ const api = createProxyMiddleware({
   },
 });
 
-const proxy = createProxyMiddleware({
+const proxy = createProxyMiddleware("/proxy", {
-  target: backendEndpoint,
+  target: "https://cdb-ms-mpac-pbe.cosmos.azure.com",
   changeOrigin: true,
   secure: false,
   logLevel: "debug",
@@ -34,38 +27,35 @@ const proxy = createProxyMiddleware({
   },
 });
 
-const commit = createProxyMiddleware({
+const commit = createProxyMiddleware("/commit", {
-  target: previewStorageWebsiteEndpoint,
+  target: "https://cosmosexplorerpreview.blob.core.windows.net",
   changeOrigin: true,
   secure: false,
   logLevel: "debug",
-  pathRewrite: { "^/commit": "/" },
+  pathRewrite: { "^/commit": "$web/" },
 });
 
 const app = express();
 
-app.use("/api", api);
+app.use(api);
-app.use("/proxy", proxy);
+app.use(proxy);
-app.use("/commit", commit);
+app.use(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(`${githubApiUrl}/pulls/${pr}`)
+  fetch("https://api.github.com/repos/Azure/cosmos-explorer/pulls/" + pr)
     .then((response) => response.json())
     .then(({ head: { ref, sha } }) => {
-      const prUrl = new URL(`${githubPullRequestUrl}/${pr}`);
+      const prUrl = new URL("https://github.com/Azure/cosmos-explorer/pull/" + pr);
       prUrl.hash = ref;
       search.set("feature.pr", prUrl.href);
 
-      const explorer = new URL(`${previewSiteEndpoint}/commit/${sha}/explorer.html`);
+      const explorer = new URL("https://cosmos-explorer-preview.azurewebsites.net/commit/" + sha + "/explorer.html");
       explorer.search = search.toString();
 
-      const portal = new URL(azurePortalMpacEndpoint);
+      const portal = new URL("https://ms.portal.azure.com/");
       portal.searchParams.set("dataExplorerSource", explorer.href);
 
       return res.redirect(portal.href);
@@ -73,10 +63,12 @@ app.get("/pull/:pr(\\d+)", (req, res) => {
     .catch(() => res.sendStatus(500));
 });
 app.get("/", (req, res) => {
-  fetch(`${githubApiUrl}/branches/master`)
+  fetch("https://api.github.com/repos/Azure/cosmos-explorer/branches/master")
     .then((response) => response.json())
     .then(({ commit: { sha } }) => {
-      const explorer = new URL(`${previewSiteEndpoint}/commit/${sha}/hostedExplorer.html`);
+      const explorer = new URL(
+        "https://cosmos-explorer-preview.azurewebsites.net/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 \"dataexplorer-preview\" --subscription \"cosmosdb-portalteam-runners\" --resource-group \"dataexplorer-preview\" --runtime \"NODE:18-lts\" --sku P1V2",
+    "deploy": "az webapp up --name \"cosmos-explorer-preview\" --subscription \"cosmosdb-portalteam-generaltest-msft\" --resource-group \"stfaul\"",
     "start": "node index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -12,8 +12,7 @@
   "author": "Microsoft Corporation",
   "dependencies": {
     "express": "^4.17.1",
-    "http-proxy-middleware": "^3.0.3",
+    "http-proxy-middleware": "^1.1.0",
-    "node": "^18.20.6",
     "node-fetch": "^2.6.1"
   }
 }

src/Common/Constants.ts

@@ -97,12 +97,6 @@ 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";
@@ -125,7 +119,6 @@ export class AfecFeatures {
 
 export class TagNames {
   public static defaultExperience: string = "defaultExperience";
-  public static WorkloadType: string = "hidden-workload-type";
 }
 
 export class MongoDBAccounts {
@@ -156,7 +149,7 @@ export class PortalBackendEndpoints {
 }
 
 export class MongoProxyEndpoints {
-  public static readonly Development: string = "https://localhost:7238";
+  public static readonly Local: 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";
@@ -525,15 +518,6 @@ export class PriorityLevel {
   public static readonly Default = "low";
 }
 
-export class ariaLabelForLearnMoreLink {
-  public static readonly AnalyticalStore = "Learn more about analytical store.";
-  public static readonly AzureSynapseLink = "Learn more about Azure Synapse Link.";
-}
-
-export class FeedbackLabels {
-  public static readonly provideFeedback: string = "Provide feedback";
-}
-
 export const QueryCopilotSampleDatabaseId = "CopilotSampleDB";
 export const QueryCopilotSampleContainerId = "SampleContainer";
 

src/Common/CosmosClient.ts

@@ -1,26 +1,26 @@
 import * as Cosmos from "@azure/cosmos";
 import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizationTokenUsingResourceTokens";
-import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
 import { AuthorizationToken } from "Contracts/FabricMessageTypes";
-import { checkDatabaseResourceTokensValidity, isFabricMirroredKey } from "Platform/Fabric/FabricUtil";
+import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
+import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
 import { AuthType } from "../AuthType";
-import { PriorityLevel } from "../Common/Constants";
+import { BackendApi, PriorityLevel } from "../Common/Constants";
 import * as Logger from "../Common/Logger";
 import { Platform, configContext } from "../ConfigContext";
-import { FabricArtifactInfo, updateUserContext, userContext } from "../UserContext";
+import { 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";
 import { getErrorMessage } from "./ErrorHandlingUtils";
+import { runCommand } from "hooks/useDatabaseAccounts";
 
 const _global = typeof self === "undefined" ? window : self;
 
 export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
 
-  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && isDataplaneRbacSupported(userContext.apiType);
+  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && userContext.apiType === "SQL";
   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} `,
@@ -33,6 +33,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
       return null;
     }
     const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
+    console.log("AAD Token ", userContext.aadToken);
     const authorizationToken = `${AUTH_PREFIX}${userContext.aadToken}`;
     return authorizationToken;
   }
@@ -43,7 +44,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
     return decodeURIComponent(headers.authorization);
   }
 
-  if (isFabricMirroredKey()) {
+  if (configContext.platform === Platform.Fabric) {
     switch (requestInfo.resourceType) {
       case Cosmos.ResourceType.conflicts:
       case Cosmos.ResourceType.container:
@@ -55,13 +56,8 @@ 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 = (
+        const resourceTokens = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
-          userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]
+        checkDatabaseResourceTokensValidity(userContext.fabricContext.databaseConnectionInfo.resourceTokensTimestamp);
-        ).resourceTokenInfo.resourceTokens;
-        checkDatabaseResourceTokensValidity(
-          (userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY])
-            .resourceTokenInfo.resourceTokensTimestamp,
-        );
         return getAuthorizationTokenUsingResourceTokens(resourceTokens, requestInfo.path, requestInfo.resourceId);
 
       case Cosmos.ResourceType.none:
@@ -72,9 +68,7 @@ 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 = (
+        const resourceTokens2 = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
-          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 **************
@@ -133,6 +127,10 @@ 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", {
@@ -155,6 +153,34 @@ 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,
@@ -165,24 +191,13 @@ let _client: Cosmos.CosmosClient;
 
 export function client(): Cosmos.CosmosClient {
   if (_client) {
-    if (!userContext.refreshCosmosClient) {
+    if (!userContext.hasDataPlaneRbacSettingChanged) {
       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 ||
@@ -196,10 +211,14 @@ export function client(): Cosmos.CosmosClient {
     _defaultHeaders["x-ms-cosmos-priority-level"] = PriorityLevel.Default;
   }
 
+  const wrappedTokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
+    return await runCommand(tokenProvider, requestInfo);
+  };
+
   const options: Cosmos.CosmosClientOptions = {
     endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
     key: userContext.dataPlaneRbacEnabled ? "" : userContext.masterKey,
-    tokenProvider,
+    tokenProvider: wrappedTokenProvider,
     userAgentSuffix: "Azure Portal",
     defaultHeaders: _defaultHeaders,
     connectionPolicy: {

src/Common/DatabaseAccountUtility.test.ts

@@ -1,34 +0,0 @@
-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,5 +1,3 @@
-import { TagNames, WorkloadType } from "Common/Constants";
-import { Tags } from "Contracts/DataModels";
 import { userContext } from "../UserContext";
 
 function isVirtualNetworkFilterEnabled() {
@@ -17,12 +15,3 @@ 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,8 +4,16 @@ 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 { deleteDocuments, getEndpoint, queryDocuments, readDocument, updateDocument } from "./MongoProxyClient";
+import {
+  deleteDocument,
+  getEndpoint,
+  getFeatureEndpointOrDefault,
+  queryDocuments,
+  readDocument,
+  updateDocument,
+} from "./MongoProxyClient";
 
 const databaseId = "testDB";
 
@@ -188,8 +196,20 @@ 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("deleteDocuments", () => {
+  describe("deleteDocument", () => {
     beforeEach(() => {
       resetConfigContext();
       updateUserContext({
@@ -206,9 +226,9 @@ describe("MongoProxyClient", () => {
     });
 
     it("builds the correct URL", () => {
-      deleteDocuments(databaseId, collection, [documentId]);
+      deleteDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
-        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer/bulkdelete`,
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
         expect.any(Object),
       );
     });
@@ -218,9 +238,9 @@ describe("MongoProxyClient", () => {
         MONGO_PROXY_ENDPOINT: "https://localhost:1234",
         globallyEnabledMongoAPIs: [],
       });
-      deleteDocuments(databaseId, collection, [documentId]);
+      deleteDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
-        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer/bulkdelete`,
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
         expect.any(Object),
       );
     });
@@ -255,4 +275,33 @@ 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,13 +1,20 @@
 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 } from "./Constants";
+import { ApiType, ContentType, HttpHeaders, HttpStatusCodes, MongoProxyApi, MongoProxyEndpoints } from "./Constants";
 import { MinimalQueryIterator } from "./IteratorUtilities";
 import { sendMessage } from "./MessageHandler";
 
@@ -60,6 +67,10 @@ 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 = {
@@ -78,7 +89,7 @@ export function queryDocuments(
     query,
   };
 
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT) || "";
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.ResourceList) || "";
 
   const headers = {
     ...defaultHeaders,
@@ -116,11 +127,76 @@ 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("/");
@@ -141,7 +217,7 @@ export function readDocument(
         : "",
   };
 
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.ReadDocument);
 
   return window
     .fetch(endpoint, {
@@ -161,12 +237,61 @@ 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 = {
@@ -183,7 +308,7 @@ export function createDocument(
     documentContent: JSON.stringify(documentContent),
   };
 
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.CreateDocument);
 
   return window
     .fetch(`${endpoint}/createDocument`, {
@@ -203,12 +328,54 @@ 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("/");
@@ -229,7 +396,7 @@ export function updateDocument(
         : "",
     documentContent,
   };
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.UpdateDocument);
 
   return window
     .fetch(endpoint, {
@@ -250,6 +417,139 @@ 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,
@@ -275,7 +575,7 @@ export function deleteDocuments(
     resourceGroup: userContext.resourceGroup,
     databaseAccountName: databaseAccount.name,
   };
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.BulkDelete);
 
   return window
     .fetch(`${endpoint}/bulkdelete`, {
@@ -299,6 +599,9 @@ 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];
 
@@ -319,7 +622,7 @@ export function createMongoCollectionWithProxy(
     isSharded: !!shardKey,
   };
 
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.CreateCollectionWithProxy);
 
   return window
     .fetch(`${endpoint}/createCollection`, {
@@ -339,6 +642,70 @@ 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";
 
@@ -352,6 +719,84 @@ 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/StyleConstants.ts

@@ -1,10 +1,10 @@
-import { isFabric } from "Platform/Fabric/FabricUtil";
+import { Platform, configContext } from "../ConfigContext";
 
 // 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 (isFabric()) {
+  if (configContext.platform === Platform.Fabric) {
     StyleConstants.AccentMediumHigh = StyleConstants.FabricAccentMediumHigh;
     StyleConstants.AccentMedium = StyleConstants.FabricAccentMedium;
     StyleConstants.AccentLight = StyleConstants.FabricAccentLight;

src/Common/dataAccess/createCollection.ts

@@ -1,5 +1,4 @@
 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";
@@ -25,7 +24,7 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
   );
   try {
     let collection: DataModels.Collection;
-    if (!isFabricNative() && userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       if (params.createNewDatabase) {
         const createDatabaseParams: DataModels.CreateDatabaseParams = {
           autoPilotMaxThroughput: params.autoPilotMaxThroughput,

src/Common/dataAccess/deleteCollection.ts

@@ -1,4 +1,3 @@
-import { isFabric } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
 import { deleteCassandraTable } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
@@ -13,7 +12,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 && !isFabric()) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       await deleteCollectionWithARM(databaseId, collectionId);
     } else {
       await client().database(databaseId).container(collectionId).delete();

src/Common/dataAccess/readCollectionOffer.ts

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

src/Common/dataAccess/readCollections.ts

@@ -1,10 +1,9 @@
 import { ContainerResponse } from "@azure/cosmos";
 import { Queries } from "Common/Constants";
-import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
+import { Platform, configContext } from "ConfigContext";
-import { isFabric, isFabricMirroredKey } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
-import { FabricArtifactInfo, userContext } from "../../UserContext";
+import { userContext } from "../../UserContext";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { listCassandraTables } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { listGremlinGraphs } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
@@ -17,13 +16,15 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
   const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
 
-  if (isFabricMirroredKey() && userContext.fabricContext?.databaseName === databaseId) {
+  if (
+    configContext.platform === Platform.Fabric &&
+    userContext.fabricContext &&
+    userContext.fabricContext.databaseConnectionInfo.databaseId === databaseId
+  ) {
     const collections: DataModels.Collection[] = [];
     const promises: Promise<ContainerResponse>[] = [];
 
-    for (const collectionResourceId in (
+    for (const collectionResourceId in userContext.fabricContext.databaseConnectionInfo.resourceTokens) {
-      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];
@@ -55,8 +56,7 @@ 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 { isFabric, isFabricMirroredKey, isFabricNative } from "Platform/Fabric/FabricUtil";
+import { Platform, configContext } from "ConfigContext";
 import { AuthType } from "../../AuthType";
 import { Offer, ReadDatabaseOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
@@ -11,9 +11,8 @@ import { handleError } from "../ErrorHandlingUtils";
 import { readOfferWithSDK } from "./readOfferWithSDK";
 
 export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promise<Offer> => {
-  if (isFabricMirroredKey() || isFabricNative()) {
+  if (configContext.platform === Platform.Fabric) {
-    // For Fabric Mirroring, it is slow, because it requests the token and we don't need it.
+    // TODO This works, but is very slow, because it requests the token, so we skip for now
-    // For Fabric Native, it is not supported.
     console.error("Skiping readDatabaseOffer for Fabric");
     return undefined;
   }
@@ -24,8 +23,7 @@ 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,8 +1,7 @@
-import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
+import { Platform, configContext } from "ConfigContext";
-import { isFabric, isFabricMirroredKey, isFabricNative } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
-import { FabricArtifactInfo, userContext } from "../../UserContext";
+import { userContext } from "../../UserContext";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { listCassandraKeyspaces } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { listGremlinDatabases } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
@@ -15,13 +14,8 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
   let databases: DataModels.Database[];
   const clearMessage = logConsoleProgress(`Querying databases`);
 
-  if (
+  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.databaseConnectionInfo.resourceTokens) {
-    isFabricMirroredKey() &&
+    const tokensData = userContext.fabricContext.databaseConnectionInfo;
-    (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
 
@@ -52,28 +46,13 @@ 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,5 +1,4 @@
 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";
@@ -37,8 +36,7 @@ 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,7 +1,6 @@
 import { OfferDefinition, RequestOptions } from "@azure/cosmos";
-import { isFabric } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
-import { Offer, SDKOfferDefinition, ThroughputBucket, UpdateOfferParams } from "../../Contracts/DataModels";
+import { Offer, SDKOfferDefinition, UpdateOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
 import {
   migrateCassandraKeyspaceToAutoscale,
@@ -57,7 +56,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 && !isFabric()) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       if (params.collectionId) {
         updatedOffer = await updateCollectionOfferWithARM(params);
       } else if (userContext.apiType === "Tables") {
@@ -360,13 +359,6 @@ 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,6 +12,7 @@ import {
   allowedGraphEndpoints,
   allowedHostedExplorerEndpoints,
   allowedJunoOrigins,
+  allowedMongoBackendEndpoints,
   allowedMsalRedirectEndpoints,
   defaultAllowedArmEndpoints,
   defaultAllowedBackendEndpoints,
@@ -49,8 +50,10 @@ 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[];
@@ -88,7 +91,7 @@ let configContext: Readonly<ConfigContext> = {
     `^https:\\/\\/.*\\.analysis-df\\.net$`,
     `^https:\\/\\/.*\\.analysis-df\\.windows\\.net$`,
     `^https:\\/\\/.*\\.azure-test\\.net$`,
-    `^https:\\/\\/dataexplorer-preview\\.azurewebsites\\.net$`,
+    `^https:\\/\\/cosmos-explorer-preview\\.azurewebsites\\.net$`,
   ], // Webpack injects this at build time
   gitSha: process.env.GIT_SHA,
   hostedExplorerURL: "https://cosmos.azure.com/",
@@ -106,6 +109,7 @@ 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,
@@ -148,6 +152,15 @@ 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,
@@ -157,6 +170,10 @@ 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,7 +9,6 @@ export enum TabKind {
   Graph,
   SQLQuery,
   ScaleSettings,
-  MongoQuery,
 }
 
 /**
@@ -52,8 +51,6 @@ export interface OpenCollectionTab extends OpenTab {
  */
 export interface OpenQueryTab extends OpenCollectionTab {
   query: QueryInfo;
-  splitterDirection?: "vertical" | "horizontal";
-  queryViewSizePercent?: number;
 }
 
 /**

src/Contracts/DataModels.ts

@@ -6,7 +6,6 @@ export interface ArmEntity {
   location: string;
   type: string;
   kind: string;
-  tags?: Tags;
 }
 
 export interface DatabaseAccount extends ArmEntity {
@@ -275,12 +274,6 @@ export interface Offer {
   offerReplacePending: boolean;
   instantMaximumThroughput?: number;
   softAllowedMaximumThroughput?: number;
-  throughputBuckets?: ThroughputBucket[];
-}
-
-export interface ThroughputBucket {
-  id: number;
-  maxThroughputPercentage: number;
 }
 
 export interface SDKOfferDefinition extends Resource {
@@ -403,7 +396,6 @@ export interface UpdateOfferParams {
   collectionId?: string;
   migrateToAutoPilot?: boolean;
   migrateToManual?: boolean;
-  throughputBuckets?: ThroughputBucket[];
 }
 
 export interface Notification {
@@ -671,5 +663,3 @@ export interface FeatureRegistration {
     state: string;
   };
 }
-
-export type Tags = { [key: string]: string };

src/Contracts/FabricMessageTypes.ts

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

src/Contracts/FabricMessagesContract.ts

@@ -1,9 +1,47 @@
-import { AuthorizationToken } from "./FabricMessageTypes";
+import { AuthorizationToken } from "Contracts/FabricMessageTypes";
 
 // This is the version of these messages
-export const FABRIC_RPC_VERSION = "FabricMessageV3";
+export const FABRIC_RPC_VERSION = "2";
 
 // 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";
@@ -31,7 +69,7 @@ export type FabricMessageV2 =
       message: {
         id: string;
         error: string | undefined;
-        data: ResourceTokenInfo | undefined;
+        data: FabricDatabaseConnectionInfo | undefined;
       };
     }
   | {
@@ -41,81 +79,17 @@ export type FabricMessageV2 =
       };
     };
 
-export type FabricMessageV3 =
+export type CosmosDBTokenResponse = {
-  | {
+  token: string;
-      type: "newContainer";
+  date: string;
-      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 enum CosmosDbArtifactType {
+export type CosmosDBConnectionInfoResponse = {
-  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: Record<string, string> | undefined;
+  resourceTokens: { [resourceId: string]: string };
-  accessToken: string | undefined;
+};
-  isReadOnly: boolean;
-  credentialType: "Key" | "OAuth2" | undefined;
-}
 
-export interface ResourceTokenInfo extends CosmosDBConnectionInfoResponse {
+export interface FabricDatabaseConnectionInfo extends CosmosDBConnectionInfoResponse {
   resourceTokensTimestamp: number;
 }

src/Contracts/MessageTypes.ts

@@ -41,7 +41,7 @@ export enum MessageTypes {
   OpenPostgreSQLPasswordReset,
   OpenPostgresNetworkingBlade,
   OpenCosmosDBNetworkingBlade,
-  DisplayNPSSurvey, // unused
+  DisplayNPSSurvey,
   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 type Explorer from "../Explorer/Explorer";
+import 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,13 +115,7 @@ export interface CollectionBase extends TreeNode {
   isSampleCollection?: boolean;
 
   onDocumentDBDocumentsClick(): void;
-  onNewQueryClick(
+  onNewQueryClick(source: any, event?: MouseEvent, queryText?: string): void;
-    source: any,
-    event?: MouseEvent,
-    queryText?: string,
-    splitterDirection?: "horizontal" | "vertical",
-    queryViewSizePercent?: number,
-  ): void;
   expandCollection(): void;
   collapseCollection(): void;
   getDatabase(): Database;
@@ -157,13 +151,7 @@ export interface Collection extends CollectionBase {
   onSettingsClick: () => Promise<void>;
 
   onNewGraphClick(): void;
-  onNewMongoQueryClick(
+  onNewMongoQueryClick(source: any, event?: MouseEvent, queryText?: string): void;
-    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;
@@ -323,8 +311,6 @@ export interface QueryTabOptions extends TabOptions {
   partitionKey?: DataModels.PartitionKey;
   queryText?: string;
   resourceTokenPartitionKey?: string;
-  splitterDirection?: "horizontal" | "vertical";
-  queryViewSizePercent?: number;
 }
 
 export interface ScriptTabOption extends TabOptions {
@@ -406,6 +392,7 @@ export interface DataExplorerInputsFrame {
   csmEndpoint?: string;
   dnsSuffix?: string;
   serverId?: string;
+  extensionEndpoint?: string;
   portalBackendEndpoint?: string;
   mongoProxyEndpoint?: string;
   cassandraProxyEndpoint?: string;
@@ -462,6 +449,3 @@ 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,7 +1,5 @@
-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";
@@ -21,6 +19,7 @@ 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";
@@ -42,7 +41,7 @@ export interface DatabaseContextMenuButtonParams {
  * New resource tree (in ReactJS)
  */
 export const createDatabaseContextMenu = (container: Explorer, databaseId: string): TreeNodeMenuItem[] => {
-  if (isFabric() && userContext.fabricContext?.isReadOnly) {
+  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly) {
     return undefined;
   }
 
@@ -54,7 +53,7 @@ export const createDatabaseContextMenu = (container: Explorer, databaseId: strin
     },
   ];
 
-  if (!isFabricNative() && (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations)) {
+  if (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations) {
     items.push({
       iconSrc: DeleteDatabaseIcon,
       onClick: (lastFocusedElement?: React.RefObject<HTMLElement>) => {
@@ -146,7 +145,7 @@ export const createCollectionContextMenuButton = (
     });
   }
 
-  if (!isFabric() || (isFabric() && !userContext.fabricContext?.isReadOnly)) {
+  if (configContext.platform !== Platform.Fabric) {
     items.push({
       iconSrc: DeleteCollectionIcon,
       onClick: (lastFocusedElement?: React.RefObject<HTMLElement>) => {

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -1,5 +1,4 @@
 import { Spinner, SpinnerSize } from "@fluentui/react";
-import { monacoTheme } from "hooks/useTheme";
 import * as React from "react";
 import { loadMonaco, monaco } from "../../LazyMonaco";
 // import "./EditorReact.less";
@@ -212,7 +211,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
       ariaLabel: this.props.ariaLabel,
       fontSize: this.props.fontSize || 12,
       automaticLayout: true,
-      theme: monacoTheme,
+      theme: this.props.theme,
       wordWrap: this.props.wordWrap || "off",
       lineNumbers: this.props.lineNumbers || "off",
       lineNumbersMinChars: this.props.lineNumbersMinChars,

src/Explorer/Controls/Settings/SettingsComponent.less

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

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

@@ -1,10 +1,5 @@
-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";
@@ -252,86 +247,4 @@ 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,4 +1,4 @@
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem, Stack, getTheme } from "@fluentui/react";
+import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
 import {
   ComputedPropertiesComponent,
   ComputedPropertiesComponentProps,
@@ -7,11 +7,6 @@ import {
   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 { isFullTextSearchEnabled, isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { isRunningOnPublicCloud } from "Utils/CloudUtils";
@@ -66,6 +61,7 @@ import {
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
 } from "./SettingsUtils";
+
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
   content: JSX.Element;
@@ -90,8 +86,6 @@ export interface SettingsComponentState {
   wasAutopilotOriginallySet: boolean;
   isScaleSaveable: boolean;
   isScaleDiscardable: boolean;
-  throughputBuckets: DataModels.ThroughputBucket[];
-  throughputBucketsBaseline: DataModels.ThroughputBucket[];
   throughputError: string;
 
   timeToLive: TtlType;
@@ -110,7 +104,6 @@ export interface SettingsComponentState {
   changeFeedPolicyBaseline: ChangeFeedPolicyState;
   isSubSettingsSaveable: boolean;
   isSubSettingsDiscardable: boolean;
-  isThroughputBucketsSaveable: boolean;
 
   vectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy;
   vectorEmbeddingPolicyBaseline: DataModels.VectorEmbeddingPolicy;
@@ -165,9 +158,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private isVectorSearchEnabled: boolean;
   private isFullTextSearchEnabled: boolean;
   private totalThroughputUsed: number;
-  private throughputBucketsEnabled: boolean;
   public mongoDBCollectionResource: MongoDBCollectionResource;
-  private unsubscribe: () => void;
+
   constructor(props: SettingsComponentProps) {
     super(props);
 
@@ -183,10 +175,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       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 =
@@ -205,8 +193,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       wasAutopilotOriginallySet: false,
       isScaleSaveable: false,
       isScaleDiscardable: false,
-      throughputBuckets: undefined,
-      throughputBucketsBaseline: undefined,
       throughputError: undefined,
 
       timeToLive: undefined,
@@ -225,7 +211,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       changeFeedPolicyBaseline: undefined,
       isSubSettingsSaveable: false,
       isSubSettingsDiscardable: false,
-      isThroughputBucketsSaveable: false,
 
       vectorEmbeddingPolicy: undefined,
       vectorEmbeddingPolicyBaseline: undefined,
@@ -298,19 +283,8 @@ 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());
@@ -353,8 +327,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.state.isIndexingPolicyDirty ||
       this.state.isConflictResolutionDirty ||
       this.state.isComputedPropertiesDirty ||
-      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicySaveable) ||
+      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicySaveable)
-      this.state.isThroughputBucketsSaveable
     );
   };
 
@@ -366,8 +339,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.state.isIndexingPolicyDirty ||
       this.state.isConflictResolutionDirty ||
       this.state.isComputedPropertiesDirty ||
-      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicyDiscardable) ||
+      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicyDiscardable)
-      this.state.isThroughputBucketsSaveable
     );
   };
 
@@ -447,8 +419,6 @@ 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,
@@ -471,7 +441,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       isScaleSaveable: false,
       isScaleDiscardable: false,
       isSubSettingsSaveable: false,
-      isThroughputBucketsSaveable: false,
       isSubSettingsDiscardable: false,
       isContainerPolicyDirty: false,
       isIndexingPolicyDirty: false,
@@ -510,10 +479,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   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 });
@@ -783,13 +748,10 @@ 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,
@@ -877,10 +839,6 @@ 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 });
 
@@ -934,31 +892,10 @@ 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 ||
@@ -1092,24 +1029,6 @@ 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,
@@ -1168,7 +1087,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   };
 
   public render(): JSX.Element {
-    const theme = getTheme();
     const scaleComponentProps: ScaleComponentProps = {
       collection: this.collection,
       database: this.database,
@@ -1186,6 +1104,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onScaleDiscardableChange: this.onScaleDiscardableChange,
       throughputError: this.state.throughputError,
     };
+
     if (!this.isCollectionSettingsTab) {
       return (
         <div className="settingsV2MainContainer">
@@ -1290,13 +1209,6 @@ 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,
@@ -1359,113 +1271,33 @@ 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 pivotStyles = {
+    const pivotItems = tabs.map((tab) => {
-      root: {
+      const pivotItemProps: IPivotItemProps = {
-        backgroundColor: 'var(--colorNeutralBackground1)',
+        itemKey: SettingsV2TabTypes[tab.tab],
-        color: 'var(--colorNeutralForeground1)',
+        style: { marginTop: 20 },
-        selectors: {
+        headerText: getTabTitle(tab.tab),
-          '& .ms-Pivot-link': {
+      };
-            color: 'var(--colorNeutralForeground1)'
-          },
-          '& .ms-Pivot-link.is-selected::before': {
-            backgroundColor: 'var(--colorCompoundBrandBackground)'
-          },
 
-        }
+      return (
-      },
+        <PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
-      link: {
+          {tab.content}
-        backgroundColor: 'var(--colorNeutralBackground1)',
+        </PivotItem>
-        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" style={{ 
+      <div className="settingsV2MainContainer">
-        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" style={{ 
+        <div className="settingsV2TabsContainer">
-          backgroundColor: 'var(--colorNeutralBackground1)',
+          <Pivot {...pivotProps}>{pivotItems}</Pivot>
-          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: "var(--colorNeutralForeground1)" } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
   label: {
@@ -166,7 +166,7 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
 };
 
 export const messageBarStyles: Partial<IMessageBarStyles> = {
-  root: { marginTop: "5px", backgroundColor: "var(--colorNeutralBackground1)" },
+  root: { marginTop: "5px", backgroundColor: "white" },
   text: { fontSize: 14 },
 };
 
@@ -214,11 +214,9 @@ export const getEstimatedSpendingElement = (
   const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
   return (
     <Stack>
-      <Text style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>Cost estimate*</Text>
+      <Text style={{ fontWeight: 600 }}>Cost estimate*</Text>
       {costElement}
-      <Text style={{ fontWeight: 600, marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
+      <Text style={{ fontWeight: 600, marginTop: 15 }}>How we calculate this</Text>
-        How we calculate this
-      </Text>
       <Stack id="throughputSpendElement" style={{ marginTop: 5 }}>
         <span>
           {numberOfRegions} region{numberOfRegions > 1 && <span>s</span>}
@@ -232,7 +230,7 @@ export const getEstimatedSpendingElement = (
           {priceBreakdown.pricePerRu}/RU
         </span>
       </Stack>
-      <Text style={{ marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
+      <Text style={{ marginTop: 15 }}>
         <em>*{estimatedCostDisclaimer}</em>
       </Text>
     </Stack>
@@ -274,7 +272,7 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
 
 export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => {
   return (
-    <Text id="updateThroughputDelayedApplyWarningMessage">
+    <Text styles={infoAndToolTipTextStyle} 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.
@@ -292,7 +290,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: "var(--colorNeutralForeground1)", marginTop: "5px" }}>
+      <ol style={{ fontSize: 14, color: "windowtext", 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>
@@ -328,7 +326,7 @@ export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Ele
 };
 
 export const saveThroughputWarningMessage: JSX.Element = (
-  <Text>
+  <Text styles={infoAndToolTipTextStyle}>
     Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
     before saving your changes
   </Text>
@@ -509,25 +507,11 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
     height: 25,
     width: 300,
     borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
-    backgroundColor: "var(--colorNeutralBackground3)",
     selectors: {
       ":disabled": {
-        backgroundColor: "var(--colorNeutralBackground1)",
+        backgroundColor: StyleConstants.BaseMedium,
         borderColor: StyleConstants.BaseMediumHigh,
       },
-      "input:disabled": {
-        backgroundColor: "var(--colorNeutralBackground3)",
-      },
-    },
-    field: {
-      color: "var(--colorNeutralForeground1)",
-    },
-  },
-  subComponentStyles: {
-    label: {
-      root: {
-        color: "var(--colorNeutralForeground1)",
-      },
     },
   },
 });
@@ -537,9 +521,6 @@ export const getChoiceGroupStyles = (
   baseline: isDirtyTypes,
   isHorizontal?: boolean,
 ): Partial<IChoiceGroupStyles> => ({
-  label: {
-    color: "var(--colorNeutralForeground1)",
-  },
   flexContainer: [
     {
       selectors: {
@@ -554,7 +535,6 @@ 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,7 +86,6 @@ 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/IndexingPolicyComponent.tsx

@@ -1,5 +1,4 @@
 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";
@@ -7,6 +6,7 @@ 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,71 +87,20 @@ export class IndexingPolicyComponent extends React.Component<
   };
 
   private async createIndexingPolicyEditor(): Promise<void> {
-    if (!this.indexingPolicyDiv.current) {
-      return;
-    }
     const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
     const monaco = await loadMonaco();
-    if (this.indexingPolicyDiv.current) {
+    this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
-      this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
+      value: value,
-        value: value,
+      language: "json",
-        language: "json",
+      readOnly: isIndexTransforming(this.props.indexTransformationProgress),
-        readOnly: isIndexTransforming(this.props.indexTransformationProgress),
+      ariaLabel: "Indexing Policy",
-        ariaLabel: "Indexing Policy",
+    });
-        theme: monacoTheme,
+    if (this.indexingPolicyEditor) {
-      });
+      const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
-      if (this.indexingPolicyEditor) {
+      indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
-        const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
+      this.props.logIndexingPolicySuccessMessage();
-        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();

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

@@ -1,10 +1,10 @@
-import { MessageBar, MessageBarType } from "@fluentui/react";
 import * as React from "react";
-import { handleError } from "../../../../../Common/ErrorHandlingUtils";
+import { MessageBar, MessageBarType } from "@fluentui/react";
 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,7 +14,6 @@ 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 {
@@ -56,15 +55,13 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
   const partitionKeyValue = getPartitionKeyValue();
 
   const textHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold, fontSize: 16, color: 'var(--colorNeutralForeground1)' },
+    root: { fontWeight: FontWeights.semibold, fontSize: 16 },
   };
 
   const textSubHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold , color: 'var(--colorNeutralForeground1)'  },
+    root: { fontWeight: FontWeights.semibold },
-  };
-  const textSubHeadingStyle1 = {
-    root: {color: 'var(--colorNeutralForeground1)'  },
   };
+
   const startPollingforUpdate = (currentJob: DataTransferJobGetResults) => {
     if (isCurrentJobInProgress(currentJob)) {
       const jobName = currentJob?.properties?.jobName;
@@ -160,8 +157,8 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
             <Text styles={textSubHeadingStyle}>Partitioning</Text>
           </Stack>
           <Stack tokens={{ childrenGap: 5 }}>
-            <Text styles={textSubHeadingStyle1}>{partitionKeyValue}</Text>
+            <Text>{partitionKeyValue}</Text>
-            <Text styles={textSubHeadingStyle1}>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
+            <Text>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
           </Stack>
         </Stack>
       </Stack>
@@ -176,18 +173,16 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
           Learn more
         </Link>
       </MessageBar>
-      <Text styles={textSubHeadingStyle1}>
+      <Text>
         To change the partition key, a new destination container must be created or an existing destination container
         selected. Data will then be copied to the destination container.
       </Text>
-      {configContext.platform !== Platform.Emulator && (
+      <PrimaryButton
-        <PrimaryButton
+        styles={{ root: { width: "fit-content" } }}
-          styles={{ root: { width: "fit-content" } }}
+        text="Change"
-          text="Change"
+        onClick={startPartitionkeyChangeWorkflow}
-          onClick={startPartitionkeyChangeWorkflow}
+        disabled={isCurrentJobInProgress(portalDataTransferJob)}
-          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, getTheme, mergeStyleSets } from "@fluentui/react";
+import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react";
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import { userContext } from "../../../../UserContext";
@@ -25,13 +25,6 @@ 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;
@@ -188,19 +181,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
     userContext.apiType === "Mongo" ? (
       <MessageBar
         messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-        styles={{
+        styles={{ text: { fontSize: 14 } }}
-          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">
@@ -342,14 +323,14 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
       )}
 
       {userContext.apiType === "SQL" && this.isLargePartitionKeyEnabled() && (
-        <Text className={classNames.hintText}>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
+        <Text>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
       )}
 
       {userContext.apiType === "SQL" &&
         (this.isHierarchicalPartitionedContainer() ? (
-          <Text className={classNames.hintText}>Hierarchically partitioned container.</Text>
+          <Text>Hierarchically partitioned container.</Text>
-      ) : (
+        ) : (
-        <Text className={classNames.hintText}>Non-hierarchically partitioned container.</Text>
+          <Text>Non-hierarchically partitioned container.</Text>
         ))}
     </Stack>
   );

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

@@ -1,177 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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,13 +17,14 @@ 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 } from "../../../../../Utils/PricingUtils";
+import { calculateEstimateNumber, usageInGB } from "../../../../../Utils/PricingUtils";
 import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
 import {
   PriceBreakdown,
@@ -235,12 +236,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       );
       return (
         <div>
-          <Text style={{ fontWeight: 600 , color: 'var(--colorNeutralForeground1)' }}>Updated cost per month</Text>
+          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
           <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
-            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)' }}>
+            <Text style={{ width: "50%" }}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)} min
             </Text>
-            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)'}}>
+            <Text style={{ width: "50%" }}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)} max
             </Text>
           </Stack>
@@ -253,12 +254,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       return (
         <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
           {newThroughput && newThroughputCostElement()}
-          <Text style={{ fontWeight: 600, color: 'var(--colorNeutralForeground1)' }}>Current cost per month</Text>
+          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
-          <Stack horizontal style={{ marginTop: 5, color: 'var(--colorNeutralForeground1)' }}>
+          <Stack horizontal style={{ marginTop: 5 }}>
-            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)' }}>
+            <Text style={{ width: "50%" }}>
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)} min
             </Text>
-            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)' }}>
+            <Text style={{ width: "50%" }}>
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)} max
             </Text>
           </Stack>
@@ -268,10 +269,7 @@ 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,
@@ -291,15 +289,15 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       );
       return (
         <div>
-          <Text style={{ fontWeight: 600, color: 'var(--colorNeutralForeground1)' }}>Updated cost per month</Text>
+          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
           <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
-            <Text style={ this.settingsAndScaleStyle.root }>
+            <Text style={{ width: "33%" }}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}/hr
             </Text>
-            <Text style={ this.settingsAndScaleStyle.root }>
+            <Text style={{ width: "33%" }}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}/day
             </Text>
-            <Text style={ this.settingsAndScaleStyle.root }>
+            <Text style={{ width: "33%" }}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}/mo
             </Text>
           </Stack>
@@ -312,15 +310,15 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       return (
         <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
           {newThroughput && newThroughputCostElement()}
-          <Text style={{ fontWeight: 600 , color: 'var(--colorNeutralForeground1)'}}>Current cost per month</Text>
+          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
           <Stack horizontal style={{ marginTop: 5 }}>
-            <Text style={ this.settingsAndScaleStyle.root }>
+            <Text style={{ width: "33%" }}>
               {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}/hr
             </Text>
-            <Text style={ this.settingsAndScaleStyle.root }>
+            <Text style={{ width: "33%" }}>
               {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}/day
             </Text>
-            <Text style={ this.settingsAndScaleStyle.root }>
+            <Text style={{ width: "33%" }}>
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}/mo
             </Text>
           </Stack>
@@ -368,6 +366,29 @@ 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 (
@@ -405,8 +426,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     const capacity: string = this.props.isFixed ? "Fixed" : "Unlimited";
     return (
       <Stack {...titleAndInputStackProps}>
-        <Label style={{ color: 'var(--colorNeutralForeground1)'}}>Storage capacity</Label>
+        <Label>Storage capacity</Label>
-        <Text  style={{ color: 'var(--colorNeutralForeground1)'}}>{capacity}</Text>
+        <Text>{capacity}</Text>
       </Stack>
     );
   };
@@ -611,7 +632,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
             </Stack>
           )}
           {this.props.isAutoPilotSelected ? (
-            <Text style={{ marginTop: "40px" , color: 'var(--colorNeutralForeground1)'}}>
+            <Text style={{ marginTop: "40px" }}>
               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) -{" "}
@@ -633,13 +654,14 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
             </>
           )}
           {!this.overrideWithProvisionedThroughputSettings() && (
-            <Text style={{ color: 'var(--colorNeutralForeground1)'}}>
+            <Text>
               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 , color: 'var(--colorNeutralForeground1)'}}>{this.props.label}</Text>}
+          {this.props.label && <Text style={{ fontWeight: 600 }}>{this.props.label}</Text>}
           {this.props.toolTipElement && (
             <TooltipHost
               content={this.props.toolTipElement}

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -11,8 +11,7 @@ export type isDirtyTypes =
   | DataModels.IndexingPolicy
   | DataModels.ComputedProperties
   | DataModels.VectorEmbedding[]
-  | DataModels.FullTextPolicy
+  | DataModels.FullTextPolicy;
-  | DataModels.ThroughputBucket[];
 export const TtlOff = "off";
 export const TtlOn = "on";
 export const TtlOnNoDefault = "on-nodefault";
@@ -56,7 +55,6 @@ export enum SettingsV2TabTypes {
   PartitionKeyTab,
   ComputedPropertiesTab,
   ContainerVectorPolicyTab,
-  ThroughputBucketsTab,
 }
 
 export enum ContainerPolicyTabTypes {
@@ -169,8 +167,6 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
       return "Computed Properties";
     case SettingsV2TabTypes.ContainerVectorPolicyTab:
       return "Container Policies";
-    case SettingsV2TabTypes.ThroughputBucketsTab:
-      return "Throughput Buckets";
     default:
       throw new Error(`Unknown tab ${tab}`);
   }

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

@@ -69,27 +69,6 @@ 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],
@@ -169,27 +148,6 @@ 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],
@@ -229,25 +187,17 @@ 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}
@@ -317,27 +267,6 @@ 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],
@@ -407,121 +336,6 @@ 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,5 +1,4 @@
 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";
@@ -35,23 +34,10 @@ 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>(defaultThroughput);
+  const [throughput, setThroughput] = useState<number>(
+    isFreeTier || isQuickstart ? AutoPilotUtils.autoPilotThroughput1K : AutoPilotUtils.autoPilotThroughput4K,
+  );
   const [isCostAcknowledged, setIsCostAcknowledged] = useState<boolean>(false);
   const [throughputError, setThroughputError] = useState<string>("");
   const [totalThroughputUsed, setTotalThroughputUsed] = useState<number>(0);
@@ -61,6 +47,7 @@ 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;
@@ -170,6 +157,9 @@ 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/DataExplorer.tsx

@@ -1,29 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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 { isFabricMirrored, isFabricMirroredKey, scheduleRefreshFabricToken } from "Platform/Fabric/FabricUtil";
+import { scheduleRefreshDatabaseResourceToken } 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 { updateUserContext, userContext } from "../UserContext";
+import { isAccountNewerThanThresholdInMs, 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 { ReactTabKind, useTabs } from "../hooks/useTabs";
+import { useTabs } from "../hooks/useTabs";
 import "./ComponentRegisterer";
 import { DialogProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
@@ -187,10 +187,6 @@ export default class Explorer {
       useNotebook.getState().setNotebookBasePath(userContext.features.notebookBasePath);
     }
 
-    if (isFabricMirrored()) {
-      useTabs.getState().closeReactTab(ReactTabKind.Home);
-    }
-
     this.refreshExplorer();
   }
 
@@ -282,6 +278,37 @@ 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(
@@ -351,8 +378,8 @@ export default class Explorer {
   };
 
   public onRefreshResourcesClick = async (): Promise<void> => {
-    if (isFabricMirroredKey()) {
+    if (configContext.platform === Platform.Fabric) {
-      scheduleRefreshFabricToken(true).then(() => this.refreshAllDatabases());
+      scheduleRefreshDatabaseResourceToken(true).then(() => this.refreshAllDatabases());
       return;
     }
 
@@ -1107,7 +1134,7 @@ export default class Explorer {
     if (userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo") {
       userContext.authType === AuthType.ResourceToken
         ? this.refreshDatabaseForResourceToken()
-        : await this.refreshAllDatabases(); // await: we rely on the databases to be loaded before restoring the tabs further in the flow
+        : this.refreshAllDatabases();
     }
     await useNotebook.getState().refreshNotebooksEnabledStateForAccount();
 
@@ -1131,7 +1158,7 @@ export default class Explorer {
       await this.initNotebooks(userContext.databaseAccount);
     }
 
-    this.refreshSampleData();
+    await this.refreshSampleData();
   }
 
   public async configureCopilot(): Promise<void> {
@@ -1156,27 +1183,26 @@ export default class Explorer {
       .setCopilotSampleDBEnabled(copilotEnabled && copilotUserDBEnabled && copilotSampleDBEnabled);
   }
 
-  public refreshSampleData(): void {
+  public async refreshSampleData(): Promise<void> {
-    if (!userContext.sampleDataConnectionInfo) {
+    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");
       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,6 +14,10 @@
       .flex-direction(@direction: row);
       padding: 4px 5px;
 
+      label {
+        padding: 0px;
+      }
+
       .valueCol {
         flex-grow: 1;
         padding-right: 5px;
@@ -59,10 +63,6 @@
     height: 100%;
   }
 
-  .customTrashIcon {
-    padding-top: 33px;
-  }
-
   .rightPaneTrashIconImg {
     vertical-align: top;
   }

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

@@ -142,11 +142,10 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 <div className="labelCol">
                   <TextField
                     className="edgeInput"
-                    label={index === 0 && "Key"}
                     type="text"
                     id="propertyKeyNewVertexPane"
                     componentRef={input}
-                    required
+                    aria-required="true"
                     placeholder="Key"
                     autoComplete="off"
                     aria-label={`Enter value for propery ${index + 1}`}
@@ -154,11 +153,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"
@@ -170,8 +169,6 @@ 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 }}
@@ -184,7 +181,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 </div>
                 <div className="actionCol">
                   <div
-                    className={`rightPaneTrashIcon rightPaneBtns ${index === 0 && "customTrashIcon"}`}
+                    className="rightPaneTrashIcon rightPaneBtns"
                     tabIndex={0}
                     role="button"
                     aria-label={`Delete ${data.key}`}

src/Explorer/Menus/CommandBar/CommandBarComponent.less

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

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,26 +30,18 @@ export interface CommandBarStore {
 }
 
 export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
-  contextButtons: [] as CommandButtonComponentProps[],
+  contextButtons: [],
   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 { targetDocument } = useFluent();
+  const backgroundColor = StyleConstants.BaseLight;
-  // 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 =
@@ -57,15 +49,12 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
         ? CommandBarComponentButtonFactory.createPostgreButtons(container)
         : CommandBarComponentButtonFactory.createVCoreMongoButtons(container);
     return (
-      <div className={styles.commandBarContainer} style={{ display: isHidden ? "none" : "initial" }}>
+      <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
         <FluentCommandBar
           ariaLabel="Use left and right arrow keys to navigate between commands"
-          items={CommandBarUtil.convertButton(buttons, "var(--colorNeutralBackground1)")}
+          items={CommandBarUtil.convertButton(buttons, backgroundColor)}
           styles={{
-            root: { 
+            root: { backgroundColor: backgroundColor },
-              backgroundColor: "var(--colorNeutralBackground1)",
-              color: "var(--colorNeutralForeground1)"
-            }
           }}
           overflowButtonProps={{ ariaLabel: "More commands" }}
         />
@@ -79,18 +68,18 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   );
   const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(container);
 
-  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, "var(--colorNeutralBackground1)");
+  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
   if (buttons && buttons.length > 0) {
     uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
   }
 
-  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, "var(--colorNeutralBackground1)");
+  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
 
   if (uiFabricTabsButtons.length > 0) {
     uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
   }
 
-  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, "var(--colorNeutralBackground1)");
+  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
   const connectionInfo = useNotebook((state) => state.connectionInfo);
@@ -104,27 +93,26 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
     );
   }
 
-  const rootStyle = isFabric()
+  const rootStyle =
-    ? {
+    configContext.platform === Platform.Fabric
-        root: {
+      ? {
-          backgroundColor: "var(--colorNeutralBackground1)",
+          root: {
-          padding: "2px 8px 0px 8px",
+            backgroundColor: "transparent",
-          color: "var(--colorNeutralForeground1)"
+            padding: "2px 8px 0px 8px",
+          },
         }
-      }
+      : {
-    : {
+          root: {
-        root: {
+            backgroundColor: backgroundColor,
-          backgroundColor: "var(--colorNeutralBackground1)",
+          },
-          color: "var(--colorNeutralForeground1)"
+        };
-        }
-      };
 
   const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
   const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);
   setKeyboardHandlers(keyboardHandlers);
 
   return (
-    <div className={styles.commandBarContainer} style={{ display: isHidden ? "none" : "initial" }}>
+    <div className="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,25 +37,21 @@ describe("CommandBarComponentButtonFactory tests", () => {
       expect(enableAzureSynapseLinkBtn).toBeDefined();
     });
 
-    // TODO: Now that Tables API supports dataplane RBAC, calling createStaticCommandBarButtons will enable the
+    it("Button should not be visible for Tables API", () => {
-    //       Entra ID Login button, which causes this test to fail due to "Invalid hook call.". This seems to be
+      updateUserContext({
-    //       unsupported in jest and needs to be tested with react-hooks-testing-library.
+        databaseAccount: {
-    //
+          properties: {
-    // it("Button should not be visible for Tables API", () => {
+            capabilities: [{ name: "EnableTable" }],
-    //   updateUserContext({
+          },
-    //     databaseAccount: {
+        } as DatabaseAccount,
-    //       properties: {
+      });
-    //         capabilities: [{ name: "EnableTable" }],
+
-    //       },
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
-    //     } as DatabaseAccount,
+      const enableAzureSynapseLinkBtn = buttons.find(
-    //   });
+        (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel,
-    //
+      );
-    //   const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      expect(enableAzureSynapseLinkBtn).toBeUndefined();
-    //  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,5 +1,4 @@
 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";
@@ -62,7 +61,7 @@ export function createStaticCommandBarButtons(
     }
   }
 
-  if (isDataplaneRbacSupported(userContext.apiType)) {
+  if (userContext.apiType === "SQL") {
     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,
+  Dropdown,
-    ICommandBarItemProps,
+  ICommandBarItemProps,
-    IComponentAsProps,
+  IComponentAsProps,
-    IconType,
+  IconType,
-    IDropdownOption,
+  IDropdownOption,
-    IDropdownStyles,
+  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,
+            width: StyleConstants.CommandBarIconWidth, // 16
             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: "var(--colorNeutralBackground1)",
+            backgroundColor: backgroundColor,
             height: buttonHeightPx,
             paddingRight: 0,
             paddingLeft: 0,
@@ -87,29 +87,15 @@ 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: "var(--colorNeutralBackground1)",
+            backgroundColor: backgroundColor,
             pointerEvents: "auto",
-            color: "var(--colorNeutralForegroundDisabled)"
           },
           splitButtonMenuButton: {
-            backgroundColor: "var(--colorNeutralBackground1)",
+            backgroundColor: backgroundColor,
             selectors: {
-              ":hover": { 
+              ":hover": { backgroundColor: hoverColor },
-                backgroundColor: "var(--colorNeutralBackground1Hover)"
-              },
             },
             width: 16,
           },
@@ -118,22 +104,13 @@ 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: "var(--colorNeutralBackground1Pressed)",
+            backgroundColor: StyleConstants.AccentExtra,
             selectors: {
-              ":hover": { 
+              ":hover": { backgroundColor: hoverColor },
-                backgroundColor: "var(--colorNeutralBackground1Hover)"
-              },
             },
           },
           splitButtonDivider: {
@@ -142,7 +119,6 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
           icon: {
             paddingLeft: 0,
             paddingRight: 0,
-            color: "var(--colorNeutralForeground1)"
           },
           splitButtonContainer: {
             marginLeft: 5,

src/Explorer/Menus/NotificationConsole/NotificationConsole.less

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

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -81,6 +81,10 @@ 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,
@@ -97,9 +101,7 @@ export class NotificationConsoleComponent extends React.Component<
         <div
           className="notificationConsoleHeader"
           id="notificationConsoleHeader"
-          role="button"
+          ref={this.setElememntRef}
-          aria-label="Console"
-          aria-expanded={this.props.isConsoleExpanded}
           onClick={() => this.expandCollapseConsole()}
           onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
           tabIndex={0}
@@ -107,15 +109,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>
@@ -127,10 +129,17 @@ export class NotificationConsoleComponent extends React.Component<
               </span>
             </span>
           </div>
-          <div className="expandCollapseButton" data-test="NotificationConsole/ExpandCollapseButton">
+          <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}
+          >
             <img
               src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon}
-              alt={this.props.isConsoleExpanded ? "Collapse icon" : "Expand icon"}
+              alt={this.props.isConsoleExpanded ? "ChevronDownIcon" : "ChevronUpIcon"}
             />
           </div>
         </div>
@@ -250,6 +259,9 @@ 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,13 +5,10 @@ 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
@@ -24,7 +21,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="In progress items"
+            alt="in progress items"
             src={{}}
           />
           <span
@@ -37,7 +34,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="Error items"
+            alt="error items"
             src={{}}
           />
           <span
@@ -50,7 +47,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="Info items"
+            alt="info items"
             src={{}}
           />
           <span
@@ -74,11 +71,15 @@ 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="Expand icon"
+        alt="ChevronUpIcon"
         src=""
       />
     </div>
@@ -175,13 +176,10 @@ 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
@@ -194,7 +192,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="In progress items"
+            alt="in progress items"
             src={{}}
           />
           <span
@@ -207,7 +205,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="Error items"
+            alt="error items"
             src={{}}
           />
           <span
@@ -220,7 +218,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="Info items"
+            alt="info items"
             src={{}}
           />
           <span
@@ -246,11 +244,15 @@ 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="Expand icon"
+        alt="ChevronUpIcon"
         src=""
       />
     </div>

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -2,7 +2,7 @@
  * Notebook container related stuff
  */
 import { useDialog } from "Explorer/Controls/Dialog";
-import promiseRetry, { AbortError, Options } from "p-retry";
+import promiseRetry, { AbortError } 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: Options;
+  private retryOptions: promiseRetry.Options;
   private scheduleTimerId: NodeJS.Timeout;
 
   constructor(private onConnectionLost: () => void) {

src/Explorer/Notebook/useNotebook.ts

@@ -1,5 +1,6 @@
 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";
@@ -127,7 +128,9 @@ 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 = `${configContext.PORTAL_BACKEND_ENDPOINT}/api/disallowedlocations`;
+    const disallowedLocationsUri: string = useNewPortalBackendEndpoint(Constants.BackendApi.DisallowedLocations)
+      ? `${configContext.PORTAL_BACKEND_ENDPOINT}/api/disallowedlocations`
+      : `${configContext.BACKEND_ENDPOINT}/api/disallowedLocations`;
     const authorizationHeader = getAuthorizationHeader();
     try {
       const response = await fetch(disallowedLocationsUri, {

src/Explorer/OpenActions/OpenActions.tsx

@@ -1,6 +1,5 @@
 // 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";
@@ -57,19 +56,6 @@ 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?.();
@@ -135,28 +121,10 @@ 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(openQueryTabAction, collection.partitionKeyProperties),
+              generateQueryText(action as ActionContracts.OpenQueryTab, 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

@@ -28,7 +28,6 @@ import {
 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";
@@ -42,7 +41,6 @@ import {
   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";
@@ -286,152 +284,150 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
         )}
 
         <div className="panelMainContent">
-          {!(isFabricNative() && this.props.databaseId !== undefined) && (
+          <Stack hidden={userContext.apiType === "Tables"}>
-            <Stack hidden={userContext.apiType === "Tables"}>
+            <Stack horizontal>
-              <Stack horizontal>
+              <span className="mandatoryStar">*&nbsp;</span>
-                <span className="mandatoryStar">*&nbsp;</span>
+              <Text className="panelTextBold" variant="small">
-                <Text className="panelTextBold" variant="small">
+                Database {userContext.apiType === "Mongo" ? "name" : "id"}
-                  Database {userContext.apiType === "Mongo" ? "name" : "id"}
+              </Text>
-                </Text>
+              <TooltipHost
-                <TooltipHost
+                directionalHint={DirectionalHint.bottomLeftEdge}
-                  directionalHint={DirectionalHint.bottomLeftEdge}
+                content={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
-                  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(
                     true,
                   ).toLocaleLowerCase()}.`}
-                >
+                />
-                  <Icon
+              </TooltipHost>
-                    iconName="Info"
+            </Stack>
-                    className="panelInfoIcon"
-                    tabIndex={0}
-                    ariaLabel={`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 && (
+            {configContext.platform !== Platform.Fabric && (
-                <Stack horizontal verticalAlign="center">
+              <Stack horizontal verticalAlign="center">
-                  <div role="radiogroup">
+                <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)}
-                    />
-                    <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"
+                    className="panelRadioBtn"
-                    id="newDatabaseId"
+                    checked={this.state.createNewDatabase}
-                    aria-required
+                    aria-label="Create new database"
-                    required
+                    aria-checked={this.state.createNewDatabase}
-                    type="text"
+                    name="databaseType"
-                    autoComplete="off"
+                    type="radio"
-                    pattern={ValidCosmosDbIdInputPattern.source}
+                    role="radio"
-                    title={ValidCosmosDbIdDescription}
+                    id="databaseCreateNew"
-                    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={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                      this.setState({ newDatabaseId: event.target.value })
-                    }
                   />
+                  <span className="panelRadioBtnLabel">Create new</span>
 
-                  {!isServerlessAccount() && (
+                  <input
-                    <Stack horizontal>
+                    className="panelRadioBtn"
-                      <Checkbox
+                    checked={!this.state.createNewDatabase}
-                        label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`}
+                    aria-label="Use existing database"
-                        checked={this.state.isSharedThroughputChecked}
+                    aria-checked={!this.state.createNewDatabase}
-                        styles={{
+                    name="databaseType"
-                          text: { fontSize: 12 },
+                    type="radio"
-                          checkbox: { width: 12, height: 12 },
+                    role="radio"
-                          label: { padding: 0, alignItems: "center" },
+                    tabIndex={0}
-                        }}
+                    onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
-                        onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                  />
-                          this.setState({ isSharedThroughputChecked: isChecked })
+                  <span className="panelRadioBtnLabel">Use existing</span>
-                        }
+                </div>
-                      />
+              </Stack>
-                      <TooltipHost
+            )}
-                        directionalHint={DirectionalHint.bottomLeftEdge}
+
-                        content={`Throughput configured at the database level will be shared across all ${getCollectionName(
+            {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 })
+                      }
+                    />
+                    <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(
                           true,
                         ).toLocaleLowerCase()} within the database.`}
-                      >
+                      />
-                        <Icon
+                    </TooltipHost>
-                          iconName="Info"
+                  </Stack>
-                          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 && (
+                {!isServerlessAccount() && this.state.isSharedThroughputChecked && (
-                    <ThroughputInput
+                  <ThroughputInput
-                      showFreeTierExceedThroughputTooltip={this.isFreeTierAccount() && !isFirstResourceCreated}
+                    showFreeTierExceedThroughputTooltip={this.isFreeTierAccount() && !isFirstResourceCreated}
-                      isDatabase={true}
+                    isDatabase={true}
-                      isSharded={this.state.isSharded}
+                    isSharded={this.state.isSharded}
-                      isFreeTier={this.isFreeTierAccount()}
+                    isFreeTier={this.isFreeTierAccount()}
-                      isQuickstart={this.props.isQuickstart}
+                    isQuickstart={this.props.isQuickstart}
-                      setThroughputValue={(throughput: number) => (this.newDatabaseThroughput = throughput)}
+                    setThroughputValue={(throughput: number) => (this.newDatabaseThroughput = throughput)}
-                      setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
+                    setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
-                      setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
+                    setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
-                        this.setState({ isThroughputCapExceeded })
+                      this.setState({ isThroughputCapExceeded })
-                      }
+                    }
-                      onCostAcknowledgeChange={(isAcknowledge: boolean) => (this.isCostAcknowledged = isAcknowledge)}
+                    onCostAcknowledgeChange={(isAcknowledge: boolean) => (this.isCostAcknowledged = isAcknowledge)}
-                    />
+                  />
-                  )}
+                )}
-                </Stack>
+              </Stack>
-              )}
+            )}
-              {!this.state.createNewDatabase && (
+            {!this.state.createNewDatabase && (
-                <Dropdown
+              <Dropdown
-                  ariaLabel="Choose an existing database"
+                ariaLabel="Choose an existing database"
-                  styles={{ title: { height: 27, lineHeight: 27 }, dropdownItem: { fontSize: 12 } }}
+                styles={{ title: { height: 27, lineHeight: 27 }, dropdownItem: { fontSize: 12 } }}
-                  style={{ width: 300, fontSize: 12 }}
+                style={{ width: 300, fontSize: 12 }}
-                  placeholder="Choose an existing database"
+                placeholder="Choose an existing database"
-                  options={this.getDatabaseOptions()}
+                options={this.getDatabaseOptions()}
-                  onChange={(event: React.FormEvent<HTMLDivElement>, database: IDropdownOption) =>
+                onChange={(event: React.FormEvent<HTMLDivElement>, database: IDropdownOption) =>
-                    this.setState({ selectedDatabaseId: database.key as string })
+                  this.setState({ selectedDatabaseId: database.key as string })
-                  }
+                }
-                  defaultSelectedKey={this.props.databaseId}
+                defaultSelectedKey={this.props.databaseId}
-                  responsiveMode={999}
+                responsiveMode={999}
-                />
+              />
-              )}
+            )}
-              <Separator className="panelSeparator" />
+            <Separator className="panelSeparator" />
-            </Stack>
+          </Stack>
-          )}
 
           <Stack>
             <Stack horizontal>
@@ -460,8 +456,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               aria-required
               required
               autoComplete="off"
-              pattern={ValidCosmosDbIdInputPattern.source}
+              pattern="[^/?#\\]*[^/?# \\]"
-              title={ValidCosmosDbIdDescription}
+              title="May not end with space nor contain characters '\' '/' '#' '?'"
               placeholder={`e.g., ${getCollectionName()}1`}
               size={40}
               className="panelTextField"
@@ -670,7 +666,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     </Stack>
                   );
                 })}
-              {!isFabricNative() && userContext.apiType === "SQL" && (
+              {userContext.apiType === "SQL" && (
                 <Stack className="panelGroupSpacing">
                   <DefaultButton
                     styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
@@ -751,7 +747,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             />
           )}
 
-          {!isFabricNative() && userContext.apiType === "SQL" && (
+          {userContext.apiType === "SQL" && (
             <Stack>
               <Stack horizontal>
                 <Text className="panelTextBold" variant="small">
@@ -823,9 +819,22 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
           {this.shouldShowAnalyticalStoreOptions() && (
             <Stack className="panelGroupSpacing">
-              <Text className="panelTextBold" variant="small">
+              <Stack horizontal>
-                {this.getAnalyticalStorageContent()}
+                <Text className="panelTextBold" variant="small">
-              </Text>
+                  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>
 
               <Stack horizontal verticalAlign="center">
                 <div role="radiogroup">
@@ -869,7 +878,6 @@ 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
@@ -941,7 +949,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               </CollapsibleSectionComponent>
             </Stack>
           )}
-          {!isFabricNative() && userContext.apiType !== "Tables" && (
+          {userContext.apiType !== "Tables" && (
             <CollapsibleSectionComponent
               title="Advanced"
               isExpandedByDefault={false}
@@ -1222,16 +1230,12 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     return "";
   }
 
-  private getAnalyticalStorageContent(): JSX.Element {
+  private getAnalyticalStorageTooltipContent(): 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
+        <Link target="_blank" href="https://aka.ms/analytical-store-overview">
-          aria-label={Constants.ariaLabelForLearnMoreLink.AnalyticalStore}
-          target="_blank"
-          href="https://aka.ms/analytical-store-overview"
-        >
           Learn more
         </Link>
       </Text>
@@ -1264,7 +1268,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   // }
 
   private shouldShowCollectionThroughputInput(): boolean {
-    if (isFabricNative() || isServerlessAccount()) {
+    if (isServerlessAccount()) {
       return false;
     }
 
@@ -1290,7 +1294,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   }
 
   private shouldShowAnalyticalStoreOptions(): boolean {
-    if (isFabricNative() || configContext.platform === Platform.Emulator) {
+    if (configContext.platform === Platform.Emulator) {
       return false;
     }
 

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -1,6 +1,5 @@
 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";
@@ -205,8 +204,8 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
             type="text"
             aria-required="true"
             autoComplete="off"
-            pattern={ValidCosmosDbIdInputPattern.source}
+            pattern="[^/?#\\]*[^/?# \\]"
-            title={ValidCosmosDbIdDescription}
+            title="May not end with space nor contain characters '\' '/' '#' '?'"
             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,7 +7,6 @@ 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";
@@ -203,8 +202,8 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
                 required={true}
                 autoComplete="off"
                 styles={getTextFieldStyles()}
-                pattern={ValidCosmosDbIdInputPattern.source}
+                pattern="[^/?#\\-]*[^/?#- \\]"
-                title={ValidCosmosDbIdDescription}
+                title="May not end with space nor contain characters '\' '/' '#' '?' '-'"
                 placeholder="Type a new keyspace id"
                 size={40}
                 value={newKeyspaceId}
@@ -293,8 +292,8 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
               required={true}
               ariaLabel="addCollection-table Id Create table"
               autoComplete="off"
-              pattern={ValidCosmosDbIdInputPattern.source}
+              pattern="[^/?#\\-]*[^/?#- \\]"
-              title={ValidCosmosDbIdDescription}
+              title="May not end with space nor contain characters '\' '/' '#' '?' '-'"
               placeholder="Enter table Id"
               size={20}
               value={tableId}

src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx

@@ -28,7 +28,6 @@ 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";
 
@@ -236,8 +235,8 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                 aria-required
                 required
                 autoComplete="off"
-                pattern={ValidCosmosDbIdInputPattern.source}
+                pattern="[^/?#\\]*[^/?# \\]"
-                title={ValidCosmosDbIdDescription}
+                title="May not end with space nor contain characters '\' '/' '#' '?'"
                 placeholder={`e.g., ${getCollectionName()}1`}
                 size={40}
                 className="panelTextField"

src/Explorer/Panes/PanelComponent.less

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

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -32,7 +32,6 @@ 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";
@@ -175,26 +174,15 @@ 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 showRetrySettings =
+  const shouldShowGraphAutoVizOption = userContext.apiType === "Gremlin";
-    (userContext.apiType === "SQL" || userContext.apiType === "Tables" || userContext.apiType === "Gremlin") &&
+  const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin";
-    !isEmulator;
+  const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
-  const shouldShowGraphAutoVizOption = userContext.apiType === "Gremlin" && !isEmulator;
+  const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled();
-  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);
 
@@ -205,17 +193,6 @@ 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 (
@@ -225,6 +202,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       ) {
         updateUserContext({
           dataPlaneRbacEnabled: true,
+          hasDataPlaneRbacSettingChanged: true,
         });
         useDataPlaneRbac.setState({ dataPlaneRbacEnabled: true });
         try {
@@ -248,6 +226,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       } else {
         updateUserContext({
           dataPlaneRbacEnabled: false,
+          hasDataPlaneRbacSettingChanged: true,
         });
         const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
         if (!userContext.features.enableAadDataPlane && !userContext.masterKey) {
@@ -503,7 +482,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   return (
     <RightPaneForm {...genericPaneProps}>
       <div className={`paneMainContent ${styles.container}`}>
-        <Accordion className={`customAccordion ${styles.firstItem}`}>
+        <Accordion className={styles.firstItem}>
           {shouldShowQueryPageOptions && (
             <AccordionItem value="1">
               <AccordionHeader>
@@ -553,37 +532,40 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionPanel>
             </AccordionItem>
           )}
-          {showEnableEntraIdRbac && (
+          {userContext.apiType === "SQL" &&
-            <AccordionItem value="2">
+            userContext.authType === AuthType.AAD &&
-              <AccordionHeader>
+            configContext.platform !== Platform.Fabric && (
-                <div className={styles.header}>Enable Entra ID RBAC</div>
+              <AccordionItem value="2">
-              </AccordionHeader>
+                <AccordionHeader>
-              <AccordionPanel>
+                  <div className={styles.header}>Enable Entra ID RBAC</div>
-                <div className={styles.settingsSectionContainer}>
+                </AccordionHeader>
-                  <div className={styles.settingsSectionDescription}>
+                <AccordionPanel>
-                    Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra ID
+                  <div className={styles.settingsSectionContainer}>
-                    RBAC.
+                    <div className={styles.settingsSectionDescription}>
-                    <a
+                      Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra
-                      href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
+                      ID RBAC.
-                      target="_blank"
+                      <a
-                      rel="noopener noreferrer"
+                        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>
+                        {" "}
+                        Learn more{" "}
+                      </a>
+                    </div>
+                    <ChoiceGroup
+                      ariaLabelledBy="enableDataPlaneRBACOptions"
+                      options={dataPlaneRBACOptionsList}
+                      styles={choiceButtonStyles}
+                      selectedKey={enableDataPlaneRBACOption}
+                      onChange={handleOnDataPlaneRBACOptionChange}
+                    />
                   </div>
-                  <ChoiceGroup
+                </AccordionPanel>
-                    ariaLabelledBy="enableDataPlaneRBACOptions"
+              </AccordionItem>
-                    options={dataPlaneRBACOptionsList}
+            )}
-                    styles={choiceButtonStyles}
+
-                    selectedKey={enableDataPlaneRBACOption}
+          {userContext.apiType === "SQL" && (
-                    onChange={handleOnDataPlaneRBACOptionChange}
-                  />
-                </div>
-              </AccordionPanel>
-            </AccordionItem>
-          )}
-          {userContext.apiType === "SQL" && !isEmulator && (
             <>
               <AccordionItem value="3">
                 <AccordionHeader>
@@ -681,103 +663,102 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionItem>
             </>
           )}
-          {showRetrySettings && (
+
-            <AccordionItem value="6">
+          <AccordionItem value="6">
-              <AccordionHeader>
+            <AccordionHeader>
-                <div className={styles.header}>Retry Settings</div>
+              <div className={styles.header}>Retry Settings</div>
-              </AccordionHeader>
+            </AccordionHeader>
-              <AccordionPanel>
+            <AccordionPanel>
-                <div className={styles.settingsSectionContainer}>
+              <div className={styles.settingsSectionContainer}>
-                  <div className={styles.settingsSectionDescription}>
+                <div className={styles.settingsSectionDescription}>
-                    Retry policy associated with throttled requests during CosmosDB queries.
+                  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>
-              </AccordionPanel>
+                <div>
-            </AccordionItem>
+                  <span className={styles.subHeader}>Max retry attempts</span>
-          )}
+                  <InfoTooltip className={styles.headerIcon}>
-          {!isEmulator && (
+                    Max number of retries to be performed for a request. Default value 9.
-            <AccordionItem value="7">
+                  </InfoTooltip>
-              <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>
+                <SpinButton
-            </AccordionItem>
+                  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>
+
           {shouldShowCrossPartitionOption && (
             <AccordionItem value="8">
               <AccordionHeader>
@@ -803,6 +784,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionPanel>
             </AccordionItem>
           )}
+
           {shouldShowParallelismOption && (
             <AccordionItem value="9">
               <AccordionHeader>
@@ -836,6 +818,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionPanel>
             </AccordionItem>
           )}
+
           {shouldShowPriorityLevelOption && (
             <AccordionItem value="10">
               <AccordionHeader>
@@ -859,6 +842,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionPanel>
             </AccordionItem>
           )}
+
           {shouldShowGraphAutoVizOption && (
             <AccordionItem value="11">
               <AccordionHeader>
@@ -880,6 +864,7 @@ 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="customAccordion ___1uf6361_0000000 fz7g6wx"
+      className="___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="customAccordion ___1uf6361_0000000 fz7g6wx"
+      className="___1uf6361_0000000 fz7g6wx"
     >
       <AccordionItem
         value="6"

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,24 +309,40 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
     <Stack
       className="panelGroupSpacing"
     >
-      <Text
+      <Stack
-        className="panelTextBold"
+        horizontal={true}
-        variant="small"
       >
         <Text
+          className="panelTextBold"
           variant="small"
         >
-          Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads.
+          Analytical store
-           
-          <StyledLinkBase
-            aria-label="Learn more about analytical store."
-            href="https://aka.ms/analytical-store-overview"
-            target="_blank"
-          >
-            Learn more
-          </StyledLinkBase>
         </Text>
-      </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>
       <Stack
         horizontal={true}
         verticalAlign="center"
@@ -384,7 +400,6 @@ 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/QueryCopilotPromptbar.tsx

@@ -18,7 +18,7 @@ import {
   Text,
   TextField,
 } from "@fluentui/react";
-import { FeedbackLabels, HttpStatusCodes, NormalizedEventKey } from "Common/Constants";
+import { HttpStatusCodes, NormalizedEventKey } from "Common/Constants";
 import { handleError } from "Common/ErrorHandlingUtils";
 import QueryError, { QueryErrorSeverity } from "Common/QueryError";
 import { createUri } from "Common/UrlUtility";
@@ -75,7 +75,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
   const inputEdited = useRef(false);
   const itemRefs = useRef([]);
   const searchInputRef = useRef(null);
-  const copyQueryRef = useRef(null);
   const {
     openFeedbackModal,
     hideFeedbackModalForLikedQueries,
@@ -133,7 +132,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     document.body.removeChild(queryElement);
 
     setshowCopyPopup(true);
-    copyQueryRef.current.focus();
     setTimeout(() => {
       setshowCopyPopup(false);
     }, 6000);
@@ -307,7 +305,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     if (isGeneratingQuery === null) {
       return " ";
     } else if (isGeneratingQuery) {
-      return "Thinking";
+      return "Content is loading";
     } else {
       return "Content is updated";
     }
@@ -393,7 +391,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 },
               }}
               disabled={isGeneratingQuery}
-              autoComplete="off"
+              autoComplete="list"
+              aria-expanded={showSamplePrompts}
               placeholder="Ask a question in natural language and we’ll generate the query for you."
               aria-labelledby="copilot-textfield-label"
               onRenderSuffix={() => {
@@ -401,7 +400,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                   <IconButton
                     iconProps={{ iconName: "Send" }}
                     disabled={isGeneratingQuery || !userPrompt.trim()}
-                    allowDisabledFocus={true}
                     style={{ background: "none" }}
                     onClick={() => startGenerateQueryProcess()}
                     aria-label="Send"
@@ -579,7 +577,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 }}>{FeedbackLabels.provideFeedback}</Text>
+                      <Text style={{ fontSize: 12 }}>Provide feedback</Text>
                       {showCallout && !hideFeedbackModalForLikedQueries && (
                         <Callout
                           role="status"
@@ -629,9 +627,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       <IconButton
                         id="likeBtn"
                         style={{ marginLeft: 10 }}
-                        aria-label={FeedbackLabels.provideFeedback}
+                        aria-label="Like"
-                        role="button"
+                        role="toggle"
-                        title="Like"
                         iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
                         onClick={() => {
                           setShowCallout(!likeQuery);
@@ -649,9 +646,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       />
                       <IconButton
                         style={{ margin: "0 4px" }}
-                        role="button"
+                        role="toggle"
-                        aria-label={FeedbackLabels.provideFeedback}
+                        aria-label="Dislike"
-                        title="Dislike"
                         iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
                         onClick={() => {
                           let toggleStatusValue = "Unpressed";
@@ -680,7 +676,6 @@ 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%" }}
@@ -711,9 +706,6 @@ 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,6 +1,7 @@
 import { FeedOptions } from "@azure/cosmos";
 import {
   Areas,
+  BackendApi,
   ConnectionStatusType,
   ContainerStatusType,
   HttpStatusCodes,
@@ -31,6 +32,7 @@ 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";
@@ -80,7 +82,9 @@ export const isCopilotFeatureRegistered = async (subscriptionId: string): Promis
 };
 
 export const getCopilotEnabled = async (): Promise<boolean> => {
-  const backendEndpoint: string = configContext.PORTAL_BACKEND_ENDPOINT;
+  const backendEndpoint: string = useNewPortalBackendEndpoint(BackendApi.PortalSettings)
+    ? configContext.PORTAL_BACKEND_ENDPOINT
+    : configContext.BACKEND_ENDPOINT;
 
   const url = `${backendEndpoint}/api/portalsettings/querycopilot`;
   const authorizationHeader: AuthorizationTokenHeaderMetadata = getAuthorizationHeader();

src/Explorer/Sidebar.tsx

@@ -1,6 +1,5 @@
 import {
   Button,
-  makeStyles,
   Menu,
   MenuButton,
   MenuButtonProps,
@@ -8,26 +7,26 @@ import {
   MenuList,
   MenuPopover,
   MenuTrigger,
+  SplitButton,
+  makeStyles,
+  mergeClasses,
   shorthands,
-  SplitButton
 } from "@fluentui/react-components";
 import { Add16Regular, ArrowSync12Regular, ChevronLeft12Regular, ChevronRight12Regular } from "@fluentui/react-icons";
-import { configContext, Platform } from "ConfigContext";
+import { Platform, configContext } from "ConfigContext";
 import Explorer from "Explorer/Explorer";
 import { AddDatabasePanel } from "Explorer/Panes/AddDatabasePanel/AddDatabasePanel";
 import { Tabs } from "Explorer/Tabs/Tabs";
 import { CosmosFluentProvider, cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
+import { ResourceTree } from "Explorer/Tree/ResourceTree";
 import { useDatabases } from "Explorer/useDatabases";
 import { KeyboardAction, KeyboardActionGroup, KeyboardActionHandler, useKeyboardActionGroup } from "KeyboardShortcuts";
-import { isFabric, isFabricMirrored, isFabricNative } from "Platform/Fabric/FabricUtil";
 import { userContext } from "UserContext";
 import { getCollectionName, getDatabaseName } from "Utils/APITypeUtils";
 import { Allotment, AllotmentHandle } from "allotment";
 import { useSidePanel } from "hooks/useSidePanel";
-import { useTheme } from "hooks/useTheme";
 import { debounce } from "lodash";
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ResourceTree } from "./Tree/ResourceTree";
 
 const useSidebarStyles = makeStyles({
   sidebar: {
@@ -35,67 +34,38 @@ const useSidebarStyles = makeStyles({
   },
   sidebarContainer: {
     height: "100%",
-    width: "100%",
-    borderRight: `1px solid ${tokens.colorNeutralStroke1}`,
-    transition: "all 0.2s ease-in-out",
-    display: "flex",
-    flexDirection: "column",
     backgroundColor: tokens.colorNeutralBackground1,
-    position: "relative",
   },
   expandedContent: {
     display: "grid",
     height: "100%",
-    width: "100%",
     gridTemplateRows: `calc(${tokens.layoutRowHeight} * 2) 1fr`,
   },
   floatingControlsContainer: {
-    position: "absolute",
+    position: "relative",
-    top: 0,
-    right: 0,
     zIndex: 1000,
-    width: "auto",
+    width: "100%",
-    padding: tokens.spacingHorizontalS,
   },
   floatingControls: {
     display: "flex",
     flexDirection: "row",
-    gap: tokens.spacingHorizontalXS,
+    position: "absolute",
+    right: 0,
   },
   floatingControlButton: {
     ...shorthands.border("none"),
     backgroundColor: "transparent",
-    color: tokens.colorNeutralForeground1,
-    cursor: "pointer",
-    padding: tokens.spacingHorizontalXS,
-    borderRadius: tokens.borderRadiusMedium,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    ":hover": {
-      backgroundColor: tokens.colorNeutralBackground1Hover,
-      color: tokens.colorNeutralForeground1,
-    },
-    ":active": {
-      backgroundColor: tokens.colorNeutralBackground1Pressed,
-      color: tokens.colorNeutralForeground1,
-    },
-    ":disabled": {
-      color: tokens.colorNeutralForegroundDisabled,
-      cursor: "not-allowed",
-    },
   },
   globalCommandsContainer: {
     display: "grid",
     alignItems: "center",
     justifyItems: "center",
     width: "100%",
-    containerType: "size",
+    containerType: "size", // Use this container for "@container" queries below this.
-    padding: tokens.spacingHorizontalS,
     ...cosmosShorthands.borderBottom(),
-    backgroundColor: tokens.colorNeutralBackground1,
   },
   loadingProgressBar: {
+    // Float above the content
     position: "absolute",
     width: "100%",
     height: "2px",
@@ -105,7 +75,7 @@ const useSidebarStyles = makeStyles({
     animationDuration: "3s",
     animationName: {
       "0%": {
-        opacity: ".2",
+        opacity: ".2", // matches indeterminate bar width
       },
       "50%": {
         opacity: "1",
@@ -127,12 +97,6 @@ const useSidebarStyles = makeStyles({
       display: "flex",
     },
   },
-  treeContainer: {
-    flex: 1,
-    overflow: "auto",
-    backgroundColor: tokens.colorNeutralBackground1,
-    color: tokens.colorNeutralForeground1,
-  },
 });
 
 interface GlobalCommandsProps {
@@ -145,7 +109,6 @@ interface GlobalCommand {
   icon: JSX.Element;
   onClick: () => void;
   keyboardAction?: KeyboardAction;
-  ref?: React.RefObject<HTMLButtonElement>;
 }
 
 const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
@@ -155,11 +118,10 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
   // However, that messes with the Menu positioning, so we need to get a reference to the 'div' to pass to the Menu.
   // We can't use a ref though, because it would be set after the Menu is rendered, so we use a state value to force a re-render.
   const [globalCommandButton, setGlobalCommandButton] = useState<HTMLElement | null>(null);
-  const primaryFocusableRef = useRef<HTMLButtonElement>(null);
 
   const actions = useMemo<GlobalCommand[]>(() => {
     if (
-      (isFabric() && userContext.fabricContext?.isReadOnly) ||
+      configContext.platform === Platform.Fabric ||
       userContext.apiType === "Postgres" ||
       userContext.apiType === "VCoreMongo"
     ) {
@@ -173,15 +135,12 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
         id: "new_collection",
         label: `New ${getCollectionName()}`,
         icon: <Add16Regular />,
-        onClick: () => {
+        onClick: () => explorer.onNewCollectionClicked(),
-          const databaseId = isFabricNative() ? userContext.fabricContext?.databaseName : undefined;
-          explorer.onNewCollectionClicked({ databaseId });
-        },
         keyboardAction: KeyboardAction.NEW_COLLECTION,
       },
     ];
 
-    if (configContext.platform !== Platform.Fabric && userContext.apiType !== "Tables") {
+    if (userContext.apiType !== "Tables") {
       actions.push({
         id: "new_database",
         label: `New ${getDatabaseName()}`,
@@ -218,16 +177,6 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
     );
   }, [actions, setKeyboardActions]);
 
-  useLayoutEffect(() => {
-    if (primaryFocusableRef.current) {
-      const timer = setTimeout(() => {
-        primaryFocusableRef.current.focus();
-      }, 0);
-      return () => clearTimeout(timer);
-    }
-    return undefined;
-  }, []);
-
   if (!primaryAction) {
     return null;
   }
@@ -235,7 +184,7 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
   return (
     <div className={styles.globalCommandsContainer} data-test="GlobalCommands">
       {actions.length === 1 ? (
-        <Button icon={primaryAction.icon} onClick={onPrimaryActionClick} ref={primaryFocusableRef}>
+        <Button icon={primaryAction.icon} onClick={onPrimaryActionClick}>
           {primaryAction.label}
         </Button>
       ) : (
@@ -245,7 +194,7 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
               <div ref={setGlobalCommandButton}>
                 <SplitButton
                   menuButton={{ ...triggerProps, "aria-label": "More commands" }}
-                  primaryActionButton={{ onClick: onPrimaryActionClick, ref: primaryFocusableRef }}
+                  primaryActionButton={{ onClick: onPrimaryActionClick }}
                   className={styles.globalCommandsSplitButton}
                   icon={primaryAction.icon}
                 >
@@ -285,7 +234,6 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
   const [expandedSize, setExpandedSize] = React.useState(300);
   const hasSidebar = userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo";
   const allotment = useRef<AllotmentHandle>(null);
-  const { isDarkMode } = useTheme();
 
   const expand = useCallback(() => {
     if (!expanded) {
@@ -328,7 +276,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
   }, [setLoading]);
 
   const hasGlobalCommands = !(
-    isFabricMirrored() ||
+    configContext.platform === Platform.Fabric ||
     userContext.apiType === "Postgres" ||
     userContext.apiType === "VCoreMongo"
   );
@@ -340,7 +288,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
         {hasSidebar && (
           // When collapsed, we force the pane to 24 pixels wide and make it non-resizable.
           <Allotment.Pane minSize={24} preferredSize={250}>
-            <CosmosFluentProvider>
+            <CosmosFluentProvider className={mergeClasses(styles.sidebar)}>
               <div className={styles.sidebarContainer}>
                 {loading && (
                   // The Fluent UI progress bar has some issues in reduced-motion environments so we use a simple CSS animation here.
@@ -371,11 +319,12 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
                         </button>
                       </div>
                     </div>
-                    <div className={styles.expandedContent} style={!hasGlobalCommands ? { gridTemplateRows: "1fr" } : undefined}>
+                    <div
+                      className={styles.expandedContent}
+                      style={!hasGlobalCommands ? { gridTemplateRows: "1fr" } : undefined}
+                    >
                       {hasGlobalCommands && <GlobalCommands explorer={explorer} />}
-                      <div className={styles.treeContainer}>
+                      <ResourceTree explorer={explorer} />
-                        <ResourceTree explorer={explorer} />
-                      </div>
                     </div>
                   </>
                 ) : (

src/Explorer/SplashScreen/FabricHome.tsx

@@ -1,173 +0,0 @@
-/**
- * Accordion top class
- */
-import { Link, makeStyles, tokens } from "@fluentui/react-components";
-import { DocumentAddRegular, LinkMultipleRegular } from "@fluentui/react-icons";
-import { isFabricNative } from "Platform/Fabric/FabricUtil";
-import * as React from "react";
-import { userContext } from "UserContext";
-import CosmosDbBlackIcon from "../../../images/CosmosDB_black.svg";
-import LinkIcon from "../../../images/Link_blue.svg";
-import Explorer from "../Explorer";
-
-export interface SplashScreenProps {
-  explorer: Explorer;
-}
-
-const useStyles = makeStyles({
-  homeContainer: {
-    width: "100%",
-    alignContent: "center",
-  },
-  title: {
-    textAlign: "center",
-    fontSize: "20px",
-    fontWeight: "bold",
-  },
-  buttonsContainer: {
-    width: "584px",
-    margin: "auto",
-    display: "grid",
-    padding: "16px",
-    gridTemplateColumns: "repeat(3, 1fr)",
-    gap: "10px",
-    gridAutoRows: "minmax(184px, auto)",
-  },
-  one: {
-    gridColumn: "1 / 3",
-    gridRow: "1 / 3",
-    "& svg": {
-      width: "48px",
-      height: "48px",
-      margin: "auto",
-    },
-  },
-  two: {
-    gridColumn: "3",
-    gridRow: "1",
-    "& img": {
-      width: "32px",
-      height: "32px",
-      margin: "auto",
-    },
-  },
-  three: {
-    gridColumn: "3",
-    gridRow: "2",
-    "& svg": {
-      width: "32px",
-      height: "32px",
-      margin: "auto",
-    },
-  },
-  buttonContainer: {
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-    border: "1px solid #e0e0e0",
-    cursor: "pointer",
-    "&:hover": {
-      backgroundColor: tokens.colorNeutralBackground1Hover,
-      "border-color": tokens.colorNeutralStroke1Hover,
-    },
-  },
-  buttonUpperPart: {
-    textAlign: "center",
-    flexGrow: 1,
-    display: "flex",
-    backgroundColor: "#e3f7ef",
-  },
-  buttonLowerPart: {
-    borderTop: "1px solid #e0e0e0",
-    height: "76px",
-    padding: "8px",
-    "> div:nth-child(1)": {
-      fontWeight: "bold",
-    },
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-  },
-  footer: {
-    textAlign: "center",
-  },
-});
-
-interface FabricHomeScreenButtonProps {
-  title: string;
-  description: string;
-  icon: JSX.Element;
-  onClick?: () => void;
-}
-
-const FabricHomeScreenButton: React.FC<FabricHomeScreenButtonProps & { className: string }> = ({
-  title,
-  description,
-  icon,
-  className,
-  onClick,
-}) => {
-  const styles = useStyles();
-
-  // TODO Make this a11y copmliant: aria-label for icon
-  return (
-    <div role="button" className={`${styles.buttonContainer} ${className}`} onClick={onClick}>
-      <div className={styles.buttonUpperPart}>{icon}</div>
-      <div className={styles.buttonLowerPart}>
-        <div>{title}</div>
-        <div>{description}</div>
-      </div>
-    </div>
-  );
-};
-
-export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScreenProps) => {
-  const styles = useStyles();
-  const getSplashScreenButtons = (): JSX.Element => {
-    const buttons: FabricHomeScreenButtonProps[] = [
-      {
-        title: "New container",
-        description: "Create a destination container to store your data",
-        icon: <DocumentAddRegular />,
-        onClick: () => {
-          const databaseId = isFabricNative() ? userContext.fabricContext?.databaseName : undefined;
-          props.explorer.onNewCollectionClicked({ databaseId });
-        },
-      },
-      {
-        title: "Sample data",
-        description: "Automatically load sample data in your database",
-        icon: <img src={CosmosDbBlackIcon} />,
-      },
-      {
-        title: "App development",
-        description: "Start here to use an SDK to build your apps",
-        icon: <LinkMultipleRegular />,
-      },
-    ];
-
-    return (
-      <div className={styles.buttonsContainer}>
-        <FabricHomeScreenButton className={styles.one} {...buttons[0]} />
-        <FabricHomeScreenButton className={styles.two} {...buttons[1]} />
-        <FabricHomeScreenButton className={styles.three} {...buttons[2]} />
-      </div>
-    );
-  };
-
-  const title = "Build your database";
-  return (
-    <div className={styles.homeContainer}>
-      <div className={styles.title} role="heading" aria-label={title}>
-        {title}
-      </div>
-      {getSplashScreenButtons()}
-      <div className={styles.footer}>
-        Need help?{" "}
-        <Link href="https://cosmos.azure.com/docs" target="_blank">
-          Learn more <img src={LinkIcon} alt="Learn more" />
-        </Link>
-      </div>
-    </div>
-  );
-};

src/Explorer/SplashScreen/SplashScreen.less

@@ -1,178 +1,178 @@
-// @import "../../../less/Common/Constants";
+@import "../../../less/Common/Constants";
 
-// .splashScreenContainer {
+.splashScreenContainer {
-//   width: 100%;
+  width: 100%;
-//   overflow-y: scroll;
+  overflow-y: auto;
-//   overflow-x: hidden;
+  overflow-x: hidden;
 
-//   .splashScreen {
+  .splashScreen {
-//     .flex-display();
+    .flex-display();
-//     .flex-direction();
+    .flex-direction();
-//     text-align: left;
+    text-align: left;
-//     margin: auto;
+    margin: auto;
-//     padding-left: 21px;
+    padding-left: 21px;
-//     padding-right: 16px;
+    padding-right: 16px;
-//     max-width: 1168px;
+    max-width: 1168px;
 
-//     > .title {
+    > .title {
-//       position: relative; // To attach FeaturePanelLauncher as absolute
+      position: relative; // To attach FeaturePanelLauncher as absolute
-//       color: @BaseHigh;
+      color: @BaseHigh;
-//       font-size: 48px;
+      font-size: 48px;
-//       padding-left: 0px;
+      padding-left: 0px;
-//       margin: 16px auto;
+      margin: 16px auto;
-//       text-align: center;
+      text-align: center;
-//     }
+    }
 
-//     > .subtitle {
+    > .subtitle {
-//       color: @BaseHigh;
+      color: @BaseHigh;
-//       font-size: 18px;
+      font-size: 18px;
-//       padding-left: 0px;
+      padding-left: 0px;
-//       margin: 0px auto;
+      margin: 0px auto;
-//       text-align: center;
+      text-align: center;
-//     }
+    }
 
-//     .mainButtonsContainer {
+    .mainButtonsContainer {
-//       .flex-display();
+      .flex-display();
-//       text-align: center;
+      text-align: center;
-//       cursor: pointer;
+      cursor: pointer;
-//       margin: 40px auto;
+      margin: 40px auto;
-//       width: 84%;
+      width: 84%;
 
-//       > .mainButton {
+      > .mainButton {
-//         min-width: 124px;
+        min-width: 124px;
-//         max-width: 296px;
+        max-width: 296px;
-//         padding: 32px 16px;
+        padding: 32px 16px;
-//         background-color: @BaseLight;
+        background-color: @BaseLight;
-//         border: 1px solid #949494;
+        border: 1px solid #949494;
-//         box-sizing: border-box;
+        box-sizing: border-box;
-//         box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-//         border-radius: 4px;
+        border-radius: 4px;
 
-//         > .legendContainer {
+        > .legendContainer {
-//           margin-left: 16px;
+          margin-left: 16px;
-//           text-align: left;
+          text-align: left;
 
-//           .legend {
+          .legend {
-//             font-family: @SemiboldFont;
+            font-family: @SemiboldFont;
-//             font-size: 18px;
+            font-size: 18px;
-//           }
+          }
 
-//           .description {
+          .description {
-//             font-size: 10px;
+            font-size: 10px;
-//           }
+          }
 
-//           .newDescription {
+          .newDescription {
-//             font-size: 13px;
+            font-size: 13px;
-//           }
+          }
-//         }
+        }
-//       }
+      }
 
-//       > :nth-child(n + 2) {
+      > :nth-child(n + 2) {
-//         margin-left: 32px;
+        margin-left: 32px;
-//       }
+      }
-//     }
+    }
 
-//     .moreStuffContainer {
+    .moreStuffContainer {
-//       .flex-display();
+      .flex-display();
-//       justify-content: space-between;
+      justify-content: space-between;
 
-//       .moreStuffColumn {
+      .moreStuffColumn {
-//         flex-grow: 1;
+        flex-grow: 1;
-//         flex-basis: 0;
+        flex-basis: 0;
-//         min-width: 124px;
+        min-width: 124px;
-//         max-width: 296px;
+        max-width: 296px;
 
-//         > .title {
+        > .title {
-//           font-size: 18px;
+          font-size: 18px;
-//           font-family: @SemiboldFont;
+          font-family: @SemiboldFont;
-//           color: @BaseDark;
+          color: @BaseDark;
-//           padding: 0px;
+          padding: 0px;
-//           margin-bottom: 16px;
+          margin-bottom: 16px;
-//         }
+        }
 
-//         > ul {
+        > ul {
-//           list-style: none;
+          list-style: none;
-//           padding-left: 0px;
+          padding-left: 0px;
-//           margin-bottom: 0px;
+          margin-bottom: 0px;
 
-//           li {
+          li {
-//             padding: @DefaultSpace;
+            padding: @DefaultSpace;
-//             .flex-display();
+            .flex-display();
-//             align-items: flex-start;
+            align-items: flex-start;
 
-//             > img {
+            > img {
-//               margin-right: @DefaultSpace;
+              margin-right: @DefaultSpace;
-//               width: 24px;
+              width: 24px;
-//               height: 24px;
+              height: 24px;
-//             }
+            }
 
-//             .oneLineContent {
+            .oneLineContent {
-//               margin-top: 4px;
+              margin-top: 4px;
-//             }
+            }
 
-//             .description {
+            .description {
-//               font-size: 10px;
+              font-size: 10px;
-//               color: @BaseMediumHigh;
+              color: @BaseMediumHigh;
-//             }
+            }
-//           }
+          }
-//         }
+        }
 
-//         .tipContainer {
+        .tipContainer {
-//           padding: 8px 16px;
+          padding: 8px 16px;
-//           width: 100%;
+          width: 100%;
-//           cursor: pointer;
+          cursor: pointer;
-//           .flex-display();
+          .flex-display();
-//           .flex-direction();
+          .flex-direction();
 
-//           > .title {
+          > .title {
-//             color: @BaseDark;
+            color: @BaseDark;
-//             padding: 0px;
+            padding: 0px;
-//             font-size: 12px;
+            font-size: 12px;
-//           }
+          }
-//           > .description {
+          > .description {
-//             color: @BaseDark;
+            color: @BaseDark;
-//           }
+          }
 
-//           &:not(:hover):not(:focus) {
+          &:not(:hover):not(:focus) {
-//             background-color: @BaseLow;
+            background-color: @BaseLow;
-//           }
+          }
-//         }
+        }
 
-//         &.commonTasks {
+        &.commonTasks {
-//           li {
+          li {
-//             cursor: pointer;
+            cursor: pointer;
-//           }
+          }
-//         }
+        }
 
-//         &.tipsContainer {
+        &.tipsContainer {
-//           li {
+          li {
-//             margin: 2px 0px;
+            margin: 2px 0px;
-//           }
+          }
-//         }
+        }
-//       }
+      }
-//     }
+    }
 
-//     .focusable {
+    .focusable {
-//       &:hover {
+      &:hover {
-//         .hover();
+        .hover();
-//       }
+      }
 
-//       &:focus {
+      &:focus {
-//         .focus();
+        .focus();
-//       }
+      }
 
-//       &:active {
+      &:active {
-//         .active();
+        .active();
-//       }
+      }
-//     }
+    }
 
-//     .notebookSplashScreenItem {
+    .notebookSplashScreenItem {
-//       padding: 12px 0 12px 12px;
+      padding: 12px 0 12px 12px;
 
-//       .itemText {
+      .itemText {
-//         margin-left: 12px;
+        margin-left: 12px;
-//         font-family: @SemiboldFont;
+        font-family: @SemiboldFont;
-//       }
+      }
-//     }
+    }
-//   }
+  }
-// }
+}

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -11,7 +11,6 @@ import {
   TeachingBubbleContent,
   Text,
 } from "@fluentui/react";
-import { makeStyles, shorthands } from "@fluentui/react-components";
 import { sendMessage } from "Common/MessageHandler";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import { TerminalKind } from "Contracts/ViewModels";
@@ -34,7 +33,8 @@ import CollectionIcon from "../../../images/tree-collection.svg";
 import * as Constants from "../../Common/Constants";
 import { userContext } from "../../UserContext";
 import { getCollectionName } from "../../Utils/APITypeUtils";
-import { useTheme } from "../../hooks/useTheme";
+import { FeaturePanelLauncher } from "../Controls/FeaturePanel/FeaturePanelLauncher";
+import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
 import Explorer from "../Explorer";
 import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
 import { useNotebook } from "../Notebook/useNotebook";
@@ -55,177 +55,70 @@ export interface SplashScreenProps {
   explorer: Explorer;
 }
 
-const useStyles = makeStyles({
+export class SplashScreen extends React.Component<SplashScreenProps> {
-  splashScreenContainer: {
+  private readonly container: Explorer;
-    display: "flex",
+  private subscriptions: Array<{ dispose: () => void }>;
-    flexDirection: "column",
-    alignItems: "center",
-    // justifyContent: "center",
-    minHeight: "100vh",
-    backgroundColor: "var(--colorNeutralBackground1)",
-    color: "var(--colorNeutralForeground1)",
 
-  },
+  constructor(props: SplashScreenProps) {
-  splashScreen: {
+    super(props);
-    display: "flex",
+    this.container = props.explorer;
-    // overflow: "scroll",
+    this.subscriptions = [];
-    flexDirection: "column",
-    alignItems: "center",
-    textAlign: "left",
-    // ...shorthands.padding("40px")
-  },
-  title: {
-    fontSize: "48px",
-    fontWeight: "500",
-    margin: "16px auto",
-    color: "var(--colorNeutralForeground1)"
-  },
-  subtitle: {
-    fontSize: "18px",
-    marginBottom: "40px",
-    color: "var(--colorNeutralForeground2)"
-  },
-  cardContainer: {
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "16px",
-    width: "66%",
-    margin: "0 auto",
-    backgroundColor: "var(--colorNeutralBackground1)",
-    color: "var(--colorNeutralForeground1)",
-  },
-  card: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "left",
-    ...shorthands.padding("32px", "16px"),
-    backgroundColor: "var(--colorNeutralBackground1)",
-    color: "var(--colorNeutralForeground1)",
-    border: "1px solid var(--colorNeutralStroke1)",
-    borderRadius: "4px",
-    boxShadow: "var(--shadow4)",
-    cursor: "pointer",
-    minHeight: "150px",
-    "&:hover": {
-      backgroundColor: "var(--colorNeutralBackground1Hover)"
-    }
-  },
-  cardContent: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start",
-    marginLeft: "16px",
-    textAlign: "left",
-    color: "var(--colorNeutralForeground1)"
-  },
-  cardTitle: {
-    fontSize: "18px",
-    fontWeight: "600",
-    color: "var(--colorNeutralForeground1)",
-    textAlign: "left",
-    marginBottom: "8px"
-  },
-  cardDescription: {
-    fontSize: "13px",
-    color: "var(--colorNeutralForeground2)",
-    textAlign: "left"
-  },
-  moreStuffContainer: {
-    display: "grid",
-    gridTemplateColumns: "repeat(3, 1fr)",
-    gap: "32px",
-    width: "66%",
-    margin: "40px auto",
-  },
-  moreStuffColumn: {
-    display: "flex",
-    flexDirection: "column",
-    // justifyContent:"space-between"
-  },
-  columnTitle: {
-    fontSize: "20px",
-    fontWeight: "600",
-    marginBottom: "16px",
-    color: "var(--colorNeutralForeground1)"
-  },
-  listItem: {
-    marginBottom: "26px",
-  },
-  listItemTitle: {
-    fontSize: "14px",
-    color: "var(--colorBrandForegroundLink)",
-    "&:hover": {
-      color: "var(--colorBrandForegroundLink)"
-    }
-  },
-  listItemSubtitle: {
-    fontSize: "13px",
-    color: "var(--colorNeutralForeground2)"
   }
-});
 
-export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
+  public componentWillUnmount(): void {
-  const styles = useStyles();
+    while (this.subscriptions.length) {
-  const { isDarkMode } = useTheme();
+      this.subscriptions.pop().dispose();
-  const container = explorer;
+    }
-  const subscriptions: Array<{ dispose: () => void }> = [];
+  }
 
-  React.useEffect(() => {
+  public componentDidMount(): void {
-    subscriptions.push(
+    this.subscriptions.push(
       {
         dispose: useNotebook.subscribe(
-          () => setState({}),
+          () => this.setState({}),
           (state) => state.isNotebookEnabled,
         ),
       },
-      { dispose: useSelectedNode.subscribe(() => setState({})) },
+      { dispose: useSelectedNode.subscribe(() => this.setState({})) },
       {
         dispose: useCarousel.subscribe(
-          () => setState({}),
+          () => this.setState({}),
           (state) => state.showCoachMark,
         ),
       },
       {
         dispose: usePostgres.subscribe(
-          () => setState({}),
+          () => this.setState({}),
           (state) => state.showPostgreTeachingBubble,
         ),
       },
       {
         dispose: usePostgres.subscribe(
-          () => setState({}),
+          () => this.setState({}),
           (state) => state.showResetPasswordBubble,
         ),
       },
       {
         dispose: useDatabases.subscribe(
-          () => setState({}),
+          () => this.setState({}),
           (state) => state.sampleDataResourceTokenCollection,
         ),
       },
       {
         dispose: useQueryCopilot.subscribe(
-          () => setState({}),
+          () => this.setState({}),
           (state) => state.copilotEnabled,
         ),
       },
     );
+  }
 
-    return () => {
+  private clearMostRecent = (): void => {
-      while (subscriptions.length) {
-        subscriptions.pop().dispose();
-      }
-    };
-  }, []);
-
-  const [state, setState] = React.useState({});
-
-  const clearMostRecent = () => {
     MostRecentActivity.clear(userContext.databaseAccount?.name);
-    setState({});
+    this.setState({});
   };
 
-  const getSplashScreenButtons = (): JSX.Element => {
+  private getSplashScreenButtons = (): JSX.Element => {
     if (
       userContext.apiType === "SQL" &&
       useQueryCopilot.getState().copilotEnabled &&
@@ -239,7 +132,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
               title={"Launch quick start"}
               description={"Launch a quick start tutorial to get started with sample data"}
               onClick={() => {
-                container.onNewCollectionClicked({ isQuickstart: true });
+                this.container.onNewCollectionClicked({ isQuickstart: true });
                 traceOpen(Action.LaunchQuickstart, { apiType: userContext.apiType });
               }}
             />
@@ -248,7 +141,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
               title={`New ${getCollectionName()}`}
               description={"Create a new container for storage and throughput"}
               onClick={() => {
-                container.onNewCollectionClicked();
+                this.container.onNewCollectionClicked();
                 traceOpen(Action.NewContainerHomepage, { apiType: userContext.apiType });
               }}
             />
@@ -284,7 +177,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
       );
     }
 
-    const mainItems = createMainItems();
+    const mainItems = this.createMainItems();
     return (
       <div className="mainButtonsContainer">
         {userContext.apiType === "Postgres" &&
@@ -321,7 +214,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
             className="mainButton focusable"
             key={`${item.title}`}
             onClick={item.onClick}
-            onKeyPress={(event: React.KeyboardEvent) => onSplashScreenItemKeyPress(event, item.onClick)}
+            onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
             tabIndex={0}
             role="button"
           >
@@ -374,7 +267,125 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
     );
   };
 
-  const createMainItems = (): SplashScreenItem[] => {
+  public render(): JSX.Element {
+    let title: string;
+    let subtitle: string;
+
+    switch (userContext.apiType) {
+      case "Postgres":
+        title = "Welcome to Azure Cosmos DB for PostgreSQL";
+        subtitle = "Get started with our sample datasets, documentation, and additional tools.";
+        break;
+      case "VCoreMongo":
+        title = "Welcome to Azure Cosmos DB for MongoDB (vCore)";
+        subtitle = "Get started with our sample datasets, documentation, and additional tools.";
+        break;
+      default:
+        title = "Welcome to Azure Cosmos DB";
+        subtitle = "Globally distributed, multi-model database service for any scale";
+    }
+
+    return (
+      <div className="connectExplorerContainer">
+        <form className="connectExplorerFormContainer">
+          <div className="splashScreenContainer">
+            <div className="splashScreen">
+              <h1 className="title" role="heading" aria-label={title}>
+                {title}
+                <FeaturePanelLauncher />
+              </h1>
+              <div className="subtitle">{subtitle}</div>
+              {this.getSplashScreenButtons()}
+              {useCarousel.getState().showCoachMark && (
+                <Coachmark
+                  target="#quickstartDescription"
+                  positioningContainerProps={{ directionalHint: DirectionalHint.rightTopEdge }}
+                  persistentBeak
+                >
+                  <TeachingBubbleContent
+                    headline={`Start with sample ${getCollectionName().toLocaleLowerCase()}`}
+                    hasCloseButton
+                    closeButtonAriaLabel="Close"
+                    primaryButtonProps={{
+                      text: "Get started",
+                      onClick: () => {
+                        useCarousel.getState().setShowCoachMark(false);
+                        this.container.onNewCollectionClicked({ isQuickstart: true });
+                      },
+                    }}
+                    secondaryButtonProps={{
+                      text: "Cancel",
+                      onClick: () => useCarousel.getState().setShowCoachMark(false),
+                    }}
+                    onDismiss={() => useCarousel.getState().setShowCoachMark(false)}
+                  >
+                    You will be guided to create a sample container with sample data, then we will give you a tour of
+                    data explorer. You can also cancel launching this tour and explore yourself
+                  </TeachingBubbleContent>
+                </Coachmark>
+              )}
+              {userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo" ? (
+                <Stack horizontal style={{ margin: "0 auto", width: "84%" }} tokens={{ childrenGap: 16 }}>
+                  <Stack style={{ width: "33%" }}>
+                    <Text
+                      variant="large"
+                      style={{
+                        marginBottom: 16,
+                        fontFamily: '"Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif',
+                      }}
+                    >
+                      Next steps
+                    </Text>
+                    {this.getNextStepItems()}
+                  </Stack>
+                  <Stack style={{ width: "33%" }}>
+                    <Text
+                      variant="large"
+                      style={{
+                        marginBottom: 16,
+                        fontFamily: '"Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif',
+                      }}
+                    >
+                      Tips & learn more
+                    </Text>
+                    {this.getTipsAndLearnMoreItems()}
+                  </Stack>
+                  <Stack style={{ width: "33%" }}></Stack>
+                </Stack>
+              ) : (
+                <div className="moreStuffContainer">
+                  <div className="moreStuffColumn commonTasks">
+                    <h2 className="title">Recents</h2>
+                    {this.getRecentItems()}
+                  </div>
+                  <div className="moreStuffColumn">
+                    <h2 className="title">Top 3 things you need to know</h2>
+                    {this.top3Items()}
+                  </div>
+                  <div className="moreStuffColumn tipsContainer">
+                    <h2 className="title">Learning Resources</h2>
+                    {this.getLearningResourceItems()}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </form>
+      </div>
+    );
+  }
+
+  /**
+   * This exists to enable unit testing
+   */
+  public createDataSampleUtil(): DataSamplesUtil {
+    return new DataSamplesUtil(this.container);
+  }
+
+  /**
+   * public for testing purposes
+   */
+  public createMainItems(): SplashScreenItem[] {
     const heroes: SplashScreenItem[] = [];
 
     if (
@@ -392,7 +403,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
           if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
             useTabs.getState().openAndActivateReactTab(ReactTabKind.Quickstart);
           } else {
-            container.onNewCollectionClicked({ isQuickstart: true });
+            this.container.onNewCollectionClicked({ isQuickstart: true });
           }
           traceOpen(Action.LaunchQuickstart, { apiType: userContext.apiType });
         },
@@ -400,18 +411,18 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
       heroes.push(launchQuickstartBtn);
     }
 
-    heroes.push(getShellCard());
+    heroes.push(this.getShellCard());
-    heroes.push(getThirdCard());
+    heroes.push(this.getThirdCard());
     return heroes;
-  };
+  }
 
-  const getShellCard = (): SplashScreenItem => {
+  private getShellCard() {
     if (userContext.apiType === "Postgres") {
       return {
         iconSrc: PowerShellIcon,
         title: "PostgreSQL Shell",
-        description: "Create table and interact with data using PostgreSQL's shell interface",
+        description: "Create table and interact with data using PostgreSQL’s shell interface",
-        onClick: () => container.openNotebookTerminal(TerminalKind.Postgres),
+        onClick: () => this.container.openNotebookTerminal(TerminalKind.Postgres),
       };
     }
 
@@ -420,7 +431,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         iconSrc: PowerShellIcon,
         title: "Mongo Shell",
         description: "Create a collection and interact with data using MongoDB's shell interface",
-        onClick: () => container.openNotebookTerminal(TerminalKind.VCoreMongo),
+        onClick: () => this.container.openNotebookTerminal(TerminalKind.VCoreMongo),
       };
     }
 
@@ -429,13 +440,13 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
       title: `New ${getCollectionName()}`,
       description: "Create a new container for storage and throughput",
       onClick: () => {
-        container.onNewCollectionClicked();
+        this.container.onNewCollectionClicked();
         traceOpen(Action.NewContainerHomepage, { apiType: userContext.apiType });
       },
     };
-  };
+  }
 
-  const getThirdCard = (): SplashScreenItem => {
+  private getThirdCard() {
     let icon = ConnectIcon;
     let title = "Connect";
     let description = "Prefer using your own choice of tooling? Find the connection string you need to connect";
@@ -459,34 +470,34 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
       description: description,
       onClick: onClick,
     };
-  };
+  }
 
-  const decorateOpenCollectionActivity = (activity: MostRecentActivity.OpenCollectionItem): SplashScreenItem => {
+  private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
     return {
       iconSrc: CollectionIcon,
-      title: activity.collectionId,
+      title: collectionId,
       description: getCollectionName(),
       onClick: () => {
-        const collection = useDatabases.getState().findCollection(activity.databaseId, activity.collectionId);
+        const collection = useDatabases.getState().findCollection(databaseId, collectionId);
         collection?.openTab();
       },
     };
-  };
+  }
 
-  const decorateOpenNotebookActivity = (activity: MostRecentActivity.OpenNotebookItem): SplashScreenItem => {
+  private decorateOpenNotebookActivity({ name, path }: MostRecentActivity.OpenNotebookItem) {
     return {
-      info: activity.path,
+      info: path,
       iconSrc: NotebookIcon,
-      title: activity.name,
+      title: name,
       description: "Notebook",
       onClick: () => {
-        const notebookItem = container.createNotebookContentItemFile(activity.name, activity.path);
+        const notebookItem = this.container.createNotebookContentItemFile(name, path);
-        notebookItem && container.openNotebook(notebookItem);
+        notebookItem && this.container.openNotebook(notebookItem);
       },
     };
-  };
+  }
 
-  const createRecentItems = (): SplashScreenItem[] => {
+  private createRecentItems(): SplashScreenItem[] {
     return MostRecentActivity.getItems(userContext.databaseAccount?.name).map((activity) => {
       switch (activity.type) {
         default: {
@@ -494,22 +505,22 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
           throw new Error(`Unknown activity: ${unknownActivity}`);
         }
         case MostRecentActivity.Type.OpenNotebook:
-          return decorateOpenNotebookActivity(activity);
+          return this.decorateOpenNotebookActivity(activity);
 
         case MostRecentActivity.Type.OpenCollection:
-          return decorateOpenCollectionActivity(activity);
+          return this.decorateOpenCollectionActivity(activity);
       }
     });
-  };
+  }
 
-  const onSplashScreenItemKeyPress = (event: React.KeyboardEvent, callback: () => void) => {
+  private onSplashScreenItemKeyPress(event: React.KeyboardEvent, callback: () => void) {
     if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
       callback();
       event.stopPropagation();
     }
-  };
+  }
 
-  const top3Items = (): JSX.Element => {
+  private top3Items(): JSX.Element {
     let items: { link: string; title: string; description: string }[];
     switch (userContext.apiType) {
       case "SQL":
@@ -621,54 +632,44 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
                 href={item.link}
                 target="_blank"
                 style={{ marginRight: 5 }}
-                className={styles.listItemTitle}
               >
                 {item.title}
               </Link>
               <Image src={LinkIcon} alt={item.title} />
             </Stack>
-            <Text className={styles.listItemSubtitle}>{item.description}</Text>
+            <Text>{item.description}</Text>
           </Stack>
         ))}
       </Stack>
     );
-  };
+  }
 
-  const getRecentItems = (): JSX.Element => {
+  private getRecentItems(): JSX.Element {
-    const recentItems = createRecentItems()?.filter((item) => item.description !== "Notebook");
+    const recentItems = this.createRecentItems()?.filter((item) => item.description !== "Notebook");
 
     return (
       <Stack>
         <ul>
           {recentItems.map((item, index) => (
-            <li key={`${item.title}${item.description}${index}`} className={styles.listItem}>
+            <li key={`${item.title}${item.description}${index}`}>
               <Stack style={{ marginBottom: 26 }}>
                 <Stack horizontal>
-                  <svg 
+                  <Image style={{ marginRight: 8 }} src={item.iconSrc} alt={item.title} />
-                    width="16" 
+                  <Link style={{ fontSize: 14 }} onClick={item.onClick} title={item.info}>
-                    height="16" 
-                    viewBox="0 0 20 20" 
-                    xmlns="http://www.w3.org/2000/svg"
-                    style={{ marginRight: 8 }}
-                    fill="currentColor"
-                  >
-                    <path d="M4 4c0-1.1.9-2 2-2h3.59c.4 0 .78.16 1.06.44l3.91 3.91c.28.28.44.67.44 1.06V14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 9 6.5V3H6Zm4 .2v3.3c0 .28.22.5.5.5h3.3L10 3.2ZM17 9a1 1 0 0 0-1-1v6a3 3 0 0 1-3 3H6a1 1 0 0 0 1 1h6.06A3.94 3.94 0 0 0 17 14.06V9Z" />
-                  </svg>
-                  <Link style={{ fontSize: 14 }} onClick={item.onClick} title={item.info} className={styles.listItemTitle}>
                     {item.title}
                   </Link>
                 </Stack>
-                <Text className={styles.listItemSubtitle}>{item.description}</Text>
+                <Text style={{ color: "#605E5C" }}>{item.description}</Text>
               </Stack>
             </li>
           ))}
         </ul>
-        {recentItems.length > 0 && <Link onClick={() => clearMostRecent()} className={styles.listItemTitle}>Clear Recents</Link>}
+        {recentItems.length > 0 && <Link onClick={() => this.clearMostRecent()}>Clear Recents</Link>}
       </Stack>
     );
-  };
+  }
 
-  const getLearningResourceItems = (): JSX.Element => {
+  private getLearningResourceItems(): JSX.Element {
     interface item {
       link: string;
       title: string;
@@ -784,20 +785,19 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
                 href={item.link}
                 target="_blank"
                 style={{ marginRight: 5 }}
-                className={styles.listItemTitle}
               >
                 {item.title}
               </Link>
               <Image src={LinkIcon} alt={item.title} />
             </Stack>
-            <Text className={styles.listItemSubtitle}>{item.description}</Text>
+            <Text>{item.description}</Text>
           </Stack>
         ))}
       </Stack>
     );
-  };
+  }
 
-  const postgresNextStepItems: { link: string; title: string; description: string }[] = [
+  private postgresNextStepItems: { link: string; title: string; description: string }[] = [
     {
       link: "https://go.microsoft.com/fwlink/?linkid=2208312",
       title: "Data Modeling",
@@ -815,7 +815,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
     },
   ];
 
-  const vcoreMongoNextStepItems: { link: string; title: string; description: string }[] = [
+  private vcoreMongoNextStepItems: { link: string; title: string; description: string }[] = [
     {
       link: "https://learn.microsoft.com/en-us/azure/cosmos-db/mongodb/vcore/how-to-migrate-native-tools?tabs=export-import",
       title: "Migrate Data",
@@ -833,27 +833,27 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
     },
   ];
 
-  const getNextStepItems = (): JSX.Element => {
+  private getNextStepItems(): JSX.Element {
-    const items = userContext.apiType === "Postgres" ? postgresNextStepItems : vcoreMongoNextStepItems;
+    const items = userContext.apiType === "Postgres" ? this.postgresNextStepItems : this.vcoreMongoNextStepItems;
 
     return (
       <Stack style={{ minWidth: 124, maxWidth: 296 }}>
         {items.map((item, i) => (
           <Stack key={`nextStep${i}`} style={{ marginBottom: 26 }}>
             <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
-              <Link href={item.link} target="_blank" style={{ marginRight: 5 }} className={styles.listItemTitle}>
+              <Link href={item.link} target="_blank" style={{ marginRight: 5 }}>
                 {item.title}
               </Link>
               <Image src={LinkIcon} />
             </Stack>
-            <Text className={styles.listItemSubtitle}>{item.description}</Text>
+            <Text>{item.description}</Text>
           </Stack>
         ))}
       </Stack>
     );
-  };
+  }
 
-  const postgresLearnMoreItems: { link: string; title: string; description: string }[] = [
+  private postgresLearnMoreItems: { link: string; title: string; description: string }[] = [
     {
       link: "https://go.microsoft.com/fwlink/?linkid=2207226",
       title: "Performance Tuning",
@@ -871,7 +871,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
     },
   ];
 
-  const vcoreMongoLearnMoreItems: { link: string; title: string; description: string }[] = [
+  private vcoreMongoLearnMoreItems: { link: string; title: string; description: string }[] = [
     {
       link: "https://learn.microsoft.com/en-us/azure/cosmos-db/mongodb/vcore/vector-search",
       title: "Vector Search",
@@ -889,109 +889,23 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
     },
   ];
 
-  const getTipsAndLearnMoreItems = (): JSX.Element => {
+  private getTipsAndLearnMoreItems(): JSX.Element {
-    const items = userContext.apiType === "Postgres" ? postgresLearnMoreItems : vcoreMongoLearnMoreItems;
+    const items = userContext.apiType === "Postgres" ? this.postgresLearnMoreItems : this.vcoreMongoLearnMoreItems;
 
     return (
       <Stack style={{ minWidth: 124, maxWidth: 296 }}>
         {items.map((item, i) => (
           <Stack key={`tips${i}`} style={{ marginBottom: 26 }}>
             <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
-              <Link href={item.link} target="_blank" style={{ marginRight: 5 }} className={styles.listItemTitle}>
+              <Link href={item.link} target="_blank" style={{ marginRight: 5 }}>
                 {item.title}
               </Link>
               <Image src={LinkIcon} />
             </Stack>
-            <Text className={styles.listItemSubtitle}>{item.description}</Text>
+            <Text>{item.description}</Text>
           </Stack>
         ))}
       </Stack>
     );
-  };
+  }
-
+}
-  return (
-    <div className={styles.splashScreenContainer}>
-      <div className={styles.splashScreen}>
-        <h1 className={styles.title} role="heading" aria-label="Welcome to Azure Cosmos DB">
-          Welcome to Azure Cosmos DB<span className="activePatch"></span>
-        </h1>
-        <div className={styles.subtitle}>
-          Globally distributed, multi-model database service for any scale
-        </div>
-        {getSplashScreenButtons()}
-        {useCarousel.getState().showCoachMark && (
-          <Coachmark
-            target="#quickstartDescription"
-            positioningContainerProps={{ directionalHint: DirectionalHint.rightTopEdge }}
-            persistentBeak
-          >
-            <TeachingBubbleContent
-              headline={`Start with sample ${getCollectionName().toLocaleLowerCase()}`}
-              hasCloseButton
-              closeButtonAriaLabel="Close"
-              primaryButtonProps={{
-                text: "Get started",
-                onClick: () => {
-                  useCarousel.getState().setShowCoachMark(false);
-                  container.onNewCollectionClicked({ isQuickstart: true });
-                },
-              }}
-              secondaryButtonProps={{
-                text: "Cancel",
-                onClick: () => useCarousel.getState().setShowCoachMark(false),
-              }}
-              onDismiss={() => useCarousel.getState().setShowCoachMark(false)}
-            >
-              You will be guided to create a sample container with sample data, then we will give you a tour of
-              data explorer. You can also cancel launching this tour and explore yourself
-            </TeachingBubbleContent>
-          </Coachmark>
-        )}
-        {userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo" ? (
-          <Stack horizontal style={{ margin: "0 auto", width: "84%" }} tokens={{ childrenGap: 16 }}>
-            <Stack style={{ width: "33%" }}>
-              <Text
-                variant="large"
-                style={{
-                  marginBottom: 16,
-                  fontFamily: '"Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif',
-                }}
-              >
-                Next steps
-              </Text>
-              {getNextStepItems()}
-            </Stack>
-            <Stack style={{ width: "33%" }}>
-              <Text
-                variant="large"
-                style={{
-                  marginBottom: 16,
-                  fontFamily: '"Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif',
-                }}
-              >
-                Tips & learn more
-              </Text>
-              {getTipsAndLearnMoreItems()}
-            </Stack>
-            <Stack style={{ width: "33%" }}></Stack>
-          </Stack>
-        ) : (
-          <div className={styles.moreStuffContainer}>
-            <div className={styles.moreStuffColumn}>
-              <h2 className={styles.columnTitle}>Recents</h2>
-              {getRecentItems()}
-            </div>
-            <div className={styles.moreStuffColumn}>
-              <h2 className={styles.columnTitle}>Top 3 things you need to know</h2>
-              {top3Items()}
-            </div>
-            <div className={styles.moreStuffColumn}>
-              <h2 className={styles.columnTitle}>Learning Resources</h2>
-              {getLearningResourceItems()}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

src/Explorer/SplashScreen/SplashScreenButton.tsx

@@ -1,5 +1,4 @@
 import { Stack, Text } from "@fluentui/react";
-import { makeStyles } from "@fluentui/react-components";
 import React from "react";
 import { KeyCodes } from "../../Common/Constants";
 
@@ -10,50 +9,25 @@ interface SplashScreenButtonProps {
   onClick: () => void;
 }
 
-const useStyles = makeStyles({
-  button: {
-    border: "1px solid var(--colorNeutralStroke1)",
-    boxSizing: "border-box",
-    boxShadow: "var(--shadow4)",
-    borderRadius: "4px",
-    padding: "32px 16px",
-    backgroundColor: "var(--colorNeutralBackground1)",
-    color: "var(--colorNeutralForeground1)",
-    width: "100%",
-    minHeight: "150px",
-    cursor: "pointer",
-    "&:hover": {
-      backgroundColor: "var(--colorNeutralBackground1Hover)"
-    }
-  },
-  content: {
-    marginLeft: "16px",
-    textAlign: "left"
-  },
-  title: {
-    fontSize: "18px",
-    fontWeight: "600",
-    color: "var(--colorNeutralForeground1)",
-    marginBottom: "8px"
-  },
-  description: {
-    fontSize: "13px",
-    color: "var(--colorNeutralForeground2)"
-  }
-});
-
 export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
   imgSrc,
   title,
   description,
   onClick,
 }: SplashScreenButtonProps): JSX.Element => {
-  const styles = useStyles();
-  
   return (
     <Stack
       horizontal
-      className={styles.button}
+      style={{
+        border: "1px solid #949494",
+        boxSizing: "border-box",
+        boxShadow: "0 4px 4px rgba(0, 0, 0, 0.25)",
+        borderRadius: 4,
+        padding: "32px 16px",
+        backgroundColor: "#ffffff",
+        width: "100%",
+        minHeight: 150,
+      }}
       onClick={onClick}
       onKeyPress={(event: React.KeyboardEvent) => {
         if (event.charCode === KeyCodes.Space || event.charCode === KeyCodes.Enter) {
@@ -65,11 +39,11 @@ export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
       role="button"
     >
       <div>
-        <img src={imgSrc} alt={title} aria-hidden="true" />
+        <img src={imgSrc} />
       </div>
-      <Stack className={styles.content}>
+      <Stack style={{ marginLeft: 16 }}>
-        <Text className={styles.title}>{title}</Text>
+        <Text style={{ fontSize: 18, fontWeight: 600 }}>{title}</Text>
-        <Text className={styles.description}>{description}</Text>
+        <Text style={{ fontSize: 13 }}>{description}</Text>
       </Stack>
     </Stack>
   );

src/Explorer/Tables/TableDataClient.ts

@@ -3,7 +3,7 @@ import * as ko from "knockout";
 import Q from "q";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
-import { CassandraProxyAPIs } from "../../Common/Constants";
+import { CassandraProxyAPIs, CassandraProxyEndpoints } from "../../Common/Constants";
 import { handleError } from "../../Common/ErrorHandlingUtils";
 import * as HeadersUtility from "../../Common/HeadersUtility";
 import { createDocument } from "../../Common/dataAccess/createDocument";
@@ -264,6 +264,9 @@ export class CassandraAPIDataClient extends TableDataClient {
     shouldNotify?: boolean,
     paginationToken?: string,
   ): Promise<Entities.IListTableEntitiesResult> {
+    if (!this.useCassandraProxyEndpoint("postQuery")) {
+      return this.queryDocuments_ToBeDeprecated(collection, query, shouldNotify, paginationToken);
+    }
     const clearMessage =
       shouldNotify && NotificationConsoleUtils.logConsoleProgress(`Querying rows for table ${collection.id()}`);
     try {
@@ -306,6 +309,55 @@ export class CassandraAPIDataClient extends TableDataClient {
     }
   }
 
+  public async queryDocuments_ToBeDeprecated(
+    collection: ViewModels.Collection,
+    query: string,
+    shouldNotify?: boolean,
+    paginationToken?: string,
+  ): Promise<Entities.IListTableEntitiesResult> {
+    const clearMessage =
+      shouldNotify && NotificationConsoleUtils.logConsoleProgress(`Querying rows for table ${collection.id()}`);
+    try {
+      const { authType, databaseAccount } = userContext;
+      const apiEndpoint: string =
+        authType === AuthType.EncryptedToken
+          ? Constants.CassandraBackend.guestQueryApi
+          : Constants.CassandraBackend.queryApi;
+      const data: any = await $.ajax(`${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`, {
+        type: "POST",
+        data: {
+          accountName: databaseAccount?.name,
+          cassandraEndpoint: this.trimCassandraEndpoint(databaseAccount?.properties.cassandraEndpoint),
+          resourceId: databaseAccount?.id,
+          keyspaceId: collection.databaseId,
+          tableId: collection.id(),
+          query,
+          paginationToken,
+        },
+        beforeSend: this.setAuthorizationHeader as any,
+        cache: false,
+      });
+      shouldNotify &&
+        NotificationConsoleUtils.logConsoleInfo(
+          `Successfully fetched ${data.result.length} rows for table ${collection.id()}`,
+        );
+      return {
+        Results: data.result,
+        ContinuationToken: data.paginationToken,
+      };
+    } catch (error) {
+      shouldNotify &&
+        handleError(
+          error,
+          "QueryDocuments_ToBeDeprecated_Cassandra",
+          `Failed to query rows for table ${collection.id()}`,
+        );
+      throw error;
+    } finally {
+      clearMessage?.();
+    }
+  }
+
   public async deleteDocuments(
     collection: ViewModels.Collection,
     entitiesToDelete: Entities.ITableEntity[],
@@ -419,6 +471,10 @@ export class CassandraAPIDataClient extends TableDataClient {
   }
 
   public getTableKeys(collection: ViewModels.Collection): Q.Promise<CassandraTableKeys> {
+    if (!this.useCassandraProxyEndpoint("getKeys")) {
+      return this.getTableKeys_ToBeDeprecated(collection);
+    }
+
     if (!!collection.cassandraKeys) {
       return Q.resolve(collection.cassandraKeys);
     }
@@ -459,7 +515,52 @@ export class CassandraAPIDataClient extends TableDataClient {
     return deferred.promise;
   }
 
+  public getTableKeys_ToBeDeprecated(collection: ViewModels.Collection): Q.Promise<CassandraTableKeys> {
+    if (!!collection.cassandraKeys) {
+      return Q.resolve(collection.cassandraKeys);
+    }
+    const clearInProgressMessage = logConsoleProgress(`Fetching keys for table ${collection.id()}`);
+    const { authType, databaseAccount } = userContext;
+    const apiEndpoint: string =
+      authType === AuthType.EncryptedToken
+        ? Constants.CassandraBackend.guestKeysApi
+        : Constants.CassandraBackend.keysApi;
+    let endpoint = `${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`;
+    const deferred = Q.defer<CassandraTableKeys>();
+
+    $.ajax(endpoint, {
+      type: "POST",
+      data: {
+        accountName: databaseAccount?.name,
+        cassandraEndpoint: this.trimCassandraEndpoint(databaseAccount?.properties.cassandraEndpoint),
+        resourceId: databaseAccount?.id,
+        keyspaceId: collection.databaseId,
+        tableId: collection.id(),
+      },
+      beforeSend: this.setAuthorizationHeader as any,
+      cache: false,
+    })
+      .then(
+        (data: CassandraTableKeys) => {
+          collection.cassandraKeys = data;
+          logConsoleInfo(`Successfully fetched keys for table ${collection.id()}`);
+          deferred.resolve(data);
+        },
+        (error: any) => {
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
+          handleError(errorText, "FetchKeysCassandra", `Error fetching keys for table ${collection.id()}`);
+          deferred.reject(errorText);
+        },
+      )
+      .done(clearInProgressMessage);
+    return deferred.promise;
+  }
+
   public getTableSchema(collection: ViewModels.Collection): Q.Promise<CassandraTableKey[]> {
+    if (!this.useCassandraProxyEndpoint("getSchema")) {
+      return this.getTableSchema_ToBeDeprecated(collection);
+    }
+
     if (!!collection.cassandraSchema) {
       return Q.resolve(collection.cassandraSchema);
     }
@@ -501,7 +602,52 @@ export class CassandraAPIDataClient extends TableDataClient {
     return deferred.promise;
   }
 
+  public getTableSchema_ToBeDeprecated(collection: ViewModels.Collection): Q.Promise<CassandraTableKey[]> {
+    if (!!collection.cassandraSchema) {
+      return Q.resolve(collection.cassandraSchema);
+    }
+    const clearInProgressMessage = logConsoleProgress(`Fetching schema for table ${collection.id()}`);
+    const { databaseAccount, authType } = userContext;
+    const apiEndpoint: string =
+      authType === AuthType.EncryptedToken
+        ? Constants.CassandraBackend.guestSchemaApi
+        : Constants.CassandraBackend.schemaApi;
+    let endpoint = `${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`;
+    const deferred = Q.defer<CassandraTableKey[]>();
+
+    $.ajax(endpoint, {
+      type: "POST",
+      data: {
+        accountName: databaseAccount?.name,
+        cassandraEndpoint: this.trimCassandraEndpoint(databaseAccount?.properties.cassandraEndpoint),
+        resourceId: databaseAccount?.id,
+        keyspaceId: collection.databaseId,
+        tableId: collection.id(),
+      },
+      beforeSend: this.setAuthorizationHeader as any,
+      cache: false,
+    })
+      .then(
+        (data: any) => {
+          collection.cassandraSchema = data.columns;
+          logConsoleInfo(`Successfully fetched schema for table ${collection.id()}`);
+          deferred.resolve(data.columns);
+        },
+        (error: any) => {
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
+          handleError(errorText, "FetchSchemaCassandra", `Error fetching schema for table ${collection.id()}`);
+          deferred.reject(errorText);
+        },
+      )
+      .done(clearInProgressMessage);
+    return deferred.promise;
+  }
+
   private createOrDeleteQuery(cassandraEndpoint: string, resourceId: string, query: string): Q.Promise<any> {
+    if (!this.useCassandraProxyEndpoint("createOrDelete")) {
+      return this.createOrDeleteQuery_ToBeDeprecated(cassandraEndpoint, resourceId, query);
+    }
+
     const deferred = Q.defer();
     const { authType, databaseAccount } = userContext;
     const apiEndpoint: string =
@@ -531,6 +677,38 @@ export class CassandraAPIDataClient extends TableDataClient {
     return deferred.promise;
   }
 
+  private createOrDeleteQuery_ToBeDeprecated(
+    cassandraEndpoint: string,
+    resourceId: string,
+    query: string,
+  ): Q.Promise<any> {
+    const deferred = Q.defer();
+    const { authType, databaseAccount } = userContext;
+    const apiEndpoint: string =
+      authType === AuthType.EncryptedToken
+        ? Constants.CassandraBackend.guestCreateOrDeleteApi
+        : Constants.CassandraBackend.createOrDeleteApi;
+    $.ajax(`${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`, {
+      type: "POST",
+      data: {
+        accountName: databaseAccount?.name,
+        cassandraEndpoint: this.trimCassandraEndpoint(cassandraEndpoint),
+        resourceId: resourceId,
+        query: query,
+      },
+      beforeSend: this.setAuthorizationHeader as any,
+      cache: false,
+    }).then(
+      (data: any) => {
+        deferred.resolve();
+      },
+      (reason) => {
+        deferred.reject(reason);
+      },
+    );
+    return deferred.promise;
+  }
+
   private trimCassandraEndpoint(cassandraEndpoint: string): string {
     if (!cassandraEndpoint) {
       return cassandraEndpoint;
@@ -569,4 +747,23 @@ export class CassandraAPIDataClient extends TableDataClient {
   private getCassandraPartitionKeyProperty(collection: ViewModels.Collection): string {
     return collection.cassandraKeys.partitionKeys[0].property;
   }
+
+  private useCassandraProxyEndpoint(api: string): boolean {
+    const activeCassandraProxyEndpoints: string[] = [
+      CassandraProxyEndpoints.Development,
+      CassandraProxyEndpoints.Mpac,
+      CassandraProxyEndpoints.Prod,
+      CassandraProxyEndpoints.Fairfax,
+      CassandraProxyEndpoints.Mooncake,
+    ];
+
+    if (configContext.globallyEnabledCassandraAPIs.includes(api)) {
+      return true;
+    }
+
+    return (
+      configContext.NEW_CASSANDRA_APIS?.includes(api) &&
+      activeCassandraProxyEndpoints.includes(configContext.CASSANDRA_PROXY_ENDPOINT)
+    );
+  }
 }

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts

@@ -3,11 +3,17 @@
 import { ColumnDefinition } from "Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent";
 import {
   AppStateComponentNames,
-  deleteSubComponentState,
+  deleteState,
-  readSubComponentState,
+  loadState,
-  saveSubComponentState,
+  saveState,
+  saveStateDebounced,
 } from "Shared/AppStatePersistenceUtility";
+import { userContext } from "UserContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+
+const componentName = AppStateComponentNames.DocumentsTab;
 
 export enum SubComponentName {
   ColumnSizes = "ColumnSizes",
@@ -15,7 +21,6 @@ export enum SubComponentName {
   MainTabDivider = "MainTabDivider",
   ColumnsSelection = "ColumnsSelection",
   ColumnSort = "ColumnSort",
-  CurrentFilter = "CurrentFilter",
 }
 
 export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
@@ -25,22 +30,84 @@ export type TabDivider = { leftPaneWidthPercent: number };
 export type ColumnsSelection = { selectedColumnIds: string[]; columnDefinitions: ColumnDefinition[] };
 export type ColumnSort = { columnId: string; direction: "ascending" | "descending" };
 
-// Wrap the ...SubComponentState functions for type safety
+/**
-
+ *
-export const readDocumentsTabSubComponentState = <T>(
+ * @param subComponentName
+ * @param collection
+ * @param defaultValue Will be returned if persisted state is not found
+ * @returns
+ */
+export const readSubComponentState = <T>(
   subComponentName: SubComponentName,
   collection: ViewModels.CollectionBase,
   defaultValue: T,
-): T => readSubComponentState<T>(AppStateComponentNames.DocumentsTab, subComponentName, collection, defaultValue);
+): T => {
+  const globalAccountName = userContext.databaseAccount?.name;
+  if (!globalAccountName) {
+    const message = "Database account name not found in userContext";
+    console.error(message);
+    TelemetryProcessor.traceFailure(Action.ReadPersistedTabState, { message, componentName });
+    return defaultValue;
+  }
 
-export const saveDocumentsTabSubComponentState = <T>(
+  const state = loadState({
+    componentName: componentName,
+    subComponentName,
+    globalAccountName,
+    databaseName: collection.databaseId,
+    containerName: collection.id(),
+  }) as T;
+
+  return state || defaultValue;
+};
+
+/**
+ *
+ * @param subComponentName
+ * @param collection
+ * @param state State to save
+ * @param debounce true for high-frequency calls (e.g mouse drag events)
+ */
+export const saveSubComponentState = <T>(
   subComponentName: SubComponentName,
   collection: ViewModels.CollectionBase,
   state: T,
   debounce?: boolean,
-): void => saveSubComponentState<T>(AppStateComponentNames.DocumentsTab, subComponentName, collection, state, debounce);
+): void => {
+  const globalAccountName = userContext.databaseAccount?.name;
+  if (!globalAccountName) {
+    const message = "Database account name not found in userContext";
+    console.error(message);
+    TelemetryProcessor.traceFailure(Action.SavePersistedTabState, { message, componentName });
+    return;
+  }
 
-export const deleteDocumentsTabSubComponentState = (
+  (debounce ? saveStateDebounced : saveState)(
-  subComponentName: SubComponentName,
+    {
-  collection: ViewModels.CollectionBase,
+      componentName: componentName,
-) => deleteSubComponentState(AppStateComponentNames.DocumentsTab, subComponentName, collection);
+      subComponentName,
+      globalAccountName,
+      databaseName: collection.databaseId,
+      containerName: collection.id(),
+    },
+    state,
+  );
+};
+
+export const deleteSubComponentState = (subComponentName: SubComponentName, collection: ViewModels.CollectionBase) => {
+  const globalAccountName = userContext.databaseAccount?.name;
+  if (!globalAccountName) {
+    const message = "Database account name not found in userContext";
+    console.error(message);
+    TelemetryProcessor.traceFailure(Action.DeletePersistedTabState, { message, componentName });
+    return;
+  }
+
+  deleteState({
+    componentName: componentName,
+    subComponentName,
+    globalAccountName,
+    databaseName: collection.databaseId,
+    containerName: collection.id(),
+  });
+};

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx

@@ -2,7 +2,6 @@ import { FeedResponse, ItemDefinition, Resource } from "@azure/cosmos";
 import { waitFor } from "@testing-library/react";
 import { deleteDocuments } from "Common/dataAccess/deleteDocument";
 import { Platform, updateConfigContext } from "ConfigContext";
-import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
 import { useDialog } from "Explorer/Controls/Dialog";
 import { EditorReactProps } from "Explorer/Controls/Editor/EditorReact";
 import { ProgressModalDialog } from "Explorer/Controls/ProgressModalDialog";
@@ -342,15 +341,10 @@ describe("Documents tab (noSql API)", () => {
     updateConfigContext({ platform: Platform.Fabric });
     updateUserContext({
       fabricContext: {
-        databaseName: "database",
+        connectionId: "test",
-        artifactInfo: {
+        databaseConnectionInfo: undefined,
-          connectionId: "test",
-          resourceTokenInfo: undefined,
-        },
-        artifactType: CosmosDbArtifactType.MIRRORED_KEY,
         isReadOnly: true,
         isVisible: true,
-        fabricClientRpcVersion: "rpcVersion",
       },
     });
 

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -20,7 +20,7 @@ import {
 import { queryDocuments } from "Common/dataAccess/queryDocuments";
 import { readDocument } from "Common/dataAccess/readDocument";
 import { updateDocument } from "Common/dataAccess/updateDocument";
-import { ActionType, OpenCollectionTab, TabKind } from "Contracts/ActionContracts";
+import { Platform, configContext } from "ConfigContext";
 import { CommandButtonComponentProps } from "Explorer/Controls/CommandButton/CommandButtonComponent";
 import { useDialog } from "Explorer/Controls/Dialog";
 import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
@@ -34,15 +34,13 @@ import {
   FilterHistory,
   SubComponentName,
   TabDivider,
-  deleteDocumentsTabSubComponentState,
+  readSubComponentState,
-  readDocumentsTabSubComponentState,
+  saveSubComponentState,
-  saveDocumentsTabSubComponentState,
 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
 import { usePrevious } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
 import { CosmosFluentProvider, LayoutConstants, cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
-import { isFabric } from "Platform/Fabric/FabricUtil";
 import { QueryConstants } from "Shared/Constants";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
@@ -55,7 +53,6 @@ import DeleteDocumentIcon from "../../../../images/DeleteDocument.svg";
 import NewDocumentIcon from "../../../../images/NewDocument.svg";
 import UploadIcon from "../../../../images/Upload_16x16.svg";
 import DiscardIcon from "../../../../images/discard.svg";
-import RefreshIcon from "../../../../images/refresh-cosmos.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";
 import * as Constants from "../../../Common/Constants";
 import * as HeadersUtility from "../../../Common/HeadersUtility";
@@ -132,14 +129,6 @@ export const useDocumentsTabStyles = makeStyles({
     backgroundColor: "white",
     zIndex: 1,
   },
-  refreshBtn: {
-    position: "absolute",
-    top: "3px",
-    right: "4px",
-    float: "right",
-    zIndex: 1,
-    backgroundColor: "transparent",
-  },
   deleteProgressContent: {
     paddingTop: tokens.spacingVerticalL,
   },
@@ -151,8 +140,6 @@ export class DocumentsTabV2 extends TabsBase {
   private title: string;
   private resourceTokenPartitionKey: string;
 
-  protected persistedState: OpenCollectionTab;
-
   constructor(options: ViewModels.DocumentsTabOptions) {
     super(options);
 
@@ -160,13 +147,6 @@ export class DocumentsTabV2 extends TabsBase {
     this.title = options.title;
     this.partitionKey = options.partitionKey;
     this.resourceTokenPartitionKey = options.resourceTokenPartitionKey;
-
-    this.persistedState = {
-      actionType: ActionType.OpenCollectionTab,
-      tabKind: options.isPreferredApiMongoDB ? TabKind.MongoDocuments : TabKind.SQLDocuments,
-      databaseResourceId: options.collection.databaseId,
-      collectionResourceId: options.collection.id(),
-    };
   }
 
   public render(): JSX.Element {
@@ -353,7 +333,7 @@ export const getTabsButtons = ({
   onRevertExistingDocumentClick,
   onDeleteExistingDocumentsClick,
 }: ButtonsDependencies): CommandButtonComponentProps[] => {
-  if (isFabric() && userContext.fabricContext?.isReadOnly) {
+  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly) {
     // All the following buttons require write access
     return [];
   }
@@ -595,10 +575,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   onIsExecutingChange,
   isTabActive,
 }): JSX.Element => {
-  const [filterContent, setFilterContent] = useState<string>(() =>
+  const [filterContent, setFilterContent] = useState<string>("");
-    readDocumentsTabSubComponentState<string>(SubComponentName.CurrentFilter, _collection, ""),
-  );
-
   const [documentIds, setDocumentIds] = useState<ExtendedDocumentId[]>([]);
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
   const styles = useDocumentsTabStyles();
@@ -629,7 +606,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
   // State
   const [tabStateData, setTabStateData] = useState<TabDivider>(() =>
-    readDocumentsTabSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, {
+    readSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, {
       leftPaneWidthPercent: 35,
     }),
   );
@@ -644,7 +621,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
   // User's filter history
   const [lastFilterContents, setLastFilterContents] = useState<FilterHistory>(() =>
-    readDocumentsTabSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, [] as FilterHistory),
+    readSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, [] as FilterHistory),
   );
 
   // For progress bar for bulk delete (noSql)
@@ -786,7 +763,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   };
 
   const [selectedColumnIds, setSelectedColumnIds] = useState<string[]>(() => {
-    const persistedColumnsSelection = readDocumentsTabSubComponentState<ColumnsSelection>(
+    const persistedColumnsSelection = readSubComponentState<ColumnsSelection>(
       SubComponentName.ColumnsSelection,
       _collection,
       undefined,
@@ -831,7 +808,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   useEffect(() => {
     setKeyboardActions({
       [KeyboardAction.CLEAR_SEARCH]: () => {
-        updateFilterContent("");
+        setFilterContent("");
         refreshDocumentsGrid(true);
         return true;
       },
@@ -1159,16 +1136,27 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
           deletePromise = _bulkDeleteNoSqlDocuments(_collection, toDeleteDocumentIds);
         }
       } else {
-        deletePromise = MongoProxyClient.deleteDocuments(
+        if (isMongoBulkDeleteDisabled) {
-          _collection.databaseId,
+          // TODO: Once new mongo proxy is available for all users, remove the call for MongoProxyClient.deleteDocument().
-          _collection as ViewModels.Collection,
+          // MongoProxyClient.deleteDocuments() should be called for all users.
-          toDeleteDocumentIds,
+          deletePromise = MongoProxyClient.deleteDocument(
-        ).then(({ deletedCount, isAcknowledged }) => {
+            _collection.databaseId,
-          if (deletedCount === toDeleteDocumentIds.length && isAcknowledged) {
+            _collection as ViewModels.Collection,
-            return toDeleteDocumentIds;
+            toDeleteDocumentIds[0],
-          }
+          ).then(() => [toDeleteDocumentIds[0]]);
-          throw new Error(`Delete failed with deletedCount: ${deletedCount} and isAcknowledged: ${isAcknowledged}`);
+          // ----------------------------------------------------------------------------------------------------
-        });
+        } else {
+          deletePromise = MongoProxyClient.deleteDocuments(
+            _collection.databaseId,
+            _collection as ViewModels.Collection,
+            toDeleteDocumentIds,
+          ).then(({ deletedCount, isAcknowledged }) => {
+            if (deletedCount === toDeleteDocumentIds.length && isAcknowledged) {
+              return toDeleteDocumentIds;
+            }
+            throw new Error(`Delete failed with deletedCount: ${deletedCount} and isAcknowledged: ${isAcknowledged}`);
+          });
+        }
       }
 
       return deletePromise
@@ -1657,7 +1645,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
   // Column definition is a map<id, ColumnDefinition> to garantee uniqueness
   const [columnDefinitions, setColumnDefinitions] = useState<ColumnDefinition[]>(() => {
-    const persistedColumnsSelection = readDocumentsTabSubComponentState<ColumnsSelection>(
+    const persistedColumnsSelection = readSubComponentState<ColumnsSelection>(
       SubComponentName.ColumnsSelection,
       _collection,
       undefined,
@@ -1968,7 +1956,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     const limitedLastFilterContents = lastFilterContents.slice(0, MAX_FILTER_HISTORY_COUNT);
 
     setLastFilterContents(limitedLastFilterContents);
-    saveDocumentsTabSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, lastFilterContents);
+    saveSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, lastFilterContents);
   };
 
   const refreshDocumentsGrid = useCallback(
@@ -2025,7 +2013,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
     setSelectedColumnIds(newSelectedColumnIds);
 
-    saveDocumentsTabSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, {
+    saveSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, {
       selectedColumnIds: newSelectedColumnIds,
       columnDefinitions,
     });
@@ -2052,8 +2040,11 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     }
   }, [prevSelectedColumnIds, refreshDocumentsGrid, selectedColumnIds]);
 
+  // TODO: remove isMongoBulkDeleteDisabled when new mongo proxy is enabled for all users
   // TODO: remove partitionKey.systemKey when JS SDK bug is fixed
-  const isBulkDeleteDisabled = partitionKey.systemKey && !isPreferredApiMongoDB;
+  const isMongoBulkDeleteDisabled = !MongoProxyClient.useMongoProxyEndpoint(Constants.MongoProxyApi.BulkDelete);
+  const isBulkDeleteDisabled =
+    (partitionKey.systemKey && !isPreferredApiMongoDB) || (isPreferredApiMongoDB && isMongoBulkDeleteDisabled);
   //  -------------------------------------------------------
 
   const getFilterChoices = (): InputDatalistDropdownOptionSection[] => {
@@ -2072,15 +2063,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     return options;
   };
 
-  const updateFilterContent = (filter: string): void => {
-    if (filter === "" || filter === undefined) {
-      deleteDocumentsTabSubComponentState(SubComponentName.CurrentFilter, _collection);
-    } else {
-      saveDocumentsTabSubComponentState<string>(SubComponentName.CurrentFilter, _collection, filter, true);
-    }
-    setFilterContent(filter);
-  };
-
   return (
     <CosmosFluentProvider className={styles.container}>
       <div className="tab-pane active" role="tabpanel" style={{ display: "flex" }}>
@@ -2095,7 +2077,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
             }
             title="Type a query predicate or choose one from the list."
             value={filterContent}
-            onChange={updateFilterContent}
+            onChange={(value) => setFilterContent(value)}
             onKeyDown={onFilterKeyDown}
             bottomLink={{ text: "Learn more", url: DATA_EXPLORER_DOC_URL }}
           />
@@ -2121,7 +2103,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
         <Allotment
           onDragEnd={(sizes: number[]) => {
             tabStateData.leftPaneWidthPercent = (100 * sizes[0]) / (sizes[0] + sizes[1]);
-            saveDocumentsTabSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, tabStateData);
+            saveSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, tabStateData);
             setTabStateData(tabStateData);
           }}
         >
@@ -2145,7 +2127,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                     selectedColumnIds={selectedColumnIds}
                     columnDefinitions={columnDefinitions}
                     isRowSelectionDisabled={
-                      isBulkDeleteDisabled || (isFabric() && userContext.fabricContext?.isReadOnly)
+                      isBulkDeleteDisabled ||
+                      (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly)
                     }
                     onColumnSelectionChange={onColumnSelectionChange}
                     defaultColumnSelection={getInitialColumnSelection()}
@@ -2153,18 +2136,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                     isColumnSelectionDisabled={isPreferredApiMongoDB}
                   />
                 </div>
-                {tableContainerSizePx?.width >= calculateOffset(selectedColumnIds.length) + 200 && (
-                  <div
-                    title="Refresh"
-                    className={styles.refreshBtn}
-                    role="button"
-                    onClick={() => refreshDocumentsGrid(false)}
-                    aria-label="Refresh"
-                    tabIndex={0}
-                  >
-                    <img src={RefreshIcon} alt="Refresh" />
-                  </div>
-                )}
               </div>
               {tableItems.length > 0 && (
                 <a

src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx

@@ -42,9 +42,9 @@ import { TableColumnSelectionPane } from "Explorer/Panes/TableColumnSelectionPan
 import {
   ColumnSizesMap,
   ColumnSort,
-  deleteDocumentsTabSubComponentState,
+  deleteSubComponentState,
-  readDocumentsTabSubComponentState,
+  readSubComponentState,
-  saveDocumentsTabSubComponentState,
+  saveSubComponentState,
   SubComponentName,
 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
 import { INITIAL_SELECTED_ROW_INDEX, useDocumentsTabStyles } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
@@ -118,11 +118,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   const sortedRowsRef = React.useRef(null);
 
   const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() => {
-    const columnSizesMap: ColumnSizesMap = readDocumentsTabSubComponentState(
+    const columnSizesMap: ColumnSizesMap = readSubComponentState(SubComponentName.ColumnSizes, collection, {});
-      SubComponentName.ColumnSizes,
-      collection,
-      {},
-    );
     const columnSizesPx: TableColumnSizingOptions = {};
     selectedColumnIds.forEach((columnId) => {
       if (
@@ -146,7 +142,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     sortDirection: "ascending" | "descending";
     sortColumn: TableColumnId | undefined;
   }>(() => {
-    const sort = readDocumentsTabSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, undefined);
+    const sort = readSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, undefined);
 
     if (!sort) {
       return {
@@ -178,12 +174,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
         return acc;
       }, {} as ColumnSizesMap);
 
-      saveDocumentsTabSubComponentState<ColumnSizesMap>(
+      saveSubComponentState<ColumnSizesMap>(SubComponentName.ColumnSizes, collection, persistentSizes, true);
-        SubComponentName.ColumnSizes,
-        collection,
-        persistentSizes,
-        true,
-      );
 
       return newSizingOptions;
     });
@@ -195,14 +186,11 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     setColumnSort(event, columnId, direction);
 
     if (columnId === undefined || direction === undefined) {
-      deleteDocumentsTabSubComponentState(SubComponentName.ColumnSort, collection);
+      deleteSubComponentState(SubComponentName.ColumnSort, collection);
       return;
     }
 
-    saveDocumentsTabSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, {
+    saveSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, { columnId, direction });
-      columnId,
-      direction,
-    });
   };
 
   // Columns must be a static object and cannot change on re-renders otherwise React will complain about too many refreshes
@@ -233,7 +221,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
                     aria-label="Select column"
                     size="small"
                     icon={<MoreHorizontalRegular />}
-                    style={{ position: "absolute", right: 10, backgroundColor: tokens.colorNeutralBackground1 }}
+                    style={{ position: "absolute", right: 0, backgroundColor: tokens.colorNeutralBackground1 }}
                   />
                 </MenuTrigger>
                 <MenuPopover>

src/Explorer/Tabs/MongoQueryTab/MongoQueryTab.tsx

@@ -1,4 +1,3 @@
-import { ActionType, TabKind } from "Contracts/ActionContracts";
 import React from "react";
 import MongoUtility from "../../../Common/MongoUtility";
 import * as ViewModels from "../../../Contracts/ViewModels";
@@ -21,7 +20,7 @@ export class NewMongoQueryTab extends NewQueryTab {
     private mongoQueryTabProps: IMongoQueryTabProps,
   ) {
     super(options, mongoQueryTabProps);
-    this.queryText = options.queryText ?? "";
+    this.queryText = "";
     this.iMongoQueryTabComponentProps = {
       collection: options.collection,
       isExecutionError: this.isExecutionError(),
@@ -29,8 +28,6 @@ export class NewMongoQueryTab extends NewQueryTab {
       tabsBaseInstance: this,
       queryText: this.queryText,
       partitionKey: this.partitionKey,
-      splitterDirection: options.splitterDirection,
-      queryViewSizePercent: options.queryViewSizePercent,
       container: this.mongoQueryTabProps.container,
       onTabAccessor: (instance: ITabAccessor): void => {
         this.iTabAccessor = instance;
@@ -38,26 +35,6 @@ export class NewMongoQueryTab extends NewQueryTab {
       isPreferredApiMongoDB: true,
       monacoEditorSetting: "plaintext",
       viewModelcollection: this.mongoQueryTabProps.viewModelcollection,
-      onUpdatePersistedState: (state: {
-        queryText: string;
-        splitterDirection: string;
-        queryViewSizePercent: number;
-      }): void => {
-        this.persistedState = {
-          actionType: ActionType.OpenCollectionTab,
-          tabKind: TabKind.SQLQuery,
-          databaseResourceId: options.collection.databaseId,
-          collectionResourceId: options.collection.id(),
-          query: {
-            text: state.queryText,
-          },
-          splitterDirection: state.splitterDirection as "vertical" | "horizontal",
-          queryViewSizePercent: state.queryViewSizePercent,
-        };
-        if (this.triggerPersistState) {
-          this.triggerPersistState();
-        }
-      },
     };
   }
 

src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx

@@ -1,4 +1,6 @@
+import { useMongoProxyEndpoint } from "Common/MongoProxyClient";
 import React, { Component } from "react";
+import * as Constants from "../../../Common/Constants";
 import { configContext } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
@@ -48,13 +50,15 @@ export default class MongoShellTabComponent extends Component<
   IMongoShellTabComponentStates
 > {
   private _logTraces: Map<string, number>;
+  private _useMongoProxyEndpoint: boolean;
 
   constructor(props: IMongoShellTabComponentProps) {
     super(props);
     this._logTraces = new Map();
+    this._useMongoProxyEndpoint = useMongoProxyEndpoint(Constants.MongoProxyApi.LegacyMongoShell);
 
     this.state = {
-      url: getMongoShellUrl(),
+      url: getMongoShellUrl(this._useMongoProxyEndpoint),
     };
 
     props.onMongoShellTabAccessor({
@@ -109,9 +113,17 @@ export default class MongoShellTabComponent extends Component<
     const resourceId = databaseAccount?.id;
     const accountName = databaseAccount?.name;
     const documentEndpoint = databaseAccount?.properties.mongoEndpoint || databaseAccount?.properties.documentEndpoint;
+    const mongoEndpoint =
+      documentEndpoint.substr(
+        Constants.MongoDBAccounts.protocol.length + 3,
+        documentEndpoint.length -
+          (Constants.MongoDBAccounts.protocol.length + 2 + Constants.MongoDBAccounts.defaultPort.length),
+      ) + Constants.MongoDBAccounts.defaultPort.toString();
     const databaseId = this.props.collection.databaseId;
     const collectionId = this.props.collection.id();
-    const apiEndpoint = configContext.MONGO_PROXY_ENDPOINT;
+    const apiEndpoint = this._useMongoProxyEndpoint
+      ? configContext.MONGO_PROXY_ENDPOINT
+      : configContext.BACKEND_ENDPOINT;
     const encryptedAuthToken: string = userContext.accessToken;
 
     shellIframe.contentWindow.postMessage(
@@ -120,7 +132,7 @@ export default class MongoShellTabComponent extends Component<
         data: {
           resourceId: resourceId,
           accountName: accountName,
-          mongoEndpoint: documentEndpoint,
+          mongoEndpoint: this._useMongoProxyEndpoint ? documentEndpoint : mongoEndpoint,
           authorization: authorization,
           databaseId: databaseId,
           collectionId: collectionId,

src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts

@@ -2,6 +2,8 @@ import { Platform, resetConfigContext, updateConfigContext } from "../../../Conf
 import { updateUserContext, userContext } from "../../../UserContext";
 import { getMongoShellUrl } from "./getMongoShellUrl";
 
+const mongoBackendEndpoint = "https://localhost:1234";
+
 describe("getMongoShellUrl", () => {
   let queryString = "";
 
@@ -9,6 +11,7 @@ describe("getMongoShellUrl", () => {
     resetConfigContext();
 
     updateConfigContext({
+      BACKEND_ENDPOINT: mongoBackendEndpoint,
       platform: Platform.Hosted,
     });
 
@@ -34,7 +37,12 @@ describe("getMongoShellUrl", () => {
     queryString = `resourceId=${userContext.databaseAccount.id}&accountName=${userContext.databaseAccount.name}&mongoEndpoint=${userContext.databaseAccount.properties.documentEndpoint}`;
   });
 
-  it("should return /index.html by default", () => {
+  it("should return /indexv2.html by default", () => {
-    expect(getMongoShellUrl().toString()).toContain(`/index.html?${queryString}`);
+    expect(getMongoShellUrl().toString()).toContain(`/indexv2.html?${queryString}`);
+  });
+
+  it("should return /index.html when useMongoProxyEndpoint is true", () => {
+    const useMongoProxyEndpoint: boolean = true;
+    expect(getMongoShellUrl(useMongoProxyEndpoint).toString()).toContain(`/index.html?${queryString}`);
   });
 });

src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts

@@ -1,11 +1,11 @@
 import { userContext } from "../../../UserContext";
 
-export function getMongoShellUrl(): string {
+export function getMongoShellUrl(useMongoProxyEndpoint?: boolean): string {
   const { databaseAccount: account } = userContext;
   const resourceId = account?.id;
   const accountName = account?.name;
   const mongoEndpoint = account?.properties?.mongoEndpoint || account?.properties?.documentEndpoint;
   const queryString = `resourceId=${resourceId}&accountName=${accountName}&mongoEndpoint=${mongoEndpoint}`;
 
-  return `/mongoshell/index.html?${queryString}`;
+  return useMongoProxyEndpoint ? `/mongoshell/index.html?${queryString}` : `/mongoshell/indexv2.html?${queryString}`;
 }

src/Explorer/Tabs/QueryTab/IndexAdvisorUtils.tsx

@@ -1,114 +0,0 @@
-import { CircleFilled } from "@fluentui/react-icons";
-import type { IIndexMetric } from "Explorer/Tabs/QueryTab/ResultsView";
-import { useIndexAdvisorStyles } from "Explorer/Tabs/QueryTab/StylesAdvisor";
-import * as React from "react";
-interface IndexObject {
-  index: string;
-  impact: string;
-  section: "Included" | "Not Included" | "Header";
-  composite?: {
-    path: string;
-    order: "ascending" | "descending";
-  }[];
-  path?: string;
-}
-
-export interface IndexMetricsJson {
-  included?: IIndexMetric[];
-  notIncluded?: IIndexMetric[];
-}
-export function parseIndexMetrics(indexMetrics: string | IndexMetricsJson): {
-  included: IIndexMetric[];
-  notIncluded: IIndexMetric[];
-} {
-  // If already JSON, just extract arrays
-  if (typeof indexMetrics === "object" && indexMetrics !== null) {
-    return {
-      included: Array.isArray(indexMetrics.included) ? indexMetrics.included : [],
-      notIncluded: Array.isArray(indexMetrics.notIncluded) ? indexMetrics.notIncluded : [],
-    };
-  }
-
-  // Otherwise, parse as string (current SDK)
-  const included: IIndexMetric[] = [];
-  const notIncluded: IIndexMetric[] = [];
-  const lines = (indexMetrics as string)
-    .split("\n")
-    .map((line) => line.trim())
-    .filter(Boolean);
-  let currentSection = "";
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    if (line.startsWith("Utilized Single Indexes") || line.startsWith("Utilized Composite Indexes")) {
-      currentSection = "included";
-    } else if (line.startsWith("Potential Single Indexes") || line.startsWith("Potential Composite Indexes")) {
-      currentSection = "notIncluded";
-    } else if (line.startsWith("Index Spec:")) {
-      const index = line.replace("Index Spec:", "").trim();
-      const impactLine = lines[i + 1];
-      const impact = impactLine?.includes("Index Impact Score:") ? impactLine.split(":")[1].trim() : "Unknown";
-
-      const isComposite = index.includes(",");
-
-      const sectionMap: Record<string, "Included" | "Not Included"> = {
-        included: "Included",
-        notIncluded: "Not Included",
-      };
-
-      const indexObj: IndexObject = { index, impact, section: sectionMap[currentSection] ?? "Header" };
-      if (isComposite) {
-        indexObj.composite = index.split(",").map((part: string) => {
-          const [path, order] = part.trim().split(/\s+/);
-          return {
-            path: path.trim(),
-            order: order?.toLowerCase() === "desc" ? "descending" : "ascending",
-          };
-        });
-      } else {
-        let path = "/unknown/*";
-        const pathRegex = /\/[^/\s*?]+(?:\/[^/\s*?]+)*(\/\*|\?)/;
-        const match = index.match(pathRegex);
-        if (match) {
-          path = match[0];
-        } else {
-          const simplePathRegex = /\/[^/\s]+/;
-          const simpleMatch = index.match(simplePathRegex);
-          if (simpleMatch) {
-            path = simpleMatch[0] + "/*";
-          }
-        }
-        indexObj.path = path;
-      }
-
-      if (currentSection === "included") {
-        included.push(indexObj);
-      } else if (currentSection === "notIncluded") {
-        notIncluded.push(indexObj);
-      }
-    }
-  }
-  return { included, notIncluded };
-}
-
-export const renderImpactDots = (impact: string): JSX.Element => {
-  const style = useIndexAdvisorStyles();
-  let count = 0;
-
-  if (impact === "High") {
-    count = 3;
-  } else if (impact === "Medium") {
-    count = 2;
-  } else if (impact === "Low") {
-    count = 1;
-  }
-
-  return (
-    <div className={style.indexAdvisorImpactDots}>
-      {Array.from({ length: count }).map((_, i) => (
-        <CircleFilled key={i} className={style.indexAdvisorImpactDot} />
-      ))}
-    </div>
-  );
-};
-
-

src/Explorer/Tabs/QueryTab/QueryResultSection.tsx

@@ -1,4 +1,4 @@
-import { Link, tokens } from "@fluentui/react-components";
+import { Link } from "@fluentui/react-components";
 import QueryError from "Common/QueryError";
 import { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar";
 import { MessageBanner } from "Explorer/Controls/MessageBanner";
@@ -29,7 +29,7 @@ const ExecuteQueryCallToAction: React.FC = () => {
         <p>
           <img src={RunQuery} aria-hidden="true" />
         </p>
-        <p style={{ color: tokens.colorNeutralForeground1 }}>Execute a query to see the results</p>
+        <p>Execute a query to see the results</p>
       </div>
     </div>
   );

src/Explorer/Tabs/QueryTab/QueryTab.tsx

@@ -1,5 +1,4 @@
 import { sendMessage } from "Common/MessageHandler";
-import { ActionType, OpenQueryTab, TabKind } from "Contracts/ActionContracts";
 import { MessageTypes } from "Contracts/MessageTypes";
 import { CopilotProvider } from "Explorer/QueryCopilot/QueryCopilotContext";
 import { userContext } from "UserContext";
@@ -27,8 +26,6 @@ export class NewQueryTab extends TabsBase {
   public iQueryTabComponentProps: IQueryTabComponentProps;
   public iTabAccessor: ITabAccessor;
 
-  protected persistedState: OpenQueryTab;
-
   constructor(
     options: QueryTabOptions,
     private props: IQueryTabProps,
@@ -42,41 +39,12 @@ export class NewQueryTab extends TabsBase {
       tabsBaseInstance: this,
       queryText: options.queryText,
       partitionKey: this.partitionKey,
-      splitterDirection: options.splitterDirection,
-      queryViewSizePercent: options.queryViewSizePercent,
       container: this.props.container,
       onTabAccessor: (instance: ITabAccessor): void => {
         this.iTabAccessor = instance;
       },
       isPreferredApiMongoDB: false,
-      onUpdatePersistedState: (state: {
-        queryText: string;
-        splitterDirection: string;
-        queryViewSizePercent: number;
-      }): void => {
-        this.persistedState = {
-          actionType: ActionType.OpenCollectionTab,
-          tabKind: TabKind.SQLQuery,
-          databaseResourceId: options.collection.databaseId,
-          collectionResourceId: options.collection.id(),
-          query: {
-            text: state.queryText,
-          },
-          splitterDirection: state.splitterDirection as "vertical" | "horizontal",
-          queryViewSizePercent: state.queryViewSizePercent,
-        };
-        if (this.triggerPersistState) {
-          this.triggerPersistState();
-        }
-      },
     };
-
-    // set initial state
-    this.iQueryTabComponentProps.onUpdatePersistedState({
-      queryText: options.queryText,
-      splitterDirection: options.splitterDirection,
-      queryViewSizePercent: options.queryViewSizePercent,
-    });
   }
 
   public render(): JSX.Element {