Update QuickstartCarousel.tsx

video player "

.eslintignore

@@ -144,4 +144,5 @@ src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx
 src/Explorer/Notebook/temp/inputs/connected-editors/codemirror.tsx
 src/Explorer/Tree/ResourceTreeAdapter.tsx
 __mocks__/monaco-editor.ts
-src/Explorer/Tree/ResourceTree.tsx
+src/Explorer/Tree/ResourceTree.tsx
+src/Utils/PriorityBasedExecutionUtils.ts

.github/workflows/ci.yml

@@ -85,6 +85,8 @@ jobs:
           path: .cache
           key: ${{ runner.os }}-build-cache
       - run: npm run pack:prod
+        env:
+          NODE_OPTIONS: '--max-old-space-size=4096'
       - run: cp -r ./Contracts ./dist/contracts
       - run: cp -r ./configs ./dist/configs
       - uses: actions/upload-artifact@v2
@@ -92,11 +94,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 +184,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 +209,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

.vscode/settings.json

@@ -23,5 +23,6 @@
     "source.fixAll.eslint": true,
     "source.organizeImports": true
   },
-  "typescript.preferences.importModuleSpecifier": "non-relative"
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

SECURITY.md

@@ -0,0 +1,41 @@
+<!-- BEGIN MICROSOFT SECURITY.MD V0.0.7 BLOCK -->
+
+## Security
+
+Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
+
+If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://aka.ms/opensource/security/definition), please report it to us as described below.
+
+## Reporting Security Issues
+
+**Please do not report security vulnerabilities through public GitHub issues.**
+
+Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://aka.ms/opensource/security/create-report).
+
+If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com).  If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://aka.ms/opensource/security/pgpkey).
+
+You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://aka.ms/opensource/security/msrc). 
+
+Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
+
+  * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
+  * Full paths of source file(s) related to the manifestation of the issue
+  * The location of the affected source code (tag/branch/commit or direct URL)
+  * Any special configuration required to reproduce the issue
+  * Step-by-step instructions to reproduce the issue
+  * Proof-of-concept or exploit code (if possible)
+  * Impact of the issue, including how an attacker might exploit the issue
+
+This information will help us triage your report more quickly.
+
+If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://aka.ms/opensource/security/bounty) page for more details about our active programs.
+
+## Preferred Languages
+
+We prefer all communications to be in English.
+
+## Policy
+
+Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://aka.ms/opensource/security/cvd).
+
+<!-- END MICROSOFT SECURITY.MD BLOCK -->

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>
+	<header>
-	<div class="tsd-page-toolbar">
+		<div class="tsd-page-toolbar">
-		<div class="container">
+			<div class="container">
-			<div class="table-wrap">
+				<div class="table-wrap">
-				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
-					<div class="field">
+						<div class="field">
-						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+							<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
-						<input id="tsd-search-field" type="text" />
+							<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>
+						<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="tsd-page-title">
+			<div class="container">
-		<div class="container">
+				<ul class="tsd-breadcrumb">
-			<ul class="tsd-breadcrumb">
+					<li>
-				<li>
+						<a href="../modules.html">cosmos-explorer</a>
-					<a href="../modules.html">cosmos-explorer</a>
+					</li>
-				</li>
+					<li>
-				<li>
+						<a href="../modules/selfserve_selfserveutils.html">SelfServe/SelfServeUtils</a>
-					<a href="../modules/selfserve_selfserveutils.html">SelfServe/SelfServeUtils</a>
+					</li>
-				</li>
+					<li>
-				<li>
+						<a href="selfserve_selfserveutils.bladetype.html">BladeType</a>
-					<a href="selfserve_selfserveutils.bladetype.html">BladeType</a>
+					</li>
-				</li>
+				</ul>
-			</ul>
+				<h1>Enumeration BladeType</h1>
-			<h1>Enumeration BladeType</h1>
+			</div>
 		</div>
-	</div>
+	</header>
-</header>
+	<div class="container container-main">
-<div class="container container-main">
+		<div class="row">
-	<div class="row">
+			<div class="col-8 col-content">
-		<div class="col-8 col-content">
+				<section class="tsd-panel tsd-comment">
-			<section class="tsd-panel tsd-comment">
+					<div class="tsd-comment tsd-typography">
-				<div class="tsd-comment tsd-typography">
+						<div class="lead">
-					<div class="lead">
+							<p>Portal Blade types</p>
-						<p>Portal Blade types</p>
+						</div>
 					</div>
-				</div>
+				</section>
-			</section>
+				<section class="tsd-panel-group tsd-index-group">
-			<section class="tsd-panel-group tsd-index-group">
+					<h2>Index</h2>
-				<h2>Index</h2>
+					<section class="tsd-panel tsd-index-panel">
-				<section class="tsd-panel tsd-index-panel">
+						<div class="tsd-index-content">
-					<div class="tsd-index-content">
+							<section class="tsd-index-section ">
-						<section class="tsd-index-section ">
+								<h3>Enumeration members</h3>
-							<h3>Enumeration members</h3>
+								<ul class="tsd-index-list">
-							<ul class="tsd-index-list">
+									<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a
-								<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>
+											href="selfserve_selfserveutils.bladetype.html#cassandrakeys"
-								<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>
+											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#metrics" class="tsd-kind-icon">Metrics</a></li>
+									<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a
-								<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>
+											href="selfserve_selfserveutils.bladetype.html#gremlinkeys"
-								<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>
+											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#tablekeys" class="tsd-kind-icon">Table<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>
+						</li>
-					</div>
+					</ul>
-				</section>
+					<ul class="after-current">
-			</section>
+						<li class=" tsd-kind-enum tsd-parent-kind-module">
-			<section class="tsd-panel-group tsd-member-group ">
+							<a href="selfserve_selfserveutils.selfservetype.html"
-				<h2>Enumeration members</h2>
+								class="tsd-kind-icon">Self<wbr>Serve<wbr>Type</a>
-				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+						</li>
-					<a name="cassandrakeys" class="tsd-anchor"></a>
+						<li class=" tsd-kind-function tsd-parent-kind-module">
-					<h3>Cassandra<wbr>Keys</h3>
+							<a href="../modules/selfserve_selfserveutils.html#generatebladelink"
-					<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>
+								class="tsd-kind-icon">generate<wbr>Blade<wbr>Link</a>
-					<aside class="tsd-sources">
+						</li>
-					</aside>
+					</ul>
-					<div class="tsd-comment tsd-typography">
+				</nav>
-						<div class="lead">
+			</div>
-							<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>
 		</div>
 	</div>
-</div>
+	<footer class="with-border-bottom">
-<footer class="with-border-bottom">
+		<div class="container">
-	<div class="container">
+			<h2>Legend</h2>
-		<h2>Legend</h2>
+			<div class="tsd-legend-group">
-		<div class="tsd-legend-group">
+				<ul class="tsd-legend">
-			<ul class="tsd-legend">
+					<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
-				<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>
-				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+				</ul>
-			</ul>
+				<ul class="tsd-legend">
-			<ul class="tsd-legend">
+					<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
-				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+				</ul>
-			</ul>
+				<ul class="tsd-legend">
-			<ul class="tsd-legend">
+					<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
-				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				</ul>
-			</ul>
+				<ul class="tsd-legend">
-			<ul class="tsd-legend">
+					<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
-				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+				</ul>
-			</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="overlay"></div>
-<div class="container tsd-generator">
+	<script src="../assets/js/main.js"></script>
-	<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>
 </body>
+
 </html>

images/ComplexPrompts.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.4852 1.13266C6.25055 1.69386 5.20039 2.5918 5.20039 3.8002V7.41652C5.39862 7.40568 5.59878 7.4002 5.80039 7.4002C6.00246 7.4002 6.20261 7.40569 6.40039 7.41649V5.83795C6.72565 6.08075 7.09627 6.29095 7.4852 6.46774C8.77401 7.05356 10.5123 7.4002 12.4004 7.4002C14.2885 7.4002 16.0268 7.05356 17.3156 6.46774C17.7045 6.29095 18.0752 6.08075 18.4004 5.83795V15.8002C18.4004 16.2486 17.9731 16.8507 16.819 17.3753C15.7191 17.8752 14.1574 18.2002 12.4005 18.2002L12.4004 18.7995C12.4004 19.0077 12.379 19.208 12.3392 19.4001L12.4004 19.4002C14.2885 19.4002 16.0268 19.0535 17.3156 18.4677C18.5503 17.9066 19.6004 17.0086 19.6004 15.8002V3.8002C19.6004 2.5918 18.5503 1.69386 17.3156 1.13266C16.0268 0.546827 14.2885 0.200195 12.4004 0.200195C10.5123 0.200195 8.77401 0.546827 7.4852 1.13266ZM7.98176 5.37529C6.82769 4.85071 6.40039 4.24866 6.40039 3.8002C6.40039 3.35173 6.82769 2.74968 7.98176 2.2251C9.08168 1.72513 10.6434 1.4002 12.4004 1.4002C14.1574 1.4002 15.7191 1.72513 16.819 2.2251C17.9731 2.74968 18.4004 3.35173 18.4004 3.8002C18.4004 4.24866 17.9731 4.85071 16.819 5.37529C15.7191 5.87526 14.1574 6.2002 12.4004 6.2002C10.6434 6.2002 9.08168 5.87526 7.98176 5.37529ZM6.40039 8.61851C6.76422 8.64085 7.11714 8.68327 7.4555 8.74374C7.93669 8.82972 8.38843 8.95219 8.80015 9.10529C10.2475 9.64345 11.2004 10.56 11.2004 11.6002C11.2004 13.257 8.78273 14.6002 5.80039 14.6002C2.81805 14.6002 0.400391 13.257 0.400391 11.6002C0.400391 10.056 2.50043 8.78432 5.20039 8.61851C5.39739 8.60641 5.59759 8.6002 5.80039 8.6002C6.00319 8.6002 6.20339 8.60641 6.40039 8.61851ZM11.1112 19.3454C10.6494 20.7416 8.44723 21.7995 5.80039 21.7995C2.81805 21.7995 0.400391 20.4564 0.400391 18.7995V14.0648C0.706223 14.3399 1.04834 14.5755 1.39925 14.7705C2.58615 15.4299 4.14455 15.8002 5.80039 15.8002C7.45623 15.8002 9.01463 15.4299 10.2015 14.7705C10.553 14.5752 10.8957 14.3391 11.202 14.0633C11.2015 15.2351 11.2008 16.9706 11.2005 18.1486V18.1508C11.2004 18.3942 11.2004 18.6137 11.2004 18.7995C11.2004 18.986 11.1698 19.1684 11.1112 19.3454Z" fill="#0078D4"/>
+</svg>

images/Copilot.svg

@@ -0,0 +1,35 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" fill="white"/>
+<path d="M17 3.73926L20 4.04436V12.6862L15.2 13.8013L13.6 15.9967V19.4479C13.6 21.7669 14.8545 23.9045 16.879 25.0353L21.4036 27.5626L13.6 31.69L10.3559 32.1523L7.27902 30.4337C5.25445 29.3028 4 27.1652 4 24.8462V14.7591C4 12.4395 5.25512 10.3015 7.28055 9.17085L16.3174 4.12639L16.3121 4.13012L17 3.73926Z" fill="url(#paint0_radial_420_101763)"/>
+<path d="M17 3.73926L20 4.04436V12.6862L15.2 13.8013L13.6 15.9967V19.4479C13.6 21.7669 14.8545 23.9045 16.879 25.0353L21.4036 27.5626L13.6 31.69L10.3559 32.1523L7.27902 30.4337C5.25445 29.3028 4 27.1652 4 24.8462V14.7591C4 12.4395 5.25512 10.3015 7.28055 9.17085L16.3174 4.12639L16.3121 4.13012L17 3.73926Z" fill="url(#paint1_linear_420_101763)"/>
+<path d="M26.399 15.001L34.399 19.801L35.999 21.401V24.8452C35.999 27.1642 34.7446 29.3018 32.72 30.4327L23.12 35.7949C21.1804 36.8784 18.8177 36.8784 16.878 35.7949L7.27804 30.4327C7.09146 30.3284 6.91141 30.2157 6.73828 30.095L7.278 30.3965C9.21762 31.4799 11.5803 31.4799 13.52 30.3965L23.12 25.0342C25.1445 23.9033 26.399 21.7657 26.399 19.4467V15.001Z" fill="url(#paint2_radial_420_101763)"/>
+<path d="M26.399 15.001L34.399 19.801L35.999 21.401V24.8452C35.999 27.1642 34.7446 29.3018 32.72 30.4327L23.12 35.7949C21.1804 36.8784 18.8177 36.8784 16.878 35.7949L7.27804 30.4327C7.09146 30.3284 6.91141 30.2157 6.73828 30.095L7.278 30.3965C9.21762 31.4799 11.5803 31.4799 13.52 30.3965L23.12 25.0342C25.1445 23.9033 26.399 21.7657 26.399 19.4467V15.001Z" fill="url(#paint3_linear_420_101763)"/>
+<path d="M32.7191 9.17053L23.119 3.8117C21.1802 2.72943 18.819 2.72943 16.8802 3.8117L16.3151 4.1271C14.6239 5.31737 13.5996 7.26472 13.5996 9.36025V16.0461L16.8802 14.2149C18.819 13.1326 21.1802 13.1326 23.119 14.2149L32.7191 19.5737C34.6984 20.6786 35.9421 22.7456 35.9977 25.0039C35.999 24.9514 35.9996 24.8987 35.9996 24.8459V14.7588C35.9996 12.4392 34.7445 10.3011 32.7191 9.17053Z" fill="url(#paint4_radial_420_101763)"/>
+<path d="M32.7191 9.17053L23.119 3.8117C21.1802 2.72943 18.819 2.72943 16.8802 3.8117L16.3151 4.1271C14.6239 5.31737 13.5996 7.26472 13.5996 9.36025V16.0461L16.8802 14.2149C18.819 13.1326 21.1802 13.1326 23.119 14.2149L32.7191 19.5737C34.6984 20.6786 35.9421 22.7456 35.9977 25.0039C35.999 24.9514 35.9996 24.8987 35.9996 24.8459V14.7588C35.9996 12.4392 34.7445 10.3011 32.7191 9.17053Z" fill="url(#paint5_linear_420_101763)"/>
+<defs>
+<radialGradient id="paint0_radial_420_101763" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.5054 12.8837) rotate(112.544) scale(23.4519 19.3067)">
+<stop offset="0.206732" stop-color="#45D586"/>
+<stop offset="0.875628" stop-color="#128245"/>
+</radialGradient>
+<linearGradient id="paint1_linear_420_101763" x1="15.0625" y1="29.6174" x2="13.787" y2="27.2436" gradientUnits="userSpaceOnUse">
+<stop offset="0.9999" stop-color="#0F773F"/>
+<stop offset="1" stop-color="#0078D4" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint2_radial_420_101763" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(10.899 27.5214) rotate(-3.9995) scale(24.6197 15.4594)">
+<stop offset="0.140029" stop-color="#FBFF47"/>
+<stop offset="0.952721" stop-color="#54B228"/>
+</radialGradient>
+<linearGradient id="paint3_linear_420_101763" x1="30.8932" y1="18.5508" x2="29.5491" y2="20.8921" gradientUnits="userSpaceOnUse">
+<stop offset="0.9999" stop-color="#27770B"/>
+<stop offset="1" stop-color="#8C66BA" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint4_radial_420_101763" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(30.632 19.3878) rotate(-138.33) scale(22.8015 13.0047)">
+<stop stop-color="#95FEA0"/>
+<stop offset="0.839255" stop-color="#10B7B7"/>
+</radialGradient>
+<linearGradient id="paint5_linear_420_101763" x1="13.5996" y1="11.7134" x2="16.2131" y2="11.7134" gradientUnits="userSpaceOnUse">
+<stop offset="0.9999" stop-color="#0A7B7B"/>
+<stop offset="1" stop-color="#436DCD" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

images/CopilotCopy.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 0C5.89543 0 5 0.895431 5 2V12C5 13.1046 5.89543 14 7 14H13C14.1046 14 15 13.1046 15 12V2C15 0.89543 14.1046 0 13 0H7ZM6 2C6 1.44772 6.44772 1 7 1H13C13.5523 1 14 1.44772 14 2V12C14 12.5523 13.5523 13 13 13H7C6.44772 13 6 12.5523 6 12V2ZM3 4.00001C3 3.25973 3.4022 2.61339 4 2.26758V12.5C4 13.8807 5.11929 15 6.5 15H12.7324C12.3866 15.5978 11.7403 16 11 16H6.5C4.567 16 3 14.433 3 12.5V4.00001Z" fill="#242424"/>
+</svg>

images/CopilotDatabase.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 2.5C10 3.88071 7.76142 5 5 5C2.23858 5 0 3.88071 0 2.5C0 1.11929 2.23858 0 5 0C7.76142 0 10 1.11929 10 2.5ZM0 11.5V4.487C1.057 5.413 2.864 6 5 6C7.136 6 8.943 5.413 10 4.487V11.5C10 12.925 7.851 14 5 14C2.149 14 0 12.925 0 11.5Z" fill="#0078D4"/>
+</svg>

images/CopilotExplain.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.25028 7.30723C9.08872 7.49072 9.00001 7.74463 9.00001 8C9.00001 8.27614 8.77615 8.5 8.50001 8.5C8.22387 8.5 8.00001 8.27614 8.00001 8C8.00001 7.52689 8.1613 7.0308 8.49974 6.64641C8.84684 6.25219 9.3597 6 10 6C10.6403 6 11.1532 6.25219 11.5003 6.64641C11.8387 7.0308 12 7.52689 12 8C12 8.48947 11.8839 8.86964 11.6976 9.18921C11.5347 9.46855 11.3225 9.68963 11.1528 9.86652L11.1115 9.90956C10.9247 10.1051 10.7821 10.2639 10.6773 10.4641C10.5773 10.6551 10.5 10.9085 10.5 11.2929C10.5 11.5691 10.2762 11.7929 10 11.7929C9.72387 11.7929 9.50001 11.5691 9.50001 11.2929C9.50001 10.7611 9.61018 10.3464 9.79143 10.0002C9.96788 9.66319 10.2003 9.41576 10.3885 9.21878L10.4106 9.19559C10.5985 8.99908 10.7328 8.85858 10.8337 8.68547C10.9286 8.52273 11 8.31707 11 8C11 7.74463 10.9113 7.49072 10.7497 7.30723C10.5968 7.13358 10.3597 7 10 7C9.64033 7 9.40318 7.13358 9.25028 7.30723ZM9.99991 14.2122C10.3863 14.2122 10.6995 13.899 10.6995 13.5126C10.6995 13.1262 10.3863 12.813 9.99991 12.813C9.61353 12.813 9.3003 13.1262 9.3003 13.5126C9.3003 13.899 9.61353 14.2122 9.99991 14.2122ZM2.00001 10C2.00001 5.58172 5.58173 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C8.65078 18 7.37829 17.6656 6.26225 17.0748L2.62128 17.9851C2.45089 18.0277 2.27065 17.9777 2.14646 17.8536C2.02227 17.7294 1.97234 17.5491 2.01494 17.3787L2.92518 13.7378C2.33442 12.6217 2.00001 11.3492 2.00001 10ZM10 3C6.13402 3 3.00001 6.13401 3.00001 10C3.00001 11.245 3.32462 12.4128 3.89345 13.4247C3.95602 13.536 3.97363 13.6671 3.94266 13.791L3.18719 16.8128L6.20904 16.0574C6.33294 16.0264 6.46399 16.044 6.57531 16.1066C7.58726 16.6754 8.75497 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3Z" fill="#424242"/>
+</svg>

images/CopilotFlash.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.21207 0C3.73772 0 3.32085 0.314446 3.19054 0.770537L0.940937 8.64415C0.747029 9.32283 1.25663 9.99841 1.96246 9.99841H3.22974L2.06002 14.6773C1.79611 15.7329 3.10089 16.4551 3.85526 15.6726L12.5318 6.81506L12.5354 6.81137C13.1762 6.1436 12.7152 5 11.7688 5H9.20509L10.4665 1.40582L10.469 1.39836C10.6983 0.710426 10.1863 0 9.46114 0H4.21207Z" fill="#0078D4"/>
+</svg>

images/CopilotInsert.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 4C4.89543 4 4 4.89543 4 6V7C4 8.10457 4.89543 9 6 9H14C15.1046 9 16 8.10457 16 7V6C16 4.89543 15.1046 4 14 4H6ZM5 6C5 5.44772 5.44772 5 6 5H14C14.5523 5 15 5.44772 15 6V7C15 7.55228 14.5523 8 14 8H6C5.44772 8 5 7.55228 5 7V6ZM6 11C4.89543 11 4 11.8954 4 13V14C4 15.1046 4.89543 16 6 16H14C15.1046 16 16 15.1046 16 14V13C16 11.8954 15.1046 11 14 11H6ZM5 13C5 12.4477 5.44772 12 6 12H14C14.5523 12 15 12.4477 15 13V14C15 14.5523 14.5523 15 14 15H6C5.44772 15 5 14.5523 5 14V13Z" fill="#242424"/>
+</svg>

images/CopilotLikeHover.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4829 0.703737C9.68406 -0.133389 8.39129 0.316883 8.05198 1.29418C7.77205 2.10043 7.4084 3.06594 7.05406 3.77684C5.99442 5.90276 5.37583 7.11234 3.66974 8.62586C3.44337 8.82668 3.15163 8.9885 2.82905 9.11601C1.69991 9.56233 0.638089 10.7321 0.915812 12.1207L1.26885 13.8859C1.45455 14.8144 2.14894 15.5583 3.06251 15.8075L8.66224 17.3347C11.2078 18.0289 13.8017 16.3942 14.2737 13.7983L14.9576 10.0365C15.2924 8.19503 13.8777 6.49989 12.006 6.49989H11.1225L11.1328 6.44766C11.2129 6.03948 11.3093 5.47735 11.3738 4.86473C11.438 4.25446 11.4721 3.58034 11.4218 2.9522C11.3725 2.33584 11.2379 1.70305 10.9176 1.22254C10.8081 1.05832 10.6455 0.874161 10.4829 0.703737Z" fill="#605E5C"/>
+</svg>

images/CopilotLikePressed.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4829 0.703737C9.68406 -0.133389 8.39129 0.316883 8.05198 1.29418C7.77205 2.10043 7.4084 3.06594 7.05406 3.77684C5.99442 5.90276 5.37583 7.11234 3.66974 8.62586C3.44337 8.82668 3.15163 8.9885 2.82905 9.11601C1.69991 9.56233 0.638089 10.7321 0.915812 12.1207L1.26885 13.8859C1.45455 14.8144 2.14894 15.5583 3.06251 15.8075L8.66224 17.3347C11.2078 18.0289 13.8017 16.3942 14.2737 13.7983L14.9576 10.0365C15.2924 8.19503 13.8777 6.49989 12.006 6.49989H11.1225L11.1328 6.44766C11.2129 6.03948 11.3093 5.47735 11.3738 4.86473C11.438 4.25446 11.4721 3.58034 11.4218 2.9522C11.3725 2.33584 11.2379 1.70305 10.9176 1.22254C10.8081 1.05832 10.6455 0.874161 10.4829 0.703737Z" fill="#0078D4"/>
+</svg>

images/CopilotLikeRest.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.55198 1.29418C7.89129 0.316883 9.18406 -0.133389 9.98289 0.703737C10.1455 0.874162 10.3081 1.05832 10.4176 1.22254C10.7379 1.70305 10.8725 2.33584 10.9218 2.9522C10.9721 3.58034 10.938 4.25446 10.8738 4.86473C10.8093 5.47735 10.7129 6.03948 10.6328 6.44766C10.6294 6.46535 10.6259 6.48277 10.6225 6.49989H11.506C13.3777 6.49989 14.7924 8.19503 14.4576 10.0365L13.7737 13.7983C13.3017 16.3942 10.7078 18.0289 8.16224 17.3347L2.56251 15.8075C1.64894 15.5583 0.954555 14.8144 0.768846 13.8859L0.415812 12.1207C0.138089 10.7321 1.19991 9.56233 2.32905 9.11601C2.65163 8.9885 2.94337 8.82668 3.16974 8.62586C4.87583 7.11234 5.49442 5.90276 6.55406 3.77684C6.9084 3.06594 7.27205 2.10043 7.55198 1.29418ZM9.51651 6.87851L9.51689 6.87696L9.51869 6.86962L9.5262 6.83852C9.53284 6.81068 9.54264 6.76892 9.55487 6.71482C9.57935 6.60658 9.61349 6.44919 9.65152 6.25525C9.72773 5.86655 9.81878 5.33493 9.8793 4.76005C9.94006 4.18282 9.96852 3.57569 9.92502 3.03195C9.88058 2.47644 9.76518 2.04673 9.58552 1.77724C9.52643 1.68859 9.41385 1.55593 9.25942 1.3941C9.06051 1.18565 8.63137 1.23417 8.49666 1.62217C8.21411 2.43598 7.83339 3.45183 7.44904 4.22294C6.38216 6.36338 5.69326 7.72396 3.83336 9.37392C3.49304 9.67583 3.08878 9.89099 2.69665 10.046C1.81631 10.394 1.25035 11.1944 1.39639 11.9246L1.74943 13.6898C1.86085 14.2469 2.27748 14.6932 2.82562 14.8427L8.42536 16.3699C10.4052 16.9099 12.4227 15.6384 12.7898 13.6194L13.4738 9.85766C13.697 8.62998 12.7538 7.49989 11.506 7.49989H10.0015C9.84758 7.49989 9.7022 7.42895 9.60745 7.3076C9.51272 7.18627 9.47921 7.02785 9.51651 6.87851C9.51651 6.87847 9.5165 6.87855 9.51651 6.87851Z" fill="#424242"/>
+</svg>

images/CopilotOptimize.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 2.5C5 2.22386 4.77614 2 4.5 2C4.22386 2 4 2.22386 4 2.5V4H2.5C2.22386 4 2 4.22386 2 4.5C2 4.77614 2.22386 5 2.5 5H4.5C4.77614 5 5 4.77614 5 4.5V2.5ZM16 2.5C16 2.22386 15.7761 2 15.5 2C15.2239 2 15 2.22386 15 2.5V4.5C15 4.77614 15.2239 5 15.5 5H17.5C17.7761 5 18 4.77614 18 4.5C18 4.22386 17.7761 4 17.5 4H16V2.5ZM7 5C6.44771 5 6 5.44772 6 6V14C6 14.5523 6.44772 15 7 15H13C13.5523 15 14 14.5523 14 14V6C14 5.44772 13.5523 5 13 5H7ZM7 6H13V14H7V6ZM4.5 18C4.77614 18 5 17.7761 5 17.5V15.5C5 15.2239 4.77614 15 4.5 15H2.5C2.22386 15 2 15.2239 2 15.5C2 15.7761 2.22386 16 2.5 16H4V17.5C4 17.7761 4.22386 18 4.5 18ZM15.5 18C15.7761 18 16 17.7761 16 17.5V16H17.5C17.7761 16 18 15.7761 18 15.5C18 15.2239 17.7761 15 17.5 15H15.5C15.2239 15 15 15.2239 15 15.5V17.5C15 17.7761 15.2239 18 15.5 18ZM8.5 8C8.22386 8 8 8.22386 8 8.5C8 8.77614 8.22386 9 8.5 9H11.5C11.7761 9 12 8.77614 12 8.5C12 8.22386 11.7761 8 11.5 8H8.5ZM8.5 10C8.22386 10 8 10.2239 8 10.5C8 10.7761 8.22386 11 8.5 11H10.5C10.7761 11 11 10.7761 11 10.5C11 10.2239 10.7761 10 10.5 10H8.5Z" fill="#424242"/>
+</svg>

