removed the comments

* debug

* added comment

---------

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

less/Common/Constants.less

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

less/documentDB.less

@@ -1772,9 +1772,9 @@ input::-webkit-calendar-picker-indicator {
 
 .paddingspan4 {
   padding-top: 20px;
-  padding-left: 20px;
   color: white;
-  font-size: 14px;
+  padding-left: 25px;
+  padding-right: 25px;
 }
 
 .closebtnn {
@@ -1914,13 +1914,29 @@ input::-webkit-calendar-picker-indicator::after {
 }
 
 .nav-tabs-margin {
-  height: 32px;
-  background-color: #f2f2f2;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 
   .nav-tabs {
     display: flex;
+    flex-wrap: wrap;
     align-items: flex-end;
     height: 100%;
+    margin-bottom: -0.5px;
+    // border-bottom: 1px solid var(--colorNeutralStroke1);
+
+    li {
+      margin-bottom: 0px;
+      height: 32px;
+
+      &:hover {
+        background-color: var(--colorNeutralBackground1Hover);
+      }
+
+      &:active {
+        background-color: var(--colorNeutralBackground1Pressed);
+      }
+    }
   }
 }
 
@@ -1933,8 +1949,20 @@ input::-webkit-calendar-picker-indicator::after {
 .nav.nav-tabs.qslevel > li > a:hover {
   border: none;
   border-radius: 0;
-  background-color: transparent !important;
+  background-color: var(--colorNeutralBackground1Selected) !important;
   border-color: transparent;
+  color: var(--colorNeutralForeground1);
+}
+
+.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
+  background-color: var(--colorNeutralBackground1Hover);
+  // border-bottom: 2px solid var(--colorNeutralStroke1);
+}
+
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
+  background-color: var(--colorNeutralBackground1Selected);
+  // border-bottom: 2px solid var(--colorCompoundBrandBackground);
 }
 
 .numbersize {
@@ -2368,7 +2396,9 @@ a:link {
   height: 100%;
   display: flex;
   flex-direction: column;
-  min-width: 0; // This prevents it to grow past the parent's width if its content is too wide
+  min-width: 0;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .tabs {
@@ -2624,9 +2654,10 @@ a:link {
 }
 
 .tabPanesContainer {
-  display: flex;
   flex-grow: 1;
-  overflow: hidden;
+  overflow-y: scroll;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .tabs-container {
@@ -2648,11 +2679,11 @@ a:link {
 .nav-tabs > li.active > .tabNavContentContainer,
 .nav-tabs > li.active > .tabNavContentContainer:focus,
 .nav-tabs > li.active > .tabNavContentContainer:hover {
-  color: #555;
+  color: var(--colorNeutralForeground1);
   cursor: default;
-  background-color: @BaseLight;
-  border-color: @BaseMedium;
-  border-bottom-color: @BaseLight;
+  background-color: var(--colorNeutralBackground1Selected);
+  border-color: var(--colorNeutralStroke1);
+  // border-bottom-color: var(--colorCompoundBrandBackground);
   border-style: solid;
   border-width: 1px;
   height: @ActiveTabHeight;
@@ -2661,7 +2692,7 @@ a:link {
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
   font-weight: bolder;
-  border-bottom: 2px solid rgba(0, 120, 212, 1);
+  border-bottom: 2px solid var(--colorCompoundBrandBackground);
 }
 
 .nav-tabs > li.active:focus > .tabNavContentContainer {
@@ -2674,7 +2705,7 @@ a:link {
   justify-content: space-between;
   border-radius: 2px 2px 0 0;
   padding: @DefaultSpace 0px @SmallSpace 0px;
-  color: @BaseHigh;
+  color: var(--colorNeutralForeground1);
   width: @TabsWidth;
   text-align: center;
   position: relative;
@@ -2682,75 +2713,29 @@ a:link {
 
   &:hover {
     text-decoration: none;
-    background-color: @BaseMediumLow;
-    border-color: @BaseMediumLow;
+    background-color: var(--colorNeutralBackground1Hover);
+    border-color: transparent;
   }
 
   &:active {
-    background-color: @BaseMediumLow;
+    background-color: var(--colorNeutralBackground1Pressed);
   }
 
   .tab_Content {
     .flex-display();
     width: @TabsWidth;
-    border-right: @ButtonBorderWidth solid @BaseMedium;
+    border-right: @ButtonBorderWidth solid var(--colorNeutralStroke1);
     white-space: nowrap;
+    color: var(--colorNeutralForeground1);
+
     .contentWrapper {
       .flex-display();
       width: @ContentWrapper;
 
-      .statusIconContainer {
-        width: @StatusIconContainerSize;
-        height: @StatusIconContainerSize;
-        margin-left: @SmallSpace;
-        display: inline-flex;
-
-        .errorIconContainer {
-          width: @ErrorIconContainer;
-          height: @ErrorIconContainer;
-          margin-top: 1px;
-
-          .errorIcon {
-            width: @ErrorIconWidth;
-            height: @LoadingErrorIconSize;
-            background-image: url(../images/error_no_outline.svg);
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: 3px;
-            display: block;
-            margin: 1px 0px 0px 6px;
-          }
-        }
-
-        .errorIconContainer.actionsEnabled {
-          &:hover {
-            .hover();
-          }
-
-          &:focus {
-            .focus();
-          }
-
-          &:active {
-            .active();
-          }
-        }
-
-        .errorIconContainer[tabindex]:active {
-          outline: none;
-        }
-
-        .loadingIcon {
-          width: @LoadingErrorIconSize;
-          height: @LoadingErrorIconSize;
-          margin: 0px 0px @SmallSpace @SmallSpace;
-        }
-      }
-
       .tabNavText {
         margin-left: @SmallSpace;
         margin-right: 2px;
-        color: @BaseDark;
+        color: var(--colorNeutralForeground1);
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
@@ -2761,21 +2746,36 @@ a:link {
     .tabIconSection {
       width: 29px;
       position: relative;
-      padding-top: 2px;
 
       .cancelButton {
         padding: 0px @SmallSpace 0px @SmallSpace;
+        color: var(--colorNeutralForeground1);
+        width: 16px;
+        height: 16px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
 
         &:hover {
-          .hover();
+          background-color: var(--colorNeutralBackground1Hover);
+          color: var(--colorNeutralForeground1);
         }
 
         &:focus {
-          .focus();
+          background-color: var(--colorNeutralBackground1Pressed);
+          color: var(--colorNeutralForeground1);
         }
 
         &:active {
-          .active();
+          background-color: var(--colorNeutralBackground1Pressed);
+          color: var(--colorNeutralForeground1);
+        }
+
+        &::before {
+          content: "×";
+          font-size: 16px;
+          line-height: 1;
         }
       }
     }
@@ -3129,3 +3129,12 @@ a:link {
 .sidebarContainer {
   height: 100%;
 }
+
+.close-Icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}

less/documentDBFabric.less

@@ -37,12 +37,40 @@ a:focus {
 }
 
 .tabsManagerContainer {
-  background-color: #ffffff;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .nav-tabs-margin {
   padding-top: 5px;
-  background-color: #ffffff;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+}
+
+.nav-tabs {
+  border-bottom: 1px solid var(--colorNeutralStroke1);
+  color: var(--colorNeutralForeground1);
+}
+
+.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
+  border-bottom: 2px solid var(--colorNeutralStroke1);
+  background-color: var(--colorNeutralBackground1Hover);
+}
+
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
+  border-bottom: 2px solid var(--colorCompoundBrandBackground);
+  background-color: var(--colorNeutralBackground1Selected);
+}
+
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
+  border-bottom: 0px none transparent;
+  color: var(--colorNeutralForeground1);
+}
+
+.tabPanesContainer {
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .commandBarContainer {
@@ -67,24 +95,12 @@ a:focus {
   }
 }
 
-.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: 2px solid #e0e0e0;
-}
-
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: 2px solid @FabricAccentMedium;
-}
-
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
-  border-bottom: 0px none transparent;
-}
-
 .tabNavContentContainer {
   padding: @SmallSpace 0px @SmallSpace 0px;
+  color: var(--colorNeutralForeground1);
 
   &:hover {
-    background-color: transparent;
+    background-color: var(--colorNeutralBackground1Hover);
     border-color: transparent;
   }
 
@@ -93,6 +109,7 @@ a:focus {
     margin: 0px @SmallSpace 0px @SmallSpace;
     width: calc(@TabsWidth - (@SmallSpace * 2));
     padding-bottom: @SmallSpace;
+    color: var(--colorNeutralForeground1);
 
     .contentWrapper {
       .statusIconContainer {
@@ -103,17 +120,18 @@ a:focus {
     .tabIconSection {
       .cancelButton {
         padding: 0px 0px 0px @SmallSpace;
+        color: var(--colorNeutralForeground1);
 
         &:hover {
-          background-color: transparent;
+          background-color: var(--colorNeutralBackground1Hover);
         }
 
         &:focus {
-          background-color: transparent;
+          background-color: var(--colorNeutralBackground1Pressed);
         }
 
         &:active {
-          background-color: transparent;
+          background-color: var(--colorNeutralBackground1Pressed);
         }
       }
     }

less/forms.less

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

less/tree.less

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

package-lock.json

@@ -51,7 +51,6 @@
         "@types/mkdirp": "1.0.1",
         "@types/node-fetch": "2.5.7",
         "@xmldom/xmldom": "0.7.13",
-        "@xterm/xterm": "5.5.0",
         "allotment": "1.20.2",
         "applicationinsights": "1.8.0",
         "bootstrap": "3.4.1",
@@ -87,7 +86,7 @@
         "mkdirp": "1.0.4",
         "monaco-editor": "0.44.0",
         "ms": "2.1.3",
-        "p-retry": "4.6.2",
+        "p-retry": "6.2.1",
         "patch-package": "8.0.0",
         "plotly.js-cartesian-dist-min": "1.52.3",
         "post-robot": "10.0.42",
@@ -12663,7 +12662,9 @@
       }
     },
     "node_modules/@types/retry": {
-      "version": "0.12.0",
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz",
+      "integrity": "sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==",
       "license": "MIT"
     },
     "node_modules/@types/sanitize-html": {
@@ -13239,11 +13240,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/@xterm/xterm": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
-      "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A=="
-    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "license": "BSD-3-Clause"
@@ -21805,6 +21801,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-network-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-network-error/-/is-network-error-1.1.0.tgz",
+      "integrity": "sha512-tUdRRAnhT+OtCZR/LxZelH/C7QtjtFrTu5tXCA8pl55eTUElUHT+GPYV8MBMBvea/j+NxQqVt3LbWMRir7Gx9g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-number": {
       "version": "3.0.0",
       "license": "MIT",
@@ -30249,14 +30257,20 @@
       }
     },
     "node_modules/p-retry": {
-      "version": "4.6.2",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-6.2.1.tgz",
+      "integrity": "sha512-hEt02O4hUct5wtwg4H4KcWgDdm+l1bOaEy/hWzd8xtXB9BqxTWBBhb+2ImAtH4Cv4rPjV76xN3Zumqk3k3AhhQ==",
       "license": "MIT",
       "dependencies": {
-        "@types/retry": "0.12.0",
+        "@types/retry": "0.12.2",
+        "is-network-error": "^1.0.0",
         "retry": "^0.13.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/p-try": {
@@ -36003,6 +36017,13 @@
         }
       }
     },
+    "node_modules/webpack-dev-server/node_modules/@types/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/webpack-dev-server/node_modules/ajv": {
       "version": "8.12.0",
       "dev": true,
@@ -36050,6 +36071,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/webpack-dev-server/node_modules/p-retry": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
+      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/retry": "0.12.0",
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/webpack-dev-server/node_modules/rimraf": {
       "version": "3.0.2",
       "dev": true,

package.json

@@ -13,8 +13,8 @@
     "@babel/plugin-proposal-decorators": "7.12.12",
     "@fluentui/react": "8.119.0",
     "@fluentui/react-components": "9.54.2",
-    "@jupyterlab/terminal": "3.0.3",
     "@jupyterlab/services": "6.0.2",
+    "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
     "@nteract/commutable": "7.5.1",
     "@nteract/connected-components": "6.8.2",
@@ -46,7 +46,6 @@
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
     "@xmldom/xmldom": "0.7.13",
-    "@xterm/xterm": "5.5.0",
     "allotment": "1.20.2",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
@@ -82,7 +81,7 @@
     "mkdirp": "1.0.4",
     "monaco-editor": "0.44.0",
     "ms": "2.1.3",
-    "p-retry": "4.6.2",
+    "p-retry": "6.2.1",
     "patch-package": "8.0.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
     "post-robot": "10.0.42",

src/Common/Constants.ts

@@ -530,6 +530,10 @@ export class ariaLabelForLearnMoreLink {
   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,13 +1,15 @@
 import * as Cosmos from "@azure/cosmos";
 import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizationTokenUsingResourceTokens";
+import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
 import { AuthorizationToken } from "Contracts/FabricMessageTypes";
-import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
+import { checkDatabaseResourceTokensValidity, isFabricMirroredKey } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { AuthType } from "../AuthType";
 import { PriorityLevel } from "../Common/Constants";
 import * as Logger from "../Common/Logger";
 import { Platform, configContext } from "../ConfigContext";
-import { updateUserContext, userContext } from "../UserContext";
+import { FabricArtifactInfo, updateUserContext, userContext } from "../UserContext";
+import { isDataplaneRbacSupported } from "../Utils/APITypeUtils";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
@@ -18,7 +20,7 @@ const _global = typeof self === "undefined" ? window : self;
 export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
 
-  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && userContext.apiType === "SQL";
+  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && isDataplaneRbacSupported(userContext.apiType);
   if (userContext.features.enableAadDataPlane || dataPlaneRBACOptionEnabled) {
     Logger.logInfo(
       `AAD Data Plane Feature flag set to ${userContext.features.enableAadDataPlane} for account with disable local auth ${userContext.databaseAccount.properties.disableLocalAuth} `,
@@ -41,7 +43,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
     return decodeURIComponent(headers.authorization);
   }
 
-  if (configContext.platform === Platform.Fabric) {
+  if (isFabricMirroredKey()) {
     switch (requestInfo.resourceType) {
       case Cosmos.ResourceType.conflicts:
       case Cosmos.ResourceType.container:
@@ -53,8 +55,13 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
         // User resource tokens
         // TODO userContext.fabricContext.databaseConnectionInfo can be undefined
         headers[HttpHeaders.msDate] = new Date().toUTCString();
-        const resourceTokens = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
-        checkDatabaseResourceTokensValidity(userContext.fabricContext.databaseConnectionInfo.resourceTokensTimestamp);
+        const resourceTokens = (
+          userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]
+        ).resourceTokenInfo.resourceTokens;
+        checkDatabaseResourceTokensValidity(
+          (userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY])
+            .resourceTokenInfo.resourceTokensTimestamp,
+        );
         return getAuthorizationTokenUsingResourceTokens(resourceTokens, requestInfo.path, requestInfo.resourceId);
 
       case Cosmos.ResourceType.none:
@@ -65,7 +72,9 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
         // For now, these operations aren't used, so fetching the authorization token is commented out.
         // This provider must return a real token to pass validation by the client, so we return the cached resource token
         // (which is a valid token, but won't work for these operations).
-        const resourceTokens2 = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
+        const resourceTokens2 = (
+          userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]
+        ).resourceTokenInfo.resourceTokens;
         return getAuthorizationTokenUsingResourceTokens(resourceTokens2, requestInfo.path, requestInfo.resourceId);
 
       /* ************** TODO: Uncomment this code if we need to support these operations **************

src/Common/StyleConstants.ts

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

src/Common/dataAccess/createCollection.ts

@@ -1,4 +1,5 @@
 import { ContainerRequest, ContainerResponse, DatabaseRequest, DatabaseResponse, RequestOptions } from "@azure/cosmos";
+import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { useDatabases } from "../../Explorer/useDatabases";
@@ -24,7 +25,7 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
   );
   try {
     let collection: DataModels.Collection;
-    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
+    if (!isFabricNative() && userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       if (params.createNewDatabase) {
         const createDatabaseParams: DataModels.CreateDatabaseParams = {
           autoPilotMaxThroughput: params.autoPilotMaxThroughput,

src/Common/dataAccess/deleteCollection.ts

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

src/Common/dataAccess/readCollections.ts

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

src/Common/dataAccess/readDatabaseOffer.ts

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

src/Common/dataAccess/readDatabases.ts

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

src/Common/dataAccess/updateCollection.ts

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

src/Common/dataAccess/updateOffer.ts

@@ -1,4 +1,5 @@
 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 { userContext } from "../../UserContext";
@@ -56,7 +57,7 @@ export const updateOffer = async (params: UpdateOfferParams): Promise<Offer> =>
   const clearMessage = logConsoleProgress(`Updating offer for ${offerResourceText}`);
 
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations && !isFabric()) {
       if (params.collectionId) {
         updatedOffer = await updateCollectionOfferWithARM(params);
       } else if (userContext.apiType === "Tables") {

src/Contracts/DataModels.ts

@@ -42,11 +42,6 @@ export interface DatabaseAccountExtendedProperties {
   publicNetworkAccess?: string;
   enablePriorityBasedExecution?: boolean;
   vcoreMongoEndpoint?: string;
-  virtualNetworkRules?: VNetRule[];
-}
-
-export interface VNetRule {
-  id: string;
 }
 
 export interface DatabaseAccountResponseLocation {

src/Contracts/FabricMessageTypes.ts

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

src/Contracts/FabricMessagesContract.ts

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

src/Contracts/ViewModels.ts

@@ -5,7 +5,7 @@ import {
   TriggerDefinition,
   UserDefinedFunctionDefinition,
 } from "@azure/cosmos";
-import Explorer from "../Explorer/Explorer";
+import type Explorer from "../Explorer/Explorer";
 import { ConsoleData } from "../Explorer/Menus/NotificationConsole/ConsoleData";
 import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
 import ConflictId from "../Explorer/Tree/ConflictId";
@@ -462,3 +462,6 @@ export interface DropdownOption<T> {
   value: T;
   disable?: boolean;
 }
+
+// Remove the duplicate Explorer interface and export the type
+export type { Explorer };

src/Explorer/ContextMenuButtonFactory.tsx

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

src/Explorer/Controls/Editor/EditorReact.tsx

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

src/Explorer/Controls/Settings/SettingsComponent.less

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

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

@@ -1,5 +1,8 @@
+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";
@@ -288,3 +291,47 @@ describe("SettingsComponent", () => {
     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 } from "@fluentui/react";
+import { IPivotItemProps, IPivotProps, Pivot, PivotItem, Stack, getTheme } from "@fluentui/react";
 import {
   ComputedPropertiesComponent,
   ComputedPropertiesComponentProps,
@@ -11,6 +11,7 @@ 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";
@@ -65,7 +66,6 @@ import {
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
 } from "./SettingsUtils";
-
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
   content: JSX.Element;
@@ -167,7 +167,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private totalThroughputUsed: number;
   private throughputBucketsEnabled: boolean;
   public mongoDBCollectionResource: MongoDBCollectionResource;
-
+  private unsubscribe: () => void;
   constructor(props: SettingsComponentProps) {
     super(props);
 
@@ -298,8 +298,19 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     if (this.props.settingsTab.isActive()) {
       useCommandBar.getState().setContextButtons(this.getTabsButtons());
     }
+    this.unsubscribe = useIndexingPolicyStore.subscribe(
+      () => {
+        this.refreshCollectionData();
+      },
+      (state) => state.indexingPolicies[this.collection.id()],
+    );
+    this.refreshCollectionData();
+  }
+  componentWillUnmount(): void {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
   }
-
   componentDidUpdate(): void {
     if (this.props.settingsTab.isActive()) {
       useCommandBar.getState().setContextButtons(this.getTabsButtons());
@@ -772,7 +783,6 @@ 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 {
@@ -924,10 +934,31 @@ 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 ||
@@ -1137,6 +1168,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   };
 
   public render(): JSX.Element {
+    const theme = getTheme();
     const scaleComponentProps: ScaleComponentProps = {
       collection: this.collection,
       database: this.database,
@@ -1154,7 +1186,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onScaleDiscardableChange: this.onScaleDiscardableChange,
       throughputError: this.state.throughputError,
     };
-
     if (!this.isCollectionSettingsTab) {
       return (
         <div className="settingsV2MainContainer">
@@ -1340,28 +1371,101 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       selectedKey: SettingsV2TabTypes[this.state.selectedTab],
     };
 
-    const pivotItems = tabs.map((tab) => {
-      const pivotItemProps: IPivotItemProps = {
-        itemKey: SettingsV2TabTypes[tab.tab],
-        style: { marginTop: 20 },
-        headerText: getTabTitle(tab.tab),
-      };
-
-      return (
-        <PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
-          {tab.content}
-        </PivotItem>
-      );
-    });
+    const pivotStyles = {
+      root: {
+        backgroundColor: 'var(--colorNeutralBackground1)',
+        color: 'var(--colorNeutralForeground1)',
+        selectors: {
+          '& .ms-Pivot-link': {
+            color: 'var(--colorNeutralForeground1)'
+          },
+          '& .ms-Pivot-link.is-selected::before': {
+            backgroundColor: 'var(--colorCompoundBrandBackground)'
+          },
+         
+        }
+      },
+      link: {
+        backgroundColor: 'var(--colorNeutralBackground1)',
+        color: 'var(--colorNeutralForeground1)',
+        selectors: {
+          '&:hover': {
+            backgroundColor: 'var(--colorNeutralBackground1)',
+            color: 'var(--colorNeutralForeground1)'
+          },
+          '&:active': {
+            backgroundColor: 'var(--colorNeutralBackground1)',
+            color: 'var(--colorNeutralForeground1)'
+          },
+          '&[aria-selected="true"]': {
+            backgroundColor: 'var(--colorNeutralBackground1)',
+            color: 'var(--colorNeutralForeground1)',
+            selectors: {
+              '&:hover': {
+                backgroundColor: 'var(--colorNeutralBackground1)',
+                color: 'var(--colorNeutralForeground1)'
+              },
+              '&:active': {
+                backgroundColor: 'var(--colorNeutralBackground1)',
+                color: 'var(--colorNeutralForeground1)'
+              }
+            }
+          }
+        }
+      },
+   
+      itemContainer: {
+        // padding: '20px 24px',
+        backgroundColor: 'var(--colorNeutralBackground1)',
+        color: 'var(--colorNeutralForeground1)'
+      }
+    };
 
+    const contentStyles = {
+      root: {
+        backgroundColor: 'var(--colorNeutralBackground1)',
+        color: 'var(--colorNeutralForeground1)',
+        // padding: '20px 24px'
+      }
+    };
+    
     return (
-      <div className="settingsV2MainContainer">
+      <div className="settingsV2MainContainer" style={{ 
+        backgroundColor: 'var(--colorNeutralBackground1)',
+        color: 'var(--colorNeutralForeground1)',
+        position: 'relative'
+      } as React.CSSProperties}>
         {this.shouldShowKeyspaceSharedThroughputMessage() && (
           <div>This table shared throughput is configured at the keyspace</div>
         )}
 
-        <div className="settingsV2TabsContainer">
-          <Pivot {...pivotProps}>{pivotItems}</Pivot>
+        <div className="settingsV2TabsContainer" style={{ 
+          backgroundColor: 'var(--colorNeutralBackground1)',
+          color: 'var(--colorNeutralForeground1)',
+          position: 'relative',
+          padding: '20px 24px'
+        } as React.CSSProperties}>
+          <Pivot {...pivotProps} styles={pivotStyles}>
+            {tabs.map((tab) => {
+              const pivotItemProps: IPivotItemProps = {
+                itemKey: SettingsV2TabTypes[tab.tab],
+                style: { 
+                  marginTop: 20,
+                  backgroundColor: 'var(--colorNeutralBackground1)',
+                  color: 'var(--colorNeutralForeground1)'
+                },
+                headerText: getTabTitle(tab.tab),
+              };
+
+              return (
+                <PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
+                  <Stack styles={contentStyles}>
+                    {tab.content}
+                  </Stack>
+                </PivotItem>
+              );
+            })}
+          </Pivot>
         </div>
       </div>
     );

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -63,7 +63,7 @@ export interface PriceBreakdown {
 
 export type editorType = "indexPolicy" | "computedProperties";
 
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "var(--colorNeutralForeground1)" } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
   label: {
@@ -166,7 +166,7 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
 };
 
 export const messageBarStyles: Partial<IMessageBarStyles> = {
-  root: { marginTop: "5px", backgroundColor: "white" },
+  root: { marginTop: "5px", backgroundColor: "var(--colorNeutralBackground1)" },
   text: { fontSize: 14 },
 };
 
@@ -214,9 +214,11 @@ export const getEstimatedSpendingElement = (
   const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
   return (
     <Stack>
-      <Text style={{ fontWeight: 600 }}>Cost estimate*</Text>
+      <Text style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>Cost estimate*</Text>
       {costElement}
-      <Text style={{ fontWeight: 600, marginTop: 15 }}>How we calculate this</Text>
+      <Text style={{ fontWeight: 600, marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
+        How we calculate this
+      </Text>
       <Stack id="throughputSpendElement" style={{ marginTop: 5 }}>
         <span>
           {numberOfRegions} region{numberOfRegions > 1 && <span>s</span>}
@@ -230,7 +232,7 @@ export const getEstimatedSpendingElement = (
           {priceBreakdown.pricePerRu}/RU
         </span>
       </Stack>
-      <Text style={{ marginTop: 15 }}>
+      <Text style={{ marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
         <em>*{estimatedCostDisclaimer}</em>
       </Text>
     </Stack>
@@ -272,7 +274,7 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
 
 export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => {
   return (
-    <Text styles={infoAndToolTipTextStyle} id="updateThroughputDelayedApplyWarningMessage">
+    <Text id="updateThroughputDelayedApplyWarningMessage">
       Scaling up will take 4-6 hours as it exceeds what Azure Cosmos DB can instantly support currently based on your
       number of physical partitions. You can increase your throughput to {instantMaximumThroughput} instantly or proceed
       with this value and wait until the scale-up is completed.
@@ -290,7 +292,7 @@ export const getUpdateThroughputBeyondSupportLimitMessage = (
         Your request to increase throughput exceeds the pre-allocated capacity which may take longer than expected.
         There are three options you can choose from to proceed:
       </Text>
-      <ol style={{ fontSize: 14, color: "windowtext", marginTop: "5px" }}>
+      <ol style={{ fontSize: 14, color: "var(--colorNeutralForeground1)", marginTop: "5px" }}>
         <li>You can instantly scale up to {instantMaximumThroughput} RU/s.</li>
         {instantMaximumThroughput < maximumThroughput && (
           <li>You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.</li>
@@ -326,7 +328,7 @@ export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Ele
 };
 
 export const saveThroughputWarningMessage: JSX.Element = (
-  <Text styles={infoAndToolTipTextStyle}>
+  <Text>
     Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
     before saving your changes
   </Text>
@@ -507,11 +509,25 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
     height: 25,
     width: 300,
     borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
+    backgroundColor: "var(--colorNeutralBackground3)",
     selectors: {
       ":disabled": {
-        backgroundColor: StyleConstants.BaseMedium,
+        backgroundColor: "var(--colorNeutralBackground1)",
         borderColor: StyleConstants.BaseMediumHigh,
       },
+      "input:disabled": {
+        backgroundColor: "var(--colorNeutralBackground3)",
+      },
+    },
+    field: {
+      color: "var(--colorNeutralForeground1)",
+    },
+  },
+  subComponentStyles: {
+    label: {
+      root: {
+        color: "var(--colorNeutralForeground1)",
+      },
     },
   },
 });
@@ -521,6 +537,9 @@ export const getChoiceGroupStyles = (
   baseline: isDirtyTypes,
   isHorizontal?: boolean,
 ): Partial<IChoiceGroupStyles> => ({
+  label: {
+    color: "var(--colorNeutralForeground1)",
+  },
   flexContainer: [
     {
       selectors: {
@@ -535,6 +554,7 @@ export const getChoiceGroupStyles = (
           fontSize: 14,
           fontFamily: StyleConstants.DataExplorerFont,
           padding: "2px 5px",
+          color: "var(--colorNeutralForeground1)",
         },
       },
       display: isHorizontal ? "inline-flex" : "default",

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

@@ -3,9 +3,9 @@ import * as DataModels from "Contracts/DataModels";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "Explorer/Controls/Settings/SettingsRenderUtils";
 import { isDirty } from "Explorer/Controls/Settings/SettingsUtils";
 import { loadMonaco } from "Explorer/LazyMonaco";
+import { monacoTheme } from "hooks/useTheme";
 import * as monaco from "monaco-editor";
 import * as React from "react";
-
 export interface ComputedPropertiesComponentProps {
   computedPropertiesContent: DataModels.ComputedProperties;
   computedPropertiesContentBaseline: DataModels.ComputedProperties;
@@ -86,6 +86,7 @@ export class ComputedPropertiesComponent extends React.Component<
       value: value,
       language: "json",
       ariaLabel: "Computed properties",
+      theme:monacoTheme,
     });
     if (this.computedPropertiesEditor) {
       const computedPropertiesEditorModel = this.computedPropertiesEditor.getModel();

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

@@ -1,4 +1,5 @@
 import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import { monacoTheme } from "hooks/useTheme";
 import * as monaco from "monaco-editor";
 import * as React from "react";
 import * as DataModels from "../../../../Contracts/DataModels";
@@ -6,7 +7,6 @@ import { loadMonaco } from "../../../LazyMonaco";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "../SettingsRenderUtils";
 import { isDirty, isIndexTransforming } from "../SettingsUtils";
 import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
-
 export interface IndexingPolicyComponentProps {
   shouldDiscardIndexingPolicy: boolean;
   resetShouldDiscardIndexingPolicy: () => void;
@@ -87,20 +87,71 @@ export class IndexingPolicyComponent extends React.Component<
   };
 
   private async createIndexingPolicyEditor(): Promise<void> {
+    if (!this.indexingPolicyDiv.current) {
+      return;
+    }
     const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
     const monaco = await loadMonaco();
-    this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
-      value: value,
-      language: "json",
-      readOnly: isIndexTransforming(this.props.indexTransformationProgress),
-      ariaLabel: "Indexing Policy",
-    });
-    if (this.indexingPolicyEditor) {
-      const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
-      indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
-      this.props.logIndexingPolicySuccessMessage();
+    if (this.indexingPolicyDiv.current) {
+      this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
+        value: value,
+        language: "json",
+        readOnly: isIndexTransforming(this.props.indexTransformationProgress),
+        ariaLabel: "Indexing Policy",
+        theme: monacoTheme,
+      });
+      if (this.indexingPolicyEditor) {
+        const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
+        indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
+        this.props.logIndexingPolicySuccessMessage();
+      }
     }
   }
+//   private async createIndexingPolicyEditor(): Promise<void> {
+//   const isDarkMode = true;
+//   const monacoThemeName = "fluent-theme";
+
+//   if (!this.indexingPolicyDiv.current) return;
+
+//   const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
+//   const monaco = await loadMonaco();
+
+//   // Safely get Fluent UI theme colors
+//   const bodyStyles = getComputedStyle(document.body);
+//   const backgroundColor = bodyStyles.getPropertyValue("--colorNeutralBackground1").trim() || "#1b1a19";
+//   const foregroundColor = bodyStyles.getPropertyValue("--colorNeutralForeground1").trim() || "#ffffff";
+
+//   // Define Monaco theme using Fluent UI colors
+//   monaco.editor.defineTheme(monacoThemeName, {
+//     base: isDarkMode ? "vs-dark" : "vs",
+//     inherit: true,
+//     rules: [],
+//     colors: {
+//       "editor.background": backgroundColor,
+//       "editor.foreground": foregroundColor,
+//       "editorCursor.foreground": "#ffcc00",
+//       "editorLineNumber.foreground": "#aaaaaa",
+//       "editor.selectionBackground": "#666666",
+//       "editor.lineHighlightBackground": "#333333"
+//     }
+//   });
+
+//   // Create the editor with the custom theme
+//   this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
+//     value,
+//     language: "json",
+//     readOnly: isIndexTransforming(this.props.indexTransformationProgress),
+//     ariaLabel: "Indexing Policy",
+//     theme: monacoThemeName
+//   });
+
+//   if (this.indexingPolicyEditor) {
+//     const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
+//     indexingPolicyEditorModel?.onDidChangeContent(this.onEditorContentChange.bind(this));
+//     this.props.logIndexingPolicySuccessMessage();
+//   }
+// }
+
 
   private onEditorContentChange = (): void => {
     const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();

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

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

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

@@ -56,13 +56,15 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
   const partitionKeyValue = getPartitionKeyValue();
 
   const textHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold, fontSize: 16 },
+    root: { fontWeight: FontWeights.semibold, fontSize: 16, color: 'var(--colorNeutralForeground1)' },
   };
 
   const textSubHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold },
+    root: { fontWeight: FontWeights.semibold , color: 'var(--colorNeutralForeground1)'  },
+  };
+  const textSubHeadingStyle1 = {
+    root: {color: 'var(--colorNeutralForeground1)'  },
   };
-
   const startPollingforUpdate = (currentJob: DataTransferJobGetResults) => {
     if (isCurrentJobInProgress(currentJob)) {
       const jobName = currentJob?.properties?.jobName;
@@ -158,8 +160,8 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
             <Text styles={textSubHeadingStyle}>Partitioning</Text>
           </Stack>
           <Stack tokens={{ childrenGap: 5 }}>
-            <Text>{partitionKeyValue}</Text>
-            <Text>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
+            <Text styles={textSubHeadingStyle1}>{partitionKeyValue}</Text>
+            <Text styles={textSubHeadingStyle1}>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
           </Stack>
         </Stack>
       </Stack>
@@ -174,7 +176,7 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
           Learn more
         </Link>
       </MessageBar>
-      <Text>
+      <Text styles={textSubHeadingStyle1}>
         To change the partition key, a new destination container must be created or an existing destination container
         selected. Data will then be copied to the destination container.
       </Text>

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

@@ -1,4 +1,4 @@
-import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react";
+import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField, getTheme, mergeStyleSets } from "@fluentui/react";
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import { userContext } from "../../../../UserContext";
@@ -25,6 +25,13 @@ import {
 } from "../SettingsUtils";
 import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 
+const theme = getTheme();
+
+const classNames = mergeStyleSets({
+  hintText: {
+    color: 'var(--colorNeutralForeground1)', // theme-aware
+  },
+});
 export interface SubSettingsComponentProps {
   collection: ViewModels.Collection;
   timeToLive: TtlType;
@@ -181,7 +188,19 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
     userContext.apiType === "Mongo" ? (
       <MessageBar
         messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-        styles={{ text: { fontSize: 14 } }}
+        styles={{
+          root: {
+            backgroundColor: 'var(--colorNeutralBackground1)',
+            color: 'var(--colorNeutralForeground1)'
+          },
+          text: {
+            fontSize: 14,
+            color: theme.semanticColors.bodyText,
+          },
+          icon: {
+            color: theme.semanticColors.bodyText,
+          },
+        }}
       >
         To enable time-to-live (TTL) for your collection/documents,
         <Link href="https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb-time-to-live" target="_blank">
@@ -191,7 +210,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
       </MessageBar>
     ) : (
       <Stack {...titleAndInputStackProps}>
-        <ChoiceGroup
+        <ChoiceGroup  
           id="timeToLive"
           label="Time to Live"
           selectedKey={this.props.timeToLive}
@@ -323,14 +342,14 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
       )}
 
       {userContext.apiType === "SQL" && this.isLargePartitionKeyEnabled() && (
-        <Text>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
+        <Text className={classNames.hintText}>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
       )}
 
       {userContext.apiType === "SQL" &&
         (this.isHierarchicalPartitionedContainer() ? (
-          <Text>Hierarchically partitioned container.</Text>
-        ) : (
-          <Text>Non-hierarchically partitioned container.</Text>
+          <Text className={classNames.hintText}>Hierarchically partitioned container.</Text>
+      ) : (
+        <Text className={classNames.hintText}>Non-hierarchically partitioned container.</Text>
         ))}
     </Stack>
   );

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

@@ -235,12 +235,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       );
       return (
         <div>
-          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
+          <Text style={{ fontWeight: 600 , color: 'var(--colorNeutralForeground1)' }}>Updated cost per month</Text>
           <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
-            <Text style={{ width: "50%" }}>
+            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)' }}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)} min
             </Text>
-            <Text style={{ width: "50%" }}>
+            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)'}}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)} max
             </Text>
           </Stack>
@@ -253,12 +253,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       return (
         <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
           {newThroughput && newThroughputCostElement()}
-          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
-          <Stack horizontal style={{ marginTop: 5 }}>
-            <Text style={{ width: "50%" }}>
+          <Text style={{ fontWeight: 600, color: 'var(--colorNeutralForeground1)' }}>Current cost per month</Text>
+          <Stack horizontal style={{ marginTop: 5, color: 'var(--colorNeutralForeground1)' }}>
+            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)' }}>
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)} min
             </Text>
-            <Text style={{ width: "50%" }}>
+            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)' }}>
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)} max
             </Text>
           </Stack>
@@ -268,7 +268,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
 
     return getEstimatedSpendingElement(costElement(), newThroughput ?? throughput, numberOfRegions, prices, true);
   };
-
+  settingsAndScaleStyle = {
+    root: {  width: "33%", 
+      color: 'var(--colorNeutralForeground1)' },
+  };
   private getEstimatedManualSpendElement = (
     throughput: number,
     serverId: string,
@@ -288,36 +291,36 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       );
       return (
         <div>
-          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
+          <Text style={{ fontWeight: 600, color: 'var(--colorNeutralForeground1)' }}>Updated cost per month</Text>
           <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}/hr
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}/day
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}/mo
             </Text>
           </Stack>
         </div>
       );
     };
-
+ 
     const costElement = (): JSX.Element => {
       const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, false);
       return (
         <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
           {newThroughput && newThroughputCostElement()}
-          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
+          <Text style={{ fontWeight: 600 , color: 'var(--colorNeutralForeground1)'}}>Current cost per month</Text>
           <Stack horizontal style={{ marginTop: 5 }}>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}/hr
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}/day
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}/mo
             </Text>
           </Stack>
@@ -402,8 +405,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     const capacity: string = this.props.isFixed ? "Fixed" : "Unlimited";
     return (
       <Stack {...titleAndInputStackProps}>
-        <Label>Storage capacity</Label>
-        <Text>{capacity}</Text>
+        <Label style={{ color: 'var(--colorNeutralForeground1)'}}>Storage capacity</Label>
+        <Text  style={{ color: 'var(--colorNeutralForeground1)'}}>{capacity}</Text>
       </Stack>
     );
   };
@@ -608,7 +611,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
             </Stack>
           )}
           {this.props.isAutoPilotSelected ? (
-            <Text style={{ marginTop: "40px" }}>
+            <Text style={{ marginTop: "40px" , color: 'var(--colorNeutralForeground1)'}}>
               Based on usage, your {this.props.collectionName ? "container" : "database"} throughput will scale from{" "}
               <b>
                 {AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)} RU/s (10% of max RU/s) -{" "}
@@ -630,7 +633,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
             </>
           )}
           {!this.overrideWithProvisionedThroughputSettings() && (
-            <Text>
+            <Text style={{ color: 'var(--colorNeutralForeground1)'}}>
               Estimate your required RU/s with
               <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
                 {` capacity calculator`} <FontIcon iconName="NavigateExternalInline" />

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

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

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

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

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -35,12 +35,20 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
   setIsThroughputCapExceeded,
   onCostAcknowledgeChange,
 }: ThroughputInputProps) => {
-  const defaultThroughput: number =
+  let defaultThroughput: number;
+  const workloadType: Constants.WorkloadType = getWorkloadType();
+
+  if (
     isFreeTier ||
     isQuickstart ||
-    [Constants.WorkloadType.Learning, Constants.WorkloadType.DevelopmentTesting].includes(getWorkloadType())
-      ? AutoPilotUtils.autoPilotThroughput1K
-      : AutoPilotUtils.autoPilotThroughput4K;
+    [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);

src/Explorer/DataExplorer.tsx

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

src/Explorer/ErrorBoundary.tsx

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

src/Explorer/Explorer.tsx

@@ -8,7 +8,7 @@ import { MessageTypes } from "Contracts/ExplorerContracts";
 import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { IGalleryItem } from "Juno/JunoClient";
-import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
+import { isFabricMirrored, isFabricMirroredKey, scheduleRefreshFabricToken } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { acquireMsalTokenForAccount } from "Utils/AuthorizationUtils";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointUtils";
@@ -43,7 +43,7 @@ import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import { useSidePanel } from "../hooks/useSidePanel";
-import { useTabs } from "../hooks/useTabs";
+import { ReactTabKind, useTabs } from "../hooks/useTabs";
 import "./ComponentRegisterer";
 import { DialogProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
@@ -187,6 +187,10 @@ export default class Explorer {
       useNotebook.getState().setNotebookBasePath(userContext.features.notebookBasePath);
     }
 
+    if (isFabricMirrored()) {
+      useTabs.getState().closeReactTab(ReactTabKind.Home);
+    }
+
     this.refreshExplorer();
   }
 
@@ -347,8 +351,8 @@ export default class Explorer {
   };
 
   public onRefreshResourcesClick = async (): Promise<void> => {
-    if (configContext.platform === Platform.Fabric) {
-      scheduleRefreshDatabaseResourceToken(true).then(() => this.refreshAllDatabases());
+    if (isFabricMirroredKey()) {
+      scheduleRefreshFabricToken(true).then(() => this.refreshAllDatabases());
       return;
     }
 
@@ -906,28 +910,25 @@ export default class Explorer {
   }
 
   public async openNotebookTerminal(kind: ViewModels.TerminalKind): Promise<void> {
-  
-    if (userContext.features.enableCloudShell || !useNotebook.getState().isPhoenixFeatures) {
-      this.connectToTerminal(kind);
-      return;
-    }
-  
-    await this.allocateContainer(PoolIdType.DefaultPoolId);
-    const notebookServerInfo = useNotebook.getState().notebookServerInfo;
-  
-    if (notebookServerInfo?.notebookServerEndpoint) {
-      this.connectToTerminal(kind);
+    if (useNotebook.getState().isPhoenixFeatures) {
+      await this.allocateContainer(PoolIdType.DefaultPoolId);
+      const notebookServerInfo = useNotebook.getState().notebookServerInfo;
+      if (notebookServerInfo && notebookServerInfo.notebookServerEndpoint !== undefined) {
+        this.connectToNotebookTerminal(kind);
+      } else {
+        useDialog
+          .getState()
+          .showOkModalDialog(
+            "Failed to connect",
+            "Failed to connect to temporary workspace. This could happen because of network issues. Please refresh the page and try again.",
+          );
+      }
     } else {
-      useDialog
-        .getState()
-        .showOkModalDialog(
-          "Failed to connect",
-          "Failed to connect to temporary workspace. This could happen because of network issues. Please refresh the page and try again."
-        );
+      this.connectToNotebookTerminal(kind);
     }
   }
 
-  private connectToTerminal(kind: ViewModels.TerminalKind): void {
+  private connectToNotebookTerminal(kind: ViewModels.TerminalKind): void {
     let title: string;
 
     switch (kind) {

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.less

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

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

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

src/Explorer/Menus/CommandBar/CommandBarComponent.less

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

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

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

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

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

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,4 +1,5 @@
 import { KeyboardAction } from "KeyboardShortcuts";
+import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
@@ -61,7 +62,7 @@ export function createStaticCommandBarButtons(
     }
   }
 
-  if (userContext.apiType === "SQL") {
+  if (isDataplaneRbacSupported(userContext.apiType)) {
     const [loginButtonProps, setLoginButtonProps] = useState<CommandButtonComponentProps | undefined>(undefined);
     const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
     const aadTokenUpdated = useDataPlaneRbac((state) => state.aadTokenUpdated);
@@ -125,13 +126,13 @@ export function createContextCommandBarButtons(
   const buttons: CommandButtonComponentProps[] = [];
 
   if (!selectedNodeState.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo") {
-    const label = (useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) ? "Open Mongo Shell" : "New Shell";
+    const label = useNotebook.getState().isShellEnabled ? "Open Mongo Shell" : "New Shell";
     const newMongoShellBtn: CommandButtonComponentProps = {
       iconSrc: HostedTerminalIcon,
       iconAlt: label,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
-        if (useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) {
+        if (useNotebook.getState().isShellEnabled) {
           container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
         } else {
           selectedCollection && selectedCollection.onNewMongoShellClick();
@@ -145,7 +146,7 @@ export function createContextCommandBarButtons(
   }
 
   if (
-    (useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) &&
+    useNotebook.getState().isShellEnabled &&
     !selectedNodeState.isDatabaseNodeOrNoneSelected() &&
     userContext.apiType === "Cassandra"
   ) {

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

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

src/Explorer/Menus/NotificationConsole/NotificationConsole.less

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

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

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

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

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

src/Explorer/Notebook/NotebookContainerClient.ts

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

src/Explorer/OpenActions/OpenActions.tsx

@@ -1,6 +1,6 @@
 // TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.
-import { configContext, Platform } from "ConfigContext";
 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";
@@ -58,9 +58,9 @@ function openCollectionTab(
       }
 
       if (
-        configContext.platform === Platform.Fabric &&
+        isFabricMirrored() &&
         !(
-          // whitelist the tab kinds that are allowed to be opened in Fabric
+          // whitelist the tab kinds that are allowed to be opened in Fabric mirrored
           (
             action.tabKind === ActionContracts.TabKind.SQLDocuments ||
             action.tabKind === ActionContracts.TabKind.SQLQuery

src/Explorer/Panes/AddCollectionPanel.tsx

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

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

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

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

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

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx

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

src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx

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

src/Explorer/Panes/PanelComponent.less

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

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -32,6 +32,7 @@ import {
 } from "Shared/StorageUtility";
 import * as StringUtility from "Shared/StringUtility";
 import { updateUserContext, userContext } from "UserContext";
+import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
 import { acquireMsalTokenForAccount } from "Utils/AuthorizationUtils";
 import { logConsoleError, logConsoleInfo } from "Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "Utils/PriorityBasedExecutionUtils";
@@ -183,7 +184,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin" && !isEmulator;
   const shouldShowParallelismOption = userContext.apiType !== "Gremlin" && !isEmulator;
   const showEnableEntraIdRbac =
-    userContext.apiType === "SQL" &&
+    isDataplaneRbacSupported(userContext.apiType) &&
     userContext.authType === AuthType.AAD &&
     configContext.platform !== Platform.Fabric &&
     !isEmulator;

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}

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -18,7 +18,7 @@ import {
   Text,
   TextField,
 } from "@fluentui/react";
-import { HttpStatusCodes, NormalizedEventKey } from "Common/Constants";
+import { FeedbackLabels, HttpStatusCodes, NormalizedEventKey } from "Common/Constants";
 import { handleError } from "Common/ErrorHandlingUtils";
 import QueryError, { QueryErrorSeverity } from "Common/QueryError";
 import { createUri } from "Common/UrlUtility";
@@ -393,8 +393,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 },
               }}
               disabled={isGeneratingQuery}
-              autoComplete="list"
-              aria-expanded={showSamplePrompts}
+              autoComplete="off"
               placeholder="Ask a question in natural language and we’ll generate the query for you."
               aria-labelledby="copilot-textfield-label"
               onRenderSuffix={() => {
@@ -580,7 +579,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 <Stack horizontal verticalAlign="center" style={{ maxHeight: 20 }}>
                   {userContext.feedbackPolicies?.policyAllowFeedback && (
                     <Stack horizontal verticalAlign="center">
-                      <Text style={{ fontSize: 12 }}>Provide feedback</Text>
+                      <Text style={{ fontSize: 12 }}>{FeedbackLabels.provideFeedback}</Text>
                       {showCallout && !hideFeedbackModalForLikedQueries && (
                         <Callout
                           role="status"
@@ -630,8 +629,9 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       <IconButton
                         id="likeBtn"
                         style={{ marginLeft: 10 }}
-                        aria-label="Like"
-                        role="toggle"
+                        aria-label={FeedbackLabels.provideFeedback}
+                        role="button"
+                        title="Like"
                         iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
                         onClick={() => {
                           setShowCallout(!likeQuery);
@@ -649,8 +649,9 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       />
                       <IconButton
                         style={{ margin: "0 4px" }}
-                        role="toggle"
-                        aria-label="Dislike"
+                        role="button"
+                        aria-label={FeedbackLabels.provideFeedback}
+                        title="Dislike"
                         iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
                         onClick={() => {
                           let toggleStatusValue = "Unpressed";

src/Explorer/Sidebar.tsx

@@ -1,5 +1,6 @@
 import {
   Button,
+  makeStyles,
   Menu,
   MenuButton,
   MenuButtonProps,
@@ -7,26 +8,26 @@ import {
   MenuList,
   MenuPopover,
   MenuTrigger,
-  SplitButton,
-  makeStyles,
-  mergeClasses,
   shorthands,
+  SplitButton
 } from "@fluentui/react-components";
 import { Add16Regular, ArrowSync12Regular, ChevronLeft12Regular, ChevronRight12Regular } from "@fluentui/react-icons";
-import { Platform, configContext } from "ConfigContext";
+import { configContext, Platform } 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 { ResourceTree } from "./Tree/ResourceTree";
 
 const useSidebarStyles = makeStyles({
   sidebar: {
@@ -34,38 +35,67 @@ 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: "relative",
+    position: "absolute",
+    top: 0,
+    right: 0,
     zIndex: 1000,
-    width: "100%",
+    width: "auto",
+    padding: tokens.spacingHorizontalS,
   },
   floatingControls: {
     display: "flex",
     flexDirection: "row",
-    position: "absolute",
-    right: 0,
+    gap: tokens.spacingHorizontalXS,
   },
   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", // Use this container for "@container" queries below this.
+    containerType: "size",
+    padding: tokens.spacingHorizontalS,
     ...cosmosShorthands.borderBottom(),
+    backgroundColor: tokens.colorNeutralBackground1,
   },
   loadingProgressBar: {
-    // Float above the content
     position: "absolute",
     width: "100%",
     height: "2px",
@@ -75,7 +105,7 @@ const useSidebarStyles = makeStyles({
     animationDuration: "3s",
     animationName: {
       "0%": {
-        opacity: ".2", // matches indeterminate bar width
+        opacity: ".2",
       },
       "50%": {
         opacity: "1",
@@ -97,6 +127,12 @@ const useSidebarStyles = makeStyles({
       display: "flex",
     },
   },
+  treeContainer: {
+    flex: 1,
+    overflow: "auto",
+    backgroundColor: tokens.colorNeutralBackground1,
+    color: tokens.colorNeutralForeground1,
+  },
 });
 
 interface GlobalCommandsProps {
@@ -123,7 +159,7 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
 
   const actions = useMemo<GlobalCommand[]>(() => {
     if (
-      configContext.platform === Platform.Fabric ||
+      (isFabric() && userContext.fabricContext?.isReadOnly) ||
       userContext.apiType === "Postgres" ||
       userContext.apiType === "VCoreMongo"
     ) {
@@ -137,12 +173,15 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
         id: "new_collection",
         label: `New ${getCollectionName()}`,
         icon: <Add16Regular />,
-        onClick: () => explorer.onNewCollectionClicked(),
+        onClick: () => {
+          const databaseId = isFabricNative() ? userContext.fabricContext?.databaseName : undefined;
+          explorer.onNewCollectionClicked({ databaseId });
+        },
         keyboardAction: KeyboardAction.NEW_COLLECTION,
       },
     ];
 
-    if (userContext.apiType !== "Tables") {
+    if (configContext.platform !== Platform.Fabric && userContext.apiType !== "Tables") {
       actions.push({
         id: "new_database",
         label: `New ${getDatabaseName()}`,
@@ -246,6 +285,7 @@ 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) {
@@ -288,7 +328,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
   }, [setLoading]);
 
   const hasGlobalCommands = !(
-    configContext.platform === Platform.Fabric ||
+    isFabricMirrored() ||
     userContext.apiType === "Postgres" ||
     userContext.apiType === "VCoreMongo"
   );
@@ -300,7 +340,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 className={mergeClasses(styles.sidebar)}>
+            <CosmosFluentProvider>
               <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.
@@ -331,12 +371,11 @@ 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} />}
-                      <ResourceTree explorer={explorer} />
+                      <div className={styles.treeContainer}>
+                        <ResourceTree explorer={explorer} />
+                      </div>
                     </div>
                   </>
                 ) : (

src/Explorer/SplashScreen/FabricHome.tsx

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

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -11,6 +11,7 @@ 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";
@@ -33,8 +34,7 @@ import CollectionIcon from "../../../images/tree-collection.svg";
 import * as Constants from "../../Common/Constants";
 import { userContext } from "../../UserContext";
 import { getCollectionName } from "../../Utils/APITypeUtils";
-import { FeaturePanelLauncher } from "../Controls/FeaturePanel/FeaturePanelLauncher";
-import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
+import { useTheme } from "../../hooks/useTheme";
 import Explorer from "../Explorer";
 import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
 import { useNotebook } from "../Notebook/useNotebook";
@@ -55,70 +55,177 @@ export interface SplashScreenProps {
   explorer: Explorer;
 }
 
-export class SplashScreen extends React.Component<SplashScreenProps> {
-  private readonly container: Explorer;
-  private subscriptions: Array<{ dispose: () => void }>;
+const useStyles = makeStyles({
+  splashScreenContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    // justifyContent: "center",
+    minHeight: "100vh",
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
 
-  constructor(props: SplashScreenProps) {
-    super(props);
-    this.container = props.explorer;
-    this.subscriptions = [];
-  }
-
-  public componentWillUnmount(): void {
-    while (this.subscriptions.length) {
-      this.subscriptions.pop().dispose();
+  },
+  splashScreen: {
+    display: "flex",
+    // overflow: "scroll",
+    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)"
   }
+});
 
-  public componentDidMount(): void {
-    this.subscriptions.push(
+export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
+  const styles = useStyles();
+  const { isDarkMode } = useTheme();
+  const container = explorer;
+  const subscriptions: Array<{ dispose: () => void }> = [];
+
+  React.useEffect(() => {
+    subscriptions.push(
       {
         dispose: useNotebook.subscribe(
-          () => this.setState({}),
+          () => setState({}),
           (state) => state.isNotebookEnabled,
         ),
       },
-      { dispose: useSelectedNode.subscribe(() => this.setState({})) },
+      { dispose: useSelectedNode.subscribe(() => setState({})) },
       {
         dispose: useCarousel.subscribe(
-          () => this.setState({}),
+          () => setState({}),
           (state) => state.showCoachMark,
         ),
       },
       {
         dispose: usePostgres.subscribe(
-          () => this.setState({}),
+          () => setState({}),
           (state) => state.showPostgreTeachingBubble,
         ),
       },
       {
         dispose: usePostgres.subscribe(
-          () => this.setState({}),
+          () => setState({}),
           (state) => state.showResetPasswordBubble,
         ),
       },
       {
         dispose: useDatabases.subscribe(
-          () => this.setState({}),
+          () => setState({}),
           (state) => state.sampleDataResourceTokenCollection,
         ),
       },
       {
         dispose: useQueryCopilot.subscribe(
-          () => this.setState({}),
+          () => setState({}),
           (state) => state.copilotEnabled,
         ),
       },
     );
-  }
 
-  private clearMostRecent = (): void => {
+    return () => {
+      while (subscriptions.length) {
+        subscriptions.pop().dispose();
+      }
+    };
+  }, []);
+
+  const [state, setState] = React.useState({});
+
+  const clearMostRecent = () => {
     MostRecentActivity.clear(userContext.databaseAccount?.name);
-    this.setState({});
+    setState({});
   };
 
-  private getSplashScreenButtons = (): JSX.Element => {
+  const getSplashScreenButtons = (): JSX.Element => {
     if (
       userContext.apiType === "SQL" &&
       useQueryCopilot.getState().copilotEnabled &&
@@ -132,7 +239,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               title={"Launch quick start"}
               description={"Launch a quick start tutorial to get started with sample data"}
               onClick={() => {
-                this.container.onNewCollectionClicked({ isQuickstart: true });
+                container.onNewCollectionClicked({ isQuickstart: true });
                 traceOpen(Action.LaunchQuickstart, { apiType: userContext.apiType });
               }}
             />
@@ -141,7 +248,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               title={`New ${getCollectionName()}`}
               description={"Create a new container for storage and throughput"}
               onClick={() => {
-                this.container.onNewCollectionClicked();
+                container.onNewCollectionClicked();
                 traceOpen(Action.NewContainerHomepage, { apiType: userContext.apiType });
               }}
             />
@@ -177,7 +284,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       );
     }
 
-    const mainItems = this.createMainItems();
+    const mainItems = createMainItems();
     return (
       <div className="mainButtonsContainer">
         {userContext.apiType === "Postgres" &&
@@ -214,7 +321,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
             className="mainButton focusable"
             key={`${item.title}`}
             onClick={item.onClick}
-            onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
+            onKeyPress={(event: React.KeyboardEvent) => onSplashScreenItemKeyPress(event, item.onClick)}
             tabIndex={0}
             role="button"
           >
@@ -267,125 +374,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     );
   };
 
-  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 createMainItems = (): SplashScreenItem[] => {
     const heroes: SplashScreenItem[] = [];
 
     if (
@@ -403,7 +392,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
           if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
             useTabs.getState().openAndActivateReactTab(ReactTabKind.Quickstart);
           } else {
-            this.container.onNewCollectionClicked({ isQuickstart: true });
+            container.onNewCollectionClicked({ isQuickstart: true });
           }
           traceOpen(Action.LaunchQuickstart, { apiType: userContext.apiType });
         },
@@ -411,18 +400,18 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       heroes.push(launchQuickstartBtn);
     }
 
-    heroes.push(this.getShellCard());
-    heroes.push(this.getThirdCard());
+    heroes.push(getShellCard());
+    heroes.push(getThirdCard());
     return heroes;
-  }
+  };
 
-  private getShellCard() {
+  const getShellCard = (): SplashScreenItem => {
     if (userContext.apiType === "Postgres") {
       return {
         iconSrc: PowerShellIcon,
         title: "PostgreSQL Shell",
-        description: "Create table and interact with data using PostgreSQL’s shell interface",
-        onClick: () => this.container.openNotebookTerminal(TerminalKind.Postgres),
+        description: "Create table and interact with data using PostgreSQL's shell interface",
+        onClick: () => container.openNotebookTerminal(TerminalKind.Postgres),
       };
     }
 
@@ -431,7 +420,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         iconSrc: PowerShellIcon,
         title: "Mongo Shell",
         description: "Create a collection and interact with data using MongoDB's shell interface",
-        onClick: () => this.container.openNotebookTerminal(TerminalKind.VCoreMongo),
+        onClick: () => container.openNotebookTerminal(TerminalKind.VCoreMongo),
       };
     }
 
@@ -440,13 +429,13 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       title: `New ${getCollectionName()}`,
       description: "Create a new container for storage and throughput",
       onClick: () => {
-        this.container.onNewCollectionClicked();
+        container.onNewCollectionClicked();
         traceOpen(Action.NewContainerHomepage, { apiType: userContext.apiType });
       },
     };
-  }
+  };
 
-  private getThirdCard() {
+  const getThirdCard = (): SplashScreenItem => {
     let icon = ConnectIcon;
     let title = "Connect";
     let description = "Prefer using your own choice of tooling? Find the connection string you need to connect";
@@ -470,34 +459,34 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       description: description,
       onClick: onClick,
     };
-  }
+  };
 
-  private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
+  const decorateOpenCollectionActivity = (activity: MostRecentActivity.OpenCollectionItem): SplashScreenItem => {
     return {
       iconSrc: CollectionIcon,
-      title: collectionId,
+      title: activity.collectionId,
       description: getCollectionName(),
       onClick: () => {
-        const collection = useDatabases.getState().findCollection(databaseId, collectionId);
+        const collection = useDatabases.getState().findCollection(activity.databaseId, activity.collectionId);
         collection?.openTab();
       },
     };
-  }
+  };
 
-  private decorateOpenNotebookActivity({ name, path }: MostRecentActivity.OpenNotebookItem) {
+  const decorateOpenNotebookActivity = (activity: MostRecentActivity.OpenNotebookItem): SplashScreenItem => {
     return {
-      info: path,
+      info: activity.path,
       iconSrc: NotebookIcon,
-      title: name,
+      title: activity.name,
       description: "Notebook",
       onClick: () => {
-        const notebookItem = this.container.createNotebookContentItemFile(name, path);
-        notebookItem && this.container.openNotebook(notebookItem);
+        const notebookItem = container.createNotebookContentItemFile(activity.name, activity.path);
+        notebookItem && container.openNotebook(notebookItem);
       },
     };
-  }
+  };
 
-  private createRecentItems(): SplashScreenItem[] {
+  const createRecentItems = (): SplashScreenItem[] => {
     return MostRecentActivity.getItems(userContext.databaseAccount?.name).map((activity) => {
       switch (activity.type) {
         default: {
@@ -505,22 +494,22 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
           throw new Error(`Unknown activity: ${unknownActivity}`);
         }
         case MostRecentActivity.Type.OpenNotebook:
-          return this.decorateOpenNotebookActivity(activity);
+          return decorateOpenNotebookActivity(activity);
 
         case MostRecentActivity.Type.OpenCollection:
-          return this.decorateOpenCollectionActivity(activity);
+          return decorateOpenCollectionActivity(activity);
       }
     });
-  }
+  };
 
-  private onSplashScreenItemKeyPress(event: React.KeyboardEvent, callback: () => void) {
+  const onSplashScreenItemKeyPress = (event: React.KeyboardEvent, callback: () => void) => {
     if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
       callback();
       event.stopPropagation();
     }
-  }
+  };
 
-  private top3Items(): JSX.Element {
+  const top3Items = (): JSX.Element => {
     let items: { link: string; title: string; description: string }[];
     switch (userContext.apiType) {
       case "SQL":
@@ -632,44 +621,54 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                 href={item.link}
                 target="_blank"
                 style={{ marginRight: 5 }}
+                className={styles.listItemTitle}
               >
                 {item.title}
               </Link>
               <Image src={LinkIcon} alt={item.title} />
             </Stack>
-            <Text>{item.description}</Text>
+            <Text className={styles.listItemSubtitle}>{item.description}</Text>
           </Stack>
         ))}
       </Stack>
     );
-  }
+  };
 
-  private getRecentItems(): JSX.Element {
-    const recentItems = this.createRecentItems()?.filter((item) => item.description !== "Notebook");
+  const getRecentItems = (): JSX.Element => {
+    const recentItems = createRecentItems()?.filter((item) => item.description !== "Notebook");
 
     return (
       <Stack>
         <ul>
           {recentItems.map((item, index) => (
-            <li key={`${item.title}${item.description}${index}`}>
+            <li key={`${item.title}${item.description}${index}`} className={styles.listItem}>
               <Stack style={{ marginBottom: 26 }}>
                 <Stack horizontal>
-                  <Image style={{ marginRight: 8 }} src={item.iconSrc} alt={item.title} />
-                  <Link style={{ fontSize: 14 }} onClick={item.onClick} title={item.info}>
+                  <svg 
+                    width="16" 
+                    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 style={{ color: "#605E5C" }}>{item.description}</Text>
+                <Text className={styles.listItemSubtitle}>{item.description}</Text>
               </Stack>
             </li>
           ))}
         </ul>
-        {recentItems.length > 0 && <Link onClick={() => this.clearMostRecent()}>Clear Recents</Link>}
+        {recentItems.length > 0 && <Link onClick={() => clearMostRecent()} className={styles.listItemTitle}>Clear Recents</Link>}
       </Stack>
     );
-  }
+  };
 
-  private getLearningResourceItems(): JSX.Element {
+  const getLearningResourceItems = (): JSX.Element => {
     interface item {
       link: string;
       title: string;
@@ -785,19 +784,20 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                 href={item.link}
                 target="_blank"
                 style={{ marginRight: 5 }}
+                className={styles.listItemTitle}
               >
                 {item.title}
               </Link>
               <Image src={LinkIcon} alt={item.title} />
             </Stack>
-            <Text>{item.description}</Text>
+            <Text className={styles.listItemSubtitle}>{item.description}</Text>
           </Stack>
         ))}
       </Stack>
     );
-  }
+  };
 
-  private postgresNextStepItems: { link: string; title: string; description: string }[] = [
+  const postgresNextStepItems: { link: string; title: string; description: string }[] = [
     {
       link: "https://go.microsoft.com/fwlink/?linkid=2208312",
       title: "Data Modeling",
@@ -815,7 +815,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     },
   ];
 
-  private vcoreMongoNextStepItems: { link: string; title: string; description: string }[] = [
+  const 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 class SplashScreen extends React.Component<SplashScreenProps> {
     },
   ];
 
-  private getNextStepItems(): JSX.Element {
-    const items = userContext.apiType === "Postgres" ? this.postgresNextStepItems : this.vcoreMongoNextStepItems;
+  const getNextStepItems = (): JSX.Element => {
+    const items = userContext.apiType === "Postgres" ? postgresNextStepItems : 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 }}>
+              <Link href={item.link} target="_blank" style={{ marginRight: 5 }} className={styles.listItemTitle}>
                 {item.title}
               </Link>
               <Image src={LinkIcon} />
             </Stack>
-            <Text>{item.description}</Text>
+            <Text className={styles.listItemSubtitle}>{item.description}</Text>
           </Stack>
         ))}
       </Stack>
     );
-  }
+  };
 
-  private postgresLearnMoreItems: { link: string; title: string; description: string }[] = [
+  const postgresLearnMoreItems: { link: string; title: string; description: string }[] = [
     {
       link: "https://go.microsoft.com/fwlink/?linkid=2207226",
       title: "Performance Tuning",
@@ -871,7 +871,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     },
   ];
 
-  private vcoreMongoLearnMoreItems: { link: string; title: string; description: string }[] = [
+  const 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,23 +889,109 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     },
   ];
 
-  private getTipsAndLearnMoreItems(): JSX.Element {
-    const items = userContext.apiType === "Postgres" ? this.postgresLearnMoreItems : this.vcoreMongoLearnMoreItems;
+  const getTipsAndLearnMoreItems = (): JSX.Element => {
+    const items = userContext.apiType === "Postgres" ? postgresLearnMoreItems : 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 }}>
+              <Link href={item.link} target="_blank" style={{ marginRight: 5 }} className={styles.listItemTitle}>
                 {item.title}
               </Link>
               <Image src={LinkIcon} />
             </Stack>
-            <Text>{item.description}</Text>
+            <Text className={styles.listItemSubtitle}>{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,4 +1,5 @@
 import { Stack, Text } from "@fluentui/react";
+import { makeStyles } from "@fluentui/react-components";
 import React from "react";
 import { KeyCodes } from "../../Common/Constants";
 
@@ -9,25 +10,50 @@ 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
-      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,
-      }}
+      className={styles.button}
       onClick={onClick}
       onKeyPress={(event: React.KeyboardEvent) => {
         if (event.charCode === KeyCodes.Space || event.charCode === KeyCodes.Enter) {
@@ -41,9 +67,9 @@ export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
       <div>
         <img src={imgSrc} alt={title} aria-hidden="true" />
       </div>
-      <Stack style={{ marginLeft: 16 }}>
-        <Text style={{ fontSize: 18, fontWeight: 600 }}>{title}</Text>
-        <Text style={{ fontSize: 13 }}>{description}</Text>
+      <Stack className={styles.content}>
+        <Text className={styles.title}>{title}</Text>
+        <Text className={styles.description}>{description}</Text>
       </Stack>
     </Stack>
   );

src/Explorer/Tabs/CloudShellTab/AttachAddOn.tsx

@@ -1,126 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.  All rights reserved.
- */
-
-import { IDisposable, ITerminalAddon, Terminal } from 'xterm';
-
-interface IAttachOptions {
-    bidirectional?: boolean;
-}
-
-export class AttachAddon implements ITerminalAddon {
-    private _socket: WebSocket;
-    private _bidirectional: boolean;
-    private _disposables: IDisposable[] = [];
-    private _socketData: string;
-
-    constructor(socket: WebSocket, options?: IAttachOptions) {
-        this._socket = socket;
-        // always set binary type to arraybuffer, we do not handle blobs
-        this._socket.binaryType = 'arraybuffer';
-        this._bidirectional = !(options && options.bidirectional === false);
-        this._socketData = '';
-    }
-
-    public activate(terminal: Terminal): void {
-        this._disposables.push(
-            addSocketListener(this._socket, 'message', ev => {
-                let data: ArrayBuffer | string = ev.data;
-                const startStatusJson = 'ie_us';
-                const endStatusJson = 'ie_ue';
-
-                if (typeof data === 'object') {
-                    const enc = new TextDecoder("utf-8");
-                    data = enc.decode(ev.data as any);
-                }
-
-                // for example of json object look in TerminalHelper in the socket.onMessage
-                if (data.includes(startStatusJson) && data.includes(endStatusJson)) {
-                    // process as one line
-                    const statusData = data.split(startStatusJson)[1].split(endStatusJson)[0];
-                    data = data.replace(statusData, '');
-                    data = data.replace(startStatusJson, '');
-                    data = data.replace(endStatusJson, '');
-                } else if (data.includes(startStatusJson)) {
-                    // check for start
-                    const partialStatusData = data.split(startStatusJson)[1];
-                    this._socketData += partialStatusData;
-                    data = data.replace(partialStatusData, '');
-                    data = data.replace(startStatusJson, '');
-                } else if (data.includes(endStatusJson)) {
-                    // check for end and process the command
-                    const partialStatusData = data.split(endStatusJson)[0];
-                    this._socketData += partialStatusData;
-                    data = data.replace(partialStatusData, '');
-                    data = data.replace(endStatusJson, '');
-                    this._socketData = '';
-                } else if (this._socketData.length > 0) {
-                    // check if the line is all data then just concatenate
-                    this._socketData += data;
-                    data = '';
-                }
-                terminal.write(data);
-            })
-        );
-
-        if (this._bidirectional) {
-            this._disposables.push(terminal.onData(data => this._sendData(data)));
-            this._disposables.push(terminal.onBinary(data => this._sendBinary(data)));
-        }
-
-        this._disposables.push(addSocketListener(this._socket, 'close', () => this.dispose()));
-        this._disposables.push(addSocketListener(this._socket, 'error', () => this.dispose()));
-    }
-
-    public dispose(): void {
-        for (const d of this._disposables) {
-            d.dispose();
-        }
-    }
-
-    private _sendData(data: string): void {
-        if (!this._checkOpenSocket()) {
-            return;
-        }
-        this._socket.send(data);
-    }
-
-    private _sendBinary(data: string): void {
-        if (!this._checkOpenSocket()) {
-            return;
-        }
-        const buffer = new Uint8Array(data.length);
-        for (let i = 0; i < data.length; ++i) {
-            buffer[i] = data.charCodeAt(i) & 255;
-        }
-        this._socket.send(buffer);
-    }
-
-    private _checkOpenSocket(): boolean {
-        switch (this._socket.readyState) {
-            case WebSocket.OPEN:
-                return true;
-            case WebSocket.CONNECTING:
-                throw new Error('Attach addon was loaded before socket was open');
-            case WebSocket.CLOSING:
-                return false;
-            case WebSocket.CLOSED:
-                throw new Error('Attach addon socket is closed');
-            default:
-                throw new Error('Unexpected socket state');
-        }
-    }
-}
-
-function addSocketListener<K extends keyof WebSocketEventMap>(socket: WebSocket, type: K, handler: (this: WebSocket, ev: WebSocketEventMap[K]) => any): IDisposable {
-    socket.addEventListener(type, handler);
-    return {
-        dispose: () => {
-            if (!handler) {
-                // Already disposed
-                return;
-            }
-            socket.removeEventListener(type, handler);
-        }
-    };
-}

src/Explorer/Tabs/CloudShellTab/CloudShellTabComponent.tsx

@@ -1,76 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { Terminal } from "xterm";
-import { FitAddon } from 'xterm-addon-fit';
-import "xterm/css/xterm.css";
-import { TerminalKind } from "../../../Contracts/ViewModels";
-import { startCloudShellTerminal } from "./Core/CloudShellTerminalCore";
-
-export interface CloudShellTerminalProps {
-    shellType: TerminalKind;
-}
-
-export const CloudShellTerminalComponent: React.FC<CloudShellTerminalProps> = ({
-    shellType
-}: CloudShellTerminalProps) => {
-    const terminalRef = useRef(null); // Reference for terminal container
-    const xtermRef = useRef(null);    // Reference for XTerm instance
-    const socketRef = useRef(null);   // Reference for WebSocket
-    const fitAddon = new FitAddon();
-
-    useEffect(() => {
-        // Initialize XTerm instance
-        const term = new Terminal({
-            cursorBlink: true,
-            cursorStyle: 'bar',
-            fontFamily: 'monospace',
-            fontSize: 14,
-            theme: {
-                background: "#1e1e1e", 
-                foreground: "#d4d4d4", 
-                cursor: "#ffcc00"
-            },
-            scrollback: 1000
-        });
-
-        term.loadAddon(fitAddon);
-
-        // Attach terminal to the DOM
-        if (terminalRef.current) {
-            term.open(terminalRef.current);
-            xtermRef.current = term;
-        }
-        
-        if (fitAddon) {
-            fitAddon.fit();
-        }
-
-        // Adjust terminal size on window resize
-        const handleResize = () => fitAddon.fit();
-        window.addEventListener('resize', handleResize);
-
-        try {
-            socketRef.current = startCloudShellTerminal(term, shellType);
-            term.onData((data) => {
-                if (socketRef.current && socketRef.current.readyState === WebSocket.OPEN) {
-                    socketRef.current.send(data);
-                }
-            });
-        } catch (error) {
-            console.error("Failed to initialize CloudShell terminal:", error);
-            term.writeln(`\x1B[31mError initializing terminal: ${error.message}\x1B[0m`);
-        }
-
-        // Cleanup function to close WebSocket and dispose terminal
-        return () => {
-            if (!socketRef.current) return;
-            if (socketRef.current) {
-                socketRef.current.close(); // Close WebSocket connection
-            }
-            window.removeEventListener('resize', handleResize);
-            term.dispose(); // Clean up XTerm instance
-        };
-        
-    }, [shellType]);
-
-    return <div ref={terminalRef} style={{ width: "100%", height: "500px"}} />;
-};

src/Explorer/Tabs/CloudShellTab/Commands.tsx

@@ -1,152 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.  All rights reserved.
- */
-
-import { TerminalKind } from "../../../Contracts/ViewModels";
-import { userContext } from "../../../UserContext";
-
-export const getCommands = (terminalKind: TerminalKind, key: string) => {
-    let dbAccount = userContext.databaseAccount;
-    let endpoint;
-    switch (terminalKind) {
-        case TerminalKind.Postgres:
-            endpoint = dbAccount.properties.postgresqlEndpoint;
-            break;
-        case TerminalKind.Mongo:
-            endpoint = dbAccount.properties.mongoEndpoint;
-            break;
-        case TerminalKind.VCoreMongo:
-            endpoint = dbAccount.properties.vcoreMongoEndpoint;
-            break;
-        case TerminalKind.Cassandra:
-            endpoint = dbAccount.properties.cassandraEndpoint;
-            break;
-        default:
-            throw new Error("Unknown Terminal Kind");
-    }
-
-    let config = {
-        host: getHostFromUrl(endpoint),
-        name: dbAccount.name,
-        password: key,
-        endpoint: endpoint
-    };
-
-    return commands(terminalKind, config).join("\n").concat("\n");
-};
-
-export interface CommandConfig {
-    host: string,
-    name: string,
-    password: string,
-    endpoint: string
-}
-
-export const commands = (terminalKind: TerminalKind, config?: CommandConfig): string[] => {
-    switch (terminalKind) {
-        case TerminalKind.Postgres:
-            return [
-                // 1. Fetch and display location details in a readable format
-                "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
-                // 2. Check if psql is installed; if not, proceed with installation
-                "if ! command -v psql &> /dev/null; then echo '⚠️ psql not found. Installing...'; fi",
-                // 3. Download PostgreSQL if not installed
-                "if ! command -v psql &> /dev/null; then curl -LO https://ftp.postgresql.org/pub/source/v15.2/postgresql-15.2.tar.bz2; fi",
-                // 4. Extract PostgreSQL package if not installed
-                "if ! command -v psql &> /dev/null; then tar -xvjf postgresql-15.2.tar.bz2; fi",
-                // 5. Create a directory for PostgreSQL installation if not installed
-                "if ! command -v psql &> /dev/null; then mkdir -p ~/pgsql; fi",
-                // 6. Download readline (dependency for PostgreSQL) if not installed
-                "if ! command -v psql &> /dev/null; then curl -LO https://ftp.gnu.org/gnu/readline/readline-8.1.tar.gz; fi",
-                // 7. Extract readline package if not installed
-                "if ! command -v psql &> /dev/null; then tar -xvzf readline-8.1.tar.gz; fi",
-                // 8. Configure readline if not installed
-                "if ! command -v psql &> /dev/null; then cd readline-8.1 && ./configure --prefix=$HOME/pgsql; fi",
-                // 9. Add PostgreSQL to PATH if not installed
-                "if ! command -v psql &> /dev/null; then echo 'export PATH=$HOME/pgsql/bin:$PATH' >> ~/.bashrc; fi",
-                // 10. Source .bashrc to update PATH (even if psql was already installed)
-                "source ~/.bashrc",
-                // 11. Verify PostgreSQL installation
-                "psql --version",
-                `psql 'read -p "Enter Database Name: " dbname && read -p "Enter Username: " username && host=${config.endpoint} port=5432 dbname=$dbname user=$username sslmode=require'`
-            ];
-        case TerminalKind.Mongo:
-            return [
-                // 1. Fetch and display location details in a readable format
-                "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
-                // 2. Check if mongosh is installed; if not, proceed with installation
-                "if ! command -v mongosh &> /dev/null; then echo '⚠️ mongosh not found. Installing...'; fi",
-                // 3. Download mongosh if not installed
-                "if ! command -v mongosh &> /dev/null; then curl -LO https://downloads.mongodb.com/compass/mongosh-2.3.8-linux-x64.tgz; fi",
-                // 4. Extract mongosh package if not installed
-                "if ! command -v mongosh &> /dev/null; then tar -xvzf mongosh-2.3.8-linux-x64.tgz; fi",
-                // 5. Move mongosh binaries if not installed
-                "if ! command -v mongosh &> /dev/null; then mkdir -p ~/mongosh && mv mongosh-2.3.8-linux-x64/* ~/mongosh/; fi",
-                // 6. Add mongosh to PATH if not installed
-                "if ! command -v mongosh &> /dev/null; then echo 'export PATH=$HOME/mongosh/bin:$PATH' >> ~/.bashrc; fi",
-                // 7. Source .bashrc to update PATH (even if mongosh was already installed)
-                "source ~/.bashrc",
-                // 8. Verify mongosh installation
-                "mongosh --version",
-                // 9. Login to MongoDB
-                `mongosh --host ${config.host} --port 10255 --username ${config.name} --password ${config.password} --tls --tlsAllowInvalidCertificates`
-            ];   
-        case TerminalKind.VCoreMongo:
-            return [
-                // 1. Fetch and display location details in a readable format
-                "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
-                // 2. Check if mongosh is installed; if not, proceed with installation
-                "if ! command -v mongosh &> /dev/null; then echo '⚠️ mongosh not found. Installing...'; fi",
-                // 3. Download mongosh if not installed
-                "if ! command -v mongosh &> /dev/null; then curl -LO https://downloads.mongodb.com/compass/mongosh-2.3.8-linux-x64.tgz; fi",
-                // 4. Extract mongosh package if not installed
-                "if ! command -v mongosh &> /dev/null; then tar -xvzf mongosh-2.3.8-linux-x64.tgz; fi",
-                // 5. Move mongosh binaries if not installed
-                "if ! command -v mongosh &> /dev/null; then mkdir -p ~/mongosh && mv mongosh-2.3.8-linux-x64/* ~/mongosh/; fi",
-                // 6. Add mongosh to PATH if not installed
-                "if ! command -v mongosh &> /dev/null; then echo 'export PATH=$HOME/mongosh/bin:$PATH' >> ~/.bashrc; fi",
-                // 7. Source .bashrc to update PATH (even if mongosh was already installed)
-                "source ~/.bashrc",
-                // 8. Verify mongosh installation
-                "mongosh --version",
-                // 10. Login to MongoDBmongosh mongodb+srv://<credentials>@neesharma-stage-mongo-vcore.mongocluster.cosmos.azure.com/?authMechanism=SCRAM-SHA-256&retrywrites=false&maxIdleTimeMS=120000\u0007
-                `read -p "Enter username: " username && mongosh "mongodb+srv://$username:@${config.endpoint}/?authMechanism=SCRAM-SHA-256&retrywrites=false&maxIdleTimeMS=120000" --tls --tlsAllowInvalidCertificates`
-            ];     
-        case TerminalKind.Cassandra:
-            return [
-                // 1. Fetch and display location details in a readable format
-                "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
-                // 2. Check if cqlsh is installed; if not, proceed with installation
-                "if ! command -v cqlsh &> /dev/null; then echo '⚠️ cqlsh not found. Installing...'; fi",
-                // 3. Download Cassandra if not installed
-                "if ! command -v cqlsh &> /dev/null; then curl -LO https://archive.apache.org/dist/cassandra/5.0.3/apache-cassandra-5.0.3-bin.tar.gz; fi",
-                // 4. Extract Cassandra package if not installed
-                "if ! command -v cqlsh &> /dev/null; then tar -xvzf apache-cassandra-5.0.3-bin.tar.gz; fi",
-                // 5. Move Cassandra binaries if not installed
-                "if ! command -v cqlsh &> /dev/null; then mkdir -p ~/cassandra && mv apache-cassandra-5.0.3/* ~/cassandra/; fi",
-                // 6. Add Cassandra to PATH if not installed
-                "if ! command -v cqlsh &> /dev/null; then echo 'export PATH=$HOME/cassandra/bin:$PATH' >> ~/.bashrc; fi",
-                // 7. Set environment variables for SSL
-                "if ! command -v cqlsh &> /dev/null; then echo 'export SSL_VERSION=TLSv1_2' >> ~/.bashrc; fi",
-                "if ! command -v cqlsh &> /dev/null; then echo 'export SSL_VALIDATE=false' >> ~/.bashrc; fi",
-                // 8. Source .bashrc to update PATH (even if cqlsh was already installed)
-                "source ~/.bashrc",
-                // 9. Verify cqlsh installation
-                "cqlsh --version",
-                // 10. Login to Cassandra
-                `cqlsh ${config.host} 10350 -u ${config.name} -p ${config.password} --ssl --protocol-version=4`
-            ];
-        default:
-            return ["echo Unknown Shell"];
-    }
-}
-
-const getHostFromUrl = (mongoEndpoint: string): string => {
-    try {
-        const url = new URL(mongoEndpoint);
-        return url.hostname;
-    } catch (error) {
-        console.error("Invalid Mongo Endpoint URL:", error);
-        return "";
-    }
-};

src/Explorer/Tabs/CloudShellTab/Core/CloudShellTerminalCore.tsx

@@ -1,393 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Core functionality for CloudShell terminal management
- */
-
-import { Terminal } from "xterm";
-import { TerminalKind } from "../../../../Contracts/ViewModels";
-import { userContext } from "../../../../UserContext";
-import {
-    authorizeSession,
-    connectTerminal,
-    provisionConsole,
-    putEphemeralUserSettings,
-    registerCloudShellProvider,
-    verifyCloudShellProviderRegistration
-} from "../Data/CloudShellApiClient";
-import { getNormalizedRegion } from "../Data/RegionUtils";
-import { ShellTypeHandler } from "../ShellTypes/ShellTypeFactory";
-import { AttachAddon } from "../Utils/AttachAddOn";
-import { wait } from "../Utils/CommonUtils";
-import { terminalLog } from "../Utils/LogFormatter";
-
-// Constants
-const DEFAULT_CLOUDSHELL_REGION = "westus";
-const POLLING_INTERVAL_MS = 5000;
-const MAX_RETRY_COUNT = 10;
-const MAX_PING_COUNT = 20 * 60; // 20 minutes (60 seconds/minute)
-
-/**
- * Main function to start a CloudShell terminal
- */
-export const startCloudShellTerminal = async (terminal: Terminal, shellType: TerminalKind) => {
-  // Get the shell handler for this type
-  const shellHandler = ShellTypeHandler.getHandler(shellType);
-  
-  terminal.writeln(terminalLog.header("Initializing Azure CloudShell"));
-  await ensureCloudShellProviderRegistered(terminal);
-
-  const { resolvedRegion, defaultCloudShellRegion } = determineCloudShellRegion(terminal);
-
-  // Ask for user consent for region
-  const consentGranted = await askForRegionConsent(terminal, resolvedRegion);
-  if (!consentGranted) {
-    return {}; // Exit if user declined
-  }
-
-  // Check network requirements for this shell type
-  const networkConfig = await shellHandler.configureNetworkAccess(terminal, resolvedRegion);
-
-  terminal.writeln("");
-  // Provision CloudShell session
-  terminal.writeln(terminalLog.cloudshell(`Provisioning Started....`));
-
-  let sessionDetails: {
-    socketUri?: string;
-    provisionConsoleResponse?: any;
-    targetUri?: string;
-  };
-
-  try {
-    sessionDetails = await provisionCloudShellSession(resolvedRegion, terminal, networkConfig.vNetSettings, networkConfig.isAllPublicAccessEnabled);
-  } catch (err) {
-    terminal.writeln(terminalLog.error(err));
-    terminal.writeln(terminalLog.error("Failed to provision in primary region"));
-    terminal.writeln(terminalLog.warning(`Attempting with fallback region: ${defaultCloudShellRegion}`));
-
-    sessionDetails = await provisionCloudShellSession(defaultCloudShellRegion, terminal, networkConfig.vNetSettings, networkConfig.isAllPublicAccessEnabled);
-  }
-
-  if (!sessionDetails.socketUri) {
-    terminal.writeln(terminalLog.error('Unable to provision console. Please try again later.'));
-    return {};
-  }
-
-  // Configure WebSocket connection with shell-specific commands
-  const socket = await establishTerminalConnection(
-    terminal,
-    shellHandler,
-    sessionDetails.socketUri,
-    sessionDetails.provisionConsoleResponse,
-    sessionDetails.targetUri
-  );
-
-  return socket;
-};
-
-/**
- * Ensures that the CloudShell provider is registered for the current subscription
- */
-export const ensureCloudShellProviderRegistered = async (terminal: Terminal): Promise<void> => {
-  try {
-    terminal.writeln(terminalLog.info("Verifying provider registration..."));
-    const response: any = await verifyCloudShellProviderRegistration(userContext.subscriptionId);
-
-    if (response.registrationState !== "Registered") {
-      terminal.writeln(terminalLog.warning("Registering CloudShell provider..."));
-      await registerCloudShellProvider(userContext.subscriptionId);
-      terminal.writeln(terminalLog.success("Provider registration successful"));
-    }
-  } catch (err) {
-    terminal.writeln(terminalLog.error("Unable to verify provider registration"));
-    throw err;
-  }
-};
-
-/**
- * Determines the appropriate CloudShell region
- */
-export const determineCloudShellRegion = (terminal: Terminal): { resolvedRegion: string; defaultCloudShellRegion: string } => {
-  const region = userContext.databaseAccount?.location;
-  const resolvedRegion = getNormalizedRegion(region, DEFAULT_CLOUDSHELL_REGION);
-
-  return { resolvedRegion, defaultCloudShellRegion: DEFAULT_CLOUDSHELL_REGION };
-};
-
-/**
- * Asks the user for consent to use the specified CloudShell region
- */
-export const askForRegionConsent = async (terminal: Terminal, resolvedRegion: string): Promise<boolean> => {
-  terminal.writeln(terminalLog.header("CloudShell Region Confirmation"));
-  terminal.writeln(terminalLog.info("The CloudShell container will be provisioned in a specific Azure region."));
-  // Data residency and compliance information
-  terminal.writeln(terminalLog.subheader("Important Information"));
-  const dbRegion = userContext.databaseAccount?.location || "unknown";
-  terminal.writeln(terminalLog.item("Database Region", dbRegion));
-  terminal.writeln(terminalLog.item("CloudShell Container Region", resolvedRegion));
-
-  terminal.writeln(terminalLog.subheader("What this means to you?"));
-  terminal.writeln(terminalLog.item("Data Residency", "Commands and query results will be processed in this region"));
-  terminal.writeln(terminalLog.item("Network", "Database connections will originate from this region"));
-
-  // Consent question
-  terminal.writeln("");
-  terminal.writeln(terminalLog.prompt("Would you like to provision Azure CloudShell in the '" + resolvedRegion + "' region?"));
-  terminal.writeln(terminalLog.prompt("Press 'Y' to continue or 'N' to cancel (Y/N)"));
-
-  return new Promise<boolean>((resolve) => {
-    const keyListener = terminal.onKey(({ key }: { key: string }) => {
-      keyListener.dispose();
-      terminal.writeln("");
-
-      if (key.toLowerCase() === 'y') {
-        terminal.writeln(terminalLog.success("Proceeding with CloudShell in " + resolvedRegion));
-        terminal.writeln(terminalLog.separator());
-        resolve(true);
-      } else {
-        terminal.writeln(terminalLog.error("CloudShell provisioning canceled"));
-        setTimeout(() => terminal.dispose(), 2000);
-        resolve(false);
-      }
-    });
-  });
-};
-
-/**
- * Provisions a CloudShell session
- */
-export const provisionCloudShellSession = async (
-  resolvedRegion: string,
-  terminal: Terminal,
-  vNetSettings: object,
-  isAllPublicAccessEnabled: boolean
-): Promise<{ socketUri?: string; provisionConsoleResponse?: any; targetUri?: string }> => {
-  return new Promise( async (resolve, reject) => {
-    try {
-      terminal.writeln(terminalLog.header("Configuring CloudShell Session"));
-      // Check if vNetSettings is available and not empty
-      const hasVNetSettings = vNetSettings && Object.keys(vNetSettings).length > 0;
-      if (hasVNetSettings) {
-        terminal.writeln(terminalLog.vnet("Enabling private network configuration"));
-        displayNetworkSettings(terminal, vNetSettings, resolvedRegion);
-      }
-      else {
-        terminal.writeln(terminalLog.warning("No VNet configuration provided"));
-        terminal.writeln(terminalLog.warning("CloudShell will be provisioned with public network access"));
-
-        if (!isAllPublicAccessEnabled) {
-          terminal.writeln(terminalLog.error("Warning: Your database has network restrictions"));
-          terminal.writeln(terminalLog.error("CloudShell may not be able to connect without proper VNet configuration"));
-        }
-      }
-      terminal.writeln(terminalLog.warning("Any previous VNet settings will be overridden"));
-
-       // Apply user settings
-      await putEphemeralUserSettings(userContext.subscriptionId, resolvedRegion, vNetSettings);
-      terminal.writeln(terminalLog.success("Session settings applied"));
-      
-      // Provision console
-      let provisionConsoleResponse;
-      let attemptCounter = 0;
-
-      do {
-        provisionConsoleResponse = await provisionConsole(userContext.subscriptionId, resolvedRegion);
-        terminal.writeln(terminalLog.progress("Provisioning", provisionConsoleResponse.properties.provisioningState));
-        
-        attemptCounter++;
-
-        if (provisionConsoleResponse.properties.provisioningState !== "Succeeded") {
-          await wait(POLLING_INTERVAL_MS);
-        }
-      } while (provisionConsoleResponse.properties.provisioningState !== "Succeeded" && attemptCounter < 10);
-
-      if (provisionConsoleResponse.properties.provisioningState !== "Succeeded") {
-        const errorMessage = `Provisioning failed: ${provisionConsoleResponse.properties.provisioningState}`;
-        terminal.writeln(terminalLog.error(errorMessage));
-        return reject(new Error(errorMessage));
-      }
-      
-      // Connect terminal
-      const connectTerminalResponse = await connectTerminal(
-        provisionConsoleResponse.properties.uri,
-        { rows: terminal.rows, cols: terminal.cols }
-      );
-
-      const targetUri = `${provisionConsoleResponse.properties.uri}/terminals?cols=${terminal.cols}&rows=${terminal.rows}&version=2019-01-01&shell=bash`;
-      const termId = connectTerminalResponse.id;
-
-      // Determine socket URI
-      let socketUri = connectTerminalResponse.socketUri.replace(":443/", "");
-      const targetUriBody = targetUri.replace('https://', '').split('?')[0];
-
-      if (socketUri.indexOf(targetUriBody) === -1) {
-        socketUri = `wss://${targetUriBody}/${termId}`;
-      }
-
-      if (targetUriBody.includes('servicebus')) {
-        const targetUriBodyArr = targetUriBody.split('/');
-        socketUri = `wss://${targetUriBodyArr[0]}/$hc/${targetUriBodyArr[1]}/terminals/${termId}`;
-      }
-
-      return resolve({ socketUri, provisionConsoleResponse, targetUri });
-    } catch (err) {
-      terminal.writeln(terminalLog.error(`Provisioning failed: ${err.message}`));
-      return reject(err);
-    }
-  });
-};
-
-/**
- * Display VNet settings in the terminal
- */
-const displayNetworkSettings = (terminal: Terminal, vNetSettings: any, resolvedRegion: string): void => {
-  if (vNetSettings.networkProfileResourceId) {
-    const profileName = vNetSettings.networkProfileResourceId.split('/').pop();
-    terminal.writeln(terminalLog.item("Network Profile", profileName));
-    
-    if (vNetSettings.relayNamespaceResourceId) {
-      const relayName = vNetSettings.relayNamespaceResourceId.split('/').pop();
-      terminal.writeln(terminalLog.item("Relay Namespace", relayName));
-    }
-          
-    terminal.writeln(terminalLog.item("Region", resolvedRegion));
-    terminal.writeln(terminalLog.success("CloudShell will use this VNet to connect to your database"));
-  }
-};
-
-/**
- * Establishes a terminal connection via WebSocket
- */
-export const establishTerminalConnection = async (
-  terminal: Terminal,
-  shellHandler: any,
-  socketUri: string,
-  provisionConsoleResponse: any,
-  targetUri: string
-): Promise<WebSocket> => {
-  let socket = new WebSocket(socketUri);
-
-  // Get shell-specific initial commands 
-  const initCommands = await shellHandler.getInitialCommands();
-
-  // Configure the socket
-  socket = configureSocketConnection(socket, socketUri, terminal, initCommands, 0);
-
-  // Attach the terminal addon
-  const attachAddon = new AttachAddon(socket);
-  terminal.loadAddon(attachAddon);
-  terminal.writeln(terminalLog.success("Connection established"));
-
-  // Authorize the session
-  try {
-    const authorizeResponse = await authorizeSession(provisionConsoleResponse.properties.uri);
-    const cookieToken = authorizeResponse.token;
-
-    // Load auth token with a hidden image
-    const img = document.createElement("img");
-    img.src = `${targetUri}&token=${encodeURIComponent(cookieToken)}`;
-    terminal.focus();
-  } catch (err) {
-    terminal.writeln(terminalLog.error("Authorization failed"));
-    socket.close();
-    throw err;
-  }
-
-  return socket;
-};
-
-/**
- * Configures a WebSocket connection for the terminal
- */
-export const configureSocketConnection = (
-  socket: WebSocket,
-  uri: string,
-  terminal: Terminal,
-  initCommands: string,
-  socketRetryCount: number
-): WebSocket => {
-  let jsonData = '';
-  let keepAliveID: NodeJS.Timeout = null;
-  let pingCount = 0;
-
-  sendTerminalStartupCommands(socket, initCommands);
-
-  socket.onclose = () => {
-    if (keepAliveID) {
-      clearTimeout(keepAliveID);
-      pingCount = 0;
-    }
-    terminal.writeln(terminalLog.warning("Session terminated. Refresh the page to start a new session."));
-  };
-
-  socket.onerror = () => {
-    if (socketRetryCount < MAX_RETRY_COUNT && socket.readyState !== WebSocket.CLOSED) {
-      configureSocketConnection(socket, uri, terminal, initCommands, socketRetryCount + 1);
-    } else {
-      socket.close();
-    }
-  };
-
-  socket.onmessage = (event: MessageEvent<string>) => {
-    pingCount = 0; // Reset ping count on message receipt
-
-    let eventData = '';
-    if (typeof event.data === "object") {
-      try {
-        const enc = new TextDecoder("utf-8");
-        eventData = enc.decode(event.data as any);
-      } catch (e) {
-        // Not an array buffer, ignore
-      }
-    }
-
-    if (typeof event.data === 'string') {
-      eventData = event.data;
-    }
-
-    // Process event data
-    if (eventData.includes("ie_us") && eventData.includes("ie_ue")) {
-      const statusData = eventData.split('ie_us')[1].split('ie_ue')[0];
-      console.log(statusData);
-    } else if (eventData.includes("ie_us")) {
-      jsonData += eventData.split('ie_us')[1];
-    } else if (eventData.includes("ie_ue")) {
-      jsonData += eventData.split('ie_ue')[0];
-      console.log(jsonData);
-      jsonData = '';
-    } else if (jsonData.length > 0) {
-      jsonData += eventData;
-    }
-  };
-
-  return socket;
-};
-
-/**
- * Sends startup commands to the terminal
- */
-export const sendTerminalStartupCommands = (socket: WebSocket, initCommands: string): void => {
-  let keepAliveID: NodeJS.Timeout = null;
-  let pingCount = 0;
-
-  if (socket && socket.readyState === WebSocket.OPEN) {
-    socket.send(initCommands);
-  } else {
-    socket.onopen = () => {
-      socket.send(initCommands);
-
-      const keepSocketAlive = (socket: WebSocket) => {
-        if (socket.readyState === WebSocket.OPEN) {
-          if (pingCount >= MAX_PING_COUNT) {
-            socket.close();
-          } else {
-            socket.send('');
-            pingCount++;
-            keepAliveID = setTimeout(() => keepSocketAlive(socket), 1000);
-          }
-        }
-      };
-
-      keepSocketAlive(socket);
-    };
-  }
-};

src/Explorer/Tabs/CloudShellTab/Data.tsx

@@ -1,320 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.  All rights reserved.
- */
-
-import { ApiVersionsConfig, ResourceType } from "Explorer/Tabs/CloudShellTab/DataModels";
-import { v4 as uuidv4 } from 'uuid';
-import { configContext } from "../../../ConfigContext";
-import { TerminalKind } from "../../../Contracts/ViewModels";
-import { userContext } from '../../../UserContext';
-import { armRequest } from "../../../Utils/arm/request";
-import { Authorization, ConnectTerminalResponse, NetworkType, OsType, ProvisionConsoleResponse, SessionType, Settings, ShellType } from "./DataModels";
-
-/**
- * API version configuration by terminal type and resource type
- */
-const API_VERSIONS : ApiVersionsConfig = {
-    // Default version for fallback
-    DEFAULT: "2024-07-01",
-    
-    // Resource type specific defaults
-    RESOURCE_DEFAULTS: {
-      [ResourceType.NETWORK]: "2023-05-01",
-      [ResourceType.DATABASE]: "2024-07-01",
-      [ResourceType.VNET]: "2023-05-01",
-      [ResourceType.SUBNET]: "2023-05-01",
-      [ResourceType.RELAY]: "2024-01-01",
-      [ResourceType.ROLE]: "2022-04-01"
-    },
-    
-    // Shell-type specific versions with resource overrides
-    SHELL_TYPES: {
-      [TerminalKind.Mongo]: {
-        [ResourceType.DATABASE]: "2024-11-15"
-      },
-      [TerminalKind.VCoreMongo]: {
-        [ResourceType.DATABASE]: "2024-07-01"
-      },
-      [TerminalKind.Cassandra]: {
-        [ResourceType.DATABASE]: "2024-11-15"
-      }
-    }
-  };
-
-export const validateUserSettings = (userSettings: Settings) => {
-    if (userSettings.sessionType !== SessionType.Ephemeral && userSettings.osType !== OsType.Linux) {
-        return false;
-    } else {
-        return true;
-    }
-}
-
-// Current shell type context
-let currentShellType: TerminalKind | null = null;
-
-/**
- * Set the active shell type to determine API version
- */
-export const setShellType = (shellType: TerminalKind): void => {
-  currentShellType = shellType;
-};
-
-/**
- * Get the appropriate API version based on shell type and resource type
- * Uses a cascading fallback approach for maximum flexibility
- */
-export const getApiVersion = (resourceType?: ResourceType): string => {
-    // If no shell type is set, fallback to resource default or global default
-    if (!currentShellType) {
-      return resourceType ? 
-        (API_VERSIONS.RESOURCE_DEFAULTS[resourceType] || API_VERSIONS.DEFAULT) : 
-        API_VERSIONS.DEFAULT;
-    }
-    
-    // Shell type is set, try to get specific version in this priority:
-    // 1. Shell-specific + resource-specific
-    if (resourceType && 
-        API_VERSIONS.SHELL_TYPES[currentShellType]) {
-      const shellTypeConfig = API_VERSIONS.SHELL_TYPES[currentShellType];
-      if (resourceType in shellTypeConfig) {
-        return shellTypeConfig[resourceType] as string;
-      }
-    }
-
-    // 2. Resource-specific default
-    if (resourceType && resourceType in API_VERSIONS.RESOURCE_DEFAULTS) {
-      return API_VERSIONS.RESOURCE_DEFAULTS[resourceType];
-    }
-    
-    // 3. Global default
-    return API_VERSIONS.DEFAULT;
-};
-
-export const getUserRegion = async (subscriptionId: string, resourceGroup: string, accountName: string) => {
-    return await armRequest({
-        host: configContext.ARM_ENDPOINT,
-        path: `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}`,
-        method: "GET",
-        apiVersion: "2022-12-01"
-      });
-
-};
-
-export const deleteUserSettings = async (): Promise<void> => {
-    await armRequest<void>({
-        host: configContext.ARM_ENDPOINT,
-        path: `/providers/Microsoft.Portal/userSettings/cloudconsole`,
-        method: "DELETE",
-        apiVersion: "2023-02-01-preview"
-      });
-};
-
-export const getUserSettings = async (): Promise<Settings> => {
-    const resp = await armRequest<any>({
-        host: configContext.ARM_ENDPOINT,
-        path: `/providers/Microsoft.Portal/userSettings/cloudconsole`,
-        method: "GET",
-        apiVersion: "2023-02-01-preview"
-      });
-
-    return resp;
-};
-
-export const putEphemeralUserSettings = async (userSubscriptionId: string, userRegion: string, vNetSettings?: object) => {
-    const ephemeralSettings = {
-        properties: {
-            preferredOsType: OsType.Linux,
-            preferredShellType: ShellType.Bash,
-            preferredLocation: userRegion,
-            networkType: (!vNetSettings || Object.keys(vNetSettings).length === 0) ? NetworkType.Default : (vNetSettings ? NetworkType.Isolated : NetworkType.Default),
-            sessionType: SessionType.Ephemeral,
-            userSubscription: userSubscriptionId,
-            vnetSettings: vNetSettings ?? {}
-        }
-    };
-
-    return await armRequest({
-        host: configContext.ARM_ENDPOINT,
-        path: `/providers/Microsoft.Portal/userSettings/cloudconsole`,
-        method: "PUT",
-        apiVersion: "2023-02-01-preview",
-        body: ephemeralSettings
-      });
-};
-
-export const verifyCloudShellProviderRegistration = async(subscriptionId: string) => {
-    return await armRequest({
-        host: configContext.ARM_ENDPOINT,
-        path: `/subscriptions/${subscriptionId}/providers/Microsoft.CloudShell`,
-        method: "GET",
-        apiVersion: "2022-12-01"
-      });
-};
-
-export const registerCloudShellProvider = async (subscriptionId: string) => {
-    return await armRequest({
-        host: configContext.ARM_ENDPOINT,
-        path: `/subscriptions/${subscriptionId}/providers/Microsoft.CloudShell/register`,
-        method: "POST",
-        apiVersion: "2022-12-01"
-      });
-};
-
-export const provisionConsole = async (subscriptionId: string, location: string): Promise<ProvisionConsoleResponse> => {
-    const data = {
-        properties: {
-            osType: OsType.Linux
-        }
-    };
-
-    return await armRequest<any>({
-        host: configContext.ARM_ENDPOINT,
-        path: `providers/Microsoft.Portal/consoles/default`,
-        method: "PUT",
-        apiVersion: "2023-02-01-preview",
-        customHeaders: {
-            'x-ms-console-preferred-location': location
-        },
-        body: data,
-      });
-};
-
-export const connectTerminal = async (consoleUri: string, size: { rows: number, cols: number }): Promise<ConnectTerminalResponse> => {
-    const targetUri = consoleUri + `/terminals?cols=${size.cols}&rows=${size.rows}&version=2019-01-01&shell=bash`;
-    const resp = await fetch(targetUri, {
-        method: "POST",
-        headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json',
-            'Content-Length': '2',
-            'Authorization': userContext.authorizationToken,
-            'x-ms-client-request-id': uuidv4(),
-            'Accept-Language': getLocale(),
-        },
-        body: "{}" // empty body is necessary
-    });
-    return resp.json();
-};
-
-export const authorizeSession = async (consoleUri: string): Promise<Authorization> => {
-    const targetUri = consoleUri + "/authorize";
-    const resp = await fetch(targetUri, {
-        method: "POST",
-        headers: {
-            'Accept': 'application/json',
-            'Authorization': userContext.authorizationToken,
-            'Accept-Language': getLocale(),
-            "Content-Type": 'application/json'
-        },
-        body: "{}" // empty body is necessary
-    });
-    return resp.json();
-};
-
-export const getLocale = () => {
-    const langLocale = navigator.language;
-    return (langLocale && langLocale.length === 2 ? langLocale[1] : 'en-us');
-};
-
-const validCloudShellRegions = new Set(["westus", "southcentralus", "eastus", "northeurope", "westeurope", "centralindia", "southeastasia", "westcentralus"]);
-
-export const getNormalizedRegion = (region: string, defaultCloudshellRegion: string) => {
-    if (!region) return defaultCloudshellRegion;
-    
-    const regionMap: Record<string, string> = {
-      "centralus": "westcentralus",
-      "eastus2": "eastus"
-    };
-    
-    const normalizedRegion = regionMap[region.toLowerCase()] || region;
-    return validCloudShellRegions.has(normalizedRegion.toLowerCase()) ? normalizedRegion : defaultCloudshellRegion;
-};
-  
-export async function getNetworkProfileInfo<T>(networkProfileResourceId: string, apiVersionOverride?: string): Promise<T> {
-    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.NETWORK);
-    return await GetARMCall<T>(networkProfileResourceId, apiVersion);
-}
-
-export async function getAccountDetails<T>(databaseAccountId: string, apiVersionOverride?: string): Promise<T> {
-    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.DATABASE);
-    return await GetARMCall<T>(databaseAccountId, apiVersion);
-}
-
-export async function getVnetInformation<T>(vnetId: string, apiVersionOverride?: string): Promise<T> {
-    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.VNET);
-    return await GetARMCall<T>(vnetId, apiVersion);
-}
-
-export async function getSubnetInformation<T>(subnetId: string, apiVersionOverride?: string): Promise<T> {
-    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.SUBNET);
-    return await GetARMCall<T>(subnetId, apiVersion);
-}
-
-export async function updateSubnetInformation<T>(subnetId: string, request: object, apiVersionOverride?: string): Promise<T> {
-    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.SUBNET);
-    return await PutARMCall(subnetId, request, apiVersion);
-}
-
-export async function updateDatabaseAccount<T>(accountId: string, request: object, apiVersionOverride?: string): Promise<T> {
-    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.DATABASE);
-    return await PutARMCall(accountId, request, apiVersion);
-}
-
-export async function getDatabaseOperations<T>(accountId: string, apiVersionOverride?: string): Promise<T> {
-    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.DATABASE);
-    return await GetARMCall<T>(`${accountId}/operations`, apiVersion);  
-}
-
-export async function updateVnet<T>(vnetId: string, request: object, apiVersionOverride?: string) {
-    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.VNET);
-    return await PutARMCall<T>(vnetId, request, apiVersion);
-}
-
-export async function getVnet<T>(vnetId: string, apiVersionOverride?: string): Promise<T> {
-    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.VNET);
-    return await GetARMCall<T>(vnetId, apiVersion);  
-}
-
-export async function createNetworkProfile<T>(networkProfileId: string, request: object, apiVersionOverride?: string): Promise<T> {
-    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.NETWORK);
-    return await PutARMCall<T>(networkProfileId, request, apiVersion);
-}
-
-export async function createRelay<T>(relayId: string, request: object, apiVersionOverride?: string): Promise<T> {
-    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.RELAY);
-    return await PutARMCall<T>(relayId, request, apiVersion);
-}
-
-export async function getRelay<T>(relayId: string, apiVersionOverride?: string): Promise<T> {
-    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.RELAY);
-    return await GetARMCall<T>(relayId, apiVersion);
-}
-
-export async function createRoleOnNetworkProfile<T>(roleid: string, request: object, apiVersionOverride?: string): Promise<T> {
-    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.ROLE);
-    return await PutARMCall<T>(roleid, request, apiVersion); 
-}
-
-export async function createRoleOnRelay<T>(roleid: string, request: object, apiVersionOverride?: string): Promise<T> {
-    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.ROLE);
-    return await PutARMCall<T>(roleid, request, apiVersion); 
-}
-
-export async function GetARMCall<T>(path: string, apiVersion: string = API_VERSIONS.DEFAULT): Promise<T> {
-    return await armRequest<T>({
-        host: configContext.ARM_ENDPOINT,
-        path: path,
-        method: "GET",
-        apiVersion: apiVersion
-    });
-}
-
-export async function PutARMCall<T>(path: string, request: object, apiVersion: string = API_VERSIONS.DEFAULT): Promise<T> {
-    return await armRequest<T>({
-        host: configContext.ARM_ENDPOINT,
-        path: path,
-        method: "PUT",
-        apiVersion: apiVersion,
-        body: request
-    });
-}

src/Explorer/Tabs/CloudShellTab/Data/CloudShellApiClient.tsx

@@ -1,263 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.  All rights reserved.
- * CloudShell API client for various operations
- */
-
-import { v4 as uuidv4 } from 'uuid';
-import { configContext } from "../../../../ConfigContext";
-import { TerminalKind } from "../../../../Contracts/ViewModels";
-import { userContext } from '../../../../UserContext';
-import { armRequest } from "../../../../Utils/arm/request";
-import { ApiVersionsConfig, DEFAULT_API_VERSIONS } from "../Models/ApiVersions";
-import { Authorization, ConnectTerminalResponse, NetworkType, OsType, ProvisionConsoleResponse, ResourceType, SessionType, Settings, ShellType } from "../Models/DataModels";
-import { getLocale } from '../Data/LocalizationUtils';
-
-// Current shell type context
-let currentShellType: TerminalKind | null = null;
-
-/**
- * Set the active shell type to determine API version
- */
-export const setShellType = (shellType: TerminalKind): void => {
-  currentShellType = shellType;
-};
-
-/**
- * Get the appropriate API version based on shell type and resource type
- */
-export const getApiVersion = (resourceType?: ResourceType, apiVersions?: ApiVersionsConfig): string => {
-  if (!apiVersions) {
-    apiVersions = DEFAULT_API_VERSIONS; // Default fallback
-  }
-
-  // Shell type is set, try to get specific version in this priority:
-  // 1. Shell-specific + resource-specific
-  if (resourceType && 
-      apiVersions.SHELL_TYPES[currentShellType]) {
-    const shellTypeConfig = apiVersions.SHELL_TYPES[currentShellType];
-    if (resourceType in shellTypeConfig) {
-      return shellTypeConfig[resourceType] as string;
-    }
-  }
-
-  // 2. Resource-specific default
-  if (resourceType && resourceType in apiVersions.RESOURCE_DEFAULTS) {
-    return apiVersions.RESOURCE_DEFAULTS[resourceType];
-  }
-  
-  // 3. Global default
-  return apiVersions.DEFAULT;
-};
-
-export const getUserRegion = async (subscriptionId: string, resourceGroup: string, accountName: string) => {
-  return await armRequest({
-      host: configContext.ARM_ENDPOINT,
-      path: `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}`,
-      method: "GET",
-      apiVersion: "2022-12-01"
-    });
-};
-
-export const deleteUserSettings = async (): Promise<void> => {
-  await armRequest<void>({
-      host: configContext.ARM_ENDPOINT,
-      path: `/providers/Microsoft.Portal/userSettings/cloudconsole`,
-      method: "DELETE",
-      apiVersion: "2023-02-01-preview"
-    });
-};
-
-export const getUserSettings = async (): Promise<Settings> => {
-  const resp = await armRequest<any>({
-      host: configContext.ARM_ENDPOINT,
-      path: `/providers/Microsoft.Portal/userSettings/cloudconsole`,
-      method: "GET",
-      apiVersion: "2023-02-01-preview"
-    });
-  return resp;
-};
-
-export const putEphemeralUserSettings = async (userSubscriptionId: string, userRegion: string, vNetSettings?: object) => {
-  const ephemeralSettings = {
-      properties: {
-          preferredOsType: OsType.Linux,
-          preferredShellType: ShellType.Bash,
-          preferredLocation: userRegion,
-          networkType: (!vNetSettings || Object.keys(vNetSettings).length === 0) ? NetworkType.Default : (vNetSettings ? NetworkType.Isolated : NetworkType.Default),
-          sessionType: SessionType.Ephemeral,
-          userSubscription: userSubscriptionId,
-          vnetSettings: vNetSettings ?? {}
-      }
-  };
-
-  return await armRequest({
-      host: configContext.ARM_ENDPOINT,
-      path: `/providers/Microsoft.Portal/userSettings/cloudconsole`,
-      method: "PUT",
-      apiVersion: "2023-02-01-preview",
-      body: ephemeralSettings
-    });
-};
-
-export const verifyCloudShellProviderRegistration = async(subscriptionId: string) => {
-  return await armRequest({
-      host: configContext.ARM_ENDPOINT,
-      path: `/subscriptions/${subscriptionId}/providers/Microsoft.CloudShell`,
-      method: "GET",
-      apiVersion: "2022-12-01"
-    });
-};
-
-export const registerCloudShellProvider = async (subscriptionId: string) => {
-  return await armRequest({
-      host: configContext.ARM_ENDPOINT,
-      path: `/subscriptions/${subscriptionId}/providers/Microsoft.CloudShell/register`,
-      method: "POST",
-      apiVersion: "2022-12-01"
-    });
-};
-
-export const provisionConsole = async (subscriptionId: string, location: string): Promise<ProvisionConsoleResponse> => {
-  const data = {
-      properties: {
-          osType: OsType.Linux
-      }
-  };
-
-  return await armRequest<any>({
-      host: configContext.ARM_ENDPOINT,
-      path: `providers/Microsoft.Portal/consoles/default`,
-      method: "PUT",
-      apiVersion: "2023-02-01-preview",
-      customHeaders: {
-          'x-ms-console-preferred-location': location
-      },
-      body: data,
-    });
-};
-
-export const connectTerminal = async (consoleUri: string, size: { rows: number, cols: number }): Promise<ConnectTerminalResponse> => {
-  const targetUri = consoleUri + `/terminals?cols=${size.cols}&rows=${size.rows}&version=2019-01-01&shell=bash`;
-  const resp = await fetch(targetUri, {
-      method: "POST",
-      headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json',
-          'Content-Length': '2',
-          'Authorization': userContext.authorizationToken,
-          'x-ms-client-request-id': uuidv4(),
-          'Accept-Language': getLocale(),
-      },
-      body: "{}" // empty body is necessary
-  });
-  return resp.json();
-};
-
-export const authorizeSession = async (consoleUri: string): Promise<Authorization> => {
-  const targetUri = consoleUri + "/authorize";
-  const resp = await fetch(targetUri, {
-      method: "POST",
-      headers: {
-          'Accept': 'application/json',
-          'Authorization': userContext.authorizationToken,
-          'Accept-Language': getLocale(),
-          "Content-Type": 'application/json'
-      },
-      body: "{}" // empty body is necessary
-  });
-  return resp.json();
-};
-
-export async function getNetworkProfileInfo<T>(networkProfileResourceId: string, apiVersionOverride?: string): Promise<T> {
-  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.NETWORK);
-  return await GetARMCall<T>(networkProfileResourceId, apiVersion);
-}
-
-export async function getAccountDetails<T>(databaseAccountId: string, apiVersionOverride?: string): Promise<T> {
-  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.DATABASE);
-  return await GetARMCall<T>(databaseAccountId, apiVersion);
-}
-
-export async function getVnetInformation<T>(vnetId: string, apiVersionOverride?: string): Promise<T> {
-  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.VNET);
-  return await GetARMCall<T>(vnetId, apiVersion);
-}
-
-export async function getSubnetInformation<T>(subnetId: string, apiVersionOverride?: string): Promise<T> {
-  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.SUBNET);
-  return await GetARMCall<T>(subnetId, apiVersion);
-}
-
-export async function updateSubnetInformation<T>(subnetId: string, request: object, apiVersionOverride?: string): Promise<T> {
-  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.SUBNET);
-  return await PutARMCall<T>(subnetId, request, apiVersion);
-}
-
-export async function updateDatabaseAccount<T>(accountId: string, request: object, apiVersionOverride?: string): Promise<T> {
-  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.DATABASE);
-  return await PutARMCall<T>(accountId, request, apiVersion);
-}
-
-export async function getDatabaseOperations<T>(accountId: string, apiVersionOverride?: string): Promise<T> {
-  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.DATABASE);
-  return await GetARMCall<T>(`${accountId}/operations`, apiVersion);  
-}
-
-export async function updateVnet<T>(vnetId: string, request: object, apiVersionOverride?: string): Promise<T> {
-  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.VNET);
-  return await PutARMCall<T>(vnetId, request, apiVersion);
-}
-
-export async function getVnet<T>(vnetId: string, apiVersionOverride?: string): Promise<T> {
-  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.VNET);
-  return await GetARMCall<T>(vnetId, apiVersion);  
-}
-
-export async function createNetworkProfile<T>(networkProfileId: string, request: object, apiVersionOverride?: string): Promise<T> {
-  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.NETWORK);
-  return await PutARMCall<T>(networkProfileId, request, apiVersion);
-}
-
-export async function createRelay<T>(relayId: string, request: object, apiVersionOverride?: string): Promise<T> {
-  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.RELAY);
-  return await PutARMCall<T>(relayId, request, apiVersion);
-}
-
-export async function getRelay<T>(relayId: string, apiVersionOverride?: string): Promise<T> {
-  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.RELAY);
-  return await GetARMCall<T>(relayId, apiVersion);
-}
-
-export async function createRoleOnNetworkProfile<T>(roleId: string, request: object, apiVersionOverride?: string): Promise<T> {
-const apiVersion = apiVersionOverride || getApiVersion(ResourceType.ROLE);
-  return await PutARMCall<T>(roleId, request, apiVersion); 
-}
-
-export async function createRoleOnRelay<T>(roleId: string, request: object, apiVersionOverride?: string): Promise<T> {
-  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.ROLE);
-  return await PutARMCall<T>(roleId, request, apiVersion); 
-}
-
-export async function createPrivateEndpoint<T>(privateEndpointId: string, request: object, apiVersionOverride?: string): Promise<T> {
-    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.NETWORK);
-    return await PutARMCall<T>(privateEndpointId, request, apiVersion);
-}
-
-export async function GetARMCall<T>(path: string, apiVersion: string = '2024-07-01'): Promise<T> {
-  return await armRequest<T>({
-      host: configContext.ARM_ENDPOINT,
-      path: path,
-      method: "GET",
-      apiVersion: apiVersion
-  });
-}
-
-export async function PutARMCall<T>(path: string, request: object, apiVersion: string = '2024-07-01'): Promise<T> {
-  return await armRequest<T>({
-      host: configContext.ARM_ENDPOINT,
-      path: path,
-      method: "PUT",
-      apiVersion: apiVersion,
-      body: request
-  });
-}

