Update AddTableEntityPanel.test.tsx.snap

Update QuickstartCarousel.tsx
Update AddTableEntityPanel.tsx
2025-12-23 10:51:30 +00:00 · 2023-06-06 22:13:02 +05:30 · 2023-06-06 22:11:22 +05:30 · 2023-05-31 14:54:26 +05:30 · 2023-05-31 14:53:33 +05:30 · 2023-05-31 14:51:35 +05:30
111 changed files with 9244 additions and 1307 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -92,11 +92,11 @@ jobs:
          name: dist
          path: dist/
      - name: Upload build to preview blob storage
-        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
+        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --account-key="${PREVIEW_STORAGE_KEY}" --overwrite true
        env:
          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
      - name: Upload preview config to blob storage
-        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
+        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}" --overwrite true
        env:
          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
  endtoendemulator:
@@ -182,7 +182,7 @@ jobs:
        with:
          name: dist
      - run: cp ./configs/prod.json config.json
-      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
+      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
      - uses: actions/upload-artifact@v2
@@ -207,7 +207,7 @@ jobs:
          name: dist
      - run: cp ./configs/mpac.json config.json
      - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.MPAC/g' DataExplorer.nuspec
-      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
+      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
      - uses: actions/upload-artifact@v2
--- a/docs/enums/selfserve_selfserveutils.bladetype.html
+++ b/docs/enums/selfserve_selfserveutils.bladetype.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <html class="default no-js">
+
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -9,256 +10,292 @@
 	<link rel="stylesheet" href="../assets/css/main.css">
 	<script async src="../assets/js/search.js" id="search-script"></script>
 </head>
+
 <body>
-<header>
-	<div class="tsd-page-toolbar">
-		<div class="container">
-			<div class="table-wrap">
-				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
-					<div class="field">
-						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
-						<input id="tsd-search-field" type="text" />
-					</div>
-					<ul class="results">
-						<li class="state loading">Preparing search index...</li>
-						<li class="state failure">The search index is not available</li>
-					</ul>
-					<a href="../index.html" class="title">cosmos-explorer</a>
-				</div>
-				<div class="table-cell" id="tsd-widgets">
-					<div id="tsd-filter">
-						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
-						<div class="tsd-filter-group">
-							<div class="tsd-select" id="tsd-filter-visibility">
-								<span class="tsd-select-label">All</span>
-								<ul class="tsd-select-list">
-									<li data-value="public">Public</li>
-									<li data-value="protected">Public/Protected</li>
-									<li data-value="private" class="selected">All</li>
-								</ul>
-							</div>
-							<input type="checkbox" id="tsd-filter-inherited" checked />
-							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
-							<input type="checkbox" id="tsd-filter-externals" checked />
-							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+	<header>
+		<div class="tsd-page-toolbar">
+			<div class="container">
+				<div class="table-wrap">
+					<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+						<div class="field">
+							<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+							<input id="tsd-search-field" type="text" />
 						</div>
+						<ul class="results">
+							<li class="state loading">Preparing search index...</li>
+							<li class="state failure">The search index is not available</li>
+						</ul>
+						<a href="../index.html" class="title">cosmos-explorer</a>
+					</div>
+					<div class="table-cell" id="tsd-widgets">
+						<div id="tsd-filter">
+							<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+							<div class="tsd-filter-group">
+								<div class="tsd-select" id="tsd-filter-visibility">
+									<span class="tsd-select-label">All</span>
+									<ul class="tsd-select-list">
+										<li data-value="public">Public</li>
+										<li data-value="protected">Public/Protected</li>
+										<li data-value="private" class="selected">All</li>
+									</ul>
+								</div>
+								<input type="checkbox" id="tsd-filter-inherited" checked />
+								<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+								<input type="checkbox" id="tsd-filter-externals" checked />
+								<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+							</div>
+						</div>
+						<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
 					</div>
-					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
 				</div>
 			</div>
 		</div>
-	</div>
-	<div class="tsd-page-title">
-		<div class="container">
-			<ul class="tsd-breadcrumb">
-				<li>
-					<a href="../modules.html">cosmos-explorer</a>
-				</li>
-				<li>
-					<a href="../modules/selfserve_selfserveutils.html">SelfServe/SelfServeUtils</a>
-				</li>
-				<li>
-					<a href="selfserve_selfserveutils.bladetype.html">BladeType</a>
-				</li>
-			</ul>
-			<h1>Enumeration BladeType</h1>
+		<div class="tsd-page-title">
+			<div class="container">
+				<ul class="tsd-breadcrumb">
+					<li>
+						<a href="../modules.html">cosmos-explorer</a>
+					</li>
+					<li>
+						<a href="../modules/selfserve_selfserveutils.html">SelfServe/SelfServeUtils</a>
+					</li>
+					<li>
+						<a href="selfserve_selfserveutils.bladetype.html">BladeType</a>
+					</li>
+				</ul>
+				<h1>Enumeration BladeType</h1>
+			</div>
 		</div>
-	</div>
-</header>
-<div class="container container-main">
-	<div class="row">
-		<div class="col-8 col-content">
-			<section class="tsd-panel tsd-comment">
-				<div class="tsd-comment tsd-typography">
-					<div class="lead">
-						<p>Portal Blade types</p>
+	</header>
+	<div class="container container-main">
+		<div class="row">
+			<div class="col-8 col-content">
+				<section class="tsd-panel tsd-comment">
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Portal Blade types</p>
+						</div>
 					</div>
-				</div>
-			</section>
-			<section class="tsd-panel-group tsd-index-group">
-				<h2>Index</h2>
-				<section class="tsd-panel tsd-index-panel">
-					<div class="tsd-index-content">
-						<section class="tsd-index-section ">
-							<h3>Enumeration members</h3>
-							<ul class="tsd-index-list">
-								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#cassandrakeys" class="tsd-kind-icon">Cassandra<wbr>Keys</a></li>
-								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#gremlinkeys" class="tsd-kind-icon">Gremlin<wbr>Keys</a></li>
-								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#metrics" class="tsd-kind-icon">Metrics</a></li>
-								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#mongokeys" class="tsd-kind-icon">Mongo<wbr>Keys</a></li>
-								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#sqlkeys" class="tsd-kind-icon">Sql<wbr>Keys</a></li>
-								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#tablekeys" class="tsd-kind-icon">Table<wbr>Keys</a></li>
+				</section>
+				<section class="tsd-panel-group tsd-index-group">
+					<h2>Index</h2>
+					<section class="tsd-panel tsd-index-panel">
+						<div class="tsd-index-content">
+							<section class="tsd-index-section ">
+								<h3>Enumeration members</h3>
+								<ul class="tsd-index-list">
+									<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a
+											href="selfserve_selfserveutils.bladetype.html#cassandrakeys"
+											class="tsd-kind-icon">Cassandra<wbr>Keys</a></li>
+									<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a
+											href="selfserve_selfserveutils.bladetype.html#gremlinkeys"
+											class="tsd-kind-icon">Gremlin<wbr>Keys</a></li>
+									<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a
+											href="selfserve_selfserveutils.bladetype.html#metrics"
+											class="tsd-kind-icon">Metrics</a></li>
+									<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a
+											href="selfserve_selfserveutils.bladetype.html#mongokeys"
+											class="tsd-kind-icon">Mongo<wbr>Keys</a></li>
+									<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a
+											href="selfserve_selfserveutils.bladetype.html#sqlkeys"
+											class="tsd-kind-icon">Sql<wbr>Keys</a></li>
+									<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a
+											href="selfserve_selfserveutils.bladetype.html#tablekeys"
+											class="tsd-kind-icon">Table<wbr>Keys</a></li>
+								</ul>
+							</section>
+						</div>
+					</section>
+				</section>
+				<section class="tsd-panel-group tsd-member-group ">
+					<h2>Enumeration members</h2>
+					<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+						<a name="cassandrakeys" class="tsd-anchor"></a>
+						<h3>Cassandra<wbr>Keys</h3>
+						<div class="tsd-signature tsd-kind-icon">Cassandra<wbr>Keys<span
+								class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> =
+								&quot;cassandraDbKeys&quot;</span></div>
+						<aside class="tsd-sources">
+						</aside>
+						<div class="tsd-comment tsd-typography">
+							<div class="lead">
+								<p>Keys blade of a Azure Cosmos DB for Apache Cassandra account.</p>
+							</div>
+						</div>
+					</section>
+					<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+						<a name="gremlinkeys" class="tsd-anchor"></a>
+						<h3>Gremlin<wbr>Keys</h3>
+						<div class="tsd-signature tsd-kind-icon">Gremlin<wbr>Keys<span
+								class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> =
+								&quot;keys&quot;</span></div>
+						<aside class="tsd-sources">
+						</aside>
+						<div class="tsd-comment tsd-typography">
+							<div class="lead">
+								<p>Keys blade of a Azure Cosmos DB for Apache Gremlin account.</p>
+							</div>
+						</div>
+					</section>
+					<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+						<a name="metrics" class="tsd-anchor"></a>
+						<h3>Metrics</h3>
+						<div class="tsd-signature tsd-kind-icon">Metrics<span class="tsd-signature-symbol">:</span>
+							<span class="tsd-signature-symbol"> = &quot;metrics&quot;</span></div>
+						<aside class="tsd-sources">
+						</aside>
+						<div class="tsd-comment tsd-typography">
+							<div class="lead">
+								<p>Metrics blade of an Azure Cosmos DB account.</p>
+							</div>
+						</div>
+					</section>
+					<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+						<a name="mongokeys" class="tsd-anchor"></a>
+						<h3>Mongo<wbr>Keys</h3>
+						<div class="tsd-signature tsd-kind-icon">Mongo<wbr>Keys<span
+								class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> =
+								&quot;mongoDbKeys&quot;</span></div>
+						<aside class="tsd-sources">
+						</aside>
+						<div class="tsd-comment tsd-typography">
+							<div class="lead">
+								<p>Keys blade of a Azure Cosmos DB for MongoDB account.</p>
+							</div>
+						</div>
+					</section>
+					<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+						<a name="sqlkeys" class="tsd-anchor"></a>
+						<h3>Sql<wbr>Keys</h3>
+						<div class="tsd-signature tsd-kind-icon">Sql<wbr>Keys<span class="tsd-signature-symbol">:</span>
+							<span class="tsd-signature-symbol"> = &quot;keys&quot;</span></div>
+						<aside class="tsd-sources">
+						</aside>
+						<div class="tsd-comment tsd-typography">
+							<div class="lead">
+								<p>Keys blade of a Azure Cosmos DB for NoSQL account.</p>
+							</div>
+						</div>
+					</section>
+					<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+						<a name="tablekeys" class="tsd-anchor"></a>
+						<h3>Table<wbr>Keys</h3>
+						<div class="tsd-signature tsd-kind-icon">Table<wbr>Keys<span
+								class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> =
+								&quot;tableKeys&quot;</span></div>
+						<aside class="tsd-sources">
+						</aside>
+						<div class="tsd-comment tsd-typography">
+							<div class="lead">
+								<p>Keys blade of a Azure Cosmos DB for Table account.</p>
+							</div>
+						</div>
+					</section>
+				</section>
+			</div>
+			<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+				<nav class="tsd-navigation primary">
+					<ul>
+						<li class=" ">
+							<a href="../modules.html">Modules</a>
+						</li>
+						<li class=" tsd-kind-module">
+							<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+						</li>
+						<li class=" tsd-kind-module">
+							<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr>
+								<wbr>What is currently supported?</a>
+						</li>
+						<li class=" tsd-kind-module">
+							<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+						</li>
+						<li class=" tsd-kind-module">
+							<a
+								href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+						</li>
+						<li class=" tsd-kind-module">
+							<a
+								href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+						</li>
+						<li class="current tsd-kind-module">
+							<a
+								href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+						</li>
+					</ul>
+				</nav>
+				<nav class="tsd-navigation secondary menu-sticky">
+					<ul class="before-current">
+					</ul>
+					<ul class="current">
+						<li class="current tsd-kind-enum tsd-parent-kind-module">
+							<a href="selfserve_selfserveutils.bladetype.html" class="tsd-kind-icon">Blade<wbr>Type</a>
+							<ul>
+								<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+									<a href="selfserve_selfserveutils.bladetype.html#cassandrakeys"
+										class="tsd-kind-icon">Cassandra<wbr>Keys</a>
+								</li>
+								<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+									<a href="selfserve_selfserveutils.bladetype.html#gremlinkeys"
+										class="tsd-kind-icon">Gremlin<wbr>Keys</a>
+								</li>
+								<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+									<a href="selfserve_selfserveutils.bladetype.html#metrics"
+										class="tsd-kind-icon">Metrics</a>
+								</li>
+								<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+									<a href="selfserve_selfserveutils.bladetype.html#mongokeys"
+										class="tsd-kind-icon">Mongo<wbr>Keys</a>
+								</li>
+								<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+									<a href="selfserve_selfserveutils.bladetype.html#sqlkeys"
+										class="tsd-kind-icon">Sql<wbr>Keys</a>
+								</li>
+								<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+									<a href="selfserve_selfserveutils.bladetype.html#tablekeys"
+										class="tsd-kind-icon">Table<wbr>Keys</a>
+								</li>
 							</ul>
-						</section>
-					</div>
-				</section>
-			</section>
-			<section class="tsd-panel-group tsd-member-group ">
-				<h2>Enumeration members</h2>
-				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
-					<a name="cassandrakeys" class="tsd-anchor"></a>
-					<h3>Cassandra<wbr>Keys</h3>
-					<div class="tsd-signature tsd-kind-icon">Cassandra<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;cassandraDbKeys&quot;</span></div>
-					<aside class="tsd-sources">
-					</aside>
-					<div class="tsd-comment tsd-typography">
-						<div class="lead">
-							<p>Keys blade of a Cassandra API account.</p>
-						</div>
-					</div>
-				</section>
-				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
-					<a name="gremlinkeys" class="tsd-anchor"></a>
-					<h3>Gremlin<wbr>Keys</h3>
-					<div class="tsd-signature tsd-kind-icon">Gremlin<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;keys&quot;</span></div>
-					<aside class="tsd-sources">
-					</aside>
-					<div class="tsd-comment tsd-typography">
-						<div class="lead">
-							<p>Keys blade of a Gremlin API account.</p>
-						</div>
-					</div>
-				</section>
-				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
-					<a name="metrics" class="tsd-anchor"></a>
-					<h3>Metrics</h3>
-					<div class="tsd-signature tsd-kind-icon">Metrics<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;metrics&quot;</span></div>
-					<aside class="tsd-sources">
-					</aside>
-					<div class="tsd-comment tsd-typography">
-						<div class="lead">
-							<p>Metrics blade of an Azure Cosmos DB account.</p>
-						</div>
-					</div>
-				</section>
-				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
-					<a name="mongokeys" class="tsd-anchor"></a>
-					<h3>Mongo<wbr>Keys</h3>
-					<div class="tsd-signature tsd-kind-icon">Mongo<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;mongoDbKeys&quot;</span></div>
-					<aside class="tsd-sources">
-					</aside>
-					<div class="tsd-comment tsd-typography">
-						<div class="lead">
-							<p>Keys blade of a Mongo API account.</p>
-						</div>
-					</div>
-				</section>
-				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
-					<a name="sqlkeys" class="tsd-anchor"></a>
-					<h3>Sql<wbr>Keys</h3>
-					<div class="tsd-signature tsd-kind-icon">Sql<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;keys&quot;</span></div>
-					<aside class="tsd-sources">
-					</aside>
-					<div class="tsd-comment tsd-typography">
-						<div class="lead">
-							<p>Keys blade of a SQL API account.</p>
-						</div>
-					</div>
-				</section>
-				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
-					<a name="tablekeys" class="tsd-anchor"></a>
-					<h3>Table<wbr>Keys</h3>
-					<div class="tsd-signature tsd-kind-icon">Table<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;tableKeys&quot;</span></div>
-					<aside class="tsd-sources">
-					</aside>
-					<div class="tsd-comment tsd-typography">
-						<div class="lead">
-							<p>Keys blade of a Table API account.</p>
-						</div>
-					</div>
-				</section>
-			</section>
-		</div>
-		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-			<nav class="tsd-navigation primary">
-				<ul>
-					<li class=" ">
-						<a href="../modules.html">Modules</a>
-					</li>
-					<li class=" tsd-kind-module">
-						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
-					</li>
-					<li class=" tsd-kind-module">
-						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
-					</li>
-					<li class=" tsd-kind-module">
-						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
-					</li>
-					<li class=" tsd-kind-module">
-						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
-					</li>
-					<li class=" tsd-kind-module">
-						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
-					</li>
-					<li class="current tsd-kind-module">
-						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
-					</li>
-				</ul>
-			</nav>
-			<nav class="tsd-navigation secondary menu-sticky">
-				<ul class="before-current">
-				</ul>
-				<ul class="current">
-					<li class="current tsd-kind-enum tsd-parent-kind-module">
-						<a href="selfserve_selfserveutils.bladetype.html" class="tsd-kind-icon">Blade<wbr>Type</a>
-						<ul>
-							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
-								<a href="selfserve_selfserveutils.bladetype.html#cassandrakeys" class="tsd-kind-icon">Cassandra<wbr>Keys</a>
-							</li>
-							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
-								<a href="selfserve_selfserveutils.bladetype.html#gremlinkeys" class="tsd-kind-icon">Gremlin<wbr>Keys</a>
-							</li>
-							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
-								<a href="selfserve_selfserveutils.bladetype.html#metrics" class="tsd-kind-icon">Metrics</a>
-							</li>
-							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
-								<a href="selfserve_selfserveutils.bladetype.html#mongokeys" class="tsd-kind-icon">Mongo<wbr>Keys</a>
-							</li>
-							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
-								<a href="selfserve_selfserveutils.bladetype.html#sqlkeys" class="tsd-kind-icon">Sql<wbr>Keys</a>
-							</li>
-							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
-								<a href="selfserve_selfserveutils.bladetype.html#tablekeys" class="tsd-kind-icon">Table<wbr>Keys</a>
-							</li>
-						</ul>
-					</li>
-				</ul>
-				<ul class="after-current">
-					<li class=" tsd-kind-enum tsd-parent-kind-module">
-						<a href="selfserve_selfserveutils.selfservetype.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Type</a>
-					</li>
-					<li class=" tsd-kind-function tsd-parent-kind-module">
-						<a href="../modules/selfserve_selfserveutils.html#generatebladelink" class="tsd-kind-icon">generate<wbr>Blade<wbr>Link</a>
-					</li>
-				</ul>
-			</nav>
+						</li>
+					</ul>
+					<ul class="after-current">
+						<li class=" tsd-kind-enum tsd-parent-kind-module">
+							<a href="selfserve_selfserveutils.selfservetype.html"
+								class="tsd-kind-icon">Self<wbr>Serve<wbr>Type</a>
+						</li>
+						<li class=" tsd-kind-function tsd-parent-kind-module">
+							<a href="../modules/selfserve_selfserveutils.html#generatebladelink"
+								class="tsd-kind-icon">generate<wbr>Blade<wbr>Link</a>
+						</li>
+					</ul>
+				</nav>
+			</div>
 		</div>
 	</div>
-</div>
-<footer class="with-border-bottom">
-	<div class="container">
-		<h2>Legend</h2>
-		<div class="tsd-legend-group">
-			<ul class="tsd-legend">
-				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
-				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
-			</ul>
-			<ul class="tsd-legend">
-				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
-			</ul>
-			<ul class="tsd-legend">
-				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
-			</ul>
-			<ul class="tsd-legend">
-				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
-			</ul>
+	<footer class="with-border-bottom">
+		<div class="container">
+			<h2>Legend</h2>
+			<div class="tsd-legend-group">
+				<ul class="tsd-legend">
+					<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+					<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+				</ul>
+				<ul class="tsd-legend">
+					<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+				</ul>
+				<ul class="tsd-legend">
+					<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				</ul>
+				<ul class="tsd-legend">
+					<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+				</ul>
+			</div>
 		</div>
+	</footer>
+	<div class="container tsd-generator">
+		<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
 	</div>
-</footer>
-<div class="container tsd-generator">
-	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
-</div>
-<div class="overlay"></div>
-<script src="../assets/js/main.js"></script>
+	<div class="overlay"></div>
+	<script src="../assets/js/main.js"></script>
 </body>
+
 </html>
--- a/images/firewallRule.png
+++ b/images/firewallRule.png
--- a/images/imgarrowlefticon.svg
+++ b/images/imgarrowlefticon.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" ?>
 <!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
 <svg enable-background="new 0 0 256 256" height="256px" id="Layer_1" version="1.1" viewBox="0 0 256 256" width="256px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<path stroke="white" stroke-width="0.5" fill="#b5a3a3" d="M179.199,38.399c0,1.637-0.625,3.274-1.875,4.524l-85.076,85.075l85.076,85.075c2.5,2.5,2.5,6.55,0,9.05s-6.55,2.5-9.05,0  l-89.601-89.6c-2.5-2.5-2.5-6.551,0-9.051l89.601-89.6c2.5-2.5,6.55-2.5,9.05,0C178.574,35.124,179.199,36.762,179.199,38.399z"/>