images/CopilotRegenerate.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.14645 2.64645C9.34171 2.45118 9.65829 2.45118 9.85355 2.64645L11.3536 4.14645C11.5488 4.34171 11.5488 4.65829 11.3536 4.85355L9.85355 6.35355C9.65829 6.54882 9.34171 6.54882 9.14645 6.35355C8.95118 6.15829 8.95118 5.84171 9.14645 5.64645L9.7885 5.00439C7.12517 5.11522 5 7.30943 5 10C5 11.568 5.72118 12.9672 6.85185 13.8847C7.06627 14.0587 7.09904 14.3736 6.92503 14.588C6.75103 14.8024 6.43615 14.8352 6.22172 14.6612C4.86712 13.5619 4 11.882 4 10C4 6.75447 6.57689 4.1108 9.79629 4.00339L9.14645 3.35355C8.95118 3.15829 8.95118 2.84171 9.14645 2.64645ZM13.075 5.41199C13.249 5.19756 13.5639 5.1648 13.7783 5.3388C15.1329 6.43806 16 8.11795 16 10C16 13.2455 13.4231 15.8892 10.2037 15.9966L10.8536 16.6464C11.0488 16.8417 11.0488 17.1583 10.8536 17.3536C10.6583 17.5488 10.3417 17.5488 10.1464 17.3536L8.64645 15.8536C8.55268 15.7598 8.5 15.6326 8.5 15.5C8.5 15.3674 8.55268 15.2402 8.64645 15.1464L10.1464 13.6464C10.3417 13.4512 10.6583 13.4512 10.8536 13.6464C11.0488 13.8417 11.0488 14.1583 10.8536 14.3536L10.2115 14.9956C12.8748 14.8848 15 12.6906 15 10C15 8.43201 14.2788 7.03283 13.1482 6.1153C12.9337 5.94129 12.901 5.62641 13.075 5.41199Z" fill="#242424"/>
+</svg>

images/CopilotSidebarLogo.svg

@@ -0,0 +1,34 @@
+<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.79997 1.36139L9.59997 1.54445V6.72957L6.71997 7.39864L5.75998 8.71588V10.7866C5.75998 12.178 6.51265 13.4605 7.72739 14.139L10.4421 15.6554L5.75997 18.1318L3.81352 18.4092L1.96738 17.378C0.75264 16.6995 -3.05176e-05 15.417 -3.05176e-05 14.0256V7.97332C-3.05176e-05 6.58155 0.753043 5.29871 1.9683 4.62034L7.3904 1.59367L7.38722 1.59591L7.79997 1.36139Z" fill="url(#paint0_radial_1157_162756)"/>
+<path d="M7.79997 1.36139L9.59997 1.54445V6.72957L6.71997 7.39864L5.75998 8.71588V10.7866C5.75998 12.178 6.51265 13.4605 7.72739 14.139L10.4421 15.6554L5.75997 18.1318L3.81352 18.4092L1.96738 17.378C0.75264 16.6995 -3.05176e-05 15.417 -3.05176e-05 14.0256V7.97332C-3.05176e-05 6.58155 0.753043 5.29871 1.9683 4.62034L7.3904 1.59367L7.38722 1.59591L7.79997 1.36139Z" fill="url(#paint1_linear_1157_162756)"/>
+<path d="M13.4397 8.11841L18.2397 10.9984L19.1997 11.9584V14.025C19.1997 15.4164 18.447 16.6989 17.2323 17.3774L11.4723 20.5948C10.3085 21.2448 8.89088 21.2448 7.72711 20.5948L1.96711 17.3774C1.85515 17.3149 1.74713 17.2472 1.64325 17.1748L1.96708 17.3557C3.13085 18.0057 4.54849 18.0057 5.71226 17.3557L11.4723 14.1383C12.687 13.4598 13.4397 12.1773 13.4397 10.7859V8.11841Z" fill="url(#paint2_radial_1157_162756)"/>
+<path d="M13.4397 8.11841L18.2397 10.9984L19.1997 11.9584V14.025C19.1997 15.4164 18.447 16.6989 17.2323 17.3774L11.4723 20.5948C10.3085 21.2448 8.89088 21.2448 7.72711 20.5948L1.96711 17.3774C1.85515 17.3149 1.74713 17.2472 1.64325 17.1748L1.96708 17.3557C3.13085 18.0057 4.54849 18.0057 5.71226 17.3557L11.4723 14.1383C12.687 13.4598 13.4397 12.1773 13.4397 10.7859V8.11841Z" fill="url(#paint3_linear_1157_162756)"/>
+<path d="M17.2316 4.62014L11.4716 1.40484C10.3083 0.755475 8.89151 0.755475 7.72821 1.40484L7.38921 1.59407C6.37448 2.30824 5.75989 3.47665 5.75989 4.73397V8.74548L7.72821 7.64674C8.89151 6.99738 10.3083 6.99738 11.4716 7.64674L17.2316 10.862C18.4192 11.525 19.1654 12.7652 19.1987 14.1202C19.1995 14.0886 19.1999 14.057 19.1999 14.0254V7.97311C19.1999 6.58134 18.4468 5.29851 17.2316 4.62014Z" fill="url(#paint4_radial_1157_162756)"/>
+<path d="M17.2316 4.62014L11.4716 1.40484C10.3083 0.755475 8.89151 0.755475 7.72821 1.40484L7.38921 1.59407C6.37448 2.30824 5.75989 3.47665 5.75989 4.73397V8.74548L7.72821 7.64674C8.89151 6.99738 10.3083 6.99738 11.4716 7.64674L17.2316 10.862C18.4192 11.525 19.1654 12.7652 19.1987 14.1202C19.1995 14.0886 19.1999 14.057 19.1999 14.0254V7.97311C19.1999 6.58134 18.4468 5.29851 17.2316 4.62014Z" fill="url(#paint5_linear_1157_162756)"/>
+<defs>
+<radialGradient id="paint0_radial_1157_162756" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8.1032 6.84805) rotate(112.544) scale(14.0711 11.584)">
+<stop offset="0.206732" stop-color="#4995D0"/>
+<stop offset="0.875628" stop-color="#0078D4"/>
+</radialGradient>
+<linearGradient id="paint1_linear_1157_162756" x1="6.63744" y1="16.8883" x2="5.87214" y2="15.464" gradientUnits="userSpaceOnUse">
+<stop offset="0.9999" stop-color="#0078D4"/>
+<stop offset="1" stop-color="#0078D4" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint2_radial_1157_162756" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4.13968 15.6306) rotate(-3.9995) scale(14.7718 9.27561)">
+<stop offset="0.140029" stop-color="#80C8FF"/>
+<stop offset="0.952721" stop-color="#0078D4"/>
+</radialGradient>
+<linearGradient id="paint3_linear_1157_162756" x1="16.1362" y1="10.2483" x2="15.3298" y2="11.6531" gradientUnits="userSpaceOnUse">
+<stop offset="0.9999" stop-color="#3F8AC3"/>
+<stop offset="1" stop-color="#8C66BA" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint4_radial_1157_162756" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.9793 10.7505) rotate(-138.33) scale(13.6809 7.80282)">
+<stop stop-color="#7BC6FF"/>
+<stop offset="0.839255" stop-color="#0078D4"/>
+</radialGradient>
+<linearGradient id="paint5_linear_1157_162756" x1="5.75989" y1="6.14584" x2="7.32799" y2="6.14584" gradientUnits="userSpaceOnUse">
+<stop offset="0.9999" stop-color="#0078D4"/>
+<stop offset="1" stop-color="#436DCD" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

images/CopilotSidebarWelcomeIllustration.svg

@@ -0,0 +1,29 @@
+<svg width="121" height="94" viewBox="0 0 121 94" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.3" d="M3.25029 80.7474H97.1699C97.8805 80.7474 98.5648 80.471 99.078 79.9578C99.5913 79.4446 99.8676 78.7603 99.8676 78.0497V13.8575C99.8676 12.3704 98.3148 11.0018 96.2224 11.0018L4.53992 12.3968C4.18461 12.3968 3.84247 12.4626 3.51348 12.5942C3.18449 12.7389 2.89498 12.9231 2.64495 13.1863C2.39492 13.4364 2.19752 13.7259 2.05277 14.0549C1.90801 14.3838 1.85538 14.7392 1.85538 15.0813L0.552582 78.076C0.552582 78.7866 0.82893 79.4709 1.34215 79.971C1.85537 80.471 2.53967 80.7474 3.25029 80.7474Z" fill="#1F1D20"/>
+<path d="M96.9332 9.80411H2.67139C1.19752 9.80411 0 11.0016 0 12.4755V76.7993C0 78.2732 1.19752 79.4707 2.67139 79.4707H96.9463C98.4202 79.4707 99.6177 78.2732 99.6177 76.7993V12.4755C99.6045 11.0016 98.407 9.80411 96.9332 9.80411Z" fill="url(#paint0_linear_1157_163007)"/>
+<path d="M95.6963 13.7121H50.1379V74.904H95.6963V13.7121Z" fill="white"/>
+<path d="M50.7829 13.7121H5.22461V74.904H50.7829V13.7121Z" fill="#CDCDD0"/>
+<path d="M14.3309 0V60.6918C14.3309 60.6918 26.4903 59.4811 36.3468 64.4291C46.2165 69.3771 50.7829 74.8514 50.7829 74.8514V14.1465C50.7829 14.1465 45.0979 6.90876 36.3468 4.23737C29.2275 2.05289 14.3309 0 14.3309 0Z" fill="#EAEAEA"/>
+<path d="M59.1387 42.9135L56.2699 41.6633L53.388 42.9135V9.80411H59.1387V42.9135Z" fill="url(#paint1_linear_1157_163007)"/>
+<path opacity="0.15" d="M86.7212 25.6883H66.7713C65.9028 25.6883 65.2053 26.3989 65.2053 27.2543C65.2053 28.1228 65.9159 28.8202 66.7713 28.8202H86.7212C87.5897 28.8202 88.2872 28.1096 88.2872 27.2543C88.3003 26.3857 87.5897 25.6883 86.7212 25.6883Z" fill="#1F1D20"/>
+<path opacity="0.15" d="M86.7212 32.5045H66.7713C65.9028 32.5045 65.2053 33.2151 65.2053 34.0705C65.2053 34.939 65.9159 35.6365 66.7713 35.6365H86.7212C87.5897 35.6365 88.2872 34.9258 88.2872 34.0705C88.3003 33.2019 87.5897 32.5045 86.7212 32.5045Z" fill="#1F1D20"/>
+<path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M66.7715 39.3336H86.695C87.5636 39.3336 88.261 40.0442 88.261 40.8995C88.261 41.7681 87.5504 42.4655 86.695 42.4655H66.7715C65.903 42.4655 65.2055 41.7549 65.2055 40.8995C65.1923 40.0442 65.8898 39.3336 66.7715 39.3336Z" fill="#1F1D20"/>
+<path d="M86.7212 25.1614H66.7713C65.9028 25.1614 65.2053 25.872 65.2053 26.7273C65.2053 27.5959 65.9159 28.2933 66.7713 28.2933H86.7212C87.5897 28.2933 88.2872 27.5827 88.2872 26.7273C88.3003 25.8588 87.5897 25.1614 86.7212 25.1614Z" fill="#50E6FF"/>
+<path d="M86.7212 31.9917H66.7713C65.9028 31.9917 65.2053 32.7023 65.2053 33.5577C65.2053 34.4262 65.9159 35.1237 66.7713 35.1237H86.7212C87.5897 35.1237 88.2872 34.4131 88.2872 33.5577C88.3003 32.6892 87.5897 31.9917 86.7212 31.9917Z" fill="#32B0E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.7715 38.808H86.695C87.5636 38.808 88.261 39.5186 88.261 40.3739C88.261 41.2425 87.5504 41.9399 86.695 41.9399H66.7715C65.903 41.9531 65.2055 41.2293 65.2055 40.3739C65.1923 39.5186 65.8898 38.808 66.7715 38.808Z" fill="#185A97"/>
+<path opacity="0.2" d="M120.295 60.2875H80.476V85.9653C80.476 87.0514 81.3515 87.9269 82.4375 87.9269H86.6156V94L92.733 87.9269H118.333C119.419 87.9269 120.295 87.0514 120.295 85.9653V60.2875Z" fill="#1F1D21"/>
+<path d="M118.965 58.6804H81.8058C81.0744 58.6804 80.476 59.2788 80.476 60.0103V84.9898C80.476 85.7213 81.0744 86.3197 81.8058 86.3197H86.6156V92.3928L92.733 86.3197H118.965C119.696 86.3197 120.295 85.7213 120.295 84.9898V60.0103C120.295 59.2788 119.696 58.6804 118.965 58.6804Z" fill="#49C8EF"/>
+<path d="M106.564 67.8017H94.1846C93.697 67.8017 93.298 68.2006 93.298 68.6883C93.298 69.1759 93.697 69.5748 94.1846 69.5748H106.564C107.051 69.5748 107.45 69.1759 107.45 68.6883C107.45 68.2006 107.051 67.8017 106.564 67.8017Z" fill="#C3F1FF"/>
+<path d="M106.564 71.6913H94.1846C93.697 71.6913 93.298 72.0903 93.298 72.5779C93.298 73.0655 93.697 73.4645 94.1846 73.4645H106.564C107.051 73.4645 107.45 73.0655 107.45 72.5779C107.45 72.1014 107.051 71.6913 106.564 71.6913Z" fill="#C3F1FF"/>
+<path d="M106.564 75.6026H94.1846C93.697 75.6026 93.298 76.0016 93.298 76.4892C93.298 76.9768 93.697 77.3758 94.1846 77.3758H106.564C107.051 77.3758 107.45 76.9768 107.45 76.4892C107.45 75.9905 107.051 75.6026 106.564 75.6026Z" fill="#C3F1FF"/>
+<defs>
+<linearGradient id="paint0_linear_1157_163007" x1="49.8133" y1="14.2868" x2="49.8133" y2="85.0398" gradientUnits="userSpaceOnUse">
+<stop stop-color="#007ED8"/>
+<stop offset="0.7065" stop-color="#002D4C"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1157_163007" x1="36.5785" y1="-9.69372" x2="104.813" y2="115.29" gradientUnits="userSpaceOnUse">
+<stop stop-color="#007ED8"/>
+<stop offset="0.7065" stop-color="#002D4C"/>
+</linearGradient>
+</defs>
+</svg>

images/CopilotSimplify.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 4C4.67157 4 4 4.67157 4 5.5V6.5C4 6.77614 3.77614 7 3.5 7C3.22386 7 3 6.77614 3 6.5V5.5C3 4.11929 4.11929 3 5.5 3H6.5C6.77614 3 7 3.22386 7 3.5C7 3.77614 6.77614 4 6.5 4H5.5ZM16 5.5C16 4.67157 15.3284 4 14.5 4H13.5C13.2239 4 13 3.77614 13 3.5C13 3.22386 13.2239 3 13.5 3H14.5C15.8807 3 17 4.11929 17 5.5V6.5C17 6.77614 16.7761 7 16.5 7C16.2239 7 16 6.77614 16 6.5V5.5ZM16 14.5C16 15.3284 15.3284 16 14.5 16H13.5C13.2239 16 13 16.2239 13 16.5C13 16.7761 13.2239 17 13.5 17H14.5C15.8807 17 17 15.8807 17 14.5V13.5C17 13.2239 16.7761 13 16.5 13C16.2239 13 16 13.2239 16 13.5V14.5ZM4 14.5C4 15.3284 4.67157 16 5.5 16H6.75C7.02614 16 7.25 16.2239 7.25 16.5C7.25 16.7761 7.02614 17 6.75 17H5.5C4.11929 17 3 15.8807 3 14.5V13.25C3 12.9739 3.22386 12.75 3.5 12.75C3.77614 12.75 4 12.9739 4 13.25V14.5ZM8.5 7C7.67157 7 7 7.67157 7 8.5V11.5C7 12.3284 7.67157 13 8.5 13H11.5C12.3284 13 13 12.3284 13 11.5V8.5C13 7.67157 12.3284 7 11.5 7H8.5ZM8 8.5C8 8.22386 8.22386 8 8.5 8H11.5C11.7761 8 12 8.22386 12 8.5V11.5C12 11.7761 11.7761 12 11.5 12H8.5C8.22386 12 8 11.7761 8 11.5V8.5Z" fill="#424242"/>
+</svg>

images/CopilotTabIcon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="22" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5849 1.28273C11.0125 0.262814 8.98746 0.262813 7.41509 1.28273L2.16509 4.68813C0.8149 5.56393 0 7.06384 0 8.6732V13.3268C0 14.9361 0.814898 16.4361 2.16509 17.3119L7.41509 20.7173C8.98746 21.7372 11.0125 21.7372 12.5849 20.7173L17.8349 17.3119C19.1851 16.4361 20 14.9361 20 13.3268V8.6732C20 7.06384 19.1851 5.56393 17.8349 4.68813L12.5849 1.28273ZM9.50097 2.05627C10.2759 1.93601 11.0848 2.09764 11.7686 2.54117L17.0186 5.94657C17.9424 6.54581 18.5 7.57205 18.5 8.6732V11.3955C18.287 11.1926 18.0465 11.0117 17.7802 10.8585L11.8647 7.4571C10.7104 6.79343 9.29086 6.79152 8.13486 7.45209L7.5 7.81487V4.41942C7.5 3.54181 8.01028 2.74428 8.80712 2.37651L9.50097 2.05627ZM17.8644 15.2257L17.7932 15.3503C17.5776 15.6214 17.3172 15.8597 17.0186 16.0534L11.7686 19.4588C10.6928 20.1567 9.30721 20.1567 8.23138 19.4588L5.86807 17.9259C6.11557 17.8361 6.35595 17.7193 6.58487 17.5754L12.2457 14.0172C13.3374 13.3309 14 12.1318 14 10.8423V10.4152L17.0324 12.1589C18.1077 12.7771 18.4798 14.1489 17.8644 15.2257ZM12.5 9.55272V10.8423C12.5 11.616 12.1025 12.3354 11.4474 12.7472L10.0303 13.6379L8.57078 12.7398C7.90535 12.3303 7.5 11.6049 7.5 10.8235V9.54249L8.87907 8.75445C9.57267 8.35811 10.4244 8.35926 11.1169 8.75746L12.5 9.55272ZM8.61445 14.5279L5.78662 16.3054C5.02045 16.787 4.04031 16.7627 3.29894 16.2437L2.5521 15.721C1.88767 15.1111 1.5 14.245 1.5 13.3268V8.6732C1.5 7.57205 2.05756 6.5458 2.98138 5.94657L6.0268 3.97116C6.00907 4.11873 6 4.26836 6 4.41942V10.8235C6 12.1258 6.67558 13.3348 7.78463 14.0173L8.61445 14.5279Z" fill="#0078D4"/>
+</svg>

images/CopilotThumb.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5806 0.051598C6.83006 -0.157 6.24411 0.402481 6.03494 0.923322C5.79411 1.52303 5.58243 1.94395 5.32941 2.44707C5.17287 2.75833 5.00052 3.10106 4.79565 3.53704C4.32141 4.54625 3.84755 5.19347 3.5035 5.58154C3.33128 5.77579 3.19093 5.90585 3.09835 5.98435C3.05204 6.02362 3.01761 6.05005 2.99704 6.0652L2.9809 6.07684L1.109 7.18119C0.272443 7.67473 -0.0885815 8.69797 0.253045 9.6072L0.773038 10.9912C0.989444 11.5671 1.45891 12.0114 2.04591 12.1958L7.40179 13.8781C8.73654 14.2974 10.1555 13.5397 10.5497 12.1973L11.9139 7.55127C12.29 6.2705 11.3298 4.9878 9.99492 4.9878H8.60995C8.67586 4.76117 8.74339 4.50906 8.80466 4.24751C8.93612 3.68641 9.04781 3.04484 9.03753 2.51008C9.02797 2.01293 8.97781 1.49126 8.77353 1.04807C8.55437 0.572583 8.1709 0.21566 7.5806 0.051598ZM2.9768 6.07969L2.97492 6.08097L2.9768 6.07969Z" fill="#0078D4"/>
+</svg>

images/CopliotWelcomeIllustration.svg

@@ -0,0 +1,29 @@
+<svg width="287" height="225" viewBox="0 0 287 225" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.3" d="M7.75456 192.647H231.829C233.524 192.647 235.156 191.988 236.381 190.764C237.605 189.539 238.265 187.907 238.265 186.211V33.061C238.265 29.5132 234.56 26.248 229.568 26.248L10.8314 29.576C9.98368 29.576 9.16738 29.733 8.38248 30.047C7.59758 30.3923 6.90687 30.8319 6.31034 31.4598C5.71381 32.0563 5.24287 32.747 4.89751 33.5319C4.55216 34.3168 4.42658 35.1645 4.42658 35.9808L1.31836 186.274C1.31836 187.969 1.97767 189.602 3.20212 190.795C4.42657 191.988 6.05917 192.647 7.75456 192.647Z" fill="#1F1D20"/>
+<path d="M231.264 23.3906H6.37342C2.85705 23.3906 0 26.2477 0 29.764V183.228C0 186.745 2.85705 189.602 6.37342 189.602H231.295C234.811 189.602 237.669 186.745 237.669 183.228V29.764C237.637 26.2477 234.78 23.3906 231.264 23.3906Z" fill="url(#paint0_linear_1151_179507)"/>
+<path d="M228.313 32.7148H119.62V178.707H228.313V32.7148Z" fill="white"/>
+<path d="M121.158 32.7148H12.4648V178.707H121.158V32.7148Z" fill="#CDCDD0"/>
+<path d="M34.1909 0V144.799C34.1909 144.799 63.2009 141.91 86.7166 153.715C110.264 165.52 121.158 178.581 121.158 178.581V33.7508C121.158 33.7508 107.595 16.483 86.7166 10.1095C69.7313 4.8978 34.1909 0 34.1909 0Z" fill="#EAEAEA"/>
+<path d="M141.094 102.383L134.249 99.4006L127.374 102.383V23.3906H141.094V102.383Z" fill="url(#paint1_linear_1151_179507)"/>
+<path opacity="0.15" d="M206.9 61.2871H159.304C157.231 61.2871 155.567 62.9825 155.567 65.0233C155.567 67.0954 157.263 68.7594 159.304 68.7594H206.9C208.972 68.7594 210.636 67.064 210.636 65.0233C210.668 62.9511 208.972 61.2871 206.9 61.2871Z" fill="#1F1D20"/>
+<path opacity="0.15" d="M206.9 77.5498H159.304C157.231 77.5498 155.567 79.2452 155.567 81.2859C155.567 83.3581 157.263 85.0221 159.304 85.0221H206.9C208.972 85.0221 210.636 83.3267 210.636 81.2859C210.668 79.2138 208.972 77.5498 206.9 77.5498Z" fill="#1F1D20"/>
+<path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M159.304 93.8428H206.838C208.91 93.8428 210.574 95.5381 210.574 97.5789C210.574 99.651 208.878 101.315 206.838 101.315H159.304C157.232 101.315 155.568 99.6196 155.568 97.5789C155.536 95.5381 157.2 93.8428 159.304 93.8428Z" fill="#1F1D20"/>
+<path d="M206.9 60.0303H159.304C157.231 60.0303 155.567 61.7257 155.567 63.7664C155.567 65.8385 157.263 67.5025 159.304 67.5025H206.9C208.972 67.5025 210.636 65.8072 210.636 63.7664C210.668 61.6943 208.972 60.0303 206.9 60.0303Z" fill="#50E6FF"/>
+<path d="M206.9 76.3262H159.304C157.231 76.3262 155.567 78.0216 155.567 80.0623C155.567 82.1345 157.263 83.7984 159.304 83.7984H206.9C208.972 83.7984 210.636 82.1031 210.636 80.0623C210.668 77.9902 208.972 76.3262 206.9 76.3262Z" fill="#32B0E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M159.304 92.5889H206.838C208.91 92.5889 210.574 94.2843 210.574 96.325C210.574 98.3972 208.878 100.061 206.838 100.061H159.304C157.232 100.093 155.568 98.3658 155.568 96.325C155.536 94.2843 157.2 92.5889 159.304 92.5889Z" fill="#185A97"/>
+<path opacity="0.2" d="M287 143.834H192V205.096C192 207.687 194.089 209.776 196.68 209.776H206.648V224.265L221.243 209.776H282.32C284.911 209.776 287 207.687 287 205.096V143.834Z" fill="#1F1D21"/>
+<path d="M283.827 140H195.173C193.428 140 192 141.428 192 143.173V202.769C192 204.514 193.428 205.942 195.173 205.942H206.648V220.431L221.243 205.942H283.827C285.572 205.942 287 204.514 287 202.769V143.173C287 141.428 285.572 140 283.827 140Z" fill="#49C8EF"/>
+<path d="M254.24 161.762H224.706C223.543 161.762 222.591 162.714 222.591 163.877C222.591 165.04 223.543 165.992 224.706 165.992H254.24C255.403 165.992 256.355 165.04 256.355 163.877C256.355 162.714 255.403 161.762 254.24 161.762Z" fill="#C3F1FF"/>
+<path d="M254.24 171.042H224.706C223.543 171.042 222.591 171.994 222.591 173.157C222.591 174.321 223.543 175.272 224.706 175.272H254.24C255.403 175.272 256.355 174.321 256.355 173.157C256.355 172.02 255.403 171.042 254.24 171.042Z" fill="#C3F1FF"/>
+<path d="M254.24 180.373H224.706C223.543 180.373 222.591 181.325 222.591 182.488C222.591 183.652 223.543 184.604 224.706 184.604H254.24C255.403 184.604 256.355 183.652 256.355 182.488C256.355 181.298 255.403 180.373 254.24 180.373Z" fill="#C3F1FF"/>
+<defs>
+<linearGradient id="paint0_linear_1151_179507" x1="118.845" y1="34.0854" x2="118.845" y2="202.888" gradientUnits="userSpaceOnUse">
+<stop stop-color="#007ED8"/>
+<stop offset="0.7065" stop-color="#002D4C"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1151_179507" x1="87.2694" y1="-23.1274" x2="250.063" y2="275.059" gradientUnits="userSpaceOnUse">
+<stop stop-color="#007ED8"/>
+<stop offset="0.7065" stop-color="#002D4C"/>
+</linearGradient>
+</defs>
+</svg>