src/Explorer/Tabs/CloudShellTab/Data/LocalizationUtils.tsx

@@ -1,12 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.  All rights reserved.
- * Localization utilities for CloudShell
- */
-
-/**
- * Gets the current locale for API requests
- */
-export const getLocale = (): string => {
-  const langLocale = navigator.language;
-  return (langLocale && langLocale.length > 2 ? langLocale : 'en-us');
-};

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

@@ -1,37 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.  All rights reserved.
- * Region utilities for CloudShell
- */
-
-export const getLocale = () => {
-  const langLocale = navigator.language;
-  return (langLocale && langLocale.length === 2 ? langLocale[1] : 'en-us');
-};
-
-const validCloudShellRegions = new Set([
-  "westus", 
-  "southcentralus", 
-  "eastus", 
-  "northeurope", 
-  "westeurope", 
-  "centralindia", 
-  "southeastasia", 
-  "westcentralus"
-]);
-
-/**
- * Normalizes a region name to a valid CloudShell region
- * @param region The region to normalize
- * @param defaultCloudshellRegion Default region to use if the provided region is not supported
- */
-export const getNormalizedRegion = (region: string, defaultCloudshellRegion: string) => {
-  if (!region) return defaultCloudshellRegion;
-  
-  const regionMap: Record<string, string> = {
-    "centralus": "westcentralus",
-    "eastus2": "eastus"
-  };
-  
-  const normalizedRegion = regionMap[region.toLowerCase()] || region;
-  return validCloudShellRegions.has(normalizedRegion.toLowerCase()) ? normalizedRegion : defaultCloudshellRegion;
-};

