revertingthechangesforinfotooltip

This reverts commit ca9833e208.

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;
     }
-}*/
+}*/

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>

src/Common/dataAccess/deleteDocument.ts

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

src/Common/dataAccess/getPartitionKeyValue.ts

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

src/Common/dataAccess/readDocument.ts

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

src/Common/dataAccess/updateDocument.ts

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

src/Contracts/DataModels.ts

@@ -34,6 +34,7 @@ export interface DatabaseAccountExtendedProperties {
   capacity?: { totalThroughputLimit: number };
   locations?: DatabaseAccountResponseLocation[];
   postgresqlEndpoint?: string;
+  publicNetworkAccess?: string;
 }
 
 export interface DatabaseAccountResponseLocation {

src/Contracts/ExplorerContracts.ts

@@ -37,6 +37,7 @@ export enum MessageTypes {
   OpenQuickstartBlade,
   OpenPostgreSQLPasswordReset,
   OpenPostgresNetworkingBlade,
+  OpenCosmosDBNetworkingBlade,
 }
 
 export { Versions, ActionContracts, Diagnostics };

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[];

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");
 });

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>
     </>
   );
 };

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

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

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

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

src/Explorer/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:

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>

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;

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,

src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts

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

src/Explorer/Tabs/QueryTablesTab.html

@@ -70,24 +70,19 @@
             <tbody data-bind="template: { name: 'queryClause-template', foreach: clauseArray, as: 'clause' }"></tbody>
           </table>
         </div>
-        <div
+        <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" />

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>

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">

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);
   }

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();

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

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;

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}`;
-  }
-}

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();

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 {

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";
+  }
+};

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;
+};

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;
-}

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)));
   }

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 }),
 }));

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/**/*"
   ]
-}
+}