Merge branch 'master' into accessibilitydefects-sev-2

* autoscale and manual radiobuutton fixes

* alt text attribute for images

* Revert "alt text attribute for images"

This reverts commit 5a660551c6.

* alt text for decorative images

.github/workflows/ci.yml

@@ -92,11 +92,11 @@ jobs:
           name: dist
           path: dist/
       - name: Upload build to preview blob storage
-        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
+        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --account-key="${PREVIEW_STORAGE_KEY}" --overwrite true
         env:
           PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
       - name: Upload preview config to blob storage
-        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
+        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}" --overwrite true
         env:
           PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
   endtoendemulator:
@@ -182,7 +182,7 @@ jobs:
         with:
           name: dist
       - run: cp ./configs/prod.json config.json
-      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "vimeng@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
+      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
       - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
       - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
       - uses: actions/upload-artifact@v2
@@ -207,7 +207,7 @@ jobs:
           name: dist
       - run: cp ./configs/mpac.json config.json
       - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.MPAC/g' DataExplorer.nuspec
-      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "vimeng@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
+      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
       - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
       - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
       - uses: actions/upload-artifact@v2

images/imgarrowlefticon.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" ?>
 <!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
 <svg enable-background="new 0 0 256 256" height="256px" id="Layer_1" version="1.1" viewBox="0 0 256 256" width="256px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<path stroke="white" stroke-width="0.5" fill="#b5a3a3" d="M179.199,38.399c0,1.637-0.625,3.274-1.875,4.524l-85.076,85.075l85.076,85.075c2.5,2.5,2.5,6.55,0,9.05s-6.55,2.5-9.05,0  l-89.601-89.6c-2.5-2.5-2.5-6.551,0-9.051l89.601-89.6c2.5-2.5,6.55-2.5,9.05,0C178.574,35.124,179.199,36.762,179.199,38.399z"/>
+<path stroke="white" stroke-width="0.5" fill="#000" d="M179.199,38.399c0,1.637-0.625,3.274-1.875,4.524l-85.076,85.075l85.076,85.075c2.5,2.5,2.5,6.55,0,9.05s-6.55,2.5-9.05,0  l-89.601-89.6c-2.5-2.5-2.5-6.551,0-9.051l89.601-89.6c2.5-2.5,6.55-2.5,9.05,0C178.574,35.124,179.199,36.762,179.199,38.399z"/>
 </svg>

less/TableStyles/queryBuilder.less