src/Explorer/Tabs/CloudShellTab/DataModels.tsx

@@ -1,185 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.  All rights reserved.
- */
-import { TerminalKind } from "../../../Contracts/ViewModels";
-
-export const enum OsType {
-    Linux = "linux",
-    Windows = "windows"
-}
-
-export const enum ShellType {
-    Bash = "bash",
-    PowerShellCore = "pwsh"
-}
-  
-export const enum NetworkType {
-    Default = "Default",
-    Isolated = "Isolated"
-}
-
-export const enum SessionType {
-    Mounted = "Mounted",
-    Ephemeral = "Ephemeral"
-}
-
-export const enum UserInputs {
-    NoReset = "1",
-    ConfigureVNet = "2",
-    ResetVNet = "3"
-};
-
-export type Settings = {
-    properties: UserSettingProperties
-};
-
-export type UserSettingProperties = {
-    networkType: string;  
-    preferredLocation: string;
-    preferredOsType: OsType;
-    preferredShellType: ShellType;
-    userSubscription: string;
-    sessionType: SessionType;
-    vnetSettings: VnetSettings; 
-}
-
-export type VnetSettings = {
-    networkProfileResourceId?: string;
-    relayNamespaceResourceId?: string;
-    location?: string;
-}
-
-export type ProvisionConsoleResponse = {
-    properties: {
-        osType: OsType;
-        provisioningState: string;
-        uri: string;
-    };
-};
-
-export type Authorization = {
-    token: string;
-};
-
-export type ConnectTerminalResponse = {
-    id: string;
-    idleTimeout: string;
-    rootDirectory: string;
-    socketUri: string;
-    tokenUpdated: boolean;
-};
-
-export type VnetModel = {
-    name: string;
-    id: string;
-    etag: string;
-    type: string;
-    location: string;
-    tags: Record<string, string>;
-    properties: {
-        provisioningState: string;
-        resourceGuid: string;
-        addressSpace: {
-            addressPrefixes: string[];
-        };
-        encryption: {
-            enabled: boolean;
-            enforcement: string;
-        };
-        privateEndpointVNetPolicies: string;
-        subnets: Array<{
-            name: string;
-            id: string;
-            etag: string;
-            type: string;
-            properties: {
-                provisioningState: string;
-                addressPrefixes?: string[];
-                addressPrefix?: string;
-                networkSecurityGroup?: { id: string };
-                ipConfigurations?: { id: string }[];
-                ipConfigurationProfiles?: { id: string }[];
-                privateEndpoints?: { id: string }[];
-                serviceEndpoints?: Array<{
-                    provisioningState: string;
-                    service: string;
-                    locations: string[];
-                }>;
-                delegations?: Array<{
-                    name: string;
-                    id: string;
-                    etag: string;
-                    type: string;
-                    properties: {
-                        provisioningState: string;
-                        serviceName: string;
-                        actions: string[];
-                    };
-                }>;
-                purpose?: string;
-                privateEndpointNetworkPolicies?: string;
-                privateLinkServiceNetworkPolicies?: string;
-            };
-        }>;
-        virtualNetworkPeerings: any[];
-        enableDdosProtection: boolean;
-    };
-};
-
-export type RelayNamespace = {
-    id: string;
-    name: string;
-    type: string;
-    location: string;
-    tags: Record<string, string>;
-    properties: {
-        metricId: string;
-        serviceBusEndpoint: string;
-        provisioningState: string;
-        status: string;
-        createdAt: string;
-        updatedAt: string;
-    };
-    sku: {
-        name: string;
-        tier: string;
-    };
-};
-
-export type RelayNamespaceResponse = {
-    value: RelayNamespace[];
-};
-
-/**
- * Resource types for API versioning
- */
-export enum ResourceType {
-    NETWORK = "NETWORK",
-    DATABASE = "DATABASE",
-    VNET = "VNET",
-    SUBNET = "SUBNET",
-    RELAY = "RELAY",
-    ROLE = "ROLE"
-  }
-
-// Type definition for API_VERSIONS configuration
-export type ApiVersionsConfig = {
-    // Global default API version
-    DEFAULT: string;
-    
-    // Resource-specific default API versions
-    RESOURCE_DEFAULTS: {
-      [key in ResourceType]: string;
-    };
-    
-    // Shell-type specific configurations
-    SHELL_TYPES: {
-      [key in TerminalKind]?: {
-        // Resource-specific overrides for this shell type
-        [key in ResourceType]?: string;
-      };
-    };
-  };
-  
-
-