images/Hint.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.39804 9.80882C4.57428 9.93313 4.78476 9.99968 5.00043 9.9993C5.21633 9.99946 5.42686 9.93197 5.60243 9.8063C5.77993 9.67582 5.91464 9.49552 5.98943 9.2883L6.43643 7.9153C6.55086 7.57101 6.74391 7.25811 7.00028 7.00139C7.25665 6.74467 7.56929 6.5512 7.91343 6.4363L9.30443 5.9853C9.45636 5.93095 9.59364 5.84214 9.70551 5.72586C9.81738 5.60957 9.9008 5.46896 9.94924 5.31503C9.99767 5.16111 10.0098 4.99806 9.98468 4.83867C9.95955 4.67927 9.89786 4.52786 9.80443 4.3963C9.67034 4.21038 9.47939 4.07314 9.26043 4.0053L7.88543 3.5583C7.54091 3.44407 7.22777 3.25111 6.97087 2.99472C6.71396 2.73833 6.52035 2.42558 6.40543 2.0813L5.95343 0.693301C5.88113 0.490997 5.74761 0.316236 5.57143 0.193301C5.43877 0.0995741 5.28607 0.0380931 5.12548 0.0137472C4.96489 -0.0105984 4.80083 0.00286224 4.64636 0.0530596C4.49188 0.103257 4.35125 0.188806 4.23564 0.302903C4.12004 0.417 4.03265 0.556497 3.98043 0.710301L3.52343 2.1103C3.40884 2.44513 3.21967 2.74954 2.97022 3.00055C2.72076 3.25157 2.41753 3.44263 2.08343 3.5593L0.692428 4.0073C0.540653 4.0617 0.403522 4.15048 0.291767 4.26669C0.180011 4.3829 0.0966621 4.5234 0.0482407 4.67719C-0.000180673 4.83097 -0.0123605 4.99388 0.0126534 5.15315C0.0376676 5.31243 0.0991972 5.46376 0.192428 5.5953C0.320272 5.77475 0.501046 5.90972 0.709428 5.9813L2.08343 6.4263C2.52354 6.57278 2.90999 6.84713 3.19343 7.2143C3.35585 7.42494 3.4813 7.66164 3.56443 7.9143L4.01643 9.3053C4.08846 9.50859 4.22179 9.68452 4.39804 9.80882ZM4.48343 2.3943L5.01043 1.0173L5.44943 2.3943C5.61312 2.88745 5.88991 3.33546 6.25767 3.70253C6.62544 4.0696 7.07397 4.34554 7.56743 4.5083L8.97343 5.0373L7.59143 5.4853C7.09866 5.6496 6.65095 5.92646 6.28382 6.29393C5.9167 6.66141 5.64026 7.10938 5.47643 7.6023L4.95343 8.9803L4.50443 7.6013C4.34335 7.10803 4.06943 6.65913 3.70443 6.2903C3.3356 5.92226 2.88653 5.64467 2.39243 5.4793L1.01443 4.9573L2.40043 4.5073C2.88672 4.33867 3.32775 4.06051 3.68943 3.6943C4.04901 3.3266 4.32049 2.88211 4.48343 2.3943ZM10.5353 13.8513C10.6713 13.9475 10.8337 13.9992 11.0003 13.9993C11.1654 13.9994 11.3264 13.9484 11.4613 13.8533C11.6008 13.7548 11.7058 13.6149 11.7613 13.4533L12.0093 12.6913C12.0625 12.5329 12.1515 12.3888 12.2693 12.2703C12.3867 12.1518 12.5307 12.063 12.6893 12.0113L13.4613 11.7593C13.619 11.7048 13.7557 11.6024 13.8523 11.4663C13.9257 11.3633 13.9736 11.2444 13.9921 11.1193C14.0106 10.9942 13.9992 10.8665 13.9588 10.7467C13.9184 10.6268 13.8501 10.5183 13.7597 10.4299C13.6692 10.3415 13.5591 10.2759 13.4383 10.2383L12.6743 9.98933C12.5162 9.93676 12.3724 9.84814 12.2544 9.73048C12.1364 9.61281 12.0473 9.46932 11.9943 9.31133L11.7423 8.53833C11.6886 8.38048 11.586 8.24387 11.4493 8.14833C11.3473 8.07538 11.2295 8.02744 11.1056 8.00838C10.9816 7.98932 10.8549 7.99967 10.7357 8.0386C10.6164 8.07753 10.508 8.14395 10.4192 8.23249C10.3304 8.32104 10.2636 8.42923 10.2243 8.54833L9.97731 9.31033C9.92502 9.46798 9.83747 9.61162 9.72131 9.73033C9.60657 9.8468 9.46665 9.93541 9.31231 9.98933L8.53931 10.2413C8.38025 10.2952 8.2422 10.3978 8.1447 10.5346C8.04721 10.6713 7.99522 10.8353 7.99611 11.0032C7.99699 11.1712 8.0507 11.3346 8.14963 11.4703C8.24856 11.606 8.38769 11.7071 8.54731 11.7593L9.31031 12.0063C9.46917 12.0597 9.61358 12.149 9.73231 12.2673C9.85053 12.3856 9.93896 12.5302 9.99031 12.6893L10.2433 13.4633C10.2981 13.6198 10.4001 13.7554 10.5353 13.8513ZM9.62231 11.0583L9.44331 10.9993L9.62731 10.9353C9.92907 10.8304 10.2027 10.6576 10.4273 10.4303C10.6537 10.2013 10.8248 9.92359 10.9273 9.61833L10.9853 9.44033L11.0443 9.62133C11.1463 9.92803 11.3185 10.2067 11.5471 10.4352C11.7757 10.6636 12.0545 10.8356 12.3613 10.9373L12.5563 11.0003L12.3763 11.0593C12.0689 11.1615 11.7898 11.3342 11.5611 11.5636C11.3324 11.793 11.1606 12.0727 11.0593 12.3803L11.0003 12.5613L10.9423 12.3803C10.8409 12.0722 10.6687 11.792 10.4394 11.5625C10.2102 11.3329 9.93033 11.1602 9.62231 11.0583Z" fill="#424242"/>
+</svg>

images/IntermediatePrompts.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.799805 3.99971C0.799805 2.79131 1.8498 1.89371 3.0798 1.33211C4.6378 0.684806 6.313 0.367334 7.9998 0.39971C9.68664 0.367334 11.3618 0.684806 12.9198 1.33211C14.1498 1.89371 15.1998 2.79131 15.1998 3.99971V10.1304C14.827 10.1594 14.4604 10.2471 14.1138 10.3906C14.0755 10.4066 14.0375 10.423 13.9998 10.4403V6.03971C13.6631 6.28732 13.301 6.49849 12.9198 6.66971C11.3616 7.3162 9.6864 7.63285 7.9998 7.59971C6.313 7.63209 4.6378 7.31461 3.0798 6.66731C2.69864 6.49686 2.33662 6.28648 1.9998 6.03971V15.9997C1.9998 16.4485 2.427 17.0497 3.5814 17.5753C4.98209 18.1502 6.48605 18.4308 7.9998 18.3997L8.02536 18.4002C8.03904 18.4647 8.05452 18.529 8.0718 18.593L7.15982 19.5098C7.13596 19.5337 7.11282 19.5582 7.09042 19.5832C5.71356 19.507 4.35728 19.198 3.0798 18.6673C1.8498 18.1057 0.799805 17.2081 0.799805 15.9997V3.99971ZM1.9998 3.99971C1.9998 4.44851 2.427 5.04971 3.5814 5.57531C4.98209 6.15018 6.48605 6.4308 7.9998 6.39971C9.5136 6.4308 11.0176 6.15018 12.4182 5.57531C13.5726 5.04971 13.9998 4.44851 13.9998 3.99971C13.9998 3.55091 13.5726 2.94971 12.4182 2.42411C11.0176 1.84924 9.5136 1.56863 7.9998 1.59971C6.48605 1.56863 4.98209 1.84924 3.5814 2.42411C2.427 2.94971 1.9998 3.55091 1.9998 3.99971ZM19.0373 11.0246C19.15 10.9122 19.2133 10.7595 19.2134 10.6003C19.2136 10.441 19.1504 10.2883 19.0379 10.1756C18.9254 10.0629 18.7728 9.99963 18.6136 9.99952C18.4543 9.9994 18.3016 10.0626 18.1889 10.175L16.7657 11.5982C16.7506 11.6187 16.7366 11.64 16.7237 11.6618C16.2658 11.3886 15.7297 11.2755 15.2004 11.3407C14.6711 11.4058 14.1785 11.6456 13.8005 12.0218L13.0805 12.7418C12.8603 12.9626 12.7366 13.2616 12.7366 13.5734C12.7366 13.8853 12.8603 14.1843 13.0805 14.405L14.8109 16.1318C15.0317 16.3525 15.331 16.4764 15.6431 16.4764C15.9552 16.4764 16.2546 16.3525 16.4753 16.1318L17.1953 15.4118C17.5718 15.0338 17.8117 14.541 17.8769 14.0114C17.942 13.4817 17.829 12.9456 17.5553 12.4874C17.5777 12.4753 17.599 12.4612 17.6189 12.4454L19.0373 11.0246ZM12.2317 15.2498C12.1225 15.1405 11.9928 15.054 11.8501 14.9948C11.7074 14.9356 11.5546 14.9053 11.4001 14.9053C11.2457 14.9053 11.0927 14.9356 10.95 14.9948C10.8073 15.054 10.6777 15.1405 10.5685 15.2498L9.84852 15.9698C9.47196 16.3478 9.23208 16.8406 9.16692 17.3702C9.10176 17.8998 9.21492 18.436 9.48852 18.8942C9.46632 18.9066 9.44508 18.9206 9.42492 18.9362L8.00652 20.3582C7.89722 20.4714 7.83674 20.6229 7.8381 20.7802C7.83947 20.9376 7.90258 21.088 8.01384 21.1993C8.12508 21.3105 8.27556 21.3736 8.43288 21.375C8.5902 21.3763 8.74176 21.3158 8.85492 21.2066L10.2769 19.7834C10.2926 19.7631 10.3072 19.7419 10.3201 19.7198C10.778 19.993 11.3141 20.1061 11.8434 20.0409C12.3727 19.9756 12.8653 19.736 13.2433 19.3598L13.9633 18.6398C14.184 18.419 14.3078 18.1197 14.3078 17.8076C14.3078 17.4955 14.184 17.1961 13.9633 16.9754L12.2317 15.2498Z" fill="#0078D4"/>
+</svg>

images/QueryCopilotNewLogo.svg

@@ -0,0 +1,34 @@
+<svg width="32" height="34" viewBox="0 0 32 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 0.739258L16 1.04436V9.68622L11.2 10.8013L9.60002 12.9967V16.4479C9.60002 18.7669 10.8545 20.9045 12.879 22.0353L17.4036 24.5626L9.6 28.69L6.35592 29.1523L3.27902 27.4337C1.25445 26.3028 0 24.1652 0 21.8462V11.7591C0 9.43952 1.25512 7.30147 3.28055 6.17085L12.3174 1.12639L12.3121 1.13012L13 0.739258Z" fill="url(#paint0_radial_857_143948)"/>
+<path d="M13 0.739258L16 1.04436V9.68622L11.2 10.8013L9.60002 12.9967V16.4479C9.60002 18.7669 10.8545 20.9045 12.879 22.0353L17.4036 24.5626L9.6 28.69L6.35592 29.1523L3.27902 27.4337C1.25445 26.3028 0 24.1652 0 21.8462V11.7591C0 9.43952 1.25512 7.30147 3.28055 6.17085L12.3174 1.12639L12.3121 1.13012L13 0.739258Z" fill="url(#paint1_linear_857_143948)"/>
+<path d="M22.399 12.001L30.399 16.801L31.999 18.401V21.8452C31.999 24.1642 30.7446 26.3018 28.72 27.4327L19.12 32.7949C17.1804 33.8784 14.8177 33.8784 12.878 32.7949L3.27804 27.4327C3.09146 27.3284 2.91141 27.2157 2.73828 27.095L3.278 27.3965C5.21762 28.4799 7.58035 28.4799 9.51996 27.3965L19.12 22.0342C21.1445 20.9033 22.399 18.7657 22.399 16.4467V12.001Z" fill="url(#paint2_radial_857_143948)"/>
+<path d="M22.399 12.001L30.399 16.801L31.999 18.401V21.8452C31.999 24.1642 30.7446 26.3018 28.72 27.4327L19.12 32.7949C17.1804 33.8784 14.8177 33.8784 12.878 32.7949L3.27804 27.4327C3.09146 27.3284 2.91141 27.2157 2.73828 27.095L3.278 27.3965C5.21762 28.4799 7.58035 28.4799 9.51996 27.3965L19.12 22.0342C21.1445 20.9033 22.399 18.7657 22.399 16.4467V12.001Z" fill="url(#paint3_linear_857_143948)"/>
+<path d="M28.7191 6.17053L19.119 0.811705C17.1802 -0.270568 14.819 -0.270568 12.8802 0.811704L12.3151 1.1271C10.6239 2.31737 9.59961 4.26472 9.59961 6.36025V13.0461L12.8802 11.2149C14.819 10.1326 17.1802 10.1326 19.119 11.2149L28.7191 16.5737C30.6984 17.6786 31.9421 19.7456 31.9977 22.0039C31.999 21.9514 31.9996 21.8987 31.9996 21.8459V11.7588C31.9996 9.4392 30.7445 7.30115 28.7191 6.17053Z" fill="url(#paint4_radial_857_143948)"/>
+<path d="M28.7191 6.17053L19.119 0.811705C17.1802 -0.270568 14.819 -0.270568 12.8802 0.811704L12.3151 1.1271C10.6239 2.31737 9.59961 4.26472 9.59961 6.36025V13.0461L12.8802 11.2149C14.819 10.1326 17.1802 10.1326 19.119 11.2149L28.7191 16.5737C30.6984 17.6786 31.9421 19.7456 31.9977 22.0039C31.999 21.9514 31.9996 21.8987 31.9996 21.8459V11.7588C31.9996 9.4392 30.7445 7.30115 28.7191 6.17053Z" fill="url(#paint5_linear_857_143948)"/>
+<defs>
+<radialGradient id="paint0_radial_857_143948" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.5054 9.8837) rotate(112.544) scale(23.4519 19.3067)">
+<stop offset="0.206732" stop-color="#4995D0"/>
+<stop offset="0.875628" stop-color="#0078D4"/>
+</radialGradient>
+<linearGradient id="paint1_linear_857_143948" x1="11.0625" y1="26.6174" x2="9.78695" y2="24.2436" gradientUnits="userSpaceOnUse">
+<stop offset="0.9999" stop-color="#0078D4"/>
+<stop offset="1" stop-color="#0078D4" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint2_radial_857_143948" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.899 24.5214) rotate(-3.9995) scale(24.6197 15.4594)">
+<stop offset="0.140029" stop-color="#80C8FF"/>
+<stop offset="0.952721" stop-color="#0078D4"/>
+</radialGradient>
+<linearGradient id="paint3_linear_857_143948" x1="26.8932" y1="15.5508" x2="25.5491" y2="17.8921" gradientUnits="userSpaceOnUse">
+<stop offset="0.9999" stop-color="#3F8AC3"/>
+<stop offset="1" stop-color="#8C66BA" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint4_radial_857_143948" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(26.632 16.3878) rotate(-138.33) scale(22.8015 13.0047)">
+<stop stop-color="#7BC6FF"/>
+<stop offset="0.839255" stop-color="#0078D4"/>
+</radialGradient>
+<linearGradient id="paint5_linear_857_143948" x1="9.59961" y1="8.71337" x2="12.2131" y2="8.71337" gradientUnits="userSpaceOnUse">
+<stop offset="0.9999" stop-color="#0078D4"/>
+<stop offset="1" stop-color="#436DCD" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

images/Recent.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9342 7.04998C15.4095 3.21975 11.8792 0.540074 8.04894 1.06475C6.10618 1.33087 4.46008 2.36951 3.37682 3.82964L3.25046 3.99997H6.49985C6.77599 3.99997 6.99985 4.22383 6.99985 4.49997C6.99985 4.77611 6.77599 4.99997 6.49985 4.99997H2.49985C2.22371 4.99997 1.99985 4.77611 1.99985 4.49997V0.499969C1.99985 0.223826 2.22371 -3.14998e-05 2.49985 -3.14998e-05C2.77599 -3.14998e-05 2.99985 0.223826 2.99985 0.499968V2.70729C4.22416 1.31847 5.93463 0.345036 7.91322 0.0740017C12.2906 -0.525627 16.3253 2.53686 16.9249 6.91426C17.5246 11.2917 14.4621 15.3263 10.0847 15.926C5.70727 16.5256 1.67259 13.4631 1.07296 9.08571C0.998819 8.54443 0.980672 8.00788 1.01426 7.48208C1.03186 7.2065 1.26953 6.99737 1.54511 7.01497C1.82069 7.03258 2.02982 7.27025 2.01222 7.54583C1.98287 8.00544 1.99867 8.47516 2.06371 8.94999C2.58839 12.7802 6.11873 15.4599 9.94896 14.9352C13.7792 14.4105 16.4589 10.8802 15.9342 7.04998Z" fill="#424242"/>
+</svg>

images/SamplePromptsIcon.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="20" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 5.5V4.75H0.75V5.5H0ZM0 3.25V2.5H0.75V3.25H0ZM2.25 3.25V2.5H12V3.25H2.25ZM0 1V0.25H0.75V1H0ZM2.25 0.25H12V1H2.25V0.25ZM2.25 5.5V4.75H12V5.5H2.25ZM0 7.75V7H0.75V7.75H0ZM2.25 7.75V7H12V7.75H2.25Z" fill="#0078D4"/>
+</svg>

images/SimplePrompts.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 4C0 3.30945 0.3153 2.70664 0.77423 2.22025C1.2294 1.73784 1.85301 1.33745 2.56668 1.01752C3.99575 0.3769 5.91738 0 8 0C10.0826 0 12.0042 0.3769 13.4333 1.01752C14.147 1.33745 14.7706 1.73784 15.2258 2.22025C15.6847 2.70664 16 3.30945 16 4V10.2572C15.5537 9.8886 15.0482 9.589 14.5 9.3749V6.39242C14.1791 6.61282 13.8194 6.80942 13.4333 6.98248C12.0042 7.6231 10.0826 8 8 8C5.91738 8 3.99575 7.6231 2.56668 6.98248C2.18063 6.80942 1.82094 6.61282 1.5 6.39242V16C1.5 16.2069 1.59044 16.4591 1.86525 16.7503C2.14382 17.0456 2.58195 17.3455 3.18027 17.6137C4.37519 18.1494 6.0786 18.5 8 18.5C8.2396 18.5 8.4759 18.4945 8.7081 18.484C9.3109 19.0579 10.0438 19.4964 10.858 19.7507C9.9673 19.9127 9.0023 20 8 20C5.91738 20 3.99575 19.6231 2.56668 18.9825C1.85301 18.6626 1.2294 18.2622 0.77423 17.7798C0.3153 17.2934 0 16.6906 0 16V4ZM1.5 4C1.5 4.20691 1.59044 4.45909 1.86525 4.75034C2.14382 5.04559 2.58195 5.3455 3.18027 5.61372C4.37519 6.14937 6.0786 6.5 8 6.5C9.9214 6.5 11.6248 6.14937 12.8197 5.61372C13.418 5.3455 13.8562 5.04559 14.1348 4.75034C14.4096 4.45909 14.5 4.20691 14.5 4C14.5 3.79309 14.4096 3.54091 14.1348 3.24966C13.8562 2.95441 13.418 2.65449 12.8197 2.38628C11.6248 1.85063 9.9214 1.5 8 1.5C6.0786 1.5 4.37519 1.85063 3.18027 2.38628C2.58195 2.65449 2.14382 2.95441 1.86525 3.24966C1.59044 3.54091 1.5 3.79309 1.5 4ZM12.5 19C13.4719 19 14.3718 18.6919 15.1074 18.1681L17.7197 20.7803C18.0126 21.0732 18.4874 21.0732 18.7803 20.7803C19.0732 20.4874 19.0732 20.0126 18.7803 19.7197L16.1681 17.1074C16.6919 16.3718 17 15.4719 17 14.5C17 12.0147 14.9853 10 12.5 10C10.0147 10 8 12.0147 8 14.5C8 16.9853 10.0147 19 12.5 19ZM12.5 17.5C10.8431 17.5 9.5 16.1569 9.5 14.5C9.5 12.8431 10.8431 11.5 12.5 11.5C14.1569 11.5 15.5 12.8431 15.5 14.5C15.5 16.1569 14.1569 17.5 12.5 17.5Z" fill="#0078D4"/>
+</svg>

images/StopGenerating.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 0C1.61929 0 0.5 1.11929 0.5 2.5V9.5C0.5 10.8807 1.61929 12 3 12H4.75716C4.50353 11.6929 4.28261 11.3578 4.09971 11H3C2.17157 11 1.5 10.3284 1.5 9.5V2.5C1.5 1.67157 2.17157 1 3 1H10C10.8284 1 11.5 1.67157 11.5 2.5V3.59971C11.8578 3.78261 12.1929 4.00353 12.5 4.25716V2.5C12.5 1.11929 11.3807 0 10 0H3ZM9 13C11.4853 13 13.5 10.9853 13.5 8.5C13.5 6.01472 11.4853 4 9 4C6.51472 4 4.5 6.01472 4.5 8.5C4.5 10.9853 6.51472 13 9 13ZM10.8536 6.64645C11.0488 6.84171 11.0488 7.15829 10.8536 7.35355L9.70711 8.5L10.8536 9.64645C11.0488 9.84171 11.0488 10.1583 10.8536 10.3536C10.6583 10.5488 10.3417 10.5488 10.1464 10.3536L9 9.20711L7.85355 10.3536C7.65829 10.5488 7.34171 10.5488 7.14645 10.3536C6.95118 10.1583 6.95118 9.84171 7.14645 9.64645L8.29289 8.5L7.14645 7.35355C6.95118 7.15829 6.95118 6.84171 7.14645 6.64645C7.34171 6.45118 7.65829 6.45118 7.85355 6.64645L9 7.79289L10.1464 6.64645C10.3417 6.45118 10.6583 6.45118 10.8536 6.64645Z" fill="#0078D4"/>
+</svg>

images/Table.svg

