autofocus removed for input element

Commit to my local branch
Merge branch 'master' of https://github.com/MokireddySampath/cosmos-explorer
2025-12-23 02:41:39 +00:00 · 2023-04-16 22:05:10 +05:30 · 2023-04-04 11:11:10 +05:30 · 2023-04-04 11:10:39 +05:30 · 2023-04-03 22:11:40 +05:30 · 2023-03-30 14:53:36 -07:00
61 changed files with 9229 additions and 2754 deletions
--- a/.github/workflows/ci.yml
+++ b/.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
--- a/images/imgarrowlefticon.svg
+++ b/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>
--- a/less/TableStyles/queryBuilder.less
+++ b/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;
    }
-}*/
+}*/
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -2576,6 +2576,10 @@ a:link {
 .querydropdown.placeholderVisible {
  font-style: italic;
 }
+.querydropdown.placeholderVisible::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: #767474;
+  opacity: 1; 
+}

 .querydropdown:hover {
  background-color: @AccentLow;
@@ -3087,3 +3091,4 @@ a:link {
  background: white;
  height: 100%;
 }
+
--- a/less/resourceTree.less
+++ b/less/resourceTree.less
@@ -5,12 +5,17 @@
  overflow: auto;

  .databaseHeader {
+    padding: 1px;
    font-size: 14px;
  }

  .collectionHeader {
    font-size: 12px;
  }
+
+  .loadMoreHeader {
+    color: RGB(5, 99, 193);
+  }
 }

 .notebookResourceTree {
@@ -23,6 +28,4 @@
  .clickDisabled {
    pointer-events: none;
  }
-}
-
-
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
    "@azure/arm-cosmosdb": "9.1.0",
    "@azure/cosmos": "3.16.2",
    "@azure/cosmos-language-service": "0.0.5",
-    "@azure/identity": "3.1.2",
+    "@azure/identity": "1.2.1",
    "@azure/ms-rest-nodeauth": "3.0.7",
    "@azure/msal-browser": "2.14.2",
    "@babel/plugin-proposal-class-properties": "7.12.1",