@@ -3,337 +3,337 @@
 @import "../Common/Constants";
 
 .query-panel {
-    display: table;
-    display: none;
-    width: 100%;
-    border-top: 1px solid #DDDDDD;
-    /*[{environment-commandbar-toolbar-separator}]*/
-    background-color: #ffffff;
-    /*[{plugin-background-color}]*/
-    padding: 2px 0px 0px 2px;
-    resize: vertical;
+  display: table;
+  display: none;
+  width: 100%;
+  border-top: 1px solid #dddddd;
+  /*[{environment-commandbar-toolbar-separator}]*/
+  background-color: #ffffff;
+  /*[{plugin-background-color}]*/
+  padding: 2px 0px 0px 2px;
+  resize: vertical;
 }
 
 .query-panel .row {
-    display: table-row;
+  display: table-row;
 }
 
 .query-panel .row .cell {
-    display: table-cell;
+  display: table-cell;
 }
 
 .query-panel.transition-in {
-    display: table;
-    top: 0px;
-    -webkit-transition: top 2s linear;
-    -ms-transition: top 2s linear;
-    -moz-transition: top 2s linear;
-    -khtml-transition: top 2s linear;
-    -o-transition: top 2s linear;
-    transition: top 2s linear;
+  display: table;
+  top: 0px;
+  -webkit-transition: top 2s linear;
+  -ms-transition: top 2s linear;
+  -moz-transition: top 2s linear;
+  -khtml-transition: top 2s linear;
+  -o-transition: top 2s linear;
+  transition: top 2s linear;
 }
 
 .query-builder {
-    width:100%;
-    padding-right: @DefaultSpace;
-    border-bottom: 1px solid @BaseMedium;
-    margin-bottom: @DefaultSpace;
+  width: 100%;
+  padding-right: @DefaultSpace;
+  border-bottom: 1px solid @BaseMedium;
+  margin-bottom: @DefaultSpace;
 }
 
 .query-builder-toolbar {
-    background-color: #ffffff;
-    /*[{plugin-background-color}]*/
-    min-width: 600px;
-    height: 30px;
-    border-bottom: 1px solid #DDDDDD;
-    /*[1px solid {environment-commandbar-toolbar-separator}]*/
+  background-color: #ffffff;
+  /*[{plugin-background-color}]*/
+  min-width: 600px;
+  height: 30px;
+  border-bottom: 1px solid #dddddd;
+  /*[1px solid {environment-commandbar-toolbar-separator}]*/
 }
 
 .query-builder-toolbar .query-toolbar-group {
-    display: inline-block;
-    height: 24px;
-    margin: 2px 0px;
-    vertical-align: middle;
+  display: inline-block;
+  height: 24px;
+  margin: 2px 0px;
+  vertical-align: middle;
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button {
-    min-width: 0px;
-    padding: 0px;
-    margin-left: 2px;
-    background-color: transparent;
-    border: solid transparent;
+  min-width: 0px;
+  padding: 0px;
+  margin-left: 2px;
+  background-color: transparent;
+  border: solid transparent;
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button:active {
-    outline: 2px solid dodgerblue;
-    /*[2px solid {common-common-controls-button-border-hover}]*/
+  outline: 2px solid dodgerblue;
+  /*[2px solid {common-common-controls-button-border-hover}]*/
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button:hover {
-    background-color: #CCCEDB;
-    /*[{common-controls-button-hover-background}]*/
+  background-color: #cccedb;
+  /*[{common-controls-button-hover-background}]*/
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button.active {
-    background-color: #E6E7ED;
-    /*[{common-controls-inner-tab-active-background}]*/
-    outline: none
+  background-color: #e6e7ed;
+  /*[{common-controls-inner-tab-active-background}]*/
+  outline: none;
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button:disabled,
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button.disabled {
-    background-color: #ffffff;
-    /*[{common-controls-button-disabled-background}]*/
-    background: transparent;
-    border: 1px solid transparent;
-    outline: none;
-    opacity: 0.4;
+  background-color: #ffffff;
+  /*[{common-controls-button-disabled-background}]*/
+  background: transparent;
+  border: 1px solid transparent;
+  outline: none;
+  opacity: 0.4;
 }
 
 .tableContainer {
-    overflow: hidden;
-    .flex-display();
-    .flex-direction();
+  overflow: hidden;
+  .flex-display();
+  .flex-direction();
 }
 
-.tablesQueryTab{
-    padding-left: @MediumSpace;
-    width: 100%;
-    margin-bottom:@LargeSpace;
+.tablesQueryTab {
+  padding-left: @MediumSpace;
+  width: 100%;
+  margin-bottom: @LargeSpace;
 }
 
 .entity-error-Img {
-    width: @WarningErrorIconSize;
-    height: @WarningErrorIconSize;
-    margin: @DefaultSpace 0px 0px @SmallSpace;
+  width: @WarningErrorIconSize;
+  height: @WarningErrorIconSize;
+  margin: @DefaultSpace 0px 0px @SmallSpace;
 }
 
 .query-editor-panel {
-    margin-right: 16px;
-    margin-left: 16px;
-    margin-top: 25px;
-    position: relative;
-    vertical-align: middle;
-    cursor: default;
+  margin-right: 16px;
+  margin-left: 16px;
+  margin-top: 25px;
+  position: relative;
+  vertical-align: middle;
+  cursor: default;
 }
 
 .query-editor-text {
-    width: 100%;
-    margin: 2px;
-    border: solid 1px #A9ACB3;
-    /*[{plugin-textbox-disabled-color}]*/
-    resize: none;
-    margin-top: -39px;
-    background-color: #ddd;
-    padding: 5px;
+  width: 100%;
+  margin: 2px;
+  border: solid 1px #a9acb3;
+  /*[{plugin-textbox-disabled-color}]*/
+  resize: none;
+  margin-top: -39px;
+  background-color: #ddd;
+  padding: 5px;
 }
 
 .error-bar {
-    padding: @LargeSpace 34px @MediumSpace 24px;
+  padding: @LargeSpace 34px @MediumSpace 24px;
 }
 
 .error-message {
-    background-color: @BaseLow;
-    padding: @DefaultSpace;
-    display: inline-flex;
+  background-color: @BaseLow;
+  padding: @DefaultSpace;
+  display: inline-flex;
 }
 
 .error-text {
-    padding-left: @MediumSpace;
+  padding-left: @MediumSpace;
 }
 
 .query-editor-text-invalid {
-    width: 100%;
-    margin: 2px;
-    border: 1px solid #e51400;
-    resize: none;
-    margin-top: -30px;
+  width: 100%;
+  margin: 2px;
+  border: 1px solid #e51400;
+  resize: none;
+  margin-top: -30px;
 }
 
 .query-editor-panel .warning-bar {
-    width: 100%;
-    height: 20px;
-    background-color: #ffffff;
-    /*[{plugin-background-color}]*/
-    position: absolute;
-    top: -24px;
+  width: 100%;
+  height: 20px;
+  background-color: #ffffff;
+  /*[{plugin-background-color}]*/
+  position: absolute;
+  top: -24px;
 }
 
 .query-editor-panel .warning-bar .warning-message {
-    display: inline-flex;
-    padding-top: 2px;
-    vertical-align: middle;
+  display: inline-flex;
+  padding-top: 2px;
+  vertical-align: middle;
 }
 
 .query-editor-panel .warning-bar .warning-message .warning-text {
-    margin-left: 2px;
+  margin-left: 2px;
 }
 
-.advanced-options-panel{
-    margin-bottom: @DefaultSpace;
+.advanced-options-panel {
+  margin-bottom: @DefaultSpace;
 }
 
 .advanced-options-panel .advanced-heading .advanced-title {
-    display: inline-flex;
-    margin-left: 27px;
-    margin-top: 10px;
-    cursor: default;
+  display: inline-flex;
+  margin-left: 27px;
+  margin-top: 10px;
+  cursor: default;
 }
 
 .advanced-options-panel .advanced-options {
-    margin-left: 32px;
-    margin-top: 5px;
-    border: 1px solid transparent;
+  margin-left: 32px;
+  margin-top: 5px;
+  border: 1px solid transparent;
 }
 
 hr {
-    margin-top: 10px;
-    margin-bottom: 12px;
-    border: 0;
-    border-top: 1px solid #ccc;
+  margin-top: 10px;
+  margin-bottom: 12px;
+  border: 0;
+  border-top: 1px solid #ccc;
 }
 
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
+  -webkit-appearance: none;
 }
 
 .advanced-options-panel .advanced-options .top .top-input {
-    width: 100px;
-    word-spacing: normal;
-    color: #1E1E1E;
-    /*[{common-controls-button-foreground}]*/
-    border: 1px solid #CCCEDB;
-    /*[1px solid {plugin-textbox-border-color}]*/
-    height: 20px;
-    margin-left: 8px;
+  width: 100px;
+  word-spacing: normal;
+  color: #1e1e1e;
+  /*[{common-controls-button-foreground}]*/
+  border: 1px solid #cccedb;
+  /*[1px solid {plugin-textbox-border-color}]*/
+  height: 20px;
+  margin-left: 8px;
 }
 
 .advanced-options-panel .advanced-options .top .invalid-top {
-    color: red;
+  color: red;
 }
 
 .advanced-options-panel .advanced-options .select {
-    margin-top: 18px;
-    display: inline-flex;
+  margin-top: 18px;
+  display: inline-flex;
 }
 
 .advanced-options-icon {
-    margin-left: 2px;
-    vertical-align: sub;
+  margin-left: 2px;
+  vertical-align: sub;
 }
 
 .advanced-options-panel .advanced-options .select .select-options-text {
-    margin-left: 4px;
+  margin-left: 4px;
 }
 
 .advanced-options-panel .advanced-options .select .select-options-link {
-    margin-left: 4px;
-    cursor: pointer;
-    outline: none;
+  margin-left: 4px;
+  cursor: pointer;
+  outline: none;
 }
 
 .query-panel .row .column-headers .Field {
-    padding-left: 95px;
-    padding-right: 0px;
-    padding-bottom: 6px;
+  padding-left: 95px;
+  padding-right: 0px;
+  padding-bottom: 6px;
 }
 
 .clause-table {
-    border-spacing: 0px;
-    display: table;
-    width: 100%;
-    margin-top: -3px;
+  border-spacing: 0px;
+  display: table;
+  width: 100%;
+  margin-top: -3px;
 }
 
 .clause-table-row {
-    display: row;
-    margin-bottom: 10px;
+  display: row;
+  margin-bottom: 10px;
 }
 
 .clause-table-cell {
-    display: table-cell;
-    text-align: left;
-    vertical-align: middle;
+  display: table-cell;
+  text-align: left;
+  vertical-align: middle;
 }
 
-.action-column>button,
-.group-control-header>button,
-.group-indicator-column>button {
-    min-width: 20px;
-    width: 20px;
-    padding: 0px;
-    background-color: transparent;
-    border-color: transparent;
-    cursor: pointer;
+.action-column > button,
+.group-control-header > button,
+.group-indicator-column > button {
+  min-width: 20px;
+  width: 20px;
+  padding: 0px;
+  background-color: transparent;
+  border-color: transparent;
+  cursor: pointer;
 }
 
-.group-control-header>button:disabled {
-    min-width: 20px;
-    width: 20px;
-    padding: 0px;
-    background-color: transparent;
-    border-color: transparent;
-    outline: none;
-    opacity: 0.4;
-    cursor: default;
+.group-control-header > button:disabled {
+  min-width: 20px;
+  width: 20px;
+  padding: 0px;
+  background-color: transparent;
+  border-color: transparent;
+  outline: none;
+  opacity: 0.4;
+  cursor: default;
 }
 
 .clause-table-field {
-    width: 100%;
-    border: 1px solid #bbbbbb;
+  width: 100%;
+  border: 1px solid #bbbbbb;
 }
 
 .clause-table-cell button {
-    height: 20px;
+  height: 20px;
 }
 
 .clause-table-cell input[type="checkbox"] {
-    padding: 0px;
-    margin-bottom: 12px;
+  padding: 0px;
+  margin-bottom: 12px;
 }
 
 .and-or-svg {
-    margin-top: -8px;
-    margin-right: -5px;
+  margin-top: -8px;
+  margin-right: -5px;
 }
 
 .scroll-box {
-    border-bottom: 1px transparent #DDD;
-    /*[1px solid {plugin-table-border-color}]*/
-    border-top: 1px transparent #DDD;
-    /*[1px solid {plugin-table-border-color}]*/
-    max-height: 20vh;
-    width: 100%;
+  border-bottom: 1px transparent #ddd;
+  /*[1px solid {plugin-table-border-color}]*/
+  border-top: 1px transparent #ddd;
+  /*[1px solid {plugin-table-border-color}]*/
+  max-height: 20vh;
+  width: 100%;
 }
 
 .scrollable {
-    overflow: auto;
-    overflow-x: hidden;
+  overflow: auto;
+  overflow-x: hidden;
 }
 
 .and-or-column,
 .and-or-header {
-    min-width: 65px;
-    padding-right: 10px;
-    padding-left: 5px;
+  min-width: 65px;
+  padding-right: 10px;
+  padding-left: 5px;
 }
 
 .operator-column,
 .operator-header {
-    min-width: 65px;
-    padding-right: 10px;
+  min-width: 65px;
+  padding-right: 10px;
 }
 
 .field-header,
 .field-column {
-    min-width: 125px;
-    padding-right: 10px;
+  min-width: 125px;
+  padding-right: 10px;
 }
 
 .type-header,
 .type-column {
-    min-width: 85px;
+  min-width: 85px;
 }
 
 .and-or-column,
@@ -345,41 +345,41 @@ input::-webkit-inner-spin-button {
 .type-header,
 .type-column,
 .action-header {
-    padding-right: 10px;
-    margin-bottom: 8px;
+  padding-right: 10px;
+  margin-bottom: 8px;
 }
 
 .value-header,
 .value-column,
 .time-column {
-    min-width: 230px;
-    padding: 0px 4px 0px 0px;
-    width: 100%;
-    margin-bottom: 8px;
+  min-width: 230px;
+  padding: 0px 4px 0px 0px;
+  width: 100%;
+  margin-bottom: 8px;
 }
 
 .group-control-header,
 .group-control-column {
-    min-width: 25px;
-    text-align: right;
+  min-width: 25px;
+  text-align: right;
 }
 
 .group-indicator-table {
-    border-spacing: 0px;
-    min-height: 24px
+  border-spacing: 0px;
+  min-height: 24px;
 }
 
 .group-indicator-column {
-    min-width: 21px;
-    padding: 0px;
-    border-style: none;
-    height: 29px;
+  min-width: 21px;
+  padding: 0px;
+  border-style: none;
+  height: 29px;
 }
 
-.clause-table-cell.action-column, 
+.clause-table-cell.action-column,
 .clause-table-cell.action-header {
-    min-width: 60px;
-    padding-left: @SmallSpace;
+  min-width: 60px;
+  padding-left: @SmallSpace;
 }
 
 .action-header,
@@ -388,15 +388,14 @@ input::-webkit-inner-spin-button {
 .operator-header,
 .value-header,
 .and-or-header {
-    padding-right: 4px;
-    padding-bottom: 5px;
+  padding-right: 4px;
+  padding-bottom: 5px;
 }
 
 .header-background {
-    background-color: #ffffff;
+  background-color: #ffffff;
 }
 
-
 /*.type-header {
     padding-right: 4px;
 }
@@ -410,112 +409,111 @@ input::-webkit-inner-spin-button {
 }*/
 
 .clause-table-field[readonly] {
-    background-color: #EEEEF2;
-    /*[{plugin-table-header-background-color}]*/
-    border: 1px solid #CCCEDB;
-    /*[{plugin-table-border-color}]*/
+  background-color: #eeeef2;
+  /*[{plugin-table-header-background-color}]*/
+  border: 1px solid #cccedb;
+  /*[{plugin-table-border-color}]*/
 }
 
 .addClause-title {
-    /*[{common-common-controls-button-border-hover}]*/
-    cursor: pointer;
-    margin-left: -5px;
+  /*[{common-common-controls-button-border-hover}]*/
+  cursor: pointer;
+  margin-left: -5px;
 }
 
 .addClause {
-    width: 125px;
-    padding: 8px 0px 5px 5px;
-    border: 1px solid #fff;
-    margin-left: 5px;
+  width: 125px;
+  padding: 8px 0px 5px 5px;
+  border: 1px solid #fff;
+  margin-left: 5px;
 }
 
 .addClause:hover {
-    .hover();
+  .hover();
 }
 
 .addClause:active {
-    .active();
-    border: 1px dashed @AccentMedium;
+  .active();
+  border: 1px dashed @AccentMedium;
 }
 
 .clause-table-row {
-    min-width: 550px;
-    width: 100%;
+  min-width: 550px;
+  width: 100%;
 }
 
 .clause-table-field field-column {
-    min-width: 75px;
-    height: 30px;
-    width: 100%;
+  min-width: 75px;
+  height: 30px;
+  width: 100%;
 }
 
 .clause-table-field field-input {
-    min-width: 54px;
-    margin-left: -78px;
-    height: 25px;
-    border: none;
+  min-width: 54px;
+  margin-left: -78px;
+  height: 25px;
+  border: none;
 }
 
 .query-panel .row .spacing {
-    padding-bottom: 6px;
+  padding-bottom: 6px;
 }
 
 .query-panel .divider.horizontal {
-    height: 10px;
-    width: 100%
+  height: 10px;
+  width: 100%;
 }
 
 .inline-div {
-    display: inline
+  display: inline;
 }
 
 .querybuilder-addpropertyImg,
 .querybuilder-cancelImg {
-    width: 14px;
-    height: 14px;
-    margin-left: 3px;
-    margin-bottom: 8px;
+  width: 14px;
+  height: 14px;
+  margin-left: 3px;
+  margin-bottom: 8px;
 }
 
 .addclauseProperty-Img {
-    width: 14px;
-    height: 14px;
-    margin-bottom: 5px;
-    margin-left: 12px;
+  width: 14px;
+  height: 14px;
+  margin-bottom: 5px;
+  margin-left: 12px;
 }
 
 .entity-Add-Cancel {
-    padding: @DefaultSpace @SmallSpace @SmallSpace;
-    cursor: pointer;
+  // padding: @DefaultSpace @SmallSpace @SmallSpace;
+  cursor: pointer;
 }
 
 .entity-Add-Cancel:hover {
-    .hover();
+  .hover();
 }
 
 .entity-Add-Cancel:active {
-    .active();
+  .active();
 }
 
 .query-builder-isDisabled {
-    border: 1px solid #CCCEDB;
-    color: #ccc;
+  border: 1px solid #cccedb;
+  color: #ccc;
 }
 
 .edit-value-text {
-    padding-left: @DefaultSpace;
+  padding-left: @DefaultSpace;
 }
 
 .expand-triangle {
-    width: 10px;
-    height: 10px;
+  width: 10px;
+  height: 10px;
 }
 
 .expand-triangle-right {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 
-
 /*
 @media only screen and (max-width: 1200px) {
     .clause-table {
@@ -524,4 +522,4 @@ input::-webkit-inner-spin-button {
         width: 100%;
         padding-top: 10px;
     }
-}*/
+}*/

src/Common/Constants.ts

@@ -45,6 +45,8 @@ export class ArmResourceTypes {
 
 export class BackendDefaults {
   public static partitionKeyKind = "Hash";
+  public static partitionKeyMultiHash = "MultiHash";
+  public static maxNumMultiHashPartition = 2;
   public static singlePartitionStorageInGb: string = "10";
   public static multiPartitionStorageInGb: string = "100";
   public static maxChangeFeedRetentionDuration: number = 10;

src/Common/TableEntity.tsx

@@ -7,7 +7,7 @@ import {
   IStackTokens,
   Stack,
   TextField,
-  TooltipHost,
+  TooltipHost
 } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
 import DeleteIcon from "../../images/delete.svg";
@@ -73,6 +73,17 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
 
   const sectionStackTokens: IStackTokens = { childrenGap: 12 };
 
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.key === "Enter" || event.key === "Space") {
+      onEditEntity();
+    }
+  };
+  const handleKeyPressdelete = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.key === "Enter" || event.key === "Space") {
+      onDeleteEntity();
+    }
+  };
+
   const getEntityValueType = (): string => {
     const { Int, Smallint, Tinyint } = CassandraType;
     const { Double, Int32, Int64 } = TableType;
@@ -125,13 +136,32 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           onEntityTimeValueChange={onEntityTimeValueChange}
         />
         {!isEntityValueDisable && (
+          
           <TooltipHost content="Edit property" id="editTooltip">
-            <Image {...imageProps} src={EditIcon} alt="editEntity" id="editEntity" onClick={onEditEntity} />
+            <div tabIndex={0}>
+            <Image
+              {...imageProps}
+              src={EditIcon}
+              alt="editEntity"
+              id="editEntity"
+              onClick={onEditEntity}
+              onKeyPress={handleKeyPress}
+            />
+            </div>
           </TooltipHost>
+          
         )}
         {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
           <TooltipHost content="Delete property" id="deleteTooltip">
-            <Image {...imageProps} src={DeleteIcon} alt="delete entity" id="deleteEntity" onClick={onDeleteEntity} />
+            <Image
+              {...imageProps}
+              src={DeleteIcon}
+              alt="delete entity"
+              id="deleteEntity"
+              onClick={onDeleteEntity}
+              tabIndex={0}
+              onKeyPress={handleKeyPressdelete}
+            />
           </TooltipHost>
         )}
       </Stack>

src/Common/Tooltip/InfoTooltip.tsx

@@ -9,7 +9,7 @@ export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children }:
   return (
     <span>
       <TooltipHost content={children}>
-        <Icon iconName="Info" ariaLabel="Info" className="panelInfoIcon" tabIndex={0} />
+        <Icon iconName="Info" ariaLabel={children} className="panelInfoIcon" tabIndex={0} />
       </TooltipHost>
     </span>
   );

src/Common/dataAccess/deleteDocument.ts

@@ -4,6 +4,7 @@ import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationCons
 import { client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
+import { getPartitionKeyValue } from "./getPartitionKeyValue";
 
 export const deleteDocument = async (collection: CollectionBase, documentId: DocumentId): Promise<void> => {
   const entityName: string = getEntityName();
@@ -13,7 +14,7 @@ export const deleteDocument = async (collection: CollectionBase, documentId: Doc
     await client()
       .database(collection.databaseId)
       .container(collection.id())
-      .item(documentId.id(), documentId.partitionKeyValue?.length === 0 ? undefined : documentId.partitionKeyValue)
+      .item(documentId.id(), getPartitionKeyValue(documentId))
       .delete();
     logConsoleInfo(`Successfully deleted ${entityName} ${documentId.id()}`);
   } catch (error) {

src/Common/dataAccess/getPartitionKeyValue.ts

@@ -0,0 +1,12 @@
+import { userContext } from "UserContext";
+import DocumentId from "../../Explorer/Tree/DocumentId";
+
+export const getPartitionKeyValue = (documentId: DocumentId) => {
+  if (userContext.apiType === "Tables" && documentId.partitionKeyValue?.length === 0) {
+    return "";
+  }
+  if (documentId.partitionKeyValue?.length === 0) {
+    return undefined;
+  }
+  return documentId.partitionKeyValue;
+};

src/Common/dataAccess/readDocument.ts

@@ -6,6 +6,7 @@ import { HttpHeaders } from "../Constants";
 import { client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
+import { getPartitionKeyValue } from "./getPartitionKeyValue";
 
 export const readDocument = async (collection: CollectionBase, documentId: DocumentId): Promise<Item> => {
   const entityName = getEntityName();
@@ -21,8 +22,7 @@ export const readDocument = async (collection: CollectionBase, documentId: Docum
     const response = await client()
       .database(collection.databaseId)
       .container(collection.id())
-      // use undefined if the partitionKeyValue is empty
-      .item(documentId.id(), documentId.partitionKeyValue?.length === 0 ? undefined : documentId.partitionKeyValue)
+      .item(documentId.id(), getPartitionKeyValue(documentId))
       .read(options);
 
     return response?.resource;

src/Common/dataAccess/updateDocument.ts

@@ -6,6 +6,7 @@ import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationCons
 import { client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
+import { getPartitionKeyValue } from "./getPartitionKeyValue";
 
 export const updateDocument = async (
   collection: CollectionBase,
@@ -25,7 +26,7 @@ export const updateDocument = async (
     const response = await client()
       .database(collection.databaseId)
       .container(collection.id())
-      .item(documentId.id(), documentId.partitionKeyValue?.length === 0 ? undefined : documentId.partitionKeyValue)
+      .item(documentId.id(), getPartitionKeyValue(documentId))
       .replace(newDocument, options);
 
     logConsoleInfo(`Successfully updated ${entityName} ${documentId.id()}`);

src/Contracts/ViewModels.ts

@@ -397,6 +397,7 @@ export interface DataExplorerInputsFrame {
   defaultCollectionThroughput?: CollectionCreationDefaults;
   isPostgresAccount?: boolean;
   isReplica?: boolean;
+  clientIpAddress?: string;
   // TODO: Update this param in the OSS extension to remove isFreeTier, isMarlinServerGroup, and make nodes a flat array instead of an nested array
   connectionStringParams?: any;
   flights?: readonly string[];

src/Explorer/ContextMenuButtonFactory.tsx

@@ -85,7 +85,11 @@ export const createCollectionContextMenuButton = (
       iconSrc: HostedTerminalIcon,
       onClick: () => {
         const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
-        selectedCollection && selectedCollection.onNewMongoShellClick();
+        if (useNotebook.getState().isShellEnabled) {
+          container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
+        } else {
+          selectedCollection && selectedCollection.onNewMongoShellClick();
+        }
       },
       label: useNotebook.getState().isShellEnabled ? "Open Mongo Shell" : "New Shell",
     });

src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx

@@ -1,5 +1,5 @@
+import { HoverCard, HoverCardType, Icon, Label, Link, Stack } from "@fluentui/react";
 import * as React from "react";
-import { Icon, Label, Stack, HoverCard, HoverCardType, Link } from "@fluentui/react";
 import { CodeOfConductEndpoints } from "../../../../Common/Constants";
 import "./InfoComponent.less";
 
@@ -41,7 +41,7 @@ export class InfoComponent extends React.Component<InfoComponentProps> {
   public render(): JSX.Element {
     return (
       <HoverCard plainCardProps={{ onRenderPlainCard: this.onHover }} instantOpenOnClick type={HoverCardType.plain}>
-        <div className="infoPanelMain">
+        <div className="infoPanelMain" tabIndex={0}>
           <Icon className="infoIconMain" iconName="Help" styles={{ root: { verticalAlign: "middle" } }} />
           <Label className="infoLabelMain">Help</Label>
         </div>

src/Explorer/Controls/NotebookGallery/InfoComponent/__snapshots__/InfoComponent.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`InfoComponent renders 1`] = `
 >
   <div
     className="infoPanelMain"
+    tabIndex={0}
   >
     <Icon
       className="infoIconMain"

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

@@ -310,7 +310,9 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
         />
       )}
 
-      {this.isLargePartitionKeyEnabled() && <Text>Large {this.partitionKeyName.toLowerCase()} has been enabled</Text>}
+      {userContext.apiType === "SQL" && this.isLargePartitionKeyEnabled() && (
+        <Text>Large {this.partitionKeyName.toLowerCase()} has been enabled</Text>
+      )}
     </Stack>
   );
 

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

@@ -82,7 +82,6 @@ interface ThroughputInputAutoPilotV3State {
   spendAckChecked: boolean;
   exceedFreeTierThroughput: boolean;
 }
-
 export class ThroughputInputAutoPilotV3Component extends React.Component<
   ThroughputInputAutoPilotV3Props,
   ThroughputInputAutoPilotV3State
@@ -624,7 +623,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     return (
       <>
         {warningMessage && (
-          <MessageBar messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}>
+          <MessageBar
+            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+            role="alert"
+          >
             {warningMessage}
           </MessageBar>
         )}

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         "iconName": "WarningSolid",
       }
     }
+    role="alert"
   >
     <Text
       styles={

src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx

@@ -23,12 +23,12 @@ describe("ThroughputInput Pane", () => {
   });
 
   it("should switch mode properly", () => {
-    wrapper.find('[aria-label="Manual mode"]').simulate("change");
+    wrapper.find('[aria-label="Manual database throughput"]').simulate("change");
     expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe(
       "Container throughput (400 - unlimited RU/s)"
     );
 
-    wrapper.find('[aria-label="Autoscale mode"]').simulate("change");
+    wrapper.find('[aria-label="Autoscale database throughput"]').simulate("change");
     expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe("Container throughput (autoscale)");
   });
 });

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -185,9 +185,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
       </Stack>
 
       <Stack horizontal verticalAlign="center">
+        <div role="radiogroup">
         <input
+          id="Autoscale-input"
           className="throughputInputRadioBtn"
-          aria-label="Autoscale mode"
+          aria-label="Autoscale database throughput"
           aria-required={true}
           checked={isAutoscaleSelected}
           type="radio"
@@ -195,11 +197,14 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           tabIndex={0}
           onChange={(e) => handleOnChangeMode(e, "Autoscale")}
         />
-        <span className="throughputInputRadioBtnLabel">Autoscale</span>
+        <label htmlFor="Autoscale-input" className="throughputInputRadioBtnLabel">
+          Autoscale
+        </label>
 
         <input
+          id="Manual-input"
           className="throughputInputRadioBtn"
-          aria-label="Manual mode"
+          aria-label="Manual database throughput"
           checked={!isAutoscaleSelected}
           type="radio"
           aria-required={true}
@@ -207,14 +212,21 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           tabIndex={0}
           onChange={(e) => handleOnChangeMode(e, "Manual")}
         />
-        <span className="throughputInputRadioBtnLabel">Manual</span>
+        <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
+          Manual
+        </label>
+        </div>
       </Stack>
 
       {isAutoscaleSelected && (
         <Stack className="throughputInputSpacing">
-          <Text variant="small" aria-label="ruDescription">
+          <Text variant="small" aria-label="capacity calculator of azure cosmos db">
             Estimate your required RU/s with{" "}
-            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="ruDescription">
+            <Link
+              target="_blank"
+              href="https://cosmos.azure.com/capacitycalculator/"
+              aria-label="capacity calculator of azure cosmos db"
+            >
               capacity calculator
             </Link>
             .

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -344,15 +344,17 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                   onMouseLeave={[Function]}
                 >
                   <StyledIconBase
-                    ariaLabel="Info"
+                    ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                     className="panelInfoIcon"
                     iconName="Info"
+                    role="tooltip"
                     tabIndex={0}
                   >
                     <IconBase
-                      ariaLabel="Info"
+                      ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                       className="panelInfoIcon"
                       iconName="Info"
+                      role="tooltip"
                       styles={[Function]}
                       tabIndex={0}
                       theme={
@@ -630,10 +632,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       }
                     >
                       <i
-                        aria-label="Info"
+                        aria-label="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                         className="panelInfoIcon root-57"
                         data-icon-name="Info"
-                        role="img"
+                        role="tooltip"
                         tabIndex={0}
                       >
                         
@@ -654,40 +656,49 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       <div
         className="ms-Stack css-58"
       >
+        <div
+          key=".0:$.0"
+          role="radiogroup"
+        >
         <input
-          aria-label="Autoscale mode"
+          aria-label="Autoscale database throughput"
           aria-required={true}
           checked={true}
           className="throughputInputRadioBtn"
+          id="Autoscale-input"
           key=".0:$.0"
           onChange={[Function]}
           role="radio"
           tabIndex={0}
           type="radio"
         />
-        <span
+        <label
           className="throughputInputRadioBtnLabel"
+          htmlFor="Autoscale-input"
           key=".0:$.1"
         >
           Autoscale
-        </span>
+        </label>
         <input
-          aria-label="Manual mode"
+          aria-label="Manual database throughput"
           aria-required={true}
           checked={false}
           className="throughputInputRadioBtn"
+          id="Manual-input"
           key=".0:$.2"
           onChange={[Function]}
           role="radio"
           tabIndex={0}
           type="radio"
         />
-        <span
+        <label
           className="throughputInputRadioBtnLabel"
+          htmlFor="Manual-input"
           key=".0:$.3"
         >
-          Manual
-        </span>
+            Manual
+          </label>
+        </div>
       </div>
     </Stack>
     <Stack
@@ -697,23 +708,23 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
         className="ms-Stack throughputInputSpacing css-59"
       >
         <Text
-          aria-label="ruDescription"
+          aria-label="capacity calculator of azure cosmos db"
           key=".0:$.0"
           variant="small"
         >
           <span
-            aria-label="ruDescription"
+            aria-label="capacity calculator of azure cosmos db"
             className="css-54"
           >
             Estimate your required RU/s with
              
             <StyledLinkBase
-              aria-label="ruDescription"
+              aria-label="capacity calculator of azure cosmos db"
               href="https://cosmos.azure.com/capacitycalculator/"
               target="_blank"
             >
               <LinkBase
-                aria-label="ruDescription"
+                aria-label="capacity calculator of azure cosmos db"
                 href="https://cosmos.azure.com/capacitycalculator/"
                 styles={[Function]}
                 target="_blank"
@@ -992,7 +1003,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                 }
               >
                 <a
-                  aria-label="ruDescription"
+                  aria-label="capacity calculator of azure cosmos db"
                   className="ms-Link root-60"
                   href="https://cosmos.azure.com/capacitycalculator/"
                   onClick={[Function]}
@@ -1331,15 +1342,17 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       onMouseLeave={[Function]}
                     >
                       <StyledIconBase
-                        ariaLabel="Info"
+                        ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                         className="panelInfoIcon"
                         iconName="Info"
+                        role="tooltip"
                         tabIndex={0}
                       >
                         <IconBase
-                          ariaLabel="Info"
+                          ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                           className="panelInfoIcon"
                           iconName="Info"
+                          role="tooltip"
                           styles={[Function]}
                           tabIndex={0}
                           theme={
@@ -1617,10 +1630,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                           }
                         >
                           <i
-                            aria-label="Info"
+                            aria-label="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                             className="panelInfoIcon root-57"
                             data-icon-name="Info"
-                            role="img"
+                            role="tooltip"
                             tabIndex={0}
                           >
                             

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -10,7 +10,7 @@ import {
   IButtonStyles,
   IconButton,
   IContextualMenuItemProps,
-  IContextualMenuProps,
+  IContextualMenuProps
 } from "@fluentui/react";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";
@@ -195,7 +195,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
         </div>
         {node.children && (
           <AnimateHeight duration={TreeNodeComponent.transitionDurationMS} height={this.state.isExpanded ? "auto" : 0}>
-            <div className="nodeChildren" data-test={node.label}>
+            <div className="nodeChildren" data-test={node.label} role="group">
               {TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => (
                 <TreeNodeComponent
                   key={`${childNode.label}-${generation + 1}-${childNode.timestamp}`}

src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap

@@ -40,30 +40,32 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 9,
+  <div>
+    <div
+      className="treeNodeHeader "
+      data-test="label"
+      style={
+        Object {
+          "paddingLeft": 9,
+        }
       }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is collapsed"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
+      tabIndex={-1}
     >
-      label
-    </span>
+      <img
+        alt="label branch is collapsed"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
+      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+    </div>
   </div>
   <div
     className="loadingIconContainer"
@@ -100,6 +102,7 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
     <div
       className="nodeChildren"
       data-test="label"
+      role="group"
     >
       <TreeNodeComponent
         generation={3}
@@ -142,78 +145,80 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 23,
-      }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
-    >
-      label
-    </span>
+  <div>
     <div
-      onContextMenu={[Function]}
-      onKeyPress={[Function]}
+      className="treeNodeHeader "
+      data-test="label"
+      style={
+        Object {
+          "paddingLeft": 23,
+        }
+      }
+      tabIndex={-1}
     >
-      <CustomizedIconButton
-        ariaLabel="More"
-        className="treeMenuEllipsis"
-        menuIconProps={
-          Object {
-            "iconName": "More",
-            "styles": Object {
-              "root": Object {
-                "fontSize": "18px",
-                "fontWeight": "bold",
-              },
-            },
-          }
-        }
-        menuProps={
-          Object {
-            "contextualMenuItemAs": [Function],
-            "coverTarget": true,
-            "directionalHint": 3,
-            "isBeakVisible": false,
-            "items": Array [
-              Object {
-                "className": undefined,
-                "disabled": true,
-                "key": "menuLabel",
-                "onClick": [Function],
-                "onRenderIcon": [Function],
-                "text": "menuLabel",
-              },
-            ],
-            "onMenuDismissed": [Function],
-            "onMenuOpened": [Function],
-          }
-        }
-        name="More"
-        styles={
-          Object {
-            "rootFocused": Object {
-              "outline": "1px dashed undefined",
-            },
-          }
-        }
-        title="More"
+      <img
+        alt="label branch is expanded"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
       />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+      <div
+        onContextMenu={[Function]}
+        onKeyPress={[Function]}
+      >
+        <CustomizedIconButton
+          ariaLabel="More"
+          className="treeMenuEllipsis"
+          menuIconProps={
+            Object {
+              "iconName": "More",
+              "styles": Object {
+                "root": Object {
+                  "fontSize": "18px",
+                  "fontWeight": "bold",
+                },
+              },
+            }
+          }
+          menuProps={
+            Object {
+              "contextualMenuItemAs": [Function],
+              "coverTarget": true,
+              "directionalHint": 3,
+              "isBeakVisible": false,
+              "items": Array [
+                Object {
+                  "className": undefined,
+                  "disabled": true,
+                  "key": "menuLabel",
+                  "onClick": [Function],
+                  "onRenderIcon": [Function],
+                  "text": "menuLabel",
+                },
+              ],
+              "onMenuDismissed": [Function],
+              "onMenuOpened": [Function],
+            }
+          }
+          name="More"
+          styles={
+            Object {
+              "rootFocused": Object {
+                "outline": "1px dashed undefined",
+              },
+            }
+          }
+          title="More"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -251,6 +256,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
     <div
       className="nodeChildren"
       data-test="label"
+      role="group"
     >
       <TreeNodeComponent
         generation={13}
@@ -292,142 +298,31 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 9,
-      }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
-    >
-      label
-    </span>
-  </div>
-  <div
-    className="loadingIconContainer"
-  >
-    <img
-      className="loadingIcon"
-      hidden={true}
-      src=""
-    />
-  </div>
-  <AnimateHeight
-    animateOpacity={false}
-    animationStateClasses={
-      Object {
-        "animating": "rah-animating",
-        "animatingDown": "rah-animating--down",
-        "animatingToHeightAuto": "rah-animating--to-height-auto",
-        "animatingToHeightSpecific": "rah-animating--to-height-specific",
-        "animatingToHeightZero": "rah-animating--to-height-zero",
-        "animatingUp": "rah-animating--up",
-        "static": "rah-static",
-        "staticHeightAuto": "rah-static--height-auto",
-        "staticHeightSpecific": "rah-static--height-specific",
-        "staticHeightZero": "rah-static--height-zero",
-      }
-    }
-    applyInlineTransitions={true}
-    delay={0}
-    duration={200}
-    easing="ease"
-    height="auto"
-    style={Object {}}
-  >
+  <div>
     <div
-      className="nodeChildren"
+      className="treeNodeHeader "
       data-test="label"
-    />
-  </AnimateHeight>
-</div>
-`;
-
-exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents separated 1`] = `
-<div
-  className="nodeClassname main12 nodeItem "
-  id="id"
-  onClick={[Function]}
-  onKeyPress={[Function]}
-  role="treeitem"
->
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 23,
+      style={
+        Object {
+          "paddingLeft": 9,
+        }
       }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
+      tabIndex={-1}
     >
-      label
-    </span>
-    <div
-      onContextMenu={[Function]}
-      onKeyPress={[Function]}
-    >
-      <CustomizedIconButton
-        ariaLabel="More"
-        className="treeMenuEllipsis"
-        menuIconProps={
-          Object {
-            "iconName": "More",
-            "styles": Object {
-              "root": Object {
-                "fontSize": "18px",
-                "fontWeight": "bold",
-              },
-            },
-          }
-        }
-        menuProps={
-          Object {
-            "contextualMenuItemAs": [Function],
-            "coverTarget": true,
-            "directionalHint": 3,
-            "isBeakVisible": false,
-            "items": Array [],
-            "onMenuDismissed": [Function],
-            "onMenuOpened": [Function],
-          }
-        }
-        name="More"
-        styles={
-          Object {
-            "rootFocused": Object {
-              "outline": "1px dashed undefined",
-            },
-          }
-        }
-        title="More"
+      <img
+        alt="label branch is expanded"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
       />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
     </div>
   </div>
   <div
@@ -465,6 +360,123 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
     <div
       className="nodeChildren"
       data-test="label"
+      role="group"
+    />
+  </AnimateHeight>
+</div>
+`;
+
+exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents separated 1`] = `
+<div
+  className="nodeClassname main12 nodeItem "
+  id="id"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="treeitem"
+>
+  <div>
+    <div
+      className="treeNodeHeader "
+      data-test="label"
+      style={
+        Object {
+          "paddingLeft": 23,
+        }
+      }
+      tabIndex={-1}
+    >
+      <img
+        alt="label branch is expanded"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
+      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+      <div
+        onContextMenu={[Function]}
+        onKeyPress={[Function]}
+      >
+        <CustomizedIconButton
+          ariaLabel="More"
+          className="treeMenuEllipsis"
+          menuIconProps={
+            Object {
+              "iconName": "More",
+              "styles": Object {
+                "root": Object {
+                  "fontSize": "18px",
+                  "fontWeight": "bold",
+                },
+              },
+            }
+          }
+          menuProps={
+            Object {
+              "contextualMenuItemAs": [Function],
+              "coverTarget": true,
+              "directionalHint": 3,
+              "isBeakVisible": false,
+              "items": Array [],
+              "onMenuDismissed": [Function],
+              "onMenuOpened": [Function],
+            }
+          }
+          name="More"
+          styles={
+            Object {
+              "rootFocused": Object {
+                "outline": "1px dashed undefined",
+              },
+            }
+          }
+          title="More"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="loadingIconContainer"
+  >
+    <img
+      className="loadingIcon"
+      hidden={true}
+      src=""
+    />
+  </div>
+  <AnimateHeight
+    animateOpacity={false}
+    animationStateClasses={
+      Object {
+        "animating": "rah-animating",
+        "animatingDown": "rah-animating--down",
+        "animatingToHeightAuto": "rah-animating--to-height-auto",
+        "animatingToHeightSpecific": "rah-animating--to-height-specific",
+        "animatingToHeightZero": "rah-animating--to-height-zero",
+        "animatingUp": "rah-animating--up",
+        "static": "rah-static",
+        "staticHeightAuto": "rah-static--height-auto",
+        "staticHeightSpecific": "rah-static--height-specific",
+        "staticHeightZero": "rah-static--height-zero",
+      }
+    }
+    applyInlineTransitions={true}
+    delay={0}
+    duration={200}
+    easing="ease"
+    height="auto"
+    style={Object {}}
+  >
+    <div
+      className="nodeChildren"
+      data-test="label"
+      role="group"
     >
       <TreeNodeComponent
         generation={13}
@@ -534,30 +546,32 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 9,
+  <div>
+    <div
+      className="treeNodeHeader "
+      data-test="label"
+      style={
+        Object {
+          "paddingLeft": 9,
+        }
       }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
+      tabIndex={-1}
     >
-      label
-    </span>
+      <img
+        alt="label branch is expanded"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
+      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+    </div>
   </div>
   <div
     className="loadingIconContainer"
@@ -594,6 +608,7 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
     <div
       className="nodeChildren"
       data-test="label"
+      role="group"
     >
       <TreeNodeComponent
         generation={3}

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

@@ -133,7 +133,6 @@ describe("ContainerSampleGenerator", () => {
       } as DatabaseAccount,
     });
 
-    // Rejects with error that contains experience
     expect(ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub)).rejects.toMatch(experience);
   });
 

src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx

@@ -40,6 +40,7 @@ export class GraphVizComponent extends React.Component<GraphVizComponentProps> {
             {/* svg load more icon inlined as-is here: remove the style="fill:#374649;" so we can override it */}
             <svg
               role="img"
+              aria-label="graph"
               version="1.1"
               xmlns="http://www.w3.org/2000/svg"
               xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -135,6 +136,7 @@ export class GraphVizComponent extends React.Component<GraphVizComponentProps> {
           <g id="triangleRight">
             <svg
               role="img"
+              aria-label="graph"
               version="1.1"
               id="Layer_1"
               xmlns="http://www.w3.org/2000/svg"

src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx

@@ -17,19 +17,20 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
       <div className="middlePane">
         <div className="graphTitle">
           <span className="paneTitle">Graph</span>
-          <span
+          <button
+          style={{border:'none',background:'none'}}
             className="graphExpandCollapseBtn pull-right"
             onClick={this.props.toggleExpandGraph}
             role="button"
             aria-expanded={this.props.isTabsContentExpanded}
             aria-name="View graph in full screen"
-            tabIndex={0}
+ 
           >
             <img
               src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}
               alt={this.props.isTabsContentExpanded ? "collapse graph content" : "expand graph content"}
             />
-          </span>
+          </button>
         </div>
         <div className="maingraphContainer">
           <GraphVizComponent forceGraphParams={this.props.graphVizProps.forceGraphParams} />

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -166,7 +166,11 @@ export function createContextCommandBarButtons(
       iconAlt: label,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
-        selectedCollection && selectedCollection.onNewMongoShellClick();
+        if (useNotebook.getState().isShellEnabled) {
+          container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
+        } else {
+          selectedCollection && selectedCollection.onNewMongoShellClick();
+        }
       },
       commandButtonLabel: label,
       ariaLabel: label,

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -147,12 +147,10 @@ export class NotificationConsoleComponent extends React.Component<
             <div className="notificationConsoleControls">
               <Dropdown
                 label="Filter:"
-                role="combobox"
                 selectedKey={this.state.selectedFilter}
                 options={NotificationConsoleComponent.FilterOptions}
                 onChange={this.onFilterSelected.bind(this)}
-                aria-labelledby="consoleFilterLabel"
-                aria-label={this.state.selectedFilter}
+
               />
               <span className="consoleSplitter" />
               <span

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

@@ -112,8 +112,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
         className="notificationConsoleControls"
       >
         <Dropdown
-          aria-label="All"
-          aria-labelledby="consoleFilterLabel"
           label="Filter:"
           onChange={[Function]}
           options={
@@ -278,8 +276,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
         className="notificationConsoleControls"
       >
         <Dropdown
-          aria-label="All"
-          aria-labelledby="consoleFilterLabel"
           label="Filter:"
           onChange={[Function]}
           options={

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -13,7 +13,7 @@ import {
   Stack,
   TeachingBubble,
   Text,
-  TooltipHost,
+  TooltipHost
 } from "@fluentui/react";
 import * as Constants from "Common/Constants";
 import { createCollection } from "Common/dataAccess/createCollection";
@@ -89,9 +89,10 @@ export interface AddCollectionPanelState {
   enableIndexing: boolean;
   isSharded: boolean;
   partitionKey: string;
+  subPartitionKeys: string[];
   enableDedicatedThroughput: boolean;
   createMongoWildCardIndex: boolean;
-  useHashV2: boolean;
+  useHashV1: boolean;
   enableAnalyticalStore: boolean;
   uniqueKeys: string[];
   errorMessage: string;
@@ -99,6 +100,7 @@ export interface AddCollectionPanelState {
   isExecuting: boolean;
   isThroughputCapExceeded: boolean;
   teachingBubbleStep: number;
+  isParentTooltipVisible:boolean;
 }
 
 export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
@@ -107,6 +109,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   private collectionThroughput: number;
   private isCollectionAutoscale: boolean;
   private isCostAcknowledged: boolean;
+  
 
   constructor(props: AddCollectionPanelProps) {
     super(props);
@@ -121,10 +124,11 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       enableIndexing: true,
       isSharded: userContext.apiType !== "Tables",
       partitionKey: this.getPartitionKey(),
+      subPartitionKeys: [],
       enableDedicatedThroughput: false,
       createMongoWildCardIndex:
         isCapabilityEnabled("EnableMongo") && !isCapabilityEnabled("EnableMongo16MBDocumentSupport"),
-      useHashV2: false,
+      useHashV1: false,
       enableAnalyticalStore: false,
       uniqueKeys: [],
       errorMessage: "",
@@ -132,13 +136,16 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       isExecuting: false,
       isThroughputCapExceeded: false,
       teachingBubbleStep: 0,
+      isParentTooltipVisible: false,
     };
+    
   }
 
   componentDidMount(): void {
     if (this.state.teachingBubbleStep === 0 && this.props.isQuickstart) {
       this.setState({ teachingBubbleStep: 1 });
     }
+
   }
 
   render(): JSX.Element {
@@ -260,11 +267,19 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   true
                 ).toLocaleLowerCase()}.`}
               >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon
+                  iconName="Info"
+                  className="panelInfoIcon"
+                  tabIndex={0}
+                  ariaLabel={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
+                    true
+                  ).toLocaleLowerCase()}.`}
+                />
               </TooltipHost>
             </Stack>
 
             <Stack horizontal verticalAlign="center">
+              <div role='radiogroup'>
               <input
                 className="panelRadioBtn"
                 checked={this.state.createNewDatabase}
@@ -291,6 +306,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
               />
               <span className="panelRadioBtnLabel">Use existing</span>
+              </div>
             </Stack>
 
             {this.state.createNewDatabase && (
@@ -336,7 +352,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                         true
                       ).toLocaleLowerCase()} within the database.`}
                     >
-                      <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                      <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>
                 )}
@@ -384,7 +407,13 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 directionalHint={DirectionalHint.bottomLeftEdge}
                 content={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
               >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon
+                  iconName="Info"
+                  className="panelInfoIcon"
+                  tabIndex={0}
+                  ariaLabel={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
+                  role="button"
+                />
               </TooltipHost>
             </Stack>
 
@@ -467,7 +496,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       "Sharded collections split your data across many replica sets (shards) to achieve unlimited scalability. Sharded collections require choosing a shard key (field) to evenly distribute your data."
                     }
                   >
-                    <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                    <Icon
+                      iconName="Info"
+                      className="panelInfoIcon"
+                      tabIndex={0}
+                      ariaLabel={
+                        "Sharded collections split your data across many replica sets (shards) to achieve unlimited scalability. Sharded collections require choosing a shard key (field) to evenly distribute your data."
+                      }
+                    />
                   </TooltipHost>
                 </Stack>
 
@@ -514,7 +550,12 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   directionalHint={DirectionalHint.bottomLeftEdge}
                   content={this.getPartitionKeyTooltipText()}
                 >
-                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                  <Icon
+                    iconName="Info"
+                    className="panelInfoIcon"
+                    tabIndex={0}
+                    ariaLabel={this.getPartitionKeyTooltipText()}
+                  />
                 </TooltipHost>
               </Stack>
 
@@ -546,6 +587,77 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   }
                 }}
               />
+              {userContext.apiType === "SQL" &&
+                this.state.subPartitionKeys.map((subPartitionKey: string, index: number) => {
+                  return (
+                    <Stack style={{ marginBottom: 8 }} key={`uniqueKey${index}`} horizontal>
+                      <div
+                        style={{
+                          width: "20px",
+                          border: "solid",
+                          borderWidth: "0px 0px 1px 1px",
+                          marginRight: "5px",
+                        }}
+                      ></div>
+                      <input
+                        type="text"
+                        id="addCollection-partitionKeyValue"
+                        key={`addCollection-partitionKeyValue_${index}`}
+                        aria-required
+                        required
+                        size={40}
+                        tabIndex={index > 0 ? 1 : 0}
+                        className="panelTextField"
+                        autoComplete="off"
+                        placeholder={this.getPartitionKeyPlaceHolder(index)}
+                        aria-label={this.getPartitionKeyName()}
+                        pattern={".*"}
+                        title={""}
+                        value={subPartitionKey}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                          const subPartitionKeys = [...this.state.subPartitionKeys];
+                          if (!this.state.subPartitionKeys[index] && !event.target.value.startsWith("/")) {
+                            subPartitionKeys[index] = "/" + event.target.value.trim();
+                            this.setState({ subPartitionKeys });
+                          } else {
+                            subPartitionKeys[index] = event.target.value.trim();
+                            this.setState({ subPartitionKeys });
+                          }
+                        }}
+                      />
+                      <IconButton
+                        iconProps={{ iconName: "Delete" }}
+                        style={{ height: 27 }}
+                        onClick={() => {
+                          const subPartitionKeys = this.state.subPartitionKeys.filter((uniqueKey, j) => index !== j);
+                          this.setState({ subPartitionKeys });
+                        }}
+                      />
+                    </Stack>
+                  );
+                })}
+              {userContext.apiType === "SQL" && (
+                <Stack className="panelGroupSpacing">
+                  <DefaultButton
+                    styles={{ root: { padding: 0, width: 250, height: 30 }, label: { fontSize: 12 } }}
+                    hidden={this.state.useHashV1}
+                    disabled={this.state.subPartitionKeys.length >= Constants.BackendDefaults.maxNumMultiHashPartition}
+                    onClick={() => this.setState({ subPartitionKeys: [...this.state.subPartitionKeys, ""] })}
+                  >
+                    Add hierarchical partition key (preview)
+                  </DefaultButton>
+                  {this.state.subPartitionKeys.length > 0 && (
+                    <Text variant="small">
+                      <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
+                      partition your data with up to three levels of keys for better data distribution. Requires preview
+                      version of .NET V3 or Java V4 SDK.{" "}
+                      <Link href="https://aka.ms/cosmos-hierarchical-partitioning" target="_blank">
+                        Learn more
+                      </Link>
+                    </Text>
+                  )}
+                </Stack>
+              )}
             </Stack>
           )}
 
@@ -572,7 +684,17 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   does not count towards the throughput you provisioned for the database. This throughput amount will be
                   billed in addition to the throughput amount you provisioned at the database level.`}
               >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon
+                  iconName="Info"
+                  className="panelInfoIcon"
+                  tabIndex={0}
+                  ariaLabel={`You can optionally provision dedicated throughput for a ${getCollectionName().toLocaleLowerCase()} within a database that has throughput
+                provisioned. This dedicated throughput amount will not be shared with other ${getCollectionName(
+                  true
+                ).toLocaleLowerCase()} in the database and
+                does not count towards the throughput you provisioned for the database. This throughput amount will be
+                billed in addition to the throughput amount you provisioned at the database level.`}
+                />
               </TooltipHost>
             </Stack>
           )}
@@ -603,11 +725,18 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 </Text>
                 <TooltipHost
                   directionalHint={DirectionalHint.bottomLeftEdge}
-                  content="Unique keys provide developers with the ability to add a layer of data integrity to their database. By
-                      creating a unique key policy when a container is created, you ensure the uniqueness of one or more values
-                      per partition key."
+                  content={
+                    "Unique keys provide developers with the ability to add a layer of data integrity to their database. By creating a unique key policy when a container is created, you ensure the uniqueness of one or more values per partition key."
+                  }
                 >
-                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                  <Icon
+                    iconName="Info"
+                    className="panelInfoIcon"
+                    tabIndex={0}
+                    ariaLabel={
+                      "Unique keys provide developers with the ability to add a layer of data integrity to their database. By creating a unique key policy when a container is created, you ensure the uniqueness of one or more values per partition key."
+                    }
+                  />
                 </TooltipHost>
               </Stack>
 
@@ -670,11 +799,18 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   directionalHint={DirectionalHint.bottomLeftEdge}
                   content={this.getAnalyticalStorageTooltipContent()}
                 >
-                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                  <Icon
+                    iconName="Info"
+                    className="panelInfoIcon"
+                    tabIndex={0}
+                    ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without
+        impacting the performance of transactional workloads."
+                  />
                 </TooltipHost>
               </Stack>
 
               <Stack horizontal verticalAlign="center">
+                <div role="radiogroup">
                 <input
                   className="panelRadioBtn"
                   checked={this.state.enableAnalyticalStore}
@@ -704,6 +840,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
                 />
                 <span className="panelRadioBtnLabel">Off</span>
+                </div>
               </Stack>
 
               {!this.isSynapseLinkEnabled() && (
@@ -747,7 +884,12 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                         directionalHint={DirectionalHint.bottomLeftEdge}
                         content="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
                       >
-                        <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                        <Icon
+                          iconName="Info"
+                          className="panelInfoIcon"
+                          tabIndex={0}
+                          ariaLabel="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
+                        />
                       </TooltipHost>
                     </Stack>
 
@@ -767,18 +909,29 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 )}
 
                 {userContext.apiType === "SQL" && (
-                  <Checkbox
-                    label="My partition key is larger than 101 bytes"
-                    checked={this.state.useHashV2}
-                    styles={{
-                      text: { fontSize: 12 },
-                      checkbox: { width: 12, height: 12 },
-                      label: { padding: 0, alignItems: "center" },
-                    }}
-                    onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
-                      this.setState({ useHashV2: isChecked })
-                    }
-                  />
+                  <Stack className="panelGroupSpacing">
+                    <Checkbox
+                      label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
+                      checked={this.state.useHashV1}
+                      styles={{
+                        text: { fontSize: 12 },
+                        checkbox: { width: 12, height: 12 },
+                        label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
+                      }}
+                      onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                        this.setState({ useHashV1: isChecked, subPartitionKeys: [] })
+                      }
+                    />
+                    <Text variant="small">
+                      <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> To ensure compatibility with
+                      older SDKs, the created container will use a legacy partitioning scheme that supports partition
+                      key values of size only up to 101 bytes. If this is enabled, you will not be able to use
+                      hierarchical partition keys.{" "}
+                      <Link href="https://aka.ms/cosmos-large-pk" target="_blank">
+                        Learn more
+                      </Link>
+                    </Text>
+                  </Stack>
                 )}
               </Stack>
             </CollapsibleSectionComponent>
@@ -833,12 +986,20 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     return isLowerCase ? partitionKeyName.toLocaleLowerCase() : partitionKeyName;
   }
 
-  private getPartitionKeyPlaceHolder(): string {
+  private getPartitionKeyPlaceHolder(index?: number): string {
     switch (userContext.apiType) {
       case "Mongo":
-        return "e.g., address.zipCode";
+        return "e.g., categoryId";
       case "Gremlin":
         return "e.g., /address";
+      case "SQL":
+        return `${
+          index === undefined
+            ? "Required - first partition key e.g., /TenantId"
+            : index === 0
+            ? "second partition key e.g., /UserId"
+            : "third partition key e.g., /SessionId"
+        }`;
       default:
         return "e.g., /address/zipCode";
     }
@@ -960,7 +1121,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       return userContext.apiType === "SQL" ? "/pk" : "pk";
     }
     if (this.props.isQuickstart) {
-      return userContext.apiType === "SQL" ? "/address" : "address";
+      return userContext.apiType === "SQL" ? "/categoryId" : "categoryId";
     }
     return "";
   }
@@ -1164,11 +1325,16 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     }
 
     const uniqueKeyPolicy: DataModels.UniqueKeyPolicy = this.parseUniqueKeys();
-    const partitionKeyVersion = this.state.useHashV2 ? 2 : undefined;
+    const partitionKeyVersion = this.state.useHashV1 ? undefined : 2;
     const partitionKey: DataModels.PartitionKey = partitionKeyString
       ? {
-          paths: [partitionKeyString],
-          kind: "Hash",
+          paths: [
+            partitionKeyString,
+            ...(userContext.apiType === "SQL" && this.state.subPartitionKeys.length > 0
+              ? this.state.subPartitionKeys
+              : []),
+          ],
+          kind: userContext.apiType === "SQL" && this.state.subPartitionKeys.length > 0 ? "MultiHash" : "Hash",
           version: partitionKeyVersion,
         }
       : undefined;

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -89,8 +89,8 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
       }
     } catch (error) {
       setLoadingFalse();
-      setFormError(error);
       const errorMessage = getErrorMessage(error);
+      setFormError(errorMessage);
       TelemetryProcessor.traceFailure(
         Action.DeleteDatabase,
         {

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -48,7 +48,7 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
           )}
         </Text>
         {showErrorDetails && (
-          <a className="paneErrorLink" role="link" onClick={expandConsole}>
+          <a className="paneErrorLink" role="link" onClick={expandConsole} tabIndex={0} onKeyPress={expandConsole}>
             More details
           </a>
         )}

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -242,6 +242,11 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
     submitButtonText: getButtonLabel(userContext.apiType),
     onSubmit,
   };
+  const handlekeypressaddentity = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.key === "Enter" || event.key === "Space") {
+      addNewEntity();
+    }
+  };
 
   return (
     <RightPaneForm {...props}>
@@ -284,7 +289,13 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
           );
         })}
         {userContext.apiType !== "Cassandra" && (
-          <Stack horizontal onClick={addNewEntity} className="addButtonEntiy">
+          <Stack
+            horizontal
+            onClick={addNewEntity}
+            className="addButtonEntiy"
+            tabIndex={0}
+            onKeyPress={handlekeypressaddentity}
+          >
             <Image {...imageProps} src={AddPropertyIcon} alt="Add Entity" />
             <Text className="addNewParamStyle">{getAddButtonLabel(userContext.apiType)}</Text>
           </Stack>

src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap

@@ -29,10 +29,14 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
           className="addButtonEntiy"
           horizontal={true}
           onClick={[Function]}
+          onKeyPress={[Function]}
+          tabIndex={0}
         >
           <div
             className="ms-Stack addButtonEntiy css-53"
             onClick={[Function]}
+            onKeyPress={[Function]}
+            tabIndex={0}
           >
             <StyledImageBase
               alt="Add Entity"

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

@@ -31,6 +31,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           directionalHint={4}
         >
           <Icon
+            ariaLabel="A database is analogous to a namespace. It is the unit of management for a set of containers."
             className="panelInfoIcon"
             iconName="Info"
             tabIndex={0}
@@ -41,39 +42,43 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         horizontal={true}
         verticalAlign="center"
       >
-        <input
-          aria-checked={true}
-          aria-label="Create new database"
-          checked={true}
-          className="panelRadioBtn"
-          id="databaseCreateNew"
-          name="databaseType"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="panelRadioBtnLabel"
+        <div
+          role="radiogroup"
         >
-          Create new
-        </span>
-        <input
-          aria-checked={false}
-          aria-label="Use existing database"
-          checked={false}
-          className="panelRadioBtn"
-          name="databaseType"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="panelRadioBtnLabel"
-        >
-          Use existing
-        </span>
+          <input
+            aria-checked={true}
+            aria-label="Create new database"
+            checked={true}
+            className="panelRadioBtn"
+            id="databaseCreateNew"
+            name="databaseType"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <span
+            className="panelRadioBtnLabel"
+          >
+            Create new
+          </span>
+          <input
+            aria-checked={false}
+            aria-label="Use existing database"
+            checked={false}
+            className="panelRadioBtn"
+            name="databaseType"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <span
+            className="panelRadioBtnLabel"
+          >
+            Use existing
+          </span>
+        </div>
       </Stack>
       <Stack
         className="panelGroupSpacing"
@@ -124,6 +129,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
             directionalHint={4}
           >
             <Icon
+              ariaLabel="Throughput configured at the database level will be shared across all containers within the database."
               className="panelInfoIcon"
               iconName="Info"
               tabIndex={0}
@@ -163,8 +169,10 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           directionalHint={4}
         >
           <Icon
+            ariaLabel="Unique identifier for the container and used for id-based routing through REST and all SDKs."
             className="panelInfoIcon"
             iconName="Info"
+            role="button"
             tabIndex={0}
           />
         </StyledTooltipHostBase>
@@ -206,6 +214,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           directionalHint={4}
         >
           <Icon
+            ariaLabel="The partition key is used to automatically distribute data across partitions for scalability. Choose a property in your JSON document that has a wide range of values and evenly distributes request volume. For small read-heavy workloads or write-heavy workloads of any size, id is often a good choice."
             className="panelInfoIcon"
             iconName="Info"
             tabIndex={0}
@@ -223,13 +232,36 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         id="addCollection-partitionKeyValue"
         onChange={[Function]}
         pattern=".*"
-        placeholder="e.g., /address/zipCode"
+        placeholder="Required - first partition key e.g., /TenantId"
         required={true}
         size={40}
         title=""
         type="text"
         value=""
       />
+      <Stack
+        className="panelGroupSpacing"
+      >
+        <CustomizedDefaultButton
+          disabled={false}
+          hidden={false}
+          onClick={[Function]}
+          styles={
+            Object {
+              "label": Object {
+                "fontSize": 12,
+              },
+              "root": Object {
+                "height": 30,
+                "padding": 0,
+                "width": 250,
+              },
+            }
+          }
+        >
+          Add hierarchical partition key (preview)
+        </CustomizedDefaultButton>
+      </Stack>
     </Stack>
     <Stack>
       <Stack
@@ -246,6 +278,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           directionalHint={4}
         >
           <Icon
+            ariaLabel="Unique keys provide developers with the ability to add a layer of data integrity to their database. By creating a unique key policy when a container is created, you ensure the uniqueness of one or more values per partition key."
             className="panelInfoIcon"
             iconName="Info"
             tabIndex={0}
@@ -303,6 +336,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           directionalHint={4}
         >
           <Icon
+            ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
             className="panelInfoIcon"
             iconName="Info"
             tabIndex={0}
@@ -313,42 +347,46 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         horizontal={true}
         verticalAlign="center"
       >
-        <input
-          aria-checked={false}
-          aria-label="Enable analytical store"
-          checked={false}
-          className="panelRadioBtn"
-          disabled={true}
-          id="enableAnalyticalStoreBtn"
-          name="analyticalStore"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="panelRadioBtnLabel"
+        <div
+          role="radiogroup"
         >
-          On
-        </span>
-        <input
-          aria-checked={true}
-          aria-label="Disable analytical store"
-          checked={true}
-          className="panelRadioBtn"
-          disabled={true}
-          id="disableAnalyticalStoreBtn"
-          name="analyticalStore"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="panelRadioBtnLabel"
-        >
-          Off
-        </span>
+          <input
+            aria-checked={false}
+            aria-label="Enable analytical store"
+            checked={false}
+            className="panelRadioBtn"
+            disabled={true}
+            id="enableAnalyticalStoreBtn"
+            name="analyticalStore"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <span
+            className="panelRadioBtnLabel"
+          >
+            On
+          </span>
+          <input
+            aria-checked={true}
+            aria-label="Disable analytical store"
+            checked={true}
+            className="panelRadioBtn"
+            disabled={true}
+            id="disableAnalyticalStoreBtn"
+            name="analyticalStore"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <span
+            className="panelRadioBtnLabel"
+          >
+            Off
+          </span>
+        </div>
       </Stack>
       <Stack
         className="panelGroupSpacing"
@@ -396,26 +434,49 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         className="panelGroupSpacing"
         id="collapsibleSectionContent"
       >
-        <StyledCheckboxBase
-          checked={false}
-          label="My partition key is larger than 101 bytes"
-          onChange={[Function]}
-          styles={
-            Object {
-              "checkbox": Object {
-                "height": 12,
-                "width": 12,
-              },
-              "label": Object {
-                "alignItems": "center",
-                "padding": 0,
-              },
-              "text": Object {
-                "fontSize": 12,
-              },
+        <Stack
+          className="panelGroupSpacing"
+        >
+          <StyledCheckboxBase
+            checked={false}
+            label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
+            onChange={[Function]}
+            styles={
+              Object {
+                "checkbox": Object {
+                  "height": 12,
+                  "width": 12,
+                },
+                "label": Object {
+                  "alignItems": "center",
+                  "padding": 0,
+                  "whiteSpace": "break-spaces",
+                  "wordWrap": "break-word",
+                },
+                "text": Object {
+                  "fontSize": 12,
+                },
+              }
             }
-          }
-        />
+          />
+          <Text
+            variant="small"
+          >
+            <Icon
+              className="removeIcon"
+              iconName="InfoSolid"
+              tabIndex={0}
+            />
+             To ensure compatibility with older SDKs, the created container will use a legacy partitioning scheme that supports partition key values of size only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.
+             
+            <StyledLinkBase
+              href="https://aka.ms/cosmos-large-pk"
+              target="_blank"
+            >
+              Learn more
+            </StyledLinkBase>
+          </Text>
+        </Stack>
       </Stack>
     </CollapsibleSectionComponent>
   </div>

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -9,7 +9,7 @@ import {
   Stack,
   TeachingBubble,
   TeachingBubbleContent,
-  Text,
+  Text
 } from "@fluentui/react";
 import { sendMessage } from "Common/MessageHandler";
 import { MessageTypes } from "Contracts/ExplorerContracts";
@@ -116,7 +116,9 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         <form className="connectExplorerFormContainer">
           <div className="splashScreenContainer">
             <div className="splashScreen">
-              <div className="title">
+              <div className="title" aria-label={userContext.apiType === "Postgres"
+                  ? "Welcome to Azure Cosmos DB for PostgreSQL"
+                  : "Welcome to Azure Cosmos DB"}>
                 {userContext.apiType === "Postgres"
                   ? "Welcome to Azure Cosmos DB for PostgreSQL"
                   : "Welcome to Azure Cosmos DB"}
@@ -528,7 +530,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               >
                 {item.title}
               </Link>
-              <Image src={LinkIcon} />
+              <Image src={LinkIcon} alt=" " />
             </Stack>
             <Text>{item.description}</Text>
           </Stack>
@@ -563,7 +565,17 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
   }
 
   private getLearningResourceItems(): JSX.Element {
-    let items: { link: string; title: string; description: string }[];
+    interface item {
+      link: string;
+      title: string;
+      description: string;
+    }
+    const cdbLiveTv: item = {
+      link: "https://developer.azurecosmosdb.com/tv",
+      title: "Learn the Fundamentals",
+      description: "Watch Azure Cosmos DB Live TV show introductory and how to videos.",
+    };
+    let items: item[];
     switch (userContext.apiType) {
       case "SQL":
       case "Postgres":
@@ -573,11 +585,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
             title: "Get Started using an SDK",
             description: "Learn about the Azure Cosmos DB SDK.",
           },
-          {
-            link: "https://aka.ms/msl-complex-queries",
-            title: "Master Complex Queries",
-            description: "Learn how to author complex queries.",
-          },
+          cdbLiveTv,
           {
             link: "https://aka.ms/msl-move-data",
             title: "Migrate Your Data",
@@ -597,11 +605,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
             title: "Getting Started Guide",
             description: "Learn the basics to get started.",
           },
-          {
-            link: "http://aka.ms/mongodotnet",
-            title: "Build a web API",
-            description: "Create a web API with the.NET SDK.",
-          },
+          cdbLiveTv,
         ];
         break;
       case "Cassandra":
@@ -611,11 +615,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
             title: "Create a Container",
             description: "Get to know the create a container options.",
           },
-          {
-            link: "https://aka.ms/cassandraserverdiagnostics",
-            title: "Run Server Diagnostics",
-            description: "Learn how to run server diagnostics.",
-          },
+          cdbLiveTv,
           {
             link: "https://aka.ms/Cassandrathroughput",
             title: "Provision Throughput",
@@ -635,11 +635,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
             title: "Import Graph Data",
             description: "Learn Bulk ingestion data using BulkExecutor",
           },
-          {
-            link: "https://aka.ms/graphoptimize",
-            title: "Optimize your Queries",
-            description: "Learn how to evaluate your Gremlin queries",
-          },
+          cdbLiveTv,
         ];
         break;
       case "Tables":
@@ -654,11 +650,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
             title: "Build a Java App",
             description: "Create a Azure Cosmos DB for Table app with Java SDK ",
           },
-          {
-            link: "https://aka.ms/tablenodejs",
-            title: "Build a Node.js App",
-            description: "Create a Azure Cosmos DB for Table app with Node.js SDK",
-          },
+          cdbLiveTv,
         ];
         break;
     }

src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts

@@ -516,7 +516,7 @@ export default class QueryBuilderViewModel {
   };
 
   public onAddNewClauseKeyDown = (event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+    if (event.key === "Enter" || event.key === "Space") {
       this.addClauseIndex(this.clauseArray().length - 1);
       event.stopPropagation();
       return false;

src/Explorer/Tabs/QueryTablesTab.html

@@ -70,24 +70,19 @@
             <tbody data-bind="template: { name: 'queryClause-template', foreach: clauseArray, as: 'clause' }"></tbody>
           </table>
         </div>
-        <div
-          class="addClause"
-          role="button"
-          data-bind="click: addNewClause, event: { keydown: onAddNewClauseKeyDown }, attr: { title: addNewClauseLine }"
-          tabindex="0"
+        <button
+          data-bind="click: addNewClause, event: { keydown: onAddNewClauseKeyDown }"
+          style="border: none; background: none"
         >
-          <div class="addClause-heading">
-            <span class="clause-table addClause-title">
-              <img
-                class="addclauseProperty-Img"
-                style="margin-bottom: 5px"
-                src="/Add-property.svg"
-                alt="Add new clause"
-              />
-              <span style="margin-left: 5px" data-bind="text: addNewClauseLine"></span>
-            </span>
+          <div class="addClause" data-bind=" ">
+            <div class="addClause-heading">
+              <span class="clause-table addClause-title">
+                <img class="addclauseProperty-Img" style="margin-bottom: 5px" src="/Add-property.svg" />
+                <span style="margin-left: 5px" data-bind="text: addNewClauseLine"></span>
+              </span>
+            </div>
           </div>
-        </div>
+        </button>
       </div>
     </div>
     <!-- Tables Query Tab Query Helper - End-->
@@ -168,22 +163,20 @@
 <script type="text/html" id="queryClause-template">
   <tr class="clause-table-row">
     <td class="clause-table-cell action-column">
-      <span
-        class="entity-Add-Cancel"
-        role="button"
-        tabindex="0"
+      <button
         data-bind="click: $parent.addClauseIndex.bind($data, $index()), event: { keydown: $parent.onAddClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.insertNewFilterLine}"
       >
-        <img class="querybuilder-addpropertyImg" src="/Add-property.svg" alt="Add clause" />
-      </span>
-      <span
-        class="entity-Add-Cancel"
-        role="button"
-        tabindex="0"
+        <span class="entity-Add-Cancel" role="button">
+          <img class="querybuilder-addpropertyImg" src="/Add-property.svg" alt="Add clause" />
+        </span>
+      </button>
+      <button
         data-bind="hasFocus: isDeleteButtonFocused, click: $parent.deleteClause.bind($data, $index()), event: { keydown: $parent.onDeleteClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.removeThisFilterLine}"
       >
-        <img class="querybuilder-cancelImg" src="/Entity_cancel.svg" alt="Delete clause" />
-      </span>
+        <span class="entity-Add-Cancel" role="button">
+          <img class="querybuilder-cancelImg" src="/Entity_cancel.svg" alt="Delete clause" />
+        </span>
+      </button>
     </td>
     <td class="clause-table-cell group-control-column">
       <input type="checkbox" aria-label="And/Or" data-bind="checked: checkedForGrouping" />

src/Explorer/Tabs/Tabs.tsx

@@ -24,22 +24,21 @@ interface TabsProps {
 }
 
 export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
-  const { openedTabs, openedReactTabs, activeTab, activeReactTab, showNetworkSettingsWarning } = useTabs();
+  const { openedTabs, openedReactTabs, activeTab, activeReactTab, networkSettingsWarning } = useTabs();
 
   return (
     <div className="tabsManagerContainer">
-      {showNetworkSettingsWarning && (
+      {networkSettingsWarning && (
         <MessageBar
           messageBarType={MessageBarType.warning}
           actions={
-            <MessageBarButton onClick={() => sendMessage({ type: MessageTypes.OpenCosmosDBNetworkingBlade })}>
+            <MessageBarButton onClick={() => sendMessage({ type: MessageTypes.OpenPostgresNetworkingBlade })}>
               Change network settings
             </MessageBarButton>
           }
           messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
         >
-          The Network settings for this account are preventing access from Data Explorer. Please allow access from Azure
-          Portal to proceed.
+          {networkSettingsWarning}
         </MessageBar>
       )}
       <div id="content" className="flexContainer hideOverflows">

src/Platform/Hosted/extractFeatures.ts

@@ -29,6 +29,7 @@ export type Features = {
   readonly mongoProxyEndpoint?: string;
   readonly mongoProxyAPIs?: string;
   readonly enableThroughputCap: boolean;
+  readonly enableHierarchicalKeys: boolean;
 
   // can be set via both flight and feature flag
   autoscaleDefault: boolean;
@@ -90,6 +91,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     partitionKeyDefault2: "true" === get("pkpartitionkeytest"),
     notebooksDownBanner: "true" === get("notebooksDownBanner"),
     enableThroughputCap: "true" === get("enablethroughputcap"),
+    enableHierarchicalKeys: "true" === get("enablehierarchicalkeys"),
   };
 }
 

src/Utils/MessageValidation.ts

@@ -21,6 +21,23 @@ function isValidOrigin(allowedOrigins: ReadonlyArray<string>, event: MessageEven
   return false;
 }
 
+export function shouldProcessMessage(event: MessageEvent): boolean {
+  if (typeof event.data !== "object") {
+    return false;
+  }
+  if (event.data["signature"] !== "pcIframe") {
+    return false;
+  }
+  if (!("data" in event.data)) {
+    return false;
+  }
+  if (typeof event.data["data"] !== "object") {
+    return false;
+  }
+
+  return true;
+}
+
 export function isReadyMessage(event: MessageEvent): boolean {
   if (!event?.data?.kind && !event?.data?.data) {
     return false;

src/Utils/NetworkUtility.ts

@@ -10,31 +10,37 @@ const PortalIPs: { [key: string]: string[] } = {
   usnat: ["7.28.202.68"],
 };
 
-export const doNetworkSettingsAllowDataExplorerAccess = (): boolean => {
+export const getNetworkSettingsWarningMessage = (): string => {
   const accountProperties = userContext.databaseAccount?.properties;
 
   if (!accountProperties) {
-    return false;
+    return "";
   }
 
   // public network access is disabled
   if (accountProperties.publicNetworkAccess !== "Enabled") {
-    return false;
+    return "The Network settings for this account are preventing access from Data Explorer. Please enable public access to proceed.";
   }
 
   const ipRules = accountProperties.ipRules;
   // public network access is set to "All networks"
   if (ipRules.length === 0) {
-    return true;
+    return "";
   }
 
-  const portalIPs = PortalIPs[userContext.portalEnv];
-  let numberOfMatches = 0;
-  ipRules.forEach((ipRule) => {
-    if (portalIPs.indexOf(ipRule.ipAddressOrRange) !== -1) {
-      numberOfMatches++;
-    }
-  });
+  if (userContext.apiType === "Cassandra" || userContext.apiType === "Mongo") {
+    const portalIPs = PortalIPs[userContext.portalEnv];
+    let numberOfMatches = 0;
+    ipRules.forEach((ipRule) => {
+      if (portalIPs.indexOf(ipRule.ipAddressOrRange) !== -1) {
+        numberOfMatches++;
+      }
+    });
 
-  return numberOfMatches === portalIPs.length;
+    if (numberOfMatches !== portalIPs.length) {
+      return "The Network settings for this account are preventing access from Data Explorer. Please allow access from Azure Portal to proceed.";
+    }
+  }
+
+  return "";
 };

src/hooks/useKnockoutExplorer.ts

@@ -1,6 +1,7 @@
+import Explorer from "Explorer/Explorer";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import { useEffect, useState } from "react";
-import { doNetworkSettingsAllowDataExplorerAccess } from "Utils/NetworkUtility";
+import { getNetworkSettingsWarningMessage } from "Utils/NetworkUtility";
 import { applyExplorerBindings } from "../applyExplorerBindings";
 import { AuthType } from "../AuthType";
 import { AccountKind, Flights } from "../Common/Constants";
@@ -10,7 +11,6 @@ import { configContext, Platform, updateConfigContext } from "../ConfigContext";
 import { ActionType, DataExplorerAction } from "../Contracts/ActionContracts";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { DataExplorerInputsFrame } from "../Contracts/ViewModels";
-import Explorer from "../Explorer/Explorer";
 import { handleOpenAction } from "../Explorer/OpenActions/OpenActions";
 import { useDatabases } from "../Explorer/useDatabases";
 import {
@@ -33,7 +33,7 @@ import { Node, PortalEnv, updateUserContext, userContext } from "../UserContext"
 import { listKeys } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
 import { DatabaseAccountListKeysResult } from "../Utils/arm/generatedClients/cosmos/types";
 import { getMsalInstance } from "../Utils/AuthorizationUtils";
-import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
+import { isInvalidParentFrameOrigin, shouldProcessMessage } from "../Utils/MessageValidation";
 
 // This hook will create a new instance of Explorer.ts and bind it to the DOM
 // This hook has a LOT of magic, but ideally we can delete it once we have removed KO and switched entirely to React
@@ -239,6 +239,7 @@ async function configurePortal(): Promise<Explorer> {
   updateUserContext({
     authType: AuthType.AAD,
   });
+  let explorer: Explorer;
   return new Promise((resolve) => {
     // In development mode, try to load the iframe message from session storage.
     // This allows webpack hot reload to function properly in the portal
@@ -251,7 +252,7 @@ async function configurePortal(): Promise<Explorer> {
         );
         console.dir(message);
         updateContextsFromPortalMessage(message);
-        const explorer = new Explorer();
+        explorer = new Explorer();
         // In development mode, save the iframe message from the portal in session storage.
         // This allows webpack hot reload to funciton properly
         if (process.env.NODE_ENV === "development") {
@@ -287,7 +288,7 @@ async function configurePortal(): Promise<Explorer> {
           }
 
           updateContextsFromPortalMessage(inputs);
-          const explorer = new Explorer();
+          explorer = new Explorer();
           resolve(explorer);
           if (openAction) {
             handleOpenAction(openAction, useDatabases.getState().databases, explorer);
@@ -300,6 +301,8 @@ async function configurePortal(): Promise<Explorer> {
           } else {
             useTabs.getState().closeTabsByComparator((tab) => tab.tabId === event.data?.data?.tabId);
           }
+        } else if (message?.type === MessageTypes.RefreshResources) {
+          explorer.onRefreshResourcesClick();
         }
       },
       false
@@ -314,23 +317,6 @@ function shouldForwardMessage(message: PortalMessage, messageOrigin: string) {
   return messageOrigin === window.document.location.origin && message.type === MessageTypes.TelemetryInfo;
 }
 
-function shouldProcessMessage(event: MessageEvent): boolean {
-  if (typeof event.data !== "object") {
-    return false;
-  }
-  if (event.data["signature"] !== "pcIframe") {
-    return false;
-  }
-  if (!("data" in event.data)) {
-    return false;
-  }
-  if (typeof event.data["data"] !== "object") {
-    return false;
-  }
-
-  return true;
-}
-
 function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
   if (
     configContext.BACKEND_ENDPOINT &&
@@ -382,8 +368,8 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
     }
   }
 
-  const isDataExplorerAccessAllowed = doNetworkSettingsAllowDataExplorerAccess();
-  useTabs.getState().setShowNetworkSettingsWarning(!isDataExplorerAccessAllowed);
+  const warningMessage = getNetworkSettingsWarningMessage();
+  useTabs.getState().setNetworkSettingsWarning(warningMessage);
 
   if (inputs.features) {
     Object.assign(userContext.features, extractFeatures(new URLSearchParams(inputs.features)));

src/hooks/useTabs.ts

@@ -9,7 +9,7 @@ interface TabsState {
   openedReactTabs: ReactTabKind[];
   activeTab: TabsBase | undefined;
   activeReactTab: ReactTabKind | undefined;
-  showNetworkSettingsWarning: boolean;
+  networkSettingsWarning: string;
   activateTab: (tab: TabsBase) => void;
   activateNewTab: (tab: TabsBase) => void;
   activateReactTab: (tabkind: ReactTabKind) => void;
@@ -21,7 +21,7 @@ interface TabsState {
   closeAllNotebookTabs: (hardClose: boolean) => void;
   openAndActivateReactTab: (tabKind: ReactTabKind) => void;
   closeReactTab: (tabKind: ReactTabKind) => void;
-  setShowNetworkSettingsWarning: (showWarning: boolean) => void;
+  setNetworkSettingsWarning: (warningMessage: string) => void;
 }
 
 export enum ReactTabKind {
@@ -35,7 +35,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
   openedReactTabs: [ReactTabKind.Home],
   activeTab: undefined,
   activeReactTab: ReactTabKind.Home,
-  showNetworkSettingsWarning: false,
+  networkSettingsWarning: "",
   activateTab: (tab: TabsBase): void => {
     if (get().openedTabs.some((openedTab) => openedTab.tabId === tab.tabId)) {
       set({ activeTab: tab, activeReactTab: undefined });
@@ -145,5 +145,5 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
 
     set({ openedReactTabs: updatedOpenedReactTabs });
   },
-  setShowNetworkSettingsWarning: (showWarning: boolean) => set({ showNetworkSettingsWarning: showWarning }),
+  setNetworkSettingsWarning: (warningMessage: string) => set({ networkSettingsWarning: warningMessage }),
 }));