defect1722595 Bug 1722595: [Screen readers Azure Cosmos DB Scale& Settings: Screen reader (NVDA) is not announcing status message which is displayed on the screen after radio button is selected under scale tab.

update snapshot
InfoTooltip changes
2026-01-26 13:14:04 +00:00 · 2022-12-23 18:39:13 +05:30 · 2022-12-23 18:16:16 +05:30 · 2022-12-23 17:51:17 +05:30 · 2022-12-23 17:17:04 +05:30 · 2022-12-23 17:14:03 +05:30
38 changed files with 506 additions and 455 deletions
--- a/less/TableStyles/queryBuilder.less
+++ b/less/TableStyles/queryBuilder.less
@@ -3,337 +3,337 @@
@import "../Common/Constants";
 .query-panel {
-    display: table;
+  display: table;
-    display: none;
+  display: none;
-    width: 100%;
+  width: 100%;
-    border-top: 1px solid #DDDDDD;
+  border-top: 1px solid #dddddd;
-    /*[{environment-commandbar-toolbar-separator}]*/
+  /*[{environment-commandbar-toolbar-separator}]*/
-    background-color: #ffffff;
+  background-color: #ffffff;
-    /*[{plugin-background-color}]*/
+  /*[{plugin-background-color}]*/
-    padding: 2px 0px 0px 2px;
+  padding: 2px 0px 0px 2px;
-    resize: vertical;
+  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;
+  display: table;
-    top: 0px;
+  top: 0px;
-    -webkit-transition: top 2s linear;
+  -webkit-transition: top 2s linear;
-    -ms-transition: top 2s linear;
+  -ms-transition: top 2s linear;
-    -moz-transition: top 2s linear;
+  -moz-transition: top 2s linear;
-    -khtml-transition: top 2s linear;
+  -khtml-transition: top 2s linear;
-    -o-transition: top 2s linear;
+  -o-transition: top 2s linear;
-    transition: top 2s linear;
+  transition: top 2s linear;
 }
 .query-builder {
-    width:100%;
+  width: 100%;
-    padding-right: @DefaultSpace;
+  padding-right: @DefaultSpace;
-    border-bottom: 1px solid @BaseMedium;
+  border-bottom: 1px solid @BaseMedium;
-    margin-bottom: @DefaultSpace;
+  margin-bottom: @DefaultSpace;
 }
 .query-builder-toolbar {
-    background-color: #ffffff;
+  background-color: #ffffff;
-    /*[{plugin-background-color}]*/
+  /*[{plugin-background-color}]*/
-    min-width: 600px;
+  min-width: 600px;
-    height: 30px;
+  height: 30px;
-    border-bottom: 1px solid #DDDDDD;
+  border-bottom: 1px solid #dddddd;
-    /*[1px solid {environment-commandbar-toolbar-separator}]*/
+  /*[1px solid {environment-commandbar-toolbar-separator}]*/
 }
 .query-builder-toolbar .query-toolbar-group {
-    display: inline-block;
+  display: inline-block;
-    height: 24px;
+  height: 24px;
-    margin: 2px 0px;
+  margin: 2px 0px;
-    vertical-align: middle;
+  vertical-align: middle;
 }
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button {
-    min-width: 0px;
+  min-width: 0px;
-    padding: 0px;
+  padding: 0px;
-    margin-left: 2px;
+  margin-left: 2px;
-    background-color: transparent;
+  background-color: transparent;
-    border: solid transparent;
+  border: solid transparent;
 }
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button:active {
-    outline: 2px solid dodgerblue;
+  outline: 2px solid dodgerblue;
-    /*[2px solid {common-common-controls-button-border-hover}]*/
+  /*[2px solid {common-common-controls-button-border-hover}]*/
 }
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button:hover {
-    background-color: #CCCEDB;
+  background-color: #cccedb;
-    /*[{common-controls-button-hover-background}]*/
+  /*[{common-controls-button-hover-background}]*/
 }
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button.active {
-    background-color: #E6E7ED;
+  background-color: #e6e7ed;
-    /*[{common-controls-inner-tab-active-background}]*/
+  /*[{common-controls-inner-tab-active-background}]*/
-    outline: none
+  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;
+  background-color: #ffffff;
-    /*[{common-controls-button-disabled-background}]*/
+  /*[{common-controls-button-disabled-background}]*/
-    background: transparent;
+  background: transparent;
-    border: 1px solid transparent;
+  border: 1px solid transparent;
-    outline: none;
+  outline: none;
-    opacity: 0.4;
+  opacity: 0.4;
 }
 .tableContainer {
-    overflow: hidden;
+  overflow: hidden;
-    .flex-display();
+  .flex-display();
-    .flex-direction();
+  .flex-direction();
 }
-.tablesQueryTab{
+.tablesQueryTab {
-    padding-left: @MediumSpace;
+  padding-left: @MediumSpace;
-    width: 100%;
+  width: 100%;
-    margin-bottom:@LargeSpace;
+  margin-bottom: @LargeSpace;
 }
 .entity-error-Img {
-    width: @WarningErrorIconSize;
+  width: @WarningErrorIconSize;
-    height: @WarningErrorIconSize;
+  height: @WarningErrorIconSize;
-    margin: @DefaultSpace 0px 0px @SmallSpace;
+  margin: @DefaultSpace 0px 0px @SmallSpace;
 }
 .query-editor-panel {
-    margin-right: 16px;
+  margin-right: 16px;
-    margin-left: 16px;
+  margin-left: 16px;
-    margin-top: 25px;
+  margin-top: 25px;
-    position: relative;
+  position: relative;
-    vertical-align: middle;
+  vertical-align: middle;
-    cursor: default;
+  cursor: default;
 }
 .query-editor-text {
-    width: 100%;
+  width: 100%;
-    margin: 2px;
+  margin: 2px;
-    border: solid 1px #A9ACB3;
+  border: solid 1px #a9acb3;
-    /*[{plugin-textbox-disabled-color}]*/
+  /*[{plugin-textbox-disabled-color}]*/
-    resize: none;
+  resize: none;
-    margin-top: -39px;
+  margin-top: -39px;
-    background-color: #ddd;
+  background-color: #ddd;
-    padding: 5px;
+  padding: 5px;
 }
 .error-bar {
-    padding: @LargeSpace 34px @MediumSpace 24px;
+  padding: @LargeSpace 34px @MediumSpace 24px;
 }
 .error-message {
-    background-color: @BaseLow;
+  background-color: @BaseLow;
-    padding: @DefaultSpace;
+  padding: @DefaultSpace;
-    display: inline-flex;
+  display: inline-flex;
 }
 .error-text {
-    padding-left: @MediumSpace;
+  padding-left: @MediumSpace;
 }
 .query-editor-text-invalid {
-    width: 100%;
+  width: 100%;
-    margin: 2px;
+  margin: 2px;
-    border: 1px solid #e51400;
+  border: 1px solid #e51400;
-    resize: none;
+  resize: none;
-    margin-top: -30px;
+  margin-top: -30px;
 }
 .query-editor-panel .warning-bar {
-    width: 100%;
+  width: 100%;
-    height: 20px;
+  height: 20px;
-    background-color: #ffffff;
+  background-color: #ffffff;
-    /*[{plugin-background-color}]*/
+  /*[{plugin-background-color}]*/
-    position: absolute;
+  position: absolute;
-    top: -24px;
+  top: -24px;
 }
 .query-editor-panel .warning-bar .warning-message {
-    display: inline-flex;
+  display: inline-flex;
-    padding-top: 2px;
+  padding-top: 2px;
-    vertical-align: middle;
+  vertical-align: middle;
 }
 .query-editor-panel .warning-bar .warning-message .warning-text {
-    margin-left: 2px;
+  margin-left: 2px;
 }
-.advanced-options-panel{
+.advanced-options-panel {
-    margin-bottom: @DefaultSpace;
+  margin-bottom: @DefaultSpace;
 }
 .advanced-options-panel .advanced-heading .advanced-title {
-    display: inline-flex;
+  display: inline-flex;
-    margin-left: 27px;
+  margin-left: 27px;
-    margin-top: 10px;
+  margin-top: 10px;
-    cursor: default;
+  cursor: default;
 }
 .advanced-options-panel .advanced-options {
-    margin-left: 32px;
+  margin-left: 32px;
-    margin-top: 5px;
+  margin-top: 5px;
-    border: 1px solid transparent;
+  border: 1px solid transparent;
 }
 hr {
-    margin-top: 10px;
+  margin-top: 10px;
-    margin-bottom: 12px;
+  margin-bottom: 12px;
-    border: 0;
+  border: 0;
-    border-top: 1px solid #ccc;
+  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;
+  width: 100px;
-    word-spacing: normal;
+  word-spacing: normal;
-    color: #1E1E1E;
+  color: #1e1e1e;
-    /*[{common-controls-button-foreground}]*/
+  /*[{common-controls-button-foreground}]*/
-    border: 1px solid #CCCEDB;
+  border: 1px solid #cccedb;
-    /*[1px solid {plugin-textbox-border-color}]*/
+  /*[1px solid {plugin-textbox-border-color}]*/
-    height: 20px;
+  height: 20px;
-    margin-left: 8px;
+  margin-left: 8px;
 }
 .advanced-options-panel .advanced-options .top .invalid-top {
-    color: red;
+  color: red;
 }
 .advanced-options-panel .advanced-options .select {
-    margin-top: 18px;
+  margin-top: 18px;
-    display: inline-flex;
+  display: inline-flex;
 }
 .advanced-options-icon {
-    margin-left: 2px;
+  margin-left: 2px;
-    vertical-align: sub;
+  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;
+  margin-left: 4px;
-    cursor: pointer;
+  cursor: pointer;
-    outline: none;
+  outline: none;
 }
 .query-panel .row .column-headers .Field {
-    padding-left: 95px;
+  padding-left: 95px;
-    padding-right: 0px;
+  padding-right: 0px;
-    padding-bottom: 6px;
+  padding-bottom: 6px;
 }
 .clause-table {
-    border-spacing: 0px;
+  border-spacing: 0px;
-    display: table;
+  display: table;
-    width: 100%;
+  width: 100%;
-    margin-top: -3px;
+  margin-top: -3px;
 }
 .clause-table-row {
-    display: row;
+  display: row;
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 .clause-table-cell {
-    display: table-cell;
+  display: table-cell;
-    text-align: left;
+  text-align: left;
-    vertical-align: middle;
+  vertical-align: middle;
 }
-.action-column>button,
+.action-column > button,
-.group-control-header>button,
+.group-control-header > button,
-.group-indicator-column>button {
+.group-indicator-column > button {
-    min-width: 20px;
+  min-width: 20px;
-    width: 20px;
+  width: 20px;
-    padding: 0px;
+  padding: 0px;
-    background-color: transparent;
+  background-color: transparent;
-    border-color: transparent;
+  border-color: transparent;
-    cursor: pointer;
+  cursor: pointer;
 }
-.group-control-header>button:disabled {
+.group-control-header > button:disabled {
-    min-width: 20px;
+  min-width: 20px;
-    width: 20px;
+  width: 20px;
-    padding: 0px;
+  padding: 0px;
-    background-color: transparent;
+  background-color: transparent;
-    border-color: transparent;
+  border-color: transparent;
-    outline: none;
+  outline: none;
-    opacity: 0.4;
+  opacity: 0.4;
-    cursor: default;
+  cursor: default;
 }
 .clause-table-field {
-    width: 100%;
+  width: 100%;
-    border: 1px solid #bbbbbb;
+  border: 1px solid #bbbbbb;
 }
 .clause-table-cell button {
-    height: 20px;
+  height: 20px;
 }
 .clause-table-cell input[type="checkbox"] {
-    padding: 0px;
+  padding: 0px;
-    margin-bottom: 12px;
+  margin-bottom: 12px;
 }
 .and-or-svg {
-    margin-top: -8px;
+  margin-top: -8px;
-    margin-right: -5px;
+  margin-right: -5px;
 }
 .scroll-box {
-    border-bottom: 1px transparent #DDD;
+  border-bottom: 1px transparent #ddd;
-    /*[1px solid {plugin-table-border-color}]*/
+  /*[1px solid {plugin-table-border-color}]*/
-    border-top: 1px transparent #DDD;
+  border-top: 1px transparent #ddd;
-    /*[1px solid {plugin-table-border-color}]*/
+  /*[1px solid {plugin-table-border-color}]*/
-    max-height: 20vh;
+  max-height: 20vh;
-    width: 100%;
+  width: 100%;
 }
 .scrollable {
-    overflow: auto;
+  overflow: auto;
-    overflow-x: hidden;
+  overflow-x: hidden;
 }
 .and-or-column,
 .and-or-header {
-    min-width: 65px;
+  min-width: 65px;
-    padding-right: 10px;
+  padding-right: 10px;
-    padding-left: 5px;
+  padding-left: 5px;
 }
 .operator-column,
 .operator-header {
-    min-width: 65px;
+  min-width: 65px;
-    padding-right: 10px;
+  padding-right: 10px;
 }
 .field-header,
 .field-column {
-    min-width: 125px;
+  min-width: 125px;
-    padding-right: 10px;
+  padding-right: 10px;
 }
 .type-header,
 .type-column {
-    min-width: 85px;
+  min-width: 85px;
 }
 .and-or-column,
@@ -345,41 +345,41 @@ input::-webkit-inner-spin-button {
 .type-header,
 .type-column,
 .action-header {
-    padding-right: 10px;
+  padding-right: 10px;
-    margin-bottom: 8px;
+  margin-bottom: 8px;
 }
 .value-header,
 .value-column,
 .time-column {
-    min-width: 230px;
+  min-width: 230px;
-    padding: 0px 4px 0px 0px;
+  padding: 0px 4px 0px 0px;
-    width: 100%;
+  width: 100%;
-    margin-bottom: 8px;
+  margin-bottom: 8px;
 }
 .group-control-header,
 .group-control-column {
-    min-width: 25px;
+  min-width: 25px;
-    text-align: right;
+  text-align: right;
 }
 .group-indicator-table {
-    border-spacing: 0px;
+  border-spacing: 0px;
-    min-height: 24px
+  min-height: 24px;
 }
 .group-indicator-column {
-    min-width: 21px;
+  min-width: 21px;
-    padding: 0px;
+  padding: 0px;
-    border-style: none;
+  border-style: none;
-    height: 29px;
+  height: 29px;
 }
-.clause-table-cell.action-column, 
+.clause-table-cell.action-column,
 .clause-table-cell.action-header {
-    min-width: 60px;
+  min-width: 60px;
-    padding-left: @SmallSpace;
+  padding-left: @SmallSpace;
 }
 .action-header,
@@ -388,15 +388,14 @@ input::-webkit-inner-spin-button {
 .operator-header,
 .value-header,
 .and-or-header {
-    padding-right: 4px;
+  padding-right: 4px;
-    padding-bottom: 5px;
+  padding-bottom: 5px;
 }
 .header-background {
-    background-color: #ffffff;
+  background-color: #ffffff;
 }
 /*.type-header {
    padding-right: 4px;
 }
@@ -410,112 +409,111 @@ input::-webkit-inner-spin-button {
 }*/
 .clause-table-field[readonly] {
-    background-color: #EEEEF2;
+  background-color: #eeeef2;
-    /*[{plugin-table-header-background-color}]*/
+  /*[{plugin-table-header-background-color}]*/
-    border: 1px solid #CCCEDB;
+  border: 1px solid #cccedb;
-    /*[{plugin-table-border-color}]*/
+  /*[{plugin-table-border-color}]*/
 }
 .addClause-title {
-    /*[{common-common-controls-button-border-hover}]*/
+  /*[{common-common-controls-button-border-hover}]*/
-    cursor: pointer;
+  cursor: pointer;
-    margin-left: -5px;
+  margin-left: -5px;
 }
 .addClause {
-    width: 125px;
+  width: 125px;
-    padding: 8px 0px 5px 5px;
+  padding: 8px 0px 5px 5px;
-    border: 1px solid #fff;
+  border: 1px solid #fff;
-    margin-left: 5px;
+  margin-left: 5px;
 }
 .addClause:hover {
-    .hover();
+  .hover();
 }
 .addClause:active {
-    .active();
+  .active();
-    border: 1px dashed @AccentMedium;
+  border: 1px dashed @AccentMedium;
 }
 .clause-table-row {
-    min-width: 550px;
+  min-width: 550px;
-    width: 100%;
+  width: 100%;
 }
 .clause-table-field field-column {
-    min-width: 75px;
+  min-width: 75px;
-    height: 30px;
+  height: 30px;
-    width: 100%;
+  width: 100%;
 }
 .clause-table-field field-input {
-    min-width: 54px;
+  min-width: 54px;
-    margin-left: -78px;
+  margin-left: -78px;
-    height: 25px;
+  height: 25px;
-    border: none;
+  border: none;
 }
 .query-panel .row .spacing {
-    padding-bottom: 6px;
+  padding-bottom: 6px;
 }
 .query-panel .divider.horizontal {
-    height: 10px;
+  height: 10px;
-    width: 100%
+  width: 100%;
 }
 .inline-div {
-    display: inline
+  display: inline;
 }
 .querybuilder-addpropertyImg,
 .querybuilder-cancelImg {
-    width: 14px;
+  width: 14px;
-    height: 14px;
+  height: 14px;
-    margin-left: 3px;
+  margin-left: 3px;
-    margin-bottom: 8px;
+  margin-bottom: 8px;
 }
 .addclauseProperty-Img {
-    width: 14px;
+  width: 14px;
-    height: 14px;
+  height: 14px;
-    margin-bottom: 5px;
+  margin-bottom: 5px;
-    margin-left: 12px;
+  margin-left: 12px;
 }
 .entity-Add-Cancel {
-    padding: @DefaultSpace @SmallSpace @SmallSpace;
+  // padding: @DefaultSpace @SmallSpace @SmallSpace;
-    cursor: pointer;
+  cursor: pointer;
 }
 .entity-Add-Cancel:hover {
-    .hover();
+  .hover();
 }
 .entity-Add-Cancel:active {
-    .active();
+  .active();
 }
 .query-builder-isDisabled {
-    border: 1px solid #CCCEDB;
+  border: 1px solid #cccedb;
-    color: #ccc;
+  color: #ccc;
 }
 .edit-value-text {
-    padding-left: @DefaultSpace;
+  padding-left: @DefaultSpace;
 }
 .expand-triangle {
-    width: 10px;
+  width: 10px;
-    height: 10px;
+  height: 10px;
 }
 .expand-triangle-right {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 /*
@media only screen and (max-width: 1200px) {
    .clause-table {
@@ -524,4 +522,4 @@ input::-webkit-inner-spin-button {
        width: 100%;
        padding-top: 10px;
    }
-}*/
+}*/
--- a/src/Common/TableEntity.tsx
+++ b/src/Common/TableEntity.tsx
@@ -73,6 +73,17 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
  const sectionStackTokens: IStackTokens = { childrenGap: 12 };
  const handleKeyPress = (event: React.KeyboardEvent<HTMLElement>) => {
    if (event.key === "Enter" || event.key === "Space") {
      onEditEntity();
    }
  };
  const handleKeyPressdelete = (event: React.KeyboardEvent<HTMLElement>) => {
    if (event.key === "Enter" || event.key === "Space") {
      onDeleteEntity();
    }
  };
  const getEntityValueType = (): string => {
    const { Int, Smallint, Tinyint } = CassandraType;
    const { Double, Int32, Int64 } = TableType;
@@ -126,12 +137,28 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
        />
        {!isEntityValueDisable && (
          <TooltipHost content="Edit property" id="editTooltip">
-            <Image {...imageProps} src={EditIcon} alt="editEntity" id="editEntity" onClick={onEditEntity} />
+            <Image
              {...imageProps}
              src={EditIcon}
              alt="editEntity"
              id="editEntity"
              onClick={onEditEntity}
              tabIndex={0}
              onKeyPress={handleKeyPress}
            />
          </TooltipHost>
        )}
        {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
          <TooltipHost content="Delete property" id="deleteTooltip">
-            <Image {...imageProps} src={DeleteIcon} alt="delete entity" id="deleteEntity" onClick={onDeleteEntity} />
+            <Image
              {...imageProps}
              src={DeleteIcon}
              alt="delete entity"
              id="deleteEntity"
              onClick={onDeleteEntity}
              tabIndex={0}
              onKeyPress={handleKeyPressdelete}
            />
          </TooltipHost>
        )}
      </Stack>
--- a/src/Common/Tooltip/InfoTooltip.tsx
+++ b/src/Common/Tooltip/InfoTooltip.tsx
@@ -9,7 +9,7 @@ export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children }:
  return (
    <span>
      <TooltipHost content={children}>
-        <Icon iconName="Info" ariaLabel="Info" className="panelInfoIcon" tabIndex={0} />
+        <Icon iconName="Info" ariaLabel={children} className="panelInfoIcon" tabIndex={0} />
      </TooltipHost>
    </span>
  );
--- a/src/Common/dataAccess/deleteDocument.ts
+++ b/src/Common/dataAccess/deleteDocument.ts
@@ -4,6 +4,7 @@ import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationCons
 import { client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
 import { getPartitionKeyValue } from "./getPartitionKeyValue";
 export const deleteDocument = async (collection: CollectionBase, documentId: DocumentId): Promise<void> => {
  const entityName: string = getEntityName();
@@ -13,7 +14,7 @@ export const deleteDocument = async (collection: CollectionBase, documentId: Doc
    await client()
      .database(collection.databaseId)
      .container(collection.id())
-      .item(documentId.id(), documentId.partitionKeyValue?.length === 0 ? undefined : documentId.partitionKeyValue)
+      .item(documentId.id(), getPartitionKeyValue(documentId))
      .delete();
    logConsoleInfo(`Successfully deleted ${entityName} ${documentId.id()}`);
  } catch (error) {
--- a/src/Common/dataAccess/getPartitionKeyValue.ts
+++ b/src/Common/dataAccess/getPartitionKeyValue.ts
@@ -0,0 +1,12 @@
 import { userContext } from "UserContext";
 import DocumentId from "../../Explorer/Tree/DocumentId";
 export const getPartitionKeyValue = (documentId: DocumentId) => {
  if (userContext.apiType === "Tables" && documentId.partitionKeyValue?.length === 0) {
    return "";
  }
  if (documentId.partitionKeyValue?.length === 0) {
    return undefined;
  }
  return documentId.partitionKeyValue;
 };
--- a/src/Common/dataAccess/readDocument.ts
+++ b/src/Common/dataAccess/readDocument.ts
@@ -6,6 +6,7 @@ import { HttpHeaders } from "../Constants";
 import { client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
 import { getPartitionKeyValue } from "./getPartitionKeyValue";
 export const readDocument = async (collection: CollectionBase, documentId: DocumentId): Promise<Item> => {
  const entityName = getEntityName();
@@ -21,8 +22,7 @@ export const readDocument = async (collection: CollectionBase, documentId: Docum
    const response = await client()
      .database(collection.databaseId)
      .container(collection.id())
-      // use undefined if the partitionKeyValue is empty
+      .item(documentId.id(), getPartitionKeyValue(documentId))
      .item(documentId.id(), documentId.partitionKeyValue?.length === 0 ? undefined : documentId.partitionKeyValue)
      .read(options);
    return response?.resource;
--- a/src/Common/dataAccess/updateDocument.ts
+++ b/src/Common/dataAccess/updateDocument.ts
@@ -6,6 +6,7 @@ import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationCons
 import { client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
 import { getPartitionKeyValue } from "./getPartitionKeyValue";
 export const updateDocument = async (
  collection: CollectionBase,
@@ -25,7 +26,7 @@ export const updateDocument = async (
    const response = await client()
      .database(collection.databaseId)
      .container(collection.id())
-      .item(documentId.id(), documentId.partitionKeyValue?.length === 0 ? undefined : documentId.partitionKeyValue)
+      .item(documentId.id(), getPartitionKeyValue(documentId))
      .replace(newDocument, options);
    logConsoleInfo(`Successfully updated ${entityName} ${documentId.id()}`);
--- a/src/Contracts/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -34,6 +34,7 @@ export interface DatabaseAccountExtendedProperties {
  capacity?: { totalThroughputLimit: number };
  locations?: DatabaseAccountResponseLocation[];
  postgresqlEndpoint?: string;
  publicNetworkAccess?: string;
 }
 export interface DatabaseAccountResponseLocation {
--- a/src/Contracts/ExplorerContracts.ts
+++ b/src/Contracts/ExplorerContracts.ts
@@ -37,6 +37,7 @@ export enum MessageTypes {
  OpenQuickstartBlade,
  OpenPostgreSQLPasswordReset,
  OpenPostgresNetworkingBlade,
  OpenCosmosDBNetworkingBlade,
 }
 export { Versions, ActionContracts, Diagnostics };
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -186,7 +186,6 @@ export interface Collection extends CollectionBase {
  onDrop(source: Collection, event: { originalEvent: DragEvent }): void;
  uploadFiles(fileList: FileList): Promise<{ data: UploadDetailsRecord[] }>;
  getLabel(): string;
  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
 }
@@ -397,6 +396,7 @@ export interface DataExplorerInputsFrame {
  dataExplorerVersion?: string;
  defaultCollectionThroughput?: CollectionCreationDefaults;
  isPostgresAccount?: boolean;
  isReplica?: boolean;
  // TODO: Update this param in the OSS extension to remove isFreeTier, isMarlinServerGroup, and make nodes a flat array instead of an nested array
  connectionStringParams?: any;
  flights?: readonly string[];
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
@@ -1,9 +1,12 @@
 import { mergeStyleSets } from "@fluentui/merge-styles";
 import {
  Checkbox,
  ChoiceGroup,
  FontIcon,
  IChoiceGroupOption,
  IColumn,
  Icon,
  initializeIcons,
  Label,
  Link,
  MessageBar,
@@ -82,7 +85,7 @@ interface ThroughputInputAutoPilotV3State {
  spendAckChecked: boolean;
  exceedFreeTierThroughput: boolean;
 }
-
+initializeIcons();
 export class ThroughputInputAutoPilotV3Component extends React.Component<
  ThroughputInputAutoPilotV3Props,
  ThroughputInputAutoPilotV3State
@@ -620,13 +623,20 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
    if (this.IsComponentDirty().isDiscardable) {
      warningMessage = saveThroughputWarningMessage;
    }
    const classNames = mergeStyleSets({
      orange: [{ color: "orange" }],
    });
    return (
      <>
        {warningMessage && (
-          <MessageBar messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}>
+          // <MessageBar messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}>
          //   {warningMessage}
          // </MessageBar>
          <div className="warningonmanual" role="alert" aria-atomic="true">
            <Icon iconName="WarningSolid" className={classNames.orange} />
            {warningMessage}
-          </MessageBar>
+          </div>
        )}
      </>
    );
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
@@ -8,14 +8,15 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
    }
  }
 >
-  <StyledMessageBar
+  <div
-    messageBarIconProps={
+    aria-atomic="true"
-      Object {
+    className="warningonmanual"
-        "className": "messageBarWarningIcon",
+    role="alert"
        "iconName": "WarningSolid",
      }
    }
  >
    <Icon
      className="orange-53"
      iconName="WarningSolid"
    />
    <Text
      styles={
        Object {
@@ -28,7 +29,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
    >
      Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes
    </Text>
-  </StyledMessageBar>
+  </div>
  <Stack>
    <StyledLabelBase
      id="settingsV2RadioButtonLabelId"
--- a/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
@@ -344,13 +344,13 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                  onMouseLeave={[Function]}
                >
                  <StyledIconBase
-                    ariaLabel="Info"
+                    ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                    className="panelInfoIcon"
                    iconName="Info"
                    tabIndex={0}
                  >
                    <IconBase
-                      ariaLabel="Info"
+                      ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                      className="panelInfoIcon"
                      iconName="Info"
                      styles={[Function]}
@@ -630,7 +630,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                      }
                    >
                      <i
-                        aria-label="Info"
+                        aria-label="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                        className="panelInfoIcon root-57"
                        data-icon-name="Info"
                        role="img"
@@ -1331,13 +1331,13 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                      onMouseLeave={[Function]}
                    >
                      <StyledIconBase
-                        ariaLabel="Info"
+                        ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                        className="panelInfoIcon"
                        iconName="Info"
                        tabIndex={0}
                      >
                        <IconBase
-                          ariaLabel="Info"
+                          ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                          className="panelInfoIcon"
                          iconName="Info"
                          styles={[Function]}
@@ -1617,7 +1617,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                          }
                        >
                          <i
-                            aria-label="Info"
+                            aria-label="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                            className="panelInfoIcon root-57"
                            data-icon-name="Info"
                            role="img"
--- a/src/Explorer/OpenFullScreen.test.tsx
+++ b/src/Explorer/OpenFullScreen.test.tsx
@@ -1,17 +1,9 @@
 jest.mock("../hooks/useFullScreenURLs");
 import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import React from "react";
 import { useFullScreenURLs } from "../hooks/useFullScreenURLs";
 import { OpenFullScreen } from "./OpenFullScreen";
 it("renders the correct URLs", () => {
  (useFullScreenURLs as jest.Mock).mockReturnValue({
    readWrite: "read and write url",
    read: "read only url",
  });
  render(<OpenFullScreen />);
-  expect(screen.getByLabelText("Read and Write")).toHaveValue("https://cosmos.azure.com/?key=read and write url");
+  expect(screen.getByText("Open")).toBeDefined();
  expect(screen.getByLabelText("Read Only")).toHaveValue("https://cosmos.azure.com/?key=read only url");
 });
--- a/src/Explorer/OpenFullScreen.tsx
+++ b/src/Explorer/OpenFullScreen.tsx
@@ -1,66 +1,26 @@
-import { DefaultButton, PrimaryButton, Spinner, Stack, Text, TextField } from "@fluentui/react";
+import { PrimaryButton, Stack, Text } from "@fluentui/react";
 import copyToClipboard from "clipboard-copy";
 import * as React from "react";
 import { useFullScreenURLs } from "../hooks/useFullScreenURLs";
 export const OpenFullScreen: React.FunctionComponent = () => {
  const [isReadUrlCopy, setIsReadUrlCopy] = React.useState<boolean>(false);
  const [isReadWriteUrlCopy, setIsReadWriteUrlCopy] = React.useState<boolean>(false);
  const result = useFullScreenURLs();
  if (!result) {
    return <Spinner label="Generating URLs..." ariaLive="assertive" labelPosition="right" />;
  }
  const readWriteUrl = `https://cosmos.azure.com/?key=${result.readWrite}`;
  const readUrl = `https://cosmos.azure.com/?key=${result.read}`;
  return (
    <>
-      <Stack tokens={{ childrenGap: 10 }}>
+      <div style={{ padding: "34px" }}>
-        <Text>
+        <Stack tokens={{ childrenGap: 10 }}>
-          Open this database account in a new browser tab with Cosmos DB Explorer. Or copy the read-write or read only
+          <Text>
-          access urls below to share with others. For security purposes, the URLs grant time-bound access to the
+            Open this database account in a new browser tab with Cosmos DB Explorer. You can connect using your
-          account. When access expires, you can reconnect, using a valid connection string for the account.
+            Microsoft account or a connection string.
-        </Text>
+          </Text>
-        <TextField label="Read and Write" readOnly defaultValue={readWriteUrl} />
+          <Stack horizontal tokens={{ childrenGap: 10 }}>
-        <Stack horizontal tokens={{ childrenGap: 10 }}>
+            <PrimaryButton
-          <DefaultButton
+              onClick={() => {
-            ariaLabel={isReadWriteUrlCopy ? "Copied url" : "Copy"}
+                window.open("https://cosmos.azure.com/", "_blank");
-            onClick={() => {
+              }}
-              copyToClipboard(readWriteUrl);
+              text="Open"
-              setIsReadWriteUrlCopy(true);
+              iconProps={{ iconName: "OpenInNewWindow" }}
-            }}
+            />
-            text={isReadWriteUrlCopy ? "Copied" : "Copy"}
+          </Stack>
            iconProps={{ iconName: "Copy" }}
          />
          <PrimaryButton
            onClick={() => {
              window.open(readWriteUrl, "_blank");
            }}
            text="Open"
            iconProps={{ iconName: "OpenInNewWindow" }}
          />
        </Stack>
-        <TextField label="Read Only" readOnly defaultValue={readUrl} />
+      </div>
        <Stack horizontal tokens={{ childrenGap: 10 }}>
          <DefaultButton
            ariaLabel={isReadUrlCopy ? "Copied url" : "Copy"}
            onClick={() => {
              setIsReadUrlCopy(true);
              copyToClipboard(readUrl);
            }}
            text={isReadUrlCopy ? "Copied" : "Copy"}
            iconProps={{ iconName: "Copy" }}
          />
          <PrimaryButton
            onClick={() => {
              window.open(readUrl, "_blank");
            }}
            text="Open"
            iconProps={{ iconName: "OpenInNewWindow" }}
          />
        </Stack>
      </Stack>
    </>
  );
 };
--- a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
+++ b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
@@ -242,6 +242,11 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
    submitButtonText: getButtonLabel(userContext.apiType),
    onSubmit,
  };
  const handlekeypressaddentity = (event: React.KeyboardEvent<HTMLElement>) => {
    if (event.key === "Enter" || event.key === "Space") {
      addNewEntity();
    }
  };
  return (
    <RightPaneForm {...props}>
@@ -284,7 +289,13 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
          );
        })}
        {userContext.apiType !== "Cassandra" && (
-          <Stack horizontal onClick={addNewEntity} className="addButtonEntiy">
+          <Stack
            horizontal
            onClick={addNewEntity}
            className="addButtonEntiy"
            tabIndex={0}
            onKeyPress={handlekeypressaddentity}
          >
            <Image {...imageProps} src={AddPropertyIcon} alt="Add Entity" />
            <Text className="addNewParamStyle">{getAddButtonLabel(userContext.apiType)}</Text>
          </Stack>
--- a/src/Explorer/Panes/Tables/snapshots/AddTableEntityPanel.test.tsx.snap
+++ b/src/Explorer/Panes/Tables/snapshots/AddTableEntityPanel.test.tsx.snap
@@ -29,10 +29,14 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
          className="addButtonEntiy"
          horizontal={true}
          onClick={[Function]}
          onKeyPress={[Function]}
          tabIndex={0}
        >
          <div
            className="ms-Stack addButtonEntiy css-53"
            onClick={[Function]}
            onKeyPress={[Function]}
            tabIndex={0}
          >
            <StyledImageBase
              alt="Add Entity"
--- a/src/Explorer/Quickstart/QuickstartCarousel.tsx
+++ b/src/Explorer/Quickstart/QuickstartCarousel.tsx
@@ -94,7 +94,7 @@ const getDescriptionText = (page: number): string => {
    case 1:
      return "Azure Cosmos DB is a fully managed NoSQL database service for modern app development. ";
    case 2:
-      return "Launch the quickstart for a tutotrial to learn how to create a database, add sample data, connect to a sample app and more.";
+      return "Launch the quickstart for a tutorial to learn how to create a database, add sample data, connect to a sample app and more.";
    case 3:
      return "Already have an existing app? Connect your database to an app, or tooling of your choice from Data Explorer.";
    default:
--- a/src/Explorer/Quickstart/QuickstartGuide.tsx
+++ b/src/Explorer/Quickstart/QuickstartGuide.tsx
@@ -96,12 +96,18 @@ export const QuickstartGuide: React.FC = (): JSX.Element => {
      <Stack style={{ flexGrow: 1, padding: "0 20px", overflow: "auto" }}>
        <Text variant="xxLarge">Quick start guide</Text>
        {currentStep < 5 && (
-          <Pivot style={{ marginTop: 10, width: "100%" }} selectedKey={GuideSteps[currentStep]}>
+          <Pivot
            style={{ marginTop: 10, width: "100%" }}
            selectedKey={GuideSteps[currentStep]}
            onLinkClick={(item?: PivotItem) => setCurrentStep(Object.values(GuideSteps).indexOf(item.props.itemKey))}
          >
            <PivotItem
              headerText="Login"
              onRenderItemLink={(props, defaultRenderer) => customPivotHeaderRenderer(props, defaultRenderer, 0)}
              itemKey={GuideSteps[0]}
-              onClick={() => setCurrentStep(0)}
+              onClick={() => {
                setCurrentStep(0);
              }}
            >
              <Stack style={{ marginTop: 20 }}>
                <Text>
--- a/src/Explorer/SplashScreen/SplashScreen.less
+++ b/src/Explorer/SplashScreen/SplashScreen.less
@@ -14,10 +14,6 @@
    padding-right: 16px;
    max-width: 1168px;
    > * {
      justify-content: space-between;
    }
    > .title {
      position: relative; // To attach FeaturePanelLauncher as absolute
      color: @BaseHigh;
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -304,7 +304,11 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
  public createMainItems(): SplashScreenItem[] {
    const heroes: SplashScreenItem[] = [];
-    if (userContext.apiType === "SQL" || userContext.apiType === "Mongo" || userContext.apiType === "Postgres") {
+    if (
      userContext.apiType === "SQL" ||
      userContext.apiType === "Mongo" ||
      (userContext.apiType === "Postgres" && !userContext.isReplica)
    ) {
      const launchQuickstartBtn = {
        id: "quickstartDescription",
        iconSrc: QuickStartIcon,
--- a/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
+++ b/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
@@ -516,7 +516,7 @@ export default class QueryBuilderViewModel {
  };
  public onAddNewClauseKeyDown = (event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+    if (event.key === "Enter" || event.key === "Space") {
      this.addClauseIndex(this.clauseArray().length - 1);
      event.stopPropagation();
      return false;
--- a/src/Explorer/Tabs/QueryTablesTab.html
+++ b/src/Explorer/Tabs/QueryTablesTab.html
@@ -70,24 +70,19 @@
            <tbody data-bind="template: { name: 'queryClause-template', foreach: clauseArray, as: 'clause' }"></tbody>
          </table>
        </div>
-        <div
+        <button
-          class="addClause"
+          data-bind="click: addNewClause, event: { keydown: onAddNewClauseKeyDown }"
-          role="button"
+          style="border: none; background: none"
          data-bind="click: addNewClause, event: { keydown: onAddNewClauseKeyDown }, attr: { title: addNewClauseLine }"
          tabindex="0"
        >
-          <div class="addClause-heading">
+          <div class="addClause" data-bind=" ">
-            <span class="clause-table addClause-title">
+            <div class="addClause-heading">
-              <img
+              <span class="clause-table addClause-title">
-                class="addclauseProperty-Img"
+                <img class="addclauseProperty-Img" style="margin-bottom: 5px" src="/Add-property.svg" />
-                style="margin-bottom: 5px"
+                <span style="margin-left: 5px" data-bind="text: addNewClauseLine"></span>
-                src="/Add-property.svg"
+              </span>
-                alt="Add new clause"
+            </div>
              />
              <span style="margin-left: 5px" data-bind="text: addNewClauseLine"></span>
            </span>
          </div>
-        </div>
+        </button>
      </div>
    </div>
    <!-- Tables Query Tab Query Helper - End-->
@@ -168,22 +163,20 @@
 <script type="text/html" id="queryClause-template">
  <tr class="clause-table-row">
    <td class="clause-table-cell action-column">
-      <span
+      <button
        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 class="entity-Add-Cancel" role="button">
-      </span>
+          <img class="querybuilder-addpropertyImg" src="/Add-property.svg" alt="Add clause" />
-      <span
+        </span>
-        class="entity-Add-Cancel"
+      </button>
-        role="button"
+      <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 class="entity-Add-Cancel" role="button">
-      </span>
+          <img class="querybuilder-cancelImg" src="/Entity_cancel.svg" alt="Delete clause" />
        </span>
      </button>
    </td>
    <td class="clause-table-cell group-control-column">
      <input type="checkbox" aria-label="And/Or" data-bind="checked: checkedForGrouping" />
--- a/src/Explorer/Tabs/QuickstartTab.tsx
+++ b/src/Explorer/Tabs/QuickstartTab.tsx
@@ -1,4 +1,4 @@
-import { Spinner, SpinnerSize, Stack } from "@fluentui/react";
+import { Spinner, SpinnerSize, Stack, Text } from "@fluentui/react";
 import { configContext } from "ConfigContext";
 import { NotebookWorkspaceConnectionInfo, PostgresFirewallRule } from "Contracts/DataModels";
 import { NotebookTerminalComponent } from "Explorer/Controls/Notebook/NotebookTerminalComponent";
@@ -69,7 +69,15 @@ export const QuickstartTab: React.FC<QuickstartTabProps> = ({ explorer }: Quicks
          />
        )}
        {isAllPublicIPAddressEnabled && !notebookServerInfo?.notebookServerEndpoint && (
-          <Spinner styles={{ root: { marginTop: 10 } }} size={SpinnerSize.large}></Spinner>
+          <Stack style={{ margin: "auto 0" }}>
            <Text block style={{ margin: "auto" }}>
              Connecting to the PostgreSQL shell.
            </Text>
            <Text block style={{ margin: "auto" }}>
              If the cluster was just created, this could take up to a minute.
            </Text>
            <Spinner styles={{ root: { marginTop: 16 } }} size={SpinnerSize.large}></Spinner>
          </Stack>
        )}
      </Stack>
    </Stack>
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -1,3 +1,6 @@
 import { MessageBar, MessageBarButton, MessageBarType } from "@fluentui/react";
 import { sendMessage } from "Common/MessageHandler";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import { CollectionTabKind } from "Contracts/ViewModels";
 import Explorer from "Explorer/Explorer";
 import { SplashScreen } from "Explorer/SplashScreen/SplashScreen";
@@ -21,10 +24,24 @@ interface TabsProps {
 }
 export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
-  const { openedTabs, openedReactTabs, activeTab, activeReactTab } = useTabs();
+  const { openedTabs, openedReactTabs, activeTab, activeReactTab, showNetworkSettingsWarning } = useTabs();
  return (
    <div className="tabsManagerContainer">
      {showNetworkSettingsWarning && (
        <MessageBar
          messageBarType={MessageBarType.warning}
          actions={
            <MessageBarButton onClick={() => sendMessage({ type: MessageTypes.OpenPostgresNetworkingBlade })}>
              Change network settings
            </MessageBarButton>
          }
          messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
        >
          The Network settings for this account are preventing access from Data Explorer. Please allow access from Azure
          Portal to proceed.
        </MessageBar>
      )}
      <div id="content" className="flexContainer hideOverflows">
        <div className="nav-tabs-margin">
          <ul className="nav nav-tabs level navTabHeight" id="navTabs" role="tablist">
--- a/src/Explorer/Tree/Collection.ts
+++ b/src/Explorer/Tree/Collection.ts
@@ -1160,23 +1160,6 @@ export default class Collection implements ViewModels.Collection {
    this.onDocumentDBDocumentsClick();
  }
  /**
   * Get correct collection label depending on account API
   */
  public getLabel(): string {
    if (userContext.apiType === "Tables") {
      return "Entities";
    } else if (userContext.apiType === "Cassandra") {
      return "Rows";
    } else if (userContext.apiType === "Gremlin") {
      return "Graph";
    } else if (userContext.apiType === "Mongo") {
      return "Documents";
    }
    return "Items";
  }
  public getDatabase(): ViewModels.Database {
    return useDatabases.getState().findDatabaseWithId(this.databaseId);
  }
--- a/src/Explorer/Tree/ResourceTree.tsx
+++ b/src/Explorer/Tree/ResourceTree.tsx
@@ -1,5 +1,6 @@
 import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
 import * as React from "react";
 import { getItemName } from "Utils/APITypeUtils";
 import shallow from "zustand/shallow";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
 import DeleteIcon from "../../../images/delete.svg";
@@ -497,7 +498,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
  const buildCollectionNode = (database: ViewModels.Database, collection: ViewModels.Collection): TreeNode => {
    const children: TreeNode[] = [];
    children.push({
-      label: collection.getLabel(),
+      label: getItemName(),
      id: collection.isSampleCollection ? "sampleItems" : "",
      onClick: () => {
        collection.openTab();
--- a/src/Explorer/Tree/ResourceTreeAdapter.tsx
+++ b/src/Explorer/Tree/ResourceTreeAdapter.tsx
@@ -1,6 +1,7 @@
 import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
 import * as ko from "knockout";
 import * as React from "react";
 import { getItemName } from "Utils/APITypeUtils";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
 import DeleteIcon from "../../../images/delete.svg";
 import GalleryIcon from "../../../images/GalleryIcon.svg";
@@ -254,7 +255,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
  private buildCollectionNode(database: ViewModels.Database, collection: ViewModels.Collection): TreeNode {
    const children: TreeNode[] = [];
    children.push({
-      label: collection.getLabel(),
+      label: getItemName(),
      onClick: () => {
        collection.openTab();
        // push to most recent
--- a/src/Phoenix/PhoenixClient.ts
+++ b/src/Phoenix/PhoenixClient.ts
@@ -45,7 +45,11 @@ export class PhoenixClient {
  }
  public async allocateContainer(provisionData: IProvisionData): Promise<IResponse<IPhoenixServiceInfo>> {
-    return this.executeContainerAssignmentOperation(provisionData, "allocate");
+    return promiseRetry(() => this.executeContainerAssignmentOperation(provisionData, "allocate"), {
      retries: 4,
      maxTimeout: 20000,
      minTimeout: 20000,
    });
  }
  public async resetContainer(provisionData: IProvisionData): Promise<IResponse<IPhoenixServiceInfo>> {
@@ -80,9 +84,12 @@ export class PhoenixClient {
      }
      const phoenixError = responseJson as IPhoenixError;
      if (response.status === HttpStatusCodes.Forbidden) {
-        throw new Error(this.ConvertToForbiddenErrorString(phoenixError));
+        if (phoenixError.message === "Sequence contains no elements") {
          throw Error("Phoenix container allocation failed, please try again later.");
        }
        throw new AbortError(this.ConvertToForbiddenErrorString(phoenixError));
      }
-      throw new Error(phoenixError.message);
+      throw new AbortError(phoenixError.message);
    } catch (error) {
      error.status = response?.status;
      throw error;
--- a/src/Platform/Hosted/Authorization.ts
+++ b/src/Platform/Hosted/Authorization.ts
@@ -1,31 +0,0 @@
 import * as Constants from "../../Common/Constants";
 import { configContext } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
 import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
 import { userContext } from "../../UserContext";
 export default class AuthHeadersUtil {
  public static async generateEncryptedToken(readOnly: boolean = false): Promise<DataModels.GenerateTokenResponse> {
    const url = configContext.BACKEND_ENDPOINT + "/api/tokens/generateToken" + AuthHeadersUtil._generateResourceUrl();
    const headers: any = { authorization: userContext.authorizationToken };
    headers[Constants.HttpHeaders.getReadOnlyKey] = readOnly;
    const response = await fetch(url, { method: "POST", headers });
    const result = await response.json();
    // This API has a quirk where the response must be parsed to JSON twice
    return JSON.parse(result);
  }
  private static _generateResourceUrl(): string {
    const { databaseAccount, resourceGroup, subscriptionId } = userContext;
    const apiKind: DataModels.ApiKind = DefaultExperienceUtility.getApiKindFromDefaultExperience(userContext.apiType);
    const accountEndpoint = databaseAccount?.properties?.documentEndpoint || "";
    const sid = subscriptionId || "";
    const rg = resourceGroup || "";
    const dba = databaseAccount?.name || "";
    const resourceUrl = encodeURIComponent(accountEndpoint);
    const rid = "";
    const rtype = "";
    return `?resourceUrl=${resourceUrl}&rid=${rid}&rtype=${rtype}&sid=${sid}&rg=${rg}&dba=${dba}&api=${apiKind}`;
  }
 }
--- a/src/Terminal/JupyterLabAppFactory.ts
+++ b/src/Terminal/JupyterLabAppFactory.ts
@@ -81,6 +81,9 @@ export class JupyterLabAppFactory {
    // Attach the widget to the dom.
    Widget.attach(panel, document.body);
    // Switch focus to the terminal
    term.activate();
    // Handle resize events.
    window.addEventListener("resize", () => {
      panel.update();
--- a/src/UserContext.ts
+++ b/src/UserContext.ts
@@ -67,6 +67,7 @@ interface UserContext {
    partitionKey?: string;
  };
  readonly postgresConnectionStrParams?: PostgresConnectionStrParams;
  readonly isReplica?: boolean;
  collectionCreationDefaults: CollectionCreationDefaults;
 }
@@ -110,7 +111,7 @@ function updateUserContext(newContext: Partial<UserContext>): void {
    if (!localStorage.getItem(newContext.databaseAccount.id)) {
      if (newContext.isTryCosmosDBSubscription || isNewAccount) {
-        if (newContext.apiType === "Postgres") {
+        if (newContext.apiType === "Postgres" && !newContext.isReplica) {
          usePostgres.getState().setShowResetPasswordBubble(true);
          usePostgres.getState().setShowPostgreTeachingBubble(true);
        } else {
--- a/src/Utils/APITypeUtils.ts
+++ b/src/Utils/APITypeUtils.ts
@@ -74,3 +74,18 @@ export const getApiShortDisplayName = (): string => {
      return "Table API";
  }
 };
 export const getItemName = (): string => {
  switch (userContext.apiType) {
    case "Tables":
      return "Entities";
    case "Cassandra":
      return "Rows";
    case "Gremlin":
      return "Graph";
    case "Mongo":
      return "Documents";
    default:
      return "Items";
  }
 };
--- a/src/Utils/NetworkUtility.ts
+++ b/src/Utils/NetworkUtility.ts
@@ -0,0 +1,40 @@
 import { userContext } from "UserContext";
 const PortalIPs: { [key: string]: string[] } = {
  prod1: ["104.42.195.92", "40.76.54.131"],
  prod2: ["104.42.196.69"],
  mooncake: ["139.217.8.252"],
  blackforest: ["51.4.229.218"],
  fairfax: ["52.244.48.71"],
  ussec: ["29.26.26.67", "29.26.26.66"],
  usnat: ["7.28.202.68"],
 };
 export const doNetworkSettingsAllowDataExplorerAccess = (): boolean => {
  const accountProperties = userContext.databaseAccount?.properties;
  if (!accountProperties) {
    return false;
  }
  // public network access is disabled
  if (accountProperties.publicNetworkAccess !== "Enabled") {
    return false;
  }
  const ipRules = accountProperties.ipRules;
  // public network access is set to "All networks"
  if (ipRules.length === 0) {
    return true;
  }
  const portalIPs = PortalIPs[userContext.portalEnv];
  let numberOfMatches = 0;
  ipRules.forEach((ipRule) => {
    if (portalIPs.indexOf(ipRule.ipAddressOrRange) !== -1) {
      numberOfMatches++;
    }
  });
  return numberOfMatches === portalIPs.length;
 };
--- a/src/hooks/useFullScreenURLs.tsx
+++ b/src/hooks/useFullScreenURLs.tsx
@@ -1,18 +0,0 @@
 import { useEffect, useState } from "react";
 import { GenerateTokenResponse } from "../Contracts/DataModels";
 import AuthHeadersUtil from "../Platform/Hosted/Authorization";
 export function useFullScreenURLs(): GenerateTokenResponse | undefined {
  const [state, setState] = useState<GenerateTokenResponse>();
  useEffect(() => {
    Promise.all([AuthHeadersUtil.generateEncryptedToken(), AuthHeadersUtil.generateEncryptedToken(true)]).then(
      ([readWriteResponse, readOnlyResponse]) =>
        setState({
          readWrite: readWriteResponse.readWrite,
          read: readOnlyResponse.read,
        })
    );
  }, []);
  return state;
 }
--- a/src/hooks/useKnockoutExplorer.ts
+++ b/src/hooks/useKnockoutExplorer.ts
@@ -1,5 +1,6 @@
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import { useEffect, useState } from "react";
 import { doNetworkSettingsAllowDataExplorerAccess } from "Utils/NetworkUtility";
 import { applyExplorerBindings } from "../applyExplorerBindings";
 import { AuthType } from "../AuthType";
 import { AccountKind, Flights } from "../Common/Constants";
@@ -364,7 +365,7 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
  });
  if (inputs.isPostgresAccount) {
-    updateUserContext({ apiType: "Postgres" });
+    updateUserContext({ apiType: "Postgres", isReplica: !!inputs.isReplica });
    if (inputs.connectionStringParams) {
      // TODO: Remove after the nodes param has been updated to be a flat array in the OSS extension
@@ -381,6 +382,9 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
    }
  }
  const isDataExplorerAccessAllowed = doNetworkSettingsAllowDataExplorerAccess();
  useTabs.getState().setShowNetworkSettingsWarning(!isDataExplorerAccessAllowed);
  if (inputs.features) {
    Object.assign(userContext.features, extractFeatures(new URLSearchParams(inputs.features)));
  }
--- a/src/hooks/useTabs.ts
+++ b/src/hooks/useTabs.ts
@@ -9,6 +9,7 @@ interface TabsState {
  openedReactTabs: ReactTabKind[];
  activeTab: TabsBase | undefined;
  activeReactTab: ReactTabKind | undefined;
  showNetworkSettingsWarning: boolean;
  activateTab: (tab: TabsBase) => void;
  activateNewTab: (tab: TabsBase) => void;
  activateReactTab: (tabkind: ReactTabKind) => void;
@@ -20,6 +21,7 @@ interface TabsState {
  closeAllNotebookTabs: (hardClose: boolean) => void;
  openAndActivateReactTab: (tabKind: ReactTabKind) => void;
  closeReactTab: (tabKind: ReactTabKind) => void;
  setShowNetworkSettingsWarning: (showWarning: boolean) => void;
 }
 export enum ReactTabKind {
@@ -33,6 +35,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
  openedReactTabs: [ReactTabKind.Home],
  activeTab: undefined,
  activeReactTab: ReactTabKind.Home,
  showNetworkSettingsWarning: false,
  activateTab: (tab: TabsBase): void => {
    if (get().openedTabs.some((openedTab) => openedTab.tabId === tab.tabId)) {
      set({ activeTab: tab, activeReactTab: undefined });
@@ -142,4 +145,5 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
    set({ openedReactTabs: updatedOpenedReactTabs });
  },
  setShowNetworkSettingsWarning: (showWarning: boolean) => set({ showNetworkSettingsWarning: showWarning }),
 }));
--- a/tsconfig.strict.json
+++ b/tsconfig.strict.json
@@ -82,7 +82,6 @@
    "./src/Explorer/Tree/AccessibleVerticalList.ts",
    "./src/GitHub/GitHubConnector.ts",
    "./src/HostedExplorerChildFrame.ts",
    "./src/Platform/Hosted/Authorization.ts",
    "./src/Platform/Hosted/Components/MeControl.test.tsx",
    "./src/Platform/Hosted/Components/MeControl.tsx",
    "./src/Platform/Hosted/Components/SignInButton.tsx",
@@ -126,7 +125,6 @@
    "./src/Utils/WindowUtils.ts",
    "./src/hooks/useConfig.ts",
    "./src/hooks/useDirectories.tsx",
    "./src/hooks/useFullScreenURLs.tsx",
    "./src/hooks/useGraphPhoto.tsx",
    "./src/hooks/useNotebookSnapshotStore.ts",
    "./src/hooks/usePortalAccessToken.tsx",
@@ -165,4 +163,4 @@
    "src/Terminal/**/*",
    "src/Utils/arm/**/*"
  ]
-}
+}
Author	SHA1	Message	Date
Sampath	610b559469	defect1722595 Bug 1722595: [Screen readers Azure Cosmos DB Scale& Settings: Screen reader (NVDA) is not announcing status message which is displayed on the screen after radio button is selected under scale tab.	2022-12-23 18:39:13 +05:30
Sampath	6defcfb7e5	update snapshot	2022-12-23 18:16:16 +05:30
Sampath	ad953ffa1d	InfoTooltip changes	2022-12-23 17:51:17 +05:30
Sampath	511b0bd8c0	Revert "commit for tooltip in defect 1704149" This reverts commit `44766e8213`.	2022-12-23 17:17:04 +05:30
Sampath	44766e8213	commit for tooltip in defect 1704149	2022-12-23 17:14:03 +05:30
Sampath	60d666df1e	Revert "changes in infotooltip for defct" This reverts commit `ca9833e208`.	2022-12-22 20:52:26 +05:30
Sampath	ca9833e208	changes in infotooltip for defct	2022-12-22 19:44:51 +05:30
Sampath	042ad24cc6	changes to addcollectionpanel.test.tsx snp file	2022-12-20 02:56:51 +05:30
Sampath	445427ecec	format fixes	2022-12-20 02:00:52 +05:30
Sampath	6d19aaab43	committing changes for the keyboard navigation	2022-12-20 00:41:17 +05:30
Sampath	7fbecfff1a	Revert "html,css changes corected after reversion" This reverts commit `712e0e0c1e`.	2022-12-20 00:36:31 +05:30
Sampath	712e0e0c1e	html,css changes corected after reversion	2022-12-19 18:52:12 +05:30
Sampath	6aa229462b	Revert "keyboard navigation for defects 1722611,1722618" This reverts commit `9383609a22`.	2022-12-19 18:45:53 +05:30
Sampath	990d86ffc6	Fixes for keyboard navigation of add new clause,edit,remove property,insert filter line, remove filter line	2022-12-19 18:27:52 +05:30
MokireddySampath	9383609a22	keyboard navigation for defects 1722611,1722618	2022-12-19 12:41:08 +05:30
vchske	2f32a676d0	Fixes issue when CRUD with no parition key for all APIs (#1362 ) * Fixes issue where empty partition key is treated like nonexistent key for Tables API * Updated format * Refactor fix * Prettier * Fixes issue when CRUD with no parition key for all APIs * Format fix * Refactor to explicitly check for Tables	2022-12-13 11:36:39 -08:00
victor-meng	950c8ee470	Fix "Change network settings" button send the wrong message type (#1360 )	2022-12-09 15:48:23 -08:00
vchske	b0eaac5b84	Fixes issue where empty partition key is treated like nonexistent key… (#1359 )	2022-12-09 15:14:46 -08:00
victor-meng	952491a3ad	Empty commit to trigger new build (#1351 )	2022-11-14 13:46:27 -08:00
victor-meng	5dde66b032	Add check and guidance for networking settings (#1348 )	2022-11-10 10:46:55 -08:00
jawelton74	5b1db2778c	Fix typo in 'tutorial' in Quick start. (#1346 )	2022-10-27 09:59:14 -07:00
Armando Trejo Oliver	1213788f9c	Remove share-link feature (#1345 ) * Remove share-link feature Cosmos DB supports sharing access to an account data using AAD/RBAC now so this feature is unnecessary. * Fix format issues * Fix unit tests * undo package changes	2022-10-20 10:58:37 -07:00
victor-meng	1ce3adff0f	Hide launch quick start button and postgres teaching bubbles if account is a replica (#1344 )	2022-10-19 17:12:41 -07:00
victor-meng	00eb07da11	Add retries when checking if account is allowed to access phoenix (#1342 )	2022-10-19 17:12:24 -07:00