@@ -0,0 +1,20 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.11108 12.8623H38.8889V33.9245C38.8889 34.2593 38.7559 34.5803 38.5192 34.8171C38.2825 35.0538 37.9614 35.1867 37.6266 35.1867H2.37331C2.03854 35.1867 1.71749 35.0538 1.48078 34.8171C1.24407 34.5803 1.11108 34.2593 1.11108 33.9245V12.8623Z" fill="url(#paint0_linear_307_12833)"/>
+<path d="M2.37997 4.81349H37.62C37.7857 4.81349 37.9499 4.84614 38.103 4.90958C38.2561 4.97301 38.3953 5.06598 38.5125 5.18319C38.6297 5.3004 38.7227 5.43955 38.7861 5.59269C38.8495 5.74582 38.8822 5.90996 38.8822 6.07572V12.8624H1.11108V6.07572C1.11108 5.9094 1.14395 5.74472 1.2078 5.59114C1.27165 5.43756 1.36522 5.29812 1.48313 5.18083C1.60105 5.06353 1.74098 4.97069 1.89489 4.90766C2.0488 4.84462 2.21366 4.81262 2.37997 4.81349V4.81349Z" fill="#0078D4"/>
+<path opacity="0.9" d="M12.6021 15.8242H5.74876C5.40144 15.8242 5.11987 16.1058 5.11987 16.4531V19.3064C5.11987 19.6538 5.40144 19.9353 5.74876 19.9353H12.6021C12.9494 19.9353 13.231 19.6538 13.231 19.3064V16.4531C13.231 16.1058 12.9494 15.8242 12.6021 15.8242Z" fill="white"/>
+<path opacity="0.9" d="M23.4821 15.7666H16.6288C16.2814 15.7666 15.9999 16.0482 15.9999 16.3955V19.2488C15.9999 19.5961 16.2814 19.8777 16.6288 19.8777H23.4821C23.8294 19.8777 24.111 19.5961 24.111 19.2488V16.3955C24.111 16.0482 23.8294 15.7666 23.4821 15.7666Z" fill="white"/>
+<path opacity="0.9" d="M34.3621 15.7666H27.5088C27.1614 15.7666 26.8799 16.0482 26.8799 16.3955V19.2488C26.8799 19.5961 27.1614 19.8777 27.5088 19.8777H34.3621C34.7094 19.8777 34.991 19.5961 34.991 19.2488V16.3955C34.991 16.0482 34.7094 15.7666 34.3621 15.7666Z" fill="white"/>
+<path opacity="0.9" d="M12.7221 21.7051H5.86876C5.52143 21.7051 5.23987 21.9866 5.23987 22.334V25.1873C5.23987 25.5346 5.52143 25.8162 5.86876 25.8162H12.7221C13.0694 25.8162 13.351 25.5346 13.351 25.1873V22.334C13.351 21.9866 13.0694 21.7051 12.7221 21.7051Z" fill="white"/>
+<path d="M23.6021 21.6465H16.7488C16.4014 21.6465 16.1199 21.928 16.1199 22.2754V25.1287C16.1199 25.476 16.4014 25.7576 16.7488 25.7576H23.6021C23.9494 25.7576 24.231 25.476 24.231 25.1287V22.2754C24.231 21.928 23.9494 21.6465 23.6021 21.6465Z" fill="#ECF4FD"/>
+<path d="M34.4821 21.6465H27.6288C27.2814 21.6465 26.9999 21.928 26.9999 22.2754V25.1287C26.9999 25.476 27.2814 25.7576 27.6288 25.7576H34.4821C34.8294 25.7576 35.111 25.476 35.111 25.1287V22.2754C35.111 21.928 34.8294 21.6465 34.4821 21.6465Z" fill="#ECF4FD"/>
+<path d="M12.7221 27.6426H5.86876C5.52143 27.6426 5.23987 27.9241 5.23987 28.2715V31.1248C5.23987 31.4721 5.52143 31.7537 5.86876 31.7537H12.7221C13.0694 31.7537 13.351 31.4721 13.351 31.1248V28.2715C13.351 27.9241 13.0694 27.6426 12.7221 27.6426Z" fill="#ECF4FD"/>
+<path d="M23.6021 27.585H16.7488C16.4014 27.585 16.1199 27.8665 16.1199 28.2139V31.0672C16.1199 31.4145 16.4014 31.6961 16.7488 31.6961H23.6021C23.9494 31.6961 24.231 31.4145 24.231 31.0672V28.2139C24.231 27.8665 23.9494 27.585 23.6021 27.585Z" fill="#ECF4FD"/>
+<path d="M34.4821 27.585H27.6288C27.2814 27.585 26.9999 27.8665 26.9999 28.2139V31.0672C26.9999 31.4145 27.2814 31.6961 27.6288 31.6961H34.4821C34.8294 31.6961 35.111 31.4145 35.111 31.0672V28.2139C35.111 27.8665 34.8294 27.585 34.4821 27.585Z" fill="#ECF4FD"/>
+<defs>
+<linearGradient id="paint0_linear_307_12833" x1="20" y1="35.1867" x2="20" y2="12.8623" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0078D4"/>
+<stop offset="0.502" stop-color="#4093E6"/>
+<stop offset="0.775" stop-color="#5EA0EF"/>
+</linearGradient>
+</defs>
+</svg>

images/X-errorMessage.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C8.73438 0 9.44271 0.0963542 10.125 0.289062C10.8073 0.476562 11.4427 0.744792 12.0312 1.09375C12.625 1.44271 13.1641 1.86198 13.6484 2.35156C14.138 2.83594 14.5573 3.375 14.9062 3.96875C15.2552 4.55729 15.5234 5.19271 15.7109 5.875C15.9036 6.55729 16 7.26562 16 8C16 8.73438 15.9036 9.44271 15.7109 10.125C15.5234 10.8073 15.2552 11.4453 14.9062 12.0391C14.5573 12.6276 14.138 13.1667 13.6484 13.6562C13.1641 14.1406 12.625 14.5573 12.0312 14.9062C11.4427 15.2552 10.8073 15.526 10.125 15.7188C9.44271 15.9062 8.73438 16 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.526 4.55469 15.2552 3.96094 14.9062C3.3724 14.5573 2.83333 14.1406 2.34375 13.6562C1.85938 13.1667 1.44271 12.6276 1.09375 12.0391C0.744792 11.4453 0.473958 10.8073 0.28125 10.125C0.09375 9.44271 0 8.73438 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.473958 5.19271 0.744792 4.55729 1.09375 3.96875C1.44271 3.375 1.85938 2.83594 2.34375 2.35156C2.83333 1.86198 3.3724 1.44271 3.96094 1.09375C4.55469 0.744792 5.19271 0.476562 5.875 0.289062C6.55729 0.0963542 7.26562 0 8 0ZM8 15C8.64583 15 9.26562 14.9167 9.85938 14.75C10.4583 14.5833 11.0156 14.349 11.5312 14.0469C12.0521 13.7396 12.5234 13.375 12.9453 12.9531C13.3724 12.526 13.737 12.0547 14.0391 11.5391C14.3464 11.0182 14.5833 10.4609 14.75 9.86719C14.9167 9.26823 15 8.64583 15 8C15 7.35417 14.9167 6.73438 14.75 6.14062C14.5833 5.54167 14.3464 4.98438 14.0391 4.46875C13.737 3.94792 13.3724 3.47656 12.9453 3.05469C12.5234 2.6276 12.0521 2.26302 11.5312 1.96094C11.0156 1.65365 10.4583 1.41667 9.85938 1.25C9.26562 1.08333 8.64583 1 8 1C7.35417 1 6.73177 1.08333 6.13281 1.25C5.53906 1.41667 4.98177 1.65365 4.46094 1.96094C3.94531 2.26302 3.47396 2.6276 3.04688 3.05469C2.625 3.47656 2.26042 3.94792 1.95312 4.46875C1.65104 4.98438 1.41667 5.54167 1.25 6.14062C1.08333 6.73438 1 7.35417 1 8C1 8.64583 1.08333 9.26823 1.25 9.86719C1.41667 10.4609 1.65104 11.0182 1.95312 11.5391C2.26042 12.0547 2.625 12.526 3.04688 12.9531C3.47396 13.375 3.94531 13.7396 4.46094 14.0469C4.98177 14.349 5.53906 14.5833 6.13281 14.75C6.73177 14.9167 7.35417 15 8 15ZM11.4609 5.24219L8.71094 8L11.4609 10.7578L10.7578 11.4609L8 8.71094L5.24219 11.4609L4.53906 10.7578L7.28906 8L4.53906 5.24219L5.24219 4.53906L8 7.28906L10.7578 4.53906L11.4609 5.24219Z" fill="#E00B1C"/>
+</svg>

images/YoutubePlaceholder.svg

@@ -0,0 +1,3 @@
+<svg width="334" height="154" viewBox="0 0 334 154" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="333" height="153" fill="#F3F2F1" stroke="#E1DFDD"/>
+</svg>

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>

images/successfulPopup.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="#57A300"/>
+<path d="M3.10891 7.25414C3.04416 7.18502 3.01091 7.09402 3.01441 6.99952C3.01791 6.90414 3.05816 6.81664 3.12816 6.75102L3.85879 6.07552C3.92529 6.01514 4.01016 5.98189 4.09854 5.98189C4.19654 5.98189 4.29104 6.02302 4.35754 6.09477L6.22654 8.10027L9.55766 3.83464C9.62504 3.74802 9.72653 3.69727 9.83678 3.69727C9.91553 3.69727 9.98991 3.72264 10.0529 3.77077L10.8457 4.38239C10.997 4.49439 11.0294 4.71227 10.9157 4.86714L6.65616 10.321C6.49079 10.5328 6.17491 10.5468 5.99116 10.3499L3.10891 7.25414Z" fill="white"/>
+</svg>

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}"],
@@ -36,7 +37,7 @@ module.exports = {
   coverageThreshold: {
     global: {
       branches: 25,
-      functions: 25,
+      functions: 24,
       lines: 28,
       statements: 28,
     },
@@ -67,7 +68,8 @@ module.exports = {
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    "^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
+    "^.*[.](png|gif|less|css)$": "<rootDir>/mockModule",
+    "(.*)$[.](svg)": "<rootDir>/mockModule/$1",
     "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
     "@fluentui/react/lib/(.*)$": "@fluentui/react/lib-commonjs/$1", // https://github.com/microsoft/fluentui/wiki/Version-8-release-notes
     "monaco-editor/(.*)$": "<rootDir>/__mocks__/monaco-editor",
@@ -164,6 +166,7 @@ module.exports = {
   transform: {
     "^.+\\.html?$": "html-loader-jest",
     "^.+\\.[t|j]sx?$": "babel-jest",
+    "^.+\\.svg$": "<rootDir>/svgTransform.js",
   },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation

less/Common/Constants.less

@@ -10,6 +10,7 @@
 @DataExplorerFont: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
 @SemiboldFont: "Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
 @GrayScale: "grayscale()";
+@NoColor: "brightness(0) saturate(100%)";
 
 @xSmallFontSize: 4px;
 @smallFontSize: 8px;
@@ -147,14 +148,41 @@
 // CommandBar
 @CommandBarButtonHeight: 40px;
 
+/**********************************************************************************
+                              Portal Consts
+/**********************************************************************************/
+
+@PortalAccentMediumHigh: #0058ad;
+@PortalAccentMedium: #004e87;
+@PortalAccentLight: #eef7ff;
+@PortalAccentAccentExtra: #ddf0ff;
+
+/**********************************************************************************
+                              Fabric Consts
+/**********************************************************************************/
+
+@FabricFont: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+
+@FabricBoxBorderRadius: 8px;
+@FabricBoxBorderShadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
+@FabricBoxMargin: 4px 3px 4px 3px;
+
+@FabricAccentMediumHigh: #0c695a;
+@FabricAccentMedium: #117865;
+@FabricAccentLight: #f5f5f5;
+@FabricAccentExtra: #ebebeb;
+
+@FabricButtonBorderRadius: 4px;
+
+
 /**********************************************************************************
                               Common Flex Property
 /**********************************************************************************/
 
 .flex-display(@display: flex) {
-  display: ~"-webkit-@{display}";
+  display:~"-webkit-@{display}";
-  display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
+  display:~"-ms-@{display}box"; // IE10 uses -ms-flexbox
-  display: ~"-ms-@{display}"; // IE11
+  display:~"-ms-@{display}"; // IE11
   display: @display;
 }
 
@@ -168,13 +196,15 @@
                                  High contrast mode active
 **************************************************************************************/
 
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+@media all and (-ms-high-contrast: none),
+(-ms-high-contrast: active) {
+
   .selectedRadio,
   .selectedRadio:hover,
   .selectedRadio:active,
   .selectedRadio.dirty,
-  .tab [type="radio"]:checked ~ label,
+  .tab [type="radio"]:checked~label,
-  .tab [type="radio"]:checked ~ label:hover {
+  .tab [type="radio"]:checked~label:hover {
     -ms-high-contrast-adjust: none;
     -webkit-text-fill-color: HighlightText;
     color: HighlightText;
@@ -183,6 +213,7 @@
   }
 
   .queryMetricsSummaryTuple {
+
     th,
     td {
       &:nth-child(2) {
@@ -302,4 +333,4 @@
   width: 0;
   height: 0;
   border-color: @InfoPointerColor transparent;
-}
+}

less/TableStyles/fulldatatables.less

@@ -108,7 +108,7 @@ table.storage thead td {
     background-color: @BaseLight;
     /*[{datatable-header-background}]*/
     text-align: left;
-    color: #808080;
+    color: #333333;
     /*[{datatable-header-text}]*/
     outline: none;
 }
@@ -650,4 +650,4 @@ tr:hover td.nameColumnText {
 
 .context-menu-item.icon-customize-columns {
     background-image: url(../../images/Options.svg);
-}
+}

less/TableStyles/queryBuilder.less

@@ -3,337 +3,337 @@
 @import "../Common/Constants";
 
 .query-panel {
-    display: table;
+  display: table;
-    display: none;
+  display: none;
-    width: 100%;
+  width: 100%;
-    border-top: 1px solid #DDDDDD;
+  border-top: 1px solid #dddddd;
-    /*[{environment-commandbar-toolbar-separator}]*/
+  /*[{environment-commandbar-toolbar-separator}]*/
-    background-color: #ffffff;
+  background-color: #ffffff;
-    /*[{plugin-background-color}]*/
+  /*[{plugin-background-color}]*/
-    padding: 2px 0px 0px 2px;
+  padding: 2px 0px 0px 2px;
-    resize: vertical;
+  resize: vertical;
 }
 
 .query-panel .row {
-    display: table-row;
+  display: table-row;
 }
 
 .query-panel .row .cell {
-    display: table-cell;
+  display: table-cell;
 }
 
 .query-panel.transition-in {
-    display: table;
+  display: table;
-    top: 0px;
+  top: 0px;
-    -webkit-transition: top 2s linear;
+  -webkit-transition: top 2s linear;
-    -ms-transition: top 2s linear;
+  -ms-transition: top 2s linear;
-    -moz-transition: top 2s linear;
+  -moz-transition: top 2s linear;
-    -khtml-transition: top 2s linear;
+  -khtml-transition: top 2s linear;
-    -o-transition: top 2s linear;
+  -o-transition: top 2s linear;
-    transition: top 2s linear;
+  transition: top 2s linear;
 }
 
 .query-builder {
-    width:100%;
+  width: 100%;
-    padding-right: @DefaultSpace;
+  padding-right: @DefaultSpace;
-    border-bottom: 1px solid @BaseMedium;
+  border-bottom: 1px solid @BaseMedium;
-    margin-bottom: @DefaultSpace;
+  margin-bottom: @DefaultSpace;
 }
 
 .query-builder-toolbar {
-    background-color: #ffffff;
+  background-color: #ffffff;
-    /*[{plugin-background-color}]*/
+  /*[{plugin-background-color}]*/
-    min-width: 600px;
+  min-width: 600px;
-    height: 30px;
+  height: 30px;
-    border-bottom: 1px solid #DDDDDD;
+  border-bottom: 1px solid #dddddd;
-    /*[1px solid {environment-commandbar-toolbar-separator}]*/
+  /*[1px solid {environment-commandbar-toolbar-separator}]*/
 }
 
 .query-builder-toolbar .query-toolbar-group {
-    display: inline-block;
+  display: inline-block;
-    height: 24px;
+  height: 24px;
-    margin: 2px 0px;
+  margin: 2px 0px;
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button {
-    min-width: 0px;
+  min-width: 0px;
-    padding: 0px;
+  padding: 0px;
-    margin-left: 2px;
+  margin-left: 2px;
-    background-color: transparent;
+  background-color: transparent;
-    border: solid transparent;
+  border: solid transparent;
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button:active {
-    outline: 2px solid dodgerblue;
+  outline: 2px solid dodgerblue;
-    /*[2px solid {common-common-controls-button-border-hover}]*/
+  /*[2px solid {common-common-controls-button-border-hover}]*/
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button:hover {
-    background-color: #CCCEDB;
+  background-color: #cccedb;
-    /*[{common-controls-button-hover-background}]*/
+  /*[{common-controls-button-hover-background}]*/
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button.active {
-    background-color: #E6E7ED;
+  background-color: #e6e7ed;
-    /*[{common-controls-inner-tab-active-background}]*/
+  /*[{common-controls-inner-tab-active-background}]*/
-    outline: none
+  outline: none;
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button:disabled,
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button.disabled {
-    background-color: #ffffff;
+  background-color: #ffffff;
-    /*[{common-controls-button-disabled-background}]*/
+  /*[{common-controls-button-disabled-background}]*/
-    background: transparent;
+  background: transparent;
-    border: 1px solid transparent;
+  border: 1px solid transparent;
-    outline: none;
+  outline: none;
-    opacity: 0.4;
+  opacity: 0.4;
 }
 
 .tableContainer {
-    overflow: hidden;
+  overflow: hidden;
-    .flex-display();
+  .flex-display();
-    .flex-direction();
+  .flex-direction();
 }
 
-.tablesQueryTab{
+.tablesQueryTab {
-    padding-left: @MediumSpace;
+  padding-left: @MediumSpace;
-    width: 100%;
+  width: 100%;
-    margin-bottom:@LargeSpace;
+  margin-bottom: @LargeSpace;
 }
 
 .entity-error-Img {
-    width: @WarningErrorIconSize;
+  width: @WarningErrorIconSize;
-    height: @WarningErrorIconSize;
+  height: @WarningErrorIconSize;
-    margin: @DefaultSpace 0px 0px @SmallSpace;
+  margin: @DefaultSpace 0px 0px @SmallSpace;
 }
 
 .query-editor-panel {
-    margin-right: 16px;
+  margin-right: 16px;
-    margin-left: 16px;
+  margin-left: 16px;
-    margin-top: 25px;
+  margin-top: 25px;
-    position: relative;
+  position: relative;
-    vertical-align: middle;
+  vertical-align: middle;
-    cursor: default;
+  cursor: default;
 }
 
 .query-editor-text {
-    width: 100%;
+  width: 100%;
-    margin: 2px;
+  margin: 2px;
-    border: solid 1px #A9ACB3;
+  border: solid 1px #a9acb3;
-    /*[{plugin-textbox-disabled-color}]*/
+  /*[{plugin-textbox-disabled-color}]*/
-    resize: none;
+  resize: none;
-    margin-top: -39px;
+  margin-top: -39px;
-    background-color: #ddd;
+  background-color: #ddd;
-    padding: 5px;
+  padding: 5px;
 }
 
 .error-bar {
-    padding: @LargeSpace 34px @MediumSpace 24px;
+  padding: @LargeSpace 34px @MediumSpace 24px;
 }
 
 .error-message {
-    background-color: @BaseLow;
+  background-color: @BaseLow;
-    padding: @DefaultSpace;
+  padding: @DefaultSpace;
-    display: inline-flex;
+  display: inline-flex;
 }
 
 .error-text {
-    padding-left: @MediumSpace;
+  padding-left: @MediumSpace;
 }
 
 .query-editor-text-invalid {
-    width: 100%;
+  width: 100%;
-    margin: 2px;
+  margin: 2px;
-    border: 1px solid #e51400;
+  border: 1px solid #e51400;
-    resize: none;
+  resize: none;
-    margin-top: -30px;
+  margin-top: -30px;
 }
 
 .query-editor-panel .warning-bar {
-    width: 100%;
+  width: 100%;
-    height: 20px;
+  height: 20px;
-    background-color: #ffffff;
+  background-color: #ffffff;
-    /*[{plugin-background-color}]*/
+  /*[{plugin-background-color}]*/
-    position: absolute;
+  position: absolute;
-    top: -24px;
+  top: -24px;
 }
 
 .query-editor-panel .warning-bar .warning-message {
-    display: inline-flex;
+  display: inline-flex;
-    padding-top: 2px;
+  padding-top: 2px;
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
 .query-editor-panel .warning-bar .warning-message .warning-text {
-    margin-left: 2px;
+  margin-left: 2px;
 }
 
-.advanced-options-panel{
+.advanced-options-panel {
-    margin-bottom: @DefaultSpace;
+  margin-bottom: @DefaultSpace;
 }
 
 .advanced-options-panel .advanced-heading .advanced-title {
-    display: inline-flex;
+  display: inline-flex;
-    margin-left: 27px;
+  margin-left: 27px;
-    margin-top: 10px;
+  margin-top: 10px;
-    cursor: default;
+  cursor: default;
 }
 
 .advanced-options-panel .advanced-options {
-    margin-left: 32px;
+  margin-left: 32px;
-    margin-top: 5px;
+  margin-top: 5px;
-    border: 1px solid transparent;
+  border: 1px solid transparent;
 }
 
 hr {
-    margin-top: 10px;
+  margin-top: 10px;
-    margin-bottom: 12px;
+  margin-bottom: 12px;
-    border: 0;
+  border: 0;
-    border-top: 1px solid #ccc;
+  border-top: 1px solid #ccc;
 }
 
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
+  -webkit-appearance: none;
 }
 
 .advanced-options-panel .advanced-options .top .top-input {
-    width: 100px;
+  width: 100px;
-    word-spacing: normal;
+  word-spacing: normal;
-    color: #1E1E1E;
+  color: #1e1e1e;
-    /*[{common-controls-button-foreground}]*/
+  /*[{common-controls-button-foreground}]*/
-    border: 1px solid #CCCEDB;
+  border: 1px solid #cccedb;
-    /*[1px solid {plugin-textbox-border-color}]*/
+  /*[1px solid {plugin-textbox-border-color}]*/
-    height: 20px;
+  height: 20px;
-    margin-left: 8px;
+  margin-left: 8px;
 }
 
 .advanced-options-panel .advanced-options .top .invalid-top {
-    color: red;
+  color: red;
 }
 
 .advanced-options-panel .advanced-options .select {
-    margin-top: 18px;
+  margin-top: 18px;
-    display: inline-flex;
+  display: inline-flex;
 }
 
 .advanced-options-icon {
-    margin-left: 2px;
+  margin-left: 2px;
-    vertical-align: sub;
+  vertical-align: sub;
 }
 
 .advanced-options-panel .advanced-options .select .select-options-text {
-    margin-left: 4px;
+  margin-left: 4px;
 }
 
 .advanced-options-panel .advanced-options .select .select-options-link {
-    margin-left: 4px;
+  margin-left: 4px;
-    cursor: pointer;
+  cursor: pointer;
-    outline: none;
+  padding: 2px;
 }
 
 .query-panel .row .column-headers .Field {
-    padding-left: 95px;
+  padding-left: 95px;
-    padding-right: 0px;
+  padding-right: 0px;
-    padding-bottom: 6px;
+  padding-bottom: 6px;
 }
 
 .clause-table {
-    border-spacing: 0px;
+  border-spacing: 0px;
-    display: table;
+  display: table;
-    width: 100%;
+  width: 100%;
-    margin-top: -3px;
+  margin-top: -3px;
 }
 
 .clause-table-row {
-    display: row;
+  display: row;
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .clause-table-cell {
-    display: table-cell;
+  display: table-cell;
-    text-align: left;
+  text-align: left;
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
-.action-column>button,
+.action-column > button,
-.group-control-header>button,
+.group-control-header > button,
-.group-indicator-column>button {
+.group-indicator-column > button {
-    min-width: 20px;
+  min-width: 20px;
-    width: 20px;
+  width: 20px;
-    padding: 0px;
+  padding: 0px;
-    background-color: transparent;
+  background-color: transparent;
-    border-color: transparent;
+  border-color: transparent;
-    cursor: pointer;
+  cursor: pointer;
 }
 
-.group-control-header>button:disabled {
+.group-control-header > button:disabled {
-    min-width: 20px;
+  min-width: 20px;
-    width: 20px;
+  width: 20px;
-    padding: 0px;
+  padding: 0px;
-    background-color: transparent;
+  background-color: transparent;
-    border-color: transparent;
+  border-color: transparent;
-    outline: none;
+  outline: none;
-    opacity: 0.4;
+  opacity: 0.4;
-    cursor: default;
+  cursor: default;
 }
 
 .clause-table-field {
-    width: 100%;
+  width: 100%;
-    border: 1px solid #bbbbbb;
+  border: 1px solid #bbbbbb;
 }
 
 .clause-table-cell button {
-    height: 20px;
+  height: 20px;
 }
 
 .clause-table-cell input[type="checkbox"] {
-    padding: 0px;
+  padding: 0px;
-    margin-bottom: 12px;
+  margin-bottom: 12px;
 }
 
 .and-or-svg {
-    margin-top: -8px;
+  margin-top: -8px;
-    margin-right: -5px;
+  margin-right: -5px;
 }
 
 .scroll-box {
-    border-bottom: 1px transparent #DDD;
+  border-bottom: 1px transparent #ddd;
-    /*[1px solid {plugin-table-border-color}]*/
+  /*[1px solid {plugin-table-border-color}]*/
-    border-top: 1px transparent #DDD;
+  border-top: 1px transparent #ddd;
-    /*[1px solid {plugin-table-border-color}]*/
+  /*[1px solid {plugin-table-border-color}]*/
-    max-height: 20vh;
+  max-height: 20vh;
-    width: 100%;
+  width: 100%;
 }
 
 .scrollable {
-    overflow: auto;
+  overflow: auto;
-    overflow-x: hidden;
+  overflow-x: hidden;
 }
 
 .and-or-column,
 .and-or-header {
-    min-width: 65px;
+  min-width: 65px;
-    padding-right: 10px;
+  padding-right: 10px;
-    padding-left: 5px;
+  padding-left: 5px;
 }
 
 .operator-column,
 .operator-header {
-    min-width: 65px;
+  min-width: 65px;
-    padding-right: 10px;
+  padding-right: 10px;
 }
 
 .field-header,
 .field-column {
-    min-width: 125px;
+  min-width: 125px;
-    padding-right: 10px;
+  padding-right: 10px;
 }
 
 .type-header,
 .type-column {
-    min-width: 85px;
+  min-width: 85px;
 }
 
 .and-or-column,
@@ -345,41 +345,41 @@ input::-webkit-inner-spin-button {
 .type-header,
 .type-column,
 .action-header {
-    padding-right: 10px;
+  padding-right: 10px;
-    margin-bottom: 8px;
+  margin-bottom: 8px;
 }
 
 .value-header,
 .value-column,
 .time-column {
-    min-width: 230px;
+  min-width: 230px;
-    padding: 0px 4px 0px 0px;
+  padding: 0px 4px 0px 0px;
-    width: 100%;
+  width: 100%;
-    margin-bottom: 8px;
+  margin-bottom: 8px;
 }
 
 .group-control-header,
 .group-control-column {
-    min-width: 25px;
+  min-width: 25px;
-    text-align: right;
+  text-align: right;
 }
 
 .group-indicator-table {
-    border-spacing: 0px;
+  border-spacing: 0px;
-    min-height: 24px
+  min-height: 24px;
 }
 
 .group-indicator-column {
-    min-width: 21px;
+  min-width: 21px;
-    padding: 0px;
+  padding: 0px;
-    border-style: none;
+  border-style: none;
-    height: 29px;
+  height: 29px;
 }
 
-.clause-table-cell.action-column, 
+.clause-table-cell.action-column,
 .clause-table-cell.action-header {
-    min-width: 60px;
+  min-width: 60px;
-    padding-left: @SmallSpace;
+  padding-left: @SmallSpace;
 }
 
 .action-header,
@@ -388,15 +388,14 @@ input::-webkit-inner-spin-button {
 .operator-header,
 .value-header,
 .and-or-header {
-    padding-right: 4px;
+  padding-right: 4px;
-    padding-bottom: 5px;
+  padding-bottom: 5px;
 }
 
 .header-background {
-    background-color: #ffffff;
+  background-color: #ffffff;
 }
 
-
 /*.type-header {
     padding-right: 4px;
 }
@@ -410,112 +409,111 @@ input::-webkit-inner-spin-button {
 }*/
 
 .clause-table-field[readonly] {
-    background-color: #EEEEF2;
+  background-color: #eeeef2;
-    /*[{plugin-table-header-background-color}]*/
+  /*[{plugin-table-header-background-color}]*/
-    border: 1px solid #CCCEDB;
+  border: 1px solid #cccedb;
-    /*[{plugin-table-border-color}]*/
+  /*[{plugin-table-border-color}]*/
 }
 
 .addClause-title {
-    /*[{common-common-controls-button-border-hover}]*/
+  /*[{common-common-controls-button-border-hover}]*/
-    cursor: pointer;
+  cursor: pointer;
-    margin-left: -5px;
+  margin-left: -5px;
 }
 
 .addClause {
-    width: 125px;
+  width: 125px;
-    padding: 8px 0px 5px 5px;
+  padding: 8px 0px 5px 5px;
-    border: 1px solid #fff;
+  border: 1px solid #fff;
-    margin-left: 5px;
+  margin-left: 5px;
 }
 
 .addClause:hover {
-    .hover();
+  .hover();
 }
 
 .addClause:active {
-    .active();
+  .active();
-    border: 1px dashed @AccentMedium;
+  border: 1px dashed @AccentMedium;
 }
 
 .clause-table-row {
-    min-width: 550px;
+  min-width: 550px;
-    width: 100%;
+  width: 100%;
 }
 
 .clause-table-field field-column {
-    min-width: 75px;
+  min-width: 75px;
-    height: 30px;
+  height: 30px;
-    width: 100%;
+  width: 100%;
 }
 
 .clause-table-field field-input {
-    min-width: 54px;
+  min-width: 54px;
-    margin-left: -78px;
+  margin-left: -78px;
-    height: 25px;
+  height: 25px;
-    border: none;
+  border: none;
 }
 
 .query-panel .row .spacing {
-    padding-bottom: 6px;
+  padding-bottom: 6px;
 }
 
 .query-panel .divider.horizontal {
-    height: 10px;
+  height: 10px;
-    width: 100%
+  width: 100%;
 }
 
 .inline-div {
-    display: inline
+  display: inline;
 }
 
 .querybuilder-addpropertyImg,
 .querybuilder-cancelImg {
-    width: 14px;
+  width: 14px;
-    height: 14px;
+  height: 14px;
-    margin-left: 3px;
+  margin-left: 3px;
-    margin-bottom: 8px;
+  margin-bottom: 8px;
 }
 
 .addclauseProperty-Img {
-    width: 14px;
+  width: 14px;
-    height: 14px;
+  height: 14px;
-    margin-bottom: 5px;
+  margin-bottom: 5px;
-    margin-left: 12px;
+  margin-left: 12px;
 }
 
 .entity-Add-Cancel {
-    padding: @DefaultSpace @SmallSpace @SmallSpace;
+  // padding: @DefaultSpace @SmallSpace @SmallSpace;
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .entity-Add-Cancel:hover {
-    .hover();
+  .hover();
 }
 
 .entity-Add-Cancel:active {
-    .active();
+  .active();
 }
 
 .query-builder-isDisabled {
-    border: 1px solid #CCCEDB;
+  border: 1px solid #cccedb;
-    color: #ccc;
+  color: #ccc;
 }
 
 .edit-value-text {
-    padding-left: @DefaultSpace;
+  padding-left: @DefaultSpace;
 }
 
 .expand-triangle {
-    width: 10px;
+  width: 10px;
-    height: 10px;
+  height: 10px;
 }
 
 .expand-triangle-right {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 
-
 /*
 @media only screen and (max-width: 1200px) {
     .clause-table {
@@ -524,4 +522,4 @@ input::-webkit-inner-spin-button {
         width: 100%;
         padding-top: 10px;
     }
-}*/
+}*/

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;
@@ -2642,6 +2646,11 @@ a:link {
   width: @ActiveTabWidth;
 }
 
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .tabNavText {
+  font-weight: bolder;
+  border-bottom: 2px solid rgba(0,120,212,1);
+}
+
 .nav-tabs > li.active:focus > .tabNavContentContainer {
   .focus();
 }
@@ -3087,3 +3096,4 @@ a:link {
   background: white;
   height: 100%;
 }
+

less/documentDBFabric.less

@@ -0,0 +1,211 @@
+@import "./Common/Constants";
+
+html {
+  font-family: @FabricFont;
+}
+
+body {
+  font-family: @FabricFont;
+  background-color: #f5f5f5;
+}
+
+a {
+  color: @FabricAccentMedium;
+  text-decoration: none;
+}
+
+a:hover,
+a:focus {
+  color: @FabricAccentMediumHigh;
+  text-decoration: underline;
+}
+
+#divExplorer {
+  background-color: #f5f5f5;
+}
+
+.resourceTreeAndTabs {
+  border-radius: @FabricBoxBorderRadius;
+  box-shadow: @FabricBoxBorderShadow;
+  margin: @FabricBoxMargin;
+  margin-top: 4px;
+  background-color: #ffffff;
+}
+
+.tabsManagerContainer {
+  background-color: #fafafa
+}
+
+.nav-tabs-margin {
+  padding-top: 8px;
+  background-color: #fafafa
+}
+
+.commandBarContainer {
+  background-color: #ffffff;
+  border-bottom: none;
+  border-radius: @FabricBoxBorderRadius;
+  box-shadow: @FabricBoxBorderShadow;
+  margin: @FabricBoxMargin;
+  padding-top: 2px;
+}
+
+.dividerContainer {
+  padding: @SmallSpace 0px @SmallSpace 0px;
+  .flex-display();
+
+  span {
+    border-left: @ButtonBorderWidth solid @BaseMedium;
+    margin: 0 10px 0 10px;
+  }
+}
+
+
+.nav-tabs>li>.tabNavContentContainer>.tab_Content:hover {
+  border-bottom: 2px solid #e0e0e0;
+}
+
+.nav-tabs>li.active>.tabNavContentContainer>.tab_Content,
+.nav-tabs>li.active>.tabNavContentContainer>.tab_Content:hover {
+  border-bottom: 2px solid @FabricAccentMedium;
+}
+
+.nav-tabs>li.active>.tabNavContentContainer>.tab_Content>.tabNavText {
+  border-bottom: 0px none transparent;
+}
+
+.tabNavContentContainer {
+  padding: @SmallSpace 0px @SmallSpace 0px;
+
+  &:hover {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .tab_Content {
+    border-right: 0px none transparent;
+    margin: 0px @SmallSpace 0px @SmallSpace;
+    width: calc(@TabsWidth - (@SmallSpace * 2));
+    padding-bottom: @SmallSpace;
+
+    .statusIconContainer {
+      margin-left: 0px;
+    }
+
+    .tabIconSection {
+      .cancelButton {
+        padding: 0px 0px 0px @SmallSpace;
+
+        &:hover {
+          background-color: transparent;
+        }
+
+        &:focus {
+          background-color: transparent;
+        }
+
+        &:active {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+}
+
+
+.resourceTree {
+  padding: 12px;
+}
+
+.accordion {
+  .accordionItemContainer {
+    .accordionItemHeader {
+      border-radius: 4px;
+    }
+  }
+}
+
+.treeComponent {
+  .nodeItem {
+    &:focus {
+      outline: 2px @FabricAccentMedium;
+    }
+
+    .treeNodeHeader {
+      padding: 5px 5px;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: @FabricAccentLight;
+
+        .treeMenuEllipsis {
+          opacity: 1;
+        }
+      }
+
+      &.showingMenu {
+        background-color: #eee;
+      }
+    }
+
+    .selected {
+      &>.treeNodeHeader {
+        background-color: @FabricAccentExtra;
+      }
+    }
+  }
+}
+
+
+.dataExplorerErrorConsoleContainer {
+  border-radius: @FabricBoxBorderRadius;
+  box-shadow: @FabricBoxBorderShadow;
+  margin: @FabricBoxMargin;
+  width: auto;
+  align-self: auto;
+}
+
+
+
+.filterbtnstyle {
+  background: #fff;
+  color: #000;
+  border: solid 1px #d1d1d1;
+  border-radius: 4px;
+}
+
+.filterbtnstyle:hover {
+  background: @FabricAccentLight;
+  color: #000;
+  border: solid 1px #d1d1d1;
+}
+
+.filterbtnstyle:active {
+  background: @FabricAccentLight;
+  color: #000;
+  border: solid 1px #d1d1d1;
+}
+
+.filterbtnstyle:focus {
+  background: #fff;
+  color: #000;
+  border: solid 1px #d1d1d1;
+}
+
+
+.gridRowSelected .tabdocumentsGridElement:hover {
+  background-color: @FabricAccentLight !important;
+}
+
+
+.refreshcol {
+  filter: brightness(0) saturate(100%);
+}
+
+.refreshcol1 {
+  filter: brightness(0) saturate(100%);
+}
+
+.fileImportImg img {
+  filter: brightness(0) saturate(100%);
+}

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 {
@@ -24,5 +29,3 @@
     pointer-events: none;
   }
 }
-
-

package.json

@@ -13,6 +13,7 @@
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
     "@fluentui/react": "8.14.3",
+    "@fluentui/react-components": "9.30.1",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
@@ -160,6 +161,7 @@
     "jest": "26.6.3",
     "jest-canvas-mock": "2.3.1",
     "jest-playwright-preset": "1.5.1",
+    "jest-react-hooks-shallow": "1.5.1",
     "jest-trx-results-processor": "0.0.7",
     "less": "3.8.1",
     "less-loader": "4.1.0",
@@ -197,6 +199,7 @@
     "pack:fast": "webpack  --mode development --progress",
     "copyToConsumers": "node copyToConsumers",
     "test": "rimraf coverage && jest",
+    "test:debug": "jest --runInBand",
     "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",
     "watch": "npm run start",
     "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
@@ -212,7 +215,7 @@
     "strict:find": "node ./strict-null-checks/find.js",
     "strict:add": "node ./strict-null-checks/auto-add.js",
     "compile:fullStrict": "tsc -p ./tsconfig.json --strictNullChecks",
-    "generateARMClients": "npx ts-node --compiler-options '{\"module\":\"commonjs\"}' utils/armClientGenerator/generator.ts"
+    "generateARMClients": "npx ts-node utils/armClientGenerator/generator.ts"
   },
   "repository": {
     "type": "git",
@@ -232,4 +235,4 @@
   "prettier": {
     "printWidth": 120
   }
-}
+}

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>

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;
@@ -356,15 +358,13 @@ export enum ContainerStatusType {
 
 export enum PoolIdType {
   DefaultPoolId = "default",
+  QueryCopilot = "query-copilot",
 }
 
 export const EmulatorMasterKey =
   //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
   "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
 
-// A variable @MyVariable defined in Constants.less is accessible as StyleConstants.MyVariable
-export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
-
 export class Notebook {
   public static readonly defaultBasePath = "./notebooks";
   public static readonly heartbeatDelayMs = 60000;
@@ -426,3 +426,246 @@ export class JunoEndpoints {
   public static readonly Prod = "https://tools.cosmos.azure.com";
   public static readonly Stage = "https://tools-staging.cosmos.azure.com";
 }
+
+export class PriorityLevel {
+  public static readonly High = "high";
+  public static readonly Low = "low";
+  public static readonly Default = "low";
+}
+
+export const QueryCopilotSampleDatabaseId = "CopilotSampleDb";
+export const QueryCopilotSampleContainerId = "SampleContainer";
+
+export const QueryCopilotSampleContainerSchema = {
+  product: {
+    sampleData: {
+      id: "c415e70f-9bf5-4cda-aebe-a290cb8b94c2",
+      name: "Amazing Phone 3000 (Black)",
+      price: 223.33,
+      category: "Electronics",
+      description:
+        "This Amazing Phone 3000 (Black) is made of black metal! It has a very well made aluminum body and it feels very comfortable. We loved the sound that comes out of it! Also, the design of the phone was a little loose at first because I was using the camera and felt uncomfortable wearing it. The phone is actually made slightly smaller than these photos! This is due to the addition of a 3.3mm filter",
+      stock: 84,
+      countryOfOrigin: "USA",
+      firstAvailable: "2018-09-07 19:41:44",
+      priceHistory: [238.68, 234.7, 221.49, 205.88, 220.15],
+      customerRatings: [
+        {
+          username: "steven66",
+          firstName: "Carol",
+          gender: "female",
+          lastName: "Shelton",
+          age: "25-35",
+          area: "suburban",
+          address: "261 Collins Burgs Apt. 332\nNorth Taylor, NM 32268",
+          stars: 5,
+          date: "2021-04-22 13:42:14",
+          verifiedUser: true,
+        },
+        {
+          username: "khudson",
+          firstName: "Ronald",
+          gender: "male",
+          lastName: "Webb",
+          age: "18-24",
+          area: "suburban",
+          address: "9912 Parker Court Apt. 068\nNorth Austin, HI 76225",
+          stars: 5,
+          date: "2021-02-07 07:00:22",
+          verifiedUser: false,
+        },
+        {
+          username: "lfrancis",
+          firstName: "Brady",
+          gender: "male",
+          lastName: "Wright",
+          age: "35-45",
+          area: "urban",
+          address: "PSC 5437, Box 3159\nAPO AA 26385",
+          stars: 2,
+          date: "2022-02-23 21:40:10",
+          verifiedUser: false,
+        },
+        {
+          username: "nicolemartinez",
+          firstName: "Megan",
+          gender: "female",
+          lastName: "Tran",
+          age: "18-24",
+          area: "rural",
+          address: "7445 Salazar Brooks\nNew Sarah, PW 18097",
+          stars: 4,
+          date: "2021-09-01 22:21:40",
+          verifiedUser: false,
+        },
+        {
+          username: "uguzman",
+          firstName: "Deanna",
+          gender: "female",
+          lastName: "Campbell",
+          age: "18-24",
+          area: "urban",
+          address: "41104 Moreno Fort Suite 872\nPort Michaelbury, AK 48712",
+          stars: 1,
+          date: "2022-03-07 02:23:14",
+          verifiedUser: false,
+        },
+        {
+          username: "rebeccahunt",
+          firstName: "Jared",
+          gender: "male",
+          lastName: "Lopez",
+          age: "18-24",
+          area: "rural",
+          address: "392 Morgan Village Apt. 785\nGreenshire, CT 05921",
+          stars: 5,
+          date: "2021-04-17 04:17:49",
+          verifiedUser: false,
+        },
+      ],
+      rareProperty: true,
+    },
+    schema: {
+      properties: {
+        id: {
+          type: "string",
+        },
+        name: {
+          type: "string",
+        },
+        price: {
+          type: "number",
+        },
+        category: {
+          type: "string",
+        },
+        description: {
+          type: "string",
+        },
+        stock: {
+          type: "number",
+        },
+        countryOfOrigin: {
+          type: "string",
+        },
+        firstAvailable: {
+          type: "string",
+        },
+        priceHistory: {
+          items: {
+            type: "number",
+          },
+          type: "array",
+        },
+        customerRatings: {
+          items: {
+            properties: {
+              username: {
+                type: "string",
+              },
+              firstName: {
+                type: "string",
+              },
+              gender: {
+                type: "string",
+              },
+              lastName: {
+                type: "string",
+              },
+              age: {
+                type: "string",
+              },
+              area: {
+                type: "string",
+              },
+              address: {
+                type: "string",
+              },
+              stars: {
+                type: "number",
+              },
+              date: {
+                type: "string",
+              },
+              verifiedUser: {
+                type: "boolean",
+              },
+            },
+            type: "object",
+          },
+          type: "array",
+        },
+        rareProperty: {
+          type: "boolean",
+        },
+      },
+      type: "object",
+    },
+  },
+};
+
+export const ShortenedQueryCopilotSampleContainerSchema = {
+  containerSchema: {
+    product: {
+      sampleData: {
+        categoryName: "Components, Saddles",
+
+        name: "LL Road Seat/Saddle",
+
+        price: 27.12,
+
+        tags: [
+          {
+            id: "0573D684-9140-4DEE-89AF-4E4A90E65666",
+
+            name: "Tag-113",
+          },
+
+          {
+            id: "6C2F05C8-1E61-4912-BE1A-C67A378429BB",
+
+            name: "Tag-5",
+          },
+        ],
+      },
+
+      schema: {
+        properties: {
+          categoryName: {
+            type: "string",
+          },
+
+          name: {
+            type: "string",
+          },
+
+          price: {
+            type: "number",
+          },
+
+          tags: {
+            items: {
+              properties: {
+                id: {
+                  type: "string",
+                },
+
+                name: {
+                  type: "string",
+                },
+              },
+
+              type: "object",
+            },
+
+            type: "array",
+          },
+        },
+
+        type: "object",
+      },
+    },
+  },
+
+  userPrompt: "find all products",
+};

src/Common/CosmosClient.ts

@@ -4,6 +4,9 @@ import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
 import { getErrorMessage } from "./ErrorHandlingUtils";
+import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
+import { PriorityLevel } from "../Common/Constants";
+import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 
 const _global = typeof self === "undefined" ? window : self;
 
@@ -105,6 +108,13 @@ export function client(): Cosmos.CosmosClient {
   if (configContext.PROXY_PATH !== undefined) {
     (options as any).plugins = [{ on: "request", plugin: requestPlugin }];
   }
+
+  if (userContext.features.enablePriorityBasedThrottling && userContext.apiType === "SQL") {
+    const plugins = (options as any).plugins || [];
+    plugins.push({ on: "request", plugin: PriorityBasedExecutionUtils.requestPlugin });
+    (options as any).plugins = plugins;
+  }
+
   _client = new Cosmos.CosmosClient(options);
   return _client;
 }

src/Common/EntityValue.tsx

@@ -39,7 +39,6 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
         />
         <TextField
           label={entityValueLabel && entityValueLabel}
-          id="entityTimeId"
           autoFocus
           type="time"
           value={entityTimeValue}
@@ -54,8 +53,6 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
     <TextField
       label={entityValueLabel && entityValueLabel}
       className="addEntityTextField"
-      id="entityValueId"
-      autoFocus
       disabled={isEntityValueDisable}
       type={entityValueType}
       placeholder={entityValuePlaceholder}

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

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: {

src/Common/ResourceTreeContainer.tsx

@@ -1,11 +1,14 @@
+import { ResourceTree } from "Explorer/Tree/ResourceTree";
 import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
 import arrowLeftImg from "../../images/imgarrowlefticon.svg";
 import refreshImg from "../../images/refresh-cosmos.svg";
 import { AuthType } from "../AuthType";
 import Explorer from "../Explorer/Explorer";
 import { ResourceTokenTree } from "../Explorer/Tree/ResourceTokenTree";
-import { ResourceTree } from "../Explorer/Tree/ResourceTree";
+import { ResourceTree2 } from "../Explorer/Tree2/ResourceTree";
 import { userContext } from "../UserContext";
+import { getApiShortDisplayName } from "../Utils/APITypeUtils";
+import { Platform, configContext } from "./../ConfigContext";
 import { NormalizedEventKey } from "./Constants";
 
 export interface ResourceTreeContainerProps {
@@ -42,7 +45,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 +53,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 +65,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}
               >
@@ -75,6 +78,8 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
           <ResourceTokenTree />
         ) : userContext.features.enableKoResourceTree ? (
           <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
+        ) : configContext.platform === Platform.Fabric ? (
+          <ResourceTree2 container={container} />
         ) : (
           <ResourceTree container={container} />
         )}

src/Common/SampleDataClient.ts

@@ -0,0 +1,26 @@
+import * as Cosmos from "@azure/cosmos";
+import { userContext } from "UserContext";
+
+let _sampleDataclient: Cosmos.CosmosClient;
+
+export function sampleDataClient(): Cosmos.CosmosClient {
+  if (_sampleDataclient) {
+    return _sampleDataclient;
+  }
+
+  const sampleDataConnectionInfo = userContext.sampleDataConnectionInfo;
+  const options: Cosmos.CosmosClientOptions = {
+    endpoint: sampleDataConnectionInfo.accountEndpoint,
+    tokenProvider: async () => {
+      const sampleDataConnectionInfo = userContext.sampleDataConnectionInfo;
+      return Promise.resolve(sampleDataConnectionInfo.resourceToken);
+    },
+    connectionPolicy: {
+      enableEndpointDiscovery: false,
+    },
+    userAgentSuffix: "Azure Portal",
+  };
+
+  _sampleDataclient = new Cosmos.CosmosClient(options);
+  return _sampleDataclient;
+}

src/Common/StyleConstants.ts

@@ -0,0 +1,18 @@
+import { Platform, configContext } from "../ConfigContext";
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
+
+export function updateStyles(): void {
+  if (configContext.platform === Platform.Fabric) {
+    StyleConstants.AccentMediumHigh = StyleConstants.FabricAccentMediumHigh;
+    StyleConstants.AccentMedium = StyleConstants.FabricAccentMedium;
+    StyleConstants.AccentLight = StyleConstants.FabricAccentLight;
+    StyleConstants.AccentAccentExtra = StyleConstants.FabricAccentMediumHigh;
+  } else {
+    StyleConstants.AccentMediumHigh = StyleConstants.PortalAccentMediumHigh;
+    StyleConstants.AccentMedium = StyleConstants.PortalAccentMedium;
+    StyleConstants.AccentLight = StyleConstants.PortalAccentLight;
+    StyleConstants.AccentAccentExtra = StyleConstants.PortalAccentMediumHigh;
+  }
+}

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;
@@ -95,7 +106,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
       <Stack horizontal tokens={sectionStackTokens}>
         <TextField
           label={entityPropertyLabel && entityPropertyLabel}
-          id="entityPropertyId"
           autoFocus
           disabled={isPropertyTypeDisable}
           placeholder={entityPropertyPlaceHolder}
@@ -109,7 +119,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           onChange={onEntityTypeChange}
           options={options}
           disabled={isPropertyTypeDisable}
-          id="entityTypeId"
           styles={dropdownStyles}
         />
         <EntityValue
@@ -126,12 +135,29 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
         />
         {!isEntityValueDisable && (
           <TooltipHost content="Edit property" id="editTooltip">
-            <Image {...imageProps} src={EditIcon} alt="editEntity" id="editEntity" onClick={onEditEntity} />
+            <div>
+              <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>

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

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

src/Common/dataAccess/deleteDocument.ts

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

src/Common/dataAccess/getPartitionKeyValue.ts

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

src/Common/dataAccess/readCollection.ts

@@ -1,13 +1,39 @@
+import { CosmosClient } from "@azure/cosmos";
+import { sampleDataClient } from "Common/SampleDataClient";
+import { userContext } from "UserContext";
 import * as DataModels from "../../Contracts/DataModels";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 
 export async function readCollection(databaseId: string, collectionId: string): Promise<DataModels.Collection> {
+  const cosmosClient = client();
+  return await readCollectionInternal(cosmosClient, databaseId, collectionId);
+}
+
+export async function readSampleCollection(): Promise<DataModels.Collection> {
+  const cosmosClient = sampleDataClient();
+
+  const sampleDataConnectionInfo = userContext.sampleDataConnectionInfo;
+  const databaseId = sampleDataConnectionInfo?.databaseId;
+  const collectionId = sampleDataConnectionInfo?.collectionId;
+
+  if (!databaseId || !collectionId) {
+    return undefined;
+  }
+
+  return await readCollectionInternal(cosmosClient, databaseId, collectionId);
+}
+
+export async function readCollectionInternal(
+  cosmosClient: CosmosClient,
+  databaseId: string,
+  collectionId: string
+): Promise<DataModels.Collection> {
   let collection: DataModels.Collection;
   const clearMessage = logConsoleProgress(`Querying container ${collectionId}`);
   try {
-    const response = await client().database(databaseId).container(collectionId).read();
+    const response = await cosmosClient.database(databaseId).container(collectionId).read();
     collection = response.resource as DataModels.Collection;
   } catch (error) {
     handleError(error, "ReadCollection", `Error while querying container ${collectionId}`);

src/Common/dataAccess/readCollectionOffer.ts

@@ -96,6 +96,14 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
         ? parseInt(resource.minimumThroughput)
         : resource.minimumThroughput;
     const autoscaleSettings = resource.autoscaleSettings;
+    const instantMaximumThroughput: number =
+      typeof resource.instantMaximumThroughput === "string"
+        ? parseInt(resource.instantMaximumThroughput)
+        : resource.instantMaximumThroughput;
+    const softAllowedMaximumThroughput: number =
+      typeof resource.softAllowedMaximumThroughput === "string"
+        ? parseInt(resource.softAllowedMaximumThroughput)
+        : resource.softAllowedMaximumThroughput;
 
     if (autoscaleSettings) {
       return {
@@ -104,6 +112,8 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
         manualThroughput: undefined,
         minimumThroughput,
         offerReplacePending: resource.offerReplacePending === "true",
+        instantMaximumThroughput,
+        softAllowedMaximumThroughput,
       };
     }
 
@@ -113,6 +123,8 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
       manualThroughput: resource.throughput,
       minimumThroughput,
       offerReplacePending: resource.offerReplacePending === "true",
+      instantMaximumThroughput,
+      softAllowedMaximumThroughput,
     };
   }
 

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;
 

src/Common/dataAccess/readDatabaseOffer.ts

@@ -68,6 +68,14 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
         ? parseInt(resource.minimumThroughput)
         : resource.minimumThroughput;
     const autoscaleSettings = resource.autoscaleSettings;
+    const instantMaximumThroughput: number =
+      typeof resource.instantMaximumThroughput === "string"
+        ? parseInt(resource.instantMaximumThroughput)
+        : resource.instantMaximumThroughput;
+    const softAllowedMaximumThroughput: number =
+      typeof resource.softAllowedMaximumThroughput === "string"
+        ? parseInt(resource.softAllowedMaximumThroughput)
+        : resource.softAllowedMaximumThroughput;
 
     if (autoscaleSettings) {
       return {
@@ -76,6 +84,8 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
         manualThroughput: undefined,
         minimumThroughput,
         offerReplacePending: resource.offerReplacePending === "true",
+        instantMaximumThroughput,
+        softAllowedMaximumThroughput,
       };
     }
 
@@ -85,6 +95,8 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
       manualThroughput: resource.throughput,
       minimumThroughput,
       offerReplacePending: resource.offerReplacePending === "true",
+      instantMaximumThroughput,
+      softAllowedMaximumThroughput,
     };
   }
 

src/Common/dataAccess/readDocument.ts

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

src/Common/dataAccess/readStoredProcedures.ts

@@ -1,8 +1,9 @@
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
+import { CloudError, SqlStoredProcedureListResult } from "Utils/arm/generatedClients/cosmos/types";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { listSqlStoredProcedures } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { listSqlStoredProcedures } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
@@ -24,7 +25,13 @@ export async function readStoredProcedures(
         databaseId,
         collectionId
       );
-      return rpResponse?.value?.map((sproc) => sproc.properties?.resource as StoredProcedureDefinition & Resource);
+      const listResult = rpResponse as SqlStoredProcedureListResult;
+      if (listResult) {
+        return listResult?.value?.map((sproc) => sproc.properties?.resource as StoredProcedureDefinition & Resource);
+      }
+
+      const cloudError = rpResponse as CloudError;
+      throw new Error(cloudError?.error?.message);
     }
 
     const response = await client()

src/Common/dataAccess/updateDocument.ts

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

src/ConfigContext.ts

@@ -1,14 +1,14 @@
 import {
   allowedAadEndpoints,
   allowedArcadiaEndpoints,
-  allowedArmEndpoints,
-  allowedBackendEndpoints,
   allowedEmulatorEndpoints,
   allowedGraphEndpoints,
   allowedHostedExplorerEndpoints,
   allowedJunoOrigins,
   allowedMongoBackendEndpoints,
   allowedMsalRedirectEndpoints,
+  defaultAllowedArmEndpoints,
+  defaultAllowedBackendEndpoints,
   validateEndpoint,
 } from "Utils/EndpointValidation";
 
@@ -16,10 +16,13 @@ export enum Platform {
   Portal = "Portal",
   Hosted = "Hosted",
   Emulator = "Emulator",
+  Fabric = "Fabric",
 }
 
 export interface ConfigContext {
   platform: Platform;
+  allowedArmEndpoints: ReadonlyArray<string>;
+  allowedBackendEndpoints: ReadonlyArray<string>;
   allowedParentFrameOrigins: ReadonlyArray<string>;
   gitSha?: string;
   proxyPath?: string;
@@ -49,6 +52,8 @@ export interface ConfigContext {
 // Default configuration
 let configContext: Readonly<ConfigContext> = {
   platform: Platform.Portal,
+  allowedArmEndpoints: defaultAllowedArmEndpoints,
+  allowedBackendEndpoints: defaultAllowedBackendEndpoints,
   allowedParentFrameOrigins: [
     `^https:\\/\\/cosmos\\.azure\\.(com|cn|us)$`,
     `^https:\\/\\/[\\.\\w]*portal\\.azure\\.(com|cn|us)$`,
@@ -63,7 +68,7 @@ let configContext: Readonly<ConfigContext> = {
   ARM_AUTH_AREA: "https://management.azure.com/",
   ARM_ENDPOINT: "https://management.azure.com/",
   ARM_API_VERSION: "2016-06-01",
-  GRAPH_ENDPOINT: "https://graph.windows.net",
+  GRAPH_ENDPOINT: "https://graph.microsoft.com",
   GRAPH_API_VERSION: "1.6",
   ARCADIA_ENDPOINT: "https://workspaceartifacts.projectarcadia.net",
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: "dev.azuresynapse.net",
@@ -77,7 +82,7 @@ let configContext: Readonly<ConfigContext> = {
 
 export function resetConfigContext(): void {
   if (process.env.NODE_ENV !== "test") {
-    throw new Error("resetConfigContext can only becalled in a test environment");
+    throw new Error("resetConfigContext can only be called in a test environment");
   }
   configContext = {} as ConfigContext;
 }
@@ -87,7 +92,7 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     return;
   }
 
-  if (!validateEndpoint(newContext.ARM_ENDPOINT, allowedArmEndpoints)) {
+  if (!validateEndpoint(newContext.ARM_ENDPOINT, configContext.allowedArmEndpoints || defaultAllowedArmEndpoints)) {
     delete newContext.ARM_ENDPOINT;
   }
 
@@ -107,7 +112,12 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     delete newContext.ARCADIA_ENDPOINT;
   }
 
-  if (!validateEndpoint(newContext.BACKEND_ENDPOINT, allowedBackendEndpoints)) {
+  if (
+    !validateEndpoint(
+      newContext.BACKEND_ENDPOINT,
+      configContext.allowedBackendEndpoints || defaultAllowedBackendEndpoints
+    )
+  ) {
     delete newContext.BACKEND_ENDPOINT;
   }
 
@@ -130,7 +140,7 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
   Object.assign(configContext, newContext);
 }
 
-// Injected for local develpment. These will be removed in the production bundle by webpack
+// Injected for local development. These will be removed in the production bundle by webpack
 if (process.env.NODE_ENV === "development") {
   const port: string = process.env.PORT || "1234";
   updateConfigContext({
@@ -178,6 +188,7 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
           console.error(`Invalid platform query parameter: ${platform}`);
           break;
         case Platform.Portal:
+        case Platform.Fabric:
         case Platform.Hosted:
         case Platform.Emulator:
           updateConfigContext({ platform });

src/Contracts/DataModels.ts

@@ -1,11 +1,14 @@
 import { ConnectionStatusType, ContainerStatusType } from "../Common/Constants";
 
-export interface DatabaseAccount {
+export interface ArmEntity {
   id: string;
   name: string;
   location: string;
   type: string;
   kind: string;
+}
+
+export interface DatabaseAccount extends ArmEntity {
   properties: DatabaseAccountExtendedProperties;
   systemData?: DatabaseAccountSystemData;
 }
@@ -33,6 +36,9 @@ export interface DatabaseAccountExtendedProperties {
   privateEndpointConnections?: unknown[];
   capacity?: { totalThroughputLimit: number };
   locations?: DatabaseAccountResponseLocation[];
+  postgresqlEndpoint?: string;
+  publicNetworkAccess?: string;
+  vcoreMongoEndpoint?: string;
 }
 
 export interface DatabaseAccountResponseLocation {
@@ -154,6 +160,11 @@ export interface Collection extends Resource {
   requestSchema?: () => void;
 }
 
+export interface CollectionsWithPagination {
+  continuationToken?: string;
+  collections?: Collection[];
+}
+
 export interface Database extends Resource {
   collections?: Collection[];
 }
@@ -235,6 +246,8 @@ export interface Offer {
   minimumThroughput: number | undefined;
   offerDefinition?: SDKOfferDefinition;
   offerReplacePending: boolean;
+  instantMaximumThroughput?: number;
+  softAllowedMaximumThroughput?: number;
 }
 
 export interface SDKOfferDefinition extends Resource {
@@ -566,6 +579,16 @@ export interface ContainerConnectionInfo {
   //need to add ram and rom info
 }
 
+export interface FirewallRule {
+  id: string;
+  name: string;
+  type: string;
+  properties: {
+    startIpAddress: string;
+    endIpAddress: string;
+  };
+}
+
 export enum PhoenixErrorType {
   MaxAllocationTimeExceeded = "MaxAllocationTimeExceeded",
   MaxDbAccountsPerUserExceeded = "MaxDbAccountsPerUserExceeded",

src/Contracts/ExplorerContracts.ts

@@ -35,6 +35,12 @@ export enum MessageTypes {
   RefreshDatabaseAccount,
   CloseTab,
   OpenQuickstartBlade,
+  OpenPostgreSQLPasswordReset,
+  OpenPostgresNetworkingBlade,
+  OpenCosmosDBNetworkingBlade,
+  DisplayNPSSurvey,
+  OpenVCoreMongoNetworkingBlade,
+  OpenVCoreMongoConnectionStringsBlade,
 }
 
-export { Versions, ActionContracts, Diagnostics };
+export { ActionContracts, Diagnostics, Versions };

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,8 @@ export enum TerminalKind {
   Default = 0,
   Mongo = 1,
   Cassandra = 2,
+  Postgres = 3,
+  VCoreMongo = 4,
 }
 
 export interface DataExplorerInputsFrame {
@@ -395,6 +396,12 @@ export interface DataExplorerInputsFrame {
   sharedThroughputDefault?: number;
   dataExplorerVersion?: string;
   defaultCollectionThroughput?: CollectionCreationDefaults;
+  isPostgresAccount?: boolean;
+  isReplica?: boolean;
+  isVCoreMongoAccount?: 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;

src/Controls/Heatmap/Heatmap.ts

@@ -1,7 +1,7 @@
 import dayjs from "dayjs";
 import * as Plotly from "plotly.js-cartesian-dist-min";
-import { StyleConstants } from "../../Common/Constants";
 import { sendCachedDataMessage, sendReadyMessage } from "../../Common/MessageHandler";
+import { StyleConstants } from "../../Common/StyleConstants";
 import { MessageTypes } from "../../Contracts/ExplorerContracts";
 import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
 import "./Heatmap.less";

src/Explorer/ContextMenuButtonFactory.tsx

@@ -1,3 +1,7 @@
+import { useDatabases } from "Explorer/useDatabases";
+import { Action } from "Shared/Telemetry/TelemetryConstants";
+import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
+import { ReactTabKind, useTabs } from "hooks/useTabs";
 import React from "react";
 import AddCollectionIcon from "../../images/AddCollection.svg";
 import AddSqlQueryIcon from "../../images/AddSqlQuery_16x16.svg";
@@ -11,9 +15,10 @@ import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
 import DeleteUDFIcon from "../../images/DeleteUDF.svg";
 import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
 import * as ViewModels from "../Contracts/ViewModels";
-import { useSidePanel } from "../hooks/useSidePanel";
 import { userContext } from "../UserContext";
 import { getCollectionName, getDatabaseName } from "../Utils/APITypeUtils";
+import { useSidePanel } from "../hooks/useSidePanel";
+import { Platform, configContext } from "./../ConfigContext";
 import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
 import Explorer from "./Explorer";
 import { useNotebook } from "./Notebook/useNotebook";
@@ -95,11 +100,13 @@ export const createCollectionContextMenuButton = (
     });
   }
 
-  if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
+  if (
+    configContext.platform !== Platform.Fabric &&
+    (userContext.apiType === "SQL" || userContext.apiType === "Gremlin")
+  ) {
     items.push({
       iconSrc: AddStoredProcedureIcon,
       onClick: () => {
-        const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
         selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection, undefined);
       },
       label: "New Stored Procedure",
@@ -108,7 +115,6 @@ export const createCollectionContextMenuButton = (
     items.push({
       iconSrc: AddUdfIcon,
       onClick: () => {
-        const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
         selectedCollection && selectedCollection.onNewUserDefinedFunctionClick(selectedCollection);
       },
       label: "New UDF",
@@ -117,7 +123,6 @@ export const createCollectionContextMenuButton = (
     items.push({
       iconSrc: AddTriggerIcon,
       onClick: () => {
-        const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
         selectedCollection && selectedCollection.onNewTriggerClick(selectedCollection, undefined);
       },
       label: "New Trigger",
@@ -126,13 +131,15 @@ export const createCollectionContextMenuButton = (
 
   items.push({
     iconSrc: DeleteCollectionIcon,
-    onClick: () =>
+    onClick: () => {
+      useSelectedNode.getState().setSelectedNode(selectedCollection);
       useSidePanel
         .getState()
         .openSidePanel(
           "Delete " + getCollectionName(),
           <DeleteCollectionConfirmationPane refreshDatabases={() => container.refreshAllDatabases()} />
-        ),
+        );
+    },
     label: `Delete ${getCollectionName()}`,
     styleClass: "deleteCollectionMenuItem",
   });
@@ -140,6 +147,32 @@ export const createCollectionContextMenuButton = (
   return items;
 };
 
+export const createSampleCollectionContextMenuButton = (): TreeNodeMenuItem[] => {
+  const items: TreeNodeMenuItem[] = [];
+  if (userContext.apiType === "SQL") {
+    const copilotVersion = userContext.features.copilotVersion;
+    if (copilotVersion === "v1.0") {
+      items.push({
+        iconSrc: AddSqlQueryIcon,
+        onClick: () => {
+          useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot);
+          traceOpen(Action.OpenQueryCopilotFromNewQuery, { apiType: userContext.apiType });
+        },
+        label: "New SQL Query",
+      });
+    } else if (copilotVersion === "v2.0") {
+      const sampleCollection = useDatabases.getState().sampleDataResourceTokenCollection;
+      items.push({
+        iconSrc: AddSqlQueryIcon,
+        onClick: () => sampleCollection && sampleCollection.onNewQueryClick(sampleCollection, undefined),
+        label: "New SQL Query",
+      });
+    }
+  }
+
+  return items;
+};
+
 export const createStoreProcedureContextMenuItems = (
   container: Explorer,
   storedProcedure: StoredProcedure
@@ -152,7 +185,7 @@ export const createStoreProcedureContextMenuItems = (
     {
       iconSrc: DeleteSprocIcon,
       onClick: () => storedProcedure.delete(),
-      label: "Delete Store Procedure",
+      label: "Delete Stored Procedure",
     },
   ];
 };

src/Explorer/Controls/Accordion/AccordionComponent.tsx

@@ -25,6 +25,8 @@ export class AccordionComponent extends React.Component<AccordionComponentProps>
 export interface AccordionItemComponentProps {
   title: string;
   isExpanded?: boolean;
+  containerStyles?: React.CSSProperties;
+  styles?: React.CSSProperties;
 }
 
 interface AccordionItemComponentState {
@@ -53,14 +55,19 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
   }
 
   public render(): JSX.Element {
+    const { containerStyles, styles } = this.props;
     return (
-      <div className="accordionItemContainer">
+      <div className="accordionItemContainer" style={{ ...containerStyles }}>
         <div className="accordionItemHeader" onClick={this.onHeaderClick} onKeyPress={this.onHeaderKeyPress}>
           {this.renderCollapseExpandIcon()}
           {this.props.title}
         </div>
         <div className="accordionItemContent">
-          <AnimateHeight duration={AccordionItemComponent.durationMS} height={this.state.isExpanded ? "auto" : 0}>
+          <AnimateHeight
+            style={{ ...styles }}
+            duration={AccordionItemComponent.durationMS}
+            height={this.state.isExpanded ? "auto" : 0}
+          >
             {this.props.children}
           </AnimateHeight>
         </div>
@@ -73,7 +80,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"
       />

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -49,7 +49,6 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
           onClick={this.toggleCollapsed}
           onKeyPress={this.onKeyPress}
           tabIndex={0}
-          aria-name="Advanced"
           role="button"
           aria-expanded={this.state.isExpanded}
         >

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

@@ -4,7 +4,6 @@ exports[`CollapsibleSectionComponent renders 1`] = `
 <Fragment>
   <Stack
     aria-expanded={true}
-    aria-name="Advanced"
     className="collapsibleSection"
     horizontal={true}
     onClick={[Function]}

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -13,8 +13,14 @@ export interface EditorReactProps {
   ariaLabel: string; // Sets what will be read to the user to define the control
   onContentSelected?: (selectedContent: string) => void; // Called when text is selected
   onContentChanged?: (newContent: string) => void; // Called when text is changed
-  lineNumbers?: monaco.editor.IEditorOptions["lineNumbers"];
   theme?: string; // Monaco editor theme
+  wordWrap?: monaco.editor.IEditorOptions["wordWrap"];
+  lineNumbers?: monaco.editor.IEditorOptions["lineNumbers"];
+  lineNumbersMinChars?: monaco.editor.IEditorOptions["lineNumbersMinChars"];
+  lineDecorationsWidth?: monaco.editor.IEditorOptions["lineDecorationsWidth"];
+  minimap?: monaco.editor.IEditorOptions["minimap"];
+  scrollBeyondLastLine?: monaco.editor.IEditorOptions["scrollBeyondLastLine"];
+  monacoContainerStyles?: React.CSSProperties;
 }
 
 export class EditorReact extends React.Component<EditorReactProps, EditorReactStates> {
@@ -31,6 +37,13 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
   public componentDidMount(): void {
     this.createEditor(this.configureEditor.bind(this));
+
+    setTimeout(() => {
+      const suggestionWidget = this.editor?.getDomNode()?.querySelector(".suggest-widget") as HTMLElement;
+      if (suggestionWidget) {
+        suggestionWidget.style.display = "none";
+      }
+    }, 100);
   }
 
   public componentDidUpdate(previous: EditorReactProps) {
@@ -47,7 +60,11 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
     return (
       <React.Fragment>
         {!this.state.showEditor && <Spinner size={SpinnerSize.large} className="spinner" />}
-        <div className="jsonEditor" ref={(elt: HTMLElement) => this.setRef(elt)} />
+        <div
+          className="jsonEditor"
+          style={this.props.monacoContainerStyles}
+          ref={(elt: HTMLElement) => this.setRef(elt)}
+        />
       </React.Fragment>
     );
   }
@@ -77,14 +94,19 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
    */
   private async createEditor(createCallback: (e: monaco.editor.IStandaloneCodeEditor) => void) {
     const options: monaco.editor.IEditorConstructionOptions = {
-      value: this.props.content,
       language: this.props.language,
+      value: this.props.content,
       readOnly: this.props.isReadOnly,
-      lineNumbers: this.props.lineNumbers || "off",
-      fontSize: 12,
       ariaLabel: this.props.ariaLabel,
-      theme: this.props.theme,
+      fontSize: 12,
       automaticLayout: true,
+      theme: this.props.theme,
+      wordWrap: this.props.wordWrap || "off",
+      lineNumbers: this.props.lineNumbers || "off",
+      lineNumbersMinChars: this.props.lineNumbersMinChars,
+      lineDecorationsWidth: this.props.lineDecorationsWidth,
+      minimap: this.props.minimap,
+      scrollBeyondLastLine: this.props.scrollBeyondLastLine,
     };
 
     this.rootNode.innerHTML = "";

src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx

@@ -32,6 +32,20 @@ const testCassandraAccount: DataModels.DatabaseAccount = {
   },
 };
 
+const testPostgresAccount: DataModels.DatabaseAccount = {
+  ...testAccount,
+  properties: {
+    postgresqlEndpoint: "https://testPostgresEndpoint.azure.com/",
+  },
+};
+
+const testVCoreMongoAccount: DataModels.DatabaseAccount = {
+  ...testAccount,
+  properties: {
+    vcoreMongoEndpoint: "https://testVCoreMongoEndpoint.azure.com/",
+  },
+};
+
 const testNotebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo = {
   authToken: "authToken",
   notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com",
@@ -50,6 +64,18 @@ const testCassandraNotebookServerInfo: DataModels.NotebookWorkspaceConnectionInf
   forwardingId: "Id",
 };
 
+const testPostgresNotebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo = {
+  authToken: "authToken",
+  notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/postgresql",
+  forwardingId: "Id",
+};
+
+const testVCoreMongoNotebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo = {
+  authToken: "authToken",
+  notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/mongovcore",
+  forwardingId: "Id",
+};
+
 describe("NotebookTerminalComponent", () => {
   it("renders terminal", () => {
     const props: NotebookTerminalComponentProps = {
@@ -94,4 +120,27 @@ describe("NotebookTerminalComponent", () => {
     const wrapper = shallow(<NotebookTerminalComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it("renders Postgres shell", () => {
+    const props: NotebookTerminalComponentProps = {
+      databaseAccount: testPostgresAccount,
+      notebookServerInfo: testPostgresNotebookServerInfo,
+      tabId: undefined,
+    };
+
+    const wrapper = shallow(<NotebookTerminalComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders vCore Mongo shell", () => {
+    const props: NotebookTerminalComponentProps = {
+      databaseAccount: testVCoreMongoAccount,
+      notebookServerInfo: testVCoreMongoNotebookServerInfo,
+      tabId: undefined,
+      username: "username",
+    };
+
+    const wrapper = shallow(<NotebookTerminalComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
 });

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";
@@ -13,6 +14,7 @@ export interface NotebookTerminalComponentProps {
   notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo;
   databaseAccount: DataModels.DatabaseAccount;
   tabId: string;
+  username?: string;
 }
 
 export class NotebookTerminalComponent extends React.Component<NotebookTerminalComponentProps> {
@@ -40,6 +42,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();
   }
 
@@ -48,7 +51,7 @@ export class NotebookTerminalComponent extends React.Component<NotebookTerminalC
       return;
     }
 
-    const props: TerminalProps = {
+    let props: TerminalProps = {
       terminalEndpoint: this.tryGetTerminalEndpoint(),
       notebookServerEndpoint: this.props.notebookServerInfo?.notebookServerEndpoint,
       authToken: this.props.notebookServerInfo?.authToken,
@@ -59,6 +62,13 @@ export class NotebookTerminalComponent extends React.Component<NotebookTerminalC
       tabId: this.props.tabId,
     };
 
+    if (this.props.username) {
+      props = {
+        ...props,
+        username: this.props.username,
+      };
+    }
+
     postRobot.send(this.terminalWindow, "props", props, {
       domain: window.location.origin,
     });
@@ -74,6 +84,10 @@ 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;
+    } else if (StringUtils.endsWith(notebookServerEndpoint, "mongovcore")) {
+      return this.props.databaseAccount?.properties.vcoreMongoEndpoint;
     }
 
     if (terminalEndpoint) {

src/Explorer/Controls/Notebook/__snapshots__/NotebookTerminalComponent.test.tsx.snap

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`NotebookTerminalComponent renders Postgres shell 1`] = `
+<div
+  className="notebookTerminalContainer"
+>
+  <iframe
+    onLoad={[Function]}
+    src="terminal.html"
+    title="Terminal to Notebook Server"
+  />
+</div>
+`;
+
 exports[`NotebookTerminalComponent renders cassandra shell 1`] = `
 <div
   className="notebookTerminalContainer"
@@ -47,3 +59,15 @@ exports[`NotebookTerminalComponent renders terminal 1`] = `
   />
 </div>
 `;
+
+exports[`NotebookTerminalComponent renders vCore Mongo shell 1`] = `
+<div
+  className="notebookTerminalContainer"
+>
+  <iframe
+    onLoad={[Function]}
+    src="terminal.html"
+    title="Terminal to Notebook Server"
+  />
+</div>
+`;

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>

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"

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -23,9 +23,9 @@ import * as React from "react";
 import * as _ from "underscore";
 import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
 import * as Constants from "../../../Common/Constants";
-import { StyleConstants } from "../../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import { QueriesClient } from "../../../Common/QueriesClient";
+import { StyleConstants } from "../../../Common/StyleConstants";
 import * as DataModels from "../../../Contracts/DataModels";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -5,18 +5,18 @@ import DiscardIcon from "../../../../images/discard.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";
 import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
 import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
 import { updateCollection } from "../../../Common/dataAccess/updateCollection";
 import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../../UserContext";
-import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter";
 import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
@@ -37,15 +37,15 @@ import {
   AddMongoIndexProps,
   ChangeFeedPolicyState,
   GeospatialConfigType,
+  MongoIndexTypes,
+  SettingsV2TabTypes,
+  TtlType,
   getMongoNotification,
   getTabTitle,
   hasDatabaseSharedThroughput,
   isDirty,
-  MongoIndexTypes,
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
-  SettingsV2TabTypes,
-  TtlType,
 } from "./SettingsUtils";
 
 interface SettingsV2TabInfo {
@@ -78,6 +78,8 @@ export interface SettingsComponentState {
   timeToLiveBaseline: TtlType;
   timeToLiveSeconds: number;
   timeToLiveSecondsBaseline: number;
+  displayedTtlSeconds: string;
+  displayedTtlSecondsBaseline: string;
   geospatialConfigType: GeospatialConfigType;
   geospatialConfigTypeBaseline: GeospatialConfigType;
   analyticalStorageTtlSelection: TtlType;
@@ -164,6 +166,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       timeToLiveBaseline: undefined,
       timeToLiveSeconds: undefined,
       timeToLiveSecondsBaseline: undefined,
+      displayedTtlSeconds: undefined,
+      displayedTtlSecondsBaseline: undefined,
       geospatialConfigType: undefined,
       geospatialConfigTypeBaseline: undefined,
       analyticalStorageTtlSelection: undefined,
@@ -369,6 +373,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       throughput: this.state.throughputBaseline,
       timeToLive: this.state.timeToLiveBaseline,
       timeToLiveSeconds: this.state.timeToLiveSecondsBaseline,
+      displayedTtlSeconds: this.state.displayedTtlSecondsBaseline,
       geospatialConfigType: this.state.geospatialConfigTypeBaseline,
       indexingPolicyContent: this.state.indexingPolicyContentBaseline,
       indexesToAdd: [],
@@ -479,6 +484,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private onTimeToLiveSecondsChange = (newTimeToLiveSeconds: number): void =>
     this.setState({ timeToLiveSeconds: newTimeToLiveSeconds });
 
+  private onDisplayedTtlChange = (newDisplayedTtlSeconds: string): void =>
+    this.setState({ displayedTtlSeconds: newDisplayedTtlSeconds });
+
   private onGeoSpatialConfigTypeChange = (newGeoSpatialConfigType: GeospatialConfigType): void =>
     this.setState({ geospatialConfigType: newGeoSpatialConfigType });
 
@@ -608,6 +616,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         break;
     }
 
+    const displayedTtlSeconds: string = timeToLive === TtlType.On ? timeToLiveSeconds.toString() : "";
+
     let analyticalStorageTtlSelection: TtlType;
     let analyticalStorageTtlSeconds: number;
     if (this.isAnalyticalStorageEnabled) {
@@ -645,6 +655,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       timeToLiveBaseline: timeToLive,
       timeToLiveSeconds: timeToLiveSeconds,
       timeToLiveSecondsBaseline: timeToLiveSeconds,
+      displayedTtlSeconds: displayedTtlSeconds,
+      displayedTtlSecondsBaseline: displayedTtlSeconds,
       analyticalStorageTtlSelection: analyticalStorageTtlSelection,
       analyticalStorageTtlSelectionBaseline: analyticalStorageTtlSelection,
       analyticalStorageTtlSeconds: analyticalStorageTtlSeconds,
@@ -986,6 +998,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       timeToLiveSeconds: this.state.timeToLiveSeconds,
       timeToLiveSecondsBaseline: this.state.timeToLiveSecondsBaseline,
       onTimeToLiveSecondsChange: this.onTimeToLiveSecondsChange,
+      displayedTtlSeconds: this.state.displayedTtlSeconds,
+      onDisplayedTtlSecondsChange: this.onDisplayedTtlChange,
       geospatialConfigType: this.state.geospatialConfigType,
       geospatialConfigTypeBaseline: this.state.geospatialConfigTypeBaseline,
       onGeoSpatialConfigTypeChange: this.onGeoSpatialConfigTypeChange,

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

@@ -1,46 +1,29 @@
 import { shallow } from "enzyme";
 import React from "react";
-import { IColumn, Text } from "@fluentui/react";
 import {
-  getAutoPilotV3SpendElement,
-  getEstimatedSpendingElement,
-  manualToAutoscaleDisclaimerElement,
-  ttlWarning,
-  indexingPolicynUnsavedWarningMessage,
-  updateThroughputBeyondLimitWarningMessage,
-  updateThroughputDelayedApplyWarningMessage,
-  getThroughputApplyDelayedMessage,
-  getThroughputApplyShortDelayMessage,
-  getThroughputApplyLongDelayMessage,
-  getToolTipContainer,
-  conflictResolutionCustomToolTip,
-  changeFeedPolicyToolTip,
-  conflictResolutionLwwTooltip,
-  mongoIndexingPolicyDisclaimer,
-  mongoIndexingPolicyAADError,
-  mongoIndexTransformationRefreshingMessage,
-  renderMongoIndexTransformationRefreshMessage,
-  ManualEstimatedSpendingDisplayProps,
   PriceBreakdown,
+  changeFeedPolicyToolTip,
+  conflictResolutionCustomToolTip,
+  conflictResolutionLwwTooltip,
+  getEstimatedSpendingElement,
   getRuPriceBreakdown,
+  getThroughputApplyDelayedMessage,
+  getThroughputApplyLongDelayMessage,
+  getThroughputApplyShortDelayMessage,
+  getToolTipContainer,
+  indexingPolicynUnsavedWarningMessage,
+  manualToAutoscaleDisclaimerElement,
+  mongoIndexTransformationRefreshingMessage,
+  mongoIndexingPolicyAADError,
+  mongoIndexingPolicyDisclaimer,
+  renderMongoIndexTransformationRefreshMessage,
+  ttlWarning,
+  updateThroughputDelayedApplyWarningMessage,
 } from "./SettingsRenderUtils";
 
 class SettingsRenderUtilsTestComponent extends React.Component {
   public render(): JSX.Element {
-    const estimatedSpendingColumns: IColumn[] = [
+    const costElement: JSX.Element = <></>;
-      { key: "costType", name: "", fieldName: "costType", minWidth: 100, maxWidth: 200, isResizable: true },
-      { key: "hourly", name: "Hourly", fieldName: "hourly", minWidth: 100, maxWidth: 200, isResizable: true },
-      { key: "daily", name: "Daily", fieldName: "daily", minWidth: 100, maxWidth: 200, isResizable: true },
-      { key: "monthly", name: "Monthly", fieldName: "monthly", minWidth: 100, maxWidth: 200, isResizable: true },
-    ];
-    const estimatedSpendingItems: ManualEstimatedSpendingDisplayProps[] = [
-      {
-        costType: <Text>Current Cost</Text>,
-        hourly: <Text>$ 1.02</Text>,
-        daily: <Text>$ 24.48</Text>,
-        monthly: <Text>$ 744.6</Text>,
-      },
-    ];
     const priceBreakdown: PriceBreakdown = {
       hourlyPrice: 1.02,
       dailyPrice: 24.48,
@@ -52,17 +35,11 @@ class SettingsRenderUtilsTestComponent extends React.Component {
 
     return (
       <>
-        {getAutoPilotV3SpendElement(1000, false)}
+        {getEstimatedSpendingElement(costElement, 1000, 2, priceBreakdown, false)}
-        {getAutoPilotV3SpendElement(undefined, false)}
-        {getAutoPilotV3SpendElement(1000, true)}
-        {getAutoPilotV3SpendElement(undefined, true)}
-
-        {getEstimatedSpendingElement(estimatedSpendingColumns, estimatedSpendingItems, 1000, 2, priceBreakdown, false)}
 
         {manualToAutoscaleDisclaimerElement}
         {ttlWarning}
         {indexingPolicynUnsavedWarningMessage}
-        {updateThroughputBeyondLimitWarningMessage}
         {updateThroughputDelayedApplyWarningMessage}
 
         {getThroughputApplyDelayedMessage(false, 1000, "RU/s", "sampleDb", "sampleCollection", 2000)}

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -1,10 +1,7 @@
 import {
-  DetailsList,
-  DetailsListLayoutMode,
   DetailsRow,
   ICheckboxStyles,
   IChoiceGroupStyles,
-  IColumn,
   IDetailsColumnStyles,
   IDetailsListStyles,
   IDetailsRowProps,
@@ -20,16 +17,15 @@ import {
   Link,
   MessageBar,
   MessageBarType,
-  SelectionMode,
   Spinner,
   SpinnerSize,
   Stack,
   Text,
 } from "@fluentui/react";
 import * as React from "react";
-import { StyleConstants, Urls } from "../../../Common/Constants";
+import { Urls } from "../../../Common/Constants";
-import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
+import { StyleConstants } from "../../../Common/StyleConstants";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import { hoursInAMonth } from "../../../Shared/Constants";
 import {
   computeRUUsagePriceHourly,
   estimatedCostDisclaimer,
@@ -103,6 +99,10 @@ export const checkBoxAndInputStackProps: Partial<IStackProps> = {
   tokens: { childrenGap: 10 },
 };
 
+export const relaxedSpacingStackProps: Partial<IStackProps> = {
+  tokens: { childrenGap: 20 },
+};
+
 export const toolTipLabelStackTokens: IStackTokens = {
   childrenGap: 6,
 };
@@ -174,41 +174,6 @@ export function onRenderRow(props: IDetailsRowProps): JSX.Element {
   return <DetailsRow {...props} styles={transparentDetailsRowStyles} />;
 }
 
-export const getAutoPilotV3SpendElement = (
-  maxAutoPilotThroughputSet: number,
-  isDatabaseThroughput: boolean,
-  requestUnitsUsageCostElement?: JSX.Element
-): JSX.Element => {
-  if (!maxAutoPilotThroughputSet) {
-    return <></>;
-  }
-
-  const resource: string = isDatabaseThroughput ? "database" : "container";
-  return (
-    <>
-      <Text>
-        Your {resource} throughput will automatically scale from{" "}
-        <b>
-          {AutoPilotUtils.getMinRUsBasedOnUserInput(maxAutoPilotThroughputSet)} RU/s (10% of max RU/s) -{" "}
-          {maxAutoPilotThroughputSet} RU/s
-        </b>{" "}
-        based on usage.
-        <br />
-      </Text>
-      {requestUnitsUsageCostElement}
-      <Text>
-        After the first {AutoPilotUtils.getStorageBasedOnUserInput(maxAutoPilotThroughputSet)} GB of data stored, the
-        max RU/s will be automatically upgraded based on the new storage value.
-        <Link href={AutopilotDocumentation.Url} target="_blank">
-          {" "}
-          Learn more
-        </Link>
-        .
-      </Text>
-    </>
-  );
-};
-
 export const getRuPriceBreakdown = (
   throughput: number,
   serverId: string,
@@ -238,8 +203,7 @@ export const getRuPriceBreakdown = (
 };
 
 export const getEstimatedSpendingElement = (
-  estimatedSpendingColumns: IColumn[],
+  costElement: JSX.Element,
-  estimatedSpendingItems: EstimatedSpendingDisplayProps[],
   throughput: number,
   numberOfRegions: number,
   priceBreakdown: PriceBreakdown,
@@ -247,22 +211,25 @@ export const getEstimatedSpendingElement = (
 ): JSX.Element => {
   const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
   return (
-    <Stack {...addMongoIndexStackProps} styles={mediumWidthStackStyles}>
+    <Stack>
-      <DetailsList
+      <Text style={{ fontWeight: 600 }}>Cost estimate*</Text>
-        disableSelectionZone
+      {costElement}
-        items={estimatedSpendingItems}
+      <Text style={{ fontWeight: 600, marginTop: 15 }}>How we calculate this</Text>
-        columns={estimatedSpendingColumns}
+      <Stack id="throughputSpendElement" style={{ marginTop: 5 }}>
-        selectionMode={SelectionMode.none}
+        <span>
-        layoutMode={DetailsListLayoutMode.justified}
+          {numberOfRegions} region{numberOfRegions > 1 && <span>s</span>}
-        onRenderRow={onRenderRow}
+        </span>
-      />
+        <span>
-      <Text id="throughputSpendElement">
+          {ruRange}
-        ({"regions: "} {numberOfRegions}, {ruRange}
+          {throughput} RU/s
-        {throughput} RU/s, {priceBreakdown.currencySign}
+        </span>
-        {priceBreakdown.pricePerRu}/RU)
+        <span>
-      </Text>
+          {priceBreakdown.currencySign}
-      <Text>
+          {priceBreakdown.pricePerRu}/RU
-        <em>{estimatedCostDisclaimer}</em>
+        </span>
+      </Stack>
+      <Text style={{ marginTop: 15 }}>
+        <em>*{estimatedCostDisclaimer}</em>
       </Text>
     </Stack>
   );
@@ -293,14 +260,6 @@ export const indexingPolicynUnsavedWarningMessage: JSX.Element = (
   </Text>
 );
 
-export const updateThroughputBeyondLimitWarningMessage: JSX.Element = (
-  <Text styles={infoAndToolTipTextStyle} id="updateThroughputBeyondLimitWarningMessage">
-    You are about to request an increase in throughput beyond the pre-allocated capacity. The service will scale out and
-    increase throughput for the selected container. This operation will take 1-3 business days to complete. You can
-    track the status of this request in Notifications.
-  </Text>
-);
-
 export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
   <Text styles={infoAndToolTipTextStyle} id="updateThroughputDelayedApplyWarningMessage">
     You are about to request an increase in throughput beyond the pre-allocated capacity. This operation will take some
@@ -308,6 +267,61 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
   </Text>
 );
 
+export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => {
+  return (
+    <Text styles={infoAndToolTipTextStyle} id="updateThroughputDelayedApplyWarningMessage">
+      Scaling up will take 4-6 hours as it exceeds what Azure Cosmos DB can instantly support currently based on your
+      number of physical partitions. You can increase your throughput to {instantMaximumThroughput} instantly or proceed
+      with this value and wait until the scale-up is completed.
+    </Text>
+  );
+};
+
+export const getUpdateThroughputBeyondSupportLimitMessage = (
+  instantMaximumThroughput: number,
+  maximumThroughput: number
+): JSX.Element => {
+  return (
+    <>
+      <Text styles={infoAndToolTipTextStyle} id="updateThroughputDelayedApplyWarningMessage">
+        Your request to increase throughput exceeds the pre-allocated capacity which may take longer than expected.
+        There are three options you can choose from to proceed:
+      </Text>
+      <ol style={{ fontSize: 14, color: "windowtext", marginTop: "5px" }}>
+        <li>You can instantly scale up to {instantMaximumThroughput} RU/s.</li>
+        {instantMaximumThroughput < maximumThroughput && (
+          <li>You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.</li>
+        )}
+        <li>
+          Your current quota max is {maximumThroughput} RU/s. To go over this limit, you must request a quota increase
+          and the Azure Cosmos DB team will review.
+          <Link
+            href="https://learn.microsoft.com/en-us/azure/cosmos-db/nosql/create-support-request-quota-increase"
+            target="_blank"
+          >
+            Learn more
+          </Link>
+        </li>
+      </ol>
+    </>
+  );
+};
+
+export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Element => {
+  return (
+    <Text styles={infoAndToolTipTextStyle}>
+      You are not able to lower throughput below your current minimum of {minimum} RU/s. For more information on this
+      limit, please refer to our service quote documentation.
+      <Link
+        href="https://learn.microsoft.com/en-us/azure/cosmos-db/concepts-limits#minimum-throughput-limits"
+        target="_blank"
+      >
+        Learn more
+      </Link>
+    </Text>
+  );
+};
+
 export const saveThroughputWarningMessage: JSX.Element = (
   <Text styles={infoAndToolTipTextStyle}>
     Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
@@ -499,7 +513,11 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
   },
 });
 
-export const getChoiceGroupStyles = (current: isDirtyTypes, baseline: isDirtyTypes): Partial<IChoiceGroupStyles> => ({
+export const getChoiceGroupStyles = (
+  current: isDirtyTypes,
+  baseline: isDirtyTypes,
+  isHorizontal?: boolean
+): Partial<IChoiceGroupStyles> => ({
   flexContainer: [
     {
       selectors: {
@@ -516,6 +534,8 @@ export const getChoiceGroupStyles = (current: isDirtyTypes, baseline: isDirtyTyp
           padding: "2px 5px",
         },
       },
+      display: isHorizontal ? "inline-flex" : "default",
+      columnGap: isHorizontal ? "30px" : "default",
     },
   ],
 });

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

@@ -3,7 +3,6 @@ import ko from "knockout";
 import React from "react";
 import * as Constants from "../../../../Common/Constants";
 import * as DataModels from "../../../../Contracts/DataModels";
-import * as SharedConstants from "../../../../Shared/Constants";
 import { updateUserContext } from "../../../../UserContext";
 import Explorer from "../../../Explorer";
 import { throughputUnit } from "../SettingsRenderUtils";
@@ -12,7 +11,6 @@ import { ScaleComponent, ScaleComponentProps } from "./ScaleComponent";
 import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
 
 describe("ScaleComponent", () => {
-  const nonNationalCloudContainer = new Explorer();
   const targetThroughput = 6000;
 
   const baseProps: ScaleComponentProps = {
@@ -125,11 +123,4 @@ describe("ScaleComponent", () => {
     scaleComponent = new ScaleComponent(newProps);
     expect(scaleComponent.canThroughputExceedMaximumValue()).toEqual(true);
   });
-
-  it("getThroughputWarningMessage", () => {
-    const throughputBeyondLimit = SharedConstants.CollectionCreation.DefaultCollectionRUs1Million + 1000;
-    const newProps = { ...baseProps, container: nonNationalCloudContainer, throughput: throughputBeyondLimit };
-    const scaleComponent = new ScaleComponent(newProps);
-    expect(scaleComponent.getThroughputWarningMessage().props.id).toEqual("updateThroughputBeyondLimitWarningMessage");
-  });
 });

src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx

@@ -1,7 +1,7 @@
-import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "@fluentui/react";
+import { Link, MessageBar, MessageBarType, Stack, Text, TextField } from "@fluentui/react";
 import * as React from "react";
 import * as Constants from "../../../../Common/Constants";
-import { configContext, Platform } from "../../../../ConfigContext";
+import { Platform, configContext } from "../../../../ConfigContext";
 import * as DataModels from "../../../../Contracts/DataModels";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import * as SharedConstants from "../../../../Shared/Constants";
@@ -15,7 +15,6 @@ import {
   subComponentStackProps,
   throughputUnit,
   titleAndInputStackProps,
-  updateThroughputBeyondLimitWarningMessage,
 } from "../SettingsRenderUtils";
 import { hasDatabaseSharedThroughput } from "../SettingsUtils";
 import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
@@ -68,16 +67,6 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
     return !!enableAutoScaleCapability;
   };
 
-  private getStorageCapacityTitle = (): JSX.Element => {
-    const capacity: string = this.props.isFixedContainer ? "Fixed" : "Unlimited";
-    return (
-      <Stack {...titleAndInputStackProps}>
-        <Label>Storage capacity</Label>
-        <Text>{capacity}</Text>
-      </Stack>
-    );
-  };
-
   public getMaxRUs = (): number => {
     if (userContext.isTryCosmosDBSubscription) {
       return Constants.TryCosmosExperience.maxRU;
@@ -131,18 +120,6 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
     return undefined;
   };
 
-  public getThroughputWarningMessage = (): JSX.Element => {
-    const throughputExceedsBackendLimits: boolean =
-      this.canThroughputExceedMaximumValue() &&
-      this.props.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs1Million;
-
-    if (throughputExceedsBackendLimits && !this.props.isFixedContainer) {
-      return updateThroughputBeyondLimitWarningMessage;
-    }
-
-    return undefined;
-  };
-
   public getLongDelayMessage = (): JSX.Element => {
     const matches: string[] = this.props.initialNotification?.description.match(
       `Throughput update for (.*) ${throughputUnit}`
@@ -188,9 +165,10 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       spendAckChecked={false}
       onScaleSaveableChange={this.props.onScaleSaveableChange}
       onScaleDiscardableChange={this.props.onScaleDiscardableChange}
-      getThroughputWarningMessage={this.getThroughputWarningMessage}
       usageSizeInKB={this.props.collection?.usageSizeInKB()}
       throughputError={this.props.throughputError}
+      instantMaximumThroughput={this.offer?.instantMaximumThroughput}
+      softAllowedMaximumThroughput={this.offer?.softAllowedMaximumThroughput}
     />
   );
 
@@ -229,12 +207,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
         {this.getInitialNotificationElement() && (
           <MessageBar messageBarType={MessageBarType.warning}>{this.getInitialNotificationElement()}</MessageBar>
         )}
-        {!this.isAutoScaleEnabled() && (
+        {!this.isAutoScaleEnabled() && <Stack {...subComponentStackProps}>{this.getThroughputInputComponent()}</Stack>}
-          <Stack {...subComponentStackProps}>
-            {this.getThroughputInputComponent()}
-            {!this.props.database && this.getStorageCapacityTitle()}
-          </Stack>
-        )}
 
         {/* TODO: Replace link with call to the Azure Support blade */}
         {this.isAutoScaleEnabled() && (

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

@@ -20,6 +20,10 @@ describe("SubSettingsComponent", () => {
     onTimeToLiveSecondsChange: () => {
       return;
     },
+    displayedTtlSeconds: "1000",
+    onDisplayedTtlSecondsChange: () => {
+      return;
+    },
 
     geospatialConfigType: GeospatialConfigType.Geography,
     geospatialConfigTypeBaseline: GeospatialConfigType.Geography,

src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx

@@ -15,13 +15,13 @@ import {
 import {
   ChangeFeedPolicyState,
   GeospatialConfigType,
-  getSanitizedInputValue,
   IsComponentDirtyResult,
-  isDirty,
   TtlOff,
   TtlOn,
   TtlOnNoDefault,
   TtlType,
+  getSanitizedInputValue,
+  isDirty,
 } from "../SettingsUtils";
 import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 
@@ -34,6 +34,8 @@ export interface SubSettingsComponentProps {
   timeToLiveSeconds: number;
   timeToLiveSecondsBaseline: number;
   onTimeToLiveSecondsChange: (newTimeToLiveSeconds: number) => void;
+  displayedTtlSeconds: string;
+  onDisplayedTtlSecondsChange: (newDisplayedTtlSeconds: string) => void;
 
   geospatialConfigType: GeospatialConfigType;
   geospatialConfigTypeBaseline: GeospatialConfigType;
@@ -73,7 +75,14 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
     this.onComponentUpdate();
   }
 
-  componentDidUpdate(): void {
+  componentDidUpdate(prevProps: SubSettingsComponentProps): void {
+    if (
+      (prevProps.timeToLive === TtlType.Off || prevProps.timeToLive === TtlType.OnNoDefault) &&
+      this.props.timeToLive === TtlType.On &&
+      this.props.timeToLiveBaseline !== TtlType.On
+    ) {
+      this.props.onDisplayedTtlSecondsChange("");
+    }
     this.onComponentUpdate();
   }
 
@@ -93,7 +102,8 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   public IsComponentDirty = (): IsComponentDirtyResult => {
     if (
       (this.props.timeToLive === TtlType.On && !this.props.timeToLiveSeconds) ||
-      (this.props.analyticalStorageTtlSelection === TtlType.On && !this.props.analyticalStorageTtlSeconds)
+      (this.props.analyticalStorageTtlSelection === TtlType.On && !this.props.analyticalStorageTtlSeconds) ||
+      (this.props.timeToLive === TtlType.On && this.props.displayedTtlSeconds === "")
     ) {
       return { isSaveable: false, isDiscardable: true };
     } else if (
@@ -138,6 +148,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
     newValue?: string
   ): void => {
     const newTimeToLiveSeconds = getSanitizedInputValue(newValue, Int32.Max);
+    this.props.onDisplayedTtlSecondsChange(newTimeToLiveSeconds.toString());
     this.props.onTimeToLiveSecondsChange(newTimeToLiveSeconds);
   };
 
@@ -204,7 +215,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
             required
             min={1}
             max={Int32.Max}
-            value={this.props.timeToLiveSeconds?.toString()}
+            value={this.props.displayedTtlSeconds}
             onChange={this.onTimeToLiveSecondsChange}
             suffix="second(s)"
           />
@@ -310,7 +321,16 @@ 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>
+      )}
+
+      {userContext.apiType === "SQL" &&
+        (this.isHierarchicalPartitionedContainer() ? (
+          <Text>Hierarchically partitioned container.</Text>
+        ) : (
+          <Text>Non-hierarchically partitioned container.</Text>
+        ))}
     </Stack>
   );
 
@@ -328,6 +348,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   };
 
   public isLargePartitionKeyEnabled = (): boolean => this.props.collection.partitionKey?.version >= 2;
+  public isHierarchicalPartitionedContainer = (): boolean => this.props.collection.partitionKey?.kind === "MultiHash";
 
   public render(): JSX.Element {
     return (

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

@@ -42,7 +42,8 @@ describe("ThroughputInputAutoPilotV3Component", () => {
     onScaleDiscardableChange: () => {
       return;
     },
-    getThroughputWarningMessage: () => undefined,
+    instantMaximumThroughput: 5000,
+    softAllowedMaximumThroughput: 1000000,
   };
 
   it("throughput input visible", () => {

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -3,10 +3,14 @@ import {
   ChoiceGroup,
   FontIcon,
   IChoiceGroupOption,
-  IColumn,
+  IProgressIndicatorStyles,
+  ISeparatorStyles,
   Label,
   Link,
   MessageBar,
+  MessageBarType,
+  ProgressIndicator,
+  Separator,
   Stack,
   Text,
   TextField,
@@ -23,24 +27,24 @@ import { autoPilotThroughput1K } from "../../../../../Utils/AutoPilotUtils";
 import { calculateEstimateNumber, usageInGB } from "../../../../../Utils/PricingUtils";
 import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
 import {
-  AutoscaleEstimatedSpendingDisplayProps,
+  PriceBreakdown,
   checkBoxAndInputStackProps,
-  getAutoPilotV3SpendElement,
   getChoiceGroupStyles,
   getEstimatedSpendingElement,
   getRuPriceBreakdown,
   getTextFieldStyles,
   getToolTipContainer,
-  ManualEstimatedSpendingDisplayProps,
+  getUpdateThroughputBelowMinimumMessage,
+  getUpdateThroughputBeyondInstantLimitMessage,
+  getUpdateThroughputBeyondSupportLimitMessage,
   manualToAutoscaleDisclaimerElement,
   messageBarStyles,
   noLeftPaddingCheckBoxStyle,
-  PriceBreakdown,
+  relaxedSpacingStackProps,
   saveThroughputWarningMessage,
   titleAndInputStackProps,
-  transparentDetailsHeaderStyle,
 } from "../../SettingsRenderUtils";
-import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
+import { IsComponentDirtyResult, getSanitizedInputValue, isDirty } from "../../SettingsUtils";
 import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
 
 export interface ThroughputInputAutoPilotV3Props {
@@ -73,16 +77,16 @@ export interface ThroughputInputAutoPilotV3Props {
   onMaxAutoPilotThroughputChange: (newThroughput: number) => void;
   onScaleSaveableChange: (isScaleSaveable: boolean) => void;
   onScaleDiscardableChange: (isScaleDiscardable: boolean) => void;
-  getThroughputWarningMessage: () => JSX.Element;
   usageSizeInKB: number;
   throughputError?: string;
+  instantMaximumThroughput: number;
+  softAllowedMaximumThroughput: number;
 }
 
 interface ThroughputInputAutoPilotV3State {
   spendAckChecked: boolean;
   exceedFreeTierThroughput: boolean;
 }
-
 export class ThroughputInputAutoPilotV3Component extends React.Component<
   ThroughputInputAutoPilotV3Props,
   ThroughputInputAutoPilotV3State
@@ -128,7 +132,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       } else if (this.props.isAutoPilotSelected) {
         if (isDirty(this.props.maxAutoPilotThroughput, this.props.maxAutoPilotThroughputBaseline)) {
           isDiscardable = true;
-          if (AutoPilotUtils.isValidAutoPilotThroughput(this.props.maxAutoPilotThroughput)) {
+          if (
+            this.props.softAllowedMaximumThroughput
+              ? this.props.maxAutoPilotThroughput <= this.props.softAllowedMaximumThroughput &&
+                AutoPilotUtils.isValidAutoPilotThroughput(this.props.maxAutoPilotThroughput)
+              : AutoPilotUtils.isValidAutoPilotThroughput(this.props.maxAutoPilotThroughput)
+          ) {
             isSaveable = true;
           }
         }
@@ -187,7 +196,15 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
 
     let estimatedSpend: JSX.Element;
 
-    if (!this.props.isAutoPilotSelected) {
+    if (this.props.isAutoPilotSelected) {
+      estimatedSpend = this.getEstimatedAutoscaleSpendElement(
+        this.props.maxAutoPilotThroughputBaseline,
+        userContext.portalEnv,
+        regions,
+        multimaster,
+        isDirty ? this.props.maxAutoPilotThroughput : undefined
+      );
+    } else {
       estimatedSpend = this.getEstimatedManualSpendElement(
         // if migrating from autoscale to manual, we use the autoscale RUs value as that is what will be set...
         this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : this.props.throughputBaseline,
@@ -196,14 +213,6 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         multimaster,
         isDirty ? this.props.throughput : undefined
       );
-    } else {
-      estimatedSpend = this.getEstimatedAutoscaleSpendElement(
-        this.props.maxAutoPilotThroughputBaseline,
-        userContext.portalEnv,
-        regions,
-        multimaster,
-        isDirty ? this.props.maxAutoPilotThroughput : undefined
-      );
     }
     return estimatedSpend;
   };
@@ -216,52 +225,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     newThroughput?: number
   ): JSX.Element => {
     const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, true);
-    const estimatedSpendingColumns: IColumn[] = [
-      {
-        key: "costType",
-        name: "",
-        fieldName: "costType",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle,
-      },
-      {
-        key: "minPerMonth",
-        name: "Min Per Month",
-        fieldName: "minPerMonth",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle,
-      },
-      {
-        key: "maxPerMonth",
-        name: "Max Per Month",
-        fieldName: "maxPerMonth",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle,
-      },
-    ];
-    const estimatedSpendingItems: AutoscaleEstimatedSpendingDisplayProps[] = [
-      {
-        costType: <Text>Current Cost</Text>,
-        minPerMonth: (
-          <Text>
-            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)}
-          </Text>
-        ),
-        maxPerMonth: (
-          <Text>
-            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}
-          </Text>
-        ),
-      },
-    ];
 
-    if (newThroughput) {
+    const newThroughputCostElement = (): JSX.Element => {
       const newPrices: PriceBreakdown = getRuPriceBreakdown(
         newThroughput,
         serverId,
@@ -269,37 +234,40 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         isMultimaster,
         true
       );
-      estimatedSpendingItems.unshift({
+      return (
-        costType: (
+        <div>
-          <Text>
+          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
-            <b>Updated Cost</b>
+          <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
-          </Text>
+            <Text style={{ width: "50%" }}>
-        ),
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)} min
-        minPerMonth: (
+            </Text>
-          <Text>
+            <Text style={{ width: "50%" }}>
-            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)} max
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)}
+            </Text>
-            </b>
+          </Stack>
-          </Text>
+        </div>
-        ),
+      );
-        maxPerMonth: (
+    };
-          <Text>
-            <b>
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}
-            </b>
-          </Text>
-        ),
-      });
-    }
 
-    return getEstimatedSpendingElement(
+    const costElement = (): JSX.Element => {
-      estimatedSpendingColumns,
+      const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, true);
-      estimatedSpendingItems,
+      return (
-      newThroughput ?? throughput,
+        <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
-      numberOfRegions,
+          {newThroughput && newThroughputCostElement()}
-      prices,
+          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
-      true
+          <Stack horizontal style={{ marginTop: 5 }}>
-    );
+            <Text style={{ width: "50%" }}>
+              {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)} min
+            </Text>
+            <Text style={{ width: "50%" }}>
+              {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)} max
+            </Text>
+          </Stack>
+        </Stack>
+      );
+    };
+
+    return getEstimatedSpendingElement(costElement(), newThroughput ?? throughput, numberOfRegions, prices, true);
   };
 
   private getEstimatedManualSpendElement = (
@@ -310,122 +278,55 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     newThroughput?: number
   ): JSX.Element => {
     const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, false);
-    const estimatedSpendingColumns: IColumn[] = [
-      {
-        key: "costType",
-        name: "",
-        fieldName: "costType",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle,
-      },
-      {
-        key: "hourly",
-        name: "Hourly",
-        fieldName: "hourly",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle,
-      },
-      {
-        key: "daily",
-        name: "Daily",
-        fieldName: "daily",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle,
-      },
-      {
-        key: "monthly",
-        name: "Monthly",
-        fieldName: "monthly",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle,
-      },
-    ];
-    const estimatedSpendingItems: ManualEstimatedSpendingDisplayProps[] = [
-      {
-        costType: <Text>Current Cost</Text>,
-        hourly: (
-          <Text>
-            {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}
-          </Text>
-        ),
-        daily: (
-          <Text>
-            {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}
-          </Text>
-        ),
-        monthly: (
-          <Text>
-            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}
-          </Text>
-        ),
-      },
-    ];
 
-    if (newThroughput) {
+    const newThroughputCostElement = (): JSX.Element => {
       const newPrices: PriceBreakdown = getRuPriceBreakdown(
         newThroughput,
         serverId,
         numberOfRegions,
         isMultimaster,
-        false
+        true
       );
-      estimatedSpendingItems.unshift({
+      return (
-        costType: (
+        <div>
-          <Text>
+          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
-            <b>Updated Cost</b>
+          <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
-          </Text>
+            <Text style={{ width: "33%" }}>
-        ),
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}/hr
-        hourly: (
+            </Text>
-          <Text>
+            <Text style={{ width: "33%" }}>
-            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}/day
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}
+            </Text>
-            </b>
+            <Text style={{ width: "33%" }}>
-          </Text>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}/mo
-        ),
+            </Text>
-        daily: (
+          </Stack>
-          <Text>
+        </div>
-            <b>
+      );
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}
+    };
-            </b>
-          </Text>
-        ),
-        monthly: (
-          <Text>
-            <b>
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}
-            </b>
-          </Text>
-        ),
-      });
-    }
 
-    return getEstimatedSpendingElement(
+    const costElement = (): JSX.Element => {
-      estimatedSpendingColumns,
+      const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, true);
-      estimatedSpendingItems,
+      return (
-      newThroughput ?? throughput,
+        <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
-      numberOfRegions,
+          {newThroughput && newThroughputCostElement()}
-      prices,
+          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
-      false
+          <Stack horizontal style={{ marginTop: 5 }}>
-    );
+            <Text style={{ width: "33%" }}>
-  };
+              {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}/hr
+            </Text>
+            <Text style={{ width: "33%" }}>
+              {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}/day
+            </Text>
+            <Text style={{ width: "33%" }}>
+              {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}/mo
+            </Text>
+          </Stack>
+        </Stack>
+      );
+    };
 
-  private getAutoPilotUsageCost = (): JSX.Element => {
+    return getEstimatedSpendingElement(costElement(), newThroughput ?? throughput, numberOfRegions, prices, false);
-    if (!this.props.maxAutoPilotThroughput) {
-      return <></>;
-    }
-    return getAutoPilotV3SpendElement(
-      this.props.maxAutoPilotThroughput,
-      false /* isDatabaseThroughput */,
-      !this.props.isEmulator ? this.getRequestUnitsUsageCost() : <></>
-    );
   };
 
   private onAutoPilotThroughputChange = (
@@ -512,7 +413,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           onChange={this.onChoiceGroupChange}
           required={this.props.showAsMandatory}
           ariaLabelledBy={labelId}
-          styles={getChoiceGroupStyles(this.props.wasAutopilotOriginallySet, this.props.isAutoPilotSelected)}
+          styles={getChoiceGroupStyles(this.props.wasAutopilotOriginallySet, this.props.isAutoPilotSelected, true)}
         />
       </Stack>
     );
@@ -521,97 +422,266 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
   private onSpendAckChecked = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean): void =>
     this.setState({ spendAckChecked: checked });
 
-  private renderAutoPilotInput = (): JSX.Element => (
+  private getStorageCapacityTitle = (): JSX.Element => {
-    <>
+    const capacity: string = this.props.isFixed ? "Fixed" : "Unlimited";
-      <Text>
+    return (
-        Provision maximum RU/s required by this resource. Estimate your required RU/s with
+      <Stack {...titleAndInputStackProps}>
-        <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
+        <Label>Storage capacity</Label>
-          {` capacity calculator`}
+        <Text>{capacity}</Text>
-        </Link>
+      </Stack>
-      </Text>
+    );
-      <TextField
+  };
-        label="Max RU/s"
+
-        required
+  private thoughputRangeSeparatorStyles: Partial<ISeparatorStyles> = {
-        type="number"
+    root: [
-        id="autopilotInput"
+      {
-        key="auto pilot throughput input"
+        selectors: {
-        styles={getTextFieldStyles(this.props.maxAutoPilotThroughput, this.props.maxAutoPilotThroughputBaseline)}
+          "::before": {
-        disabled={this.overrideWithProvisionedThroughputSettings()}
+            backgroundColor: "rgb(200, 200, 200)",
-        step={AutoPilotUtils.autoPilotIncrementStep}
+            height: "3px",
-        value={this.overrideWithProvisionedThroughputSettings() ? "" : this.props.maxAutoPilotThroughput?.toString()}
+            marginTop: "-1px",
-        onChange={this.onAutoPilotThroughputChange}
+          },
-        min={autoPilotThroughput1K}
+        },
-        errorMessage={this.props.throughputError}
+      },
+    ],
+  };
+
+  private currentThroughputValue = (): number => {
+    return this.props.isAutoPilotSelected
+      ? this.props.maxAutoPilotThroughput
+      : this.overrideWithAutoPilotSettings()
+      ? this.props.maxAutoPilotThroughputBaseline
+      : this.props.throughput;
+  };
+
+  private getCurrentRuRange = (): "below" | "instant" | "delayed" | "requireSupport" => {
+    if (this.currentThroughputValue() < this.props.minimum) {
+      return "below";
+    }
+    if (
+      this.currentThroughputValue() >= this.props.minimum &&
+      this.currentThroughputValue() <= this.props.instantMaximumThroughput
+    ) {
+      return "instant";
+    }
+    if (this.currentThroughputValue() > this.props.softAllowedMaximumThroughput) {
+      return "requireSupport";
+    }
+
+    return "delayed";
+  };
+
+  private getRuThermometerStyles = (): Partial<IProgressIndicatorStyles> => ({
+    progressBar: [
+      {
+        backgroundColor:
+          this.getCurrentRuRange() === "instant"
+            ? "rgb(0, 120, 212)"
+            : this.getCurrentRuRange() === "delayed"
+            ? "rgb(255 216 109)"
+            : "rgb(251, 217, 203)",
+      },
+    ],
+  });
+
+  private getRuThermometerPercentValue = (): number => {
+    let percentValue: number;
+    const currentRus = this.currentThroughputValue();
+
+    switch (this.getCurrentRuRange()) {
+      case "below":
+        percentValue = 0;
+        break;
+      case "instant": {
+        const percentOfInstantRange: number = currentRus / this.props.instantMaximumThroughput;
+        percentValue = percentOfInstantRange * 0.34;
+        break;
+      }
+      case "delayed": {
+        const adjustedMax = this.props.softAllowedMaximumThroughput - this.props.instantMaximumThroughput;
+        const adjustedRus = currentRus - this.props.instantMaximumThroughput;
+        const percentOfDelayedRange = adjustedRus / adjustedMax;
+        const adjustedPercent = percentOfDelayedRange * 0.66;
+        percentValue = adjustedPercent + 0.34;
+        break;
+      }
+      default:
+        // over maximum
+        percentValue = 1;
+    }
+    return percentValue;
+  };
+
+  private getRUThermometer = (): JSX.Element => (
+    <Stack>
+      <Stack horizontal>
+        <Stack.Item style={{ width: "34%" }}>
+          <span>{this.props.minimum.toLocaleString()}</span>
+        </Stack.Item>
+        <Stack.Item style={{ width: "66%" }}>
+          <span style={{ float: "left", transform: "translateX(-50%)" }}>
+            {this.props.instantMaximumThroughput.toLocaleString()}
+          </span>
+          <span style={{ float: "right" }}>{this.props.softAllowedMaximumThroughput.toLocaleString()}</span>
+        </Stack.Item>
+      </Stack>
+      <ProgressIndicator
+        barHeight={20}
+        percentComplete={this.getRuThermometerPercentValue()}
+        styles={this.getRuThermometerStyles()}
       />
-      {!this.overrideWithProvisionedThroughputSettings() && this.getAutoPilotUsageCost()}
+      <Stack horizontal>
-      {this.minRUperGBSurvey()}
+        <Stack.Item style={{ width: "34%", paddingRight: "5px" }}>
-      {this.props.spendAckVisible && (
+          <Separator styles={this.thoughputRangeSeparatorStyles}>Instant</Separator>
-        <Checkbox
+        </Stack.Item>
-          id="spendAckCheckBox"
+        <Stack.Item style={{ width: "66%", paddingLeft: "5px" }}>
-          styles={noLeftPaddingCheckBoxStyle}
+          <Separator styles={this.thoughputRangeSeparatorStyles}>4-6 hrs</Separator>
-          label={this.props.spendAckText}
+        </Stack.Item>
-          checked={this.state.spendAckChecked}
+      </Stack>
-          onChange={this.onSpendAckChecked}
+    </Stack>
+  );
+
+  private showThroughputWarning = (): boolean => {
+    return (
+      this.currentThroughputValue() > this.props.instantMaximumThroughput ||
+      this.currentThroughputValue() < this.props.minimum
+    );
+  };
+
+  private getThroughputWarningMessageText = (): JSX.Element => {
+    switch (this.getCurrentRuRange()) {
+      case "below":
+        return getUpdateThroughputBelowMinimumMessage(this.props.minimum);
+      case "delayed":
+        return getUpdateThroughputBeyondInstantLimitMessage(this.props.instantMaximumThroughput);
+      case "requireSupport":
+        return getUpdateThroughputBeyondSupportLimitMessage(
+          this.props.instantMaximumThroughput,
+          this.props.softAllowedMaximumThroughput
+        );
+      default:
+        return <></>;
+    }
+  };
+
+  private getThroughputWarningMessageBar = (): JSX.Element => {
+    const isSevereWarning: boolean =
+      this.currentThroughputValue() > this.props.softAllowedMaximumThroughput ||
+      this.currentThroughputValue() < this.props.minimum;
+    return (
+      <MessageBar messageBarType={isSevereWarning ? MessageBarType.severeWarning : MessageBarType.warning}>
+        {this.getThroughputWarningMessageText()}
+      </MessageBar>
+    );
+  };
+
+  private getThroughputTextField = (): JSX.Element => (
+    <>
+      {this.props.isAutoPilotSelected ? (
+        <TextField
+          label="Maximum RU/s required by this resource"
+          required
+          type="number"
+          id="autopilotInput"
+          key="auto pilot throughput input"
+          styles={getTextFieldStyles(this.props.maxAutoPilotThroughput, this.props.maxAutoPilotThroughputBaseline)}
+          disabled={this.overrideWithProvisionedThroughputSettings()}
+          step={AutoPilotUtils.autoPilotIncrementStep}
+          value={this.overrideWithProvisionedThroughputSettings() ? "" : this.props.maxAutoPilotThroughput?.toString()}
+          onChange={this.onAutoPilotThroughputChange}
+          min={autoPilotThroughput1K}
+          onGetErrorMessage={(value: string) => {
+            const sanitizedValue = getSanitizedInputValue(value);
+            return sanitizedValue % 1000
+              ? "Throughput value must be in increments of 1000"
+              : this.props.throughputError;
+          }}
+          validateOnLoad={false}
+        />
+      ) : (
+        <TextField
+          required
+          type="number"
+          id="throughputInput"
+          key="provisioned throughput input"
+          styles={getTextFieldStyles(this.props.throughput, this.props.throughputBaseline)}
+          disabled={this.overrideWithAutoPilotSettings()}
+          step={this.step}
+          value={
+            this.overrideWithAutoPilotSettings()
+              ? this.props.maxAutoPilotThroughputBaseline?.toString()
+              : this.props.throughput?.toString()
+          }
+          onChange={this.onThroughputChange}
+          min={this.props.minimum}
+          errorMessage={this.props.throughputError}
         />
       )}
-      {this.props.isFixed && <p>When using a collection with fixed storage capacity, you can set up to 10,000 RU/s.</p>}
     </>
   );
 
-  private renderThroughputInput = (): JSX.Element => (
+  private renderThroughputComponent = (): JSX.Element => (
-    <Stack {...titleAndInputStackProps}>
+    <Stack horizontal>
-      <Text>
+      <Stack.Item style={{ width: "70%", maxWidth: "700px" }}>
-        Estimate your required throughput with
+        <Stack {...relaxedSpacingStackProps} style={{ paddingRight: "50px" }}>
-        <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
+          {this.getThroughputTextField()}
-          {` capacity calculator`} <FontIcon iconName="NavigateExternalInline" />
+          {this.props.instantMaximumThroughput && (
-        </Link>
+            <Stack>
-      </Text>
+              {this.getRUThermometer()}
-      <TextField
+              {this.showThroughputWarning() && this.getThroughputWarningMessageBar()}
-        required
+            </Stack>
-        type="number"
+          )}
-        id="throughputInput"
+          {this.props.isAutoPilotSelected ? (
-        key="provisioned throughput input"
+            <Text style={{ marginTop: "40px" }}>
-        styles={getTextFieldStyles(this.props.throughput, this.props.throughputBaseline)}
+              Based on usage, your {this.props.collectionName ? "container" : "database"} throughput will scale from{" "}
-        disabled={this.overrideWithAutoPilotSettings()}
+              <b>
-        step={this.step}
+                {AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)} RU/s (10% of max RU/s) -{" "}
-        value={
+                {this.props.maxAutoPilotThroughput} RU/s
-          this.overrideWithAutoPilotSettings()
+              </b>
-            ? this.props.maxAutoPilotThroughputBaseline?.toString()
+              <br />
-            : this.props.throughput?.toString()
+            </Text>
-        }
+          ) : (
-        onChange={this.onThroughputChange}
+            <>
-        min={this.props.minimum}
+              {this.state.exceedFreeTierThroughput && (
-        errorMessage={this.props.throughputError}
+                <MessageBar
-      />
+                  messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
-      {this.state.exceedFreeTierThroughput && (
+                  styles={messageBarStyles}
-        <MessageBar
+                  style={{ marginTop: "40px" }}
-          messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+                >
-          styles={messageBarStyles}
+                  {`Billing will apply if you provision more than ${SharedConstants.FreeTierLimits.RU} RU/s of manual throughput, or if the resource scales beyond ${SharedConstants.FreeTierLimits.RU} RU/s with autoscale.`}
-        >
+                </MessageBar>
-          {`Billing will apply if you provision more than ${SharedConstants.FreeTierLimits.RU} RU/s of manual throughput, or if the resource scales beyond ${SharedConstants.FreeTierLimits.RU} RU/s with autoscale.`}
+              )}
-        </MessageBar>
+            </>
-      )}
+          )}
-      {this.props.getThroughputWarningMessage() && (
+          {!this.overrideWithProvisionedThroughputSettings() && (
-        <MessageBar
+            <Text>
-          messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
+              Estimate your required RU/s with
-          styles={messageBarStyles}
+              <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
-        >
+                {` capacity calculator`} <FontIcon iconName="NavigateExternalInline" />
-          {this.props.getThroughputWarningMessage()}
+              </Link>
-        </MessageBar>
+            </Text>
-      )}
+          )}
-      {!this.props.isEmulator && this.getRequestUnitsUsageCost()}
+          {this.minRUperGBSurvey()}
-      {this.minRUperGBSurvey()}
+          {this.props.spendAckVisible && (
-      {this.props.spendAckVisible && (
+            <Checkbox
-        <Checkbox
+              id="spendAckCheckBox"
-          id="spendAckCheckBox"
+              styles={noLeftPaddingCheckBoxStyle}
-          styles={noLeftPaddingCheckBoxStyle}
+              label={this.props.spendAckText}
-          label={this.props.spendAckText}
+              checked={this.state.spendAckChecked}
-          checked={this.state.spendAckChecked}
+              onChange={this.onSpendAckChecked}
-          onChange={this.onSpendAckChecked}
+            />
-        />
+          )}
-      )}
+          {this.props.isFixed && (
-      <br />
+            <p>When using a collection with fixed storage capacity, you can set up to 10,000 RU/s.</p>
-      {this.props.isFixed && <p>When using a collection with fixed storage capacity, you can set up to 10,000 RU/s.</p>}
+          )}
+          {this.props.collectionName && (
+            <Stack.Item style={{ marginTop: "40px" }}>{this.getStorageCapacityTitle()}</Stack.Item>
+          )}
+        </Stack>
+      </Stack.Item>
+      <Stack.Item style={{ width: "30%", maxWidth: "300px" }}>
+        {!this.props.isEmulator ? this.getRequestUnitsUsageCost() : <></>}
+      </Stack.Item>
     </Stack>
   );
 
@@ -624,7 +694,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>
         )}
@@ -638,7 +711,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         {this.renderWarningMessage()}
         {this.renderThroughputModeChoices()}
 
-        {this.props.isAutoPilotSelected ? this.renderAutoPilotInput() : this.renderThroughputInput()}
+        {this.renderThroughputComponent()}
       </Stack>
     );
   }

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

@@ -28,6 +28,8 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
       Object {
         "flexContainer": Array [
           Object {
+            "columnGap": "default",
+            "display": "default",
             "selectors": Object {
               ".ms-ChoiceField-field.is-checked::after": Object {
                 "borderColor": undefined,
@@ -100,6 +102,8 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
       Object {
         "flexContainer": Array [
           Object {
+            "columnGap": "default",
+            "display": "default",
             "selectors": Object {
               ".ms-ChoiceField-field.is-checked::after": Object {
                 "borderColor": "",

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

@@ -39,7 +39,6 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
       canExceedMaximumValue={true}
       collectionName="test"
       databaseName="test"
-      getThroughputWarningMessage={[Function]}
       isAutoPilotSelected={false}
       isEmulator={false}
       isEnabled={true}
@@ -60,20 +59,6 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
       usageSizeInKB={100}
       wasAutopilotOriginallySet={true}
     />
-    <Stack
-      tokens={
-        Object {
-          "childrenGap": 5,
-        }
-      }
-    >
-      <StyledLabelBase>
-        Storage capacity
-      </StyledLabelBase>
-      <Text>
-        Unlimited
-      </Text>
-    </Stack>
   </Stack>
 </Stack>
 `;

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

@@ -40,6 +40,8 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
         Object {
           "flexContainer": Array [
             Object {
+              "columnGap": "default",
+              "display": "default",
               "selectors": Object {
                 ".ms-ChoiceField-field.is-checked::after": Object {
                   "borderColor": "",
@@ -106,6 +108,8 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
       Object {
         "flexContainer": Array [
           Object {
+            "columnGap": "default",
+            "display": "default",
             "selectors": Object {
               ".ms-ChoiceField-field.is-checked::after": Object {
                 "borderColor": "",
@@ -168,6 +172,8 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
         Object {
           "flexContainer": Array [
             Object {
+              "columnGap": "default",
+              "display": "default",
               "selectors": Object {
                 ".ms-ChoiceField-field.is-checked::after": Object {
                   "borderColor": "",
@@ -218,7 +224,10 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
     <Text>
       Large 
       partition key
-       has been enabled
+       has been enabled.
+    </Text>
+    <Text>
+      Non-hierarchically partitioned container.
     </Text>
   </Stack>
 </Stack>
@@ -264,6 +273,8 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
         Object {
           "flexContainer": Array [
             Object {
+              "columnGap": "default",
+              "display": "default",
               "selectors": Object {
                 ".ms-ChoiceField-field.is-checked::after": Object {
                   "borderColor": "",
@@ -330,6 +341,8 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
       Object {
         "flexContainer": Array [
           Object {
+            "columnGap": "default",
+            "display": "default",
             "selectors": Object {
               ".ms-ChoiceField-field.is-checked::after": Object {
                 "borderColor": "",
@@ -382,6 +395,8 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
         Object {
           "flexContainer": Array [
             Object {
+              "columnGap": "default",
+              "display": "default",
               "selectors": Object {
                 ".ms-ChoiceField-field.is-checked::after": Object {
                   "borderColor": undefined,
@@ -445,6 +460,8 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
         Object {
           "flexContainer": Array [
             Object {
+              "columnGap": "default",
+              "display": "default",
               "selectors": Object {
                 ".ms-ChoiceField-field.is-checked::after": Object {
                   "borderColor": "",
@@ -495,7 +512,10 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
     <Text>
       Large 
       partition key
-       has been enabled
+       has been enabled.
+    </Text>
+    <Text>
+      Non-hierarchically partitioned container.
     </Text>
   </Stack>
 </Stack>
@@ -541,6 +561,8 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
         Object {
           "flexContainer": Array [
             Object {
+              "columnGap": "default",
+              "display": "default",
               "selectors": Object {
                 ".ms-ChoiceField-field.is-checked::after": Object {
                   "borderColor": "",
@@ -607,6 +629,8 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
       Object {
         "flexContainer": Array [
           Object {
+            "columnGap": "default",
+            "display": "default",
             "selectors": Object {
               ".ms-ChoiceField-field.is-checked::after": Object {
                 "borderColor": "",
@@ -659,6 +683,8 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
         Object {
           "flexContainer": Array [
             Object {
+              "columnGap": "default",
+              "display": "default",
               "selectors": Object {
                 ".ms-ChoiceField-field.is-checked::after": Object {
                   "borderColor": "",
@@ -734,7 +760,10 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
     <Text>
       Large 
       partition key
-       has been enabled
+       has been enabled.
+    </Text>
+    <Text>
+      Non-hierarchically partitioned container.
     </Text>
   </Stack>
 </Stack>
@@ -780,6 +809,8 @@ exports[`SubSettingsComponent renders 1`] = `
         Object {
           "flexContainer": Array [
             Object {
+              "columnGap": "default",
+              "display": "default",
               "selectors": Object {
                 ".ms-ChoiceField-field.is-checked::after": Object {
                   "borderColor": "",
@@ -846,6 +877,8 @@ exports[`SubSettingsComponent renders 1`] = `
       Object {
         "flexContainer": Array [
           Object {
+            "columnGap": "default",
+            "display": "default",
             "selectors": Object {
               ".ms-ChoiceField-field.is-checked::after": Object {
                 "borderColor": "",
@@ -898,6 +931,8 @@ exports[`SubSettingsComponent renders 1`] = `
         Object {
           "flexContainer": Array [
             Object {
+              "columnGap": "default",
+              "display": "default",
               "selectors": Object {
                 ".ms-ChoiceField-field.is-checked::after": Object {
                   "borderColor": "",
@@ -986,6 +1021,8 @@ exports[`SubSettingsComponent renders 1`] = `
         Object {
           "flexContainer": Array [
             Object {
+              "columnGap": "default",
+              "display": "default",
               "selectors": Object {
                 ".ms-ChoiceField-field.is-checked::after": Object {
                   "borderColor": "",
@@ -1036,7 +1073,10 @@ exports[`SubSettingsComponent renders 1`] = `
     <Text>
       Large 
       partition key
-       has been enabled
+       has been enabled.
+    </Text>
+    <Text>
+      Non-hierarchically partitioned container.
     </Text>
   </Stack>
 </Stack>
@@ -1082,6 +1122,8 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
         Object {
           "flexContainer": Array [
             Object {
+              "columnGap": "default",
+              "display": "default",
               "selectors": Object {
                 ".ms-ChoiceField-field.is-checked::after": Object {
                   "borderColor": undefined,
@@ -1123,6 +1165,8 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
       Object {
         "flexContainer": Array [
           Object {
+            "columnGap": "default",
+            "display": "default",
             "selectors": Object {
               ".ms-ChoiceField-field.is-checked::after": Object {
                 "borderColor": "",
@@ -1175,6 +1219,8 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
         Object {
           "flexContainer": Array [
             Object {
+              "columnGap": "default",
+              "display": "default",
               "selectors": Object {
                 ".ms-ChoiceField-field.is-checked::after": Object {
                   "borderColor": "",
@@ -1263,6 +1309,8 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
         Object {
           "flexContainer": Array [
             Object {
+              "columnGap": "default",
+              "display": "default",
               "selectors": Object {
                 ".ms-ChoiceField-field.is-checked::after": Object {
                   "borderColor": "",
@@ -1313,7 +1361,10 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
     <Text>
       Large 
       partition key
-       has been enabled
+       has been enabled.
+    </Text>
+    <Text>
+      Non-hierarchically partitioned container.
     </Text>
   </Stack>
 </Stack>

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,
@@ -148,12 +150,14 @@ exports[`SettingsComponent renders 1`] = `
               "usageSizeInKB": [Function],
             }
           }
+          displayedTtlSeconds="5"
           geospatialConfigType="Geometry"
           geospatialConfigTypeBaseline="Geometry"
           isAnalyticalStorageEnabled={false}
           onAnalyticalStorageTtlSecondsChange={[Function]}
           onAnalyticalStorageTtlSelectionChange={[Function]}
           onChangeFeedPolicyChange={[Function]}
+          onDisplayedTtlSecondsChange={[Function]}
           onGeoSpatialConfigTypeChange={[Function]}
           onSubSettingsDiscardableChange={[Function]}
           onSubSettingsSaveableChange={[Function]}

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

@@ -2,154 +2,60 @@
 
 exports[`SettingsUtils functions render 1`] = `
 <Fragment>
-  <Text>
+  <Stack>
-    Your 
-    container
-     throughput will automatically scale from
-     
-    <b>
-      100
-       RU/s (10% of max RU/s) -
-       
-      1000
-       RU/s
-    </b>
-     
-    based on usage.
-    <br />
-  </Text>
-  <Text>
-    After the first 
-    10
-     GB of data stored, the max RU/s will be automatically upgraded based on the new storage value.
-    <StyledLinkBase
-      href="https://aka.ms/cosmos-autoscale-info"
-      target="_blank"
-    >
-       
-      Learn more
-    </StyledLinkBase>
-    .
-  </Text>
-  <Text>
-    Your 
-    database
-     throughput will automatically scale from
-     
-    <b>
-      100
-       RU/s (10% of max RU/s) -
-       
-      1000
-       RU/s
-    </b>
-     
-    based on usage.
-    <br />
-  </Text>
-  <Text>
-    After the first 
-    10
-     GB of data stored, the max RU/s will be automatically upgraded based on the new storage value.
-    <StyledLinkBase
-      href="https://aka.ms/cosmos-autoscale-info"
-      target="_blank"
-    >
-       
-      Learn more
-    </StyledLinkBase>
-    .
-  </Text>
-  <Stack
-    styles={
-      Object {
-        "root": Object {
-          "width": 600,
-        },
-      }
-    }
-    tokens={
-      Object {
-        "childrenGap": 10,
-      }
-    }
-  >
-    <StyledWithViewportComponent
-      columns={
-        Array [
-          Object {
-            "fieldName": "costType",
-            "isResizable": true,
-            "key": "costType",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "",
-          },
-          Object {
-            "fieldName": "hourly",
-            "isResizable": true,
-            "key": "hourly",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "Hourly",
-          },
-          Object {
-            "fieldName": "daily",
-            "isResizable": true,
-            "key": "daily",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "Daily",
-          },
-          Object {
-            "fieldName": "monthly",
-            "isResizable": true,
-            "key": "monthly",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "Monthly",
-          },
-        ]
-      }
-      disableSelectionZone={true}
-      items={
-        Array [
-          Object {
-            "costType": <Text>
-              Current Cost
-            </Text>,
-            "daily": <Text>
-              $ 24.48
-            </Text>,
-            "hourly": <Text>
-              $ 1.02
-            </Text>,
-            "monthly": <Text>
-              $ 744.6
-            </Text>,
-          },
-        ]
-      }
-      layoutMode={1}
-      onRenderRow={[Function]}
-      selectionMode={0}
-    />
     <Text
-      id="throughputSpendElement"
+      style={
+        Object {
+          "fontWeight": 600,
+        }
+      }
     >
-      (
+      Cost estimate*
-      regions: 
-       
-      2
-      , 
-      1000
-       RU/s, 
-      ¥
-      0.00051
-      /RU)
     </Text>
-    <Text>
+    <Text
+      style={
+        Object {
+          "fontWeight": 600,
+          "marginTop": 15,
+        }
+      }
+    >
+      How we calculate this
+    </Text>
+    <Stack
+      id="throughputSpendElement"
+      style={
+        Object {
+          "marginTop": 5,
+        }
+      }
+    >
+      <span>
+        2
+         region
+        <span>
+          s
+        </span>
+      </span>
+      <span>
+        1000
+         RU/s
+      </span>
+      <span>
+        ¥
+        0.00051
+        /RU
+      </span>
+    </Stack>
+    <Text
+      style={
+        Object {
+          "marginTop": 15,
+        }
+      }
+    >
       <em>
+        *
         This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
       </em>
     </Text>
@@ -205,19 +111,6 @@ exports[`SettingsUtils functions render 1`] = `
   >
     You have not saved the latest changes made to your indexing policy. Please click save to confirm the changes.
   </Text>
-  <Text
-    id="updateThroughputBeyondLimitWarningMessage"
-    styles={
-      Object {
-        "root": Object {
-          "color": "windowtext",
-          "fontSize": 14,
-        },
-      }
-    }
-  >
-    You are about to request an increase in throughput beyond the pre-allocated capacity. The service will scale out and increase throughput for the selected container. This operation will take 1-3 business days to complete. You can track the status of this request in Notifications.
-  </Text>
   <Text
     id="updateThroughputDelayedApplyWarningMessage"
     styles={