alt text attribute for images

autoscale and manual radiobuutton fixes
rework for defect-1704149 (#1384 )
2025-12-24 19:31:36 +00:00 · 2023-02-25 22:53:52 +05:30 · 2023-02-06 23:48:50 +05:30 · 2023-02-04 01:51:11 +05:30 · 2023-02-03 10:15:35 -06:00 · 2023-02-01 22:20:03 +05:30
34 changed files with 693 additions and 395 deletions
--- a/less/TableStyles/queryBuilder.less
+++ b/less/TableStyles/queryBuilder.less
@@ -3,337 +3,337 @@
@import "../Common/Constants";

 .query-panel {
-    display: table;
-    display: none;
-    width: 100%;
-    border-top: 1px solid #DDDDDD;
-    /*[{environment-commandbar-toolbar-separator}]*/
-    background-color: #ffffff;
-    /*[{plugin-background-color}]*/
-    padding: 2px 0px 0px 2px;
-    resize: vertical;
+  display: table;
+  display: none;
+  width: 100%;
+  border-top: 1px solid #dddddd;
+  /*[{environment-commandbar-toolbar-separator}]*/
+  background-color: #ffffff;
+  /*[{plugin-background-color}]*/
+  padding: 2px 0px 0px 2px;
+  resize: vertical;
 }

 .query-panel .row {
-    display: table-row;
+  display: table-row;
 }

 .query-panel .row .cell {
-    display: table-cell;
+  display: table-cell;
 }

 .query-panel.transition-in {
-    display: table;
-    top: 0px;
-    -webkit-transition: top 2s linear;
-    -ms-transition: top 2s linear;
-    -moz-transition: top 2s linear;
-    -khtml-transition: top 2s linear;
-    -o-transition: top 2s linear;
-    transition: top 2s linear;
+  display: table;
+  top: 0px;
+  -webkit-transition: top 2s linear;
+  -ms-transition: top 2s linear;
+  -moz-transition: top 2s linear;
+  -khtml-transition: top 2s linear;
+  -o-transition: top 2s linear;
+  transition: top 2s linear;
 }

 .query-builder {
-    width:100%;
-    padding-right: @DefaultSpace;
-    border-bottom: 1px solid @BaseMedium;
-    margin-bottom: @DefaultSpace;
+  width: 100%;
+  padding-right: @DefaultSpace;
+  border-bottom: 1px solid @BaseMedium;
+  margin-bottom: @DefaultSpace;
 }

 .query-builder-toolbar {
-    background-color: #ffffff;
-    /*[{plugin-background-color}]*/
-    min-width: 600px;
-    height: 30px;
-    border-bottom: 1px solid #DDDDDD;
-    /*[1px solid {environment-commandbar-toolbar-separator}]*/
+  background-color: #ffffff;
+  /*[{plugin-background-color}]*/
+  min-width: 600px;
+  height: 30px;
+  border-bottom: 1px solid #dddddd;
+  /*[1px solid {environment-commandbar-toolbar-separator}]*/
 }

 .query-builder-toolbar .query-toolbar-group {
-    display: inline-block;
-    height: 24px;
-    margin: 2px 0px;
-    vertical-align: middle;
+  display: inline-block;
+  height: 24px;
+  margin: 2px 0px;
+  vertical-align: middle;
 }

 .query-builder-toolbar .query-toolbar-group .query-toolbar-button {
-    min-width: 0px;
-    padding: 0px;
-    margin-left: 2px;
-    background-color: transparent;
-    border: solid transparent;
+  min-width: 0px;
+  padding: 0px;
+  margin-left: 2px;
+  background-color: transparent;
+  border: solid transparent;
 }

 .query-builder-toolbar .query-toolbar-group .query-toolbar-button:active {
-    outline: 2px solid dodgerblue;
-    /*[2px solid {common-common-controls-button-border-hover}]*/
+  outline: 2px solid dodgerblue;
+  /*[2px solid {common-common-controls-button-border-hover}]*/
 }

 .query-builder-toolbar .query-toolbar-group .query-toolbar-button:hover {
-    background-color: #CCCEDB;
-    /*[{common-controls-button-hover-background}]*/
+  background-color: #cccedb;
+  /*[{common-controls-button-hover-background}]*/
 }

 .query-builder-toolbar .query-toolbar-group .query-toolbar-button.active {
-    background-color: #E6E7ED;
-    /*[{common-controls-inner-tab-active-background}]*/
-    outline: none
+  background-color: #e6e7ed;
+  /*[{common-controls-inner-tab-active-background}]*/
+  outline: none;
 }

 .query-builder-toolbar .query-toolbar-group .query-toolbar-button:disabled,
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button.disabled {
-    background-color: #ffffff;
-    /*[{common-controls-button-disabled-background}]*/
-    background: transparent;
-    border: 1px solid transparent;
-    outline: none;
-    opacity: 0.4;
+  background-color: #ffffff;
+  /*[{common-controls-button-disabled-background}]*/
+  background: transparent;
+  border: 1px solid transparent;
+  outline: none;
+  opacity: 0.4;
 }

 .tableContainer {
-    overflow: hidden;
-    .flex-display();
-    .flex-direction();
+  overflow: hidden;
+  .flex-display();
+  .flex-direction();
 }

-.tablesQueryTab{
-    padding-left: @MediumSpace;
-    width: 100%;
-    margin-bottom:@LargeSpace;
+.tablesQueryTab {
+  padding-left: @MediumSpace;
+  width: 100%;
+  margin-bottom: @LargeSpace;
 }

 .entity-error-Img {
-    width: @WarningErrorIconSize;
-    height: @WarningErrorIconSize;
-    margin: @DefaultSpace 0px 0px @SmallSpace;
+  width: @WarningErrorIconSize;
+  height: @WarningErrorIconSize;
+  margin: @DefaultSpace 0px 0px @SmallSpace;
 }

 .query-editor-panel {
-    margin-right: 16px;
-    margin-left: 16px;
-    margin-top: 25px;
-    position: relative;
-    vertical-align: middle;
-    cursor: default;
+  margin-right: 16px;
+  margin-left: 16px;
+  margin-top: 25px;
+  position: relative;
+  vertical-align: middle;
+  cursor: default;
 }

 .query-editor-text {
-    width: 100%;
-    margin: 2px;
-    border: solid 1px #A9ACB3;
-    /*[{plugin-textbox-disabled-color}]*/
-    resize: none;
-    margin-top: -39px;
-    background-color: #ddd;
-    padding: 5px;
+  width: 100%;
+  margin: 2px;
+  border: solid 1px #a9acb3;
+  /*[{plugin-textbox-disabled-color}]*/
+  resize: none;
+  margin-top: -39px;
+  background-color: #ddd;
+  padding: 5px;
 }

 .error-bar {
-    padding: @LargeSpace 34px @MediumSpace 24px;
+  padding: @LargeSpace 34px @MediumSpace 24px;
 }

 .error-message {
-    background-color: @BaseLow;
-    padding: @DefaultSpace;
-    display: inline-flex;
+  background-color: @BaseLow;
+  padding: @DefaultSpace;
+  display: inline-flex;
 }

 .error-text {
-    padding-left: @MediumSpace;
+  padding-left: @MediumSpace;
 }

 .query-editor-text-invalid {
-    width: 100%;
-    margin: 2px;
-    border: 1px solid #e51400;
-    resize: none;
-    margin-top: -30px;
+  width: 100%;
+  margin: 2px;
+  border: 1px solid #e51400;
+  resize: none;
+  margin-top: -30px;
 }

 .query-editor-panel .warning-bar {
-    width: 100%;
-    height: 20px;
-    background-color: #ffffff;
-    /*[{plugin-background-color}]*/
-    position: absolute;
-    top: -24px;
+  width: 100%;
+  height: 20px;
+  background-color: #ffffff;
+  /*[{plugin-background-color}]*/
+  position: absolute;
+  top: -24px;
 }

 .query-editor-panel .warning-bar .warning-message {
-    display: inline-flex;
-    padding-top: 2px;
-    vertical-align: middle;
+  display: inline-flex;
+  padding-top: 2px;
+  vertical-align: middle;
 }

 .query-editor-panel .warning-bar .warning-message .warning-text {
-    margin-left: 2px;
+  margin-left: 2px;
 }

-.advanced-options-panel{
-    margin-bottom: @DefaultSpace;
+.advanced-options-panel {
+  margin-bottom: @DefaultSpace;
 }

 .advanced-options-panel .advanced-heading .advanced-title {
-    display: inline-flex;
-    margin-left: 27px;
-    margin-top: 10px;
-    cursor: default;
+  display: inline-flex;
+  margin-left: 27px;
+  margin-top: 10px;
+  cursor: default;
 }

 .advanced-options-panel .advanced-options {
-    margin-left: 32px;
-    margin-top: 5px;
-    border: 1px solid transparent;
+  margin-left: 32px;
+  margin-top: 5px;
+  border: 1px solid transparent;
 }

 hr {
-    margin-top: 10px;
-    margin-bottom: 12px;
-    border: 0;
-    border-top: 1px solid #ccc;
+  margin-top: 10px;
+  margin-bottom: 12px;
+  border: 0;
+  border-top: 1px solid #ccc;
 }

 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
+  -webkit-appearance: none;
 }

 .advanced-options-panel .advanced-options .top .top-input {
-    width: 100px;
-    word-spacing: normal;
-    color: #1E1E1E;
-    /*[{common-controls-button-foreground}]*/
-    border: 1px solid #CCCEDB;
-    /*[1px solid {plugin-textbox-border-color}]*/
-    height: 20px;
-    margin-left: 8px;
+  width: 100px;
+  word-spacing: normal;
+  color: #1e1e1e;
+  /*[{common-controls-button-foreground}]*/
+  border: 1px solid #cccedb;
+  /*[1px solid {plugin-textbox-border-color}]*/
+  height: 20px;
+  margin-left: 8px;
 }

 .advanced-options-panel .advanced-options .top .invalid-top {
-    color: red;
+  color: red;
 }

 .advanced-options-panel .advanced-options .select {
-    margin-top: 18px;
-    display: inline-flex;
+  margin-top: 18px;
+  display: inline-flex;
 }

 .advanced-options-icon {
-    margin-left: 2px;
-    vertical-align: sub;
+  margin-left: 2px;
+  vertical-align: sub;
 }

 .advanced-options-panel .advanced-options .select .select-options-text {
-    margin-left: 4px;
+  margin-left: 4px;
 }

 .advanced-options-panel .advanced-options .select .select-options-link {
-    margin-left: 4px;
-    cursor: pointer;
-    outline: none;
+  margin-left: 4px;
+  cursor: pointer;
+  outline: none;
 }

 .query-panel .row .column-headers .Field {
-    padding-left: 95px;
-    padding-right: 0px;
-    padding-bottom: 6px;
+  padding-left: 95px;
+  padding-right: 0px;
+  padding-bottom: 6px;
 }

 .clause-table {
-    border-spacing: 0px;
-    display: table;
-    width: 100%;
-    margin-top: -3px;
+  border-spacing: 0px;
+  display: table;
+  width: 100%;
+  margin-top: -3px;
 }

 .clause-table-row {
-    display: row;
-    margin-bottom: 10px;
+  display: row;
+  margin-bottom: 10px;
 }

 .clause-table-cell {
-    display: table-cell;
-    text-align: left;
-    vertical-align: middle;
+  display: table-cell;
+  text-align: left;
+  vertical-align: middle;
 }

-.action-column>button,
-.group-control-header>button,
-.group-indicator-column>button {
-    min-width: 20px;
-    width: 20px;
-    padding: 0px;
-    background-color: transparent;
-    border-color: transparent;
-    cursor: pointer;
+.action-column > button,
+.group-control-header > button,
+.group-indicator-column > button {
+  min-width: 20px;
+  width: 20px;
+  padding: 0px;
+  background-color: transparent;
+  border-color: transparent;
+  cursor: pointer;
 }

-.group-control-header>button:disabled {
-    min-width: 20px;
-    width: 20px;
-    padding: 0px;
-    background-color: transparent;
-    border-color: transparent;
-    outline: none;
-    opacity: 0.4;
-    cursor: default;
+.group-control-header > button:disabled {
+  min-width: 20px;
+  width: 20px;
+  padding: 0px;
+  background-color: transparent;
+  border-color: transparent;
+  outline: none;
+  opacity: 0.4;
+  cursor: default;
 }

 .clause-table-field {
-    width: 100%;
-    border: 1px solid #bbbbbb;
+  width: 100%;
+  border: 1px solid #bbbbbb;
 }

 .clause-table-cell button {
-    height: 20px;
+  height: 20px;
 }

 .clause-table-cell input[type="checkbox"] {
-    padding: 0px;
-    margin-bottom: 12px;
+  padding: 0px;
+  margin-bottom: 12px;
 }

 .and-or-svg {
-    margin-top: -8px;
-    margin-right: -5px;
+  margin-top: -8px;
+  margin-right: -5px;
 }

 .scroll-box {
-    border-bottom: 1px transparent #DDD;
-    /*[1px solid {plugin-table-border-color}]*/
-    border-top: 1px transparent #DDD;
-    /*[1px solid {plugin-table-border-color}]*/
-    max-height: 20vh;
-    width: 100%;
+  border-bottom: 1px transparent #ddd;
+  /*[1px solid {plugin-table-border-color}]*/
+  border-top: 1px transparent #ddd;
+  /*[1px solid {plugin-table-border-color}]*/
+  max-height: 20vh;
+  width: 100%;
 }

 .scrollable {
-    overflow: auto;
-    overflow-x: hidden;
+  overflow: auto;
+  overflow-x: hidden;
 }

 .and-or-column,
 .and-or-header {
-    min-width: 65px;
-    padding-right: 10px;
-    padding-left: 5px;
+  min-width: 65px;
+  padding-right: 10px;
+  padding-left: 5px;
 }

 .operator-column,
 .operator-header {
-    min-width: 65px;
-    padding-right: 10px;
+  min-width: 65px;
+  padding-right: 10px;
 }

 .field-header,
 .field-column {
-    min-width: 125px;
-    padding-right: 10px;
+  min-width: 125px;
+  padding-right: 10px;
 }

 .type-header,
 .type-column {
-    min-width: 85px;
+  min-width: 85px;
 }

 .and-or-column,
@@ -345,41 +345,41 @@ input::-webkit-inner-spin-button {
 .type-header,
 .type-column,
 .action-header {
-    padding-right: 10px;
-    margin-bottom: 8px;
+  padding-right: 10px;
+  margin-bottom: 8px;
 }

 .value-header,
 .value-column,
 .time-column {
-    min-width: 230px;
-    padding: 0px 4px 0px 0px;
-    width: 100%;
-    margin-bottom: 8px;
+  min-width: 230px;
+  padding: 0px 4px 0px 0px;
+  width: 100%;
+  margin-bottom: 8px;
 }

 .group-control-header,
 .group-control-column {
-    min-width: 25px;
-    text-align: right;
+  min-width: 25px;
+  text-align: right;
 }

 .group-indicator-table {
-    border-spacing: 0px;
-    min-height: 24px
+  border-spacing: 0px;
+  min-height: 24px;
 }

 .group-indicator-column {
-    min-width: 21px;
-    padding: 0px;
-    border-style: none;
-    height: 29px;
+  min-width: 21px;
+  padding: 0px;
+  border-style: none;
+  height: 29px;
 }

-.clause-table-cell.action-column, 
+.clause-table-cell.action-column,
 .clause-table-cell.action-header {
-    min-width: 60px;
-    padding-left: @SmallSpace;
+  min-width: 60px;
+  padding-left: @SmallSpace;
 }

 .action-header,
@@ -388,15 +388,14 @@ input::-webkit-inner-spin-button {
 .operator-header,
 .value-header,
 .and-or-header {
-    padding-right: 4px;
-    padding-bottom: 5px;
+  padding-right: 4px;
+  padding-bottom: 5px;
 }

 .header-background {
-    background-color: #ffffff;
+  background-color: #ffffff;
 }

-
 /*.type-header {
    padding-right: 4px;
 }
@@ -410,112 +409,111 @@ input::-webkit-inner-spin-button {
 }*/

 .clause-table-field[readonly] {
-    background-color: #EEEEF2;
-    /*[{plugin-table-header-background-color}]*/
-    border: 1px solid #CCCEDB;
-    /*[{plugin-table-border-color}]*/
+  background-color: #eeeef2;
+  /*[{plugin-table-header-background-color}]*/
+  border: 1px solid #cccedb;
+  /*[{plugin-table-border-color}]*/
 }

 .addClause-title {
-    /*[{common-common-controls-button-border-hover}]*/
-    cursor: pointer;
-    margin-left: -5px;
+  /*[{common-common-controls-button-border-hover}]*/
+  cursor: pointer;
+  margin-left: -5px;
 }

 .addClause {
-    width: 125px;
-    padding: 8px 0px 5px 5px;
-    border: 1px solid #fff;
-    margin-left: 5px;
+  width: 125px;
+  padding: 8px 0px 5px 5px;
+  border: 1px solid #fff;
+  margin-left: 5px;
 }

 .addClause:hover {
-    .hover();
+  .hover();
 }

 .addClause:active {
-    .active();
-    border: 1px dashed @AccentMedium;
+  .active();
+  border: 1px dashed @AccentMedium;
 }

 .clause-table-row {
-    min-width: 550px;
-    width: 100%;
+  min-width: 550px;
+  width: 100%;
 }

 .clause-table-field field-column {
-    min-width: 75px;
-    height: 30px;
-    width: 100%;
+  min-width: 75px;
+  height: 30px;
+  width: 100%;
 }

 .clause-table-field field-input {
-    min-width: 54px;
-    margin-left: -78px;
-    height: 25px;
-    border: none;
+  min-width: 54px;
+  margin-left: -78px;
+  height: 25px;
+  border: none;
 }

 .query-panel .row .spacing {
-    padding-bottom: 6px;
+  padding-bottom: 6px;
 }

 .query-panel .divider.horizontal {
-    height: 10px;
-    width: 100%
+  height: 10px;
+  width: 100%;
 }

 .inline-div {
-    display: inline
+  display: inline;
 }

 .querybuilder-addpropertyImg,
 .querybuilder-cancelImg {
-    width: 14px;
-    height: 14px;
-    margin-left: 3px;
-    margin-bottom: 8px;
+  width: 14px;
+  height: 14px;
+  margin-left: 3px;
+  margin-bottom: 8px;
 }

 .addclauseProperty-Img {
-    width: 14px;
-    height: 14px;
-    margin-bottom: 5px;
-    margin-left: 12px;
+  width: 14px;
+  height: 14px;
+  margin-bottom: 5px;
+  margin-left: 12px;
 }

 .entity-Add-Cancel {
-    padding: @DefaultSpace @SmallSpace @SmallSpace;
-    cursor: pointer;
+  // padding: @DefaultSpace @SmallSpace @SmallSpace;
+  cursor: pointer;
 }

 .entity-Add-Cancel:hover {
-    .hover();
+  .hover();
 }

 .entity-Add-Cancel:active {
-    .active();
+  .active();
 }

 .query-builder-isDisabled {
-    border: 1px solid #CCCEDB;
-    color: #ccc;
+  border: 1px solid #cccedb;
+  color: #ccc;
 }

 .edit-value-text {
-    padding-left: @DefaultSpace;
+  padding-left: @DefaultSpace;
 }

 .expand-triangle {
-    width: 10px;
-    height: 10px;
+  width: 10px;
+  height: 10px;
 }

 .expand-triangle-right {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }

-
 /*
@media only screen and (max-width: 1200px) {
    .clause-table {
@@ -524,4 +522,4 @@ input::-webkit-inner-spin-button {
        width: 100%;
        padding-top: 10px;
    }
-}*/
+}*/
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -45,6 +45,8 @@ export class ArmResourceTypes {

 export class BackendDefaults {
  public static partitionKeyKind = "Hash";
+  public static partitionKeyMultiHash = "MultiHash";
+  public static maxNumMultiHashPartition = 2;
  public static singlePartitionStorageInGb: string = "10";
  public static multiPartitionStorageInGb: string = "100";
  public static maxChangeFeedRetentionDuration: number = 10;
--- 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(), documentId.partitionKeyValue?.length === 0 ? undefined : documentId.partitionKeyValue)
+      .item(documentId.id(), getPartitionKeyValue(documentId))
      .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/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -397,6 +397,7 @@ export interface DataExplorerInputsFrame {
  defaultCollectionThroughput?: CollectionCreationDefaults;
  isPostgresAccount?: boolean;
  isReplica?: boolean;
+  clientIpAddress?: string;
  // TODO: Update this param in the OSS extension to remove isFreeTier, isMarlinServerGroup, and make nodes a flat array instead of an nested array
  connectionStringParams?: any;
  flights?: readonly string[];
--- a/src/Explorer/ContextMenuButtonFactory.tsx
+++ b/src/Explorer/ContextMenuButtonFactory.tsx
@@ -85,7 +85,11 @@ export const createCollectionContextMenuButton = (
      iconSrc: HostedTerminalIcon,
      onClick: () => {
        const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
-        selectedCollection && selectedCollection.onNewMongoShellClick();
+        if (useNotebook.getState().isShellEnabled) {
+          container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
+        } else {
+          selectedCollection && selectedCollection.onNewMongoShellClick();
+        }
      },
      label: useNotebook.getState().isShellEnabled ? "Open Mongo Shell" : "New Shell",
    });
--- a/src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx
@@ -1,5 +1,5 @@
+import { HoverCard, HoverCardType, Icon, Label, Link, Stack } from "@fluentui/react";
 import * as React from "react";
-import { Icon, Label, Stack, HoverCard, HoverCardType, Link } from "@fluentui/react";
 import { CodeOfConductEndpoints } from "../../../../Common/Constants";
 import "./InfoComponent.less";

@@ -41,7 +41,7 @@ export class InfoComponent extends React.Component<InfoComponentProps> {
  public render(): JSX.Element {
    return (
      <HoverCard plainCardProps={{ onRenderPlainCard: this.onHover }} instantOpenOnClick type={HoverCardType.plain}>
-        <div className="infoPanelMain">
+        <div className="infoPanelMain" tabIndex={0}>
          <Icon className="infoIconMain" iconName="Help" styles={{ root: { verticalAlign: "middle" } }} />
          <Label className="infoLabelMain">Help</Label>
        </div>
--- a/src/Explorer/Controls/NotebookGallery/InfoComponent/snapshots/InfoComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/InfoComponent/snapshots/InfoComponent.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`InfoComponent renders 1`] = `
 >
  <div
    className="infoPanelMain"
+    tabIndex={0}
  >
    <Icon
      className="infoIconMain"
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
@@ -310,7 +310,9 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
        />
      )}

-      {this.isLargePartitionKeyEnabled() && <Text>Large {this.partitionKeyName.toLowerCase()} has been enabled</Text>}
+      {userContext.apiType === "SQL" && this.isLargePartitionKeyEnabled() && (
+        <Text>Large {this.partitionKeyName.toLowerCase()} has been enabled</Text>
+      )}
    </Stack>
  );

--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
@@ -82,7 +82,6 @@ interface ThroughputInputAutoPilotV3State {
  spendAckChecked: boolean;
  exceedFreeTierThroughput: boolean;
 }
-
 export class ThroughputInputAutoPilotV3Component extends React.Component<
  ThroughputInputAutoPilotV3Props,
  ThroughputInputAutoPilotV3State
@@ -624,7 +623,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
    return (
      <>
        {warningMessage && (
-          <MessageBar messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}>
+          <MessageBar
+            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+            role="alert"
+          >
            {warningMessage}
          </MessageBar>
        )}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
        "iconName": "WarningSolid",
      }
    }
+    role="alert"
  >
    <Text
      styles={
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx
@@ -23,12 +23,12 @@ describe("ThroughputInput Pane", () => {
  });

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

-    wrapper.find('[aria-label="Autoscale mode"]').simulate("change");
+    wrapper.find('[aria-label="Autoscale database throughput"]').simulate("change");
    expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe("Container throughput (autoscale)");
  });
 });
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -186,8 +186,9 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({

      <Stack horizontal verticalAlign="center">
        <input
+          id="Autoscale-input"
          className="throughputInputRadioBtn"
-          aria-label="Autoscale mode"
+          aria-label="Autoscale database throughput"
          aria-required={true}
          checked={isAutoscaleSelected}
          type="radio"
@@ -195,11 +196,14 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
          tabIndex={0}
          onChange={(e) => handleOnChangeMode(e, "Autoscale")}
        />
-        <span className="throughputInputRadioBtnLabel">Autoscale</span>
+        <label htmlFor="Autoscale-input" className="throughputInputRadioBtnLabel">
+          Autoscale
+        </label>

        <input
+          id="Manual-input"
          className="throughputInputRadioBtn"
-          aria-label="Manual mode"
+          aria-label="Manual database throughput"
          checked={!isAutoscaleSelected}
          type="radio"
          aria-required={true}
@@ -207,14 +211,20 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
          tabIndex={0}
          onChange={(e) => handleOnChangeMode(e, "Manual")}
        />
-        <span className="throughputInputRadioBtnLabel">Manual</span>
+        <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
+          Manual
+        </label>
      </Stack>

      {isAutoscaleSelected && (
        <Stack className="throughputInputSpacing">
-          <Text variant="small" aria-label="ruDescription">
+          <Text variant="small" aria-label="capacity calculator of azure cosmos db">
            Estimate your required RU/s with{" "}
-            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="ruDescription">
+            <Link
+              target="_blank"
+              href="https://cosmos.azure.com/capacitycalculator/"
+              aria-label="capacity calculator of azure cosmos db"
+            >
              capacity calculator
            </Link>
            .
--- a/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
@@ -344,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"
@@ -655,39 +655,43 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
        className="ms-Stack css-58"
      >
        <input
-          aria-label="Autoscale mode"
+          aria-label="Autoscale database throughput"
          aria-required={true}
          checked={true}
          className="throughputInputRadioBtn"
+          id="Autoscale-input"
          key=".0:$.0"
          onChange={[Function]}
          role="radio"
          tabIndex={0}
          type="radio"
        />
-        <span
+        <label
          className="throughputInputRadioBtnLabel"
+          htmlFor="Autoscale-input"
          key=".0:$.1"
        >
          Autoscale
-        </span>
+        </label>
        <input
-          aria-label="Manual mode"
+          aria-label="Manual database throughput"
          aria-required={true}
          checked={false}
          className="throughputInputRadioBtn"
+          id="Manual-input"
          key=".0:$.2"
          onChange={[Function]}
          role="radio"
          tabIndex={0}
          type="radio"
        />
-        <span
+        <label
          className="throughputInputRadioBtnLabel"
+          htmlFor="Manual-input"
          key=".0:$.3"
        >
          Manual
-        </span>
+        </label>
      </div>
    </Stack>
    <Stack
@@ -697,23 +701,23 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
        className="ms-Stack throughputInputSpacing css-59"
      >
        <Text
-          aria-label="ruDescription"
+          aria-label="capacity calculator of azure cosmos db"
          key=".0:$.0"
          variant="small"
        >
          <span
-            aria-label="ruDescription"
+            aria-label="capacity calculator of azure cosmos db"
            className="css-54"
          >
            Estimate your required RU/s with
             
            <StyledLinkBase
-              aria-label="ruDescription"
+              aria-label="capacity calculator of azure cosmos db"
              href="https://cosmos.azure.com/capacitycalculator/"
              target="_blank"
            >
              <LinkBase
-                aria-label="ruDescription"
+                aria-label="capacity calculator of azure cosmos db"
                href="https://cosmos.azure.com/capacitycalculator/"
                styles={[Function]}
                target="_blank"
@@ -992,7 +996,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                }
              >
                <a
-                  aria-label="ruDescription"
+                  aria-label="capacity calculator of azure cosmos db"
                  className="ms-Link root-60"
                  href="https://cosmos.azure.com/capacitycalculator/"
                  onClick={[Function]}
@@ -1331,13 +1335,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 +1621,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/DataSamples/ContainerSampleGenerator.test.ts
+++ b/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
@@ -133,7 +133,6 @@ describe("ContainerSampleGenerator", () => {
      } as DatabaseAccount,
    });

-    // Rejects with error that contains experience
    expect(ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub)).rejects.toMatch(experience);
  });

--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
@@ -166,7 +166,11 @@ export function createContextCommandBarButtons(
      iconAlt: label,
      onCommandClick: () => {
        const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
-        selectedCollection && selectedCollection.onNewMongoShellClick();
+        if (useNotebook.getState().isShellEnabled) {
+          container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
+        } else {
+          selectedCollection && selectedCollection.onNewMongoShellClick();
+        }
      },
      commandButtonLabel: label,
      ariaLabel: label,
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -89,9 +89,10 @@ export interface AddCollectionPanelState {
  enableIndexing: boolean;
  isSharded: boolean;
  partitionKey: string;
+  subPartitionKeys: string[];
  enableDedicatedThroughput: boolean;
  createMongoWildCardIndex: boolean;
-  useHashV2: boolean;
+  useHashV1: boolean;
  enableAnalyticalStore: boolean;
  uniqueKeys: string[];
  errorMessage: string;
@@ -121,10 +122,11 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
      enableIndexing: true,
      isSharded: userContext.apiType !== "Tables",
      partitionKey: this.getPartitionKey(),
+      subPartitionKeys: [],
      enableDedicatedThroughput: false,
      createMongoWildCardIndex:
        isCapabilityEnabled("EnableMongo") && !isCapabilityEnabled("EnableMongo16MBDocumentSupport"),
-      useHashV2: false,
+      useHashV1: false,
      enableAnalyticalStore: false,
      uniqueKeys: [],
      errorMessage: "",
@@ -260,7 +262,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                  true
                ).toLocaleLowerCase()}.`}
              >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon
+                  iconName="Info"
+                  className="panelInfoIcon"
+                  tabIndex={0}
+                  ariaLabel={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
+                    true
+                  ).toLocaleLowerCase()}.`}
+                />
              </TooltipHost>
            </Stack>

@@ -336,7 +345,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                        true
                      ).toLocaleLowerCase()} within the database.`}
                    >
-                      <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                      <Icon
+                        iconName="Info"
+                        className="panelInfoIcon"
+                        tabIndex={0}
+                        ariaLabel={`Throughput configured at the database level will be shared across all ${getCollectionName(
+                          true
+                        ).toLocaleLowerCase()} within the database.`}
+                      />
                    </TooltipHost>
                  </Stack>
                )}
@@ -384,7 +400,12 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                directionalHint={DirectionalHint.bottomLeftEdge}
                content={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
              >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon
+                  iconName="Info"
+                  className="panelInfoIcon"
+                  tabIndex={0}
+                  ariaLabel={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
+                />
              </TooltipHost>
            </Stack>

@@ -467,7 +488,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                      "Sharded collections split your data across many replica sets (shards) to achieve unlimited scalability. Sharded collections require choosing a shard key (field) to evenly distribute your data."
                    }
                  >
-                    <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                    <Icon
+                      iconName="Info"
+                      className="panelInfoIcon"
+                      tabIndex={0}
+                      ariaLabel={
+                        "Sharded collections split your data across many replica sets (shards) to achieve unlimited scalability. Sharded collections require choosing a shard key (field) to evenly distribute your data."
+                      }
+                    />
                  </TooltipHost>
                </Stack>

@@ -514,7 +542,12 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                  directionalHint={DirectionalHint.bottomLeftEdge}
                  content={this.getPartitionKeyTooltipText()}
                >
-                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                  <Icon
+                    iconName="Info"
+                    className="panelInfoIcon"
+                    tabIndex={0}
+                    ariaLabel={this.getPartitionKeyTooltipText()}
+                  />
                </TooltipHost>
              </Stack>

@@ -546,6 +579,77 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                  }
                }}
              />
+              {userContext.apiType === "SQL" &&
+                this.state.subPartitionKeys.map((subPartitionKey: string, index: number) => {
+                  return (
+                    <Stack style={{ marginBottom: 8 }} key={`uniqueKey${index}`} horizontal>
+                      <div
+                        style={{
+                          width: "20px",
+                          border: "solid",
+                          borderWidth: "0px 0px 1px 1px",
+                          marginRight: "5px",
+                        }}
+                      ></div>
+                      <input
+                        type="text"
+                        id="addCollection-partitionKeyValue"
+                        key={`addCollection-partitionKeyValue_${index}`}
+                        aria-required
+                        required
+                        size={40}
+                        tabIndex={index > 0 ? 1 : 0}
+                        className="panelTextField"
+                        autoComplete="off"
+                        placeholder={this.getPartitionKeyPlaceHolder(index)}
+                        aria-label={this.getPartitionKeyName()}
+                        pattern={".*"}
+                        title={""}
+                        value={subPartitionKey}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                          const subPartitionKeys = [...this.state.subPartitionKeys];
+                          if (!this.state.subPartitionKeys[index] && !event.target.value.startsWith("/")) {
+                            subPartitionKeys[index] = "/" + event.target.value.trim();
+                            this.setState({ subPartitionKeys });
+                          } else {
+                            subPartitionKeys[index] = event.target.value.trim();
+                            this.setState({ subPartitionKeys });
+                          }
+                        }}
+                      />
+                      <IconButton
+                        iconProps={{ iconName: "Delete" }}
+                        style={{ height: 27 }}
+                        onClick={() => {
+                          const subPartitionKeys = this.state.subPartitionKeys.filter((uniqueKey, j) => index !== j);
+                          this.setState({ subPartitionKeys });
+                        }}
+                      />
+                    </Stack>
+                  );
+                })}
+              {userContext.apiType === "SQL" && (
+                <Stack className="panelGroupSpacing">
+                  <DefaultButton
+                    styles={{ root: { padding: 0, width: 250, height: 30 }, label: { fontSize: 12 } }}
+                    hidden={this.state.useHashV1}
+                    disabled={this.state.subPartitionKeys.length >= Constants.BackendDefaults.maxNumMultiHashPartition}
+                    onClick={() => this.setState({ subPartitionKeys: [...this.state.subPartitionKeys, ""] })}
+                  >
+                    Add hierarchical partition key (preview)
+                  </DefaultButton>
+                  {this.state.subPartitionKeys.length > 0 && (
+                    <Text variant="small">
+                      <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
+                      partition your data with up to three levels of keys for better data distribution. Requires preview
+                      version of .NET V3 or Java V4 SDK.{" "}
+                      <Link href="https://aka.ms/cosmos-hierarchical-partitioning" target="_blank">
+                        Learn more
+                      </Link>
+                    </Text>
+                  )}
+                </Stack>
+              )}
            </Stack>
          )}