src/Explorer/Tabs/CloudShellTab/LogFormatter.tsx

@@ -1,29 +0,0 @@
-
-/**
- * Standardized terminal logging functions for consistent formatting
- */
-export const terminalLog = {
-  // Section headers
-  header: (message: string) => `\n\x1B[1;34m┌─ ${message} ${"─".repeat(Math.max(45 - message.length, 0))}\x1B[0m`,
-  subheader: (message: string) => `\x1B[1;36m├ ${message}\x1B[0m`,
-  sectionEnd: () => `\x1B[1;34m└${"─".repeat(50)}\x1B[0m\n`,
-  
-  // Status messages
-  success: (message: string) => `\x1B[32m✓ ${message}\x1B[0m`,
-  warning: (message: string) => `\x1B[33m⚠ ${message}\x1B[0m`,
-  error: (message: string) => `\x1B[31m✗ ${message}\x1B[0m`,
-  info: (message: string) => `\x1B[34m${message}\x1B[0m`,
-  
-  // Resource information
-  database: (message: string) => `\x1B[35m🔶  Database: ${message}\x1B[0m`,
-  vnet: (message: string) => `\x1B[36m🔷  Network: ${message}\x1B[0m`,
-  cloudshell: (message: string) => `\x1B[32m🔷  CloudShell: ${message}\x1B[0m`,
-  
-  // Data formatting
-  item: (label: string, value: string) => `  • ${label}: \x1B[32m${value}\x1B[0m`,
-  progress: (operation: string, status: string) => `\x1B[34m${operation}: \x1B[36m${status}\x1B[0m`,
-  
-  // User interaction
-  prompt: (message: string) => `\x1B[1;37m${message}\x1B[0m`,
-  separator: () => `\x1B[30;1m${"─".repeat(50)}\x1B[0m`
-};

