fixed tableEntity treeComponent and DefaultExperienceUtility file typescript issue

.eslintignore

@@ -80,8 +80,8 @@ src/Explorer/Tables/DataTable/CacheBase.ts
 src/Explorer/Tables/DataTable/DataTableBindingManager.ts
 src/Explorer/Tables/DataTable/DataTableBuilder.ts
 src/Explorer/Tables/DataTable/DataTableContextMenu.ts
-# src/Explorer/Tables/DataTable/DataTableOperationManager.ts
-# src/Explorer/Tables/DataTable/DataTableOperations.ts
+src/Explorer/Tables/DataTable/DataTableOperationManager.ts
+src/Explorer/Tables/DataTable/DataTableOperations.ts
 src/Explorer/Tables/DataTable/DataTableViewModel.ts
 src/Explorer/Tables/DataTable/TableCommands.ts
 src/Explorer/Tables/DataTable/TableEntityCache.ts

images/close-black.svg

@@ -1,8 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+<svg
+    width="16" 
+    height="16"
+     version="1.1" 
+    viewBox="0 0 16 16" 
+    xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M14,2.691l-5.301,5.309l5.301,5.309l-0.691,0.691l-5.309,-5.301l-5.309,5.301l-0.691,-0.691l5.301,-5.309l-5.301,-5.309l0.691,-0.691l5.309,5.301l5.309,-5.301l0.691,0.691Z"
-        transform="scale(0.5)" fill="#000" stroke="#000">
+    <path 
+        d="M14,2.691l-5.301,5.309l5.301,5.309l-0.691,0.691l-5.309,-5.301l-5.309,5.301l-0.691,-0.691l5.301,-5.309l-5.301,-5.309l0.691,-0.691l5.309,5.301l5.309,-5.301l0.691,0.691Z" 
+        transform="scale(0.5)" 
+        fill="#000"
+        stroke="#CCC" 
+        >
     </path>
 </svg>

jest.config.js

@@ -37,8 +37,8 @@ module.exports = {
     global: {
       branches: 25,
       functions: 25,
-      lines: 29.5,
-      statements: 29.5,
+      lines: 30,
+      statements: 30,
     },
   },
 

less/TableStyles/queryBuilder.less

@@ -3,358 +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();
-  position: relative;
+    overflow: hidden;
+    .flex-display();
+    .flex-direction();
 }
 
-.tablesQueryTab {
-  padding-left: @MediumSpace;
-  width: 100%;
-  margin-bottom: 60px;
-  position: relative;
-  height: 100%;
+.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: -26px;
-}
-
-.and-or-label {
-  margin-left: 52px;
-}
-
-.field-label {
-  margin-left: 69px;
-}
-.data-type-label {
-  margin-left: 54px;
-}
-
-.operator-label {
-  margin-left: 80px;
-}
-.value-label {
-  margin-left: 62px;
+    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,
@@ -366,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,
@@ -409,14 +388,15 @@ 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;
 }
@@ -430,165 +410,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 {
-  width: 18px;
-  height: 18px;
-  margin-left: 3px;
-  margin-bottom: 8px;
-  margin-top: 8px;
-}
+.querybuilder-addpropertyImg,
 .querybuilder-cancelImg {
-  width: 14px;
-  height: 14px;
-  margin-left: 3px;
-  margin-bottom: 8px;
-  margin-top: 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;
 }
 
-.query-document-detail-list {
-  height: 100%;
-}
-.query-table-clause-container {
-  max-height: 150px;
-  overflow: scroll;
-  overflow-x: hidden;
-}
-.query-tab-document-pagination {
-  display: flex;
-  flex-direction: row;
-  position: absolute;
-  bottom: 0;
-  padding-left: 12px;
-  justify-content: space-between;
-  width: 100%;
-  align-items: center;
-  height: 60px;
-}
-.pagination {
-  margin: 15px 0 !important;
-  order: 2;
-  padding-right: 15px;
-  li > .item-link {
-    position: relative;
-    float: left;
-    padding: 6px 12px;
-    margin-left: -1px;
-    line-height: 1.42857143;
-    text-decoration: none;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    cursor: pointer;
-    &:hover {
-      font-weight: bold;
-      background: #eef7ff;
-    }
-  }
-}
-
-.noData {
-  background-color: #e3e2e6;
-  color: #e3e2e6;
-  padding-top: 1px;
-  height: 100%;
-  width: 100%;
-}
 
 /*
 @media only screen and (max-width: 1200px) {
@@ -598,4 +524,4 @@ input::-webkit-inner-spin-button {
         width: 100%;
         padding-top: 10px;
     }
-}*/
+}*/

less/documentDB.less

@@ -2357,8 +2357,6 @@ a:link {
   height: 100%;
   flex-grow: 1;
   overflow: hidden;
-  min-height: 300px;
-  overflow-y: scroll;
 }
 
 .tabs {
@@ -2834,8 +2832,6 @@ a:link {
 
 #explorerNotificationConsole {
   z-index: 1000;
-  overflow-y: auto;
-  overflow-x: clip;
 }
 
 .uniqueIndexesContainer {

src/Bindings/BindingHandlersRegisterer.ts

@@ -1,5 +1,7 @@
 import * as ko from "knockout";
 import * as ReactBindingHandler from "./ReactBindingHandler";
+import "../Explorer/Tables/DataTable/DataTableBindingManager";
+
 export class BindingHandlersRegisterer {
   public static registerBindingHandlers() {
     ko.bindingHandlers.setTemplateReady = {

src/Common/CollapsedResourceTree.tsx

@@ -1,7 +1,6 @@
-import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
+import React, { FunctionComponent } from "react";
 import arrowLeftImg from "../../images/imgarrowlefticon.svg";
 import { userContext } from "../UserContext";
-import { NormalizedEventKey } from "./Constants";
 
 export interface CollapsedResourceTreeProps {
   toggleLeftPaneExpanded: () => void;
@@ -12,21 +11,6 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
   toggleLeftPaneExpanded,
   isLeftPaneExpanded,
 }: CollapsedResourceTreeProps): JSX.Element => {
-  const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
-
-  useEffect(() => {
-    if (focusButton.current) {
-      focusButton.current.focus();
-    }
-  });
-
-  const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
-    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
-      toggleLeftPaneExpanded();
-      event.stopPropagation();
-    }
-  };
-
   return (
     <div id="mini" className={!isLeftPaneExpanded ? "mini toggle-mini" : "hiddenMain"}>
       <div className="main-nav nav">
@@ -37,14 +21,11 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
             role="button"
             tabIndex={0}
             aria-label="Expand Tree"
-            onClick={toggleLeftPaneExpanded}
-            onKeyPress={onKeyPressToggleLeftPaneExpanded}
-            ref={focusButton}
           >
-            <span className="leftarrowCollapsed">
+            <span className="leftarrowCollapsed" onClick={toggleLeftPaneExpanded}>
               <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
             </span>
-            <span className="collectionCollapsed">
+            <span className="collectionCollapsed" onClick={toggleLeftPaneExpanded}>
               <span>{userContext.apiType} API</span>
             </span>
           </li>

src/Common/Constants.ts

@@ -96,7 +96,6 @@ export class Flights {
   public static readonly AutoscaleTest = "autoscaletest";
   public static readonly PartitionKeyTest = "partitionkeytest";
   public static readonly PKPartitionKeyTest = "pkpartitionkeytest";
-  public static readonly Phoenix = "phoenix";
 }
 
 export class AfecFeatures {
@@ -338,12 +337,6 @@ export enum ConflictOperationType {
   Delete = "delete",
 }
 
-export enum ConnectionStatusType {
-  Connecting = "Connecting",
-  Connected = "Connected",
-  Failed = "Connection Failed",
-}
-
 export const EmulatorMasterKey =
   //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
   "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";

src/Common/EntityValue.tsx

@@ -54,7 +54,7 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
     <TextField
       label={entityValueLabel && entityValueLabel}
       className="addEntityTextField"
-      // id="entityValueId"
+      id="entityValueId"
       autoFocus
       disabled={isEntityValueDisable}
       type={entityValueType}

src/Common/MongoProxyClient.test.ts

@@ -3,16 +3,8 @@ import { resetConfigContext, updateConfigContext } from "../ConfigContext";
 import { DatabaseAccount } from "../Contracts/DataModels";
 import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
-import { extractFeatures } from "../Platform/Hosted/extractFeatures";
 import { updateUserContext } from "../UserContext";
-import {
-  deleteDocument,
-  getEndpoint,
-  getFeatureEndpointOrDefault,
-  queryDocuments,
-  readDocument,
-  updateDocument,
-} from "./MongoProxyClient";
+import { deleteDocument, getEndpoint, queryDocuments, readDocument, updateDocument } from "./MongoProxyClient";
 
 const databaseId = "testDB";
 
@@ -254,31 +246,4 @@ describe("MongoProxyClient", () => {
       expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/guest/mongo/explorer");
     });
   });
-  describe("getFeatureEndpointOrDefault", () => {
-    beforeEach(() => {
-      resetConfigContext();
-      updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
-      });
-      const params = new URLSearchParams({
-        "feature.mongoProxyEndpoint": "https://localhost:12901",
-        "feature.mongoProxyAPIs": "readDocument|createDocument",
-      });
-      const features = extractFeatures(params);
-      updateUserContext({
-        authType: AuthType.AAD,
-        features: features,
-      });
-    });
-
-    it("returns a local endpoint", () => {
-      const endpoint = getFeatureEndpointOrDefault("readDocument");
-      expect(endpoint).toEqual("https://localhost:12901/api/mongo/explorer");
-    });
-
-    it("returns a production endpoint", () => {
-      const endpoint = getFeatureEndpointOrDefault("deleteDocument");
-      expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/mongo/explorer");
-    });
-  });
 });

src/Common/MongoProxyClient.ts

@@ -6,7 +6,6 @@ import * as DataModels from "../Contracts/DataModels";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
-import { hasFlag } from "../Platform/Hosted/extractFeatures";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
@@ -79,7 +78,7 @@ export function queryDocuments(
         : "",
   };
 