+<path stroke="white" stroke-width="0.5" fill="#000" d="M179.199,38.399c0,1.637-0.625,3.274-1.875,4.524l-85.076,85.075l85.076,85.075c2.5,2.5,2.5,6.55,0,9.05s-6.55,2.5-9.05,0  l-89.601-89.6c-2.5-2.5-2.5-6.551,0-9.051l89.601-89.6c2.5-2.5,6.55-2.5,9.05,0C178.574,35.124,179.199,36.762,179.199,38.399z"/>
 </svg>
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,7 +18,8 @@ module.exports = {
  // clearMocks: false,

  // Indicates whether the coverage information should be collected while executing the test
-  collectCoverage: true,
+
+  collectCoverage: process.env.skipCodeCoverage === "true" ? false : true,

  // An array of glob patterns indicating a set of files for which coverage information should be collected
  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
--- a/less/TableStyles/fulldatatables.less
+++ b/less/TableStyles/fulldatatables.less
@@ -650,4 +650,4 @@ tr:hover td.nameColumnText {

 .context-menu-item.icon-customize-columns {
    background-image: url(../../images/Options.svg);
-}
+}
--- a/less/TableStyles/queryBuilder.less
+++ b/less/TableStyles/queryBuilder.less
@@ -3,337 +3,337 @@
@import "../Common/Constants";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-
 /*
@media only screen and (max-width: 1200px) {
    .clause-table {
@@ -524,4 +522,4 @@ input::-webkit-inner-spin-button {
        width: 100%;
        padding-top: 10px;
    }
-}*/
+}*/
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -2576,6 +2576,10 @@ a:link {
 .querydropdown.placeholderVisible {
  font-style: italic;
 }
+.querydropdown.placeholderVisible::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: #767474;
+  opacity: 1; 
+}

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

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

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

 .notebookResourceTree {
@@ -23,6 +28,4 @@
  .clickDisabled {
    pointer-events: none;
  }
-}
-
-
+}
--- a/sampleData/sqlSampleData.json
+++ b/sampleData/sqlSampleData.json
--- a/src/Common/CollapsedResourceTree.tsx
+++ b/src/Common/CollapsedResourceTree.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
 import arrowLeftImg from "../../images/imgarrowlefticon.svg";