src/Explorer/Tabs/CloudShellTab/Models/ApiVersions.ts

@@ -1,74 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.  All rights reserved.
- * API versions configuration for CloudShell
- */
-
-import { TerminalKind } from "../../../../Contracts/ViewModels";
-import { ResourceType } from "./DataModels";
-
-/**
- * Configuration for API versions used by the CloudShell
- */
-export type ApiVersionsConfig = {
-    DEFAULT: string;
-    RESOURCE_DEFAULTS: Record<ResourceType, string>;
-    SHELL_TYPES: Record<TerminalKind, Record<ResourceType, string>>;
-}
-
-/**
- * Default API versions configuration
- */
-export const DEFAULT_API_VERSIONS: ApiVersionsConfig = {
-    DEFAULT: '2024-07-01',
-    RESOURCE_DEFAULTS: {
-      [ResourceType.DATABASE]: '2024-11-15',
-      [ResourceType.NETWORK]: '2024-07-01',
-      [ResourceType.VNET]: '2024-07-01',
-      [ResourceType.SUBNET]: '2024-07-01',
-      [ResourceType.RELAY]: '2022-10-01',
-      [ResourceType.ROLE]: '2022-04-01',
-    },
-    SHELL_TYPES: {
-      [TerminalKind.Mongo]: {
-        [ResourceType.DATABASE]: '2024-11-15',
-        [ResourceType.NETWORK]: '2024-07-01',
-        [ResourceType.VNET]: '2024-07-01',
-        [ResourceType.SUBNET]: '2024-07-01',
-        [ResourceType.RELAY]: '2024-01-01',
-        [ResourceType.ROLE]: '2022-04-01',
-      },
-      [TerminalKind.VCoreMongo]: {
-        [ResourceType.DATABASE]: '2024-07-01',
-        [ResourceType.NETWORK]: '2024-07-01',
-        [ResourceType.VNET]: '2024-07-01',
-        [ResourceType.SUBNET]: '2024-07-01',
-        [ResourceType.RELAY]: '2024-01-01',
-        [ResourceType.ROLE]: '2022-04-01',
-      },
-      [TerminalKind.Postgres]: {
-        [ResourceType.DATABASE]: '2024-11-15',
-        [ResourceType.NETWORK]: '2024-07-01',
-        [ResourceType.VNET]: '2024-07-01',
-        [ResourceType.SUBNET]: '2024-07-01',
-        [ResourceType.RELAY]: '2024-01-01',
-        [ResourceType.ROLE]: '2022-04-01',
-      },
-      [TerminalKind.Cassandra]: {
-        [ResourceType.DATABASE]: '2024-11-15',
-        [ResourceType.NETWORK]: '2024-07-01',
-        [ResourceType.VNET]: '2024-07-01',
-        [ResourceType.SUBNET]: '2024-07-01',
-        [ResourceType.RELAY]: '2024-01-01',
-        [ResourceType.ROLE]: '2022-04-01',
-      },
-      [TerminalKind.Default]: {
-        [ResourceType.DATABASE]: undefined,
-        [ResourceType.NETWORK]: undefined,
-        [ResourceType.VNET]: undefined,
-        [ResourceType.SUBNET]: undefined,
-        [ResourceType.RELAY]: undefined,
-        [ResourceType.ROLE]: undefined,
-      },
-    },
-  };
-  

src/Explorer/Tabs/CloudShellTab/Models/DataModels.tsx

@@ -1,163 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.  All rights reserved.
- * Data models for CloudShell
- */
-
-export const enum OsType {
-    Linux = "linux",
-    Windows = "windows"
-}
-
-export const enum ShellType {
-    Bash = "bash",
-    PowerShellCore = "pwsh"
-}
-  
-export const enum NetworkType {
-    Default = "Default",
-    Isolated = "Isolated"
-}
-
-export const enum SessionType {
-    Mounted = "Mounted",
-    Ephemeral = "Ephemeral"
-}
-
-export const enum UserInputs {
-    NoReset = "1",
-    ConfigureVNet = "2",
-    ResetVNet = "3"
-};
-
-export type Settings = {
-    properties: UserSettingProperties
-};
-
-export type UserSettingProperties = {
-    networkType: string;  
-    preferredLocation: string;
-    preferredOsType: OsType;
-    preferredShellType: ShellType;
-    userSubscription: string;
-    sessionType: SessionType;
-    vnetSettings: VnetSettings; 
-}
-
-export type VnetSettings = {
-    networkProfileResourceId?: string;
-    relayNamespaceResourceId?: string;
-    location?: string;
-}
-
-export type ProvisionConsoleResponse = {
-    properties: {
-        osType: OsType;
-        provisioningState: string;
-        uri: string;
-    };
-};
-
-export type Authorization = {
-    token: string;
-};
-
-export type ConnectTerminalResponse = {
-    id: string;
-    idleTimeout: string;
-    rootDirectory: string;
-    socketUri: string;
-    tokenUpdated: boolean;
-};
-
-export type VnetModel = {
-    name: string;
-    id: string;
-    etag: string;
-    type: string;
-    location: string;
-    tags: Record<string, string>;
-    properties: {
-        provisioningState: string;
-        resourceGuid: string;
-        addressSpace: {
-            addressPrefixes: string[];
-        };
-        encryption: {
-            enabled: boolean;
-            enforcement: string;
-        };
-        privateEndpointVNetPolicies: string;
-        subnets: Array<{
-            name: string;
-            id: string;
-            etag: string;
-            type: string;
-            properties: {
-                provisioningState: string;
-                addressPrefixes?: string[];
-                addressPrefix?: string;
-                networkSecurityGroup?: { id: string };
-                ipConfigurations?: { id: string }[];
-                ipConfigurationProfiles?: { id: string }[];
-                privateEndpoints?: { id: string }[];
-                serviceEndpoints?: Array<{
-                    provisioningState: string;
-                    service: string;
-                    locations: string[];
-                }>;
-                delegations?: Array<{
-                    name: string;
-                    id: string;
-                    etag: string;
-                    type: string;
-                    properties: {
-                        provisioningState: string;
-                        serviceName: string;
-                        actions: string[];
-                    };
-                }>;
-                purpose?: string;
-                privateEndpointNetworkPolicies?: string;
-                privateLinkServiceNetworkPolicies?: string;
-            };
-        }>;
-        virtualNetworkPeerings: any[];
-        enableDdosProtection: boolean;
-    };
-};
-
-export type RelayNamespace = {
-    id: string;
-    name: string;
-    type: string;
-    location: string;
-    tags: Record<string, string>;
-    properties: {
-        metricId: string;
-        serviceBusEndpoint: string;
-        provisioningState: string;
-        status: string;
-        createdAt: string;
-        updatedAt: string;
-    };
-    sku: {
-        name: string;
-        tier: string;
-    };
-};
-
-export type RelayNamespaceResponse = {
-    value: RelayNamespace[];
-};
-
-/**
- * Resource types for API versioning
- */
-export enum ResourceType {
-    NETWORK = "NETWORK",
-    DATABASE = "DATABASE",
-    VNET = "VNET",
-    SUBNET = "SUBNET",
-    RELAY = "RELAY",
-    ROLE = "ROLE"
-}

src/Explorer/Tabs/CloudShellTab/Network/FirewallHandler.tsx

@@ -1,94 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Firewall handling functionality for CloudShell
- */
-
-import { Terminal } from "xterm";
-import { userContext } from "../../../../UserContext";
-import { hasFirewallRestrictions } from "../../Shared/CheckFirewallRules";
-import { getAccountDetails, updateDatabaseAccount } from "../Data/CloudShellApiClient";
-import { askConfirmation } from "../Utils/CommonUtils";
-import { terminalLog } from "../Utils/LogFormatter";
-
-export class FirewallHandler {
-  /**
-   * Checks if firewall configuration is needed for CloudShell
-   */
-  public static async checkFirewallConfiguration(terminal: Terminal): Promise<boolean> {
-    if (!hasFirewallRestrictions()) {
-      return false; // No firewall rules to configure
-    }
-
-    terminal.writeln(terminalLog.header("Database Firewall Configuration"));
-    terminal.writeln(terminalLog.warning("Your database has firewall restrictions enabled"));
-    terminal.writeln(terminalLog.warning("CloudShell might need access through these restrictions"));
-
-    const shouldConfigureFirewall = await askConfirmation(
-      terminal, 
-      "Would you like to check and configure firewall settings?"
-    );
-
-    if (!shouldConfigureFirewall) {
-      terminal.writeln(terminalLog.info("Skipping firewall configuration"));
-      return false;
-    }
-
-    return await this.configureFirewallForCloudShell(terminal);
-  }
-
-  /**
-   * Configures firewall for CloudShell access
-   */
-  private static async configureFirewallForCloudShell(terminal: Terminal): Promise<boolean> {
-    try {
-      // Get current database account details
-      terminal.writeln(terminalLog.database("Retrieving current firewall configuration..."));
-      const dbAccount = userContext.databaseAccount;
-      const currentDbAccount = await getAccountDetails(dbAccount.id);
-      
-      // Check if "Allow Azure Services" is already enabled
-      const ipRules = currentDbAccount.properties.ipRules || [];
-      const azureServicesEnabled = currentDbAccount.properties.publicNetworkAccess === "Enabled";
-      
-      if (azureServicesEnabled) {
-        terminal.writeln(terminalLog.success("Azure services access is already enabled"));
-        return true;
-      }
-      
-      // Ask user to enable Azure services access
-      terminal.writeln(terminalLog.warning("Azure services access is not enabled"));
-      terminal.writeln(terminalLog.info("CloudShell requires 'Allow Azure Services' to be enabled"));
-      
-      const enableAzureServices = await askConfirmation(
-        terminal,
-        "Enable 'Allow Azure Services' for this database?"
-      );
-      
-      if (!enableAzureServices) {
-        terminal.writeln(terminalLog.warning("CloudShell may not be able to connect without enabling Azure services access"));
-        return false;
-      }
-      
-      // Update database account to enable Azure services access
-      terminal.writeln(terminalLog.info("Updating database firewall configuration..."));
-      
-      // Create update payload - only modify firewall-related properties
-      const updatePayload = {
-        ...currentDbAccount,
-        properties: {
-          ...currentDbAccount.properties,
-          publicNetworkAccess: "Enabled"
-        }
-      };
-      
-      await updateDatabaseAccount(dbAccount.id, updatePayload);
-      terminal.writeln(terminalLog.success("Database firewall updated successfully"));
-      terminal.writeln(terminalLog.success("Azure services access is now enabled"));
-      
-      return true;
-    } catch (error) {
-      terminal.writeln(terminalLog.error(`Error configuring firewall: ${error.message}`));
-      return false;
-    }
-  }
-}

src/Explorer/Tabs/CloudShellTab/Network/NetworkAccessHandler.tsx

@@ -1,99 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Network access configuration handler for CloudShell
- */
-
-import { Terminal } from "xterm";
-import { TerminalKind } from "../../../../Contracts/ViewModels";
-import { IsPublicAccessAvailable } from "../../Shared/CheckFirewallRules";
-import { getUserSettings } from "../Data/CloudShellApiClient";
-import { VnetSettings } from "../Models/DataModels";
-import { terminalLog } from "../Utils/LogFormatter";
-import { VNetHandler } from "./VNetHandler";
-
-export class NetworkAccessHandler {
-  /**
-   * Configures network access for the CloudShell based on shell type and network restrictions
-   */
-  public static async configureNetworkAccess(
-    terminal: Terminal, 
-    region: string, 
-    shellType: TerminalKind
-  ): Promise<{
-    vNetSettings: any;
-    isAllPublicAccessEnabled: boolean;
-  }> {
-    // Check if public access is available for this shell type
-    const isAllPublicAccessEnabled = await IsPublicAccessAvailable(shellType);
-
-    // If public access is enabled, no need for VNet configuration
-    if (isAllPublicAccessEnabled) {
-      terminal.writeln(terminalLog.database("Public access enabled. Skipping VNet configuration."));
-      return {
-        vNetSettings: {},
-        isAllPublicAccessEnabled: true
-      };
-    }
-
-    // Public access is restricted, we need to configure a VNet or use existing one
-    terminal.writeln(terminalLog.database("Network restrictions detected"));
-    terminal.writeln(terminalLog.info("Loading CloudShell configuration..."));
-
-    // Get existing settings if available
-    const settings = await getUserSettings();
-    if (!settings) {
-      terminal.writeln(terminalLog.warning("No existing user settings found."));
-    }
-
-    // Retrieve CloudShell VNet settings if available
-    let cloudShellVnetSettings: VnetSettings | undefined;
-    if (settings) {
-      cloudShellVnetSettings = await VNetHandler.retrieveCloudShellVnetSettings(settings, terminal);
-    }
-
-    // If CloudShell has VNet settings, check with database config
-    let finalVNetSettings = {};
-    if (cloudShellVnetSettings && cloudShellVnetSettings.networkProfileResourceId) {
-      // Check if we should use existing VNet settings
-      const isContinueWithSameVnet = await VNetHandler.askForVNetConfigConsent(terminal, shellType);
-      
-      if (isContinueWithSameVnet) {
-        // Check if the VNet is already configured in the database
-        const isVNetInDatabaseConfig = await VNetHandler.isCloudShellVNetInDatabaseConfig(cloudShellVnetSettings, terminal);
-
-        if (!isVNetInDatabaseConfig) {
-          terminal.writeln(terminalLog.warning("CloudShell VNet is not configured in database access list"));
-          const addToDatabase = await VNetHandler.askToAddVNetToDatabase(terminal, cloudShellVnetSettings);
-
-          if (addToDatabase) {
-            await VNetHandler.addCloudShellVNetToDatabase(cloudShellVnetSettings, terminal);
-            finalVNetSettings = cloudShellVnetSettings;
-          } else {
-            // User declined to add VNet to database, need to recreate
-            terminal.writeln(terminalLog.warning("Will configure new VNet..."));
-            cloudShellVnetSettings = undefined;
-          }
-        } else {
-          terminal.writeln(terminalLog.success("CloudShell VNet is already in database configuration"));
-          finalVNetSettings = cloudShellVnetSettings;
-        }
-      } else {
-        cloudShellVnetSettings = undefined; // User declined to use existing VNet settings
-      }
-    }
-
-    // If we don't have valid VNet settings, create new ones
-    if (!cloudShellVnetSettings || !cloudShellVnetSettings.networkProfileResourceId) {
-      terminal.writeln(terminalLog.subheader("Configuring network infrastructure"));
-      finalVNetSettings = await VNetHandler.configureCloudShellVNet(terminal, region);
-      
-      // Add the new VNet to the database
-      await VNetHandler.addCloudShellVNetToDatabase(finalVNetSettings as VnetSettings, terminal);
-    }
-
-    return {
-      vNetSettings: finalVNetSettings,
-      isAllPublicAccessEnabled: false
-    };
-  }
-}

src/Explorer/Tabs/CloudShellTab/Network/VNetHandler.tsx