-  const endpoint = getFeatureEndpointOrDefault("resourcelist") || "";
+  const endpoint = getEndpoint() || "";
 
   const headers = {
     ...defaultHeaders,
@@ -142,8 +141,7 @@ export function readDocument(
         : "",
   };
 
-  const endpoint = getFeatureEndpointOrDefault("readDocument");
-
+  const endpoint = getEndpoint();
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
       method: "GET",
@@ -183,7 +181,7 @@ export function createDocument(
     pk: collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : "",
   };
 
-  const endpoint = getFeatureEndpointOrDefault("createDocument");
+  const endpoint = getEndpoint();
 
   return window
     .fetch(`${endpoint}/resourcelist?${queryString.stringify(params)}`, {
@@ -227,7 +225,7 @@ export function updateDocument(
         ? documentId.partitionKeyProperty
         : "",
   };
-  const endpoint = getFeatureEndpointOrDefault("updateDocument");
+  const endpoint = getEndpoint();
 
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -268,7 +266,7 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
         ? documentId.partitionKeyProperty
         : "",
   };
-  const endpoint = getFeatureEndpointOrDefault("deleteDocument");
+  const endpoint = getEndpoint();
 
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -311,7 +309,7 @@ export function createMongoCollectionWithProxy(
     autoPilotThroughput: params.autoPilotMaxThroughput?.toString(),
   };
 
-  const endpoint = getFeatureEndpointOrDefault("createCollectionWithProxy");
+  const endpoint = getEndpoint();
 
   return window
     .fetch(
@@ -335,15 +333,8 @@ export function createMongoCollectionWithProxy(
     });
 }
 
-export function getFeatureEndpointOrDefault(feature: string): string {
-  return hasFlag(userContext.features.mongoProxyAPIs, feature)
-    ? getEndpoint(userContext.features.mongoProxyEndpoint)
-    : getEndpoint();
-}
-
-export function getEndpoint(customEndpoint?: string): string {
-  let url = customEndpoint ? customEndpoint : configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT;
-  url += "/api/mongo/explorer";
+export function getEndpoint(): string {
+  let url = (configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT) + "/api/mongo/explorer";
 
   if (userContext.authType === AuthType.EncryptedToken) {
     url = url.replace("api/mongo", "api/guest/mongo");

src/Common/ResourceTreeContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
+import React, { FunctionComponent } from "react";
 import arrowLeftImg from "../../images/imgarrowlefticon.svg";
 import refreshImg from "../../images/refresh-cosmos.svg";
 import { AuthType } from "../AuthType";
@@ -6,7 +6,6 @@ import Explorer from "../Explorer/Explorer";
 import { ResourceTokenTree } from "../Explorer/Tree/ResourceTokenTree";
 import { ResourceTree } from "../Explorer/Tree/ResourceTree";
 import { userContext } from "../UserContext";
-import { NormalizedEventKey } from "./Constants";
 
 export interface ResourceTreeContainerProps {
   toggleLeftPaneExpanded: () => void;
@@ -19,22 +18,6 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
   isLeftPaneExpanded,
   container,
 }: ResourceTreeContainerProps): JSX.Element => {
-  const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
-
-  useEffect(() => {
-    if (isLeftPaneExpanded) {
-      if (focusButton.current) {
-        focusButton.current.focus();
-      }
-    }
-  });
-
-  const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
-    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
-      toggleLeftPaneExpanded();
-      event.stopPropagation();
-    }
-  };
   return (
     <div id="main" className={isLeftPaneExpanded ? "main" : "hiddenMain"}>
       {/* Collections Window - - Start */}
@@ -60,11 +43,9 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
                 id="expandToggleLeftPaneButton"
                 role="button"
                 onClick={toggleLeftPaneExpanded}
-                onKeyPress={onKeyPressToggleLeftPaneExpanded}
                 tabIndex={0}
                 aria-label="Collapse Tree"
                 title="Collapse Tree"
-                ref={focusButton}
               >
                 <img className="refreshcol1" src={arrowLeftImg} alt="Hide" />
               </span>

src/Common/TableEntity.tsx

@@ -36,7 +36,7 @@ export interface TableEntityProps {
   onDeleteEntity?: () => void;
   onEditEntity?: () => void;
   onEntityPropertyChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
-  onEntityTypeChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void;
+  onEntityTypeChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption | undefined) => void;
   onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
   onSelectDate: (date: Date | null | undefined) => void;
   onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
@@ -95,6 +95,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
       <Stack horizontal tokens={sectionStackTokens}>
         <TextField
           label={entityPropertyLabel && entityPropertyLabel}
+          id="entityPropertyId"
           autoFocus
           disabled={isPropertyTypeDisable}
           placeholder={entityPropertyPlaceHolder}
@@ -108,6 +109,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           onChange={onEntityTypeChange}
           options={options}
           disabled={isPropertyTypeDisable}
+          id="entityTypeId"
           styles={dropdownStyles}
         />
         <EntityValue

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="Info" className="panelInfoIcon" />
       </TooltipHost>
     </span>
   );

src/Contracts/DataModels.ts

@@ -1,5 +1,3 @@
-import { ConnectionStatusType } from "../Common/Constants";
-
 export interface DatabaseAccount {
   id: string;
   name: string;
@@ -498,8 +496,3 @@ export interface MemoryUsageInfo {
   freeKB: number;
   totalKB: number;
 }
-
-export interface ContainerConnectionInfo {
-  status: ConnectionStatusType;
-  //need to add ram and rom info
-}

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -1,6 +1,5 @@
 import { Icon, Label, Stack } from "@fluentui/react";
 import * as React from "react";
-import { NormalizedEventKey } from "../../../Common/Constants";
 import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
 
 export interface CollapsibleSectionProps {
@@ -31,13 +30,6 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
     }
   }
 
-  private onKeyPress = (event: React.KeyboardEvent) => {
-    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
-      this.toggleCollapsed();
-      event.stopPropagation();
-    }
-  };
-
   public render(): JSX.Element {
     return (
       <>
@@ -47,11 +39,6 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
           verticalAlign="center"
           tokens={accordionStackTokens}
           onClick={this.toggleCollapsed}
-          onKeyPress={this.onKeyPress}
-          tabIndex={0}
-          aria-name="Advanced"
-          role="button"
-          aria-expanded={this.state.isExpanded}
         >
           <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
           <Label>{this.props.title}</Label>

src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap

@@ -3,14 +3,9 @@
 exports[`CollapsibleSectionComponent renders 1`] = `
 <Fragment>
   <Stack
-    aria-expanded={true}
-    aria-name="Advanced"
     className="collapsibleSection"
     horizontal={true}
     onClick={[Function]}
-    onKeyPress={[Function]}
-    role="button"
-    tabIndex={0}
     tokens={
       Object {
         "childrenGap": 10,

src/Explorer/Controls/Dialog.tsx

@@ -181,7 +181,8 @@ export const Dialog: FC = () => {
           text: secondaryButtonText,
           onClick: onSecondaryButtonClick,
         }
-      : undefined;
+      : {};
+
   return visible ? (
     <FluentDialog {...dialogProps}>
       {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}

src/Explorer/Controls/InputTypeahead/InputTypeahead.less

@@ -8,9 +8,6 @@
     .input-type-head-text-field {
         width: 100%;
     }
-    .input-query-form {
-        width: 100%;
-    }
     textarea {
         width: 100%;
         line-height: 1;

src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx

@@ -160,21 +160,18 @@ export class InputTypeaheadComponent extends React.Component<
     return (
       <div className="input-typeahead-container">
         <Stack horizontal>
-          <form aria-labelledby="input" className="input-query-form">
-            <TextField
-              multiline={useTextarea}
-              rows={1}
-              id="input"
-              defaultValue={defaultValue}
-              ariaLabel="Input query"
-              placeholder={placeholder}
-              className="input-type-head-text-field"
-              value={defaultValue}
-              onKeyDown={this.onSubmit}
-              onFocus={() => this.setState({ isSuggestionVisible: true })}
-              onChange={(_event, newValue?: string) => this.handleChange(newValue)}
-            />
-          </form>
+          <TextField
+            multiline={useTextarea}
+            rows={1}
+            defaultValue={defaultValue}
+            ariaLabel="Input query"
+            placeholder={placeholder}
+            className="input-type-head-text-field"
+            value={defaultValue}
+            onKeyDown={this.onSubmit}
+            onFocus={() => this.setState({ isSuggestionVisible: true })}
+            onChange={(_event, newValue?: string) => this.handleChange(newValue)}
+          />
           {this.props.showCancelButton && (
             <IconButton
               styles={iconButtonStyles}

src/Explorer/Controls/InputTypeahead/__snapshots__/InputTypeaheadComponent.test.tsx.snap

@@ -7,22 +7,16 @@ exports[`inputTypeahead renders <input /> 1`] = `
   <Stack
     horizontal={true}
   >
-    <form
-      aria-labelledby="input"
-      className="input-query-form"
-    >
-      <StyledTextFieldBase
-        ariaLabel="Input query"
-        className="input-type-head-text-field"
-        id="input"
-        multiline={false}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        placeholder="placeholder"
-        rows={1}
-      />
-    </form>
+    <StyledTextFieldBase
+      ariaLabel="Input query"
+      className="input-type-head-text-field"
+      multiline={false}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="placeholder"
+      rows={1}
+    />
   </Stack>
 </div>
 `;
@@ -34,22 +28,16 @@ exports[`inputTypeahead renders <textarea /> 1`] = `
   <Stack
     horizontal={true}
   >
-    <form
-      aria-labelledby="input"
-      className="input-query-form"
-    >
-      <StyledTextFieldBase
-        ariaLabel="Input query"
-        className="input-type-head-text-field"
-        id="input"
-        multiline={true}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        placeholder="placeholder"
-        rows={1}
-      />
-    </form>
+    <StyledTextFieldBase
+      ariaLabel="Input query"
+      className="input-type-head-text-field"
+      multiline={true}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="placeholder"
+      rows={1}
+    />
   </Stack>
 </div>
 `;

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -1,45 +1,45 @@
+import * as React from "react";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
+import { Urls, StyleConstants } from "../../../Common/Constants";
+import {
+  getPriceCurrency,
+  getCurrencySign,
+  getAutoscalePricePerRu,
+  getMultimasterMultiplier,
+  computeRUUsagePriceHourly,
+  getPricePerRu,
+  estimatedCostDisclaimer,
+} from "../../../Utils/PricingUtils";
 import {
-  DetailsList,
-  DetailsListLayoutMode,
-  DetailsRow,
-  ICheckboxStyles,
-  IChoiceGroupStyles,
-  IColumn,
-  IDetailsColumnStyles,
-  IDetailsListStyles,
-  IDetailsRowProps,
-  IDetailsRowStyles,
-  IDropdownStyles,
-  IMessageBarStyles,
-  ISeparatorStyles,
-  IStackProps,
-  IStackStyles,
-  IStackTokens,
   ITextFieldStyles,
-  ITextStyles,
+  ICheckboxStyles,
+  IStackProps,
+  IStackTokens,
+  IChoiceGroupStyles,
   Link,
+  Text,
+  IMessageBarStyles,
+  ITextStyles,
+  IDetailsRowStyles,
+  IStackStyles,
+  IDetailsListStyles,
+  IDropdownStyles,
+  ISeparatorStyles,
   MessageBar,
   MessageBarType,
-  SelectionMode,
+  Stack,
   Spinner,
   SpinnerSize,
-  Stack,
-  Text,
+  DetailsList,
+  IColumn,
+  SelectionMode,
+  DetailsListLayoutMode,
+  IDetailsRowProps,
+  DetailsRow,
+  IDetailsColumnStyles,
 } from "@fluentui/react";
-import * as React from "react";
-import { StyleConstants, Urls } from "../../../Common/Constants";
-import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import {
-  computeRUUsagePriceHourly,
-  estimatedCostDisclaimer,
-  getAutoscalePricePerRu,
-  getCurrencySign,
-  getMultimasterMultiplier,
-  getPriceCurrency,
-  getPricePerRu,
-} from "../../../Utils/PricingUtils";
-import { isDirty, isDirtyTypes } from "./SettingsUtils";
+import { isDirtyTypes, isDirty } from "./SettingsUtils";
 
 export interface EstimatedSpendingDisplayProps {
   costType: JSX.Element;
@@ -65,7 +65,7 @@ export interface PriceBreakdown {
   currencySign: string;
 }
 
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14 } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
   label: {
@@ -223,15 +223,14 @@ export const getRuPriceBreakdown = (
     multimasterEnabled: isMultimaster,
     isAutoscale: isAutoscale,
   });
-  const multimasterMultiplier = getMultimasterMultiplier(numberOfRegions, isMultimaster);
-  const pricePerRu: number = isAutoscale
-    ? getAutoscalePricePerRu(serverId, multimasterMultiplier)
-    : getPricePerRu(serverId, multimasterMultiplier);
+  const basePricePerRu: number = isAutoscale
+    ? getAutoscalePricePerRu(serverId, getMultimasterMultiplier(numberOfRegions, isMultimaster))
+    : getPricePerRu(serverId);
   return {
-    hourlyPrice,
+    hourlyPrice: hourlyPrice,
     dailyPrice: hourlyPrice * 24,
     monthlyPrice: hourlyPrice * hoursInAMonth,
-    pricePerRu,
+    pricePerRu: basePricePerRu * getMultimasterMultiplier(numberOfRegions, isMultimaster),
     currency: getPriceCurrency(serverId),
     currencySign: getCurrencySign(serverId),
   };
@@ -272,7 +271,7 @@ export const manualToAutoscaleDisclaimerElement: JSX.Element = (
   <Text styles={infoAndToolTipTextStyle} id="manualToAutoscaleDisclaimerElement">
     The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings
     and storage of your resource. After autoscale has been enabled, you can change the max RU/s.{" "}
-    <Link href={Urls.autoscaleMigration}>Learn more</Link>
+    <a href={Urls.autoscaleMigration}>Learn more</a>
   </Text>
 );
 

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap

@@ -8,7 +8,6 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }

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

@@ -20,7 +20,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
       styles={
         Object {
           "root": Object {
-            "color": "windowtext",
             "fontSize": 14,
           },
         }
@@ -40,7 +39,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -75,7 +73,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         styles={
           Object {
             "root": Object {
-              "color": "windowtext",
               "fontSize": 14,
             },
           }
@@ -83,11 +80,11 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
       >
         The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
          
-        <StyledLinkBase
+        <a
           href="https://aka.ms/cosmos-autoscale-migration"
         >
           Learn more
-        </StyledLinkBase>
+        </a>
       </Text>
     </StyledMessageBar>
     <StyledChoiceGroup
@@ -189,7 +186,6 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -464,7 +460,6 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ScaleComponent.test.tsx.snap

@@ -16,7 +16,6 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
       styles={
         Object {
           "root": Object {
-            "color": "windowtext",
             "fontSize": 14,
           },
         }

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap

@@ -136,7 +136,6 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -413,7 +412,6 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -954,7 +952,6 @@ exports[`SubSettingsComponent renders 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -1231,7 +1228,6 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }

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

@@ -34,7 +34,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "phoenixClient": PhoenixClient {},
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -102,7 +101,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "phoenixClient": PhoenixClient {},
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],

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

@@ -159,7 +159,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -167,17 +166,16 @@ exports[`SettingsUtils functions render 1`] = `
   >
     The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
      
-    <StyledLinkBase
+    <a
       href="https://aka.ms/cosmos-autoscale-migration"
     >
       Learn more
-    </StyledLinkBase>
+    </a>
   </Text>
   <Text
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -197,7 +195,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -210,7 +207,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -223,7 +219,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -235,7 +230,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -255,7 +249,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -271,7 +264,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -286,7 +278,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -300,7 +291,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -312,7 +302,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -332,7 +321,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -375,7 +363,6 @@ exports[`SettingsUtils functions render 1`] = `
       styles={
         Object {
           "root": Object {
-            "color": "windowtext",
             "fontSize": 14,
           },
         }
@@ -391,7 +378,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -408,7 +394,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }

src/Explorer/Controls/Tabs/TabComponent.less

@@ -1,6 +1,7 @@
 @import "../../../../less/Common/Constants";
 
 .tabComponentContainer {
+    overflow: hidden;
     height: 100%;
     .flex-display();
     .flex-direction();

src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx

@@ -6,7 +6,6 @@ import { userContext } from "../../../../UserContext";
 import {
   calculateEstimateNumber,
   computeRUUsagePriceHourly,
-  estimatedCostDisclaimer,
   getAutoscalePricePerRu,
   getCurrencySign,
   getMultimasterMultiplier,
@@ -43,9 +42,11 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
   const currency: string = getPriceCurrency(serverId);
   const currencySign: string = getCurrencySign(serverId);
   const multiplier = getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
-  const pricePerRu = isAutoscale ? getAutoscalePricePerRu(serverId, multiplier) : getPricePerRu(serverId, multiplier);
+  const pricePerRu = isAutoscale
+    ? getAutoscalePricePerRu(serverId, multiplier) * multiplier
+    : getPricePerRu(serverId) * multiplier;
 
-  const iconWithEstimatedCostDisclaimer: JSX.Element = <InfoTooltip>{estimatedCostDisclaimer}</InfoTooltip>;
+  const iconWithEstimatedCostDisclaimer: JSX.Element = <InfoTooltip>PricingUtils.estimatedCostDisclaimer</InfoTooltip>;
 
   if (isAutoscale) {
     return (

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -118,7 +118,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
         <input
           className="throughputInputRadioBtn"
           aria-label="Autoscale mode"
-          aria-required={true}
           checked={isAutoscaleSelected}
           type="radio"
           role="radio"
@@ -132,7 +131,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           aria-label="Manual mode"
           checked={!isAutoscaleSelected}
           type="radio"
-          aria-required={true}
           role="radio"
           tabIndex={0}
           onChange={(e) => handleOnChangeMode(e, "Manual")}

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

@@ -345,14 +345,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     ariaLabel="Info"
                     className="panelInfoIcon"
                     iconName="Info"
-                    tabIndex={0}
                   >
                     <IconBase
                       ariaLabel="Info"
                       className="panelInfoIcon"
                       iconName="Info"
                       styles={[Function]}
-                      tabIndex={0}
                       theme={
                         Object {
                           "disableGlobalClassNames": false,
@@ -632,7 +630,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         className="panelInfoIcon root-57"
                         data-icon-name="Info"
                         role="img"
-                        tabIndex={0}
                       >
                         
                       </i>
@@ -654,7 +651,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       >
         <input
           aria-label="Autoscale mode"
-          aria-required={true}
           checked={true}
           className="throughputInputRadioBtn"
           key=".0:$.0"
@@ -671,7 +667,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
         </span>
         <input
           aria-label="Manual mode"
-          aria-required={true}
           checked={false}
           className="throughputInputRadioBtn"
           key=".0:$.2"
@@ -1332,14 +1327,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         ariaLabel="Info"
                         className="panelInfoIcon"
                         iconName="Info"
-                        tabIndex={0}
                       >
                         <IconBase
                           ariaLabel="Info"
                           className="panelInfoIcon"
                           iconName="Info"
                           styles={[Function]}
-                          tabIndex={0}
                           theme={
                             Object {
                               "disableGlobalClassNames": false,
@@ -1619,7 +1612,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                             className="panelInfoIcon root-57"
                             data-icon-name="Info"
                             role="img"
-                            tabIndex={0}
                           >
                             
                           </i>

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -43,7 +43,7 @@ export interface TreeNode {
   isLeavesParentsSeparate?: boolean; // Display parents together first, then leaves
   isLoading?: boolean;
   isSelected?: () => boolean;
-  onClick?: (isExpanded: boolean) => void; // Only if a leaf, other click will expand/collapse
+  onClick?: (isExpanded?: boolean) => void; // Only if a leaf, other click will expand/collapse
   onExpanded?: () => void;
   onCollapsed?: () => void;
   onContextMenuOpen?: () => void;
@@ -73,7 +73,7 @@ interface TreeNodeComponentProps {
 }
 
 interface TreeNodeComponentState {
-  isExpanded: boolean;
+  isExpanded?: boolean;
   isMenuShowing: boolean;
 }
 export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, TreeNodeComponentState> {
@@ -82,7 +82,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
   private static readonly transitionDurationMS = 200;
   private static readonly callbackDelayMS = 100; // avoid calling at the same time as transition to make it smoother
   private contextMenuRef = React.createRef<HTMLDivElement>();
-  private isExpanded: boolean;
+  private isExpanded?: boolean;
 
   constructor(props: TreeNodeComponentProps) {
     super(props);
@@ -93,7 +93,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
     };
   }
 
-  componentDidUpdate(prevProps: TreeNodeComponentProps, prevState: TreeNodeComponentState) {
+  componentDidUpdate(_prevProps: TreeNodeComponentProps, prevState: TreeNodeComponentState) {
     // Only call when expand has actually changed
     if (this.state.isExpanded !== prevState.isExpanded) {
       if (this.state.isExpanded) {
@@ -103,7 +103,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
       }
     }
     if (this.props.node.isExpanded !== this.isExpanded) {
-      this.isExpanded = this.props.node.isExpanded;
+      this.isExpanded = this.props.node && this.props.node.isExpanded;
       this.setState({
         isExpanded: this.props.node.isExpanded,
       });
@@ -114,7 +114,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
     return this.renderNode(this.props.node, this.props.generation);
   }
 
-  private static getSortedChildren(treeNode: TreeNode): TreeNode[] {
+  private static getSortedChildren(treeNode: TreeNode): TreeNode[] | undefined {
     if (!treeNode || !treeNode.children) {
       return undefined;
     }
@@ -195,7 +195,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
         {node.children && (
           <AnimateHeight duration={TreeNodeComponent.transitionDurationMS} height={this.state.isExpanded ? "auto" : 0}>
             <div className="nodeChildren" data-test={node.label}>
-              {TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => (
+              {TreeNodeComponent?.getSortedChildren(node)?.map((childNode: TreeNode) => (
                 <TreeNodeComponent
                   key={`${childNode.label}-${generation + 1}-${childNode.timestamp}`}
                   node={childNode}
@@ -214,15 +214,15 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
    * Recursive: is the node or any descendant selected
    * @param node
    */
+
   private static isAnyDescendantSelected(node: TreeNode): boolean {
-    return (
-      node.children &&
-      node.children.reduce(
-        (previous: boolean, child: TreeNode) =>
-          previous || (child.isSelected && child.isSelected()) || TreeNodeComponent.isAnyDescendantSelected(child),
-        false
-      )
-    );
+    return node.children
+      ? node.children.reduce(
+          (previous: boolean, child: TreeNode) =>
+            previous || (child.isSelected && child.isSelected()) || TreeNodeComponent.isAnyDescendantSelected(child),
+          false
+        )
+      : false;
   }
 
   private static createClickEvent(): MouseEvent {
@@ -230,7 +230,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
   }
 
   private onRightClick = (): void => {
-    this.contextMenuRef.current.firstChild.dispatchEvent(TreeNodeComponent.createClickEvent());
+    this.contextMenuRef?.current?.firstChild?.dispatchEvent(TreeNodeComponent.createClickEvent());
   };
 
   private renderContextMenuButton(node: TreeNode): JSX.Element {
@@ -243,7 +243,6 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
       <div ref={this.contextMenuRef} onContextMenu={this.onRightClick} onKeyPress={this.onMoreButtonKeyPress}>
         <IconButton
           name="More"
-          title="More"
           className="treeMenuEllipsis"
           ariaLabel={menuItemLabel}
           menuIconProps={{
@@ -254,18 +253,18 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
             coverTarget: true,
             isBeakVisible: false,
             directionalHint: DirectionalHint.topAutoEdge,
-            onMenuOpened: (contextualMenu?: IContextualMenuProps) => {
+            onMenuOpened: (_contextualMenu?: IContextualMenuProps) => {
               this.setState({ isMenuShowing: true });
               node.onContextMenuOpen && node.onContextMenuOpen();
             },
-            onMenuDismissed: (contextualMenu?: IContextualMenuProps) => this.setState({ isMenuShowing: false }),
+            onMenuDismissed: (_contextualMenu?: IContextualMenuProps) => this.setState({ isMenuShowing: false }),
             contextualMenuItemAs: (props: IContextualMenuItemProps) => (
               <div
                 data-test={`treeComponentMenuItemContainer`}
                 className="treeComponentMenuItemContainer"
                 onContextMenu={(e) => e.target.dispatchEvent(TreeNodeComponent.createClickEvent())}
               >
-                {props.item.onRenderIcon()}
+                {props.item.onRenderIcon && props.item.onRenderIcon()}
                 <span
                   className={
                     "treeComponentMenuItemLabel" + (props.item.className ? ` ${props.item.className}Label` : "")
@@ -275,19 +274,21 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
                 </span>
               </div>
             ),
-            items: node.contextMenu.map((menuItem: TreeNodeMenuItem) => ({
-              key: menuItem.label,
-              text: menuItem.label,
-              disabled: menuItem.isDisabled,
-              className: menuItem.styleClass,
-              onClick: () => {
-                menuItem.onClick();
-                TelemetryProcessor.trace(Action.ClickResourceTreeNodeContextMenuItem, ActionModifiers.Mark, {
-                  label: menuItem.label,
-                });
-              },
-              onRenderIcon: (props: any) => <img src={menuItem.iconSrc} alt="" />,
-            })),
+            items: node.contextMenu
+              ? node.contextMenu.map((menuItem: TreeNodeMenuItem) => ({
+                  key: menuItem.label,
+                  text: menuItem.label,
+                  disabled: menuItem.isDisabled,
+                  className: menuItem.styleClass,
+                  onClick: () => {
+                    menuItem.onClick();
+                    TelemetryProcessor.trace(Action.ClickResourceTreeNodeContextMenuItem, ActionModifiers.Mark, {
+                      label: menuItem.label,
+                    });
+                  },
+                  onRenderIcon: (_props: any) => <img src={menuItem.iconSrc} alt="" />,
+                }))
+              : [],
           }}
           styles={buttonStyles}
         />
@@ -325,7 +326,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
     this.props.node.onClick && this.props.node.onClick(this.state.isExpanded);
   };
 
-  private onNodeKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, node: TreeNode): void => {
+  private onNodeKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, _node: TreeNode): void => {
     if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
       event.stopPropagation();
       this.props.node.onClick && this.props.node.onClick(this.state.isExpanded);

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

@@ -211,7 +211,6 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
             },
           }
         }
-        title="More"
       />
     </div>
   </div>
@@ -424,7 +423,6 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
             },
           }
         }
-        title="More"
       />
     </div>
   </div>

src/Explorer/Explorer.tsx

@@ -16,7 +16,6 @@ import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { useTabs } from "../hooks/useTabs";
 import { IGalleryItem } from "../Juno/JunoClient";
-import { PhoenixClient } from "../Phoenix/PhoenixClient";
 import * as ExplorerSettings from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
@@ -88,13 +87,12 @@ export default class Explorer {
   };
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
-  private phoenixClient: PhoenixClient;
+
   constructor() {
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
     this._isInitializingNotebooks = false;
-    this.phoenixClient = new PhoenixClient();
     useNotebook.subscribe(
       () => this.refreshCommandBarButtons(),
       (state) => state.isNotebooksEnabledForAccount
@@ -345,36 +343,19 @@ export default class Explorer {
       return;
     }
     this._isInitializingNotebooks = true;
-    if (userContext.features.phoenix) {
-      const provisionData = {
-        cosmosEndpoint: userContext.databaseAccount.properties.documentEndpoint,
-        resourceId: userContext.databaseAccount.id,
-        dbAccountName: userContext.databaseAccount.name,
-        aadToken: userContext.authorizationToken,
-        resourceGroup: userContext.resourceGroup,
-        subscriptionId: userContext.subscriptionId,
-      };
-      const connectionInfo = await this.phoenixClient.containerConnectionInfo(provisionData);
-      if (connectionInfo.data && connectionInfo.data.notebookServerUrl) {
-        useNotebook.getState().setNotebookServerInfo({
-          notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.data.notebookServerUrl,
-          authToken: userContext.features.notebookServerToken || connectionInfo.data.notebookAuthToken,
-        });
-      }
-    } else {
-      await this.ensureNotebookWorkspaceRunning();
-      const connectionInfo = await listConnectionInfo(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        databaseAccount.name,
-        "default"
-      );
 
-      useNotebook.getState().setNotebookServerInfo({
-        notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.notebookServerEndpoint,
-        authToken: userContext.features.notebookServerToken || connectionInfo.authToken,
-      });
-    }
+    await this.ensureNotebookWorkspaceRunning();
+    const connectionInfo = await listConnectionInfo(
+      userContext.subscriptionId,
+      userContext.resourceGroup,
+      databaseAccount.name,
+      "default"
+    );
+
+    useNotebook.getState().setNotebookServerInfo({
+      notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.notebookServerEndpoint,
+      authToken: userContext.features.notebookServerToken || connectionInfo.authToken,
+    });
 
     useNotebook.getState().initializeNotebooksTree(this.notebookManager);
 
@@ -383,7 +364,7 @@ export default class Explorer {
     this._isInitializingNotebooks = false;
   }
 
-  public resetNotebookWorkspace(): void {
+  public resetNotebookWorkspace() {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookClient) {
       handleError(
         "Attempt to reset notebook workspace, but notebook is not enabled",
@@ -408,6 +389,7 @@ export default class Explorer {
     if (!databaseAccount) {
       return false;
     }
+
     try {
       const { value: workspaces } = await listByDatabaseAccount(
         userContext.subscriptionId,
@@ -924,7 +906,7 @@ export default class Explorer {
     await this.notebookManager?.notebookContentClient.updateItemChildrenInPlace(item);
   }
 
-  public openNotebookTerminal(kind: ViewModels.TerminalKind): void {
+  public openNotebookTerminal(kind: ViewModels.TerminalKind) {
     let title: string;
 
     switch (kind) {
@@ -1044,10 +1026,7 @@ export default class Explorer {
   }
 
   public async handleOpenFileAction(path: string): Promise<void> {
-    if (
-      userContext.features.phoenix === false &&
-      !(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))
-    ) {
+    if (!(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))) {
       this._openSetupNotebooksPaneForQuickstart();
     }
 
@@ -1093,13 +1072,10 @@ export default class Explorer {
       ? this.refreshDatabaseForResourceToken()
       : this.refreshAllDatabases();
     await useNotebook.getState().refreshNotebooksEnabledStateForAccount();
-    let isNotebookEnabled = true;
-    if (!userContext.features.phoenix) {
-      isNotebookEnabled =
-        userContext.authType !== AuthType.ResourceToken &&
-        ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
-          userContext.features.enableNotebooks);
-    }
+    const isNotebookEnabled: boolean =
+      userContext.authType !== AuthType.ResourceToken &&
+      ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
+        userContext.features.enableNotebooks);
     useNotebook.getState().setIsNotebookEnabled(isNotebookEnabled);
     useNotebook.getState().setIsShellEnabled(isNotebookEnabled && isPublicInternetAccessAllowed());
 

src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts

@@ -736,7 +736,7 @@ export class D3ForceGraph implements GraphRenderer {
       .on("dblclick", function (this: Element, _: MouseEvent, d: D3Node) {
         // https://stackoverflow.com/a/41945742 ('this' implicitly has type 'any' because it does not have a type annotation)
         // this is the <g> element
-        return self.onNodeClicked(this.parentNode, d);
+        self.onNodeClicked(this.parentNode, d);
       })
       .on("click", function (this: Element, _: MouseEvent, d: D3Node) {
         // this is the <g> element

src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
+import { GraphVizComponent, GraphVizComponentProps } from "./GraphVizComponent";
 import CollapseArrowIcon from "../../../../images/Collapse_arrow_14x14.svg";
 import ExpandIcon from "../../../../images/Expand_14x14.svg";
 import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
-import { GraphVizComponent, GraphVizComponentProps } from "./GraphVizComponent";
 
 interface MiddlePaneComponentProps {
   isTabsContentExpanded: boolean;
@@ -17,14 +17,7 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
       <div className="middlePane">
         <div className="graphTitle">
           <span className="paneTitle">Graph</span>
-          <span
-            className="graphExpandCollapseBtn pull-right"
-            onClick={this.props.toggleExpandGraph}
-            role="button"
-            aria-expanded={this.props.isTabsContentExpanded}
-            aria-name="View graph in full screen"
-            tabIndex={0}
-          >
+          <span className="graphExpandCollapseBtn pull-right" onClick={this.props.toggleExpandGraph}>
             <img
               src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}
               alt={this.props.isTabsContentExpanded ? "collapse graph content" : "expand graph content"}

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -9,7 +9,6 @@ import create, { UseStore } from "zustand";
 import { StyleConstants } from "../../../Common/Constants";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { useTabs } from "../../../hooks/useTabs";
-import { userContext } from "../../../UserContext";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { useSelectedNode } from "../../useSelectedNode";
@@ -55,14 +54,6 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
-  if (
-    userContext.features.notebooksTemporarilyDown === false &&
-    userContext.features.phoenix === true &&
-    useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2
-  ) {
-    uiFabricControlButtons.unshift(CommandBarUtil.createConnectionStatus("connectionStatus"));
-  }
-
   if (useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2) {
     uiFabricControlButtons.unshift(CommandBarUtil.createMemoryTracker("memoryTracker"));
   }

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -80,9 +80,8 @@ export function createStaticCommandBarButtons(
     }
 
     notebookButtons.push(createOpenTerminalButton(container));
-    if (userContext.features.phoenix === false) {
-      notebookButtons.push(createNotebookWorkspaceResetButton(container));
-    }
+
+    notebookButtons.push(createNotebookWorkspaceResetButton(container));
     if (
       (userContext.apiType === "Mongo" &&
         useNotebook.getState().isShellEnabled &&

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -13,7 +13,6 @@ import { StyleConstants } from "../../../Common/Constants";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import { ConnectionStatus } from "./ConnectionStatusComponent";
 import { MemoryTracker } from "./MemoryTrackerComponent";
 
 /**
@@ -202,10 +201,3 @@ export const createMemoryTracker = (key: string): ICommandBarItemProps => {
     onRender: () => <MemoryTracker />,
   };
 };
-
-export const createConnectionStatus = (key: string): ICommandBarItemProps => {
-  return {
-    key,
-    onRender: () => <ConnectionStatus />,
-  };
-};

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.less

@@ -1,79 +0,0 @@
-@import "../../../../less/Common/Constants";
-
-.connectionStatusContainer {
-    cursor: default;
-    align-items: center;
-    margin: 0 9px;
-    border: 1px;
-    min-height: 44px;
-
-    > span {
-        padding-right: 12px;
-        font-size: 13px;
-        font-family: @DataExplorerFont;
-        color: @DefaultFontColor;
-    }
-}
-.connectionStatusFailed{
-    color: #bd1919;
-}
-.ring-container {
-    position: relative;
-}
-
-.ringringGreen {
-    border: 3px solid green;
-    border-radius: 30px;
-    height: 18px;
-    width: 18px;
-    position: absolute;
-    margin: .4285em 0em 0em 0.07477em;
-    animation: pulsate 3s ease-out;
-    animation-iteration-count: infinite; 
-    opacity: 0.0
-}
-.ringringYellow{
-    border: 3px solid #ffbf00;
-    border-radius: 30px;
-    height: 18px;
-    width: 18px;
-    position: absolute;
-    margin: .4285em 0em 0em 0.07477em;
-    animation: pulsate 3s ease-out;
-    animation-iteration-count: infinite; 
-    opacity: 0.0
-}
-.ringringRed{
-    border: 3px solid #bd1919;
-    border-radius: 30px;
-    height: 18px;
-    width: 18px;
-    position: absolute;
-    margin: .4285em 0em 0em 0.07477em;
-    animation: pulsate 3s ease-out;
-    animation-iteration-count: infinite; 
-    opacity: 0.0
-}
-@keyframes pulsate {
-    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
-    15% {opacity: 0.8;}
-    25% {opacity: 0.6;}
-    45% {opacity: 0.4;}
-    70% {opacity: 0.3;}
-    100% {-webkit-transform: scale(.7, .7); opacity: 0.1;}
-}
-.locationGreenDot{
-    font-size: 20px;
-    margin-right: 0.07em;
-    color: green;
-}
-.locationYellowDot{
-    font-size: 20px;
-    margin-right: 0.07em;
-    color: #ffbf00;
-}
-.locationRedDot{
-    font-size: 20px;
-    margin-right: 0.07em;
-    color: #bd1919;
-}

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.tsx

@@ -1,72 +0,0 @@
-import { Icon, ProgressIndicator, Stack, TooltipHost } from "@fluentui/react";
-import * as React from "react";
-import { ConnectionStatusType } from "../../../Common/Constants";
-import { useNotebook } from "../../Notebook/useNotebook";
-import "../CommandBar/ConnectionStatusComponent.less";
-
-export const ConnectionStatus: React.FC = (): JSX.Element => {
-  const [second, setSecond] = React.useState("00");
-  const [minute, setMinute] = React.useState("00");
-  const [isActive, setIsActive] = React.useState(false);
-  const [counter, setCounter] = React.useState(0);
-  const [statusColor, setStatusColor] = React.useState("locationYellowDot");
-  const [statusColorAnimation, setStatusColorAnimation] = React.useState("ringringYellow");
-  const toolTipContent = "Hosted runtime status.";
-  React.useEffect(() => {
-    let intervalId: NodeJS.Timeout;
-
-    if (isActive) {
-      intervalId = setInterval(() => {
-        const secondCounter = counter % 60;
-        const minuteCounter = Math.floor(counter / 60);
-        const computedSecond: string = String(secondCounter).length === 1 ? `0${secondCounter}` : `${secondCounter}`;
-        const computedMinute: string = String(minuteCounter).length === 1 ? `0${minuteCounter}` : `${minuteCounter}`;
-
-        setSecond(computedSecond);
-        setMinute(computedMinute);
-
-        setCounter((counter) => counter + 1);
-      }, 1000);
-    }
-    return () => clearInterval(intervalId);
-  }, [isActive, counter]);
-
-  const stopTimer = () => {
-    setIsActive(false);
-    setCounter(0);
-    setSecond("00");
-    setMinute("00");
-  };
-
-  const connectionInfo = useNotebook((state) => state.connectionInfo);
-  if (!connectionInfo) {
-    return <></>;
-  }
-  if (connectionInfo && connectionInfo.status === ConnectionStatusType.Connecting && isActive === false) {
-    setIsActive(true);
-  } else if (connectionInfo && connectionInfo.status === ConnectionStatusType.Connected && isActive === true) {
-    stopTimer();
-    setStatusColor("locationGreenDot");
-    setStatusColorAnimation("ringringGreen");
-  } else if (connectionInfo && connectionInfo.status === ConnectionStatusType.Failed && isActive === true) {
-    stopTimer();
-    setStatusColor("locationRedDot");
-    setStatusColorAnimation("ringringRed");
-  }
-  return (
-    <TooltipHost content={toolTipContent}>
-      <Stack className="connectionStatusContainer" horizontal>
-        <div className="ring-container">
-          <div className={statusColorAnimation}></div>
-          <Icon iconName="LocationDot" className={statusColor} />
-        </div>
-        <span className={connectionInfo.status === ConnectionStatusType.Failed ? "connectionStatusFailed" : ""}>
-          {connectionInfo.status}
-        </span>
-        {connectionInfo.status === ConnectionStatusType.Connecting && isActive && (
-          <ProgressIndicator description={minute + ":" + second} />
-        )}
-      </Stack>
-    </TooltipHost>
-  );
-};

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -129,7 +129,7 @@ export class NotificationConsoleComponent extends React.Component<
             className="expandCollapseButton"
             role="button"
             tabIndex={0}
-            aria-label={"console button" + (this.props.isConsoleExpanded ? " expanded" : " collapsed")}
+            aria-label={"console button" + (this.props.isConsoleExpanded ? " collapsed" : " expanded")}
             aria-expanded={!this.props.isConsoleExpanded}
           >
             <img
@@ -205,9 +205,7 @@ export class NotificationConsoleComponent extends React.Component<
         {item.type === ConsoleDataType.Error && <img className="errorIcon" src={ErrorRedIcon} alt="error" />}
         {item.type === ConsoleDataType.InProgress && <img className="loaderIcon" src={LoaderIcon} alt="in progress" />}
         <span className="date">{item.date}</span>
-        <span className="message" role="alert" aria-live="assertive">
-          {item.message}
-        </span>
+        <span className="message">{item.message}</span>
       </div>
     ));
   }

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

@@ -70,7 +70,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
     </div>
     <div
       aria-expanded={true}
-      aria-label="console button collapsed"
+      aria-label="console button expanded"
       className="expandCollapseButton"
       role="button"
       tabIndex={0}
@@ -236,7 +236,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
     </div>
     <div
       aria-expanded={true}
-      aria-label="console button collapsed"
+      aria-label="console button expanded"
       className="expandCollapseButton"
       role="button"
       tabIndex={0}
@@ -340,9 +340,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
             date
           </span>
           <span
-            aria-live="assertive"
             className="message"
-            role="alert"
           >
             message
           </span>

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -109,7 +109,7 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
   const q = params.toString();
   const suffix = q !== "" ? `?${q}` : "";
 
-  const url = (serverConfig.endpoint.slice(0, -1) || "") + `api/kernels/${kernelId}/channels${suffix}`;
+  const url = (serverConfig.endpoint || "") + `api/kernels/${kernelId}/channels${suffix}`;
 
   return url.replace(/^http(s)?/, "ws$1");
 };

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -56,7 +56,7 @@ export class NotebookContainerClient {
 
     const { notebookServerEndpoint, authToken } = this.getNotebookServerConfig();
     try {
-      const response = await fetch(`${notebookServerEndpoint}api/metrics/memory`, {
+      const response = await fetch(`${notebookServerEndpoint}/api/metrics/memory`, {
         method: "GET",
         headers: {
           Authorization: authToken,

src/Explorer/Notebook/NotebookContentClient.ts

@@ -36,10 +36,7 @@ export class NotebookContentClient {
    *
    * @param parent parent folder
    */
-  public async createNewNotebookFile(
-    parent: NotebookContentItem,
-    isGithubTree?: boolean
-  ): Promise<NotebookContentItem> {
+  public createNewNotebookFile(parent: NotebookContentItem, isGithubTree?: boolean): Promise<NotebookContentItem> {
     if (!parent || parent.type !== NotebookContentItemType.Directory) {
       throw new Error(`Parent must be a directory: ${parent}`);
     }
@@ -102,6 +99,7 @@ export class NotebookContentClient {
     if (!parent || parent.type !== NotebookContentItemType.Directory) {
       throw new Error(`Parent must be a directory: ${parent}`);
     }
+
     const filepath = NotebookUtil.getFilePath(parent.path, name);
     if (await this.checkIfFilepathExists(filepath)) {
       throw new Error(`File already exists: ${filepath}`);

src/Explorer/Notebook/useNotebook.ts

@@ -28,8 +28,6 @@ interface NotebookState {
   myNotebooksContentRoot: NotebookContentItem;
   gitHubNotebooksContentRoot: NotebookContentItem;
   galleryContentRoot: NotebookContentItem;
-  connectionInfo: DataModels.ContainerConnectionInfo;
-  notebookFolderName: string;
   setIsNotebookEnabled: (isNotebookEnabled: boolean) => void;
   setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => void;
   setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) => void;
@@ -38,7 +36,6 @@ interface NotebookState {
   setMemoryUsageInfo: (memoryUsageInfo: DataModels.MemoryUsageInfo) => void;
   setIsShellEnabled: (isShellEnabled: boolean) => void;
   setNotebookBasePath: (notebookBasePath: string) => void;
-  setNotebookFolderName: (notebookFolderName: string) => void;
   refreshNotebooksEnabledStateForAccount: () => Promise<void>;
   findItem: (root: NotebookContentItem, item: NotebookContentItem) => NotebookContentItem;
   insertNotebookItem: (parent: NotebookContentItem, item: NotebookContentItem, isGithubTree?: boolean) => void;
@@ -46,7 +43,6 @@ interface NotebookState {
   deleteNotebookItem: (item: NotebookContentItem, isGithubTree?: boolean) => void;
   initializeNotebooksTree: (notebookManager: NotebookManager) => Promise<void>;
   initializeGitHubRepos: (pinnedRepos: IPinnedRepo[]) => void;
-  setConnectionInfo: (connectionInfo: DataModels.ContainerConnectionInfo) => void;
 }
 
 export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
@@ -69,8 +65,6 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
   myNotebooksContentRoot: undefined,
   gitHubNotebooksContentRoot: undefined,
   galleryContentRoot: undefined,
-  connectionInfo: undefined,
-  notebookFolderName: undefined,
   setIsNotebookEnabled: (isNotebookEnabled: boolean) => set({ isNotebookEnabled }),
   setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => set({ isNotebooksEnabledForAccount }),
   setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) =>
@@ -81,7 +75,6 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
   setMemoryUsageInfo: (memoryUsageInfo: DataModels.MemoryUsageInfo) => set({ memoryUsageInfo }),
   setIsShellEnabled: (isShellEnabled: boolean) => set({ isShellEnabled }),
   setNotebookBasePath: (notebookBasePath: string) => set({ notebookBasePath }),
-  setNotebookFolderName: (notebookFolderName: string) => set({ notebookFolderName }),
   refreshNotebooksEnabledStateForAccount: async (): Promise<void> => {
     const { databaseAccount, authType } = userContext;
     if (
@@ -175,10 +168,8 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
     isGithubTree ? set({ gitHubNotebooksContentRoot: root }) : set({ myNotebooksContentRoot: root });
   },
   initializeNotebooksTree: async (notebookManager: NotebookManager): Promise<void> => {
-    const notebookFolderName = userContext.features.phoenix === true ? "Temporary Notebooks" : "My Notebooks";
-    set({ notebookFolderName });
     const myNotebooksContentRoot = {
-      name: get().notebookFolderName,
+      name: "My Notebooks",
       path: get().notebookBasePath,
       type: NotebookContentItemType.Directory,
     };
@@ -194,7 +185,6 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
           type: NotebookContentItemType.Directory,
         }
       : undefined;
-
     set({
       myNotebooksContentRoot,
       galleryContentRoot,
@@ -256,5 +246,4 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
       set({ gitHubNotebooksContentRoot });
     }
   },
-  setConnectionInfo: (connectionInfo: DataModels.ContainerConnectionInfo) => set({ connectionInfo }),
 }));

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -161,7 +161,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   true
                 ).toLocaleLowerCase()}.`}
               >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon iconName="Info" className="panelInfoIcon" />
               </TooltipHost>
             </Stack>
 
@@ -210,7 +210,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   className="panelTextField"
                   aria-label="New database id"
                   autoFocus
-                  tabIndex={0}
                   value={this.state.newDatabaseId}
                   onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                     this.setState({ newDatabaseId: event.target.value })
@@ -237,7 +236,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                         true
                       ).toLocaleLowerCase()} within the database.`}
                     >
-                      <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                      <Icon iconName="Info" className="panelInfoIcon" />
                     </TooltipHost>
                   </Stack>
                 )}
@@ -280,7 +279,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 directionalHint={DirectionalHint.bottomLeftEdge}
                 content={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
               >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon iconName="Info" className="panelInfoIcon" />
               </TooltipHost>
             </Stack>
 
@@ -363,7 +362,7 @@ 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" />
                   </TooltipHost>
                 </Stack>
 
@@ -410,7 +409,7 @@ 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" />
                 </TooltipHost>
               </Stack>
 
@@ -468,7 +467,7 @@ 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" />
               </TooltipHost>
             </Stack>
           )}
@@ -498,7 +497,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       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" />
                 </TooltipHost>
               </Stack>
 
@@ -561,7 +560,7 @@ 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" />
                 </TooltipHost>
               </Stack>
 
@@ -638,7 +637,7 @@ 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" />
                       </TooltipHost>
                     </Stack>
 

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -23,12 +23,10 @@ import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneFor
 
 export interface AddDatabasePaneProps {
   explorer: Explorer;
-  buttonElement?: HTMLElement;
 }
 
 export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
   explorer: container,
-  buttonElement,
 }: AddDatabasePaneProps) => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   let throughput: number;
@@ -79,7 +77,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
     TelemetryProcessor.trace(Action.CreateDatabase, ActionModifiers.Open, addDatabasePaneOpenMessage);
-    buttonElement.focus();
   }, []);
 
   const onSubmit = () => {

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx

@@ -198,7 +198,6 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
             <Stack className="panelGroupSpacing">
               <TextField
                 aria-required="true"
-                required={true}
                 autoComplete="off"
                 styles={getTextFieldStyles()}
                 pattern="[^/?#\\]*[^/?# \\]"
@@ -286,7 +285,6 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
               underlined
               styles={getTextFieldStyles({ fontSize: 12, width: 150 })}
               aria-required="true"
-              required={true}
               ariaLabel="addCollection-tableId"
               autoComplete="off"
               pattern="[^/?#\\]*[^/?# \\]"

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx

@@ -5,7 +5,6 @@ import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils
 import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import { IPinnedRepo, JunoClient } from "../../../Juno/JunoClient";
-import { userContext } from "../../../UserContext";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
@@ -76,8 +75,6 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
           selectedLocation.owner,
           selectedLocation.repo
         )} - ${selectedLocation.branch}`;
-      } else if (selectedLocation.type === "MyNotebooks" && userContext.features.phoenix) {
-        destination = "My Notebooks Scratch";
       }
 
       clearMessage = NotificationConsoleUtils.logConsoleProgress(`Copying ${name} to ${destination}`);

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx

@@ -12,7 +12,6 @@ import {
 import React, { FormEvent, FunctionComponent } from "react";
 import { IPinnedRepo } from "../../../Juno/JunoClient";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
-import { useNotebook } from "../../Notebook/useNotebook";
 import { ResourceTreeAdapter } from "../../Tree/ResourceTreeAdapter";
 
 interface Location {
@@ -47,10 +46,11 @@ export const CopyNotebookPaneComponent: FunctionComponent<CopyNotebookPaneProps>
 
   const getDropDownOptions = (): IDropdownOption[] => {
     const options: IDropdownOption[] = [];
+
     options.push({
       key: "MyNotebooks-Item",
-      text: useNotebook.getState().notebookFolderName,
-      title: useNotebook.getState().notebookFolderName,
+      text: ResourceTreeAdapter.MyNotebooksTitle,
+      title: ResourceTreeAdapter.MyNotebooksTitle,
       data: {
         type: "MyNotebooks",
       } as Location,

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -108,8 +108,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
     submitButtonText: "OK",
     onSubmit,
   };
-  const confirmContainer = `Confirm by typing the ${collectionName.toLowerCase()} id`;
-  const reasonInfo = `Help us improve Azure Cosmos DB! What is the reason why you are deleting this ${collectionName}?`;
   return (
     <RightPaneForm {...props}>
       <div className="panelFormWrapper">
@@ -125,7 +123,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
               onChange={(event, newInput?: string) => {
                 setInputCollectionName(newInput);
               }}
-              ariaLabel={confirmContainer}
             />
           </div>
           {shouldRecordFeedback() && (
@@ -145,7 +142,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
                 onChange={(event, newInput?: string) => {
                   setDeleteCollectionFeedback(newInput);
                 }}
-                ariaLabel={reasonInfo}
               />
             </div>
           )}

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

@@ -40,7 +40,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               </span>
             </Text>
             <StyledTextFieldBase
-              ariaLabel="Confirm by typing the container id"
               autoFocus={true}
               id="confirmCollectionId"
               onChange={[Function]}
@@ -54,7 +53,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               value=""
             >
               <TextFieldBase
-                ariaLabel="Confirm by typing the container id"
                 autoFocus={true}
                 deferredValidationTime={200}
                 id="confirmCollectionId"
@@ -348,7 +346,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                     >
                       <input
                         aria-invalid={false}
-                        aria-label="Confirm by typing the container id"
                         autoFocus={true}
                         className="ms-TextField-field field-57"
                         id="confirmCollectionId"

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -118,8 +118,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
     message:
       "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
   };
-  const confirmDatabase = "Confirm by typing the database id";
-  const reasonInfo = "Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?";
+
   return (
     <RightPaneForm {...props}>
       {!formError && <PanelInfoErrorComponent {...errorProps} />}
@@ -134,7 +133,6 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
             onChange={(event, newInput?: string) => {
               setDatabaseInput(newInput);
             }}
-            ariaLabel={confirmDatabase}
           />
         </div>
         {isLastNonEmptyDatabase() && (
@@ -153,7 +151,6 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
               onChange={(event, newInput?: string) => {
                 setDatabaseFeedbackInput(newInput);
               }}
-              ariaLabel={reasonInfo}
             />
           </div>
         )}

src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx

@@ -153,7 +153,7 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
               selectedKey={paramKeyValue && paramKeyValue.key}
             />
           ))}
-          <Stack horizontal onClick={addNewParamAtLastIndex} tabIndex={0}>
+          <Stack horizontal onClick={addNewParamAtLastIndex}>
             <Image {...imageProps} src={AddPropertyIcon} alt="Add param" />
             <Text className="addNewParamStyle">Add New Param</Text>
           </Stack>

src/Explorer/Panes/ExecuteSprocParamsPane/InputParameter.tsx

@@ -59,36 +59,30 @@ export const InputParameter: FunctionComponent<InputParameterProps> = ({
           onChange={onParamKeyChange}
           options={options}
           styles={dropdownStyles}
-          tabIndex={0}
         />
         <TextField
           label={inputLabel && inputLabel}
           id="confirmCollectionId"
+          autoFocus
           value={paramValue}
           onChange={onParamValueChange}
         />
         {isAddRemoveVisible && (
           <>
-            <div tabIndex={0}>
-              <Image
-                {...imageProps}
-                src={EntityCancelIcon}
-                alt="Delete param"
-                id="deleteparam"
-                role="button"
-                onClick={onDeleteParamKeyPress}
-              />
-            </div>
-            <div tabIndex={0}>
-              <Image
-                {...imageProps}
-                src={AddPropertyIcon}
-                alt="Add param"
-                id="addparam"
-                role="button"
-                onClick={onAddNewParamKeyPress}
-              />
-            </div>
+            <Image
+              {...imageProps}
+              src={EntityCancelIcon}
+              alt="Delete param"
+              id="deleteparam"
+              onClick={onDeleteParamKeyPress}
+            />
+            <Image
+              {...imageProps}
+              src={AddPropertyIcon}
+              alt="Add param"
+              id="addparam"
+              onClick={onAddNewParamKeyPress}
+            />
           </>
         )}
       </Stack>

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

@@ -23,7 +23,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "isTabsContentExpanded": [Function],
             "onRefreshDatabasesKeyPress": [Function],
             "onRefreshResourcesClick": [Function],
-            "phoenixClient": PhoenixClient {},
             "provideFeedbackEmail": [Function],
             "queriesClient": QueriesClient {
               "container": [Circular],

src/Explorer/Panes/PanelComponent.less

@@ -3,13 +3,13 @@
 .panelFormWrapper {
   display: flex;
   flex-direction: column;
-  min-height: 100%;
+  height: 100%;
 
   .panelMainContent {
     flex-grow: 1;
     padding: 0 34px;
     margin: 20px 0;
-    overflow-x: hidden;
+    overflow: auto;
 
     & > :not(.collapsibleSection) {
       margin-bottom: @DefaultSpace;

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -33,13 +33,7 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
     <Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
       {icon}
       <span className="panelWarningErrorDetailsLinkContainer">
-        <Text
-          role="alert"
-          aria-live="assertive"
-          aria-label={message}
-          className="panelWarningErrorMessage"
-          variant="small"
-        >
+        <Text className="panelWarningErrorMessage" variant="small" aria-label="message">
           {message}
           {link && linkText && (
             <Link target="_blank" href={link}>

src/Explorer/Panes/RightPaneForm/RightPaneForm.test.tsx

@@ -34,6 +34,6 @@ describe("Right Pane Form", () => {
   it("should render error in header", () => {
     render(<RightPaneForm {...props} formError="file already Exist" />);
     expect(screen.getByLabelText("error")).toBeDefined();
-    expect(screen.getByRole("alert").innerHTML).toEqual("file already Exist");
+    expect(screen.getByLabelText("message").innerHTML).toEqual("file already Exist");
   });
 });

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -195,6 +195,7 @@ export const SettingsPane: FunctionComponent = () => {
                 step={1}
                 className="textfontclr"
                 role="textbox"
+                tabIndex={0}
                 id="max-degree"
                 value={"" + maxDegreeOfParallelism}
                 onIncrement={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) + 1 || maxDegreeOfParallelism)}

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

@@ -123,6 +123,7 @@ exports[`Settings Pane should render Default properly 1`] = `
           onValidate={[Function]}
           role="textbox"
           step={1}
+          tabIndex={0}
           value="6"
         />
       </div>

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

@@ -13,7 +13,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       "isTabsContentExpanded": [Function],
       "onRefreshDatabasesKeyPress": [Function],
       "onRefreshResourcesClick": [Function],
-      "phoenixClient": PhoenixClient {},
       "provideFeedbackEmail": [Function],
       "queriesClient": QueriesClient {
         "container": [Circular],

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

@@ -4,7 +4,7 @@ import React from "react";
 import TableListViewModal from "../../Tables/DataTable/TableEntityListViewModel";
 import * as Entities from "../../Tables/Entities";
 import { CassandraAPIDataClient, TablesAPIDataClient } from "../../Tables/TableDataClient";
-import QueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab";
+import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import { AddTableEntityPanel } from "./AddTableEntityPanel";
 
 describe("Excute Add Table Entity Pane", () => {
@@ -18,8 +18,6 @@ describe("Excute Add Table Entity Pane", () => {
     queryTablesTab: fakeQueryTablesTab,
     tableEntityListViewModel: fakeTableEntityListViewModel,
     cassandraApiClient: fakeCassandraApiClient,
-    reloadEntities: () => "{}",
-    headerItems: ["email"],
   };
 
   it("should render Default properly", () => {
@@ -29,13 +27,13 @@ describe("Excute Add Table Entity Pane", () => {
 
   it("initially display 4 input field, 2 properties and 2 entity values", () => {
     const wrapper = mount(<AddTableEntityPanel {...props} />);
-    expect(wrapper.find("input[type='text']")).toHaveLength(1);
+    expect(wrapper.find("input[type='text']")).toHaveLength(0);
   });
 
   it("add a new entity row", () => {
     const wrapper = mount(<AddTableEntityPanel {...props} />);
     wrapper.find(".addButtonEntiy").last().simulate("click");
-    expect(wrapper.find("input[type='text']")).toHaveLength(2);
+    expect(wrapper.find("input[type='text']")).toHaveLength(1);
   });
 
   it("remove a entity field", () => {
@@ -43,6 +41,6 @@ describe("Excute Add Table Entity Pane", () => {
     // Since default entity row doesn't have delete option, so added row then delete for test cases.
     wrapper.find(".addButtonEntiy").last().simulate("click");
     wrapper.find("#deleteEntity").last().simulate("click");
-    expect(wrapper.find("input[type='text']")).toHaveLength(1);
+    expect(wrapper.find("input[type='text']")).toHaveLength(0);
   });
 });

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -1,19 +1,20 @@
 import { IDropdownOption, Image, Label, Stack, Text, TextField } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useEffect, useState } from "react";
+import * as _ from "underscore";
 import AddPropertyIcon from "../../../../images/Add-property.svg";
 import RevertBackIcon from "../../../../images/RevertBack.svg";
 import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";
 import { TableEntity } from "../../../Common/TableEntity";
-import { useSidePanel } from "../../../hooks/useSidePanel";
 import { userContext } from "../../../UserContext";
 import * as TableConstants from "../../Tables/Constants";
 import * as DataTableUtilities from "../../Tables/DataTable/DataTableUtilities";
 import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel";
 import * as Entities from "../../Tables/Entities";
 import { CassandraAPIDataClient, CassandraTableKey, TableDataClient } from "../../Tables/TableDataClient";
+import * as TableEntityProcessor from "../../Tables/TableEntityProcessor";
 import * as Utilities from "../../Tables/Utilities";
-import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab";
+import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 import {
   attributeNameLabel,
@@ -35,11 +36,9 @@ import {
 
 interface AddTableEntityPanelProps {
   tableDataClient: TableDataClient;
-  queryTablesTab: NewQueryTablesTab;
+  queryTablesTab: QueryTablesTab;
   tableEntityListViewModel: TableEntityListViewModel;
   cassandraApiClient: CassandraAPIDataClient;
-  reloadEntities: () => void;
-  headerItems: string[];
 }
 
 interface EntityRowType {
@@ -59,10 +58,7 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
   queryTablesTab,
   tableEntityListViewModel,
   cassandraApiClient,
-  reloadEntities,
-  headerItems,
 }: AddTableEntityPanelProps): JSX.Element => {
-  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const [entities, setEntities] = useState<EntityRowType[]>([]);
   const [selectedRow, setSelectedRow] = useState<number>(0);
   const [entityAttributeValue, setEntityAttributeValue] = useState<string>("");
@@ -80,7 +76,7 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
   }, []);
 
   const getDefaultEntitiesAttribute = async (): Promise<void> => {
-    let headers = tableEntityListViewModel.headers?.length > 1 ? tableEntityListViewModel.headers : headerItems;
+    let headers = tableEntityListViewModel.headers;
     if (DataTableUtilities.checkForDefaultHeader(headers)) {
       headers = [];
       if (userContext.apiType === "Tables") {
@@ -120,19 +116,47 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
     const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity);
     try {
       await tableEntityListViewModel.addEntityToCache(newEntity);
-      reloadEntities();
-      setFormError("");
+      if (!tryInsertNewHeaders(tableEntityListViewModel, newEntity)) {
+        tableEntityListViewModel.redrawTableThrottled();
+      }
     } catch (error) {
       const errorMessage = getErrorMessage(error);
       setFormError(errorMessage);
       handleError(errorMessage, "AddTableRow");
       throw error;
     } finally {
-      closeSidePanel();
       setIsExecuting(false);
     }
   };
 
+  const tryInsertNewHeaders = (viewModel: TableEntityListViewModel, newEntity: Entities.ITableEntity): boolean => {
+    let newHeaders: string[] = [];
+    const keys = Object.keys(newEntity);
+    keys &&
+      keys.forEach((key: string) => {
+        if (
+          !_.contains(viewModel.headers, key) &&
+          key !== TableEntityProcessor.keyProperties.attachments &&
+          key !== TableEntityProcessor.keyProperties.etag &&
+          key !== TableEntityProcessor.keyProperties.resourceId &&
+          key !== TableEntityProcessor.keyProperties.self &&
+          (!(userContext.apiType === "Cassandra") || key !== TableConstants.EntityKeyNames.RowKey)
+        ) {
+          newHeaders.push(key);
+        }
+      });
+
+    let newHeadersInserted = false;
+    if (newHeaders.length) {
+      if (!DataTableUtilities.checkForDefaultHeader(viewModel.headers)) {
+        newHeaders = viewModel.headers.concat(newHeaders);
+      }
+      viewModel.updateHeaders(newHeaders, /* notifyColumnChanges */ true, /* enablePrompt */ false);
+      newHeadersInserted = true;
+    }
+    return newHeadersInserted;
+  };
+
   /* Add new entity row */
   const addNewEntity = (): void => {
     const cloneEntities: EntityRowType[] = [...entities];

src/Explorer/Panes/Tables/EditTableEntityPanel.test.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import TableListViewModal from "../../Tables/DataTable/TableEntityListViewModel";
 import * as Entities from "../../Tables/Entities";
 import { CassandraAPIDataClient, TablesAPIDataClient } from "../../Tables/TableDataClient";
-import QueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab";
+import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import { EditTableEntityPanel } from "./EditTableEntityPanel";
 
 describe("Excute Edit Table Entity Pane", () => {
@@ -15,14 +15,11 @@ describe("Excute Edit Table Entity Pane", () => {
   fakeTableEntityListViewModel.headers = [];
   fakeTableEntityListViewModel.selected = ko.observableArray<Entities.ITableEntity>([{}]);
 
-  const fakeSelectedItem = [{ PartitionKey: { _: "test", $: "String" } }];
   const props = {
     tableDataClient: new TablesAPIDataClient(),
     queryTablesTab: fakeQueryTablesTab,
     tableEntityListViewModel: fakeTableEntityListViewModel,
     cassandraApiClient: fakeCassandraApiClient,
-    selectedEntity: fakeSelectedItem,
-    reloadEntities: () => "{}",
   };
 
   it("should render Default properly", () => {
@@ -32,13 +29,13 @@ describe("Excute Edit Table Entity Pane", () => {
 
   it("initially display 4 input field, 2 properties and 1 entity values", () => {
     const wrapper = mount(<EditTableEntityPanel {...props} />);
-    expect(wrapper.find("input[type='text']")).toHaveLength(1);
+    expect(wrapper.find("input[type='text']")).toHaveLength(0);
   });
 
   it("add a new entity row", () => {
     const wrapper = mount(<EditTableEntityPanel {...props} />);
     wrapper.find(".addButtonEntiy").last().simulate("click");
-    expect(wrapper.find("input[type='text']")).toHaveLength(2);
+    expect(wrapper.find("input[type='text']")).toHaveLength(1);
   });
 
   it("remove a entity field", () => {
@@ -46,6 +43,6 @@ describe("Excute Edit Table Entity Pane", () => {
     // Since default entity row doesn't have delete option, so added row then delete for test cases.
     wrapper.find(".addButtonEntiy").last().simulate("click");
     wrapper.find("#deleteEntity").last().simulate("click");
-    expect(wrapper.find("input[type='text']")).toHaveLength(1);
+    expect(wrapper.find("input[type='text']")).toHaveLength(0);
   });
 });

src/Explorer/Panes/Tables/EditTableEntityPanel.tsx

@@ -6,14 +6,14 @@ import AddPropertyIcon from "../../../../images/Add-property.svg";
 import RevertBackIcon from "../../../../images/RevertBack.svg";
 import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";
 import { TableEntity } from "../../../Common/TableEntity";
-import { useSidePanel } from "../../../hooks/useSidePanel";
 import { userContext } from "../../../UserContext";
 import * as TableConstants from "../../Tables/Constants";
+import * as DataTableUtilities from "../../Tables/DataTable/DataTableUtilities";
 import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel";
 import * as Entities from "../../Tables/Entities";
 import { CassandraAPIDataClient, TableDataClient } from "../../Tables/TableDataClient";
 import * as TableEntityProcessor from "../../Tables/TableEntityProcessor";
-import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab";
+import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 import {
   attributeNameLabel,
@@ -34,11 +34,9 @@ import {
 
 interface EditTableEntityPanelProps {
   tableDataClient: TableDataClient;
-  queryTablesTab: NewQueryTablesTab;
+  queryTablesTab: QueryTablesTab;
   tableEntityListViewModel: TableEntityListViewModel;
   cassandraApiClient: CassandraAPIDataClient;
-  selectedEntity: Entities.ITableEntity[];
-  reloadEntities: () => void;
 }
 
 interface EntityRowType {
@@ -59,10 +57,7 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
   queryTablesTab,
   tableEntityListViewModel,
   cassandraApiClient,
-  selectedEntity,
-  reloadEntities,
 }: EditTableEntityPanelProps): JSX.Element => {
-  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const [entities, setEntities] = useState<EntityRowType[]>([]);
   const [selectedRow, setSelectedRow] = useState<number>(0);
   const [entityAttributeValue, setEntityAttributeValue] = useState<string>("");
@@ -80,8 +75,8 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let originalDocument: { [key: string]: any } = {};
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const entityAttribute: any = selectedEntity;
-    const entityFormattedAttribute = constructDisplayedAttributes(entityAttribute && entityAttribute[0]);
+    const entityAttribute: any = tableEntityListViewModel.selected();
+    const entityFormattedAttribute = constructDisplayedAttributes(entityAttribute[0]);
     setEntities(entityFormattedAttribute);
 
     if (userContext.apiType === "Tables") {
@@ -91,7 +86,6 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
       originalDocument = entityAttribute;
     }
     setOriginalDocument(originalDocument);
-    //eslint-disable-next-line
   }, []);
 
   const constructDisplayedAttributes = (entity: Entities.ITableEntity): EntityRowType[] => {
@@ -222,8 +216,9 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
         entity
       );
       await tableEntityListViewModel.updateCachedEntity(newEntity);
-      reloadEntities();
-      closeSidePanel();
+      if (!tryInsertNewHeaders(tableEntityListViewModel, newEntity)) {
+        tableEntityListViewModel.redrawTableThrottled();
+      }
       tableEntityListViewModel.selected.removeAll();
       tableEntityListViewModel.selected.push(newEntity);
     } catch (error) {
@@ -235,6 +230,34 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
     }
   };
 
+  const tryInsertNewHeaders = (viewModel: TableEntityListViewModel, newEntity: Entities.ITableEntity): boolean => {
+    let newHeaders: string[] = [];
+    const keys = Object.keys(newEntity);
+    keys &&
+      keys.forEach((key: string) => {
+        if (
+          !_.contains(viewModel.headers, key) &&
+          key !== TableEntityProcessor.keyProperties.attachments &&
+          key !== TableEntityProcessor.keyProperties.etag &&
+          key !== TableEntityProcessor.keyProperties.resourceId &&
+          key !== TableEntityProcessor.keyProperties.self &&
+          (!(userContext.apiType === "Cassandra") || key !== TableConstants.EntityKeyNames.RowKey)
+        ) {
+          newHeaders.push(key);
+        }
+      });
+
+    let newHeadersInserted = false;
+    if (newHeaders.length) {
+      if (!DataTableUtilities.checkForDefaultHeader(viewModel.headers)) {
+        newHeaders = viewModel.headers.concat(newHeaders);
+      }
+      viewModel.updateHeaders(newHeaders, /* notifyColumnChanges */ true, /* enablePrompt */ false);
+      newHeadersInserted = true;
+    }
+    return newHeadersInserted;
+  };
+
   // Add new entity row
   const addNewEntity = (): void => {
     const cloneEntities = [...entities];

src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.test.tsx

@@ -1,16 +1,18 @@
 import { mount } from "enzyme";
 import * as ko from "knockout";
 import React from "react";
+import Explorer from "../../../Explorer";
 import QueryViewModel from "../../../Tables/QueryBuilder/QueryViewModel";
 import { TableQuerySelectPanel } from "./TableQuerySelectPanel";
 
 describe("Table query select Panel", () => {
+  const fakeExplorer = {} as Explorer;
   const fakeQueryViewModal = {} as QueryViewModel;
   fakeQueryViewModal.columnOptions = ko.observableArray<string>([""]);
 
   const props = {
-    headers: [""],
-    getSelectMessage: () => "{}",
+    explorer: fakeExplorer,
+    closePanel: (): void => undefined,
     queryViewModel: fakeQueryViewModal,
   };
 
@@ -27,7 +29,6 @@ describe("Table query select Panel", () => {
   it("Should checked availableCheckbox by default", () => {
     const wrapper = mount(<TableQuerySelectPanel {...props} />);
     expect(wrapper.find("#availableCheckbox").first().props()).toEqual({
-      ariaPositionInSet: 0,
       id: "availableCheckbox",
       label: "Available Columns",
       checked: true,

src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.tsx

@@ -8,8 +8,6 @@ import { RightPaneForm, RightPaneFormProps } from "../../RightPaneForm/RightPane
 
 interface TableQuerySelectPanelProps {
   queryViewModel: QueryViewModel;
-  headers: string[];
-  getSelectMessage: (selectMessage: string) => void;
 }
 
 interface ISelectColumn {
@@ -20,8 +18,6 @@ interface ISelectColumn {
 
 export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps> = ({
   queryViewModel,
-  headers,
-  getSelectMessage,
 }: TableQuerySelectPanelProps): JSX.Element => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
 
@@ -33,7 +29,6 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
   const onSubmit = (): void => {
     queryViewModel.selectText(getParameters());
     queryViewModel.getSelectMessage();
-    getSelectMessage(queryViewModel.selectMessage());
     closeSidePanel();
   };
 
@@ -57,8 +52,7 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
   };
 
   useEffect(() => {
-    // queryViewModel && setTableColumns(queryViewModel.columnOptions());
-    headers && setTableColumns(headers);
+    queryViewModel && setTableColumns(queryViewModel.columnOptions());
   }, []);
 
   const setTableColumns = (columnNames: string[]): void => {
@@ -134,9 +128,8 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
               label="Available Columns"
               checked={isAvailableColumnChecked}
               onChange={availableColumnsCheckboxClick}
-              ariaPositionInSet={0}
             />
-            {columnOptions.map((column, index) => {
+            {columnOptions.map((column) => {
               return (
                 <Checkbox
                   label={column.columnName}
@@ -144,7 +137,6 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
                   key={column.columnName}
                   checked={column.selected}
                   disabled={!column.editable}
-                  ariaPositionInSet={index + 1}
                 />
               );
             })}

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

@@ -2,12 +2,8 @@
 
 exports[`Table query select Panel should render Default properly 1`] = `
 <TableQuerySelectPanel
-  getSelectMessage={[Function]}
-  headers={
-    Array [
-      "",
-    ]
-  }
+  closePanel={[Function]}
+  explorer={Object {}}
   queryViewModel={
     Object {
       "columnOptions": [Function],
@@ -41,14 +37,12 @@ exports[`Table query select Panel should render Default properly 1`] = `
             className="column-select-view"
           >
             <StyledCheckboxBase
-              ariaPositionInSet={0}
               checked={true}
               id="availableCheckbox"
               label="Available Columns"
               onChange={[Function]}
             >
               <CheckboxBase
-                ariaPositionInSet={0}
                 checked={true}
                 id="availableCheckbox"
                 label="Available Columns"
@@ -334,7 +328,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
                   <input
                     aria-checked="true"
                     aria-label="Available Columns"
-                    aria-posinset={0}
                     checked={true}
                     className="input-55"
                     data-ktp-execute-target={true}
@@ -653,7 +646,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
               </CheckboxBase>
             </StyledCheckboxBase>
             <StyledCheckboxBase
-              ariaPositionInSet={1}
               checked={true}
               disabled={false}
               key=""
@@ -661,7 +653,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
               onChange={[Function]}
             >
               <CheckboxBase
-                ariaPositionInSet={1}
                 checked={true}
                 disabled={false}
                 label=""
@@ -948,7 +939,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
                     aria-checked="true"
                     aria-disabled={false}
                     aria-label=""
-                    aria-posinset={1}
                     checked={true}
                     className="input-55"
                     data-ktp-execute-target={true}

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

@@ -327,17 +327,13 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
               key=".0:$.1"
             >
               <Text
-                aria-label="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources."
-                aria-live="assertive"
+                aria-label="message"
                 className="panelWarningErrorMessage"
-                role="alert"
                 variant="small"
               >
                 <span
-                  aria-label="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources."
-                  aria-live="assertive"
+                  aria-label="message"
                   className="panelWarningErrorMessage css-56"
-                  role="alert"
                 >
                   Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
                 </span>
@@ -367,7 +363,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             </span>
           </Text>
           <StyledTextFieldBase
-            ariaLabel="Confirm by typing the database id"
             autoFocus={true}
             id="confirmDatabaseId"
             onChange={[Function]}
@@ -380,7 +375,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             }
           >
             <TextFieldBase
-              ariaLabel="Confirm by typing the database id"
               autoFocus={true}
               deferredValidationTime={200}
               id="confirmDatabaseId"
@@ -673,7 +667,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                   >
                     <input
                       aria-invalid={false}
-                      aria-label="Confirm by typing the database id"
                       autoFocus={true}
                       className="ms-TextField-field field-60"
                       id="confirmDatabaseId"
@@ -714,7 +707,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             </span>
           </Text>
           <StyledTextFieldBase
-            ariaLabel="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
             id="deleteDatabaseFeedbackInput"
             multiline={true}
             onChange={[Function]}
@@ -728,7 +720,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             }
           >
             <TextFieldBase
-              ariaLabel="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
               deferredValidationTime={200}
               id="deleteDatabaseFeedbackInput"
               multiline={true}
@@ -1022,7 +1013,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                   >
                     <textarea
                       aria-invalid={false}
-                      aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
                       className="ms-TextField-field field-71"
                       id="deleteDatabaseFeedbackInput"
                       onBlur={[Function]}

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -307,23 +307,16 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         iconSrc: AddDatabaseIcon,
         title: "New " + getDatabaseName(),
         description: undefined,
-        onClick: () => this.openAddDatabasePanel(),
+        onClick: () =>
+          useSidePanel
+            .getState()
+            .openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={this.container} />),
       });
     }
 
     return items;
   }
 
-  private openAddDatabasePanel() {
-    const newDatabaseButton = document.activeElement as HTMLElement;
-    useSidePanel
-      .getState()
-      .openSidePanel(
-        "New " + getDatabaseName(),
-        <AddDatabasePanel explorer={this.container} buttonElement={newDatabaseButton} />
-      );
-  }
-
   private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
     return {
       iconSrc: NotebookIcon,

src/Explorer/Tables/DataTable/DataTableBindingManager.ts

@@ -0,0 +1,393 @@
+import * as ko from "knockout";
+import * as _ from "underscore";
+
+import * as Constants from "../Constants";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import * as DataTableBuilder from "./DataTableBuilder";
+import DataTableOperationManager from "./DataTableOperationManager";
+import * as DataTableOperations from "./DataTableOperations";
+import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import TableEntityListViewModel from "./TableEntityListViewModel";
+import * as Utilities from "../Utilities";
+import * as Entities from "../Entities";
+
+/**
+ * Custom binding manager of datatable
+ */
+var tableEntityListViewModelMap: {
+  [key: string]: {
+    tableViewModel: TableEntityListViewModel;
+    operationManager: DataTableOperationManager;
+    $dataTable: JQuery;
+  };
+} = {};
+
+function bindDataTable(element: any, valueAccessor: any, allBindings: any, viewModel: any, bindingContext: any) {
+  var tableEntityListViewModel = bindingContext.$data;
+  tableEntityListViewModel.notifyColumnChanges = onTableColumnChange;
+  var $dataTable = $(element);
+  var queryTablesTab = bindingContext.$parent;
+  var operationManager = new DataTableOperationManager(
+    $dataTable,
+    tableEntityListViewModel,
+    queryTablesTab.tableCommands
+  );
+
+  tableEntityListViewModelMap[queryTablesTab.tabId] = {
+    tableViewModel: tableEntityListViewModel,
+    operationManager: operationManager,
+    $dataTable: $dataTable,
+  };
+
+  createDataTable(0, tableEntityListViewModel, queryTablesTab); // Fake a DataTable to start.
+  $(window).resize(updateTableScrollableRegionMetrics);
+  operationManager.focusTable(); // Also selects the first row if needed.
+}
+
+function onTableColumnChange(enablePrompt: boolean = true, queryTablesTab: QueryTablesTab) {
+  var columnsFilter: boolean[] = null;
+  var tableEntityListViewModel = tableEntityListViewModelMap[queryTablesTab.tabId].tableViewModel;
+  if (queryTablesTab.queryViewModel()) {
+    queryTablesTab.queryViewModel().queryBuilderViewModel().updateColumnOptions();
+  }
+  createDataTable(
+    tableEntityListViewModel.tablePageStartIndex,
+    tableEntityListViewModel,
+    queryTablesTab,
+    true,
+    columnsFilter
+  );
+}
+
+function createDataTable(
+  startIndex: number,
+  tableEntityListViewModel: TableEntityListViewModel,
+  queryTablesTab: QueryTablesTab,
+  destroy: boolean = false,
+  columnsFilter: boolean[] = null
+): void {
+  var $dataTable = tableEntityListViewModelMap[queryTablesTab.tabId].$dataTable;
+  if (destroy) {
+    // Find currently displayed columns.
+    var currentColumns: string[] = tableEntityListViewModel.headers;
+
+    // Calculate how many more columns need to added to the current table.
+    var columnsToAdd: number = _.difference(tableEntityListViewModel.headers, currentColumns).length;
+
+    // This is needed as current solution of adding column is more like a workaround
+    // The official support for dynamically add column is not yet there
+    // Please track github issue https://github.com/DataTables/DataTables/issues/273 for its offical support
+    for (var i = 0; i < columnsToAdd; i++) {
+      $(".dataTables_scrollHead table thead tr th").eq(0).after("<th></th>");
+    }
+    tableEntityListViewModel.table.destroy();
+    $dataTable.empty();
+  }
+
+  var jsonColTable = [];
+
+  for (var i = 0; i < tableEntityListViewModel.headers.length; i++) {
+    jsonColTable.push({
+      sTitle: tableEntityListViewModel.headers[i],
+      data: tableEntityListViewModel.headers[i],
+      aTargets: [i],
+      mRender: bindColumn,
+      visible: !!columnsFilter ? columnsFilter[i] : true,
+    });
+  }
+
+  tableEntityListViewModel.table = DataTableBuilder.createDataTable($dataTable, <DataTables.Settings>{
+    // WARNING!!! SECURITY: If you add new columns, make sure you encode them if they are user strings from Azure (see encodeText)
+    // so that they don't get interpreted as HTML in our page.
+    colReorder: true,
+    aoColumnDefs: jsonColTable,
+    stateSave: false,
+    dom: "RZlfrtip",
+    oColReorder: {
+      iFixedColumns: 1,
+    },
+    displayStart: startIndex,
+    bPaginate: true,
+    pagingType: "full_numbers",
+    bProcessing: true,
+    oLanguage: {
+      sInfo: "Results _START_ - _END_ of _TOTAL_",
+      oPaginate: {
+        sFirst: "<<",
+        sNext: ">",
+        sPrevious: "<",
+        sLast: ">>",
+      },
+      sProcessing: '<img style="width: 28px; height: 6px; " src="images/LoadingIndicator_3Squares.gif">',
+      oAria: {
+        sSortAscending: "",
+        sSortDescending: "",
+      },
+    },
+    destroy: destroy,
+    bInfo: true,
+    bLength: false,
+    bLengthChange: false,
+    scrollX: true,
+    scrollCollapse: true,
+    iDisplayLength: 100,
+    serverSide: true,
+    ajax: queryTablesTab.tabId, // Using this settings to make sure for getServerData we update the table based on the appropriate tab
+    fnServerData: getServerData,
+    fnRowCallback: bindClientId,
+    fnInitComplete: initializeTable,
+    fnDrawCallback: updateSelectionStatus,
+  });
+
+  (tableEntityListViewModel.table.table(0).container() as Element)
+    .querySelectorAll(Constants.htmlSelectors.dataTableHeaderTableSelector)
+    .forEach((table) => {
+      table.setAttribute(
+        "summary",
+        `Header for sorting results for container ${tableEntityListViewModel.queryTablesTab.collection.id()}`
+      );
+    });
+
+  (tableEntityListViewModel.table.table(0).container() as Element)
+    .querySelectorAll(Constants.htmlSelectors.dataTableBodyTableSelector)
+    .forEach((table) => {
+      table.setAttribute("summary", `Results for container ${tableEntityListViewModel.queryTablesTab.collection.id()}`);
+    });
+}
+
+function bindColumn(data: any, type: string, full: any) {
+  var displayedValue: any = null;
+  if (data) {
+    displayedValue = data._;
+
+    // SECURITY: Make sure we don't allow cross-site scripting by interpreting the values as HTML
+    displayedValue = Utilities.htmlEncode(displayedValue);
+
+    // Css' empty psuedo class can only tell the difference of whether a cell has values.
+    // A cell has no values no matter it's empty or it has no such a property.
+    // To distinguish between an empty cell and a non-existing property cell,
+    // we add a whitespace to the empty cell so that css will treat it as a cell with values.
+    if (displayedValue === "" && data.$ === Constants.TableType.String) {
+      displayedValue = " ";
+    }
+  }
+  return displayedValue;
+}
+
+function getServerData(sSource: any, aoData: any, fnCallback: any, oSettings: any) {
+  tableEntityListViewModelMap[oSettings.ajax].tableViewModel.renderNextPageAndupdateCache(
+    sSource,
+    aoData,
+    fnCallback,
+    oSettings
+  );
+}
+
+/**
+ * Bind table data information to row element so that we can track back to the table data
+ * from UI elements.
+ */
+function bindClientId(nRow: Node, aData: Entities.ITableEntity) {
+  $(nRow).attr(Constants.htmlAttributeNames.dataTableRowKeyAttr, aData.RowKey._);
+  return nRow;
+}
+
+function selectionChanged(element: any, valueAccessor: any, allBindings: any, viewModel: any, bindingContext: any) {
+  $(".dataTable tr.selected").attr("tabindex", "-1").removeClass("selected");
+
+  const selected =
+    bindingContext && bindingContext.$data && bindingContext.$data.selected && bindingContext.$data.selected();
+  selected &&
+    selected.forEach((b: Entities.ITableEntity) => {
+      var sel = DataTableOperations.getRowSelector([
+        {
+          key: Constants.htmlAttributeNames.dataTableRowKeyAttr,
+          value: b.RowKey && b.RowKey._ && b.RowKey._.toString(),
+        },
+      ]);
+
+      $(sel).attr("tabindex", "0").focus().addClass("selected");
+    });
+  //selected = bindingContext.$data.selected();
+}
+
+function dataChanged(element: any, valueAccessor: any, allBindings: any, viewModel: any, bindingContext: any) {
+  // do nothing for now
+}
+
+function initializeTable(): void {
+  updateTableScrollableRegionMetrics();
+  initializeEventHandlers();
+}
+
+function updateTableScrollableRegionMetrics(): void {
+  updateTableScrollableRegionHeight();
+  updateTableScrollableRegionWidth();
+}
+
+/*
+ * Update the table's scrollable region height. So the pagination control is always shown at the bottom of the page.
+ */
+function updateTableScrollableRegionHeight(): void {
+  $(".tab-pane").each(function (index, tabElement) {
+    if (!$(tabElement).hasClass("tableContainer")) {
+      return;
+    }
+
+    // Add some padding to the table so it doesn't get too close to the container border.
+    var dataTablePaddingBottom = 10;
+    var bodyHeight = $(window).height();
+    var dataTablesScrollBodyPosY = $(tabElement).find(Constants.htmlSelectors.dataTableScrollBodySelector).offset().top;
+    var dataTablesInfoElem = $(tabElement).find(".dataTables_info");
+    var dataTablesPaginateElem = $(tabElement).find(".dataTables_paginate");
+    const notificationConsoleHeight = 32; /** Header height **/
+
+    var scrollHeight =
+      bodyHeight -
+      dataTablesScrollBodyPosY -
+      dataTablesPaginateElem.outerHeight(true) -
+      dataTablePaddingBottom -
+      notificationConsoleHeight;
+
+    //info and paginate control are stacked
+    if (dataTablesInfoElem.offset().top < dataTablesPaginateElem.offset().top) {
+      scrollHeight -= dataTablesInfoElem.outerHeight(true);
+    }
+
+    // TODO This is a work around for setting the outerheight since we don't have access to the JQuery.outerheight(numberValue)
+    // in the current version of JQuery we are using.  Ideally, we would upgrade JQuery and use this line instead:
+    // $(Constants.htmlSelectors.dataTableScrollBodySelector).outerHeight(scrollHeight);
+    var element = $(tabElement).find(Constants.htmlSelectors.dataTableScrollBodySelector)[0];
+    var style = getComputedStyle(element);
+    var actualHeight = parseInt(style.height);
+    var change = element.offsetHeight - scrollHeight;
+    $(tabElement)
+      .find(Constants.htmlSelectors.dataTableScrollBodySelector)
+      .height(actualHeight - change);
+  });
+}
+
+/*
+ * Update the table's scrollable region width to make efficient use of the remaining space.
+ */
+function updateTableScrollableRegionWidth(): void {
+  $(".tab-pane").each(function (index, tabElement) {
+    if (!$(tabElement).hasClass("tableContainer")) {
+      return;
+    }
+
+    var bodyWidth = $(window).width();
+    var dataTablesScrollBodyPosLeft = $(tabElement).find(Constants.htmlSelectors.dataTableScrollBodySelector).offset()
+      .left;
+    var scrollWidth = bodyWidth - dataTablesScrollBodyPosLeft;
+
+    // jquery datatables automatically sets width:100% to both the header and the body when we use it's column autoWidth feature.
+    // We work around that by setting the height for it's container instead.
+    $(tabElement).find(Constants.htmlSelectors.dataTableScrollContainerSelector).width(scrollWidth);
+  });
+}
+
+function initializeEventHandlers(): void {
+  var $headers: JQuery = $(Constants.htmlSelectors.dataTableHeaderTypeSelector);
+  var $firstHeader: JQuery = $headers.first();
+  var firstIndex: string = $firstHeader.attr(Constants.htmlAttributeNames.dataTableHeaderIndex);
+
+  $headers
+    .on("keydown", (event: JQueryEventObject) => {
+      Utilities.onEnter(event, ($sourceElement: JQuery) => {
+        $sourceElement.css("background-color", Constants.cssColors.commonControlsButtonActive);
+      });
+
+      // Bind shift+tab from first header back to search input field
+      Utilities.onTab(
+        event,
+        ($sourceElement: JQuery) => {
+          var sourceIndex: string = $sourceElement.attr(Constants.htmlAttributeNames.dataTableHeaderIndex);
+
+          if (sourceIndex === firstIndex) {
+            event.preventDefault();
+          }
+        },
+        /* metaKey */ null,
+        /* shiftKey */ true,
+        /* altKey */ null
+      );
+
+      // Also reset color if [shift-] tabbing away from button while holding down 'enter'
+      Utilities.onTab(event, ($sourceElement: JQuery) => {
+        $sourceElement.css("background-color", "");
+      });
+    })
+    .on("keyup", (event: JQueryEventObject) => {
+      Utilities.onEnter(event, ($sourceElement: JQuery) => {
+        $sourceElement.css("background-color", "");
+      });
+    });
+}
+
+function updateSelectionStatus(oSettings: any): void {
+  var $dataTableRows: JQuery = $(Constants.htmlSelectors.dataTableAllRowsSelector);
+  if ($dataTableRows) {
+    for (var i = 0; i < $dataTableRows.length; i++) {
+      var $row: JQuery = $dataTableRows.eq(i);
+      var rowKey: string = $row.attr(Constants.htmlAttributeNames.dataTableRowKeyAttr);
+      var table = tableEntityListViewModelMap[oSettings.ajax].tableViewModel;
+      if (table.isItemSelected(table.getTableEntityKeys(rowKey))) {
+        $row.attr("tabindex", "0");
+      }
+    }
+  }
+
+  updateDataTableFocus(oSettings.ajax);
+
+  DataTableOperations.setPaginationButtonEventHandlers();
+}
+
+// TODO consider centralizing this "post-command" logic into some sort of Command Manager entity.
+// See VSO:166520: "[Storage Explorer] Consider adding a 'command manager' to track command post-effects."
+function updateDataTableFocus(queryTablesTabId: string): void {
+  var $activeElement: JQuery = $(document.activeElement);
+  var isFocusLost: boolean = $activeElement.is("body"); // When focus is lost, "body" becomes the active element.
+  var storageExplorerFrameHasFocus: boolean = document.hasFocus();
+  var operationManager = tableEntityListViewModelMap[queryTablesTabId].operationManager;
+  if (operationManager) {
+    if (isFocusLost && storageExplorerFrameHasFocus) {
+      // We get here when no control is active, meaning that the table update was triggered
+      // from a dialog, the context menu or by clicking on a toolbar control or header.
+      // Note that giving focus to the table also selects the first row if needed.
+      // The document.hasFocus() ensures that the table will only get focus when the
+      // focus was lost (i.e. "body has the focus") within the Storage Explorer frame
+      // i.e. not when the focus is lost because it is in another frame
+      // e.g. a daytona dialog or in the Activity Log.
+      operationManager.focusTable();
+    }
+    if ($activeElement.is(".sorting_asc") || $activeElement.is(".sorting_desc")) {
+      // If table header is selected, focus is shifted to the selected element as part of accessibility
+      $activeElement && $activeElement.focus();
+    } else {
+      // If some control is active, we don't give focus back to the table,
+      // just select the first row if needed (empty selection).
+      operationManager.selectFirstIfNeeded();
+    }
+  }
+}
+
+(<any>ko.bindingHandlers).tableSource = {
+  init: bindDataTable,
+  update: dataChanged,
+};
+
+(<any>ko.bindingHandlers).tableSelection = {
+  update: selectionChanged,
+};
+
+(<any>ko.bindingHandlers).readOnly = {
+  update: function (element: any, valueAccessor: any) {
+    var value = ko.utils.unwrapObservable(valueAccessor());
+    if (value) {
+      element.setAttribute("readOnly", true);
+    } else {
+      element.removeAttribute("readOnly");
+    }
+  },
+};

src/Explorer/Tables/DataTable/DataTableBuilder.ts

@@ -0,0 +1,52 @@
+import * as Utilities from "../Utilities";
+
+/**
+ * Wrapper function for creating data tables. Call this method, not the
+ * data tables constructor when you want to create a data table. This
+ * function makes sure that content without a render function is properly
+ * encoded to prevent XSS.
+ * @param{$dataTableElem} JQuery data table element
+ * @param{$settings} Settings to use when creating the data table
+ */
+export function createDataTable($dataTableElem: JQuery, settings: any): DataTables.DataTable {
+  return $dataTableElem.DataTable(applyDefaultRendering(settings));
+}
+
+/**
+ * Go through the settings for a data table and apply a simple HTML encode to any column
+ * without a render function to prevent XSS.
+ * @param{settings} The settings to check
+ * @return The given settings with all columns having a rendering function
+ */
+function applyDefaultRendering(settings: any): DataTables.SettingsLegacy {
+  var tableColumns: DataTables.ColumnLegacy[] = null;
+
+  if (settings.aoColumns) {
+    tableColumns = settings.aoColumns;
+  } else if (settings.aoColumnDefs) {
+    // for tables we use aoColumnDefs instead of aoColumns
+    tableColumns = settings.aoColumnDefs;
+  }
+
+  // either the settings had no columns defined, or they were called
+  // by a property name which we have not used before
+  if (!tableColumns) {
+    return settings;
+  }
+
+  for (var i = 0; i < tableColumns.length; i++) {
+    // the column does not have a render function
+    if (!tableColumns[i].mRender) {
+      tableColumns[i].mRender = defaultDataRender;
+    }
+  }
+  return settings;
+}
+
+/**
+ * Default data render function, whatever is done to data in here
+ * will be done to any data which we do not specify a render for.
+ */
+function defaultDataRender(data: any, type: string, full: any) {
+  return Utilities.htmlEncode(data);
+}

src/Explorer/Tables/DataTable/DataTableOperationManager.ts

@@ -0,0 +1,300 @@
+import ko from "knockout";
+
+import * as DataTableOperations from "./DataTableOperations";
+import * as Constants from "../Constants";
+import TableCommands from "./TableCommands";
+import TableEntityListViewModel from "./TableEntityListViewModel";
+import * as Utilities from "../Utilities";
+import * as Entities from "../Entities";
+
+/*
+ * Base class for data table row selection.
+ */
+export default class DataTableOperationManager {
+  private _tableEntityListViewModel: TableEntityListViewModel;
+  private _tableCommands: TableCommands;
+  private dataTable: JQuery;
+
+  constructor(table: JQuery, viewModel: TableEntityListViewModel, tableCommands: TableCommands) {
+    this.dataTable = table;
+    this._tableEntityListViewModel = viewModel;
+    this._tableCommands = tableCommands;
+
+    this.bind();
+    this._tableEntityListViewModel.bind(this);
+  }
+
+  private click = (event: JQueryEventObject) => {
+    var elem: JQuery = $(event.currentTarget);
+    this.updateLastSelectedItem(elem, event.shiftKey);
+
+    if (Utilities.isEnvironmentCtrlPressed(event)) {
+      this.applyCtrlSelection(elem);
+    } else if (event.shiftKey) {
+      this.applyShiftSelection(elem);
+    } else {
+      this.applySingleSelection(elem);
+    }
+  };
+
+  private doubleClick = (event: JQueryEventObject) => {
+    this.tryOpenEditor();
+  };
+
+  private keyDown = (event: JQueryEventObject): boolean => {
+    var isUpArrowKey: boolean = event.keyCode === Constants.keyCodes.UpArrow,
+      isDownArrowKey: boolean = event.keyCode === Constants.keyCodes.DownArrow,
+      handled: boolean = false;
+
+    if (isUpArrowKey || isDownArrowKey) {
+      var lastSelectedItem: Entities.ITableEntity = this._tableEntityListViewModel.lastSelectedItem;
+      var dataTableRows: JQuery = $(Constants.htmlSelectors.dataTableAllRowsSelector);
+      var maximumIndex = dataTableRows.length - 1;
+
+      // If can't find an index for lastSelectedItem, then either no item is previously selected or it goes across page.
+      // Simply select the first item in this case.
+      var lastSelectedItemIndex = lastSelectedItem
+        ? this._tableEntityListViewModel.getItemIndexFromCurrentPage(
+            this._tableEntityListViewModel.getTableEntityKeys(lastSelectedItem.RowKey._)
+          )
+        : -1;
+      var nextIndex: number = isUpArrowKey ? lastSelectedItemIndex - 1 : lastSelectedItemIndex + 1;
+      var safeIndex: number = Utilities.ensureBetweenBounds(nextIndex, 0, maximumIndex);
+      var selectedRowElement: JQuery = dataTableRows.eq(safeIndex);
+
+      if (selectedRowElement) {
+        if (event.shiftKey) {
+          this.applyShiftSelection(selectedRowElement);
+        } else {
+          this.applySingleSelection(selectedRowElement);
+        }
+
+        this.updateLastSelectedItem(selectedRowElement, event.shiftKey);
+        handled = true;
+        DataTableOperations.scrollToRowIfNeeded(dataTableRows, safeIndex, isUpArrowKey);
+      }
+    } else if (
+      Utilities.isEnvironmentCtrlPressed(event) &&
+      !Utilities.isEnvironmentShiftPressed(event) &&
+      !Utilities.isEnvironmentAltPressed(event) &&
+      event.keyCode === Constants.keyCodes.A
+    ) {
+      this.applySelectAll();
+      handled = true;
+    }
+
+    return !handled;
+  };
+
+  // Note: There is one key up event each time a key is pressed;
+  // in contrast, there may be more than one key down and key
+  // pressed events.
+  private keyUp = (event: JQueryEventObject): boolean => {
+    var handled: boolean = false;
+
+    switch (event.keyCode) {
+      case Constants.keyCodes.Enter:
+        handled = this.tryOpenEditor();
+        break;
+      case Constants.keyCodes.Delete:
+        handled = this.tryHandleDeleteSelected();
+        break;
+    }
+
+    return !handled;
+  };
+
+  private itemDropped = (event: JQueryEventObject): boolean => {
+    var handled: boolean = false;
+    var items = (<any>event.originalEvent).dataTransfer.items;
+
+    if (!items) {
+      // On browsers outside of Chromium
+      // we can't discern between dirs and files
+      // so we will disable drag & drop for now
+      return null;
+    }
+
+    for (var i = 0; i < items.length; i++) {
+      var item = items[i];
+      var entry = item.webkitGetAsEntry();
+
+      if (entry.isFile) {
+        // TODO: parse the file and insert content as entities
+      }
+    }
+
+    return !handled;
+  };
+
+  private tryOpenEditor(): boolean {
+    return this._tableCommands.tryOpenEntityEditor(this._tableEntityListViewModel);
+  }
+
+  private tryHandleDeleteSelected(): boolean {
+    var selectedEntities: Entities.ITableEntity[] = this._tableEntityListViewModel.selected();
+    var handled: boolean = false;
+
+    if (selectedEntities && selectedEntities.length) {
+      this._tableCommands.deleteEntitiesCommand(this._tableEntityListViewModel);
+      handled = true;
+    }
+
+    return handled;
+  }
+
+  private getEntityIdentity($elem: JQuery): Entities.ITableEntityIdentity {
+    return {
+      RowKey: $elem.attr(Constants.htmlAttributeNames.dataTableRowKeyAttr),
+    };
+  }
+
+  private updateLastSelectedItem($elem: JQuery, isShiftSelect: boolean) {
+    var entityIdentity: Entities.ITableEntityIdentity = this.getEntityIdentity($elem);
+    var entity = this._tableEntityListViewModel.getItemFromCurrentPage(
+      this._tableEntityListViewModel.getTableEntityKeys(entityIdentity.RowKey)
+    );
+
+    this._tableEntityListViewModel.lastSelectedItem = entity;
+
+    if (!isShiftSelect) {
+      this._tableEntityListViewModel.lastSelectedAnchorItem = entity;
+    }
+  }
+
+  private applySingleSelection($elem: JQuery) {
+    if ($elem) {
+      var entityIdentity: Entities.ITableEntityIdentity = this.getEntityIdentity($elem);
+
+      this._tableEntityListViewModel.clearSelection();
+      this.addToSelection(entityIdentity.RowKey);
+    }
+  }
+
+  private applySelectAll() {
+    this._tableEntityListViewModel.clearSelection();
+    ko.utils.arrayPushAll<Entities.ITableEntity>(
+      this._tableEntityListViewModel.selected,
+      this._tableEntityListViewModel.getAllItemsInCurrentPage()
+    );
+  }
+
+  private applyCtrlSelection($elem: JQuery): void {
+    var koSelected: ko.ObservableArray<Entities.ITableEntity> = this._tableEntityListViewModel
+      ? this._tableEntityListViewModel.selected
+      : null;
+
+    if (koSelected) {
+      var entityIdentity: Entities.ITableEntityIdentity = this.getEntityIdentity($elem);
+
+      if (
+        !this._tableEntityListViewModel.isItemSelected(
+          this._tableEntityListViewModel.getTableEntityKeys(entityIdentity.RowKey)
+        )
+      ) {
+        // Adding item not previously in selection
+        this.addToSelection(entityIdentity.RowKey);
+      } else {
+        koSelected.remove((item: Entities.ITableEntity) => item.RowKey._ === entityIdentity.RowKey);
+      }
+    }
+  }
+
+  private applyShiftSelection($elem: JQuery): void {
+    var anchorItem = this._tableEntityListViewModel.lastSelectedAnchorItem;
+
+    // If anchor item doesn't exist, use the first available item of current page instead
+    if (!anchorItem && this._tableEntityListViewModel.items().length > 0) {
+      anchorItem = this._tableEntityListViewModel.items()[0];
+    }
+
+    if (anchorItem) {
+      var entityIdentity: Entities.ITableEntityIdentity = this.getEntityIdentity($elem);
+      var elementIndex = this._tableEntityListViewModel.getItemIndexFromAllPages(
+        this._tableEntityListViewModel.getTableEntityKeys(entityIdentity.RowKey)
+      );
+      var anchorIndex = this._tableEntityListViewModel.getItemIndexFromAllPages(
+        this._tableEntityListViewModel.getTableEntityKeys(anchorItem.RowKey._)
+      );
+
+      var startIndex = Math.min(elementIndex, anchorIndex);
+      var endIndex = Math.max(elementIndex, anchorIndex);
+
+      this._tableEntityListViewModel.clearSelection();
+      ko.utils.arrayPushAll<Entities.ITableEntity>(
+        this._tableEntityListViewModel.selected,
+        this._tableEntityListViewModel.getItemsFromAllPagesWithinRange(startIndex, endIndex + 1)
+      );
+    }
+  }
+
+  private applyContextMenuSelection($elem: JQuery) {
+    var entityIdentity: Entities.ITableEntityIdentity = this.getEntityIdentity($elem);
+
+    if (
+      !this._tableEntityListViewModel.isItemSelected(
+        this._tableEntityListViewModel.getTableEntityKeys(entityIdentity.RowKey)
+      )
+    ) {
+      if (this._tableEntityListViewModel.selected().length) {
+        this._tableEntityListViewModel.clearSelection();
+      }
+      this.addToSelection(entityIdentity.RowKey);
+    }
+  }
+
+  private addToSelection(rowKey: string) {
+    var selectedEntity: Entities.ITableEntity = this._tableEntityListViewModel.getItemFromCurrentPage(
+      this._tableEntityListViewModel.getTableEntityKeys(rowKey)
+    );
+
+    if (selectedEntity != null) {
+      this._tableEntityListViewModel.selected.push(selectedEntity);
+    }
+  }
+
+  // Selecting first row if the selection is empty.
+  public selectFirstIfNeeded(): void {
+    var koSelected: ko.ObservableArray<Entities.ITableEntity> = this._tableEntityListViewModel
+      ? this._tableEntityListViewModel.selected
+      : null;
+    var koEntities: ko.ObservableArray<Entities.ITableEntity> = this._tableEntityListViewModel
+      ? this._tableEntityListViewModel.items
+      : null;
+
+    if (!koSelected().length && koEntities().length) {
+      var firstEntity: Entities.ITableEntity = koEntities()[0];
+
+      // Clear last selection: lastSelectedItem and lastSelectedAnchorItem
+      this._tableEntityListViewModel.clearLastSelected();
+
+      this.addToSelection(firstEntity.RowKey._);
+
+      // Update last selection
+      this._tableEntityListViewModel.lastSelectedItem = firstEntity;
+
+      // Finally, make sure first row is visible
+      DataTableOperations.scrollToTopIfNeeded();
+    }
+  }
+
+  public bind() {
+    this.dataTable.on("click", "tr", this.click);
+    this.dataTable.on("dblclick", "tr", this.doubleClick);
+    this.dataTable.on("keydown", "td", this.keyDown);
+    this.dataTable.on("keyup", "td", this.keyUp);
+
+    // Keyboard navigation - selecting first row if the selection is empty when the table gains focus.
+    this.dataTable.on("focus", () => {
+      this.selectFirstIfNeeded();
+      return true;
+    });
+
+    // Bind drag & drop behavior
+    $("body").on("drop", this.itemDropped);
+  }
+
+  public focusTable(): void {
+    this.dataTable.focus();
+  }
+}

src/Explorer/Tables/DataTable/DataTableOperations.ts

@@ -0,0 +1,192 @@
+import _ from "underscore";
+import Q from "q";
+
+import * as Entities from "../Entities";
+import * as QueryBuilderConstants from "../Constants";
+import * as Utilities from "../Utilities";
+
+export function getRowSelector(selectorSchema: Entities.IProperty[]): string {
+  var selector: string = "";
+  selectorSchema &&
+    selectorSchema.forEach((p: Entities.IProperty) => {
+      selector += "[" + p.key + '="' + Utilities.jQuerySelectorEscape(p.value) + '"]';
+    });
+  return QueryBuilderConstants.htmlSelectors.dataTableAllRowsSelector + selector;
+}
+
+export function isRowVisible(dataTableScrollBodyQuery: JQuery, element: HTMLElement): boolean {
+  var isVisible = false;
+
+  if (dataTableScrollBodyQuery.length && element) {
+    var elementRect: ClientRect = element.getBoundingClientRect(),
+      dataTableScrollBodyRect: ClientRect = dataTableScrollBodyQuery.get(0).getBoundingClientRect();
+
+    isVisible = elementRect.bottom <= dataTableScrollBodyRect.bottom && dataTableScrollBodyRect.top <= elementRect.top;
+  }
+
+  return isVisible;
+}
+
+export function scrollToRowIfNeeded(dataTableRows: JQuery, currentIndex: number, isScrollUp: boolean): void {
+  if (dataTableRows.length) {
+    var dataTableScrollBodyQuery: JQuery = $(QueryBuilderConstants.htmlSelectors.dataTableScrollBodySelector),
+      selectedRowElement: HTMLElement = dataTableRows.get(currentIndex);
+
+    if (dataTableScrollBodyQuery.length && selectedRowElement) {
+      var isVisible: boolean = isRowVisible(dataTableScrollBodyQuery, selectedRowElement);
+
+      if (!isVisible) {
+        var selectedRowQuery: JQuery = $(selectedRowElement),
+          scrollPosition: number = dataTableScrollBodyQuery.scrollTop(),
+          selectedElementPosition: number = selectedRowQuery.position().top,
+          newScrollPosition: number = 0;
+
+        if (isScrollUp) {
+          newScrollPosition = scrollPosition + selectedElementPosition;
+        } else {
+          newScrollPosition =
+            scrollPosition + (selectedElementPosition + selectedRowQuery.height() - dataTableScrollBodyQuery.height());
+        }
+
+        dataTableScrollBodyQuery.scrollTop(newScrollPosition);
+      }
+    }
+  }
+}
+
+export function scrollToTopIfNeeded(): void {
+  var $dataTableRows: JQuery = $(QueryBuilderConstants.htmlSelectors.dataTableAllRowsSelector),
+    $dataTableScrollBody: JQuery = $(QueryBuilderConstants.htmlSelectors.dataTableScrollBodySelector);
+
+  if ($dataTableRows.length && $dataTableScrollBody.length) {
+    $dataTableScrollBody.scrollTop(0);
+  }
+}
+
+export function setPaginationButtonEventHandlers(): void {
+  $(QueryBuilderConstants.htmlSelectors.dataTablePaginationButtonSelector)
+    .on("mousedown", (event: JQueryEventObject) => {
+      // Prevents the table contents from briefly jumping when clicking on "Load more"
+      event.preventDefault();
+    })
+    .attr("role", "button");
+}
+
+export function filterColumns(table: DataTables.DataTable, settings: boolean[]): void {
+  settings &&
+    settings.forEach((value: boolean, index: number) => {
+      table.column(index).visible(value, false);
+    });
+  table.columns.adjust().draw(false);
+}
+
+/**
+ * Reorder columns based on current order.
+ * If no current order is specified, reorder the columns based on intial order.
+ */
+export function reorderColumns(
+  table: DataTables.DataTable,
+  targetOrder: number[],
+  currentOrder?: number[]
+): Q.Promise<any> {
+  var columnsCount: number = targetOrder.length;
+  var isCurrentOrderPassedIn: boolean = !!currentOrder;
+  if (!isCurrentOrderPassedIn) {
+    currentOrder = getInitialOrder(columnsCount);
+  }
+  var isSameOrder: boolean = Utilities.isEqual(currentOrder, targetOrder);
+
+  // if the targetOrder is the same as current order, do nothing.
+  if (!isSameOrder) {
+    // Otherwise, calculate the transformation order.
+    // If current order not specified, then it'll be set to initial order,
+    //  i.e., either no reorder happened before or reordering to its initial order,
+    //  Then the transformation order will be the same as target order.
+    // If current order is specified, then a transformation order is calculated.
+    //  Refer to calculateTransformationOrder for details about transformation order.
+    var transformationOrder: number[] = isCurrentOrderPassedIn
+      ? calculateTransformationOrder(currentOrder, targetOrder)
+      : targetOrder;
+    try {
+      $.fn.dataTable.ColReorder(table).fnOrder(transformationOrder);
+    } catch (err) {
+      return Q.reject(err);
+    }
+  }
+  return Q.resolve(null);
+}
+
+export function resetColumns(table: DataTables.DataTable): void {
+  $.fn.dataTable.ColReorder(table).fnReset();
+}
+
+/**
+ * A table's initial order is described in the form of a natural ascending order.
+ * E.g., for a table with 9 columns, the initial order will be: [0, 1, 2, 3, 4, 5, 6, 7, 8]
+ */
+export function getInitialOrder(columnsCount: number): number[] {
+  return _.range(columnsCount);
+}
+
+/**
+ * Get current table's column order which is described based on initial table. E.g.,
+ * Initial order:  I = [0, 1, 2, 3, 4, 5, 6, 7, 8]   <---->   {prop0, prop1, prop2, prop3, prop4, prop5, prop6, prop7, prop8}
+ * Current order:  C = [0, 1, 2, 6, 7, 3, 4, 5, 8]   <---->   {prop0, prop1, prop2, prop6, prop7, prop3, prop4, prop5, prop8}
+ */
+export function getCurrentOrder(table: DataTables.DataTable): number[] {
+  return $.fn.dataTable.ColReorder(table).fnOrder();
+}
+
+/**
+ * Switch the index and value for each element of an array. e.g.,
+ * InputArray: [0, 1, 2, 6, 7, 3, 4, 5, 8]
+ * Result:     [0, 1, 2, 5, 6, 7, 3, 4, 8]
+ */
+export function invertIndexValues(inputArray: number[]): number[] {
+  var invertedArray: number[] = [];
+  if (inputArray) {
+    inputArray.forEach((value: number, index: number) => {
+      invertedArray[inputArray[index]] = index;
+    });
+  }
+
+  return invertedArray;
+}
+
+/**
+ * DataTable fnOrder API is based on the current table. So we need to map the order targeting original table to targeting current table.
+ * An detailed example for this. Assume the table has 9 columns.
+ * Initial order (order of the initial table):  I = [0, 1, 2, 3, 4, 5, 6, 7, 8]   <---->   {prop0, prop1, prop2, prop3, prop4, prop5, prop6, prop7, prop8}
+ * Current order (order of the current table):  C = [0, 1, 2, 6, 7, 3, 4, 5, 8]   <---->   {prop0, prop1, prop2, prop6, prop7, prop3, prop4, prop5, prop8}
+ * Target order (order of the targeting table): T = [0, 1, 2, 5, 6, 7, 8, 3, 4]   <---->   {prop0, prop1, prop2, prop5, prop6, prop7, prop8, prop3, prop4}
+ * Transformation order: an order passed to fnOrder API that transforms table from current order to target order.
+ * When the table is constructed, it has the intial order. After an reordering with current order array, now the table is shown in current order, e.g.,
+ * column 3 in the current table is actually column C[3]=6 in the intial table, both indicate the column with header prop6.
+ * Now we want to continue to do another reorder to make the target table in the target order. Directly invoking API with the new order won't work as
+ * the API only do reorder based on the current table like the first time we invoke the API. So an order based on the current table needs to be calulated.
+ * Here is an example of how to calculate the transformation order:
+ * In target table, column 3 should be column T[3]=5 in the intial table with header prop5, while in current table, column with header prop5 is column 7 as C[7]=5.
+ * As a result, in transformation order, column 3 in the target table should be column 7 in the current table, Trans[3] = 7. In the same manner, we can get the
+ * transformation order: Trans = [0, 1, 2, 7, 3, 4, 8, 5, 6]
+ */
+export function calculateTransformationOrder(currentOrder: number[], targetOrder: number[]): number[] {
+  var transformationOrder: number[] = [];
+  if (currentOrder && targetOrder && currentOrder.length === targetOrder.length) {
+    var invertedCurrentOrder: number[] = invertIndexValues(currentOrder);
+    transformationOrder = targetOrder.map((value: number) => invertedCurrentOrder[value]);
+  }
+  return transformationOrder;
+}
+
+export function getDataTableHeaders(table: DataTables.DataTable): string[] {
+  var columns: DataTables.ColumnsMethods = table.columns();
+  var headers: string[] = [];
+  if (columns) {
+    // table.columns() return ColumnsMethods which is an array of arrays
+    var columnIndexes: number[] = (<any>columns)[0];
+    if (columnIndexes) {
+      headers = columnIndexes.map((value: number) => $(table.columns(value).header()).html());
+    }
+  }
+  return headers;
+}

src/Explorer/Tables/DataTable/DataTableUtilities.ts

@@ -123,3 +123,10 @@ export function checkForDefaultHeader(headers: string[]): boolean {
 export function forceRecalculateTableSize(): void {
   $("body").trigger("resize");
 }
+
+/**
+ * Turns off the spinning progress indicator on the data table.
+ */
+export function turnOffProgressIndicator(): void {
+  $("div.dataTables_processing").hide();
+}

src/Explorer/Tables/DataTable/DataTableViewModel.ts

@@ -1,12 +1,14 @@
-import { ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import * as ko from "knockout";
 import * as _ from "underscore";
-import * as CommonConstants from "../../../Common/Constants";
+
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab";
-import * as Entities from "../Entities";
 import CacheBase from "./CacheBase";
+import * as CommonConstants from "../../../Common/Constants";
+import * as Constants from "../Constants";
+import * as Entities from "../Entities";
+import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { QueryIterator, ItemDefinition, Resource } from "@azure/cosmos";
 
 // This is the format of the data we will have to pass to Datatable render callback,
 // and property names are defined by Datatable as well.
@@ -45,11 +47,19 @@ abstract class DataTableViewModel {
   private pendingRedraw = false;
   private lastRedrawTime = new Date().getTime();
 
-  public queryTablesTab: NewQueryTablesTab;
+  private dataTableOperationManager: IDataTableOperation;
+
+  public queryTablesTab: QueryTablesTab;
 
   constructor() {
     this.items([]);
     this.selected([]);
+    // Late bound
+    this.dataTableOperationManager = null;
+  }
+
+  public bind(dataTableOperationManager: IDataTableOperation): void {
+    this.dataTableOperationManager = dataTableOperationManager;
   }
 
   public clearLastSelected(): void {
@@ -91,6 +101,10 @@ abstract class DataTableViewModel {
     }
   }
 
+  public focusDataTable(): void {
+    this.dataTableOperationManager.focusTable();
+  }
+
   public getItemFromSelectedItems(itemKeys: Entities.IProperty[]): Entities.ITableEntity {
     return _.find(this.selected(), (item: Entities.ITableEntity) => {
       return this.matchesKeys(item, itemKeys);
@@ -156,12 +170,35 @@ abstract class DataTableViewModel {
     this.cache.sortOrder = sortOrder;
   }
 
-  protected renderPage(startIndex: number, pageSize: number) {
+  protected renderPage(
+    renderCallBack: any,
+    draw: number,
+    startIndex: number,
+    pageSize: number,
+    oSettings: any,
+    postRenderTasks: (startIndex: number, pageSize: number) => Promise<void> = null
+  ) {
+    this.updatePaginationControls(oSettings);
+
+    // pageSize < 0 means to show all data
     var endIndex = pageSize < 0 ? this.cache.length : startIndex + pageSize;
     var renderData = this.cache.data.slice(startIndex, endIndex);
 
     this.items(renderData);
 
+    var render: IDataTableRenderData = {
+      draw: draw,
+      aaData: renderData,
+      recordsTotal: this.cache.length,
+      recordsFiltered: this.cache.length,
+    };
+
+    if (!!postRenderTasks) {
+      postRenderTasks(startIndex, pageSize).then(() => {
+        this.table.rows().invalidate();
+      });
+    }
+    renderCallBack(render);
     if (this.queryTablesTab.onLoadStartKey != null && this.queryTablesTab.onLoadStartKey != undefined) {
       TelemetryProcessor.traceSuccess(
         Action.Tab,
@@ -180,6 +217,16 @@ abstract class DataTableViewModel {
   protected matchesKeys(item: Entities.ITableEntity, itemKeys: Entities.IProperty[]): boolean {
     return itemKeys.every((property: Entities.IProperty) => {
       var itemValue = item[property.key];
+
+      // if (itemValue && property.subkey) {
+      //     itemValue = itemValue._[property.subkey];
+      //     if (!itemValue) {
+      //         itemValue = "";
+      //     }
+      // } else if (property.subkey) {
+      //     itemValue = "";
+      // }
+
       return this.stringCompare(itemValue._, property.value);
     });
   }
@@ -191,6 +238,27 @@ abstract class DataTableViewModel {
   protected stringCompare(s1: string, s2: string): boolean {
     return s1 === s2;
   }
+
+  private updatePaginationControls(oSettings: any) {
+    var pageInfo = this.table.page.info();
+    var pageSize = pageInfo.length;
+    var paginateElement = $(oSettings.nTableWrapper).find(Constants.htmlSelectors.paginateSelector);
+
+    if (this.allDownloaded) {
+      if (this.cache.length <= pageSize) {
+        // Hide pagination controls if everything fits in one page!.
+        paginateElement.hide();
+      } else {
+        // Enable pagination controls.
+        paginateElement.show();
+        oSettings.oLanguage.oPaginate.sLast = DataTableViewModel.lastPageLabel;
+      }
+    } else {
+      // Enable pagination controls and show load more button.
+      paginateElement.show();
+      oSettings.oLanguage.oPaginate.sLast = DataTableViewModel.loadMoreLabel;
+    }
+  }
 }
 
 interface IDataTableOperation {

src/Explorer/Tables/DataTable/TableCommands.ts

@@ -94,4 +94,8 @@ export default class TableCommands {
 
     return null;
   }
+
+  public resetColumns(viewModel: TableEntityListViewModel): void {
+    viewModel.reloadTable();
+  }
 }

src/Explorer/Tables/DataTable/TableEntityListViewModel.ts

@@ -6,7 +6,7 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../../UserContext";
-import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab";
+import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import * as Constants from "../Constants";
 import { getQuotedCqlIdentifier } from "../CqlUtilities";
 import * as Entities from "../Entities";
@@ -101,8 +101,7 @@ export default class TableEntityListViewModel extends DataTableViewModel {
   public useSetting: boolean = true;
 
   //public tableExplorerContext: TableExplorerContext;
-  public notifyColumnChanges: (enablePrompt: boolean, queryTablesTab: NewQueryTablesTab) => void;
-
+  public notifyColumnChanges: (enablePrompt: boolean, queryTablesTab: QueryTablesTab) => void;
   public tablePageStartIndex: number;
   public tableQuery: Entities.ITableQuery = {};
   public cqlQuery: ko.Observable<string>;
@@ -113,7 +112,7 @@ export default class TableEntityListViewModel extends DataTableViewModel {
   public queryErrorMessage: ko.Observable<string>;
   public id: string;
 
-  constructor(tableCommands: TableCommands, queryTablesTab: NewQueryTablesTab) {
+  constructor(tableCommands: TableCommands, queryTablesTab: QueryTablesTab) {
     super();
     this.cache = new TableEntityCache();
     this.queryErrorMessage = ko.observable<string>();
@@ -132,8 +131,24 @@ export default class TableEntityListViewModel extends DataTableViewModel {
     return [{ key: Constants.EntityKeyNames.RowKey, value: rowKey }];
   }
 
+  public reloadTable(useSetting: boolean = true, resetHeaders: boolean = true): DataTables.DataTable {
+    this.clearCache();
+    this.clearSelection();
+    this.isCancelled = false;
+
+    this.useSetting = useSetting;
+    if (resetHeaders) {
+      this.updateHeaders([Constants.defaultHeader]);
+    }
+    return this.table.ajax.reload();
+  }
+
   public updateHeaders(newHeaders: string[], notifyColumnChanges: boolean = false, enablePrompt: boolean = true): void {
     this.headers = newHeaders;
+    if (notifyColumnChanges) {
+      this.clearSelection();
+      this.notifyColumnChanges(enablePrompt, this.queryTablesTab);
+    }
   }
 
   /**
@@ -143,21 +158,40 @@ export default class TableEntityListViewModel extends DataTableViewModel {
    * fnCallback - is the render callback with data to render.
    * oSetting: current settings used for table initialization.
    */
-
-  public async renderNextPageAndupdateCache(): Promise<Entities.ITableEntity[]> {
+  public renderNextPageAndupdateCache(sSource: any, aoData: any, fnCallback: any, oSettings: any) {
     var tablePageSize: number;
+    var draw: number;
     var prefetchNeeded = true;
+    var columnSortOrder: any;
     // Threshold(pages) for triggering cache prefetch.
     // If number remaining pages in cache falls below prefetchThreshold prefetch will be triggered.
     var prefetchThreshold = 10;
     var tableQuery = this.tableQuery;
+
+    for (var index in aoData) {
+      var data = aoData[index];
+      if (data.name === "length") {
+        tablePageSize = data.value;
+      }
+      if (data.name === "start") {
+        this.tablePageStartIndex = data.value;
+      }
+      if (data.name === "draw") {
+        draw = data.value;
+      }
+      if (data.name === "order") {
+        columnSortOrder = data.value;
+      }
+    }
     // Try cache if valid.
     if (this.isCacheValid(tableQuery)) {
       // Check if prefetch needed.
       if (this.tablePageStartIndex + tablePageSize <= this.cache.length || this.allDownloaded) {
         prefetchNeeded = false;
-        this.tablePageStartIndex = 0;
-        this.renderPage(this.tablePageStartIndex, this.cache.length);
+        if (columnSortOrder && (!this.cache.sortOrder || !_.isEqual(this.cache.sortOrder, columnSortOrder))) {
+          this.sortColumns(columnSortOrder, oSettings);
+        }
+        this.renderPage(fnCallback, draw, this.tablePageStartIndex, tablePageSize, oSettings);
         if (
           !this.allDownloaded &&
           this.tablePageStartIndex > 0 && // This is a case now that we can hit this as we re-construct table when we update column
@@ -174,21 +208,41 @@ export default class TableEntityListViewModel extends DataTableViewModel {
 
     if (prefetchNeeded) {
       var downloadSize = tableQuery.top || this.downloadSize;
-      return await this.prefetchAndRender(tableQuery, 0, tablePageSize, downloadSize);
-    } else {
-      return this.cache.data;
+      this.prefetchAndRender(
+        tableQuery,
+        this.tablePageStartIndex,
+        tablePageSize,
+        downloadSize,
+        draw,
+        fnCallback,
+        oSettings,
+        columnSortOrder
+      );
     }
   }
 
   public addEntityToCache(entity: Entities.ITableEntity): Q.Promise<any> {
     // Delay the add operation if we are fetching data from server, so as to avoid race condition.
     if (this.cache.serverCallInProgress) {
-      Utilities.delay(this.pollingInterval).then(() => {
-        this.updateCachedEntity(entity);
+      return Utilities.delay(this.pollingInterval).then(() => {
+        return this.updateCachedEntity(entity);
       });
     }
 
-    this.cache.data.splice(this.cache.length, 0, entity);
+    // Find the first item which is greater than the added entity.
+    var oSettings: any = (<any>this.table).context[0];
+    var index: number = _.findIndex(this.cache.data, (data: any) => {
+      return this.dataComparer(data, entity, this.cache.sortOrder, oSettings) > 0;
+    });
+
+    // If no such item, then insert at last.
+    var insertIndex: number = Utilities.ensureBetweenBounds(
+      index < 0 ? this.cache.length : index,
+      0,
+      this.cache.length
+    );
+
+    this.cache.data.splice(insertIndex, 0, entity);
 
     // Finally, select newly added entity
     this.clearSelection();
@@ -200,8 +254,8 @@ export default class TableEntityListViewModel extends DataTableViewModel {
   public updateCachedEntity(entity: Entities.ITableEntity): Q.Promise<any> {
     // Delay the add operation if we are fetching data from server, so as to avoid race condition.
     if (this.cache.serverCallInProgress) {
-      Utilities.delay(this.pollingInterval).then(() => {
-        this.updateCachedEntity(entity);
+      return Utilities.delay(this.pollingInterval).then(() => {
+        return this.updateCachedEntity(entity);
       });
     }
     var oldEntityIndex: number = _.findIndex(
@@ -221,8 +275,8 @@ export default class TableEntityListViewModel extends DataTableViewModel {
 
     // Delay the remove operation if we are fetching data from server, so as to avoid race condition.
     if (this.cache.serverCallInProgress) {
-      Utilities.delay(this.pollingInterval).then(() => {
-        this.removeEntitiesFromCache(entities);
+      return Utilities.delay(this.pollingInterval).then(() => {
+        return this.removeEntitiesFromCache(entities);
       });
     }
 
@@ -238,6 +292,14 @@ export default class TableEntityListViewModel extends DataTableViewModel {
       });
     this.clearSelection();
 
+    // Show last available page if there is not enough data
+    var pageInfo = this.table.page.info();
+    if (this.cache.length <= pageInfo.start) {
+      var availablePages = Math.ceil(this.cache.length / pageInfo.length);
+      var pageToShow = availablePages > 0 ? availablePages - 1 : 0;
+      this.table.page(pageToShow);
+    }
+
     return Q.resolve(null);
   }
 
@@ -330,75 +392,86 @@ export default class TableEntityListViewModel extends DataTableViewModel {
     });
   }
 
-  private async prefetchAndRender(
+  private prefetchAndRender(
     tableQuery: Entities.ITableQuery,
     tablePageStartIndex: number,
     tablePageSize: number,
-    downloadSize: number
-  ): Promise<Entities.ITableEntity[]> {
+    downloadSize: number,
+    draw: number,
+    renderCallBack: Function,
+    oSettings: any,
+    columnSortOrder: any
+  ): void {
     this.queryErrorMessage(null);
     if (this.cache.serverCallInProgress) {
-      return undefined;
+      return;
     }
-    try {
-      const result = await this.prefetchData(tableQuery, downloadSize, /* currentRetry */ 0);
-      if (!result) {
-        return undefined;
-      }
-      // Cache is assigned using prefetchData
-      var entities = this.cache.data;
-      if (userContext.apiType === "Cassandra" && DataTableUtilities.checkForDefaultHeader(this.headers)) {
-        (<CassandraAPIDataClient>this.queryTablesTab.container.tableDataClient)
-          .getTableSchema(this.queryTablesTab.collection)
-          .then((headers: CassandraTableKey[]) => {
-            this.updateHeaders(
-              headers.map((header) => header.property),
-              true
-            );
-          });
-      } else {
-        var selectedHeadersUnion: string[] = DataTableUtilities.getPropertyIntersectionFromTableEntities(
-          entities,
-          userContext.apiType === "Cassandra"
-        );
-        var newHeaders: string[] = _.difference(selectedHeadersUnion, this.headers);
-        if (newHeaders.length > 0) {
-          // Any new columns found will be added into headers array, which will trigger a re-render of the DataTable.
-          // So there is no need to call it here.
-          this.updateHeaders(newHeaders, /* notifyColumnChanges */ true);
+    this.prefetchData(tableQuery, downloadSize, /* currentRetry */ 0)
+      .then((result: IListTableEntitiesSegmentedResult) => {
+        if (!result) {
+          return;
         }
-      }
-      this.renderPage(tablePageStartIndex, entities.length);
 
-      return result;
-    } catch (error) {
-      const parsedErrors = parseError(error);
-      var errors = parsedErrors.map((error) => {
-        return <ViewModels.QueryError>{
-          message: error.message,
-          start: error.location ? error.location.start : undefined,
-          end: error.location ? error.location.end : undefined,
-          code: error.code,
-          severity: error.severity,
-        };
+        var entities = this.cache.data;
+        if (userContext.apiType === "Cassandra" && DataTableUtilities.checkForDefaultHeader(this.headers)) {
+          (<CassandraAPIDataClient>this.queryTablesTab.container.tableDataClient)
+            .getTableSchema(this.queryTablesTab.collection)
+            .then((headers: CassandraTableKey[]) => {
+              this.updateHeaders(
+                headers.map((header) => header.property),
+                true
+              );
+            });
+        } else {
+          var selectedHeadersUnion: string[] = DataTableUtilities.getPropertyIntersectionFromTableEntities(
+            entities,
+            userContext.apiType === "Cassandra"
+          );
+          var newHeaders: string[] = _.difference(selectedHeadersUnion, this.headers);
+          if (newHeaders.length > 0) {
+            // Any new columns found will be added into headers array, which will trigger a re-render of the DataTable.
+            // So there is no need to call it here.
+            this.updateHeaders(newHeaders, /* notifyColumnChanges */ true);
+          } else {
+            if (columnSortOrder) {
+              this.sortColumns(columnSortOrder, oSettings);
+            }
+            this.renderPage(renderCallBack, draw, tablePageStartIndex, tablePageSize, oSettings);
+          }
+        }
+
+        if (result.ExceedMaximumRetries) {
+          var message: string = "We are having trouble getting your data. Please try again."; // localize
+        }
+      })
+      .catch((error: any) => {
+        const parsedErrors = parseError(error);
+        var errors = parsedErrors.map((error) => {
+          return <ViewModels.QueryError>{
+            message: error.message,
+            start: error.location ? error.location.start : undefined,
+            end: error.location ? error.location.end : undefined,
+            code: error.code,
+            severity: error.severity,
+          };
+        });
+        this.queryErrorMessage(errors[0].message);
+        if (this.queryTablesTab.onLoadStartKey != null && this.queryTablesTab.onLoadStartKey != undefined) {
+          TelemetryProcessor.traceFailure(
+            Action.Tab,
+            {
+              databaseName: this.queryTablesTab.collection.databaseId,
+              collectionName: this.queryTablesTab.collection.id(),
+              dataExplorerArea: Areas.Tab,
+              tabTitle: this.queryTablesTab.tabTitle(),
+              error: error,
+            },
+            this.queryTablesTab.onLoadStartKey
+          );
+          this.queryTablesTab.onLoadStartKey = null;
+        }
+        DataTableUtilities.turnOffProgressIndicator();
       });
-      this.queryErrorMessage(errors[0].message);
-      if (this.queryTablesTab.onLoadStartKey != null && this.queryTablesTab.onLoadStartKey != undefined) {
-        TelemetryProcessor.traceFailure(
-          Action.Tab,
-          {
-            databaseName: this.queryTablesTab.collection.databaseId,
-            collectionName: this.queryTablesTab.collection.id(),
-            dataExplorerArea: Areas.Tab,
-            tabTitle: this.queryTablesTab.tabTitle(),
-            error: error,
-          },
-          this.queryTablesTab.onLoadStartKey
-        );
-        this.queryTablesTab.onLoadStartKey = null;
-      }
-    }
-    return undefined;
   }
 
   /**
@@ -412,52 +485,51 @@ export default class TableEntityListViewModel extends DataTableViewModel {
    * Note that this also means that we can get less entities than the requested download size in a successful call.
    * See Microsoft Azure API Documentation at: https://msdn.microsoft.com/en-us/library/azure/dd135718.aspx
    */
-
-  private async prefetchData(
+  private prefetchData(
     tableQuery: Entities.ITableQuery,
     downloadSize: number,
     currentRetry: number = 0
-  ): Promise<any> {
-    var entities: any;
+  ): Q.Promise<any> {
     if (!this.cache.serverCallInProgress) {
       this.cache.serverCallInProgress = true;
       this.allDownloaded = false;
       this.lastPrefetchTime = new Date().getTime();
       var time = this.lastPrefetchTime;
 
-      try {
-        if (this._documentIterator && this.continuationToken) {
-          // TODO handle Cassandra case
-          const fetchNext = await this._documentIterator.fetchNext();
-          let fetchNextEntities: Entities.ITableEntity[] = TableEntityProcessor.convertDocumentsToEntities(
-            fetchNext.resources
-          );
-          let finalEntities: IListTableEntitiesSegmentedResult = <IListTableEntitiesSegmentedResult>{
-            Results: fetchNextEntities,
-            ContinuationToken: this._documentIterator.hasMoreResults(),
-          };
-          entities = finalEntities;
-        } else if (this.continuationToken && userContext.apiType === "Cassandra") {
-          entities = await this.queryTablesTab.container.tableDataClient.queryDocuments(
+      var promise: Q.Promise<IListTableEntitiesSegmentedResult>;
+      if (this._documentIterator && this.continuationToken) {
+        // TODO handle Cassandra case
+
+        promise = Q(this._documentIterator.fetchNext().then((response) => response.resources)).then(
+          (documents: any[]) => {
+            let entities: Entities.ITableEntity[] = TableEntityProcessor.convertDocumentsToEntities(documents);
+            let finalEntities: IListTableEntitiesSegmentedResult = <IListTableEntitiesSegmentedResult>{
+              Results: entities,
+              ContinuationToken: this._documentIterator.hasMoreResults(),
+            };
+            return Q.resolve(finalEntities);
+          }
+        );
+      } else if (this.continuationToken && userContext.apiType === "Cassandra") {
+        promise = Q(
+          this.queryTablesTab.container.tableDataClient.queryDocuments(
             this.queryTablesTab.collection,
             this.cqlQuery(),
             true,
             this.continuationToken
-          );
-        } else {
-          let query = this.sqlQuery();
-          if (userContext.apiType === "Cassandra") {
-            query = this.cqlQuery();
-          }
-          entities = await this.queryTablesTab.container.tableDataClient.queryDocuments(
-            this.queryTablesTab.collection,
-            query,
-            true
-          );
+          )
+        );
+      } else {
+        let query = this.sqlQuery();
+        if (userContext.apiType === "Cassandra") {
+          query = this.cqlQuery();
         }
-
-        const result = entities;
-        if (result) {
+        promise = Q(
+          this.queryTablesTab.container.tableDataClient.queryDocuments(this.queryTablesTab.collection, query, true)
+        );
+      }
+      return promise
+        .then((result: IListTableEntitiesSegmentedResult) => {
           if (!this._documentIterator) {
             this._documentIterator = result.iterator;
           }
@@ -467,14 +539,14 @@ export default class TableEntityListViewModel extends DataTableViewModel {
           // And as another service call is during process, we don't set serverCallInProgress to false here.
           // Thus, end the prefetch.
           if (this.lastPrefetchTime !== time) {
-            return Promise.resolve(undefined);
+            return Q.resolve(null);
           }
 
           var entities = result.Results;
           actualDownloadSize = entities.length;
 
           // Queries can fetch no results and still return a continuation header. See prefetchAndRender() method.
-          this.continuationToken = this.isCancelled ? undefined : result.ContinuationToken;
+          this.continuationToken = this.isCancelled ? null : result.ContinuationToken;
 
           if (!this.continuationToken) {
             this.allDownloaded = true;
@@ -496,20 +568,30 @@ export default class TableEntityListViewModel extends DataTableViewModel {
             this.allDownloaded = true;
           }
 
+          // There are three possible results for a prefetch:
+          // 1. Continuation token is null or fetched items' size reaches predefined.
+          // 2. Continuation token is not null and fetched items' size hasn't reach predefined.
+          //  2.1 Retry times has reached predefined maximum.
+          //  2.2 Retry times hasn't reached predefined maximum.
+          // Correspondingly,
+          // For #1, end prefetch.
+          // For #2.1, set prefetch exceeds maximum retry number and end prefetch.
+          // For #2.2, go to next round prefetch.
           if (this.allDownloaded || nextDownloadSize === 0) {
-            return Promise.resolve(this.cache.data);
+            return Q.resolve(result);
           }
 
           if (currentRetry >= TableEntityListViewModel._maximumNumberOfPrefetchRetries) {
             result.ExceedMaximumRetries = true;
-            return Promise.resolve(this.cache.data);
+            return Q.resolve(result);
           }
           return this.prefetchData(tableQuery, nextDownloadSize, currentRetry + 1);
-        }
-      } catch (error) {
-        this.cache.serverCallInProgress = false;
-        return Promise.reject(error);
-      }
+        })
+        .catch((error: Error) => {
+          this.cache.serverCallInProgress = false;
+          return Q.reject(error);
+        });
     }
+    return null;
   }
 }

src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts

@@ -1,7 +1,6 @@
 import * as ko from "knockout";
 import { KeyCodes } from "../../../Common/Constants";
 import { userContext } from "../../../UserContext";
-import { IQueryTableRowsType } from "../../Tabs/QueryTablesTab/QueryTableTabUtils";
 import * as Constants from "../Constants";
 import { getQuotedCqlIdentifier } from "../CqlUtilities";
 import * as DataTableUtilities from "../DataTable/DataTableUtilities";
@@ -107,14 +106,14 @@ export default class QueryBuilderViewModel {
     });
   }
 
-  public setExample(pk: string, rk: string) {
+  public setExample() {
     var example1 = new QueryClauseViewModel(
       this,
       "",
       "PartitionKey",
       this.edmTypes()[0],
       Constants.Operator.Equal,
-      pk,
+      this.tableEntityListViewModel.items()[0].PartitionKey._,
       false,
       "",
       "",
@@ -128,7 +127,7 @@ export default class QueryBuilderViewModel {
       "RowKey",
       this.edmTypes()[0],
       Constants.Operator.Equal,
-      rk,
+      this.tableEntityListViewModel.items()[0].RowKey._,
       true,
       "",
       "",
@@ -140,31 +139,40 @@ export default class QueryBuilderViewModel {
     this.addClauseImpl(example2, 1);
   }
 
-  public getODataFilterFromClauses = (queryClauses: IQueryTableRowsType[]): string => {
+  public getODataFilterFromClauses = (): string => {
     var filterString: string = "";
-    if (queryClauses != undefined) {
-      for (var i = 0; i < queryClauses.length; i++) {
-        var currentItem = queryClauses[i];
+    var treeTraversal = (group: ClauseGroup): void => {
+      for (var i = 0; i < group.children.length; i++) {
+        var currentItem = group.children[i];
 
-        this.timestampToValue(currentItem);
-        filterString = filterString.concat(
-          this.constructODataClause(
-            filterString === "" ? "" : currentItem.selectedOperation,
-            this.generateLeftParentheses(currentItem),
-            currentItem.selectedField,
-            currentItem.selectedEntityType,
-            currentItem.selectedOperator,
-            currentItem.entityValue,
-            this.generateRightParentheses(currentItem)
-          )
-        );
+        if (currentItem instanceof QueryClauseViewModel) {
+          var clause = <QueryClauseViewModel>currentItem;
+          this.timestampToValue(clause);
+          filterString = filterString.concat(
+            this.constructODataClause(
+              filterString === "" ? "" : clause.and_or(),
+              this.generateLeftParentheses(clause),
+              clause.field(),
+              clause.type(),
+              clause.operator(),
+              clause.value(),
+              this.generateRightParentheses(clause)
+            )
+          );
+        }
+
+        if (currentItem instanceof ClauseGroup) {
+          treeTraversal(<ClauseGroup>currentItem);
+        }
       }
-    }
+    };
+
+    treeTraversal(this.queryClauses);
 
     return filterString.trim();
   };
 
-  public getSqlFilterFromClauses = (queryTableRows: IQueryTableRowsType[]): string => {
+  public getSqlFilterFromClauses = (): string => {
     var filterString: string = "SELECT * FROM c";
     if (this._queryViewModel.selectText() && this._queryViewModel.selectText().length > 0) {
       filterString = "SELECT";
@@ -187,37 +195,48 @@ export default class QueryBuilderViewModel {
         });
       filterString = filterString.concat(" FROM c");
     }
-    if (queryTableRows.length === 0) {
+    if (this.queryClauses.children.length === 0) {
       return filterString;
     }
     filterString = filterString.concat(" WHERE");
     var first = true;
-    for (var i = 0; i < queryTableRows.length; i++) {
-      var currentItem = queryTableRows[i];
+    var treeTraversal = (group: ClauseGroup): void => {
+      for (var i = 0; i < group.children.length; i++) {
+        var currentItem = group.children[i];
 
-      let timeStampValue: string = this.timestampToSqlValue(currentItem);
-      var value = currentItem.entityValue;
-      if (!currentItem.isValue) {
-        value = timeStampValue;
+        if (currentItem instanceof QueryClauseViewModel) {
+          var clause = <QueryClauseViewModel>currentItem;
+          let timeStampValue: string = this.timestampToSqlValue(clause);
+          var value = clause.value();
+          if (!clause.isValue()) {
+            value = timeStampValue;
+          }
+          filterString = filterString.concat(
+            this.constructSqlClause(
+              first ? "" : clause.and_or(),
+              this.generateLeftParentheses(clause),
+              clause.field(),
+              clause.type(),
+              clause.operator(),
+              value,
+              this.generateRightParentheses(clause)
+            )
+          );
+          first = false;
+        }
+
+        if (currentItem instanceof ClauseGroup) {
+          treeTraversal(<ClauseGroup>currentItem);
+        }
       }
-      filterString = filterString.concat(
-        this.constructSqlClause(
-          first ? "" : currentItem.selectedOperation,
-          this.generateLeftParentheses(currentItem),
-          currentItem.selectedField,
-          currentItem.selectedEntityType,
-          currentItem.selectedOperator,
-          value,
-          this.generateRightParentheses(currentItem)
-        )
-      );
-      first = false;
-    }
+    };
+
+    treeTraversal(this.queryClauses);
 
     return filterString.trim();
   };
 
-  public getCqlFilterFromClauses = (queryTableRows: IQueryTableRowsType[]): string => {
+  public getCqlFilterFromClauses = (): string => {
     const databaseId = this._queryViewModel.queryTablesTab.collection.databaseId;
     const collectionId = this._queryViewModel.queryTablesTab.collection.id();
     const tableToQuery = `${getQuotedCqlIdentifier(databaseId)}.${getQuotedCqlIdentifier(collectionId)}`;
@@ -232,32 +251,43 @@ export default class QueryBuilderViewModel {
         });
       filterString = filterString.concat(` FROM ${tableToQuery}`);
     }
-    if (queryTableRows === undefined || queryTableRows.length === 0) {
+    if (this.queryClauses.children.length === 0) {
       return filterString;
     }
     filterString = filterString.concat(" WHERE");
     var first = true;
-    for (var i = 0; i < queryTableRows.length; i++) {
-      var currentItem = queryTableRows[i];
+    var treeTraversal = (group: ClauseGroup): void => {
+      for (var i = 0; i < group.children.length; i++) {
+        var currentItem = group.children[i];
 
-      let timeStampValue: string = this.timestampToSqlValue(currentItem);
-      var value = currentItem.entityValue;
-      if (!currentItem.isValue) {
-        value = timeStampValue;
+        if (currentItem instanceof QueryClauseViewModel) {
+          var clause = <QueryClauseViewModel>currentItem;
+          let timeStampValue: string = this.timestampToSqlValue(clause);
+          var value = clause.value();
+          if (!clause.isValue()) {
+            value = timeStampValue;
+          }
+          filterString = filterString.concat(
+            this.constructCqlClause(
+              first ? "" : clause.and_or(),
+              this.generateLeftParentheses(clause),
+              clause.field(),
+              clause.type(),
+              clause.operator(),
+              value,
+              this.generateRightParentheses(clause)
+            )
+          );
+          first = false;
+        }
+
+        if (currentItem instanceof ClauseGroup) {
+          treeTraversal(<ClauseGroup>currentItem);
+        }
       }
-      filterString = filterString.concat(
-        this.constructCqlClause(
-          first ? "" : currentItem.selectedOperation,
-          this.generateLeftParentheses(currentItem),
-          currentItem.selectedField,
-          currentItem.selectedEntityType,
-          currentItem.selectedOperator,
-          value,
-          this.generateRightParentheses(currentItem)
-        )
-      );
-      first = false;
-    }
+    };
+
+    treeTraversal(this.queryClauses);
 
     return filterString.trim();
   };
@@ -268,7 +298,7 @@ export default class QueryBuilderViewModel {
     this.columnOptions(newHeaders.sort(DataTableUtilities.compareTableColumns));
   };
 
-  private generateLeftParentheses(clause: IQueryTableRowsType): string {
+  private generateLeftParentheses(clause: QueryClauseViewModel): string {
     var result = "";
 
     if (clause.clauseGroup.isRootGroup || clause.clauseGroup.children.indexOf(clause) !== 0) {
@@ -291,7 +321,7 @@ export default class QueryBuilderViewModel {
     return result;
   }
 
-  private generateRightParentheses(clause: IQueryTableRowsType): string {
+  private generateRightParentheses(clause: QueryClauseViewModel): string {
     var result = "";
 
     if (
@@ -474,7 +504,7 @@ export default class QueryBuilderViewModel {
     return true;
   };
 
-  public onAddNewClauseKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): boolean => {
+  public onAddNewClauseKeyDown = (source: any, event: KeyboardEvent): boolean => {
     if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
       this.addClauseIndex(this.clauseArray().length - 1, null);
       event.stopPropagation();
@@ -600,11 +630,16 @@ export default class QueryBuilderViewModel {
     return groupViewModels;
   };
 
+  public runQuery = (): DataTables.DataTable => {
+    return this._queryViewModel.runQuery();
+  };
+
   public addCustomRange(timestamp: CustomTimestampHelper.ITimestampQuery, clauseToAdd: QueryClauseViewModel): void {
     var index = this.clauseArray.peek().indexOf(clauseToAdd);
 
     var newClause = new QueryClauseViewModel(
       this,
+      //this._tableEntityListViewModel.tableExplorerContext.hostProxy,
       "And",
       clauseToAdd.field(),
       "DateTime",
@@ -678,67 +713,67 @@ export default class QueryBuilderViewModel {
     //DataTableUtilities.forceRecalculateTableSize();
   }
 
-  private timestampToValue(clause: IQueryTableRowsType): void {
-    if (clause.isValue) {
+  private timestampToValue(clause: QueryClauseViewModel): void {
+    if (clause.isValue()) {
       return;
-    } else if (clause.isTimestamp) {
+    } else if (clause.isTimestamp()) {
       this.getTimeStampToQuery(clause);
       // } else if (clause.isCustomLastTimestamp()) {
       //     clause.value(`datetime'${CustomTimestampHelper._queryLastTime(clause.customLastTimestamp().lastNumber, clause.customLastTimestamp().lastTimeUnit)}'`);
-    } else if (clause.isCustomRangeTimestamp) {
-      if (clause.isLocal) {
-        clause.entityValue = `datetime'${DateTimeUtilities.getUTCDateTime(clause.customTimeValue)}'`;
+    } else if (clause.isCustomRangeTimestamp()) {
+      if (clause.isLocal()) {
+        clause.value(`datetime'${DateTimeUtilities.getUTCDateTime(clause.customTimeValue())}'`);
       } else {
-        clause.entityValue = `datetime'${clause.customTimeValue}Z'`;
+        clause.value(`datetime'${clause.customTimeValue()}Z'`);
       }
     }
   }
 
-  private timestampToSqlValue(clause: IQueryTableRowsType): string {
-    if (clause.isValue) {
+  private timestampToSqlValue(clause: QueryClauseViewModel): string {
+    if (clause.isValue()) {
       return null;
-    } else if (clause.isTimestamp) {
+    } else if (clause.isTimestamp()) {
       return this.getTimeStampToSqlQuery(clause);
       // } else if (clause.isCustomLastTimestamp()) {
       //     clause.value(CustomTimestampHelper._queryLastTime(clause.customLastTimestamp().lastNumber, clause.customLastTimestamp().lastTimeUnit));
-    } else if (clause.isCustomRangeTimestamp) {
-      if (clause.isLocal) {
-        return DateTimeUtilities.getUTCDateTime(clause.customTimeValue);
+    } else if (clause.isCustomRangeTimestamp()) {
+      if (clause.isLocal()) {
+        return DateTimeUtilities.getUTCDateTime(clause.customTimeValue());
       } else {
-        return clause.customTimeValue;
+        return clause.customTimeValue();
       }
     }
     return null;
   }
 
-  private getTimeStampToQuery(clause: IQueryTableRowsType): void {
-    switch (clause.timeValue) {
+  private getTimeStampToQuery(clause: QueryClauseViewModel): void {
+    switch (clause.timeValue()) {
       case Constants.timeOptions.lastHour:
-        clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(0, 1)}'`;
+        clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(0, 1)}'`);
         break;
       case Constants.timeOptions.last24Hours:
-        clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(0, 24)}'`;
+        clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(0, 24)}'`);
         break;
       case Constants.timeOptions.last7Days:
-        clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(7, 0)}'`;
+        clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(7, 0)}'`);
         break;
       case Constants.timeOptions.last31Days:
-        clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(31, 0)}'`;
+        clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(31, 0)}'`);
         break;
       case Constants.timeOptions.last365Days:
-        clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(365, 0)}'`;
+        clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(365, 0)}'`);
         break;
       case Constants.timeOptions.currentMonth:
-        clause.entityValue = `datetime'${CustomTimestampHelper._queryCurrentMonthLocal()}'`;
+        clause.value(`datetime'${CustomTimestampHelper._queryCurrentMonthLocal()}'`);
         break;
       case Constants.timeOptions.currentYear:
-        clause.entityValue = `datetime'${CustomTimestampHelper._queryCurrentYearLocal()}'`;
+        clause.value(`datetime'${CustomTimestampHelper._queryCurrentYearLocal()}'`);
         break;
     }
   }
 
-  private getTimeStampToSqlQuery(clause: IQueryTableRowsType): string {
-    switch (clause.timeValue) {
+  private getTimeStampToSqlQuery(clause: QueryClauseViewModel): string {
+    switch (clause.timeValue()) {
       case Constants.timeOptions.lastHour:
         return CustomTimestampHelper._queryLastDaysHours(0, 1);
       case Constants.timeOptions.last24Hours:

src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx

@@ -5,8 +5,7 @@ import { KeyCodes } from "../../../Common/Constants";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import { userContext } from "../../../UserContext";
 import { TableQuerySelectPanel } from "../../Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel";
-import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab";
-import { IQueryTableRowsType } from "../../Tabs/QueryTablesTab/QueryTableTabUtils";
+import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import { getQuotedCqlIdentifier } from "../CqlUtilities";
 import * as DataTableUtilities from "../DataTable/DataTableUtilities";
 import TableEntityListViewModel from "../DataTable/TableEntityListViewModel";
@@ -40,14 +39,14 @@ export default class QueryViewModel {
 
   public columnOptions: ko.ObservableArray<string>;
 
-  public queryTablesTab: NewQueryTablesTab;
+  public queryTablesTab: QueryTablesTab;
   public id: string;
   private _tableEntityListViewModel: TableEntityListViewModel;
 
-  constructor(queryTablesTab: NewQueryTablesTab) {
+  constructor(queryTablesTab: QueryTablesTab) {
     this.queryTablesTab = queryTablesTab;
     this.id = `queryViewModel${this.queryTablesTab.tabId}`;
-    this._tableEntityListViewModel = queryTablesTab.tableEntityListViewModel;
+    this._tableEntityListViewModel = queryTablesTab.tableEntityListViewModel();
 
     this.queryTextIsReadOnly = ko.computed<boolean>(() => {
       return userContext.apiType !== "Cassandra";
@@ -104,7 +103,7 @@ export default class QueryViewModel {
     DataTableUtilities.forceRecalculateTableSize();
   };
 
-  public toggleAdvancedOptions = (): void => {
+  public toggleAdvancedOptions = () => {
     this.isExpanded(!this.isExpanded());
     if (this.isExpanded()) {
       this.focusTopResult(true);
@@ -127,19 +126,23 @@ export default class QueryViewModel {
     return this.selectText();
   };
 
-  private setFilter = (queryTableRows?: IQueryTableRowsType[]): string => {
+  private setFilter = (): string => {
     const queryString = this.isEditorActive()
       ? this.queryText()
       : userContext.apiType === "Cassandra"
-      ? this.queryBuilderViewModel().getCqlFilterFromClauses(queryTableRows)
-      : this.queryBuilderViewModel().getODataFilterFromClauses(queryTableRows);
+      ? this.queryBuilderViewModel().getCqlFilterFromClauses()
+      : this.queryBuilderViewModel().getODataFilterFromClauses();
     const filter = queryString;
     this.queryText(filter);
     return this.queryText();
   };
 
-  private setSqlFilter = (queryTableRows: IQueryTableRowsType[]): string => {
-    return this.queryBuilderViewModel().getSqlFilterFromClauses(queryTableRows);
+  private setSqlFilter = (): string => {
+    return this.queryBuilderViewModel().getSqlFilterFromClauses();
+  };
+
+  private setCqlFilter = (): string => {
+    return this.queryBuilderViewModel().getCqlFilterFromClauses();
   };
 
   public isHelperEnabled = ko
@@ -155,9 +158,8 @@ export default class QueryViewModel {
       notify: "always",
     });
 
-  public runQuery = (queryTableRows: IQueryTableRowsType[]): string => {
-    let filter = this.setFilter(queryTableRows);
-
+  public runQuery = (): DataTables.DataTable => {
+    let filter = this.setFilter();
     if (filter && userContext.apiType !== "Cassandra") {
       filter = filter.replace(/"/g, "'");
     }
@@ -168,15 +170,13 @@ export default class QueryViewModel {
     this._tableEntityListViewModel.tableQuery.top = top;
     this._tableEntityListViewModel.tableQuery.select = select;
     this._tableEntityListViewModel.oDataQuery(filter);
-    this._tableEntityListViewModel.sqlQuery(this.setSqlFilter(queryTableRows));
+    this._tableEntityListViewModel.sqlQuery(this.setSqlFilter());
     this._tableEntityListViewModel.cqlQuery(filter);
 
-    return userContext.apiType !== "Cassandra"
-      ? this._tableEntityListViewModel.sqlQuery()
-      : this._tableEntityListViewModel.cqlQuery();
+    return this._tableEntityListViewModel.reloadTable(/*useSetting*/ false, /*resetHeaders*/ false);
   };
 
-  public clearQuery = (): void => {
+  public clearQuery = (): DataTables.DataTable => {
     this.queryText();
     this.topValue();
     this.selectText();
@@ -194,26 +194,16 @@ export default class QueryViewModel {
         this.queryTablesTab.collection.id()
       )}`
     );
+    return this._tableEntityListViewModel.reloadTable(false);
   };
 
-  public selectQueryOptions(headers: string[], getSelectMessage: (selectMessage: string) => void): void {
-    this.columnOptions(headers);
-    useSidePanel
-      .getState()
-      .openSidePanel(
-        "Select Column",
-        <TableQuerySelectPanel queryViewModel={this} headers={headers} getSelectMessage={getSelectMessage} />
-      );
+  public selectQueryOptions() {
+    useSidePanel.getState().openSidePanel("Select Column", <TableQuerySelectPanel queryViewModel={this} />);
   }
 
-  public onselectQueryOptionsKeyDown = (
-    source: string,
-    event: KeyboardEvent,
-    headers: string[],
-    getSelectMessage: (selectMessage: string) => void
-  ): boolean => {
+  public onselectQueryOptionsKeyDown = (source: string, event: KeyboardEvent): boolean => {
     if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.selectQueryOptions(headers, getSelectMessage);
+      this.selectQueryOptions();
       event.stopPropagation();
       return false;
     }

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -1,4 +1,4 @@
-import { DetailsList, DetailsListLayoutMode, IColumn, Pivot, PivotItem, SelectionMode, Text } from "@fluentui/react";
+import { DetailsList, DetailsListLayoutMode, IColumn, Pivot, PivotItem, SelectionMode } from "@fluentui/react";
 import React, { Fragment } from "react";
 import SplitterLayout from "react-splitter-layout";
 import "react-splitter-layout/lib/index.css";
@@ -120,13 +120,21 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
   constructor(props: IQueryTabComponentProps) {
     super(props);
     const columns: IColumn[] = [
+      {
+        key: "column1",
+        name: "",
+        minWidth: 16,
+        maxWidth: 16,
+        data: String,
+        fieldName: "toolTip",
+        onRender: this.onRenderColumnItem,
+      },
       {
         key: "column2",
         name: "METRIC",
         minWidth: 200,
         data: String,
         fieldName: "metric",
-        onRender: this.onRenderColumnItem,
       },
       {
         key: "column3",
@@ -198,12 +206,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
 
   public onRenderColumnItem(item: IDocument): JSX.Element {
     if (item.toolTip !== "") {
-      return (
-        <>
-          <InfoTooltip>{`${item.toolTip}`}</InfoTooltip>
-          <Text style={{ paddingLeft: 10, margin: 0 }}>{`${item.metric}`}</Text>
-        </>
-      );
+      return <InfoTooltip>{`${item.toolTip}`}</InfoTooltip>;
     } else {
       return undefined;
     }
@@ -999,7 +1002,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                               "data-order": 2,
                               "data-title": "Query Stats",
                             }}
-                            style={{ height: "100%", overflowY: "scroll" }}
+                            style={{ height: "100%" }}
                           >
                             {this.state.allResultsMetadata.length > 0 && !this.state.error && (
                               <div className="queryMetricsSummaryContainer">

src/Explorer/Tabs/QueryTablesTab.html

@@ -0,0 +1,271 @@
+<div class="tab-pane tableContainer" data-bind="attr:{id: tabId}" role="tabpanel">
+  <!-- Tables Query Tab Query Builder - Start-->
+  <div
+    class="query-builder"
+    data-bind="with: queryViewModel, attr: {
+                                                id: queryViewModel.id
+                                            }"
+  >
+    <!-- Tables Query Tab Errors - Start-->
+    <div class="error-bar">
+      <div class="error-message" aria-label="Error Message" data-bind="visible: hasQueryError">
+        <span><img class="entity-error-Img" src="/error_red.svg" /></span>
+        <span class="error-text" role="alert" data-bind="text: queryErrorMessage"></span>
+      </div>
+    </div>
+    <!-- Tables Query Tab Errors - End-->
+    <!-- Tables Query Tab Query Text - Start-->
+    <div class="query-editor-panel" data-bind="visible: isEditorActive">
+      <div>
+        <textarea
+          class="query-editor-text"
+          data-bind="textInput: queryText,
+                css: { 'query-editor-text-invalid': hasQueryError },
+                readOnly: true"
+          name="query-editor"
+          rows="5"
+          cols="100"
+        ></textarea>
+      </div>
+    </div>
+    <!-- Tables Query Tab Query Text - End-->
+    <!-- Tables Query Tab Query Helper - Start-->
+    <div data-bind="visible: isHelperActive" style="padding-left: 13px">
+      <div class="clause-table" data-bind="with: queryBuilderViewModel ">
+        <div class="scroll-box scrollable" id="scroll">
+          <table class="clause-table">
+            <thead>
+              <tr class="clause-table-row">
+                <th class="clause-table-cell header-background action-header">
+                  <span data-bind="text: actionLabel"></span>
+                </th>
+                <th class="clause-table-cell header-background group-control-header">
+                  <button
+                    type="button"
+                    data-bind="enable: canGroupClauses, attr:{title: groupSelectedClauses}, click: groupClauses"
+                  >
+                    <img class="and-or-svg" src="/And-Or.svg" alt="Group selected clauses" />
+                  </button>
+                </th>
+                <th class="clause-table-cell header-background"><!-- Grouping indicator --></th>
+                <th class="clause-table-cell header-background and-or-header">
+                  <span data-bind="text: andLabel"></span>
+                </th>
+                <th class="clause-table-cell header-background field-header">
+                  <span data-bind="text: fieldLabel"></span>
+                </th>
+                <th class="clause-table-cell header-background type-header">
+                  <span data-bind="text: dataTypeLabel"></span>
+                </th>
+                <th class="clause-table-cell header-background operator-header">
+                  <span data-bind="text: operatorLabel"></span>
+                </th>
+                <th class="clause-table-cell header-background value-header">
+                  <span data-bind="text: valueLabel"></span>
+                </th>
+              </tr>
+            </thead>
+            <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"
+        >
+          <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>
+        </div>
+      </div>
+    </div>
+    <!-- Tables Query Tab Query Helper - End-->
+    <!-- Tables Query Tab Advanced Options - Start-->
+    <div class="advanced-options-panel">
+      <div class="advanced-heading">
+        <span
+          class="advanced-title"
+          role="button"
+          data-bind="click:toggleAdvancedOptions, event: { keydown: ontoggleAdvancedOptionsKeyDown }, attr:{ 'aria-expanded': isExpanded() ? 'true' : 'false' }"
+          tabindex="0"
+        >
+          <!-- ko template: { ifnot: isExpanded} -->
+          <div class="themed-images" type="text/html" id="ExpandChevronRight" data-bind="hasFocus: focusExpandIcon">
+            <img class="imgiconwidth expand-triangle expand-triangle-right" src="/Triangle-right.svg" alt="toggle" />
+          </div>
+          <!-- /ko -->
+          <!-- ko template: { if: isExpanded} -->
+          <div class="themed-images" type="text/html" id="ExpandChevronDown">
+            <img class="imgiconwidth expand-triangle" src="/Triangle-down.svg" alt="toggle" />
+          </div>
+          <!-- /ko -->
+          <span>Advanced Options</span>
+        </span>
+      </div>
+      <div class="advanced-options" data-bind="visible: isExpanded">
+        <div class="top">
+          <span>Show top results:</span>
+          <input
+            class="top-input"
+            type="number"
+            data-bind="hasFocus: focusTopResult, textInput: topValue, attr: { title: topValueLimitMessage }"
+            role="textbox"
+            aria-label="Show top results"
+          />
+          <div role="alert" aria-atomic="true" class="inline-div" data-bind="visible: isExceedingLimit">
+            <img class="advanced-options-icon" src="/QueryBuilder/StatusWarning_16x.png" />
+            <span data-bind="text: topValueLimitMessage"></span>
+          </div>
+        </div>
+        <div class="select">
+          <span> Select fields for query: </span>
+          <div data-bind="visible: isSelected">
+            <img class="advanced-options-icon" src="/QueryBuilder/QueryInformation_16x.png" />
+            <span class="select-options-text" data-bind="text: selectMessage" />
+          </div>
+          <a
+            class="select-options-link"
+            data-bind="click: selectQueryOptions, event: { keydown: onselectQueryOptionsKeyDown }"
+            tabindex="0"
+            role="link"
+          >
+            <span>Choose Columns... </span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- Tables Query Tab Advanced Options - End-->
+  </div>
+  <!-- Tables Query Tab Query Builder - End-->
+  <div
+    class="tablesQueryTab tableContainer"
+    data-bind="with: tableEntityListViewModel, attr: {
+                                                id: tableEntityListViewModel.id
+                                            }"
+  >
+    <!-- Keyboard navigation - tabindex is required to make the table focusable. -->
+    <table
+      id="storageTable"
+      class="storage azure-table show-gridlines"
+      tabindex="0"
+      data-bind="tableSource: items, tableSelection: selected"
+    ></table>
+  </div>
+</div>
+
+<!-- Script for each clause in the tables query builder -->
+<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"
+        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"
+        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>
+    </td>
+    <td class="clause-table-cell group-control-column">
+      <input type="checkbox" aria-label="And/Or" data-bind="checked: checkedForGrouping" />
+    </td>
+    <td>
+      <table class="group-indicator-table">
+        <tbody>
+          <tr
+            data-bind="template: { name: 'groupIndicator-template', foreach: $parent.getClauseGroupViewModels($data), as: 'gi' }"
+          ></tr>
+        </tbody>
+      </table>
+    </td>
+    <td class="clause-table-cell and-or-column">
+      <select
+        class="clause-table-field and-or-column"
+        data-bind="hasFocus: isAndOrFocused, options: $parent.clauseRules, value: and_or, visible: canAnd, attr:{ 'aria-label': and_or }"
+      ></select>
+    </td>
+    <td class="clause-table-cell field-column" data-bind="click: $parent.updateColumnOptions">
+      <select
+        class="clause-table-field field-column"
+        data-bind="options: $parent.columnOptions, value: field, attr:{ 'aria-label': field }"
+      ></select>
+    </td>
+    <td class="clause-table-cell type-column">
+      <select
+        class="clause-table-field type-column"
+        data-bind="
+                  options: $parent.edmTypes,
+                  enable: isTypeEditable,
+                  value: type,
+                  css: {'query-builder-isDisabled': !isTypeEditable()},
+                  attr: { 'aria-label': type }"
+      ></select>
+    </td>
+    <td class="clause-table-cell operator-column">
+      <select
+        class="clause-table-field operator-column"
+        data-bind="
+                  options: $parent.operators,
+                  enable: isOperaterEditable,
+                  value: operator,
+                  css: {'query-builder-isDisabled': !isOperaterEditable()},
+                  attr: { 'aria-label': operator }"
+      ></select>
+    </td>
+    <td class="clause-table-cell value-column">
+      <!-- ko template: {if: isValue} -->
+      <input
+        type="text"
+        class="clause-table-field value-column"
+        type="search"
+        data-bind="textInput: value, attr: {'aria-label': $parent.valueLabel}"
+      />
+      <!-- /ko -->
+
+      <!-- ko template: {if: isTimestamp} -->
+      <select
+        class="clause-table-field time-column"
+        data-bind="options: $parent.timeOptions, value: timeValue"
+      ></select>
+      <!-- /ko -->
+
+      <!-- ko template: {if: isCustomLastTimestamp} -->
+      <input class="clause-table-field time-column" data-bind="value: customTimeValue, click: customTimestampDialog" />
+      <!-- /ko -->
+      <!-- ko template: {if: isCustomRangeTimestamp} -->
+      <input class="clause-table-field time-column" type="datetime-local" step="1" data-bind="value: customTimeValue" />
+      <!-- /ko -->
+    </td>
+  </tr>
+</script>
+
+<!-- Script for each clause group in the tables query builder -->
+<script type="text/html" id="groupIndicator-template">
+  <td
+    class="group-indicator-column"
+    data-bind="style: {backgroundColor: gi.backgroundColor, borderTop: gi.showTopBorder.peek() ? 'solid thin #CCCCCC' : 'none', borderLeft: gi.showLeftBorder.peek() ? 'solid thin #CCCCCC' : 'none', borderBottom: gi.showBottomBorder.peek() ? 'solid thin #CCCCCC' : gi.borderBackgroundColor}"
+  >
+    <!-- ko template: {if: gi.canUngroup} -->
+    <button type="button" data-bind="click: ungroupClauses, attr: {title: ungroupClausesLabel}">
+      <img src="/QueryBuilder/UngroupClause_16x.png" alt="Ungroup clauses" />
+    </button>
+    <!-- /ko -->
+  </td>
+</script>

src/Explorer/Tabs/QueryTablesTab.tsx

@@ -0,0 +1,285 @@
+import * as ko from "knockout";
+import React from "react";
+import AddEntityIcon from "../../../images/AddEntity.svg";
+import DeleteEntitiesIcon from "../../../images/DeleteEntities.svg";
+import EditEntityIcon from "../../../images/Edit-entity.svg";
+import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
+import QueryBuilderIcon from "../../../images/Query-Builder.svg";
+import QueryTextIcon from "../../../images/Query-Text.svg";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { useSidePanel } from "../../hooks/useSidePanel";
+import { userContext } from "../../UserContext";
+import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
+import Explorer from "../Explorer";
+import { AddTableEntityPanel } from "../Panes/Tables/AddTableEntityPanel";
+import { EditTableEntityPanel } from "../Panes/Tables/EditTableEntityPanel";
+import TableCommands from "../Tables/DataTable/TableCommands";
+import TableEntityListViewModel from "../Tables/DataTable/TableEntityListViewModel";
+import QueryViewModel from "../Tables/QueryBuilder/QueryViewModel";
+import { CassandraAPIDataClient, TableDataClient } from "../Tables/TableDataClient";
+import template from "./QueryTablesTab.html";
+import TabsBase from "./TabsBase";
+
+// Will act as table explorer class
+export default class QueryTablesTab extends TabsBase {
+  public readonly html = template;
+  public collection: ViewModels.Collection;
+  public tableEntityListViewModel = ko.observable<TableEntityListViewModel>();
+  public queryViewModel = ko.observable<QueryViewModel>();
+  public tableCommands: TableCommands;
+  public tableDataClient: TableDataClient;
+
+  public queryText = ko.observable("PartitionKey eq 'partitionKey1'"); // Start out with an example they can modify
+  public selectedQueryText = ko.observable("").extend({ notify: "always" });
+
+  public executeQueryButton: ViewModels.Button;
+  public addEntityButton: ViewModels.Button;
+  public editEntityButton: ViewModels.Button;
+  public deleteEntityButton: ViewModels.Button;
+  public queryBuilderButton: ViewModels.Button;
+  public queryTextButton: ViewModels.Button;
+  public container: Explorer;
+
+  constructor(options: ViewModels.TabOptions) {
+    super(options);
+
+    this.container = options.collection && options.collection.container;
+    this.tableCommands = new TableCommands(this.container);
+    this.tableDataClient = this.container.tableDataClient;
+    this.tableEntityListViewModel(new TableEntityListViewModel(this.tableCommands, this));
+    this.tableEntityListViewModel().queryTablesTab = this;
+    this.queryViewModel(new QueryViewModel(this));
+    const sampleQuerySubscription = this.tableEntityListViewModel().items.subscribe(() => {
+      if (this.tableEntityListViewModel().items().length > 0 && userContext.apiType === "Tables") {
+        this.queryViewModel().queryBuilderViewModel().setExample();
+      }
+      sampleQuerySubscription.dispose();
+    });
+
+    this.executeQueryButton = {
+      enabled: ko.computed<boolean>(() => {
+        return true;
+      }),
+
+      visible: ko.computed<boolean>(() => {
+        return true;
+      }),
+    };
+
+    this.queryBuilderButton = {
+      enabled: ko.computed<boolean>(() => {
+        return true;
+      }),
+
+      visible: ko.computed<boolean>(() => {
+        return true;
+      }),
+
+      isSelected: ko.computed<boolean>(() => {
+        return this.queryViewModel() ? this.queryViewModel().isHelperActive() : false;
+      }),
+    };
+
+    this.queryTextButton = {
+      enabled: ko.computed<boolean>(() => {
+        return true;
+      }),
+
+      visible: ko.computed<boolean>(() => {
+        return true;
+      }),
+
+      isSelected: ko.computed<boolean>(() => {
+        return this.queryViewModel() ? this.queryViewModel().isEditorActive() : false;
+      }),
+    };
+
+    this.addEntityButton = {
+      enabled: ko.computed<boolean>(() => {
+        return true;
+      }),
+
+      visible: ko.computed<boolean>(() => {
+        return true;
+      }),
+    };
+
+    this.editEntityButton = {
+      enabled: ko.computed<boolean>(() => {
+        return this.tableCommands.isEnabled(
+          TableCommands.editEntityCommand,
+          this.tableEntityListViewModel().selected()
+        );
+      }),
+
+      visible: ko.computed<boolean>(() => {
+        return true;
+      }),
+    };
+
+    this.deleteEntityButton = {
+      enabled: ko.computed<boolean>(() => {
+        return this.tableCommands.isEnabled(
+          TableCommands.deleteEntitiesCommand,
+          this.tableEntityListViewModel().selected()
+        );
+      }),
+
+      visible: ko.computed<boolean>(() => {
+        return true;
+      }),
+    };
+
+    this.buildCommandBarOptions();
+  }
+
+  public onAddEntityClick = (): void => {
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Add Table Row",
+        <AddTableEntityPanel
+          tableDataClient={this.tableDataClient}
+          queryTablesTab={this}
+          tableEntityListViewModel={this.tableEntityListViewModel()}
+          cassandraApiClient={new CassandraAPIDataClient()}
+        />,
+        "700px"
+      );
+  };
+
+  public onEditEntityClick = (): void => {
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Edit Table Entity",
+        <EditTableEntityPanel
+          tableDataClient={this.tableDataClient}
+          queryTablesTab={this}
+          tableEntityListViewModel={this.tableEntityListViewModel()}
+          cassandraApiClient={new CassandraAPIDataClient()}
+        />,
+        "700px"
+      );
+  };
+
+  public onDeleteEntityClick = (): void => {
+    this.tableCommands.deleteEntitiesCommand(this.tableEntityListViewModel());
+  };
+
+  public onActivate(): void {
+    super.onActivate();
+    const columns =
+      !!this.tableEntityListViewModel() &&
+      !!this.tableEntityListViewModel().table &&
+      this.tableEntityListViewModel().table.columns;
+    if (columns) {
+      columns.adjust();
+      $(window).resize();
+    }
+  }
+
+  protected getTabsButtons(): CommandButtonComponentProps[] {
+    const buttons: CommandButtonComponentProps[] = [];
+    if (this.queryBuilderButton.visible()) {
+      const label = userContext.apiType === "Cassandra" ? "CQL Query Builder" : "Query Builder";
+      buttons.push({
+        iconSrc: QueryBuilderIcon,
+        iconAlt: label,
+        onCommandClick: () => this.queryViewModel().selectHelper(),
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.queryBuilderButton.enabled(),
+        isSelected: this.queryBuilderButton.isSelected(),
+      });
+    }
+
+    if (this.queryTextButton.visible()) {
+      const label = userContext.apiType === "Cassandra" ? "CQL Query Text" : "Query Text";
+      buttons.push({
+        iconSrc: QueryTextIcon,
+        iconAlt: label,
+        onCommandClick: () => this.queryViewModel().selectEditor(),
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.queryTextButton.enabled(),
+        isSelected: this.queryTextButton.isSelected(),
+      });
+    }
+
+    if (this.executeQueryButton.visible()) {
+      const label = "Run Query";
+      buttons.push({
+        iconSrc: ExecuteQueryIcon,
+        iconAlt: label,
+        onCommandClick: () => this.queryViewModel().runQuery(),
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.executeQueryButton.enabled(),
+      });
+    }
+
+    if (this.addEntityButton.visible()) {
+      const label = userContext.apiType === "Cassandra" ? "Add Row" : "Add Entity";
+      buttons.push({
+        iconSrc: AddEntityIcon,
+        iconAlt: label,
+        onCommandClick: this.onAddEntityClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: true,
+        disabled: !this.addEntityButton.enabled(),
+      });
+    }
+
+    if (this.editEntityButton.visible()) {
+      const label = userContext.apiType === "Cassandra" ? "Edit Row" : "Edit Entity";
+      buttons.push({
+        iconSrc: EditEntityIcon,
+        iconAlt: label,
+        onCommandClick: this.onEditEntityClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: true,
+        disabled: !this.editEntityButton.enabled(),
+      });
+    }
+
+    if (this.deleteEntityButton.visible()) {
+      const label = userContext.apiType === "Cassandra" ? "Delete Rows" : "Delete Entities";
+      buttons.push({
+        iconSrc: DeleteEntitiesIcon,
+        iconAlt: label,
+        onCommandClick: this.onDeleteEntityClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: true,
+        disabled: !this.deleteEntityButton.enabled(),
+      });
+    }
+    return buttons;
+  }
+
+  protected buildCommandBarOptions(): void {
+    ko.computed(() =>
+      ko.toJSON([
+        this.queryBuilderButton.visible,
+        this.queryBuilderButton.enabled,
+        this.queryTextButton.visible,
+        this.queryTextButton.enabled,
+        this.executeQueryButton.visible,
+        this.executeQueryButton.enabled,
+        this.addEntityButton.visible,
+        this.addEntityButton.enabled,
+        this.editEntityButton.visible,
+        this.editEntityButton.enabled,
+        this.deleteEntityButton.visible,
+        this.deleteEntityButton.enabled,
+      ])
+    ).subscribe(() => this.updateNavbarWithTabsButtons());
+    this.updateNavbarWithTabsButtons();
+  }
+}

src/Explorer/Tabs/QueryTablesTab/QueryTableEntityClause.tsx

@@ -1,169 +0,0 @@
-import {
-  Checkbox,
-  Dropdown,
-  IDropdownOption,
-  IDropdownStyles,
-  IImageProps,
-  Image,
-  IStackTokens,
-  Stack,
-  TextField,
-  TooltipHost,
-} from "@fluentui/react";
-import React, { FunctionComponent } from "react";
-import AddIcon from "../../../../images/Add-property.svg";
-import CancelIcon from "../../../../images/Entity_cancel.svg";
-import { userContext } from "../../../UserContext";
-import { IOption } from "./QueryTableTabUtils";
-const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 100 } };
-
-export interface IQueryTableEntityClauseProps {
-  index: number;
-  entityValue: string;
-  entityValuePlaceHolder?: string;
-  selectedOperator: string;
-  selectedOperation: string;
-  operatorOptions: IOption[];
-  operationOptions: IOption[];
-  isQueryTableEntityChecked: boolean;
-  selectedField: string;
-  fieldOptions: IOption[];
-  entityTypeOptions: IOption[];
-  selectedEntityType: string;
-  isTimeStampSelected?: boolean;
-  selectedTimestamp: string;
-  timestampOptions: IOption[];
-  onAddNewClause?: () => void;
-  onDeleteClause?: () => void;
-  onQueryTableEntityCheck: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => void;
-  onDropdownChange: (selectedOption: IDropdownOption, selectedOptionType: string) => void;
-  onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
-  onAddNewClauseKeyDown?: (ev: React.KeyboardEvent<HTMLImageElement>) => void;
-  onDeleteCaluseKeyDown?: (ev: React.KeyboardEvent<HTMLImageElement>) => void;
-}
-
-export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClauseProps> = ({
-  index,
-  entityValue,
-  entityValuePlaceHolder,
-  selectedOperator,
-  operatorOptions,
-  selectedField,
-  isQueryTableEntityChecked,
-  fieldOptions,
-  entityTypeOptions,
-  selectedEntityType,
-  selectedOperation,
-  operationOptions,
-  isTimeStampSelected,
-  selectedTimestamp,
-  timestampOptions,
-  onQueryTableEntityCheck,
-  onAddNewClause,
-  onDeleteClause,
-  onDropdownChange,
-  onEntityValueChange,
-  onAddNewClauseKeyDown,
-  onDeleteCaluseKeyDown,
-}: IQueryTableEntityClauseProps): JSX.Element => {
-  const cancelImageProps: IImageProps = {
-    className: "querybuilder-cancelImg",
-  };
-
-  const addImageProps: IImageProps = {
-    className: "querybuilder-addpropertyImg",
-  };
-
-  const sectionStackTokens: IStackTokens = { childrenGap: 12 };
-
-  const validateEntityTypeOption = (): boolean => {
-    if (userContext.apiType === "Cassandra") {
-      return true;
-    } else if (selectedField === "PartitionKey" || selectedField === "RowKey" || selectedField === "Timestamp") {
-      return true;
-    }
-    return false;
-  };
-
-  return (
-    <>
-      <Stack horizontal tokens={sectionStackTokens}>
-        <TooltipHost content="Add new clause" id="addNewClause">
-          <Image
-            {...addImageProps}
-            src={AddIcon}
-            alt="Add new clause"
-            id="addNewClause"
-            onClick={onAddNewClause}
-            onKeyDown={onAddNewClauseKeyDown}
-            tabIndex={0}
-          />
-        </TooltipHost>
-        <TooltipHost content="Delete clause" id="deleteClause">
-          <Image
-            {...cancelImageProps}
-            src={CancelIcon}
-            alt="delete clause"
-            id="deleteClause"
-            onClick={onDeleteClause}
-            onKeyDown={onDeleteCaluseKeyDown}
-            tabIndex={0}
-          />
-        </TooltipHost>
-        <Checkbox checked={isQueryTableEntityChecked} onChange={onQueryTableEntityCheck} />
-        <Dropdown
-          style={{ visibility: index > 0 ? "visible" : "hidden" }}
-          selectedKey={selectedOperation}
-          onChange={(_event: React.FormEvent<HTMLElement>, selectedOption: IDropdownOption) =>
-            onDropdownChange(selectedOption, "selectedOperation")
-          }
-          options={operationOptions}
-          styles={dropdownStyles}
-        />
-        <Dropdown
-          selectedKey={selectedField}
-          onChange={(_event: React.FormEvent<HTMLElement>, selectedOption: IDropdownOption) =>
-            onDropdownChange(selectedOption, "selectedField")
-          }
-          options={fieldOptions}
-          styles={dropdownStyles}
-        />
-        <Dropdown
-          selectedKey={selectedEntityType}
-          onChange={(_event: React.FormEvent<HTMLElement>, selectedOption: IDropdownOption) =>
-            onDropdownChange(selectedOption, "selectedEntityType")
-          }
-          options={entityTypeOptions}
-          disabled={validateEntityTypeOption()}
-          styles={dropdownStyles}
-        />
-        <Dropdown
-          selectedKey={selectedOperator}
-          onChange={(_event: React.FormEvent<HTMLElement>, selectedOption: IDropdownOption) =>
-            onDropdownChange(selectedOption, "selectedOperator")
-          }
-          options={operatorOptions}
-          styles={dropdownStyles}
-        />
-        {isTimeStampSelected ? (
-          <Dropdown
-            selectedKey={selectedTimestamp}
-            onChange={(_event: React.FormEvent<HTMLElement>, selectedOption: IDropdownOption) =>
-              onDropdownChange(selectedOption, "selectedTimestamp")
-            }
-            options={timestampOptions}
-            styles={dropdownStyles}
-          />
-        ) : (
-          <TextField
-            autoFocus
-            placeholder={entityValuePlaceHolder}
-            value={entityValue}
-            onChange={onEntityValueChange}
-            required
-          />
-        )}
-      </Stack>
-    </>
-  );
-};

src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx

@@ -1,104 +0,0 @@
-import { IColumn, Selection } from "@fluentui/react";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import Explorer from "../../Explorer";
-import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel";
-import * as Entities from "../../Tables/Entities";
-import ClauseGroup from "../../Tables/QueryBuilder/ClauseGroup";
-import QueryViewModel from "../../Tables/QueryBuilder/QueryViewModel";
-import TabsBase from "../TabsBase";
-import NewQueryTablesTab from "./QueryTablesTab";
-export interface Button {
-  visible: boolean;
-  enabled: boolean;
-  isSelected?: boolean;
-}
-
-export interface IOption {
-  key: string;
-  text: string;
-}
-export interface IDocument {
-  partitionKey: string;
-  rowKey: string;
-  timeStamp: string;
-}
-export interface IQueryTablesTabComponentProps {
-  tabKind: ViewModels.CollectionTabKind;
-  title: string;
-  tabPath: string;
-  collection: ViewModels.CollectionBase;
-  node: ViewModels.TreeNode;
-  onLoadStartKey: number;
-  container: Explorer;
-  tabsBaseInstance: TabsBase;
-  queryTablesTab: NewQueryTablesTab;
-}
-
-export interface IQueryTablesTabComponentStates {
-  tableEntityListViewModel: TableEntityListViewModel;
-  queryViewModel: QueryViewModel;
-  queryText: string;
-  selectedQueryText: string;
-  executeQueryButton: Button;
-  queryBuilderButton: Button;
-  queryTextButton: Button;
-  addEntityButton: Button;
-  editEntityButton: Button;
-  deleteEntityButton: Button;
-  isHelperActive: boolean;
-  columns: IColumn[];
-  items: IDocument[];
-  isExpanded: boolean;
-  isEditorActive: boolean;
-  selectedItems: Entities.ITableEntity[];
-  isValue: boolean;
-  isTimestamp: boolean;
-  isCustomLastTimestamp: boolean;
-  isCustomRangeTimestamp: boolean;
-  operators: string[];
-  selectMessage: string;
-  queryTableRows: IQueryTableRowsType[];
-  originalItems: IDocument[];
-  rowSelected: boolean;
-  selection: Selection;
-  entities: Entities.ITableEntity[];
-  headers: string[];
-  isLoading: boolean;
-  queryErrorMessage: string;
-  hasQueryError: boolean;
-  currentPage: number;
-  currentStartIndex: number;
-  fromDocument: number;
-  toDocument: number;
-  selectedItem: number;
-}
-
-export interface IQueryTableRowsType {
-  isQueryTableEntityChecked: boolean;
-  isTimeStampSelected: boolean;
-  selectedOperator: string;
-  selectedField: string;
-  entityValue: string;
-  selectedEntityType: string;
-  selectedOperation: string;
-  selectedTimestamp: string;
-  fieldOptions: IOption[];
-  operatorOptions: IOption[];
-  entityTypeOptions: IOption[];
-  operationOptions: IOption[];
-  timestampOptions: IOption[];
-  id: string;
-  clauseGroup: ClauseGroup;
-  isLocal: boolean;
-  isTimestamp: boolean;
-  isValue: boolean;
-  isCustomRangeTimestamp: boolean;
-  customTimeValue: string;
-  timeValue: string;
-}
-
-export const getformattedOptions = (options: Array<string>): IOption[] => {
-  return options.map((option) => {
-    return { key: option, text: option };
-  });
-};

src/Explorer/Tabs/QueryTablesTab/QueryTablesTab.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import Explorer from "../../Explorer";
-import TableCommands from "../../Tables/DataTable/TableCommands";
-import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel";
-import TabsBase from "../TabsBase";
-import QueryTablesTabComponent from "./QueryTablesTabComponent";
-import { IQueryTablesTabComponentProps } from "./QueryTableTabUtils";
-
-interface QueryTablesTabProps {
-  container: Explorer;
-}
-
-class NewQueryTablesTab extends TabsBase {
-  public iQueryTablesTabCompProps: IQueryTablesTabComponentProps;
-  public collection: ViewModels.Collection;
-  public tableEntityListViewModel: TableEntityListViewModel;
-  public tableCommands: TableCommands;
-  public container: Explorer;
-
-  constructor(options: ViewModels.TabOptions, props: QueryTablesTabProps) {
-    super(options);
-    this.container = props.container;
-    this.tableCommands = new TableCommands(props.container);
-    this.tableEntityListViewModel = new TableEntityListViewModel(this.tableCommands, this);
-    this.iQueryTablesTabCompProps = {
-      tabKind: options.tabKind,
-      title: options.title,
-      tabPath: options.tabPath,
-      collection: options.collection,
-      node: options.node,
-      onLoadStartKey: options.onLoadStartKey,
-      container: props.container,
-      tabsBaseInstance: this,
-      queryTablesTab: this,
-    };
-  }
-  public render(): JSX.Element {
-    return <QueryTablesTabComponent {...this.iQueryTablesTabCompProps} />;
-  }
-}
-
-export default NewQueryTablesTab;

src/Explorer/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import ko from "knockout";
-import React, { MutableRefObject, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import loadingIcon from "../../../images/circular_loader_black_16x16.gif";
 import errorIcon from "../../../images/close-black.svg";
 import { useObservable } from "../../hooks/useObservable";
@@ -32,13 +32,7 @@ export const Tabs = (): JSX.Element => {
 
 function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
   const [hovering, setHovering] = useState(false);
-  const focusTab = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
 
-  useEffect(() => {
-    if (active && focusTab.current) {
-      focusTab.current.focus();
-    }
-  });
   return (
     <li
       onMouseOver={() => setHovering(true)}
@@ -52,7 +46,6 @@ function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
       aria-controls={tab.tabId}
       tabIndex={0}
       role="tab"
-      ref={focusTab}
     >
       <span className="tabNavContentContainer">
         <a data-toggle="tab" href={"#" + tab.tabId} tabIndex={-1}>

src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx

@@ -291,7 +291,7 @@ export default class UserDefinedFunctionTabContent extends Component<
           language={"javascript"}
           content={udfBody}
           isReadOnly={false}
-          ariaLabel={"User defined function body"}
+          ariaLabel={"Graph JSON"}
           onContentChanged={this.handleUdfBodyChange}
         />
       </div>

src/Explorer/Tree/Collection.ts

@@ -32,8 +32,7 @@ import MongoDocumentsTab from "../Tabs/MongoDocumentsTab";
 import { NewMongoQueryTab } from "../Tabs/MongoQueryTab/MongoQueryTab";
 import { NewMongoShellTab } from "../Tabs/MongoShellTab/MongoShellTab";
 import { NewQueryTab } from "../Tabs/QueryTab/QueryTab";
-// import QueryTablesTab from "../Tabs/QueryTablesTab";
-import NewQueryTablesTab from "../Tabs/QueryTablesTab/QueryTablesTab";
+import QueryTablesTab from "../Tabs/QueryTablesTab";
 import { CollectionSettingsTabV2 } from "../Tabs/SettingsTabV2";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
@@ -392,13 +391,13 @@ export default class Collection implements ViewModels.Collection {
       });
     }
 
-    const queryTablesTabs: NewQueryTablesTab[] = useTabs
+    const queryTablesTabs: QueryTablesTab[] = useTabs
       .getState()
       .getTabs(
         ViewModels.CollectionTabKind.QueryTables,
         (tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
-      ) as NewQueryTablesTab[];
-    let queryTablesTab: NewQueryTablesTab = queryTablesTabs && queryTablesTabs[0];
+      ) as QueryTablesTab[];
+    let queryTablesTab: QueryTablesTab = queryTablesTabs && queryTablesTabs[0];
 
     if (queryTablesTab) {
       useTabs.getState().activateTab(queryTablesTab);
@@ -416,57 +415,14 @@ export default class Collection implements ViewModels.Collection {
         tabTitle: title,
       });
 
-      queryTablesTab = new NewQueryTablesTab(
-        {
-          tabKind: ViewModels.CollectionTabKind.QueryTables,
-          title: title,
-          tabPath: "",
-          collection: this,
-          node: this,
-          onLoadStartKey: startKey,
-        },
-        {
-          container: this.container,
-        }
-      );
-
-      // const queryTablesTabs: QueryTablesTab[] = useTabs
-      //   .getState()
-      //   .getTabs(
-      //     ViewModels.CollectionTabKind.QueryTables,
-      //     (tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
-      //   ) as QueryTablesTab[];
-      // let queryTablesTab: QueryTablesTab = queryTablesTabs && queryTablesTabs[0];
-
-      // if (queryTablesTab) {
-      //   useTabs.getState().activateTab(queryTablesTab);
-      // } else {
-      //   this.documentIds([]);
-      //   let title = `Entities`;
-      //   if (userContext.apiType === "Cassandra") {
-      //     title = `Rows`;
-      //   }
-      //   const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
-      //     databaseName: this.databaseId,
-      //     collectionName: this.id(),
-
-      //     dataExplorerArea: Constants.Areas.Tab,
-      //     tabTitle: title,
-      //   });
-
-      //   queryTablesTab = new QueryTablesTab(
-      //     {
-      //       tabKind: ViewModels.CollectionTabKind.QueryTables,
-      //       title: title,
-      //       tabPath: "",
-      //       collection: this,
-      //       node: this,
-      //       onLoadStartKey: startKey,
-      //     },
-      //     {
-      //       container: this.container,
-      //     }
-      //   );
+      queryTablesTab = new QueryTablesTab({
+        tabKind: ViewModels.CollectionTabKind.QueryTables,
+        title: title,
+        tabPath: "",
+        collection: this,
+        node: this,
+        onLoadStartKey: startKey,
+      });
 
       useTabs.getState().activateNewTab(queryTablesTab);
     }

src/Explorer/Tree/ResourceTree.tsx

@@ -11,7 +11,7 @@ import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
 import PublishIcon from "../../../images/notebook/publish_content.svg";
 import RefreshIcon from "../../../images/refresh-cosmos.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
-import { Areas, ConnectionStatusType, Notebook } from "../../Common/Constants";
+import { Areas, Notebook } from "../../Common/Constants";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -128,15 +128,17 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
         notebooksTree.children.push(buildGalleryNotebooksTree());
       }
 
-      if (myNotebooksContentRoot && useNotebook.getState().connectionInfo.status == ConnectionStatusType.Connected) {
+      if (myNotebooksContentRoot) {
         notebooksTree.children.push(buildMyNotebooksTree());
       }
+
       if (container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
         // collapse all other notebook nodes
         notebooksTree.children.forEach((node) => (node.isExpanded = false));
-        notebooksTree.children.push(buildGitHubNotebooksTree(true));
+        notebooksTree.children.push(buildGitHubNotebooksTree());
       }
     }
+
     return notebooksTree;
   };
 
@@ -176,7 +178,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
     return myNotebooksTree;
   };
 
-  const buildGitHubNotebooksTree = (isConnected: boolean): TreeNode => {
+  const buildGitHubNotebooksTree = (): TreeNode => {
     const gitHubNotebooksTree: TreeNode = buildNotebookDirectoryNode(
       gitHubNotebooksContentRoot,
       (item: NotebookContentItem) => {
@@ -188,7 +190,8 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       },
       true
     );
-    const manageGitContextMenu: TreeNodeMenuItem[] = [
+
+    gitHubNotebooksTree.contextMenu = [
       {
         label: "Manage GitHub settings",
         onClick: () =>
@@ -213,23 +216,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
         },
       },
     ];
-    const connectGitContextMenu: TreeNodeMenuItem[] = [
-      {
-        label: "Connect to GitHub",
-        onClick: () =>
-          useSidePanel
-            .getState()
-            .openSidePanel(
-              "Connect to GitHub",
-              <GitHubReposPanel
-                explorer={container}
-                gitHubClientProp={container.notebookManager.gitHubClient}
-                junoClientProp={container.notebookManager.junoClient}
-              />
-            ),
-      },
-    ];
-    gitHubNotebooksTree.contextMenu = isConnected ? manageGitContextMenu : connectGitContextMenu;
+
     gitHubNotebooksTree.isExpanded = true;
     gitHubNotebooksTree.isAlphaSorted = true;