-import { userContext } from "../UserContext";
+import { getApiShortDisplayName } from "../Utils/APITypeUtils";
 import { NormalizedEventKey } from "./Constants";

 export interface CollapsedResourceTreeProps {
@@ -36,7 +36,7 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
            id="collapseToggleLeftPaneButton"
            role="button"
            tabIndex={0}
-            aria-label="Expand Tree"
+            aria-label={getApiShortDisplayName() + `Expand tree`}
            onClick={toggleLeftPaneExpanded}
            onKeyPress={onKeyPressToggleLeftPaneExpanded}
            ref={focusButton}
@@ -45,7 +45,7 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
              <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
            </span>
            <span className="collectionCollapsed">
-              <span>{userContext.apiType} API</span>
+              <span>{getApiShortDisplayName()}</span>
            </span>
          </li>
        </ul>
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -45,6 +45,8 @@ export class ArmResourceTypes {

 export class BackendDefaults {
  public static partitionKeyKind = "Hash";
+  public static partitionKeyMultiHash = "MultiHash";
+  public static maxNumMultiHashPartition = 2;
  public static singlePartitionStorageInGb: string = "10";
  public static multiPartitionStorageInGb: string = "100";
  public static maxChangeFeedRetentionDuration: number = 10;
@@ -139,7 +141,7 @@ export class Queries {
  public static UnlimitedPageOption: string = "unlimited";
  public static itemsPerPage: number = 100;
  public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
-
+  public static containersPerPage: number = 50;
  public static QueryEditorMinHeightRatio: number = 0.1;
  public static QueryEditorMaxHeightRatio: number = 0.4;
  public static readonly DefaultMaxDegreeOfParallelism = 6;
--- a/src/Common/EntityValue.tsx
+++ b/src/Common/EntityValue.tsx
@@ -55,7 +55,6 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
      label={entityValueLabel && entityValueLabel}
      className="addEntityTextField"
      id="entityValueId"
-      autoFocus
      disabled={isEntityValueDisable}
      type={entityValueType}
      placeholder={entityValuePlaceholder}
--- a/src/Common/EnvironmentUtility.test.ts
+++ b/src/Common/EnvironmentUtility.test.ts
@@ -0,0 +1,14 @@
+import * as EnvironmentUtility from "./EnvironmentUtility";
+
+describe("Environment Utility Test", () => {
+  it("Test sample URI with /", () => {
+    const uri = "test/";
+    expect(EnvironmentUtility.normalizeArmEndpoint(uri)).toEqual(uri);
+  });
+
+  it("Test sample URI without /", () => {
+    const uri = "test";
+    const expectedResult = "test/";
+    expect(EnvironmentUtility.normalizeArmEndpoint(uri)).toEqual(expectedResult);
+  });
+});
--- a/src/Common/OfferUtility.test.ts
+++ b/src/Common/OfferUtility.test.ts
@@ -1,6 +1,6 @@
-import * as OfferUtility from "./OfferUtility";
-import { SDKOfferDefinition, Offer } from "../Contracts/DataModels";
 import { OfferResponse } from "@azure/cosmos";
+import { Offer, SDKOfferDefinition } from "../Contracts/DataModels";
+import * as OfferUtility from "./OfferUtility";

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

+  it("offerContent not defined", () => {
+    const mockOfferDefinition = {
+      id: "test",
+    } as SDKOfferDefinition;
+
+    const mockResponse = {
+      resource: mockOfferDefinition,
+    } as OfferResponse;
+
+    expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(undefined);
+  });
+
+  it("offerDefinition is null", () => {
+    const mockResponse = {
+      resource: undefined,
+    } as OfferResponse;
+
+    expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(undefined);
+  });
+
  it("autoscale throughput", () => {
    const mockOfferDefinition = {
      content: {
--- a/src/Common/ResourceTreeContainer.tsx
+++ b/src/Common/ResourceTreeContainer.tsx
@@ -6,6 +6,7 @@ import Explorer from "../Explorer/Explorer";
 import { ResourceTokenTree } from "../Explorer/Tree/ResourceTokenTree";
 import { ResourceTree } from "../Explorer/Tree/ResourceTree";
 import { userContext } from "../UserContext";
+import { getApiShortDisplayName } from "../Utils/APITypeUtils";
 import { NormalizedEventKey } from "./Constants";

 export interface ResourceTreeContainerProps {
@@ -42,7 +43,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
        {/* Collections Window Title/Command Bar - Start */}
        <div className="collectiontitle">
          <div className="coltitle">
-            <span className="titlepadcol">{userContext.apiType} API</span>
+            <span className="titlepadcol">{getApiShortDisplayName()}</span>
            <div className="float-right">
              <span
                className="padimgcolrefresh"
@@ -50,7 +51,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
                role="button"
                data-bind="click: onRefreshResourcesClick, clickBubble: false, event: { keypress: onRefreshDatabasesKeyPress }"
                tabIndex={0}
-                aria-label="Refresh tree"
+                aria-label={getApiShortDisplayName() + `Refresh tree`}
                title="Refresh tree"
              >
                <img className="refreshcol" src={refreshImg} alt="Refresh Tree" />
@@ -62,7 +63,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
                onClick={toggleLeftPaneExpanded}
                onKeyPress={onKeyPressToggleLeftPaneExpanded}
                tabIndex={0}
-                aria-label="Collapse Tree"
+                aria-label={getApiShortDisplayName() + `Collapse Tree`}
                title="Collapse Tree"
                ref={focusButton}
              >
--- 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,29 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
        />
        {!isEntityValueDisable && (
          <TooltipHost content="Edit property" id="editTooltip">
-            <Image {...imageProps} src={EditIcon} alt="editEntity" id="editEntity" onClick={onEditEntity} />
+            <div tabIndex={0}>
+              <Image
+                {...imageProps}
+                src={EditIcon}
+                alt="editEntity"
+                onClick={onEditEntity}
+                tabIndex={0}
+                onKeyPress={handleKeyPress}
+              />
+            </div>
          </TooltipHost>
        )}
        {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
          <TooltipHost content="Delete property" id="deleteTooltip">
-            <Image {...imageProps} src={DeleteIcon} alt="delete entity" id="deleteEntity" onClick={onDeleteEntity} />
+            <Image
+              {...imageProps}
+              src={DeleteIcon}
+              alt="delete entity"
+              id="deleteEntity"
+              onClick={onDeleteEntity}
+              tabIndex={0}
+              onKeyPress={handleKeyPressdelete}
+            />
          </TooltipHost>
        )}
      </Stack>
--- a/src/Common/Tooltip/InfoTooltip.tsx
+++ b/src/Common/Tooltip/InfoTooltip.tsx
@@ -9,7 +9,7 @@ export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children }:
  return (
    <span>
      <TooltipHost content={children}>
-        <Icon iconName="Info" ariaLabel="Info" className="panelInfoIcon" tabIndex={0} />
+        <Icon iconName="Info" ariaLabel={children} className="panelInfoIcon" tabIndex={0} />
      </TooltipHost>
    </span>
  );
--- a/src/Common/UrlUtility.test.ts
+++ b/src/Common/UrlUtility.test.ts
@@ -0,0 +1,49 @@
+import * as UrlUtility from "./UrlUtility";
+
+describe("parseDocumentsPath", () => {
+  it("empty resource path", () => {
+    const resourcePath = "";
+
+    expect(UrlUtility.parseDocumentsPath(resourcePath)).toEqual({});
+  });
+
+  it("resourcePath does not begin or end with /", () => {
+    const resourcePath = "localhost/portal/home";
+    const expectedResult = {
+      type: "home",
+      objectBody: {
+        id: "portal",
+        self: "/localhost/portal/home/",
+      },
+    };
+
+    expect(UrlUtility.parseDocumentsPath(resourcePath)).toEqual(expectedResult);
+  });
+
+  it("resourcePath length is even", () => {
+    const resourcePath = "/localhost/portal/src/home/";
+    const expectedResult = {
+      type: "src",
+      objectBody: {
+        id: "home",
+        self: resourcePath,
+      },
+    };
+
+    expect(UrlUtility.parseDocumentsPath(resourcePath)).toEqual(expectedResult);
+  });
+
+  it("createUri", () => {
+    const baseUri = "http://foo.com/bar/";
+    const relativeUri = "/index.html";
+    const expectedUri = "http://foo.com/bar/index.html";
+
+    expect(UrlUtility.createUri(baseUri, relativeUri)).toEqual(expectedUri);
+  });
+
+  it("should throw an error if baseUri is empty", () => {
+    expect(() => {
+      UrlUtility.createUri("", "/home");
+    }).toThrow("baseUri is null or empty");
+  });
+});
--- a/src/Common/dataAccess/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/readCollections.ts
+++ b/src/Common/dataAccess/readCollections.ts
@@ -1,3 +1,4 @@
+import { Queries } from "Common/Constants";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
@@ -31,6 +32,35 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
  }
 }

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

--- a/src/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/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -33,6 +33,8 @@ export interface DatabaseAccountExtendedProperties {
  privateEndpointConnections?: unknown[];
  capacity?: { totalThroughputLimit: number };
  locations?: DatabaseAccountResponseLocation[];
+  postgresqlEndpoint?: string;
+  publicNetworkAccess?: string;
 }

 export interface DatabaseAccountResponseLocation {
@@ -154,6 +156,11 @@ export interface Collection extends Resource {
  requestSchema?: () => void;
 }

+export interface CollectionsWithPagination {
+  continuationToken?: string;
+  collections?: Collection[];
+}
+
 export interface Database extends Resource {
  collections?: Collection[];
 }
@@ -566,6 +573,16 @@ export interface ContainerConnectionInfo {
  //need to add ram and rom info
 }

+export interface PostgresFirewallRule {
+  id: string;
+  name: string;
+  type: string;
+  properties: {
+    startIpAddress: string;
+    endIpAddress: string;
+  };
+}
+
 export enum PhoenixErrorType {
  MaxAllocationTimeExceeded = "MaxAllocationTimeExceeded",
  MaxDbAccountsPerUserExceeded = "MaxDbAccountsPerUserExceeded",
--- a/src/Contracts/ExplorerContracts.ts
+++ b/src/Contracts/ExplorerContracts.ts
@@ -35,6 +35,9 @@ export enum MessageTypes {
  RefreshDatabaseAccount,
  CloseTab,
  OpenQuickstartBlade,
+  OpenPostgreSQLPasswordReset,
+  OpenPostgresNetworkingBlade,
+  OpenCosmosDBNetworkingBlade,
 }

 export { Versions, ActionContracts, Diagnostics };
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -87,13 +87,13 @@ export interface Database extends TreeNode {
  isDatabaseExpanded: ko.Observable<boolean>;
  isDatabaseShared: ko.Computed<boolean>;
  isSampleDB?: boolean;
-
+  collectionsContinuationToken?: string;
  selectedSubnodeKind: ko.Observable<CollectionTabKind>;

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

-  loadCollections(): Promise<void>;
+  loadCollections(restart?: boolean): Promise<void>;
  findCollectionWithId(collectionId: string): Collection;
  openAddCollection(database: Database, event: MouseEvent): void;
  onSettingsClick: () => void;
@@ -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>;
 }

@@ -372,6 +371,7 @@ export enum TerminalKind {
  Default = 0,
  Mongo = 1,
  Cassandra = 2,
+  Postgres = 3,
 }

 export interface DataExplorerInputsFrame {
@@ -395,6 +395,11 @@ export interface DataExplorerInputsFrame {
  sharedThroughputDefault?: number;
  dataExplorerVersion?: string;
  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[];
  features?: {
    [key: string]: string;
--- a/src/Explorer/Controls/Accordion/AccordionComponent.tsx
+++ b/src/Explorer/Controls/Accordion/AccordionComponent.tsx
@@ -73,7 +73,7 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
      <img
        className="expandCollapseIcon"
        src={this.state.isExpanded ? TriangleDownIcon : TriangleRightIcon}
-        alt="Hide"
+        alt={this.state.isExpanded ? `${this.props.title} hide` : `${this.props.title} expand`}
        tabIndex={0}
        role="button"
      />
--- a/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
+++ b/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
@@ -2,6 +2,7 @@
 * Wrapper around Notebook server terminal
 */

+import { useTerminal } from "hooks/useTerminal";
 import postRobot from "post-robot";
 import * as React from "react";
 import * as DataModels from "../../../Contracts/DataModels";
@@ -40,6 +41,7 @@ export class NotebookTerminalComponent extends React.Component<NotebookTerminalC

  handleFrameLoad(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void {
    this.terminalWindow = (event.target as HTMLIFrameElement).contentWindow;
+    useTerminal.getState().setTerminal(this.terminalWindow);
    this.sendPropsToTerminalFrame();
  }

@@ -74,6 +76,8 @@ export class NotebookTerminalComponent extends React.Component<NotebookTerminalC
        this.props.databaseAccount?.properties.mongoEndpoint || this.props.databaseAccount?.properties.documentEndpoint;
    } else if (StringUtils.endsWith(notebookServerEndpoint, "cassandra")) {
      terminalEndpoint = this.props.databaseAccount?.properties.cassandraEndpoint;
+    } else if (StringUtils.endsWith(notebookServerEndpoint, "postgresql")) {
+      return this.props.databaseAccount?.properties.postgresqlEndpoint;
    }

    if (terminalEndpoint) {
--- 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/Settings/snapshots/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
@@ -35,6 +35,7 @@ exports[`SettingsComponent renders 1`] = `
                "onRefreshDatabasesKeyPress": [Function],
                "onRefreshResourcesClick": [Function],
                "phoenixClient": PhoenixClient {
+                  "armResourceId": undefined,
                  "retryOptions": Object {
                    "maxTimeout": 5000,
                    "minTimeout": 5000,
@@ -111,6 +112,7 @@ exports[`SettingsComponent renders 1`] = `
                "onRefreshDatabasesKeyPress": [Function],
                "onRefreshResourcesClick": [Function],
                "phoenixClient": PhoenixClient {
+                  "armResourceId": undefined,
                  "retryOptions": Object {
                    "maxTimeout": 5000,
                    "minTimeout": 5000,
--- a/src/Explorer/Controls/Tabs/TabComponent.tsx
+++ b/src/Explorer/Controls/Tabs/TabComponent.tsx
@@ -46,10 +46,13 @@ export class TabComponent extends React.Component<TabComponentProps> {
      }

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

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

    return (
      <div className="tabComponentContainer">
-        {!this.props.hideHeader && <div className="tabs tabSwitch">{this.renderTabTitles()}</div>}
+        {!this.props.hideHeader && (
+          <div className="tabs tabSwitch" role="tablist">
+            {this.renderTabTitles()}
+          </div>
+        )}
        <div className={className}>{currentTabContent.render()}</div>
      </div>
    );
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx
@@ -23,12 +23,12 @@ describe("ThroughputInput Pane", () => {
  });

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

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

      <Stack horizontal verticalAlign="center">
-        <input
-          className="throughputInputRadioBtn"
-          aria-label="Autoscale mode"
-          aria-required={true}
-          checked={isAutoscaleSelected}
-          type="radio"
-          role="radio"
-          tabIndex={0}
-          onChange={(e) => handleOnChangeMode(e, "Autoscale")}
-        />
-        <span className="throughputInputRadioBtnLabel">Autoscale</span>
+        <div role="radiogroup">
+          <input
+            id="Autoscale-input"
+            className="throughputInputRadioBtn"
+            aria-label="Autoscale database throughput"
+            aria-required={true}
+            checked={isAutoscaleSelected}
+            type="radio"
+            role="radio"
+            tabIndex={0}
+            onChange={(e) => handleOnChangeMode(e, "Autoscale")}
+          />
+          <label htmlFor="Autoscale-input" className="throughputInputRadioBtnLabel">
+            Autoscale
+          </label>

-        <input
-          className="throughputInputRadioBtn"
-          aria-label="Manual mode"
-          checked={!isAutoscaleSelected}
-          type="radio"
-          aria-required={true}
-          role="radio"
-          tabIndex={0}
-          onChange={(e) => handleOnChangeMode(e, "Manual")}
-        />
-        <span className="throughputInputRadioBtnLabel">Manual</span>
+          <input
+            id="Manual-input"
+            className="throughputInputRadioBtn"
+            aria-label="Manual database throughput"
+            checked={!isAutoscaleSelected}
+            type="radio"
+            aria-required={true}
+            role="radio"
+            tabIndex={0}
+            onChange={(e) => handleOnChangeMode(e, "Manual")}
+          />
+          <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
+            Manual
+          </label>
+        </div>
      </Stack>

      {isAutoscaleSelected && (
        <Stack className="throughputInputSpacing">
-          <Text variant="small" aria-label="ruDescription">
+          <Text variant="small" aria-label="capacity calculator of azure cosmos db">
            Estimate your required RU/s with{" "}
-            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="ruDescription">
+            <Link
+              target="_blank"
+              href="https://cosmos.azure.com/capacitycalculator/"
+              aria-label="capacity calculator of azure cosmos db"
+            >
              capacity calculator
            </Link>
            .
@@ -238,7 +250,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
            step={AutoPilotUtils.autoPilotIncrementStep}
            min={AutoPilotUtils.autoPilotThroughput1K}
            value={throughput.toString()}
-            aria-label="Max request units per second"
+            ariaLabel={`${isDatabase ? "Database" : getCollectionName()} max RU/s`}
            required={true}
            errorMessage={throughputError}
          />
--- 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"
@@ -654,40 +654,45 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
      <div
        className="ms-Stack css-58"
      >
-        <input
-          aria-label="Autoscale mode"
-          aria-required={true}
-          checked={true}
-          className="throughputInputRadioBtn"
+        <div
          key=".0:$.0"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="throughputInputRadioBtnLabel"
-          key=".0:$.1"
+          role="radiogroup"
        >
-          Autoscale
-        </span>
-        <input
-          aria-label="Manual mode"
-          aria-required={true}
-          checked={false}
-          className="throughputInputRadioBtn"
-          key=".0:$.2"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="throughputInputRadioBtnLabel"
-          key=".0:$.3"
-        >
-          Manual
-        </span>
+          <input
+            aria-label="Autoscale database throughput"
+            aria-required={true}
+            checked={true}
+            className="throughputInputRadioBtn"
+            id="Autoscale-input"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <label
+            className="throughputInputRadioBtnLabel"
+            htmlFor="Autoscale-input"
+          >
+            Autoscale
+          </label>
+          <input
+            aria-label="Manual database throughput"
+            aria-required={true}
+            checked={false}
+            className="throughputInputRadioBtn"
+            id="Manual-input"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <label
+            className="throughputInputRadioBtnLabel"
+            htmlFor="Manual-input"
+          >
+            Manual
+          </label>
+        </div>
      </div>
    </Stack>
    <Stack
@@ -697,23 +702,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 +997,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 +1336,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 +1622,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"
@@ -1635,7 +1640,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
          </div>
        </Stack>
        <StyledTextFieldBase
-          aria-label="Max request units per second"
+          ariaLabel="Container max RU/s"
          errorMessage=""
          id="autoscaleRUValueField"
          key=".0:$.2"
@@ -1658,7 +1663,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
          value="4000"
        >
          <TextFieldBase
-            aria-label="Max request units per second"
+            ariaLabel="Container max RU/s"
            deferredValidationTime={200}
            errorMessage=""
            id="autoscaleRUValueField"
@@ -1956,6 +1961,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                >
                  <input
                    aria-invalid={false}
+                    aria-label="Container max RU/s"
                    className="ms-TextField-field field-64"
                    id="autoscaleRUValueField"
                    min={1000}
--- a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
@@ -195,7 +195,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
        </div>
        {node.children && (
          <AnimateHeight duration={TreeNodeComponent.transitionDurationMS} height={this.state.isExpanded ? "auto" : 0}>
-            <div className="nodeChildren" data-test={node.label}>
+            <div className="nodeChildren" data-test={node.label} role="group">
              {TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => (
                <TreeNodeComponent
                  key={`${childNode.label}-${generation + 1}-${childNode.timestamp}`}
--- a/src/Explorer/Controls/TreeComponent/snapshots/TreeComponent.test.tsx.snap
+++ b/src/Explorer/Controls/TreeComponent/snapshots/TreeComponent.test.tsx.snap
@@ -100,6 +100,7 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
    <div
      className="nodeChildren"
      data-test="label"
+      role="group"
    >
      <TreeNodeComponent
        generation={3}
@@ -251,6 +252,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
    <div
      className="nodeChildren"
      data-test="label"
+      role="group"
    >
      <TreeNodeComponent
        generation={13}
@@ -352,6 +354,7 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
    <div
      className="nodeChildren"
      data-test="label"
+      role="group"
    />
  </AnimateHeight>
 </div>
@@ -465,6 +468,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
    <div
      className="nodeChildren"
      data-test="label"
+      role="group"
    >
      <TreeNodeComponent
        generation={13}
@@ -594,6 +598,7 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
    <div
      className="nodeChildren"
      data-test="label"
+      role="group"
    >
      <TreeNodeComponent
        generation={3}
--- a/src/Explorer/Controls/TreeComponent/treeComponent.less
+++ b/src/Explorer/Controls/TreeComponent/treeComponent.less
@@ -3,7 +3,7 @@
 .treeComponent {
  .nodeItem {
    &:focus {
-      outline: 1px dashed @AccentMedium;
+      outline: 2px @AccentMedium;
    }

    .treeNodeHeader {
--- a/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
+++ b/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
@@ -133,7 +133,6 @@ describe("ContainerSampleGenerator", () => {
      } as DatabaseAccount,
    });

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

--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -93,7 +93,8 @@ export default class Explorer {
      dataExplorerArea: Constants.Areas.ResourceTree,
    });
    this._isInitializingNotebooks = false;
-    this.phoenixClient = new PhoenixClient();
+
+    this.phoenixClient = new PhoenixClient(userContext?.databaseAccount?.id);
    useNotebook.subscribe(
      () => this.refreshCommandBarButtons(),
      (state) => state.isNotebooksEnabledForAccount
@@ -185,9 +186,7 @@ export default class Explorer {
      useNotebook.getState().setNotebookBasePath(userContext.features.notebookBasePath);
    }

-    if (!userContext.features.enablePGQuickstart || userContext.apiType !== "Postgres") {
-      this.refreshExplorer();
-    }
+    this.refreshExplorer();
  }

  public async initiateAndRefreshNotebookList(): Promise<void> {
@@ -353,7 +352,7 @@ export default class Explorer {
        (notebookServerInfo && notebookServerInfo.notebookServerEndpoint === undefined))
    ) {
      const provisionData: IProvisionData = {
-        cosmosEndpoint: userContext.databaseAccount.properties.documentEndpoint,
+        cosmosEndpoint: userContext?.databaseAccount?.properties?.documentEndpoint,
        poolId: PoolIdType.DefaultPoolId,
      };
      const connectionStatus: ContainerConnectionInfo = {
@@ -578,7 +577,7 @@ export default class Explorer {
    try {
      await Promise.all(
        databasesToLoad.map(async (database: ViewModels.Database) => {
-          await database.loadCollections();
+          await database.loadCollections(true);
          const isNewDatabase: boolean = _.some(newDatabases, (db: ViewModels.Database) => db.id() === database.id());
          if (isNewDatabase) {
            database.expandDatabase();
@@ -1058,6 +1057,10 @@ export default class Explorer {
        title = "Cassandra Shell";
        break;

+      case ViewModels.TerminalKind.Postgres:
+        title = "PSQL Shell";
+        break;
+
      default:
        throw new Error("Terminal kind: ${kind} not supported");
    }
@@ -1244,9 +1247,11 @@ export default class Explorer {
  }

  public async refreshExplorer(): Promise<void> {
-    userContext.authType === AuthType.ResourceToken
-      ? this.refreshDatabaseForResourceToken()
-      : this.refreshAllDatabases();
+    if (userContext.apiType !== "Postgres") {
+      userContext.authType === AuthType.ResourceToken
+        ? this.refreshDatabaseForResourceToken()
+        : this.refreshAllDatabases();
+    }
    await useNotebook.getState().refreshNotebooksEnabledStateForAccount();

    // TODO: remove reference to isNotebookEnabled and isNotebooksEnabledForAccount
--- a/src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
+++ b/src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
@@ -729,6 +729,7 @@ export class D3ForceGraph implements GraphRenderer {
    var iconGroup = newNodes
      .append("g")
      .attr("class", "iconContainer")
+      .attr("role", "group")
      .attr("tabindex", 0)
      .attr("aria-label", (d: D3Node) => {
        return this.retrieveNodeCaption(d);
--- a/src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
@@ -40,6 +40,7 @@ export class GraphVizComponent extends React.Component<GraphVizComponentProps> {
            {/* svg load more icon inlined as-is here: remove the style="fill:#374649;" so we can override it */}
            <svg
              role="img"
+              aria-label="graph"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -135,6 +136,7 @@ export class GraphVizComponent extends React.Component<GraphVizComponentProps> {
          <g id="triangleRight">
            <svg
              role="img"
+              aria-label="graph"
              version="1.1"
              id="Layer_1"
              xmlns="http://www.w3.org/2000/svg"
--- a/src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
@@ -17,19 +17,21 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
      <div className="middlePane">
        <div className="graphTitle">
          <span className="paneTitle">Graph</span>
-          <span
+          <button
+            style={{ border: "none", background: "none" }}
            className="graphExpandCollapseBtn pull-right"
            onClick={this.props.toggleExpandGraph}
            role="button"
            aria-expanded={this.props.isTabsContentExpanded}
-            aria-name="View graph in full screen"
-            tabIndex={0}
+            aria-label={
+              this.props.isTabsContentExpanded ? "Collapse graph to minimized view" : "View graph in full screen"
+            }
          >
            <img
              src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}
              alt={this.props.isTabsContentExpanded ? "collapse graph content" : "expand graph content"}
            />
-          </span>
+          </button>
        </div>
        <div className="maingraphContainer">
          <GraphVizComponent forceGraphParams={this.props.graphVizProps.forceGraphParams} />
--- a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.test.tsx
+++ b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.test.tsx
@@ -107,11 +107,11 @@ describe("New Vertex Component", () => {
  it("should call onTypeChange method on type dropdown change", () => {
    const DOWN_ARROW = { keyCode: 40 };
    const onTypeChange = jest.fn();
-    const dropdown = screen.getByRole("listbox");
+    const dropdown = screen.getByRole("combobox");
    dropdown.onclick = onTypeChange();
    dropdown.onkeydown = onTypeChange();

-    fireEvent.keyDown(screen.getByRole("listbox"), DOWN_ARROW);
+    fireEvent.keyDown(screen.getByRole("combobox"), DOWN_ARROW);
    fireEvent.click(screen.getByText(/number/));
    expect(onTypeChange).toHaveBeenCalled();
  });
--- a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
+++ b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
@@ -145,6 +145,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                    type="text"
                    id="propertyKeyNewVertexPane"
                    componentRef={input}
+                    aria-required="true"
                    placeholder="Key"
                    autoComplete="off"
                    aria-label={`Enter value for propery ${index + 1}`}
@@ -152,6 +153,8 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onKeyChange(event, index)}
                  />
                </div>
+                <span className="mandatoryStar">*&nbsp;</span>
+
                <div className="valueCol">
                  <TextField
                    className="edgeInput"
@@ -165,7 +168,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                </div>
                <div>
                  <Dropdown
-                    role="listbox"
+                    role="combobox"
                    placeholder="Select an option"
                    defaultSelectedKey={data.values[0].type}
                    style={{ width: 100 }}
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
@@ -34,7 +34,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
  const buttons = useCommandBar((state) => state.contextButtons);
  const backgroundColor = StyleConstants.BaseLight;

-  if (userContext.features.enablePGQuickstart && userContext.apiType === "Postgres") {
+  if (userContext.apiType === "Postgres") {
    const buttons = CommandBarComponentButtonFactory.createPostgreButtons(container);
    return (
      <div className="commandBarContainer">
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
@@ -25,7 +25,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
      updateUserContext({
        databaseAccount: {
          properties: {
-            capabilities: [{ name: "EnableTable" }],
+            capabilities: [{ name: "EnableMongo" }],
          },
        } as DatabaseAccount,
      });
@@ -38,6 +38,38 @@ describe("CommandBarComponentButtonFactory tests", () => {
      );
      expect(enableAzureSynapseLinkBtn).toBeDefined();
    });
+
+    it("Button should not be visible for Tables API", () => {
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableTable" }],
+          },
+        } as DatabaseAccount,
+      });
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const enableAzureSynapseLinkBtn = buttons.find(
+        (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel
+      );
+      expect(enableAzureSynapseLinkBtn).toBeUndefined();
+    });
+
+    it("Button should not be visible for Cassandra API", () => {
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableCassandra" }],
+          },
+        } as DatabaseAccount,
+      });
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const enableAzureSynapseLinkBtn = buttons.find(
+        (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel
+      );
+      expect(enableAzureSynapseLinkBtn).toBeUndefined();
+    });
  });

  describe("Enable notebook button", () => {
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
@@ -51,11 +51,13 @@ export function createStaticCommandBarButtons(
  const buttons: CommandButtonComponentProps[] = [];

  buttons.push(newCollectionBtn);
+  if (userContext.apiType !== "Tables" && userContext.apiType !== "Cassandra") {
+    const addSynapseLink = createOpenSynapseLinkDialogButton(container);

-  const addSynapseLink = createOpenSynapseLinkDialogButton(container);
-  if (addSynapseLink) {
-    buttons.push(createDivider());
-    buttons.push(addSynapseLink);
+    if (addSynapseLink) {
+      buttons.push(createDivider());
+      buttons.push(addSynapseLink);
+    }
  }

  if (userContext.apiType !== "Tables") {
@@ -202,6 +204,7 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
  if (showOpenFullScreen) {
    const label = "Open Full Screen";
    const fullScreenButton: CommandButtonComponentProps = {
+      id: "openFullScreenBtn",
      iconSrc: OpenInTabIcon,
      iconAlt: label,
      onCommandClick: () => {
@@ -523,6 +526,28 @@ function createOpenCassandraTerminalButton(container: Explorer): CommandButtonCo
  };
 }

+function createOpenPsqlTerminalButton(container: Explorer): CommandButtonComponentProps {
+  const label = "Open PSQL Shell";
+  const disableButton =
+    !useNotebook.getState().isNotebooksEnabledForAccount && !useNotebook.getState().isNotebookEnabled;
+  return {
+    iconSrc: HostedTerminalIcon,
+    iconAlt: label,
+    onCommandClick: () => {
+      if (useNotebook.getState().isNotebookEnabled) {
+        container.openNotebookTerminal(ViewModels.TerminalKind.Postgres);
+      }
+    },
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: disableButton,
+    ariaLabel: label,
+    tooltipText: !disableButton
+      ? ""
+      : "This feature is not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks.",
+  };
+}
+
 function createNotebookWorkspaceResetButton(container: Explorer): CommandButtonComponentProps {
  const label = "Reset Workspace";
  return {
@@ -587,16 +612,7 @@ function createStaticCommandBarButtonsForResourceToken(
 }

 export function createPostgreButtons(container: Explorer): CommandButtonComponentProps[] {
-  const postgreShellLabel = "Open PostgreSQL Shell";
-  const openPostgreShellBtn = {
-    iconSrc: HostedTerminalIcon,
-    iconAlt: postgreShellLabel,
-    onCommandClick: () => container.openNotebookTerminal(ViewModels.TerminalKind.Mongo),
-    commandButtonLabel: postgreShellLabel,
-    hasPopup: false,
-    disabled: false,
-    ariaLabel: postgreShellLabel,
-  };
+  const openPostgreShellBtn = createOpenPsqlTerminalButton(container);

  return [openPostgreShellBtn];
 }
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -147,12 +147,9 @@ export class NotificationConsoleComponent extends React.Component<
            <div className="notificationConsoleControls">
              <Dropdown
                label="Filter:"
-                role="combobox"
                selectedKey={this.state.selectedFilter}
                options={NotificationConsoleComponent.FilterOptions}
                onChange={this.onFilterSelected.bind(this)}
-                aria-labelledby="consoleFilterLabel"
-                aria-label={this.state.selectedFilter}
              />
              <span className="consoleSplitter" />
              <span
--- a/src/Explorer/Menus/NotificationConsole/snapshots/NotificationConsoleComponent.test.tsx.snap
+++ b/src/Explorer/Menus/NotificationConsole/snapshots/NotificationConsoleComponent.test.tsx.snap
@@ -112,8 +112,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
        className="notificationConsoleControls"
      >
        <Dropdown
-          aria-label="All"
-          aria-labelledby="consoleFilterLabel"
          label="Filter:"
          onChange={[Function]}
          options={
@@ -136,7 +134,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
              },
            ]
          }
-          role="combobox"
          selectedKey="All"
        />
        <span
@@ -278,8 +275,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
        className="notificationConsoleControls"
      >
        <Dropdown
-          aria-label="All"
-          aria-labelledby="consoleFilterLabel"
          label="Filter:"
          onChange={[Function]}
          options={
@@ -302,7 +297,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
              },
            ]
          }
-          role="combobox"
          selectedKey="All"
        />
        <span
--- a/src/Explorer/Notebook/NotebookComponent/InMemoryContentProviderUtils.test.ts
+++ b/src/Explorer/Notebook/NotebookComponent/InMemoryContentProviderUtils.test.ts
@@ -0,0 +1,23 @@
+import * as InMemoryContentProviderUtils from "./ContentProviders/InMemoryContentProviderUtils";
+
+describe("fromContentUri", () => {
+  it("fromContentUri should return valid result", () => {
+    const contentUri = "memory://resource/path";
+    const result = "resource";
+
+    expect(InMemoryContentProviderUtils.fromContentUri(contentUri)).toEqual(result);
+  });
+
+  it("fromContentUri should return undefined on invalid input", () => {
+    const contentUri = "invalid";
+
+    expect(InMemoryContentProviderUtils.fromContentUri(contentUri)).toEqual(undefined);
+  });
+
+  it("toContentUri should return valid result", () => {
+    const path = "resource/path";
+    const result = "memory://resource/path";
+
+    expect(InMemoryContentProviderUtils.toContentUri(path)).toEqual(result);
+  });
+});
--- a/src/Explorer/Notebook/NotebookContainerClient.ts
+++ b/src/Explorer/Notebook/NotebookContainerClient.ts
@@ -23,7 +23,7 @@ export class NotebookContainerClient {
  private scheduleTimerId: NodeJS.Timeout;

  constructor(private onConnectionLost: () => void) {
-    this.phoenixClient = new PhoenixClient();
+    this.phoenixClient = new PhoenixClient(userContext?.databaseAccount?.id);
    this.retryOptions = {
      retries: Notebook.retryAttempts,
      maxTimeout: Notebook.retryAttemptDelayMs,
--- a/src/Explorer/Notebook/useNotebook.ts
+++ b/src/Explorer/Notebook/useNotebook.ts
@@ -124,8 +124,9 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
    }

    const firstWriteLocation =
-      databaseAccount?.properties?.writeLocations &&
-      databaseAccount?.properties?.writeLocations[0]?.locationName.toLowerCase();
+      userContext.apiType === "Postgres"
+        ? databaseAccount?.location
+        : databaseAccount?.properties?.writeLocations?.[0]?.locationName.toLowerCase();
    const disallowedLocationsUri = `${configContext.BACKEND_ENDPOINT}/api/disallowedLocations`;
    const authorizationHeader = getAuthorizationHeader();
    try {
@@ -307,13 +308,16 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
      let isPhoenixFeatures = false;

      const isPublicInternetAllowed = isPublicInternetAccessAllowed();
-      const phoenixClient = new PhoenixClient();
+      const phoenixClient = new PhoenixClient(userContext?.databaseAccount?.id);
      const dbAccountAllowedInfo = await phoenixClient.getDbAccountAllowedStatus();

      if (dbAccountAllowedInfo.status === HttpStatusCodes.OK) {
        if (dbAccountAllowedInfo?.type === PhoenixErrorType.PhoenixFlightFallback) {
          isPhoenixNotebooks = isPublicInternetAllowed && userContext.features.phoenixNotebooks === true;
-          isPhoenixFeatures = isPublicInternetAllowed && userContext.features.phoenixFeatures === true;
+          isPhoenixFeatures =
+            isPublicInternetAllowed &&
+            // phoenix needs to be enabled for Postgres accounts since the PSQL shell requires phoenix containers
+            (userContext.features.phoenixFeatures === true || userContext.apiType === "Postgres");
        } else {
          isPhoenixNotebooks = isPhoenixFeatures = isPublicInternetAllowed;
        }
--- a/src/Explorer/OpenFullScreen.test.tsx
+++ b/src/Explorer/OpenFullScreen.test.tsx
@@ -1,17 +1,9 @@
-jest.mock("../hooks/useFullScreenURLs");
 import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import React from "react";
-import { useFullScreenURLs } from "../hooks/useFullScreenURLs";
 import { OpenFullScreen } from "./OpenFullScreen";

 it("renders the correct URLs", () => {
-  (useFullScreenURLs as jest.Mock).mockReturnValue({
-    readWrite: "read and write url",
-    read: "read only url",
-  });
-
  render(<OpenFullScreen />);
-  expect(screen.getByLabelText("Read and Write")).toHaveValue("https://cosmos.azure.com/?key=read and write url");
-  expect(screen.getByLabelText("Read Only")).toHaveValue("https://cosmos.azure.com/?key=read only url");
+  expect(screen.getByText("Open")).toBeDefined();
 });
--- a/src/Explorer/OpenFullScreen.tsx
+++ b/src/Explorer/OpenFullScreen.tsx
@@ -1,66 +1,26 @@
-import { DefaultButton, PrimaryButton, Spinner, Stack, Text, TextField } from "@fluentui/react";
-import copyToClipboard from "clipboard-copy";
+import { PrimaryButton, Stack, Text } from "@fluentui/react";
 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 }}>
-        <Text>
-          Open this database account in a new browser tab with Cosmos DB Explorer. Or copy the read-write or read only
-          access urls below to share with others. For security purposes, the URLs grant time-bound access to the
-          account. When access expires, you can reconnect, using a valid connection string for the account.
-        </Text>
-        <TextField label="Read and Write" readOnly defaultValue={readWriteUrl} />
-        <Stack horizontal tokens={{ childrenGap: 10 }}>
-          <DefaultButton
-            ariaLabel={isReadWriteUrlCopy ? "Copied url" : "Copy"}
-            onClick={() => {
-              copyToClipboard(readWriteUrl);
-              setIsReadWriteUrlCopy(true);
-            }}
-            text={isReadWriteUrlCopy ? "Copied" : "Copy"}
-            iconProps={{ iconName: "Copy" }}
-          />
-          <PrimaryButton
-            onClick={() => {
-              window.open(readWriteUrl, "_blank");
-            }}
-            text="Open"
-            iconProps={{ iconName: "OpenInNewWindow" }}
-          />
+      <div style={{ padding: "34px" }}>
+        <Stack tokens={{ childrenGap: 10 }}>
+          <Text>
+            Open this database account in a new browser tab with Cosmos DB Explorer. You can connect using your
+            Microsoft account or a connection string.
+          </Text>
+          <Stack horizontal tokens={{ childrenGap: 10 }}>
+            <PrimaryButton
+              onClick={() => {
+                window.open("https://cosmos.azure.com/", "_blank");
+              }}
+              text="Open"
+              iconProps={{ iconName: "OpenInNewWindow" }}
+            />
+          </Stack>
        </Stack>
-        <TextField label="Read Only" readOnly defaultValue={readUrl} />
-        <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>
+      </div>
    </>
  );
 };
--- 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,9 +122,11 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
      enableIndexing: true,
      isSharded: userContext.apiType !== "Tables",
      partitionKey: this.getPartitionKey(),
+      subPartitionKeys: [],
      enableDedicatedThroughput: false,
-      createMongoWildCardIndex: isCapabilityEnabled("EnableMongo"),
-      useHashV2: false,
+      createMongoWildCardIndex:
+        isCapabilityEnabled("EnableMongo") && !isCapabilityEnabled("EnableMongo16MBDocumentSupport"),
+      useHashV1: false,
      enableAnalyticalStore: false,
      uniqueKeys: [],
      errorMessage: "",
@@ -259,37 +262,46 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                  true
                ).toLocaleLowerCase()}.`}
              >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon
+                  iconName="Info"
+                  className="panelInfoIcon"
+                  tabIndex={0}
+                  ariaLabel={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
+                    true
+                  ).toLocaleLowerCase()}.`}
+                />
              </TooltipHost>
            </Stack>

            <Stack horizontal verticalAlign="center">
-              <input
-                className="panelRadioBtn"
-                checked={this.state.createNewDatabase}
-                aria-label="Create new database"
-                aria-checked={this.state.createNewDatabase}
-                name="databaseType"
-                type="radio"
-                role="radio"
-                id="databaseCreateNew"
-                tabIndex={0}
-                onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
-              />
-              <span className="panelRadioBtnLabel">Create new</span>
+              <div role="radiogroup">
+                <input
+                  className="panelRadioBtn"
+                  checked={this.state.createNewDatabase}
+                  aria-label="Create new database"
+                  aria-checked={this.state.createNewDatabase}
+                  name="databaseType"
+                  type="radio"
+                  role="radio"
+                  id="databaseCreateNew"
+                  tabIndex={0}
+                  onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
+                />
+                <span className="panelRadioBtnLabel">Create new</span>

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

            {this.state.createNewDatabase && (
@@ -335,7 +347,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>
                )}
@@ -383,7 +402,13 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                directionalHint={DirectionalHint.bottomLeftEdge}
                content={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
              >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon
+                  role="button"
+                  iconName="Info"
+                  className="panelInfoIcon"
+                  tabIndex={0}
+                  ariaLabel={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
+                />
              </TooltipHost>
            </Stack>

@@ -466,7 +491,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>

@@ -513,7 +545,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>

@@ -545,6 +582,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>
          )}

@@ -571,7 +679,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>
          )}
@@ -602,11 +720,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>

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

              <Stack horizontal verticalAlign="center">
-                <input
-                  className="panelRadioBtn"
-                  checked={this.state.enableAnalyticalStore}
-                  disabled={!this.isSynapseLinkEnabled()}
-                  aria-label="Enable analytical store"
-                  aria-checked={this.state.enableAnalyticalStore}
-                  name="analyticalStore"
-                  type="radio"
-                  role="radio"
-                  id="enableAnalyticalStoreBtn"
-                  tabIndex={0}
-                  onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
-                />
-                <span className="panelRadioBtnLabel">On</span>
+                <div role="radiogroup">
+                  <input
+                    className="panelRadioBtn"
+                    checked={this.state.enableAnalyticalStore}
+                    disabled={!this.isSynapseLinkEnabled()}
+                    aria-label="Enable analytical store"
+                    aria-checked={this.state.enableAnalyticalStore}
+                    name="analyticalStore"
+                    type="radio"
+                    role="radio"
+                    id="enableAnalyticalStoreBtn"
+                    tabIndex={0}
+                    onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
+                  />
+                  <span className="panelRadioBtnLabel">On</span>

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

              {!this.isSynapseLinkEnabled() && (
@@ -735,7 +868,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
              }}
            >
              <Stack className="panelGroupSpacing" id="collapsibleSectionContent">
-                {isCapabilityEnabled("EnableMongo") && (
+                {isCapabilityEnabled("EnableMongo") && !isCapabilityEnabled("EnableMongo16MBDocumentSupport") && (
                  <Stack className="panelGroupSpacing">
                    <Stack horizontal>
                      <span className="mandatoryStar">*&nbsp;</span>
@@ -746,7 +879,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>

@@ -766,18 +904,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>
@@ -832,12 +981,20 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
    return isLowerCase ? partitionKeyName.toLocaleLowerCase() : partitionKeyName;
  }

-  private getPartitionKeyPlaceHolder(): string {
+  private getPartitionKeyPlaceHolder(index?: number): string {
    switch (userContext.apiType) {
      case "Mongo":
-        return "e.g., address.zipCode";
+        return "e.g., categoryId";
      case "Gremlin":
        return "e.g., /address";
+      case "SQL":
+        return `${
+          index === undefined
+            ? "Required - first partition key e.g., /TenantId"
+            : index === 0
+            ? "second partition key e.g., /UserId"
+            : "third partition key e.g., /SessionId"
+        }`;
      default:
        return "e.g., /address/zipCode";
    }
@@ -959,7 +1116,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
      return userContext.apiType === "SQL" ? "/pk" : "pk";
    }
    if (this.props.isQuickstart) {
-      return userContext.apiType === "SQL" ? "/address" : "address";
+      return userContext.apiType === "SQL" ? "/categoryId" : "categoryId";
    }
    return "";
  }
@@ -1163,11 +1320,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/GitHubReposPanel/snapshots/GitHubReposPanel.test.tsx.snap
+++ b/src/Explorer/Panes/GitHubReposPanel/snapshots/GitHubReposPanel.test.tsx.snap
@@ -24,6 +24,7 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
            "onRefreshDatabasesKeyPress": [Function],
            "onRefreshResourcesClick": [Function],
            "phoenixClient": PhoenixClient {
+              "armResourceId": undefined,
              "retryOptions": Object {
                "maxTimeout": 5000,
                "minTimeout": 5000,
--- a/src/Explorer/Panes/PanelInfoErrorComponent.tsx
+++ b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
@@ -32,14 +32,8 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
  return (
    <Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
      {icon}
-      <span className="panelWarningErrorDetailsLinkContainer">
-        <Text
-          role="alert"
-          aria-live="assertive"
-          aria-label={message}
-          className="panelWarningErrorMessage"
-          variant="small"
-        >
+      <span className="panelWarningErrorDetailsLinkContainer" role="alert" aria-live="assertive">
+        <Text aria-label={message} className="panelWarningErrorMessage" variant="small">
          {message}
          {link && linkText && (
            <Link target="_blank" href={link}>
@@ -48,7 +42,7 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
          )}
        </Text>
        {showErrorDetails && (
-          <a className="paneErrorLink" role="link" onClick={expandConsole}>
+          <a className="paneErrorLink" role="button" onClick={expandConsole} tabIndex={0} onKeyPress={expandConsole}>
            More details
          </a>
        )}
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -21,6 +21,11 @@ export const SettingsPane: FunctionComponent = () => {
  const [customItemPerPage, setCustomItemPerPage] = useState<number>(
    LocalStorageUtility.getEntryNumber(StorageKey.CustomItemPerPage) || 0
  );
+  const [containerPaginationEnabled, setContainerPaginationEnabled] = useState<boolean>(
+    LocalStorageUtility.hasItem(StorageKey.ContainerPaginationEnabled)
+      ? LocalStorageUtility.getEntryString(StorageKey.ContainerPaginationEnabled) === "true"
+      : false
+  );
  const [crossPartitionQueryEnabled, setCrossPartitionQueryEnabled] = useState<boolean>(
    LocalStorageUtility.hasItem(StorageKey.IsCrossPartitionQueryEnabled)
      ? LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
@@ -50,6 +55,7 @@ export const SettingsPane: FunctionComponent = () => {
      isCustomPageOptionSelected() ? customItemPerPage : Constants.Queries.unlimitedItemsPerPage
    );
    LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
+    LocalStorageUtility.setEntryString(StorageKey.ContainerPaginationEnabled, containerPaginationEnabled.toString());
    LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, crossPartitionQueryEnabled.toString());
    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);

@@ -185,6 +191,25 @@ export const SettingsPane: FunctionComponent = () => {
            </div>
          </div>
        )}
+        <div className="settingsSection">
+          <div className="settingsSectionPart">
+            <div className="settingsSectionLabel">
+              Enable container pagination
+              <InfoTooltip>
+                Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
+              </InfoTooltip>
+            </div>
+            <Checkbox
+              styles={{
+                label: { padding: 0 },
+              }}
+              className="padding"
+              ariaLabel="Enable container pagination"
+              checked={containerPaginationEnabled}
+              onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
+            />
+          </div>
+        </div>
        {shouldShowCrossPartitionOption && (
          <div className="settingsSection">
            <div className="settingsSectionPart">
--- a/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
@@ -97,6 +97,35 @@ exports[`Settings Pane should render Default properly 1`] = `
        </div>
      </div>
    </div>
+    <div
+      className="settingsSection"
+    >
+      <div
+        className="settingsSectionPart"
+      >
+        <div
+          className="settingsSectionLabel"
+        >
+          Enable container pagination
+          <InfoTooltip>
+            Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
+          </InfoTooltip>
+        </div>
+        <StyledCheckboxBase
+          ariaLabel="Enable container pagination"
+          checked={false}
+          className="padding"
+          onChange={[Function]}
+          styles={
+            Object {
+              "label": Object {
+                "padding": 0,
+              },
+            }
+          }
+        />
+      </div>
+    </div>
    <div
      className="settingsSection"
    >
@@ -182,6 +211,35 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
  <div
    className="paneMainContent"
  >
+    <div
+      className="settingsSection"
+    >
+      <div
+        className="settingsSectionPart"
+      >
+        <div
+          className="settingsSectionLabel"
+        >
+          Enable container pagination
+          <InfoTooltip>
+            Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
+          </InfoTooltip>
+        </div>
+        <StyledCheckboxBase
+          ariaLabel="Enable container pagination"
+          checked={false}
+          className="padding"
+          onChange={[Function]}
+          styles={
+            Object {
+              "label": Object {
+                "padding": 0,
+              },
+            }
+          }
+        />
+      </div>
+    </div>
    <div
      className="settingsSection"
    >
--- a/src/Explorer/Panes/StringInputPane/snapshots/StringInputPane.test.tsx.snap
+++ b/src/Explorer/Panes/StringInputPane/snapshots/StringInputPane.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
      "onRefreshDatabasesKeyPress": [Function],
      "onRefreshResourcesClick": [Function],
      "phoenixClient": PhoenixClient {
+        "armResourceId": undefined,
        "retryOptions": Object {
          "maxTimeout": 5000,
          "minTimeout": 5000,
--- a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
+++ b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
@@ -242,6 +242,11 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
    submitButtonText: getButtonLabel(userContext.apiType),
    onSubmit,
  };
+  const handlekeypressaddentity = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.key === "Enter" || event.key === "Space") {
+      addNewEntity();
+    }
+  };

  return (
    <RightPaneForm {...props}>
@@ -284,7 +289,13 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
          );
        })}
        {userContext.apiType !== "Cassandra" && (
-          <Stack horizontal onClick={addNewEntity} className="addButtonEntiy">
+          <Stack
+            horizontal
+            onClick={addNewEntity}
+            className="addButtonEntiy"
+            tabIndex={0}
+            onKeyPress={handlekeypressaddentity}
+          >
            <Image {...imageProps} src={AddPropertyIcon} alt="Add Entity" />
            <Text className="addNewParamStyle">{getAddButtonLabel(userContext.apiType)}</Text>
          </Stack>
--- a/src/Explorer/Panes/Tables/snapshots/AddTableEntityPanel.test.tsx.snap
+++ b/src/Explorer/Panes/Tables/snapshots/AddTableEntityPanel.test.tsx.snap
@@ -29,10 +29,14 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
          className="addButtonEntiy"
          horizontal={true}
          onClick={[Function]}
+          onKeyPress={[Function]}
+          tabIndex={0}
        >
          <div
            className="ms-Stack addButtonEntiy css-53"
            onClick={[Function]}
+            onKeyPress={[Function]}
+            tabIndex={0}
          >
            <StyledImageBase
              alt="Add Entity"
--- a/src/Explorer/Panes/snapshots/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/snapshots/AddCollectionPanel.test.tsx.snap
@@ -31,6 +31,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          directionalHint={4}
        >
          <Icon
+            ariaLabel="A database is analogous to a namespace. It is the unit of management for a set of containers."
            className="panelInfoIcon"
            iconName="Info"
            tabIndex={0}
@@ -41,39 +42,43 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
        horizontal={true}
        verticalAlign="center"
      >
-        <input
-          aria-checked={true}
-          aria-label="Create new database"
-          checked={true}
-          className="panelRadioBtn"
-          id="databaseCreateNew"
-          name="databaseType"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="panelRadioBtnLabel"
+        <div
+          role="radiogroup"
        >
-          Create new
-        </span>
-        <input
-          aria-checked={false}
-          aria-label="Use existing database"
-          checked={false}
-          className="panelRadioBtn"
-          name="databaseType"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="panelRadioBtnLabel"
-        >
-          Use existing
-        </span>
+          <input
+            aria-checked={true}
+            aria-label="Create new database"
+            checked={true}
+            className="panelRadioBtn"
+            id="databaseCreateNew"
+            name="databaseType"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <span
+            className="panelRadioBtnLabel"
+          >
+            Create new
+          </span>
+          <input
+            aria-checked={false}
+            aria-label="Use existing database"
+            checked={false}
+            className="panelRadioBtn"
+            name="databaseType"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <span
+            className="panelRadioBtnLabel"
+          >
+            Use existing
+          </span>
+        </div>
      </Stack>
      <Stack
        className="panelGroupSpacing"
@@ -124,6 +129,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
            directionalHint={4}
          >
            <Icon
+              ariaLabel="Throughput configured at the database level will be shared across all containers within the database."
              className="panelInfoIcon"
              iconName="Info"
              tabIndex={0}
@@ -163,8 +169,10 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          directionalHint={4}
        >
          <Icon
+            ariaLabel="Unique identifier for the container and used for id-based routing through REST and all SDKs."
            className="panelInfoIcon"
            iconName="Info"
+            role="button"
            tabIndex={0}
          />
        </StyledTooltipHostBase>
@@ -206,6 +214,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          directionalHint={4}
        >
          <Icon
+            ariaLabel="The partition key is used to automatically distribute data across partitions for scalability. Choose a property in your JSON document that has a wide range of values and evenly distributes request volume. For small read-heavy workloads or write-heavy workloads of any size, id is often a good choice."
            className="panelInfoIcon"
            iconName="Info"
            tabIndex={0}
@@ -223,13 +232,36 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
        id="addCollection-partitionKeyValue"
        onChange={[Function]}
        pattern=".*"
-        placeholder="e.g., /address/zipCode"
+        placeholder="Required - first partition key e.g., /TenantId"
        required={true}
        size={40}
        title=""
        type="text"
        value=""
      />
+      <Stack
+        className="panelGroupSpacing"
+      >
+        <CustomizedDefaultButton
+          disabled={false}
+          hidden={false}
+          onClick={[Function]}
+          styles={
+            Object {
+              "label": Object {
+                "fontSize": 12,
+              },
+              "root": Object {
+                "height": 30,
+                "padding": 0,
+                "width": 250,
+              },
+            }
+          }
+        >
+          Add hierarchical partition key (preview)
+        </CustomizedDefaultButton>
+      </Stack>
    </Stack>
    <Stack>
      <Stack
@@ -246,6 +278,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          directionalHint={4}
        >
          <Icon
+            ariaLabel="Unique keys provide developers with the ability to add a layer of data integrity to their database. By creating a unique key policy when a container is created, you ensure the uniqueness of one or more values per partition key."
            className="panelInfoIcon"
            iconName="Info"
            tabIndex={0}
@@ -303,6 +336,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          directionalHint={4}
        >
          <Icon
+            ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
            className="panelInfoIcon"
            iconName="Info"
            tabIndex={0}
@@ -313,42 +347,46 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
        horizontal={true}
        verticalAlign="center"
      >
-        <input
-          aria-checked={false}
-          aria-label="Enable analytical store"
-          checked={false}
-          className="panelRadioBtn"
-          disabled={true}
-          id="enableAnalyticalStoreBtn"
-          name="analyticalStore"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="panelRadioBtnLabel"
+        <div
+          role="radiogroup"
        >
-          On
-        </span>
-        <input
-          aria-checked={true}
-          aria-label="Disable analytical store"
-          checked={true}
-          className="panelRadioBtn"
-          disabled={true}
-          id="disableAnalyticalStoreBtn"
-          name="analyticalStore"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="panelRadioBtnLabel"
-        >
-          Off
-        </span>
+          <input
+            aria-checked={false}
+            aria-label="Enable analytical store"
+            checked={false}
+            className="panelRadioBtn"
+            disabled={true}
+            id="enableAnalyticalStoreBtn"
+            name="analyticalStore"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <span
+            className="panelRadioBtnLabel"
+          >
+            On
+          </span>
+          <input
+            aria-checked={true}
+            aria-label="Disable analytical store"
+            checked={true}
+            className="panelRadioBtn"
+            disabled={true}
+            id="disableAnalyticalStoreBtn"
+            name="analyticalStore"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <span
+            className="panelRadioBtnLabel"
+          >
+            Off
+          </span>
+        </div>
      </Stack>
      <Stack
        className="panelGroupSpacing"
@@ -396,26 +434,49 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
        className="panelGroupSpacing"
        id="collapsibleSectionContent"
      >
-        <StyledCheckboxBase
-          checked={false}
-          label="My partition key is larger than 101 bytes"
-          onChange={[Function]}
-          styles={
-            Object {
-              "checkbox": Object {
-                "height": 12,
-                "width": 12,
-              },
-              "label": Object {
-                "alignItems": "center",
-                "padding": 0,
-              },
-              "text": Object {
-                "fontSize": 12,
-              },
+        <Stack
+          className="panelGroupSpacing"
+        >
+          <StyledCheckboxBase
+            checked={false}
+            label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
+            onChange={[Function]}
+            styles={
+              Object {
+                "checkbox": Object {
+                  "height": 12,
+                  "width": 12,
+                },
+                "label": Object {
+                  "alignItems": "center",
+                  "padding": 0,
+                  "whiteSpace": "break-spaces",
+                  "wordWrap": "break-word",
+                },
+                "text": Object {
+                  "fontSize": 12,
+                },
+              }
            }
-          }
-        />
+          />
+          <Text
+            variant="small"
+          >
+            <Icon
+              className="removeIcon"
+              iconName="InfoSolid"
+              tabIndex={0}
+            />
+             To ensure compatibility with older SDKs, the created container will use a legacy partitioning scheme that supports partition key values of size only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.
+             
+            <StyledLinkBase
+              href="https://aka.ms/cosmos-large-pk"
+              target="_blank"
+            >
+              Learn more
+            </StyledLinkBase>
+          </Text>
+        </Stack>
      </Stack>
    </CollapsibleSectionComponent>
  </div>
--- a/src/Explorer/Quickstart/PostgreQuickstartCommands.ts
+++ b/src/Explorer/Quickstart/PostgreQuickstartCommands.ts
@@ -0,0 +1,105 @@
+export const newTableCommand = `DROP SCHEMA IF EXISTS cosmosdb_tutorial CASCADE;
+CREATE SCHEMA cosmosdb_tutorial;
+SET search_path to cosmosdb_tutorial;
+CREATE TABLE github_users
+(
+  user_id bigint,
+  url text,
+  login text,
+  avatar_url text,
+  gravatar_id text,
+  display_login text
+);
+CREATE TABLE github_events
+(
+  event_id bigint,
+  event_type text,
+  event_public boolean,
+  repo_id bigint,
+  payload jsonb,
+  repo jsonb,
+  user_id bigint,
+  org jsonb,
+  created_at timestamp
+);
+CREATE INDEX event_type_index ON github_events (event_type);
+CREATE INDEX payload_index ON github_events USING GIN (payload jsonb_path_ops);
+`;
+
+export const newTableCommandForDisplay = `DROP SCHEMA IF EXISTS cosmosdb_tutorial CASCADE;
+CREATE SCHEMA cosmosdb_tutorial;
+
+-- Using schema created for tutorial
+SET search_path to cosmosdb_tutorial;
+
+CREATE TABLE github_users
+(
+  user_id bigint,
+  url text,
+  login text,
+  avatar_url text,
+  gravatar_id text,
+  display_login text
+);
+
+CREATE TABLE github_events
+(
+  event_id bigint,
+  event_type text,
+  event_public boolean,
+  repo_id bigint,
+  payload jsonb,
+  repo jsonb,
+  user_id bigint,
+  org jsonb,
+  created_at timestamp
+);
+
+--Create indexes on events table
+CREATE INDEX event_type_index ON github_events (event_type);
+CREATE INDEX payload_index ON github_events USING GIN (payload jsonb_path_ops);`;
+
+export const distributeTableCommand = `SET search_path to cosmosdb_tutorial;
+SELECT create_distributed_table('github_users', 'user_id');
+SELECT create_distributed_table('github_events', 'user_id');
+`;
+
+export const distributeTableCommandForDisplay = `-- Using schema created for the tutorial
+SET search_path to cosmosdb_tutorial;
+
+SELECT create_distributed_table('github_users', 'user_id');
+SELECT create_distributed_table('github_events', 'user_id');`;
+
+export const loadDataCommand = `SET search_path to cosmosdb_tutorial;
+\\COPY github_users FROM PROGRAM 'wget -q -O - "$@" "https://examples.citusdata.com/users.csv"' WITH (FORMAT CSV);
+\\COPY github_events FROM PROGRAM 'wget -q -O - "$@" "https://examples.citusdata.com/events.csv"' WITH (FORMAT CSV);
+`;
+
+export const loadDataCommandForDisplay = `-- Using schema created for the tutorial
+SET search_path to cosmosdb_tutorial;
+
+-- download users and store in table
+\\COPY github_users FROM PROGRAM 'wget -q -O - "$@" "https://examples.citusdata.com/users.csv"' WITH (FORMAT CSV);
+\\COPY github_events FROM PROGRAM 'wget -q -O - "$@" "https://examples.citusdata.com/events.csv"' WITH (FORMAT CSV);`;
+
+export const queryCommand = `SET search_path to cosmosdb_tutorial;
+SELECT count(*) FROM github_users;
+SELECT created_at, event_type, repo->>'name' AS repo_name
+FROM github_events
+WHERE user_id = 3861633;
+SELECT date_trunc('hour', created_at) AS hour, sum((payload->>'distinct_size')::int) AS num_commits FROM github_events WHERE event_type = 'PushEvent' AND payload @> '{"ref":"refs/heads/master"}' GROUP BY hour ORDER BY hour;
+`;
+
+export const queryCommandForDisplay = `-- Using schema created for the tutorial
+SET search_path to cosmosdb_tutorial;
+
+-- count all rows (across shards)
+SELECT count(*) FROM github_users;
+
+-- Find all events for a single user.
+SELECT created_at, event_type, repo->>'name' AS repo_name
+FROM github_events
+WHERE user_id = 3861633;
+
+-- Find the number of commits on the master branch per hour 
+SELECT date_trunc('hour', created_at) AS hour, sum((payload->>'distinct_size')::int) AS num_commits FROM github_events WHERE event_type = 'PushEvent' AND payload @> '{"ref":"refs/heads/master"}' GROUP BY hour ORDER BY hour;`;
--- a/src/Explorer/Quickstart/QuickstartCarousel.tsx
+++ b/src/Explorer/Quickstart/QuickstartCarousel.tsx
@@ -94,7 +94,7 @@ const getDescriptionText = (page: number): string => {
    case 1:
      return "Azure Cosmos DB is a fully managed NoSQL database service for modern app development. ";
    case 2:
-      return "Launch the quickstart for a tutotrial to learn how to create a database, add sample data, connect to a sample app and more.";
+      return "Launch the quickstart for a tutorial to learn how to create a database, add sample data, connect to a sample app and more.";
    case 3:
      return "Already have an existing app? Connect your database to an app, or tooling of your choice from Data Explorer.";
    default:
--- a/src/Explorer/Quickstart/QuickstartFirewallNotification.tsx
+++ b/src/Explorer/Quickstart/QuickstartFirewallNotification.tsx
@@ -0,0 +1,22 @@
+import { Image, PrimaryButton, Stack, Text } from "@fluentui/react";
+import { sendMessage } from "Common/MessageHandler";
+import { MessageTypes } from "Contracts/ExplorerContracts";
+import React from "react";
+import FirewallRuleScreenshot from "../../../images/firewallRule.png";
+
+export const QuickstartFirewallNotification: React.FC = (): JSX.Element => (
+  <Stack style={{ padding: "16px 20px" }}>
+    <Text block>
+      To use the PostgreSQL shell, you need to add a firewall rule to allow access from all IP addresses
+      (0.0.0.0-255.255.255).
+    </Text>
+    <Text block>We strongly recommend removing this rule once you finish using the PostgreSQL shell.</Text>
+    <Image style={{ margin: "20px 0" }} src={FirewallRuleScreenshot} />
+    <PrimaryButton
+      style={{ width: 150 }}
+      onClick={() => sendMessage({ type: MessageTypes.OpenPostgresNetworkingBlade })}
+    >
+      Add firewall rule
+    </PrimaryButton>
+  </Stack>
+);
--- a/src/Explorer/Quickstart/QuickstartGuide.tsx
+++ b/src/Explorer/Quickstart/QuickstartGuide.tsx
@@ -11,6 +11,17 @@ import {
  Text,
  TextField,
 } from "@fluentui/react";
+import {
+  distributeTableCommand,
+  distributeTableCommandForDisplay,
+  loadDataCommand,
+  loadDataCommandForDisplay,
+  newTableCommand,
+  newTableCommandForDisplay,
+  queryCommand,
+  queryCommandForDisplay,
+} from "Explorer/Quickstart/PostgreQuickstartCommands";
+import { useTerminal } from "hooks/useTerminal";
 import React, { useState } from "react";
 import Youtube from "react-youtube";
 import Pivot1SelectedIcon from "../../../images/Pivot1_selected.svg";
@@ -35,24 +46,6 @@ enum GuideSteps {

 export const QuickstartGuide: React.FC = (): JSX.Element => {
  const [currentStep, setCurrentStep] = useState<number>(0);
-  const newTableCommand = `CREATE TABLE github_users
-(
-user_id bigint,
-url text,
-login text,
-  .....`;
-  const distributeTableCommand = `SELECT create_distributed_table('github_users', 'user_id');
-SELECT create_distributed_table('github_events', 'user_id');`;
-  const loadDataCommand = `-- download users and store in table
-
-COPY github_users FROM PROGRAM 'curl https://examples.citusdata.com/
-users.csv' WITH (FORMAT CSV)`;
-  const queryCommand = `-- Find all events for a single user.
-- (A common transactional/operational query)
-
-SELECT created_at, event_type, repo->>'name' AS repo_name
-FROM github_events
-WHERE user_id = 3861633;`;

  const onCopyBtnClicked = (selector: string): void => {
    const textfield: HTMLInputElement = document.querySelector(selector);
@@ -102,24 +95,32 @@ WHERE user_id = 3861633;`;
    <Stack style={{ paddingTop: 8, height: "100%", width: "100%" }}>
      <Stack style={{ flexGrow: 1, padding: "0 20px", overflow: "auto" }}>
        <Text variant="xxLarge">Quick start guide</Text>
-        <Text variant="medium">Gettings started in Cosmos DB</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>
-                  This tutorial walks you through the most essential Cosmos DB PostgreSQL statements that will be used
-                  in the PostgreSQL shell (on the right). You can also choose to go through this quick start by
-                  connecting to PGAdmin or other tooling of your choice. <br />
-                  <br /> Before you can interact with your data using PGShell, you will need to login - please follow
-                  instructions on the right to enter your password
+                  This tutorial guides you to create and query distributed tables using a sample dataset.
+                  <br />
+                  <br />
+                  To begin, please enter the cluster&apos;s password in the PostgreSQL terminal.
+                  <br />
+                  <br />
+                  Note: If you navigate out of the Quick Start tab (PostgreSQL Shell), the session will be closed and
+                  all ongoing commands might be interrupted.
                </Text>
-                <Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "60%" }} />
+                <Youtube videoId="nT64dFSfiUo" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
              </Stack>
            </PivotItem>
            <PivotItem
@@ -129,19 +130,28 @@ WHERE user_id = 3861633;`;
              onClick={() => setCurrentStep(1)}
            >
              <Stack style={{ marginTop: 20 }}>
-                <Text>
-                  After logging in, let’s create some new tables for storing data. We will start with two sample tables
-                  - one for storing github users and one for storing github events
-                </Text>
-                <DefaultButton style={{ marginTop: 16, width: 110 }}>New table</DefaultButton>
+                <Text>Let&apos;s create two tables github_users and github_events in “cosmosdb_tutorial” schema.</Text>
+                <DefaultButton
+                  style={{ marginTop: 16, width: 150 }}
+                  onClick={() => useTerminal.getState().sendMessage(newTableCommand)}
+                >
+                  Create new table
+                </DefaultButton>
                <Stack horizontal style={{ marginTop: 16 }}>
                  <TextField
                    id="newTableCommand"
                    multiline
-                    rows={6}
+                    rows={5}
                    readOnly
-                    defaultValue={newTableCommand}
-                    styles={{ root: { width: "90%" } }}
+                    defaultValue={newTableCommandForDisplay}
+                    styles={{
+                      root: { width: "90%" },
+                      field: {
+                        backgroundColor: "#EEEEEE",
+                        fontFamily:
+                          "Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
+                      },
+                    }}
                  />
                  <IconButton
                    iconProps={{
@@ -150,7 +160,7 @@ WHERE user_id = 3861633;`;
                    onClick={() => onCopyBtnClicked("#newTableCommand")}
                  />
                </Stack>
-                <Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "60%" }} />
+                <Youtube videoId="il_sA6U1WcY" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
              </Stack>
            </PivotItem>
            <PivotItem
@@ -161,21 +171,32 @@ WHERE user_id = 3861633;`;
            >
              <Stack style={{ marginTop: 20 }}>
                <Text>
-                  Congratulations, you have now created your first 2 tables.
+                  Let’s distribute the two tables using the create_distributed_table() function.
                  <br />
                  <br />
-                  Your table needs to be sharded on the worker nodes. You need to distribute table before you load any
-                  data or run any queries
+                  We are choosing “user_id” as the distribution column for our sample dataset.
                </Text>
-                <DefaultButton style={{ marginTop: 16, width: 150 }}>Distribute table</DefaultButton>
+                <DefaultButton
+                  style={{ marginTop: 16, width: 200 }}
+                  onClick={() => useTerminal.getState().sendMessage(distributeTableCommand)}
+                >
+                  Create distributed table
+                </DefaultButton>
                <Stack horizontal style={{ marginTop: 16 }}>
                  <TextField
                    id="distributeTableCommand"
                    multiline
-                    rows={2}
+                    rows={5}
                    readOnly
-                    defaultValue={distributeTableCommand}
-                    styles={{ root: { width: "90%" } }}
+                    defaultValue={distributeTableCommandForDisplay}
+                    styles={{
+                      root: { width: "90%" },
+                      field: {
+                        backgroundColor: "#EEEEEE",
+                        fontFamily:
+                          "Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
+                      },
+                    }}
                  />
                  <IconButton
                    iconProps={{
@@ -184,7 +205,7 @@ WHERE user_id = 3861633;`;
                    onClick={() => onCopyBtnClicked("#distributeTableCommand")}
                  />
                </Stack>
-                <Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "60%" }} />
+                <Youtube videoId="kCCDRRrN1r0" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
              </Stack>
            </PivotItem>
            <PivotItem
@@ -194,22 +215,28 @@ WHERE user_id = 3861633;`;
              onClick={() => setCurrentStep(3)}
            >
              <Stack style={{ marginTop: 20 }}>
-                <Text>
-                  We&apos;re ready to fill the tables with sample data.
-                  <br />
-                  <br />
-                  For this quick start, we&apos;ll use a dataset previously captured from the GitHub API. Run the
-                  command below to load the data
-                </Text>
-                <DefaultButton style={{ marginTop: 16, width: 110 }}>Load data</DefaultButton>
+                <Text>Let&apos;s load the two tables with a sample dataset generated from the GitHub API.</Text>
+                <DefaultButton
+                  style={{ marginTop: 16, width: 110 }}
+                  onClick={() => useTerminal.getState().sendMessage(loadDataCommand)}
+                >
+                  Load data
+                </DefaultButton>
                <Stack horizontal style={{ marginTop: 16 }}>
                  <TextField
                    id="loadDataCommand"
                    multiline
-                    rows={4}
+                    rows={5}
                    readOnly
-                    defaultValue={loadDataCommand}
-                    styles={{ root: { width: "90%" } }}
+                    defaultValue={loadDataCommandForDisplay}
+                    styles={{
+                      root: { width: "90%" },
+                      field: {
+                        backgroundColor: "#EEEEEE",
+                        fontFamily:
+                          "Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
+                      },
+                    }}
                  />
                  <IconButton
                    iconProps={{
@@ -218,7 +245,7 @@ WHERE user_id = 3861633;`;
                    onClick={() => onCopyBtnClicked("#loadDataCommand")}
                  />
                </Stack>
-                <Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "60%" }} />
+                <Youtube videoId="XSMEE2tujEk" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
              </Stack>
            </PivotItem>
            <PivotItem
@@ -229,19 +256,29 @@ WHERE user_id = 3861633;`;
            >
              <Stack style={{ marginTop: 20 }}>
                <Text>
-                  github_users is a distributed table, meaning its data is divided between multiple shards. Hyperscale
-                  (Citus) automatically runs the count on all shards in parallel, and combines the results. Let’s try a
-                  query.
+                  Congratulations on creating and distributing your tables. Now, it&apos;s time to run your first query!
                </Text>
-                <DefaultButton style={{ marginTop: 16, width: 110 }}>Try query</DefaultButton>
+                <DefaultButton
+                  style={{ marginTop: 16, width: 115 }}
+                  onClick={() => useTerminal.getState().sendMessage(queryCommand)}
+                >
+                  Try queries
+                </DefaultButton>
                <Stack horizontal style={{ marginTop: 16 }}>
                  <TextField
                    id="queryCommand"
                    multiline
-                    rows={6}
+                    rows={5}
                    readOnly
-                    defaultValue={queryCommand}
-                    styles={{ root: { width: "90%" } }}
+                    defaultValue={queryCommandForDisplay}
+                    styles={{
+                      root: { width: "90%" },
+                      field: {
+                        backgroundColor: "#EEEEEE",
+                        fontFamily:
+                          "Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
+                      },
+                    }}
                  />
                  <IconButton
                    iconProps={{
@@ -250,7 +287,7 @@ WHERE user_id = 3861633;`;
                    onClick={() => onCopyBtnClicked("#queryCommand")}
                  />
                </Stack>
-                <Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "60%" }} />
+                <Youtube videoId="k_EanjMtaPg" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
              </Stack>
            </PivotItem>
          </Pivot>
@@ -258,7 +295,7 @@ WHERE user_id = 3861633;`;
        {currentStep === 5 && (
          <Stack style={{ margin: "auto" }} horizontalAlign="center">
            <Image src={CompleteIcon} />
-            <Text variant="mediumPlus" style={{ fontWeight: 600, marginTop: 7 }}>
+            <Text variant="mediumPlus" style={{ fontWeight: 900, marginTop: 7 }}>
              You are all set!
            </Text>
            <Text variant="mediumPlus" style={{ marginTop: 8 }}>
--- a/src/Explorer/Quickstart/Tutorials/MongoQuickstartTutorial.tsx
+++ b/src/Explorer/Quickstart/Tutorials/MongoQuickstartTutorial.tsx
@@ -1,4 +1,4 @@
-import { Link, Stack, TeachingBubble, Text } from "@fluentui/react";
+import { DirectionalHint, Link, Stack, TeachingBubble, Text } from "@fluentui/react";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import React from "react";
@@ -18,6 +18,11 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
    return <></>;
  }

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

  switch (step) {
    case 1:
@@ -33,7 +37,7 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            },
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 1 of 7"
+          footerContent={"Step 1 of " + totalSteps}
        >
          Start viewing and working with your data by opening Items under Data
        </TeachingBubble>
@@ -55,7 +59,7 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(1),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 2 of 7"
+          footerContent={"Step 2 of " + totalSteps}
        >
          View item here using the items window. Additionally you can also filter items to be reviewed with the filter
          function
@@ -78,7 +82,7 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(2),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 3 of 7"
+          footerContent={"Step 3 of " + totalSteps}
        >
          Add new item by copy / pasting JSON; or uploading a JSON
        </TeachingBubble>
@@ -98,7 +102,7 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(3),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 4 of 7"
+          footerContent={"Step 4 of " + totalSteps}
        >
          Query your data using either the filter function or new query.
        </TeachingBubble>
@@ -118,7 +122,7 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(4),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 5 of 7"
+          footerContent={"Step 5 of " + totalSteps}
        >
          Change throughput provisioned to your container according to your needs
        </TeachingBubble>
@@ -138,12 +142,54 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
            onClick: () => setStep(5),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 6 of 7"
+          footerContent={"Step 6 of " + totalSteps}
        >
          Visualize your data, store queries in an interactive document
        </TeachingBubble>
      );
    case 7:
+      return (
+        <TeachingBubble
+          headline="Launch full screen"
+          target={"#openFullScreenBtn"}
+          hasCloseButton
+          primaryButtonProps={{
+            text: "Next",
+            onClick: () => (userContext.isTryCosmosDBSubscription ? setStep(8) : setStep(9)),
+          }}
+          secondaryButtonProps={{
+            text: "Previous",
+            onClick: () => setStep(6),
+          }}
+          onDismiss={() => onDimissTeachingBubble()}
+          footerContent={"Step 7 of " + totalSteps}
+        >
+          This will open a new tab in your browser to use Cosmos DB Explorer. Using the provided URLs you can share
+          read-write or read-only access with other people.
+        </TeachingBubble>
+      );
+    case 8:
+      return (
+        <TeachingBubble
+          headline="Boost your experience"
+          target={"#freeTierTeachingBubble"}
+          hasCloseButton
+          primaryButtonProps={{
+            text: "Next",
+            onClick: () => setStep(9),
+          }}
+          secondaryButtonProps={{
+            text: "Previous",
+            onClick: () => setStep(7),
+          }}
+          calloutProps={{ directionalHint: DirectionalHint.leftCenter }}
+          onDismiss={() => onDimissTeachingBubble()}
+          footerContent={"Step 8 of " + totalSteps}
+        >
+          Unlock everything Azure Cosmos DB has to offer When you&apos;re ready, upgrade to production.
+        </TeachingBubble>
+      );
+    case 9:
      return (
        <TeachingBubble
          headline="Congratulations!"
@@ -158,10 +204,10 @@ export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
          }}
          secondaryButtonProps={{
            text: "Previous",
-            onClick: () => setStep(6),
+            onClick: () => (userContext.isTryCosmosDBSubscription ? setStep(8) : setStep(7)),
          }}
          onDismiss={() => onDimissTeachingBubble()}
-          footerContent="Step 7 of 7"
+          footerContent={"Step " + totalSteps + " of " + totalSteps}
        >
          <Stack>
            <Text style={{ color: "white" }}>
--- a/src/Explorer/SplashScreen/SplashScreen.less
+++ b/src/Explorer/SplashScreen/SplashScreen.less
@@ -14,10 +14,6 @@
    padding-right: 16px;
    max-width: 1168px;

-    > * {
-      justify-content: space-between;
-    }
-
    > .title {
      position: relative; // To attach FeaturePanelLauncher as absolute
      color: @BaseHigh;
@@ -40,6 +36,7 @@
      text-align: center;
      cursor: pointer;
      margin: 40px auto;
+      width: 84%;

      > .mainButton {
        min-width: 124px;
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -11,6 +11,8 @@ import {
  TeachingBubbleContent,
  Text,
 } from "@fluentui/react";
+import { sendMessage } from "Common/MessageHandler";
+import { MessageTypes } from "Contracts/ExplorerContracts";
 import { TerminalKind } from "Contracts/ViewModels";
 import { useCarousel } from "hooks/useCarousel";
 import { usePostgres } from "hooks/usePostgres";
@@ -91,6 +93,12 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
          () => this.setState({}),
          (state) => state.showPostgreTeachingBubble
        ),
+      },
+      {
+        dispose: usePostgres.subscribe(
+          () => this.setState({}),
+          (state) => state.showResetPasswordBubble
+        ),
      }
    );
  }
@@ -108,8 +116,17 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
        <form className="connectExplorerFormContainer">
          <div className="splashScreenContainer">
            <div className="splashScreen">
-              <div className="title">
-                {userContext.apiType === "Postgres" ? "Welcome to Cosmos DB - PostgreSQL" : "Welcome to Cosmos DB"}
+              <div
+                className="title"
+                aria-label={
+                  userContext.apiType === "Postgres"
+                    ? "Welcome to Azure Cosmos DB for PostgreSQL"
+                    : "Welcome to Azure Cosmos DB"
+                }
+              >
+                {userContext.apiType === "Postgres"
+                  ? "Welcome to Azure Cosmos DB for PostgreSQL"
+                  : "Welcome to Azure Cosmos DB"}
                <FeaturePanelLauncher />
              </div>
              <div className="subtitle">
@@ -118,26 +135,36 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                  : "Globally distributed, multi-model database service for any scale"}
              </div>
              <div className="mainButtonsContainer">
-                {userContext.apiType === "Postgres" && usePostgres.getState().showPostgreTeachingBubble && (
-                  <TeachingBubble
-                    headline="New to Cosmos DB PGSQL?"
-                    target={"#quickstartDescription"}
-                    hasCloseButton
-                    onDismiss={() => usePostgres.getState().setShowPostgreTeachingBubble(false)}
-                    primaryButtonProps={{
-                      text: "Get started",
-                      onClick: () => {
-                        useTabs.getState().openAndActivateReactTab(ReactTabKind.Quickstart);
-                        usePostgres.getState().setShowPostgreTeachingBubble(false);
-                      },
-                    }}
-                  >
-                    Welcome! If you are new to Cosmos DB PGSQL and need help with getting started, here is where you can
-                    find sample data, query.
-                  </TeachingBubble>
-                )}
+                {userContext.apiType === "Postgres" &&
+                  usePostgres.getState().showPostgreTeachingBubble &&
+                  !usePostgres.getState().showResetPasswordBubble && (
+                    <TeachingBubble
+                      headline="New to Cosmos DB PGSQL?"
+                      target={"#mainButton-quickstartDescription"}
+                      hasCloseButton
+                      onDismiss={() => usePostgres.getState().setShowPostgreTeachingBubble(false)}
+                      calloutProps={{
+                        directionalHint: DirectionalHint.rightCenter,
+                        directionalHintFixed: true,
+                        preventDismissOnLostFocus: true,
+                        preventDismissOnResize: true,
+                        preventDismissOnScroll: true,
+                      }}
+                      primaryButtonProps={{
+                        text: "Get started",
+                        onClick: () => {
+                          useTabs.getState().openAndActivateReactTab(ReactTabKind.Quickstart);
+                          usePostgres.getState().setShowPostgreTeachingBubble(false);
+                        },
+                      }}
+                    >
+                      Welcome! If you are new to Cosmos DB PGSQL and need help with getting started, here is where you
+                      can find sample data, query.
+                    </TeachingBubble>
+                  )}
                {mainItems.map((item) => (
                  <Stack
+                    id={`mainButton-${item.id}`}
                    horizontal
                    className="mainButton focusable"
                    key={`${item.title}`}
@@ -161,6 +188,36 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                    </div>
                  </Stack>
                ))}
+                {userContext.apiType === "Postgres" && usePostgres.getState().showResetPasswordBubble && (
+                  <TeachingBubble
+                    headline="Create your password"
+                    target={"#mainButton-quickstartDescription"}
+                    hasCloseButton
+                    onDismiss={() => {
+                      localStorage.setItem(userContext.databaseAccount.id, "true");
+                      usePostgres.getState().setShowResetPasswordBubble(false);
+                    }}
+                    calloutProps={{
+                      directionalHint: DirectionalHint.bottomRightEdge,
+                      directionalHintFixed: true,
+                      preventDismissOnLostFocus: true,
+                      preventDismissOnResize: true,
+                      preventDismissOnScroll: true,
+                    }}
+                    primaryButtonProps={{
+                      text: "Create",
+                      onClick: () => {
+                        localStorage.setItem(userContext.databaseAccount.id, "true");
+                        sendMessage({
+                          type: MessageTypes.OpenPostgreSQLPasswordReset,
+                        });
+                        usePostgres.getState().setShowResetPasswordBubble(false);
+                      },
+                    }}
+                  >
+                    If you haven&apos;t changed your password yet, change it now.
+                  </TeachingBubble>
+                )}
              </div>
              {useCarousel.getState().showCoachMark && (
                <Coachmark
@@ -191,8 +248,8 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                </Coachmark>
              )}
              {userContext.apiType === "Postgres" ? (
-                <Stack horizontal style={{ margin: "0 auto" }} tokens={{ childrenGap: "15%" }}>
-                  <Stack>
+                <Stack horizontal style={{ margin: "0 auto", width: "84%" }} tokens={{ childrenGap: 32 }}>
+                  <Stack style={{ width: "33%" }}>
                    <Text
                      variant="large"
                      style={{
@@ -204,7 +261,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                    </Text>
                    {this.getNextStepItems()}
                  </Stack>
-                  <Stack>
+                  <Stack style={{ width: "33%" }}>
                    <Text
                      variant="large"
                      style={{
@@ -216,6 +273,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                    </Text>
                    {this.getTipsAndLearnMoreItems()}
                  </Stack>
+                  <Stack style={{ width: "33%" }}></Stack>
                </Stack>
              ) : (
                <div className="moreStuffContainer">
@@ -253,7 +311,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,
@@ -282,7 +344,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
        iconSrc: PowerShellIcon,
        title: "PostgreSQL Shell",
        description: "Create table and interact with data using PostgreSQL’s shell interface",
-        onClick: () => this.container.openNotebookTerminal(TerminalKind.Mongo),
+        onClick: () => this.container.openNotebookTerminal(TerminalKind.Postgres),
      };
      heroes.push(postgreShellBtn);
    } else {
@@ -300,11 +362,11 @@ export class SplashScreen extends React.Component<SplashScreenProps> {

    const connectBtn = {
      iconSrc: ConnectIcon,
-      title: userContext.apiType === "Postgres" ? "Connect with PG Admin" : "Connect",
+      title: userContext.apiType === "Postgres" ? "Connect with pgAdmin" : "Connect",
      description:
        userContext.apiType === "Postgres"
-          ? "Prefer using your own choice of tooling? Find the connection string you need to connect"
-          : "Prefer PGadmin? Find your connection strings here",
+          ? "Prefer pgAdmin? Find your connection strings here"
+          : "Prefer using your own choice of tooling? Find the connection string you need to connect",
      onClick: () => useTabs.getState().openAndActivateReactTab(ReactTabKind.Connect),
    };
    heroes.push(connectBtn);
@@ -388,7 +450,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
          {
            link: "https://aka.ms/mongodbintro",
            title: "What is the MongoDB API?",
-            description: "Understand the Cosmos DB API for MongoDB and its features.",
+            description: "Understand Azure Cosmos DB for MongoDB and its features.",
          },
          {
            link: "https://aka.ms/mongodbfeaturesupport",
@@ -445,7 +507,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
          {
            link: "https://aka.ms/tableintro",
            title: "What is the Table API?",
-            description: "Understand the Table API in Cosmos DB and its features",
+            description: "Understand Azure Cosmos DB for Table and its features",
          },
          {
            link: "https://aka.ms/tableimport",
@@ -454,8 +516,8 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
          },
          {
            link: "https://aka.ms/tablefaq",
-            title: "Table API FAQs",
-            description: "Common questions about the Table API",
+            title: "Azure Cosmos DB for Table FAQs",
+            description: "Common questions about Azure Cosmos DB for Table",
          },
        ];
        break;
@@ -473,7 +535,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
              >
                {item.title}
              </Link>
-              <Image src={LinkIcon} />
+              <Image src={LinkIcon} alt=" " />
            </Stack>
            <Text>{item.description}</Text>
          </Stack>
@@ -508,7 +570,17 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
  }

  private getLearningResourceItems(): JSX.Element {
-    let items: { link: string; title: string; description: string }[];
+    interface item {
+      link: string;
+      title: string;
+      description: string;
+    }
+    const cdbLiveTv: item = {
+      link: "https://developer.azurecosmosdb.com/tv",
+      title: "Learn the Fundamentals",
+      description: "Watch Azure Cosmos DB Live TV show introductory and how to videos.",
+    };
+    let items: item[];
    switch (userContext.apiType) {
      case "SQL":
      case "Postgres":
@@ -518,11 +590,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
            title: "Get Started using an SDK",
            description: "Learn about the Azure Cosmos DB SDK.",
          },
-          {
-            link: "https://aka.ms/msl-complex-queries",
-            title: "Master Complex Queries",
-            description: "Learn how to author complex queries.",
-          },
+          cdbLiveTv,
          {
            link: "https://aka.ms/msl-move-data",
            title: "Migrate Your Data",
@@ -542,11 +610,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
            title: "Getting Started Guide",
            description: "Learn the basics to get started.",
          },
-          {
-            link: "http://aka.ms/mongodotnet",
-            title: "Build a web API",
-            description: "Create a web API with the.NET SDK.",
-          },
+          cdbLiveTv,
        ];
        break;
      case "Cassandra":
@@ -556,11 +620,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
            title: "Create a Container",
            description: "Get to know the create a container options.",
          },
-          {
-            link: "https://aka.ms/cassandraserverdiagnostics",
-            title: "Run Server Diagnostics",
-            description: "Learn how to run server diagnostics.",
-          },
+          cdbLiveTv,
          {
            link: "https://aka.ms/Cassandrathroughput",
            title: "Provision Throughput",
@@ -580,11 +640,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
            title: "Import Graph Data",
            description: "Learn Bulk ingestion data using BulkExecutor",
          },
-          {
-            link: "https://aka.ms/graphoptimize",
-            title: "Optimize your Queries",
-            description: "Learn how to evaluate your Gremlin queries",
-          },
+          cdbLiveTv,
        ];
        break;
      case "Tables":
@@ -592,18 +648,14 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
          {
            link: "https://aka.ms/tabledotnet",
            title: "Build a .NET App",
-            description: "How to access Table API from a .NET app.",
+            description: "How to access Azure Cosmos DB for Table from a .NET app.",
          },
          {
            link: "https://aka.ms/Tablejava",
            title: "Build a Java App",
-            description: "Create a Table API app with Java SDK ",
-          },
-          {
-            link: "https://aka.ms/tablenodejs",
-            title: "Build a Node.js App",
-            description: "Create a Table API app with Node.js SDK",
+            description: "Create a Azure Cosmos DB for Table app with Java SDK ",
          },
+          cdbLiveTv,
        ];
        break;
    }
@@ -634,24 +686,24 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
  private getNextStepItems(): JSX.Element {
    const items: { link: string; title: string; description: string }[] = [
      {
-        link: "",
-        title: "Performance tuning",
-        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+        link: "https://go.microsoft.com/fwlink/?linkid=2208312",
+        title: "Data Modeling",
+        description: "",
      },
      {
-        link: "",
-        title: "Join Citus community",
-        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+        link: " https://go.microsoft.com/fwlink/?linkid=2206941 ",
+        title: "How to choose a Distribution Column",
+        description: "",
      },
      {
-        link: "",
-        title: "Useful diagnostic queries",
-        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+        link: "https://go.microsoft.com/fwlink/?linkid=2207425",
+        title: "Build Apps with Python/Java/Django",
+        description: "",
      },
    ];

    return (
-      <Stack>
+      <Stack style={{ minWidth: 124, maxWidth: 296 }}>
        {items.map((item, i) => (
          <Stack key={`nextStep${i}`} style={{ marginBottom: 26 }}>
            <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
@@ -670,24 +722,24 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
  private getTipsAndLearnMoreItems(): JSX.Element {
    const items: { link: string; title: string; description: string }[] = [
      {
-        link: "",
-        title: "Data modeling",
-        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+        link: "https://go.microsoft.com/fwlink/?linkid=2207226",
+        title: "Performance Tuning",
+        description: "",
      },
      {
-        link: "",
-        title: "How to choose a distribution Column",
-        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+        link: "https://go.microsoft.com/fwlink/?linkid=2208037",
+        title: "Useful Diagnostic Queries",
+        description: "",
      },
      {
-        link: "",
-        title: "Build apps with Python/ Java/ Django",
-        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+        link: "https://go.microsoft.com/fwlink/?linkid=2205270",
+        title: "Distributed SQL Reference",
+        description: "",
      },
    ];

    return (
-      <Stack>
+      <Stack style={{ minWidth: 124, maxWidth: 296 }}>
        {items.map((item, i) => (
          <Stack key={`tips${i}`} style={{ marginBottom: 26 }}>
            <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
--- 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/MongoShellTab/MongoShellTabComponent.tsx
+++ b/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import * as Constants from "../../../Common/Constants";
-import { configContext, Platform } from "../../../ConfigContext";
+import { configContext } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
@@ -9,6 +9,8 @@ import { isInvalidParentFrameOrigin, isReadyMessage } from "../../../Utils/Messa
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import TabsBase from "../TabsBase";
+import { getMongoShellOrigin } from "./getMongoShellOrigin";
+import { getMongoShellUrl } from "./getMongoShellUrl";

 //eslint-disable-next-line
 class MessageType {
@@ -47,7 +49,6 @@ export default class MongoShellTabComponent extends Component<
  IMongoShellTabComponentProps,
  IMongoShellTabComponentStates
 > {
-  private _runtimeEndpoint: string;
  private _logTraces: Map<string, number>;

  constructor(props: IMongoShellTabComponentProps) {
@@ -55,7 +56,7 @@ export default class MongoShellTabComponent extends Component<
    this._logTraces = new Map();

    this.state = {
-      url: this.getURL(),
+      url: getMongoShellUrl(),
    };

    props.onMongoShellTabAccessor({
@@ -65,22 +66,6 @@ export default class MongoShellTabComponent extends Component<
    window.addEventListener("message", this.handleMessage.bind(this), false);
  }

-  public getURL(): string {
-    const { databaseAccount: account } = userContext;
-    const resourceId = account?.id;
-    const accountName = account?.name;
-    const mongoEndpoint = account?.properties?.mongoEndpoint || account?.properties?.documentEndpoint;
-
-    this._runtimeEndpoint = configContext.platform === Platform.Hosted ? configContext.BACKEND_ENDPOINT : "";
-    const extensionEndpoint: string = configContext.BACKEND_ENDPOINT || this._runtimeEndpoint || "";
-    let baseUrl = "/content/mongoshell/dist/";
-    if (userContext.portalEnv === "localhost") {
-      baseUrl = "/content/mongoshell/";
-    }
-
-    return `${extensionEndpoint}${baseUrl}index.html?resourceId=${resourceId}&accountName=${accountName}&mongoEndpoint=${mongoEndpoint}`;
-  }
-
  //eslint-disable-next-line
  public setContentFocus(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void {}

@@ -136,6 +121,7 @@ export default class MongoShellTabComponent extends Component<
    const collectionId = this.props.collection.id();
    const apiEndpoint = configContext.BACKEND_ENDPOINT;
    const encryptedAuthToken: string = userContext.accessToken;
+    const targetOrigin = getMongoShellOrigin();

    shellIframe.contentWindow.postMessage(
      {
@@ -151,7 +137,7 @@ export default class MongoShellTabComponent extends Component<
          apiEndpoint: apiEndpoint,
        },
      },
-      configContext.BACKEND_ENDPOINT
+      targetOrigin
    );
  }

--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.test.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.test.ts
@@ -0,0 +1,86 @@
+import { extractFeatures } from "Platform/Hosted/extractFeatures";
+import { configContext } from "../../../ConfigContext";
+import { updateUserContext } from "../../../UserContext";
+import { getMongoShellOrigin } from "./getMongoShellOrigin";
+
+describe("getMongoShellOrigin", () => {
+  (window as { origin: string }).origin = "window_origin";
+
+  beforeEach(() => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1": "false",
+          "feature.enableLegacyMongoShellV2": "false",
+          "feature.enableLegacyMongoShellV1Debug": "false",
+          "feature.enableLegacyMongoShellV2Debug": "false",
+          "feature.loadLegacyMongoShellFromBE": "false",
+        })
+      ),
+    });
+  });
+
+  it("should return  by default", () => {
+    expect(getMongoShellOrigin()).toBe(window.origin);
+  });
+
+  it("should return window.origin when enableLegacyMongoShellV1", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellOrigin()).toBe(window.origin);
+  });
+
+  it("should return window.origin when enableLegacyMongoShellV2===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV2": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellOrigin()).toBe(window.origin);
+  });
+
+  it("should return window.origin when enableLegacyMongoShellV1Debug===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1Debug": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellOrigin()).toBe(window.origin);
+  });
+
+  it("should return window.origin when enableLegacyMongoShellV2Debug===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV2Debug": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellOrigin()).toBe(window.origin);
+  });
+
+  it("should return BACKEND_ENDPOINT when loadLegacyMongoShellFromBE===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.loadLegacyMongoShellFromBE": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellOrigin()).toBe(configContext.BACKEND_ENDPOINT);
+  });
+});
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.ts
@@ -0,0 +1,10 @@
+import { configContext } from "../../../ConfigContext";
+import { userContext } from "../../../UserContext";
+
+export function getMongoShellOrigin(): string {
+  if (userContext.features.loadLegacyMongoShellFromBE === true) {
+    return configContext.BACKEND_ENDPOINT;
+  }
+
+  return window.origin;
+}
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts
@@ -0,0 +1,206 @@
+import { extractFeatures } from "Platform/Hosted/extractFeatures";
+import { Platform, configContext, resetConfigContext, updateConfigContext } from "../../../ConfigContext";
+import { updateUserContext, userContext } from "../../../UserContext";
+import { getExtensionEndpoint, getMongoShellUrl } from "./getMongoShellUrl";
+
+const mongoBackendEndpoint = "https://localhost:1234";
+
+describe("getMongoShellUrl", () => {
+  let queryString = "";
+
+  beforeEach(() => {
+    resetConfigContext();
+
+    updateConfigContext({
+      BACKEND_ENDPOINT: mongoBackendEndpoint,
+      platform: Platform.Hosted,
+    });
+
+    updateUserContext({
+      subscriptionId: "fakeSubscriptionId",
+      resourceGroup: "fakeResourceGroup",
+      databaseAccount: {
+        id: "fakeId",
+        name: "fakeName",
+        location: "fakeLocation",
+        type: "fakeType",
+        kind: "fakeKind",
+        properties: {
+          documentEndpoint: "fakeDocumentEndpoint",
+          tableEndpoint: "fakeTableEndpoint",
+          gremlinEndpoint: "fakeGremlinEndpoint",
+          cassandraEndpoint: "fakeCassandraEndpoint",
+        },
+      },
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1": "false",
+          "feature.enableLegacyMongoShellV2": "false",
+          "feature.enableLegacyMongoShellV1Debug": "false",
+          "feature.enableLegacyMongoShellV2Debug": "false",
+          "feature.loadLegacyMongoShellFromBE": "false",
+        })
+      ),
+      portalEnv: "prod",
+    });
+
+    queryString = `resourceId=${userContext.databaseAccount.id}&accountName=${userContext.databaseAccount.name}&mongoEndpoint=${userContext.databaseAccount.properties.documentEndpoint}`;
+  });
+
+  it("should return /mongoshell/indexv2.html by default ", () => {
+    expect(getMongoShellUrl()).toBe(`/mongoshell/indexv2.html?${queryString}`);
+  });
+
+  it("should return /mongoshell/indexv2.html when portalEnv==localhost ", () => {
+    updateUserContext({
+      portalEnv: "localhost",
+    });
+
+    expect(getMongoShellUrl()).toBe(`/mongoshell/indexv2.html?${queryString}`);
+  });
+
+  it("should return /mongoshell/index.html when enableLegacyMongoShellV1===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellUrl()).toBe(`/mongoshell/index.html?${queryString}`);
+  });
+
+  it("should return /mongoshell/index.html when enableLegacyMongoShellV2===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV2": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellUrl()).toBe(`/mongoshell/indexv2.html?${queryString}`);
+  });
+
+  it("should return /mongoshell/index.html when enableLegacyMongoShellV1Debug===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1Debug": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellUrl()).toBe(`/mongoshell/debug/index.html?${queryString}`);
+  });
+
+  it("should return /mongoshell/index.html when enableLegacyMongoShellV2Debug===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV2Debug": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellUrl()).toBe(`/mongoshell/debug/indexv2.html?${queryString}`);
+  });
+
+  describe("loadLegacyMongoShellFromBE===true", () => {
+    beforeEach(() => {
+      resetConfigContext();
+      updateConfigContext({
+        BACKEND_ENDPOINT: mongoBackendEndpoint,
+        platform: Platform.Hosted,
+      });
+
+      updateUserContext({
+        features: extractFeatures(
+          new URLSearchParams({
+            "feature.loadLegacyMongoShellFromBE": "true",
+          })
+        ),
+      });
+    });
+
+    it("should return /mongoshell/index.html", () => {
+      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
+    });
+
+    it("configContext.platform !== Platform.Hosted, should return /mongoshell/indexv2.html", () => {
+      updateConfigContext({
+        platform: Platform.Portal,
+      });
+
+      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
+    });
+
+    it("configContext.BACKEND_ENDPOINT !== '' and configContext.platform !== Platform.Hosted, should return /mongoshell/indexv2.html", () => {
+      resetConfigContext();
+      updateConfigContext({
+        platform: Platform.Portal,
+        BACKEND_ENDPOINT: mongoBackendEndpoint,
+      });
+
+      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
+    });
+
+    it("configContext.BACKEND_ENDPOINT === '' and configContext.platform === Platform.Hosted, should return /mongoshell/indexv2.html ", () => {
+      resetConfigContext();
+      updateConfigContext({
+        platform: Platform.Hosted,
+      });
+
+      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
+    });
+
+    it("configContext.BACKEND_ENDPOINT === '' and configContext.platform !== Platform.Hosted, should return /mongoshell/indexv2.html", () => {
+      resetConfigContext();
+      updateConfigContext({
+        platform: Platform.Portal,
+      });
+
+      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
+    });
+  });
+});
+
+describe("getExtensionEndpoint", () => {
+  it("when platform === Platform.Hosted, backendEndpoint is undefined ", () => {
+    expect(getExtensionEndpoint(Platform.Hosted, undefined)).toBe("");
+  });
+
+  it("when platform === Platform.Hosted, backendEndpoint === ''", () => {
+    expect(getExtensionEndpoint(Platform.Hosted, "")).toBe("");
+  });
+
+  it("when platform === Platform.Hosted, backendEndpoint === null", () => {
+    expect(getExtensionEndpoint(Platform.Hosted, null)).toBe("");
+  });
+
+  it("when platform === Platform.Hosted, backendEndpoint != '' ", () => {
+    expect(getExtensionEndpoint(Platform.Hosted, "foo")).toBe("foo");
+  });
+
+  it("when platform === Platform.Portal, backendEndpoint is udefined ", () => {
+    expect(getExtensionEndpoint(Platform.Portal, undefined)).toBe("");
+  });
+
+  it("when platform === Platform.Portal, backendEndpoint === '' ", () => {
+    expect(getExtensionEndpoint(Platform.Portal, "")).toBe("");
+  });
+
+  it("when platform === Platform.Portal, backendEndpoint === null", () => {
+    expect(getExtensionEndpoint(Platform.Portal, null)).toBe("");
+  });
+
+  it("when platform !== Platform.Portal, backendEndpoint != '' ", () => {
+    expect(getExtensionEndpoint(Platform.Portal, "foo")).toBe("foo");
+  });
+});
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts
@@ -0,0 +1,45 @@
+import { configContext, Platform } from "../../../ConfigContext";
+import { userContext } from "../../../UserContext";
+
+export function getMongoShellUrl(): string {
+  const { databaseAccount: account } = userContext;
+  const resourceId = account?.id;
+  const accountName = account?.name;
+  const mongoEndpoint = account?.properties?.mongoEndpoint || account?.properties?.documentEndpoint;
+  const queryString = `resourceId=${resourceId}&accountName=${accountName}&mongoEndpoint=${mongoEndpoint}`;
+
+  if (userContext.features.enableLegacyMongoShellV1 === true) {
+    return `/mongoshell/index.html?${queryString}`;
+  }
+
+  if (userContext.features.enableLegacyMongoShellV1Debug === true) {
+    return `/mongoshell/debug/index.html?${queryString}`;
+  }
+
+  if (userContext.features.enableLegacyMongoShellV2 === true) {
+    return `/mongoshell/indexv2.html?${queryString}`;
+  }
+
+  if (userContext.features.enableLegacyMongoShellV2Debug === true) {
+    return `/mongoshell/debug/indexv2.html?${queryString}`;
+  }
+
+  if (userContext.portalEnv === "localhost") {
+    return `/mongoshell/indexv2.html?${queryString}`;
+  }
+
+  if (userContext.features.loadLegacyMongoShellFromBE === true) {
+    const extensionEndpoint: string = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+    return `${extensionEndpoint}/content/mongoshell/debug/index.html?${queryString}`;
+  }
+
+  return `/mongoshell/indexv2.html?${queryString}`;
+}
+
+export function getExtensionEndpoint(platform: string, backendEndpoint: string): string {
+  const runtimeEndpoint = platform === Platform.Hosted ? backendEndpoint : "";
+
+  const extensionEndpoint: string = backendEndpoint || runtimeEndpoint || "";
+
+  return extensionEndpoint;
+}
--- a/src/Explorer/Tabs/PostgresConnectTab.tsx
+++ b/src/Explorer/Tabs/PostgresConnectTab.tsx
@@ -0,0 +1,145 @@
+import {
+  Checkbox,
+  Dropdown,
+  Icon,
+  IconButton,
+  IDropdownOption,
+  ITextFieldStyles,
+  Label,
+  Link,
+  Stack,
+  Text,
+  TextField,
+  TooltipHost,
+} from "@fluentui/react";
+import React from "react";
+import { userContext } from "UserContext";
+
+export const PostgresConnectTab: React.FC = (): JSX.Element => {
+  const { adminLogin, nodes, enablePublicIpAccess } = userContext.postgresConnectionStrParams;
+  const [usePgBouncerPort, setUsePgBouncerPort] = React.useState<boolean>(false);
+  const [selectedNode, setSelectedNode] = React.useState<string>(nodes?.[0]?.value);
+  const portNumber = usePgBouncerPort ? "6432" : "5432";
+
+  const onCopyBtnClicked = (selector: string): void => {
+    const textfield: HTMLInputElement = document.querySelector(selector);
+    textfield.select();
+    document.execCommand("copy");
+  };
+
+  const textfieldStyles: Partial<ITextFieldStyles> = {
+    root: { width: "100%" },
+    field: { backgroundColor: "rgb(230, 230, 230)" },
+    fieldGroup: { borderColor: "rgb(138, 136, 134)" },
+    subComponentStyles: { label: { fontWeight: 400 } },
+    description: { fontWeight: 400 },
+  };
+
+  const nodesDropdownOptions: IDropdownOption[] = nodes.map((node) => ({
+    key: node.value,
+    text: node.text,
+  }));
+
+  const postgresSQLConnectionURL = `postgres://${adminLogin}:{your_password}@${selectedNode}:${portNumber}/citus?sslmode=require`;
+  const psql = `psql "host=${selectedNode} port=${portNumber} dbname=citus user=${adminLogin} password={your_password} sslmode=require"`;
+  const jdbc = `jdbc:postgresql://${selectedNode}:${portNumber}/citus?user=${adminLogin}&password={your_password}&sslmode=require`;
+  const libpq = `host=${selectedNode} port=${portNumber} dbname=citus user=${adminLogin} password={your_password} sslmode=require`;
+  const adoDotNet = `Server=${selectedNode};Database=citus;Port=${portNumber};User Id=${adminLogin};Password={your_password};Ssl Mode=Require;`;
+
+  return (
+    <div style={{ width: "100%", padding: 16 }}>
+      <Stack horizontal verticalAlign="center" style={{ marginBottom: 8 }}>
+        <Label style={{ marginRight: 8 }}>Public IP addresses on worker nodes:</Label>
+        <TooltipHost
+          content="
+You can enable or disable public IP addresses on the worker nodes on 'Networking' page of your server group."
+        >
+          <Icon style={{ margin: "5px 8px 0 0", cursor: "default" }} iconName="Info" />
+        </TooltipHost>
+
+        <TextField value={enablePublicIpAccess ? "On" : "Off"} readOnly disabled />
+      </Stack>
+      <Stack horizontal style={{ marginBottom: 8 }}>
+        <Label style={{ marginRight: 85 }}>Show connection strings for</Label>
+        <Dropdown
+          options={nodesDropdownOptions}
+          selectedKey={selectedNode}
+          onChange={(_, option) => {
+            const selectedNode = option.key as string;
+            setSelectedNode(selectedNode);
+            if (!selectedNode.startsWith("c.")) {
+              setUsePgBouncerPort(false);
+            }
+          }}
+          style={{ width: 200 }}
+        />
+      </Stack>
+      <Stack horizontal style={{ marginBottom: 8 }}>
+        <Label style={{ marginRight: 44 }}>PgBouncer connection strings</Label>
+        <Checkbox
+          boxSide="end"
+          checked={usePgBouncerPort}
+          onChange={(_, checked: boolean) => setUsePgBouncerPort(checked)}
+          disabled={!selectedNode?.startsWith("c.")}
+        />
+      </Stack>
+      <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+        <TextField
+          label="PostgreSQL connection URL"
+          id="postgresSQLConnectionURL"
+          readOnly
+          value={postgresSQLConnectionURL}
+          styles={textfieldStyles}
+        />
+        <IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#postgresSQLConnectionURL")} />
+      </Stack>
+
+      <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+        <TextField label="psql" id="psql" readOnly value={psql} styles={textfieldStyles} />
+        <IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#psql")} />
+      </Stack>
+
+      <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+        <TextField label="JDBC" id="JDBC" readOnly value={jdbc} styles={textfieldStyles} />
+        <IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#JDBC")} />
+      </Stack>
+
+      <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+        <TextField
+          label="Node.js, Python, Ruby, PHP, C++ (libpq)"
+          id="libpq"
+          readOnly
+          value={libpq}
+          styles={textfieldStyles}
+        />
+        <IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#libpq")} />
+      </Stack>
+      <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+        <TextField label="ADO.NET" id="adoDotNet" readOnly value={adoDotNet} styles={textfieldStyles} />
+        <IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#adoDotNet")} />
+      </Stack>
+
+      <Label>Secure connections</Label>
+      <Text style={{ marginBottom: 8 }}>
+        Only secure connections are supported. For production use cases, we recommend using the &apos;verify-full&apos;
+        mode to enforce TLS certificate verification. You will need to download the Hyperscale (Citus) certificate, and
+        provide it when connecting to the database.{" "}
+        <Link href="https://go.microsoft.com/fwlink/?linkid=2155061" target="_blank">
+          Learn more
+        </Link>
+      </Text>
+
+      <Label>Connect with pgAdmin</Label>
+      <Text>
+        Refer to our{" "}
+        <Link
+          href="https://learn.microsoft.com/en-us/azure/postgresql/hyperscale/howto-connect?tabs=pgadmin"
+          target="_blank"
+        >
+          guide
+        </Link>{" "}
+        to help you connect via pgAdmin.
+      </Text>
+    </div>
+  );
+};
--- 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-->
@@ -139,6 +134,7 @@
            data-bind="click: selectQueryOptions, event: { keydown: onselectQueryOptionsKeyDown }"
            tabindex="0"
            role="button"
+            href=""
          >
            <span>Choose Columns... </span>
          </a>
@@ -168,22 +164,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/QuickstartTab.tsx
+++ b/src/Explorer/Tabs/QuickstartTab.tsx
@@ -1,11 +1,15 @@
-import { Spinner, SpinnerSize, Stack } from "@fluentui/react";
-import { NotebookWorkspaceConnectionInfo } from "Contracts/DataModels";
+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";
 import Explorer from "Explorer/Explorer";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
+import { QuickstartFirewallNotification } from "Explorer/Quickstart/QuickstartFirewallNotification";
 import { QuickstartGuide } from "Explorer/Quickstart/QuickstartGuide";
-import React, { useEffect } from "react";
+import { ReactTabKind, useTabs } from "hooks/useTabs";
+import React, { useEffect, useState } from "react";
 import { userContext } from "UserContext";
+import { armRequest } from "Utils/arm/request";

 interface QuickstartTabProps {
  explorer: Explorer;
@@ -13,14 +17,42 @@ interface QuickstartTabProps {

 export const QuickstartTab: React.FC<QuickstartTabProps> = ({ explorer }: QuickstartTabProps): JSX.Element => {
  const notebookServerInfo = useNotebook((state) => state.notebookServerInfo);
+  const [isAllPublicIPAddressEnabled, setIsAllPublicIPAddressEnabled] = useState<boolean>(true);
+
+  const getNotebookServerInfo = (): NotebookWorkspaceConnectionInfo => ({
+    authToken: notebookServerInfo.authToken,
+    notebookServerEndpoint: `${notebookServerInfo.notebookServerEndpoint?.replace(/\/+$/, "")}/postgresql`,
+    forwardingId: notebookServerInfo.forwardingId,
+  });
+
+  const checkFirewallRules = async (): Promise<void> => {
+    const firewallRulesUri = `${userContext.databaseAccount.id}/firewallRules`;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const response: any = await armRequest({
+      host: configContext.ARM_ENDPOINT,
+      path: firewallRulesUri,
+      method: "GET",
+      apiVersion: "2020-10-05-privatepreview",
+    });
+    const firewallRules: PostgresFirewallRule[] = response?.data?.value || response?.value || [];
+    const isEnabled = firewallRules.some(
+      (rule) => rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255"
+    );
+    setIsAllPublicIPAddressEnabled(isEnabled);
+
+    // If the firewall rule is not added, check every 30 seconds to see if the user has added the rule
+    if (!isEnabled && useTabs.getState().activeReactTab === ReactTabKind.Quickstart) {
+      setTimeout(checkFirewallRules, 30000);
+    }
+  };
+
+  useEffect(() => {
+    checkFirewallRules();
+  });
+
  useEffect(() => {
    explorer.allocateContainer();
  }, []);
-  const getNotebookServerInfo = (): NotebookWorkspaceConnectionInfo => ({
-    authToken: notebookServerInfo.authToken,
-    notebookServerEndpoint: `${notebookServerInfo.notebookServerEndpoint?.replace(/\/+$/, "")}/mongo`,
-    forwardingId: notebookServerInfo.forwardingId,
-  });

  return (
    <Stack style={{ width: "100%" }} horizontal>
@@ -28,15 +60,24 @@ export const QuickstartTab: React.FC<QuickstartTabProps> = ({ explorer }: Quicks
        <QuickstartGuide />
      </Stack>
      <Stack style={{ width: "50%", borderLeft: "black solid 1px" }}>
-        {notebookServerInfo?.notebookServerEndpoint && (
+        {!isAllPublicIPAddressEnabled && <QuickstartFirewallNotification />}
+        {isAllPublicIPAddressEnabled && notebookServerInfo?.notebookServerEndpoint && (
          <NotebookTerminalComponent
            notebookServerInfo={getNotebookServerInfo()}
            databaseAccount={userContext.databaseAccount}
-            tabId="EmbbedTerminal"
+            tabId="QuickstartPSQLShell"
          />
        )}
-        {!notebookServerInfo?.notebookServerEndpoint && (
-          <Spinner styles={{ root: { marginTop: 10 } }} size={SpinnerSize.large}></Spinner>
+        {isAllPublicIPAddressEnabled && !notebookServerInfo?.notebookServerEndpoint && (
+          <Stack style={{ margin: "auto 0" }}>
+            <Text block style={{ margin: "auto" }}>
+              Connecting to the PostgreSQL shell.
+            </Text>
+            <Text block style={{ margin: "auto" }}>
+              If the cluster was just created, this could take up to a minute.
+            </Text>
+            <Spinner styles={{ root: { marginTop: 16 } }} size={SpinnerSize.large}></Spinner>
+          </Stack>
        )}
      </Stack>
    </Stack>
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -1,8 +1,13 @@
+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";
 import { ConnectTab } from "Explorer/Tabs/ConnectTab";
+import { PostgresConnectTab } from "Explorer/Tabs/PostgresConnectTab";
 import { QuickstartTab } from "Explorer/Tabs/QuickstartTab";
+import { userContext } from "UserContext";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import ko from "knockout";
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
@@ -19,10 +24,23 @@ interface TabsProps {
 }

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

  return (
    <div className="tabsManagerContainer">
+      {networkSettingsWarning && (
+        <MessageBar
+          messageBarType={MessageBarType.warning}
+          actions={
+            <MessageBarButton onClick={() => sendMessage({ type: MessageTypes.OpenPostgresNetworkingBlade })}>
+              Change network settings
+            </MessageBarButton>
+          }
+          messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+        >
+          {networkSettingsWarning}
+        </MessageBar>
+      )}
      <div id="content" className="flexContainer hideOverflows">
        <div className="nav-tabs-margin">
          <ul className="nav nav-tabs level navTabHeight" id="navTabs" role="tablist">
@@ -74,6 +92,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
        }
      }}
      className={active ? "active tabList" : "tabList"}
+      style={active ? { fontWeight: "bolder" } : {}}
      title={useObservable(tab?.tabPath || ko.observable(""))}
      aria-selected={active}
      aria-expanded={active}
@@ -83,22 +102,20 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
      ref={focusTab}
    >
      <span className="tabNavContentContainer">
-        <a data-toggle="tab" href={"#" + tabId} tabIndex={-1}>
-          <div className="tab_Content">
-            <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
-              {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
-              {useObservable(tab?.isExecuting || ko.observable(false)) && (
-                <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
-              )}
-            </span>
-            <span className="tabNavText">{useObservable(tab?.tabTitle || ko.observable(ReactTabKind[tabKind]))}</span>
-            {tabKind !== ReactTabKind.Home && (
-              <span className="tabIconSection">
-                <CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
-              </span>
+        <div className="tab_Content">
+          <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
+            {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
+            {useObservable(tab?.isExecuting || ko.observable(false)) && (
+              <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
            )}
-          </div>
-        </a>
+          </span>
+          <span className="tabNavText">{useObservable(tab?.tabTitle || ko.observable(ReactTabKind[tabKind]))}</span>
+          {tabKind !== ReactTabKind.Home && (
+            <span className="tabIconSection">
+              <CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
+            </span>
+          )}
+        </div>
      </span>
    </li>
  );
@@ -189,7 +206,7 @@ const onKeyPressReactTab = (e: KeyboardEvent, tabKind: ReactTabKind): void => {
 const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): JSX.Element => {
  switch (activeReactTab) {
    case ReactTabKind.Connect:
-      return <ConnectTab />;
+      return userContext.apiType === "Postgres" ? <PostgresConnectTab /> : <ConnectTab />;
    case ReactTabKind.Home:
      return <SplashScreen explorer={explorer} />;
    case ReactTabKind.Quickstart:
--- a/src/Explorer/Tabs/TerminalTab.tsx
+++ b/src/Explorer/Tabs/TerminalTab.tsx
@@ -1,6 +1,9 @@
 import { Spinner, SpinnerSize } from "@fluentui/react";
+import { configContext } from "ConfigContext";
+import { QuickstartFirewallNotification } from "Explorer/Quickstart/QuickstartFirewallNotification";
 import * as ko from "knockout";
 import * as React from "react";
+import { armRequest } from "Utils/arm/request";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -26,10 +29,15 @@ class NotebookTerminalComponentAdapter implements ReactAdapter {
  constructor(
    private getNotebookServerInfo: () => DataModels.NotebookWorkspaceConnectionInfo,
    private getDatabaseAccount: () => DataModels.DatabaseAccount,
-    private getTabId: () => string
+    private getTabId: () => string,
+    private isAllPublicIPAddressesEnabled: ko.Observable<boolean>
  ) {}

  public renderComponent(): JSX.Element {
+    if (!this.isAllPublicIPAddressesEnabled()) {
+      return <QuickstartFirewallNotification />;
+    }
+
    return this.parameters() ? (
      <NotebookTerminalComponent
        notebookServerInfo={this.getNotebookServerInfo()}
@@ -46,25 +54,33 @@ export default class TerminalTab extends TabsBase {
  public readonly html = '<div style="height: 100%" data-bind="react:notebookTerminalComponentAdapter"></div>  ';
  private container: Explorer;
  private notebookTerminalComponentAdapter: NotebookTerminalComponentAdapter;
+  private isAllPublicIPAddressesEnabled: ko.Observable<boolean>;

  constructor(options: TerminalTabOptions) {
    super(options);
    this.container = options.container;
+    this.isAllPublicIPAddressesEnabled = ko.observable(true);
    this.notebookTerminalComponentAdapter = new NotebookTerminalComponentAdapter(
      () => this.getNotebookServerInfo(options),
      () => userContext?.databaseAccount,
-      () => this.tabId
+      () => this.tabId,
+      this.isAllPublicIPAddressesEnabled
    );
    this.notebookTerminalComponentAdapter.parameters = ko.computed<boolean>(() => {
      if (
        this.isTemplateReady() &&
        useNotebook.getState().isNotebookEnabled &&
-        useNotebook.getState().notebookServerInfo?.notebookServerEndpoint
+        useNotebook.getState().notebookServerInfo?.notebookServerEndpoint &&
+        this.isAllPublicIPAddressesEnabled()
      ) {
        return true;
      }
      return false;
    });
+
+    if (options.kind === ViewModels.TerminalKind.Postgres) {
+      this.checkPostgresFirewallRules();
+    }
  }

  public getContainer(): Explorer {
@@ -95,6 +111,10 @@ export default class TerminalTab extends TabsBase {
        endpointSuffix = "cassandra";
        break;

+      case ViewModels.TerminalKind.Postgres:
+        endpointSuffix = "postgresql";
+        break;
+
      default:
        throw new Error(`Terminal kind: ${options.kind} not supported`);
    }
@@ -106,4 +126,25 @@ export default class TerminalTab extends TabsBase {
      forwardingId: info.forwardingId,
    };
  }
+
+  private async checkPostgresFirewallRules(): Promise<void> {
+    const firewallRulesUri = `${userContext.databaseAccount.id}/firewallRules`;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const response: any = await armRequest({
+      host: configContext.ARM_ENDPOINT,
+      path: firewallRulesUri,
+      method: "GET",
+      apiVersion: "2020-10-05-privatepreview",
+    });
+    const firewallRules: DataModels.PostgresFirewallRule[] = response?.data?.value || response?.value || [];
+    const isEnabled = firewallRules.some(
+      (rule) => rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255"
+    );
+    this.isAllPublicIPAddressesEnabled(isEnabled);
+
+    // If the firewall rule is not added, check every 30 seconds to see if the user has added the rule
+    if (!isEnabled) {
+      setTimeout(() => this.checkPostgresFirewallRules(), 30000);
+    }
+  }
 }
--- a/src/Explorer/Tree/Collection.ts
+++ b/src/Explorer/Tree/Collection.ts
@@ -1160,23 +1160,6 @@ export default class Collection implements ViewModels.Collection {
    this.onDocumentDBDocumentsClick();
  }

-  /**
-   * Get correct collection label depending on account API
-   */
-  public getLabel(): string {
-    if (userContext.apiType === "Tables") {
-      return "Entities";
-    } else if (userContext.apiType === "Cassandra") {
-      return "Rows";
-    } else if (userContext.apiType === "Gremlin") {
-      return "Graph";
-    } else if (userContext.apiType === "Mongo") {
-      return "Documents";
-    }
-
-    return "Items";
-  }
-
  public getDatabase(): ViewModels.Database {
    return useDatabases.getState().findDatabaseWithId(this.databaseId);
  }
--- a/src/Explorer/Tree/Database.tsx
+++ b/src/Explorer/Tree/Database.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import * as _ from "underscore";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
-import { readCollections } from "../../Common/dataAccess/readCollections";
+import { readCollections, readCollectionsWithPagination } from "../../Common/dataAccess/readCollections";
 import { readDatabaseOffer } from "../../Common/dataAccess/readDatabaseOffer";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
@@ -13,6 +13,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { useSidePanel } from "../../hooks/useSidePanel";
 import { useTabs } from "../../hooks/useTabs";
 import { IJunoResponse, JunoClient } from "../../Juno/JunoClient";
+import * as StorageUtility from "../../Shared/StorageUtility";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
@@ -38,6 +39,7 @@ export default class Database implements ViewModels.Database {
  public selectedSubnodeKind: ko.Observable<ViewModels.CollectionTabKind>;
  public junoClient: JunoClient;
  public isSampleDB: boolean;
+  public collectionsContinuationToken?: string;
  private isOfferRead: boolean;

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

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

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

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

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

+      if (database.collectionsContinuationToken) {
+        const loadMoreNode: TreeNode = {
+          label: "load more",
+          className: "loadMoreHeader",
+          onClick: async () => {
+            await database.loadCollections();
+            useDatabases.getState().updateDatabase(database);
+          },
+        };
+        databaseNode.children.push(loadMoreNode);
+      }
+
      database.collections.subscribe((collections: ViewModels.Collection[]) => {
        collections.forEach((collection: ViewModels.Collection) =>
          databaseNode.children.push(buildCollectionNode(database, collection))
@@ -497,7 +510,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
  const buildCollectionNode = (database: ViewModels.Database, collection: ViewModels.Collection): TreeNode => {
    const children: TreeNode[] = [];
    children.push({
-      label: collection.getLabel(),
+      label: getItemName(),
      id: collection.isSampleCollection ? "sampleItems" : "",
      onClick: () => {
        collection.openTab();
--- a/src/Explorer/Tree/ResourceTreeAdapter.tsx
+++ b/src/Explorer/Tree/ResourceTreeAdapter.tsx
@@ -1,6 +1,7 @@
 import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
 import * as ko from "knockout";
 import * as React from "react";
+import { getItemName } from "Utils/APITypeUtils";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
 import DeleteIcon from "../../../images/delete.svg";
 import GalleryIcon from "../../../images/GalleryIcon.svg";
@@ -254,7 +255,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
  private buildCollectionNode(database: ViewModels.Database, collection: ViewModels.Collection): TreeNode {
    const children: TreeNode[] = [];
    children.push({
-      label: collection.getLabel(),
+      label: getItemName(),
      onClick: () => {
        collection.openTab();
        // push to most recent
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -80,6 +80,7 @@ const App: React.FunctionComponent = () => {
  return (
    <div className="flexContainer">
      <div id="divExplorer" className="flexContainer hideOverflows">
+        <div id="freeTierTeachingBubble"> </div>
        {/* Main Command Bar - Start */}
        <CommandBar container={explorer} />
        {/* Collections Tree and Tabs - Begin */}
--- a/src/Phoenix/PhoenixClient.ts
+++ b/src/Phoenix/PhoenixClient.ts
@@ -32,6 +32,7 @@ import { userContext } from "../UserContext";
 import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";

 export class PhoenixClient {
+  private armResourceId: string;
  private containerHealthHandler: NodeJS.Timeout;
  private retryOptions: promiseRetry.Options = {
    retries: Notebook.retryAttempts,
@@ -39,8 +40,16 @@ export class PhoenixClient {
    minTimeout: Notebook.retryAttemptDelayMs,
  };

+  constructor(armResourceId: string) {
+    this.armResourceId = armResourceId;
+  }
+
  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>> {
@@ -75,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;
@@ -214,22 +226,21 @@ export class PhoenixClient {
    }
  }

-  public static getPhoenixEndpoint(): string {
-    const phoenixEndpoint =
+  private getPhoenixControlPlanePathPrefix(): string {
+    if (!this.armResourceId) {
+      throw new Error("The Phoenix client was not initialized properly: missing ARM resourcce id");
+    }
+
+    const toolsEndpoint =
      userContext.features.phoenixEndpoint ?? userContext.features.junoEndpoint ?? configContext.JUNO_ENDPOINT;
-    if (!validateEndpoint(phoenixEndpoint, allowedJunoOrigins)) {
-      const error = `${phoenixEndpoint} not allowed as juno endpoint`;
+
+    if (!validateEndpoint(toolsEndpoint, allowedJunoOrigins)) {
+      const error = `${toolsEndpoint} not allowed as tools endpoint`;
      console.error(error);
      throw new Error(error);
    }

-    return phoenixEndpoint;
-  }
-
-  public getPhoenixControlPlanePathPrefix(): string {
-    return `${PhoenixClient.getPhoenixEndpoint()}/api/controlplane/toolscontainer/cosmosaccounts${
-      userContext.databaseAccount.id
-    }`;
+    return `${toolsEndpoint}/api/controlplane/toolscontainer/cosmosaccounts${this.armResourceId}`;
  }

  private static getHeaders(): HeadersInit {
--- a/src/Platform/Hosted/Authorization.ts
+++ b/src/Platform/Hosted/Authorization.ts
@@ -1,31 +0,0 @@
-import * as Constants from "../../Common/Constants";
-import { configContext } from "../../ConfigContext";
-import * as DataModels from "../../Contracts/DataModels";
-import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
-import { userContext } from "../../UserContext";
-
-export default class AuthHeadersUtil {
-  public static async generateEncryptedToken(readOnly: boolean = false): Promise<DataModels.GenerateTokenResponse> {
-    const url = configContext.BACKEND_ENDPOINT + "/api/tokens/generateToken" + AuthHeadersUtil._generateResourceUrl();
-    const headers: any = { authorization: userContext.authorizationToken };
-    headers[Constants.HttpHeaders.getReadOnlyKey] = readOnly;
-
-    const response = await fetch(url, { method: "POST", headers });
-    const result = await response.json();
-    // This API has a quirk where the response must be parsed to JSON twice
-    return JSON.parse(result);
-  }
-
-  private static _generateResourceUrl(): string {
-    const { databaseAccount, resourceGroup, subscriptionId } = userContext;
-    const apiKind: DataModels.ApiKind = DefaultExperienceUtility.getApiKindFromDefaultExperience(userContext.apiType);
-    const accountEndpoint = databaseAccount?.properties?.documentEndpoint || "";
-    const sid = subscriptionId || "";
-    const rg = resourceGroup || "";
-    const dba = databaseAccount?.name || "";
-    const resourceUrl = encodeURIComponent(accountEndpoint);
-    const rid = "";
-    const rtype = "";
-    return `?resourceUrl=${resourceUrl}&rid=${rid}&rtype=${rtype}&sid=${sid}&rg=${rg}&dba=${dba}&api=${apiKind}`;
-  }
-}
--- a/src/Platform/Hosted/extractFeatures.ts
+++ b/src/Platform/Hosted/extractFeatures.ts
@@ -29,7 +29,12 @@ export type Features = {
  readonly mongoProxyEndpoint?: string;
  readonly mongoProxyAPIs?: string;
  readonly enableThroughputCap: boolean;
-  readonly enablePGQuickstart: boolean;
+  readonly enableHierarchicalKeys: boolean;
+  readonly enableLegacyMongoShellV1: boolean;
+  readonly enableLegacyMongoShellV1Debug: boolean;
+  readonly enableLegacyMongoShellV2: boolean;
+  readonly enableLegacyMongoShellV2Debug: boolean;
+  readonly loadLegacyMongoShellFromBE: boolean;

  // can be set via both flight and feature flag
  autoscaleDefault: boolean;
@@ -91,7 +96,12 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
    partitionKeyDefault2: "true" === get("pkpartitionkeytest"),
    notebooksDownBanner: "true" === get("notebooksDownBanner"),
    enableThroughputCap: "true" === get("enablethroughputcap"),
-    enablePGQuickstart: "true" === get("enablepgquickstart"),
+    enableHierarchicalKeys: "true" === get("enablehierarchicalkeys"),
+    enableLegacyMongoShellV1: "true" === get("enablelegacymongoshellv1"),
+    enableLegacyMongoShellV1Debug: "true" === get("enablelegacymongoshellv1debug"),
+    enableLegacyMongoShellV2: "true" === get("enablelegacymongoshellv2"),
+    enableLegacyMongoShellV2Debug: "true" === get("enablelegacymongoshellv2debug"),
+    loadLegacyMongoShellFromBE: "true" === get("loadlegacymongoshellfrombe"),
  };
 }

--- a/src/SelfServe/SelfServeUtils.tsx
+++ b/src/SelfServe/SelfServeUtils.tsx
@@ -40,23 +40,23 @@ export enum SelfServeType {
 */
 export enum BladeType {
  /**
-   * Keys blade of a SQL API account.
+   * Keys blade of a Azure Cosmos DB for NoSQL account.
   */
  SqlKeys = "keys",
  /**
-   * Keys blade of a Mongo API account.
+   * Keys blade of a Azure Cosmos DB for MongoDB account.
   */
  MongoKeys = "mongoDbKeys",
  /**
-   * Keys blade of a Cassandra API account.
+   * Keys blade of a Azure Cosmos DB for Apache Cassandra account.
   */
  CassandraKeys = "cassandraDbKeys",
  /**
-   * Keys blade of a Gremlin API account.
+   * Keys blade of a Azure Cosmos DB for Apache Gremlin account.
   */
  GremlinKeys = "keys",
  /**
-   * Keys blade of a Table API account.
+   * Keys blade of a Azure Cosmos DB for Table account.
   */
  TableKeys = "tableKeys",
  /**
--- a/src/Shared/StorageUtility.ts
+++ b/src/Shared/StorageUtility.ts
@@ -4,6 +4,7 @@ import * as SessionStorageUtility from "./SessionStorageUtility";
 export { LocalStorageUtility, SessionStorageUtility };
 export enum StorageKey {
  ActualItemPerPage,
+  ContainerPaginationEnabled,
  CustomItemPerPage,
  DatabaseAccountId,
  EncryptedKeyToken,
--- a/src/Terminal/JupyterLabAppFactory.ts
+++ b/src/Terminal/JupyterLabAppFactory.ts
@@ -2,7 +2,7 @@
 * JupyterLab applications based on jupyterLab components
 */
 import { ServerConnection, TerminalManager } from "@jupyterlab/services";
-import { IMessage } from "@jupyterlab/services/lib/terminal/terminal";
+import { IMessage, ITerminalConnection } from "@jupyterlab/services/lib/terminal/terminal";
 import { Terminal } from "@jupyterlab/terminal";
 import { Panel, Widget } from "@phosphor/widgets";
 import { userContext } from "UserContext";
@@ -24,6 +24,10 @@ export class JupyterLabAppFactory {
    this.isShellStarted = content?.includes("Connected to") && content?.includes("cqlsh");
  }

+  private isPostgresShellStarted(content: string | undefined) {
+    this.isShellStarted = content?.includes("citus=>");
+  }
+
  constructor(closeTab: () => void) {
    this.onShellExited = closeTab;
    this.isShellStarted = false;
@@ -36,10 +40,13 @@ export class JupyterLabAppFactory {
      case "Cassandra":
        this.checkShellStarted = this.isCassandraShellStarted;
        break;
+      case "Postgres":
+        this.checkShellStarted = this.isPostgresShellStarted;
+        break;
    }
  }

-  public async createTerminalApp(serverSettings: ServerConnection.ISettings) {
+  public async createTerminalApp(serverSettings: ServerConnection.ISettings): Promise<ITerminalConnection | undefined> {
    const manager = new TerminalManager({
      serverSettings: serverSettings,
    });
@@ -61,7 +68,7 @@ export class JupyterLabAppFactory {

    if (!term) {
      console.error("Failed starting terminal");
-      return;
+      return undefined;
    }

    term.title.closable = false;
@@ -74,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();
@@ -83,5 +93,7 @@ export class JupyterLabAppFactory {
    window.addEventListener("unload", () => {
      panel.dispose();
    });
+
+    return session;
  }
 }
--- a/src/Terminal/index.ts
+++ b/src/Terminal/index.ts
@@ -1,4 +1,5 @@
 import { ServerConnection } from "@jupyterlab/services";
+import { IMessage, ITerminalConnection } from "@jupyterlab/services/lib/terminal/terminal";
 import "@jupyterlab/terminal/style/index.css";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import postRobot from "post-robot";
@@ -41,7 +42,7 @@ const createServerSettings = (props: TerminalProps): ServerConnection.ISettings
  return ServerConnection.makeSettings(options);
 };

-const initTerminal = async (props: TerminalProps) => {
+const initTerminal = async (props: TerminalProps): Promise<ITerminalConnection | undefined> => {
  // Initialize userContext (only properties which are needed by TelemetryProcessor)
  updateUserContext({
    subscriptionId: props.subscriptionId,
@@ -55,10 +56,12 @@ const initTerminal = async (props: TerminalProps) => {
  const startTime = TelemetryProcessor.traceStart(Action.OpenTerminal, data);

  try {
-    await new JupyterLabAppFactory(() => closeTab(props.tabId)).createTerminalApp(serverSettings);
+    const session = await new JupyterLabAppFactory(() => closeTab(props.tabId)).createTerminalApp(serverSettings);
    TelemetryProcessor.traceSuccess(Action.OpenTerminal, data, startTime);
+    return session;
  } catch (error) {
    TelemetryProcessor.traceFailure(Action.OpenTerminal, data, startTime);
+    return undefined;
  }
 };

@@ -70,6 +73,7 @@ const closeTab = (tabId: string): void => {
 };

 const main = async (): Promise<void> => {
+  let session: ITerminalConnection | undefined;
  postRobot.on(
    "props",
    {
@@ -80,7 +84,22 @@ const main = async (): Promise<void> => {
      // Typescript definition for event is wrong. So read props by casting to <any>
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const props = (event as any).data as TerminalProps;
-      await initTerminal(props);
+      session = await initTerminal(props);
+    }
+  );
+
+  postRobot.on(
+    "sendMessage",
+    {
+      window: window.parent,
+      domain: window.location.origin,
+    },
+    async (event) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const message = (event as any).data as IMessage;
+      if (session) {
+        session.send(message);
+      }
    }
  );
 };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
MokireddySampath	a516d9ec45	Update AddTableEntityPanel.test.tsx.snap	2023-06-06 22:13:02 +05:30
MokireddySampath	61a0433c40	Update QuickstartCarousel.tsx	2023-06-06 22:11:22 +05:30
MokireddySampath	0fd7129d2f	Update AddTableEntityPanel.tsx	2023-05-31 14:54:26 +05:30
MokireddySampath	b4c0e29c04	Update RightPaneForm.tsx	2023-05-31 14:53:33 +05:30
MokireddySampath	8e723df3fb	Update NewVertexComponent.tsx	2023-05-31 14:51:35 +05:30
MokireddySampath	9e2ab607f7	Update ThroughputInput.test.tsx.snap	2023-05-31 14:49:04 +05:30
MokireddySampath	7108c9b1ba	Update ThroughputInput.tsx	2023-05-31 14:46:54 +05:30
MokireddySampath	e3632b734c	Update ThroughputInput.less	2023-05-31 14:46:27 +05:30
MokireddySampath	881efd965c	Update TableEntity.tsx	2023-05-31 14:46:03 +05:30
MokireddySampath	84b73d5bb6	Update queryBuilder.less	2023-05-31 14:45:33 +05:30
MokireddySampath	9e7beff184	Update fulldatatables.less	2023-05-31 14:45:01 +05:30
MokireddySampath	a0b6d71507	Update SplashScreen.tsx	2023-05-31 14:44:21 +05:30
Sampath	e267b5c1cc	screenreader content changed to announce the entire alert	2023-05-31 14:41:19 +05:30
Sampath	85bd63f1a4	arialabel added to the add property button	2023-05-31 13:04:48 +05:30
Sampath	ccd817e432	add property is readout twice while using screenreader	2023-05-30 22:01:36 +05:30
Sampath	34611bdbdf	capacity calculator link has been added with underline on focus	2023-05-23 16:48:02 +05:30
Sampath	15388fb03e	header text color changed to meet luminosity ratio requirement	2023-05-23 15:38:16 +05:30
Sampath	c8310021bc	outline has been restored to choose columns link in entities page	2023-05-22 18:05:39 +05:30
Sampath	93392c8795	heading role has been addedd and tag has been changed to h1	2023-05-22 17:04:36 +05:30
Sampath	f98cdf39d6	arialabel has been added to close button of invitational youtube video	2023-05-17 18:57:51 +05:30
MokireddySampath	ba66aa939b	Defect 2280249 (#1432 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Commit to my local branch * role has been added to graphic tag * Update TableEntity.tsx * Update ThroughputInput.tsx * Update ThroughputInput.test.tsx.snap * Update TreeComponent.tsx * Update TableEntity.tsx * Update AddCollectionPanel.tsx * Update AddCollectionPanel.tsx * Update AddCollectionPanel.tsx * Update AddCollectionPanel.tsx * Update AddCollectionPanel.tsx * Update SplashScreen.tsx * Update TreeComponent.test.tsx.snap * Update TreeComponent.test.tsx.snap	2023-05-09 23:42:04 +05:30
MokireddySampath	f9af595eee	2276949test (#1433 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Commit to my local branch * Autofocus removed * Update TableEntity.tsx * Update TableEntity.tsx * Update TableEntity.tsx * Update ThroughputInput.tsx * Update ThroughputInput.test.tsx.snap * Update TreeComponent.tsx * Update TreeComponent.test.tsx.snap * Update AddCollectionPanel.tsx * Update SplashScreen.tsx	2023-05-09 23:33:05 +05:30
MokireddySampath	7ce8c7a5a1	anchor link removed, since interactive elements cannot be nested (#1434 ) * anchor link removed, since interactive elements cannot be nested * Update Tabs.tsx	2023-05-09 23:32:36 +05:30
MokireddySampath	9ad3f589cc	aria required and asterisk has been added to indicate mandatory input for new vertex key input (#1435 )	2023-05-09 23:32:09 +05:30
MokireddySampath	9267b2cc18	role has been corrected to combobox for the dropdown (#1438 )	2023-05-09 23:29:56 +05:30
MokireddySampath	c7d1b2dcdb	Defect2280542 (#1441 ) * Changes made for the screenreader to readout the label and suffix associated with the input * Added an empty href to restore the chactristics of link in high contrast mode * Update SubSettingsComponent.tsx * Update SubSettingsComponent.tsx * Update SubSettingsComponent.tsx * Update SubSettingsComponent.tsx * Update SubSettingsComponent.test.tsx.snap * Update SubSettingsComponent.test.tsx.snap * Update SubSettingsComponent.test.tsx.snap	2023-05-09 23:29:25 +05:30
MokireddySampath	a526410e44	Defect 2280429 (#1416 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * refresh, expand, collapse tree does not have proper label for screenreader * wrong role is assigned to anchor link * descriptive alt added for iconspresent for DATA and NOTEBOOK accordion headers * Update CollapsedResourceTree.tsx * Update ResourceTreeContainer.tsx * Update ResourceTreeContainer.tsx * Update TableEntity.tsx * Update treeComponent.less * Update MiddlePaneComponent.tsx * Update PanelInfoErrorComponent.tsx	2023-04-25 21:04:29 +05:30
MokireddySampath	58cb85156c	Defect 2278539 (#1415 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * refresh, expand, collapse tree does not have proper label for screenreader * wrong role is assigned to anchor link * Update MiddlePaneComponent.tsx * Update treeComponent.less * Update CollapsedResourceTree.tsx * Update ResourceTreeContainer.tsx * Update TableEntity.tsx * Update ResourceTreeContainer.tsx	2023-04-25 21:04:12 +05:30
MokireddySampath	dd5ccade2b	Defect 2280418 (#1414 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * refresh, expand, collapse tree does not have proper label for screenreader * Update treeComponent.less * Update TableEntity.tsx * Update MiddlePaneComponent.tsx	2023-04-25 21:03:51 +05:30
MokireddySampath	38ebef6c02	Defect 2276941 (#1413 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * aria-label for table max RU/s input element is not defined properly * Update TableEntity.tsx * Update treeComponent.less * Update MiddlePaneComponent.tsx	2023-04-25 21:03:35 +05:30
MokireddySampath	7ad5862e8f	Defect 2280272 (#1412 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * Update treeComponent.less	2023-04-25 21:03:12 +05:30
sindhuba	755b732532	Remove Enable Azure synapse link for Cassandra (#1427 )	2023-04-10 10:18:57 -07:00
sindhuba	1b5a9b83ff	Remove Enable Azure Synapse link button for Tables API (#1425 )	2023-04-07 08:47:23 -07:00
Armando Trejo Oliver	fb8871cfbf	Load Legacy Mongo Shell V2 by default (#1424 ) - Load Legacy Mongo Shell V2 by default - Add/Keep feature flags to load from portal BE and V1 - Skip code coverage if skipCodeCoverage environment variable is set to "true"	2023-04-06 10:13:05 -07:00
Armando Trejo Oliver	874cec26fc	Fix CORS issue using Mongo Shell from new origin (#1422 ) * Fix CORS issue using Mongo Shell from new origin * Add unit tests for getMongoShellOrigin and getMongoShellUrl * Fix lint errors	2023-04-04 18:19:18 -07:00
Armando Trejo Oliver	9d2d0e4754	Add feature flags to test Legacy Mongo Shell (#1421 ) Add feature flags to test Legacy Mongo Shell	2023-04-04 10:28:42 -07:00
MokireddySampath	c7c894d6d9	Sampath accessibility sev 2 2 (#1404 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * color for placeholder changed to 767474, margin is set to accommodate height between treeheader elements * padding added for databaseheader, removed margin and restored padding to treenodeheader	2023-04-03 22:11:40 +05:30
Asier Isayas	547954c3dc	Lazy loading containers (#1411 ) Co-authored-by: Asier Isayas <aisayas@microsoft.com>	2023-03-30 14:53:36 -07:00
sindhuba	7f220bf8be	Add additional teaching bubbles in Quickstart (#1407 ) * Add additional teaching bubbles in Quickstart * Run npm format * Fix lint error * Add unit tests * Add Mongo teaching bubbles for Try CosmosDB and Launch full screen * Add additional tests for UrlUtility * Run npm format * Add tests for Notebook Utils	2023-03-27 15:33:55 -07:00
jawelton74	1ee6abf890	Change AAD endpoint from /common to /organizations. (#1408 )	2023-03-27 10:47:04 -07:00
MokireddySampath	72c3605dbe	Sampath accessibility sev 2 (#1400 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Remove extra white space --------- Co-authored-by: Victor Meng <vimeng@microsoft.com>	2023-03-14 23:49:21 +05:30
MokireddySampath	a7a38807df	Defect2236159 (#1396 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images	2023-02-28 09:11:52 +05:30
sindhuba	1285ffc440	Refresh collection automatically when container is created using Quickstart pop up (#1394 ) * Quickstart Refresh collection automatically when container is created * Fix unit tests * Fix unit tests and address comments * Minor fixes in message handler * Minor changes to fix tsconfig.strict.json * Resolve npm compile:strict errors by fixing the code implementation * Remove cache refresh code in configureHosted function * Fix spacing * Run npm format	2023-02-24 10:58:36 -08:00
jawelton74	b4bca3d41a	Updates user to use for nuget push. (#1393 )	2023-02-16 17:51:57 -08:00
jawelton74	2a47e4311c	Set overwrite to true for both blob uploads to storage. (#1392 )	2023-02-16 16:23:24 -08:00
bogercraig	49d9f489d8	Users/bogercraig/add cdb live show link (#1391 ) * Exchanged links on DE home page with link to the Azure Cosmos DB Live TV show. * Adding back accidentally removed terminating , * Added cdb TV to Postgres quick start splash page. * Removing cdb tv description from next steps and moved up. * Moved cdb tv to the tips and learn more column on postgres getting started page. * Shortening postgrest cdb tv line. * Removing link from PG since only 1 episode so far for PG. * Adding terminating comma back. Formatting. * Consolidating Cosmos DB Live TV to a single variable. * Updating prettier formatting.	2023-02-15 09:24:55 -05:00
sindhuba	31cc129aa7	Update address sample data for SQL and Mongo (#1389 )	2023-02-07 18:34:10 -08:00
MokireddySampath	99af4acca4	autoscale and manual radiobuutton fixes (#1387 )	2023-02-07 11:48:45 +05:30
victor-meng	80dd161a6f	Remove networking warning message for sql, gremlin, and tables api (#1388 )	2023-02-06 12:51:04 -08:00
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
victor-meng	5dde66b032	Add check and guidance for networking settings (#1348 )	2022-11-10 10:46:55 -08:00
jawelton74	5b1db2778c	Fix typo in 'tutorial' in Quick start. (#1346 )	2022-10-27 09:59:14 -07:00
Armando Trejo Oliver	1213788f9c	Remove share-link feature (#1345 ) * Remove share-link feature Cosmos DB supports sharing access to an account data using AAD/RBAC now so this feature is unnecessary. * Fix format issues * Fix unit tests * undo package changes	2022-10-20 10:58:37 -07:00
victor-meng	1ce3adff0f	Hide launch quick start button and postgres teaching bubbles if account is a replica (#1344 )	2022-10-19 17:12:41 -07:00
victor-meng	00eb07da11	Add retries when checking if account is allowed to access phoenix (#1342 )	2022-10-19 17:12:24 -07:00
victor-meng	afe59c1589	Postgres fixes (#1341 )	2022-10-11 16:03:58 -07:00
victor-meng	53b5ebd39c	Add firewall notification in quickstart tab (#1337 )	2022-10-10 19:30:52 -07:00
sunghyunkang1111	5b365e642f	show introductory video and password reset for first time try postgresql (#1338 ) (#1340 )	2022-10-10 18:53:54 -05:00
victor-meng	333b3de587	Add new message type for opening postgres networking blade (#1336 )	2022-10-06 14:25:10 -07:00
victor-meng	e909ac43f4	Integrate PSQL shell in quick start guide (#1333 )	2022-10-06 11:32:19 -07:00
vchske	8433a027ad	Text changes for API rebranding (#1330 ) * Text changes for API rebranding * Text changes and bug fixes for API rebranding * Format updates	2022-10-05 17:35:03 -07:00
victor-meng	81dfd76198	Implement connection string tab for postgres (#1334 )	2022-10-05 17:32:05 -07:00
sunghyunkang1111	7c77ffda6c	Add password reset callout (#1332 ) * Add password reset callout * Add create password text * Add password reset callout	2022-10-04 11:50:47 -04:00
jawelton74	a34d3bb000	Disable wild card index for Mongo 16MB documents (#1331 ) * Disable wild card index option if Mongo 16 MB document capability is present. * Formatted with prettier	2022-09-29 15:36:00 -07:00
victor-meng	42731d1aae	Quickstart UI changes (#1327 )	2022-09-27 14:03:28 -07:00
Armando Trejo Oliver	3abbb63adc	Add support for psql shell (#1324 ) Add support for psql shell - add new terminal type - handle missing documentEndpoint property	2022-09-22 15:39:35 -07:00
victor-meng	2e618cb3c4	Use my own ms account to upload nuget packages (#1325 )	2022-09-21 16:10:07 -07:00
victor-meng	beca0d6608	Properly load a postgres account in data explorer (#1323 )	2022-09-20 10:42:09 -07:00