@@ -1,894 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * VNet handling functionality for CloudShell
- */
-
-import { v4 as uuidv4 } from 'uuid';
-import { Terminal } from "xterm";
-import { TerminalKind } from "../../../../Contracts/ViewModels";
-import { userContext } from "../../../../UserContext";
-import { hasPrivateEndpointsRestrictions } from "../../Shared/CheckFirewallRules";
-import {
-  createNetworkProfile,
-  createPrivateEndpoint,
-  createRelay,
-  createRoleOnNetworkProfile,
-  createRoleOnRelay,
-  getAccountDetails,
-  getDatabaseOperations,
-  getNetworkProfileInfo,
-  getRelay,
-  getSubnetInformation,
-  getVnet,
-  getVnetInformation,
-  updateDatabaseAccount,
-  updateSubnetInformation,
-  updateVnet
-} from "../Data/CloudShellApiClient";
-import { Settings, VnetSettings } from "../Models/DataModels";
-import { askConfirmation, askQuestion, wait } from "../Utils/CommonUtils";
-import { terminalLog } from "../Utils/LogFormatter";
-
-// Constants for VNet configuration
-const POLLING_INTERVAL_MS = 5000;
-const MAX_RETRY_COUNT = 10;
-const STANDARD_SKU = "Standard";
-const DEFAULT_VNET_ADDRESS_PREFIX = "10.0.0.0/16";
-const DEFAULT_SUBNET_ADDRESS_PREFIX = "10.0.1.0/24";
-const DEFAULT_CONTAINER_INSTANCE_OID = "88536fb9-d60a-4aee-8195-041425d6e927";
-
-export class VNetHandler {
-  /**
-   * Retrieves CloudShell VNet settings from user settings
-   */
-  public static async retrieveCloudShellVnetSettings(settings: Settings, terminal: Terminal): Promise<VnetSettings> {
-    if (settings?.properties?.vnetSettings && Object.keys(settings.properties.vnetSettings).length > 0) {
-      try {
-        const netProfileInfo = await getNetworkProfileInfo<any>(settings.properties.vnetSettings.networkProfileResourceId);
-
-        terminal.writeln(terminalLog.header("Existing Network Configuration"));
-
-        const subnetId = netProfileInfo.properties.containerNetworkInterfaceConfigurations[0]
-        .properties.ipConfigurations[0].properties.subnet.id;
-        const vnetResourceId = subnetId.replace(/\/subnets\/[^/]+$/, '');
-
-        terminal.writeln(terminalLog.item("VNet", vnetResourceId));
-        terminal.writeln(terminalLog.item("Subnet", subnetId));
-        terminal.writeln(terminalLog.item("Location", settings.properties.vnetSettings.location));
-        terminal.writeln(terminalLog.item("Network Profile", settings.properties.vnetSettings.networkProfileResourceId));
-        terminal.writeln(terminalLog.item("Relay Namespace", settings.properties.vnetSettings.relayNamespaceResourceId));
-
-        return {
-          networkProfileResourceId: settings.properties.vnetSettings.networkProfileResourceId,
-          relayNamespaceResourceId: settings.properties.vnetSettings.relayNamespaceResourceId,
-          location: settings.properties.vnetSettings.location
-        };
-      } catch (err) {
-        terminal.writeln(terminalLog.warning("Error retrieving network profile. Will configure new network."));
-        return undefined;
-      }
-    }
-
-    return undefined;
-  }
-
-  /**
-   * Asks the user if they want to use existing network configuration (VNet or private endpoint)
-   */
-  public static async askForVNetConfigConsent(terminal: Terminal, shellType: TerminalKind = null): Promise<boolean> {
-    // Check if this shell type supports only private endpoints
-    const isPrivateEndpointOnlyShell = shellType === TerminalKind.VCoreMongo;
-    // Check if the database has private endpoints configured
-    const hasPrivateEndpoints = hasPrivateEndpointsRestrictions();
-    
-    // Determine which network type to mention based on shell type and database configuration
-    const networkType = isPrivateEndpointOnlyShell || hasPrivateEndpoints ? "private endpoint" : "network";
-    
-    // Ask for consent
-    terminal.writeln("");
-    terminal.writeln(terminalLog.prompt(`Use this existing ${networkType} configuration?`));
-    terminal.writeln(terminalLog.info(`Answering 'N' will configure a new ${networkType} for CloudShell`));
-
-    return await askConfirmation(terminal, `Press Y/N to continue...`);
-  }
-
-  /**
-   * Checks if the CloudShell VNet is already in the database configuration
-   */
-  public static async isCloudShellVNetInDatabaseConfig(vNetSettings: VnetSettings, terminal: Terminal): Promise<boolean> {
-    try {
-      terminal.writeln(terminalLog.subheader("Verifying if CloudShell VNet is configured in database"));
-
-      // Get the subnet ID from the CloudShell Network Profile
-      const netProfileInfo = await getNetworkProfileInfo<any>(vNetSettings.networkProfileResourceId);
-
-      if (!netProfileInfo?.properties?.containerNetworkInterfaceConfigurations?.[0]
-        ?.properties?.ipConfigurations?.[0]?.properties?.subnet?.id) {
-        terminal.writeln(terminalLog.warning("Could not retrieve subnet ID from CloudShell VNet"));
-        return false;
-      }
-
-      const cloudShellSubnetId = netProfileInfo.properties.containerNetworkInterfaceConfigurations[0]
-        .properties.ipConfigurations[0].properties.subnet.id;
-
-      terminal.writeln(terminalLog.item("CloudShell Subnet", cloudShellSubnetId.split('/').pop() || ""));
-
-      // Check if this subnet ID is in the database VNet rules
-      const dbAccount = userContext.databaseAccount;
-      if (!dbAccount?.properties?.virtualNetworkRules) {
-        return false;
-      }
-
-      const vnetRules = dbAccount.properties.virtualNetworkRules;
-
-      // Check if the CloudShell subnet is already in the rules
-      return vnetRules.some(rule => rule.id === cloudShellSubnetId);
-
-    } catch (err) {
-      terminal.writeln(terminalLog.error("Error checking database VNet configuration"));
-      return false;
-    }
-  }
-
-  /**
-   * Asks the user if they want to add the CloudShell VNet to the database configuration
-   */
-  public static async askToAddVNetToDatabase(terminal: Terminal, vNetSettings: VnetSettings): Promise<boolean> {
-    terminal.writeln("");
-    terminal.writeln(terminalLog.header("Network Configuration Mismatch"));
-    terminal.writeln(terminalLog.warning("Your CloudShell VNet is not in your database's allowed networks"));
-    terminal.writeln(terminalLog.warning("To connect from CloudShell, this VNet must be added to your database"));
-    
-    return await askConfirmation(terminal, "Add CloudShell VNet to database configuration?");
-  }
-
- /**
- * Adds the CloudShell VNet to the database configuration
- * Now supports both VNet rules and private endpoints
- */
-public static async addCloudShellVNetToDatabase(vNetSettings: VnetSettings, terminal: Terminal): Promise<void> {
-  try {
-    terminal.writeln(terminalLog.header("Updating database network configuration"));
-
-    // Step 1: Get the subnet ID from CloudShell Network Profile
-    const { cloudShellSubnetId, cloudShellVnetId } = await this.getCloudShellNetworkIds(vNetSettings, terminal);
-
-    // Step 2: Get current database account details
-    const { currentDbAccount } = await this.getDatabaseAccountDetails(terminal);
-
-    // Step 3: Determine if database uses private endpoints
-    const usesPrivateEndpoints = hasPrivateEndpointsRestrictions() || 
-                                (currentDbAccount.properties.privateEndpointConnections?.length > 0);
-    
-    // Log which networking mode we're using
-    if (usesPrivateEndpoints) {
-      terminal.writeln(terminalLog.info("Database is configured with private endpoints"));
-    } else {
-      terminal.writeln(terminalLog.info("Database is configured with VNet rules"));
-    }
-
-    // Step 4: Check if connection is already configured
-    if (usesPrivateEndpoints) {
-      if (await this.isPrivateEndpointAlreadyConfigured(cloudShellVnetId, currentDbAccount, terminal)) {
-        return;
-      }
-    } else {
-      if (await this.isVNetAlreadyConfigured(cloudShellSubnetId, currentDbAccount, terminal)) {
-        return;
-      }
-    }
-
-    // Step 5: Check network resource statuses and ongoing operations
-    const { vnetInfo, subnetInfo, operationInProgress } =
-      await this.checkNetworkResourceStatuses(cloudShellSubnetId, cloudShellVnetId, currentDbAccount.id, terminal);
-
-    // Step 6: If no operation in progress, update the configuration
-    if (!operationInProgress) {
-      if (usesPrivateEndpoints) {
-        // Create or update private endpoint configuration
-        await this.configurePrivateEndpoint(
-          cloudShellSubnetId, 
-          vnetInfo.location, 
-          currentDbAccount.id, 
-          terminal
-        );
-      } else {
-        // Enable CosmosDB service endpoint on subnet if needed (for VNet rules)
-        await this.enableCosmosDBServiceEndpoint(cloudShellSubnetId, subnetInfo, terminal);
-
-        // Update database account with VNet rule
-        await this.updateDatabaseWithVNetRule(currentDbAccount, cloudShellSubnetId, currentDbAccount.id, terminal);
-      }
-    } else {
-      terminal.writeln(terminalLog.info("Monitoring existing network operation..."));
-      // Step 7: Monitor the update progress
-      await this.monitorVNetAdditionProgress(cloudShellSubnetId, currentDbAccount.id, terminal);
-    }
-
-  } catch (err) {
-    terminal.writeln(terminalLog.error(`Error updating database network configuration: ${err.message}`));
-    throw err;
-  }
-}
-
-/**
- * Checks if a private endpoint is already configured for the CloudShell VNet
- */
-private static async isPrivateEndpointAlreadyConfigured(
-  cloudShellVnetId: string, 
-  currentDbAccount: any, 
-  terminal: Terminal
-): Promise<boolean> {
-  // Check if private endpoints exist and are properly configured for this VNet
-  const hasConfiguredEndpoint = currentDbAccount.properties.privateEndpointConnections?.some(
-    (connection: any) => {
-      const isApproved = connection.properties.privateLinkServiceConnectionState.status === 'Approved';
-      // We would need to check if the endpoint is in the CloudShell VNet
-      // For simplicity, we're assuming connection.properties.networkInterface contains this info
-      const endpointVNetId = connection.properties.networkInterface?.id?.split('/subnets/')[0];
-      return isApproved && endpointVNetId === cloudShellVnetId;
-    }
-  );
-
-  if (hasConfiguredEndpoint) {
-    terminal.writeln(terminalLog.success("CloudShell private endpoint is already configured"));
-    return true;
-  }
-
-  return false;
-}
-
-/**
- * Configures a private endpoint for the CloudShell VNet to connect to the database
- */
-private static async configurePrivateEndpoint(
-  cloudShellSubnetId: string,
-  vnetLocation: any,
-  dbAccountId: string,
-  terminal: Terminal
-): Promise<void> {
-  // Extract necessary information from IDs
-  const subnetIdParts = cloudShellSubnetId.split('/');
-  const subnetIndex = subnetIdParts.indexOf('subnets');
-  
-  const subnetName = subnetIdParts[subnetIndex + 1];
-  const resourceGroup = subnetIdParts[4];
-  const subscriptionId = subnetIdParts[2];
-  
-  // Generate a unique name for the private endpoint
-  const privateEndpointName = `pe-cloudshell-cosmos-${Math.floor(10000 + Math.random() * 90000)}`;
-  
-  terminal.writeln(terminalLog.subheader("Creating private endpoint for CloudShell"));
-  terminal.writeln(terminalLog.item("Private Endpoint Name", privateEndpointName));
-  terminal.writeln(terminalLog.item("Target Subnet", subnetName));
-  
-  // Construct the private endpoint creation payload
-  const privateEndpointPayload = {
-    location: vnetLocation,
-    properties: {
-      privateLinkServiceConnections: [
-        {
-          name: privateEndpointName,
-          properties: {
-            privateLinkServiceId: dbAccountId,
-            groupIds: [
-                "MongoDB"
-            ],
-            requestMessage: "CloudShell connectivity request"
-          },
-          type: "Microsoft.Network/privateEndpoints/privateLinkServiceConnections"
-        }
-      ],
-      subnet: {
-        id: cloudShellSubnetId
-      }
-    }
-  };
-  
-  // Send the request to create the private endpoint
-  // Note: This is a placeholder - we would need to implement this API call
-  terminal.writeln(terminalLog.info("Submitting private endpoint creation request"));
-  
-  try {
-    const privateEndpointUrl = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.Network/privateEndpoints/${privateEndpointName}`;
-    
-    await createPrivateEndpoint(privateEndpointUrl, privateEndpointPayload, "2024-05-01");
-    
-    terminal.writeln(terminalLog.success("Private endpoint creation request submitted"));
-    terminal.writeln(terminalLog.warning("Please approve the private endpoint connection in the Azure portal"));
-    terminal.writeln(terminalLog.info("Note: Private endpoint operations may take several minutes to complete"));
-  } catch (err) {
-    terminal.writeln(terminalLog.error(`Failed to create private endpoint: ${err.message}`));
-    throw err;
-  }
-}
-  /**
-   * Gets the subnet and VNet IDs from CloudShell Network Profile
-   */
-  private static async getCloudShellNetworkIds(vNetSettings: VnetSettings, terminal: Terminal): Promise<{ cloudShellSubnetId: string; cloudShellVnetId: string }> {
-    const netProfileInfo = await getNetworkProfileInfo<any>(vNetSettings.networkProfileResourceId);
-
-    if (!netProfileInfo?.properties?.containerNetworkInterfaceConfigurations?.[0]
-      ?.properties?.ipConfigurations?.[0]?.properties?.subnet?.id) {
-      throw new Error("Could not retrieve subnet ID from CloudShell VNet");
-    }
-
-    const cloudShellSubnetId = netProfileInfo.properties.containerNetworkInterfaceConfigurations[0]
-      .properties.ipConfigurations[0].properties.subnet.id;
-
-    // Extract VNet ID from subnet ID
-    const cloudShellVnetId = cloudShellSubnetId.substring(0, cloudShellSubnetId.indexOf('/subnets/'));
-
-    terminal.writeln(terminalLog.subheader("Identified CloudShell network resources"));
-    terminal.writeln(terminalLog.item("Subnet", cloudShellSubnetId.split('/').pop() || ""));
-    terminal.writeln(terminalLog.item("VNet", cloudShellVnetId.split('/').pop() || ""));
-
-    return { cloudShellSubnetId, cloudShellVnetId };
-  }
-
-  /**
-   * Gets the database account details
-   */
-  private static async getDatabaseAccountDetails(terminal: Terminal): Promise<{ currentDbAccount: any }> {
-    const dbAccount = userContext.databaseAccount;
-    terminal.writeln(terminalLog.database("Verifying current configuration"));
-    const currentDbAccount = await getAccountDetails(dbAccount.id);
-
-    return { currentDbAccount };
-  }
-
-  /**
-   * Checks if the VNet is already configured in the database
-   */
-  private static async isVNetAlreadyConfigured(cloudShellSubnetId: string, currentDbAccount: any, terminal: Terminal): Promise<boolean> {
-    const vnetAlreadyConfigured = currentDbAccount.properties.virtualNetworkRules &&
-      currentDbAccount.properties.virtualNetworkRules.some(
-        (rule: any) => rule.id === cloudShellSubnetId
-      );
-
-    if (vnetAlreadyConfigured) {
-      terminal.writeln(terminalLog.success("CloudShell VNet is already in database configuration"));
-      return true;
-    }
-
-    return false;
-  }
-
-  /**
-   * Checks the status of network resources and ongoing operations
-   */
-  private static async checkNetworkResourceStatuses(
-    cloudShellSubnetId: string,
-    cloudShellVnetId: string,
-    dbAccountId: string,
-    terminal: Terminal
-  ): Promise<{ vnetInfo: any; subnetInfo: any; operationInProgress: boolean }> {
-    terminal.writeln(terminalLog.subheader("Checking network resource status"));
-
-    let operationInProgress = false;
-    let vnetInfo: any = null;
-    let subnetInfo: any = null;
-
-    if (cloudShellVnetId && cloudShellSubnetId) {
-      // Get VNet and subnet resource status
-      vnetInfo = await getVnetInformation<any>(cloudShellVnetId);
-      subnetInfo = await getSubnetInformation<any>(cloudShellSubnetId);
-
-      // Check if there's an ongoing operation on the VNet or subnet
-      const vnetProvisioningState = vnetInfo?.properties?.provisioningState;
-      const subnetProvisioningState = subnetInfo?.properties?.provisioningState;
-
-      if (vnetProvisioningState !== 'Succeeded' && vnetProvisioningState !== 'Failed') {
-        terminal.writeln(terminalLog.warning(`VNet operation in progress: ${vnetProvisioningState}`));
-        operationInProgress = true;
-      }
-
-      if (subnetProvisioningState !== 'Succeeded' && subnetProvisioningState !== 'Failed') {
-        terminal.writeln(terminalLog.warning(`Subnet operation in progress: ${subnetProvisioningState}`));
-        operationInProgress = true;
-      }
-
-      // Also check database operations
-      const latestDbAccount = await getAccountDetails<any>(dbAccountId);
-
-      if (latestDbAccount.properties.virtualNetworkRules) {
-        const isPendingAdd = latestDbAccount.properties.virtualNetworkRules.some(
-          (rule: any) => rule.id === cloudShellSubnetId && rule.status === 'Updating'
-        );
-
-        if (isPendingAdd) {
-          terminal.writeln(terminalLog.warning("CloudShell VNet addition to database is already in progress"));
-          operationInProgress = true;
-        }
-      }
-    }
-
-    return { vnetInfo, subnetInfo, operationInProgress };
-  }
-
-  /**
-   * Enables the CosmosDB service endpoint on a subnet if needed
-   */
-  private static async enableCosmosDBServiceEndpoint(cloudShellSubnetId: string, subnetInfo: any, terminal: Terminal): Promise<void> {
-    if (!subnetInfo) {
-      terminal.writeln(terminalLog.warning("Unable to check subnet endpoint configuration"));
-      return;
-    }
-
-    terminal.writeln(terminalLog.subheader("Checking and configuring CosmosDB service endpoint"));
-
-    // Parse the subnet ID to get resource information
-    const subnetIdParts = cloudShellSubnetId.split('/');
-    const subnetIndex = subnetIdParts.indexOf('subnets');
-    if (subnetIndex > 0) {
-      const subnetName = subnetIdParts[subnetIndex + 1];
-      const vnetName = subnetIdParts[subnetIndex - 1];
-      const resourceGroup = subnetIdParts[4];
-      const subscriptionId = subnetIdParts[2];
-
-      // Get the subnet URL
-      const subnetUrl = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.Network/virtualNetworks/${vnetName}/subnets/${subnetName}`;
-
-      // Check if CosmosDB service endpoint is already enabled
-      const hasCosmosDBEndpoint = subnetInfo.properties.serviceEndpoints &&
-        subnetInfo.properties.serviceEndpoints.some(
-          (endpoint: any) => endpoint.service === 'Microsoft.AzureCosmosDB'
-        );
-
-      if (!hasCosmosDBEndpoint) {
-        terminal.writeln(terminalLog.warning("Enabling CosmosDB service endpoint on subnet..."));
-
-        // Create update payload with CosmosDB service endpoint
-        const serviceEndpoints = [
-          ...(subnetInfo.properties.serviceEndpoints || []),
-          { service: 'Microsoft.AzureCosmosDB' }
-        ];
-
-        // Update the subnet configuration while preserving existing properties
-        const subnetUpdatePayload = {
-          ...subnetInfo,
-          properties: {
-            ...subnetInfo.properties,
-            serviceEndpoints: serviceEndpoints
-          }
-        };
-
-        // Apply the subnet update
-        await updateSubnetInformation(subnetUrl, subnetUpdatePayload);
-
-        // Wait for the subnet update to complete
-        let subnetUpdateComplete = false;
-        let subnetRetryCount = 0;
-
-        while (!subnetUpdateComplete && subnetRetryCount < MAX_RETRY_COUNT) {
-          const updatedSubnet = await getSubnetInformation<any>(subnetUrl);
-
-          const endpointEnabled = updatedSubnet.properties.serviceEndpoints &&
-            updatedSubnet.properties.serviceEndpoints.some(
-              (endpoint: any) => endpoint.service === 'Microsoft.AzureCosmosDB'
-            );
-
-          if (endpointEnabled && updatedSubnet.properties.provisioningState === 'Succeeded') {
-            subnetUpdateComplete = true;
-            terminal.writeln(terminalLog.success("CosmosDB service endpoint enabled successfully"));
-          } else {
-            subnetRetryCount++;
-            terminal.writeln(terminalLog.progress("Subnet update", `Waiting (${subnetRetryCount}/${MAX_RETRY_COUNT})`));
-            await wait(POLLING_INTERVAL_MS);
-          }
-        }
-
-        if (!subnetUpdateComplete) {
-          throw new Error("Failed to enable CosmosDB service endpoint on subnet");
-        }
-      } else {
-        terminal.writeln(terminalLog.success("CosmosDB service endpoint is already enabled"));
-      }
-    }
-  }
-
-  /**
-   * Updates the database account with a new VNet rule
-   */
-  private static async updateDatabaseWithVNetRule(currentDbAccount: any, cloudShellSubnetId: string, dbAccountId: string, terminal: Terminal): Promise<void> {
-    // Create a deep copy of the current database account
-    const updatePayload = JSON.parse(JSON.stringify(currentDbAccount));
-
-    // Update only the network-related properties
-    updatePayload.properties.virtualNetworkRules = [
-      ...(currentDbAccount.properties.virtualNetworkRules || []),
-      { id: cloudShellSubnetId, ignoreMissingVNetServiceEndpoint: false }
-    ];
-    updatePayload.properties.isVirtualNetworkFilterEnabled = true;
-
-    // Update the database account
-    terminal.writeln(terminalLog.subheader("Submitting VNet update request to database"));
-    await updateDatabaseAccount(dbAccountId, updatePayload);
-    terminal.writeln(terminalLog.success("Updated Database account with Cloud Shell Vnet"));
-  }
-
-  /**
-   * Monitors the progress of adding a VNet to the database account
-   */
-  private static async monitorVNetAdditionProgress(cloudShellSubnetId: string, dbAccountId: string, terminal: Terminal): Promise<void> {
-    let updateComplete = false;
-    let retryCount = 0;
-    let lastStatus = "";
-    let lastProgress = 0;
-    let lastOpId = "";
-
-    terminal.writeln(terminalLog.subheader("Monitoring database update progress"));
-
-    while (!updateComplete && retryCount < MAX_RETRY_COUNT) {
-      // Check if the VNet is now in the database account 
-      const updatedDbAccount = await getAccountDetails<any>(dbAccountId);
-      
-      const isVNetAdded = updatedDbAccount.properties.virtualNetworkRules?.some(
-        (rule: any) => rule.id === cloudShellSubnetId && (!rule.status || rule.status === 'Succeeded')
-      );
-      
-      if (isVNetAdded) {
-        updateComplete = true;
-        terminal.writeln(terminalLog.success("CloudShell VNet successfully added to database configuration"));
-        break;
-      }
-      
-      // If not yet added, check for operation progress
-      const operations = await getDatabaseOperations<any>(dbAccountId);
-      
-      // Find network-related operations
-      const networkOps = operations.value?.filter(
-        (op: any) => 
-        (op.properties.description?.toLowerCase().includes('network') ||
-          op.properties.description?.toLowerCase().includes('vnet'))
-      ) || [];
-      
-      // Find active operations
-      const activeOp = networkOps.find((op: any) => op.properties.status === 'InProgress');
-      
-      if (activeOp) {
-        // Show progress details if available
-        const currentStatus = activeOp.properties.status;
-        const progress = activeOp.properties.percentComplete || 0;
-        const opId = activeOp.name;
-        
-        // Only update the terminal if something has changed
-        if (currentStatus !== lastStatus || progress !== lastProgress || opId !== lastOpId) {
-          // Create a progress bar
-          const progressBarLength = 20;
-          const filledLength = Math.floor(progress / 100 * progressBarLength);
-          const progressBar = "█".repeat(filledLength) + "░".repeat(progressBarLength - filledLength);
-          
-          terminal.writeln(`\x1B[34m  [${progressBar}] ${progress}% - ${currentStatus}\x1B[0m`);
-          lastStatus = currentStatus;
-          lastProgress = progress;
-          lastOpId = opId;
-        }
-      } else if (networkOps.length > 0) {
-        // If there are completed operations, show their status
-        const lastCompletedOp = networkOps[0];
-        
-        if (lastCompletedOp.properties.status !== lastStatus) {
-          terminal.writeln(terminalLog.progress("Operation status", lastCompletedOp.properties.status));
-          lastStatus = lastCompletedOp.properties.status;
-        }
-      }
-      
-      retryCount++;
-      await wait(POLLING_INTERVAL_MS);
-    }
-    
-    if (!updateComplete) {
-      terminal.writeln(terminalLog.warning("Database update timed out. Please check the Azure portal."));
-    }
-  }
-
-  /**
-   * Configures a new VNet for CloudShell
-   */
-  public static async configureCloudShellVNet(terminal: Terminal, resolvedRegion: string): Promise<VnetSettings> {
-    // Use professional and shorter names for resources
-    const randomSuffix = Math.floor(10000 + Math.random() * 90000);
-
-    const subnetName = `cloudshell-subnet-${randomSuffix}`;
-    const vnetName = `cloudshell-vnet-${randomSuffix}`;
-    const networkProfileName = `cloudshell-network-profile-${randomSuffix}`;
-    const relayName = `cloudshell-relay-${randomSuffix}`;
-
-    terminal.writeln(terminalLog.header("Network Resource Configuration"));
-
-    const azureContainerInstanceOID = await askQuestion(
-      terminal,
-      "Enter Azure Container Instance OID (Refer. https://learn.microsoft.com/en-us/azure/cloud-shell/vnet/deployment#get-the-azure-container-instance-id)",
-      DEFAULT_CONTAINER_INSTANCE_OID
-    );
-
-    const vNetSubscriptionId = await askQuestion(
-      terminal,
-      "Enter Virtual Network Subscription ID",
-      userContext.subscriptionId
-    );
-
-    const vNetResourceGroup = await askQuestion(
-      terminal,
-      "Enter Virtual Network Resource Group",
-      userContext.resourceGroup
-    );
-
-    // Step 1: Create VNet with Subnet
-    terminal.writeln(terminalLog.header("Deploying Network Resources"));
-    const vNetConfigPayload = await this.createCloudShellVnet(
-      resolvedRegion,
-      subnetName,
-      terminal,
-      vnetName,
-      vNetSubscriptionId,
-      vNetResourceGroup
-    );
-
-    // Step 2: Create Network Profile
-    await this.createNetworkProfileWithVnet(
-      vNetSubscriptionId,
-      vNetResourceGroup,
-      vnetName,
-      subnetName,
-      resolvedRegion,
-      terminal,
-      networkProfileName
-    );
-
-    // Step 3: Create Network Relay
-    await this.createNetworkRelay(
-      resolvedRegion,
-      terminal,
-      relayName,
-      vNetSubscriptionId,
-      vNetResourceGroup
-    );
-
-    // Step 4: Assign Roles
-    terminal.writeln(terminalLog.header("Configuring Security Permissions"));
-    await this.assignRoleToNetworkProfile(
-      azureContainerInstanceOID,
-      vNetSubscriptionId,
-      terminal,
-      networkProfileName,
-      vNetResourceGroup
-    );
-
-    await this.assignRoleToRelay(
-      azureContainerInstanceOID,
-      vNetSubscriptionId,
-      terminal,
-      relayName,
-      vNetResourceGroup
-    );
-
-    // Step 5: Create and return VNet settings
-    const networkProfileResourceId = `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Network/networkProfiles/${networkProfileName.replace(/[\n\r]/g, "")}`;
-    const relayResourceId = `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Relay/namespaces/${relayName.replace(/[\n\r]/g, "")}`;
-
-    terminal.writeln(terminalLog.success("Network configuration complete"));
-
-    return {
-      networkProfileResourceId,
-      relayNamespaceResourceId: relayResourceId,
-      location: vNetConfigPayload.location
-    };
-  }
-
-  /**
-   * Creates a VNet for CloudShell
-   */
-  private static async createCloudShellVnet(
-    resolvedRegion: string,
-    subnetName: string,
-    terminal: Terminal,
-    vnetName: string,
-    vNetSubscriptionId: string,
-    vNetResourceGroup: string
-  ): Promise<any> {
-    const vNetConfigPayload = {
-      location: resolvedRegion,
-      properties: {
-        addressSpace: {
-          addressPrefixes: [DEFAULT_VNET_ADDRESS_PREFIX],
-        },
-        subnets: [
-          {
-            name: subnetName,
-            properties: {
-              addressPrefix: DEFAULT_SUBNET_ADDRESS_PREFIX,
-              delegations: [
-                {
-                  name: "CloudShellDelegation",
-                  properties: {
-                    serviceName: "Microsoft.ContainerInstance/containerGroups"
-                  }
-                }
-              ],
-            },
-          },
-        ],
-      },
-    };
-
-    terminal.writeln(terminalLog.vnet(`Creating VNet: ${vnetName}`));
-    let vNetResponse = await updateVnet<any>(
-      `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Network/virtualNetworks/${vnetName}`,
-      vNetConfigPayload
-    );
-
-    while (vNetResponse?.properties?.provisioningState !== "Succeeded") {
-      vNetResponse = await getVnet<any>(
-        `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Network/virtualNetworks/${vnetName}`
-      );
-
-      const vNetState = vNetResponse?.properties?.provisioningState;
-      if (vNetState !== "Succeeded" && vNetState !== "Failed") {
-        await wait(POLLING_INTERVAL_MS);
-        terminal.writeln(terminalLog.progress("VNet deployment", vNetState));
-      } else {
-        break;
-      }
-    }
-
-    terminal.writeln(terminalLog.success("VNet created successfully"));
-    return vNetConfigPayload;
-  }
-
-  /**
-   * Creates a Network Profile for CloudShell
-   */
-  private static async createNetworkProfileWithVnet(
-    vNetSubscriptionId: string,
-    vNetResourceGroup: string,
-    vnetName: string,
-    subnetName: string,
-    resolvedRegion: string,
-    terminal: Terminal,
-    networkProfileName: string
-  ): Promise<void> {
-    const subnetId = `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Network/virtualNetworks/${vnetName}/subnets/${subnetName}`;
-
-    const createNetworkProfilePayload = {
-      location: resolvedRegion,
-      properties: {
-        containerNetworkInterfaceConfigurations: [
-          {
-            name: 'defaultContainerNicConfig',
-            properties: {
-              ipConfigurations: [
-                {
-                  name: 'defaultContainerIpConfig',
-                  properties: {
-                    subnet: {
-                      id: subnetId,
-                    }
-                  }
-                }
-              ]
-            }
-          }
-        ]
-      }
-    };
-
-    terminal.writeln(terminalLog.vnet("Creating Network Profile"));
-    let networkProfileResponse = await createNetworkProfile<any>(
-      `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Network/networkProfiles/${networkProfileName}`,
-      createNetworkProfilePayload
-    );
-
-    while (networkProfileResponse?.properties?.provisioningState !== "Succeeded") {
-      networkProfileResponse = await getNetworkProfileInfo<any>(
-        `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Network/networkProfiles/${networkProfileName}`
-      );
-
-      const networkProfileState = networkProfileResponse?.properties?.provisioningState;
-      if (networkProfileState !== "Succeeded" && networkProfileState !== "Failed") {
-        await wait(POLLING_INTERVAL_MS);
-        terminal.writeln(terminalLog.progress("Network Profile", networkProfileState));
-      } else {
-        break;
-      }
-    }
-
-    terminal.writeln(terminalLog.success("Network Profile created successfully"));
-  }
-
-  /**
-   * Creates a Network Relay for CloudShell
-   */
-  private static async createNetworkRelay(
-    resolvedRegion: string,
-    terminal: Terminal,
-    relayName: string,
-    vNetSubscriptionId: string,
-    vNetResourceGroup: string
-  ): Promise<void> {
-    const relayPayload = {
-      location: resolvedRegion,
-      sku: {
-        name: STANDARD_SKU,
-        tier: STANDARD_SKU,
-      }
-    };
-
-    terminal.writeln(terminalLog.vnet("Creating Relay Namespace"));
-    let relayResponse = await createRelay<any>(
-      `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Relay/namespaces/${relayName}`,
-      relayPayload
-    );
-
-    while (relayResponse?.properties?.provisioningState !== "Succeeded") {
-      relayResponse = await getRelay<any>(
-        `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Relay/namespaces/${relayName}`
-      );
-
-      const relayState = relayResponse?.properties?.provisioningState;
-      if (relayState !== "Succeeded" && relayState !== "Failed") {
-        await wait(POLLING_INTERVAL_MS);
-        terminal.writeln(terminalLog.progress("Relay Namespace", relayState));
-      } else {
-        break;
-      }
-    }
-
-    terminal.writeln(terminalLog.success("Relay Namespace created successfully"));
-  }
-
-  /**
-   * Assigns a role to a Network Profile
-   */
-  private static async assignRoleToNetworkProfile(
-    azureContainerInstanceOID: string,
-    vNetSubscriptionId: string,
-    terminal: Terminal,
-    networkProfileName: string,
-    vNetResourceGroup: string
-  ): Promise<void> {
-    const nfRoleName = uuidv4();
-    const networkProfileRoleAssignmentPayload = {
-      properties: {
-        principalId: azureContainerInstanceOID,
-        roleDefinitionId: `/subscriptions/${vNetSubscriptionId}/providers/Microsoft.Authorization/roleDefinitions/4d97b98b-1d4f-4787-a291-c67834d212e7`
-      }
-    };
-
-    terminal.writeln(terminalLog.info("Assigning permissions to Network Profile"));
-    await createRoleOnNetworkProfile<any>(
-      `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Network/networkProfiles/${networkProfileName}/providers/Microsoft.Authorization/roleAssignments/${nfRoleName}`,
-      networkProfileRoleAssignmentPayload
-    );
-
-    terminal.writeln(terminalLog.success("Network Profile permissions assigned"));
-  }
-
-  /**
-   * Assigns a role to a Network Relay
-   */
-  private static async assignRoleToRelay(
-    azureContainerInstanceOID: string,
-    vNetSubscriptionId: string,
-    terminal: Terminal,
-    relayName: string,
-    vNetResourceGroup: string
-  ): Promise<void> {
-    const relayRoleName = uuidv4();
-    const relayRoleAssignmentPayload = {
-      properties: {
-        principalId: azureContainerInstanceOID,
-        roleDefinitionId: `/subscriptions/${vNetSubscriptionId}/providers/Microsoft.Authorization/roleDefinitions/b24988ac-6180-42a0-ab88-20f7382dd24c`,
-      }
-    };
-
-    terminal.writeln(terminalLog.info("Assigning permissions to Relay Namespace"));
-    await createRoleOnRelay<any>(
-      `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Relay/namespaces/${relayName}/providers/Microsoft.Authorization/roleAssignments/${relayRoleName}`,
-      relayRoleAssignmentPayload
-    );
-
-    terminal.writeln(terminalLog.success("Relay Namespace permissions assigned"));
-  }
-}

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