@@ -572,7 +676,17 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                  does not count towards the throughput you provisioned for the database. This throughput amount will be
                  billed in addition to the throughput amount you provisioned at the database level.`}
              >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon
+                  iconName="Info"
+                  className="panelInfoIcon"
+                  tabIndex={0}
+                  ariaLabel={`You can optionally provision dedicated throughput for a ${getCollectionName().toLocaleLowerCase()} within a database that has throughput
+                provisioned. This dedicated throughput amount will not be shared with other ${getCollectionName(
+                  true
+                ).toLocaleLowerCase()} in the database and
+                does not count towards the throughput you provisioned for the database. This throughput amount will be
+                billed in addition to the throughput amount you provisioned at the database level.`}
+                />
              </TooltipHost>
            </Stack>
          )}
@@ -603,11 +717,18 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                </Text>
                <TooltipHost
                  directionalHint={DirectionalHint.bottomLeftEdge}
-                  content="Unique keys provide developers with the ability to add a layer of data integrity to their database. By
-                      creating a unique key policy when a container is created, you ensure the uniqueness of one or more values
-                      per partition key."
+                  content={
+                    "Unique keys provide developers with the ability to add a layer of data integrity to their database. By creating a unique key policy when a container is created, you ensure the uniqueness of one or more values per partition key."
+                  }
                >
-                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                  <Icon
+                    iconName="Info"
+                    className="panelInfoIcon"
+                    tabIndex={0}
+                    ariaLabel={
+                      "Unique keys provide developers with the ability to add a layer of data integrity to their database. By creating a unique key policy when a container is created, you ensure the uniqueness of one or more values per partition key."
+                    }
+                  />
                </TooltipHost>
              </Stack>

@@ -670,7 +791,13 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                  directionalHint={DirectionalHint.bottomLeftEdge}
                  content={this.getAnalyticalStorageTooltipContent()}
                >
-                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                  <Icon
+                    iconName="Info"
+                    className="panelInfoIcon"
+                    tabIndex={0}
+                    ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without
+        impacting the performance of transactional workloads."
+                  />
                </TooltipHost>
              </Stack>

@@ -747,7 +874,12 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                        directionalHint={DirectionalHint.bottomLeftEdge}
                        content="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
                      >
-                        <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                        <Icon
+                          iconName="Info"
+                          className="panelInfoIcon"
+                          tabIndex={0}
+                          ariaLabel="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
+                        />
                      </TooltipHost>
                    </Stack>

@@ -767,18 +899,29 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                )}

                {userContext.apiType === "SQL" && (
-                  <Checkbox
-                    label="My partition key is larger than 101 bytes"
-                    checked={this.state.useHashV2}
-                    styles={{
-                      text: { fontSize: 12 },
-                      checkbox: { width: 12, height: 12 },
-                      label: { padding: 0, alignItems: "center" },
-                    }}
-                    onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
-                      this.setState({ useHashV2: isChecked })
-                    }
-                  />
+                  <Stack className="panelGroupSpacing">
+                    <Checkbox
+                      label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
+                      checked={this.state.useHashV1}
+                      styles={{
+                        text: { fontSize: 12 },
+                        checkbox: { width: 12, height: 12 },
+                        label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
+                      }}
+                      onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                        this.setState({ useHashV1: isChecked, subPartitionKeys: [] })
+                      }
+                    />
+                    <Text variant="small">
+                      <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> To ensure compatibility with
+                      older SDKs, the created container will use a legacy partitioning scheme that supports partition
+                      key values of size only up to 101 bytes. If this is enabled, you will not be able to use
+                      hierarchical partition keys.{" "}
+                      <Link href="https://aka.ms/cosmos-large-pk" target="_blank">
+                        Learn more
+                      </Link>
+                    </Text>
+                  </Stack>
                )}
              </Stack>
            </CollapsibleSectionComponent>
@@ -833,12 +976,20 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
    return isLowerCase ? partitionKeyName.toLocaleLowerCase() : partitionKeyName;
  }

-  private getPartitionKeyPlaceHolder(): string {
+  private getPartitionKeyPlaceHolder(index?: number): string {
    switch (userContext.apiType) {
      case "Mongo":
        return "e.g., address.zipCode";
      case "Gremlin":
        return "e.g., /address";
+      case "SQL":
+        return `${
+          index === undefined
+            ? "Required - first partition key e.g., /TenantId"
+            : index === 0
+            ? "second partition key e.g., /UserId"
+            : "third partition key e.g., /SessionId"
+        }`;
      default:
        return "e.g., /address/zipCode";
    }
@@ -1164,11 +1315,16 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
    }

    const uniqueKeyPolicy: DataModels.UniqueKeyPolicy = this.parseUniqueKeys();
-    const partitionKeyVersion = this.state.useHashV2 ? 2 : undefined;
+    const partitionKeyVersion = this.state.useHashV1 ? undefined : 2;
    const partitionKey: DataModels.PartitionKey = partitionKeyString
      ? {
-          paths: [partitionKeyString],
-          kind: "Hash",
+          paths: [
+            partitionKeyString,
+            ...(userContext.apiType === "SQL" && this.state.subPartitionKeys.length > 0
+              ? this.state.subPartitionKeys
+              : []),
+          ],
+          kind: userContext.apiType === "SQL" && this.state.subPartitionKeys.length > 0 ? "MultiHash" : "Hash",
          version: partitionKeyVersion,
        }
      : undefined;
--- a/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
+++ b/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
@@ -89,8 +89,8 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
      }
    } catch (error) {
      setLoadingFalse();
-      setFormError(error);
      const errorMessage = getErrorMessage(error);
+      setFormError(errorMessage);
      TelemetryProcessor.traceFailure(
        Action.DeleteDatabase,
        {
--- a/src/Explorer/Panes/PanelInfoErrorComponent.tsx
+++ b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
@@ -48,7 +48,7 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
          )}
        </Text>
        {showErrorDetails && (
-          <a className="paneErrorLink" role="link" onClick={expandConsole}>
+          <a className="paneErrorLink" role="link" onClick={expandConsole} tabIndex={0} onKeyPress={expandConsole}>
            More details
          </a>
        )}
--- a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
+++ b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
@@ -242,6 +242,11 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
    submitButtonText: getButtonLabel(userContext.apiType),
    onSubmit,
  };
+  const handlekeypressaddentity = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.key === "Enter" || event.key === "Space") {
+      addNewEntity();
+    }
+  };

  return (
    <RightPaneForm {...props}>
@@ -284,7 +289,13 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
          );
        })}
        {userContext.apiType !== "Cassandra" && (
-          <Stack horizontal onClick={addNewEntity} className="addButtonEntiy">
+          <Stack
+            horizontal
+            onClick={addNewEntity}
+            className="addButtonEntiy"
+            tabIndex={0}
+            onKeyPress={handlekeypressaddentity}
+          >
            <Image {...imageProps} src={AddPropertyIcon} alt="Add Entity" />
            <Text className="addNewParamStyle">{getAddButtonLabel(userContext.apiType)}</Text>
          </Stack>
--- a/src/Explorer/Panes/Tables/snapshots/AddTableEntityPanel.test.tsx.snap
+++ b/src/Explorer/Panes/Tables/snapshots/AddTableEntityPanel.test.tsx.snap
@@ -29,10 +29,14 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
          className="addButtonEntiy"
          horizontal={true}
          onClick={[Function]}
+          onKeyPress={[Function]}
+          tabIndex={0}
        >
          <div
            className="ms-Stack addButtonEntiy css-53"
            onClick={[Function]}
+            onKeyPress={[Function]}
+            tabIndex={0}
          >
            <StyledImageBase
              alt="Add Entity"
--- a/src/Explorer/Panes/snapshots/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/snapshots/AddCollectionPanel.test.tsx.snap
@@ -31,6 +31,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          directionalHint={4}
        >
          <Icon
+            ariaLabel="A database is analogous to a namespace. It is the unit of management for a set of containers."
            className="panelInfoIcon"
            iconName="Info"
            tabIndex={0}
@@ -124,6 +125,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
            directionalHint={4}
          >
            <Icon
+              ariaLabel="Throughput configured at the database level will be shared across all containers within the database."
              className="panelInfoIcon"
              iconName="Info"
              tabIndex={0}
@@ -163,6 +165,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          directionalHint={4}
        >
          <Icon
+            ariaLabel="Unique identifier for the container and used for id-based routing through REST and all SDKs."
            className="panelInfoIcon"
            iconName="Info"
            tabIndex={0}
@@ -206,6 +209,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          directionalHint={4}
        >
          <Icon
+            ariaLabel="The partition key is used to automatically distribute data across partitions for scalability. Choose a property in your JSON document that has a wide range of values and evenly distributes request volume. For small read-heavy workloads or write-heavy workloads of any size, id is often a good choice."
            className="panelInfoIcon"
            iconName="Info"
            tabIndex={0}
@@ -223,13 +227,36 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
        id="addCollection-partitionKeyValue"
        onChange={[Function]}
        pattern=".*"
-        placeholder="e.g., /address/zipCode"
+        placeholder="Required - first partition key e.g., /TenantId"
        required={true}
        size={40}
        title=""
        type="text"
        value=""
      />
+      <Stack
+        className="panelGroupSpacing"
+      >
+        <CustomizedDefaultButton
+          disabled={false}
+          hidden={false}
+          onClick={[Function]}
+          styles={
+            Object {
+              "label": Object {
+                "fontSize": 12,
+              },
+              "root": Object {
+                "height": 30,
+                "padding": 0,
+                "width": 250,
+              },
+            }
+          }
+        >
+          Add hierarchical partition key (preview)
+        </CustomizedDefaultButton>
+      </Stack>
    </Stack>
    <Stack>
      <Stack
@@ -246,6 +273,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          directionalHint={4}
        >
          <Icon
+            ariaLabel="Unique keys provide developers with the ability to add a layer of data integrity to their database. By creating a unique key policy when a container is created, you ensure the uniqueness of one or more values per partition key."
            className="panelInfoIcon"
            iconName="Info"
            tabIndex={0}
@@ -303,6 +331,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          directionalHint={4}
        >
          <Icon
+            ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
            className="panelInfoIcon"
            iconName="Info"
            tabIndex={0}
@@ -396,26 +425,49 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
        className="panelGroupSpacing"
        id="collapsibleSectionContent"
      >
-        <StyledCheckboxBase
-          checked={false}
-          label="My partition key is larger than 101 bytes"
-          onChange={[Function]}
-          styles={
-            Object {
-              "checkbox": Object {
-                "height": 12,
-                "width": 12,
-              },
-              "label": Object {
-                "alignItems": "center",
-                "padding": 0,
-              },
-              "text": Object {
-                "fontSize": 12,
-              },
+        <Stack
+          className="panelGroupSpacing"
+        >
+          <StyledCheckboxBase
+            checked={false}
+            label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
+            onChange={[Function]}
+            styles={
+              Object {
+                "checkbox": Object {
+                  "height": 12,
+                  "width": 12,
+                },
+                "label": Object {
+                  "alignItems": "center",
+                  "padding": 0,
+                  "whiteSpace": "break-spaces",
+                  "wordWrap": "break-word",
+                },
+                "text": Object {
+                  "fontSize": 12,
+                },
+              }
            }
-          }
-        />
+          />
+          <Text
+            variant="small"
+          >
+            <Icon
+              className="removeIcon"
+              iconName="InfoSolid"
+              tabIndex={0}
+            />
+             To ensure compatibility with older SDKs, the created container will use a legacy partitioning scheme that supports partition key values of size only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.
+             
+            <StyledLinkBase
+              href="https://aka.ms/cosmos-large-pk"
+              target="_blank"
+            >
+              Learn more
+            </StyledLinkBase>
+          </Text>
+        </Stack>
      </Stack>
    </CollapsibleSectionComponent>
  </div>
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -9,7 +9,7 @@ import {
  Stack,
  TeachingBubble,
  TeachingBubbleContent,
-  Text,
+  Text
 } from "@fluentui/react";
 import { sendMessage } from "Common/MessageHandler";
 import { MessageTypes } from "Contracts/ExplorerContracts";
@@ -528,7 +528,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
              >
                {item.title}
              </Link>
-              <Image src={LinkIcon} />
+              <Image src={LinkIcon} alt=" " />
            </Stack>
            <Text>{item.description}</Text>
          </Stack>
--- a/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
+++ b/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
@@ -516,7 +516,7 @@ export default class QueryBuilderViewModel {
  };

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

 export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
-  const { openedTabs, openedReactTabs, activeTab, activeReactTab, showNetworkSettingsWarning } = useTabs();
+  const { openedTabs, openedReactTabs, activeTab, activeReactTab, networkSettingsWarning } = useTabs();

  return (
    <div className="tabsManagerContainer">
-      {showNetworkSettingsWarning && (
+      {networkSettingsWarning && (
        <MessageBar
          messageBarType={MessageBarType.warning}
          actions={
-            <MessageBarButton onClick={() => sendMessage({ type: MessageTypes.OpenCosmosDBNetworkingBlade })}>
+            <MessageBarButton onClick={() => sendMessage({ type: MessageTypes.OpenPostgresNetworkingBlade })}>
              Change network settings
            </MessageBarButton>
          }
          messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
        >
-          The Network settings for this account are preventing access from Data Explorer. Please allow access from Azure
-          Portal to proceed.
+          {networkSettingsWarning}
        </MessageBar>
      )}
      <div id="content" className="flexContainer hideOverflows">
--- a/src/Platform/Hosted/extractFeatures.ts
+++ b/src/Platform/Hosted/extractFeatures.ts
@@ -29,6 +29,7 @@ export type Features = {
  readonly mongoProxyEndpoint?: string;
  readonly mongoProxyAPIs?: string;
  readonly enableThroughputCap: boolean;
+  readonly enableHierarchicalKeys: boolean;

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

--- a/src/Utils/NetworkUtility.ts
+++ b/src/Utils/NetworkUtility.ts
@@ -10,31 +10,43 @@ const PortalIPs: { [key: string]: string[] } = {
  usnat: ["7.28.202.68"],
 };

-export const doNetworkSettingsAllowDataExplorerAccess = (): boolean => {
+export const getNetworkSettingsWarningMessage = (clientIpAddress: string): string => {
  const accountProperties = userContext.databaseAccount?.properties;

  if (!accountProperties) {
-    return false;
+    return "";
  }

  // public network access is disabled
  if (accountProperties.publicNetworkAccess !== "Enabled") {
-    return false;
+    return "The Network settings for this account are preventing access from Data Explorer. Please enable public access to proceed.";
  }

  const ipRules = accountProperties.ipRules;
  // public network access is set to "All networks"
  if (ipRules.length === 0) {
-    return true;
+    return "";
  }

-  const portalIPs = PortalIPs[userContext.portalEnv];
-  let numberOfMatches = 0;
-  ipRules.forEach((ipRule) => {
-    if (portalIPs.indexOf(ipRule.ipAddressOrRange) !== -1) {
-      numberOfMatches++;
-    }
-  });
+  if (userContext.apiType === "Cassandra" || userContext.apiType === "Mongo") {
+    const portalIPs = PortalIPs[userContext.portalEnv];
+    let numberOfMatches = 0;
+    ipRules.forEach((ipRule) => {
+      if (portalIPs.indexOf(ipRule.ipAddressOrRange) !== -1) {
+        numberOfMatches++;
+      }
+    });

-  return numberOfMatches === portalIPs.length;
+    if (numberOfMatches !== portalIPs.length) {
+      return "The Network settings for this account are preventing access from Data Explorer. Please allow access from Azure Portal to proceed.";
+    }
+
+    return "";
+  } else {
+    if (!clientIpAddress || ipRules.some((ipRule) => ipRule.ipAddressOrRange === clientIpAddress)) {
+      return "";
+    }
+
+    return "The Network settings for this account are preventing access from Data Explorer. Please add your current IP to the firewall rules to proceed.";
+  }
 };
--- a/src/hooks/useKnockoutExplorer.ts
+++ b/src/hooks/useKnockoutExplorer.ts
@@ -1,6 +1,6 @@
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import { useEffect, useState } from "react";
-import { doNetworkSettingsAllowDataExplorerAccess } from "Utils/NetworkUtility";
+import { getNetworkSettingsWarningMessage } from "Utils/NetworkUtility";
 import { applyExplorerBindings } from "../applyExplorerBindings";
 import { AuthType } from "../AuthType";
 import { AccountKind, Flights } from "../Common/Constants";
@@ -382,8 +382,8 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
    }
  }

-  const isDataExplorerAccessAllowed = doNetworkSettingsAllowDataExplorerAccess();
-  useTabs.getState().setShowNetworkSettingsWarning(!isDataExplorerAccessAllowed);
+  const warningMessage = getNetworkSettingsWarningMessage(inputs.clientIpAddress);
+  useTabs.getState().setNetworkSettingsWarning(warningMessage);

  if (inputs.features) {
    Object.assign(userContext.features, extractFeatures(new URLSearchParams(inputs.features)));
--- a/src/hooks/useTabs.ts
+++ b/src/hooks/useTabs.ts
@@ -9,7 +9,7 @@ interface TabsState {
  openedReactTabs: ReactTabKind[];
  activeTab: TabsBase | undefined;
  activeReactTab: ReactTabKind | undefined;
-  showNetworkSettingsWarning: boolean;
+  networkSettingsWarning: string;
  activateTab: (tab: TabsBase) => void;
  activateNewTab: (tab: TabsBase) => void;
  activateReactTab: (tabkind: ReactTabKind) => void;
@@ -21,7 +21,7 @@ interface TabsState {
  closeAllNotebookTabs: (hardClose: boolean) => void;
  openAndActivateReactTab: (tabKind: ReactTabKind) => void;
  closeReactTab: (tabKind: ReactTabKind) => void;
-  setShowNetworkSettingsWarning: (showWarning: boolean) => void;
+  setNetworkSettingsWarning: (warningMessage: string) => void;
 }

 export enum ReactTabKind {
@@ -35,7 +35,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
  openedReactTabs: [ReactTabKind.Home],
  activeTab: undefined,
  activeReactTab: ReactTabKind.Home,
-  showNetworkSettingsWarning: false,
+  networkSettingsWarning: "",
  activateTab: (tab: TabsBase): void => {
    if (get().openedTabs.some((openedTab) => openedTab.tabId === tab.tabId)) {
      set({ activeTab: tab, activeReactTab: undefined });
@@ -145,5 +145,5 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({

    set({ openedReactTabs: updatedOpenedReactTabs });
  },
-  setShowNetworkSettingsWarning: (showWarning: boolean) => set({ showNetworkSettingsWarning: showWarning }),
+  setNetworkSettingsWarning: (warningMessage: string) => set({ networkSettingsWarning: warningMessage }),
 }));
Author	SHA1	Message	Date
Sampath	5a660551c6	alt text attribute for images	2023-02-25 22:53:52 +05:30
Sampath	b2d59f3b3f	autoscale and manual radiobuutton fixes	2023-02-06 23:48:50 +05:30
MokireddySampath	850f1dfb97	rework for defect-1704149 (#1384 )	2023-02-04 01:51:11 +05:30
sunghyunkang1111	a827e79317	remove feature flag and add preview text in the button (#1383 )	2023-02-03 10:15:35 -06:00
MokireddySampath	7dbccff41d	fix for defect 1703851&1703931 (#1379 )	2023-02-01 22:20:03 +05:30
victor-meng	9184684e75	Improve network settings warning message (#1380 )	2023-01-25 15:04:39 -08:00
sunghyunkang1111	701f486d8f	Add hierachical partition key in add containers in SQL (#1377 ) * Add hierachical partition key in add containers in SQL * Add hierachical partition key in add containers in SQL * fix unit test cases and update snapshot * add learn more links and feature flag * update snapsho * separate subpartition key logic * separate subpartition key logic	2023-01-23 09:09:29 -06:00
victor-meng	5059917edf	Only show networking settings warning for Mongo and Cassandra accounts (#1376 )	2023-01-18 11:12:10 -08:00
Asier Isayas	ab1409efb1	Show delete database error (#1373 ) Co-authored-by: Asier Isayas <aisayas@microsoft.com>	2023-01-13 14:06:24 -05:00
MokireddySampath	5de9e682ba	Defect1711833 (#1370 ) * keyboard navigation for defects 1722611,1722618 * Fixes for keyboard navigation of add new clause,edit,remove property,insert filter line, remove filter line * Revert "keyboard navigation for defects 1722611,1722618" This reverts commit `9383609a22`. * html,css changes corected after reversion * Revert "html,css changes corected after reversion" This reverts commit `712e0e0c1e`. * committing changes for the keyboard navigation * format fixes * changes to addcollectionpanel.test.tsx snp file * changes in infotooltip for defct * Revert "changes in infotooltip for defct" This reverts commit `ca9833e208`. * commit for tooltip in defect 1704149 * Revert "commit for tooltip in defect 1704149" This reverts commit `44766e8213`. * InfoTooltip changes * update snapshot * defect1722595 Bug 1722595: [Screen readers Azure Cosmos DB Scale& Settings: Screen reader (NVDA) is not announcing status message which is displayed on the screen after radio button is selected under scale tab. * more options in delete entity dialog is not accessible through keyboard * Revert "more options in delete entity dialog is not accessible through keyboard" This reverts commit `23a05ef18e`. * more options in delete entity dialog is not accessible throgh keyboard * remove native html with role='alert' for messagebar * role added for messagebar fluentui component	2023-01-10 21:32:29 +05:30
jawelton74	b2ab979360	Display large partition key message for SQL API accounts only. (#1371 )	2023-01-09 14:22:32 -08:00
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