--- a/sampleData/sqlSampleData.json
+++ b/sampleData/sqlSampleData.json
--- a/src/Common/Constants.ts
+++ b/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;
@@ -139,7 +141,7 @@ export class Queries {
  public static UnlimitedPageOption: string = "unlimited";
  public static itemsPerPage: number = 100;
  public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
-
+  public static containersPerPage: number = 50;
  public static QueryEditorMinHeightRatio: number = 0.1;
  public static QueryEditorMaxHeightRatio: number = 0.4;
  public static readonly DefaultMaxDegreeOfParallelism = 6;
--- a/src/Common/EntityValue.tsx
+++ b/src/Common/EntityValue.tsx
@@ -55,7 +55,6 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
      label={entityValueLabel && entityValueLabel}
      className="addEntityTextField"
      id="entityValueId"
-      autoFocus
      disabled={isEntityValueDisable}
      type={entityValueType}
      placeholder={entityValuePlaceholder}
--- a/src/Common/EnvironmentUtility.test.ts
+++ b/src/Common/EnvironmentUtility.test.ts
@@ -0,0 +1,14 @@
+import * as EnvironmentUtility from "./EnvironmentUtility";
+
+describe("Environment Utility Test", () => {
+  it("Test sample URI with /", () => {
+    const uri = "test/";
+    expect(EnvironmentUtility.normalizeArmEndpoint(uri)).toEqual(uri);
+  });
+
+  it("Test sample URI without /", () => {
+    const uri = "test";
+    const expectedResult = "test/";
+    expect(EnvironmentUtility.normalizeArmEndpoint(uri)).toEqual(expectedResult);
+  });
+});
--- a/src/Common/OfferUtility.test.ts
+++ b/src/Common/OfferUtility.test.ts
@@ -1,6 +1,6 @@
-import * as OfferUtility from "./OfferUtility";
-import { SDKOfferDefinition, Offer } from "../Contracts/DataModels";
 import { OfferResponse } from "@azure/cosmos";
+import { Offer, SDKOfferDefinition } from "../Contracts/DataModels";
+import * as OfferUtility from "./OfferUtility";

 describe("parseSDKOfferResponse", () => {
  it("manual throughput", () => {
@@ -31,6 +31,26 @@ describe("parseSDKOfferResponse", () => {
    expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(expectedResult);
  });

+  it("offerContent not defined", () => {
+    const mockOfferDefinition = {
+      id: "test",
+    } as SDKOfferDefinition;
+
+    const mockResponse = {
+      resource: mockOfferDefinition,
+    } as OfferResponse;
+
+    expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(undefined);
+  });
+
+  it("offerDefinition is null", () => {
+    const mockResponse = {
+      resource: undefined,
+    } as OfferResponse;
+
+    expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(undefined);
+  });
+
  it("autoscale throughput", () => {
    const mockOfferDefinition = {
      content: {
--- a/src/Common/TableEntity.tsx
+++ b/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,33 @@ 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}
+                tabIndex={0}
+                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>
--- a/src/Common/Tooltip/InfoTooltip.tsx
+++ b/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>
  );
--- a/src/Common/UrlUtility.test.ts
+++ b/src/Common/UrlUtility.test.ts
@@ -0,0 +1,49 @@
+import * as UrlUtility from "./UrlUtility";
+
+describe("parseDocumentsPath", () => {
+  it("empty resource path", () => {
+    const resourcePath = "";
+
+    expect(UrlUtility.parseDocumentsPath(resourcePath)).toEqual({});
+  });
+
+  it("resourcePath does not begin or end with /", () => {
+    const resourcePath = "localhost/portal/home";
+    const expectedResult = {
+      type: "home",
+      objectBody: {
+        id: "portal",
+        self: "/localhost/portal/home/",
+      },
+    };
+
+    expect(UrlUtility.parseDocumentsPath(resourcePath)).toEqual(expectedResult);
+  });
+
+  it("resourcePath length is even", () => {
+    const resourcePath = "/localhost/portal/src/home/";
+    const expectedResult = {
+      type: "src",
+      objectBody: {
+        id: "home",
+        self: resourcePath,
+      },
+    };
+
+    expect(UrlUtility.parseDocumentsPath(resourcePath)).toEqual(expectedResult);
+  });
+
+  it("createUri", () => {
+    const baseUri = "http://foo.com/bar/";
+    const relativeUri = "/index.html";
+    const expectedUri = "http://foo.com/bar/index.html";
+
+    expect(UrlUtility.createUri(baseUri, relativeUri)).toEqual(expectedUri);
+  });
+
+  it("should throw an error if baseUri is empty", () => {
+    expect(() => {
+      UrlUtility.createUri("", "/home");
+    }).toThrow("baseUri is null or empty");
+  });
+});
--- a/src/Common/dataAccess/readCollections.ts
+++ b/src/Common/dataAccess/readCollections.ts
@@ -1,3 +1,4 @@
+import { Queries } from "Common/Constants";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
@@ -31,6 +32,35 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
  }
 }

+export async function readCollectionsWithPagination(
+  databaseId: string,
+  continuationToken?: string
+): Promise<DataModels.CollectionsWithPagination> {
+  const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
+  try {
+    const sdkResponse = await client()
+      .database(databaseId)
+      .containers.query(
+        { query: "SELECT * FROM c" },
+        {
+          continuationToken,
+          maxItemCount: Queries.containersPerPage,
+        }
+      )
+      .fetchNext();
+    const collectionsWithPagination: DataModels.CollectionsWithPagination = {
+      collections: sdkResponse.resources as DataModels.Collection[],
+      continuationToken: sdkResponse.continuationToken,
+    };
+    return collectionsWithPagination;
+  } catch (error) {
+    handleError(error, "ReadCollections", `Error while querying containers for database ${databaseId}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+}
+
 async function readCollectionsWithARM(databaseId: string): Promise<DataModels.Collection[]> {
  let rpResponse;

--- a/src/Contracts/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -156,6 +156,11 @@ export interface Collection extends Resource {
  requestSchema?: () => void;
 }

+export interface CollectionsWithPagination {
+  continuationToken?: string;
+  collections?: Collection[];
+}
+
 export interface Database extends Resource {
  collections?: Collection[];
 }
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -87,13 +87,13 @@ export interface Database extends TreeNode {
  isDatabaseExpanded: ko.Observable<boolean>;
  isDatabaseShared: ko.Computed<boolean>;
  isSampleDB?: boolean;
-
+  collectionsContinuationToken?: string;
  selectedSubnodeKind: ko.Observable<CollectionTabKind>;

  expandDatabase(): Promise<void>;
  collapseDatabase(): void;

-  loadCollections(): Promise<void>;
+  loadCollections(restart?: boolean): Promise<void>;
  findCollectionWithId(collectionId: string): Collection;
  openAddCollection(database: Database, event: MouseEvent): void;
  onSettingsClick: () => void;
@@ -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[];
--- a/src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx
+++ b/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>
--- a/src/Explorer/Controls/NotebookGallery/InfoComponent/snapshots/InfoComponent.test.tsx.snap
+++ b/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"
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/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>
        )}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
+++ b/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={
--- a/src/Explorer/Controls/Tabs/TabComponent.tsx
+++ b/src/Explorer/Controls/Tabs/TabComponent.tsx
@@ -46,10 +46,13 @@ export class TabComponent extends React.Component<TabComponentProps> {
      }

      let className = "toggleSwitch";
+      let ariaselected;
      if (index === this.props.currentTabIndex) {
        className += " selectedToggle";
+        ariaselected = true;
      } else {
        className += " unselectedToggle";
+        ariaselected = false;
      }

      return (
@@ -57,9 +60,10 @@ export class TabComponent extends React.Component<TabComponentProps> {
          <AccessibleElement
            as="span"
            className={className}
-            role="presentation"
+            role="tab"
            onActivated={() => this.setActiveTab(index)}
            aria-label={`Select tab: ${tab.title}`}
+            aria-selected={ariaselected}
          >
            {tab.title}
          </AccessibleElement>
@@ -77,7 +81,11 @@ export class TabComponent extends React.Component<TabComponentProps> {

    return (
      <div className="tabComponentContainer">
-        {!this.props.hideHeader && <div className="tabs tabSwitch">{this.renderTabTitles()}</div>}
+        {!this.props.hideHeader && (
+          <div className="tabs tabSwitch" role="tablist">
+            {this.renderTabTitles()}
+          </div>
+        )}
        <div className={className}>{currentTabContent.render()}</div>
      </div>
    );
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx
+++ b/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)");
  });
 });
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -185,21 +185,26 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
      </Stack>

      <Stack horizontal verticalAlign="center">
-        <input
-          className="throughputInputRadioBtn"
-          aria-label="Autoscale mode"
-          aria-required={true}
-          checked={isAutoscaleSelected}
-          type="radio"
-          role="radio"
-          tabIndex={0}
-          onChange={(e) => handleOnChangeMode(e, "Autoscale")}
-        />
-        <span className="throughputInputRadioBtnLabel">Autoscale</span>
+        <div role="radiogroup">
+          <input
+            id="Autoscale-input"
+            className="throughputInputRadioBtn"
+            aria-label="Autoscale database throughput"
+            aria-required={true}
+            checked={isAutoscaleSelected}
+            type="radio"
+            role="radio"
+            tabIndex={0}
+            onChange={(e) => handleOnChangeMode(e, "Autoscale")}
+          />
+          <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>
            .
--- a/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
+++ b/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,45 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
      <div
        className="ms-Stack css-58"
      >
-        <input
-          aria-label="Autoscale mode"
-          aria-required={true}
-          checked={true}
-          className="throughputInputRadioBtn"
+        <div
          key=".0:$.0"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="throughputInputRadioBtnLabel"
-          key=".0:$.1"
+          role="radiogroup"
        >
-          Autoscale
-        </span>
-        <input
-          aria-label="Manual mode"
-          aria-required={true}
-          checked={false}
-          className="throughputInputRadioBtn"
-          key=".0:$.2"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="throughputInputRadioBtnLabel"
-          key=".0:$.3"
-        >
-          Manual
-        </span>
+          <input
+            aria-label="Autoscale database throughput"
+            aria-required={true}
+            checked={true}
+            className="throughputInputRadioBtn"
+            id="Autoscale-input"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <label
+            className="throughputInputRadioBtnLabel"
+            htmlFor="Autoscale-input"
+          >
+            Autoscale
+          </label>
+          <input
+            aria-label="Manual database throughput"
+            aria-required={true}
+            checked={false}
+            className="throughputInputRadioBtn"
+            id="Manual-input"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <label
+            className="throughputInputRadioBtnLabel"
+            htmlFor="Manual-input"
+          >
+            Manual
+          </label>
+        </div>
      </div>
    </Stack>
    <Stack
@@ -697,23 +704,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 +999,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 +1338,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 +1626,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}
                          >
                            
--- a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
+++ b/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}`}
--- a/src/Explorer/Controls/TreeComponent/snapshots/TreeComponent.test.tsx.snap
+++ b/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}
--- a/src/Explorer/Controls/TreeComponent/treeComponent.less
+++ b/src/Explorer/Controls/TreeComponent/treeComponent.less
@@ -3,7 +3,7 @@
 .treeComponent {
  .nodeItem {
    &:focus {
-      outline: 1px dashed @AccentMedium;
+      outline: 2px @AccentMedium;
    }

    .treeNodeHeader {
--- a/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
+++ b/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);
  });

--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -577,7 +577,7 @@ export default class Explorer {
    try {
      await Promise.all(
        databasesToLoad.map(async (database: ViewModels.Database) => {
-          await database.loadCollections();
+          await database.loadCollections(true);
          const isNewDatabase: boolean = _.some(newDatabases, (db: ViewModels.Database) => db.id() === database.id());
          if (isNewDatabase) {
            database.expandDatabase();
--- a/src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
+++ b/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"
--- a/src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
@@ -17,19 +17,19 @@ 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} />
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
@@ -202,6 +202,7 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
  if (showOpenFullScreen) {
    const label = "Open Full Screen";
    const fullScreenButton: CommandButtonComponentProps = {
+      id: "openFullScreenBtn",
      iconSrc: OpenInTabIcon,
      iconAlt: label,
      onCommandClick: () => {
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -147,12 +147,9 @@ 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
--- a/src/Explorer/Menus/NotificationConsole/snapshots/NotificationConsoleComponent.test.tsx.snap
+++ b/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={
@@ -136,7 +134,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
              },
            ]
          }
-          role="combobox"
          selectedKey="All"
        />
        <span
@@ -278,8 +275,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
        className="notificationConsoleControls"
      >
        <Dropdown
-          aria-label="All"
-          aria-labelledby="consoleFilterLabel"
          label="Filter:"
          onChange={[Function]}
          options={
@@ -302,7 +297,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
              },
            ]
          }
-          role="combobox"
          selectedKey="All"
        />
        <span
--- a/src/Explorer/Notebook/NotebookComponent/InMemoryContentProviderUtils.test.ts
+++ b/src/Explorer/Notebook/NotebookComponent/InMemoryContentProviderUtils.test.ts
@@ -0,0 +1,23 @@
+import * as InMemoryContentProviderUtils from "./ContentProviders/InMemoryContentProviderUtils";
+
+describe("fromContentUri", () => {
+  it("fromContentUri should return valid result", () => {
+    const contentUri = "memory://resource/path";
+    const result = "resource";
+
+    expect(InMemoryContentProviderUtils.fromContentUri(contentUri)).toEqual(result);
+  });
+
+  it("fromContentUri should return undefined on invalid input", () => {
+    const contentUri = "invalid";
+
+    expect(InMemoryContentProviderUtils.fromContentUri(contentUri)).toEqual(undefined);
+  });
+
+  it("toContentUri should return valid result", () => {
+    const path = "resource/path";
+    const result = "memory://resource/path";
+
+    expect(InMemoryContentProviderUtils.toContentUri(path)).toEqual(result);
+  });
+});
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/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,37 +267,46 @@ 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">
-              <input
-                className="panelRadioBtn"
-                checked={this.state.createNewDatabase}
-                aria-label="Create new database"
-                aria-checked={this.state.createNewDatabase}
-                name="databaseType"
-                type="radio"
-                role="radio"
-                id="databaseCreateNew"
-                tabIndex={0}
-                onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
-              />
-              <span className="panelRadioBtnLabel">Create new</span>
+              <div role="radiogroup">
+                <input
+                  className="panelRadioBtn"
+                  checked={this.state.createNewDatabase}
+                  aria-label="Create new database"
+                  aria-checked={this.state.createNewDatabase}
+                  name="databaseType"
+                  type="radio"
+                  role="radio"
+                  id="databaseCreateNew"
+                  tabIndex={0}
+                  onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
+                />
+                <span className="panelRadioBtnLabel">Create new</span>

-              <input
-                className="panelRadioBtn"
-                checked={!this.state.createNewDatabase}
-                aria-label="Use existing database"
-                aria-checked={!this.state.createNewDatabase}
-                name="databaseType"
-                type="radio"
-                role="radio"
-                tabIndex={0}
-                onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
-              />
-              <span className="panelRadioBtnLabel">Use existing</span>
+                <input
+                  className="panelRadioBtn"
+                  checked={!this.state.createNewDatabase}
+                  aria-label="Use existing database"
+                  aria-checked={!this.state.createNewDatabase}
+                  name="databaseType"
+                  type="radio"
+                  role="radio"
+                  tabIndex={0}
+                  onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
+                />
+                <span className="panelRadioBtnLabel">Use existing</span>
+              </div>
            </Stack>

            {this.state.createNewDatabase && (
@@ -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,14 @@ 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
+                  role="button"
+                  iconName="Info"
+                  className="panelInfoIcon"
+                  tabIndex={0}
+                  ariaLabel={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
+                  
+                />
              </TooltipHost>
            </Stack>

@@ -467,7 +497,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 +551,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 +588,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 +685,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 +726,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,40 +800,48 @@ 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">
-                <input
-                  className="panelRadioBtn"
-                  checked={this.state.enableAnalyticalStore}
-                  disabled={!this.isSynapseLinkEnabled()}
-                  aria-label="Enable analytical store"
-                  aria-checked={this.state.enableAnalyticalStore}
-                  name="analyticalStore"
-                  type="radio"
-                  role="radio"
-                  id="enableAnalyticalStoreBtn"
-                  tabIndex={0}
-                  onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
-                />
-                <span className="panelRadioBtnLabel">On</span>
+                <div role="radiogroup">
+                  <input
+                    className="panelRadioBtn"
+                    checked={this.state.enableAnalyticalStore}
+                    disabled={!this.isSynapseLinkEnabled()}
+                    aria-label="Enable analytical store"
+                    aria-checked={this.state.enableAnalyticalStore}
+                    name="analyticalStore"
+                    type="radio"
+                    role="radio"
+                    id="enableAnalyticalStoreBtn"
+                    tabIndex={0}
+                    onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
+                  />
+                  <span className="panelRadioBtnLabel">On</span>

-                <input
-                  className="panelRadioBtn"
-                  checked={!this.state.enableAnalyticalStore}
-                  disabled={!this.isSynapseLinkEnabled()}
-                  aria-label="Disable analytical store"
-                  aria-checked={!this.state.enableAnalyticalStore}
-                  name="analyticalStore"
-                  type="radio"
-                  role="radio"
-                  id="disableAnalyticalStoreBtn"
-                  tabIndex={0}
-                  onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
-                />
-                <span className="panelRadioBtnLabel">Off</span>
+                  <input
+                    className="panelRadioBtn"
+                    checked={!this.state.enableAnalyticalStore}
+                    disabled={!this.isSynapseLinkEnabled()}
+                    aria-label="Disable analytical store"
+                    aria-checked={!this.state.enableAnalyticalStore}
+                    name="analyticalStore"
+                    type="radio"
+                    role="radio"
+                    id="disableAnalyticalStoreBtn"
+                    tabIndex={0}
+                    onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
+                  />
+                  <span className="panelRadioBtnLabel">Off</span>
+                </div>
              </Stack>

              {!this.isSynapseLinkEnabled() && (
@@ -747,7 +885,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 +910,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 +987,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 +1122,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 +1326,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;
--- a/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
+++ b/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,
        {
--- a/src/Explorer/Panes/PanelInfoErrorComponent.tsx
+++ b/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>
        )}
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -21,6 +21,11 @@ export const SettingsPane: FunctionComponent = () => {
  const [customItemPerPage, setCustomItemPerPage] = useState<number>(
    LocalStorageUtility.getEntryNumber(StorageKey.CustomItemPerPage) || 0
  );
+  const [containerPaginationEnabled, setContainerPaginationEnabled] = useState<boolean>(
+    LocalStorageUtility.hasItem(StorageKey.ContainerPaginationEnabled)
+      ? LocalStorageUtility.getEntryString(StorageKey.ContainerPaginationEnabled) === "true"
+      : false
+  );
  const [crossPartitionQueryEnabled, setCrossPartitionQueryEnabled] = useState<boolean>(
    LocalStorageUtility.hasItem(StorageKey.IsCrossPartitionQueryEnabled)
      ? LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
@@ -50,6 +55,7 @@ export const SettingsPane: FunctionComponent = () => {
      isCustomPageOptionSelected() ? customItemPerPage : Constants.Queries.unlimitedItemsPerPage
    );
    LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
+    LocalStorageUtility.setEntryString(StorageKey.ContainerPaginationEnabled, containerPaginationEnabled.toString());
    LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, crossPartitionQueryEnabled.toString());
    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);

@@ -185,6 +191,25 @@ export const SettingsPane: FunctionComponent = () => {
            </div>
          </div>
        )}
+        <div className="settingsSection">
+          <div className="settingsSectionPart">
+            <div className="settingsSectionLabel">
+              Enable container pagination
+              <InfoTooltip>
+                Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
+              </InfoTooltip>
+            </div>
+            <Checkbox
+              styles={{
+                label: { padding: 0 },
+              }}
+              className="padding"
+              ariaLabel="Enable container pagination"
+              checked={containerPaginationEnabled}
+              onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
+            />
+          </div>
+        </div>
        {shouldShowCrossPartitionOption && (
          <div className="settingsSection">
            <div className="settingsSectionPart">
--- a/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
@@ -97,6 +97,35 @@ exports[`Settings Pane should render Default properly 1`] = `
        </div>
      </div>
    </div>
+    <div
+      className="settingsSection"
+    >
+      <div
+        className="settingsSectionPart"
+      >
+        <div
+          className="settingsSectionLabel"
+        >
+          Enable container pagination
+          <InfoTooltip>
+            Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
+          </InfoTooltip>
+        </div>
+        <StyledCheckboxBase
+          ariaLabel="Enable container pagination"
+          checked={false}
+          className="padding"
+          onChange={[Function]}
+          styles={
+            Object {
+              "label": Object {
+                "padding": 0,
+              },
+            }
+          }
+        />
+      </div>
+    </div>
    <div
      className="settingsSection"
    >
@@ -182,6 +211,35 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
  <div
    className="paneMainContent"
  >
+    <div
+      className="settingsSection"
+    >
+      <div
+        className="settingsSectionPart"
+      >
+        <div
+          className="settingsSectionLabel"
+        >
+          Enable container pagination
+          <InfoTooltip>
+            Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
+          </InfoTooltip>
+        </div>
+        <StyledCheckboxBase
+          ariaLabel="Enable container pagination"
+          checked={false}
+          className="padding"
+          onChange={[Function]}
+          styles={
+            Object {
+              "label": Object {
+                "padding": 0,
+              },
+            }
+          }
+        />
+      </div>
+    </div>
    <div
      className="settingsSection"
    >
--- a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
+++ b/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>
--- a/src/Explorer/Panes/Tables/snapshots/AddTableEntityPanel.test.tsx.snap
+++ b/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"
--- a/src/Explorer/Panes/snapshots/AddCollectionPanel.test.tsx.snap
+++ b/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>
--- a/src/Explorer/Quickstart/Tutorials/MongoQuickstartTutorial.tsx
+++ b/src/Explorer/Quickstart/Tutorials/MongoQuickstartTutorial.tsx
@@ -1,4 +1,4 @@
-import { Link, Stack, TeachingBubble, Text } from "@fluentui/react";
+import { DirectionalHint, Link, Stack, TeachingBubble, Text } from "@fluentui/react";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import React from "react";
@@ -18,6 +18,11 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
    return <></>;
  }

+  let totalSteps = 9;
+  if (userContext.isTryCosmosDBSubscription) {
+    totalSteps = 10;
+  }
+
  switch (step) {
    case 1:
      return isSampleDBExpanded ? (
@@ -33,7 +38,7 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
            },
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 1 of 8"
+          footerContent={"Step 1 of " + totalSteps}
        >
          Start viewing and working with your data by opening Documents under Data
        </TeachingBubble>
@@ -55,7 +60,7 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(1),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 2 of 8"
+          footerContent={"Step 2 of " + totalSteps}
        >
          View documents here using the documents window. You can also use your favorite MongoDB tools and drivers to do
          so.
@@ -78,7 +83,7 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(2),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 3 of 8"
+          footerContent={"Step 3 of " + totalSteps}
        >
          Add new document by copy / pasting JSON or uploading a JSON. You can also use your favorite MongoDB tools and
          drivers to do so.
@@ -99,7 +104,7 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(3),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 4 of 8"
+          footerContent={"Step 4 of " + totalSteps}
        >
          Query your data using the filter function. Azure Cosmos DB for MongoDB provides comprehensive support for
          MongoDB query language constructs. You can also use your favorite MongoDB tools and drivers to do so.
@@ -120,7 +125,7 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(4),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 5 of 8"
+          footerContent={"Step 5 of " + totalSteps}
        >
          Change throughput provisioned to your collection according to your needs
        </TeachingBubble>
@@ -140,7 +145,7 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(5),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 6 of 8"
+          footerContent={"Step 6 of " + totalSteps}
        >
          Use the indexing policy editor to create and edit your indexes.
        </TeachingBubble>
@@ -160,12 +165,54 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(6),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 7 of 8"
+          footerContent={"Step 7 of " + totalSteps}
        >
          Visualize your data, store queries in an interactive document
        </TeachingBubble>
      );
    case 8:
+      return (
+        <TeachingBubble
+          headline="Launch full screen"
+          target={"#openFullScreenBtn"}
+          hasCloseButton
+          primaryButtonProps={{
+            text: "Next",
+            onClick: () => (userContext.isTryCosmosDBSubscription ? setStep(9) : setStep(10)),
+          }}
+          secondaryButtonProps={{
+            text: "Previous",
+            onClick: () => setStep(7),
+          }}
+          onDismiss={() => onDimissTeachingBubble()}
+          footerContent={"Step 8 of " + totalSteps}
+        >
+          This will open a new tab in your browser to use Cosmos DB Explorer. Using the provided URLs you can share
+          read-write or read-only access with other people.
+        </TeachingBubble>
+      );
+    case 9:
+      return (
+        <TeachingBubble
+          headline="Boost your experience"
+          target={"#freeTierTeachingBubble"}
+          hasCloseButton
+          primaryButtonProps={{
+            text: "Next",
+            onClick: () => setStep(10),
+          }}
+          secondaryButtonProps={{
+            text: "Previous",
+            onClick: () => setStep(8),
+          }}
+          calloutProps={{ directionalHint: DirectionalHint.leftCenter }}
+          onDismiss={() => onDimissTeachingBubble()}
+          footerContent={"Step 9 of " + totalSteps}
+        >
+          Unlock everything Azure Cosmos DB has to offer When you&apos;re ready, upgrade to production.
+        </TeachingBubble>
+      );
+    case 10:
      return (
        <TeachingBubble
          headline="Congratulations!"
@@ -180,10 +227,10 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
          }}
          secondaryButtonProps={{
            text: "Previous",
-            onClick: () => setStep(7),
+            onClick: () => (userContext.isTryCosmosDBSubscription ? setStep(9) : setStep(8)),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 8 of 8"
+          footerContent={"Step " + totalSteps + " of " + totalSteps}
        >
          <Stack>
            <Text style={{ color: "white" }}>
--- a/src/Explorer/Quickstart/Tutorials/SQLQuickstartTutorial.tsx
+++ b/src/Explorer/Quickstart/Tutorials/SQLQuickstartTutorial.tsx
@@ -1,4 +1,4 @@
-import { Link, Stack, TeachingBubble, Text } from "@fluentui/react";
+import { DirectionalHint, Link, Stack, TeachingBubble, Text } from "@fluentui/react";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import React from "react";
@@ -17,6 +17,10 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
  if (userContext.apiType !== "SQL") {
    return <></>;
  }
+  let totalSteps = 8;
+  if (userContext.isTryCosmosDBSubscription) {
+    totalSteps = 9;
+  }

  switch (step) {
    case 1:
@@ -33,7 +37,7 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            },
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 1 of 7"
+          footerContent={"Step 1 of " + totalSteps}
        >
          Start viewing and working with your data by opening Items under Data
        </TeachingBubble>
@@ -55,7 +59,7 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(1),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 2 of 7"
+          footerContent={"Step 2 of " + totalSteps}
        >
          View item here using the items window. Additionally you can also filter items to be reviewed with the filter
          function
@@ -78,7 +82,7 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(2),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 3 of 7"
+          footerContent={"Step 3 of " + totalSteps}
        >
          Add new item by copy / pasting JSON; or uploading a JSON
        </TeachingBubble>
@@ -98,7 +102,7 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(3),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 4 of 7"
+          footerContent={"Step 4 of " + totalSteps}
        >
          Query your data using either the filter function or new query.
        </TeachingBubble>
@@ -118,7 +122,7 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(4),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 5 of 7"
+          footerContent={"Step 5 of " + totalSteps}
        >
          Change throughput provisioned to your container according to your needs
        </TeachingBubble>
@@ -138,12 +142,54 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(5),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 6 of 7"
+          footerContent={"Step 6 of " + totalSteps}
        >
          Visualize your data, store queries in an interactive document
        </TeachingBubble>
      );
    case 7:
+      return (
+        <TeachingBubble
+          headline="Launch full screen"
+          target={"#openFullScreenBtn"}
+          hasCloseButton
+          primaryButtonProps={{
+            text: "Next",
+            onClick: () => (userContext.isTryCosmosDBSubscription ? setStep(8) : setStep(9)),
+          }}
+          secondaryButtonProps={{
+            text: "Previous",
+            onClick: () => setStep(6),
+          }}
+          onDismiss={() => onDimissTeachingBubble()}
+          footerContent={"Step 7 of " + totalSteps}
+        >
+          This will open a new tab in your browser to use Cosmos DB Explorer. Using the provided URLs you can share
+          read-write or read-only access with other people.
+        </TeachingBubble>
+      );
+    case 8:
+      return (
+        <TeachingBubble
+          headline="Boost your experience"
+          target={"#freeTierTeachingBubble"}
+          hasCloseButton
+          primaryButtonProps={{
+            text: "Next",
+            onClick: () => setStep(9),
+          }}
+          secondaryButtonProps={{
+            text: "Previous",
+            onClick: () => setStep(7),
+          }}
+          calloutProps={{ directionalHint: DirectionalHint.leftCenter }}
+          onDismiss={() => onDimissTeachingBubble()}
+          footerContent={"Step 8 of " + totalSteps}
+        >
+          Unlock everything Azure Cosmos DB has to offer When you&apos;re ready, upgrade to production.
+        </TeachingBubble>
+      );
+    case 9:
      return (
        <TeachingBubble
          headline="Congratulations!"
@@ -158,10 +204,10 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
          }}
          secondaryButtonProps={{
            text: "Previous",
-            onClick: () => setStep(6),
+            onClick: () => (userContext.isTryCosmosDBSubscription ? setStep(8) : setStep(7)),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 7 of 7"
+          footerContent={"Step " + totalSteps + " of " + totalSteps}
        >
          <Stack>
            <Text style={{ color: "white" }}>
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/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,14 @@ 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 +535,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 +570,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 +590,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 +610,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 +620,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 +640,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 +655,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;
    }
--- a/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
+++ b/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;
--- a/src/Explorer/Tabs/QueryTablesTab.html
+++ b/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" />
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -24,11 +24,11 @@ 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={
@@ -38,8 +38,7 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
          }
          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">
@@ -93,6 +92,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
        }
      }}
      className={active ? "active tabList" : "tabList"}
+      style={active ? { fontWeight: "bolder" } : {}}
      title={useObservable(tab?.tabPath || ko.observable(""))}
      aria-selected={active}
      aria-expanded={active}
--- a/src/Explorer/Tree/Database.tsx
+++ b/src/Explorer/Tree/Database.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import * as _ from "underscore";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
-import { readCollections } from "../../Common/dataAccess/readCollections";
+import { readCollections, readCollectionsWithPagination } from "../../Common/dataAccess/readCollections";
 import { readDatabaseOffer } from "../../Common/dataAccess/readDatabaseOffer";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
@@ -13,6 +13,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { useSidePanel } from "../../hooks/useSidePanel";
 import { useTabs } from "../../hooks/useTabs";
 import { IJunoResponse, JunoClient } from "../../Juno/JunoClient";
+import * as StorageUtility from "../../Shared/StorageUtility";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
@@ -38,6 +39,7 @@ export default class Database implements ViewModels.Database {
  public selectedSubnodeKind: ko.Observable<ViewModels.CollectionTabKind>;
  public junoClient: JunoClient;
  public isSampleDB: boolean;
+  public collectionsContinuationToken?: string;
  private isOfferRead: boolean;

  constructor(container: Explorer, data: DataModels.Database) {
@@ -140,7 +142,11 @@ export default class Database implements ViewModels.Database {
    }

    await this.loadOffer();
-    await this.loadCollections();
+
+    if (this.collections()?.length === 0) {
+      await this.loadCollections(true);
+    }
+
    this.isDatabaseExpanded(true);
    TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Mark, {
      description: "Database node",
@@ -162,9 +168,31 @@ export default class Database implements ViewModels.Database {
    });
  }

-  public async loadCollections(): Promise<void> {
+  public async loadCollections(restart = false) {
    const collectionVMs: Collection[] = [];
-    const collections: DataModels.Collection[] = await readCollections(this.id());
+    let collections: DataModels.Collection[] = [];
+    if (restart) {
+      this.collectionsContinuationToken = undefined;
+    }
+    const containerPaginationEnabled =
+      StorageUtility.LocalStorageUtility.getEntryString(StorageUtility.StorageKey.ContainerPaginationEnabled) ===
+      "true";
+    if (containerPaginationEnabled) {
+      const collectionsWithPagination: DataModels.CollectionsWithPagination = await readCollectionsWithPagination(
+        this.id(),
+        this.collectionsContinuationToken
+      );
+
+      if (collectionsWithPagination.collections?.length === Constants.Queries.containersPerPage) {
+        this.collectionsContinuationToken = collectionsWithPagination.continuationToken;
+      } else {
+        this.collectionsContinuationToken = undefined;
+      }
+      collections = collectionsWithPagination.collections;
+    } else {
+      collections = await readCollections(this.id());
+    }
+
    // TODO Remove
    // This is a hack to make Mongo collections read via ARM have a SQL-ish partitionKey property
    if (userContext.apiType === "Mongo" && userContext.authType === AuthType.AAD) {
@@ -199,7 +227,9 @@ export default class Database implements ViewModels.Database {

    //merge collections
    this.addCollectionsToList(collectionVMs);
-    this.deleteCollectionsFromList(deltaCollections.toDelete);
+    if (!containerPaginationEnabled || restart) {
+      this.deleteCollectionsFromList(deltaCollections.toDelete);
+    }

    useDatabases.getState().updateDatabase(this);
  }
--- a/src/Explorer/Tree/ResourceTree.tsx
+++ b/src/Explorer/Tree/ResourceTree.tsx
@@ -479,6 +479,18 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
          databaseNode.children.push(buildCollectionNode(database, collection))
        );

+      if (database.collectionsContinuationToken) {
+        const loadMoreNode: TreeNode = {
+          label: "load more",
+          className: "loadMoreHeader",
+          onClick: async () => {
+            await database.loadCollections();
+            useDatabases.getState().updateDatabase(database);
+          },
+        };
+        databaseNode.children.push(loadMoreNode);
+      }
+
      database.collections.subscribe((collections: ViewModels.Collection[]) => {
        collections.forEach((collection: ViewModels.Collection) =>
          databaseNode.children.push(buildCollectionNode(database, collection))
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -80,6 +80,7 @@ const App: React.FunctionComponent = () => {
  return (
    <div className="flexContainer">
      <div id="divExplorer" className="flexContainer hideOverflows">
+        <div id="freeTierTeachingBubble"> </div>
        {/* Main Command Bar - Start */}
        <CommandBar container={explorer} />
        {/* Collections Tree and Tabs - Begin */}
--- a/src/Platform/Hosted/extractFeatures.ts
+++ b/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"),
  };
 }

--- a/src/Shared/StorageUtility.ts
+++ b/src/Shared/StorageUtility.ts
@@ -4,6 +4,7 @@ import * as SessionStorageUtility from "./SessionStorageUtility";
 export { LocalStorageUtility, SessionStorageUtility };
 export enum StorageKey {
  ActualItemPerPage,
+  ContainerPaginationEnabled,
  CustomItemPerPage,
  DatabaseAccountId,
  EncryptedKeyToken,
--- a/src/Utils/AuthorizationUtils.ts
+++ b/src/Utils/AuthorizationUtils.ts
@@ -49,7 +49,7 @@ export function getMsalInstance() {
      cacheLocation: "localStorage",
    },
    auth: {
-      authority: `${configContext.AAD_ENDPOINT}common`,
+      authority: `${configContext.AAD_ENDPOINT}organizations`,
      clientId: "203f1145-856a-4232-83d4-a43568fba23d",
    },
  };
--- a/src/Utils/MessageValidation.ts
+++ b/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;
--- a/src/Utils/NetworkUtility.ts
+++ b/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 "";
 };
--- a/src/hooks/useKnockoutExplorer.ts
+++ b/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)));
--- a/src/hooks/useTabs.ts
+++ b/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 }),
 }));
Author	SHA1	Message	Date
Sampath	6247d1a97d	autofocus removed for input element	2023-04-16 22:05:10 +05:30
Sampath	4ec6108f41	Commit to my local branch	2023-04-04 11:11:10 +05:30
Sampath	d63f1251dd	Merge branch 'master' of https://github.com/MokireddySampath/cosmos-explorer	2023-04-04 11:10:39 +05:30
MokireddySampath	c7c894d6d9	Sampath accessibility sev 2 2 (#1404 ) * 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 * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * color for placeholder changed to 767474, margin is set to accommodate height between treeheader elements * padding added for databaseheader, removed margin and restored padding to treenodeheader	2023-04-03 22:11:40 +05:30
Asier Isayas	547954c3dc	Lazy loading containers (#1411 ) Co-authored-by: Asier Isayas <aisayas@microsoft.com>	2023-03-30 14:53:36 -07:00
sindhuba	7f220bf8be	Add additional teaching bubbles in Quickstart (#1407 ) * Add additional teaching bubbles in Quickstart * Run npm format * Fix lint error * Add unit tests * Add Mongo teaching bubbles for Try CosmosDB and Launch full screen * Add additional tests for UrlUtility * Run npm format * Add tests for Notebook Utils	2023-03-27 15:33:55 -07:00
jawelton74	1ee6abf890	Change AAD endpoint from /common to /organizations. (#1408 )	2023-03-27 10:47:04 -07:00
MokireddySampath	72c3605dbe	Sampath accessibility sev 2 (#1400 ) * 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 * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Remove extra white space --------- Co-authored-by: Victor Meng <vimeng@microsoft.com>	2023-03-14 23:49:21 +05:30
Sampath	40755e297d	Merge branch 'master' of https://github.com/MokireddySampath/cosmos-explorer	2023-03-13 12:10:26 +05:30
Sampath	b84d5b572c	sev2 accessibilitydefects in data explorer	2023-03-10 23:22:42 +05:30
MokireddySampath	a7a38807df	Defect2236159 (#1396 ) * 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	2023-02-28 09:11:52 +05:30
Sampath	c711b59f7d	alt text for decorative images	2023-02-25 23:25:12 +05:30
Sampath	e945963cf9	Revert "alt text attribute for images" This reverts commit `5a660551c6`.	2023-02-25 23:11:20 +05:30
Sampath	5a660551c6	alt text attribute for images	2023-02-25 22:53:52 +05:30
sindhuba	1285ffc440	Refresh collection automatically when container is created using Quickstart pop up (#1394 ) * Quickstart Refresh collection automatically when container is created * Fix unit tests * Fix unit tests and address comments * Minor fixes in message handler * Minor changes to fix tsconfig.strict.json * Resolve npm compile:strict errors by fixing the code implementation * Remove cache refresh code in configureHosted function * Fix spacing * Run npm format	2023-02-24 10:58:36 -08:00
jawelton74	b4bca3d41a	Updates user to use for nuget push. (#1393 )	2023-02-16 17:51:57 -08:00
jawelton74	2a47e4311c	Set overwrite to true for both blob uploads to storage. (#1392 )	2023-02-16 16:23:24 -08:00
bogercraig	49d9f489d8	Users/bogercraig/add cdb live show link (#1391 ) * Exchanged links on DE home page with link to the Azure Cosmos DB Live TV show. * Adding back accidentally removed terminating , * Added cdb TV to Postgres quick start splash page. * Removing cdb tv description from next steps and moved up. * Moved cdb tv to the tips and learn more column on postgres getting started page. * Shortening postgrest cdb tv line. * Removing link from PG since only 1 episode so far for PG. * Adding terminating comma back. Formatting. * Consolidating Cosmos DB Live TV to a single variable. * Updating prettier formatting.	2023-02-15 09:24:55 -05:00
sindhuba	31cc129aa7	Update address sample data for SQL and Mongo (#1389 )	2023-02-07 18:34:10 -08:00
MokireddySampath	99af4acca4	autoscale and manual radiobuutton fixes (#1387 )	2023-02-07 11:48:45 +05:30
victor-meng	80dd161a6f	Remove networking warning message for sql, gremlin, and tables api (#1388 )	2023-02-06 12:51:04 -08:00
Sampath	b2d59f3b3f	autoscale and manual radiobuutton fixes	2023-02-06 23:48:50 +05:30
MokireddySampath	850f1dfb97	rework for defect-1704149 (#1384 )	2023-02-04 01:51:11 +05:30
sunghyunkang1111	a827e79317	remove feature flag and add preview text in the button (#1383 )	2023-02-03 10:15:35 -06:00
MokireddySampath	7dbccff41d	fix for defect 1703851&1703931 (#1379 )	2023-02-01 22:20:03 +05:30
victor-meng	9184684e75	Improve network settings warning message (#1380 )	2023-01-25 15:04:39 -08:00
sunghyunkang1111	701f486d8f	Add hierachical partition key in add containers in SQL (#1377 ) * Add hierachical partition key in add containers in SQL * Add hierachical partition key in add containers in SQL * fix unit test cases and update snapshot * add learn more links and feature flag * update snapsho * separate subpartition key logic * separate subpartition key logic	2023-01-23 09:09:29 -06:00
victor-meng	5059917edf	Only show networking settings warning for Mongo and Cassandra accounts (#1376 )	2023-01-18 11:12:10 -08:00
Asier Isayas	ab1409efb1	Show delete database error (#1373 ) Co-authored-by: Asier Isayas <aisayas@microsoft.com>	2023-01-13 14:06:24 -05:00
MokireddySampath	5de9e682ba	Defect1711833 (#1370 ) * keyboard navigation for defects 1722611,1722618 * Fixes for keyboard navigation of add new clause,edit,remove property,insert filter line, remove filter line * Revert "keyboard navigation for defects 1722611,1722618" This reverts commit `9383609a22`. * html,css changes corected after reversion * Revert "html,css changes corected after reversion" This reverts commit `712e0e0c1e`. * committing changes for the keyboard navigation * format fixes * changes to addcollectionpanel.test.tsx snp file * changes in infotooltip for defct * Revert "changes in infotooltip for defct" This reverts commit `ca9833e208`. * commit for tooltip in defect 1704149 * Revert "commit for tooltip in defect 1704149" This reverts commit `44766e8213`. * InfoTooltip changes * update snapshot * defect1722595 Bug 1722595: [Screen readers Azure Cosmos DB Scale& Settings: Screen reader (NVDA) is not announcing status message which is displayed on the screen after radio button is selected under scale tab. * more options in delete entity dialog is not accessible through keyboard * Revert "more options in delete entity dialog is not accessible through keyboard" This reverts commit `23a05ef18e`. * more options in delete entity dialog is not accessible throgh keyboard * remove native html with role='alert' for messagebar * role added for messagebar fluentui component	2023-01-10 21:32:29 +05:30