@@ -1,80 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Cassandra shell type handler
- */
-
-import { Terminal } from "xterm";
-import { TerminalKind } from "../../../../Contracts/ViewModels";
-import { userContext } from "../../../../UserContext";
-import { listKeys } from "../../../../Utils/arm/generatedClients/cosmos/databaseAccounts";
-import { setShellType } from "../Data/CloudShellApiClient";
-import { NetworkAccessHandler } from "../Network/NetworkAccessHandler";
-import { getHostFromUrl } from "../Utils/CommonUtils";
-import { ShellTypeConfig } from "./ShellTypeFactory";
-
-export class CassandraShellHandler implements ShellTypeConfig {
-  private shellType: TerminalKind = TerminalKind.Cassandra;
-
-  constructor() {
-    setShellType(this.shellType);
-  }
-
-  public getShellName(): string {
-    return "Cassandra";
-  }
-
-  public async getInitialCommands(): Promise<string> {
-    const dbAccount = userContext.databaseAccount;
-    const endpoint = dbAccount.properties.cassandraEndpoint;
-    
-    // Get database key
-    const dbName = dbAccount.name;
-    let key = "";
-    if (dbName) {
-      const keys = await listKeys(userContext.subscriptionId, userContext.resourceGroup, dbName);
-      key = keys?.primaryMasterKey || "";
-    }
-
-    const config = {
-      host: getHostFromUrl(endpoint),
-      name: dbAccount.name,
-      password: key,
-      endpoint: endpoint
-    };
-
-    return this.getCommands(config).join("\n").concat("\n");
-  }
-
-  public async configureNetworkAccess(terminal: Terminal, region: string): Promise<{
-    vNetSettings: any;
-    isAllPublicAccessEnabled: boolean;
-  }> {
-    return await NetworkAccessHandler.configureNetworkAccess(terminal, region, this.shellType);
-  }
-
-  private getCommands(config: any): string[] {
-    return [
-      // 1. Fetch and display location details in a readable format
-      "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
-      // 2. Check if cqlsh is installed; if not, proceed with installation
-      "if ! command -v cqlsh &> /dev/null; then echo '⚠️ cqlsh not found. Installing...'; fi",
-      // 3. Download Cassandra if not installed
-      "if ! command -v cqlsh &> /dev/null; then curl -LO https://archive.apache.org/dist/cassandra/5.0.3/apache-cassandra-5.0.3-bin.tar.gz; fi",
-      // 4. Extract Cassandra package if not installed
-      "if ! command -v cqlsh &> /dev/null; then tar -xvzf apache-cassandra-5.0.3-bin.tar.gz; fi",
-      // 5. Move Cassandra binaries if not installed
-      "if ! command -v cqlsh &> /dev/null; then mkdir -p ~/cassandra && mv apache-cassandra-5.0.3/* ~/cassandra/; fi",
-      // 6. Add Cassandra to PATH if not installed
-      "if ! command -v cqlsh &> /dev/null; then echo 'export PATH=$HOME/cassandra/bin:$PATH' >> ~/.bashrc; fi",
-      // 7. Set environment variables for SSL
-      "if ! command -v cqlsh &> /dev/null; then echo 'export SSL_VERSION=TLSv1_2' >> ~/.bashrc; fi",
-      "if ! command -v cqlsh &> /dev/null; then echo 'export SSL_VALIDATE=false' >> ~/.bashrc; fi",
-      // 8. Source .bashrc to update PATH (even if cqlsh was already installed)
-      "source ~/.bashrc",
-      // 9. Verify cqlsh installation
-      "cqlsh --version",
-      // 10. Login to Cassandra
-      `cqlsh ${config.host} 10350 -u ${config.name} -p ${config.password} --ssl --protocol-version=4`
-    ];
-  }
-}

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

@@ -1,77 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Mongo shell type handler
- */
-
-import { Terminal } from "xterm";
-import { TerminalKind } from "../../../../Contracts/ViewModels";
-import { userContext } from "../../../../UserContext";
-import { listKeys } from "../../../../Utils/arm/generatedClients/cosmos/databaseAccounts";
-import { setShellType } from "../Data/CloudShellApiClient";
-import { NetworkAccessHandler } from "../Network/NetworkAccessHandler";
-import { getHostFromUrl } from "../Utils/CommonUtils";
-import { ShellTypeConfig } from "./ShellTypeFactory";
-
-export class MongoShellHandler implements ShellTypeConfig {
-  private shellType: TerminalKind = TerminalKind.Mongo;
-
-  constructor() {
-    setShellType(this.shellType);
-  }
-
-  public getShellName(): string {
-    return "MongoDB";
-  }
-
-  public async getInitialCommands(): Promise<string> {
-    const dbAccount = userContext.databaseAccount;
-    const endpoint = dbAccount.properties.mongoEndpoint;
-    
-    // Get database key
-    const dbName = dbAccount.name;
-    let key = "";
-    if (dbName) {
-      const keys = await listKeys(userContext.subscriptionId, userContext.resourceGroup, dbName);
-      key = keys?.primaryMasterKey || "";
-    }
-
-    const config = {
-      host: getHostFromUrl(endpoint),
-      name: dbAccount.name,
-      password: key,
-      endpoint: endpoint
-    };
-
-    return this.getCommands(config).join("\n").concat("\n");
-  }
-
-  public async configureNetworkAccess(terminal: Terminal, region: string): Promise<{
-    vNetSettings: any;
-    isAllPublicAccessEnabled: boolean;
-  }> {
-    return await NetworkAccessHandler.configureNetworkAccess(terminal, region, this.shellType);
-  }
-
-  private getCommands(config: any): string[] {
-    return [
-      // 1. Fetch and display location details in a readable format
-      "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
-      // 2. Check if mongosh is installed; if not, proceed with installation
-      "if ! command -v mongosh &> /dev/null; then echo '⚠️ mongosh not found. Installing...'; fi",
-      // 3. Download mongosh if not installed
-      "if ! command -v mongosh &> /dev/null; then curl -LO https://downloads.mongodb.com/compass/mongosh-2.3.8-linux-x64.tgz; fi",
-      // 4. Extract mongosh package if not installed
-      "if ! command -v mongosh &> /dev/null; then tar -xvzf mongosh-2.3.8-linux-x64.tgz; fi",
-      // 5. Move mongosh binaries if not installed
-      "if ! command -v mongosh &> /dev/null; then mkdir -p ~/mongosh && mv mongosh-2.3.8-linux-x64/* ~/mongosh/; fi",
-      // 6. Add mongosh to PATH if not installed
-      "if ! command -v mongosh &> /dev/null; then echo 'export PATH=$HOME/mongosh/bin:$PATH' >> ~/.bashrc; fi",
-      // 7. Source .bashrc to update PATH (even if mongosh was already installed)
-      "source ~/.bashrc",
-      // 8. Verify mongosh installation
-      "mongosh --version",
-      // 9. Login to MongoDB
-      `mongosh --host ${config.host} --port 10255 --username ${config.name} --password ${config.password} --tls --tlsAllowInvalidCertificates`
-    ];
-  }
-}

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

@@ -1,82 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * PostgreSQL shell type handler
- */
-
-import { Terminal } from "xterm";
-import { TerminalKind } from "../../../../Contracts/ViewModels";
-import { userContext } from "../../../../UserContext";
-import { listKeys } from "../../../../Utils/arm/generatedClients/cosmos/databaseAccounts";
-import { setShellType } from "../Data/CloudShellApiClient";
-import { NetworkAccessHandler } from "../Network/NetworkAccessHandler";
-import { getHostFromUrl } from "../Utils/CommonUtils";
-import { ShellTypeConfig } from "./ShellTypeFactory";
-
-export class PostgresShellHandler implements ShellTypeConfig {
-  private shellType: TerminalKind = TerminalKind.Postgres;
-
-  constructor() {
-    setShellType(this.shellType);
-  }
-
-  public getShellName(): string {
-    return "PostgreSQL";
-  }
-
-  public async getInitialCommands(): Promise<string> {
-    const dbAccount = userContext.databaseAccount;
-    const endpoint = dbAccount.properties.postgresqlEndpoint;
-    
-    // Get database key
-    const dbName = dbAccount.name;
-    let key = "";
-    if (dbName) {
-      const keys = await listKeys(userContext.subscriptionId, userContext.resourceGroup, dbName);
-      key = keys?.primaryMasterKey || "";
-    }
-
-    const config = {
-      host: getHostFromUrl(endpoint),
-      name: dbAccount.name,
-      password: key,
-      endpoint: endpoint
-    };
-
-    return this.getCommands(config).join("\n").concat("\n");
-  }
-
-  public async configureNetworkAccess(terminal: Terminal, region: string): Promise<{
-    vNetSettings: any;
-    isAllPublicAccessEnabled: boolean;
-  }> {
-    return await NetworkAccessHandler.configureNetworkAccess(terminal, region, this.shellType);
-  }
-
-  private getCommands(config: any): string[] {
-    return [
-      // 1. Fetch and display location details in a readable format
-      "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
-      // 2. Check if psql is installed; if not, proceed with installation
-      "if ! command -v psql &> /dev/null; then echo '⚠️ psql not found. Installing...'; fi",
-      // 3. Download PostgreSQL if not installed
-      "if ! command -v psql &> /dev/null; then curl -LO https://ftp.postgresql.org/pub/source/v15.2/postgresql-15.2.tar.bz2; fi",
-      // 4. Extract PostgreSQL package if not installed
-      "if ! command -v psql &> /dev/null; then tar -xvjf postgresql-15.2.tar.bz2; fi",
-      // 5. Create a directory for PostgreSQL installation if not installed
-      "if ! command -v psql &> /dev/null; then mkdir -p ~/pgsql; fi",
-      // 6. Download readline (dependency for PostgreSQL) if not installed
-      "if ! command -v psql &> /dev/null; then curl -LO https://ftp.gnu.org/gnu/readline/readline-8.1.tar.gz; fi",
-      // 7. Extract readline package if not installed
-      "if ! command -v psql &> /dev/null; then tar -xvzf readline-8.1.tar.gz; fi",
-      // 8. Configure readline if not installed
-      "if ! command -v psql &> /dev/null; then cd readline-8.1 && ./configure --prefix=$HOME/pgsql; fi",
-      // 9. Add PostgreSQL to PATH if not installed
-      "if ! command -v psql &> /dev/null; then echo 'export PATH=$HOME/pgsql/bin:$PATH' >> ~/.bashrc; fi",
-      // 10. Source .bashrc to update PATH (even if psql was already installed)
-      "source ~/.bashrc",
-      // 11. Verify PostgreSQL installation
-      "psql --version",
-      `psql 'read -p "Enter Database Name: " dbname && read -p "Enter Username: " username && host=${config.endpoint} port=5432 dbname=$dbname user=$username sslmode=require'`
-    ];
-  }
-}

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

@@ -1,57 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Factory for creating shell type handlers
- */
-
-import { Terminal } from "xterm";
-import { TerminalKind } from "../../../../Contracts/ViewModels";
-import { CassandraShellHandler } from "./CassandraShellHandler";
-import { MongoShellHandler } from "./MongoShellHandler";
-import { PostgresShellHandler } from "./PostgresShellHandler";
-import { VCoreMongoShellHandler } from "./VCoreMongoShellHandler";
-
-export interface ShellTypeConfig {
-  getShellName(): string;
-  getInitialCommands(): Promise<string>;
-  configureNetworkAccess(terminal: Terminal, region: string): Promise<{
-    vNetSettings: any;
-    isAllPublicAccessEnabled: boolean;
-  }>;
-}
-
-export class ShellTypeHandler {
-  /**
-   * Gets the appropriate handler for the given shell type
-   */
-  public static getHandler(shellType: TerminalKind): ShellTypeConfig {
-    switch (shellType) {
-      case TerminalKind.Postgres:
-        return new PostgresShellHandler();
-      case TerminalKind.Mongo:
-        return new MongoShellHandler();
-      case TerminalKind.VCoreMongo:
-        return new VCoreMongoShellHandler();
-      case TerminalKind.Cassandra:
-        return new CassandraShellHandler();
-      default:
-        throw new Error(`Unsupported shell type: ${shellType}`);
-    }
-  }
-
-  /**
-   * Gets the display name for a shell type
-   */
-  public static getShellNameForDisplay(terminalKind: TerminalKind): string {
-    switch (terminalKind) {
-      case TerminalKind.Postgres:
-        return "PostgreSQL";
-      case TerminalKind.Mongo:
-      case TerminalKind.VCoreMongo:
-        return "MongoDB";
-      case TerminalKind.Cassandra:
-        return "Cassandra";
-      default:
-        return "";
-    }
-  }
-}

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

@@ -1,78 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * VCore MongoDB shell type handler
- */
-
-import { Terminal } from "xterm";
-import { TerminalKind } from "../../../../Contracts/ViewModels";
-import { userContext } from "../../../../UserContext";
-import { listKeys } from "../../../../Utils/arm/generatedClients/cosmos/databaseAccounts";
-import { setShellType } from "../Data/CloudShellApiClient";
-import { NetworkAccessHandler } from "../Network/NetworkAccessHandler";
-import { getHostFromUrl } from "../Utils/CommonUtils";
-import { ShellTypeConfig } from "./ShellTypeFactory";
-
-export class VCoreMongoShellHandler implements ShellTypeConfig {
-  private shellType: TerminalKind = TerminalKind.VCoreMongo;
-
-  constructor() {
-    setShellType(this.shellType);
-  }
-
-  public getShellName(): string {
-    return "MongoDB VCore";
-  }
-
-  public async getInitialCommands(): Promise<string> {
-    const dbAccount = userContext.databaseAccount;
-    const endpoint = dbAccount.properties.vcoreMongoEndpoint;
-    
-    // Get database key
-    const dbName = dbAccount.name;
-    let key = "";
-    if (dbName) {
-      const keys = await listKeys(userContext.subscriptionId, userContext.resourceGroup, dbName);
-      key = keys?.primaryMasterKey || "";
-    }
-
-    const config = {
-      host: getHostFromUrl(endpoint),
-      name: dbAccount.name,
-      password: key,
-      endpoint: endpoint
-    };
-
-    return this.getCommands(config).join("\n").concat("\n");
-  }
-
-  public async configureNetworkAccess(terminal: Terminal, region: string): Promise<{
-    vNetSettings: any;
-    isAllPublicAccessEnabled: boolean;
-  }> {
-    // VCore MongoDB uses private endpoints
-    return await NetworkAccessHandler.configureNetworkAccess(terminal, region, this.shellType);
-  }
-
-  private getCommands(config: any): string[] {
-    return [
-      // 1. Fetch and display location details in a readable format
-      "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
-      // 2. Check if mongosh is installed; if not, proceed with installation
-      "if ! command -v mongosh &> /dev/null; then echo '⚠️ mongosh not found. Installing...'; fi",
-      // 3. Download mongosh if not installed
-      "if ! command -v mongosh &> /dev/null; then curl -LO https://downloads.mongodb.com/compass/mongosh-2.3.8-linux-x64.tgz; fi",
-      // 4. Extract mongosh package if not installed
-      "if ! command -v mongosh &> /dev/null; then tar -xvzf mongosh-2.3.8-linux-x64.tgz; fi",
-      // 5. Move mongosh binaries if not installed
-      "if ! command -v mongosh &> /dev/null; then mkdir -p ~/mongosh && mv mongosh-2.3.8-linux-x64/* ~/mongosh/; fi",
-      // 6. Add mongosh to PATH if not installed
-      "if ! command -v mongosh &> /dev/null; then echo 'export PATH=$HOME/mongosh/bin:$PATH' >> ~/.bashrc; fi",
-      // 7. Source .bashrc to update PATH (even if mongosh was already installed)
-      "source ~/.bashrc",
-      // 8. Verify mongosh installation
-      "mongosh --version",
-      // 9. Login to MongoDB
-      `read -p "Enter username: " username && mongosh "mongodb+srv://$username:@${config.endpoint}/?authMechanism=SCRAM-SHA-256&retrywrites=false&maxIdleTimeMS=120000" --tls --tlsAllowInvalidCertificates`
-    ];
-  }
-}

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

@@ -1,123 +0,0 @@
-
-import { IDisposable, ITerminalAddon, Terminal } from 'xterm';
-
-interface IAttachOptions {
-    bidirectional?: boolean;
-}
-
-export class AttachAddon implements ITerminalAddon {
-    private _socket: WebSocket;
-    private _bidirectional: boolean;
-    private _disposables: IDisposable[] = [];
-    private _socketData: string;
-
-    constructor(socket: WebSocket, options?: IAttachOptions) {
-        this._socket = socket;
-        // always set binary type to arraybuffer, we do not handle blobs
-        this._socket.binaryType = 'arraybuffer';
-        this._bidirectional = !(options && options.bidirectional === false);
-        this._socketData = '';
-    }
-
-    public activate(terminal: Terminal): void {
-        this._disposables.push(
-            addSocketListener(this._socket, 'message', ev => {
-                let data: ArrayBuffer | string = ev.data;
-                const startStatusJson = 'ie_us';
-                const endStatusJson = 'ie_ue';
-
-                if (typeof data === 'object') {
-                    const enc = new TextDecoder("utf-8");
-                    data = enc.decode(ev.data as any);
-                }
-
-                // for example of json object look in TerminalHelper in the socket.onMessage
-                if (data.includes(startStatusJson) && data.includes(endStatusJson)) {
-                    // process as one line
-                    const statusData = data.split(startStatusJson)[1].split(endStatusJson)[0];
-                    data = data.replace(statusData, '');
-                    data = data.replace(startStatusJson, '');
-                    data = data.replace(endStatusJson, '');
-                } else if (data.includes(startStatusJson)) {
-                    // check for start
-                    const partialStatusData = data.split(startStatusJson)[1];
-                    this._socketData += partialStatusData;
-                    data = data.replace(partialStatusData, '');
-                    data = data.replace(startStatusJson, '');
-                } else if (data.includes(endStatusJson)) {
-                    // check for end and process the command
-                    const partialStatusData = data.split(endStatusJson)[0];
-                    this._socketData += partialStatusData;
-                    data = data.replace(partialStatusData, '');
-                    data = data.replace(endStatusJson, '');
-                    this._socketData = '';
-                } else if (this._socketData.length > 0) {
-                    // check if the line is all data then just concatenate
-                    this._socketData += data;
-                    data = '';
-                }
-                terminal.write(data);
-            })
-        );
-
-        if (this._bidirectional) {
-            this._disposables.push(terminal.onData(data => this._sendData(data)));
-            this._disposables.push(terminal.onBinary(data => this._sendBinary(data)));
-        }
-
-        this._disposables.push(addSocketListener(this._socket, 'close', () => this.dispose()));
-        this._disposables.push(addSocketListener(this._socket, 'error', () => this.dispose()));
-    }
-
-    public dispose(): void {
-        for (const d of this._disposables) {
-            d.dispose();
-        }
-    }
-
-    private _sendData(data: string): void {
-        if (!this._checkOpenSocket()) {
-            return;
-        }
-        this._socket.send(data);
-    }
-
-    private _sendBinary(data: string): void {
-        if (!this._checkOpenSocket()) {
-            return;
-        }
-        const buffer = new Uint8Array(data.length);
-        for (let i = 0; i < data.length; ++i) {
-            buffer[i] = data.charCodeAt(i) & 255;
-        }
-        this._socket.send(buffer);
-    }
-
-    private _checkOpenSocket(): boolean {
-        switch (this._socket.readyState) {
-            case WebSocket.OPEN:
-                return true;
-            case WebSocket.CONNECTING:
-                throw new Error('Attach addon was loaded before socket was open');
-            case WebSocket.CLOSING:
-                return false;
-            case WebSocket.CLOSED:
-                throw new Error('Attach addon socket is closed');
-            default:
-                throw new Error('Unexpected socket state');
-        }
-    }
-}
-
-function addSocketListener<K extends keyof WebSocketEventMap>(socket: WebSocket, type: K, handler: (this: WebSocket, ev: WebSocketEventMap[K]) => any): IDisposable {
-    socket.addEventListener(type, handler);
-    return {
-        dispose: () => {
-            if (!handler) {
-                // Already disposed
-                return;
-            }
-            socket.removeEventListener(type, handler);
-        }
-    };
-}

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

@@ -1,84 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Common utility functions for CloudShell
- */
-
-import { Terminal } from "xterm";
-import { terminalLog } from "./LogFormatter";
-
-/**
- * Utility function to wait for a specified duration
- */
-export const wait = (ms: number): Promise<void> => new Promise(resolve => setTimeout(resolve, ms));
-
-/**
- * Utility function to ask a question in the terminal
- */
-export const askQuestion = (terminal: Terminal, question: string, defaultAnswer: string = ""): Promise<string> => {
-  return new Promise<string>((resolve) => {
-    const prompt = terminalLog.prompt(`${question} (${defaultAnswer}): `);
-    terminal.writeln(prompt);
-    terminal.focus();
-    let response = "";
-
-    const dataListener = terminal.onData((data: string) => {
-      if (data === "\r") { // Enter key pressed
-        terminal.writeln(""); // Move to a new line
-        dataListener.dispose();
-        if (response.trim() === "") {
-          response = defaultAnswer; // Use default answer if no input
-        }
-        return resolve(response.trim());
-      } else if (data === "\u007F" || data === "\b") { // Handle backspace
-        if (response.length > 0) {
-          response = response.slice(0, -1);
-          terminal.write("\x1B[D \x1B[D"); // Move cursor back, clear character
-        }
-      } else if (data.charCodeAt(0) >= 32) { // Ignore control characters
-        response += data;
-        terminal.write(data); // Display typed characters
-      }
-    });
-
-    // Prevent cursor movement beyond the prompt
-    terminal.onKey(({ domEvent }: { domEvent: KeyboardEvent }) => {
-      if (domEvent.key === "ArrowLeft" && response.length === 0) {
-        domEvent.preventDefault(); // Stop moving left beyond the question
-      }
-    });
-  });
-};
-
-/**
- * Utility function to ask for yes/no confirmation
- */
-export const askConfirmation = async (terminal: Terminal, question: string): Promise<boolean> => {
-  terminal.writeln("");
-  terminal.writeln(terminalLog.prompt(`${question} (Y/N)`));
-  terminal.focus();
-  return new Promise<boolean>((resolve) => {
-    const keyListener = terminal.onKey(({ key }: { key: string }) => {
-      keyListener.dispose();
-      terminal.writeln("");
-
-      if (key.toLowerCase() === 'y') {
-        resolve(true);
-      } else {
-        resolve(false);
-      }
-    });
-  });
-};
-
-/**
- * Extract host from a URL
- */
-export const getHostFromUrl = (url: string): string => {
-  try {
-    const urlObj = new URL(url);
-    return urlObj.hostname;
-  } catch (error) {
-    console.error("Invalid URL:", error);
-    return "";
-  }
-};

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

@@ -1,28 +0,0 @@
-/**
- * Standardized terminal logging functions for consistent formatting
- */
-export const terminalLog = {
-  // Section headers
-  header: (message: string) => `\n\x1B[1;34m┌─ ${message} ${"─".repeat(Math.max(45 - message.length, 0))}\x1B[0m`,
-  subheader: (message: string) => `\x1B[1;36m├ ${message}\x1B[0m`,
-  sectionEnd: () => `\x1B[1;34m└${"─".repeat(50)}\x1B[0m\n`,
-  
-  // Status messages
-  success: (message: string) => `\x1B[32m✓ ${message}\x1B[0m`,
-  warning: (message: string) => `\x1B[33m⚠ ${message}\x1B[0m`,
-  error: (message: string) => `\x1B[31m✗ ${message}\x1B[0m`,
-  info: (message: string) => `\x1B[34m${message}\x1B[0m`,
-  
-  // Resource information
-  database: (message: string) => `\x1B[35m🔶  Database: ${message}\x1B[0m`,
-  vnet: (message: string) => `\x1B[36m🔷  Network: ${message}\x1B[0m`,
-  cloudshell: (message: string) => `\x1B[32m🔷  CloudShell: ${message}\x1B[0m`,
-  
-  // Data formatting
-  item: (label: string, value: string) => `  • ${label}: \x1B[32m${value}\x1B[0m`,
-  progress: (operation: string, status: string) => `\x1B[34m${operation}: \x1B[36m${status}\x1B[0m`,
-  
-  // User interaction
-  prompt: (message: string) => `\x1B[1;37m${message}\x1B[0m`,
-  separator: () => `\x1B[30;1m${"─".repeat(50)}\x1B[0m`
-};

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

@@ -2,6 +2,7 @@ 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";
@@ -341,10 +342,15 @@ describe("Documents tab (noSql API)", () => {
     updateConfigContext({ platform: Platform.Fabric });
     updateUserContext({
       fabricContext: {
-        connectionId: "test",
-        databaseConnectionInfo: undefined,
+        databaseName: "database",
+        artifactInfo: {
+          connectionId: "test",
+          resourceTokenInfo: undefined,
+        },
+        artifactType: CosmosDbArtifactType.MIRRORED_KEY,
         isReadOnly: true,
         isVisible: true,
+        fabricClientRpcVersion: "rpcVersion",
       },
     });
 

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -20,7 +20,6 @@ import {
 import { queryDocuments } from "Common/dataAccess/queryDocuments";
 import { readDocument } from "Common/dataAccess/readDocument";
 import { updateDocument } from "Common/dataAccess/updateDocument";
-import { Platform, configContext } from "ConfigContext";
 import { ActionType, OpenCollectionTab, TabKind } from "Contracts/ActionContracts";
 import { CommandButtonComponentProps } from "Explorer/Controls/CommandButton/CommandButtonComponent";
 import { useDialog } from "Explorer/Controls/Dialog";
@@ -43,6 +42,7 @@ 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,6 +55,7 @@ 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";
@@ -131,6 +132,14 @@ 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,
   },
@@ -344,7 +353,7 @@ export const getTabsButtons = ({
   onRevertExistingDocumentClick,
   onDeleteExistingDocumentsClick,
 }: ButtonsDependencies): CommandButtonComponentProps[] => {
-  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly) {
+  if (isFabric() && userContext.fabricContext?.isReadOnly) {
     // All the following buttons require write access
     return [];
   }
@@ -2136,8 +2145,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                     selectedColumnIds={selectedColumnIds}
                     columnDefinitions={columnDefinitions}
                     isRowSelectionDisabled={
-                      isBulkDeleteDisabled ||
-                      (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly)
+                      isBulkDeleteDisabled || (isFabric() && userContext.fabricContext?.isReadOnly)
                     }
                     onColumnSelectionChange={onColumnSelectionChange}
                     defaultColumnSelection={getInitialColumnSelection()}
@@ -2145,6 +2153,18 @@ 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

@@ -233,7 +233,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
                     aria-label="Select column"
                     size="small"
                     icon={<MoreHorizontalRegular />}
-                    style={{ position: "absolute", right: 0, backgroundColor: tokens.colorNeutralBackground1 }}
+                    style={{ position: "absolute", right: 10, backgroundColor: tokens.colorNeutralBackground1 }}
                   />
                 </MenuTrigger>
                 <MenuPopover>

src/Explorer/Tabs/QueryTab/IndexAdvisorUtils.tsx

@@ -0,0 +1,114 @@
+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 } from "@fluentui/react-components";
+import { Link, tokens } 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>Execute a query to see the results</p>
+        <p style={{ color: tokens.colorNeutralForeground1 }}>Execute a query to see the results</p>
       </div>
     </div>
   );

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -23,9 +23,11 @@ import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { Allotment } from "allotment";
 import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
 import { TabsState, useTabs } from "hooks/useTabs";
+import { monacoTheme } from "hooks/useTheme";
 import React, { Fragment, createRef } from "react";
 import "react-splitter-layout/lib/index.css";
 import { format } from "react-string-format";
+import create from "zustand";
 import QueryCommandIcon from "../../../../images/CopilotCommand.svg";
 import LaunchCopilot from "../../../../images/CopilotTabIcon.svg";
 import DownloadQueryIcon from "../../../../images/DownloadQuery.svg";
@@ -54,6 +56,20 @@ import { SaveQueryPane } from "../../Panes/SaveQueryPane/SaveQueryPane";
 import TabsBase from "../TabsBase";
 import "./QueryTabComponent.less";
 
+export interface QueryMetadataStore {
+  userQuery: string;
+  databaseId: string;
+  containerId: string;
+  setMetadata: (query1: string, db: string, container: string) => void;
+}
+
+export const useQueryMetadataStore = create<QueryMetadataStore>((set) => ({
+  userQuery: "",
+  databaseId: "",
+  containerId: "",
+  setMetadata: (query1, db, container) => set({ userQuery: query1, databaseId: db, containerId: container }),
+}));
+
 enum ToggleState {
   Result,
   QueryMetrics,
@@ -258,6 +274,10 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
   }
 
   public onExecuteQueryClick = async (): Promise<void> => {
+    const query1 = this.state.sqlQueryEditorContent;
+    const db = this.props.collection.databaseId;
+    const container = this.props.collection.id();
+    useQueryMetadataStore.getState().setMetadata(query1, db, container);
     this._iterator = undefined;
 
     setTimeout(async () => {
@@ -756,6 +776,7 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
                 wordWrap={"on"}
                 ariaLabel={"Editing Query"}
                 lineNumbers={"on"}
+                theme={monacoTheme}
                 onContentChanged={(newContent: string) => this.onChangeContent(newContent)}
                 onContentSelected={(selectedContent: string, selection: monaco.Selection) =>
                   this.onSelectedContent(selectedContent, selection)

src/Explorer/Tabs/QueryTab/ResultsView.test.tsx

@@ -0,0 +1,202 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { IndexAdvisorTab } from "Explorer/Tabs/QueryTab/ResultsView";
+import React from "react";
+
+const mockReplace = jest.fn();
+const mockFetchAll = jest.fn();
+const mockRead = jest.fn();
+const mockLogConsoleProgress = jest.fn();
+const mockHandleError = jest.fn();
+
+const indexMetricsString = `
+Utilized Single Indexes
+Index Spec: /foo/?
+Index Impact Score: High
+Potential Single Indexes
+Index Spec: /bar/?
+Index Impact Score: Medium
+Utilized Composite Indexes
+Index Spec: /baz/? DESC, /qux/? ASC
+Index Impact Score: Low
+`;
+mockRead.mockResolvedValue({
+  resource: {
+    indexingPolicy: {
+      automatic: true,
+      indexingMode: "consistent",
+      includedPaths: [{ path: "/*" }, { path: "/foo/?" }],
+      excludedPaths: [],
+    },
+    partitionKey: "pk",
+  },
+});
+mockReplace.mockResolvedValue({
+  resource: {
+    indexingPolicy: {
+      automatic: true,
+      indexingMode: "consistent",
+      includedPaths: [{ path: "/*" }],
+      excludedPaths: [],
+    },
+  },
+});
+
+jest.mock("./QueryTabComponent", () => ({
+  useQueryMetadataStore: () => ({
+    userQuery: "SELECT * FROM c",
+    databaseId: "db1",
+    containerId: "col1",
+  }),
+}));
+jest.mock("Common/CosmosClient", () => ({
+  client: () => ({
+    database: () => ({
+      container: () => ({
+        items: {
+          query: () => ({
+            fetchAll: mockFetchAll.mockResolvedValueOnce({ indexMetrics: indexMetricsString }),
+          }),
+        },
+        read: mockRead,
+        replace: mockReplace,
+      }),
+    }),
+  }),
+}));
+jest.mock("./StylesAdvisor", () => ({
+  useIndexAdvisorStyles: () => ({}),
+}));
+
+jest.mock("../../../Utils/NotificationConsoleUtils", () => ({
+  logConsoleProgress: (...args: unknown[]) => {
+    mockLogConsoleProgress(...args);
+    return () => {};
+  },
+}));
+
+jest.mock("../../../Common/ErrorHandlingUtils", () => {
+  return {
+    handleError: (...args: unknown[]) => mockHandleError(...args),
+  };
+});
+
+test("logs progress message when fetching index metrics", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(mockLogConsoleProgress).toHaveBeenCalledWith(expect.stringContaining("IndexMetrics")));
+});
+test("renders both Included and Not Included sections after loading", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("Included in Current Policy")).toBeInTheDocument());
+  expect(screen.getByText("Not Included in Current Policy")).toBeInTheDocument();
+  expect(screen.getByText("/foo/?")).toBeInTheDocument();
+  expect(screen.getByText("/bar/?")).toBeInTheDocument();
+});
+test("shows update button only when an index is selected", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("/bar/?")).toBeInTheDocument());
+  const checkboxes = screen.getAllByRole("checkbox");
+  expect(checkboxes.length).toBeGreaterThan(1);
+  fireEvent.click(checkboxes[1]);
+  expect(screen.getByText(/Update Indexing Policy/)).toBeInTheDocument();
+
+  fireEvent.click(checkboxes[1]);
+  expect(screen.queryByText(/Update Indexing Policy/)).not.toBeInTheDocument();
+});
+test("calls replace when update policy is confirmed", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("/bar/?")).toBeInTheDocument());
+  const checkboxes = screen.getAllByRole("checkbox");
+  fireEvent.click(checkboxes[1]);
+  const updateButton = screen.getByText(/Update Indexing Policy/);
+  fireEvent.click(updateButton);
+  await waitFor(() => expect(mockReplace).toHaveBeenCalled());
+});
+
+test("calls replace when update button is clicked", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("/bar/?")).toBeInTheDocument());
+  const checkboxes = screen.getAllByRole("checkbox");
+  fireEvent.click(checkboxes[1]); // Select /bar/?
+  fireEvent.click(screen.getByText(/Update Indexing Policy/));
+  await waitFor(() => expect(mockReplace).toHaveBeenCalled());
+});
+
+test("fetches indexing policy via read", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => {
+    expect(mockRead).toHaveBeenCalled();
+  });
+});
+
+test("selects all indexes when select-all is clicked", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("/bar/?")).toBeInTheDocument());
+  const checkboxes = screen.getAllByRole("checkbox");
+
+  fireEvent.click(checkboxes[0]);
+  checkboxes.forEach((cb) => {
+    expect(cb).toBeChecked();
+  });
+});
+
+test("shows spinner while loading and hides after fetchIndexMetrics resolves", async () => {
+  render(<IndexAdvisorTab />);
+  expect(screen.getByRole("progressbar")).toBeInTheDocument();
+  await waitFor(() => expect(screen.queryByRole("progressbar")).not.toBeInTheDocument());
+});
+
+test("calls fetchAll with correct query and options", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(mockFetchAll).toHaveBeenCalled());
+});
+test("renders IndexAdvisorTab when clicked from ResultsView", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("Included in Current Policy")).toBeInTheDocument());
+  expect(screen.getByText("/foo/?")).toBeInTheDocument();
+});
+test("renders index metrics from SDK response", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("/foo/?")).toBeInTheDocument());
+  expect(screen.getByText("/bar/?")).toBeInTheDocument();
+  expect(screen.getByText("/baz/? DESC, /qux/? ASC")).toBeInTheDocument();
+});
+
+test("calls handleError if fetchIndexMetrics throws", async () => {
+  mockFetchAll.mockRejectedValueOnce(new Error("fail"));
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(mockHandleError).toHaveBeenCalled());
+});
+
+test("calls handleError if fetchIndexMetrics throws2nd", async () => {
+  mockFetchAll.mockRejectedValueOnce(new Error("fail"));
+
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(mockHandleError).toHaveBeenCalled());
+  expect(screen.queryByRole("status")).not.toBeInTheDocument();
+});
+
+test("IndexingPolicyStore stores updated policy on componentDidMount", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(mockRead).toHaveBeenCalled());
+
+  const readResult = await mockRead.mock.results[0].value;
+  const policy = readResult.resource.indexingPolicy;
+
+  expect(policy).toBeDefined();
+  expect(policy.automatic).toBe(true);
+  expect(policy.indexingMode).toBe("consistent");
+  expect(policy.includedPaths).toEqual(expect.arrayContaining([{ path: "/*" }, { path: "/foo/?" }]));
+});
+
+test("refreshCollectionData updates observable and re-renders", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("/bar/?")).toBeInTheDocument());
+
+  const checkboxes = screen.getAllByRole("checkbox");
+  fireEvent.click(checkboxes[1]); // Select /bar/?
+  fireEvent.click(screen.getByText(/Update Indexing Policy/));
+
+  await waitFor(() => expect(mockReplace).toHaveBeenCalled());
+  expect(screen.getByText("/bar/?")).toBeInTheDocument();
+});

src/Explorer/Tabs/QueryTab/ResultsView.tsx

@@ -1,5 +1,8 @@
+import type { CompositePath, IndexingPolicy } from "@azure/cosmos";
+import { FontIcon } from "@fluentui/react";
 import {
   Button,
+  Checkbox,
   DataGrid,
   DataGridBody,
   DataGridCell,
@@ -8,28 +11,44 @@ import {
   DataGridRow,
   SelectTabData,
   SelectTabEvent,
+  Spinner,
   Tab,
   TabList,
+  Table,
+  TableBody,
+  TableCell,
   TableColumnDefinition,
+  TableHeader,
+  TableRow,
   createTableColumn,
 } from "@fluentui/react-components";
-import { ArrowDownloadRegular, CopyRegular } from "@fluentui/react-icons";
+import {
+  ArrowDownloadRegular,
+  ChevronDown20Regular,
+  ChevronRight20Regular,
+  CopyRegular
+} from "@fluentui/react-icons";
+import copy from "clipboard-copy";
 import { HttpHeaders } from "Common/Constants";
 import MongoUtility from "Common/MongoUtility";
 import { QueryMetrics } from "Contracts/DataModels";
 import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
-import { IDocument } from "Explorer/Tabs/QueryTab/QueryTabComponent";
+import { parseIndexMetrics, renderImpactDots } from "Explorer/Tabs/QueryTab/IndexAdvisorUtils";
+import { IDocument, useQueryMetadataStore } from "Explorer/Tabs/QueryTab/QueryTabComponent";
 import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
+import React, { useCallback, useEffect, useState } from "react";
 import { userContext } from "UserContext";
-import copy from "clipboard-copy";
-import React, { useCallback, useState } from "react";
+import { logConsoleProgress } from "Utils/NotificationConsoleUtils";
+import create from "zustand";
+import { client } from "../../../Common/CosmosClient";
+import { handleError } from "../../../Common/ErrorHandlingUtils";
 import { ResultsViewProps } from "./QueryResultSection";
-
+import { useIndexAdvisorStyles } from "./StylesAdvisor";
 enum ResultsTabs {
   Results = "results",
   QueryStats = "queryStats",
+  IndexAdvisor = "indexadv",
 }
-
 const ResultsTab: React.FC<ResultsViewProps> = ({ queryResults, isMongoDB, executeQueryDocumentsPage }) => {
   const styles = useQueryTabStyles();
   const queryResultsString = queryResults
@@ -355,6 +374,286 @@ const QueryStatsTab: React.FC<Pick<ResultsViewProps, "queryResults">> = ({ query
   );
 };
 
+export interface IIndexMetric {
+  index: string;
+  impact: string;
+  section: "Included" | "Not Included" | "Header";
+  path?: string;
+  composite?: { path: string; order: string }[];
+}
+export const IndexAdvisorTab: React.FC = () => {
+  const style = useIndexAdvisorStyles();
+  const { userQuery, databaseId, containerId } = useQueryMetadataStore();
+  const [loading, setLoading] = useState(true);
+  const [indexMetrics, setIndexMetrics] = useState<string | null>(null);
+  const [showIncluded, setShowIncluded] = useState(true);
+  const [showNotIncluded, setShowNotIncluded] = useState(true);
+  const [selectedIndexes, setSelectedIndexes] = useState<IIndexMetric[]>([]);
+  const [selectAll, setSelectAll] = useState(false);
+  const [updateMessageShown, setUpdateMessageShown] = useState(false);
+  const [included, setIncludedIndexes] = useState<IIndexMetric[]>([]);
+  const [notIncluded, setNotIncludedIndexes] = useState<IIndexMetric[]>([]);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [justUpdatedPolicy, setJustUpdatedPolicy] = useState(false);
+  useEffect(() => {
+    const fetchIndexMetrics = async () => {
+      const clearMessage = logConsoleProgress(`Querying items with IndexMetrics in container ${containerId}`);
+      try {
+        const querySpec = {
+          query: userQuery,
+        };
+        const sdkResponse = await client()
+          .database(databaseId)
+          .container(containerId)
+          .items.query(querySpec, {
+            populateIndexMetrics: true,
+          })
+          .fetchAll();
+        setIndexMetrics(sdkResponse.indexMetrics);
+      } catch (error) {
+        handleError(error, "queryItemsWithIndexMetrics", `Error querying items from ${containerId}`);
+      } finally {
+        clearMessage();
+        setLoading(false);
+      }
+    };
+    if (userQuery && databaseId && containerId) {
+      fetchIndexMetrics();
+    }
+  }, [userQuery, databaseId, containerId]);
+
+  useEffect(() => {
+    if (!indexMetrics) {
+      return;
+    }
+
+    const { included, notIncluded } = parseIndexMetrics(indexMetrics);
+    setIncludedIndexes(included);
+    setNotIncludedIndexes(notIncluded);
+    if (justUpdatedPolicy) {
+      setJustUpdatedPolicy(false);
+    } else {
+      setUpdateMessageShown(false);
+    }
+  }, [indexMetrics]);
+
+  useEffect(() => {
+    const allSelected =
+      notIncluded.length > 0 && notIncluded.every((item) => selectedIndexes.some((s) => s.index === item.index));
+    setSelectAll(allSelected);
+  }, [selectedIndexes, notIncluded]);
+
+  const handleCheckboxChange = (indexObj: IIndexMetric, checked: boolean) => {
+    if (checked) {
+      setSelectedIndexes((prev) => [...prev, indexObj]);
+    } else {
+      setSelectedIndexes((prev) => prev.filter((item) => item.index !== indexObj.index));
+    }
+  };
+
+  const handleSelectAll = (checked: boolean) => {
+    setSelectAll(checked);
+    setSelectedIndexes(checked ? notIncluded : []);
+  };
+
+  const handleUpdatePolicy = async () => {
+    setIsUpdating(true);
+    try {
+      const containerRef = client().database(databaseId).container(containerId);
+      const { resource: containerDef } = await containerRef.read();
+
+      const newIncludedPaths = selectedIndexes
+        .filter((index) => !index.composite)
+        .map((index) => {
+          return {
+            path: index.path,
+          };
+        });
+
+      const newCompositeIndexes: CompositePath[][] = selectedIndexes
+        .filter((index) => Array.isArray(index.composite))
+        .map(
+          (index) =>
+            (index.composite as { path: string; order: string }[]).map((comp) => ({
+              path: comp.path,
+              order: comp.order === "descending" ? "descending" : "ascending",
+            })) as CompositePath[],
+        );
+
+      const updatedPolicy: IndexingPolicy = {
+        ...containerDef.indexingPolicy,
+        includedPaths: [...(containerDef.indexingPolicy?.includedPaths || []), ...newIncludedPaths],
+        compositeIndexes: [...(containerDef.indexingPolicy?.compositeIndexes || []), ...newCompositeIndexes],
+        automatic: containerDef.indexingPolicy?.automatic ?? true,
+        indexingMode: containerDef.indexingPolicy?.indexingMode ?? "consistent",
+        excludedPaths: containerDef.indexingPolicy?.excludedPaths ?? [],
+      };
+      await containerRef.replace({
+        id: containerId,
+        partitionKey: containerDef.partitionKey,
+        indexingPolicy: updatedPolicy,
+      });
+      useIndexingPolicyStore.getState().setIndexingPolicyFor(containerId, updatedPolicy);
+      const selectedIndexSet = new Set(selectedIndexes.map((s) => s.index));
+      const updatedNotIncluded: typeof notIncluded = [];
+      const newlyIncluded: typeof included = [];
+      for (const item of notIncluded) {
+        if (selectedIndexSet.has(item.index)) {
+          newlyIncluded.push(item);
+        } else {
+          updatedNotIncluded.push(item);
+        }
+      }
+      const newIncluded = [...included, ...newlyIncluded];
+      const newNotIncluded = updatedNotIncluded;
+      setIncludedIndexes(newIncluded);
+      setNotIncludedIndexes(newNotIncluded);
+      setSelectedIndexes([]);
+      setSelectAll(false);
+      setUpdateMessageShown(true);
+      setJustUpdatedPolicy(true);
+    } catch (err) {
+      console.error("Failed to update indexing policy:", err);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const renderRow = (item: IIndexMetric, index: number) => {
+    const isHeader = item.section === "Header";
+    const isNotIncluded = item.section === "Not Included";
+
+    return (
+      <TableRow key={index}>
+        <TableCell colSpan={2}>
+          <div className={style.indexAdvisorGrid}>
+            {isNotIncluded ? (
+              <Checkbox
+                checked={selectedIndexes.some((selected) => selected.index === item.index)}
+                onChange={(_, data) => handleCheckboxChange(item, data.checked === true)}
+              />
+            ) : isHeader && item.index === "Not Included in Current Policy" && notIncluded.length > 0 ? (
+              <Checkbox checked={selectAll} onChange={(_, data) => handleSelectAll(data.checked === true)} />
+            ) : (
+              <div className={style.indexAdvisorCheckboxSpacer}></div>
+            )}
+            {isHeader ? (
+              <span
+                style={{ cursor: "pointer" }}
+                onClick={() => {
+                  if (item.index === "Included in Current Policy") {
+                    setShowIncluded(!showIncluded);
+                  } else if (item.index === "Not Included in Current Policy") {
+                    setShowNotIncluded(!showNotIncluded);
+                  }
+                }}
+              >
+                {item.index === "Included in Current Policy" ? (
+                  showIncluded ? (
+                    <ChevronDown20Regular />
+                  ) : (
+                    <ChevronRight20Regular />
+                  )
+                ) : showNotIncluded ? (
+                  <ChevronDown20Regular />
+                ) : (
+                  <ChevronRight20Regular />
+                )}
+              </span>
+            ) : (
+              <div className={style.indexAdvisorChevronSpacer}></div>
+            )}
+            <div className={isHeader ? style.indexAdvisorRowBold : style.indexAdvisorRowNormal}>{item.index}</div>
+            <div className={isHeader ? style.indexAdvisorRowImpactHeader : style.indexAdvisorRowImpact}>
+              {!isHeader && item.impact}
+            </div>
+            <div>{!isHeader && renderImpactDots(item.impact)}</div>
+          </div>
+        </TableCell>
+      </TableRow>
+    );
+  };
+  const indexMetricItems = React.useMemo(() => {
+    const items: IIndexMetric[] = [];
+    items.push({ index: "Not Included in Current Policy", impact: "", section: "Header" });
+    if (showNotIncluded) {
+      notIncluded.forEach((item) => items.push({ ...item, section: "Not Included" }));
+    }
+    items.push({ index: "Included in Current Policy", impact: "", section: "Header" });
+    if (showIncluded) {
+      included.forEach((item) => items.push({ ...item, section: "Included" }));
+    }
+    return items;
+  }, [included, notIncluded, showIncluded, showNotIncluded]);
+
+  if (loading) {
+    return (
+      <div>
+        <Spinner
+          size="small"
+          style={
+            {
+              "--spinner-size": "16px",
+              "--spinner-thickness": "2px",
+              "--spinner-color": "#0078D4",
+            } as React.CSSProperties
+          }
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className={style.indexAdvisorMessage}>
+        {updateMessageShown ? (
+          <>
+            <span className={style.indexAdvisorSuccessIcon}>
+              <FontIcon iconName="CheckMark" style={{ color: "white", fontSize: 12 }} />
+            </span>
+            <span>
+              Your indexing policy has been updated with the new included paths. You may review the changes in Scale &
+              Settings.
+            </span>
+          </>
+        ) : (
+          "Here is an analysis on the indexes utilized for executing the query. Based on the analysis, Cosmos DB recommends adding the selected indexes to your indexing policy to optimize the performance of this particular query."
+        )}
+      </div>
+      <div className={style.indexAdvisorTitle}>Indexes analysis</div>
+      <Table className={style.indexAdvisorTable}>
+        <TableHeader>
+          <TableRow>
+            <TableCell colSpan={2}>
+              <div className={style.indexAdvisorGrid}>
+                <div className={style.indexAdvisorCheckboxSpacer}></div>
+                <div className={style.indexAdvisorChevronSpacer}></div>
+                <div>Index</div>
+                <div>
+                  <span style={{ whiteSpace: "nowrap" }}>Estimated Impact</span>
+                </div>
+              </div>
+            </TableCell>
+          </TableRow>
+        </TableHeader>
+        <TableBody>{indexMetricItems.map(renderRow)}</TableBody>
+      </Table>
+      {selectedIndexes.length > 0 && (
+        <div className={style.indexAdvisorButtonBar}>
+          {isUpdating ? (
+            <div className={style.indexAdvisorButtonSpinner}>
+              <Spinner size="tiny" />{" "}
+            </div>
+          ) : (
+            <button onClick={handleUpdatePolicy} className={style.indexAdvisorButton}>
+              Update Indexing Policy with selected index(es)
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
 export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResults, executeQueryDocumentsPage }) => {
   const styles = useQueryTabStyles();
   const [activeTab, setActiveTab] = useState<ResultsTabs>(ResultsTabs.Results);
@@ -362,7 +661,6 @@ export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResult
   const onTabSelect = useCallback((event: SelectTabEvent, data: SelectTabData) => {
     setActiveTab(data.value as ResultsTabs);
   }, []);
-
   return (
     <div data-test="QueryTab/ResultsPane/ResultsView" className={styles.queryResultsTabPanel}>
       <TabList selectedValue={activeTab} onTabSelect={onTabSelect}>
@@ -380,6 +678,13 @@ export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResult
         >
           Query Stats
         </Tab>
+        <Tab
+          data-test="QueryTab/ResultsPane/ResultsView/IndexAdvisorTab"
+          id={ResultsTabs.IndexAdvisor}
+          value={ResultsTabs.IndexAdvisor}
+        >
+          Index Advisor
+        </Tab>
       </TabList>
       <div className={styles.queryResultsTabContentContainer}>
         {activeTab === ResultsTabs.Results && (
@@ -390,7 +695,23 @@ export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResult
           />
         )}
         {activeTab === ResultsTabs.QueryStats && <QueryStatsTab queryResults={queryResults} />}
+        {activeTab === ResultsTabs.IndexAdvisor && <IndexAdvisorTab />}
       </div>
     </div>
   );
 };
+export interface IndexingPolicyStore {
+  indexingPolicies: { [containerId: string]: IndexingPolicy };
+  setIndexingPolicyFor: (containerId: string, indexingPolicy: IndexingPolicy) => void;
+}
+
+export const useIndexingPolicyStore = create<IndexingPolicyStore>((set) => ({
+  indexingPolicies: {},
+  setIndexingPolicyFor: (containerId, indexingPolicy) =>
+    set((state) => ({
+      indexingPolicies: {
+        ...state.indexingPolicies,
+        [containerId]: { ...indexingPolicy },
+      },
+    })),
+}));

src/Explorer/Tabs/QueryTab/StylesAdvisor.ts

@@ -0,0 +1,95 @@
+import { makeStyles } from "@fluentui/react-components";
+export type IndexAdvisorStyles = ReturnType<typeof useIndexAdvisorStyles>;
+export const useIndexAdvisorStyles = makeStyles({
+  indexAdvisorMessage: {
+    padding: "1rem",
+    fontSize: "1.2rem",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+  },
+  indexAdvisorSuccessIcon: {
+    width: "18px",
+    height: "18px",
+    borderRadius: "50%",
+    backgroundColor: "#107C10",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  indexAdvisorTitle: {
+    padding: "1rem",
+    fontSize: "1.3rem",
+    fontWeight: "bold",
+  },
+  indexAdvisorTable: {
+    display: "block",
+    alignItems: "center",
+    marginBottom: "7rem",
+  },
+  indexAdvisorGrid: {
+    display: "grid",
+    gridTemplateColumns: "30px 30px 1fr 50px 120px",
+    alignItems: "center",
+    gap: "15px",
+    fontWeight: "bold",
+  },
+  indexAdvisorCheckboxSpacer: {
+    width: "18px",
+    height: "18px",
+  },
+  indexAdvisorChevronSpacer: {
+    width: "24px",
+  },
+  indexAdvisorRowBold: {
+    fontWeight: "bold",
+  },
+  indexAdvisorRowNormal: {
+    fontWeight: "normal",
+  },
+  indexAdvisorRowImpactHeader: {
+    fontSize: 0,
+  },
+  indexAdvisorRowImpact: {
+    fontWeight: "normal",
+  },
+  indexAdvisorImpactDot: {
+    color: "#0078D4",
+    fontSize: "12px",
+    display: "inline-flex",
+  },
+  indexAdvisorImpactDots: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+  },
+  indexAdvisorButtonBar: {
+    padding: "1rem",
+    marginTop: "-7rem",
+    flexWrap: "wrap",
+  },
+  indexAdvisorButtonSpinner: {
+    marginTop: "1rem",
+    minWidth: "320px",
+    minHeight: "40px",
+    display: "flex",
+    alignItems: "left",
+    justifyContent: "left",
+    marginLeft: "10rem",
+  },
+  indexAdvisorButton: {
+    backgroundColor: "#0078D4",
+    color: "white",
+    padding: "8px 16px",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    marginTop: "1rem",
+    fontSize: "1rem",
+    fontWeight: 500,
+    transition: "background 0.2s",
+    ":hover": {
+      backgroundColor: "#005a9e",
+    },
+  },
+});

src/Explorer/Tabs/QueryTab/useQueryMetadataStore.ts

@@ -0,0 +1,15 @@
+import create from "zustand";
+
+interface QueryMetadataStore {
+  userQuery: string;
+  databaseId: string;
+  containerId: string;
+  setMetadata: (query1: string, db: string, container: string) => void;
+}
+
+export const useQueryMetadataStore = create<QueryMetadataStore>((set) => ({
+  userQuery: "",
+  databaseId: "",
+  containerId: "",
+  setMetadata: (query1, db, container) => set({ userQuery: query1, databaseId: db, containerId: container }),
+}));

src/Explorer/Tabs/ScriptTabBase.ts

@@ -1,5 +1,6 @@
 import * as ko from "knockout";
 import Q from "q";
+import { IsValidCosmosDbResourceId } from "Utils/ValidationUtils";
 import DiscardIcon from "../../../images/discard.svg";
 import SaveIcon from "../../../images/save-cosmos.svg";
 import * as Constants from "../../Common/Constants";
@@ -57,7 +58,7 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
     }
 
     this.id = editable.observable<string>();
-    this.id.validations([ScriptTabBase._isValidId]);
+    this.id.validations([IsValidCosmosDbResourceId]);
 
     this.editorContent = editable.observable<string>();
     this.editorContent.validations([ScriptTabBase._isNotEmpty]);
@@ -262,29 +263,6 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
     this.updateNavbarWithTabsButtons();
   }
 
-  private static _isValidId(id: string): boolean {
-    if (!id) {
-      return false;
-    }
-
-    const invalidStartCharacters = /^[/?#\\]/;
-    if (invalidStartCharacters.test(id)) {
-      return false;
-    }
-
-    const invalidMiddleCharacters = /^.+[/?#\\]/;
-    if (invalidMiddleCharacters.test(id)) {
-      return false;
-    }
-
-    const invalidEndCharacters = /.*[/?#\\ ]$/;
-    if (invalidEndCharacters.test(id)) {
-      return false;
-    }
-
-    return true;
-  }
-
   private static _isNotEmpty(value: string): boolean {
     return !!value;
   }